/* ==========================================================================
RUMATA PROPERTIINDO — Web Design & Development by KitaBikin.Web.id
Built for credibility at scale.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root{
--ink:#0E2340; /* navy — was near-black */
--ink-soft:#1B3A5F; /* lighter navy for secondary text on dark */
--paper:#FFFFFF;
--paper-dim:#F3F4F6;
--signal:#1F4468; /* steel blue accent — was orange */
--signal-dim:#1F4468;
--soil:#5B6472; /* neutral grey for meta text — was brown */
--line:#DADFE5;
--ok:#1F7A4D;
--warn:#B8862E;
--f-display:'Jost', sans-serif;
--f-body:'Inter', sans-serif;
--f-mono:'Inter', sans-serif; /* kept var name for compatibility, no mono now */
--radius-sm:0px;
--radius-md:0px;
--radius-lg:0px;
--shadow-sm:0 2px 8px rgba(14,35,64,.06);
--shadow-md:0 8px 24px rgba(14,35,64,.10);
--shadow-lg:0 20px 48px rgba(14,35,64,.14);
--container: 1800px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{overflow-y:scroll;}
html{scroll-behavior:smooth; height:100%;} body{ font-family:var(--f-body); background:var(--paper); color:var(--ink); -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100vh; display:flex; flex-direction:column; }
body{
font-family:var(--f-body);
background:var(--paper);
color:var(--ink);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
img,video{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
button{font:inherit; cursor:pointer;}
.wrap{max-width:var(--container); margin:0 auto; padding:0 16px;}
/* -------------------- focus / accessibility -------------------- */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
outline:3px solid #F5B301;
outline-offset:2px;
}
.nav-links a:focus,
.nav-links a:focus-visible,
.nav-links *:focus,
.nav-links *:focus-visible,
.nav-dropdown:focus,
.nav-dropdown:focus-visible,
.nav-dropdown-toggle:focus,
.nav-dropdown-toggle:focus-visible,
.nav-dropdown-menu a:focus,
.nav-dropdown-menu a:focus-visible{
outline:none !important;
box-shadow:none !important;
}
@media (prefers-reduced-motion: reduce){
*{animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important;}
}
/* -------------------- scroll reveal -------------------- */
/* Animasi reveal dipindahkan ke assets/animations.css */
/* -------------------- eyebrow / labels -------------------- */
.eyebrow{
display:inline-flex; align-items:center; gap:10px;
font-family:var(--f-body);
font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:var(--signal);
margin-bottom:18px;
}
.coord{
font-family:var(--f-body);
font-size:13px; letter-spacing:.01em;
color:var(--soil);
font-weight:500;
}
/* -------------------- typography -------------------- */
h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; line-height:1.05; letter-spacing:-.01em; color:var(--ink); text-transform:uppercase;}
h1{font-size:clamp(48px,8vw,104px);}
h2{font-size:clamp(30px,4vw,50px);}
h3{font-size:clamp(21px,2.3vw,29px);}
p{line-height:1.65; color:var(--ink-soft);}
.lead{font-size:22px; line-height:1.6; max-width:640px; color:#000000; font-weight:400;}
.italic-accent{font-family:var(--f-display); font-style:normal; font-weight:800; color:var(--signal);}
/* -------------------- buttons -------------------- */
.btn{
display:inline-flex; align-items:center; gap:10px;
padding:16px 28px;
font-family:var(--f-body); font-weight:700; font-size:14px; letter-spacing:.01em;
border:1.5px solid var(--ink); border-radius:var(--radius-sm);
transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-solid{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.btn-solid:hover{background:var(--signal); border-color:var(--signal); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.btn-signal{background:var(--signal); color:var(--paper); border-color:var(--signal);}
.btn-signal:hover{background:var(--ink); border-color:var(--ink); box-shadow:var(--shadow-md); transform:translateY(-2px);}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-ghost:hover{background:var(--paper-dim); border-color:var(--ink); box-shadow:var(--shadow-sm); transform:translateY(-2px);}
.btn-ghost-light{background:transparent; color:var(--paper); border-color:rgba(255,255,255,.4);}
.btn-ghost-light:hover{background:rgba(255,255,255,.1); border-color:var(--paper); transform:translateY(-2px);}
.btn-cta{background:#F5B301; color:var(--ink); border-color:#F5B301; text-transform:uppercase; border-radius:0; padding:12px 28px;}
.btn-cta:hover{background:var(--signal); color:#fff; border-color:var(--signal);}
.btn-cta{background:#F5B301; color:var(--ink); border-color:#F5B301; text-transform:uppercase; border-radius:0; padding:12px 28px;}
.btn-cta:hover{background:var(--signal); color:#fff; border-color:var(--signal);}
.link-arrow{
display:inline-flex; align-items:center; gap:8px;
font-family:var(--f-body); font-weight:700; font-size:14px; letter-spacing:.01em;
color:var(--signal);
transition:gap .2s ease, color .2s ease;
}
.link-arrow:hover{gap:14px; color:#F5B301;}
/* -------------------- header -------------------- */
.site-header{
position:fixed; top:0; left:0; right:0; z-index:100;
background:transparent;
border-bottom:1px solid transparent;
transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease, transform .5s ease;
}
.site-header.scrolled{
background:none;
border-bottom:none;
padding:14px 20px 0;
}
.site-header.nav-hidden{
transform:translateY(-100%);
}
.site-header .wrap{
display:flex; align-items:center; justify-content:space-between;
height:78px;
border-radius:16px;
transition:background .3s ease, box-shadow .3s ease;
}
.site-header.scrolled .wrap{
background:linear-gradient(90deg, rgba(240,241,242,.97) 0%, rgba(240,241,242,.97) 55%, rgba(240,241,242,.55) 78%, rgba(240,241,242,0) 100%);
box-shadow:0 8px 30px rgba(0,0,0,.08);
padding:0 32px;
}
.brand{display:flex; align-items:center; gap:30px; position:relative; z-index:110;}
.brand-logo{position:relative; width:70px; height:70px; flex-shrink:0; margin-left:-14px;}
.brand-mark{
width:70px; height:70px; object-fit:contain;
filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
transition:opacity .3s ease;
}
.brand-mark-navy{
position:absolute; inset:0;
background-color:var(--signal);
-webkit-mask-image:url('Images/Logo-rumata.png');
mask-image:url('Images/Logo-rumata.png');
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
opacity:0;
transition:opacity .3s ease, background-color .2s ease;
}
.brand-mark{opacity:1;}
.brand-mark-navy{opacity:0;}
.site-header.scrolled .brand-mark{
opacity:0;
}
.site-header.scrolled .brand-mark-navy{
opacity:1;
}
.brand-text{font-family:var(--f-display); font-weight:800; font-size:14px; line-height:1.15; letter-spacing:-.01em; color:var(--ink); transition:color .3s ease;}
.brand-text span{display:block; font-family:var(--f-body); font-weight:500; font-size:10px; letter-spacing:.06em; color:var(--soil); text-transform:uppercase; margin-top:3px; transition:color .3s ease;}
.site-header.scrolled .brand-text{color:var(--ink);}
.site-header.scrolled .brand-text span{color:var(--soil);}
.nav-links{display:flex; align-items:center; gap:30px; margin-left:55px;}
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{display:flex; align-items:center; gap:4px;}
.nav-caret{width:16px; height:16px; display:inline-flex; color:currentColor; transition:transform .25s ease, filter .2s ease;}
.nav-links a:hover .nav-caret svg{filter:none;}
.nav-caret svg{width:100%; height:100%;}
.nav-dropdown.dropdown-open .nav-caret{transform:rotate(180deg);}
.nav-dropdown:hover .nav-dropdown-toggle,
.nav-dropdown.dropdown-open .nav-dropdown-toggle,
.site-header.scrolled .nav-dropdown:hover .nav-dropdown-toggle,
.site-header.scrolled .nav-dropdown.dropdown-open .nav-dropdown-toggle{color:#F5B301;}
.nav-dropdown-menu{
position:absolute; top:100%; left:0; transform:translateY(4px);
min-width:200px; padding:0px 0;
background:var(--signal); backdrop-filter:blur(10px);
border-radius:0;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .2s ease, transform .2s ease, visibility .2s ease;
z-index:50;
margin-top:14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown.dropdown-open .nav-dropdown-menu{
opacity:1; visibility:visible; pointer-events:auto;
transform:translateY(10px);
}
.nav-links .nav-dropdown-menu a{
display:block; padding:12px 18px; border-radius:0;
font-family:'Montserrat', sans-serif; font-size:14px; font-weight:700; letter-spacing:.01em;
text-transform:none;
color:#fff !important;
transition:background .15s ease, color .15s ease;
}
.nav-dropdown-menu a::after{display:none;}
.nav-dropdown-menu a:hover{background:#F5B301; color:var(--ink) !important;}
.nav-links a{
font-family:'Montserrat', sans-serif; font-size:16px; font-weight:800; letter-spacing:.06em;
text-transform:uppercase;
color:#fff;
text-shadow:0 1px 2px rgba(0,0,0,.6);
position:relative; padding-bottom:4px;
transition:color .2s ease, text-shadow .2s ease;
}
.site-header.scrolled .nav-links a{color:#1B3A5F; text-shadow:none;}
.site-header.scrolled .nav-caret svg{filter:none;}
.nav-links a:hover{color:#F5B301; text-shadow:none; font-weight:800;}
.site-header.scrolled .nav-links a:hover{color:#F5B301;}
.nav-cta{display:flex; align-items:center; gap:22px; margin-left:auto;}
.nav-login{
display:flex; align-items:center; justify-content:center;
width:45px; height:45px; color:#fff;
filter:drop-shadow(0 1px 4px rgba(0,0,0,.85)) drop-shadow(0 2px 12px rgba(0,0,0,.45));
transition:color .2s ease, filter .2s ease;
}
.nav-login svg{width:100%; height:100%;}
.nav-login:hover{color:#F5B301;}
.site-header.scrolled .nav-login{color:#1B3A5F; filter:none;}
.site-header.scrolled .nav-login:hover{color:#F2B705;}
.nav-toggle{
display:none; background:none; border:none;
width:46px; height:40px; align-items:center; justify-content:flex-end;
padding-right:10px; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
content:''; display:block; width:26px; height:2px; background:#1B3A5F;
position:relative; border-radius:2px; transition:transform .3s ease, opacity .3s ease, width .3s ease;
}
.nav-toggle span::before{position:absolute; top:-9px; right:0; width:16px;}
.nav-toggle span::after{position:absolute; top:9px; right:0; width:16px;}
/* animasi jadi tanda X saat menu terbuka */
.nav-links.open ~ .nav-toggle{background:none;}
.nav-links.open ~ .nav-toggle span{background:transparent;}
.nav-links.open ~ .nav-toggle span::before{width:26px; top:0; transform:rotate(45deg); background:#1B3A5F;}
.nav-links.open ~ .nav-toggle span::after{width:26px; top:0; transform:rotate(-45deg); background:#1B3A5F;}
/* -------------------- blueprint background motif -------------------- */
.plotfield{
position:absolute; inset:0; pointer-events:none;
background-image:
repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(14,35,64,.045) 79px, rgba(14,35,64,.045) 80px),
repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(14,35,64,.045) 79px, rgba(14,35,64,.045) 80px);
mask-image:radial-gradient(ellipse 80% 70% at 60% 30%, black 40%, transparent 90%);
}
.plotfield.dark{
background-image:
repeating-linear-gradient(0deg, transparent, transparent 79px, rgba(255,255,255,.05) 79px, rgba(255,255,255,.05) 80px),
repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,.05) 79px, rgba(255,255,255,.05) 80px);
}
/* -------------------- hero -------------------- */
.hero{position:relative; padding:72px 0 96px; overflow:visible; border-bottom:1px solid var(--line);}
.hero-video-section{
padding:0; min-height:100vh; min-height:100dvh; display:flex; align-items:center;
border-bottom:none; position:relative; overflow:hidden;
}
.hero-bg-video{
position:absolute; inset:0;
width:100%; height:100%;
object-fit:cover;
z-index:0;
}
.hero-overlay{
position:absolute; inset:0; z-index:1;
background:linear-gradient(180deg, rgba(14,35,64,.05) 0%, rgba(14,35,64,.15) 100%);
}
.hero-fade-bottom{
position:absolute; left:0; right:0; bottom:-2px; z-index:1;
height:120px;
pointer-events:none;
transform:translateY(100%);
transition:transform .5s ease;
}
.hero-fade-bottom.show{
transform:translateY(0);
}
.hero-wave{
width:100%; height:100%; display:block;
}
.hero-video-content{
will-change: transform;
transition: transform 0.1s linear;
position:relative; z-index:2; width:100%; padding-top:80px; padding-bottom:80px;
transition:opacity .1s ease-out, transform .1s ease-out;
}
.hero-video-inner{max-width:700px; margin:0 auto; text-align:center;}
.hero-eyebrow{
font-family:var(--f-body); font-size:15px; font-weight:600;
letter-spacing:.12em; text-transform:uppercase;
color:#fff; margin-bottom:15px;
}
.hero-title-mixed{
font-family:'Jost', sans-serif; font-weight:500;
font-size:clamp(36px, 5.5vw, 64px); text-transform:uppercase;
letter-spacing:.01em; line-height:1.15; margin-bottom:24px;
}
.hero-title-mixed .italic-accent{
font-family:'Fraunces', serif; font-style:italic; font-weight:500;
text-transform:none; color:#fff;
letter-spacing:0;
}
/* override supaya judul gradient jadi putih solid di atas video */
.hero-video-inner .hero-title-mixed{
background:none;
-webkit-text-fill-color:#fff;
color:#fff;
font-size:clamp(40px, 3.3vw, 64px);
margin-bottom:15px;
line-height:1.2;
}
.hero-video-inner .hero-title-mixed .italic-accent{
background:none;
-webkit-text-fill-color:#fff;
color:#fff;
}
.hero-mixed-lead{color:#fff; margin-left:auto; margin-right:auto;}
.hero-title-mixed .italic-accent{
font-family:'Fraunces', serif; font-style:italic; font-weight:500;
text-transform:none;
letter-spacing:0;
background:linear-gradient(90deg, #1B3A5F 0%, #0E2340 100%);
-webkit-background-clip:text;
background-clip:text;
color:transparent;
-webkit-text-fill-color:transparent;
}
.hero-title-mixed .nowrap-line{white-space:nowrap;}
.hero-title-rotator{position:relative; display:block; min-height:1em;}
.hero-slide{
position:absolute; top:0; left:0; right:0;
opacity:0; visibility:hidden;
transition:opacity .7s ease, visibility 0s linear .7s;
}
.hero-slide.is-active{
position:relative;
opacity:1; visibility:visible;
transition:opacity .7s ease;
}
.hero-dots{display:flex; gap:16px; margin-top:24px; align-items:center;}
.hero-dot{width:13px; height:13px; border-radius:50%; background:#1B3A5F; cursor:pointer; transition:background .3s, width .3s;}
.hero-dot:nth-child(3){background:#1B3A5F;}
.hero-dot.is-active{background:#F5B301; width:34px; border-radius:6px;}
.hero-lead{
font-family:var(--f-body); font-size:21px; line-height:1.6; text-align:justify;
color:#000000;; max-width:640px; margin-top:40px;
}
.about-logo-mark{
display:inline-block;
width:80%; aspect-ratio:1000/360;
background-color:var(--signal);
-webkit-mask-image:url('Images/Logo-rumata-S2.png');
mask-image:url('Images/Logo-rumata-S2.png');
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:left center; mask-position:left center;
}
.decor-right{
display:block;
background-color:#1B3A5F;
-webkit-mask-image:url('Images/png-decor/right-decor.png');
mask-image:url('Images/png-decor/right-decor.png');
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center center; mask-position:center center;
}
.decor-bottom{
display:block;
background-color:#1B3A5F;
-webkit-mask-image:url('Images/png-decor/bottom-decor.png');
mask-image:url('Images/png-decor/bottom-decor.png');
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center center; mask-position:center center;
}
.meter-decor{
display:block;
width:100%; max-width:1000px; height:360px;
opacity:0.9;
background-image:url('Images/png-decor/meter.png');
background-size:contain;
background-repeat:no-repeat;
background-position:center center;
}
/* Animasi decor dipindahkan ke assets/animations.css */
.hero-mixed-lead{max-width:560px; margin:0 auto;}
.hero-badges-light{border-top:1px solid rgba(255,255,255,.25); padding-top:26px;}
.hero-badges-light .hero-badge{color:rgba(255,255,255,.9);}
@media (max-width:900px){
.nav-toggle{display:flex; position:relative; z-index:110;}
.brand-logo{width:60px; height:60px;}
.nav-links{
position:fixed; inset:0;
flex-direction:column; align-items:flex-start; gap:0;
background:var(--paper);
padding:100px 16px 32px;
transform:translateX(100%);
pointer-events:none;
transition:transform .35s ease;
z-index:100; overflow-y:auto;
}
.nav-links {
padding: 100px 0 32px 30px !important;
}
.nav-links {
width: 100vw !important;
max-width: 100% !important;
margin: 0 !important;
left: 0 !important;
right: 0 !important;
border-radius: 0 !important;
}
.nav-links.open{transform:translateX(0); pointer-events:auto;}
.nav-links a{padding:16px 0; width:100%; font-size:20px; font-weight:600; text-transform:none;}
.nav-dropdown{width:100%;}
.nav-dropdown-menu{position:static; opacity:1; visibility:visible; pointer-events:auto; transform:none; box-shadow:none; margin-top:0; display:none; background:none;}
.nav-dropdown.dropdown-open .nav-caret{transform:rotate(180deg) !important;}
.nav-links .nav-dropdown-menu{border-left:2px solid var(--line); margin:4px 0 8px 4px; padding-left:12px;}
.nav-links .nav-dropdown-menu a{color:var(--ink-soft) !important; padding:16px 0 16px 8px; border-bottom:none; font-size:16px; text-transform:none;}
.nav-dropdown-menu a:hover{background:none; color:var(--signal) !important;}
.nav-dropdown.dropdown-open .nav-dropdown-menu{display:block;}
.nav-cta{display:none;}
}
@media (max-width:760px){
.hero-video-inner{max-width:100%; padding:0 20px;}
.hero-video-inner .hero-title-mixed{font-size:32px;}
.hero-mixed-lead{margin:0 auto;}
}
.hero-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; position:relative; z-index:2;}
.hero-copy{text-align:center; padding-left:60px;}
.hero-copy .coord{margin-bottom:22px;}
.hero-copy h1{margin-bottom:28px;}
.hero-copy .lead{margin-bottom:36px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:44px;}
.hero-badges{display:grid; grid-template-columns:1fr 1fr; gap:14px 26px; border-top:1px solid var(--line); padding-top:26px;}
.hero-badge{display:flex; align-items:center; gap:10px; font-family:var(--f-body); font-size:13.5px; font-weight:600; color:var(--ink-soft); letter-spacing:0;}
.hero-badge::before{content:'✓'; color:var(--signal); font-weight:800;}
/* -------------------- laptop medium (1024–1500px) -------------------- */
@media (max-width:1500px){
.site-header .wrap{height:76px;}
.brand-logo{width:70px; height:70px;}
.nav-links{gap:22px;}
.nav-links a{font-size:14px;}
.nav-toggle{width:40px; height:36px;}
.hero-video-inner{max-width:680px;}
.wrap{padding:0 50px;}
h2{font-size:clamp(24px, 3.2vw, 44px);}
.about-logo-mark{max-width:760px; height:260px;}
}
/* -------------------- image placeholder pattern -------------------- */
.imgph{
width:100%; height:100%;
background:linear-gradient(135deg, #E7EBF1 0%, #F3F4F6 55%, #E2E7EE 100%);
position:relative;
display:flex; align-items:center; justify-content:center;
}
.imgph::before{
content:'';
position:absolute; inset:0;
background-image:
linear-gradient(rgba(14,35,64,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(14,35,64,.05) 1px, transparent 1px);
background-size:28px 28px;
}
.imgph::after{
content:attr(data-label);
position:relative; z-index:1;
font-family:var(--f-body); font-size:12px; font-weight:600; letter-spacing:.02em;
color:var(--soil); background:rgba(255,255,255,.85); padding:9px 16px; border-radius:0; text-align:center;
box-shadow:var(--shadow-sm);
}
.imgph.light{background:linear-gradient(135deg, #F8F9FB 0%, #F0F2F5 100%);}
.imgph.light::after{color:var(--ink); background:rgba(255,255,255,.92);}
/* -------------------- generic section -------------------- */
section{position:relative; padding:120px 0;}
#tentang{padding-top:100px; padding-bottom:-200px;}
#kenali-kami{padding-top:80px;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:56px; flex-wrap:wrap;}
#kegiatan-head{
display:block;
margin-right: calc(-50vw + 50%);
padding-right: 16px;
text-align: left;
}
.section-head h2{max-width:640px;}
#kenali-kami .section-head h2{max-width:none;}
.section-head .lead{margin-top:16px;}
.border-y{border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.bg-ink{
background:var(--ink); color:var(--paper);
width:100vw;
margin-left:calc(50% - 50vw);
margin-right:calc(50% - 50vw);
}
.bg-ink h2, .bg-ink h3{color:var(--paper);}
.bg-ink p{color:#B9C4D3;}
.bg-ink .eyebrow{color:#6FA0D6;}
.bg-ink.pesan-hero{background:var(--paper); color:var(--ink);}
.bg-ink.pesan-hero h2, .bg-ink.pesan-hero h3{color:var(--ink);}
.bg-ink.pesan-hero p{color:var(--soil);}
.bg-ink.pesan-hero .eyebrow{color:var(--signal);}
.bg-ink.pesan-hero .pesan-hero-stat strong{color:var(--ink);}
.bg-ink.pesan-hero .pesan-hero-stat span{color:var(--soil);}
.bg-dim{background:var(--paper-dim); position:relative; overflow:hidden;}
.bg-signal-light{background:#EAF7EE; position:relative; overflow:hidden;}
.pesan-hero-pin-wrap{
position:relative;
height:100vh;
}
.pesan-hero-pin-wrap .pesan-hero{
position:relative;
will-change:transform;
}
#pesan-kavling-form{
position:relative;
z-index:2;
background:var(--paper);
}
.decor-kavling-corner{
position:absolute;
top: -75px;;
right:0;
width:700px;
height:700px;
z-index:0;
pointer-events:none;
opacity:0.75;
background-color:#1B3A5F;
-webkit-mask-image:url('Images/png-decor/right-kavling.png');
mask-image:url('Images/png-decor/right-kavling.png');
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center center; mask-position:center center;
}
.pesan-hero-decor{
position:relative;
width:120%;
max-width:1150px;
height:auto;
z-index:0;
pointer-events:none;
opacity:0.9;
margin-left:-850px;
}
@media (max-width:1200px){
.pesan-hero-decor{ max-width:700px; margin-left:-80px; }
}
@media (max-width:900px){
.pesan-hero-decor{ max-width:360px; margin-left:0; }
}
/* -------------------- about -------------------- */
.about-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:center;}
.about-frame{position:relative; display:flex; justify-content:center;}
.about-photo{width:85%; height:auto; object-fit:contain; display:block;}
.about-badge{
position:absolute; bottom:-22px; right:-22px;
width:132px; height:132px; border-radius:50%;
background:var(--signal); color:var(--paper);
display:flex; align-items:center; justify-content:center; text-align:center;
font-family:var(--f-display); font-size:12px; font-weight:800; letter-spacing:.03em; text-transform:uppercase;
line-height:1.4; box-shadow:var(--shadow-lg);
}
.about-quote{
border-left:3px solid var(--signal); padding-left:22px; margin:30px 0;
font-family:var(--f-display); font-style:normal; font-weight:700; font-size:20px; color:var(--ink);
}
/* -------------------- location cards -------------------- */
.loc-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; position:relative; z-index:1;}
.loc-card{
background:var(--paper); display:flex; flex-direction:column;
border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
border:1px solid var(--line);
transition:box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.loc-card:hover{box-shadow:var(--shadow-lg); transform:translateY(-4px);}
.loc-media{position:relative; aspect-ratio:16/10;}
.loc-status{
position:absolute; top:16px; right:16px; z-index:2;
font-family:var(--f-body); font-size:11px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
padding:7px 12px; color:var(--paper); border-radius:0;
}
.loc-status.tersedia{background:var(--ok);}
.loc-status.terbatas{background:#FF4D6D;}
.loc-num{
position:absolute; top:16px; left:16px; z-index:2;
font-family:var(--f-body); font-size:11.5px; font-weight:700; color:var(--ink);
background:#F5B301; backdrop-filter:blur(4px); padding:7px 12px; border-radius:0;
}
.loc-body{padding:0px 26px 26px; display:flex; flex-direction:column; flex:1;}
.loc-body h3{margin-bottom:40px;}
.loc-stats{display:flex; gap:70px; padding:18px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-bottom:18px;}
.loc-stat strong{display:block; font-family:var(--f-display); font-weight:800; font-size:25px; color:#FF4D6D; margin-bottom:7px;}
.loc-stat span{font-family:var(--f-body); font-size:20px; color:#000000; text-transform:uppercase; letter-spacing:.04em; font-weight:600;}
.loc-addr{font-family:var(--f-body); font-size:22px; color:#000000; margin-bottom:50px; display:flex; gap:8px; align-items:flex-start;}
.loc-actions{margin-top:auto; display:flex; justify-content:space-between; align-items:center;}
.loc-actions .coord{display:none;}
@media (max-width:760px){ .loc-grid{grid-template-columns:1fr;} }
/* -------------------- why us -------------------- */
.why-grid-2{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:0;
background:#1B3A5F;
border-radius:var(--radius-lg);
overflow:hidden;
}
.why-item{
padding:38px 32px;
background:#1B3A5F;
border-right:1px solid rgba(255,255,255,.25);
border-bottom:1px solid rgba(255,255,255,.25);
transition:background .25s ease;
}
.why-item:hover{background:#122A4D;}
.why-item:nth-child(3n){ border-right:none; }
.why-item:nth-child(n+4){ border-bottom:none; }
.why-num{font-family:var(--f-body); font-size:18px; font-weight:800; color:#F5B301; margin-bottom:28px; letter-spacing:.08em;}
.why-item h3{margin-bottom:20px; font-size:26px;}
.why-item p{font-size:22px; line-height:1.6; color:#FFFFFF;}
@media (max-width:860px){
.why-grid-2{grid-template-columns:1fr 1fr;}
.why-item:nth-child(3n){ border-right:1px solid rgba(255,255,255,.25); }
.why-item:nth-child(2n){ border-right:none; }
.why-item:nth-child(n+5){ border-bottom:none; }
}
@media (max-width:560px){
.why-grid-2{grid-template-columns:1fr;}
.why-item{ border-right:none !important; }
.why-item:last-child{ border-bottom:none; }
}
.why-item:hover{background:#122A4D;}
.why-num{font-family:var(--f-body); font-size:18px; font-weight:800; color:#F5B301; margin-bottom:28px; letter-spacing:.08em;}
.why-item h3{margin-bottom:20px; font-size:26px;}
.why-item p{font-size:22px; line-height:1.6;}
@media (max-width:860px){
.why-grid-2{grid-template-columns:1fr 1fr;}
}
@media (max-width:560px){
.why-grid-2{grid-template-columns:1fr;}
}
/* -------------------- siteplan / plot map (SIGNATURE ELEMENT) -------------------- */
.siteplan-shell{
border-radius:0; background:var(--paper); display:block;
box-shadow:none; overflow:hidden; border:none;
}
.siteplan-map{position:relative; background:var(--paper-dim); overflow:hidden;}
.siteplan-map svg{width:100%; height:100%; display:block;}
.plot{
fill:rgba(44,90,140,.10); stroke:#B7C2CF; stroke-width:1.2; cursor:pointer;
transition:fill .2s ease, stroke .2s ease;
}
.plot:hover{fill:rgba(44,90,140,.30); stroke:var(--signal);}
.plot.sold{fill:rgba(14,35,64,.28); cursor:default;}
.plot.sold:hover{fill:rgba(14,35,64,.28); stroke:#B7C2CF;}
.plot.selected{fill:var(--signal); stroke:var(--ink); stroke-width:1.8;}
.plot-label{
font-family:var(--f-body); font-size:9px; fill:var(--ink); pointer-events:none; font-weight:700;
}
.plot-label.on-dark{fill:var(--paper);}
.siteplan-ruler{position:absolute; font-family:var(--f-body); font-size:10px; color:var(--soil); letter-spacing:.03em; font-weight:600;}
.siteplan-ruler.top{top:12px; left:18px;}
.siteplan-ruler.bottom{bottom:12px; right:18px;}
.siteplan-info{padding:34px; display:flex; flex-direction:column; border-top:1px solid var(--line);}
.siteplan-info .coord{margin-bottom:10px;}
.siteplan-info h3{margin-bottom:18px;}
.siteplan-datarow{display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font-family:var(--f-body); font-size:14px;}
.siteplan-datarow span:first-child{color:var(--soil);}
.siteplan-datarow span:last-child{font-weight:700; color:var(--ink);}
.siteplan-empty{color:var(--soil); font-size:14.5px; line-height:1.65;}
.siteplan-cta{margin-top:auto; padding-top:26px;}
.siteplan-info-full{
background:linear-gradient(180deg, #3E8E1F 0%, #0f3e00 100%);
padding:0;
width:100vw;
position:relative;
left:50%;
right:50%;
margin-left:-50vw;
margin-right:-50vw;
}
.siteplan-info-full .siteplan-info{max-width:1000px; margin:0 auto; padding:120px 20px 140px; border-top:none;}
.siteplan-info-full .coord{color:rgba(255,255,255,.65);}
.siteplan-info-full h3{color:#FFFFFF; margin-bottom:36px; text-align:center;}
.siteplan-info-full .siteplan-datarow{border-bottom:1px solid rgba(255,255,255,.25);}
.siteplan-info-full .siteplan-datarow span:first-child{color:#fff; font-size:20px;}
.siteplan-info-full .siteplan-datarow span:last-child{color:#fff; font-size:20px;}
.siteplan-info-full .btn-ghost{border-color:#fff; color:#fff;}
.siteplan-info-full .btn-ghost:hover{background:rgba(255,255,255,.15); color:#fff;}
.siteplan-legend{display:flex; gap:18px; margin-top:22px; flex-wrap:wrap;}
.siteplan-photo{position:relative; padding:60px 0 0; background:var(--paper);}
.siteplan-photo img{display:block; width:100%; height:auto; cursor:zoom-in;}
.siteplan-tabs{position:absolute; top:14px; left:0; z-index:2; display:flex; gap:8px;}
.siteplan-tab{
font-family:var(--f-body); font-size:18px; font-weight:700; letter-spacing:.02em;
padding:8px 14px; border-radius:0; border:1px solid #F5B301;
background:#F5B301; color:var(--ink); cursor:pointer; transition:all .2s ease;
}
.siteplan-tab.active{background:var(--ink); color:var(--paper); border-color:var(--ink);}
.siteplan-tab:hover:not(.active){background:#FFC933; color:var(--ink);}
@media (max-width:760px){
.siteplan-photo{min-height:280px;}
.siteplan-photo img{max-height:320px;}
}
.legend-item{display:flex; align-items:center; gap:8px; font-family:var(--f-body); font-size:12px; color:var(--soil); font-weight:500;}
.legend-swatch{width:14px; height:14px; border-radius:4px; border:1px solid rgba(0,0,0,.1);}
@media (max-width:860px){
.siteplan-shell{grid-template-columns:1fr;}
.siteplan-map{aspect-ratio:4/3;}
}
/* -------------------- legality -------------------- */
.legal-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:64px;}
.legal-list{margin-top:-21px;}
#pesan-kavling-tahapan .js-tahapan-item{
opacity:0;
transform:translateY(24px);
transition:opacity .6s ease, transform .6s ease;
}
#pesan-kavling-tahapan .legal-list.js-tahapan-in .js-tahapan-item{
opacity:1;
transform:translateY(0);
}
.legal-row{display:grid; grid-template-columns:56px 1fr; column-gap:24px; align-items:start; padding:28px 12px; border-radius:var(--radius-md); transition:background .2s ease; margin-bottom:2px;}
.legal-row:hover{background:var(--paper-dim);}
.legal-icon{width:50px; height:50px; border-radius:30%; background:#F5B301; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-body); font-weight:800; font-size:24px; color:var(--ink);}
.legal-row > div{display:flex; flex-direction:column; row-gap:14px;}
.legal-row h4{font-family:var(--f-body); font-weight:700; font-size:21px; margin-bottom:0; color:var(--ink);}
.legal-row span{font-family:var(--f-body); font-size:22px; color:#000000;}
/* -------------------- testimonials -------------------- */
.tvid{display:grid; grid-template-columns:1fr; margin-top:70px; margin-bottom:0px;}
.tvid-copy{background:var(--ink); color:var(--paper); padding:46px; display:flex; flex-direction:column; justify-content:center;}
.tvid-copy h3{margin-bottom:14px;}
.tvid-media{
position:relative; aspect-ratio:16/10;
background:linear-gradient(135deg, #E7EBF1 0%, #F3F4F6 55%, #E2E7EE 100%);
}
.tvid-media-shorts{ aspect-ratio:9/16; max-width:360px; margin:0 auto; background:#000; }
.tvid-media iframe{ width:100%; height:100%;.tvid-media iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } border:0; }
.tvid-media::before{
content:'';
position:absolute; inset:0; z-index:0;
background-image:
linear-gradient(rgba(14,35,64,.05) 1px, transparent 1px),
linear-gradient(90deg, rgba(14,35,64,.05) 1px, transparent 1px);
background-size:28px 28px;
}
.tvid-media iframe{position:relative; z-index:1;}
.tvid-copy-photo{position:relative; overflow:hidden; aspect-ratio:1858/1082; background:transparent;}
.tvid-copy-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:left top; transform:scale(1.1);}
.tvid-copy-overlay{position:absolute; inset:0; background:linear-gradient(to top, rgba(14,35,64,.75), rgba(14,35,64,.15)); z-index:1;}
.tvid-copy-content{position:absolute; left:0; bottom:0; padding:32px; z-index:2; color:var(--paper);}
.proof-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px;}
.proof-cell{position:relative; aspect-ratio:1/1; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm);}
.proof-cell .imgph::after{font-size:10.5px;}
.proof-grid-mosaic{
display: block;
column-count: 4;
column-gap: 14px;
}
.proof-grid-mosaic .proof-cell{
aspect-ratio:unset;
cursor:pointer;
break-inside: avoid;
margin-bottom: 14px;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.proof-grid-mosaic .proof-cell img{
width:100%;
height:auto;
display:block;
transition: transform .4s ease;
}
.proof-grid-mosaic .proof-cell:hover img{ transform:scale(1.04); }
@media (max-width:860px){
.proof-grid-mosaic{ column-count: 2; column-gap: 14px; }
.proof-grid-mosaic .proof-cell{ margin-bottom: 14px; }
}
/* ================= Lightbox ================= */
.lightbox{
display:none; position:fixed; inset:0; z-index:9999;
background:rgba(10,20,35,.95);
align-items:center; justify-content:center;
flex-direction:column;
}
.lightbox.open{ display:flex; }
.lightbox-img{
max-width:88vw; max-height:78vh; object-fit:contain;
border-radius:8px; box-shadow:0 20px 60px rgba(0,0,0,.5);
}
#siteplanLightboxImg{max-width:96vw; max-height:92vh;}
.lightbox-caption{
color:#fff; margin-top:18px; font-size:15px; text-align:center;
}
.lightbox-close{
position:absolute; top:24px; right:32px;
background:none; border:none; color:#fff; font-size:34px;
cursor:pointer; line-height:1; padding:6px;
}
.lightbox-stage{
position:relative; display:inline-flex;
max-width:88vw; max-height:78vh;
}
.lightbox-nav{
position:absolute; top:50%; transform:translateY(-50%);
background:none; border:none; color:#fff;
font-size:38px; font-weight:800; padding:14px 10px;
cursor:pointer; transition:color .2s ease;
}
.lightbox-nav:hover{ color:#FFD400; }
.lightbox-prev{ left:16px; }
.lightbox-next{ right:16px; }
@media (max-width:600px){
.lightbox-nav{ font-size:16px; padding:10px 13px; }
.lightbox-close{ top:14px; right:16px; font-size:28px; }
}
.proof-check{display:flex; gap:36px; flex-wrap:wrap; margin-top:36px;}
.proof-check div{display:flex; align-items:center; gap:10px; font-family:var(--f-body); font-size:13.5px; font-weight:500; color:var(--ink-soft);}
.proof-check div::before{content:'✓'; color:var(--signal); font-weight:800;}
@media (max-width:860px){ .tvid{grid-template-columns:1fr;} .proof-grid{grid-template-columns:repeat(2,1fr);} }
/* MENGAPA KAMI */
#mengapa .section-head{margin-left:0;}
@media(min-width:768px){#mengapa .section-head{margin-left:21%;}}
#kegiatan-head{margin-left:0;}
@media(min-width:768px){#kegiatan-head{margin-left:0;}}
.why-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:70px; margin-top:60px;}
.why-card .icon{width:100px; height:100px; display:flex; align-items:center; justify-content:center; color:var(--signal); margin-bottom:18px;}
.why-card .icon svg{width:100px; height:100px;}
.why-card h4{color:#000000; font-family:'Manrope',sans-serif; text-transform:none; letter-spacing:normal; font-size:30px; font-weight:800; margin-bottom:12px;}
.why-card p{color:#1a1a1a; font-size:22px; text-transform:none;}
@media(max-width:860px){.why-grid{grid-template-columns:1fr; gap:36px;}}
@media(max-width:560px){
#mengapa{padding-top:100px !important; padding-bottom:0 !important;}
#mengapa .section-head p{margin-top:40px;}
}
/* -------------------- process steps -------------------- */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px;}
.step{padding:30px 24px; position:relative; background:var(--paper-dim); border-radius:var(--radius-md); transition:transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); background:var(--paper); border:1px solid var(--line);}
.step:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); background:var(--paper); border:1px solid var(--line);}
a.step{display:block; text-decoration:none; color:inherit;}
.step-num{font-family:var(--f-display); font-size:26px; font-weight:800; color:var(--signal); margin-bottom:16px;}
.step h4{font-family:var(--f-body); font-weight:800; font-size:26px; margin-bottom:10px; color:var(--ink);}
.loc-body h3{font-size:26px;}
.step p{font-size:22px; line-height:1.55;}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,1fr);} }
@media (max-width:560px){ .steps{grid-template-columns:1fr;} }
/* -------------------- FAQ -------------------- */
.faq-grid{display:grid; grid-template-columns:.8fr 1.2fr; gap:64px;}
.faq-item{border-bottom:1px solid var(--line);}
.faq-q{
width:100%; display:flex; justify-content:space-between; align-items:center; gap:20px;
padding:24px 0; background:none; border:none; text-align:left;
font-family:var(--f-body); font-weight:700; font-size:16.5px; color:var(--ink);
}
.faq-q .qmark{font-family:var(--f-body); color:var(--signal); font-size:20px; flex-shrink:0; transition:transform .25s cubic-bezier(.16,1,.3,1); font-weight:400;}
.faq-item.open .qmark{transform:rotate(45deg);}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s cubic-bezier(.16,1,.3,1);}
.faq-a p{padding-bottom:24px; max-width:560px;}
.faq-item.open .faq-a{max-height:220px;}
/* -------------------- CTA banner -------------------- */
.cta-banner{padding:110px 0; text-align:center; margin-top:250px;}
.cta-yellow{background:#F5B301 !important;}
.cta-yellow h2, .cta-yellow h3{color:var(--ink);}
.cta-yellow p{color:var(--ink); opacity:.85;}
.cta-yellow .eyebrow{color:var(--ink);}
.cta-yellow .btn-ghost-light{color:var(--ink); border-color:rgba(14,35,64,.4);}
.cta-yellow .btn-ghost-light:hover{background:rgba(14,35,64,.08); border-color:var(--ink);}
.cta-banner h2{margin-bottom:20px;}
.cta-banner .lead{margin:0 auto 36px; text-align:center;}
.cta-actions{display:flex; gap:14px; justify-content:center; flex-wrap:wrap;}
.cta-hotline-btn{background:transparent; border:none; padding:0; cursor:pointer; display:inline-flex; line-height:0;}
.cta-hotline-btn img{width:150px; height:auto; transition:transform .2s ease;}
.cta-hotline-btn:hover img{transform:scale(1.06);}
/* -------------------- pesan kavling hero -------------------- */
.pesan-hero{
min-height:100vh;
display:flex;
align-items:center;
padding:96px 0;
}
.pesan-hero .wrap{
display:flex;
align-items:center;
justify-content:space-between;
gap:48px;
}
.pesan-hero-text{
flex:1;
min-width:0;
margin-left:-300px;
}
@media (max-width:900px){
.pesan-hero-text{ margin-left:0; }
}
.pesan-hero-image{
flex:1;
display:flex;
justify-content:center;
}
@media (max-width:900px){
.pesan-hero .wrap{
flex-direction:column;
text-align:center;
gap:32px;
}
}
.pesan-hero-stats{display:flex; justify-content:center; gap:56px; margin-top:56px; flex-wrap:wrap;}
.pesan-hero-stat{text-align:center;}
.pesan-hero-stat strong{display:block; font-family:var(--f-display); font-size:32px; font-weight:800; color:var(--paper); margin-bottom:6px;}
.pesan-hero-stat span{font-family:var(--f-body); font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:#B9C4D3; font-weight:600;}
@media (max-width:640px){ .pesan-hero{padding:88px 0 64px;} .pesan-hero-stats{gap:32px;} }
/* -------------------- profile card -------------------- */
.profile-card{
display:flex; align-items:center; justify-content:center; gap:64px; flex-wrap:wrap;
background:#FFF3C4; border:none; border-radius:0;
padding:48px 56px; box-shadow:var(--shadow-sm);
width:100vw; position:relative; left:50%; right:50%;
margin-left:-50vw; margin-right:-50vw;
}
.profile-card-info h3{font-family:var(--f-display); font-size:32px; color:var(--ink); margin-bottom:14px;}
.profile-card-info p{font-family:var(--f-body); font-size:22px; color:#111111; max-width:640px; line-height:1.6;}
.profile-card-link{color:#111111; text-decoration:underline; font-weight:600;}
.profile-card-thumb{
width:220px; height:280px; border-radius:12px; flex-shrink:0;
background:var(--paper); border:1px dashed var(--line);
display:flex; align-items:center; justify-content:center;
color:var(--soil); font-size:13px; text-align:center; padding:12px;
}
@media (max-width:640px){ .profile-card{flex-direction:column; align-items:flex-start;} }
/* -------------------- contact form (shared: kontak & pesan-kavling) -------------------- */
.contact-row{padding:18px 0; border-bottom:1px solid var(--line);}
.contact-row span{display:block; font-family:var(--f-body); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--soil); margin-bottom:6px; font-weight:600;}
.form{background:#fff; border-radius:var(--radius-lg); padding:56px;}
.form-row{display:grid; grid-template-columns:1fr; gap:24px; margin-bottom:24px;}
.field label{display:block; font-family:var(--f-body); font-size:14px; text-transform:none; letter-spacing:0; margin-bottom:8px; color:#1B3A5F; font-weight:700;}
.field label .req{color:#E23F63; margin-left:2px;}
.field input, .field textarea, .field select{
width:100%; padding:14px 16px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper);
font-family:var(--f-body); font-size:15px; color:var(--ink);
transition:border-color .2s ease, box-shadow .2s ease;
}
/* ---------- Override khusus: perbesar font form Kontak ---------- */
#kontakForm .field label{
font-size:22px;
}
#kontakForm .field input,
#kontakForm .field textarea{
font-size:22px;
}
.field select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 14px center; background-size:16px; padding-right:40px;}
.field select:invalid{color:var(--soil);}
.field input:focus, .field textarea:focus, .field select:focus{border-color:var(--signal); box-shadow:0 0 0 4px rgba(44,90,140,.12); outline:none;}
.field textarea{resize:vertical; min-height:100px;}
.form-note{font-family:var(--f-body); font-size:22px; color:#000000; margin-top:50px; margin-bottom:24px;}
.form-captcha{display:flex; align-items:center; gap:10px; margin-top:50px; margin-bottom:50px; font-family:var(--f-body); font-size:22px; color:var(--ink); font-weight:600; cursor:pointer; user-select:none;}
.form-captcha input{width:18px; height:18px; accent-color:var(--signal); cursor:pointer;}
.btn-solid:disabled{background:var(--line); border-color:var(--line); color:var(--soil); cursor:not-allowed; transform:none; box-shadow:none;}
.btn-submit-kavling{
background:#F5B301; color:var(--ink); border-color:#F5B301;
font-size:18px; font-weight:700;
}
.btn-submit-kavling:hover,
.btn-submit-kavling:active,
.btn-submit-kavling:focus{
background:var(--ink); color:#fff; border-color:var(--ink);
}
.btn-submit-kavling:disabled{
background:var(--line); border-color:var(--line); color:var(--soil); cursor:not-allowed;
}
.form-success{margin-top:16px; padding:16px 18px; border-radius:var(--radius-sm); background:rgba(31,122,77,.1); border:1px solid rgba(31,122,77,.3); color:var(--ok); font-family:var(--f-body); font-size:13.5px; line-height:1.6;}
@media (max-width:760px){ .form-row{grid-template-columns:1fr;} }
/* === Pesan Kavling form redesign === */
.form-section-title{
font-family:var(--f-body); font-size:14px; font-weight:700; text-transform:none;
letter-spacing:0; color:#1B3A5F; margin:28px 0 20px; padding:14px 18px;
background:#F3F4F6; border:1px solid #E5E7EB; border-radius:8px;
}
.form-section-title:first-of-type{ margin-top:0; }
.field-icon-wrap{ position:relative; }
.field-icon-wrap .field-icon{
position:absolute; left:14px; top:50%; transform:translateY(-50%);
width:18px; height:18px; color:var(--soil); pointer-events:none;
}
.field-icon-wrap input.has-toggle{ padding-right:44px; }
.field-toggle-password{
position:absolute; right:12px; top:50%; transform:translateY(-50%);
background:none; border:none; padding:4px; margin:0; cursor:pointer;
color:var(--soil); display:flex; align-items:center; justify-content:center;
transition:color .2s ease;
}
.field-toggle-password:hover{ color:var(--signal); }
.field-icon-wrap input.has-icon{ padding-left:42px; }
/* === Accordion section (Pesan Kavling) === */
.form-accordion{ border:1px solid #E5E7EB; border-radius:8px; margin-bottom:16px; overflow:hidden; }
.form-accordion-header{
display:flex; align-items:center; justify-content:space-between; cursor:pointer;
font-family:var(--f-body); font-size:22px; font-weight:700; color:#1B3A5F;
padding:16px 20px; background:#F3F4F6; user-select:none;
}
.form-accordion-header .acc-caret{ transition:transform .25s ease; display:flex; }
.form-accordion.is-open .form-accordion-header .acc-caret{ transform:rotate(180deg); }
.form-accordion-body{
max-height:0; overflow:hidden; transition:max-height .3s ease;
padding:0 24px;
}
.form-accordion.is-open .form-accordion-body{ padding:24px; }
/* === Field row: label kiri, input kanan === */
.field-row{
display:grid; grid-template-columns:220px 1fr; gap:16px; align-items:center;
padding:14px 0; border-bottom:1px solid #F0F1F3;
}
.field-row:last-child{ border-bottom:none; }
.field-row label{
font-family:var(--f-body); font-size:22px; font-weight:700; color:#000000; margin:0;
}
.field-row label .req{ color:#E23F63; margin-left:2px; }
.field-row .field-row-2col{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.field-row input, .field-row select, .field-row textarea{
width:100%; padding:18px 20px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper);
font-family:var(--f-body); font-size:22px; color:#000000;
transition:border-color .2s ease, box-shadow .2s ease;
}
.field-row select{
appearance:none; -webkit-appearance:none;
background-image:url("data:image/svg+xml;utf8,");
background-repeat:no-repeat; background-position:right 16px center; background-size:18px; padding-right:46px;
}
.field-row input:focus, .field-row select:focus, .field-row textarea:focus{
border-color:var(--signal); box-shadow:0 0 0 4px rgba(44,90,140,.12); outline:none;
}
.field-row .field-icon-wrap input.has-icon{ padding-left:52px; }
.field-row .field-narrow{ max-width:360px; }
.field-row.align-top{ align-items:start; }
.field-row.align-top label{ padding-top:18px; }
.field-address-group{ display:flex; flex-direction:column; gap:14px; }
.field-address-item{ display:flex; flex-direction:column; gap:6px; }
.field-address-item input{ width:100%; padding:18px 20px; border:1.5px solid var(--line); border-radius:var(--radius-sm); background:var(--paper); font-family:var(--f-body); font-size:22px; color:#000000; transition:border-color .2s ease, box-shadow .2s ease; }
.field-address-item input:focus{ border-color:var(--signal); box-shadow:0 0 0 4px rgba(44,90,140,.12); outline:none; }
.field-address-item span{ font-family:var(--f-body); font-size:22px; font-weight:700; color:var(--ink); }
.field-address-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:640px){
.field-address-row{ grid-template-columns:1fr; }
}
.field-radio-group{ display:flex; gap:28px; align-items:center; }
.field-radio-option{ display:flex; align-items:center; gap:8px; font-family:var(--f-body); font-size:22px; font-weight:600; color:#000; cursor:pointer; }
.field-radio-option input[type="radio"]{ width:20px; height:20px; accent-color:var(--signal); cursor:pointer; margin:0; }
@media (max-width:640px){
.field-row{ grid-template-columns:1fr; gap:6px; }
.field-row .field-row-2col{ grid-template-columns:1fr; }
.field-row .field-narrow{ max-width:100%; }
}
/* -------------------- footer -------------------- */
footer{padding:0;}
.footer-top{background:var(--ink); padding:44px 0;}
.footer-top .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px;}
.footer-top-left{display:flex; flex-direction:column; gap:18px;}
.footer-nav{display:flex; gap:26px; flex-wrap:wrap;}
.footer-nav a{font-family:'Montserrat', sans-serif; font-size:16px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--paper); text-decoration:none; transition:color .2s ease;}
.footer-nav a:hover{color:#F5B301;}
.footer-social{display:flex; gap:16px;}
.footer-social a{display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.08); transition:background .2s ease;}
.footer-social a:hover{background:#F5B301;}
.footer-social svg{width:18px; height:18px; fill:var(--paper);}
.footer-social a:hover svg{fill:var(--ink);}
.footer-logo{width:100px; height:100px; object-fit:contain; filter:brightness(0) invert(1);}
.footer-bottom{background:#F5B301; padding:32px 0; font-family:var(--f-body); font-size:16px; color:var(--ink);}
.footer-bottom .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px;}
.footer-bottom a{color:var(--ink); text-decoration:none;}
.footer-bottom a:hover{text-decoration:underline;}
@media (max-width:760px){ .footer-top{flex-direction:column; align-items:flex-start;} .footer-nav{gap:18px;} }
/* -------------------- floating contact FAB -------------------- */
.fab-group{
position:fixed; bottom:50px; right:24px; z-index:200;
display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
/* tombol utama (badge lonjong) - diperbesar */
.fab-toggle{
position:relative;
width:200px; height:70px;
border:none; padding:0; margin:0; cursor:pointer;
background:transparent;
transition:transform .25s ease;
}
.fab-toggle:hover{transform:translateY(-3px) scale(1.03);}
.fab-icon{
position:absolute; inset:0;
display:flex; align-items:center; justify-content:center;
transition:opacity .25s ease, transform .25s ease;
}
.fab-icon-img{width:100%; height:100%; object-fit:contain;}
.fab-icon-open{opacity:1; transform:scale(1) rotate(0deg);}
.fab-icon-close{
opacity:0; transform:scale(.6) rotate(-90deg);
color:#F5B301;
}
.fab-icon-close svg{width:32px; height:32px;}
.fab-group.open .fab-icon-open{opacity:0; transform:scale(.6) rotate(90deg); pointer-events:none;}
.fab-group.open .fab-icon-close{opacity:1; transform:scale(1) rotate(0deg); pointer-events:auto;}
/* 3 opsi kontak yang muncul di atas toggle - seragam & serong */
.fab-options{
display:flex; flex-direction:column; align-items:flex-end; gap:10px;
}
.fab-item{
position:relative;
display:flex; align-items:center; gap:12px;
color:var(--ink);
padding:6px 18px;
width:210px;
z-index:1;
opacity:0; transform:translateY(10px) scale(.9);
pointer-events:none;
transition:opacity .2s ease, transform .2s ease, color .2s ease;
}
.fab-item::before{
content:"";
position:absolute; inset:0;
background:#F5B301;
box-shadow:var(--shadow-md);
transform:skewX(-10deg);
transform-origin:bottom left;
z-index:-1;
transition:background .2s ease;
}
.fab-item:hover{color:#fff;}
.fab-item:hover::before{background:var(--signal);}
.fab-item-icon{width:30px; height:30px; flex-shrink:0;}
.fab-label{font-family:var(--f-body); font-size:13px; font-weight:600; white-space:nowrap;}
.fab-group.open .fab-item{opacity:1; transform:translateY(0) scale(1); pointer-events:auto;}
.fab-group.open .fab-item:nth-child(1){transition-delay:.05s;}
.fab-group.open .fab-item:nth-child(2){transition-delay:.1s;}
.fab-group.open .fab-item:nth-child(3){transition-delay:.15s;}
/* -------------------- breadcrumb (location pages) -------------------- */
.breadcrumb{
font-family:var(--f-body); font-size:12.5px; letter-spacing:.01em; text-transform:none;
padding:18px 0; border-bottom:1px solid var(--line); color:var(--soil);
}
.breadcrumb a{color:var(--soil); border-bottom:1px solid transparent; transition:color .2s ease;}
.breadcrumb a:hover{color:var(--signal); border-color:var(--signal);}
/* -------------------- location hero (page-specific) -------------------- */
.loc-hero{padding:60px 0 68px;}
.loc-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.loc-hero-media{position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); margin-top:240px;}
.loc-quickstats{display:flex; gap:40px; margin-top:40px; flex-wrap:wrap;}
.qstat{display:flex; flex-direction:column; align-items:center; text-align:center;}
.qstat span{display:block; font-family:var(--f-body); font-size:18px; text-transform:uppercase; letter-spacing:.04em; color:#1B3A5F; margin-bottom:6px; font-weight:900;}
.qstat strong{white-space:nowrap; display:block; font-family:var(--f-display); font-weight:800; font-size:28px; color:#E23F63;}
/* -------------------- gallery carousel -------------------- */
.gallery{position:relative; border-radius:var(--radius-lg); aspect-ratio:16/8; overflow:hidden; box-shadow:var(--shadow-md);}
.gallery .imgph{position:absolute; inset:0;}
.gallery-caption{
position:absolute; bottom:0; left:0; right:0; z-index:2;
background:linear-gradient(to top, rgba(14,35,64,.75), transparent); color:var(--paper); padding:20px 22px 16px;
font-family:var(--f-body); font-size:12.5px; display:flex; justify-content:space-between; font-weight:500;
}
.gallery-nav{position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; background:rgba(255,255,255,.92); backdrop-filter:blur(6px); border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:var(--f-body); font-weight:700; z-index:3; cursor:pointer; box-shadow:var(--shadow-sm); transition:background .2s ease, transform .2s ease;}
.gallery-nav.prev{left:16px;} .gallery-nav.next{right:16px;}
.gallery-nav:hover{background:var(--signal); color:var(--paper); transform:translateY(-50%) scale(1.06);}
/* -------------------- map 3D tilt effect (virtual survey) -------------------- */
.map-3d-stage{ perspective:1600px; perspective-origin:50% 20%; padding:30px 0 50px; }
.map-3d-stage .gallery{
transform:rotateX(32deg) scale(.94);
transform-origin:50% 100%;
box-shadow:0 60px 80px -30px rgba(14,21,15,.45), 0 15px 35px -10px rgba(14,21,15,.3);
transition:transform .7s cubic-bezier(.16,1,.3,1), box-shadow .7s cubic-bezier(.16,1,.3,1);
will-change:transform;
}
.map-3d-stage .gallery::after{
content:''; position:absolute; inset:0; z-index:2; pointer-events:none; border-radius:inherit;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.15);
}
.map-3d-stage:hover .gallery, .map-3d-stage:focus-within .gallery{
transform:rotateX(0deg) scale(1);
box-shadow:var(--shadow-md);
}
@media (max-width:900px){
.map-3d-stage{ perspective:900px; }
.map-3d-stage .gallery{ transform:rotateX(20deg) scale(.96); }
}
@media (prefers-reduced-motion:reduce){
.map-3d-stage .gallery{ transform:none; transition:none; }
}
/* -------------------- access steps (mini) -------------------- */
.access-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:70px; margin-top:70px;}
.access-step{padding:55px 25px 30px; background:var(--paper-dim); border-radius:var(--radius-md); position:relative; overflow:visible;}
.access-step .an{
position:absolute; top:-18px; left:20px;
width:45px; height:45px;
display:flex; align-items:center; justify-content:center;
font-family:var(--f-body); font-size:25px; font-weight:800;
color:var(--ink); background:#F5B301;
border-radius:12px;
box-shadow:var(--shadow-sm);
margin-bottom:0;
}
.access-step h4{font-family:var(--f-body); font-weight:800; font-size:20px; margin-bottom:9px; color:var(--ink);}
.access-step p{font-size:22px; color:#000000;}
@media (max-width:760px){ .access-steps{grid-template-columns:1fr 1fr;} }
.twocol-panel{
display:grid; grid-template-columns:1fr 1fr; gap:0; margin-bottom:70px;
width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
}
.panel{padding:90px 8vw;}
.panel-dark{background:var(--ink); color:var(--paper);}
.panel-light{background:#F5B301;}
.panel h4{font-family:var(--f-body); font-weight:800; font-size:20px; margin-bottom:30px;}
.panel-dark h4{color:var(--paper);}
.panel-dark p{color:#FFFFFF; font-size:22px;}
.panel-light p{color:#000000; font-size:22px;}
.panel-row{display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); font-family:var(--f-body); font-size:22px; color:#000000;}.panel-dark .panel-row{border-bottom-color:rgba(255,255,255,.14); color:#FFFFFF; font-size:22px;}
@media (max-width:760px){ .twocol-panel{grid-template-columns:1fr;} }
.env-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:44px;}
.env-item{background:var(--paper); padding:22px; border-radius:var(--radius-md); border:1px solid var(--line); transition:box-shadow .25s ease, transform .25s cubic-bezier(.16,1,.3,1);}
.env-item:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
.env-item .imgph{aspect-ratio:16/9; margin-bottom:14px; border-radius:var(--radius-sm); overflow:hidden;}
.env-item h4{font-family:var(--f-body); font-weight:700; font-size:14.5px; margin-bottom:4px; color:var(--ink);}
.env-item span{font-family:var(--f-body); font-size:11.5px; color:var(--soil);}
@media (max-width:760px){ .env-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .env-grid{grid-template-columns:1fr;} }
.video-block{position:relative; border-radius:var(--radius-lg); overflow:hidden; display:grid; grid-template-columns:1fr 1fr; margin-bottom:44px; box-shadow:var(--shadow-md);}
.video-block-copy{background:var(--ink); color:var(--paper); padding:42px; display:flex; flex-direction:column; justify-content:center;}
.video-block-media{position:relative; aspect-ratio:16/10;}
.video-block-media .slideshow-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.video-block-media .gallery-nav{
width:auto; height:auto; background:none; backdrop-filter:none; border-radius:0; box-shadow:none;
font-size:38px; font-weight:800; color:#fff; padding:14px 10px;
text-shadow:0 2px 10px rgba(0,0,0,.55);
}
.video-block-media .gallery-nav:hover{
background:none; color:#FFD400; transform:translateY(-50%);
}
.play-btn{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center; z-index:2;
}
.play-btn span{
width:66px; height:66px; border-radius:50%; background:var(--paper); color:var(--signal);
display:flex; align-items:center; justify-content:center; font-size:20px; box-shadow:var(--shadow-lg);
transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.play-btn:hover span{transform:scale(1.1);}
.play-btn-yt{background:transparent; border:none; padding:0; cursor:pointer;}
.play-btn-yt svg{
width:72px; height:52px;
filter:drop-shadow(0 4px 14px rgba(0,0,0,.3));
transition:transform .25s cubic-bezier(.16,1,.3,1);
}
.play-btn-yt:hover svg{transform:scale(1.08);}
@media (max-width:760px){ .video-block{grid-template-columns:1fr;} }
/* -------------------- animated counter -------------------- */
.counter{font-variant-numeric:tabular-nums;}
#preloader {
position: fixed;
inset: 0;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
background: #1B3A5F;
transition: opacity 0.5s ease, visibility 0.5s ease;
}
#preloader.loaded {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
.preloader-spinner {
position: relative;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
}
.preloader-spinner::before {
content: '';
position: absolute;
inset: 0;
border: 6px solid rgba(255, 255, 255, 0.15);
border-top-color: #ffffff;
border-radius: 50%;
animation: preloader-spin 1s linear infinite;
}
.preloader-logo {
width: 60px;
height: 60px;
object-fit: contain;
transform: translateY(-6px);
}
@keyframes preloader-spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.preloader-credit {
position: absolute;
left: 24px;
bottom: 20px;
color: rgba(255, 255, 255, 0.6);
font-size: 14px;
font-family: 'Inter', sans-serif;
}
.preloader-credit strong {
font-weight: 700;
color: rgba(255, 255, 255, 0.85);
}
/* ---------- Login Modal ---------- */
.login-modal-overlay{
position:fixed; inset:0; z-index:300;
background:rgba(14,35,64,.6);
display:none; align-items:center; justify-content:center;
padding:20px;
}
.login-modal-overlay.active{display:flex;}
.login-modal-split{
background:#fff; border-radius:20px; width:100%; max-width:760px;
padding:0; position:relative; overflow:hidden;
display:flex; align-items:stretch;
box-shadow:0 20px 60px rgba(0,0,0,.3);
animation:loginModalIn .3s cubic-bezier(.16,1,.3,1);
}
@keyframes loginModalIn{
0%{opacity:0; transform:translateY(20px) scale(.97);}
100%{opacity:1; transform:translateY(0) scale(1); }
}
.login-modal-split{
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
}
.login-modal-close{
position:absolute; top:16px; right:16px; z-index:5;
width:32px; height:32px; display:flex; align-items:center; justify-content:center;
background:none; border:none; color:#8A94A3; cursor:pointer; padding:0;
transition:color .2s ease;
}
.login-modal-close:hover{color:#1B3A5F;}
.login-modal-close svg{width:20px; height:20px;}
.login-modal-visual{
width:42%; flex-shrink:0; position:relative; overflow:hidden;
background:linear-gradient(135deg, #24466E 0%, #0E2340 100%);
padding:40px 32px; display:flex; flex-direction:column; justify-content:center;
}
.login-modal-visual .login-modal-logo{
display:block; width:78px; height:78px; margin-left:-8px; background-color:#F2B705;
-webkit-mask-image:url('Images/Logo-rumata.png'); mask-image:url('Images/Logo-rumata.png');
-webkit-mask-size:contain; mask-size:contain;
-webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
-webkit-mask-position:center; mask-position:center;
position:relative; z-index:2;
}
.login-modal-visual h3{
color:#fff; font-family:var(--f-display); font-size:23px; font-weight:800;
margin:18px 0 10px; position:relative; z-index:2;
}
.login-modal-visual p{
color:rgba(255,255,255,.75); font-size:14px; line-height:1.55; margin:0;
position:relative; z-index:2;
}
.login-modal-visual-shapes{position:absolute; inset:0; z-index:1;}
.lmv-dots{
position:absolute; top:26px; right:26px; width:64px; height:44px;
background-image:radial-gradient(rgba(255,255,255,.35) 1.5px, transparent 1.5px);
background-size:10px 10px; opacity:.7;
}
.lmv-plus{position:absolute; width:14px; height:14px;}
.lmv-plus::before,.lmv-plus::after{content:''; position:absolute; background:rgba(255,255,255,.4);}
.lmv-plus::before{width:100%; height:2px; top:50%; left:0; transform:translateY(-50%);}
.lmv-plus::after{width:2px; height:100%; left:50%; top:0; transform:translateX(-50%);}
.lmv-plus-1{top:68px; left:28px;}
.lmv-plus-2{bottom:86px; right:34px;}
.lmv-circle{
position:absolute; width:24px; height:24px; border:2px solid rgba(255,255,255,.35);
border-radius:50%; bottom:36px; left:32px;
}
.lmv-blob{display:none;}
.login-modal-content{flex:1; padding:44px 36px; min-width:0;}
.login-modal-content h2{
margin:0 0 6px; font-family:var(--f-display); font-size:22px; font-weight:800; color:#1B3A5F;
}
.login-modal-subtitle{font-size:14px; color:#6B7684; margin:0 0 22px;}
.login-modal-form{display:flex; flex-direction:column; gap:6px;}
.login-modal-form label{font-size:13px; font-weight:700; color:#1B3A5F; margin-top:10px;}
.login-input-wrap{position:relative;}
.login-input-wrap .login-input-icon{
position:absolute; left:14px; top:50%; transform:translateY(-50%);
width:18px; height:18px; color:#8A94A3; pointer-events:none;
}
.login-modal-form input[type="text"],
.login-modal-form input[type="password"]{
width:100%; padding:13px 16px 13px 42px; border-radius:10px; border:1.5px solid #E1E5EA;
font-size:15px; font-family:'Montserrat', sans-serif; color:#1B3A5F;
outline:none; transition:border-color .2s ease;
}
.login-modal-form input:focus{border-color:#F2B705;}
.login-modal-row{
display:flex; align-items:center; justify-content:space-between;
margin:14px 0 6px; font-size:13px;
}
.login-remember{display:flex; align-items:center; gap:6px; color:#4B5563; cursor:pointer;}
.login-remember input{width:14px; height:14px; accent-color:#1B3A5F;}
.login-forgot{color:#1B3A5F; font-weight:700; text-decoration:none;}
.login-forgot:hover{color:#F2B705;}
.login-modal-submit{width:100%; justify-content:center; margin-top:18px; border:none; cursor:pointer;}
@media (max-width:640px){
.login-modal-split{flex-direction:column; max-width:420px;}
.login-modal-visual{width:100%; padding:28px 24px 24px;}
.login-modal-content{padding:26px 24px 28px;}
}
/* ---------- Dekorasi pojok kanan atas - Siteplan Teaser ---------- */
#siteplan{
position:relative; /* wajib, biar dekorasi terposisi relatif ke section ini */
overflow:visible; /* biar gambar boleh nongol keluar batas section kalau perlu */
}
.decor-siteplan-corner{
position:absolute;
top:0px; /* jarak dari atas section, sesuaikan angkanya */
right:0px; /* nempel ke kanan */
width:180px; /* ukuran gambar, sesuaikan */
z-index:5;
pointer-events:none; /* biar gambar tidak menghalangi klik */
}
/* ---------- Spacing khusus section Siteplan Teaser (siteplan.html) ---------- */
#siteplan{
position:relative; /* wajib, biar dekorasi terposisi relatif ke section ini */
overflow:visible; /* biar dekorasi boleh nongol keluar batas section */
padding-top:200px; /* jarak ATAS heading "Jelajahi siteplan..." dari section */
}
/* ---------- Spacing khusus section Siteplan Teaser (siteplan.html) ---------- */
#siteplan{
padding-top:200px; /* jarak ATAS heading "Jelajahi siteplan..." dari section */
}
#siteplan .section-head h2{
max-width:none; /* biar judul tidak turun 2 baris */
}
#siteplan .section-head .lead{
margin-top:40px; /* jarak antara heading & paragraf */
max-width:none; /* biar paragraf tidak turun 2 baris */
}
#siteplan .section-head{
margin-bottom:70px; /* jarak dari paragraf ke foto siteplan di bawahnya */
}
/* ---------- Spacing khusus section Pilih Kavling ---------- */
#kavling{
padding-top:200px; /* jarak ATAS heading "PILIH LOKASI..." dari section */
}
#kavling .section-head h2{
max-width:none;
}
#kavling .section-head .lead{
margin-top:40px; /* jarak antara heading & paragraf "Tertarik..." */
max-width:730px;
}
#kavling .section-head{
margin-bottom:70px; /* jarak dari paragraf ke foto kavling di bawahnya */
}
/* ---------- Background putih section Pilih Kavling (kecuali footer) ---------- */
#kavling{
background:#FFFFFF;
}
/* ---------- Cara Pembelian: heading center + steps jadi list vertikal ---------- */
#cara-pembelian{
padding-top:70px;
}
#cara-pembelian .section-head{
display:block;
text-align:center;
}
#cara-pembelian .section-head h2,
#cara-pembelian .section-head .lead{
max-width:920px;
margin-left:auto;
margin-right:auto;
}
#cara-pembelian .section-head .lead{
margin-top:44px;
}
#cara-pembelian .steps{
display:block;
max-width:820px;
margin:0 auto;
}
#cara-pembelian .step{
display:grid;
grid-template-columns:56px 1fr;
column-gap:24px;
row-gap:14px;
align-items:start;
padding:28px 12px;
border-bottom:none;
border-radius:0;
background:transparent;
text-decoration:none;
color:inherit;
transition-property:background, padding-left, opacity, transform;
transition-duration:.25s, .25s, .6s, .6s;
transition-timing-function:ease, ease, cubic-bezier(.16,1,.3,1), cubic-bezier(.16,1,.3,1);
}
#cara-pembelian .step:hover{
background:var(--paper-dim);
transform:none;
box-shadow:none;
padding-left:22px;
}
#cara-pembelian .step-num{
grid-column:1;
grid-row:1 / span 2;
width:50px; height:50px;
border-radius:30%;
background:#F5B301;
display:flex; align-items:center; justify-content:center;
font-family:var(--f-body); font-weight:800; font-size:24px; color:var(--ink);
}
#cara-pembelian .step h4{
grid-column:2;
grid-row:1;
font-size:21px;
margin-bottom:0;
}
#cara-pembelian .step p{
grid-column:2;
grid-row:2;
font-size:22px;
color:#000000;
margin:0;
}
/* ---------- Spacing khusus section Legalitas ---------- */
#legalitas{
padding-top:60px;
padding-bottom:200px;
}
/* ---------- Kunci overflow kartu siteplan (anti-lewat kolom) ---------- */
#siteplan .reveal-stagger > a{
min-width:0;
}
#siteplan .reveal-stagger img{
max-width:100%;
display:block;
}
#siteplan .coord{
display:inline-block;
background:#F5B301;
color:var(--ink);
font-weight:700;
text-transform:uppercase;
font-size:14px;
letter-spacing:.01em;
border:1.5px solid #F5B301;
padding:12px 16px;
margin-top:20px;
margin-bottom:5px;
}
.scroll-down-indicator{
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
display:flex;
flex-direction:column;
align-items:center;
gap:6px;
color:#1B3A5F;
font-family:var(--f-body);
font-size:12px;
font-weight:600;
letter-spacing:.08em;
text-transform:uppercase;
animation:scrollBounce 2s ease-in-out infinite;
}
.scroll-down-indicator svg{
width:22px;
height:22px;
}
@keyframes scrollBounce{
0%, 100%{ transform:translateX(-50%) translateY(0); }
50%{ transform:translateX(-50%) translateY(10px); }
}
#pesan-kavling-hero .scroll-down-indicator{
transition:opacity .35s ease, visibility .35s ease;
opacity:1; visibility:visible;
}
#pesan-kavling-hero .scroll-down-indicator.is-hidden{
opacity:0; visibility:hidden;
}
.loc-scroll-indicator{
position:static;
align-items:flex-start;
margin-top:170px;
color:var(--ink);
transition:opacity .35s ease, visibility .35s ease;
opacity:1; visibility:visible;
}
@keyframes scrollBounceLeft{
0%, 100%{ transform:translateY(0); }
50%{ transform:translateY(10px); }
}
.loc-scroll-indicator{ animation:scrollBounceLeft 2s ease-in-out infinite; }
.loc-scroll-indicator.is-hidden{
opacity:0; visibility:hidden;
}
/* ===== SCOPED KHUSUS: HERO BUKIT HARMONI (tidak pengaruh halaman lain) ===== */
.loc-hero-harmoni .loc-scroll-indicator{
margin-top:95px;
}
/* =========================================================
SECTION KHUSUS: TENTANG.HTML
========================================================= */
/* -------------------- hero: teks + foto -------------------- */
.rmt-tentang-hero{
display:flex; flex-direction:column; gap:130px; position:relative;
padding-top:120px; padding-bottom:0;
max-width:1400px; margin-left:auto; margin-right:auto;
}
.rmt-tentang-hero-text{max-width:1050px; text-align:left;}
.rmt-tentang-hero-text .lead{max-width:none; line-height:1.85; color:#000000;}
.rmt-tentang-hero-photo{
position:relative; width:100%;
border-radius:var(--radius-lg); overflow:hidden;
}
.rmt-tentang-hero-photo img{
width:100%; height:auto; object-fit:cover; display:block;
}
/* -------------------- timeline sejarah -------------------- */
.rmt-tentang-timeline-section{padding-top:0; padding-bottom:80px;}
.rmt-tentang-timeline{
display:flex; flex-direction:column;
max-width:1600px; margin:0; padding-left:500px;
}
.rmt-tentang-timeline-item{
display:grid; grid-template-columns:140px 1fr; gap:32px;
padding:32px 0;
}
.rmt-tentang-timeline-year{
font-family:var(--f-display); font-size:32px; font-weight:800;
color:var(--signal);
}
.rmt-tentang-timeline-desc{
font-size:22px; line-height:1.8; color:#000000;
}
/* -------------------- visi misi -------------------- */
.rmt-tentang-visimisi{
background:#FBF3D9; position:relative; overflow:hidden;
width:100vw; margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
padding:100px 0;
}
.rmt-tentang-visimisi-inner{
position:relative; z-index:1; max-width:820px; margin:0 auto; text-align:center;
}
.rmt-tentang-visimisi-block{margin-bottom:56px;}
.rmt-tentang-visimisi-block:last-child{margin-bottom:0;}
.rmt-tentang-visimisi-title{
font-family:var(--f-display); font-size:40px; font-weight:800;
letter-spacing:.04em; color:var(--ink); margin-bottom:24px;
}
.rmt-tentang-visimisi-text{
font-size:22px; line-height:1.85; color:#000000;
}
/* =========================================================
SECTION KHUSUS: INDEX.HTML (KONTAK TEASER)
========================================================= */
#kontak{padding:200px 0 200px;}
#kontak .contact-info{margin-bottom:60px;}
/* =========================================================
SECTION KHUSUS: KONTAK.HTML
========================================================= */
/* -------------------- hero -------------------- */
.kontak-hero{
min-height:100vh; display:flex; align-items:center;
padding:140px 0 0; position:relative;
}
.hero-kontak-grid{
display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:60px;
width:100%;
}
.hero-kontak-text{ max-width:640px; margin-left:auto; margin-right:auto; text-align:center; }
.hero-kontak-image{ position:relative; }
.hero-kontak-image img{ width:100%; height:auto; display:block; }
@media (max-width:900px){
.hero-kontak-grid{ grid-template-columns:1fr; gap:32px; text-align:center; }
.hero-kontak-image{ order:-1; max-width:280px; margin:0 auto; }
}
/* -------------------- dekorasi PNG transparan -------------------- */
.hero-decor-kontak{
position:absolute; top:100px; right:40px; width:260px; height:auto;
pointer-events:none; user-select:none; z-index:1;
}
@media (max-width:768px){
.hero-decor-kontak{ width:130px; top:70px; right:16px; }
}
/* -------------------- scroll indicator: hilang saat scroll, balik di hero -------------------- */
#hubungi-kami .scroll-down-indicator{
transition:opacity .35s ease, visibility .35s ease;
opacity:1; visibility:visible;
}
#hubungi-kami .scroll-down-indicator.is-hidden{
opacity:0; visibility:hidden;
}
/* -------------------- info kontak -------------------- */
.kontak-photo-frame{ max-width:400px; margin-left:auto; margin-right:-35px; }
.contact-info{ border-top:none; padding-top:20px; }
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:20px; }
.contact-inline{ padding:0; font-family:var(--f-body); font-size:22px; line-height:1.6; color:#000000; display:flex; align-items:baseline; }
.contact-inline + .contact-inline{ margin-top:0px; }
.contact-address + .contact-inline{ margin-top:25px; }
.contact-inline span{ font-weight:600; color:#000000; font-size:22px; }
.contact-inline strong{ color:#000000; font-weight:700; }
.contact-address{ display:block; line-height:1.6; }
.contact-label{ flex:0 0 70px; }
.contact-colon{ flex:0 0 24px; text-align:center; }
@media (max-width:760px){ .contact-grid{ grid-template-columns:1fr; } }
/* =========================================================
SECTION KHUSUS: KONTAK.HTML - TIM MARKETING
========================================================= */
#tim-marketing{
padding: 100px 0 40px;
}
#tim-marketing .marketing-grid{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 32px;
max-width: 780px;
margin: 0 auto;
}
#tim-marketing .marketing-card{
background: #FFFFFF;
border: 1px solid var(--line);
border-radius: var(--radius-md);
padding: 44px 32px;
text-align: center;
box-shadow: var(--shadow-sm);
}
#tim-marketing .marketing-avatar{
width: 64px;
height: 64px;
margin: 0 auto 20px;
border-radius: 50%;
background: #1B3A5F;
color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--f-display);
font-size: 22px;
font-weight: 700;
}
#tim-marketing h3{
margin: 0 0 12px;
font-size: 22px;
}
#tim-marketing p{
color: #1B3A5F;
font-size: 22px;
margin: 0 0 28px;
}
#tim-marketing .marketing-actions{
display: flex;
gap: 12px;
justify-content: center;
}
#tim-marketing .marketing-btn{
flex: none;
width: 140px;
padding: 12px 20px;
border-radius: 0;
font-family: var(--f-body);
font-weight: 700;
font-size: 18px;
text-decoration: none;
text-align: center;
}
#tim-marketing .marketing-btn-call{
background: #F5B301;
color: var(--ink);
transition: background .2s ease, color .2s ease;
font-family: var(--f-body);
font-weight: 700;
font-size: 18px;
text-transform: none;
letter-spacing: normal;
}
#tim-marketing .marketing-btn-call:hover{
background: #1B3A5F;
color: #FFFFFF;
}
#tim-marketing .marketing-btn-wa{
background: #25D366;
color: #FFFFFF;
transition: background .2s ease, color .2s ease;
}
#tim-marketing .marketing-btn-wa:hover{
background: #1B3A5F;
color: #FFFFFF;
}
/* =========================================================
SECTION KHUSUS: BUKTI.HTML
========================================================= */
#bukti{
padding-top: 250px;
padding-bottom: 200px;
}
#bukti .section-head{
margin-bottom: 120px;
flex-direction: column;
align-items: center;
text-align: center;
}
#bukti .section-head > div{
width: 100%;
}
#bukti .section-head h2{
max-width: 1500px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#bukti .section-head .lead{
margin-top: 52px;
max-width: 900px;
text-align: center;
margin-left: auto;
margin-right: auto;
}
#bukti .proof-cell img{
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
#bukti .section-head .eyebrow{
justify-content: center;
width: 100%;
}
#bukti .proof-grid{
grid-template-columns: repeat(3, 1fr);
}
@media (max-width:860px){ .tvid{grid-template-columns:1fr;} .proof-grid{grid-template-columns:repeat(2,1fr);} }
#bukti .tvid{
grid-template-columns: 1fr 1.3fr;
align-items: center;
gap: 40px;
background: var(--ink);
color: var(--paper);
padding: 40px;
border-radius: var(--radius-md);
}
#bukti .tvid-copy{
background: transparent;
color: var(--ink);
padding: 0;
}
#bukti .tvid-copy .eyebrow{
color: #FFFFFF;
margin-bottom: 60px;
font-size: 35px;
}
#bukti .tvid-copy h2{
color: #FFFFFF;
margin-bottom: 50px;
}
#bukti .tvid-copy p{
color: #FFFFFF;
margin-top: 0;
font-size: 22px;
}
#bukti .tvid-media{
position: relative;
aspect-ratio: 16/9;
overflow: hidden;
border-radius: var(--radius-md);
background: #6B4A2F;
}
#bukti .tvid-media iframe{
position: absolute !important;
top: 35% !important;
left: 50% !important;
width: 320% !important;
height:320% !important;
transform: translate(-50%, -38%) !important;
border: 0;
}
@media (max-width: 860px){
#bukti .tvid{
grid-template-columns: 1fr;
padding: 24px;
}
}
#bukti .proof-check div{
font-size: 22px;
color: #000000;
}
#bukti .proof-check div::before{
font-size: 22px;
}
#bukti .proof-check{
justify-content: center;
margin-top: 100px;
}
/* =========================================================
SECTION KHUSUS: FAQ.HTML
========================================================= */
#faq{
padding-top: 220px;
}
#faq .faq-grid h2{
max-width: none;
width: max-content;
position: relative;
z-index: 5;
}
#faq .faq-grid{
grid-template-columns: 500px 1fr;
gap: 200px;
}
#faq .faq-q span{
font-size: 22px;
}
#faq .faq-a p{
font-size: 22px;
color: #000000;
max-width: 700px;
}
#faq .faq-item:first-child .faq-q{
padding-top: 112px;
}
#faq .faq-item.open:last-child .faq-a{
max-height: 300px;
}
/* =========================================================
video kavling
========================================================= */
.video-block-media.tvid-media{
background-size:cover;
background-position:center;
background-repeat:no-repeat;
}
/* meter decor*/
.meter-decor {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}