:root{
    --b1:#264284;--b2:#246DA9;--b3:#2198CE;--cy:#1FC3F3;
    --bg:#F1ECE0;--bg2:#FBFAF4;--ink:#0B1430;--ink2:#060E25;--muted:#6A7894;
    --line:rgba(38,66,132,.14);--grad:linear-gradient(135deg,#264284,#1FC3F3);
    --f-h:'Play',sans-serif;--f-b:'Plus Jakarta Sans',sans-serif;--ease:cubic-bezier(.16,1,.3,1);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  /* theme toggle: new theme dissolves out from the toggle corner (JS-driven) */
  html.theme-anim::view-transition-old(root),
  html.theme-anim::view-transition-new(root){animation:none;mix-blend-mode:normal}
  html.theme-anim::view-transition-old(root){z-index:1}
  html.theme-anim::view-transition-new(root){z-index:9999}
  html,body{height:100%}
  body{font-family:var(--f-b);background:var(--bg);color:var(--ink);overflow:hidden}

  .stage{display:grid;grid-template-columns:44% 56%;height:100vh;width:100vw}

  /* ===== LEFT — VIDEO ===== */
  /* left bg = same cream as right; video dissolves into it via mask → seamless */
  .left{position:relative;overflow:hidden;background:var(--bg)}
  .leftmedia{position:absolute;inset:0;z-index:0;overflow:hidden;
    -webkit-mask-image:linear-gradient(to right,#000 0%,#000 86%,transparent 100%);
    mask-image:linear-gradient(to right,#000 0%,#000 86%,transparent 100%)}
  .bgvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
  #fxcanvas{position:absolute;inset:0;z-index:1;width:100%;height:100%}
  .tint{position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:soft-light;
    background:linear-gradient(135deg,rgba(36,67,132,.45),rgba(31,195,243,.22))}
  .vignette{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(3,9,26,.35) 0%,transparent 28%,transparent 62%,rgba(3,9,26,.45) 100%)}
  /* tech grid overlay + centered logo on the video */
  .techgrid{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.72;
    background-image:linear-gradient(rgba(31,195,243,.20) 1px,transparent 1px),linear-gradient(90deg,rgba(31,195,243,.20) 1px,transparent 1px);
    background-size:44px 44px;
    -webkit-mask-image:radial-gradient(ellipse 82% 84% at 50% 46%,#000 0%,transparent 80%);
    mask-image:radial-gradient(ellipse 82% 84% at 50% 46%,#000 0%,transparent 80%)}
  .vlogo{position:absolute;top:46%;left:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;
    width:clamp(210px,46%,460px);opacity:.2;filter:drop-shadow(0 2px 16px rgba(0,0,0,.45))}
  .brand{position:absolute;top:26px;left:30px;z-index:6;display:flex;align-items:center}
  .brand img{height:46px;width:auto;display:block;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
  /* floating scroll cue — vertical pill w/ travelling dot (mobile only) */
  .scrolldown{position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:7;display:none;
    width:30px;height:54px;border-radius:99px;align-items:flex-start;justify-content:center;padding-top:9px;cursor:pointer;
    background:rgba(255,255,255,.10);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1.5px solid rgba(255,255,255,.6);box-shadow:0 6px 24px rgba(0,0,0,.35);transition:transform .3s var(--ease)}
  .scrolldown:hover{transform:translateX(-50%) scale(1.08)}
  .scrolldown .dot{width:5px;height:5px;border-radius:50%;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.85);
    animation:scrolldot 1.7s cubic-bezier(.4,0,.2,1) infinite}
  @keyframes scrolldot{0%{opacity:0;transform:translateY(0)}20%{opacity:1}70%{opacity:1}92%{opacity:0;transform:translateY(24px)}100%{opacity:0;transform:translateY(24px)}}

  /* ===== RIGHT — BENTO ===== */
  .right{position:relative;overflow:hidden;
    background:radial-gradient(130% 90% at 90% 2%,rgba(31,140,206,.07),transparent 55%),var(--bg)}
  .right::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:150px}
  .rcol{position:relative;z-index:2;display:flex;flex-direction:column;height:100%;padding:30px 38px;gap:14px}

  .head{font-family:var(--f-h);font-size:clamp(24px,3vw,42px);line-height:1.02;color:var(--ink2);letter-spacing:-.5px}
  .head .cy{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .subh{font-size:13px;letter-spacing:.22em;text-transform:uppercase;color:var(--b2);font-weight:700;margin-top:10px;opacity:0;transform:translateY(14px)}
  .ch{display:inline-block;will-change:transform,opacity}

  .bento{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(5,1fr);gap:11px;flex:1;min-height:0}
  .tile{position:relative;border-radius:16px;background:var(--bg2);border:1px solid var(--line);padding:13px;overflow:hidden;cursor:pointer;
    display:flex;flex-direction:column;justify-content:space-between;box-shadow:0 10px 26px rgba(20,32,80,.06);
    transition:transform .4s var(--ease),box-shadow .4s,border-color .3s;will-change:transform}
  .tile:hover{transform:translateY(-4px) scale(1.012);box-shadow:0 22px 50px rgba(20,32,80,.16);border-color:rgba(28,111,168,.4);z-index:2}
  .tile .ic{width:34px;height:34px;border-radius:9px;background:#eef2fb;display:flex;align-items:center;justify-content:center;color:var(--b2);transition:transform .4s var(--ease)}
  .tile:hover .ic{transform:translateY(-2px) rotate(-6deg)}
  .tile .ic svg{width:18px;height:18px}
  .tile h4{font-size:13px;font-weight:700;color:var(--ink2);line-height:1.15}
  .tile p{font-size:10.5px;color:var(--muted);margin-top:2px}
  .tile .arr{position:absolute;top:13px;right:13px;color:var(--muted);opacity:0;transform:translate(-4px,4px);transition:.35s var(--ease)}
  .tile:hover .arr{opacity:.8;transform:none}.tile .arr svg{width:15px;height:15px}
  .tile .shine{position:absolute;inset:0;opacity:0;transition:opacity .3s;pointer-events:none;z-index:1;
    background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(31,195,243,.16),transparent 60%)}
  .tile:hover .shine{opacity:1}
  .tile>*{position:relative;z-index:1}

  .t-event{grid-column:1/3;grid-row:1/3}.t-ip{grid-column:3/5;grid-row:1/2}
  .t-club{grid-column:3/4;grid-row:2/4}.t-id{grid-column:4/5;grid-row:2/3}
  .t-fis{grid-column:4/5;grid-row:3/4}.t-pec{grid-column:1/3;grid-row:3/4}
  .t-ttg{grid-column:1/2;grid-row:4/5}.t-kp{grid-column:2/3;grid-row:4/5}
  .t-mk{grid-column:3/4;grid-row:4/5}.t-par{grid-column:4/5;grid-row:4/5}
  .t-mgmt{grid-column:1/3;grid-row:5/6}

  .tile.event{background:var(--grad);border:none;color:#fff;border-radius:22px}
  .tile.event .ic{background:rgba(255,255,255,.18);color:#fff;width:40px;height:40px}.tile.event .ic svg{width:21px;height:21px}
  .tile.event h4{color:#fff;font-family:var(--f-h);font-size:26px}.tile.event p{color:rgba(255,255,255,.88);font-size:12px}
  .tile.event .big{font-size:11px;letter-spacing:.18em;text-transform:uppercase;opacity:.9}
  .tile.event::after{content:"";position:absolute;width:180px;height:180px;right:-50px;bottom:-60px;border-radius:50%;border:1.5px solid rgba(255,255,255,.18)}
  .tile.dark{background:var(--ink2);border:none}
  .tile.dark h4{color:#fff}.tile.dark p{color:rgba(238,244,255,.6)}.tile.dark .ic{background:rgba(31,195,243,.16);color:var(--cy)}.tile.dark .arr{color:rgba(255,255,255,.5)}
  .tile.img{border:none}
  .tile.img .bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
  .tile.img:hover .bg{transform:scale(1.08)}
  .tile.img::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(160deg,rgba(6,14,37,.25),rgba(6,14,37,.82))}
  .tile.img h4{color:#fff}.tile.img p{color:rgba(238,244,255,.78)}.tile.img .ic{background:rgba(255,255,255,.16);color:#fff}
  .tile.club{justify-content:flex-end}
  .tile.club .neon{font-family:var(--f-h);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cy);text-shadow:0 0 10px rgba(31,195,243,.6);margin-top:6px}
  .tile.edu{background:linear-gradient(135deg,#eaf3fb,#fbfaf4);border-color:rgba(31,140,206,.25)}.tile.edu .ic{background:#fff;color:var(--b1)}
  .tile.glass{background:linear-gradient(135deg,rgba(31,195,243,.14),rgba(36,67,132,.08));border-color:rgba(31,140,206,.3)}

  /* ===== PARTNERS (in right panel only, logos) ===== */
  .partners{display:flex;align-items:center;gap:16px;padding-top:10px}
  .ptitle{flex-shrink:0;font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);white-space:nowrap;display:flex;align-items:center;gap:8px}
  .ptitle::before{content:"";width:16px;height:2px;background:var(--grad)}
  .marquee{position:relative;flex:1;overflow:hidden;height:34px;display:flex;align-items:center;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 90%,transparent)}
  .mtrack{display:flex;align-items:center;gap:40px;width:max-content;animation:marq 26s linear infinite}
  @keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
  .plogo{height:30px;width:auto;object-fit:contain;opacity:.82;transition:opacity .3s,transform .3s var(--ease)}
  .plogo:hover{opacity:1;transform:translateY(-2px)}

  /* ===== FLIP-TO-PAGE overlay ===== */
  #page{position:fixed;inset:0;z-index:70;display:none;flex-direction:column;background:var(--bg2);padding:48px clamp(28px,6vw,90px)}
  #page.on{display:flex}
  #pageBack{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:13px;color:var(--b2);
    border:1px solid var(--line);border-radius:99px;padding:9px 18px;background:var(--bg);cursor:pointer;opacity:0}
  #pageBack svg{width:16px;height:16px}
  #pageInner{margin:auto 0;opacity:0}
  #pageEy{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--b2);font-weight:700}
  #pageTitle{font-family:var(--f-h);font-size:clamp(40px,9vw,120px);line-height:.95;color:var(--ink2);margin-top:12px;letter-spacing:-1px}
  #pageNote{margin-top:18px;color:var(--muted);max-width:50ch;font-size:15px}
  .flipclone{position:fixed;z-index:80;margin:0;border-radius:16px;overflow:hidden;pointer-events:none}

  /* ============ MOBILE ============ */
  @media (max-width:820px){
    body{overflow-x:hidden;overflow-y:auto}
    .stage{display:flex;flex-direction:column;height:auto;min-height:100svh}
    /* video = FULL SCREEN hero; subtle bottom dissolve + floating scroll cue */
    .left{flex:none;width:100%;height:100svh}
    .leftmedia{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%);
      mask-image:linear-gradient(to bottom,#000 0%,#000 86%,transparent 100%)}
    .scrolldown{display:flex}
    .brand{top:24px;left:24px}.brand img{height:44px}
    .right{height:auto}
    .rcol{height:auto;padding:22px 20px 38px;gap:18px}
    .head{font-size:clamp(28px,8.5vw,38px)}
    .subh{font-size:12px;margin-top:8px}
    /* bento: bold big↔small mosaic (event huge, two tall, three wide, rest small) */
    .bento{grid-template-columns:repeat(2,1fr);grid-template-rows:none;grid-auto-rows:86px;grid-auto-flow:dense;gap:10px}
    .bento .tile{grid-column:auto;grid-row:auto}
    .bento .t-event{grid-column:span 2;grid-row:span 2}     /* huge */
    .bento .t-club,.bento .t-mk{grid-row:span 2}            /* two tall accents */
    .bento .t-ip,.bento .t-pec,.bento .t-mgmt{grid-column:span 2}  /* three wide */
    .tile.event h4{font-size:24px}
    .partners{flex-wrap:wrap;gap:10px 14px}
    .ptitle{font-size:10px}
    .marquee{flex-basis:100%;height:30px}
    .plogo{height:24px}
  }
  @media (max-width:420px){
    .bento{grid-auto-rows:78px}
    .head{font-size:26px}
  }

  /* ===== screen-reader-only (SEO/GEO text) ===== */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

  /* ===== theme toggle button ===== */
  .theme-toggle{position:fixed;top:22px;right:22px;z-index:90;width:42px;height:42px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink2);
    background:color-mix(in srgb,var(--bg2) 80%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
    border:1px solid var(--line);box-shadow:0 6px 20px rgba(0,0,0,.18);transition:transform .3s var(--ease),box-shadow .3s}
  .theme-toggle:hover{transform:rotate(-15deg) scale(1.07)}
  .theme-toggle svg{width:19px;height:19px}
  /* bulb: light theme = mati (abu, garis hilang), dark = nyala (kuning + garis) */
  .theme-toggle .bulb{color:var(--muted);transition:color .5s var(--ease)}
  .theme-toggle .rays{opacity:0;transition:opacity .5s var(--ease)}
  .theme-toggle .glass{fill:none;transition:fill .5s var(--ease)}
  [data-theme="dark"] .theme-toggle .bulb{color:#F4B400}
  [data-theme="dark"] .theme-toggle .rays{opacity:1}
  [data-theme="dark"] .theme-toggle .glass{fill:rgba(244,180,0,.2)}

  /* ============ DARK THEME ============ */
  [data-theme="dark"]{
    --bg:#070E22; --bg2:#0E1A35; --ink:#C9D4E8; --ink2:#EEF4FF; --muted:#7C8DAE;
    --line:rgba(120,170,230,.14);
  }
  [data-theme="dark"] .right{background:radial-gradient(130% 90% at 90% 2%,rgba(31,140,206,.14),transparent 55%),var(--bg)}
  [data-theme="dark"] .right::after{mix-blend-mode:screen;opacity:.06}
  [data-theme="dark"] .tile{box-shadow:0 10px 26px rgba(0,0,0,.35)}
  [data-theme="dark"] .tile:hover{box-shadow:0 22px 50px rgba(0,0,0,.55);border-color:rgba(31,195,243,.45)}
  [data-theme="dark"] .tile .ic{background:rgba(31,195,243,.13);color:var(--cy)}
  [data-theme="dark"] .tile.dark{background:#0B1736}
  [data-theme="dark"] .tile.edu{background:linear-gradient(135deg,#12274d,#0E1A35);border-color:rgba(31,140,206,.3)}
  [data-theme="dark"] .tile.edu .ic{background:rgba(31,195,243,.13);color:var(--cy)}
  [data-theme="dark"] #page{background:var(--bg2)}
  [data-theme="dark"] .plogo{filter:brightness(0) invert(1);opacity:.72}
  [data-theme="dark"] .plogo:hover{opacity:1}