/* =========================================================
   LatPrak Kedokteran · lapisan desain beranda & halaman feedback
   Hanya dimuat oleh index.html dan feedback.html.
   (style.css tetap dipakai bersama Medibel AI, jadi tidak diubah.)
   Hapus <link> file ini untuk kembali ke tampilan lama.
   ========================================================= */

:root{
  --lp-orb-1:rgba(11,122,117,.24);   /* teal baju jaga */
  --lp-orb-2:rgba(35,70,209,.16);    /* indigo */
  --lp-orb-3:rgba(224,90,138,.13);   /* eosin */
  --lp-grid:rgba(11,122,117,.07);
  --lp-wave:rgba(11,122,117,.16);
  --lp-scan:rgba(11,122,117,.045);
  --lp-cell:rgba(220,58,63,.30);
  --lp-cell-in:rgba(220,58,63,.12);
  --lp-plus:rgba(11,122,117,.34);
  --lp-dot:rgba(35,70,209,.30);
  --lp-beat:rgba(11,122,117,.10);
  --lp-hl:rgba(255,255,255,.6);
  --lp-glow:color-mix(in srgb,var(--scrub) 55%,transparent);
  --lp-ease:cubic-bezier(.2,.8,.2,1);
}
:root[data-theme="dark"]{
  --lp-orb-1:rgba(63,199,184,.15);
  --lp-orb-2:rgba(142,162,255,.11);
  --lp-orb-3:rgba(75,227,160,.07);
  --lp-grid:rgba(120,230,215,.05);
  --lp-wave:rgba(75,227,160,.20);
  --lp-scan:rgba(63,199,184,.05);
  --lp-cell:rgba(255,110,120,.26);
  --lp-cell-in:rgba(255,110,120,.08);
  --lp-plus:rgba(63,199,184,.34);
  --lp-dot:rgba(142,162,255,.32);
  --lp-beat:rgba(75,227,160,.09);
  --lp-hl:rgba(255,255,255,.06);
}

/* ---------- background animatif (di belakang semua konten) ---------- */
.lp-bg{position:fixed;top:0;left:0;z-index:-1;width:100%;height:100vh;height:100lvh;overflow:hidden;pointer-events:none;contain:strict;
  background:linear-gradient(180deg,color-mix(in srgb,var(--scrub) 5%,var(--paper)) 0%,var(--paper) 55%)}
/* pola kertas EKG halus, memudar ke tepi */
.lp-bg::before{content:"";position:absolute;inset:0;
  background-image:linear-gradient(var(--lp-grid) 1px,transparent 1px),linear-gradient(90deg,var(--lp-grid) 1px,transparent 1px);
  background-size:44px 44px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(ellipse 80% 65% at 50% 25%,#000 20%,transparent 75%);
          mask-image:radial-gradient(ellipse 80% 65% at 50% 25%,#000 20%,transparent 75%)}
.lp-orb{position:absolute;border-radius:50%;will-change:transform;
  translate:calc(var(--lp-px,0) * var(--k,20px)) calc(var(--lp-py,0) * var(--k,20px) - var(--lp-sy,0) * var(--ks,.04px))}
.lp-orb.o1{--k:26px;--ks:.05px;width:62vmax;height:62vmax;left:-18vmax;top:-22vmax;background:radial-gradient(circle,var(--lp-orb-1) 0,transparent 66%);animation:lpDrift1 34s ease-in-out infinite alternate}
.lp-orb.o2{--k:-34px;--ks:.09px;width:54vmax;height:54vmax;right:-20vmax;top:18vh;background:radial-gradient(circle,var(--lp-orb-2) 0,transparent 66%);animation:lpDrift2 42s ease-in-out infinite alternate}
.lp-orb.o3{--k:18px;--ks:.13px;width:44vmax;height:44vmax;left:22vw;top:62vh;background:radial-gradient(circle,var(--lp-orb-3) 0,transparent 66%);animation:lpDrift3 38s ease-in-out infinite alternate}
@keyframes lpDrift1{to{transform:translate3d(8vmax,6vmax,0) scale(1.08)}}
@keyframes lpDrift2{to{transform:translate3d(-7vmax,9vmax,0) scale(.94)}}
@keyframes lpDrift3{to{transform:translate3d(-9vmax,-7vmax,0) scale(1.1)}}
/* garis monitor yang berjalan sangat pelan */
/* wadah: hanya terlihat di tepi kiri & kanan, memudar di area teks */
.lp-wave{display:none;position:absolute;left:0;right:0;top:72vh;height:90px;overflow:hidden;
  translate:0 calc(var(--lp-sy,0) * -.02px);
  -webkit-mask-image:linear-gradient(90deg,#000 0,transparent 26%,transparent 74%,#000 100%);
          mask-image:linear-gradient(90deg,#000 0,transparent 26%,transparent 74%,#000 100%)}
.lp-wave::before{content:"";position:absolute;left:0;top:0;width:calc(100% + 640px);height:100%;will-change:transform;animation:lpWave 26s linear infinite}
/* warna garis mengikuti tema: gambar garis dipakai sebagai topeng warna */
@supports ((-webkit-mask-image:url("")) or (mask-image:url(""))){
  .lp-wave{display:block}
  .lp-wave::before{background:var(--lp-wave);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='90' viewBox='0 0 640 90'%3E%3Cpath d='M0 55h210l10-12 10 12h22l8 6 12-46 15 62 9-22h30l16-14 16 14h282' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0/640px 90px;
            mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='90' viewBox='0 0 640 90'%3E%3Cpath d='M0 55h210l10-12 10 12h22l8 6 12-46 15 62 9-22h30l16-14 16 14h282' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") repeat-x 0 0/640px 90px}
}
@keyframes lpWave{to{transform:translate3d(-640px,0,0)}}
@media (max-width:640px){
  .lp-orb.o1{width:90vmax;height:90vmax}
  .lp-wave{top:78vh;opacity:.7}
}
/* hemat baterai: tab tersembunyi, perangkat ringan, atau lama tidak disentuh */
/* garis pindai monitor: pita cahaya tipis turun perlahan */
.lp-bg::after{content:"";position:absolute;left:0;right:0;top:0;height:22vh;will-change:transform;
  background:linear-gradient(180deg,transparent,var(--lp-scan) 55%,transparent);
  animation:lpScan 16s cubic-bezier(.45,0,.55,1) infinite}
@keyframes lpScan{0%{transform:translate3d(0,-25vh,0)}70%,100%{transform:translate3d(0,105vh,0)}}
/* partikel melayang (sel darah, tanda plus, titik) dibuat oleh landing-fx.js */
.lp-p{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);opacity:0;will-change:transform,opacity;
  translate:0 calc(var(--lp-sy,0) * var(--ps,.04) * -1px);
  animation:lpFloat var(--t,30s) linear var(--dl,0s) infinite}
.lp-p.c{border-radius:50%;background:radial-gradient(circle,var(--lp-cell-in) 0 30%,var(--lp-cell) 46% 64%,transparent 68%)}
.lp-p.x{background:linear-gradient(var(--lp-plus),var(--lp-plus)) center/100% 26% no-repeat,linear-gradient(var(--lp-plus),var(--lp-plus)) center/26% 100% no-repeat}
.lp-p.d{border-radius:50%;background:var(--lp-dot)}
@keyframes lpFloat{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}
  15%,80%{opacity:var(--o,.5)}
  100%{opacity:0;transform:translate3d(var(--dx,0),-42vh,0) rotate(var(--r,90deg))}}
/* denyut halus di belakang hero, seirama detak monitor EKG */
.lp-beat{position:absolute;left:50%;top:clamp(220px,42vh,460px);width:130vmax;height:130vmax;margin:-65vmax 0 0 -65vmax;border-radius:50%;opacity:0;
  background:radial-gradient(circle,transparent 30%,var(--lp-beat) 40%,transparent 52%);will-change:transform,opacity}
.lp-beat.b1{animation:lpBeatA .95s cubic-bezier(.2,.7,.3,1)}
.lp-beat.b2{animation:lpBeatB .95s cubic-bezier(.2,.7,.3,1)}
@keyframes lpBeatA{0%{opacity:0;transform:scale(.62)}18%{opacity:1}100%{opacity:0;transform:scale(1)}}
@keyframes lpBeatB{0%{opacity:0;transform:scale(.62)}18%{opacity:1}100%{opacity:0;transform:scale(1)}}

.lp-paused .lp-bg *,.lp-idle .lp-bg *,.lp-paused .lp-wave::before,.lp-idle .lp-wave::before,.lp-paused .lp-bg::after,.lp-idle .lp-bg::after{animation-play-state:paused!important}
.lp-idle .lp-beat,.lp-paused .lp-beat{display:none}
.lp-lite .lp-orb,.lp-lite .lp-wave::before{animation:none!important;will-change:auto}
.lp-lite .lp-bg::after{display:none}

/* ---------- muncul saat digulir (hanya elemen di bawah layar saat halaman dibuka) ---------- */
.lp-rv{opacity:0;translate:0 22px;transition:opacity .6s var(--lp-ease) var(--lp-d,0s),translate .6s var(--lp-ease) var(--lp-d,0s)!important}
.lp-rv.is-in{opacity:1;translate:none}

/* ---------- tombol ---------- */
.btn{transition:background-color .2s,border-color .2s,transform .18s var(--lp-ease),color .2s,box-shadow .25s}
.btn-primary{position:relative;overflow:hidden;isolation:isolate;
  background-image:linear-gradient(135deg,var(--scrub) 0%,color-mix(in srgb,var(--scrub) 78%,var(--helix)) 100%);
  box-shadow:0 10px 22px -14px var(--lp-glow),inset 0 1px 0 rgba(255,255,255,.18)}
.btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%) no-repeat;background-size:250% 100%;background-position:130% 0;transition:background-position .7s var(--lp-ease)}
@media (hover:hover){
  .btn:hover{transform:translateY(-2px);box-shadow:0 12px 24px -16px rgba(15,42,51,.5)}
  .btn-primary:hover{box-shadow:0 14px 30px -12px var(--lp-glow),inset 0 1px 0 rgba(255,255,255,.18)}
  .btn-primary:hover::after{background-position:-30% 0}
}
.btn:active{transform:translateY(0) scale(.97)}
.btn[disabled]:hover,.btn[disabled]:active{transform:none}
.btn-primary[disabled]::after{display:none}

/* ---------- header ---------- */
@media (hover:hover){
  .nav a{position:relative}
  .nav a::after{content:"";position:absolute;left:12px;right:12px;bottom:3px;height:2px;border-radius:2px;background:var(--scrub);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--lp-ease)}
  .nav a:hover::after{transform:scaleX(1)}
}
.head-ai{animation:lpBreath 4.8s ease-in-out infinite}
@keyframes lpBreath{50%{box-shadow:0 10px 26px -8px rgba(11,122,117,.95),0 0 0 4px rgba(63,199,184,.14),inset 0 1px 0 rgba(255,255,255,.2)}}
.lp-idle .head-ai,.lp-lite .head-ai,.lp-paused .head-ai{animation:none}



/* ---------- hero: "Clinical Signal Interface" ---------- */
.ecg-paper{isolation:isolate;border-color:color-mix(in srgb,var(--scrub) 16%,var(--line));
  box-shadow:var(--shadow),0 40px 90px -60px var(--lp-glow),inset 0 1px 0 var(--lp-hl);
  background-color:var(--hero-bg);
  /* lapisan atas: grid memudar di area judul (keterbacaan), titik koordinat di simpul grid */
  background-image:
    radial-gradient(64% 78% at 20% 40%,color-mix(in srgb,var(--hero-bg) 74%,transparent),transparent 74%),
    radial-gradient(circle,var(--lp-node) 1.1px,transparent 1.7px),
    linear-gradient(var(--grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-major) 1px,transparent 1px),
    linear-gradient(var(--grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-minor) 1px,transparent 1px),
    radial-gradient(120% 90% at 0% 0%,color-mix(in srgb,var(--scrub) 8%,transparent),transparent 60%),
    radial-gradient(90% 80% at 100% 100%,color-mix(in srgb,var(--helix) 6%,transparent),transparent 62%);
  background-size:100% 100%,40px 40px,40px 40px,40px 40px,8px 8px,8px 8px,100% 100%,100% 100%;
  background-position:0 0,-20px -20px,0 0,0 0,0 0,0 0,0 0,0 0}
/* cahaya lembut: bernapas pelan (semua perangkat), mengikuti kursor di desktop (landing-fx.js) */
.ecg-paper::before{content:"";position:absolute;z-index:0;left:78%;top:18%;width:560px;height:560px;margin:-280px 0 0 -280px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,color-mix(in srgb,var(--scrub) 17%,transparent) 0,transparent 65%);
  transform:translate3d(var(--dx,0px),var(--dy,0px),0);transition:transform .6s var(--lp-ease);will-change:transform;
  animation:lpGlow 9s ease-in-out infinite alternate}
@keyframes lpGlow{from{scale:1;opacity:.75}to{scale:1.14;opacity:1}}
@media (max-width:700px){ .ecg-paper::before{width:380px;height:380px;margin:-190px 0 0 -190px;left:85%;top:10%} }
/* siku bidik di keempat sudut: detail antarmuka yang tipis */
.ecg-paper::after{content:"";position:absolute;inset:12px;z-index:1;pointer-events:none;--c:color-mix(in srgb,var(--scrub) 42%,transparent);
  background:
    linear-gradient(var(--c),var(--c)) 0 0/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 0/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 0/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 0/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 0 100%/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 0 100%/1.5px 16px no-repeat,
    linear-gradient(var(--c),var(--c)) 100% 100%/16px 1.5px no-repeat,linear-gradient(var(--c),var(--c)) 100% 100%/1.5px 16px no-repeat}
/* ---------- judul hero: "Adaptive Medical Signal Glow" ----------
   LatPrak = stabil (warna tinta); Kedokteran = gradient teal/biru yang mengalir pelan,
   disapu cahaya tipis + garis sinyal di bawahnya. Semua warna mengikuti data-theme global. */
:root{--lp-t1:#0b7a75;--lp-t2:#0a7fa6;--lp-t3:#1f5fc4;--lp-sweep:rgba(255,255,255,.55);--lp-hot:rgba(255,255,255,.34);
  --lp-tglow:color-mix(in srgb,var(--scrub) 20%,transparent);--lp-pk0:0;--lp-node:color-mix(in srgb,var(--scrub) 26%,transparent);--hero-bg:var(--surface)}
:root[data-theme="dark"]{--lp-t1:#3fc7b8;--lp-t2:#4fd6ea;--lp-t3:#86b4ff;--lp-sweep:rgba(225,255,250,.78);--lp-hot:rgba(225,255,250,.38);
  --lp-tglow:color-mix(in srgb,var(--scrub) 30%,transparent);--lp-pk0:.45;--lp-node:rgba(75,227,160,.2);--hero-bg:#0a1d26}
:root[data-theme="dark"] .hero-title .l1{color:#f2faf9}
.hero-title{position:relative;isolation:isolate}
.hero-title .l1{display:block}
.hero-title .l2{position:relative;width:-moz-fit-content;width:fit-content;
  background-image:
    radial-gradient(circle 1.4em at var(--hx,-50%) var(--hy,50%),var(--lp-hot-on,transparent),transparent),
    linear-gradient(100deg,transparent 44%,var(--lp-sweep) 50%,transparent 56%),
    linear-gradient(90deg,var(--lp-t1) 0%,var(--lp-t2) 16%,var(--lp-t3) 28%,var(--lp-t2) 38%,var(--lp-t1) 50%,var(--lp-t2) 66%,var(--lp-t3) 78%,var(--lp-t2) 88%,var(--lp-t1) 100%);
  background-size:100% 100%,300% 100%,200% 100%;background-position:0 0,90% 0,100% 0;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:lpFlow 14s linear 1.6s infinite}
.hero-title.is-hot .l2{--lp-hot-on:var(--lp-hot)}
/* gradient bergeser kiri→kanan (satu periode = mulus), sapuan cahaya lewat di awal tiap siklus */
@keyframes lpFlow{0%{background-position:0 0,90% 0,100% 0}22%{background-position:0 0,10% 0,78% 0}100%{background-position:0 0,10% 0,0% 0}}
@keyframes lpSweepOnly{0%{background-position:0 0,90% 0,100% 0}26%,100%{background-position:0 0,10% 0,100% 0}}
/* garis sinyal tipis di bawah "Kedokteran", titik cahaya berjalan bersama sapuan */
.hero-title .l2::after{content:"";position:absolute;left:0;right:0;bottom:-.1em;height:8px;pointer-events:none;
  background:
    radial-gradient(closest-side,var(--lp-t2),transparent) -60px 50%/56px 6px no-repeat,
    linear-gradient(90deg,transparent,color-mix(in srgb,var(--lp-t1) 55%,transparent) 14%,color-mix(in srgb,var(--lp-t3) 45%,transparent) 86%,transparent) 0 50%/100% 1.5px no-repeat;
  animation:lpTrace 14s cubic-bezier(.45,0,.55,1) 1.6s infinite}
@keyframes lpTrace{0%{background-position:-60px 50%,0 50%}22%,100%{background-position:calc(100% + 60px) 50%,0 50%}}
/* glow kecil di belakang judul saat gelombang R (landing-fx.js), tetap redup */
.hero-title::before{content:"";position:absolute;z-index:-1;left:-8%;bottom:-22%;width:86%;height:72%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--lp-tglow),transparent);opacity:var(--lp-pk0)}
.hero-title.pk-a::before{animation:lpPkA 1s ease-out}
.hero-title.pk-b::before{animation:lpPkB 1s ease-out}
@keyframes lpPkA{0%{opacity:var(--lp-pk0)}22%{opacity:1}100%{opacity:var(--lp-pk0)}}
@keyframes lpPkB{0%{opacity:var(--lp-pk0)}22%{opacity:1}100%{opacity:var(--lp-pk0)}}
@supports not ((-webkit-background-clip:text) or (background-clip:text)){ .hero-title .l2{color:var(--scrub);background:none} }
/* layar ±320px: "Kedokteran" tidak menempel/terpotong di tepi kartu */
@media (max-width:359px){ .hero-title{font-size:clamp(2.5rem,14vw,3.1rem)} }

/* label kecil di atas judul */
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 clamp(14px,2vw,22px);padding:6px 13px 6px 11px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--scrub) 28%,var(--line));background:color-mix(in srgb,var(--surface) 82%,transparent);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--scrub);line-height:1.2}
.hero-eyebrow i{width:7px;height:7px;flex:none;border-radius:50%;background:currentColor;box-shadow:0 0 0 3px color-mix(in srgb,var(--scrub) 18%,transparent);animation:lpDot 2.6s ease-in-out infinite}
@keyframes lpDot{50%{opacity:.35}}

/* indikator BPM (dekoratif) */
.vitals{flex-direction:column;align-items:flex-start;gap:4px;padding:9px 14px 10px;border-radius:14px;
  border-color:color-mix(in srgb,var(--scrub) 22%,var(--line));background:color-mix(in srgb,var(--surface) 88%,transparent);
  box-shadow:0 12px 28px -18px rgba(15,42,51,.5),inset 0 1px 0 var(--lp-hl)}
.vitals::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1px solid var(--pulse);opacity:0;pointer-events:none}
.vitals.beat::after{animation:lpRing .8s ease-out}
@keyframes lpRing{0%{opacity:.45;transform:scale(1)}100%{opacity:0;transform:scale(1.1)}}
.sig-lbl{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.6rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sig-val{display:flex;align-items:center;gap:6px;line-height:1}
#bpm{display:inline-block;min-width:2ch;font-size:1.3rem;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;transform-origin:0 60%}
.vitals.beat #bpm{animation:lpBpm .5s ease-out}
@keyframes lpBpm{30%{transform:scale(1.06)}}
:root[data-theme="dark"] .vitals{border-color:color-mix(in srgb,var(--pulse) 30%,var(--line));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--pulse) 8%,transparent),0 0 24px -10px color-mix(in srgb,var(--pulse) 60%,transparent),inset 0 1px 0 var(--lp-hl)}
@media (max-width:600px){
  /* di layar kecil indikator menempel di pojok area EKG agar tidak bertabrakan dengan judul */
  .vitals{top:auto;bottom:12px;right:12px;padding:7px 11px 8px;gap:3px;border-radius:12px}
  .sig-lbl{font-size:.54rem}
  #bpm{font-size:1.08rem}
  .vitals svg{width:15px;height:15px}
}

/* area EKG: garis dasar putus-putus & penanda waktu tipis */
.ecg-wrap::before{content:"";position:absolute;left:0;right:0;top:66%;height:1px;pointer-events:none;opacity:.55;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--scrub) 40%,transparent) 0 6px,transparent 6px 12px)}
.ecg-wrap::after{content:"";position:absolute;left:0;right:0;bottom:0;height:7px;pointer-events:none;opacity:.6;
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--scrub) 45%,transparent) 0 1px,transparent 1px 40px)}
.ecg-scale{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;letter-spacing:.08em}
/* desktop: garis penanda mengikuti kursor di atas EKG (dibuat oleh landing-fx.js) */
.ecg-cursor{position:absolute;top:6%;bottom:6%;left:0;width:1px;z-index:2;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--scrub) 55%,transparent) 30% 70%,transparent);
  transform:translate3d(var(--ex,0px),0,0);transition:opacity .3s}
.ecg-cursor::after{content:"";position:absolute;left:-4px;top:calc(68.2% - 4.5px);width:9px;height:9px;border-radius:50%;
  background:var(--surface);border:1.5px solid var(--scrub);box-shadow:0 0 0 4px color-mix(in srgb,var(--scrub) 16%,transparent)}
.ecg-wrap.is-near .ecg-cursor{opacity:1}

/* urutan masuk: logo → label → judul → deskripsi → tombol → BPM & EKG */
.js:has(#hero) .site-head .brand{animation:lpBrandIn .45s var(--lp-ease) both}
@keyframes lpBrandIn{from{opacity:0;transform:translateY(-4px)}}
.js .hero-eyebrow{opacity:0;transform:translateY(8px)}
.js .vitals,.js .ecg-wrap{opacity:0}
/* judul: wadah tampil, "LatPrak" naik, lalu "Kedokteran" dibuka dengan gradient reveal */
.js .hero-title{opacity:1;transform:none}
.js .hero-title .l1,.js .hero-title .l2{opacity:0}
.js .is-ready .hero-eyebrow{animation:rise .55s var(--lp-ease) .06s forwards}
.js .is-ready .hero-title{animation:none}
.js .is-ready .hero-title .l1{opacity:1;animation:lpL1 .6s var(--lp-ease) .16s backwards}
.js .is-ready .hero-title .l2{opacity:1;animation:lpReveal 1s var(--lp-ease) .34s backwards,lpFlow 14s linear 1.6s infinite}
@keyframes lpL1{from{opacity:0;transform:translateY(12px)}}
@keyframes lpReveal{from{opacity:0;transform:translateY(6px);-webkit-clip-path:inset(-30% 100% -45% -4%);clip-path:inset(-30% 100% -45% -4%)}
  55%{opacity:1}to{opacity:1;transform:none;-webkit-clip-path:inset(-30% -8% -45% -4%);clip-path:inset(-30% -8% -45% -4%)}}
.js .is-ready .hero-lede{animation:rise .6s var(--lp-ease) .5s forwards}
.js .is-ready .hero-acts{animation:rise .6s var(--lp-ease) .6s forwards}
.js .is-ready .vitals,.js .is-ready .ecg-wrap{animation:lpFadeIn .7s var(--lp-ease) .72s forwards}
@keyframes lpFadeIn{to{opacity:1}}
/* ponsel/tablet & layar sentuh: tanpa aliran gradient terus-menerus, cukup sapuan cahaya berkala (lebih hemat) */
@media (hover:none),(max-width:700px){
  .hero-title .l2{animation:lpSweepOnly 12s linear 1.6s infinite}
  .js .is-ready .hero-title .l2{animation:lpReveal 1s var(--lp-ease) .34s backwards,lpSweepOnly 12s linear 1.6s infinite}
  .hero-title .l2::after{animation-duration:12s}
}
.lp-idle .ecg-paper::before,.lp-paused .ecg-paper::before,.lp-idle .hero-eyebrow i,.lp-paused .hero-eyebrow i,
.js.lp-idle .is-ready .hero-title .l2,.js.lp-paused .is-ready .hero-title .l2,.js .is-off.is-ready .hero-title .l2,
.lp-idle .hero-title .l2::after,.lp-paused .hero-title .l2::after,.is-off .hero-title .l2::after{animation-play-state:paused}
.lp-lite .ecg-paper::before,.lp-lite .hero-title .l2::after{animation:none}
.lp-lite .hero-title .l2,.lp-lite.js .is-ready .hero-title .l2{animation:lpReveal 1s var(--lp-ease) .34s backwards}

/* ---------- judul section: aksen kecil bergaya monitor ---------- */
.section-head h2::before{content:"";display:block;width:52px;height:12px;margin-bottom:14px;
  background:linear-gradient(90deg,var(--scrub),var(--helix));
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Cpath d='M1 7h15l3-4 3 4h4l3-6 4 10 3-4h15' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 52 12'%3E%3Cpath d='M1 7h15l3-4 3 4h4l3-6 4 10 3-4h15' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}

/* ---------- kartu latihan ---------- */
.station{isolation:isolate;transition:border-color .25s,transform .3s var(--lp-ease),box-shadow .3s}
/* sorotan lembut mengikuti kursor, di belakang teks */
.station::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,30%),color-mix(in srgb,var(--accent) 13%,transparent),transparent 62%)}
.station:hover,.station:focus-within{box-shadow:var(--shadow),0 26px 54px -30px color-mix(in srgb,var(--accent) 75%,transparent)}
.station:hover::after,.station:focus-within::after,.station.is-lit::after{opacity:1}
.station:hover{transform:translateY(-5px)}
.station.is-soon:hover{transform:none;box-shadow:var(--shadow)}
.station.is-soon::after{display:none}
.station-cta{box-shadow:0 10px 20px -14px var(--accent);transition:gap .2s,box-shadow .3s,transform .2s var(--lp-ease)}
.station:hover .station-cta{box-shadow:0 14px 26px -12px var(--accent)}
.chips li{transition:border-color .2s,background-color .2s}
.station:hover .chips li{border-color:color-mix(in srgb,var(--accent) 35%,var(--line))}
@media (hover:none){
  .station:active{transform:scale(.985)}
  .station:active .station-cta{transform:scale(.97)}
}

/* ---------- promo Medibel AI ---------- */
.ai-promo{transition:transform .3s var(--lp-ease),box-shadow .3s}
@media (hover:hover){ .ai-promo:hover{transform:translateY(-3px);box-shadow:0 30px 60px -36px rgba(11,122,117,.8)} }

/* ---------- cara belajar ---------- */
.steps{border-top:0;background:linear-gradient(90deg,var(--scrub),var(--helix) 60%,var(--line) 100%) top left/100% 2px no-repeat}
.steps li::before{transition:background-color .25s,color .25s,border-color .25s,transform .25s var(--lp-ease),box-shadow .25s;background:var(--surface)}
.steps li:hover::before{background:var(--scrub);border-color:var(--scrub);color:var(--scrub-ink);transform:scale(1.08);box-shadow:0 0 0 6px var(--scrub-soft)}
.steps h3{transition:color .2s}
.steps li:hover h3{color:var(--scrub)}
@media (max-width:760px){ .steps{background:none} .steps li:first-child{border-top:2px solid var(--scrub)} }

/* ---------- kabar terbaru ---------- */
.tl-item::before{transition:transform .25s var(--lp-ease),border-color .25s,box-shadow .25s}
.tl-item:hover::before{transform:scale(1.18);border-color:var(--scrub);box-shadow:0 0 0 5px var(--scrub-soft)}
.tl-item.is-new:hover::before{border-color:var(--pulse);box-shadow:0 0 0 5px color-mix(in srgb,var(--pulse) 18%,transparent)}

/* kotak ajakan feedback di beranda */
.fb-callout{isolation:isolate;box-shadow:0 30px 60px -40px rgba(15,42,51,.7);transition:transform .3s var(--lp-ease),box-shadow .3s;
  background:
    radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,var(--scrub) 42%,transparent) 0,transparent 58%),
    radial-gradient(90% 80% at 0% 100%,color-mix(in srgb,var(--helix) 26%,transparent) 0,transparent 60%),
    var(--ink)}
.fb-callout::before{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(color-mix(in srgb,var(--paper) 9%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--paper) 9%,transparent) 1px,transparent 1px);
  background-size:22px 22px;-webkit-mask-image:linear-gradient(200deg,#000,transparent 70%);mask-image:linear-gradient(200deg,#000,transparent 70%)}
.fb-callout::after{content:"";position:absolute;z-index:-1;right:-10px;bottom:18px;width:220px;height:46px;pointer-events:none;opacity:.35;
  background:var(--paper);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 46'%3E%3Cpath d='M2 30h70l7-8 7 8h14l5 4 8-30 10 40 6-14h22l10-9 10 9h47' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 46'%3E%3Cpath d='M2 30h70l7-8 7 8h14l5 4 8-30 10 40 6-14h22l10-9 10 9h47' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat 0 0/100% 100%}
@media (hover:hover){ .fb-callout:hover{transform:translateY(-3px);box-shadow:0 36px 70px -40px rgba(11,122,117,.8)} }

/* ---------- footer & tombol melayang ---------- */
.site-foot{background:color-mix(in srgb,var(--paper) 80%,transparent)}
.site-foot a{text-decoration-color:color-mix(in srgb,currentColor 35%,transparent);transition:color .2s,text-decoration-color .2s}
.site-foot a:hover{color:var(--scrub);text-decoration-color:var(--scrub)}
.fab{background-image:linear-gradient(135deg,var(--scrub),color-mix(in srgb,var(--scrub) 75%,var(--helix)))}
.fab:active{transform:scale(.96)}

/* =========================================================
   Halaman feedback: formulir lebih jelas di setiap keadaan
   ========================================================= */
.fb-card{border-color:transparent;
  background:linear-gradient(var(--surface),var(--surface)) padding-box,
    linear-gradient(140deg,color-mix(in srgb,var(--scrub) 55%,var(--line)),var(--line) 40%,var(--line) 65%,color-mix(in srgb,var(--helix) 45%,var(--line))) border-box;
  transition:box-shadow .35s}
.fb-card:focus-within{box-shadow:var(--shadow),0 30px 70px -45px var(--lp-glow)}
.fb-points .ico{transition:transform .25s var(--lp-ease),background-color .25s,color .25s}
.fb-points li:hover .ico{transform:translateY(-2px);background:var(--scrub);color:var(--scrub-ink)}
.back-link svg{transition:transform .2s var(--lp-ease)}
.back-link:hover svg{transform:translateX(-3px)}

/* 1) kosong & 2) sedang mengetik */
.lb{transition:color .2s}
.field:focus-within > .lb{color:var(--scrub)}
.input,.textarea{transition:border-color .2s,box-shadow .2s,background-color .2s}
.input:focus,.textarea:focus{background:var(--surface)}
.field:not(.invalid) .input:not(:placeholder-shown):not(:focus),
.field:not(.invalid) .textarea:not(:placeholder-shown):not(:focus){border-color:color-mix(in srgb,var(--scrub) 45%,var(--line-strong));background:var(--surface)}
.cnt{transition:color .2s;flex:none;white-space:nowrap}
.field:focus-within .cnt:not(.warn){color:var(--scrub)}

/* 3) tidak valid: pesan muncul dengan ikon, meluncur halus */
.help .err:not(:empty){display:inline-flex;align-items:flex-start;gap:6px;animation:lpErrIn .25s var(--lp-ease)}
.help .err:not(:empty)::before{content:"!";flex:none;display:grid;place-items:center;width:17px;height:17px;margin-top:2px;border-radius:50%;
  background:var(--bad);color:var(--surface);font-size:.72rem;font-weight:800;line-height:1}
@keyframes lpErrIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.field.invalid > .lb{color:var(--bad)}

/* chip pilihan */
.chip span{transition:border-color .2s,background-color .2s,color .2s,transform .18s var(--lp-ease),box-shadow .2s}
@media (hover:hover){ .chip:hover span{transform:translateY(-1px)} }
.chip:active span{transform:scale(.97)}
.chip input:checked + span{box-shadow:0 6px 16px -10px var(--lp-glow)}

/* 4) sedang mengirim */
.form fieldset:disabled{opacity:.6;transition:opacity .25s}
.btn[aria-busy="true"]{cursor:progress;opacity:1}
.btn[aria-busy="true"]::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2.5px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite}
.status{border:1px solid transparent}
.status.load{position:relative;overflow:hidden;align-items:center;border-color:var(--line);animation:lpStatusA .3s var(--lp-ease)}
.status.load::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;
  background:linear-gradient(90deg,transparent,var(--scrub) 45%,var(--scrub) 55%,transparent) no-repeat;background-size:35% 100%;animation:upsweep 1.2s linear infinite}

/* 6) gagal terkirim */
.status.err{animation:lpStatusB .35s var(--lp-ease)}
.status.err::before{content:"!";flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--bad);color:var(--surface);font-weight:800;font-size:.85rem;line-height:1}
@keyframes lpStatusA{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@keyframes lpStatusB{0%{opacity:0;transform:translateY(-6px)}60%{opacity:1;transform:translateX(3px)}100%{transform:none}}

/* 5) berhasil terkirim */
#formView:not([hidden]),#doneView:not([hidden]){animation:lpViewIn .45s var(--lp-ease)}
@keyframes lpViewIn{from{opacity:0;transform:translateY(10px) scale(.99)}to{opacity:1;transform:none}}
.done{position:relative;isolation:isolate}
.done::before{content:"";position:absolute;z-index:-1;left:50%;top:-10px;width:min(420px,100%);height:180px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--ok) 16%,transparent),transparent)}
.receipt span{animation:lpViewIn .4s var(--lp-ease) backwards}
.receipt span:nth-child(2){animation-delay:.08s}
.receipt span:nth-child(3){animation-delay:.16s}
.receipt span:nth-child(n+4){animation-delay:.24s}

/* ---------- layar sangat kecil (±320px) ---------- */
@media (max-width:359px){
  .lp-orb.o2{width:70vmax;height:70vmax}
  .fb-card{padding:18px 14px}
  .chip span{padding:0 12px}
}

/* ---------- gerak dikurangi: tanpa animasi latar, tanpa parallax, tanpa geser ---------- */
@media (prefers-reduced-motion:reduce){
  .lp-orb,.lp-wave,.lp-wave::before,.head-ai,.lp-bg::after,.hero-eyebrow i,.ecg-paper::before,.vitals::after{animation:none!important;translate:none!important}
  /* judul & BPM: warna, gradient, dan garis sinyal tetap ada, hanya geraknya yang dimatikan */
  .js .hero-title .l1,.js .hero-title .l2{opacity:1!important;transform:none!important;animation:none!important}
  .hero-title .l2::after,.hero-title::before,#bpm{animation:none!important}
  .lp-bg::after,.lp-p,.lp-beat,.ecg-cursor{display:none}
  .js .hero-eyebrow,.js .vitals,.js .ecg-wrap,.js:has(#hero) .site-head .brand{opacity:1;transform:none;animation:none}
  .lp-rv{opacity:1!important;translate:none!important}
  .station:hover,.ai-promo:hover,.fb-callout:hover,.btn:hover{transform:none}
  .ecg-paper::before{transform:none}
}