@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500;1,600&display=swap');
:root{--cream:#f2eadb;--dark:#17130f;--brown:#4b2e1f;--accent:#c9945b;--line:#d4c7b5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--dark);font-family:'DM Sans',sans-serif;line-height:1.6}.navbar{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;position:relative;z-index:10;background:var(--cream);border-bottom:1px solid var(--line)}.brand{font-weight:700;letter-spacing:2px;color:var(--dark);text-decoration:none;font-size:19px}.brand span{font-weight:400}.navbar nav{display:flex;gap:28px}.navbar nav a{color:var(--dark);text-decoration:none;font-size:12px;text-transform:uppercase;letter-spacing:1px;padding:8px 0}.navbar nav a.active,.navbar nav a:hover{border-bottom:1px solid var(--dark)}.menu{display:none;background:none;border:0;font-size:25px}.hero{height:calc(100vh - 82px);min-height:600px;background:linear-gradient(90deg,rgba(15,11,8,.78),rgba(15,11,8,.15)),url('../images/cappucino.jpg') center/cover;display:flex;align-items:center;padding:0 9%;color:#fff}.hero-overlay{max-width:700px}.eyebrow{font-size:11px;letter-spacing:3px;font-weight:700;margin:0 0 18px}.hero h1{font-size:clamp(70px,13vw,180px);line-height:.78;margin:0 0 35px;letter-spacing:-7px}.hero h1 em,.page-head em,h2 em{font-family:'Playfair Display',serif;font-weight:500}.hero p:not(.eyebrow){font-size:19px;margin-bottom:30px}.btn{display:inline-block;border:1px solid currentColor;padding:13px 20px;color:inherit;background:transparent;text-decoration:none;font-size:11px;letter-spacing:1.5px;font-weight:700;cursor:pointer}.btn:hover{background:var(--dark);color:#fff}.intro{padding:110px 9%;display:grid;grid-template-columns:1.1fr .9fr;gap:10%;align-items:end}.intro h2{font-size:clamp(42px,6vw,76px);line-height:1;margin:0}.intro>p{font-size:17px;max-width:500px}.cards{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin:0 9% 100px}.cards article{padding:40px 25px 25px 0;border-right:1px solid var(--line)}.cards article+article{padding-left:25px}.cards span{font-size:12px;color:#8d745d}.cards h3{font-size:27px;margin:15px 0 5px}.page{padding:90px 9%;min-height:calc(100vh - 150px)}.page-head{margin-bottom:90px}.page-head h1{font-size:clamp(55px,8vw,105px);line-height:.92;margin:0;letter-spacing:-3px}.split{display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.photo{min-height:520px;background:center/cover}.photo-story{background-image:url('../images/gallery/story.jpg'),linear-gradient(135deg,#765238,#20150f)}.split h2{font-size:45px;line-height:1.1}.split p{max-width:540px}.products{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.product{border-top:1px solid var(--line);padding-top:15px}.product-img{height:380px;background:center/cover;margin-bottom:22px}.p1{background-image:url('../images/product/kota-blend.jpg'),linear-gradient(135deg,#7a5137,#24150d)}.p2{background-image:url('../images/product/jawa.jpg'),linear-gradient(135deg,#9a714e,#332217)}.p3{background-image:url('../images/product/sumatra.jpg'),linear-gradient(135deg,#4f3929,#15100c)}.product small{font-size:10px;letter-spacing:2px}.product h2{margin:8px 0 3px;font-family:'Playfair Display',serif;font-size:32px}.product p{margin:0 0 15px;color:#6b5b4d}.product b{font-size:14px}.timeline{border-top:1px solid var(--line)}.timeline>div{display:grid;grid-template-columns:80px 1fr 1.3fr;gap:30px;padding:35px 0;border-bottom:1px solid var(--line);align-items:center}.timeline span{font-size:12px}.timeline h2{font-family:'Playfair Display',serif;font-size:42px;margin:0}.timeline p{margin:0;max-width:550px}.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:250px;gap:15px}.g{background-size:cover;background-position:center;filter:saturate(.8)}.g1{grid-row:span 2;background-image:url('../images/gallery/01.jpg'),linear-gradient(135deg,#5b3d29,#20150e)}.g2{background-image:url('../images/gallery/02.jpg'),linear-gradient(135deg,#947052,#322217)}.g3{background-image:url('../images/gallery/03.jpg'),linear-gradient(135deg,#62442f,#21140d)}.g4{background-image:url('../images/gallery/04.jpg'),linear-gradient(135deg,#b08b63,#3b291c)}.g5{background-image:url('../images/gallery/05.jpg'),linear-gradient(135deg,#4d3628,#17110d)}.g6{grid-column:span 2;background-image:url('../images/gallery/06.jpg'),linear-gradient(135deg,#816044,#241811)}.video-wrap{max-width:1000px}.video-wrap video{width:100%;display:block;background:#19130f}.video-note{font-size:13px;color:#6b5b4d}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:10%;max-width:1000px}.contact-grid h2{font-family:'Playfair Display',serif;font-size:48px}.contact-grid p{margin:25px 0}.contact-grid form{display:flex;flex-direction:column;gap:20px}.contact-grid label{font-size:11px;text-transform:uppercase;letter-spacing:1px}.contact-grid input,.contact-grid textarea{width:100%;margin-top:8px;padding:14px;background:transparent;border:1px solid var(--line);font:inherit;resize:vertical}.contact-grid form .btn{color:var(--dark);align-self:flex-start}footer{padding:30px 9%;border-top:1px solid var(--line);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:#6b5b4d}@media(max-width:800px){.navbar{height:70px}.navbar nav{display:none;position:absolute;top:70px;left:0;right:0;background:var(--cream);padding:20px 7%;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}.navbar nav.show{display:flex}.menu{display:block}.hero{height:calc(100vh - 70px);padding:0 7%}.intro,.split,.contact-grid{grid-template-columns:1fr}.intro{gap:40px;padding:80px 7%}.cards{grid-template-columns:1fr;margin:0 7% 70px}.cards article,.cards article+article{border-right:0;border-bottom:1px solid var(--line);padding:30px 0}.page{padding:70px 7%}.page-head{margin-bottom:55px}.products{grid-template-columns:1fr}.product-img{height:430px}.timeline>div{grid-template-columns:50px 1fr;gap:15px}.timeline p{grid-column:2}.gallery{grid-template-columns:1fr 1fr;grid-auto-rows:190px}.g1{grid-row:span 1}.g6{grid-column:span 1}.split .photo{min-height:380px}.hero h1{letter-spacing:-4px}}

/* Tugas 3 */
.slideshow-section{padding:20px 9% 110px}.section-title{margin-bottom:35px}.section-title h2{font-size:clamp(38px,5vw,65px);line-height:1;margin:0}.slideshow{position:relative;max-width:1150px;height:min(68vw,650px);min-height:380px;overflow:hidden;background:#241811}.slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}.slide.active{opacity:1}.slide img{width:100%;height:100%;object-fit:cover;display:block}.slide:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent 45%)}.slide-caption{position:absolute;left:30px;bottom:25px;color:#fff;z-index:2;font-size:12px;letter-spacing:2px;text-transform:uppercase}.slide-btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:48px;height:48px;border:1px solid rgba(255,255,255,.65);background:rgba(0,0,0,.25);color:#fff;font-size:32px;line-height:1;cursor:pointer}.slide-btn:hover{background:rgba(0,0,0,.55)}.slide-btn.prev{left:20px}.slide-btn.next{right:20px}.slide-dots{position:absolute;z-index:3;right:25px;bottom:27px;display:flex;gap:8px}.dot{width:9px;height:9px;border-radius:50%;border:1px solid #fff;background:transparent;cursor:pointer;padding:0}.dot.active{background:#fff}.visitor-section{margin:0 9% 100px;padding:55px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:30px}.visitor-section h2{font-size:clamp(38px,5vw,65px);line-height:1;margin:0 0 15px}.visitor-number{min-width:190px;text-align:center}.visitor-number span{display:block;font-family:'Playfair Display',serif;font-size:90px;line-height:.9}.visitor-number small{font-size:10px;letter-spacing:3px}.music-player{position:fixed;right:22px;bottom:22px;z-index:50;display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;background:rgba(23,19,15,.94);color:#fff;box-shadow:0 8px 25px rgba(0,0,0,.2);border-radius:30px}.music-player button{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;cursor:pointer;font-size:17px}.music-player strong,.music-player span{display:block;font-size:9px;letter-spacing:1.5px}.music-player span{opacity:.7;margin-top:2px}.help-box{margin-top:40px;padding:25px;border:1px solid var(--line);background:rgba(255,255,255,.16)}.help-box h3{font-family:'Playfair Display',serif;font-size:30px;margin:0 0 8px}.help-box p{margin:8px 0 18px}.whatsapp-btn{color:var(--dark);margin:8px 0}.work-hours{font-size:12px}.notice{margin-top:20px;padding:14px 16px;border-left:3px solid var(--brown);font-size:13px}.notice.success{background:rgba(83,120,75,.12)}.notice.error{background:rgba(150,60,40,.10)}.messages-section{margin-top:100px;border-top:1px solid var(--line);padding-top:60px}.message-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.message-card{padding:22px;border:1px solid var(--line);background:rgba(255,255,255,.15)}.message-meta{display:flex;justify-content:space-between;gap:20px;border-bottom:1px solid var(--line);padding-bottom:12px}.message-meta span,.message-card small{font-size:10px;color:#786958}.message-card p{font-size:14px}.empty-message{color:#786958}
@media(max-width:800px){.slideshow-section{padding:0 7% 75px}.slideshow{min-height:320px}.visitor-section{margin:0 7% 70px;flex-direction:column;align-items:flex-start}.visitor-number{align-self:center}.music-player{right:12px;bottom:12px}.message-list{grid-template-columns:1fr}.help-box{margin-top:25px}}