/* "Kargo Kolay nedir?" anlatım bileşeni — kucukis.com (site_uretici/nedir_blok.py üretir). Saf CSS animasyon, betik gerekmez.
   Tüm animasyonlar 12 sn'lik tek zaman çizelgesinde döner; her adım kendi 2,4 sn'lik penceresinde (%0-%20) çalışır. */
.kkn { max-width: 72rem; margin: 0 auto; padding: 0 1rem; color: #1e293b; }
.kkn *, .kkn *::before, .kkn *::after { box-sizing: border-box; }
.kkn-h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 800; color: #0f172a; line-height: 1.2; margin: 0 0 .8rem; }
.kkn-h3s { font-size: 1.25rem; font-weight: 800; color: #0f172a; margin: 2.2rem 0 .3rem; }
.kkn-lead { font-size: 1.08rem; line-height: 1.85; color: #334155; margin: 0 0 .9rem; max-width: 56rem; }
.kkn-lead strong { color: #0f172a; }
.kkn-alt { line-height: 1.8; color: #475569; margin: 0 0 1rem; max-width: 56rem; }

/* ---- sahne: 5 adım ---- */
.kkn-sahne { margin: 1.6rem 0 .4rem; }
.kkn-adimlar { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: 1fr; counter-reset: kkn; }
@media (min-width: 640px) { .kkn-adimlar { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .kkn-adimlar { grid-template-columns: repeat(5, 1fr); } }
.kkn-adim { --T: 12s; --d: calc(var(--i) * 2.4s); position: relative; background: #fff; border: 2px solid #cbd5e1; border-radius: 1rem;
  padding: .85rem; animation: kknOn var(--T) infinite; animation-delay: var(--d); }
.kkn-adim h3 { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0 0 .25rem; line-height: 1.3; }
.kkn-adim p { font-size: .88rem; line-height: 1.55; color: #475569; margin: 0; }
.kkn-no { position: absolute; top: -.7rem; left: .8rem; background: #0078d4; color: #fff; font-weight: 800; font-size: .8rem; width: 1.6rem; height: 1.6rem;
  border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,120,212,.4); }
.kkn-gor { position: relative; height: 108px; border-radius: .7rem; background: #f1f5f9; overflow: hidden; margin-bottom: .8rem; }
@keyframes kknOn {
  0% { border-color: #cbd5e1; box-shadow: none; transform: none; }
  2.5%, 17.5% { border-color: #0078d4; box-shadow: 0 10px 26px rgba(0,120,212,.28); transform: translateY(-4px); }
  20%, 100% { border-color: #cbd5e1; box-shadow: none; transform: none; }
}

/* 1 — barkod okutulur */
.kkn-bar { position: absolute; inset: 20px 24px; background: repeating-linear-gradient(90deg, #0f172a 0 2px, transparent 2px 4px, #0f172a 4px 5px, transparent 5px 8px, #0f172a 8px 11px, transparent 11px 13px); border-radius: 2px; }
.kkn-beam { position: absolute; top: 10px; bottom: 10px; left: 6%; width: 3px; background: #ef4444; box-shadow: 0 0 12px 2px rgba(239,68,68,.8); opacity: 0; animation: kknBeam 12s infinite; animation-delay: var(--d); }
.kkn-bip { position: absolute; right: 8px; top: 8px; font-size: .7rem; font-weight: 800; color: #16a34a; opacity: 0; animation: kknBip 12s infinite; animation-delay: var(--d); }
@keyframes kknBeam { 0% { left: 6%; opacity: 1; } 12% { left: 92%; opacity: 1; } 13%, 100% { opacity: 0; } }
@keyframes kknBip { 0%, 12% { opacity: 0; transform: scale(.6); } 14%, 19% { opacity: 1; transform: scale(1); } 20%, 100% { opacity: 0; } }

/* 2 — kayıt başlar */
.kkn-kam { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #334155; }
.kkn-rec { position: absolute; top: 9px; left: 10px; display: flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 800; color: #b91c1c; background: #fee2e2; padding: .12rem .45rem; border-radius: 999px; }
.kkn-rec b { width: .55rem; height: .55rem; border-radius: 50%; background: #ef4444; animation: kknBlink 1s steps(2, start) infinite; }
@keyframes kknBlink { 50% { opacity: .15; } }
.kkn-sure { position: absolute; right: 10px; bottom: 8px; font: 700 .8rem/1 ui-monospace, Consolas, monospace; color: #0f172a; }
.kkn-sure span { position: absolute; right: 0; bottom: 0; opacity: 0; }
.kkn-sure span:first-child { position: relative; opacity: 1; animation: kknT1 12s infinite; animation-delay: var(--d); }
.kkn-sure .t2 { animation: kknT2 12s infinite; animation-delay: var(--d); }
.kkn-sure .t3 { animation: kknT3 12s infinite; animation-delay: var(--d); }
@keyframes kknT1 { 0% { opacity: 1; } 6.9% { opacity: 1; } 7%, 19.9% { opacity: 0; } 20%, 100% { opacity: 1; } }
@keyframes kknT2 { 0%, 6.9% { opacity: 0; } 7%, 13.9% { opacity: 1; } 14%, 100% { opacity: 0; } }
@keyframes kknT3 { 0%, 13.9% { opacity: 0; } 14%, 19.9% { opacity: 1; } 20%, 100% { opacity: 0; } }

/* 3 — ürünler ekranda tamamlanır */
.kkn-liste { position: absolute; inset: 9px 10px 22px; display: flex; flex-direction: column; justify-content: space-around; }
.kkn-satir { display: flex; align-items: center; gap: .45rem; font-size: .76rem; font-weight: 600; color: #334155; background: #fff; border-radius: .4rem; padding: .18rem .4rem; }
.kkn-kutu { width: 1rem; height: 1rem; border: 2px solid #cbd5e1; border-radius: .25rem; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.kkn-kutu i { font-size: .6rem; color: #fff; background: #16a34a; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transform: scale(0); animation: kknChk 12s infinite; animation-delay: calc(var(--d) + var(--k) * .4s); }
@keyframes kknChk { 0% { transform: scale(0); } 2% { transform: scale(1.3); } 3.5%, 15% { transform: scale(1); } 17%, 100% { transform: scale(0); } }
.kkn-ilerleme { position: absolute; left: 10px; right: 10px; bottom: 8px; height: .45rem; background: #e2e8f0; border-radius: 999px; overflow: hidden; }
.kkn-ilerleme i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #0078d4, #16a34a); animation: kknBar 12s infinite; animation-delay: var(--d); }
@keyframes kknBar { 0% { width: 0; } 14% { width: 100%; } 18% { width: 100%; } 20%, 100% { width: 0; } }

/* 4 — video koda bağlı saklanır */
.kkn-dosya { position: absolute; top: 50%; left: 8%; margin-top: -1.2rem; display: flex; flex-direction: column; align-items: center; font-size: 1.5rem; color: #0078d4; animation: kknFile 12s infinite; animation-delay: var(--d); }
.kkn-dosya small { font: 700 .58rem/1 ui-monospace, Consolas, monospace; color: #475569; margin-top: .15rem; white-space: nowrap; }
.kkn-bulut, .kkn-disk { position: absolute; right: 10%; font-size: 1.5rem; color: #94a3b8; }
.kkn-bulut { top: 14px; animation: kknPulse 12s infinite; animation-delay: var(--d); }
.kkn-disk { bottom: 12px; animation: kknPulse 12s infinite; animation-delay: var(--d); }
.kkn-kilit { position: absolute; left: 10px; bottom: 8px; font-size: .66rem; font-weight: 800; color: #0f172a; background: #dcfce7; padding: .12rem .4rem; border-radius: 999px; opacity: 0; animation: kknLock 12s infinite; animation-delay: var(--d); }
@keyframes kknFile { 0% { left: 8%; opacity: 1; transform: scale(1); } 11% { left: 52%; opacity: 1; } 14% { left: 58%; opacity: 0; transform: scale(.5); } 20%, 100% { left: 8%; opacity: 1; transform: scale(1); } }
@keyframes kknPulse { 0%, 10% { color: #94a3b8; transform: none; } 13%, 17% { color: #0078d4; transform: scale(1.25); } 20%, 100% { color: #94a3b8; transform: none; } }
@keyframes kknLock { 0%, 12% { opacity: 0; transform: translateY(6px); } 15%, 19% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; } }

/* 5 — itirazda kanıt bulunur */
.kkn-ara { position: absolute; top: 12px; left: 10px; right: 10px; display: flex; align-items: center; gap: .45rem; background: #fff; border: 1px solid #cbd5e1; border-radius: .5rem; padding: .3rem .5rem; font-size: .8rem; color: #64748b; }
.kkn-yaz { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; font: 700 .8rem/1.2 ui-monospace, Consolas, monospace; color: #0f172a; border-right: 2px solid #0078d4; animation: kknType 12s steps(8, end) infinite; animation-delay: var(--d); }
.kkn-sonuc { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: .45rem; background: #dcfce7; color: #166534; border-radius: .5rem; padding: .35rem .55rem; font-size: .76rem; font-weight: 800; opacity: 0; animation: kknRes 12s infinite; animation-delay: var(--d); }
@keyframes kknType { 0% { width: 0; } 10% { width: 8ch; } 18% { width: 8ch; } 20%, 100% { width: 0; } }
@keyframes kknRes { 0%, 10% { opacity: 0; transform: translateY(8px); } 13%, 18% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; } }

/* ---- özellik kartları ---- */
.kkn-kartlar { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr)); margin-top: 1.1rem; }
.kkn-kart { background: #fff; border: 1px solid #e2e8f0; border-radius: .9rem; padding: 1rem 1.05rem; transition: transform .5s ease, opacity .5s ease, box-shadow .2s; transition-delay: calc(var(--k, 0) * 60ms); }
.kkn-kart:hover { box-shadow: 0 8px 22px rgba(15,23,42,.1); }
.kkn-kart i.fa-solid { width: 2.3rem; height: 2.3rem; display: inline-flex; align-items: center; justify-content: center; background: #e0f0ff; color: #0078d4; border-radius: .6rem; margin-bottom: .5rem; font-size: 1rem; }
.kkn-kart h3 { font-size: 1rem; font-weight: 800; color: #0f172a; margin: 0 0 .25rem; }
.kkn-kart p { font-size: .88rem; line-height: 1.6; color: #475569; margin: 0; }
.kkn-js .kkn-kart { opacity: 0; transform: translateY(14px); }
.kkn-js .kkn-kart.kkn-in { opacity: 1; transform: none; }
.kkn-kimler { margin: 1.4rem 0 0; line-height: 1.8; color: #334155; max-width: 56rem; }
.kkn-dugmeler { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.3rem; }
.kkn-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; padding: .8rem 1.25rem; border-radius: .8rem; text-decoration: none; background: #0078d4; color: #fff; }
.kkn-btn:hover { background: #0063b1; }
.kkn-btn.ikincil { background: #fff; color: #0f172a; border: 1px solid #cbd5e1; }
.kkn-btn.ikincil:hover { background: #f1f5f9; }

/* ekran dışındayken durdur (işlemci tasarrufu) */
.kkn-dur *, .kkn-dur *::before, .kkn-dur *::after { animation-play-state: paused !important; }

/* hareket azaltma: animasyon yok, son durumlar görünür */
@media (prefers-reduced-motion: reduce) {
  .kkn *, .kkn *::before, .kkn *::after { animation: none !important; transition: none !important; }
  .kkn-adim { border-color: #bfdbfe; }
  .kkn-kutu i { transform: scale(1); }
  .kkn-ilerleme i { width: 100%; }
  .kkn-yaz { width: 8ch; border-right: 0; }
  .kkn-sonuc, .kkn-kilit, .kkn-bip { opacity: 1; }
  .kkn-sure span:first-child { opacity: 0; } .kkn-sure .t3 { opacity: 1; }
  .kkn-beam { display: none; }
  .kkn-dosya { left: 40%; }
  .kkn-bulut, .kkn-disk { color: #0078d4; }
  .kkn-js .kkn-kart { opacity: 1; transform: none; }
}