/* ZiKlinik v2: token, dasar, kerangka, orb, tombol (dipindah dari desain/proto/proto.css tanpa mengubah nilai; hanya font dibuat lokal).
   Komponen layar ada di v2.css. Tema: <html data-theme="terang|gelap" data-klinik="spec|intermedika|shanaya|hanslouis|yki">.
   Mesin lemah: tambah kelas "hemat" pada <html> untuk mematikan blur dan putaran orb. */

@font-face{font-family:"Inter";font-weight:100 900;font-display:swap;src:url("/static/font/inter-var.woff2") format("woff2")}

:root{
  --f:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Mono","Roboto Mono",Menlo,monospace;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;
  --r1:10px;--r2:16px;--r3:24px;--pil:999px;
  --pegas:cubic-bezier(.32,.72,0,1);--halus:cubic-bezier(.25,.1,.25,1);
  --cepat:160ms;--sedang:280ms;--lambat:480ms;
  --tinggi-tab:62px;
  /* aksen klinik: t = dipakai di tema terang, g = di tema gelap */
  --ak-t:27 95 170;--ak-g:125 187 245;--orb-a:64 150 235;--orb-b:41 169 225;--orb-c:132 222 236;--orb-d:86 104 222;
}
[data-klinik=intermedika]{--ak-t:29 43 123;--ak-g:150 164 245;--orb-a:92 110 230;--orb-b:19 168 158;--orb-c:120 226 212;--orb-d:60 76 190}
[data-klinik=shanaya]{--ak-t:26 106 163;--ak-g:122 190 240;--orb-a:43 138 203;--orb-b:108 191 173;--orb-c:183 206 46;--orb-d:60 110 210}
[data-klinik=hanslouis]{--ak-t:30 99 181;--ak-g:128 190 246;--orb-a:43 123 212;--orb-b:91 192 230;--orb-c:170 226 246;--orb-d:61 90 128}
[data-klinik=yki]{--ak-t:46 49 146;--ak-g:160 164 248;--orb-a:96 100 232;--orb-b:70 150 230;--orb-c:160 200 250;--orb-d:46 49 146}

[data-theme=terang]{
  color-scheme:light;
  --ak:var(--ak-t);--aksen:rgb(var(--ak-t));--di-aksen:#FFFFFF;
  --latar:#ECF0F5;--p1:#FFFFFF;--p2:#F4F6F9;--p3:#E3E8EF;--kertas:#FFFEFA;--kertas-garis:rgba(16,24,34,.055);
  --garis:rgba(16,24,34,.09);--garis-isian:#8792A0;
  --teks:#131921;--teks2:#465261;--teks3:#5F6B78;
  --utama:#131921;--di-utama:#FFFFFF;
  --hijau:#12683A;--hijau-l:rgba(24,122,66,.12);
  --amber:#7D5A00;--amber-l:rgba(214,150,0,.18);
  --merah:#B3122A;--merah-l:rgba(184,2,29,.09);
  --kaca:rgba(255,255,255,.88);--kaca-pekat:rgba(255,255,255,.97);--kaca-pilih:rgba(16,24,34,.07);
  --kaca-garis:inset 0 0 0 .5px rgba(16,24,34,.10),inset 0 1px 0 rgba(255,255,255,.9);
  --angkat:0 14px 40px rgba(16,24,34,.14),0 2px 6px rgba(16,24,34,.06);
  --cahaya:.11;--orb-0:#0B1A2C;--orb-1:#17324F;--orb-tepi:rgba(255,255,255,.55);--orb-kilau:rgba(255,255,255,.7);
  --orb-bayang:0 18px 44px -12px rgb(var(--ak-t)/.45);
}
[data-theme=gelap]{
  color-scheme:dark;
  --ak:var(--ak-g);--aksen:rgb(var(--ak-g));--di-aksen:#0B0E13;
  --latar:#0B0E13;--p1:#12161D;--p2:#191E27;--p3:#232A36;--kertas:#151A22;--kertas-garis:rgba(226,236,255,.05);
  --garis:rgba(190,208,228,.11);--garis-isian:#6C7888;
  --teks:#F1F4F8;--teks2:#B4BDC9;--teks3:#8A95A3;
  --utama:#F1F4F8;--di-utama:#0B0E13;
  --hijau:#4AD9A0;--hijau-l:rgba(63,213,154,.13);
  --amber:#F4BC4C;--amber-l:rgba(244,185,66,.14);
  --merah:#FF6B78;--merah-l:rgba(255,92,108,.13);
  --kaca:rgba(24,29,38,.86);--kaca-pekat:rgba(21,25,33,.97);--kaca-pilih:rgba(255,255,255,.10);
  --kaca-garis:inset 0 .5px 0 rgba(255,255,255,.16),inset 0 0 0 .5px rgba(255,255,255,.09);
  --angkat:0 16px 48px rgba(0,0,0,.55),0 2px 6px rgba(0,0,0,.3);
  --cahaya:.16;--orb-0:#060A10;--orb-1:#0F1826;--orb-tepi:rgba(226,236,255,.38);--orb-kilau:rgba(255,255,255,.55);
  --orb-bayang:0 14px 40px -10px rgba(0,0,0,.6);
}

*,*::before,*::after{box-sizing:border-box}
html{font-size:17px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;font:400 1rem/1.47 var(--f);letter-spacing:-.011em;color:var(--teks);
  background:radial-gradient(110% 56% at 50% -12%,rgb(var(--ak)/var(--cahaya)),transparent 62%) no-repeat,var(--latar);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p{margin:0}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;letter-spacing:inherit}
button{border:0;background:none;cursor:pointer;padding:0}
svg.ik{width:22px;height:22px;flex:none;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
svg.ik.k{width:18px;height:18px}
:focus-visible{outline:2.5px solid var(--aksen);outline-offset:2px;border-radius:var(--r1)}
.angka,.nomor{font-variant-numeric:tabular-nums}
.kecil{font-size:.824rem;line-height:1.4;color:var(--teks3)}          /* 14 px */
.label{font-size:.824rem;font-weight:500;color:var(--teks3)}
.redup{color:var(--teks2)}
.j1{font-size:2rem;line-height:1.16;font-weight:600;letter-spacing:-.024em}   /* 34 px */
.j2{font-size:1.294rem;line-height:1.27;font-weight:600;letter-spacing:-.018em} /* 22 px */
.j3{font-size:1rem;font-weight:600}
.baik{color:var(--hijau)}.awas{color:var(--amber)}.buruk{color:var(--merah)}

/* Kerangka: pita atas mengambang (desktop), tab pil (HP dan tablet) */
.atas{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--s4);
  padding:14px var(--s6);background:linear-gradient(var(--latar) 30%,transparent)}
.merek{display:flex;align-items:center;gap:var(--s3);font-weight:600;letter-spacing:-.01em}
.plakat{width:48px;height:28px;border-radius:8px;background:#fff;overflow:hidden;flex:none;box-shadow:inset 0 0 0 .5px rgba(16,24,34,.12)}
.plakat img{display:block;width:50px;margin:-3px 0 0 -1px}
.kapsul{display:flex;gap:2px;height:44px;padding:3px;border-radius:var(--pil);background:var(--kaca);box-shadow:var(--kaca-garis),var(--angkat)}
.kapsul a{display:flex;align-items:center;gap:var(--s2);height:38px;padding:0 18px;border-radius:var(--pil);font-size:.882rem;font-weight:500;color:var(--teks2);position:relative;transition:background var(--cepat) var(--halus)}
.kapsul a.aktif{background:var(--kaca-pilih);color:var(--teks)}
.kapsul a:hover{color:var(--teks)}
.titik{width:7px;height:7px;border-radius:50%;background:var(--merah);flex:none}
.kanan{display:flex;justify-content:flex-end;align-items:center;gap:var(--s3)}
.cari{display:flex;align-items:center;gap:var(--s2);height:44px;padding:0 16px;border-radius:var(--pil);background:var(--p2);color:var(--teks3);font-size:.882rem;min-width:220px;box-shadow:inset 0 0 0 .5px var(--garis)}
.cari kbd{margin-left:auto;font:500 .765rem var(--mono);padding:1px 7px;border-radius:6px;background:var(--p3);color:var(--teks2)}
.bulat{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--p2);color:var(--teks2);box-shadow:inset 0 0 0 .5px var(--garis);flex:none}
.avatar{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-size:.824rem;font-weight:600;background:rgb(var(--ak)/.16);color:var(--aksen);flex:none}
main{max-width:1240px;margin:0 auto;padding:var(--s4) var(--s6) 120px}
main.sempit{max-width:760px}

.tab{display:none;position:fixed;left:16px;right:16px;bottom:22px;z-index:30;height:var(--tinggi-tab);padding:4px;border-radius:var(--pil);
  background:var(--kaca-pekat);box-shadow:var(--kaca-garis),var(--angkat)}
.tab a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:var(--pil);font-size:.765rem;font-weight:500;color:var(--teks3);position:relative}
.tab a.aktif{background:var(--kaca-pilih);color:var(--teks)}
.tab a .titik{position:absolute;top:9px;left:calc(50% + 9px)}
.tirai{display:none;position:fixed;left:0;right:0;bottom:0;height:150px;z-index:25;pointer-events:none;background:linear-gradient(transparent,var(--latar) 62%)}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  html:not(.hemat) .kapsul,html:not(.hemat) .tab,html:not(.hemat) .bilah{-webkit-backdrop-filter:blur(24px) saturate(170%);backdrop-filter:blur(24px) saturate(170%)}
  html:not(.hemat)[data-theme=gelap] .kapsul,html:not(.hemat)[data-theme=gelap] .tab,html:not(.hemat)[data-theme=gelap] .bilah{background:rgba(24,29,38,.66)}
  html:not(.hemat)[data-theme=terang] .kapsul,html:not(.hemat)[data-theme=terang] .tab,html:not(.hemat)[data-theme=terang] .bilah{background:rgba(255,255,255,.72)}
}

/* Tombol dan chip */
.tb{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);min-height:44px;padding:0 20px;border-radius:var(--pil);font-weight:600;font-size:.941rem;white-space:nowrap;
  background:var(--p2);color:var(--teks);box-shadow:inset 0 0 0 .5px var(--garis);transition:transform var(--cepat) var(--pegas),background var(--cepat) var(--halus)}
.tb:active{transform:scale(.97)}
.tb.utama{background:var(--utama);color:var(--di-utama);box-shadow:none}
.tb.besar{min-height:52px;padding:0 26px;font-size:1rem}
.tb.sunyi{background:none;box-shadow:none;color:var(--teks2);padding:0 12px}
.tb.kotak{width:44px;padding:0}
.tb.lebar{width:100%}
.chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 11px;border-radius:var(--pil);font-size:.824rem;font-weight:500;background:var(--p3);color:var(--teks2);white-space:nowrap}
.chip.hijau{background:var(--hijau-l);color:var(--hijau)}
.chip.amber{background:var(--amber-l);color:var(--amber)}
.chip.merah{background:var(--merah-l);color:var(--merah)}
.chip.aksen{background:rgb(var(--ak)/.13);color:var(--aksen)}
.kode{font:500 .765rem/1 var(--mono);letter-spacing:0;padding:5px 8px;border-radius:7px;background:var(--p3);color:var(--teks2);white-space:nowrap}
.kode b{font-weight:500;color:var(--teks3);margin-right:5px}

/* Orb: CSS murni, warna dari aksen klinik */
.orb{--d:64px;position:relative;width:var(--d);height:var(--d);isolation:isolate;flex:none}
.orb-halo{position:absolute;inset:-26%;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,rgb(var(--orb-a)/.30),rgb(var(--orb-c)/.08) 58%,transparent 76%)}
.orb-bola{position:absolute;inset:0;border-radius:50%;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 42%,var(--orb-1),var(--orb-0) 78%);box-shadow:var(--orb-bayang)}
.orb-bola i{position:absolute;border-radius:50%;mix-blend-mode:screen;filter:blur(calc(var(--d)*.10))}
.orb-bola i:nth-child(1){inset:-20%;background:conic-gradient(from 0deg,transparent 0 6%,rgb(var(--orb-a)/.92) 20%,rgb(var(--orb-b)/.85) 36%,transparent 50%,rgb(var(--orb-d)/.78) 66%,rgb(var(--orb-c)/.55) 80%,transparent 94%);animation:putar 14s linear infinite}
.orb-bola i:nth-child(2){inset:-8%;background:radial-gradient(circle at 30% 68%,rgb(var(--orb-d)/.68),transparent 52%),radial-gradient(circle at 72% 30%,rgb(var(--orb-a)/.55),transparent 48%),radial-gradient(circle at 78% 72%,rgb(var(--orb-c)/.45),transparent 40%);animation:putar 22s linear infinite reverse}
.orb-kilau{position:absolute;left:22%;top:12%;width:34%;height:20%;border-radius:50%;background:linear-gradient(180deg,var(--orb-kilau),transparent);filter:blur(1px);transform:rotate(-24deg)}
.orb-tepi{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 0 0 1px var(--orb-tepi),inset 0 0 calc(var(--d)*.14) rgb(var(--orb-a)/.35)}
.orb.napas{animation:napas 5.2s var(--halus) infinite alternate}
.orb.pikir .orb-bola i:nth-child(1){animation-duration:2.6s}
.orb.redup{opacity:.45;filter:saturate(.3)}
@keyframes putar{to{transform:rotate(360deg)}}
@keyframes napas{to{transform:scale(1.015)}}
@keyframes muncul{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.muncul{animation:muncul var(--sedang) var(--pegas) both}
.hemat .orb-bola i,.hemat .orb.napas{animation:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .muncul{animation:none}
}

@media (max-width:900px){
  .atas{grid-template-columns:1fr auto;padding:12px var(--s4)}
  .atas .kapsul,.atas .cari{display:none}
  .tab{display:flex}.tirai{display:block}
  main{padding:var(--s2) var(--s4) 190px}
}
@media (min-width:901px) and (max-width:1100px){.cari{min-width:0}.cari span,.cari kbd{display:none}}