/* ==========================================================================
   SİLTEK — site stilleri (siltek.css)
   Yalnızca siltek.com.tr için; tek stil dosyası (sayfaya özel stiller de
   bu dosyanın 16. ve 19. bölümlerinde). Sayfalar ?v=N ile bağlar (şu an
   ?v=7); yayında her değişiklikte N'yi bütün sayfalarda birlikte artırın.

   İçindekiler
   0. Yazı tipleri              9. Bölüm kalıpları (P1–P17)
   1. Token'lar                10. Sahneler (SC-1, SC-2, SC-3, kuyu)
   2. Temel                    11. Formlar
   3. Düzen                    12. Hareket
   4. Tipografi yardımcıları   13. Kırılımlar
   5. Bileşenler               14. Hareket azaltma
   6. İkonlar                  15. Yazdırma
   7. Üst şerit, menü, çekmece 16. Sayfaya özel bölümler (SAYFA: … işaretleri)
   8. Alt bilgi                17. Kurumsal ton "Holding" (üzerine yazar)
                               18. Lacivert kart sistemi (.card--navy)
                               19. Sayfa ekleri, Holding tonu (SAYFA: …)
                               20. Vurgu renkleri (yazı altın, çizim
                                   "Güneş ve deniz")
                               21. Başlık yazı tipi (Libre Caslon Display)
                               22. Sadeleştirme (menü, ana sayfa akışı,
                                   hizmet kartı başlığı Manrope)
                               23. Onaylı metinler (alt bilgi üç sütun,
                                   üç hücreli künye şeridi)

   Kural: fotoğraf yok. Görseller SVG/HTML sahneleridir. Dış istek yok.
   ========================================================================== */

/* 0. Yazı tipleri — kendi sunucumuzdan (SIL Open Font License) ------------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("../fonts/dm-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("../fonts/manrope-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* 1. Token'lar -------------------------------------------------------------- */
:root {
  /* Ölçek: ekran genişliğinin %0,95'i, en fazla 13,68 px (≈1440 px ekranın %95'i).
     Bu genişlikten sonra yazı, boşluk ve çizimler büyümez; içerik ortada durur. */
  --vw: min(.95vw, 13.68px);
  /* Renk */
  --navy-950: #081822;   /* alt bilgi */
  --navy-900: #0b202e;   /* koyu bantlar */
  --navy: #102a3a;       /* ana mürekkep, birincil düğme */
  --navy-700: #1c3d53;   /* koyu zeminde yükseltilmiş yüzey */
  --steel-700: #36597a;  /* açık zeminde çelik YAZI: beyazda 7.3:1, --hover'da 6.7:1 */
  --steel: #4f7596;      /* yalnız beyaz zeminde >=16px yazı (4.9:1); çizgi, ikon */
  --steel-400: #6f93b5;  /* yalnız süs */
  --steel-300: #9fb9d1;  /* koyu zeminde yazı (navy-900 üstünde 8.2:1) */
  --steel-200: #c8d7e5;
  --steel-100: #e3ebf3;
  --steel-50: #ffffff;   /* 29 Eyl: açık mavi zemin yok; eski kâğıt tonu artık beyaz. Dolgu için #fff, üzerine gelme için --hover kullanın */
  --white: #ffffff;
  --ink: #102a3a;
  --ink-2: #41566a;      /* 7.5:1 */
  --ink-3: #56697a;      /* 5.7:1 — küçük yazı için alt sınır */
  --line: #d8e2eb;
  --line-2: #bccddd;
  --line-dark: rgba(159, 185, 209, .18);
  --on-dark: #eef3f8;
  --on-dark-2: #b7c8d8;  /* navy-900 üstünde 9.7:1 */
  --signal: #6f93b5;     /* Holding tonu: turuncu yok; eski sinyal vurgusu artık çelik mavi. Asla yazı değil */
  --paper: #f6f5f1;      /* sıcak fildişi: açık bant zemini (ink-3 üstünde 5.2:1) */
  --paper-2: #eeece6;
  --hover: #f4f5f6;      /* nötr açık gri: açık zeminde üzerine gelme / seçili (mavi değil) */
  --hover-2: #e9ebee;    /* beyaz düğmenin üzerine gelme hâli */
  --fx-gold: #c9b592;    /* yalnız FavyoFlex sahneleri, F işareti, FavyoFlex yönlendirme kutuları (yazı vurgusu için --txt-accent-on-dark aynı tonu kullanır) */
  --fx-gold-l: #e6d6b5;
  --fx-navy: #13283a;
  --focus: #36597a;
  --focus-on-dark: #9fb9d1;
  --ok: #2f8f6b;         /* yalnız "yayında" durum noktası (yanında yazıyla) */
  --error: #b3261e;      /* 6.5:1 */

  /* Yazı */
  --font-head: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fs-display: clamp(40px, calc(4.4 * var(--vw)) + 5.7px, 132px);
  --fs-h1: clamp(33px, calc(3.2 * var(--vw)) + 5.7px, 100px);
  --fs-h2: clamp(27px, calc(2.1 * var(--vw)) + 5.7px, 68px);
  --fs-h3: clamp(19px, calc(1 * var(--vw)) + 7.12px, 36px);
  --fs-h4: clamp(16px, calc(.5 * var(--vw)) + 10.45px, 24px);
  --fs-lead: clamp(17px, calc(.6 * var(--vw)) + 11.02px, 28px);
  --fs-body: clamp(16px, calc(.42 * var(--vw)) + 11.69px, 24px);
  --fs-small: clamp(14px, calc(.34 * var(--vw)) + 9.5px, 22px);
  --fs-label: clamp(11.5px, calc(.36 * var(--vw)) + 8.07px, 20px);

  /* Aralık ve düzen */
  --gutter: clamp(18px, calc(4.6 * var(--vw)), 150px);
  --maxw: 1254px;
  --gap: clamp(14px, calc(1.5 * var(--vw)), 44px);
  --sec: clamp(72px, calc(7.2 * var(--vw)), 210px);
  --sec-tight: calc(var(--sec) * .6);
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: clamp(16px, calc(1.1 * var(--vw)), 28px);
  --s5: clamp(24px, calc(1.7 * var(--vw)), 44px);
  --s6: clamp(32px, calc(2.6 * var(--vw)), 64px);
  --s7: clamp(48px, calc(3.8 * var(--vw)), 96px);
  --header-h: clamp(66px, calc(4.8 * var(--vw)), 116px);

  /* Köşe, çizgi, gölge */
  --r: 6px;                            /* düğme, alan, küçük yüzey */
  --r-lg: clamp(10px, calc(.75 * var(--vw)), 16px);    /* sahne/medya çerçevesi, kart */
  --shadow: 0 1px 2px rgba(11, 32, 46, .04), 0 14px 36px -18px rgba(11, 32, 46, .18);
  --shadow-lg: 0 2px 6px rgba(11, 32, 46, .05), 0 30px 64px -30px rgba(11, 32, 46, .32);

  /* Hareket */
  --d-fast: 160ms;
  --d: 320ms;
  --d-slow: 700ms;
  --d-draw: 1200ms;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --stagger: 80ms;
}

/* 2. Temel ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
}
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 var(--fs-body)/1.65 var(--font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
svg { max-width: 100%; }
a { color: inherit; }
p, figure, blockquote, dl, dd { margin: 0; }
p, li, dd, dt, td, th, h1, h2, h3, h4 { overflow-wrap: break-word; }
ul, ol { margin: 0; padding: 0; }
ul[class], ol[class] { list-style: none; }
h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 700;
  color: var(--navy);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); font-weight: 750; letter-spacing: -.035em; line-height: 1.04; }
h2 { font-size: var(--fs-h2); letter-spacing: -.03em; line-height: 1.08; }
h3 { font-size: var(--fs-h3); letter-spacing: -.015em; line-height: 1.2; }
h4 { font-size: var(--fs-h4); letter-spacing: -.01em; line-height: 1.3; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
strong, b { font-weight: 600; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
:is(.sec--dark, .on-dark, .site-footer, .hero-page--dark) :focus-visible { outline-color: var(--focus-on-dark); }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--steel-200); color: var(--navy); }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; z-index: 300; left: var(--gutter); top: -120px;
  padding: .75em 1.1em; border-radius: var(--r);
  background: var(--navy); color: #fff; text-decoration: none;
  font: 700 var(--fs-small)/1 var(--font-head);
}
.skip-link:focus { top: 12px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 3. Düzen ------------------------------------------------------------------ */
.wrap {
  width: min(100% - 2 * var(--gutter), var(--maxw));
  margin-inline: auto;
}
/* 12 sütunlu ızgara. Sayfa bölümlerindeki 12 sütunlu yerleşimler de bu kuralı paylaşır. */
.kp-doc,
.kg-tech,
.kg-quote__grid,
.ilt-faq,
.e404__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
:is(.kp-doc, .kg-tech, .kg-quote__grid, .ilt-faq, .e404__grid) > * { min-width: 0; }

.sec { position: relative; padding-block: var(--sec); }
.sec--tight { padding-block: var(--sec-tight); }
.sec--tint { background: var(--paper); border-block: 0; }
.sec--dark {
  background: var(--navy-900);
  color: var(--on-dark);
}
.sec--dark + .site-footer { border-top: 1px solid var(--line-dark); }

/* Bölüm başlığı (P3): solda etiket + sayaç, sağda h2 + giriş */
.sec-head {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s4);
  padding-top: clamp(16px, calc(1.4 * var(--vw)), 34px);
  border-top: 1px solid var(--line-2);
  margin-bottom: var(--s7);
}
.sec-head > * { min-width: 0; }
.sec-head__meta {
  grid-column: 1 / 5;
  display: flex; flex-direction: column; align-items: flex-start; gap: .9em;
}
.sec-head__main {
  grid-column: 5 / -1;
  display: grid; gap: var(--s4); align-content: start;
}
:is(.sec--dark, .on-dark) .sec-head { border-top-color: var(--line-dark); }

/* 4. Tipografi yardımcıları -------------------------------------------------- */
.eyebrow {
  display: inline-flex; align-items: center; gap: .75em;
  margin: 0;
  font: 700 var(--fs-label)/1.25 var(--font-head);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel-700);
}
.eyebrow::before {
  content: ""; flex: none;
  width: max(6px, .5em); height: max(6px, .5em);
  background: var(--navy);
}
.eyebrow--plain::before { display: none; }
:is(.sec--dark, .on-dark, .hero-page--dark) .eyebrow { color: var(--steel-300); }
:is(.sec--dark, .on-dark, .hero-page--dark) .eyebrow::before { background: var(--steel-300); }

/* Etiket metni (büyük harf, geniş aralık). .label ile ya da aşağıdaki sayfa sınıflarıyla. */
.kg-envs__h,
.catalog-card__group,
.kv-meta dt {
  font: 700 var(--fs-label)/1.3 var(--font-head);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-700);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 60ch;
}
:is(.sec--dark, .on-dark, .hero-page--dark) :is(h1, h2, h3, h4) { color: #fff; }
:is(.sec--dark, .on-dark, .hero-page--dark) .lead,
:is(.sec--dark, .on-dark, .hero-page--dark) p { color: var(--on-dark-2); }

.hl { color: var(--steel-700); }

/* 5. Bileşenler --------------------------------------------------------------- */

/* Düğmeler */
.btn {
  --bg: var(--navy); --fg: #fff; --bd: var(--navy);
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 44px;
  padding: clamp(12px, calc(.9 * var(--vw)), 20px) clamp(18px, calc(1.4 * var(--vw)), 34px);
  border: 1px solid var(--bd); border-radius: var(--r);
  background: var(--bg); color: var(--fg);
  font: 700 var(--fs-small)/1.15 var(--font-head);
  letter-spacing: .005em;
  text-decoration: none; text-align: center;
  cursor: pointer;
  transition: background var(--d-fast) var(--ease), color var(--d-fast) var(--ease), border-color var(--d-fast) var(--ease);
}
.btn .i { width: 1em; height: 1em; }
.btn--primary:hover, .btn:not([class*="btn--"]):hover { --bg: var(--navy-700); --bd: var(--navy-700); }
.btn--secondary { --bg: #fff; --fg: var(--navy); --bd: var(--navy); }
.btn--secondary:hover { --bg: var(--hover); }
.btn--on-dark { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.btn--on-dark:hover { --bg: var(--hover-2); --bd: var(--hover-2); }
.btn--fx { --bg: var(--navy); --fg: #fff; --bd: var(--navy); }
.btn--fx:hover { --bg: var(--navy-700); --bd: var(--navy-700); }
.btn--fx .fmark { --fm-a: #fff; --fm-b: var(--fxl-blue-l); }
.btn--secondary .fmark { --fm-a: var(--fxl-navy); --fm-b: var(--fxl-blue); }
.btn .fmark { width: .96em; height: 1.05em; }

/* Ok ikonları: iç bağlantı →, dış bağlantı ↗, sayfa içi ↓ */
.i-arr { transition: transform var(--d-fast) var(--ease); }
:is(.btn, .link, .route, .panel__link):hover .i-arr { transform: translateX(4px); }
:is(.btn, .link, .route, .panel__link):hover .i-arr--ne { transform: translate(3px, -3px); }
:is(.btn, .link, .route, .panel__link):hover .i-arr--down { transform: translateY(3px); }

/* Metin bağlantısı */
.link {
  display: inline-flex; align-items: center; gap: .45em;
  font: 700 var(--fs-small)/1.3 var(--font-head);
  color: var(--steel-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .28em;
  transition: text-decoration-thickness var(--d-fast);
}
.link:hover { text-decoration-thickness: 2px; }
.link .i { width: 1em; height: 1em; }
:is(.sec--dark, .on-dark, .hero-page--dark) .link { color: var(--steel-300); }

/* Etiket çipleri */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .42em .75em;
  border: 1px solid var(--line-2); border-radius: 3px;
  background: #fff;
  font: 600 calc(var(--fs-small) * .95)/1.2 var(--font-head);
  color: var(--navy);
}
:is(.sec--dark, .on-dark) .chip { background: transparent; color: #fff; border-color: rgba(183, 200, 216, .4); }

/* Yönlendirme etiketleri */
.tag {
  display: inline-flex; align-items: center; gap: .5em;
  padding: 4px 8px;
  border: 1px solid var(--line-2); border-radius: 2px;
  font: 700 var(--fs-label)/1.1 var(--font-head);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
.tag--here { border-color: var(--steel-700); color: var(--steel-700); }
.tag--fx { border-color: var(--fx-gold); color: var(--navy); }
:is(.sec--dark, .on-dark, .route--fx) .tag--fx { color: var(--fx-gold-l); }

/* Kart / panel (P4 ve diğerleri) */
.panel {
  position: relative;
  display: flex; flex-direction: column;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
  transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease), border-color var(--d) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .panel:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
}
.panel__link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.panel__link:focus-visible { outline: none; }
.panel:has(.panel__link:focus-visible) { outline: 2px solid var(--focus); outline-offset: 3px; }
.panel h3 + p, .panel h4 + p { color: var(--ink-2); }

/* Künye tablosu */
.facts { margin: 0; display: grid; }
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, clamp(130px, calc(13 * var(--vw)), 340px)) minmax(0, 1fr);
  gap: 6px var(--gap);
  padding: clamp(12px, calc(1 * var(--vw)), 24px) 0;
  border-bottom: 1px solid var(--line);
}
.facts > div:first-child { border-top: 1px solid var(--line); }
.facts dt {
  padding-top: .25em;
  font: 700 var(--fs-label)/1.4 var(--font-head);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--steel-700);
}
.facts dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; min-width: 0; }
.facts dd a { color: var(--steel-700); font-weight: 600; text-underline-offset: .2em; }
:is(.sec--dark, .on-dark) .facts > div { border-color: var(--line-dark); }
:is(.sec--dark, .on-dark) .facts dt { color: var(--steel-300); }
:is(.sec--dark, .on-dark) .facts dd { color: var(--on-dark); }

/* Akordeon (P12) */
.acc-list { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); }
.acc > summary {
  display: grid;
  grid-template-columns: clamp(34px, calc(3 * var(--vw)), 80px) minmax(0, 1fr) auto;
  align-items: center; gap: var(--s4);
  padding: clamp(16px, calc(1.3 * var(--vw)), 32px) 0;
  list-style: none; cursor: pointer;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc__n {
  font: 700 var(--fs-small)/1 var(--font-head);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.acc__t { font-size: calc(var(--fs-h3) * .86); line-height: 1.3; }
.acc__ico {
  position: relative;
  width: clamp(30px, calc(2.1 * var(--vw)), 48px); height: clamp(30px, calc(2.1 * var(--vw)), 48px);
  border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--navy);
  transition: transform var(--d) var(--ease), background var(--d-fast);
}
.acc__ico::before, .acc__ico::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 40%; height: 1.6px; margin: -.8px 0 0 -20%;
  background: currentColor;
  transition: transform var(--d) var(--ease), opacity var(--d);
}
.acc__ico::after { transform: rotate(90deg); }
.acc[open] .acc__ico { background: var(--hover); }
.acc[open] .acc__ico::after { transform: rotate(180deg); opacity: 0; }
.acc > summary:hover .acc__ico { background: var(--hover); }
.acc__body {
  padding: 0 0 clamp(18px, calc(1.5 * var(--vw)), 36px) calc(clamp(34px, calc(3 * var(--vw)), 80px) + var(--s4));
  color: var(--ink-2);
  display: grid; gap: .8em;
}
.acc__body p { max-width: 68ch; }
.acc[open] > .acc__body { animation: accIn var(--d) var(--ease); }
:is(.sec--dark, .on-dark) .acc-list,
:is(.sec--dark, .on-dark) .acc { border-color: var(--line-dark); }
:is(.sec--dark, .on-dark) .acc__n { color: var(--steel-300); }
:is(.sec--dark, .on-dark) .acc__ico { color: #fff; border-color: rgba(183, 200, 216, .35); }
:is(.sec--dark, .on-dark) .acc[open] .acc__ico,
:is(.sec--dark, .on-dark) .acc > summary:hover .acc__ico { background: rgba(159, 185, 209, .1); }

/* İkon kutusu */
.ibox {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: clamp(40px, calc(2.9 * var(--vw)), 56px); height: clamp(40px, calc(2.9 * var(--vw)), 56px);
  border: 1px solid var(--line); border-radius: var(--r);
  background: #fff;
  color: var(--steel-700);
}
.ibox .i, .ibox .fmark { width: 50%; height: 50%; }
.ibox--sm { width: clamp(34px, calc(2.2 * var(--vw)), 46px); height: clamp(34px, calc(2.2 * var(--vw)), 46px); }
:is(.sec--dark, .on-dark) .ibox { background: rgba(159, 185, 209, .06); border-color: var(--line-dark); color: var(--steel-300); }

/* 6. İkonlar ------------------------------------------------------------------ */
.i {
  display: inline-block; flex: none;
  width: 1.25em; height: 1.25em;
  vertical-align: middle;
  fill: none; stroke: currentColor;
  overflow: visible;
}
.fmark { display: inline-block; flex: none; width: 1.02em; height: 1.125em; vertical-align: middle; }
.fmark--ink { --fm-a: var(--fxl-navy); --fm-b: var(--fxl-blue); }

/* 7. Üst şerit (sabit DEĞİL), açılır menüler, mobil çekmece -------------------- */
.site-header {
  position: relative; z-index: 60;
  background: #fff;
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  display: flex; align-items: center;
  gap: clamp(12px, calc(2 * var(--vw)), 56px);
  min-height: var(--header-h);
}

/* LOGO — assets/img/logo-siltek.svg (lacivert, açık zemin) ve logo-siltek-beyaz.svg
   (beyaz, koyu zemin: alt bilgi ve 404 üst şeridi). Boyut yalnız buradan ayarlanır. */
.logo {
  display: inline-flex; align-items: center;
  flex: none;
  margin-right: auto;
  text-decoration: none;
  line-height: 1;
}
.logo img { display: block; height: clamp(42px, calc(3.7 * var(--vw)), 58px); width: auto; }
.footer__brand .logo img { height: clamp(46px, calc(4 * var(--vw)), 64px); }

.nav { display: flex; align-items: center; gap: clamp(10px, calc(1.6 * var(--vw)), 44px); }
.nav__list { display: flex; align-items: center; gap: clamp(2px, calc(.5 * var(--vw)), 18px); margin: 0; padding: 0; list-style: none; }
.nav__item { position: relative; }
.nav__trigger, .nav__link {
  position: relative;
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 44px;
  padding: .55em .8em;
  border: 0; border-radius: var(--r);
  background: none;
  font: 600 var(--fs-small)/1 var(--font-head);
  color: var(--navy);
  text-decoration: none;
  transition: background var(--d-fast), color var(--d-fast);
}
.nav__trigger:hover, .nav__link:hover { background: var(--hover); }
.nav__chev { width: .85em; height: .85em; transition: transform var(--d) var(--ease); }
.nav__trigger[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__item:not(.is-enhanced):is(:hover, :focus-within) .nav__chev { transform: rotate(180deg); }
.nav__trigger.is-current::after, .nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: .8em; right: .8em; bottom: .25em;
  height: 2px; background: var(--navy);
}
.nav__trigger.is-current::after { right: 1.9em; }

.nav__panel {
  position: absolute; z-index: 5;
  top: calc(100% + 6px); left: 50%;
  min-width: clamp(300px, calc(22 * var(--vw)), 460px);
  margin: 0; padding: 8px;
  list-style: none;
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -6px);
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease), visibility 0s linear var(--d);
}
.nav__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
.nav__item.is-open > .nav__panel,
.nav__item:not(.is-enhanced):hover > .nav__panel,
.nav__item:not(.is-enhanced):focus-within > .nav__panel {
  opacity: 1; visibility: visible;
  transform: translate(-50%, 0);
  transition: opacity var(--d) var(--ease), transform var(--d) var(--ease), visibility 0s;
}
.nav__panel a {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; column-gap: 14px; row-gap: 3px;
  padding: 12px 14px;
  border-radius: var(--r);
  color: var(--navy); text-decoration: none;
  transition: background var(--d-fast);
}
.nav__panel a:hover, .nav__panel a[aria-current="page"] { background: var(--hover); }
.nav__panel .ibox { grid-row: span 2; }
.nav__panel b { font: 700 var(--fs-small)/1.2 var(--font-head); }
.nav__panel small { font: 400 calc(var(--fs-small) * .9)/1.35 var(--font-body); color: var(--ink-3); }
.nav__panel a[aria-current="page"] b { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }

.nav__cta { padding-block: clamp(10px, calc(.7 * var(--vw)), 18px); }

.menu-btn {
  display: none; align-items: center; gap: .6em;
  min-height: 44px;
  padding: .55em .9em;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: #fff;
  font: 700 13px/1 var(--font-head);
  letter-spacing: .14em;
  color: var(--navy);
}
.menu-btn .i { width: 20px; height: 20px; }

/* Koyu üst şerit (yalnız 404: koyu bölümle birleşir). Logonun beyaz sürümü kullanılır. */
.site-header--dark { background: var(--navy-900); border-bottom-color: var(--line-dark); }
.site-header--dark :is(.nav__trigger, .nav__link) { color: #fff; }
.site-header--dark :is(.nav__trigger, .nav__link):hover { background: rgba(159, 185, 209, .1); }
.site-header--dark :is(.nav__trigger.is-current, .nav__link[aria-current="page"])::after { background: #fff; }
.site-header--dark .menu-btn { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.site-header--dark :is(.logo, .nav__trigger, .nav__link, .nav__cta, .menu-btn):focus-visible { outline-color: var(--focus-on-dark); }

/* Mobil çekmece */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  overflow: hidden;
  visibility: hidden;
  transition: visibility 0s linear 280ms;
}
.drawer.is-open { visibility: visible; transition: none; }
.drawer__scrim {
  position: absolute; inset: 0;
  background: rgba(16, 42, 58, .4);
  opacity: 0;
  transition: opacity 280ms var(--ease);
}
.drawer.is-open .drawer__scrim { opacity: 1; }
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(420px, 100%);
  display: flex; flex-direction: column;
  background: #fff;
  box-shadow: -24px 0 60px -20px rgba(8, 24, 34, .35);
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform 280ms var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: var(--header-h);
  padding: 0 clamp(18px, calc(5 * var(--vw)), 32px);
  border-bottom: 1px solid var(--line);
}
.drawer__head .logo { margin-right: 0; }
.drawer__close {
  display: inline-flex; align-items: center; gap: .5em;
  min-height: 44px; padding: .55em .9em;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: #fff;
  font: 700 13px/1 var(--font-head); letter-spacing: .14em;
  color: var(--navy);
}
.drawer__close .i { width: 18px; height: 18px; }
.drawer__body { padding: 6px clamp(18px, calc(5 * var(--vw)), 32px) 32px; }
.drawer__group { padding: 16px 0; border-bottom: 1px solid var(--line); }
.drawer__group ul { margin: 0; padding: 0; list-style: none; }
.drawer__label {
  display: block; margin-bottom: 4px;
  font: 700 12px/1.2 var(--font-head);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel-700);
}
.drawer__link {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px;
  font: 600 18px/1.3 var(--font-head);
  color: var(--navy); text-decoration: none;
}
.drawer__link .i { width: 18px; height: 18px; color: var(--steel-700); }
.drawer__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .3em; }
.drawer__cta { width: 100%; margin-top: 24px; }

@media (max-width: 960px) {
  .nav__list { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (max-width: 560px) {
  .nav > .nav__cta { display: none; }
}

/* 8. Alt bilgi --------------------------------------------------------------- */
.site-footer {
  background: var(--navy-950);
  color: var(--on-dark-2);
  padding-top: var(--sec-tight);
  font-size: var(--fs-small);
}
.footer__main {
  display: grid;
  grid-template-columns: 4fr repeat(4, 2fr);
  gap: var(--s6) var(--gap);
  padding-bottom: var(--s7);
}
.footer__main > * { min-width: 0; }
.footer__brand { display: grid; gap: var(--s4); align-content: start; justify-items: start; }
.footer__brand .logo { margin-right: 0; }
.footer__tagline {
  font: 600 var(--fs-lead)/1.35 var(--font-head);
  letter-spacing: -.01em;
  color: #fff;
}
.footer__col a, .footer__legal a {
  color: var(--on-dark);
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size var(--d) var(--ease);
}
.footer__col a:hover, .footer__legal a:hover { background-size: 100% 1px; }
.footer__title {
  display: flex; align-items: center; gap: .5em;
  margin-bottom: 1em;
  font: 700 var(--fs-label)/1.2 var(--font-head);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel-300);
}
.footer__title .i { width: 1em; height: 1em; }
.footer__col ul { display: grid; gap: .75em; margin: 0; padding: 0; list-style: none; }
.footer__col a { display: inline-flex; align-items: center; gap: .4em; }
.footer__col a .i { width: .95em; height: .95em; color: var(--steel-300); }
.footer__base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 28px;
  padding-block: clamp(18px, calc(1.6 * var(--vw)), 40px);
  border-top: 1px solid var(--line-dark);
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }

@media (max-width: 1180px) {
  .footer__main { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) {
  .footer__main { row-gap: 28px; }
  .footer__col ul { gap: .55em; }
}
@media (max-width: 359px) {
  .footer__main { grid-template-columns: 1fr; }
}

/* 9. Bölüm kalıpları ----------------------------------------------------------- */

/* P1 — Ana sayfa açılışı */
.hero-home {
  background: #fff;
  padding-top: clamp(40px, calc(4 * var(--vw)), 110px);
  padding-bottom: var(--s6);
}
.hero-home__top {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s4);
  align-items: end;
}
.hero-home__top > * { min-width: 0; }
.hero-home__title { grid-column: 1 / 8; }
.hero-home__aside { grid-column: 8 / -1; display: grid; gap: var(--s4); padding-bottom: .35em; }
.hero-home__aside .lead { max-width: 46ch; }
.hero-home .dual { margin-top: var(--s6); }

/* P2 — İç sayfa açılışı */
.hero-page {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding-block: clamp(40px, calc(4 * var(--vw)), 110px) var(--sec-tight);
}
.hero-page__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: var(--s6);
  align-items: center;
}
.hero-page__grid > * { min-width: 0; }
.hero-page__copy {
  grid-column: 1 / 7;
  display: grid; gap: var(--s4);
  align-content: start; justify-items: start;
}
.hero-page__visual { grid-column: 7 / -1; }
.hero-page--7-5 .hero-page__copy { grid-column: 1 / 8; }
.hero-page--7-5 .hero-page__visual { grid-column: 8 / -1; }
.hero-page--solo .hero-page__copy { grid-column: 1 / 10; }
.hero-page__actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s2); }
.hero-page--dark {
  background: var(--navy-900);
  color: var(--on-dark);
  border-bottom-color: var(--line-dark);
}

/* P4 — İkili panel */
.dual { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }

/* Ana sayfa iş panelleri (P4 içinde) */
.biz { overflow: hidden; }
.biz .panel__head {
  display: grid; gap: clamp(10px, calc(.8 * var(--vw)), 20px);
  padding: clamp(18px, calc(1.8 * var(--vw)), 48px) clamp(18px, calc(2 * var(--vw)), 52px) clamp(16px, calc(1.3 * var(--vw)), 32px);
}
.panel__title {
  font-size: calc(var(--fs-h3) * 1.25);
  letter-spacing: -.025em;
  line-height: 1.1;
}
.panel__title small {
  display: block; margin-top: .3em;
  font: 500 var(--fs-body)/1.3 var(--font-head);
  letter-spacing: 0;
  color: var(--steel-700);
}
.panel__scene { border-block: 1px solid var(--line); border-radius: 0; border-inline: 0; }
.biz .panel__body {
  display: grid; gap: var(--s4); align-content: start;
  padding: clamp(18px, calc(1.6 * var(--vw)), 44px) clamp(18px, calc(2 * var(--vw)), 52px) 0;
}
.biz .panel__body p { color: var(--ink-2); max-width: 60ch; }
.panel__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 20px;
  margin: auto clamp(18px, calc(2 * var(--vw)), 52px) 0;
  padding-block: var(--s5);
}
.biz .panel__body { padding-bottom: var(--s5); }
.biz .panel__foot { margin-top: auto; border-top: 1px solid var(--line); }

/* P5 — Kurumsal yapı şeması */
.org { display: grid; justify-items: center; }

/* P8 — Yönlendirme listesi */
.routes { border-top: 1px solid var(--line-2); }
.route {
  display: grid;
  grid-template-columns: clamp(34px, calc(3.6 * var(--vw)), 100px) minmax(0, 1.25fr) minmax(40px, 1fr) clamp(290px, calc(19 * var(--vw)), 520px);
  align-items: center;
  gap: clamp(12px, calc(1.6 * var(--vw)), 44px);
  padding-block: clamp(18px, calc(1.7 * var(--vw)), 48px);
  border-bottom: 1px solid var(--line);
  color: var(--navy);
  text-decoration: none;
  transition: background var(--d) var(--ease);
}
.route:hover { background: linear-gradient(90deg, var(--hover), rgba(244, 245, 246, 0)); }
.route__n {
  font: 700 var(--fs-small)/1 var(--font-head);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.route__q {
  display: grid; gap: .35em;
  font: 600 var(--fs-h4)/1.3 var(--font-head);
  letter-spacing: -.01em;
}
.route__sub { font: 400 var(--fs-small)/1.5 var(--font-body); color: var(--ink-2); letter-spacing: 0; }
.route__line { position: relative; height: 10px; }
.route__line::before, .route__line::after {
  content: ""; position: absolute; top: 50%;
  width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%;
}
.route__line::before { left: 0; border: 1.5px solid var(--steel-400); background: #fff; }
.route__line::after { right: 0; background: var(--steel-700); }
.route__line i {
  position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; margin-top: -.75px;
  background: repeating-linear-gradient(90deg, var(--line-2) 0 6px, transparent 6px 12px);
  transform-origin: left;
  transition: background var(--d);
}
.route:hover .route__line i {
  background-image: repeating-linear-gradient(90deg, var(--steel) 0 6px, transparent 6px 12px);
  animation: dashFlow .8s linear infinite;
}
.route__dest {
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
  gap: 6px 12px;
  padding: clamp(12px, calc(1 * var(--vw)), 22px) clamp(14px, calc(1.2 * var(--vw)), 26px);
  border-radius: var(--r);
  transition: transform var(--d) var(--ease), background var(--d), border-color var(--d);
}
.route:hover .route__dest { transform: translateX(4px); }
.route__dest > .i, .route__dest > .fmark { grid-row: span 2; width: clamp(22px, calc(1.6 * var(--vw)), 36px); height: clamp(22px, calc(1.6 * var(--vw)), 36px); }
.route__dest .tag { justify-self: start; padding: 3px 6px; font-size: calc(var(--fs-label) * .9); letter-spacing: .1em; white-space: normal; }
.route__label {
  display: inline-flex; align-items: center; gap: .5em;
  font: 700 var(--fs-small)/1.2 var(--font-head);
}
.route__label .i { width: 1em; height: 1em; }
.route--here .route__dest { background: var(--steel-50); border: 1px solid var(--line-2); color: var(--navy); }
.route--here .route__dest > .i { color: var(--steel-700); }
.route--here .route__dest::after {
  content: ""; position: absolute; right: 12px; top: 12px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--signal);
}
.route--fx .route__dest { background: var(--navy); border: 1px solid var(--navy); color: #fff; }
.route--fx .route__dest .fmark { --fm-a: #fff; --fm-b: var(--fxl-blue-l); }
.route--here:hover .route__dest { border-color: var(--steel-700); background: #fff; }
.route--fx:hover .route__dest { background: var(--navy-700); }
:is(.sec--dark, .on-dark) .routes { border-color: var(--line-dark); }
:is(.sec--dark, .on-dark) .route { border-color: var(--line-dark); color: #fff; }
:is(.sec--dark, .on-dark) .route:hover { background: linear-gradient(90deg, rgba(159, 185, 209, .07), rgba(159, 185, 209, 0)); }
:is(.sec--dark, .on-dark) .route__n { color: var(--steel-300); }
:is(.sec--dark, .on-dark) .route__sub { color: var(--on-dark-2); }
:is(.sec--dark, .on-dark) .route__line::before { background: var(--navy-900); border-color: var(--steel-300); }
:is(.sec--dark, .on-dark) .route__line::after { background: var(--steel-300); }
:is(.sec--dark, .on-dark) .route__line i { background-image: repeating-linear-gradient(90deg, rgba(159, 185, 209, .4) 0 6px, transparent 6px 12px); }
:is(.sec--dark, .on-dark) .route--here .route__dest { background: #fff; }
:is(.sec--dark, .on-dark) .route--fx .route__dest { background: var(--navy-700); border-color: rgba(201, 181, 146, .5); }

/* P10 — Ürün kartları ve çizim kuyusu */
.products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); margin: 0; padding: 0; list-style: none; }
.product {
  position: relative;
  display: grid; align-content: start; gap: clamp(10px, calc(.8 * var(--vw)), 20px);
  min-width: 0;
  padding: clamp(12px, calc(1 * var(--vw)), 22px) clamp(12px, calc(1 * var(--vw)), 22px) clamp(20px, calc(1.8 * var(--vw)), 44px);
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  transition: transform var(--d) var(--ease), box-shadow var(--d) var(--ease), border-color var(--d);
}
@media (hover: hover) and (pointer: fine) {
  .product:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: var(--line-2); }
}
.product h3 { font-size: var(--fs-h4); padding-inline: clamp(4px, calc(.6 * var(--vw)), 14px); }
.product p { font-size: var(--fs-small); color: var(--ink-2); padding-inline: clamp(4px, calc(.6 * var(--vw)), 14px); }

/* Köşe işaretli çizim kuyusu. Renkler değişkenle: --tc (köşe), --grid-c / --grid-s (ızgara), --well-bg (zemin).
   .fxa__well (favyoflex-card aktör bandı) aynı zemini koyu renklerle kullanır. */
.well, .fxa__well {
  --t: clamp(10px, calc(.9 * var(--vw)), 18px);
  --ti: clamp(8px, calc(.7 * var(--vw)), 14px);
  background:
    linear-gradient(var(--tc), var(--tc)) left var(--ti) top var(--ti) / var(--t) 1.5px no-repeat,
    linear-gradient(var(--tc), var(--tc)) left var(--ti) top var(--ti) / 1.5px var(--t) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right var(--ti) top var(--ti) / var(--t) 1.5px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right var(--ti) top var(--ti) / 1.5px var(--t) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left var(--ti) bottom var(--ti) / var(--t) 1.5px no-repeat,
    linear-gradient(var(--tc), var(--tc)) left var(--ti) bottom var(--ti) / 1.5px var(--t) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right var(--ti) bottom var(--ti) / var(--t) 1.5px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right var(--ti) bottom var(--ti) / 1.5px var(--t) no-repeat,
    linear-gradient(var(--grid-c) 1px, transparent 1px) -1px -1px / var(--grid-s) var(--grid-s),
    linear-gradient(90deg, var(--grid-c) 1px, transparent 1px) -1px -1px / var(--grid-s) var(--grid-s),
    var(--well-bg);
}
.well {
  --tc: var(--steel-400);
  --grid-c: rgba(79, 117, 150, .08);
  --grid-s: 8cqi;
  --well-bg: #fff;
  position: relative;
  aspect-ratio: 4 / 3.4;
  overflow: hidden;
  container: well / inline-size;
  border-radius: calc(var(--r) * .8);
}
.well > svg { position: absolute; inset: 6% 8%; width: 84%; height: 88%; }

/* Katalog iskelet kartı */
.catalog-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.catalog-card {
  display: grid; gap: var(--s3); align-content: start;
  padding: clamp(12px, calc(1 * var(--vw)), 22px);
  background: #fff;
  border: 1px dashed var(--line-2); border-radius: var(--r);
}
.catalog-card .well > svg { opacity: .2; }
.catalog-card h3 { font-size: var(--fs-h4); color: var(--ink-2); }

/* P11 — Dikey zaman çizelgesi (koyu bantta) */
.timeline { --p: 0; }
.timeline__grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--s6);
  align-items: start;
}
.timeline__grid > * { min-width: 0; }
.timeline__aside {
  grid-column: 1 / 6;
  position: sticky; top: var(--s6);
  display: grid; gap: var(--s4); justify-items: start;
}
.timeline__count {
  font: 800 clamp(64px, calc(7 * var(--vw)), 180px)/.9 var(--font-head);
  letter-spacing: -.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.timeline__count small { font-size: .32em; letter-spacing: 0; color: var(--steel-300); font-weight: 700; }
.timeline__bar {
  position: relative;
  width: min(100%, 360px); height: 3px;
  background: rgba(159, 185, 209, .2);
  overflow: hidden;
}
.timeline__bar i {
  position: absolute; inset: 0;
  background: var(--signal);
  transform-origin: left;
  transform: scaleX(var(--p));
}
.timeline__steps {
  --dot: clamp(14px, calc(1 * var(--vw)), 22px);
  grid-column: 7 / -1;
  position: relative;
  display: grid; gap: clamp(40px, calc(4 * var(--vw)), 110px);
  margin: 0; padding: 0 0 0 clamp(40px, calc(3.4 * var(--vw)), 90px);
  list-style: none;
}
.timeline__steps::before, .timeline__steps::after {
  content: ""; position: absolute;
  left: calc(var(--dot) / 2 - 1px); top: calc(var(--dot) / 2); bottom: 0;
  width: 2px;
}
.timeline__steps::before { background: rgba(159, 185, 209, .22); }
.timeline__steps::after { background: var(--signal); transform-origin: top; transform: scaleY(var(--p)); }
.timeline__step { position: relative; display: grid; gap: var(--s3); justify-items: start; }
.timeline__dot {
  position: absolute; z-index: 1;
  left: calc(-1 * clamp(40px, calc(3.4 * var(--vw)), 90px)); top: 0;
  width: var(--dot); height: var(--dot); border-radius: 50%;
  background: var(--navy-900);
  border: 2px solid rgba(159, 185, 209, .5);
  transition: background var(--d), border-color var(--d), transform var(--d) var(--ease);
}
.timeline__step.is-done .timeline__dot { background: var(--signal); border-color: var(--signal); transform: scale(1.15); }
.timeline__step h3 { font-size: var(--fs-h3); }
.timeline__step p { max-width: 56ch; }

/* P13 — Harekete çağrı bandı */
.cta-band { position: relative; overflow: hidden; }
.cta-band__inner {
  position: relative;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--s4);
  align-items: center;
  padding-top: var(--s6);
  border-top: 1px solid var(--line-2);
}
.cta-band__inner > * { min-width: 0; }
.cta-band__copy { grid-column: 1 / 8; display: grid; gap: var(--s3); }
.cta-band__title { font-size: calc(var(--fs-h2) * .8); }
.cta-band__copy p { color: var(--ink-2); max-width: 56ch; }
.cta-band__actions { grid-column: 8 / -1; display: flex; flex-wrap: wrap; gap: var(--s3); justify-content: flex-end; }
.cta-band__line { position: absolute; right: 0; bottom: 0; width: min(46%, 900px); height: 70%; pointer-events: none; z-index: -1; color: var(--steel-200); }
.cta-band { isolation: isolate; }

/* P14 — Yasal metin */
.legal {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.legal > * { min-width: 0; }
.legal__toc { grid-column: 1 / 4; position: sticky; top: var(--s5); display: grid; gap: var(--s3); }
.legal__toc ol { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.legal__toc a {
  display: block;
  padding: .5em .8em;
  border-left: 2px solid var(--line);
  font: 600 var(--fs-small)/1.35 var(--font-head);
  color: var(--ink-2); text-decoration: none;
  transition: color var(--d-fast), border-color var(--d-fast), background var(--d-fast);
}
.legal__toc a:hover { color: var(--navy); background: var(--hover); }
.legal__toc a.is-active { color: var(--navy); border-left-color: var(--navy); background: var(--hover); }
.legal__body { grid-column: 4 / -1; max-width: 72ch; display: grid; gap: 1em; }
.legal__body h2 { font-size: var(--fs-h3); margin-top: 1.4em; }
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-size: var(--fs-h4); margin-top: .8em; }
.legal__body ul, .legal__body ol { padding-left: 1.3em; display: grid; gap: .45em; }
.legal__body a { color: var(--steel-700); text-underline-offset: .2em; overflow-wrap: anywhere; }

/* P16 — Künye bloğu */
.facts-block { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); row-gap: var(--s6); align-items: start; }
.facts-block > * { min-width: 0; }
.facts-block__card { grid-column: 1 / 8; padding: clamp(20px, calc(2.2 * var(--vw)), 56px); background: #fff; border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); }
.facts-block__aside { grid-column: 8 / -1; }

/* P17 — İlkeler */
.principles {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--s4);
  align-items: start;
}
.principles > * { min-width: 0; }
.principles__list {
  grid-column: 4 / -1;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line);
}
.principles__list li {
  display: grid; align-content: space-between; gap: clamp(22px, calc(2.2 * var(--vw)), 60px);
  min-width: 0;
  padding: clamp(14px, calc(1.2 * var(--vw)), 30px);
  background: #fff;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background var(--d);
}
.principles__list li:hover { background: var(--hover); }
.principles__list b { display: block; font: 700 var(--fs-small)/1.25 var(--font-head); color: var(--navy); }
.principles__list small { display: block; margin-top: .45em; font-size: calc(var(--fs-small) * .9); line-height: 1.45; color: var(--ink-2); }
.principles--full .principles__list { grid-column: 1 / -1; }

/* 10. Sahneler ------------------------------------------------------------------ */
/* Sahne kuralı S0: sahne .stage içinde yaşar (container "scene"), ölçüler cqi.
   10 px altına düşebilecek sahne yazıları .sx alır; kapsayıcı 520 px altına inince
   yazı yerine nötr çubuk görünür. Sahne sarmalayıcısı aria-hidden="true". */
.stage {
  position: relative;
  overflow: hidden;
  container: scene / inline-size;
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.stage--white { background-color: #fff; }
.stage--dark {
  background-color: var(--navy-900);
  background-image: linear-gradient(160deg, #10293a, #0b202e);
  border-color: transparent;
}
.stage--4x3 { aspect-ratio: 4 / 3; }
.stage--5x4 { aspect-ratio: 5 / 4; }
@container scene (max-width: 519px) {
  .sx { color: transparent !important; background: rgba(16, 42, 58, .12); border-radius: 99px; }
  .sx-hide { display: none !important; }
  svg .sx { display: none; }
}
.panel__scene { aspect-ratio: 20 / 9; }
@media (min-width: 961px) and (max-width: 1180px) {
  .panel__scene { aspect-ratio: 16 / 10; }
}
@media (max-width: 560px) {
  .panel__scene { aspect-ratio: 16 / 11; }
}

/* Döndürücü noktaları (gerçek düğmeler; sahnenin dışında, aria-hidden değil) */
.rotator-dots { display: flex; align-items: center; gap: 0; padding: 0 4px; background: #fff; border: 1px solid var(--line-2); border-radius: 3px; }
.rotator-dots button {
  position: relative;
  width: clamp(30px, calc(1.7 * var(--vw)), 44px); height: clamp(30px, calc(1.7 * var(--vw)), 44px); padding: 0;
  border: 0; background: none;
  border-radius: 4px;
}
.rotator-dots button::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: clamp(8px, calc(.45 * var(--vw)), 12px); height: clamp(8px, calc(.45 * var(--vw)), 12px); margin: calc(clamp(8px, calc(.45 * var(--vw)), 12px) / -2) 0 0 calc(clamp(8px, calc(.45 * var(--vw)), 12px) / -2);
  border-radius: 6px;
  background: var(--line-2);
  transition: width var(--d) var(--ease), margin var(--d) var(--ease), background var(--d);
}
.rotator-dots button[aria-pressed="true"]::before { width: clamp(20px, calc(1.1 * var(--vw)), 30px); margin-left: calc(clamp(20px, calc(1.1 * var(--vw)), 30px) / -2); background: var(--navy); }
.rotator-dots button:hover::before { background: var(--steel-400); }
.rotator-dots button[aria-pressed="true"]:hover::before { background: var(--navy); }
.stage--dark .rotator-dots { background: var(--navy-700); border-color: var(--line-dark); }
.stage--dark .rotator-dots button::before { background: rgba(159, 185, 209, .4); }
.stage--dark .rotator-dots button[aria-pressed="true"]::before { background: var(--fx-gold); }

/* SC-1 + SC-2: FavyoFlex Card sahnesi -------------------------------------- */
.fx-scene {
  position: absolute; inset: 0;
  --card-x: 5cqi; --card-y: 15cqi; --card-w: 50cqi;
  --phone-x: 6cqi; --phone-y: 5cqi; --phone-w: 32cqi;
}
@container scene (max-width: 519px) {
  .fx-scene { --card-x: 3cqi; --card-y: 19cqi; --card-w: 56cqi; --phone-x: 4cqi; --phone-y: 6cqi; --phone-w: 40cqi; }
}
.fx-scene--hero { --card-x: 4cqi; --card-y: 30cqi; --card-w: 54cqi; --phone-x: 8cqi; --phone-y: 7cqi; --phone-w: 34cqi; }

.fx-card {
  position: absolute; z-index: 1;
  left: var(--card-x); top: var(--card-y);
  width: var(--card-w);
  aspect-ratio: 1297 / 818;
  border-radius: calc(var(--card-w) * .04);
  overflow: hidden;
  transform: rotate(-7deg);
  box-shadow: 0 2.4cqi 4cqi -1.2cqi rgba(11, 32, 46, .42), 0 0 0 1px rgba(11, 32, 46, .08);
}
.fx-card img { width: 100%; height: 100%; }
.fx-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .18) 48%, rgba(255, 255, 255, .05) 54%, transparent 62%);
  transform: translateX(-120%);
}

.phone {
  position: absolute; z-index: 2;
  right: var(--phone-x); top: var(--phone-y);
  width: var(--phone-w);
  aspect-ratio: 9 / 19;
  container: phone / inline-size;
}
.phone__body {
  position: absolute; inset: 0;
  padding: 3.4cqi;
  border-radius: 15cqi;
  background: linear-gradient(150deg, #2b4a61 0%, #0c1c28 52%, #1d3a4f 100%);
  box-shadow: 0 0 0 .6cqi rgba(159, 185, 209, .35), 0 10cqi 18cqi -6cqi rgba(8, 24, 34, .55);
}
.phone__screen {
  position: relative; height: 100%;
  border-radius: 12cqi;
  overflow: hidden;
  background: #f7f5f0;
  color: var(--fx-navy);
  font-family: var(--font-head);
}
.phone__island {
  position: absolute; z-index: 5;
  top: 3cqi; left: 50%;
  width: 26cqi; height: 6.6cqi; margin-left: -13cqi;
  border-radius: 4cqi;
  background: #0a1720;
}
.phone__status {
  position: absolute; left: 8cqi; right: 8cqi; top: 4.4cqi;
  display: flex; justify-content: space-between; align-items: center;
}
.phone__status::before { content: ""; width: 10cqi; height: 2.6cqi; border-radius: 2cqi; background: currentColor; opacity: .55; }
.phone__status::after { content: ""; width: 7.5cqi; height: 3.4cqi; border-radius: 1cqi; border: .5cqi solid currentColor; opacity: .55; }

.screen {
  position: absolute; inset: 14cqi 0 17cqi;
  padding: 0 6.4cqi;
  display: flex; flex-direction: column; gap: 3.8cqi;
  opacity: 0;
  transform: translateX(12px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
}
.screen.is-on { opacity: 1; transform: none; }
.screen.is-out { opacity: 0; transform: translateX(-12px); }
.scr-head { display: flex; align-items: center; gap: 3cqi; min-height: 10cqi; }
.scr-head .fmark { width: 7.6cqi; height: 8.4cqi; --fm-a: var(--fxl-navy); --fm-b: var(--fxl-blue); }
.scr-title { font-size: max(10px, 8.4cqi); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; white-space: nowrap; }
.scr-bal {
  display: grid; gap: 2cqi;
  padding: 5cqi;
  border-radius: 5cqi;
  background: linear-gradient(135deg, #1b3a51, #0f2331);
  color: #e9eef2;
  box-shadow: 0 3cqi 6cqi -3cqi rgba(16, 36, 62, .45);
}
.scr-bal small { justify-self: start; font-size: 6cqi; font-weight: 600; color: #b8c7ce; line-height: 1.15; }
.scr-bal b { display: flex; align-items: center; justify-content: space-between; font-size: max(10px, 10cqi); font-weight: 800; letter-spacing: .06em; color: var(--fx-gold-l); line-height: 1; }
.scr-bal b svg { width: 7.5cqi; height: 7.5cqi; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; opacity: .8; }
.scr-lbl { align-self: flex-start; font-size: 6cqi; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #5f6b75; line-height: 1.1; }
.scr-item {
  display: flex; align-items: center; gap: 3.4cqi;
  padding: 3.4cqi;
  border-radius: 4cqi;
  background: #fff;
  box-shadow: 0 .5cqi 2cqi rgba(16, 36, 62, .08);
}
.scr-ic { display: flex; align-items: center; justify-content: center; width: 10.5cqi; height: 10.5cqi; border-radius: 3cqi; background: var(--fx-navy); color: var(--fx-gold); flex: none; }
.scr-ic svg { width: 60%; height: 60%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.scr-name { flex: 1; min-width: 0; font-size: 6.8cqi; font-weight: 800; line-height: 1.1; }
.scr-search {
  display: flex; align-items: center; gap: 2.6cqi;
  padding: 3.4cqi 4cqi;
  border-radius: 3.4cqi;
  background: #fff;
  box-shadow: 0 .5cqi 2cqi rgba(16, 36, 62, .08);
  font-size: 6.4cqi; font-weight: 600; color: var(--ink-3); /* 5.7:1 beyazda */
}
.scr-search svg { width: 6cqi; height: 6cqi; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.scr-chips { display: flex; gap: 2.4cqi; flex-wrap: wrap; }
.scr-chip { padding: 2.2cqi 3.4cqi; border-radius: 2cqi; background: var(--fx-navy); color: #fff; font-size: 6cqi; font-weight: 700; line-height: 1; }
.scr-row { display: flex; align-items: center; gap: 3.4cqi; padding: 2.6cqi 0; border-bottom: .4cqi solid #e8e4dc; }
.scr-row .scr-ic { background: #ebe7de; color: var(--fx-navy); width: 9.5cqi; height: 9.5cqi; }
.scr-row span:not(.scr-ic) { flex: 1; display: grid; gap: 1.8cqi; }
.scr-row span:not(.scr-ic)::before, .scr-row span:not(.scr-ic)::after { content: ""; height: 2.8cqi; border-radius: 2cqi; background: #d9d4c9; width: 74%; }
.scr-row span:not(.scr-ic)::after { width: 46%; background: #e8e4db; }
.scr-row em { width: 2.4cqi; height: 2.4cqi; border-right: .6cqi solid #9aa3ab; border-bottom: .6cqi solid #9aa3ab; transform: rotate(-45deg); margin-right: 1cqi; }
.scr-cardimg { border-radius: 3.6cqi; box-shadow: 0 4cqi 8cqi -3cqi rgba(16, 36, 62, .45); width: 100%; height: auto; }
.scr-kv { display: flex; justify-content: space-between; align-items: center; padding: 2.8cqi 0; border-bottom: .4cqi solid #e8e4dc; }
.scr-kv::before, .scr-kv::after { content: ""; height: 2.8cqi; border-radius: 2cqi; background: #d9d4c9; width: 34%; }
.scr-kv::after { width: 26%; background: #e3ded3; }
.scr-btn { align-self: stretch; margin-top: auto; padding: 3.6cqi; border-radius: 2.6cqi; background: var(--fx-navy); color: var(--fx-gold-l); font-size: 6cqi; font-weight: 800; text-align: center; line-height: 1.1; }
.phone__tabs {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 16cqi;
  display: flex; justify-content: space-around; align-items: center;
  padding: 0 5cqi 3cqi;
  background: #fff;
  border-top: .4cqi solid #ece8df;
}
.phone__tabs span { display: grid; place-items: center; width: 11cqi; height: 11cqi; border-radius: 3.2cqi; color: #9aa3ab; transition: background var(--d), color var(--d); }
.phone__tabs svg { width: 6.2cqi; height: 6.2cqi; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
[data-active="0"] .phone__tabs span:nth-child(1),
[data-active="1"] .phone__tabs span:nth-child(2),
[data-active="2"] .phone__tabs span:nth-child(3) { background: var(--fx-navy); color: var(--fx-gold); }

/* SC-3: Koruyucu giyim teknik çizim sahnesi ---------------------------------- */
.kg-scene { position: absolute; inset: 0; }
.kg-scene__art {
  position: absolute;
  top: 50%; right: 36cqi;
  height: min(100%, 46cqi); width: auto;
  transform: translateY(-50%);
  overflow: visible;
}
.kg-scene__art text { font-family: var(--font-head); }
.kg-scene__art .t-call { font-size: 36px; font-weight: 700; fill: #102a3a; letter-spacing: -.01em; }
.kg-scene__art .t-sub { font-size: 32px; font-weight: 700; fill: #56697a; letter-spacing: .12em; }
.kg-scene__art .lead-l { stroke: #36597a; stroke-width: 2.5; fill: none; }
.kg-scene__art .dim { stroke: #6f93b5; stroke-width: 2.5; fill: none; }
.kg-scene__art .flowline { stroke: #6f93b5; stroke-width: 3; fill: none; stroke-dasharray: 2 10; stroke-linecap: round; }
.kg-scene__art .jacket { transform-box: fill-box; transform-origin: 50% 0; }
.kg-card {
  position: absolute; z-index: 2;
  right: 4cqi; top: 50%;
  width: 36cqi;
  transform: translateY(-50%);
  display: grid; gap: 1.5cqi;
  padding: 2.8cqi 2.8cqi 2.2cqi;
  background: #fff;
  border: 1px solid var(--line-2); border-radius: max(5px, 1.1cqi);
  box-shadow: var(--shadow);
  font-family: var(--font-head);
  color: var(--navy);
  transition: transform var(--d-slow) var(--ease);
}
.kg-card__h {
  display: flex; justify-content: space-between; align-items: center; gap: 1cqi;
  padding-bottom: 1.4cqi;
  border-bottom: 1px solid var(--line);
  font-size: max(10px, 2.5cqi); font-weight: 800; line-height: 1.1; letter-spacing: -.01em;
}
.kg-card__h em { font-style: normal; font-size: 1.7cqi; font-weight: 700; letter-spacing: .12em; color: var(--ink-3); padding: .5cqi .8cqi; border: 1px solid var(--line-2); border-radius: 3px; }
.kg-card__rows { display: grid; gap: 1.35cqi; margin: 0; padding: 0; list-style: none; }
.kg-row { display: flex; align-items: center; gap: 1.3cqi; font-size: 2cqi; font-weight: 600; line-height: 1.2; }
.kg-row span { white-space: nowrap; }
.kg-check { width: 3.3cqi; height: 3.3cqi; flex: none; overflow: visible; }
.kg-check circle { fill: var(--navy); stroke: var(--navy); stroke-width: 1.5; }
.kg-check path { fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.kg-card__foot {
  display: flex; align-items: center; gap: .5em;
  padding-top: 1.4cqi;
  border-top: 1px solid var(--line);
  font-size: max(10px, 2.1cqi); font-weight: 800; color: var(--steel-700);
}
.kg-card__foot svg { width: 1em; height: 1em; }
@container scene (max-width: 519px) {
  .kg-card { width: 40cqi; padding: 4cqi; gap: 2.6cqi; }
  .kg-card__h em { display: none; }
  .kg-row { font-size: 3.4cqi; gap: 2.4cqi; min-width: 0; }
  /* Dar sahnede etiketler gri çubuğa döner; uzun (İngilizce) etiket kart dışına taşmasın */
  .kg-row span.sx { flex: 0 1 auto; min-width: 0; overflow: hidden; }
  .kg-row:nth-child(n+4) { display: none; }
  .kg-check { width: 5.4cqi; height: 5.4cqi; }
  .kg-scene__art { right: 40cqi; height: min(100%, 58cqi); }
}
@media (hover: hover) and (pointer: fine) {
  .panel:hover .kg-card { transform: translate(-1cqi, -50%); }
}

/* Parlama (yansıtıcı bant) — SVG içinde <rect class="sheen"> kırpma içinde kullanılır */
.sheen { transform-box: view-box; transform: translateX(-200px); }

/* 11. Formlar -------------------------------------------------------------------- */
.form-card {
  display: grid; gap: var(--s5);
  padding: clamp(22px, calc(2.6 * var(--vw)), 64px);
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.form-card__title { display: grid; gap: .35em; font: 700 var(--fs-h3)/1.2 var(--font-head); color: var(--navy); letter-spacing: -.015em; }
.form-card__title span { font: 600 var(--fs-small)/1.35 var(--font-head); color: var(--ink-3); letter-spacing: 0; overflow-wrap: anywhere; }
.form-required-note { font-size: var(--fs-small); color: var(--ink-3); }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--gap); }
.fields > * { min-width: 0; }
.fields .full { grid-column: 1 / -1; }
.fields > label {
  display: flex; flex-direction: column; gap: 8px;
  font: 600 var(--fs-small)/1.3 var(--font-head);
  color: var(--ink);
}
/* :where → özgüllük düşük; aşağıdaki .fields select (ok simgesi, sağ boşluk) ezilmez */
.fields :where(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  width: 100%;
  min-height: clamp(46px, calc(3.2 * var(--vw)), 64px);
  padding: .65em .9em;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: #fff;
  font: 400 var(--fs-body)/1.4 var(--font-body);
  color: var(--ink);
  transition: border-color var(--d-fast), box-shadow var(--d-fast);
}
.fields textarea { min-height: 8em; resize: vertical; }
.fields select {
  appearance: none; -webkit-appearance: none;
  padding-right: 2.6em;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23102a3a' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .8em center / 1.1em;
}
.fields ::placeholder { color: #7c8a97; opacity: 1; }
.fields :is(input, select, textarea):hover { border-color: var(--steel-400); }
.fields :is(input, select, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--steel-700); }
.fields [aria-invalid="true"] { border-color: var(--error) !important; }
.field-error { display: block; font: 600 calc(var(--fs-small) * .95)/1.4 var(--font-head); color: var(--error); }
.field-note { font-size: calc(var(--fs-small) * .95); color: var(--ink-3); margin-top: -8px; }

.choice-set { margin: 0; padding: 0; border: 0; min-width: 0; }
.choice-set legend { padding: 0; margin-bottom: 10px; font: 600 var(--fs-small)/1.3 var(--font-head); color: var(--ink); }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice {
  position: relative;
  display: flex; align-items: center; gap: .75em;
  min-height: 48px;
  padding: .7em .95em;
  border: 1px solid var(--line-2); border-radius: var(--r);
  background: #fff;
  font: 600 var(--fs-small)/1.3 var(--font-head);
  color: var(--navy);
  cursor: pointer;
  transition: border-color var(--d-fast), box-shadow var(--d-fast), background var(--d-fast);
}
.choice:hover { border-color: var(--steel-400); }
.choice:has(input:checked) { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); background: var(--hover); }
.choice-set.is-invalid .choice { border-color: var(--error); }
.choice input, .consent input {
  appearance: none; -webkit-appearance: none;
  flex: none;
  width: 1.2em; height: 1.2em; margin: 0;
  border: 1.5px solid var(--steel-400); border-radius: 3px;
  background: #fff center / 80% no-repeat;
  cursor: pointer;
  transition: background-color var(--d-fast), border-color var(--d-fast);
}
.choice input:checked, .consent input:checked {
  border-color: var(--navy);
  background-color: var(--navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.choice input:focus-visible, .consent input:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.consent input[aria-invalid="true"] { border-color: var(--error); }

.field-file {
  display: grid; gap: 10px;
  padding: var(--s4) var(--s5);
  border: 1.5px dashed var(--line-2); border-radius: var(--r);
  background: var(--steel-50);
  font: 600 var(--fs-small)/1.3 var(--font-head);
  color: var(--ink);
  transition: border-color var(--d-fast), background var(--d-fast);
}
.field-file:hover, .field-file:focus-within { border-color: var(--steel-700); background: #fff; }
/* Tarayıcının kendi dosya adı yazısı gizli (color: transparent); ad ve boyut .field-file__name satırında bir kez görünür */
.field-file input[type="file"] { width: 100%; max-width: 100%; font: 400 var(--fs-small)/1.4 var(--font-body); color: transparent; }
.field-file input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: .6em 1em;
  border: 1px solid var(--navy); border-radius: var(--r);
  background: #fff;
  font: 700 var(--fs-small)/1.1 var(--font-head);
  color: var(--navy);
  cursor: pointer;
}
.field-file input[type="file"]::file-selector-button:hover { background: var(--hover-2); }
.field-file__name { font: 600 var(--fs-small)/1.4 var(--font-head); color: var(--steel-700); overflow-wrap: anywhere; }
.field-file__name:empty { display: none; }

.consents { display: grid; gap: 14px; }
.consent-info { font-size: var(--fs-small); color: var(--ink-2); }
.consent-info a { color: var(--steel-700); font-weight: 600; text-underline-offset: .2em; }
.consent {
  display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75em;
  font: 400 var(--fs-small)/1.5 var(--font-body);
  color: var(--ink-2);
  cursor: pointer;
}
.consent input { margin-top: .15em; }
.consent > span:not(.field-error) { flex: 1; min-width: 0; }
.consent .field-error { flex-basis: 100%; padding-left: calc(1.2em + .75em); }
.consent--required > span { color: var(--ink); }
.form-actions { display: flex; flex-wrap: wrap; gap: var(--s3); align-items: center; }
.form-status {
  padding: .9em 1.1em;
  border-left: 3px solid var(--steel-700);
  background: var(--steel-50);
  font: 600 var(--fs-small)/1.45 var(--font-head);
  color: var(--navy);
}
.form-status:empty { display: none; }
.form-status.is-error { border-left-color: var(--error); color: #8c1d18; background: #fdf3f2; }
.form-help { font-size: calc(var(--fs-small) * .92); color: var(--ink-3); }
.form-help a { color: var(--steel-700); }
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.btn[disabled] { opacity: .6; cursor: progress; }
/* JS yokken gönder düğmesi kapalı kalır (siltek.js açar); yanında <noscript> uyarısı */
.btn[data-needs-js][disabled] { cursor: not-allowed; }

/* 12. Hareket ------------------------------------------------------------------- */
@keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes accIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes dashFlow { to { background-position: 24px 0; } }
@keyframes revealFallback { to { opacity: 1; transform: none; } }
@keyframes drawFallback { to { stroke-dashoffset: 0; } }
@keyframes floatCard { 0%, 100% { transform: rotate(-7deg) translateY(0); } 50% { transform: rotate(-5.5deg) translateY(-1.6cqi); } }
@keyframes floatPhone { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.3cqi); } }
@keyframes cardSweep { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes rowIn { from { opacity: 0; transform: translateX(6cqi); } to { opacity: 1; transform: none; } }
@keyframes sway { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
@keyframes sheenLoop { 0% { transform: translateX(-200px); } 64%, 100% { transform: translateX(560px); } }
@keyframes sheenOnce { from { transform: translateX(-200px); } to { transform: translateX(560px); } }
@keyframes flowDash { to { stroke-dashoffset: -48; } }
@keyframes chkBg { 0%, 5% { fill: #fff; stroke: #9fb9d1; } 9%, 84% { fill: #102a3a; stroke: #102a3a; } 92%, 100% { fill: #fff; stroke: #9fb9d1; } }
@keyframes chkTick { 0%, 6% { stroke-dashoffset: 1; } 12%, 84% { stroke-dashoffset: 0; } 90%, 100% { stroke-dashoffset: 1; } }
@keyframes signalRun {
  0% { opacity: 0; transform: translateX(0); }
  10% { opacity: 1; }
  82% { opacity: 1; transform: translateX(100%); }
  92%, 100% { opacity: 0; transform: translateX(100%); }
}
@keyframes signalRunY {
  0% { opacity: 0; transform: translateY(0); }
  10% { opacity: 1; }
  82% { opacity: 1; transform: translateY(100%); }
  92%, 100% { opacity: 0; transform: translateY(100%); }
}
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Girişler: .rise (CSS, açılışta) ve .reveal (görünüme girince, JS) */
.js .rise { animation: rise var(--d-slow) var(--ease) backwards; animation-delay: calc(250ms + var(--i, 0) * var(--stagger)); }

.js .reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity var(--d-slow) var(--ease), transform var(--d-slow) var(--ease);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
.js .reveal.is-in { opacity: 1; transform: none; }
/* Dördüncü emniyet: siltek.js hiç yüklenmezse 3.5 sn sonra her şey görünür */
.js:not(.js-ready) .reveal { animation: revealFallback .01s linear 3.5s forwards; }

/* Kaydırmayla çizilen SVG hatları: .draw (pathLength="1"), bir .reveal / [data-draw] içinde */
.js .draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset var(--d-draw) var(--ease); transition-delay: calc(var(--i, 0) * 150ms); }
.js .is-in .draw, .js .draw.is-in { stroke-dashoffset: 0; }
.js:not(.js-ready) .draw { animation: drawFallback .01s linear 3.5s forwards; }

/* P8 bağlantı çizgileri */
.js .routes .route__line i { transform: scaleX(0); transition: transform 1s var(--ease), background var(--d); }
.js .routes.is-in .route__line i { transform: scaleX(1); }
.js .routes.is-in .route:nth-child(2) .route__line i { transition-delay: .12s; }
.js .routes.is-in .route:nth-child(3) .route__line i { transition-delay: .24s; }
.js .routes.is-in .route:nth-child(4) .route__line i { transition-delay: .36s; }
.js .routes.is-in .route:nth-child(5) .route__line i { transition-delay: .48s; }
.js:not(.js-ready) .routes .route__line i { animation: revealFallback .01s linear 3.5s forwards; }

/* Sahne döngüleri — yalnız [data-scene].is-playing iken oynar */
[data-scene]:not(.is-playing) *,
[data-scene]:not(.is-playing) *::before,
[data-scene]:not(.is-playing) *::after { animation-play-state: paused !important; }
.fx-card { animation: floatCard 7s var(--ease-io) infinite; }
.fx-card::after { animation: cardSweep 6s var(--ease-io) infinite 1.2s; }
.phone { animation: floatPhone 6s var(--ease-io) infinite 1s; }
.screen.is-on :is(.scr-row, .scr-item, .scr-kv) { animation: rowIn .6s var(--ease) backwards; animation-delay: calc(180ms + var(--i, 0) * 110ms); }
.kg-scene__art .jacket { animation: sway 6s var(--ease-io) infinite; }
.kg-scene__art .sheen { animation: sheenLoop 7s var(--ease-io) infinite 1s; }
.kg-scene__art .flowline { animation: flowDash 2.4s linear infinite; }
.kg-check circle { animation: chkBg 7s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .45s); }
.kg-check path { animation: chkTick 7s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .45s); }

/* 13. Kırılımlar ------------------------------------------------------------------ */
@media (max-width: 1180px) {
  .hero-home__title { grid-column: 1 / -1; }
  .hero-home__aside { grid-column: 1 / 11; }
  .principles__list { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts-block__card, .facts-block__aside { grid-column: 1 / -1; }
  .facts-block__aside--wide-only { display: none; }
  .route { grid-template-columns: clamp(34px, calc(3.6 * var(--vw)), 100px) minmax(0, 1.4fr) minmax(24px, .5fr) clamp(270px, calc(28 * var(--vw)), 340px); }
}
@media (max-width: 1100px) {
  .legal__toc { display: none; }
  .legal__body { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .sec-head__meta { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; align-items: center; }
  .sec-head__main { grid-column: 1 / -1; }
  .hero-home__aside { grid-column: 1 / -1; }
  .hero-page__copy, .hero-page__visual,
  .hero-page--7-5 .hero-page__copy, .hero-page--7-5 .hero-page__visual,
  .hero-page--solo .hero-page__copy { grid-column: 1 / -1; }
  .dual { grid-template-columns: 1fr; }
  .timeline__aside { grid-column: 1 / -1; position: static; }
  .timeline__steps { grid-column: 1 / -1; }
  .cta-band__copy, .cta-band__actions { grid-column: 1 / -1; justify-content: flex-start; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .principles__list li { gap: 10px; padding: 12px 14px; }
  .route { padding-block: 16px; row-gap: 10px; }
  .route__dest { padding: 10px 14px; }
  .principles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route { grid-template-columns: clamp(28px, calc(7 * var(--vw)), 48px) minmax(0, 1fr); row-gap: 14px; align-items: start; }
  .route__n { padding-top: .3em; }
  .route__line { display: none; }
  .route__dest { grid-column: 1 / -1; }
  .fields { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .products { grid-template-columns: 1fr; }
  .catalog-grid { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  :root { --sec: 60px; --s7: 36px; --s6: 28px; }
  .biz .panel__head { padding: 16px 16px 14px; }
  .biz .panel__body { padding: 16px 16px 20px; }
  .panel__foot { margin-inline: 16px; padding-block: 16px; gap: 12px; }
  .sec-head { padding-top: 14px; row-gap: 12px; }
  .lead { line-height: 1.5; }
  :is(.hero-page__actions, .cta-band__actions) .btn { width: 100%; }
  .panel__foot { flex-direction: column; align-items: stretch; }
  .panel__foot .btn { width: 100%; }
  .panel__foot .link { align-self: flex-start; }
}

/* 14. Hareket azaltma -------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .js .reveal, .js .rise { opacity: 1 !important; transform: none !important; }
  .js .routes .route__line i { transform: none !important; }
  .js .draw, .kg-check path { stroke-dashoffset: 0 !important; }
  .kg-check circle { fill: var(--navy) !important; stroke: var(--navy) !important; }
  .sheen { display: none !important; }
  .panel:hover, .product:hover { transform: none; }
  .fx-card { transform: rotate(-6deg); }
  .screen { transition: none; }
  .timeline { --p: 1 !important; }
  .rotator-dots { display: none; }
}

/* 15. Yazdırma ------------------------------------------------------------------------ */
@media print {
  .site-header nav, .drawer, .menu-btn, .skip-link, .stage, .rotator-dots { display: none !important; }
  body { font-size: 11pt; color: #000; background: #fff; }
  .sec, .sec--tight { padding-block: 16pt; }
  .sec--dark, .hero-page--dark, .site-footer { background: #fff !important; color: #000 !important; }
  :is(.sec--dark, .hero-page--dark, .site-footer) :is(h1, h2, h3, h4, p, a, li, dt, dd) { color: #000 !important; }
  .reveal, .rise { opacity: 1 !important; transform: none !important; }
  .panel, .form-card { box-shadow: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
}

/* 16. Sayfaya özel bölümler ------------------------------------------------------------
   Yalnız o sayfada kullanılan, sayfa önekli sınıflar (hk-, kp-, fxp-/fxa, kg-, ilt-, kv-, e404).
   Birden çok sayfada gereken her şey yukarıdaki ortak bölümlere taşınır. Her bölüm kendi
   kırılımlarını ve hareket azaltma kurallarını sonunda taşır. */

/* === SAYFA: hakkimizda (SC-5 sistem şeması, SC-13 künye çizimi) === */
/* Yalnız sayfa önekli sınıflar (hk-, sysmap, nd). */
@keyframes hkDashX { to { background-position: 20px 0; } }
@keyframes hkDashY { to { background-position: 0 20px; } }

/* Açılış: 5/7 yerleşim, 1180 px altında şema metnin altına iner */
.hk-hero .hero-page__grid { align-items: center; }
@media (min-width: 1181px) {
  .hk-hero .hero-page__copy { grid-column: 1 / 6; }
  .hk-hero .hero-page__visual { grid-column: 6 / -1; }
}
@media (max-width: 1180px) {
  .hk-hero .hero-page__copy, .hk-hero .hero-page__visual { grid-column: 1 / -1; }
  .hk-hero .hero-page__copy { max-width: 900px; }
}

/* SC-5 — iki hatlı sistem şeması */
.sysmap { container: sysmap / inline-size; min-width: 0; }
.sysmap__frame {
  --ring: clamp(40px, 7cqi, 112px);
  --code: max(10px, 1.2cqi);
  --gapn: max(4px, .6cqi);
  --t: max(14px, 2.05cqi);
  --s: max(12px, 1.45cqi);
  --ln: rgba(111, 147, 181, .8);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "capA head"
    "rowA rowA"
    "hub hub"
    "rowB rowB"
    "capB capB";
  row-gap: clamp(8px, 1.3cqi, 22px);
  column-gap: 16px;
  padding: clamp(16px, 3cqi, 52px);
  border: 1px solid var(--line-dark); border-radius: var(--r);
  background: rgba(8, 24, 34, .45);
}
/* köşe kayıt işaretleri */
.sysmap__frame::before {
  --tc: rgba(159, 185, 209, .55); --t2: 12px; --o: 9px;
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(var(--tc), var(--tc)) left var(--o) top var(--o) / var(--t2) 1px no-repeat,
    linear-gradient(var(--tc), var(--tc)) left var(--o) top var(--o) / 1px var(--t2) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right var(--o) top var(--o) / var(--t2) 1px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right var(--o) top var(--o) / 1px var(--t2) no-repeat,
    linear-gradient(var(--tc), var(--tc)) left var(--o) bottom var(--o) / var(--t2) 1px no-repeat,
    linear-gradient(var(--tc), var(--tc)) left var(--o) bottom var(--o) / 1px var(--t2) no-repeat,
    linear-gradient(var(--tc), var(--tc)) right var(--o) bottom var(--o) / var(--t2) 1px no-repeat,
    linear-gradient(var(--tc), var(--tc)) right var(--o) bottom var(--o) / 1px var(--t2) no-repeat;
}
.hk-hero .sysmap__cap {
  align-self: center;
  font: 700 var(--code)/1.35 var(--font-head);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel-300);
}
.sysmap__cap b { color: #fff; font-weight: 800; }
.sysmap__cap--a { grid-area: capA; }
.sysmap__cap--b { grid-area: capB; }
.sysmap__row--a { grid-area: rowA; }
.sysmap__row--b { grid-area: rowB; }
.sysmap__hubrow { grid-area: hub; }

.sysmap__row { position: relative; min-width: 0; }
.sysmap__nodes {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.sysmap__nodes li { position: relative; display: flex; justify-content: center; min-width: 0; }
/* hatlar arası kesikli akış */
.sysmap__nodes li:not(:last-child)::before {
  content: ""; position: absolute; z-index: 0;
  top: calc(4px + var(--code) + var(--gapn) + var(--ring) / 2 - .75px);
  left: calc(50% + var(--ring) / 2 + 6px);
  width: calc(100% - var(--ring) - 12px);
  height: 1.5px;
  background: repeating-linear-gradient(90deg, var(--ln) 0 5px, transparent 5px 10px);
  animation: hkDashX 3s linear infinite;
}
.sysmap__nodes li:not(:last-child)::after {
  content: ""; position: absolute; z-index: 0;
  top: calc(4px + var(--code) + var(--gapn) + var(--ring) / 2 - 3.5px);
  left: calc(150% - var(--ring) / 2 - 13px);
  width: 6px; height: 6px;
  border-top: 1.5px solid var(--steel-300); border-right: 1.5px solid var(--steel-300);
  transform: rotate(45deg);
}
.nd {
  position: relative; z-index: 1;
  display: grid; justify-items: center; align-content: start;
  gap: var(--gapn);
  width: 100%;
  padding: 4px 3px 6px;
  border-radius: var(--r);
  color: #fff; text-align: center; text-decoration: none;
}
.nd__ring {
  display: grid; place-items: center;
  width: var(--ring); height: var(--ring);
  border-radius: 50%;
  background: var(--navy-900);
  border: 1.5px solid var(--steel-400);
  color: #d3e2ee;
  transition: background var(--d), border-color var(--d), box-shadow var(--d), color var(--d);
}
.nd__ring .i { width: calc(var(--ring) * .42); height: calc(var(--ring) * .42); }
.nd__txt { display: grid; gap: .25em; min-width: 0; }
.nd__t { font: 700 var(--t)/1.15 var(--font-head); letter-spacing: -.01em; color: #fff; overflow-wrap: anywhere; }
.nd__s { font: 400 var(--s)/1.35 var(--font-body); color: var(--on-dark-2); }
.nd:is(:hover, :focus-visible, .is-active) .nd__ring {
  background: var(--navy-700);
  border-color: #fff;
  color: #fff;
  box-shadow: 0 0 0 max(4px, .7cqi) rgba(159, 185, 209, .16), 0 0 max(14px, 2.4cqi) rgba(159, 185, 209, .45);
}
.nd:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 2px; }

/* merkez ve ölçü çizgisi gibi köşeli bağlantılar */
.sysmap__hubrow { display: grid; justify-items: center; }
.sysmap__brk { position: relative; display: block; width: 100%; height: clamp(22px, 3.6cqi, 64px); }
.sysmap__brk::before {
  content: ""; position: absolute;
  left: calc(50% / var(--n)); right: calc(50% / var(--n));
  height: 8px;
  border: 1.5px solid var(--ln);
  background: repeating-linear-gradient(90deg, var(--ln) 0 1.5px, transparent 1.5px calc(100% / (var(--n) - 1))) 0 0 / 100% 100% no-repeat;
}
.sysmap__brk::after { content: ""; position: absolute; left: calc(50% - .75px); width: 1.5px; background: var(--ln); }
.sysmap__brk--a::before { top: 0; border-top: 0; }
.sysmap__brk--a::after { top: 8px; bottom: 0; }
.sysmap__brk--b::before { bottom: 0; border-bottom: 0; }
.sysmap__brk--b::after { top: 0; bottom: 8px; }
.sysmap__split { display: none; }

.sysmap__hubwrap { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; width: 100%; }
.sysmap__side {
  display: flex; align-items: center; gap: 10px;
  font: 700 var(--code)/1 var(--font-head);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--steel-300);
}
.sysmap__side--l { justify-content: flex-end; }
.sysmap__side--l::after, .sysmap__side--r::before { content: ""; flex: 0 1 clamp(18px, 6cqi, 110px); border-top: 1px dashed var(--ln); }
.sysmap__hub { position: relative; width: clamp(118px, 18cqi, 300px); aspect-ratio: 1; margin-inline: 12px; }
.sysmap__hub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.sysmap__hub .hub-ticks { fill: none; stroke: var(--steel-400); stroke-width: 6; stroke-dasharray: .6 2.4; opacity: .55; }
.sysmap__hub .hub-dash { fill: none; stroke: var(--steel-300); stroke-width: 1.3; stroke-dasharray: 6 8; opacity: .85; }
.sysmap__hub .hub-dot { fill: none; stroke: var(--steel-400); stroke-width: 1.2; stroke-dasharray: 1 5; }
.sysmap__hub .hub-core { fill: #fff; stroke: rgba(159, 185, 209, .35); stroke-width: 8; paint-order: stroke; }
.sysmap__hub .hub-rot { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.sysmap__hub .hub-rot--rev { animation-duration: 60s; animation-direction: reverse; }
.sysmap__logo {
  width: 44%;
  position: absolute; left: 50%; top: 50%;
  margin: 0;
  transform: translate(-50%, -50%);
  color: var(--navy);
}

/* dikey varyant: merkez üstte, A solda, B sağda */
@container sysmap (max-width: 619px) {
  .sysmap__frame {
    --ring: 38px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "head head"
      "hub hub"
      "capA capB"
      "rowA rowB";
    column-gap: 14px;
    row-gap: 12px;
  }
  .sysmap__brk, .sysmap__side { display: none; }
  .sysmap__split { display: block; position: relative; width: 100%; height: 28px; }
  .sysmap__split::before {
    content: ""; position: absolute; left: calc(25% - 3px); right: calc(25% - 3px); top: 50%; bottom: 0;
    border: 1.5px solid var(--ln); border-bottom: 0;
  }
  .sysmap__split::after { content: ""; position: absolute; left: calc(50% - .75px); top: 0; height: 50%; width: 1.5px; background: var(--ln); }
  .sysmap__hubwrap { grid-template-columns: 1fr; justify-items: center; }
  .sysmap__hub { margin: 0; }
  .hk-hero .sysmap__cap { align-self: end; padding-bottom: 4px; border-bottom: 1px solid var(--line-dark); }
  .sysmap__nodes { grid-template-columns: 1fr; row-gap: 14px; }
  .sysmap__nodes li { justify-content: flex-start; }
  .sysmap__nodes li:not(:last-child)::before {
    top: calc(4px + var(--ring) + 4px);
    left: calc(3px + var(--ring) / 2 - .75px);
    width: 1.5px;
    height: calc(100% - var(--ring) - 8px + 14px);
    background: repeating-linear-gradient(180deg, var(--ln) 0 5px, transparent 5px 10px);
    animation-name: hkDashY;
  }
  .sysmap__nodes li:not(:last-child)::after { display: none; }
  .nd {
    grid-template-columns: var(--ring) minmax(0, 1fr);
    grid-template-areas: "ring code" "ring txt";
    justify-items: start; align-items: start;
    column-gap: 10px; row-gap: 3px;
    text-align: left;
  }
  .nd__ring { grid-area: ring; }
  .nd__txt { grid-area: txt; }
  .nd__t { font-size: 14px; }
  .nd__s { font-size: 12px; }
}

/* 5. Künye */
.hk-legal { font-family: var(--font-head); font-weight: 700; letter-spacing: .02em; }
@media (min-width: 1181px) { #sirket-bilgileri .facts-block__aside { position: sticky; top: var(--s6); } }

/* SC-13 künye belgesi çizimi */
.hk-doc__scene { position: absolute; inset: 0; }
.hk-doc__sheet {
  position: absolute; left: 13cqi; top: 8cqi;
  width: 52cqi; height: 62cqi;
  display: grid; align-content: start; gap: 2.4cqi;
  padding: 4.4cqi;
  background: #fff;
  border: 1px solid var(--line); border-radius: 1cqi;
  box-shadow: var(--shadow-lg);
  transform: rotate(-2.5deg);
}
.hk-doc__sheet--back {
  left: 19cqi; top: 6cqi;
  background: #fff;
  box-shadow: var(--shadow);
  transform: rotate(3.5deg);
}
.hk-doc__title {
  display: flex; align-items: center; gap: 1.4cqi;
  padding-bottom: 2cqi;
  border-bottom: 1px solid var(--line);
  font: 800 max(10px, 2cqi)/1.1 var(--font-head);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--navy);
}
.hk-doc__title::before { content: ""; width: 1.4cqi; height: 1.4cqi; background: var(--navy); flex: none; }
.hk-doc__rows { display: grid; gap: 2.2cqi; margin: 0; padding: 0; list-style: none; }
.hk-doc__rows li { display: grid; grid-template-columns: 30% minmax(0, 1fr); align-items: center; gap: 2.4cqi; transform-origin: left; }
.hk-doc__rows i { height: 1.4cqi; border-radius: 2px; background: #d5d9dd; } /* nötr gri (açık mavi değil) */
.hk-doc__rows b { height: 1.8cqi; border-radius: 2px; background: rgba(16, 42, 58, .3); }
.hk-doc__rows li:nth-child(2n) b { width: 70%; }
.hk-doc__emblem { position: absolute; right: 8cqi; bottom: 8cqi; width: 30cqi; aspect-ratio: 1; }
.hk-doc__emblem svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hk-doc__emblem .em-ticks { fill: none; stroke: var(--steel-700); stroke-width: 7; stroke-dasharray: .5 2.5; opacity: .55; }
.hk-doc__emblem .em-dash { fill: none; stroke: var(--steel-400); stroke-width: 1.5; stroke-dasharray: 5 6; }
.hk-doc__emblem .em-rot { transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite; }
.hk-doc__emblem .em-core { fill: #fff; stroke: var(--steel-700); stroke-width: 1.5; }
.hk-doc__logo { width: 28%; position: absolute; left: 50%; top: 50%; margin: 0; transform: translate(-50%, -50%); color: var(--navy); }
.js .hk-doc__rows li { transform: scaleX(0); transition: transform .7s var(--ease); transition-delay: calc(.35s + var(--i, 0) * 90ms); }
.js .is-in .hk-doc__rows li { transform: none; }
.js:not(.js-ready) .hk-doc__rows li { animation: revealFallback .01s linear 3.5s forwards; }

/* Kırılımlar — hakkimizda */
@media (prefers-reduced-motion: reduce) {
  .js .hk-doc__rows li { transform: none !important; }
}
/* === /SAYFA: hakkimizda === */

/* === SAYFA: kalite-politikasi (SC-8 kalite döngüsü, .policy-list) === */
/* Yalnız sayfa önekli sınıflar (kp-, qloop, ql-). */
/* SC-8 — kalite döngüsü (13,2 sn = 6 adım × 2,2 sn) */
@keyframes qlTurn {
  0% { transform: rotate(-210deg); }
  3%, 16.667% { transform: rotate(-150deg); }
  19.667%, 33.333% { transform: rotate(-90deg); }
  36.333%, 50% { transform: rotate(-30deg); }
  53%, 66.667% { transform: rotate(30deg); }
  69.667%, 83.333% { transform: rotate(90deg); }
  86.333%, 100% { transform: rotate(150deg); }
}
@keyframes qlNode { 0%, 14% { fill: #102a3a; stroke: #102a3a; } 17%, 100% { fill: #fff; stroke: #6f93b5; } }
@keyframes qlNodeT { 0%, 14% { fill: #fff; } 17%, 100% { fill: #102a3a; } }
@keyframes qlItem {
  0%, 14% { color: #102a3a; border-left-color: #102a3a; background-color: #f4f5f6; }
  17%, 100% { color: #41566a; border-left-color: #d8e2eb; background-color: rgba(244, 245, 246, 0); }
}

.qloop__grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(16px, 4cqi, 64px);
  padding: clamp(18px, 5cqi, 72px);
}
.qloop__grid > * { min-width: 0; }
.qloop__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.ql-ticks { fill: none; stroke: var(--steel-200); stroke-width: 10; stroke-dasharray: .5 2.5; }
.ql-ring { fill: none; stroke: var(--line-2); stroke-width: 2; }
.ql-dash { fill: none; stroke: var(--steel-400); stroke-width: 1.2; stroke-dasharray: 4 7; }
.ql-inner { transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.ql-arc {
  fill: none; stroke: var(--navy); stroke-width: 5; stroke-dasharray: 1 5;
  transform-box: fill-box; transform-origin: 50% 50%;
  transform: rotate(-150deg);
  animation: qlTurn 13.2s var(--ease-io) infinite;
}
.ql-chev path { fill: none; stroke: var(--steel-400); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ql-node circle { fill: #fff; stroke: #6f93b5; stroke-width: 1.5; animation: qlNode 13.2s infinite; animation-delay: calc(var(--k, 0) * 2.2s); }
.ql-node text { font: 700 16px/1 var(--font-head); fill: #102a3a; font-variant-numeric: tabular-nums; animation: qlNodeT 13.2s infinite; animation-delay: calc(var(--k, 0) * 2.2s); }
.ql-c1 { font: 800 27px/1 var(--font-head); letter-spacing: .16em; fill: #102a3a; }
.ql-c2 { font: 700 15px/1 var(--font-head); letter-spacing: .3em; fill: #56697a; }

.qloop__side { display: grid; gap: var(--s3); align-content: center; justify-items: start; }
.qloop__title { font: 700 var(--fs-h4)/1.25 var(--font-head); color: var(--navy); letter-spacing: -.01em; }
.qloop__list { display: grid; gap: 2px; width: 100%; margin: var(--s2) 0 0; padding: 0; list-style: none; }
.qloop__list li {
  display: flex; align-items: baseline; gap: .8em;
  padding: .55em .8em;
  border-left: 2px solid var(--line);
  font: 600 calc(var(--fs-body) * .95)/1.3 var(--font-head);
  color: var(--ink-2);
  animation: qlItem 13.2s infinite;
  animation-delay: calc(var(--k, 0) * 2.2s);
}
.qloop__n { font: 700 var(--fs-label)/1 var(--font-head); color: var(--ink-3); font-variant-numeric: tabular-nums; }
@container scene (max-width: 560px) {
  .qloop__grid { grid-template-columns: 1fr; }
  .qloop__art { width: min(80%, 380px); justify-self: center; }
}

/* Politika belgesi */
.kp-doc__intro {
  grid-column: 5 / -1;
  max-width: 66ch;
  margin-bottom: var(--s6);
  padding-left: var(--s5);
  border-left: 2px solid var(--navy);
  font-size: var(--fs-lead); line-height: 1.55;
  color: var(--ink);
}
.kp-policy {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line-2); border-left: 1px solid var(--line);
}
.kp-policy li {
  position: relative;
  display: grid; align-content: start; gap: var(--s3);
  min-width: 0;
  padding: clamp(20px, calc(2.2 * var(--vw)), 60px);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background var(--d) var(--ease);
}
.kp-policy li:hover { background: var(--hover); }
.kp-policy__n {
  font: 800 clamp(34px, calc(3 * var(--vw)), 88px)/1 var(--font-head);
  letter-spacing: -.04em;
  color: var(--steel);
  font-variant-numeric: tabular-nums;
}
.kp-policy h3 { font-size: var(--fs-h4); line-height: 1.3; }
.kp-policy p { color: var(--ink-2); font-size: var(--fs-small); line-height: 1.6; }
.js .kp-policy li::before {
  content: ""; position: absolute; left: -1px; top: -1px;
  width: clamp(28px, calc(2.4 * var(--vw)), 64px); height: 2px;
  background: var(--navy);
  transform: scaleX(0); transform-origin: left;
  transition: transform .8s var(--ease);
}
.js .kp-policy.is-in li::before { transform: none; }
.js .kp-policy.is-in li:nth-child(3n+2)::before { transition-delay: .12s; }
.js .kp-policy.is-in li:nth-child(3n)::before { transition-delay: .24s; }

/* Kırılımlar — kalite */
@media (max-width: 1180px) {
  .kp-doc__intro { grid-column: 1 / -1; }
  .kp-policy { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .qloop__art { display: none !important; }
  .qloop__grid { grid-template-columns: 1fr; }
  .kp-policy { grid-template-columns: 1fr; }
  .kp-doc__intro { padding-left: var(--s4); }
}
@media (prefers-reduced-motion: reduce) {
  .ql-arc { display: none !important; }
  .js .kp-policy li::before { transform: none !important; }
  .qloop__list li { color: var(--ink-2); }
}
/* === /SAYFA: kalite-politikasi === */

/* === SAYFA: favyoflex-card (#tanitim aktör bandı) === */
/* Önek: .fxp- (sayfa) ve .fxa (aktör bandı). FavyoFlex altın/lacivert renkleri yalnız
   FavyoFlex sahnelerinde kullanılır; bu sayfadaki bütün çizimler FavyoFlex sahnesidir. */

/* 1. Açılış ------------------------------------------------------------------ */
.fxp-hero .hero-page__copy { gap: clamp(16px, calc(1.3 * var(--vw)), 32px); }
.fxp-stage { box-shadow: var(--shadow-lg); }

/* 2. Aktör bandı (#tanitim): Kurum → Çalışan → Üye iş yeri ---------------------- */
.fxa {
  --pipe: clamp(80px, calc(7.2 * var(--vw)), 210px);
  position: relative;
  container: fxa / inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--pipe) minmax(0, 1fr) var(--pipe) minmax(0, 1fr);
  align-items: stretch;
}
.fxa > * { min-width: 0; }

.fxa__card {
  position: relative;
  display: flex; flex-direction: column;
  background: rgba(159, 185, 209, .035);
  border: 1px solid var(--line-dark); border-radius: var(--r);
  overflow: hidden;
  transition: transform var(--d) var(--ease), border-color var(--d) var(--ease), background var(--d) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  .fxa__card:hover { transform: translateY(-4px); border-color: rgba(201, 181, 146, .55); background: rgba(159, 185, 209, .06); }
}
/* zemin: ortak köşe işaretli kuyu (bkz. .well, .fxa__well), koyu FavyoFlex renkleriyle */
.fxa__well {
  --tc: rgba(201, 181, 146, .55);
  --grid-c: rgba(159, 185, 209, .07);
  --grid-s: 20px;
  --well-bg: var(--navy-950);
  position: relative;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid var(--line-dark);
}
.fxa__art { position: absolute; inset: 4% 3%; width: 94%; height: 92%; overflow: visible; }
.fxa__body {
  flex: 1;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: clamp(10px, calc(.8 * var(--vw)), 20px);
  padding: clamp(18px, calc(1.8 * var(--vw)), 48px);
}
.fxa__card h3 { font-size: var(--fs-h3); }
.fxa__body > p:not(.fxa__who) { font-size: var(--fs-small); line-height: 1.6; }

/* bağlantı hattı: etiket + kesikli altın çizgi + gezen nokta */
.fxa__pipe {
  align-self: start;
  height: calc((100cqi - 2 * var(--pipe)) / 3 * .625);
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  gap: clamp(8px, calc(.7 * var(--vw)), 16px);
  padding-inline: clamp(6px, calc(.6 * var(--vw)), 14px);
}
.fxa__pipe b {
  display: block;
  font: 700 calc(var(--fs-label) * .86)/1.35 var(--font-head);
  letter-spacing: .1em; text-transform: uppercase;
  text-align: center;
  color: var(--fx-gold-l);
  text-wrap: balance;
}
.fxa__track {
  position: relative; display: block;
  height: 2px;
  background: repeating-linear-gradient(90deg, rgba(201, 181, 146, .75) 0 6px, transparent 6px 11px);
}
.fxa__track::before, .fxa__track::after { content: ""; position: absolute; top: 50%; }
.fxa__track::before { left: -4px; width: 8px; height: 8px; margin-top: -4px; border: 1.5px solid var(--fx-gold); border-radius: 50%; background: var(--navy-900); }
.fxa__track::after { right: -2px; width: 0; height: 0; margin-top: -5px; border-left: 8px solid var(--fx-gold); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
.fxa__track i { position: absolute; inset: 0; opacity: 0; }
.fxa__track i::before {
  content: ""; position: absolute; left: -4px; top: 50%;
  width: 8px; height: 8px; margin-top: -4px; border-radius: 50%;
  background: var(--fx-gold-l);
  box-shadow: 0 0 0 4px rgba(201, 181, 146, .18), 0 0 12px rgba(230, 214, 181, .6);
}

/* sahne ögeleri — varsayılan (durağan / hareket azaltma) hâli son durumdur */
.fxa-ping { stroke-dashoffset: 0; }
.fxa-phone, .fxa-card2, .fxa-tap, .fxa-hang { transform-box: fill-box; }
.fxa-card2 { transform-origin: 50% 50%; }
.fxa-hang { transform-origin: 50% 0; }

/* döngüler — yalnız [data-scene].is-playing iken oynar (siltek.css genel kuralı) */
@keyframes fxaPing { to { stroke-dashoffset: -32; } }
@keyframes fxaCard { 0%, 100% { transform: rotate(0deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-4px); } }
@keyframes fxaRow { 0%, 6% { opacity: 0; transform: translateX(10px); } 16%, 100% { opacity: 1; transform: none; } }
@keyframes fxaTag { 0%, 30% { opacity: 0; transform: translateX(-6px); } 40%, 86% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateX(-6px); } }
@keyframes fxaWave { 0%, 100% { opacity: .15; } 30%, 55% { opacity: 1; } }
@keyframes fxaTap { 0%, 18% { transform: translateY(-8px) rotate(-3deg); } 45%, 70% { transform: translateY(4px) rotate(0deg); } 95%, 100% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes fxaHang { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }

.fxa__track i { animation: signalRun 4s var(--ease-io) infinite 1.2s; }
.fxa__pipe + .fxa__card + .fxa__pipe .fxa__track i { animation-delay: 3.2s; }
.fxa-ping { animation: fxaPing 2.4s linear infinite; }
.fxa-phone { animation: bob 6s var(--ease-io) infinite 1s; }
.fxa-card2 { animation: fxaCard 7s var(--ease-io) infinite; }
.fxa-row { animation: fxaRow 7s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .35s); }
.fxa-tag { animation: fxaTag 7s var(--ease) infinite; }
.fxa-waves path { animation: fxaWave 2.4s var(--ease-io) infinite; }
.fxa-waves .w2 { animation-delay: .3s; }
.fxa-waves .w3 { animation-delay: .6s; }
.fxa-tap { animation: fxaTap 4.8s var(--ease-io) infinite; }
.fxa-hang { animation: fxaHang 6s var(--ease-io) infinite; }

/* 4. Yönlendirme ------------------------------------------------------------- */
.fxp-cta .cta-band__inner { padding-top: 0; border-top: 0; }
.fxp-cta__btn { font-size: var(--fs-body); padding: clamp(15px, calc(1.1 * var(--vw)), 26px) clamp(22px, calc(1.8 * var(--vw)), 44px); }
.fxp-cta__btn .fmark { width: 1.2em; height: 1.1em; }

/* 5. Kırılımlar -------------------------------------------------------------- */
@media (max-width: 960px) {
  .fxa { grid-template-columns: minmax(0, 1fr); }
  .fxa__pipe {
    height: auto;
    display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center;
    column-gap: 18px;
    padding: 0 0 0 clamp(24px, 8%, 72px);
  }
  .fxa__pipe b { grid-column: 2; grid-row: 1; text-align: left; }
  .fxa__track {
    grid-column: 1; grid-row: 1;
    width: 2px; height: 64px;
    background: repeating-linear-gradient(180deg, rgba(201, 181, 146, .75) 0 6px, transparent 6px 11px);
  }
  .fxa__track::before { left: 50%; top: -4px; margin: 0 0 0 -4px; }
  .fxa__track::after { right: auto; left: 50%; top: auto; bottom: -2px; margin: 0 0 0 -5px; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid var(--fx-gold); border-bottom: 0; }
  .fxa__track i::before { left: 50%; top: -4px; margin: 0 0 0 -4px; }
  .fxa__track i { animation-name: signalRunY; }
}
@media (min-width: 561px) and (max-width: 960px) {
  .fxa__card { flex-direction: row; }
  .fxa__well { flex: 0 0 44%; aspect-ratio: auto; min-height: 220px; border-bottom: 0; border-right: 1px solid var(--line-dark); }
  .fxp-stage { aspect-ratio: 16 / 10; }
  .fxp-stage .fx-scene--hero { --card-x: 8cqi; --card-y: 17cqi; --card-w: 50cqi; --phone-x: 10cqi; --phone-y: 3.5cqi; --phone-w: 26.5cqi; }
}
@media (max-width: 560px) {
  .fxp-stage { aspect-ratio: 1 / 1; }
  .fxp-stage .fx-scene--hero { --card-y: 34cqi; --phone-y: 6cqi; }
}
@media (max-width: 480px) {
  .fxp-cta__btn { width: 100%; }
}

/* 6. Hareket azaltma ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .fxa__track i { display: none; }
  .fxa__card:hover { transform: none; }
}
/* === /SAYFA: favyoflex-card === */

/* === SAYFA: koruyucu-giyim (SC-3 açılış, SC-4 ürün çizimleri, SC-10 şartname) === */
/* 1. Açılış ------------------------------------------------------------------ */
.kg-hero .hero-page__grid { align-items: center; }
.kg-hero__groups {
  display: grid; grid-template-columns: repeat(2, minmax(0, max-content));
  gap: 10px clamp(18px, calc(1.8 * var(--vw)), 44px);
  margin: var(--s3) 0 0; padding: var(--s4) 0 0;
  border-top: 1px solid var(--line-2);
  list-style: none;
  font: 600 var(--fs-small)/1.3 var(--font-head);
  color: var(--navy);
}
.kg-hero__groups li { display: flex; align-items: center; gap: .6em; min-width: 0; }
.kg-hero__groups .i { width: 1.25em; height: 1.25em; flex: none; color: var(--steel-700); }

/* SC-3 açılış varyantı: ceket solda büyük, talep kartı ve beden grafiği sağda */
@container scene (min-width: 520px) {
  .kg-scene--hero .kg-scene__art { left: 4cqi; right: auto; top: 47%; height: 54cqi; }
  .kg-scene--hero .kg-card { right: 2.5cqi; top: 6cqi; width: 34cqi; transform: none; }
  .kg-scene--hero .kg-sizes { display: grid; }
}
.kg-sizes {
  position: absolute; z-index: 2;
  right: 2.5cqi; bottom: 3cqi; width: 34cqi;
  display: none; gap: 1.2cqi;
  padding: 2cqi 2.4cqi 1.6cqi;
  background: #fff;
  border: 1px solid var(--line-2); border-radius: max(5px, 1.1cqi);
  font-family: var(--font-head); color: var(--navy);
}
.kg-sizes__h {
  display: flex; justify-content: space-between; align-items: center; gap: 1cqi;
  font-size: max(10px, 1.9cqi); font-weight: 800; letter-spacing: -.01em; line-height: 1.1;
}
.kg-sizes__h em {
  font-style: normal; font-size: max(10px, 1.5cqi); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-3); padding: .3cqi .7cqi; border: 1px solid var(--line-2); border-radius: 3px;
}
.kg-sizes__bars {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end;
  gap: 1.4cqi; height: 11cqi;
  margin: 0; padding: 0; list-style: none;
}
.kg-sizes__bars li { display: grid; grid-template-rows: 1fr auto; justify-items: center; gap: .6cqi; height: 100%; }
.kg-sizes__bars i {
  align-self: end;
  width: 100%; height: calc(var(--h) * 100%);
  background: linear-gradient(180deg, var(--steel-400), var(--steel-700));
  border-radius: 2px 2px 0 0;
  transform-origin: bottom;
}
.kg-sizes__bars li:nth-child(3) i { background: var(--navy); }
.kg-sizes__bars b { font-size: max(10px, 1.5cqi); font-weight: 700; color: var(--ink-3); line-height: 1; }
@keyframes kgBar { 0%, 6% { transform: scaleY(.12); } 20%, 86% { transform: scaleY(1); } 96%, 100% { transform: scaleY(.12); } }
.kg-sizes__bars i { animation: kgBar 7s var(--ease) infinite; animation-delay: calc(2.3s + var(--i, 0) * .12s); }

/* 2. Ürün grupları ------------------------------------------------------------- */
#urunler .products { margin-top: 0; }
.product .well > svg { overflow: visible; }
.js .product.is-in .sheen { animation: sheenOnce 1.5s var(--ease) backwards; animation-delay: calc(.5s + var(--i, 0) * .15s); }
@media (hover: hover) and (pointer: fine) {
  .product:hover .sheen { animation: sheenOnce 1.1s var(--ease) both; }
}
.product h3 { margin-top: -4px; }

.kg-envs {
  display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
  align-items: center; gap: var(--s4) var(--gap);
  margin-top: var(--gap);
  padding: clamp(16px, calc(1.4 * var(--vw)), 34px) clamp(18px, calc(1.6 * var(--vw)), 40px);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--steel-50);
}
.kg-envs__list {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--gap);
  margin: 0; padding: 0; list-style: none;
}
.kg-envs__list li { display: flex; align-items: center; gap: .8em; min-width: 0; font: 700 var(--fs-small)/1.25 var(--font-head); color: var(--navy); }

/* 3. Katalog ---------------------------------------------------------------------- */
.catalog-card__group { margin-top: var(--s2); }
.catalog-card h4 { font-size: var(--fs-h4); color: var(--ink-2); }
.catalog-card .well { aspect-ratio: 16 / 9; }
.catalog-card .well > svg { inset: 8% 20%; width: 60%; height: 84%; }

/* 4. Teknik konular ------------------------------------------------------------- */
.kg-tech { row-gap: var(--s6); align-items: start; }
.kg-tech__intro {
  grid-column: 1 / 5;
  position: sticky; top: var(--s6);
  display: grid; gap: var(--s4); justify-items: start;
  padding-top: clamp(16px, calc(1.4 * var(--vw)), 34px);
  border-top: 1px solid var(--line-2);
}
.kg-tech__intro h2 { font-size: calc(var(--fs-h2) * .9); }
.kg-tech__list { grid-column: 6 / -1; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-2); }
.kg-tech__list > li {
  display: grid; grid-template-columns: clamp(52px, calc(4.6 * var(--vw)), 120px) auto minmax(0, 1fr);
  gap: var(--s4) var(--s5); align-items: start;
  padding-block: clamp(22px, calc(2.2 * var(--vw)), 56px);
  border-bottom: 1px solid var(--line);
}
.kg-tech__body { display: grid; gap: .6em; }
.kg-tech__body h3 { font-size: var(--fs-h3); }
.kg-tech__body p { color: var(--ink-2); max-width: 62ch; }

/* 5. Zaman çizelgesi eklemeleri ---------------------------------------------------- */
.kg-tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.4em; }
.timeline__step .chips { margin-top: var(--s2); }
.timeline__step .chip { font-size: calc(var(--fs-small) * .88); }
.timeline__step .ibox { transition: background var(--d), border-color var(--d), color var(--d); }
.timeline__step.is-done .ibox { border-color: rgba(159, 185, 209, .45); color: #fff; }
.js .timeline__step > :not(.timeline__dot) { opacity: .72; transition: opacity var(--d-slow) var(--ease); }
.js .timeline__step.is-done > * { opacity: 1; }

/* 6. Teklif ------------------------------------------------------------------------- */
.kg-quote__grid { row-gap: var(--s6); align-items: start; }
.kg-quote__intro {
  grid-column: 1 / 6;
  display: grid; gap: var(--s4); align-content: start;
  padding-top: clamp(16px, calc(1.4 * var(--vw)), 34px);
  border-top: 1px solid var(--line-2);
}
.kg-quote__meta { display: flex; justify-content: space-between; align-items: center; gap: 1em; }
.kg-quote__form { grid-column: 6 / -1; }
.kg-quote__steps-h { font: 700 var(--fs-small)/1.4 var(--font-head); color: var(--navy); margin-top: var(--s2); }

.kg-doc-stage { aspect-ratio: 16 / 9.5; margin-top: var(--s2); }
.kg-doc { position: absolute; inset: 0; display: grid; place-items: center; }
.kg-doc svg { width: 94%; height: auto; overflow: visible; }
.kg-doc__t { font: 700 22px/1 var(--font-head); fill: #102a3a; letter-spacing: .01em; }
.kg-doc__row > rect:first-child { fill: #fff; stroke: #36597a; stroke-width: 2; }
.kg-doc__row path { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.kg-doc__row .bar { fill: #d5d9dd; }  /* nötr gri (açık mavi değil) */
.kg-doc__row .bar2 { fill: #e6e8ea; }
.kg-doc__flow { fill: none; stroke: #6f93b5; stroke-width: 3; stroke-dasharray: 2 10; stroke-linecap: round; }
.kg-doc__sheet { transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes kgDocBox { 0%, 5% { fill: #fff; stroke: #36597a; } 9%, 84% { fill: #102a3a; stroke: #102a3a; } 92%, 100% { fill: #fff; stroke: #36597a; } }
@keyframes kgDocLand { 0%, 46% { opacity: 0; transform: translateY(-10px); } 56%, 86% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: none; } }
@keyframes kgDocDrop { 0%, 46% { stroke: #6f93b5; } 54%, 86% { stroke: #102a3a; } 94%, 100% { stroke: #6f93b5; } }
.kg-doc__row > rect:first-child { animation: kgDocBox 7s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .45s); }
.kg-doc__row path { animation: chkTick 7s var(--ease) infinite; animation-delay: calc(var(--i, 0) * .45s); }
.kg-doc__flow { animation: flowDash 2.4s linear infinite; }
.kg-doc__land { transform-box: fill-box; animation: kgDocLand 7s var(--ease) infinite; }
.kg-doc__drop { animation: kgDocDrop 7s var(--ease) infinite; }
.kg-doc__sheet { animation: bob 6s var(--ease-io) infinite; }

.kg-quote__contact { margin-top: var(--s2); }
.kg-quote__contact > div { grid-template-columns: minmax(0, clamp(120px, calc(10 * var(--vw)), 260px)) minmax(0, 1fr); }

.field-file__label { display: inline-flex; align-items: center; gap: .6em; }
.field-file__label .i { width: 1.2em; height: 1.2em; color: var(--steel-700); flex: none; }

/* 7. Marka notu --------------------------------------------------------------------- */
.kg-brandnote .eyebrow { margin-bottom: var(--s4); }
.kg-brandnote .routes { border-top-color: var(--line-2); }
.kg-brandnote .route { border-bottom: 0; }
.kg-brandnote .route__n .fmark { width: clamp(22px, calc(1.8 * var(--vw)), 40px); height: auto; }
.kg-brandnote .route:hover { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }

/* Kırılımlar ------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .kg-quote__intro { grid-column: 1 / 6; }
  .kg-envs { grid-template-columns: 1fr; }
}
@media (max-width: 960px) {
  .kg-tech__intro { grid-column: 1 / -1; position: static; }
  .kg-tech__list { grid-column: 1 / -1; }
  .kg-quote__intro, .kg-quote__form { grid-column: 1 / -1; }
  .kg-envs__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .kg-tech__list > li { grid-template-columns: auto minmax(0, 1fr); }
  .kg-quote__contact > div { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .product { padding: 8px 8px 16px; gap: 8px; }
  .product h3, .product p { padding-inline: 4px; }
  .product p { font-size: 14px; }
  .catalog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .catalog-grid > :nth-child(3) { display: none; }
}
@media (max-width: 480px) {
  .kg-hero__groups { grid-template-columns: 1fr; }
  .kg-envs__list { grid-template-columns: 1fr; }
  .kg-tech__list > li { grid-template-columns: minmax(0, 1fr); }
  .kg-tech__list .ibox { display: none; }
}

/* Hareket azaltma ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kg-sizes__bars i { transform: none !important; }
  .kg-doc__row > rect:first-child { fill: #102a3a !important; stroke: #102a3a !important; }
  .kg-doc__row path { stroke-dashoffset: 0 !important; }
  .kg-doc__land { opacity: 1 !important; transform: none !important; }
  .js .timeline__step > * { opacity: 1 !important; }
}
/* === /SAYFA: koruyucu-giyim === */

/* === SAYFA: iletisim (mini yönlendirme şeması) === */

/* Açılış şeması: Siltek düğümünden 4 hedefe giden hatlar */
.ilt-map { padding: 5% 5% 12%; }
.ilt-map__art svg { display: block; width: 100%; height: auto; overflow: visible; }
.ilt-map__src rect { fill: var(--navy); }
.ilt-map__base path {
  fill: none; stroke: var(--line-2); stroke-width: 2;
  stroke-dasharray: 2 10; stroke-linecap: round; /* noktalı akış hattı */
  animation: iltFlow 2.4s linear infinite;
}
.ilt-map__pulse path {
  fill: none; stroke: var(--steel-700); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: .05 2; stroke-dashoffset: .05;
  opacity: 0;
  animation: iltPulse 4.8s var(--ease-io) infinite;
  animation-delay: calc(var(--i, 0) * 1.2s);
}
.ilt-map__pulse path:first-child { stroke: var(--signal); }
.ilt-map__open { fill: #fff; stroke: var(--steel-400); stroke-width: 2; }
.ilt-map__end circle { fill: var(--steel-700); }
.ilt-map__here rect { fill: var(--steel-50); stroke: var(--steel-700); stroke-width: 1.5; }
.ilt-map__sig { fill: var(--signal); }
.ilt-map__tag { font: 700 17px var(--font-head); letter-spacing: .12em; }
.ilt-map__lbl { font: 700 25px var(--font-head); letter-spacing: -.01em; }
.ilt-map__here .ilt-map__tag { fill: var(--steel-700); }
.ilt-map__here .ilt-map__lbl { fill: var(--navy); }
.ilt-map__fx rect { fill: var(--navy); }
.ilt-map__fx .ilt-map__tag { fill: var(--fx-gold-l); }
.ilt-map__fx .ilt-map__lbl { fill: #fff; }
.ilt-map__fx use { --fm-a: #fff; --fm-b: var(--fxl-blue-l); }
@keyframes iltFlow { to { stroke-dashoffset: -24; } } /* 12'nin katı: kesintisiz döngü */
@keyframes iltPulse {
  0% { stroke-dashoffset: .05; opacity: 0; }
  8% { opacity: 1; }
  62% { stroke-dashoffset: -.95; opacity: 1; }
  72%, 100% { stroke-dashoffset: -.95; opacity: 0; }
}

/* Doğrudan iletişim kartları */
.ilt-contacts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); }
.ilt-contact {
  display: grid; align-content: start; justify-items: stretch;
  gap: var(--s5);
  min-width: 0;
  padding: clamp(20px, calc(2.4 * var(--vw)), 60px);
  background: #fff;
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.ilt-contact__head { display: flex; align-items: center; gap: var(--s4); min-width: 0; }
.ilt-contact__head > div { display: grid; gap: .45em; min-width: 0; }
.ilt-contact h3 { font-size: var(--fs-h3); }
.ilt-contact .facts > div { grid-template-columns: minmax(0, clamp(120px, calc(10 * var(--vw)), 280px)) minmax(0, 1fr); }
.ilt-contact .link { justify-self: start; }
.ilt-fxnote {
  display: flex; align-items: flex-start; gap: .5em .8em;
  margin-top: var(--s5);
  font: 600 var(--fs-small)/1.4 var(--font-head);
  color: var(--ink-2);
}
.ilt-fxnote .fmark { flex: none; width: 1.45em; height: 1.36em; margin-top: .02em; }
.ilt-fxnote a { display: inline-flex; align-items: center; gap: .3em; color: var(--steel-700); text-underline-offset: .22em; }
.ilt-fxnote a .i { width: 1em; height: 1em; }

/* SSS (beyaz bant; koyu banda konursa bağlantı açık çelik olur) */
.ilt-faq > .acc-list { grid-column: 5 / -1; min-width: 0; }
.ilt-faq .acc__body a { color: var(--steel-700); text-underline-offset: .2em; }
:is(.sec--dark, .on-dark) .ilt-faq .acc__body a { color: var(--steel-300); }

/* Marka notu */
.ilt-brand__mark {
  display: inline-flex; align-items: center; gap: .6em;
  font: 800 var(--fs-small)/1 var(--font-head);
  letter-spacing: .02em;
  color: var(--navy);
}
.ilt-brand__mark img { display: block; height: clamp(22px, calc(1.9 * var(--vw)), 30px); width: auto; }

@media (max-width: 1180px) {
  .ilt-hero__visual { display: none; }
  .ilt-hero .hero-page__copy { grid-column: 1 / -1; }
}
@media (max-width: 960px) {
  .ilt-contacts { grid-template-columns: 1fr; }
  .ilt-faq > .acc-list { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .ilt-contact .facts > div { grid-template-columns: 1fr; }
  .ilt-brand .cta-band__line { display: none; }
}
@media (max-width: 480px) {
  .ilt-contact { padding: 20px 18px; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .ilt-map__pulse { display: none; }
}
/* === /SAYFA: iletisim === */

/* === SAYFA: kvkk === */
.kv-meta {
  display: flex; flex-wrap: wrap;
  gap: var(--s3) var(--s6);
  width: 100%;
  margin-top: var(--s3);
  padding-top: var(--s4);
  border-top: 1px solid var(--line-2);
}
.kv-meta > div { display: grid; gap: .4em; min-width: 0; max-width: 100%; }
.kv-meta dd { margin: 0; font: 600 var(--fs-small)/1.45 var(--font-head); color: var(--navy); overflow-wrap: anywhere; }

.kv-sec { padding-top: var(--sec-tight); }
.kv-toc__n { display: inline-block; min-width: 2.2em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.legal__toc a.is-active .kv-toc__n { color: var(--steel-700); }

.kv-body { color: var(--ink); }
.kv-body > p:first-of-type { font-size: var(--fs-lead); line-height: 1.55; color: var(--ink-2); }
.kv-body h2 {
  scroll-margin-top: 24px;
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
}
.kv-body li::marker { color: var(--steel-400); }
.kv-body strong { color: var(--navy); }
.kv-body .kv-facts { margin-block: .2em .4em; }
.kv-body .kv-facts > div { grid-template-columns: minmax(0, clamp(130px, calc(11 * var(--vw)), 280px)) minmax(0, 1fr); }
.kv-updated {
  margin-top: var(--s5);
  padding-top: var(--s4);
  border-top: 1px solid var(--line);
  font: 600 var(--fs-small)/1.4 var(--font-head);
  color: var(--ink-3);
}

/* Dar ekran içindekiler (yapışkan liste 1100 px altında gizlenir) */
.kv-toc-m { display: none; }
.kv-toc-m > summary {
  display: flex; align-items: center; gap: .7em;
  padding: 12px 14px;
  font: 700 var(--fs-small)/1.2 var(--font-head);
  color: var(--navy);
  list-style: none; cursor: pointer;
}
.kv-toc-m > summary::-webkit-details-marker { display: none; }
.kv-toc-m > summary .i { color: var(--steel-700); }
.kv-toc-m > summary .acc__ico { margin-left: auto; width: 32px; height: 32px; background: #fff; }
.kv-toc-m[open] > summary .acc__ico { background: var(--hover-2); }
.kv-toc-m[open] > summary .acc__ico::after { opacity: 0; }
.legal__body .kv-toc-m ol { display: grid; gap: 2px; margin: 0; padding: 0 8px 12px; list-style: none; }
.kv-toc-m a {
  display: block; padding: .6em .7em; border-radius: 3px;
  font: 600 var(--fs-small)/1.35 var(--font-head);
  color: var(--ink-2); text-decoration: none;
}
.kv-toc-m a:hover { background: #fff; color: var(--navy); }

/* Geniş ekran yan kutusu (≥1600 px) */
.kv-aside { display: none; }
.kv-aside__card {
  display: grid; gap: var(--s3); justify-items: start;
  padding: clamp(20px, calc(1.8 * var(--vw)), 44px);
  background: var(--steel-50);
  border: 1px solid var(--line); border-radius: var(--r);
}
.kv-aside__card p { color: var(--ink-2); font-size: var(--fs-small); }
.kv-aside__card .eyebrow { margin-top: var(--s2); }
.kv-aside__mail { font: 700 var(--fs-body)/1.3 var(--font-head); color: var(--navy); overflow-wrap: anywhere; text-underline-offset: .22em; }
.kv-aside__card--fx { background: #fff; }
.kv-aside__card--fx .kv-aside__logo { display: block; height: clamp(18px, calc(1.5 * var(--vw)), 24px); width: auto; }

@media (min-width: 1600px) {
  .kv-legal .legal__body { grid-column: 4 / 10; }
  .kv-aside { display: grid; gap: var(--gap); grid-column: 10 / -1; position: sticky; top: var(--s5); align-content: start; }
}
@media (max-width: 1100px) {
  .kv-toc-m { display: block; margin-bottom: var(--s3); background: var(--steel-50); border: 1px solid var(--line); border-radius: var(--r); }
}
@media (max-width: 760px) {
  .kv-meta { flex-direction: column; gap: 16px; }
  .kv-body .kv-facts > div { grid-template-columns: 1fr; }
}
@media print {
  .kv-toc-m, .kv-aside { display: none !important; }
}
/* === /SAYFA: kvkk === */

/* === SAYFA: 404 (SC-11) === */
.e404 { min-height: 70vh; display: flex; align-items: center; padding-block: var(--sec-tight) var(--sec); }
.e404 > .wrap { width: min(100% - 2 * var(--gutter), var(--maxw)); }
.e404__grid { row-gap: var(--s6); align-items: center; }
.e404__copy { grid-column: 1 / 7; display: grid; gap: var(--s4); justify-items: start; min-width: 0; }
.e404__visual { grid-column: 7 / -1; min-width: 0; }
.e404__title { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -.04em; }
.e404__nav { width: 100%; display: grid; gap: var(--s4); margin-top: var(--s3); }
.e404__links { border-top: 1px solid var(--line-dark); }
.e404__links a {
  display: grid; grid-template-columns: clamp(34px, calc(3 * var(--vw)), 72px) minmax(0, 1fr) auto;
  align-items: center; gap: var(--s4);
  min-height: 48px;
  padding: clamp(12px, calc(1 * var(--vw)), 24px) 6px;
  border-bottom: 1px solid var(--line-dark);
  color: #fff; text-decoration: none;
  font: 700 var(--fs-h4)/1.25 var(--font-head);
  transition: background var(--d) var(--ease);
}
.e404__links a:hover { background: linear-gradient(90deg, rgba(159, 185, 209, .09), rgba(159, 185, 209, 0)); }
.e404__links a:hover .e404__l { text-decoration: underline; text-underline-offset: .25em; text-decoration-thickness: 1px; }
.e404__links a:hover .i-arr { transform: translateX(4px); }
.e404__links .i { width: 1em; height: 1em; color: var(--steel-300); }
.e404 .e404__more { font-size: var(--fs-small); color: var(--on-dark-2); }
.e404__more a { color: var(--on-dark); text-underline-offset: .22em; white-space: nowrap; }
.e404__more .i { width: 1em; height: 1em; margin-left: .25em; }

.e404-stage { aspect-ratio: 4 / 3; }
.e404-scene { position: absolute; inset: 0; padding: 3% 3% 11%; }
.e404-scene svg { display: block; width: 100%; height: 100%; overflow: visible; }
.e404-scene__hat { fill: var(--steel-300); font: 700 17px var(--font-head); letter-spacing: .16em; }
.e404-scene__line { fill: none; stroke: rgba(159, 185, 209, .5); stroke-width: 2; }
.e404-scene__flow { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 4 16; opacity: .7; animation: e404Flow 3s linear infinite; }
.e404-scene__gap { fill: none; stroke: var(--steel-300); stroke-width: 2; stroke-dasharray: 3 8; opacity: .55; }
.e404-scene__bracket { fill: none; stroke: var(--steel-300); stroke-width: 1.5; }
.e404-scene__nodes circle { fill: var(--navy-900); stroke: var(--steel-300); stroke-width: 2; }
.e404-scene__lbl text { fill: var(--on-dark-2); font: 600 18px var(--font-body); text-anchor: middle; }
.e404-scene__qring { fill: var(--navy-700); stroke: var(--steel-300); stroke-width: 2; stroke-dasharray: 5 5; transform-box: fill-box; transform-origin: center; animation: spin 18s linear infinite; }
.e404-scene__q text { fill: #fff; font: 800 30px var(--font-head); text-anchor: middle; }
.e404-scene__ring { fill: none; stroke: rgba(159, 185, 209, .5); stroke-width: 1.5; stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center; animation: spin 40s linear infinite; }
.e404-scene__ring2 { fill: none; stroke: rgba(159, 185, 209, .25); stroke-width: 1; stroke-dasharray: 1 6; transform-box: fill-box; transform-origin: center; animation: spin 60s linear infinite reverse; }
.e404-scene__core { fill: #fff; }
/* Sinyal: son durumu kopukluğun başında (x = 560) */
.e404-scene__sig { fill: #fff; transform: translateX(500px); animation: e404Sig 6s var(--ease-io) infinite; }
@keyframes e404Flow { to { stroke-dashoffset: -40; } }
@keyframes e404Sig {
  0% { transform: translateX(0); opacity: 0; }
  6% { opacity: 1; }
  48% { transform: translateX(500px); opacity: 1; }
  54% { opacity: .15; }
  60% { opacity: 1; }
  66% { opacity: .15; }
  72% { opacity: 1; }
  78% { opacity: .15; }
  84%, 94% { opacity: 1; transform: translateX(500px); }
  100% { opacity: 0; transform: translateX(500px); }
}

@media (max-width: 960px) {
  .e404__copy, .e404__visual { grid-column: 1 / -1; }
  .e404 { min-height: 0; }
}
/* === /SAYFA: 404 === */

/* ==========================================================================
   17. KURUMSAL TON — "Holding" (29 Eylül, sahibin seçimi: Holding + örnek A)
   Sade, köklü bir holding havası: lacivert açılış bandı, kutusuz açık
   yerleşim, ince yatay çizgiler, 10–16 px köşeli beyaz sahne çerçeveleri,
   6 px düğmeler, küçük harfli sade üst etiketler, tek vurgu çelik mavi.
   Açık mavi zemin YOK: sahne, kuyu, çip, ikon diski ve bantlar beyaz;
   üzerine gelme geri bildirimi nötr açık gri (--hover). Lacivert kutular
   18. bölümdeki .card--navy ile yapılır.
   Bu blok yukarıdaki kuralların ÜZERİNE yazar; tüm sayfalarda geçerlidir.
   ========================================================================== */

/* 17.1 Tipografi: sakin ağırlık, normal harf aralığı ----------------------- */
h1 { font-weight: 600; letter-spacing: -.018em; line-height: 1.1; }
h2 { font-weight: 500; letter-spacing: -.008em; line-height: 1.14; }
h3 { font-weight: 600; letter-spacing: -.006em; line-height: 1.25; }
h4 { font-weight: 600; letter-spacing: 0; }

/* Üst etiket: cümle düzeninde, izleme yok, kare işaret yok; yerine kısa ince çizgi */
.eyebrow {
  gap: .7em;
  font: 600 calc(var(--fs-small) * .95)/1.3 var(--font-head);
  letter-spacing: .01em; text-transform: none;
  color: var(--steel-700);
}
.eyebrow::before {
  width: 1.6em; height: 1px;
  background: currentColor; opacity: .7;
}
:is(.sec--dark, .on-dark, .hero-page--dark, .hero-home) .eyebrow { color: var(--steel-300); }
:is(.sec--dark, .on-dark, .hero-page--dark, .hero-home) .eyebrow::before { background: currentColor; }

/* Büyük harfli teknik etiketler → cümle düzeni (HTML'de de büyük harf yazmayın) */
.kg-envs__h,
.catalog-card__group,
.kv-meta dt,
.facts dt,
.footer__title,
.drawer__label,
.tag,
.hk-hero .sysmap__cap,
.sysmap__side,
.hk-doc__title,
.fxa__pipe b,
.kg-sizes__h em,
.kg-card__h em {
  text-transform: none;
  letter-spacing: .005em;
}
.kg-envs__h, .catalog-card__group, .facts dt {
  font: 600 calc(var(--fs-small) * .92)/1.35 var(--font-head);
  color: var(--ink-3);
}
:is(.sec--dark, .on-dark) .facts dt { color: var(--steel-300); }

/* Bölüm sayaçları, numara rozetleri ve mavi kopya ızgarası (.bp) kaldırıldı:
   markup'ta yok, CSS'i de silindi. Geri eklemeyin. */

/* 17.2 Düzen: bölüm başlığı — üstte etiket, solda başlık, sağda giriş ----- */
.sec--tint { background: var(--paper); border-block: 0; }
.sec-head {
  row-gap: var(--s3);
  padding-top: clamp(20px, calc(1.8 * var(--vw)), 44px);
  border-top: 1px solid var(--line);
  align-items: end;
}
.sec-head__meta { grid-column: 1 / -1; grid-row: 1; }
.sec-head__main { display: contents; }
.sec-head__main > h2 { grid-column: 1 / 7; grid-row: 2; align-self: start; }
.sec-head__main > :not(h2) { grid-column: 8 / -1; grid-row: 2; }
.sec-head__main > .lead { max-width: 52ch; }
.sec-head__main > :not(h2) ~ :not(h2) { grid-row: auto; }
/* başlık yalnız ekran okuyucuda (.sr-only) ise giriş boş sütun bırakmaz, soldan başlar */
.sec-head__main > h2.sr-only + .lead { grid-column: 1 / 10; max-width: 60ch; }
@media (max-width: 960px) {
  .sec-head__main > h2, .sec-head__main > :not(h2) { grid-column: 1 / -1; grid-row: auto; }
}

/* 17.3 Bileşenler ---------------------------------------------------------- */
.btn { font-weight: 600; letter-spacing: 0; border-radius: var(--r); }
.link { font-weight: 600; }

/* Çip: beyaz zemin, ince çizgi; "yakında" çipi kesikli çizgi + sönük yazı */
.chip {
  border: 1px solid var(--line-2); border-radius: 4px;
  background: #fff;
  font-weight: 500;
  color: var(--navy);
}
:is(.sec--dark, .on-dark) .chip { background: transparent; border: 1px solid rgba(159, 185, 209, .4); color: var(--on-dark); }

.tag { padding: 0; border: 0; font: 600 calc(var(--fs-small) * .85)/1.2 var(--font-head); color: var(--steel-700); }
.tag--here { color: var(--steel-700); }
.tag--fx { color: var(--navy); }
:is(.sec--dark, .on-dark, .route--fx) .tag--fx { color: var(--fx-gold-l); }

/* Durum noktaları yok: yalnız sade açıklama */

.panel { border-radius: var(--r-lg); }

/* İkon kutuları → beyaz, ince çizgili yuvarlak disk */
.ibox { border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--steel-700); }
:is(.sec--dark, .on-dark) .ibox { background: rgba(159, 185, 209, .1); border: 0; }

.facts > div { padding-block: clamp(14px, calc(1.1 * var(--vw)), 26px); }
.facts dt { padding-top: .1em; }

.acc__ico { border-radius: 50%; }

/* 17.4 Üst şerit, çekmece, alt bilgi ------------------------------------- */
.menu-btn, .drawer__close { letter-spacing: .02em; font-weight: 600; font-size: 14px; }
.drawer__label { font: 600 13px/1.2 var(--font-head); color: var(--ink-3); }
.footer__title { font: 600 var(--fs-small)/1.2 var(--font-head); color: var(--steel-300); }
.footer__tagline { font-weight: 500; }

/* 17.5 Ana sayfa açılışı: tam genişlik lacivert bant ---------------------- */
.hero-home {
  position: relative;
  background:
    radial-gradient(90% 140% at 100% 0%, rgba(79, 117, 150, .30), rgba(79, 117, 150, 0) 60%),
    linear-gradient(180deg, var(--navy-900), #0a1d2a);
  color: var(--on-dark);
  padding-block: clamp(56px, calc(6.4 * var(--vw)), 190px) clamp(56px, calc(6 * var(--vw)), 170px);
}
.hero-home__top { row-gap: clamp(18px, calc(1.6 * var(--vw)), 40px); align-items: end; }
.hero-home__head { grid-column: 1 / 8; display: grid; gap: clamp(16px, calc(1.5 * var(--vw)), 36px); justify-items: start; }
.hero-home__head > * { grid-column: auto; }
.hero-home__title { color: #fff; font-size: clamp(34px, calc(3.35 * var(--vw)) + 5.7px, 108px); }
.hero-home__title .hl { color: var(--steel-300); }
.hero-home__aside { grid-column: 9 / -1; gap: var(--s5); padding-bottom: .5em; }
.hero-home .lead { color: var(--on-dark-2); }
.hero-home :focus-visible { outline-color: var(--focus-on-dark); }

/* İki iş: açılışın hemen altında, beyaz zeminde iki LACİVERT kutu (örnek A).
   Kutunun kendisi 18. bölümdeki .card--navy; burada yalnız iç yerleşim. */
.biz-band { padding-block: clamp(48px, calc(5 * var(--vw)), 140px) clamp(40px, calc(4 * var(--vw)), 110px); }
.biz-band .dual { column-gap: clamp(20px, calc(2.2 * var(--vw)), 60px); }
.biz .panel__head { padding: 0 0 clamp(18px, calc(1.6 * var(--vw)), 40px); gap: clamp(8px, calc(.7 * var(--vw)), 16px); }
.panel__title { font-size: calc(var(--fs-h3) * 1.3); font-weight: 600; letter-spacing: -.012em; }
.panel__title small { font-weight: 500; font-family: var(--font-body); }
.biz .panel__body { padding: clamp(20px, calc(1.8 * var(--vw)), 44px) 0 var(--s5); }
.biz .panel__foot { margin: auto 0 0; padding-block: var(--s4) 0; }
.panel:has(.panel__link:focus-visible) { outline-offset: 6px; border-radius: var(--r-lg); }

/* 17.6 İç sayfa açılışı: lacivert bant (markup'ta .hero-page--dark) ------- */
.hero-page { border-bottom: 0; padding-block: clamp(48px, calc(5 * var(--vw)), 150px) clamp(56px, calc(5.6 * var(--vw)), 160px); }
.hero-page--dark {
  background:
    radial-gradient(80% 130% at 100% 0%, rgba(79, 117, 150, .28), rgba(79, 117, 150, 0) 60%),
    linear-gradient(180deg, var(--navy-900), #0a1d2a);
}
.hero-page--dark .btn--primary { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.hero-page--dark .btn--primary:hover { --bg: var(--hover-2); --bd: var(--hover-2); }
.hero-page--dark .btn--secondary { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .38); }
.hero-page--dark .btn--secondary:hover { --bg: rgba(255, 255, 255, .08); --bd: rgba(255, 255, 255, .65); }
.hero-page--dark .stage { border-color: transparent; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .55); }
.hero-page--dark .hl { color: var(--steel-300); }
.hero-page--dark .btn--fx { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.hero-page--dark .btn--fx:hover { --bg: var(--hover-2); --bd: var(--hover-2); }
.hero-page--dark .btn--fx .fmark { --fm-a: var(--fxl-navy); --fm-b: var(--fxl-blue); }
/* sahne içi kartlar koyu bandın yazı rengini devralmaz */
.hero-page--dark .stage p { color: var(--navy); }
.hero-page--dark .stage .kg-card__foot { color: var(--steel-700); }

/* 17.7 Kurumsal yapı şeması ve ilkeler ------------------------------------ */

.principles__list { border: 0; column-gap: var(--gap); row-gap: var(--s5); }
.principles__list li {
  padding: clamp(16px, calc(1.3 * var(--vw)), 30px) 0 0;
  background: none;
  border: 0; border-top: 1px solid var(--line-2);
  gap: 0;
}
.principles__list li:hover { background: none; }
.principles__list b { font: 600 var(--fs-body)/1.3 var(--font-head); }

/* 17.10 Yönlendirme listesi: numara yok, düz ince hat, sade hedef --------- */
.routes { border-top-color: var(--line); }
.route:not(:has(.route__n)) {
  grid-template-columns: minmax(0, 1.3fr) minmax(40px, 1fr) clamp(280px, calc(19 * var(--vw)), 520px);
}
.route__q { font-weight: 500; letter-spacing: 0; }
.route__line::before { display: none; }
.route__line::after { width: 7px; height: 7px; margin-top: -3.5px; background: var(--steel-400); }
.route__line i { left: 0; right: 10px; height: 1px; margin-top: -.5px; background: var(--line-2); }
.route:hover .route__line i { background: var(--steel-700); animation: none; }
.route__dest { border-radius: var(--r-lg); }
.route__dest .tag { padding: 0; font-size: calc(var(--fs-small) * .82); letter-spacing: .005em; }
.route--here .route__dest { background: var(--paper); border: 1px solid transparent; }
.route--here .route__dest::after { display: none; }
.route--here:hover .route__dest { background: #fff; border-color: var(--line-2); }
@media (max-width: 1180px) {
  .route:not(:has(.route__n)) { grid-template-columns: minmax(0, 1.4fr) minmax(24px, .5fr) clamp(260px, calc(28 * var(--vw)), 340px); }
}
@media (max-width: 760px) {
  .route:not(:has(.route__n)) { grid-template-columns: minmax(0, 1fr); }
}

/* 17.11 Sahneler: ızgara yok, BEYAZ zemin, ince çizgi, 10–16 px köşe ------ */
.stage {
  background-color: #fff;
  background-image: none;
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.stage--white { background-color: #fff; background-image: none; }
.stage--dark {
  background-color: var(--navy-900);
  background-image: linear-gradient(160deg, #10293a, #0b202e);
  background-size: auto; background-position: 0 0;
  border-color: transparent;
}
.rotator-dots { border: 1px solid var(--line); border-radius: var(--r); background: rgba(255, 255, 255, .92); box-shadow: 0 1px 2px rgba(11, 32, 46, .08); }
/* Dar kart çerçevesinde etiket + noktalar alt alta: çubuk telefonun altına girmez */

.kg-scene__art .t-sub { letter-spacing: 0; font-weight: 600; }
.kg-card, .kg-sizes { border-color: var(--line); border-radius: max(6px, 1.2cqi); }
.kg-card__h em, .kg-sizes__h em {
  padding: 0; border: 0;
  font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink-3);
}
.kg-doc__t { font-weight: 700; letter-spacing: .01em; }

/* Ürün çizim kuyusu: köşe işaretleri ve ızgara yok, beyaz zemin, ince çizgi */
.well, .fxa__well { --tc: transparent; --grid-c: transparent; }
.well { --well-bg: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); }

/* 17.12 Zaman çizelgesi (koyu): turuncu yok, sakin sayaç ----------------- */
.timeline__count { font-weight: 400; font-size: clamp(44px, calc(3.8 * var(--vw)), 110px); letter-spacing: -.01em; }
.timeline__count small { font-weight: 500; }
.timeline__bar { height: 2px; }
.timeline__bar i, .timeline__steps::after { background: var(--steel-300); }
.timeline__steps::before, .timeline__steps::after { width: 1px; left: calc(var(--dot) / 2 - .5px); }
.timeline__dot { border-width: 1.5px; }
.timeline__step.is-done .timeline__dot { background: #fff; border-color: #fff; transform: none; }

/* 17.13 Formlar (form kartı beyaz kalır; lacivert yapılmaz) --------------- */
.form-card { border: 0; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.form-card__title { font-weight: 600; }
.field-file { border: 1px dashed var(--line-2); background: var(--paper); }

/* 17.14 Koruyucu giyim sayfası ------------------------------------------- */
.kg-hero__groups { border-top-color: var(--line-dark); color: var(--on-dark); font-weight: 500; }
.kg-hero__groups .i { color: var(--steel-300); }

.product h3 { margin-top: clamp(4px, calc(.5 * var(--vw)), 12px); }

.kg-envs {
  padding: clamp(18px, calc(1.5 * var(--vw)), 38px) 0;
  background: transparent; border: 0; border-radius: 0;
  border-block: 1px solid var(--line);
}
.kg-envs__list li { font-weight: 600; }

.catalog-card { padding: 0; background: transparent; border: 0; }
.catalog-card .well { border: 1px dashed var(--line-2); }
.catalog-card h3, .catalog-card h4 { font-weight: 600; }

.kg-tech__intro { border-top-color: var(--line); }
.kg-tech__list { border-top-color: var(--line); }
.kg-tech__list > li { grid-template-columns: auto minmax(0, 1fr); }

.kg-quote__intro { border-top-color: var(--line); }
.kg-doc-stage { box-shadow: var(--shadow); }

.kg-brandnote .route:hover { background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.kg-brandnote .route:has(.route__n) {
  grid-template-columns: clamp(34px, calc(3.6 * var(--vw)), 100px) minmax(0, 1.25fr) minmax(40px, 1fr) clamp(290px, calc(19 * var(--vw)), 520px);
}
@media (max-width: 1180px) {
  .kg-brandnote .route:has(.route__n) { grid-template-columns: clamp(34px, calc(3.6 * var(--vw)), 60px) minmax(0, 1.4fr) minmax(24px, .5fr) clamp(260px, calc(28 * var(--vw)), 340px); }
}
@media (max-width: 760px) {
  .kg-brandnote .route:has(.route__n) { grid-template-columns: clamp(30px, calc(8 * var(--vw)), 40px) minmax(0, 1fr); }
}

/* 17.15 Kırılımlar -------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-home__head { grid-column: 1 / -1; }
  .hero-home__aside { grid-column: 1 / 10; }
}
/* Kapanış bantlarındaki süs çizgisi (devre izi gibi okunuyor, düğmelerin arkasından
   geçiyordu) Holding tonunda hiç gösterilmez; bandın üstündeki ince çizgi yeterli. */
.cta-band__line { display: none; }
@media (max-width: 960px) {
  .hero-home__aside { grid-column: 1 / -1; }
  .biz-band .dual { row-gap: clamp(20px, calc(4 * var(--vw)), 40px); }
}
@media (max-width: 480px) {
  .hero-home { padding-block: 44px 48px; }
  .biz-band { padding-block: 32px 28px; }
  .biz .panel__head { padding: 0 0 16px; }
  .biz .panel__body { padding: 18px 0 20px; }
  .panel__foot { margin-inline: 0; }
  .biz .panel__foot { padding-block: 16px 0; }
}

/* ==========================================================================
   18. LACİVERT KART SİSTEMİ (örnek A) — sayfa ajanları yalnız sınıf ekler
   .card--navy  : kartın kendisi. Lacivert kutu, r-lg köşe, iç boşluk
                  --card-pad (değiştirilebilir), gölge. İçindeki başlık beyaz,
                  metin on-dark-2, üst etiket steel-300, çip saydam+çizgi,
                  birincil düğme BEYAZ (lacivert yazı), ikincil düğme hayalet,
                  bağlantı beyaz, ikon diski yarı saydam, ayraçlar line-dark.
   .card-frame  : kartın İÇİNDEKİ çizim/sahne alanı (.stage, .well ya da
                  sade bir div). Beyaz zemin, hafif küçük köşe, çizgi/gölge
                  yok; içinde yazı rengi lacivert kalır (koyu kural sızmaz).
   .card-frame--inset : çerçevenin içine boşluk verir (sahne olmayan içerik).
   Kural: .card--navy'yi .sec--dark içine koymayın; forma, SSS'ye, yasal
   metne, künyeye ve uzun okuma metnine uygulamayın.
   Kontrast (zemin #102a3a): #fff 14.9:1 · on-dark 13.3:1 ·
   on-dark-2 8.7:1 · steel-300 7.3:1 · fx-gold-l 10.4:1.
   ========================================================================== */
.card--navy {
  --card-pad: clamp(20px, calc(2.2 * var(--vw)), 60px);
  position: relative;
  min-width: 0;
  padding: var(--card-pad);
  background: var(--navy);
  color: var(--on-dark);
  border: 0; border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
}
@media (hover: hover) and (pointer: fine) {
  /* kart hover'da kalkmaz, rengi değişmez (ör. .fxa__card:hover saydam zemini lacivertin yerine geçmesin) */
  .card--navy:hover { transform: none; background: var(--navy); border-color: transparent; box-shadow: var(--shadow-lg); }
}
.card--navy :is(h2, h3, h4, b, strong):not(.card-frame *) { color: #fff; }
.card--navy :is(p, li, small, dd, .lead):not(.card-frame *) { color: var(--on-dark-2); }
.card--navy :is(.eyebrow, .tag, dt):not(.card-frame *) { color: var(--steel-300); }
.card--navy .eyebrow:not(.card-frame *)::before { background: currentColor; }
.card--navy .panel__title small:not(.card-frame *) { color: var(--steel-300); }
.card--navy .chip:not(.card-frame *) { background: transparent; border: 1px solid rgba(159, 185, 209, .45); color: var(--on-dark); }
.card--navy .ibox:not(.card-frame *) { background: rgba(159, 185, 209, .1); border: 0; color: var(--steel-300); }
.card--navy :is(.btn--primary, .btn:not([class*="btn--"])):not(.card-frame *) { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.card--navy :is(.btn--primary, .btn:not([class*="btn--"])):not(.card-frame *):hover { --bg: var(--hover-2); --bd: var(--hover-2); }
.card--navy .btn--secondary:not(.card-frame *) { --bg: transparent; --fg: #fff; --bd: rgba(255, 255, 255, .38); }
.card--navy .btn--secondary:not(.card-frame *):hover { --bg: rgba(255, 255, 255, .08); --bd: rgba(255, 255, 255, .65); }
.card--navy .link:not(.card-frame *) { color: #fff; }
.card--navy :is(.panel__foot, hr):not(.card-frame *) { border-color: var(--line-dark); }
.card--navy :focus-visible { outline-color: var(--focus-on-dark); }
.panel.card--navy:has(.panel__link:focus-visible) { outline-color: var(--navy); }

/* Kart içindeki künye satırları (dl.facts), "Yayın öncesi eklenecek" kutuları ve
   yer tutucu düğmeler koyu zemine uyar */
.card--navy .facts > div:not(.card-frame *) { border-color: var(--line-dark); }
.card--navy .facts dd:not(.card-frame *) { color: var(--on-dark); }
.card--navy .facts dd a:not(.card-frame *) { color: #fff; }

/* Beyaz çerçeve (kart içindeki sahne/çizim) */
.card--navy .card-frame {
  background-color: #fff; background-image: none;
  border: 0; border-radius: max(6px, calc(var(--r-lg) - 4px));
  box-shadow: none;
  color: var(--ink);
}
.card--navy .card-frame.well { --well-bg: #fff; }

/* Ürün grubu kartı (koruyucu-giyim #urunler) */
.product.card--navy { --card-pad: clamp(14px, calc(1.2 * var(--vw)), 30px); gap: clamp(10px, calc(.8 * var(--vw)), 18px); padding-bottom: clamp(20px, calc(1.8 * var(--vw)), 44px); }
.product.card--navy h3, .product.card--navy p { padding-inline: clamp(2px, calc(.3 * var(--vw)), 8px); }

@media (max-width: 480px) {
  .card--navy { --card-pad: 18px; }
}

/* Beyaz çerçeve / beyaz sahne içindeki denetimler: odak halkası koyu (açık çelik beyazda 2:1 kalıyordu).
   Döndürücü noktaları: pasif nokta steel-400 (beyazda 3.2:1), üzerine gelince steel-700. */
.card--navy .card-frame :focus-visible { outline-color: var(--focus); }
.rotator-dots button:focus-visible { outline-color: var(--focus); }
.stage--dark .rotator-dots button:focus-visible { outline-color: var(--focus-on-dark); }
.rotator-dots button::before { background: var(--steel-400); }
.rotator-dots button:hover::before { background: var(--steel-700); }
.stage--dark .rotator-dots button:hover::before { background: var(--steel-300); }

/* ==========================================================================
   19. SAYFA EKLERİ — Holding tonu (29 Eylül)
   16. bölümdeki sayfa bloklarının ve 17–18. bölümlerin ÜZERİNE yazar; bu
   yüzden dosyanın sonunda durur. Yalnız sayfa önekli sınıflar. Açık mavi
   dolgu yok; lacivert kutular yalnız .card--navy ile (18. bölüm).
   Ortak parçalar yukarı taşındı: lacivert açılıştaki .hl / .btn--fx / .ph
   (17.6), görünmez h2'li bölüm girişi (17.2), kart içi künye / yer tutucu
   (18), dar sahnede "Gıda · yakında" rozeti (10. bölüm, @container scene).
   ========================================================================== */

/* === SAYFA: hakkimizda =================================================== */

/* Sistem şeması: sade harf aralığı, yumuşak ağırlıklar */
.hk-hero .sysmap__cap b { font-weight: 700; }
.nd__t { font-weight: 600; }
.sysmap__side { font-weight: 600; }

/* Şemanın teknik süsleri sadeleşir: köşe kayıt işaretleri ve göbekteki kadran
   çentikleri yok; hatlar arası akış noktalı (FavyoFlex .fxa__track ile aynı dil).
   10 px'lik nokta aralığı hkDashX/hkDashY'nin 20 px döngüsüyle kesintisiz. */
.hk-hero .sysmap__frame::before { display: none; }
.sysmap__hub .hub-ticks { display: none; }
.sysmap__nodes li:not(:last-child)::before {
  height: 3px; margin-top: -.75px;
  background: radial-gradient(circle at 1.5px 1.5px, var(--ln) 1.25px, transparent 1.7px) 0 0 / 10px 3px repeat-x;
}
@container sysmap (max-width: 619px) {
  .sysmap__nodes li:not(:last-child)::before {
    width: 3px; height: calc(100% - var(--ring) - 8px + 14px); margin: 0 0 0 -.75px;
    background: radial-gradient(circle at 1.5px 1.5px, var(--ln) 1.25px, transparent 1.7px) 0 0 / 3px 10px repeat-y;
  }
}
.sysmap__side--l::after, .sysmap__side--r::before { border-top-style: dotted; }

/* Tek soru */

/* Künye */
.hk-legal { font-weight: 600; letter-spacing: .01em; }
.hk-doc__title { font-weight: 700; }
.hk-doc__title::before { width: 2.4cqi; height: 1px; background: currentColor; opacity: .7; } /* kare işaret yerine ince çizgi (üst etiketlerle aynı) */
/* === /SAYFA: hakkimizda === */

/* === SAYFA: kalite-politikasi ============================================ */
/* Açılış lacivert bant; beyaz sahne içindeki etiket koyu kalır */
.hero-page--dark .qloop .eyebrow { color: var(--steel-700); }
.ql-c1 { font-weight: 700; letter-spacing: .02em; }
.ql-c2 { font-weight: 600; letter-spacing: .04em; }
.ql-node text { font-weight: 600; }
.qloop__title { font-weight: 600; }
/* dış kadran çentikleri yok; kesikli iç halka, 01–06 düğümleri ve ilerleme yayı döngüyü taşır */
.ql-ticks { display: none; }
/* 961–1180 px: sahne dar kalıp daireyi listenin üstüne yığıyor, açılış 810–925 px'e
   uzuyordu; bu aralıkta telefondaki gibi yalnız liste */
@media (min-width: 961px) and (max-width: 1180px) {
  .kp-hero .qloop__art { display: none; }
}

/* Politika maddeleri: hücre kutuları yok; açık ızgara, her maddenin üstünde
   ince çizgi, küçük sade numara */
.kp-policy {
  column-gap: var(--gap); row-gap: clamp(28px, calc(2.6 * var(--vw)), 72px);
  border: 0;
}
.kp-policy li {
  padding: clamp(16px, calc(1.3 * var(--vw)), 32px) 0 0;
  border: 0; border-top: 1px solid var(--line-2);
}
.kp-policy li:hover { background: none; }
.kp-policy__n {
  font: 600 calc(var(--fs-small) * .95)/1 var(--font-head);
  letter-spacing: .01em;
  color: var(--steel-700);
}
.kp-policy h3 { font-weight: 600; }
.kp-doc__intro { border-left-width: 1px; }

/* === /SAYFA: kalite-politikasi === */

/* === SAYFA: favyoflex-card =============================================== */
/* Açılış lacivert bant (.hero-page--dark .on-dark; ortak kurallar 17.6'da).
   #tanitim beyaz bant: üç hedef kitle kartı .card--navy, sahneleri beyaz
   .card-frame içinde. Mağaza kutuları da .card--navy, QR yeri beyaz çerçeve.
   FavyoFlex lacivert + altın yalnız sahnelerin içinde kalır.
   Kontrast: steel-700 / #fff 7.3:1 · ink-2 / #fff 7.5:1. */

/* Hedef kitle kartları (#tanitim) */
.fxa { --fxa-pad: clamp(12px, calc(1 * var(--vw)), 26px); }
.fxa__card.card--navy { --card-pad: var(--fxa-pad); }
.fxa__well.card-frame { aspect-ratio: 16 / 10; }
.card--navy .fxa__body { padding: clamp(18px, calc(1.5 * var(--vw)), 40px) clamp(6px, calc(.6 * var(--vw)), 16px) clamp(6px, calc(.6 * var(--vw)), 16px); }

/* kartlar arası hat: beyaz zeminde noktalı çelik çizgi, sakin etiket */
.fxa__pipe {
  /* kuyunun (beyaz çerçeve) dikey ortasına hizalı: kart iç boşluğu + çerçeve yüksekliği */
  height: calc(2 * var(--fxa-pad) + ((100cqi - 2 * var(--pipe)) / 3 - 2 * var(--fxa-pad)) * .625);
}
.fxa__pipe b {
  font: 600 calc(var(--fs-small) * .86)/1.35 var(--font-head);
  color: var(--steel-700);
}
.fxa__track {
  height: 3px;
  background: radial-gradient(circle at 1.5px 1.5px, var(--steel-400) 1.25px, transparent 1.7px) 0 0 / 9px 3px repeat-x;
}
.fxa__track::before { border-color: var(--steel-700); background: #fff; }
.fxa__track::after { border-left-color: var(--steel-700); }
.fxa__track i::before { background: var(--navy); box-shadow: 0 0 0 4px rgba(16, 42, 58, .1); }

/* Uygulama: mağaza kutuları lacivert, QR yeri beyaz çerçeve */

@media (max-width: 960px) {
  .fxa__pipe { height: auto; }
  .fxa__track {
    width: 3px; height: 64px;
    background: radial-gradient(circle at 1.5px 1.5px, var(--steel-400) 1.25px, transparent 1.7px) 0 0 / 3px 9px repeat-y;
  }
  .fxa__track::after { border-top-color: var(--steel-700); }
}
@media (min-width: 561px) and (max-width: 960px) {
  .fxa__well.card-frame { aspect-ratio: auto; }
  .card--navy .fxa__body { padding: clamp(10px, calc(1.6 * var(--vw)), 20px) clamp(10px, calc(1.6 * var(--vw)), 20px) clamp(6px, calc(1 * var(--vw)), 12px) clamp(18px, calc(2.4 * var(--vw)), 28px); }
}
@media (max-width: 480px) {
  .fxa { --fxa-pad: 12px; }
  .card--navy .fxa__body { padding: 16px 4px 4px; }
}
/* === /SAYFA: favyoflex-card === */

/* === SAYFA: iletisim ===================================================== */
/* Lacivert açılış: açıklama listesi ve etiketler */
.ilt-hero .tag--here { color: var(--steel-300); }
.ilt-hero .tag--fx { color: var(--fx-gold-l); }

/* Şema yazıları: cümle düzeni, harf aralığı ≤ .04em */
.ilt-map__tag { font-weight: 600; letter-spacing: .01em; }
/* "Bu sitede" kutusunun köşesindeki durum noktası yok (durum noktaları her yerden kalktı) */
.ilt-map__sig { display: none; }
/* Doğrudan iletişim: iki lacivert kart (.ilt-contact.card--navy; 18. bölüm) */
/* === /SAYFA: iletisim === */

/* === SAYFA: kvkk ========================================================= */
/* Lacivert açılış: künye satırı koyu zemine uyar */
.kv-hero .kv-meta { border-top-color: var(--line-dark); }
.kv-hero .kv-meta dt { color: var(--steel-300); }
.kv-hero .kv-meta dd { color: #fff; }

/* Uzun okuma metni en fazla 68 karakter */
.kv-legal .legal__body { max-width: 68ch; }

/* Dar ekran içindekiler: üzerine gelme nötr gri */
.kv-toc-m a:hover { background: var(--hover); }

/* Geniş ekran yan kutusu: başvuru kartı lacivert, FavyoFlex notu beyaz */
.kv-aside__card.card--navy .kv-aside__mail { color: #fff; }
.kv-aside__card--fx { padding: clamp(20px, calc(2.2 * var(--vw)), 60px); background: #fff; border-radius: var(--r-lg); }
/* === /SAYFA: kvkk === */

/* === SAYFA: 404 ========================================================== */
.e404__title { letter-spacing: -.025em; }
/* numara sütunu yok */
.e404__links a { grid-template-columns: minmax(0, 1fr) auto; }
/* Sahne yazıları: cümle düzeni, harf aralığı ≤ .04em */
.e404-scene__hat { font-weight: 600; letter-spacing: .02em; }
/* === /SAYFA: 404 === */

/* ==========================================================================
   20. Vurgu renkleri: YAZI "FavyoFlex altını" + ÇİZİM "Güneş ve deniz"
       (üzerine yazar; 21. bölümle birlikte dosyanın EN SONUNDA durur)
   İki ayrı iş, iki ayrı token ailesi:
     YAZI  (--txt-*) : yalnız başlık vurguları (.hl) ve üst etiketler
                       (.eyebrow + kısa çizgisi). Altın.
     ÇİZİM (--il-*)  : ikonlar, şemalar, akış çizgileri, onay işaretleri,
                       zaman çizelgesi, sahne içi grafikler, ürün çizimleri.
       deniz  (ana)      : çizgi ikonlar, düğümler, onaylar, hatlar, çubuklar
       güneş  (ikincil)  : omuzluk, öne çıkan çubuk, etkin düğüm, küçük süsler
       mercan (seyrek)   : sahne başına 1–2 ayrıntı; "sinyal" noktaları,
                           fermuar çekeceği, ataş, kordon uçları
   DOKUNULMAZ: bölüm/sayfa zeminleri, lacivert kartlar, kart çerçeveleri,
   düğmeler, bağlantılar, menü, alt bilgi, form alanları, gövde yazısı.
   FavyoFlex altını yazıda yalnız .hl ve .eyebrow'da (--txt-*); FavyoFlex
   lacivert + altın YÜZEYLER (#c9b592 dolgu) yalnız FavyoFlex sahnelerinde kalır;
   güneş sarısı altın alanlara değmez. Reflektör bantlar açık gümüş (#e3e6e9).
   Açık tonlar (-50) yalnız çizimlerin İÇİNDE dolgu; bölüm/kart zemini OLMAZ.
   Kontrast (WCAG 2.2):
     --txt-accent         #7a6540  beyaz 5.58 · --paper 5.12 · --hover 5.11  (yazı ≥4.5) — FavyoFlex altını, açık zemin
     --txt-accent-on-dark #c9b592  navy-900 8.34 · navy 7.43 · navy-700 5.71 — FavyoFlex altını
     --il-ocean           #1f7ea8  beyaz 4.56 · --paper 4.18               (grafik ≥3)
     --il-ocean-on-dark   #7cc3e6  navy-900 8.57 · navy 7.64 · navy-700 5.87
     --il-sun             #f2b134  beyaz 1.89 (tek başına ikon/onay OLMAZ) · navy-900 8.82 · navy 7.86
                                   güneş üstünde lacivert (#102a3a) 7.86
     --il-coral           #ea6a55  beyaz 3.14 (yalnız grafik, yazı değil) · --paper 2.88 (yalnız süs)
     --il-coral-on-dark   #f39383  navy-900 7.39 · navy 6.58 · navy-700 5.06
     --il-ocean-300       #8cc4de  beyaz 1.90 — yalnız ikincil ince hat/iz (anlam taşımaz)
   ========================================================================== */
:root {
  /* yazı */
  --txt-accent: #7a6540;          /* FavyoFlex altınının açık zemin yazı tonu (--gold-ink) */
  --txt-accent-on-dark: #c9b592;  /* FavyoFlex altını (--gold) */
  /* çizim paleti */
  --il-ocean: #1f7ea8;
  --il-ocean-on-dark: #7cc3e6;
  --il-ocean-300: #8cc4de;
  --il-ocean-50: #e3f1f8;
  --il-sun: #f2b134;
  --il-sun-50: #fdf1d8;
  --il-coral: #ea6a55;
  --il-coral-on-dark: #f39383;
  --il-coral-50: #fbe3de;
}

/* 20.1 YAZI — başlık vurguları ------------------------------------------------ */
.hl { color: var(--txt-accent); }
.hero-home__title .hl,
.hero-page--dark .hl,
:is(.sec--dark, .on-dark) .hl { color: var(--txt-accent-on-dark); }

/* 20.2 YAZI — üst etiketler: yazı + kısa çizgi (çizgi currentColor ile gelir) - */
.eyebrow { color: var(--txt-accent); }
:is(.sec--dark, .on-dark, .hero-page--dark, .hero-home) .eyebrow { color: var(--txt-accent-on-dark); }
/* çağrı bandındaki etiket (".cta-band__copy p" gri kuralı etiketi eziyordu) */
.cta-band__copy .eyebrow { color: var(--txt-accent); }
:is(.sec--dark, .on-dark) .cta-band__copy .eyebrow { color: var(--txt-accent-on-dark); }
/* lacivert açılıştaki beyaz sahnenin içinde (kalite sayfası) koyu zemin tonu */
.hero-page--dark .qloop .eyebrow { color: var(--txt-accent); }
/* lacivert kartın içindeki etiket: yazı çelik kalır, yalnız kısa çizgi altın */
.card--navy .eyebrow:not(.card-frame *) { color: var(--steel-300); }
.card--navy .eyebrow:not(.card-frame *)::before { background: var(--txt-accent-on-dark); opacity: 1; }
/* zaman çizelgesindeki "Adım 0N" etiketleri de öyle */
.timeline__step .eyebrow { color: var(--steel-300); }
.timeline__step .eyebrow::before { background: var(--txt-accent-on-dark); opacity: 1; }
/* çizgisiz etiketler (.eyebrow--plain) eski renginde */
.eyebrow--plain { color: var(--steel-700); }
:is(.sec--dark, .on-dark, .hero-page--dark, .hero-home) .eyebrow--plain { color: var(--steel-300); }

/* 20.3 ÇİZİM — ikonlar (deniz) -------------------------------------------------- */
/* açık zemin: disk içindeki çizgi ikon */
.org .ibox,
.kg-envs .ibox,
.kg-tech__list .ibox { color: var(--il-ocean); }
/* koyu zemin: lacivert düğüm, açılış bantları, güvence bandı, lacivert kartlar */
.kg-hero__groups .i,
.timeline__step.is-done .ibox,
.card--navy .ibox:not(.card-frame *) { color: var(--il-ocean-on-dark); }

/* 20.4 ÇİZİM — şema ve akış hatları ----------------------------------------------- */
/* yönlendirme satırları: uç noktası deniz */
.route__line::after { background: var(--il-ocean); }
.route:hover .route__line i { background: var(--il-ocean); }
:is(.sec--dark, .on-dark) .route__line::after { background: var(--il-ocean-on-dark); }
:is(.sec--dark, .on-dark) .route:hover .route__line i { background: var(--il-ocean-on-dark); }
/* FavyoFlex kitle akışı (beyaz zemin): nokta hattı + uçlar deniz, gezen sinyal mercan */
.fxa__track { background: radial-gradient(circle at 1.5px 1.5px, var(--il-ocean-300) 1.25px, transparent 1.7px) 0 0 / 9px 3px repeat-x; }
.fxa__track::before { border-color: var(--il-ocean); }
.fxa__track::after { border-left-color: var(--il-ocean); }
.fxa__track i::before { background: var(--il-coral); box-shadow: 0 0 0 4px rgba(234, 106, 85, .14); }
@media (max-width: 960px) {
  .fxa__track { background: radial-gradient(circle at 1.5px 1.5px, var(--il-ocean-300) 1.25px, transparent 1.7px) 0 0 / 3px 9px repeat-y; }
  .fxa__track::after { border-left-color: transparent; border-top-color: var(--il-ocean); }
}

/* 20.5 ÇİZİM — zaman çizelgesi (koyu bant) --------------------------------------- */
.timeline__bar i,
.timeline__steps::after { background: var(--il-ocean-on-dark); }
.timeline__step.is-done .timeline__dot { background: var(--il-ocean-on-dark); border-color: var(--il-ocean-on-dark); }
/* en son tamamlanan adım = etkin düğüm: güneş */
.timeline__step.is-done:not(:has(+ .timeline__step.is-done)) .timeline__dot { background: var(--il-sun); border-color: var(--il-sun); }

/* 20.6 ÇİZİM — koruyucu giyim sahnesi (ceket + talep kartı + beden grafiği) ------ */
/* talep kartı onayları: deniz disk, beyaz tik */
.kg-check circle { fill: var(--il-ocean); stroke: var(--il-ocean); }
@keyframes chkBg {
  0%, 5% { fill: #fff; stroke: var(--il-ocean-300); }
  9%, 84% { fill: var(--il-ocean); stroke: var(--il-ocean); }
  92%, 100% { fill: #fff; stroke: var(--il-ocean-300); }
}
/* beden grafiği: çubuklar deniz, öne çıkan "L" güneş */
.kg-sizes__bars i { background: linear-gradient(180deg, var(--il-ocean), #186a8f); }   /* her çubuk beyazda ≥4.5:1 */
.kg-sizes__bars li:nth-child(3) i { background: var(--il-sun); box-shadow: inset 0 0 0 1.5px #102a3a; }   /* güneş tek başına 1.89 → lacivert kenar 7.86 */
/* açıklama noktaları, ölçü çizgisi ve cepten karta akış */
.kg-scene__art circle[fill="#36597a"] { fill: var(--il-ocean); }
.kg-scene__art .dim { stroke: var(--il-ocean); }
.kg-scene__art .flowline { stroke: var(--il-ocean); }
/* ceket: omuzluk deniz, yan paneller güneş, fermuar çekeceği mercan;
   gövde lacivert, reflektör bantlar gümüş kalır */
.kg-scene__art .jacket path[fill="#5f86a8"] { fill: var(--il-ocean); }
.kg-scene__art .jacket path[fill="#6f93b5"] { fill: var(--il-sun); opacity: 1; }
.kg-scene__art .jacket rect[fill="#9fb9d1"] { fill: var(--il-coral); }

/* 20.7 ÇİZİM — ürün çizimleri (koruyucu giyim, dört kuyu) ------------------------- */
/* 01 tulum: omuz boyunduruğu deniz, yan şeritler güneş, fermuar çekeceği mercan */
.products > .product:nth-child(1) .well svg g > rect[fill="#6f93b5"]:not([opacity]) { fill: var(--il-ocean); }
.products > .product:nth-child(1) .well svg g > rect[fill="#6f93b5"][opacity] { fill: var(--il-sun); opacity: 1; }
.products > .product:nth-child(1) .well svg > rect[fill="#c8d7e5"] { fill: var(--il-coral); }
/* 02 yelek: gövde deniz (gümüş bantlar kalır), yaka içi güneş */
.products > .product:nth-child(2) .well svg > use[fill="#5f86a8"] { fill: var(--il-ocean); }
.products > .product:nth-child(2) .well svg > path[fill="#36597a"] { fill: var(--il-sun); }
/* 03 parka: omuz boyunduruğu deniz, kapüşon içi açık deniz, çıtçıtlar güneş,
   kordon ve uçları mercan */
.products > .product:nth-child(3) .well svg g > rect[fill="#6f93b5"] { fill: var(--il-ocean); }
.products > .product:nth-child(3) .well svg > path[fill="#c8d7e5"] { fill: var(--il-ocean-50); }
.products > .product:nth-child(3) .well svg > g[fill="#6f93b5"] { fill: var(--il-sun); }
.products > .product:nth-child(3) .well svg > circle[fill="#c8d7e5"] { fill: var(--il-coral); }
.products > .product:nth-child(3) .well svg > path[stroke="#c8d7e5"] { stroke: var(--il-coral); }
/* 04 eldiven + baret: eldiven açık deniz, manşet deniz, arkadaki baret güneş
   (lacivert kontur; manşetteki reflektör şerit gümüş kalır) */
.products > .product:nth-child(4) .well svg g > use { fill: var(--il-ocean-50); }
.products > .product:nth-child(4) .well svg g > rect[fill="#6f93b5"][stroke] { fill: var(--il-ocean); }
/* arkadaki baret arka planda kalır: çelik kontur ve soluk opaklık korunur, yalnız çok açık güneş dolgu */
.products > .product:nth-child(4) .well svg > g[stroke="#6f93b5"] > path:first-child { fill: var(--il-sun-50); }
.products > .product:nth-child(4) .well svg > g[stroke="#6f93b5"] > path:nth-child(2) { fill: var(--il-sun-50); }

/* 20.8 ÇİZİM — şartname sahnesi (teklif bölümü) + teklif adımları ---------------- */
.kg-doc__row > rect:first-child { stroke: var(--il-ocean); }
@keyframes kgDocBox {
  0%, 5% { fill: #fff; stroke: var(--il-ocean); }
  9%, 84% { fill: var(--il-ocean); stroke: var(--il-ocean); }
  92%, 100% { fill: #fff; stroke: var(--il-ocean); }
}
.kg-doc__flow { stroke: var(--il-ocean); }
.kg-doc svg > path[stroke="#36597a"] { stroke: var(--il-ocean); }
.kg-doc__sheet path[stroke="#6f93b5"] { stroke: var(--il-coral); }   /* ataş */
.kg-doc__drop { stroke: var(--il-ocean-300); }
@keyframes kgDocDrop {
  0%, 46% { stroke: var(--il-ocean-300); }
  54%, 86% { stroke: var(--il-ocean); }
  94%, 100% { stroke: var(--il-ocean-300); }
}
.kg-doc__land path[stroke="#36597a"] { stroke: var(--il-ocean); }
.kg-doc__land rect[fill="#9fb9d1"] { fill: var(--il-sun); }

/* 20.9 ÇİZİM — hakkımızda: sistem şeması, tek soru, künye mührü ------------------ */
.sysmap__frame { --ln: rgba(124, 195, 230, .7); }
.sysmap__nodes li:not(:last-child)::after { border-color: var(--il-ocean-on-dark); }
.nd__ring { border-color: rgba(124, 195, 230, .6); }
/* etkin düğüm: güneş */
.nd:is(:hover, :focus-visible, .is-active) .nd__ring {
  border-color: var(--il-sun);
  color: var(--il-sun);
  box-shadow: 0 0 0 max(4px, .7cqi) rgba(242, 177, 52, .14), 0 0 max(14px, 2.4cqi) rgba(242, 177, 52, .32);
}
/* hat boyunca gezen sinyal: mercan */
.sysmap__hub .hub-dash { stroke: var(--il-ocean-on-dark); opacity: .9; }
.sysmap__hub .hub-dot { stroke: var(--il-ocean-on-dark); opacity: .6; }
/* künye mührü: halka deniz, kesikli iç halka güneş */
.hk-doc__emblem .em-ticks { stroke: var(--il-ocean); opacity: .45; }
.hk-doc__emblem .em-dash { stroke: var(--il-sun); stroke-width: 2; }
.hk-doc__emblem .em-core { stroke: var(--il-ocean); }

/* 20.10 ÇİZİM — kalite döngüsü --------------------------------------------------- */
.ql-ring { stroke: var(--il-ocean-300); stroke-width: 2; opacity: .8; }   /* iz halkası: açık deniz çizgi (-50 yalnız dolgu) */
.ql-dash { stroke: var(--il-ocean-300); }
.ql-arc { stroke: var(--il-ocean); }
.ql-chev path { stroke: var(--il-ocean); }
.ql-node circle { stroke: var(--il-ocean); }
/* etkin adım: güneş dolgu + lacivert kontur ve numara (7.86:1) */
@keyframes qlNode { 0%, 14% { fill: var(--il-sun); stroke: #102a3a; } 17%, 100% { fill: #fff; stroke: var(--il-ocean); } }
@keyframes qlNodeT { 0%, 14% { fill: #102a3a; } 17%, 100% { fill: #102a3a; } }
@keyframes qlItem {
  0%, 14% { color: #102a3a; border-left-color: var(--il-ocean); background-color: #f4f5f6; }
  17%, 100% { color: #41566a; border-left-color: #d8e2eb; background-color: rgba(244, 245, 246, 0); }
}

/* 20.11 ÇİZİM — iletişim yönlendirme şeması -------------------------------------- */
.ilt-map__base path { stroke: var(--il-ocean-300); }
.ilt-map__pulse path { stroke: var(--il-ocean); }
.ilt-map__pulse path:first-child { stroke: var(--il-coral); }   /* "bu sitede" hattı */
.ilt-map__open { stroke: var(--il-ocean); }
.ilt-map__end circle { fill: var(--il-ocean); }
.ilt-map__here rect { stroke: var(--il-ocean); }
.ilt-map__sig { fill: var(--il-coral); }

/* 20.12 ÇİZİM — 404 sahnesi (koyu) ----------------------------------------------- */
.e404-scene__line { stroke: rgba(124, 195, 230, .55); }
.e404-scene__flow { stroke: var(--il-ocean-on-dark); opacity: .9; }
.e404-scene__bracket { stroke: var(--il-ocean-on-dark); }
.e404-scene__nodes circle { stroke: var(--il-ocean-on-dark); }
.e404-scene__ring { stroke: rgba(124, 195, 230, .55); }
.e404-scene__ring2 { stroke: rgba(124, 195, 230, .3); }
.e404-scene__qring { stroke: var(--il-sun); }
.e404-scene__sig { fill: var(--il-coral-on-dark); }

/* 20.13 Hareket azaltma: durağan hâl de yeni paletle -------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kg-check circle { fill: var(--il-ocean) !important; stroke: var(--il-ocean) !important; }
  .kg-doc__row > rect:first-child { fill: var(--il-ocean) !important; stroke: var(--il-ocean) !important; }
}
/* === /20. Vurgu renkleri === */

/* ==========================================================================
   21. Başlık yazı tipi — Libre Caslon Display (FavyoFlex ile ortak)
   Büyük başlıklar (h1, h2) FavyoFlex'teki gibi serif (iş kartı başlığı
   .panel__title 22. bölümde yeniden Manrope);
   vurgulu kelimeler düz (italik değil) + altın. Menü, etiket, gövde ve küçük başlıklar
   (h3, h4) Manrope / DM Sans olarak kalır.
   Caslon Display'in küçük harfleri daha kısa olduğundan boyut ~%12 büyütüldü.
   ========================================================================== */
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-display-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Libre Caslon Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/libre-caslon-display-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
:root {
  --font-title: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --fs-display: clamp(44.8px, calc(4.928 * var(--vw)) + 6.38px, 148px);
  --fs-h1: clamp(37px, calc(3.584 * var(--vw)) + 6.38px, 112px);
  --fs-h2: clamp(30px, calc(2.352 * var(--vw)) + 6.38px, 76px);
}
h1, h2, .hero-home__title, .panel__title {
  font-family: var(--font-title);
  font-weight: 400;
  letter-spacing: 0;
}
h1 { line-height: 1.06; }
h2 { line-height: 1.1; }
.hero-home__title { font-size: clamp(38px, calc(3.752 * var(--vw)) + 6.38px, 121px); }
.panel__title { font-size: calc(var(--fs-h3) * 1.45); }
.panel__title small { font-family: var(--font-body); }
:is(h1, h2, .hero-home__title) .hl { font-style: normal; }  /* bilerek düz: vurgular italik YAPILMAZ (sahibin kararı) */
/* 404 başlığı: eski sıkı harf aralığı/satır yüksekliği serif için geri alınır */
.e404__title { letter-spacing: 0; line-height: 1.06; }
/* KVKK bölüm başlıkları: serif --fs-h3'te h3'ün altında kalıyordu; .panel__title gibi büyütülür */
.legal__body h2 { font-size: calc(var(--fs-h3) * 1.3); line-height: 1.15; }

/* ==========================================================================
   22. Sadeleştirme (30 Eylül 2026, sahibin kararı) — dosyanın en sonunda kalır
   - Menü: Kurumsal (açılır) · Yan Hak Çözümleri · Koruyucu Giyim · İletişim
     + sağda birincil "Teklif alın" düğmesi (.nav__cta.btn--primary).
   - Hizmet kartı başlıkları (.panel__title) yeniden Manrope; sayfa ve bölüm
     başlıkları (h1, h2) Caslon serif kalır (21. bölüm).
   - Ana sayfa akışı: açılış → iki hizmet kartı → Siltek hakkında
     tanıtımı → yetkinlikler → lacivert teklif ve iletişim bandı.
     Lacivert yüzey yalnız açılışta, iki hizmet kartında ve son bantta.
   ========================================================================== */

/* 22.1 Menü -------------------------------------------------------------- */
.nav__cta.btn--primary { padding-inline: clamp(14px, calc(1.2 * var(--vw)), 30px); white-space: nowrap; }
.site-header--dark .nav__cta.btn--primary { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.site-header--dark .nav__cta.btn--primary:hover { --bg: var(--hover-2); --bd: var(--hover-2); }
.nav__link { white-space: nowrap; }
/* 961–1100 px: dört menü öğesi + düğme logoyla aynı satıra sığsın */
@media (min-width: 961px) and (max-width: 1100px) {
  .site-header__row { gap: 10px; }
  .nav { gap: 8px; }
  .nav__list { gap: 0; }
  .nav__trigger, .nav__link { padding-inline: .55em; }
  .nav__cta.btn--primary { padding-inline: 14px; }
}

/* 22.2 Hizmet kartı başlığı: sade arayüz yazı tipi -------------------------- */
.panel__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: calc(var(--fs-h3) * 1.3);
  letter-spacing: -.015em;
  line-height: 1.15;
}

/* 22.3 Ana sayfa açılışı: iki faaliyet alanı bağlantısı --------------------- */
.hero-home__areas {
  display: grid;
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid var(--line-dark);
}
.hero-home__areas a {
  display: flex; align-items: center; gap: .8em;
  min-height: 48px;
  padding-block: clamp(10px, calc(.9 * var(--vw)), 22px);
  border-bottom: 1px solid var(--line-dark);
  font: 600 var(--fs-body)/1.3 var(--font-head);
  color: #fff; text-decoration: none;
}
.hero-home__areas a > .i:first-child { flex: none; width: 1.3em; height: 1.3em; color: var(--il-ocean-on-dark); }
.hero-home__areas .i-arr { flex: none; width: 1.05em; height: 1.05em; margin-left: auto; color: var(--steel-300); transition: transform var(--d-fast) var(--ease); }
.hero-home__areas a:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .28em; }
.hero-home__areas a:hover .i-arr { transform: translateX(4px); }
/* açılış cümlesi kısaldı: başlık bir kademe büyür (üst sınır yine sabit) */
.hero-home__title { font-size: clamp(40px, calc(4.2 * var(--vw)) + 6px, 132px); }

/* 22.4 İki hizmet kartı: eşit görsel (aynı oran, beyaz zemin, hareketsiz) ---- */
/* Kapsam yalnız ana sayfa bandı (.biz-band): Hakkımızda'daki .hk-mini paneller kendi oranlarını korur */
.biz-band .biz .panel__scene { aspect-ratio: 16 / 10; }
.biz-band .biz .panel__body p { max-width: 62ch; }
.biz-still .fx-card, .biz-still .fx-card::after, .biz-still .phone { animation: none; }
/* kart + telefon: ikisi de çerçevenin içinde durur (telefon kesilmez) */
.biz-fx { --card-x: 7cqi; --card-y: 21cqi; --card-w: 55cqi; --phone-x: 12cqi; --phone-y: 4.5cqi; --phone-w: 25.5cqi; }
.biz-fx .fx-card { transform: rotate(-7deg); }
/* hareketsiz ekran her boyutta bitmiş görünür: küçük sahnede ara etiketler gizlenir (.sx-hide),
   "Gıda · yakında" adın parçası olarak aynı ölçüde kalır */
.biz-fx .scr-name { white-space: nowrap; }
/* yelek + ceket: SVG çerçevenin oranında (1000 × 625) */
.biz-kg { position: absolute; inset: 0; }
.biz-kg__art {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* kart + telefonla aynı işçilik: yumuşak nesne gölgesi */
  filter: drop-shadow(0 1.6cqi 2.4cqi rgba(16, 42, 58, .2));
}
/* dar sahnede "Temsili çizim" etiketi yeleğin omzuna binmesin */
@container scene (max-width: 420px) {
  .biz-kg__art { transform: scale(.92); transform-origin: 50% 93%; }
}
/* iki sahnede aynı zemin gölgesi */
.biz-floor {
  position: absolute; z-index: 0;
  left: 14%; right: 14%; bottom: 3.5%;
  height: 7%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(16, 42, 58, .16), rgba(16, 42, 58, 0));
}
/* klavye odağı: kart çerçevesine ek olarak düğmenin kendisi de halka alır */
.biz-band .biz .panel__link:focus-visible { outline: 2px solid var(--focus-on-dark); outline-offset: 3px; }

/* 22.6 Yetkinlikler (açık zemin, kutusuz iki sütun) ------------------------- */
.caps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, calc(4.4 * var(--vw)), 110px); row-gap: var(--s7);
}
.caps__col { display: grid; align-content: start; justify-items: start; gap: var(--s5); min-width: 0; }
.caps__title {
  display: flex; align-items: center; gap: .75em;
  width: 100%; margin: 0;
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line-2);
  font: 700 var(--fs-h3)/1.2 var(--font-head);
  color: var(--navy);
}
.caps__title > svg { flex: none; width: 1.25em; height: 1.2em; }
.caps__title > .i { color: var(--il-ocean); }
.caps__title small { display: block; margin-top: .25em; font: 500 var(--fs-small)/1.3 var(--font-body); color: var(--ink-3); }
.caps__list { display: grid; gap: var(--s5); width: 100%; margin: 0; padding: 0; list-style: none; }
.caps__list li { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(14px, calc(1.2 * var(--vw)), 28px); align-items: start; }
.caps__list .ibox { color: var(--il-ocean); }
.caps__list h4 { margin: 0 0 .3em; font: 600 var(--fs-body)/1.3 var(--font-head); color: var(--navy); }
.caps__list p { margin: 0; color: var(--ink-2); max-width: 52ch; }
@media (max-width: 960px) {
  .caps { grid-template-columns: 1fr; }
}

/* 22.7 Teklif ve iletişim: sayfanın son lacivert bandı ----------------------- */
/* hizmet kartlarıyla aynı lacivert (#102a3a): altındaki koyu alt bilgiden ayrı bir bant olarak okunur */
.home-cta { background: var(--navy); border-bottom: 1px solid var(--line-dark); }
.home-cta__inner {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap); row-gap: var(--s5);
  align-items: end;
}
.home-cta__inner > * { min-width: 0; }
.home-cta__copy { grid-column: 1 / 8; display: grid; gap: var(--s4); justify-items: start; }
.home-cta__copy > p:not(.eyebrow) { max-width: 56ch; }
.home-cta__actions { grid-column: 8 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: var(--s3); }
@media (max-width: 960px) {
  .home-cta__copy, .home-cta__actions { grid-column: 1 / -1; }
  .home-cta__actions { justify-content: flex-start; }
}
@media (max-width: 480px) {
  .home-cta__actions .btn { width: 100%; }
}
/* === /22. Sadeleştirme === */

/* ==========================================================================
   23. Onaylı metinler (30 Eylül 2026) — dosyanın en sonunda kalır
   Grup sütunu ve Grup satırı kaldırıldı; sütun düzeni aynı, sayı azaldı.
   ========================================================================== */
/* Alt bilgi: marka + üç sütun (Kurumsal · Faaliyet Alanları · FavyoFlex Card) */
.footer__main { grid-template-columns: 4fr repeat(3, 2fr); }
@media (max-width: 1180px) {
  .footer__main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .footer__main { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 359px) {
  .footer__main { grid-template-columns: 1fr; }
}
/* Hakkımızda: onaylı üç paragraflık açılış (ilki .lead) */
.hk-hero .hk-hero__p { max-width: 60ch; line-height: 1.6; }
/* Hakkımızda — Çalışma yaklaşımımız: altı kutu, uzun açıklamalar için 3 sütun; açıklamalar okunur boyda */
.hk-approach .principles__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hk-approach .principles__list li { align-content: start; gap: 0; }
.hk-approach .principles__list small { font-size: var(--fs-small); line-height: 1.55; }
@media (max-width: 760px) {
  .hk-approach .principles__list { grid-template-columns: 1fr; }
}
/* Alt bilgi ≤960 px: tek kalan FavyoFlex Card sütunu tam genişlik (bağlantı tek satırda kalır) */
@media (max-width: 960px) {
  .footer__main > .footer__col:last-child { grid-column: 1 / -1; }
}
/* === /23. Onaylı metinler === */

/* ==========================================================================
   24. Ana sayfa açılışı — iki iş, iki etiketli satır (30 Eylül 2026)
   Koruyucu giyim FavyoFlex Card'la ilgili değildir; iki iş ayrı satırlarda,
   başında kısa etiketle yazılır.
   ========================================================================== */
.hero-home__lines { margin: 0; display: grid; gap: var(--s4); max-width: 46ch; }
.hero-home__lines > div { display: grid; gap: .35em; }
.hero-home__lines > div + div { padding-top: var(--s4); border-top: 1px solid var(--line-dark); }
.hero-home__lines dt {
  font: 600 var(--fs-label) / 1.3 var(--font-head);
  letter-spacing: .01em;
  color: var(--txt-accent-on-dark);
}
.hero-home__lines dd {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--on-dark-2);
}

/* ==========================================================================
   25. Üst menü: sağda FavyoFlex Card'a geçiş düğmesi (30 Eylül 2026, sahibin
   kararı; önceki "Teklif alın" düğmesinin yerine). F işareti + dış bağlantı oku.
   Teklif bağlantıları sayfa içlerinde ve alt bilgide durur.
   ========================================================================== */
.nav__cta.btn--fx { padding-inline: clamp(14px, calc(1.2 * var(--vw)), 30px); white-space: nowrap; gap: .55em; }
.site-header--dark .nav__cta.btn--fx { --bg: #fff; --fg: var(--navy); --bd: #fff; }
.site-header--dark .nav__cta.btn--fx:hover { --bg: var(--hover-2); --bd: var(--hover-2); }
.site-header--dark .nav__cta.btn--fx .fmark { --fm-a: var(--fxl-navy); --fm-b: var(--fxl-blue); }
@media (min-width: 961px) and (max-width: 1100px) {
  .nav__cta.btn--fx { padding-inline: 14px; }
}

/* ==========================================================================
   26. Ana sayfa sadeleştirme 2 (30 Eylül 2026, sahibin kararı)
   - Hizmet kartlarında üst etiket yok; kart 1 düğmesi site içi Yan Hak Çözümleri.
   - "Siltek hakkında" bölümü kaldırıldı; iki kartın hemen ardından yetkinlikler.
   - Yetkinliklerde görünür bölüm başlığı yok (h2 yalnız ekran okuyucu için);
     boşluklar buna göre daraltıldı.
   - Alt bilgideki "çizimler temsilidir" notu tüm sayfalardan kaldırıldı.
   ========================================================================== */
.biz .panel__head { padding-top: 0; }
.biz-band { padding-bottom: clamp(48px, calc(4.4 * var(--vw)), 120px); }
#yetkinlikler { padding-block: clamp(56px, calc(5.2 * var(--vw)), 150px); }
.footer__base { padding-bottom: clamp(26px, calc(2.4 * var(--vw)), 56px); }
@media (max-width: 760px) {
  .biz-band { padding-bottom: 40px; }
  #yetkinlikler { padding-block: 48px; }
}

/* ==========================================================================
   27. Hakkımızda sistem şeması sadeleştirme (30 Eylül 2026, sahibin kararı)
   Etiket ("Temsili şema"), A-01/B-01 kodları, gezen sinyal noktası, seçili adım
   paneli, "Şirket / İki ayrı iş" yan yazıları ve şema açıklaması kaldırıldı.
   Adımlar tek tek yanmaz (data-reader yok); yalnız noktalı hatlar birlikte ve
   yavaş akar. Üzerine gelince / odakta adım yine vurgulanır (bağlantıdır).
   ========================================================================== */
.hk-hero .sysmap__frame {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "capA" "rowA" "hub" "rowB" "capB";
}
.hk-hero .sysmap__cap {
  font-size: max(11px, 1.25cqi);
  letter-spacing: .14em;
  color: var(--steel-300);
}
/* kod satırı kalktı: hat ve ok, halka ortasına göre yeniden hizalanır */
.hk-hero .sysmap__nodes li:not(:last-child)::before {
  top: calc(4px + var(--ring) / 2 - 1.5px);
  animation-duration: 6s;
}
.hk-hero .sysmap__nodes li:not(:last-child)::after { top: calc(4px + var(--ring) / 2 - 3.5px); }
.hk-hero .sysmap__side { visibility: hidden; }
@container sysmap (max-width: 619px) {
  .hk-hero .sysmap__frame {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "hub hub" "capA capB" "rowA rowB";
  }
  .hk-hero .sysmap__nodes li:not(:last-child)::before {
    top: calc(4px + var(--ring) + 4px);
    animation-duration: 6s;
  }
  .hk-hero .nd { grid-template-areas: "ring txt"; align-items: center; }
}

/* ==========================================================================
   28. Hakkımızda: vizyon ve misyon (30 Eylül 2026)
   İki eşit sütun, aralarında ince dikey çizgi; metin başlık yazı tipinde (Caslon).
   Dar ekranda alt alta, araya yatay çizgi.
   ========================================================================== */
.hk-vm { padding-block: clamp(56px, calc(5.2 * var(--vw)), 150px); }
.hk-vm__grid { --vm-gap: clamp(28px, calc(3.2 * var(--vw)), 90px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hk-vm__item { display: grid; align-content: start; gap: var(--s4); min-width: 0; }
.hk-vm__item:first-child { padding-right: var(--vm-gap); }
.hk-vm__item + .hk-vm__item { padding-left: var(--vm-gap); border-left: 1px solid var(--line-2); }
.hk-vm__text {
  margin: 0;
  font: 400 calc(var(--fs-h3) * 1.15) / 1.4 var(--font-title);
  color: var(--ink);
  max-width: 32em;
}
@media (max-width: 760px) {
  .hk-vm { padding-block: 48px; }
  .hk-vm__grid { grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .hk-vm__item:first-child { padding-right: 0; }
  .hk-vm__item + .hk-vm__item { padding-left: 0; border-left: 0; padding-top: 28px; border-top: 1px solid var(--line-2); }
}

/* 29. Logo görselleri çizimlerin içinde (hakkımızda göbek ve künye mührü) */
.sysmap__logo img, .hk-doc__logo img { width: 100%; height: auto; }

/* ==========================================================================
   30. Dil geçişi (30 Eylül 2026) — TR ⇄ EN
   - Üst şerit: FavyoFlex Card düğmesinden hemen önce sade "EN" / "TR" bağlantısı
     (.nav__lang; görünür kısa ad aria-hidden, tam ad .sr-only). ≤960 px'te gizli,
     dil geçişi çekmecede (.drawer__lang) ve alt bilgide durur.
   - Çekmece: FavyoFlex Card düğmesinden önce düz bir satır (.drawer__lang).
   - Alt bilgi: KVKK / Privacy Notice bağlantısının yanında, .footer__legal
     içindeki öteki bağlantılarla aynı görünüm (ek kural yok).
   ========================================================================== */
.nav__lang {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  min-width: 44px; min-height: 40px;
  padding: .45em .7em;
  border: 1px solid var(--line-2); border-radius: var(--r);
  font: 600 var(--fs-label)/1 var(--font-head);
  letter-spacing: .04em;
  color: var(--navy);
  text-decoration: none;
  transition: background var(--d-fast), border-color var(--d-fast);
}
.nav__lang:hover { background: var(--hover); border-color: var(--steel-700); }
.site-header--dark .nav__lang { color: #fff; border-color: rgba(255, 255, 255, .35); }
.site-header--dark .nav__lang:hover { background: rgba(159, 185, 209, .1); border-color: rgba(255, 255, 255, .7); }
.site-header--dark .nav__lang:focus-visible { outline-color: var(--focus-on-dark); }
@media (min-width: 961px) and (max-width: 1100px) {
  .nav__lang { min-width: 40px; padding-inline: .55em; }
}
@media (max-width: 960px) {
  .nav > .nav__lang { display: none; }
}
.drawer__lang {
  display: flex; align-items: center;
  min-height: 48px;
  margin-top: 8px;
  font: 600 16px/1.3 var(--font-head);
  letter-spacing: .01em;
  color: var(--navy);
  text-decoration: none;
}
.drawer__lang:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em; }
.drawer__lang + .drawer__cta { margin-top: 16px; }
/* === /30. Dil geçişi === */
/* ==========================================================================
   31. İngilizce sayfalar (30 Eylül 2026)
   - İngilizce menü adları daha uzun (Corporate · Employee Benefits ·
     Protective Workwear · Contact) ve üst şeritte "TR" kutusu da var:
     961–1040 px'te logo ile menü arasında nefes payı kalsın diye yalnız
     İngilizce sayfalarda menü öğelerinin iç boşluğu ve aralıklar biraz daralır.
   - Kart içi "Request scope" çubukları: 10. bölümdeki @container scene
     (max-width: 519px) kuralına eklendi (.kg-row span.sx).
   ========================================================================== */
@media (min-width: 961px) and (max-width: 1040px) {
  html[lang|="en"] .site-header__row { gap: 8px; }
  html[lang|="en"] .nav { gap: 6px; }
  html[lang|="en"] .nav__trigger, html[lang|="en"] .nav__link { padding-inline: .4em; }
  html[lang|="en"] .nav__link[aria-current="page"]::after { left: .4em; right: .4em; }
  html[lang|="en"] .nav__trigger.is-current::after { left: .4em; right: 1.5em; }
  html[lang|="en"] .nav__cta.btn--fx { padding-inline: 12px; }
}
/* === /31. İngilizce sayfalar === */

/* 32. FavyoFlex Card logosu (2 Ekim 2026): FF işareti #fm — büyük F lacivert, küçük F mavi;
   koyu zeminde beyaz + açık mavi. Kart görseli assets/img/favyoflex-kart.webp. */
:root { --fxl-navy: #142c54; --fxl-blue: #3464a4; --fxl-blue-l: #7aa3dc; }