:root{--bg:#04111f;--panel:#071d32;--cyan:#18c8ff;--text:#f5fbff;--muted:#a6bbcc;--line:rgba(72,201,255,.42)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{font-family:"Poppins",system-ui,sans-serif;background:linear-gradient(180deg,#04111f,#061a2e 55%,#04111f);color:var(--text)}a{color:inherit;text-decoration:none}.landing-page{min-height:100vh}
.landing-hero{min-height:670px;position:relative;overflow:hidden;isolation:isolate;border-bottom:1px solid rgba(67,194,255,.18);background:#06182b}
.landing-photo{position:absolute;inset:0;z-index:-4;background-repeat:no-repeat;pointer-events:none}
.landing-photo-master{background-image:url('../img/brand/hero-clean.png');background-size:cover;background-position:center center;filter:saturate(1.04) contrast(1.03) brightness(.88);transform:scale(1.01)}
.landing-overlay{position:absolute;inset:0;z-index:-3;background:linear-gradient(90deg,rgba(2,13,29,.62) 0%,rgba(2,18,34,.30) 42%,rgba(1,14,28,.40) 100%),linear-gradient(180deg,rgba(4,22,42,.06) 0%,rgba(4,20,37,.14) 38%,rgba(4,17,31,.86) 100%),radial-gradient(circle at 50% 5%,rgba(51,158,235,.16),transparent 46%)}
.landing-hero::after{content:"";position:absolute;inset:auto 0 0;height:210px;z-index:-2;background:linear-gradient(180deg,transparent 0%,rgba(6,24,43,.42) 36%,#06182b 100%);pointer-events:none}
.landing-header,.landing-content,.landing-bottom,.landing-footer{width:min(1360px,calc(100% - 48px));margin-inline:auto}.landing-header{padding-top:24px;display:flex;justify-content:space-between;align-items:center;gap:24px}.landing-brand{display:flex;align-items:center;gap:14px;text-shadow:0 3px 12px rgba(0,0,0,.48)}.landing-brand img{width:76px;height:76px;object-fit:contain;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}.landing-brand div{display:flex;flex-direction:column;line-height:1.05}.landing-brand span{font-size:.79rem;letter-spacing:.12em;font-weight:600}.landing-brand strong{font-size:1.65rem;margin-top:4px}.landing-brand small{font-size:.72rem;color:#d1dfeb;margin-top:7px}.header-login{padding:10px 19px;border-radius:12px;border:1px solid rgba(81,207,255,.5);background:rgba(5,49,78,.72);box-shadow:0 10px 28px rgba(0,0,0,.2);font-size:.8rem;font-weight:600;backdrop-filter:blur(12px);transition:.22s}.header-login:hover{transform:translateY(-1px);background:rgba(10,100,143,.78)}
.landing-content{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,570px);gap:56px;align-items:end;padding:120px 0 68px}.eyebrow{font-size:.95rem;color:#d2efff}.landing-copy h1{font-size:clamp(3rem,5.5vw,5.7rem);line-height:.96;letter-spacing:-.05em;margin:8px 0 15px;text-shadow:0 7px 26px rgba(0,0,0,.5)}.landing-copy h1 span{background:linear-gradient(95deg,#effcff,#59cbff 48%,#199fe8);-webkit-background-clip:text;background-clip:text;color:transparent}.landing-copy p{max-width:720px;color:#c3d4e2;line-height:1.8;font-size:.98rem;margin:0;text-shadow:0 2px 8px rgba(0,0,0,.28)}.landing-actions{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}.primary-action{display:inline-flex;align-items:center;gap:12px;padding:13px 20px;border-radius:13px;background:linear-gradient(135deg,#1375d8,#13b8ef);font-size:.82rem;font-weight:600;box-shadow:0 12px 32px rgba(12,129,203,.35);transition:.22s}.primary-action:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(13,143,219,.42)}.primary-action span{font-size:1.15rem}.secure-note{font-size:.72rem;color:#b4cad8}
.landing-info{padding:20px;border-radius:19px;border:1px solid var(--line);background:linear-gradient(145deg,rgba(5,31,53,.84),rgba(3,22,39,.91));backdrop-filter:blur(14px);box-shadow:0 24px 56px rgba(0,0,0,.3)}.info-head{display:flex;gap:10px;align-items:center;font-size:.87rem}.info-head span{color:var(--cyan);font-size:1.25rem}.mini-apps{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.mini-apps>div{padding:14px;border:1px solid rgba(78,183,238,.2);border-radius:13px;background:rgba(8,45,72,.55);display:flex;flex-direction:column;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}.mini-apps>div:hover{transform:translateY(-2px) scale(1.02);border-color:rgba(102,205,255,.48);box-shadow:0 14px 32px rgba(0,0,0,.22),0 0 22px rgba(34,179,255,.14)}.mini-apps b{font-size:.8rem}.mini-apps small{font-size:.63rem;color:#9db7ca;margin-top:4px}
.landing-bottom{padding:34px 0 38px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.feature{display:flex;gap:14px;align-items:flex-start;padding:18px;border:1px solid rgba(62,191,247,.24);border-radius:15px;background:rgba(6,28,47,.72)}.feature-icon{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:linear-gradient(145deg,#0b5792,#0ea9d5);box-shadow:0 0 22px rgba(16,177,230,.18);font-weight:700}.feature div{display:flex;flex-direction:column}.feature b{font-size:.8rem}.feature small{font-size:.66rem;color:#879fb2;line-height:1.55;margin-top:4px}.landing-footer{border-top:1px solid rgba(75,188,245,.14);padding:21px 0 28px;color:#718ca0;font-size:.66rem}
@keyframes ssoFadeUp{from{opacity:0;transform:translate3d(0,24px,0) scale(.985)}to{opacity:1;transform:none}}@keyframes ssoFadeDown{from{opacity:0;transform:translate3d(0,-18px,0)}to{opacity:1;transform:none}}@keyframes ssoScaleIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:scale(1)}}@keyframes ssoPhotoDrift{0%{transform:scale(1.01) translate3d(-4px,0,0)}50%{transform:scale(1.035) translate3d(5px,-3px,0)}100%{transform:scale(1.01) translate3d(-4px,0,0)}}@keyframes ssoGlowPulse{0%,100%{box-shadow:0 24px 56px rgba(0,0,0,.3)}50%{box-shadow:0 28px 64px rgba(0,0,0,.34),0 0 26px rgba(24,200,255,.10)}}
body.motion-ready .landing-header{animation:ssoFadeDown .6s ease both}body.motion-ready .landing-copy{animation:ssoFadeUp .8s cubic-bezier(.2,.75,.25,1) .08s both}body.motion-ready .landing-info{animation:ssoScaleIn .75s cubic-bezier(.2,.75,.25,1) .18s both,ssoGlowPulse 5.2s ease-in-out 1.2s infinite}body.motion-ready .landing-photo-master{animation:ssoPhotoDrift 20s ease-in-out infinite}
@media(max-width:900px){.landing-header,.landing-content,.landing-bottom,.landing-footer{width:min(100% - 32px,1360px)}.landing-content{grid-template-columns:1fr;padding-top:92px;gap:30px}.landing-info{max-width:650px}.landing-bottom{grid-template-columns:1fr}.landing-brand small{display:none}.landing-photo-master{background-position:42% center}}
@media(max-width:640px){.landing-hero{min-height:auto}.landing-brand img{width:50px;height:50px}.landing-brand span{font-size:.53rem}.landing-brand strong{font-size:.95rem}.landing-content{padding:92px 0 42px}.landing-copy h1{font-size:clamp(2.6rem,14vw,4rem)}.landing-copy p{font-size:.8rem}.mini-apps{grid-template-columns:1fr}.landing-header,.landing-content,.landing-bottom,.landing-footer{width:calc(100% - 22px)}.landing-photo-master{background-position:40% center}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* === SSO: kaca putih transparan, perubahan visual saja === */
/* Bercak dibuat dengan gradient, tanpa elemen yang menghalangi klik. */
:root {
  --sso-glass-fill: rgba(255,255,255,.16);
  --sso-glass-line: rgba(255,255,255,.46);
  --sso-glass-shadow: 0 16px 40px rgba(0,12,28,.22), inset 0 1px 0 rgba(255,255,255,.65), inset 0 -1px 0 rgba(255,255,255,.08);
  --sso-glass-marks:
    radial-gradient(ellipse at 13% 18%,rgba(255,255,255,.24),rgba(255,255,255,.05) 17%,transparent 32%),
    radial-gradient(ellipse at 84% 78%,rgba(255,255,255,.13),transparent 30%),
    radial-gradient(ellipse at 67% 11%,rgba(255,255,255,.09),transparent 19%),
    linear-gradient(125deg,rgba(255,255,255,.12),transparent 42%,rgba(255,255,255,.04) 74%,rgba(255,255,255,.12));
}
body .landing-info,
body .hero-status,
body .account-actions,
body .feature,
body .panel-inner.app-card-shell,
body .public-doc-card,
body .portal-docs-card,
body .portal-doc-item {
  background-color: var(--sso-glass-fill);
  background-image: var(--sso-glass-marks);
  border-color: var(--sso-glass-line);
  box-shadow: var(--sso-glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(110%);
  backdrop-filter: blur(18px) saturate(110%);
  color: #fff;
}
/* Panel kecil tetap transparan tanpa menumpuk efek blur. */
body .mini-apps > div,
body .status-item {
  background: linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.055));
  border-color: rgba(255,255,255,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
body .header-login,
body .primary-action,
body .logout-button,
body .public-doc-actions a,
body .public-doc-actions button,
body .portal-doc-actions a,
body .portal-chat-fab {
  background: linear-gradient(130deg,rgba(255,255,255,.26),rgba(255,255,255,.12));
  border-color: rgba(255,255,255,.50);
  box-shadow: 0 8px 24px rgba(0,12,28,.18),inset 0 1px 0 rgba(255,255,255,.55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  color: #fff;
}
body .portal-chat-fab { background-color: rgba(33,48,67,.72); }
body .header-login:hover,
body .primary-action:hover,
body .logout-button:hover,
body .public-doc-actions a:hover,
body .public-doc-actions button:hover,
body .portal-doc-actions a:hover,
body .portal-chat-fab:hover {
  background-color: rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.85);
  box-shadow: 0 12px 30px rgba(0,12,28,.22),inset 0 1px 0 rgba(255,255,255,.75);
}
body .portal-chat-fab:hover { background-color: rgba(50,64,82,.90); }
body .panel-inner.app-card-shell:hover,
body .panel-inner.app-card-shell:focus-visible,
body .mini-apps > div:hover {
  border-color: rgba(255,255,255,.86);
  box-shadow: 0 20px 44px rgba(0,12,28,.26),inset 0 1px 0 rgba(255,255,255,.80),0 0 20px rgba(255,255,255,.08);
}
body .panel-inner.app-card-shell::before {
  background: linear-gradient(120deg,rgba(255,255,255,.16),transparent 52%);
  pointer-events: none;
}
body .panel-inner.app-card-shell::after { color: #f0f5fa; }
body .panel-inner.is-disabled:hover {
  border-color: var(--sso-glass-line);
  box-shadow: var(--sso-glass-shadow);
}
body .app-card-bg { border-color: rgba(255,255,255,.65); }
body .app-card-label { color: #e1f2fc; }
body .app-text-title { color: #fff; }
body .app-text-sub,
body .mini-apps small,
body .feature small,
body .status-label,
body .status-unor,
body .account-copy span,
body .public-doc-main small,
body .portal-doc-copy small,
body .portal-docs-head p { color: #e0e8f0; }
body .info-head span,
body .status-icon { color: #f2f8ff; }
body .status-unor { border-top-color: rgba(255,255,255,.25); }
body .public-docs-section {
  background: linear-gradient(135deg,rgba(255,255,255,.04),rgba(255,255,255,.015));
  border-color: rgba(255,255,255,.18);
}
body .share-toast {
  background: linear-gradient(135deg,rgba(63,78,96,.93),rgba(27,43,62,.93));
  border-color: rgba(255,255,255,.48);
  box-shadow: var(--sso-glass-shadow);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}
body .portal-chat-window { border-color: rgba(255,255,255,.65); }
/* Pertahankan animasi lama, ganti warna pantulannya saja. */
@keyframes ssoGlowPulse {
  0%,100% { box-shadow: var(--sso-glass-shadow); }
  50% { box-shadow: 0 22px 50px rgba(0,12,28,.25),inset 0 1px 0 rgba(255,255,255,.75),0 0 24px rgba(255,255,255,.09); }
}
/* Browser tanpa backdrop-filter tetap memperoleh panel terbaca. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  body .landing-info, body .hero-status, body .account-actions,
  body .feature, body .panel-inner.app-card-shell,
  body .public-doc-card, body .portal-docs-card, body .portal-doc-item {
    background-color: rgba(57,73,91,.96);
  }
}
@media (prefers-reduced-transparency: reduce) {
  body .landing-info, body .hero-status, body .account-actions,
  body .feature, body .panel-inner.app-card-shell,
  body .public-doc-card, body .portal-docs-card, body .portal-doc-item {
    background-color: #39495b;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}