/* =========================================================
   CONTENT MOCKUPS — pengganti GIF (HTML + CSS sahaja)
   Letak selepas bahagian "9. CONTENTS" dalam style_spp.css,
   ATAU muat sebagai fail berasingan SELEPAS style_spp.css.

   Nota: blok ini menulis ganti .content-media, .content-media img
   dan .content-num yang lama. Aturan lama boleh dipadam.
   ========================================================= */

:root {
  --mk-ok: #2f9e6e;      /* jawapan betul */
  --mk-skel: rgba(63, 91, 131, 0.18);
}

/* ---- Tetingkap mockup ---- */
.content-media {
  position: relative;
  margin-bottom: 22px;
  overflow: hidden;
  aspect-ratio: 16 / 10;
  min-height: 198px;
  border: 2px dashed rgba(44, 82, 145, 0.35);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #eff5fd 100%);
  user-select: none;
}

.mock {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  font-family: "Poppins", system-ui, sans-serif;
}

.mock-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 0 0 46px;
  padding: 0 14px 0 56px;
  background: rgba(255, 253, 244, 0.9);
  border-bottom: 2px dashed rgba(44, 82, 145, 0.25);
}

.mock-tab {
  padding: 5px 12px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.2px;
  color: var(--ink-2);
  background: #fff;
  border: 2px solid rgba(44, 82, 145, 0.22);
  border-radius: var(--r-pill);
}

/* Nombor kad — kini duduk kemas dalam bar atas */
.content-num {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 0.82rem;
  color: #fffdf4;
  background: var(--ink-2);
  border: 2px solid rgba(255, 255, 255, 0.7);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 14px rgba(44, 82, 145, 0.28);
}

.mock-page {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 14px 16px 15px;
  min-height: 0;
}

/* =========================================================
   01 — NOTA
   ========================================================= */
.mock-nota { gap: 9px; }

.mk-title {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.2;
  color: var(--ink);
}

.mk-line {
  position: relative;
  display: block;
  height: 8px;
  border-radius: 5px;
  background: var(--mk-skel);
}

.mk-line.w95 { width: 95%; }
.mk-line.w90 { width: 90%; }
.mk-line.w82 { width: 82%; }
.mk-line.w72 { width: 72%; }
.mk-line.w58 { width: 58%; }

/* Sapuan highlighter kuning */
.mk-mark::after {
  content: "";
  position: absolute;
  top: -5px;
  bottom: -5px;
  left: -5px;
  width: 0;
  border-radius: 6px;
  background: rgba(247, 201, 72, 0.62);
}

.is-live .mk-mark::after { animation: mkSweep 6s var(--ease, ease) infinite; }
.is-live .mk-mark-2::after { animation-delay: 1.1s; }

@keyframes mkSweep {
  0%, 6%   { width: 0; opacity: 1; }
  26%, 78% { width: calc(100% + 10px); opacity: 1; }
  92%, 100% { width: calc(100% + 10px); opacity: 0; }
}

.mk-chip {
  align-self: flex-start;
  margin-top: auto;
  padding: 5px 12px;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--yellow-soft);
  border: 2px solid rgba(247, 201, 72, 0.75);
  border-radius: var(--r-pill);
}

/* =========================================================
   02 — KUIZ
   ========================================================= */
.mock-kuiz {
  position: relative;
  gap: 7px;
}

.mk-quest {
  margin-bottom: 3px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  line-height: 1.25;
  color: var(--ink);
}

.mk-opt {
  position: relative;
  display: block;
  padding: 7px 12px;
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-2);
  background: #fff;
  border: 2px solid rgba(44, 82, 145, 0.18);
  border-radius: 12px;
}

.mk-opt.mk-right::after {
  content: "✓";
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%) scale(0.4);
  font-weight: 800;
  color: #fff;
  opacity: 0;
}

.is-live .mk-right { animation: mkPick 6s ease infinite; }
.is-live .mk-right::after { animation: mkTick 6s ease infinite; }

@keyframes mkPick {
  0%, 30% {
    background: #fff;
    border-color: rgba(44, 82, 145, 0.18);
    color: var(--text-2);
    transform: translateX(0);
  }
  40%, 46% {
    background: var(--primary-soft);
    border-color: var(--primary);
    color: var(--ink);
    transform: translateX(5px);
  }
  56%, 86% {
    background: var(--mk-ok);
    border-color: var(--mk-ok);
    color: #fff;
    transform: translateX(5px);
  }
  96%, 100% {
    background: #fff;
    border-color: rgba(44, 82, 145, 0.18);
    color: var(--text-2);
    transform: translateX(0);
  }
}

@keyframes mkTick {
  0%, 50%   { opacity: 0; transform: translateY(-50%) scale(0.4); }
  60%, 86%  { opacity: 1; transform: translateY(-50%) scale(1); }
  94%, 100% { opacity: 0; transform: translateY(-50%) scale(0.4); }
}

.mk-pop {
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 5px 12px;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 0.7rem;
  color: #fff;
  background: var(--mk-ok);
  border-radius: var(--r-pill);
  box-shadow: 0 6px 14px rgba(47, 158, 110, 0.35);
  opacity: 0;
  transform: translateY(8px);
}

.is-live .mk-pop { animation: mkPop 6s ease infinite; }

@keyframes mkPop {
  0%, 56%   { opacity: 0; transform: translateY(8px) scale(0.9); }
  64%, 84%  { opacity: 1; transform: translateY(0) scale(1); }
  92%, 100% { opacity: 0; transform: translateY(8px) scale(0.9); }
}

/* =========================================================
   03 — FLASHCARD
   ========================================================= */
.mock-flash {
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.mk-stage {
  width: min(78%, 260px);
  aspect-ratio: 5 / 3;
  perspective: 900px;
}

.mk-card {
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.6, 0, 0.2, 1);
}

.is-live .mk-card { animation: mkFlip 6s ease-in-out infinite; }
.mk-card.is-manual { animation: none !important; transform: rotateY(0deg); }
.mk-card.is-manual.is-flipped { transform: rotateY(180deg); }
.mk-card:focus-visible { outline: 3px solid var(--primary); outline-offset: 6px; border-radius: 16px; }

@keyframes mkFlip {
  0%, 16%   { transform: rotateY(0deg); }
  34%, 74%  { transform: rotateY(180deg); }
  92%, 100% { transform: rotateY(0deg); }
}

.mk-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 12px 16px;
  text-align: center;
  font-family: "Baloo 2", sans-serif;
  font-weight: 700;
  font-size: 0.86rem;
  line-height: 1.25;
  border: 2px solid var(--ink-2);
  border-radius: 16px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  box-shadow: 4px 4px 0 rgba(44, 82, 145, 0.18);
}

.mk-face small {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 0.6rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0.65;
}

.mk-front { color: var(--ink); background: var(--surface); }
.mk-back  { color: #fffdf4; background: linear-gradient(160deg, #5a8fd6, var(--ink-2)); transform: rotateY(180deg); }

.mk-hint {
  font-size: 0.64rem;
  font-weight: 500;
  color: var(--text-3);
}

/* =========================================================
   04 — STAT PEMBELAJARAN
   ========================================================= */
.mock-stat {
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.mk-ring {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
}

.mk-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.mk-ring circle {
  fill: none;
  stroke-width: 7;
  stroke-linecap: round;
}

.mk-ring-bg { stroke: rgba(44, 82, 145, 0.14); }

.mk-ring-fg {
  stroke: var(--primary);
  stroke-dasharray: 151;
  stroke-dashoffset: 151;
}

.is-live .mk-ring-fg { animation: mkRing 1.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }

@keyframes mkRing { to { stroke-dashoffset: 33; } }

.mk-ring-num {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--ink);
}

.mk-ring small {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--text-3);
}

.mk-chart {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 9px;
  min-width: 0;
}

.mk-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 68px;
  padding-bottom: 4px;
  border-bottom: 2px dashed rgba(44, 82, 145, 0.25);
}

.mk-bars i {
  flex: 1;
  height: 6%;
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--primary-2), var(--primary));
}

.mk-bars i:nth-child(6) { background: linear-gradient(180deg, #ffd977, var(--yellow)); }

.is-live .mk-bars i { animation: mkGrow 0.7s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; }
.is-live .mk-bars i:nth-child(1) { animation-delay: 0.05s; }
.is-live .mk-bars i:nth-child(2) { animation-delay: 0.13s; }
.is-live .mk-bars i:nth-child(3) { animation-delay: 0.21s; }
.is-live .mk-bars i:nth-child(4) { animation-delay: 0.29s; }
.is-live .mk-bars i:nth-child(5) { animation-delay: 0.37s; }
.is-live .mk-bars i:nth-child(6) { animation-delay: 0.45s; }
.is-live .mk-bars i:nth-child(7) { animation-delay: 0.53s; }

@keyframes mkGrow { to { height: var(--h); } }

.mk-streak {
  align-self: flex-start;
  padding: 4px 11px;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--ink-2);
  background: var(--pink-soft);
  border: 2px solid rgba(243, 139, 160, 0.6);
  border-radius: var(--r-pill);
}

/* =========================================================
   RESPONSIF
   ========================================================= */
@media (max-width: 880px) {
  .content-media { aspect-ratio: 16 / 11; }
}

@media (max-width: 480px) {
  .mock-bar { flex-basis: 42px; padding-left: 52px; }
  .mock-tab { font-size: 0.66rem; }
  .mock-page { padding: 12px 13px 13px; }
  .mk-title, .mk-quest { font-size: 0.8rem; }
  .mk-opt { padding: 6px 10px; font-size: 0.7rem; }
  .mk-face { font-size: 0.78rem; }
  .mk-ring { width: 82px; height: 82px; }
  .mk-ring-num { font-size: 1.05rem; }
  .mk-bars { height: 58px; }
}

/* =========================================================
   REDUCED MOTION — tunjuk keadaan akhir, tanpa gerakan
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .is-live .mk-mark::after,
  .is-live .mk-right,
  .is-live .mk-right::after,
  .is-live .mk-pop,
  .is-live .mk-card,
  .is-live .mk-ring-fg,
  .is-live .mk-bars i {
    animation: none !important;
  }

  .mk-mark::after { width: calc(100% + 10px); }

  .mk-right {
    color: #fff;
    background: var(--mk-ok);
    border-color: var(--mk-ok);
  }

  .mk-right::after { opacity: 1; transform: translateY(-50%) scale(1); }
  .mk-pop { opacity: 1; transform: none; }
  .mk-card { transition: none; }
  .mk-ring-fg { stroke-dashoffset: 33; }
  .mk-bars i { height: var(--h); }
}