:root {
--js-bg: #050607;
--js-surface: rgba(10, 12, 14, .92);
--js-surface2: rgba(8, 10, 12, .92);
--js-text: #EEEAE1;
--js-muted: rgba(238,234,225,.70);
--js-gold: #E3B544;
--js-gold2: #F1D08A;
--js-cyan: #E3B544;
--js-border: rgba(227,181,68,.30);
--js-shadow: 0 14px 45px rgba(0,0,0,.35);
--js-pattern-opacity: .055;
--js-pattern-size: 420px;
--js-footer-pattern-opacity: .17;
--js-footer-pattern-size: 620px;
/* Hero background assets (optional). Default none to avoid decorative wayang/ring overlays. */
--js-hero-bg-a: none;
--js-hero-bg-b: none;
--js-radius-lg: 22px;
--js-radius-md: 16px;
--js-led-thickness: 2px;
--js-led-speed: 2.2s;
--js-pattern-geo: url("data:image/svg+xml,");
--js-pattern-footer: url("data:image/svg+xml,");
--js-pattern-batik-edge: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22160%22%20viewBox%3D%220%200%20160%20160%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23d0a233%22%20stroke-width%3D%221%22%20opacity%3D%220.9%22%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2226%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%2240%22%20r%3D%2226%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%2240%22%20cy%3D%22120%22%20r%3D%2226%22%2F%3E%0A%20%20%20%20%3Ccircle%20cx%3D%22120%22%20cy%3D%22120%22%20r%3D%2226%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M40%2014v52M14%2040h52M120%2014v52M94%2040h52M40%2094v52M14%20120h52M120%2094v52M94%20120h52%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}
/* Base reset: remove default browser margins that create "space kosong" above header and below footer. */
html, body{ margin:0; padding:0; }
body{ background: var(--js-bg); }
html[data-theme="light"] {
--js-bg: #050607;
--js-surface: rgba(10, 12, 14, .92);
--js-surface2: rgba(8, 10, 12, .92);
--js-text: #EEEAE1;
--js-muted: rgba(238,234,225,.70);
--js-border: rgba(227,181,68,.24);
--js-shadow: 0 14px 45px rgba(0,0,0,.12);
--js-pattern-opacity: .055;
}
.js-page {
background: var(--js-bg);
color: var(--js-text);
min-height: 100vh;
font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
position: relative;
overflow-x: hidden;
}
body.js-modal-open{ overflow: hidden; }
.js-page::before {
content:"";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background-image: var(--js-pattern-fingerprint);
background-repeat: repeat;
background-size: var(--js-pattern-size);
opacity: calc(var(--js-pattern-opacity) * .85);
filter: invert(1) sepia(1) saturate(7) hue-rotate(15deg) contrast(1.08);
mix-blend-mode: screen;
}
.js-page::after {
content:"";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
background:
radial-gradient(900px 420px at 20% 10%, rgba(227,181,68,.18), transparent 60%),
radial-gradient(720px 420px at 78% 18%, rgba(227,181,68,.12), transparent 65%),
radial-gradient(900px 520px at 55% 70%, rgba(227,181,68,.10), transparent 70%);
opacity: .72;
}
/* ===========================
Animated Triangle Background
=========================== */
.js-page.js-bg-triangles {
background-color: #060707;
/* Tone down header/footer textures when using the animated triangle background */
--js-pattern-opacity: 0.045;
--js-footer-pattern-opacity: 0.075;
}
/* Disable default fingerprint layers when triangle BG is enabled */
.js-page.js-bg-triangles::before,
.js-page.js-bg-triangles::after {
display: none;
}
/* On wide screens, keep the animated triangles as a subtle *edge/border* texture. */
.js-page.js-bg-triangles .js-tri-bg {
opacity: 0.26;
-webkit-mask-image: linear-gradient(90deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 14%,
rgba(0,0,0,0) 30%,
rgba(0,0,0,0) 70%,
rgba(0,0,0,1) 86%,
rgba(0,0,0,1) 100%
);
mask-image: linear-gradient(90deg,
rgba(0,0,0,1) 0%,
rgba(0,0,0,1) 14%,
rgba(0,0,0,0) 30%,
rgba(0,0,0,0) 70%,
rgba(0,0,0,1) 86%,
rgba(0,0,0,1) 100%
);
}
@media (max-width: 980px) {
.js-page.js-bg-triangles .js-tri-bg {
-webkit-mask-image: none;
mask-image: none;
opacity: 0.22;
}
}
.js-tri-bg {
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
--tri-w: clamp(150px, 18vw, 220px);
--tri-h: calc(var(--tri-w) * 1.15);
opacity: 0.22;
}
/* Keep main content above the fixed background */
.js-page.js-bg-triangles > .js-nav,
.js-page.js-bg-triangles > main,
.js-page.js-bg-triangles > footer {
position: relative;
z-index: 1;
}
.js-tri-overlay {
position: absolute;
inset: 0;
/* Fade edges + add subtle warm glow */
background:
radial-gradient(900px 420px at 20% 10%, rgba(227,181,68,.16), rgba(0,0,0,0) 60%),
radial-gradient(760px 380px at 78% 18%, rgba(255,226,154,.10), rgba(0,0,0,0) 62%),
radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 0%, rgba(6,7,7,.26) 62%, rgba(6,7,7,.80) 100%);
}
.js-tri-grid {
position: absolute;
inset: -22vh -22vw;
display: grid;
/* 16x10 = 160 cells (matches PHP output) */
grid-template-columns: repeat(16, var(--tri-w));
grid-template-rows: repeat(10, var(--tri-h));
transform: translate(-8%, -8%) scale(1.02);
}
.js-tri-shape {
width: var(--tri-w);
height: var(--tri-h);
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
}
/* Snap the “hex” cells together by shifting rows */
.js-tri-grid .js-tri-shape:nth-child(n+11) { transform: translate(-50%, -25%); }
.js-tri-grid .js-tri-shape:nth-child(n+21) { transform: translate(0%, -50%); }
.js-tri-grid .js-tri-shape:nth-child(n+31) { transform: translate(-50%, -75%); }
.js-tri-grid .js-tri-shape:nth-child(n+41) { transform: translate(0%, -100%); }
.js-tri-grid .js-tri-shape:nth-child(n+51) { transform: translate(-50%, -125%); }
/* Nav width tuning: keep EN/ID visible on smaller desktops */
@media (max-width: 1180px){
.js-nav-search{ min-width: 160px; max-width: 210px; }
.js-actions{ gap: 8px; }
}
@media (max-width: 900px) {
.js-tri-bg {
opacity: 0.18;
--tri-w: clamp(130px, 28vw, 190px);
}
}
@media (prefers-reduced-motion: reduce) {
.js-tri-bg { display: none; }
}
.js-container {
width: min(1160px, calc(100% - 40px));
margin: 0 auto;
position: relative;
z-index: 1;
}
@media (min-width: 1400px) {
.js-container {
width: min(1240px, calc(100% - 56px));
}
}
.js-nav {
position: sticky;
top: 0;
z-index: 99999;
isolation: isolate;
/* IMPORTANT: keep dropdowns visible outside the nav bar */
overflow: visible !important;
backdrop-filter: blur(14px);
background: rgba(5, 6, 7, .68);
border-bottom: 1px solid rgba(227,181,68,.14);
}
.js-nav::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
/* Header texture: reuse the footer geometric pattern (subtle) */
background-image:
var(--js-pattern-footer),
radial-gradient(700px 220px at 18% 0%, rgba(255,226,154,.10), transparent 62%),
radial-gradient(600px 220px at 86% 10%, rgba(227,181,68,.08), transparent 60%);
background-repeat: repeat, no-repeat, no-repeat;
background-size: calc(var(--js-footer-pattern-size) * .45), 700px 220px, 600px 220px;
background-position: 0 0, 18% 0%, 86% 10%;
opacity: .20;
filter: contrast(1.05) sepia(1) saturate(6) hue-rotate(14deg);
mix-blend-mode: soft-light;
}
html[data-theme="light"] .js-nav { background: rgba(255,255,255,.78); }
html[data-theme="light"] .js-nav::before { opacity: .10; mix-blend-mode: multiply; filter: contrast(1.02) sepia(.6) saturate(4) hue-rotate(10deg); }
.js-nav-inner {
display:flex;
align-items:center;
justify-content:flex-start;
padding: 10px 0;
gap: 14px;
}
.js-brand {
display:flex;
align-items:center;
gap: 12px;
font-weight: 750;
text-decoration:none;
color: var(--js-text);
}
.js-brand-logo{
width:64px;
height:64px;
border-radius: 16px;
object-fit: contain;
background: rgba(10,12,14,.55);
border: 1px solid rgba(227,181,68,.40);
box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
@media (max-width: 900px){
/* Mobile: keep header compact so language switch remains visible */
.js-brand-logo{ width:56px; height:56px; border-radius:14px; }
}
@media (max-width: 480px){
.js-brand-logo{ width:52px; height:52px; }
.js-wordmark{ height: 30px; }
}
/* Animated wordmark (SVG stroke dash). */
.js-wordmark{
height: 54px;
width: auto;
overflow: visible;
display: block;
}
.js-wordmark text{
font-family: var(--js-font);
font-weight: 850;
font-size: 78px;
letter-spacing: -1px;
}
.js-wordmark-glow{
fill: none;
stroke: url(#jsGoldWordmark);
stroke-width: 9.5;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .10;
filter: drop-shadow(0 0 16px rgba(227,181,68,.40)) drop-shadow(0 0 38px rgba(227,181,68,.18));
animation: js-wordmark-pulse 3.8s ease-in-out infinite;
}
.js-wordmark-outline{
fill: none;
stroke: url(#jsGoldWordmark);
stroke-width: 3.2;
stroke-linecap: round;
stroke-linejoin: round;
opacity: .92;
filter: drop-shadow(0 0 10px rgba(227,181,68,.22));
}
.js-wordmark-trace{
fill: none;
stroke: url(#jsGoldTrace);
stroke-width: 2.2;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 58 320;
animation: js-wordmark-trace 2.4s linear infinite;
opacity: .95;
filter: drop-shadow(0 0 12px rgba(255,226,154,.42)) drop-shadow(0 0 26px rgba(227,181,68,.22));
}
.js-wordmark-fill{
fill: url(#jsGoldWordmark);
opacity: .16;
filter: drop-shadow(0 1px 0 rgba(0,0,0,.55));
}
@media (prefers-reduced-motion: reduce){
.js-wordmark-trace{ animation: none; }
.js-wordmark-glow{ animation: none; }
}
@keyframes js-wordmark-pulse{
0%,100%{ opacity: .10; filter: drop-shadow(0 0 16px rgba(227,181,68,.38)) drop-shadow(0 0 36px rgba(227,181,68,.16)); }
50%{ opacity: .15; filter: drop-shadow(0 0 22px rgba(255,226,154,.40)) drop-shadow(0 0 50px rgba(227,181,68,.22)); }
}
@keyframes js-wordmark-trace{
to{ stroke-dashoffset: -920; }
}
/* Gold-foil brand text */
.js-brand-name{
font-weight: 850;
font-size: 22px;
letter-spacing: .2px;
background: linear-gradient(120deg, var(--js-gold2), var(--js-gold), #f6e29a, var(--js-gold2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 1px 0 rgba(0,0,0,.45);
position: relative;
display: inline-block;
}
/* Foil sheen overlay (subtle). Needs data-text attribute. */
.js-brand-name::after{
content: attr(data-text);
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(0,0,0,0) 0%,
rgba(246,226,154,.10) 15%,
rgba(246,226,154,.60) 35%,
rgba(227,181,68,.35) 55%,
rgba(0,0,0,0) 75%,
rgba(0,0,0,0) 100%);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: .40;
mix-blend-mode: screen;
pointer-events: none;
filter: blur(.15px);
animation: js-foil-sheen 8s linear infinite;
}
@media (prefers-reduced-motion: reduce){
.js-brand-name::after{ animation: none; }
}
@keyframes js-foil-sheen{
0%{ background-position: 0% 50%; opacity: .22; }
30%{ opacity: .45; }
100%{ background-position: 200% 50%; opacity: .22; }
}
.js-author-avatar{
width:42px;
height:42px;
border-radius: 16px;
object-fit: contain;
background: rgba(10,12,14,.55);
border: 1px solid rgba(227,181,68,.35);
box-shadow: 0 14px 34px rgba(0,0,0,.26);
flex: 0 0 auto;
}
.js-brand-badge {
width: 34px; height: 34px;
border-radius: 11px;
border: 1px solid rgba(227,181,68,.35);
background: linear-gradient(145deg, rgba(227,181,68,.28), rgba(227,181,68,.08));
box-shadow: 0 10px 30px rgba(0,0,0,.22);
}
.js-brand-badge::after{
content:"JS";
display:grid;
place-items:center;
width:100%;
height:100%;
font-weight:900;
letter-spacing:.5px;
font-size:12px;
color: rgba(255,216,107,.92);
text-shadow: 0 1px 0 rgba(0,0,0,.45);
}
.js-nav-links {
display:flex;
gap: 14px;
align-items:center;
font-size: 14px;
margin-left: 10px;
flex-wrap: nowrap;
}
.js-nav-links a { color: var(--js-muted); text-decoration:none; white-space: nowrap; }
.js-nav-links a:hover { color: var(--js-text); }
.js-actions { display:flex; align-items:center; gap: 10px; margin-left:auto; }
.js-nav-search{
position: relative;
display:flex;
align-items:center;
height: 40px;
padding: 0 12px;
border-radius: 999px;
border: 1px solid rgba(227,181,68,.30);
background: rgba(10,12,14,.38);
box-shadow: 0 10px 28px rgba(0,0,0,.22);
min-width: 200px;
max-width: 260px;
}
.js-nav-search::before{
content:"";
position:absolute;
inset:-1px;
border-radius: inherit;
background: linear-gradient(90deg, rgba(227,181,68,.22), rgba(246,226,154,.18), rgba(227,181,68,.22));
opacity: .0;
transition: opacity .2s ease;
pointer-events:none;
}
.js-nav-search:focus-within::before{ opacity: 1; }
.js-nav-search-ico{
color: rgba(246,226,154,.88);
opacity: .85;
margin-right: 8px;
flex: 0 0 auto;
}
.js-nav-search-input{
width: 100%;
min-width: 0;
background: transparent;
border: 0;
outline: none;
color: var(--js-text);
font-size: 13px;
}
.js-nav-search-input::placeholder{ color: rgba(240,240,240,.55); }
html[data-theme="light"] .js-nav-search{ background: rgba(255,255,255,.65); }
html[data-theme="light"] .js-nav-search-input::placeholder{ color: rgba(0,0,0,.45); }
.js-icon-btn {
width: 40px; height: 40px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.18);
color: var(--js-text);
display:grid;
place-items:center;
cursor:pointer;
}
html[data-theme="light"] .js-icon-btn {
background: rgba(255,255,255,.6);
border-color: rgba(26,34,38,.08);
}
/* Mobile hamburger icon ↔ close icon */
.js-ico-x{ display:none; }
body.js-drawer-open .js-ico-hamb{ display:none; }
body.js-drawer-open .js-ico-x{ display:block; }
.js-langseg{
display:flex;
align-items:center;
height:40px;
border-radius: 999px;
overflow:hidden;
border: 1px solid hsla(var(--js-dex-hue), 100%, 70%, .22);
background: rgba(0,0,0,.14);
box-shadow: 0 0 0 1px rgba(0,0,0,0.55) inset, 0 10px 26px rgba(0,0,0,0.18), 0 0 26px rgba(212,175,55,0.12);
}
html[data-theme="light"] .js-langseg{
background: rgba(255,255,255,.55);
border-color: rgba(26,34,38,.08);
}
.js-langseg-btn{
height:40px;
padding: 0 12px;
display:flex;
align-items:center;
justify-content:center;
text-decoration:none;
font-weight: 800;
font-size: 12px;
letter-spacing: .45px;
color: var(--js-muted);
}
.js-langseg-btn:hover{ color: var(--js-text); }
.js-langseg-btn.is-active{ background: linear-gradient(180deg, rgba(212,175,55,.34), rgba(212,175,55,.18)); color: rgba(255,232,170,.96); }
/*
Responsive rules (strong + !important):
Some WP themes ship global button/nav display rules that can override weak selectors.
We enforce: hamburger (drawer trigger) only on mobile, and nav links only on desktop.
*/
.js-nav .js-mobile-only { display:none !important; }
.js-desktop-only { display:flex; }
@media (max-width: 900px) {
.js-nav-inner { gap: 10px; }
.js-nav .js-nav-links { display:none !important; }
.js-nav .js-mobile-only { display:grid !important; }
}
@media (min-width: 901px) {
.js-nav .js-nav-links { display:flex !important; }
/* Prevent drawer from appearing on desktop even if a stale class is present */
.js-drawer { display:none !important; }
/* If the drawer was opened on mobile and then resized, avoid scroll-lock issues. */
body.js-drawer-open{ overflow:auto !important; }
}
.js-hero { padding: 46px 0 26px; }
.js-hero-grid {
display:grid;
grid-template-columns: 1.05fr .95fr;
gap: 22px;
}
@media (max-width: 900px) { .js-hero-grid { grid-template-columns: 1fr; } }
.js-h1 {
font-size: clamp(30px, 4vw, 48px);
line-height: 1.07;
letter-spacing: -0.4px;
margin: 0 0 10px;
}
.js-sub {
font-size: 16px;
color: var(--js-muted);
line-height: 1.55;
margin: 0 0 18px;
max-width: 52ch;
}
.js-cta-row { display:flex; flex-wrap:wrap; gap: 10px; align-items:center; }
.js-cta-row--left { justify-content: flex-start; }
/* Kawruh section layout: reduce empty space on desktop by pairing copy + author card */
.js-kawruh-grid{ display:grid; grid-template-columns: 1.15fr 0.85fr; gap: 22px; align-items: start; }
.js-kawruh-right{ display:flex; justify-content:center; }
.js-kawruh-right .jsk-authorcard-wrap{ margin-top: 0; }
@media (min-width: 981px){ .js-kawruh-right{ justify-content:flex-end; } }
@media (max-width: 980px){ .js-kawruh-grid{ grid-template-columns: 1fr; } }
.js-microtrust { font-size: 12px; color: rgba(233,230,221,.62); margin-top:10px; }
html[data-theme="light"] .js-microtrust { color: rgba(26,34,38,.55); }
/* Today (Ringkasan) bar */
.js-todaybar{
display:flex;
align-items:center;
justify-content:space-between;
gap:14px;
padding:14px 16px;
border-radius: var(--js-radius-lg);
background: rgba(10,12,14,.62);
background-image:
radial-gradient(120% 160% at 18% 12%, rgba(255,226,154,.12), rgba(0,0,0,0) 55%),
radial-gradient(90% 120% at 88% 10%, rgba(227,181,68,.10), rgba(0,0,0,0) 60%);
border:1px solid rgba(255,226,154,.30);
box-shadow: 0 22px 60px rgba(0,0,0,.58);
}
.js-todaybar__copy{ min-width:0; }
.js-todaybar__title{
font-weight: 900;
letter-spacing: .15px;
margin-bottom:6px;
background: linear-gradient(120deg, var(--js-gold2), var(--js-gold), #f6e29a, var(--js-gold2));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 1px 0 rgba(0,0,0,.45);
position: relative;
display: inline-block;
}
.js-todaybar__title::after{
content: attr(data-text);
position: absolute;
inset: 0;
background: linear-gradient(90deg,
rgba(0,0,0,0) 0%,
rgba(246,226,154,.10) 15%,
rgba(246,226,154,.55) 35%,
rgba(227,181,68,.35) 55%,
rgba(0,0,0,0) 75%,
rgba(0,0,0,0) 100%);
background-size: 220% 100%;
background-position: 0% 50%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
opacity: .34;
mix-blend-mode: screen;
pointer-events: none;
filter: blur(.15px);
animation: js-foil-sheen 8s linear infinite;
}
@media (prefers-reduced-motion: reduce){
.js-todaybar__title::after{ animation:none; }
}
.js-todaybar__line{
color: rgba(233,230,221,.82);
font-size: 14px;
line-height: 1.55;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Luxury icons + neptu pill (ported from Flutter emoji concept, styled like jewelry) */
.js-todaybar__lead{
font-weight: 800;
color: rgba(255,226,154,.96);
text-shadow: 0 0 18px rgba(227,181,68,.16);
margin-right: 10px;
}
.js-dot{
margin: 0 10px;
color: rgba(255,226,154,.85);
text-shadow: 0 0 18px rgba(227,181,68,.14);
}
.js-nightchip{
display: inline-flex;
align-items: center;
padding: 4px 10px;
margin-right: 10px;
border-radius: 999px;
font-size: 11px;
letter-spacing: .18px;
color: rgba(255,226,154,.96);
border: 1px solid rgba(255,226,154,.26);
background: radial-gradient(120% 180% at 30% 20%, rgba(255,226,154,.16), rgba(0,0,0,0) 60%),
rgba(0,0,0,.18);
box-shadow: 0 10px 26px rgba(0,0,0,.42);
}
.js-ico{
width: 28px;
height: 28px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 16px;
line-height: 1;
max-width: 100%;
text-align: center;
white-space: normal;
border: 1px solid rgba(255,226,154,.30);
background:
radial-gradient(120% 140% at 30% 20%, rgba(255,226,154,.22), rgba(0,0,0,0) 62%),
linear-gradient(145deg, rgba(227,181,68,.18), rgba(0,0,0,.14));
box-shadow:
0 12px 34px rgba(0,0,0,.50),
inset 0 1px 0 rgba(255,226,154,.22);
position: relative;
overflow: hidden;
}
.js-ico::after{
content:"";
position:absolute;
inset:-40% -60%;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,226,154,.22), rgba(0,0,0,0));
transform: rotate(18deg) translateX(-55%);
opacity: .40;
animation: js-ico-sheen 5.2s linear infinite;
}
.js-ico--pasar{ box-shadow: 0 12px 34px rgba(0,0,0,.52), inset 0 1px 0 rgba(255,226,154,.18); }
.js-neptu-pill{
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 36px;
height: 26px;
padding: 0 10px;
margin-left: 10px;
border-radius: 999px;
font-weight: 900;
font-size: 13px;
letter-spacing: .2px;
color: var(--js-gold2);
border: 1px solid rgba(255,226,154,.34);
background:
radial-gradient(120% 160% at 30% 20%, rgba(255,226,154,.18), rgba(0,0,0,0) 60%),
rgba(0,0,0,.22);
text-shadow: 0 0 16px rgba(227,181,68,.20);
box-shadow: 0 14px 40px rgba(0,0,0,.52);
}
@keyframes js-ico-sheen{
0%{ transform: rotate(18deg) translateX(-60%); }
100%{ transform: rotate(18deg) translateX(60%); }
}
@media (prefers-reduced-motion: reduce){
.js-ico::after{ animation:none; }
}
.js-todaybar__tips{
margin-top: 6px;
display:flex;
flex-wrap: wrap;
gap: 10px;
font-size: 12px;
line-height: 1.55;
color: rgba(233,230,221,.70);
}
.js-todaybar__tip{
display:inline-flex;
gap: 4px;
min-width: 0;
}
.js-todaybar__tipLabel{
color: rgba(255,226,154,.96);
font-weight: 900;
text-shadow: 0 0 18px rgba(227,181,68,.16);
}
.js-todaybar__tipText{
color: rgba(233,230,221,.70);
}
.js-todaybar__btn{ flex:0 0 auto; }
/* Today card (centered, single CTA like the Flutter Ringkasan pill) */
.js-todaybar--card{
flex-direction: column;
align-items: center;
text-align: center;
justify-content: flex-start;
padding: 18px 18px 16px;
gap: 10px;
}
.js-todaybar--card .js-todaybar__copy{ width:100%; }
.js-todaybar--card .js-todaybar__line{
white-space: normal;
overflow: visible;
text-overflow: clip;
}
.js-todaybar__wuku{
font-weight: 900;
color: rgba(233,230,221,.92);
margin-top: 2px;
}
.js-todaybar__date{
margin-top: 6px;
font-size: 12px;
color: rgba(233,230,221,.68);
}
.js-todaybar__note{
margin-top: 6px;
font-size: 12px;
line-height: 1.55;
color: rgba(255,226,154,.82);
text-shadow: 0 0 18px rgba(227,181,68,.12);
max-width: 66ch;
}
.js-todaybar__quote{
margin-top: 8px;
font-size: 12px;
color: rgba(233,230,221,.64);
font-style: italic;
max-width: 62ch;
}
.js-todaybar__lockwrap{
margin-bottom: 2px;
}
.js-prem-lock--big{
width: 44px;
height: 44px;
border-radius: 16px;
}
.js-todaybar__cta{
width: auto;
}
.js-todaybar__badge{
margin-top: 10px;
}
/* Inline Premium tease inside Today card */
.js-todaybar__premium{
margin-top: 10px;
display: inline-flex;
align-items: center;
gap: 10px;
text-decoration: none;
}
.js-prem-lock{
width: 34px;
height: 34px;
border-radius: 14px;
position: relative;
display: grid;
place-items: center;
color: var(--js-gold2);
border: 1px solid rgba(255,226,154,.28);
background: linear-gradient(145deg, rgba(227,181,68,.24), rgba(0,0,0,.16));
box-shadow: 0 12px 34px rgba(0,0,0,.42);
overflow: hidden;
}
.js-prem-lock__glow{
content:"";
position:absolute;
inset:-14px;
background: radial-gradient(circle at 50% 55%, rgba(255,226,154,.60), rgba(227,181,68,.25) 38%, transparent 72%);
filter: blur(10px);
opacity: .72;
animation: js-lock-pulse 2.6s ease-in-out infinite;
}
.js-prem-lock__svg{
position: relative;
z-index: 1;
filter: drop-shadow(0 0 12px rgba(227,181,68,.45));
}
.js-prem-lock::after{
content:"";
position:absolute;
inset:-40% -60%;
background: linear-gradient(90deg, rgba(0,0,0,0), rgba(255,226,154,.26), rgba(0,0,0,0));
transform: rotate(20deg) translateX(-40%);
opacity: .55;
animation: js-lock-sheen 3.8s linear infinite;
}
@keyframes js-lock-pulse{
0%,100%{ transform: scale(.96); opacity:.60; }
50%{ transform: scale(1.06); opacity:.92; }
}
@keyframes js-lock-sheen{
0%{ transform: rotate(20deg) translateX(-55%); }
100%{ transform: rotate(20deg) translateX(55%); }
}
@media (prefers-reduced-motion: reduce){
.js-prem-lock__glow,.js-prem-lock::after{ animation:none; }
}
.js-prem-badge{
display: inline-flex;
align-items: center;
gap: 8px;
padding: 6px 12px;
border-radius: 999px;
border: 1px solid rgba(255,226,154,.30);
background: linear-gradient(120deg, rgba(227,181,68,.18), rgba(10,12,14,.18));
color: rgba(255,226,154,.95);
font-weight: 900;
font-size: 12px;
letter-spacing: .1px;
box-shadow: inset 0 0 0 1px rgba(255,226,154,.10);
}
.js-prem-badge::before{
content:"";
width: 7px;
height: 7px;
border-radius: 99px;
background: rgba(255,226,154,.98);
box-shadow: 0 0 14px rgba(227,181,68,.60);
animation: js-prem-dot 1.6s ease-in-out infinite;
}
@keyframes js-prem-dot{
0%,100%{ transform: scale(.78); opacity:.65; }
50%{ transform: scale(1.08); opacity:1; }
}
.js-todaybar__premium:hover .js-prem-badge{
border-color: rgba(255,226,154,.48);
transform: translateY(-1px);
}
.js-todaybar__premium:active .js-prem-badge{ transform: translateY(0); }
@media (max-width: 720px){
.js-todaybar:not(.js-todaybar--card){ align-items:flex-start; flex-direction:column; }
.js-todaybar:not(.js-todaybar--card) .js-todaybar__line{ white-space: normal; }
.js-todaybar:not(.js-todaybar--card) .js-todaybar__btn{ width:100%; }
}
.js-card {
background: var(--js-surface);
border: 1px solid var(--js-border);
border-radius: var(--js-radius-lg);
box-shadow: var(--js-shadow);
overflow:hidden;
position: relative;
}
.js-card-pad { padding: 18px; }
.js-tabs { display:flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.js-tab {
padding: 7px 10px;
border-radius: 999px;
border: 1px solid rgba(227,181,68,.22);
background: rgba(0,0,0,.18);
color: var(--js-muted);
font-size: 12px;
cursor: pointer;
}
.js-tab[aria-selected="true"] {
color: var(--js-text);
border-color: rgba(227,181,68,.48);
background: linear-gradient(145deg, rgba(227,181,68,.18), rgba(227,181,68,.06));
}
.js-grid-tools {
display:grid;
grid-template-columns: repeat(4, 1fr);
gap: 18px;
margin: 18px 0 8px;
}
@media (max-width: 1000px) { .js-grid-tools { grid-template-columns: repeat(2, 1fr); } }
/* Mobile: give more breathing room so card shadows/glows never feel “stacked” */
@media (max-width: 540px) { .js-grid-tools { grid-template-columns: 1fr; gap: 64px; margin: 34px 0 22px; } }
@media (max-width: 540px){
.js-tool{ padding: 18px; }
.js-tool p{ margin-bottom: 14px; }
}
.js-tool {
border-radius: var(--js-radius-lg);
background: var(--js-surface2);
border: 1px solid rgba(227,181,68,.20);
padding: 16px;
position: relative;
overflow: hidden;
transition: transform .22s ease, border-color .22s ease;
display:flex;
flex-direction:column;
height:100%;
}
.js-tool:hover { transform: translateY(-6px); border-color: rgba(227,181,68,.45); }
.js-tool h3 { margin: 10px 0 6px; font-size: 16px; }
.js-tool p { margin: 0 0 12px; color: var(--js-muted); font-size: 13px; line-height: 1.45; }
.js-chip {
display:inline-flex;
align-items:center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(227,181,68,.30);
color: var(--js-text);
background: rgba(0,0,0,.18);
font-size: 12px;
}
.js-link { color: var(--js-gold2); text-decoration: none; font-size: 13px; }
.js-link:hover { text-decoration: underline; }
/* Blog / Posts */
.js-blog-grid{
display:grid;
grid-template-columns: repeat(2, 1fr);
gap: 14px;
}
@media (max-width: 900px){ .js-blog-grid{ grid-template-columns: 1fr; } }
.js-post-card{
display:block;
padding: 16px;
border-radius: var(--js-radius-lg);
background: var(--js-surface2);
border: 1px solid rgba(227,181,68,.20);
box-shadow: var(--js-shadow);
color: inherit;
text-decoration:none;
transition: transform .22s ease, border-color .22s ease;
}
.js-post-card:hover{ transform: translateY(-6px); border-color: rgba(227,181,68,.45); }
.js-post-meta{
display:flex;
gap: 10px;
flex-wrap:wrap;
align-items:center;
color: var(--js-muted);
font-size: 12px;
}
.js-post-title{ font-weight: 780; margin: 10px 0 8px; font-size: 16px; }
.js-post-excerpt{ margin:0; color: var(--js-muted); font-size: 13px; line-height: 1.55; }
.js-pagination{
display:flex;
gap: 8px;
flex-wrap:wrap;
margin-top: 16px;
}
.js-pagination .page-numbers{
display:inline-flex;
align-items:center;
justify-content:center;
min-width: 36px;
height: 34px;
padding: 0 10px;
border-radius: 999px;
border: 1px solid rgba(227,181,68,.28);
background: rgba(0,0,0,.18);
color: var(--js-text);
text-decoration:none;
font-size: 12px;
}
.js-pagination .page-numbers.current{
border-color: rgba(227,181,68,.55);
background: linear-gradient(145deg, rgba(227,181,68,.18), rgba(227,181,68,.06));
}
.js-content{ color: var(--js-text); }
.js-content p{ margin: 0 0 14px; color: var(--js-text); line-height:1.75; }
.js-content a{ color: var(--js-gold2); }
.js-content a:hover{ text-decoration: underline; }
.js-content h2{ margin: 26px 0 10px; font-size: 24px; }
.js-content h3{ margin: 22px 0 8px; font-size: 18px; }
.js-content ul, .js-content ol{ margin: 0 0 16px 22px; }
.js-content li{ margin: 6px 0; }
.js-content blockquote{
margin: 16px 0;
padding: 12px 14px;
border-left: 2px solid rgba(227,181,68,.55);
background: rgba(0,0,0,.18);
color: var(--js-muted);
border-radius: 12px;
}
/* LED border button */
.js-led {
position: relative;
display:inline-flex;
align-items:center;
justify-content:center;
padding: 12px 16px;
border-radius: 16px;
background: rgba(0,0,0,.20);
border: 1px solid rgba(255,255,255,.08);
color: var(--js-text);
text-decoration: none;
cursor:pointer;
}
.js-led::before {
content:"";
position:absolute;
inset:0;
padding: var(--js-led-thickness);
border-radius: inherit;
/* Static gold frame */
background: linear-gradient(135deg, rgba(122,86,18,1), rgba(255,216,107,1), rgba(162,112,26,1));
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .90;
pointer-events:none;
}
/* Moving light (not rotating frame) */
.js-led::after{
content:"";
position:absolute;
inset: -2px;
padding: calc(var(--js-led-thickness) + 1px);
border-radius: inherit;
/* a small bright segment that travels */
background: conic-gradient(
from 0deg,
transparent 0 93%,
rgba(255,216,107,0.0) 93%,
rgba(255,216,107,.98) 95.4%,
rgba(255,216,107,0.0) 97.8%,
transparent 97.8% 100%
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
filter: blur(1.15px) drop-shadow(0 0 14px rgba(255,216,107,.26));
mix-blend-mode: screen;
opacity: 0;
pointer-events:none;
animation: js-led-glint var(--js-led-speed) linear infinite;
animation-play-state: paused;
transition: opacity .25s ease;
}
.js-led:hover::after,
.js-led:focus-visible::after{
opacity: .72;
animation-play-state: running;
}
.js-led.is-animated::after{
opacity: .72;
animation-play-state: running;
}
@keyframes js-led-glint { to { transform: rotate(360deg); } }
/* tool hover sweep */
.js-tool::before {
content:"";
position:absolute;
inset:-45%;
background: linear-gradient(120deg, transparent 35%, rgba(255,216,107,.10) 45%, rgba(214,176,76,.28) 50%, rgba(255,216,107,.12) 55%, transparent 65%);
transform: translateX(-60%) rotate(10deg);
opacity:0;
pointer-events:none;
}
.js-tool:hover::before { opacity:1; animation: js-sweep 1.8s ease-out 1; }
@keyframes js-sweep { to { transform: translateX(60%) rotate(10deg); } }
.js-section { padding: 26px 0; }
.js-section h2 { margin: 0 0 10px; font-size: 22px; }
.js-section .js-lead {
margin: 10px 0 16px;
color: var(--js-muted);
line-height: 1.65;
max-width: 74ch;
font-size: 16px;
padding: 14px 16px;
border-radius: 16px;
border: 1px solid rgba(227,181,68,.18);
background: rgba(0,0,0,.18);
box-shadow: inset 0 0 0 1px rgba(255,226,154,.05);
}
.js-why { display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 900px) { .js-why { grid-template-columns: 1fr; } }
.js-why .js-card { padding: 16px; }
/* Prolog section (Rasa, Logika, Peta Waktu) */
.js-prolog-grid{
display:grid;
grid-template-columns: repeat(3, minmax(0,1fr));
gap: 18px;
margin-top: 14px;
}
@media (max-width: 900px){ .js-prolog-grid{ grid-template-columns: 1fr; } }
.js-prolog-card{
position: relative;
padding: 18px;
border-radius: 18px;
border: 1px solid rgba(227,181,68,.22);
background: linear-gradient(180deg, rgba(10,12,14,.68), rgba(6,7,7,.78));
box-shadow: 0 18px 55px rgba(0,0,0,.38);
overflow:hidden;
}
.js-prolog-card::before{
content:"";
position:absolute;
inset:-55%;
background: radial-gradient(circle at 30% 35%, rgba(255,226,154,.18), transparent 55%),
linear-gradient(120deg, transparent 35%, rgba(255,216,107,.10) 45%, rgba(214,176,76,.26) 50%, rgba(255,216,107,.10) 55%, transparent 65%);
transform: translateX(-55%) rotate(10deg);
opacity: .0;
pointer-events:none;
}
.js-prolog-card:hover::before{ opacity:.95; animation: js-sweep 1.9s ease-out 1; }
.js-prolog-kicker{
font-weight: 900;
letter-spacing: .3px;
margin-bottom: 10px;
background: linear-gradient(120deg, rgba(206,154,43,.96), rgba(255,226,154,.98), rgba(227,181,68,.96));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.js-prolog-text{ color: var(--js-muted); line-height: 1.85; }
.js-prolog-stamp{
margin-top: 16px;
display:block;
width: fit-content;
max-width: 100%;
padding: 10px 14px;
border-radius: 16px;
border: 1px solid rgba(227,181,68,.35);
background: radial-gradient(120% 150% at 25% 10%, rgba(255,226,154,.10), rgba(10,12,14,.92) 60%, rgba(10,12,14,.96) 100%);
box-shadow: inset 0 0 0 1px rgba(255,226,154,.08), 0 12px 32px rgba(0,0,0,.55);
color: rgba(255,242,210,.92);
font-weight: 900;
letter-spacing:.2px;
white-space: normal;
word-break: break-word;
}
.js-app { display:grid; grid-template-columns: .95fr 1.05fr; gap: 16px; }
@media (max-width: 900px) { .js-app { grid-template-columns: 1fr; } }
/* App + Author (paired) */
.js-app-grid{
display:grid;
grid-template-columns: 1.15fr .85fr;
gap: 16px;
align-items: stretch;
}
@media (max-width: 980px){
.js-app-grid{ grid-template-columns: 1fr; }
}
.js-app-author{
display:flex;
justify-content: center;
align-items: stretch;
}
.js-app-author > *{ width: 100%; max-width: 380px; height: 100%; }
/* Make the App combo card stretch and look more "luxury" (less empty space) */
.js-appcombo{
display:flex;
flex-direction: column;
height: 100%;
position: relative;
overflow:hidden;
background: radial-gradient(140% 160% at 20% 12%, rgba(255,226,154,.10), rgba(10,12,14,.92) 58%, rgba(10,12,14,.96) 100%);
}
.js-appcombo::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.18;
background:
repeating-linear-gradient(135deg, rgba(255,226,154,.10) 0 1px, rgba(0,0,0,0) 1px 14px),
radial-gradient(120% 140% at 60% 10%, rgba(227,181,68,.18), rgba(0,0,0,0) 55%);
mix-blend-mode: screen;
}
.js-appcombo-top, .js-appcombo-mid, .js-appcombo-foot{ position:relative; z-index:1; }
.js-appcombo-desc{ color: var(--js-muted); margin-top:6px; line-height:1.65; max-width: 60ch; }
.js-appcombo-mid{ flex: 1; }
.js-appcombo-list{
margin-top: 8px;
}
.js-appcombo-list li{ margin: 6px 0; }
.js-appcombo-foot{
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid rgba(255,226,154,.14);
box-shadow: inset 0 1px 0 rgba(255,226,154,.06);
}
.js-appcombo-note{
margin-top: 10px;
display:inline-flex;
align-items:center;
justify-content:center;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(212,175,55,.26);
background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(0,0,0,0));
color: rgba(255,226,154,.88);
font-size: 12px;
font-weight: 700;
letter-spacing: .2px;
}
.js-appcombo-actions{ margin-top: 12px; }
.js-divider{
height: 1px;
margin: 16px 0 12px;
background: linear-gradient(90deg, transparent, rgba(255,226,154,.22), transparent);
box-shadow: 0 1px 0 rgba(0,0,0,.55);
}
.js-appcombo-sub{
display:block;
margin-bottom: 8px;
}
.js-appcombo-list{
margin: 0;
padding-left: 18px;
color: var(--js-muted);
line-height: 1.7;
}
/* Kawruh section without right column */
.js-kawruh-simple .js-cta-row{ margin-top: 12px; }
/* Recent posts list (Kawruh & Berita) */
.js-kawruh-posts{ margin-top: 14px; max-width: 1200px; }
.js-kawruh-posts-head{ display:flex; align-items:center; justify-content:space-between; gap: 12px; margin: 6px 0 10px; }
.js-kawruh-posts-title{ font-size: 12px; font-weight: 850; letter-spacing: .6px; text-transform: uppercase; color: rgba(255,226,154,.92); }
.js-kawruh-posts-more{ font-size: 12px; color: rgba(255,226,154,.78); text-decoration:none; border-bottom: 1px solid rgba(255,226,154,.22); padding-bottom: 2px; }
.js-kawruh-posts-more:hover{ color: rgba(255,233,154,1); border-bottom-color: rgba(255,226,154,.45); }
.js-kawruh-posts-moreBtn{ white-space:nowrap; }
.js-kawruh-posts-head .btn-wrapper{ flex: 0 0 auto; }
.js-kawruh-posts-list{ display:grid; gap: 12px; grid-template-columns: 1fr; }
/* Thumbnails */
.js-kawruh-thumb{
display:block;
border-radius: 14px;
overflow:hidden;
border: 1px solid rgba(255,226,154,.22);
outline: 1px solid rgba(255,226,154,.10);
box-shadow: 0 10px 22px rgba(0,0,0,.30);
margin-bottom: 10px;
position: relative;
}
.js-kawruh-thumb img{
display:block;
width:100%;
height:auto;
aspect-ratio: 16/9;
object-fit: cover;
transform: translateZ(0);
}
.js-kawruh-thumb-ph{
display:block;
width:100%;
aspect-ratio: 16/9;
background:
radial-gradient(circle at 20% 20%, rgba(255,226,154,.18), transparent 45%),
repeating-linear-gradient(135deg, rgba(255,226,154,.10) 0 1px, rgba(0,0,0,0) 1px 14px),
linear-gradient(180deg, rgba(10,12,14,.80), rgba(10,12,14,.55));
}
.js-kawruh-post{
position:relative;
padding: 12px 14px;
border-radius: 16px;
border: 1px solid rgba(255,226,154,.14);
background: linear-gradient(180deg, rgba(10,12,14,.60), rgba(10,12,14,.42));
box-shadow: 0 10px 24px rgba(0,0,0,.22);
overflow:hidden;
}
.js-kawruh-post::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.12;
background: repeating-linear-gradient(135deg, rgba(255,226,154,.10) 0 1px, rgba(0,0,0,0) 1px 16px);
mix-blend-mode: screen;
}
.js-kawruh-post-title{ position:relative; z-index:1; display:inline-block; color: rgba(255,233,154,.98); font-weight: 850; letter-spacing: .2px; text-decoration:none; }
.js-kawruh-meta{ position:relative; z-index:1; margin-top: 6px; font-size: 12px; color: rgba(230,232,237,.66); }
.js-kawruh-ex{ position:relative; z-index:1; margin-top: 6px; font-size: 13px; line-height: 1.6; color: rgba(230,232,237,.82); }
.js-kawruh-post:hover{ border-color: rgba(255,226,154,.26); transform: translateY(-1px); transition: transform .18s ease, border-color .18s ease; }
@media (min-width: 1024px){
.js-kawruh-posts-list{ grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.js-kawruh-post{ padding: 10px 12px 12px; }
.js-kawruh-ex{
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
min-height: 2.6em;
}
.js-kawruh-post-title{ font-size: 14px; }
}
/* FAQ */
.js-faq{ display:grid; gap: 10px; }
.js-faq-item{
background: var(--js-surface);
/* Slightly brighter border for better contrast on dark background */
border: 1px solid rgba(255,226,154,.14);
border-radius: 16px;
box-shadow: 0 10px 26px rgba(0,0,0,.22);
overflow:hidden;
}
.js-faq-q{
list-style:none;
cursor:pointer;
padding: 14px 14px;
font-weight: 750;
display:flex;
align-items:flex-start;
justify-content: space-between;
gap: 10px;
background: linear-gradient(180deg, rgba(10,12,14,.56), rgba(10,12,14,.40));
border-bottom: 1px solid rgba(255,226,154,.22);
box-shadow: inset 0 1px 0 rgba(255,226,154,.10);
}
.js-faq-qtext{
font-weight: 850;
letter-spacing: .2px;
/* Safe default: solid champagne gold (prevents "yellow highlight blocks" on some mobile browsers) */
color: rgba(255,233,154,.98) !important;
display: inline-block;
background: none !important;
background-color: transparent !important;
padding: 0 !important;
text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 18px rgba(255,226,154,.12);
}
/* Upgrade to foil/gradient gold only when text-clipping is supported */
@supports ((-webkit-background-clip: text) or (background-clip: text)){
.js-faq-qtext{
background: linear-gradient(120deg,
rgba(255,233,154,1),
rgba(255,255,250,1),
rgba(255,210,90,1)) !important;
-webkit-background-clip: text;
background-clip: text;
color: transparent !important;
-webkit-text-fill-color: transparent !important;
text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 26px rgba(255,226,154,.18);
}
}
/* Force solid gold question text (no highlight blocks/no gradient). */
.js-faq .js-faq-q .js-faq-qtext{
background: transparent !important;
background-image: none !important;
background-color: transparent !important;
color: var(--js-gold2) !important;
-webkit-text-fill-color: var(--js-gold2) !important;
padding: 0 !important;
box-shadow: none !important;
border: 0 !important;
}
.js-faq-q::-webkit-details-marker{ display:none; }
.js-faq-q::after{
content: "＋";
opacity: .92;
color: rgba(255,233,154,.98);
transform: translateY(-1px);
}
.js-faq-item[open] .js-faq-q::after{ content: "－"; opacity: .85; }
.js-faq-a{
padding: 0 14px 14px;
color: rgba(255,255,255,.92);
line-height: 1.65;
}
.js-faq-a p{ margin: 0 0 10px; }
.js-faq-a ul{ margin: 0 0 10px 18px; }
.js-faq-a li{ margin: 4px 0; }
.js-footer {
margin-top: 34px;
padding: 46px 0 56px;
background: linear-gradient(to bottom, rgba(6, 8, 9, .36), rgba(6, 8, 9, .74));
border-top: 1px solid rgba(227,181,68,.18);
position: relative;
overflow: hidden;
}
/* Full-bleed footer even when rendered inside a constrained container (shortcode page). */
.js-container .js-footer{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
}
.js-footer::before {
content:"";
position:absolute;
inset:0;
background-image: var(--js-pattern-footer);
background-repeat: repeat;
background-size: var(--js-footer-pattern-size);
opacity: var(--js-footer-pattern-opacity);
pointer-events:none;
filter: contrast(1.05) sepia(1) saturate(6) hue-rotate(14deg);
mix-blend-mode: soft-light;
}
.js-footer::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(700px 260px at 20% 20%, rgba(227,181,68,.18), transparent 60%),
linear-gradient(to bottom, rgba(8,12,14,.88), rgba(8,12,14,.60) 45%, rgba(8,12,14,.92));
}
html[data-theme="light"] .js-footer::after{
background:
radial-gradient(700px 260px at 20% 20%, rgba(227,181,68,.14), transparent 60%),
linear-gradient(to bottom, rgba(255,255,255,.92), rgba(255,255,255,.72) 45%, rgba(255,255,255,.95));
}
.js-footer-inner {
position: relative;
z-index: 1;
display:grid;
grid-template-columns: 1.35fr .9fr .9fr;
gap: 22px;
}
@media (max-width: 900px) { .js-footer-inner { grid-template-columns: 1fr; } }
/* Footer “quiet luxury” (brand gradient + glass panel + refined rhythm) */
.js-footer-panel{
position: relative;
z-index: 1;
/* Extra bottom padding so the social icon reflection has room and doesn't collide */
padding: 26px 22px 34px;
border-radius: 22px;
/* Gradient border (luxury “foil”) */
border: 1px solid transparent;
background:
linear-gradient(180deg, rgba(12,16,18,0.74), rgba(0,0,0,0.42)) padding-box,
linear-gradient(115deg, rgba(212,175,55,0.10), rgba(255,242,210,0.22), rgba(212,175,55,0.10)) border-box;
box-shadow: 0 28px 80px rgba(0,0,0,0.45);
backdrop-filter: blur(14px);
/* Keep clipping for rounded corners, but give enough space for reflected UI */
overflow: hidden;
}
.js-footer-panel::before{
content:"";
position:absolute;
inset:0;
pointer-events:none;
background:
radial-gradient(900px 220px at 20% 0%, rgba(255,226,154,0.10), transparent 60%),
radial-gradient(700px 200px at 85% 10%, rgba(212,175,55,0.08), transparent 55%);
opacity: .85;
}
/* Column rhythm */
.js-footer-col{ min-width: 0; }
.js-footer-links a{ transition: color .18s ease, transform .18s ease; }
.js-footer-links a:hover{ transform: translateX(2px); }
.js-footer-brand{
font-weight: 900;
font-size: 18px;
letter-spacing: .2px;
background: linear-gradient(120deg, rgba(214,176,76,.98), rgba(255,242,210,.96), rgba(227,181,68,.92));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 1px 0 rgba(0,0,0,.55), 0 0 22px rgba(255,226,154,.08);
margin-bottom: 8px;
}
.js-footer-quote{
color: var(--js-muted);
line-height: 1.65;
max-width: 46ch;
}
.js-footer-title{
font-weight: 850;
font-size: 12px;
letter-spacing: .55px;
text-transform: uppercase;
color: rgba(255,242,210,.84);
margin-bottom: 10px;
}
.js-footer-links{
display: grid;
gap: 10px;
}
.js-footer-links a{
position: relative;
padding-left: 10px;
}
.js-footer-links a::before{
content:"";
position:absolute;
left:0;
top: .75em;
width: 6px;
height: 1px;
background: rgba(212,175,55,0.55);
opacity: .55;
}
.js-footer-links a:hover::before{ opacity: .95; }
.js-footer-bottom{
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid rgba(212,175,55,0.14);
}
.js-footer-copy{
color: var(--js-muted);
font-size: 12px;
letter-spacing: .2px;
}
@media (max-width: 900px){
.js-footer-panel{ padding: 22px 16px 16px; border-radius: 20px; }
.js-footer-quote{ max-width: 60ch; }
.js-footer-inner{ gap: 16px; }
/* Mobile: give each section a subtle divider so it feels “crafted”, not plain lists */
.js-footer-col{ padding-top: 14px; border-top: 1px solid rgba(212,175,55,0.10); }
.js-footer-col:first-child{ padding-top: 0; border-top: 0; }
.js-footer-bottom{ text-align: center; }
}
/* Footer social icons (reflect hover) */
.js-footer .js-footer-bottomInner{
display:flex;
align-items:center;
justify-content:space-between;
gap: 16px;
flex-wrap: wrap;
}
@media (max-width: 900px){
.js-footer .js-footer-bottomInner{ justify-content:center; }
}
.js-footer .social-login-icons{
display:flex;
align-items:center;
gap: 12px;
/* Make reflection feel intentional (more breathing room) */
-webkit-box-reflect: below 10px linear-gradient(transparent, #00000044);
padding: 0;
margin: 0;
}
.js-footer .socialcontainer{
/* Must match ONE icon height so the second colored layer is fully hidden (no "nabrak") */
height: 46px;
overflow: hidden;
cursor: pointer;
text-decoration: none;
}
.js-footer .social-icon-1, .js-footer .social-icon-1-1,
.js-footer .social-icon-2, .js-footer .social-icon-2-2,
.js-footer .social-icon-3, .js-footer .social-icon-3-3,
.js-footer .social-icon-4, .js-footer .social-icon-4-4,
.js-footer .social-icon-5, .js-footer .social-icon-5-5{
width: 46px;
height: 46px;
display:flex;
align-items:center;
justify-content:center;
border-radius: 999px;
margin: 0;
}
/* Base transition */
.js-footer .social-icon-1, .js-footer .social-icon-2, .js-footer .social-icon-3, .js-footer .social-icon-4, .js-footer .social-icon-5{
transition-duration: .4s;
transition-timing-function: cubic-bezier(0.46, -0.78, 0.5, 1.56);
}
.js-footer .socialcontainer:hover .social-icon-1,
.js-footer .socialcontainer:hover .social-icon-2,
.js-footer .socialcontainer:hover .social-icon-3,
.js-footer .socialcontainer:hover .social-icon-4,
.js-footer .socialcontainer:hover .social-icon-5{
transform: translateY(-46px);
}
/* Opacity hover effect for all SVGs inside social-icons */
.js-footer .social-icon-1 svg, .js-footer .social-icon-2 svg, .js-footer .social-icon-3 svg, .js-footer .social-icon-4 svg, .js-footer .social-icon-5 svg{
opacity: 0;
transition-duration: .5s;
transition-delay: .2s;
}
.js-footer .socialcontainer:hover svg{ opacity: 1; }
/* Brand colors */
.js-footer .social-icon-1{ background-color:#000; }
.js-footer .social-icon-1-1{ background-color: transparent; }
.js-footer .social-icon-2{ background: linear-gradient(72.44deg, #ff7a00 11.92%, #ff0169 51.56%, #d300c5 85.69%); }
.js-footer .social-icon-2-2{ background-color: transparent; }
.js-footer .social-icon-3{ background:#316ff6; }
.js-footer .social-icon-3-3{ background-color: transparent; }
.js-footer .social-icon-4{ background:#010101; }
.js-footer .social-icon-4-4{ background-color: transparent; }
.js-footer .social-icon-5{ background:#ff0000; }
.js-footer .social-icon-5-5{ background-color: transparent; }
@media (max-width: 520px){
.js-footer .social-login-icons{ gap: 10px; }
.js-footer .social-icon-1, .js-footer .social-icon-1-1,
.js-footer .social-icon-2, .js-footer .social-icon-2-2,
.js-footer .social-icon-3, .js-footer .social-icon-3-3,
.js-footer .social-icon-4, .js-footer .social-icon-4-4,
.js-footer .social-icon-5, .js-footer .social-icon-5-5{ width: 42px; height: 42px; }
.js-footer .socialcontainer{ height: 42px; }
.js-footer .socialcontainer:hover .social-icon-1,
.js-footer .socialcontainer:hover .social-icon-2,
.js-footer .socialcontainer:hover .social-icon-3,
.js-footer .socialcontainer:hover .social-icon-4,
.js-footer .socialcontainer:hover .social-icon-5{ transform: translateY(-42px); }
}
.js-footer a { color: rgba(216,224,234,.74); text-decoration:none; }
.js-footer a:hover { color: var(--js-text); }
html[data-theme="light"] .js-footer a { color: rgba(17,23,28,.70); }
/* Overlay + drawer + search modal */
.js-overlay {
position: fixed;
inset: 0;
background: rgba(0,0,0,.48);
backdrop-filter: blur(10px);
/* Must sit above sticky nav (nav uses z-index: 99999). */
z-index: 2147483400;
display:none;
}
.js-overlay.is-open { display:block; }
.js-drawer {
position: fixed;
/* Respect safe area and stay above the sticky nav */
top: calc(env(safe-area-inset-top, 0px) + 12px);
right: 12px;
height: auto;
/* Keep it "luxury" (not full-screen). Still scrolls inside if needed. */
max-height: min(78vh, calc(100vh - env(safe-area-inset-top, 0px) - 24px));
width: min(360px, 86vw);
background: rgba(12,18,22,.92);
border: 1px solid rgba(227,181,68,.18);
border-radius: 24px;
box-shadow: 0 28px 80px rgba(0,0,0,.55);
z-index: 2147483600;
transform: translateX(110%);
transition: transform .26s ease;
overflow: hidden;
}
html[data-theme="light"] .js-drawer { background: rgba(255,255,255,.95); }
html[data-theme="light"] .js-drawer-header { background: rgba(255,255,255,.86); }
.js-drawer.is-open { transform: translateX(0); }
.js-drawer-header {
position: sticky;
top: 0;
display:flex;
align-items:center;
justify-content:flex-start;
padding: 14px 16px;
border-bottom: 1px solid rgba(227,181,68,.14);
background: rgba(12,18,22,.86);
backdrop-filter: blur(12px);
}
.js-drawer-body{
padding: 16px 16px 18px;
overflow:auto;
max-height: calc(78vh - 68px);
}
/* On touch devices we don't get hover: keep LED glint + tool sweep alive (subtle) */
@media (hover: none) {
.js-led::after{
opacity: .55;
animation-play-state: running;
}
.js-tool::before{
opacity: .38;
animation: js-sweep 5.2s ease-in-out infinite;
}
.js-tool:active::before{
opacity: .85;
animation-duration: 1.8s;
}
.js-tool:hover{ transform: none; }
}
.js-drawer-section{ padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.06); }
.js-drawer-section:last-child{ border-bottom: 0; }
.js-drawer-title{
font-size: 12px;
letter-spacing: .45px;
text-transform: uppercase;
color: var(--js-muted);
margin: 0 0 10px 2px;
}
.js-drawer-sub{ display:grid; gap: 8px; margin-bottom: 8px; }
.js-drawer-body a{
display:flex;
align-items:center;
justify-content:flex-start;
gap: 10px;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid hsla(var(--js-dex-hue), 100%, 70%, .22);
background: rgba(0,0,0,.14);
color: var(--js-text);
text-decoration:none;
}
.js-drawer-body a:hover{ background: rgba(227,181,68,.10); border-color: rgba(227,181,68,.28); }
.js-drawer-muted{ color: var(--js-muted) !important; }
.js-drawer-foot{ margin-top: 14px; font-size: 12px; color: var(--js-muted); }
/* Drawer layout (luxury inset + narrower blocks) */
.js-drawer-stack{
display:flex;
flex-direction:column;
gap: 10px;
max-width: 332px;
margin: 0 auto;
}
.js-drawer .js-acc{ margin-bottom: 0; }
/* Drawer accordion (mobile) */
.js-acc{
border: 1px solid rgba(255,255,255,.08);
background: rgba(0,0,0,.12);
border-radius: 16px;
padding: 10px 10px;
margin-bottom: 10px;
}
html[data-theme="light"] .js-acc{
background: rgba(0,0,0,.02);
border-color: rgba(26,34,38,.10);
}
.js-acc[open]{
border-color: rgba(227,181,68,.18);
}
.js-acc-sum{
list-style: none;
cursor: pointer;
display:flex;
align-items:center;
justify-content:flex-start;
gap: 10px;
padding: 6px 8px;
color: var(--js-text);
font-weight: 760;
font-size: 13px;
}
.js-acc-sum::-webkit-details-marker{ display:none; }
.js-acc-sum::after{
content: '▾';
opacity: .70;
transform: translateY(-1px);
}
.js-acc[open] .js-acc-sum::after{ content: '▴'; opacity: .80; }
.js-acc-body{
display:grid;
gap: 8px;
padding: 10px 6px 6px;
}
.js-acc-body a{
padding: 10px 12px;
border-radius: 16px;
}
.js-acc-muted{
color: var(--js-muted) !important;
}
html[data-theme="light"] .js-drawer-body a{
border-color: rgba(26,34,38,.10);
background: rgba(0,0,0,.03);
}
.js-searchmodal {
position: fixed;
left: 50%; top: 12%;
transform: translateX(-50%);
width: min(720px, 92vw);
background: var(--js-surface);
border: 1px solid rgba(227,181,68,.22);
border-radius: var(--js-radius-lg);
z-index: 100;
display:none;
overflow:hidden;
}
.js-searchmodal.is-open { display:block; }
.js-searchmodal-head {
padding: 14px 16px;
border-bottom: 1px solid rgba(227,181,68,.14);
display:flex;
gap: 10px;
align-items:center;
}
.js-searchmodal input {
width: 100%;
padding: 12px 12px;
border-radius: 16px;
border: 1px solid transparent;
/* Gold gradient border (quiet luxury) */
background:
linear-gradient(rgba(0,0,0,.16), rgba(0,0,0,.16)) padding-box,
linear-gradient(110deg, rgba(227,181,68,.30), rgba(246,226,154,.55), rgba(227,181,68,.30)) border-box;
background-size: 100% 100%, 200% 100%;
background-position: 0 0, 0% 50%;
color: var(--js-text);
outline: none;
transition: box-shadow .2s ease, transform .2s ease;
}
.js-searchmodal input:focus{
box-shadow: 0 0 0 2px rgba(227,181,68,.18), 0 18px 40px rgba(0,0,0,.35);
animation: js-gold-border 10s linear infinite;
}
html[data-theme="light"] .js-searchmodal input {
background:
linear-gradient(rgba(0,0,0,.03), rgba(0,0,0,.03)) padding-box,
linear-gradient(110deg, rgba(227,181,68,.32), rgba(246,226,154,.62), rgba(227,181,68,.32)) border-box;
}
@media (prefers-reduced-motion: reduce){
.js-searchmodal input:focus{ animation: none; }
}
@keyframes js-gold-border{
0%{ background-position: 0 0, 0% 50%; }
100%{ background-position: 0 0, 200% 50%; }
}
.js-searchmodal-body { padding: 14px 16px 18px; }
.js-quicklinks { display:flex; flex-wrap:wrap; gap: 8px; }
.js-quicklinks a {
padding: 8px 10px;
border-radius: 999px;
border: 1px solid rgba(227,181,68,.22);
background: rgba(0,0,0,.10);
color: var(--js-text);
text-decoration:none;
font-size: 13px;
}
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}
/* ===== LED outline runner (SVG dashoffset) ===== */
.js-led::before, .js-led::after{ content:none !important; }
.js-led{
position: relative;
isolation: isolate;
background: rgba(0,0,0,.18);
color: var(--js-text);
border-radius: 16px;
}
.js-led .js-led-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
z-index: 0;
filter: drop-shadow(0 0 6px rgba(255,216,107,.18));
}
.js-led .js-led .js-led-glint{
stroke: rgba(255,216,107,1);
stroke-width: 2.6;
fill: none;
stroke-linecap: round;
stroke-dasharray: 22 242;
stroke-dashoffset: 0;
filter: drop-shadow(0 0 10px rgba(255,216,107,.55));
opacity: .95;
}
.js-led.is-animated .js-led-glint{
animation: js-led-dash var(--js-led-speed) linear infinite;
}
@keyframes js-led-dash{
to { stroke-dashoffset: -264; }
}
/* ===== HERO ROTATOR (2 images, CSS-only) ===== */
.js-hero{
position: relative;
overflow:hidden;
border-radius: 22px;
}
.js-hero-bg{
position:absolute;
inset:0;
background-size: cover;
background-position: center right;
background-repeat: no-repeat;
opacity:0;
transform: translateZ(0);
will-change: opacity;
}
.js-hero-bg-a{
animation: js-hero-fade-a 18s linear infinite;
}
.js-hero-bg-b{
animation: js-hero-fade-b 18s linear infinite;
}
@keyframes js-hero-fade-a{
0%{opacity:1}
44%{opacity:1}
50%{opacity:0}
94%{opacity:0}
100%{opacity:1}
}
@keyframes js-hero-fade-b{
0%{opacity:0}
44%{opacity:0}
50%{opacity:1}
94%{opacity:1}
100%{opacity:0}
}
/* Built-in fallback art (Gunungan ukiran + Wayang edge) if no URL provided */
:root{
--js-hero-fallback-a: none;
--js-hero-fallback-b: none;
}
.js-hero-bg-a{ background-image: var(--js-hero-bg-a, var(--js-hero-fallback-a)); }
.js-hero-bg-b{ background-image: var(--js-hero-bg-b, var(--js-hero-fallback-b)); }
/* Ensure hero content above backgrounds */
.js-hero-inner, .js-hero-grid{ position: relative; z-index: 1; }
/* Disable legacy pseudo LED frame */
.js-led::before, .js-led::after{ content:none !important; }
/* ===== LED RUNNER (SVG stroke follows outline) ===== */
.js-led{
position: relative;
overflow: hidden;
--js-led-speed: 2.15s;
}
.js-led .js-led-svg{
position:absolute;
inset:0;
width:100%;
height:100%;
pointer-events:none;
}
.js-led .js-led-frame{
fill:none;
stroke: linear-gradient(135deg, rgba(122,86,18,1), rgba(255,216,107,1), rgba(162,112,26,1));
}
.js-led .js-led-frame,
.js-led .js-led-glint{
fill:none;
vector-effect: non-scaling-stroke;
stroke-linejoin: round;
}
.js-led .js-led-frame{
stroke: rgba(227,181,68,.65);
stroke-width: 1.15;
opacity: .95;
}
.js-led .js-led-glint{
stroke: url(#jskGold);
stroke-width: 1.8;
stroke-linecap: round;
filter: drop-shadow(0 0 3px rgba(255,216,107,.35));
stroke-dasharray: 12 88;
stroke-dashoffset: 0;
animation: js-led-run var(--js-led-speed, 1.9s) linear infinite;
}
@keyframes js-led-run{ to{ stroke-dashoffset: -520; } }
@media (prefers-reduced-motion: reduce){
.js-led .js-led-glint{ animation:none; opacity:.6; }
}
.js-chip.js-led{ --js-led-speed: 2.6s; }
/* ===== Dropdown navigation (Tools/Kawruh) ===== */
.js-nav-item{ position:relative; display:flex; align-items:center; }
.js-nav-link{ display:inline-flex; align-items:center; gap:6px; }
.js-has-dropdown > .js-nav-link::after{
content:"▾";
font-size:11px;
opacity:.75;
transform: translateY(-1px);
}
.js-dropdown{
position:absolute;
top: calc(100% + 10px);
left: -10px;
min-width: 240px;
padding: 10px;
border-radius: 16px;
border: 1px solid var(--js-border);
background: var(--js-surface);
box-shadow: var(--js-shadow);
display:none;
z-index: 99999 !important;
backdrop-filter: blur(14px);
}
/* Bridge the hover gap so the dropdown doesn't disappear when moving the mouse */
.js-dropdown::before{
content: "";
position: absolute;
left: 0;
right: 0;
top: -14px;
height: 14px;
}
.js-has-dropdown:hover .js-dropdown,
.js-has-dropdown:focus-within .js-dropdown,
.js-has-dropdown.is-open .js-dropdown{ display:block; }
.js-dropdown a{
display:flex;
padding: 9px 10px;
border-radius: 12px;
text-decoration:none;
color: var(--js-muted);
}
.js-dropdown a:hover{ color: var(--js-text); background: rgba(227,181,68,.08); }
.js-dd-sep{ height:1px; background: rgba(227,181,68,.18); margin: 8px 6px; }
@media (max-width: 900px){
.js-dropdown{ display:none !important; }
}
/* ===== Drawer sublinks ===== */
.js-drawer-sub{
display:grid;
gap: 8px;
padding-left: 8px;
margin: 8px 0 12px;
}
.js-drawer-sub a{
background: rgba(0,0,0,.12);
border-color: rgba(227,181,68,.16);
font-size: 13px;
}
html[data-theme="light"] .js-drawer-sub a{
background: rgba(0,0,0,.02);
}
/* === JavaSense UI Kit Patch rev 0.3.3 (nav, dropdown, footer, mobile polish) === */
/* Full-bleed inside narrow WP content containers */
.js-page{
width: 100vw;
margin-left: calc(50% - 50vw);
margin-right: calc(50% - 50vw);
overflow-x: clip;
}
/* Header: quieter luxury (no fingerprint pattern), higher stacking so dropdown never goes behind */
.js-nav{
z-index: 2147483000 !important;
background: linear-gradient(180deg, rgba(0,0,0,0.72), rgba(0,0,0,0.55));
border-bottom: 1px solid rgba(212,175,55,0.18);
box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.js-nav::before{
background:
radial-gradient(900px 120px at 0% 50%, rgba(212,175,55,0.10), transparent 60%),
radial-gradient(700px 120px at 100% 50%, rgba(212,175,55,0.08), transparent 60%),
linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.00) 18%, rgba(255,255,255,0.00) 82%, rgba(255,255,255,0.03));
opacity: 0.9;
}
.js-nav-inner{
padding: 14px 0;
min-height: 72px;
z-index: 1;
}
/* Desktop header alignment: center nav, keep EN/ID away from the screen edge */
@media (min-width: 901px){
.js-nav-inner{
display: grid;
grid-template-columns: auto 1fr auto;
align-items: center;
gap: 18px;
}
.js-nav-links{
margin-left: 0;
justify-content: center;
}
.js-actions{
margin-left: 0;
justify-self: end;
}
/* Slightly reduce search width so the right cluster doesn't feel “too pushed” */
.js-nav-search{
min-width: 180px;
max-width: 240px;
}
}
.js-actions{
display: flex;
align-items: center;
gap: 10px;
}
/* Nav links: bigger + more premium hover */
.js-nav-links a{
font-size: 15px;
padding: 10px 12px;
border-radius: 999px;
letter-spacing: 0.2px;
border-color: rgba(212,175,55,0.16);
background: rgba(0,0,0,0.12);
}
.js-nav-links a:hover{
border-color: rgba(212,175,55,0.32);
background: rgba(212,175,55,0.08);
box-shadow: 0 10px 26px rgba(0,0,0,0.20);
}
/* Ensure dropdown always on top */
.js-dropdown{
z-index: 2147483600 !important;
box-shadow: 0 22px 60px rgba(0,0,0,0.55);
}
/* Icon buttons: extra-lux (hamburger/search) */
.js-icon-btn--lux{
position: relative;
overflow: hidden;
border-color: rgba(212,175,55,0.56);
background:
radial-gradient(120% 120% at 30% 10%, rgba(255,236,190,0.26), rgba(0,0,0,0.30)),
linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.10));
box-shadow:
0 0 0 1px rgba(0,0,0,0.62) inset,
0 12px 30px rgba(0,0,0,0.24),
0 0 44px rgba(212,175,55,0.22);
transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.js-icon-btn--lux::before{
content:"";
position:absolute;
inset:-70%;
background: radial-gradient(circle at 32% 22%, rgba(255,246,210,0.18), transparent 56%);
transform: rotate(12deg);
pointer-events:none;
}
.js-icon-btn--lux::after{
content:"";
position:absolute;
inset:1px;
border-radius: inherit;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.10),
inset 0 -1px 0 rgba(0,0,0,0.40);
pointer-events:none;
}
.js-icon-btn--lux:hover{
transform: translateY(-1px);
border-color: rgba(212,175,55,0.62);
box-shadow:
0 0 0 1px rgba(0,0,0,0.62) inset,
0 14px 34px rgba(0,0,0,0.26),
0 0 54px rgba(212,175,55,0.26);
}
/* Optional variant: flat footer (if you ever need it). Default footer uses the luxury panel above. */
.js-footer.js-footer--flat{
padding: 48px 0 56px;
background: linear-gradient(180deg, rgba(0,0,0,0.58), rgba(0,0,0,0.78));
border-top: 1px solid rgba(212,175,55,0.16);
}
.js-footer.js-footer--flat::before{
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background:
radial-gradient(900px 160px at 0% 30%, rgba(212,175,55,0.08), transparent 60%),
radial-gradient(700px 160px at 100% 30%, rgba(212,175,55,0.06), transparent 60%);
opacity: 0.9;
}
.js-footer.js-footer--flat .js-footer-panel{
background: transparent;
border: none;
padding: 0;
border-radius: 0;
box-shadow: none;
}
.js-footer.js-footer--flat .js-footer-panel::before{ display:none; }
/* Drawer: tidier list rhythm */
.js-acc > summary{
font-size: 13px;
letter-spacing: 0.35px;
}
.js-acc-body a{
padding: 10px 12px;
font-size: 14px;
}
.js-drawer-meta{
padding-top: 14px;
margin-top: 14px;
border-top: 1px solid rgba(212,175,55,0.14);
}
/* Mobile header layout: brand | search | actions (burger + language) */
@media (max-width: 900px){
.js-desktop-only{ display: none !important; }
/* Mobile: simplify header (no search) so EN/ID never gets cut off */
.js-nav-inner{ display:flex; align-items:center; justify-content: space-between; gap: 12px; padding: 12px 0; }
.js-nav-links{ display:none !important; }
/* Hide search completely on mobile */
.js-nav-search,
.js-nav-search-mobile,
.js-nav-searchwrap,
.js-actions [data-js-search]{
display:none !important;
}
.js-actions{
gap: 8px;
justify-self: end;
}
}
/* Smaller phones: keep the language pill compact */
@media (max-width: 520px){
.js-actions{ gap: 10px; }
.js-langseg{ padding: 3px; }
.js-langseg-btn{ padding: 8px 9px; font-size: 12px; }
.js-wordmark{ width: clamp(118px, 30vw, 150px); }
}
@media (max-width: 360px){
.js-wordmark{ display:none !important; }
}
/* Drawer: simple Menu section (non-accordion) */
.js-drawer-section{
margin-top: 12px;
}
.js-drawer-section-title{
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.35px;
color: rgba(255,255,255,0.65);
margin: 0 0 10px;
}
.js-drawer-links{
display: flex;
flex-direction: column;
gap: 10px;
}
.js-drawer-links a{
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
border-radius: 16px;
border: 1px solid rgba(212,175,55,0.12);
background: rgba(0,0,0,0.18);
color: rgba(255,255,255,0.92);
text-decoration: none;
}
.js-drawer-links a:hover{
border-color: rgba(212,175,55,0.28);
background: rgba(212,175,55,0.07);
}
/* Wordmark size (slightly larger, luxury glow) */
.js-wordmark{ height: 54px; }
@media (max-width: 900px){
.js-wordmark{ height: 36px; }
}
/* Drawer brand (use the same logo look as header) */
.js-drawer-brand{display:flex; align-items:center; gap:10px; text-decoration:none; color: var(--js-text); font-weight:900;}
.js-drawer-logo{width:42px; height:42px; border-radius:12px; object-fit:contain; background: rgba(10,12,14,.55); border:1px solid rgba(227,181,68,.36);}
.js-drawer-word{font-weight:900; letter-spacing:.2px; color: rgba(255,226,154,.95); text-shadow: 0 1px 0 rgba(0,0,0,.55);}
@supports (-webkit-background-clip: text) {
.js-drawer-word{
background: linear-gradient(120deg, rgba(206,154,43,.96), rgba(255,226,154,.98), rgba(227,181,68,.96));
-webkit-background-clip:text;
background-clip:text;
-webkit-text-fill-color: transparent;
color: transparent;
}
}
/* ===== v0.5.0 Luxury CTA + Author Box ===== */
.js-tool-cta{display:inline-flex; margin-top:auto; padding-top:14px;}
.js-tool-cta-link{
display:inline-flex;
align-items:center;
font-weight: 800;
letter-spacing: .14px;
text-transform: none;
font-size: 14px;
background: linear-gradient(90deg, rgba(255,204,92,.95), rgba(255,242,210,.98), rgba(255,204,92,.95));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
text-shadow: 0 0 18px rgba(255,216,107,.18);
}
.js-tool-cta-link::after{ content:none; }
.js-tool:hover .js-tool-cta-link{
text-shadow: 0 0 22px rgba(255,216,107,.28);
filter: brightness(1.05);
}
@media (hover: none){
.js-tool-cta-link{ text-shadow: 0 0 22px rgba(255,216,107,.22); }
}
@media (hover:none){
.js-tool-cta-link{
animation: jsk-glow 2.8s ease-in-out infinite;
}
}
@keyframes jsk-glow{
0%,100%{ text-shadow: 0 0 14px rgba(255,216,107,.18); opacity:.95; }
50%{ text-shadow: 0 0 26px rgba(255,216,107,.34); opacity:1; }
}
@keyframes jsk-glint{
0%{filter:brightness(1);}
35%{filter:brightness(1.08);}
60%{filter:brightness(1.0);}
100%{filter:brightness(1);}
}
.js-chip--ghost{
background: rgba(10,12,14,.55);
border: 1px solid rgba(227,181,68,.28);
color: rgba(255,226,154,.88);
}
.js-authorbox-trust{margin-top:10px; font-size:12px; color: var(--js-muted); display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
.js-authorbox-cta{margin-top:12px; display:flex; gap:10px; flex-wrap:wrap;}
.js-authorbox-links{margin-top:10px;}
.js-mini-link{font-size:12px; color: rgba(255,226,154,.86); text-decoration:none;}
.js-mini-link:hover{text-decoration:underline;}
/* Author card (Gold Pattern Card) */
.jsk-authorcard-wrap{
margin-top:18px;
display:flex;
justify-content:center;
}
.jsk-card{
--main-color: #FFF8E7;
--submain-color: #d4af37;
--bg-color: #0d0d0d;
--gold-gradient: linear-gradient(45deg, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
font-family: 'Poppins', system-ui, sans-serif;
position: relative;
width: clamp(300px, 30vw, 360px);
min-height: 0;
height: auto;
padding-bottom: 18px;
display: flex;
flex-direction: column;
align-items: center;
border-radius: 20px;
background: var(--bg-color);
border: 1px solid rgba(212, 175, 55, 0.2);
box-shadow: 0 15px 35px rgba(0,0,0,0.8);
overflow: hidden;
}
.jsk-card__img{
height: 168px;
width: 100%;
opacity: 0.92;
}
.jsk-card__img svg{
height: 100%;
width: 100%;
object-fit: cover;
display:block;
}
.jsk-card__avatar{
position: absolute;
width: 104px;
height: 104px;
background: var(--bg-color);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
top: 112px;
border: 4px solid var(--bg-color);
box-shadow: 0 5px 15px rgba(0,0,0,0.5);
z-index: 2;
overflow:hidden;
}
.jsk-card__avatar svg{
width: 95px;
height: 95px;
}
.jsk-card__avatarImg{
width: 100% !important;
height: 100% !important;
object-fit: cover;
border-radius: 50%;
}
.jsk-card__title{
margin-top: 56px;
font-weight: 600;
font-size: 19px;
color: #f1d592;
letter-spacing: 0.5px;
text-align:center;
}
.jsk-card__subtitle{
margin-top: 6px;
font-weight: 500;
font-size: 12px;
color: var(--submain-color);
text-transform: uppercase;
letter-spacing: 1px;
text-align:center;
}
.jsk-card__meta{
margin-top: 8px;
font-weight: 400;
font-size: 13px;
color: rgba(255,248,231,.82);
text-align:center;
padding: 0 18px;
}
.jsk-card__bio{
margin-top: 10px;
font-weight: 400;
font-size: 13px;
line-height: 1.55;
color: rgba(255,248,231,.78);
text-align:center;
padding: 0 18px;
}
.jsk-card__chips{
margin-top: 12px;
display:flex;
flex-wrap:wrap;
gap: 8px;
justify-content:center;
padding: 0 18px;
}
.jsk-chip{
font-size: 11px;
font-weight: 600;
letter-spacing: .2px;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(212,175,55,.26);
color: rgba(255,226,154,.92);
background: linear-gradient(180deg, rgba(212,175,55,.10), rgba(0,0,0,0));
box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.jsk-card__wrapper{
margin-top: 18px;
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
padding: 0 16px;
}
.jsk-card__btn{
padding: 8px 18px;
border: 1.5px solid #d4af37;
border-radius: 8px;
font-weight: 700;
font-size: 11px;
color: #d4af37;
background: transparent;
text-transform: uppercase;
transition: all 0.3s ease;
cursor: pointer;
text-decoration:none;
display:inline-flex;
align-items:center;
justify-content:center;
}
.jsk-card__btn-solid{
background: var(--gold-gradient);
color: #1a1a1a;
border: none;
}
.jsk-card__btn:hover{
background: #d4af37;
color: #000;
box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
}
.jsk-card__btn-solid:hover{
filter: brightness(1.2);
transform: translateY(-2px);
}
@media (max-width: 420px){
.jsk-card{ width: 100%; }
}
/* Disclaimer note */
.js-disclaimer-note{
margin-top:16px;
display:flex;
gap:14px;
align-items:flex-start;
position: relative;
overflow: hidden;
background-color: var(--js-surface);
background-image:
radial-gradient(130% 160% at 18% 10%, rgba(255,226,154,.10), rgba(0,0,0,0) 55%);
}
.js-disclaimer-note::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity:.14;
background:
repeating-linear-gradient(135deg, rgba(255,226,154,.10) 0 1px, rgba(0,0,0,0) 1px 14px),
radial-gradient(120% 140% at 70% 10%, rgba(227,181,68,.16), rgba(0,0,0,0) 55%);
mix-blend-mode: screen;
}
.js-disclaimer-note > *{ position: relative; z-index: 1; }
@media (min-width: 981px){
/* Desktop: beri jarak agar tidak nempel dengan App/Author cards */
.js-disclaimer-note{ margin-top: 28px !important; }
}
.js-disclaimer-ico{
width:42px; height:42px; aspect-ratio: 1 / 1; border-radius:999px;
flex: 0 0 42px;
display:flex; align-items:center; justify-content:center;
font-weight:900;
line-height: 1;
color: rgba(10,12,14,.96);
background: radial-gradient(120% 140% at 30% 20%, rgba(255,226,154,.95), rgba(227,181,68,.92));
box-shadow: 0 0 0 3px rgba(255,226,154,.08), 0 18px 42px rgba(0,0,0,.55);
}
.js-disclaimer-text{color: rgba(255,255,255,.92); line-height:1.6; font-size:16px;}
.js-disclaimer-title{color: rgba(255,226,154,.98); font-weight:900; letter-spacing:.2px;}
.js-disclaimer-body em{font-style: italic; color: rgba(255,255,255,.96); text-shadow: 0 0 14px rgba(255,216,107,.18);}
@media (max-width: 640px){
.js-authorbox-row{flex-direction:column; align-items:flex-start;}
.js-authorbox-avatar{width:88px; height:88px;}
}
/* ===== Mobile motion policy =====
Keep the same "living" luxury animations as desktop.
Users who prefer reduced motion are already handled above.
*/
@media (hover: none), (max-width: 900px){
/* Slightly calmer on touch devices (but still animated) */
.js-led{ --js-led-speed: 2.8s; }
.js-chip.js-led{ --js-led-speed: 3.2s; }
.js-wordmark-trace{ animation-duration: 8.5s !important; }
.js-wordmark-glow{ animation-duration: 7.5s !important; }
}
/* === v0.6.7 Hotfix: ensure latest header/footer + gold + spacing win over legacy patches === */
:root{
--js-gold:#E9BE55;
--js-gold2:#FFE5A6;
--js-pattern-opacity:.18;
--js-footer-pattern-opacity:.12;
}
/* Header pattern (match footer vibe) */
.js-page .js-nav{
background: rgba(5, 6, 7, .68) !important;
border-bottom: 1px solid rgba(227,181,68,.18) !important;
box-shadow: 0 10px 30px rgba(0,0,0,.28) !important;
}
.js-page .js-nav::before{
background-image:
var(--js-pattern-footer),
radial-gradient(700px 220px at 18% 0%, rgba(255,229,166,.11), transparent 62%),
radial-gradient(600px 220px at 86% 10%, rgba(233,190,85,.09), transparent 60%) !important;
background-repeat: repeat, no-repeat, no-repeat !important;
background-size: calc(var(--js-footer-pattern-size) * .45), 700px 220px, 600px 220px !important;
background-position: 0 0, 18% 0%, 86% 10% !important;
opacity: .22 !important;
filter: contrast(1.05) sepia(1) saturate(6) hue-rotate(14deg) !important;
mix-blend-mode: soft-light !important;
}
/* Desktop alignment: reduce the big gap between wordmark and menu, keep EN/ID not too pushed */
@media (min-width: 901px){
.js-page .js-nav-inner{
display:flex !important;
align-items:center !important;
justify-content:flex-start !important;
gap: 12px !important;
padding: 10px 0 !important;
min-height: 68px !important;
}
.js-page .js-nav-links{
display:flex !important;
align-items:center !important;
gap: 4px !important;
margin-left: 6px !important;
flex: 1 1 auto !important;
justify-content:flex-start !important;
}
.js-page .js-actions{
margin-left: auto !important;
gap: 10px !important;
}
.js-page .js-nav-search{
min-width: 170px !important;
max-width: 220px !important;
}
}
@media (max-width: 1180px) and (min-width: 901px){
.js-page .js-nav-search{ min-width: 150px !important; max-width: 190px !important; }
.js-page .js-nav-links a{ padding: 9px 10px !important; }
}
/* Footer: slightly more presence (still luxury, not noisy) */
.js-page .js-footer::before{ opacity: var(--js-footer-pattern-opacity) !important; }
.js-page .js-footer::after{ opacity: .85 !important; }
/* Premium teaser */
.js-premium{
display:grid;
grid-template-columns: 96px 1fr;
gap: 16px;
align-items: center;
padding: 18px;
border-radius: var(--js-radius-lg);
background: rgba(10,12,14,.62);
border:1px solid rgba(227,181,68,.22);
box-shadow: 0 18px 44px rgba(0,0,0,.50);
position: relative;
overflow: hidden;
}
.js-premium::before{
content:"";
position:absolute; inset:-2px;
background: radial-gradient(600px 180px at 18% 10%, rgba(227,181,68,.22), rgba(0,0,0,0) 60%);
pointer-events:none;
}
.js-premium__lock{ position:relative; width:96px; height:96px; display:grid; place-items:center; }
.js-premium__glow{
position:absolute; inset:-10px;
background: radial-gradient(circle at 50% 50%, rgba(255,226,154,.36), rgba(227,181,68,.12) 45%, rgba(0,0,0,0) 70%);
filter: blur(6px);
animation: jsPulse 2.6s ease-in-out infinite;
}
@keyframes jsPulse{ 0%,100%{ transform: scale(.92); opacity:.75;} 50%{ transform: scale(1.04); opacity:1; } }
.js-premium__svg{ position:relative; color: rgba(255,226,154,.92); filter: drop-shadow(0 10px 18px rgba(227,181,68,.18)); }
.js-premium__kicker{ color: rgba(255,226,154,.92); font-weight: 900; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.js-premium__title{ margin: 6px 0 6px; font-size: 20px; }
.js-premium__desc{ margin: 0 0 10px; color: rgba(233,230,221,.75); }
.js-premium__list{ margin: 0 0 12px; padding-left: 18px; color: rgba(233,230,221,.78); }
.js-premium__list li{ margin: 6px 0; }
.js-premium__row{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.js-premium__badge{ display:inline-flex; gap:8px; align-items:center; padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(227,181,68,.22); background: rgba(0,0,0,.18); color: rgba(233,230,221,.78); }
.js-premium__badgeIco{ filter: drop-shadow(0 8px 14px rgba(227,181,68,.28)); }
.js-premium__btnDisabled{ opacity:.65; cursor:not-allowed; }
@media (max-width: 720px){
.js-premium{ grid-template-columns: 1fr; }
.js-premium__lock{ width: 72px; height: 72px; }
}
/* === v0.7.4 Ringkasan Focus Mode (landing hero) === */
.js-card--todaySolo{
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.js-todaybar--focus{
padding: 28px 24px 22px;
gap: 12px;
background: rgba(8,10,12,.72);
background-image:
radial-gradient(120% 160% at 18% 12%, rgba(255,226,154,.14), rgba(0,0,0,0) 55%),
radial-gradient(90% 140% at 84% 22%, rgba(227,181,68,.12), rgba(0,0,0,0) 62%),
radial-gradient(120% 180% at 50% 0%, rgba(255,226,154,.10), rgba(0,0,0,0) 58%);
border-color: rgba(255,226,154,.38);
box-shadow: 0 26px 84px rgba(0,0,0,.62);
}
/* Make gold match “lampu gold” + keep luxury sheen */
.js-todaybar--focus .js-todaybar__title{
font-size: 19px;
letter-spacing: .22px;
margin-bottom: 8px;
background: none !important;
color: var(--js-gold2) !important;
-webkit-text-fill-color: var(--js-gold2) !important;
text-shadow: 0 0 26px rgba(227,181,68,.18), 0 1px 0 rgba(0,0,0,.55);
}
.js-todaybar--focus .js-todaybar__title::after{
opacity: .52;
}
/* Readable, bigger lines */
.js-todaybar--focus .js-todaybar__line{
font-size: 16px;
color: rgba(238,234,225,.92);
}
.js-todaybar--focus .js-todaybar__wuku{
font-size: 18px;
margin-top: 4px;
letter-spacing: .1px;
}
.js-todaybar--focus .js-todaybar__quote{
font-size: 13px;
color: rgba(238,234,225,.72);
margin-top: 10px;
}
/* Bigger premium lock + clearer glow */
.js-todaybar--focus .js-prem-lock--big{
width: 56px;
height: 56px;
border-radius: 18px;
}
.js-todaybar--focus .js-prem-lock__glow{
opacity: .82;
filter: blur(12px);
}
.js-todaybar--focus .js-prem-lock__svg{
filter: drop-shadow(0 0 20px rgba(227,181,68,.58));
}
/* Hide leftover tab visuals if a cached HTML still has them */
.js-hero .js-tabs{ display:none !important; }
/* =======================================================================
HD GOLD LETTER BUTTON (dexter-st) — JavaSense scoped
- Uses .btn-wrapper + .btn.js-btn so it won't affect theme buttons
======================================================================= */
.btn-wrapper{
position: relative;
display: inline-block;
vertical-align: middle;
}
.btn.js-btn{
--border-radius: 24px;
--padding: 4px;
--transition: 0.4s;
--button-color: #101010;
--highlight-color-hue: 45deg; /* Gold */
position: relative;
isolation: isolate;
user-select: none;
-webkit-tap-highlight-color: transparent;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0.7em 2em;
font-family: "Poppins", "Inter", "Segoe UI", sans-serif;
font-size: 1em;
font-weight: 500;
line-height: 1;
background-color: var(--button-color);
text-decoration: none;
box-shadow:
inset 0px 1px 1px hsla(var(--highlight-color-hue), 100%, 50%, 0.2),
inset 0px 2px 2px hsla(var(--highlight-color-hue), 100%, 50%, 0.15),
inset 0px 4px 4px hsla(var(--highlight-color-hue), 100%, 50%, 0.1),
inset 0px 8px 8px hsla(var(--highlight-color-hue), 100%, 50%, 0.05),
inset 0px 16px 16px hsla(var(--highlight-color-hue), 100%, 50%, 0.05),
0px -1px 1px rgba(0, 0, 0, 0.02),
0px -2px 2px rgba(0, 0, 0, 0.03),
0px -4px 4px rgba(0, 0, 0, 0.05),
0px -8px 8px rgba(0, 0, 0, 0.06),
0px -16px 16px rgba(0, 0, 0, 0.08);
border: 1px solid hsla(var(--highlight-color-hue), 100%, 50%, 0.15);
border-radius: var(--border-radius);
cursor: pointer;
transition:
box-shadow var(--transition),
border var(--transition),
background-color var(--transition),
transform var(--transition);
}
.btn.js-btn::before{
content: "";
position: absolute;
top: calc(0px - var(--padding));
left: calc(0px - var(--padding));
width: calc(100% + var(--padding) * 2);
height: calc(100% + var(--padding) * 2);
border-radius: calc(var(--border-radius) + var(--padding));
pointer-events: none;
background-image: linear-gradient(0deg, #0004, #000a);
z-index: -1;
transition: box-shadow var(--transition), filter var(--transition);
box-shadow:
0 -8px 8px -6px #0000 inset,
0 -16px 16px -8px #00000000 inset,
1px 1px 1px hsla(var(--highlight-color-hue), 100%, 50%, 0.15),
2px 2px 2px hsla(var(--highlight-color-hue), 100%, 50%, 0.1),
-1px -1px 1px #0002,
-2px -2px 2px #0001;
}
.btn.js-btn::after{
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background-image: linear-gradient(
0deg,
hsl(var(--highlight-color-hue), 100%, 75%),
hsl(var(--highlight-color-hue), 100%, 70%),
hsla(var(--highlight-color-hue), 100%, 70%, 50%),
8%,
transparent
);
opacity: 0;
transition: opacity var(--transition), filter var(--transition);
}
.btn.js-btn .txt-wrapper{
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 0;
}
.btn.js-btn .txt-1,
.btn.js-btn .txt-2{
position: static;
inset: auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: .35em;
row-gap: .18em;
}
.btn.js-btn .txt-2{ display:none; }
.btn.js-btn .btn-word{
display: inline-flex;
gap: .02em;
white-space: nowrap;
}
.btn.js-btn .btn-letter{
position: relative;
display: inline-block;
color: hsla(var(--highlight-color-hue), 100%, 50%, 0.5);
animation: letter-anim 2s ease-in-out infinite;
animation-delay: var(--d, 0s);
transition: color var(--transition), text-shadow var(--transition), opacity var(--transition), filter var(--transition), transform var(--transition);
}
@keyframes letter-anim{
50%{
text-shadow: 0 0 5px hsla(var(--highlight-color-hue), 100%, 60%, 0.7);
color: hsl(var(--highlight-color-hue), 100%, 70%);
}
}
/* Hover & focus */
.btn.js-btn:hover{
border-color: hsla(var(--highlight-color-hue), 100%, 80%, 40%);
transform: translateY(-1px);
}
.btn.js-btn:hover::after{ opacity: 1; }
.btn.js-btn:focus-visible{
outline: none;
}
.btn.js-btn:focus-visible .btn-letter{
animation: focused-letter-anim 1s ease-in-out forwards, letter-anim 1.2s ease-in-out infinite;
animation-delay: 0s, 0.6s;
}
@keyframes focused-letter-anim{
50%{
transform: scale(1.5);
filter: blur(5px) brightness(150%) drop-shadow(0 0 10px hsl(var(--highlight-color-hue), 100%, 70%));
}
}
/* Active */
.btn.js-btn:active{
background-color: hsla(var(--highlight-color-hue), 50%, 15%, 1);
transform: translateY(0) scale(0.98);
}
.btn.js-btn:active::after{ opacity: 1; filter: brightness(140%); }
/* Disabled */
.btn.js-btn.is-disabled{
cursor: default;
opacity: .55;
pointer-events: none;
filter: saturate(.8);
}
/* Size helpers */
.btn.js-btn.js-dexbtn--sm{ font-size: .95em; padding: .62em 1.7em; }
.btn.js-btn.js-dexbtn--md{ font-size: 1em; padding: .70em 2.0em; }
.btn.js-btn.js-dexbtn--xl{ font-size: 1.05em; padding: .84em 2.4em; }
/* Today card centering (wrapper) */
.btn-wrapper.js-todaybar__ctaWrap,
.btn-wrapper.js-todaybar__btnWrap{
margin-top: 10px;
width: 100%;
display: flex;
justify-content: center;
}
.js-todaybar--focus .btn-wrapper.js-todaybar__ctaWrap{
margin-top: 14px;
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce){
.btn.js-btn .btn-letter{ animation: none !important; }
.btn.js-btn{ transition: none !important; }
}
/* ===== Tools: plain FREE chip + button CTA (no LED runner) ===== */
.js-chip--plain{
text-transform: uppercase;
letter-spacing: .9px;
font-weight: 800;
border-color: rgba(227,181,68,.22);
background: rgba(0,0,0,.22);
}
.js-tool{ cursor: pointer; }
.js-tool:focus-within{
outline: 2px solid rgba(255,226,154,.26);
outline-offset: 3px;
}
.js-tool-cta{
display:flex;
align-items:flex-start;
margin-top:auto;
padding-top:14px;
}
.js-tool-cta .btn-wrapper{ display:inline-flex; }
/* ===== Today (Ringkasan): Wave Gold Card (e-card) ===== */
.js-todaybar--ecard{
display:block;
background:none !important;
border:none !important;
box-shadow:none !important;
padding: 0 !important;
}
.js-todaybar--ecard .e-card{
margin: 0 auto;
background: #0d0d0d;
box-shadow: 0px 8px 28px -9px rgba(0,0,0,0.7);
position: relative;
width: min(360px, 100%);
border-radius: 20px;
overflow: hidden;
border: 1px solid rgba(212, 175, 55, 0.2);
font-family: 'Poppins', system-ui, sans-serif;
}
.js-todaybar--ecard .wave{
position: absolute;
width: 540px;
height: 700px;
opacity: 0.6;
left: 0;
top: 0;
margin-left: -50%;
margin-top: -70%;
background: linear-gradient(744deg, #BF953F, #FCF6BA 60%, #AA771C);
}
.js-todaybar--ecard .icon{
width: 3.5em;
margin-top: -1.2em;
padding-bottom: 0.8em;
filter: drop-shadow(0 0 8px rgba(212, 175, 55, 0.5));
}
.js-todaybar--ecard .infotop{
text-align: center;
font-size: 18px;
position: relative;
z-index: 10;
padding: 92px 18px 18px;
color: rgb(255, 255, 255);
font-weight: 600;
display: flex;
flex-direction: column;
align-items: center;
}
.js-todaybar--ecard .title-text{
color: #f1d592;
text-transform: uppercase;
font-size: 14px;
letter-spacing: 1px;
display: block;
margin-top: 6px;
margin-bottom: 10px;
width: 100%;
text-align: center;
}
.js-todaybar--ecard .name{
margin-top: 8px;
font-size: 24px;
font-weight: 800;
text-transform: none;
color: #fff;
}
.js-todaybar--ecard .weton-badge{
margin-top: 14px;
font-size: 13px;
font-weight: 500;
background: rgba(0, 0, 0, 0.4);
padding: 6px 15px;
border-radius: 50px;
display: inline-flex;
gap: 8px;
align-items: center;
justify-content: center;
border: 1px solid rgba(212, 175, 55, 0.3);
backdrop-filter: blur(5px);
}
.js-todaybar--ecard .js-ecard-note{
margin-top: 12px;
font-size: 12px;
line-height: 1.55;
color: rgba(255,226,154,.85);
text-shadow: 0 0 18px rgba(227,181,68,.12);
}
.js-todaybar--ecard .js-ecard-date{
margin-top: 8px;
font-size: 12px;
color: rgba(233,230,221,.70);
}
.js-todaybar--ecard .js-ecard-cta{ margin-top: 14px; display:flex; justify-content:center; }
.js-todaybar--ecard .js-ecard-badge{
margin-top: 10px;
font-size: 12px;
color: rgba(255,226,154,.85);
}
.js-todaybar--ecard.playing .wave{
border-radius: 40%;
animation: jsk-wave 3000ms infinite linear;
}
.js-todaybar--ecard.playing .wave:nth-child(2){
top: 210px;
animation-duration: 4500ms;
opacity: 0.4;
}
.js-todaybar--ecard.playing .wave:nth-child(3){
top: 210px;
animation-duration: 6000ms;
opacity: 0.2;
}
@keyframes jsk-wave{
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
/* ===== Luxury tweaks: Today e-card + Tools cards ===== */
/* Tools cards: add subtle footer-like pattern (transparent), keep sweep on hover */
.js-tool{ isolation:isolate; }
.js-tool::after{
content:"";
position:absolute;
inset:0;
background-image: var(--js-pattern-footer);
background-repeat: repeat;
background-size: calc(var(--js-footer-pattern-size) * .36);
opacity: .055;
pointer-events:none;
filter: contrast(1.05) sepia(1) saturate(6) hue-rotate(14deg);
mix-blend-mode: soft-light;
z-index: 0;
}
.js-tool::before{ z-index: 1; }
.js-tool > *{ position: relative; z-index: 2; }
/* Today e-card: add luxe outline frame + subtle pattern */
.js-todaybar--ecard .e-card{ isolation:isolate; }
.js-todaybar--ecard .e-card::after{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
background-image: var(--js-pattern-footer);
background-repeat: repeat;
background-size: calc(var(--js-footer-pattern-size) * .34);
opacity: .07;
pointer-events:none;
filter: contrast(1.05) sepia(1) saturate(6) hue-rotate(14deg);
mix-blend-mode: soft-light;
z-index: 1;
}
.js-todaybar--ecard .e-card::before{
content:"";
position:absolute;
inset:0;
border-radius: inherit;
padding: 1px;
background: linear-gradient(135deg,
rgba(252,246,186,.55),
rgba(191,149,63,.25) 35%,
rgba(170,119,28,.35) 60%,
rgba(252,246,186,.40)
);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
opacity: .9;
pointer-events:none;
z-index: 3;
}
/* Ensure wave stays behind content */
.js-todaybar--ecard .wave{ z-index: 0; }
.js-todaybar--ecard .infotop{ position: relative; z-index: 2; }
/* Layout spacing after moving Wuku below weton line */
.js-todaybar--ecard .weton-badge{ margin-top: 14px; }
.js-todaybar--ecard .name{ margin-top: 16px; }
/* Quote (Makna rinci...) */
.js-todaybar--ecard .js-ecard-quote{
margin-top: 10px;
font-size: 12px;
line-height: 1.55;
color: rgba(233,230,221,.82);
font-style: italic;
text-shadow: 0 0 18px rgba(227,181,68,.10);
}
/* ==============================
vNext tweaks (Desktop spacing + Prolog pattern + App/Author alignment)
============================== */
/* (1) Desktop: pull Tools section slightly upward so hero doesn't leave empty space */
@media (min-width: 901px){
.js-hero{ padding-bottom: 14px; }
.js-section#tools{ padding-top: 16px; }
}
/* (2) Prolog cards: add subtle footer-like pattern (transparent) like App card */
.js-prolog-card{ isolation:isolate; }
.js-prolog-card::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity: .10;
background-image:
var(--js-pattern-footer),
repeating-linear-gradient(135deg, rgba(255,226,154,.12) 0 1px, rgba(0,0,0,0) 1px 18px);
background-size:
calc(var(--js-footer-pattern-size) * .30),
auto;
mix-blend-mode: screen;
z-index: 0;
}
.js-prolog-card > *{ position:relative; z-index: 1; }
/* (3) App + Author: make both columns equal height on desktop */
.js-app-grid{ align-items: stretch; }
.js-app-author{ align-items: stretch; }
/* Ensure author card can stretch (desktop) */
@media (min-width: 981px){
.js-app-author > *{ height: 100%; }
.js-app-author .jsk-authorcard-wrap{ height: 100%; margin-top: 0; }
.js-app-author .jsk-card{ height: 100%; }
/* Push CTA buttons to the bottom so the stretched card looks balanced */
.js-app-author .jsk-card__wrapper{ margin-top: auto; }
}
/* (4) Mobile: prevent the App card and Author card from feeling too tight / overlapping */
@media (max-width: 980px){
.js-app-grid{ gap: 34px; }
.js-app-author{ margin-top: 6px; }
/* Make author card wider on mobile (less "ramping") */
.js-app-author > *{ max-width: 520px; }
.jsk-card{ width: min(520px, 100%); }
}
/* ===== Performance (mobile) ===== */
.js-todaybar--ecard.playing .wave{
animation-play-state: paused;
}
.js-todaybar--ecard.playing.is-inview .wave{
animation-play-state: running;
}
/* Reduce expensive effects on touch devices */
@media (hover: none), (max-width: 900px){
/* Stop per-letter animation (many spans = heavy on mobile) */
.btn-letter{
animation: none !important;
text-shadow: none !important;
filter: none !important;
transform: none !important;
}
/* Simplify button shadows */
.btn.js-btn{
box-shadow:
inset 0 1px 1px rgba(212,175,55,.12),
0 10px 24px rgba(0,0,0,.35) !important;
}
.btn.js-btn::after{ opacity: 0.65; }
.btn.js-btn:hover{ transform: none; }
/* Sticky nav blur is expensive on mobile scrolling */
.js-nav{
backdrop-filter: none !important;
background: rgba(5,6,7,.92) !important;
}
/* Reduce blur/backdrop-filter cost */
.js-todaybar--ecard .weton-badge{
backdrop-filter: none !important;
}
/* Wave animation: keep 1 layer only + slower */
.js-todaybar--ecard.playing .wave{
animation-duration: 12000ms !important;
opacity: .35 !important;
}
.js-todaybar--ecard.playing .wave:nth-child(2),
.js-todaybar--ecard.playing .wave:nth-child(3){
display: none !important;
}
}
/* Respect OS reduced motion */
@media (prefers-reduced-motion: reduce){
.btn-letter{ animation: none !important; }
.js-todaybar--ecard.playing .wave{ animation: none !important; }
}