:root{--bg:#f4f6fb;--card:#fff;--ink:#1f2433;--mut:#667085;--line:#e6e9f0;--pri:#1a73e8;--n1:#081431;--n2:#16347f;--b:#4285f4;--r:#ea4335;--y:#fbbc04;--g:#34a853}
*{box-sizing:border-box}
body{margin:0;font-family:"Google Sans",Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.55}
a{color:var(--pri);text-decoration:none}
.mark{display:inline-grid;place-items:center;flex:none;border-radius:28%;background:linear-gradient(135deg,#4285f4,#7b61ff 60%,#ea4335);color:#fff;font-weight:800;box-shadow:0 6px 18px rgba(66,133,244,.35)}
.aico svg{width:56%;height:56%;display:block}
.mark.logo{width:auto;padding:0 .45rem;border-radius:14px;background:linear-gradient(145deg,#0d1f4d,#1c3f9a);border:1px solid rgba(255,255,255,.2);box-sizing:border-box;box-shadow:0 6px 18px rgba(8,20,49,.4)}
.mark.logo img{display:block;width:auto;max-width:160px;object-fit:contain}
.aico{display:grid;place-items:center;flex:none;width:40px;height:40px;border-radius:12px;color:#fff;font-weight:700}
.dots{display:flex;gap:.45rem;margin:1rem 0 0}.dots i{width:10px;height:10px;border-radius:50%}
.dots i:nth-child(1){background:var(--b)}.dots i:nth-child(2){background:var(--r)}.dots i:nth-child(3){background:var(--y)}.dots i:nth-child(4){background:var(--g)}
.muted{color:var(--mut)}

/* ===== Login (satu halaman: masuk + daftar) ===== */
body.lg{min-height:100vh;min-height:100dvh;background:#081431;color:#fff;overflow-x:hidden;-webkit-tap-highlight-color:transparent}
body.lg::before,body.lg::after{content:"";position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
body.lg::before{width:560px;height:560px;background:var(--b);top:-180px;right:-120px;opacity:.5;animation:lgf 16s ease-in-out infinite alternate}
body.lg::after{width:460px;height:460px;background:var(--r);bottom:-180px;left:-140px;opacity:.28;animation:lgf 20s ease-in-out infinite alternate-reverse}
@keyframes lgf{to{transform:translate(-50px,40px) scale(1.12)}}
.lg-wrap{position:relative;z-index:1;max-width:1180px;margin:0 auto;min-height:100vh;min-height:100dvh;padding:2.4rem 2rem 1.4rem;
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,440px);grid-template-rows:auto 1fr auto;column-gap:4.5rem;
  grid-template-areas:"hero main" "apps main" "foot foot"}
.lg-hero{grid-area:hero;align-self:end;padding-bottom:1.6rem}
.lg-main{grid-area:main;align-self:center}
.lg-apps{grid-area:apps;align-self:start}
.lg-foot{grid-area:foot;padding-top:1.6rem;font-size:.84rem;color:rgba(255,255,255,.65)}
.lg-foot a{color:#fff;opacity:.85;text-decoration:underline}

.lg-lang{position:absolute;top:calc(2.4rem + 5px);right:2rem;z-index:5;display:inline-flex;padding:3px;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.lg-lang a,.lg-lang b{min-width:40px;text-align:center;padding:.4rem .7rem;border-radius:99px;font-size:.78rem;font-weight:700;letter-spacing:.04em;line-height:1}
.lg-lang b{background:#fff;color:#16347f}.lg-lang a{color:rgba(255,255,255,.8)}.lg-lang a:hover{color:#fff}
.lg-brand{display:flex;gap:.8rem;align-items:center;margin-bottom:2.2rem}
.lg-brand b{display:block;font-size:1.1rem}.lg-brand small{display:block;opacity:.65}
.lg-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem;border-radius:99px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.lg-badge i{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 3px rgba(52,168,83,.3)}
.lg-hero h1{font-size:clamp(2rem,4.4vw,3.4rem);line-height:1.1;margin:1rem 0 1rem;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.lg-intro{margin:0;max-width:34rem;font-size:1.05rem;color:rgba(255,255,255,.78)}
.lg-feats{display:flex;flex-wrap:wrap;gap:.5rem .6rem;list-style:none;padding:0;margin:1.3rem 0 0}
.lg-feats li{display:inline-flex;align-items:center;gap:.4rem;font-size:.84rem;padding:.32rem .75rem .32rem .55rem;border-radius:99px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.lg-feats svg{width:15px;height:15px;color:#7be495;stroke-width:3}

.lg-label{display:flex;align-items:center;gap:.6rem;font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6);margin:.4rem 0 .8rem}
.lg-label span{letter-spacing:0;padding:.05rem .5rem;border-radius:99px;background:rgba(255,255,255,.14);color:#fff;font-weight:700}
.lg-rail{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.8rem}
.lg-app{position:relative;display:flex;align-items:center;gap:.85rem;padding:.85rem .95rem;border-radius:20px;color:#fff;overflow:hidden;
  background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(10px);
  transition:transform .2s,background .2s,border-color .2s,box-shadow .2s}
.lg-app::before{content:"";position:absolute;left:-30px;top:-30px;width:110px;height:110px;border-radius:50%;background:radial-gradient(circle,var(--c1),transparent 70%);opacity:.35;transition:opacity .2s}
.lg-app>*{position:relative}
.lg-app .aico{width:46px;height:46px;border-radius:14px;font-size:1.15rem;box-shadow:0 8px 18px rgba(0,0,0,.28)}
.lg-at{flex:1;min-width:0}.lg-at b{display:block;font-size:.98rem}
.lg-at small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.78rem;line-height:1.35;color:rgba(255,255,255,.7)}
.lg-go{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);flex:none;transition:.2s}
.lg-app:hover{transform:perspective(800px) rotateX(var(--ry,0deg)) rotateY(var(--rx,0deg)) translateY(-4px);border-color:rgba(255,255,255,.4);box-shadow:0 14px 30px rgba(0,0,0,.3)}
.lg-app:hover::before{opacity:.6}.lg-app:hover .lg-go{background:#fff;color:#16347f;transform:translateX(2px)}

.lg-card{position:relative;background:#fff;color:var(--ink);border-radius:28px;padding:1.5rem 1.6rem 1.4rem;box-shadow:0 30px 70px rgba(2,8,30,.5),0 0 0 1px rgba(255,255,255,.4) inset}
.lg-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;border-radius:999px;background:#eef1f7}
.lg-tabs::before{content:"";position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:999px;background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.16);transition:transform .28s cubic-bezier(.4,0,.2,1)}
.lg-card[data-mode=signup] .lg-tabs::before{transform:translateX(100%)}
.lg-tabs button{position:relative;border:0;background:none;font:inherit;font-weight:600;font-size:.95rem;min-height:44px;border-radius:999px;color:var(--mut);cursor:pointer;transition:color .2s}
.lg-tabs button[aria-selected=true]{color:var(--pri)}
.lg-head{text-align:center;padding:1.6rem 0 .2rem}
.lg-head h2{font-size:1.65rem;line-height:1.2;margin:.1rem 0 .3rem;letter-spacing:-.01em}
.lg-head p{margin:0;font-size:.95rem}
.lg-card[data-mode=login] .m-signup,.lg-card[data-mode=signup] .m-login{display:none!important}
.lg-head .m-login,.lg-head .m-signup{animation:lgin .3s ease both}
@keyframes lgin{from{opacity:0;transform:translateY(6px)}}
.lg-alert{background:#fdecea;color:#b3261e;padding:.75rem .95rem;border-radius:14px;margin-top:1rem;font-size:.9rem;border:1px solid #f3c6c2}
.lg-g{display:flex;align-items:center;justify-content:center;gap:.8rem;width:100%;min-height:56px;margin-top:1.4rem;border-radius:999px;font-weight:600;font-size:1.02rem;color:#e3e3e3;background:#131314;border:1px solid #131314;box-shadow:0 10px 24px rgba(19,19,20,.35);transition:.18s}
.lg-g svg{background:#fff;border-radius:50%;padding:4px;box-sizing:content-box;width:18px;height:18px}
.lg-g:hover{background:#26272a;box-shadow:0 14px 30px rgba(19,19,20,.45);transform:translateY(-1px)}
.lg-g:active{transform:scale(.985)}
.lg-steps{list-style:none;margin:1.2rem 0 0;padding:.9rem 1rem;border-radius:16px;background:#f5f8ff;border:1px solid #e1e9fb;display:grid;gap:.6rem}
.lg-steps li{display:flex;align-items:center;gap:.7rem;font-size:.9rem}
.lg-steps b{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;background:var(--pri);color:#fff;font-size:.78rem}
.lg-note{margin:.8rem 0 0;font-size:.82rem;color:#92600a;background:#fef3c7;padding:.5rem .8rem;border-radius:12px}
.lg-fine{font-size:.76rem;line-height:1.5;color:var(--mut);text-align:center;margin:.9rem 0 0}.lg-fine a{text-decoration:underline}

/* animasi daftar aplikasi */
.lg-app{animation:lgup .65s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(var(--i,0)*85ms + .2s)}
@keyframes lgup{from{opacity:0;transform:translateY(22px) scale(.96)}}
.lg-app::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .25s;background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.2),transparent 65%)}
.lg-app:hover::after{opacity:1}
.lg-app .aico{transition:transform .35s cubic-bezier(.34,1.56,.64,1)}
.lg-app:hover .aico{transform:rotate(-7deg) scale(1.12)}
.lg-app .aico svg *{stroke-dasharray:1;animation:lgdraw .9s ease-out backwards;animation-delay:calc(var(--i,0)*85ms + .45s)}
@keyframes lgdraw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
.lg-app:hover .aico svg{animation:lgwig .6s ease}
@keyframes lgwig{30%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}}
.lg-app:active{transform:scale(.97)}
.lg-dots{display:none;justify-content:center;gap:6px;padding:.1rem 0 .2rem}
.lg-dots i{width:6px;height:6px;border-radius:99px;background:rgba(255,255,255,.3);cursor:pointer;transition:width .3s,background .3s}
.lg-dots i.on{width:22px;background:#fff}
@media(max-width:960px){
  .lg-dots{display:flex}
  .lg-badge{display:none}
  .lg-lang{top:calc(1.2rem + env(safe-area-inset-top) + 5px);right:1.1rem}
  .lg-wrap{grid-template-columns:minmax(0,1fr);grid-template-rows:auto;grid-template-areas:"hero" "main" "apps" "foot";max-width:560px;column-gap:0;
    padding:calc(1.2rem + env(safe-area-inset-top)) 1.1rem calc(1rem + env(safe-area-inset-bottom))}
  .lg-hero{padding-bottom:1.3rem}
  .lg-brand{margin-bottom:1.3rem}
  .lg-hero h1{font-size:1.85rem;margin:0}
  .lg-intro,.lg-feats{display:none}
  .lg-card{border-radius:26px;padding:1.1rem 1.1rem 1rem}
  .lg-head{padding-top:1.2rem}.lg-head h2{font-size:1.5rem}
  .lg-apps{margin:1.8rem -1.1rem 0}
  .lg-label{padding:0 1.1rem}
  .lg-rail{display:flex;gap:.7rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:.2rem 1.1rem 1rem;scroll-padding:0 1.1rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .lg-rail::-webkit-scrollbar{display:none}
  .lg-app{flex:0 0 min(78%,280px);scroll-snap-align:start;flex-direction:column;align-items:flex-start;gap:.7rem;padding:1rem;min-height:150px}
  .lg-app .aico{width:44px;height:44px}
  .lg-at small{-webkit-line-clamp:3}
  .lg-go{position:absolute;right:.8rem;top:.8rem}
  .lg-foot{text-align:center;padding-top:.6rem}
}
@media(max-width:380px){.lg-hero h1{font-size:1.6rem}.lg-g{font-size:.96rem}.lg-tabs button{font-size:.9rem}}
@media(prefers-reduced-motion:reduce){body.lg::before,body.lg::after,.lg-app,.lg-app .aico svg *,.lg-app:hover .aico svg{animation:none!important}.lg-app,.lg-app .aico,.lg-g,.lg-tabs::before{transition:none!important}.lg-app:hover,.lg-app:hover .aico{transform:none}}

/* Latar sidebar navigasi (dulu satu aturan dengan panel login) */
.sidebar{position:relative;overflow:hidden;color:#fff;background:linear-gradient(155deg,var(--n1),var(--n2))}
.sidebar::before{content:"";position:absolute;border-radius:50%;filter:blur(60px);pointer-events:none;width:240px;height:240px;background:var(--b);bottom:-100px;right:-90px;opacity:.4}
.sidebar>*{position:relative;z-index:1}

/* ===== App shell ===== */
body.app{display:grid;grid-template-columns:268px minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:1.2rem .9rem}
.brand{display:flex;gap:.7rem;align-items:center;padding:.4rem .5rem 1.2rem;color:#fff}
.brand-name{font-weight:700;line-height:1.2}.brand-name small{display:block;font-weight:400;opacity:.7;font-size:.75rem}
.sidebar nav{flex:1;overflow:auto}
.nav-title{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.55;margin:1.1rem .7rem .4rem}
.nav-item{display:flex;align-items:center;gap:.75rem;padding:.65rem .8rem;border-radius:12px;color:rgba(255,255,255,.78);font-weight:500;margin-bottom:2px}
.nav-item:hover{background:rgba(255,255,255,.08);color:#fff}
.nav-item.active{background:rgba(255,255,255,.16);color:#fff;box-shadow:inset 3px 0 0 var(--y)}
.nav-ico{display:grid}
.side-user{display:flex;align-items:center;gap:.7rem;padding:.8rem;border-radius:16px;background:rgba(255,255,255,.1)}
.avatar{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--b),var(--r));color:#fff;font-weight:700;overflow:hidden;flex:none}
.avatar img{width:100%;height:100%;object-fit:cover}
.who{flex:1;min-width:0}.who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.9rem}
.badge{font-size:.7rem;padding:.05rem .5rem;border-radius:99px;background:rgba(255,255,255,.18)}.badge-gold{background:var(--y);color:#3b2b00}
.logout{color:#fff;opacity:.8;display:grid;place-items:center;width:34px;height:34px;border-radius:10px}.logout:hover{background:rgba(255,255,255,.15);opacity:1}
.shell{display:flex;flex-direction:column;min-width:0;min-height:100vh}
.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:1rem;padding:.9rem 1.8rem;background:rgba(244,246,251,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.titles{flex:1}.page-title{margin:0;font-size:1.3rem}.page-sub{margin:0;color:var(--mut);font-size:.88rem}
.pill{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem .8rem;border-radius:99px;background:#e6f4ea;color:#1e7a3a;font-size:.8rem;font-weight:600}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--g);box-shadow:0 0 0 3px rgba(52,168,83,.25)}
.burger{display:none;border:1px solid var(--line);background:#fff;border-radius:10px;width:40px;height:40px;font-size:1.2rem;cursor:pointer}
.content{flex:1;padding:1.8rem;max-width:1100px;width:100%;margin:0 auto}
.foot{padding:1.2rem 1.8rem;color:var(--mut);font-size:.85rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem;border-top:1px solid var(--line)}
.foot a{color:var(--mut);margin-left:1rem}.foot a:hover{color:var(--pri)}
.scrim{display:none}

/* ===== Dashboard ===== */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:1.4rem;box-shadow:0 6px 24px rgba(16,24,40,.05)}
.hero{display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(66,133,244,.18),transparent 70%)}
.hero .avatar{width:68px;height:68px;font-size:1.6rem}
.hero h2{margin:0;font-size:1.5rem}.hero p{margin:.1rem 0;color:var(--mut)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin:1.2rem 0}
.stat small{color:var(--mut)}.stat b{display:block;font-size:1.8rem;line-height:1.25}
.sec-h{display:flex;justify-content:space-between;align-items:end;margin:1.6rem 0 .8rem}.sec-h h3{margin:0;font-size:1.15rem}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.tile{display:block;color:inherit;position:relative;transition:.18s}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(16,24,40,.12)}
.tile .aico{width:52px;height:52px;font-size:1.3rem;border-radius:16px;margin-bottom:.9rem}
.tile h4{margin:0;font-size:1.05rem}.tile p{margin:.2rem 0 .9rem;color:var(--mut);font-size:.9rem}
.open{position:absolute;right:1.2rem;top:1.2rem;color:var(--mut)}
.chip{display:inline-flex;align-items:center;gap:.35rem;font-size:.75rem;font-weight:600;padding:.2rem .6rem;border-radius:99px;background:#e6f4ea;color:#1e7a3a}
.chip.warn{background:#fef3c7;color:#92600a}
.btn{display:inline-block;background:var(--pri);color:#fff;border-radius:999px;padding:.5rem 1.1rem;font-weight:600;font-size:.88rem;margin-top:.5rem}
.empty{text-align:center;color:var(--mut);padding:2rem}

@media(max-width:880px){
  body.app{display:block}
  .sidebar{position:fixed;left:0;top:0;z-index:30;width:272px;transform:translateX(-100%);transition:transform .25s}
  .sidebar.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(8,20,49,.5);z-index:20}.scrim.show{display:block}
  .burger{display:grid;place-items:center}.topbar{padding:.8rem 1rem}.content{padding:1rem}.pill{display:none}
}

/* ===== Komponen umum (v2) ===== */
button.btn{border:0;cursor:pointer;font-family:inherit}
.btn-ghost{background:#fff;color:var(--pri);border:1px solid var(--line)!important}.btn-ghost:hover{background:#f1f6fe}
.btn-danger{background:#fff;color:#b3261e;border:1px solid #f3c6c2!important}.btn-danger:hover{background:#fdecea}
.btn-sm{padding:.32rem .85rem;font-size:.8rem;margin:0}
.field{display:block;margin-top:.9rem}.field>span{display:block;font-size:.82rem;color:var(--mut);margin-bottom:.25rem}
.inp{width:100%;padding:.6rem .8rem;border:1px solid var(--line);border-radius:12px;font:inherit;background:#fff;color:var(--ink)}
.inp:focus{outline:2px solid rgba(26,115,232,.3);border-color:var(--pri)}
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.8rem}
.chk{display:flex;align-items:center;gap:.5rem;font-size:.9rem;margin-top:.5rem}
.flash{padding:.8rem 1rem;border-radius:12px;margin-bottom:1rem}.flash.ok{background:#e6f4ea;color:#1e7a3a}.flash.er{background:#fdecea;color:#b3261e}
.bar{display:flex;gap:.8rem;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:1rem}
.tabs{display:flex;gap:.5rem;flex-wrap:wrap}.tabs a{padding:.35rem .95rem;border-radius:99px;border:1px solid var(--line);background:#fff;color:var(--ink);font-size:.85rem}
.tabs a.on{background:var(--pri);border-color:var(--pri);color:#fff}
.tw{overflow-x:auto}.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:.72rem;color:var(--mut);text-transform:uppercase;letter-spacing:.07em;padding:.7rem 1rem;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:.8rem 1rem;border-bottom:1px solid var(--line);vertical-align:middle}.tbl tr:last-child td{border-bottom:0}.tbl tr:hover td{background:#fafbfd}
.uc{display:flex;align-items:center;gap:.7rem;min-width:200px}.uc .avatar{width:38px;height:38px}.uc small{display:block;color:var(--mut)}
.chip.pending{background:#fef3c7;color:#92600a}.chip.rejected{background:#fdecea;color:#b3261e}.chip.admin{background:#e8f0fe;color:#1a56c4}.chip.user{background:#eef0f4;color:#555}
.acts{display:flex;gap:.4rem;flex-wrap:wrap}.acts form{display:inline}
.mt{display:flex;gap:1rem;align-items:center;padding:.9rem 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.mt:last-child{border:0}
.dtb{width:56px;text-align:center;border-radius:14px;background:#e8f0fe;color:#1a56c4;padding:.4rem 0;flex:none}.dtb b{display:block;font-size:1.3rem;line-height:1.1}.dtb small{font-size:.7rem;text-transform:uppercase}
.mt .info{flex:1;min-width:200px}.mt .info small{color:var(--mut);display:block}
.tile.soon{border-style:dashed;background:transparent;box-shadow:none;color:var(--mut)}.tile.soon:hover{transform:none;box-shadow:none}
body.plain{min-height:100vh;display:grid;place-items:center;padding:1rem;background:radial-gradient(circle at 15% 10%,#dbe7ff,transparent 50%),radial-gradient(circle at 90% 90%,#fde2e0,transparent 45%),var(--bg)}
.center-card{max-width:440px;width:100%;text-align:center;padding:2.4rem}.center-card h2{margin:1rem 0 .4rem}
.content.wide{max-width:none}

/* ===== Kalender ===== */
.gcal{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1.2rem;height:calc(100vh - 150px);min-height:600px}
.gc-side{display:flex;flex-direction:column;gap:1.2rem;overflow:auto}
.gc-create{display:inline-flex;align-items:center;gap:.6rem;align-self:flex-start;border:0;cursor:pointer;font:inherit;font-weight:600;background:#fff;color:var(--ink);border-radius:999px;padding:.9rem 1.4rem;box-shadow:0 2px 8px rgba(60,64,67,.3),0 1px 3px rgba(60,64,67,.15)}
.gc-create:hover{background:#f6f8fc;box-shadow:0 4px 14px rgba(60,64,67,.3)}
.gc-create b{font-size:1.4rem;line-height:1;background:linear-gradient(135deg,#4285f4,#ea4335,#fbbc04,#34a853);-webkit-background-clip:text;background-clip:text;color:transparent}
.gc-main{display:flex;flex-direction:column;min-width:0;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden}
.gc-bar{display:flex;align-items:center;gap:.6rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);flex-wrap:wrap;position:relative}
.gc-bar.busy::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:linear-gradient(90deg,var(--b),var(--r),var(--y),var(--g),var(--b));background-size:200%;animation:gcb 1s linear infinite}
@keyframes gcb{to{background-position:200% 0}}
.gc-bar h2{margin:0 .4rem;font-size:1.25rem;font-weight:500}
.gcb{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.4rem .9rem;cursor:pointer;font:inherit;font-size:.9rem;color:var(--ink)}.gcb:hover{background:#f1f3f4}
.gcb.ic{width:36px;height:36px;padding:0;display:grid;place-items:center;font-size:1.1rem}.gc-m{display:none}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.seg button{border:0;background:#fff;padding:.4rem .9rem;cursor:pointer;font:inherit;font-size:.88rem}.seg button.on{background:#e8f0fe;color:#1a56c4;font-weight:600}
.sp{flex:1}
.gc-body{flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column}
.mini{padding:0 .3rem}.mn-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:.4rem}.mn-h b{font-size:.92rem;font-weight:600}
.mn-h button{border:0;background:none;cursor:pointer;font-size:1.1rem;width:28px;height:28px;border-radius:50%}.mn-h button:hover{background:#eceff3}
.mn-g{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;text-align:center}.mn-g small{color:var(--mut);font-size:.7rem;padding:.2rem 0}
.mn-g a{cursor:pointer;color:var(--ink);font-size:.78rem;line-height:28px;height:28px;border-radius:50%}.mn-g a:hover{background:#eceff3}
.mn-g a.oth{color:#9aa0a6}.mn-g a.today{background:var(--pri);color:#fff}.mn-g a.sel:not(.today){background:#e8f0fe;color:#1a56c4;font-weight:600}
.mo{display:flex;flex-direction:column;flex:1;min-height:0}
.mo-h{display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-size:.75rem;color:var(--mut);padding:.4rem 0;border-bottom:1px solid var(--line)}
.mo-g{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(6,minmax(96px,1fr));flex:1}
.mo-d{border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:.2rem .25rem;overflow:hidden;cursor:pointer;min-width:0}
.mo-d:nth-child(7n){border-right:0}.mo-d:hover{background:#fafbfd}
.dn{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:50%;font-size:.78rem;color:var(--ink);cursor:pointer}
.mo-d.oth .dn{color:#9aa0a6}.mo-d.today .dn{background:var(--pri);color:#fff;font-weight:700}
.ch{display:block;font-size:.76rem;padding:1px 6px;border-radius:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;margin:1px 0}
.ch:hover{background:#eef2f9}.ch i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px}.ch .tm{color:var(--mut)}
.ch.all{color:#fff}.ch.all:hover{filter:brightness(.92)}
.more{display:block;font-size:.74rem;color:var(--mut);padding:1px 6px;cursor:pointer}
.wv{display:flex;flex-direction:column;flex:1;min-height:0}
.wv-h,.wv-ad{display:grid;grid-template-columns:56px repeat(var(--n,7),1fr);flex:none}
.wv-h{border-bottom:1px solid var(--line)}
.wh{text-align:center;padding:.5rem 0;cursor:pointer;border-left:1px solid var(--line)}
.wh small{display:block;font-size:.7rem;color:var(--mut);text-transform:uppercase}
.wh b{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;font-size:1.3rem;font-weight:400}
.wh.today small{color:var(--pri)}.wh.today b{background:var(--pri);color:#fff}
.wv-ad{border-bottom:1px solid var(--line);min-height:26px}.wv-ad .gt{font-size:.65rem;color:var(--mut);padding:.4rem .3rem;text-align:right}
.ad{border-left:1px solid var(--line);padding:2px;min-width:0}
.wv-sc{flex:1;min-height:0;overflow:auto}.wv-g{display:grid;grid-template-columns:56px repeat(var(--n,7),1fr);position:relative}
.hrs .hr{height:48px;font-size:.68rem;color:var(--mut);text-align:right;padding-right:.5rem;transform:translateY(-.55em)}
.col{position:relative;border-left:1px solid var(--line);height:1152px;min-width:0;background:repeating-linear-gradient(to bottom,transparent 0,transparent 47px,var(--line) 47px,var(--line) 48px)}
.ev{position:absolute;border-radius:8px;color:#fff;padding:2px 6px;font-size:.74rem;overflow:hidden;cursor:pointer;border:1px solid #fff;line-height:1.25}
.ev b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ev span{opacity:.9}.ev:hover{filter:brightness(.92);z-index:3}
.nowl{position:absolute;left:0;right:0;height:2px;background:#ea4335;z-index:2;pointer-events:none}
.nowl::before{content:"";position:absolute;left:-5px;top:-4px;width:10px;height:10px;border-radius:50%;background:#ea4335}
.ag{padding:.5rem 1rem}.ag-d{display:flex;gap:1.2rem;padding:.8rem 0;border-bottom:1px solid var(--line)}
.ag-dt{width:92px;flex:none;display:flex;align-items:center;gap:.5rem}
.ag-dt b{font-size:1.5rem;font-weight:400;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%}.ag-dt.today b{background:var(--pri);color:#fff}
.ag-dt span{font-size:.68rem;color:var(--mut);line-height:1.2}.ag-l{flex:1;min-width:0}
.ag-e{display:flex;align-items:center;gap:.8rem;padding:.45rem .5rem;border-radius:8px;cursor:pointer}.ag-e:hover{background:#f3f6fb}
.ag-e .tmr{width:130px;flex:none;font-size:.82rem;color:var(--mut)}.ag-e i{width:10px;height:10px;border-radius:50%;flex:none}.ag-e small{color:var(--mut);margin-left:.5rem}
.pop{position:fixed;z-index:60;width:340px;max-width:calc(100vw - 16px);background:#fff;border-radius:16px;box-shadow:0 12px 40px rgba(16,24,40,.28);padding:1rem 1.1rem}
.pop[hidden],.modal[hidden],.gtoast[hidden]{display:none}
.pp-top{display:flex;justify-content:flex-end;gap:.2rem;margin:-.3rem -.4rem .2rem}
.pp-top button{border:0;background:none;cursor:pointer;width:34px;height:34px;border-radius:50%;font-size:1rem}.pp-top button:hover{background:#eceff3}
.pp-t{display:flex;gap:.8rem}.pp-t>i{width:14px;height:14px;border-radius:4px;margin-top:.35rem;flex:none}
.pp-t b{font-size:1.15rem;font-weight:500;line-height:1.3}.pp-t small{display:block;color:var(--mut)}
.pp-r{display:flex;gap:.7rem;margin-top:.7rem;font-size:.88rem;color:#3c4043}.pp-r>span:first-child{width:18px;text-align:center;flex:none}
.pp-meet{display:inline-block;margin-top:.8rem;background:var(--pri);color:#fff;padding:.45rem 1rem;border-radius:999px;font-weight:600;font-size:.85rem}
.gst{display:flex;gap:.4rem;align-items:center;font-size:.82rem;margin:2px 0}.gst em{font-style:normal;font-size:.7rem;color:var(--mut)}
.rsvp{display:flex;gap:.4rem;margin-top:.8rem;align-items:center;font-size:.85rem}
.rsvp button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:.25rem .8rem;cursor:pointer;font:inherit;font-size:.82rem}.rsvp button.on{background:#e8f0fe;border-color:var(--pri);color:#1a56c4}
.modal{position:fixed;inset:0;z-index:70;background:rgba(8,20,49,.45);display:grid;place-items:center;padding:1rem;overflow:auto}
.mbox{background:#fff;border-radius:20px;width:100%;max-width:560px;max-height:calc(100vh - 2rem);overflow:auto;padding:1.4rem 1.5rem;box-shadow:0 20px 60px rgba(16,24,40,.35)}.mbox.sm{max-width:400px}.mbox h3{margin:0 0 .5rem}
.ttl{font-size:1.3rem;border:0;border-bottom:2px solid var(--line);border-radius:0;padding:.5rem 0}.ttl:focus{outline:0;border-color:var(--pri)}
.dtr{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.dtr .inp{width:auto;flex:1;min-width:130px}.dtr .inp.tm{min-width:100px}
.sw{display:flex;gap:.45rem;flex-wrap:wrap}.sw label{cursor:pointer}.sw input{display:none}
.sw span{display:block;width:24px;height:24px;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 1px var(--line)}.sw input:checked+span{box-shadow:0 0 0 2px var(--ink)}
.mact{display:flex;justify-content:flex-end;gap:.6rem;margin-top:1.2rem}
.gtoast{position:fixed;left:50%;bottom:1.5rem;transform:translateX(-50%);background:#202124;color:#fff;padding:.7rem 1.2rem;border-radius:10px;z-index:90;font-size:.9rem;box-shadow:0 8px 24px rgba(0,0,0,.3)}
@media(max-width:880px){.gcal{grid-template-columns:1fr;height:auto}.gc-side{display:none}.gc-m{display:inline-block}.gc-body{min-height:70vh}.mo-g{grid-template-rows:repeat(6,minmax(70px,1fr))}.ag-e .tmr{width:90px}.ag-dt{width:70px}}

/* ===== Halaman legal publik (Kebijakan Privasi / Syarat Layanan) ===== */
.lp-wrap{position:relative;z-index:1;max-width:1120px;margin:0 auto;padding:calc(.9rem + env(safe-area-inset-top)) 1.6rem calc(1.2rem + env(safe-area-inset-bottom));min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.lp-nav{position:sticky;top:.8rem;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem .8rem .65rem 1rem;border-radius:22px;
  background:rgba(12,26,66,.55);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 10px 30px rgba(2,8,30,.3)}
.lp-brand{display:flex;align-items:center;gap:.7rem;color:#fff;min-width:0}
.lp-brand span{min-width:0}.lp-brand b{display:block;font-size:1rem;line-height:1.2}.lp-brand small{display:block;opacity:.65;font-size:.74rem}
.lp-nav-r{display:flex;align-items:center;gap:.55rem;flex:none}
.lp-nav .lg-lang{position:static}
.lp-btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 1.15rem;border-radius:999px;font-weight:600;font-size:.9rem;white-space:nowrap;transition:.18s;color:#fff}
.lp-btn.ghost{border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.06)}.lp-btn.ghost:hover{background:rgba(255,255,255,.16)}
.lp-btn.solid{background:linear-gradient(135deg,#4285f4,#2563eb);box-shadow:0 8px 20px rgba(37,99,235,.45)}
.lp-btn.solid:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(37,99,235,.55)}
.lp-btn.light{background:#fff;color:#16347f}.lp-btn.light:hover{transform:translateY(-1px)}

.lp-hero{padding:3.2rem 0 1.2rem}
.lp-hero h1{font-size:clamp(2rem,4.8vw,3.3rem);line-height:1.1;letter-spacing:-.02em;margin:1rem 0 .6rem;font-weight:700;text-wrap:balance}
.lp-meta{margin:0 0 1.3rem;color:rgba(255,255,255,.7);font-size:.95rem}.lp-meta b{color:#fff;font-weight:600}
.lp-tabs{display:inline-flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);backdrop-filter:blur(8px)}
.lp-tabs a{padding:.6rem 1.25rem;border-radius:999px;color:rgba(255,255,255,.8);font-weight:600;font-size:.92rem;transition:.2s}
.lp-tabs a:hover{color:#fff}.lp-tabs a.on{background:#fff;color:#16347f;box-shadow:0 2px 8px rgba(0,0,0,.2)}

.lp-grid{display:grid;grid-template-columns:250px minmax(0,1fr);gap:1.6rem;align-items:start;flex:1;margin-top:1.2rem}
.lp-toc{position:sticky;top:5.8rem;padding:1.1rem .9rem;border-radius:22px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(12px)}
.lp-toc h4{margin:0 0 .6rem .6rem;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.6)}
.lp-toc a{display:block;padding:.45rem .65rem;border-radius:11px;color:rgba(255,255,255,.82);font-size:.86rem;line-height:1.35;transition:.15s}
.lp-toc a:hover{background:rgba(255,255,255,.12);color:#fff}.lp-toc a.on{background:rgba(255,255,255,.18);color:#fff;font-weight:600}
.lp-card{background:#fff;color:var(--ink);border-radius:28px;padding:2.3rem 2.5rem;box-shadow:0 30px 70px rgba(2,8,30,.5),0 0 0 1px rgba(255,255,255,.4) inset;min-width:0}

.lp-prose{font-size:1rem;overflow-wrap:anywhere}
.lp-prose h2{font-size:1.28rem;line-height:1.3;margin:2.1rem 0 .6rem;letter-spacing:-.01em;color:#0d1f4d;scroll-margin-top:6.2rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.lp-prose>h2:first-child{margin-top:0;padding-top:0;border-top:0}
.lp-prose h3{font-size:1.08rem;margin:1.5rem 0 .4rem;color:#16347f}.lp-prose h4{font-size:.98rem;margin:1.2rem 0 .3rem;color:#16347f}
.lp-prose p,.lp-prose li{color:#3b4254;line-height:1.75}
.lp-prose p{margin:.6rem 0}.lp-prose ul,.lp-prose ol{margin:.6rem 0;padding-left:1.35rem}.lp-prose li{margin:.3rem 0}.lp-prose li::marker{color:var(--b)}
.lp-prose a{color:var(--pri);text-decoration:underline;text-underline-offset:3px}
.lp-prose strong{color:#1f2433}
.lp-prose blockquote{margin:1rem 0;padding:.8rem 1.1rem;border-left:4px solid var(--b);background:#f3f7ff;border-radius:0 14px 14px 0}.lp-prose blockquote p{margin:.2rem 0}
.lp-prose hr{border:0;border-top:1px solid var(--line);margin:1.6rem 0}
.lp-prose code{background:#eef1f7;padding:.1rem .4rem;border-radius:6px;font-size:.9em}

.lp-cta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:2.2rem;padding:1.3rem 1.5rem;border-radius:22px;color:#fff;
  background:linear-gradient(135deg,#0d1f4d,#1c3f9a);box-shadow:0 14px 30px rgba(13,31,77,.35)}
.lp-cta b{display:block;font-size:1.1rem}.lp-cta span{display:block;font-size:.9rem;opacity:.8;margin-top:.15rem}
.lp-cta-b{display:flex;gap:.55rem}
.lp-foot{margin-top:1.6rem}

@media(max-width:860px){
  .lp-grid{grid-template-columns:minmax(0,1fr)}.lp-toc{display:none}
  .lp-hero{padding-top:2.2rem}
  .lp-card{border-radius:24px;padding:1.5rem 1.3rem}
}
@media(max-width:560px){
  .lp-wrap{padding-left:1rem;padding-right:1rem}
  .lp-brand span{display:none}
  .lp-nav{padding:.55rem .6rem .55rem .7rem;border-radius:20px}
  .lp-nav-r{gap:.4rem}.lp-btn{min-height:38px;padding:0 .9rem;font-size:.85rem}
  .lp-nav .lg-lang a,.lp-nav .lg-lang b{min-width:34px;padding:.38rem .5rem}
  .lp-tabs{display:flex}.lp-tabs a{flex:1;text-align:center;padding:.6rem .4rem;font-size:.86rem}
  .lp-cta{padding:1.1rem}.lp-cta-b{width:100%}.lp-cta-b .lp-btn{flex:1}
}
@media(max-width:380px){.lp-nav .lg-lang{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}.lp-btn,.lp-toc a,.lp-tabs a{transition:none!important}}