/* Redesign kartu dan hero, dimuat setelah hp-v2.css */
html{scroll-behavior:smooth}
main .hero{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);gap:clamp(32px,5vw,72px);align-items:center;text-align:left;min-height:auto;padding:136px max(24px,calc((100vw - 1240px)/2)) 64px}
main .hero .hero-content{max-width:none;margin:0;text-align:left}
main .hero h1{font-size:clamp(38px,5.2vw,62px);line-height:1.08;letter-spacing:-.03em;margin-left:0;margin-right:0}
main .hero .subtitle{margin-left:0;margin-right:0;max-width:52ch}
main .hero .cta-buttons{justify-content:flex-start;flex-wrap:wrap}
.hero-showcase{position:relative;z-index:1;border:1px solid rgba(255,255,255,.1);border-radius:24px;padding:22px;background:linear-gradient(160deg,rgba(139,92,246,.14),rgba(255,255,255,.03) 55%,rgba(236,72,153,.1));backdrop-filter:blur(10px)}
.hero-showcase .showcase-label{margin:0 0 14px;font-size:13px;font-weight:600;color:#c4b5fd}
.showcase-row{display:block;padding:14px 16px;border-radius:14px;text-decoration:none;color:inherit;background:rgba(7,7,15,.45);border:1px solid rgba(255,255,255,.06);transition:border-color .2s,transform .2s}
.showcase-row+.showcase-row{margin-top:10px}
.showcase-row:hover{border-color:rgba(167,139,250,.55);transform:translateY(-2px)}
.showcase-row strong{display:block;font-size:15px;color:#fff;margin-bottom:4px}
.showcase-row span{display:block;font-size:13px;line-height:1.5;color:#a9a7bd}
.apps-section .container{max-width:1240px}
.apps-section .section-header{margin-bottom:12px}
.cat-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}
.cat-nav a{padding:8px 16px;border-radius:999px;font-size:14px;font-weight:600;color:#e4e2f2;text-decoration:none;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);transition:border-color .2s,background .2s}
.cat-nav a:hover{border-color:rgba(167,139,250,.6);background:rgba(139,92,246,.16)}
.apps-section .apps-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px;max-width:none}
.apps-grid .cat-head{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;margin-top:32px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.09);scroll-margin-top:104px}
.apps-grid .cat-head h3{margin:0;font-size:22px;font-weight:700;color:#fff;letter-spacing:-.01em}
.apps-grid .cat-head p{margin:0;font-size:14px;color:#a9a7bd}
.apps-grid>.app-card,.apps-grid>.app-card.highlight{display:flex;flex-direction:column;grid-column:span 3;min-width:0;height:100%;border-radius:20px;overflow:hidden}
.apps-grid>.app-card.highlight{grid-column:span 6}
.apps-grid>.app-card .app-thumbnail{width:100%;height:auto;aspect-ratio:1/1;background:#0b0a18;flex:none;overflow:hidden}
.apps-grid>.app-card.highlight .app-thumbnail{aspect-ratio:2/1}
.apps-grid>.app-card .app-thumbnail img{display:block;width:100%;height:100%;object-fit:cover}
.apps-grid>.app-card .app-content{display:flex;flex-direction:column;flex:1;padding:18px;gap:0;width:auto}
.apps-grid>.app-card .app-status{align-self:flex-start;margin-bottom:12px}
.apps-grid>.app-card .app-header{gap:10px;margin-bottom:10px;align-items:center}
.apps-grid>.app-card .app-icon{width:36px;height:36px;flex:none}
.apps-grid>.app-card .app-header h3{font-size:18px;line-height:1.25}
.apps-grid>.app-card .app-content>p{font-size:14px;line-height:1.55;margin:0 0 16px}
.apps-grid>.app-card .app-actions{margin-top:auto;display:flex;flex-direction:column;gap:8px}
.apps-grid>.app-card .app-actions a{width:100%;text-align:center;box-sizing:border-box}
@media (max-width:1120px){.apps-grid>.app-card{grid-column:span 6}.apps-grid>.app-card.highlight{grid-column:span 12}}
@media (max-width:920px){main .hero{grid-template-columns:minmax(0,1fr);padding-top:112px}}
@media (max-width:600px){main .hero{padding-left:16px;padding-right:16px}.apps-grid>.app-card,.apps-grid>.app-card.highlight{grid-column:span 12}.apps-grid .cat-head h3{font-size:20px}}@media (min-width:601px) and (max-width:1120px){.apps-grid>.app-card:not(.highlight) .app-thumbnail{aspect-ratio:4/3}.apps-grid>.app-card:not(.highlight) .app-thumbnail img{object-fit:contain}}