/* Ferdi Giden - 5S & Kaizen Bilgi Merkezi: Tailwind dışında kalan animasyon ve sahne stilleri */

html { scroll-padding-top: 5.5rem; }

/* Okuma ilerleme çubuğu (yalnızca JS açıkken) */
.kz-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, #10b981, #f59e0b 60%, #f43f5e); display: none; pointer-events: none; }
.kz-js .kz-progress { display: block; }

.kz-grid-bg {
    background-image: linear-gradient(to right, rgb(100 116 139 / .09) 1px, transparent 1px), linear-gradient(to bottom, rgb(100 116 139 / .09) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse 80% 70% at 50% 30%, #000 30%, transparent 75%);
}
.kz-grad-text { background: linear-gradient(90deg, #059669, #10b981 45%, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.kz-prose p + p { margin-top: .9rem; }
.kz-prose strong { font-weight: 700; }

/* Öne çıkan snippet (tanım) kutusu */
.kz-def { border-color: rgb(var(--kz-rgb) / .35); background: rgb(var(--kz-rgb) / .07); }

/* Hero görselleri */
.kz-hub { fill: #fff; filter: drop-shadow(0 10px 25px rgb(15 23 42 / .14)); }
.dark .kz-hub { fill: #0f172a; }
.kz-ring { stroke: rgb(148 163 184 / .45); }
.kz-pent { stroke: #10b981; stroke-opacity: .55; }
.kz-axis { stroke: rgb(148 163 184 / .5); }
.kz-svg-muted { fill: #94a3b8; }
.dark .kz-svg-muted { fill: #64748b; }
.kz-chip-float { position: absolute; padding: .45rem .8rem; border-radius: .9rem; font-size: .75rem; font-weight: 800; color: #0f172a; background: rgb(255 255 255 / .92); border: 1px solid #e2e8f0; box-shadow: 0 12px 30px -12px rgb(15 23 42 / .28); white-space: nowrap; }
.dark .kz-chip-float { color: #e2e8f0; background: rgb(15 23 42 / .88); border-color: #334155; }
@keyframes kz-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.kz-float { animation: kz-float 6s ease-in-out infinite; }

/* Rehber kartları: degrade kenar, imleci izleyen ışık, 3B eğim (JS) */
.kz-card { transform-style: preserve-3d; will-change: transform; transition: box-shadow .35s ease; }
.kz-card-border { background: linear-gradient(135deg, var(--kz-c), rgb(148 163 184 / .25) 45%, var(--kz-c2)); opacity: .55; transition: opacity .35s ease; }
.kz-card:hover .kz-card-border, .kz-card:focus-visible .kz-card-border { opacity: 1; }
.kz-card:hover, .kz-card:focus-visible { box-shadow: 0 30px 60px -24px rgb(var(--kz-rgb) / .45); }
.kz-card:focus-visible { outline: 3px solid rgb(var(--kz-rgb) / .6); outline-offset: 4px; }
.kz-card-spot { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgb(var(--kz-rgb) / .16), transparent 60%); opacity: 0; transition: opacity .35s ease; }
.kz-card:hover .kz-card-spot { opacity: 1; }
.kz-card-icon { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.kz-card:hover .kz-card-icon { transform: rotate(-8deg) scale(1.08); }
.kz-badge { color: var(--kz-c); background: rgb(var(--kz-rgb) / .12); }
.kz-mini-5s span { width: 1.75rem; height: 1.75rem; border-radius: .55rem; display: grid; place-items: center; font-size: .7rem; font-weight: 900; color: #64748b; background: rgb(148 163 184 / .16); transition: background-color .3s ease, color .3s ease, transform .3s ease; }
.kz-card:hover .kz-mini-5s span { background: var(--kz-c); color: #fff; transform: translateY(-3px); }
.kz-mini-stairs span { width: .65rem; border-radius: .3rem; background: var(--kz-c); opacity: .85; transform-origin: bottom; transform: scaleY(.4); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.kz-card:hover .kz-mini-stairs span { transform: scaleY(1); }
.kz-mini-5s span:nth-child(2), .kz-mini-stairs span:nth-child(2) { transition-delay: .06s; }
.kz-mini-5s span:nth-child(3), .kz-mini-stairs span:nth-child(3) { transition-delay: .12s; }
.kz-mini-5s span:nth-child(4), .kz-mini-stairs span:nth-child(4) { transition-delay: .18s; }
.kz-mini-5s span:nth-child(5), .kz-mini-stairs span:nth-child(5) { transition-delay: .24s; }

/* Kaydırınca belirme: başlangıç durumu (JS açıkken); GSAP görünür hâle getirir */
.kz-js .kz-reveal { opacity: 0; transform: translateY(28px); }

/* 5S istasyon sahnesi */
.kz-scene { --sc-wall: #e2e8f0; --sc-board: #f8fafc; --sc-hole: #cbd5e1; --sc-bench: #b45309; --sc-leg: #92400e; --sc-floor: #94a3b8; --sc-dust: #78716c; --sc-silhouette: #94a3b8; --sc-card: #fff; --sc-card-stroke: #cbd5e1; --sc-text: #0f172a; }
.dark .kz-scene { --sc-wall: #0b1220; --sc-board: #1e293b; --sc-hole: #334155; --sc-bench: #92400e; --sc-leg: #78350f; --sc-floor: #475569; --sc-dust: #a8a29e; --sc-silhouette: #64748b; --sc-card: #0f172a; --sc-card-stroke: #334155; --sc-text: #e2e8f0; }
.kz-scene .sc-wall { fill: var(--sc-wall); }
.kz-scene .sc-board { fill: var(--sc-board); }
.kz-scene .sc-hole { fill: var(--sc-hole); }
.kz-scene .sc-bench { fill: var(--sc-bench); }
.kz-scene .sc-leg { fill: var(--sc-leg); }
.kz-scene .sc-floor { stroke: var(--sc-floor); }
.kz-scene .sc-dust { fill: var(--sc-dust); }
.kz-scene .sc-silhouette { stroke: var(--sc-silhouette); }
.kz-scene .sc-card { fill: var(--sc-card); stroke: var(--sc-card-stroke); }
.kz-scene .sc-text { fill: var(--sc-text); }
/* JS yokken sahnenin "tamamlanmış" hâli görünür: dağınıklık ve parıltılar gizli */
.kz-scene .kz-pre, .kz-scene .kz-spark { opacity: 0; }

/* 5S adımları */
.kz-step-num { color: rgb(148 163 184 / .4); transition: color .4s ease; }
.kz-step.is-active .kz-step-num { color: var(--kz-c); }
.kz-step-icon { color: var(--kz-c); background: rgb(var(--kz-rgb) / .12); transition: background-color .4s, color .4s, transform .4s; }
.kz-step.is-active .kz-step-icon { background: var(--kz-c); color: #fff; transform: rotate(-6deg); }
.kz-step-chip:hover { border-color: var(--kz-c); }
@media (min-width: 1024px) {
    .kz-js .kz-step { opacity: .4; transition: opacity .45s ease; }
    .kz-js .kz-step.is-active { opacity: 1; }
}
.kz-rail-fill { transform-origin: 50% 0; background: linear-gradient(to bottom, #f43f5e, #f59e0b, #0ea5e9, #10b981, #8b5cf6); }
.kz-js .kz-rail-fill { transform: scaleY(0); }
.kz-dot > span:first-child { background: var(--kz-c); transition: background-color .35s; }
.kz-js .kz-dot:not(.is-on) > span:first-child { background: rgb(148 163 184 / .3); }
.kz-dot.is-on > span:last-child { color: var(--kz-c); }

/* Faydalar ve ilkeler kartları */
.kz-feature { transition: border-color .35s ease, box-shadow .35s ease; }
.kz-feature:hover { border-color: rgb(var(--kz-rgb) / .5); box-shadow: 0 24px 50px -28px rgb(var(--kz-rgb) / .55); }
.kz-feature-icon { color: var(--kz-c); background: rgb(var(--kz-rgb) / .12); transition: transform .45s cubic-bezier(.2, .8, .2, 1), background-color .35s, color .35s; }
.kz-feature:hover .kz-feature-icon { transform: rotate(-10deg) scale(1.1); background: var(--kz-c); color: #fff; }

/* Adım adım uygulama zaman çizelgesi */
.kz-howto-fill { transform-origin: 50% 0; background: linear-gradient(to bottom, var(--kz-c), var(--kz-c2)); }
.kz-js .kz-howto-fill { transform: scaleY(0); }
.kz-howto-dot { color: var(--kz-c); border-color: rgb(var(--kz-rgb) / .35); background: #fff; transition: background-color .35s, color .35s, box-shadow .35s, border-color .35s; }
.dark .kz-howto-dot { background: #0f172a; }
.kz-howto-step.is-done .kz-howto-dot { background: var(--kz-c); border-color: var(--kz-c); color: #fff; box-shadow: 0 0 0 6px rgb(var(--kz-rgb) / .15); }

/* PDCA tekerleği */
.kz-ramp { fill: rgb(148 163 184 / .16); }
.kz-ramp-edge { stroke: #94a3b8; }
.dark .kz-ramp { fill: rgb(51 65 85 / .4); }
.dark .kz-ramp-edge { stroke: #475569; }
.kz-flag-pole { stroke: #64748b; }
.kz-pdca-card { transition: border-color .35s, box-shadow .35s, opacity .4s; }
.kz-pdca.is-active .kz-pdca-card { border-color: var(--kz-c); box-shadow: 0 24px 60px -30px rgb(var(--kz-rgb) / .6); }
@media (min-width: 1024px) {
    .kz-js .kz-pdca .kz-pdca-card { opacity: .45; }
    .kz-js .kz-pdca.is-active .kz-pdca-card { opacity: 1; }
}

/* İSG risk göstergesi */
.kz-hazard { background: repeating-linear-gradient(-45deg, #facc15 0 14px, #111827 14px 28px); }
.kz-risk[data-level="high"] { background: rgb(244 63 94 / .18); color: #fda4af; }
.kz-risk[data-level="mid"] { background: rgb(245 158 11 / .18); color: #fcd34d; }
.kz-risk[data-level="low"] { background: rgb(16 185 129 / .18); color: #6ee7b7; }
html:not(.kz-js) .kz-needle { transform-box: view-box; transform-origin: 160px 165px; transform: rotate(-62deg); }
.kz-ico-hazard { opacity: 0; }
.kz-chip { color: var(--kz-c); background: rgb(var(--kz-rgb) / .18); transition: opacity .35s, background-color .35s; }
.kz-js .kz-chip { opacity: .35; }
.kz-js .kz-chip.is-on { opacity: 1; background: rgb(var(--kz-rgb) / .28); }
.kz-isg-item { transition: border-color .35s, box-shadow .35s; }
.kz-isg-item.is-active { border-color: var(--kz-c); box-shadow: 0 24px 50px -30px rgb(var(--kz-rgb) / .6); }
.kz-isg-icon { color: var(--kz-c); background: rgb(var(--kz-rgb) / .12); transition: background-color .35s, color .35s, transform .35s; }
.kz-isg-item.is-active .kz-isg-icon { background: var(--kz-c); color: #fff; transform: scale(1.06) rotate(-6deg); }

/* Sık sorulan sorular */
.kz-faq summary::-webkit-details-marker { display: none; }
.kz-faq-icon { color: var(--kz-c); background: rgb(var(--kz-rgb) / .12); transition: transform .3s ease, background-color .3s, color .3s; }
.kz-faq[open] { border-color: rgb(var(--kz-rgb) / .45); }
.kz-faq[open] .kz-faq-icon { transform: rotate(45deg); background: var(--kz-c); color: #fff; }

/* 6S uyarı simgesi */
@keyframes kz-pulse { 0% { box-shadow: 0 0 0 0 rgb(250 204 21 / .55); } 70% { box-shadow: 0 0 0 16px rgb(250 204 21 / 0); } 100% { box-shadow: 0 0 0 0 rgb(250 204 21 / 0); } }
.kz-pulse { animation: kz-pulse 2.4s infinite; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .kz-float, .kz-pulse { animation: none; }
    .kz-card, .kz-card-icon, .kz-feature-icon, .kz-mini-5s span, .kz-mini-stairs span { transition: none; }
}

/* ===================== Eğitim portalı eklentileri ===================== */

/* Form alanları (kırmızı etiket formu) */
.kz-input { display: block; width: 100%; margin-top: .25rem; padding: .6rem .8rem; border-radius: .75rem; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; font-size: .875rem; font-weight: 500; outline: none; transition: border-color .2s, box-shadow .2s; }
.dark .kz-input { background: #0f172a; border-color: #334155; color: #e2e8f0; }
.kz-input:focus { border-color: #f43f5e; box-shadow: 0 0 0 3px rgb(244 63 94 / .2); }

/* Video oynatıcı */
.kz-video-btn:focus-visible { outline: 3px solid #ef4444; outline-offset: 3px; }
.kz-video iframe { width: 100%; height: 100%; border: 0; }
.kz-video-frame { aspect-ratio: 16 / 9; overflow: hidden; border-radius: 1rem; background: #000; }

/* Öz denetim: 3'lü seçim düğmesi */
.kz-seg { display: inline-flex; border-radius: .75rem; background: rgb(148 163 184 / .15); padding: .2rem; gap: .15rem; }
.kz-seg label { cursor: pointer; }
.kz-seg input { position: absolute; opacity: 0; pointer-events: none; }
.kz-seg span { display: block; padding: .4rem .85rem; border-radius: .6rem; font-size: .8rem; font-weight: 700; color: #64748b; transition: background-color .2s, color .2s; }
.kz-seg input:focus-visible + span { outline: 2px solid var(--kz-c, #10b981); outline-offset: 1px; }
.kz-seg input:checked + span { background: #fff; color: #0f172a; box-shadow: 0 1px 3px rgb(15 23 42 / .15); }
.dark .kz-seg input:checked + span { background: #1e293b; color: #fff; }
.kz-seg input[value="1"]:checked + span { background: #10b981; color: #fff; }
.kz-seg input[value="0.5"]:checked + span { background: #f59e0b; color: #fff; }
.kz-seg input[value="0"]:checked + span { background: #f43f5e; color: #fff; }
.kz-ring-bg { stroke: #e2e8f0; }
.dark .kz-ring-bg { stroke: #1e293b; }
[data-audit-ring] { transition: stroke-dasharray .6s ease, stroke .4s; }

/* İSG sahnesi */
.kz-wsvg { --ws-bg: #f1f5f9; --ws-road: #94a3b8; --ws-plan: #fff; --ws-plan-stroke: #94a3b8; --ws-machine: #cbd5e1; --ws-card: #fff; --ws-text: #0f172a; --ws-shadow: rgb(15 23 42 / .15); }
.dark .kz-wsvg { --ws-bg: #0b1220; --ws-road: #334155; --ws-plan: #0f172a; --ws-plan-stroke: #475569; --ws-machine: #1e293b; --ws-card: #1e293b; --ws-text: #e2e8f0; --ws-shadow: rgb(0 0 0 / .4); }
.kz-wsvg .ws-bg { fill: var(--ws-bg); } .kz-wsvg .ws-road { fill: var(--ws-road); }
.kz-wsvg .ws-plan { fill: var(--ws-plan); stroke: var(--ws-plan-stroke); stroke-width: 3; } .kz-wsvg .ws-machine { fill: var(--ws-machine); }
.kz-wsvg .ws-card { fill: var(--ws-card); stroke: var(--ws-plan-stroke); } .kz-wsvg .ws-text { fill: var(--ws-text); } .kz-wsvg .ws-shadow { fill: var(--ws-shadow); }
.kz-wsvg .kz-ws { opacity: 0; } .kz-wsvg .kz-ws[data-ws="0"] { opacity: 1; }
@keyframes kz-beacon { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.kz-beacon { animation: kz-beacon 1s steps(2) infinite; }
.kz-warn-card { transition: border-color .35s, box-shadow .35s; }
.kz-warn-card.is-active { border-color: var(--kz-c); box-shadow: 0 24px 50px -30px rgb(var(--kz-rgb) / .6); }
.kz-warn-card.is-active .kz-isg-icon { background: var(--kz-c); color: #fff; transform: scale(1.06) rotate(-6deg); }
@media (min-width: 1024px) { .kz-js .kz-warn-card:not(.is-active) { opacity: .55; } }

/* Tehlike avı */
.kz-hunt-svg { --hz-wall: #e2e8f0; --hz-floor: #cbd5e1; --hz-line: #94a3b8; --hz-lamp: #fef9c3; }
.dark .kz-hunt-svg { --hz-wall: #111827; --hz-floor: #1f2937; --hz-line: #374151; --hz-lamp: #854d0e; }
.kz-hunt-svg .hz-wall { fill: var(--hz-wall); } .kz-hunt-svg .hz-floor { fill: var(--hz-floor); } .kz-hunt-svg .hz-line { stroke: var(--hz-line); } .kz-hunt-svg .hz-lamp { fill: var(--hz-lamp); }
.kz-hz { cursor: pointer; outline: none; }
.kz-hz-hit { fill: transparent; }
.kz-hz-ring { fill: rgb(244 63 94 / .08); stroke: #f43f5e; stroke-width: 3; stroke-dasharray: 6 5; opacity: 0; transition: opacity .2s; transform-box: fill-box; transform-origin: center; }
.kz-hz:hover .kz-hz-ring, .kz-hz:focus-visible .kz-hz-ring { opacity: .9; }
.kz-hz-ok { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(.3); transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .3, 1.4); }
.kz-hz.is-found .kz-hz-ok { opacity: 1; transform: scale(1); }
.kz-hz.is-found .kz-hz-ring { opacity: 1; stroke: #10b981; fill: rgb(16 185 129 / .12); stroke-dasharray: none; }
@keyframes kz-hint { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
.kz-hz.is-hint .kz-hz-ring { opacity: 1; stroke: #f59e0b; animation: kz-hint .7s ease-in-out 3; }
@keyframes kz-shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.kz-hunt-scene.is-miss { animation: kz-shake .25s; }

/* Yazdırma: yalnızca hedef öğe */
.kz-print-target-log { }
@media print {
    body.kz-printing * { visibility: hidden !important; }
    body.kz-printing .kz-print-active, body.kz-printing .kz-print-active * { visibility: visible !important; }
    body.kz-printing .kz-print-active { position: absolute; left: 0; top: 0; width: 100%; }
    body.kz-printing .kz-noprint { display: none !important; }
    body.kz-printing .kz-tag-card, body.kz-printing .kz-print-active { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
@media (prefers-reduced-motion: reduce) { .kz-beacon, .kz-hz.is-hint .kz-hz-ring, .kz-hunt-scene.is-miss { animation: none; } }

.kz-step:focus-within, .kz-step:hover { opacity: 1 !important; }