/* Beranda publik School OS */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
:root { --navy:#0b1450; --biru:#1c2c7a; --terang:#2f48c4; --teal:#14b8a6; --kuning:#f5b324; --abu:#f3f6fc; }
body { font-family:'Segoe UI',Arial,sans-serif; color:#1f2937; line-height:1.6; font-size:15.5px; background:#fff; }
a { color:inherit; text-decoration:none; }
.w { width:min(1160px,100% - 32px); margin:0 auto; }
h1,h2,h3 { line-height:1.2; color:#0f1b4c; }

.bn-nav { position:sticky; top:0; z-index:50; background:rgba(11,20,80,.94); backdrop-filter:blur(10px); }
.bn-nav .w { display:flex; align-items:center; gap:22px; height:66px; }
.bn-brand { display:flex; align-items:center; gap:10px; color:#fff; font-weight:800; font-size:19px; letter-spacing:.3px; } .bn-brand i { color:var(--kuning); font-size:22px; }
.bn-menu { display:flex; gap:4px; margin-left:20px; } .bn-menu a { color:#cdd6ff; padding:8px 13px; border-radius:8px; font-size:14px; font-weight:600; } .bn-menu a:hover { background:rgba(255,255,255,.1); color:#fff; }
.bn-kanan { margin-left:auto; display:flex; align-items:center; gap:10px; }
.tb { display:inline-flex; align-items:center; gap:8px; border:0; cursor:pointer; font-weight:800; font-size:14px; padding:11px 22px; border-radius:11px; transition:transform .15s, box-shadow .15s, background .2s; font-family:inherit; }
.tb:hover { transform:translateY(-2px); }
.tb-kuning { background:var(--kuning); color:#2a1d00; box-shadow:0 8px 20px rgba(245,179,36,.35); } .tb-putih { background:#fff; color:var(--biru); } .tb-garis { background:rgba(255,255,255,.1); color:#fff; border:1.5px solid rgba(255,255,255,.35); } .tb-biru { background:linear-gradient(135deg,var(--terang),var(--biru)); color:#fff; box-shadow:0 8px 20px rgba(28,44,122,.3); }
.bn-nav .tb { padding:9px 18px; font-size:13.5px; } .bn-masuk { color:#fff; font-weight:700; font-size:14px; padding:8px 12px; }

.hero { background:radial-gradient(900px 520px at 85% 0%, rgba(47,72,196,.55), transparent 60%), radial-gradient(700px 480px at 0% 100%, rgba(20,184,166,.28), transparent 60%), linear-gradient(160deg,#0a1248,#101c66 60%,#0b1450); color:#fff; padding:80px 0 120px; position:relative; overflow:hidden; }
.hero::before { content:''; position:absolute; inset:0; background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='32'><path d='M0 24 L16 8 L32 24 L48 8 L64 24' fill='none' stroke='white' stroke-opacity='.04' stroke-width='5'/></svg>"); }
.hero .w { display:grid; grid-template-columns:1.05fr 1fr; gap:48px; align-items:center; position:relative; }
.lencana { display:inline-flex; gap:8px; align-items:center; background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.25); padding:6px 16px; border-radius:30px; font-size:13px; font-weight:700; color:#bff3ec; margin-bottom:18px; }
.hero h1 { color:#fff; font-size:50px; letter-spacing:-.5px; margin-bottom:18px; } .hero h1 em { font-style:normal; color:var(--kuning); }
.hero p.sub { font-size:18px; color:#d4dcff; max-width:560px; margin-bottom:28px; }
.cta { display:flex; flex-wrap:wrap; gap:12px; } .catatan { margin-top:18px; font-size:13px; color:#aeb9f2; }
.mock { background:#fff; border-radius:20px; box-shadow:0 40px 80px rgba(0,0,0,.45); overflow:hidden; transform:rotate(1.5deg); border:1px solid rgba(255,255,255,.2); }
.mock-bar { background:#eef1f8; padding:9px 14px; display:flex; gap:6px; align-items:center; } .mock-bar i { width:10px; height:10px; border-radius:50%; background:#cbd3e6; display:block; } .mock-bar span { margin-left:10px; font-size:11px; color:#7b87a8; background:#fff; padding:2px 12px; border-radius:10px; }
.mock-isi { display:grid; grid-template-columns:96px 1fr; min-height:300px; }
.mock-sisi { background:linear-gradient(180deg,#13206b,#432b9a); padding:12px 8px; } .mock-sisi div { height:10px; background:rgba(255,255,255,.28); border-radius:5px; margin:10px 4px; } .mock-sisi div:first-child { background:#fff; height:14px; }
.mock-utama { padding:14px; background:#f4f6fc; } .mock-banner { height:50px; border-radius:10px; background:linear-gradient(110deg,#17287e,#2447b8 60%,#1696b0); margin-bottom:10px; }
.mock-kartu { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:10px; } .mock-kartu div { background:#fff; border-radius:9px; padding:8px; font-size:10px; color:#6b7280; } .mock-kartu b { display:block; font-size:18px; color:#14213d; }
.mock-grafik { background:#fff; border-radius:10px; height:92px; display:flex; align-items:flex-end; gap:8px; padding:10px; } .mock-grafik div { flex:1; border-radius:5px 5px 0 0; background:linear-gradient(180deg,#2f48c4,#1696b0); }

.pita { background:#fff; margin-top:-48px; position:relative; z-index:3; }
.pita .w { background:#fff; border-radius:18px; box-shadow:0 20px 50px rgba(15,23,76,.16); display:grid; grid-template-columns:repeat(4,1fr); }
.pita .w div { padding:22px 18px; text-align:center; border-right:1px solid #eef1f8; } .pita .w div:last-child { border-right:0; } .pita i { font-size:24px; color:var(--terang); display:block; margin-bottom:6px; } .pita b { display:block; color:#0f1b4c; } .pita span { font-size:13px; color:#6b7280; }

section { padding:84px 0; } .abu { background:var(--abu); }
.judul { text-align:center; max-width:720px; margin:0 auto 46px; } .judul small { color:var(--terang); font-weight:800; letter-spacing:1.5px; text-transform:uppercase; font-size:12.5px; } .judul h2 { font-size:36px; margin:8px 0 12px; } .judul p { color:#5b6786; font-size:17px; }
.grid4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; } .grid3 { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.fitur { background:#fff; border:1px solid #e6ebf6; border-radius:18px; padding:26px 22px; transition:transform .2s, box-shadow .2s, border-color .2s; }
.fitur:hover { transform:translateY(-5px); box-shadow:0 18px 40px rgba(28,44,122,.12); border-color:#c9d5f6; }
.ik { width:54px; height:54px; border-radius:16px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:23px; margin-bottom:16px; background:linear-gradient(135deg,var(--terang),var(--teal)); }
.fitur h3 { font-size:18px; margin-bottom:8px; } .fitur p { color:#5b6786; font-size:14.5px; }

.langkah { counter-reset:l; } .langkah .l { text-align:center; padding:0 12px; } .langkah .l::before { counter-increment:l; content:counter(l); width:52px; height:52px; border-radius:50%; background:var(--biru); color:#fff; font-weight:800; font-size:21px; display:flex; align-items:center; justify-content:center; margin:0 auto 14px; box-shadow:0 8px 20px rgba(28,44,122,.3); } .l h3 { margin-bottom:6px; } .l p { color:#5b6786; font-size:14.5px; }

.dua { display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.dua h2 { font-size:34px; margin-bottom:14px; } .dua p { color:#5b6786; margin-bottom:14px; }
.centang { list-style:none; display:grid; gap:10px; margin:14px 0 22px; } .centang li { display:flex; gap:10px; } .centang i { color:#16a34a; margin-top:5px; }
.laptop { background:linear-gradient(145deg,#13206b,#432b9a); border-radius:24px; padding:30px; color:#fff; box-shadow:0 30px 60px rgba(28,44,122,.3); position:relative; overflow:hidden; }
.laptop::after { content:''; position:absolute; right:-50px; top:-50px; width:200px; height:200px; border-radius:50%; background:rgba(255,255,255,.08); }
.alur { display:grid; gap:14px; position:relative; z-index:1; } .alur div { display:flex; gap:14px; align-items:center; background:rgba(255,255,255,.12); border-radius:14px; padding:14px 16px; } .alur i { font-size:22px; width:42px; text-align:center; color:var(--kuning); } .alur b { display:block; } .alur small { color:#cdd6ff; }

.tema-kartu { background:#fff; border-radius:20px; overflow:hidden; border:1px solid #e6ebf6; box-shadow:0 8px 26px rgba(15,23,76,.08); transition:transform .2s, box-shadow .2s; display:block; }
.tema-kartu:hover { transform:translateY(-6px); box-shadow:0 24px 50px rgba(15,23,76,.18); }
.pratinjau { height:210px; padding:14px; position:relative; overflow:hidden; } .pratinjau .p-atas { height:12px; width:60%; border-radius:6px; background:rgba(255,255,255,.35); margin-bottom:8px; } .pratinjau .p-hero { height:78px; border-radius:10px; background:rgba(255,255,255,.18); margin-bottom:10px; display:flex; align-items:center; padding:0 14px; color:#fff; font-weight:800; font-size:15px; }
.pratinjau .p-baris { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } .pratinjau .p-baris div { height:56px; border-radius:8px; background:rgba(255,255,255,.88); }
.t-klasik { background:linear-gradient(135deg,#0d3a20,#1f7a45); } .t-modern { background:linear-gradient(135deg,#0b2a6b,#0ea5e9); } .t-elegan { background:linear-gradient(135deg,#4a0f10,#a3262a); }
.tema-info { padding:20px 22px 24px; } .tema-info h3 { font-size:19px; margin-bottom:4px; } .tema-info p { color:#5b6786; font-size:14px; margin-bottom:14px; } .tema-info .lihat { color:var(--terang); font-weight:800; font-size:14px; }
.tema-note { text-align:center; margin-top:28px; color:#5b6786; } .tema-note b { color:#0f1b4c; }

.game { background:linear-gradient(160deg,#0a1248,#26126b); color:#fff; position:relative; overflow:hidden; }
.game::before { content:''; position:absolute; inset:0; background:radial-gradient(500px 300px at 90% 10%, rgba(245,179,36,.22), transparent 60%), radial-gradient(500px 300px at 5% 90%, rgba(20,184,166,.25), transparent 60%); }
.game .w { position:relative; } .game .judul h2, .game .judul small { color:#fff; } .game .judul p { color:#c9d1ff; } .game .judul small { color:var(--kuning); }
.soon { display:inline-block; background:var(--kuning); color:#2a1d00; font-weight:800; font-size:12.5px; padding:5px 16px; border-radius:20px; margin-bottom:12px; letter-spacing:.5px; }
.g { background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:18px; padding:24px 20px; backdrop-filter:blur(4px); } .g .ik { background:linear-gradient(135deg,var(--kuning),#ef6c3b); } .g h3 { color:#fff; font-size:18px; margin-bottom:6px; } .g p { color:#cfd6ff; font-size:14px; }
.game .aksi { text-align:center; margin-top:34px; }

.tombol-periode { display:inline-flex; background:#e6ebf8; border-radius:30px; padding:4px; margin-bottom:34px; } .tombol-periode button { border:0; background:none; padding:9px 24px; border-radius:26px; font-weight:800; font-size:14px; color:#4b5a8a; cursor:pointer; font-family:inherit; } .tombol-periode button.on { background:var(--biru); color:#fff; }
.harga { display:grid; grid-template-columns:1fr 1.5fr; gap:24px; align-items:start; text-align:left; }
.pk { background:#fff; border:1.5px solid #dfe5f5; border-radius:22px; padding:30px 28px; position:relative; } .pk.top { border-color:var(--terang); box-shadow:0 22px 50px rgba(47,72,196,.18); }
.pk .tag { position:absolute; top:-13px; left:28px; background:var(--kuning); color:#2a1d00; font-size:12px; font-weight:800; padding:4px 14px; border-radius:20px; }
.pk h3 { font-size:22px; } .pk .u { color:#6b7785; font-size:14px; margin:4px 0 14px; } .pk .rp { font-size:38px; font-weight:800; color:var(--biru); line-height:1.1; } .pk .rp small { font-size:14px; color:#6b7785; font-weight:600; }
.pk ul { list-style:none; margin:18px 0 22px; display:grid; gap:9px; font-size:14.5px; } .pk li i { color:#16a34a; margin-right:8px; }
.tier { width:100%; border-collapse:collapse; margin:12px 0 6px; font-size:14.5px; } .tier td { padding:10px 6px; border-bottom:1px solid #eef1f8; } .tier td:last-child { text-align:right; font-weight:800; color:var(--biru); }
.cat { font-size:12.5px; color:#6b7785; }

.faq { max-width:820px; margin:0 auto; display:grid; gap:12px; } details { background:#fff; border:1px solid #e6ebf6; border-radius:14px; padding:4px 20px; } summary { cursor:pointer; padding:15px 0; font-weight:800; color:#0f1b4c; list-style:none; display:flex; justify-content:space-between; gap:12px; } summary::after { content:'+'; font-size:22px; color:var(--terang); } details[open] summary::after { content:'−'; } details p { padding:0 0 16px; color:#5b6786; }

.penutup { background:linear-gradient(120deg,#13206b,#2447b8 55%,#1696b0); color:#fff; text-align:center; padding:70px 0; } .penutup h2 { color:#fff; font-size:34px; margin-bottom:10px; } .penutup p { color:#d6e0ff; margin-bottom:24px; font-size:17px; }
footer.kaki { background:var(--navy); color:#aeb9e8; padding:44px 0 28px; font-size:14px; } footer .w { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:30px; } footer b { color:#fff; display:block; margin-bottom:10px; } footer a { display:block; padding:3px 0; color:#aeb9e8; } footer a:hover { color:#fff; } .hak { text-align:center; margin-top:28px; padding-top:20px; border-top:1px solid rgba(255,255,255,.1); font-size:13px; }

.pd-latar { position:fixed; inset:0; background:rgba(4,9,54,.72); backdrop-filter:blur(4px); z-index:100; display:none; align-items:center; justify-content:center; padding:16px; } .pd-latar.buka { display:flex; }
.pd-kotak { background:#fff; border-radius:22px; width:100%; max-width:520px; padding:28px 28px 24px; position:relative; box-shadow:0 24px 60px rgba(0,0,0,.45); }
.pd-kotak h3 { margin:0 0 4px; font-size:22px; text-align:center; } .pd-kotak > p { margin:0 0 18px; text-align:center; font-size:13px; color:#6b7785; }
.pd-tutup { position:absolute; right:14px; top:12px; border:0; background:#eef1f6; color:#556; width:30px; height:30px; border-radius:50%; cursor:pointer; }
.pd-pilih { display:grid; gap:12px; } .pd-pilih a { display:flex; align-items:center; gap:14px; padding:16px; border-radius:16px; background:#f1f4fc; border:2px solid transparent; transition:border-color .2s, transform .15s; } .pd-pilih a:hover { border-color:var(--terang); background:#fff; transform:translateX(3px); }
.pd-pilih .ik { margin:0; width:50px; height:50px; flex:none; } .pd-pilih b { display:block; font-size:16px; color:#14213d; } .pd-pilih small { display:block; margin-top:3px; color:#5b6786; font-size:12.5px; line-height:1.45; } .pd-pilih .pa { margin-left:auto; color:var(--terang); }

@media (max-width:980px) {
	.bn-menu { display:none; } .hero .w, .dua, .harga { grid-template-columns:1fr; } .hero h1 { font-size:36px; } .mock { transform:none; }
	.grid4 { grid-template-columns:repeat(2,1fr); } .grid3 { grid-template-columns:1fr; } .pita .w { grid-template-columns:repeat(2,1fr); } footer .w { grid-template-columns:1fr; } .judul h2, .dua h2 { font-size:28px; }
}
@media (max-width:560px) { .grid4 { grid-template-columns:1fr; } .bn-masuk { display:none; } .hero { padding:50px 0 100px; } section { padding:58px 0; } .tb { padding:11px 18px; } }