@charset "utf-8";
/* CSS Document */

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

.navbar{
    position:fixed;

    top:30px;
    left:50%;

    transform:translateX(-50%);

    width:calc(100% - 120px);

    z-index:1000;
}

.navbar.scrolled{

    background:rgba(255,255,255,0.78);

    backdrop-filter:blur(18px);

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

    border:1px solid rgba(255,255,255,0.35);

    box-shadow:0 10px 30px rgba(0,0,0,0.08);
}

.navbar.scrolled .nav-links a{
    color:#2b2b2b;
}

.navbar.scrolled .dropdown-arrow{
    color:#2b2b2b;
}

.nav-links a.active{
    color:#c89b60;
}

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

.room-hero{
    position:relative;

    height:86vh;
	min-height:720px;
	max-height:900px;

    overflow:hidden;

    margin:0;

    border-radius:0;
}

.room-hero img{
    position:absolute;

    inset:0;

    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center 55%;

    display:block;

    transform:scale(1);

    animation:heroZoom 18s ease-out forwards;
	will-change:transform;
}
@keyframes heroZoom{

    from{
        transform:scale(1);
    }

    to{
        transform:scale(1.06);
    }

}


.room-hero-overlay{
    position:absolute;

    inset:0;

    background:
    linear-gradient(
        to top,
        rgba(0,0,0,0.60),
        rgba(0,0,0,0.28)
    );

    z-index:1;
}

.room-hero-content{
    position:absolute;

    left:50%;
    top:58%;

    transform:translate(-50%,-50%);

    width:90%;
    max-width:1100px;

    text-align:center;

    z-index:2;

    color:#fff;

    opacity:0;

    animation:heroContentFade 1.2s ease forwards;

    animation-delay:0.3s;
}

@keyframes heroContentFade{

    from{
        opacity:0;

        transform:
        translate(-50%,-46%);
    }

    to{
        opacity:1;

        transform:
        translate(-50%,-50%);
    }

}

.room-hero-content h1{
    font-size:3.2rem;

    font-family:'Cormorant Garamond', serif;

    line-height:0.96;

    font-weight:600;

    letter-spacing:-1px;

    text-shadow:0 8px 30px rgba(0,0,0,0.22);

    margin:14px 0 24px;
}

.room-hero-content p{
    font-size: 1.08rem;
  	line-height: 1.9;
  	color: rgba(255,255,255,0.86);
  	margin-bottom: 38px;
	max-width:760px;
    margin:auto;
}

.room-meta{
    display:flex;

    justify-content:center;

    gap:14px;

    flex-wrap:wrap;

    margin-top:34px;
}

.room-meta span{
    padding:5px 20px;

    border-radius:15px;

    background:rgba(255,255,255,0.14);

    border:1px solid rgba(255,255,255,0.16);

    backdrop-filter:blur(10px);

    font-size:0.85rem;

    color:#fff;
}

.room-hero-btn{
    display:inline-flex;

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

    margin-top:38px;

    padding:18px 40px;

    border-radius:999px;

    background:#d8b37b;

    color:#1d1d1d;

    text-decoration:none;

    font-weight:500;

    transition:0.3s ease;
}

.room-hero-btn:hover{
    transform:translateY(-2px);

    background:#e1be89;
}

.room-social-proof{
    margin:18px 0 22px;
    font-size:.82rem;
    color:rgba(255,255,255,.82);
    font-style:italic;
    letter-spacing:.3px;
}

.room-capacity-note{

    margin-top:15px !important;

    font-size:.8rem !important;

    color:rgba(255,255,255,.85) !important;
}

/* ========================================= */
/* ROOM INTRO */
/* ========================================= */

.room-intro{
    padding:120px 0;
}

.room-intro-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;
}

.room-intro-image img{
    width:100%;
    height:620px; /* sebelumnya mungkin 900px+ */
    object-fit:cover;
    border-radius:32px;
}

.room-intro-content{
    max-width:560px;
}

.room-intro-content h2{
	font-family:'Cormorant Garamond', serif;
    font-size:2.6rem;
    line-height:1.15;
    margin-bottom:28px;
}

.room-intro-content p{
    color: #666;
  	font-size: 1rem;
  	line-height: 1.9;
    margin-bottom:24px;
}

.room-intro-content::after{
    content:"";

    width:80px;
    height:1px;

    background:rgba(0,0,0,0.12);

    display:block;

    margin-top:36px;
}


/* ========================================= */
/* ROOM GALLERY */
/* ========================================= */

.room-gallery-section{
    padding:90px 7% 110px;

    background:#f7f3ee;
}

.center-heading{
    text-align:center;

    margin-bottom:50px;
}

.section-label{
    display:block;

    font-size:0.78rem;
    letter-spacing:4px;
    text-transform:uppercase;

    color:#a6845e;

    margin-bottom:18px;
}

.center-heading h2{
    font-size:2.6rem;
    line-height:1.15;
    font-weight:500;

    color:#2d241c;
}

.room-gallery-grid{
    display:grid;

    grid-template-columns:1.15fr 0.85fr;

    gap:20px;

    align-items:start;
}

.gallery-image.large{
    height:480px;

    border-radius:32px;

    overflow:hidden;

    position:relative;
}

.gallery-stack{
    display:grid;

    gap:20px;
}

.gallery-image.small{
    height:230px;

    border-radius:32px;

    overflow:hidden;

    position:relative;
}

.gallery-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    object-position:center center;

    display:block;

    transition:transform 0.8s ease;
}


/* Balcony image positioning */

.gallery-image:nth-child(2) img{
    object-position:center 60%;
}


/* Hover effect */

.gallery-image:hover img{
    transform:scale(1.03);
}

/* ========================================= */
/* ROOM FEATURES */
/* ========================================= */

.room-features-section{
    padding:120px 8%;

    background:#ede4d7;
}

.room-features-grid{
    display:grid;

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

    gap:24px;

    margin-top:65px;
}

.feature-icon{
    width:56px;
    height:56px;

    flex-shrink:0;

    border-radius:18px;

    background:rgba(166,132,94,0.10);

    display:flex;

    align-items:center;
    justify-content:center;
    transition:0.35s ease;
    color:#a6845e;
}

.feature-icon svg{
    width:24px;
    height:24px;

    stroke-linecap:round;
    stroke-linejoin:round;
}

.feature-card:hover .feature-icon{
    background:rgba(166,132,94,0.16);

    transform:translateY(-2px);
}


.feature-card{
    display:flex;

    align-items:flex-start;

    gap:20px;

    background:rgba(255,255,255,0.82);

    border:1px solid rgba(0,0,0,0.04);

    border-radius:28px;

    padding:32px;

    transition:0.35s ease;

    backdrop-filter:blur(12px);
}

.feature-card:hover{

    transform:translateY(-3px);

    box-shadow:
    0 18px 40px rgba(0,0,0,0.05);
}

.feature-icon{
    width:54px;
    height:54px;

    flex-shrink:0;

    border-radius:18px;

    background:#efe4d2;

    display:flex;

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

    font-size:1.3rem;
}

.feature-text h3{
    font-size:1.35rem;

    margin-bottom:10px;

    color:#2d241c;

    font-family:'Cormorant Garamond', serif;

    font-weight:600;
}

.feature-text p{
    font-size:0.98rem;

    line-height:1.8;

    color:#5f5a54;
}

.feature-card.highlight{
    grid-column: span 2;
}


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

@media(max-width:768px){

    .room-features-section{
        padding:90px 20px;
    }

    .room-features-grid{
        grid-template-columns:1fr;

        gap:18px;
    }

    .feature-card{
        padding:26px;
    }

    .feature-text h3{
        font-size:1.2rem;
    }
	
	 .feature-card.highlight{
        grid-column: span 1;
    }


}


/* ========================================= */
/* MINI CTA STRIP */
/* ========================================= */

.mini-room-cta{
    padding:70px 8%;

    background:#f5f1ea;
}

.mini-room-cta-box{
    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:40px;

    padding:42px 54px;

    border-radius:34px;

    background:
    linear-gradient(
        135deg,
        #ebe3d7,
        #f4efe8
    );

    box-shadow:
    0 10px 30px rgba(0,0,0,0.03);
}


/* LEFT */

.mini-room-label{
    display:inline-block;

    margin-bottom:14px;

    font-size:0.78rem;

    letter-spacing:4px;

    text-transform:uppercase;

    color:#b58b58;
}

.mini-room-cta-left h2{
    font-size:2.6rem;

    line-height:1.1;

    margin-bottom:14px;

    color:#2b2118;

    font-family:'Cormorant Garamond', serif;

    font-weight:600;
}

.mini-room-cta-left p{
    font-size:1rem;

    color:#74695d;

    line-height:1.7;
}


/* BUTTON */

.mini-room-cta-btn{
    position:relative;

    display:inline-flex;

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

    padding:20px 38px;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        #d9b37a,
        #c89b60
    );

    color:#2b2118;

    font-size:0.96rem;

    font-weight:600;

    letter-spacing:0.6px;

    box-shadow:
    0 12px 28px rgba(201,155,96,0.30);

    transition:all 0.35s ease;

    overflow:hidden;
}


/* SOFT GLOW */

.mini-room-cta-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );

    transition:0.7s ease;
}


/* HOVER */

.mini-room-cta-btn:hover{
    transform:
    translateY(-3px)
    scale(1.02);

    box-shadow:
    0 18px 40px rgba(201,155,96,0.40);
}

.mini-room-cta-btn:hover::before{
    left:120%;
}


/* ========================================= */
/* ROOM FAQ */
/* ========================================= */

.room-faq-section{
    padding:120px 8%;

    background:#f8f4ef;
}

.faq-wrapper{
    max-width:900px;

    margin:70px auto 0;
}

.faq-item{
    border-bottom:1px solid rgba(0,0,0,0.08);
}

.faq-question{
    width:100%;

    background:none;

    border:none;

    padding:30px 0;

    display:flex;

    justify-content:space-between;

    align-items:center;

    text-align:left;

    cursor:pointer;

    font-size:1.15rem;

    font-weight:500;

    color:#2d241c;

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

.faq-question span{
    font-size:1.4rem;

    color:#a6845e;

    transition:0.3s ease;
}

.faq-answer{
    max-height:0;

    overflow:hidden;

    transition:max-height 0.4s ease;
}

.faq-answer p{
    padding:0 0 28px;

    font-size:1rem;

    line-height:1.9;

    color:#5f5a54;

    max-width:760px;
}


/* ACTIVE FAQ */

.faq-item.active .faq-answer{
    max-height:300px;
}

.faq-item.active .faq-question span{
    transform:rotate(45deg);
}

/* ========================================= */
/* COMPARE ROOMS */
/* ========================================= */

.compare-rooms-section{
    padding:120px 8%;

    background:#efe7dc;
}

.compare-rooms-grid{
    display:grid;

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

    gap:28px;

    margin-top:70px;
}

.compare-room-card{
    background:#fffaf4;

    border-radius:32px;

    overflow:hidden;

    transition:0.4s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,0.04);
}

.compare-room-card:hover{
    transform:translateY(-6px);

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

.compare-room-image img{
    width:100%;

    height:260px;

    object-fit:cover;

    transition:1s ease;
}

.compare-room-card:hover img{
    transform:scale(1.04);
}

.compare-room-content{
    padding:30px;
}

.compare-room-content h3{
    font-size:1.8rem;

    margin-bottom:14px;

    font-family:'Cormorant Garamond', serif;

    color:#2d241c;
}

.compare-room-content p{
    font-size:0.98rem;

    line-height:1.8;

    color:#5f5a54;

    margin-bottom:20px;
}

.compare-room-meta{
    font-size:0.88rem;

    color:#9b7a4f;

    margin-bottom:22px;

    letter-spacing:0.3px;
}

.compare-room-content a{
    color:#8d7354;

    font-weight:500;

    transition:0.3s ease;
}

.compare-room-content a:hover{
    opacity:0.7;
}

/* ========================================= */
/* FINAL ROOM CTA */
/* ========================================= */

.final-room-cta-section{
    padding:120px 8%;

    background:#f5f1ea;
}

.fade-up{
    opacity:0;

    transform:translateY(40px);

    transition:
    opacity 1s ease,
    transform 1s ease;
}

.fade-up.show{
    opacity:1;

    transform:translateY(0);
}

/* CTA BOX */

.final-room-cta-box{
    max-width:1100px;

    margin:auto;

    padding:90px 70px;

    border-radius:42px;

    text-align:center;

    background:
    linear-gradient(
        135deg,
        rgba(255,255,255,0.92),
        rgba(255,255,255,0.72)
    );

    backdrop-filter:blur(12px);

    box-shadow:
    0 20px 60px rgba(0,0,0,0.04);
}


/* LABEL */

.final-room-label{
    display:inline-flex;

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

    padding:12px 26px;

    border-radius:999px;

    background:#f3ede4;

    color:#b58b58;

    font-size:0.82rem;

    letter-spacing:4px;

    text-transform:uppercase;

    margin-bottom:32px;
}


/* TITLE */

.final-room-cta-box h2{
    font-size:2.6rem;

    line-height:1.05;

    color:#2a2119;

    margin-bottom:28px;

    font-family:'Cormorant Garamond', serif;

    font-weight:600;
}


/* DESCRIPTION */

.final-room-cta-box p{
    max-width:760px;

    margin:0 auto 42px;

    font-size:1.12rem;

    line-height:1.9;

    color:#5f5a54;
}


/* BUTTON */

.final-room-cta-btn{
    display:inline-flex;
    position:relative;

    overflow:hidden;
    align-items:center;
    justify-content:center;

    padding:22px 52px;

    border-radius:999px;

    background:#c39a67;

    color:#fff;

    font-size:0.95rem;

    font-weight:500;

    letter-spacing:1.5px;

    text-transform:uppercase;

    transition:0.35s ease;
}

.final-room-cta-btn::before{
    content:"";

    position:absolute;

    top:0;
    left:-120%;

    width:120%;
    height:100%;

    background:
    linear-gradient(
        120deg,
        transparent,
        rgba(255,255,255,0.35),
        transparent
    );

    transition:0.7s ease;
}

.final-room-cta-btn:hover::before{
    left:120%;
}

.final-room-cta-btn:hover{
    transform:translateY(-3px);
    
    background:#d2a875;
}


/* NOTE */

.final-room-note{
    margin-top:28px;

    font-size:0.9rem;

    color:#9b9389;

    line-height:1.7;
}


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

@media(max-width:768px){

    .room-hero{
        height:82vh;
        min-height:620px;;
    }

    .room-hero-content{
        top:56%;
    }

    .room-hero-content h1{
        font-size:2rem;

        line-height:1.05;
    }

    .room-hero-content p{
        font-size:0.98rem;
        line-height:1.6;
    }

    .navbar{
        width:calc(100% - 40px);

        top:20px;
    }

    .room-meta{
        gap:10px;
    }

    .room-meta span{
        font-size:0.82rem;

        padding:8px 16px;
    }

    .room-intro-section,
    .room-gallery-section,
    .room-features-section,
    .room-experience-section,
    .room-testimonial-section{
        padding:50px 20px 90px;
    }

    .room-intro-grid,
    .room-experience-grid{
        grid-template-columns:1fr;
    	gap:38px;
    }

    .room-intro-content h2,
    .room-experience-content h2{
        font-size:2.5rem;
    }
	
	.room-intro-content p{
    font-size:0.98rem;
    line-height:1.6;
}

    .room-gallery-grid{
        grid-template-columns:1fr;
        gap:20px;
    }
	
	.room-intro-image img{
    border-radius:24px;
	height:420px;
}

    .gallery-image.large{
        grid-row:auto;
		height:520px;
    }
	
	.gallery-stack{
        grid-template-rows:auto;
    }
	
	.gallery-image.small{
        height:320px;
    }

    .room-features-grid{
        grid-template-columns:1fr;
    }

    .feature-card{
        padding:34px 28px;
    }

    .room-testimonial-section .testimonial-card{
        padding:40px 30px;
    }

    .room-testimonial-section .testimonial-card p{
        font-size:1.5rem;
    }

    .room-cta-section{
        height:72vh;

        min-height:620px;

        margin:0 20px 90px;

        border-radius:28px;
    }

    .room-cta-content h2{
        font-size:2.8rem;
    }

    .room-cta-content p{
        font-size:1rem;
    }

}

@media(max-width:991px){

    .room-gallery-section{
        padding:70px 6% 90px;
    }

    .room-gallery-grid{
        grid-template-columns:1fr;

        gap:18px;
    }

    .gallery-image.large{
        height:420px;
    }

    .gallery-stack{
        grid-template-columns:1fr 1fr;

        gap:18px;
    }

    .gallery-image.small{
        height:220px;
    }

    .center-heading h2{
        font-size:2.3rem;
    }
}


@media(max-width:767px){

    .room-gallery-section{
        padding:60px 5% 80px;
    }

    .gallery-image.large{
        height:340px;

        border-radius:24px;
    }

    .gallery-stack{
        grid-template-columns:1fr;
    }

    .gallery-image.small{
        height:240px;

        border-radius:14px;
    }

    .center-heading h2{
        font-size:1.9rem;
    }

    .section-label{
        letter-spacing:3px;
    }
}

@media(max-width:991px){

.room-cta-box{
    flex-direction:column;

    padding:60px 34px;

    gap:40px;
}

.room-cta-content h2{
    font-size:2.8rem;
}

.room-cta-action{
    align-items:flex-start;
}

.room-cta-note{
    text-align:left;
}

}

@media(max-width:768px){

.mini-room-cta{
    padding:60px 20px;
}

.mini-room-cta-box{
    flex-direction:column;

    align-items:flex-start;

    padding:34px 26px;

    gap:26px;

    border-radius:24px;
}

.mini-room-cta-left h2{
    font-size:2rem;
}

.mini-room-cta-btn{
    width:100%;
}

}

@media(max-width:991px){

.compare-rooms-grid{
    grid-template-columns:1fr;

    gap:22px;
}

.compare-room-image img{
    height:240px;
}

}

@media(max-width:768px){
	
.faq-question {
    font-size: 1.1rem;
	font-weight: 500;}
	
.faq-answer p {
    font-size: 0.98rem;
}

.final-room-cta-section{
    padding:90px 20px;
}

.final-room-cta-box{
    padding:70px 28px;

    border-radius:28px;
}

.final-room-label{
    font-size:0.72rem;

    letter-spacing:3px;

    padding:10px 20px;
}

.final-room-cta-box h2{
    font-size:2.4rem;

    line-height:1.08;
}

.final-room-cta-box p{
    font-size:1rem;

    line-height:1.8;
}

.final-room-cta-btn{
    width:100%;

    padding:20px 28px;
}

}