/*
    Web Design + Frontend : Ceren HANCI KAYA
*/

@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:opsz,wght@6..12,300;6..12,400;6..12,500;6..12,600;6..12,700;6..12,800&family=Roboto:wght@300;400;500&display=swap');
/*
font-family: 'Nunito Sans', sans-serif; // Baslıklar İçin Kullanılacak
font-family: 'Roboto', sans-serif;      // Text metinler için kullanılacak
*/

/***************
    reset
***************/
*,
*::before,
*::after{box-sizing: border-box}
body{min-height: 100dvh}
html,body{margin:0;padding:0;line-height:1.25;font-size: 13px;font-family: 'Roboto', sans-serif;font-weight: 400}
a{text-decoration:none}
h1,h2,h3,h4,h5{margin: 0;padding: 0;font-family: 'Nunito Sans', sans-serif;font-weight: 700;text-wrap:balance}
p, span{margin: 0;padding: 0;font-family:'Roboto', sans-serif; line-height: 26px}
dl, ol, ul{list-style:none;padding: 0;margin: 0}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:none}
table{border-collapse:collapse;border-spacing:0}
img{width: 100%;}

/***************
    design system
***************/

:root{
    --bgColor:#F5F6F8;
    --whiteColor:#fff;
    --textColor:#666;
    --blackColor:#000;
    --titleColor:#333;
    --lightColor:#aaa;
    --borderColor:#eee;
    --blueColor:#0092C1;
    --orangeColor:#F15B3E;
    --greenColor:#2CC16A;
    --yellowColor:#F1A002;
    --redColor:#E6272D;
    --greyColor:#9AAEBB;
    --purpleColor:#603E9F;
    --gradiwntLeft:#05AC8E;
    --gradiwntRight:#0881A9;
    --radius:2px;
    --boxShadow: 0px 1px 7px rgba(102,102,102,0.1);
    --transition:all .5s ease;
}

.h1 {font-size: 30px}
.h2 {font-size: 24px}
.h3 {font-size: 20px}
.h4 {font-size: 18px}

.header-icerik{width:100%;border-bottom:1px solid var(--borderColor)}
#hbv-logo img{width:250px;height:auto;padding:15px}
#coffee-logo{border-left:1px solid var(--borderColor);border-right:1px solid var(--borderColor)}
#coffee-logo img{width:80px;height:auto;padding:15px}
.bilgi-icerik{border-top:1px solid var(--borderColor);background-color:#f5f5f5;padding:15px}
.menu-zone{box-shadow:0 0 20px 0 var(--bgColor);border-radius:5px;margin-top:32px}
.dekstop-images{border-radius:18px;padding:15px}
.mobil-images{width:100%;height:150px;object-fit:cover;border-radius:5px}
.menu-header{display:flex;justify-content:space-between}
.header-baslik{line-height:15px;letter-spacing:10px;padding-left:14px;padding-bottom:15px}
.menu-icerik li{padding:10px}
.menu-border{border-bottom:1px solid var(--bgColor)}
.btn-fiyat{background-color:var(--lightColor)}
.menu-title{display:flex;justify-content:space-between;background:#f3f3f3;padding:15px;margin-top:15px}
.menu-baslik{height:60px;width:100%;background:#000;padding:15px;margin-bottom:20px;margin-top:15px;border-radius:5px;color: #fff;}
.menu-baslik button{font-size:17px;font-weight:500;margin-top:-3px}
.footer{background-color:#f5f5f5;margin-top: 20px;}
.footer-icerik p{font-size:15px;font-family:'Rubik',sans-serif;text-align:center;font-weight:300;line-height:1.5;padding:15px}
.footer-icerik a{color:var(--blackColor);text-decoration:none}
.fiyat{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #eee;
    padding: 5px 10px;
    border-radius: 5px;
}
.fiyat-aciklamasi{
    background: var(--redColor);
    padding: 5px;
    color: white;
    border-radius: 5px;
}
.aciklama{
    padding-top: 5px;
}