@font-face{font-family:Lexend;src:url(download-fonts/LexendDeca-Medium.woff2);font-weight:500;font-display:swap}
@font-face{font-family:Lexend;src:url(download-fonts/LexendDeca-SemiBold.woff2);font-weight:600;font-display:swap}
@font-face{font-family:Open;src:url(download-fonts/OpenSans-Regular.woff2);font-weight:400;font-display:swap}
@font-face{font-family:Open;src:url(download-fonts/OpenSans-SemiBold.woff2);font-weight:600;font-display:swap}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f6f6f6;color:#292929;font:15px/1.55 Open,Arial,sans-serif}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}[hidden]{display:none!important}.container{width:94%;max-width:1720px;margin:auto}header.container {
    display: flex; align-items: center; gap: 40px; min-height: 86px;
    position: relative; isolation: isolate;
}
header::before {
    content: ""; position: absolute; inset: 0 calc((100% - 100vw) / 2);
    background: white; z-index: -1;
}
.brand {
    display: flex; align-items: center; gap: 9px; white-space: nowrap;
    font: 600 32px Lexend, sans-serif; letter-spacing: -1.6px;
}
.brand div > span { color: #303030; }
.brand-icon {
    color: #205dec; font: 600 40px Lexend, sans-serif;
    width: 42px; height: 48px; position: relative;
}
.brand-icon span { font-size: 20px; position: absolute; right: 0; top: -3px; }
.search {
    display: flex; align-items: center; flex: 1; min-width: 160px;
    border: 1px solid #e1e1e1; border-radius: 40px;
    height: 58px; background: white; padding: 4px;
}
.search:focus-within { border-color: #205dec; }
.search input {
    border: 0; background: transparent; min-width: 0; width: 100%;
    padding: 10px 15px; outline: none; font-size: 17px;
}
.search button {
    display: grid; place-items: center; flex: none; width: 48px; height: 48px;
    border: 0; border-radius: 50%; background: #205dec; color: white;
}
.header-note {
    display: flex; flex: none; gap: 12px; align-items: center;
    border: 0; background: transparent; padding: 0; text-align: left;
}
.header-note > svg { width: 44px; height: 44px; flex: none; color: #363636; }
.header-note strong { display: block; font: 500 17px Lexend, sans-serif; }
.header-note small { display: block; color: #2563ff; font-size: 17px; margin-top: 3px; }
.catalog-nav { background: #e6efff; border: 0; }
.nav-content { display: flex; align-items: center; gap: 38px; min-height: 76px; padding: 10px 0; }
.all-apps { display: inline-flex; align-items: center; flex: none; gap: 12px; background: white; border-radius: 40px; padding: 4px 20px 4px 4px; color: #626262; font-size: 18px; font-weight: 600; }
.category-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; color: white; background: #2860ed; }
.category-icon svg { width: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-filter, .guide-open, .text-button { border: 0; background: none; padding: 12px 0; }
.nav-links button { white-space: nowrap; font-size: 17px; font-weight: 600; color: #373737; }
.nav-links .active { color: #205dec; }
.nav-actions { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav-circle { display: grid; place-items: center; position: relative; width: 52px; height: 52px; flex: none; border: 0; border-radius: 50%; background: white; color: #333; padding: 12px; }
.nav-circle svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.nav-circle:hover { color: #205dec; }
.nav-circle.blue { background: #205dec; color: white; }
.nav-download { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; }
.nav-count { position: absolute; right: -5px; top: -4px; min-width: 23px; height: 23px; padding: 0 5px; display: grid; place-items: center; border-radius: 20px; background: white; color: #205dec; font-size: 12px; font-weight: 400; box-shadow: 1px 2px 5px #23334a18; }
.breadcrumbs{font-size:13px;color:#888;padding:20px 0}.breadcrumbs span{padding:0 10px}.intro{display:flex;align-items:center;justify-content:space-between;background:#e8effd;border-radius:12px;min-height:290px;padding:34px 60px;overflow:hidden;position:relative}.intro p,.eyebrow{font-size:12px;letter-spacing:2px;color:#205dec;font-weight:600}.intro h1{font:600 clamp(26px,2.5vw,42px)/1.25 Lexend,sans-serif;letter-spacing:-1px;margin:12px 0}.intro>div>span{color:#647086}.intro a{display:block;margin-top:20px;color:#205dec;font-weight:600}.hero-art{display:flex;align-items:center;gap:35px;padding-right:70px}.hero-icon{width:160px;height:160px;background:#205dec;border-radius:35px;box-shadow:18px 22px 35px #1a54c323;color:white;display:flex;align-items:center;justify-content:center;font:600 90px Lexend;position:relative;transform:rotate(-8deg)}.hero-icon span{font:500 11px Lexend;position:absolute;bottom:14px;letter-spacing:2px}.platform-stack>div{background:#ffffffd9;border-radius:8px;margin:15px 0;padding:16px 22px;width:170px;font:500 18px Lexend}.platform-stack span{float:right;color:#205dec}.section-title{display:flex;align-items:center;justify-content:space-between;margin:34px 0 14px}h2{font:500 30px Lexend;margin:0}#reset{background:#e2ebff;border:0;border-radius:50px;color:#155bfa;padding:13px 24px;font-weight:600}#reset span{margin-left:12px;font-size:22px}.toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;color:#818181;font-size:13px}.toolbar select{border:0;background:none;color:#333;padding:7px}.grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.app-card{background:white;border-radius:12px;overflow:hidden;transition:box-shadow .2s}.app-card:hover{box-shadow:0 8px 30px #19345f12}.artwork{height:290px;position:relative;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px}.badge{position:absolute;top:24px;left:24px;border-radius:20px;background:#1e60ef;color:#fff;padding:5px 12px;font-size:11px;font-weight:600}.app-icon{width:128px;height:128px;display:grid;place-items:center;border-radius:29px;background:linear-gradient(140deg,#428aff,#174ecc);color:white;font:600 65px Lexend;box-shadow:0 15px 28px #2053ba26;position:relative;border:5px solid #ffffff55}.app-icon span{font-size:24px;position:absolute;right:10px;top:6px;opacity:.65}.tone-1 .app-icon{background:linear-gradient(140deg,#3eb19d,#137369)}.tone-2 .app-icon{background:linear-gradient(140deg,#a287db,#6642b3)}.tone-3 .app-icon{background:linear-gradient(140deg,#f9b165,#cc7228)}.tone-4 .app-icon{background:linear-gradient(140deg,#63a5c9,#1b658b)}.art-caption{font:500 10px Lexend;letter-spacing:2px;color:#8490a4}.card-body{padding:18px 20px 16px}h3{font:500 17px/1.45 Lexend;margin:0 0 7px;min-height:49px}.school{color:#999;margin:0 0 12px;font-size:14px;min-height:44px}.platform-labels{display:flex;gap:7px}.platform-labels span{font-size:11px;background:#f3f5f8;border-radius:4px;padding:3px 7px;color:#68748b}.status{font-size:12px;color:#7f8999;margin:13px 0}.ready{color:#327e43}.download{display:block;width:100%;border:0;border-radius:6px;padding:14px 7px;text-align:center;font-size:14px;font-weight:600}.android{background:#205dec;color:white}.android:hover{background:#104bd2}.ios{background:#edf2ff;color:#205dec;margin-top:8px}.app-id{font-size:12px;margin:14px 0 0}.app-id span{color:#aaa}.help{margin:45px 0;background:#e9effa;border-radius:12px;padding:30px;display:flex;justify-content:space-between;align-items:center}.help h2{font-size:22px}.help p{color:#6f7b91;margin-bottom:0}.help button{color:#205dec;font-weight:600}footer.container{padding:30px 0;display:flex;justify-content:space-between;color:#7e8797}footer strong{color:#333}dialog{border:0;border-radius:16px;padding:34px;width:min(520px,90%);box-shadow:0 20px 80px #0003}dialog::backdrop{background:#13243e66}dialog h2{font-size:24px;margin:0 24px 20px 0}#dialog-body{line-height:1.7}#dialog-body h3{min-height:0;margin-top:18px}.close{position:absolute;right:18px;top:12px;border:0;background:none;font-size:28px}.dialog-done{margin-top:25px;background:#205dec;color:white;border:0;border-radius:6px;padding:12px 25px}:focus-visible{outline:3px solid #8ab0ff;outline-offset:3px}.detail{background:white;padding:32px;border-radius:12px}.detail>a{color:#205dec}.detail-layout{display:grid;grid-template-columns:1fr 1fr;gap:65px;margin-top:32px}.detail h1{font:500 32px Lexend}.detail-art{background:#f5f8ff;border-radius:14px;display:grid;place-items:center;min-height:420px}.detail-art .app-icon{width:220px;height:220px;font-size:115px}.download-option{display:grid;grid-template-columns:1fr auto;gap:8px;padding:16px 0;border-bottom:1px solid #eee}.download-option>span{font-size:13px;color:#999}.download-option .download{grid-column:1/-1}.text-button{color:#205dec}
@media(max-width:1100px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-note{display:none}.hero-art{padding:0;gap:20px}.intro{padding:30px}.platform-stack{display:none}}
@media(max-width:650px){header.container{flex-wrap:wrap;gap:16px;padding:20px 0}.search{flex-basis:100%;max-width:none}.brand{font-size:23px}.intro{min-height:230px;padding:24px}.hero-art{display:none}.intro h1{font-size:27px}.intro>div>span{font-size:13px}.section-title{gap:12px}h2{font-size:22px}#reset{padding:9px 12px;font-size:12px}.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.artwork{height:210px}.app-icon{width:94px;height:94px;font-size:45px}.badge{top:14px;left:12px;font-size:9px;padding:4px 8px}.card-body{padding:10px 12px 14px}h3{font-size:13px;min-height:57px}.school{font-size:12px;min-height:55px}.status{font-size:10px}.download{font-size:12px}.help{padding:22px;display:block}.help h2{font-size:20px}footer.container{font-size:11px}.detail{padding:20px}.detail-layout{grid-template-columns:1fr;gap:20px}.detail-art{min-height:200px}.detail-art .app-icon{width:130px;height:130px;font-size:70px}.detail h1{font-size:25px}}

@media (min-width: 651px) and (max-width: 1400px) {
    header.container { gap: 24px; }
    .brand { font-size: 26px; }
    .header-note strong, .header-note small { font-size: 14px; }
    .header-note > svg { width: 36px; }
}
@media (max-width: 1100px) { .header-note { display: none; } }
@media (max-width: 650px) {
    header.container { gap: 14px; padding: 18px 0; }
    .search { flex-basis: 100%; height: 54px; }
    .search button { width: 44px; height: 44px; }
    .search input { font-size: 14px; }
}

@media (max-width: 1200px) {
    .nav-content { gap: 20px; flex-wrap: wrap; }
    .nav-links { gap: 20px; }
    .nav-actions { gap: 12px; }
    .nav-download > span:last-child { display: none; }
}
@media (max-width: 900px) {
    .nav-content { gap: 12px; }
    .nav-links { order: 3; width: 100%; overflow-x: auto; padding-bottom: 2px; }
    .nav-links button { font-size: 14px; }
    .all-apps { font-size: 15px; padding-right: 14px; gap: 8px; }
    .category-icon { width: 38px; height: 38px; }
    .nav-circle { width: 40px; height: 40px; padding: 8px; }
    .nav-circle svg { width: 24px; height: 24px; }
    .nav-actions { gap: 10px; }
}
.feature-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 34px; }
.exam-banner { position: relative; min-height: 570px; overflow: hidden; border-radius: 12px; background: radial-gradient(ellipse at 50% 115%,#b471ac 0%,#6b316d 45%,#28102d 92%); }
.exam-banner-copy { position: relative; z-index: 3; text-align: center; padding: 46px 20px 0; color: white; }
.exam-banner h1 { font: 600 clamp(27px,2.6vw,44px)/1.2 Lexend,sans-serif; margin: 4px 0 18px; letter-spacing: -.7px; }
.exam-banner-copy p { margin: 0 0 18px; color: #e2cfe0; font-size: 18px; }
.banner-button { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 24px; border: 0; border-radius: 6px; background: #205dec; color: white; font: 600 16px Open,sans-serif; position: relative; z-index: 3; }
.banner-button:hover { background: #164bc6; }
.exam-devices { position: absolute; width: 82%; height: 300px; bottom: 42px; left: 9%; }
.laptop-device { position: absolute; width: 70%; left: 0; bottom: 0; z-index: 2; filter: drop-shadow(0 14px 8px #130b353b); }
.laptop-screen { padding: 7px 7px 12px; background: linear-gradient(125deg,#81848e,#171c24 28%,#626671); border-radius: 10px 10px 3px 3px; }
.device-screen { height: 100%; border-radius: 4px; background: linear-gradient(140deg,#fafcff,#dbe6ff); color: #254378; display: flex; flex-direction: column; align-items: center; padding: 15px; overflow: hidden; }
.laptop-screen .device-screen { aspect-ratio: 1.55; }
.mini-brand { font: 600 10px Lexend; align-self: flex-start; color: #205dec; margin-bottom: 12px; }
.device-screen strong { font: 600 clamp(13px,1.1vw,19px) Lexend; margin-bottom: 4px; }
.device-screen > span:not(.mini-brand):not(.app-letter):not(.phone-notch) { font-size: 9px; }
.fake-field { background: white; border: 1px solid #d2dcf1; width: 65%; height: 18px; border-radius: 3px; margin-top: 8px; flex-shrink: 0; }
.fake-submit { background: #205dec; color: white; border-radius: 3px; padding: 4px; width: 65%; text-align: center; margin-top: 8px; font-size: 9px; }
.laptop-base { height: 12px; background: linear-gradient(#e2e2e7,#8a909b); width: 114%; margin-left: -7%; border-radius: 2px 2px 50% 50%; }
.tablet-device { width: 43%; height: 100%; position: absolute; top: -30px; right: 8%; padding: 7px; border-radius: 17px; background: linear-gradient(45deg,#777,#171b24); transform: rotate(3deg); box-shadow: 5px 10px 20px #180c3433; }
.tablet-device .device-screen { background: linear-gradient(135deg,#c7dcff,#f2eaff); align-items: stretch; }
.screen-lines { height: 28px; background: repeating-linear-gradient(transparent 0 9px,#8aa6d7 9px 12px); margin: 12px 0; }
.exam-options i { display: block; border-radius: 4px; background: #ffffffb0; height: 28px; margin-top: 12px; border-left: 5px solid #5886e0; }
.phone-device { z-index: 4; position: absolute; bottom: -5px; right: 0; width: 23%; height: 70%; padding: 5px; border-radius: 20px; background: linear-gradient(130deg,#ccd0dc,#292e3e 40%,#b3a5c3); box-shadow: 8px 15px 18px #210d352f; }
.phone-device .device-screen { border-radius: 15px; padding: 18px 6px 8px; background: #f5f8ff; }
.phone-notch { position: absolute; top: 10px; width: 35%; height: 7px; border-radius: 6px; background: #252933; }
.app-letter { background: #205dec; color: white; font: 600 28px Lexend; border-radius: 13px; padding: 6px 14px; margin: 14px 0; }
.phone-device strong { font-size: 10px; }
.vps-banners { display: grid; grid-template-rows: 1.7fr 1fr; gap: 24px; min-width: 0; }
.vps-main { background: linear-gradient(120deg,#f0dce0,#edd0d7 75%,#d9b9c5); position: relative; overflow: hidden; border-radius: 12px; min-height: 342px; }
.vps-copy { position: relative; padding: 40px 32px; z-index: 2; }
.vps-copy h2 { color: #63394d; font: 600 clamp(23px,2vw,35px)/1.25 Lexend; max-width: 65%; }
.vps-copy p { color: #7c5365; margin: 13px 0; font-size: 16px; }
.vps-steps { display: flex; gap: 6px; margin: 16px 0 18px; }
.vps-steps span { display: flex; flex-direction: column; align-items: center; background: #fff; padding: 6px 11px; border-radius: 12px; font-size: 11px; color: #888; }
.vps-steps b { font: 500 23px Lexend; color: #333; }
.server-art { position: absolute; right: 4%; top: 14%; width: 28%; height: 76%; transform: rotate(-9deg); }
.server-tower { position: absolute; width: 100%; bottom: 0; padding: 12px 10px; background: linear-gradient(115deg,#fff,#c3bad0); border-radius: 10px; box-shadow: 18px 16px 0 #bbaabd,25px 28px 25px #70446430; z-index: 1; }
.server-row { display: flex; align-items: center; gap: 6px; height: 36px; margin: 5px 0; background: linear-gradient(#47465d,#292d43); border-radius: 4px; padding: 8px; }
.server-row i { width: 4px; height: 4px; background: #7ff1cf; border-radius: 50%; box-shadow: 0 0 5px #7ff1cf; }
.server-row span { flex: 1; height: 10px; background: repeating-linear-gradient(90deg,#8d8a9c 0 2px,transparent 2px 5px); }
.server-row b { width: 5px; height: 5px; border: 1px solid #aaa; border-radius: 50%; }
.server-orbit { position: absolute; width: 240px; height: 240px; border: 1px solid #ffffff66; border-radius: 50%; top: -45px; left: -30px; }
.vps-small-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.vps-small-grid > div { border-radius: 12px; padding: 30px; position: relative; overflow: hidden; min-height: 204px; }
.vps-install { background: linear-gradient(110deg,#0e83d6,#4bb9ef); color: white; }
.vps-access { background: linear-gradient(120deg,#f3bb39,#f0cc4b); color: #574018; }
.vps-small-grid h3 { min-height: 0; font: 600 20px Lexend; position: relative; z-index: 2; max-width: 70%; }
.vps-small-grid p { font-size: 14px; position: relative; z-index: 2; max-width: 66%; margin: 12px 0 20px; }
.banner-button.light { background: white; color: #252525; font-size: 13px; font-weight: 400; min-height: 44px; padding: 10px 17px; }
.terminal-art { position: absolute; right: -10px; top: 52px; width: 34%; height: 115px; background: #163a63; transform: rotate(-12deg); border: 5px solid #d5efff; border-radius: 8px; box-shadow: 8px 10px 12px #07509e44; padding: 6px; }
.terminal-art span { display: block; color: #b9daef; font-size: 10px; }
.terminal-art b { color: #6aeedc; font: 600 25px monospace; }
.terminal-art i { display: block; height: 3px; margin: 8px 0; background: #86a5c2; width: 70%; }
.network-art { position: absolute; right: -4px; top: 45px; width: 32%; transform: rotate(12deg); }
.network-art div { background: #fff6dd; border: 5px solid #fff; border-radius: 18px; width: 92px; height: 92px; display: grid; place-items: center; font: 500 48px Lexend; color: #d8a02c; box-shadow: 8px 12px 12px #b8842744; }
.network-art span { display: block; text-align: center; font-size: 44px; color: white; }
@media (max-width: 1250px) {
    .feature-banners { gap: 18px; }
    .exam-banner { min-height: 520px; }
    .exam-banner-copy { padding-top: 32px; }
    .exam-banner-copy p { font-size: 15px; }
    .exam-devices { height: 235px; bottom: 58px; }
    .vps-copy { padding: 28px 22px; }
    .vps-copy h2 { font-size: 25px; }
    .vps-small-grid { gap: 16px; }
    .vps-small-grid > div { padding: 23px 18px; }
    .vps-small-grid h3 { font-size: 17px; }
}
@media (max-width: 950px) {
    .feature-banners { grid-template-columns: 1fr; }
    .exam-banner { min-height: 520px; }
    .exam-devices { height: 270px; max-width: 560px; left: 50%; transform: translateX(-50%); bottom: 30px; }
    .vps-banners { grid-template-rows: auto auto; }
    .vps-main { min-height: 342px; }
}
@media (max-width: 540px) {
    .exam-banner { min-height: 450px; }
    .exam-banner h1 { font-size: 28px; }
    .exam-banner-copy p { font-size: 14px; }
    .exam-devices { height: 205px; width: 84%; bottom: 30px; }
    .laptop-screen .device-screen { padding: 9px; }
    .mini-brand { margin-bottom: 6px; font-size: 8px; }
    .fake-field { height: 12px; margin-top: 5px; }
    .phone-device .device-screen { padding-top: 15px; }
    .app-letter { margin: 6px 0; font-size: 20px; padding: 5px 10px; }
    .phone-device strong { font-size: 8px; }
    .vps-copy h2 { font-size: 25px; max-width: 65%; }
    .vps-copy p { font-size: 13px; max-width: 65%; }
    .vps-small-grid { grid-template-columns: 1fr; }
    .vps-small-grid h3 { font-size: 20px; }
    .vps-small-grid > div { min-height: 195px; }
}
.card-body .school { min-height: 44px; margin-bottom: 5px; }
.location { color: #818b99; font-size: 13px; min-height: 20px; margin: 4px 0 14px; }
.device-label { color: #697482; font-size: 12px; margin: 0 0 6px; }
.platform-labels { margin-bottom: 18px; }
.app-id { color: #828282; line-height: 1.6; }
.app-id strong { color: #484848; font-weight: 600; }
.popup-download { margin-top: 12px; background: #205dec; color: white; padding: 15px; }
.popup-download:disabled { background: #edf1f8; color: #7c879a; cursor: not-allowed; }

/* Keep application identity together on every screen size. */
.app-card .card-body h3 {
    min-height: 0;
    margin-bottom: 5px;
}
.app-card .card-body .school {
    min-height: 0;
    margin: 0 0 4px;
}
.app-card .card-body .location {
    min-height: 0;
    margin: 0 0 14px;
    line-height: 1.5;
}

.mobile-support { display: none; }
@media (max-width: 650px) {
    .catalog-nav .nav-links,
    .catalog-nav .nav-actions,
    .feature-banners .vps-banners { display: none; }
    .catalog-nav .nav-content { min-height: 0; padding: 12px 0; }
    .mobile-support { display: flex; order: 2; margin-left: auto; gap: 10px; }
    .mobile-support button {
        display: grid; place-items: center; width: 42px; height: 42px; flex: none; border: 0;
        border-radius: 50%; padding: 9px; background: white;
        color: #205dec; font-weight: 600;
    }
    .mobile-support button:hover { background: #f3f7ff; }
}

.mobile-support svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Rapi-rapi (v2) */
.platform-labels span.off{opacity:.45;text-decoration:line-through}
.platform-labels span.on{background:#e8efff;color:#205dec}
.app-download.soon{background:#edf1f8;color:#7c879a}
.popup-download small{display:block;font-weight:400;font-size:12px;opacity:.85;margin-top:2px}
#download-feedback{min-height:1.5em;margin:12px 0 0;font-size:13px;color:#b42318}
#download-feedback.ok{color:#12804a}

/* Mobile: pencarian sekolah terfokus */
.m-finder{display:none}
@media(max-width:650px){
  .search{display:none}
  header.container{padding:14px 0}
  .breadcrumbs{display:none}
  body:not(.show-all) .feature-banners,body:not(.show-all) #catalog,body:not(.show-all) .help{display:none}
  .m-finder{display:block;margin:18px 0 8px;padding:26px 20px 22px;border-radius:18px;background:linear-gradient(160deg,#205dec,#1440b0);color:#fff;box-shadow:0 16px 40px #205dec33}
  .m-eyebrow{font:600 11px Lexend,sans-serif;letter-spacing:2px;color:#bcd0ff}
  .m-finder h1{font:600 24px/1.25 Lexend,sans-serif;letter-spacing:-.5px;margin:8px 0}
  .m-finder>p{margin:0 0 18px;color:#dbe5ff;font-size:14px}
  .m-search{display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:0 14px;box-shadow:0 0 0 4px #ffffff40,0 10px 24px #0a1f5c40}
  .m-search svg{width:22px;height:22px;fill:none;stroke:#205dec;stroke-width:2.2;flex:none}
  .m-search input{flex:1;min-width:0;border:0;outline:0;background:none;padding:17px 0;font-size:16px;color:#1d2433}
  .m-search input::placeholder{color:#7c879a;font-weight:600}
  .m-results{list-style:none;margin:12px 0 0;padding:6px;background:#fff;border-radius:14px;color:#1d2433}
  .m-results li+li{border-top:1px solid #eef1f6}
  .m-results button{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;padding:12px 8px;text-align:left}
  .m-results button:active{background:#f3f6fd;border-radius:10px}
  .m-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,#428aff,#174ecc);color:#fff;font:600 15px Lexend}
  .m-text{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
  .m-text strong{font-size:14px}
  .m-text small{font-size:12px;color:#7c879a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .m-tag{font-size:12px;font-weight:600;padding:6px 10px;border-radius:8px;background:#edf1f8;color:#7c879a;flex:none}
  .m-tag.ok{background:#205dec;color:#fff}
  .m-empty{margin:12px 0 0;background:#ffffff1f;border-radius:12px;padding:12px 14px;font-size:13px}
  .m-divider{display:flex;align-items:center;gap:12px;margin:20px 0 12px;color:#bcd0ff;font-size:12px}
  .m-divider::before,.m-divider::after{content:"";flex:1;height:1px;background:#ffffff33}
  .m-all{width:100%;border:1px solid #ffffff55;background:transparent;color:#fff;border-radius:12px;padding:13px;font-weight:600;font-size:14px}
  .m-all span{margin-left:6px}
  body.show-all .m-all{display:none}
  body.show-all .m-divider{display:none}
}

/* Minimalis (v5) */
body{background:#fafbfc}
header::before{border-bottom:1px solid #eceff3}
.mini-header{min-height:68px;gap:24px}
.mini-title{font:600 18px Lexend,sans-serif;letter-spacing:-.3px;white-space:nowrap}
.mini-header .search{margin-left:auto;max-width:380px;flex:1}
.mini-link{border:0;background:none;color:#205dec;font-weight:600;white-space:nowrap}
.mini-intro{padding:44px 0 8px}
.mini-intro h1{font:600 30px/1.2 Lexend,sans-serif;letter-spacing:-.6px;margin:0}
.mini-intro p{color:#6b7385;margin:8px 0 0}
.toolbar{margin:24px 0 18px}
.chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.chips .nav-filter{border:1px solid #e3e7ee;background:#fff;border-radius:99px;padding:7px 15px;font-size:13px;font-weight:600;color:#5b6474}
.chips .nav-filter.active{background:#1d2433;border-color:#1d2433;color:#fff}
.chips #count{margin-left:8px;color:#9aa2b1;font-size:13px}
.grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.app-card{border:1px solid #eceff3;box-shadow:none}
.app-card:hover{box-shadow:0 6px 20px #19345f0f;border-color:#dfe5ef}
.artwork{height:150px;background:#f5f7fb!important}
.artwork .app-icon{width:72px;height:72px;font-size:28px;border-radius:18px;border:0;box-shadow:none}
.app-icon span{display:none}
.art-caption{display:none}
.card-body h3{min-height:0;margin-bottom:2px}
.card-body .school{min-height:0;color:#6b7385}
.device-label{display:none}
.help{background:none;border:1px solid #eceff3;padding:22px 26px}
.mini-footer{display:block;text-align:center;font-size:13px;color:#9aa2b1;border-top:1px solid #eceff3}
@media(max-width:650px){
  .mini-header{min-height:56px;padding:0!important;flex-wrap:nowrap}
  .mini-header .search{display:none}
  .mini-header .mini-link{margin-left:auto}
  body:not(.show-all) .mini-intro{display:none}
  .mini-intro{padding-top:24px}.mini-intro h1{font-size:22px}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .artwork{height:110px}.artwork .app-icon{width:56px;height:56px;font-size:22px}
  .m-finder{background:#fff;color:#1d2433;border:1px solid #eceff3;box-shadow:none;margin-top:20px}
  .m-finder>p{color:#6b7385}
  .m-search{border:2px solid #205dec;box-shadow:0 0 0 4px #205dec1f}
  .m-results{border:1px solid #eceff3;padding:4px}
  .m-empty{background:#f5f7fb;color:#5b6474}
  .m-divider{color:#9aa2b1}.m-divider::before,.m-divider::after{background:#eceff3}
  .m-all{border-color:#e3e7ee;color:#5b6474}
}
.mini-footer{text-align:center!important;display:block!important;padding:24px 0!important}

/* Elemen resmi (v6) */
.official-bar{background:#0f2a6b;color:#dbe5ff;font-size:12.5px}
.official-bar .container{display:flex;align-items:center;gap:8px;padding:8px 0}
.official-bar svg,.verified-pill svg,.trust svg,.vbadge svg,.warn>svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
.official-bar svg{width:16px;height:16px;color:#7fe0a6}
.official-bar b{color:#fff;font-weight:600}
.verified-pill{display:inline-flex;align-items:center;gap:6px;background:#e9f7ef;color:#12804a;font-size:12px;font-weight:600;padding:5px 10px;border-radius:99px;margin-bottom:12px}
.verified-pill svg{width:15px;height:15px}
.trust{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.trust li{display:flex;gap:10px;align-items:flex-start;background:#fff;border:1px solid #eceff3;border-radius:12px;padding:14px}
.trust svg{width:22px;height:22px;color:#205dec;margin-top:2px}
.trust span{font-size:12.5px;color:#6b7385;line-height:1.45}
.trust b{display:block;color:#1d2433;font-size:13.5px}
.vbadge{display:inline-flex;vertical-align:-3px;color:#12804a}
.vbadge svg{width:17px;height:17px}
.updated{font-size:12px;color:#12804a;margin:12px 0 0}
.updated+.app-id{margin-top:4px}
.popup-official{background:#e9f7ef;color:#12804a;border-radius:8px;padding:9px 12px;font-size:13px;font-weight:600}
.warn{display:flex;gap:12px;align-items:flex-start;margin-top:40px;background:#fff8eb;border:1px solid #f6e2b8;border-radius:12px;padding:16px 18px;color:#7a5410;font-size:13.5px}
.warn>svg{width:22px;height:22px;color:#c98a12;margin-top:1px}
.warn p{margin:0}.warn b{color:#5c3d05}
.warn+.help{margin-top:16px}
.mini-footer{display:flex!important;flex-direction:column;gap:4px}
.foot-note{font-size:12px;color:#b0b7c3}
@media(max-width:650px){
  .official-bar .container{font-size:11.5px;align-items:flex-start}
  .trust{grid-template-columns:1fr;gap:8px}
  .mini-intro .trust{display:none}
  .m-trust{margin-top:16px}
  .m-trust li{padding:10px 12px;background:#fafbfc}
  .m-results:not([hidden])~.m-trust{display:none}
}

/* v7 */
.mini-title{display:flex;align-items:center;gap:9px;font-size:19px}
.mini-title small{font:400 12.5px Open,sans-serif;color:#8a93a3;letter-spacing:0;padding-left:10px;border-left:1px solid #e3e7ee}
.logo-dot{width:22px;height:22px;border-radius:7px;background:linear-gradient(140deg,#428aff,#174ecc);box-shadow:inset 0 0 0 5px #ffffff38}
.guide-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid #e3e7ee;background:#fff;color:#5b6474;border-radius:99px;padding:6px 12px 6px 8px;font-size:13px;font-weight:600}
.guide-btn:hover{border-color:#c9d3e3;color:#1d2433}
.guide-btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
@media(max-width:650px){
  .mini-title small{display:none}
  .guide-btn{margin-left:auto;padding:7px;border-radius:50%}
  .guide-btn span{display:none}
}
@media(max-width:650px){.mini-title small{display:inline;font-size:11px;padding-left:8px}}
.logo-mark{height:28px;width:auto}.logo-full{display:block;width:170px;height:auto;margin:0 auto 10px;opacity:.9}

/* Popup unduhan minimal (v9) */
dialog.dl-dialog{width:min(420px,92%);padding:26px 24px 20px;border-radius:18px}
dialog.dl-dialog h2{font:600 20px Lexend,sans-serif;margin:0 32px 2px 0}
dialog.dl-dialog .dialog-done{display:none}
dialog.dl-dialog .close{font-size:24px;color:#8a93a3;top:14px;right:16px}
.dl-meta{margin:0 0 18px;font-size:13px;color:#8a93a3}
.dl-list{border:1px solid #eceff3;border-radius:14px;overflow:hidden}
.dl-row{display:flex;align-items:center;gap:14px;padding:14px 16px}
.dl-row+.dl-row{border-top:1px solid #eceff3}
.dl-os{width:36px;height:36px;border-radius:10px;background:#f5f7fb;display:grid;place-items:center;flex:none}
.dl-os svg{width:20px;height:20px}
.dl-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.dl-txt b{font-size:14.5px;font-weight:600;color:#1d2433}
.dl-txt small{font-size:12px;color:#8a93a3}
.dl-go{border:0;background:#205dec;color:#fff;font-weight:600;font-size:13px;border-radius:99px;padding:8px 18px}
.dl-go:hover{background:#174ecc}.dl-go:disabled{opacity:.6}
.dl-na{font-size:12px;color:#a3abb8;white-space:nowrap}
.dl-row.na .dl-os svg{filter:grayscale(1);opacity:.4}
.dl-row.na .dl-txt b{color:#a3abb8}
.dl-note{margin:14px 0 0;font-size:12px;color:#8a93a3;text-align:center}
dialog.dl-dialog #download-feedback{text-align:center;margin:10px 0 0;min-height:0}

/* Kartu & hasil cari minimal (v10) */
.grid{grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.app-card{padding:18px;display:flex;flex-direction:column;gap:12px;border-radius:14px}
.c-head{display:flex;align-items:center;gap:12px}
.c-icon{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:#eef2fb!important;color:#205dec;font:600 13px Lexend,sans-serif}
.c-title{min-width:0}
.c-title h3{font:600 15px/1.3 Lexend,sans-serif;margin:0;min-height:0;letter-spacing:-.2px}
.c-title p{margin:2px 0 0;font-size:12.5px;color:#8a93a3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-plat{margin:0;font-size:12.5px;color:#5b6474}
.c-btn{border:1px solid #205dec;background:#fff;color:#205dec;border-radius:10px;padding:9px;font-weight:600;font-size:13.5px}
.c-btn:hover{background:#205dec;color:#fff}
.c-btn.soon{border-color:#e3e7ee;color:#a3abb8;background:#fafbfc}
.c-btn.soon:hover{background:#fafbfc;color:#a3abb8}
.c-foot{margin:0;font-size:11.5px;color:#a3abb8}
@media(max-width:650px){
  .grid{grid-template-columns:1fr;gap:8px}
  .app-card{padding:14px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px}
  .c-head{grid-column:1}
  .c-btn{grid-column:2;grid-row:1;padding:7px 14px;font-size:12.5px}
  .c-plat,.c-foot{grid-column:1/-1}
  .c-plat{display:none}
  /* hasil cari */
  .m-results{padding:0;border-radius:12px}
  .m-results button{padding:12px 14px;gap:12px}
  .m-icon{width:34px;height:34px;border-radius:9px;background:#eef2fb;color:#205dec;font-size:12px}
  .m-text strong{font-size:14px;font-weight:600}
  .m-tag{background:none;color:#a3abb8;padding:0;font-size:12.5px}
  .m-tag.ok{background:none;color:#205dec}
}
.c-icon.has-img,.m-icon.has-img{background:none!important;padding:0;overflow:hidden}.c-icon img,.m-icon img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
@media(min-width:651px){.grid{align-items:stretch}.app-card{height:100%}.app-card .c-plat{margin-top:auto}}
@media(max-width:650px){.app-card{grid-template-columns:minmax(0,1fr) 88px}.c-head{min-width:0}.c-title h3{overflow:hidden;text-overflow:ellipsis}.c-btn{width:88px;padding:7px 0;align-self:center;text-align:center}}