/* =============================================================================
 *  Penilaian Dokter Muda · Ilmu Bedah — bingkai domain pendek
 *  Token warna mengikuti aplikasi (teal #0F766E, navy #0B1F33). Satu-satunya
 *  ornamen: garis jahitan berwarna ungu benang Vicryl.
 * ============================================================================= */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('/assets/fonts/plus-jakarta-sans.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --kertas: #F4F7F7;
  --permukaan: #FFFFFF;
  --tinta: #0B1F33;
  --redup: #56687A;
  --garis: #D3DEE0;
  --teal: #0F766E;
  --teal-hover: #0B5F58;
  --teal-teks: #FFFFFF;
  --benang: #6A4CB8;
  --sayatan: #B9C8CC;
  --fokus: rgba(45, 212, 191, .55);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --kertas: #07131F;
    --permukaan: #0C1C2C;
    --tinta: #E4EDF1;
    --redup: #93A7B6;
    --garis: #1D3346;
    --teal: #2DD4BF;
    --teal-hover: #5EEAD4;
    --teal-teks: #04241F;
    --benang: #A993F2;
    --sayatan: #2A4257;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --kertas: #07131F;
  --permukaan: #0C1C2C;
  --tinta: #E4EDF1;
  --redup: #93A7B6;
  --garis: #1D3346;
  --teal: #2DD4BF;
  --teal-hover: #5EEAD4;
  --teal-teks: #04241F;
  --benang: #A993F2;
  --sayatan: #2A4257;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--kertas);
  color: var(--tinta);
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--teal); }
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- Jahitan */
.jahitan { display: block; width: 100%; height: auto; overflow: visible; }
.jahitan .sayatan { stroke: var(--sayatan); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.jahitan .simpul { stroke: var(--benang); stroke-width: 2.6; stroke-linecap: round; fill: none;
  stroke-dasharray: 30; stroke-dashoffset: 0; }

/* Layar tunggu: jahitan terbentuk satu per satu, berulang. */
.jahitan-loop .simpul { animation: jahit 2.6s cubic-bezier(.6, 0, .3, 1) infinite; stroke-dashoffset: 30; }
.jahitan-loop .simpul:nth-of-type(2) { animation-delay: .12s; }
.jahitan-loop .simpul:nth-of-type(3) { animation-delay: .24s; }
.jahitan-loop .simpul:nth-of-type(4) { animation-delay: .36s; }
.jahitan-loop .simpul:nth-of-type(5) { animation-delay: .48s; }
.jahitan-loop .simpul:nth-of-type(6) { animation-delay: .60s; }
.jahitan-loop .simpul:nth-of-type(7) { animation-delay: .72s; }
@keyframes jahit {
  0%   { stroke-dashoffset: 30; opacity: 1; }
  28%  { stroke-dashoffset: 0;  opacity: 1; }
  78%  { stroke-dashoffset: 0;  opacity: 1; }
  100% { stroke-dashoffset: 0;  opacity: 0; }
}

/* Halaman utama: sayatan lalu 17 simpul terbentuk sekali saat halaman dibuka. */
.jahitan-sekali .sayatan { stroke-dasharray: 570; stroke-dashoffset: 570; animation: sayat .6s ease-out .1s forwards; }
.jahitan-sekali .simpul { stroke-width: 2.8; stroke-dashoffset: 30; animation: jahit-sekali .4s cubic-bezier(.6, 0, .3, 1) forwards; }
.jahitan-sekali .simpul:nth-of-type(1) { animation-delay: 0.70s; }
.jahitan-sekali .simpul:nth-of-type(2) { animation-delay: 0.74s; }
.jahitan-sekali .simpul:nth-of-type(3) { animation-delay: 0.78s; }
.jahitan-sekali .simpul:nth-of-type(4) { animation-delay: 0.82s; }
.jahitan-sekali .simpul:nth-of-type(5) { animation-delay: 0.86s; }
.jahitan-sekali .simpul:nth-of-type(6) { animation-delay: 0.90s; }
.jahitan-sekali .simpul:nth-of-type(7) { animation-delay: 0.94s; }
.jahitan-sekali .simpul:nth-of-type(8) { animation-delay: 0.98s; }
.jahitan-sekali .simpul:nth-of-type(9) { animation-delay: 1.02s; }
.jahitan-sekali .simpul:nth-of-type(10) { animation-delay: 1.06s; }
.jahitan-sekali .simpul:nth-of-type(11) { animation-delay: 1.10s; }
.jahitan-sekali .simpul:nth-of-type(12) { animation-delay: 1.14s; }
.jahitan-sekali .simpul:nth-of-type(13) { animation-delay: 1.18s; }
.jahitan-sekali .simpul:nth-of-type(14) { animation-delay: 1.22s; }
.jahitan-sekali .simpul:nth-of-type(15) { animation-delay: 1.26s; }
.jahitan-sekali .simpul:nth-of-type(16) { animation-delay: 1.30s; }
.jahitan-sekali .simpul:nth-of-type(17) { animation-delay: 1.34s; }
@keyframes sayat { to { stroke-dashoffset: 0; } }
@keyframes jahit-sekali { to { stroke-dashoffset: 0; } }

@media (prefers-reduced-motion: reduce) {
  .jahitan .sayatan, .jahitan .simpul { animation: none !important; stroke-dashoffset: 0 !important; opacity: 1 !important; }
  .jahitan-loop { animation: denyut 1.8s ease-in-out infinite alternate; }
}
@keyframes denyut { from { opacity: .45; } to { opacity: 1; } }

/* ------------------------------------------------------ Bingkai aplikasi */
.halaman-app { overflow: hidden; }
.frame-host { position: fixed; inset: 0; }
.app-frame { display: block; width: 100%; height: 100%; border: 0; background: var(--kertas); }

.splash {
  position: fixed; inset: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1.5rem calc(2rem + env(safe-area-inset-bottom, 0px));
  background: var(--kertas);
  text-align: center;
  transition: opacity .3s ease;
}
.splash.is-selesai { opacity: 0; pointer-events: none; }
.splash .jahitan { width: min(220px, 60vw); margin-bottom: 1.75rem; }
.splash.is-masalah .jahitan-loop { animation: none; opacity: .4; }
.splash.is-masalah .jahitan-loop .simpul { animation: none; stroke-dashoffset: 0; opacity: 1; }
.splash-title { margin: 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -.01em; }
.splash-hint { margin: .5rem 0 0; max-width: 34ch; color: var(--redup); font-size: .9375rem; }
.splash-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .625rem; margin-top: 1.5rem; }
.splash-kaki {
  position: absolute; left: 0; right: 0; bottom: calc(1.25rem + env(safe-area-inset-bottom, 0px));
  margin: 0; color: var(--redup); font-size: .8125rem;
}

/* ---------------------------------------------------------------- Tombol */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 44px; padding: .625rem 1.125rem;
  border: 1px solid var(--garis); border-radius: 12px;
  background: var(--permukaan); color: var(--tinta);
  font: inherit; font-weight: 600; font-size: .9375rem; text-decoration: none; cursor: pointer;
}
.tombol:hover { border-color: var(--redup); }
.tombol-utama { background: var(--teal); border-color: var(--teal); color: var(--teal-teks); }
.tombol-utama:hover { background: var(--teal-hover); border-color: var(--teal-hover); }

/* ---------------------------------------------------------- Halaman utama */
.utama {
  width: min(100% - 3rem, 36rem);
  margin: 0 auto;
  padding: clamp(2.5rem, 9vh, 6rem) 0 3rem;
}
.merek { display: flex; align-items: center; gap: .75rem; margin-bottom: clamp(2.5rem, 8vh, 4.5rem);
  font-weight: 700; font-size: .9375rem; }
.merek img { width: 36px; height: 36px; border-radius: 9px; }
.institusi { margin: 0 0 .75rem; color: var(--redup); font-size: .9375rem; font-weight: 500; }
.judul {
  margin: 0;
  font-size: clamp(2.375rem, 8.5vw, 3.5rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.025em;
  text-wrap: balance;
}
.pengantar { margin: 1.25rem 0 2rem; max-width: 30em; color: var(--redup); font-size: 1.0625rem; }
.utama .jahitan { margin: clamp(3rem, 9vh, 4.5rem) 0 2.5rem; }

.peran { display: grid; gap: 1.75rem; margin: 0; }
.peran dt { font-weight: 700; margin-bottom: .25rem; }
.peran dd { margin: 0; color: var(--redup); max-width: 34em; }

.kaki { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--garis);
  color: var(--redup); font-size: .8125rem; }

@media (min-width: 720px) {
  .peran { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
}

/* -------------------------------------------------------------------- 404 */
.hilang .judul { font-size: clamp(2rem, 7vw, 2.75rem); }