/* ===== GLOBAL ===== */

body{
font-family:'Poppins',sans-serif;
background:#f5efe8;
color:#3b2a1a;
overflow-x:hidden;
}


/* ===== SECTION TITLE ===== */

.section-title{
text-align:center;
font-family:'Playfair Display',serif;
font-size:40px;
margin-bottom:50px;
color:#6b3f1d;
}


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

.hero-premium{
height:100vh;
background:
linear-gradient(rgba(40,30,30,.4),rgba(69,55,55,.6)),
url("../img/bg2.jpeg") center/cover no-repeat;

display:flex;
align-items:center;
justify-content:center;
text-align:center;
}

.hero-title{
font-family:'Playfair Display',serif;
font-size:110px;
color:#fed400;
}

.hero-subtitle{
font-size:28px;
color:#f3e2d5;
}

.hero-tagline{
opacity:.8;
margin-bottom:30px;
}

.btn-modern{
background:#8b5e3c;
color:white;
padding:14px 40px;
border-radius:40px;
text-decoration:none;
font-weight:500;
transition:.3s;
}

.btn-modern:hover{
background:#6b3f1d;
transform:translateY(-3px);
}


/* ===== FASILITAS ===== */

.fasilitas-section{
padding:80px 5%;
background:#fffaf5;
}

.fasilitas-card{
background:white;
padding:40px 20px;
border-radius:16px;
text-align:center;
transition:.3s;
box-shadow:0 8px 20px rgba(0,0,0,.08);
}

.fasilitas-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.fasilitas-card .icon{
font-size:40px;
margin-bottom:10px;
}


/* ===== MENU ===== */

.menu-section{
padding:80px 5%;
background:#f5efe8;
}

.menu-card{
min-width:260px;
background:white;
border-radius:16px;
overflow:hidden;
transition:.3s;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.menu-card:hover{
transform:translateY(-6px);
box-shadow:0 18px 35px rgba(0,0,0,.12);
}

.menu-card img{
width:100%;
height:200px;
object-fit:cover;
}

.menu-info{
padding:18px;
}

.menu-kategori{
font-size:12px;
background:#d4a373;
color:white;
padding:4px 10px;
border-radius:20px;
}

.menu-info h3{
margin:10px 0;
}

.menu-info p{
font-size:13px;
color:#6b6b6b;
}

.menu-price{
margin-top:10px;
font-size:18px;
font-weight:600;
color:#8b5e3c;
}


/* ===== TEMPAT ===== */

.tempat-section{
padding:80px 5%;
background:#fffaf5;
}

.tempat-card{
min-width:280px;
border-radius:16px;
overflow:hidden;
background:white;
box-shadow:0 10px 25px rgba(0,0,0,.08);
transition:.3s;
}

.tempat-card:hover{
transform:scale(1.03);
}

.tempat-card img{
width:100%;
height:220px;
object-fit:cover;
}

.tempat-info{
padding:18px;
}


/* ===== BLOG ===== */

.blog-section{
padding:80px 5%;
background:#f5efe8;
}

.blog-section .row{
justify-content:center;
gap:20px;
}

.blog-card{
max-width:240px;
background:white;
border-radius:16px;
overflow:hidden;
transition:.3s;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}

.blog-card:hover{
transform:translateY(-6px);
}

.blog-card img{
width:100%;
height:160px;
object-fit:cover;
}

.blog-info{
padding:18px;
}

.blog-info p{
font-size:10px;
color:#6b6b6b;
}

.btn-blog{
display:inline-block;
margin-top:10px;
background:#8b5e3c;
padding:6px 16px;
border-radius:30px;
color:white;
text-decoration:none;
font-size:13px;
}

.btn-blog:hover{
background:#6b3f1d;
}


/* ===== CTA ===== */

.cta-section{
padding:120px 20px;
text-align:center;

background:
linear-gradient(rgba(255,255,255,.6),rgba(255,255,255,.6)),
url("../img/toko1.jpeg") center/cover;
}

.cta-section h2{
font-size:36px;
margin-bottom:25px;
font-family:'Playfair Display',serif;
color:#6b3f1d;
}

.btn-cta{
background:#6b3f1d;
color:white;
padding:14px 40px;
border-radius:40px;
text-decoration:none;
font-weight:600;
}


/* ===== RESPONSIVE ===== */

/* HP */
@media(max-width:576px){

.hero-title{
font-size:42px;
}

.hero-subtitle{
font-size:18px;
}

.section-title{
font-size:24px;
margin-bottom:30px;
}

.menu-card,
.blog-card,
.tempat-card{
max-width:100%;
margin:auto;
}

.menu-card img,
.blog-card img,
.tempat-card img{
height:160px;
}

.fasilitas-card{
padding:25px 15px;
}

.cta-section h2{
font-size:24px;
}

.btn-modern,
.btn-cta{
padding:10px 25px;
font-size:14px;
}

}


/* TABLET */
@media(min-width:577px) and (max-width:991px){

.hero-title{
font-size:70px;
}

.hero-subtitle{
font-size:22px;
}

.section-title{
font-size:32px;
}

.blog-card{
max-width:220px;
}

.blog-card img{
height:150px;
}

}


/* LAPTOP */
@media(min-width:992px){

.blog-card{
max-width:240px;
}

.blog-card img{
height:160px;
}

}