/* IMPORT */
@import url('https://fonts.googleapis.com/css2?family=Google+Sans:ital,opsz,wght@0,17..18,400..700;1,17..18,400..700&display=swap');

/* CSS RESET & DEFAULT */
*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none;}
html{
    scroll-behavior: smooth;
}
body{
    font-family: 'Google Sans';
}
.contentWrap{
    max-width: 70rem;
    margin: 0 auto;
}

/* CSS ROOT */
:root{
    --aksen: #102A43;
    --aksen2: #ffba18;
    --text1: white;
}

/* NAVIGATION */
.navigation-parent{
    position: sticky;
    top: 0;
    background-color: var(--aksen);
    color: var(--text1);
}

nav{
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 70rem;
    margin: 0 auto;
    padding: .7rem 0;
}
.navigation-container-left{
    display: flex;
    color: var(--aksen2);
    align-items: center;
}
.navigation-container-left .logoImg{
    width: 10%;
}
.navigation-container-right ul{
    display: flex;
}
.navigation-container-right ul li a{
    color: var(--text1);
    padding: 20px;
}
.navigation-container-right ul li a:hover{
    background-color: var(--aksen2);
    color: var(--aksen);
    transition: all .2s;
}

/* HERO */
.hero{
    height: 100vh;
}

/* KATALOG */
.katalog{
    padding: 3rem 1rem;
}
.katalog .judulBagian{
    padding-bottom: 2rem;
    text-decoration: underline;
}
.katalog .contentWrap{
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    width: 100%;
}
.katalogCard{
    display: flex;
    flex-direction: column;
    flex: 1 1 18rem;
    min-width: 0;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    box-shadow: 0 4px 14px rgba(16, 42, 67, .08);
}
.katalogImg{
    width: 100%;
    height: 15rem;
    object-fit: cover;
}
.katalogInfo{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .8rem;
    padding: 1.5rem;
}
.katalogTag{
    padding: .3rem .65rem;
    border-radius: 3px;
    background: #fff2cc;
    color: #704b00;
    font-size: .85rem;
}
.katalogInfo h3{
    color: var(--aksen);
}
.katalogInfo p{
    color: #52606d;
    line-height: 1.6;
}
.tombolBeli{
    margin-top: auto;
    padding: .65rem 1.2rem;
    border-radius: 4px;
    background: var(--aksen);
    color: var(--text1);
}
.tombolBeli:hover{
    background: #1b496e;
}
@media (max-width: 560px){
    .katalogImg{
        height: 12rem;
    }
    .katalogInfo{
        padding: 1.25rem;
    }
}

/* TESTIMONI */
.testimoni{
    padding: 3rem 1rem;
}
.testimoni .judulBagian{
    margin-bottom: 1.5rem;
    color: var(--aksen);
}
.testi-flex{
    display: flex;
    gap: 5px;
}
.testimoniCard{
    max-width: 38rem;
    padding: 1.5rem;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: white;
    box-shadow: 0 4px 14px rgba(16, 42, 67, .08);
}
.testimoniRating{
    margin-bottom: .8rem;
    color: #c88700;
}
.testimoniCard blockquote{
    color: #334e68;
    line-height: 1.7;
}
.testimoniPengulas{
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-top: 1.25rem;
}
.testimoniAvatar{
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 2.75rem;
    place-items: center;
    border-radius: 50%;
    background: var(--aksen);
    color: var(--text1);
}
.testimoniPengulas h3{
    color: var(--aksen);
    font-size: 1rem;
}
.testimoniPengulas p{
    margin-top: .2rem;
    color: #627d98;
    font-size: .9rem;
}

/* INFORMASI TOKO */
.informasi-toko{
    background-color: #ffba18;
    padding: 2rem 0;
}

/* FOOTER */
.footerContainer{
    background: #f0f0f0;
}
footer{
    display: flex;
    max-width: 70rem;
    justify-content: space-around;
    margin: 0 auto;
    padding: 3rem 0 ;
}
footer a{
    color: var(--aksen);
    text-decoration: underline;
}
.footerLeft,
.footerRight{
    flex: 1;
    min-width: 0;
}

/* KONTAK */
.kontak-toko{
    background: var(--aksen);
    color: var(--aksen2);
    padding: 2rem 0;
}

.kontak-toko .contentWrap{
    display: flex;
    justify-content: space-around;
}
.kontak-left,
.kontak-right{
    flex: 1;
    min-width: 0;
}