/* kklp.org — "Under development" page. Font self-host (OFL), tanpa sumber luar. */
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/inter-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/inter-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url("../fonts/source-serif-4-latin-600-normal.woff2") format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:italic;font-weight:500;font-display:swap;src:url("../fonts/source-serif-4-latin-500-italic.woff2") format("woff2")}

:root{
  --bg:#FAF7F2; --surface:#FFFFFF; --panel:#EFE6D8;
  --title:#0C2245; --ink:#1F2937; --muted:#5B6472; --line:#E2DCD1;
  --accent:#0F766E; --accent-ink:#FFFFFF; --accent-hover:#0B5E58;
  --terra:#B4532A; --geno:#0C2245; --focus:#B4532A;
  --ecg:#0F766E; --ecg-op:.55; --ecg-head:#B4532A; --bubble:rgba(15,118,110,.07); --bubble2:rgba(180,83,42,.07);
  --badge-bg:#F6E7DE; --shadow:rgba(12,34,69,.10);
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:#0B1527; --surface:#12203A; --panel:#132442;
    --title:#F1EDE6; --ink:#DCE3EE; --muted:#A7B2C3; --line:#24365A;
    --accent:#5CC8B8; --accent-ink:#06201D; --accent-hover:#7DD8CB;
    --terra:#EA9A74; --geno:#DCE3EE; --focus:#EA9A74;
    --ecg:#5CC8B8; --ecg-op:.55; --ecg-head:#EA9A74; --bubble:rgba(92,200,184,.07); --bubble2:rgba(234,154,116,.06);
    --badge-bg:rgba(234,154,116,.14); --shadow:rgba(0,0,0,.35);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:1.0625rem;line-height:1.6}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding-inline:20px}
a{color:var(--accent)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}

/* header */
.top{border-bottom:1px solid var(--line);background:var(--surface)}
.top-in{display:flex;align-items:center;min-height:68px}
.logo{display:inline-flex;align-items:center;gap:12px}
.logo-mark{flex:none}
.lm-line{fill:none;stroke:var(--geno);stroke-width:2.6}
.lm-dot{fill:var(--terra)}
.logo-txt b{display:block;font-family:var(--serif);font-weight:600;font-size:1.6rem;line-height:1.1;color:var(--title);letter-spacing:-.01em}
.logo-txt b i{font-style:normal;color:var(--terra)}
.logo-txt small{display:block;font-size:.78rem;color:var(--muted);letter-spacing:.01em}

/* hero */
.stage{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column;
  background:linear-gradient(160deg,var(--bg) 0%,var(--bg) 45%,var(--panel) 100%)}
.hero{flex:1;position:relative;z-index:2;display:grid;grid-template-columns:1fr;gap:28px;padding-top:32px;padding-bottom:40px;align-items:center}
.status{display:inline-flex;align-items:center;gap:10px;margin:0 0 16px;padding:6px 14px;border:1px solid var(--line);
  border-radius:999px;background:var(--surface);font-size:.85rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.status-dot{width:9px;height:9px;border-radius:50%;background:var(--terra);flex:none}
h1{font-family:var(--serif);font-weight:600;color:var(--title);font-size:clamp(2.1rem,7.4vw,3.35rem);line-height:1.08;letter-spacing:-.015em;margin:0 0 20px}
h1 em{display:block;font-style:italic;font-weight:500;color:var(--terra)}
.lead{font-size:1.08rem;color:var(--muted);max-width:36em;margin:0 0 12px}
.lead strong{color:var(--ink);font-weight:600}
.nowrap{white-space:nowrap}

/* demo card (mirrors the login card) */
.cta{padding:26px 24px 22px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:16px;
  max-width:30em;box-shadow:0 18px 50px var(--shadow)}
.cta-badge{display:inline-block;margin:0 0 10px;padding:3px 10px;border-radius:999px;background:var(--badge-bg);color:var(--terra);
  font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.cta h2{font-family:var(--serif);font-weight:600;font-size:1.45rem;line-height:1.25;color:var(--title);margin:0 0 8px}
.cta p{margin:0 0 16px;color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border-radius:12px;
  background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:1rem;text-decoration:none;transition:background-color .2s ease}
.btn:hover{background:var(--accent-hover)}
.btn-ic{flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round;stroke-linecap:round}
.cta .cta-note{margin:12px 0 0;font-size:.9rem}

/* Heartbeat ECG line behind the content — path & ecgDraw copied from the KKLP login page (login-ecg) */
.bg-ecg{position:relative;z-index:1;width:100%;height:96px;margin-top:-8px;pointer-events:none;overflow:hidden}
@media (min-width:900px){.bg-ecg{height:120px;margin-top:-24px}}
.bg-ecg svg{display:block;width:100%;min-width:760px;height:100%}
.ecg-line{fill:none;stroke:var(--ecg);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:var(--ecg-op)}
.ecg-head{fill:none;stroke:var(--ecg-head);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
/* decorative bubbles */
.bg-bubble{position:absolute;border-radius:50%;background:var(--bubble);pointer-events:none;z-index:0}
.bg-bubble.b1{width:200px;height:200px;top:6%;left:4%}
.bg-bubble.b2{width:140px;height:140px;bottom:10%;right:8%;background:var(--bubble2)}
.bg-bubble.b3{width:90px;height:90px;top:70%;left:18%}

/* footer */
.foot{border-top:1px solid var(--line);background:var(--surface);font-size:.9rem;color:var(--muted)}
.foot-in{display:flex;flex-wrap:wrap;gap:4px 24px;justify-content:space-between;padding-top:18px;padding-bottom:18px}
.foot p{margin:0}

@media (min-width:900px){
  .wrap{padding-inline:40px}
  .top-in{min-height:76px}
  .hero{grid-template-columns:1.15fr .85fr;gap:64px;padding-top:56px;padding-bottom:64px}
  .cta{padding:32px 30px 26px}
}
@media (max-width:599px){.bg-bubble.b3{display:none}}

/* animation only when the user has not asked for reduced motion (transform/opacity/stroke-dashoffset only, no JS) */
@media (prefers-reduced-motion:no-preference){
  .ecg-line{stroke-dasharray:1500;stroke-dashoffset:1500;animation:ecgDraw 4s linear infinite}
  .ecg-head{stroke-dasharray:60 1440;stroke-dashoffset:60;animation:ecgHead 4s linear infinite}
  .bg-bubble{will-change:transform;animation:bubbleFloat 18s ease-in-out infinite}
  .bg-bubble.b2{animation-delay:4s}.bg-bubble.b3{animation-delay:8s}
  .status-dot,.lm-dot{transform-box:fill-box;transform-origin:center;animation:heartBeat 1.6s ease-in-out infinite}
  .cta{animation:cardSlideIn .8s cubic-bezier(.16,1,.3,1) both}
}
/* reduced motion: static, fully drawn ECG line */
@media (prefers-reduced-motion:reduce){
  .ecg-line{stroke-dasharray:none;stroke-dashoffset:0}
}
/* keyframes copied from the KKLP login page (assets/css/app.css) */
@keyframes ecgDraw{0%{stroke-dashoffset:1500}70%{stroke-dashoffset:0}100%{stroke-dashoffset:-1500}}
@keyframes ecgHead{0%{stroke-dashoffset:60;opacity:.95}70%{stroke-dashoffset:-1440;opacity:.95}70.1%,100%{stroke-dashoffset:-1440;opacity:0}}
@keyframes bubbleFloat{0%,100%{transform:translate(0,0) scale(1);opacity:.6}33%{transform:translate(40px,-30px) scale(1.1);opacity:.9}66%{transform:translate(-30px,20px) scale(.95);opacity:.5}}
@keyframes heartBeat{0%,100%{transform:scale(1)}14%{transform:scale(1.18)}28%{transform:scale(1)}42%{transform:scale(1.18)}70%{transform:scale(1)}}
@keyframes cardSlideIn{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}

/* 404 */
.logo-link{text-decoration:none;color:inherit}
@media (min-width:900px){.hero-404{grid-template-columns:1fr}}