/* =====================================================================
   SERTIPEDIA DESIGN SYSTEM  v2.0
   Identitas: navy + tembaga (diturunkan dari logo), motif heksagon
   Tipografi: Bricolage Grotesque (display) + Plus Jakarta Sans (UI)
   Pendekatan: mobile-first, WCAG AA, target sentuh >= 44px
   ===================================================================== */

/* ---------- 1. TOKEN ---------- */
:root{
  /* ----------------------------------------------------------------
     Warna inti diturunkan langsung dari berkas logo Sertipedia.
     Pengambilan sampel piksel logo menghasilkan tiga warna utama:
     teal #3E6068, copper terang #B97749, dan copper gelap #874329.
     Skala di bawah dibangun dari hue teal tersebut dengan saturasi
     dinaikkan agar karakter hijau terbaca jelas, bukan abu kebiruan.
     Nama variabel navy dan steel dipertahankan supaya seluruh berkas
     yang sudah memakainya tetap berjalan. Alias teal dan sage
     disediakan untuk penulisan kode baru.
     ---------------------------------------------------------------- */
  --navy-950:#0B1C1E; --navy-900:#132C2F; --navy-800:#1C3C3F; --navy-700:#2A5055; --navy-600:#3B676D;
  --steel-700:#2A5055; --steel-600:#3B676D; --steel-500:#4E8088; --steel-200:#B7D2D7; --steel-100:#DDECEE; --steel-50:#EDF6F7;
  --copper-700:#874329; --copper-600:#A15636; --copper-500:#B97749; --copper-400:#CD9870; --copper-100:#F5E9E0; --copper-50:#FAF4F0;
  /* alias bernama benar untuk kode baru */
  --teal-950:#0B1C1E; --teal-900:#132C2F; --teal-800:#1C3C3F; --teal-700:#2A5055; --teal-600:#3B676D;
  --teal-500:#4E8088; --teal-400:#6EA2AA; --teal-200:#B7D2D7; --teal-100:#DDECEE; --teal-50:#EDF6F7;
  --bg:#F1F6F6; --surface:#FFFFFF; --surface-2:#F7FBFB;
  --ink:#14282B; --ink-2:#2E4448; --muted:#54696C; --faint:#788E92;
  --border:#DEE9EA; --border-2:#C6D9DB;
  --green-700:#146046; --green-600:#1C8460; --green-100:#DCF2E8;
  --amber-700:#7A5310; --amber-600:#9A6A14; --amber-100:#FAEFD8;
  --red-700:#8E2E22; --red-600:#B23B2E; --red-100:#F9E5E2;
  --blue-700:#23566B; --blue-600:#2A6982; --blue-100:#DFEEF3;
  --wa:#1FAF5E;
  /* tipografi */
  --font-display:'Bricolage Grotesque','Plus Jakarta Sans',system-ui,sans-serif;
  --font-body:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* radius dan bayangan */
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-full:999px;
  --sh-sm:0 1px 2px rgba(11,28,30,.06),0 1px 6px rgba(11,28,30,.05);
  --sh-md:0 6px 18px rgba(11,28,30,.08),0 2px 6px rgba(11,28,30,.05);
  --sh-lg:0 20px 45px rgba(11,28,30,.14),0 6px 16px rgba(11,28,30,.06);
  --sh-copper:0 10px 26px rgba(161,86,54,.28);
  /* gerak */
  --ease:cubic-bezier(.22,.8,.36,1);
  --t-fast:.16s; --t-med:.26s;
  /* layout */
  --nav-h:60px; --bottomnav-h:62px; --maxw:1200px;
}

/* ---------- 2. RESET & DASAR ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{
  margin:0;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ink);
  background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden;
  padding-bottom:calc(var(--bottomnav-h) + env(safe-area-inset-bottom,0px));
}
body.no-bottomnav{padding-bottom:0}
img{max-width:100%;display:block}
a{color:var(--copper-600);text-decoration:none}
a:hover{color:var(--copper-700)}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px}
h1,h2,h3,h4{line-height:1.25;color:var(--ink);margin:0 0 .5em;font-weight:800}
h1,h2{font-family:var(--font-display);letter-spacing:-.01em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--copper-400);outline-offset:2px;border-radius:4px}
::selection{background:var(--copper-100);color:var(--copper-700)}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--navy-900);color:#fff;padding:10px 18px;border-radius:0 0 10px 0;z-index:3000;font-weight:700}
.skip-link:focus{left:0}
[hidden]{display:none!important}

/* ---------- 3. UTILITAS ---------- */
.container{max-width:var(--maxw);margin-inline:auto;padding-inline:16px}
.section{padding-block:clamp(44px,7vw,76px)}
.section-tight{padding-block:clamp(28px,4.5vw,48px)}
.section-alt{background:var(--surface)}
.section-head{margin-bottom:clamp(20px,3.5vw,34px);display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-600);margin-bottom:8px}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--copper-600);border-radius:2px}
.section-title{font-size:clamp(22px,3.4vw,30px);margin:0}
.section-sub{color:var(--muted);font-size:15px;max-width:640px;margin:6px 0 0}
.link-more{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;white-space:nowrap;min-height:44px}
.muted{color:var(--muted)}.small{font-size:13px}.tnum{font-variant-numeric:tabular-nums}
.text-center{text-align:center}
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr}.grid-4{grid-template-columns:1fr 1fr}
.flex{display:flex;gap:10px;align-items:center}.between{justify-content:space-between}.wrap{flex-wrap:wrap}
.divider{border:0;border-top:1px solid var(--border);margin:20px 0}
.hide-mobile{display:none!important}

/* ---------- 4. IKON ---------- */
.ic,.ic-sm,.ic-lg,.ic-star{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic{width:20px;height:20px}.ic-sm{width:16px;height:16px}.ic-lg{width:26px;height:26px}.ic-star{width:15px;height:15px}

/* ---------- 5. TOMBOL ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:10px 22px;border-radius:var(--r-md);border:1px solid transparent;
  font-weight:700;font-size:14.5px;line-height:1.2;text-decoration:none;cursor:pointer;
  transition:transform var(--t-fast) var(--ease),box-shadow var(--t-fast) var(--ease),background var(--t-fast),color var(--t-fast),border-color var(--t-fast);
  touch-action:manipulation;user-select:none;
}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--copper-600);color:#fff;box-shadow:var(--sh-copper)}
.btn-primary:hover{background:var(--copper-700);color:#fff;transform:translateY(-1px)}
.btn-navy{background:var(--navy-800);color:#fff}
.btn-navy:hover{background:var(--navy-700);color:#fff}
.btn-outline{background:var(--surface);border-color:var(--border-2);color:var(--ink)}
.btn-outline:hover{border-color:var(--navy-700);color:var(--navy-800)}
.btn-ghost{background:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--steel-50);color:var(--ink)}
.btn-light{background:#fff;color:var(--navy-800)}
.btn-light:hover{background:var(--steel-50)}
.btn-danger{background:var(--red-600);color:#fff}.btn-danger:hover{background:var(--red-700);color:#fff}
.btn-wa{background:var(--wa);color:#fff}.btn-wa:hover{background:#178A4A;color:#fff}
.btn-sm{min-height:38px;padding:7px 14px;font-size:13px;border-radius:10px}
.btn-lg{min-height:52px;padding:13px 30px;font-size:15.5px}
.btn-block{width:100%}
.btn-icon{width:44px;min-height:44px;padding:0;border-radius:var(--r-md)}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}
.btn.is-loading::after{content:"";width:16px;height:16px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(1turn)}}

/* ---------- 6. BADGE / CHIP / BINTANG ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-full);font-size:11.5px;font-weight:800;letter-spacing:.02em;white-space:nowrap}
.badge-navy{background:var(--navy-800);color:#fff}
.badge-steel{background:var(--steel-100);color:var(--steel-700)}
.badge-copper{background:var(--copper-100);color:var(--copper-700)}
.badge-green{background:var(--green-100);color:var(--green-700)}
.badge-amber{background:var(--amber-100);color:var(--amber-700)}
.badge-red{background:var(--red-100);color:var(--red-700)}
.badge-blue{background:var(--blue-100);color:var(--blue-700)}
.badge-line{background:#fff;border:1px solid var(--border-2);color:var(--ink-2)}
.chip{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:7px 16px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--border-2);font-size:13.5px;font-weight:600;color:var(--ink-2);transition:all var(--t-fast)}
.chip:hover{border-color:var(--copper-500);color:var(--copper-700)}
.chip.is-active{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
.chip-row{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.chip-row::-webkit-scrollbar{display:none}
.stars{display:inline-flex;gap:1px;color:#E4B33D}
.star-empty .ic-star{stroke:var(--steel-200)}
.star-full .ic-star,.star-half .ic-star{fill:#E4B33D;stroke:#E4B33D}
.star-half .ic-star{fill:url(#half) #E4B33D}

/* ---------- 7. FORMULIR ---------- */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:700;color:var(--ink-2);margin-bottom:7px}
.form-label .req{color:var(--red-600)}
.form-input,.form-select,.form-textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border-2);border-radius:var(--r-md);
  background:var(--surface);color:var(--ink);min-height:48px;transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.form-textarea{min-height:110px;resize:vertical;line-height:1.55}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--copper-500);box-shadow:0 0 0 4px var(--copper-100)}
.form-input::placeholder,.form-textarea::placeholder{color:var(--faint)}
.form-hint{font-size:12.5px;color:var(--muted);margin-top:6px}
.form-error{font-size:12.5px;color:var(--red-600);margin-top:6px;display:flex;gap:5px;align-items:center}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235C6B78' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
.input-icon{position:relative}
.input-icon>.ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--faint);pointer-events:none}
.input-icon .form-input,.input-icon .form-select{padding-left:44px}
.input-action{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;color:var(--faint);width:40px;height:40px;display:grid;place-items:center;border-radius:10px}
.input-action:hover{color:var(--ink);background:var(--steel-50)}
.checkline{display:flex;align-items:center;gap:10px;padding:11px 13px;border:1.5px solid var(--border-2);border-radius:var(--r-md);cursor:pointer;font-size:14px;font-weight:600;min-height:46px;transition:all var(--t-fast);background:var(--surface)}
.checkline:hover{border-color:var(--copper-500)}
.checkline input{width:18px;height:18px;accent-color:var(--copper-600);flex:none}
.checkline:has(input:checked){border-color:var(--copper-600);background:var(--copper-50);color:var(--copper-700)}
.form-grid{display:grid;gap:0 16px;grid-template-columns:1fr}

/* ---------- 8. KARTU DASAR ---------- */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm)}
.card-pad{padding:clamp(18px,3vw,26px)}
.card-hover{transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-med)}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--steel-200)}

/* ---------- 9. HEKSAGON (motif brand) ---------- */
.hex{clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%)}
.hex-avatar{width:46px;height:50px;display:grid;place-items:center;background:var(--steel-100);color:var(--steel-700);font-weight:800;font-size:17px;flex:none;overflow:hidden}
.hex-avatar img{width:100%;height:100%;object-fit:cover}
.hex-avatar.hex-navy{background:var(--navy-800);color:#fff}
.hex-avatar.hex-copper{background:var(--copper-100);color:var(--copper-700)}
.hex-tile{width:52px;height:56px;display:grid;place-items:center;flex:none}
.seal{display:inline-flex;align-items:center;gap:4px;color:var(--green-600);font-size:12px;font-weight:800}
.seal .ic-sm{stroke-width:2.2}

/* ---------- 10. NAVBAR PUBLIK ---------- */
.navbar{position:sticky;top:0;z-index:900;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.navbar-in{max-width:var(--maxw);margin-inline:auto;padding-inline:12px;height:var(--nav-h);display:flex;align-items:center;gap:8px}
.nav-burger{display:grid;place-items:center;width:44px;height:44px;border:0;background:none;border-radius:12px;color:var(--ink)}
.nav-burger:hover{background:var(--steel-50)}
.brand{display:flex;align-items:center;min-height:44px;padding:4px 6px;border-radius:10px}
.brand img{height:34px;width:auto}
.nav-links{display:none;align-items:center;gap:2px;margin-left:14px}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:10px 13px;min-height:44px;border-radius:10px;color:var(--ink-2);font-weight:700;font-size:14px;position:relative}
.nav-link:hover{background:var(--steel-50);color:var(--ink)}
.nav-link.is-active{color:var(--copper-700)}
.nav-link.is-active::after{content:"";position:absolute;left:13px;right:13px;bottom:4px;height:2.5px;border-radius:3px;background:var(--copper-600)}
.nav-spacer{flex:1}
.nav-cta{display:none;gap:8px;align-items:center}
.nav-cta-mobile{display:flex;gap:6px;align-items:center}
.dropdown{position:relative}
.dropdown-menu{position:absolute;top:calc(100% + 8px);left:0;min-width:230px;background:#fff;border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-lg);padding:8px;opacity:0;visibility:hidden;transform:translateY(6px);transition:all var(--t-fast) var(--ease);z-index:950}
.dropdown-menu.align-right{left:auto;right:0}
.dropdown.is-open .dropdown-menu{opacity:1;visibility:visible;transform:translateY(0)}
.dropdown-item{display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;color:var(--ink-2);font-weight:600;font-size:14px;min-height:44px}
.dropdown-item:hover{background:var(--steel-50);color:var(--ink)}
.dropdown-item .ic{color:var(--steel-600)}
.dropdown-sep{border-top:1px solid var(--border);margin:6px 4px}
.avatar-btn{display:flex;align-items:center;gap:9px;border:1px solid var(--border-2);background:#fff;border-radius:var(--r-full);padding:4px 12px 4px 4px;min-height:46px}
.avatar-btn:hover{border-color:var(--steel-500)}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--navy-800);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar-meta{text-align:left;line-height:1.15;display:none}
.avatar-meta b{font-size:13px;display:block;max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.avatar-meta span{font-size:10.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-weight:700}

/* drawer mobile */
.drawer-backdrop{position:fixed;inset:0;background:rgba(11,28,30,.55);backdrop-filter:blur(2px);z-index:1000;opacity:0;visibility:hidden;transition:all var(--t-med)}
.drawer{position:fixed;top:0;bottom:0;left:0;width:min(320px,86vw);background:#fff;z-index:1001;transform:translateX(-102%);transition:transform var(--t-med) var(--ease);display:flex;flex-direction:column;box-shadow:var(--sh-lg)}
.drawer.is-open{transform:translateX(0)}
.drawer-backdrop.is-open{opacity:1;visibility:visible}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)}
.drawer-head img{height:30px}
.drawer-body{flex:1;overflow-y:auto;padding:12px}
.drawer-link{display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;color:var(--ink-2);font-weight:700;font-size:15px;min-height:48px}
.drawer-link:hover{background:var(--steel-50)}
.drawer-link.is-active{background:var(--copper-50);color:var(--copper-700)}
.drawer-link .ic{color:var(--steel-600)}
.drawer-link.is-active .ic{color:var(--copper-600)}
.drawer-label{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 14px 6px}
.drawer-foot{padding:14px 16px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);display:grid;gap:8px}

/* bottom nav mobile */
.bottomnav{position:fixed;left:0;right:0;bottom:0;z-index:900;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-top:1px solid var(--border);display:grid;grid-template-columns:repeat(5,1fr);height:calc(var(--bottomnav-h) + env(safe-area-inset-bottom,0px));padding-bottom:env(safe-area-inset-bottom,0px)}
.bn-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--muted);font-size:10.5px;font-weight:700;text-decoration:none;min-height:44px}
.bn-item .ic{width:22px;height:22px}
.bn-item.is-active{color:var(--copper-700)}
.bn-hex{transform:translateY(-14px)}
.bn-hex .bn-hexbtn{width:52px;height:56px;display:grid;place-items:center;background:linear-gradient(150deg,var(--copper-500),var(--copper-700));color:#fff;box-shadow:var(--sh-copper)}
.bn-hex span{color:var(--copper-700)}

/* ---------- 11. HERO ---------- */
.hero{position:relative;background:linear-gradient(160deg,var(--navy-950) 0%,var(--navy-800) 62%,#25494E 100%);color:#fff;overflow:hidden;padding:clamp(48px,8vw,92px) 0 clamp(86px,11vw,120px)}
.hero-hexgrid{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='128' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23FFFFFF' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");background-size:112px 128px;pointer-events:none}
.hero-glow{position:absolute;width:520px;height:520px;border-radius:50%;filter:blur(90px);pointer-events:none}
.hero-glow.g1{background:rgba(185,106,71,.32);top:-180px;right:-140px}
.hero-glow.g2{background:rgba(82,118,137,.35);bottom:-220px;left:-160px}
.hero-in{position:relative;z-index:2;max-width:840px;margin-inline:auto;padding-inline:16px;text-align:center}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#F3D9C9;border-radius:var(--r-full);padding:7px 16px;font-size:12.5px;font-weight:700;letter-spacing:.04em;margin-bottom:18px}
.hero h1{color:#fff;font-size:clamp(30px,6vw,50px);font-weight:800;margin:0 0 14px;letter-spacing:-.02em}
.hero h1 .accent{color:var(--copper-400)}
.hero-sub{color:#B7D2D7;font-size:clamp(14.5px,2vw,17px);max-width:600px;margin:0 auto 0;line-height:1.65}
.hero-line{display:block}

/* panel pencarian mengambang */
.search-wrap{position:relative;z-index:5;max-width:900px;margin:-64px auto 0;padding-inline:16px}
.search-panel{background:#fff;border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:14px;border:1px solid var(--border)}
.search-form{display:grid;gap:10px;grid-template-columns:1fr}
.search-panel .btn{min-height:50px}
.search-quick{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.search-quick-label{font-size:12px;font-weight:700;color:var(--faint);text-transform:uppercase;letter-spacing:.08em}
.search-quick .chip{min-height:34px;padding:5px 13px;font-size:12.5px}
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:760px;margin:26px auto 0;position:relative;z-index:2;padding-inline:16px}
.trust-item{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-lg);padding:14px 10px;text-align:center;backdrop-filter:blur(4px)}
.trust-num{font-family:var(--font-display);font-size:clamp(20px,3.4vw,28px);font-weight:800;color:#fff;line-height:1.1}
.trust-label{font-size:11.5px;color:#B7D2D7;font-weight:600;margin-top:3px}

/* ---------- 12. KARTU PRODUK ---------- */
.produk-grid{display:grid;gap:18px;grid-template-columns:1fr}
.pcard{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med),border-color var(--t-med)}
.pcard:hover{transform:translateY(-5px);box-shadow:var(--sh-md);border-color:var(--steel-200)}
.pcard-media{position:relative;aspect-ratio:16/8.2;background:linear-gradient(150deg,var(--navy-800),var(--steel-600));overflow:hidden}
.pcard-media img{width:100%;height:100%;object-fit:cover}
.pcard-media .media-hex{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23FFFFFF' stroke-opacity='.1' stroke-width='1.4'/%3E%3C/svg%3E");background-size:84px 96px}
.pcard-media .media-title{position:absolute;inset:auto 14px 12px 14px;color:#fff;font-family:var(--font-display);font-weight:800;font-size:15px;line-height:1.3;text-shadow:0 2px 8px rgba(11,28,30,.4);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pcard-flag{position:absolute;top:10px;left:10px;display:flex;gap:6px}
.pcard-jenis{position:absolute;top:10px;right:10px}
.flag-fix{background:var(--green-600);color:#fff;display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-full);font-size:10.5px;font-weight:800;letter-spacing:.03em}
.flag-fix .dot{width:6px;height:6px;border-radius:50%;background:#fff;animation:pulse 1.8s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.pcard-body{padding:15px 16px 13px;display:flex;flex-direction:column;gap:9px;flex:1}
.pcard-lsp{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);font-weight:600}
.pcard-lsp .hex-avatar{width:26px;height:29px;font-size:11px}
.pcard-lsp b{color:var(--ink-2);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-title{font-size:16px;font-weight:800;line-height:1.35;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.7em}
.pcard-title a{color:var(--ink)}
.pcard-title a:hover{color:var(--copper-700)}
.pcard-title a::after{content:"";position:absolute;inset:0}
.pcard-meta{display:flex;flex-direction:column;gap:5px;font-size:12.5px;color:var(--muted)}
.pcard-meta .meta{display:flex;align-items:center;gap:7px;min-width:0}
.pcard-meta .meta span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pcard-meta .ic-sm{color:var(--steel-600)}
.pcard-foot{margin-top:auto;padding:12px 16px;border-top:1px dashed var(--border-2);display:flex;align-items:center;justify-content:space-between;gap:10px;background:var(--surface-2)}
.pcard-price{line-height:1.1}
.pcard-price .label{font-size:10.5px;color:var(--faint);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.pcard-price .val{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--copper-700);font-variant-numeric:tabular-nums}
.pcard .btn{position:relative;z-index:2}
.pcard-compare{position:absolute;z-index:3;top:10px;right:10px}

/* ---------- 13. KARTU LAIN ---------- */
.acard{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med)}
.acard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.acard-img{aspect-ratio:16/9;object-fit:cover;width:100%}
.acard-body{padding:16px 18px 18px}
.acard-tag{font-size:11px;font-weight:800;color:var(--copper-600);text-transform:uppercase;letter-spacing:.08em}
.acard-title{font-size:15.5px;font-weight:800;color:var(--ink);margin:7px 0 8px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard-meta{font-size:12px;color:var(--faint);display:flex;gap:12px;align-items:center}

.mcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:12px;transition:transform var(--t-med) var(--ease),box-shadow var(--t-med)}
.mcard:hover{transform:translateY(-4px);box-shadow:var(--sh-md)}
.mcard-head{display:flex;gap:12px;align-items:center}
.mcard-name{font-weight:800;font-size:16px;line-height:1.3;margin:0}
.mcard-loc{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:5px;margin-top:3px}
.mcard-desc{font-size:13.5px;color:var(--muted);line-height:1.6;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;margin:0}
.mcard-stats{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink-2);font-weight:600}
.mcard-stats .ic-sm{color:var(--steel-600)}
.mcard-foot{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}

.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:18px;display:flex;gap:14px;align-items:center}
.stat-ic{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;flex:none}
.stat-ic.tone-copper{background:var(--copper-100);color:var(--copper-700)}
.stat-ic.tone-navy{background:var(--steel-100);color:var(--navy-700)}
.stat-ic.tone-green{background:var(--green-100);color:var(--green-700)}
.stat-ic.tone-amber{background:var(--amber-100);color:var(--amber-700)}
.stat-val{font-family:var(--font-display);font-size:24px;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.stat-label{font-size:12.5px;color:var(--muted);font-weight:600}

/* langkah / value props */
.value-grid{display:grid;gap:16px;grid-template-columns:1fr}
.vcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:22px;position:relative;overflow:hidden}
.vcard .hex-tile{background:var(--copper-100);color:var(--copper-700);margin-bottom:14px}
.vcard h3{font-size:16px;margin:0 0 7px}
.vcard p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.65}

/* testimoni */
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:20px;display:flex;flex-direction:column;gap:12px}
.tcard-msg{font-size:14px;color:var(--ink-2);line-height:1.7;margin:0}
.tcard-person{display:flex;gap:11px;align-items:center}
.tcard-person img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.tcard-person b{font-size:14px;display:block}
.tcard-person span{font-size:12px;color:var(--muted)}

/* ---------- 14. MODAL & BOTTOM SHEET ---------- */
.sheet-backdrop{position:fixed;inset:0;background:rgba(11,28,30,.55);backdrop-filter:blur(2px);z-index:1100;opacity:0;visibility:hidden;transition:all var(--t-med)}
.sheet-backdrop.is-open{opacity:1;visibility:visible}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:1101;background:#fff;border-radius:22px 22px 0 0;max-height:88dvh;display:flex;flex-direction:column;transform:translateY(103%);transition:transform var(--t-med) var(--ease);box-shadow:var(--sh-lg)}
.sheet.is-open{transform:translateY(0)}
.sheet-handle{width:44px;height:5px;border-radius:3px;background:var(--border-2);margin:10px auto 0}
.sheet-head{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;border-bottom:1px solid var(--border)}
.sheet-title{font-weight:800;font-size:16.5px}
.sheet-body{padding:18px 20px;overflow-y:auto;-webkit-overflow-scrolling:touch}
.sheet-foot{padding:14px 20px calc(14px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--border);display:flex;gap:10px}
.sheet-foot .btn{flex:1}

/* ---------- 15. TOAST ---------- */
.toast-stack{position:fixed;top:calc(var(--nav-h) + 10px);left:50%;transform:translateX(-50%);z-index:2000;display:flex;flex-direction:column;gap:8px;width:min(480px,calc(100vw - 28px))}
.toast{display:flex;align-items:center;gap:10px;background:var(--navy-900);color:#fff;padding:13px 14px;border-radius:14px;box-shadow:var(--sh-lg);font-size:14px;font-weight:600;animation:toastIn .35s var(--ease)}
.toast .ic{flex:none}
.toast span{flex:1}
.toast-success .ic{color:#5ED6A2}.toast-error .ic{color:#F1907F}.toast-info .ic{color:#8FC1E3}.toast-warning .ic{color:#EFC46B}
.toast-x{background:none;border:0;color:rgba(255,255,255,.65);width:34px;height:34px;display:grid;place-items:center;border-radius:8px;flex:none}
.toast-x:hover{color:#fff;background:rgba(255,255,255,.12)}
@keyframes toastIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}
.toast.is-out{opacity:0;transform:translateY(-8px);transition:all .3s}

/* ---------- 16. TABEL ---------- */
.table-wrap{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px}
.table th{background:var(--surface-2);text-align:left;padding:12px 16px;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:800;border-bottom:1px solid var(--border);white-space:nowrap}
.table td{padding:13px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--steel-50)}
.table .cell-main{font-weight:700;color:var(--ink)}
.table .cell-sub{font-size:12px;color:var(--muted)}
.table-actions{display:flex;gap:6px;justify-content:flex-end}

/* ---------- 17. SHELL DASHBOARD ---------- */
.dash{display:grid;grid-template-columns:1fr;min-height:100dvh}
.dash-side{display:none}
.dash-main{display:flex;flex-direction:column;min-width:0}
.dash-topbar{position:sticky;top:0;z-index:800;background:rgba(255,255,255,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);height:var(--nav-h);display:flex;align-items:center;gap:10px;padding-inline:14px}
.dash-topbar h1{font-size:17px;margin:0;font-family:var(--font-body);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dash-content{padding:clamp(16px,3vw,30px);max-width:1160px;width:100%;margin-inline:auto}
.side-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.side-brand .brand-chip{background:#fff;border-radius:12px;padding:7px 10px;display:flex;align-items:center}
.side-brand img{height:26px}
.side-menu{padding:8px 12px;display:flex;flex-direction:column;gap:2px;flex:1;overflow-y:auto}
.side-label{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5E7385;padding:16px 12px 6px}
.side-link{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;color:#B7D2D7;font-weight:600;font-size:14px;min-height:44px;position:relative}
.side-link:hover{background:rgba(255,255,255,.06);color:#fff}
.side-link.is-active{background:rgba(185,106,71,.16);color:#F0C9B2}
.side-link.is-active::before{content:"";position:absolute;left:0;top:9px;bottom:9px;width:3px;border-radius:0 3px 3px 0;background:var(--copper-500)}
.side-foot{padding:12px;border-top:1px solid rgba(255,255,255,.08)}
.dash-hello{margin-bottom:22px}
.dash-hello h2{font-size:clamp(19px,3vw,24px);margin:0 0 4px}
.dash-hello p{color:var(--muted);font-size:14px;margin:0}
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);margin-bottom:22px}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--border);flex-wrap:wrap}
.panel-title{font-size:15.5px;font-weight:800;margin:0;display:flex;align-items:center;gap:9px}
.panel-title .ic{color:var(--steel-600)}
.panel-body{padding:20px}
.panel-body.flush{padding:0}

/* ---------- 18. KOMPONEN KHUSUS ---------- */
.empty{padding:44px 22px;text-align:center}
.empty .hex-tile{margin:0 auto 14px;background:var(--steel-100);color:var(--steel-600)}
.empty h3{font-size:16px;margin:0 0 6px}
.empty p{color:var(--muted);font-size:13.5px;margin:0 auto 16px;max-width:380px}

.steps{display:flex;gap:0;margin-bottom:26px;counter-reset:step}
.step{flex:1;text-align:center;position:relative;font-size:11.5px;font-weight:700;color:var(--faint);padding-top:34px}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:0;left:50%;transform:translateX(-50%);width:28px;height:28px;border-radius:50%;background:var(--steel-100);color:var(--steel-600);display:grid;place-items:center;font-size:12.5px;font-weight:800;z-index:2}
.step::after{content:"";position:absolute;top:14px;left:calc(-50% + 14px);right:calc(50% + 14px);height:2px;background:var(--border-2)}
.step:first-child::after{display:none}
.step.is-done{color:var(--green-700)}
.step.is-done::before{background:var(--green-600);color:#fff}
.step.is-active{color:var(--copper-700)}
.step.is-active::before{background:var(--copper-600);color:#fff}

.timeline{position:relative;padding-left:34px}
.timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:var(--border-2)}
.tl-item{position:relative;padding-bottom:26px}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-34px;top:2px;width:24px;height:26px;display:grid;place-items:center;background:var(--copper-600);color:#fff;font-size:11px;font-weight:800}
.tl-item h3{font-size:15.5px;margin:0 0 5px}
.tl-item p{font-size:13.5px;color:var(--muted);margin:0}

.alert{display:flex;gap:11px;padding:14px 16px;border-radius:var(--r-md);font-size:13.5px;line-height:1.55;align-items:flex-start;margin-bottom:18px}
.alert .ic{flex:none;margin-top:1px}
.alert-info{background:var(--blue-100);color:var(--blue-700)}
.alert-warning{background:var(--amber-100);color:var(--amber-700)}
.alert-success{background:var(--green-100);color:var(--green-700)}
.alert-error{background:var(--red-100);color:var(--red-700)}

.faq-item{border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);margin-bottom:10px;overflow:hidden}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;background:none;border:0;padding:16px 18px;font-size:14.5px;font-weight:700;color:var(--ink);text-align:left;min-height:52px}
.faq-q .ic{transition:transform var(--t-fast);color:var(--steel-600)}
.faq-item.is-open .faq-q .ic{transform:rotate(180deg)}
.faq-a{display:none;padding:0 18px 16px;color:var(--muted);font-size:13.5px;line-height:1.7}
.faq-item.is-open .faq-a{display:block}

.price-tag{font-family:var(--font-display);font-weight:800;color:var(--copper-700);font-variant-numeric:tabular-nums}

/* banding */
.compare-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface)}
.compare-table{border-collapse:collapse;width:100%;min-width:680px;font-size:13.5px}
.compare-table th,.compare-table td{padding:13px 16px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.compare-table thead th{background:var(--surface-2);position:sticky;top:0}
.compare-table th:first-child,.compare-table td:first-child{position:sticky;left:0;background:var(--surface-2);font-weight:800;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);min-width:130px;z-index:2;border-right:1px solid var(--border)}
.compare-table tbody tr:last-child td{border-bottom:0}

/* ---------- 19. FOOTER ---------- */
.footer{background:var(--navy-950);color:#9FB0BD;margin-top:clamp(44px,7vw,72px);position:relative;overflow:hidden}
.footer-hex{position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='128' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23FFFFFF' stroke-opacity='.045' stroke-width='1'/%3E%3C/svg%3E");background-size:112px 128px;pointer-events:none}
.footer-in{position:relative;max-width:var(--maxw);margin-inline:auto;padding:clamp(40px,6vw,60px) 16px 26px}
.footer-grid{display:grid;gap:30px;grid-template-columns:1fr}
.footer-brand .brand-chip{display:inline-flex;background:#fff;border-radius:12px;padding:8px 12px;margin-bottom:14px}
.footer-brand img{height:28px}
.footer-brand p{font-size:13.5px;line-height:1.7;max-width:320px;margin:0}
.footer h4{color:#fff;font-size:13px;text-transform:uppercase;letter-spacing:.1em;margin:0 0 14px;font-family:var(--font-body)}
.footer-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.footer-links a{color:#9FB0BD;font-size:13.5px;display:inline-flex;min-height:36px;align-items:center}
.footer-links a:hover{color:#F0C9B2}
.footer-contact{display:flex;flex-direction:column;gap:10px;font-size:13.5px}
.footer-contact a{color:#9FB0BD;display:flex;gap:9px;align-items:center;min-height:36px}
.footer-contact a:hover{color:#F0C9B2}
.footer-bottom{border-top:1px solid rgba(255,255,255,.09);margin-top:34px;padding-top:20px;display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:#6E8090}

/* WA mengambang */
.wa-float{position:fixed;right:14px;bottom:calc(var(--bottomnav-h) + 14px + env(safe-area-inset-bottom,0px));z-index:850;display:flex;align-items:center;gap:8px;background:var(--wa);color:#fff;border-radius:var(--r-full);padding:12px 18px 12px 14px;font-weight:800;font-size:13.5px;box-shadow:0 12px 28px rgba(31,175,94,.4);transition:transform var(--t-fast)}
.wa-float:hover{transform:translateY(-2px);color:#fff}
body.no-bottomnav .wa-float{bottom:18px}

/* ---------- 20. ANIMASI REVEAL ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s var(--ease),transform .55s var(--ease)}
.reveal.in-view{opacity:1;transform:none}
.reveal-d1{transition-delay:.06s}.reveal-d2{transition-delay:.12s}.reveal-d3{transition-delay:.18s}

/* ---------- 21. AUTH LAYOUT ---------- */
.auth-wrap{min-height:100dvh;display:grid;grid-template-columns:1fr;background:var(--bg)}
.auth-visual{display:none;position:relative;background:linear-gradient(160deg,var(--navy-950),var(--navy-800) 60%,#25494E);color:#fff;padding:52px;overflow:hidden}
.auth-visual .hero-hexgrid{opacity:1}
.auth-visual-in{position:relative;z-index:2;display:flex;flex-direction:column;height:100%}
.auth-visual h2{color:#fff;font-size:30px;line-height:1.3;margin:auto 0 18px;max-width:400px}
.auth-visual h2 .accent{color:var(--copper-400)}
.auth-points{list-style:none;padding:0;margin:0 0 auto;display:flex;flex-direction:column;gap:12px}
.auth-points li{display:flex;gap:10px;align-items:flex-start;color:#B7D2D7;font-size:14px;line-height:1.55}
.auth-points .ic{color:#5ED6A2;margin-top:2px}
.auth-form-col{display:flex;flex-direction:column;padding:22px 18px calc(30px + env(safe-area-inset-bottom,0px))}
.auth-card{width:100%;max-width:460px;margin:auto;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-md);padding:clamp(24px,4vw,36px)}
.auth-logo{display:flex;justify-content:center;margin-bottom:18px}
.auth-logo img{height:36px}
.auth-title{text-align:center;font-size:23px;margin:0 0 6px}
.auth-sub{text-align:center;color:var(--muted);font-size:13.5px;margin:0 0 24px}
.auth-alt{text-align:center;font-size:13.5px;color:var(--muted);margin-top:20px}
.role-pick{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:6px}
.role-item{border:1.5px solid var(--border-2);border-radius:var(--r-md);padding:13px 14px;display:flex;gap:12px;align-items:center;cursor:pointer;transition:all var(--t-fast);background:var(--surface)}
.role-item input{position:absolute;opacity:0}
.role-item .hex-tile{width:42px;height:46px;background:var(--steel-100);color:var(--steel-700)}
.role-item b{font-size:14px;display:block}
.role-item span{font-size:12px;color:var(--muted)}
.role-item:hover{border-color:var(--copper-500)}
.role-item:has(input:checked){border-color:var(--copper-600);background:var(--copper-50)}
.role-item:has(input:checked) .hex-tile{background:var(--copper-600);color:#fff}
.captcha-box{display:flex;gap:10px;align-items:center}
.captcha-q{flex:none;background:var(--navy-900);color:#fff;border-radius:var(--r-md);padding:0 18px;min-height:48px;display:flex;align-items:center;font-family:var(--font-display);font-weight:800;font-size:17px;letter-spacing:.06em}

/* ---------- 22. HALAMAN DETAIL ---------- */
.detail-hero{background:linear-gradient(160deg,var(--navy-950),var(--navy-800) 70%);color:#fff;padding:clamp(28px,5vw,48px) 0;position:relative;overflow:hidden}
.detail-hero .hero-hexgrid{opacity:.8}
.detail-hero-in{position:relative;z-index:2}
.breadcrumb{display:flex;gap:6px;align-items:center;font-size:12.5px;color:#8FA2B0;margin-bottom:14px;flex-wrap:wrap}
.breadcrumb a{color:#B7D2D7}
.breadcrumb a:hover{color:#fff}
.detail-title{color:#fff;font-size:clamp(22px,4vw,32px);margin:10px 0 12px;max-width:760px}
.detail-meta{display:flex;gap:16px;flex-wrap:wrap;color:#B7D2D7;font-size:13.5px}
.detail-meta .flex{gap:7px}
.detail-grid{display:grid;gap:22px;grid-template-columns:1fr;align-items:start;margin-top:26px}
.buybox{position:static}
.buybox .price-tag{font-size:26px}
.list-check{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.list-check li{display:flex;gap:10px;font-size:14px;color:var(--ink-2);line-height:1.55}
.list-check .ic{color:var(--green-600);flex:none;margin-top:2px}
.review-item{border-top:1px solid var(--border);padding:16px 0}
.review-item:first-child{border-top:0;padding-top:0}
.review-head{display:flex;gap:11px;align-items:center;margin-bottom:8px}
.review-head b{font-size:14px;display:block}
.review-head span{font-size:12px;color:var(--muted)}
.review-text{font-size:13.5px;color:var(--ink-2);line-height:1.65;margin:0}
.review-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}

/* ---------- 23. RESPONSIF (min-width, mobile-first) ---------- */
@media (min-width:560px){
  .produk-grid{grid-template-columns:repeat(2,1fr)}
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .form-grid{grid-template-columns:1fr 1fr}
  .role-pick{grid-template-columns:1fr 1fr 1fr}
  .search-form{grid-template-columns:1fr auto auto}
  .search-form .f-keyword{grid-column:1/-1}
}
@media (min-width:768px){
  .container{padding-inline:24px}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-4{grid-template-columns:repeat(4,1fr)}
  .value-grid{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1.2fr}
  .avatar-meta{display:block}
  .search-form{grid-template-columns:1.4fr 1fr auto auto}
  .search-form .f-keyword{grid-column:auto}
  .detail-grid{grid-template-columns:1fr 340px}
  .buybox{position:sticky;top:calc(var(--nav-h) + 16px)}
  .hide-mobile{display:revert!important}
}
@media (min-width:1024px){
  body{padding-bottom:0}
  .bottomnav{display:none}
  .nav-links{display:flex}
  .nav-cta{display:flex}
  .nav-burger{display:none}
  .nav-cta-mobile{display:none}
  .brand img{height:38px}
  .produk-grid{grid-template-columns:repeat(3,1fr)}
  .value-grid{grid-template-columns:repeat(5,1fr)}
  .wa-float{bottom:22px}
  .dash{grid-template-columns:262px 1fr}
  .dash-side{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--navy-950),var(--navy-900));position:sticky;top:0;height:100dvh}
  .dash-burger{display:none}
  .sheet{left:50%;right:auto;bottom:auto;top:50%;transform:translate(-50%,-46%) scale(.97);opacity:0;width:min(560px,92vw);border-radius:var(--r-xl);max-height:86vh}
  .sheet.is-open{transform:translate(-50%,-50%) scale(1);opacity:1}
  .sheet-handle{display:none}
}
@media (min-width:1180px){
  .produk-grid{grid-template-columns:repeat(4,1fr)}
  .auth-wrap{grid-template-columns:1.05fr 1fr}
  .auth-visual{display:block}
}

/* ---------- 24. AKSESIBILITAS & CETAK ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{
  .navbar,.bottomnav,.footer,.wa-float,.no-print,.toast-stack,.drawer,.drawer-backdrop{display:none!important}
  body{background:#fff;padding:0}
  .print-area{box-shadow:none!important;border:1px solid #ccc!important}
}

/* =====================================================================
   LAPISAN v3 - IKON BERVOLUME, KEDALAMAN, DAN PERBAIKAN KONTRAS
   Blok ini dimuat terakhir sehingga menimpa aturan sebelumnya.
   Prinsip: setiap permukaan punya sumber cahaya yang konsisten dari
   kiri atas, bayangan berlapis (kontak dekat dan ambient jauh), serta
   rasio kontras teks minimal 4.5:1 terhadap latarnya.
   ===================================================================== */

/* ---------- Sistem bayangan berlapis ---------- */
:root{
  --sh-sm:0 1px 2px rgba(11,28,30,.05), 0 2px 8px rgba(11,28,30,.045);
  --sh-md:0 2px 4px rgba(11,28,30,.05), 0 10px 24px rgba(11,28,30,.085);
  --sh-lg:0 4px 9px rgba(11,28,30,.06), 0 24px 52px rgba(11,28,30,.135);
  --sh-copper:0 3px 8px rgba(135,67,41,.22), 0 12px 28px rgba(161,86,54,.26);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.75);
  --sh-ring:0 0 0 1px rgba(11,28,30,.05);
}

/* ---------- Ikon bervolume ---------- */
.ic3d,.ic3d-sm,.ic3d-lg,.ic3d-xl{display:block;flex:none;fill:initial;stroke:none;
  filter:drop-shadow(0 3px 6px rgba(11,28,30,.16)) drop-shadow(0 1px 2px rgba(11,28,30,.10));
  transition:transform var(--t-med) var(--ease),filter var(--t-med) var(--ease)}
.ic3d{width:44px;height:44px}
.ic3d-sm{width:32px;height:32px}
.ic3d-lg{width:60px;height:60px}
.ic3d-xl{width:82px;height:82px}
.ic3d-lift:hover .ic3d,.ic3d-lift:hover .ic3d-lg,.ic3d-lift:hover .ic3d-xl{
  transform:translateY(-3px) scale(1.04);
  filter:drop-shadow(0 8px 14px rgba(11,28,30,.20)) drop-shadow(0 2px 4px rgba(11,28,30,.12))}

/* ---------- Trust strip: teks gelap di latar terang ---------- */
.trust-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:0;max-width:820px;
  margin:24px auto 0;position:relative;z-index:6;padding:6px 16px 0}
.trust-item{background:none;border:0;backdrop-filter:none;text-align:center;padding:10px 6px;position:relative}
.trust-item + .trust-item::before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;
  background:linear-gradient(180deg,transparent,var(--border-2) 30%,var(--border-2) 70%,transparent)}
.trust-num{font-family:var(--font-display);font-size:clamp(22px,3.6vw,30px);font-weight:800;
  color:var(--navy-900);line-height:1.1;letter-spacing:-.015em}
.trust-label{font-size:11px;color:var(--muted);font-weight:800;margin-top:3px;
  letter-spacing:.09em;text-transform:uppercase}

/* ---------- Pemilih peran pada registrasi ---------- */
.role-pick{gap:11px}
.role-item{border:1.5px solid var(--border-2);border-radius:var(--r-lg);padding:14px 13px;
  gap:13px;background:linear-gradient(165deg,#fff,#FBFCFD);box-shadow:var(--sh-sm);
  transition:transform var(--t-med) var(--ease),border-color var(--t-fast),box-shadow var(--t-med),background var(--t-fast)}
.role-item .ic3d{width:42px;height:42px}
.role-item b{font-size:14.5px;letter-spacing:-.01em;color:var(--ink)}
.role-item span{font-size:11.5px;color:var(--muted);font-weight:600}
.role-item:hover{border-color:var(--copper-400);transform:translateY(-2px);box-shadow:var(--sh-md)}
.role-item:hover .ic3d{transform:translateY(-2px) scale(1.05)}
.role-item:has(input:checked){border-color:var(--copper-600);
  background:linear-gradient(165deg,#fff 20%,var(--copper-50));
  box-shadow:0 3px 10px rgba(161,86,54,.14),0 12px 26px rgba(161,86,54,.13),var(--sh-inset)}
.role-item:has(input:checked) .ic3d{transform:translateY(-3px) scale(1.08);
  filter:drop-shadow(0 8px 13px rgba(135,67,41,.28)) drop-shadow(0 2px 4px rgba(11,28,30,.14))}
.role-item:has(input:checked) b{color:var(--copper-700)}

/* ---------- Kartu manfaat per segmen ---------- */
.ben-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:860px){.ben-grid{grid-template-columns:repeat(3,1fr)}}
.ben-card{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:28px 24px 24px;box-shadow:var(--sh-md);overflow:hidden;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-fast);
  display:flex;flex-direction:column}
.ben-card::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--copper-600),var(--copper-400))}
.ben-card.tone-navy::before{background:linear-gradient(90deg,var(--navy-800),var(--steel-500))}
.ben-card.tone-steel::before{background:linear-gradient(90deg,var(--steel-600),#5E93A8)}
.ben-card::after{content:"";position:absolute;right:-40px;top:-40px;width:150px;height:150px;
  border-radius:50%;background:radial-gradient(circle,rgba(161,86,54,.06),transparent 70%);pointer-events:none}
.ben-card:hover{transform:translateY(-5px);box-shadow:var(--sh-lg);border-color:var(--steel-200)}
.ben-card h3{font-family:var(--font-display);font-size:19px;margin:14px 0 6px;letter-spacing:-.01em}
.ben-card > p{font-size:14px;color:var(--muted);line-height:1.65;margin:0 0 4px}
.ben-list{list-style:none;padding:0;margin:14px 0 18px;display:grid;gap:11px}
.ben-list li{display:flex;gap:10px;align-items:flex-start;font-size:13.8px;color:var(--ink-2);line-height:1.6}
.ben-list li .ic-sm{color:var(--green-600);margin-top:3px;stroke-width:2.6}
.ben-foot{margin-top:auto;padding-top:4px}

/* ---------- Penanda beta pada navigasi ---------- */
.nav-beta{display:inline-block;font-size:9px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;background:var(--steel-100);color:var(--steel-700);
  padding:2px 5px;border-radius:5px;margin-left:6px;line-height:1.5;vertical-align:middle}

/* ---------- Formulir perencana karir ---------- */
.wiz-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-md);overflow:hidden}
.wiz-head{background:linear-gradient(160deg,var(--navy-900),var(--navy-700));color:#fff;padding:26px 24px 22px;position:relative;overflow:hidden}
.wiz-head::after{content:"";position:absolute;inset:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23FFFFFF' stroke-opacity='.09' stroke-width='1.4'/%3E%3C/svg%3E");background-size:84px 96px}
.wiz-head > *{position:relative;z-index:1}
.wiz-head h1{color:#fff;font-size:clamp(21px,3.6vw,28px);margin:0 0 8px}
.wiz-head p{color:#C4DCDF;font-size:14.5px;margin:0;max-width:560px;line-height:1.65}
.wiz-body{padding:24px}
.lvl-card{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med) var(--ease),border-color var(--t-fast)}
.lvl-card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--steel-200)}
.lvl-card.is-now{border-color:var(--copper-500);border-width:1.5px;
  background:linear-gradient(165deg,#fff 30%,var(--copper-50));box-shadow:0 3px 10px rgba(161,86,54,.12),0 14px 30px rgba(161,86,54,.10)}
.lvl-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;color:var(--steel-600);margin-bottom:9px}
.lvl-card.is-now .lvl-tag{color:var(--copper-700)}
.skema-link{display:inline-flex;align-items:center;gap:7px;min-height:38px;padding:6px 14px;
  border-radius:var(--r-full);background:var(--surface-2);border:1px solid var(--border-2);
  font-size:13px;font-weight:600;color:var(--ink-2);box-shadow:var(--sh-sm);
  transition:transform var(--t-fast) var(--ease),border-color var(--t-fast),color var(--t-fast),box-shadow var(--t-fast)}
.skema-link:hover{border-color:var(--copper-500);color:var(--copper-700);
  transform:translateY(-2px);box-shadow:var(--sh-md);background:#fff}

/* ---------- Kedalaman tambahan pada komponen inti ---------- */
.card{box-shadow:var(--sh-sm)}
.btn-primary{box-shadow:var(--sh-copper),var(--sh-inset)}
.btn-primary:hover{box-shadow:0 5px 12px rgba(135,67,41,.26),0 16px 34px rgba(161,86,54,.30),var(--sh-inset)}
.search-card,.auth-card{box-shadow:var(--sh-lg),var(--sh-ring)}
.hex-tile.hex{filter:drop-shadow(0 3px 6px rgba(11,28,30,.14))}

/* Ikon bervolume pada keadaan kosong dan kartu nilai perlu diratakan tengah,
   karena elemen svg bersifat blok dan tidak mewarisi text-align. */
.empty > .ic3d,.empty > .ic3d-lg,.empty > .ic3d-xl{margin:0 auto 14px}
.vcard > .ic3d,.vcard > .ic3d-lg{margin-bottom:14px}
.ben-card > .ic3d-lg{margin-bottom:2px}

/* =====================================================================
   LAPISAN v3.2 - PERBAIKAN AREA KLIK DAN LAPISAN TUMPUKAN
   Temuan audit titik klik memakai peramban headless pada 1920x1080:
   panel filter di layar lebar hanya disembunyikan dengan opacity nol,
   sehingga bidang transparan selebar 560px tetap mengambang di tengah
   layar dan menelan klik pada kolom pencarian, pemilih kota, tombol
   filter, serta seluruh chip kata kunci di bawahnya. Elemen yang
   disembunyikan secara visual wajib dimatikan pula tangkapan
   pointernya dan dikeluarkan dari urutan fokus papan ketik.
   ===================================================================== */

/* ---------- Panel geser dan laci navigasi ---------- */
.sheet:not(.is-open),
.sheet-backdrop:not(.is-open),
.drawer:not(.is-open),
.drawer-backdrop:not(.is-open){pointer-events:none}
.sheet.is-open,.drawer.is-open,
.sheet-backdrop.is-open,.drawer-backdrop.is-open{pointer-events:auto}

@media (min-width:1024px){
  /* di layar lebar panel berubah menjadi dialog tengah, maka
     visibility dan pointer wajib ikut dimatikan saat tertutup */
  .sheet{visibility:hidden;transition:transform var(--t-med) var(--ease),opacity var(--t-med) var(--ease),visibility var(--t-med)}
  .sheet.is-open{visibility:visible}
}

/* laci navigasi berada di luar layar, kunci agar tidak dapat difokus */
.drawer:not(.is-open){visibility:hidden}
.drawer.is-open{visibility:visible}

/* ---------- Korsel promo ---------- */
/* slide tak aktif transparan penuh, jadi tidak boleh menangkap klik
   maupun ikut dalam urutan tab papan ketik */
.promo-slide{pointer-events:none;visibility:hidden}
.promo-slide.active{pointer-events:auto;visibility:visible}

/* ---------- Elemen hias tidak boleh menangkap pointer ---------- */
.media-hex,.promo-hex,.wiz-head::after,.ben-card::after,
.trust-item + .trust-item::before,.timeline::before,
.step::after,.hero-hexgrid,.hero-glow{pointer-events:none}

/* ikon di dalam elemen interaktif diteruskan ke induknya, supaya titik
   tengah tombol selalu mengenai tombol dan bukan gambar di dalamnya */
.btn .ic,.btn .ic-sm,.btn .ic-lg,
.nav-link .ic,.nav-link .ic-sm,
.drawer-link .ic,.dropdown-item .ic,
.chip .ic,.chip .ic-sm,
.skema-link .ic-sm,.side-link .ic,
.bn-item .ic,.toast-x .ic-sm{pointer-events:none}

/* ---------- Area sentuh kendali pilihan ---------- */
/* kotak centang dan tombol radio bawaan hanya 17px, di bawah ambang
   yang nyaman disentuh. Ukuran dinaikkan dan seluruh baris dijadikan
   sasaran klik lewat label pembungkusnya. */
.checkline,.filter-check,label.chipcheck{display:flex;align-items:center;gap:10px;
  min-height:44px;cursor:pointer;padding:2px 0}
.checkline input[type=checkbox],.checkline input[type=radio],
.filter-check input[type=checkbox],.filter-check input[type=radio],
.sheet-body input[type=checkbox],.sheet-body input[type=radio],
.form-group input[type=checkbox],.form-group input[type=radio]{
  width:20px;height:20px;flex:none;accent-color:var(--copper-600);cursor:pointer;margin:0}

/* ---------- Warna anak panah pemilih mengikuti palet baru ---------- */
.form-select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2354696C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")}

/* ---------- Kurung lapisan agar hero tidak membocorkan tumpukan ---------- */
.hero{isolation:isolate}
.search-wrap{z-index:20}
.trust-strip{z-index:19}

/* ---------- Navigasi utama diratakan ke tengah ---------- */
/* Dua pengisi ruang mengapit daftar menu, sehingga menu duduk di tengah
   ruang antara logo dan tombol akun. Cara ini dipilih daripada
   penempatan mutlak agar tidak pernah bertumpuk dengan tombol di
   layar sempit. */
.nav-links{margin-left:0;justify-content:center}
.navbar-in > .nav-spacer{flex:1 1 0;min-width:0}

/* =====================================================================
   LAPISAN v3.3 - RUANG AMAN, FOKUS PAPAN KETIK, DAN AREA SENTUH
   Temuan audit lanjutan pada lima ukuran layar:
     1. Navigasi bawah dan tombol WhatsApp menutupi konten terakhir
        halaman, sehingga tautan di kaki halaman tidak dapat diketuk
        sama sekali karena laman sudah mentok tidak bisa digulir lagi.
     2. Kartu yang menunggu animasi masih dapat dijangkau tombol Tab
        padahal belum terlihat, membuat fokus papan ketik hilang.
     3. Tombol radio pemilih peran disembunyikan tanpa penanda fokus.
     4. Beberapa tautan navigasi setinggi baris teks saja.
   ===================================================================== */

/* ---------- Ruang aman di bawah halaman ---------- */
/* Tinggi yang perlu dihindari bukan hanya navigasi bawah, tetapi juga
   tombol WhatsApp yang duduk di atasnya. Keduanya dihitung sekali di
   sini supaya tidak ada angka yang tercecer. */
:root{--float-h:60px; --aman-bawah:calc(var(--bottomnav-h) + var(--float-h))}
body{padding-bottom:calc(var(--aman-bawah) + env(safe-area-inset-bottom,0px))}
body.no-bottomnav{padding-bottom:calc(var(--float-h) + env(safe-area-inset-bottom,0px))}
@media (min-width:1024px){
  body{padding-bottom:var(--float-h)}
  body.no-bottomnav{padding-bottom:var(--float-h)}
}

/* Tombol WhatsApp menyusut menjadi lingkaran di layar sempit supaya
   bidang yang ditutupinya sekecil mungkin. */
@media (max-width:559px){
  .wa-float{padding:0;width:52px;height:52px;justify-content:center;border-radius:50%}
  .wa-float span,.wa-float b{display:none}
}

/* ---------- Fokus papan ketik pada elemen beranimasi ---------- */
/* Kartu yang belum masuk pandangan tetap dapat dijangkau tombol Tab.
   Begitu menerima fokus, kartu langsung ditampilkan penuh supaya
   pengguna papan ketik tidak kehilangan jejak posisinya. */
.reveal:focus-within{opacity:1;transform:none;transition:none}

/* ---------- Penanda fokus pada pemilih peran ---------- */
/* Tombol radio sengaja disembunyikan dan digantikan tampilan kartu,
   maka penanda fokus dipindahkan ke kartunya. */
.role-item:focus-within{border-color:var(--copper-600);
  box-shadow:0 0 0 3px var(--copper-100),0 3px 10px rgba(161,86,54,.16);outline:none;
  transition:none}
.role-item input:focus-visible{outline:none}

/* ---------- Area sentuh tautan navigasi ---------- */
/* Tautan yang berdiri sendiri sebagai navigasi diberi tinggi minimum
   yang nyaman diketuk. Tautan yang menyatu di dalam kalimat tidak
   diubah, karena menambah tingginya justru merusak alur baca. */
.breadcrumb a,.auth-alt a,.auth-back,.link-more{
  display:inline-flex;align-items:center;min-height:32px;padding-block:5px}
.breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:4px;min-height:36px}
.auth-alt{min-height:40px;display:flex;align-items:center;justify-content:center;gap:5px;flex-wrap:wrap}

/* ---------- Kepala tabel yang dapat diurutkan ---------- */
/* Tautan pengurut kolom sebelumnya hanya setinggi barisan teks, terlalu
   tipis untuk diketuk dengan nyaman. Seluruh sel kepala dijadikan
   sasaran sehingga tingginya mengikuti tinggi baris tabel. */
.table thead th > a{display:flex;align-items:center;gap:5px;min-height:34px;
  padding-block:6px;margin-block:-6px;border-radius:6px}
.table thead th > a:hover{color:var(--copper-700)}

/* =====================================================================
   LAPISAN v3.4 - HALAMAN MASUK DAN DAFTAR
   Empat perbaikan berdasarkan pengukuran pada 1920, 1440, dan 1280 piksel:
     1. Pemilih peran meluber 111 piksel keluar dari kotaknya. Penyebabnya
        satuan 1fr pada CSS Grid secara bawaan bermakna minmax(auto,1fr),
        sehingga kolom menolak menyusut lebih kecil daripada isinya dan
        justru mendorong keluar batas. Diperbaiki dengan minmax(0,1fr),
        dan susunan isi kartu diubah menjadi bertumpuk ke bawah supaya
        muat pada lebar kolom yang tersedia.
     2. Ruang kosong dipadatkan, kartu formulir diperlebar.
     3. Ukuran huruf dinaikkan agar nyaman dibaca.
     4. Panel kiri diberi ilustrasi dan kutipan pendukung.
   ===================================================================== */

/* ---------- Pemilih peran ---------- */
.role-pick{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:4px}
.role-item{flex-direction:column;text-align:center;gap:9px;padding:15px 8px;min-width:0}
.role-item .ic3d{width:40px;height:40px;margin:0 auto}
.role-item > span{display:block;min-width:0}
.role-item b{display:block;font-size:14px;line-height:1.25;overflow-wrap:anywhere}
.role-item span span,.role-item > span > span{display:block;font-size:11.5px;margin-top:2px}

/* ---------- Kotak formulir ---------- */
.auth-card{max-width:520px;padding:clamp(26px,3.4vw,38px)}
.auth-logo{margin-bottom:14px}
.auth-logo img{height:40px}
.auth-title{font-size:clamp(24px,2.4vw,28px);letter-spacing:-.02em;margin-bottom:5px}
.auth-sub{font-size:15px;margin-bottom:20px}
.auth-alt{font-size:14.5px;margin-top:16px}
.auth-form-col{padding:20px 18px calc(24px + env(safe-area-inset-bottom,0px))}

/* Huruf pada isian dinaikkan supaya terbaca nyaman, sekaligus mencegah
   peramban seluler memperbesar tampilan sendiri ketika kolom disentuh. */
.auth-card .form-label{font-size:13.5px;margin-bottom:6px}
.auth-card .form-input,.auth-card .form-select{font-size:16px;padding-block:13px}
.auth-card .input-icon .form-input{padding-left:44px}
.auth-card .btn-lg{font-size:16px;padding-block:15px}
.auth-card .form-hint{font-size:12.5px}
.auth-card .form-group{margin-bottom:15px}

/* ---------- Panel kiri bergambar ---------- */
.auth-ilus{width:100%;max-width:390px;height:auto;display:block;margin:6px auto 20px;
  filter:drop-shadow(0 24px 44px rgba(5,15,16,.42))}
.auth-visual{padding:44px 46px}
.auth-visual h2{font-size:clamp(26px,2.2vw,32px);margin:0 0 16px;max-width:420px}
.auth-points li{font-size:14.5px;color:#C4DCDF}
.auth-kutipan{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.auth-kutipan p{font-size:14.5px;line-height:1.65;color:#DDECEE;margin:0 0 12px;font-style:italic}
.auth-kutipan .siapa{display:flex;align-items:center;gap:11px}
.auth-kutipan .siapa .bulat{width:38px;height:38px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--copper-500),var(--copper-700));
  display:grid;place-items:center;font-weight:800;color:#fff;font-size:14px}
.auth-kutipan .siapa b{display:block;font-size:13.5px;color:#fff}
.auth-kutipan .siapa span{display:block;font-size:12px;color:#9FBFC4}

/* Panel kiri ditampilkan lebih awal supaya ruang kosong pada layar
   berukuran sedang tidak menganga terlalu lebar. */
@media (min-width:1024px){
  .auth-wrap{grid-template-columns:1fr 1fr}
  .auth-visual{display:block}
}
@media (min-width:1400px){
  .auth-wrap{grid-template-columns:1.08fr 1fr}
  .auth-card{max-width:560px}
}

/* Tombol radio pemilih peran sengaja disembunyikan karena tampilannya
   digantikan kartu. Aturan pembesaran kendali pilihan pada lapisan
   sebelumnya tidak boleh mengenainya, sebab akan menciptakan bidang
   transparan 20 piksel yang justru menutupi ikon di dalam kartu.
   Klik tetap tertangkap oleh label pembungkusnya, dan fokus papan
   ketik tetap berjalan karena pointer-events tidak memengaruhi fokus. */
.role-item input[type=radio],
.form-group .role-item input[type=radio]{
  position:absolute;opacity:0;width:1px;height:1px;margin:0;padding:0;
  pointer-events:none;border:0;clip-path:inset(50%)}

/* ---------- Baris portofolio kompetensi dan pengalaman ---------- */
.baris-porto{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;
  border-bottom:1px solid var(--border);transition:background var(--t-fast)}
.baris-porto:last-child{border-bottom:0}
.baris-porto:hover{background:var(--surface-2)}
.baris-porto.is-segera{border-left:3px solid var(--amber-600,#B7791F);background:#FFFBF2}
.baris-porto.is-lewat{border-left:3px solid var(--red-600);background:#FEF6F5}
.porto-ikon{width:40px;height:44px;flex:none;display:grid;place-items:center;
  background:var(--steel-100);color:var(--steel-700)}
.porto-ikon.hex-navy{background:var(--navy-800);color:#fff}
.porto-butir{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:5px}
.porto-butir li{position:relative;padding-left:15px;font-size:13.5px;color:var(--ink-2);line-height:1.6}
.porto-butir li::before{content:"";position:absolute;left:2px;top:8px;width:5px;height:5px;
  border-radius:50%;background:var(--copper-500)}

/* ---------- Batang kemajuan ---------- */
.progres{height:10px;background:var(--steel-100);border-radius:99px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(11,28,30,.08)}
.progres-isi{height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--copper-500),var(--copper-700));
  transition:width var(--t-med) var(--ease)}

/* ---------- Kartu kelas pada halaman pemantauan peserta ---------- */
.kelas-kartu{overflow:hidden}
.kelas-kepala{display:flex;gap:16px;align-items:flex-start;padding:18px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.kelas-gambar{width:92px;height:64px;border-radius:var(--r-md);object-fit:cover;flex:none;
  border:1px solid var(--border)}
.kelas-gambar-kosong{display:grid;place-items:center;background:var(--surface-2)}
.kelas-info{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;padding:14px 18px;
  background:var(--surface-2);border-bottom:1px solid var(--border)}
.kelas-info > div{min-width:0}
.kelas-info span{display:block;font-size:11.5px;letter-spacing:.03em}
.kelas-info b{display:block;font-size:13.5px;margin-top:2px;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kelas-bagian{padding:16px 18px;border-bottom:1px solid var(--border)}
@media (min-width:720px){ .kelas-info{grid-template-columns:repeat(4,1fr)} }

/* daftar materi pelatihan */
.materi-grid{display:grid;grid-template-columns:1fr;gap:9px}
@media (min-width:720px){ .materi-grid{grid-template-columns:1fr 1fr} }
.materi-item{display:flex;gap:11px;align-items:center;padding:11px 13px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  text-decoration:none;transition:transform var(--t-fast) var(--ease),
  border-color var(--t-fast),box-shadow var(--t-fast);min-height:56px}
.materi-item:hover{border-color:var(--copper-400);transform:translateY(-2px);box-shadow:var(--sh-md)}
.materi-item b{display:block;font-size:13.5px;color:var(--ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.materi-item .small{display:block;margin-top:2px}
.materi-item > .ic-sm:last-child{margin-left:auto;flex:none;color:var(--faint)}
.materi-ikon{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--steel-100);color:var(--steel-700)}
.materi-ikon.jenis-video,.materi-ikon.jenis-rekaman{background:var(--copper-100);color:var(--copper-700)}
.materi-ikon.jenis-tugas{background:#FFF3E0;color:#B7791F}

/* pilihan bintang untuk ulasan */
.bintang-pilih{display:inline-flex;flex-direction:row-reverse;gap:4px}
.bintang-pilih input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.bintang-pilih label{cursor:pointer;color:var(--steel-200);display:grid;place-items:center;
  width:38px;height:38px;border-radius:8px;transition:color var(--t-fast),transform var(--t-fast)}
.bintang-pilih label:hover,.bintang-pilih label:hover ~ label,
.bintang-pilih input:checked ~ label{color:#E0A33E}
.bintang-pilih label:hover{transform:scale(1.12)}
.bintang-pilih input:focus-visible + label{outline:2px solid var(--copper-600);outline-offset:2px}

/* ---------- Kartu sambutan dasbor ---------- */
.sapa-kartu{position:relative;overflow:hidden;border-radius:var(--r-xl);margin-bottom:18px;
  background:linear-gradient(150deg,var(--navy-900),var(--navy-700) 62%,#25494E);
  box-shadow:var(--sh-md)}
.sapa-hex{position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23FFFFFF' stroke-opacity='.08' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:84px 96px}
.sapa-isi{position:relative;z-index:1;display:flex;gap:22px;flex-wrap:wrap;
  align-items:center;padding:24px 26px}
.sapa-waktu{display:block;font-size:13.5px;color:#9FBFC4;letter-spacing:.02em}
.sapa-nama{font-family:var(--font-display);font-size:clamp(23px,3vw,30px);color:#fff;
  margin:2px 0 8px;letter-spacing:-.02em;line-height:1.2}
.sapa-sub{font-size:14.5px;color:#C4DCDF;line-height:1.6;margin:0 0 14px;max-width:520px}
.sapa-progres{display:flex;align-items:center;gap:12px;flex-wrap:wrap;max-width:460px}
.sapa-progres .progres{flex:1;min-width:150px;box-shadow:none}
.sapa-progres span{font-size:12px;color:#9FBFC4;white-space:nowrap}
.sapa-aksi{display:flex;gap:9px;flex-wrap:wrap;flex:none}
.btn-light{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-light:hover{background:rgba(255,255,255,.22);color:#fff}

/* ---------- Baris tugas yang perlu dikerjakan ---------- */
.tugas-baris{display:flex;gap:13px;align-items:center;padding:12px 18px;flex-wrap:wrap;
  border-bottom:1px solid var(--border)}
.tugas-baris:last-child{border-bottom:0}
.tugas-baris b{display:block;font-size:14px;line-height:1.35}
.tugas-baris .small{display:block;margin-top:2px}
.tugas-ikon{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center}
.tugas-ikon.nada-amber{background:#FFF3E0;color:#B7791F}
.tugas-ikon.nada-merah{background:#FDECEA;color:var(--red-600)}
.tugas-ikon.nada-navy{background:var(--steel-100);color:var(--steel-700)}

/* kartu angka yang dapat diketuk */
.stat-tautan{text-decoration:none;transition:transform var(--t-fast) var(--ease),
  box-shadow var(--t-fast),border-color var(--t-fast)}
.stat-tautan:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--copper-400)}

/* penanggalan pada jadwal terdekat */
.jadwal-tgl{width:44px;flex:none;text-align:center;border-radius:var(--r-md);
  background:var(--copper-50);border:1px solid var(--copper-100);padding:5px 0}
.jadwal-tgl b{display:block;font-size:17px;line-height:1;color:var(--copper-700);font-weight:800}
.jadwal-tgl span{display:block;font-size:10.5px;color:var(--copper-600);
  text-transform:uppercase;letter-spacing:.05em;margin-top:2px}

/* ---------- Grafik komposisi bidang pada dasbor korporat ---------- */
.bidang-baris{padding:11px 0;border-bottom:1px solid var(--border)}
.bidang-baris:last-of-type{border-bottom:0}
.bidang-bar{height:9px;background:var(--steel-100);border-radius:99px;overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(11,28,30,.07)}
.bidang-isi{height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--navy-700),var(--navy-900));
  transition:width var(--t-med) var(--ease)}

/* ---------- Kartu instruktur pada pengelolaan profil lembaga ---------- */
.ins-grid{display:grid;grid-template-columns:1fr;gap:0}
.ins-kartu{display:flex;gap:14px;align-items:center;padding:15px 18px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.ins-kartu:last-child{border-bottom:0}
.ins-foto{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid var(--surface);box-shadow:0 2px 8px rgba(11,28,30,.14)}
.ins-foto-kosong{display:grid;place-items:center;border-radius:50%;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));color:#fff;
  font-weight:800;font-size:17px;letter-spacing:.02em}

/* ---------- Galeri fasilitas dan peralatan ---------- */
.gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:13px}
.gal-item{position:relative;border:1px solid var(--border);border-radius:var(--r-md);
  overflow:hidden;background:var(--surface);transition:transform var(--t-fast) var(--ease),
  box-shadow var(--t-fast),border-color var(--t-fast)}
.gal-item:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--copper-400)}
.gal-item img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.gal-kosong{display:grid;place-items:center;aspect-ratio:4/3;background:var(--surface-2);color:var(--faint)}
.gal-isi{padding:11px 12px;display:grid;gap:4px}
.gal-isi b{font-size:13.5px;line-height:1.35}
.gal-isi .badge{justify-self:start}
.gal-aksi{position:absolute;top:8px;right:8px;display:flex;gap:5px;opacity:0;
  transition:opacity var(--t-fast)}
.gal-item:hover .gal-aksi,.gal-item:focus-within .gal-aksi{opacity:1}
.gal-aksi .btn{background:rgba(255,255,255,.94);backdrop-filter:blur(4px)}

/* ---------- Halaman publik profil lembaga ---------- */
.lsp-kepala{position:relative;overflow:hidden;padding:26px 0 30px;
  background:linear-gradient(160deg,var(--navy-950),var(--navy-800) 62%,#25494E);color:#fff}
.lsp-sampul{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.lsp-tirai{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(11,28,30,.88),rgba(19,44,47,.78) 60%,rgba(37,73,78,.86))}
.lsp-kepala-in{position:relative;z-index:2}
.lsp-identitas{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-top:14px}
.lsp-logo{width:76px;height:84px;flex:none;object-fit:cover;background:#fff;
  display:grid;place-items:center;font-weight:800;font-size:22px;color:var(--navy-900);
  filter:drop-shadow(0 6px 16px rgba(5,15,16,.4))}
.lsp-logo.hex-navy{background:linear-gradient(150deg,var(--copper-500),var(--copper-700));color:#fff}
.lsp-identitas h1{color:#fff;font-size:clamp(23px,3.2vw,32px);margin:0 0 8px;letter-spacing:-.02em;line-height:1.2}
.lsp-meta{display:flex;flex-wrap:wrap;gap:7px 16px;font-size:13.5px;color:#C4DCDF}
.lsp-meta span{display:inline-flex;align-items:center;gap:6px}
.lsp-meta b{color:#fff}
.lsp-aksi{display:flex;gap:9px;flex-wrap:wrap;flex:none}

.lsp-fakta{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px}
@media (min-width:640px){ .lsp-fakta{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .lsp-fakta{grid-template-columns:repeat(3,1fr)} }
.lsp-fakta > div{min-width:0}
.lsp-fakta span{display:block;font-size:11.5px;letter-spacing:.03em;margin-bottom:2px}
.lsp-fakta b{display:block;font-size:14px;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}

/* kartu instruktur versi publik */
.pub-ins-grid{display:grid;grid-template-columns:1fr;gap:0}
@media (min-width:720px){ .pub-ins-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1100px){ .pub-ins-grid{grid-template-columns:repeat(3,1fr)} }
.pub-ins{padding:20px 18px;border-bottom:1px solid var(--border);border-right:1px solid var(--border)}
.pub-ins img,.pub-ins-kosong{width:74px;height:74px;border-radius:50%;object-fit:cover;display:block;
  margin-bottom:12px;box-shadow:0 3px 12px rgba(11,28,30,.16)}
.pub-ins-kosong{display:grid;place-items:center;font-weight:800;font-size:24px;color:#fff;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900))}
.pub-ins h3{font-size:15.5px;margin:0 0 3px;line-height:1.35}
.pub-ins-jabatan{font-size:13px;color:var(--copper-700);font-weight:700;margin:0 0 8px}
.pub-ins-keahlian{font-size:13px;color:var(--ink-2);line-height:1.6;margin:9px 0 0}
.pub-ins-profil{font-size:13px;color:var(--muted);line-height:1.65;margin:8px 0 0}
.pub-ins-serti{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}

/* galeri versi publik */
.pub-gal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:15px}
.pub-gal{margin:0;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;
  background:var(--surface);transition:transform var(--t-med) var(--ease),box-shadow var(--t-med)}
.pub-gal:hover{transform:translateY(-3px);box-shadow:var(--sh-md)}
.pub-gal img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pub-gal-grid.gal-kotak img{aspect-ratio:1/1}
.pub-gal figcaption{padding:12px 13px;display:grid;gap:5px}
.pub-gal figcaption b{font-size:14px;line-height:1.4}
.pub-gal figcaption .badge{justify-self:start}

/* ringkasan dan daftar ulasan */
.ulasan-ringkas{display:flex;gap:26px;align-items:center;padding:20px 18px;
  border-bottom:1px solid var(--border);flex-wrap:wrap;background:var(--surface-2)}
.ulasan-angka{text-align:center;flex:none}
.ulasan-angka b{font-family:var(--font-display);font-size:40px;line-height:1;color:var(--navy-900)}
.ulasan-angka .seal{color:#E0A33E}
.ulasan-sebaran{flex:1;min-width:200px;display:grid;gap:6px}
.sebaran-baris{display:flex;align-items:center;gap:8px}
.sebaran-baris .ic-star{color:#E0A33E;flex:none}
.ulasan-daftar{display:grid;grid-template-columns:1fr}
.ulasan-item{display:flex;gap:14px;padding:17px 18px;border-bottom:1px solid var(--border)}
.ulasan-item:last-child{border-bottom:0}
.ulasan-inisial{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--steel-500),var(--steel-700));color:#fff;
  font-weight:800;font-size:14px}
.ulasan-item .seal{color:#E0A33E}

/* Tautan di dalam daftar keterangan lembaga berdiri sendiri, bukan
   menyatu dalam kalimat, sehingga tinggi sentuhnya perlu dinaikkan. */
.lsp-fakta b a{display:inline-flex;align-items:center;min-height:32px;padding-block:5px}

/* =====================================================================
   KELENGKAPAN DOKUMEN PESERTA
   ===================================================================== */

/* daftar periksa */
.periksa-daftar{list-style:none;margin:0;padding:0}
.periksa-butir{display:flex;gap:12px;align-items:center;padding:13px 18px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.periksa-butir:last-child{border-bottom:0}
.periksa-butir b{font-size:14px;margin-right:8px}
.periksa-kotak{width:24px;height:24px;border-radius:7px;flex:none;display:grid;place-items:center;
  border:2px solid var(--border-2);background:var(--surface);color:transparent;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast)}
.periksa-butir.is-ada .periksa-kotak{background:var(--green-600);border-color:var(--green-600);color:#fff}
.periksa-butir.is-tolak .periksa-kotak{background:var(--red-600);border-color:var(--red-600);color:#fff}

/* kartu tiap dokumen */
.dok-kartu.is-tolak{border-left:4px solid var(--red-600)}
.dok-kartu.is-sah{border-left:4px solid var(--green-600)}

/* pratinjau berkas terunggah */
.dok-pratinjau{display:flex;gap:15px;align-items:flex-start;padding:13px;flex-wrap:wrap;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}
.dok-gambar{flex:none;display:block;border-radius:var(--r-sm,8px);overflow:hidden;
  border:1px solid var(--border);line-height:0}
.dok-gambar img{width:92px;height:92px;object-fit:cover;display:block;
  transition:transform var(--t-med) var(--ease)}
.dok-gambar:hover img{transform:scale(1.06)}
.dok-berkas{width:92px;height:92px;flex:none;display:grid;place-items:center;gap:3px;
  align-content:center;border-radius:var(--r-sm,8px);border:1px solid var(--border);
  background:var(--surface);color:var(--steel-600)}
.dok-berkas b{font-size:11px;letter-spacing:.06em}

/* kotak seret dan lepas */
.jatuh{display:grid;place-items:center;gap:5px;text-align:center;cursor:pointer;
  padding:26px 18px;border:2px dashed var(--border-2);border-radius:var(--r-lg);
  background:var(--surface-2);position:relative;
  transition:border-color var(--t-fast),background var(--t-fast),transform var(--t-fast)}
.jatuh:hover{border-color:var(--copper-400);background:var(--copper-50)}
.jatuh.is-hover{border-color:var(--copper-600);background:var(--copper-100);
  transform:scale(1.01);border-style:solid}
.jatuh.is-terisi{border-color:var(--green-600);background:var(--green-100)}
.jatuh-ikon{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;
  background:var(--surface);color:var(--copper-600);box-shadow:var(--sh-sm);margin-bottom:4px}
.jatuh.is-hover .jatuh-ikon{color:var(--copper-700);transform:translateY(-2px)}
.jatuh-judul{font-size:15px;color:var(--ink)}
.jatuh-sub{font-size:13.5px;color:var(--muted)}
.jatuh-syarat{font-size:12px;color:var(--faint);margin-top:3px}
.jatuh-input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.jatuh:focus-within{border-color:var(--copper-600);
  box-shadow:0 0 0 3px var(--copper-100);outline:none}
.jatuh-terpilih{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:12px;
  padding:12px 14px;border:1px solid var(--green-600);border-radius:var(--r-md);
  background:var(--green-100)}
.jatuh-nama{flex:1;min-width:150px;font-size:13.5px;font-weight:700;color:var(--green-700);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- Panel rekomendasi dokumen bagi mitra ---------- */
.rek-kelompok{margin-bottom:16px}
.rek-judul{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--steel-700);margin-bottom:8px}
.rek-butir{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;margin-bottom:7px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.rek-butir:hover{border-color:var(--copper-400);background:var(--copper-50)}
.rek-butir.is-terpasang{opacity:.62;cursor:default;background:var(--surface-2)}
.rek-butir.is-terpasang:hover{border-color:var(--border);background:var(--surface-2)}
.rek-butir input{margin-top:2px}
.rek-butir b{display:block;font-size:14px;line-height:1.35}
.rek-butir .small{display:block;margin-top:2px;line-height:1.55}
.rek-butir:has(input:checked){border-color:var(--copper-600);background:var(--copper-50)}

/* ---------- Kartu materi pada pengelolaan mitra ---------- */
.materi-kelola{display:flex;gap:12px;align-items:flex-start;padding:13px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface);
  transition:border-color var(--t-fast),box-shadow var(--t-fast)}
.materi-kelola:hover{border-color:var(--copper-400);box-shadow:var(--sh-sm)}
.materi-kelola b{display:block;font-size:13.5px;line-height:1.35}
.materi-kelola .small{display:block;margin-top:2px}

/* =====================================================================
   SOROTAN PROMOSI
   ===================================================================== */

/* ---------- Ilustrasi ---------- */
.ilus{display:block;width:100%;height:auto}
.ilus-promo{width:100%;max-width:260px;height:auto;display:block}
.ilus-sorot{width:100%;max-width:210px;height:auto;display:block}

/* ---------- Spanduk berjalan pada beranda ---------- */
.promo-slider{height:auto;min-height:216px}
.promo-slide{align-items:center;gap:24px;justify-content:space-between}
.promo-content{flex:1;min-width:0;max-width:560px;position:relative;z-index:2}
.promo-oleh{display:block;margin-top:11px;font-size:11.5px;color:rgba(255,255,255,.62);
  letter-spacing:.02em}
.promo-gambar,.promo-ilus{flex:none;display:none;position:relative;z-index:1}
.promo-gambar img{width:230px;height:170px;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:0 12px 30px rgba(5,15,16,.34)}
.promo-ilus{filter:drop-shadow(0 14px 30px rgba(5,15,16,.34))}
@media (min-width:860px){
  .promo-gambar,.promo-ilus{display:block}
  .promo-content{max-width:52%}
}

/* ---------- Kartu sorotan pada dasbor ---------- */
.sorot-kartu{position:relative;overflow:hidden;border-radius:var(--r-xl);margin-bottom:18px;
  box-shadow:var(--sh-md);color:#fff}
.sorot-kartu.nada-navy{background:linear-gradient(150deg,var(--navy-900),var(--navy-700) 64%,#25494E)}
.sorot-kartu.nada-steel{background:linear-gradient(150deg,#1C3C3F,var(--steel-600) 70%,#5E93A8)}
.sorot-kartu.nada-copper{background:linear-gradient(150deg,var(--copper-700),var(--copper-500) 72%,#D19468)}
.sorot-kartu.nada-green{background:linear-gradient(150deg,#0F5C43,#1C8460 70%,#3FA97D)}
.sorot-hex{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23FFFFFF' stroke-opacity='.09' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:84px 96px}
.sorot-isi{position:relative;z-index:1;display:flex;gap:20px;align-items:center;
  padding:22px 24px;flex-wrap:wrap}
.sorot-teks{flex:1;min-width:230px}
.sorot-label{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;background:rgba(255,255,255,.18);padding:4px 10px;
  border-radius:99px;margin-bottom:9px}
.sorot-judul{font-family:var(--font-display);font-size:clamp(18px,2.4vw,23px);color:#fff;
  margin:0 0 7px;line-height:1.3;letter-spacing:-.015em}
.sorot-ket{font-size:14px;line-height:1.65;color:rgba(255,255,255,.86);margin:0 0 14px;max-width:520px}
.sorot-oleh{display:inline-flex;align-items:center;gap:6px;margin-left:12px;
  font-size:11.5px;color:rgba(255,255,255,.66)}
.sorot-gambar,.sorot-ilus{flex:none;display:none}
.sorot-gambar img{width:186px;height:132px;object-fit:cover;border-radius:var(--r-lg);
  box-shadow:0 10px 24px rgba(5,15,16,.3)}
.sorot-ilus{filter:drop-shadow(0 12px 26px rgba(5,15,16,.32))}
@media (min-width:780px){ .sorot-gambar,.sorot-ilus{display:block} }

/* ---------- Kartu pengelolaan sorotan ---------- */
.promo-kelola{display:flex;gap:14px;align-items:flex-start;padding:15px 18px;
  border-bottom:1px solid var(--border);flex-wrap:wrap}
.promo-kelola:last-child{border-bottom:0}
.promo-cuplik{width:76px;height:56px;flex:none;border-radius:var(--r-md);overflow:hidden;
  display:grid;place-items:center;border:1px solid var(--border)}
.promo-cuplik img{width:100%;height:100%;object-fit:cover}
.promo-cuplik.nada-navy{background:linear-gradient(150deg,var(--navy-900),var(--navy-700))}
.promo-cuplik.nada-steel{background:linear-gradient(150deg,#1C3C3F,var(--steel-600))}
.promo-cuplik.nada-copper{background:linear-gradient(150deg,var(--copper-700),var(--copper-500))}
.promo-cuplik.nada-green{background:linear-gradient(150deg,#0F5C43,#1C8460)}
.promo-cuplik svg{width:60px;height:auto}
.promo-angka{display:flex;gap:14px;flex-wrap:wrap;margin-top:7px}
.promo-angka span{font-size:12px;color:var(--muted)}
.promo-angka b{color:var(--ink);font-weight:800}

/* Tombol navigasi spanduk berada di dalam kartu dengan lapisan lokal,
   sehingga dapat tertutup tombol WhatsApp mengambang ketika kebetulan
   sejajar di pojok kanan bawah layar. Lapisannya dinaikkan melampaui
   tombol mengambang, dan tombol mengambang diberi jarak sedikit lebih
   jauh dari tepi supaya keduanya tidak pernah bertumpuk penuh. */
.slider-btn{z-index:860}
@media (min-width:1024px){
  .wa-float{bottom:26px;right:20px}
}

/* ---------- Bagan aliran dana pada halaman tentang ---------- */
.alir-dana{display:grid;grid-template-columns:1fr;gap:11px;margin-top:14px}
@media (min-width:760px){ .alir-dana{grid-template-columns:repeat(2,1fr)} }
.alir-langkah{display:flex;gap:13px;align-items:flex-start;padding:14px;
  border:1px solid var(--border);border-radius:var(--r-md);background:var(--surface-2)}
.alir-nomor{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(150deg,var(--copper-500),var(--copper-700));color:#fff;
  font-weight:800;font-size:14px}
.alir-langkah b{display:block;font-size:14px;margin-bottom:3px}
.alir-langkah .small{display:block;line-height:1.55}

/* Centang persetujuan ketentuan pada pendaftaran. Teksnya sengaja
   dibuat sedikit lebih kecil dari isian lain namun tetap terbaca,
   supaya tidak mendominasi formulir tetapi juga tidak tersembunyi. */
.setuju-baris{align-items:flex-start;gap:11px;margin:14px 0 6px;min-height:auto}
.setuju-baris input{margin-top:2px}
.setuju-baris span{font-size:13px;line-height:1.6;color:var(--muted)}
.setuju-baris a{color:var(--copper-700);font-weight:700;text-decoration:underline}

/* =====================================================================
   PAKET LANGGANAN KORPORAT
   ===================================================================== */
.paket-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:900px){ .paket-grid{grid-template-columns:repeat(3,1fr);align-items:start} }
.paket-kartu{position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);padding:26px 22px;box-shadow:var(--sh-sm);
  display:flex;flex-direction:column;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med),border-color var(--t-fast)}
.paket-kartu:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.paket-kartu.is-unggulan{border:2px solid var(--copper-600);box-shadow:var(--sh-md)}
@media (min-width:900px){ .paket-kartu.is-unggulan{transform:scale(1.03)}
  .paket-kartu.is-unggulan:hover{transform:scale(1.03) translateY(-4px)} }
.paket-kartu.is-milik{border-color:var(--green-600)}
.paket-pita{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:linear-gradient(150deg,var(--copper-500),var(--copper-700));color:#fff;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  padding:5px 14px;border-radius:99px;white-space:nowrap;box-shadow:var(--sh-copper)}
.paket-nama{font-family:var(--font-display);font-size:21px;margin:0 0 8px;letter-spacing:-.015em}
.paket-harga{display:flex;align-items:baseline;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.paket-harga b{font-family:var(--font-display);font-size:27px;color:var(--copper-700);letter-spacing:-.02em}
.paket-harga span{font-size:13px;color:var(--muted)}
.paket-kuota{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:700;
  color:var(--steel-700);background:var(--steel-100);padding:7px 12px;border-radius:99px;
  margin-bottom:12px;align-self:flex-start}
.paket-ringkas{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0 0 16px}
.paket-poin{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:9px;flex:1}
.paket-poin li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;
  color:var(--ink-2);line-height:1.55}
.paket-poin li .ic-sm{margin-top:2px;flex:none;color:var(--green-600);stroke-width:2.6}
.paket-poin li.is-tiada{color:var(--faint)}
.paket-poin li.is-tiada .ic-sm{color:var(--faint);stroke-width:2.2}
.paket-aksi{margin-top:auto}


/* =====================================================================
   LAPISAN v5.1 - IKON MODERN DAN POLA LATAR BERTEMA PROFESI
   ===================================================================== */

/* ---------- Ikon ubin ---------- */
/* Bidang ubin memberi kontras jauh lebih tinggi daripada lambang garis
   di atas latar terang. Pengukuran pada ikon lama menghasilkan kontras
   maksimal 76 dari 765, sementara bentuk ubin ini mencapai 476 sampai
   733, sehingga terbaca jelas bahkan pada ukuran kecil. */
.ikn{display:block;flex:none;
  filter:drop-shadow(0 4px 10px rgba(11,28,30,.16)) drop-shadow(0 1px 2px rgba(11,28,30,.10));
  transition:transform var(--t-med) var(--ease),filter var(--t-med) var(--ease)}
.ikn-lift:hover .ikn{transform:translateY(-4px) scale(1.05);
  filter:drop-shadow(0 10px 18px rgba(11,28,30,.22)) drop-shadow(0 2px 4px rgba(11,28,30,.14))}

/* ---------- Lambang garis ---------- */
.ikn-garis{width:16px;height:16px;flex:none}
.ikn-garis-lg{width:22px;height:22px;flex:none}

/* ---------- Penanda seksi dengan lambang ---------- */
/* Garis pendek pada penanda seksi diganti lambang yang menjelaskan isi
   bagiannya, sehingga pembaca dapat menebak isinya sebelum membaca
   judul. Garis lama tetap dipertahankan bagi penanda tanpa lambang. */
.eyebrow-ikon::before{display:none}
.eyebrow-ikon{gap:7px}
.eyebrow-ikon .ikn-garis{width:15px;height:15px;stroke-width:2.4}

/* ---------- Pola latar bertema profesi ---------- */
/* Menggantikan kisi heksagon polos. Motif memuat helm keselamatan, roda
   gigi, kunci pas, papan uji, dan kaliper, dihubungkan garis bernuansa
   papan rangkaian agar terasa formal sekaligus futuristik. Kepekatannya
   dijaga pada 4,2 persen bidang supaya tidak pernah mengganggu
   keterbacaan teks di atasnya. */
.hero-hexgrid{background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22 viewBox=%220 0 240 240%22%3E %3Cg fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E %3C%21-- jaringan penghubung, bernuansa papan rangkaian --%3E %3Cg stroke-opacity=%22.055%22 stroke-width=%221%22%3E %3Cpath d=%22M0 60h44M76 60h88M196 60h44%22/%3E %3Cpath d=%22M0 180h44M76 180h88M196 180h44%22/%3E %3Cpath d=%22M60 0v44M60 76v88M60 196v44%22/%3E %3Cpath d=%22M180 0v44M180 76v88M180 196v44%22/%3E %3Cpath d=%22M60 60 120 120 180 60M60 180 120 120 180 180%22/%3E %3C/g%3E %3Cg fill=%22%23FFFFFF%22 fill-opacity=%22.07%22 stroke=%22none%22%3E %3Ccircle cx=%22120%22 cy=%22120%22 r=%222.4%22/%3E%3Ccircle cx=%220%22 cy=%2260%22 r=%221.6%22/%3E %3Ccircle cx=%22240%22 cy=%2260%22 r=%221.6%22/%3E%3Ccircle cx=%220%22 cy=%22180%22 r=%221.6%22/%3E %3Ccircle cx=%22240%22 cy=%22180%22 r=%221.6%22/%3E%3Ccircle cx=%2260%22 cy=%220%22 r=%221.6%22/%3E %3Ccircle cx=%22180%22 cy=%220%22 r=%221.6%22/%3E%3Ccircle cx=%2260%22 cy=%22240%22 r=%221.6%22/%3E %3Ccircle cx=%22180%22 cy=%22240%22 r=%221.6%22/%3E %3C/g%3E %3C%21-- heksagon samar, menjaga identitas merek tetap hadir --%3E %3Cg stroke-opacity=%22.05%22 stroke-width=%221.1%22%3E %3Cpath d=%22M120 84l31 18v36l-31 18-31-18v-36Z%22/%3E %3C/g%3E %3C%21-- kuadran kiri atas: helm keselamatan --%3E %3Cg transform=%22translate(44 44)%22 stroke-opacity=%22.13%22 stroke-width=%221.5%22%3E %3Cpath d=%22M3 22c0-7.2 5.4-13 13-13s13 5.8 13 13%22/%3E %3Cpath d=%22M12 10.4V7a1.6 1.6 0 0 1 1.6-1.6h4.8A1.6 1.6 0 0 1 20 7v3.4%22/%3E %3Crect x=%220.5%22 y=%2222%22 width=%2231%22 height=%224.6%22 rx=%222.3%22/%3E %3C/g%3E %3C%21-- kuadran kanan atas: roda gigi --%3E %3Cg transform=%22translate(164 44)%22 stroke-opacity=%22.13%22 stroke-width=%221.5%22%3E %3Ccircle cx=%2216%22 cy=%2216%22 r=%225%22/%3E %3Ccircle cx=%2216%22 cy=%2216%22 r=%2211%22 stroke-opacity=%22.5%22/%3E %3Cpath d=%22M16 1v5M16 26v5M31 16h-5M6 16H1M26.6 5.4l-3.5 3.5M8.9 23.1l-3.5 3.5M26.6 26.6l-3.5-3.5M8.9 8.9 5.4 5.4%22/%3E %3C/g%3E %3C%21-- kuadran kiri bawah: kunci pas --%3E %3Cg transform=%22translate(44 164)%22 stroke-opacity=%22.13%22 stroke-width=%221.5%22%3E %3Cpath d=%22M20.6 2.4a7 7 0 0 0 7.2 11.6%22/%3E %3Cpath d=%22M27.8 14 31 17.2 27.4 20.8 24.2 17.6%22/%3E %3Cpath d=%22M20.6 2.4 13.8 9.2a7 7 0 0 0 6.8 6.8%22/%3E %3Cpath d=%22m12 17-9.4 9.4a2.8 2.8 0 0 0 3.9 3.9L16 20.8%22/%3E %3C/g%3E %3C%21-- kuadran kanan bawah: papan uji berdaftar periksa --%3E %3Cg transform=%22translate(164 164)%22 stroke-opacity=%22.13%22 stroke-width=%221.5%22%3E %3Crect x=%224%22 y=%224%22 width=%2224%22 height=%2227%22 rx=%222.6%22/%3E %3Cpath d=%22M12 4V2.6A1.6 1.6 0 0 1 13.6 1h4.8A1.6 1.6 0 0 1 20 2.6V4Z%22/%3E %3Cpath d=%22m9.4 14 2.4 2.4 4.6-4.8%22/%3E %3Cpath d=%22m9.4 23 2.4 2.4 4.6-4.8%22/%3E %3Cpath d=%22M19.5 15h3.8M19.5 24h3.8%22 stroke-opacity=%22.6%22/%3E %3C/g%3E %3C%21-- aksen kaliper di tengah, alat ukur presisi --%3E %3Cg transform=%22translate(104 104)%22 stroke-opacity=%22.1%22 stroke-width=%221.3%22%3E %3Cpath d=%22M4 3h24M4 3v6M28 3v6%22/%3E %3Cpath d=%22M10 9v18M22 9v14%22/%3E %3Cpath d=%22M10 27h5M22 23h5%22 stroke-opacity=%22.7%22/%3E %3C/g%3E %3C/g%3E%3C/svg%3E");
  background-size:240px 240px;opacity:.9}
@media (max-width:719px){ .hero-hexgrid{background-size:180px 180px} }

/* Kartu keunggulan memakai ikon ubin, jarak disesuaikan */
.vcard > .ikn{margin-bottom:14px}
.ben-card > .ikn{margin-bottom:4px}
.empty > .ikn{margin:0 auto 14px}

/* =====================================================================
   JENDELA SOROTAN
   Hanya dipasang pada layar 1024 piksel ke atas. Pada layar sempit
   elemennya dibuang seluruhnya oleh skrip, bukan sekadar disembunyikan,
   supaya tidak ada bidang tak terlihat yang menghalangi sentuhan.
   ===================================================================== */
.jsorot{position:fixed;inset:0;z-index:1200;display:grid;place-items:center;
  padding:24px;pointer-events:none}
.jsorot-tirai{position:absolute;inset:0;background:rgba(11,28,30,.62);
  backdrop-filter:blur(3px);opacity:0;transition:opacity .26s var(--ease);
  pointer-events:auto;cursor:pointer}
.jsorot.is-buka .jsorot-tirai{opacity:1}
.jsorot-kotak{position:relative;z-index:2;width:min(560px,100%);overflow:hidden;
  border-radius:var(--r-xl);box-shadow:0 24px 70px rgba(5,15,16,.42);
  opacity:0;transform:translateY(18px) scale(.97);pointer-events:auto;
  transition:opacity .26s var(--ease),transform .26s var(--ease)}
.jsorot.is-buka .jsorot-kotak{opacity:1;transform:none}
.jsorot.nada-navy .jsorot-kotak{background:linear-gradient(150deg,var(--navy-900),var(--navy-700) 64%,#25494E)}
.jsorot.nada-steel .jsorot-kotak{background:linear-gradient(150deg,#1C3C3F,var(--steel-600) 70%,#5E93A8)}
.jsorot.nada-copper .jsorot-kotak{background:linear-gradient(150deg,var(--copper-700),var(--copper-500) 72%,#D19468)}
.jsorot.nada-green .jsorot-kotak{background:linear-gradient(150deg,#0F5C43,#1C8460 70%,#3FA97D)}
.jsorot-hex{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23FFFFFF' stroke-opacity='.09' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:84px 96px}
.jsorot-x{position:absolute;top:12px;right:12px;z-index:3;width:38px;height:38px;
  border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;
  display:grid;place-items:center;cursor:pointer;transition:background var(--t-fast)}
.jsorot-x:hover{background:rgba(255,255,255,.28)}
.jsorot-x:focus-visible{outline:2px solid #fff;outline-offset:2px}
.jsorot-badan{position:relative;z-index:2;padding:30px 28px 26px;text-align:center;color:#fff}
.jsorot-gambar img{width:100%;max-height:190px;object-fit:cover;border-radius:var(--r-lg);
  margin-bottom:16px;box-shadow:0 10px 26px rgba(5,15,16,.34)}
.jsorot-ilus{display:block;max-width:250px;margin:0 auto 12px;
  filter:drop-shadow(0 12px 26px rgba(5,15,16,.34))}
.jsorot-label{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;background:rgba(255,255,255,.2);padding:5px 12px;
  border-radius:99px;margin-bottom:11px}
.jsorot-teks h2{font-family:var(--font-display);font-size:clamp(20px,2.6vw,25px);color:#fff;
  margin:0 0 9px;line-height:1.32;letter-spacing:-.015em}
.jsorot-teks p{font-size:14.5px;line-height:1.7;color:rgba(255,255,255,.88);
  margin:0 auto 14px;max-width:420px}
.jsorot-oleh{display:inline-flex;align-items:center;gap:6px;font-size:12px;
  color:rgba(255,255,255,.7);margin-bottom:16px}
.jsorot-aksi{display:grid;gap:8px;max-width:300px;margin:0 auto}
.jsorot-nanti{color:rgba(255,255,255,.72)}
.jsorot-nanti:hover{color:#fff;background:rgba(255,255,255,.12)}
@media (max-width:1023px){ .jsorot{display:none} }
@media (prefers-reduced-motion:reduce){
  .jsorot-tirai,.jsorot-kotak{transition:none}
  .jsorot-kotak{transform:none}
}

/* =====================================================================
   HALAMAN ARTIKEL
   ===================================================================== */

/* ---------- Penyaring topik ---------- */
.art-saring{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.art-tag{display:inline-flex;align-items:center;min-height:38px;padding:7px 16px;
  border-radius:var(--r-full);border:1px solid var(--border-2);background:var(--surface);
  font-size:13.5px;font-weight:700;color:var(--ink-2);
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast),transform var(--t-fast)}
.art-tag:hover{border-color:var(--copper-400);color:var(--copper-700);transform:translateY(-2px)}
.art-tag.is-aktif{background:var(--navy-900);border-color:var(--navy-900);color:#fff}

/* ---------- Tulisan sorotan ---------- */
.art-utama{display:grid;grid-template-columns:1fr;gap:0;margin-bottom:24px;overflow:hidden;
  border-radius:var(--r-xl);border:1px solid var(--border);background:var(--surface);
  box-shadow:var(--sh-md);text-decoration:none;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med),border-color var(--t-fast)}
.art-utama:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--steel-200)}
.art-utama-gambar{position:relative;overflow:hidden;background:var(--surface-2);line-height:0}
.art-utama-gambar img{width:100%;height:100%;min-height:230px;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease)}
.art-utama:hover .art-utama-gambar img{transform:scale(1.05)}
.art-utama-isi{padding:26px 24px;display:flex;flex-direction:column;justify-content:center}
.art-utama-atas{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.art-lencana{display:inline-flex;align-items:center;font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;padding:5px 11px;border-radius:99px;
  background:linear-gradient(150deg,var(--copper-500),var(--copper-700));color:#fff}
.art-utama h2{font-family:var(--font-display);font-size:clamp(20px,2.6vw,27px);
  line-height:1.3;letter-spacing:-.02em;margin:0 0 10px;color:var(--ink)}
.art-utama p{font-size:14.5px;line-height:1.72;color:var(--muted);margin:0 0 14px}
.art-ajak{display:inline-flex;align-items:center;gap:7px;margin-top:12px;
  font-size:14px;font-weight:800;color:var(--copper-700)}
.art-utama:hover .art-ajak{gap:11px}
@media (min-width:860px){
  .art-utama{grid-template-columns:1.15fr 1fr}
  .art-utama-isi{padding:32px 30px}
}

/* ---------- Kartu tulisan ---------- */
.art-grid{display:grid;grid-template-columns:1fr;gap:18px}
@media (min-width:640px){ .art-grid{grid-template-columns:1fr 1fr} }
@media (min-width:1024px){ .art-grid{grid-template-columns:repeat(3,1fr)} }
.art-kartu{display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-lg);
  border:1px solid var(--border);background:var(--surface);box-shadow:var(--sh-sm);
  text-decoration:none;
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med),border-color var(--t-fast)}
.art-kartu:hover{transform:translateY(-4px);box-shadow:var(--sh-md);border-color:var(--copper-400)}
.art-kartu-gambar{position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--surface-2);line-height:0}
.art-kartu-gambar img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .9s var(--ease)}
.art-kartu:hover .art-kartu-gambar img{transform:scale(1.06)}
.art-kartu-kosong{position:absolute;inset:0;display:grid;place-items:center;color:var(--steel-500)}
.art-kartu-tag{position:absolute;left:12px;bottom:12px;font-size:10.5px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;padding:5px 10px;border-radius:99px;
  background:rgba(11,28,30,.72);color:#fff;backdrop-filter:blur(4px)}
.art-kartu-isi{padding:16px 17px 18px;display:flex;flex-direction:column;flex:1}
.art-kartu h2{font-size:16px;line-height:1.4;letter-spacing:-.01em;margin:0 0 8px;color:var(--ink)}
.art-kartu p{font-size:13.5px;line-height:1.65;color:var(--muted);margin:0 0 12px;flex:1}
.art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12px;color:var(--faint)}
.art-meta .ic-sm{color:var(--steel-500)}

/* =====================================================================
   TOMBOL MASUK LEWAT PENYEDIA LUAR
   Warna dan bentuk mengikuti panduan Google, yaitu latar putih, garis
   tepi abu, dan lambang berwarna asli. Panduan itu wajib dipatuhi agar
   pengajuan aplikasi tidak ditolak saat ditinjau Google.
   ===================================================================== */
.btn-google{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;
  min-height:50px;padding:12px 18px;border-radius:var(--r-md);
  border:1px solid #DADCE0;background:#FFFFFF;color:#3C4043;
  font-family:var(--font-body);font-size:15px;font-weight:700;letter-spacing:-.01em;
  cursor:pointer;text-decoration:none;
  transition:background var(--t-fast),box-shadow var(--t-fast),border-color var(--t-fast)}
.btn-google:hover{background:#F8F9FA;border-color:#C6C9CD;box-shadow:0 1px 3px rgba(60,64,67,.16);color:#3C4043}
.btn-google:active{background:#F1F3F4}
.btn-google:focus-visible{outline:2px solid #4285F4;outline-offset:2px}
.btn-google svg{width:20px;height:20px;flex:none}

.pemisah-atau{display:flex;align-items:center;gap:12px;margin:18px 0;
  font-size:12.5px;color:var(--faint);letter-spacing:.03em}
.pemisah-atau::before,.pemisah-atau::after{content:"";flex:1;height:1px;background:var(--border)}

/* ---------- Halaman pelengkapan profil ---------- */
.lengkapi-atas{display:flex;gap:16px;align-items:flex-start;margin-bottom:22px;flex-wrap:wrap}
.lengkapi-foto{width:60px;height:60px;flex:none;border-radius:50%;object-fit:cover;
  border:2px solid var(--surface);box-shadow:0 3px 12px rgba(11,28,30,.16)}
.lengkapi-foto-kosong{display:grid;place-items:center;font-weight:800;font-size:20px;color:#fff;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900))}

/* =====================================================================
   SOROTAN MITRA HARIAN
   ===================================================================== */
.msorot{position:relative;overflow:hidden;border-radius:var(--r-xl);margin-bottom:26px;
  background:linear-gradient(150deg,var(--navy-950),var(--navy-800) 58%,#25494E);
  box-shadow:var(--sh-lg);color:#fff}
.msorot-hex{position:absolute;inset:0;opacity:.55;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='96' viewBox='0 0 56 64'%3E%3Cpath d='M28 2 52 16v28L28 58 4 44V16Z' fill='none' stroke='%23FFFFFF' stroke-opacity='.09' stroke-width='1.4'/%3E%3C/svg%3E");
  background-size:84px 96px}
.msorot-isi{position:relative;z-index:1;display:grid;grid-template-columns:1fr;
  gap:20px;align-items:center;padding:26px 24px}
.msorot-kiri{min-width:0}
.msorot-label{display:inline-flex;align-items:center;gap:7px;font-size:11px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;background:linear-gradient(150deg,var(--copper-500),var(--copper-700));
  color:#fff;padding:6px 13px;border-radius:99px;margin-bottom:15px;box-shadow:var(--sh-copper)}
.msorot-label .ikn-garis{width:14px;height:14px}
.msorot-kepala{display:flex;gap:15px;align-items:center;margin-bottom:14px;flex-wrap:wrap}
.msorot-kepala h2{font-family:var(--font-display);font-size:clamp(21px,2.8vw,28px);color:#fff;
  margin:0 0 7px;line-height:1.25;letter-spacing:-.02em}
.msorot-meta{display:flex;flex-wrap:wrap;gap:7px 15px;font-size:13px;color:#C4DCDF}
.msorot-meta span{display:inline-flex;align-items:center;gap:6px}
.msorot-meta b{color:#fff}
.msorot-desc{font-size:14.5px;line-height:1.72;color:rgba(255,255,255,.86);
  margin:0 0 15px;max-width:560px}
.msorot-tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);
  padding:6px 12px;border-radius:99px;color:#DDECEE}
.msorot-kanan{display:none}
@media (min-width:900px){
  .msorot-isi{grid-template-columns:1.5fr .85fr;padding:32px 30px}
  .msorot-kanan{display:block;filter:drop-shadow(0 14px 30px rgba(5,15,16,.4))}
}

/* ---------- Kartu mitra dibuat lebih hidup ---------- */
.mcard{position:relative;overflow:hidden}
.mcard::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,var(--copper-500),var(--copper-700));
  transform:scaleX(0);transform-origin:left;transition:transform var(--t-med) var(--ease)}
.mcard:hover::before{transform:scaleX(1)}

/* =====================================================================
   SUSUNAN KEMAMPUAN BERSELANG PADA BERANDA
   Menggantikan lima kartu sejajar yang membuat mata membaca semuanya
   sebagai satu blok lalu melewatinya sekaligus.
   ===================================================================== */
.kmp-daftar{display:grid;gap:14px}
.kmp-baris{position:relative;display:grid;grid-template-columns:1fr;gap:20px;
  align-items:center;padding:26px 22px;border-radius:var(--r-xl);
  background:var(--surface);border:1px solid var(--border);box-shadow:var(--sh-sm);
  transition:transform var(--t-med) var(--ease),box-shadow var(--t-med),border-color var(--t-fast)}
.kmp-baris:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--copper-400)}
.kmp-teks{min-width:0;position:relative}
.kmp-nomor{position:absolute;top:-8px;right:0;font-family:var(--font-display);
  font-size:56px;line-height:1;font-weight:800;color:var(--steel-100);
  letter-spacing:-.04em;pointer-events:none;user-select:none}
.kmp-teks .ikn{margin-bottom:14px}
.kmp-teks h3{font-family:var(--font-display);font-size:clamp(18px,2.3vw,23px);
  letter-spacing:-.02em;line-height:1.28;margin:0 0 9px;color:var(--ink)}
.kmp-teks p{font-size:14.5px;line-height:1.75;color:var(--muted);margin:0 0 14px;max-width:520px}
.kmp-poin{display:flex;flex-wrap:wrap;gap:8px}
.kmp-poin span{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700;
  color:var(--steel-700);background:var(--steel-100);padding:7px 13px;border-radius:99px}
.kmp-poin .ikn-garis{width:14px;height:14px;color:var(--copper-600)}
.kmp-visual{position:relative;display:grid;place-items:center;min-width:0}
.kmp-visual .ilus{position:relative;z-index:1;max-width:290px;width:100%;
  filter:drop-shadow(0 12px 26px rgba(11,28,30,.14))}
.kmp-cahaya{position:absolute;width:74%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(110,162,170,.2),rgba(110,162,170,0) 68%)}

@media (min-width:880px){
  .kmp-daftar{gap:18px}
  .kmp-baris{grid-template-columns:1.25fr .75fr;padding:32px 34px;gap:34px}
  .kmp-baris.is-balik .kmp-teks{order:2}
  .kmp-baris.is-balik .kmp-visual{order:1}
  .kmp-nomor{font-size:74px;top:-14px}
  .kmp-baris.is-balik .kmp-nomor{right:auto;left:0}
  .kmp-baris.is-balik .kmp-teks{padding-left:14px}
}
@media (max-width:879px){
  /* Pada layar sempit ilustrasi diletakkan lebih dulu, sebab gambar
     lebih cepat menarik perhatian daripada blok teks. */
  .kmp-baris{grid-template-columns:1fr}
  .kmp-visual{order:-1}
  .kmp-visual .ilus{max-width:210px}
  .kmp-nomor{font-size:44px;top:-4px}
}

/* =====================================================================
   LAPISAN v6.3 - TAMPILAN LOGO MITRA
   ===================================================================== */

/* Bingkai heksagon memotong logo mitra pada keempat sudutnya, padahal
   logo lembaga umumnya berbentuk persegi atau mendatar dengan tulisan
   di dalamnya. Pemotongan itu membuat sebagian nama lembaga hilang.
   Karena itu bingkai heksagon kini hanya dipakai bila lembaga belum
   mengunggah logo, yaitu saat yang tampil hanya huruf awal namanya.
   Begitu ada logo sungguhan, bingkainya berubah menjadi kotak bersudut
   lengkung dengan latar putih, dan gambar disesuaikan seluruhnya masuk
   tanpa terpotong. */
.hex-avatar:has(img){clip-path:none;border-radius:var(--r-md);
  background:#fff;border:1px solid var(--border);padding:5px}
.hex-avatar:has(img) img{width:100%;height:100%;object-fit:contain}

/* Peramban lama yang belum mengenal has() tetap ditangani lewat kelas
   pembantu yang dipasang langsung pada elemen. */
.logo-utuh{clip-path:none;border-radius:var(--r-md);background:#fff;
  border:1px solid var(--border);padding:5px}
.logo-utuh img{width:100%;height:100%;object-fit:contain}

/* Baris lembaga pada halaman pengelolaan */
.lbg-baris{display:flex;gap:14px;align-items:center;padding:14px 18px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);transition:background var(--t-fast)}
.lbg-baris:last-child{border-bottom:0}
.lbg-baris:hover{background:var(--surface-2)}
.lbg-baris.is-kosong{border-left:3px solid var(--amber-600,#B7791F);background:#FFFBF2}
.lbg-logo{width:52px;height:52px;flex:none;display:grid;place-items:center;
  border-radius:var(--r-md);background:#fff;border:1px solid var(--border);
  overflow:hidden;padding:5px}
.lbg-logo img{width:100%;height:100%;object-fit:contain}
.lbg-logo b{font-size:17px;font-weight:800;color:var(--steel-700)}

/* ---------- Panel rincian komisi pada formulir produk mitra ---------- */
.komisi-panel{border:1.5px dashed var(--copper-400);border-radius:var(--r-md);
  padding:15px 16px;background:var(--copper-50)}
.komisi-kepala{display:flex;align-items:center;gap:9px;color:var(--copper-700)}
.komisi-kepala b{font-size:13.5px;text-transform:uppercase;letter-spacing:.05em}
.komisi-angka{display:grid;gap:8px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--copper-100)}
.komisi-angka > div{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.komisi-angka span{font-size:13.5px;color:var(--ink-2)}
.komisi-angka i{font-style:normal;font-size:12px;color:var(--muted)}
.komisi-angka b{font-size:14.5px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.komisi-terima{padding-top:9px;border-top:1px solid var(--copper-100);margin-top:2px}
.komisi-terima span{font-weight:700;color:var(--copper-700)}
.komisi-terima b{font-size:18px;color:var(--copper-700)}

/* ---------- Judul kolom yang dapat diurutkan ---------- */
.urut-judul{display:inline-flex;align-items:center;gap:5px;color:inherit;
  text-decoration:none;white-space:nowrap;transition:color var(--t-fast)}
.urut-judul:hover{color:var(--copper-700)}
.urut-judul.is-aktif{color:var(--copper-700)}
.urut-diam{opacity:.3}
.table-urut thead th{user-select:none}