/* Skip link — aksesibilitas keyboard */
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--neon);color:#101010;padding:10px 16px;
  font-family:var(--mono);font-weight:700;font-size:13px;
  text-decoration:none;clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)
}
.skip-link:focus{
  left:max(12px, env(safe-area-inset-left,0px));
  top:max(12px, env(safe-area-inset-top,0px));
  outline:2px solid var(--txt);outline-offset:2px
}

/* TKJ SMKS YASMIDA — Microsite Styles (cleaned) */

*{margin:0;padding:0;box-sizing:border-box}
img{max-width:100%;height:auto}
:root{
  color-scheme:light;
  --page-gutter:14px;
  --page-gutter-sm:10px;
  /* ===== BRAND TKJ SMKS YASMIDA: #FECE02 / #101010 / #FFFFFF ===== */
  --bg:#FFFFFF; --panel:#FFFFFF; --panel2:#F5F6F8;
  --line:#EAECEF; --line2:#DBE0E6;
  --txt:#101010; --dim:#66707B; --dim2:#39434E;
  --neon:#FECE02;
  --acc:#8A6D00;
  --mono-acc:#101010;
  --gray-acc:#7E8894;
  --ink:#101010; --ink-fg:#FECE02;
  --tagc:#101010;
  --gridc:rgba(16,16,16,.05);
  --scan:rgba(16,16,16,.035);
  --hov:rgba(16,16,16,.035);
  --shim:rgba(254,206,2,.16);
  --stripes:rgba(254,206,2,.10);
  --backdrop:rgba(16,16,16,.55);
  --shadow:0 10px 30px rgba(16,16,16,.10);
  --shadow-sm:0 1px 3px rgba(16,16,16,.06);
  --toast-bg:#FFFFFF;
  --ring2:#C6CCD4;
  --heart:#8A6D00;
  --gA:#FECE02; --gB:#98A2AC;
  --glow1:#FECE02; --glow1o:.30;
  --glow2:#FFDE4D; --glow2o:.16;
  --glow3:#101010; --glow3o:.05;
  --bio-bc:#101010; --hl:#FECE02;
  --mono:'JetBrains Mono',monospace; --disp:'Rajdhani',sans-serif;
  --cut:10px;
  --cut-sm:7px;
  --cut-xs:5px;
  --box-clip:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  --box-clip-sm:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
  --box-clip-xs:polygon(var(--cut-xs) 0,100% 0,100% calc(100% - var(--cut-xs)),calc(100% - var(--cut-xs)) 100%,0 100%,0 var(--cut-xs));
}

html[data-theme="dark"]{
  color-scheme:dark;
  --bg:#101010; --panel:#161616; --panel2:#1C1C1C;
  --line:#242424; --line2:#343434;
  --txt:#F2F2F2; --dim:#8E969E; --dim2:#C9CED3;
  --acc:#FECE02; --mono-acc:#EDEDED; --gray-acc:#8E969E;
  --ink:#0D0D0D; --ink-fg:#FECE02;
  --tagc:#FECE02;
  --gridc:rgba(254,206,2,.05);
  --scan:rgba(254,206,2,.025);
  --hov:rgba(255,255,255,.04);
  --shim:rgba(254,206,2,.08);
  --stripes:rgba(254,206,2,.06);
  --backdrop:rgba(0,0,0,.78);
  --shadow:0 10px 30px rgba(0,0,0,.5);
  --shadow-sm:none;
  --toast-bg:#151515;
  --ring2:#3A3A3A;
  --heart:#FECE02;
  --gB:#5A626A;
  --glow1:#FECE02; --glow1o:.13;
  --glow2:#FECE02; --glow2o:.09;
  --glow3:#FECE02; --glow3o:.06;
  --bio-bc:#F2F2F2; --hl:rgba(254,206,2,.32);
}
html[data-theme="cyberpunk"]{
  color-scheme:dark;
  --bg:#0a0612; --panel:#120a1c; --panel2:#1a1028;
  --line:#2a1840; --line2:#3d2460;
  --txt:#f5ecff; --dim:#c4a8e0; --dim2:#e8d4ff;
  --neon:#ff2bd6; --acc:#00f0ff;
  --mono-acc:#e8d5ff; --gray-acc:#8a70a8;
  --ink:#0a0612; --ink-fg:#00f0ff;
  --tagc:#ff2bd6;
  --gridc:rgba(255,43,214,.06);
  --scan:rgba(0,240,255,.04);
  --hov:rgba(255,43,214,.08);
  --shim:rgba(255,43,214,.14);
  --stripes:rgba(0,240,255,.08);
  --backdrop:rgba(8,4,16,.82);
  --shadow:0 10px 30px rgba(255,43,214,.15);
  --shadow-sm:0 1px 4px rgba(0,240,255,.12);
  --toast-bg:#120a1c;
  --ring2:#3d2460;
  --heart:#ff2bd6;
  --gA:#ff2bd6; --gB:#00f0ff;
  --glow1:#ff2bd6; --glow1o:.22;
  --glow2:#00f0ff; --glow2o:.14;
  --glow3:#b24bff; --glow3o:.10;
  --bio-bc:#f0e6ff; --hl:rgba(255,43,214,.35);
}
html[data-theme="matrix"]{
  color-scheme:dark;
  --bg:#020804; --panel:#061208; --panel2:#0a1a0e;
  --line:#0d2818; --line2:#163822;
  --txt:#c8ffc8; --dim:#6dcc7a; --dim2:#9aeea8;
  --neon:#00ff41; --acc:#33ff66;
  --mono-acc:#c8ffc8; --gray-acc:#3d7a4a;
  --ink:#020804; --ink-fg:#00ff41;
  --tagc:#00ff41;
  --gridc:rgba(0,255,65,.05);
  --scan:rgba(0,255,65,.035);
  --hov:rgba(0,255,65,.07);
  --shim:rgba(0,255,65,.12);
  --stripes:rgba(0,255,65,.08);
  --backdrop:rgba(0,8,2,.85);
  --shadow:0 10px 30px rgba(0,255,65,.12);
  --shadow-sm:0 1px 3px rgba(0,255,65,.1);
  --toast-bg:#061208;
  --ring2:#163822;
  --heart:#00ff41;
  --gA:#00ff41; --gB:#1a5c28;
  --glow1:#00ff41; --glow1o:.18;
  --glow2:#33ff66; --glow2o:.10;
  --glow3:#00cc33; --glow3o:.08;
  --bio-bc:#b8ffb8; --hl:rgba(0,255,65,.3);
}

html[data-theme="goldtech"]{
  color-scheme:light;
  /* ===== GOLD TECH — full brand gold background #FECE02 ===== */
  --bg:#FECE02;
  --panel:#FFF8D6;
  --panel2:#FFE98A;
  --line:#E0B400;
  --line2:#C9A227;
  --txt:#101010;
  --dim:#5C4A10;
  --dim2:#3A2F08;
  --neon:#101010;
  --acc:#5C4A10;
  --mono-acc:#1A1408;
  --gray-acc:#7A6A30;
  --ink:#FECE02;
  --ink-fg:#101010;
  --tagc:#101010;
  --gridc:rgba(16,16,16,.08);
  --scan:rgba(16,16,16,.04);
  --hov:rgba(16,16,16,.08);
  --shim:rgba(16,16,16,.10);
  --stripes:rgba(16,16,16,.06);
  --backdrop:rgba(16,16,16,.55);
  --shadow:0 12px 32px rgba(16,16,16,.18);
  --shadow-sm:0 2px 8px rgba(16,16,16,.12);
  --toast-bg:#FFF8D6;
  --ring2:#C9A227;
  --heart:#101010;
  --gA:#101010;
  --gB:#5C4A10;
  --glow1:#FFFFFF; --glow1o:.35;
  --glow2:#FFF0A0; --glow2o:.40;
  --glow3:#C9A227; --glow3o:.25;
  --bio-bc:#101010;
  --hl:rgba(16,16,16,.20);
  --gold:#101010;
  --gold-bright:#3A2F08;
  --gold-deep:#5C4A10;
  --gold-dark:#8B6914;
  --bronze:#A67C2D;
  --steel:#E0B400;
}





body{min-height:100vh;min-height:100dvh;background:var(--bg);color:var(--txt);
  font-family:var(--mono);font-size:14px;line-height:1.7;
  padding:calc(72px + env(safe-area-inset-top,0px)) 0 calc(34px + env(safe-area-inset-bottom,0px)) 0;
  position:relative;overflow-x:hidden;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:background-color .35s ease,color .35s ease}
::selection{background:var(--neon);color:#000}

/* ===== SCROLLBAR (mengikuti tema) ===== */
html{
  scrollbar-width:thin;
  scrollbar-color:var(--neon) var(--panel2)
}
/* WebKit: Chrome, Edge, Safari */
*::-webkit-scrollbar{
  width:10px;
  height:10px
}
*::-webkit-scrollbar-track{
  background:var(--panel2);
  border-left:1px solid var(--line)
}
*::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--neon) 72%, var(--dim) 28%);
  border:2px solid var(--panel2);
  border-radius:0;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
  min-height:40px
}
*::-webkit-scrollbar-thumb:hover{
  background:var(--neon)
}
*::-webkit-scrollbar-thumb:active{
  background:var(--acc)
}
*::-webkit-scrollbar-corner{
  background:var(--panel2)
}
/* Tema khusus — glow lebih kuat di dark themes */
html[data-theme="dark"] *::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--neon) 55%, #3a3a3a 45%);
  box-shadow:0 0 6px color-mix(in srgb, var(--neon) 25%, transparent)
}
html[data-theme="dark"] *::-webkit-scrollbar-thumb:hover{
  background:var(--neon);
  box-shadow:0 0 10px color-mix(in srgb, var(--neon) 45%, transparent)
}
html[data-theme="cyberpunk"] *::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--neon) 60%, #2a1840 40%);
  box-shadow:0 0 8px color-mix(in srgb, var(--neon) 30%, transparent)
}
html[data-theme="cyberpunk"] *::-webkit-scrollbar-thumb:hover{
  background:var(--neon);
  box-shadow:0 0 12px color-mix(in srgb, var(--neon) 50%, transparent),
             0 0 4px color-mix(in srgb, var(--acc) 40%, transparent)
}
html[data-theme="matrix"] *::-webkit-scrollbar-thumb{
  background:color-mix(in srgb, var(--neon) 55%, #0d2818 45%);
  box-shadow:0 0 8px color-mix(in srgb, var(--neon) 35%, transparent)
}
html[data-theme="matrix"] *::-webkit-scrollbar-thumb:hover{
  background:var(--neon);
  box-shadow:0 0 14px color-mix(in srgb, var(--neon) 55%, transparent)
}



html[data-theme="goldtech"] *::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, #3A2F08, #101010, #5C4A10);
  box-shadow:0 0 6px rgba(16,16,16,.35);
}
html[data-theme="goldtech"] *::-webkit-scrollbar-thumb:hover{
  background:#101010;
  box-shadow:0 0 10px rgba(16,16,16,.45);
}

.bg-grid{position:fixed;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),
                   linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:44px 44px}
.glow{position:fixed;z-index:0;pointer-events:none;border-radius:50%;filter:blur(100px)}
.glow.g1{width:420px;height:420px;background:var(--glow1);opacity:var(--glow1o);top:-150px;left:-130px}
.glow.g2{width:400px;height:400px;background:var(--glow2);opacity:var(--glow2o);bottom:-140px;right:-120px}
.glow.g3{width:300px;height:300px;background:var(--glow3);opacity:var(--glow3o);top:38%;left:62%}
.scanlines{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}

/* ===== TOP NAVBAR ===== */
/* ===== TOP NAVBAR (profesional) ===== */
.topnav{
  position:fixed;top:0;left:0;right:0;z-index:55;
  height:calc(56px + env(safe-area-inset-top,0px));
  padding:env(safe-area-inset-top,0px) max(var(--page-gutter), env(safe-area-inset-right,0px)) 0 max(var(--page-gutter), env(safe-area-inset-left,0px));
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  column-gap:12px;
  background:color-mix(in srgb, var(--panel) 78%, transparent);
  backdrop-filter:blur(16px) saturate(1.25);
  -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border-bottom:1px solid color-mix(in srgb, var(--line2) 65%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--neon) 12%, transparent),
             0 8px 28px rgba(0,0,0,.06);
  transition:background .3s ease,border-color .3s ease,box-shadow .3s ease
}
html[data-theme="dark"] .topnav,
html[data-theme="cyberpunk"] .topnav,
html[data-theme="matrix"] .topnav{
  background:color-mix(in srgb, var(--panel) 72%, transparent);
  box-shadow:0 1px 0 color-mix(in srgb, var(--neon) 18%, transparent),
             0 8px 32px rgba(0,0,0,.4)
}

/* Brand / Logo */
.topnav-brand{
  display:inline-flex;align-items:center;
  height:40px;padding:6px 0;
  text-decoration:none;color:var(--txt);
  border-radius:0;justify-self:start;
  transition:opacity .2s;
  box-sizing:border-box;
}
.topnav-brand:hover{opacity:.8}
.topnav-brand:focus-visible{outline:none;box-shadow:0 0 0 2px var(--neon)}
.topnav-brand picture{
  display:flex;align-items:center;height:28px;line-height:0;
}
.topnav-brand img{
  height:28px;width:auto;max-width:140px;
  object-fit:contain;object-position:left center;display:block;
}
.topnav-fallback{
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;
  color:var(--txt);line-height:1
}

/* divider after logo removed for edge symmetry */


/* Utils — masing-masing kotak angular (clip-path) */
.topnav-utils{
  display:flex;align-items:center;justify-content:center;gap:6px;
  grid-column:2;
  padding:0;
  background:transparent;
  border:none;
  border-radius:0;
  box-shadow:none
}
.topnav-utils .util-box{
  width:38px;height:36px;min-height:36px;padding:0;
  border:1px solid var(--line2);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  color:var(--dim2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  cursor:pointer;flex-shrink:0;
  border-radius:0;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  box-shadow:var(--shadow-sm);
  transition:background .15s,color .15s,border-color .15s,transform .12s
}
.topnav-utils .util-box:hover,
.topnav-utils .util-box:focus-visible{
  background:var(--neon);color:#101010;border-color:var(--neon);outline:none
}
.topnav-utils .util-box:active{transform:scale(.95)}
.topnav-utils .util-box[aria-pressed="true"]{
  background:var(--shim);color:var(--acc);border-color:var(--neon)
}
.topnav-utils .util-box i{font-size:13px;line-height:1}
.topnav-utils .util-label{
  font-size:6.5px;font-weight:600;letter-spacing:.03em;line-height:1;
  text-transform:uppercase;font-family:var(--mono);opacity:.9
}

/* Kanan: tagline + tema */
.topnav-right{
  grid-column:3;
  display:flex;align-items:center;justify-content:flex-end;gap:10px;
  min-width:0
}
.topnav-tagline{
  display:flex;align-items:center;justify-content:flex-end;flex-shrink:1;
  height:40px;padding:6px 0;min-width:0;
  box-sizing:border-box;
}
.topnav-tagline picture{
  display:flex;align-items:center;height:28px;line-height:0;
}
.topnav-tagline img{
  height:28px;width:auto;max-width:140px;
  object-fit:contain;object-position:right center;display:block;
  opacity:.92;
}
html[data-theme="dark"] .topnav-tagline img,
html[data-theme="cyberpunk"] .topnav-tagline img,
html[data-theme="matrix"] .topnav-tagline img{opacity:1;filter:brightness(1.06)}

/* Theme toggle — di dalam topnav-utils, sejajar Cari / Isi / Baca */
.topnav-utils .theme-toggle{
  width:38px;height:36px;min-height:36px;padding:0;
  margin-left:0;
  border:1px solid var(--line2);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  color:var(--dim2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  border-radius:0;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  box-shadow:var(--shadow-sm);
  transition:background .15s,color .15s,border-color .15s,transform .12s
}
.topnav-utils .theme-toggle:hover,
.topnav-utils .theme-toggle:focus-visible{
  background:var(--neon);color:#101010;border-color:var(--neon);outline:none
}
.topnav-utils .theme-toggle:active{transform:scale(.95)}
.topnav-utils .theme-toggle i{font-size:13px;line-height:1}
.topnav-utils .theme-toggle .util-label{
  font-size:6.5px;font-weight:600;letter-spacing:.03em;line-height:1;
  text-transform:uppercase;font-family:var(--mono);opacity:.9
}

/* Responsive */
@media(max-width:720px){
  .topnav{column-gap:8px;padding-left:max(var(--page-gutter-sm), env(safe-area-inset-left,0px));padding-right:max(var(--page-gutter-sm), env(safe-area-inset-right,0px))}
  main.wrap,.wrap{padding-left:max(var(--page-gutter-sm), env(safe-area-inset-left,0px));padding-right:max(var(--page-gutter-sm), env(safe-area-inset-right,0px))}
  .topnav-brand,.topnav-tagline{height:36px;padding:4px 0}
  .topnav-brand picture,.topnav-tagline picture{height:24px}
  .topnav-brand img{height:24px;max-width:120px}
  .topnav-tagline img{height:24px;max-width:120px}
  .topnav-utils .util-label{display:none}
  .topnav-utils .util-box{width:34px;height:32px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
  .topnav-utils .theme-toggle{width:34px;height:32px;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
  .topnav-utils .theme-toggle i{font-size:13px}
}
@media(max-width:480px){
  .topnav{column-gap:6px}
  .topnav-right{gap:6px}
  .topnav-brand,.topnav-tagline{height:32px;padding:4px 0}
  .topnav-brand picture,.topnav-tagline picture{height:20px}
  .topnav-brand img,.topnav-tagline img{height:20px;max-width:100px}
  .topnav-utils .util-box{width:32px;height:30px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
  .topnav-utils .theme-toggle{width:32px;height:30px;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
  .topnav-utils .theme-toggle i{font-size:12px}
}

/* ===== TOMBOL TEMA ===== */
.theme-toggle{
  margin-left:0;
  width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;font-size:15px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--txt);cursor:pointer;
  transition:.2s;flex-shrink:0;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)
}
.topnav-utils .theme-toggle{margin-left:0}

.theme-toggle:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.theme-toggle:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
/* Theme icons: only one visible at a time */
.tt-sun,.tt-cyber,.tt-matrix,.tt-goldtech{display:none}
.tt-moon{display:inline-block}
html[data-theme="dark"] .tt-moon,
html[data-theme="cyberpunk"] .tt-moon,
html[data-theme="matrix"] .tt-moon,
html[data-theme="goldtech"] .tt-moon{display:none}
html[data-theme="dark"] .tt-sun{display:inline-block}
html[data-theme="cyberpunk"] .tt-cyber{display:inline-block}
html[data-theme="matrix"] .tt-matrix{display:inline-block}
html[data-theme="goldtech"] .tt-goldtech{display:inline-block}

/* Ensure topnav is flex */

main.wrap,.wrap{max-width:100%;width:100%;margin:0 auto;position:relative;z-index:1;padding:0 max(var(--page-gutter), env(safe-area-inset-right,0px)) 0 max(var(--page-gutter), env(safe-area-inset-left,0px));box-sizing:border-box}

/* ===== PROFIL ===== */
.profile{background:var(--panel);border:1px solid var(--line2);padding:30px 24px 24px;
  position:relative;text-align:center;box-shadow:var(--shadow)}
.corner{position:absolute;width:13px;height:13px;z-index:5;pointer-events:none;transition:opacity .18s}
.corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon);opacity:.18}
.corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon);opacity:1;filter:drop-shadow(0 0 3px rgba(254,206,2,.4))}
.corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon);opacity:1;filter:drop-shadow(0 0 3px rgba(254,206,2,.4))}
.corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon);opacity:.18}
.avatar-ring{width:104px;height:104px;margin:0 auto 14px;position:relative;
  display:flex;align-items:center;justify-content:center}
.avatar-ring::before{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px dashed var(--neon);animation:spin 14s linear infinite}
.avatar-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;
  border:1px solid var(--ring2);opacity:.6;animation:spin 9s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.avatar{width:80px;height:80px;border-radius:50%;background:#FFFFFF;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-size:34px;color:var(--neon);position:relative;z-index:1;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:contain;padding:8px;background:#FFFFFF}
.tag{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:2px;
  padding:4px 11px;border:1px solid var(--tagc);color:var(--tagc);margin-bottom:10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.tag .led{width:6px;height:6px;background:var(--neon);animation:blink 1.6s infinite}
@keyframes blink{0%,58%{opacity:1}59%,100%{opacity:.12}}
h1{font-family:var(--disp);font-weight:700;font-size:clamp(22px,6vw,32px);
  letter-spacing:2px;color:var(--txt);line-height:1.15}
h1 .glitch{position:relative;display:inline-block}
h1 .glitch::before,h1 .glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;opacity:0}
h1 .glitch::before{color:var(--gA);animation:gA 4.2s infinite steps(1)}
h1 .glitch::after{color:var(--gB);animation:gB 4.2s infinite steps(1)}
@keyframes gA{0%,90%{opacity:0;transform:none}91%{opacity:.85;transform:translate(-3px,-2px)}
  93%{opacity:.85;transform:translate(2px,1px)}95%,100%{opacity:0;transform:none}}
@keyframes gB{0%,91%{opacity:0}92%{opacity:.85;transform:translate(3px,2px)}
  94%{opacity:.85;transform:translate(-2px,-1px)}96%,100%{opacity:0;transform:none}}
.role{font-family:var(--disp);font-weight:600;font-size:clamp(12px,3.4vw,14px);letter-spacing:2px;
  color:var(--acc);margin:4px 0 10px}
.bio{font-size:12px;color:var(--txt);max-width:420px;margin:0 auto}
.bio b{color:var(--bio-bc);font-weight:700;padding:0 3px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}
.quick{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:14px}
.qbtn{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;font-size:10.5px;
  letter-spacing:1px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  cursor:pointer;transition:.15s;text-decoration:none;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.qbtn i{color:var(--acc);font-size:10px}
.qbtn:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.qbtn:hover i{color:#101010}
.qbtn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.clock{margin-top:12px;font-size:10px;letter-spacing:2px;color:var(--dim)}
.clock b{color:var(--acc);font-weight:500}


/* ===== HERO SLOGAN ===== */
.hero-slogan{margin:10px auto 0;display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;position:relative;
  border:1px solid var(--neon);background:rgba(254,206,2,.08);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.hero-slogan .hs-text{font-family:var(--disp);font-weight:700;font-size:clamp(13px,3.6vw,15px);
  letter-spacing:2.5px;color:var(--acc);text-transform:uppercase;
  background:linear-gradient(90deg,var(--acc) 0%,var(--neon) 40%,var(--acc) 80%);
  background-size:200% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:hsShine 3.5s ease-in-out infinite}
.hero-slogan .hs-dot{width:6px;height:6px;background:var(--neon);border-radius:50%;
  box-shadow:0 0 8px var(--neon);animation:hsPulse 1.4s ease-in-out infinite;flex:0 0 auto}
.hero-slogan .hs-dot:last-child{animation-delay:.7s}
@keyframes hsShine{
  0%,100%{background-position:100% 50%}
  50%{background-position:0% 50%}
}
@keyframes hsPulse{
  0%,100%{opacity:.35;transform:scale(.85)}
  50%{opacity:1;transform:scale(1.15)}
}
.hero-slogan::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(254,206,2,.25),transparent);
  animation:hsSweep 4s ease-in-out infinite}
@keyframes hsSweep{
  0%{transform:translateX(-100%);opacity:0}
  20%{opacity:1}
  50%{transform:translateX(100%);opacity:0}
  100%{transform:translateX(100%);opacity:0}
}


/* ===== LINK PREVIEW OVERLAY ===== */
#linkModal{position:fixed;inset:0;z-index:86;display:none;flex-direction:column;
  background:var(--bg);overflow-y:auto;overflow-x:hidden}
#linkModal.open{display:flex}
#linkModal .lk-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#linkModal .lk-bg .bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),
                   linear-gradient(90deg,var(--gridc) 1px,transparent 1px);background-size:44px 44px}
#linkModal .lk-bg .glow{position:absolute;border-radius:50%;filter:blur(100px)}
#linkModal .lk-bg .g1{width:400px;height:400px;background:var(--glow1);opacity:var(--glow1o);top:-140px;left:-120px}
#linkModal .lk-bg .g2{width:360px;height:360px;background:var(--glow2);opacity:var(--glow2o);bottom:-120px;right:-100px}
#linkModal .lk-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.lk-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line2)}
.lk-topbar .lk-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;letter-spacing:1.5px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);cursor:pointer;transition:.15s;
  font-family:var(--mono);font-weight:700;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.lk-topbar .lk-back:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.lk-topbar .lk-label{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--dim2)}
.lk-wrap{position:relative;z-index:2;flex:1;width:100%;max-width:100%;margin:0 auto;padding:16px 16px 32px;display:flex;flex-direction:column}
.lk-panel{background:var(--panel);border:1px solid var(--line2);position:relative;box-shadow:var(--shadow);flex:1;width:100%;min-height:calc(100dvh - 72px);
  animation:gSlide .28s ease;padding:26px 20px 22px;text-align:center}
.lk-panel .corner{position:absolute;width:13px;height:13px;z-index:2}
.lk-panel .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.lk-panel .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.lk-panel .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.lk-panel .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.lk-ico{width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  background:var(--neon);border:1px solid var(--neon);color:#101010;font-size:22px;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.lk-title{font-family:var(--disp);font-weight:700;font-size:clamp(18px,5vw,24px);letter-spacing:1.5px;color:var(--txt);margin-bottom:6px}
.lk-desc{font-size:12px;color:var(--dim);line-height:1.6;margin-bottom:14px;max-width:400px;margin-left:auto;margin-right:auto}
.lk-urlbox{text-align:left;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line2);background:var(--panel2);
  word-break:break-all;font-size:10.5px;color:var(--dim2);letter-spacing:.3px;line-height:1.45}
.lk-urlbox span{display:block;font-size:9px;letter-spacing:1.5px;color:var(--dim);margin-bottom:4px}
.lk-frame-wrap{position:relative;width:100%;margin-bottom:14px;border:1px solid var(--line2);background:var(--panel2);
  min-height:280px;height:min(52vh,420px);overflow:hidden}
.lk-frame-wrap iframe{width:100%;height:100%;border:0;display:block;background:#fff}
.lk-frame-fallback{display:none;position:absolute;inset:0;padding:20px 16px;text-align:center;
  flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--panel2)}
.lk-frame-fallback.show{display:flex}
.lk-frame-fallback p{font-size:12px;color:var(--dim);line-height:1.6;max-width:280px}
.lk-frame-fallback i{font-size:28px;color:var(--neon)}
.lk-actions{display:flex;flex-direction:column;gap:8px}
.lk-panel.with-frame{padding-top:18px}
.lk-panel.with-frame .lk-ico{width:40px;height:40px;font-size:16px;margin-bottom:8px}
.lk-panel.with-frame .lk-title{font-size:clamp(16px,4vw,20px)}
.lk-panel.with-frame .lk-desc{font-size:11px;margin-bottom:10px}
body.link-open{overflow:hidden}
@media(max-width:480px){
  .lk-frame-wrap{height:min(48vh,360px);min-height:220px}
}


/* ===== COURSE & YOUTUBE ===== */
.course-grid{display:grid;grid-template-columns:1fr;gap:8px}
.course-card{display:flex;align-items:flex-start;gap:12px;padding:13px 14px;border:1px solid var(--line2);
  background:var(--panel);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;transition:.18s;cursor:pointer;text-align:left}
.course-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--neon);
  transform:scaleY(0);transition:transform .18s}
.course-card:hover{border-color:var(--neon);background:var(--hov);transform:translateX(2px)}
.course-card:hover::before{transform:scaleY(1)}
.course-card:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.course-ico{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--neon);border:1px solid var(--neon);color:#101010;font-size:15px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.course-body{flex:1;min-width:0}
.course-title{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.4px;color:var(--txt);line-height:1.3}
.course-meta{font-size:10px;color:var(--dim);letter-spacing:.4px;margin-top:3px}
.course-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.course-tag{font-size:9px;letter-spacing:.8px;padding:3px 8px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim2);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}

.yt-grid{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:560px){
  .yt-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(min-width:900px){
  .yt-grid{grid-template-columns:repeat(3,1fr);gap:12px}
}
.yt-card{border:1px solid var(--line2);background:var(--panel);box-shadow:var(--shadow-sm);overflow:hidden;transition:.18s}
.yt-card:hover{border-color:var(--neon)}
.yt-embed{position:relative;width:100%;aspect-ratio:16/9;background:#101010}
.yt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-info{padding:10px 12px 12px}
.yt-info .yt-title{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:.3px;color:var(--txt);line-height:1.35}
.yt-info .yt-sub{font-size:10px;color:var(--dim);margin-top:3px;letter-spacing:.4px}
.yt-channel{margin-top:10px}
.yt-channel .mbtn{margin-top:0}



/* ===== CONTACT ===== */
.contact-box{border:1px solid var(--line2);background:var(--panel);padding:16px;box-shadow:var(--shadow-sm);position:relative}
.contact-box .corner{position:absolute;width:13px;height:13px;z-index:2}
.contact-box .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.contact-box .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.contact-box .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.contact-box .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.contact-grid{display:flex;flex-direction:column;gap:14px}
.cmap{position:relative;width:100%;aspect-ratio:16/9;border:1px solid var(--line2);background:var(--panel2);overflow:hidden}
.cmap iframe,.cmap .gmap-canvas{position:absolute;inset:0;width:100%;height:100%;border:0}
.cmap iframe{filter:grayscale(.15)}
.cmap .gmap-canvas{display:none}
.cmap.api-on .gmap-canvas{display:block}
.cmap.api-on iframe{display:none}
.gmap-badge{position:absolute;left:8px;bottom:8px;z-index:2;padding:4px 8px;font-size:9px;letter-spacing:1px;
  background:var(--panel);border:1px solid var(--line2);color:var(--dim);pointer-events:none;
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px)}
.cform{display:flex;flex-direction:column;gap:10px}
.cfield{display:flex;flex-direction:column;gap:5px;text-align:left}
.cfield label{font-size:9.5px;letter-spacing:1.5px;color:var(--dim);font-family:var(--mono)}
.cfield input,.cfield textarea,.cfield select{
  width:100%;padding:11px 12px;font:400 13px var(--mono);color:var(--txt);
  background:var(--panel2);border:1px solid var(--line2);outline:none;transition:.15s;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.cfield input:focus,.cfield textarea:focus,.cfield select:focus{
  border-color:var(--neon);box-shadow:inset 0 0 0 1px var(--neon)}
.cfield textarea{min-height:110px;resize:vertical;line-height:1.5}
.cfield input::placeholder,.cfield textarea::placeholder{color:var(--dim);opacity:.7}
.c-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.c-note{font-size:10px;color:var(--dim);line-height:1.5;margin-top:4px}
.cinfo{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.cinfo a,.cinfo .cinfo-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line2);
  background:var(--panel2);text-decoration:none;color:var(--txt);transition:.15s;position:relative;overflow:hidden}
.cinfo a::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--neon);
  transform:scaleY(0);transition:transform .15s}
.cinfo a:hover{border-color:var(--neon);background:var(--hov)}
.cinfo a:hover::before{transform:scaleY(1)}
.cinfo i{color:var(--neon);width:18px;text-align:center;font-size:13px;flex:0 0 auto}
.cinfo span{font-size:12px;letter-spacing:.3px;line-height:1.35}


/* ===== FAQ ===== */
.faq-list{display:flex;flex-direction:column;gap:8px}
.faq-item{border:1px solid var(--line2);background:var(--panel);box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;transition:border-color .18s,background .18s}
.faq-item::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--neon);
  transform:scaleY(0);transition:transform .18s}
.faq-item.open{border-color:var(--neon)}
.faq-item.open::before{transform:scaleY(1)}
.faq-q{width:100%;display:flex;align-items:center;gap:12px;padding:13px 14px;text-align:left;
  background:transparent;border:0;cursor:pointer;color:var(--txt);font:600 13px var(--disp);
  letter-spacing:.4px;transition:background .15s}
.faq-q:hover{background:var(--hov)}
.faq-q:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.faq-q .faq-ico{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--neon);border:1px solid var(--neon);color:#101010;font-size:11px;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  transition:transform .25s ease}
.faq-item.open .faq-q .faq-ico{transform:rotate(45deg)}
.faq-q .faq-label{flex:1;min-width:0;line-height:1.35}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s ease}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-a-inner{overflow:hidden}
.faq-a-inner p{padding:0 14px 14px 54px;margin:0;font-size:12px;color:var(--txt);line-height:1.7}
.faq-a-inner p b{color:var(--bio-bc);font-weight:700;padding:0 2px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}
@media(max-width:480px){
  .faq-a-inner p{padding:0 12px 12px 14px}
}


/* ===== TESTIMONI ===== */
.testi-grid{display:grid;grid-template-columns:1fr;gap:10px}
.testi-card{border:1px solid var(--line2);background:var(--panel);padding:16px 14px;box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;transition:.18s}
.testi-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--neon);
  transform:scaleY(0);transition:transform .18s}
.testi-card:hover{border-color:var(--neon);background:var(--hov)}
.testi-card:hover::before{transform:scaleY(1)}
.testi-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.testi-av{width:44px;height:44px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;
  background:#FFFFFF;border:1px solid var(--line2);color:#101010;
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.5px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  overflow:hidden;position:relative}
.testi-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html[data-theme="dark"] .testi-av,
html[data-theme="cyberpunk"] .testi-av,
html[data-theme="matrix"] .testi-av{background:var(--panel2);color:var(--txt)}
.testi-meta{flex:1;min-width:0}
.testi-name{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.3px;color:var(--txt);line-height:1.25}
.testi-role{font-size:10px;letter-spacing:.8px;color:var(--acc);margin-top:2px}
.testi-stars{display:flex;gap:3px;margin-bottom:8px;color:var(--neon);font-size:11px}
.testi-text{font-size:12px;color:var(--txt);line-height:1.7;position:relative;padding-left:12px;border-left:2px solid var(--neon)}
.testi-text b{color:var(--bio-bc);font-weight:700;padding:0 2px;background:linear-gradient(transparent 58%,var(--hl) 58%)}

@media (prefers-reduced-motion:reduce){
  .hero-slogan .hs-text,.hero-slogan .hs-dot,.hero-slogan::before{animation:none!important}
  .hero-slogan .hs-text{-webkit-text-fill-color:var(--acc);background:none}
}

/* ===== DIVIDER ===== */
.divider{display:flex;align-items:center;gap:10px;margin:20px 0 6px;color:var(--line2);font-size:9px;letter-spacing:3px}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line2)}
.divider i{color:var(--neon);font-size:10px}

/* ===== GRUP ===== */
.grp{margin-top:clamp(18px,3vw,28px)}
.grp-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;padding:0 2px;position:relative}
.grp-head > i{display:none} /* diganti ikon di dalam badge */
.grp-ico{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--neon);border:1px solid var(--neon);color:#101010;font-size:11px;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  position:relative;z-index:1;transition:transform .25s ease,box-shadow .25s ease}
.grp-ico::after{content:'';position:absolute;inset:-3px;border:1px dashed var(--neon);opacity:.35;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  animation:grpSpin 10s linear infinite;pointer-events:none}
@keyframes grpSpin{to{transform:rotate(360deg)}}
.grp-head:hover .grp-ico{transform:scale(1.08);box-shadow:0 0 16px rgba(254,206,2,.35)}
.grp-title{font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:2.8px;color:var(--txt);
  position:relative;white-space:nowrap}
.grp-title::after{content:'';position:absolute;left:0;bottom:-2px;width:0;height:2px;background:var(--neon);
  transition:width .4s cubic-bezier(.22,1,.36,1)}
.grp-head:hover .grp-title::after{width:100%}
.grp-line{flex:1;height:1px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,var(--line2) 0%,var(--line2) 40%,transparent 100%)}
.grp-line::before{content:'';position:absolute;top:0;left:-40%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:.7;
  animation:grpScan 2.8s ease-in-out infinite}
@keyframes grpScan{
  0%{left:-40%;opacity:0}
  30%{opacity:.75}
  70%{opacity:.75}
  100%{left:110%;opacity:0}
}
.grp.rv.on .grp-ico{animation:grpPop .5s cubic-bezier(.22,1,.36,1) both}
.grp.rv.on .grp-title{animation:grpFade .5s ease .08s both}
.grp.rv.on .grp-line::before{animation:grpScan 2.8s ease-in-out .2s infinite}
@keyframes grpPop{from{opacity:0;transform:scale(.6) rotate(-12deg)}to{opacity:1;transform:scale(1) rotate(0)}}
@keyframes grpFade{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}

/* Frame putih → panel gelap di dark mode */
html[data-theme="dark"] .avatar,
html[data-theme="cyberpunk"] .avatar,
html[data-theme="matrix"] .avatar,
html[data-theme="dark"] .avatar img,
html[data-theme="cyberpunk"] .avatar img,
html[data-theme="matrix"] .avatar img,
html[data-theme="dark"] .tinit,
html[data-theme="cyberpunk"] .tinit,
html[data-theme="matrix"] .tinit,
html[data-theme="dark"] .s-photo,
html[data-theme="cyberpunk"] .s-photo,
html[data-theme="matrix"] .s-photo,
html[data-theme="dark"] .team-av,
html[data-theme="cyberpunk"] .team-av,
html[data-theme="matrix"] .team-av,
html[data-theme="dark"] .logo-mark,
html[data-theme="cyberpunk"] .logo-mark,
html[data-theme="matrix"] .logo-mark,
html[data-theme="dark"] .g-avatar,
html[data-theme="cyberpunk"] .g-avatar,
html[data-theme="matrix"] .g-avatar,
html[data-theme="dark"] .foot-social a,
html[data-theme="cyberpunk"] .foot-social a,
html[data-theme="matrix"] .foot-social a{
  background:var(--panel2)!important;
  color:var(--txt)!important;
  border-color:var(--line2)!important;
}
html[data-theme="dark"] .foot-social a:hover,
html[data-theme="cyberpunk"] .foot-social a:hover,
html[data-theme="matrix"] .foot-social a:hover{
  background:var(--neon)!important;
  border-color:var(--neon)!important;
  color:#101010!important;
}


/* ===== MASKOT SECTION + OVERLAY ===== */
.maskot-card{border:1px solid var(--line2);background:var(--panel);padding:20px 18px;box-shadow:var(--shadow-sm);
  text-align:center;position:relative;cursor:pointer;transition:.18s;overflow:hidden}
.maskot-card .corner{position:absolute;width:13px;height:13px;z-index:2}
.maskot-card .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.maskot-card .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.maskot-card .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.maskot-card .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.maskot-card:hover{border-color:var(--neon);background:var(--hov);transform:translateY(-2px)}
.maskot-card:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.maskot-preview{width:120px;height:120px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--line2);position:relative;overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  transition:transform .2s ease,border-color .2s ease}
.maskot-card:hover .maskot-preview{border-color:var(--neon);transform:scale(1.04)}
.maskot-preview img{width:100%;height:100%;object-fit:contain;padding:8px}
.maskot-preview .msk-fallback{font-size:42px;color:var(--neon)}
.maskot-name{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:1.5px;color:var(--txt);margin-bottom:4px}
.maskot-desc{font-size:11px;color:var(--dim);letter-spacing:.4px;margin-bottom:12px;line-height:1.5}
.maskot-cta{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;font-size:10px;letter-spacing:1.5px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);font-family:var(--mono);font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:.15s}
.maskot-card:hover .maskot-cta{background:var(--neon);border-color:var(--neon);color:#101010}

#maskotModal{position:fixed;inset:0;z-index:83;display:none;flex-direction:column;
  background:var(--bg);overflow-y:auto;overflow-x:hidden}
#maskotModal.open{display:flex}
#maskotModal .msk-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#maskotModal .msk-bg .bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),
                   linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:44px 44px}
#maskotModal .msk-bg .glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
#maskotModal .msk-bg .g1{width:420px;height:420px;background:var(--glow1);opacity:var(--glow1o);top:-150px;left:-130px}
#maskotModal .msk-bg .g2{width:400px;height:400px;background:var(--glow2);opacity:var(--glow2o);bottom:-140px;right:-120px}
#maskotModal .msk-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.msk-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line2);backdrop-filter:blur(8px)}
.msk-topbar .msk-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;
  letter-spacing:1.5px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  cursor:pointer;transition:.15s;font-family:var(--mono);font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.msk-topbar .msk-back:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.msk-topbar .msk-back:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.msk-topbar .msk-label{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--dim2)}
.msk-wrap{position:relative;z-index:2;flex:1;width:100%;max-width:100%;margin:0 auto;padding:16px 16px 32px;display:flex;flex-direction:column}
.msk-panel{background:var(--panel);border:1px solid var(--line2);position:relative;box-shadow:var(--shadow);flex:1;width:100%;min-height:calc(100dvh - 72px);
  animation:gSlide .28s ease;text-align:center;padding:28px 22px 24px}
.msk-panel .corner{position:absolute;width:13px;height:13px;z-index:2}
.msk-panel .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.msk-panel .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.msk-panel .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.msk-panel .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.msk-hero{width:min(280px,75vw);height:min(280px,75vw);margin:0 auto 18px;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--line2);position:relative;overflow:hidden;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.msk-hero img{width:100%;height:100%;object-fit:contain;padding:12px}
.msk-hero .msk-fallback{font-size:72px;color:var(--neon)}
.msk-tag{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:2px;
  padding:4px 11px;border:1px solid var(--tagc);color:var(--tagc);margin-bottom:10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.msk-tag .led{width:6px;height:6px;background:var(--neon);animation:blink 1.6s infinite}
.msk-title{font-family:var(--disp);font-weight:700;font-size:clamp(20px,5vw,26px);letter-spacing:2px;color:var(--txt);margin-bottom:6px}
.msk-role{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:2px;color:var(--acc);margin-bottom:12px}
.msk-bio{font-size:12.5px;color:var(--txt);line-height:1.75;max-width:560px;margin:0 auto 18px;text-align:left}
.msk-bio p{margin:0 0 12px}
.msk-bio p:last-child{margin-bottom:0}
.msk-bio b{color:var(--bio-bc);font-weight:700;padding:0 2px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}
.msk-actions{display:flex;flex-direction:column;gap:8px;max-width:320px;margin:0 auto}
body.maskot-open{overflow:hidden}
html[data-theme="dark"] .maskot-preview,
html[data-theme="cyberpunk"] .maskot-preview,
html[data-theme="matrix"] .maskot-preview,
html[data-theme="dark"] .msk-hero,
html[data-theme="cyberpunk"] .msk-hero,
html[data-theme="matrix"] .msk-hero{background:var(--panel2)!important}


/* ===== BANNER (carousel) ===== */
.ban-carousel{
  position:relative;
  border:1px solid var(--line2);
  background:var(--panel);
  box-shadow:var(--shadow-sm);
  padding:0;
  overflow:hidden
}
.ban-viewport{overflow:hidden;width:100%;position:relative}
.ban-track{
  display:flex;
  transition:transform .55s cubic-bezier(.22,1,.36,1);
  will-change:transform
}
.ban-slide{flex:0 0 100%;min-width:100%;box-sizing:border-box;padding:0}
.ban-item{
  position:relative;aspect-ratio:32/9;border:none;background:var(--panel2);
  overflow:hidden;cursor:pointer;margin:0
}
.ban-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;z-index:2;
  background:var(--neon);transform:scaleY(1)
}
.ban-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.ban-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.ban-item:hover img{transform:scale(1.04)}
.ban-item .ban-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);color:var(--dim);font-size:28px
}
.ban-item .ban-cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 16px;z-index:2;
  font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:1.5px;
  color:#101010;background:linear-gradient(transparent, rgba(254,206,2,.92) 40%);
  opacity:1;transform:none
}
.ban-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  z-index:5;width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  color:var(--txt);cursor:pointer;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:background .15s,border-color .15s,color .15s,transform .12s;
  backdrop-filter:blur(6px)
}
.ban-nav:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.ban-nav:active{transform:translateY(-50%) scale(.94)}
.ban-nav:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc)}
.ban-prev{left:10px}
.ban-next{right:10px}
.ban-dots{display:flex;justify-content:center;gap:8px;padding:10px 12px 12px;position:relative;z-index:3}
.ban-dot{
  width:8px;height:8px;padding:0;border:1px solid var(--line2);
  background:var(--panel2);cursor:pointer;
  clip-path:polygon(2px 0,100% 0,100% calc(100% - 2px),calc(100% - 2px) 100%,0 100%,0 2px);
  transition:background .2s,border-color .2s,transform .15s
}
.ban-dot:hover{border-color:var(--neon);transform:scale(1.15)}
.ban-dot.is-active{background:var(--neon);border-color:var(--neon);width:22px}
.ban-dot:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc)}
.ban-progress{
  position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--line);z-index:4;pointer-events:none
}
.ban-progress span{display:block;height:100%;width:0%;background:var(--neon);transition:width .1s linear}
html[data-theme="dark"] .ban-item .ban-ph,
html[data-theme="cyberpunk"] .ban-item .ban-ph,
html[data-theme="matrix"] .ban-item .ban-ph{background:var(--panel2)}
@media(max-width:480px){
  .ban-nav{width:34px;height:34px;font-size:12px}
  .ban-prev{left:6px}
  .ban-next{right:6px}
  .ban-item .ban-cap{font-size:11px;padding:10px 12px;letter-spacing:1px}
}
@media(prefers-reduced-motion:reduce){
  .ban-track{transition:none}
  .ban-item img{transition:none}
  .ban-progress span{transition:none}
}

/* ===== GALERI (grid 4 kolom × 2 baris) ===== */
.gal-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px
}
.gal-item{
  position:relative;
  aspect-ratio:16/9;
  border:1px solid var(--line2);
  background:var(--panel);
  overflow:hidden;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:border-color .18s,transform .18s
}
.gal-item::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:2px;z-index:2;
  background:var(--neon);transform:scaleY(0);transition:transform .18s
}
.gal-item:hover{border-color:var(--neon);transform:translateY(-2px)}
.gal-item:hover::before{transform:scaleY(1)}
.gal-item:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.gal-item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease
}
.gal-item:hover img{transform:scale(1.06)}
.gal-item .gal-ph{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  background:var(--panel2);color:var(--dim);font-size:22px
}
.gal-item .gal-cap{
  position:absolute;left:0;right:0;bottom:0;padding:8px 10px;z-index:2;
  font-family:var(--disp);font-weight:700;font-size:11px;letter-spacing:1.2px;
  color:#101010;
  background:linear-gradient(transparent, rgba(254,206,2,.9) 35%);
  opacity:0;transform:translateY(6px);transition:opacity .2s,transform .2s
}
.gal-item:hover .gal-cap{opacity:1;transform:none}
html[data-theme="dark"] .gal-item .gal-ph,
html[data-theme="cyberpunk"] .gal-item .gal-ph,
html[data-theme="matrix"] .gal-item .gal-ph{background:var(--panel2)}
/* Responsive: 4 → 2 → 1 */
@media(max-width:900px){
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(max-width:480px){
  .gal-grid{grid-template-columns:1fr;gap:10px}
  .gal-item .gal-cap{opacity:1;transform:none;font-size:10px;padding:8px 10px}
}
@media(prefers-reduced-motion:reduce){
  .gal-item img{transition:none}
}

  .gal-progress span{transition:none}
}


#galeriModal{position:fixed;inset:0;z-index:84;display:none;flex-direction:column;
  background:var(--bg);overflow:hidden}
#galeriModal.open{display:flex}
#galeriModal .gal-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#galeriModal .gal-bg .bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),
                   linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:44px 44px}
#galeriModal .gal-bg .glow{position:absolute;border-radius:50%;filter:blur(100px)}
#galeriModal .gal-bg .g1{width:400px;height:400px;background:var(--glow1);opacity:var(--glow1o);top:-120px;left:-100px}
#galeriModal .gal-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.gal-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line2)}
.gal-topbar .gal-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;
  letter-spacing:1.5px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  cursor:pointer;transition:.15s;font-family:var(--mono);font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.gal-topbar .gal-back:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.gal-topbar .gal-label{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--dim2)}
.gal-stage{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px 16px 28px;width:100%;min-height:0}
.gal-frame{width:min(960px,100%);max-height:78vh;background:var(--panel);border:1px solid var(--line2);
  position:relative;box-shadow:var(--shadow);padding:10px;animation:gSlide .25s ease}
.gal-frame .corner{position:absolute;width:13px;height:13px;z-index:2}
.gal-frame .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.gal-frame .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.gal-frame .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.gal-frame .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.gal-frame img{width:100%;max-height:calc(70vh - 20px);object-fit:contain;display:block;background:#FFFFFF}
html[data-theme="dark"] .gal-frame img,
html[data-theme="cyberpunk"] .gal-frame img,
html[data-theme="matrix"] .gal-frame img{background:var(--panel2)}
.gal-meta{margin-top:14px;text-align:center}
.gal-meta .gal-cap-full{font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:1px;color:var(--txt)}
.gal-meta .gal-idx{font-size:10px;letter-spacing:1.5px;color:var(--dim);margin-top:4px}
.gal-nav{display:flex;gap:10px;margin-top:16px}
.gal-nav button{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);cursor:pointer;font-size:14px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);transition:.15s}
.gal-nav button:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.gal-nav button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
body.galeri-open{overflow:hidden}


/* ===== TAGLINE ===== */
.tagline-card{border:1px solid var(--line2);background:var(--panel);padding:18px 16px;box-shadow:var(--shadow-sm);
  text-align:center;position:relative;cursor:pointer;transition:.18s;overflow:hidden}
.tagline-card .corner{position:absolute;width:13px;height:13px;z-index:2}
.tagline-card .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.tagline-card .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.tagline-card .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.tagline-card .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.tagline-card:hover{border-color:var(--neon);background:var(--hov);transform:translateY(-2px)}
.tagline-card:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.tagline-preview{width:100%;max-width:320px;margin:0 auto 12px;aspect-ratio:16/7;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--line2);overflow:hidden;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:border-color .2s ease,transform .2s ease}
.tagline-card:hover .tagline-preview{border-color:var(--neon);transform:scale(1.02)}
.tagline-preview img{width:100%;height:100%;object-fit:contain;padding:8px}
.tagline-preview .tl-fallback{font-family:var(--disp);font-weight:700;font-size:18px;letter-spacing:2px;color:#101010;line-height:1.2}
.tagline-name{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:1.5px;color:var(--txt);margin-bottom:4px}
.tagline-desc{font-size:11px;color:var(--dim);margin-bottom:12px}
.tagline-cta{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;font-size:10px;letter-spacing:1.5px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);font-family:var(--mono);font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:.15s}
.tagline-card:hover .tagline-cta{background:var(--neon);border-color:var(--neon);color:#101010}

#taglineModal{position:fixed;inset:0;z-index:83;display:none;flex-direction:column;background:var(--bg);overflow-y:auto}
#taglineModal.open{display:flex}
#taglineModal .tl-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#taglineModal .tl-bg .bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:44px 44px}
#taglineModal .tl-bg .glow{position:absolute;border-radius:50%;filter:blur(100px)}
#taglineModal .tl-bg .g1{width:400px;height:400px;background:var(--glow1);opacity:var(--glow1o);top:-140px;left:-120px}
#taglineModal .tl-bg .g2{width:360px;height:360px;background:var(--glow2);opacity:var(--glow2o);bottom:-120px;right:-100px}
#taglineModal .tl-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.tl-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line2)}
.tl-topbar .tl-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;letter-spacing:1.5px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);cursor:pointer;transition:.15s;
  font-family:var(--mono);font-weight:700;clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.tl-topbar .tl-back:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.tl-topbar .tl-label{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--dim2)}
.tl-wrap{position:relative;z-index:2;flex:1;width:100%;max-width:100%;margin:0 auto;padding:16px 16px 32px;display:flex;flex-direction:column}
.tl-panel{background:var(--panel);border:1px solid var(--line2);position:relative;box-shadow:var(--shadow);flex:1;width:100%;min-height:calc(100dvh - 72px);
  animation:gSlide .28s ease;text-align:center;padding:28px 20px 24px}
.tl-panel .corner{position:absolute;width:13px;height:13px;z-index:2}
.tl-panel .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.tl-panel .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.tl-panel .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.tl-panel .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.tl-hero{width:100%;margin:0 auto 16px;aspect-ratio:16/7;max-height:220px;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--line2);overflow:hidden;
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.tl-hero img{width:100%;height:100%;object-fit:contain;padding:10px}
.tl-tag{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:2px;padding:4px 11px;
  border:1px solid var(--tagc);color:var(--tagc);margin-bottom:10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.tl-tag .led{width:6px;height:6px;background:var(--neon);animation:blink 1.6s infinite}
.tl-title{font-family:var(--disp);font-weight:700;font-size:clamp(18px,5vw,24px);letter-spacing:2px;color:var(--txt);margin-bottom:6px}
.tl-role{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:2px;color:var(--acc);margin-bottom:12px}
.tl-bio{font-size:12.5px;color:var(--txt);line-height:1.7;max-width:420px;margin:0 auto 18px;text-align:left}
.tl-bio{max-width:560px;text-align:left;line-height:1.75}
.tl-bio p{margin:0 0 12px}
.tl-bio p:last-child{margin-bottom:0}
.tl-bio b{color:var(--bio-bc);font-weight:700;padding:0 2px;background:linear-gradient(transparent 58%,var(--hl) 58%)}
.tl-actions{max-width:320px;margin:0 auto}
body.tagline-open{overflow:hidden}
html[data-theme="dark"] .tagline-preview,
html[data-theme="cyberpunk"] .tagline-preview,
html[data-theme="matrix"] .tagline-preview,
html[data-theme="dark"] .tl-hero,
html[data-theme="cyberpunk"] .tl-hero,
html[data-theme="matrix"] .tl-hero{background:var(--panel2)!important}


/* ===== TENTANG JURUSAN ===== */
.about{border:1px solid var(--line2);background:var(--panel);padding:16px 18px;box-shadow:var(--shadow-sm)}
.atext{font-size:11.5px;color:var(--txt)}
.atext b{color:var(--bio-bc);font-weight:700;padding:0 3px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}
.feat{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}
.fitem{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 4px;
  border:1px solid var(--line2);background:var(--panel2);
  font-family:var(--disp);font-weight:700;font-size:8.5px;letter-spacing:1.2px;color:var(--dim2);text-align:center}
.fitem i{font-size:15px;color:var(--acc)}

/* ===== STATISTIK ===== */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.stat{border:1px solid var(--line2);border-top:2px solid var(--neon);background:var(--panel);
  text-align:center;padding:13px 6px 10px;box-shadow:var(--shadow-sm)}
.snum{display:block;font-family:var(--disp);font-weight:700;font-size:clamp(20px,5vw,24px);color:var(--acc);line-height:1.1}
.slab{font-size:8px;letter-spacing:1.5px;color:var(--dim)}

/* ===== KOMPETENSI ===== */
.chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;
  border:1px solid var(--line2);background:var(--panel2);
  font-size:10px;letter-spacing:.8px;color:var(--dim2);transition:.15s}
.chip::before{content:'';width:6px;height:6px;background:var(--neon);flex:0 0 auto}
.chip i{color:var(--acc);font-size:9px}
.chip:hover{border-color:var(--neon);color:var(--txt)}

/* ===== GURU TKJ (foto + nama + mapel) ===== */
.tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.tcard{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;padding:12px 14px;
  border:1px solid var(--line2);background:var(--panel);text-decoration:none;color:var(--txt);
  position:relative;overflow:hidden;transition:.18s;animation:lIn .45s ease both;box-shadow:var(--shadow-sm);cursor:pointer}
.tcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--neon);transform:scaleY(0);transition:transform .18s}
.tcard:hover{border-color:var(--neon);background:var(--hov);transform:translateX(2px)}
.tcard:hover::before{transform:scaleY(1)}
.tcard:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.tinit{width:48px;height:72px;aspect-ratio:2/3;flex:0 0 auto;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.5px;
  color:#101010;background:#FFFFFF;border:1px solid var(--line2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:transform .18s ease,border-color .25s ease}
.tcard:hover .tinit{border-color:var(--neon);transform:scale(1.04)}
.tinit .tin{position:relative;z-index:0}
.tinit img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.tmeta{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left}
.tname{display:block;font-family:var(--disp);font-weight:600;font-size:13.5px;letter-spacing:.3px;
  line-height:1.3;color:var(--txt);overflow-wrap:anywhere;word-break:break-word}
.tmapel{display:block;font-size:10.5px;color:var(--dim);letter-spacing:.3px;line-height:1.4;
  margin-top:0;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis}

/* ===== LINK ===== */
.lnk{display:flex;align-items:center;gap:14px;padding:13px 15px;margin:8px 0;
  border:1px solid var(--line2);background:var(--panel);text-decoration:none;color:var(--txt);
  position:relative;overflow:hidden;transition:.18s;animation:lIn .45s ease both;box-shadow:var(--shadow-sm)}
@keyframes lIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.lnk::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--lc,var(--neon));transform:scaleY(0);transition:transform .18s}
.lnk::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:linear-gradient(90deg,transparent 30%,var(--shim) 50%,transparent 70%);
  background-size:200% 100%;background-position:120% 0}
.lnk:hover{border-color:var(--lc,var(--neon));background:var(--hov);transform:translateX(3px)}
.lnk:hover::before{transform:scaleY(1)}
.lnk:hover::after{opacity:1;background-position:-20% 0}
.lnk:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.lico{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-size:16px;color:#101010;background:var(--neon);border:1px solid var(--neon);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:transform .18s ease,border-color .25s ease,background .2s ease,color .2s ease}
.lnk:hover .lico{border-color:#101010;transform:scale(1.06);background:#101010;color:var(--neon)}
.linfo{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;justify-content:center}
.lname{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.5px;color:var(--txt);display:block;line-height:1.25}
.ldesc{font-size:10px;color:var(--dim);letter-spacing:.4px;display:block;line-height:1.35;white-space:normal;overflow:hidden;text-overflow:ellipsis}
.larrow{color:var(--dim);font-size:12px;transition:.18s;flex:0 0 auto}
.lnk:hover .larrow{color:var(--lc,var(--neon));transform:translateX(4px)}

/* ===== PARTNER ===== */
.partner-box{
  border:1px solid var(--line2);
  background:var(--panel);
  padding:16px;
  box-shadow:var(--shadow-sm);
  position:relative
}
.partner-box .corner{
  position:absolute;width:13px;height:13px;z-index:2
}
.partner-box .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.partner-box .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.partner-box .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.partner-box .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.partner-lead{
  font-size:12px;
  color:var(--dim);
  line-height:1.55;
  margin:0 0 14px;
  letter-spacing:.3px;
  max-width:56ch
}
.partner-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px
}
.partner-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:10px;
  padding:14px 12px 12px;
  border:1px solid var(--line2);
  background:var(--panel2);
  text-decoration:none;
  color:var(--txt);
  position:relative;
  overflow:hidden;
  transition:border-color .18s,background .18s,transform .18s;
  box-shadow:var(--shadow-sm)
}
.partner-card::before{
  content:'';
  position:absolute;
  left:0;top:0;bottom:0;
  width:2px;
  background:var(--lc,var(--neon));
  transform:scaleY(0);
  transition:transform .18s
}
.partner-card:hover{
  border-color:var(--lc,var(--neon));
  background:var(--hov);
  transform:translateY(-3px)
}
.partner-card:hover::before{transform:scaleY(1)}
.partner-card:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--acc)
}
/* Logo partner: proporsi sama seperti tagline_tkj.webp (506×210 ≈ 2.41:1) */
.partner-logo{
  width:100%;
  max-width:100%;
  aspect-ratio:506 / 210;
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#FFFFFF;
  border:1px solid var(--line2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  overflow:hidden;
  transition:transform .18s ease,border-color .25s ease
}
.partner-logo picture{
  width:100%;
  height:100%;
  display:block
}
.partner-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
  padding:6px 10px;
  box-sizing:border-box
}
.partner-card:hover .partner-logo{
  border-color:var(--lc,var(--neon));
  transform:scale(1.02)
}
.partner-info{
  display:flex;
  flex-direction:column;
  gap:3px;
  width:100%;
  min-width:0
}
.partner-name{
  font-family:var(--disp);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:.4px;
  color:var(--txt);
  line-height:1.25;
  display:block
}
.partner-type{
  font-size:9.5px;
  color:var(--dim);
  letter-spacing:.5px;
  line-height:1.3;
  display:block
}
.partner-ext{
  position:absolute;
  top:8px;
  right:8px;
  color:var(--dim);
  font-size:10px;
  transition:color .18s,opacity .18s,transform .18s;
  opacity:.5;
  z-index:2
}
.partner-card:hover .partner-ext{
  color:var(--lc,var(--neon));
  opacity:1;
  transform:translate(1px,-1px)
}
/* Responsive grid: 4 → 2 → 1 kolom */
@media(min-width:900px){
  .partner-grid{grid-template-columns:repeat(4,1fr);gap:12px}
}
@media(min-width:560px) and (max-width:899px){
  .partner-grid{grid-template-columns:repeat(2,1fr);gap:12px}
}
@media(max-width:559px){
  .partner-grid{grid-template-columns:repeat(2,1fr);gap:10px}
}
@media(max-width:380px){
  .partner-grid{grid-template-columns:1fr;gap:10px}
}
@media(max-width:480px){
  .partner-box{padding:14px}
  .partner-card{padding:12px 10px 10px}
  .partner-name{font-size:12.5px}
  .partner-logo img{padding:4px 8px}
}

/* ===== MOTTO ===== */
.motto{margin-top:22px;border:1px solid var(--line2);background:var(--panel2);
  padding:16px 20px;text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.motto::before{content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(45deg,transparent 0 12px,var(--stripes) 12px 14px)}
.motto p{position:relative;font-family:var(--disp);font-weight:600;font-size:clamp(13px,3.8vw,15px);
  letter-spacing:1.5px;color:var(--txt)}
.motto p i{color:var(--neon);margin:0 8px}
.motto small{position:relative;display:block;margin-top:5px;font-size:9px;letter-spacing:2px;color:var(--dim)}

/* ===== FOOTER ===== */
.foot{margin-top:22px;text-align:center;position:relative;
  border:1px solid var(--line2);background:var(--panel);padding:22px 18px 18px;box-shadow:var(--shadow-sm)}
.foot .corner{position:absolute;width:13px;height:13px;z-index:2}
.foot .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.foot .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.foot .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.foot .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.foot-brand{display:flex;flex-direction:column;align-items:center;gap:4px;margin-bottom:14px}
.foot-logo{width:42px;height:42px;display:flex;align-items:center;justify-content:center;
  background:var(--neon);border:1px solid var(--neon);color:#101010;font-size:16px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  margin-bottom:4px}
.foot-logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.foot-name{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:2px;color:var(--txt)}
.foot-tag{font-size:9px;letter-spacing:1.8px;color:var(--dim)}
.foot-copy{font-size:10px;color:var(--dim);letter-spacing:1px;margin-bottom:12px}
.footnav{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.footnav a{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;font-size:9.5px;letter-spacing:1.2px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim2);text-decoration:none;
  transition:.15s;clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.footnav a:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.footnav a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.foot-social{display:flex;justify-content:center;gap:8px;margin-bottom:14px}
.foot-social a{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--line2);color:#101010;font-size:14px;text-decoration:none;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:transform .18s ease,background .2s ease,color .2s ease,border-color .2s ease}
.foot-social a:hover{background:var(--neon);border-color:var(--neon);color:#101010;transform:scale(1.08)}
.foot-social a:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.foot-line{height:1px;margin:0 auto 12px;max-width:200px;position:relative;overflow:hidden;
  background:linear-gradient(90deg,transparent,var(--line2),transparent)}
.foot-line::before{content:'';position:absolute;top:0;left:-50%;width:40%;height:100%;
  background:linear-gradient(90deg,transparent,var(--neon),transparent);opacity:.6;
  animation:grpScan 3.2s ease-in-out infinite}
.credit{font-size:9.5px;color:var(--dim);letter-spacing:.8px}
.credit i{color:var(--heart);animation:beat 1.6s ease-in-out infinite;margin:0 3px}
.credit a{color:var(--acc);text-decoration:none}
.credit a:hover{color:var(--txt)}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(1)}45%{transform:scale(1.15)}60%{transform:scale(1)}}

/* ===== MODAL ===== */
#modal{position:fixed;inset:0;z-index:80;display:none;align-items:center;justify-content:center;
  background:var(--backdrop);backdrop-filter:blur(4px);padding:16px}
#modal.open{display:flex}
.mpanel{width:min(420px,94%);background:var(--panel);border:1px solid var(--line2);
  padding:22px;text-align:center;position:relative;animation:mIn .2s;box-shadow:var(--shadow)}
@keyframes mIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.mtitle{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:2px;color:var(--txt);margin-bottom:4px}
.msub{font-size:9.5px;letter-spacing:1.5px;color:var(--dim);margin-bottom:16px}
#qrbox{display:flex;justify-content:center;margin-bottom:14px}
#qrbox img{border:8px solid #fff;background:#fff;max-width:100%;border-radius:0}
.mbtn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:11px;
  font:700 11.5px var(--mono);letter-spacing:2px;cursor:pointer;transition:.15s;text-decoration:none;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);margin-top:8px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.mbtn:hover{border-color:var(--neon);color:var(--txt)}
.mbtn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.mbtn.neon{background:var(--neon);color:#101010;border-color:var(--neon)}
.mbtn.neon:hover{background:#101010;color:var(--neon)}

/* ===== GURU OVERLAY FULLSCREEN ===== */
#guruModal{position:fixed;inset:0;z-index:85;display:none;flex-direction:column;
  background:var(--bg);overflow-y:auto;overflow-x:hidden}
#guruModal.open{display:flex}
#guruModal .g-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#guruModal .g-bg .bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),
                   linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:44px 44px}
#guruModal .g-bg .glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
#guruModal .g-bg .g1{width:420px;height:420px;background:var(--glow1);opacity:var(--glow1o);top:-150px;left:-130px}
#guruModal .g-bg .g2{width:400px;height:400px;background:var(--glow2);opacity:var(--glow2o);bottom:-140px;right:-120px}
#guruModal .scanlines{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.g-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line2);backdrop-filter:blur(8px)}
.g-topbar .g-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;
  letter-spacing:1.5px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  cursor:pointer;transition:.15s;font-family:var(--mono);font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.g-topbar .g-back:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.g-topbar .g-back:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.g-topbar .g-label{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--dim2)}
.g-wrap{position:relative;z-index:2;flex:1;width:100%;max-width:100%;margin:0 auto;padding:16px 16px 32px;display:flex;flex-direction:column}
.gpanel{background:var(--panel);border:1px solid var(--line2);position:relative;box-shadow:var(--shadow);flex:1;width:100%;min-height:calc(100dvh - 72px);
  animation:gSlide .28s ease}
@keyframes gSlide{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.gpanel .corner{position:absolute;width:13px;height:13px;z-index:2}
.gpanel .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.gpanel .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.gpanel .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.gpanel .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.g-hero{padding:32px 24px 22px;text-align:center;border-bottom:1px solid var(--line)}
.g-avatar-ring{width:110px;height:110px;margin:0 auto 14px;position:relative;
  display:flex;align-items:center;justify-content:center}
.g-avatar-ring::before{content:'';position:absolute;inset:0;border-radius:50%;
  border:2px dashed var(--neon);animation:spin 14s linear infinite}
.g-avatar-ring::after{content:'';position:absolute;inset:6px;border-radius:50%;
  border:1px solid var(--ring2);opacity:.6;animation:spin 9s linear infinite reverse}
.g-avatar{width:86px;height:86px;border-radius:50%;background:#FFFFFF;
  border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:26px;letter-spacing:1px;
  color:#101010;position:relative;z-index:1;overflow:hidden}
.g-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.g-avatar .g-init{position:relative;z-index:0}
.g-tag{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:2px;
  padding:4px 11px;border:1px solid var(--tagc);color:var(--tagc);margin-bottom:10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.g-tag .led{width:6px;height:6px;background:var(--neon);animation:blink 1.6s infinite}
.g-name{font-family:var(--disp);font-weight:700;font-size:clamp(22px,6vw,30px);
  letter-spacing:1.5px;color:var(--txt);line-height:1.15;margin-bottom:4px}
.g-role{font-family:var(--disp);font-weight:600;font-size:13px;letter-spacing:2px;
  color:var(--acc);margin-bottom:6px}
.g-mapel{font-size:12px;color:var(--dim);letter-spacing:.4px}
.g-body{padding:18px 22px 24px}
.g-sec{margin-bottom:16px}
.g-sec-title{display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2.5px;color:var(--dim2)}
.g-sec-title i{color:var(--neon);font-size:11px}
.g-sec-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.g-bio{font-size:12.5px;color:var(--txt);line-height:1.7}
.g-bio b{color:var(--bio-bc);font-weight:700;padding:0 3px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}
.g-chips{display:flex;flex-wrap:wrap;gap:7px}
.g-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;
  border:1px solid var(--line2);background:var(--panel2);
  font-size:10.5px;letter-spacing:.6px;color:var(--dim2);transition:.15s}
.g-chip::before{content:'';width:6px;height:6px;background:var(--neon);flex:0 0 auto}
.g-chip:hover{border-color:var(--neon);color:var(--txt)}
.g-actions{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;width:100%;padding:12px;
  font:700 12px var(--mono);letter-spacing:1.8px;cursor:pointer;transition:.15s;text-decoration:none;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.g-btn:hover{border-color:var(--neon);color:var(--txt)}
.g-btn:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.g-btn.neon{background:var(--neon);color:#101010;border-color:var(--neon)}
.g-btn.neon:hover{background:#101010;color:var(--neon)}
.g-btn i{font-size:13px}
.g-motto{margin-top:18px;border:1px solid var(--line2);background:var(--panel2);
  padding:14px 18px;text-align:center;position:relative;overflow:hidden}
.g-motto::before{content:'';position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(45deg,transparent 0 12px,var(--stripes) 12px 14px)}
.g-motto p{position:relative;font-family:var(--disp);font-weight:600;font-size:13px;
  letter-spacing:1.2px;color:var(--txt)}
.g-motto p i{color:var(--neon);margin:0 6px}
body.guru-open{overflow:hidden}
.tcard{cursor:pointer}
.tcard[role="button"]{user-select:none}


/* ===== TOAST ===== */
#toasts{position:fixed;right:14px;bottom:14px;display:flex;flex-direction:column;gap:8px;z-index:90;max-width:calc(100vw - 28px)}
.toast{background:var(--toast-bg);border:1px solid var(--line2);border-left:3px solid var(--neon);
  padding:10px 15px;font-size:11.5px;color:var(--txt);box-shadow:var(--shadow);
  animation:tIn .25s;transition:opacity .3s,transform .3s,background-color .3s,color .3s,border-color .3s}
.toast i{margin-right:8px;color:var(--acc)}
.toast.out{opacity:0;transform:translateX(24px)}
@keyframes tIn{from{opacity:0;transform:translateX(24px)}}

.rv{opacity:0;transform:translateY(14px);transition:.7s ease}
.rv.on{opacity:1;transform:none}

.profile,.about,.stat,.motto,.mpanel,.tag,.divider,.grp-title,.lname,.ldesc,.role,.bio,.clock,
.foot,.foot a,.mtitle,.msub,.grp-line,.fitem,.chip,.snum,.slab,.tname,.tmapel,.tcard,
.gpanel,.g-name,.g-role,.g-mapel,.g-bio,.g-chip,.g-btn,.g-sec-title,.g-tag,.g-topbar,.g-back,
.sambutan,.s-name,.s-jabatan,.s-quote,.team-card,.team-name,.team-role,.vmt-card,.vmt-text,.vmt-list,
.logo-box,.logo-title,.logo-filosofi,.ipanel,.i-title,.i-text,.i-row,.i-rval,.grp-ico,.grp-title,.foot,.footnav a,.foot-social a,.foot-name{
  transition:background-color .3s ease,color .3s ease,border-color .3s ease}


/* ===== SAMBUTAN KEPALA ===== */
.sambutan{border:1px solid var(--line2);background:var(--panel);padding:18px;box-shadow:var(--shadow-sm);position:relative}
.sambutan .corner{position:absolute;width:13px;height:13px;z-index:2}
.sambutan .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.sambutan .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.sambutan .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.sambutan .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.s-head{display:flex;gap:14px;align-items:flex-start;margin-bottom:14px}
.s-photo{width:72px;height:72px;flex:0 0 auto;position:relative;overflow:hidden;
  background:#FFFFFF;border:1px solid var(--line2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:20px;letter-spacing:.5px;color:#101010;
  transition:transform .18s ease,border-color .25s ease}
.sambutan:hover .s-photo{border-color:var(--neon);transform:scale(1.04)}
.s-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.s-meta{flex:1;min-width:0}
.s-name{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.5px;color:var(--txt);line-height:1.25}
.s-jabatan{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:1.5px;color:var(--acc);margin-top:3px}
.s-quote{font-size:11.5px;color:var(--txt);line-height:1.7;position:relative;padding-left:14px;border-left:2px solid var(--neon)}
.s-quote b{color:var(--bio-bc);font-weight:700;padding:0 2px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}

/* ===== TEAM KONCENTRASI ===== */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.team-card--lead{border-color:color-mix(in srgb,var(--neon) 55%,var(--line2));background:color-mix(in srgb,var(--neon) 6%,var(--panel))}
.team-card--lead .team-role{color:var(--neon);font-weight:700;letter-spacing:1px}
.team-badge{position:absolute;top:8px;right:8px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;
  font-size:10px;color:#101010;background:var(--neon);border-radius:50%;z-index:2;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--neon) 25%,transparent)}
.team-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 10px 12px;cursor:pointer;
  border:1px solid var(--line2);background:var(--panel);box-shadow:var(--shadow-sm);
  position:relative;overflow:hidden;transition:.18s;cursor:pointer}
.team-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--neon);transform:scaleY(0);transition:transform .18s}
.team-card:hover{border-color:var(--neon);background:var(--hov);transform:translateY(-2px)}
.team-card:hover::before{transform:scaleY(1)}
.team-av{width:52px;height:52px;margin-bottom:9px;position:relative;overflow:hidden;
  background:#FFFFFF;border:1px solid var(--line2);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.5px;color:#101010;
  transition:transform .18s ease,border-color .25s ease}
.team-card:hover .team-av{border-color:var(--neon);transform:scale(1.06)}
.team-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1}
.team-name{font-family:var(--disp);font-weight:600;font-size:12.5px;letter-spacing:.3px;color:var(--txt);line-height:1.3;overflow-wrap:anywhere;word-break:break-word}
.team-role{font-size:9px;letter-spacing:1.2px;color:var(--acc);margin-top:3px}

/* ===== IMAGE HOVER PREVIEW ===== */
.team-av,
.tinit,
.s-photo,
.maskot-preview,
.tagline-preview,
.gal-item,
.avatar{
  overflow:hidden;
}
.team-av img,
.tinit img,
.s-photo img,
.maskot-preview img,
.tagline-preview img,
.gal-item img,
.avatar img{
  transition:transform .45s cubic-bezier(.22,1,.36,1), filter .35s ease;
  will-change:transform;
  transform-origin:center center;
}
.team-card:hover .team-av img,
.tcard:hover .tinit img,
.sambutan:hover .s-photo img,
.maskot-card:hover .maskot-preview img,
.tagline-card:hover .tagline-preview img,
.gal-item:hover img,
.profile:hover .avatar img{
  transform:scale(1.12);
  filter:brightness(1.06) contrast(1.03);
}
/* subtle shine sweep on photo containers */
.team-av::after,
.tinit::after,
.gal-item::after{
  content:'';
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 40%, rgba(255,255,255,.22) 50%, transparent 60%);
  transform:translateX(-120%);
  transition:none;
}
.team-card:hover .team-av::after,
.tcard:hover .tinit::after,
.gal-item:hover::after{
  animation:imgShine .7s ease forwards;
}
@keyframes imgShine{
  from{transform:translateX(-120%)}
  to{transform:translateX(120%)}
}
/* stronger gallery zoom (override previous milder scale) */
.gal-item img{transition:transform .5s cubic-bezier(.22,1,.36,1), filter .35s ease}
.gal-item:hover img{transform:scale(1.14);filter:brightness(1.05)}
/* reduce motion */
@media (prefers-reduced-motion:reduce){
  .team-av img,.tinit img,.s-photo img,.maskot-preview img,.tagline-preview img,.gal-item img,.avatar img{
    transition:none !important; transform:none !important; filter:none !important;
  }
  .team-av::after,.tinit::after,.gal-item::after{display:none}
}

/* ===== VISI MISI TUJUAN ===== */
.vmt{display:flex;flex-direction:column;gap:10px}
.vmt-card{border:1px solid var(--line2);background:var(--panel);padding:14px 16px;box-shadow:var(--shadow-sm);
  border-top:2px solid var(--neon);position:relative;overflow:hidden;transition:.18s}
.vmt-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--neon);transform:scaleY(0);transition:transform .18s}
.vmt-card:hover{border-color:var(--neon);background:var(--hov)}
.vmt-card:hover::before{transform:scaleY(1)}
.vmt-label{display:inline-flex;align-items:center;gap:7px;font-family:var(--disp);font-weight:700;
  font-size:12px;letter-spacing:2px;color:var(--acc);margin-bottom:8px}
.vmt-label i{font-size:11px;color:var(--neon)}
.vmt-text{font-size:11.5px;color:var(--txt);line-height:1.7}
.vmt-text b{color:var(--bio-bc);font-weight:700;padding:0 2px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}
.vmt-list{margin:0;padding-left:16px;font-size:11.5px;color:var(--txt);line-height:1.75}
.vmt-list li{margin-bottom:4px}
.vmt-list li::marker{color:var(--neon)}

/* ===== LOGO & FILOSOFI ===== */
.logo-box{border:1px solid var(--line2);background:var(--panel);padding:22px 18px;box-shadow:var(--shadow-sm);
  text-align:center;position:relative}
.logo-box .corner{position:absolute;width:13px;height:13px;z-index:2}
.logo-box .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.logo-box .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.logo-box .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.logo-box .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.logo-mark{width:88px;height:88px;margin:0 auto 14px;display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--line2);position:relative;
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:transform .18s ease,border-color .25s ease}
.logo-box:hover .logo-mark{border-color:var(--neon);transform:scale(1.04)}
.logo-mark i{font-size:36px;color:var(--neon)}
.logo-mark img{width:100%;height:100%;object-fit:contain;padding:8px}
.logo-title{font-family:var(--disp);font-weight:700;font-size:15px;letter-spacing:1.5px;color:var(--txt);margin-bottom:4px}
.logo-sub{font-family:var(--disp);font-weight:600;font-size:11px;letter-spacing:2px;color:var(--acc);margin-bottom:14px}
.logo-filosofi{text-align:left;font-size:11.5px;color:var(--txt);line-height:1.7;margin-bottom:10px;line-height:1.7}
.logo-filosofi b{color:var(--bio-bc);font-weight:700;padding:0 2px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}
.logo-colors{display:flex;justify-content:center;gap:10px;margin-top:14px;flex-wrap:wrap}
.logo-swatch{display:inline-flex;align-items:center;gap:7px;padding:5px 10px;font-size:9.5px;letter-spacing:.8px;color:var(--dim2);
  border:1px solid var(--line2);background:var(--panel2);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
.logo-swatch span{width:12px;height:12px;border:1px solid var(--line2);flex:0 0 auto}
.logo-swatch .c-neon{background:#FECE02}
.logo-swatch .c-ink{background:#101010}
.logo-swatch .c-white{background:#FFFFFF}

@media(max-width:480px){
  .team-grid{grid-template-columns:1fr;gap:8px}
  .s-head{flex-direction:column;align-items:center;text-align:center}
  .s-quote{border-left:none;padding-left:0;border-top:2px solid var(--neon);padding-top:12px}
}


/* ===== INFO OVERLAY FULLSCREEN (Tentang / Hubungi / Kontak) ===== */
#infoModal{position:fixed;inset:0;z-index:82;display:none;flex-direction:column;
  background:var(--bg);overflow-y:auto;overflow-x:hidden}
#infoModal.open{display:flex}
#infoModal .i-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#infoModal .i-bg .bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),
                   linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:44px 44px}
#infoModal .i-bg .glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
#infoModal .i-bg .g1{width:420px;height:420px;background:var(--glow1);opacity:var(--glow1o);top:-150px;left:-130px}
#infoModal .i-bg .g2{width:400px;height:400px;background:var(--glow2);opacity:var(--glow2o);bottom:-140px;right:-120px}
#infoModal .i-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.45;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.i-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line2);backdrop-filter:blur(8px)}
.i-topbar .i-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;
  letter-spacing:1.5px;border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  cursor:pointer;transition:.15s;font-family:var(--mono);font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.i-topbar .i-back:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.i-topbar .i-back:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.i-topbar .i-label{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--dim2)}
.i-wrap{position:relative;z-index:2;flex:1;width:100%;max-width:100%;margin:0 auto;padding:16px 16px 32px;display:flex;flex-direction:column}
.ipanel{background:var(--panel);border:1px solid var(--line2);position:relative;box-shadow:var(--shadow);flex:1;width:100%;min-height:calc(100dvh - 72px);
  animation:gSlide .28s ease;display:flex;flex-direction:column}
.ipanel .corner{position:absolute;width:13px;height:13px;z-index:2}
.ipanel .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.ipanel .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.ipanel .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.ipanel .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.i-head{padding:28px 22px 18px;text-align:center;border-bottom:1px solid var(--line)}
.i-icon{width:56px;height:56px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;
  background:var(--neon);border:1px solid var(--neon);color:#101010;font-size:22px;
  clip-path:polygon(9px 0,100% 0,100% calc(100% - 9px),calc(100% - 9px) 100%,0 100%,0 9px)}
.i-title{font-family:var(--disp);font-weight:700;font-size:clamp(18px,5vw,24px);letter-spacing:2px;color:var(--txt);margin-bottom:4px}
.i-sub{font-size:10px;letter-spacing:1.8px;color:var(--dim)}
.i-body{padding:18px 22px 10px}
.i-text{font-size:12.5px;color:var(--txt);line-height:1.7;margin-bottom:12px}
.i-text b{color:var(--bio-bc);font-weight:700;padding:0 2px;
  background:linear-gradient(transparent 58%,var(--hl) 58%)}
.i-list{margin:0 0 14px;padding-left:18px;font-size:12.5px;color:var(--txt);line-height:1.75}
.i-list li{margin-bottom:5px}
.i-list li::marker{color:var(--neon)}
.i-row{display:flex;align-items:flex-start;gap:12px;padding:12px 13px;margin-bottom:8px;
  border:1px solid var(--line2);background:var(--panel2);text-decoration:none;color:var(--txt);
  transition:.15s;position:relative;overflow:hidden;box-shadow:var(--shadow-sm)}
.i-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--neon);transform:scaleY(0);transition:transform .15s}
.i-row:hover{border-color:var(--neon);background:var(--hov);transform:translateX(2px)}
.i-row:hover::before{transform:scaleY(1)}
.i-row:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.i-rico{width:40px;height:40px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  background:var(--neon);border:1px solid var(--neon);color:#101010;font-size:15px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
  transition:transform .18s ease,border-color .25s ease,background .2s ease,color .2s ease}
.i-row:hover .i-rico{border-color:#101010;transform:scale(1.06);background:#101010;color:var(--neon)}
.i-rinfo{flex:1;min-width:0}
.i-rlab{display:block;font-size:9.5px;letter-spacing:1.3px;color:var(--dim);margin-bottom:2px}
.i-rval{display:block;font-family:var(--disp);font-weight:600;font-size:14px;letter-spacing:.3px;color:var(--txt);
  word-break:break-word;line-height:1.35}
.i-foot{padding:10px 22px 22px}
.i-foot .g-btn,.i-foot .mbtn{margin-top:0}
body.info-open{overflow:hidden}


/* Frame putih → panel gelap di dark mode */
html[data-theme="dark"] .avatar,
html[data-theme="cyberpunk"] .avatar,
html[data-theme="matrix"] .avatar,
html[data-theme="dark"] .avatar img,
html[data-theme="cyberpunk"] .avatar img,
html[data-theme="matrix"] .avatar img,
html[data-theme="dark"] .tinit,
html[data-theme="cyberpunk"] .tinit,
html[data-theme="matrix"] .tinit,
html[data-theme="dark"] .s-photo,
html[data-theme="cyberpunk"] .s-photo,
html[data-theme="matrix"] .s-photo,
html[data-theme="dark"] .team-av,
html[data-theme="cyberpunk"] .team-av,
html[data-theme="matrix"] .team-av,
html[data-theme="dark"] .logo-mark,
html[data-theme="cyberpunk"] .logo-mark,
html[data-theme="matrix"] .logo-mark,
html[data-theme="dark"] .g-avatar,
html[data-theme="cyberpunk"] .g-avatar,
html[data-theme="matrix"] .g-avatar,
html[data-theme="dark"] .foot-social a,
html[data-theme="cyberpunk"] .foot-social a,
html[data-theme="matrix"] .foot-social a{
  background:var(--panel2)!important;
  color:var(--txt)!important;
  border-color:var(--line2)!important;
}
html[data-theme="dark"] .foot-social a:hover,
html[data-theme="cyberpunk"] .foot-social a:hover,
html[data-theme="matrix"] .foot-social a:hover{
  background:var(--neon)!important;
  border-color:var(--neon)!important;
  color:#101010!important;
}


/* ===== RESPONSIVE ===== */
@media(max-width:560px){
  .wrap{max-width:100%;padding:0 max(var(--page-gutter-sm), env(safe-area-inset-right,0px)) 0 max(var(--page-gutter-sm), env(safe-area-inset-left,0px))}
  .team-grid{grid-template-columns:1fr;gap:8px}
}
@media(min-width:561px) and (max-width:720px){
  .team-grid{grid-template-columns:repeat(3,1fr);gap:8px}
}
@media(max-width:520px){
  .tgrid{grid-template-columns:1fr}
  .gal-grid{grid-template-columns:1fr;gap:10px}
  .gal-item{aspect-ratio:16/9}
}
@media(max-width:480px){
  body{padding:64px 0 28px}
  .profile{padding:22px 14px 18px}
  .lico{width:36px;height:36px;font-size:14px}
  .lname{font-size:14px}
  .feat,.stats{grid-template-columns:repeat(2,1fr);gap:8px}
  .tinit{width:48px;height:72px;aspect-ratio:2/3;font-size:13px}
  .tname{font-size:13px}
  .tmapel{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .quick{gap:6px}
  .qbtn{padding:6px 10px;font-size:10px}
  .hero-slogan{padding:5px 10px;gap:6px}
  .hero-slogan .hs-text{font-size:12px;letter-spacing:1.5px}
  .s-head{flex-direction:column;align-items:center;text-align:center}
  .s-quote{border-left:none;padding-left:0;border-top:2px solid var(--neon);padding-top:12px}
  .maskot-preview{width:100px;height:100px}
  .tagline-preview{max-width:100%}
  .foot{padding:18px 12px 16px}
  .footnav{gap:6px}
  .footnav a{padding:5px 9px;font-size:9px}
  .g-wrap,.i-wrap,.msk-wrap,.tl-wrap{padding:16px 10px 32px}
  .gal-stage{padding:12px 10px 24px}
  .gal-frame{width:100%;max-height:60vh}
  .gal-frame img{max-height:calc(60vh - 20px)}
  .grp-title{font-size:12px;letter-spacing:2px}
  .grp-ico{width:26px;height:26px;font-size:10px}
}
@media(max-width:360px){
  body{padding:60px 0 24px}
  .snum{font-size:18px}
  .slab{font-size:7.5px}
  .fitem{font-size:7.5px;padding:8px 3px}
  .tcard{padding:9px 10px}
  .team-grid{gap:6px}
  .team-av{width:46px;height:46px;font-size:12px}
  .team-name{font-size:11.5px}
  .stat{padding:11px 4px 9px}
  .profile h1{letter-spacing:1px}
  .hero-slogan .hs-text{font-size:11px;letter-spacing:1px}
  .foot-social a{width:34px;height:34px;font-size:13px}
}


/* ============================================================
   CONSOLIDATED LAYOUT + THEME (single source, no duplicate ::before)
   ============================================================ */
:root{
  --cut:10px;
  --cut-sm:7px;
  --cut-xs:5px;
  --box-clip:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  --box-clip-sm:polygon(var(--cut-sm) 0,100% 0,100% calc(100% - var(--cut-sm)),calc(100% - var(--cut-sm)) 100%,0 100%,0 var(--cut-sm));
  --box-clip-xs:polygon(var(--cut-xs) 0,100% 0,100% calc(100% - var(--cut-xs)),calc(100% - var(--cut-xs)) 100%,0 100%,0 var(--cut-xs));
}

/* --- Overlay full viewport --- */
#guruModal.open,#infoModal.open,#maskotModal.open,#taglineModal.open,#galeriModal.open,#linkModal.open{
  display:flex;flex-direction:column;width:100%;height:100%;height:100dvh;max-width:100vw;overflow-y:auto;overflow-x:hidden;
}
.g-wrap,.i-wrap,.msk-wrap,.tl-wrap,.lk-wrap{
  max-width:100%;width:100%;flex:1 1 auto;box-sizing:border-box;padding:16px 16px 32px;
}
.gpanel,.ipanel,.msk-panel,.tl-panel,.lk-panel{
  width:100%;max-width:100%;box-sizing:border-box;min-height:calc(100dvh - 72px);
}
.gal-frame{width:min(1100px,100%);max-height:78vh}
.gal-frame img{max-height:calc(78vh - 24px);width:100%;object-fit:contain}
@media(min-width:900px){
  .g-wrap,.i-wrap,.msk-wrap,.tl-wrap,.lk-wrap{padding:20px 28px 40px}
  .gpanel,.ipanel,.msk-panel,.tl-panel,.lk-panel{padding-left:clamp(24px,4vw,48px);padding-right:clamp(24px,4vw,48px)}
}

/* --- Main page width --- */
.wrap{max-width:100%;width:100%;margin:0 auto;position:relative;z-index:1;padding-left:max(var(--page-gutter), env(safe-area-inset-left,0px));padding-right:max(var(--page-gutter), env(safe-area-inset-right,0px));box-sizing:border-box}
body{
  padding-top:calc(72px + env(safe-area-inset-top,0px));
  padding-bottom:calc(34px + env(safe-area-inset-bottom,0px));
  padding-left:0;
  padding-right:0;
}
.grp{margin-top:clamp(18px,3vw,28px)}

/* Grids */
@media(min-width:640px){
  .wrap{max-width:100%}
  .course-grid,.testi-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .gal-grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .tgrid{grid-template-columns:repeat(3,1fr);gap:12px}
}
@media(min-width:900px){
  .wrap{max-width:100%}
  .gal-grid{grid-template-columns:repeat(4,1fr)}
  .vmt{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .vmt-card{height:100%}
  .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;align-items:start}
  .cinfo{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .cmap{grid-column:1;aspect-ratio:4/3;min-height:280px}
  .cform{grid-column:2}
  .c-actions{flex-direction:row;flex-wrap:wrap}
  .c-actions .mbtn{flex:1;min-width:160px}
}
@media(min-width:1100px){
  .wrap{max-width:100%}
  .course-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:639px){
  .course-grid,.testi-grid,.yt-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
  .gal-grid{grid-template-columns:1fr}
  .feat,.stats{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:380px){
  .team-grid{grid-template-columns:1fr}
}
/* TEAM: 3 kolom di desktop/tablet, 1 kolom di mobile sempit sudah di atas */

/* --- Guru: 2 per row, card = photo | text, photo 4:6 --- */
.tgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media(max-width:900px){
  .tgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}
@media(max-width:520px){
  .tgrid{grid-template-columns:1fr;gap:10px}
}

.tcard{
  display:grid;grid-template-columns:auto 1fr;align-items:center;gap:12px;
  padding:12px 14px;min-height:88px;
}
.tinit{
  width:48px;height:72px;aspect-ratio:2/3;flex:0 0 auto;
  clip-path:var(--box-clip-xs);
  position:relative;overflow:hidden;
}
.tinit img,.team-av img,.s-photo img{object-fit:cover;object-position:center top}
.tmeta{min-width:0;text-align:left}
.tname{overflow-wrap:anywhere;font-size:clamp(12.5px,1.6vw,14.5px)}
.tmapel{
  white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;font-size:clamp(10px,1.3vw,11.5px);
}
.team-av{width:56px;height:84px;aspect-ratio:2/3;clip-path:var(--box-clip-xs)}
.s-photo{width:64px;height:96px;aspect-ratio:2/3;flex:0 0 auto;clip-path:var(--box-clip-xs)}
@media(min-width:768px){
  .tcard{padding:14px 16px;gap:14px;min-height:96px}
  .tinit{width:56px;height:84px}
  .team-av{width:64px;height:96px}
  .s-photo{width:72px;height:108px}
}
@media(min-width:1100px){
  .tinit{width:64px;height:96px}
  .tcard{min-height:108px}
}
@media(max-width:360px){
  .tgrid{grid-template-columns:1fr;gap:10px}
}

/* --- Logo / Maskot / Tagline: 2 kolom desktop --- */
.id-split{display:flex;flex-direction:column;align-items:center;gap:16px;text-align:center}
.id-split .id-visual{width:100%;display:flex;align-items:center;justify-content:center}
.id-split .id-copy{width:100%;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:0}
.id-split .logo-filosofi{text-align:center;max-width:54ch;margin:0 auto}
.id-split .logo-mark{width:min(160px,42vw);height:min(160px,42vw);display:flex;align-items:center;justify-content:center;overflow:hidden}
.id-split .logo-mark img{width:100%;height:100%;object-fit:contain;padding:12px;background:#fff}
html[data-theme="dark"] .id-split .logo-mark img,
html[data-theme="cyberpunk"] .id-split .logo-mark img,
html[data-theme="matrix"] .id-split .logo-mark img{background:var(--panel2)}
.id-split .maskot-preview{width:min(180px,50vw);height:min(180px,50vw);margin:0}
.id-split .tagline-preview{width:100%;max-width:320px;margin:0;aspect-ratio:16/7}
@media(min-width:768px){
  .id-split{
    display:grid;grid-template-columns:minmax(200px,.9fr) minmax(260px,1.2fr);
    align-items:center;gap:24px 28px;text-align:left;padding:22px;
  }
  .id-split .id-copy{align-items:flex-start;text-align:left}
  .id-split .logo-filosofi{text-align:left;margin:0;max-width:none}
  .id-split .logo-colors{justify-content:flex-start}
  .id-split .logo-mark{width:min(200px,100%);height:min(200px,28vw)}
  .id-split .maskot-preview{width:min(220px,100%);height:min(220px,28vw)}
  .id-split .tagline-preview{max-width:100%;width:100%}
}

/* --- Cut-corner + sharp ticks (TR & BL only) --- */
.profile,.about,.sambutan,.vmt-card,.stat,.tcard,.team-card,.course-card,.yt-card,
.faq-item,.testi-card,.contact-box,.logo-box,.maskot-card,.tagline-card,.motto,.foot,
.lnk,.gal-item,.cmap,.cinfo a,.cinfo .cinfo-row{
  clip-path:var(--box-clip-sm);
  position:relative;
}
.profile,.sambutan,.contact-box,.logo-box,.maskot-card,.tagline-card,.foot,.motto,.about,
.gpanel,.ipanel,.msk-panel,.tl-panel,.lk-panel,.mpanel{
  clip-path:var(--box-clip);
}
.chip,.course-tag,.fitem,.gmap-badge,.tag,.qbtn,.mbtn,.grp-ico{
  clip-path:var(--box-clip-xs);
}

/* Sharp-corner neon ticks via background (TR + BL) */
.profile,.about,.sambutan,.vmt-card,.stat,.tcard,.team-card,.course-card,.yt-card,
.faq-item,.testi-card,.contact-box,.logo-box,.maskot-card,.tagline-card,.motto,.foot,
.gal-item,.lnk,.gpanel,.ipanel,.msk-panel,.tl-panel,.lk-panel,.mpanel{
  background-color:var(--panel);
  background-image:
    linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon),var(--neon));
  background-size:12px 2px,2px 12px,12px 2px,2px 12px;
  background-position:right top,right top,left bottom,left bottom;
  background-repeat:no-repeat;
}
.motto{background-color:var(--panel2)}
.stat{
  border-top:2px solid var(--neon);
  background-color:var(--panel);
}

/* Left accent bar — ONLY for elements that do NOT already define ::before in base CSS.
   Base already has: .tcard, .team-card, .course-card, .faq-item, .lnk
   Add once for the rest: */
/* Accent bar for shells that never defined ::before in base */
.about::before,
.yt-card::before,
.sambutan::before,
.logo-box::before,
.maskot-card::before,
.tagline-card::before,
.contact-box::before,
.motto::before,
.fitem::before{
  content:'';
  position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--neon);
  transform:scaleY(0);transform-origin:center;
  transition:transform .2s ease;z-index:2;pointer-events:none;
}
.about:hover::before,
.yt-card:hover::before,
.sambutan:hover::before,
.logo-box:hover::before,
.maskot-card:hover::before,
.tagline-card:hover::before,
.contact-box:hover::before,
.motto:hover::before,
.fitem:hover::before,
.vmt-card:hover::before,
.testi-card:hover::before,
.gal-item:hover::before,
.faq-item.open::before{
  transform:scaleY(1);
}

/* Ensure base accent bars also expand on hover (already in base for most) */
.tcard:hover::before,
.team-card:hover::before,
.course-card:hover::before,
.lnk:hover::before,
.faq-item:hover::before{transform:scaleY(1)}

/* Top gold inset on hero panels */
.profile,.sambutan,.contact-box,.logo-box,.maskot-card,.tagline-card,.foot{
  box-shadow:var(--shadow-sm),inset 0 2px 0 0 rgba(254,206,2,.35);
}
html[data-theme="dark"] .profile,
html[data-theme="cyberpunk"] .profile,
html[data-theme="matrix"] .profile,
html[data-theme="dark"] .sambutan,
html[data-theme="cyberpunk"] .sambutan,
html[data-theme="matrix"] .sambutan,
html[data-theme="dark"] .contact-box,
html[data-theme="cyberpunk"] .contact-box,
html[data-theme="matrix"] .contact-box,
html[data-theme="dark"] .logo-box,
html[data-theme="cyberpunk"] .logo-box,
html[data-theme="matrix"] .logo-box,
html[data-theme="dark"] .maskot-card,
html[data-theme="cyberpunk"] .maskot-card,
html[data-theme="matrix"] .maskot-card,
html[data-theme="dark"] .tagline-card,
html[data-theme="cyberpunk"] .tagline-card,
html[data-theme="matrix"] .tagline-card,
html[data-theme="dark"] .foot,
html[data-theme="cyberpunk"] .foot,
html[data-theme="matrix"] .foot{
  box-shadow:var(--shadow-sm),inset 0 2px 0 0 rgba(254,206,2,.22);
}

/* Unified hover border */
.profile:hover,.about:hover,.sambutan:hover,.vmt-card:hover,.stat:hover,
.tcard:hover,.team-card:hover,.course-card:hover,.yt-card:hover,
.faq-item:hover,.faq-item.open,.testi-card:hover,.contact-box:hover,
.logo-box:hover,.maskot-card:hover,.tagline-card:hover,.motto:hover,
.foot:hover,.lnk:hover,.gal-item:hover,.fitem:hover,.chip:hover,.cmap:hover{
  border-color:var(--neon);
}

/* HTML corners: sharp TR/BL strong, cut TL/BR soft */
.corner.tl,.corner.br{opacity:.2;filter:none}
.corner.tr,.corner.bl{opacity:1;filter:drop-shadow(0 0 3px rgba(254,206,2,.4))}

/* Form + small UI */
.cfield input,.cfield textarea,.cfield select{clip-path:var(--box-clip-sm)}
@media(max-width:640px){
  .cfield input,.cfield textarea,.cfield select{font-size:16px}
  .qbtn,.mbtn,.faq-q,.tcard,.team-card,.course-card,.gal-item,.lnk{min-height:44px}
}

/* .lnk shimmer (::after) must stay — do not override with corner ticks on ::after */
/* base .lnk::after already handles shimmer */

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important
  }
  .tcard:hover,.team-card:hover,.course-card:hover,.gal-item:hover,
  .maskot-card:hover,.tagline-card:hover,.fitem:hover,.lnk:hover{transform:none}
  .avatar-ring::before{animation:none !important}
  .scanlines{opacity:.15}
}


/* ===== UTIL (legacy util-top hidden; scroll-top tetap) ===== */
.util-top{display:none !important}

.util-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
  width:42px;
  min-height:42px;
  padding:6px 3px 5px;
  border:1px solid var(--line2);
  background:var(--panel);
  color:var(--txt);
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  clip-path:var(--box-clip-xs);
  position:relative;
  transition:border-color .18s, background .18s, color .18s, transform .15s, opacity .2s;
  background-color:var(--panel);
  background-image:
    linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon),var(--neon));
  background-size:7px 2px, 2px 7px;
  background-position:right top, right top;
  background-repeat:no-repeat;
}
.util-box i{font-size:13px;color:var(--neon);line-height:1}
.util-label{
  font:700 7.5px var(--mono);
  letter-spacing:.3px;
  text-transform:uppercase;
  color:var(--dim);
  line-height:1.05;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
}
.util-box:hover,
.util-box:focus-visible{
  border-color:var(--neon);
  background:var(--hov);
  outline:none;
}
.util-box:hover i,
.util-box:focus-visible i{color:var(--txt)}
.util-box[aria-pressed="true"]{
  border-color:var(--neon);
  background:var(--neon);
  color:#101010;
}
.util-box[aria-pressed="true"] i,
.util-box[aria-pressed="true"] .util-label{color:#101010}

/* Hanya gulir ke atas di pojok kanan bawah */
.util-topbtn{
  position:fixed;
  right:max(12px, env(safe-area-inset-right,0px));
  bottom:max(16px, env(safe-area-inset-bottom,0px));
  z-index:70;
  width:48px;
  min-height:48px;
  opacity:0;
  pointer-events:none;
  transform:translateY(8px);
}
.util-topbtn.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:none;
}
.util-topbtn i{font-size:15px}

/* Overlays search / TOC */
.util-overlay{
  position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.45);
  display:flex;align-items:flex-start;justify-content:center;padding:72px 14px 24px;
}
.util-overlay[hidden]{display:none}
.util-sheet{
  width:min(420px,100%);max-height:min(70vh,560px);overflow:hidden;
  background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow);
  clip-path:var(--box-clip);display:flex;flex-direction:column;
  background-color:var(--panel);
  background-image:
    linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--neon),var(--neon)),
    linear-gradient(var(--neon),var(--neon)),linear-gradient(var(--neon),var(--neon));
  background-size:12px 2px,2px 12px,12px 2px,2px 12px;
  background-position:right top,right top,left bottom,left bottom;
  background-repeat:no-repeat;
}
.util-sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border-bottom:1px solid var(--line2);
}
.util-sheet-title{font:700 12px var(--disp);letter-spacing:1.5px;display:flex;align-items:center;gap:8px}
.util-sheet-title i{color:var(--neon)}
.util-sheet-close{
  width:34px;height:34px;border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  cursor:pointer;clip-path:var(--box-clip-xs);font-size:14px;
}
.util-sheet-close:hover{border-color:var(--neon);color:var(--neon)}
.util-sheet-body{padding:12px 14px 16px;overflow-y:auto;flex:1}
.util-search-input{
  width:100%;padding:12px 14px;font:400 15px var(--mono);color:var(--txt);
  background:var(--panel2);border:1px solid var(--line2);outline:none;
  clip-path:var(--box-clip-sm);
}
.util-search-input:focus{border-color:var(--neon);box-shadow:inset 0 0 0 1px var(--neon)}
.util-search-meta{font-size:10px;color:var(--dim);margin:8px 0 10px;letter-spacing:.5px}
.util-search-results{display:flex;flex-direction:column;gap:6px}
.util-hit{
  display:block;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);cursor:pointer;clip-path:var(--box-clip-xs);
  font:500 12px var(--mono);line-height:1.45;
}
.util-hit:hover,.util-hit:focus{border-color:var(--neon);background:var(--hov);outline:none}
.util-hit mark{background:var(--neon);color:#101010;padding:0 2px}
.util-hit .uh-sec{display:block;font-size:9.5px;color:var(--dim);letter-spacing:1px;margin-bottom:3px}
.toc-list{display:flex;flex-direction:column;gap:4px}
.toc-link{
  display:flex;align-items:center;gap:8px;padding:9px 11px;border:1px solid transparent;
  color:var(--txt);font:600 11.5px var(--mono);letter-spacing:.3px;
  clip-path:var(--box-clip-xs);cursor:pointer;background:transparent;width:100%;text-align:left;
}
.toc-link:hover,.toc-link:focus{border-color:var(--neon);background:var(--hov);outline:none}
.toc-link .toc-num{color:var(--neon);font-size:10px;min-width:1.6em}

body.read-mode{--bg:#f7f4ea;--panel:#fffdf6;--panel2:#f3efe3;--txt:#1a1a1a;--dim:#5c5c5c}
html[data-theme="dark"] body.read-mode,
html[data-theme="cyberpunk"] body.read-mode,
html[data-theme="matrix"] body.read-mode{--bg:#12100c;--panel:#1a1712;--panel2:#221e18;--txt:#f0e6d2;--dim:#a89880}
body.read-mode .bg-grid,body.read-mode .glow,body.read-mode .scanlines{opacity:.15}
body.read-mode .wrap{max-width:720px}
body.read-mode{font-size:16.5px;line-height:1.8}
body.font-lg{font-size:17px}
body.font-xl{font-size:18.5px}

body.guru-open .util-top,
body.maskot-open .util-top,
body.tagline-open .util-top,
body.galeri-open .util-top,
body.info-open .util-top,
body.link-open .util-top,
body.guru-open .util-topbtn,
body.maskot-open .util-topbtn,
body.tagline-open .util-topbtn,
body.galeri-open .util-topbtn,
body.info-open .util-topbtn,
body.link-open .util-topbtn{opacity:.3;pointer-events:none}

@media(max-width:520px){
  .util-top{gap:5px;right:max(56px, calc(env(safe-area-inset-right,0px) + 46px))}
  .util-box{width:38px;min-height:38px;padding:5px 2px 4px}
  .util-label{font-size:6.5px}
  .util-box i{font-size:12px}
}

@media print{
  /* Sembunyikan elemen interaktif & dekorasi */
  .topnav,
  .util-top,
  .util-topbtn,
  .theme-toggle,
  .bg-grid,
  .glow,
  .scanlines,
  .corner,
  .avatar-ring::before,
  .avatar-ring::after,
  #toasts,
  .util-overlay,
  [id$="Modal"],
  .qbtn#btnQR,
  .qbtn#btnShare,
  .qbtn#btnVcf,
  .clock,
  .led,
  .hs-dot{display:none !important}

  /* Reset body */
  html,body{
    background:#fff !important;
    color:#111 !important;
    padding:10mm 12mm !important;
    font-size:11pt !important;
    line-height:1.45 !important;
    overflow:visible !important
  }

  /* Konten penuh lebar */
  .wrap{max-width:100% !important;padding:0 !important;margin:0 !important}

  /* Kartu & panel */
  .profile,.grp,.vmt-card,.stat,.chip,.tcard,.team-card,.course-card,
  .gal-item,.fitem,.lnk,.maskot-card,.tagline-card,.testi-card{
    background:#fff !important;
    border:1px solid #ccc !important;
    box-shadow:none !important;
    break-inside:avoid;
    page-break-inside:avoid
  }

  /* Tipografi */
  h1,h2,h3,.grp-title,.role,.hero-slogan,.hs-text{
    color:#000 !important;
    text-shadow:none !important
  }
  .glitch{text-shadow:none !important}
  .glitch::before,.glitch::after{display:none !important}
  a{color:#000 !important;text-decoration:underline}
  /* Tampilkan URL di sebelah link penting */
  a.lnk[href]::after,
  a.qbtn[href]::after{
    content:" (" attr(href) ")";
    font-size:8pt;
    color:#555;
    word-break:break-all
  }

  /* Gambar */
  img{max-width:100% !important;height:auto !important;break-inside:avoid}
  .avatar img,.topnav-brand img{max-height:48px !important}

  /* Grid jadi satu kolom agar rapi di kertas */
  .course-grid,.testi-grid,.yt-grid,.gal-grid,.tgrid,.vmt,.stats,.chips{
    display:block !important
  }
  .stat,.chip,.course-card,.gal-item,.tcard,.team-card{
    display:inline-block !important;
    width:auto !important;
    margin:4px 6px 4px 0 !important;
    vertical-align:top
  }

  /* Hilangkan animasi / transform */
  *{
    animation:none !important;
    transition:none !important;
    transform:none !important;
    filter:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important
  }

  /* Page break yang lebih baik */
  .grp{page-break-inside:avoid;margin-top:14px !important}
  .profile{page-break-after:avoid}

  /* Sembunyikan YouTube iframe (tidak berguna di kertas) */
  .yt-grid iframe,
  #gmapCanvas,
  #gmapFallback{display:none !important}

  /* Form kontak: tampilkan saja field, tanpa tombol kirim */
  .cform button,
  #cSubmit,#cWa{display:none !important}
}


/* ===== Progressive Enhancement (no-js) ===== */
html.no-js .theme-toggle,
html.no-js .topnav,
html.no-js .util-top,
html.no-js .util-topbtn,
html.no-js #btnScrollTop,
html.no-js .scanlines{display:none !important}
html.no-js .bg-grid,
html.no-js .glow{opacity:.4}
/* Ensure content remains fully readable without JS */
html.no-js .grp,
html.no-js .profile{opacity:1 !important;transform:none !important}
/* Hide interactive-only overlays by default; JS opens them */
html.no-js [id$="Modal"],
html.no-js .util-overlay{display:none !important}

/* ===== STANDALONE GURU PAGE ===== */
body.guru-page{
  padding-top:calc(56px + env(safe-area-inset-top,0px));
  padding-bottom:calc(24px + env(safe-area-inset-bottom,0px));
}
body.guru-page .g-topbar{
  position:fixed;top:0;left:0;right:0;z-index:55;
  padding-top:calc(12px + env(safe-area-inset-top,0px));
}
body.guru-page .g-topbar .theme-toggle{
  width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:var(--panel2);color:var(--txt);cursor:pointer;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
body.guru-page .g-wrap{max-width:720px;margin:0 auto}
body.guru-page .gpanel{min-height:auto}
body.guru-page a.g-back{text-decoration:none}


/* ===== OVERLAY SYSTEM (rapi & konsisten) ===== */
.ov-shell{
  position:fixed;inset:0;z-index:84;display:none;flex-direction:column;
  background:var(--bg);overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
}
.ov-shell.open,
#maskotModal.open,#taglineModal.open,#infoModal.open,#linkModal.open,#guruModal.open,#galeriModal.open{
  display:flex;
}
.ov-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.ov-scan{
  position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px);
}
.ov-topbar{
  position:sticky;top:0;z-index:10;
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;
  padding:calc(10px + env(safe-area-inset-top,0px)) max(14px, env(safe-area-inset-right,0px)) 10px max(14px, env(safe-area-inset-left,0px));
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  border-bottom:1px solid var(--line2);
  backdrop-filter:blur(12px) saturate(1.2);
  -webkit-backdrop-filter:blur(12px) saturate(1.2);
}
.ov-topbar .ov-back,
.msk-topbar .msk-back,.tl-topbar .tl-back,.i-topbar .i-back,.lk-topbar .lk-back,.g-topbar .g-back,.gal-topbar .gal-back{
  justify-self:start;
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 14px;font-size:11px;letter-spacing:1.5px;
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);
  cursor:pointer;transition:.15s;font-family:var(--mono);font-weight:700;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.ov-topbar .ov-back:hover,
.msk-topbar .msk-back:hover,.tl-topbar .tl-back:hover,.i-topbar .i-back:hover,
.lk-topbar .lk-back:hover,.g-topbar .g-back:hover,.gal-topbar .gal-back:hover{
  background:var(--neon);border-color:var(--neon);color:#101010;
}
.ov-label,
.msk-label,.tl-label,.i-label,.lk-label,.g-label,.gal-label{
  justify-self:center;
  font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--dim2);
  white-space:nowrap;
}
.ov-topbar-spacer{justify-self:end;width:1px;height:1px;opacity:0}
.ov-wrap,
.msk-wrap,.tl-wrap,.i-wrap,.lk-wrap,.g-wrap,.logo-ov-wrap{
  position:relative;z-index:2;flex:1 1 auto;width:100%;max-width:100%;margin:0 auto;
  padding:16px max(var(--page-gutter), env(safe-area-inset-right,0px)) calc(28px + env(safe-area-inset-bottom,0px)) max(var(--page-gutter), env(safe-area-inset-left,0px));
  display:flex;flex-direction:column;
  box-sizing:border-box;
}
.ov-panel,
.msk-panel,.tl-panel,.ipanel,.lk-panel,.gpanel{
  background:var(--panel);border:1px solid var(--line2);position:relative;
  box-shadow:var(--shadow);flex:1;width:100%;min-height:auto;
  animation:ovIn .28s ease;
}
@keyframes ovIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.ov-panel .corner,.msk-panel .corner,.tl-panel .corner,.ipanel .corner,.lk-panel .corner,.gpanel .corner{
  position:absolute;width:13px;height:13px;z-index:2;pointer-events:none;
}
.ov-head,.i-head,.g-hero{text-align:center;padding:28px 22px 18px;border-bottom:1px solid var(--line)}
.ov-body,.i-body,.g-body{padding:18px 22px 8px}
.ov-bio,.msk-bio,.tl-bio,.g-bio{font-size:13px;line-height:1.75;color:var(--txt)}
.ov-actions,.msk-actions,.tl-actions,.lk-actions,.i-foot,.g-actions{
  display:flex;flex-direction:column;gap:8px;padding:8px 22px 22px;
}
.ov-actions .mbtn,.msk-actions .mbtn,.tl-actions .mbtn,.lk-actions .mbtn,.i-foot .mbtn{width:100%}
.ov-hero,.msk-hero,.tl-hero{
  display:flex;align-items:center;justify-content:center;
  padding:28px 20px 12px;position:relative;
}
.ov-hero img,.msk-hero img,.tl-hero img{max-width:100%;height:auto;display:block;margin:0 auto}
.ov-tag,.msk-tag,.tl-tag,.g-tag{
  display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:2px;
  padding:4px 11px;border:1px solid var(--tagc);color:var(--tagc);margin:0 auto 10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.msk-title,.tl-title,.i-title,.lk-title,.g-name{
  font-family:var(--disp);font-weight:700;letter-spacing:1px;color:var(--txt);
  text-align:center;line-height:1.2;margin:0 16px 6px;
}
.msk-role,.tl-role,.i-sub,.lk-desc,.g-role,.g-mapel{text-align:center;color:var(--dim);margin:0 16px 8px}
/* QR modal */
.ov-modal#modal,.ov-modal{
  position:fixed;inset:0;z-index:90;display:none;align-items:center;justify-content:center;
  background:var(--backdrop);padding:max(16px, env(safe-area-inset-top,0px)) 16px;
}
#modal.open,.ov-modal.open{display:flex}
.ov-card.mpanel{
  width:min(400px,94%);padding:22px 20px 18px;text-align:center;
  animation:ovIn .25s ease;
}
.ov-qrbox{display:flex;justify-content:center;margin:14px 0 16px}
.ov-qrbox canvas,.ov-qrbox img{border-radius:0;clip-path:var(--box-clip-xs)}
/* Galeri stage */
.ov-stage.gal-stage,.gal-stage{
  position:relative;z-index:2;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:12px max(14px, env(safe-area-inset-right,0px)) calc(24px + env(safe-area-inset-bottom,0px)) max(14px, env(safe-area-inset-left,0px));
  gap:14px;
}
.ov-frame.gal-frame,.gal-frame{
  width:min(960px,100%);max-height:min(70vh,720px);
  background:var(--panel);border:1px solid var(--line2);position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.gal-frame img{width:100%;max-height:min(68vh,700px);object-fit:contain;display:block;background:var(--panel2)}
.ov-meta.gal-meta,.gal-meta{text-align:center}
.gal-cap-full{font-family:var(--disp);font-weight:700;font-size:16px;color:var(--txt);letter-spacing:.5px}
.gal-idx{font-size:11px;color:var(--dim);margin-top:4px;letter-spacing:1px}
.ov-nav.gal-nav,.gal-nav{display:flex;gap:10px}
.gal-nav button{
  width:44px;height:44px;border:1px solid var(--line2);background:var(--panel);color:var(--txt);
  cursor:pointer;transition:.15s;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
}
.gal-nav button:hover{background:var(--neon);border-color:var(--neon);color:#101010}
/* Scroll lock when any overlay open */
body.maskot-open,body.tagline-open,body.galeri-open,body.guru-open,
body.info-open,body.link-open,body.modal-open{overflow:hidden}
/* Util sheets */
.util-overlay{
  position:fixed;inset:0;z-index:88;display:flex;align-items:flex-end;justify-content:center;
  background:var(--backdrop);padding:env(safe-area-inset-top,0px) 12px env(safe-area-inset-bottom,0px);
}
.util-overlay[hidden]{display:none !important}
.util-sheet{
  width:min(520px,100%);max-height:min(78vh,640px);overflow:hidden;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line2);border-bottom:none;
  border-radius:0;box-shadow:var(--shadow);
  clip-path:polygon(var(--cut) 0,100% 0,100% 100%,0 100%,0 var(--cut));
  animation:ovIn .22s ease;
}
.util-sheet-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line2);
}
.util-sheet-title{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:1.5px;color:var(--txt)}
.util-sheet-close{
  width:36px;height:36px;border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  cursor:pointer;display:inline-flex;align-items:center;justify-content:center;
}
.util-sheet-close:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.util-sheet-body{padding:14px 16px 18px;overflow-y:auto}
.util-search-input{
  width:100%;padding:12px 14px;border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  font-family:var(--mono);font-size:14px;outline:none;
}
.util-search-input:focus{border-color:var(--neon);box-shadow:0 0 0 2px color-mix(in srgb,var(--neon) 25%,transparent)}
.util-search-meta{font-size:11px;color:var(--dim);margin:8px 0 10px}
@media (prefers-reduced-motion:reduce){
  .ov-panel,.msk-panel,.tl-panel,.ipanel,.lk-panel,.gpanel,.util-sheet,.ov-card{animation:none !important}
}
@media(max-width:480px){
  .ov-wrap,.msk-wrap,.tl-wrap,.i-wrap,.lk-wrap,.g-wrap{padding-left:10px;padding-right:10px}
  .ov-body,.i-body,.g-body,.ov-actions,.msk-actions,.tl-actions,.lk-actions,.i-foot{padding-left:14px;padding-right:14px}
  .msk-title,.tl-title,.i-title,.lk-title,.g-name{font-size:clamp(18px,6vw,24px)}
}



/* ===== TOPBAR OVERLAY FIX: jarak KEMBALI vs label ===== */
.ov-topbar,
.g-topbar,
.msk-topbar,
.tl-topbar,
.i-topbar,
.lk-topbar,
.gal-topbar{
  display:grid !important;
  grid-template-columns:minmax(120px,1fr) auto minmax(120px,1fr) !important;
  align-items:center !important;
  justify-content:normal !important;
  column-gap:12px !important;
  gap:10px 12px !important;
}
.ov-topbar .ov-back,
.g-topbar .g-back,
.msk-topbar .msk-back,
.tl-topbar .tl-back,
.i-topbar .i-back,
.lk-topbar .lk-back,
.gal-topbar .gal-back{
  justify-self:start !important;
  flex-shrink:0;
  max-width:100%;
  white-space:nowrap;
}
.ov-label,
.g-label,
.msk-label,
.tl-label,
.i-label,
.lk-label,
.gal-label{
  justify-self:center !important;
  text-align:center;
  margin:0 !important;
  padding:0 6px;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  pointer-events:none;
}
.ov-topbar-spacer,
.g-topbar .theme-toggle{
  justify-self:end !important;
}
/* mobile: tombol lebih kompak agar tidak tabrakan */
@media(max-width:420px){
  .ov-topbar,
  .g-topbar,
  .msk-topbar,
  .tl-topbar,
  .i-topbar,
  .lk-topbar,
  .gal-topbar{
    grid-template-columns:minmax(96px,auto) minmax(0,1fr) minmax(40px,auto) !important;
    column-gap:8px !important;
  }
  .ov-topbar .ov-back,
  .g-topbar .g-back,
  .msk-topbar .msk-back,
  .tl-topbar .tl-back,
  .i-topbar .i-back,
  .lk-topbar .lk-back,
  .gal-topbar .gal-back{
    padding:8px 10px;
    font-size:10px;
    letter-spacing:1px;
  }
  .ov-label,
  .g-label,
  .msk-label,
  .tl-label,
  .i-label,
  .lk-label,
  .gal-label{
    font-size:11px;
    letter-spacing:1.2px;
  }
}

/* end topbar fix */


/* Guru overlay: tombol buka tab baru di topbar */
.g-open-tab, .ov-open-tab{
  justify-self:end;
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 12px;font-size:10px;letter-spacing:1px;font-weight:700;font-family:var(--mono);
  border:1px solid var(--line2);background:var(--panel2);color:var(--dim);text-decoration:none;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
  transition:.15s;white-space:nowrap;
}
.g-open-tab:hover, .ov-open-tab:hover{
  background:var(--neon);border-color:var(--neon);color:#101010;
}
@media(max-width:420px){
  .g-open-tab-text{display:none}
  .g-open-tab, .ov-open-tab{padding:8px 10px}
}


/* Tombol tutup overlay (X) */
.ov-topbar-right{
  justify-self:end;
  display:inline-flex;align-items:center;gap:8px;
}
.ov-close{
  width:36px;height:36px;flex:0 0 auto;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  cursor:pointer;transition:.15s;font-size:15px;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px);
}
.ov-close:hover{
  background:var(--neon);border-color:var(--neon);color:#101010;
}
.ov-close:focus-visible{outline:none;box-shadow:0 0 0 2px var(--acc)}


/* ===== SEMUA GAMBAR: proporsi alami (lebar/tinggi mengikuti file) ===== */
img,
picture img{
  max-width:100%;
  height:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* Kontainer foto umum: jangan paksa tinggi tetap */
.tinit,
.team-av,
.s-photo,
.maskot-preview,
.tagline-preview,
.logo-mark,
.avatar,
.g-avatar,
.testi-av,
.gal-item,
.id-split .maskot-preview,
.id-split .tagline-preview,
.id-split .logo-mark{
  height:auto !important;
  max-height:none;
  overflow:visible !important;
  aspect-ratio:auto !important;
}

/* Gambar di dalam kontainer */
.tinit img,
.team-av img,
.s-photo img,
.maskot-preview img,
.tagline-preview img,
.logo-mark img,
.avatar img,
.g-avatar img,
.testi-av img,
.gal-item img,
.msk-hero img,
.tl-hero img,
.ov-hero img,
.gal-frame img,
.foot-logo img{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  object-fit:contain !important;
  display:block;
}

/* Lebar kontainer responsif, tinggi ikut gambar */
.tinit{
  width:clamp(52px, 14vw, 80px) !important;
  flex:0 0 auto;
}
.team-av{
  width:clamp(64px, 16vw, 100px) !important;
  margin-left:auto;margin-right:auto;
}
.s-photo{
  width:clamp(72px, 18vw, 110px) !important;
}
.avatar{
  width:clamp(72px, 18vw, 110px) !important;
  height:auto !important;
  border-radius:0;
}
.g-avatar{
  width:clamp(96px, 24vw, 130px) !important;
  height:auto !important;
  border-radius:50%;
  overflow:hidden !important;
}
.g-avatar img{
  border-radius:50%;
}
.g-avatar-ring{
  width:auto !important;
  height:auto !important;
  min-width:clamp(110px, 28vw, 150px);
  min-height:clamp(110px, 28vw, 150px);
  display:flex !important;
  align-items:center;
  justify-content:center;
  padding:12px;
}
.testi-av{
  width:48px !important;
  height:auto !important;
  border-radius:50%;
  overflow:hidden !important;
}
.testi-av img{border-radius:50%}

/* Logo / maskot / tagline di section */
.logo-mark,
.id-split .logo-mark{
  width:min(200px, 55vw) !important;
  height:auto !important;
}
.maskot-preview,
.id-split .maskot-preview{
  width:min(240px, 72vw) !important;
  height:auto !important;
  padding:10px;
  box-sizing:border-box;
}
.tagline-preview,
.id-split .tagline-preview{
  width:min(360px, 92%) !important;
  height:auto !important;
  max-width:100%;
}
.tagline-preview img{
  max-height:min(160px, 30vh) !important;
}

/* Galeri: tinggi ikut proporsi, tidak crop */
.gal-item{
  width:100% !important;
  height:auto !important;
  aspect-ratio:auto !important;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--panel2);
  min-height:0;
}
.gal-item img{
  width:100% !important;
  height:auto !important;
  max-height:min(280px, 40vh) !important;
}
.gal-frame{
  width:min(960px, 100%) !important;
  height:auto !important;
  max-height:none !important;
}
.gal-frame img{
  width:100% !important;
  height:auto !important;
  max-height:min(70vh, 720px) !important;
}

/* Overlay hero */
.msk-hero,
.tl-hero,
.ov-hero{
  width:min(320px, 86vw) !important;
  height:auto !important;
  max-height:none !important;
}
.msk-hero img,
.tl-hero img,
.ov-hero img,
.msk-hero picture img,
.tl-hero picture img{
  width:100% !important;
  height:auto !important;
  max-height:min(50vh, 380px) !important;
}

/* picture wrapper */
.maskot-preview picture,
.tagline-preview picture,
.logo-mark picture,
.msk-hero picture,
.tl-hero picture,
.ov-hero picture{
  display:block;
  width:100%;
  line-height:0;
}

/* Hover: zoom ringan tanpa memotong */
.team-card:hover .team-av,
.tcard:hover .tinit,
.maskot-card:hover .maskot-preview,
.tagline-card:hover .tagline-preview,
.gal-item:hover{
  overflow:visible !important;
}
.team-card:hover .team-av img,
.tcard:hover .tinit img,
.sambutan:hover .s-photo img,
.maskot-card:hover .maskot-preview img,
.tagline-card:hover .tagline-preview img,
.gal-item:hover img,
.profile:hover .avatar img{
  transform:scale(1.05);
}

/* Foot logo */
.foot-logo{
  width:48px;
  height:auto !important;
}
.foot-logo img{
  width:100%;
  height:auto !important;
}

@media(min-width:768px){
  .id-split .logo-mark{width:min(220px, 100%) !important}
  .id-split .maskot-preview{width:min(260px, 100%) !important}
  .id-split .tagline-preview{width:min(100%, 420px) !important}
}
@media(max-width:480px){
  .tinit{width:clamp(48px, 18vw, 64px) !important}
  .team-av{width:clamp(56px, 20vw, 80px) !important}
  .s-photo,.avatar{width:clamp(64px, 22vw, 88px) !important}
  .gal-item img{max-height:min(200px, 36vh) !important}
}

/* Sembunyikan inisial jika foto sudah tampil */
.tinit.has-photo .tin,
.team-av.has-photo .tin,
.s-photo.has-photo .tin,
.g-avatar.has-photo .g-init,
.avatar.has-photo .tin,
.tinit:has(img[src]:not([src=""])) .tin,
.team-av:has(img[src]:not([src=""])) .tin,
.s-photo:has(img[src]:not([src=""])) .tin,
.g-avatar:has(img[src]:not([src=""])) .g-init{
  display:none !important;
}
/* Foto selalu di atas, latar solid agar inisial tidak tembus */
.tinit img,
.team-av img,
.s-photo img,
.g-avatar img,
.avatar img{
  z-index:2 !important;
  background:var(--panel2);
}

/* SAMBUTAN + TEAM: sembunyikan span inisial saat ada foto */
.s-photo > span[aria-hidden],
.team-av > span[aria-hidden],
.s-photo > span,
.team-av > span{
  position:relative;
  z-index:0;
}
.s-photo.has-photo > span,
.team-av.has-photo > span,
.s-photo:has(img[src]:not([src=""])) > span,
.team-av:has(img[src]:not([src=""])) > span{
  display:none !important;
  visibility:hidden !important;
  font-size:0 !important;
}
.s-photo img,
.team-av img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  z-index:3 !important;
  background:#fff;
}
html[data-theme="dark"] .s-photo img,
html[data-theme="cyberpunk"] .s-photo img,
html[data-theme="matrix"] .s-photo img,
html[data-theme="dark"] .team-av img,
html[data-theme="cyberpunk"] .team-av img,
html[data-theme="matrix"] .team-av img{
  background:var(--panel2);
}


.s-photo:has(img) > .av-init,
.team-av:has(img) > .av-init,
.tinit:has(img) > .tin,
.tinit:has(img) > .av-init{
  display:none !important;
}


/* ===== RESTORE LOGO RING ANIMATION (profil) ===== */
.avatar-ring{
  width:104px !important;
  height:104px !important;
  margin:0 auto 14px !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  aspect-ratio:1 / 1 !important;
}
.avatar-ring::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  border:2px dashed var(--neon) !important;
  animation:spin 14s linear infinite !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.avatar-ring::after{
  content:'' !important;
  position:absolute !important;
  inset:6px !important;
  border-radius:50% !important;
  border:1px solid var(--ring2) !important;
  opacity:.6 !important;
  animation:spin 9s linear infinite reverse !important;
  pointer-events:none !important;
  z-index:0 !important;
}
.avatar-ring .avatar{
  width:80px !important;
  height:80px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  position:relative !important;
  z-index:1 !important;
  flex:0 0 auto !important;
  aspect-ratio:1 / 1 !important;
}
.avatar-ring .avatar img,
.avatar-ring .avatar picture,
.avatar-ring .avatar picture img{
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  padding:8px !important;
  border-radius:50% !important;
}
/* Guru overlay ring juga */
.g-avatar-ring{
  width:110px !important;
  height:110px !important;
  min-width:110px !important;
  min-height:110px !important;
  margin:0 auto 14px !important;
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  overflow:visible !important;
  aspect-ratio:1 / 1 !important;
}
.g-avatar-ring::before{
  content:'' !important;
  position:absolute !important;
  inset:0 !important;
  border-radius:50% !important;
  border:2px dashed var(--neon) !important;
  animation:spin 14s linear infinite !important;
  pointer-events:none !important;
}
.g-avatar-ring::after{
  content:'' !important;
  position:absolute !important;
  inset:6px !important;
  border-radius:50% !important;
  border:1px solid var(--ring2) !important;
  opacity:.6 !important;
  animation:spin 9s linear infinite reverse !important;
  pointer-events:none !important;
}
.g-avatar-ring .g-avatar{
  width:86px !important;
  height:86px !important;
  border-radius:50% !important;
  overflow:hidden !important;
  position:relative !important;
  z-index:1 !important;
  aspect-ratio:1 / 1 !important;
}
@media (prefers-reduced-motion:reduce){
  .avatar-ring::before,
  .avatar-ring::after,
  .g-avatar-ring::before,
  .g-avatar-ring::after{
    animation:none !important;
  }
}


/* ===== FIX: SAMBUTAN + TEAM foto tampil lagi ===== */
.s-photo{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
  flex:0 0 auto !important;
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  aspect-ratio:1 / 1 !important;
}
.team-av{
  width:72px !important;
  height:72px !important;
  min-width:72px !important;
  min-height:72px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:9px !important;
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  aspect-ratio:1 / 1 !important;
}
.s-photo img,
.team-av img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:contain !important;
  object-position:center center !important;
  z-index:3 !important;
  display:block !important;
  background:#fff;
  padding:4px;
  box-sizing:border-box;
}
html[data-theme="dark"] .s-photo img,
html[data-theme="cyberpunk"] .s-photo img,
html[data-theme="matrix"] .s-photo img,
html[data-theme="dark"] .team-av img,
html[data-theme="cyberpunk"] .team-av img,
html[data-theme="matrix"] .team-av img{
  background:var(--panel2);
}
/* inisial tetap tersembunyi jika ada img */
.s-photo:has(img) > span,
.team-av:has(img) > span,
.s-photo.has-photo > span,
.team-av.has-photo > span{
  display:none !important;
}
@media(max-width:480px){
  .s-photo{width:64px !important;height:64px !important;min-width:64px !important;min-height:64px !important}
  .team-av{width:64px !important;height:64px !important;min-width:64px !important;min-height:64px !important}
}


/* ===== SAMBUTAN + TEAM: dimensi sama dengan GURU FASILITATOR (.tinit) ===== */
.s-photo,
.team-av{
  width:48px !important;
  height:72px !important;
  min-width:48px !important;
  min-height:72px !important;
  max-width:48px !important;
  max-height:72px !important;
  aspect-ratio:2 / 3 !important;
  flex:0 0 auto !important;
  position:relative !important;
  overflow:hidden !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:#FFFFFF !important;
  border:1px solid var(--line2) !important;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px) !important;
  box-sizing:border-box !important;
}
.team-av{
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:9px !important;
}
.s-photo img,
.team-av img,
.tinit img{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  z-index:2 !important;
  display:block !important;
  padding:0 !important;
  background:#FFFFFF;
}
html[data-theme="dark"] .s-photo,
html[data-theme="cyberpunk"] .s-photo,
html[data-theme="matrix"] .s-photo,
html[data-theme="dark"] .team-av,
html[data-theme="cyberpunk"] .team-av,
html[data-theme="matrix"] .team-av,
html[data-theme="dark"] .tinit,
html[data-theme="cyberpunk"] .tinit,
html[data-theme="matrix"] .tinit{
  background:var(--panel2) !important;
}
html[data-theme="dark"] .s-photo img,
html[data-theme="cyberpunk"] .s-photo img,
html[data-theme="matrix"] .s-photo img,
html[data-theme="dark"] .team-av img,
html[data-theme="cyberpunk"] .team-av img,
html[data-theme="matrix"] .team-av img,
html[data-theme="dark"] .tinit img,
html[data-theme="cyberpunk"] .tinit img,
html[data-theme="matrix"] .tinit img{
  background:var(--panel2);
}
/* pastikan tinit juga konsisten */
.tinit{
  width:48px !important;
  height:72px !important;
  min-width:48px !important;
  min-height:72px !important;
  aspect-ratio:2 / 3 !important;
}
@media(max-width:480px){
  .s-photo,
  .team-av,
  .tinit{
    width:44px !important;
    height:66px !important;
    min-width:44px !important;
    min-height:66px !important;
    max-width:44px !important;
    max-height:66px !important;
  }
}


/* ===== Padding gambar di dalam frame ===== */
.tinit img,
.s-photo img,
.team-av img,
.g-avatar img,
.avatar img,
.testi-av img{
  padding:5px !important;
  box-sizing:border-box !important;
  object-fit:contain !important;
}
/* frame tetap solid di belakang padding */
.tinit,
.s-photo,
.team-av,
.g-avatar,
.avatar{
  background:#FFFFFF !important;
}
html[data-theme="dark"] .tinit,
html[data-theme="cyberpunk"] .tinit,
html[data-theme="matrix"] .tinit,
html[data-theme="dark"] .s-photo,
html[data-theme="cyberpunk"] .s-photo,
html[data-theme="matrix"] .s-photo,
html[data-theme="dark"] .team-av,
html[data-theme="cyberpunk"] .team-av,
html[data-theme="matrix"] .team-av,
html[data-theme="dark"] .g-avatar,
html[data-theme="cyberpunk"] .g-avatar,
html[data-theme="matrix"] .g-avatar,
html[data-theme="dark"] .avatar,
html[data-theme="cyberpunk"] .avatar,
html[data-theme="matrix"] .avatar{
  background:var(--panel2) !important;
}
/* logo / maskot / tagline di section */
.maskot-preview img,
.tagline-preview img,
.logo-mark img,
.msk-hero img,
.tl-hero img{
  padding:8px !important;
  box-sizing:border-box !important;
}
.gal-item img{
  padding:4px !important;
  box-sizing:border-box !important;
  object-fit:contain !important;
}




/* Logo card teaser + CTA */
.logo-box.logo-card{cursor:pointer;transition:border-color .18s,transform .18s,background .18s}
.logo-box.logo-card:hover{border-color:var(--neon);background:var(--hov);transform:translateY(-2px)}
.logo-box.logo-card:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--acc)}
.logo-filosofi--teaser{font-size:11.5px;color:var(--dim);margin-bottom:12px;line-height:1.55}
.logo-cta{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;font-size:10px;letter-spacing:1.5px;
  font-family:var(--disp);font-weight:700;border:1px solid var(--line2);background:var(--panel2);color:var(--txt);
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.logo-box.logo-card:hover .logo-cta{background:var(--neon);border-color:var(--neon);color:#101010}

/* ===== LOGO OVERLAY (rapih, selaras maskot/tagline) ===== */
#logoModal.ov-shell{z-index:80}
body.logo-open{overflow:hidden}
#logoModal .logo-ov-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
#logoModal .logo-ov-bg .bg-grid{position:absolute;inset:0;
  background-image:linear-gradient(var(--gridc) 1px,transparent 1px),linear-gradient(90deg,var(--gridc) 1px,transparent 1px);
  background-size:44px 44px}
#logoModal .logo-ov-bg .glow{position:absolute;border-radius:50%;filter:blur(100px);pointer-events:none}
#logoModal .logo-ov-bg .g1{width:420px;height:420px;background:var(--glow1);opacity:var(--glow1o);top:-150px;left:-130px}
#logoModal .logo-ov-bg .g2{width:400px;height:400px;background:var(--glow2);opacity:var(--glow2o);bottom:-140px;right:-120px}
#logoModal .logo-ov-scan{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.4;
  background:repeating-linear-gradient(0deg,var(--scan) 0 1px,transparent 1px 3px)}
.logo-ov-topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--line2)}
.logo-ov-topbar .logo-ov-back{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;font-size:11px;
  letter-spacing:1.5px;font-family:var(--disp);font-weight:700;border:1px solid var(--line2);
  background:var(--panel2);color:var(--txt);cursor:pointer;
  clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.logo-ov-topbar .logo-ov-back:hover{background:var(--neon);border-color:var(--neon);color:#101010}
.logo-ov-topbar .logo-ov-label{font-family:var(--disp);font-weight:700;font-size:12px;letter-spacing:2px;color:var(--dim2)}
.logo-ov-wrap{position:relative;z-index:2;flex:1;width:100%;max-width:100%;margin:0 auto;padding:16px 16px 32px;display:flex;flex-direction:column}
.logo-ov-panel{background:var(--panel);border:1px solid var(--line2);position:relative;box-shadow:var(--shadow);
  flex:1;width:100%;min-height:calc(100dvh - 72px);animation:gSlide .28s ease;text-align:center;padding:28px 22px 28px}
.logo-ov-panel .corner{position:absolute;width:13px;height:13px;z-index:2}
.logo-ov-panel .corner.tl{top:-1px;left:-1px;border-top:2px solid var(--neon);border-left:2px solid var(--neon)}
.logo-ov-panel .corner.tr{top:-1px;right:-1px;border-top:2px solid var(--neon);border-right:2px solid var(--neon)}
.logo-ov-panel .corner.bl{bottom:-1px;left:-1px;border-bottom:2px solid var(--neon);border-left:2px solid var(--neon)}
.logo-ov-panel .corner.br{bottom:-1px;right:-1px;border-bottom:2px solid var(--neon);border-right:2px solid var(--neon)}
.logo-ov-hero{
  width:min(220px,70vw);height:min(220px,70vw);margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;
  background:#FFFFFF;border:1px solid var(--line2);position:relative;overflow:hidden;
  clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)
}
.logo-ov-hero img{width:100%;height:100%;object-fit:contain;padding:16px}
.logo-ov-tag{display:inline-flex;align-items:center;gap:7px;font-size:9.5px;letter-spacing:2px;
  padding:4px 11px;border:1px solid var(--tagc);color:var(--tagc);margin-bottom:10px;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
.logo-ov-tag .led{width:6px;height:6px;background:var(--neon);animation:blink 1.6s infinite}
.logo-ov-title{font-family:var(--disp);font-weight:700;font-size:clamp(18px,4.5vw,24px);letter-spacing:1.5px;color:var(--txt);margin-bottom:6px}
.logo-ov-role{font-family:var(--disp);font-weight:600;font-size:12px;letter-spacing:1.5px;color:var(--acc);margin-bottom:16px}
.logo-ov-bio{font-size:12.5px;color:var(--txt);line-height:1.7;max-width:520px;margin:0 auto 20px;text-align:left}
.logo-ov-bio > p{margin:0 0 14px}
.logo-ov-bio b{color:var(--bio-bc);font-weight:700;padding:0 2px;background:linear-gradient(transparent 58%,var(--hl) 58%)}
.logo-ov-sec{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line2);background:var(--panel2);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.logo-ov-sec-title{font-family:var(--disp);font-weight:700;font-size:10px;letter-spacing:1.5px;color:var(--neon);
  margin-bottom:8px;display:flex;align-items:center;gap:8px}
.logo-ov-sec-title i{font-size:11px;opacity:.9}
.logo-ov-sec p{margin:0;font-size:12px;line-height:1.65;color:var(--txt)}
.logo-ov-swatches{justify-content:flex-start;margin-top:10px;gap:8px;flex-wrap:wrap}
.logo-ov-motto{
  margin-top:6px;padding:14px 16px;border:1px solid var(--line2);background:var(--panel);
  text-align:center;font-family:var(--disp);font-weight:700;font-size:13px;letter-spacing:.3px;color:var(--txt);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)
}
.logo-ov-motto i{color:var(--neon);font-size:11px;margin:0 6px;opacity:.85}
.logo-ov-actions{display:flex;flex-direction:column;gap:8px;max-width:320px;margin:0 auto}
@media(max-width:480px){
  .logo-ov-panel{padding:22px 14px 24px}
  .logo-ov-hero{width:min(180px,72vw);height:min(180px,72vw)}
  .logo-ov-sec{padding:10px 12px}
}


/* ============================================================
   GOLD TECH — background #FECE02 (brand gold field)
   ============================================================ */
html[data-theme="goldtech"] body,
html[data-theme="goldtech"]{
  background-color:#FECE02;
}

html[data-theme="goldtech"] .bg-grid{
  background-image:
    linear-gradient(rgba(16,16,16,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16,16,16,.06) 1px, transparent 1px);
  background-size:44px 44px;
  opacity:1;
}
html[data-theme="goldtech"] .glow.g1{
  background:#FFFFFF !important;
  opacity:.45 !important;
}
html[data-theme="goldtech"] .glow.g2{
  background:#FFF8D6 !important;
  opacity:.35 !important;
}
html[data-theme="goldtech"] .glow.g3{
  background:#C9A227 !important;
  opacity:.2 !important;
}

/* Panels: cream on gold for contrast */
html[data-theme="goldtech"] .profile,
html[data-theme="goldtech"] .sambutan-box,
html[data-theme="goldtech"] .visi-box,
html[data-theme="goldtech"] .contact-box,
html[data-theme="goldtech"] .partner-box,
html[data-theme="goldtech"] .faq-list,
html[data-theme="goldtech"] .media-links,
html[data-theme="goldtech"] .about,
html[data-theme="goldtech"] .stats-box,
html[data-theme="goldtech"] .pembelajaran-box,
html[data-theme="goldtech"] .logo-card,
html[data-theme="goldtech"] .maskot-card,
html[data-theme="goldtech"] .course-card,
html[data-theme="goldtech"] .tcard,
html[data-theme="goldtech"] .testi-card,
html[data-theme="goldtech"] .ban-carousel,
html[data-theme="goldtech"] .foot{
  background:var(--panel);
  border-color:rgba(16,16,16,.18);
  box-shadow:0 8px 28px rgba(16,16,16,.12), inset 0 1px 0 rgba(255,255,255,.5);
}

html[data-theme="goldtech"] .corner.tl,
html[data-theme="goldtech"] .corner.tr,
html[data-theme="goldtech"] .corner.bl,
html[data-theme="goldtech"] .corner.br{
  border-color:#101010 !important;
  opacity:.55;
}

html[data-theme="goldtech"] .led{
  background:#101010;
  box-shadow:0 0 8px rgba(16,16,16,.5);
  animation:gold-pulse-dark 2.2s ease-in-out infinite;
}
@keyframes gold-pulse-dark{
  0%,100%{opacity:1}
  50%{opacity:.4}
}

/* Titles: dark ink on gold field */
html[data-theme="goldtech"] h1 .glitch,
html[data-theme="goldtech"] .grp-title,
html[data-theme="goldtech"] .motto-text{
  background:none;
  -webkit-background-clip:unset;
  background-clip:unset;
  color:#101010;
  animation:none;
  text-shadow:0 1px 0 rgba(255,255,255,.35);
}
html[data-theme="goldtech"] .grp-title{
  color:#101010;
  font-weight:700;
}
html[data-theme="goldtech"] .hero-slogan .hs-text{
  color:#1A1408;
  font-weight:700;
}
html[data-theme="goldtech"] .hs-dot{
  background:#101010;
  box-shadow:none;
}

html[data-theme="goldtech"] .avatar-ring{
  background:conic-gradient(from 0deg, #101010, #5C4A10, #C9A227, #101010, #5C4A10, #101010);
  box-shadow:0 0 16px rgba(16,16,16,.2);
}

html[data-theme="goldtech"] .tag{
  background:rgba(16,16,16,.1);
  border:1px solid rgba(16,16,16,.35);
  color:#101010;
}

html[data-theme="goldtech"] .stat-num{
  color:#101010;
  text-shadow:none;
}
html[data-theme="goldtech"] .stat{
  background:var(--panel);
}

html[data-theme="goldtech"] .chip{
  border-color:rgba(16,16,16,.25);
  background:rgba(16,16,16,.06);
  color:#101010;
}
html[data-theme="goldtech"] .chip i{color:#101010}

html[data-theme="goldtech"] .course-card:hover,
html[data-theme="goldtech"] .tcard:hover,
html[data-theme="goldtech"] .partner-card:hover,
html[data-theme="goldtech"] .qbtn:hover{
  border-color:#101010;
  box-shadow:0 0 0 2px rgba(16,16,16,.2), 0 8px 20px rgba(16,16,16,.12);
  color:#101010;
}

html[data-theme="goldtech"] .mbtn.neon{
  background:#101010;
  border-color:#101010;
  color:#FECE02;
  font-weight:700;
}
html[data-theme="goldtech"] .mbtn.neon:hover{
  background:#1A1408;
  color:#FFE566;
  box-shadow:0 4px 16px rgba(16,16,16,.25);
  filter:none;
}

html[data-theme="goldtech"] .grp-ico{
  background:rgba(16,16,16,.1);
  color:#101010;
  border:1px solid rgba(16,16,16,.2);
}

html[data-theme="goldtech"] .theme-toggle:hover{
  background:#101010;
  border-color:#101010;
  color:#FECE02;
}

html[data-theme="goldtech"] .topnav{
  background:rgba(254,206,2,.92);
  border-bottom-color:rgba(16,16,16,.2);
  box-shadow:0 1px 0 rgba(16,16,16,.08);
  backdrop-filter:blur(12px);
}

html[data-theme="goldtech"] .scanlines{
  background:repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(16,16,16,.03) 2px,
    rgba(16,16,16,.03) 4px
  );
}

html[data-theme="goldtech"] .util-box{
  color:#1A1408;
}
html[data-theme="goldtech"] .util-box:hover{
  background:rgba(16,16,16,.1);
  color:#101010;
  border-color:rgba(16,16,16,.25);
}

html[data-theme="goldtech"] a{color:#1A1408}
html[data-theme="goldtech"] a:hover{color:#000}

html[data-theme="goldtech"] .foot{
  background:var(--panel);
  border-top:1px solid rgba(16,16,16,.15);
}

@media (prefers-reduced-motion: reduce){
  html[data-theme="goldtech"] .led{animation:none}
}


/* ============================================================
   OVERLAY enter / exit transitions (opacity + transform)
   display diganti visibility agar transition berjalan
   ============================================================ */
.ov-shell,
.ov-modal,
#modal.ov-modal,
#modal,
#infoModal,
#linkModal,
#galeriModal,
#guruModal,
#logoModal,
#maskotModal,
#taglineModal{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(14px) scale(.985);
  transition:
    opacity .28s cubic-bezier(.22,1,.36,1),
    transform .28s cubic-bezier(.22,1,.36,1),
    visibility 0s linear .28s;
}
.ov-shell.open,
.ov-modal.open,
#modal.open,
#infoModal.open,
#linkModal.open,
#galeriModal.open,
#guruModal.open,
#logoModal.open,
#maskotModal.open,
#taglineModal.open{
  display:flex !important;
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:none;
  transition:
    opacity .28s cubic-bezier(.22,1,.36,1),
    transform .28s cubic-bezier(.22,1,.36,1),
    visibility 0s linear 0s;
}
.ov-shell .ov-panel,
.ov-shell .ov-wrap,
.ov-modal .ov-card,
#modal .mpanel{
  transition:transform .32s cubic-bezier(.22,1,.36,1), opacity .28s ease;
}
@media (prefers-reduced-motion: reduce){
  .ov-shell, .ov-modal, #modal, #infoModal, #linkModal, #galeriModal,
  #guruModal, #logoModal, #maskotModal, #taglineModal,
  .ov-shell.open, .ov-modal.open, #modal.open{
    transition:none !important;
    transform:none !important;
  }
}

/* ============================================================
   ROADMAP / BLOG / AGENDA — angular clip-path + aksen neon
   Selaras dengan bahasa desain microsite (sudut runcing)
   ============================================================ */
.roadmap-box,
.agenda-box,
.rk-box{
  position:relative;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:0;
  padding:20px 16px 16px;
  box-shadow:var(--shadow-sm);
  clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
}
.roadmap-lead,
.agenda-lead,
.blog-note,
.rk-lead{
  font-size:13.5px;
  color:var(--dim);
  line-height:1.6;
  margin-bottom:16px;
}
.rk-lead{color:var(--dim2); margin:0 0 14px}
.rk-lead b{color:var(--txt)}
.rk-note{
  display:block;
  margin-top:6px;
  font-size:11.5px;
  color:var(--dim);
  font-family:var(--mono);
  letter-spacing:.02em;
}
.blog-note{margin-top:12px;margin-bottom:0;text-align:center;font-size:12px}

/* --- Roadmap belajar track --- */
.roadmap-track{
  list-style:none;
  margin:0;
  padding:0 0 0 8px;
  border-left:2px solid var(--line2);
  display:flex;
  flex-direction:column;
  gap:0;
}
.rm-step{
  position:relative;
  display:flex;
  gap:14px;
  padding:0 0 22px 12px;
}
.rm-step:last-child{padding-bottom:4px}
.rm-node{
  position:absolute;
  left:-22px;
  top:2px;
  width:28px;
  height:28px;
  border-radius:0;
  background:var(--panel2);
  border:2px solid var(--rm, var(--neon));
  color:var(--rm, var(--neon));
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:11px;
  z-index:1;
  box-shadow:0 0 0 3px var(--panel);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.rm-step.is-done .rm-node{
  background:var(--rm, var(--neon));
  color:var(--bg);
  border-color:var(--rm, var(--neon));
}
.rm-step.is-current .rm-node{
  box-shadow:0 0 0 3px var(--panel), 0 0 12px color-mix(in srgb, var(--rm, var(--neon)) 45%, transparent);
  animation:rm-pulse 2s ease-in-out infinite;
}
@keyframes rm-pulse{
  0%,100%{box-shadow:0 0 0 3px var(--panel), 0 0 8px color-mix(in srgb, var(--rm, var(--neon)) 35%, transparent)}
  50%{box-shadow:0 0 0 3px var(--panel), 0 0 16px color-mix(in srgb, var(--rm, var(--neon)) 55%, transparent)}
}
@media (prefers-reduced-motion:reduce){
  .rm-step.is-current .rm-node,
  .rk-item.is-current::before{animation:none}
}
.rm-phase{
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--rm, var(--neon));
  display:block;
  margin-bottom:4px;
}
.rm-title{
  font-size:15px;
  font-weight:700;
  margin:0 0 6px;
  color:var(--txt);
  font-family:var(--disp), var(--mono), sans-serif;
}
.rm-desc{
  font-size:13.5px;
  color:var(--dim2);
  line-height:1.55;
  margin:0 0 8px;
}
.rm-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  list-style:none;
  margin:0;
  padding:0;
}
.rm-tags li{
  font-size:10px;
  font-family:var(--mono);
  letter-spacing:.04em;
  padding:3px 8px;
  border-radius:0;
  background:var(--panel2);
  border:1px solid var(--line2);
  color:var(--dim);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}

/* --- Blog grid --- */
.blog-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
@media (min-width:560px){
  .blog-grid{grid-template-columns:repeat(2, 1fr)}
}
.blog-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:0;
  overflow:hidden;
  box-shadow:var(--shadow-sm);
  clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
  position:relative;
}
.blog-card::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:var(--neon);
  transform:scaleY(0);
  transform-origin:top;
  transition:transform .25s ease;
  z-index:2;
}
.blog-card:hover{
  border-color:var(--neon);
  transform:translateX(2px);
  box-shadow:var(--shadow);
}
.blog-card:hover::before{transform:scaleY(1)}
.blog-thumb{
  position:relative;
  height:0;
  padding-bottom:56.25%; /* 16:9 */
  overflow:hidden;
  background:var(--panel2);
  border-bottom:1px solid var(--line);
}
.blog-thumb picture,
.blog-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}
.blog-thumb img{
  object-fit:cover;
  object-position:center;
  transition:transform .4s ease;
}
.blog-card:hover .blog-thumb img{
  transform:scale(1.06);
}
.blog-thumb-ico{
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--neon) 92%, #101010);
  color:#101010;
  font-size:13px;
  border:1px solid color-mix(in srgb, var(--neon) 50%, transparent);
  clip-path:var(--box-clip-xs);
  pointer-events:none;
}
html[data-theme="goldtech"] .blog-thumb-ico{
  background:#101010;
  color:#FECE02;
  border-color:#101010;
}
.blog-body{padding:14px 14px 16px; display:flex; flex-direction:column; flex:1}
.blog-meta{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--dim);
  margin-bottom:6px;
  text-transform:uppercase;
}
.blog-title{
  font-size:14.5px;
  font-weight:700;
  margin:0 0 8px;
  line-height:1.35;
  color:var(--txt);
  font-family:var(--disp), sans-serif;
}
.blog-excerpt{
  font-size:13px;
  color:var(--dim2);
  line-height:1.55;
  margin:0 0 12px;
  flex:1;
}
.blog-more{
  align-self:flex-start;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:11px;
  font-weight:700;
  font-family:var(--mono);
  letter-spacing:.06em;
  color:var(--neon);
  padding:6px 12px;
  background:var(--panel2);
  border:1px solid var(--line2);
  border-radius:0;
  cursor:pointer;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  transition:background .2s, border-color .2s, color .2s;
}
.blog-more:hover{
  background:var(--neon);
  border-color:var(--neon);
  color:#101010;
}
.blog-more:focus-visible{outline:none; box-shadow:inset 0 0 0 2px var(--acc)}

/* --- Agenda --- */
.agenda-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ag-item{
  display:flex;
  gap:14px;
  padding:12px;
  background:var(--panel2);
  border:1px solid var(--line2);
  border-radius:0;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:border-color .25s ease, background .25s ease, transform .2s ease;
  position:relative;
}
.ag-item::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:var(--neon);
  opacity:0;
  transition:opacity .2s;
}
.ag-item:hover{
  border-color:var(--neon);
  transform:translateX(2px);
}
.ag-item:hover::before{opacity:1}
.ag-item.is-next{
  border-color:color-mix(in srgb, var(--neon) 55%, var(--line2));
  background:color-mix(in srgb, var(--neon) 8%, var(--panel2));
}
.ag-item.is-next::before{opacity:1}
.ag-date{
  flex-shrink:0;
  width:56px;
  text-align:center;
  padding:8px 4px;
  border-radius:0;
  background:var(--panel);
  border:1px solid var(--line2);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1.1;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.ag-day{
  font-family:var(--mono);
  font-size:1.35rem;
  font-weight:700;
  color:var(--neon);
}
.ag-mon{
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--dim);
  margin-top:2px;
}
.ag-yr{
  font-size:9px;
  color:var(--dim);
  letter-spacing:.04em;
  margin-top:1px;
}
.ag-body{min-width:0; flex:1}
.ag-badge{
  display:inline-block;
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.1em;
  padding:3px 8px;
  border-radius:0;
  margin-bottom:6px;
  background:color-mix(in srgb, var(--neon) 16%, transparent);
  color:var(--neon);
  border:1px solid color-mix(in srgb, var(--neon) 30%, transparent);
  clip-path:polygon(4px 0,100% 0,100% calc(100% - 4px),calc(100% - 4px) 100%,0 100%,0 4px);
}
.ag-badge--event{
  background:color-mix(in srgb, var(--acc) 16%, transparent);
  color:var(--acc);
  border-color:color-mix(in srgb, var(--acc) 30%, transparent);
}
.ag-badge--pkl{
  background:color-mix(in srgb, var(--mono-acc) 16%, transparent);
  color:var(--mono-acc);
  border-color:color-mix(in srgb, var(--mono-acc) 30%, transparent);
}
.ag-badge--open{
  background:color-mix(in srgb, var(--gray-acc) 16%, transparent);
  color:var(--dim2);
  border-color:var(--line2);
}
.ag-title{
  font-size:14px;
  font-weight:700;
  margin:0 0 4px;
  color:var(--txt);
  line-height:1.3;
}
.ag-desc{
  font-size:12.5px;
  color:var(--dim2);
  line-height:1.5;
  margin:0 0 6px;
}
.ag-place{
  font-size:11px;
  color:var(--dim);
  font-family:var(--mono);
  display:inline-flex;
  align-items:center;
  gap:5px;
}
.ag-place i{font-size:10px; opacity:.8}

/* ============================================================
   ROADMAP KONSENTRASI (2008–2045) — angular
   ============================================================ */
.rk-era-nav{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:18px;
}
.rk-era-btn{
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:6px 12px;
  border-radius:0;
  border:1px solid var(--line2);
  background:var(--panel2);
  color:var(--dim);
  cursor:pointer;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
  transition:all .2s ease;
}
.rk-era-btn:hover{
  border-color:var(--neon);
  color:var(--txt);
}
.rk-era-btn.is-active{
  background:var(--neon);
  border-color:var(--neon);
  color:#101010;
}
.rk-era-btn:focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 2px var(--acc);
}
.rk-track{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:0;
  border-left:2px solid var(--line2);
  margin-left:28px;
}
.rk-item{
  position:relative;
  display:grid;
  grid-template-columns:64px 1fr;
  gap:12px;
  padding:0 0 20px 16px;
  transition:opacity .25s ease;
}
.rk-item:last-child{padding-bottom:4px}
.rk-item.is-hidden{display:none}
.rk-year{
  position:relative;
  text-align:right;
  padding-top:2px;
}
.rk-year span{
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--rk, var(--neon));
  letter-spacing:.04em;
}
.rk-item::before{
  content:'';
  position:absolute;
  left:-22px;
  top:4px;
  width:14px;
  height:14px;
  border-radius:0;
  background:var(--panel);
  border:2px solid var(--rk, var(--neon));
  box-shadow:0 0 0 3px var(--panel);
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
}
.rk-item.is-done::before{
  background:var(--rk, var(--neon));
}
.rk-item.is-current::before{
  background:var(--rk, var(--neon));
  box-shadow:0 0 0 3px var(--panel), 0 0 12px color-mix(in srgb, var(--rk, var(--neon)) 50%, transparent);
  animation:rm-pulse 2s ease-in-out infinite;
}
.rk-item.is-next::before{
  background:var(--panel2);
}
.rk-card{
  background:var(--panel2);
  border:1px solid var(--line2);
  border-radius:0;
  padding:12px 14px;
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  position:relative;
}
.rk-card::before{
  content:'';
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background:var(--rk, var(--neon));
  opacity:.35;
  transition:opacity .2s;
}
.rk-item:hover .rk-card{
  border-color:color-mix(in srgb, var(--rk, var(--neon)) 45%, var(--line2));
  transform:translateX(2px);
}
.rk-item:hover .rk-card::before{opacity:1}
.rk-item.is-current .rk-card{
  border-color:color-mix(in srgb, var(--rk, var(--neon)) 55%, var(--line2));
  box-shadow:0 4px 16px color-mix(in srgb, var(--rk, var(--neon)) 12%, transparent);
}
.rk-item.is-current .rk-card::before{opacity:1}
.rk-tag{
  display:inline-block;
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  color:var(--rk, var(--neon));
  margin-bottom:4px;
  padding:2px 7px;
  border:1px solid color-mix(in srgb, var(--rk, var(--neon)) 35%, transparent);
  background:color-mix(in srgb, var(--rk, var(--neon)) 10%, transparent);
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px);
}
.rk-title{
  font-size:14px;
  font-weight:700;
  margin:0 0 6px;
  color:var(--txt);
  line-height:1.35;
  font-family:var(--disp), sans-serif;
}
.rk-desc{
  font-size:12.5px;
  color:var(--dim2);
  line-height:1.55;
  margin:0;
}
@media (max-width:480px){
  .rk-track{margin-left:16px}
  .rk-item{
    grid-template-columns:1fr;
    gap:6px;
    padding-left:14px;
  }
  .rk-year{text-align:left}
  .rk-year span{font-size:12px}
}

/* Gold Tech: aksen hitam di atas field emas */
html[data-theme="goldtech"] .blog-more:hover,
html[data-theme="goldtech"] .rk-era-btn.is-active{
  color:#FECE02;
  background:#101010;
  border-color:#101010;
}
html[data-theme="goldtech"] .rm-step.is-done .rm-node{
  color:#FECE02;
}


/* ============================================================
   STYLE UNITY — semua permukaan konten: sudut runcing + clip-path
   Token: --box-clip / --box-clip-sm / --box-clip-xs
   ============================================================ */
.profile,
.about,
.sambutan-box,
.visi-box,
.partner-box,
.contact-box,
.pembelajaran-box,
.logo-card,
.maskot-card,
.faq-item,
.lnk,
.course-card,
.tcard,
.testi-card,
.stat,
.mpanel,
.ov-card,
.gpanel,
.ipanel,
.msk-panel,
.tl-panel,
.lk-panel,
.roadmap-box,
.agenda-box,
.rk-box,
.blog-card,
.ag-item,
.rk-card,
.cinfo a,
.cinfo .cinfo-row,
.media-links,
.ban-carousel,
.foot,
.toast{
  border-radius:0 !important;
}

/* Clip-path standar untuk box utama */
.profile,
.about,
.partner-box,
.contact-box,
.pembelajaran-box,
.logo-card,
.maskot-card,
.mpanel,
.ov-card,
.roadmap-box,
.agenda-box,
.rk-box,
.ban-carousel{
  clip-path:var(--box-clip);
}

.faq-item,
.lnk,
.course-card,
.tcard,
.testi-card,
.blog-card,
.ag-item,
.rk-card,
.cinfo a,
.cinfo .cinfo-row,
.stat{
  clip-path:var(--box-clip-sm);
}

.chip,
.rm-tags li,
.ag-badge,
.rk-tag,
.rk-era-btn,
.blog-more,
.course-tag,
.tag:not(.led){
  border-radius:0 !important;
  clip-path:var(--box-clip-xs);
}

/* Node timeline angular */
.rm-node,
.rk-item::before{
  border-radius:0 !important;
  clip-path:var(--box-clip-xs);
}

.ag-date{
  border-radius:0 !important;
  clip-path:var(--box-clip-xs);
}

/* Aksen strip kiri pada kartu interaktif (jika belum punya) */
.faq-item,
.lnk,
.course-card,
.blog-card,
.ag-item,
.rk-card,
.tcard,
.testi-card,
.cinfo a{
  position:relative;
  overflow:hidden;
}

/* Toast angular */
.toast{
  clip-path:var(--box-clip-sm);
  border:1px solid var(--line2);
}

/* Util search input */
.util-search-input{
  border-radius:0 !important;
  clip-path:var(--box-clip-sm);
}

.util-sheet-close,
.toc-link,
.util-search-results a,
.util-search-results button{
  border-radius:0 !important;
}

.toc-link,
.util-search-results a,
.util-search-results button{
  clip-path:var(--box-clip-xs);
}

/* Guru standalone page surfaces */
body.guru-page .gpanel,
body.guru-page .profile{
  clip-path:var(--box-clip);
  border-radius:0 !important;
}

/* Keep true circles only for avatars / glow / led dots */
.avatar,
.avatar-ring,
.avatar-ring::before,
.avatar-ring::after,
.g-avatar,
.g-avatar-ring::before,
.g-avatar-ring::after,
.testi-av,
.testi-av img,
.glow,
.hs-dot,
.led{
  clip-path:none !important;
}


/* Roadmap items → overlay (klik) */
.rm-step[data-info],
.rk-item[data-info],
.rk-card[data-info]{
  cursor:pointer;
}
.rm-step[data-info]:focus-visible,
.rk-item[data-info]:focus-visible{
  outline:2px solid var(--neon);
  outline-offset:3px;
}
.rm-step[data-info]:hover .rm-body,
.rk-item[data-info]:hover .rk-card{
  border-color:color-mix(in srgb, var(--neon) 40%, var(--line2));
}
.rm-step[data-info] .rm-body{
  border:1px solid transparent;
  border-radius:0;
  padding:10px 12px;
  clip-path:var(--box-clip-sm);
  transition:border-color .2s, background .2s, transform .2s;
  background:transparent;
}
.rm-step[data-info]:hover .rm-body{
  background:var(--panel2);
  transform:translateX(2px);
}
.rm-more,
.rk-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--neon);
  text-transform:uppercase;
}
.rm-step[data-info]:hover .rm-more,
.rk-item[data-info]:hover .rk-more{
  color:var(--acc);
}
.i-sec-title{
  font-family:var(--mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
  color:var(--neon);
  margin:14px 0 8px;
  text-transform:uppercase;
}


/* Agenda item → overlay */
.ag-item[data-info]{
  cursor:pointer;
}
.ag-item[data-info]:focus-visible{
  outline:2px solid var(--neon);
  outline-offset:2px;
}
.ag-more{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-top:8px;
  font-family:var(--mono);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--neon);
  text-transform:uppercase;
}
.ag-item[data-info]:hover .ag-more{
  color:var(--acc);
}


/* ============================================================
   GALERI OVERLAY — layout & image fix
   ============================================================ */
#galeriModal.ov-shell{
  display:none;
  flex-direction:column;
  z-index:85;
}
#galeriModal.ov-shell.open{
  display:flex !important;
}
#galeriModal .gal-stage,
#galeriModal .ov-stage{
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:12px 16px 24px;
  min-height:0;
  width:100%;
  box-sizing:border-box;
}
#galeriModal .gal-frame{
  position:relative;
  width:min(960px, 100%);
  max-height:min(72vh, 720px);
  margin:0 auto;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:0;
  clip-path:var(--box-clip);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow);
}
#galeriModal .gal-frame img{
  display:block;
  width:100%;
  height:auto;
  max-height:min(70vh, 700px);
  object-fit:contain;
  object-position:center;
  background:#0a0a0a;
  opacity:0;
  transition:opacity .25s ease;
}
#galeriModal .gal-frame img.is-ready{
  opacity:1;
}
html[data-theme="light"] #galeriModal .gal-frame img{
  background:#f0f0f0;
}
#galeriModal .gal-loading{
  position:absolute;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  color:var(--neon);
  font-size:28px;
  background:color-mix(in srgb, var(--panel) 70%, transparent);
  z-index:3;
}
#galeriModal .gal-loading.is-on{
  display:flex;
}
#galeriModal .gal-meta{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:4px;
  margin-top:14px;
  text-align:center;
  max-width:min(640px, 100%);
  padding:0 12px;
}
#galeriModal .gal-cap-full{
  font-family:var(--disp);
  font-weight:700;
  font-size:15px;
  letter-spacing:.06em;
  color:var(--txt);
}
#galeriModal .gal-idx{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.12em;
  color:var(--dim);
}
#galeriModal .gal-nav-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:5;
  width:44px;
  height:44px;
  border:1px solid var(--line2);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
  color:var(--txt);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:0;
  clip-path:var(--box-clip-xs);
  transition:background .15s, border-color .15s, color .15s;
}
#galeriModal .gal-nav-btn:hover{
  background:var(--neon);
  border-color:var(--neon);
  color:#101010;
}
#galeriModal .gal-nav-prev{ left:max(8px, env(safe-area-inset-left, 0px)); }
#galeriModal .gal-nav-next{ right:max(8px, env(safe-area-inset-right, 0px)); }
@media (max-width:560px){
  #galeriModal .gal-nav-btn{ width:38px; height:38px; font-size:13px; }
  #galeriModal .gal-frame{ max-height:min(58vh, 520px); }
  #galeriModal .gal-frame img{ max-height:min(56vh, 500px); }
}
html[data-theme="goldtech"] #galeriModal .gal-nav-btn:hover{
  background:#101010;
  border-color:#101010;
  color:#FECE02;
}


/* ============================================================
   OVERLAY FULLSCREEN UNITY — sama penuh layar seperti main
   Semua .ov-shell menutupi viewport; konten wrap lebar penuh
   ============================================================ */
.ov-shell,
#infoModal,
#linkModal,
#galeriModal,
#guruModal,
#logoModal,
#maskotModal,
#taglineModal{
  position:fixed !important;
  inset:0 !important;
  top:0 !important; right:0 !important; bottom:0 !important; left:0 !important;
  width:100% !important;
  width:100vw !important;
  max-width:100vw !important;
  height:100% !important;
  height:100dvh !important;
  min-height:100dvh !important;
  margin:0 !important;
  box-sizing:border-box !important;
  flex-direction:column !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  background:var(--bg);
  z-index:84;
}
#galeriModal{ z-index:85; }
#guruModal{ z-index:86; }
#infoModal, #linkModal{ z-index:86; }
#logoModal, #maskotModal, #taglineModal{ z-index:84; }

.ov-shell:not(.open),
#infoModal:not(.open),
#linkModal:not(.open),
#galeriModal:not(.open),
#guruModal:not(.open),
#logoModal:not(.open),
#maskotModal:not(.open),
#taglineModal:not(.open){
  display:none !important;
}

.ov-shell.open,
#infoModal.open,
#linkModal.open,
#galeriModal.open,
#guruModal.open,
#logoModal.open,
#maskotModal.open,
#taglineModal.open{
  display:flex !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:none !important;
}

/* Area konten overlay = lebar penuh seperti main.wrap */
.ov-wrap,
.msk-wrap,
.tl-wrap,
.i-wrap,
.lk-wrap,
.g-wrap,
.logo-ov-wrap,
#infoModal .i-wrap,
#linkModal .lk-wrap,
#guruModal .g-wrap,
#maskotModal .msk-wrap,
#taglineModal .tl-wrap,
#logoModal .logo-ov-wrap{
  width:100% !important;
  max-width:100% !important;
  margin-left:auto !important;
  margin-right:auto !important;
  box-sizing:border-box !important;
}

/* Panel mengisi lebar wrap */
.ov-panel,
.msk-panel,
.tl-panel,
.ipanel,
.lk-panel,
.gpanel,
#logoModal .logo-ov-panel{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  min-height:calc(100dvh - 88px);
}

/* Galeri stage full width */
#galeriModal .gal-stage,
#galeriModal .ov-stage{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
}

/* QR tetap centered dialog (bukan halaman penuh konten) tapi backdrop full */
#modal.ov-modal,
.ov-modal#modal{
  position:fixed !important;
  inset:0 !important;
  width:100vw !important;
  height:100dvh !important;
  max-width:100vw !important;
  z-index:90;
}

/* Body lock */
body.guru-open,
body.info-open,
body.link-open,
body.galeri-open,
body.logo-open,
body.maskot-open,
body.tagline-open,
body.modal-open{
  overflow:hidden !important;
  overscroll-behavior:none;
}

@supports not (height: 100dvh){
  .ov-shell,
  #infoModal, #linkModal, #galeriModal, #guruModal,
  #logoModal, #maskotModal, #taglineModal{
    height:100vh !important;
    min-height:100vh !important;
  }
  .ov-panel, .msk-panel, .tl-panel, .ipanel, .lk-panel, .gpanel{
    min-height:calc(100vh - 88px);
  }
}


/* Course card image thumbs */
.course-card{
  overflow:hidden;
}
.course-thumb{
  position:relative;
  display:block;
  width:100%;
  height:0;
  padding-bottom:42%;
  background:var(--panel2);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.course-thumb picture,
.course-thumb img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .35s ease;
}
.course-card:hover .course-thumb img{
  transform:scale(1.05);
}
.course-thumb .course-ico{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:2;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:color-mix(in srgb, var(--neon) 92%, #101010);
  color:#101010;
  font-size:15px;
  border:1px solid transparent;
  clip-path:var(--box-clip-xs);
}
/* If layout was icon-left, stack vertical */
.course-card{
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.course-body{
  padding:12px 14px 14px;
}


/* Sambutan expanded */
.s-quote p{
  margin:0 0 12px;
  font-size:13px;
  line-height:1.75;
  color:var(--txt);
}
.s-quote p:last-child{margin-bottom:0}
.s-school{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.06em;
  color:var(--dim);
  margin-top:4px;
}
.s-sign{
  margin-top:18px;
  padding-top:14px;
  border-top:1px dashed var(--line2);
  display:flex;
  flex-direction:column;
  gap:2px;
}
.s-sign-label{
  font-size:11px;
  color:var(--dim);
}
.s-sign-name{
  font-family:var(--disp);
  font-weight:700;
  font-size:15px;
  color:var(--txt);
  letter-spacing:.04em;
}
.s-sign-role{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.08em;
  color:var(--neon);
  text-transform:uppercase;
}


/* Statistik program — grid lengkap + klik overlay */
.stats-lead{
  font-size:12.5px;
  color:var(--dim);
  line-height:1.6;
  margin:0 0 12px;
  max-width:52rem;
}
.stats{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:10px;
}
@media (max-width:900px){
  .stats{grid-template-columns:repeat(2, 1fr)}
}
@media (max-width:420px){
  .stats{grid-template-columns:1fr 1fr; gap:8px}
}
.stat[data-info]{
  cursor:pointer;
  text-align:center;
  padding:16px 10px 14px;
  position:relative;
  transition:border-color .2s, transform .2s, background .2s;
  clip-path:var(--box-clip);
}
.stat[data-info]:hover{
  border-color:var(--neon);
  background:var(--panel2);
  transform:translateY(-2px);
}
.stat[data-info]:focus-visible{
  outline:2px solid var(--neon);
  outline-offset:2px;
}
.stat .sico{
  display:flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  margin:0 auto 8px;
  color:#101010;
  background:var(--neon);
  font-size:14px;
  clip-path:var(--box-clip-xs);
}
.stat .smore{
  display:inline-flex;
  align-items:center;
  gap:5px;
  margin-top:8px;
  font-family:var(--mono);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  color:var(--neon);
  text-transform:uppercase;
  opacity:.85;
}
.stat[data-info]:hover .smore{opacity:1; color:var(--acc)}
html[data-theme="goldtech"] .stat .sico{
  background:#101010;
  color:#FECE02;
}