: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 {
padding-top: 24px;
}
.js-hero-grid {
grid-template-columns: 1fr;
gap: 24px;
}
}
.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: 4px 0 6px; font-size: 16px; }
.js-tool p { margin: 0 0 12px; color: var(--js-muted); font-size: 13px; line-height: 1.45; }
.js-tool{ min-height: 100%; }
.js-tool-head{
display:flex;
align-items:center;
gap: 10px;
margin: 10px 0 12px;
min-height: 64px;
}
.js-tool-icon{
display:block;
width: 64px;
height: 64px;
object-fit: contain;
flex: 0 0 64px;
}
.js-tool h3{ min-height: 48px; display:flex; align-items:flex-start; }
.js-tool p{ flex: 1 1 auto; }
.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: 72ch;
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; }
.js-why-copy{ color:var(--js-muted); margin-top:6px; line-height:1.55; }
.js-why-mobile{ display:block; }
.js-app-why-desktop{ display:none; }
.js-why.js-why--rail{ grid-template-columns: 1fr; gap: 12px; }
.js-why.js-why--rail .js-card{ padding: 0; }
/* Prolog section (Rasa, Logika, Peta Waktu) */
.js-prolog{ position: relative; }
.js-prolog-stage{
position: relative;
isolation: isolate;
padding: clamp(16px, 2.4vw, 28px);
border-radius: clamp(20px, 2.2vw, 28px);
border: 1px solid rgba(227,181,68,.28);
background:
radial-gradient(70% 95% at 89% 14%, rgba(227,181,68,.14), rgba(227,181,68,0) 56%),
radial-gradient(70% 90% at 8% 10%, rgba(255,226,154,.08), rgba(255,226,154,0) 54%),
radial-gradient(58% 72% at 50% 50%, rgba(2,3,4,.88), rgba(2,3,4,.36) 58%, rgba(2,3,4,0) 76%),
linear-gradient(135deg, rgba(16,17,15,.88), rgba(4,6,7,.97) 58%, rgba(9,8,4,.94));
box-shadow: 0 28px 90px rgba(0,0,0,.52), inset 0 0 0 1px rgba(255,226,154,.055);
overflow: hidden;
}
.js-prolog-stage::before,
.js-prolog-stage::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
z-index:0;
}
.js-prolog-stage::before{
opacity:.095;
background-image:
var(--js-pattern-footer),
repeating-linear-gradient(135deg, rgba(255,226,154,.10) 0 1px, transparent 1px 22px);
background-size: calc(var(--js-footer-pattern-size) * .38), auto;
mix-blend-mode: screen;
-webkit-mask-image: linear-gradient(90deg, #000 0 18%, transparent 36% 64%, #000 82% 100%);
mask-image: linear-gradient(90deg, #000 0 18%, transparent 36% 64%, #000 82% 100%);
}
.js-prolog-stage::after{
border-radius: inherit;
background:
linear-gradient(90deg, rgba(227,181,68,.18), transparent 18%, transparent 82%, rgba(227,181,68,.14)),
radial-gradient(closest-side at 50% 0%, rgba(255,226,154,.12), transparent 56%),
radial-gradient(70% 82% at 50% 48%, rgba(0,0,0,.34), transparent 68%);
opacity:.78;
}
.js-prolog-stage > *{ position:relative; z-index:1; }
.js-prolog-stage-head{
display:grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 18px;
align-items:start;
margin-bottom: clamp(12px, 1.8vw, 18px);
}
.js-prolog-stage-title h2{
margin: 5px 0 8px;
max-width: 760px;
}
.js-prolog-stage-title p{
margin:0;
max-width: 76ch;
color: rgba(232,226,214,.74);
line-height:1.56;
}
.js-prolog-counter{
min-width: 68px;
display:inline-flex;
align-items:center;
justify-content:center;
gap: 6px;
padding: 9px 11px;
border-radius: 999px;
border: 1px solid rgba(227,181,68,.30);
background: rgba(5,6,7,.62);
box-shadow: inset 0 0 0 1px rgba(255,226,154,.06), 0 14px 34px rgba(0,0,0,.34);
color: rgba(255,226,154,.94);
font-weight: 900;
letter-spacing: .06em;
line-height:1;
}
.js-prolog-counter em{
font-style:normal;
color: rgba(255,242,210,.40);
letter-spacing:0;
}
.js-prolog-viewport{ position:relative; }
.js-prolog-slide{
display:none;
grid-template-columns: minmax(220px, .72fr) minmax(0, 1.28fr);
gap: clamp(16px, 2.5vw, 30px);
align-items:stretch;
}
.js-prolog-slide.is-active{
display:grid;
animation: js-prolog-fade .42s ease both;
}
@keyframes js-prolog-fade{
from{ opacity:0; transform: translateY(12px) scale(.992); }
to{ opacity:1; transform: translateY(0) scale(1); }
}
.js-prolog-visual{
position:relative;
min-height: 328px;
border-radius: 22px;
border:1px solid rgba(227,181,68,.26);
background:
radial-gradient(circle at 50% 42%, rgba(255,226,154,.13), transparent 32%),
radial-gradient(circle at 18% 14%, rgba(227,181,68,.13), transparent 30%),
radial-gradient(circle at 50% 50%, rgba(2,3,4,.58), transparent 64%),
linear-gradient(145deg, rgba(15,17,18,.74), rgba(4,5,6,.94));
box-shadow: inset 0 0 0 1px rgba(255,226,154,.06), inset 0 0 70px rgba(227,181,68,.06), 0 24px 58px rgba(0,0,0,.40);
overflow:hidden;
}
.js-prolog-visual::before,
.js-prolog-visual::after{
content:"";
position:absolute;
pointer-events:none;
}
.js-prolog-visual::before{
inset:16px;
border-radius: 18px;
border:1px solid rgba(255,226,154,.24);
box-shadow: inset 0 0 0 1px rgba(227,181,68,.08);
}
.js-prolog-visual::after{
inset:0;
opacity:.10;
background-image:
repeating-linear-gradient(90deg, rgba(255,226,154,.12) 0 1px, transparent 1px 42px),
repeating-linear-gradient(0deg, rgba(255,226,154,.08) 0 1px, transparent 1px 42px);
mask-image: radial-gradient(circle at 50% 44%, #000 0 42%, transparent 72%);
}
.js-prolog-orb{
position:absolute;
border-radius:999px;
filter: blur(.1px);
pointer-events:none;
}
.js-prolog-orb--a{
width: 176px;
height: 176px;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background: radial-gradient(circle, rgba(255,226,154,.20), rgba(227,181,68,.09) 44%, transparent 70%);
box-shadow: 0 0 70px rgba(227,181,68,.18);
}
.js-prolog-orb--b{
width: 70px;
height: 70px;
right: 32px;
bottom: 32px;
background: radial-gradient(circle, rgba(255,226,154,.20), transparent 70%);
}
.js-prolog-ring{
position:absolute;
left:50%;
top:50%;
width:min(66%, 214px);
aspect-ratio:1;
transform: translate(-50%, -50%);
border-radius:999px;
border:1px solid rgba(255,226,154,.30);
box-shadow: inset 0 0 0 1px rgba(227,181,68,.09), 0 0 50px rgba(227,181,68,.08);
}
.js-prolog-ring::before,
.js-prolog-ring::after{
content:"";
position:absolute;
inset:14%;
border-radius:inherit;
border:1px dashed rgba(255,226,154,.22);
}
.js-prolog-ring::after{
inset:30%;
border-style:solid;
opacity:.70;
}
.js-prolog-no{
position:absolute;
left: 26px;
bottom: 22px;
color: rgba(255,226,154,.20);
font-size: clamp(46px, 5.6vw, 66px);
line-height:.8;
font-weight: 900;
letter-spacing: -.035em;
}
.js-prolog-glyph{
position:absolute;
inset: 0;
display:grid;
place-items:center;
z-index:2;
}
.js-prolog-glyph::before{
content:"";
width: clamp(88px, 10.5vw, 126px);
aspect-ratio:1;
display:block;
background: linear-gradient(135deg, rgba(255,226,154,.98), rgba(188,130,26,.92));
box-shadow: 0 0 46px rgba(227,181,68,.22);
}
.js-prolog-glyph--rasa::before{
border-radius: 70% 30% 58% 42% / 62% 36% 64% 38%;
transform: rotate(45deg);
clip-path: path('M72 5 C102 42 142 71 138 108 C134 150 97 174 62 158 C25 141 9 100 25 67 C36 44 53 25 72 5 Z');
}
.js-prolog-glyph--unsur::before{
border-radius: 999px;
clip-path: polygon(50% 0, 62% 31%, 96% 36%, 70% 57%, 78% 92%, 50% 72%, 22% 92%, 30% 57%, 4% 36%, 38% 31%);
}
.js-prolog-glyph--momentum::before{
border-radius: 999px;
background:
conic-gradient(from 25deg, rgba(255,226,154,.98), rgba(188,130,26,.72), rgba(255,226,154,.98));
mask: radial-gradient(circle, transparent 0 39%, #000 40% 52%, transparent 53% 100%);
}
.js-prolog-visual--unsur .js-prolog-orb--a{ background: conic-gradient(from 15deg, rgba(206,154,43,.22), rgba(96,148,205,.12), rgba(255,102,64,.18), rgba(188,130,26,.18), rgba(206,154,43,.22)); }
.js-prolog-visual--momentum::after{ opacity:.16; background-image: repeating-conic-gradient(from 0deg, rgba(255,226,154,.13) 0 6deg, transparent 6deg 18deg); mask-image: radial-gradient(circle at 50% 50%, #000 0 46%, transparent 70%); }
.js-prolog-copy{
align-self:center;
max-width: 72ch;
}
.js-prolog-slide-kicker{
display:inline-flex;
align-items:center;
min-height: 28px;
padding: 0 12px;
border-radius: 999px;
border:1px solid rgba(227,181,68,.30);
background: rgba(5,6,7,.56);
color: rgba(255,226,154,.94);
font-size: 12px;
font-weight: 950;
letter-spacing:.16em;
text-transform: uppercase;
box-shadow: inset 0 0 0 1px rgba(255,226,154,.06);
}
.js-prolog-copy h3{
margin: 12px 0 6px;
font-size: clamp(27px, 2.85vw, 40px);
line-height: 1.03;
color: rgba(248,244,235,.97);
letter-spacing: -.035em;
}
.js-prolog-subtitle{
margin-bottom: 14px;
color: rgba(255,226,154,.82);
font-weight: 800;
letter-spacing:.01em;
}
.js-prolog-text{ color: rgba(224,218,205,.78); line-height: 1.66; }
.js-prolog-text p{ margin: 0 0 10px; }
.js-prolog-text p:last-child{ margin-bottom:0; }
.js-prolog-controls{
margin-top: clamp(12px, 1.6vw, 18px);
display:flex;
align-items:center;
justify-content:center;
gap: 12px;
}
.js-prolog-arrow,
.js-prolog-dot{
appearance:none;
border:0;
margin:0;
cursor:pointer;
}
.js-prolog-arrow{
width: 36px;
height: 36px;
border-radius: 999px;
display:grid;
place-items:center;
color: rgba(255,226,154,.92);
font-size: 25px;
line-height:1;
background: rgba(4,5,6,.70);
border:1px solid rgba(227,181,68,.28);
box-shadow: inset 0 0 0 1px rgba(255,226,154,.05), 0 12px 28px rgba(0,0,0,.32);
}
.js-prolog-arrow:hover,
.js-prolog-arrow:focus-visible{
background: radial-gradient(circle at 35% 25%, rgba(255,226,154,.20), rgba(4,5,6,.82));
outline:none;
}
.js-prolog-dots{ display:flex; align-items:center; gap:8px; }
.js-prolog-dot{
width: 28px;
height: 7px;
border-radius:999px;
background: rgba(255,242,210,.22);
box-shadow: inset 0 0 0 1px rgba(255,226,154,.08);
}
.js-prolog-dot.is-active{
width: 42px;
background: linear-gradient(90deg, rgba(188,130,26,.96), rgba(255,226,154,.94));
}
.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-prolog-card--video{
margin-top: 18px;
padding: 12px;
background: linear-gradient(180deg, rgba(10,12,14,.74), rgba(5,6,7,.92));
box-shadow: 0 22px 60px rgba(0,0,0,.42);
}
.js-prolog-video-shell{
position: relative;
border-radius: 18px;
overflow: hidden;
background: radial-gradient(140% 120% at 20% 10%, rgba(255,226,154,.10), rgba(6,7,7,.94) 62%, rgba(5,6,7,.98) 100%);
box-shadow: inset 0 0 0 1px rgba(255,226,154,.08);
}
@media (max-width: 980px){
.js-prolog-slide{ grid-template-columns: 1fr; align-items:start; gap: 16px; }
.js-prolog-visual{ min-height: 208px; }
.js-prolog-copy{ max-width:none; }
.js-prolog-stage::before{
-webkit-mask-image: linear-gradient(180deg, #000 0 22%, transparent 42% 58%, #000 82% 100%);
mask-image: linear-gradient(180deg, #000 0 22%, transparent 42% 58%, #000 82% 100%);
}
}
@media (max-width: 680px){
.js-prolog-stage{ padding: 14px; border-radius: 22px; }
.js-prolog-stage-head{ grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.js-prolog-stage-title h2{ font-size: clamp(22px, 6.4vw, 28px); }
.js-prolog-stage-title p{ line-height: 1.55; font-size: 15px; }
.js-prolog-counter{ justify-self:start; min-width: 58px; padding: 7px 10px; font-size: 13px; letter-spacing:.04em; }
.js-prolog-visual{ min-height: 176px; border-radius: 18px; }
.js-prolog-visual::before{ inset: 12px; border-radius: 15px; }
.js-prolog-orb--a{ width: 142px; height: 142px; }
.js-prolog-ring{ width:min(60%, 168px); }
.js-prolog-glyph::before{ width: clamp(74px, 23vw, 96px); }
.js-prolog-no{ left: 18px; bottom: 16px; font-size: clamp(40px, 13vw, 54px); }
.js-prolog-copy h3{ font-size: clamp(25px, 7.6vw, 32px); }
.js-prolog-subtitle{ margin-bottom: 12px; }
.js-prolog-text{ line-height: 1.68; font-size: 15px; }
.js-prolog-arrow{ width: 36px; height: 36px; }
.js-prolog-dot{ width: 24px; }
.js-prolog-dot.is-active{ width: 38px; }
}
@media (max-width: 380px){
.js-prolog-stage{ padding: 12px; }
.js-prolog-visual{ min-height: 164px; }
.js-prolog-text{ font-size: 14.5px; }
}
.js-lite-yt{
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(227,181,68,.20);
background: #050607;
box-shadow: 0 24px 58px rgba(0,0,0,.44);
}
.js-lite-yt__button{
appearance: none;
border: 0;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
display: block;
position: relative;
background: transparent;
cursor: pointer;
}
.js-lite-yt__poster,
.js-lite-yt iframe{
width: 100%;
height: 100%;
display: block;
border: 0;
object-fit: cover;
}
.js-lite-yt__shade{
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.18) 45%, rgba(0,0,0,.44) 100%),
radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.12) 48%, rgba(0,0,0,.46) 100%);
}
.js-lite-yt__badge{
position: absolute;
top: 16px;
left: 16px;
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border-radius: 999px;
background: rgba(5,6,7,.72);
border: 1px solid rgba(255,226,154,.22);
color: rgba(255,242,210,.92);
font-size: 12px;
font-weight: 800;
letter-spacing: .04em;
}
.js-lite-yt__play{
position: absolute;
inset: 50% auto auto 50%;
transform: translate(-50%, -50%);
width: clamp(68px, 8vw, 88px);
height: clamp(68px, 8vw, 88px);
border-radius: 999px;
display:grid;
place-items:center;
color: #120d02;
background: radial-gradient(circle at 35% 30%, rgba(255,226,154,.98), rgba(227,181,68,.98));
box-shadow: 0 18px 42px rgba(0,0,0,.46), 0 0 0 1px rgba(255,226,154,.38);
transition: transform .22s ease, box-shadow .22s ease;
}
.js-lite-yt__play svg{
width: 32px;
height: 32px;
margin-left: 4px;
}
.js-lite-yt__button:hover .js-lite-yt__play,
.js-lite-yt__button:focus-visible .js-lite-yt__play{
transform: translate(-50%, -50%) scale(1.04);
box-shadow: 0 24px 54px rgba(0,0,0,.50), 0 0 0 1px rgba(255,226,154,.50);
}
.js-lite-yt__button:focus-visible{
outline: 2px solid rgba(255,226,154,.78);
outline-offset: 3px;
}
.js-lite-yt.is-loaded .js-lite-yt__button{ display:none; }
@media (max-width: 900px){
.js-prolog-grid{ grid-template-columns: 1fr; }
.js-prolog-card{ grid-column: auto; }
.js-prolog-card--video{ padding: 10px; }
}
@media (max-width: 680px){
.js-lite-yt{ border-radius: 14px; }
.js-lite-yt__badge{ top: 12px; left: 12px; }
}
.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-rail{
display:flex;
flex-direction:column;
gap: 14px;
align-items:center;
}
.js-app-author{
display:flex;
justify-content: center;
align-items: flex-start;
width: 100%;
}
.js-app-author > *{ width: 100%; max-width: 380px; height: auto; }
.js-app-why-desktop{ width: 100%; max-width: 380px; }
/* 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-proof{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:8px;
width: fit-content;
max-width: 100%;
margin-top: 12px;
padding: 8px 12px;
border: 1px solid rgba(227,181,68,.20);
border-radius: 999px;
background: rgba(255,226,154,.06);
color: rgba(255,246,214,.88);
font-size: .88rem;
line-height: 1.35;
}
.js-appcombo-stars{
color: #e8bd55;
letter-spacing: .04em;
text-shadow: 0 0 12px rgba(227,181,68,.24);
}
.js-appcombo-banner{
display:block;
margin-top: 14px;
border-radius: 18px;
overflow:hidden;
border: 1px solid rgba(227,181,68,.18);
box-shadow: 0 14px 34px rgba(0,0,0,.24);
background: rgba(0,0,0,.18);
}
.js-appcombo-banner img{
display:block;
width: 100%;
height: auto;
}
.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-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: minmax(0, 1.55fr) minmax(0, .9fr) minmax(0, .86fr) minmax(220px, 1.18fr);
gap: 22px;
}
@media (max-width: 900px) { .js-footer-inner { grid-template-columns: 1fr; } }
/* Footer “quiet luxury” (refined 4-column footer + legal grounding bar) */
.js-footer-panel{
position: relative;
z-index: 1;
padding: 28px 22px 0;
border-radius: 22px;
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);
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;
}
.js-footer-col{ min-width: 0; }
.js-footer-col--social{ display:flex; flex-direction:column; align-items:flex-start; min-width: 0; }
.js-footer-col--social .js-footer-social{ margin-top: 2px; width: 100%; justify-content: flex-start; }
.js-footer-brand,
.js-footer-title,
.js-company-groundingLabel,
.js-company-compactLabel{
font-family: "Cinzel", "Playfair Display", Georgia, serif;
}
.js-footer-brand{
font-weight: 700;
font-size: 19px;
letter-spacing: .06em;
text-transform: none;
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: 10px;
}
.js-footer-quote{
color: rgba(216,224,234,.62);
font-family: "Inter", "Montserrat", system-ui, -apple-system, sans-serif;
font-weight: 300;
font-size: 13px;
line-height: 1.85;
max-width: 48ch;
}
.js-footer-title{
font-weight: 700;
font-size: 13px;
letter-spacing: .08em;
color: rgba(255,242,210,.88);
margin-bottom: 12px;
}
.js-footer-links{
display: grid;
gap: 10px;
}
.js-footer-links a{
position: relative;
padding-left: 0;
color: rgba(216,224,234,.70);
font-family: "Inter", "Montserrat", system-ui, -apple-system, sans-serif;
font-weight: 300;
transition: color .18s ease, transform .18s ease;
}
.js-footer-links a::before{ display:none; }
.js-footer-links a:hover{
transform: translateX(2px);
color: rgba(255,236,192,.95);
}
.js-footer-bottom{
position: relative;
z-index: 1;
margin: 26px -22px 0;
padding: 16px 22px;
border-top: 1px solid rgba(212,175,55,0.12);
background: linear-gradient(180deg, rgba(5,7,9,.52), rgba(4,6,8,.80));
}
.js-footer-bottomInner{
display:flex;
align-items:center;
justify-content:space-between;
gap: 18px;
}
.js-footer-meta{
width: 100%;
}
.js-company-grounding{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap: 18px 28px;
width: 100%;
}
.js-company-groundingSide{
min-width: 0;
}
.js-company-groundingSide--secondary{
text-align: right;
white-space: nowrap;
}
.js-company-groundingLabel{
display:block;
margin-bottom: 5px;
color: rgba(255,242,210,.84);
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
}
.js-company-groundingText,
.js-company-compactText,
.js-company-compactName{
display:block;
color: rgba(216,224,234,.66);
font-family: "Inter", "Montserrat", system-ui, -apple-system, sans-serif;
font-size: 12px;
font-weight: 300;
line-height: 1.7;
}
.js-company-compactName{
color: rgba(255,244,220,.92);
font-size: 13px;
font-weight: 500;
}
.js-company-compact{
display:grid;
gap: 3px;
}
.js-company-compactLabel{
color: rgba(255,242,210,.84);
font-size: 10.5px;
letter-spacing: .08em;
font-weight: 700;
}
.js-footer .social-login-icons{
display:flex;
align-items:center;
justify-content:flex-start;
flex-wrap: nowrap;
gap: 8px;
width: 100%;
-webkit-box-reflect: unset;
padding: 0;
margin: 0;
}
.js-footer .socialcontainer{
display:inline-flex;
align-items:center;
justify-content:center;
height:auto;
overflow:visible;
cursor:pointer;
text-decoration:none;
}
.js-footer .socialcontainer > .icon{ display:none; }
.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{
width: 38px;
height: 38px;
display:flex;
align-items:center;
justify-content:center;
border-radius: 999px;
border: 1px solid rgba(212,175,55,.18);
background: rgba(255,255,255,.02);
color: rgba(255,244,220,.80);
transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
transform: none !important;
}
.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: 1;
fill: currentColor;
transition: inherit;
}
.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{
background: rgba(212,175,55,.12);
border-color: rgba(255,226,154,.30);
color: rgba(255,242,210,.96);
transform: translateY(-1px) !important;
}
.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,
.js-footer .social-icon-1-1,
.js-footer .social-icon-2-2,
.js-footer .social-icon-3-3,
.js-footer .social-icon-4-4,
.js-footer .social-icon-5-5{ background-image:none; background-color: transparent; }
@media (max-width: 900px){
.js-footer-panel{ padding: 24px 16px 0; border-radius: 20px; }
.js-footer-inner{ gap: 16px; }
.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-quote{ max-width: 60ch; }
.js-footer-col--social{ align-items: flex-start; }
.js-footer-bottom{ margin: 22px -16px 0; padding: 14px 16px; }
.js-footer-bottomInner,
.js-company-grounding{
flex-direction: column;
align-items: flex-start;
}
.js-company-groundingSide--secondary{
width: 100%;
text-align: center;
white-space: normal;
}
.js-company-groundingSide--secondary .js-company-groundingText{
color: rgba(255,226,154,.92);
font-weight: 500;
}
}
@media (max-width: 520px){
.js-footer .social-login-icons{ gap: 8px; justify-content: center; }
.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{ width: 38px; height: 38px; }
}
.js-footer a { color: rgba(216,224,234,.74); text-decoration:none; }
.js-footer a:hover { color: rgba(255,236,192,.95); }
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: 22px;
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: 9px 11px;
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;
padding-top: 12px;
border-top: 1px solid rgba(212,175,55,0.10);
color: var(--js-muted);
}
.js-drawer-foot .js-company-compact{
gap: 4px;
}
.js-drawer-foot .js-company-compactLabel{
font-size: 10px;
}
.js-drawer-foot .js-company-compactName{
font-size: 12px;
}
.js-drawer-foot .js-company-compactText{
font-size: 11.5px;
line-height: 1.6;
}
/* 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: 9px 11px;
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: 9px 11px;
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: 9px 11px;
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-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: 9px 11px;
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, .82) !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: .14 !important;
filter: contrast(1.02) sepia(.85) saturate(4.2) hue-rotate(14deg) brightness(.82) !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: .8px;
font-weight: 800;
border-color: rgba(227,181,68,.20);
background: rgba(0,0,0,.18);
padding: 4px 8px;
font-size: 11px;
white-space: nowrap;
}
.js-tool-chip{
align-self:flex-start;
margin-top: 2px;
}
.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 video card: keep subtle footer-like pattern only on the video wrapper */
.js-prolog-card--video{ position:relative; isolation:isolate; overflow:hidden; border-radius: 18px; border:1px solid rgba(227,181,68,.22); }
.js-prolog-card--video::after{
content:"";
position:absolute;
inset:0;
pointer-events:none;
opacity: .08;
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--video > *{ position:relative; z-index: 1; }
/* (3) App + Author: desktop right rail stays compact */
.js-app-grid{ align-items: start; }
@media (min-width: 981px){
.js-why-mobile{ display: none; }
.js-app-why-desktop{ display: block; }
.js-app-author .jsk-authorcard-wrap{ height: auto; margin-top: 0; }
.js-app-author .jsk-card{ height: auto; }
.js-app-author .jsk-card__wrapper{ margin-top: 14px; }
}
/* (4) Mobile: keep current flow unchanged */
@media (max-width: 980px){
.js-app-grid{ gap: 34px; }
.js-app-author{ margin-top: 6px; }
.js-app-author > *{ max-width: 520px; }
.js-app-rail{ gap: 0; }
.js-app-why-desktop{ display: none; }
.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; }
}
/* ===== Quick animated wordmark image ===== */
.js-brand .js-wordmark{
display:inline-flex;
align-items:center;
height: clamp(30px, 3.1vw, 54px);
width: auto;
max-width: min(46vw, 420px);
line-height: 0;
flex: 0 1 auto;
overflow: visible;
}
.js-brand .js-wordmark img{
display:block;
height:100%;
width:auto;
max-width:100%;
filter: drop-shadow(0 2px 0 rgba(0,0,0,.48)) drop-shadow(0 0 14px rgba(227,181,68,.18));
transform-origin:center center;
animation: js-wordmark-image-float 3.8s ease-in-out infinite, js-wordmark-image-glow 5.2s ease-in-out infinite;
will-change: transform, filter;
}
@keyframes js-wordmark-image-float{
0%,100%{ transform: translateY(0); }
50%{ transform: translateY(-2px); }
}
@keyframes js-wordmark-image-glow{
0%,100%{ filter: drop-shadow(0 2px 0 rgba(0,0,0,.48)) drop-shadow(0 0 12px rgba(227,181,68,.14)); }
50%{ filter: drop-shadow(0 2px 0 rgba(0,0,0,.48)) drop-shadow(0 0 18px rgba(255,226,154,.24)); }
}
@media (max-width: 900px){
.js-brand .js-wordmark{
height: 36px;
max-width: min(38vw, 220px);
}
}
@media (max-width: 520px){
.js-brand .js-wordmark{
height: 30px;
max-width: min(32vw, 160px);
}
}
@media (prefers-reduced-motion: reduce){
.js-brand .js-wordmark img{ animation: none !important; }
}
/* ===== Mobile wordmark + luxury header system (clean override) ===== */
.js-page .js-brand-logo{
background:
radial-gradient(120% 120% at 30% 8%, rgba(255,244,210,.16), transparent 46%),
linear-gradient(145deg, rgba(29,25,13,.72), rgba(4,6,6,.88) 62%, rgba(44,34,12,.62)) !important;
border:1px solid rgba(227,181,68,.42) !important;
box-shadow:
inset 0 1px 0 rgba(255,246,210,.12),
inset 0 -10px 20px rgba(0,0,0,.30),
0 12px 28px rgba(0,0,0,.32),
0 0 0 1px rgba(0,0,0,.46),
0 0 22px rgba(227,181,68,.16) !important;
}
.js-page .js-langseg{
position:relative;
isolation:isolate;
display:flex;
align-items:center;
gap:2px;
height:42px;
padding:3px;
border-radius:17px;
overflow:hidden;
border:1px solid rgba(227,181,68,.34);
background:
radial-gradient(120% 130% at 18% 5%, rgba(255,236,190,.18), transparent 48%),
linear-gradient(145deg, rgba(25,22,13,.82), rgba(4,6,6,.88) 56%, rgba(37,30,12,.70));
box-shadow:
inset 0 1px 0 rgba(255,244,210,.10),
inset 0 -12px 22px rgba(0,0,0,.30),
0 12px 28px rgba(0,0,0,.24),
0 0 0 1px rgba(0,0,0,.50),
0 0 24px rgba(212,175,55,.12);
}
.js-page .js-langseg::before{
content:"";
position:absolute;
inset:1px;
border-radius:15px;
background:linear-gradient(120deg, rgba(255,255,255,.12), transparent 34%, rgba(255,226,154,.06) 62%, transparent);
pointer-events:none;
z-index:0;
}
.js-page .js-langseg-ico{
position:relative;
z-index:1;
width:34px;
height:36px;
display:grid;
place-items:center;
flex:0 0 auto;
color:rgba(255,232,170,.96);
border-radius:12px;
background:linear-gradient(180deg, rgba(255,226,154,.09), rgba(0,0,0,.08));
box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.js-page .js-langseg-ico::after{
content:"";
position:absolute;
right:-2px;
top:8px;
bottom:8px;
width:1px;
background:linear-gradient(180deg, transparent, rgba(227,181,68,.30), transparent);
}
.js-page .js-langseg-ico svg{
width:18px;
height:18px;
display:block;
fill:none;
stroke:currentColor;
stroke-width:1.55;
stroke-linecap:round;
stroke-linejoin:round;
filter:drop-shadow(0 0 8px rgba(227,181,68,.26));
}
.js-page .js-langseg-btn{
position:relative;
z-index:1;
min-width:38px;
height:36px;
padding:0 9px;
border-radius:12px;
font-size:12px;
font-weight:850;
letter-spacing:.50px;
color:rgba(238,228,199,.82);
text-shadow:0 1px 0 rgba(0,0,0,.62);
transition:color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.js-page .js-langseg-btn:hover,
.js-page .js-langseg-btn:focus-visible{
color:rgba(255,239,195,.98);
}
.js-page .js-langseg-btn.is-active{
color:rgba(255,241,201,.98);
background:
radial-gradient(120% 120% at 30% 10%, rgba(255,246,210,.26), transparent 52%),
linear-gradient(180deg, rgba(205,162,44,.48), rgba(104,82,20,.52));
box-shadow:
inset 0 1px 0 rgba(255,246,210,.26),
inset 0 -1px 0 rgba(0,0,0,.42),
0 7px 18px rgba(0,0,0,.22),
0 0 16px rgba(212,175,55,.18);
}
@media (max-width: 900px){
.js-page .js-nav-inner{
display:flex !important;
align-items:center !important;
justify-content:space-between !important;
gap:8px !important;
padding:10px 0 !important;
min-height:70px !important;
}
.js-page .js-brand{
flex:1 1 auto !important;
min-width:0 !important;
gap:9px !important;
}
.js-page .js-brand-logo{
width:48px !important;
height:48px !important;
flex:0 0 48px !important;
border-radius:12px !important;
}
.js-page .js-brand .js-wordmark{
display:inline-flex !important;
flex:0 1 auto !important;
height:28px !important;
min-width:92px !important;
max-width:min(34vw, 150px) !important;
}
.js-page .js-actions{
display:flex !important;
align-items:center !important;
gap:8px !important;
margin-left:auto !important;
flex:0 0 auto !important;
justify-self:end !important;
}
.js-page .js-langseg{
height:44px !important;
padding:3px !important;
border-radius:17px !important;
flex:0 0 auto !important;
}
.js-page .js-langseg-ico{
width:34px !important;
height:38px !important;
}
.js-page .js-langseg-btn{
min-width:38px !important;
height:38px !important;
padding:0 9px !important;
font-size:12px !important;
font-weight:850 !important;
}
.js-page .js-icon-btn--lux{
width:46px !important;
height:46px !important;
flex:0 0 46px !important;
border-radius:16px !important;
color:rgba(255,236,190,.96) !important;
border-color:rgba(227,181,68,.48) !important;
background:
radial-gradient(120% 120% at 28% 8%, rgba(255,244,210,.24), transparent 48%),
linear-gradient(145deg, rgba(31,27,14,.86), rgba(4,6,6,.92) 58%, rgba(46,36,13,.72)) !important;
box-shadow:
inset 0 1px 0 rgba(255,246,210,.13),
inset 0 -12px 24px rgba(0,0,0,.34),
0 12px 30px rgba(0,0,0,.26),
0 0 0 1px rgba(0,0,0,.58),
0 0 28px rgba(212,175,55,.16) !important;
}
.js-page .js-icon-btn--lux svg{
position:relative;
z-index:2;
width:21px;
height:21px;
filter:drop-shadow(0 0 9px rgba(227,181,68,.20));
}
.js-page .js-icon-btn--lux::before{
inset:1px !important;
border-radius:15px !important;
transform:none !important;
background:linear-gradient(120deg, rgba(255,255,255,.13), transparent 36%, rgba(255,226,154,.07) 64%, transparent) !important;
z-index:1;
}
.js-page .js-icon-btn--lux::after{
inset:2px !important;
border-radius:14px !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -1px 0 rgba(0,0,0,.42) !important;
z-index:1;
}
}
@media (max-width: 380px){
.js-page .js-nav-inner{ gap:7px !important; }
.js-page .js-brand{ gap:8px !important; }
.js-page .js-brand-logo{ width:44px !important; height:44px !important; flex-basis:44px !important; }
.js-page .js-brand .js-wordmark{ height:26px !important; min-width:82px !important; max-width:min(29vw, 112px) !important; }
.js-page .js-actions{ gap:6px !important; }
.js-page .js-langseg{ height:42px !important; padding:2px !important; }
.js-page .js-langseg-ico{ width:30px !important; height:38px !important; }
.js-page .js-langseg-ico svg{ width:17px !important; height:17px !important; }
.js-page .js-langseg-btn{ min-width:34px !important; height:38px !important; padding:0 7px !important; font-size:11.5px !important; }
.js-page .js-icon-btn--lux{ width:44px !important; height:44px !important; flex-basis:44px !important; }
}
.js-tool{ min-height:100%; padding:18px 16px 16px; }
.js-tool-head{ display:block; margin:4px 0 0; min-height:0; }
.js-tool-icon{
display:block;
width:72px;
height:72px;
object-fit:contain;
filter:drop-shadow(0 10px 18px rgba(0,0,0,.22));
}
.js-tool-chip{
position:absolute;
top:16px;
right:16px;
margin:0;
align-self:auto;
}
.js-tool h3{
margin:8px 0 6px;
font-size:16px;
line-height:1.28;
min-height:0;
display:block;
max-width:calc(100% - 92px);
}
.js-tool p{
margin:0 0 10px;
color:var(--js-muted);
font-size:13px;
line-height:1.55;
flex:1 1 auto;
}
/* ===== JavaSense Links Template ===== */
body.jsk-links-template {
background: #030507;
}
body.jsk-links-template::before,
body.jsk-links-template::after {
content: "";
position: fixed;
inset: 0;
pointer-events: none;
z-index: 0;
}
body.jsk-links-template::before {
opacity: .22;
background-image:
linear-gradient(30deg, rgba(110, 170, 110, .11) 12%, transparent 12.5%, transparent 87%, rgba(110, 170, 110, .11) 87.5%, rgba(110, 170, 110, .11)),
linear-gradient(150deg, rgba(110, 170, 110, .08) 12%, transparent 12.5%, transparent 87%, rgba(110, 170, 110, .08) 87.5%, rgba(110, 170, 110, .08)),
linear-gradient(90deg, rgba(255, 212, 112, .04) 2%, transparent 2.5%, transparent 97%, rgba(255, 212, 112, .04) 97.5%, rgba(255, 212, 112, .04));
background-size: 80px 138px, 80px 138px, 80px 138px;
background-position: 0 0, 40px 69px, 0 0;
animation: jsLinksPatternShift 28s linear infinite;
}
body.jsk-links-template::after {
background: radial-gradient(circle at 50% 0%, rgba(217,175,86,.08), transparent 40%), linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.14));
}
body.jsk-links-template .site,
body.jsk-links-template #page {
background: transparent;
}
@keyframes jsLinksPatternShift {
from { transform: translate3d(0, 0, 0); }
50% { transform: translate3d(0, -12px, 0); }
to { transform: translate3d(0, 0, 0); }
}
.js-links-page,
.js-links-page * {
box-sizing: border-box;
}
.js-links-page {
position: relative;
z-index: 1;
min-height: 100vh;
padding: 24px 16px 40px;
color: #f5f0e6;
}
.js-links-shell {
width: min(100%, 660px);
margin: 0 auto;
}
.js-links-hero {
text-align: center;
padding: 8px 2px 6px;
}
.js-links-brand {
display: inline-flex;
align-items: center;
gap: 12px;
color: #f5f0e6;
text-decoration: none;
}
.js-links-brandMark {
width: 56px;
height: 56px;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(217,175,86,.22);
box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 22px rgba(0,0,0,.24);
background: rgba(255,255,255,.04);
flex: 0 0 56px;
}
.js-links-brandMark img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.js-links-brandWordmark {
display: inline-flex;
align-items: center;
}
.js-links-brandWordmark img {
display: block;
width: auto;
height: 44px;
object-fit: contain;
}
.js-links-title {
margin: 18px 0 0;
font-size: clamp(34px, 8vw, 48px);
line-height: 1.18;
letter-spacing: -.04em;
color: #f5f0e6;
text-wrap: balance;
}
.js-links-subtitle {
margin: 16px 0 0;
font-size: 16px;
line-height: 1.65;
color: #d9af56;
}
.js-links-desc {
margin: 18px auto 0;
width: min(100%, 58ch);
max-width: 58ch;
font-size: 15px;
line-height: 1.8;
color: #f5f0e6;
}
.js-links-actions {
display: grid;
gap: 10px;
margin-top: 20px;
}
.js-links-appBtn {
min-height: 64px;
display: flex;
align-items: center;
gap: 14px;
padding: 14px 16px;
border-radius: 18px;
text-decoration: none;
border: 1px solid transparent;
transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.js-links-appBtnIcon {
width: 31px;
height: 31px;
flex: 0 0 31px;
display: grid;
place-items: center;
}
.js-links-storeSvg {
width: 100%;
height: 100%;
display: block;
}
.js-links-appBtnText {
display: block;
flex: 1 1 auto;
text-align: left;
}
.js-links-appBtnMain {
display: block;
font-size: 16px;
line-height: 1.25;
font-weight: 700;
}
.js-links-appBtnMeta {
display: block;
margin-top: 4px;
font-size: 12px;
line-height: 1.45;
font-weight: 500;
}
.js-links-appBtn--primary {
color: #1d1508;
background: linear-gradient(180deg, #f4cc72 0%, #d9af56 100%);
box-shadow: 0 12px 26px rgba(217,175,86,.22), inset 0 1px 0 rgba(255,255,255,.40);
}
.js-links-appBtn--primary:hover,
.js-links-appBtn--primary:focus-visible {
transform: translateY(-1px);
box-shadow: 0 16px 30px rgba(217,175,86,.28), inset 0 1px 0 rgba(255,255,255,.40);
}
.js-links-appBtn--secondary {
color: #e8e8eb;
background: rgba(255,255,255,.04);
border-color: rgba(255,255,255,.08);
cursor: default;
}
.js-links-section {
margin-top: 18px;
padding: 18px 16px;
border-radius: 22px;
background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.026));
border: 1px solid rgba(255,255,255,.06);
box-shadow: 0 16px 34px rgba(0,0,0,.22);
}
.js-links-sectionTitle {
margin: 0 0 12px;
font-size: 12px;
line-height: 1.4;
font-weight: 700;
letter-spacing: .20em;
text-transform: uppercase;
color: #e0bb69;
}
.js-links-quickList,
.js-links-communityList {
display: grid;
gap: 10px;
}
.js-links-quickLink,
.js-links-communityLink,
.js-links-siteBtn {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
min-height: 52px;
padding: 14px 16px;
border-radius: 16px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
color: #f5f0e6;
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
.js-links-quickLink:hover,
.js-links-quickLink:focus-visible,
.js-links-communityLink:hover,
.js-links-communityLink:focus-visible,
.js-links-siteBtn:hover,
.js-links-siteBtn:focus-visible {
transform: translateY(-1px);
border-color: rgba(217,175,86,.28);
background: rgba(255,255,255,.05);
}
.js-links-arrow {
color: #e0bb69;
font-size: 18px;
line-height: 1;
}
.js-links-socialGrid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
.js-links-socialLink {
min-height: 72px;
display: grid;
place-items: center;
border-radius: 18px;
background: rgba(255,255,255,.03);
border: 1px solid rgba(255,255,255,.06);
text-decoration: none;
transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.js-links-socialLink:hover,
.js-links-socialLink:focus-visible {
transform: translateY(-1px);
border-color: rgba(217,175,86,.28);
box-shadow: 0 10px 22px rgba(217,175,86,.12);
background: rgba(255,255,255,.05);
}
.js-links-icon {
width: 26px;
height: 26px;
display: block;
}
.js-links-communityIcon {
width: 24px;
height: 34px;
display: inline-grid;
place-items: center;
flex: 0 0 24px;
}
.js-links-communityLink {
justify-content: flex-start;
}
.js-links-communityLink--x .js-links-communityIcon,
.js-links-communityLink--threads .js-links-communityIcon {
color: #ffffff;
}
.js-links-communityLink--facebook .js-links-communityIcon {
color: #1877f2;
}
.js-links-siteBtn {
justify-content: center;
color: #f1c86d;
font-weight: 700;
background: linear-gradient(180deg, rgba(217,175,86,.08), rgba(217,175,86,.04));
border-color: rgba(217,175,86,.22);
}
.js-links-footer {
margin-top: 18px;
padding: 12px 4px 0;
text-align: center;
}
.js-links-footer p {
margin: 0;
font-size: 12px;
line-height: 1.75;
color: #b8aa86;
}
.js-links-footer p strong {
color: #f5f0e6;
font-weight: 600;
}
@media (min-width: 640px) {
.js-links-page {
padding: 28px 20px 40px;
}
.js-links-brandMark {
width: 58px;
height: 58px;
flex-basis: 58px;
}
.js-links-brandWordmark img {
height: 50px;
}
.js-links-actions {
grid-template-columns: 1fr 1fr;
}
.js-links-communityList {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
body.jsk-links-template::before,
.js-links-appBtn,
.js-links-quickLink,
.js-links-socialLink,
.js-links-communityLink,
.js-links-siteBtn {
animation: none;
transition: none;
}
}
/* ===== JavaSense Pustaka archive thumbnails (restored after CSS baseline rollback) ===== */
.js-post-thumb{
display:block;
margin: -16px -16px 14px;
aspect-ratio: 16 / 9;
overflow:hidden;
border-radius: calc(var(--js-radius-lg) - 2px) calc(var(--js-radius-lg) - 2px) 12px 12px;
border-bottom: 1px solid rgba(227,181,68,.20);
background: radial-gradient(circle at 30% 20%, rgba(227,181,68,.14), rgba(0,0,0,.28));
}
.js-post-thumb-img{
width:100%;
height:100%;
display:block;
object-fit:cover;
transform: scale(1.01);
transition: transform .28s ease, filter .28s ease;
}
.js-post-card:hover .js-post-thumb-img{
transform: scale(1.045);
filter: brightness(1.06);
}
.js-post-body{ display:block; }
/* Mobile search is intentionally disabled in the plugin header. Keep legacy hooks hidden if cached markup appears. */
.js-nav-search-mobile,
.js-searchmodal,
[data-js-search]{ display:none !important; }
/* Defensive dropdown state: hide desktop dropdowns until hover/focus. */
.js-nav-item .js-dropdown{ display:none; }
.js-has-dropdown:hover .js-dropdown,
.js-has-dropdown:focus-within .js-dropdown,
.js-has-dropdown.is-open .js-dropdown{ display:block; }
@media (max-width: 900px){
.js-nav-item .js-dropdown{ display:none !important; }
}
/* ===== JavaSense SEO luxury panels: cultural map + Pustaka hero ===== */
.js-home-cultural-map{ padding-top:clamp(18px,2.8vw,34px); }
.js-home-cultural-map .js-cultural-panel{
position:relative;
isolation:isolate;
overflow:hidden;
display:grid;
grid-template-columns:minmax(0,1.04fr) minmax(280px,.96fr);
gap:clamp(20px,3.2vw,46px);
align-items:center;
padding:clamp(22px,3.2vw,38px);
border-radius:28px;
background:
radial-gradient(circle at 10% 14%,rgba(214,174,82,.16),transparent 34%),
radial-gradient(circle at 92% 16%,rgba(214,174,82,.12),transparent 30%),
linear-gradient(135deg,rgba(15,18,16,.96),rgba(5,7,7,.98) 58%,rgba(154,116,38,.10));
}
.js-home-cultural-map .js-cultural-panel:before{
content:"";
position:absolute;
inset:14px;
border:1px solid rgba(214,174,82,.10);
border-radius:22px;
pointer-events:none;
z-index:-1;
}
.js-home-cultural-map .js-cultural-panel:after{
content:"";
position:absolute;
right:-8%; top:-18%;
width:42%; aspect-ratio:1;
border-radius:999px;
background:radial-gradient(circle,rgba(214,174,82,.16),transparent 68%);
filter:blur(6px);
pointer-events:none;
z-index:-1;
}
.js-cultural-copy h2{
max-width:760px;
margin:0 0 14px;
font-size:clamp(25px,3vw,39px);
line-height:1.08;
letter-spacing:-.035em;
}
.js-cultural-copy p{
margin:0;
max-width:78ch;
color:rgba(245,239,222,.78);
font-size:clamp(14.5px,1.05vw,16.5px);
line-height:1.78;
}
.js-cultural-copy .js-cultural-note{
margin-top:16px;
padding-top:16px;
border-top:1px solid rgba(214,174,82,.16);
color:rgba(245,239,222,.70);
}
.js-cultural-list{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
align-content:center;
}
.js-cultural-list span,
.js-cultural-list a{
display:flex;
align-items:center;
min-height:42px;
padding:10px 12px;
border-radius:14px;
border:1px solid rgba(214,174,82,.18);
background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(0,0,0,.14));
color:rgba(245,239,222,.83);
text-decoration:none;
font-size:12.5px;
font-weight:760;
letter-spacing:.015em;
}
.js-cultural-list span:before,
.js-cultural-list a:before{
content:"";
width:6px;
height:6px;
flex:0 0 6px;
margin-right:9px;
border-radius:999px;
background:rgba(214,174,82,.88);
box-shadow:0 0 13px rgba(214,174,82,.45);
}
.js-cultural-list a:hover,
.js-cultural-list a:focus-visible{
border-color:rgba(214,174,82,.34);
color:rgba(255,244,210,.96);
background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(0,0,0,.16));
}
@media(max-width:860px){
.js-home-cultural-map .js-cultural-panel{ grid-template-columns:1fr; padding:20px; border-radius:22px; }
.js-home-cultural-map .js-cultural-panel:before{ inset:10px; border-radius:18px; }
.js-cultural-list{ grid-template-columns:1fr; }
}
.js-blog-hero-card{
position:relative;
isolation:isolate;
overflow:hidden;
display:grid;
grid-template-columns:minmax(0,1.05fr) minmax(280px,.95fr);
gap:clamp(18px,3vw,42px);
align-items:start;
padding:clamp(22px,3vw,36px);
border-radius:28px;
background:
radial-gradient(circle at 12% 18%,rgba(214,174,82,.15),transparent 33%),
linear-gradient(135deg,rgba(16,18,17,.96),rgba(5,7,7,.98) 62%,rgba(153,115,38,.10));
}
.js-blog-hero-card:before{
content:"";
position:absolute;
inset:14px;
border:1px solid rgba(214,174,82,.10);
border-radius:22px;
pointer-events:none;
z-index:-1;
}
.js-blog-hero-copy h1{
margin:0;
font-size:clamp(34px,4vw,54px)!important;
line-height:1.02;
letter-spacing:-.045em;
}
.js-blog-hero-copy p{
max-width:74ch;
margin:12px 0 0;
color:rgba(245,239,222,.74);
font-size:15.5px;
line-height:1.74;
}
.js-blog-actions{
display:flex;
flex-wrap:wrap;
gap:9px;
margin-top:18px;
}
.js-blog-actions a{
display:inline-flex;
align-items:center;
min-height:34px;
padding:8px 12px;
border-radius:999px;
border:1px solid rgba(214,174,82,.22);
background:rgba(0,0,0,.18);
color:rgba(245,239,222,.86);
text-decoration:none;
font-size:12.5px;
font-weight:760;
}
.js-blog-actions a:hover{ border-color:rgba(214,174,82,.48); color:#ffe39b; }
.js-breadcrumb{
display:flex;
align-items:center;
gap:8px;
margin:clamp(18px,2vw,28px) 0 0;
color:rgba(245,239,222,.58);
font-size:13px;
line-height:1.3;
}
.js-breadcrumb a{
color:rgba(245,239,222,.78);
text-decoration:none;
border-bottom:1px solid rgba(214,174,82,.35);
}
.js-breadcrumb a:hover{ color:#ffe39b; border-bottom-color:rgba(255,227,155,.70); }
.js-breadcrumb span:last-child{ color:rgba(214,174,82,.86); font-weight:760; }
.js-library-faq .js-sec-head{ margin-bottom:16px; }
.js-library-faq .js-sec-head p{ max-width:760px; }
@media(max-width:900px){
.js-blog-hero-card{ grid-template-columns:1fr; padding:20px; border-radius:22px; }
.js-blog-hero-card:before{ inset:10px; border-radius:18px; }
}
/* Mobile drawer search + article-bottom search */
.js-drawer-search{
padding:14px;
border:1px solid rgba(208,162,51,.18);
border-radius:16px;
background:linear-gradient(180deg,rgba(12,14,16,.74),rgba(8,10,12,.58));
box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.js-drawer-search-label{
display:block;
margin:0 0 8px;
font-size:12px;
font-weight:800;
letter-spacing:.12em;
text-transform:uppercase;
color:rgba(255,233,154,.92);
}
.js-drawer-search-row{
display:flex;
gap:8px;
align-items:center;
}
.js-drawer-search-input,
.js-article-search-input{
min-width:0;
flex:1 1 auto;
border:1px solid rgba(208,162,51,.24);
border-radius:14px;
background:rgba(0,0,0,.28);
color:var(--js-text);
padding:11px 12px;
outline:none;
}
.js-drawer-search-input:focus,
.js-article-search-input:focus{
border-color:rgba(255,226,154,.50);
box-shadow:0 0 0 3px rgba(208,162,51,.10);
}
.js-drawer-search-btn,
.js-article-search-btn{
flex:0 0 auto;
border:1px solid rgba(208,162,51,.30);
border-radius:14px;
background:linear-gradient(180deg,rgba(208,162,51,.20),rgba(0,0,0,.42));
color:rgba(255,233,154,.96);
font-weight:800;
padding:11px 14px;
cursor:pointer;
}
.js-article-search{
margin:24px 0 4px;
padding:20px;
border-radius:var(--js-radius-lg);
border:1px solid rgba(208,162,51,.18);
background:linear-gradient(135deg,rgba(16,18,19,.72),rgba(7,8,9,.68));
box-shadow:0 16px 42px rgba(0,0,0,.26);
position:relative;
overflow:hidden;
}
.js-article-search::before{
content:"";
position:absolute;
inset:0;
background:radial-gradient(460px 260px at 88% 0%,rgba(208,162,51,.13),transparent 62%);
pointer-events:none;
}
.js-article-search > *{ position:relative; z-index:1; }
.js-article-search-kicker{
margin:0 0 6px;
font-size:12px;
font-weight:900;
letter-spacing:.14em;
color:rgba(255,233,154,.88);
}
.js-article-search h2{
margin:0 0 8px;
font-size:clamp(19px,2.2vw,26px);
line-height:1.16;
}
.js-article-search p{
margin:0 0 14px;
color:var(--js-muted);
max-width:68ch;
}
.js-article-search-form{
display:flex;
gap:10px;
max-width:680px;
}
@media (max-width:560px){
.js-article-search{ padding:16px; }
.js-article-search-form{ flex-direction:column; }
.js-article-search-btn{ width:100%; }
}
/* ===== Homepage full-design staging patch: entity + cluster sections ===== */
.js-home-entity .js-entity-panel{
position:relative;
overflow:hidden;
padding:clamp(20px,3vw,34px);
border-radius:26px;
background:
radial-gradient(circle at 12% 18%,rgba(214,174,82,.13),transparent 32%),
linear-gradient(135deg,rgba(12,15,14,.96),rgba(5,7,7,.98));
}
.js-home-entity .js-entity-panel:before{
content:"";
position:absolute;
inset:14px;
border:1px solid rgba(214,174,82,.11);
border-radius:20px;
pointer-events:none;
}
.js-home-entity h2{
position:relative;
margin:0 0 12px;
font-size:clamp(25px,2.6vw,36px);
line-height:1.12;
letter-spacing:-.03em;
}
.js-home-entity p{
position:relative;
margin:0;
max-width:92ch;
color:rgba(245,239,222,.78);
font-size:clamp(14.5px,1.02vw,16.5px);
line-height:1.82;
}
.js-home-cluster{ padding-top:18px; padding-bottom:18px; }
.js-cluster-card{
display:grid;
grid-template-columns:minmax(0,.92fr) minmax(300px,1.08fr);
gap:clamp(18px,3vw,34px);
align-items:start;
padding:clamp(18px,2.6vw,30px);
border-radius:24px;
background:
radial-gradient(circle at 8% 10%,rgba(214,174,82,.10),transparent 30%),
linear-gradient(180deg,rgba(12,15,14,.90),rgba(5,7,7,.96));
}
.js-cluster-copy h2{
margin:0 0 10px;
font-size:clamp(22px,2.2vw,31px);
line-height:1.14;
letter-spacing:-.025em;
}
.js-cluster-copy p{
margin:0;
max-width:62ch;
color:rgba(245,239,222,.74);
line-height:1.74;
font-size:14.5px;
}
.js-cluster-links{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:10px;
}
.js-cluster-link{
display:flex;
flex-direction:column;
justify-content:center;
min-height:58px;
padding:12px 13px;
border-radius:16px;
border:1px solid rgba(214,174,82,.17);
background:linear-gradient(135deg,rgba(255,255,255,.045),rgba(0,0,0,.18));
color:rgba(245,239,222,.86);
text-decoration:none;
font-size:13px;
font-weight:780;
line-height:1.35;
}
.js-cluster-link em,
.js-cluster-link small{
margin-top:4px;
color:rgba(245,239,222,.58);
font-style:normal;
font-size:11.5px;
font-weight:650;
}
a.js-cluster-link:hover,
a.js-cluster-link:focus-visible{
transform:translateY(-1px);
border-color:rgba(214,174,82,.34);
color:rgba(255,244,210,.96);
background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(0,0,0,.16));
}
.js-cluster-link--pending{
border-style:dashed;
color:rgba(245,239,222,.62);
background:linear-gradient(135deg,rgba(255,255,255,.026),rgba(0,0,0,.12));
}
.js-cluster-link--pending small{
color:rgba(214,174,82,.72);
}
@media(max-width:900px){
.js-cluster-card{ grid-template-columns:1fr; }
.js-cluster-links{ grid-template-columns:1fr; }
}
@media(max-width:540px){
.js-home-entity .js-entity-panel,
.js-cluster-card{ border-radius:20px; padding:18px; }
.js-home-cluster{ padding-top:12px; padding-bottom:12px; }
}
/* ===== Home Tools Pattern Cards: Weton / Jodoh / Kalender / Aksara ===== */
.js-tool {
min-height: 268px;
background:
radial-gradient(circle at 14% 0%, rgba(227,181,68,.16), transparent 38%),
linear-gradient(135deg, rgba(8,10,10,.98), rgba(11,12,10,.94)),
var(--js-surface2);
}
.js-tool > .js-tool-pattern {
position: absolute;
z-index: 0;
top: 52%;
right: -150px;
width: 340px;
max-width: none;
height: auto;
transform: translateY(-50%);
opacity: .62;
object-fit: contain;
pointer-events: none;
user-select: none;
filter: saturate(1.02) contrast(1.05) drop-shadow(0 18px 28px rgba(0,0,0,.34));
}
.js-tool::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: inherit;
pointer-events: none;
background:
linear-gradient(90deg, rgba(5,6,7,.99) 0%, rgba(5,6,7,.95) 42%, rgba(5,6,7,.60) 70%, rgba(5,6,7,.18) 100%),
radial-gradient(circle at 10% 8%, rgba(227,181,68,.14), transparent 42%);
opacity: 1;
filter: none;
mix-blend-mode: normal;
}
.js-tool::before {
z-index: 2;
}
.js-tool > *:not(.js-tool-pattern) {
position: relative;
z-index: 3;
}
.js-tool--weton .js-tool-pattern {
top: 55%;
right: -155px;
width: 330px;
opacity: .66;
}
.js-tool--jodoh .js-tool-pattern {
top: 52%;
right: -150px;
width: 340px;
opacity: .62;
}
.js-tool--kalender .js-tool-pattern {
top: 52%;
right: -150px;
width: 350px;
opacity: .60;
}
.js-tool--aksara .js-tool-pattern {
top: 58%;
right: -150px;
width: 330px;
opacity: .60;
}
@media (max-width: 1000px) {
.js-tool > .js-tool-pattern {
right: -144px;
width: 350px;
opacity: .58;
}
.js-tool--weton .js-tool-pattern {
right: -150px;
width: 336px;
}
.js-tool--kalender .js-tool-pattern {
right: -152px;
width: 358px;
}
}
@media (max-width: 540px) {
.js-tool {
min-height: 268px;
}
.js-tool > .js-tool-pattern {
top: 52%;
right: -145px;
bottom: auto;
width: 348px;
max-width: none;
transform: translateY(-50%);
opacity: .56;
}
.js-tool--weton .js-tool-pattern {
top: 55%;
right: -150px;
width: 334px;
opacity: .60;
}
.js-tool--jodoh .js-tool-pattern {
top: 52%;
right: -145px;
width: 346px;
}
.js-tool--kalender .js-tool-pattern {
top: 52%;
right: -148px;
width: 356px;
}
.js-tool--aksara .js-tool-pattern {
top: 58%;
right: -145px;
width: 338px;
}
.js-tool::after {
background:
linear-gradient(90deg, rgba(5,6,7,.99) 0%, rgba(5,6,7,.95) 46%, rgba(5,6,7,.58) 72%, rgba(5,6,7,.20) 100%),
radial-gradient(circle at 8% 8%, rgba(227,181,68,.14), transparent 42%);
}
}
@media (max-width: 360px) {
.js-tool > .js-tool-pattern {
right: -165px;
opacity: .52;
}
}
/* ===== JavaSense mobile polish: header, hero CTA, today card ===== */
@media (max-width: 640px) {
/* Header texture stays branded, but less noisy on small screens. */
.js-page .js-nav::before {
opacity: .11 !important;
filter: contrast(1.02) sepia(.75) saturate(3.6) hue-rotate(14deg) brightness(.76) !important;
}
/* Hero CTA: keep labels on one line with a slightly slimmer premium pill. */
.js-hero .js-cta-row {
gap: 8px !important;
}
.js-hero .js-cta-row .btn.js-btn.js-dexbtn--md {
min-height: 44px !important;
padding: .58em 1.42em !important;
font-size: .92em !important;
letter-spacing: .01em !important;
}
.js-hero .js-cta-row .btn.js-btn .txt-1,
.js-hero .js-cta-row .btn.js-btn .txt-2 {
flex-wrap: nowrap !important;
row-gap: 0 !important;
gap: .28em !important;
white-space: nowrap !important;
}
/* Today summary: remove the redundant top mark on mobile to shorten the card. */
.js-card--todaySolo .js-todaybar--ecard .icon {
display: none !important;
}
.js-card--todaySolo .js-todaybar--ecard .infotop {
padding-top: 42px !important;
padding-bottom: 20px !important;
}
.js-card--todaySolo .js-todaybar--ecard .title-text {
margin-top: 0 !important;
}
}
@media (max-width: 420px) {
.js-hero .js-cta-row .btn.js-btn.js-dexbtn--md {
padding-inline: 1.18em !important;
font-size: .86em !important;
}
}
/* ===== JavaSense real-device fix: keep hero CTA buttons in one row on mobile ===== */
@media (max-width: 640px) {
.js-hero .js-cta-row {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
align-items: stretch !important;
gap: 8px !important;
width: 100% !important;
max-width: 100% !important;
}
.js-hero .js-cta-row .btn-wrapper {
display: flex !important;
width: 100% !important;
min-width: 0 !important;
}
.js-hero .js-cta-row .btn.js-btn.js-dexbtn--md {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
min-height: 42px !important;
padding: .56em .58em !important;
font-size: .78em !important;
line-height: 1 !important;
letter-spacing: 0 !important;
--border-radius: 22px;
}
.js-hero .js-cta-row .btn.js-btn .txt-wrapper,
.js-hero .js-cta-row .btn.js-btn .txt-1,
.js-hero .js-cta-row .btn.js-btn .txt-2 {
width: 100% !important;
min-width: 0 !important;
flex-wrap: nowrap !important;
white-space: nowrap !important;
gap: .18em !important;
row-gap: 0 !important;
}
.js-hero .js-cta-row .btn.js-btn .btn-word {
gap: 0 !important;
white-space: nowrap !important;
}
}
@media (max-width: 380px) {
.js-hero .js-cta-row {
gap: 7px !important;
}
.js-hero .js-cta-row .btn.js-btn.js-dexbtn--md {
min-height: 40px !important;
padding-inline: .46em !important;
font-size: .72em !important;
}
.js-hero .js-cta-row .btn.js-btn .txt-1,
.js-hero .js-cta-row .btn.js-btn .txt-2 {
gap: .14em !important;
}
}