@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&family=Inter:wght@400;500;600&display=swap');
:root{--cream:#f8e8ed;--paper:#fff8fa;--ink:#4a1828;--muted:#8c6570;--line:#e8cbd3;--accent:#8f2949;--rose:#e7b7c5;--maroon:#6f1d38}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);font-family:Inter,Arial,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}.header{height:82px;padding:0 5vw;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(247,244,237,.94);backdrop-filter:blur(12px);position:relative;z-index:10}.brand{font-weight:600;letter-spacing:.12em;font-size:16px;line-height:1}.brand small{display:block;font:10px 'DM Mono',monospace;letter-spacing:.4em;margin-top:7px;color:var(--muted)}.nav{display:flex;gap:28px;font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.08em}.nav a{padding:30px 0;opacity:.65;border-bottom:1px solid transparent}.nav a:hover,.nav a.active{opacity:1;border-color:var(--ink)}.menu-toggle{display:none;background:none;border:0;font-size:24px}.hero{min-height:calc(100vh - 82px);display:flex;align-items:flex-end;padding:8vw;position:relative;background:linear-gradient(90deg,rgba(15,13,10,.7),rgba(15,13,10,.08)),url('../images/hero.jpg') center/cover;color:#fff}.hero-content{max-width:720px;position:relative;z-index:1}.eyebrow{font:11px 'DM Mono',monospace;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:20px}.hero .eyebrow{color:#ddd7cc}.hero h1,.page-title h1,.contact h1{font:500 clamp(54px,8vw,112px)/.93 'Playfair Display',serif;letter-spacing:-.04em}.hero h1 em,.page-title h1 em,.contact h1 em,h2 em{font-style:italic}.hero-content>p:not(.eyebrow){font-size:16px;max-width:540px;margin:26px 0 34px;color:#eee}.actions{display:flex;align-items:center;gap:28px}.btn{display:inline-block;padding:14px 22px;background:var(--ink);color:#fff;border:1px solid var(--ink);font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}.hero .btn{background:#fff;color:#171612;border-color:#fff}.text-link{font:11px 'DM Mono',monospace;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid currentColor;padding-bottom:5px}.dark{color:var(--ink)}.scroll{position:absolute;right:6vw;bottom:35px;font:10px 'DM Mono',monospace;letter-spacing:.15em;transform:rotate(90deg)}.section{padding:110px 8vw}.intro{display:grid;grid-template-columns:1.2fr 1fr;gap:10vw;align-items:end}.intro h2,.story-layout h2,.split h2{font:500 clamp(38px,5vw,70px)/1.05 'Playfair Display',serif;letter-spacing:-.03em}.intro-copy{max-width:470px}.intro-copy p,.story-layout p,.split>p{color:var(--muted);margin-bottom:30px}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);min-height:480px}.feature-card{padding:42px;display:flex;align-items:flex-end;background-size:cover;background-position:center;position:relative;color:#fff}.feature-card:before{content:"";position:absolute;inset:0;background:linear-gradient(transparent,rgba(0,0,0,.75))}.feature-card>div{position:relative}.feature-card span{font:11px 'DM Mono';opacity:.7}.feature-card h3{font:500 34px 'Playfair Display';margin:12px 0 5px}.feature-card p{font-size:13px;opacity:.8}.coffee-card{background-image:url('../images/gallery/coffee.jpg');background-color:#5b4535}.process-card{background-image:url('../images/gallery/process.jpg');background-color:#7b6753}.ritual-card{background-image:url('../images/gallery/ritual.jpg');background-color:#2f2922}.quote{background:var(--cream);text-align:center;padding:130px 8vw}.quote p{font:italic clamp(30px,4vw,55px) 'Playfair Display';max-width:900px;margin:auto}.footer{padding:35px 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font:11px 'DM Mono',monospace;text-transform:uppercase}.footer strong{display:block;letter-spacing:.1em}.footer span{display:block;color:var(--muted);margin-top:7px}.footer>a{align-self:center;border-bottom:1px solid}.page-hero{min-height:72vh;padding:8vw;display:flex;align-items:flex-end;background:linear-gradient(90deg,rgba(20,18,14,.68),rgba(20,18,14,.05)),url('../images/story.jpg') center/cover;color:white}.page-hero .eyebrow{color:#ddd7cc}.story-layout{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.story-layout>div:last-child{max-width:550px}.story-layout p{font-size:17px}.dark-section{background:var(--ink);color:white}.dark-section .eyebrow{color:#aaa}.split{display:grid;grid-template-columns:1fr 1fr;gap:10vw}.split>p{max-width:500px}.page-title{padding-bottom:70px}.lead{font-size:17px;color:var(--muted);max-width:550px;margin-top:28px}.products{padding-top:30px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px}.product{border-top:1px solid var(--line);padding-top:18px}.product-img{height:390px;margin-bottom:25px;background-size:cover;background-position:center;background-color:#d5cec1}.p1{background-image:url('../images/product/midnight-bloom.jpg')}.p2{background-image:url('../images/product/metro-house.jpg')}.p3{background-image:url('../images/product/daylight.jpg')}.product h2{font:500 34px 'Playfair Display';margin:6px 0}.product p:not(.eyebrow){color:var(--muted);font-size:13px;margin-bottom:15px}.product strong{font:12px 'DM Mono';letter-spacing:.08em}.timeline{padding-top:20px}.step{display:grid;grid-template-columns:120px 1fr;gap:50px;padding:42px 0;border-top:1px solid var(--line)}.step>span{font:12px 'DM Mono';color:var(--muted)}.step h2{font:500 42px 'Playfair Display';margin-bottom:8px}.step p{color:var(--muted);max-width:650px}.gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:18px;padding-top:20px}.gallery-item{min-height:330px;background:center/cover no-repeat;background-color:#d0c8bb}.g1{grid-column:span 7;background-image:url('../images/gallery/01.jpg')}.g2{grid-column:span 5;background-image:url('../images/gallery/02.jpg')}.g3{grid-column:span 4;background-image:url('../images/gallery/03.jpg')}.g4{grid-column:span 8;background-image:url('../images/gallery/04.jpg')}.g5{grid-column:span 8;background-image:url('../images/gallery/05.jpg')}.g6{grid-column:span 4;background-image:url('../images/gallery/06.jpg')}.video-wrap{padding-top:20px}.video-wrap video{width:100%;display:block;max-height:75vh;background:#16130f}.video-note{font:11px 'DM Mono';color:var(--muted);margin-top:15px}.contact{min-height:calc(100vh - 82px);display:grid;grid-template-columns:1fr 1fr;gap:10vw;align-items:center}.contact-info{display:flex;flex-direction:column;gap:18px}.contact-info>a{font:500 20px 'Playfair Display';border-bottom:1px solid var(--line);padding-bottom:14px}.contact-info>p{color:var(--muted)}form{margin-top:25px;display:grid;gap:12px}input,textarea{width:100%;border:1px solid var(--line);background:transparent;padding:14px;font:13px Inter;color:var(--ink);outline:none}input:focus,textarea:focus{border-color:var(--ink)}.form-message{font:11px 'DM Mono';color:var(--accent)!important}.reveal{opacity:0;transform:translateY(18px);transition:.7s ease}.reveal.visible{opacity:1;transform:none}@media(max-width:800px){.header{height:70px}.menu-toggle{display:block}.nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--paper);padding:15px 6vw 25px;flex-direction:column;gap:0;border-bottom:1px solid var(--line)}.nav.open{display:flex}.nav a{padding:13px 0}.hero{min-height:calc(100vh - 70px);padding:12vw 7vw}.scroll{display:none}.intro,.story-layout,.split,.contact{grid-template-columns:1fr;gap:45px}.section{padding:75px 7vw}.feature-grid,.products{grid-template-columns:1fr}.feature-card{min-height:390px}.product-img{height:420px}.page-hero{min-height:65vh;padding:10vw 7vw}.gallery{grid-template-columns:1fr 1fr;padding-top:10px}.gallery-item,.g1,.g2,.g3,.g4,.g5,.g6{grid-column:span 1;min-height:260px}.g1{grid-column:span 2}.g4{grid-column:span 2}.g5{grid-column:span 2}.step{grid-template-columns:55px 1fr;gap:15px}.step h2{font-size:34px}.footer{padding:28px 7vw;align-items:flex-end}.footer>a{display:none}.contact{min-height:auto;padding-top:100px;padding-bottom:100px}}

/* METROPOLE — Pastel Pink + Maroon Editorial Theme */
body{background:var(--paper)}
.header{background:rgba(255,248,250,.94);border-bottom-color:var(--line)}
.brand{color:var(--maroon)}
.brand small{color:var(--muted)}
.nav a.active,.nav a:hover{border-color:var(--maroon)}
.hero{background:linear-gradient(90deg,rgba(74,24,40,.78),rgba(111,29,56,.12)),url('../images/hero.jpg') center/cover}
.hero .btn{background:#fff3f6;color:var(--maroon);border-color:#fff3f6}
.btn{background:var(--maroon);border-color:var(--maroon)}
.eyebrow{color:#a06f7c}
.intro{background:linear-gradient(135deg,#fff8fa 0%,#f9e8ee 100%)}
.feature-grid{background:#f3dbe2}
.feature-card{box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.coffee-card{background-image:linear-gradient(180deg,rgba(111,29,56,.05),rgba(111,29,56,.15)),url('../images/gallery/coffee.jpg')}
.process-card{background-image:linear-gradient(180deg,rgba(143,41,73,.05),rgba(143,41,73,.18)),url('../images/gallery/process.jpg')}
.ritual-card{background-image:linear-gradient(180deg,rgba(74,24,40,.05),rgba(74,24,40,.18)),url('../images/gallery/ritual.jpg')}
.quote{background:#f4dbe3;color:var(--maroon)}
.page-hero{background:linear-gradient(90deg,rgba(74,24,40,.76),rgba(143,41,73,.08)),url('../images/story.jpg') center/cover}
.dark-section{background:var(--maroon)}
.product{background:#fffafb;border:1px solid var(--line);padding:18px;border-radius:2px}
.product-img{border-radius:1px}
.product{background:#fff;border:1px solid var(--line);padding:18px;border-radius:2px}
.product-img{border-radius:1px}
.product-img.p4{
    background-image:url('../images/product/range-espresso.jpg');
}
.product-img.p5{
    background-image:url('../images/product/mango-hawaian.jpg');
}
.product-img.p6{
    background-image:url('../images/product/biscuit-cream-cheese.jpg');
}

.step{border-top-color:var(--line)}
.step{border-top-color:var(--line)}
.gallery-item{border:1px solid #ead0d8}
.gallery-item{border:1px solid #ead0d8}
.gallery-item.g1{
    background-image:url('../images/gallery/01.jpg');
}

.gallery-item.g2{
    background-image:url('../images/gallery/02.jpg');
}

.gallery-item.g3{
    background-image:url('../images/gallery/03.jpg');
}

.gallery-item.g4{
    background-image:url('../images/gallery/04.jpg');

}

.gallery-item.g5{
    background-image:url('../images/gallery/05.jpg');
}

.gallery-item.g6{
    background-image:url('../images/gallery/06.jpg');
}

input,textarea{background:#fffafb;border-color:var(--line)}
input,textarea{background:#fffafb;border-color:var(--line)}
input:focus,textarea:focus{border-color:var(--maroon)}
.contact{background:radial-gradient(circle at 85% 20%,#f1cbd7 0,#fff8fa 30%,#fff8fa 65%)}
.contact-info>a:hover,.footer>a:hover{color:var(--accent)}
.footer{background:#4a1828;color:#fff;border-top-color:#6f3048}
.footer span{color:#e6bcc8}
.footer>a{color:#fff}


/* =========================
   BUKU TAMU METROPOLE
   ========================= */

.guestbook {
    margin-top: 30px;
}

.guestbook h2 {
    color: #4a1828;
    font-family: "Playfair Display", Georgia, serif;
    margin-bottom: 5px;
}

.guestbook-desc {
    color: #8c6570;
    font-size: 13px;
    margin-bottom: 20px;
}

.guestbook label {
    display: block;
    margin: 12px 0 6px;
    color: #4a1828;
    font-size: 13px;
}

.guestbook input,
.guestbook textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 13px;

    background: #fffafb;
    border: 1px solid #e8cbd3;
    color: #4a1828;

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

.guestbook input:focus,
.guestbook textarea:focus {
    outline: none;
    border-color: #7b1e3c;
}

.guestbook input::placeholder,
.guestbook textarea::placeholder {
    color: #9b7a84;
}

.guestbook .btn {
    width: 100%;
    margin-top: 15px;
    padding: 14px;

    background: #7b1e3c;
    color: white;
    border: none;

    text-transform: uppercase;
    letter-spacing: 1px;
    cursor: pointer;
}

.guestbook .btn:hover {
    background: #4a1828;
}


/* PESAN PENGUNJUNG */

.guest-title {
    margin-top: 45px;
    margin-bottom: 20px;

    color: #4a1828;
    font-family: "Playfair Display", Georgia, serif;
}

.guest-messages {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.guest-card {
    padding: 20px;

    background: #fffafb;
    border: 1px solid #e8cbd3;
    border-left: 3px solid #7b1e3c;
}

.guest-card strong {
    display: block;
    color: #7b1e3c;
    margin-bottom: 4px;
}

.guest-card small {
    display: block;
    color: #9b7a84;
    margin-bottom: 15px;
}

.guest-card p {
    color: #6f4a57;
    font-size: 13px;
    margin: 7px 0;
}

.guest-text {
    margin-top: 15px;
    padding: 13px;

    background: #f8e8ed;
    color: #4a1828;
}

.video-wrap {
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.video-wrap video {
    width: min(100%, 420px);
    aspect-ratio: 9 / 16;
    height: auto;
    display: block;
    object-fit: cover;
    background: #16130f;
}

.video-note {
    font: 11px 'DM Mono';
    color: var(--muted);
    margin-top: 15px;
    text-align: center;
}


/* FOOD MENU */

.product-img.f1 {
    background-image: url('../images/food/swedish-meatball.jpg');
}

.product-img.f2 {
    background-image: url('../images/food/chicken-with-cilantro-rice.jpg');
}

.product-img.f3 {
    background-image: url('../images/food/Creamy Lemon Fettuccuine.jpg');
}

.product-img.f4 {
    background-image: url('../images/food/Chicken Parmigiana.jpg');
}

.product-img.f5 {
    background-image: url('../images/food/Pizza Veggie.jpg');
}

.product-img.f6 {
    background-image: url('../images/food/De Boule Tiramisu.jpg');
}

.product-img.f7 {
    background-image: url('../images/food/Red Velvet Cake.jpg');
}

.product-img.f8 {
    background-image: url('../images/food/Calzone Pizza.jpg');
}
.product-img.f9 {
    background-image: url('../images/food/Aglio e Olio Spagehetti Beef.jpg');
}

/* FIX HERO SLIDESHOW */

.hero {
    min-height: calc(100vh - 82px) !important;
    display: flex !important;
    align-items: flex-end !important;
    padding: 8vw !important;
    position: relative !important;
    overflow: hidden !important;
    color: #fff !important;
}

.hero-slideshow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* POSISI JUDUL CONTACT */
.contact > div:first-child {
    align-self: start;
    padding-top: 20px;
}

.hero-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1s ease;
}

.hero-slide.active {
    opacity: 1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(
        90deg,
        rgba(74,24,40,.78),
        rgba(111,29,56,.12)
    );
}

.hero-content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 720px;
}

.hero .scroll {
    position: absolute;
    z-index: 2;
}

/* FIX HEADER */
.header {
    height: 82px !important;
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 0 5vw;
    position: relative !important;
    z-index: 9999 !important;
    background: rgba(255,248,250,.96) !important;
}

.brand {
    display: block !important;
    visibility: visible !important;
}

.nav {
    display: flex !important;
    visibility: visible !important;
}

.visitor-counter {
    font: 11px 'DM Mono', monospace;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e6bcc8;
}

.visitor-counter strong {
    color: #fff;
}

/* BACKGROUND MUSIC BUTTON */

.music-button {
    position: fixed;
    right: 25px;
    bottom: 25px;
    z-index: 9999;
    padding: 12px 16px;
    border: 1px solid #e8cbd3;
    background: #4a1828;
    color: #fff;
    font: 10px 'DM Mono', monospace;
    letter-spacing: .1em;
    cursor: pointer;
}

.music-button:hover {
    background: #6f1d38;
}

.wa-help {
    position: fixed;
    right: 25px;
    bottom: 85px;
    z-index: 9998;
    width: 300px;
    padding: 20px 22px;
    background: #4a1828;
    color: #fff;
    text-decoration: none;
    box-shadow: 0 8px 25px rgba(0,0,0,.18);
    border-left: 5px solid #e8cbd3;
}

.wa-help strong {
    display: block;
    font: 14px 'DM Mono', monospace;
    margin-bottom: 8px;
}

.wa-help span {
    display: block;
    font: 12px 'DM Mono', monospace;
}

.wa-help small {
    display: block;
    margin-top: 10px;
    font: 10px 'DM Mono', monospace;
    opacity: .8;
}

.wa-help:hover {
    transform: translateY(-3px);
}