/* =====================================================================
   Geleceğin Aynası — "ölçüm yapan makine" katmanı (Yeşilay tasarım değerlendirmesi, 21.09.2026)
   - İki işlevsel renk: marka yeşili (düğme/logo) + soğuk "tarama" rengi (çerçeve, veri etiketi, vizör)
   - Tipografi: karakterli başlık fontu (Space Grotesk) + okunaklı gövde (Inter) + etiketlerde ince mono (JetBrains Mono)
   - Yüz-tarama estetiği: landmark ağı (mesh), tarama çizgisi, köşeli vizör, nokta doku, parçacık ağı
   - Yumuşak geçişler: görsel değişiminde ani kare yerine bulanıklıktan netleşen geçiş
   Bu dosya site.css ve kiosk.css'ten SONRA yüklenir; yalnızca ekler ve üstüne yazar.
   ===================================================================== */

@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("../fonts/space-grotesk-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("../fonts/jetbrains-mono-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --scan: #5ad7ff;                                   /* soğuk tarama rengi */
  --scan-soft: rgba(90, 215, 255, 0.55);
  --scan-line: rgba(90, 215, 255, 0.28);
  --scan-glow: 0 0 14px rgba(90, 215, 255, 0.45), 0 0 40px rgba(90, 215, 255, 0.16);
  --font-display: "Space Grotesk", "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace;
}

/* ---------- Tipografi ---------- */
.display, .h1, .h2, .h3, .kiosk-title, .neon-number, .step-card h3, .faq summary { font-family: var(--font-display); letter-spacing: -0.01em; }
.eyebrow, .kiosk-eyebrow, .xr-row__title, .xr-tag, .demo-compare__tag, .fx-label, .fx-readout,
.kiosk-timer-ring text, [data-el="progress-label"], .wizard-progress + .fx-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.08em; }
.eyebrow, .kiosk-eyebrow { color: var(--scan); }
.eyebrow::before { background: var(--scan); box-shadow: var(--scan-glow); }

/* ---------- Tarama rengi: çerçeveler ve veri etiketleri (düğmeler ve logo marka yeşilinde kalır) ---------- */
.xp-camera-stage, .kiosk-camera__stage, .kiosk-compare, .xr-compare { border-color: var(--scan-soft) !important; box-shadow: var(--scan-glow); }
.xr-tag, .demo-compare__tag { border: 1px solid var(--scan-line); text-transform: uppercase; font-size: .68rem; }
.xr-tag--after { color: var(--scan); }
.xr-row__title::before { background: var(--scan); box-shadow: var(--scan-glow); }
.xr-row__title.is-healthy::before { background: var(--neon); box-shadow: var(--glow); }
.kiosk-compare__handle, .demo-compare__handle { background: var(--scan); box-shadow: var(--scan-glow); }
.xr-frame.is-today { border-color: var(--scan-line); }
.chip { border-color: var(--scan-line); }

/* Veri okuması (mono küçük etiket): "YAŞ PROJEKSİYONU +20", "İŞLENİYOR" vb. */
.fx-readout { display: inline-flex; align-items: center; gap: .6em; font-size: .72rem; text-transform: uppercase; color: var(--scan); }
.fx-readout::before { content: ""; width: .55em; height: .55em; border-radius: 50%; background: var(--scan); box-shadow: var(--scan-glow); animation: fxBlink 1.4s ease-in-out infinite; }
@keyframes fxBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- Köşeli vizör + tarama çizgisi (kamera sahnesi ve tanıtım görseli üzerinde) ---------- */
.fx-viewfinder { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.fx-viewfinder i { position: absolute; width: 11%; aspect-ratio: 1; border: 3px solid var(--scan); filter: drop-shadow(0 0 6px rgba(90, 215, 255, .7)); }
.fx-viewfinder i:nth-child(1) { top: 5%; left: 5%; border-right: 0; border-bottom: 0; border-top-left-radius: 10px; }
.fx-viewfinder i:nth-child(2) { top: 5%; right: 5%; border-left: 0; border-bottom: 0; border-top-right-radius: 10px; }
.fx-viewfinder i:nth-child(3) { bottom: 5%; left: 5%; border-right: 0; border-top: 0; border-bottom-left-radius: 10px; }
.fx-viewfinder i:nth-child(4) { bottom: 5%; right: 5%; border-left: 0; border-top: 0; border-bottom-right-radius: 10px; }
.fx-scanline { position: absolute; left: 4%; right: 4%; height: 18%; top: -18%; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg, transparent, rgba(90, 215, 255, .10) 55%, rgba(90, 215, 255, .55) 97%, #bdf1ff 100%);
  border-bottom: 2px solid #bdf1ff; box-shadow: 0 8px 24px rgba(90, 215, 255, .35); animation: fxScan 3.2s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes fxScan { 0% { top: -18%; opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.fx-host { position: relative; overflow: hidden; }

/* ---------- Yüz-tarama ağı (landmark noktaları + ince çizgiler) ---------- */
.fx-mesh { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.fx-mesh line, .fx-mesh polyline, .fx-mesh path { stroke: var(--scan); stroke-width: .35; fill: none; opacity: .55; stroke-dasharray: 2.4 1.6; animation: fxDash 9s linear infinite; }
.fx-mesh circle { fill: #d6f6ff; filter: drop-shadow(0 0 1.4px var(--scan)); animation: fxPulse 2.6s ease-in-out infinite; }
.fx-mesh circle:nth-of-type(3n) { animation-delay: .6s; }
.fx-mesh circle:nth-of-type(3n+1) { animation-delay: 1.2s; }
@keyframes fxDash { to { stroke-dashoffset: -80; } }
@keyframes fxPulse { 0%, 100% { opacity: .95; r: .9; } 50% { opacity: .35; r: .55; } }

/* ---------- Nokta doku (zemin) ve parçacık ağı (işleniyor) ---------- */
.fx-dots { background-image: radial-gradient(rgba(90, 215, 255, .16) 1px, transparent 1.4px); background-size: 22px 22px; }
.fx-particles { display: block; width: 100%; height: clamp(160px, 28vh, 320px); border-radius: var(--r-lg); border: 1px solid var(--scan-line);
  background: radial-gradient(60% 80% at 50% 50%, rgba(90, 215, 255, .08), transparent 70%), rgba(3, 9, 6, .6); }
.kiosk-screen .fx-particles { height: 34vmin; width: min(80vmin, 1700px); margin-inline: auto; }

/* ---------- Yumuşak geçiş: görsel değişince ani kare yerine bulanıklıktan netleşme ---------- */
.xr-stage .xr-frame img, .xr-stage .xr-compare img, .kiosk-result-panel img, .kiosk-compare img { animation: fxMorph .55s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes fxMorph { from { opacity: 0; filter: blur(10px) saturate(.6); transform: scale(1.025); } to { opacity: 1; filter: none; transform: none; } }

/* ---------- Tanıtım (hero) görseli: fotoğraf + ağ + tarama çizgisi ---------- */
.hero__scan { position: relative; aspect-ratio: 3/4; border-radius: var(--r-lg); overflow: hidden; border: 1.5px solid var(--scan-soft); box-shadow: var(--scan-glow); background: #030906; }
.hero__scan > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__scan .hero__after { clip-path: inset(0 0 0 50%); animation: heroReveal 9s ease-in-out infinite; }
@keyframes heroReveal { 0%, 12% { clip-path: inset(0 0 0 100%); } 45%, 62% { clip-path: inset(0 0 0 0); } 92%, 100% { clip-path: inset(0 0 0 100%); } }
.hero__readouts { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; gap: 8px; z-index: 4; }
.hero__readouts .fx-readout { background: rgba(3, 9, 6, .72); padding: 5px 9px; border-radius: 8px; border: 1px solid var(--scan-line); }
.hero__counter { display: inline-flex; align-items: center; gap: .6em; margin-top: 18px; font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em; color: var(--text-soft); }
.hero__counter strong { color: var(--scan); font-size: 1.15em; }
.hero__counter::before { content: ""; width: .6em; height: .6em; border-radius: 50%; background: var(--neon); box-shadow: var(--glow); animation: fxBlink 1.6s ease-in-out infinite; }

/* ---------- Kiosk bekleme ekranı: döngüsel tarama (kimse kullanmazken de dikkat çeker) ---------- */
.kiosk-attract__frame { position: relative; overflow: hidden; border-color: var(--scan-soft) !important; box-shadow: var(--scan-glow), var(--glow-soft); }
.kiosk-attract__frame .fx-scanline { animation-duration: 4.2s; }
.kiosk-attract .kiosk-counter { font-family: var(--font-mono); letter-spacing: .08em; color: var(--text-soft); font-size: clamp(.9rem, 1.7vmin, 1.8rem); }
.kiosk-attract .kiosk-counter strong { color: var(--scan); }
.kiosk-qr { display: flex; align-items: center; gap: 2vmin; padding: 1.4vmin 2vmin; border: 1.5px solid var(--scan-line); border-radius: var(--r-lg); background: rgba(3, 9, 6, .6); text-align: left; }
.kiosk-qr img { width: clamp(110px, 15vmin, 320px); height: auto; border-radius: 1vmin; background: #fff; padding: .6vmin; }
.kiosk-qr strong { display: block; font-family: var(--font-display); font-size: clamp(1rem, 2vmin, 2rem); }
.kiosk-qr span { color: var(--text-soft); font-size: clamp(.8rem, 1.4vmin, 1.4rem); }

@media (prefers-reduced-motion: reduce) {
  .fx-scanline, .fx-mesh line, .fx-mesh polyline, .fx-mesh path, .fx-mesh circle, .hero__scan .hero__after, .fx-readout::before, .hero__counter::before { animation: none !important; }
  .fx-scanline { top: 40%; opacity: .6; }
  .hero__scan .hero__after { clip-path: inset(0 0 0 50%); }
}

/* ===================== Ekran içi LED şeritler =====================
   Ekran kenarlarında, akışın durumuna göre renk ve hareket değiştiren ışık şeritleri (fiziksel LED şeridin ekrandaki
   karşılığı). Durum <html data-led="attract|calm|camera|processing|result|thanks|error"> ve kamera alt durumu
   data-led-sub="search|hold|countdown|flash" ile gelir (js/fx/led.js). Katmanlar: ::after = ışıma, ::before = diyot
   diyot taban ışığı, <b> = şerit boyunca koşan parlak ışık. Kioskta dört kenar (çerçeve), web akışında iki yan kenar. */
.fx-led { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: 0; transition: opacity .6s ease;
  --led-a: var(--neon, #2ee58a); --led-b: #eafff4; --led-dim: .42; --led-w: 5px; --led-speed: 6s; }
.fx-led--frame { --led-w: clamp(8px, 1.1vmin, 26px); }
html[data-led] .fx-led { opacity: 1; }
.fx-led__bar { position: absolute; }
.fx-led__bar--l, .fx-led__bar--r { top: 0; bottom: 0; width: var(--led-w); }
.fx-led__bar--l { left: 0; }
.fx-led__bar--r { right: 0; }
.fx-led__bar--t, .fx-led__bar--b { left: 0; right: 0; height: var(--led-w); display: none; }
.fx-led__bar--t { top: 0; }
.fx-led__bar--b { bottom: 0; }
.fx-led--frame .fx-led__bar--t, .fx-led--frame .fx-led__bar--b { display: block; }
.fx-led__bar::before, .fx-led__bar::after, .fx-led__bar > b { content: ""; position: absolute; inset: 0; display: block; transition: background-color .5s ease, opacity .5s ease; }
.fx-led__bar::after { background: var(--led-a); opacity: calc(var(--led-dim) * .9); filter: blur(calc(var(--led-w) * 1.6)); inset: calc(var(--led-w) * -1); }
.fx-led__bar::before { background: var(--led-a); opacity: var(--led-dim); }
.fx-led__bar > b { background-repeat: no-repeat; filter: drop-shadow(0 0 calc(var(--led-w) * .8) var(--led-b)); }
/* Diyot görünümü: şerit boyunca yuvarlak ışık noktaları (gerçek LED şerit gibi) */
.fx-led__bar::before, .fx-led__bar > b {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 82%, transparent 86%);
          mask-image: radial-gradient(circle closest-side, #000 82%, transparent 86%);
  -webkit-mask-repeat: repeat; mask-repeat: repeat; }
.fx-led__bar--l::before, .fx-led__bar--r::before, .fx-led__bar--l > b, .fx-led__bar--r > b { -webkit-mask-size: var(--led-w) calc(var(--led-w) * 1.45); mask-size: var(--led-w) calc(var(--led-w) * 1.45); }
.fx-led__bar--t::before, .fx-led__bar--b::before, .fx-led__bar--t > b, .fx-led__bar--b > b { -webkit-mask-size: calc(var(--led-w) * 1.45) var(--led-w); mask-size: calc(var(--led-w) * 1.45) var(--led-w); }
/* Koşan ışık: yan şeritlerde aşağıdan yukarı, üstte soldan sağa, altta sağdan sola */
.fx-led__bar--l > b, .fx-led__bar--r > b { background-image: linear-gradient(to bottom, transparent, var(--led-b), transparent); background-size: 100% 26%; background-position: 0 140%; animation: fxLedRunY var(--led-speed) linear infinite; }
.fx-led__bar--t > b, .fx-led__bar--b > b { background-image: linear-gradient(to right, transparent, var(--led-b), transparent); background-size: 26% 100%; background-position: -40% 0; animation: fxLedRunX var(--led-speed) linear infinite; }
.fx-led__bar--b > b { animation-direction: reverse; }
@keyframes fxLedRunY { from { background-position: 0 140%; } to { background-position: 0 -40%; } }
@keyframes fxLedRunX { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes fxLedSweepY { from { background-position: 0 140%; } to { background-position: 0 -40%; } }
@keyframes fxLedSweepX { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@keyframes fxLedBreathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes fxLedBlink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* Bekleme: yeşil, yavaş nefes + ağır koşan ışık */
html[data-led="attract"] .fx-led { --led-dim: .5; --led-speed: 7s; animation: fxLedBreathe 4.5s ease-in-out infinite; }
/* Onay / seçim / sorular / e-posta: sakin, sabit yeşil (koşan ışık yok) */
html[data-led="calm"] .fx-led { --led-dim: .38; }
html[data-led="calm"] .fx-led__bar > b { animation: none; opacity: 0; }
/* Kamera: soğuk tarama mavisi, arayan ışık → yüz bulununca yeşile döner → geri sayımda saniyede bir atar → çekimde beyaz parlar */
html[data-led="camera"] .fx-led { --led-a: var(--scan, #5ad7ff); --led-b: #e6fbff; --led-dim: .5; --led-speed: 2.4s; }
html[data-led="camera"][data-led-sub="hold"] .fx-led { --led-a: var(--neon, #2ee58a); --led-b: #eafff4; --led-dim: .8; --led-speed: 1.2s; }
html[data-led="camera"][data-led-sub="countdown"] .fx-led { --led-a: #d9ffe9; --led-dim: .95; animation: fxLedBlink 1s ease-in-out infinite; }
html[data-led="camera"][data-led-sub="countdown"] .fx-led__bar > b { animation: none; opacity: 0; }
html[data-led="camera"][data-led-sub="flash"] .fx-led { --led-a: #ffffff; --led-dim: 1; }
/* İşleniyor: mavi taban üzerinde hızlı yeşil koşan ışık */
html[data-led="processing"] .fx-led { --led-a: var(--scan, #5ad7ff); --led-b: var(--neon, #2ee58a); --led-dim: .42; --led-speed: 1.5s; }
/* Sonuç: parlak yeşil; üç hızlı süpürme, ardından sabit */
html[data-led="result"] .fx-led { --led-dim: .85; }
html[data-led="result"] .fx-led__bar--l > b, html[data-led="result"] .fx-led__bar--r > b { animation: fxLedSweepY 1.1s ease-in-out 3 both; }
html[data-led="result"] .fx-led__bar--t > b, html[data-led="result"] .fx-led__bar--b > b { animation: fxLedSweepX 1.1s ease-in-out 3 both; }
/* Teşekkür: yeşil nefes */
html[data-led="thanks"] .fx-led { --led-dim: .7; animation: fxLedBreathe 3.2s ease-in-out infinite; }
html[data-led="thanks"] .fx-led__bar > b { animation: none; opacity: 0; }
/* Hata / kamera sorunu: kehribar, yavaş yanıp sönme */
html[data-led="error"] .fx-led { --led-a: var(--warn, #ffc857); --led-dim: .8; animation: fxLedBlink 1.8s ease-in-out infinite; }
html[data-led="error"] .fx-led__bar > b { animation: none; opacity: 0; }
@media (max-width: 640px) { .fx-led:not(.fx-led--frame) { --led-w: 4px; } }
@media (prefers-reduced-motion: reduce) { .fx-led, .fx-led__bar > b { animation: none !important; } .fx-led__bar > b { opacity: 0; } }
@media print { .fx-led { display: none; } }