/* ═══════════════════════════════════════════════════════════════ LEXIPHOS — Holographic Silver Design System HTML5 + CSS3 Modern + Vanilla JS (tanpa framework) ═══════════════════════════════════════════════════════════════ */ :root{ --bg1:#0F0F1A; --bg2:#14142A; --deep:#08080F; --card:#1C1C2E; --card2:#252540; --elev:#22223A; --line:#2A2A42; --line2:#3A3A58; --cyan:#00F5FF; --mag:#FF00FF; --silver:#C0C0C0; --txt:#F5F5F5; --txt2:#C0C0C0; --txt3:#8A8AA8; --ok:#00FFA3; --err:#FF3860; --warn:#FFD700; --glow-c:rgba(0,245,255,.4); --grad:linear-gradient(135deg,#00F5FF 0%,#FF00FF 60%,#C0C0C0 120%); --f-orbit:'Orbitron',sans-serif; --f-audio:'Audiowide',sans-serif; --f-grot:'Space Grotesk',sans-serif; --f-inter:'Inter',sans-serif; --f-pjs:'Plus Jakarta Sans',sans-serif; --f-mono:'JetBrains Mono',monospace; --ease:cubic-bezier(.22,.61,.36,1); --nav-h:78px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px);-webkit-text-size-adjust:100%} body{ background:var(--bg1); color:var(--txt); font-family:var(--f-inter); font-size:16px; line-height:1.75; overflow-x:hidden; min-height:100vh; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection{background:rgba(0,245,255,.28);color:#fff} a{color:var(--cyan);text-decoration:none;transition:color .25s} a:hover{color:var(--mag)} img{max-width:100%;display:block} button{font-family:inherit;color:inherit} ul,ol{list-style:none} p,li,h1,h2,h3,h4,span,a{overflow-wrap:anywhere;word-break:break-word} :focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:6px} ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--deep)} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--cyan),var(--mag));border-radius:8px} .container{max-width:1360px;margin-inline:auto;padding-inline:clamp(16px,4vw,48px)} .skip-link{ position:fixed;top:-80px;left:16px;z-index:1000001;background:var(--cyan);color:#0F0F1A; font-family:var(--f-pjs);font-weight:700;padding:12px 20px;border-radius:12px;transition:top .3s; } .skip-link:focus{top:14px;color:#0F0F1A} /* ── Loader extras (kritis ada inline di ) ── */ .ldr-glyph{animation:ldr-pulse 1.4s ease-in-out infinite;filter:drop-shadow(0 0 12px rgba(0,245,255,.6)) drop-shadow(0 0 22px rgba(255,0,255,.35))} @keyframes ldr-pulse{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.12);opacity:1}} .ldr-bar{width:min(280px,70vw);height:5px;background:#1C1C2E;border-radius:99px;overflow:hidden;border:1px solid var(--line)} .ldr-bar span{display:block;height:100%;width:0;background:var(--grad);animation:ldr-fill 1.5s var(--ease) forwards;border-radius:99px} @keyframes ldr-fill{to{width:100%}} /* ── Custom cursor (desktop only) ── */ #cursorDot,#cursorRing{position:fixed;top:0;left:0;pointer-events:none;z-index:1000002;border-radius:50%;display:none;mix-blend-mode:difference} #cursorDot{width:8px;height:8px;background:var(--cyan);transform:translate(-50%,-50%)} #cursorRing{width:36px;height:36px;border:1.5px solid var(--cyan);transform:translate(-50%,-50%);transition:width .25s,height .25s,border-color .25s} #cursorRing.grow{width:56px;height:56px;border-color:var(--mag);border-style:dashed} #cursorRing.pulse{animation:cursor-pulse .4s ease-out} @keyframes cursor-pulse{0%{box-shadow:0 0 0 0 rgba(0,245,255,.6),0 0 0 0 rgba(255,0,255,.4)}100%{box-shadow:0 0 0 18px rgba(0,245,255,0),0 0 0 30px rgba(255,0,255,0)}} @media (min-width:1024px) and (pointer:fine){ body.has-cursor,body.has-cursor a,body.has-cursor button,body.has-cursor input,body.has-cursor [tabindex]{cursor:none} body.has-cursor #cursorDot,body.has-cursor #cursorRing{display:block} } /* ── Navbar ── */ #navbar{ position:fixed;inset-inline:0;top:0;z-index:9997;height:var(--nav-h); background:rgba(8,8,15,.82);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%); border-bottom:1px solid rgba(42,42,66,.7);transition:height .35s var(--ease),box-shadow .35s; } #navbar.scrolled{height:62px;box-shadow:0 8px 40px rgba(0,245,255,.12)} .nav-inner{max-width:1360px;height:100%;margin-inline:auto;padding-inline:clamp(16px,3vw,40px);display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center;gap:14px;min-width:0} .brand-ring{position:relative;width:52px;height:52px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%} .brand-ring::before{content:"";position:absolute;inset:0;border-radius:50%;padding:2px;background:conic-gradient(from 0deg,var(--cyan),var(--mag),var(--silver),var(--cyan));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ringspin 6s linear infinite;filter:drop-shadow(0 0 8px rgba(0,245,255,.45))} @keyframes ringspin{to{transform:rotate(360deg)}} .brand-ring img{width:44px;height:44px;border-radius:50%;object-fit:cover;background:var(--deep)} .brand-word{font-family:var(--f-orbit);font-weight:900;font-size:1.15rem;letter-spacing:.14em;color:var(--txt);white-space:nowrap} .brand-word em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} #hamburger{width:48px;height:48px;border-radius:14px;border:1px solid var(--line2);background:rgba(28,28,46,.6);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:border-color .3s,box-shadow .3s} #hamburger:hover{border-color:var(--cyan);box-shadow:0 0 18px rgba(0,245,255,.25)} #hamburger span{width:24px;height:2px;background:var(--cyan);border-radius:2px;transition:transform .35s var(--ease),opacity .25s;transform-origin:center} #hamburger.open span:nth-child(1){transform:translateY(8px) rotate(45deg)} #hamburger.open span:nth-child(2){opacity:0;transform:scaleX(.2)} #hamburger.open span:nth-child(3){transform:translateY(-8px) rotate(-45deg)} /* ── Drawer ── */ #drawerBackdrop{position:fixed;inset:0;z-index:9998;background:rgba(4,4,10,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:opacity .35s} #drawerBackdrop.show{opacity:1;pointer-events:auto} #drawer{ position:fixed;top:0;right:0;z-index:9998;height:100dvh;width:min(86vw,420px); background:linear-gradient(200deg,#1C1C2E 0%,#08080F 90%); border-left:1px solid var(--glow-c);box-shadow:-24px 0 80px rgba(0,0,0,.6),-2px 0 30px rgba(0,245,255,.12); transform:translateX(105%);transition:transform .45s var(--ease),visibility 0s linear .45s; display:flex;flex-direction:column;overflow:hidden;visibility:hidden; } #drawer.open{transform:translateX(0);visibility:visible;transition:transform .45s var(--ease),visibility 0s} .drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 22px;border-bottom:1px solid var(--line)} .drawer-title{font-family:var(--f-grot);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.85rem;color:var(--cyan);display:flex;align-items:center;gap:10px} #drawerClose{width:44px;height:44px;border-radius:12px;border:1px solid var(--line2);background:transparent;font-size:1.1rem;color:var(--txt2);transition:.3s} #drawerClose:hover{color:var(--mag);border-color:var(--mag);box-shadow:0 0 16px rgba(255,0,255,.25)} .drawer-nav{flex:1;overflow-y:auto;padding:14px 12px 20px} .drawer-link{ display:flex;align-items:center;gap:14px;padding:12px 14px;border-radius:12px; color:var(--txt2);font-family:var(--f-pjs);font-weight:600;font-size:.95rem; border-left:2px solid transparent;transition:transform .3s var(--ease),color .25s,border-color .3s,background .3s;min-height:46px; } .drawer-link i:first-child{width:22px;text-align:center;color:var(--cyan);font-size:1rem;flex:0 0 auto} .drawer-chev{margin-left:auto;font-size:.7rem;opacity:.45;transition:transform .3s,opacity .3s} .drawer-link:hover,.drawer-link.active{transform:translateX(6px);color:var(--txt);background:rgba(0,245,255,.06);border-left-color:var(--cyan);box-shadow:inset 0 0 24px rgba(0,245,255,.05)} .drawer-link:hover .drawer-chev{opacity:1;transform:translateX(3px);color:var(--cyan)} .drawer-foot{padding:18px 22px;border-top:1px solid var(--line)} .drawer-quote{font-family:var(--f-audio);font-size:.82rem;color:var(--txt2);line-height:1.6} .drawer-quote-src{font-size:.72rem;color:var(--txt3);margin-top:6px;font-family:var(--f-mono)} /* ── Hero ── */ .hero{ min-height:100svh;display:grid;place-items:center;position:relative;overflow:hidden; background:radial-gradient(ellipse at 50% 20%,#1C1C2E 0%,#14142A 45%,#08080F 100%); padding:calc(var(--nav-h) + 32px) 0 90px;text-align:center; } .hero::before{ content:"";position:absolute;inset:0;opacity:.06;pointer-events:none; background-image:url("data:image/svg+xml;utf8,"); background-size:120px 120px; } .hero-ornaments{position:absolute;inset:0;pointer-events:none} .glyph{position:absolute;font-family:var(--f-orbit);font-weight:700;color:var(--silver);text-shadow:0 0 30px rgba(0,245,255,.35);animate:floaty} .g1{top:14%;left:8%;font-size:clamp(3rem,7vw,6rem);opacity:.28;animation:floaty 9s ease-in-out infinite alternate} .g2{top:20%;right:10%;font-size:clamp(2.6rem,6vw,5rem);opacity:.2;color:var(--cyan);animation:floaty 12s ease-in-out 1s infinite alternate} .g3{top:58%;left:6%;font-size:clamp(3rem,7vw,5.6rem);opacity:.22;color:var(--mag);animation:floaty 11s ease-in-out .6s infinite alternate} .g4{top:64%;right:8%;font-size:clamp(2.4rem,6vw,4.6rem);opacity:.25;animation:floaty 8s ease-in-out 1.4s infinite alternate} .g5{top:38%;left:16%;font-size:clamp(2rem,5vw,3.6rem);opacity:.18;color:var(--cyan);animation:floaty 13s ease-in-out .2s infinite alternate} .g6{top:32%;right:18%;font-size:clamp(2.2rem,5vw,3.8rem);opacity:.2;color:var(--mag);animation:floaty 10s ease-in-out 2s infinite alternate} .g7{top:78%;left:22%;font-size:clamp(2rem,5vw,3.4rem);opacity:.15;animation:floaty 14s ease-in-out .8s infinite alternate} .g8{top:74%;right:24%;font-size:clamp(2.4rem,5vw,4rem);opacity:.19;color:var(--cyan);animation:floaty 9.5s ease-in-out 1.8s infinite alternate} @keyframes floaty{from{transform:translateY(-18px) rotate(-2deg)}to{transform:translateY(20px) rotate(2.5deg)}} .aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.3} .a1{width:420px;height:420px;top:-90px;left:-110px;background:radial-gradient(circle,rgba(0,245,255,.55),transparent 65%);animation:aurora 14s ease-in-out infinite alternate} .a2{width:520px;height:520px;bottom:-160px;right:-140px;background:radial-gradient(circle,rgba(255,0,255,.45),transparent 65%);animation:aurora 17s ease-in-out 2s infinite alternate-reverse} .a3{width:340px;height:340px;top:38%;left:55%;background:radial-gradient(circle,rgba(192,192,192,.28),transparent 60%);animation:aurora 20s ease-in-out 1s infinite alternate} @keyframes aurora{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.12)}} .circuit{position:absolute;width:clamp(140px,22vw,240px);opacity:.25} .c-top{top:8px;left:8px} .c-bot{bottom:8px;right:8px} .circuit path{stroke-dasharray:240;stroke-dashoffset:240;animation:dash 7s linear infinite} .c-bot path{animation-delay:2.5s} @keyframes dash{0%{stroke-dashoffset:240}55%{stroke-dashoffset:0}100%{stroke-dashoffset:-240}} .particles{position:absolute;inset:0} .particle{position:absolute;bottom:-12px;border-radius:50%;background:var(--cyan);box-shadow:0 0 10px rgba(0,245,255,.8);animation:rise linear infinite} .particle.m{background:var(--mag);box-shadow:0 0 10px rgba(255,0,255,.8)} .particle.s{background:var(--silver);box-shadow:0 0 8px rgba(192,192,192,.7)} @keyframes rise{from{transform:translateY(0);opacity:0}8%{opacity:.85}92%{opacity:.6}to{transform:translateY(-105vh);opacity:0}} .hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:clamp(14px,2.4vh,24px)} .hero-badge{ display:inline-flex;align-items:center;gap:10px;font-family:var(--f-pjs);font-weight:600;font-size:clamp(.74rem,1.6vw,.86rem); letter-spacing:.05em;color:var(--txt);padding:9px 20px;border-radius:999px;background:rgba(0,245,255,.07);position:relative;isolation:isolate; } .hero-badge::before{content:"";position:absolute;inset:0;border-radius:999px;padding:1.2px;background:linear-gradient(90deg,rgba(0,245,255,.8),rgba(255,0,255,.8),rgba(0,245,255,.8));background-size:200% 100%;-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:badgeflow 5s linear infinite;z-index:-1} @keyframes badgeflow{to{background-position:200% 0}} .hero-badge i{color:var(--cyan)} .hero-logo-ring{position:relative;width:132px;height:132px;border-radius:50%;display:grid;place-items:center} .hero-logo-ring::before{content:"";position:absolute;inset:0;border-radius:50%;padding:3px;background:conic-gradient(from 0deg,var(--cyan),var(--mag),var(--silver),var(--cyan));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ringspin 5s linear infinite} .hero-logo-ring::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(0,245,255,.25);animation:ringspin 14s linear infinite reverse} .hero-logo{width:118px;height:118px;border-radius:50%;object-fit:cover;background:var(--deep);animation:logopulse 3.4s ease-in-out infinite} @keyframes logopulse{0%,100%{filter:drop-shadow(0 0 10px rgba(0,245,255,.35))}50%{filter:drop-shadow(0 0 26px rgba(255,0,255,.45))}} .hero-title{ font-family:var(--f-orbit);font-weight:900;font-size:clamp(3rem,10vw,7.5rem);line-height:1.04;letter-spacing:.05em; background:linear-gradient(100deg,#F5F5F5 15%,#00F5FF 48%,#FF00FF 82%);background-size:200% 100%; -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 0 24px rgba(0,245,255,.28)) drop-shadow(2px 0 0 rgba(255,0,255,.18)) drop-shadow(-2px 0 0 rgba(0,245,255,.18)); animation:titleflow 8s ease-in-out infinite alternate; } @keyframes titleflow{from{background-position:0% 0}to{background-position:100% 0}} .hero-tagline{font-family:var(--f-audio);font-size:clamp(.98rem,2.4vw,1.42rem);color:var(--txt2);min-height:2.9em;max-width:760px} .type-cursor{display:inline-block;width:2px;height:1.1em;background:var(--cyan);vertical-align:-0.18em;margin-left:4px;animation:blink 1s steps(2) infinite;box-shadow:0 0 8px rgba(0,245,255,.8)} @keyframes blink{50%{opacity:0}} .hero-subtitle{font-family:var(--f-grot);font-weight:500;font-size:clamp(.9rem,2vw,1.08rem);color:var(--txt3);letter-spacing:.04em} .hero-cta{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;margin-top:6px} .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-pjs);font-weight:700; font-size:.95rem;letter-spacing:.02em;padding:15px 28px;border-radius:14px;border:1px solid transparent; transition:transform .3s var(--ease),box-shadow .35s,background .3s,border-color .3s,color .3s;line-height:1.2;min-height:52px; } .btn-primary{background:var(--grad);color:#0F0F1A;box-shadow:0 8px 30px -8px rgba(0,245,255,.5)} .btn-primary:hover{transform:translateY(-3px);box-shadow:0 14px 44px -8px rgba(255,0,255,.55);color:#0F0F1A} .btn-secondary{background:transparent;border-color:var(--cyan);color:var(--txt);box-shadow:inset 0 0 0 rgba(0,245,255,0)} .btn-secondary:hover{transform:translateY(-3px);background:rgba(0,245,255,.08);box-shadow:0 0 24px rgba(0,245,255,.3);color:var(--txt)} .btn-ghost{background:rgba(28,28,46,.5);border-color:var(--line2);color:var(--txt2)} .btn-ghost:hover{border-color:var(--cyan);color:var(--txt);transform:translateY(-2px)} .hero-stats{display:flex;gap:clamp(22px,5vw,56px);margin-top:14px;flex-wrap:wrap;justify-content:center} .hstat{display:flex;flex-direction:column;gap:2px;position:relative;padding-inline:clamp(4px,1vw,14px)} .hstat + .hstat::before{content:"";position:absolute;left:calc(clamp(22px,5vw,56px)/-2);top:15%;height:70%;width:1px;background:linear-gradient(180deg,transparent,var(--line2),transparent)} .hstat-num{font-family:var(--f-mono);font-weight:700;font-size:clamp(1.5rem,3.6vw,2.1rem);color:var(--cyan);text-shadow:0 0 18px rgba(0,245,255,.5)} .hstat-lbl{font-family:var(--f-pjs);font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--txt3)} .scroll-ind{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;color:var(--txt3);font-family:var(--f-pjs);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;z-index:2} .scroll-ind i{color:var(--cyan);animation:bounce 1.6s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(0,245,255,.6))} @keyframes bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(9px)}} .scroll-ind:hover{color:var(--txt2)} /* ── Sections ── */ .section{position:relative;padding:clamp(72px,10vw,120px) 0;background:var(--bg1);overflow:hidden} .sec-alt{background:var(--bg2)} .sec-head{max-width:820px;margin-bottom:clamp(36px,5vw,58px)} .kicker{ display:inline-flex;align-items:center;gap:10px;font-family:var(--f-mono);font-weight:500;font-size:.78rem; letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);padding:7px 16px;border-radius:999px; border:1px solid rgba(0,245,255,.3);background:rgba(0,245,255,.05);margin-bottom:20px; } .sec-head h2{font-family:var(--f-orbit);font-weight:700;font-size:clamp(1.85rem,4.6vw,3.1rem);line-height:1.16;letter-spacing:.03em;color:var(--txt);margin-bottom:16px} .grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .sec-desc{color:var(--txt2);font-size:clamp(.95rem,1.6vw,1.05rem);max-width:720px} /* Motif background unik per section (SVG inline, halus) */ .sec-bg-world{background-image:url("data:image/svg+xml;utf8,Aक");background-size:380px 380px;background-repeat:repeat} .sec-bg-glyphs{background-image:url("data:image/svg+xml;utf8,A字بアñЯ");background-size:340px 340px} .sec-bg-pen{background-image:url("data:image/svg+xml;utf8,");background-size:320px 320px} .sec-bg-wave{background-image:url("data:image/svg+xml;utf8,");background-size:300px 200px} .sec-bg-head{background-image:url("data:image/svg+xml;utf8,");background-size:300px 300px} .sec-bg-book{background-image:url("data:image/svg+xml;utf8,");background-size:320px 320px} .sec-bg-tree{background-image:url("data:image/svg+xml;utf8,");background-size:300px 300px} .sec-bg-ipa{background-image:url("data:image/svg+xml;utf8,ʃθŋð");background-size:300px 200px} .sec-bg-trans{background-image:url("data:image/svg+xml;utf8,A字");background-size:320px 240px} .sec-bg-exam{background-image:url("data:image/svg+xml;utf8,ABC");background-size:300px 300px} .sec-bg-nusa{background-image:url("data:image/svg+xml;utf8,ꦲᬅᯀꦟᬓ");background-size:340px 340px} .sec-bg-brain{background-image:url("data:image/svg+xml;utf8,");background-size:320px 320px} .sec-bg-quill{background-image:url("data:image/svg+xml;utf8,");background-size:320px 320px} .sec-bg-hands{background-image:url("data:image/svg+xml;utf8,");background-size:300px 300px} .sec-bg-digi{background-image:url("data:image/svg+xml;utf8,");background-size:300px 300px} .sec-bg-ancient{background-image:url("data:image/svg+xml;utf8,Ω");background-size:320px 320px} .sec-bg-quiz{background-image:url("data:image/svg+xml;utf8,");background-size:300px 300px} .sec-bg-news{background-image:url("data:image/svg+xml;utf8,");background-size:320px 320px} .sec-bg-stats{background-image:url("data:image/svg+xml;utf8,");background-size:300px 300px} .sec-bg-faq{background-image:url("data:image/svg+xml;utf8,");background-size:320px 240px} @media (min-width:1025px){ .sec-bg-world,.sec-bg-glyphs,.sec-bg-pen,.sec-bg-wave,.sec-bg-head,.sec-bg-book,.sec-bg-tree,.sec-bg-ipa,.sec-bg-trans,.sec-bg-exam,.sec-bg-nusa,.sec-bg-brain,.sec-bg-quill,.sec-bg-hands,.sec-bg-digi,.sec-bg-ancient,.sec-bg-quiz,.sec-bg-news,.sec-bg-stats,.sec-bg-faq{background-attachment:fixed} } .sec-bg-world,.sec-bg-glyphs,.sec-bg-pen,.sec-bg-wave,.sec-bg-head,.sec-bg-book,.sec-bg-tree,.sec-bg-ipa,.sec-bg-trans,.sec-bg-exam,.sec-bg-nusa,.sec-bg-brain,.sec-bg-quill,.sec-bg-hands,.sec-bg-digi,.sec-bg-ancient,.sec-bg-quiz,.sec-bg-news,.sec-bg-stats,.sec-bg-faq{position:relative} .sec-bg-world::after,.sec-bg-glyphs::after,.sec-bg-pen::after,.sec-bg-wave::after,.sec-bg-head::after,.sec-bg-book::after,.sec-bg-tree::after,.sec-bg-ipa::after,.sec-bg-trans::after,.sec-bg-exam::after,.sec-bg-nusa::after,.sec-bg-brain::after,.sec-bg-quill::after,.sec-bg-hands::after,.sec-bg-digi::after,.sec-bg-ancient::after,.sec-bg-quiz::after,.sec-bg-news::after,.sec-bg-stats::after,.sec-bg-faq::after{content:"";position:absolute;inset:0;background:inherit;opacity:.16;pointer-events:none} .section > .container{position:relative;z-index:1} /* ── Reveal ── */ .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} /* ── Cards & Grid ── */ .card-grid,.family-grid{display:grid;gap:28px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))} .card-grid > *,.family-grid > *{min-width:0} .card{ position:relative;isolation:isolate;contain:content;display:flex;flex-direction:column;gap:14px;text-align:left;width:100%; background:linear-gradient(145deg,#1C1C2E 0%,#22223A 100%);border:1px solid var(--line);border-radius:20px;padding:28px; box-shadow:0 2px 6px rgba(0,0,0,.5),0 20px 40px -20px rgba(0,245,255,.15),inset 0 1px 0 rgba(192,192,192,.1); overflow:hidden;cursor:pointer;transition:transform .4s var(--ease),box-shadow .4s,background .4s; } .card::before{ content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;z-index:-1;opacity:0;transition:opacity .6s; background:conic-gradient(from 180deg,rgba(0,245,255,.75),rgba(255,0,255,.75),rgba(192,192,192,.75),rgba(0,245,255,.75)); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude; } .card::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 0%,rgba(0,245,255,.045) 50%,transparent 100%);background-size:100% 220%;animation:scan 7s linear infinite} @keyframes scan{from{background-position:0 -110%}to{background-position:0 210%}} .card:hover{transform:translateY(-6px);background:linear-gradient(145deg,#20203a 0%,#252540 100%);box-shadow:0 6px 12px rgba(0,0,0,.55),0 30px 60px -20px rgba(0,245,255,.28),inset 0 1px 0 rgba(192,192,192,.14)} .card:hover::before{opacity:.6} .card.visited{border-color:rgba(0,255,163,.35)} .card.visited .card-icon{border-color:var(--ok);color:var(--ok);box-shadow:0 0 16px rgba(0,255,163,.25)} .card-icon{ width:56px;height:56px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; background:#0F0F1A;border:1px solid var(--cyan);color:var(--cyan);font-size:1.35rem; box-shadow:0 0 18px rgba(0,245,255,.25);transition:.35s; } .card:hover .card-icon{transform:scale(1.06) rotate(-4deg)} .card h3{font-family:var(--f-grot);font-weight:600;font-size:1.1rem;line-height:1.4;color:var(--txt);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .card .card-desc{font-size:.92rem;color:#F5F5F5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:6px} .badge{font-family:var(--f-pjs);font-weight:600;font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#FFA9FF;border:1px solid rgba(255,0,255,.4);border-radius:999px;padding:4px 12px;background:rgba(255,0,255,.06);white-space:nowrap;box-shadow:0 0 12px rgba(255,0,255,.12)} .card-time{font-family:var(--f-mono);font-size:.74rem;color:var(--txt3)} .card-num{position:absolute;top:18px;right:20px;font-family:var(--f-mono);font-size:.72rem;color:var(--txt3);opacity:.8} .glare{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(560px circle at var(--gx,50%) var(--gy,50%),rgba(0,245,255,.13),rgba(255,0,255,.09) 42%,transparent 68%);z-index:1} .card:hover .glare{opacity:1} @media (min-width:1024px) and (pointer:fine){ .tiltzone{perspective:1200px} .tilt{transform-style:preserve-3d;will-change:transform;transition:transform .4s var(--ease)} .tilting{transition:transform .08s linear;filter:drop-shadow(2px 0 0 rgba(255,0,255,.12)) drop-shadow(-2px 0 0 rgba(0,245,255,.12))} } /* Kartu keluarga bahasa */ .fam-card{cursor:default} .fam-card:hover{transform:translateY(-6px)} .fam-stats{display:flex;gap:18px;flex-wrap:wrap;padding-top:4px} .fam-stat{display:flex;flex-direction:column} .fam-stat b{font-family:var(--f-mono);font-size:1.05rem;color:var(--cyan)} .fam-stat span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--txt3)} .fam-tags{display:flex;flex-wrap:wrap;gap:8px} .fam-tag{font-family:var(--f-pjs);font-size:.72rem;color:var(--txt2);border:1px solid var(--line2);border-radius:8px;padding:3px 10px;background:rgba(8,8,15,.4)} /* ── Timeline ── */ .timeline-wrap{margin-top:clamp(48px,7vw,84px)} .timeline-title{font-family:var(--f-grot);font-weight:700;font-size:clamp(1.3rem,3vw,1.8rem);color:var(--txt);margin-bottom:14px;display:flex;align-items:center;gap:12px} .timeline-title i{color:var(--cyan)} .timeline{position:relative;margin-top:34px;padding-left:34px;max-width:880px} .timeline::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:linear-gradient(180deg,var(--cyan),var(--mag),var(--silver));opacity:.55;border-radius:2px} .tl-item{position:relative;padding:0 0 30px 22px} .tl-item::before{content:"";position:absolute;left:-32px;top:8px;width:14px;height:14px;border-radius:50%;background:var(--bg1);border:2px solid var(--cyan);box-shadow:0 0 12px rgba(0,245,255,.55)} .tl-item:nth-child(even)::before{border-color:var(--mag);box-shadow:0 0 12px rgba(255,0,255,.55)} .tl-year{font-family:var(--f-mono);font-weight:700;font-size:.86rem;color:var(--cyan);letter-spacing:.06em;display:inline-block;border:1px solid rgba(0,245,255,.35);border-radius:8px;padding:2px 10px;background:rgba(0,245,255,.06);margin-bottom:6px} .tl-item:nth-child(even) .tl-year{color:#FFB3FF;border-color:rgba(255,0,255,.35);background:rgba(255,0,255,.06)} .tl-item h4{font-family:var(--f-grot);font-weight:600;font-size:1.02rem;color:var(--txt);margin-bottom:4px} .tl-item p{font-size:.88rem;color:var(--txt2)} /* ── Quiz ── */ .quiz-shell{ background:linear-gradient(150deg,#15152B 0%,#0E0E1C 100%);border:1px solid var(--line2);border-radius:24px; padding:clamp(24px,4vw,48px);position:relative;overflow:hidden;contain:content; box-shadow:0 2px 6px rgba(0,0,0,.5),0 24px 60px -24px rgba(0,245,255,.18); } .quiz-shell::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:conic-gradient(from 120deg,rgba(0,245,255,.5),rgba(255,0,255,.5),rgba(192,192,192,.5),rgba(0,245,255,.5));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.45;pointer-events:none} .quiz-panel{display:flex;flex-direction:column;gap:18px;position:relative} .quiz-panel[hidden],.quiz-review[hidden]{display:none!important} #quizStart{align-items:center;text-align:center} .quiz-start-ico{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-size:2rem;color:var(--cyan);background:#0F0F1A;border:1px solid var(--cyan);box-shadow:0 0 30px rgba(0,245,255,.3);animation:logopulse 3s ease-in-out infinite} #quizStart h3,#quizResult h3{font-family:var(--f-orbit);font-weight:700;font-size:clamp(1.2rem,3vw,1.7rem)} .quiz-info{color:var(--txt2);font-size:.92rem} .quiz-label{font-family:var(--f-pjs);font-weight:600;font-size:.85rem;color:var(--txt2);align-self:flex-start} .quiz-input{ width:min(420px,100%);background:rgba(8,8,15,.65);border:1px solid var(--line2);border-radius:12px;color:var(--txt); font-family:var(--f-inter);font-size:1rem;padding:13px 16px;transition:border-color .3s,box-shadow .3s; } .quiz-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(0,245,255,.18)} .quiz-input::placeholder{color:var(--txt3)} .quiz-hiscore{font-family:var(--f-mono);font-size:.82rem;color:var(--warn)} .quiz-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap} .quiz-progress-txt{font-family:var(--f-mono);font-weight:700;font-size:.9rem;color:var(--cyan)} .quiz-cat{font-family:var(--f-pjs);font-weight:600;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#FFA9FF;border:1px solid rgba(255,0,255,.4);border-radius:999px;padding:4px 12px;background:rgba(255,0,255,.06)} .quiz-timer-txt{font-family:var(--f-mono);font-weight:700;font-size:.95rem;color:var(--warn)} .quiz-progbar,.quiz-timer{height:6px;border-radius:99px;background:#191930;overflow:hidden;border:1px solid var(--line)} .quiz-progbar span{display:block;height:100%;background:var(--grad);width:0;transition:width .4s var(--ease);border-radius:99px} .quiz-timer span{display:block;height:100%;background:linear-gradient(90deg,var(--warn),var(--err));width:100%;border-radius:99px} .quiz-q{font-family:var(--f-grot);font-weight:600;font-size:clamp(1.05rem,2.4vw,1.35rem);line-height:1.55;color:var(--txt);min-height:3.2em} .quiz-opts{display:grid;gap:12px} .quiz-opt{ display:flex;align-items:center;gap:14px;text-align:left;background:#19192E;border:1px solid var(--line); border-radius:14px;padding:15px 18px;font-family:var(--f-inter);font-size:.95rem;color:var(--txt); transition:border-color .25s,background .25s,transform .2s;min-height:54px; } .quiz-opt:hover{border-color:var(--cyan);background:#1E1E36;transform:translateX(4px)} .quiz-opt .opt-key{flex:0 0 auto;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-family:var(--f-mono);font-weight:700;font-size:.82rem;color:var(--cyan);background:#101022;border:1px solid var(--line2)} .quiz-opt.sel{border-color:var(--cyan);background:rgba(0,245,255,.09);box-shadow:0 0 18px rgba(0,245,255,.18)} .quiz-opt.sel .opt-key{background:var(--cyan);color:#0F0F1A;border-color:var(--cyan)} .quiz-opt.correct{border-color:var(--ok);background:rgba(0,255,163,.12)} .quiz-opt.correct .opt-key{background:var(--ok);color:#0F0F1A;border-color:var(--ok)} .quiz-opt.wrong{border-color:var(--err);background:rgba(255,56,96,.12)} .quiz-opt.wrong .opt-key{background:var(--err);color:#fff;border-color:var(--err)} .quiz-controls{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin-top:8px} .quiz-controls .btn{padding:12px 20px;font-size:.86rem;min-height:48px} #quizResult{align-items:center;text-align:center} .quiz-ring{ width:170px;height:170px;border-radius:50%;display:grid;place-items:center;position:relative; background:conic-gradient(var(--cyan) 0deg,var(--mag) 0deg,#1a1a30 0deg); } .quiz-ring::before{content:"";position:absolute;inset:10px;border-radius:50%;background:#12121f} .quiz-ring span{position:relative;font-family:var(--f-mono);font-weight:700;font-size:1.9rem;color:var(--txt)} #quizGradeTxt{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .quiz-result-ctl{justify-content:center} .quiz-review{width:100%;text-align:left;display:flex;flex-direction:column;gap:12px;margin-top:14px;max-height:480px;overflow-y:auto;padding-right:6px} .rv-item{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:rgba(25,25,46,.6)} .rv-item.ok{border-color:rgba(0,255,163,.4)} .rv-item.bad{border-color:rgba(255,56,96,.4)} .rv-item .rv-q{font-weight:600;font-size:.92rem;color:var(--txt);margin-bottom:8px} .rv-item .rv-a{font-size:.85rem;color:var(--txt2)} .rv-item .rv-a b{color:var(--ok)} .rv-item.bad .rv-a s{color:var(--err)} .rv-item .rv-e{font-size:.8rem;color:var(--txt3);margin-top:6px;font-style:italic} /* ── Statistik ── */ .stats-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr))} .stat{ position:relative;background:linear-gradient(145deg,#1C1C2E,#22223A);border:1px solid var(--line);border-radius:20px; padding:28px 24px;overflow:hidden;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.5),0 20px 40px -20px rgba(0,245,255,.15); } .stat::after{content:"";position:absolute;left:24px;right:24px;bottom:0;height:2px;background:var(--grad);opacity:.6;border-radius:2px} .stat i{font-size:1.5rem;color:var(--cyan);margin-bottom:12px;display:inline-block;filter:drop-shadow(0 0 8px rgba(0,245,255,.5))} .stat .num{font-family:var(--f-mono);font-weight:700;font-size:clamp(1.6rem,3.4vw,2.3rem);color:var(--txt);display:block;line-height:1.15;text-shadow:0 0 20px rgba(0,245,255,.3)} .stat .lbl{font-family:var(--f-pjs);font-size:.82rem;color:var(--txt2);margin-top:8px;display:block} /* ── FAQ ── */ .faq-list{max-width:880px} .faq-item{border:1px solid var(--line);border-radius:16px;background:#171730;margin-bottom:14px;overflow:hidden;transition:border-color .3s,box-shadow .3s} .faq-item.open{border-color:rgba(0,245,255,.45);box-shadow:0 0 24px rgba(0,245,255,.12)} .faq-q{ width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;text-align:left; padding:18px 22px;background:transparent;border:none;font-family:var(--f-grot);font-weight:600;font-size:1rem;color:var(--txt);min-height:44px; } .faq-q .fq-num{font-family:var(--f-mono);font-size:.78rem;color:var(--cyan);margin-right:6px;flex:0 0 auto} .faq-q i{flex:0 0 auto;color:var(--cyan);transition:transform .35s var(--ease)} .faq-item.open .faq-q i{transform:rotate(180deg);color:var(--mag)} .faq-a{max-height:0;overflow:hidden;transition:max-height .45s var(--ease)} .faq-a p{padding:0 22px 20px;color:var(--txt2);font-size:.94rem;border-top:1px dashed var(--line);padding-top:16px;margin:0 0 0} /* ── Modal ── */ .modal-backdrop{ position:fixed;inset:0;z-index:9999;background:rgba(4,4,10,.74);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); display:grid;place-items:center;padding:clamp(8px,2.4vw,24px);opacity:0;pointer-events:none;transition:opacity .3s; } .modal-backdrop.open{opacity:1;pointer-events:auto} .modal{ width:min(920px,100%);max-height:90dvh;overflow-y:auto;position:relative; background:linear-gradient(160deg,#15152B 0%,#0E0E1C 100%);border:1px solid var(--line2);border-radius:24px; transform:scale(.94) translateY(10px);transition:transform .3s var(--ease); box-shadow:0 40px 120px -30px rgba(0,245,255,.25),0 20px 60px rgba(0,0,0,.6); } .modal-backdrop.open .modal{transform:scale(1) translateY(0)} .modal-progress{position:sticky;top:0;z-index:5;height:3px;background:rgba(0,0,0,.35)} .modal-progress span{display:block;height:100%;width:0;background:var(--grad);box-shadow:0 0 10px rgba(0,245,255,.7)} .modal-close{ position:sticky;top:14px;margin-left:calc(100% - 62px);z-index:6;width:46px;height:46px;border-radius:50%; border:1px solid var(--line2);background:rgba(8,8,15,.85);color:var(--txt2);font-size:1.05rem;display:grid;place-items:center;transition:.3s; } .modal-close:hover{color:var(--mag);border-color:var(--mag);transform:rotate(90deg);box-shadow:0 0 20px rgba(255,0,255,.3)} .modal-hero{display:grid;place-items:center;padding:10px 24px 0;margin-top:-30px} .modal-hero svg{width:min(190px,40vw);height:auto;filter:drop-shadow(0 0 24px rgba(0,245,255,.35))} .modal-body{padding:clamp(20px,4vw,54px);display:flex;flex-direction:column;gap:18px} .modal-body .m-meta{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .modal-body h2{font-family:var(--f-orbit);font-weight:700;font-size:clamp(1.35rem,3.4vw,2rem);line-height:1.3;color:var(--txt)} .modal-body h3{font-family:var(--f-grot);font-weight:700;font-size:1.16rem;color:var(--cyan);margin-top:12px;display:flex;align-items:center;gap:10px} .modal-body h3::before{content:"";width:22px;height:2px;background:var(--grad);border-radius:2px;flex:0 0 auto} .modal-body p{color:#EDEDF5;font-size:.97rem} .modal-body ul.m-list{display:flex;flex-direction:column;gap:10px;padding-left:4px} .modal-body ul.m-list li{position:relative;padding-left:30px;color:#EDEDF5;font-size:.94rem} .modal-body ul.m-list li::before{content:"";position:absolute;left:4px;top:.62em;width:10px;height:10px;border-radius:3px;background:var(--grad);box-shadow:0 0 10px rgba(0,245,255,.5)} .factbox{ border:1px solid rgba(0,245,255,.35);border-left:4px solid var(--cyan);border-radius:14px; background:rgba(0,245,255,.06);padding:18px 20px;font-size:.93rem;color:var(--txt); } .factbox b{color:var(--cyan);display:flex;align-items:center;gap:8px;margin-bottom:6px} .modal-body blockquote{ font-family:var(--f-audio);font-size:clamp(1rem,2.2vw,1.2rem);line-height:1.7;color:var(--txt); border-left:3px solid;border-image:linear-gradient(180deg,var(--cyan),var(--mag)) 1;padding:6px 0 6px 20px;margin:8px 0; } .modal-body blockquote cite{display:block;font-family:var(--f-mono);font-style:normal;font-size:.78rem;color:var(--txt3);margin-top:10px} .m-table{width:100%;border-collapse:collapse;font-size:.88rem;overflow:hidden;border-radius:12px;display:block;overflow-x:auto} .m-table table{width:100%;border-collapse:collapse} .m-table th{font-family:var(--f-pjs);font-weight:700;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--cyan);background:rgba(0,245,255,.07);text-align:left} .m-table th,.m-table td{border:1px solid var(--line);padding:10px 14px;text-align:left;color:#EDEDF5} .m-table tr:nth-child(even) td{background:rgba(34,34,58,.4)} .modal-nav{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:0 clamp(20px,4vw,54px) clamp(22px,4vw,40px)} .modal-nav .btn{padding:12px 20px;font-size:.86rem} /* ── Footer ── */ .footer{background:var(--deep);border-top:1px solid var(--line);padding:clamp(56px,8vw,90px) 0 0;color:var(--txt)} .footer-grid{display:grid;gap:40px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))} .footer-brand-col{max-width:320px} .footer-tag{font-family:var(--f-audio);font-size:.88rem;color:var(--txt2);margin-top:18px;line-height:1.7} .footer-mini{font-size:.78rem;color:var(--txt3);margin-top:10px} .footer-col h4{font-family:var(--f-grot);font-weight:700;font-size:.92rem;letter-spacing:.14em;text-transform:uppercase;color:var(--silver);margin-bottom:18px;position:relative;padding-bottom:10px} .footer-col h4::after{content:"";position:absolute;left:0;bottom:0;width:34px;height:2px;background:var(--grad);border-radius:2px} .footer-col ul{display:flex;flex-direction:column;gap:11px} .footer-col a{color:var(--txt2);font-size:.9rem;transition:color .25s,padding-left .25s} .footer-col a:hover{color:var(--cyan);padding-left:6px} .footer-col a:active{color:var(--mag)} .footer-bottom{margin-top:clamp(40px,6vw,64px);border-top:1px solid var(--line);padding:24px 0;text-align:center} .footer-bottom p{font-size:.85rem;color:var(--txt3)} .creator-link{font-family:var(--f-orbit);font-weight:700;letter-spacing:.08em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .creator-link:hover{filter:drop-shadow(0 0 10px rgba(0,245,255,.6))} /* ── Responsif ── */ @media (max-width:480px){ body{font-size:16px} .container{padding-inline:16px} .card-grid,.family-grid{grid-template-columns:1fr} .quiz-controls{justify-content:stretch} .quiz-controls .btn{flex:1 1 45%} .modal-nav .btn{flex:1} .hero-stats{gap:20px} } @media (min-width:481px) and (max-width:768px){ body{font-size:16.5px} .container{padding-inline:24px} .card-grid,.family-grid{grid-template-columns:repeat(2,1fr)} } @media (min-width:769px) and (max-width:1024px){ body{font-size:17px} .container{padding-inline:32px} .card-grid,.family-grid{grid-template-columns:repeat(3,1fr)} } @media (min-width:1025px) and (max-width:1440px){ body{font-size:18px} .container{padding-inline:48px} .card-grid{grid-template-columns:repeat(4,1fr)} } @media (min-width:1441px){ body{font-size:18px} .container{padding-inline:64px} .card-grid{grid-template-columns:repeat(4,1fr)} .card-grid.wide{grid-template-columns:repeat(5,1fr)} } @media (max-width:1023px){ .glyph{animation-duration:12s} } /* ── Reduced motion ── */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} .reveal{opacity:1;transform:none} .type-cursor{animation:none;opacity:1} .particles,.circuit{display:none} }