/* Lapisan terakhir: kenyamanan baca, titik henti responsif, dan perbaikan.
   HARUS dimuat paling akhir — sebagian aturannya sengaja menimpa yang di atas.
   Dipindah dari public/index.html — isinya tidak diubah, hanya dipisah. */

/* ============================================================
   LAPISAN KENYAMANAN — tipografi, hierarki, responsif
   ============================================================ */

/* --- 1. TIPOGRAFI --- */
body{
  font-family:var(--font-sans);
  font-size:var(--fs-4); line-height:var(--lh-4);
  letter-spacing:0;                      /* Inter sudah pas tanpa tracking negatif */
  font-variant-numeric:tabular-nums;     /* angka sejajar di tabel & metrik */
  font-feature-settings:"cv05" 1,"ss03" 1;
  text-rendering:optimizeLegibility;
}
.mono,.tbl .mono{font-family:var(--font-mono);font-size:var(--fs-2);letter-spacing:0}
.sm{font-size:var(--fs-2);line-height:var(--lh-2)}
.micro{font-size:var(--fs-1);line-height:var(--lh-1);letter-spacing:.09em;font-weight:600;color:var(--text-3)}
.navsec,.kpi .kl,.stat .k{color:var(--text-3)}
/* Warna teks tag digelapkan supaya lolos 4.5:1 di atas latar tint-nya */
.t-green{background:var(--green-bg);color:#0B6B31}
.t-orange{background:var(--orange-bg);color:#8A5200}
.t-red{background:var(--red-bg);color:#A82F33}
.t-purple{background:var(--purple-bg);color:#4A32B8}
.t-cyan{background:var(--cyan-bg);color:#0A5E96}
.t-blue{background:var(--primary-100);color:#96380C}
[data-theme="dark"] .t-green{color:#5FD98A}
[data-theme="dark"] .t-orange{color:#E7A94A}
[data-theme="dark"] .t-red{color:#F08A8D}
[data-theme="dark"] .t-purple{color:#A996F7}
[data-theme="dark"] .t-cyan{color:#6BBDF0}
[data-theme="dark"] .t-blue{color:#F79860}

/* Judul pakai Plus Jakarta Sans — kepribadian merek dipertahankan */
.pagehd h1,.brand-txt b,.wp-hero h1,.doc-page h1,.kpi .kv,.stat .v{
  font-family:var(--font-display);
}
.pagehd h1{font-size:var(--fs-6);line-height:var(--lh-6);font-weight:800;letter-spacing:-.02em}
.pagehd p{font-size:var(--fs-3);line-height:var(--lh-3);color:var(--text-3);margin-top:2px}
.chd b{font-size:var(--fs-4);font-weight:700;letter-spacing:-.01em}
.kpi .kv{font-size:var(--fs-7);line-height:var(--lh-7);font-weight:800;letter-spacing:-.025em}
.kpi .kl{font-size:var(--fs-1);letter-spacing:.09em}
.kpi .kd{font-size:var(--fs-2);font-weight:500}

/* --- 1b. TINGGI BARIS DIKUNCI PER UKURAN ---
   Elemen dengan font-size inline besar tadi mewarisi line-height 22px dari body,
   jadi 26px teks cuma dapat ruang 22px — huruf berdesakan dan ekor huruf kepotong. */
[style*="font-size:16px"]{line-height:var(--lh-5)}
[style*="font-size:20px"]{line-height:var(--lh-6)!important}
[style*="font-size:26px"]{line-height:var(--lh-7)!important}
[style*="font-size:34px"]{line-height:var(--lh-8)!important}

/* --- 1c. JARAK BACA --- */
table.tbl td{line-height:var(--lh-3)}
table.tbl th{line-height:var(--lh-1)}
.listrow{line-height:var(--lh-3)}
.bubble{line-height:var(--lh-4)}
p,.sm{max-width:78ch}                    /* panjang baris nyaman dibaca */
.doc-page p,.doc-page li{max-width:68ch;line-height:24px}
.cpad p+p,.cpad .sm+.sm{margin-top:var(--s1)}
.chd+.cpad{padding-top:var(--s3)}
.tag{line-height:20px;padding:0 8px}
.b6,.b5{line-height:inherit}
.kpi .kd{line-height:var(--lh-2);margin-top:var(--s1)}
.micro+*{margin-top:var(--s1)}
h1,h2,h3,h4{text-wrap:balance}
.cname,.cprev{line-height:var(--lh-3)}
.navitem .nm,.subitem .nm{line-height:var(--lh-3)}

/* --- 1d. NAPAS ANTAR PASANGAN JUDUL–KETERANGAN --- */
.b6+.sm,.b5+.sm,b+.sm,.b6+.muted,div>b+div.sm{margin-top:2px}
.cpad>.row+.row{margin-top:var(--s2)}
.listrow .grow>div+div{margin-top:2px}
.card .micro:first-child{margin-bottom:var(--s1)}
.empty p{margin-top:var(--s1)}

/* --- 1e. TARGET KLIK MINIMAL NYAMAN --- */
.main a,.rpanel a{padding:2px 0;display:inline-block;line-height:var(--lh-3)}
.main button:not(.chtab):not(.reactchip):not(.mc-d):not(.bar){min-height:26px}
.msgtools button,.pref button,.richbar button{min-height:26px}
.mc-d{min-height:26px;line-height:26px}
.navitem.on{
  background:var(--sel);color:var(--sel-text);font-weight:600;box-shadow:none;
  position:relative;
}
.navitem.on::before{
  content:"";position:absolute;left:-10px;top:7px;bottom:7px;width:3px;
  border-radius:0 3px 3px 0;background:var(--sel-bar);
}
.navitem.on .icon{color:var(--sel-bar)}
.navitem.on .bdg{background:var(--primary)}
.side.mini .navitem.on::before{left:-6px}
.tab.active,.btn-dark{background:var(--pill-bg);color:var(--pill-fg)}


/* --- 3. RITME & KEPADATAN --- */
.navitem,.subitem{height:var(--row-h)}
.btn{height:var(--ctl-h)}
.inp{height:var(--ctl-h)}
table.tbl td{padding:var(--pad-y) var(--pad-x)}
table.tbl th{padding:calc(var(--pad-y) - 1px) var(--pad-x)}
.listrow{padding:var(--pad-y) 18px}
.cpad{padding:var(--s4) 18px}
.chd{padding:var(--s3) 18px}
.pagebody{padding:var(--s4) var(--s5) 40px}
.pagehd{padding:var(--s3) var(--s5)}
.grid{gap:var(--s3)}
.split,.split3{gap:var(--s3)}

/* --- 4. PERMUKAAN LEBIH LEMBUT --- */
.card{border-color:var(--line);box-shadow:none}
.card:hover{box-shadow:var(--shadow-1)}
.kpi{box-shadow:none;transition:box-shadow .15s,transform .15s}
.kpi:hover{box-shadow:var(--shadow-1)}
.topbar,.subnav,.rpanel{background:var(--bg-card)}
  .side{background:var(--bg-rail)}
.main{background:var(--bg-body)}
.pagehd{background:var(--bg-card)}
table.tbl tbody tr:hover td{background:var(--fill-1)}
.tag{font-weight:600;font-size:var(--fs-2)}

/* --- 5. FOKUS & TARGET SENTUH --- */
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:4px}
.btn:focus-visible,.inp:focus{box-shadow:var(--focus)}
.btn-ico,.tb{min-width:32px;min-height:32px}

/* --- 6. TOMBOL PREFERENSI DI TOPBAR --- */
.pref{display:flex;align-items:center;gap:2px;background:var(--fill-1);border-radius:99px;padding:2px}
.pref button{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:var(--text-4)}
.pref button.on{background:var(--bg-card);color:var(--primary);box-shadow:var(--shadow-1)}

/* --- 7. NAV BAWAH UNTUK LAYAR KECIL --- */
.mobilebar{display:none}
.drawer-mask{display:none}

/* ============================================================
   RESPONSIF — 5 titik henti
   ============================================================ */

/* ≤1400px: panel kanan menyempit */
@media (max-width:1400px){
  .rpanel{width:280px!important}
  .grid.g5{grid-template-columns:repeat(4,1fr)}
}

/* ≤1240px: panel kanan disembunyikan, grid mengecil */
@media (max-width:1240px){
  .rpanel,#panelHost .resizer{display:none}
  .grid.g4{grid-template-columns:repeat(2,1fr)}
  .grid.g5{grid-template-columns:repeat(3,1fr)}
  .split{grid-template-columns:1fr}
  .brandbox{width:200px}
  .side{width:200px!important}
}

/* ≤1024px: sidebar jadi mode ikon, sub-nav menyempit */
@media (max-width:1024px){
  .side{width:60px!important}
  .side .side-search{margin:10px auto 6px;width:34px;padding:0;justify-content:center}
  .side .side-search input,.side .side-search span{display:none}
  .side .side-nav{padding:4px 8px 10px;display:flex;flex-direction:column;align-items:center}
  .side .navsec{justify-content:center;padding:12px 0 5px;font-size:0}
  .side .navsec button{display:none}
  .side .navitem{width:38px;height:var(--row-h);min-height:34px;justify-content:center;padding:0;gap:0}
  .side .navitem .nm,.side .navitem .lock{display:none}
  .side .navitem .bdg{position:absolute;top:0;right:0;min-width:15px;height:15px;line-height:15px;font-size:var(--fs-1);padding:0 3px;border:1.5px solid var(--bg-rail)}
  .side .usercard{background:transparent;padding:4px;justify-content:center}
  .side .usercard .uc,.side .usercard .icon{display:none}
  .brandbox{width:60px;padding:0 0 10px;justify-content:center}
  .brand-txt{display:none}
  .subnav{width:190px!important}
  .topsearch{width:150px}
  .grid.g3,.grid.g5{grid-template-columns:repeat(2,1fr)}
  .split3{grid-template-columns:1fr}
}

/* ≤820px: sub-nav jadi laci geser, tabel bisa digeser mendatar */
@media (max-width:820px){
  #subnavHost{
    position:fixed;left:60px;top:56px;bottom:0;z-index:600;
    transform:translateX(calc(-100% - 62px));   /* keluar penuh dari layar, tidak menutupi sidebar */
    visibility:hidden;pointer-events:none;transition:transform .22s,visibility .22s;
  }
  body.drawer #subnavHost{transform:translateX(0);visibility:visible;pointer-events:auto;box-shadow:var(--shadow-2)}
  .drawer-mask{position:fixed;inset:0;background:rgba(26,29,33,.4);z-index:590}
  body.drawer .drawer-mask{display:block}
  .btn-drawer{display:grid!important}
  .grid.g2,.grid.g3,.grid.g4,.grid.g5{grid-template-columns:1fr}
  .board{padding-bottom:var(--s4)}
  .bcol{width:250px}
  .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  table.tbl{min-width:640px}
}

/* ≤600px: tata letak ponsel — nav bawah, sidebar disembunyikan */
@media (max-width:600px){
  :root{--pad-x:11px;--s5:14px}
  .side,#rzSide{display:none}
  .brandbox{width:auto;padding:0 12px 10px}
  .brand-txt{display:flex}
  #subnavHost{left:0}
  .topsearch{display:none}
  .tabstrip{display:none}
  .topbar{height:52px;align-items:center}
  .topact{padding:0 8px}
  .pagehd{flex-direction:column;align-items:stretch;gap:var(--s2)}
  .pagehd .row{flex-wrap:wrap}
  .pagebody{padding:var(--s3) 14px 84px}
  .main{padding-bottom:0}
  .mobilebar{
    display:flex;position:fixed;left:0;right:0;bottom:0;height:60px;z-index:700;
    background:var(--bg-card);border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .mobilebar button{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    color:var(--text-4);font-size:var(--fs-1);line-height:var(--lh-1);font-weight:600;
  }
  .mobilebar button.on{color:var(--primary)}
  .mobilebar button{position:relative}
  .mobilebar .mplus{display:grid;place-items:center;width:24px;height:24px}
  .mobilebar .mpip{position:absolute;top:6px;right:calc(50% - 20px);min-width:16px;height:16px;
    padding:0 4px;border-radius:99px;background:var(--red);color:#fff;font-size:9px;font-weight:700;
    line-height:16px;text-align:center;border:1.5px solid var(--bg-card)}
  .kpi .kv{font-size:var(--fs-6);line-height:var(--lh-6)}
  .modal{width:100%;max-width:100%;border-radius:18px 18px 0 0;position:fixed;bottom:0;max-height:92vh}
  .mask{place-items:end center}
}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* Cetak: buang kromnya */
@media print{
  .topbar,.side,.subnav,.rpanel,.mobilebar,#panelHost,.resizer{display:none!important}
  .main{background:#fff}
  .card{break-inside:avoid;border-color:#ccc}
}

/* ============================================================
   PERBAIKAN & PEMULIHAN — ditempatkan terakhir agar pasti berlaku
   ============================================================ */

/* --- Lebar rail: satu sumber untuk sidebar dan brandbox --- */
.side{width:var(--rail-w)!important}
.brandbox{width:var(--rail-w)!important}
html.railmini{--rail-w:60px}
@media (max-width:1240px){:root{--rail-w:200px}}
@media (max-width:1024px){:root{--rail-w:60px}}

/* --- Pegangan geser yang terlihat --- */
.resizer{position:relative;z-index:30;width:9px;margin:0 -4.5px;overflow:hidden}
.resizer:after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:3px;height:36px;border-radius:99px;background:var(--line-rail);opacity:0;transition:opacity .16s}
.resizer:hover:after,.resizer.dragging:after{opacity:1;background:var(--primary)}
body.resizing{cursor:col-resize}
body.resizing *{user-select:none!important}

/* --- Tombol ciutkan --- */
.railtoggle{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;height:28px;
  border-radius:7px;font-size:11.5px;font-weight:600;color:var(--text-4);margin-bottom:5px}
.railtoggle:hover{background:rgba(255,255,255,.72);color:var(--text-2)}
[data-theme="dark"] .railtoggle:hover{background:rgba(255,255,255,.06)}
.railtoggle .icon{transition:transform .2s var(--ease-out)}
.side.mini .railtoggle span{display:none}
.side.mini .railtoggle .icon{transform:rotate(180deg)}

/* --- Kedalaman permukaan --- */
.side{background:var(--bg-rail);border-right:1px solid var(--line-rail)}
.brandbox{background:var(--bg-rail);border-right:1px solid var(--line-rail);margin-right:-1px}
.side-search{background:var(--bg-card);border:1px solid var(--line-rail)}
.side-search:focus-within{border-color:var(--primary);box-shadow:var(--focus)}
.side .navitem:hover{background:rgba(255,255,255,.72)}
.side-foot{border-top:1px solid var(--line-rail)}
.usercard{background:var(--bg-card);border:1px solid var(--line-rail)}
.usercard:hover{border-color:var(--primary-200)}
[data-theme="dark"] .side .navitem:hover{background:rgba(255,255,255,.06)}
[data-theme="dark"] .side-search,[data-theme="dark"] .usercard{background:var(--fill-1)}

/* --- Grup nav yang bisa dilipat --- */
.navsec{padding:15px 8px 4px}
.navsec .navsecbtn{display:flex;align-items:center;justify-content:flex-start;gap:6px;flex:1;min-width:0;
  width:auto;height:auto;text-align:left;font:inherit;color:inherit;letter-spacing:inherit;
  text-transform:inherit;padding:2px;border-radius:5px;place-items:unset}
.navsec .navsecbtn:hover{color:var(--text-2);background:var(--fill-1)}
.navsec .navsecbtn>span:first-of-type{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.navchev{transition:transform .2s var(--ease-out);flex:none;opacity:.65}
.navchev.cl{transform:rotate(-90deg)}
.navseccount{font-size:9px;font-weight:800;color:var(--text-5);background:rgba(0,0,0,.06);
  border-radius:99px;padding:1px 5px;flex:none;letter-spacing:0;opacity:0;transition:opacity .16s}
.navsec:hover .navseccount{opacity:1}
.navsecsum{font-size:9px;font-weight:800;color:#fff;background:var(--red);
  border-radius:99px;padding:1px 5px;flex:none;letter-spacing:0}
.navgrp{display:grid;grid-template-rows:1fr;transition:grid-template-rows .26s var(--ease-out),opacity .2s}
.navgrpin{min-height:0;overflow:hidden}
.navgrp.cl{grid-template-rows:0fr;opacity:0;pointer-events:none}
.side.mini .navsec .navsecbtn>span:first-of-type,.side.mini .navseccount{display:none}
.side.mini .navsec .navsecbtn{justify-content:center}
[data-theme="dark"] .navseccount{background:rgba(255,255,255,.09)}

/* --- Tab dalam layar HRIS --- */
.hrtabbar{flex:none;display:flex;padding:0 var(--s5);background:var(--bg-card);
  border-bottom:1px solid var(--line);overflow-x:auto}
.hrtabbar::-webkit-scrollbar{height:0}
.hrtabbar .hrtab{flex:none}

/* --- Bagan organisasi & pohon KPI --- */
.orgtree,.kpitree{display:flex;flex-direction:column;gap:7px}
.orgnode,.kpinode{position:relative}
.orgline,.kpinode .kpiline{position:absolute;left:-18px;top:-7px;bottom:50%;width:14px;
  border-left:1.5px solid var(--line);border-bottom:1.5px solid var(--line);border-bottom-left-radius:8px}
.orgbox,.kpinode>.row{border:1px solid var(--line);border-left:3px solid var(--c);border-radius:12px;
  padding:11px 13px;background:var(--bg-card);transition:.15s}
.orgbox:hover{border-color:var(--primary-200);box-shadow:var(--shadow-1)}
.orgdot,.kpidot{width:9px;height:9px;border-radius:50%;background:var(--c);flex:none}

/* --- Kalibrasi 9-box --- */
.ninebox{display:grid;grid-template-columns:130px repeat(3,1fr);gap:8px}
.nineboxlabel{display:flex;align-items:center;font-size:var(--fs-2);font-weight:700;color:var(--text-3)}
.ninecell{border-radius:12px;padding:18px;text-align:center;border:1px solid var(--line-soft)}
.ninecell b{display:block;font-family:var(--font-display);font-size:24px;line-height:30px;font-weight:800;letter-spacing:-.03em}
.ninecell span{font-size:var(--fs-2);color:var(--text-4)}
.ninefoot{text-align:center;font-size:var(--fs-2);font-weight:700;color:var(--text-3);padding-top:4px}

/* --- Survey 360 --- */
.s360note{display:flex;align-items:center;gap:9px;background:var(--teal-bg);color:var(--text-2);
  border-radius:12px;padding:11px 14px;font-size:var(--fs-3);line-height:var(--lh-3);margin-bottom:var(--s4)}
.s360grp{border:1px solid var(--line);border-radius:14px;padding:var(--s4);margin-bottom:var(--s3)}
.s360n{width:24px;height:24px;border-radius:8px;background:var(--violet);color:#fff;flex:none;
  display:grid;place-items:center;font-size:var(--fs-2);font-weight:800}
.s360q{display:flex;align-items:center;gap:var(--s4);padding:11px 0;border-bottom:1px solid var(--line-soft);
  font-size:var(--fs-3);line-height:var(--lh-3);flex-wrap:wrap}
.s360q:last-child{border-bottom:none}
.s360scale{display:flex;gap:6px;flex:none}
.s360dot{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);
  font-size:var(--fs-2);font-weight:700;color:var(--text-3);flex:none}
.s360dot:hover{border-color:var(--violet);color:var(--violet)}
.s360dot.on{background:var(--violet);border-color:var(--violet);color:#fff}
.s360res{padding:13px 0;border-bottom:1px solid var(--line-soft)}
.s360res:last-child{border-bottom:none}
.s360bar{display:flex;align-items:center;gap:10px;padding:3px 0}
.s360bar .lbl{width:96px;flex:none;font-size:var(--fs-2);color:var(--text-3)}

/* --- Animasi halaman depan --- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s var(--ease-out),transform .7s var(--ease-out)}
.reveal.in{opacity:1;transform:none}
@keyframes heroUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes floatCard{0%,100%{transform:var(--tf) translateY(0)}50%{transform:var(--tf) translateY(-9px)}}
@keyframes glowPulse{0%,100%{opacity:.85;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes livePulse{0%,100%{box-shadow:0 0 0 0 rgba(220,75,79,.55)}70%{box-shadow:0 0 0 10px rgba(220,75,79,0)}}
.lp-kicker{animation:heroUp .6s var(--ease-out) both}
.lp-hero h1{animation:heroUp .7s var(--ease-out) .08s both}
.lp-sub{animation:heroUp .7s var(--ease-out) .16s both}
.lp-stats{animation:heroUp .7s var(--ease-out) .32s both}
.lp-hero:before{animation:glowPulse 7s ease-in-out infinite}
.lp-collage{animation:heroUp .8s var(--ease-out) .3s both}
.lp-shot{animation:floatCard 7s ease-in-out infinite}
.lp-shot.s1{--tf:rotate(-3deg);animation-delay:0s}
.lp-shot.s2{--tf:rotate(2deg);animation-delay:.9s}
.lp-shot.s3{--tf:rotate(3deg);animation-delay:1.8s}
.lp-shot.s4{--tf:rotate(-2deg);animation-delay:2.7s}
.lp-live{animation:livePulse 2.4s ease-out infinite}
.lp-nav{transition:box-shadow .25s var(--ease),background .25s var(--ease)}
.lp-nav.scrolled{box-shadow:0 6px 24px rgba(0,0,0,.28)}
.lp-story:hover,.lp-ws:hover{transform:translateY(-4px)}
.lp-chip:hover{transform:translateY(-2px);border-color:var(--primary-200);color:var(--primary-active)}
.lp-faq button .icon{transition:transform .22s var(--ease-out)}
.lp-btn-up{position:fixed;right:22px;bottom:22px;width:44px;height:44px;border-radius:50%;
  background:var(--primary);color:#fff;display:none;place-items:center;z-index:120;
  box-shadow:0 8px 24px rgba(242,99,34,.4);transition:transform .18s var(--ease)}
.lp-btn-up.on{display:grid}
.lp-btn-up:hover{transform:translateY(-3px)}
.lp-mod,.lp-ws,.lp-step,.lp-story,.lp-topic,.lp-chip{transition:transform .2s var(--ease-out),
  background .18s var(--ease),border-color .18s var(--ease),box-shadow .2s var(--ease)}

@media (max-width:1024px){.ninebox{grid-template-columns:90px repeat(3,1fr)}}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .lp-shot,.lp-hero:before,.lp-live{animation:none}
}

/* --- Animasi masuk & umpan balik klik --- */
@keyframes riseIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes popIn{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@keyframes slideLeft{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes barGrow{from{width:0}}
@keyframes ripple{to{transform:scale(2.6);opacity:0}}
.anim .pagehd{animation:riseIn .34s var(--ease-out) both}
.anim .pagebody>*{animation:riseIn .4s var(--ease-out) both;animation-delay:.04s}
.anim .hhero{animation:popIn .42s var(--ease-out) both}
.anim .hurgent{animation:riseIn .4s var(--ease-out) .06s both}
.anim .hkpi,.anim .exkpi{animation:riseIn .42s var(--ease-out) both}
.anim .hkpi:nth-child(2),.anim .exkpi:nth-child(2){animation-delay:.07s}
.anim .hkpi:nth-child(3),.anim .exkpi:nth-child(3){animation-delay:.13s}
.anim .hkpi:nth-child(4),.anim .exkpi:nth-child(4){animation-delay:.19s}
.anim .hgrid>*{animation:riseIn .44s var(--ease-out) .24s both}
.anim .dpost{animation:riseIn .44s var(--ease-out) both}
.anim .dpost:nth-child(2){animation-delay:.06s}
.anim .dpost:nth-child(3){animation-delay:.12s}
.anim .card{animation:riseIn .42s var(--ease-out) both}
.anim .hrtabbar{animation:fadeIn .3s var(--ease-out) both}
.anim .hkpibar span,.anim .exbar span,.anim .hbar span{animation:barGrow .8s var(--ease-out) .25s both}
.navitem,.subitem,.btn,.btn-ico,.tab,.htab,.dtab,.hrtab,.aichip,.happ,.hq{
  transition:background .16s var(--ease),color .16s var(--ease),
             border-color .16s var(--ease),transform .16s var(--ease),box-shadow .18s var(--ease)}
.navitem:active,.subitem:active{transform:scale(.975)}
.btn:active,.btn-ico:active{transform:scale(.955)}
.happ:active,.hq:active,.excross:active{transform:scale(.985)}
.rippleable{position:relative;overflow:hidden}
.rip{position:absolute;border-radius:50%;pointer-events:none;transform:scale(0);
  background:currentColor;opacity:.16;animation:ripple .5s var(--ease-out) forwards}
.mask{animation:fadeIn .18s var(--ease-out) both}
.mask.show .modal{animation:popIn .26s var(--ease-out) both}
.pop.show{animation:popIn .16s var(--ease-out) both}
.msheet{animation:sheetUp .28s var(--ease-out) both}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.msheetmask{animation:fadeIn .2s var(--ease-out) both}
.msgrow{animation:riseIn .3s var(--ease-out) both}
.themeswap,.themeswap *{transition:background-color .28s var(--ease),color .28s var(--ease),
  border-color .28s var(--ease)!important}
@media (prefers-reduced-motion:reduce){
  .anim *,.rip,.msgrow,.mask,.pop,.msheet{animation:none!important}
  *{transition:none!important}
}

.pagehd h1,.pagehd p{overflow-wrap:anywhere}

/* --- Rapikan brandbox saat rail diciutkan --- */
html.railmini .brand-txt{display:none}
html.railmini .brandbox{justify-content:center;padding:0 0 10px}
@media (max-width:1024px){.brand-txt{display:none}.brandbox{justify-content:center;padding:0 0 10px}}