/* ============================================================
   Kuvars Chem KZ — temel stiller ve ortak bileşenler
   Bağımlılık: tokens.css (önce yüklenir).
   Bölümler: 1 sıfırlama · 2 tipografi · 3 düzen · 4 düğme/bağlantı ·
   5 üst bilgi · 6 alt bilgi · 7 CTA bloğu · 8 kart/liste/tablo ·
   9 sezon şeridi · 10 yardımcılar
   ============================================================ */

/* ---------- 1. Sıfırlama ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "cv11" 1; /* tabular rakam; tek katlı a */
}
img, svg { display: block; max-width: 100%; height: auto; }
ul, ol { margin: 0; padding: 0; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: var(--border-w) solid var(--color-border); margin: var(--space-6) 0; }

/* ---------- 2. Tipografi ---------- */
h1, h2, h3, h4 {
  margin: 0;
  color: var(--color-heading);
  font-weight: var(--weight-semibold);
  text-wrap: balance;
}
h1 { font-size: var(--text-2xl); line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h2 { font-size: var(--text-xl);  line-height: var(--leading-tight); letter-spacing: var(--tracking-display); }
h3 { font-size: var(--text-lg);  line-height: var(--leading-snug);  letter-spacing: var(--tracking-heading); }
h4 { font-size: var(--text-md);  line-height: var(--leading-snug);  letter-spacing: var(--tracking-heading); }
@media (min-width: 48em) {
  h1 { font-size: var(--text-3xl); }
  h2 { font-size: var(--text-2xl); }
  h3 { font-size: var(--text-xl); }
  h4 { font-size: var(--text-lg); }
}
p { margin: 0 0 var(--space-4); max-width: var(--measure); }
p:last-child { margin-bottom: 0; }
.lead { font-size: var(--text-md); line-height: var(--leading-body); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--text-sm); }
strong { font-weight: var(--weight-semibold); }

/* Koyu zemin üzerinde metin */
.on-dark { color: var(--color-text-on-dark); }
.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--color-text-on-dark); }
.on-dark .muted { color: var(--color-text-on-dark-muted); }
.on-dark a:not(.btn) { color: var(--color-text-on-dark); }

/* ---------- 3. Düzen ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }

.section { padding-block: var(--section-y); }
.section--alt  { background: var(--color-bg-alt); }
.section--tint { background: var(--color-bg-tint); }
.section--dark { background: var(--color-bg-dark); color: var(--color-text-on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--color-text-on-dark); }
.section--dark .muted { color: var(--color-text-on-dark-muted); }

/* Bölüm başı: turuncu işaret çizgisi + başlık + isteğe bağlı açıklama */
.section__head { margin-bottom: var(--space-6); }
.section__head::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: var(--rule-w);
  background: var(--color-accent);
  margin-bottom: var(--space-4);
}
.section__head p { margin-top: var(--space-3); }
@media (min-width: 48em) { .section__head { margin-bottom: var(--space-7); } }

/* Izgara: mobilde tek sütun, 768'den itibaren 12 sütun */
.grid { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 48em) {
  .grid { grid-template-columns: repeat(12, 1fr); gap: var(--space-5); }
  .col-3  { grid-column: span 3; }
  .col-4  { grid-column: span 4; }
  .col-5  { grid-column: span 5; }
  .col-6  { grid-column: span 6; }
  .col-7  { grid-column: span 7; }
  .col-8  { grid-column: span 8; }
  .col-12 { grid-column: span 12; }
}
@media (min-width: 64em) { .grid { gap: var(--space-6); } }

/* Eş kartlar için otomatik ızgara */
.cards { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .cards { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
@media (min-width: 64em) {
  .cards--3 { grid-template-columns: repeat(3, 1fr); }
  .cards--4 { grid-template-columns: repeat(4, 1fr); }
  .cards--5 { grid-template-columns: repeat(5, 1fr); }
}

/* ---------- 4. Bağlantı ve düğme ---------- */
a { color: var(--color-link); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-color: var(--color-accent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;                 /* 48 px dokunma hedefi */
  padding: 0 var(--space-5);
  border-radius: var(--radius);
  border: var(--border-w) solid transparent;
  font-weight: var(--weight-medium);
  font-size: var(--text-base);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn--secondary { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--secondary:hover { background: var(--color-bg-tint); }
/* Koyu zeminde */
.on-dark .btn--primary, .section--dark .btn--primary, .cta .btn--primary { background: var(--color-bg); color: var(--color-primary); border-color: var(--color-bg); }
.on-dark .btn--primary:hover, .section--dark .btn--primary:hover, .cta .btn--primary:hover { background: var(--kc-navy-100); border-color: var(--kc-navy-100); }
.on-dark .btn--secondary, .section--dark .btn--secondary, .cta .btn--secondary { color: var(--color-text-on-dark); border-color: rgba(255,255,255,0.6); }
.on-dark .btn--secondary:hover, .section--dark .btn--secondary:hover, .cta .btn--secondary:hover { border-color: var(--color-text-on-dark); background: rgba(255,255,255,0.08); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* Metin bağlantısı (kart altı, "tümü" bağlantıları): alt çizgi hover'da */
.link-more { font-weight: var(--weight-medium); text-decoration: none; }
.link-more:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* ---------- 5. Üst bilgi ---------- */
.skip-link {
  position: absolute; left: var(--space-4); top: -100%;
  z-index: calc(var(--z-header) + 1);
  padding: var(--space-2) var(--space-4);
  background: var(--color-primary); color: var(--color-on-primary);
  border-radius: 0 0 var(--radius) var(--radius);
}
.skip-link:focus { top: 0; }

.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: var(--color-bg);
  box-shadow: var(--shadow-header);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  min-height: var(--header-h);
  gap: var(--space-5);
}
.site-header__logo { display: block; text-decoration: none; }
.site-header__logo img { width: auto; height: 2.25rem; }   /* 36 px; 248×43 oran korunur */
@media (min-width: 48em) { .site-header__logo img { height: 2.5rem; } }

/* Menü düğmesi (yalnızca JS varsa görünür, < 75em) */
.nav-toggle {
  display: none;
  align-items: center; gap: var(--space-2);
  min-height: 2.75rem; padding: 0 var(--space-2);
  color: var(--color-primary); font-weight: var(--weight-medium);
  border-radius: var(--radius);
}
.nav-toggle__icon { width: var(--icon-md); height: var(--icon-md); stroke: currentColor; stroke-width: var(--icon-stroke); fill: none; stroke-linecap: round; }
.nav-toggle__icon .close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon .open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon .close { display: block; }

.site-nav { display: flex; align-items: center; gap: var(--space-5); }
.site-nav__list { list-style: none; display: flex; align-items: center; gap: var(--space-1); }
.site-nav__list a {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: var(--header-h);
  padding: 0 var(--space-3);
  font-size: 0.9375rem;               /* 15 px — 7 Rusça madde 1200'e böyle sığar */
  font-weight: var(--weight-medium);
  color: var(--color-heading);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-out);
}
.site-nav__list a:hover { color: var(--color-accent-hover); }
/* Aktif sayfa: 3 px turuncu alt çizgi */
.site-nav__list a[aria-current="page"]::after {
  content: ""; position: absolute; left: var(--space-3); right: var(--space-3); bottom: 0;
  height: var(--rule-w); background: var(--color-accent);
}
.site-nav__list .site-nav__home { display: none; }   /* «Главная» yalnızca mobil menüde */

/* Mobil / dar ekran: < 75em (1200) */
@media (max-width: 74.99em) {
  .js .nav-toggle { display: inline-flex; }
  .js .site-nav {
    position: fixed; inset: var(--header-h) 0 0 0;
    z-index: var(--z-menu);
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    padding: var(--space-5) var(--gutter) var(--space-8);
    background: var(--color-bg);
    overflow-y: auto;
    transform: translateY(-8px); opacity: 0; visibility: hidden;
    transition: transform var(--dur-slow) var(--ease-out), opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow);
  }
  .js.nav-open .site-nav { transform: none; opacity: 1; visibility: visible; transition-delay: 0s; }
  .js.nav-open { overflow: hidden; }
  .site-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__list .site-nav__home { display: block; }
  .site-nav__list a {
    min-height: 3.5rem; padding: 0;
    font-size: var(--text-lg);
    border-bottom: var(--border-w) solid var(--color-border);
  }
  .site-nav__list a[aria-current="page"]::after { left: 0; right: auto; width: 2.5rem; bottom: -1px; }
  .site-nav__cta { margin-top: var(--space-5); width: 100%; }
  /* JS yoksa: menü akışta, üst bilginin altında */
  html:not(.js) .site-nav { width: 100%; flex-direction: column; align-items: stretch; padding-block: var(--space-3); }
  html:not(.js) .site-header__inner { flex-wrap: wrap; }
}

/* ---------- 6. Alt bilgi ---------- */
.site-footer {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark-muted);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--text-sm);
}
.site-footer a { color: var(--color-text-on-dark); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.site-footer__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 48em) { .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: var(--space-6); } }
.site-footer__logo img { width: auto; height: 2.25rem; margin-bottom: var(--space-4); }
.site-footer__tagline { color: var(--color-text-on-dark); max-width: 24rem; margin-bottom: var(--space-3); }
.site-footer h2 {
  font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: 0;
  color: var(--color-text-on-dark); margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer address { font-style: normal; }
.site-footer address p { margin-bottom: var(--space-2); }
.site-footer__bottom {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: var(--border-w) solid var(--kc-line-on-dark);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3);
  font-size: var(--text-xs);
}
.site-footer__bottom p { margin: 0; max-width: none; }

/* ---------- 7. CTA bloğu ---------- */
.cta {
  background: var(--color-bg-dark);
  color: var(--color-text-on-dark);
  padding-block: var(--space-8);
  border-top: var(--rule-w) solid var(--color-accent);
}
.cta__inner { display: grid; gap: var(--space-5); align-items: center; grid-template-columns: 1fr; }
@media (min-width: 64em) { .cta__inner { grid-template-columns: 1fr auto; gap: var(--space-8); } }
.cta h2 { color: var(--color-text-on-dark); margin-bottom: var(--space-3); }
.cta p { color: var(--color-text-on-dark-muted); font-size: var(--text-md); }

/* ---------- 8. Kart, liste, tablo ---------- */
.card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-bg);
  border: var(--border-w) solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out);
}
.card:hover, .card:focus-within { border-color: var(--color-border-strong); }
.card--link { text-decoration: none; color: inherit; }
.card--link:hover { border-color: var(--color-primary); }
.card__label { font-size: var(--text-sm); color: var(--color-text-muted); }
.card h3 { color: var(--color-heading); }
.card p { max-width: none; }
.card__foot { margin-top: auto; padding-top: var(--space-2); }
.card__icon { width: var(--icon-lg); height: var(--icon-lg); stroke: var(--color-accent); stroke-width: var(--icon-stroke); fill: none; stroke-linecap: round; stroke-linejoin: round; }

/* Teknik tablo: yatay çizgiler, dikey yok, rakamlar sağda */
.table-tech th, .table-tech td { padding: var(--space-3) var(--space-3); text-align: left; vertical-align: top; border-bottom: var(--border-w) solid var(--color-border); }
.table-tech th { font-weight: var(--weight-semibold); color: var(--color-heading); font-size: var(--text-sm); }
.table-tech td:first-child { font-weight: var(--weight-medium); }
.table-tech .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.table-wrap { overflow-x: auto; }

/* Onay listesi: ince çizgili madde listesi */
.list-rule { list-style: none; }
.list-rule li { padding: var(--space-3) 0; border-top: var(--border-w) solid var(--color-border); }
.list-rule li:last-child { border-bottom: var(--border-w) solid var(--color-border); }

/* Etiket (sektör, kategori): bilgi taşıyan küçük çerçeve */
.tag {
  display: inline-block; padding: 0.125rem var(--space-2);
  border: var(--border-w) solid var(--color-border-strong); border-radius: var(--radius);
  font-size: var(--text-sm); color: var(--color-heading); text-decoration: none;
}
.tag:hover { border-color: var(--color-primary); }

/* ---------- 9. Sezon şeridi — DEVRE DIŞI (kullanıcı, 14 Eylül 2026) ----------
   Kavram şimdilik kullanılmıyor; sınıflar ileride gerekirse duruyor. */
.season { --season-line: var(--kc-line); }
.season__months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; list-style: none; }
.season__months li {
  padding: var(--space-3) 0 var(--space-2);
  text-align: center;
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  border-top: var(--rule-w) solid var(--season-line);
  color: var(--color-text-muted);
}
.season__months .is-prep { border-top-color: var(--color-accent); background: var(--kc-orange-100); color: var(--kc-orange-700); }
.season__months .is-heat { border-top-color: var(--color-primary); background: var(--kc-navy-50); color: var(--color-heading); }
.season__legend { display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-5); margin-top: var(--space-4); font-size: var(--text-sm); }
.season__legend span { display: inline-flex; align-items: center; gap: var(--space-2); }
.season__legend i { display: inline-block; width: 1rem; height: var(--rule-w); }
.season__legend .is-prep i { background: var(--color-accent); }
.season__legend .is-heat i { background: var(--color-primary); }
/* Koyu zeminde (hero) */
.on-dark .season__months li { color: var(--color-text-on-dark-muted); border-top-color: var(--kc-line-on-dark); }
.on-dark .season__months .is-prep { background: rgba(232,117,26,0.14); color: #F5B27A; }
.on-dark .season__months .is-heat { background: rgba(255,255,255,0.08); color: var(--color-text-on-dark); border-top-color: var(--kc-navy-100); }
.on-dark .season__legend .is-heat i { background: var(--kc-navy-100); }
@media (max-width: 30em) { .season__months li { font-size: 0.6875rem; padding-inline: 0; } }

/* ---------- 10. Yardımcılar ---------- */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

/* ============================================================
   11. Tema «Чертёж» (varyant 6, seçildi 15 Eylül 2026)
   Koyu üst bilgi/hero/alt bilgi, açık gövde, Manrope. Aşağıdaki
   kurallar 1–8. bölümlerin üzerine yazar; eski v6.css buraya
   taşındı (site/varyantlar/6/ artık yayın dışı).
   ============================================================ */
body { color: #2B3446; background: #fff; }
h1, h2, h3, h4 { color: var(--ink); font-weight: 800; letter-spacing: -0.02em; }
::selection { background: var(--kc-orange); color: #fff; }
.ico { width: 1.75rem; height: 1.75rem; color: var(--kc-orange); flex: none; }
.btn { font-weight: 700; }

/* Üst bilgi koyu */
.site-header { background: var(--d0); box-shadow: 0 1px 0 var(--line); }
.site-nav__list a { color: #C9D3E3; } .site-nav__list a:hover { color: #fff; }
.site-nav__cta { background: var(--kc-orange); color: var(--d0); border-color: var(--kc-orange); font-size: 1.0625rem; }
.site-nav__cta:hover { background: #F5B27A; border-color: #F5B27A; }
.nav-toggle { color: #fff; }
@media (max-width: 74.99em) { .js .site-nav { background: var(--d0); } .site-nav__list a { border-bottom-color: var(--line); } }

/* ===== Hero: blueprint sahnesi ===== */
.hero { position: relative; background: var(--d0); color: #fff; overflow: hidden; isolation: isolate; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(rgba(255,255,255,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px); background-size: 2.5rem 2.5rem; }
.hero__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding-block: var(--space-8); align-items: center; }
@media (min-width: 64em) { .hero__grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); padding-block: var(--space-8) var(--space-9); min-height: 40rem; } }
.hero__label { display: inline-flex; align-items: center; gap: var(--space-3); color: #F5B27A; font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-5); }
.hero__label::before { content: ""; width: 2.5rem; height: 3px; background: var(--kc-orange); }
.hero h1 { color: #fff; font-size: clamp(2.2rem, 4.2vw + 0.6rem, 3.8rem); line-height: 1.04; max-width: 15ch; }
.hero .lead { color: #C9D3E3; margin-top: var(--space-5); max-width: 44ch; }
.hero .btn-row { margin-top: var(--space-6); }
.hero .btn--primary, .phero .btn--primary { background: var(--kc-orange); border-color: var(--kc-orange); color: var(--d0); font-size: 1.1875rem; }
.hero .btn--primary:hover, .phero .btn--primary:hover { background: #F5B27A; border-color: #F5B27A; }
.hero .btn--secondary, .phero .btn--secondary { color: #fff; border-color: rgba(255,255,255,0.5); font-size: 1.1875rem; }
.hero .btn--secondary:hover, .phero .btn--secondary:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

.stage { position: relative; aspect-ratio: 16 / 11; border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0)); overflow: hidden; }
.stage__frame { position: absolute; inset: 0; pointer-events: none; }
.stage__frame::before, .stage__frame::after { content: ""; position: absolute; left: 1rem; right: 1rem; height: 1px; background: var(--line); }
.stage__frame::before { top: 3rem; } .stage__frame::after { bottom: 3rem; }
.stage__title { position: absolute; top: 1rem; left: 1.25rem; font-size: var(--text-xs); color: #8FA1BD; letter-spacing: 0.04em; font-weight: 700; }
.stage__num { position: absolute; top: 1rem; right: 1.25rem; font-size: var(--text-xs); color: #8FA1BD; font-variant-numeric: tabular-nums; }
.stage__drawing { position: absolute; left: 8%; top: 12%; width: 84%; height: 70%; display: flex; align-items: center; justify-content: center; }
.stage__drawing img { width: 100%; height: 100%; object-fit: contain; opacity: .95; animation: drift 14s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate(-1.5%, 0) scale(1); } to { transform: translate(1.5%, -1%) scale(1.04); } }
.scan { position: absolute; top: 3rem; bottom: 3rem; left: 0; width: 2px; background: var(--kc-orange); box-shadow: 0 0 18px 4px rgba(232,117,26,0.55); animation: scan 12s linear infinite; }
.scan::after { content: ""; position: absolute; top: 0; bottom: 0; right: 2px; width: 6rem; background: linear-gradient(90deg, rgba(232,117,26,0), rgba(232,117,26,0.18)); }
@keyframes scan { 0% { left: 0; opacity: 0; } 2% { opacity: 1; } 12% { left: 100%; opacity: 1; } 13% { opacity: 0; } 50% { left: 0; opacity: 0; } 52% { opacity: 1; } 62% { left: 100%; opacity: 1; } 63% { opacity: 0; } 100% { left: 0; opacity: 0; } }
.hot { position: absolute; left: var(--x); top: var(--y); }
.hot .dot { position: absolute; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; color: var(--kc-orange); background: currentColor; animation: dotc 12s steps(1) infinite; animation-delay: var(--d); }
.hot .dot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid currentColor; animation: ring 2.4s ease-out infinite; animation-delay: var(--d); }
@keyframes dotc { 0%,58% { color: var(--kc-orange); } 58%,100% { color: #3DD68C; } }
@keyframes ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3); opacity: 0; } }
.hot .tip { position: absolute; left: 14px; top: -14px; white-space: nowrap; font-size: var(--text-xs); font-weight: 700; padding: 0.3rem 0.6rem; border-radius: var(--radius); background: rgba(11,27,54,0.9); border: 1px solid var(--line); color: #fff; opacity: 0; transform: translateY(6px); }
.hot .tip.before { border-color: rgba(232,117,26,0.7); color: #F5B27A; animation: tipA 12s ease-out infinite; animation-delay: var(--d); }
.hot .tip.after { border-color: rgba(61,214,140,0.8); color: #A8F0C6; animation: tipB 12s ease-out infinite; animation-delay: var(--d); }
@keyframes tipA { 0%,10% { opacity: 0; transform: translateY(6px); } 14%,48% { opacity: 1; transform: none; } 52%,100% { opacity: 0; transform: translateY(-6px); } }
@keyframes tipB { 0%,58% { opacity: 0; transform: translateY(6px); } 64%,96% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.stage__state { position: absolute; left: 1.25rem; bottom: 1rem; display: inline-flex; gap: var(--space-2); font-size: var(--text-xs); font-weight: 700; }
.stage__state span { padding: 0.3rem 0.6rem; border-radius: var(--radius); border: 1px solid var(--line); color: #8FA1BD; }
.stage__state .b { animation: stA 12s steps(1) infinite; } .stage__state .a { animation: stB 12s steps(1) infinite; }
@keyframes stA { 0%,50% { color: #F5B27A; border-color: rgba(232,117,26,0.7); } 50%,100% { color: #8FA1BD; border-color: var(--line); } }
@keyframes stB { 0%,58% { color: #8FA1BD; border-color: var(--line); } 58%,100% { color: #A8F0C6; border-color: rgba(120,220,160,0.7); } }
.stage__can { position: absolute; right: 3%; bottom: 3.2rem; width: 26%; filter: drop-shadow(0 24px 30px rgba(0,0,0,0.5)); animation: bob 5s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.stage__can img { width: 100%; height: auto; }
@media (max-width: 47.99em) { .stage { aspect-ratio: 4 / 3.6; } .stage__drawing { width: 80%; } .stage__can { width: 30%; } .hot .tip { font-size: 0.6875rem; } }

/* ===== Ekipman sekmeleri ===== */
.eq { background: var(--paper); }
.eq__tabs { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-6); }
.eq__tab { position: relative; padding: 0.7rem 1rem 0.9rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius); background: #fff; color: var(--ink); font-weight: 700; font-size: var(--text-sm); cursor: pointer; overflow: hidden; }
.eq__tab[aria-selected="true"] { border-color: var(--kc-navy); background: var(--kc-navy); color: #fff; }
.eq__tab .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--kc-orange); }
.eq__tab[aria-selected="true"] .bar { animation: bar var(--eq-dur, 6s) linear forwards; }
@keyframes bar { to { width: 100%; } }
.eq.paused .eq__tab .bar { animation-play-state: paused; }
.eq__panel { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 64em) { .eq__panel { grid-template-columns: 7fr 5fr; gap: var(--space-8); } }
.eq__fig { position: relative; aspect-ratio: 16 / 10; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.eq__fig img { position: absolute; inset: 8%; width: 84%; height: 84%; object-fit: contain; opacity: 0; transform: scale(.97); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.eq__fig img.on { opacity: 1; transform: none; }
.eq__fig::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(27,58,107,0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(27,58,107,0.06) 1px, transparent 1px); background-size: 2rem 2rem; pointer-events: none; }
.eq__text > div { display: none; } .eq__text > div.on { display: block; animation: fadeup .5s var(--ease-out); }
@keyframes fadeup { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.eq__text h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.eq__prods { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); }
.eq__prods a { display: inline-flex; align-items: center; gap: var(--space-2); padding: 0.35rem 0.7rem 0.35rem 0.35rem; border: 1px solid var(--color-border-strong); border-radius: 999px; background: #fff; text-decoration: none; font-weight: 700; font-size: var(--text-sm); color: var(--ink); }
.eq__prods a img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.eq__prods a:hover { border-color: var(--kc-orange); }

/* ===== Turuncu sayı bandı ===== */
.band { background: var(--kc-orange); color: var(--d0); }
.band__grid { display: grid; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .band__grid { grid-template-columns: repeat(4, 1fr); } }
.band__grid div { padding: var(--space-6) var(--space-5); border-right: 1px solid rgba(11,27,54,0.25); }
.band__grid div:first-child { padding-left: 0; } .band__grid div:last-child { border-right: 0; }
.band strong { display: block; font-size: clamp(2.2rem, 2.6vw + 1rem, 3rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.band span { display: block; margin-top: var(--space-3); font-size: 1rem; font-weight: 600; line-height: 1.35; max-width: 16rem; }

/* ===== Ürün şeridi (koyu) ===== */
.dark { background: var(--d1); color: #C9D3E3; }
.dark h2, .dark h3 { color: #fff; }
.dark .section__head p { color: #C9D3E3; }
.strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(16rem, 1fr); gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); scrollbar-color: var(--kc-orange) var(--d0); }
.strip::-webkit-scrollbar { height: 8px; } .strip::-webkit-scrollbar-thumb { background: var(--kc-orange); border-radius: 4px; } .strip::-webkit-scrollbar-track { background: var(--d0); }
.pcard { scroll-snap-align: start; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: inherit; overflow: hidden; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.pcard:hover { transform: translateY(-6px); border-color: var(--kc-orange); }
.pcard__img { aspect-ratio: 1 / 1; display: grid; place-items: center; background: #fff; padding: var(--space-4); }
.pcard__img img { max-height: 100%; width: auto; max-width: 70%; transition: transform var(--dur-base) var(--ease-out); }
.pcard:hover .pcard__img img { transform: scale(1.04) rotate(-1.5deg); }
.pcard__body { padding: var(--space-4) var(--space-5) var(--space-5); display: grid; gap: var(--space-2); }
.pcard__cat { font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.02em; }
.pcard h3 { font-size: var(--text-lg); color: var(--ink); }
.pcard p { font-size: var(--text-sm); color: var(--kc-steel); max-width: none; }
.strip { scrollbar-color: var(--kc-navy) #E4EAF2; } .strip::-webkit-scrollbar-thumb { background: var(--kc-navy); } .strip::-webkit-scrollbar-track { background: #E4EAF2; }

/* ===== Dört sütun (açık) ===== */
.four { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 48em) { .four { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .four { grid-template-columns: repeat(4, 1fr); gap: var(--space-6); } }
.four div { border-top: 3px solid var(--kc-orange); padding-top: var(--space-4); }
.four .fig { display: block; font-size: var(--text-xl); font-weight: 800; color: var(--ink); line-height: 1.1; margin: var(--space-2) 0 var(--space-3); }
.four h3 { font-size: var(--text-base); color: var(--kc-steel); font-weight: 700; }
.four p { font-size: var(--text-sm); color: var(--kc-steel); max-width: none; }

/* ===== Süreç ===== */
.steps { display: grid; gap: var(--space-5); grid-template-columns: 1fr; counter-reset: st; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-6); } }
.step { counter-increment: st; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); position: relative; }
.step::before { content: counter(st); display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--kc-navy); color: #fff; font-weight: 800; margin-bottom: var(--space-3); }
.step h3 { font-size: var(--text-lg); margin-bottom: var(--space-2); }
.step p { font-size: var(--text-sm); color: var(--kc-steel); max-width: none; }

/* ===== Sektörler ===== */
.sectors { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .sectors { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .sectors { grid-template-columns: repeat(3, 1fr); } }
.sector { display: flex; gap: var(--space-4); align-items: flex-start; padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: inherit; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-base) var(--ease-out); }
.sector:hover { border-color: var(--kc-navy); transform: translateY(-3px); }
.sector h3 { font-size: var(--text-md); margin-bottom: 0.25rem; }
.sector p { font-size: var(--text-sm); color: var(--kc-steel); max-width: none; }
.names { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); font-weight: 700; color: var(--ink); }
.names .now { color: var(--kc-orange-800); }

/* ===== CTA turuncu ===== */
.cta { background: var(--kc-orange); color: var(--d0); border-top: 0; }
.cta h2, .cta p { color: var(--d0); }
.cta .btn--primary { background: var(--d0); color: #fff; border-color: var(--d0); }
.cta .btn--primary:hover { background: var(--d2); border-color: var(--d2); }
.cta .btn--secondary { color: var(--d0); border-color: var(--d0); font-size: 1.1875rem; }
.site-footer { background: var(--d0); }

/* ===== Reveal ===== */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }
html:not(.js) .reveal { opacity: 1; transform: none; }
.section__head::before { background: var(--kc-orange); }

/* ===== Ürünler sayfası ===== */
.phero { background: var(--d0); color: #fff; overflow: hidden; }
.phero__grid { display: grid; gap: var(--space-6); grid-template-columns: 1fr; padding-block: var(--space-8); align-items: center; }
@media (min-width: 64em) { .phero__grid { grid-template-columns: 5fr 7fr; } }
.phero h1 { color: #fff; font-size: clamp(2rem, 3.6vw + 0.6rem, 3.2rem); }
.phero p { color: #C9D3E3; max-width: 46ch; margin-top: var(--space-4); }
.lineup { display: flex; align-items: flex-end; justify-content: center; gap: 6%; }
.lineup img { width: 30%; height: auto; animation: rise .9s var(--ease-out) both; animation-delay: calc(var(--i) * 120ms); }
.lineup img.ibc { width: 52%; }
@keyframes rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); }
.filters button { padding: 0.7rem 1rem; min-height: 2.75rem; border: 1px solid var(--color-border-strong); border-radius: 999px; background: #fff; font-weight: 700; font-size: var(--text-sm); color: var(--ink); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--kc-navy); color: #fff; border-color: var(--kc-navy); }
.pgrid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .pgrid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .pgrid { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.pgrid .pcard.hide { display: none; }
.rule { background: var(--paper); border-left: 4px solid var(--kc-orange); padding: var(--space-5); border-radius: var(--radius); margin-top: var(--space-7); }
.rule h3 { margin-bottom: var(--space-2); }

/* ===== Ürün detay ===== */
.crumbs { font-size: var(--text-sm); color: var(--kc-steel); padding-block: var(--space-4); }
.crumbs a { color: var(--kc-steel); text-decoration: none; } .crumbs a:hover { text-decoration: underline; }
.pd { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; padding-block: var(--space-4) var(--space-8); }
@media (min-width: 64em) { .pd { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }
.pd__media { position: sticky; top: calc(var(--header-h) + var(--space-4)); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-6); display: grid; gap: var(--space-4); }
.pd__main { display: grid; place-items: center; aspect-ratio: 1 / 1.05; }
.pd__main img { max-height: 100%; width: auto; max-width: 62%; animation: rise .8s var(--ease-out) both; }
.pd__main img.ibc { max-width: 96%; }
.pd__thumbs { display: flex; gap: var(--space-2); }
.pd__thumbs button { width: 4.5rem; height: 4.5rem; min-width: 2.75rem; border: 2px solid var(--color-border); border-radius: var(--radius); background: #fff; padding: 0.4rem; cursor: pointer; }
.pd__thumbs button[aria-pressed="true"] { border-color: var(--kc-navy); }
.pd__thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pd__cat { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 700; color: var(--kc-steel); margin-bottom: var(--space-3); }
.pd__cat i { width: 0.75rem; height: 0.75rem; border-radius: 2px; display: inline-block; }
.pd h1 { font-size: clamp(1.9rem, 2.6vw + 0.6rem, 2.8rem); }
.pd .sub { font-size: var(--text-md); color: var(--kc-steel); margin-top: var(--space-2); }
.pd .lead { margin-top: var(--space-5); }
.pd .btn-row { margin-top: var(--space-5); }
.pd h2 { font-size: var(--text-xl); margin-top: var(--space-7); margin-bottom: var(--space-3); }
.benefits { list-style: none; display: grid; gap: var(--space-2); }
.benefits li { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--paper); border-radius: var(--radius); font-size: var(--text-sm); }
.benefits li::before { content: ""; flex: none; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--kc-orange); margin-top: 1px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 14.5-4-4 1.4-1.4 2.6 2.6 6.1-6.1 1.4 1.4-7.5 7.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm-1.5 14.5-4-4 1.4-1.4 2.6 2.6 6.1-6.1 1.4 1.4-7.5 7.5z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat; }
.specs { border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; }
.specs div { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); font-size: var(--text-sm); }
.specs div:nth-child(odd) { background: var(--paper); }
.specs div:last-child { border-bottom: 0; }
.specs b { color: var(--ink); }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tags span { padding: 0.35rem 0.7rem; border: 1px solid var(--color-border-strong); border-radius: 999px; font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.msgs { display: grid; gap: var(--space-3); }
.msgs div { padding: var(--space-4); border-left: 3px solid var(--kc-navy); background: var(--paper); font-size: var(--text-sm); }
.msgs b { display: block; color: var(--ink); margin-bottom: 0.25rem; }
.related { display: grid; gap: var(--space-4); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 48em) { .related { grid-template-columns: repeat(4, 1fr); } }
.related a { display: grid; gap: var(--space-2); text-decoration: none; color: var(--ink); font-weight: 700; font-size: var(--text-sm); text-align: center; padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); }
.related a:hover { border-color: var(--kc-orange); }
.related img { height: 7rem; width: auto; margin: 0 auto; object-fit: contain; }
@media (prefers-reduced-motion: reduce) { .stage *, .lineup img, .pd__main img, .reveal, .eq__tab .bar { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; } .hot .tip.after { display: none; } }

/* ============================================================
   12. Ana sayfa hero B (illüstrasyon + el yazısı açıklama)
   ============================================================ */
/* ===== Ana sayfa hero: illüstrasyon sahneleri (hero B) ===== */
.illu { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: #E9EEF5; box-shadow: 0 30px 60px -30px rgba(0,0,0,.7); }
.illu__scene { position: absolute; inset: 0; opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none; }
.illu__scene.on { opacity: 1; pointer-events: auto; }
.illu__scene img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.illu__scene.on img { animation: kb 12s ease-in-out both alternate; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.06) translate(-1%, -1%); } }
.cap { position: absolute; left: var(--x); top: var(--y); max-width: 34%; font-family: var(--font-hand); font-weight: 700; font-size: clamp(1.1rem, 1.9vw, 1.9rem); line-height: 1.15; color: var(--ink); opacity: 0; transform: translateY(6px); }
.cap.problem { color: #9A4A0A; }
.cap.solution { color: var(--ink); }
.cap .chip { display: inline-flex; align-items: center; gap: .4rem; margin-top: .5rem; padding: .2rem .6rem .2rem .25rem; background: #fff; border: 1.5px solid var(--kc-navy); border-radius: 999px; font-family: var(--font-sans); font-weight: 800; font-size: .8rem; color: var(--ink); }
.cap .chip img { width: 1.6rem; height: 1.6rem; object-fit: contain; }
.on .cap.problem { animation: capA 12s ease-out both; }
.on .cap.solution { animation: capB 12s ease-out both; }
@keyframes capA { 0% { opacity: 0; transform: translateY(6px); } 6%,44% { opacity: 1; transform: none; } 50%,100% { opacity: 0; transform: translateY(-6px); } }
@keyframes capB { 0%,50% { opacity: 0; transform: translateY(6px); } 56%,100% { opacity: 1; transform: none; } }
.pt { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; color: var(--kc-orange); background: currentColor; box-shadow: 0 0 0 3px #fff; opacity: 0; }
.pt::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; animation: ring 2s ease-out infinite; }
.on .pt { animation: ptc 12s steps(1) both; }
@keyframes ptc { 0% { opacity: 0; } 6% { opacity: 1; color: var(--kc-orange); } 50% { color: #2BB673; } 100% { opacity: 1; color: #2BB673; } }
.illu__nav { position: absolute; left: 1rem; bottom: .9rem; display: flex; gap: .4rem; z-index: 2; }
.illu__nav button { width: 2.4rem; height: .5rem; border-radius: 999px; border: 0; background: rgba(27,58,107,.25); cursor: pointer; padding: 0; overflow: hidden; position: relative; }
.illu__nav button[aria-selected="true"]::after { content: ""; position: absolute; inset: 0; width: 0; background: var(--kc-orange); animation: bar 12s linear forwards; }
.illu.paused .illu__nav button[aria-selected="true"]::after, .illu.paused .illu__scene.on img, .illu.paused .cap, .illu.paused .pt { animation-play-state: paused; }
.illu__title { position: absolute; right: 1rem; bottom: .8rem; font-size: var(--text-xs); font-weight: 700; color: var(--ink); background: rgba(255,255,255,.8); padding: .25rem .6rem; border-radius: var(--radius); }
@media (prefers-reduced-motion: reduce) { .illu * { animation: none !important; } .cap { opacity: 1 !important; transform: none !important; } .cap.problem { display: none; } .pt { opacity: 1 !important; } }

/* ============================================================
   13. Hizmetler (/services/ ve kategori sayfaları)
   ============================================================ */
.phero .hero__label::before { content: ""; width: 2.5rem; height: 3px; background: var(--kc-orange); }
.stage--still .stage__drawing img { animation: drift 20s ease-in-out infinite alternate; }
.lineup--one img { width: 34%; }
.crumbs--dark { color: #8FA1BD; padding-block: 0; margin-bottom: var(--space-4); }
.crumbs--dark a { color: #C9D3E3; }
/* Kategori kartları */
.scats { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .scats { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }
.scat { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); border-top: 3px solid var(--kc-orange); }
.scat__top { display: flex; align-items: center; justify-content: space-between; }
.scat__n { font-size: var(--text-sm); font-weight: 700; color: var(--kc-steel); }
.scat h2 { font-size: var(--text-xl); }
.scat h2 a { color: inherit; text-decoration: none; } .scat h2 a:hover { color: var(--kc-orange-700); }
.scat > p { color: var(--kc-steel); max-width: none; }
.scat__ex { list-style: none; display: grid; gap: 0; margin-top: var(--space-2); }
.scat__ex li { padding: var(--space-2) 0; border-top: 1px solid var(--color-border); font-size: var(--text-sm); }
.scat__ex a { color: var(--ink); text-decoration: none; font-weight: 600; } .scat__ex a:hover { text-decoration: underline; }
.scat .link-more { margin-top: auto; padding-top: var(--space-3); }
/* Tablolar */
.table-svc { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: #fff; border: 1px solid var(--color-border); }
.table-svc td:first-child { color: var(--ink); font-weight: 700; min-width: 12rem; }
.table-svc .codes { white-space: nowrap; }
.table-svc a, .svc__body p a, .svc__meta dd a { color: var(--kc-navy); font-weight: 700; text-decoration: none; border-bottom: 1px solid var(--color-border-strong); }
.table-svc a:hover, .svc__body p a:hover, .svc__meta dd a:hover { color: var(--kc-orange-700); border-bottom-color: var(--kc-orange); }
/* Kategori sayfası düzeni */
.svc-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 64em) { .svc-layout { grid-template-columns: 18rem 1fr; gap: var(--space-8); } .svc-toc { position: sticky; top: calc(var(--header-h) + var(--space-4)); } }
.svc-toc h2 { font-size: var(--text-base); margin-bottom: var(--space-3); } .svc-toc h2 span { color: var(--kc-steel); font-weight: 600; }
.svc-toc ol { list-style: none; border-top: 1px solid var(--color-border); }
.svc-toc li { border-bottom: 1px solid var(--color-border); }
.svc-toc a { display: grid; grid-template-columns: 3.25rem 1fr; gap: var(--space-2); padding: var(--space-3) 0; min-height: 2.75rem; align-items: center; font-size: var(--text-sm); color: var(--ink); text-decoration: none; font-weight: 600; }
.svc-toc a span { color: var(--kc-orange-800); font-variant-numeric: tabular-nums; }
.svc-toc a:hover { color: var(--kc-orange-700); }
.svc-group + .svc-group { margin-top: var(--space-7); }
.svc-group__title { font-size: var(--text-xl); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 3px solid var(--kc-orange); }
.svc-group__title span { color: var(--kc-steel); font-weight: 600; }
.svc { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-5); scroll-margin-top: calc(var(--header-h) + var(--space-4)); }
.svc + .svc { margin-top: var(--space-4); }
.svc__head { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-3); }
.svc__code { flex: none; font-size: var(--text-xs); font-weight: 800; color: var(--kc-orange-800); letter-spacing: 0.04em; font-variant-numeric: tabular-nums; padding: 0.2rem 0.45rem; border: 1px solid var(--kc-orange); border-radius: 3px; }
.svc h3 { font-size: var(--text-lg); }
.svc__body { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
.svc__body p { max-width: 72ch; }
.svc__result { margin-top: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--paper); border-left: 3px solid var(--kc-navy); font-size: var(--text-sm); max-width: none !important; }
.svc__result b { color: var(--ink); }
.svc__meta { display: grid; gap: 0; font-size: var(--text-sm); border-top: 1px solid var(--color-border); }
.svc__meta > div { display: grid; grid-template-columns: 1fr; gap: var(--space-1); padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); }
@media (min-width: 48em) { .svc__meta > div { grid-template-columns: 11rem 1fr; gap: var(--space-3); } }
.svc__meta dt { color: var(--kc-steel); font-weight: 600; }
.svc__meta dd { color: var(--ink); }
.svc-now { margin-top: var(--space-4); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--kc-orange); font-size: var(--text-sm); }
.phero .svc-now { color: #F5B27A; }
.phero p a { color: #fff; font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.5); }
.phero p a:hover { border-bottom-color: var(--kc-orange); }

/* ============================================================
   14. Sektör çözümleri (/solutions/ ve sektör sayfaları)
   ============================================================ */
.sectors--2 { grid-template-columns: 1fr; }
@media (min-width: 48em) { .sectors--2 { grid-template-columns: repeat(2, 1fr); } }
.phero__who { font-size: var(--text-sm) !important; color: #C9D3E3; margin-top: var(--space-4) !important; }
.phero__who b { color: #fff; }
.sol-grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 64em) { .sol-grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }
.pains { list-style: none; display: grid; gap: var(--space-3); }
.pains li { position: relative; padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) + 1.25rem); background: var(--paper); border-radius: var(--radius); font-size: var(--text-sm); color: var(--ink); }
.pains li::before { content: ""; position: absolute; left: var(--space-4); top: calc(var(--space-3) + 0.45rem); width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--kc-orange); }
.svcl-list { display: grid; gap: var(--space-2); }
.svcl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-3) var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); text-decoration: none; color: var(--ink); transition: border-color var(--dur-fast) var(--ease-out); }
.svcl:hover { border-color: var(--kc-orange); }
.svcl .svc__code { margin-top: 0.15rem; }
.svcl b { display: block; font-size: var(--text-base); font-weight: 700; }
.svcl small { display: block; font-size: var(--text-xs); color: var(--kc-steel); margin-top: 0.15rem; }
.pmsgs { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .pmsgs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .pmsgs { grid-template-columns: repeat(3, 1fr); } }
.pmsg { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--space-4); padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); }
.pmsg__img { display: grid; place-items: center; aspect-ratio: 1 / 1.3; }
.pmsg__img img { max-height: 100%; width: auto; max-width: 100%; }
.pmsg__name { display: block; font-weight: 800; color: var(--ink); text-decoration: none; font-size: var(--text-md); }
.pmsg__name:hover { color: var(--kc-orange-700); }
.pmsg__sub { font-size: var(--text-xs); color: var(--kc-steel); margin-top: 0.15rem; max-width: none; }
.pmsg__msg { font-size: var(--text-sm); color: var(--ink); margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); max-width: none; }
.refs2 { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 48em) { .refs2 { grid-template-columns: repeat(2, 1fr); } }
.refs2 h3 { font-size: var(--text-base); color: var(--kc-steel); margin-bottom: var(--space-2); }
.refs2 li { font-weight: 700; color: var(--ink); font-size: var(--text-sm); }

/* ============================================================
   15. О компании, Проекты, Документация, Контакты
   ============================================================ */
.pillars { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 64em) { .pillars { grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } }
.pillar { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); border-top: 3px solid var(--kc-orange); }
.pillar__label { font-size: var(--text-xs); font-weight: 700; color: var(--kc-steel); letter-spacing: 0.04em; text-transform: uppercase; margin-top: var(--space-2); }
.pillar h3 { font-size: var(--text-lg); }
.pillar p { font-size: var(--text-sm); color: var(--kc-steel); max-width: none; }
.pillar .link-more { margin-top: auto; padding-top: var(--space-2); }
.tl { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .tl { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .tl { grid-template-columns: repeat(4, 1fr); gap: var(--space-5); } }
.tl__item { position: relative; padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); }
.tl__year { display: block; font-size: var(--text-2xl); font-weight: 800; color: var(--kc-orange); line-height: 1; margin-bottom: var(--space-3); letter-spacing: -0.02em; }
.tl__item h3 { font-size: var(--text-md); margin-bottom: var(--space-2); }
.tl__item p { font-size: var(--text-sm); color: var(--kc-steel); max-width: none; }
.four--plain h3 { color: var(--ink); font-size: var(--text-md); margin-bottom: var(--space-2); }
.proofs li { font-size: var(--text-sm); } .proofs b { color: var(--ink); }
.refs { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .refs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .refs { grid-template-columns: repeat(3, 1fr); } }
.ref { padding: var(--space-5); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); }
.ref--now { border-color: var(--kc-orange); border-width: 2px; }
.ref__sector { display: block; font-size: var(--text-xs); font-weight: 700; color: var(--kc-steel); letter-spacing: 0.03em; margin-bottom: var(--space-2); }
.ref--now .ref__sector { color: var(--kc-orange-800); }
.ref h3 { font-size: var(--text-md); }
.ref p { font-size: var(--text-sm); color: var(--kc-steel); margin-top: var(--space-2); max-width: none; }
.refs2--3 { grid-template-columns: 1fr; }
@media (min-width: 48em) { .refs2--3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .refs2--3 { grid-template-columns: repeat(3, 1fr); } }
.geo { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); font-size: var(--text-sm); color: var(--kc-steel); }
.geo b { display: block; color: var(--ink); font-size: var(--text-lg); }
.docs { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 48em) { .docs { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64em) { .docs { grid-template-columns: repeat(3, 1fr); } }
.doc { display: grid; grid-template-columns: 5rem 1fr; gap: var(--space-4); padding: var(--space-4); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); }
.doc__img { display: grid; place-items: center; aspect-ratio: 1 / 1.3; }
.doc__img img { max-height: 100%; width: auto; max-width: 100%; }
.doc h3 { font-size: var(--text-md); margin-top: 0.15rem; }
.doc p { font-size: var(--text-xs); color: var(--kc-steel); margin-top: 0.15rem; max-width: none; }
.doc__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-3); }
.btn--sm { padding: 0.5rem 0.9rem; font-size: var(--text-sm); min-height: 0; }
.phero--short { padding-block: var(--space-7) var(--space-8); }
.phero--short h1 { color: #fff; font-size: clamp(1.9rem, 3vw + 0.6rem, 2.8rem); max-width: 22ch; }
.phero--short p { color: #C9D3E3; max-width: 60ch; margin-top: var(--space-4); }
.contact-grid { display: grid; gap: var(--space-7); grid-template-columns: 1fr; align-items: start; }
@media (min-width: 64em) { .contact-grid { grid-template-columns: 5fr 7fr; gap: var(--space-8); } }
.contact-info h2 { font-size: var(--text-xl); margin-bottom: var(--space-4); }
.contact-info address { font-style: normal; display: grid; gap: var(--space-3); margin-bottom: var(--space-6); }
.contact-info address b { color: var(--ink); }
.contact-info h3 { font-size: var(--text-base); margin-bottom: var(--space-2); }
.contact-info .list-rule li { font-size: var(--text-sm); color: var(--kc-steel); }
.form { padding: var(--space-6); background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); display: grid; gap: var(--space-4); }
.form h2 { font-size: var(--text-xl); }
.form__type { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.form__type legend { font-size: var(--text-sm); font-weight: 700; color: var(--kc-steel); margin-bottom: var(--space-2); }
.form__type label { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--ink); }
.form__row { display: grid; gap: var(--space-1); }
.form__row label { font-size: var(--text-sm); font-weight: 700; color: var(--ink); }
.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form select, .form textarea { width: 100%; padding: 0.7rem 0.85rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius); font: inherit; font-size: var(--text-base); color: var(--ink); background: #fff; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--kc-orange); outline-offset: 1px; border-color: var(--kc-navy); }
.form__2 { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 40em) { .form__2 { grid-template-columns: 1fr 1fr; } }
.form__check { display: flex; gap: var(--space-2); align-items: flex-start; font-size: var(--text-sm); color: var(--kc-steel); }
.form__check input { margin-top: 0.25rem; }
.form button { justify-self: start; }
.form__note { font-size: var(--text-xs); color: var(--kc-steel); }
.req { color: var(--kc-orange-800); font-weight: 800; }
.phero__who a { color: #fff; }

/* ============================================================
   16. Ana sayfa: illüstrasyon kartları (2×2). Döngü 10 s: sorun (turuncu) → çözüm (yeşil);
   görselde yavaş yakınlaşma, noktalar renk değiştirir, alttaki satırlar sırayla vurgulanır.
   ============================================================ */
.scenes { display: grid; gap: var(--space-5); grid-template-columns: 1fr; }
@media (min-width: 48em) { .scenes { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); } }
.scene { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; --cyc: 10s; }
.scene__fig { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #E9EEF5; }
.scene__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.in .scene__fig img { animation: kb 14s ease-in-out infinite alternate; animation-delay: var(--d); }
.scene .pt { position: absolute; left: var(--x); top: var(--y); width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; color: var(--kc-orange); background: currentColor; box-shadow: 0 0 0 3px #fff; opacity: 1; }
.scene .pt::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid currentColor; animation: ring 2s ease-out infinite; }
.scene.in .pt { animation: ptc2 var(--cyc) steps(1) infinite; animation-delay: var(--d); }
@keyframes ptc2 { 0%,49.9% { color: var(--kc-orange); } 50%,100% { color: #2BB673; } }
.scene__state { position: absolute; right: .75rem; bottom: .75rem; display: inline-flex; gap: .3rem; font-size: var(--text-xs); font-weight: 700; }
.scene__state span { padding: .25rem .55rem; border-radius: var(--radius); background: rgba(255,255,255,.85); color: var(--kc-steel); border: 1px solid transparent; }
.in .scene__state .b { animation: stB2 var(--cyc) steps(1) infinite; animation-delay: var(--d); }
.in .scene__state .a { animation: stA2 var(--cyc) steps(1) infinite; animation-delay: var(--d); }
@keyframes stB2 { 0%,49.9% { color: #fff; background: var(--kc-orange); } 50%,100% { color: var(--kc-steel); background: rgba(255,255,255,.85); } }
@keyframes stA2 { 0%,49.9% { color: var(--kc-steel); background: rgba(255,255,255,.85); } 50%,100% { color: #fff; background: #2BB673; } }
.scene__body { padding: var(--space-5); }
.scene h3 { font-size: var(--text-lg); margin-bottom: var(--space-3); }
.scene p { font-size: var(--text-sm); max-width: none; transition: opacity .4s; }
.scene__problem { color: var(--ink); padding: var(--space-2) var(--space-4); border-left: 3px solid var(--kc-orange); border-radius: 0 var(--radius) var(--radius) 0; }
.scene__solution { color: var(--ink); margin-top: var(--space-3); padding: var(--space-2) var(--space-4); border-left: 3px solid #2BB673; border-radius: 0 var(--radius) var(--radius) 0; }
.in .scene__problem { animation: rowA var(--cyc) ease-in-out infinite; animation-delay: var(--d); }
.in .scene__solution { animation: rowB var(--cyc) ease-in-out infinite; animation-delay: var(--d); }
@keyframes rowA { 0%,45% { background: var(--kc-orange-100); opacity: 1; } 55%,100% { background: transparent; opacity: .55; } }
@keyframes rowB { 0%,45% { background: transparent; opacity: .55; } 55%,100% { background: #E3F5EC; opacity: 1; } }
.scene:hover .scene__fig img, .scene:hover .pt, .scene:hover .scene__state span, .scene:hover .scene__problem, .scene:hover .scene__solution { animation-play-state: paused; }
.scene__solution a { color: var(--kc-navy); font-weight: 800; text-decoration: none; border-bottom: 1px solid var(--color-border-strong); }
.scene__solution a:hover { color: var(--kc-orange-700); border-bottom-color: var(--kc-orange); }
@media (prefers-reduced-motion: reduce) { .scene * { animation: none !important; } .scene__problem, .scene__solution { opacity: 1 !important; } }

/* ============================================================
   17. О компании: küre animasyonu (görsel + SVG katmanı) + tarihçe
   ============================================================ */
.hist { display: grid; gap: var(--space-6); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 64em) { .hist { grid-template-columns: 7fr 5fr; gap: var(--space-8); } }
.hist .tl { grid-template-columns: 1fr; gap: var(--space-4); }
.hist__globe { background: #1F2837; border-radius: var(--radius); padding: 0; overflow: hidden; }
.globe { position: relative; width: 100%; max-width: 46rem; margin: 0 auto; font-family: var(--font-sans); }
.globe img { display: block; width: 100%; height: auto; }
.globe__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.globe__arc { fill: none; stroke: var(--kc-orange); stroke-width: 0.45; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.globe__pin { opacity: 0; }
.globe__plate { fill: rgba(11,27,54,0.82); stroke: rgba(255,255,255,0.12); stroke-width: 0.15; }
.globe__marker { fill: var(--kc-orange); stroke: #1F2837; stroke-width: 0.45; }
.globe__hole { fill: #fff; }
.globe__ring { fill: none; stroke: var(--kc-orange); stroke-width: 0.35; opacity: 0; transform-box: fill-box; transform-origin: center; }
.globe__year { font-size: 4.2px; font-weight: 800; fill: #fff; letter-spacing: -0.01em; }
.globe__city { font-size: 2.5px; font-weight: 600; fill: #C9D3E3; }
.in .globe__pin--tr { animation: pinIn .5s var(--ease-out) .2s forwards; }
.in .globe__arc--1 { animation: arcIn 1.1s ease-in-out .7s forwards; }
.in .globe__pin--kz { animation: pinIn .5s var(--ease-out) 1.7s forwards; }
.in .globe__arc--2 { animation: arcIn 1.1s ease-in-out 2.2s forwards; }
.in .globe__pin--ae { animation: pinIn .5s var(--ease-out) 3.2s forwards; }
.in .globe__pin .globe__ring { animation: ringOut 2.4s ease-out 3.8s infinite; }
@keyframes pinIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes arcIn { to { stroke-dashoffset: 0; } }
@keyframes ringOut { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(3); } }
@media (prefers-reduced-motion: reduce) { .globe__pin { opacity: 1; } .globe__arc { stroke-dashoffset: 0; } .globe__ring { display: none; } }
html:not(.js) .globe__pin { opacity: 1; } html:not(.js) .globe__arc { stroke-dashoffset: 0; }

/* Form durumu ve bal küpü (honeypot) */
.form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__status { padding: var(--space-3) var(--space-4); border-radius: var(--radius); font-size: var(--text-sm); font-weight: 600; }
.form__status--ok { background: #E3F5EC; color: #1E6B3A; border-left: 3px solid #2BB673; }
.form__status--err { background: var(--kc-orange-100); color: var(--kc-orange-800); border-left: 3px solid var(--kc-orange); }