/* 404: "yol çalışması" sahnesi. Çizim dili efatura.css .scene figürleri ve duty-band TIR'larıyla aynı; renkler css/renkler.css.
   Yalnızca 404 sayfasında yüklenir. */
.nf { position: relative; overflow: hidden; padding: clamp(32px, 6vw, 80px) 0 clamp(56px, 8vw, 110px); text-align: center; isolation: isolate; }
.nf .container { position: relative; z-index: 2; }

/* Arka plan: KolayBi kurdelesi yavaşça akar */
.nf-ribbon { position: absolute; inset: auto -10% -6% -10%; width: 120%; height: 70%; z-index: -1; opacity: .5; pointer-events: none; }
.nf-ribbon path { fill: none; stroke-width: 20; stroke-linecap: round; stroke-dasharray: 60 30; animation: nfFlow 14s linear infinite; }
.nf-ribbon .k1 { stroke: color-mix(in srgb, var(--logo-blue) 18%, transparent); }
.nf-ribbon .k2 { stroke: color-mix(in srgb, var(--logo-mid) 16%, transparent); animation-duration: 18s; }
.nf-ribbon .k3 { stroke: color-mix(in srgb, var(--logo-cyan) 18%, transparent); animation-duration: 22s; }
@keyframes nfFlow { to { stroke-dashoffset: -900; } }

/* Sahne */
.nf-stage { max-width: 760px; margin: 0 auto; transform: translate3d(calc(var(--mx, 0) * 8px), calc(var(--my, 0) * 6px), 0); transition: transform .3s ease-out; }
.nf-scene { display: block; width: 100%; height: auto; overflow: visible; }
.w-hammer, .w-flag, .fl-cloth, .sparks { transform-box: fill-box; }
.nf-digit { font: 800 190px/1 var(--font-head); letter-spacing: -.05em; fill: url(#nfG); }

/* Vinç */
.cr-mast { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linejoin: round; }
.cr-jib { fill: var(--accent); stroke: var(--yellow-600); stroke-width: 1.5; }
.cr-tie { fill: none; stroke: var(--navy-500); stroke-width: 1.5; }
.cr-weight { fill: var(--navy); }
.cr-cab { fill: var(--primary); }
.cr-win { fill: var(--blue-100); }
.cr-trolley { fill: var(--navy); }
.cr-cable { fill: none; stroke: var(--navy); stroke-width: 2; }
.cr-hook { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.cr-sling { fill: none; stroke: var(--navy-500); stroke-width: 2; stroke-linecap: round; }
.nf-zero { animation: nfLower 4.8s ease-in-out infinite; transform-origin: 50% 0; transform-box: view-box; }
@keyframes nfLower { 0%, 100% { transform: translateY(-12px) rotate(-1.5deg); } 50% { transform: translateY(6px) rotate(1deg); } }

/* İşçiler (sc-* figürlerinin dili) */
.w-pants { fill: none; stroke: var(--navy); stroke-width: 7; stroke-linecap: round; }
.w-torso { fill: var(--primary); }
.w-torso.alt { fill: var(--logo-cyan); }
.w-vest { fill: none; stroke: var(--accent); stroke-width: 4; }
.w-head { fill: var(--navy-100); }
.w-hat { fill: var(--accent); }
.w-brim { fill: none; stroke: var(--yellow-600); stroke-width: 3; stroke-linecap: round; }
.w-arm { fill: none; stroke: var(--blue-700); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.hm-handle { fill: none; stroke: var(--navy-500); stroke-width: 4; stroke-linecap: round; }
.hm-head { fill: var(--navy); }
.w-hammer { transform-origin: 0% 79%; animation: nfHammer .9s ease-in infinite; }
@keyframes nfHammer { 0%, 100% { transform: rotate(-38deg); } 55% { transform: rotate(14deg); } 62% { transform: rotate(8deg); } }
.sparks path { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round; }
.sparks { opacity: 0; animation: nfSpark .9s ease-out infinite; transform-origin: 100% 100%; }
@keyframes nfSpark { 0%, 50% { opacity: 0; transform: scale(.4); } 58% { opacity: 1; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(1.2); } }
.fl-pole { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.fl-cloth { fill: var(--red-500); }
.w-flag { transform-origin: 0% 100%; animation: nfWave 1.6s ease-in-out infinite; }
.fl-cloth { transform-origin: 0% 50%; animation: nfCloth .5s ease-in-out infinite alternate; }
@keyframes nfWave { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } }
@keyframes nfCloth { from { transform: scaleX(1) skewY(0); } to { transform: scaleX(.8) skewY(-8deg); } }

/* Koniler ve uyarı ışığı */
.cone { fill: var(--red-500); }
.cone-band { fill: none; stroke: var(--card); stroke-width: 4; }
.cone-base { fill: var(--navy); }
.beacon { fill: var(--accent); animation: nfBlink 1s steps(2, jump-none) infinite; }
@keyframes nfBlink { 0% { opacity: 1; } 100% { opacity: .15; } }

/* Yol ve kamyon (duty-band TIR'ı) */
.nf-road { fill: none; stroke: color-mix(in srgb, var(--primary) 35%, transparent); stroke-width: 2; stroke-dasharray: 8 7; }
.nf-truck { transform-box: view-box; animation: nfTruck 13s linear infinite; filter: drop-shadow(0 6px 6px color-mix(in srgb, var(--navy-600, var(--navy)) 18%, transparent)); }
.nf-truck { transform: translate(-120px, 262px); }
@keyframes nfTruck { from { transform: translate(-120px, 262px); } to { transform: translate(840px, 262px); } }
.tk-box { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.tk-bar { fill: none; stroke: var(--red-500); stroke-width: 4; stroke-dasharray: 8 6; }
.tk-cab { fill: var(--primary); }
.tk-win { fill: var(--blue-100); }
.tk-chassis { fill: none; stroke: var(--navy); stroke-width: 3; stroke-linecap: round; }
.tk-wh { fill: var(--navy); stroke: var(--card); stroke-width: 2; }

/* Metin ve bağlantılar */
.nf-tag { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 6px 14px; border-radius: 999px; background: var(--primary-soft); color: var(--blue-700, var(--primary)); font: 700 13px var(--font-body); }
.nf-tag svg { width: 15px; height: 15px; }
.nf h1 { max-width: 720px; margin: 14px auto 0; font: 800 clamp(28px, 4vw, 46px)/1.12 var(--font-head); letter-spacing: -.02em; color: var(--navy); }
.nf h1 em { font-style: normal; background: var(--brand-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.nf-lead { max-width: 580px; margin: 14px auto 0; font-size: 17px; color: var(--ink-2); }

/* Yön tabelaları: direğe monteli, sola/sağa sivri levhalar (Türkiye yön levhası: mavi zemin, beyaz çerçeve ve yazı) */
.nf-sub { margin: 30px 0 14px; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.nf-signs { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 14px minmax(0, 1fr); row-gap: 14px; max-width: 620px; margin: 0 auto; padding-bottom: 34px; }
.nf-pole { grid-column: 2; grid-row: 2 / span 3; position: relative; width: 14px; margin: -16px 0 -34px; border-radius: 4px; background: linear-gradient(90deg, var(--navy-500), var(--navy) 60%); }
.nf-pole::after { content: ""; position: absolute; left: 50%; bottom: -2px; width: 64px; height: 10px; border-radius: 6px; background: var(--navy); transform: translateX(-50%); }
.sign { --tip: 26px; --bg: var(--blue-700); position: relative; z-index: 1; display: flex; min-height: 64px; color: #fff; text-decoration: none; border-radius: 6px; transform-origin: var(--hinge, 50% 0); transition: transform .25s; filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--navy) 22%, transparent)); }
.sign::before, .sign::after { content: ""; position: absolute; inset: 0; clip-path: var(--shape); }
.sign::before { background: #fff; }
.sign::after { inset: 3px; background: var(--bg); clip-path: var(--shape-in, var(--shape)); }
.sign .s-in { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px; width: 100%; padding: 10px 20px; text-align: left; }
.sign b { font: 800 clamp(16px, 2.2vw, 19px)/1.15 var(--font-head); letter-spacing: -.01em; }
.sign small { font-size: 13px; font-weight: 600; color: color-mix(in srgb, #fff 82%, transparent); }
.sign.r { grid-column: 3; grid-row: auto; margin-left: -6px; --hinge: 0 50%; --shape: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
.sign.r .s-in { padding-right: calc(var(--tip) + 12px); }
.sign.l { grid-column: 1; margin-right: -6px; --hinge: 100% 50%; --shape: polygon(var(--tip) 0, 100% 0, 100% 100%, var(--tip) 100%, 0 50%); }
.sign.l .s-in { padding-left: calc(var(--tip) + 12px); text-align: right; align-items: flex-end; }
.sign.home { grid-column: 1 / -1; grid-row: 1; justify-self: center; width: min(100%, 360px); min-height: 84px; --bg: var(--primary); --hinge: 50% 100%; --shape: polygon(0 18px, 50% 0, 100% 18px, 100% 100%, 0 100%); }
.sign.home::after { background: var(--brand-gradient); }
.sign.home .s-in { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 10px; padding-top: 22px; text-align: center; }
.sign.home .s-in small { flex-basis: 100%; }
.sign.home b { font-size: clamp(20px, 2.8vw, 24px); }
.sign.home svg { width: 20px; height: 20px; transform: rotate(-45deg); }
.sign.p { grid-column: 1 / -1; justify-self: center; min-height: 56px; --bg: var(--navy); --shape: inset(0 round 6px); }
.sign.p .s-in { align-items: center; text-align: center; padding: 8px 22px; }
.sign:hover { animation: nfSwing .7s ease-in-out; }
.sign.home:hover { animation-name: nfLift; }
.sign:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
@keyframes nfSwing { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-3deg) translateY(-2px); } 65% { transform: rotate(2deg); } }
@keyframes nfLift { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 70% { transform: translateY(-2px); } }

@media (max-width: 760px) { .nf-lead { font-size: 16px; } }
@media (max-width: 480px) {
  .nf-signs { grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr); row-gap: 12px; }
  .nf-pole { width: 10px; }
  .sign { --tip: 18px; min-height: 58px; }
  .sign .s-in { padding: 8px 12px; }
  .sign.r .s-in { padding-right: calc(var(--tip) + 8px); }
  .sign.l .s-in { padding-left: calc(var(--tip) + 8px); }
  .sign small { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .nf *, .nf *::before, .nf *::after { animation: none !important; transition: none !important; }
  .nf-stage { transform: none !important; }
  .nf-truck { display: none; }
  .sparks { opacity: 0; }
}

/* Tek ekrana sığdır: masaüstünde solda sahne + metin, sağda tabelalar; telefonda sıkı dikey düzen */
.nf { padding: clamp(16px, 3vh, 40px) 0 clamp(24px, 4vh, 48px); }
.nf-grid { display: grid; gap: 8px; }
@media (min-width: 961px) {
  .nf-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; gap: 48px; }
  .nf-stage { max-width: 600px; }
  .nf h1 { font-size: clamp(30px, 3vw, 42px); }
  .nf-sub { margin-top: 0; }
  .nf-way { padding-top: 8px; }
}
@media (max-height: 820px) and (min-width: 961px) { .nf-stage { max-width: 500px; } .nf h1 { font-size: 32px; } }
@media (max-width: 960px) {
  .nf-stage { max-width: 520px; }
  .nf-tag { margin-top: 6px; padding: 4px 12px; }
  .nf h1 { margin-top: 8px; font-size: clamp(24px, 6.4vw, 34px); }
  .nf-lead { margin-top: 8px; font-size: 15px; }
  .nf-more { display: none; }
  .nf-sub { margin: 14px 0 8px; font-size: 12px; }
  .nf-signs { row-gap: 10px; padding-bottom: 24px; }
  .nf-pole { margin-bottom: -24px; }
  .sign { min-height: 50px; }
  .sign.home { min-height: 66px; }
  .sign.home .s-in { padding-top: 16px; padding-bottom: 6px; }
  .sign.p { min-height: 48px; }
  .sign .s-in { padding-top: 6px; padding-bottom: 6px; }
}