@charset "utf-8";

* { box-sizing: border-box; margin: 0px; padding: 0px; }

html { scroll-behavior: smooth; }

body { font-family: "DM Sans", sans-serif; background: rgb(242, 238, 229); color: rgb(37, 35, 31); line-height: 1.65; }

a { text-decoration: none; color: inherit; }

.header { height: 78px; position: fixed; z-index: 20; inset: 0px 0px auto; display: flex; align-items: center; justify-content: space-between; padding: 0px 5vw; background: rgba(242, 238, 229, 0.92); backdrop-filter: blur(14px); border-bottom: 1px solid rgb(221, 214, 201); }

.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: 0.13em; font-size: 13px; }

.logo span { font-family: "Playfair Display", serif; font-size: 27px; letter-spacing: -0.05em; }

.logo small { font-size: 8px; display: block; letter-spacing: 0.22em; }

.header nav { display: flex; align-items: center; gap: 26px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; }

.header nav a { opacity: 0.58; }

.header nav a:hover, .header nav a.active { opacity: 1; }

.contact-link { border: 1px solid rgb(37, 35, 31); padding: 10px 14px; opacity: 1 !important; }

.menu-btn { display: none; border: 0px; background: none; font-size: 24px; }

.hero { min-height: 100vh; position: relative; color: rgb(255, 255, 255); display: flex; align-items: center; padding: 120px 9vw; overflow: hidden; }

.hero-bg { position: absolute; inset: 0px; background: linear-gradient(90deg, rgba(20, 18, 15, 0.82), rgba(20, 18, 15, 0.24)), url("https://images.unsplash.com/photo-1495474472287-4d71bcdd2085?auto=format&fit=crop&w=2200&q=85") center center / cover; }

.hero-content { position: relative; max-width: 750px; }

.eyebrow { font-size: 10px; letter-spacing: 0.24em; font-weight: 800; margin-bottom: 18px; }

.hero h1, .page-hero h1 { font: 600 clamp(56px, 8vw, 105px) / 0.98 "Playfair Display", serif; }

.hero h1 em, .page-hero h1 em, h2 em { font-style: italic; }

.lead { max-width: 560px; margin: 25px 0px; font-size: 17px; color: rgb(230, 224, 213); }

.actions { display: flex; gap: 12px; }

.btn { display: inline-block; padding: 13px 21px; text-transform: uppercase; letter-spacing: 0.12em; font-size: 10px; font-weight: 800; border: 1px solid transparent; }

.btn.dark { background: rgb(37, 35, 31); color: rgb(245, 240, 231); }

.hero .btn.dark { background: rgb(245, 240, 231); color: rgb(37, 35, 31); }

.btn.line { border-color: rgb(221, 214, 202); color: rgb(255, 255, 255); }

.btn.light { background: rgb(242, 238, 229); color: rgb(37, 35, 31); }

.hero-badge { position: absolute; right: 5vw; bottom: 45px; border-left: 1px solid rgba(255, 255, 255, 0.5); padding-left: 14px; font-size: 9px; letter-spacing: 0.14em; }

.hero-badge strong { font-size: 11px; }

.section { padding: 120px 9vw; }

.label { font-size: 10px; letter-spacing: 0.2em; font-weight: 800; color: rgb(129, 120, 107); margin-bottom: 34px; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 9vw; }

.section h2 { font: 600 clamp(42px, 5.2vw, 72px) / 1.05 "Playfair Display", serif; }

.split > div:last-child p { color: rgb(111, 104, 94); font-size: 16px; max-width: 600px; }

.text-link { display: inline-block; margin-top: 25px; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; }

.visual { min-height: 68vh; background: linear-gradient(90deg, rgba(24, 20, 16, 0.72), rgba(24, 20, 16, 0.12)), url("https://images.unsplash.com/photo-1445116572660-236099ec97a0?auto=format&fit=crop&w=2200&q=85") center center / cover; display: flex; align-items: end; padding: 8vw; color: rgb(255, 255, 255); }

.visual h2 { font: 600 clamp(48px, 6vw, 82px) / 1 "Playfair Display", serif; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.cards article { min-height: 285px; background: rgb(231, 224, 212); padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }

.cards .dark-card { background: rgb(37, 35, 31); color: rgb(244, 238, 228); }

.cards span { font-size: 10px; letter-spacing: 0.18em; }

.cards h3 { font: 600 34px "Playfair Display", serif; }

.cards p { color: rgb(121, 113, 101); }

.dark-card p { color: rgb(207, 199, 185); }

.quote { padding: 120px 9vw; background: rgb(232, 225, 212); text-align: center; }

.quote > p { font: 80px / 0.5 "Playfair Display", serif; }

.quote blockquote { font: 600 clamp(38px, 5vw, 68px) / 1.08 "Playfair Display", serif; margin: 25px auto; }

.quote small { font-size: 9px; letter-spacing: 0.2em; font-weight: 800; }

.cta { padding: 100px 9vw; background: rgb(37, 35, 31); color: rgb(244, 238, 228); display: flex; justify-content: space-between; align-items: center; }

.cta h2 { font: 600 clamp(48px, 6vw, 84px) / 1 "Playfair Display", serif; }

.footer { padding: 48px 5vw; border-top: 1px solid rgb(214, 207, 194); display: grid; grid-template-columns: 1fr auto; gap: 20px; }

.footer > div { display: flex; gap: 24px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }

.footer p { grid-column: 1 / -1; color: rgb(138, 129, 117); font-size: 10px; }

.page-hero { min-height: 70vh; padding: 150px 9vw 90px; display: flex; align-items: end; color: rgb(255, 255, 255); background-position: center center; background-size: cover; }

.story-bg { background-image: linear-gradient(90deg, rgba(20, 18, 15, 0.78), rgba(20, 18, 15, 0.2)), url("https://images.unsplash.com/photo-1501339847302-ac426a4a7cbb?auto=format&fit=crop&w=2200&q=85"); }

.menu-bg { background-image: linear-gradient(90deg, rgba(20, 18, 15, 0.78), rgba(20, 18, 15, 0.2)), url("https://images.unsplash.com/photo-1498804103079-a6351b050096?auto=format&fit=crop&w=2200&q=85"); }

.process-bg { background-image: linear-gradient(90deg, rgba(20, 18, 15, 0.78), rgba(20, 18, 15, 0.2)), url("https://images.unsplash.com/photo-1512568400610-62da28bc8a13?auto=format&fit=crop&w=2200&q=85"); }

.gallery-bg { background-image: linear-gradient(90deg, rgba(20, 18, 15, 0.78), rgba(20, 18, 15, 0.2)), url("https://images.unsplash.com/photo-1511081692775-05d0f180a065?auto=format&fit=crop&w=2200&q=85"); }

.video-bg { background-image: linear-gradient(90deg, rgba(20, 18, 15, 0.78), rgba(20, 18, 15, 0.2)), url("https://images.unsplash.com/photo-1453614512568-c4024d13c247?auto=format&fit=crop&w=2200&q=85"); }

.contact-bg { background-image: linear-gradient(90deg, rgba(20, 18, 15, 0.78), rgba(20, 18, 15, 0.2)), url("https://images.unsplash.com/photo-1493857671505-72967e2e2760?auto=format&fit=crop&w=2200&q=85"); }

.mt { margin-top: 20px; }

.values { padding-top: 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.values article { border-top: 1px solid rgb(201, 192, 178); padding: 25px 0px; }

.values h3 { font: 600 35px "Playfair Display", serif; margin: 35px 0px 7px; }

.values p { color: rgb(119, 112, 102); }

.menu-list { border-top: 1px solid rgb(201, 192, 178); }

.menu-list article { display: flex; justify-content: space-between; gap: 20px; padding: 25px 0px; border-bottom: 1px solid rgb(201, 192, 178); }

.menu-list small { font-size: 9px; letter-spacing: 0.17em; color: rgb(131, 122, 109); }

.menu-list h3 { font: 600 30px "Playfair Display", serif; }

.menu-list p { color: rgb(119, 112, 102); }

.menu-list b { font-size: 11px; white-space: nowrap; }

.second { margin-top: 85px; }

.note { margin-top: 25px; font-size: 12px; color: rgb(129, 120, 108); }

.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }

.process-grid article { min-height: 430px; background: rgb(231, 224, 212); padding: 0px; overflow: hidden; }

.process-image { height: 210px; background-position: center center; background-size: cover; position: relative; }

.process-image::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(rgba(20, 18, 15, 0.03), rgba(20, 18, 15, 0.18)); }

.process-copy { padding: 24px 28px 28px; }

.process-grid span { font-size: 10px; letter-spacing: 0.18em; color: rgb(129, 120, 107); }

.process-grid h3 { font: 600 35px "Playfair Display", serif; margin-top: 24px; }

.process-grid p { color: rgb(119, 112, 102); margin-top: 10px; font-size: 13px; }

.dark-panel { padding: 120px 9vw; background: rgb(37, 35, 31); color: rgb(244, 238, 228); }

.dark-panel h2 { font: 600 clamp(48px, 6vw, 80px) / 1 "Playfair Display", serif; }

.gallery-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 180px; gap: 14px; }

.g { position: relative; background-position: center center; background-size: cover; color: rgb(255, 255, 255); display: flex; align-items: end; padding: 18px; overflow: hidden; }

.g::after { content: ""; position: absolute; inset: 0px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.55)); }

.g span { position: relative; z-index: 1; font-size: 10px; text-transform: uppercase; letter-spacing: 0.12em; }

.g1 { grid-area: span 2 / span 4; background-image: url("../images/gallery/xo1.jpeg"); }

.g2 { grid-column: span 4; background-image: url("../images/gallery/xo2new.jpeg"); }

.g3 { grid-column: span 4; background-image: url("../images/gallery/xo3.jpeg"); }

.g4 { grid-column: span 2; background-image: url("../images/gallery/xo4.jpeg"); }

.g5 { grid-column: span 4; background-image: url("../images/gallery/xo5.jpeg"); }

.g6 { grid-column: span 2; background-image: url("../images/gallery/xo6.jpeg"); }

.video-box { padding: 12px; background: rgb(28, 26, 23); }

.video-box video { width: 100%; display: block; max-height: 680px; }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8vw; align-items: center; }

.details { border-top: 1px solid rgb(201, 192, 178); margin: 30px 0px; }

.details div { padding: 17px 0px; border-bottom: 1px solid rgb(201, 192, 178); }

.details small { font-size: 9px; letter-spacing: 0.18em; color: rgb(129, 120, 108); }

.details p { color: rgb(111, 104, 94); }

.map { height: 520px; position: relative; overflow: hidden; background: rgb(220, 212, 198); display: grid; place-items: center; }

.map-lines { position: absolute; inset: -20%; background-image: linear-gradient(rgb(199, 190, 174) 1px, transparent 1px), linear-gradient(90deg, rgb(199, 190, 174) 1px, transparent 1px); background-size: 55px 55px; transform: rotate(-7deg) scale(1.2); }

.pin { position: relative; font-size: 60px; }

.map-tag { position: absolute; left: 20px; bottom: 20px; background: rgb(37, 35, 31); color: rgb(244, 238, 228); padding: 12px 15px; font-size: 10px; letter-spacing: 0.12em; }

.map-tag small { font-size: 7px; letter-spacing: 0.2em; }

@media (max-width: 800px) {
  .header { height: 70px; }
  .menu-btn { display: block; }
  .header nav { position: absolute; display: none; top: 70px; left: 0px; right: 0px; padding: 24px; background: rgb(242, 238, 229); flex-direction: column; align-items: flex-start; border-bottom: 1px solid rgb(221, 214, 201); }
  .header nav.open { display: flex; }
  .hero { padding: 110px 7vw; }
  .hero h1, .page-hero h1 { font-size: 55px; }
  .hero-badge { display: none; }
  .section, .page-hero { padding-left: 7vw; padding-right: 7vw; }
  .split, .contact-grid { grid-template-columns: 1fr; gap: 38px; }
  .cards, .values, .process-grid { grid-template-columns: 1fr; }
  .cta { display: block; padding: 80px 7vw; }
  .cta .btn { margin-top: 30px; }
  .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 180px; }
  .g1, .g2, .g3, .g4, .g5, .g6 { grid-area: span 1 / span 1; }
  .g1 { grid-column: span 2; }
  .footer { grid-template-columns: 1fr; }
  .footer > div { flex-wrap: wrap; }
  .footer p { grid-column: auto; }
}

.star { font-size: 0.7em; margin-left: 4px; }

.covered-item { background: rgb(235, 228, 216); }

.covered-item h3 { font-size: 22px; }

.menu-list article p { font-size: 13px; }

.menu-list article h3 { margin-bottom: 2px; }

.instagram-btn { margin-left: 10px; background: transparent !important; color: rgb(37, 35, 31) !important; border-color: rgb(37, 35, 31) !important; }

@media (max-width: 800px) {
  .instagram-btn { margin-left: 0px; margin-top: 10px; }
}
/* ===== TUGAS TAMBAHAN ===== */
.slideshow-section{background:#f5f0e8;padding:80px 6vw}
.slideshow-wrap{max-width:1100px;margin:0 auto;position:relative;overflow:hidden;border-radius:18px;box-shadow:0 18px 45px rgba(0,0,0,.15)}
.slide{display:none;position:relative}
.slide.active{display:block}
.slide img{display:block;width:100%;height:520px;object-fit:cover}
.slide-caption{position:absolute;left:0;right:0;bottom:0;padding:25px 30px;color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.75));font-size:18px}
.slide-btn{position:absolute;top:50%;transform:translateY(-50%);border:0;border-radius:50%;width:44px;height:44px;background:rgba(255,255,255,.9);color:#2c211b;font-size:25px;cursor:pointer;z-index:3}
.slide-prev{left:18px}.slide-next{right:18px}
.slide-dots{text-align:center;padding:16px;background:#fff}
.dot{display:inline-block;width:10px;height:10px;margin:0 5px;border-radius:50%;background:#c8b9aa;cursor:pointer}
.dot.active{background:#5a4030}
.visitor-box{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border:1px solid rgba(255,255,255,.25);border-radius:30px;margin-top:16px;font-size:14px}
.contact-section{padding:80px 6vw;background:#fff}
.contact-grid{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.3fr;gap:50px}
.contact-form{display:grid;gap:14px}
.contact-form label{font-weight:600;font-size:14px}
.contact-form input,.contact-form textarea{width:100%;padding:14px 15px;border:1px solid #d7cec5;border-radius:8px;font:inherit;box-sizing:border-box}
.contact-form textarea{min-height:140px;resize:vertical}
.contact-form button{border:0;cursor:pointer;padding:14px 20px;border-radius:8px;background:#2c211b;color:#fff;font-weight:700}
.alert{padding:13px 15px;border-radius:8px;background:#edf6ee;margin-bottom:15px}
.message-list{display:grid;gap:15px;margin-top:20px}
.message-card{padding:18px;border:1px solid #e2d9d0;border-radius:10px;background:#faf8f5}
.message-card .meta{font-size:13px;color:#75695f;margin-bottom:8px}
.message-card p{margin:0;line-height:1.6;white-space:pre-wrap}
.whatsapp-box{margin-top:28px;padding:22px;border-radius:12px;background:#2c211b;color:#fff}
.whatsapp-box a{color:#fff;font-weight:700}
.music-box{position:fixed;right:18px;bottom:18px;z-index:50;display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(44,33,27,.94);border-radius:30px;box-shadow:0 5px 20px rgba(0,0,0,.2)}
.music-box button{border:0;background:#fff;color:#2c211b;border-radius:20px;padding:8px 13px;cursor:pointer;font-weight:600}
@media(max-width:800px){
 .contact-grid{grid-template-columns:1fr}
 .slide img{height:350px}
 .slideshow-section,.contact-section{padding:55px 5vw}
}