/* ===================================================================== SMK BINA PUTRA - TEMA FUTURISTIK (putih dominan, aksen biru) Urutan: 1 Warna 2 Dasar 3 Latar 4 Header 5 Tombol 6 Carousel 7 Kartu dan daftar 8 Forum 9 Form 10 Footer 11 Efek 12 Mobile ===================================================================== */ /* ===== 1. WARNA: ubah nilai di :root ini untuk mengganti seluruh tema ===== */ :root { --bg: #FFFFFF; /* latar halaman (putih) */ --soft: #F3F8FC; /* putih kebiruan */ --tint: #E6F1FA; /* biru sangat muda */ --card: #FFFFFF; --glass: rgba(255, 255, 255, .72); /* kaca buram */ --ink: #0B2236; /* teks utama */ --mut: #52687A; /* teks sekunder */ --line: #DCE8F1; /* garis tipis */ --blue: #0F6FB0; /* biru utama */ --sky: #2AA5F0; /* biru terang (cahaya) */ --navy: #0A2A43; /* biru tua */ --yel: #F4B41A; --red: #E0382D; --btn: #0F6FB0; --grad: linear-gradient(135deg, #0F6FB0, #2AA5F0); --glow: 0 8px 28px rgba(15, 111, 176, .25); color-scheme: light; box-sizing: border-box; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } /* ===== 2. DASAR ===== */ * { box-sizing: border-box; margin: 0; } html { scroll-padding-top: calc(90px + env(safe-area-inset-top, 0px)); scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font: 16px/1.6 Figtree, system-ui, sans-serif; min-height: 100%; overflow-x: hidden; } h1, h2, h3, .brand b, .ri b, .qk b { font-family: "Space Grotesk", "Trebuchet MS", sans-serif; line-height: 1.15; letter-spacing: -.01em; } a { color: var(--blue); } :focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; } ::selection { background: var(--sky); color: #fff; } .wrap { max-width: 1200px; margin: 0 auto; padding: 0 16px; } .narrow { max-width: 760px; } .m { color: var(--mut); font-size: .9rem; margin: 6px 0; } .empty { color: var(--mut); padding: 30px 0; text-align: center; } /* ===== 3. LATAR: grid halus, cahaya melayang, garis progress scroll ===== */ .bg-fx { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; } .bg-fx::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(15, 111, 176, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(15, 111, 176, .06) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 78%); mask-image: radial-gradient(ellipse at 50% 0%, #000 25%, transparent 78%); } .bg-fx i { position: absolute; border-radius: 50%; filter: blur(80px); opacity: .55; animation: float 18s ease-in-out infinite alternate; } .bg-fx i:nth-child(1) { width: 520px; height: 520px; background: #BFE3FA; top: -160px; right: -120px; } .bg-fx i:nth-child(2) { width: 420px; height: 420px; background: #D5ECFF; bottom: -140px; left: -100px; animation-delay: -6s; } .bg-fx i:nth-child(3) { width: 300px; height: 300px; background: #E3F2FF; top: 40%; left: 45%; animation-delay: -12s; } @keyframes float { to { transform: translate(40px, 30px) scale(1.12); } } #glow { position: fixed; left: 0; top: 0; width: 420px; height: 420px; border-radius: 50%; pointer-events: none; z-index: -1; opacity: 0; background: radial-gradient(circle, rgba(42, 165, 240, .16), transparent 65%); transition: opacity .3s; } #progress { position: fixed; top: 0; left: 0; width: 100%; height: 3px; z-index: 60; transform-origin: 0 50%; transform: scaleX(0); background: var(--grad); box-shadow: 0 0 12px var(--sky); } /* ===== 4. HEADER: kaca melayang ===== */ header { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 10px); z-index: 20; width: calc(100% - 24px); max-width: 1176px; margin: 10px auto 0; background: var(--glass); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%); border: 1px solid rgba(15, 111, 176, .14); border-radius: 22px; box-shadow: 0 6px 24px rgba(10, 42, 67, .06); transition: box-shadow .25s; } header.scrolled { box-shadow: 0 12px 36px rgba(10, 42, 67, .13); } .hd { padding: 8px 14px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .brand { display: flex; gap: 10px; align-items: center; text-decoration: none; color: var(--ink); } .brand img { width: 44px; height: 44px; object-fit: contain; transition: transform .4s; } .brand:hover img { transform: rotate(-8deg) scale(1.08); } .brand b { display: block; font-size: 1.1rem; } .brand small { color: var(--mut); font-size: .78rem; } nav { display: flex; gap: 4px; margin-left: auto; overflow-x: auto; } nav a { padding: 8px 16px; border-radius: 999px; text-decoration: none; color: var(--ink); font-weight: 600; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; } nav a:hover { background: var(--tint); color: var(--blue); } nav a.on { background: var(--grad); color: #fff; box-shadow: var(--glow); } .me { display: flex; align-items: center; gap: 8px; font-size: .9rem; } /* ===== 5. TOMBOL ===== */ .btn { position: relative; overflow: hidden; background: var(--grad); color: #fff; border: 0; border-radius: 999px; padding: 10px 20px; font: 600 .95rem Figtree, sans-serif; cursor: pointer; text-decoration: none; display: inline-block; box-shadow: var(--glow); transition: transform .2s, box-shadow .2s; } .btn::after { content: ""; position: absolute; top: 0; left: -120%; width: 70%; height: 100%; transform: skewX(-20deg); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); transition: left .6s; } .btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(15, 111, 176, .35); } .btn:hover::after { left: 140%; } .ghost { background: var(--glass); border: 1px solid var(--line); color: var(--ink); border-radius: 999px; padding: 9px 16px; font: inherit; cursor: pointer; text-decoration: none; display: inline-block; transition: border-color .2s, color .2s, transform .2s; } .ghost:hover { border-color: var(--sky); color: var(--blue); transform: translateY(-1px); } .lnk { background: none; border: 0; color: var(--blue); font: 600 .85rem Figtree; cursor: pointer; padding: 4px 0; } .lnk:hover { text-decoration: underline; } .top { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; border-radius: 50%; border: 0; background: var(--grad); color: #fff; font-size: 1.2rem; cursor: pointer; box-shadow: var(--glow); opacity: 0; pointer-events: none; transition: opacity .25s, transform .2s; z-index: 30; } .top.show { opacity: 1; pointer-events: auto; } .top:hover { transform: translateY(-3px); } /* ===== 6. CAROUSEL BERANDA ===== */ .hero { max-width: 1200px; margin: 0 auto; padding: 22px 12px 8px; display: grid; grid-template-columns: 1fr 290px; gap: 14px; } .stage { --px: 0; --py: 0; position: relative; aspect-ratio: 16/8.2; border-radius: 28px; overflow: hidden; min-width: 0; background: var(--navy); box-shadow: 0 24px 60px rgba(15, 111, 176, .28); } .stage::before { content: ""; position: absolute; inset: 14px; border-radius: 18px; border: 1px solid rgba(255, 255, 255, .3); z-index: 5; pointer-events: none; } .stage::after { content: ""; position: absolute; left: 0; right: 0; top: -140px; height: 140px; z-index: 3; pointer-events: none; background: linear-gradient(transparent, rgba(120, 200, 255, .16), transparent); animation: scan 7s linear infinite; } @keyframes scan { to { transform: translateY(520px); } } .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s; } .slide.on { opacity: 1; } .slide > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; transform: scale(1.06); translate: calc(var(--px) * -14px) calc(var(--py) * -9px); transition: translate .3s ease-out; } .slide.on:not(.fit) > img { animation: kb 9s ease-out forwards; } @keyframes kb { from { transform: scale(1.06); } to { transform: scale(1.12); } } .slide.fit::before { content: ""; position: absolute; inset: -20px; background: var(--img) center/cover; filter: blur(22px) brightness(.6); } .slide.fit > img { object-fit: contain; object-position: right center; transform: none; } .slide::after { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, rgba(10, 42, 67, .75), rgba(10, 42, 67, 0) 60%); } .cap { position: absolute; left: 26px; bottom: 26px; z-index: 6; max-width: 520px; padding: 20px 22px; color: #fff; border-radius: 20px; background: rgba(10, 42, 67, .42); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .22); } .fit .cap { max-width: min(400px, 52%); } .cap h2 { font-size: clamp(1.3rem, 3vw, 2.2rem); margin: 8px 0; } .cap p { opacity: .92; margin-bottom: 14px; } .tag { display: inline-block; padding: 3px 11px; border-radius: 999px; font: 600 .75rem "Space Grotesk", sans-serif; background: var(--tint); color: var(--blue); border: 1px solid rgba(15, 111, 176, .2); } .cap .tag { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .35); } .arr { position: absolute; top: 50%; translate: 0 -50%; width: 42px; height: 42px; border-radius: 50%; z-index: 7; cursor: pointer; font-size: 1.5rem; color: #fff; background: rgba(255, 255, 255, .18); border: 1px solid rgba(255, 255, 255, .4); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background .2s, transform .2s; } .arr:hover { background: rgba(255, 255, 255, .4); } .prev { left: 22px; } .next { right: 22px; } .ctl { position: absolute; top: 24px; right: 24px; z-index: 7; display: flex; gap: 8px; align-items: center; } .count { background: rgba(10, 42, 67, .6); color: #fff; border-radius: 999px; padding: 3px 11px; font: 600 .8rem "Space Grotesk", sans-serif; } .pp { border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px; padding: 5px 13px; background: rgba(255, 255, 255, .2); color: #fff; font: 600 .8rem Figtree, sans-serif; cursor: pointer; } .rail { display: grid; gap: 10px; grid-auto-rows: 1fr; counter-reset: n; } .ri { counter-increment: n; position: relative; overflow: hidden; text-align: left; padding: 16px; border-radius: 18px; background: var(--glass); color: var(--ink); border: 1px solid var(--line); font: inherit; cursor: pointer; transition: border-color .25s, box-shadow .25s, background .25s; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .ri::before { content: "0" counter(n); display: block; font: 600 .8rem "Space Grotesk", sans-serif; color: var(--sky); margin-bottom: 4px; } .ri:hover { border-color: var(--sky); } .ri.on { background: #fff; border-color: var(--blue); box-shadow: var(--glow); } .ri .tag { margin-bottom: 6px; } .ri b { display: block; font-size: 1rem; } .pb { position: absolute; left: 0; bottom: 0; height: 4px; width: 0; background: var(--grad); box-shadow: 0 0 10px var(--sky); } .ri.on .pb { animation: fill 6s linear forwards; } @keyframes fill { to { width: 100%; } } .hero:hover .pb, .hero:focus-within .pb, .hero.paused .pb { animation-play-state: paused; } /* Pita tulisan berjalan di bawah carousel */ .ticker { overflow: hidden; margin: 18px 0 6px; border-block: 1px solid var(--line); background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .ticker div { display: flex; gap: 40px; width: max-content; padding: 12px 0; animation: marquee 40s linear infinite; font: 600 .9rem "Space Grotesk", sans-serif; color: var(--blue); } .ticker span:nth-child(even) { color: var(--sky); } .ticker:hover div { animation-play-state: paused; } @keyframes marquee { to { transform: translateX(-50%); } } /* ===== 7. KARTU DAN DAFTAR ===== */ .sec { margin: 34px 0; } .sh { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 26px 0 16px; } .sh h2 { font-size: 1.7rem; } .sh h2::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 10px; background: var(--grad); box-shadow: 0 0 12px var(--sky); } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; } /* Semua kartu: kaca, garis tipis, cahaya mengikuti kursor (diatur app.js) */ .card, .trow, .qk, .post, .bt, .stat, .step { position: relative; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 2px 10px rgba(10, 42, 67, .05); transition: transform .18s ease-out, box-shadow .25s, border-color .25s; } .card::after, .trow::after, .qk::after, .post::after, .bt::after, .stat::after, .step::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(42, 165, 240, .16), transparent 60%); } .card:hover, .trow:hover, .qk:hover, .post:hover, .bt:hover, .stat:hover { border-color: var(--sky); box-shadow: 0 14px 36px rgba(15, 111, 176, .16); } .card:hover::after, .trow:hover::after, .qk:hover::after, .post:hover::after, .bt:hover::after, .stat:hover::after, .step:hover::after { opacity: 1; } .card { display: block; overflow: hidden; text-decoration: none; color: inherit; } .card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform .5s ease; } .card:hover img { transform: scale(1.07); } .card div { padding: 16px; } .card h3 { font-size: 1.1rem; margin: 4px 0; } .meta { color: var(--mut); font-size: .85rem; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* Akses cepat */ .quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 8px; } .qk { display: block; padding: 18px; text-decoration: none; color: var(--ink); background: linear-gradient(160deg, #fff, var(--soft)); } .qk em { display: block; font: 600 .8rem "Space Grotesk", sans-serif; font-style: normal; color: var(--sky); margin-bottom: 6px; } .qk b { display: block; font-size: 1.1rem; } .qk span { color: var(--mut); font-size: .88rem; } .qk i { float: right; font-style: normal; color: var(--blue); transition: transform .2s; } .qk:hover i { transform: translateX(5px); } /* Halaman berita */ .art img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 20px; margin: 14px 0; box-shadow: 0 16px 40px rgba(15, 111, 176, .16); } /* ===== 8. FORUM ===== */ .trow { display: flex; gap: 12px; padding: 16px; text-decoration: none; color: inherit; margin-bottom: 12px; } .trow h3 { font-size: 1.05rem; margin-bottom: 2px; } .trow .n { margin-left: auto; color: var(--mut); font-size: .85rem; white-space: nowrap; } .av { flex: none; width: 36px; height: 36px; border-radius: 50%; color: #fff; display: grid; place-items: center; font-weight: 600; font-size: .9rem; box-shadow: 0 4px 12px rgba(10, 42, 67, .2); } .cat { background: var(--tint); color: var(--blue); border-radius: 999px; padding: 2px 10px; font: 600 .75rem "Space Grotesk", sans-serif; } .role { border: 1px solid var(--line); border-radius: 999px; padding: 0 8px; font-size: .75rem; background: #fff; } .chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; align-items: center; } .chip { border: 1px solid var(--line); background: var(--glass); color: var(--ink); border-radius: 999px; padding: 7px 15px; font: 600 .88rem Figtree; cursor: pointer; transition: all .2s; } .chip:hover { border-color: var(--sky); color: var(--blue); } .chip.on { background: var(--grad); color: #fff; border-color: transparent; box-shadow: var(--glow); } .post { padding: 22px; margin: 14px 0 26px; } .post h2 { margin: 8px 0; } .body { white-space: pre-wrap; margin: 12px 0; } .cm { display: flex; gap: 12px; padding: 16px 12px; border-top: 1px solid var(--line); } .cm.best { background: linear-gradient(90deg, rgba(42, 165, 240, .14), rgba(42, 165, 240, 0)); border-left: 3px solid var(--sky); border-radius: 12px; } .cf { display: grid; gap: 10px; justify-items: start; margin: 18px 0 40px; } /* ===== 9. FORM ===== */ input, select, textarea { width: 100%; margin-top: 4px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255, 255, 255, .85); color: inherit; font: inherit; transition: border-color .2s, box-shadow .2s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sky); box-shadow: 0 0 0 4px rgba(42, 165, 240, .18); } .chips input { width: 220px; margin: 0 0 0 auto; } .act { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; } /* ===== 10. FOOTER ===== */ /* ===== 10b. HERO STARTUP, STATISTIK, BENTO, LANGKAH, AJAKAN, FOOTER ===== */ .hero2 { position: relative; overflow: hidden; padding: 48px 0 36px; } #net { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .hero2-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; } .hero2-text > * { animation: rise .8s both; } .hero2-text > :nth-child(2) { animation-delay: .1s; } .hero2-text > :nth-child(3) { animation-delay: .2s; } .hero2-text > :nth-child(4) { animation-delay: .3s; } @keyframes rise { from { opacity: 0; transform: translateY(22px); } } .pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--glass); border: 1px solid var(--line); font: 600 .82rem "Space Grotesk", sans-serif; color: var(--blue); } .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--sky); animation: pulse 2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(42, 165, 240, .6); } 70%, 100% { box-shadow: 0 0 0 10px rgba(42, 165, 240, 0); } } .hero2 h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); line-height: 1.04; margin: 18px 0; font-weight: 700; } .gt { background: linear-gradient(90deg, #0F6FB0, #2AA5F0, #0F6FB0); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 6s linear infinite; } @keyframes shine { to { background-position: 200% center; } } .hero2 p { font-size: 1.1rem; color: var(--mut); max-width: 520px; } .cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; } /* Sisi kanan hero: bola cahaya, bingkai foto, kartu melayang (bergeser mengikuti kursor) */ .hero2-vis { --px: 0; --py: 0; position: relative; min-height: 430px; } .orb { position: absolute; inset: 6% 12%; background: radial-gradient(circle at 35% 30%, #9ADBFF, #2AA5F0 45%, #0F6FB0 85%); opacity: .85; filter: blur(2px); border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%; animation: morph 12s ease-in-out infinite alternate; translate: calc(var(--px) * 24px) calc(var(--py) * 24px); } @keyframes morph { to { border-radius: 40% 60% 45% 55% / 55% 45% 55% 45%; transform: rotate(18deg) scale(1.05); } } .frame { position: absolute; inset: 11% 5% 11% 13%; overflow: hidden; border-radius: 26px; border: 1px solid rgba(255, 255, 255, .8); box-shadow: 0 30px 80px rgba(10, 42, 67, .3); rotate: -2deg; translate: calc(var(--px) * -14px) calc(var(--py) * -14px); } .frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .frame::before, .frame::after { content: ""; position: absolute; width: 34px; height: 34px; border: 2px solid rgba(255, 255, 255, .9); z-index: 2; } .frame::before { top: 14px; left: 14px; border-right: 0; border-bottom: 0; } .frame::after { bottom: 14px; right: 14px; border-left: 0; border-top: 0; } .fl { position: absolute; padding: 12px 16px; border-radius: 16px; background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, .85); box-shadow: 0 14px 40px rgba(10, 42, 67, .16); font-size: .82rem; animation: bob 5s ease-in-out infinite alternate; translate: calc(var(--px) * 30px) calc(var(--py) * 30px); } .fl span { color: var(--mut); display: block; } .fl b { font: 700 1rem "Space Grotesk", sans-serif; display: block; max-width: 200px; } .f1 { top: 3%; left: 0; } .f2 { bottom: 5%; left: 4%; animation-delay: -2s; } .f3 { top: 20%; right: 0; animation-delay: -1s; } @keyframes bob { to { transform: translateY(-12px); } } /* Angka statistik */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 26px 0 10px; } .stat { padding: 22px 12px; text-align: center; } .stat b { display: block; font: 700 2.4rem "Space Grotesk", sans-serif; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; } .stat span { color: var(--mut); font-size: .9rem; } /* Fitur (bento) */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(180px, auto); gap: 16px; } .bt { display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; overflow: hidden; text-decoration: none; color: var(--ink); } .bt.big { grid-column: span 2; grid-row: span 2; } .bt.wide { grid-column: span 2; } .bt.big::before { content: ""; position: absolute; inset: 0; background: var(--bgimg, none) center/cover; opacity: .35; -webkit-mask-image: linear-gradient(160deg, #000, transparent 70%); mask-image: linear-gradient(160deg, #000, transparent 70%); transition: transform .6s; } .bt.big:hover::before { transform: scale(1.06); } .bt > * { position: relative; } .ic { width: 52px; height: 52px; border-radius: 16px; background: var(--grad); color: #fff; display: grid; place-items: center; box-shadow: var(--glow); margin-bottom: auto; } .ic svg { width: 26px; height: 26px; } .bt h3 { font-size: 1.3rem; margin: 14px 0 4px; } .bt p { color: var(--mut); font-size: .92rem; } /* Cara bergabung */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; } .step { padding: 24px; } .step::before { counter-increment: s; content: counter(s); width: 42px; height: 42px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font: 700 1rem "Space Grotesk", sans-serif; margin-bottom: 14px; box-shadow: var(--glow); } .step h3 { margin-bottom: 4px; } .step p { color: var(--mut); font-size: .93rem; } /* Ajakan bergabung */ .cta-band { position: relative; overflow: hidden; text-align: center; color: #fff; margin: 50px 0 0; padding: 60px 24px; border-radius: 32px; background: linear-gradient(135deg, #0A2A43, #0F6FB0 55%, #2AA5F0); box-shadow: 0 30px 70px rgba(15, 111, 176, .35); } .cta-band::before { content: ""; position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px); background-size: 40px 40px; } .cta-band::after { content: ""; position: absolute; width: 380px; height: 380px; right: -90px; top: -140px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .35), transparent 65%); animation: float 10s ease-in-out infinite alternate; } .cta-band > * { position: relative; z-index: 1; } .cta-band h2 { font-size: clamp(1.6rem, 4vw, 2.6rem); margin-bottom: 8px; } .cta-band p { opacity: .9; margin-bottom: 22px; } .cta-band .btn { background: #fff; color: var(--blue); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); } /* Footer */ footer { margin-top: 70px; padding: 44px 16px 24px; color: var(--mut); background: linear-gradient(to bottom, rgba(243, 248, 252, 0), var(--soft)); border-top: 1px solid var(--line); } .ft { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 30px; max-width: 1200px; margin: 0 auto; text-align: left; } .ft-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font: 700 1.1rem "Space Grotesk", sans-serif; margin-bottom: 8px; } .ft h4 { color: var(--ink); font: 700 .95rem "Space Grotesk", sans-serif; margin-bottom: 10px; } .ft a { display: block; color: var(--mut); text-decoration: none; padding: 3px 0; transition: color .2s, transform .2s; } .ft a:hover { color: var(--blue); transform: translateX(4px); } .copy { max-width: 1200px; margin: 28px auto 0; padding-top: 18px; border-top: 1px solid var(--line); font-size: .85rem; text-align: center; } /* ===== 11. EFEK MUNCUL SAAT SCROLL (kelas "js" dipasang di oleh layout) ===== */ .js .reveal { opacity: 0; transform: translateY(24px); filter: blur(6px); transition: opacity .7s ease, transform .7s ease, filter .7s ease; transition-delay: var(--d, 0ms); } .js .reveal.in { opacity: 1; transform: none; filter: none; } .js .reveal.done { transition: transform .18s ease-out, box-shadow .25s, border-color .25s; transition-delay: 0ms; } /* ===== 12. MOBILE dan aksesibilitas ===== */ @media (max-width: 820px) { .hero { grid-template-columns: 1fr; } .hero2-in { grid-template-columns: 1fr; gap: 10px; } .hero2-vis { min-height: 340px; } .stats { grid-template-columns: repeat(2, 1fr); } .bento { grid-template-columns: 1fr 1fr; } .bt.big, .bt.wide { grid-column: span 2; } .bt.big { grid-row: auto; } .steps { grid-template-columns: 1fr; } .ft { grid-template-columns: 1fr; } .stage { aspect-ratio: 4/3.4; } .cap { left: 14px; right: 14px; bottom: 14px; padding: 14px 16px; max-width: none; } .fit .cap { max-width: none; } .arr { display: none; } .rail { display: flex; overflow-x: auto; } .ri { min-width: 210px; } nav { margin-left: 0; width: 100%; } .chips input { width: 100%; margin: 0; } .bg-fx i { filter: blur(60px); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .js .reveal { opacity: 1; transform: none; filter: none; } }