:root{--green:#063d30;--green2:#075343;--green3:#0b6953;--cream:#f7f1df;--gold:#d8b86f;--text:#f7f4e9;--muted:#c7d9d0;--line:rgba(216,184,111,.45)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--green);color:var(--text);font-family:'DM Sans',sans-serif;line-height:1.5}a{color:inherit;text-decoration:none}.site-header{max-width:1180px;margin:auto;padding:22px 5%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px}.brand img{width:57px;height:57px;object-fit:cover;border-radius:50%;background:#fff;border:1px solid var(--gold)}.brand span{display:flex;flex-direction:column}.brand strong{font:600 clamp(19px,2.7vw,29px) 'Playfair Display',serif;color:var(--gold)}.brand small{font-size:9px;letter-spacing:.22em;margin-top:4px;color:#e6dcc1}.menu-button{width:43px;height:43px;display:grid;place-items:center;border:1px solid var(--gold);border-radius:50%;font-size:22px}.hero{max-width:1180px;margin:0 auto;padding:24px 5% 65px;display:grid;grid-template-columns:1fr .88fr;align-items:center;gap:35px;min-height:490px}.hero-copy{padding:24px 0}.eyebrow{font-size:11px;letter-spacing:.2em;color:var(--gold);font-weight:700}.hero h1{font:600 clamp(34px,5vw,58px)/1.13 'Playfair Display',serif;margin:18px 0}.hero h1 span{font:500 clamp(20px,2.7vw,29px)/1.5 'DM Sans',sans-serif;color:#e4e9e2}.intro{max-width:470px;color:var(--muted);font-size:15px}.benefits{display:flex;gap:18px;margin:27px 0 28px;padding-top:19px;border-top:1px solid rgba(255,255,255,.18)}.benefits>div{display:flex;gap:9px;align-items:flex-start;flex:1}.benefit-icon{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#105e4b;color:var(--gold);flex-shrink:0}.benefits p{margin:0;display:flex;flex-direction:column;font-size:13px}.benefits small{font-size:11px;color:var(--muted);margin-top:3px}.outline-button{display:inline-flex;align-items:center;gap:30px;border:1px solid var(--gold);border-radius:30px;padding:10px 18px;font-size:13px}.outline-button span{color:var(--gold);font-size:20px}.hero-visual{height:420px;position:relative;overflow:hidden;border-radius:48% 12px 12px 48%;border-left:4px solid var(--gold);background:#174f43}.hero-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(1,35,27,.78),transparent 48%)}.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center}.photo-caption{position:absolute;z-index:1;bottom:22px;left:25px;display:flex;flex-direction:column;gap:4px}.photo-caption span{font-size:9px;letter-spacing:.18em;color:var(--gold)}.photo-caption b{font:600 25px 'Playfair Display',serif}.brand-intro{text-align:center;padding:0 20px 38px;background:radial-gradient(ellipse at center,rgba(12,101,79,.35),transparent 68%)}.round-logo{width:116px;height:116px;border-radius:50%;margin:0 auto 20px;border:3px solid var(--gold);padding:5px;background:var(--green);overflow:hidden}.round-logo img{width:100%;height:100%;object-fit:cover;border-radius:50%}.brand-intro .eyebrow{margin:0 0 8px}.brand-intro h2{font:600 clamp(29px,5vw,43px) 'Playfair Display',serif;margin:0 0 9px}.tagline{font:italic 600 clamp(16px,2.5vw,22px) 'Playfair Display',serif;margin:0;color:#f5edda}.tagline-id{font:500 16px/1.65 'Playfair Display',serif;color:var(--gold);margin:13px 0 20px}.socials{display:flex;justify-content:center;gap:14px}.socials a{width:43px;height:43px;border:1px solid #17866d;border-radius:50%;display:grid;place-items:center;font-size:25px;font-weight:700;transition:background .2s}.socials a:hover{background:#0b6953}.links-section{max-width:900px;margin:0 auto;padding:0 24px;display:grid;gap:14px}.link-card{min-height:86px;border:1px solid #13836b;border-radius:15px;background:rgba(0,35,27,.35);display:flex;align-items:center;gap:17px;padding:15px 19px;transition:background .2s,border-color .2s,transform .2s}.link-card:hover{background:rgba(13,105,82,.55);border-color:var(--gold);transform:translateY(-2px)}.link-icon{width:49px;height:49px;flex:0 0 49px;border-radius:50%;background:#105c49;color:var(--cream);display:grid;place-items:center;font-size:30px;font-weight:700}.link-text{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}.link-text b{font:600 17px 'Playfair Display',serif}.link-text small{color:var(--muted);font-size:12px}.arrow{font-size:27px;color:var(--gold)}.closing{text-align:center;max-width:760px;margin:44px auto 48px;padding:0 22px}.closing p{font:italic 600 19px/1.6 'Playfair Display',serif;max-width:540px;margin:0 auto 12px}.ornament{display:block;color:var(--gold);margin:15px 0 23px}.whatsapp-button{display:flex;align-items:center;justify-content:center;gap:15px;max-width:510px;margin:auto;background:var(--cream);color:var(--green);border:2px solid var(--gold);border-radius:40px;padding:14px 20px;font-size:13px;font-weight:700;box-shadow:0 6px 18px #00251d55}.whatsapp-button span{font-size:22px}.whatsapp-button b{font-size:23px;font-weight:400}.whatsapp-button:hover{background:#fff}.wa-note{display:block;color:var(--muted);font-size:11px;margin-top:11px}footer{text-align:center;padding:22px 15px 28px;border-top:1px solid rgba(216,184,111,.22);display:flex;flex-direction:column;gap:5px}footer span{font:600 14px 'Playfair Display',serif;color:var(--gold);letter-spacing:.08em}footer small{color:var(--muted);font-size:10px}
@media(max-width:720px){.site-header{padding:17px 20px}.brand img{width:47px;height:47px}.brand strong{font-size:19px}.brand small{font-size:7px;letter-spacing:.16em}.menu-button{width:39px;height:39px}.hero{grid-template-columns:1fr;gap:23px;padding:20px 23px 46px;min-height:0}.hero-copy{padding:10px 0 0}.hero h1{font-size:39px;margin:14px 0}.hero h1 span{font-size:22px}.intro{font-size:14px}.benefits{gap:10px;margin:23px 0}.benefits>div{gap:6px}.benefit-icon{width:27px;height:27px}.benefits p{font-size:12px}.benefits small{font-size:10px}.hero-visual{height:310px;border-radius:120px 12px 12px 12px;border-left:0;border-top:3px solid var(--gold)}.hero-visual img{object-position:center 35%}.brand-intro{padding-bottom:30px}.round-logo{width:95px;height:95px}.brand-intro h2{font-size:30px}.tagline-id{font-size:14px}.links-section{padding:0 18px;gap:11px}.link-card{min-height:77px;padding:12px;gap:12px;border-radius:12px}.link-icon{width:43px;height:43px;flex-basis:43px;font-size:26px}.link-text b{font-size:15px}.link-text small{font-size:11px}.arrow{font-size:23px}.closing{margin:36px auto 38px}.closing p{font-size:17px}.whatsapp-button{gap:9px;padding:13px 12px;font-size:11px}.whatsapp-button span{font-size:19px}.whatsapp-button b{font-size:20px}.desktop-break{display:none}}
@media(max-width:360px){.brand strong{font-size:17px}.hero h1{font-size:34px}.benefits{gap:5px}.benefits small{font-size:9px}.link-card{gap:9px;padding:10px}.link-text b{font-size:13px}.link-text small{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* Brand social icons: consistent sizing and real SVG marks */
.socials a svg{width:23px;height:23px;display:block}
.link-icon svg{width:25px;height:25px;display:block}
.whatsapp-button .wa-mark{display:inline-flex;align-items:center;justify-content:center}
.whatsapp-button .wa-mark svg{width:23px;height:23px;display:block}

/* Nilai utama brand */
.motto-section{max-width:900px;margin:0 auto 38px;padding:0 24px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.motto-section article{display:flex;gap:12px;align-items:flex-start;padding:18px 16px;border:1px solid rgba(216,184,111,.45);border-radius:14px;background:linear-gradient(145deg,rgba(9,89,68,.65),rgba(0,34,27,.35))}
.motto-section article>span{font:600 12px 'DM Sans',sans-serif;color:var(--gold);border:1px solid rgba(216,184,111,.55);border-radius:50%;width:29px;height:29px;flex:0 0 29px;display:grid;place-items:center}
.motto-section h3{font:600 18px 'Playfair Display',serif;color:var(--gold);margin:0 0 6px}
.motto-section p{font-size:12px;line-height:1.6;color:var(--muted);margin:0}
/* Galeri perjalanan jamaah */
.gallery-section{max-width:900px;margin:45px auto 25px;padding:28px 24px 25px;border:1px solid var(--gold);border-radius:22px;background:linear-gradient(145deg,rgba(0,45,35,.78),rgba(7,77,60,.42));position:relative;overflow:hidden}

.gallery-heading{text-align:center;max-width:560px;margin:0 auto 22px}
.gallery-heading .eyebrow{margin:0 0 7px}
.gallery-heading h2{font:600 clamp(25px,4vw,34px)/1.25 'Playfair Display',serif;margin:0 0 10px}
.gallery-heading h2 span{color:var(--gold)}
.gallery-heading>p:last-child{font-size:13px;color:var(--muted);margin:0}
.gallery-grid{display:grid;grid-template-columns:1.25fr 1fr;grid-template-rows:150px 150px;gap:12px}
.gallery-photo{position:relative;display:block;overflow:hidden;border-radius:13px;border:1px solid rgba(216,184,111,.55);background:#104b3c;min-width:0}
.gallery-photo-main{grid-row:1/3}
.gallery-photo img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.gallery-photo:hover img{transform:scale(1.045)}
.gallery-photo:after{content:"";position:absolute;inset:25% 0 0;background:linear-gradient(transparent,rgba(0,25,19,.82))}
.gallery-photo span{position:absolute;z-index:1;left:14px;right:10px;bottom:12px;font:600 15px 'Playfair Display',serif;color:#fff7e4}
.gallery-photo-main span{font-size:19px}
.gallery-note{text-align:center;font-size:11px;color:var(--muted);margin-top:17px}
.gallery-note b{color:var(--gold);font-weight:600}
.closing{margin:25px auto 42px}
.contact-details{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:17px;color:var(--muted);font-size:12px;flex-wrap:wrap}
.contact-details i{height:18px;width:1px;background:var(--line)}
.contact-details a:hover{color:var(--gold)}
@media(max-width:720px){
 .motto-section{grid-template-columns:1fr;gap:9px;padding:0 18px;margin-bottom:30px}
 .motto-section article{padding:13px 14px;align-items:center}
 .motto-section h3{font-size:17px;margin-bottom:3px}
 .motto-section p{font-size:11px}
 .gallery-section{margin:32px 18px 22px;padding:23px 14px 20px;border-radius:18px}
 .gallery-heading h2{font-size:26px}
 .gallery-grid{grid-template-rows:125px 125px;gap:8px}
 .gallery-photo{border-radius:10px}
 .gallery-photo span{font-size:12px;left:9px;bottom:8px}
 .gallery-photo-main span{font-size:15px}
 .gallery-note{font-size:10px;line-height:1.6}
 .contact-details{gap:10px;font-size:11px}
 .socials{gap:10px}
}
@media(max-width:390px){.gallery-grid{grid-template-columns:1fr 1fr;grid-template-rows:190px 115px}.gallery-photo-main{grid-column:1/3;grid-row:auto}.gallery-photo-two,.gallery-photo-three{grid-row:auto}.gallery-photo-main span{font-size:17px}}