body{
margin:0;
font-family:’Poppins’,sans-serif;
background:#f4f6f8;
}

.rules-wrapper{
max-width:1100px;
margin:60px auto;
padding:0 20px;
}

.rules-header{
text-align:center;
margin-bottom:40px;
}

.rules-header h1{
color:#002855;
margin-bottom:10px;
}

.rules-header p{
color:#555;
}

.rules-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}

.rule-card{
background:#fff;
border-radius:16px;
padding:25px;
box-shadow:0 10px 25px rgba(0,0,0,0.08);
transition:transform .3s ease, box-shadow .3s ease;
}

.rule-card:hover{
transform:translateY(-8px);
box-shadow:0 18px 35px rgba(0,0,0,0.12);
}

.rule-icon{
font-size:36px;
margin-bottom:10px;
}

.rule-card h3{
color:#002855;
margin-bottom:10px;
}

.rule-card ul{
padding-left:18px;
color:#444;
line-height:1.7;
}

.rule-card li{
margin-bottom:6px;
}

.footer-note{
text-align:center;
margin-top:40px;
color:#555;
font-size:14px;
}

/* ANIMASI TATA TERTIB – PURE CSS */
.rule-card {
opacity: 0;
transform: translateY(40px);
animation: fadeUp 0.8s ease forwards;
}

/* Delay bertahap */
.rule-card:nth-child(1) { animation-delay: 0.1s; }
.rule-card:nth-child(2) { animation-delay: 0.3s; }
.rule-card:nth-child(3) { animation-delay: 0.5s; }
.rule-card:nth-child(4) { animation-delay: 0.7s; }
.rule-card:nth-child(5) { animation-delay: 0.9s; }

@keyframes fadeUp {
to {
opacity: 1;
transform: translateY(0);
}
}

@media(max-width:900px){
.rules-grid{grid-template-columns:repeat(2,1fr);}
}

@media(max-width:600px){
.rules-grid{grid-template-columns:1fr;}
.rule-card {
opacity: 0;
transform: translateY(50px);
transition: all 0.7s ease;
}

.rule-card.show {
opacity: 1;
transform: translateY(0);
}

.akses-badge{
display:inline-block;
margin-top:14px;
padding:6px 14px;
border:2px solid #002855;
color:#002855;
text-decoration:none;
border-radius:10px;
font-size:13px;
font-weight:600;
transition:all .25s ease;
}

.akses-badge:hover{
background:#002855;
color:#fff;
}

//