/* PALETTE SOFT GREEN AABS */
:root{
    --green:#4F8F68;
    --green-light:#EAF4ED;
    --green-soft:#F5FAF6;
    --green-dark:#315F46;
    --red:#E51E2A;
}
*{box-sizing:border-box;margin:0;padding:0}
:root{--green:#5D9A75;--dark:#4F8F68;--red:#e51b2a;--navy:#102f4d;--text:#242a2c;--muted:#697276;--line:#e7ece9}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;color:var(--text);background:#fff;line-height:1.55}
a{text-decoration:none;color:inherit}
.container{width:min(1240px,calc(100% - 48px));margin:auto}

.topbar{height:48px;background:var(--dark);color:#fff;font-size:13px}
.topbar-inner{height:100%;display:flex;justify-content:space-between;align-items:center}
.top-left,.top-right{display:flex;align-items:center;gap:28px}
.top-right a{opacity:.9}

.header{background:#fff;border-bottom:1px solid #edf0ee;position:relative;z-index:10}
.nav-wrap{min-height:132px;display:flex;align-items:center;justify-content:space-between;gap:30px}
.brand{display:block;width:360px;align-self:stretch;display:flex;align-items:center}
.brand img{width:100%;height:120px;object-fit:contain;object-position:left center;display:block}
.nav{display:flex;align-items:center;gap:28px;font-size:15px;font-weight:600}
.nav>a:not(.btn){padding:42px 0;position:relative;white-space:nowrap}
.nav>a:not(.btn):hover,.nav>a.active{color:var(--green)}
.nav>a.active:after{content:"";position:absolute;left:0;right:0;bottom:31px;height:3px;background:var(--green);border-radius:4px}
.nav-button{white-space:nowrap}
.menu-toggle{display:none;border:0;background:none;font-size:28px}

.btn{min-height:48px;padding:0 22px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:700;transition:.2s}
.btn-primary{background:var(--green);color:#fff}
.btn-primary:hover{background:var(--dark);transform:translateY(-1px)}
.btn-outline{border:1.5px solid var(--green);color:var(--dark);background:#fff}
.btn-outline:hover{background:#f1f9f4}

.hero{padding:42px 0 0;background:linear-gradient(180deg,#fff 0%,#fbfdfc 100%);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:.83fr 1.17fr;gap:38px;align-items:center}
.hero-copy{padding:20px 0 35px}
.eyebrow{display:inline-block;padding:7px 16px;border:1px solid #d2e8da;background:#eef8f1;color:var(--dark);border-radius:30px;font-size:12px;font-weight:800}
.hero h1{margin-top:22px;font-size:clamp(45px,4.8vw,68px);line-height:1.07;letter-spacing:-2.5px;color:#202629}
.hero h1 strong{color:var(--green)}
.hero-copy>p{font-size:17px;color:#5f686c;max-width:580px;margin:25px 0 30px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap}

.hero-photo{height:500px;border-radius:125px 0 0 0;overflow:hidden;background:linear-gradient(135deg,#eef7f1,#dcebe2);position:relative;border-left:7px solid var(--green);box-shadow:-12px 0 0 var(--red)}
.photo-placeholder{height:100%;position:relative;background:linear-gradient(145deg,#f4e7db 0%,#e8d8c8 55%,#d5c7b7 100%)}
.photo-placeholder:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.1),transparent 45%,rgba(255,255,255,.12))}
.mock-person{position:absolute;bottom:-20px;border-radius:90px 90px 0 0;z-index:2}
.psychologist{width:225px;height:360px;left:24%;background:#e9b995;transform:rotate(5deg)}
.client{width:245px;height:375px;right:12%;background:#e7c5aa;transform:rotate(-7deg)}
.mock-room.plant{position:absolute;width:120px;height:220px;right:4%;top:35px;background:rgba(30,100,50,.22);border-radius:50% 50% 0 0}
.mock-room.lamp{position:absolute;width:90px;height:180px;left:8%;top:60px;background:rgba(255,255,255,.32);border-radius:45px}
.photo-note{position:absolute;z-index:4;left:30px;bottom:28px;background:rgba(255,255,255,.93);padding:14px 18px;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,.12)}
.photo-note strong,.photo-note span{display:block}
.photo-note strong{color:var(--navy)}
.photo-note span{font-size:12px;color:var(--muted)}

.hero-trust{position:relative;margin-top:-2px;background:#fff;border-radius:18px 18px 0 0;box-shadow:0 -7px 25px rgba(0,0,0,.04);display:grid;grid-template-columns:repeat(4,1fr);padding:18px 35px;z-index:5}
.hero-trust div{display:flex;justify-content:center;align-items:center;gap:13px;border-right:1px solid #e6ebe8;font-size:14px;color:var(--navy);line-height:1.25}
.hero-trust div:last-child{border-right:0}
.hero-trust b{font-size:27px;color:var(--green)}

.section{padding:58px 0 70px}
.section-title{text-align:center;margin-bottom:22px}
.section-title h2{font-size:29px;color:var(--navy)}
.title-mark{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:5px}
.title-mark i{width:26px;height:2px;background:var(--green);display:block}
.title-mark em{width:6px;height:6px;background:var(--red);border-radius:50%;display:block}

.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.service-card{min-height:315px;padding:22px 16px;text-align:center;border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:0 5px 20px rgba(0,0,0,.035);transition:.2s}
.service-card:hover{transform:translateY(-4px);box-shadow:0 14px 30px rgba(0,0,0,.08)}
.service-icon{width:58px;height:58px;margin:0 auto 17px;border-radius:50%;display:grid;place-items:center;font-size:28px}
.service-icon.green{background:#e3f3e9;color:#5D9A75}
.service-icon.purple{background:#ece8ff;color:#5d4cc6}
.service-icon.yellow{background:#fff1d2;color:#e69a00}
.service-icon.pink{background:#ffe4ee;color:#ed4d88}
.service-icon.violet{background:#eee6ff;color:#7348b7}
.service-icon.cyan{background:#dff5f4;color:#008b8b}
.service-card h3{font-size:17px;line-height:1.22;color:var(--navy);margin-bottom:13px}
.service-card p{font-size:12.5px;color:#657075;line-height:1.55}

.footer{background:#315F46;color:#fff;padding:35px 0;margin-top:0}
.footer p{opacity:.9;font-size:14px}
.footer strong{font-size:18px}

@media(max-width:1150px){
 .nav{gap:16px;font-size:13px}.brand{width:300px}.brand img{height:105px}
 .hero-grid{grid-template-columns:1fr 1.1fr}.service-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:850px){
 .top-left span:nth-child(n+2),.top-right{display:none}
 .nav-wrap{min-height:90px}.brand{width:250px}.brand img{height:80px}
 .menu-toggle{display:block}.nav{display:none;position:absolute;left:0;right:0;top:90px;background:#fff;padding:15px 24px 25px;flex-direction:column;align-items:stretch;box-shadow:0 15px 25px rgba(0,0,0,.1)}
 .nav.show{display:flex}.nav>a:not(.btn){padding:10px 0}.nav>a.active:after{display:none}
 .hero-grid{grid-template-columns:1fr}.hero-copy{text-align:center}.hero-copy>p{margin-left:auto;margin-right:auto}.hero-actions{justify-content:center}
 .hero-photo{height:420px}.hero-trust{grid-template-columns:repeat(2,1fr);gap:15px}.hero-trust div:nth-child(2){border-right:0}
 .service-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
 .container{width:calc(100% - 28px)}.topbar{display:none}
 .brand{width:210px}.brand img{height:70px}.nav{top:90px}
 .hero{padding-top:25px}.hero h1{font-size:38px;letter-spacing:-1.2px}.hero-photo{height:340px;border-radius:80px 0 0 0}
 .hero-trust{grid-template-columns:1fr;padding:15px}.hero-trust div{border-right:0;border-bottom:1px solid #e6ebe8;padding:8px}.hero-trust div:last-child{border-bottom:0}
 .service-grid{grid-template-columns:1fr}.section{padding:45px 0}
}

/* TAHAP 3 - KEBUTUHAN */
.needs-section{padding:72px 0 82px;background:#F5FAF6;border-top:1px solid #E8F0EA}
.needs-heading{max-width:700px;margin:0 auto 34px;text-align:center}
.needs-heading>span{display:inline-block;color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.1px}
.needs-heading>span:after{content:"";display:block;width:34px;height:3px;background:var(--red);border-radius:5px;margin:8px auto 0}
.needs-heading h2{margin-top:10px;color:var(--navy);font-size:32px;line-height:1.2}
.needs-heading p{color:var(--muted);font-size:15px;margin-top:9px}
.needs-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:17px}
.need-card{min-height:245px;padding:25px 18px;background:#fff;border:1px solid #DDE9E1;border-radius:18px;text-align:center;display:flex;flex-direction:column;align-items:center;transition:.22s ease;box-shadow:0 5px 18px rgba(0,60,35,.035)}
.need-card:hover{transform:translateY(-5px);border-color:#acd4ba;box-shadow:0 15px 32px rgba(0,60,35,.09)}
.need-icon{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;font-size:29px;margin-bottom:17px}
.need-icon.green{background:#e3f3e9;color:#5D9A75}.need-icon.purple{background:#ece8ff;color:#5d4cc6}.need-icon.yellow{background:#fff1d2;color:#e69a00}.need-icon.pink{background:#ffe4ee;color:#ed4d88}.need-icon.cyan{background:#dff5f4;color:#008b8b}
.need-card h3{color:var(--navy);font-size:16px;line-height:1.3;margin-bottom:10px}
.need-card p{color:#697276;font-size:12.5px;line-height:1.55}
@media(max-width:1050px){.needs-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.needs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.needs-section{padding:52px 0 60px}.needs-heading h2{font-size:27px}.needs-grid{grid-template-columns:1fr}.need-card{min-height:auto;padding:23px 20px}}

/* TAHAP 4 - PROFIL PSIKOLOG */
.psychologists-section{padding:75px 0 80px;background:#fff}
.psychologists-heading{max-width:700px;margin:0 auto 35px;text-align:center}
.psychologists-heading>span{display:inline-block;color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.1px}
.psychologists-heading>span:after{content:"";display:block;width:34px;height:3px;background:var(--red);border-radius:5px;margin:8px auto 0}
.psychologists-heading h2{margin-top:10px;color:var(--navy);font-size:32px;line-height:1.2}
.psychologists-heading p{color:var(--muted);font-size:15px;margin-top:9px}
.psychologist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.psychologist-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 7px 22px rgba(0,0,0,.045);transition:.2s}
.psychologist-card:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.09)}
.psychologist-photo{height:245px;background:linear-gradient(145deg,#eaf6ef,#d8e8df);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.avatar-placeholder{width:150px;height:190px;border-radius:80px 80px 0 0;background:#d9ad8c;display:flex;align-items:flex-start;justify-content:center;padding-top:22px;color:#fff;font-size:0;box-shadow:0 0 0 10px rgba(255,255,255,.2)}
.psychologist-info{padding:22px}
.psychologist-info .role{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--green)}
.psychologist-info h3{color:var(--navy);font-size:21px;margin:5px 0 5px}
.psychologist-info p{color:var(--muted);font-size:13px;margin-bottom:15px}
.profile-link{color:var(--green);font-size:13px;font-weight:800}
.profile-link:hover{color:var(--dark)}
.center-action{text-align:center;margin-top:28px}

@media(max-width:750px){
 .psychologist-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
 .psychologists-section{padding:55px 0 60px}
 .psychologists-heading h2{font-size:27px}
 .psychologist-grid{grid-template-columns:1fr}
}

/* TAHAP 6 - PROGRAM UNGGULAN */
.program-section{padding:76px 0 82px;background:#F5FAF6;border-top:1px solid #E8F0EA}
.program-heading{max-width:700px;margin:0 auto 35px;text-align:center}
.program-heading>span{display:inline-block;color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.1px}
.program-heading>span:after{content:"";display:block;width:34px;height:3px;background:var(--red);border-radius:5px;margin:8px auto 0}
.program-heading h2{margin-top:10px;color:var(--navy);font-size:32px;line-height:1.2}
.program-heading p{color:var(--muted);font-size:15px;margin-top:9px}
.program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.program-card{position:relative;min-height:250px;padding:28px 24px 25px;background:#fff;border:1px solid #DDE9E1;border-radius:18px;overflow:hidden;box-shadow:0 6px 20px rgba(0,60,35,.04);transition:.22s}
.program-card:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(0,60,35,.09)}
.program-number{position:absolute;right:18px;top:12px;font-size:52px;font-weight:800;line-height:1;color:#E3EFE7}
.program-content{position:relative;z-index:1}
.program-content>span{font-size:10px;font-weight:800;letter-spacing:1px;color:var(--green)}
.program-content h3{font-size:21px;line-height:1.25;color:var(--navy);margin:9px 0 12px}
.program-content p{font-size:13px;line-height:1.6;color:var(--muted);margin-bottom:18px}
@media(max-width:800px){.program-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.program-section{padding:55px 0 60px}.program-heading h2{font-size:27px}.program-grid{grid-template-columns:1fr}}

/* TAHAP 7 - ARTIKEL */
.articles-section{padding:76px 0 82px;background:#fff}
.articles-heading{max-width:720px;margin:0 auto 35px;text-align:center}
.articles-heading>span{display:inline-block;color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.1px}
.articles-heading>span:after{content:"";display:block;width:34px;height:3px;background:var(--red);border-radius:5px;margin:8px auto 0}
.articles-heading h2{margin-top:10px;color:var(--navy);font-size:32px;line-height:1.2}
.articles-heading p{color:var(--muted);font-size:15px;margin-top:9px}
.articles-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.article-card{overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 6px 20px rgba(0,0,0,.04);transition:.22s}
.article-card:hover{transform:translateY(-4px);box-shadow:0 15px 32px rgba(0,0,0,.09)}
.article-image{height:185px;position:relative;display:flex;align-items:flex-end;padding:18px}
.article-image:before{content:"";position:absolute;width:105px;height:105px;border-radius:50%;right:25px;top:28px;background:rgba(255,255,255,.55)}
.article-image:after{content:"";position:absolute;width:55px;height:55px;border-radius:50%;left:32px;top:48px;background:rgba(255,255,255,.35)}
.article-image span{position:relative;z-index:2;background:#fff;padding:7px 12px;border-radius:20px;color:var(--green);font-size:10px;font-weight:800;letter-spacing:.8px}
.article-one{background:linear-gradient(135deg,#EAF4ED,#CDE4D4)}
.article-two{background:linear-gradient(135deg,#e8e3fb,#d1c9f0)}
.article-three{background:linear-gradient(135deg,#fde8d7,#f4ceb2)}
.article-body{padding:21px}
.article-body small{color:var(--green);font-size:11px;font-weight:700}
.article-body h3{color:var(--navy);font-size:19px;line-height:1.3;margin:7px 0 10px}
.article-body p{color:var(--muted);font-size:13px;line-height:1.6;margin-bottom:16px}
@media(max-width:750px){.articles-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.articles-section{padding:55px 0 60px}.articles-heading h2{font-size:27px}.articles-grid{grid-template-columns:1fr}}

/* TAHAP 8 - KONTAK & KONSULTASI */
.contact-section{padding:78px 0;background:linear-gradient(135deg,#4F8F68 0%,#5D9A75 60%,#6BA682 100%);color:#fff}
.contact-wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:70px;align-items:center}
.contact-kicker{display:inline-block;font-size:11px;font-weight:800;letter-spacing:1.2px;color:#E5F1E8}
.contact-copy h2{font-size:42px;line-height:1.13;letter-spacing:-1px;margin:12px 0 17px}
.contact-copy h2 strong{color:#fff}
.contact-copy>p{max-width:580px;color:#E7F2EA;font-size:15px;line-height:1.7}
.contact-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:27px}
.btn-whatsapp{background:#fff;color:var(--green)}
.btn-light{border:1px solid rgba(255,255,255,.7);color:#fff;background:transparent}
.btn-light:hover{background:rgba(255,255,255,.12)}
.contact-info{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:20px;padding:8px 24px}
.contact-item{display:flex;gap:17px;align-items:center;padding:19px 0;border-bottom:1px solid rgba(255,255,255,.14)}
.contact-item:last-child{border-bottom:0}
.contact-icon{width:44px;height:44px;flex:0 0 44px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.14);font-size:20px}
.contact-item small{display:block;font-size:9px;font-weight:800;letter-spacing:1px;color:#D7E9DC;margin-bottom:2px}
.contact-item strong{display:block;font-size:15px;color:#fff}
.contact-item p{font-size:12px;color:#DCECE1;margin-top:2px}
@media(max-width:800px){.contact-wrap{grid-template-columns:1fr;gap:38px}.contact-copy h2{font-size:36px}}
@media(max-width:520px){.contact-section{padding:58px 0}.contact-copy h2{font-size:31px}.contact-info{padding:5px 17px}.contact-actions .btn{width:100%}}

/* TAHAP 9 - FOOTER */
.site-footer{background:#315F46;color:#fff;padding-top:58px}
.footer-grid{display:grid;grid-template-columns:1.5fr .8fr 1.15fr 1.25fr;gap:45px;padding-bottom:48px}
.footer-logo{width:255px;height:78px;background:#fff;border-radius:9px;padding:5px 14px;display:flex;align-items:center;margin-bottom:16px}
.footer-logo img{width:100%;height:100%;object-fit:contain;object-position:left center}
.footer-brand>p:first-of-type{font-weight:700;font-size:15px;color:#E3F0E7;margin-bottom:9px}
.footer-desc{max-width:330px;color:#C4D9CA;font-size:12.5px;line-height:1.65}
.footer-column{display:flex;flex-direction:column;gap:9px}
.footer-column h3{font-size:15px;margin-bottom:8px;color:#fff}
.footer-column a,.footer-column p{font-size:12.5px;color:#C4D9CA;line-height:1.5}
.footer-column a:hover{color:#fff}
.footer-contact p{margin-bottom:2px}
.social-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:12px}
.social-links a{padding:7px 10px;border:1px solid rgba(255,255,255,.18);border-radius:20px;font-size:10px}
.social-links a:hover{background:rgba(255,255,255,.1)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding:18px 0}
.footer-bottom-inner{display:flex;justify-content:space-between;gap:20px;color:#9EBDA8;font-size:11px}
@media(max-width:850px){.footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}}
@media(max-width:520px){.site-footer{padding-top:45px}.footer-grid{grid-template-columns:1fr 1fr;gap:30px}.footer-brand{grid-column:1/-1}.footer-contact{grid-column:1/-1}.footer-bottom-inner{flex-direction:column;gap:7px}}

/* TAHAP 10 - HALAMAN TENTANG KAMI */
.inner-hero{padding:78px 0 72px;background:linear-gradient(135deg,#F0F7F2,#f8fbf9);text-align:center;border-bottom:1px solid #E4EEE7}
.inner-hero span{color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.1px}
.inner-hero h1{color:var(--navy);font-size:42px;line-height:1.15;margin:12px 0 12px}
.inner-hero p{max-width:650px;margin:auto;color:var(--muted);font-size:15px;line-height:1.7}
.about-main{padding:80px 0;background:#fff}
.about-intro{display:grid;grid-template-columns:.85fr 1.15fr;gap:65px;align-items:center}
.about-visual{min-height:360px;border-radius:24px;background:linear-gradient(145deg,#dff2e7,#CDE4D4);display:flex;align-items:center;justify-content:center;padding:30px}
.about-visual-card{width:82%;height:245px;border-radius:20px;background:#fff;box-shadow:0 18px 40px rgba(0,70,40,.12);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.about-mark{font-size:42px;font-weight:900;color:var(--green);letter-spacing:3px;margin-bottom:16px}
.about-visual-card strong{font-size:18px;color:var(--navy)}
.about-visual-card span{font-size:11px;color:var(--muted);margin-top:6px}
.section-kicker{display:inline-block;color:var(--green);font-size:11px;font-weight:800;letter-spacing:1.1px}
.about-copy h2{font-size:32px;line-height:1.25;color:var(--navy);margin:10px 0 18px}
.about-copy p{font-size:14px;line-height:1.75;color:var(--muted);margin-bottom:12px}
.vision-section{padding:75px 0;background:#F5FAF6}
.vision-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vision-card{background:#fff;border:1px solid #DDE9E1;border-radius:20px;padding:34px;box-shadow:0 6px 20px rgba(0,60,35,.035)}
.vision-card h2{font-size:27px;line-height:1.35;color:var(--navy);margin-top:12px}
.value-list{margin-top:18px}
.value-list>div{display:flex;gap:16px;padding:15px 0;border-bottom:1px solid #edf1ef}
.value-list>div:last-child{border-bottom:0}
.value-list b{color:var(--red);font-size:12px}
.value-list span{color:var(--muted);font-size:13px;line-height:1.5}
.value-list strong{color:var(--navy)}
.about-scope{padding:78px 0;background:#fff}
.about-scope-heading{text-align:center;max-width:650px;margin:0 auto 35px}
.about-scope-heading h2{color:var(--navy);font-size:30px;line-height:1.3;margin-top:10px}
.scope-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.scope-card{padding:25px 20px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 5px 18px rgba(0,0,0,.035)}
.scope-card>b{font-size:12px;color:var(--red)}
.scope-card h3{font-size:18px;color:var(--navy);margin:8px 0}
.scope-card p{font-size:12.5px;color:var(--muted);line-height:1.6}
.about-cta{padding:60px 0;background:#4F8F68;text-align:center;color:#fff}
.about-cta h2{font-size:30px;margin-bottom:8px}
.about-cta p{font-size:14px;color:#d8ede0;margin-bottom:22px}
.about-cta .btn-light{display:inline-block}
@media(max-width:800px){.about-intro,.vision-grid{grid-template-columns:1fr}.scope-grid{grid-template-columns:1fr 1fr}.about-visual{min-height:300px}.inner-hero h1{font-size:36px}}
@media(max-width:520px){.about-main,.about-scope,.vision-section{padding:55px 0}.about-copy h2{font-size:27px}.scope-grid{grid-template-columns:1fr}.inner-hero{padding:58px 0}.inner-hero h1{font-size:30px}}

/* TAHAP 12 - HEADER / LOGO PROPORSIONAL SESUAI MOCKUP */
.header{background:#fff;border-bottom:1px solid #edf0ee;position:relative;z-index:10}
.nav-wrap{min-height:92px;height:92px;display:flex;align-items:center;justify-content:space-between;gap:26px}
.brand{display:flex;width:220px;height:68px;align-self:center;align-items:center}
.brand img{width:220px;height:68px;object-fit:contain;object-position:left center;display:block}
.nav{display:flex;align-items:center;gap:24px;font-size:14px;font-weight:600}
.nav>a:not(.btn){padding:32px 0;position:relative;white-space:nowrap}
.nav>a.active:after{bottom:21px}
.nav-button{min-height:42px;padding:0 17px;font-size:13px;border-radius:7px}
@media(max-width:1000px){
    .nav-wrap{gap:15px}
    .brand,.brand img{width:190px;height:62px}
    .nav{gap:15px;font-size:13px}
}
@media(max-width:800px){
    .nav-wrap{height:82px;min-height:82px}
    .brand,.brand img{width:175px;height:58px}
    .nav{display:none}
    .menu-toggle{display:block}
}

/* TAHAP 13 - RAPIN HEADER SESUAI MOCKUP */
.topbar{height:34px;min-height:34px;background:#315F46;color:#eaf4ed;font-size:10px}
.topbar-inner{height:34px;display:flex;align-items:center;justify-content:space-between}
.top-left,.top-right{display:flex;align-items:center;gap:18px}
.topbar a{color:#eaf4ed}
.header{height:76px;min-height:76px;background:#fff;border-bottom:1px solid #e5ece7}
.nav-wrap{height:76px;min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:22px}
.brand{width:168px;height:48px;display:flex;align-items:center;flex:0 0 168px}
.brand img{width:168px;height:48px;object-fit:contain;object-position:left center;display:block}
.nav{display:flex;align-items:center;justify-content:flex-end;gap:20px;height:100%;font-size:12.5px;font-weight:600}
.nav>a:not(.btn){height:100%;display:flex;align-items:center;padding:0;white-space:nowrap;color:var(--navy)}
.nav>a.active{color:var(--green)}
.nav>a.active:after{display:none}
.nav-button{height:38px;min-height:38px;padding:0 15px!important;border-radius:7px;font-size:12px;margin-left:3px}
.menu-toggle{display:none}
@media(max-width:1050px){
    .nav{gap:13px;font-size:12px}
    .brand,.brand img{width:155px;height:45px}
    .brand{flex-basis:155px}
}
@media(max-width:850px){
    .top-left span:nth-child(2),.top-left span:nth-child(3),.top-right{display:none}
    .topbar-inner{justify-content:flex-start}
    .nav{display:none}
    .menu-toggle{display:block;margin-left:auto;background:none;border:0;font-size:22px;color:var(--navy);cursor:pointer}
    .nav-wrap{height:72px;min-height:72px}
    .header{height:72px;min-height:72px}
}
@media(max-width:520px){
    .topbar{height:30px;min-height:30px}
    .topbar-inner{height:30px}
    .top-left{gap:0}
    .top-left span:first-child{font-size:9px}
    .brand,.brand img{width:140px;height:42px}
    .brand{flex-basis:140px}
}

/* =========================================================
   TAHAP 15 - TENTANG KAMI MASTER DESIGN
   Mengikuti mockup yang disetujui
   ========================================================= */
.about-page{
    background:#f5f6f4;
    color:#30413a;
}
.about-shell{
    width:min(1180px,calc(100% - 32px));
    margin:18px auto 36px;
    background:#fff;
    border-radius:34px;
    overflow:hidden;
    box-shadow:0 14px 45px rgba(32,63,48,.08);
}
.about-header{
    height:78px;
    background:#fff;
    border-bottom:1px solid #edf1ee;
}
.about-header-inner{
    height:100%;
    padding:0 34px;
    display:flex;
    align-items:center;
    gap:25px;
}
.about-brand{
    width:154px;
    height:48px;
    flex:0 0 154px;
    display:flex;
    align-items:center;
}
.about-brand img{
    width:154px;
    height:48px;
    object-fit:contain;
    object-position:left center;
}
.about-nav{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:24px;
    font-size:12px;
    color:#33413b;
}
.about-nav a{position:relative;white-space:nowrap}
.about-nav a:hover,.about-nav a.active{color:#4f8f68}
.about-nav a.active:after{
    content:"";
    position:absolute;
    left:0;right:0;bottom:-10px;
    height:2px;border-radius:3px;background:#4f8f68;
}
.about-header-cta{
    flex:0 0 auto;
    background:#4f8f68;
    color:#fff;
    padding:10px 14px;
    border-radius:6px;
    font-size:11px;
    font-weight:700;
    white-space:nowrap;
}
/* HERO TENTANG KAMI - SESUAI SCREENSHOT - TINGGI DISESUAIKAN */
.about-hero-new{
    height:220px;
    position:relative;
    overflow:hidden;
    background:#0f2e22;
    display:flex;
    align-items:center;
}
.about-hero-new .about-hero-bg{
    position:absolute;
    inset:0;
    background: url('../images/hero-room-crop.png') center 38% / cover no-repeat;
}
.about-hero-new .about-hero-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(90deg, rgba(13,46,32,0.92) 0%, rgba(16,55,38,0.88) 42%, rgba(18,60,42,0.58) 58%, rgba(18,60,42,0.18) 78%, rgba(255,255,255,0.0) 100%);
    z-index:1;
}
.about-hero-new:before{
    content:"";
    position:absolute;
    right:0;top:0;bottom:0;width:38%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.06) 100%);
    z-index:1;
    pointer-events:none;
}
.about-hero-content{
    position:relative;z-index:2;
    padding:0 58px;color:#fff;
    max-width:640px;
}
.about-hero-content h1{
    font-size:42px;line-height:1.1;margin:0 0 12px;
    letter-spacing:-0.8px;
    font-weight:800;
    color:#fff;
    text-shadow:0 2px 10px rgba(0,0,0,.18);
}
.about-breadcrumb{font-size:12px;opacity:1;display:flex;align-items:center;gap:8px}
.about-breadcrumb a{color:#ffffff;opacity:.92;font-weight:500}
.about-breadcrumb span{color:#ffffff;opacity:.7}
.about-breadcrumb em{color:#e9c46a;font-style:normal;font-weight:600}
.about-profile-new{
    margin:20px 58px 0;
    padding:0;
    display:grid;
    grid-template-columns:36% 64%;
    border-radius:16px;
    overflow:hidden;
    background:linear-gradient(90deg,#f7faf6,#fff);
    border:1px solid #edf1ee;
    box-shadow:0 6px 18px rgba(32,63,48,.06);
}
.about-profile-photo{height:210px;overflow:hidden}
.about-profile-photo img{
    width:100%;height:100%;object-fit:cover;display:block;
    filter:saturate(.82);
}
.about-profile-copy{
    padding:26px 28px 22px;
}
.about-label{
    display:inline-block;
    color:#4f8f68;
    font-size:10px;
    font-weight:800;
    letter-spacing:1px;
}
.about-profile-copy h2{
    color:#285d41;
    font-size:21px;
    line-height:1.25;
    margin:5px 0 5px;
}
.about-accent{
    width:40px;height:2px;background:#d9aa45;margin:8px 0 12px;
}
.about-profile-copy p{
    color:#69756f;
    font-size:11px;
    line-height:1.65;
    margin-bottom:7px;
}
.about-vision-mission{
    margin:8px 58px 0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}
.about-vm-card{
    min-height:112px;
    padding:16px 18px;
    border:1px solid #edf0ed;
    border-radius:8px;
    background:linear-gradient(135deg,#fbfcfa,#f5f7f3);
    display:grid;
    grid-template-columns:38px 1fr;
    gap:12px;
}
.about-vm-icon{
    width:34px;height:34px;border-radius:50%;
    background:#e4f1e8;color:#4f8f68;
    display:grid;place-items:center;font-size:18px;
}
.about-vm-card p,.about-vm-card li{
    color:#6c7771;font-size:9.5px;line-height:1.5;
}
.about-vm-card ul{padding-left:13px;margin-top:5px}
.about-vm-card li{margin-bottom:2px}
.about-values-new{
    padding:8px 58px 4px;
}
.about-section-title{text-align:center;margin-bottom:14px}
.about-section-title h2{
    color:#315f46;font-size:18px;line-height:1.25;margin-top:4px;
}
.about-values-grid{
    display:grid;
    grid-template-columns:repeat(5,1fr);
    border-top:1px solid #edf1ee;
    border-bottom:1px solid #edf1ee;
}
.about-values-grid>div{
    min-height:70px;
    padding:14px 10px;
    text-align:center;
    border-right:1px solid #e8ece9;
}
.about-values-grid>div:last-child{border-right:0}
.about-values-grid span{
    display:block;font-size:24px;color:#4f8f68;margin-bottom:5px;
}
.about-values-grid strong{font-size:17px;color:#315f46}
.about-values-grid p{font-size:13.5px;color:#78827d;margin-top:4px;line-height:1.6}
.about-scope-new{padding:10px 58px 18px}
.about-scope-grid-new{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:8px;
}
.about-scope-grid-new article{
    min-height:92px;
    padding:14px 13px;
    border-radius:8px;
    border:1px solid #e8ebe9;
    background:#fafbf9;
}
.about-scope-grid-new article:nth-child(1){background:#edf7ef}
.about-scope-grid-new article:nth-child(2){background:#faf5e9}
.about-scope-grid-new article:nth-child(3){background:#edf7f7}
.about-scope-grid-new article:nth-child(4){background:#f2f0fa}
.scope-num{font-size:9px;font-weight:800;color:#6a8a77}
.about-scope-grid-new h3{font-size:12px;color:#315f46;margin:2px 0}
.about-scope-grid-new p{font-size:8.5px;line-height:1.45;color:#717b76}
.about-final-cta{
    margin:0 58px 24px;
    padding:14px 18px;
    border-radius:8px;
    background:#f4f7f3;
    display:flex;
    align-items:center;
    gap:12px;
}
.about-final-icon{
    width:34px;height:34px;border-radius:50%;
    background:#dcecdf;color:#4f8f68;
    display:grid;place-items:center;
}
.about-final-cta h2{font-size:12px;color:#315f46}
.about-final-cta p{font-size:8.5px;color:#747e79}
.about-final-cta a{
    margin-left:auto;
    background:#4f8f68;color:#fff;border-radius:5px;
    padding:8px 12px;font-size:8.5px;font-weight:700;
    white-space:nowrap;
}

/* footer on this compact page */
.about-page .site-footer{
    margin-top:0;
    border-radius:0;
}
.about-page .footer-grid{padding-left:58px;padding-right:58px}
.about-page .footer-bottom{padding-left:58px;padding-right:58px}

@media(max-width:900px){
    .about-header-inner{padding:0 24px}
    .about-nav{gap:14px}
    .about-brand,.about-brand img{width:135px;height:44px}
    .about-profile-new,.about-vision-mission{margin-left:28px;margin-right:28px}
    .about-values-new,.about-scope-new{padding-left:28px;padding-right:28px}
    .about-final-cta{margin-left:28px;margin-right:28px}
    .about-page .footer-grid{padding-left:28px;padding-right:28px}
    .about-page .footer-bottom{padding-left:28px;padding-right:28px}
}
@media(max-width:700px){
    .about-shell{width:calc(100% - 16px);margin:8px auto 20px;border-radius:22px}
    .about-header{height:auto}
    .about-header-inner{height:auto;min-height:68px;padding:10px 16px}
    .about-nav{display:none}
    .about-brand,.about-brand img{width:140px;height:44px}
    .about-header-cta{font-size:9px;padding:8px 10px;margin-left:auto}
    .about-hero-new{height:185px}
    .about-hero-content{padding:28px 22px}
    .about-hero-content h1{font-size:28px}
    .about-profile-new{grid-template-columns:1fr;margin:12px 18px 0}
    .about-profile-photo{height:170px}
    .about-profile-copy{padding:20px}
    .about-vision-mission{grid-template-columns:1fr;margin:8px 18px 0}
    .about-values-new,.about-scope-new{padding-left:18px;padding-right:18px}
    .about-values-grid{grid-template-columns:repeat(2,1fr)}
    .about-values-grid>div:nth-child(2){border-right:0}
    .about-values-grid>div:nth-child(3){border-top:1px solid #e8ece9}
    .about-values-grid>div:nth-child(4){border-top:1px solid #e8ece9}
    .about-values-grid>div:nth-child(5){border-top:1px solid #e8ece9;grid-column:1/-1}
    .about-scope-grid-new{grid-template-columns:1fr 1fr}
    .about-final-cta{margin-left:18px;margin-right:18px;flex-wrap:wrap}
    .about-final-cta a{margin-left:46px}
}
@media(max-width:460px){
    .about-header-cta{display:none}
    .about-scope-grid-new{grid-template-columns:1fr}
}

/* =========================================================
   TAHAP 16 - BERANDA MASTER DESIGN
   Diselaraskan dengan halaman Tentang Kami
   ========================================================= */
.home-page{background:#f5f6f4;color:#30413a}
.home-shell{width:min(1180px,calc(100% - 32px));margin:18px auto 36px;background:#fff;border-radius:34px;overflow:hidden;box-shadow:0 14px 45px rgba(32,63,48,.08)}
.home-header{height:78px;background:#fff;border-bottom:1px solid #edf1ee}
.home-header-inner{height:100%;padding:0 34px;display:flex;align-items:center;gap:25px}
.home-brand{width:154px;height:48px;flex:0 0 154px;display:flex;align-items:center}
.home-brand img{width:154px;height:48px;object-fit:contain;object-position:left center}
.home-nav{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:24px;font-size:12px}
.home-nav a{position:relative;white-space:nowrap;color:#33413b}
.home-nav a:hover,.home-nav a.active{color:#4f8f68}
.home-nav a.active:after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;border-radius:3px;background:#4f8f68}
.home-header-cta{background:#4f8f68;color:#fff;padding:10px 14px;border-radius:6px;font-size:11px;font-weight:700;white-space:nowrap}
.home-hero{height:410px;position:relative;overflow:hidden;background:#274d38}
.home-hero-photo{position:absolute;inset:0}
.home-hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center}
.home-hero-photo-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,55,37,.92) 0%,rgba(27,70,48,.76) 43%,rgba(20,45,33,.20) 100%)}
.home-hero-content{position:relative;z-index:2;width:58%;padding:70px 58px;color:#fff}
.home-eyebrow{font-size:10px;font-weight:800;letter-spacing:1.4px;color:#d8eadc}
.home-hero-content h1{font-size:39px;line-height:1.08;letter-spacing:-1px;margin:10px 0 15px}
.home-hero-content h1 strong{color:#dcefdc}
.home-hero-content p{max-width:520px;font-size:12px;line-height:1.75;color:#edf4ef}
.home-actions{display:flex;gap:10px;margin-top:22px}
.home-btn{padding:11px 16px;border-radius:6px;font-size:10px;font-weight:700}
.home-btn-primary{background:#fff;color:#315f46}
.home-btn-light{border:1px solid rgba(255,255,255,.55);color:#fff}
.home-hero-note{position:absolute;right:46px;bottom:38px;z-index:3;background:rgba(255,255,255,.94);border-radius:8px;padding:12px 15px;min-width:190px;box-shadow:0 10px 25px rgba(0,0,0,.12)}
.home-hero-note strong{display:block;color:#315f46;font-size:11px}
.home-hero-note span{display:block;color:#758078;font-size:8.5px;margin-top:3px}
.home-intro{margin:16px 58px 0;padding:22px 25px;display:grid;grid-template-columns:48% 52%;gap:28px;border:1px solid #edf1ee;border-radius:9px;background:linear-gradient(100deg,#f5faf6,#fff)}
.home-label{font-size:9px;letter-spacing:1.1px;font-weight:800;color:#4f8f68}
.home-intro h2{font-size:20px;line-height:1.25;color:#315f46;margin-top:5px}
.home-intro>p{font-size:10.5px;line-height:1.65;color:#6f7974;align-self:center}
.home-services,.home-needs,.home-team,.home-program,.home-articles{padding:28px 58px}
.home-section-head{text-align:center;margin-bottom:17px}
.home-section-head h2{font-size:20px;color:#315f46;margin:5px 0}
.home-section-head p{font-size:10px;line-height:1.55;color:#78827d;max-width:620px;margin:0 auto}
.home-service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.home-service-grid article{position:relative;padding:17px 15px 16px;min-height:170px;border:1px solid #e8ece9;border-radius:9px;background:#fafbf9}
.home-service-grid article:nth-child(1){background:#edf7ef}
.home-service-grid article:nth-child(2){background:#f3effa}
.home-service-grid article:nth-child(3){background:#fbf6e8}
.home-service-grid article:nth-child(4){background:#f8eef2}
.home-card-icon{width:34px;height:34px;border-radius:50%;background:#fff;display:grid;place-items:center;color:#4f8f68;font-size:18px;margin-bottom:10px}
.home-service-grid article>span{font-size:8px;color:#7b867f;font-weight:800}
.home-service-grid h3{font-size:13px;line-height:1.25;color:#315f46;margin:4px 0 6px}
.home-service-grid p{font-size:9px;line-height:1.5;color:#6f7974}
.home-service-grid a,.home-team a,.home-program a,.home-articles a{display:inline-block;margin-top:10px;font-size:9px;font-weight:700;color:#4f8f68}
.home-needs{background:#f8faf7}
.home-needs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.home-needs-grid a{position:relative;padding:18px 15px;background:#fff;border:1px solid #e8ece9;border-radius:8px;min-height:120px}
.home-needs-grid a:nth-child(2){background:#f7f2fb}.home-needs-grid a:nth-child(3){background:#fbf7e9}.home-needs-grid a:nth-child(4){background:#eff7f7}
.home-needs-grid b{font-size:9px;color:#6f8b79}
.home-needs-grid h3{font-size:13px;color:#315f46;margin:5px 0}
.home-needs-grid p{font-size:9px;line-height:1.5;color:#707a75;max-width:190px}
.home-needs-grid span{position:absolute;right:14px;bottom:13px;color:#4f8f68;font-weight:800}
.home-team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.home-team-grid article{padding:16px;border:1px solid #e8ece9;border-radius:8px;background:#fff;text-align:center}
.team-avatar{width:76px;height:76px;margin:0 auto 10px;border-radius:50%;background:linear-gradient(145deg,#e5f0e7,#d2e4d7);display:grid;place-items:center;color:#4f8f68;font-size:28px;font-weight:700}
.home-team-grid article>span{font-size:8px;letter-spacing:1px;color:#4f8f68;font-weight:800}
.home-team-grid h3{font-size:13px;color:#315f46;margin:4px 0}
.home-team-grid p{font-size:9px;color:#78827d}
.home-program{background:#fbfcfa}
.home-program-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.home-program-grid article{padding:18px;border-radius:8px;border:1px solid #e8ece9;background:#fff}
.home-program-grid b{font-size:20px;color:#c7d9ca}
.home-program-grid span{display:block;font-size:8px;letter-spacing:1px;color:#4f8f68;font-weight:800;margin-top:5px}
.home-program-grid h3{font-size:14px;color:#315f46;margin:5px 0}
.home-program-grid p{font-size:9px;line-height:1.55;color:#707a75}
.home-article-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.home-article-grid article{border:1px solid #e8ece9;border-radius:8px;overflow:hidden;background:#fff}
.article-visual{height:100px;display:grid;place-items:center;background:linear-gradient(135deg,#dbe9de,#9fbaa6);color:#fff;font-size:11px;font-weight:800;letter-spacing:2px}
.home-article-grid article:nth-child(2) .article-visual{background:linear-gradient(135deg,#dcd6e9,#a79aba)}
.home-article-grid article:nth-child(3) .article-visual{background:linear-gradient(135deg,#eadfc8,#bca67c)}
.home-article-grid article>div:last-child{padding:14px}
.home-article-grid small{font-size:8px;color:#4f8f68}
.home-article-grid h3{font-size:12px;line-height:1.3;color:#315f46;margin:5px 0}
.home-article-grid p{font-size:9px;line-height:1.5;color:#707a75}
.home-cta{margin:0 58px 24px;padding:20px 23px;border-radius:9px;background:#eef6ef;display:flex;align-items:center;gap:20px}
.home-cta h2{font-size:18px;color:#315f46;margin:4px 0}
.home-cta p{font-size:9px;color:#727c76}
.home-cta a{margin-left:auto;background:#4f8f68;color:#fff;padding:10px 14px;border-radius:6px;font-size:9px;font-weight:700;white-space:nowrap}
.home-page .site-footer{margin-top:0;border-radius:0}
.home-page .footer-grid{padding-left:58px;padding-right:58px}
.home-page .footer-bottom{padding-left:58px;padding-right:58px}

@media(max-width:900px){
    .home-header-inner{padding:0 24px}
    .home-nav{gap:14px}
    .home-brand,.home-brand img{width:135px;height:44px}
    .home-intro,.home-cta{margin-left:28px;margin-right:28px}
    .home-services,.home-needs,.home-team,.home-program,.home-articles{padding-left:28px;padding-right:28px}
    .home-page .footer-grid,.home-page .footer-bottom{padding-left:28px;padding-right:28px}
}
@media(max-width:700px){
    .home-shell{width:calc(100% - 16px);margin:8px auto 20px;border-radius:22px}
    .home-header{height:auto}.home-header-inner{min-height:68px;height:auto;padding:10px 16px}
    .home-nav{display:none}.home-brand,.home-brand img{width:140px;height:44px}
    .home-header-cta{font-size:9px;padding:8px 10px;margin-left:auto}
    .home-hero{height:470px}.home-hero-content{width:100%;padding:48px 24px}.home-hero-content h1{font-size:32px}
    .home-hero-note{left:24px;right:auto;bottom:24px}
    .home-intro{grid-template-columns:1fr;margin:12px 18px 0}
    .home-services,.home-needs,.home-team,.home-program,.home-articles{padding:24px 18px}
    .home-service-grid,.home-needs-grid{grid-template-columns:1fr 1fr}
    .home-team-grid,.home-program-grid,.home-article-grid{grid-template-columns:1fr}
    .home-cta{margin-left:18px;margin-right:18px;flex-wrap:wrap}
    .home-cta a{margin-left:0}
}
@media(max-width:460px){
    .home-header-cta{display:none}
    .home-service-grid,.home-needs-grid{grid-template-columns:1fr}
}

/* =========================================================
   TAHAP 17 - LOGO SEDIKIT LEBIH BESAR
   Hanya ukuran logo/header yang diubah.
   ========================================================= */
.home-brand,
.about-brand{
    width:178px !important;
    height:54px !important;
    flex-basis:178px !important;
}
.home-brand img,
.about-brand img{
    width:178px !important;
    height:54px !important;
    object-fit:contain !important;
}

@media(max-width:900px){
    .home-brand,.about-brand,
    .home-brand img,.about-brand img{
        width:158px !important;
        height:50px !important;
    }
}
@media(max-width:700px){
    .home-brand,.about-brand,
    .home-brand img,.about-brand img{
        width:150px !important;
        height:48px !important;
    }
}

/* =========================================================
   TAHAP 18 - LOGO LEBIH BESAR
   Hanya memperbesar logo; layout lainnya tetap.
   ========================================================= */
.home-brand,
.about-brand{
    width:210px !important;
    height:62px !important;
    flex-basis:210px !important;
}
.home-brand img,
.about-brand img{
    width:210px !important;
    height:62px !important;
    object-fit:contain !important;
}

@media(max-width:900px){
    .home-brand,.about-brand,
    .home-brand img,.about-brand img{
        width:185px !important;
        height:56px !important;
    }
}
@media(max-width:700px){
    .home-brand,.about-brand,
    .home-brand img,.about-brand img{
        width:165px !important;
        height:52px !important;
    }
}

/* TAHAP 19 - LOGO BESAR */
.home-brand,.about-brand{
    width:245px !important;
    height:68px !important;
    flex-basis:245px !important;
}
.home-brand img,.about-brand img{
    width:245px !important;
    height:68px !important;
    object-fit:contain !important;
}
@media(max-width:900px){
    .home-brand,.about-brand,.home-brand img,.about-brand img{
        width:205px !important;height:60px !important;
    }
}
@media(max-width:700px){
    .home-brand,.about-brand,.home-brand img,.about-brand img{
        width:180px !important;height:54px !important;
    }
}

/* =========================================================
   TAHAP 20 - WARNA LEBIH CERAH & FRESH
   Logo dan layout tetap.
   ========================================================= */
body.home-page,
body.about-page {
    background: #f7faf7 !important;
}

.home-shell,
.about-shell {
    background: #ffffff !important;
}

/* Header lebih bersih */
.home-header,
.about-header {
    background: #ffffff !important;
}

/* Hijau utama dibuat lebih fresh */
.home-header-cta,
.about-header-cta,
.home-cta a,
.about-final-cta a {
    background: #5fa878 !important;
}

/* Teks hijau dibuat sedikit lebih terang */
.home-nav a:hover,
.home-nav a.active,
.about-nav a:hover,
.about-nav a.active,
.home-label,
.about-label,
.home-service-grid a,
.home-team a,
.home-program a,
.home-articles a {
    color: #579b70 !important;
}

/* Hero tetap hijau, tetapi tidak terlalu gelap */
.home-hero-photo-overlay {
    background: linear-gradient(
        90deg,
        rgba(34, 91, 59, .82) 0%,
        rgba(55, 112, 78, .64) 43%,
        rgba(45, 92, 64, .18) 100%
    ) !important;
}

.about-hero-new {
    background:
        linear-gradient(90deg, rgba(38, 94, 62, .78), rgba(74, 120, 91, .48)),
        linear-gradient(120deg, #6f987d 0%, #dfe2d5 54%, #91a994 100%) !important;
}

/* Judul tetap hijau tetapi lebih fresh */
.home-hero-content h1,
.home-intro h2,
.home-section-head h2,
.home-needs-grid h3,
.home-team-grid h3,
.home-program-grid h3,
.home-article-grid h3,
.about-profile-copy h2,
.about-section-title h2,
.about-scope-grid-new h3,
.about-final-cta h2 {
    color: #3e7654 !important;
}

/* Background kartu dibuat lebih terang */
.home-service-grid article:nth-child(1) { background: #f0f9f2 !important; }
.home-service-grid article:nth-child(2) { background: #f8f4fb !important; }
.home-service-grid article:nth-child(3) { background: #fffaf0 !important; }
.home-service-grid article:nth-child(4) { background: #fcf3f6 !important; }

.home-needs-grid a:nth-child(2) { background: #faf6fc !important; }
.home-needs-grid a:nth-child(3) { background: #fffaf0 !important; }
.home-needs-grid a:nth-child(4) { background: #f2faf9 !important; }

.about-profile-new,
.about-vm-card,
.about-scope-grid-new article,
.home-service-grid article,
.home-needs-grid a,
.home-team-grid article,
.home-program-grid article,
.home-article-grid article {
    border-color: #e5eee7 !important;
}

/* CTA dibuat lebih segar */
.home-cta,
.about-final-cta {
    background: #f0f8f1 !important;
}

/* =========================================================
   TAHAP 21 - WARNA LEBIH CERAH LAGI
   Fresh, ringan, clean. Layout/logo tetap.
   ========================================================= */
body.home-page,
body.about-page {
    background: #fbfdfb !important;
}

.home-shell,
.about-shell {
    background: #ffffff !important;
    box-shadow: 0 14px 45px rgba(65, 105, 80, .06) !important;
}

.home-header,
.about-header {
    background: #ffffff !important;
    border-bottom-color: #edf5ef !important;
}

/* Primary green: lebih muda */
.home-header-cta,
.about-header-cta,
.home-cta a,
.about-final-cta a {
    background: #70b486 !important;
}

.home-nav a:hover,
.home-nav a.active,
.about-nav a:hover,
.about-nav a.active,
.home-label,
.about-label,
.home-service-grid a,
.home-team a,
.home-program a,
.home-articles a {
    color: #65a97b !important;
}

/* Hero lebih terang */
.home-hero-photo-overlay {
    background: linear-gradient(
        90deg,
        rgba(50, 111, 73, .68) 0%,
        rgba(74, 132, 94, .48) 43%,
        rgba(75, 116, 88, .10) 100%
    ) !important;
}

.about-hero-new {
    background:
        linear-gradient(90deg, rgba(67, 119, 83, .65), rgba(106, 150, 118, .36)),
        linear-gradient(120deg, #8bb399 0%, #e8eadf 54%, #a9bdab 100%) !important;
}

.home-hero-content h1,
.home-intro h2,
.home-section-head h2,
.home-needs-grid h3,
.home-team-grid h3,
.home-program-grid h3,
.home-article-grid h3,
.about-profile-copy h2,
.about-section-title h2,
.about-scope-grid-new h3,
.about-final-cta h2 {
    color: #4a805d !important;
}

/* Kartu dibuat lebih pastel */
.home-service-grid article:nth-child(1) { background: #f4fbf5 !important; }
.home-service-grid article:nth-child(2) { background: #fbf8fd !important; }
.home-service-grid article:nth-child(3) { background: #fffdf5 !important; }
.home-service-grid article:nth-child(4) { background: #fff8fa !important; }

.home-needs-grid a:nth-child(2) { background: #fcf9fd !important; }
.home-needs-grid a:nth-child(3) { background: #fffdf6 !important; }
.home-needs-grid a:nth-child(4) { background: #f5fcfb !important; }

.about-profile-new,
.about-vm-card,
.about-scope-grid-new article,
.home-service-grid article,
.home-needs-grid a,
.home-team-grid article,
.home-program-grid article,
.home-article-grid article {
    border-color: #eaf3ec !important;
}

.home-cta,
.about-final-cta {
    background: #f4faf5 !important;
}

/* Ikon hijau lebih ringan */
.home-card-icon,
.about-vm-icon,
.about-final-icon {
    color: #6ab080 !important;
    background: #e9f6ec !important;
}

/* =========================================================
   TAHAP 22 - HALAMAN LAYANAN
   ========================================================= */
.service-hero{height:190px!important}
.service-intro{padding:28px 58px 18px;text-align:center}
.service-intro h2{max-width:700px;margin:6px auto;color:#4a805d;font-size:24px;line-height:1.25}
.service-intro p{max-width:680px;margin:8px auto;color:#747e79;font-size:10.5px;line-height:1.7}
.service-grid-page{padding:8px 58px 25px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.service-page-card{padding:22px;border:1px solid #e7f0e9;border-radius:10px;background:#f7fbf8;min-height:170px}
.service-page-card:nth-child(2){background:#fcf9fd}.service-page-card:nth-child(3){background:#fffdf6}.service-page-card:nth-child(4){background:#f5fbfa}
.service-page-icon{width:52px;height:52px;border-radius:14px;background:radial-gradient(circle at 30% 22%,rgba(255,255,255,.75),rgba(255,255,255,0) 46%),linear-gradient(140deg,#eef8f0 0%,#d9efdf 55%,#c4e6cf 100%);border:1px solid #c5e3cf;color:#4f9468;display:flex;align-items:center;justify-content:center;margin:0 0 14px 0;flex-shrink:0;line-height:0;box-sizing:border-box;box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(94,143,111,.14),0 8px 18px rgba(69,120,88,.12);transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.service-page-icon svg{width:24px;height:24px;display:block;flex-shrink:0;filter:drop-shadow(0 1px 1px rgba(255,255,255,.6))}
.service-page-card:hover .service-page-icon,.service-detail-side .service-page-icon{transition:transform .24s ease,box-shadow .24s ease,border-color .24s ease}
.service-page-card:hover .service-page-icon{transform:translateY(-2px) scale(1.05);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),inset 0 -1px 0 rgba(94,143,111,.14),0 12px 26px rgba(69,120,88,.20);border-color:#aed8bc}
.service-page-card>span{font-size:8px;color:#789081;font-weight:800}
.service-page-card h3{font-size:16px;color:#3e7654;margin:5px 0}
.service-page-card p{font-size:9.5px;line-height:1.6;color:#6f7974;max-width:470px}
.service-page-card a{display:inline-block;margin-top:10px;color:#65a97b;font-size:9.5px;font-weight:800}
.service-cta{margin:0 58px 25px;padding:18px 22px;border-radius:9px;background:#f4faf5;display:flex;align-items:center;gap:20px}
.service-cta h2{font-size:16px;color:#4a805d;margin:4px 0}.service-cta p{font-size:9px;color:#747e79}
.service-cta a{margin-left:auto;background:#70b486;color:#fff;padding:10px 15px;border-radius:6px;font-size:9px;font-weight:800;white-space:nowrap}
.service-detail{padding:28px 58px 32px;display:grid;grid-template-columns:1fr 290px;gap:22px}
.service-detail-main{padding:4px 5px}.service-detail-main h2{font-size:27px;color:#3e7654;margin:5px 0}
.service-detail-main p{font-size:11px;line-height:1.8;color:#6f7974;max-width:650px}
.service-detail-main h3{font-size:14px;color:#3e7654;margin:24px 0 8px}
.service-checklist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:7px;max-width:650px}
.service-checklist li{padding:11px 14px;background:#f5faf6;border-radius:6px;color:#66726b;font-size:13.5px}
.service-checklist li:before{content:"✓";color:#65a97b;font-weight:900;margin-right:7px}
.service-detail-side{align-self:start;padding:22px;border:1px solid #e7f0e9;border-radius:10px;background:#f7fbf8}
.service-detail-side h3{font-size:16px;color:#3e7654;margin:8px 0}
.service-detail-side p{font-size:9.5px;line-height:1.6;color:#707a75}
.service-detail-side>a{display:inline-block;margin-top:10px;background:#70b486;color:#fff;padding:9px 12px;border-radius:6px;font-size:9px;font-weight:800}
@media(max-width:700px){
 .service-intro,.service-grid-page,.service-detail{padding-left:18px;padding-right:18px}
 .service-grid-page{grid-template-columns:1fr}
 .service-cta{margin-left:18px;margin-right:18px;flex-wrap:wrap}
 .service-cta a{margin-left:0}
 .service-detail{grid-template-columns:1fr}
 .service-checklist{grid-template-columns:1fr}
}

/* =========================================================
   TAHAP 23 - PROFIL PSIKOLOG
   ========================================================= */
.psych-grid{padding:8px 58px 28px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.psych-card{padding:20px;text-align:center;border:1px solid #e7f0e9;border-radius:10px;background:#f7fbf8}
.psych-card:nth-child(2){background:#fcf9fd}.psych-card:nth-child(3){background:#fffdf6}
.psych-photo{width:105px;height:105px;border-radius:50%;margin:0 auto 12px;background:linear-gradient(145deg,#e8f4ea,#cfe6d4);display:grid;place-items:center;color:#6ab080;font-size:38px;font-weight:700}
.psych-card>span{font-size:8px;letter-spacing:1px;color:#65a97b;font-weight:800}
.psych-card h3{font-size:13px;color:#3e7654;margin:6px 0 4px}
.psych-card p{font-size:9px;color:#727c76;min-height:26px}
.psych-card a{display:inline-block;margin-top:12px;color:#65a97b;font-size:9.5px;font-weight:800}
.psych-profile{padding:30px 58px 34px;display:grid;grid-template-columns:220px 1fr 260px;gap:24px}
.psych-profile-photo{width:220px;height:260px;border-radius:10px;background:linear-gradient(145deg,#e8f4ea,#cfe6d4);display:grid;place-items:center;color:#6ab080;font-size:70px;font-weight:700}
.psych-profile-main h2{font-size:25px;color:#3e7654;margin:5px 0}.psych-profile-main h3{font-size:13px;color:#3e7654;margin:18px 0 4px}.psych-profile-main p{font-size:10px;line-height:1.7;color:#707a75}
.psych-profile-side{padding:20px;border:1px solid #e7f0e9;border-radius:10px;background:#f7fbf8;height:max-content}
.psych-profile-side h3{font-size:15px;color:#3e7654;margin:6px 0}.psych-profile-side ul{padding-left:16px;color:#6f7974;font-size:9.5px;line-height:1.9}.psych-profile-side a{display:inline-block;background:#70b486;color:#fff;padding:9px 12px;border-radius:6px;font-size:9px;font-weight:800}
@media(max-width:800px){.psych-grid{padding-left:18px;padding-right:18px;grid-template-columns:1fr}.psych-profile{padding:25px 18px;grid-template-columns:1fr}.psych-profile-photo{width:180px;height:210px;margin:auto}.psych-profile-side{margin-top:5px}}

/* =========================================================
   TAHAP 24 - PROGRAM
   ========================================================= */
.program-page-grid{padding:8px 58px 28px;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.program-page-grid article{padding:22px;border:1px solid #e7f0e9;border-radius:10px;background:#f7fbf8;min-height:175px}
.program-page-grid article:nth-child(2){background:#fcf9fd}.program-page-grid article:nth-child(3){background:#fffdf6}.program-page-grid article:nth-child(4){background:#f5fbfa}
.program-number{font-size:22px;color:#a3c7ad;font-weight:800;line-height:1;margin-bottom:12px}
.program-page-grid article>span{font-size:8px;letter-spacing:1px;color:#65a97b;font-weight:800}
.program-page-grid h3{font-size:16px;color:#3e7654;margin:6px 0}.program-page-grid p{font-size:9.5px;line-height:1.65;color:#6f7974;max-width:500px}
.program-page-grid a{display:inline-block;margin-top:10px;color:#65a97b;font-size:9.5px;font-weight:800}
.program-detail{padding:30px 58px 34px;display:grid;grid-template-columns:1fr 290px;gap:22px}
.program-detail-main h2{font-size:27px;color:#3e7654;margin:5px 0}.program-detail-main p{font-size:14px;line-height:1.8;color:#6f7974;max-width:650px}.program-detail-main h3{font-size:17px;color:#3e7654;margin:24px 0 10px}
@media(max-width:700px){.program-page-grid{padding-left:18px;padding-right:18px;grid-template-columns:1fr}.program-detail{padding-left:18px;padding-right:18px;grid-template-columns:1fr}}

/* =========================================================
   TAHAP 25 - JEMBATAN STUDENT WELLBEING ↔ SISTEM BK
   Hanya muncul pada detail Student Wellbeing.
   ========================================================= */
.bk-bridge{
    margin:0 58px 28px;
    padding:24px 26px;
    border:1px solid #e1efe4;
    border-radius:12px;
    background:linear-gradient(120deg,#f2faf4 0%,#fbfdfb 58%,#f5faf7 100%);
    display:grid;
    grid-template-columns:1fr 220px;
    gap:28px;
    align-items:center;
}
.bk-bridge-copy h2{font-size:22px;color:#3e7654;margin:5px 0 7px}
.bk-bridge-copy>p{font-size:13.5px;line-height:1.75;color:#6f7974;max-width:690px}
.bk-bridge-points{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}
.bk-bridge-points>div{padding:11px;border-radius:8px;background:#fff;border:1px solid #e7f0e9}
.bk-bridge-points strong{display:block;font-size:14px;color:#a1c6aa;margin-bottom:5px}
.bk-bridge-points span{display:block;font-size:13px;font-weight:800;color:#4f805f}
.bk-bridge-points small{display:block;font-size:11.5px;line-height:1.5;color:#78817c;margin-top:4px}
.bk-bridge-button{display:inline-block;background:#70b486;color:#fff;padding:11px 16px;border-radius:6px;font-size:12.5px;font-weight:800}
.bk-bridge-visual{min-height:180px;border-radius:10px;background:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px solid #e7f0e9;text-align:center}
.bk-visual-circle{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;background:#e9f6ec;color:#65a97b;font-size:25px;font-weight:900;margin-bottom:9px}
.bk-bridge-visual span{font-size:11.5px;line-height:1.5;color:#6f7974;font-weight:700}
@media(max-width:800px){
 .bk-bridge{margin-left:18px;margin-right:18px;grid-template-columns:1fr;padding:20px}
 .bk-bridge-points{grid-template-columns:1fr}
 .bk-bridge-visual{min-height:130px}
}


/* =========================================================
   TAHAP 26 — ARTIKEL PSIKOLOGI AABS
   CSS tambahan khusus artikel.
   Tidak mengubah komponen halaman lain.
   ========================================================= */

.service-intro{
    padding:28px 58px 20px;
    max-width:900px;
}

.service-intro h2{
    margin:7px 0 8px;
    color:#3e7654;
    font-size:25px;
    line-height:1.3;
    font-weight:800;
}

.service-intro p{
    margin:0;
    color:#707a75;
    font-size:10px;
    line-height:1.7;
    max-width:720px;
}

/* GRID ARTIKEL */
.article-page-grid{
    padding:8px 58px 30px;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
}

.article-page-card{
    display:grid;
    grid-template-columns:132px minmax(0,1fr);
    gap:16px;
    padding:14px;
    border:1px solid #e5eee7;
    border-radius:10px;
    background:#f8fbf9;
    align-items:center;
    transition:transform .2s ease, box-shadow .2s ease;
}

.article-page-card:hover{
    transform:translateY(-2px);
    box-shadow:0 7px 20px rgba(70,110,82,.08);
}

.article-page-card:nth-child(2){background:#fbf9fc}
.article-page-card:nth-child(3){background:#fffdf8}
.article-page-card:nth-child(4){background:#f6fbfa}
.article-page-card:nth-child(5){background:#f8fbf6}
.article-page-card:nth-child(6){background:#fbf9fc}

.article-page-visual{
    min-height:112px;
    border-radius:8px;
    display:grid;
    place-items:center;
    background:linear-gradient(145deg,#edf7ef,#dceee0);
    color:#629b71;
    font-size:13px;
    font-weight:900;
    letter-spacing:1px;
}

.article-page-card:nth-child(2) .article-page-visual{
    background:linear-gradient(145deg,#f5edf8,#eadff0);
    color:#8d7097;
}

.article-page-card:nth-child(3) .article-page-visual{
    background:linear-gradient(145deg,#fff8e7,#f4e8c7);
    color:#a18754;
}

.article-page-card:nth-child(4) .article-page-visual{
    background:linear-gradient(145deg,#eaf7f5,#d8ece8);
    color:#5f9389;
}

.article-page-card:nth-child(5) .article-page-visual{
    background:linear-gradient(145deg,#eff7e9,#deecd4);
    color:#73965f;
}

.article-page-card:nth-child(6) .article-page-visual{
    background:linear-gradient(145deg,#f6eff9,#e9dfef);
    color:#856e91;
}

.article-page-content>span{
    display:block;
    margin-bottom:5px;
    color:#65a97b;
    font-size:7px;
    line-height:1.3;
    letter-spacing:1px;
    font-weight:800;
}

.article-page-content h3{
    margin:0 0 7px;
    color:#3e7654;
    font-size:14px;
    line-height:1.35;
    font-weight:800;
}

.article-page-content p{
    margin:0;
    color:#707a75;
    font-size:9px;
    line-height:1.65;
}

.article-page-content a{
    display:inline-block;
    margin-top:9px;
    color:#65a97b;
    font-size:8.5px;
    font-weight:800;
    text-decoration:none;
}

.article-page-content a:hover{
    color:#3e7654;
}

/* DETAIL ARTIKEL */
.article-detail{
    padding:30px 58px 36px;
    display:grid;
    grid-template-columns:minmax(0,1fr) 270px;
    gap:26px;
}

.article-detail main{
    min-width:0;
}

.article-detail main h2{
    margin:5px 0 8px;
    color:#3e7654;
    font-size:28px;
    line-height:1.25;
    font-weight:800;
}

.article-detail main>p{
    max-width:700px;
    margin:0 0 15px;
    color:#6f7974;
    font-size:10.5px;
    line-height:1.85;
}

.article-detail main .article-lead{
    margin-bottom:20px;
    color:#59665f;
    font-size:12px;
    line-height:1.8;
    font-weight:600;
}

.article-detail-side{
    height:max-content;
    padding:18px;
    border:1px solid #e5eee7;
    border-radius:10px;
    background:#f7fbf8;
}

.article-detail-side .article-page-visual{
    min-height:125px;
    margin-bottom:15px;
}

.article-detail-side h3{
    margin:6px 0 7px;
    color:#3e7654;
    font-size:15px;
    line-height:1.35;
}

.article-detail-side p{
    margin:0;
    color:#707a75;
    font-size:9px;
    line-height:1.7;
}

.article-detail-side>a{
    display:inline-block;
    margin-top:11px;
    padding:9px 12px;
    border-radius:6px;
    background:#70b486;
    color:#fff;
    font-size:8.5px;
    font-weight:800;
    text-decoration:none;
}

.article-detail-side>a:hover{
    background:#5f9f70;
}

/* CTA ARTIKEL */
.article-page-grid + .service-cta{
    margin-top:4px;
}

/* MOBILE */
@media(max-width:800px){

    .service-intro{
        padding:22px 18px 16px;
    }

    .service-intro h2{
        font-size:21px;
    }

    .article-page-grid{
        padding:8px 18px 25px;
        grid-template-columns:1fr;
        gap:10px;
    }

    .article-page-card{
        grid-template-columns:105px minmax(0,1fr);
        gap:13px;
        padding:12px;
    }

    .article-page-visual{
        min-height:100px;
        font-size:11px;
    }

    .article-page-content h3{
        font-size:13px;
    }

    .article-detail{
        padding:24px 18px 30px;
        grid-template-columns:1fr;
        gap:18px;
    }

    .article-detail main h2{
        font-size:23px;
    }

    .article-detail-side{
        width:100%;
        box-sizing:border-box;
    }
}
/* =====================================================
   EFEK HOVER KARTU ARTIKEL AABS
   ===================================================== */

.article-page-card {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.article-page-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        120deg,
        transparent 30%,
        rgba(255,255,255,0.35) 50%,
        transparent 70%
    );
    transform: translateX(-120%);
    transition: transform 0.65s ease;
    pointer-events: none;
}

.article-page-card:hover {
    transform: translateY(-7px);
    box-shadow:
        0 14px 30px rgba(70, 110, 82, 0.13);
    border-color: #d5e7da;
}

.article-page-card:hover::after {
    transform: translateX(120%);
}

.article-page-card .article-page-visual {
    transition:
        transform 0.4s ease,
        box-shadow 0.4s ease;
}

.article-page-card:hover .article-page-visual {
    transform: scale(1.035);
}

.article-page-card .article-page-content h3 {
    transition: color 0.3s ease;
}

.article-page-card:hover .article-page-content h3 {
    color: #57966b;
}

.article-page-card .article-page-content a {
    transition:
        letter-spacing 0.3s ease,
        color 0.3s ease;
}

.article-page-card:hover .article-page-content a {
    color: #3e7654;
    letter-spacing: 0.2px;
}

/* =========================================================
   HERO PER HALAMAN
   Setiap menu punya identitas warna + pola dekoratif sendiri
   ========================================================= */

/* Sisi kanan hero: kilau diagonal lembut */
.about-hero-new.hero-tentang:before,
.about-hero-new.hero-layanan:before,
.about-hero-new.hero-psikolog:before,
.about-hero-new.hero-program:before,
.about-hero-new.hero-artikel:before {
    background: linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.16)) !important;
}

/* Lingkaran dekoratif blending di pojok kanan */
.about-hero-new.hero-tentang:after,
.about-hero-new.hero-layanan:after,
.about-hero-new.hero-psikolog:after,
.about-hero-new.hero-program:after,
.about-hero-new.hero-artikel:after {
    content:"";
    position:absolute;
    right:-70px;
    top:50%;
    width:230px;
    height:230px;
    border-radius:50%;
    transform:translateY(-50%);
    pointer-events:none;
    background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.30), rgba(255,255,255,.07) 52%, rgba(255,255,255,0) 74%);
    z-index:1;
}

/* ---------- TENTANG KAMI : zamrud tropis ---------- */
.about-hero-new.hero-tentang {
    background:
        radial-gradient(1100px 420px at 88% 30%, rgba(214,232,184,.34), rgba(214,232,184,0) 55%),
        linear-gradient(115deg, #185c47 0%, #2e8063 46%, #4ba47f 76%, #79c39a 100%) !important;
}
.about-hero-new.hero-tentang .about-hero-content span {
    color: #ffe9b3 !important;
}
.about-hero-new.hero-tentang .about-breadcrumb { color: rgba(255,255,255,.88) !important; }

/* ---------- LAYANAN : laut teal dalam ---------- */
.about-hero-new.hero-layanan {
    background:
        radial-gradient(1000px 400px at 90% 24%, rgba(168,240,238,.30), rgba(168,240,238,0) 55%),
        linear-gradient(115deg, #0e4a52 0%, #136c72 46%, #2c9a92 76%, #59c3ab 100%) !important;
}
.about-hero-new.hero-layanan .about-hero-content span {
    color: #bdfff4 !important;
}
.about-hero-new.hero-layanan .about-breadcrumb { color: rgba(255,255,255,.88) !important; }

/* ---------- PSIKOLOG : violet kalem ---------- */
.about-hero-new.hero-psikolog {
    background:
        radial-gradient(1000px 400px at 88% 28%, rgba(233,214,255,.32), rgba(233,214,255,0) 55%),
        linear-gradient(115deg, #45357c 0%, #5b4a9c 46%, #8268c9 76%, #ab8fe0 100%) !important;
}
.about-hero-new.hero-psikolog .about-hero-content span {
    color: #eddcff !important;
}
.about-hero-new.hero-psikolog .about-breadcrumb { color: rgba(255,255,255,.88) !important; }

/* ---------- PROGRAM : amber hangat ---------- */
.about-hero-new.hero-program {
    background:
        radial-gradient(1000px 400px at 88% 28%, rgba(255,232,186,.34), rgba(255,232,186,0) 55%),
        linear-gradient(115deg, #6b4a12 0%, #96691b 46%, #c98f2e 76%, #e8b45c 100%) !important;
}
.about-hero-new.hero-program .about-hero-content span {
    color: #ffe9ad !important;
}
.about-hero-new.hero-program .about-breadcrumb { color: rgba(255,255,255,.90) !important; }

/* ---------- ARTIKEL : mawar kalem ---------- */
.about-hero-new.hero-artikel {
    background:
        radial-gradient(1000px 400px at 88% 28%, rgba(255,220,228,.22), rgba(255,220,228,0) 55%),
        linear-gradient(115deg, #6e4b57 0%, #8e6a78 46%, #b08d9a 76%, #d3b5bf 100%) !important;
}
.about-hero-new.hero-artikel .about-hero-content span {
    color: #ffd9e2 !important;
}
.about-hero-new.hero-artikel .about-breadcrumb { color: rgba(255,255,255,.88) !important; }

/* Berikan judul keteduhan lebih untuk kontras */
.about-hero-new.hero-tentang .about-hero-content h1,
.about-hero-new.hero-layanan .about-hero-content h1,
.about-hero-new.hero-psikolog .about-hero-content h1,
.about-hero-new.hero-program .about-hero-content h1,
.about-hero-new.hero-artikel .about-hero-content h1 {
    text-shadow: 0 2px 16px rgba(20,30,26,.28) !important;
}
/* =========================================================
   UPGRADE TIPOGRAFI KONTEN
   Ukuran teks konten diperbesar & lebih percaya diri,
   konsisten di atas ukuran footer.
   ========================================================= */

/* ---------- MOTTO ---------- */
.about-vm-card ul {
    list-style: disc;
    padding-left: 18px;
}
.about-vm-card li {
    margin-bottom: 6px;
}
.about-motto {
    grid-column: 1 / -1;
    position: relative;
    overflow: hidden;
    text-align: center;
    padding: 30px 30px 26px;
    margin-bottom: 16px;
    border-radius: 16px;
    background: linear-gradient(115deg, #185c47 0%, #2e8063 46%, #3f9c72 100%);
    box-shadow: 0 12px 30px rgba(38, 94, 62, .22);
}
.about-motto::before {
    content: "\201C";
    position: absolute;
    top: -34px;
    left: 14px;
    font-size: 150px;
    line-height: 1;
    color: rgba(255, 255, 255, .10);
    font-family: Georgia, serif;
    pointer-events: none;
}
.about-motto::after {
    content: "\201D";
    position: absolute;
    bottom: -66px;
    right: 18px;
    font-size: 150px;
    line-height: 1;
    color: rgba(255, 255, 255, .10);
    font-family: Georgia, serif;
    pointer-events: none;
}
.about-motto .about-label {
    color: #f8e08a !important;
    letter-spacing: 2.5px;
    font-size: 10px;
    border: 1px solid rgba(248, 224, 138, .45);
    padding: 5px 16px;
    border-radius: 999px;
    display: inline-block;
    background: rgba(255,255,255,.06);
}
.about-motto p {
    margin: 14px auto 0;
    max-width: 640px;
    font-size: 19px;
    font-weight: 800;
    font-style: italic;
    color: #ffffff;
    line-height: 1.5;
    letter-spacing: .2px;
    text-shadow: 0 2px 12px rgba(18, 46, 33, .28);
}
.about-motto p::after {
    content: "";
    display: block;
    width: 54px;
    height: 3px;
    margin: 14px auto 0;
    border-radius: 99px;
    background: linear-gradient(90deg, #f5d489, #e9a20a, #f8e08a);
}

/* ---------- BERANDA ---------- */
.home-intro h2 { font-size: 24px; }
.home-intro > p { font-size: 14.5px; }
.home-section-head h2 { font-size: 26px; }
.home-section-head p { font-size: 13.5px; }
.home-service-grid article > span { font-size: 10px; }
.home-service-grid h3 { font-size: 17px; }
.home-service-grid p { font-size: 12.5px; line-height: 1.6; }
.home-service-grid a, .home-team a, .home-program a, .home-articles a { font-size: 12px; }
.home-needs-grid b { font-size: 11px; }
.home-needs-grid h3 { font-size: 17px; }
.home-needs-grid p { font-size: 12.5px; line-height: 1.6; max-width: 240px; }
.home-team-grid article > span { font-size: 10.5px; }
.home-team-grid h3 { font-size: 16.5px; }
.home-team-grid p { font-size: 12.5px; line-height: 1.6; }
.home-program-grid span { font-size: 10.5px; }
.home-program-grid h3 { font-size: 17.5px; }
.home-program-grid p { font-size: 12.5px; line-height: 1.62; }
.home-article-grid h3 { font-size: 17px; }
.home-article-grid p { font-size: 12.5px; line-height: 1.62; }

/* ---------- HERO BERANDA ---------- */
.home-hero-content p { font-size: 14.5px; line-height: 1.8; }
.home-hero-note strong { font-size: 12.5px; }
.home-hero-note span { font-size: 10.5px; }

/* ---------- TENTANG KAMI ---------- */
.about-profile-copy h2 { font-size: 26px; }
.about-profile-copy p { font-size: 14.5px; line-height: 1.8; }
.about-vm-card p, .about-vm-card li { font-size: 14px; line-height: 1.75; }
.about-section-title h2 { font-size: 26px; }
.about-values-grid strong { font-size: 17px; }
.about-values-grid p { font-size: 13.5px; line-height: 1.6; }
.about-scope-grid-new h3 { font-size: 16px; }
.about-scope-grid-new p { font-size: 12px; line-height: 1.6; }
.scope-num { font-size: 11px; }
.about-final-cta h2 { font-size: 18px; }
.about-final-cta p { font-size: 12.5px; line-height: 1.6; }

/* ---------- LAYANAN ---------- */
.service-intro h2 { font-size: 27px; }
.service-intro p { font-size: 14px; line-height: 1.75; }
.service-page-card > span { font-size: 10.5px; }
.service-page-card h3 { font-size: 19px; }
.service-page-card p { font-size: 13px; line-height: 1.68; }
.service-page-card a { font-size: 12px; }
.service-detail-main h2 { font-size: 30px; }
.service-detail-main p { font-size: 14px; line-height: 1.8; }
.service-detail-main h3 { font-size: 17px; }
.service-checklist li { font-size: 14px; line-height: 1.6; }
.service-detail-side h3 { font-size: 18px; }
.service-detail-side p { font-size: 13px; line-height: 1.68; }
.service-cta h2 { font-size: 19px; }
.service-cta p { font-size: 12.5px; line-height: 1.6; }
.service-cta a { font-size: 12px; }

/* ---------- PSIKOLOG ---------- */
.psych-card > span { font-size: 10.5px; }
.psych-card h3 { font-size: 16px; }
.psych-card p { font-size: 12px; line-height: 1.6; }
.psych-card a { font-size: 12px; }
.psych-profile-main h2 { font-size: 28px; }
.psych-profile-main h3 { font-size: 16px; }
.psych-profile-main p { font-size: 13.5px; line-height: 1.78; }
.psych-profile-side h3 { font-size: 17px; }
.psych-profile-side ul { font-size: 13px; line-height: 1.9; }

/* ---------- PROGRAM ---------- */
.program-page-grid article > span { font-size: 10.5px; }
.program-page-grid h3 { font-size: 18px; }
.program-page-grid p { font-size: 12.5px; line-height: 1.68; max-width: 560px; }
.program-number { font-size: 26px; }
.program-detail-main p { font-size: 14.5px; line-height: 1.8; }
.program-detail-main h3 { font-size: 18px; }
.bk-bridge-copy>p { font-size: 14px; line-height: 1.75; }
.bk-bridge-points span { font-size: 13.5px; }
.bk-bridge-points small { font-size: 12px; line-height: 1.5; }
.bk-bridge-button { font-size: 13px; }
.bk-bridge-visual span { font-size: 12px; }

/* ---------- ARTIKEL ---------- */
.article-page-content > span { font-size: 9.5px; letter-spacing: 1.1px; }
.article-page-content h3 { font-size: 17px; line-height: 1.35; }
.article-page-content p { font-size: 12px; line-height: 1.66; }
.article-page-content a { font-size: 11.5px; }
.article-page-visual {
    min-height: 112px;
    font-size: 13px;
    letter-spacing: 1.5px;
    padding: 0;
    overflow: hidden;
}

/* ---------- DETAIL ARTIKEL ---------- */
.article-detail {
    display: block;
    max-width: 820px;
    margin: 24px auto 60px;
    padding: 0 30px;
}
.article-detail-header { display: block; }
.article-detail h1 { font-size: 30px; letter-spacing: -.5px; }
.article-detail h3 { font-size: 17px; }
.article-detail p, .article-detail-content { font-size: 13.5px; line-height: 1.85; }
.article-detail-category { font-size: 11px; letter-spacing: 1.2px; }
.article-detail-meta { font-size: 12.5px; }
.article-detail-back { margin-top: 44px; }
@media (max-width: 700px) {
    .article-detail { padding: 0 18px; }
}

/* ---------- LABEL & EYEBROW ---------- */
.about-label, .home-label { font-size: 11px !important; letter-spacing: 1.6px; }

/* =========================================================
   INLINE STYLES DIKONSOLIDASI - 2026-09-09 pixel-identik
   ========================================================= */

/* --- aabs-hero-typography --- */
/* =========================================================
   AABS HERO TYPOGRAPHY
   Judul beranda lebih elegan: badge eyebrow, gradien emas,
   garis aksen & animasi masuk berurutan.
   ========================================================= */

/* Eyebrow jadi badge lembut */
.home-page .home-hero-content .home-eyebrow{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:7px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.30);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    color:#f4faf5 !important;
    font-size:9px;
    font-weight:800;
    letter-spacing:2.6px;
}
.home-page .home-hero-content .home-eyebrow::before,
.home-page .home-hero-content .home-eyebrow::after{
    content:"";
    width:18px;
    height:1px;
    background:linear-gradient(90deg,#e9c46a,#f8e08a);
}
.home-page .home-hero-content .home-eyebrow::after{
    background:linear-gradient(90deg,#f8e08a,#e9c46a);
}

/* Judul: dua baris awal krem lembut, baris emas bergradien */
.home-page .home-hero-content h1{
    font-size:46px;
    line-height:1.12;
    letter-spacing:-.6px;
    font-weight:800;
    color:#fdfcf6 !important;
    text-shadow:0 2px 22px rgba(22,48,34,.28);
}
.home-page .home-hero-content h1 strong{
    display:inline-block;
    background:linear-gradient(92deg,#f5d489 0%,#e9a20a 55%,#f8e08a 100%);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    color:transparent;
    filter:drop-shadow(0 2px 10px rgba(233,162,10,.18));
}

/* Garis aksen emas di bawah judul */
.home-page .home-hero-content::after{
    content:"";
    display:block;
    width:74px;
    height:3px;
    margin-top:16px;
    border-radius:99px;
    background:linear-gradient(90deg,#e9a20a,#f8e08a 70%,rgba(248,224,138,0));
    transform-origin:left center;
    animation:aabsHeroLine .9s ease-out both;
    animation-delay:.65s;
}

.home-page .home-hero-content p{
    font-size:12.5px;
    color:#f2f7f2 !important;
    text-shadow:0 1px 8px rgba(22,48,34,.18);
}

/* Tombol Sistem BK Sekolah */
.home-page .home-btn-bk{
    background:linear-gradient(92deg,#f5d489 0%,#e9a20a 55%,#f8e08a 100%);
    color:#5d4207;
    border:1px solid rgba(255,255,255,.40);
    box-shadow:0 6px 18px rgba(233,162,10,.28);
    transition:transform .22s ease,box-shadow .22s ease,filter .22s ease;
}
.home-page .home-btn-bk:hover{
    transform:translateY(-2px);
    box-shadow:0 10px 24px rgba(233,162,10,.40);
    filter:brightness(1.04);
}

/* Animasi masuk berurutan */
.home-page .home-hero-content .home-eyebrow,
.home-page .home-hero-content h1,
.home-page .home-hero-content p,
.home-page .home-hero-content .home-actions{
    animation:aabsHeroRise .8s cubic-bezier(.22,.61,.36,1) both;
}
.home-page .home-hero-content .home-eyebrow{animation-delay:.05s}
.home-page .home-hero-content h1{animation-delay:.15s}
.home-page .home-hero-content p{animation-delay:.4s}
.home-page .home-hero-content .home-actions{animation-delay:.55s}

@keyframes aabsHeroRise{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
}
@keyframes aabsHeroLine{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
}

@media(max-width:800px){
    .home-page .home-hero-content h1{font-size:33px}
}

@media (prefers-reduced-motion:reduce){
    .home-page .home-hero-content .home-eyebrow,
    .home-page .home-hero-content h1,
    .home-page .home-hero-content p,
    .home-page .home-hero-content .home-actions,
    .home-page .home-hero-content::after{
        animation:none !important;
    }
}

/* --- aabs-card-animation --- */
/* =========================================================
   AABS CARD MOTION
   Efek hover halus dan profesional; layout/isi/link tidak diubah.
   ========================================================= */

/* Semua kartu utama */
.home-page .home-service-grid > article,
.home-page .home-needs-grid > a,
.home-page .home-team-grid > article,
.home-page .home-program-grid > article,
.home-page .home-article-grid > article{
    position:relative;
    overflow:hidden;
    transform:translateY(0);
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease;
    will-change:transform;
}

/* Efek naik seperti kartu Program */
@media (hover:hover){
    .home-page .home-service-grid > article:hover,
    .home-page .home-needs-grid > a:hover,
    .home-page .home-team-grid > article:hover,
    .home-page .home-program-grid > article:hover,
    .home-page .home-article-grid > article:hover{
        transform:translateY(-7px);
        box-shadow:0 16px 32px rgba(38,50,56,.10);
        border-color:rgba(217,144,8,.34);
    }
}

/* Kilau halus saat cursor melewati kartu */
.home-page .home-service-grid > article::after,
.home-page .home-needs-grid > a::after,
.home-page .home-team-grid > article::after,
.home-page .home-program-grid > article::after,
.home-page .home-article-grid > article::after{
    content:"";
    position:absolute;
    top:-25%;
    left:-75%;
    width:42%;
    height:150%;
    pointer-events:none;
    background:linear-gradient(
        100deg,
        transparent 0%,
        rgba(255,255,255,.00) 32%,
        rgba(255,255,255,.32) 50%,
        rgba(255,255,255,.00) 68%,
        transparent 100%
    );
    transform:skewX(-18deg);
    transition:left .55s ease;
}

@media (hover:hover){
    .home-page .home-service-grid > article:hover::after,
    .home-page .home-needs-grid > a:hover::after,
    .home-page .home-team-grid > article:hover::after,
    .home-page .home-program-grid > article:hover::after,
    .home-page .home-article-grid > article:hover::after{
        left:145%;
    }
}

/* Ikon/avatar ikut bergerak sedikit */
@media (hover:hover){
    .home-page .home-service-grid > article:hover .home-card-icon,
    .home-page .home-team-grid > article:hover .team-avatar,
    .home-page .home-article-grid > article:hover .article-visual{
        transform:scale(1.045);
    }
}

.home-page .home-card-icon,
.home-page .team-avatar,
.home-page .article-visual{
    transition:transform .24s ease;
}

/* Accessibility: hormati pengaturan reduce motion */
@media (prefers-reduced-motion:reduce){
    .home-page .home-service-grid > article,
    .home-page .home-needs-grid > a,
    .home-page .home-team-grid > article,
    .home-page .home-program-grid > article,
    .home-page .home-article-grid > article,
    .home-page .home-card-icon,
    .home-page .team-avatar,
    .home-page .article-visual{
        transition:none !important;
    }
}

/* --- aabs-card-animation-v2 --- */
/* =========================================================
   V2 — ANIMASI BERBEDA PER KELOMPOK
   Artikel TIDAK disentuh: animasi sebelumnya tetap aktif.
   ========================================================= */

/* KEBUTUHAN: geser/naik ringan + nomor dan panah bergerak */
@media (hover:hover){
    .home-page .home-needs-grid > a{
        transition:
            transform .25s cubic-bezier(.22,.61,.36,1),
            box-shadow .25s ease,
            border-color .25s ease;
    }
    .home-page .home-needs-grid > a:hover{
        transform:translate3d(6px,-5px,0);
        box-shadow:0 14px 28px rgba(38,50,56,.09);
    }
    .home-page .home-needs-grid > a b{
        display:inline-block;
        transition:transform .28s ease;
    }
    .home-page .home-needs-grid > a:hover b{
        transform:translateX(4px);
    }
    .home-page .home-needs-grid > a span{
        display:inline-block;
        transition:transform .28s ease;
    }
    .home-page .home-needs-grid > a:hover span{
        transform:translateX(6px);
    }
}

/* PSIKOLOG: avatar zoom + lingkaran lembut */
.home-page .home-team-grid > article{
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease;
}
.home-page .home-team-grid > article .team-avatar{
    transition:transform .28s ease, box-shadow .28s ease;
}
@media (hover:hover){
    .home-page .home-team-grid > article:hover{
        transform:translateY(-5px);
        box-shadow:0 14px 30px rgba(38,50,56,.09);
    }
    .home-page .home-team-grid > article:hover .team-avatar{
        transform:scale(1.07);
        box-shadow:0 0 0 7px rgba(233,162,10,.10);
    }
}

/* PROGRAM: aksen emas bergerak dari kiri ke kanan di atas kartu */
.home-page .home-program-grid > article{
    transition:
        transform .24s ease,
        box-shadow .24s ease;
}
.home-page .home-program-grid > article::before{
    content:"";
    position:absolute;
    left:0; right:100%; top:0;
    height:3px;
    background:linear-gradient(90deg,#e9a20a,#f2c45b);
    transition:right .35s ease;
    z-index:2;
}
@media (hover:hover){
    .home-page .home-program-grid > article:hover{
        transform:translateY(-5px);
        box-shadow:0 15px 30px rgba(38,50,56,.09);
    }
    .home-page .home-program-grid > article:hover::before{
        right:0;
    }
}

/* LAYANAN: pertahankan karakter efek V1, tambahkan sedikit gerak ikon */
.home-page .home-service-grid > article{
    transition:
        transform .24s ease,
        box-shadow .24s ease,
        border-color .24s ease;
}
@media (hover:hover){
    .home-page .home-service-grid > article:hover{
        transform:translateY(-7px);
        box-shadow:0 16px 32px rgba(38,50,56,.10);
        border-color:rgba(217,144,8,.34);
    }
    .home-page .home-service-grid > article:hover .home-card-icon{
        transform:rotate(-4deg) scale(1.06);
    }
}
.home-page .home-card-icon{
    transition:transform .25s ease;
}

/* ARTIKEL: JANGAN DISENTUH — animasi dari index-cards-animated.php tetap dipakai. */

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
    .home-page .home-needs-grid > a,
    .home-page .home-team-grid > article,
    .home-page .home-program-grid > article,
    .home-page .home-service-grid > article,
    .home-page .home-needs-grid > a b,
    .home-page .home-needs-grid > a span,
    .home-page .home-team-grid > article .team-avatar,
    .home-page .home-card-icon{
        transition:none !important;
        transform:none !important;
    }
}

/* --- aabs-card-animation-v3 --- */
/* =========================================================
   V3 — EFEK LEBIH TERLIHAT, TETAP ELEGAN
   Artikel sengaja TIDAK diubah.
   ========================================================= */

/* KEBUTUHAN — slide + accent sweep */
@media (hover:hover){
    .home-page .home-needs-grid > a{
        transition:transform .35s cubic-bezier(.2,.8,.2,1),
                   box-shadow .35s ease;
    }
    .home-page .home-needs-grid > a::before{
        content:"";
        position:absolute;
        inset:0 auto 0 0;
        width:4px;
        background:#e9a20a;
        transform:scaleY(0);
        transform-origin:center;
        transition:transform .35s ease;
        z-index:1;
    }
    .home-page .home-needs-grid > a:hover{
        transform:translate3d(10px,-6px,0) !important;
        box-shadow:0 18px 36px rgba(38,50,56,.12) !important;
    }
    .home-page .home-needs-grid > a:hover::before{
        transform:scaleY(1);
    }
    .home-page .home-needs-grid > a h3,
    .home-page .home-needs-grid > a span{
        transition:transform .3s ease;
    }
    .home-page .home-needs-grid > a:hover h3{
        transform:translateX(4px);
    }
    .home-page .home-needs-grid > a:hover span{
        transform:translateX(9px) scale(1.12);
    }
}

/* PSIKOLOG — lift + avatar ring pulse */
@media (hover:hover){
    .home-page .home-team-grid > article{
        transition:transform .32s cubic-bezier(.2,.8,.2,1),
                   box-shadow .32s ease,
                   border-color .32s ease;
    }
    .home-page .home-team-grid > article:hover{
        transform:translateY(-9px) !important;
        box-shadow:0 20px 40px rgba(38,50,56,.12) !important;
        border-color:rgba(233,162,10,.42) !important;
    }
    .home-page .home-team-grid > article .team-avatar{
        transition:transform .35s ease, box-shadow .35s ease;
    }
    .home-page .home-team-grid > article:hover .team-avatar{
        transform:scale(1.10) rotate(2deg) !important;
        box-shadow:0 0 0 9px rgba(233,162,10,.10),
                   0 10px 20px rgba(38,50,56,.10) !important;
    }
}

/* PROGRAM — border reveal + gold top line */
@media (hover:hover){
    .home-page .home-program-grid > article{
        transition:transform .32s cubic-bezier(.2,.8,.2,1),
                   box-shadow .32s ease,
                   border-color .32s ease;
    }
    .home-page .home-program-grid > article::before{
        content:"";
        position:absolute;
        left:0;
        top:0;
        width:0;
        height:4px;
        background:linear-gradient(90deg,#e9a20a,#f5d27c);
        transition:width .45s ease;
        z-index:3;
    }
    .home-page .home-program-grid > article:hover{
        transform:translateY(-8px) !important;
        box-shadow:0 20px 40px rgba(38,50,56,.11) !important;
        border-color:rgba(233,162,10,.38) !important;
    }
    .home-page .home-program-grid > article:hover::before{
        width:100%;
    }
    .home-page .home-program-grid > article b{
        transition:transform .35s ease, color .35s ease;
    }
    .home-page .home-program-grid > article:hover b{
        transform:translateX(3px) scale(1.08);
        color:#e9a20a;
    }
}

/* LAYANAN — stronger icon + shine */
@media (hover:hover){
    .home-page .home-service-grid > article{
        transition:transform .32s cubic-bezier(.2,.8,.2,1),
                   box-shadow .32s ease,
                   border-color .32s ease;
    }
    .home-page .home-service-grid > article:hover{
        transform:translateY(-9px) !important;
        box-shadow:0 20px 40px rgba(38,50,56,.12) !important;
        border-color:rgba(233,162,10,.40) !important;
    }
    .home-page .home-service-grid > article .home-card-icon{
        transition:transform .35s cubic-bezier(.2,.8,.2,1),
                   box-shadow .35s ease;
    }
    .home-page .home-service-grid > article:hover .home-card-icon{
        transform:rotate(-8deg) scale(1.12) !important;
        box-shadow:0 8px 18px rgba(233,162,10,.16) !important;
    }
}

/* ARTIKEL — sengaja tidak diberi override pada V3 */

/* Disable motion for accessibility */
@media (prefers-reduced-motion:reduce){
    .home-page .home-needs-grid > a,
    .home-page .home-team-grid > article,
    .home-page .home-program-grid > article,
    .home-page .home-service-grid > article,
    .home-page .home-needs-grid > a h3,
    .home-page .home-needs-grid > a span,
    .home-page .home-team-grid > article .team-avatar,
    .home-page .home-program-grid > article b,
    .home-page .home-service-grid > article .home-card-icon{
        transition:none !important;
        transform:none !important;
    }
}

/* =========================================================
   FIX - Nama Psikolog satu baris kalau cukup
   Desktop: judul hero dipaksa satu baris dan font mengecil
   otomatis agar muat. Mobile tetap boleh wrap 2-3 baris.
   ========================================================= */
.about-hero-new .about-hero-content{
    max-width:900px !important;
}
.about-hero-new .about-hero-content h1{
    white-space:nowrap !important;
    word-break:keep-all !important;
    overflow-wrap:normal !important;
    font-size:clamp(28px, 3.1vw, 42px) !important;
    line-height:1.15 !important;
}
@media(max-width:1100px){
    .about-hero-new .about-hero-content{max-width:78% !important}
    .about-hero-new .about-hero-content h1{font-size:clamp(26px, 3.4vw, 38px) !important}
}
@media(max-width:850px){
    .about-hero-new .about-hero-content{max-width:100% !important}
    .about-hero-new .about-hero-content h1{
        white-space:normal !important;
        font-size:28px !important;
        line-height:1.2 !important;
    }
}