/* Pazarlama sitesi — tek stil dosyası. Dış font/CDN yok; satır içi stil yok (CSP). */

:root {
  /* Renk belirteçleri — tek tema: koyu endüstriyel teknoloji (patron kararı 2026-10-01) */
  color-scheme: dark;
  --bg: #070a0d;
  --surface: #0d1217;
  --sunk: #121a21;
  --ink: #e9eef2;
  --ink-2: #c3ccd4;
  --muted: #8b98a5;
  --rule: #1b252e;
  --rule-2: #2b3945;
  --accent: #ff5b1f;
  --accent-ink: #160700;
  --accent-soft: #2a140b;
  --hata: #ff7a4d;
  --cyan: #3ad6f0;
  --cyan-soft: #0a2a33;
  --ok: #3ddc84;
  --ok-soft: #0e2a1b;
  --warn: #f2b94b;
  --warn-soft: #2e2410;
  --pad: #c98f72;
  --pad-edge: #8f604b;
  --steel: #5d6b78;
  --steel-2: #23303b;
  --print: #7aa2ff;
  --focus: #3ad6f0;
  --glow: 0 0 0 1px color-mix(in srgb, var(--cyan) 22%, transparent), 0 18px 60px -30px color-mix(in srgb, var(--cyan) 55%, transparent);
  --shadow: 0 1px 0 rgba(0, 0, 0, .4), 0 24px 60px -36px rgba(0, 0, 0, .9);

  --f-sans: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --f-mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, monospace;

  --r: 6px;
  --r-sm: 3px;
  --gutter: 16px;
  --max: 1200px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 1rem/1.6 var(--f-sans);
  font-feature-settings: "tnum" 0;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img, svg { max-width: 100%; }
h1, h2, h3, h4 { font-family: var(--f-display); line-height: 1.15; margin: 0; letter-spacing: -.012em; font-weight: 650; }
p { margin: 0 0 1em; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--r-sm); }
.num, .tnum { font-variant-numeric: tabular-nums; }
.mono { font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .02em; }
.muted { color: var(--muted); }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

.atla {
  position: absolute; left: 8px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--bg); padding: .5rem .75rem; border-radius: var(--r);
}
.atla:focus { top: 8px; }

.kap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 24px; } }
@media (min-width: 1100px) { :root { --gutter: 32px; } }

/* ---------- Üst şerit ---------- */
.ust {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  border-bottom: 1px solid var(--rule);
}
@supports (backdrop-filter: blur(8px)) {
  .ust { backdrop-filter: saturate(1.2) blur(8px); }
}
.ust-ic { display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; flex-wrap: wrap; }
.marka { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-weight: 650; font-family: var(--f-display); letter-spacing: -.01em; }
.marka:hover { color: inherit; }
.marka svg { width: 1.5rem; height: 1.5rem; flex: none; }
.marka-ad { font-size: 1rem; }
.marka-ek { font-family: var(--f-mono); font-size: .6875rem; color: var(--muted); font-weight: 400; letter-spacing: .04em; text-transform: uppercase; border-left: 1px solid var(--rule-2); padding-left: .55rem; }
.kayit-c { fill: none; stroke: currentColor; stroke-width: 1.4; }
.kayit-n { fill: var(--accent); }

.menu-dugme {
  margin-left: auto; display: none;
  background: transparent; color: var(--ink); border: 1px solid var(--rule-2); border-radius: var(--r);
  font: 500 .875rem/1 var(--f-sans); padding: .55rem .7rem; cursor: pointer; min-height: 2.5rem;
}
.menu-dugme .cizgi { display: inline-block; width: 14px; height: 9px; margin-right: .45rem; vertical-align: middle;
  background: linear-gradient(currentColor, currentColor) 0 0 / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) 0 50% / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) 0 100% / 100% 1.5px no-repeat; }
.nav { display: flex; flex-wrap: wrap; gap: .1rem .25rem; margin-left: auto; align-items: center; }
.nav a {
  text-decoration: none; font-size: .9rem; padding: .45rem .55rem; border-radius: var(--r); color: var(--ink-2);
  position: relative;
}
.nav a:hover { color: var(--ink); background: var(--sunk); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .15rem; height: 2px; background: var(--accent);
}
.nav .btn { margin-left: .35rem; }

.js .menu-dugme { display: inline-flex; align-items: center; }
.js .nav { display: none; width: 100%; flex-direction: column; align-items: stretch; padding: .25rem 0 .9rem; border-top: 1px solid var(--rule); }
.js .nav.acik { display: flex; }
.js .nav a { padding: .7rem .25rem; border-bottom: 1px solid var(--rule); border-radius: 0; }
.js .nav a[aria-current="page"]::after { left: 0; right: auto; top: .8rem; bottom: .8rem; width: 2px; height: auto; }
.js .nav a[aria-current="page"] { padding-left: .75rem; }
.js .nav .btn { margin: .75rem 0 0; justify-content: center; border-bottom: 0; }
@media (min-width: 1080px) {
  .js .menu-dugme { display: none; }
  .js .nav, .js .nav.acik { display: flex; width: auto; flex-direction: row; align-items: center; padding: 0; border: 0; }
  .js .nav a { padding: .45rem .55rem; border: 0; border-radius: var(--r); }
  .js .nav a[aria-current="page"] { padding-left: .55rem; }
  .js .nav a[aria-current="page"]::after { left: .55rem; right: .55rem; top: auto; bottom: .15rem; width: auto; height: 2px; }
  .js .nav .btn { margin: 0 0 0 .35rem; }
}

/* ---------- Düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem; justify-content: center;
  font: 600 .9375rem/1.2 var(--f-sans); text-decoration: none; cursor: pointer;
  padding: .7rem 1rem; min-height: 2.75rem; border-radius: var(--r);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease;
}
.btn:hover { color: var(--accent-ink); background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }
.btn:active { transform: translateY(1px); }
.btn-ince { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn-ince:hover { color: var(--ink); background: var(--sunk); }
.btn-wa { background: transparent; color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, var(--rule)); }
.btn-wa:hover { color: var(--ok); background: var(--ok-soft); }
.btn .ok { transition: transform .15s ease; }
.btn:hover .ok { transform: translateX(3px); }
.nav .btn { padding: .5rem .8rem; min-height: 2.25rem; font-size: .875rem; }
.nav .btn:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); color: var(--accent-ink); }

/* ---------- Bölüm başlıkları ---------- */
.bolum { padding-block: 3.5rem; border-top: 1px solid var(--rule); }
.bolum:first-of-type { border-top: 0; }
@media (min-width: 900px) { .bolum { padding-block: 5rem; } }
.bolum-bas { display: grid; gap: .75rem; margin-bottom: 2rem; max-width: 46rem; }
.etiket {
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: .55rem;
}
.etiket::before { content: ""; width: 10px; height: 10px; flex: none;
  background: linear-gradient(var(--accent), var(--accent)) 50% 0 / 1.5px 100% no-repeat,
              linear-gradient(var(--accent), var(--accent)) 0 50% / 100% 1.5px no-repeat; }
.bolum-bas h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); }
.giris { font-size: 1.0625rem; color: var(--ink-2); max-width: 42rem; }

/* Sayfa başlığı (iç sayfalar) */
.sayfa-bas { padding-block: 2.75rem 2.25rem; border-bottom: 1px solid var(--rule); position: relative; overflow: hidden; }
.sayfa-bas h1 { font-size: clamp(1.875rem, 1.3rem + 2.4vw, 3rem); max-width: 22ch; margin-top: .75rem; }
.sayfa-bas .giris { margin-top: 1rem; margin-bottom: 0; }
.cetvel { height: 12px; margin-top: 2rem; border-bottom: 1px solid var(--rule-2);
  background:
    repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 50px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 10px) 0 100% / 100% 5px no-repeat; }

/* ---------- Kahraman ---------- */
.kahraman { padding-block: 2.5rem 0; }
.kahraman h1 { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.6rem); letter-spacing: -.025em; margin-top: 1rem; max-width: 16ch; }
.kahraman h1 em { font-style: normal; color: var(--accent); }
.kahraman .giris { margin-top: 1.25rem; }
.eylem { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }

.tezgah {
  position: relative; border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r);
  box-shadow: var(--shadow);
}
.tezgah svg { display: block; width: 100%; height: auto; }
.tezgah-alt {
  display: flex; flex-wrap: wrap; gap: .25rem 1rem; justify-content: space-between;
  border-top: 1px solid var(--rule); padding: .55rem .8rem; color: var(--muted);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .03em;
}
.tezgah-alt b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.kose { position: absolute; width: 14px; height: 14px; pointer-events: none;
  background: linear-gradient(var(--rule-2), var(--rule-2)) 50% 0 / 1px 100% no-repeat,
              linear-gradient(var(--rule-2), var(--rule-2)) 0 50% / 100% 1px no-repeat; }
.kose.k1 { left: -7px; top: -7px; } .kose.k2 { right: -7px; top: -7px; }
.kose.k3 { left: -7px; bottom: -7px; } .kose.k4 { right: -7px; bottom: -7px; }

/* SVG çizim belirteçleri */
.s-zemin { fill: var(--surface); }
.s-cizgi { fill: none; stroke: var(--rule-2); stroke-width: 1; }
.s-ince { fill: none; stroke: var(--rule-2); stroke-width: .75; stroke-dasharray: 3 3; }
.s-govde { fill: var(--sunk); stroke: var(--ink-2); stroke-width: 1.2; }
.s-celik { fill: var(--steel-2); stroke: var(--ink-2); stroke-width: 1.2; }
.s-koyu { fill: var(--ink-2); }
.s-tampon { fill: var(--pad); stroke: var(--pad-edge); stroke-width: 1.2; }
.s-tampon-isik { fill: none; stroke: color-mix(in srgb, var(--surface) 70%, transparent); stroke-width: 2; stroke-linecap: round; }
.s-murekkep { fill: var(--accent); }
.s-kazi { fill: none; stroke: var(--ink-2); stroke-width: 1; }
.s-yazi { fill: var(--muted); font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; }
.s-yazi-k { fill: var(--ink); font-family: var(--f-mono); font-size: 10px; font-weight: 600; }
.s-isaret { fill: none; stroke: var(--accent); stroke-width: 1; }
.s-kalem { fill: var(--surface); stroke: var(--ink-2); stroke-width: 1.2; }
.s-kalem-uc { fill: var(--sunk); stroke: var(--ink-2); stroke-width: 1.2; }
.s-katman { stroke: var(--rule-2); stroke-width: .8; }
.s-aparat { fill: var(--cyan-soft); stroke: var(--cyan); stroke-width: 1.2; }
.s-dolgu-desen { fill: url(#katman); }

/* Kahraman animasyonu: tampon klişeden mürekkep alır, kaleme basar. 6.4 sn döngü. */
.an * { transform-box: fill-box; }
.an .pad-x { transform: translateX(378px); }
.an .pad-y { transform: translateY(166px); }
.an .pad-s { transform-origin: 50% 100%; }
.an .kap-x { transform: translateX(-74px); }
.an .klise-murekkep { opacity: .9; }
.an .tampon-iz { opacity: 0; }
.an .kalem-logo { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .an.oynuyor .pad-x { animation: padX 6.4s cubic-bezier(.55, 0, .3, 1) infinite; }
  .an.oynuyor .pad-y { animation: padY 6.4s cubic-bezier(.5, 0, .25, 1) infinite; }
  .an.oynuyor .pad-s { animation: padS 6.4s ease-in-out infinite; }
  .an.oynuyor .kap-x { animation: kapX 6.4s cubic-bezier(.6, 0, .3, 1) infinite; }
  .an.oynuyor .klise-murekkep { animation: kliseM 6.4s linear infinite; }
  .an.oynuyor .tampon-iz { animation: tamponIz 6.4s linear infinite; }
  .an.oynuyor .kalem-logo { animation: kalemLogo 6.4s linear infinite; }
  .an.durdu * { animation-play-state: paused !important; }
}
@keyframes padX {
  0%, 44% { transform: translateX(156px); }
  56%, 80% { transform: translateX(378px); }
  94%, 100% { transform: translateX(156px); }
}
@keyframes padY {
  0%, 22% { transform: translateY(166px); }
  29%, 33% { transform: translateY(252px); }
  41%, 57% { transform: translateY(166px); }
  64%, 69% { transform: translateY(238px); }
  77%, 100% { transform: translateY(166px); }
}
@keyframes padS {
  0%, 28% { transform: scale(1, 1); }
  30.5%, 32.5% { transform: scale(1.14, .8); }
  35%, 63% { transform: scale(1, 1); }
  65.5%, 68% { transform: scale(1.14, .8); }
  71%, 100% { transform: scale(1, 1); }
}
@keyframes kapX {
  0%, 9% { transform: translateX(0); }
  19%, 46% { transform: translateX(-74px); }
  58%, 100% { transform: translateX(0); }
}
@keyframes kliseM {
  0%, 12% { opacity: 0; }
  18%, 30% { opacity: .9; }
  32.5%, 100% { opacity: 0; }
}
@keyframes tamponIz {
  0%, 30.5% { opacity: 0; }
  32%, 66% { opacity: .95; }
  68.5%, 100% { opacity: 0; }
}
@keyframes kalemLogo {
  0%, 2% { opacity: 1; }
  8%, 66% { opacity: 0; }
  68%, 100% { opacity: 1; }
}

/* ---------- Ölçü şeridi ---------- */
.olcu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--rule); margin-top: 3rem; }
.olcu > div { padding: 1.1rem 1rem 1.2rem 0; border-right: 1px solid var(--rule); }
.olcu > div:nth-child(2n) { border-right: 0; padding-left: 1rem; }
.olcu > div:nth-child(-n+2) { border-bottom: 1px solid var(--rule); }
@media (min-width: 760px) {
  .olcu { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .olcu > div { border-right: 1px solid var(--rule); padding-left: 1.25rem; border-bottom: 0 !important; }
  .olcu > div:first-child { padding-left: 0; }
  .olcu > div:nth-child(2n) { border-right: 1px solid var(--rule); padding-left: 1.25rem; }
  .olcu > div:last-child { border-right: 0; }
}
.olcu dt { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.olcu dd { margin: .3rem 0 0; font: 650 clamp(1.5rem, 1.1rem + 1.5vw, 2.25rem)/1.1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.olcu dd small { font: 400 .875rem/1.4 var(--f-sans); color: var(--muted); display: block; letter-spacing: 0; margin-top: .25rem; }

/* ---------- Tablolar ---------- */
.tablo-kap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); }
.tablo { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tablo th, .tablo td { text-align: left; padding: .7rem .85rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.tablo thead th { font-family: var(--f-mono); font-size: .72rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); background: var(--sunk); white-space: nowrap; }
.tablo tbody tr:last-child > * { border-bottom: 0; }
.tablo tbody th { font-weight: 600; }
.tablo td.sag, .tablo th.sag { text-align: right; }
.tablo .num { white-space: nowrap; }
.tablo .biz { background: color-mix(in srgb, var(--accent-soft) 55%, transparent); }
.tablo thead .biz { color: var(--accent); background: var(--accent-soft); }

/* Karşılaştırma: dar ekranda yığılan satırlar */
@media (max-width: 640px) {
  .yigin thead { display: none; }
  .yigin, .yigin tbody, .yigin tr, .yigin th, .yigin td { display: block; width: 100%; }
  .yigin tr { border-bottom: 1px solid var(--rule); padding: .4rem 0; }
  .yigin tbody tr:last-child { border-bottom: 0; }
  .yigin th, .yigin td { border: 0; padding: .25rem .85rem; }
  .yigin td::before { content: attr(data-b); display: block; font-family: var(--f-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
  .yigin .biz { background: transparent; }
  .yigin td.biz { border-left: 2px solid var(--accent); }
}

/* ---------- Durum işareti (hap değil: kare nokta + metin) ---------- */
.durum { display: inline-flex; align-items: center; gap: .4rem; font-size: .8125rem; font-weight: 600; white-space: nowrap; }
.durum::before { content: ""; width: 8px; height: 8px; background: currentColor; border-radius: 1px; flex: none; }
.durum.uygun { color: var(--ok); }
.durum.secili { color: var(--warn); }
.durum.yonlendir { color: var(--muted); }

/* ---------- Canlı takip örnek panosu ---------- */
.takip-duzen { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .takip-duzen { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 3rem; } }
.madde { list-style: none; padding: 0; margin: 1.25rem 0 0; border-top: 1px solid var(--rule); }
.madde li { padding: .8rem 0 .8rem 1.6rem; border-bottom: 1px solid var(--rule); position: relative; }
.madde li::before { content: ""; position: absolute; left: .1rem; top: 1.25rem; width: .7rem; height: 2px; background: var(--accent); }
.madde b { display: block; font-weight: 600; }
.madde span { color: var(--muted); font-size: .9375rem; }

.pano { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.pano-ust { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem .85rem; border-bottom: 1px solid var(--rule); background: var(--sunk); flex-wrap: wrap; }
.pano-ust .mono { color: var(--muted); }
.ornek-damga {
  font-family: var(--f-mono); font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent); border: 1px dashed var(--accent); padding: .15rem .45rem; border-radius: var(--r-sm);
}
.pano-govde { padding: 1rem .85rem 1.1rem; }
@media (min-width: 560px) { .pano-govde { padding: 1.25rem 1.25rem 1.35rem; } }
.is-bas { display: flex; justify-content: space-between; gap: .5rem 1rem; flex-wrap: wrap; align-items: baseline; }
.is-bas h3 { font-size: 1.125rem; }
.is-bas .mono { color: var(--muted); }
.canli { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--f-mono); font-size: .72rem; color: var(--ok); letter-spacing: .06em; text-transform: uppercase; }
.canli::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
@media (prefers-reduced-motion: no-preference) { .canli::before { animation: nabiz 1.8s ease-in-out infinite; } }
@keyframes nabiz { 50% { opacity: .25; } }

.ilerleme { margin-top: 1.1rem; }
.ilerleme-sayi { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ilerleme-sayi strong { font: 650 clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem)/1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

.ilerleme-sayi .yuzde { font-family: var(--f-mono); font-size: .875rem; font-variant-numeric: tabular-nums; }
.cubuk { position: relative; height: 10px; margin-top: .65rem; background: var(--sunk); border: 1px solid var(--rule); border-radius: var(--r-sm); overflow: hidden; }
.cubuk i { position: absolute; inset: 0 auto 0 0; width: var(--oran, 0%); background: var(--accent); transition: width .9s cubic-bezier(.3, .7, .2, 1); }
.cubuk i::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--surface) 35%, transparent) 9px 10px); }
.cubuk-olcek { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: .68rem; color: var(--muted); margin-top: .3rem; font-variant-numeric: tabular-nums; }

.metrik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 1.1rem 0 0; border-top: 1px solid var(--rule); }
.metrik > div { padding: .7rem .5rem .7rem 0; border-bottom: 1px solid var(--rule); }
.metrik > div:nth-child(2n) { padding-left: .75rem; border-left: 1px solid var(--rule); }
@media (min-width: 560px) {
  .metrik { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metrik > div { padding-left: .75rem; border-left: 1px solid var(--rule); }
  .metrik > div:nth-child(3n+1) { padding-left: 0; border-left: 0; }
  .metrik > div:nth-child(2n) { border-left: 1px solid var(--rule); padding-left: .75rem; }
  .metrik > div:nth-child(3n+1):nth-child(2n) { padding-left: 0; border-left: 0; }
}
.metrik dt { font-size: .75rem; color: var(--muted); }
.metrik dd { margin: .15rem 0 0; font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1rem; }
.metrik .vurgu dd { color: var(--accent); }

.asamalar { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
.asamalar li { font-size: .68rem; font-family: var(--f-mono); color: var(--muted); padding-top: .45rem; border-top: 3px solid var(--rule); letter-spacing: .02em; min-width: 0; overflow-wrap: anywhere; }
.asamalar li.tamam { border-top-color: var(--ink-2); color: var(--ink-2); }
.asamalar li.simdi { border-top-color: var(--accent); color: var(--accent); font-weight: 600; }
.gecmis { list-style: none; margin: 1rem 0 0; padding: 0; font-size: .875rem; border-top: 1px solid var(--rule); }
.gecmis li { display: grid; grid-template-columns: 6.6rem minmax(0, 1fr); gap: .75rem; padding: .45rem 0; border-bottom: 1px dashed var(--rule); }
.gecmis li:last-child { border-bottom: 0; }
.gecmis time { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.pano-not { font-size: .8125rem; color: var(--muted); margin: .75rem 0 0; }

/* ---------- Satır listeleri (kitleler, sektörler) ---------- */
.satirlar { border-top: 1px solid var(--ink-2); }
.satir { display: grid; gap: .35rem 2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 820px) { .satir { grid-template-columns: 4rem minmax(0, 15rem) minmax(0, 1fr) auto; align-items: baseline; } }
.satir .no { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.satir h3 { font-size: 1.125rem; }
.satir p { margin: 0; color: var(--ink-2); }
.satir .sag-ek { font-family: var(--f-mono); font-size: .75rem; color: var(--muted); white-space: nowrap; }

/* ---------- Adımlar ---------- */
.adimlar { list-style: none; margin: 0; padding: 0; counter-reset: adim; display: grid; gap: 0; border-top: 1px solid var(--ink-2); }
@media (min-width: 900px) { .adimlar.yatay { grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 0; } }
.adimlar li { counter-increment: adim; padding: 1rem 0 1.1rem; border-bottom: 1px solid var(--rule); position: relative; }
.adimlar li::before { content: counter(adim, decimal-leading-zero); font-family: var(--f-mono); font-size: .75rem; color: var(--accent); display: block; margin-bottom: .35rem; font-variant-numeric: tabular-nums; }
.adimlar h3 { font-size: 1rem; }
.adimlar p { margin: .35rem 0 0; font-size: .9rem; color: var(--muted); }
.adimlar .sure { display: block; margin-top: .5rem; font-family: var(--f-mono); font-size: .72rem; color: var(--ink-2); }
@media (min-width: 900px) {
  .adimlar.yatay li { border-bottom: 0; border-top: 1px solid var(--ink-2); padding: 1rem 1rem 0 0; }
  .adimlar.yatay li::after { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; background: var(--bg); border: 1.5px solid var(--ink-2); border-radius: 50%; }
  .adimlar.yatay li:nth-child(5)::after { border-color: var(--accent); background: var(--accent); }
}

.adim-detay { display: grid; gap: 0; border-top: 1px solid var(--ink-2); }
.adim-detay article { display: grid; gap: .5rem 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 860px) { .adim-detay article { grid-template-columns: 7rem minmax(0, 1fr) minmax(0, 16rem); } }
.adim-detay .adim-no { font: 650 2.25rem/1 var(--f-display); color: var(--rule-2); font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.adim-detay .adim-no.vurgu { color: var(--accent); }
.adim-detay h2 { font-size: 1.375rem; }
.adim-detay p { margin: .6rem 0 0; color: var(--ink-2); }
.adim-detay ul { margin: .75rem 0 0; padding-left: 1.1rem; color: var(--ink-2); }
.adim-detay ul li { margin: .2rem 0; }
.yan-bilgi { font-size: .875rem; border-left: 2px solid var(--rule); padding-left: .9rem; color: var(--muted); align-self: start; }
.yan-bilgi dt { font-family: var(--f-mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.yan-bilgi dd { margin: .1rem 0 .7rem; color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- İki sütun ---------- */
.iki { display: grid; gap: 2rem; }
@media (min-width: 860px) { .iki { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } }
.blok { border-top: 2px solid var(--ink-2); padding-top: 1rem; }
.blok.kirmizi { border-top-color: var(--accent); }
.blok h3 { font-size: 1.125rem; margin-bottom: .75rem; }
.blok ul { margin: 0; padding: 0; list-style: none; }
.blok li { padding: .55rem 0 .55rem 1.5rem; border-bottom: 1px solid var(--rule); position: relative; }
.blok li::before { content: ""; position: absolute; left: 0; top: 1rem; width: 9px; height: 9px; border: 1.5px solid var(--ok); border-radius: 50%; }
.blok.kirmizi li::before { border: 0; border-radius: 0; height: 1.5px; top: 1.2rem; background: var(--accent); width: 10px; }
.blok li small { display: block; color: var(--muted); font-size: .8125rem; }

/* ---------- Aparat çizimi ---------- */
.aparat-duzen { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 900px) { .aparat-duzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }
.cizim { border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r); padding: .5rem; }
.cizim svg { display: block; width: 100%; height: auto; }

/* ---------- Fiyatlar ---------- */
.fiyat-ust { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin-bottom: 1.25rem; font-size: .875rem; color: var(--muted); }
.fiyat-ust b { color: var(--ink); font-variant-numeric: tabular-nums; }
.fiyat-ikili { display: grid; gap: 1.5rem; }
@media (min-width: 900px) { .fiyat-ikili { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fiyat-kutu { border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.fiyat-kutu header { padding: 1rem 1rem .9rem; border-bottom: 1px solid var(--rule); }
.fiyat-kutu h3 { font-size: 1.125rem; }
.fiyat-kutu header p { margin: .35rem 0 0; color: var(--muted); font-size: .875rem; }
.fiyat-kutu .tablo th, .fiyat-kutu .tablo td { padding: .65rem 1rem; }
.fiyat-kutu .tablo { font-size: .9375rem; }
.fiyat-kutu footer { padding: .7rem 1rem; border-top: 1px solid var(--rule); font-size: .8125rem; color: var(--muted); background: var(--sunk); }
.uyari { border: 1px solid var(--rule); border-left: 3px solid var(--warn); background: var(--surface); padding: .85rem 1rem; border-radius: var(--r); font-size: .9375rem; }
.uyari strong { font-weight: 650; }

.hesap { display: grid; gap: 1.25rem; border: 1px solid var(--rule); border-radius: var(--r); background: var(--surface); padding: 1.1rem; }
@media (min-width: 860px) { .hesap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; padding: 1.5rem; } }
.hesap-sonuc { border-top: 1px solid var(--rule); padding-top: 1rem; }
@media (min-width: 860px) { .hesap-sonuc { border-top: 0; border-left: 1px solid var(--rule); padding: 0 0 0 2rem; } }
.hesap-sonuc output { display: block; font: 650 clamp(1.6rem, 1.2rem + 1.5vw, 2.25rem)/1.1 var(--f-display); font-variant-numeric: tabular-nums; letter-spacing: -.02em; margin-top: .3rem; }
.hesap-sonuc p { margin: .5rem 0 0; font-size: .875rem; color: var(--muted); }
.secim { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--rule-2); border-radius: var(--r); width: max-content; max-width: 100%; overflow: hidden; }
.secim label { position: relative; }
.secim input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.secim span { display: block; padding: .5rem .8rem; font-size: .875rem; border-right: 1px solid var(--rule-2); cursor: pointer; }
.secim label:last-child span { border-right: 0; }
.secim input:checked + span { background: var(--ink); color: var(--bg); }
.secim input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: -3px; }

/* ---------- Form ---------- */
.form-duzen { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .form-duzen { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 3rem; } }
.form { border: 1px solid var(--rule); background: var(--surface); border-radius: var(--r); padding: 1.1rem; }
@media (min-width: 640px) { .form { padding: 1.5rem; } }
.form fieldset { border: 0; margin: 0 0 1.25rem; padding: 0; min-width: 0; }
.form legend { font-family: var(--f-mono); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); padding: 0; margin-bottom: .75rem; width: 100%; border-bottom: 1px solid var(--rule); padding-bottom: .4rem; }
.alanlar { display: grid; gap: 1rem; }
@media (min-width: 640px) { .alanlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } .alanlar .genis { grid-column: 1 / -1; } }
.alan label, .alan .alan-ad { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.alan .zorunlu { color: var(--accent); font-weight: 400; }
.alan .ipucu { display: block; font-size: .8125rem; color: var(--muted); margin-top: .3rem; }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="number"], .form select, .form textarea, .hesap input[type="number"] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--bg);
  border: 1px solid var(--rule-2); border-radius: var(--r); padding: .6rem .7rem; min-height: 2.75rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form textarea { min-height: 7rem; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus, .hesap input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.form [aria-invalid="true"] { border-color: var(--accent); }
.hata { display: block; color: var(--accent); font-size: .8125rem; margin-top: .3rem; font-weight: 600; }
.hata:empty { display: none; }
.onay { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .9rem; }
.onay input { width: 1.15rem; height: 1.15rem; margin: .2rem 0 0; accent-color: var(--accent); }
.bal { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-alt { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center; margin-top: .5rem; }
.sonuc-mesaj { border: 1px solid var(--rule); border-left: 3px solid var(--ok); padding: .8rem 1rem; border-radius: var(--r); background: var(--ok-soft); margin-bottom: 1rem; }
.sonuc-mesaj.kotu { border-left-color: var(--accent); background: var(--accent-soft); }
.sonuc-mesaj:empty { display: none; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* ---------- SSS ---------- */
.sss { border-top: 1px solid var(--ink-2); }
.sss details { border-bottom: 1px solid var(--rule); }
.sss summary { cursor: pointer; list-style: none; padding: 1rem 2rem 1rem 0; font-weight: 600; position: relative; font-size: 1.0625rem; }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: ""; position: absolute; right: .25rem; top: 1.45rem; width: 12px; height: 12px;
  background: linear-gradient(currentColor, currentColor) 50% 50% / 100% 1.5px no-repeat,
              linear-gradient(currentColor, currentColor) 50% 50% / 1.5px 100% no-repeat;
  transition: transform .2s ease; }
.sss details[open] summary::after { transform: rotate(45deg); color: var(--accent); }
.sss .cevap { padding: 0 0 1.1rem; color: var(--ink-2); max-width: 46rem; }
.sss h2 { font-size: .8rem; font-family: var(--f-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 500; margin: 2.5rem 0 .6rem; }
.sss h2:first-child { margin-top: 0; }

/* ---------- İletişim ---------- */
.iletisim-liste { margin: 0; border-top: 1px solid var(--ink-2); }
.iletisim-liste > div { display: grid; gap: .2rem 2rem; padding: 1rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 700px) { .iletisim-liste > div { grid-template-columns: 12rem minmax(0, 1fr); } }
.iletisim-liste dt { font-family: var(--f-mono); font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding-top: .2rem; }
.iletisim-liste dd { margin: 0; font-size: 1.0625rem; }

/* ---------- Metin sayfası (KVKK) ---------- */
.metin { max-width: 46rem; }
.metin h2 { font-size: 1.25rem; margin: 2.25rem 0 .75rem; }
.metin h2:first-child { margin-top: 0; }
.metin ul { padding-left: 1.2rem; }
.metin li { margin: .3rem 0; }
.cerez-yok { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; border: 1px solid var(--rule); background: var(--surface); padding: 1rem; border-radius: var(--r); margin-bottom: 2rem; }
.cerez-yok svg { width: 2.25rem; height: 2.25rem; }
.cerez-yok p { margin: .25rem 0 0; color: var(--ink-2); }

/* ---------- Çağrı bandı ---------- */
.cagri { --band: #15181c; --band-ink: #f2f2ee; --band-muted: #b9bec4; --band-rule: #3b4249;
  background: var(--band); color: var(--band-ink); position: relative; overflow: hidden; }
.cagri .kap { padding-block: 3rem; display: grid; gap: 1.5rem; align-items: center; position: relative; }
@media (min-width: 900px) { .cagri .kap { grid-template-columns: minmax(0, 1fr) auto; padding-block: 4rem; } }
.cagri h2 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); max-width: 22ch; }
.cagri p { margin: .75rem 0 0; color: var(--band-muted); max-width: 40rem; }
.cagri .eylem { margin-top: 0; }
.cagri .btn-ince, .cagri .btn-wa { color: var(--band-ink); border-color: var(--band-rule); }
.cagri .btn-ince:hover, .cagri .btn-wa:hover { background: color-mix(in srgb, var(--band-ink) 10%, var(--band)); color: var(--band-ink); }
.cagri-halka { position: absolute; right: -60px; top: 50%; width: 320px; height: 320px; transform: translateY(-50%); opacity: .14; pointer-events: none; }
.cagri-halka circle { fill: none; stroke: currentColor; }

/* ---------- Alt bilgi ---------- */
.alt { border-top: 1px solid var(--rule); padding-block: 2.5rem 2rem; font-size: .875rem; color: var(--muted); }
.alt-ic { display: grid; gap: 2rem; }
@media (min-width: 820px) { .alt-ic { grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr)); } }
.alt h2 { font-size: .72rem; font-family: var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: .6rem; }
.alt ul { list-style: none; margin: 0; padding: 0; }
.alt li { margin: .3rem 0; }
.alt a { color: var(--ink-2); text-decoration: none; }
.alt a:hover { color: var(--accent); text-decoration: underline; }
.alt .marka { color: var(--ink); margin-bottom: .6rem; }
.alt-son { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between; border-top: 1px solid var(--rule); margin-top: 2rem; padding-top: 1rem; font-family: var(--f-mono); font-size: .72rem; letter-spacing: .03em; }

[hidden] { display: none !important; }
noscript p, .js-yok { border: 1px dashed var(--rule-2); padding: .75rem 1rem; border-radius: var(--r); color: var(--muted); font-size: .9rem; }

/* Kaydırınca beliren öğeler — yalnız JS varsa ve hareket isteniyorsa */
@media (prefers-reduced-motion: no-preference) {
  .js .belir { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1); }
  .js .belir.gorundu { opacity: 1; transform: none; }
}

@media print {
  .ust, .cagri, .alt, .menu-dugme { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --- ek: kahraman SVG ve pano ayrıntıları --- */
.s-mur-c { fill: none; stroke: var(--accent); stroke-width: 2.2; }
.s-mur-y { fill: var(--accent); opacity: .28; }
.s-kalem-isik { fill: none; stroke: var(--steel-2); stroke-width: 1.5; stroke-linecap: round; }
.an-dugme {
  font: 500 .72rem/1 var(--f-mono); letter-spacing: .04em; text-transform: uppercase;
  background: transparent; color: var(--ink-2); border: 1px solid var(--rule-2); border-radius: var(--r-sm);
  padding: .3rem .5rem; cursor: pointer; min-height: 1.75rem;
}
.an-dugme:hover { background: var(--sunk); }
.ilerleme-sayi strong small { color: var(--muted); font-weight: 400; font-size: .5em; letter-spacing: 0; }
.cubuk { --oran: 68.4%; }
.marka-ek { display: none; }
@media (min-width: 560px) { .marka-ek { display: inline; } }
.hesap fieldset, .form fieldset.alan { border: 0; padding: 0; margin: 1rem 0 0; min-width: 0; }
.form fieldset.alan { margin: 0; }
.hesap legend, .form legend.alan-ad {
  font: 600 .9rem/1.4 var(--f-sans); text-transform: none; letter-spacing: 0; color: var(--ink);
  border: 0; padding: 0; margin-bottom: .3rem; width: auto;
}
.hesap .alan label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.hesap input[type="number"] { max-width: 12rem; }
.nav a.btn, .nav a.btn:hover { color: var(--accent-ink); }
.nav a.btn[aria-current="page"]::after { display: none; }
.tezgah-alt .an-dugme { margin-left: auto; }
.tezgah, .cizim { margin: 0; }
@media (min-width: 360px) and (max-width: 899px) {
  .adimlar.yatay { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
}
.fiyat-kutu { display: flex; flex-direction: column; }
.fiyat-kutu footer { margin-top: auto; }
#fiyat-tablolari + p, #fiyat-tablolari ~ p { margin-top: 1rem; }
.uyari { margin: 0 0 1.25rem; }
.iki + .uyari { margin-top: 2rem; }
.tablo-sar { overflow-x: auto; }
@media (max-width: 520px) { .fiyat-kutu .tablo .num { white-space: normal; } .fiyat-kutu .tablo th, .fiyat-kutu .tablo td { padding-inline: .7rem; } }
.hesap { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 860px) { .hesap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.form-duzen, .takip-duzen, .aparat-duzen { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .form-duzen { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .takip-duzen { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
}
@media (min-width: 900px) { .aparat-duzen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.atla { top: 0; transform: translateY(-120%); }
.atla:focus { top: 8px; transform: none; }
p.etiket, .bolum-bas .etiket { display: block; }
p.etiket::before, .bolum-bas .etiket::before { display: inline-block; margin-right: .55rem; vertical-align: .05em; }
.cagri-halka { right: -170px; }
.cagri .btn-ince, .cagri .btn-wa { background: var(--band); }

/* =====================================================================
   Tema: koyu endüstriyel teknoloji (patron kararı 2026-10-01)
   Tüm sayfalar her zaman koyu; renkler belirteçlerle değişir.
   ===================================================================== */
/* Belirteçler dosyanın başındaki :root bloğunda. */
body {
  background:
    radial-gradient(1100px 520px at 78% -8%, color-mix(in srgb, var(--cyan) 9%, transparent), transparent 70%),
    radial-gradient(900px 480px at -10% 30%, color-mix(in srgb, var(--accent) 6%, transparent), transparent 70%),
    var(--bg);
  background-attachment: fixed;
}
::selection { background: color-mix(in srgb, var(--cyan) 35%, transparent); color: #fff; }

/* Üst şerit */
.ust { background: color-mix(in srgb, var(--bg) 78%, transparent); border-bottom-color: color-mix(in srgb, var(--cyan) 14%, var(--rule)); }
.marka-ek { color: var(--cyan); }
.nav a { color: var(--ink-2); }
.nav a:hover { background: color-mix(in srgb, var(--cyan) 8%, transparent); color: #fff; }

/* Düğmeler */
.btn { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent), 0 10px 30px -12px color-mix(in srgb, var(--accent) 70%, transparent); }
.btn:hover { background: #ff7440; color: var(--accent-ink); }
.btn-ince { box-shadow: none; border-color: var(--rule-2); background: color-mix(in srgb, var(--surface) 60%, transparent); }
.btn-ince:hover { border-color: color-mix(in srgb, var(--cyan) 55%, var(--rule-2)); background: color-mix(in srgb, var(--cyan) 7%, transparent); color: #fff; }
.btn-wa { box-shadow: none; }

/* Bölümler */
.bolum { border-top-color: var(--rule); position: relative; }
.bolum::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 45%, transparent) 50%, transparent); opacity: .5; }
.etiket { color: var(--cyan); }
h2 { letter-spacing: -.02em; }

/* Kahraman (yeni) */
.k2 { position: relative; padding-block: 3.5rem 3rem; overflow: hidden; isolation: isolate; }
.k2-izgara { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--cyan) 7%, transparent) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 7%, transparent) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000 30%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 70% at 70% 30%, #000 30%, transparent 75%); }
.k2-ic { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .k2-ic { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 3.5rem; } }
.k2-rozet { display: inline-flex; align-items: center; gap: .55rem; margin: 0;
  font: 500 .75rem/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
  padding: .45rem .7rem; border: 1px solid var(--rule-2); border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.k2-nokta { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
@media (prefers-reduced-motion: no-preference) { .k2-nokta { animation: k2-nabiz 2.4s ease-in-out infinite; } }
@keyframes k2-nabiz { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--ok) 0%, transparent); } }
.k2 h1 { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 4.4rem); line-height: 1.02; letter-spacing: -.035em; font-weight: 700; margin-top: 1.25rem; max-width: 13ch; }
.k2 h1 em { font-style: normal; background: linear-gradient(92deg, #fff 0%, var(--cyan) 55%, #8be9ff 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.k2 .giris { margin-top: 1.4rem; color: var(--ink-2); font-size: 1.0625rem; max-width: 54ch; }
.k2-olcu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 2.25rem 0 0;
  border: 1px solid var(--rule); border-radius: var(--r); background: color-mix(in srgb, var(--surface) 55%, transparent); overflow: hidden; }
@media (min-width: 560px) { .k2-olcu { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.k2-olcu div { padding: .85rem 1rem; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule); }
.k2-olcu dt { font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.k2-olcu dd { margin: .3rem 0 0; color: var(--ink-2); font-size: .875rem; }
.k2-olcu dd b { color: #fff; font-size: 1.35rem; font-weight: 650; letter-spacing: -.01em; }

/* Üretim konsolu */
.konsol { position: relative; border: 1px solid color-mix(in srgb, var(--cyan) 20%, var(--rule-2)); border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--cyan)) 0%, var(--surface) 40%);
  box-shadow: var(--glow); overflow: hidden; }
.konsol::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(120deg, color-mix(in srgb, #fff 6%, transparent), transparent 30%); }
.konsol-ust { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .7rem 1rem; border-bottom: 1px solid var(--rule); font: 500 .6875rem/1 var(--f-mono); letter-spacing: .09em; }
.konsol-baslik { display: inline-flex; align-items: center; gap: .5rem; color: #fff; }
.konsol-etiket { color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent); padding: .25rem .45rem; border-radius: 3px; }
.konsol-govde { padding: 1.1rem 1rem 1rem; display: grid; gap: 1rem; }
.konsol-satir { display: flex; justify-content: space-between; gap: .75rem; flex-wrap: wrap; align-items: baseline; }
.konsol-k { font: 500 .75rem/1.3 var(--f-mono); color: var(--muted); letter-spacing: .03em; }
.konsol-durum { font: 600 .75rem/1 var(--f-mono); color: var(--ok); }
.konsol-sayac { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.konsol-sayac b { font: 650 clamp(2.4rem, 1.6rem + 2.4vw, 3.2rem)/1 var(--f-display); letter-spacing: -.03em; color: #fff; font-variant-numeric: tabular-nums; }
.konsol-sayac > span { color: var(--muted); font-size: 1.05rem; }
.konsol-yuzde { margin-left: auto; font: 600 1rem/1 var(--f-mono); color: var(--cyan); }
.konsol-cubuk { height: 8px; border-radius: 99px; background: var(--sunk); overflow: hidden; box-shadow: inset 0 0 0 1px var(--rule); }
.konsol-dolu { --dolu: .642; display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(var(--dolu));
  background: linear-gradient(90deg, var(--accent), #ffb15c 55%, var(--cyan)); }
@media (prefers-reduced-motion: no-preference) { .konsol-dolu { transition: transform .6s ease; } }
.konsol-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.konsol-izgara div { background: var(--surface); padding: .6rem .75rem; display: grid; gap: .2rem; }
.konsol-izgara span { font: 500 .6875rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.konsol-izgara b { font-weight: 600; color: #fff; font-size: .9375rem; }
.konsol-izgara b.vurgu { color: var(--accent); }
.konsol-grafik { display: grid; gap: .45rem; }
.konsol-grafik svg { width: 100%; height: 64px; display: block; }
.g-cubuk rect { fill: color-mix(in srgb, var(--cyan) 38%, var(--sunk)); }
.g-cubuk rect.g-simdi { fill: var(--accent); }
.g-hedef { stroke: color-mix(in srgb, var(--ok) 70%, transparent); stroke-width: 1; stroke-dasharray: 4 4; fill: none; vector-effect: non-scaling-stroke; }
.konsol-akis { list-style: none; margin: 0; padding: .75rem 0 0; border-top: 1px dashed var(--rule-2); display: grid; gap: .4rem; font-size: .8125rem; color: var(--ink-2); }
.konsol-akis time { font: 500 .75rem/1 var(--f-mono); color: var(--cyan); margin-right: .65rem; }

/* Teknoloji bölümü (şema, mavi baskı görünümü) */
.teknoloji-ic { display: grid; gap: 2rem; align-items: start; }
@media (min-width: 960px) { .teknoloji-ic { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }
.teknoloji-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.teknoloji-liste li { background: var(--surface); padding: 1rem 1.1rem; display: grid; gap: .3rem; }
.teknoloji-liste b { color: #fff; font-weight: 600; }
.teknoloji-liste span { color: var(--muted); font-size: .9rem; }
.tezgah { background: #071722; border-color: color-mix(in srgb, var(--cyan) 25%, var(--rule)); box-shadow: var(--glow); }
.tezgah .s-zemin { fill: #071722; }
.tezgah .s-cizgi, .tezgah .s-ince { stroke: color-mix(in srgb, var(--cyan) 40%, transparent); }
.tezgah .s-yazi { fill: color-mix(in srgb, var(--cyan) 75%, #fff); }
.tezgah .s-govde, .tezgah .s-celik, .tezgah .s-kalem, .tezgah .s-aparat { stroke: color-mix(in srgb, var(--cyan) 80%, #fff); }
.tezgah .s-celik { fill: #0d2a3a; }
.tezgah .s-govde { fill: #0a2030; }
.tezgah .s-kalem { fill: #0f3346; }
.tezgah-alt { border-top-color: color-mix(in srgb, var(--cyan) 18%, var(--rule)); color: color-mix(in srgb, var(--cyan) 70%, #fff); }

/* Çağrı bandı */
.cagri { --band: #0b141b; --band-ink: #f2f6f8; --band-muted: #9fb0bd; --band-rule: #22323e; }

/* =====================================================================
   Alt sayfalar — koyu endüstriyel dil (başlık alanı, tablolar, hesaplayıcı,
   örnek portal, form). Renkler yalnız belirteçlerden gelir.
   ===================================================================== */

/* Sayfa başlığı: ince ızgara, konum yolu, büyük başlık, özet okuma satırı */
.sayfa-bas { position: relative; isolation: isolate; overflow: hidden; padding-block: 2.75rem 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 900px) { .sayfa-bas { padding-top: 4rem; } }
.sayfa-bas::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 8%, transparent) 1px, transparent 1px) 0 0 / 40px 40px;
  -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000 25%, transparent 75%);
          mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000 25%, transparent 75%); }
.sayfa-bas::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--cyan) 55%, transparent) 30%, transparent 80%); }
.sayfa-yol ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem .5rem;
  font: 500 .75rem/1.4 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.sayfa-yol li + li::before { content: "/"; margin-right: .5rem; color: var(--steel); }
.sayfa-yol a { color: var(--muted); text-decoration: none; }
.sayfa-yol a:hover { color: var(--cyan); }
.sayfa-yol [aria-current] { color: var(--cyan); }
.sayfa-bas h1 { font-size: clamp(2rem, 1.15rem + 3.2vw, 3.5rem); line-height: 1.04; letter-spacing: -.035em; font-weight: 700; color: #fff; max-width: 20ch; margin-top: 1rem; }
.sayfa-bas .giris { color: var(--ink-2); max-width: 58ch; margin-top: 1.1rem; }
.sayfa-ozet { display: flex; flex-wrap: wrap; margin: 1.75rem 0 0; border: 1px solid var(--rule); border-radius: var(--r);
  background: color-mix(in srgb, var(--surface) 70%, transparent); width: max-content; max-width: 100%; overflow: hidden; }
.sayfa-ozet div { padding: .6rem 1rem; box-shadow: 1px 0 0 var(--rule), 0 1px 0 var(--rule); min-width: 0; }
.sayfa-ozet dt { font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.sayfa-ozet dd { margin: .2rem 0 0; color: #fff; font-weight: 600; font-variant-numeric: tabular-nums; }
.cetvel { margin-top: 2rem; border-bottom-color: color-mix(in srgb, var(--cyan) 25%, var(--rule-2));
  background:
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--cyan) 35%, var(--rule-2)) 0 1px, transparent 1px 50px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--rule-2) 0 1px, transparent 1px 10px) 0 100% / 100% 5px no-repeat; }
.bolum-bas h2 { color: #fff; }

/* Tablolar */
.tablo-kap, .fiyat-kutu { background: var(--surface); border-color: var(--rule-2); }
.tablo thead th { background: var(--sunk); color: var(--muted); border-bottom-color: var(--rule-2); }
.tablo th, .tablo td { border-bottom-color: var(--rule); }
.tablo tbody th { color: #fff; }
.tablo td { color: var(--ink-2); }
.tablo tbody tr { transition: background-color .15s ease; }
.tablo tbody tr:hover { background: color-mix(in srgb, var(--cyan) 5%, transparent); }
.tablo .num { font-family: var(--f-mono); font-size: .875rem; color: #fff; }
.tablo thead .biz { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--sunk)); }
.tablo .biz { background: color-mix(in srgb, var(--accent) 6%, transparent); color: #fff; }

/* Fiyat kutuları: konsol başlığı */
.fiyat-ikili { counter-reset: liste; }
.fiyat-kutu { border-radius: 10px; }
.fiyat-kutu header { background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--cyan)), var(--surface)); }
.fiyat-kutu header::before { counter-increment: liste; content: "LİSTE " counter(liste, upper-alpha);
  display: block; font: 500 .6875rem/1 var(--f-mono); letter-spacing: .09em; color: var(--cyan); margin-bottom: .55rem; }
.fiyat-kutu h3 { color: #fff; }
.fiyat-kutu footer { background: var(--sunk); border-top-color: var(--rule); color: var(--muted); }
.uyari { background: var(--surface); border-color: var(--rule-2); border-left-color: var(--warn); color: var(--ink-2); }
.uyari strong, .uyari b { color: #fff; }

/* Hesaplayıcı: konsol estetiği */
.hesap-konsol .hesap { border: 0; background: transparent; border-radius: 0; padding: 1.1rem; gap: 1.5rem; }
@media (min-width: 860px) { .hesap-konsol .hesap { padding: 1.5rem; } }
.hesap-girdi .alan { margin-bottom: 1rem; }
.hesap-girdi .alan:last-child { margin-bottom: 0; }
.hesap input[type="number"] { font: 600 1.375rem/1.2 var(--f-mono); color: #fff; background: var(--bg); border-color: var(--rule-2); max-width: 14rem; }
.hesap-sonuc { border-color: var(--rule); }
.hesap-sonuc output { font-family: var(--f-mono); font-weight: 600; color: #fff; letter-spacing: -.02em;
  text-shadow: 0 0 24px color-mix(in srgb, var(--cyan) 35%, transparent); margin-top: .5rem; }
.hesap-dokum { display: grid; gap: 1px; margin: 1rem 0 0; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.hesap-dokum:empty { display: none; }
.hesap-dokum div { display: flex; justify-content: space-between; gap: .25rem 1rem; flex-wrap: wrap; background: var(--surface); padding: .5rem .75rem; }
.hesap-dokum dt { font: 500 .6875rem/1.6 var(--f-mono); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
.hesap-dokum dd { margin: 0; font: 500 .8125rem/1.6 var(--f-mono); color: var(--ink); font-variant-numeric: tabular-nums; }
.hesap-sonuc p { color: var(--muted); }

/* Seçim düğmeleri (segment) */
.secim { border-color: var(--rule-2); background: var(--bg); }
.secim span { border-right-color: var(--rule-2); color: var(--ink-2); transition: background-color .15s ease, color .15s ease; }
.secim label:hover span { color: #fff; background: color-mix(in srgb, var(--cyan) 6%, transparent); }
.secim input:checked + span { background: var(--cyan-soft); color: var(--cyan); box-shadow: inset 0 -2px 0 var(--cyan); }

/* Örnek portal (canlı takip sayfası) */
.po-isler { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
.po-isler li { padding: .6rem .8rem; display: grid; gap: .15rem; border-right: 1px solid var(--rule); min-width: 0; }
.po-isler li:last-child { border-right: 0; }
.po-isler b { font: 600 .75rem/1.2 var(--f-mono); color: var(--ink-2); letter-spacing: .04em; }
.po-isler span { font-size: .75rem; color: var(--muted); overflow-wrap: anywhere; }
.po-isler .secili { background: color-mix(in srgb, var(--cyan) 7%, transparent); box-shadow: inset 0 -2px 0 var(--cyan); }
.po-isler .secili b { color: var(--cyan); }
.po-musteri { margin: -.5rem 0 0; font: 500 .75rem/1.4 var(--f-mono); color: var(--muted); }
.po-dolu { --dolu: .684; }
.portal-ornek .cubuk-olcek { margin-top: -.6rem; }
.po-izgara { margin: 0; }
@media (min-width: 560px) { .po-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.po-izgara div { background: var(--surface); padding: .6rem .75rem; display: grid; gap: .2rem; align-content: start; }
.po-izgara dt { font: 500 .6875rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.po-izgara dd { margin: 0; font-weight: 600; color: #fff; font-size: .9375rem; font-variant-numeric: tabular-nums; }
.po-izgara dd.vurgu { color: var(--accent); }
.po-saatler { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); font: 500 .625rem/1 var(--f-mono); color: var(--muted); text-align: center; }
.portal-ornek .asamalar { margin: 0; }
.portal-ornek .asamalar li { color: var(--muted); border-top-color: var(--rule-2); }
.portal-ornek .asamalar li.tamam { color: var(--ink-2); border-top-color: var(--cyan); }
.portal-ornek .asamalar li.simdi { color: var(--accent); border-top-color: var(--accent); }
.po-sevk { margin: 0; font-size: .8125rem; color: var(--ink-2); display: flex; gap: .75rem; flex-wrap: wrap; align-items: baseline; }
.madde li b { color: #fff; }

/* Teklif formu */
.form { background: var(--surface); border-color: var(--rule-2); border-radius: 10px; box-shadow: var(--shadow); }
.form-ust { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center;
  margin: -1.1rem -1.1rem 1.25rem; padding: .7rem 1.1rem; border-bottom: 1px solid var(--rule);
  font: 500 .6875rem/1 var(--f-mono); letter-spacing: .09em; color: var(--muted);
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 88%, var(--cyan)), var(--surface)); border-radius: 10px 10px 0 0; }
@media (min-width: 640px) { .form-ust { margin: -1.5rem -1.5rem 1.5rem; padding-inline: 1.5rem; } }
.form legend { color: var(--cyan); border-bottom-color: var(--rule); }
.alan label, .alan .alan-ad { color: var(--ink); }
.form legend.alan-ad { color: var(--ink); }
.alan .ipucu { color: var(--muted); }
.form input[type="text"], .form input[type="email"], .form input[type="tel"], .form input[type="number"], .form select, .form textarea {
  background: var(--bg); border-color: var(--rule-2); color: var(--ink); }
.form input:hover, .form select:hover, .form textarea:hover { border-color: var(--steel); }
.form input:focus, .form select:focus, .form textarea:focus, .hesap input:focus {
  border-color: var(--focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--focus) 30%, transparent); }
.form select option { background: var(--surface); color: var(--ink); }
.form [aria-invalid="true"] { border-color: var(--hata); box-shadow: 0 0 0 1px var(--hata); }
.hata { color: var(--hata); }
.alan .zorunlu, .muted .zorunlu { color: var(--hata); }
.onay input { accent-color: var(--cyan); }
.sonuc-mesaj { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 35%, var(--rule)); border-left-color: var(--ok); color: var(--ink); }
.sonuc-mesaj.kotu { background: color-mix(in srgb, var(--hata) 10%, var(--surface)); border-color: color-mix(in srgb, var(--hata) 35%, var(--rule)); border-left-color: var(--hata); }

/* Adım ayrıntısı, SSS, iletişim, metin */
.adim-detay, .satirlar, .sss, .iletisim-liste, .adimlar { border-top-color: var(--rule-2); }
.adim-detay .adim-no { color: color-mix(in srgb, var(--cyan) 55%, var(--steel)); font-family: var(--f-mono); font-weight: 600; }
.adim-detay .adim-no.vurgu { color: var(--accent); }
.adim-detay h2 { color: #fff; }
.yan-bilgi { border-left-color: color-mix(in srgb, var(--cyan) 40%, var(--rule)); }
.yan-bilgi dt { color: var(--cyan); }
.adimlar li::before { color: var(--cyan); }
.sss details[open] { background: linear-gradient(90deg, color-mix(in srgb, var(--cyan) 5%, transparent), transparent 60%); box-shadow: inset 2px 0 0 var(--cyan); }
.sss summary { color: #fff; padding-left: .9rem; }
.sss summary:hover { color: var(--cyan); }
.sss .cevap { padding-left: .9rem; }
.sss h2 { color: var(--cyan); }
.iletisim-liste dt { color: var(--cyan); }
.metin h2 { color: #fff; }
.cerez-yok { background: var(--surface); border-color: var(--rule-2); }
.cerez-yok svg { color: var(--cyan); }
.cizim { background: #071722; border-color: color-mix(in srgb, var(--cyan) 25%, var(--rule)); box-shadow: var(--glow); }
.cizim .s-zemin { fill: #071722; }
.cizim .s-cizgi, .cizim .s-ince { stroke: color-mix(in srgb, var(--cyan) 40%, transparent); }
.cizim .s-yazi, .cizim .s-yazi-k { fill: color-mix(in srgb, var(--cyan) 75%, #fff); }
.cizim .s-celik, .cizim .s-kalem, .cizim .s-aparat { stroke: color-mix(in srgb, var(--cyan) 80%, #fff); }
.cizim .s-celik { fill: #0d2a3a; }
.cizim .s-kalem { fill: #0f3346; }
.olcu { border-color: var(--rule-2); }
.olcu dd { color: #fff; }
.blok { border-top-color: var(--cyan); }
.blok.kirmizi { border-top-color: var(--accent); }
.blok h3 { color: #fff; }

/* =====================================================================
   Teklif formu: dosya yükleme (yukle.js). JS yoksa alan gizli kalır.
   ===================================================================== */
.yukle-alan { display: none; }
.js .yukle-alan { display: block; }
.yukle-alan > .ipucu { display: block; font-size: .8125rem; color: var(--muted); margin: 0 0 .75rem; }
.yukle-alan > .ipucu:last-child { margin: .75rem 0 0; }
.yukle-birak { position: relative; display: grid; justify-items: center; gap: .6rem; text-align: center;
  padding: 1.5rem 1rem 1.25rem; border: 1px dashed color-mix(in srgb, var(--cyan) 35%, var(--rule-2)); border-radius: var(--r);
  background:
    linear-gradient(color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, color-mix(in srgb, var(--cyan) 5%, transparent) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--bg);
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.yukle-birak.uzerinde { border-style: solid; border-color: var(--cyan); box-shadow: var(--glow);
  background-color: color-mix(in srgb, var(--cyan) 8%, var(--bg)); }
.yukle.dolu .yukle-dugmeler, .yukle.dolu .yukle-simge { opacity: .5; }
.yukle-simge { width: 2.25rem; height: 2.25rem; fill: none; stroke: var(--cyan); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.yukle-simge-kayit { stroke: var(--accent); }
.yukle-baslik { margin: 0; color: var(--ink-2); font-size: .9375rem; }
.yukle-baslik b { color: #fff; font-weight: 600; }
.yukle-dugmeler { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.yukle-girdi { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip-path: inset(50%); }
.yukle-girdi + label { cursor: pointer; }
.yukle-girdi:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }
.yukle-girdi:disabled + label { opacity: .5; cursor: not-allowed; }
.yukle-sayac { position: absolute; top: .55rem; right: .7rem; font-size: .6875rem; color: var(--muted); letter-spacing: .06em; }
/* Masaüstünde kamera düğmesi gereksiz: yalnız dokunmatik/kaba işaretçide göster */
@media (hover: hover) and (pointer: fine) { .yukle-kamera { display: none; } }
#y-hata { margin: .6rem 0 0; }

.yukle-liste { list-style: none; margin: .75rem 0 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border-radius: var(--r); overflow: hidden; }
.yukle-liste:empty { display: none; }
.yukle-satir { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; gap: .75rem; align-items: center; padding: .6rem .7rem; background: var(--sunk); }
.yukle-resim { width: 3rem; height: 3rem; border-radius: var(--r-sm); border: 1px solid var(--rule-2); background: var(--bg);
  display: grid; place-items: center; overflow: hidden; font: 600 .625rem/1 var(--f-mono); letter-spacing: .06em; color: var(--cyan); }
.yukle-resim canvas { width: 100%; height: 100%; display: block; }
.yukle-bilgi { display: grid; gap: .25rem; min-width: 0; }
.yukle-ad { color: #fff; font-size: .875rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.yukle-alt { display: flex; flex-wrap: wrap; gap: .1rem .75rem; font: 500 .72rem/1.3 var(--f-mono); color: var(--muted); font-variant-numeric: tabular-nums; }
.yukle-satir[data-durum="tamam"] .yukle-durum-metin { color: var(--ok); }
.yukle-satir[data-durum="hata"] .yukle-durum-metin { color: var(--hata); }
.yukle-satir[data-durum="yukleniyor"] .yukle-durum-metin { color: var(--cyan); }
.yukle-satir[data-durum="hata"] { box-shadow: inset 2px 0 0 var(--hata); }
.yukle-satir[data-durum="tamam"] { box-shadow: inset 2px 0 0 var(--ok); }
.yukle-bilgi progress { -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border: 0; border-radius: 99px; background: var(--bg); overflow: hidden; }
.yukle-bilgi progress::-webkit-progress-bar { background: var(--bg); }
.yukle-bilgi progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.yukle-bilgi progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--cyan)); }
.yukle-satir[data-durum="tamam"] progress::-webkit-progress-value { background: var(--ok); }
.yukle-satir[data-durum="tamam"] progress::-moz-progress-bar { background: var(--ok); }
@media (prefers-reduced-motion: no-preference) { .yukle-bilgi progress::-webkit-progress-value { transition: width .2s ease; } }
.yukle-kaldir { font: 500 .8125rem/1 var(--f-sans); color: var(--ink-2); background: transparent; border: 1px solid var(--rule-2);
  border-radius: var(--r-sm); padding: .5rem .65rem; min-height: 2.25rem; cursor: pointer; }
.yukle-kaldir:hover { color: #fff; border-color: var(--hata); background: color-mix(in srgb, var(--hata) 10%, transparent); }

/* ---------- Müşteri girişi: üst şerit bağlantısı + canlı takip paneli (2026-10-04) ----------
   Giriş formu siteye gömülmez; bağlantılar portalın kendi giriş sayfasına gider. */
.ust-giris { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; text-decoration: none;
  font: 500 .8125rem/1 var(--f-sans); color: var(--ink); white-space: nowrap;
  padding: .5rem .65rem; min-height: 2.5rem; border: 1px solid color-mix(in srgb, var(--cyan) 35%, var(--rule-2)); border-radius: var(--r); }
.ust-giris svg { width: .95rem; height: .95rem; fill: none; stroke: var(--cyan); stroke-width: 1.5; flex: none; }
.ust-giris:hover { color: #fff; background: color-mix(in srgb, var(--cyan) 8%, transparent); border-color: var(--cyan); }
.ust-giris + .menu-dugme { margin-left: 0; }
.ust-giris-kisa { display: none; }
@media (max-width: 439px) {
  .ust-ic { gap: .6rem; }
  .ust-giris { padding-inline: .6rem; }
  .ust-giris-uzun { display: none; }
  .ust-giris-kisa { display: inline; }
}
@media (min-width: 1080px) {
  .ust-ic { flex-wrap: nowrap; }
  .nav { order: 2; }
  .ust-giris { order: 3; margin-left: .25rem; min-height: 2.25rem; }
}
@media (min-width: 1080px) and (max-width: 1239px) { .marka-ek { display: none; } .js .nav a { padding-inline: .45rem; } }

.mg-bolum { padding-block: 2rem 3rem; }
.mg { border: 1px solid color-mix(in srgb, var(--cyan) 22%, var(--rule-2)); border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 92%, var(--cyan)) 0%, var(--surface) 55%); box-shadow: var(--glow); }
.mg-ust { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 1rem; border-bottom: 1px solid var(--rule);
  font: 500 .6875rem/1 var(--f-mono); letter-spacing: .09em; color: var(--muted); }
.mg-ust > span:first-child { display: inline-flex; align-items: center; gap: .5rem; color: #fff; }
.mg-led { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.mg-govde { display: grid; gap: 1.5rem; padding: 1.4rem 1rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
.mg-metin h2 { font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2rem); margin: .6rem 0 .5rem; }
.mg-metin > p:not(.etiket) { color: var(--ink-2); max-width: 40rem; margin-bottom: 0; }
.mg-liste { list-style: none; margin: 1.1rem 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--rule); }
.mg-liste li { display: grid; gap: .1rem; padding: .6rem 0 .6rem .9rem; border-bottom: 1px solid var(--rule); position: relative; }
.mg-liste li::before { content: ""; position: absolute; left: 0; top: .95rem; width: 5px; height: 5px; background: var(--cyan); }
.mg-liste b { font-weight: 600; font-size: .9375rem; }
.mg-liste span { color: var(--muted); font-size: .8125rem; font-family: var(--f-mono); }
.mg-eylem { display: grid; gap: .85rem; align-content: center; }
.mg-dugme { width: 100%; min-height: 3rem; font-size: 1rem; }
.mg-guven { margin: 0; font-size: .8125rem; color: var(--muted); border-left: 2px solid var(--warn); padding-left: .7rem; }
.mg-not { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1.25rem; padding: .85rem 1rem; border-top: 1px solid var(--rule);
  background: color-mix(in srgb, var(--bg) 55%, transparent); font-size: .875rem; color: var(--ink-2); }
.mg-not p { margin: 0; }
.mg-not a:not(.btn) { color: var(--ink); }
.mg-iletisim { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }
.mg-iletisim:not(:has(> :not([hidden]))) { display: none; }
.mg-iletisim .btn { min-height: 2.25rem; padding: .45rem .8rem; font-size: .875rem; }
@media (min-width: 640px) { .mg-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; } }
@media (min-width: 900px) {
  .mg-govde { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 2.5rem; padding: 1.75rem 1.5rem 1.5rem; }
  .mg-eylem { border-left: 1px solid var(--rule); padding-left: 2rem; }
  .mg-ust, .mg-not { padding-inline: 1.5rem; }
}