---

# style.css

```css
*{
margin:0;
padding:0;
box-sizing:border-box;
}

:root{
--glass:rgba(255,255,255,.08);
--line:rgba(255,255,255,.12);
}

body{
font-family:system-ui;
background:
radial-gradient(circle at top right,#00c85322,transparent 30%),
linear-gradient(135deg,#08141d,#102937,#1d4657);
color:#fff;
}

.hero{
position:relative;
text-align:center;
padding:70px 20px;
margin:14px;
border-radius:38px;
background:var(--glass);
backdrop-filter:blur(18px);
overflow:hidden;
box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.hero-glow{
position:absolute;
width:300px;
height:300px;
background:#00c85333;
filter:blur(90px);
right:-60px;
top:-60px;
}

.hero h1{
font-size:52px;
margin-bottom:14px;
position:relative;
z-index:2;
}

.hero-badges{
margin-top:24px;
display:flex;
gap:12px;
justify-content:center;
flex-wrap:wrap;
}

.hero-badges span{
padding:12px 18px;
border-radius:999px;
background:#ffffff14;
}

.container{
max-width:1200px;
margin:auto;
padding:16px;
}

.section-title{
font-size:30px;
margin-bottom:18px;
font-weight:800;
}

.card{
margin-top:26px;
padding:28px;
border-radius:34px;
background:var(--glass);
backdrop-filter:blur(18px);
border:1px solid var(--line);
}

.cards{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
gap:20px;
margin-top:26px;
}

.glow-card{text-align:center}
.icon{font-size:42px;margin-bottom:10px}
.big{font-size:56px;font-weight:900;margin-top:10px}

.slider,.info-slider{
position:relative;
overflow:hidden;
border-radius:36px;
box-shadow:0 25px 60px rgba(0,0,0,.35);
}

.slider{height:72vh}
.info-slider{height:480px;margin-top:20px}

.slides,.info-slides{
display:flex;
height:100%;
transition:.6s ease;
}

.slide,.info-slide{
min-width:100%;
position:relative;
}

.slide img{
width:100%;
height:100%;
object-fit:cover;
}

.slide:after{
content:'';
position:absolute;
inset:0;
background:linear-gradient(transparent 35%,rgba(0,0,0,.72));
}

.badge{
position:absolute;
top:18px;
left:18px;
z-index:4;
padding:12px 18px;
border-radius:30px;
background:#00c853;
font-weight:700;
}

.anak{background:#ff9800}

/* tambahan untuk OREN tanpa ubah style lama */
.new-badge{
animation:pulse 2s infinite;
box-shadow:0 0 20px #ff980077;
}

@keyframes pulse{
50%{transform:scale(1.05)}
}

.nama{
position:absolute;
left:18px;
right:18px;
bottom:22px;
z-index:4;
padding:18px;
text-align:center;
font-size:30px;
font-weight:800;
background:rgba(255,255,255,.14);
backdrop-filter:blur(14px);
border-radius:24px;
}

.prev,.next{
position:absolute;
top:50%;
transform:translateY(-50%);
width:60px;
height:60px;
border:none;
border-radius:50%;
background:rgba(255,255,255,.18);
color:white;
font-size:30px;
cursor:pointer;
z-index:6;
}

.prev{left:16px}
.next{right:16px}

.dots{
position:absolute;
bottom:95px;
width:100%;
display:flex;
justify-content:center;
gap:10px;
z-index:6;
}

.info-dots{bottom:18px}

.dot{
width:11px;
height:11px;
border-radius:50%;
background:#ffffff55;
}

.dot.active{
background:#fff;
transform:scale(1.4);
}

.info-slide{
padding:26px;
text-align:center;
background:linear-gradient(135deg,rgba(0,200,83,.18),rgba(255,255,255,.04));
}

.info-slide img{
width:100%;
height:280px;
object-fit:cover;
border-radius:26px;
margin-bottom:22px;
}

.gallery{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:18px;
margin-top:24px;
}

.gallery img{
width:100%;
height:260px;
object-fit:cover;
border-radius:24px;
cursor:pointer;
}

.modal{
display:none;
position:fixed;
inset:0;
background:rgba(0,0,0,.92);
justify-content:center;
align-items:center;
padding:20px;
z-index:999;
}

.modal img{
max-width:95%;
max-height:90vh;
border-radius:24px;
}

footer{
text-align:center;
padding:40px 0 50px;
opacity:.7;
}

@media(max-width:768px){
body{overflow-x:hidden}
.hero{padding:48px 16px;border-radius:28px}
.hero h1{font-size:34px}
.container{padding:12px}
.slider{height:55vh;border-radius:24px}
.nama{font-size:20px;padding:14px;bottom:14px}
.badge{font-size:13px;padding:8px 14px}
.prev,.next{width:46px;height:46px;font-size:24px}
.dots{bottom:78px}
.cards{grid-template-columns:1fr;gap:14px}
.card{padding:20px;border-radius:24px}
.big{font-size:42px}
.info-slider{height:340px}
.info-slide img{height:180px}
.gallery{grid-template-columns:repeat(2,1fr);gap:12px}
.gallery img{height:150px}
}