/* selvi.org v7 · ana sayfa (TR / EN).
   Bileşenler: döndürülebilir küre, akan parıltılı arama, ızgara + gürültü zemini, ışın akışı, spot ışıklı kartlar,
   kayan şeritler + 3B şerit, canlı Q = K·√P hesabı ve cam ampul renk şeridi, zaman çizelgesi, imleci izleyen dev yazılı alt bilgi.
   Üst çubuk, komut paleti ve bildirim iç sayfalarla AYNIDIR: işaretleme scripts/sd_chrome.py (<!-- sd:ust --> bloğu),
   görünüm css/sd-ust.css (scripts/build-sd-css.py, css/sd/00-temel + 10-krom'dan; yalnız #ust / #palet içinde geçerli),
   davranış js/sd.js. Bu dosyada üst çubuk kuralı yoktur. */

:root {
  --bg: #05060a;
  --bg-2: #080a10;
  --panel: #0b0d14;
  --line: rgba(255, 255, 255, .075);
  --line-2: rgba(255, 255, 255, .13);
  --tx: #eef1f7;
  --mut: #a6aec0;
  --dim: #8b93a7;
  --ember: #ff6a2b;
  --ember-2: #ffb37a;
  --ember-ink: #1c0a02;
  --ice: #7cc4ff;
  --ice-2: #3d7bff;
  --font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-glass: cubic-bezier(.5, 1.5, .5, 1);
  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --sec: clamp(72px, 8vw, 124px);
  --ring: oklch(0.80 0.15 62 / 0.7);   /* odak halkası: css/sd/00-temel.css ile aynı */
  --kor: oklch(0.80 0.15 62);           /* v7 tek vurgu (DESIGN.md "kor"); canlı hesap ve kartlar */
  --kor-ink: oklch(0.2 0.05 55);         /* kor zemin üstündeki yazı */
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; min-height: 100vh; background: var(--bg); color: var(--tx);
  font: 400 16px/1.6 var(--font);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, p, figure, dl, dd, form { margin: 0; }
button, input { font: inherit; color: inherit; letter-spacing: inherit; }
::selection { background: rgba(255, 106, 43, .35); color: #fff; }
/* odak halkası iç sayfalarla aynı (css/sd/00-temel.css: kor --ring) */
:focus-visible { outline: 2px solid var(--ring); outline-offset: 3px; border-radius: 8px; }
main:focus { outline: none; }

.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }

/* ---------- liquid-glass (bend / face / edge katmanları) ---------- */
.lg { position: relative; isolation: isolate; }
.lg > .lg__bend, .lg > .lg__face, .lg > .lg__edge { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.lg > .lg__bend { z-index: 0; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); filter: url(#glass-blur); }
.lg > .lg__face { z-index: 1; box-shadow: 0 4px 4px rgba(0,0,0,.15), 0 0 12px rgba(0,0,0,.08), 0 0 24px rgba(255,255,255,.1); }
.lg > .lg__edge { z-index: 2; box-shadow: inset 2px 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 2px 0 rgba(255,255,255,.35); }
.lg > :not(.lg__bend):not(.lg__face):not(.lg__edge) { position: relative; z-index: 3; }

/* ---------- düğmeler ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px; border: 0; cursor: pointer;
  font: 500 15px/1 var(--font); letter-spacing: -.01em; white-space: nowrap;
  transition: transform .16s cubic-bezier(.4,0,.2,1), filter .16s, background-color .2s, border-color .2s, color .2s;
}
.btn:active { transform: scale(.98); }
.btn--ember { background: linear-gradient(180deg, #ff8a54, var(--ember)); color: var(--ember-ink); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 8px 30px -10px rgba(255,106,43,.7); }
.btn--ember:hover { filter: brightness(1.08); }
.btn--ghost { background: rgba(255,255,255,.06); color: var(--tx); box-shadow: inset 0 0 0 1px var(--line-2); }
.btn--ghost:hover { background: rgba(255,255,255,.1); }
.btn--quiet { background: transparent; color: var(--mut); padding-inline: 12px; }
.btn--quiet:hover { color: var(--tx); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; }
.tlink { color: var(--tx); border-bottom: 1px solid var(--line-2); padding-bottom: 1px; transition: border-color .2s, color .2s; white-space: nowrap; }
.tlink:hover { border-color: var(--ember); color: #fff; }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(255,106,43,.18), 0 0 12px rgba(255,106,43,.8); flex: none; }
.dot--red { background: #ff5577; box-shadow: 0 0 0 3px rgba(255,85,119,.2), 0 0 12px rgba(255,85,119,.8); }

.eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut); }
.eyebrow::before { content: ""; width: 18px; height: 1px; background: linear-gradient(90deg, var(--ember), transparent); }

.search__kbd { font: 500 11px/1 var(--mono); padding: 4px 6px; border-radius: 6px; border: 0; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line); color: var(--mut); white-space: nowrap; }

/* ================= İLK EKRAN ================= */
.hero { position: relative; z-index: 3; min-height: clamp(720px, 100svh, 1000px); display: flex; align-items: center; padding: 120px 0 72px; overflow: hidden; }
@supports (overflow: clip) { .hero { overflow-x: clip; overflow-y: visible; } }
.hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__grid {
  position: absolute; inset: 0;
  background-image: linear-gradient(to right, rgba(79,79,79,.18) 1px, transparent 1px), linear-gradient(to bottom, rgba(79,79,79,.18) 1px, transparent 1px);
  background-size: 54px 54px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, #000 55%, transparent 100%);
  mask-image: radial-gradient(ellipse 70% 60% at 30% 0%, #000 55%, transparent 100%);
}
.hero__glow { position: absolute; border-radius: 50%; filter: blur(80px); }
.hero__glow--ice { width: 760px; height: 760px; right: -140px; top: 8%; background: radial-gradient(circle, rgba(61,123,255,.30), rgba(61,123,255,0) 65%); }
.hero__glow--ember { width: 620px; height: 420px; right: 6%; bottom: -220px; background: radial-gradient(circle, rgba(255,106,43,.30), rgba(255,106,43,0) 65%); }
.noise {
  position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 180px; background: linear-gradient(transparent, var(--bg)); z-index: 1; pointer-events: none; }

.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 660px) minmax(0, 1fr); align-items: center; gap: 24px; }
.hero__copy { position: relative; z-index: 3; }

.pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; height: 36px; padding: 0 12px 0 5px; border-radius: 999px; font-size: 13.5px; color: #dfe3ec; background: rgba(255,255,255,.035); transition: transform .4s var(--ease-glass), background-color .3s; }
.pill:hover { transform: scale(1.02); background: rgba(255,255,255,.06); }
.pill:active { transform: scale(.98); }
.pill::after { content: ""; position: absolute; inset: -4px 0; }   /* dokunma alanı 44 px */
.pill > .lg__edge { box-shadow: inset 1px 1px 1px 0 rgba(255,255,255,.3), inset -1px -1px 1px 0 rgba(255,255,255,.2); }
.pill__tag { height: 26px; display: inline-grid; place-items: center; padding: 0 10px; border-radius: 999px; font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ember-ink); background: linear-gradient(180deg, #ffa071, var(--ember)); flex: none; }
.pill__t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pill__arr { color: var(--mut); flex: none; transition: transform .3s var(--ease-out); }
.pill:hover .pill__arr { transform: translateX(3px); }

.hero__title {
  margin-top: 28px; font-weight: 600; letter-spacing: -.048em; line-height: 1;
  font-size: clamp(2.6rem, 1.15rem + 4.1vw, 4.15rem); text-wrap: balance;
}
.hero__title .ln { display: block; padding-bottom: .06em;
  background: linear-gradient(180deg, #ffffff 10%, #c9d2e6 70%, #8e9ab4 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__title em { font-style: normal;
  background: linear-gradient(100deg, #ffd6b8 0%, var(--ember) 45%, #ff9a5c 70%, #ffd2b0 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__lead { margin-top: 22px; max-width: 540px; font-size: clamp(16px, 1.05vw + 10px, 18.5px); line-height: 1.6; color: var(--mut); text-wrap: pretty; }

/* ---- arama: liquid-gradient parıltısı ---- */
.search { position: relative; margin-top: 34px; max-width: 580px; }
.search__glow { position: absolute; inset: -12px -8px; border-radius: 30px; filter: blur(20px) saturate(1.15); opacity: .62; transition: opacity .5s; pointer-events: none; }
.search:focus-within .search__glow, .search:hover .search__glow { opacity: .9; }
.liquid { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
.liquid svg { position: absolute; top: 50%; left: 50%; width: 443px; height: 121px; transform: translate(-50%, -50%); mix-blend-mode: screen; }
.liquid svg:nth-child(2) { transform: translate(-50%, -50%) rotate(164.971deg); }
.liquid svg:nth-child(3) { transform: translate(-53%, -53%) rotate(-11.61deg); }
.liquid svg:nth-child(4) { width: 756px; height: 207px; transform: translate(-50%, -57%) rotate(-179.012deg); }
.liquid svg:nth-child(5) { width: 756px; height: 207px; transform: translate(-57%, -50%) rotate(-29.722deg); }
.liquid svg:nth-child(6) { width: 756px; height: 207px; transform: translate(-62%, -24%) rotate(160.227deg); }
.liquid svg:nth-child(7) { width: 756px; height: 207px; transform: translate(-67%, -29%) rotate(180deg); }

.search__field {
  position: relative; display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 8px 0 20px;
  border-radius: 20px; background: rgba(9, 11, 17, .86);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.11), inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px -20px rgba(0,0,0,.8);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: box-shadow .3s;
}
.search:focus-within .search__field { box-shadow: inset 0 0 0 1px rgba(255,160,110,.45), inset 0 1px 0 rgba(255,255,255,.1), 0 20px 60px -20px rgba(255,106,43,.35); }
.search__ico { color: var(--mut); flex: none; }
.search input {
  flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent; color: var(--tx);
  font: 400 17px/1 var(--font); letter-spacing: -.01em;
}
.search input { text-overflow: ellipsis; }
.search input::placeholder { color: #8c94a8; opacity: 1; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search__go { height: 48px; padding: 0 22px; border-radius: 14px; flex: none; }

.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.quick__l { font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); margin-right: 4px; }
.quick a { padding: 7px 12px; border-radius: 999px; font-size: 13.5px; color: #cfd5e1; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, color .2s, box-shadow .2s; }
.quick a:hover { color: #fff; background: rgba(255,106,43,.1); box-shadow: inset 0 0 0 1px rgba(255,106,43,.35); }
.quick a { position: relative; }
.quick a::after { content: ""; position: absolute; inset: -4px; }   /* dokunma alanı 44 px; aralık 8 px olduğu için komşuyla çakışmaz */

/* motion-number: sayaçlar */
.stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: start; gap: 0; margin-top: 44px; }
.stat { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; padding: 0 26px; border-left: 1px solid var(--line); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat dd { display: flex; align-items: baseline; font: 500 30px/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; }
.stat dt { font-size: 12.5px; line-height: 1.3; color: var(--dim); max-width: 120px; }
.stat__plus { color: var(--ember); margin-left: 1px; }

.roll { display: inline-flex; font-variant-numeric: tabular-nums; }
.roll.is-built { height: 1em; line-height: 1; overflow: hidden; vertical-align: baseline; }
.roll .dg { display: inline-block; height: 1em; overflow: hidden; position: relative; }
.roll .dg > span { display: flex; flex-direction: column; transform: translateY(calc(var(--d) * -10%)); }
.roll .dg > span > i { display: block; height: 1em; font-style: normal; text-align: center; }
.roll.armed .dg > span { transform: translateY(0); }
.roll.rolling .dg > span { animation: roll-in var(--rd, 1.5s) var(--ease-out) both; animation-delay: var(--dl, 0s); }
@keyframes roll-in { from { transform: translateY(0); } }

/* ---- küre ---- */
/* Küre sağ kenar boşluğuna taşar ama görünüm alanını aşmaz: taşma = içerik kenarından ekran kenarına kalan boşluk
   (en çok gut + 72px; 12px kaydırma çubuğu payı). Dar ekranda (961–1280) küre, giriş paragrafının (≈ 40 + 540 px) arkasına
   girmeyecek kadar küçülür: (100vw − 600px) × 1,1. */
.hero__globe { --kure-tasma: min(var(--gut) + 72px, max(var(--gut), (100vw - var(--wrap)) / 2 - 12px));
  position: relative; justify-self: end; width: min(800px, 56vw, (100vw - 600px) * 1.1); margin-right: calc(var(--kure-tasma) * -1); }
.globe { position: relative; width: 100%; aspect-ratio: 1; touch-action: pan-y; cursor: grab; }
.globe:active { cursor: grabbing; }
.globe__stage { position: absolute; inset: 0; }
.globe__stage canvas { width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1.2s ease; }
.globe.is-ready canvas { opacity: 1; }
.globe__ph {
  position: absolute; inset: 9.5%; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 28%, rgba(124,196,255,.14), transparent 50%),
    radial-gradient(circle at 50% 50%, #0b1424 0%, #070b14 62%, #05070c 100%);
  box-shadow: 0 0 140px 20px rgba(61,123,255,.18), inset -40px -50px 90px rgba(0,0,0,.65), inset 0 0 0 1px rgba(124,196,255,.12);
  transition: opacity 1.2s ease;
}
.globe__ph::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background-image: radial-gradient(rgba(150,190,255,.42) 1px, transparent 1.6px); background-size: 11px 11px;
  -webkit-mask-image: radial-gradient(circle at 42% 38%, #000 20%, transparent 70%);
  mask-image: radial-gradient(circle at 42% 38%, #000 20%, transparent 70%);
}
.globe.is-ready .globe__ph { opacity: 0; }
.globe.is-settled canvas, .globe.is-settled .globe__ph { transition: none; }
/* Yedek (grafik bağlamı yok / veri tasarrufu / kitaplık yüklenemedi / betik yok): aynı kürenin durağan karesi (yaylar dahil) ve
   etiketler o karedeki işaretçi konumlarında. Görsel yalnız yedekte istenir. */
.globe.globe--fallback .globe__ph, html:not(.js) .globe__ph {
  opacity: 1; inset: 0; border-radius: 0; box-shadow: none;
  background: url("/images/ana/kure-nfpa-fm-cen-ankara-yaylari.webp") center / 100% 100% no-repeat;
}
.globe--fallback .globe__ph::after, html:not(.js) .globe__ph::after { display: none; }
.globe--fallback canvas { display: none; }
.globe--fallback, html:not(.js) .globe { cursor: default; }
.hero__globe .globe.globe--fallback .glabel, html:not(.js) .globe .glabel { visibility: visible; opacity: 1; }
.globe--fallback .glabel--nfpa, html:not(.js) .glabel--nfpa { left: 27.87%; top: 30.97%; }
.globe--fallback .glabel--fm, html:not(.js) .glabel--fm { left: 27.53%; top: 31.17%; }
.globe--fallback .glabel--cen, html:not(.js) .glabel--cen { left: 62.35%; top: 27.68%; }
.globe--fallback .glabel--tr, html:not(.js) .glabel--tr { left: 76.39%; top: 30.98%; }

.glabel {
  position: absolute; z-index: 2; white-space: nowrap; pointer-events: none;
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px;
  font: 500 11px/1 var(--mono); letter-spacing: .02em; color: var(--mut);
  background: rgba(8,10,16,.72); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 6px 20px rgba(0,0,0,.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; transition: opacity .3s;
}
.glabel b { font-weight: 500; color: #fff; }
.glabel::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 8px var(--ember); }
.glabel--nfpa { translate: calc(-100% - 10px) -150%; }
.glabel--fm   { translate: calc(-100% - 14px) 40%; }
.glabel--cen  { translate: -50% calc(-100% - 12px); }
.glabel--tr   { translate: 12px -50%; }
.glabel--tr b { color: #ffc29e; }
/* ≤ 1279 px kürenin sağında etikete yer yok: Ankara etiketi işaretçinin altına, ortalı (EN 12845 etiketi üstte kalır) */
@media (max-width: 1279px) { .glabel--tr { translate: -50% 14px; } }
/* 621–760 px küre ekrandan geniş: FM Global etiketi soldan taşmasın diye işaretçinin altına */
@media (max-width: 760px) { .glabel--fm { translate: -50% 14px; } }
@supports (anchor-name: --a) {
  .glabel { left: anchor(center); top: anchor(center); }
  .glabel--nfpa { position-anchor: --cobe-nfpa; opacity: var(--cobe-visible-nfpa, 0); }
  .glabel--fm   { position-anchor: --cobe-fm;   opacity: var(--cobe-visible-fm, 0); }
  .glabel--cen  { position-anchor: --cobe-cen;  opacity: var(--cobe-visible-cen, 0); }
  .glabel--tr   { position-anchor: --cobe-tr;   opacity: var(--cobe-visible-tr, 0); }
}
.globe:not(.is-ready) .glabel { visibility: hidden; }
.globe__cap { position: absolute; left: 0; right: 0; bottom: 5%; display: flex; align-items: center; justify-content: center; gap: 10px; font: 500 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.globe__hint { color: #6f788c; }
html:not(.js) .globe__hint, .globe--fallback + .globe__cap .globe__hint { display: none; }

/* ---- ilk ekran giriş hareketi (CSS; head'deki bekçi zamanlayıcı .intro-done ile her koşulda sabitler) ---- */
@keyframes rise-blur { from { opacity: 0; filter: blur(14px); transform: translateY(18px); } }
/* LCP adayları (başlık satırları, giriş paragrafı) opaklıkla gizlenmez: ilk karede boyanır, yalnız bulanıklık + kayma */
@keyframes rise-blur-h1 { from { filter: blur(12px); transform: translateY(16px); } }
@keyframes globe-in { from { opacity: 0; transform: scale(.92) rotate(-6deg); } }
.js .hero .i { animation: rise-blur .9s var(--ease-out) both; }
.js .hero .ln.i, .js .hero .hero__lead.i { animation-name: rise-blur-h1; }
.js .hero .i1 { animation-delay: .05s; } .js .hero .i2 { animation-delay: .1s; } .js .hero .i3 { animation-delay: .18s; }
.js .hero .i4 { animation-delay: .3s; } .js .hero .i5 { animation-delay: .4s; } .js .hero .i6 { animation-delay: .5s; }
.js .hero .i7 { animation-delay: .58s; }
.js .hero .i8 { animation: globe-in 1.6s var(--ease-out) .1s both; }
.intro-done .hero .i { animation: none !important; }

/* ================= ORTAK BÖLÜM ================= */
.sec { position: relative; padding-block: var(--sec); }
.sec__head { max-width: 760px; margin-bottom: clamp(44px, 6vw, 80px); }
.sec__head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px 64px; align-items: end; }
.sec__title {
  margin-top: 18px; font-weight: 600; letter-spacing: -.042em; line-height: 1.02;
  font-size: clamp(2.1rem, 1.1rem + 3.3vw, 3.9rem); text-wrap: balance; padding-bottom: .1em;
  background: linear-gradient(180deg, #fff 20%, #aab3c7 130%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sec__lead { margin-top: 18px; font-size: clamp(16px, .6vw + 12px, 18px); line-height: 1.6; color: var(--mut); max-width: 560px; text-wrap: pretty; }
.sec__head--split .sec__lead { margin-top: 0; padding-bottom: 6px; }

/* ================= AKIŞ · animated-beam ================= */
.flow::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 40%, rgba(61,123,255,.06), transparent 70%); pointer-events: none; }
.beam {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 88px); align-items: center;
  padding: clamp(24px, 3.5vw, 48px); border-radius: 32px;
  background:
    radial-gradient(rgba(88,117,214,.22) 1px, transparent 1.2px) 0 0 / 22px 22px,
    linear-gradient(180deg, #090b12, #06070c);
  box-shadow: inset 0 0 0 1px var(--line), 0 40px 120px -40px rgba(0,0,0,.9);
  --beam-dir: h;
}
.beam::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 40%, rgba(5,6,10,.85)); }
.beam__svg { position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none; overflow: visible; }
.beam__col { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 12px; }
.beam__label { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; }
/* üç sütun: başlıklar aynı satırda (sütunlar eşit yükseklikte), düğüm yığını başlığın altındaki boşlukta ortalı */
@media (min-width: 961px) {
  .beam { align-items: stretch; }
  .beam__label + * { margin-top: auto; }
  .beam__col > :last-child { margin-bottom: auto; }
}
.node {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px;
  background: linear-gradient(180deg, #121622, #0c0f17); box-shadow: inset 0 0 0 1px rgba(255,255,255,.09), 0 0 20px -12px rgba(0,0,0,.8);
  font-size: 15px; color: var(--tx); transition: box-shadow .25s, transform .3s var(--ease-glass);
}
.node:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255,140,90,.4), 0 10px 30px -14px rgba(255,106,43,.5); }
.node__b { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 50%; font: 600 11px/1 var(--mono); letter-spacing: .02em; color: #fff;
  background: radial-gradient(circle at 30% 25%, #2a3550, #121826); box-shadow: inset 0 0 0 1.5px rgba(124,196,255,.35), 0 0 18px -6px rgba(124,196,255,.6); }
.node__t { flex: 1; min-width: 0; font-weight: 500; letter-spacing: -.01em; }
.node__n { font: 500 13px/1 var(--mono); color: var(--dim); }
.node--calc { padding: 13px 16px; font-size: 14.5px; color: #dce1ea; position: relative; }
.node--calc::after { content: ""; position: absolute; inset: -4px 0; }   /* dokunma alanı ≥ 44 px (düğüm aralığı 12 px) */
.node--calc::before { content: ""; width: 8px; height: 8px; flex: none; border-radius: 2px; background: var(--ember); box-shadow: 0 0 10px rgba(255,106,43,.8); transform: rotate(45deg); }
.result {
  position: relative; padding: 26px; border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,106,43,.10), rgba(255,106,43,0) 40%), linear-gradient(180deg, #141824, #0b0e16);
  box-shadow: inset 0 0 0 1px rgba(255,150,100,.28), 0 30px 80px -30px rgba(255,106,43,.45);
}
.result__tag { display: flex; align-items: center; gap: 10px; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ember-2); }
.result__head { margin-top: 16px; font-size: 15px; color: var(--mut); }
.result__eq { margin-top: 10px; font: 500 15px/1 var(--mono); color: var(--ice); }
.result__big { display: flex; align-items: baseline; gap: 8px; margin-top: 16px; font: 600 clamp(52px, 5vw, 72px)/1 var(--font); letter-spacing: -.05em; color: #fff; }
.result__approx { color: var(--ember); font-weight: 500; font-size: .6em; }
.result__unit { font-size: .32em; font-weight: 500; letter-spacing: -.01em; color: var(--mut); }
.result__calc { margin-top: 10px; font: 400 13.5px/1.5 var(--mono); color: #c6ccd8; text-wrap: balance; }   /* birim sayıdan kopup tek başına kalmasın */
.result__meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.result__meta li { padding: 5px 9px; border-radius: 8px; font: 500 11.5px/1.2 var(--mono); color: #cfd5e1; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px var(--line); }
.result__link { display: inline-flex; gap: 6px; margin-top: 20px; font-size: 14.5px; color: #fff; border-bottom: 1px solid rgba(255,106,43,.6); padding-bottom: 2px; }
.result__link:hover { border-color: var(--ember); }
.result__link, .tlink, .gy__btn, .foot__legal a { position: relative; }
.result__link::after { content: ""; position: absolute; inset: -9px -4px; }   /* dokunma alanı ≥ 44 px, görünüm aynı */
.tlink::after { content: ""; position: absolute; inset: -11px -4px; }
.gy__btn::after { content: ""; position: absolute; inset: -5px 0; }
.foot__legal a::after { content: ""; position: absolute; inset: -14px -4px; }

/* ================= KÜTÜPHANELER · spotlight-cards ================= */
.spot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px; }
.spot-card { position: relative; border-radius: 26px; padding: 1px; overflow: hidden; background: #1a2030; }
.spot-card::before, .spot-card::after {
  content: ""; position: absolute; border-radius: 50%; pointer-events: none; opacity: 0;
  transition: opacity .5s; transform: translate(var(--mouse-x, -999px), var(--mouse-y, -999px));
}
.spot-card::before { width: 320px; height: 320px; left: -160px; top: -160px; background: #9aa9c4; z-index: 10; filter: blur(100px); }
.spot-card::after { width: 384px; height: 384px; left: -192px; top: -192px; background: var(--ember); z-index: 30; filter: blur(100px); }
.spot:hover .spot-card::before { opacity: 1; }
.spot-card:hover::after { opacity: .12; }
.spot-inner {
  position: relative; z-index: 20; height: 100%; border-radius: inherit; overflow: hidden;
  background: linear-gradient(180deg, #0d1017, #090b11);
  padding: clamp(24px, 2.6vw, 36px);
  display: flex; flex-direction: column;
}
.c-nfpa { grid-column: span 7; } .c-en { grid-column: span 5; } .c-fm { grid-column: span 5; } .c-bykhy { grid-column: span 7; } .c-coz { grid-column: span 12; }
.lib__txt { position: relative; z-index: 2; }
.lib__count { display: flex; align-items: baseline; gap: 10px; font: 600 clamp(44px, 4.4vw, 64px)/1 var(--font); letter-spacing: -.05em; color: #fff; }
.lib__unit { font: 500 13px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); }
.lib__name { margin-top: 18px; font-size: clamp(20px, 1.4vw + 8px, 25px); font-weight: 600; letter-spacing: -.025em; line-height: 1.2; color: #fff; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 26px; }
.spot-card:focus-within { box-shadow: 0 0 0 2px var(--ring); }
.spot-card .stretch:focus-visible { outline: none; }
.lib__desc { margin-top: 10px; max-width: 470px; font-size: 15px; line-height: 1.6; color: var(--mut); }
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.tags li { padding: 5px 9px; border-radius: 8px; font: 500 11.5px/1.2 var(--mono); color: #cdd3df; background: rgba(255,255,255,.045); box-shadow: inset 0 0 0 1px var(--line); }
.lib__img { position: relative; margin: 28px calc(clamp(24px, 2.6vw, 36px) * -1) calc(clamp(24px, 2.6vw, 36px) * -1); flex: 1; min-height: 220px; overflow: hidden; }
/* Kart görselleri yazı içi 3B açıklayıcıların kareleridir: üstte gömülü başlık şeridi (rozet + tablo satırı), altta ölçü
   satırı / "sürükleyerek döndürün" ipucu var. Kartta yalnız sahne görünür: görselin [a, b] dikey aralığı kutuyu doldurur.
   --p = a / (1 − (b − a)) sabit nokta (object-position y ve ölçek merkezi), --s = 1 / (b − a). Kutu hangi orana
   gelirse gelsin görünen kısım [a, b] içinde kalır. --solma: üst kenar yumuşatma (sahnedeki etiketlere değmez). */
.lib__img { --px: 50%; --p: 50%; --s: 1; --solma: 14%; }
.lib__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--px) var(--p); transform-origin: var(--px) var(--p); scale: var(--s); transition: transform 1.2s var(--ease-out); }
.lib__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, #0b0d14 0%, rgba(11,13,20,0) var(--solma)), linear-gradient(0deg, rgba(9,11,17,.7), transparent 40%); }
.c-nfpa .lib__img { --px: 0%; --p: 60%; --s: 1.1765; --solma: 15%; }   /* a = 0,09 (rozet + Tablo şeridi)  b = 0,94 ("sürükleyerek döndürün"); sol kenar sabit: "Zemin planı" penceresi kesilmez */
.c-en .lib__img { --px: 0%; --p: 40%; --s: 1.2121; --solma: 6%; }      /* a = 0,07 (OH · S × D şeridi)       b = 0,895 ("Duvara 0,5S …" satırı); ölçü etiketleri solda */
.c-fm .lib__img { --p: 100%; --s: 1.105; --solma: 14%; }     /* a = 0,095 (Çift sıralı · H şeridi) b = 1 */
.spot-card:hover .lib__img img { transform: scale(1.04); }
.lib__cta { position: absolute; right: 24px; bottom: 22px; z-index: 3; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: #fff; background: rgba(10,12,18,.66); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background-color .25s, color .25s; }
.spot-card:hover .lib__cta { background: var(--ember); color: var(--ember-ink); }
.c-bykhy .spot-inner { background: radial-gradient(ellipse 80% 90% at 100% 100%, rgba(255,106,43,.12), transparent 60%), linear-gradient(180deg, #0d1017, #090b11); }
.lib__rel { position: relative; z-index: 5; margin-top: 26px; display: grid; gap: 8px; }
.lib__rel a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; border-radius: 14px; font-size: 14.5px; color: #e3e7ef; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, box-shadow .2s; }
.lib__rel a:hover { background: rgba(255,106,43,.08); box-shadow: inset 0 0 0 1px rgba(255,106,43,.35); }
.lib__rel small { flex: none; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.lib__mark { position: absolute; right: -12px; bottom: -36px; z-index: 0; font: 700 clamp(90px, 13vw, 190px)/1 var(--font); letter-spacing: -.07em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.06); pointer-events: none; }
.c-coz .spot-inner { flex-direction: row; align-items: center; gap: 40px; padding-block: 26px; }
.coz__head { flex: none; }
.coz__head .lib__count { font-size: 44px; }
.coz__head .lib__name { margin-top: 8px; font-size: 20px; }
.coz__head .lib__name a { position: relative; z-index: 5; }
.coz__head .lib__name a::after { content: ""; position: absolute; inset: -9px -4px; }   /* dokunma alanı ≥ 44 px */
.coz__head .lib__name a:hover { color: var(--ember-2); }

/* ---- marquee (--duration / --gap, iki iz; kopya js ile) ---- */
.marquee { --gap: 10px; --duration: 40s; display: flex; gap: var(--gap); overflow: hidden; padding: 6px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; flex-shrink: 0; justify-content: space-around; gap: var(--gap); animation: marquee var(--duration) linear infinite; }
.marquee--rev .marquee__track { animation-name: marquee-reverse; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-100% - var(--gap))); } }
@keyframes marquee-reverse { from { transform: translateX(calc(-100% - var(--gap))); } to { transform: translateX(0); } }
@keyframes marquee-vertical { from { transform: translateY(0); } to { transform: translateY(calc(-50% - var(--gap) / 2)); } }
@keyframes marquee-vertical-reverse { from { transform: translateY(calc(-50% - var(--gap) / 2)); } to { transform: translateY(0); } }
.marquee li a { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; padding: 12px 18px; border-radius: 999px; font-size: 15px; color: #dfe3ec; background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .2s, box-shadow .2s, color .2s; }
.marquee li a::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 2px; transform: rotate(45deg); background: var(--ember); opacity: .8; }
.marquee li a:hover, .marquee li a:focus-visible { color: #fff; background: rgba(255,106,43,.1); box-shadow: inset 0 0 0 1px rgba(255,106,43,.4); }
.marquee li a:focus-visible { outline-offset: -2px; }
.marquee--coz { flex: 1; min-width: 0; position: relative; z-index: 5; }
.marquee--coz li a { padding: 10.5px 16px; font-size: 14.5px; }   /* 44 px dokunma yüksekliği */
.marquee--coz li a::before { background: var(--ice); }

/* ================= HESAPLAR · 3d-marquee ================= */
.calcs { overflow: hidden; }
@supports (overflow: clip) { .calcs { overflow: clip; } }
.calcs__grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.calcs__copy { position: relative; z-index: 2; }
.m3d { position: relative; height: 620px; perspective: 1400px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent); mask-composite: intersect; }
.m3d__plane { position: absolute; left: 50%; top: 50%; width: 820px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  transform: translate(-50%, -50%) rotateX(42deg) rotateY(0deg) rotateZ(-30deg) scale(.92); transform-style: preserve-3d; }
.m3d__col { --gap: 18px; overflow: visible; }
.m3d__track { display: flex; flex-direction: column; gap: 18px; animation: marquee-vertical 46s linear infinite; }
.m3d__col:nth-child(2) { margin-top: -90px; } .m3d__col:nth-child(3) { margin-top: -30px; }
.m3d__col--rev .m3d__track { animation-name: marquee-vertical-reverse; animation-duration: 52s; }
.m3d a { position: relative; display: block; border-radius: 18px; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 20px 40px -20px rgba(0,0,0,.9); pointer-events: none; }
.m3d img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.m3d a span { position: absolute; left: 10px; bottom: 10px; padding: 5px 9px; border-radius: 8px; font: 500 11px/1.2 var(--mono); color: #fff; background: rgba(5,6,10,.7); }
.calcs__rows { display: grid; gap: 6px; margin-top: clamp(48px, 6vw, 80px); }
/* İki sütunda metin üstten başlar (dikey ortalama başlığı ≈ 140 px aşağı itiyordu); 3B şeridin solan üst kenarı
   (maskenin %14'ü ≈ 88 px) bölümün üst boşluğuna taşınır: bölüm geçişi ötekilerle aynı ritimde. */
@media (min-width: 961px) {
  .calcs__grid { align-items: start; }
  .m3d { margin-top: -88px; }
}

/* ================= EN ÇOK LAZIM OLANLAR · canlı Q = K·√P + cam ampul renkleri + iki araç kartı =================
   Canlı hesap kartı iç sayfaların "kor" diliyle (koyu kart, tek vurgu --kor); davranış js/ana-k.js. */
.need { --kart: linear-gradient(180deg, oklch(0.175 0.005 270), oklch(0.155 0.005 270));
  --kart-golge: 0 1px 0 0 rgba(255,255,255,.06) inset, 0 8px 20px -6px rgba(0,0,0,.55); }
.need__zemin { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(50% 36% at 72% 34%, oklch(0.80 0.15 62 / .06), transparent 70%),
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 48px 48px;
  -webkit-mask-image: radial-gradient(70% 55% at 50% 38%, #000 30%, transparent 100%);
  mask-image: radial-gradient(70% 55% at 50% 38%, #000 30%, transparent 100%); }
.need .wrap { position: relative; }
.need__item + .need__item { margin-top: clamp(48px, 6vw, 88px); }
.need__sub { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 32px; margin-bottom: 22px; }
.need__h { display: flex; align-items: baseline; gap: 14px; font-size: clamp(21px, .9rem + .9vw, 28px); font-weight: 600; letter-spacing: -.03em; line-height: 1.2; color: #fff; text-wrap: balance; }
.need__no { flex: none; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--kor); }
.need__p { max-width: 520px; font-size: 15px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }

/* ---- 01 · canlı K hesabı (tasarım: iki sütun; solda kontroller, sağda debi–basınç eğrisi) ---- */
.kq { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); border-radius: 20px; border: 1px solid var(--line); background: var(--kart); box-shadow: var(--kart-golge); overflow: hidden; }
.kq > * { min-width: 0; }
.kq__girdi { display: flex; flex-direction: column; gap: 26px; padding: clamp(22px, 3vw, 36px); border-right: 1px solid var(--line); }
.kq__fs { min-width: 0; margin: 0; padding: 0; border: 0; }
.kq__ab { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; width: 100%; margin-bottom: 12px; padding: 0; font-size: 14px; font-weight: 500; color: var(--tx); }
.kq__ab > span:last-child { font: 400 12px/1.2 var(--mono); color: var(--dim); }
.kq__ab-t { font: 500 14px/1.2 var(--font); color: var(--tx); }
.kq__cipler { display: flex; flex-wrap: wrap; gap: 6px; }
.kq__cip { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 5px 9px 6px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255,255,255,.025); color: var(--mut); font: 400 12.5px/1.4 var(--mono); cursor: pointer; transition: color .2s, border-color .2s, background-color .2s; }
.kq__cip:hover { color: var(--tx); border-color: var(--line-2); }
.kq__cip[aria-checked="true"] { color: var(--kor-ink); background: var(--kor); border-color: var(--kor); font-weight: 500; }
/* ABD karşılığı (gpm/psi½): çipin ikinci satırı */
.kq__cip-abd { font-size: 10.5px; font-weight: 400; line-height: 1.2; color: var(--dim); white-space: nowrap; transition: color .2s; }
.kq__cip:hover .kq__cip-abd { color: var(--mut); }
.kq__cip[aria-checked="true"] .kq__cip-abd { color: var(--kor-ink); opacity: .72; }
.kq__satir { display: flex; align-items: center; gap: 14px; }
.kq__satir--k { margin-top: 12px; }
.kq__elle { font-size: 13px; color: var(--dim); }
.kq__kutu { flex: none; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line-2); background: rgba(255,255,255,.03); transition: border-color .2s; }
.kq__kutu:focus-within { border-color: oklch(0.80 0.15 62 / .6); }
.kq__kutu:has(input[aria-invalid="true"]) { border-color: var(--kor); }
.kq__kutu label { font: 400 12px/1 var(--mono); color: var(--dim); }
.kq__kutu input { width: 76px; padding: 0; border: 0; outline: 0; background: transparent; color: var(--tx); font: 400 15px/1 var(--mono); text-align: right; -moz-appearance: textfield; appearance: textfield; }
.kq__kutu input::-webkit-outer-spin-button, .kq__kutu input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.kq__kutu input:focus-visible { outline: 0; }
.kq__kutu em { font: normal 400 12px/1 var(--mono); color: var(--dim); }
.kq__kay { --dolu: 8%; flex: 1; min-width: 0; height: 28px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.kq__kay::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--kor) var(--dolu), rgba(255,255,255,.1) var(--dolu)); }
.kq__kay::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,.1); }
.kq__kay::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--kor); }
.kq__kay::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border: 0; border-radius: 50%; background: var(--tx); box-shadow: 0 0 0 4px oklch(0.80 0.15 62 / .25), 0 2px 6px rgba(0,0,0,.5); }
.kq__kay::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--tx); box-shadow: 0 0 0 4px oklch(0.80 0.15 62 / .25); }
.kq__kay:focus-visible { outline-offset: 4px; }
.kq__olcek { display: flex; justify-content: space-between; margin-top: 4px; font: 400 11px/1.2 var(--mono); color: var(--dim); }
.kq__sonuc { position: relative; padding: 22px; border-radius: 16px; border: 1px solid oklch(0.80 0.15 62 / .22); overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, oklch(0.80 0.15 62 / .10), transparent 60%), oklch(0.16 0.006 270); }
.kq__formul { font: 400 14px/1.4 var(--mono); color: var(--mut); }
.kq__formul b { font-weight: 500; color: var(--tx); }
.kq__q { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.kq__q output { font: 600 clamp(56px, 2.5rem + 2.6vw, 84px)/.95 var(--font); letter-spacing: -.06em; font-variant-numeric: tabular-nums; color: var(--tx); text-shadow: 0 0 40px oklch(0.80 0.15 62 / .35); }
.kq__q span { font-size: 18px; color: var(--mut); }
.kq__donusum { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 10px; font: 400 12.5px/1.4 var(--mono); color: var(--dim); }
/* geçersiz giriş ve 12 bar üstü notu (js/ana-k.js yazar) */
.kq__uyari { position: relative; margin-top: 14px; padding: 9px 12px; border-radius: 10px; border: 1px solid oklch(0.80 0.15 62 / .4); background: oklch(0.80 0.15 62 / .08); font-size: 12.5px; line-height: 1.5; color: var(--tx); text-wrap: pretty; }
.kq__uyari[hidden] { display: none; }
.kq__ornek { padding-left: 14px; border-left: 2px solid oklch(0.80 0.15 62 / .45); font-size: 13.5px; line-height: 1.55; color: var(--mut); text-wrap: pretty; }
.kq__ornek button { position: relative; padding: 0; border: 0; background: none; color: var(--kor); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: oklch(0.80 0.15 62 / .4); }
.kq__ornek button::after { content: ""; position: absolute; inset: -12px -4px; }   /* dokunma alanı ≥ 44 px */
.kq__git { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.kq__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; border-radius: 11px; background: oklch(0.975 0.002 270); color: oklch(0.155 0.004 270); font-size: 14.5px; font-weight: 500; box-shadow: 0 1px 0 0 rgba(255,255,255,.6) inset, 0 8px 22px -8px rgba(0,0,0,.7); transition: background-color .2s, transform .15s; }
.kq__btn:hover { background: oklch(0.92 0.002 270); }
.kq__btn:active { transform: scale(.98); }
.kq__link { position: relative; display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--tx); white-space: nowrap; transition: color .2s, gap .25s var(--ease-out); }
.kq__link::after { content: ""; position: absolute; inset: -12px -4px; }   /* dokunma alanı ≥ 44 px */
.kq__link:hover { color: var(--kor); gap: 10px; }
.kq__link[hidden] { display: none; }
.kq__graf { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(18px, 2.5vw, 30px); }
.kq__gbas { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 12px; font-size: 13px; color: var(--mut); }
.kq__gbas b { font-weight: 500; color: var(--tx); }
.kq__lejant { display: flex; gap: 14px; font: 400 11.5px/1.2 var(--mono); }
.kq__lj { display: inline-block; width: 14px; height: 2px; margin-right: 6px; border-radius: 2px; vertical-align: middle; background: rgba(255,255,255,.25); }
.kq__lj--sec { background: var(--kor); }
#kq-egri { display: block; width: 100%; height: auto; overflow: visible; }
#kq-egri .eksen { stroke: rgba(255,255,255,.14); }
#kq-egri .izgara { stroke: rgba(255,255,255,.05); }
#kq-egri .eksen-yazi { fill: var(--dim); font-family: var(--mono); }
#kq-egri .aile { fill: none; stroke: rgba(255,255,255,.11); stroke-width: 1; }
#kq-egri .aile-yazi { fill: rgba(139,147,167,.9); font-family: var(--mono); }
#kq-egri .secili { fill: none; stroke: var(--kor); stroke-width: 2.25; filter: drop-shadow(0 0 6px oklch(0.80 0.15 62 / .7)); transition: d .35s var(--ease-out); }
#kq-egri .alan { fill: url(#kq-dolgu); transition: d .35s var(--ease-out); }
#kq-egri .kilavuz { stroke: oklch(0.80 0.15 62 / .55); stroke-dasharray: 3 4; }
#kq-egri .isaret { fill: var(--bg); stroke: var(--kor); stroke-width: 2.5; }
#kq-egri .isaret-hale { fill: oklch(0.80 0.15 62 / .18); }
#kq-egri .etiket-kutu { fill: oklch(0.2 0.006 270); stroke: oklch(0.80 0.15 62 / .4); }
#kq-egri .etiket-yazi { fill: var(--tx); font-family: var(--mono); }
.kq__gnot { font-size: 12.5px; line-height: 1.5; color: var(--dim); }

/* ---- 02 · cam ampul renkleri (NFPA 13 Tablo 7.2.4.1(a) + EN 12845 Tablo 37b) ---- */
.amp { padding: clamp(22px, 3vw, 36px); border-radius: 20px; border: 1px solid var(--line); background: var(--kart); box-shadow: var(--kart-golge); }
.amp__bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 28px; }
.amp__kaynak { margin-top: 10px; font: 400 12px/1.4 var(--mono); color: var(--dim); }
.amp__l { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-top: 24px; }
.amp__i { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 16px 14px 14px; border-radius: 14px; background: rgba(255,255,255,.025); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .25s; }
.amp__i::before { content: ""; position: absolute; left: -20%; right: -20%; top: -30%; height: 70%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 28%, transparent), transparent); opacity: .55; }
.amp__i:hover { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--c) 55%, transparent); }
.amp__i--koyu::before { background: radial-gradient(closest-side, rgba(255,255,255,.06), transparent); }
.amp__i--koyu:hover { box-shadow: inset 0 0 0 1px var(--line-2); }
.amp__i > * { position: relative; }
.amp__svg { flex: none; width: 22px; height: 66px; margin-bottom: 14px; color: var(--c); overflow: visible; }
.amp__cam { fill: rgba(255,255,255,.07); stroke: rgba(255,255,255,.45); stroke-width: 1; }
.amp__sivi { fill: currentColor; filter: drop-shadow(0 0 6px color-mix(in oklab, currentColor 60%, transparent)); }
.amp__i--koyu .amp__sivi { filter: none; }
.amp__kab { fill: rgba(255,255,255,.6); }
.amp__parilti { stroke: rgba(255,255,255,.4); stroke-width: 1.4; stroke-linecap: round; fill: none; }
.amp__ad { font: 500 11px/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mut); }
.amp__c { margin-top: 8px; font: 600 clamp(18px, .7rem + .7vw, 22px)/1.1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.amp__f { margin-top: 2px; font: 400 12px/1.3 var(--mono); color: var(--dim); }
.amp__s { margin-top: 12px; font-size: 13px; line-height: 1.3; color: #dfe3ec; }
.amp__t { margin-top: 4px; font: 400 11.5px/1.4 var(--mono); color: var(--dim); }
.amp__en { margin-top: 10px; padding-top: 10px; width: 100%; border-top: 1px solid var(--line); font: 400 11.5px/1.45 var(--mono); color: var(--mut); }
.amp__en b { display: block; font-weight: 500; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.amp__not { margin-top: 20px; max-width: 900px; font-size: 13.5px; line-height: 1.6; color: var(--mut); text-wrap: pretty; }
.amp__not b { font-weight: 500; color: var(--tx); }

/* ---- 03 / 04 · araç kartları ---- */
.need__ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.nk { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 3vw, 34px); border-radius: 20px; border: 1px solid var(--line); background: var(--kart); box-shadow: var(--kart-golge); overflow: hidden; transition: border-color .25s, transform .35s var(--ease-out); }
.nk::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(70% 60% at 100% 0%, oklch(0.80 0.15 62 / .08), transparent 70%); opacity: 0; transition: opacity .35s; }
.nk:hover { border-color: oklch(0.80 0.15 62 / .35); transform: translateY(-2px); }
.nk:hover::before { opacity: 1; }
.nk:focus-visible { outline-offset: 2px; border-radius: 20px; }
.nk > * { position: relative; }
.nk__ust { display: flex; align-items: center; justify-content: space-between; }
.nk__ok { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--tx); background: rgba(5,6,10,.5); transition: transform .3s var(--ease-out), background-color .3s, color .3s, border-color .3s; }
.nk:hover .nk__ok { transform: rotate(45deg); background: var(--kor); border-color: var(--kor); color: var(--kor-ink); }
.nk__t { margin-top: 16px; font-size: clamp(22px, 1rem + 1vw, 30px); font-weight: 600; letter-spacing: -.035em; line-height: 1.15; color: #fff; }
.nk__d { margin-top: 10px; max-width: 480px; font-size: 15px; line-height: 1.6; color: var(--mut); text-wrap: pretty; }
.nk__tags { margin-top: 18px; }
.nk__viz { display: block; margin-top: auto; padding-top: 26px; }
.nk__svg { display: block; width: 100%; max-width: 520px; height: auto; overflow: visible; }
.nk__yapi { fill: rgba(255,255,255,.035); }
.nk__cizgi { fill: none; stroke: rgba(255,255,255,.28); stroke-width: 1; }
.nk__boru { fill: none; stroke: rgba(255,255,255,.55); stroke-width: 2; stroke-linecap: round; }
.nk__def { fill: none; stroke: var(--kor); stroke-width: 2.5; stroke-linecap: round; }
.nk__olcu { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1; }
.nk__y { fill: var(--mut); font: 400 11px var(--mono); }
.nk__viz--denk { display: flex; flex-direction: column; gap: 12px; }
.nk__bar { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; align-items: end; margin-bottom: 6px; }
.nk__s { display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0; }
.nk__s i { display: block; width: 100%; height: calc(var(--p) * 84px); min-height: 3px; border-radius: 5px 5px 2px 2px; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px var(--line); }
.nk__s em { font: 400 10.5px/1 var(--mono); font-style: normal; color: var(--dim); white-space: nowrap; }
.nk__s b { font: 500 10.5px/1 var(--mono); color: var(--mut); white-space: nowrap; }
.nk__s--on i { background: linear-gradient(180deg, var(--kor), oklch(0.80 0.15 62 / .3)); box-shadow: 0 0 18px -4px oklch(0.80 0.15 62 / .6); }
.nk__s--on em, .nk__s--on b { color: var(--kor); }
.nk__denk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.nk__c { padding: 8px 11px; border-radius: 10px; font: 500 13px/1.2 var(--mono); color: #dfe3ec; background: rgba(255,255,255,.04); box-shadow: inset 0 0 0 1px var(--line); white-space: nowrap; }
.nk__c--kor { color: var(--kor-ink); background: var(--kor); box-shadow: none; }
.nk__c--top { color: #fff; box-shadow: inset 0 0 0 1px oklch(0.80 0.15 62 / .55); background: oklch(0.80 0.15 62 / .1); }
.nk__op { font: 500 14px/1 var(--mono); color: var(--dim); }
.nk__kaynak { font: 400 11.5px/1.4 var(--mono); color: var(--dim); }
/* 04 · iki standart: EN 12845 ve NFPA 13 çubuk satırları aynı ölçekte (d × A, L/dk), satır başına daha alçak çubuk */
.nk__viz--iki { gap: 10px; }
.nk__sat { display: flex; flex-direction: column; gap: 6px; }
.nk__std { font: 500 10.5px/1.2 var(--mono); letter-spacing: .02em; color: var(--mut); }
.nk__viz--iki .nk__bar { margin-bottom: 0; }
.nk__viz--iki .nk__s i { height: calc(var(--p) * 46px); }
.nk__viz--iki .nk__c { padding: 6px 9px; font-size: 12px; }
.nk__viz--iki .nk__denk { flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 4px; }
.nk__satir { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

@media (max-width: 1100px) {
  .amp__l { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .kq { grid-template-columns: 1fr; }
  .kq__girdi { border-right: 0; border-bottom: 1px solid var(--line); }
  .need__ikili { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .need__h { gap: 10px; }
  .kq__girdi { gap: 22px; }
  .kq__sonuc { padding: 18px; }
  .kq__q output { font-size: 56px; }
  .amp__l { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .amp__i { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; align-content: start; padding: 14px 12px 12px; }
  .amp__svg { grid-row: 1 / span 5; width: 16px; height: 50px; margin: 2px 0 0; }
  .amp__i > span:not(.amp__en) { grid-column: 2; }
  .amp__en { grid-column: 1 / -1; }
  .amp__c { margin-top: 6px; font-size: 18px; white-space: normal; }
  .amp__s { margin-top: 8px; font-size: 12.5px; }
  .amp__i:last-child { grid-column: 1 / -1; }
  .nk__c { padding: 7px 9px; font-size: 12px; }
  .nk__y { font-size: 13px; }
  .nk__bar { gap: 4px; }
  .nk__s em { font-size: 9.5px; letter-spacing: -.02em; }
}
/* dokunma hedefleri ≥ 44 px (telefon ve dokunmatik ekran) */
@media (max-width: 620px), (pointer: coarse) {
  .kq__cip { min-width: 52px; min-height: 44px; }
  .kq__kutu { height: 44px; }
  .kq__kay { height: 44px; }
}

/* ================= SON EKLENENLER · timeline ================= */
.recent__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.recent__head { position: sticky; top: 110px; }
.tl { position: relative; padding-left: 28px; }
.tl::before { content: ""; position: absolute; left: 4px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, var(--ember), rgba(124,196,255,.4) 50%, transparent); }
.tl__item { position: relative; }
.tl__item::before { content: ""; position: absolute; left: -28px; top: 26px; width: 9px; height: 9px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.35); transition: box-shadow .3s, background-color .3s; }
.tl__item:first-child::before { background: var(--ember); box-shadow: 0 0 0 4px rgba(255,106,43,.18), 0 0 14px rgba(255,106,43,.8); }
.tl__item:hover::before { background: var(--ember); box-shadow: 0 0 0 4px rgba(255,106,43,.18); }
.tl__item a { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; padding: 18px; margin-left: -6px; border-radius: 16px; transition: background-color .25s; }
.tl__item a:hover { background: rgba(255,255,255,.035); }
.tl__meta { grid-column: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tl__meta time { font: 500 11px/1 var(--mono); color: var(--dim); letter-spacing: .02em; }
.tl__cat { padding: 4px 8px; border-radius: 6px; font: 500 10.5px/1.1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #cdd3df; background: rgba(255,255,255,.05); }
.tl__cat.c-by, .tl__cat.c-co { color: #ffc29e; background: rgba(255,106,43,.12); }
.tl__cat.c-nf, .tl__cat.c-en { color: #a9d6ff; background: rgba(124,196,255,.12); }
.tl__cat.c-sa { color: #b9f0d9; background: rgba(79,209,165,.1); }
.tl__cat.c-fm { color: #ffd9a8; background: rgba(255,179,122,.1); }
.tl__new { padding: 3px 7px; border-radius: 999px; font: 500 10px/1.1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ember-ink); background: var(--ember-2); }
.tl__title { grid-column: 1; font-size: clamp(17px, .5vw + 14px, 20px); font-weight: 500; letter-spacing: -.02em; line-height: 1.35; color: #e8ebf2; text-wrap: pretty; }
.tl__arr { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: var(--dim); transition: transform .3s var(--ease-out), color .3s; }
.tl__item a:hover .tl__arr { transform: translateX(4px); color: var(--ember); }
/* günün yazısı */
.gy { position: relative; margin-top: 36px; padding: 22px 22px 18px; border-radius: 22px; max-width: 460px;
  background: radial-gradient(ellipse 90% 80% at 0% 0%, rgba(255,106,43,.10), transparent 60%), linear-gradient(180deg, #0f121b, #0a0c12);
  box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 70px -40px rgba(0,0,0,.9); }
.gy__chip { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-2); }
.gy__chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); }
.gy__title { margin-top: 14px; font-size: 19px; font-weight: 600; letter-spacing: -.02em; line-height: 1.3; color: #fff; text-wrap: pretty; }
.gy__title a:hover { color: var(--ember-2); }
.gy__desc { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--mut); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gy__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 36px; margin-top: 14px; }
.gy__cat { font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.gy__btn { height: 34px; padding: 0 14px; border-radius: 999px; border: 0; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px var(--line-2); color: #dfe3ec; font-size: 13px; cursor: pointer; transition: background-color .2s, color .2s; }
.gy__btn:hover { background: rgba(255,106,43,.12); color: #fff; }
.gy__btn[hidden] { display: none; }

/* ================= UYGULAMALAR · liquid-glass dock ================= */
.apps__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.apps__stage { position: relative; min-height: 560px; border-radius: 32px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); background: #0a0d14; }
.apps__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.apps__stage::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,6,10,.15), rgba(5,6,10,0) 40%, rgba(5,6,10,.55)); }
.dock { position: absolute; z-index: 2; left: 50%; bottom: 28px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 28px; background: rgba(255,255,255,.04); }
.dock > .lg__bend { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dock__i { width: 60px; height: 60px; border-radius: 16px; overflow: hidden; flex: none; box-shadow: 0 8px 18px -6px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.12); transition: transform .4s var(--ease-glass); }
.dock__i img { width: 100%; height: 100%; object-fit: cover; }
.dock__i--txt { display: grid; place-items: center; background: linear-gradient(160deg, #ffb37a, #ff5a1f); color: var(--ember-ink); font: 700 20px/1 var(--font); letter-spacing: -.04em; }
.dock__i--ice { background: linear-gradient(160deg, #a9dcff, #2f6bff); color: #04102a; }
.dock__sep { width: 1px; height: 40px; background: rgba(255,255,255,.25); }
.apps__stage:hover .dock__i:nth-child(4) { transform: translateY(-6px) scale(1.06); }
/* iki sütunun dar aralığında yedi simge sahneye sığsın (sahne ~445 px'e iner) */
@media (min-width: 961px) and (max-width: 1239px) {
  .dock { gap: 8px; padding: 10px; border-radius: 24px; }
  .dock__i { width: 48px; height: 48px; border-radius: 13px; }
  .dock__i--txt { font-size: 17px; }
  .dock__sep { height: 32px; }
}
.apps__cap { position: absolute; z-index: 2; left: 24px; top: 24px; border-radius: 999px; padding: 9px 14px; background: rgba(8,10,16,.4); font: 500 11.5px/1.2 var(--mono); color: #e9edf4; }
.apps__list { display: grid; gap: 8px; align-content: center; }
.apps__list a { display: grid; grid-template-columns: 52px 1fr; gap: 3px 16px; align-items: center; padding: 14px 16px; border-radius: 18px; transition: background-color .25s, box-shadow .25s; }
.apps__list a:hover { background: rgba(255,255,255,.035); box-shadow: inset 0 0 0 1px var(--line); }
.apps__list img, .apps__mono { grid-row: 1 / span 2; width: 52px; height: 52px; border-radius: 13px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); }
.apps__mono { display: grid; place-items: center; background: linear-gradient(160deg, #ffb37a, #ff5a1f); color: var(--ember-ink); font: 700 18px/1 var(--font); letter-spacing: -.04em; }
.apps__mono--ice { background: linear-gradient(160deg, #a9dcff, #2f6bff); color: #04102a; }
.apps__n { font-size: 16.5px; font-weight: 600; letter-spacing: -.02em; display: flex; align-items: center; gap: 8px; color: #fff; }
.apps__n i { font: 500 10px/1 var(--mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; border-radius: 6px; color: #a9d6ff; background: rgba(124,196,255,.12); }
.apps__n i.w { color: #ffc29e; background: rgba(255,106,43,.12); }
.apps__d { font-size: 14px; line-height: 1.5; color: var(--mut); }

/* ================= ALT BİLGİ · hover-footer ================= */
.foot { position: relative; padding-top: clamp(64px, 8vw, 110px); border-top: 1px solid var(--line); overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 100%, rgba(255,106,43,.10), transparent 70%), var(--bg); }
.foot__top { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: 56px; }
.foot__claim { margin-top: 18px; font-size: clamp(26px, 1.2rem + 1.4vw, 38px); font-weight: 600; letter-spacing: -.035em; line-height: 1.1; color: #fff; text-wrap: balance; }
.foot__p { margin-top: 14px; max-width: 520px; color: var(--mut); font-size: 15.5px; }
.foot__cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.foot__h { font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dim); margin-bottom: 14px; }
.foot__cols a { display: inline-block; padding: 5px 0; font-size: 14.5px; line-height: 1.45; color: #c9cfdb; transition: color .2s; }
.foot__cols a:hover { color: #fff; }
.foot__big { position: relative; margin-top: clamp(48px, 7vw, 96px); text-align: center; line-height: .8; user-select: none; -webkit-user-select: none; }
.foot__big span {
  display: block; font-weight: 700; letter-spacing: -.07em; font-size: clamp(76px, 19vw, 300px);
  --text-mouse-x: 50%; --text-mouse-y: 40%;
  background: radial-gradient(circle at var(--text-mouse-x) var(--text-mouse-y), #ffd9c0 0%, #ff6a2b 14%, #3b2a2a 34%, #141823 52%);
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  transform: translateY(14%);
}
.foot__legal { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px 16px; flex-wrap: wrap; padding-block: 22px 28px; font: 400 12.5px/1.4 var(--mono); color: var(--dim); border-top: 1px solid var(--line); background: var(--bg); }
.foot__legal a { color: var(--mut); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.foot__legal a:hover { color: #fff; }
.foot__build { min-height: 1.4em; font-size: 11.5px; color: var(--dim); letter-spacing: .02em; }   /* 6,6:1 (11,5 px için ≥ 4,5:1) */

/* ================= DUYARLI ================= */
@media (max-width: 1100px) {
  .hero__inner { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
}
@media (max-width: 960px) {
  .hero { min-height: 0; padding: 116px 0 0; display: block; }
  .hero__inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hero__globe { justify-self: center; width: min(760px, 118vw); margin: -10px 0 0; height: calc(min(760px, 118vw) * .7); overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, #000 62%, transparent 98%); mask-image: linear-gradient(180deg, #000 62%, transparent 98%); }   /* alt kesik çizgi yerine solma */
  .globe__cap { display: none; }
  .hero::after { height: 120px; }
  .sec__head--split { grid-template-columns: 1fr; align-items: start; }
  .sec__head--split .sec__lead { margin-top: 0; }
  .beam { grid-template-columns: 1fr; gap: 36px; --beam-dir: v; }
  /* dikey düzende ışınlar bir sonraki sütunun başlığına iner (js/ana.js): başlıklar ortalı */
  .beam__label { text-align: center; }
  .beam__col--src { display: grid; grid-template-columns: 1fr 1fr; }
  .beam__col--src .beam__label { grid-column: 1 / -1; }
  .beam__col--mid { padding-inline: 8%; }
  .c-nfpa, .c-en, .c-fm, .c-bykhy { grid-column: span 12; }
  .c-coz .spot-inner { flex-direction: column; align-items: stretch; gap: 18px; }
  .marquee--coz { width: 100%; }
  .calcs__grid { grid-template-columns: 1fr; }
  .m3d { height: 440px; }
  .recent__grid { grid-template-columns: 1fr; }
  .recent__head { position: static; }
  .gy { max-width: none; }
  .apps__grid { grid-template-columns: 1fr; }
  .apps__stage { min-height: 420px; }
  .foot__top { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 620px) {
  .hero { padding-top: 100px; }
  .hero__title { margin-top: 22px; letter-spacing: -.045em; }
  .pill { font-size: 12.5px; }
  .search__field { height: 58px; padding-left: 16px; border-radius: 18px; gap: 10px; }
  .search input { font-size: 16px; }
  .search__kbd { display: none; }
  .search__go { height: 44px; padding: 0 16px; }
  .stats { grid-template-columns: 1fr 1fr; gap: 20px 0; margin-top: 34px; }
  .stat { padding: 0 16px; }
  .stat:nth-child(odd) { padding-left: 0; border-left: 0; }
  .stat dd { font-size: 28px; }
  /* Küre giriş paragrafının arkasında (kürenin %32–54'ü) sönükleşir: parlak noktalar gövde metninin altına düşmez */
  .hero__globe { position: absolute; z-index: 0; top: 64px; right: -66vw; width: 118vw; height: auto; margin: 0; overflow: visible; opacity: .42; pointer-events: none;
    -webkit-mask-image: linear-gradient(180deg, #000 16%, rgba(0,0,0,.3) 30%, rgba(0,0,0,.3) 56%, transparent 88%);
    mask-image: linear-gradient(180deg, #000 16%, rgba(0,0,0,.3) 30%, rgba(0,0,0,.3) 56%, transparent 88%); }
  .hero__globe .glabel, .globe__cap { display: none; }
  .hero__lead { text-shadow: 0 0 10px var(--bg), 0 0 2px var(--bg); }   /* küre noktası harfin altına düşse de koyu hale */
  .hero { padding-bottom: 40px; }
  .beam { padding: 18px; border-radius: 24px; }
  .beam__col--src { gap: 8px; }
  .node { padding: 8px 10px 8px 8px; gap: 10px; font-size: 14px; }
  .node__b { width: 34px; height: 34px; font-size: 10px; }
  .node__n { display: none; }
  .beam__col--mid { padding-inline: 0; }
  .result { padding: 22px; }
  .result__calc { font-size: 12.5px; }
  .spot { gap: 10px; }
  .lib__img { min-height: 190px; }
  .lib__cta { right: 16px; bottom: 16px; }
  .m3d { height: 360px; border-radius: 24px; }
  .m3d__plane { width: 640px; }
  .tl { padding-left: 22px; }
  .tl__item::before { left: -22px; }
  .tl__item a { padding: 16px 10px; }
  .gy { padding: 18px; }
  .apps__stage { min-height: 340px; border-radius: 24px; }
  .dock { gap: 6px; padding: 8px; border-radius: 20px; bottom: 18px; }
  .dock__i { width: 36px; height: 36px; border-radius: 10px; }
  .dock__i--txt { font-size: 14px; }
  .dock__sep { height: 28px; }
  .apps__cap { left: 12px; right: 12px; top: 12px; text-align: center; }
  .foot__cols { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .foot__legal { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 380px) {
  .quick__l { width: 100%; }
}
@media (max-width: 359px) {
  .dock { gap: 5px; padding: 7px; }
  .dock__i { width: 31px; height: 31px; border-radius: 9px; }
  .dock__i--txt { font-size: 12px; }
}
/* dokunma hedefleri ≥ 44 px (telefon ve dokunmatik ekran) */
@media (max-width: 620px), (pointer: coarse) {
  .foot__cols a { display: flex; align-items: center; min-height: 44px; padding-block: 0; }
}

/* ================= HAREKET AZALTMA ================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .hero .i, .js .hero .i8 { animation: none !important; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { animation: none !important; flex-wrap: wrap; flex-shrink: 1; justify-content: flex-start; }
  .marquee .marquee__track[aria-hidden="true"] { display: none; }
  .calcs__rows .marquee { max-width: calc(var(--wrap) + var(--gut) * 2); margin-inline: auto; padding-inline: var(--gut); }
  .m3d__track { animation: none !important; }
  .roll.rolling .dg > span { animation: none !important; }
  #palet[open] { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}