/* =====================================
PONDOK PESANTREN AL IHSAN ISLAMIC CENTER
PREMIUM ISLAMIC MODERN V1.0
===================================== */

/* GOOGLE FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

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

html{
scroll-behavior:smooth;
}

body{
font-family:'Poppins',sans-serif;
background:#ffffff;
color:#222;
overflow-x:hidden;

background:
radial-gradient(
circle at top right,
rgba(31,107,79,.10) 0%,
transparent 30%
),

radial-gradient(
circle at bottom left,
rgba(212,175,55,.08) 0%,
transparent 25%
),

linear-gradient(
180deg,
#f8fcfa 0%,
#eef7f2 50%,
#f6fbf8 100%
);

color:#222;
overflow-x:hidden;

}

/* =====================================
COLOR SYSTEM
===================================== */

:root{
--primary:#1f6b4f;
--primary-dark:#164d39;
--secondary:#d4af37;
--white:#ffffff;
--light:#f8faf8;
--dark:#1a1a1a;
--gray:#6b7280;

--radius:20px;  

--shadow-sm:0 5px 15px rgba(0,0,0,.08);  
--shadow-md:0 10px 25px rgba(0,0,0,.12);  
--shadow-lg:0 15px 40px rgba(0,0,0,.15);  

--transition:.3s ease;

}

.nav-menu a.active{

background:
linear-gradient(
135deg,
#d4af37,
#f5d77b
);

color:#164d39;

padding:9px 18px;

border-radius:999px;

font-weight:700;

box-shadow:
0 5px 15px rgba(212,175,55,.35);
}
/* =====================================
GLOBAL
===================================== */

.container{
width:90%;
max-width:1200px;
margin:auto;
}

.section{
padding:80px 0;
}

img{
max-width:100%;
display:block;
}

a{
text-decoration:none;
}

ul{
list-style:none;
}

.hidden{
display:none;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
}

html,
body{
overflow-x:hidden;
}

/* =====================================
LOADING SCREEN
===================================== */

#loader{
position:fixed;
inset:0;
background:#ffffff;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
z-index:99999;
transition:.5s;
}

#loader img{
width:100px;
margin-bottom:20px;
}

#loader h2{
color:var(--primary);
font-size:1.2rem;
text-align:center;
}

.loader-hide{
opacity:0;
visibility:hidden;
}

/* =====================================
HEADER
===================================== */

header{
position:fixed;
top:0;
left:0;
width:100%;
z-index:999;
border-bottom:
1px solid rgba(212,175,55,.25);
transition:.4s ease;

background:
rgba(15,77,57,.20);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

border-bottom:
1px solid rgba(255,255,255,.12);
}

header.scrolled{

background:
rgba(31,107,79,.96);

backdrop-filter:blur(18px);

-webkit-backdrop-filter:blur(18px);

box-shadow:
0 8px 25px rgba(0,0,0,.18);

border-bottom:
1px solid rgba(255,255,255,.10);
}

.navbar{
display:flex;
justify-content:space-between;
align-items:center;
padding:6px 4%;
}

.logo-area{

display:flex;
align-items:center;
gap:10px;

padding:4px 10px;

background:
rgba(255,255,255,.18);

backdrop-filter:blur(10px);

border-radius:16px;

border:
1px solid rgba(255,255,255,.25);

box-shadow:
0 4px 20px rgba(255,255,255,.10);

transition:.3s ease;
}

.logo-area:hover{

transform:translateY(-2px);

box-shadow:
0 8px 25px rgba(255,255,255,.18);

}

.logo-area img{
width:28px;
height:28px;
object-fit:contain;
}

.logo-text{
font-weight:600;
color:white;
font-size:65rem;
line-height:1.2;
}

.logo-text{
text-shadow:
0 2px 6px rgba(0,0,0,.4);
}

header.scrolled .logo-text{
color:white;
}

header{

animation:
navbarFade .6s ease;
}
/* =====================================
HAMBURGER PREMIUM
===================================== */

.menu-toggle{

display:none;

width:32px;
height:26px;

position:relative;

cursor:pointer;

z-index:1001;

}

.menu-toggle span{

position:absolute;

left:0;

width:100%;
height:3px;

background:#fff;

border-radius:10px;

transition:.35s ease;

}

.menu-toggle span:nth-child(1){

top:0;

}

.menu-toggle span:nth-child(2){

top:11px;

}

.menu-toggle span:nth-child(3){

top:22px;

}

/* MENU TERBUKA */

.menu-toggle.active span:nth-child(1){

top:11px;

transform:rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

opacity:0;

}

.menu-toggle.active span:nth-child(3){

top:11px;

transform:rotate(-45deg);

}
/* =====================================
MENU OVERLAY
===================================== */

.menu-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:
rgba(0,0,0,.45);

opacity:0;

visibility:hidden;

transition:.3s ease;

z-index:998;

}

.menu-overlay.active{

opacity:1;

visibility:visible;

}

@keyframes navbarFade{

from{
opacity:0;
transform:translateY(-20px);
}

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

}

/* =====================================
DESKTOP MENU
===================================== */

.nav-menu{
display:flex;
gap:18px;
}

.nav-menu a{
color:white;
font-weight:500;
transition:var(--transition);
font-size:.9rem;
position:relative;
padding:8px 14px;
border-radius:999px;
}
/* =====================================
MENU AKTIF
===================================== */

.nav-menu a.active{

background:
linear-gradient(
135deg,
#d4af37,
#f7d774
);

color:#1f6b4f;

font-weight:700;

box-shadow:
0 4px 15px rgba(212,175,55,.35);

}
/* =====================================
MENU AKTIF MOBILE
===================================== */

.mobile-menu a.active{

display:flex;
justify-content:center;
align-items:center;
text-align:center;
background:
linear-gradient(
135deg,
#d4af37,
#f4d978
);
color:#1f6b4f;
font-weight:700;
border-radius:14px;
padding:10px 14px;
height:44px;
min-height:48px;
box-shadow:
0 0 20px rgba(212,175,55,.25);
height:56px;

}
/*===================================== */

header.scrolled .nav-menu a{
color:white;
}

.nav-menu a:hover{
color:var(--secondary);
background:
rgba(255,255,255,.12);
backdrop-filter:blur(6px);
transform:translateY(-2px);
}
.welcome-readmore-btn{
display:none !important;
}

/* =====================================
MOBILE MENU
===================================== */

.menu-toggle{
display:none;
font-size:28px;
color:#ffffff;
cursor:pointer;

text-shadow:
0 2px 8px rgba(0,0,0,.35);
}

header.scrolled .menu-toggle{
color:#ffffff;

text-shadow:
0 2px 8px rgba(0,0,0,.35);
}

.mobile-menu{
position:fixed;
top:0;
left:-300px;
width:280px;
height:100vh;
background: #f5f0e6;
backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);
box-shadow:var(--shadow-lg);
z-index:9999;
padding:15px 20px 20px;
transition:.4s;
}
.mobile-menu-header{
display:flex;
align-items:center;
gap:14px;
padding:14px 16px;
background:rgba(255,255,255,.06);
margin-bottom:10px;
border-radius:20px;
padding-bottom:18px;
border:1px solid rgba(255,255,255,.1);
border-bottom:
1px solid rgba(255,255,255,.12);
}

.mobile-menu-header img{
width:55px;
height:55px;
object-fit:contain;
flex-shrink:0;
padding:8px;
background:rgba(15,77,57,.12);
backdrop-filter:blur(12px);
border-radius:16px;

}

.mobile-menu-title h3{
    color:#0f4d39;
    text-shadow:0 1px 2px rgba(255,255,255,.3);
    font-size:18px;
    font-weight:800;
    line-height:1.2;
    margin:0;
}

.mobile-menu-title p{

margin:3px 0 0;

font-size:.9rem;

color:rgba(255,255,255,.7);

}

.mobile-menu.active{
left:0;
}

.mobile-menu a{
display:block;
padding:12px 0;
margin-bottom:4px;
color:#1f3d32;
font-weight:600;
border-bottom:1px solid rgba(15,77,57,.25);
display:flex;
padding-left:20px;
align-items:center;
text-align:left;
white-space:nowrap;
font-size:14px;
}
/* =====================================
NAVBAR
===================================== */

.navbar{

position:fixed;
top:0;
left:0;

width:100%;

display:flex;
justify-content:space-between;
align-items:center;

padding:15px 5%;

background:
rgba(15,77,57,.15);

backdrop-filter:blur(18px);
-webkit-backdrop-filter:blur(18px);

transition:
all .35s ease;

z-index:999;

animation:
navbarFade .6s ease;

}

/* =====================================
NAVBAR SAAT SCROLL
===================================== */

.navbar.scrolled{

background:
#0f4d39;

box-shadow:
0 8px 25px rgba(0,0,0,.15);

}
/* =====================================
HERO SECTION
===================================== */

.hero{
min-height:700px;
height:auto;
position:relative;
display:flex;
justify-content:flex-start;
align-items:center;
text-align:center;
color:white;
overflow:hidden;
background-size:cover !important;
background-position:center center !important;
background-repeat:no-repeat !important;
padding-top:100px;
animation:
heroFloat 18s ease-in-out infinite;
}
@keyframes heroFloat{

0%{

background-position:
center center;

}

50%{

background-position:
center 55%;

}

100%{

background-position:
center center;

}

}

.hero::before{
content:"";
position:absolute;
inset:0;
background:linear-gradient(
to bottom,
rgba(0,0,0,.30),
rgba(0,0,0,.45)
);
}

.hero-content{
position:relative;
z-index:2;
width:90%;
max-width:900px;
text-align:center;
margin:auto;
display:flex;
flex-direction:column;
align-items:center;
}

/* =====================================
HERO BADGE
===================================== */

.hero-badge{

display:inline-flex;

align-items:center;

justify-content:center;

padding:10px 18px;

margin-bottom:20px;

border-radius:999px;

background:
rgba(255,255,255,.12);

backdrop-filter:blur(12px);

-webkit-backdrop-filter:blur(12px);

border:
1px solid rgba(255,255,255,.20);

color:#f7d774;

font-size:.85rem;

font-weight:600;

letter-spacing:.4px;

box-shadow:
0 8px 25px rgba(0,0,0,.15);

animation:
badgeGlow 4s ease-in-out infinite;

}
@keyframes badgeGlow{

0%{

box-shadow:
0 8px 20px rgba(0,0,0,.15);

}

50%{

box-shadow:
0 8px 25px rgba(212,175,55,.30);

}

100%{

box-shadow:
0 8px 20px rgba(0,0,0,.15);

}

}

.hero h1{
font-size:clamp(2rem,5vw,4rem);
font-weight:800;
margin-bottom:15px;
text-shadow:
0 4px 15px rgba(0,0,0,.45);
}

.hero p{
font-size:1rem;
line-height:1.7;
max-width:320px;
margin:auto;
}

.hero-line{
width:90px;
height:3px;
margin:25px auto;
border-radius:50px;

background:linear-gradient(
90deg,
transparent,
#d4af37,
#f7d774,
#d4af37,
transparent
);
animation:
goldGlow 3s ease-in-out infinite;
}
@keyframes goldGlow{

0%{

opacity:.7;

box-shadow:
0 0 8px rgba(212,175,55,.2);

}

50%{

opacity:1;

box-shadow:
0 0 20px rgba(212,175,55,.5);

}

100%{

opacity:.7;

box-shadow:
0 0 8px rgba(212,175,55,.2);

}

}

.hero-buttons{
display:flex;
justify-content:center;
align-items:center;
flex-direction:row;
gap:20px;
flex-wrap:wrap;
}

.hero-buttons img{
width:220px;
height:auto;
filter:
drop-shadow(0 8px 15px rgba(0,0,0,.25));
}

/* =====================================
BUTTON AREA
===================================== */

.quick-links .button-grid{
display:flex;
flex-direction:column;
align-items:center;
gap:15px;
}

.row-top,
.row-bottom{
display:flex;
justify-content:center;
gap:20px;
flex-wrap:wrap;
}

.row-top a,
.row-bottom a{
width:140px;
display:flex;
justify-content:center;
}

.row-top img,
.row-bottom img{
width:140px;
height:auto;
transition:0.3s;
}

.row-top img:hover,
.row-bottom img:hover{
transform:translateY(-3px);
}
/* =====================================
JELAJAHI WEBSITE PANAH
===================================== */

.hero-explore{

margin-top:35px;

display:flex;

justify-content:center;

}

.explore-link{

display:flex;

flex-direction:column;

align-items:center;

gap:8px;

color:white;

font-size:.95rem;

font-weight:600;

letter-spacing:.5px;

text-decoration:none;

transition:.3s ease;

}

.explore-link:hover{

transform:translateY(-3px);

}

.explore-arrow{

font-size:1.8rem;

color:#f7d774;

animation:
arrowFloat 2s ease-in-out infinite;

text-shadow:
0 0 15px rgba(247,215,116,.5);

}
@keyframes arrowFloat{

0%{
transform:translateY(0);
}

50%{
transform:translateY(8px);
}

100%{
transform:translateY(0);
}

}
/* =====================================
JELAJAHI WEBSITE
===================================== */

.explore{
margin-top:-120px;
position:relative;
z-index:5;
}

.explore-card{
padding:20px;
background:
linear-gradient(
135deg,
rgba(31,107,79,.08),
rgba(255,255,255,.92)
);
backdrop-filter:blur(20px);
border:1px solid rgba(31,107,79,.15);
border-radius:30px;  
padding:25px;  
box-shadow:  
0 25px 50px rgba(0,0,0,.15);
overflow:hidden;
position:relative;
transform:none;
}

.explore-title{
text-align:center;
color:#1f6b4f;
margin-bottom:10px;
font-size:1.6rem;
font-weight:800;
text-shadow:
0 3px 10px rgba(31,107,79,.15);
}

.explore-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px;
justify-items:center;
align-items:center;
}

.explore-grid img{
width:100%;
transition:.3s;
}

.explore-grid img:hover{
transform:translateY(-5px) scale(1.05);
}
.explore-card::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;

background:linear-gradient(
90deg,
#d4af37,
#f7d774,
#d4af37
);
}

/* =====================================
KATA PENGANTAR
===================================== */

.welcome-grid{
display:block;
grid-template-columns:350px 1fr;
gap:40px;
align-items:center;
}

.welcome-image{
float:left;
width:340px;
margin-right:35px;
margin-bottom:20px;
}

.welcome-image img{
width:100%;
display:block;

border-radius:20px;

box-shadow:
0 15px 40px rgba(0,0,0,.12);
}

.welcome-title{
font-size:2.2rem;
font-weight:800;

background:linear-gradient(
135deg,
#d4af37,
#f7d774,
#d4af37
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;

margin-bottom:25px;
}

.islamic-greeting,
.islamic-closing{

text-align:center;

font-size:1.3rem;

font-weight:600;

color:#1f6b4f;

margin:25px 0;

line-height:2;
}

.islamic-greeting::before,
.islamic-closing::before{

content:"✦";

display:block;

color:#d4af37;

font-size:1.3rem;

margin-bottom:8px;
}

.islamic-greeting::after,
.islamic-closing::after{

content:"✦";

display:block;

color:#d4af37;

font-size:1.3rem;

margin-top:8px;
}

.welcome-text{
line-height:1.9;
}

.welcome-buttons{
display:flex;
justify-content:center;
gap:12px;
align-items:center;
margin-top:25px;
flex-wrap:wrap;
}

.welcome-buttons img{
width:180px;
}

.read-more-btn{
padding:12px 24px;

border:none;

border-radius:999px;

background:linear-gradient(
135deg,
#d4af37,
#f7d774
);

color:#164d39;

font-weight:700;

cursor:pointer;

transition:.3s;
}

.read-more-btn:hover{
transform:translateY(-3px);
}
/* =====================================
TOMBOL KATA PENGANTAR HOME
===================================== */

.welcome-btn{

padding:12px 22px;

border-radius:999px;

background:
linear-gradient(
135deg,
#1f6b4f,
#2e8b68
);

color:white;

font-weight:600;

transition:.3s ease;

display:inline-flex;

align-items:center;

justify-content:center;

}

.welcome-btn:hover{

transform:translateY(-3px);

}

.welcome-readmore-btn{

padding:12px 22px;

display:none;

border:none;

border-radius:999px;

background:
linear-gradient(
135deg,
#d4af37,
#f7d774
);

color:#222;

font-weight:700;

cursor:pointer;

align-items:center;

gap:10px;

transition:.3s ease;

}

.welcome-readmore-btn:hover{

transform:translateY(-3px);

}

.welcome-arrow{

transition:
transform .35s ease;

}

.welcome-arrow.rotate{

transform:rotate(180deg);

}

/* =====================================
KEUNGGULAN PONDOK
===================================== */

.advantages-box{
text-align:center;
}

.advantages-title{

font-size:2rem;
font-weight:800;
margin-bottom:10px;

background:
linear-gradient(
90deg,
#d4af37,
#f7d774,
#d4af37
);

-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

.advantages-subtitle{

max-width:700px;
margin:0 auto 35px;

color:#666;
line-height:1.8;
}

.advantages-grid{

display:grid;

grid-template-columns:
repeat(auto-fit,minmax(250px,1fr));

gap:25px;
}

.advantage-card{

background:#fff;

border-radius:25px;

padding:25px;

position:relative;

overflow:hidden;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

transition:.35s ease;
}

.advantage-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:
linear-gradient(
90deg,
#d4af37,
#f7d774,
#d4af37
);
}

.advantage-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 35px rgba(0,0,0,.12);
}

.advantage-card img{

width:80px;
height:80px;

object-fit:contain;

margin:0 auto 15px;
}

.advantage-card h3{

color:#1f6b4f;

margin-bottom:10px;
}

.advantage-card p{

line-height:1.8;

color:#555;
}

/* =====================================
PROGRAM UNGGULAN SANTRI
===================================== */

.program-title{
text-align:center;
color:#d4af37;
font-size:2rem;
font-weight:800;
margin-bottom:10px;
}

.program-subtitle{
text-align:center;
color:#666;
line-height:1.8;
max-width:700px;
margin:0 auto 30px;
}

.accordion-item{
margin-bottom:15px;
border-radius:20px;
overflow:hidden;
background:
linear-gradient(
135deg,
rgba(31,107,79,.04),
rgba(255,255,255,.95)
);

border:
1px solid rgba(31,107,79,.12);

transition:.3s;
}

.accordion-item:hover{

transform:translateY(-2px);

box-shadow:
0 10px 25px rgba(0,0,0,.08);

}

.accordion-header{

width:100%;
border:none;
background:none;

padding:20px 24px;

display:flex;
justify-content:space-between;
align-items:center;

cursor:pointer;

font-size:1.05rem;
font-weight:700;

color:#1f6b4f;

font-family:'Poppins',sans-serif;
}

.accordion-header i{
transition:.3s;
color:#d4af37;
}

.accordion-item.active i{
transform:rotate(180deg);
}

.accordion-content{

max-height:0;

overflow:hidden;

transition:max-height .4s ease;

background:white;
}

.accordion-content p{

padding:0 24px 24px;

line-height:1.9;
color:#555;
}

.program-divider{

width:120px;
height:2px;

margin:35px auto 25px;

background:
linear-gradient(
90deg,
transparent,
#d4af37,
transparent
);

}

.program-cta-text{

text-align:center;

max-width:700px;

margin:auto;

line-height:1.8;

color:#666;

margin-bottom:25px;

}

.program-button{

text-align:center;

margin-top:10px;

}

.program-button a{

display:inline-flex;

align-items:center;

gap:10px;

padding:14px 28px;

border-radius:999px;

background:
linear-gradient(
135deg,
#d4af37,
#f7d774
);

color:#164d39;

font-weight:700;

box-shadow:
0 8px 20px rgba(212,175,55,.35);

transition:.3s;

}

.program-button a:hover{

transform:translateY(-3px);

box-shadow:
0 15px 30px rgba(212,175,55,.45);

}

/* =====================================
PROGRAM EKSTRAKURIKULER
===================================== */

.ekskul-title{
text-align:center;
color:#d4af37;
font-size:2rem;
font-weight:800;
margin-bottom:10px;
}

.ekskul-subtitle{
text-align:center;
max-width:800px;
margin:auto;
line-height:1.8;
color:#666;
margin-bottom:35px;
}

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

.ekskul-card{

background:white;

border-radius:25px;

overflow:hidden;

border:
1px solid rgba(31,107,79,.10);

box-shadow:
0 10px 30px rgba(0,0,0,.08);

transition:.35s ease;
}

.ekskul-card:hover{

transform:translateY(-8px);

box-shadow:
0 20px 40px rgba(0,0,0,.12);

}

.ekskul-card img{

width:100%;

height:230px;

object-fit:cover;
}

.ekskul-content{
padding:25px;
}

.ekskul-content h3{

color:#1f6b4f;

font-size:1.2rem;

margin-bottom:15px;
}

.ekskul-content ul{
padding-left:18px;
}

.ekskul-content li{

margin-bottom:10px;

line-height:1.6;

color:#555;
}

/* =====================================
TARGET LULUSAN
===================================== */

.lulusan-title{

text-align:center;

font-size:2rem;

font-weight:800;

color:#d4af37;

margin-bottom:10px;
}

.lulusan-subtitle{

text-align:center;

max-width:850px;

margin:auto;

line-height:1.8;

color:#666;

margin-bottom:40px;
}

.lulusan-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:25px;
}

.lulusan-card{

position:relative;

background:white;

padding:35px;

border-radius:25px;

overflow:hidden;

border:
1px solid rgba(31,107,79,.10);

box-shadow:
0 10px 30px rgba(0,0,0,.08);

transition:.35s ease;
}

.lulusan-card:hover{

transform:
translateY(-8px);

box-shadow:
0 20px 40px rgba(0,0,0,.12);
}

.lulusan-number{

position:absolute;

top:15px;

right:20px;

font-size:3rem;

font-weight:800;

color:
rgba(212,175,55,.15);
}

.lulusan-icon{

margin-bottom:15px;
}

.lulusan-icon img{

width:70px;

height:70px;

object-fit:contain;

display:block;
}

.lulusan-card h3{

color:#1f6b4f;

margin-bottom:12px;

font-size:1.3rem;
}

.lulusan-card p{

line-height:1.8;

color:#555;
}

.lulusan-footer{

margin-top:40px;

padding-top:25px;

border-top:
1px solid rgba(31,107,79,.10);

text-align:center;
}

.lulusan-footer p{

max-width:850px;

margin:auto;

font-size:1.05rem;

line-height:1.9;

font-weight:500;

color:#1f6b4f;
}

/* =====================================
MENGAPA MEMILIH AL IHSAN
===================================== */

.why-grid{

display:grid;

grid-template-columns:
1fr 1.2fr;

gap:40px;

align-items:center;
}

.why-image img{

width:100%;

height:100%;

min-height:420px;

object-fit:cover;

border-radius:25px;

box-shadow:
0 15px 35px rgba(0,0,0,.12);
}

.why-content h2{

color:#d4af37;

font-size:2rem;

font-weight:800;

margin-bottom:20px;
}

.why-desc{

line-height:1.9;

color:#555;

margin-bottom:25px;
}

.why-list{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:15px;
}

.why-item{

background:
rgba(31,107,79,.06);

padding:14px 18px;

border-radius:14px;

font-weight:600;

color:#1f6b4f;

transition:.3s;
}

.why-item:hover{

transform:translateY(-4px);

background:
rgba(31,107,79,.10);
}

.why-button{

margin-top:35px;
}

.why-button a{

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 30px;

background:
linear-gradient(
135deg,
#1f6b4f,
#2d8a64
);

color:white;

font-weight:700;

border-radius:50px;

box-shadow:
0 10px 25px rgba(31,107,79,.25);

transition:.3s;
}

.why-button a:hover{

transform:translateY(-4px);

box-shadow:
0 15px 35px rgba(31,107,79,.35);
}
/* =====================================
CTA SECTION
===================================== */

.cta-section{

margin-top:40px;

padding:70px 30px;

border-radius:30px;

background:
linear-gradient(
135deg,
#1f6b4f,
#2d8a64
);

position:relative;

overflow:hidden;

text-align:center;

color:white;
}

.cta-section::before{

content:"";

position:absolute;

top:-100px;
right:-100px;

width:250px;
height:250px;

border-radius:50%;

background:
rgba(212,175,55,.12);
}

.cta-content{

position:relative;
z-index:2;
}

.cta-content h2{

font-size:2.2rem;

font-weight:800;

margin-bottom:20px;
}

.cta-content p{

max-width:800px;

margin:auto;

line-height:1.9;

margin-bottom:30px;
}

.cta-btn{

display:inline-block;

padding:15px 35px;

border-radius:50px;

background:#d4af37;

color:white;

font-weight:700;

transition:.3s;
}

.cta-btn:hover{

transform:translateY(-5px);

background:#c79f22;
}

/* =====================================
ALUR PENDAFTARAN
===================================== */

.alur-title{

text-align:center;

font-size:2rem;

font-weight:800;

color:#d4af37;

margin-bottom:10px;
}

.alur-subtitle{

text-align:center;

margin-bottom:40px;

color:#666;
}

.alur-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:30px;
}

.alur-card{

background:white;

padding:30px;

border-radius:25px;

box-shadow:
0 10px 25px rgba(0,0,0,.08);

text-align:center;
}

.alur-card h3{

color:#1f6b4f;

margin-bottom:25px;
}

.step{

padding:12px;

border-radius:12px;

background:
rgba(31,107,79,.05);

font-weight:600;
}

.arrow{

font-size:1.5rem;

margin:10px 0;

color:#d4af37;
}

.alur-btn{

display:inline-block;

margin-top:25px;

padding:14px 30px;

border-radius:50px;

background:
linear-gradient(
135deg,
#1f6b4f,
#2d8a64
);

color:white;

font-weight:700;
}

.ppdb-more{

text-align:center;

margin-top:35px;
}

.ppdb-more a{

display:inline-flex;

align-items:center;

gap:10px;

padding:15px 35px;

border-radius:50px;

background:
linear-gradient(
135deg,
#d4af37,
#f0c75a
);

color:white;

font-weight:700;

box-shadow:
0 10px 25px rgba(212,175,55,.25);

transition:.3s;
}

.ppdb-more a:hover{

transform:translateY(-4px);
}
/* =====================================
HALAMAN PROFILE
===================================== */
/* =====================================
SEJARAH BERDIRI PONDOK
===================================== */

.history-title{

text-align:center;
font-size:2rem;
font-weight:800;
color:#d4af37;
margin-bottom:10px;

}

.history-subtitle{

text-align:center;
color:#666;
margin-bottom:40px;

}

.history-wrapper{

display:block;

}

.history-image{

float:left;

width:380px;

margin-right:30px;

margin-bottom:15px;

}

.history-image img{

width:100%;

border-radius:20px;

display:block;

}

.history-wrapper::after{

content:"";

display:block;

clear:both;

}

.history-image img{

width:100%;
height:100%;
object-fit:cover;

border-radius:20px;

box-shadow:
0 10px 30px rgba(0,0,0,.12);

}

.history-content{

line-height:1.9;
color:#444;

}

.history-content p{

margin-bottom:15px;

}

.history-full{

display:none;

}

.history-btn{

display:none;

margin-top:20px;

padding:12px 25px;

border:none;

border-radius:50px;

background:
linear-gradient(
135deg,
#d4af37,
#f7d774
);

font-weight:700;
cursor:pointer;

transition:.3s;

}

.history-btn:hover{

transform:translateY(-3px);

}

/* =====================================
VISI & MISI
===================================== */

.vision-section-title{

text-align:center;
font-size:2rem;
font-weight:800;
color:#d4af37;
margin-bottom:10px;

}

.vision-section-subtitle{

text-align:center;
color:#666;
max-width:800px;
margin:0 auto 40px;

}

.vision-grid{

display:grid;
grid-template-columns:1fr 1fr;
gap:30px;

}

.vision-card{

background:#fff;

padding:35px;

border-radius:24px;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

transition:.35s ease;

position:relative;

overflow:hidden;

}

.vision-card:hover{

transform:translateY(-6px);

box-shadow:
0 18px 40px rgba(0,0,0,.12);

}

.vision-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:linear-gradient(
90deg,
#d4af37,
#f7d774,
#d4af37
);

}

.vision-icon{

width:90px;
height:90px;

margin:0 auto 20px;

border-radius:50%;

background:#f8f4e6;

border:2px solid #d4af37;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

}

.vision-icon img{

width:55px;
height:55px;
object-fit:contain;

}

.vision-card h3{

text-align:center;

font-size:1.5rem;

color:#1f6b4f;

margin-bottom:20px;

}

.vision-card p{

line-height:1.9;
color:#444;
text-align:center;

}

.vision-card ul{

padding-left:20px;

}

.vision-card li{

margin-bottom:12px;
line-height:1.8;
color:#444;

}

.vision-card ul{

list-style:none;

padding:0;
margin:0;

}

.vision-card li{

position:relative;

padding-left:24px;

margin-bottom:14px;

line-height:1.7;

}

.vision-card li::before{

content:"◆";

position:absolute;

left:0;

color:#d4af37;

font-size:.9rem;

font-weight:bold;

}
/* =====================================
PILAR UTAMA PENDIDIKAN (4D)
===================================== */

.pillar-title{

text-align:center;
font-size:2rem;
font-weight:800;
color:#d4af37;
margin-bottom:10px;

}

.pillar-subtitle{

text-align:center;
max-width:800px;
margin:0 auto 40px;
color:#666;

}

.pillar-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;

}

.pillar-card{

background:#fff;

padding:25px;

border-radius:24px;

text-align:center;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

transition:.35s ease;

position:relative;

overflow:hidden;

}

.pillar-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:linear-gradient(
90deg,
#d4af37,
#f7d774,
#d4af37
);

}

.pillar-card:hover{

transform:translateY(-8px);

box-shadow:
0 18px 40px rgba(0,0,0,.12);

}

.pillar-icon{

width:90px;
height:90px;

margin:0 auto 18px;

background:#f8f4e6;

border:2px solid #d4af37;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

}

.pillar-icon img{

width:50px;
height:50px;
object-fit:contain;

}

.pillar-card h3{

color:#1f6b4f;

font-size:1.25rem;

margin-bottom:10px;

}

.pillar-card p{

color:#555;

line-height:1.8;

font-size:.95rem;

}
/* =====================================
TARGET LULUSAN SANTRI
===================================== */

.graduate-title{

text-align:center;
font-size:2rem;
font-weight:800;
color:#d4af37;
margin-bottom:10px;

}

.graduate-subtitle{

text-align:center;
max-width:800px;
margin:0 auto 40px;
color:#666;

}

.graduate-grid{

display:grid;
grid-template-columns:
repeat(3,1fr);

gap:20px;

}

.graduate-card{

background:#fff;

padding:25px;

border-radius:24px;

text-align:center;

position:relative;

overflow:hidden;

box-shadow:
0 10px 30px rgba(0,0,0,.08);

transition:.35s ease;

}

.graduate-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:linear-gradient(
90deg,
#d4af37,
#f7d774,
#d4af37
);

}

.graduate-card:hover{

transform:translateY(-8px);

box-shadow:
0 18px 40px rgba(0,0,0,.12);

}

.graduate-icon{

width:85px;
height:85px;

margin:0 auto 15px;

background:#f8f4e6;

border:2px solid #d4af37;

border-radius:50%;

display:flex;
align-items:center;
justify-content:center;

overflow:hidden;

}

.graduate-icon img{

width:45px;
height:45px;

object-fit:contain;

}

.graduate-card h3{

font-size:1.15rem;
color:#1f6b4f;

margin-bottom:10px;

}

.graduate-card p{

font-size:.92rem;
line-height:1.7;
color:#555;

}
/* =====================================
CTA PROFIL
===================================== */

.cta-profile{

background:
linear-gradient(
135deg,
#1f6b4f,
#2d8763
);

padding:60px 40px;

border-radius:30px;

text-align:center;

position:relative;

overflow:hidden;

box-shadow:
0 15px 40px rgba(31,107,79,.20);

}

.cta-profile::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:linear-gradient(
90deg,
#d4af37,
#f7d774,
#d4af37
);

}

.cta-profile h2{

color:white;

font-size:2rem;

margin-bottom:15px;

font-weight:800;

}

.cta-profile p{

color:
rgba(255,255,255,.9);

max-width:700px;

margin:0 auto 30px;

line-height:1.8;

}

.cta-profile-buttons{

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.cta-program,
.cta-daftar{

padding:14px 28px;

border-radius:999px;

font-weight:700;

text-decoration:none;

transition:.3s ease;

}

.cta-program{

background:white;

color:#1f6b4f;

}

.cta-program:hover{

transform:translateY(-4px);

}

.cta-daftar{

background:#d4af37;

color:white;

}

.cta-daftar:hover{

transform:translateY(-4px);

}
/* =====================================
HALAMAN PROGRAM PENDIDIKAN
===================================== */
/* =====================================
KATA PENGANTAR PROGRAM PENDIDIKAN
===================================== */

.program-intro-grid{

display:grid;
grid-template-columns:320px 1fr;
gap:35px;
align-items:center;

}

.program-intro-image img{

width:100%;
height:100%;

object-fit:cover;

border-radius:24px;

box-shadow:
0 10px 30px rgba(0,0,0,.1);

}

.program-intro-title{

font-size:2rem;
font-weight:800;

color:#1f6b4f;

margin-bottom:20px;

line-height:1.4;

}

.program-intro-content p{

line-height:1.9;

color:#555;

margin-bottom:15px;

}

.program-highlight{

display:flex;

gap:15px;

margin-top:25px;

flex-wrap:wrap;

}

.highlight-item{

background:#f7f9f8;

border:1px solid #e5e5e5;

padding:10px 18px;

border-radius:999px;

font-weight:600;

display:flex;
align-items:center;
gap:8px;

}
/* =========================================
PROGRAM UNGGULAN
========================================= */

.program-section{

    padding:80px 0;

}

.section-heading{

    text-align:center;

    max-width:700px;

    margin:0 auto 50px;

}

.section-badge{

    display:inline-block;

    padding:8px 18px;

    border-radius:999px;

    background:#eef8f2;

    color:#1f6b4f;

    font-size:.9rem;

    font-weight:600;

    margin-bottom:15px;

}

.section-heading h2{

    font-size:2.2rem;

    color:#1f6b4f;

    margin-bottom:15px;

    font-weight:800;

}

.section-heading p{

    color:#666;

    line-height:1.8;

}

/* GRID */

.program-grid{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:30px;

}

/* CARD */

.program-card{
    background:#fff;
    border-radius:28px;
    overflow:hidden;
    border:1px solid rgba(0,0,0,.05);
    box-shadow:
    0 10px 30px rgba(0,0,0,.06);
    transition:.4s ease;
    position:relative;
    animation-duration:.8s;
    animation-fill-mode:both;
    transition:
    .4s ease;
    position:relative;
    overflow:hidden;
}

.program-card:hover{

    transform:translateY(-8px);

    box-shadow:
    0 20px 45px rgba(0,0,0,.12);
    transform:
    translateY(-10px);

}

.program-image{

    height:220px;

    overflow:hidden;

}

.program-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

}

.program-card:hover img{

    transform:scale(1.08);

}

.program-card h3{

    text-align:center;

    font-size:1.4rem;

    color:#1f6b4f;

    margin:25px 20px;

    font-weight:700;
    display:flex;
    flex-direction:column;

    gap:2px;

}
.program-card h3 span{

    font-weight:800;

}
.program-card::after{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(
    135deg,
    rgba(212,175,55,.12),
    transparent
    );
    pointer-events:none;
    opacity:0;

    transition:.4s;

}
.program-card:hover::after{

    opacity:1;

}

.program-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    135deg,
    rgba(212,175,55,.08),
    transparent
    );

    opacity:0;

    transition:.4s;

}

.program-card:hover::before{

    opacity:1;

}

/* BUTTON */

.program-btn{

    display:block;

    width:fit-content;

    margin:0 auto 30px;

    padding:12px 24px;

    border-radius:999px;

    text-decoration:none;

    background:
    linear-gradient(
    135deg,
    #1f6b4f,
    #2d8a63
    );
    color:#fff;
    font-weight:600;
    transition:.3s;
    white-space:nowrap;
    text-align:center;
    display:flex;
    justify-content:center;
    align-items:center;
    position:relative;
    overflow:hidden;
}

.program-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

    background:

    linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.3),
    transparent
    );

    transition:.6s;

}

.program-btn:hover::before{

    left:100%;

}

.program-btn:hover{

    transform:translateY(-2px);
    transform:
    translateY(-3px)
    scale(1.03);
}

/* FOOTER */

.program-footer{

    text-align:center;

    margin-top:50px;

}

.education-btn{

    display:inline-block;

    padding:16px 32px;

    border-radius:999px;

    text-decoration:none;

    background:
    linear-gradient(
    135deg,
    #d4af37,
    #f3d57a
    );

    color:#222;

    font-weight:700;

    box-shadow:
    0 10px 25px rgba(212,175,55,.25);

    transition:.3s;

}

.education-btn:hover{
    transform:translateY(-3px);
    transform:
    translateY(-4px)
    scale(1.03);
}
/* =========================================
DETAIL PROGRAM
========================================= */

.detail-program-section{

    padding:80px 0;

}

.detail-program-card{

    background:#fff;

    border-radius:30px;

    padding:40px;

    box-shadow:
    0 10px 35px rgba(0,0,0,.06);

    border:1px solid rgba(0,0,0,.05);

}

/* HEADER */

.detail-program-header{

    display:grid;

    grid-template-columns:350px 1fr;

    gap:35px;

    align-items:start;

    margin-bottom:30px;

}

.detail-program-photo{

    overflow:hidden;

    border-radius:24px;

}

.detail-program-photo img{

    width:100%;

    display:block;

    transition:.5s;

}

.detail-program-card:hover .detail-program-photo img{

    transform:scale(1.05);

}

/* LABEL */

.program-label{

    display:inline-block;

    padding:8px 16px;

    border-radius:999px;

    background:#eef8f2;

    color:#1f6b4f;

    font-size:.85rem;

    font-weight:600;

    margin-bottom:15px;

}

/* TITLE */

.detail-program-intro h2{

    color:#1f6b4f;

    font-size:2rem;

    margin-bottom:15px;

    font-weight:800;

}

/* PARAGRAF */

.detail-program-intro p,
.detail-program-content p{

    color:#555;

    line-height:1.9;

}

/* MATERIAL */

.program-materials{

    display:grid;

    grid-template-columns:
    repeat(2,1fr);

    gap:15px;

    margin-top:30px;

}

.material-item{

    background:#f8faf8;

    padding:15px 18px;

    border-radius:15px;

    border:1px solid #eee;

    transition:.3s;

}

.material-item:hover{

    transform:translateY(-3px);

    border-color:#d4af37;

}

/* BUTTON */

.program-action{

    margin-top:35px;

    text-align:center;

}

.detail-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:14px 28px;

    border-radius:999px;

    text-decoration:none;

    background:
    linear-gradient(
    135deg,
    #d4af37,
    #f3d57a
    );

    color:#222;

    font-weight:700;

    transition:.3s;

    box-shadow:
    0 10px 25px rgba(212,175,55,.25);

}

.detail-btn:hover{

    transform:
    translateY(-4px)
    scale(1.03);

}
/* =========================================
TAHAPAN PENDIDIKAN
========================================= */

.education-section{

padding:90px 0;

}

.education-grid{

display:grid;

grid-template-columns:
repeat(3,1fr);

gap:25px;

margin-top:50px;

}

.education-card{

background:#fff;

padding:25px;

border-radius:24px;

border:1px solid rgba(0,0,0,.05);

box-shadow:
0 10px 30px rgba(0,0,0,.06);

transition:.4s;

}

.education-card:hover{
transform:translateY(-8px);
box-shadow:
0 20px 40px rgba(0,0,0,.10);
scale(1.02);
}

.education-level{

display:inline-block;

padding:8px 16px;

border-radius:999px;

background:#eef8f2;

color:#1f6b4f;

font-size:.8rem;

font-weight:700;

margin-bottom:15px;

}

.education-card h3{

color:#1f6b4f;

margin-bottom:15px;

font-size:1.3rem;

}

.education-card ul{

padding:0;

margin:0;

list-style:none;

}

.education-card li{

padding:8px 0;

line-height:1.7;

color:#555;

}

.education-final{

    border:2px solid #d4af37;
    background:
    linear-gradient(
    135deg,
    #fff,
    #fff8e6
    );
}
/* =========================================
CTA PENDAFTARAN
========================================= */

.cta-section{

padding:100px 0;

}

.cta-box{

text-align:center;

padding:60px 40px;

border-radius:32px;

background:

linear-gradient(
135deg,
#1f6b4f,
#2d8a63
);

color:#fff;

position:relative;

overflow:hidden;

}

.cta-badge{

display:inline-block;

padding:10px 20px;

border-radius:999px;

background:
rgba(255,255,255,.15);

backdrop-filter:blur(10px);

margin-bottom:20px;

font-size:.85rem;

font-weight:600;

}

.cta-box h2{

font-size:2.3rem;

margin-bottom:20px;

font-weight:800;

}

.cta-box p{

max-width:700px;

margin:auto;

line-height:1.9;

opacity:.95;

}

.cta-buttons{

margin-top:35px;

display:flex;

justify-content:center;

gap:15px;

flex-wrap:wrap;

}

.cta-primary{

padding:15px 30px;

border-radius:999px;

background:#d4af37;

color:#222;

text-decoration:none;

font-weight:700;

transition:.3s;

}

.cta-primary:hover{

transform:
translateY(-4px)
scale(1.03);

}

.cta-secondary{

padding:15px 30px;

border-radius:999px;

border:1px solid rgba(255,255,255,.3);

color:#fff;

text-decoration:none;

font-weight:600;

transition:.3s;

}

.cta-secondary:hover{

background:
rgba(255,255,255,.1);

}
/* =====================================
CONTENT SECTION
===================================== */

.content-placeholder{
padding:100px 0;
}

.content-box{
background:white;
border-radius:25px;
padding:40px;
box-shadow:var(--shadow-sm);

position:relative;
overflow:hidden;
}

.content-box::before{
content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:4px;

background:linear-gradient(
90deg,
#d4af37,
#f7d774,
#d4af37
);
}

.content-box h2{
color:var(--primary);
margin-bottom:15px;
}

/* =====================================
FOOTER PREMIUM
===================================== */

.footer{
background:
linear-gradient(
135deg,
#124734 0%,
#1f6b4f 50%,
#124734 100%
);
color:white;
padding:70px 0 30px;
margin-top:80px;
}

.footer-grid{
display:grid;
grid-template-columns:1.5fr 1fr 1fr;
gap:40px;
}

.footer-logo{
width:90px;
margin-bottom:15px;
}

.footer-title{
font-size:1.4rem;
font-weight:700;
margin-bottom:15px;
}

.footer-text{
opacity:.9;
line-height:1.8;
}

.footer-heading{
font-size:1.1rem;
font-weight:600;
margin-bottom:15px;
}

.footer-links a{
display:block;
color:white;
margin-bottom:10px;
transition:.3s;
}

.footer-links a:hover{
transform:translateX(5px);
color:var(--secondary);
}

.footer-bottom{
border-top:1px solid rgba(255,255,255,.15);
margin-top:40px;
padding-top:20px;
text-align:center;
font-size:.9rem;
}

.footer-logo-box{
display:inline-flex;
padding:18px;

background:
rgba(255,255,255,.08);

backdrop-filter:blur(10px);

border-radius:20px;

border:
1px solid rgba(255,255,255,.15);
}

/* =====================================
FLOATING WHATSAPP
===================================== */

.floating-wa{
position:fixed;
bottom:12px;
right:15px;
z-index:999;
transition:.3s ease;
}

.floating-wa.move-up{
bottom:90px;
}

.wa-main{
width:60px;
height:60px;
border-radius:50%;
background:#25D366;
display:flex;
align-items:center;
justify-content:center;
color:white;
font-size:32px;
cursor:pointer;
box-shadow:var(--shadow-lg);
animation: waPulse 2.5s infinite;
transition:.3s ease;
}

.wa-main:hover{
transform:translateY(-4px);
backdrop-filter:blur(10px);
border:2px solid rgba(255,255,255,.25);
box-shadow:
0 10px 25px rgba(37,211,102,.35),
0 0 25px rgba(37,211,102,.25);
}

.floating-wa.move-up{
bottom:95px;
}

.wa-list{
position:absolute;
right:0;
bottom:75px;
display:none;
flex-direction:column;
gap:10px;
}

.wa-list.active{
display:flex;
}

.wa-list a{
background:white;
color:var(--primary);
padding:12px 16px;
border-radius:12px;
box-shadow:var(--shadow-sm);
white-space:nowrap;
font-size:.9rem;
font-weight:500;
}

@keyframes waPulse{

0%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(37,211,102,.5);
}

70%{
transform:scale(1.05);
box-shadow:0 0 0 15px rgba(37,211,102,0);
}

100%{
transform:scale(1);
box-shadow:0 0 0 0 rgba(37,211,102,0);
}

}
/* =====================================
WA OVERLAY
===================================== */

.wa-overlay{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

background:transparent;

opacity:0;

visibility:hidden;

transition:.3s ease;

z-index:998;

}

.wa-overlay.active{

opacity:1;

visibility:visible;

}

/* =====================================
BACK TO TOP
===================================== */

.back-top{
position:fixed;
right:20px;
bottom:20px;
width:55px;
height:55px;
border-radius:50%;
background:var(--secondary);
color:white;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
cursor:pointer;
opacity:0;
visibility:hidden;
transform:translateY(20px);
transition:.4s ease;
z-index:998;
transition:.3s ease;
transform:translateY(20px);
backdrop-filter:blur(10px);
border:2px solid rgba(255,255,255,.25);
box-shadow:
0 10px 25px rgba(212,175,55,.35),
0 0 20px rgba(212,175,55,.25);
}

.back-top:hover{
transform:translateY(-4px);
}

.back-top.show{
opacity:1;
visibility:visible;
transform:translateY(0);
}

.back-top{
z-index:1000;
}

/* =====================================
ANIMATION
===================================== */
.fade-up{
opacity:0;
transform:translateY(40px);
transition:all .8s ease;
}

.fade-up.show{
opacity:1;
transform:translateY(0);
}

.fade-left{
opacity:0;
transform:translateX(-40px);
transition:all .8s ease;
}

.fade-left.show{
opacity:1;
transform:translateX(0);
}

.fade-right{
opacity:0;
transform:translateX(40px);
transition:all .8s ease;
}

.fade-right.show{
opacity:1;
transform:translateX(0);
}

.hero-buttons img,
.explore-grid img{

transition:
transform .3s ease,
filter .3s ease,
box-shadow .3s ease;

cursor:pointer;
}

.hero-buttons img:hover,
.explore-grid img:hover{

transform:
translateY(-6px)
scale(1.05);

filter:
brightness(1.08);

box-shadow:
0 12px 25px rgba(0,0,0,.25);
}

.hero-buttons img:active,
.explore-grid img:active{

transform:
scale(.96);
}
/* =========================================
ANIMASI GLOBAL
========================================= */

/* Delay */

.delay-1{
    transition-delay:.1s;
}

.delay-2{
    transition-delay:.2s;
}

.delay-3{
    transition-delay:.3s;
}

.delay-4{
    transition-delay:.4s;
}

.delay-5{
    transition-delay:.5s;
}

.delay-6{
    transition-delay:.6s;
}

.delay-7{
    transition-delay:.7s;
}
/* =====================================
ANIMATION KEUNGGULAN PONDOK
===================================== */

.reveal-left,
.reveal-right{

opacity:0;

transition:.8s ease;
}

.reveal-left{

transform:
translateX(-80px);
}

.reveal-right{

transform:
translateX(80px);
}

.reveal-active{

opacity:1;

transform:
translateX(0);
}

=====================================
@keyframes heroZoomDesktop{

0%{
background-size:100%;
}

50%{
background-size:108%;
}

100%{
background-size:100%;
}

}

/* =====================================
HOVER EFFECT PREMIUM
===================================== */

.card-hover{
transition:.3s;
}

.card-hover:hover{
transform:translateY(-8px);
box-shadow:var(--shadow-lg);
}

/* =====================================
TABLET
===================================== */
@media (max-width:992px){

.footer-grid{
grid-template-columns:1fr;
}

.navbar{
padding:10px 4%;
}

.logo-area img{
width:40px;
height:40px;
}

.logo-text{
font-size:.8rem;
}

.nav-menu{
gap:15px;
}

.nav-menu a{
font-size:.85rem;
}

.hero{
min-height:700px;
overflow:hidden;
}

.hero h1{
font-size:2rem;
line-height:1.2;
margin-bottom:10px;
}

.hero p{
font-size:.9rem;
max-width:700px;
margin:auto;
}

.hero-buttons{
display:flex;
justify-content:center;
align-items:center;
gap:20px;
margin-top:30px;
flex-wrap:wrap;
width:100%;
}

.hero-buttons img{
width:45vw;
max-width:170px;
filter:
drop-shadow(0 8px 15px rgba(0,0,0,.25));
}

.explore{
margin-top:-75px;
}

}

@keyframes heroZoomTablet{

0%{
background-size:100%;
}

50%{
background-size:105%;
}

100%{
background-size:100%;
}

}

/* =====================================
MOBILE
===================================== */

@media (max-width:768px){

/* ===== NAVBAR ===== */

.nav-menu{
display:none;
}

.menu-toggle{
display:block;
color:#fff;
}

.logo-area{
max-width:80%;
}

.logo-area img{
object-fit:contain;
}

.logo-text{
line-height:1.2;
}

/* ===== HERO ===== */

.hero{
height:68vh;
padding:95px 20px 60px;
}

.hero-content{
transform:none !important;
}
/* =====================================
HERO BADGE
===================================== */
.hero-badge{

font-size:.75rem;

padding:8px 14px;

margin-bottom:15px;

}

.hero h1{
font-size:2.2rem;
line-height:1.15;
margin-bottom:15px;
}

.hero p{
font-size:1rem;
line-height:1.7;
margin-bottom:20px;
}

.hero-buttons{
margin-top:35px;
display:flex;
flex-direction:row;
justify-content:center;
align-items:center;
gap:12px;
flex-wrap:nowrap;
}

.hero-buttons img{
width:42vw;
max-width:150px;
filter:
drop-shadow(0 8px 15px rgba(0,0,0,.25));
}

/* ===== JELAJAHI ===== */

.explore{
margin-top:-90px;
}

.explore-title{
font-size:2.2rem;
margin-bottom:25px;
}

.explore-grid{
grid-template-columns:repeat(2,1fr);
gap:18px;
justify-items:center;
}

.welcome-image{
float:none;
width:100%;
margin:0 0 20px 0;
}

.welcome-image{
order:1;
}

.welcome-content{
order:2;
}

.welcome-title{
font-size:1.8rem;
text-align:center;
}

.full-text{
display:none;
}

.full-text.show{
display:block;
}

.welcome-buttons{
justify-content:center;
flex-direction:column;
}

.welcome-btn,
.welcome-readmore-btn{

width:100%;
max-width:320px;

justify-content:center;

}

.welcome-buttons img{
width:160px;
}

.welcome-readmore-btn{

display:inline-flex;

}

.full-text{

display:none;

}

/* ===== KEUNGGULAN PONDOK ===== */
.advantages-grid{

grid-template-columns:
repeat(2,1fr);

gap:15px;
}

.advantage-card{

padding:18px;
}

.advantage-card img{

width:55px;
height:55px;
}

.advantage-card h3{

font-size:.9rem;
}

.advantage-card p{

font-size:.8rem;
line-height:1.5;
}

/* ===== PROGRAM UNGGULAN SANTRI ===== */

.program-title{
font-size:1.6rem;
}

.program-subtitle{
font-size:.92rem;
}

.accordion-header{
font-size:.95rem;
padding:18px;
}

.accordion-content p{
padding:0 18px 18px;
}

/* ===== PROGRAM EKSTRAKURIKULER ===== */
.ekskul-grid{
grid-template-columns:1fr;
gap:20px;
}

.ekskul-title{
font-size:1.6rem;
}

.ekskul-subtitle{
font-size:.92rem;
}

.ekskul-card img{
height:200px;
}

/* ===== TARGET LULUSAN ===== */
.lulusan-grid{

grid-template-columns:1fr;

gap:20px;
}

.lulusan-title{
font-size:1.6rem;
}

.lulusan-subtitle{
font-size:.92rem;
}

.lulusan-card{

padding:25px;
}

.lulusan-number{

font-size:2.4rem;
}

/* ===== MENGAPA MEMILIH AL IHSAN ===== */
.why-grid{

grid-template-columns:1fr;

gap:25px;
}

.why-image img{

min-height:240px;
}

.why-content h2{

font-size:1.6rem;

text-align:center;
}

.why-desc{

text-align:center;
}

.why-list{

grid-template-columns:1fr;
}

.why-button{

text-align:center;
}

/* ===== CTA SECTION & ALUR PENDAFTARAN===== */
.cta-content h2{
font-size:1.7rem;
}

.alur-grid{

grid-template-columns:
repeat(2,1fr);

gap:12px;
}

.alur-title{
font-size:1.6rem;
}

.alur-card{

padding:18px;
}

.alur-card h3{

font-size:.95rem;

margin-bottom:15px;
}

.step{

font-size:.75rem;

padding:8px;
}

.arrow{

font-size:1rem;

margin:5px 0;
}

.alur-btn{

padding:10px 14px;

font-size:.75rem;
}
    /* =====================================
    HALAMAN PROFILE HP
    ===================================== */
/* =====================================
SEJARAH PONDOK HP
===================================== */

.history-wrapper{

grid-template-columns:1fr;

}

.history-image{

float:none;

width:100%;

margin-right:0;

margin-bottom:20px;

}

.history-title{

font-size:1.6rem;

}

.history-subtitle{

font-size:.92rem;

}

.history-image img{

height:240px;

}

.history-btn{

display:inline-block;

}

/* =====================================
VISI MISI HP
===================================== */

.vision-grid{
grid-template-columns:1fr;
}

.vision-section-title{

font-size:1.6rem;

}

.vision-card{
padding:25px;
}

.vision-icon{

width:80px;
height:80px;

}

.vision-icon img{

width:50px;
height:50px;

}
/* =====================================
PILAR 4D HP
===================================== */

.pillar-grid{

grid-template-columns:
repeat(2,1fr);

gap:15px;

}

.pillar-card{

padding:18px;

}

.pillar-icon{

width:70px;
height:70px;

}

.pillar-icon img{

width:38px;
height:38px;

}

.pillar-title{

font-size:1.6rem;

}

.pillar-card h3{

font-size:1rem;

}

.pillar-card p{

font-size:.85rem;
line-height:1.6;

}
/* =====================================
TARGET LULUSAN HP
===================================== */

.graduate-grid{

grid-template-columns:
repeat(2,1fr);

gap:15px;

}

.graduate-title{

font-size:1.6rem;

}

.graduate-card{

padding:15px;

}

.graduate-icon{

width:65px;
height:65px;

margin-bottom:10px;

}

.graduate-icon img{

width:34px;
height:34px;

}

.graduate-card h3{

font-size:.95rem;

margin-bottom:6px;

}

.graduate-card p{

font-size:.75rem;

line-height:1.4;

}
/* =====================================
CTA PROFIL HP
===================================== */

.cta-profile{

padding:40px 20px;

}

.cta-profile h2{

font-size:1.5rem;

}

.cta-profile-buttons{

flex-direction:column;

}

.cta-program,
.cta-daftar{

width:100%;

text-align:center;

}
/* =====================================
HAHLAMAN PROGRAM PENDIDIKAN
===================================== */
/* =====================================
KATA PENGANTAR PROGRAM HP
===================================== */

.program-intro-grid{

grid-template-columns:1fr;

}

.program-intro-title{

font-size:1.5rem;

text-align:center;

}

.program-highlight{

justify-content:center;

}

.welcome-readmore-btn{
display:inline-flex !important;
}
/* =========================================
PROGRAM UNGGULAN HP
========================================= */

.program-grid{

    gap:15px;

}

.program-card{

    border-radius:20px;

}

.program-image{

    height:110px;

}

.program-card h3{

    font-size:.95rem;

    margin:15px 10px;

}

.program-btn{

    padding:9px 14px;

    font-size:.75rem;

    margin-bottom:18px;

}

.education-btn{

    width:100%;

    max-width:320px;

    font-size:.9rem;
}
/* =========================================
DETAIL PROGRAM HP
========================================= */

.detail-program-card{

    padding:20px;

}

.detail-program-header{

    grid-template-columns:1fr;

    gap:20px;

}

.detail-program-intro h2{

    font-size:1.6rem;

}

.program-materials{

    grid-template-columns:1fr;

}

.material-item{

    font-size:.9rem;

}
/* =========================================
TAHAPAN PENDIDIKAN HP
========================================= */

@media(max-width:768px){

.education-grid{

grid-template-columns:
repeat(2,1fr);

gap:15px;

}

.education-card{

padding:18px;

}

.education-card h3{

font-size:1rem;

}

.education-card li{

font-size:.8rem;

line-height:1.5;

}

}
/* =========================================
CTA PENDAFTARAN HP
========================================= */

@media(max-width:768px){

.cta-box{

padding:40px 25px;

}

.cta-box h2{

font-size:1.6rem;

}

.cta-box p{

font-size:.9rem;

}

.cta-buttons{

flex-direction:column;

}

.cta-primary,
.cta-secondary{

width:100%;

text-align:center;

}

}
/* ===== FOTER PREMIUM ===== */
.footer-section h3{
margin-bottom:10px;
}

.footer-section a{
padding:5px 0;
}
}
/* =====================================
SMALL MOBILE
===================================== */

@media (max-width:480px){

.explore-grid{  
    grid-template-columns:repeat(2,1fr);  
}  

.hero h1{  
    font-size:1.7rem;  
}

}

/* GALERI PREMIUM */

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

.gallery-grid img{
width:100%;
height:250px;
object-fit:cover;
border-radius:20px;
cursor:pointer;
transition:0.4s;
box-shadow:0 10px 25px rgba(0,0,0,.1);
}

.gallery-grid img:hover{
transform:scale(1.05);
}

/* =====================================
TABLET LANDSCAPE FIX
===================================== */

@media (min-width:769px) and (max-width:1200px){

.navbar{
padding:10px 4%;
}

.logo-area img{
width:40px;
height:40px;
}

.logo-text{
font-size:.8rem;
}

.nav-menu{
gap:15px;
}

.nav-menu a{
font-size:.85rem;
}

.hero{
height:100vh;
min-height:100vh;
overflow:hidden;
}

.hero h1{
font-size:3rem;
line-height:1.2;
margin-bottom:15px;
}

.hero p{
font-size:1rem;
max-width:700px;
margin:auto;
}

.hero-buttons{
display:flex;
justify-content:center;
align-items:center;
flex-direction:row;
gap:20px;
flex-wrap:wrap;
}

.hero-buttons img{
width:220px;
height:auto;
filter:
drop-shadow(0 8px 15px rgba(0,0,0,.25));
}

.read-more-btn{
display:none;
}

.full-text{
display:block !important;
}

.history-full{
display:block !important;
}

}