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

body{
    font-family:'Poppins',sans-serif;
    background:var(--bg-page, #f0f0f0);
    color:#333;
    min-height:100vh;
    display:flex;
    justify-content:center;
}

.container{
    width:100%;
    max-width:480px;
    padding:40px 20px;
    background:#111;
    box-shadow:0 0 20px rgba(0,0,0,.3);
    min-height:100vh;
}

/* HERO */
.hero{
    width:100%;
    border-radius:16px;
    overflow:hidden;
    margin-bottom:18px;
    position:relative;
    height:160px;
}
.hero-bg{
    width:100%;height:100%;
    background-position:center;
    background-size:cover;
    background-repeat:no-repeat;
}
.hero-simple .hero-bg{filter:brightness(0.96);}
.hero-rounded .hero-bg{border-radius:20px;}
.hero-overlay .hero-bg{filter:brightness(0.55);}
.hero-overlay .hero-overlay{
    position:absolute;inset:0;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    text-align:center;color:#fff;padding:10px;
}
.hero-overlay h2{font-size:1.1rem;margin-bottom:4px;}
.hero-overlay p{font-size:.85rem;opacity:.9;}
@media (max-width:480px){ .hero{height:140px;} }

/* PROFILE */
.profile-section{text-align:center;margin-bottom:18px}
.profile-img-wrapper{
    width:110px;height:110px;margin:0 auto 12px;border-radius:50%;overflow:hidden;
    border:3px solid var(--brand-color,#2E7D32);padding:3px;
}
.profile-img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.school-name{font-size:1.3rem;font-weight:600;margin-bottom:5px;color:#fff}
.tagline{font-size:.9rem;color:#ccc}

/* Logo anim */
.logo-spin .profile-img-wrapper{animation:logoSpin 4s linear infinite;}
@keyframes logoSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.logo-float .profile-img-wrapper{animation:logoFloat 3s ease-in-out infinite;}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.logo-pulse .profile-img-wrapper{animation:logoPulse 2s ease-in-out infinite;}
@keyframes logoPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}

/* ===================== */
/* SLIDER (FIX NO NEROBOS) */
/* Rasio 16:9 pakai padding-top 56.25% */
/* ===================== */
.slide-header{
    width:100%;
    margin-bottom:18px;
    border-radius:12px;
    border:1px solid #333;
    overflow:hidden;
    background:#000;
}

/* ini yang ngunci tinggi */
.slide-inner{
    position:relative;
    width:100%;
    padding-top:56.25%; /* 9/16 = 0.5625 */
    overflow:hidden;
}

/* track & slide */
.slide-track{
    position:absolute;
    inset:0;
    display:flex;
    height:100%;
    width:100%;
    transform:translate3d(0,0,0);
    transition:transform .6s ease;
}

.slide-item{
    position:relative;
    flex:0 0 100%;
    width:100%;
    height:100%;
    overflow:hidden;
}

.slide-item img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* LINKS */
.links-container{display:flex;flex-direction:column;gap:15px}
.link-card{
    display:flex;align-items:flex-start;
    background:var(--link-card-color,#1f1f1f);
    border:1px solid #333;
    padding:15px 18px;
    border-radius:var(--card-radius,16px);
    text-decoration:none;
    color:var(--link-text-color,#f5f5f5);
    font-family:var(--link-font-family,"Poppins",sans-serif);
    font-size:var(--link-font-size,0.95rem);
    font-weight:var(--link-font-weight,500);
    transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease, opacity .3s ease;
    position:relative;overflow:hidden;
}
.icon-wrapper{
    width:32px;text-align:center;font-size:1.2rem;margin-right:14px;color:var(--brand-color,#4caf50);
}
.link-text{flex:1;font:inherit}
.share-icon{font-size:.8rem;color:#aaa;margin-left:8px}

/* Shadow mode */
body[data-card-shadow="none"] .link-card{box-shadow:none;}
body[data-card-shadow="soft"] .link-card{box-shadow:0 4px 10px rgba(0,0,0,.25);}
body[data-card-shadow="strong"] .link-card{box-shadow:0 8px 24px rgba(0,0,0,.45);}

/* Hover & highlight */
.link-card:hover{box-shadow:0 5px 15px rgba(0,0,0,.5);border-color:var(--brand-color)}
.link-card:active{transform:scale(.98)}
.link-card.highlight{background:var(--brand-color);color:#fff;border:none;animation:pulse 2s infinite}
.link-card.highlight .icon-wrapper,.link-card.highlight .share-icon{color:#fff}

/* IMAGE CARD – sejajar ikon, rasio 4:3 */
.image-card .image-wrapper{
    margin-top:8px;border-radius:10px;overflow:hidden;border:1px solid #444;position:relative;
    width:calc(100% + 46px);
    margin-left:-46px;
    aspect-ratio:4/3;
}
.image-card img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 60%;display:block;
}

/* PDF CARD – sejajar ikon */
.pdf-card .pdf-wrapper{
    margin-top:8px;border-radius:10px;overflow:hidden;border:1px solid #444;position:relative;
    width:calc(100% + 46px);
    margin-left:-46px;
    height:260px;background:#000;
}
.pdf-card iframe{width:100%;height:100%;border:none}
.pdf-btn{
    display:inline-block;margin-top:8px;font-size:.85rem;padding:6px 12px;border-radius:999px;
    border:1px solid var(--brand-color);color:var(--brand-color);text-decoration:none;background:transparent;
}
.pdf-btn:hover{background:var(--brand-color);color:#fff}

/* Text card */
.text-card .small-text{margin-top:6px;font-size:.85rem;color:#ccc}

/* Animasi link */
.anim-slide:hover{transform:translateX(4px)}
.anim-zoom:hover{transform:translateY(-3px) scale(1.02)}
.anim-fade:hover{opacity:.85}
.anim-bounce:hover{animation:bounce .4s ease}
@keyframes bounce{0%{transform:translateY(0)}30%{transform:translateY(-4px)}60%{transform:translateY(2px)}100%{transform:translateY(0)}}
.anim-wiggle:hover{animation:wiggle .35s ease}
@keyframes wiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}50%{transform:translateX(3px)}75%{transform:translateX(-2px)}}
.anim-glow:hover{box-shadow:0 0 0 2px var(--brand-color),0 0 18px rgba(76,175,80,.8)}
.anim-tilt:hover{transform:rotate(-1.5deg) scale(1.01)}

/* Footer */
.footer-section{text-align:center;margin-top:35px}
.sosmed-icons a{color:#888;font-size:1.5rem;margin:0 8px;transition:color .3s}
.sosmed-icons a:hover{color:var(--brand-color)}
.copy{font-size:.75rem;color:#777;margin-top:10px}

/* Pulse */
@keyframes pulse{
    0%{box-shadow:0 0 0 0 rgba(76,175,80,.6)}
    70%{box-shadow:0 0 0 12px rgba(76,175,80,0)}
    100%{box-shadow:0 0 0 0 rgba(76,175,80,0)}
}