/* Reset ve Temel Stiller */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--primary-black: rgba(0, 0, 0, 0.9);
--secondary-black: rgba(10, 10, 10, 0.8);
--accent-black: rgba(20, 20, 20, 0.9);
--primary-gold: #FFD700;
--secondary-gold: #FFD700;
--light-gold: #FFD700;
--warm-gold: #FFD700;
--cosmic-purple: #9c27b0;
--cosmic-blue: #2196f3;
--cosmic-pink: #e91e63;
--text-light: #ffffff;
--text-gray: #e0e0e0;
--text-dark: #999999;
--gradient-gold: linear-gradient(135deg, #FFD700 0%, #FFEF94 50%, #DAA520 100%);
--gradient-cosmic: linear-gradient(135deg, #9c27b0 0%, #2196f3 50%, #e91e63 100%);
--shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
--shadow-cosmic: 0 4px 20px rgba(156, 39, 176, 0.4);
--transition: all 0.3s ease;
}
html {
/* Safe area support for mobile browsers */
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right);
}
body {
font-family: 'Inter', sans-serif;
background: linear-gradient(135deg, #000000 0%, #0a0a0a 20%, #0f0f0f 40%, #0a0a0a 60%, #000000 100%);
background-attachment: fixed;
color: var(--text-light);
line-height: 1.6;
overflow-x: hidden;
position: relative;
/* Prevent address bar from covering content on mobile */
min-height: 100vh;
min-height: -webkit-fill-available;
}
/* Ana Sayfa - Tam Ekran, Scroll Yok */
body.homepage {
overflow: hidden;
height: 100vh;
height: -webkit-fill-available;
}
/* Galaksi Arka Plan Efektleri */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
radial-gradient(circle at 15% 25%, rgba(255,255,255,1) 0%, transparent 1.5px),
radial-gradient(circle at 85% 15%, rgba(255,255,255,0.9) 0%, transparent 1.3px),
radial-gradient(circle at 45% 75%, rgba(255,255,255,1) 0%, transparent 1.4px),
radial-gradient(circle at 75% 85%, rgba(255,255,255,0.8) 0%, transparent 1.1px),
radial-gradient(circle at 25% 65%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 65% 35%, rgba(255,255,255,1) 0%, transparent 1.3px),
radial-gradient(circle at 35% 45%, rgba(255,255,255,1) 0%, transparent 1.6px),
radial-gradient(circle at 55% 25%, rgba(255,255,255,0.8) 0%, transparent 1px),
radial-gradient(circle at 10% 60%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 90% 40%, rgba(255,255,255,1) 0%, transparent 1.4px),
radial-gradient(circle at 30% 10%, rgba(255,255,255,0.8) 0%, transparent 1.1px),
radial-gradient(circle at 70% 20%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 20% 90%, rgba(255,255,255,1) 0%, transparent 1.5px),
radial-gradient(circle at 80% 70%, rgba(255,255,255,0.8) 0%, transparent 1px),
radial-gradient(circle at 50% 60%, rgba(255,255,255,0.9) 0%, transparent 1.1px),
radial-gradient(circle at 40% 30%, rgba(255,255,255,1) 0%, transparent 1.7px),
radial-gradient(circle at 60% 80%, rgba(255,255,255,0.8) 0%, transparent 0.9px),
radial-gradient(circle at 5% 40%, rgba(255,255,255,1) 0%, transparent 1.3px),
radial-gradient(circle at 95% 60%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 50% 5%, rgba(255,255,255,1) 0%, transparent 1.5px),
radial-gradient(circle at 12% 80%, rgba(255,255,255,0.9) 0%, transparent 1.1px),
radial-gradient(circle at 88% 30%, rgba(255,255,255,1) 0%, transparent 1.4px),
radial-gradient(circle at 33% 55%, rgba(255,255,255,0.8) 0%, transparent 1px),
radial-gradient(circle at 67% 15%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 18% 35%, rgba(255,255,255,1) 0%, transparent 1.3px),
radial-gradient(circle at 82% 55%, rgba(255,255,255,0.8) 0%, transparent 1.1px),
radial-gradient(circle at 42% 85%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 58% 45%, rgba(255,255,255,1) 0%, transparent 1.4px),
radial-gradient(circle at 8% 20%, rgba(255,255,255,0.8) 0%, transparent 1px),
radial-gradient(circle at 92% 75%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 28% 70%, rgba(255,255,255,1) 0%, transparent 1.3px),
radial-gradient(circle at 72% 10%, rgba(255,255,255,0.8) 0%, transparent 1.1px),
radial-gradient(circle at 48% 25%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 52% 90%, rgba(255,255,255,1) 0%, transparent 1.4px),
radial-gradient(circle at 22% 50%, rgba(255,255,255,0.8) 0%, transparent 1px),
radial-gradient(circle at 78% 40%, rgba(255,255,255,0.9) 0%, transparent 1.2px),
radial-gradient(circle at 14% 45%, rgba(255,255,255,0.6) 0%, transparent 0.5px),
radial-gradient(circle at 86% 25%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 38% 65%, rgba(255,255,255,0.7) 0%, transparent 0.6px),
radial-gradient(circle at 62% 35%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 26% 15%, rgba(255,255,255,0.6) 0%, transparent 0.5px),
radial-gradient(circle at 74% 85%, rgba(255,255,255,0.7) 0%, transparent 0.6px),
radial-gradient(circle at 46% 55%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 54% 75%, rgba(255,255,255,0.6) 0%, transparent 0.5px),
radial-gradient(circle at 16% 75%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 84% 45%, rgba(255,255,255,0.7) 0%, transparent 0.6px),
radial-gradient(circle at 32% 85%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 68% 25%, rgba(255,255,255,0.6) 0%, transparent 0.5px),
radial-gradient(circle at 44% 15%, rgba(255,255,255,0.7) 0%, transparent 0.6px),
radial-gradient(circle at 56% 65%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 24% 35%, rgba(255,255,255,0.6) 0%, transparent 0.5px),
radial-gradient(circle at 76% 55%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 36% 25%, rgba(255,255,255,0.7) 0%, transparent 0.6px),
radial-gradient(circle at 64% 75%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 6% 65%, rgba(255,255,255,0.6) 0%, transparent 0.5px),
radial-gradient(circle at 94% 35%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 52% 45%, rgba(255,255,255,0.7) 0%, transparent 0.6px),
radial-gradient(circle at 48% 85%, rgba(255,255,255,0.5) 0%, transparent 0.4px),
radial-gradient(circle at 15% 50%, rgba(255,255,255,1) 0%, transparent 1.8px),
radial-gradient(circle at 85% 80%, rgba(255,255,255,1) 0%, transparent 1.9px),
radial-gradient(circle at 35% 15%, rgba(255,255,255,1) 0%, transparent 1.7px),
radial-gradient(circle at 65% 90%, rgba(255,255,255,1) 0%, transparent 1.8px),
radial-gradient(circle at 25% 75%, rgba(255,255,255,1) 0%, transparent 1.6px),
radial-gradient(circle at 75% 35%, rgba(255,255,255,1) 0%, transparent 1.8px),
radial-gradient(circle at 55% 40%, rgba(255,255,255,1) 0%, transparent 1.9px);
background-repeat: no-repeat;
background-size: 100% 100%;
animation: galaxyRotate 200s linear infinite;
pointer-events: none;
z-index: 1;
}
/* Yıldız Animasyonu */
@keyframes galaxyRotate {
0% { transform: rotate(0deg) translateX(0px) translateY(0px); }
25% { transform: rotate(90deg) translateX(2px) translateY(-1px); }
50% { transform: rotate(180deg) translateX(0px) translateY(2px); }
75% { transform: rotate(270deg) translateX(-2px) translateY(-1px); }
100% { transform: rotate(360deg) translateX(0px) translateY(0px); }
}
/* Akan Yıldızlar Efekti */
.shooting-stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 3;
}
.shooting-star {
position: absolute;
width: 2px;
height: 2px;
background: linear-gradient(45deg, rgba(255,255,255,0.9), transparent);
border-radius: 50%;
animation: shootingStar 3s linear infinite;
}
.shooting-star:nth-child(1) {
top: 10%;
left: 10%;
animation-delay: 0s;
animation-duration: 2s;
}
.shooting-star:nth-child(2) {
top: 20%;
left: 80%;
animation-delay: 1s;
animation-duration: 2.5s;
}
.shooting-star:nth-child(3) {
top: 60%;
left: 20%;
animation-delay: 2s;
animation-duration: 3s;
}
.shooting-star:nth-child(4) {
top: 80%;
left: 70%;
animation-delay: 3s;
animation-duration: 2.2s;
}
.shooting-star:nth-child(5) {
top: 30%;
left: 60%;
animation-delay: 4s;
animation-duration: 2.8s;
}
.shooting-star:nth-child(6) {
top: 70%;
left: 15%;
animation-delay: 5s;
animation-duration: 2.4s;
}
@keyframes shootingStar {
0% {
opacity: 0;
transform: translateX(0) translateY(0) scale(0);
}
10% {
opacity: 0.8;
transform: translateX(0) translateY(0) scale(1);
}
90% {
opacity: 0.8;
transform: translateX(300px) translateY(300px) scale(1);
}
100% {
opacity: 0;
transform: translateX(400px) translateY(400px) scale(0);
}
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}
@media (max-width: 768px) {
.container {
padding: 0 30px;
}
}
@media (max-width: 480px) {
.container {
padding: 0 20px;
}
}
/* Spacing Section */
.spacing-section {
padding-top: 100px;
}
@media (max-width: 768px) {
.spacing-section {
padding-top: calc(80px + env(safe-area-inset-top));
}
}
@media (max-width: 480px) {
.spacing-section {
padding-top: calc(60px + env(safe-area-inset-top));
}
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
font-family: 'Roboto', sans-serif;
font-weight: 500;
margin-bottom: 1rem;
background: var(--gradient-gold) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
.hero-subtitle {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.2rem;
text-align: center;
margin-bottom: 1.5rem;
}
.page-subtitle {
color: var(--text-gray);
font-size: 1.1rem;
text-align: center;
opacity: 0.9;
margin-bottom: 1rem;
}
.section-title {
text-align: center;
font-size: 2.5rem;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 3rem;
position: relative;
}
.section-title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 80px;
height: 3px;
background: var(--gradient-gold);
border-radius: 2px;
}
/* Header ve Navigation */
.header {
position: fixed;
top: 0;
width: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(15px);
border-bottom: none;
box-shadow: none;
z-index: 1000;
padding: 1rem 0;
transition: var(--transition);
}
.navbar {
padding: 0;
}
.nav-container {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
display: flex;
align-items: center;
}
.logo-img {
height: 50px;
width: auto;
transition: var(--transition);
}
.logo-img:hover {
transform: scale(1.05);
}
.nav-menu {
display: flex;
list-style: none;
align-items: center;
gap: 2rem;
}
.nav-link {
color: var(--text-light);
text-decoration: none;
font-weight: 500;
transition: var(--transition);
position: relative;
padding: 0.5rem 0;
}
.nav-link:hover,
.nav-link.active {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background: var(--primary-gold);
transition: var(--transition);
}
.nav-link:hover::after,
.nav-link.active::after {
width: 100%;
}
/* Dropdown Menu */
.dropdown {
position: relative;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
background: var(--secondary-black);
min-width: 200px;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: var(--transition);
border-radius: 8px;
box-shadow: var(--shadow);
padding: 1rem 0;
list-style: none;
}
.dropdown:hover .dropdown-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.dropdown-menu li {
margin: 0;
}
.dropdown-menu a {
display: block;
padding: 0.75rem 1.5rem;
color: var(--text-light);
text-decoration: none;
transition: var(--transition);
}
.dropdown-menu a:hover {
background: var(--accent-black);
color: var(--primary-gold);
}
/* Hamburger Menu */
.hamburger {
display: none;
flex-direction: column;
cursor: pointer;
}
.bar {
width: 25px;
height: 3px;
background: var(--primary-gold);
margin: 3px 0;
transition: var(--transition);
}
/* Hero Section */
.hero {
padding: 175px 0 175px;
background: transparent;
position: relative;
overflow: hidden;
}
/* Ana Sayfa Hero - Tam Ekran */
body.homepage .hero {
height: 100vh;
height: -webkit-fill-available;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
background: #000000 !important;
}
/* Desktop görünümünde üstten boşluk ve arka plan saydam */
@media (min-width: 769px) {
body.homepage .hero {
padding-top: 200px;
padding-bottom: 0;
background: transparent !important;
}
}
body.homepage .hero .container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
/* Desktop'ta container tam genişlik */
@media (min-width: 769px) {
body.homepage .hero .container {
max-width: 100%;
width: 100%;
padding: 0;
margin: 0;
}
}
body.homepage .hero-wrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 3rem;
padding-bottom: 100px; /* Footer için alan bırak */
}
@media (max-width: 768px) {
body.homepage .hero-wrapper {
padding-bottom: 80px;
}
}
@media (max-width: 480px) {
body.homepage .hero-wrapper {
padding-bottom: 70px;
}
}
@media (max-width: 768px) {
body.homepage .hero {
height: 100vh;
height: -webkit-fill-available;
padding: 0;
}
body.homepage .hero-wrapper {
flex-direction: column;
gap: 2rem;
padding: calc(20px + env(safe-area-inset-top)) 0 80px;
}
}
@media (max-width: 480px) {
body.homepage .hero {
height: 100vh;
height: -webkit-fill-available;
padding: 0;
}
body.homepage .hero-wrapper {
flex-direction: column;
gap: 1.5rem;
padding: calc(15px + env(safe-area-inset-top)) 0 70px;
}
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
opacity: 0;
z-index: 1;
}
/* Ana Sayfa için hero::before override - SVG Pattern aktif */
body.homepage .hero::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: #000000 url('data:image/svg+xml,') !important;
background-size: auto !important;
background-repeat: repeat !important;
opacity: 1 !important;
z-index: 0 !important;
animation: particleFloat 40s linear infinite reverse !important;
}
/* Desktop'ta hero::before siyah arka plan kaldır */
@media (min-width: 769px) {
body.homepage .hero::before {
background: url('data:image/svg+xml,') !important;
}
}
/* Mobilde Coffee Menu arkaplanını ekle */
@media (max-width: 768px) {
.hero::before {
background: url('data:image/svg+xml,');
opacity: 0.6;
animation: particleFloat 40s linear infinite reverse;
}
/* Ana Sayfa için SVG Pattern - Mobil */
body.homepage .hero::before {
content: '' !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
background: #000000 url('data:image/svg+xml,') !important;
background-size: auto !important;
background-repeat: repeat !important;
opacity: 1 !important;
z-index: 1 !important;
animation: particleFloat 40s linear infinite reverse !important;
}
}
.hero-wrapper {
display: flex;
align-items: center;
gap: 3rem;
position: relative;
z-index: 2;
flex-direction: row-reverse;
}
.coffee-icon-wrapper {
position: relative;
width: 300px;
height: 300px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.hero .container {
max-width: 1000px;
margin: 0 auto;
padding: 0 40px;
}
.hero-content {
flex: 1;
z-index: 3;
position: relative;
text-align: center;
padding: 0 20px;
overflow: hidden;
}
@media (max-width: 768px) {
.hero-content {
padding: 0 10px;
}
}
@media (max-width: 480px) {
.hero-content {
padding: 0 5px;
}
}
.hero-title {
font-size: 3.5rem;
margin-bottom: 1.5rem;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
line-height: 1.2;
white-space: nowrap;
}
.hero-subtitle {
font-size: 1.3rem;
color: var(--text-gray);
margin-bottom: 2.5rem;
line-height: 1.6;
}
.hero-buttons {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
@media (max-width: 480px) {
.hero-buttons {
flex-direction: column;
gap: 1rem;
width: 100%;
align-items: center;
}
.hero-buttons .btn {
width: 100%;
max-width: 280px;
margin: 0 auto;
}
}
.btn {
display: inline-block;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
transition: var(--transition);
border: 2px solid transparent;
position: relative;
overflow: hidden;
text-align: center;
}
.btn-primary {
background: var(--gradient-gold);
color: var(--primary-black);
box-shadow: var(--shadow);
}
.btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}
.btn-secondary {
background: transparent;
color: var(--primary-gold);
border-color: var(--primary-gold);
}
.btn-secondary:hover {
background: var(--primary-gold);
color: var(--primary-black);
transform: translateY(-3px);
}
.coffee-icon {
width: 180px;
height: 180px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 5rem;
color: var(--primary-black);
box-shadow: 0 20px 40px rgba(212, 175, 55, 0.4);
animation: float 6s ease-in-out infinite;
position: relative;
z-index: 2;
}
.moon-icon {
background: linear-gradient(135deg, #f5f5dc, #fafad2, #fff8dc, #f0e68c);
box-shadow: 0 20px 40px rgba(245, 245, 220, 0.4);
animation: moonGlow 6s ease-in-out infinite;
position: relative;
overflow: visible;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.moon-image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 50%;
border: 1px solid var(--primary-gold);
outline: none;
}
@keyframes moonGlow {
0% {
box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
transform: scale(1);
}
25% {
box-shadow: 0 0 50px rgba(255, 215, 0, 0.5), 0 0 80px rgba(255, 140, 0, 0.2);
transform: scale(1.02);
}
50% {
box-shadow: 0 0 60px rgba(255, 215, 0, 0.7), 0 0 100px rgba(255, 140, 0, 0.3);
transform: scale(1.05);
}
75% {
box-shadow: 0 0 50px rgba(255, 215, 0, 0.5), 0 0 80px rgba(255, 140, 0, 0.2);
transform: scale(1.02);
}
100% {
box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
transform: scale(1);
}
}
.coffee-icon::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 220px;
height: 220px;
border: 3px solid var(--primary-gold);
border-radius: 50%;
opacity: 0.4;
animation: pulse 4s ease-in-out infinite;
z-index: 1;
}
.coffee-icon::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 260px;
height: 260px;
border: 2px solid var(--secondary-gold);
border-radius: 50%;
opacity: 0.3;
animation: pulse 4s ease-in-out infinite 1s;
z-index: 1;
}
.floating-elements {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.floating-element {
position: absolute;
font-size: 2rem;
animation: floatAround 8s ease-in-out infinite;
opacity: 0.8;
}
.element-1 {
top: 20%;
left: 10%;
animation-delay: 0s;
}
.element-2 {
top: 10%;
right: 20%;
animation-delay: 2s;
}
.element-3 {
bottom: 20%;
left: 15%;
animation-delay: 4s;
}
.element-4 {
bottom: 15%;
right: 10%;
animation-delay: 6s;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-20px); }
}
@keyframes pulse {
0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.3; }
50% { transform: translate(-50%, -50%) scale(1.1); opacity: 0.1; }
}
@keyframes floatAround {
0%, 100% {
transform: translateY(0px) rotate(0deg);
opacity: 0.8;
}
25% {
transform: translateY(-30px) rotate(90deg);
opacity: 1;
}
50% {
transform: translateY(0px) rotate(180deg);
opacity: 0.6;
}
75% {
transform: translateY(-15px) rotate(270deg);
opacity: 0.9;
}
}
@keyframes particleFloat {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-100px);
}
}
/* Features Section */
.features {
padding: 100px 0;
background: transparent;
position: relative;
overflow: hidden;
}
.features::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
opacity: 0;
}
.features-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1.5rem;
margin-top: 3rem;
position: relative;
z-index: 2;
}
.feature-card {
text-align: center;
padding: 2rem 1.5rem;
background: var(--primary-black);
border-radius: 12px;
transition: var(--transition);
border: 1px solid rgba(255, 215, 0, 0.4);
position: relative;
overflow: hidden;
backdrop-filter: blur(10px);
}
.feature-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
transition: var(--transition);
}
.feature-card:hover::before {
left: 100%;
}
.feature-card:hover {
transform: translateY(-10px);
border-color: rgba(255, 215, 0, 0.8);
box-shadow: 0 10px 40px rgba(255, 215, 0, 0.5);
}
.feature-icon {
width: 60px;
height: 60px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.5rem;
color: var(--primary-black);
}
.feature-card h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.8rem;
font-size: 1.2rem;
}
.feature-card p {
color: var(--text-gray);
line-height: 1.5;
font-size: 0.9rem;
}
/* Menu Preview Section */
.menu-preview {
padding: 100px 0;
background: var(--primary-black);
position: relative;
overflow: hidden;
}
.menu-preview::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.6;
animation: particleFloat 40s linear infinite reverse;
}
.menu-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 3rem;
margin-top: 3rem;
position: relative;
z-index: 2;
}
.menu-card {
background: var(--secondary-black);
border-radius: 20px;
overflow: hidden;
transition: var(--transition);
border: 1px solid var(--accent-black);
}
.menu-card:hover {
transform: translateY(-10px);
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
border-color: var(--primary-gold);
}
.menu-image {
height: 200px;
background: var(--gradient-gold);
display: flex;
align-items: center;
justify-content: center;
font-size: 4rem;
color: var(--primary-black);
}
.menu-content {
padding: 2rem;
text-align: center;
}
.menu-content h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.8rem;
margin-bottom: 1.8rem;
}
.menu-content p {
color: var(--text-gray);
margin-bottom: 2rem;
line-height: 1.6;
}
.menu-btn {
display: inline-block;
padding: 1rem 2rem;
background: var(--gradient-gold);
color: var(--primary-black);
text-decoration: none;
border-radius: 50px;
font-weight: 600;
transition: var(--transition);
}
.menu-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}
/* Footer Content Section */
.footer-content-section {
background: transparent;
padding: 60px 0;
position: relative;
overflow: hidden;
min-height: 400px;
display: flex;
align-items: center;
}
.footer-content-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
opacity: 0;
}
/* Footer */
.footer {
background: rgba(0, 0, 0, 0.5);
padding: 0;
border-top: none;
display: flex;
align-items: center;
min-height: 80px;
}
/* Ana Sayfa Footer - Fixed Position (En Alta Sabit) */
body.homepage .footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
z-index: 10;
margin: 0;
padding-bottom: env(safe-area-inset-bottom);
}
.footer-content {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 2rem;
position: relative;
z-index: 2;
min-height: 300px;
}
.footer-section {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
text-align: left;
}
.footer-section:first-child {
flex: 0 0 auto;
max-width: 40%;
}
.footer-section:last-child {
flex: 1;
max-width: 60%;
}
.footer-section h4 {
color: var(--primary-gold);
margin-bottom: 1.5rem;
font-size: 1.2rem;
}
.footer-logo img {
height: 60px;
width: auto;
margin-bottom: 1rem;
}
.footer-section p {
color: var(--text-gray);
line-height: 1.6;
margin-bottom: 1rem;
}
.footer-section ul {
list-style: none;
}
.footer-section ul li {
margin-bottom: 0.5rem;
}
.footer-section ul li a {
color: var(--text-gray);
text-decoration: none;
transition: var(--transition);
}
.footer-section ul li a:hover {
color: var(--primary-gold);
}
.contact-info p {
display: flex;
align-items: center;
margin-bottom: 1rem;
color: var(--text-gray);
}
.contact-info i {
margin-right: 1rem;
color: var(--primary-gold);
width: 20px;
}
.social-links {
display: flex;
gap: 1rem;
}
.social-links a {
width: 40px;
height: 40px;
background: var(--accent-black);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--text-light);
text-decoration: none;
transition: var(--transition);
}
.social-links a:hover {
background: var(--primary-gold);
color: var(--primary-black);
transform: translateY(-3px);
}
.footer-bottom {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0;
color: var(--text-dark);
width: 100%;
}
.footer-bottom .social-links {
display: flex;
gap: 1rem;
}
.footer-bottom .social-links a {
width: 40px;
height: 40px;
background: var(--accent-black);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: var(--primary-gold);
transition: var(--transition);
}
.footer-bottom .social-links a:hover {
background: var(--primary-gold);
color: var(--primary-black);
transform: translateY(-3px);
}
/* Responsive Design */
@media (max-width: 768px) {
.hamburger {
display: flex;
}
.nav-menu {
position: fixed;
left: -100%;
top: 70px;
flex-direction: column;
background: var(--secondary-black);
width: 100%;
text-align: center;
transition: var(--transition);
box-shadow: var(--shadow);
padding: 2rem 0;
}
.nav-menu.active {
left: 0;
}
.nav-menu li {
margin: 1rem 0;
}
.hero {
padding: calc(60px + env(safe-area-inset-top)) 0 80px;
}
.hero-wrapper {
flex-direction: column;
gap: 2rem;
text-align: center;
}
.coffee-icon-wrapper {
width: 250px;
height: 250px;
}
.hero-content {
text-align: center;
}
.hero .container {
padding: 0 30px;
}
.hero-title {
font-size: 2.5rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hero-buttons {
justify-content: center;
align-items: center;
}
.coffee-icon {
width: 150px;
height: 150px;
font-size: 4rem;
}
.coffee-icon::before {
width: 170px;
height: 170px;
}
.coffee-icon::after {
width: 190px;
height: 190px;
}
.floating-element {
font-size: 1.5rem;
}
.features-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.menu-cards {
grid-template-columns: 1fr;
gap: 2rem;
}
.footer-content-section {
padding: 40px 0;
min-height: auto;
}
.footer-content {
flex-direction: column;
gap: 2rem;
text-align: left;
min-height: auto;
}
.footer-section {
justify-content: center;
align-items: flex-start;
text-align: left;
max-width: 100%;
flex: none;
}
.footer-section:first-child {
max-width: 100%;
}
.footer-section:last-child {
max-width: 100%;
}
.section-title {
font-size: 2rem;
}
}
@media (max-width: 480px) {
.container {
padding: 0 20px;
}
.hero .container {
padding: 0 20px;
}
.hero-title {
font-size: 1.5rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 10px;
}
.hero-subtitle {
font-size: 0.9rem;
line-height: 1.4;
padding: 0 10px;
}
.footer-bottom {
flex-direction: column;
gap: 1rem;
text-align: center;
}
.btn {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
.feature-card {
padding: 2rem 1.5rem;
}
.menu-content {
padding: 1.5rem;
}
.hero-wrapper {
flex-direction: column;
gap: 1.5rem;
text-align: center;
}
.coffee-icon-wrapper {
width: 200px;
height: 200px;
}
.coffee-icon {
width: 120px;
height: 120px;
font-size: 3rem;
}
.hero-content {
text-align: center;
}
.hero-title {
font-size: 1.6rem;
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 15px;
}
.hero-subtitle {
font-size: 1rem;
line-height: 1.4;
padding: 0 15px;
}
.coffee-icon::before {
width: 140px;
height: 140px;
}
.coffee-icon::after {
width: 160px;
height: 160px;
}
.floating-element {
font-size: 1.2rem;
}
}
/* Animations */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in-up {
animation: fadeInUp 0.8s ease-out;
}
/* Page Header Styles */
.page-header {
padding: 120px 0 80px;
background: transparent;
text-align: center;
}
.page-header-content {
max-width: 800px;
margin: 0 auto;
}
.page-title {
font-size: 3rem;
color: var(--primary-gold);
margin-bottom: 1rem;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.page-subtitle {
font-size: 1.2rem;
color: var(--text-gray);
line-height: 1.6;
}
/* Menu Navigation Buttons */
.menu-nav-buttons {
padding: 40px 0;
background: transparent;
text-align: center;
}
@media (max-width: 480px) {
.menu-nav-buttons {
padding: 30px 0;
}
}
.menu-buttons-wrapper {
display: flex;
flex-direction: column;
align-items: center;
gap: 2rem;
}
@media (max-width: 480px) {
.menu-buttons-wrapper {
gap: 1.5rem;
}
}
.menu-logo {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
}
@media (max-width: 480px) {
.menu-logo {
margin-bottom: 30px;
}
}
.menu-logo a {
display: inline-block;
transition: transform 0.3s ease;
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.menu-logo a:hover {
transform: scale(1.05);
}
.menu-logo a:focus {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.menu-logo a:focus-visible {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.menu-logo a:active {
outline: none !important;
border: none !important;
box-shadow: none !important;
}
.menu-logo img {
max-width: 450px;
width: 100%;
height: auto;
object-fit: contain;
}
@media (max-width: 768px) {
.menu-logo img {
max-width: 300px;
}
}
@media (max-width: 480px) {
.menu-logo img {
max-width: 250px;
}
}
.menu-buttons {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
@media (max-width: 480px) {
.menu-buttons {
gap: 1rem;
flex-direction: column;
width: 100%;
align-items: center;
}
.menu-buttons .btn {
width: 100%;
max-width: 280px;
margin: 0 auto;
}
}
.menu-buttons .btn-secondary.active {
background: var(--gradient-gold);
color: var(--primary-black);
box-shadow: var(--shadow);
border-color: transparent;
}
.menu-buttons .btn-secondary.active:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}
.menu-buttons .btn-primary.active {
background: var(--gradient-gold);
color: var(--primary-black);
box-shadow: var(--shadow);
}
.menu-buttons .btn-primary.active:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}
/* Menu Section Styles */
.menu-section {
padding: 40px 0;
background: transparent;
}
@media (max-width: 768px) {
.menu-section {
padding: 35px 0;
}
}
@media (max-width: 480px) {
.menu-section {
padding: 25px 0;
}
}
.menu-category {
margin-bottom: 4rem;
}
@media (max-width: 480px) {
.menu-category {
margin-bottom: 3rem;
}
}
.category-title {
display: flex;
align-items: center;
gap: 1rem;
font-size: 2rem;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid var(--primary-gold);
flex-wrap: wrap;
}
@media (max-width: 480px) {
.category-title {
font-size: 1.3rem;
gap: 0.5rem;
margin-bottom: 1.5rem;
padding-bottom: 0.8rem;
}
.category-title i {
font-size: 1rem;
}
}
.category-title i {
font-size: 1.5rem;
}
/* Subcategory Title (Alt Başlık) */
.subcategory-title {
color: var(--text-gray) !important;
margin-top: 2rem;
margin-bottom: 1.5rem;
font-style: italic;
font-size: 20px;
font-weight: 400;
line-height: 1.6;
font-family: 'Inter', sans-serif;
background: none !important;
-webkit-background-clip: unset !important;
-webkit-text-fill-color: var(--text-gray) !important;
background-clip: unset !important;
}
@media (max-width: 480px) {
.subcategory-title {
margin-top: 1.5rem;
margin-bottom: 1rem;
font-size: 18px;
}
}
.menu-items {
display: grid;
gap: 1.5rem;
}
@media (max-width: 480px) {
.menu-items {
gap: 1rem;
}
}
.menu-item {
position: relative;
padding: 1.5rem;
background: var(--primary-black);
border-radius: 12px;
border: 1px solid rgba(255, 215, 0, 0.4);
transition: var(--transition);
overflow: hidden;
display: flex;
flex-direction: row;
align-items: center;
gap: 1rem;
}
@media (max-width: 480px) {
.menu-item {
padding: 1rem;
gap: 0.8rem;
flex-wrap: wrap;
}
}
/* Menu Item Image */
.menu-item .item-image {
width: 80px;
height: 80px;
object-fit: cover;
border-radius: 8px;
background: linear-gradient(135deg, #FFD700 0%, #FFEF94 50%, #DAA520 100%);
flex-shrink: 0;
}
/* Menu Item Content */
.menu-item .item-content {
padding: 0;
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-width: 0;
}
@media (max-width: 480px) {
.menu-item .item-content {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
width: 100%;
}
.menu-item .item-price {
align-self: flex-end;
margin-top: 0.5rem;
}
}
.menu-item .item-info {
display: block;
flex: 1;
}
.menu-item .item-details h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.1rem;
margin-bottom: 0.5rem;
font-weight: 600;
}
.menu-item .item-details p {
color: var(--text-gray);
font-size: 0.9rem;
margin-bottom: 0.5rem;
line-height: 1.4;
}
.menu-item .item-price {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
font-size: 1.2rem;
position: static;
flex-shrink: 0;
}
.menu-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
transition: left 0.5s ease;
}
.menu-item:hover {
border-color: rgba(255, 215, 0, 0.8);
transform: translateY(-5px);
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.5);
}
.menu-item:hover::before {
left: 100%;
}
.item-info h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.3rem;
margin-bottom: 0.5rem;
font-weight: 600;
word-wrap: break-word;
overflow-wrap: break-word;
}
@media (max-width: 480px) {
.item-info h3 {
font-size: 1.1rem;
line-height: 1.3;
}
}
.item-info p {
color: var(--text-gray);
font-size: 0.95rem;
line-height: 1.4;
word-wrap: break-word;
overflow-wrap: break-word;
}
@media (max-width: 480px) {
.item-info p {
font-size: 0.85rem;
line-height: 1.3;
}
}
.item-price {
font-size: 1.5rem;
font-weight: 700;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Playfair Display', serif;
white-space: nowrap;
flex-shrink: 0;
}
@media (max-width: 480px) {
.item-price {
font-size: 1.2rem;
}
}
/* About Page Styles */
.about-story {
padding: 200px 0 80px 0;
background: transparent;
}
.story-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.story-text h2 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2.5rem;
margin-bottom: 2rem;
}
.story-text p {
color: var(--text-gray);
font-size: 1.1rem;
line-height: 1.8;
margin-bottom: 1.5rem;
}
.story-image {
text-align: center;
}
.story-image img {
max-width: 100%;
height: auto;
border-radius: 15px;
box-shadow: var(--shadow);
}
/* Values Section */
.values-section {
padding: 80px 0;
background: transparent;
position: relative;
}
.values-section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: rgba(255, 215, 0, 0.4);
}
.values-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
}
.value-card {
background: var(--primary-black);
padding: 1.5rem 1rem;
border-radius: 12px;
text-align: center;
border: 1px solid rgba(255, 215, 0, 0.4);
transition: var(--transition);
}
.value-card:hover {
transform: translateY(-10px);
border-color: rgba(255, 215, 0, 0.8);
box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
}
.value-icon {
width: 60px;
height: 60px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 1.5rem;
color: var(--primary-black);
}
.value-card h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.5rem;
margin-bottom: 1rem;
}
.value-card p {
color: var(--text-gray);
line-height: 1.6;
}
/* Team Section */
.team-section {
padding: 80px 0;
background: transparent;
position: relative;
}
.team-section::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: rgba(255, 215, 0, 0.4);
}
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.2rem;
}
.team-member {
background: var(--primary-black);
padding: 1.5rem;
border-radius: 12px;
text-align: center;
border: 1px solid rgba(255, 215, 0, 0.4);
transition: var(--transition);
}
.team-member:hover {
transform: translateY(-10px);
border-color: rgba(255, 215, 0, 0.8);
box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
}
.member-image {
width: 80px;
height: 80px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 1rem;
font-size: 2rem;
color: var(--primary-black);
}
.member-info h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.4rem;
margin-bottom: 0.5rem;
}
.member-role {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
margin-bottom: 1rem;
font-size: 1.1rem;
}
.member-info p:last-child {
color: var(--text-gray);
line-height: 1.6;
}
/* Mission & Vision */
.mission-vision {
padding: 80px 0;
background: transparent;
position: relative;
}
.mission-vision::before {
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 1px;
background: rgba(255, 215, 0, 0.4);
}
.mission-vision-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 3rem;
}
.mission-card,
.vision-card {
background: var(--primary-black);
padding: 3rem 2.5rem;
border-radius: 20px;
text-align: center;
border: 1px solid rgba(255, 215, 0, 0.4);
transition: var(--transition);
position: relative;
overflow: hidden;
}
.mission-card::before,
.vision-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 215, 0, 0.1), transparent);
transition: var(--transition);
}
.mission-card:hover::before,
.vision-card:hover::before {
left: 100%;
}
.mission-card:hover,
.vision-card:hover {
transform: translateY(-10px);
border-color: rgba(255, 215, 0, 0.8);
box-shadow: 0 20px 40px rgba(255, 215, 0, 0.4);
}
.card-icon {
width: 100px;
height: 100px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 2rem;
font-size: 2.5rem;
color: var(--primary-black);
}
.mission-card h3,
.vision-card h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2rem;
margin-bottom: 1.5rem;
}
.mission-card p,
.vision-card p {
color: var(--text-gray);
line-height: 1.8;
font-size: 1.1rem;
}
/* Responsive Design for About Page */
@media (max-width: 768px) {
.story-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.story-text h2 {
font-size: 2rem;
}
.values-grid {
grid-template-columns: 1fr;
}
.team-grid {
grid-template-columns: 1fr;
}
.mission-vision-grid {
grid-template-columns: 1fr;
}
.mission-card,
.vision-card {
padding: 2rem 1.5rem;
}
}
/* Contact Page Styles */
.contact-section {
padding: 200px 0 80px 0;
background: transparent;
}
.contact-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
}
.contact-info-section h2,
.contact-form-section h2 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2rem;
margin-bottom: 2rem;
text-align: center;
}
.contact-info-grid {
display: grid;
gap: 2rem;
margin-bottom: 3rem;
}
.contact-item {
display: flex;
align-items: flex-start;
gap: 1.5rem;
padding: 1.5rem;
background: var(--primary-black);
border-radius: 12px;
border: 1px solid rgba(255, 215, 0, 0.4);
transition: var(--transition);
}
.contact-item:hover {
border-color: rgba(255, 215, 0, 0.8);
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(255, 215, 0, 0.4);
}
.contact-icon {
width: 50px;
height: 50px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
color: var(--primary-black);
flex-shrink: 0;
}
.contact-details h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.2rem;
margin-bottom: 0.5rem;
}
.contact-details p {
color: var(--text-gray);
line-height: 1.6;
}
/* Social Media Section */
.social-media-section {
text-align: center;
}
.social-media-section h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1.5rem;
font-size: 1.5rem;
}
.social-media-section .social-links {
display: flex;
justify-content: center;
gap: 1rem;
flex-wrap: wrap;
}
.social-link {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 0.5rem;
background: transparent !important;
border-radius: 0 !important;
border: none !important;
text-decoration: none;
color: var(--text-light);
transition: var(--transition);
min-width: auto;
width: auto !important;
height: auto !important;
}
.social-link:hover {
transform: translateY(-5px);
box-shadow: none;
}
.social-link i,
.fab {
font-size: 1.5rem;
color: var(--primary-gold) !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
width: auto !important;
height: auto !important;
line-height: normal !important;
text-align: left !important;
padding: 0 !important;
margin: 0 !important;
}
.social-link span {
font-size: 0.9rem;
color: var(--text-gray);
}
/* Contact Form */
.contact-form {
background: var(--primary-black);
padding: 2.5rem;
border-radius: 15px;
border: 1px solid rgba(255, 215, 0, 0.4);
transition: var(--transition);
}
.contact-form:hover {
border-color: rgba(255, 215, 0, 0.8);
box-shadow: 0 10px 20px rgba(255, 215, 0, 0.4);
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
margin-bottom: 0.5rem;
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 1rem;
border: 1px solid var(--accent-black);
border-radius: 8px;
background: var(--secondary-black);
color: var(--text-light);
font-size: 1rem;
transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--primary-gold);
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}
.form-group input::placeholder,
.form-group textarea::placeholder {
color: var(--text-dark);
}
.submit-btn {
width: 100%;
padding: 1rem 2rem;
background: var(--gradient-gold);
color: var(--primary-black);
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.submit-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
background: var(--gradient-gold);
color: var(--primary-black);
}
/* Map Section */
.map-section {
padding: 80px 0;
background: var(--primary-black);
}
.map-container {
margin-top: 2rem;
}
.map-placeholder {
height: 400px;
background: var(--secondary-black);
border-radius: 15px;
border: 1px solid var(--accent-black);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: 1rem;
}
.map-placeholder i {
font-size: 4rem;
color: var(--primary-gold);
}
.map-placeholder h3 {
color: var(--primary-gold);
font-size: 1.5rem;
}
.map-placeholder p {
color: var(--text-gray);
line-height: 1.6;
}
/* FAQ Section */
.faq-section {
padding: 80px 0;
background: var(--secondary-black);
}
.faq-grid {
display: grid;
gap: 1.5rem;
max-width: 800px;
margin: 0 auto;
}
.faq-item {
background: var(--primary-black);
border-radius: 12px;
border: 1px solid var(--accent-black);
overflow: hidden;
transition: var(--transition);
}
.faq-item:hover {
border-color: var(--primary-gold);
}
.faq-question {
padding: 1.5rem;
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
transition: var(--transition);
}
.faq-question:hover {
background: var(--accent-black);
}
.faq-question h3 {
color: var(--primary-gold);
font-size: 1.2rem;
margin: 0;
}
.faq-question i {
color: var(--primary-gold);
font-size: 1.2rem;
transition: var(--transition);
}
.faq-item.active .faq-question i {
transform: rotate(180deg);
}
.faq-answer {
padding: 0 1.5rem;
max-height: 0;
overflow: hidden;
transition: var(--transition);
}
.faq-item.active .faq-answer {
padding: 0 1.5rem 1.5rem;
max-height: 200px;
}
.faq-answer p {
color: var(--text-gray);
line-height: 1.6;
margin: 0;
}
/* Responsive Design for Contact Page */
@media (max-width: 768px) {
.contact-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.contact-form {
padding: 2rem 1.5rem;
}
.contact-item {
flex-direction: column;
text-align: center;
gap: 1rem;
}
.social-media-section .social-links {
justify-content: center;
}
.social-link {
min-width: 70px;
padding: 0.8rem;
}
.map-placeholder {
height: 300px;
padding: 2rem;
}
.map-placeholder i {
font-size: 3rem;
}
}
/* Heading Override - Tüm başlıklar gradient ile */
section h1, section h2, section h3:not(.subcategory-title), section h4, section h5, section h6,
.menu-category h2, .feature-card h3, .menu-item h3, .value-card h3,
.team-member h3, .mission-card h3, .vision-card h3, .contact-item h3,
.category-title, .member-info h3, .contact-info-section h2, .contact-form-section h2,
.social-media-section h3, .faq-question h3 {
background: var(--gradient-gold) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
}
/* Social Media Icon Override */
.social-media-section .fab,
.social-media-section i,
.social-link .fab,
.social-link i,
.fab.fa-facebook,
.fab.fa-instagram,
.fab.fa-twitter,
.fab.fa-youtube {
background-color: transparent !important;
background: transparent !important;
background-image: none !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
outline-offset: 0 !important;
text-shadow: none !important;
width: auto !important;
height: auto !important;
padding: 0 !important;
margin: 0 !important;
display: inline !important;
color: var(--primary-gold) !important;
}
/* Pseudo-element temizliği */
.social-media-section .fab::before,
.social-media-section .fab::after,
.social-media-section i::before,
.social-media-section i::after,
.social-link .fab::before,
.social-link .fab::after,
.social-link i::before,
.social-link i::after {
background: transparent !important;
border: none !important;
border-radius: 0 !important;
box-shadow: none !important;
outline: none !important;
}
/* Google Maps Styling */
.google-map {
height: 300px;
width: 100%;
border-radius: 12px;
border: 2px solid var(--accent-black);
box-shadow: var(--shadow);
margin-top: 1.5rem;
overflow: hidden;
position: relative;
}
.map-container {
background: var(--primary-black);
border-radius: 15px;
border: 2px solid var(--primary-gold);
overflow: hidden;
transition: var(--transition);
width: 100%;
min-width: 350px;
}
.map-container:hover {
border-color: rgba(255, 215, 0, 0.8);
box-shadow: 0 8px 20px rgba(255, 215, 0, 0.4);
transform: translateY(-3px);
}
/* Mobile responsive maps */
@media (max-width: 768px) {
.google-map {
height: 250px;
margin-top: 1rem;
}
.footer-section .contact-info {
margin-bottom: 1rem;
}
}
@media (max-width: 480px) {
.google-map {
height: 200px;
}
}
/* Maps loading placeholder */
.google-map::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--secondary-black);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Font Awesome', sans-serif;
color: var(--primary-gold);
font-size: 2rem;
z-index: 1;
}
.google-map::before {
content: '🗺️ Harita Yükleniyor...';
font-size: 1rem;
flex-direction: column;
}
.google-map.loaded::before {
display: none;
}
/* Map Fallback Styles */
.map-fallback {
height: 100%;
width: 100%;
background: linear-gradient(135deg, var(--secondary-black), var(--primary-black));
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
border: 1px solid var(--primary-gold);
}
.map-placeholder {
text-align: center;
padding: 2rem;
color: var(--text-light);
}
.map-placeholder i {
font-size: 3rem;
color: var(--primary-gold);
margin-bottom: 1rem;
display: block;
}
.map-placeholder h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.5rem;
margin-bottom: 0.5rem;
}
.map-placeholder p {
color: var(--text-gray);
margin-bottom: 2rem;
font-size: 1.1rem;
}
.map-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.map-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.8rem 1.5rem;
background: var(--gradient-gold);
color: var(--primary-black);
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: var(--transition);
font-size: 0.9rem;
}
.map-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);
color: var(--primary-black);
}
@media (max-width: 768px) {
.map-buttons {
flex-direction: column;
gap: 1rem;
}
.map-btn {
justify-content: center;
}
}
/* Shopping Cart Styles */
/* Nav Cart Button */
.cart-link-btn {
position: relative;
}
.cart-count {
position: absolute;
top: -8px;
right: -8px;
background: var(--primary-gold);
color: var(--primary-black);
border-radius: 50%;
min-width: 18px;
height: 18px;
font-size: 0.7rem;
font-weight: bold;
padding: 2px 6px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1;
}
/* Cart Page Styles */
.cart-page {
padding: 150px 0 80px;
background: transparent;
}
.cart-header {
text-align: center;
margin-bottom: 3rem;
}
.cart-title {
font-size: 2.5rem;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.cart-subtitle {
color: var(--text-gray);
font-size: 1.1rem;
}
.cart-content {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 3rem;
}
/* Empty Cart */
.empty-cart {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
min-height: 360px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 2;
background: var(--primary-black);
}
.empty-cart-content {
text-align: center;
padding: 2rem;
}
.empty-cart .items-list + &,
.empty-cart[style*="display: none"] {
display: none !important;
}
.empty-cart-icon i {
font-size: 4rem;
color: var(--primary-gold);
margin-bottom: 1.5rem;
display: block;
}
.empty-cart h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.8rem;
margin-bottom: 1rem;
}
.empty-cart p {
color: var(--text-gray);
margin-bottom: 2rem;
}
/* Cart Items Section */
.cart-items-section {
background: var(--primary-black);
border-radius: 15px;
border: 1px solid rgba(255, 215, 0, 0.4);
overflow: hidden;
box-shadow: 0 8px 32px rgba(255, 215, 0, 0.1);
}
.cart-items-header {
background: var(--secondary-black);
padding: 1.5rem 2rem;
border-bottom: 1px solid rgba(255, 215, 0, 0.4);
display: flex;
justify-content: space-between;
align-items: center;
}
.cart-items-header h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.3rem;
margin: 0;
}
.items-count {
color: var(--text-gray);
font-size: 0.9rem;
font-weight: 500;
}
.cart-items-container {
height: 400px;
position: relative;
overflow-y: auto;
overflow-x: hidden;
scroll-behavior: smooth;
}
/* Custom scrollbar for cart items */
.cart-items-container::-webkit-scrollbar {
width: 6px;
}
.cart-items-container::-webkit-scrollbar-track {
background: var(--secondary-black);
border-radius: 3px;
}
.cart-items-container::-webkit-scrollbar-thumb {
background: var(--primary-gold);
border-radius: 3px;
transition: background 0.3s ease;
}
.cart-items-container::-webkit-scrollbar-thumb:hover {
background: var(--secondary-gold);
}
/* Items List */
.items-list {
padding: 0.8rem;
display: grid;
gap: 0.6rem;
min-height: fit-content;
}
/* Cart Items */
.cart-items .cart-item,
.items-list .cart-item {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: 0.8rem;
align-items: center;
padding: 0.8rem 1rem;
background: var(--primary-black);
border-radius: 8px;
border: 1px solid rgba(255, 215, 0, 0.3);
transition: var(--transition);
}
.cart-item:hover {
border-color: rgba(255, 215, 0, 0.8);
transform: translateY(-2px);
}
.item-info {
display: flex;
align-items: center;
gap: 1rem;
}
.item-icon {
width: 36px;
height: 36px;
background: var(--gradient-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
color: var(--primary-black);
flex-shrink: 0;
}
.item-details h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1rem;
margin-bottom: 0.2rem;
font-weight: 600;
}
.item-details p {
color: var(--text-gray);
font-size: 0.8rem;
margin-bottom: 0.3rem;
line-height: 1.3;
}
.item-details .item-price {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-weight: 600;
font-size: 0.9rem;
}
.item-controls {
display: flex;
align-items: center;
gap: 0.5rem;
justify-self: end;
margin-left: auto;
}
.quantity-btn {
width: 24px;
height: 24px;
border: 1px solid var(--primary-gold);
background: transparent;
color: var(--primary-gold);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
font-size: 0.8rem;
}
.quantity-btn:hover {
background: var(--primary-gold);
color: var(--primary-black);
}
.quantity {
min-width: 20px;
text-align: center;
color: var(--text-light);
font-weight: 600;
font-size: 0.9rem;
}
.remove-btn {
width: 24px;
height: 24px;
border: 1px solid #e74c3c;
background: transparent;
color: #e74c3c;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: var(--transition);
font-size: 0.7rem;
}
.remove-btn:hover {
background: #e74c3c;
color: white;
}
.item-total {
font-size: 1rem;
font-weight: bold;
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
min-width: 60px;
text-align: right;
justify-self: end;
}
/* Cart Summary */
.summary-card {
background: var(--primary-black);
border-radius: 15px;
border: 1px solid rgba(255, 215, 0, 0.4);
padding: 2rem;
position: sticky;
top: 100px;
}
.summary-card h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.5rem;
margin-bottom: 1.5rem;
text-align: center;
}
.summary-item {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 1px solid var(--accent-black);
}
.summary-item.total {
font-size: 1.2rem;
font-weight: bold;
border-bottom: none;
padding-top: 1rem;
border-top: 2px solid var(--primary-gold);
}
.checkout-btn {
width: 100%;
padding: 1rem 2rem;
background: var(--gradient-gold);
color: var(--primary-black);
border: none;
border-radius: 8px;
font-size: 1.1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 2rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.checkout-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.checkout-btn:not(:disabled):hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}
/* Clear Cart Button */
.clear-cart-btn {
width: 100%;
padding: 0.8rem 2rem;
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.clear-cart-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.clear-cart-btn:not(:disabled):hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(231, 76, 60, 0.6);
}
/* Clear Cart Modal Styles */
.clear-modal .confirmation-content {
max-width: 450px;
}
.clear-modal .modal-buttons {
display: flex;
gap: 1rem;
margin-top: 2rem;
}
.clear-modal .cancel-btn {
flex: 1;
padding: 1rem;
background: var(--accent-black);
color: var(--text-gray);
border: 1px solid var(--accent-black);
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.clear-modal .cancel-btn:hover {
background: var(--secondary-black);
border-color: var(--primary-gold);
}
.clear-modal .confirm-clear-btn {
flex: 1;
padding: 1rem;
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.clear-modal .confirm-clear-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(231, 76, 60, 0.6);
}
/* Cleared Toast Message */
.cart-toast.cleared-message {
background: linear-gradient(135deg, #e74c3c, #c0392b);
color: white;
}
/* Modal Styles */
.modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.modal.show {
opacity: 1;
visibility: visible;
}
.modal-content {
background: var(--primary-black);
border-radius: 15px;
border: 1px solid var(--primary-gold);
max-width: 500px;
width: 90%;
max-height: 90vh;
overflow-y: auto;
}
.modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.5rem;
border-bottom: 1px solid var(--accent-black);
}
.modal-header h3 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 1.3rem;
}
.modal-close {
background: none;
border: none;
color: var(--text-gray);
font-size: 1.5rem;
cursor: pointer;
transition: var(--transition);
}
.modal-close:hover {
color: var(--primary-gold);
}
.checkout-form {
padding: 1.5rem;
}
.confirm-order-btn {
width: 100%;
padding: 1rem 2rem;
background: var(--gradient-gold);
color: var(--primary-black);
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
margin-top: 2rem;
}
.confirm-order-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}
.form-group input,
.form-group select {
width: 100%;
padding: 0.8rem;
border: 1px solid var(--accent-black);
border-radius: 8px;
background: var(--secondary-black);
color: var(--text-light);
font-size: 1rem;
transition: var(--transition);
}
.form-group input:focus,
.form-group select:focus {
outline: none;
border-color: var(--primary-gold);
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.2);
}
/* Confirmation Modal */
.confirmation-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: flex;
align-items: center;
justify-content: center;
z-index: 3000;
opacity: 0;
visibility: hidden;
transition: all 0.3s ease;
}
.confirmation-modal.show {
opacity: 1;
visibility: visible;
}
.confirmation-content {
background: var(--primary-black);
border-radius: 15px;
border: 1px solid var(--primary-gold);
padding: 2rem;
text-align: center;
max-width: 400px;
width: 90%;
}
.confirmation-icon i {
font-size: 4rem;
color: var(--primary-gold);
margin-bottom: 1rem;
}
.confirmation-content h2 {
background: var(--gradient-gold);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 2rem;
margin: 1rem 0;
}
.order-details {
background: var(--secondary-black);
border-radius: 8px;
padding: 1rem;
margin: 1.5rem 0;
text-align: left;
}
.order-details p {
margin: 0.5rem 0;
color: var(--text-gray);
}
.confirmation-btn {
padding: 1rem 2rem;
background: var(--gradient-gold);
color: var(--primary-black);
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: var(--transition);
}
.confirmation-btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(255, 215, 0, 0.6);
}
/* Toast Notification */
.cart-toast {
position: fixed;
top: 100px;
right: 20px;
background: var(--gradient-gold);
color: var(--primary-black);
padding: 1rem 2rem;
border-radius: 8px;
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
z-index: 4000;
transform: translateX(400px);
transition: transform 0.3s ease;
}
.cart-toast.show {
transform: translateX(0);
}
/* Add to Cart Button */
/* Mobile Responsive */
@media (max-width: 768px) {
.cart-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.cart-items-header {
padding: 1rem;
flex-direction: column;
gap: 0.5rem;
text-align: center;
}
.cart-items .cart-item,
.items-list .cart-item {
grid-template-columns: auto 1fr auto auto;
gap: 0.6rem;
text-align: left;
padding: 0.6rem 0.8rem;
}
.menu-item {
padding: 0.8rem;
gap: 0.8rem;
}
.menu-item .item-image {
width: 60px;
height: 60px;
}
.menu-item .item-content {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.menu-item .item-info {
flex: 1;
}
.menu-item .item-details h3 {
font-size: 0.85rem;
}
.menu-item .item-details p {
font-size: 0.7rem;
}
.menu-item .item-price {
font-size: 1rem;
position: static;
flex-shrink: 0;
}
.category-title {
font-size: 1.5rem;
}
.category-title i {
font-size: 1.2rem;
}
.item-info h3 {
font-size: 1.1rem;
margin: 0;
}
.item-info {
flex-direction: row;
text-align: left;
gap: 0.6rem;
}
.item-icon {
width: 30px;
height: 30px;
font-size: 0.9rem;
}
.item-details h3 {
font-size: 0.9rem;
}
.item-details p {
font-size: 0.75rem;
}
.item-controls {
justify-content: flex-end;
margin-left: auto;
}
.cart-count {
top: -5px;
right: -5px;
width: 18px;
height: 18px;
font-size: 0.6rem;
}
.modal-content {
margin: 20px;
width: calc(100% - 40px);
}
.cart-items-container {
height: 300px;
}
.empty-cart {
min-height: 260px;
}
}
@media (max-width: 480px) {
.cart-page {
padding: 120px 0 60px;
}
.cart-title {
font-size: 2rem;
}
.summary-card {
padding: 1.5rem;
}
.cart-toast {
top: 80px;
right: 10px;
left: 10px;
transform: translateY(-400px);
}
.cart-toast.show {
transform: translateY(0);
}
}
/* Scrollbar Styling */
::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--primary-black);
}
::-webkit-scrollbar-thumb {
background: var(--primary-gold);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--secondary-gold);
}