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

body{
    font-family: Georgia, serif;
    background: #166f69;
}

/* HEADER */
header{
    height: 85px;
    background: #d85724;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 5%;
}

.logo{
    display: flex;
    align-items: center;
    gap: 15px;
}

.logo img{
    width: 60px;
}

.logo h2{
    font-family: TT-Ramillas-Trl-Variable-Roman, Georgia, serif;
    color: white;
    font-size: 27px;
}

nav{
    display: flex;
    gap: 40px;
}

nav a{
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

nav a:hover{
    color: #ffe08a;
}

/* BANNER */
.banner{
    width: 100%;
}

.banner img{
    width: 100%;
    height: 345px;
    object-fit: cover;
    object-position: center center;
}

/* MAIN SECTION */
.kontak{
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 60px 70px;
    color: white;
    gap: 60px;
}

/* KOLOM KIRI (INFO) */
.info{
    width: 32%;
}

.logo-bawah{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.logo-bawah img{
    width: 70px;
}

.logo-bawah h2{
    font-size: 28px;
}

.info p{
    font-family: "Book Antiqua", Palatino, serif;
    font-size: 17px;
    line-height: 28px;
    margin: 20px 0 30px;
}

.sosmed .item{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.sosmed img{
    width: 38px;
    height: 38px;
    object-fit: contain;
}

.sosmed span{
    font-size: 18px;
}

/* KOLOM TENGAH (CONTACT & ORDER APPS) */
.contact{
    width: 28%;
}

.contact h2{
    font-size: 36px;
    margin-bottom: 30px;
}

.contact .item{
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px;
}

.contact img{
    width: 40px;
    height: 40px;
}

.contact span{
    font-size: 18px;
}

.jam{
    margin-top: 35px;
}

.jam h3{
    font-family: "Book Antiqua", Palatino, serif;
    font-size: 31px;
    margin-bottom: 10px;
}

.jam p{
    font-family: "Book Antiqua", Palatino, serif;
    font-size: 18px;
}

/* TOMBOL GOFOOD & GRABFOOD (BARU) */
.apps-order {
    margin-top: 35px;
    display: flex;
    flex-direction: column; 
    gap: 15px;              
}

.btn-order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 15px;
    transition: 0.3s;
    width: max-content;      
}

.btn-gofood {
    background: #d85724;
}

.btn-gofood:hover {
    background: #ff7d44;
    transform: translateY(-3px);
}

.btn-grabfood {
    background: #c6f1d9;
    
}

.btn-grabfood:hover {
    background: #c6f1d9;
    transform: translateY(-3px);
}

.btn-order img {
    width: 155px;
    height: 45px;          
    object-fit: contain;
    display: block;
}

/* KOLOM KANAN (MAP) */
.map {
    width: 35%;
}

.map h2 {
    font-size: 42px;
    margin-bottom: 20px;
    border-bottom: 4px solid white;
    padding-bottom: 10px;
}

.map-link {
    display: block;
    overflow: hidden; 
    border: 4px solid white;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.map img {
    width: 100%;
    display: block;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.map-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
}

.map-link:hover img {
    transform: scale(1.05);
    cursor: pointer;
}

.map p {
    font-family: "Book Antiqua", Palatino, serif;
    margin-top: 15px;
    font-size: 16px;
    line-height: 25px;
}

/* FOOTER */
footer{
    color: white;
    text-align: center;
    padding: 15px;
}

.footer-pattern{
    width: 100%;
    display: block;
}

.item a{
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
    color: white;
    font-size: 18px;
    font-weight: bold;
}

.item a:hover{
    color: #ffe08a;
}

/* ANIMASI */
@keyframes fadeUpContact {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
 
.kontak, 
footer, 
.footer-pattern {
    animation: fadeUpContact 1s ease-out forwards;
}