/* Nasıl çalışır · section-specific rules. Shared hc-* carousel rules live in base.css */
/* ---- Nasıl çalışır · tab-specific ---- */
#nasil-calisir .hc-tile{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 80%,transparent),color-mix(in srgb,var(--accent) 33%,transparent));box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 20px 40px -14px color-mix(in srgb,var(--accent) 40%,transparent);opacity:.9}
#nasil-calisir .hc-tile::after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.45),rgba(255,255,255,0) 50%)}
#nasil-calisir .nc-prog-row{display:flex;align-items:center;gap:10px}
/* tab 1 · profil */
#nasil-calisir .nc-kv{margin-top:14px;display:flex;flex-direction:column;gap:8px}
#nasil-calisir .nc-kv-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 14px;border-radius:12px;background:linear-gradient(180deg,#FBFCFD,#F3F5F8);box-shadow:inset 0 0 0 1px rgba(20,40,60,.07),inset 0 1px 0 #fff,0 1px 1px rgba(20,40,60,.04);font-size:13px;line-height:1.3}
#nasil-calisir .nc-kv-k{color:#6B7280}
#nasil-calisir .nc-kv-v{font-weight:600;color:#17202A;text-align:right;white-space:nowrap}
#nasil-calisir .nc-devam{margin-top:16px;display:flex;justify-content:flex-end}
#nasil-calisir .nc-devam-btn{height:38px;padding:0 22px;border-radius:var(--radius-pill);background:linear-gradient(180deg,#0E6B84 0%,#0E6B84 60%,rgba(0,0,0,.12) 100%),#0E6B84;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 6px 14px -4px #0E6B8499,0 1px 2px rgba(0,0,0,.15);display:inline-flex;align-items:center;color:#fff;font-size:14px;font-weight:600;letter-spacing:-0.01em}
/* tab 2 · rapor */
#nasil-calisir .nc-unis{margin-top:14px;display:flex;flex-direction:column;gap:8px}
#nasil-calisir .nc-uni{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 14px;border-radius:12px;background:linear-gradient(180deg,#FFFFFF,#F6F8FA);box-shadow:inset 0 0 0 1px rgba(20,40,60,.07),0 2px 6px rgba(20,40,60,.05)}
#nasil-calisir .nc-uni-n{font-size:13px;font-weight:600;color:#17202A}
#nasil-calisir .nc-chip{font-size:12px;font-weight:600;padding:5px 11px;border-radius:var(--radius-pill);background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)),var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.05),0 1px 2px rgba(20,40,60,.08);white-space:nowrap}
#nasil-calisir .nc-chip-warn{--c:#FBE7C2;color:#7A4E00}
#nasil-calisir .nc-chip-ok{--c:#CDEEDB;color:#155A33}
#nasil-calisir .nc-label{margin-top:16px;font-size:11px;font-weight:700;color:#6B7280;text-transform:uppercase;letter-spacing:0.08em}
#nasil-calisir .nc-cost{margin-top:6px;border-radius:12px;overflow:hidden;font-size:13px;background:linear-gradient(180deg,#FBFCFD,#F3F5F8);box-shadow:inset 0 0 0 1px rgba(20,40,60,.07)}
#nasil-calisir .nc-cost-row{display:flex;justify-content:space-between;padding:9px 14px;color:#17202A}
#nasil-calisir .nc-cost-row + .nc-cost-row{border-top:1px solid rgba(20,40,60,.06)}
#nasil-calisir .nc-cost-v{font-weight:600;font-variant-numeric:tabular-nums}
#nasil-calisir .nc-note{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:#6B7280}
#nasil-calisir .nc-note-dot{width:6px;height:6px;border-radius:50%;background:#0E6B84;box-shadow:0 0 0 3px #0E6B8422;flex:none}
/* tab 3 · belgeler */
#nasil-calisir .nc-chks{margin-top:14px;display:flex;flex-direction:column;gap:6px}
#nasil-calisir .nc-chk{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;background:linear-gradient(180deg,#FFFFFF,#F8FAFB);box-shadow:inset 0 0 0 1px rgba(20,40,60,.06),0 1px 3px rgba(20,40,60,.05)}
#nasil-calisir .nc-chk.is-done{background:linear-gradient(180deg,#F5F7F9,#EFF2F5);box-shadow:inset 0 0 0 1px rgba(20,40,60,.06)}
#nasil-calisir .nc-box{flex:none;width:17px;height:17px;border-radius:5px;background:linear-gradient(180deg,#fff,#F1F3F6);box-shadow:inset 0 0 0 1.5px #C3CAD3;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;line-height:1}
#nasil-calisir .is-done .nc-box{background:linear-gradient(160deg,#7A5FD0,#5B3FA8);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),0 2px 5px rgba(91,63,168,.35)}
#nasil-calisir .nc-chk-t{flex:1;font-size:13px;color:#17202A;font-weight:600;line-height:1.3}
#nasil-calisir .is-done .nc-chk-t{color:#6B7280;font-weight:500;text-decoration:line-through}
#nasil-calisir .nc-chk-d{font-size:12px;color:#6B7280;white-space:nowrap}
/* tab 4 · kontrol */
#nasil-calisir .nc-letter-grid{margin-top:14px;display:grid;grid-template-columns:1.25fr 1fr;gap:14px;flex:1}
#nasil-calisir .nc-letter{font-size:12.5px;line-height:1.6;color:#17202A;padding:14px;border-radius:12px;background:linear-gradient(180deg,#FBFCFD,#F3F5F8);box-shadow:inset 0 0 0 1px rgba(20,40,60,.07)}
#nasil-calisir .nc-letter mark{color:#17202A;padding:1px 3px;border-radius:4px}
#nasil-calisir .nc-mark-ok{background:linear-gradient(180deg,#D7F2E2,#C4EBD4);box-shadow:inset 0 -1.5px 0 #1F7A4F}
#nasil-calisir .nc-mark-bad{background:linear-gradient(180deg,#FCE0E4,#F8CDD3);box-shadow:inset 0 -1.5px 0 #B3261E}
#nasil-calisir .nc-cards{display:flex;flex-direction:column;gap:8px}
#nasil-calisir .nc-card{padding:11px 12px;border-radius:12px;background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0)),var(--c);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04),inset 0 1px 0 rgba(255,255,255,.7),0 2px 6px rgba(20,40,60,.06);font-size:12.5px;line-height:1.4;font-weight:600}
#nasil-calisir .nc-card-ok{--c:#CDEEDB;color:#155A33}
#nasil-calisir .nc-card-bad{--c:#FBD9DD;color:#8F1E17}
#nasil-calisir .nc-card-info{--c:#D6E7ED;color:#0E6B84}
@media (max-width:599px){#nasil-calisir .nc-letter-grid{grid-template-columns:1fr}}
/* ---- letter highlights: the base marks carry the text only; a transparent underlay copy carries the highlight backgrounds so they can sweep in without touching the text ---- */
#nasil-calisir .nc-letter{position:relative;isolation:isolate}
#nasil-calisir .nc-letter > mark{background:none;box-shadow:none}
#nasil-calisir .nc-letter-bg{position:absolute;inset:0;z-index:-1;padding:14px;color:transparent;pointer-events:none;user-select:none;-webkit-user-select:none}
#nasil-calisir .nc-letter-bg mark{color:transparent}
/* ---- checklist ticks (drawable SVG; same 11px white tick as before) ---- */
#nasil-calisir .nc-tick{width:11px;height:11px;display:block}
#nasil-calisir .nc-chk:not(.is-done) .nc-tick{display:none}

/* ==== motion (ANIM-C) · transform/opacity/clip-path only, skipped under reduced motion ==== */
#nasil-calisir .hc-panels{position:relative}
#nasil-calisir .hc-shot{perspective:1200px}
#nasil-calisir .hc-prog-fill{transform-origin:0 50%}
@media (prefers-reduced-motion:no-preference){
/* tab switch: outgoing slides 16px and fades on top, incoming fades in from the opposite side (350 ms) */
#nasil-calisir .hc-panel.is-active{animation:none}
#nasil-calisir .hc-panel.hc-leave{position:absolute;inset:0;z-index:2;pointer-events:none;animation:hcLeave .35s cubic-bezier(.2,.7,.2,1) both}
#nasil-calisir .hc-panel.hc-to-l{--hc-dx:-16px}
#nasil-calisir .hc-panel.hc-to-r{--hc-dx:16px}
#nasil-calisir .hc-panel.is-active.hc-from-r{--hc-dx:16px;animation:hcEnter .35s cubic-bezier(.2,.7,.2,1) both}
#nasil-calisir .hc-panel.is-active.hc-from-l{--hc-dx:-16px;animation:hcEnter .35s cubic-bezier(.2,.7,.2,1) both}
@keyframes hcLeave{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(var(--hc-dx))}}
@keyframes hcEnter{from{opacity:0;transform:translateX(var(--hc-dx))}to{opacity:1;transform:translateX(0)}}
/* 3D tilt of the product screen (JS sets the transform on mouse move; fine pointers only) */
#nasil-calisir .hc-win{transition:transform .2s ease-out}
#nasil-calisir .hc-win.is-tilting{will-change:transform}
/* product screens: armed start state (before first view) … */
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .hc-prog-fill{transform:scaleX(0)}
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-kv-row,
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-devam-btn,
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-uni,
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-cost,
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-note,
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-chk,
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-card{opacity:0;transform:translateY(8px)}
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-chip{opacity:0;transform:scale(.6)}
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-tick path{stroke-dashoffset:14}
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .nc-letter-bg mark{clip-path:inset(0 100% 0 0)}
/* … and the transitions to rest, staggered */
#nasil-calisir .hc-armed .hc-prog-fill{transition:transform .9s cubic-bezier(.2,.7,.2,1) .25s}
#nasil-calisir .hc-armed .nc-kv-row,#nasil-calisir .hc-armed .nc-devam-btn,#nasil-calisir .hc-armed .nc-uni,#nasil-calisir .hc-armed .nc-cost,#nasil-calisir .hc-armed .nc-note,#nasil-calisir .hc-armed .nc-chk,#nasil-calisir .hc-armed .nc-card{transition:opacity .5s ease-out,transform .5s cubic-bezier(.2,.7,.2,1)}
#nasil-calisir .hc-armed .nc-kv-row:nth-child(1){transition-delay:.15s}
#nasil-calisir .hc-armed .nc-kv-row:nth-child(2){transition-delay:.21s}
#nasil-calisir .hc-armed .nc-kv-row:nth-child(3){transition-delay:.27s}
#nasil-calisir .hc-armed .nc-kv-row:nth-child(4){transition-delay:.33s}
#nasil-calisir .hc-armed .nc-kv-row:nth-child(5){transition-delay:.39s}
#nasil-calisir .hc-armed .nc-kv-row:nth-child(6){transition-delay:.45s}
#nasil-calisir .hc-armed .nc-devam-btn{transition-delay:.6s}
/* tab 2: rows in, then the status pills pop one by one */
#nasil-calisir .hc-armed .nc-uni:nth-child(1){transition-delay:.1s}
#nasil-calisir .hc-armed .nc-uni:nth-child(2){transition-delay:.17s}
#nasil-calisir .hc-armed .nc-uni:nth-child(3){transition-delay:.24s}
#nasil-calisir .hc-armed .nc-cost{transition-delay:.34s}
#nasil-calisir .hc-armed .nc-note{transition-delay:.44s}
#nasil-calisir .hc-armed .nc-chip{transition:opacity .3s ease-out,transform .45s cubic-bezier(.34,1.56,.64,1)}
#nasil-calisir .hc-armed .nc-uni:nth-child(1) .nc-chip{transition-delay:.5s}
#nasil-calisir .hc-armed .nc-uni:nth-child(2) .nc-chip{transition-delay:.64s}
#nasil-calisir .hc-armed .nc-uni:nth-child(3) .nc-chip{transition-delay:.78s}
/* tab 3: rows in, ticks draw with a 90 ms stagger, bar fills to 3/8 */
#nasil-calisir .hc-armed .nc-chk:nth-child(1){transition-delay:.08s}
#nasil-calisir .hc-armed .nc-chk:nth-child(2){transition-delay:.14s}
#nasil-calisir .hc-armed .nc-chk:nth-child(3){transition-delay:.2s}
#nasil-calisir .hc-armed .nc-chk:nth-child(4){transition-delay:.26s}
#nasil-calisir .hc-armed .nc-chk:nth-child(5){transition-delay:.32s}
#nasil-calisir .hc-armed .nc-chk:nth-child(6){transition-delay:.38s}
#nasil-calisir .hc-armed .nc-chk:nth-child(7){transition-delay:.44s}
#nasil-calisir .hc-armed .nc-chk:nth-child(8){transition-delay:.5s}
#nasil-calisir .nc-tick path{stroke-dasharray:14;stroke-dashoffset:0}
#nasil-calisir .hc-armed .nc-tick path{transition:stroke-dashoffset .35s ease-out}
#nasil-calisir .hc-armed .nc-chk:nth-child(1) .nc-tick path{transition-delay:.55s}
#nasil-calisir .hc-armed .nc-chk:nth-child(2) .nc-tick path{transition-delay:.64s}
#nasil-calisir .hc-armed .nc-chk:nth-child(3) .nc-tick path{transition-delay:.73s}
/* tab 4: highlights sweep left to right one after another, then the note cards */
#nasil-calisir .hc-armed .nc-letter-bg mark{transition:clip-path .5s cubic-bezier(.2,.7,.2,1)}
#nasil-calisir .hc-armed .nc-letter-bg .nc-mark-ok{transition-delay:.25s}
#nasil-calisir .hc-armed .nc-letter-bg .nc-mark-bad{transition-delay:.8s}
#nasil-calisir .hc-armed .nc-card:nth-child(1){transition-delay:.7s}
#nasil-calisir .hc-armed .nc-card:nth-child(2){transition-delay:1.25s}
#nasil-calisir .hc-armed .nc-card:nth-child(3){transition-delay:1.45s}
/* stork peeking from the corner: slides in on first view, then a slow idle bob (the one continuous animation in this section) */
#nasil-calisir .hc-armed .hc-panel:not(.is-played) .hc-stork{opacity:0;transform:translate(70px,70px) rotate(-14deg)}
#nasil-calisir .hc-armed .hc-panel.is-played .hc-stork{animation:ncStorkIn .7s cubic-bezier(.2,.7,.2,1) .15s backwards,ncStorkBob 4s ease-in-out .85s infinite;will-change:transform}
@keyframes ncStorkIn{from{opacity:0;transform:translate(70px,70px) rotate(-14deg)}to{opacity:1;transform:translate(0,0) rotate(-14deg)}}
@keyframes ncStorkBob{0%,100%{transform:translateY(0) rotate(-14deg)}50%{transform:translateY(-5px) rotate(-14deg)}}
}