/* Landing (Beranda) — Neo Brutalism. Token dari /theme.css */

.hidden{display:none !important;}

.k-loader{min-height:100vh;display:flex;align-items:center;justify-content:center;}
.k-loader-dot{
    width:46px;height:46px;background:var(--accent-2);border:var(--bw) solid var(--ink);
    box-shadow:5px 5px 0 var(--ink);animation:k-flip 1.1s var(--ease) infinite;
}
@keyframes k-flip{
    0%{transform:rotate(0) scale(1);background:var(--accent-2);}
    50%{transform:rotate(180deg) scale(.8);background:var(--accent-3);}
    100%{transform:rotate(360deg) scale(1);background:var(--accent-2);}
}

.k-page-tight{padding-top:30px;padding-bottom:30px;}

/* ---------- hero ---------- */
.k-hero{padding:68px 20px 36px;text-align:left;position:relative;isolation:isolate;}

.k-hero::before,.k-hero::after{content:"";position:absolute;border:var(--bw) solid var(--ink);z-index:-1;}
.k-hero::before{
    width:84px;height:84px;right:6%;top:46px;background:var(--accent-3);border-radius:50%;
    box-shadow:5px 5px 0 var(--ink);animation:k-float 6s ease-in-out infinite;
}
.k-hero::after{
    width:64px;height:64px;right:16%;top:150px;background:var(--accent-4);
    box-shadow:5px 5px 0 var(--ink);animation:k-float 7s ease-in-out -2s infinite reverse;
}
@keyframes k-float{
    0%,100%{transform:translateY(0) rotate(0);}
    50%{transform:translateY(-16px) rotate(12deg);}
}
@media (max-width:640px){.k-hero::before,.k-hero::after{display:none;}}

.k-hero-badge{
    display:inline-flex;align-items:center;gap:9px;padding:7px 14px;
    border:var(--bw) solid var(--ink);background:var(--accent);color:#fff;
    font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
    box-shadow:4px 4px 0 var(--ink);margin-bottom:22px;transform:rotate(-1.5deg);
    text-shadow:1px 1px 0 var(--ink);
}
.k-hero-badge .k-brand-dot{width:14px;height:14px;box-shadow:none;background:var(--accent-2);}

.k-hero-desc{max-width:580px;margin-top:20px;font-size:17px;}
.k-hero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:30px;margin-bottom:26px;}

/* hero anim masuk berurutan */
#content:not(.hidden) .k-hero > *{animation:k-rise .7s var(--ease) both;}
#content:not(.hidden) .k-hero > *:nth-child(1){animation-delay:.05s;}
#content:not(.hidden) .k-hero > *:nth-child(2){animation-delay:.14s;}
#content:not(.hidden) .k-hero > *:nth-child(3){animation-delay:.23s;}
#content:not(.hidden) .k-hero > *:nth-child(4){animation-delay:.32s;}
#content:not(.hidden) .k-hero > *:nth-child(5){animation-delay:.41s;}
@keyframes k-rise{from{opacity:0;transform:translateY(26px);}to{opacity:1;transform:none;}}

/* ---------- ticker ---------- */
.k-ticker{
    overflow:hidden;background:var(--ink);color:var(--accent-2);
    border-top:var(--bw) solid var(--ink);border-bottom:var(--bw) solid var(--ink);
    transform:rotate(-1deg);margin:26px -10px;
}
.k-ticker-track{
    display:flex;gap:34px;width:max-content;padding:12px 0;
    font-weight:700;font-size:15px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
    animation:k-marquee 26s linear infinite;
}
.k-ticker-track span:nth-child(even){color:var(--accent-3);}
.k-ticker:hover .k-ticker-track{animation-play-state:paused;}
@keyframes k-marquee{to{transform:translateX(-50%);}}

/* ---------- quick access ---------- */
.k-quick{
    display:flex;flex-direction:column;align-items:flex-start;gap:14px;
    font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:.03em;
}
.k-quick svg{
    width:42px;height:42px;padding:9px;color:var(--ink);background:var(--card);
    border:var(--bw) solid var(--ink);border-radius:var(--radius-sm);box-shadow:3px 3px 0 var(--ink);
    transition:transform .35s var(--spring);
}
.k-quick:hover svg{transform:rotate(-10deg) scale(1.12);}

@media (max-width:560px){
    .k-hero{padding:46px 16px 28px;}
    .k-hero-cta .k-btn{flex:1;}
}

/* ---------- animasi neo brutalism tambahan ---------- */
.k-h1{position:relative;display:inline-block;}
.k-h1::after{
    content:"";position:absolute;left:-4px;right:-4px;bottom:2px;height:.34em;z-index:-1;
    background:var(--accent-2);transform-origin:left center;transform:scaleX(0) skewX(-12deg);
    animation:k-underline .8s var(--ease) .55s forwards;
}
@keyframes k-underline{to{transform:scaleX(1) skewX(-12deg);}}

.k-hero-badge{animation:k-badge-pop .7s var(--spring) .1s backwards;}
@keyframes k-badge-pop{from{opacity:0;transform:rotate(-8deg) scale(.6);}to{opacity:1;transform:rotate(-1.5deg) scale(1);}}

.k-btn-primary{position:relative;overflow:hidden;}
.k-btn-primary::after{
    content:"";position:absolute;top:0;left:-70%;width:40%;height:100%;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
    transform:skewX(-20deg);animation:k-shine 3.6s ease-in-out 1.4s infinite;
}
@keyframes k-shine{0%,60%{left:-70%;}100%{left:140%;}}

.k-quick:hover{transform:translate(-3px,-3px) rotate(-1deg);box-shadow:9px 9px 0 var(--ink);}
.k-stat-value{transition:transform .3s var(--spring);}
.k-card:hover .k-stat-value{transform:scale(1.06) rotate(-1deg);}

@media (prefers-reduced-motion:reduce){
    .k-h1::after{animation:none;transform:scaleX(1) skewX(-12deg);}
    .k-hero-badge,.k-btn-primary::after{animation:none;}
}

/* ---------- v4: kategori, tombol cari, modern touches ---------- */
.k-bento-cats{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px}
.k-cat{display:flex;flex-direction:column;gap:2px;padding:16px;cursor:pointer}
.k-cat-n{font-family:var(--font-mono);font-size:34px;font-weight:700;line-height:1;letter-spacing:-.03em}
.k-cat-name{margin-top:8px;font-size:14px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;word-break:break-word}
.k-cat-sub{font-family:var(--font-mono);font-size:11px;font-weight:700;color:var(--text-2)}
.k-cat::after{content:"\2192";position:absolute;right:14px;top:12px;font-weight:700;font-size:18px;opacity:0;transform:translateX(-8px);transition:opacity .2s,transform .25s var(--spring)}
.k-cat:hover::after{opacity:1;transform:none}
.k-btn-light{background:#fff;color:var(--ink)}
.k-btn-light:hover{background:#FEF9C3}
.k-kbd{font-family:var(--font-mono);font-size:10px;font-weight:700;padding:2px 6px;border:2px solid var(--ink);border-radius:5px;background:var(--accent-2);text-transform:none;letter-spacing:0}
@media (max-width:700px){.k-kbd{display:none}}
@media (max-width:560px){
    .k-bento-cats{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
    .k-cat-n{font-size:28px}
    .k-ticker{margin:20px -10px}
    .k-ticker-track{font-size:13px}
    .k-hero-cta .k-btn-light{flex:1 1 100%}
}