@import url("https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@1,700&family=Barlow:wght@400;700&display=swap");
:root {
--beyaz: #ffffff;
--siyah: #000000;
--gri: #F3F3F3;
--kirmizi: #BD3243;
--kirmizi_buton: #BD3243;
}
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
outline: none;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
html {
scroll-behavior: smooth;
}
html,
body {
padding: 0;
margin: 0;
background-color: var(--beyaz);
font-family: "Barlow Condensed", sans-serif;
font-size: clamp(16px, 2vw, 20px);
width: 100%;
font-weight: 400;
}
.cafemenu {
width: 100%;
max-width: 640px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
margin-inline: auto;
position: relative;
}
a {
text-decoration: none;
color: inherit;
}
.header {
display: flex;
width: 100%;
padding-block: 12px;
position: relative;
justify-content: center;
}
img {
display: block;
max-width: 100%;
height: auto;
}
svg {
width: 1em;
height: 1em;
display: block;
}
.logo img {
max-width: clamp(150px, 20vw, 220px);
}
.slider-alani {
width: 100%;
display: flex;
gap: 12px;
overflow: auto;
margin-top: 8px;
scroll-snap-type: x mandatory;
scroll-padding: 0 12px;
-ms-overflow-style: none;
scrollbar-width: none;
padding-inline: 12px;
}
.slider-alani::-webkit-scrollbar {
display: none;
}
.slider-alani .slider {
width: 90%;
position: relative;
aspect-ratio: 6 / 4;
z-index: 0;
flex-shrink: 0;
scroll-snap-align: center;
}
.slider-alani .slider img {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
object-fit: cover;
border-radius: 16px;
z-index: -1;
}
.slider-alani .slider .icerik {
width: 100%;
height: 100%;
display: flex;
gap: 12px;
padding: 20px;
align-items: flex-end;
background: linear-gradient(0deg, black 0%, rgba(0, 0, 0, 0) 60%);
border-radius: 20px;
overflow: hidden;
position: relative;
}
.slider-alani .slider .icerik .isol {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.slider-alani .slider .icerik .isol .title {
width: 100%;
font-size: clamp(24px, 4vw, 32px);
font-weight: 700;
text-transform: uppercase;
color: var(--beyaz);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.slider-alani .slider .icerik .isol .fiyat {
display: flex;
gap: 12px;
font-size: clamp(20px, 3vw, 26px);
font-weight: 700;
}
.slider-alani .slider .icerik .isol .fiyat span {
color: var(--beyaz);
}
.slider-alani .slider .icerik .isol .fiyat del {
color: var(--beyaz);
opacity: 0.5;
}
.slider-alani .slider .icerik a {
width: clamp(40px, 4vw, 60px);
height: clamp(40px, 4vw, 60px);
border-radius: 100%;
background-color: var(--kirmizi_buton);
color: var(--beyaz);
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(24px, 3vw, 36px);
}
.slider-alani .slider .icerik a::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.anamenu {
width: 100%;
margin-top: 24px;
position: sticky;
top: 0;
margin-bottom: 40px;
background-color: var(--beyaz);
z-index: 99;
padding-block: 8px;
}
.anamenu ul {
width: 100%;
display: flex;
gap: 8px;
overflow: auto;
-ms-overflow-style: none;
scrollbar-width: none;
padding-inline: 12px;
}
.anamenu ul::-webkit-scrollbar {
display: none;
}
.anamenu ul li a {
background-color: var(--gri);
color: var(--siyah);
padding: 14px 20px;
border-radius: 999px;
font-size: clamp(16px, 2.5vw, 20px);
font-weight: 700;
text-transform: uppercase;
display: flex;
align-items: center;
white-space: nowrap;
font-family: "Barlow", sans-serif;
}
.anamenu ul li.active a {
background-color: var(--kirmizi_buton);
color: var(--beyaz);
}
.kategoriler {
width: 100%;
margin-bottom: 50px;
display: flex;
flex-direction: column;
gap: 24px;
padding-inline: 12px;
}
.kategoriler .kategori-title {
font-size: clamp(31px, 5vw, 40px);
font-weight: 700;
color: var(--kirmizi);
font-style: italic;
text-transform: uppercase;
}
.urunler {
width: 100%;
display: flex;
flex-direction: column;
gap: 40px;
}
@media (max-width: 640px) {
.urunler {
gap: 24px;
}
}
.urun {
width: 100%;
display: flex;
align-items: flex-start;
gap: 16px;
position: relative;
}
.urun .resim {
width: 20%;
aspect-ratio: 1 / 1;
}
.urun .resim img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.urun .icerik {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.urun .icerik .title {
width: 100%;
font-size: clamp(20px, 4vw, 28px);
font-weight: 700;
color: var(--siyah);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-transform: uppercase;
}
.urun .icerik p {
font-size: clamp(13px, 2vw, 16px);
line-height: 1.4;
font-weight: 400;
color: var(--siyah);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: "Barlow", sans-serif;
}
.urun .icerik .fiyat {
display: flex;
gap: 12px;
font-size: clamp(24px, 4vw, 32px);
font-weight: 700;
}
.urun .icerik .fiyat span {
color: var(--kirmizi);
}
.urun .icerik .fiyat del {
color: var(--siyah);
opacity: 0.5;
font-weight: 500;
}
.urun a {
width: clamp(40px, 4vw, 60px);
height: clamp(40px, 4vw, 60px);
border-radius: 100%;
background-color: var(--kirmizi_buton);
color: var(--beyaz);
display: flex;
align-items: center;
justify-content: center;
font-size: clamp(24px, 3vw, 36px);
}
.urun a::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.gerigit {
color: var(--siyah);
font-size: 20px;
display: flex;
align-items: center;
gap: 4px;
position: absolute;
top: 50px;
left: 12px;
}
.gerigit span {
font-size: 14px;
font-family: "Barlow", sans-serif;
font-weight: 700;
}
@media (max-width: 640px) {
.gerigit {
top: 36px;
}
}
.detay {
width: 100%;
display: flex;
flex-direction: column;
gap: 12px;
padding-inline: 12px;
padding-block: 12px 20px;
}
.detay .resim {
width: 100%;
}
.detay .resim img {
width: 100%;
aspect-ratio: 6 / 4;
border-radius: 16px;
}
.detay .icerik {
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
padding-inline: 12px;
}
.detay .icerik .title {
width: 100%;
font-size: clamp(24px, 5vw, 30px);
font-weight: 700;
color: var(--siyah);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
text-transform: uppercase;
}
.detay .icerik p {
font-size: clamp(14px, 3vw, 18px);
line-height: 1.4;
font-weight: 400;
color: var(--siyah);
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
font-family: "Barlow", sans-serif;
}
.detay .icerik .fiyat {
display: flex;
gap: 12px;
font-size: clamp(24px, 4vw, 32px);
font-weight: 700;
}
.detay .icerik .fiyat span {
color: var(--kirmizi);
}
.detay .icerik .fiyat del {
color: var(--siyah);
opacity: 0.5;
font-weight: 500;
}