/* ========== RESPONSIVE DESIGN ENHANCEMENTS ========== */
/* Extra Large Screens */
@media (min-width: 1400px) {
.hero-title {
font-size: var(--font-size-6xl);
}
.section-title {
font-size: var(--font-size-5xl);
}
.hero-content {
padding: var(--space-20) 0;
}
.featured-categories,
.about-preview,
.qr-menu,
.contact-info {
padding: var(--space-32) 0;
}
}
/* Large Screens */
@media (min-width: 1200px) and (max-width: 1399px) {
.container {
padding: 0 var(--space-6);
}
.categories-grid {
grid-template-columns: repeat(4, 1fr);
}
}
/* Medium Screens */
@media (min-width: 768px) and (max-width: 991px) {
.container {
padding: 0 var(--space-5);
}
.navbar-nav {
gap: var(--space-6);
}
.hero-title {
font-size: var(--font-size-4xl);
}
.hero-description {
font-size: var(--font-size-lg);
}
.categories-grid {
grid-template-columns: repeat(2, 1fr);
gap: var(--space-6);
}
.contact-grid {
grid-template-columns: repeat(2, 1fr);
}
.footer-content {
grid-template-columns: repeat(2, 1fr);
}
.qr-code img {
width: 150px;
height: 150px;
}
}
/* Small Screens */
@media (min-width: 576px) and (max-width: 767px) {
.container {
padding: 0 var(--space-4);
}
.hero {
min-height: 450px;
}
.hero-content {
padding: var(--space-10) 0;
}
.hero-title {
font-size: var(--font-size-3xl);
margin-bottom: var(--space-4);
}
.hero-description {
font-size: var(--font-size-base);
margin-bottom: var(--space-6);
}
.hero-actions {
flex-direction: column;
align-items: center;
max-width: 300px;
margin: 0 auto;
}
.hero-actions .btn {
width: 100%;
justify-content: center;
}
.section-title {
font-size: var(--font-size-3xl);
}
.about-title,
.qr-title {
font-size: var(--font-size-3xl);
}
.categories-grid {
grid-template-columns: 1fr;
gap: var(--space-6);
}
.category-card {
max-width: 400px;
margin: 0 auto;
}
.about-features {
flex-direction: column;
align-items: center;
}
.feature {
width: 100%;
max-width: 300px;
justify-content: center;
}
.qr-features {
max-width: 400px;
margin: 0 auto;
}
.qr-code img {
width: 120px;
height: 120px;
}
.contact-grid {
grid-template-columns: 1fr;
gap: var(--space-4);
}
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-8);
text-align: center;
}
.social-links {
justify-content: center;
}
}
/* Extra Small Screens */
@media (max-width: 575px) {
.container {
padding: 0 var(--space-3);
}
/* Header Adjustments */
.header {
height: 70px;
}
.navbar-brand .logo {
height: 35px;
}
.brand-text {
font-size: var(--font-size-lg);
}
.navbar-actions {
gap: var(--space-2);
}
.search-btn,
.cart-btn,
.user-btn {
width: 36px;
height: 36px;
}
.cart-count {
min-width: 16px;
height: 16px;
font-size: 10px;
}
/* Mobile Navigation */
.mobile-nav {
top: 0;
bottom: 0;
height: 100vh;
}
.mobile-nav-content {
padding: var(--space-3);
}
.mobile-nav-link {
padding: var(--space-3);
font-size: var(--font-size-sm);
}
/* Hero Section */
.hero {
min-height: 400px;
}
.hero-content {
padding: var(--space-8) 0;
}
.hero-title {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-3);
}
.hero-description {
font-size: var(--font-size-sm);
margin-bottom: var(--space-4);
}
.hero-actions {
gap: var(--space-3);
}
.hero-actions .btn {
font-size: var(--font-size-sm);
padding: 0 var(--space-4);
min-height: 44px;
}
.hero-badge {
min-width: 100px;
padding: var(--space-3);
}
.hero-badge span {
font-size: var(--font-size-sm);
}
.hero-badge small {
font-size: var(--font-size-xs);
}
/* Featured Categories */
.featured-categories,
.about-preview,
.qr-menu,
.contact-info {
padding: var(--space-16) 0;
}
.section-header {
margin-bottom: var(--space-8);
}
.section-title {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-3);
}
.section-description {
font-size: var(--font-size-sm);
}
.category-image {
height: 200px;
}
.category-content {
padding: var(--space-4);
}
.category-title {
font-size: var(--font-size-lg);
}
.category-description {
font-size: var(--font-size-sm);
margin-bottom: var(--space-3);
}
/* About Section */
.about-title,
.qr-title {
font-size: var(--font-size-2xl);
margin-bottom: var(--space-4);
}
.about-description,
.qr-description {
font-size: var(--font-size-sm);
margin-bottom: var(--space-6);
}
.about-features {
flex-direction: column;
gap: var(--space-4);
}
.feature {
width: 100%;
justify-content: center;
padding: var(--space-3);
}
.feature i {
font-size: var(--font-size-lg);
}
/* QR Section */
.qr-features {
flex-direction: column;
gap: var(--space-4);
}
.qr-feature {
width: 100%;
justify-content: center;
}
.qr-code {
padding: var(--space-4);
}
.qr-code img {
width: 100px;
height: 100px;
}
.qr-code p {
font-size: var(--font-size-sm);
margin-top: var(--space-2);
}
/* Contact Section */
.contact-card {
padding: var(--space-4);
}
.contact-icon {
width: 50px;
height: 50px;
font-size: var(--font-size-lg);
}
.contact-content h3 {
font-size: var(--font-size-lg);
margin-bottom: var(--space-2);
}
.contact-content p {
font-size: var(--font-size-sm);
}
/* Footer */
.footer {
padding: var(--space-8) 0 var(--space-4);
}
.footer-content {
grid-template-columns: 1fr;
gap: var(--space-6);
text-align: center;
}
.footer-logo img {
height: 40px;
}
.footer-logo h3 {
font-size: var(--font-size-xl);
}
.footer-description {
font-size: var(--font-size-sm);
margin-bottom: var(--space-4);
}
.footer-title {
font-size: var(--font-size-lg);
margin-bottom: var(--space-3);
}
.footer-links li {
margin-bottom: var(--space-2);
}
.footer-links a {
font-size: var(--font-size-sm);
}
.social-link {
width: 40px;
height: 40px;
font-size: var(--font-size-sm);
}
.contact-item {
font-size: var(--font-size-sm);
}
.footer-bottom {
padding-top: var(--space-4);
}
.footer-bottom-content {
flex-direction: column;
gap: var(--space-3);
text-align: center;
}
.footer-bottom-links {
justify-content: center;
gap: var(--space-4);
}
/* Cookie Notice */
.cookie-notice {
padding: var(--space-4);
}
.cookie-text p {
font-size: var(--font-size-sm);
margin-bottom: var(--space-3);
}
/* Search Overlay */
.search-overlay {
padding: var(--space-4);
}
.search-container {
max-width: 100%;
}
.search-box input {
font-size: var(--font-size-base);
padding: var(--space-3) var(--space-4);
}
.search-submit {
width: 44px;
height: 44px;
}
.search-close {
width: 44px;
height: 44px;
}
/* Toast Notifications */
.toast-container {}
.toast {
margin-bottom: var(--space-3);
padding: var(--space-4);
}
/* User Dropdown */
.user-dropdown {
min-width: 280px;
right: -10px;
}
/* Modal */
.modal {
margin: var(--space-4);
max-width: calc(100% - var(--space-8));
}
.modal-header,
.modal-body,
.modal-footer {
padding: var(--space-4);
}
.modal-title {
font-size: var(--font-size-lg);
}
}
/* Landscape Mobile */
@media (max-width: 767px) and (orientation: landscape) {
.hero {
min-height: 300px;
}
.hero-content {
padding: var(--space-6) 0;
}
.featured-categories,
.about-preview,
.qr-menu,
.contact-info {
padding: var(--space-12) 0;
}
.section-header {
margin-bottom: var(--space-6);
}
}
/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.hero-img,
.category-image img,
.about-image img,
.qr-code img {
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
}
}
/* Print Styles */
@media print {
.header,
.footer,
.mobile-nav,
.search-overlay,
.cookie-notice,
.toast-container {
display: none !important;
}
.main {
margin-top: 0;
}
.hero,
.featured-categories,
.about-preview,
.qr-menu,
.contact-info {
page-break-inside: avoid;
margin-bottom: var(--space-8);
}
.category-card,
.contact-card {
page-break-inside: avoid;
border: 1px solid var(--color-gray-300);
}
.footer {
display: none;
}
* {
color: var(--color-black) !important;
background: var(--color-white) !important;
}
.qr-code {
border: 1px solid var(--color-gray-300);
}
}
/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
.hero-decoration .decoration-circle {
animation: none;
}
.loading-spinner {
animation: none;
}
.skeleton {
animation: none;
}
.category-card:hover {
transform: none;
}
.contact-card:hover {
transform: none;
}
.btn:hover {
transform: none;
}
.social-link:hover {
transform: none;
}
.category-link:hover i {
transform: none;
}
}
.category-title,
.contact-content h3 {
color: var(--color-text-primary);
}
.category-description,
.contact-content p {
color: var(--color-text-secondary);
}
/* Footer */
.footer {
background-color: var(--footer-bg);
color: var(--footer-text);
}
.footer-links a {
color: var(--footer-link-color);
}
.footer-links a:hover {
color: var(--footer-link-hover-color);
}
.footer-bottom {
border-color: var(--footer-border);
}
.footer-bottom-links a {
color: var(--footer-link-color);
}
.footer-bottom-links a:hover {
color: var(--footer-link-hover-color);
}
/* Social Links */
.social-link {
background-color: var(--color-gray-700);
color: var(--color-white);
}
.social-link:hover {
background-color: var(--color-primary);
color: var(--color-white);
}
/* Contact Items */
.contact-item {
color: var(--color-text-secondary);
}
.contact-item i {
color: var(--color-primary);
}
/* Section Titles */
.section-title,
.about-title,
.qr-title {
color: var(--color-text-primary);
}
.section-description,
.about-description,
.qr-description {
color: var(--color-text-secondary);
}
/* Features */
.feature span {
color: var(--color-text-primary);
}
.feature i {
color: var(--color-primary);
}
/* QR Features */
.qr-feature span {
color: var(--color-text-primary);
}
.qr-feature i {
color: var(--color-primary);
}
}
}
/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
.btn:hover,
.nav-link:hover,
.category-link:hover,
.social-link:hover,
.dropdown-link:hover {
transform: none;
box-shadow: none;
}
.category-card:hover .category-image img {
transform: none;
}
.btn {
min-height: 44px;
padding: 0 var(--space-6);
}
.nav-link {
padding: var(--space-3) var(--space-4);
}
.mobile-nav-link {
padding: var(--space-4);
min-height: 44px;
}
.search-btn,
.cart-btn,
.user-btn {
min-width: 44px;
min-height: 44px;
}
.dropdown-link {
padding: var(--space-3) var(--space-4);
min-height: 44px;
}
.social-link {
min-width: 44px;
min-height: 44px;
}
}
/* Ultra Wide Screens */
@media (min-width: 1600px) {
.container {
max-width: var(--container-2xl);
}
.hero-content .container {
max-width: 1400px;
}
.about-content,
.qr-content {
max-width: 1200px;
margin: 0 auto;
}
.categories-grid {
max-width: 1400px;
margin: 0 auto;
}
}
/* Mobile Navigation Enhancements */
@media (max-width: 768px) {
/* Show mobile menu button */
.mobile-menu-btn {
display: flex !important;
}
/* Hide desktop navigation */
.header-nav {
display: none !important;
}
/* Ensure header actions are properly spaced */
.header-actions {
gap: var(--space-3);
}
/* Make mobile menu button more prominent */
.mobile-menu-btn {
width: 40px;
height: 40px;
background-color: var(--color-gray-100);
border: 1px solid var(--color-gray-200);
}
.mobile-menu-btn:hover {
background-color: var(--color-gray-200);
}
/* Ensure mobile nav is properly styled */
.mobile-nav {
background-color: var(--color-white);
border-top: 1px solid var(--color-gray-200);
}
.mobile-nav-link {
color: var(--color-text-primary);
border-bottom: 1px solid var(--color-gray-100);
}
.mobile-nav-link:hover,
.mobile-nav-link.active {
background-color: var(--color-gray-50);
color: var(--color-primary);
}
.mobile-dropdown-menu {
background-color: var(--color-gray-50);
}
.mobile-dropdown-menu a {
color: var(--color-text-secondary);
padding: var(--space-3) var(--space-6);
}
.mobile-dropdown-menu a:hover {
background-color: var(--color-gray-100);
color: var(--color-primary);
}
/* Mobile user menu improvements */
.mobile-user-info {
background-color: var(--color-gray-50);
border-bottom: 1px solid var(--color-gray-200);
}
.mobile-auth-btn {
color: var(--color-text-primary);
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
}
.mobile-auth-btn.primary {
background-color: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.mobile-user-welcome {
background-color: var(--color-primary-50);
}
.mobile-user-name {
color: var(--color-text-primary);
}
.mobile-user-points {
color: var(--color-text-secondary);
}
/* Mobile actions */
.mobile-actions {
background-color: var(--color-white);
border-top: 1px solid var(--color-gray-200);
}
.mobile-action-btn {
color: var(--color-text-primary);
background-color: var(--color-white);
border: 1px solid var(--color-gray-200);
}
.mobile-action-btn:hover {
background-color: var(--color-gray-50);
color: var(--color-primary);
}
.mobile-cart-count {
background-color: var(--color-secondary);
color: var(--color-white);
}
}
/* ========== ANASAYFA ÖZEL MODERN CSS ========== */
:root {
--anasayfa-primary: var(--color-primary);
--anasayfa-secondary: var(--color-primary-light);
--anasayfa-accent: var(--color-accent);
--anasayfa-bg: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 50%, var(--color-accent) 100%);
--anasayfa-text: var(--color-text-light);
--anasayfa-card-bg: var(--color-white);
--anasayfa-card-radius: 20px;
--anasayfa-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
--anasayfa-font: 'Montserrat', 'Arial', sans-serif;
}
body.anasayfa {
background: var(--color-bg-primary);
color: var(--color-text-primary);
font-family: var(--font-primary);
}
.hero-restaurant {
position: relative;
min-height: 100vh;
background: var(--anasayfa-bg);
overflow: hidden;
display: flex;
align-items: center;
margin-top: var(--header-height);
}
.hero-restaurant--spaced {
margin-top: 80px;
}
.hero-restaurant .hero-bg-animation {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.hero-restaurant .floating-element {
position: absolute;
font-size: 3rem;
animation: float 6s ease-in-out infinite;
opacity: 0.1;
}
.hero-restaurant .food-1 {
top: 10%;
left: 10%;
animation-delay: 0s;
}
.hero-restaurant .food-2 {
top: 20%;
right: 15%;
animation-delay: 1s;
}
.hero-restaurant .food-3 {
top: 60%;
left: 5%;
animation-delay: 2s;
}
.hero-restaurant .food-4 {
top: 40%;
right: 10%;
animation-delay: 3s;
}
.hero-restaurant .food-5 {
bottom: 30%;
left: 20%;
animation-delay: 4s;
}
.hero-restaurant .food-6 {
bottom: 20%;
right: 25%;
animation-delay: 5s;
}
@keyframes float {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-20px) rotate(10deg);
}
}
.hero-restaurant .hero-content-restaurant {
position: relative;
z-index: 2;
width: 100%;
}
.hero-restaurant .container {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 48px;
}
.hero-restaurant .hero-text-restaurant {
color: var(--color-text-light);
max-width: 600px;
flex: 1 1 350px;
}
.hero-restaurant .hero-badge-restaurant {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.28);
border-radius: 25px;
padding: 0.5rem 1.5rem;
margin-bottom: 2rem;
animation: pulse 2s ease-in-out infinite;
}
.hero-restaurant .badge-icon {
font-size: 1.2rem;
}
.hero-restaurant .badge-text {
font-weight: 600;
font-size: 0.9rem;
}
@keyframes pulse {
0%,
100% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
}
.hero-restaurant .hero-title-restaurant {
font-size: 4rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.5rem;
animation: slideInUp 1s ease-out;
}
.hero-restaurant .title-line,
.hero-restaurant .title-accent {
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
.hero-restaurant .brand-name {
display: block;
font-size: 2.5rem;
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-dark));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-top: 0.5rem;
text-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.hero-restaurant .hero-description-restaurant {
font-size: 1.2rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
animation: slideInUp 1s ease-out 0.3s both;
}
.hero-restaurant .hero-stats-restaurant {
display: flex;
gap: 2rem;
margin-bottom: 2.5rem;
animation: slideInUp 1s ease-out 0.6s both;
}
.hero-restaurant .stat-item {
text-align: center;
background: rgba(255, 255, 255, 0.85);
/* Açık tema için okunabilir arka plan */
border-radius: 18px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.07);
padding: 1.1rem 1.2rem 0.7rem 1.2rem;
margin-bottom: 0.5rem;
display: flex;
flex-direction: column;
align-items: center;
min-width: 120px;
max-width: 180px;
}
.hero-restaurant .stat-number {
display: block;
font-size: 1.8rem;
font-weight: 700;
color: var(--color-primary);
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
opacity: 0.96;
}
.hero-restaurant .stat-label {
font-size: 1rem;
color: var(--color-text-primary);
opacity: 0.92;
font-weight: 500;
margin-top: 0.2rem;
}
@media (max-width: 600px) {
.hero-restaurant .stat-item {
min-width: 90px;
max-width: 120px;
padding: 0.7rem 0.5rem 0.5rem 0.5rem;
}
.hero-restaurant .stat-number {
font-size: 1.2rem;
}
.hero-restaurant .stat-label {
font-size: 0.85rem;
}
.hero-restaurant .hero-stats-restaurant {
flex-direction: row !important;
overflow-x: auto;
gap: 0.7rem;
padding-bottom: 0.5rem;
margin-bottom: 1.2rem;
justify-content: flex-start;
align-items: stretch;
scrollbar-width: none;
}
.hero-restaurant .hero-stats-restaurant::-webkit-scrollbar {
display: none;
}
}
.hero-restaurant .hero-actions-restaurant {
display: flex;
gap: 1rem;
animation: slideInUp 1s ease-out 0.9s both;
}
.hero-restaurant .btn-restaurant {
position: relative;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
border-radius: 50px;
text-decoration: none;
font-weight: 600;
font-size: 1rem;
transition: all 0.3s ease;
overflow: hidden;
}
.hero-restaurant .btn-primary-restaurant {
background: linear-gradient(45deg, var(--color-white), var(--color-bg-alt));
color: var(--color-primary);
box-shadow: 0 8px 25px rgba(255, 255, 255, 0.18);
}
.hero-restaurant .btn-secondary-restaurant {
background: rgba(255, 255, 255, 0.10);
color: var(--color-text-light);
border: 2px solid rgba(255, 255, 255, 0.28);
backdrop-filter: blur(10px);
}
.hero-restaurant .btn-restaurant:hover {
transform: translateY(-3px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.18);
}
.hero-restaurant .btn-glow {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.hero-restaurant .btn-restaurant:hover .btn-glow {
width: 300px;
height: 300px;
}
.hero-restaurant .hero-visual-restaurant {
position: relative;
flex: 1 1 350px;
display: flex;
align-items: center;
justify-content: center;
min-width: 340px;
min-height: 340px;
max-width: 420px;
margin: 0 auto;
}
.hero-restaurant .hero-image-restaurant {
position: relative;
max-width: 500px;
margin: 0 auto;
}
.hero-restaurant .image-stack-restaurant {
position: relative;
width: 340px;
height: 340px;
display: flex;
align-items: center;
justify-content: center;
}
.hero-restaurant .stack-item {
position: absolute;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
transition: all 0.3s cubic-bezier(.4, 2, .6, 1);
}
.hero-restaurant .stack-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-restaurant .stack-1 {
width: 210px;
height: 140px;
top: 0;
left: 60px;
z-index: 3;
transform: rotate(-6deg);
}
.hero-restaurant .stack-2 {
width: 180px;
height: 120px;
top: 90px;
right: 0;
z-index: 2;
transform: rotate(8deg);
}
.hero-restaurant .stack-3 {
width: 140px;
height: 100px;
bottom: 0;
left: 0;
z-index: 1;
transform: rotate(-4deg);
}
.hero-restaurant .floating-badges {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
}
.hero-restaurant .floating-badge {
position: absolute;
background: rgba(255, 255, 255, 0.92);
padding: 0.35rem 1rem;
border-radius: 16px;
font-weight: 600;
font-size: 0.95rem;
color: var(--color-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
opacity: 0.95;
display: flex;
align-items: center;
gap: 0.4em;
}
.hero-restaurant .badge-1 {
top: 10px;
right: 18px;
}
.hero-restaurant .badge-2 {
bottom: 18px;
left: 18px;
}
.hero-restaurant .badge-3 {
bottom: 10px;
right: 30px;
}
@keyframes stackFloat {
0%,
100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(2deg);
}
}
@keyframes badgeFloat {
0%,
100% {
transform: translateY(0px);
}
50% {
transform: translateY(-5px);
}
}
.hero-restaurant .scroll-indicator-restaurant {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
color: var(--color-text-light);
text-align: center;
animation: bounce 2s ease-in-out infinite;
}
.hero-restaurant .scroll-arrow {
width: 2px;
height: 30px;
background: var(--color-text-light);
margin: 0 auto 0.5rem;
position: relative;
}
.hero-restaurant .scroll-arrow::after {
content: '';
position: absolute;
bottom: 0;
left: -3px;
width: 8px;
height: 8px;
border-right: 2px solid var(--color-text-light);
border-bottom: 2px solid var(--color-text-light);
transform: rotate(45deg);
}
@keyframes bounce {
0%,
20%,
50%,
80%,
100% {
transform: translateX(-50%) translateY(0);
}
40% {
transform: translateX(-50%) translateY(-10px);
}
60% {
transform: translateX(-50%) translateY(-5px);
}
}
/* --- CATEGORIES RESTAURANT --- */
.categories-restaurant {
padding: 5rem 0;
background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%);
position: relative;
overflow: hidden;
}
.categories-restaurant::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url('data:image/svg+xml,');
opacity: 0.5;
}
.categories-restaurant .section-header-restaurant {
text-align: center;
margin-bottom: 4rem;
position: relative;
z-index: 2;
}
.categories-restaurant .header-icon-restaurant {
display: inline-block;
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light));
color: var(--color-white);
width: 60px;
height: 60px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
margin-bottom: 1.5rem;
box-shadow: 0 10px 25px var(--color-primary-100, rgba(0, 0, 0, 0.13));
animation: rotate 10s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.categories-restaurant .section-title-restaurant {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.categories-restaurant .title-main {
font-size: 3rem;
font-weight: 800;
color: var(--color-text-primary);
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.categories-restaurant .title-sub {
font-size: 1.2rem;
color: var(--color-text-secondary);
font-weight: 400;
}
.categories-restaurant .categories-grid-restaurant {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
position: relative;
z-index: 2;
}
.categories-restaurant .category-card-restaurant {
position: relative;
background: var(--color-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px var(--color-border, rgba(0, 0, 0, 0.10));
transition: all 0.3s ease;
cursor: pointer;
}
.categories-restaurant .category-card-restaurant:hover {
transform: translateY(-10px);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
}
.categories-restaurant .card-glow-restaurant {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light));
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
}
.categories-restaurant .category-card-restaurant:hover .card-glow-restaurant {
opacity: 0.1;
}
.categories-restaurant .category-image-restaurant {
position: relative;
height: 200px;
overflow: hidden;
}
.categories-restaurant .category-image-restaurant img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.categories-restaurant .category-card-restaurant:hover .category-image-restaurant img {
transform: scale(1.1);
}
.categories-restaurant .image-overlay-restaurant {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.categories-restaurant .category-card-restaurant:hover .image-overlay-restaurant {
opacity: 1;
}
.categories-restaurant .overlay-content-restaurant {
text-align: center;
color: var(--color-white);
}
.categories-restaurant .category-icon-restaurant {
font-size: 2rem;
display: block;
margin-bottom: 0.5rem;
}
.categories-restaurant .category-count-restaurant {
font-weight: 600;
font-size: 0.9rem;
}
.categories-restaurant .category-content-restaurant {
padding: 1.5rem;
}
.categories-restaurant .category-title-restaurant {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
}
.categories-restaurant .category-description-restaurant {
color: var(--color-text-secondary);
margin-bottom: 1rem;
line-height: 1.5;
}
.categories-restaurant .category-features-restaurant {
display: flex;
gap: 0.5rem;
margin-bottom: 1.5rem;
flex-wrap: wrap;
}
.categories-restaurant .feature-restaurant {
background: linear-gradient(45deg, var(--color-primary), var(--color-primary-light));
color: var(--color-white);
padding: 0.3rem 0.8rem;
border-radius: 15px;
font-size: 0.8rem;
font-weight: 600;
}
.categories-restaurant .category-link-restaurant {
display: flex;
align-items: center;
justify-content: space-between;
text-decoration: none;
color: var(--color-primary);
font-weight: 600;
padding: 0.8rem 1.5rem;
background: var(--color-primary-50, rgba(0, 0, 0, 0.05));
border-radius: 25px;
transition: all 0.3s ease;
}
.categories-restaurant .category-link-restaurant:hover {
background: var(--color-primary);
color: var(--color-white);
transform: translateX(5px);
}
.categories-restaurant .link-arrow-restaurant {
font-size: 1.2rem;
transition: transform 0.3s ease;
}
.categories-restaurant .category-link-restaurant:hover .link-arrow-restaurant {
transform: translateX(5px);
}
@media (max-width: 991px) {
.hero-restaurant .container {
flex-direction: column;
gap: 32px;
text-align: center;
}
.hero-restaurant .hero-title-restaurant {
font-size: 2.5rem;
}
.hero-restaurant .brand-name {
font-size: 2rem;
}
.hero-restaurant .hero-stats-restaurant {
flex-direction: column;
gap: 1rem;
}
.hero-restaurant .hero-actions-restaurant {
flex-direction: column;
}
.categories-restaurant .categories-grid-restaurant {
grid-template-columns: 1fr;
}
.categories-restaurant .title-main {
font-size: 2rem;
}
.hero-restaurant .hero-visual-restaurant {
min-width: 220px;
min-height: 220px;
max-width: 320px;
}
.hero-restaurant .image-stack-restaurant {
width: 220px;
height: 220px;
}
.hero-restaurant .stack-1 {
width: 120px;
height: 80px;
top: 0;
left: 40px;
}
.hero-restaurant .stack-2 {
width: 100px;
height: 70px;
top: 60px;
right: 0;
}
.hero-restaurant .stack-3 {
width: 80px;
height: 60px;
bottom: 0;
left: 0;
}
}
@media (max-width: 575px) {
.hero-restaurant .hero-title-restaurant {
font-size: 2rem;
}
.hero-restaurant .brand-name {
font-size: 1.5rem;
}
.hero-restaurant .hero-description-restaurant {
font-size: 1rem;
}
.hero-restaurant .btn-restaurant {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
.hero-restaurant .hero-visual-restaurant {
min-width: 100px;
min-height: 100px;
max-width: 100vw;
margin-top: 32px;
}
.hero-restaurant .image-stack-restaurant {
width: 100vw;
height: 120px;
min-width: 0;
min-height: 0;
}
.hero-restaurant .stack-1 {
width: 80px;
height: 50px;
top: 0;
left: 30vw;
}
.hero-restaurant .stack-2 {
width: 60px;
height: 40px;
top: 40px;
right: 10vw;
}
.hero-restaurant .stack-3 {
width: 50px;
height: 35px;
bottom: 0;
left: 10vw;
}
.hero-restaurant .floating-badge {
font-size: 0.7rem;
padding: 0.2rem 0.7rem;
}
.hero-restaurant--spaced {
margin-top: 0;
}
}
/* --- HERO TAM ORTALAMA VE SADELEŞTİRME --- */
.hero-restaurant .hero-content-restaurant.hero-centered {
display: flex;
align-items: center;
justify-content: center;
min-height: 90vh;
width: 100%;
position: relative;
z-index: 2;
text-align: center;
}
.hero-restaurant .container {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
min-height: 90vh;
flex-direction: column;
gap: 0;
}
.hero-restaurant .hero-text-restaurant {
margin: 0 auto;
max-width: 700px;
color: var(--color-text-light);
z-index: 2;
}
.hero-restaurant .hero-stats-restaurant {
justify-content: center;
}
.hero-restaurant .hero-actions-restaurant {
justify-content: center;
}
/* Sağdaki görsel galeri ve ilgili stilleri kaldırıldı */
.modern-hero-gallery,
.main-hero-img,
.side-hero-imgs,
.side-img,
.main-badge,
.side-badge {
display: none !important;
}
/* Emoji animasyonlarını artır ve farklılaştır */
.hero-restaurant .hero-bg-animation {
pointer-events: none;
z-index: 1;
}
.hero-restaurant .floating-element {
position: absolute;
opacity: 0.13;
font-size: 3.5rem;
animation: float-emoji 8s ease-in-out infinite;
user-select: none;
}
.hero-restaurant .food-1 {
top: 8%;
left: 12%;
animation-delay: 0s;
}
.hero-restaurant .food-2 {
top: 18%;
right: 10%;
animation-delay: 1.2s;
}
.hero-restaurant .food-3 {
top: 60%;
left: 7%;
animation-delay: 2.1s;
}
.hero-restaurant .food-4 {
top: 40%;
right: 13%;
animation-delay: 3.1s;
}
.hero-restaurant .food-5 {
bottom: 28%;
left: 18%;
animation-delay: 4.2s;
}
.hero-restaurant .food-6 {
bottom: 18%;
right: 22%;
animation-delay: 5.1s;
}
.hero-restaurant .food-7 {
top: 30%;
left: 40%;
animation-delay: 2.7s;
}
.hero-restaurant .food-8 {
top: 70%;
right: 30%;
animation-delay: 3.7s;
}
.hero-restaurant .food-9 {
bottom: 10%;
left: 50%;
animation-delay: 1.7s;
}
.hero-restaurant .food-10 {
top: 55%;
right: 50%;
animation-delay: 4.7s;
}
.hero-restaurant .food-11 {
top: 80%;
left: 80%;
animation-delay: 2.3s;
}
.hero-restaurant .food-12 {
bottom: 5%;
right: 10%;
animation-delay: 5.7s;
}
@keyframes float-emoji {
0%,
100% {
transform: translateY(0px) scale(1) rotate(0deg);
}
20% {
transform: translateY(-18px) scale(1.08) rotate(8deg);
}
50% {
transform: translateY(-32px) scale(1.13) rotate(-8deg);
}
80% {
transform: translateY(-18px) scale(1.08) rotate(8deg);
}
}
@media (max-width: 991px) {
.hero-restaurant .hero-content-restaurant.hero-centered,
.hero-restaurant .container {
min-height: 70vh;
padding-top: 2rem;
padding-bottom: 2rem;
}
.hero-restaurant .hero-title-restaurant {
font-size: 2.2rem;
}
}
@media (max-width: 575px) {
.hero-restaurant .hero-content-restaurant.hero-centered,
.hero-restaurant .container {
min-height: 60vh;
padding-top: 1rem;
padding-bottom: 1rem;
}
.hero-restaurant .hero-title-restaurant {
font-size: 1.3rem;
}
.hero-restaurant .floating-element {
font-size: 2.1rem;
}
}
/* HERO BAŞLIK TEK SATIR VE RESPONSIVE DÜZENLEME */
.hero-title-restaurant .title-line {
display: inline;
background: none;
-webkit-background-clip: unset;
-webkit-text-fill-color: unset;
background-clip: unset;
}
.hero-title-restaurant .title-accent {
display: inline;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-title-restaurant {
font-size: 3.2rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.2rem;
word-break: break-word;
white-space: normal;
}
@media (max-width: 991px) {
.hero-title-restaurant {
font-size: 2.1rem;
}
.hero-description-restaurant {
font-size: 1.05rem;
}
.hero-badge-restaurant {
font-size: 0.95rem;
}
.hero-stats-restaurant {
gap: 1.2rem;
}
.hero-actions-restaurant {
gap: 0.7rem;
}
}
@media (max-width: 575px) {
.hero-title-restaurant {
font-size: 1.25rem;
margin-bottom: 0.7rem;
}
.brand-name {
font-size: 1rem;
}
.hero-description-restaurant {
font-size: 0.95rem;
margin-bottom: 1rem;
}
.hero-badge-restaurant {
font-size: 0.85rem;
padding: 0.3rem 1rem;
margin-bottom: 1rem;
}
.hero-stats-restaurant {
flex-direction: column;
gap: 0.5rem;
margin-bottom: 1.2rem;
}
.hero-actions-restaurant {
flex-direction: column;
gap: 0.5rem;
}
.btn-restaurant {
padding: 0.7rem 1.1rem;
font-size: 0.95rem;
}
}
/* --- MODERN ABOUT PREVIEW --- */
.modern-about {
display: flex;
align-items: center;
gap: 3rem;
margin: 0 auto;
justify-content: center;
}
.modern-about-image {
position: relative;
flex: 1 1 350px;
max-width: 420px;
border-radius: 32px;
overflow: hidden;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.13);
background: var(--color-white);
min-width: 280px;
}
.modern-about-image img {
width: 100%;
height: 320px;
object-fit: cover;
border-radius: 32px;
transition: transform 0.4s cubic-bezier(.4, 2, .6, 1);
display: block;
}
.modern-about-image:hover img {
transform: scale(1.04) rotate(-1.5deg);
}
.about-badge {
position: absolute;
top: 18px;
left: 18px;
background: rgba(255, 255, 255, 0.92);
color: var(--color-primary);
font-weight: 700;
font-size: 1.1rem;
padding: 0.5em 1.3em;
border-radius: 22px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
z-index: 2;
display: flex;
align-items: center;
gap: 0.5em;
letter-spacing: 0.5px;
}
.about-floating-icon {
position: absolute;
bottom: 18px;
right: 18px;
font-size: 2.2rem;
opacity: 0.18;
pointer-events: none;
z-index: 2;
animation: floatAbout 5s ease-in-out infinite;
}
@keyframes floatAbout {
0%,
100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-18px) scale(1.08);
}
}
.modern-about-stats {
position: absolute;
bottom: 18px;
left: 18px;
display: flex;
gap: 1.2rem;
z-index: 2;
}
.modern-about-stats .stat {
background: rgba(255, 255, 255, 0.92);
color: var(--color-primary);
border-radius: 16px;
padding: 0.4em 1em;
font-weight: 700;
font-size: 1rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.07);
text-align: center;
}
.modern-about-text {
flex: 2 1 400px;
color: var(--color-text-primary);
max-width: 540px;
}
.modern-about-title {
font-size: 2.5rem;
font-weight: 800;
margin-bottom: 1.2rem;
line-height: 1.1;
}
.about-title-main {
background: linear-gradient(45deg, var(--color-primary), var(--color-accent));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-title-gradient {
background: linear-gradient(45deg, var(--color-accent), var(--color-primary));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.about-highlight {
color: var(--color-primary);
font-weight: 700;
background: var(--color-accent, rgba(255, 215, 0, 0.13));
border-radius: 8px;
padding: 0 0.3em;
}
.modern-about-features {
display: flex;
gap: 1.2rem;
margin: 2rem 0 2.2rem 0;
flex-wrap: wrap;
}
.modern-about-features .feature {
display: flex;
align-items: center;
gap: 0.7em;
font-size: 1.1rem;
font-weight: 600;
background: var(--color-bg-alt);
border-radius: 16px;
padding: 0.5em 1.2em;
box-shadow: 0 2px 8px var(--color-primary-50, rgba(0, 0, 0, 0.07));
}
.feature-icon {
width: 2.2em;
height: 2.2em;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
font-size: 1.3em;
color: var(--color-white);
margin-right: 0.5em;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.modern-about-btn {
background: linear-gradient(45deg, var(--color-primary), var(--color-accent));
color: var(--color-white);
border: none;
border-radius: 30px;
font-weight: 700;
font-size: 1.1rem;
padding: 1em 2.2em;
box-shadow: 0 8px 25px rgba(255, 107, 53, 0.13);
transition: all 0.3s cubic-bezier(.4, 2, .6, 1);
position: relative;
overflow: hidden;
}
.modern-about-btn:hover {
transform: translateY(-3px) scale(1.04);
box-shadow: 0 16px 48px rgba(255, 107, 53, 0.18);
background: linear-gradient(45deg, var(--color-accent), var(--color-primary));
}
@media (max-width: 991px) {
.modern-about {
flex-direction: column;
gap: 2.2rem;
align-items: stretch;
}
.modern-about-image {
max-width: 100vw;
margin: 0 auto;
}
.modern-about-text {
max-width: 100vw;
margin: 0 auto;
}
.modern-about-title {
font-size: 1.7rem;
}
}
@media (max-width: 575px) {
.modern-about {
gap: 1.2rem;
}
.modern-about-image img {
height: 180px;
border-radius: 18px;
}
.modern-about-image {
border-radius: 18px;
min-width: 0;
max-width: 100vw;
}
.about-badge {
font-size: 0.85rem;
padding: 0.3em 0.8em;
top: 10px;
left: 10px;
}
.about-floating-icon {
font-size: 1.3rem;
bottom: 10px;
right: 10px;
}
.modern-about-stats {
gap: 0.5rem;
bottom: 10px;
left: 10px;
}
.modern-about-stats .stat {
font-size: 0.85rem;
padding: 0.25em 0.7em;
}
.modern-about-title {
font-size: 1.1rem;
}
.modern-about-features {
gap: 0.5rem;
margin: 1.2rem 0 1.2rem 0;
}
.feature-icon {
width: 1.5em;
height: 1.5em;
font-size: 1em;
}
.modern-about-btn {
font-size: 0.95rem;
padding: 0.7em 1.2em;
}
}
@media (max-width: 575px) {
.hero-actions-restaurant {
flex-direction: column;
align-items: center;
gap: 0.5rem;
}
.btn-restaurant {
width: 80vw;
max-width: 260px;
min-width: 120px;
display: block;
margin: 0 auto;
text-align: center;
justify-content: center;
align-items: center;
padding: 0.7rem 0.5rem;
font-size: 1rem;
border-radius: 22px;
}
.btn-restaurant .btn-text,
.btn-restaurant .btn-icon {
display: inline-block;
vertical-align: middle;
text-align: center;
}
}
/* ========== YENİ HERO SECTION ========== */
.hero-section {
padding: 4rem 0;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-light) 100%);
margin-top: var(--header-height);
position: relative;
overflow: hidden;
}
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.hero-text {
color: var(--color-white);
}
.hero-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1rem;
color: var(--color-white);
}
.hero-subtitle {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
opacity: 0.95;
color: var(--color-white);
}
.hero-description {
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.9;
color: var(--color-white);
}
.hero-actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-image {
position: relative;
text-align: center;
}
.hero-image img {
width: 100%;
max-width: 500px;
height: auto;
border-radius: 24px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
@media (max-width: 991px) {
.hero-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.hero-title {
font-size: 2.5rem;
}
.hero-subtitle {
font-size: 1.25rem;
}
.hero-actions {
justify-content: center;
}
}
@media (max-width: 575px) {
.hero-section {
padding: 2rem 0;
}
.hero-title {
font-size: 2rem;
}
.hero-subtitle {
font-size: 1.125rem;
}
.hero-description {
font-size: 1rem;
}
}
/* ========== QUICK ACCESS CARDS ========== */
.quick-access {
padding: 3rem 0 1.5rem 0;
background: var(--color-bg-primary);
}
.quick-access-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
}
.quick-access-card {
background: var(--color-white);
border-radius: 16px;
padding: 2rem;
text-align: center;
text-decoration: none;
color: var(--color-text-primary);
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-border);
}
.quick-access-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-color: var(--color-primary);
}
.quick-access-card .card-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: var(--color-white);
transition: transform 0.3s ease;
}
.quick-access-card:hover .card-icon {
transform: scale(1.1) rotate(5deg);
}
.quick-access-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary);
}
.quick-access-card p {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0;
}
@media (max-width: 767px) {
.quick-access {
padding: 2rem 0 1rem 0;
}
.quick-access-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.quick-access-card {
padding: 1.5rem;
}
.quick-access-card .card-icon {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.quick-access-card h3 {
font-size: 1.125rem;
}
}
@media (max-width: 575px) {
.quick-access-grid {
grid-template-columns: 1fr;
}
}
/* ========== PRODUCTS SECTION ========== */
.homepage-main .products-section {
padding: 1.5rem 0 3rem 0;
background: var(--color-bg-primary);
position: relative;
}
#popularProductsGrid {
/* pages.css'deki .products-grid yapısını kullan */
grid-template-columns: revert;
}
.homepage-main .product-card {
background: var(--color-white);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-border);
transition: all 0.3s ease;
cursor: pointer;
position: relative;
}
.homepage-main .product-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.homepage-main .product-badges {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.homepage-main .product-badge {
padding: 0.25rem 0.75rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 700;
color: var(--color-white);
text-transform: uppercase;
}
.homepage-main .product-badge.hit {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
}
.homepage-main .product-badge.new {
background: linear-gradient(135deg, #27ae60, #2ecc71);
}
.homepage-main .product-badge.discount {
background: linear-gradient(135deg, #e74c3c, #c0392b);
}
.homepage-main .product-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background: var(--color-bg-secondary);
}
.homepage-main .product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.homepage-main .product-card:hover .product-image img {
transform: scale(1.1);
}
.homepage-main .product-content {
padding: 1.25rem;
}
.homepage-main .product-name {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary);
line-height: 1.4;
}
.homepage-main .product-description {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.5;
margin-bottom: 1rem;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.homepage-main .product-footer {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.homepage-main .product-price {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.homepage-main .current-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
}
.homepage-main .old-price {
font-size: 0.875rem;
color: var(--color-text-muted);
text-decoration: line-through;
}
.homepage-main .add-to-cart-btn {
white-space: nowrap;
padding: 0.625rem 1rem;
font-size: 0.875rem;
}
@media (max-width: 767px) {
.homepage-main .products-section {
padding: 1rem 0 2rem 0;
}
.homepage-main .products-section .products-grid {
grid-template-columns: repeat(2, 1fr);
gap: 1rem;
}
.homepage-main .product-image {
height: 160px;
}
.homepage-main .product-name {
font-size: 1rem;
}
.homepage-main .current-price {
font-size: 1.125rem;
}
.homepage-main .add-to-cart-btn {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
}
}
/* ========== CAMPAIGNS SECTION ========== */
.campaigns-section {
padding: 3rem 0;
background: var(--color-bg-secondary);
}
.campaigns-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.campaign-card {
background: var(--color-white);
border-radius: 20px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.campaign-card:hover {
transform: translateY(-5px);
}
@media (max-width: 767px) {
.campaigns-section {
padding: 2rem 0;
}
.campaigns-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* ========== QR MENU SECTION ========== */
.qr-menu-section {
padding: 4rem 0;
background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg-primary) 100%);
}
.qr-menu-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.qr-menu-text h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary);
}
.qr-menu-text p {
font-size: 1.125rem;
line-height: 1.6;
color: var(--color-text-secondary);
}
.qr-code-box {
text-align: center;
background: var(--color-white);
padding: 2rem;
border-radius: 20px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.qr-code {
margin: 0 auto 1rem;
width: 200px;
height: 200px;
background: var(--color-white);
padding: 1rem;
border-radius: 12px;
border: 2px solid var(--color-border);
}
.qr-code img {
width: 100%;
height: 100%;
object-fit: contain;
}
.qr-code-box p {
font-size: 1rem;
font-weight: 600;
color: var(--color-text-primary);
margin-bottom: 1rem;
}
@media (max-width: 991px) {
.qr-menu-content {
grid-template-columns: 1fr;
gap: 2rem;
text-align: center;
}
.qr-menu-text h2 {
font-size: 2rem;
}
}
@media (max-width: 575px) {
.qr-menu-section {
padding: 2rem 0;
}
.qr-code-box {
padding: 1.5rem;
}
.qr-code {
width: 150px;
height: 150px;
}
}
/* ========== INFO SECTION ========== */
.info-section {
padding: 3rem 0;
background: var(--color-bg-secondary);
border-top: 1px solid var(--color-border);
}
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
}
.info-card {
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-border);
}
.info-card h3 {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-primary);
}
.info-card p {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0;
}
@media (max-width: 767px) {
.info-section {
padding: 2rem 0;
}
.info-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.info-card {
padding: 1.5rem;
}
}
/* ========== ANASAYFA BACKGROUND FIX ========== */
body.anasayfa {
background: var(--color-bg-primary);
color: var(--color-text-primary);
}
body.anasayfa .main {
background: var(--color-bg-primary);
}
/* ========== SECTION SPACING ========== */
.homepage-main>.container>section {
margin-bottom: 0;
}
.homepage-main>section {
margin-bottom: 0;
}
/* ========== HOMEPAGE SECTION BASE ========== */
.homepage-section {
display: block;
transition: opacity 0.3s ease, display 0.3s ease;
}
.homepage-section[data-active="false"] {
display: none !important;
}
/* ========== PRODUCTS SECTION HEADER ========== */
.products-section .section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
flex-wrap: wrap;
gap: 1rem;
}
.products-section .section-title {
margin-bottom: 0;
font-size: 2rem;
font-weight: 700;
color: var(--color-text-primary);
}
@media (max-width: 767px) {
.products-section .section-header {
flex-direction: column;
align-items: flex-start;
}
}
/* ========== ABOUT COMPANY SECTION ========== */
.about-company-section {
padding: 4rem 0;
background: var(--color-bg-secondary);
}
.about-company-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-company-image {
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}
.about-company-image img {
width: 100%;
height: 400px;
object-fit: cover;
transition: transform 0.3s ease;
}
.about-company-image:hover img {
transform: scale(1.05);
}
.about-company-text .section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--color-text-primary);
}
.about-description {
font-size: 1.125rem;
line-height: 1.8;
color: var(--color-text-secondary);
margin-bottom: 2rem;
}
.about-description strong {
color: var(--color-primary);
font-weight: 600;
}
.about-features {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
flex-wrap: wrap;
}
.about-feature {
display: flex;
align-items: center;
gap: 0.75rem;
background: var(--color-white);
padding: 1rem 1.5rem;
border-radius: 12px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
font-weight: 600;
color: var(--color-text-primary);
}
.about-feature i {
font-size: 1.5rem;
color: var(--color-primary);
}
@media (max-width: 991px) {
.about-company-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.about-company-image img {
height: 300px;
}
.about-company-text .section-title {
font-size: 2rem;
}
}
@media (max-width: 575px) {
.about-company-section {
padding: 2rem 0;
}
.about-features {
flex-direction: column;
gap: 1rem;
}
.about-company-text .section-title {
font-size: 1.5rem;
}
}
/* ========== TESTIMONIALS SECTION ========== */
.testimonials-section {
padding: 4rem 0;
background: var(--color-bg-primary);
}
.testimonials-section .section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 3rem;
text-align: center;
color: var(--color-text-primary);
}
.testimonials-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
}
.testimonial-card {
background: var(--color-white);
padding: 2rem;
border-radius: 16px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border: 1px solid var(--color-border);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.testimonial-header {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.testimonial-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-light));
display: flex;
align-items: center;
justify-content: center;
color: var(--color-white);
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
}
.testimonial-info h4 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.25rem;
color: var(--color-text-primary);
}
.testimonial-info .testimonial-rating {
color: #ffc107;
font-size: 0.875rem;
}
.testimonial-text {
color: var(--color-text-secondary);
line-height: 1.6;
font-style: italic;
margin: 0;
}
@media (max-width: 767px) {
.testimonials-section {
padding: 2rem 0;
}
.testimonials-section .section-title {
font-size: 2rem;
margin-bottom: 2rem;
}
.testimonials-grid {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
/* ========== LOCATION SECTION ========== */
.location-section {
padding: 4rem 0;
background: var(--color-bg-secondary);
}
.location-section .section-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 2rem;
color: var(--color-text-primary);
}
.location-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: start;
}
.location-details {
display: flex;
flex-direction: column;
gap: 2rem;
}
.location-item {
display: flex;
gap: 1.5rem;
align-items: flex-start;
}
.location-item i {
font-size: 1.5rem;
color: var(--color-primary);
margin-top: 0.25rem;
flex-shrink: 0;
}
.location-item h3 {
font-size: 1.125rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary);
}
.location-item p {
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0;
}
.location-item a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.3s ease;
}
.location-item a:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
.location-map {
position: relative;
height: 400px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.map-container {
width: 100%;
height: 100%;
}
.map-container iframe {
width: 100%;
height: 100%;
border: none;
}
@media (max-width: 991px) {
.location-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.location-map {
height: 300px;
}
}
@media (max-width: 575px) {
.location-section {
padding: 2rem 0;
}
.location-section .section-title {
font-size: 2rem;
}
.location-details {
gap: 1.5rem;
}
}
/* ========== MODERN HOMEPAGE STYLES - MOBILE APP LIKE DESIGN ========== */
/* ========== HEADER MODERNIZATION ========== */
.modern-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999999;
background: rgba(255, 255, 255, 0.98);
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.modern-header.scrolled {
background: rgba(255, 255, 255, 0.99);
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
border-bottom-color: rgba(0, 0, 0, 0.08);
}
.modern-header .header-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
height: 50px !important;
min-height: 50px !important;
}
/* Logo - Minimal & Modern */
.modern-header .header-logo .logo-link {
gap: 0.625rem;
}
.modern-header .logo-icon {
font-size: 1.125rem;
line-height: 1;
}
.modern-header .brand-name {
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.2;
}
.modern-header .brand-tagline {
font-size: 0.5625rem;
font-weight: 500;
opacity: 0.7;
letter-spacing: 0.01em;
}
/* Nav link: ikon–yazı mesafesi ve aktif ikon rengi (tüm header’lar) */
.nav-link {
gap: 0.3rem;
}
.nav-link .nav-link-icon,
.nav-link i.nav-link-icon {
margin-right: 0.25rem;
}
.nav-link.active {
color: #fff;
background: var(--color-primary, var(--color-primary));
}
.nav-link.active .nav-link-icon,
.nav-link.active i:not(.dropdown-icon) {
color: #fff !important;
opacity: 1;
}
/* Navigation - Minimal */
.modern-header .nav-links {
gap: 0.5rem;
}
.modern-header .nav-link {
padding: 0.25rem 0.625rem;
font-size: 0.8rem;
font-weight: 500;
border-radius: 6px;
transition: all 0.2s ease;
gap: 0.3rem;
}
.modern-header .nav-link .nav-link-icon,
.modern-header .nav-link i.nav-link-icon {
margin-right: 0;
}
.modern-header .nav-link:hover {
background: var(--color-primary-100);
color: var(--color-primary);
}
.modern-header .nav-link:hover .nav-link-icon,
.modern-header .nav-link:hover i:not(.dropdown-icon) {
color: var(--color-primary);
opacity: 1;
}
.modern-header .nav-link.active {
background: var(--color-primary, var(--color-primary));
color: #fff;
}
.modern-header .nav-link.active .nav-link-icon,
.modern-header .nav-link.active i:not(.dropdown-icon) {
color: #fff !important;
opacity: 1;
}
.modern-header .nav-link i {
font-size: 0.875rem;
}
/* Header Actions - Compact */
.modern-header .header-actions {
gap: 0.5rem;
}
.modern-header .action-btn {
width: 26px;
height: 26px;
padding: 0;
border-radius: 5px;
font-size: 0.75rem;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
color: var(--color-text-primary);
transition: all 0.2s ease;
}
.modern-header .action-btn:hover {
background: rgba(0, 0, 0, 0.05);
color: var(--color-primary);
}
.modern-header .cart-btn {
min-width: auto;
padding: 0.3rem 0.75rem;
height: 26px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 600;
gap: 0.25rem;
}
.modern-header .mobile-menu-btn {
width: 40px;
height: 40px;
padding: 0;
border-radius: 10px;
background: transparent;
border: none;
display: none;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
cursor: pointer;
}
.modern-header .mobile-menu-btn .menu-line {
width: 22px;
height: 2px;
background: var(--color-text-primary);
border-radius: 2px;
transition: all 0.3s ease;
}
/* Mobile Header */
@media (max-width: 991px) {
.modern-header .header-content {
height: 30px;
padding: 0 0rem;
}
.modern-header .header-nav {
display: none;
}
.modern-header .mobile-menu-btn {
display: flex;
}
.modern-header .logo-icon {
font-size: 1rem;
}
.modern-header .brand-name {
font-size: 0.9375rem;
}
.modern-header .brand-tagline {
display: none;
}
.modern-header .header-actions {
gap: 0.375rem;
}
.modern-header .action-btn {
width: 26px;
height: 26px;
font-size: 0.75rem;
}
.modern-header .cart-btn {
padding: 0.3rem 0.5625rem;
height: 26px;
font-size: 0.6875rem;
}
}
@media (max-width: 575px) {
.modern-header .header-content {
height: 50px;
}
.modern-header .cart-btn .cart-text {
display: none;
}
.modern-header .cart-btn {
min-width: 26px;
padding: 0.3rem;
}
}
/* Mobile Navigation - App Like */
.mobile-nav {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-white);
z-index: 9999;
transform: translateX(-100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.mobile-nav.active {
transform: translateX(0);
}
/* Mobile nav header and close styles moved to mobile-nav-top.css */
.mobile-nav-content {
flex: 1;
padding: 10px;
}
.mobile-nav-links {
list-style: none;
margin: 0;
padding: 0.5rem 0;
}
.mobile-nav-link {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 0.45rem;
padding: 1rem 1.25rem;
font-size: 1rem;
font-weight: 500;
color: var(--color-text-primary);
text-decoration: none;
border-bottom: 1px solid rgba(0, 0, 0, 0.04);
transition: all 0.2s ease;
}
.mobile-nav-link .mobile-nav-arrow {
margin-left: auto;
flex-shrink: 0;
}
.mobile-nav-link i {
width: 22px;
font-size: 1.0625rem;
color: var(--color-text-secondary);
}
.mobile-nav-link .mobile-nav-link-icon {
margin-right: 0;
}
.mobile-nav-link-icon {
flex-shrink: 0;
text-align: center;
}
.mobile-nav-submenu-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.mobile-nav-submenu-item-icon {
width: 1.25rem;
text-align: center;
flex-shrink: 0;
font-size: 0.875rem;
color: var(--color-text-secondary, #6b7280);
}
.mobile-nav-submenu-item.active {
background: var(--color-primary-100, rgba(255, 107, 0, 0.12));
color: var(--color-primary, var(--color-primary));
font-weight: 600;
}
.mobile-nav-submenu-item.active .mobile-nav-submenu-item-icon {
color: var(--color-primary, var(--color-primary));
}
.mobile-nav-link:hover {
background: var(--color-primary-100);
color: var(--color-primary);
}
.mobile-nav-link:hover .mobile-nav-link-icon,
.mobile-nav-link:hover i:not(.mobile-nav-arrow) {
color: var(--color-primary);
}
.mobile-nav-link.active {
background: var(--color-primary, var(--color-primary));
color: #fff;
}
.mobile-nav-link.active .mobile-nav-link-icon,
.mobile-nav-link.active i:not(.mobile-nav-arrow) {
color: #fff !important;
}
/* ========== HERO SECTION - MODERN & MINIMAL ========== */
.hero-restaurant {
margin-top: 0 !important;
min-height: calc(100vh - 72px);
padding: 0 !important;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
position: relative;
overflow: hidden;
}
.hero-section {
padding: 0 !important;
}
.hero-restaurant .container {
position: relative;
z-index: 2;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
.hero-restaurant .hero-content-restaurant {
display: flex;
align-items: center;
gap: 3rem;
min-height: calc(100vh - 72px);
}
.hero-restaurant .hero-text-restaurant {
flex: 1;
max-width: 600px;
color: var(--color-white);
}
.hero-restaurant .hero-badge-restaurant {
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: rgba(255, 255, 255, 0.2);
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 50px;
padding: 0.5rem 1.25rem;
margin-bottom: 1.5rem;
font-size: 0.875rem;
font-weight: 600;
}
.hero-restaurant .hero-title-restaurant {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.1;
margin-bottom: 1.25rem;
letter-spacing: -0.02em;
}
.hero-restaurant .hero-description-restaurant {
font-size: 1.125rem;
line-height: 1.6;
margin-bottom: 2rem;
opacity: 0.95;
font-weight: 400;
}
.hero-restaurant .hero-actions-restaurant {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.hero-restaurant .btn-restaurant {
padding: 1rem 2.5rem;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
letter-spacing: 0.01em;
}
.hero-restaurant .btn-restaurant.primary {
background: var(--color-white);
color: var(--color-primary);
}
.hero-restaurant .btn-restaurant.primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
background: #f8f9fa;
}
.hero-restaurant .btn-restaurant.primary:active {
transform: translateY(-1px);
}
.hero-restaurant .btn-restaurant.outline {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
color: var(--color-white);
border: 2px solid rgba(255, 255, 255, 0.3);
}
.hero-restaurant .btn-restaurant.outline:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.hero-restaurant .btn-restaurant i {
font-size: 1.125rem;
}
/* Ana sayfa genel buton stilleri */
.homepage-main .btn,
.homepage-main .btn-primary,
.homepage-main .btn-outline {
padding: 0.875rem 2rem;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
border: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.75rem;
text-decoration: none;
letter-spacing: 0.01em;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}
.homepage-main .btn-primary {
background: var(--color-primary);
color: var(--color-white);
}
.homepage-main .btn-primary:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
background: var(--color-primary-dark);
}
.homepage-main .btn-outline {
background: transparent;
color: var(--color-primary);
border: 2px solid var(--color-primary);
box-shadow: none;
}
.homepage-main .btn-outline:hover {
background: var(--color-primary);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(var(--color-primary), 0.3);
}
.homepage-main .btn i {
font-size: 1.125rem;
}
@media (max-width: 575px) {
.homepage-main .btn,
.homepage-main .btn-primary,
.homepage-main .btn-outline {
padding: 0.75rem 1.75rem;
font-size: 0.9rem;
}
}
/* Hero Mobile */
@media (max-width: 991px) {
.hero-restaurant {
margin-top: 0 !important;
min-height: auto;
padding: 0 !important;
}
.hero-restaurant .hero-content-restaurant {
flex-direction: column;
text-align: center;
gap: 2rem;
min-height: auto;
}
.hero-restaurant .hero-text-restaurant {
max-width: 100%;
}
.hero-restaurant .hero-title-restaurant {
font-size: 2.5rem;
margin-bottom: 1rem;
}
.hero-restaurant .hero-description-restaurant {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.hero-restaurant .hero-actions-restaurant {
justify-content: center;
}
.hero-restaurant .btn-restaurant {
padding: 0.75rem 1.5rem;
font-size: 0.9rem;
}
}
@media (max-width: 575px) {
.hero-restaurant {
margin-top: 0 !important;
padding: 0 !important;
}
.hero-restaurant .hero-title-restaurant {
font-size: 2rem;
}
.hero-restaurant .hero-description-restaurant {
font-size: 0.9rem;
}
.hero-restaurant .hero-actions-restaurant {
flex-direction: column;
width: 100%;
}
.hero-restaurant .btn-restaurant {
width: 100%;
justify-content: center;
}
}
/* ========== QUICK ACCESS - MINIMAL CARDS ========== */
.quick-access {
padding: 3rem 0 2rem;
background: var(--color-bg-primary);
}
.quick-access-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
.quick-access-card {
background: var(--color-white);
border-radius: 16px;
padding: 1.5rem;
text-align: center;
text-decoration: none;
color: var(--color-text-primary);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
}
.quick-access-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
border-color: var(--color-primary);
}
.quick-access-card .card-icon {
width: 56px;
height: 56px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: var(--color-white);
transition: transform 0.3s ease;
}
.quick-access-card:hover .card-icon {
transform: scale(1.1);
}
.quick-access-card h3 {
font-size: 1rem;
font-weight: 600;
margin: 0;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
.quick-access-card p {
font-size: 0.8rem;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.4;
}
@media (max-width: 991px) {
.quick-access {
padding: 2rem 0 1.5rem;
}
.quick-access-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
padding: 0 1rem;
}
.quick-access-card {
padding: 1.25rem 1rem;
gap: 0.75rem;
}
.quick-access-card .card-icon {
width: 48px;
height: 48px;
font-size: 1.25rem;
}
.quick-access-card h3 {
font-size: 0.9rem;
}
.quick-access-card p {
font-size: 0.75rem;
}
}
@media (max-width: 575px) {
.quick-access-grid {
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.quick-access-card {
padding: 1rem 0.75rem;
}
.quick-access-card .card-icon {
width: 44px;
height: 44px;
font-size: 1.125rem;
}
}
/* ========== PRODUCTS SECTION - MODERN SLIDER ========== */
.homepage-main .products-section {
padding: 2rem 0 3rem;
background: var(--color-bg-primary);
}
.products-section .section-header {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem 1.5rem;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.products-section .section-title {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.02em;
}
.products-section .section-subtitle {
font-size: 0.95rem;
color: var(--color-text-secondary);
margin: 0.25rem 0 0;
}
@media (max-width: 991px) {
.homepage-main .products-section {
padding: 1.5rem 0 2rem;
}
.products-section .section-header {
padding: 0 1rem 1rem;
}
.products-section .section-title {
font-size: 1.5rem;
}
.products-section .section-subtitle {
font-size: 0.875rem;
}
}
@media (max-width: 575px) {
.products-section .section-title {
font-size: 1.25rem;
}
}
/* ========== ABOUT COMPANY SECTION - MODERN ========== */
.about-company-section {
padding: 4rem 0;
background: var(--color-bg-secondary);
}
.about-company-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: center;
}
.about-company-text .section-title {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1.25rem;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
.about-description {
font-size: 1.05rem;
line-height: 1.7;
color: var(--color-text-secondary);
margin-bottom: 1.5rem;
}
@media (max-width: 991px) {
.about-company-section {
padding: 3rem 0;
}
.about-company-content {
grid-template-columns: 1fr;
gap: 2rem;
padding: 0 1rem;
}
.about-company-text .section-title {
font-size: 1.75rem;
}
.about-description {
font-size: 0.95rem;
}
}
/* ========== TESTIMONIALS SECTION ========== */
.testimonials-section {
padding: 4rem 0;
background: var(--color-bg-primary);
}
.testimonials-section .container,
.testimonials-section>.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
.testimonials-section .section-title {
font-size: 2rem;
font-weight: 700;
text-align: center;
margin-bottom: 3rem;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
@media (max-width: 991px) {
.testimonials-section {
padding: 3rem 0;
}
.testimonials-section .container,
.testimonials-section>.container {
padding: 0 1rem;
}
.testimonials-section .section-title {
font-size: 1.75rem;
margin-bottom: 2rem;
}
}
@media (max-width: 575px) {
.testimonials-section .section-title {
font-size: 1.5rem;
}
}
/* ========== LOCATION SECTION ========== */
.location-section {
padding: 4rem 0;
background: var(--color-bg-secondary);
}
.location-section .container,
.location-section>.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
.location-section .section-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 3rem;
color: var(--color-text-primary);
letter-spacing: -0.02em;
}
.location-content {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
align-items: stretch;
}
.location-details {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1.5rem;
}
.location-item {
display: flex;
gap: 1.25rem;
align-items: flex-start;
padding: 1.25rem;
background: var(--color-white);
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}
.location-item:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.location-item i {
font-size: 1.5rem;
color: var(--color-primary);
margin-top: 0.25rem;
flex-shrink: 0;
}
.location-item h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-text-primary);
letter-spacing: -0.01em;
}
.location-item p {
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0;
font-size: 0.95rem;
}
.location-item a {
color: var(--color-primary);
text-decoration: none;
transition: color 0.2s ease;
font-weight: 500;
}
.location-item a:hover {
color: var(--color-primary-dark);
text-decoration: underline;
}
.location-info {
display: flex;
flex-direction: column;
}
.location-info .btn-outline {
align-self: center;
margin-top: 2rem;
}
.location-map {
position: sticky;
top: 100px;
height: 100%;
max-height: 450px;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
background: var(--color-gray-100);
}
.map-container {
width: 100%;
height: 100%;
position: relative;
}
.map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
display: block;
}
@media (max-width: 991px) {
.location-section {
padding: 3rem 0;
}
.location-section .container,
.location-section>.container {
padding: 0 1rem;
}
.location-section .section-title {
font-size: 1.75rem;
margin-bottom: 2rem;
}
.location-content {
grid-template-columns: 1fr;
gap: 2rem;
}
.location-map {
position: static;
height: 400px;
}
}
@media (max-width: 575px) {
.location-section .section-title {
font-size: 1.5rem;
}
.location-details {
grid-template-columns: 1fr;
gap: 1rem;
}
.location-item {
padding: 1rem;
gap: 1rem;
}
.location-item i {
font-size: 1.25rem;
}
.location-item h3 {
font-size: 0.95rem;
}
.location-item p {
font-size: 0.875rem;
}
.location-map {
height: 300px;
}
}
/* ========== QR MENU SECTION ========== */
.qr-menu-section {
padding: 4rem 0;
background: var(--color-bg-primary);
}
.qr-menu-section .container,
.qr-menu-section>.container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 991px) {
.qr-menu-section {
padding: 3rem 0;
}
.qr-menu-section .container,
.qr-menu-section>.container {
padding: 0 1rem;
}
}
/* ========== GENERAL SECTION SPACING ========== */
.homepage-main>section {
position: relative;
}
.homepage-main>section+section {
margin-top: 0;
}
/* ========== PRODUCT SLIDER OVERRIDES ========== */
.products-section .products-slider-wrapper {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
@media (max-width: 991px) {
.products-section .products-slider-wrapper {
padding: 0 1rem;
}
}
/* ========== RESPONSIVE UTILITIES ========== */
@media (max-width: 575px) {
.container {
padding-left: 1rem;
padding-right: 1rem;
}
}
/* Smooth scrolling */
html {
scroll-behavior: smooth;
}
/* Focus visible for accessibility */
*:focus-visible {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
/* ========== BODY PADDING FOR FIXED HEADER ========== */
body.anasayfa {
padding-top: 50px;
}
@media (max-width: 991px) {
body.anasayfa {
padding-top: 50px;
}
}
@media (max-width: 575px) {
body.anasayfa {
padding-top: 50px;
}
}
/* ========== MODERN CORPORATE FOOTER ========== */
.footer {
background: var(--color-gray-900);
color: var(--color-gray-300);
margin-top: 0;
position: relative;
}
.footer .container {
max-width: 1400px;
margin: 0 auto;
padding: 0 1.5rem;
}
.footer-content {
display: grid;
grid-template-columns: 2fr 1fr 1.5fr;
gap: 3rem;
padding: 0rem 0 0rem;
margin-bottom: 0;
}
/* Footer Logo Section */
.footer-section:first-child {
max-width: 320px;
}
.footer-logo {
display: flex;
align-items: center;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.footer-logo h3 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-white);
margin: 0;
letter-spacing: -0.02em;
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-description {
font-size: 0.95rem;
line-height: 1.7;
color: var(--color-gray-400);
margin-bottom: 2rem;
}
/* Social Links */
.social-links {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.social-link {
width: 42px;
height: 42px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-gray-400);
text-decoration: none;
font-size: 1rem;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.social-link::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: var(--color-primary);
transform: translate(-50%, -50%);
transition: width 0.4s ease, height 0.4s ease;
z-index: 0;
}
.social-link:hover::before {
width: 100px;
height: 100px;
}
.social-link:hover {
border-color: var(--color-primary);
color: var(--color-white);
transform: translateY(-3px);
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}
.social-link i {
position: relative;
z-index: 1;
}
/* Footer Title */
.footer-title {
font-size: 1.125rem;
font-weight: 600;
color: var(--color-white);
margin-bottom: 1.5rem;
letter-spacing: -0.01em;
position: relative;
padding-bottom: 0.75rem;
}
.footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 40px;
height: 2px;
background: var(--color-primary);
border-radius: 2px;
}
/* Footer Links */
.footer-links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.footer-links li {
margin: 0;
}
.footer-links a {
color: var(--color-gray-400);
text-decoration: none;
font-size: 0.95rem;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
position: relative;
}
.footer-links a::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 1px;
background: var(--color-primary);
transition: width 0.3s ease;
}
.footer-links a:hover {
color: var(--color-white);
padding-left: 0.5rem;
}
.footer-links a:hover::before {
width: 8px;
}
/* Contact Items */
.contact-item {
display: flex;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1.25rem;
padding: 0.75rem 0;
}
.contact-item:last-child {
margin-bottom: 0;
}
.contact-item i {
color: var(--color-primary);
font-size: 1.125rem;
margin-top: 0.125rem;
flex-shrink: 0;
width: 20px;
text-align: center;
}
.contact-item span {
color: var(--color-gray-400);
font-size: 0.95rem;
line-height: 1.6;
flex: 1;
}
.contact-item a {
color: var(--color-gray-400);
text-decoration: none;
transition: color 0.2s ease;
border-bottom: none !important;
}
.contact-item a:hover {
color: var(--color-primary);
}
/* Footer Bottom */
.footer-bottom {
padding: 2rem 0;
}
.footer-bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1.5rem;
}
.footer-bottom-content p {
color: var(--color-gray-500);
font-size: 0.9rem;
margin: 0;
}
.footer-bottom-links {
display: flex;
gap: 1.5rem;
flex-wrap: wrap;
}
.footer-bottom-links a {
color: var(--color-gray-500);
text-decoration: none;
font-size: 0.9rem;
transition: color 0.2s ease;
position: relative;
}
.footer-bottom-links a::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: var(--color-primary);
transition: width 0.3s ease;
}
.footer-bottom-links a:hover {
color: var(--color-white);
}
.footer-bottom-links a:hover::after {
width: 100%;
}
/* Responsive Design */
@media (max-width: 991px) {
.footer-content {
grid-template-columns: 1fr 1fr;
gap: 2.5rem;
padding: 3rem 0 0;
}
.footer-section:first-child {
max-width: 100%;
grid-column: 1 / -1;
}
}
@media (max-width: 767px) {
.footer {
margin-top: 3rem;
}
.footer .container {
padding: 0 1rem;
}
.footer-content {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem 0 0;
}
.footer-section:first-child {
grid-column: 1;
text-align: center;
}
.footer-logo {
justify-content: center;
}
.footer-logo h3 {
font-size: 1.25rem;
}
.footer-description {
font-size: 0.85rem;
margin-bottom: 1.25rem;
line-height: 1.6;
}
.footer-title {
font-size: 0.95rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
}
.footer-title::after {
width: 30px;
}
/* Hızlı linkler bölümünü mobilde gizle */
.footer-section:nth-child(2) {
display: none;
}
/* Hızlı linkler - tek satır flex, ortalanmış ve yayılmış */
.footer-links {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
width: 100%;
}
.footer-links li {
margin: 0;
flex: 1;
text-align: center;
}
.footer-links a {
font-size: 0.85rem;
padding: 0.375rem 0;
white-space: nowrap;
display: block;
text-align: center;
}
.footer-links a::before {
display: none;
}
.footer-links a:hover {
padding-left: 0;
}
.footer-links a:not(:last-child)::after {
display: none;
}
/* İletişim - tüm bilgiler tek satırda, alt çizgi yok */
.footer-section:last-child .contact-item {
display: inline-flex;
margin-bottom: 0;
margin-right: 1.5rem;
padding: 0.5rem 0;
gap: 0.625rem;
vertical-align: middle;
border-bottom: none !important;
}
.footer-section:last-child .contact-item:last-child {
margin-right: 0;
}
.footer-section:last-child .contact-item i {
font-size: 0.9rem;
width: 14px;
margin-top: 0;
}
.footer-section:last-child .contact-item span {
font-size: 0.85rem;
white-space: nowrap;
}
.footer-section:last-child .contact-item a {
border-bottom: none !important;
text-decoration: none;
}
.social-link {
width: 38px;
height: 38px;
font-size: 0.9rem;
}
.footer-bottom {
padding: 1.25rem 0 1rem;
}
.footer-bottom-content {
flex-direction: column-reverse;
align-items: flex-start;
gap: 0.75rem;
}
.footer-bottom-content p {
font-size: 0.8rem;
width: 100%;
text-align: center;
margin: 0;
}
/* Yasal linkler - tek satır, copyright üstünde */
.footer-bottom-links {
gap: 0.75rem;
flex-direction: row;
flex-wrap: wrap;
width: 100%;
justify-content: center;
margin-bottom: 0.5rem;
}
.footer-bottom-links a {
font-size: 0.8rem;
padding-bottom: 0;
border-bottom: none;
white-space: nowrap;
}
.footer-bottom-links a::after {
display: none;
}
.footer-bottom-links a:not(:last-child)::after {
content: '•';
margin-left: 0.75rem;
color: var(--color-gray-600);
font-weight: normal;
}
}
@media (max-width: 575px) {
.footer-content {
padding: 0 0;
gap: 0;
margin: 0px;
}
.footer-section:first-child {
text-align: center;
}
.footer-logo {
justify-content: center;
}
.footer-logo h3 {
font-size: 1.125rem;
}
.footer-description {
font-size: 0.8rem;
margin-bottom: 1rem;
text-align: center;
}
.social-links {
justify-content: center;
}
.footer-title {
font-size: 0.9rem;
margin-bottom: 0.875rem;
}
.footer-links {
gap: 0.4rem;
}
.footer-links a {
font-size: 0.8rem;
padding: 0.3rem 0;
}
.footer-section:last-child .contact-item {
padding: 0.4rem 0;
gap: 0.5rem;
margin-right: 1.25rem;
}
.footer-section:last-child .contact-item:last-child {
margin-right: 0;
}
.footer-section:last-child .contact-item i {
font-size: 0.85rem;
width: 13px;
}
.footer-section:last-child .contact-item span {
font-size: 0.75rem;
}
.social-links {
gap: 0.5rem;
}
.social-link {
width: 36px;
height: 36px;
font-size: 0.85rem;
}
.footer-bottom {
padding: 1rem 0 0.875rem;
border-top: 0px solid var(--color-gray-700);
}
.footer-bottom-links {
gap: 0.625rem;
margin-bottom: 0.4rem;
}
.footer-bottom-links a {
font-size: 0.75rem;
}
.footer-bottom-links a:not(:last-child)::after {
margin-left: 0.625rem;
}
.footer-bottom-content p {
font-size: 0.75rem;
}
}
/* Dark theme support */
[data-theme="dark"] .footer,
.dark-mode .footer {
background: #0a0a0a;
border-top: 1px solid rgba(255, 255, 255, 0.05);
}
/* ========== ÜRÜN MODALI SEPETE EKLE BÖLÜMÜ - YENİ TASARIM ========== */
.add-to-cart-row {
position: absolute;
bottom: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.75rem 1rem;
background: white;
border-top: 1px solid #e9ecef;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
z-index: 9999;
}
/* Mobil tarayıcı alt çubuğu için env() kullanımı */
/* Web için de sabit */
@media (min-width: 769px) {
.add-to-cart-row {
position: absolute;
padding: 0.75rem 1.5rem;
}
}
/* ========== PRODUCTS SEARCH SORT ALANI ========== */
.products-search-sort {
display: flex;
gap: 0.75rem;
align-items: center;
margin-bottom: 1rem;
padding-top: 1.5rem;
}
.products-search-wrapper {
flex: 1;
position: relative;
display: flex;
align-items: center;
}
.products-search-input {
flex: 1;
height: 44px;
padding: 0.1625rem 0.51rem;
padding-right: 2.75rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: var(--color-white);
font-size: 0.9375rem;
color: var(--color-text-primary);
transition: all 0.2s ease;
outline: none;
width: 100%;
}
.products-search-clear {
position: absolute;
right: 0.5rem;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
}
.products-search-clear:hover {
background: rgba(0, 0, 0, 0.15);
color: var(--color-text-primary);
transform: translateY(-50%) scale(1.1);
}
.products-search-clear i {
font-size: 0.75rem;
}
.products-search-input::placeholder {
color: #9ca3af;
font-size: 0.9rem;
}
.products-search-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
.custom-select-wrapper {
flex: 1;
}
.custom-select {
position: relative;
height: 44px;
}
.custom-select-trigger {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
height: 100%;
padding: 0.625rem 1rem;
border: 1px solid #e5e7eb;
border-radius: 8px;
background: var(--color-white);
font-size: 0.9375rem;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
gap: 0.5rem;
min-width: 0;
}
.custom-select-text {
flex: 1 1 auto;
min-width: 0;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.custom-select-clear {
display: flex;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
background: rgba(0, 0, 0, 0.1);
border-radius: 50%;
color: var(--color-text-secondary);
cursor: pointer;
transition: all 0.2s ease;
flex-shrink: 0;
order: 2;
}
.custom-select-clear:hover {
background: rgba(0, 0, 0, 0.15);
color: var(--color-text-primary);
transform: scale(1.1);
}
.custom-select-clear i {
font-size: 0.75rem;
}
.custom-select.open .custom-select-trigger,
.custom-select.active .custom-select-trigger {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
.custom-options {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: var(--color-white);
border: 1px solid #e5e7eb;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.2s ease;
z-index: 1000;
max-height: 300px;
overflow-y: auto;
}
.custom-select.open .custom-options,
.custom-select.active .custom-options {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.custom-option {
display: block;
padding: 0.625rem 1rem;
font-size: 0.9375rem;
color: var(--color-text-primary);
cursor: pointer;
transition: background 0.2s ease;
}
/* .custom-option:hover {
background: #f3f4f6;
} */
.custom-option.selected {
background: var(--color-primary);
color: var(--color-white);
}
@media (max-width: 768px) {
.products-search-sort {
flex-direction: row;
gap: 0.75rem;
margin-bottom: 1rem;
padding-top: 0.5rem;
}
.products-search-input,
.custom-select-wrapper {
flex: 1;
}
.products-section {
margin-top: 110px !important;
/* IGNORE */
}
.products-search-input::placeholder {
color: #9ca3af;
font-size: 0.8rem;
}
.custom-select-trigger {
font-size: 0.8rem;
}
}
.modal-price-group {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
flex-shrink: 0;
}
.modal-current-price {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary, var(--color-primary));
line-height: 1;
}
.modal-old-price {
font-size: 0.9rem;
color: #6c757d;
text-decoration: line-through;
font-weight: 500;
}
.add-to-cart-row .quantity-selector {
display: flex;
align-items: center;
gap: 0.75rem;
background: #f8f9fa;
border-radius: 20px;
padding: 0.5rem;
}
.add-to-cart-row .quantity-btn {
width: 32px;
height: 32px;
border: none;
background: white;
border-radius: 30px;
color: #343a40;
font-size: 0.875rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.add-to-cart-row .quantity-btn:hover {
background: #e9ecef;
transform: scale(1.05);
}
.add-to-cart-row .quantity-btn:active {
transform: scale(0.95);
}
.add-to-cart-row .quantity-display {
font-size: 1rem;
font-weight: 600;
color: #343a40;
min-width: 24px;
text-align: center;
}
.add-to-cart-btn {
padding: 0.75rem 1.5rem;
background: var(--color-primary, var(--color-primary));
border: none;
border-radius: 30px;
color: white;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
flex-shrink: 0;
}
.add-to-cart-btn:hover {
background: var(--color-primary-dark, --color-primary-dark);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.add-to-cart-btn:active {
transform: translateY(0);
box-shadow: 0 2px 6px rgba(var(--color-primary-rgb, 255, 107, 0), 0.2);
}
/* Product Modal Content */
.product-modal-content {
flex: 1;
overflow: hidden;
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 500px;
}
/* Product Modal Footer */
.product-modal-footer {
background: white;
border-top: 1px solid #e9ecef;
}
/* Mobil Responsive */
@media (max-width: 768px) {
.product-modal-info {
padding-bottom: 0 !important;
}
.add-to-cart-row {
padding: 1rem 1.5rem;
gap: 0.75rem;
}
.modal-current-price {
font-size: 1.3rem;
}
.add-to-cart-btn {
padding: 0.7rem 1.25rem;
font-size: 0.95rem;
}
.add-to-cart-row .quantity-selector {
padding: 0.4rem;
gap: 0.6rem;
}
.add-to-cart-row .quantity-btn {
width: 28px;
height: 28px;
font-size: 0.8rem;
}
.add-to-cart-row .quantity-display {
font-size: 0.9rem;
}
}
@media (max-width: 480px) {
.product-modal-info {
padding-bottom: 0 !important;
}
.add-to-cart-row {
padding: 0.75rem 1rem;
gap: 0.5rem;
}
.modal-current-price {
font-size: 1.2rem;
}
.add-to-cart-btn {
padding: 0.65rem 1.5rem;
font-size: 0.9rem;
}
}
/* ========== PAGE-SPECIFIC STYLES ========== */
.menu-filters-sticky {
position: fixed;
top: 50px;
left: 0;
right: 0;
z-index: 100;
background: #fafbfc;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
padding: 0.5rem 0;
border-radius: 30px;
}
/* ========== MENU PAGE STYLES ========== */
/* Menu Filters */
.menu-filters-section {
padding: 1.5rem 0;
background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
position: sticky;
top: 100px;
z-index: 100;
transition: all 0.3s ease;
}
.menu-filters-section.sticky {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
padding: 0.75rem 0;
}
.menu-filters {
display: flex;
flex-direction: column;
align-items: stretch;
width: 100%;
gap: 0.5rem;
}
.filter-categories {
display: flex;
align-items: center;
gap: 0.75rem;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
width: 100%;
min-width: 0;
padding-bottom: 0.5rem;
justify-content: flex-start;
padding: 0.1rem 0;
scroll-padding-left: var(--space-4, 1rem);
scroll-padding-right: var(--space-4, 1rem);
}
@media (max-width: 768px) {
.filter-categories {
padding-left: 1rem;
padding-right: 1rem;
scrollbar-width: none;
-ms-overflow-style: none;
}
.filter-categories::-webkit-scrollbar {
display: none;
}
.filter-categories .filter-btn:first-child {
margin-left: 0;
}
}
.filter-categories::-webkit-scrollbar {
display: none;
}
.filter-controls {
width: 100%;
min-width: 0;
overflow-x: unset !important;
overflow: visible !important;
}
.filter-btn {
flex-shrink: 0;
white-space: nowrap;
background: transparent;
color: var(--color-text-primary);
border: 1.5px solid #e5e7eb;
border-radius: 20px;
font-weight: 500;
font-size: 1.1rem;
padding: 0.3rem 1rem;
box-shadow: none;
position: relative;
transition: all 0.2s ease;
margin-bottom: 0;
}
.filter-btn:hover,
.filter-btn:focus {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
}
.filter-btn.active {
background: transparent;
border-color: var(--color-primary);
color: var(--color-primary);
font-weight: 600;
}
.filter-btn.active:after {
content: '';
display: block;
position: absolute;
left: 16px;
right: 16px;
bottom: -8px;
height: 4px;
border-radius: 2px;
background: var(--color-primary);
}
@media (max-width: 900px) {
.filter-btn {
font-size: 1rem;
padding: 0.75rem 1.3rem;
}
}
@media (max-width: 600px) {
.filter-btn {
font-size: 0.95rem;
padding: 0.65rem 1.1rem;
}
.filter-btn.active:after {
left: 8px;
right: 8px;
bottom: -6px;
height: 3px;
}
}
/* Alt kategori satırı (ana kategori seçildiğinde) */
.filter-subcategories-wrapper {
padding: 0.5rem 0 0;
border-top: 1px solid #eee;
margin-top: 0rem;
}
.filter-subcategories {
display: flex;
align-items: center;
gap: 0.5rem;
flex-wrap: nowrap;
min-height: 2.5rem;
margin-left: 0.5rem;
justify-content: center;
}
.filter-subcategories::-webkit-scrollbar {
display: none;
}
.filter-sub-btn {
flex-shrink: 0;
font-size: 0.895rem;
padding: 0.34rem 0.79rem;
}
.filter-sub-btn i {
margin-right: 0.35rem;
}
/* Filter Dropdown Styles - CLEANED */
.filter-dropdown {
position: relative;
display: inline-block;
z-index: 9999;
}
.dropdown-toggle {
display: flex !important;
align-items: center !important;
gap: 0.4em !important;
padding: 0.5rem 1.5rem !important;
font-size: 1rem !important;
position: relative !important;
background: white !important;
border: 2px solid #e9ecef !important;
border-radius: 25px !important;
color: #6c757d !important;
font-weight: 500 !important;
cursor: pointer !important;
min-width: 100px !important;
width: auto !important;
flex-shrink: 0 !important;
}
.dropdown-toggle i {
font-size: 1.1em !important;
vertical-align: middle !important;
position: static !important;
}
.dropdown-toggle i.chevron,
.dropdown-toggle i.fa-chevron-down,
.dropdown-toggle i.fa-angle-down {
font-size: 0.9em !important;
margin-left: 0.2em !important;
margin-right: 0 !important;
vertical-align: middle !important;
position: static !important;
transition: transform 0.3s;
}
.filter-dropdown.active .dropdown-toggle i.chevron,
.filter-dropdown.active .dropdown-toggle i.fa-chevron-down,
.filter-dropdown.active .dropdown-toggle i.fa-angle-down {
transform: rotate(180deg);
}
.filter-dropdown-menu {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 2px solid #e9ecef;
border-radius: 12px;
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
padding: 1rem;
margin-top: 0.5rem;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
transform: translateY(10px) !important;
transition: all 0.3s !important;
z-index: 10000 !important;
display: block !important;
min-width: 300px;
width: 350px;
max-width: 90vw;
flex-direction: column;
gap: 0.5rem;
}
.filter-dropdown.active .filter-dropdown-menu {
opacity: 1 !important;
visibility: visible !important;
pointer-events: auto !important;
transform: translateY(0) !important;
display: block !important;
z-index: 10000 !important;
}
.filter-dropdown-menu .filter-btn {
width: 100%;
justify-content: flex-start;
border-radius: 8px;
padding: 0.8rem 1.2rem;
font-size: 1rem;
border: 1px solid transparent;
background: transparent;
min-height: 48px;
}
.filter-dropdown-menu .filter-btn:hover {
background: rgba(255, 107, 0, 0.1) !important;
border-color: rgba(255, 107, 0, 0.3) !important;
color: var(--color-primary) !important;
transform: none !important;
box-shadow: none !important;
}
.filter-dropdown-menu .filter-btn.active {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.filter-controls {
display: flex;
gap: 1rem;
justify-content: center;
align-items: center;
}
.search-control {
position: relative;
display: flex;
align-items: center;
}
.search-control i {
position: absolute;
left: 1rem;
color: #6c757d;
z-index: 1;
}
.search-control input {
padding: 0.75rem 1rem 0.75rem 2.5rem;
border: 2px solid #e9ecef;
border-radius: 25px;
background: white;
font-size: 0.9rem;
width: 250px;
transition: all 0.3s ease;
}
.search-control input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
.sort-control select {
padding: 0.75rem 1rem;
border: 2px solid #e9ecef;
border-radius: 25px;
background: white;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.sort-control select:focus {
outline: none;
border-color: var(--color-primary);
}
/* Products Section */
.products-section {
width: 100%;
max-width: 100%;
margin-left: calc(-50vw + 50%);
margin-right: calc(-50vw + 50%);
margin-top: 110px;
/* Header + kategori alanının yüksekliği + ekstra boşluk */
background: #fafbfc;
padding-bottom: 1rem;
}
.products-section .products-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
width: 100%;
margin: 0 auto;
padding: 2.5rem 2vw 2rem 2vw;
box-sizing: border-box;
}
.products-section .product-card {
min-width: 0;
width: 100%;
max-width: 100%;
background: #fff;
border-radius: 16px;
box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.07);
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 0.52rem 0.52rem 0.52rem 0.52rem;
transition: box-shadow 0.18s, transform 0.18s;
position: relative;
max-height: 350px;
height: 100%;
margin-bottom: 2rem;
}
@media (max-width: 1100px) {
.products-section .products-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.products-section .products-list {
grid-template-columns: 1fr;
}
}
.products-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e9ecef;
}
.products-info {
display: flex;
align-items: center;
gap: 1rem;
font-size: 0.9rem;
color: #6c757d;
}
.products-count {
font-weight: 600;
color: #343a40;
}
.view-toggle {
display: flex;
gap: 0.5rem;
}
.view-btn {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 2px solid #e9ecef;
border-radius: 8px;
color: #6c757d;
cursor: pointer;
transition: all 0.3s ease;
}
.view-btn:hover,
.view-btn.active {
border-color: var(--color-primary);
color: var(--color-primary);
background: rgba(255, 107, 0, 0.05);
}
/* Modern ürün grid ve kart tasarımı - birebir örneğe uygun */
.products-section .products-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2.2rem 1.5rem;
margin: 2.5rem 0 2rem 0;
}
.products-section .product-card:hover {
box-shadow: 0 8px 32px 0 rgba(255, 107, 0, 0.13);
transform: translateY(-4px) scale(1.03);
}
.products-section .product-card:hover .product-name {
color: var(--color-primary);
}
.products-section .product-image {
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start;
position: relative;
margin-bottom: 1.1rem;
background: #fafafa;
border-radius: 12px;
}
.products-section .product-image img {
width: 100%;
object-fit: cover;
border-radius: 12px;
background: #fafafa;
}
.products-section .product-image img.lazy-image {
opacity: 0;
transition: opacity 0.3s ease;
}
.products-section .product-image img.lazy-image.loaded {
opacity: 1;
}
.products-section .product-image .image-loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--color-primary);
border-radius: 50%;
animation: spinner-rotate 1s linear infinite;
z-index: 10;
display: none;
margin: 0;
padding: 0;
}
@keyframes spinner-rotate {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
.badge-red {
background: #e74c3c;
}
.badge-green {
background: #27ae60;
}
.badge-orange {
background: var(--color-primary);
}
.badge-blue {
background: #2980b9;
}
.products-section .product-title {
font-size: 1.13rem;
font-weight: 700;
text-align: left;
margin-bottom: 0.3rem;
color: #222;
}
.products-section .product-desc {
font-size: 0.97rem;
color: #888;
text-align: left;
margin-bottom: 1.1rem;
min-height: 38px;
}
.products-section .product-bottom {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
margin-top: auto;
gap: 1rem;
}
.products-section .product-price {
font-size: 1.18rem;
font-weight: 700;
color: var(--color-primary);
}
.products-section .product-old-price {
font-size: 1rem;
color: #bbb;
text-decoration: line-through;
font-weight: 500;
margin-left: 0.5rem;
}
.products-section .product-select-btn {
background: var(--color-primary);
color: #fff;
border: none;
border-radius: 1.7rem;
padding: 0.7rem 2.2rem;
font-size: 1.08rem;
font-weight: 700;
cursor: pointer;
transition: background 0.18s;
box-shadow: 0 2px 8px 0 rgba(255, 107, 0, 0.08);
margin-left: auto;
}
.products-section .product-select-btn:hover {
background: #ff8c1a;
}
@media (max-width: 1100px) {
.products-section .products-list {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 700px) {
.products-section .products-list {
grid-template-columns: 1fr;
gap: 1.1rem;
}
.products-section .product-card {
padding: 1rem 0.5rem 1rem 0.5rem;
margin-bottom: 0.25rem;
}
.products-section .product-title {
font-size: 1.01rem;
}
.products-section .product-price {
font-size: 1rem;
}
}
.products-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
/* en küçük */
gap: 0 1rem;
margin: 0 0 2rem 0;
justify-items: start;
}
/* >=480px: 2 ürün */
@media (min-width: 480px) {
.products-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* >=768px: 3 ürün */
@media (min-width: 768px) {
.products-grid {
grid-template-columns: repeat(3, 1fr);
gap: 0 1.5rem;
}
}
/* >=992px: 4 ürün */
@media (min-width: 992px) {
.products-grid {
grid-template-columns: repeat(4, 1fr);
gap: 0 1rem;
}
}
/* >=1200px: 5 ürün */
@media (min-width: 1200px) {
.products-grid {
grid-template-columns: repeat(5, 1fr);
gap: 0 1.5rem;
}
}
.product-card {
background: transparent;
/* Arka planı şeffaf yap */
border-radius: 12px;
transition: all 0.3s ease;
cursor: pointer;
position: relative;
padding: 1rem;
display: flex;
flex-direction: column;
height: 100%;
}
.product-card:hover {
transform: translateY(-5px);
}
.product-image {
position: relative;
height: 350px;
/* Resim yüksekliğini artırdım */
overflow: hidden;
border-radius: 12px;
margin-bottom: 1rem;
background: #fafafa;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.product-image img.lazy-image {
opacity: 0;
}
.product-image img.lazy-image.loaded {
opacity: 1;
}
.product-image .image-loading-spinner {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 30px;
height: 30px;
border: 3px solid #f3f3f3;
border-top: 3px solid var(--color-primary);
border-radius: 50%;
animation: spinner-rotate 1s linear infinite;
z-index: 10;
display: none;
margin: 0;
padding: 0;
}
.product-content {
padding: 0;
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
width: 100%;
}
.product-badge {
position: absolute;
top: 0.75rem;
left: 0.75rem;
padding: 0.35rem 0.8rem;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
color: #fff;
background: var(--color-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
backdrop-filter: blur(8px);
transition: all 0.3s ease;
z-index: 10;
}
/* Badge türlerine göre renkler - Daha canlı ve minimal */
.product-badge:contains("%") {
background: linear-gradient(135deg, #ff4757, #ff3742);
color: #fff;
}
.product-badge:contains("Yeni") {
background: linear-gradient(135deg, #2ed573, #1e90ff);
color: #fff;
}
.product-badge:contains("Popüler") {
background: linear-gradient(135deg, #ffa502, #ff6348);
color: #fff;
}
.product-badge:contains("Öğrenci") {
background: linear-gradient(135deg, #3742fa, #5f27cd);
color: #fff;
}
.product-badge:contains("Sağlıklı") {
background: linear-gradient(135deg, #2ed573, #1e90ff);
color: #fff;
}
.product-badge:contains("Sıcak") {
background: linear-gradient(135deg, #ff6348, #ff4757);
color: #fff;
}
.product-badge:contains("Kahvaltı") {
background: linear-gradient(135deg, #ffa502, #ff6348);
color: #fff;
}
/* Hover efekti */
.product-card:hover .product-badge {
transform: translateY(-3px) scale(1.05);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
/* Responsive düzenlemeler */
@media (max-width: 768px) {
.product-image {
height: 240px;
}
.product-badge {
padding: 0.3rem 0.7rem;
font-size: 0.4rem;
top: 0.6rem;
left: 0.6rem;
}
}
@media (max-width: 480px) {
.product-image {
height: 200px;
}
.product-badge {
padding: 0.25rem 0.2rem;
font-size: 0.5rem;
top: 0.5rem;
left: 0.5rem;
border-radius: 8px;
}
}
.product-favorite {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
}
.product-favorite:hover {
background: white;
color: var(--color-primary);
transform: scale(1.1);
}
.product-favorite.active {
color: #dc3545;
}
.product-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 0.75rem;
}
.product-name {
font-size: 1.1rem;
font-weight: 600;
color: #343a40;
margin: 0;
line-height: 1.3;
}
.product-rating {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.85rem;
color: #ffc107;
font-weight: 500;
}
.product-rating span {
color: #6c757d;
}
.product-description {
color: #6c757d;
font-size: 0.8rem;
line-height: 1.5;
margin-bottom: 1rem;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
flex-grow: 1;
}
.product-footer {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: auto;
width: 100%;
gap: 1rem;
}
.product-price {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
flex: 0 0 auto;
min-width: 0;
}
.current-price {
font-size: 1.25rem;
font-weight: 700;
color: var(--color-primary);
}
.old-price {
font-size: 0.9rem;
color: #6c757d;
text-decoration: line-through;
}
.product-add-btn {
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 0px 5px rgba(255, 107, 0, 0.3);
box-shadow: 0 0px 5px color-mix(in srgb, var(--color-primary) 30%, transparent);
padding: 0.5rem 2rem;
border-radius: 30px;
flex-shrink: 0;
white-space: nowrap;
}
.product-add-btn:hover {
transform: scale(1.1);
box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
box-shadow: 0 6px 20px color-mix(in srgb, var(--color-primary) 40%, transparent);
}
/* Modern Product Modal */
.product-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s ease;
padding: 2rem;
will-change: opacity;
}
.product-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.product-modal {
background: white;
border-radius: 24px;
max-width: 900px;
width: 100%;
max-height: 90vh;
overflow: hidden;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 14px 30px rgba(0, 0, 0, 0.16);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
display: flex;
flex-direction: column;
}
.product-modal-overlay.active .product-modal {
transform: translateX(0);
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
}
/* ========== SWIPE-TO-CLOSE (Sadece mobil touch) – Tüm modallar için ortak ========== */
/* Hangi overlay’e swipe-dragging eklenirse eklensin, geçiş kapatılır */
.swipe-dragging,
.swipe-dragging>* {
transition: none;
}
/* Tarayıcının dokunmayı yorumlamasını kapat; kayma hemen başlasın, gecikme olmasın */
.swipe-dragging {
touch-action: none;
}
/* Performans: transform için GPU katmanı (swipe kullanan tüm modal kutuları) */
.product-modal-overlay .product-modal,
.new-cart-modal-overlay .new-cart-modal,
.campaign-modal-overlay .campaign-modal,
.pickup-time-modal-overlay .pickup-time-modal,
.pickup-payment-modal-overlay .pickup-payment-modal,
.order-addr-modal .order-addr-modal__box {
will-change: transform;
}
.product-modal-header {
position: absolute;
top: 1rem;
left: 1rem;
z-index: 10;
}
.product-modal-close {
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.9);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
backdrop-filter: blur(10px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.product-modal-close:hover {
background: white;
transform: scale(1.1);
}
.product-modal-image {
position: relative;
background: linear-gradient(135deg, #f8f9fa, #e9ecef);
overflow: hidden;
max-height: 70vh;
}
.product-modal-image .image-loading-spinner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: none;
align-items: center;
justify-content: center;
background: rgba(248, 249, 250, 0.98);
z-index: 100;
pointer-events: none;
}
.product-modal-image .image-loading-spinner .spinner {
width: 48px;
height: 48px;
border: 4px solid #e9ecef;
border-top-color: var(--color-primary, var(--color-primary));
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.product-modal-image img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.3s ease;
}
.product-modal-image img.loaded {
opacity: 1;
}
.product-modal-image img.lazy-image {
opacity: 0;
}
.product-modal-badge {
position: absolute;
top: 1.5rem;
right: 1.5rem;
padding: 0.5rem 1rem;
border-radius: 16px;
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: white;
}
.product-modal-info {
padding: 1rem;
padding-bottom: calc(2rem + 70px);
overflow-y: auto;
display: flex;
flex-direction: column;
gap: 1.5rem;
min-height: 0;
scrollbar-width: thin;
scrollbar-color: var(--color-primary) #f1f1f1;
max-height: 70vh;
}
.product-modal-info::-webkit-scrollbar {
width: 6px;
}
.product-modal-info::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.product-modal-info::-webkit-scrollbar-thumb {
background: var(--color-primary);
border-radius: 10px;
}
.product-modal-info::-webkit-scrollbar-thumb:hover {
background: #e55a00;
}
.product-modal-title {
font-size: 1.75rem;
font-weight: 700;
color: #343a40;
margin: 0 0 0.5rem 0;
line-height: 1.2;
}
.product-modal-nutrition-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: #6c757d;
color: white;
border: none;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: 1rem;
line-height: 1;
}
.product-modal-nutrition-btn:hover {
background: #5a6268;
transform: translateY(-1px);
}
.product-modal-nutrition-btn i {
font-size: 0.75rem;
}
.product-modal-description {
color: #6c757d;
font-size: 1rem;
line-height: 1.6;
margin: 0;
}
.product-modal-price {
display: none !important;
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 0;
border-top: 1px solid #e9ecef;
border-bottom: 1px solid #e9ecef;
}
.product-modal-price .current-price {
font-size: 2rem;
font-weight: 700;
color: var(--color-primary);
}
.product-modal-price .old-price {
font-size: 1.25rem;
color: #6c757d;
text-decoration: line-through;
}
/* Options Loading Spinner */
.options-loading-spinner {
display: none;
align-items: center;
justify-content: center;
padding: 3rem 2rem;
max-height: 50px;
}
.options-loading-spinner.loading {
display: flex;
}
.options-loading-spinner .spinner {
width: 48px;
height: 48px;
border: 4px solid #f3f3f3;
border-top-color: var(--color-primary, var(--color-primary));
border-radius: 50%;
animation: spinner-rotate 0.8s linear infinite;
}
.product-option-group {
display: flex;
flex-direction: column;
gap: 0.05rem;
margin-bottom: 1rem;
}
.option-title {
font-size: 1rem;
font-weight: 600;
color: #343a40;
margin: 0;
}
.option-choices {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.option-choice {
display: flex;
align-items: center;
padding: 0.235rem;
border: 2px solid #e9ecef;
border-radius: 12px;
cursor: pointer;
transition: all 0.3s ease;
background: white;
width: auto;
flex: 0 1 auto;
}
.option-choice:hover {
border-color: var(--color-primary);
background: rgba(255, 107, 0, 0.05);
}
.option-choice input {
margin-right: 0.75rem;
width: 20px;
height: 20px;
min-width: 20px;
cursor: pointer;
border-radius: 6px;
border: 2px solid #e9ecef;
appearance: none;
-webkit-appearance: none;
background: white;
transition: all 0.3s ease;
flex-shrink: 0;
position: relative;
}
/* Checkbox qty UI (no tick) */
.option-choice-qty input.option-qty-checkbox {
display: none;
}
.option-choice-qty .choice-content {
gap: 0.35rem;
}
.option-choice-qty .choice-left {
display: flex;
flex-direction: column;
gap: 0rem;
}
.option-choice-qty .choice-qty-left {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.option-choice-qty .choice-qty-add {
border: none;
border-radius: 10px;
color: var(--color-primary, var(--color-primary));
font-weight: 900;
font-size: 20px;
line-height: 20px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
transform: translateY(-1px);
}
.option-choice-qty .choice-qty-controls {
display: inline-flex;
align-items: center;
gap: 0rem;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 0.3rem 0rem;
background: rgb(243, 243, 247);
}
.option-choice-qty .choice-qty-btn {
width: 20px;
height: 20px;
border: none;
border-radius: 8px;
background: #f3f4f6;
color: #111827;
font-weight: 800;
cursor: pointer;
}
.option-choice-qty .choice-qty-btn:active {
transform: scale(0.98);
}
.option-choice-qty .choice-qty-value {
min-width: 18px;
text-align: center;
font-weight: 700;
color: #111827;
}
.option-choice input:checked {
background: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10 3L4.5 8.5L2 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 12px;
}
.choice-content {
display: flex;
justify-content: space-between;
align-items: center;
flex: 1;
}
.choice-name {
font-weight: 400;
color: #343a40;
}
.choice-price {
font-weight: 600;
color: var(--color-primary);
}
.option-choice input:checked+.choice-content {
color: var(--color-primary);
}
/* Option group header + search */
.option-group-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
margin-bottom: 0rem;
}
.option-search-wrapper {
display: flex;
align-items: center;
margin-left: auto;
position: relative;
}
.option-search-input {
width: 0;
opacity: 0;
border: none;
border-radius: 999px;
padding: 0.25rem 2.5rem 0.25rem 0.75rem;
font-size: 0.8rem;
background: #f1f3f5;
color: #495057;
transition: width 0.25s ease, opacity 0.2s ease;
position: relative;
}
.option-search-input.active {
width: 130px;
opacity: 1;
}
.option-search-toggle {
border: none;
background: transparent;
color: #6c757d;
width: 28px;
height: 28px;
border-radius: 999px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: background-color 0.2s ease, color 0.2s ease;
font-size: 0.75rem;
position: absolute;
right: 0.25rem;
z-index: 1;
}
.option-search-toggle:hover {
background: rgba(255, 107, 0, 0.1);
color: var(--color-primary);
}
/* Wrapper veya toggle hover'da input'u aç */
.option-search-wrapper:hover .option-search-input:not(.active),
.option-search-toggle:hover~.option-search-input:not(.active) {
width: 130px;
opacity: 1;
}
.option-search-input:focus {
outline: none;
}
/* Option meta row (limit text + required/optional) */
.option-meta-row {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.65rem;
color: #868e96;
margin-bottom: 0.35rem;
}
.option-required.optional {
color: #868e96;
}
.option-required.required {
color: #e03131;
font-weight: 600;
}
/* Sub Options Styles - genel host */
.sub-options-container {
margin-top: 0.75rem;
padding: 0.175rem 0.75rem 0.1rem 0.285rem;
border-radius: 10px;
background: #f8f9fa;
border: 1px dashed #e9ecef;
}
.sub-option-group {
margin-top: 0.25rem;
}
.sub-option-title {
font-size: 0.9rem;
font-weight: 600;
color: #6c757d;
margin: 0 0 0.5rem 0;
}
.sub-option-group .option-choices {
gap: 0.4rem;
}
.sub-option-group .option-choice {
padding: 0.45rem 0.7rem;
font-size: 0.85rem;
}
.product-notes {
width: 100%;
padding: 1rem;
border: 2px solid #e9ecef;
border-radius: 12px;
resize: vertical;
min-height: 80px;
font-family: inherit;
font-size: 0.9rem;
transition: all 0.3s ease;
}
.product-notes:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
.product-modal-actions {
display: flex;
align-items: center;
gap: 1rem;
margin-top: auto;
border-top: 1px solid #e9ecef;
}
.quantity-selector {
display: flex;
align-items: center;
gap: 0.5rem;
background: #f8f9fa;
padding: 0.5rem;
border-radius: 12px;
}
.quantity-btn {
width: 36px;
height: 36px;
background: white;
border: 1px solid #e9ecef;
border-radius: 8px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #6c757d;
}
.quantity-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
background: rgba(255, 107, 0, 0.05);
}
.quantity-display {
min-width: 40px;
text-align: center;
font-weight: 600;
font-size: 1.1rem;
color: #343a40;
}
/* Mobile Modal Styles */
@media (max-width: 768px) {
.product-modal-overlay {
padding: 0;
align-items: flex-start;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.product-modal {
max-width: 100%;
width: 100%;
/* iOS Safari footer sorunu için 100dvh ile gerçek görünür yükseklik kullan */
max-height: 100vh;
height: 100vh;
max-height: 100dvh;
height: 100dvh;
border-radius: 0px;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.product-modal-overlay.active .product-modal {
transform: translateX(0);
}
.product-modal-content {
grid-template-columns: 1fr;
grid-template-rows: 200px 1fr;
min-height: 0;
}
.product-modal-info {
padding: 1rem;
padding-bottom: calc(1.5rem + 70px) !important;
overflow-y: auto;
min-height: 0;
max-height: 100%;
}
.product-modal-title {
font-size: 1.5rem;
}
.product-modal-price .current-price {
font-size: 1.75rem;
}
.option-choices {
grid-template-columns: 1fr;
}
.quantity-selector {
align-self: center;
}
}
/* Cart Drawer */
.cart-drawer-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: none;
z-index: 999998;
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s ease;
}
.cart-drawer-overlay.active {
opacity: 1;
visibility: visible;
}
.cart-drawer {
position: absolute;
top: 0;
right: 0;
width: 100%;
max-width: 400px;
height: 100%;
background: white;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
}
.cart-drawer-overlay.active .cart-drawer {
transform: translateX(0);
}
.cart-drawer-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
border-bottom: 1px solid #e9ecef;
background: #f8f9fa;
}
.cart-drawer-title {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: 1.25rem;
font-weight: 600;
color: #343a40;
}
.cart-drawer-close {
width: 36px;
height: 36px;
background: none;
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #6c757d;
}
.cart-drawer-close:hover {
background: #e9ecef;
color: #343a40;
}
.cart-drawer-content {
flex: 1;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.cart-items {
flex: 1;
overflow: visible;
}
.cart-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
text-align: center;
color: #6c757d;
}
.cart-empty i,
.cart-empty .cart-empty-icon {
font-size: 3rem;
margin: 0 auto 1rem;
display: block;
opacity: 0.5;
}
.cart-empty .cart-empty-icon {
width: 6rem;
height: 6rem;
object-fit: contain;
margin: 0 auto 1rem;
display: block;
}
.cart-empty p {
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
}
.cart-empty span {
font-size: 0.9rem;
opacity: 0.8;
}
.cart-drawer-footer {
padding: 1.5rem;
border-top: 1px solid #e9ecef;
background: #f8f9fa;
position: relative;
}
.cart-summary {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cart-total {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.25rem;
font-weight: 700;
color: #343a40;
}
.total-amount {
color: var(--color-primary);
}
.cart-actions {
display: flex;
flex-direction: row;
gap: 0.75rem;
}
.cart-continue-btn,
.cart-checkout-btn {
padding: 0.75rem 1.5rem;
border: none;
border-radius: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-decoration: none;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
flex: 1;
}
.cart-continue-btn {
background: #f8f9fa;
color: #6c757d;
border: 2px solid #e9ecef;
}
.cart-continue-btn:hover {
background: #e9ecef;
color: #343a40;
}
.cart-checkout-btn {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
color: white;
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.cart-checkout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
}
/* Cart actions responsive */
@media (max-width: 480px) {
.cart-actions {
flex-direction: column;
gap: 0.5rem;
}
.cart-continue-btn,
.cart-checkout-btn {
width: 100%;
padding: 0.875rem 1rem;
flex: none;
}
}
/* Sepet modalı için özel CSS */
.cart-drawer-footer .cart-actions {
display: flex !important;
flex-direction: row !important;
gap: 0.75rem !important;
}
.cart-drawer-footer .cart-continue-btn,
.cart-drawer-footer .cart-checkout-btn {
flex: 1 !important;
}
/* En alt butonlar için CSS */
.cart-bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #f8f9fa;
border-top: 1px solid #e9ecef;
padding: 1rem 1.5rem;
z-index: 10;
display: block !important;
transition: all 0.3s ease;
}
/* Gizli durumda tamamen kaldır */
.cart-bottom-actions[style*="display: none"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
transform: translateY(100%) !important;
}
/* Sepet bilgileri listesi - tablo tasarımı */
.cart-features {
margin-top: 1rem;
padding: 1rem;
background: white;
border-radius: 12px;
border: 1px solid #e9ecef;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.feature-item {
display: flex;
align-items: center;
gap: 0.75rem;
text-align: left;
font-size: 0.9rem;
color: #333;
padding: 0.5rem 0;
border-bottom: 1px solid #f8f9fa;
}
.feature-item:last-child {
border-bottom: none;
}
.feature-item i {
font-size: 1.1rem;
color: var(--color-primary);
width: 20px;
text-align: center;
}
.feature-item span {
font-weight: 500;
flex: 1;
}
/* Responsive */
@media (max-width: 480px) {
.cart-features {
margin: 1rem 0.5rem;
padding: 0.75rem;
}
.feature-item {
font-size: 0.85rem;
gap: 0.5rem;
}
.feature-item i {
font-size: 1rem;
width: 18px;
}
}
.cart-bottom-summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1.5rem;
}
.cart-bottom-total {
display: flex;
align-items: center;
flex: 1;
}
.cart-bottom-total-amount {
font-size: 1.5rem;
font-weight: 700;
color: #333;
}
.cart-next-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
background: var(--color-primary);
color: white;
border: none;
border-radius: 12px;
font-weight: 600;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
min-width: 120px;
justify-content: center;
}
.cart-next-btn:hover {
background: #e55a00;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 107, 0, 0.4);
}
.cart-next-btn:active {
transform: translateY(0);
}
/* Responsive */
@media (max-width: 480px) {
.cart-bottom-actions {
padding: 0.75rem 1rem;
}
.cart-bottom-summary {
flex-direction: row;
gap: 1rem;
align-items: center;
}
.cart-bottom-total-amount {
font-size: 1.25rem;
}
.cart-next-btn {
min-width: 100px;
padding: 0.75rem 1.25rem;
font-size: 0.9rem;
}
}
/* Cart Total Display */
.cart-total {
font-size: 0.8rem;
font-weight: 600;
color: var(--color-primary);
margin-left: 0.5rem;
display: none;
}
.mobile-cart-total {
font-size: 0.75rem;
font-weight: 600;
color: var(--color-primary);
margin-left: 0.25rem;
display: none;
}
/* Responsive cart total */
@media (max-width: 768px) {
.cart-total {
font-size: 0.7rem;
margin-left: 0.25rem;
}
}
@media (max-width: 480px) {
.cart-total {
font-size: 0.65rem;
margin-left: 0.2rem;
}
.mobile-cart-total {
font-size: 0.7rem;
}
}
/* Add to Cart Notification */
.add-to-cart-notification {
position: fixed;
top: 20px;
right: 20px;
transform: translateX(400px);
background: white;
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
z-index: 10001;
opacity: 0;
visibility: hidden;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 350px;
width: 90%;
border-left: 4px solid #28a745;
}
.add-to-cart-notification.show {
opacity: 1;
visibility: visible;
transform: translateX(0);
}
.notification-content {
display: flex;
align-items: center;
gap: 1rem;
}
.notification-image {
width: 60px;
height: 60px;
border-radius: 12px;
overflow: hidden;
flex-shrink: 0;
}
.notification-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.notification-text {
flex: 1;
}
.notification-text h4 {
margin: 0 0 0.25rem 0;
font-size: 1rem;
font-weight: 600;
color: #343a40;
}
.notification-text p {
margin: 0;
font-size: 0.9rem;
color: #6c757d;
}
.notification-icon {
font-size: 1.5rem;
color: #28a745;
flex-shrink: 0;
}
/* Responsive Styles */
@media (max-width: 768px) {
.menu-filters-section {
top: 60px;
padding: 1rem 0;
}
.menu-filters {
gap: 0.75rem;
}
.filter-categories {
justify-content: flex-start;
overflow-x: auto;
padding-bottom: 0.5rem;
flex-wrap: nowrap;
gap: 0.5rem;
scrollbar-width: none;
-ms-overflow-style: none;
scroll-behavior: smooth;
-webkit-overflow-scrolling: touch;
padding-left: 1rem;
padding-right: 1rem;
scroll-padding-left: 1rem;
scroll-padding-right: 1rem;
}
.filter-categories::-webkit-scrollbar {
display: none;
}
.filter-btn {
flex-shrink: 0;
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
white-space: nowrap;
}
.filter-controls {
flex-direction: row;
gap: 0.5rem;
align-items: center;
display: flex;
width: 100%;
}
.search-control {
flex: 1;
min-width: 0;
}
.search-control input {
width: 100%;
font-size: 0.9rem;
padding: 0.5rem 1rem 0.5rem 2.5rem;
box-sizing: border-box;
}
.sort-control {
flex-shrink: 0;
min-width: 120px;
}
.sort-control select {
padding: 0.5rem 0.75rem;
font-size: 0.85rem;
width: 100%;
box-sizing: border-box;
}
.products-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0rem;
padding-bottom: 0rem;
}
.cart-drawer {
max-width: 100%;
}
.add-to-cart-notification {
top: 10px;
left: 10px;
right: 10px;
width: auto;
max-width: none;
transform: translateY(-100px);
}
.add-to-cart-notification.show {
transform: translateY(0);
}
.products-grid .category-title:first-of-type {
margin-top: 0;
margin-bottom: 0rem !important;
}
.products-grid .category-title {
grid-column: 1 / -1;
padding-bottom: 0rem;
border-bottom: 0px solid #e9ecef;
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 1rem 0 0rem 0 !important;
}
}
@media (max-width: 480px) {
.menu-filters-section {
padding: 0.75rem 0;
}
.menu-filters {
gap: 0.5rem;
}
.filter-categories {
gap: 0.25rem;
}
.filter-btn {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
}
.filter-controls {
flex-direction: row;
gap: 0.5rem;
align-items: center;
display: flex;
width: 100%;
}
.search-control {
flex: 1;
min-width: 0;
}
.search-control input {
font-size: 0.85rem;
padding: 0.4rem 1rem 0.4rem 2.25rem;
width: 100%;
box-sizing: border-box;
}
.sort-control {
flex-shrink: 0;
min-width: 100px;
}
.sort-control select {
padding: 0.4rem 0.6rem;
font-size: 0.8rem;
width: 100%;
box-sizing: border-box;
}
/* Mobilde products-grid için özel stil yok - genel mobil kuralları geçerli */
.products-grid {
gap: 1rem !important;
}
.product-card {
border-radius: 12px;
flex-direction: row !important;
align-items: stretch;
gap: 0.75rem;
padding: 0.75rem !important;
height: 130px !important;
max-height: 120px !important;
overflow: hidden;
}
.products-section .product-card .product-image,
.product-card .product-image {
width: 30% !important;
flex-shrink: 0;
height: 100% !important;
max-height: 130px !important;
align-self: stretch;
margin-bottom: 0 !important;
border-radius: 12px;
overflow: hidden;
}
.product-image img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.product-content {
padding: 0 !important;
flex: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
min-width: 0;
min-height: 0;
}
.product-header {
margin-bottom: 0rem;
}
.product-name {
font-size: 0.8rem;
margin-bottom: 0rem;
}
.product-description {
font-size: 0.685rem;
margin-bottom: 0.05rem;
-webkit-line-clamp: 2;
flex-grow: 0;
}
.product-footer {
margin-top: auto;
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.5rem;
padding-top: 0rem;
}
.product-price {
display: flex;
flex-direction: column;
gap: 0.15rem;
}
.current-price {
font-size: 1rem;
}
.old-price {
font-size: 0.7rem;
}
.product-add-btn {
padding: 0.5rem 2rem;
font-size: 0.85rem;
white-space: nowrap;
}
}
.products-grid .category-anchor {
grid-column: 1 / -1;
display: block;
height: 1px;
width: 100%;
opacity: 0;
pointer-events: none;
margin: 0;
padding: 0;
position: relative;
scroll-margin-top: 100px;
}
.category-anchor {
display: block;
height: 1px;
width: 100%;
opacity: 0;
pointer-events: none;
margin: 0;
padding: 0;
position: relative;
scroll-margin-top: 100px;
}
.loading-state {
display: none;
/* Başlangıçta gizli */
text-align: center;
padding: 2rem;
}
.loading-spinner {
margin-bottom: 1rem;
}
.spinner {
width: 40px;
height: 40px;
border: 3px solid #f3f3f3;
border-top: 3px solid #ff8200;
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.total-amount-lg {
font-size: 2rem;
font-weight: bold;
color: var(--color-primary);
letter-spacing: 1px;
}
/* ========== CATEGORY TITLE ========== */
.products-grid .category-title:first-of-type {
margin-top: 0;
margin-bottom: 1rem;
}
.products-grid .category-title {
grid-column: 1 / -1;
padding-bottom: 0rem;
border-bottom: 0px solid #e9ecef;
font-family: var(--font-heading);
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 1rem 0 1rem 0;
}
/* ========== EMPTY STATE ========== */
.empty-state {
text-align: center;
padding: 4rem 1.5rem;
max-width: 500px;
margin: 2rem auto;
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
}
.empty-state-icon {
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, rgba(255, 107, 0, 0.1) 0%, rgba(255, 107, 0, 0.05) 100%);
border-radius: 50%;
color: var(--color-primary);
margin-bottom: 0.5rem;
animation: float 3s ease-in-out infinite;
}
.empty-state-icon svg {
width: 56px;
height: 56px;
stroke: var(--color-primary);
opacity: 0.8;
}
.empty-state-content {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.empty-state-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
letter-spacing: -0.02em;
}
.empty-state-description {
font-size: 1rem;
color: var(--color-text-secondary);
margin: 0;
line-height: 1.6;
max-width: 400px;
}
.empty-state-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
background: var(--color-primary);
color: white;
border: none;
border-radius: 12px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.25);
margin-top: 0.5rem;
}
.empty-state-button:hover {
background: var(--color-primary-dark, #e55a00);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 0, 0.35);
}
.empty-state-button:active {
transform: translateY(0);
}
.empty-state-button i {
font-size: 1.125rem;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
@media (max-width: 768px) {
.category-title {
font-size: 1.5rem;
margin: 1.5rem 0 1rem 0;
}
.empty-state {
padding: 3rem 1rem;
margin: 1.5rem auto;
}
.empty-state-icon {
width: 100px;
height: 100px;
}
.empty-state-icon svg {
width: 48px;
height: 48px;
}
.empty-state-title {
font-size: 1.25rem;
}
.empty-state-description {
font-size: 0.9375rem;
}
.empty-state-button {
padding: 0.75rem 1.5rem;
font-size: 0.9375rem;
width: 100%;
max-width: 280px;
}
}
/* ========== FIXED CART BUTTON (WEB) ========== */
.fixed-cart-btn {
position: fixed;
right: 20px;
bottom: 20px;
width: 56px;
height: 56px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: white;
border: none;
border-radius: 16px;
box-shadow: 0 4px 16px rgba(255, 107, 0, 0.3);
cursor: pointer;
transition: all 0.3s ease;
z-index: 999;
font-size: 1.3rem;
}
.fixed-cart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 0, 0.4);
}
.fixed-cart-btn .cart-count {
position: absolute;
top: -6px;
right: -6px;
min-width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
background: #dc3545;
color: white;
border-radius: 12px;
font-size: 0.7rem;
font-weight: 700;
padding: 0 5px;
border: 3px solid white;
}
/* Hide fixed cart button on mobile */
@media (max-width: 991px) {
.fixed-cart-btn {
display: none !important;
}
}
/* ========== KURUMSAL SAYFALAR (ŞUBELER, FRANCHISE, KAMPANYALAR) ========== */
/* Page Header */
.page-header {
position: relative;
padding: 5rem 0 4rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #e55a00) 100%);
color: white;
text-align: center;
overflow: hidden;
}
.page-header-background-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.1) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05) 0%, transparent 70%);
background-size: 100% 100%;
opacity: 0.6;
}
.page-header-background-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 20rem;
color: rgba(255, 255, 255, 0.05);
z-index: 0;
pointer-events: none;
}
.page-header-content {
position: relative;
z-index: 1;
}
.page-header-icon-wrapper {
width: 100px;
height: 100px;
margin: 0 auto 1.5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
border-radius: 50%;
border: 3px solid rgba(255, 255, 255, 0.3);
animation: float 3s ease-in-out infinite;
}
.page-header-icon-wrapper i {
font-size: 3rem;
color: white;
}
.page-title {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 0.75rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}
.page-subtitle {
font-size: 1.125rem;
opacity: 0.95;
font-weight: 400;
}
/* ========== HABERLER (News) ========== */
.page-header-news {
background: linear-gradient(135deg, var(--color-primary, var(--color-primary)) 0%, var(--color-accent, --color-primary-dark) 100%);
}
.news-list-section {
padding: 3rem 0 4rem;
}
.news-search-wrap {
display: flex;
align-items: stretch;
gap: 0;
margin-bottom: 2.5rem;
max-width: 720px;
margin-left: auto;
margin-right: auto;
background: var(--color-white, #fff);
border-radius: 14px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
border: 1px solid rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: box-shadow 0.25s ease, border-color 0.25s ease;
}
.news-search-wrap:focus-within {
box-shadow: 0 6px 28px rgba(255, 107, 0, 0.12), 0 0 0 2px rgba(255, 107, 0, 0.15);
border-color: rgba(255, 107, 0, 0.3);
}
.news-search-label {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0 1rem 0 1.25rem;
font-size: 0.9375rem;
font-weight: 500;
color: var(--color-text-secondary, #666);
background: transparent;
}
.news-search-label i {
color: var(--color-primary, var(--color-primary));
font-size: 1rem;
}
.news-search-input {
flex: 1;
min-width: 0;
padding: 1rem 1rem 1rem 0;
border: none;
border-radius: 0;
font-size: 1rem;
background: transparent;
}
.news-search-input::placeholder {
color: #aaa;
}
.news-search-input:focus {
outline: none;
}
.news-search-actions {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.75rem 0.5rem 0;
border-left: 0px solid rgba(0, 0, 0, 0.08);
}
.news-search-btn {
padding: 0.6rem 1.35rem;
background: linear-gradient(135deg, var(--color-primary, var(--color-primary)) 0%, var(--color-accent, --color-primary-dark) 100%);
color: #fff;
border: none;
border-radius: 10px;
font-weight: 600;
font-size: 0.9375rem;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 2px 8px rgba(255, 107, 0, 0.35);
}
.news-search-btn:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
}
.news-search-btn:active {
transform: translateY(0);
}
.news-search-clear {
padding: 0.6rem 1rem;
background: transparent;
color: var(--color-text-secondary, #666);
border: none;
border-radius: 10px;
font-weight: 500;
font-size: 0.9375rem;
cursor: pointer;
transition: background 0.2s ease, color 0.2s ease;
}
.news-search-clear:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--color-text, #333);
}
.news-pagination {
margin-top: 2.5rem;
display: flex;
justify-content: center;
}
.news-pagination-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.news-pagination-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 40px;
height: 40px;
padding: 0 0.75rem;
border-radius: 8px;
background: var(--color-white, #fff);
border: 1px solid #e0e0e0;
color: var(--color-text, #333);
text-decoration: none;
font-weight: 600;
transition: all 0.2s ease;
}
.news-pagination-link:hover {
border-color: var(--color-primary, var(--color-primary));
color: var(--color-primary, var(--color-primary));
}
.news-pagination-link.active {
background: var(--color-primary, var(--color-primary));
border-color: var(--color-primary, var(--color-primary));
color: #fff;
}
.news-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
.news-loading,
.news-empty {
grid-column: 1 / -1;
text-align: center;
padding: 3.5rem 2rem;
color: var(--color-text-secondary, #666);
}
.news-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
min-height: 200px;
}
.news-loading .news-loading-spinner {
width: 48px;
height: 48px;
border: 3px solid rgba(255, 107, 0, 0.2);
border-top-color: var(--color-primary, var(--color-primary));
border-radius: 50%;
animation: news-spin 0.8s linear infinite;
}
.news-loading .news-loading-text {
font-size: 1rem;
font-weight: 500;
}
@keyframes news-spin {
to {
transform: rotate(360deg);
}
}
.news-card {
background: var(--color-white, #fff);
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.news-card:hover {
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
transform: translateY(-4px);
}
.news-card-link {
display: block;
text-decoration: none;
color: inherit;
}
.news-card-image-wrap {
aspect-ratio: 16/10;
overflow: hidden;
background: var(--color-bg-secondary, #f5f5f5);
}
.news-card-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.news-card-body {
padding: 1.5rem;
}
.news-card-date {
display: block;
font-size: 0.875rem;
color: var(--color-primary, var(--color-primary));
margin-bottom: 0.5rem;
}
.news-card-title {
font-size: 1.25rem;
font-weight: 700;
margin: 0 0 0.75rem;
line-height: 1.35;
}
.news-card-excerpt {
font-size: 0.9375rem;
color: var(--color-text-secondary, #666);
margin: 0 0 1rem;
line-height: 1.5;
}
.news-card-more {
font-size: 0.9375rem;
font-weight: 600;
color: var(--color-primary, var(--color-primary));
}
.news-card-more i {
margin-left: 0.25rem;
font-size: 0.75rem;
}
.news-detail-section {
padding: 4rem 0 4rem;
}
.news-detail-section .container {
padding-left: var(--space-4, 1rem);
padding-right: var(--space-4, 1rem);
}
.news-detail-breadcrumb {
display: block;
margin: 0 0 1.5rem;
padding: 0.75rem 0 1rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
min-height: 2.5rem;
background: rgba(0, 0, 0, 0.02);
border-radius: 8px;
padding-left: 1rem;
padding-right: 1rem;
}
.news-detail-section .news-detail-breadcrumb {
margin-left: 0;
margin-right: 0;
}
.news-breadcrumb-list {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.35rem 0.5rem;
list-style: none;
margin: 0;
padding: 0;
font-size: 0.875rem;
color: #555;
}
.news-breadcrumb-list li {
display: flex;
align-items: center;
gap: 0.5rem;
color: #555;
}
.news-breadcrumb-list li:not(:last-child)::after {
content: '\203A';
margin-left: 0.5rem;
font-size: 0.8rem;
color: #999;
}
.news-breadcrumb-list a {
color: #555;
text-decoration: none;
transition: color 0.2s ease;
}
.news-breadcrumb-list a:hover {
color: var(--color-primary, var(--color-primary));
}
.news-breadcrumb-list li[aria-current="page"] {
color: #222;
font-weight: 600;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.news-detail-layout {
display: grid;
grid-template-columns: 1fr 340px;
gap: 2.5rem;
align-items: start;
}
@media (max-width: 992px) {
.news-detail-layout {
grid-template-columns: 1fr;
}
.news-detail-sidebar {
border-top: 1px solid rgba(0, 0, 0, 0.08);
padding-top: 2rem;
}
}
.news-detail-main {
min-width: 0;
}
.news-detail-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
min-height: 200px;
color: var(--color-text-secondary, #666);
}
.news-detail-loading .news-loading-spinner {
width: 48px;
height: 48px;
border: 3px solid rgba(255, 107, 0, 0.2);
border-top-color: var(--color-primary, var(--color-primary));
border-radius: 50%;
animation: news-spin 0.8s linear infinite;
}
.news-detail-article {
background: var(--color-white, #fff);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.06);
}
.news-detail-image-wrap {
border-radius: 0;
overflow: hidden;
margin-bottom: 0;
background: var(--color-bg-secondary, #f5f5f5);
aspect-ratio: 16 / 9;
}
.news-detail-image {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-detail-header {
margin-bottom: 0;
padding: 2rem 2rem 0;
}
.news-detail-date {
display: block;
font-size: 0.875rem;
color: var(--color-primary, var(--color-primary));
margin-bottom: 0.5rem;
font-weight: 600;
}
.news-detail-title {
font-size: 1.75rem;
font-weight: 800;
margin: 0 0 0.5rem;
line-height: 1.3;
letter-spacing: -0.02em;
}
.news-detail-author {
font-size: 0.875rem;
color: var(--color-text-secondary, #666);
}
.news-detail-body {
font-size: 1.0625rem;
line-height: 1.75;
padding: 0 2rem 2rem;
}
.news-detail-body p {
margin-bottom: 1rem;
}
.news-detail-body p:last-child {
margin-bottom: 0;
}
.news-detail-back {
margin-top: 2rem;
text-align: left;
}
.news-detail-back a {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--color-primary, var(--color-primary));
text-decoration: none;
font-weight: 600;
font-size: 0.9375rem;
transition: opacity 0.2s ease;
}
.news-detail-back a:hover {
opacity: 0.85;
}
/* Sidebar: İlginizi çekebilir */
.news-detail-sidebar {
position: sticky;
top: 1.5rem;
}
.news-sidebar-title {
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 1.25rem;
color: var(--color-text, #333);
display: flex;
align-items: center;
gap: 0.5rem;
}
.news-sidebar-title i {
color: var(--color-primary, var(--color-primary));
}
.news-sidebar-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.news-sidebar-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 0.75rem;
background: var(--color-white, #fff);
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.06);
text-decoration: none;
color: inherit;
transition: box-shadow 0.2s ease, border-color 0.2s ease;
}
.news-sidebar-item:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
border-color: rgba(255, 107, 0, 0.2);
}
.news-sidebar-item-thumb {
flex-shrink: 0;
width: 72px;
height: 72px;
border-radius: 10px;
overflow: hidden;
background: var(--color-bg-secondary, #f5f5f5);
}
.news-sidebar-item-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.news-sidebar-item-content {
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.news-sidebar-item-title {
font-size: 0.9375rem;
font-weight: 600;
line-height: 1.35;
color: var(--color-text, #333);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.news-sidebar-item-date {
font-size: 0.75rem;
color: var(--color-text-secondary, #666);
}
.news-sidebar-empty {
font-size: 0.9375rem;
color: var(--color-text-secondary, #666);
margin: 0;
padding: 1rem 0;
}
@keyframes float {
0%,
100% {
transform: translateY(0);
}
50% {
transform: translateY(-10px);
}
}
/* Modal Styles for Corporate Pages */
.modal-overlay {
z-index: 10000 !important;
backdrop-filter: none;
-webkit-backdrop-filter: none;
background: rgba(0, 0, 0, 0.65);
transition: opacity 0.12s ease, visibility 0.12s ease;
}
.modal-container {
position: relative;
background-color: white;
border-radius: 16px;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
max-width: 90vw;
max-height: 90vh;
overflow: hidden;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: flex;
flex-direction: column;
}
.modal-overlay.active .modal-container {
transform: translateY(0);
}
.modal-container.modal-md {
width: 100%;
max-width: 600px;
}
.modal-container.modal-lg {
width: 100%;
max-width: 900px;
}
.modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.6);
border: none;
border-radius: 50%;
color: white;
cursor: pointer;
z-index: 10001;
transition: all 0.2s ease;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.modal-close:hover {
background-color: rgba(0, 0, 0, 0.8);
transform: scale(1.1);
}
.modal-close i {
font-size: 1.125rem;
}
.modal-content {
padding: 0;
overflow-y: auto;
flex: 1;
}
/* Branches Page */
.branches-section {
padding: 3rem 0;
}
.branches-filter {
display: flex;
gap: 0.75rem;
margin-bottom: 2rem;
flex-wrap: wrap;
align-items: center;
}
.branches-filter-list {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.branch-filter-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: white;
border: 2px solid var(--color-gray-200);
border-radius: 50px;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.3s ease;
}
.branch-filter-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-2px);
}
.branch-filter-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.branches-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
.branch-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.branch-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.branch-image {
position: relative;
height: 200px;
overflow: hidden;
}
.branch-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.branch-badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.375rem 0.875rem;
background: var(--color-primary);
color: white;
font-size: 0.75rem;
font-weight: 600;
border-radius: 50px;
}
.branch-content {
padding: 1.5rem;
}
.branch-name {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--color-text-primary);
}
.branch-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.branch-info-item {
display: flex;
align-items: center;
gap: 0.625rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.branch-info-item i {
color: var(--color-primary);
width: 20px;
}
.branch-info-item a {
color: var(--color-text-secondary);
text-decoration: none;
}
.branch-info-item a:hover {
color: var(--color-primary);
}
.branch-actions {
display: flex;
gap: 0.75rem;
}
.branch-actions .btn {
flex: 1;
}
/* Branch Detail Modal */
.branch-detail-header img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 12px 12px 0 0;
}
.branch-detail-body {
padding: 2rem;
}
.branch-detail-body h2 {
font-size: 1.75rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--color-text-primary);
}
.branch-detail-info {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-bottom: 2rem;
}
.info-group {
display: flex;
gap: 1rem;
}
.info-group i {
color: var(--color-primary);
font-size: 1.25rem;
width: 24px;
flex-shrink: 0;
}
.info-group strong {
display: block;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--color-text-primary);
}
.info-group p {
color: var(--color-text-secondary);
margin: 0;
}
.branch-features {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: 0.5rem;
}
.feature-tag {
display: inline-block;
padding: 0.375rem 0.75rem;
background: var(--color-gray-100);
color: var(--color-text-primary);
font-size: 0.75rem;
font-weight: 500;
border-radius: 50px;
}
/* Franchise Page */
.franchise-hero {
position: relative;
padding: 6rem 0 5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #e55a00) 100%);
color: white;
text-align: center;
overflow: hidden;
}
.franchise-hero-content {
position: relative;
z-index: 1;
}
.franchise-hero-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
}
.franchise-hero-subtitle {
font-size: 1.25rem;
margin-bottom: 2rem;
opacity: 0.95;
font-weight: 400;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.franchise-hero-actions {
display: flex;
gap: 1rem;
justify-content: center;
}
.franchise-stats {
padding: 4rem 0;
background: var(--color-gray-50);
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
}
.stat-card {
background: white;
padding: 2rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.stat-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.stat-icon {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 1rem;
}
.stat-value {
font-size: 2.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 1rem;
color: var(--color-text-secondary);
}
.franchise-why,
.franchise-steps,
.franchise-investment,
.franchise-form-section {
padding: 4rem 0;
}
.section-header {
text-align: center;
margin-bottom: 3rem;
}
.section-title {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 0.75rem;
color: var(--color-text-primary);
}
.section-subtitle {
font-size: 1.125rem;
color: var(--color-text-secondary);
}
.why-grid,
.investment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.why-card,
.investment-card {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
text-align: center;
transition: all 0.3s ease;
}
.why-card:hover,
.investment-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.why-icon,
.investment-icon {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 1rem;
}
.why-title,
.investment-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--color-text-primary);
}
.why-description {
color: var(--color-text-secondary);
line-height: 1.6;
}
.investment-amount {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.investment-note {
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.steps-timeline {
display: flex;
flex-direction: column;
gap: 2rem;
max-width: 800px;
margin: 0 auto;
}
.step-item {
display: flex;
gap: 1.5rem;
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.step-item:hover {
transform: translateX(8px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.step-number {
flex-shrink: 0;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: white;
font-size: 1.5rem;
font-weight: 700;
border-radius: 50%;
}
.step-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: var(--color-text-primary);
}
.step-description {
color: var(--color-text-secondary);
line-height: 1.6;
}
.franchise-form {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 3rem;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.form-group {
margin-bottom: 1.5rem;
}
.form-group label {
display: block;
font-weight: 500;
margin-bottom: 0.5rem;
color: var(--color-text-primary);
}
.required {
color: var(--color-primary);
}
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--color-gray-300);
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
/* Campaigns Page */
.campaigns-section {
padding: 3rem 0;
}
.campaigns-filter {
display: flex;
gap: 0.75rem;
margin-bottom: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.campaign-filter-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: white;
border: 2px solid var(--color-gray-200);
border-radius: 50px;
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.3s ease;
}
.campaign-filter-btn:hover {
border-color: var(--color-primary);
color: var(--color-primary);
transform: translateY(-2px);
}
.campaign-filter-btn.active {
background: var(--color-primary);
border-color: var(--color-primary);
color: white;
}
.campaigns-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
}
.campaign-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.campaign-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.campaign-image {
position: relative;
height: 220px;
overflow: hidden;
}
.campaign-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.campaign-badges {
position: absolute;
top: 1rem;
left: 1rem;
display: flex;
gap: 0.5rem;
flex-direction: column;
align-items: flex-start;
}
.campaign-badge {
padding: 0.375rem 0.875rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 50px;
display: inline-flex;
align-items: center;
gap: 0.25rem;
}
.badge-active {
background: #28a745;
color: white;
}
.badge-upcoming {
background: #3b82f6;
color: white;
}
.badge-hot {
background: var(--color-primary);
color: white;
}
.campaign-countdown {
position: absolute;
bottom: 1rem;
right: 1rem;
padding: 0.5rem 1rem;
background: rgba(0, 0, 0, 0.7);
color: white;
font-size: 0.875rem;
font-weight: 500;
border-radius: 50px;
backdrop-filter: blur(10px);
}
.campaign-content {
padding: 1.5rem;
}
.campaign-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--color-text-primary);
}
.campaign-description {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin-bottom: 1rem;
line-height: 1.6;
}
.campaign-meta {
margin-bottom: 1.25rem;
}
.campaign-date {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.campaign-date i {
color: var(--color-primary);
}
/* Campaign Detail Modal */
.campaign-detail-image {
position: relative;
}
.campaign-detail-image img {
width: 100%;
height: 300px;
object-fit: cover;
border-radius: 12px 12px 0 0;
}
.campaign-detail-countdown {
position: absolute;
bottom: 1rem;
right: 1rem;
padding: 0.75rem 1.25rem;
background: rgba(0, 0, 0, 0.8);
color: white;
font-size: 1rem;
font-weight: 600;
border-radius: 50px;
backdrop-filter: blur(10px);
}
.campaign-detail-body {
padding: 2rem;
}
.campaign-detail-badges {
display: flex;
gap: 0.5rem;
margin-bottom: 1rem;
}
.campaign-detail-title {
font-size: 2rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary);
}
.campaign-detail-date {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 1rem;
color: var(--color-text-secondary);
margin-bottom: 1.5rem;
}
.campaign-detail-description {
font-size: 1rem;
line-height: 1.8;
color: var(--color-text-primary);
margin-bottom: 2rem;
}
.campaign-detail-terms {
background: var(--color-gray-50);
padding: 1rem;
border-radius: 12px;
margin-bottom: 2rem;
}
.campaign-detail-terms h4 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: 0.5rem;
}
.campaign-detail-terms ul {
list-style: none;
padding: 0;
margin: 0;
}
.campaign-detail-terms li {
padding: 0.5rem 0;
color: var(--color-text-secondary);
position: relative;
padding-left: 1.5rem;
}
.campaign-detail-terms li:before {
content: "•";
position: absolute;
left: 0;
color: var(--color-primary);
font-weight: 700;
}
/* About Page */
.about-hero {
position: relative;
padding: 6rem 0 5rem;
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #e55a00) 100%);
color: white;
text-align: center;
overflow: hidden;
}
.hero-background-pattern {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.12) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.08) 0%, transparent 60%);
background-size: 100% 100%;
opacity: 0.7;
}
.hero-background-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 25rem;
color: rgba(255, 255, 255, 0.06);
z-index: 0;
pointer-events: none;
animation: pulse 4s ease-in-out infinite;
}
.about-hero-content {
position: relative;
z-index: 1;
}
.hero-icon-wrapper {
width: 120px;
height: 120px;
margin: 0 auto 2rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.18);
backdrop-filter: blur(15px);
border-radius: 50%;
border: 4px solid rgba(255, 255, 255, 0.35);
animation: float 3.5s ease-in-out infinite;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.hero-icon-wrapper i {
font-size: 3.5rem;
color: white;
}
.about-hero-title {
font-size: 3rem;
font-weight: 700;
margin-bottom: 1rem;
text-shadow: 0 3px 15px rgba(0, 0, 0, 0.3);
}
.about-hero-subtitle {
font-size: 1.25rem;
opacity: 0.95;
font-weight: 400;
max-width: 700px;
margin: 0 auto;
}
@keyframes pulse {
0%,
100% {
opacity: 0.06;
transform: translate(-50%, -50%) scale(1);
}
50% {
opacity: 0.1;
transform: translate(-50%, -50%) scale(1.05);
}
}
.about-story {
padding: 5rem 0;
}
.story-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
}
.story-image img {
width: 100%;
border-radius: 16px;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
.story-content h2 {
font-size: 2.25rem;
font-weight: 700;
margin-bottom: 1.5rem;
color: var(--color-text-primary);
}
.story-content p {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--color-text-secondary);
margin-bottom: 1.25rem;
}
.story-stats {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
margin-top: 2.5rem;
}
.stat-item {
text-align: center;
}
.stat-number {
display: block;
font-size: 2.5rem;
font-weight: 700;
color: var(--color-primary);
margin-bottom: 0.5rem;
}
.stat-label {
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.about-values,
.about-team {
padding: 4rem 0;
background: var(--color-gray-50);
}
.values-grid,
.team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 2rem;
}
.value-card {
background: white;
padding: 2rem;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
text-align: center;
transition: all 0.3s ease;
}
.value-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.value-icon {
font-size: 2.5rem;
color: var(--color-primary);
margin-bottom: 1rem;
}
.value-title {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--color-text-primary);
}
.value-description {
color: var(--color-text-secondary);
line-height: 1.6;
}
.team-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.team-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.team-image {
height: 280px;
overflow: hidden;
}
.team-image img {
width: 100%;
height: 100%;
object-fit: cover;
}
.team-info {
padding: 1.5rem;
}
.team-name {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 0.25rem;
color: var(--color-text-primary);
}
.team-position {
font-size: 0.875rem;
color: var(--color-primary);
font-weight: 500;
margin-bottom: 0.75rem;
}
.team-bio {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.6;
}
.about-cta {
padding: 5rem 0;
background: linear-gradient(135deg, rgba(255, 107, 0, 0.05) 0%, rgba(255, 107, 0, 0.1) 100%);
}
.cta-content {
text-align: center;
max-width: 700px;
margin: 0 auto;
}
.cta-content h2 {
font-size: 2.5rem;
font-weight: 700;
margin-bottom: 1rem;
color: var(--color-text-primary);
}
.cta-content p {
font-size: 1.125rem;
color: var(--color-text-secondary);
margin-bottom: 2rem;
line-height: 1.6;
}
.cta-buttons {
display: flex;
gap: 1rem;
justify-content: center;
}
/* Contact Page */
.contact-info-section {
padding: 4rem 0 2rem;
background: var(--color-gray-50);
}
.contact-info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 2rem;
}
.contact-info-card {
background: white;
padding: 2rem;
border-radius: 16px;
text-align: center;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.contact-info-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.contact-info-icon {
width: 60px;
height: 60px;
margin: 0 auto 1rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 107, 0, 0.1);
border-radius: 50%;
color: var(--color-primary);
font-size: 1.5rem;
}
.contact-info-card h3 {
font-size: 1.125rem;
font-weight: 600;
margin-bottom: 0.75rem;
color: var(--color-text-primary);
}
.contact-info-card p {
color: var(--color-text-secondary);
line-height: 1.6;
}
.contact-info-card a {
color: var(--color-text-secondary);
text-decoration: none;
transition: color 0.2s ease;
}
.contact-info-card a:hover {
color: var(--color-primary);
}
.contact-form-section {
padding: 4rem 0;
}
.contact-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 3rem;
}
.contact-form-wrapper h2 {
font-size: 2rem;
font-weight: 700;
margin-bottom: 2rem;
color: var(--color-text-primary);
}
.contact-form {
background: white;
padding: 2.5rem;
border-radius: 16px;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}
.contact-map {
border-radius: 16px;
overflow: hidden;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
height: 600px;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.page-header {
padding: 3rem 0 2rem;
}
.page-title {
font-size: 1.75rem;
}
.page-subtitle {
font-size: 1rem;
}
.branches-grid,
.campaigns-grid {
grid-template-columns: 1fr;
}
.branch-actions {
flex-direction: column;
}
.branch-actions .btn {
width: 100%;
}
.franchise-hero {
padding: 3rem 0;
}
.franchise-hero-title {
font-size: 2rem;
}
.franchise-hero-subtitle {
font-size: 1rem;
}
.franchise-hero-actions {
flex-direction: column;
}
.franchise-hero-actions .btn {
width: 100%;
}
.stats-grid,
.why-grid,
.investment-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.franchise-form {
padding: 1.5rem;
}
/* About Page Mobile */
.about-hero {
padding: 4rem 0 3rem;
}
.hero-background-icon {
font-size: 15rem;
}
.hero-icon-wrapper {
width: 80px;
height: 80px;
margin-bottom: 1.5rem;
}
.hero-icon-wrapper i {
font-size: 2.5rem;
}
.about-hero-title {
font-size: 2rem;
}
.about-hero-subtitle {
font-size: 1rem;
}
.page-header {
padding: 3rem 0 2.5rem;
}
.page-header-background-icon {
font-size: 12rem;
}
.page-header-icon-wrapper {
width: 70px;
height: 70px;
margin-bottom: 1rem;
}
.page-header-icon-wrapper i {
font-size: 2rem;
}
.franchise-hero {
padding: 4rem 0 3rem;
}
.franchise-hero-title {
font-size: 2rem;
}
.franchise-hero-subtitle {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.story-grid {
grid-template-columns: 1fr;
gap: 2rem;
}
.story-stats {
grid-template-columns: repeat(2, 1fr);
}
.stat-number {
font-size: 2rem;
}
.values-grid,
.team-grid {
grid-template-columns: 1fr;
}
.cta-content h2 {
font-size: 1.75rem;
}
.cta-buttons {
flex-direction: column;
}
.cta-buttons .btn {
width: 100%;
}
/* Contact Page Mobile */
.contact-info-grid {
grid-template-columns: 1fr;
}
.contact-grid {
grid-template-columns: 1fr;
}
.contact-form {
padding: 1.5rem;
}
.contact-map {
height: 400px;
}
}
/* ========== NUTRITION TOOLTIP ========== */
.nutrition-tooltip-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: none;
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s ease;
padding: 1rem;
pointer-events: none;
}
.nutrition-tooltip-overlay.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.nutrition-tooltip {
background: #2c2c2e;
border-radius: 16px;
padding: 1.5rem;
max-width: 400px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
position: relative;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
}
.nutrition-tooltip-overlay.active .nutrition-tooltip {
transform: translateY(0);
}
.nutrition-tooltip-close {
position: absolute;
top: 1rem;
right: 1rem;
background: rgba(255, 255, 255, 0.1);
border: none;
color: rgba(255, 255, 255, 0.7);
width: 32px;
height: 32px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
}
.nutrition-tooltip-close:hover {
background: rgba(255, 255, 255, 0.2);
color: white;
}
.nutrition-tooltip-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.nutrition-item {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nutrition-item-title {
font-size: 1.25rem;
font-weight: 700;
color: white;
margin: 0;
line-height: 1.2;
}
.nutrition-item-subtitle {
font-size: 0.875rem;
color: rgba(255, 255, 255, 0.6);
margin: 0;
line-height: 1.4;
}
.nutrition-values {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.nutrition-value-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.nutrition-value-row:last-child {
border-bottom: none;
}
.nutrition-label {
font-size: 0.9375rem;
color: rgba(255, 255, 255, 0.9);
font-weight: 400;
}
.nutrition-value {
font-size: 0.9375rem;
color: white;
font-weight: 500;
}
@media (max-width: 768px) {
.nutrition-tooltip {
padding: 1.25rem;
max-width: 100%;
border-radius: 12px;
}
.nutrition-tooltip-close {
top: 0.75rem;
right: 0.75rem;
width: 28px;
height: 28px;
}
.nutrition-item-title {
font-size: 1.125rem;
}
.nutrition-item-subtitle {
font-size: 0.8125rem;
}
.nutrition-label,
.nutrition-value {
font-size: 0.875rem;
}
}
/* Branch & Order Type Selection Modals */
.selection-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.55);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s ease;
z-index: 10000000;
padding: 1rem;
}
.selection-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.selection-modal {
width: 100%;
max-width: 520px;
background: #fff;
border-radius: 20px;
padding: 1.5rem;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
transform: translateY(100%);
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
}
.selection-modal-overlay.active .selection-modal {
transform: translateY(0);
}
/* Masa Seçim Modalı - Mobilde Full Ekran */
@media (max-width: 768px) {
#tableSelectModal.selection-modal-overlay {
padding: 0;
align-items: flex-end;
}
#tableSelectModal .selection-modal {
width: 100%;
max-width: 100%;
border-radius: 20px 20px 0 0;
padding: 1.5rem;
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
#tableSelectModal.selection-modal-overlay.active .selection-modal {
transform: translateY(0);
}
}
.selection-modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 36px;
height: 36px;
background: rgba(255, 255, 255, 0.9);
border: 1px solid #e5e7eb;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
}
.selection-modal-close:hover {
background: #f3f4f6;
transform: scale(1.1);
}
.selection-modal-close i {
color: #6b7280;
font-size: 1rem;
}
.selection-modal-header h2 {
margin: 0 0 0.35rem;
font-size: 1.35rem;
font-weight: 700;
color: #1f2937;
}
.selection-modal-header p {
margin: 0;
color: #6b7280;
font-size: 0.95rem;
}
.selection-modal-body {
margin-top: 1.25rem;
}
.selection-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.selection-table-list {
max-height: 50vh;
overflow-y: auto;
padding-right: 0.25rem;
}
.selection-table-list button:first-child {
margin-top: 0.5rem;
}
.selection-search-input {
width: 100%;
padding: 0.7rem 0.9rem;
border-radius: 12px;
border: 1px solid #e5e7eb;
font-size: 0.95rem;
margin-bottom: 0.75rem;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.selection-search-wrapper {
position: relative;
margin-bottom: 0.75rem;
}
.selection-search-row {
display: flex;
align-items: center;
gap: 0.5rem;
margin-bottom: 0.75rem;
}
.selection-search-row .selection-search-wrapper {
flex: 0 0 45%;
margin-bottom: 0;
min-width: 0;
}
.selection-search-divider {
flex: 0 0 10%;
text-align: center;
font-size: 0.85rem;
color: #6b7280;
}
.selection-qr-btn {
flex: 0 0 40%;
white-space: nowrap;
padding: 0.7rem 0.9rem;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: #fff;
color: #111827;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
}
.selection-qr-btn:hover {
border-color: var(--color-primary);
background: rgba(255, 107, 0, 0.08);
}
.qr-scan-modal .selection-modal-body {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.qr-scan-reader {
width: 100%;
max-width: 400px;
margin: 0 auto;
border-radius: 16px;
overflow: hidden;
background: #111827;
aspect-ratio: 1 / 1;
max-height: 350px;
display: flex;
align-items: center;
justify-content: center;
}
.qr-scan-reader video {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 16px;
}
.qr-scan-reader canvas {
display: none !important;
}
.qr-scan-status {
text-align: center;
font-size: 0.9rem;
color: #6b7280;
}
.selection-search-wrapper .selection-search-input {
padding-right: 2.2rem;
margin-bottom: 0;
}
.selection-search-clear {
position: absolute;
right: 0.6rem;
top: 50%;
transform: translateY(-50%);
border: none;
background: transparent;
color: #9ca3af;
cursor: pointer;
display: none;
}
.selection-search-clear.visible {
display: inline-flex;
}
.selection-search-input:focus {
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.12);
}
.selection-table-list::-webkit-scrollbar {
width: 6px;
}
.selection-table-list::-webkit-scrollbar-thumb {
background: #e5e7eb;
border-radius: 999px;
}
.selection-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.85rem 1rem;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: #fafafa;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
}
.selection-item:hover {
border-color: var(--color-primary);
background: rgba(255, 107, 0, 0.08);
}
.selection-item.disabled {
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
.selection-item-status {
font-size: 0.75rem;
padding: 0.2rem 0.5rem;
border-radius: 999px;
background: #f3f4f6;
color: #6b7280;
white-space: nowrap;
}
.selection-item-status.available {
background: rgba(16, 185, 129, 0.15);
color: #047857;
}
.selection-item-status.occupied {
background: rgba(239, 68, 68, 0.15);
color: #b91c1c;
}
.selection-item-status.reserved {
background: rgba(245, 158, 11, 0.2);
color: #b45309;
}
.selection-list-loading {
padding: 0.75rem 0.9rem;
border-radius: 12px;
border: 1px dashed #e5e7eb;
color: #6b7280;
text-align: center;
}
.selection-item-title {
font-weight: 600;
color: #111827;
}
.selection-item-subtitle {
font-size: 0.85rem;
color: #6b7280;
margin-top: 0.2rem;
}
.selection-item-badge {
font-size: 0.75rem;
background: #f3f4f6;
color: #6b7280;
padding: 0.25rem 0.5rem;
border-radius: 999px;
white-space: nowrap;
}
.selection-item.selected {
border-color: #16a34a;
background: rgba(22, 163, 74, 0.08);
order: -1;
}
.selection-item.selected .selection-item-badge {
background: #16a34a;
color: #fff;
}
.selection-item.selected .selection-item-badge i {
margin-right: 0.25rem;
}
/* Sipariş Tipi Seçim Öğeleri */
.order-type-item {
padding: 1rem;
}
.order-type-item-content {
display: flex;
align-items: flex-start;
gap: 1rem;
flex: 1;
}
.order-type-icon {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: all 0.2s ease;
}
.order-type-icon i {
font-size: 1.25rem;
}
.order-type-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.order-type-item:hover {
border-color: var(--order-type-color, var(--color-primary));
background: var(--order-type-bg, rgba(255, 107, 0, 0.08));
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.order-type-item:hover .order-type-icon {
transform: scale(1.05);
}
.order-type-item .selection-item-title {
font-size: 1rem;
font-weight: 700;
margin: 0;
line-height: 1.2;
}
.order-type-item.selected {
border-color: var(--order-type-color, var(--color-primary));
background: var(--order-type-bg, rgba(255, 107, 0, 0.08));
order: 0 !important;
/* Sipariş tiplerinde sıralama değişmesin - genel .selection-item.selected kuralını override et */
}
.order-type-item.selected .selection-item-badge {
background: var(--order-type-color, var(--color-primary));
color: #fff;
}
.order-type-item .selection-item-subtitle {
font-size: 0.875rem;
line-height: 1.4;
}
/* Masa Seçim Öğeleri */
.table-item {
padding: 0.5rem;
}
.table-item-content {
display: flex;
align-items: flex-start;
gap: 1rem;
flex: 1;
}
.table-item-icon {
width: 48px;
height: 48px;
min-width: 48px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: rgba(255, 107, 0, 0.1);
color: var(--color-primary);
transition: all 0.2s ease;
}
.table-item-icon i {
font-size: 1.25rem;
}
.table-item-text {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0rem;
}
.table-item:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.table-item:hover .table-item-icon {
transform: scale(1.05);
background: rgba(255, 107, 0, 0.15);
}
.table-item.selected {
border-color: #16a34a;
background: #e5ebe869;
margin-top: 0.3rem;
}
.table-item.selected .table-item-icon {
background: #16a34a;
color: #fff;
}
.table-item.selected .selection-item-badge {
background: #16a34a;
color: #fff;
}
.table-item.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.table-item.disabled:hover {
transform: none;
box-shadow: none;
}
.selection-back-btn {
width: 100%;
margin-top: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: #fff;
color: #6b7280;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.selection-back-btn i {
font-size: 0.85rem;
transition: transform 0.2s ease;
}
.selection-back-btn:hover {
border-color: #d1d5db;
background: #f9fafb;
color: #374151;
}
.selection-back-btn:hover i {
transform: translateX(-2px);
}
.selection-current {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.75rem 0.29rem;
border-radius: 12px;
border: 1px dashed #e5e7eb;
background: #fffaf3;
color: green;
font-size: 0.79rem;
margin-bottom: 0.75rem;
}
.selection-current.hidden {
display: none;
}
.selection-current-btn {
border: none;
background: transparent;
color: var(--color-primary);
font-weight: 600;
cursor: pointer;
}
.selection-status-btn {
position: fixed;
left: 1rem;
bottom: 1rem;
z-index: 99999;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.9rem;
border-radius: 999px;
border: none;
background: #111827;
color: #fff;
font-weight: 600;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.selection-status-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
}
.selection-status-btn .selection-status-text {
font-size: 0.9rem;
}
/* Call Waiter Button */
.call-waiter-btn {
position: fixed;
right: 1rem;
bottom: 1rem;
z-index: 99999;
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.65rem 0.9rem;
border-radius: 999px;
border: none;
background: #0d6efd;
color: #fff;
font-weight: 600;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.18);
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* Call Waiter Reason Modal */
.call-waiter-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
padding: 1rem;
}
.call-waiter-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.call-waiter-modal {
background: #fff;
border-radius: 20px;
max-width: 420px;
width: 100%;
padding: 1.5rem;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
transform: scale(0.95);
transition: transform 0.2s ease;
}
.call-waiter-modal-overlay.active .call-waiter-modal {
transform: scale(1);
}
.call-waiter-modal-title {
font-size: 1.125rem;
font-weight: 600;
color: #111827;
margin: 0 0 1.25rem 0;
text-align: center;
line-height: 1.5;
}
.call-waiter-reasons {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.call-waiter-reason-btn {
width: 100%;
padding: 0.875rem 1rem;
border: 1.5px solid #e5e7eb;
border-radius: 12px;
background: #fff;
color: #111827;
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
text-align: left;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.call-waiter-reason-btn:hover {
border-color: #28a745;
background: #ecfdf5;
}
.call-waiter-reason-btn.selected {
border-color: #28a745;
background: linear-gradient(135deg, #28a745, #059669);
color: #fff;
}
.call-waiter-reason-btn i {
font-size: 0.95rem;
}
.call-waiter-modal-actions {
display: flex;
gap: 0.75rem;
}
/* ========== ORDER PAGE ========== */
.order-page {
padding: 1.5rem 0 6rem;
}
/* ========== GEL-AL (TAKEAWAY) PICKUP LAYOUT ========== */
.order-type-takeaway .order-flow-card[data-step="pickup"] {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
}
.pickup-layout-root {
background: #ffffff;
margin: 0;
padding: 0.05rem 0.3rem 1.25rem;
width: 100%;
box-sizing: border-box;
}
.pickup-phone {
max-width: 100%;
width: 100%;
margin: 0;
padding: 0;
box-sizing: border-box;
}
.pickup-section-title {
font-size: 14px;
font-weight: 700;
margin: 10px 2px 8px;
color: #111827;
}
.pickup-tile {
background: #f3f3f7;
border-radius: 14px;
padding: 10px 10px;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
width: 100%;
margin-bottom: 1rem;
}
.pickup-tile-left {
min-width: 0;
}
.pickup-tile-title {
font-size: 14px;
font-weight: 700;
margin: 0 0 4px 0;
color: #111827;
}
.pickup-tile-sub {
font-size: 12.5px;
margin: 0;
color: #6b7280;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 320px;
}
.pickup-tile-chevron {
flex: 0 0 auto;
width: 22px;
height: 22px;
margin-top: 2px;
color: #111827;
opacity: 0.8;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pickup-time-row {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: nowrap;
overflow-x: auto;
padding-bottom: 1rem;
}
.pickup-chip {
flex: 0 0 auto;
background: #f3f3f7;
border-radius: 12px;
padding: 10px 5px;
font-weight: 700;
font-size: 13px;
line-height: 1;
border: 2px solid transparent;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
color: #111827;
min-width: 50px !important;
text-align: center;
}
.pickup-chip-wide {
min-width: 80px;
}
.pickup-chip-active {
border-color: #ff6a00;
color: #111827;
}
.pickup-list-card {
background: #ffffff;
border-radius: 14px;
padding: 12px 14px;
box-shadow: 0 1px 0 rgba(17, 24, 39, 0.04);
margin-top: 14px;
}
.pickup-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 0;
}
.pickup-row+.pickup-row {
border-top: 1px solid #e5e7eb;
}
.pickup-row-left {
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
color: #111827;
font-size: 13.5px;
font-weight: 700;
}
.pickup-row-left small {
font-size: 12.5px;
font-weight: 700;
color: #111827;
}
.pickup-row-right {
display: flex;
align-items: baseline;
gap: 8px;
font-weight: 800;
color: #111827;
font-size: 13.5px;
flex: 0 0 auto;
}
.pickup-row-muted {
color: #6b7280;
font-weight: 700;
font-size: 12.5px;
}
.pickup-row-info {
width: 16px;
height: 16px;
flex: 0 0 auto;
color: #9ca3af;
}
.pickup-total-row {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 900;
font-size: 14px;
margin-top: 10px;
padding: 10px 2px 0;
}
.pickup-total-label {
font-size: 13.5px;
color: #111827;
font-weight: 800;
}
.pickup-total-amount {
font-size: 15px;
}
/* ========== DELIVERY ADDRESS ACTION BUTTONS (ORDER PAGE) ========== */
.pickup-payment-option-actions {
display: flex;
align-items: center;
gap: 6px;
}
.delivery-addr-btn {
border: none;
background: transparent;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 6px;
font-size: 11px;
line-height: 1;
cursor: pointer;
color: #6b7280;
}
.delivery-addr-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 12px;
}
.delivery-addr-btn--edit {
color: #4b5563;
}
.delivery-addr-btn--delete {
color: #ef4444;
}
.delivery-addr-primary-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 14px;
border-radius: 999px;
border: none;
cursor: pointer;
background: var(--color-primary, #ff6a00);
color: #ffffff;
font-weight: 700;
font-size: 13px;
width: 100%;
}
.delivery-addr-primary-btn__icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 13px;
}
/* Slide-in animasyon sadece sipariş sayfasındaki teslimat adres modalları için */
@keyframes deliveryModalSlideIn {
from {
transform: translateX(40px);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
#deliveryAddressModal .order-addr-modal__box,
#deliveryAddrFormModal .order-addr-modal__box {
animation: deliveryModalSlideIn .25s ease;
}
/* Delivery address modals (order page specific, no clash with profile) */
.order-addr-modal--full {
position: fixed;
inset: 0;
background: #fff;
z-index: 999999;
display: none;
}
.order-addr-modal--full.active {
display: block;
}
.order-addr-modal--full .order-addr-modal__box {
height: 100%;
display: flex;
flex-direction: column;
}
/* deliveryAddressModal: mobilde tam ekran, desktopta sağdan panel */
@media (min-width: 768px) {
#deliveryAddressModal.order-addr-modal--full {
background: rgba(0, 0, 0, 0.4);
}
#deliveryAddressModal .order-addr-modal__box {
width: 100%;
max-width: 480px;
height: 100%;
margin-left: auto;
background: #fff;
border-radius: 16px 0 0 16px;
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12);
}
}
/* deliveryAddrFormModal: mobilde tam ekran, desktopta sağdan panel */
@media (min-width: 768px) {
#deliveryAddrFormModal.order-addr-modal--full {
background: rgba(0, 0, 0, 0.4);
}
#deliveryAddrFormModal .order-addr-modal__box {
width: 100%;
max-width: 480px;
height: 100%;
margin-left: auto;
background: #fff;
border-radius: 16px 0 0 16px;
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12);
}
}
.order-addr-modal__head {
padding: 14px 16px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 0 auto;
}
.order-addr-modal__head h4 {
margin: 0;
font-size: 17px;
font-weight: 800;
}
.order-addr-modal__close {
font-size: 24px;
background: none;
border: none;
cursor: pointer;
}
.order-addr-modal__body {
padding: 16px;
overflow-y: auto;
flex: 1;
}
/* Delivery address form - two-column layout (her yerde 2 kolon) */
.order-addr-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.order-addr-form__group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.order-addr-form__group label {
font-size: 13px;
font-weight: 700;
color: #475569;
}
.order-addr-form__group label span {
color: #ef4444;
}
.order-addr-form__group input,
.order-addr-form__group select,
.order-addr-form__group textarea {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
background: #fff;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.order-addr-form__group textarea {
resize: none;
}
.order-addr-form__actions {
display: flex;
gap: 10px;
margin-top: 16px;
}
.order-addr-btn {
flex: 1;
padding: 12px;
border-radius: 30px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: none;
}
.order-addr-btn--primary {
background: #0ea5e9;
color: #fff;
}
.order-addr-btn--ghost {
background: #f1f5f9;
color: #0f172a;
}
.pickup-cta-btn {
margin-top: 12px;
background: #ff6a00;
color: #ffffff;
border: none;
width: 100%;
border-radius: 18px;
padding: 16px 18px;
font-weight: 900;
font-size: 15px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
box-shadow: 0 10px 22px rgba(255, 106, 0, 0.22);
}
.pickup-cta-btn:active {
transform: translateY(1px);
}
.pickup-cta-chevron {
width: 18px;
height: 18px;
opacity: 0.95;
}
/* Pickup saat seçim modali */
.pickup-time-modal-overlay,
.pickup-payment-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: stretch;
justify-content: flex-end;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
padding: 0;
z-index: 999999;
box-sizing: border-box;
}
.pickup-time-modal-overlay.active,
.pickup-payment-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.pickup-time-modal,
.pickup-payment-modal {
background: #ffffff;
border-radius: 16px 0px 0px;
max-width: 480px;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
transform: translateX(100%);
transition: transform 0.25s ease-out;
}
.pickup-time-modal-overlay.active .pickup-time-modal,
.pickup-payment-modal-overlay.active .pickup-payment-modal {
transform: translateX(0);
}
.pickup-time-modal-header,
.pickup-payment-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.85rem 1rem;
border-bottom: 1px solid #e5e7eb;
}
.pickup-time-modal-header h2,
.pickup-payment-modal-header h2 {
font-size: 1rem;
margin: 0;
font-weight: 700;
color: #111827;
}
.pickup-time-modal-close,
.pickup-payment-modal-close {
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
padding: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.pickup-time-modal-body {
padding: 0.5rem 1rem 1rem;
overflow-y: auto;
}
.pickup-time-list {
display: grid;
gap: 0.25rem;
}
.pickup-time-rowline {
display: flex;
flex-wrap: nowrap;
gap: 0.4rem;
}
.pickup-summary {
margin-top: 2rem;
;
}
.pickup-time-option {
width: auto;
flex: 1 1 0;
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 0.5rem 0.15rem;
text-align: center;
background: #ffffff;
cursor: pointer;
font-size: 0.8rem;
font-weight: 600;
color: #111827;
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 0.4rem;
}
.pickup-time-option:hover {
border-color: var(--color-primary);
background: #f9fafb;
}
.pickup-time-option-active {
border-color: #ff6a00;
background: rgba(255, 106, 0, 0.06);
}
.pickup-payment-modal-body {
padding: 0.5rem 1rem 1rem;
overflow-y: auto;
}
.pickup-payment-list {
display: grid;
gap: 0.5rem;
}
.pickup-payment-option {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.6rem 0.75rem;
border-radius: 10px;
border: 2px solid #e5e7eb;
background: #ffffff;
cursor: pointer;
font-size: 0.8rem;
}
.pickup-payment-option-left {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: #6c757d;
}
.pickup-payment-option input[type="radio"] {
accent-color: #0d6efd;
}
.pickup-payment-option-active {
border-color: #16a34a;
background: #e0fbea;
}
/* Online Ödeme Modali */
.online-payment-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: flex-end;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
padding: 0;
z-index: 999999;
box-sizing: border-box;
}
.online-payment-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.online-payment-modal {
background: #ffffff;
border-radius: 0;
width: 100%;
height: 100vh;
max-height: 100vh;
display: flex;
flex-direction: column;
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.18);
transform: translateY(100%);
transition: transform 0.3s ease-out;
}
.online-payment-modal-overlay.active .online-payment-modal {
transform: translateY(0);
}
/* onlinePaymentModal: desktopta sağdan panel, mobilde tam ekran */
@media (min-width: 768px) {
.online-payment-modal-overlay {
align-items: stretch;
justify-content: flex-end;
}
.online-payment-modal {
width: 100%;
max-width: 480px;
height: 100%;
border-radius: 16px 0 0 16px;
box-shadow: 0 6px 18px rgba(17, 24, 39, 0.12);
transform: translateX(100%);
}
.online-payment-modal-overlay.active .online-payment-modal {
transform: translateX(0);
}
}
.online-payment-modal-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.25rem;
border-bottom: 1px solid #e5e7eb;
}
.online-payment-modal-header h2 {
font-size: 1.125rem;
margin: 0;
font-weight: 700;
color: #111827;
}
.online-payment-modal-close {
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
padding: 0.25rem;
display: inline-flex;
align-items: center;
justify-content: center;
}
.online-payment-modal-body {
overflow-y: auto;
flex: 1;
display: flex;
flex-direction: column;
}
.online-payment-form {
display: grid;
gap: 1rem;
}
.online-payment-frame {
display: flex;
flex-direction: column;
gap: 0.75rem;
min-height: 240px;
flex: 1;
position: relative;
}
/* Yükleme: modal içinde üstten-alttan ortala, modern görünüm */
.online-payment-loading {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
background: linear-gradient(180deg, #fafbfc 0%, #f1f5f9 100%);
border-radius: 12px;
margin: 1rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.online-payment-loading::before {
content: "";
position: absolute;
inset: 0;
border-radius: 12px;
padding: 1px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(226, 232, 240, 0.6) 100%);
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
pointer-events: none;
}
.online-payment-loading .payment-loading-inner {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1rem;
text-align: center;
padding: 1.5rem;
}
.online-payment-loading .payment-loading-spinner {
width: 48px;
height: 48px;
border: 3px solid #e2e8f0;
border-top-color: var(--color-primary, #f97316);
border-radius: 50%;
animation: online-payment-spin 0.85s linear infinite;
}
.online-payment-loading .payment-loading-text {
font-size: 0.9375rem;
font-weight: 500;
color: #475569;
letter-spacing: 0.01em;
}
.online-payment-loading .payment-loading-sub {
font-size: 0.8125rem;
color: #94a3b8;
margin-top: -0.25rem;
}
@keyframes online-payment-spin {
to {
transform: rotate(360deg);
}
}
.online-payment-iframe-wrap {
flex: 1;
border: 1px solid #e5e7eb;
border-radius: 10px;
overflow: hidden;
background: #f9fafb;
min-height: 360px;
}
.online-payment-iframe-wrap iframe {
width: 100%;
height: 100%;
border: none;
display: block;
}
.order-form-group-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.online-payment-error {
padding: 1rem 1.25rem;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 10px;
color: #991b1b;
font-size: 0.875rem;
text-align: center;
margin: 1rem;
}
.online-payment-error .online-payment-error-msg {
margin: 0 0 0.5rem;
font-weight: 500;
}
.online-payment-error .online-payment-error-hint {
margin: 0 0 1rem;
color: #b91c1c;
font-size: 0.8125rem;
}
.online-payment-error .online-payment-refresh-btn {
display: inline-block;
padding: 0.5rem 1.25rem;
background: var(--color-primary, #f97316);
color: #fff;
border: none;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease;
}
.online-payment-error .online-payment-refresh-btn:hover {
background: var(--color-primary-dark, #ea580c);
}
.online-payment-submit-btn {
width: 100%;
background: var(--color-primary);
color: #ffffff;
border: none;
border-radius: 12px;
padding: 1rem;
font-weight: 700;
font-size: 1rem;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
cursor: pointer;
margin-top: 0.5rem;
transition: background 0.2s ease;
}
.online-payment-submit-btn:hover {
background: var(--color-primary-dark, #e55a00);
}
.online-payment-submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.online-payment-submit-btn.is-loading {
opacity: 0.8;
}
.online-payment-submit-btn.is-loading span,
.online-payment-submit-btn.is-loading i {
opacity: 0;
}
.online-payment-submit-btn i.spinner-icon {
position: absolute;
animation: order-back-spinner 0.8s linear infinite;
}
.order-header {
text-align: center;
margin-bottom: 1rem;
}
.order-header h1 {
font-size: 1.5rem;
font-weight: 700;
margin: 0 0 0.35rem;
}
.order-header p {
color: #6b7280;
margin: 0;
font-size: 0.95rem;
}
.order-type-switch {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
justify-content: center;
margin: 1rem 0 1.25rem;
}
.order-type-btn {
flex: 1 1 120px;
border: 1.5px solid #e5e7eb;
background: #fff;
border-radius: 12px;
padding: 0.65rem 1rem;
font-weight: 600;
color: #111827;
cursor: pointer;
transition: all 0.2s ease;
}
.order-type-btn.active {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
box-shadow: 0 10px 18px rgba(0, 0, 0, 0.12);
}
.order-steps-wrapper {
display: flex;
align-items: center;
justify-content: center;
margin: 2.75rem 0 1.5rem;
}
.order-menu-back-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #fff;
border: 1px solid #e5e7eb;
color: #6b7280;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.order-menu-back-btn:hover {
background: #f9fafb;
border-color: var(--color-primary);
color: var(--color-primary);
}
.order-menu-back-btn i {
font-size: 0.75rem;
}
.order-steps {
display: flex;
justify-content: center;
gap: 0.75rem;
flex-wrap: wrap;
flex: 1;
min-width: 0;
}
.order-step {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #f3f4f6;
color: #6b7280;
font-size: 0.85rem;
font-weight: 600;
}
.order-step.active {
background: rgba(var(--color-primary-rgb, 255, 107, 0), 0.12);
color: var(--color-primary);
}
.order-step-index {
width: 22px;
height: 22px;
border-radius: 50%;
background: #e5e7eb;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 700;
}
.order-step.active .order-step-index {
background: var(--color-primary);
color: #fff;
}
/* Modern stepper */
.order-stepper {
position: relative;
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 2rem;
width: 100%;
max-width: 520px;
margin: 0 auto;
}
.order-stepper::before {
content: "";
position: absolute;
top: 20px;
left: 20%;
right: 20%;
height: 3px;
background: #e5e7eb;
z-index: 0;
}
.order-stepper-item {
position: relative;
z-index: 1;
flex: 1;
text-align: center;
}
.order-stepper-circle {
width: 36px;
height: 36px;
border-radius: 50%;
border: 2px solid #d1d5db;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto 0.5rem;
color: #9ca3af;
font-weight: 700;
font-size: 0.9rem;
}
.order-stepper-label {
font-size: 0.85rem;
font-weight: 600;
color: #6b7280;
}
.order-stepper-item.is-active .order-stepper-circle {
border-color: var(--color-primary);
background: var(--color-primary);
color: #ffffff;
box-shadow: 0 0 0 4px rgba(255, 106, 0, 0.18);
}
.order-stepper-item.is-completed .order-stepper-circle {
border-color: #16a34a;
background: #16a34a;
color: #ffffff;
}
.order-stepper-item.is-active .order-stepper-label,
.order-stepper-item.is-completed .order-stepper-label {
color: #111827;
}
.order-content {
display: grid;
gap: 1rem;
}
.order-flow-card {
background: #fff;
padding: 0rem;
}
.order-cart-section {
background: transparent;
border: none;
padding: 0;
box-shadow: none;
min-height: calc(100vh - 320px);
display: flex;
flex-direction: column;
}
.order-card-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.order-card-header h2 {
font-size: 1.15rem;
margin: 0;
font-weight: 700;
}
/* Delivery login gate */
.order-login-gate {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
padding: 2.5rem 1.5rem;
border-radius: 18px;
background: #ffffff;
margin: 1.5rem auto 2rem;
max-width: 420px;
}
.order-login-gate__icon {
width: 72px;
height: 72px;
border-radius: 999px;
background: rgba(255, 107, 0, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary, var(--color-primary));
font-size: 1.9rem;
margin: 0 auto 1.25rem;
}
.order-login-gate__title {
font-size: 1.25rem;
font-weight: 700;
margin-bottom: 0.5rem;
color: var(--color-text-primary, #0f172a);
}
.order-login-gate__desc {
font-size: 0.95rem;
color: var(--color-text-secondary, #6b7280);
margin-bottom: 1.5rem;
max-width: 320px;
}
.order-login-gate__btn {
max-width: 220px;
width: 100%;
background: var(--color-primary, var(--color-primary)) !important;
color: #ffffff !important;
border-radius: 999px;
padding-inline: 2rem;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.order-login-gate__btn:hover {
background: var(--color-primary-dark, #ff8c00);
}
.order-card-subtitle {
font-size: 0.85rem;
color: #6b7280;
}
.order-menu-back-btn.is-loading {
cursor: default;
opacity: 0.8;
}
.order-menu-back-btn.is-loading span {
opacity: 0;
}
.order-menu-back-btn i.spinner-icon {
animation: order-back-spinner 0.8s linear infinite;
}
@keyframes order-back-spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.order-cart-scroll {
max-height: none;
overflow-y: auto;
padding-right: 0.25rem;
flex: 1;
display: grid;
gap: 0.75rem;
}
.order-cart-scroll .new-cart-item {
margin-bottom: 0;
}
.order-summary-card {
margin-top: 1rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 0.85rem 1rem;
display: grid;
gap: 0.6rem;
}
.order-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
gap: 0.75rem;
font-size: 0.95rem;
color: #111827;
}
.order-summary-row.total {
font-weight: 700;
}
.order-summary-row.total span {
color: #16a34a;
}
.order-summary-row.total strong {
font-size: 1.05rem;
color: #16a34a;
}
.order-summary-promo {
color: #16a34a;
font-weight: 600;
}
.order-summary-promo-actions {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: #16a34a;
font-weight: 700;
}
.order-promo-remove {
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
font-size: 0.9rem;
padding: 0;
}
.order-cart-scroll::-webkit-scrollbar {
width: 6px;
}
.order-cart-scroll::-webkit-scrollbar-thumb {
background: #e5e7eb;
border-radius: 999px;
}
.order-inline-form {
margin-top: 1rem;
display: grid;
gap: 0.5rem;
}
.order-inline-form label {
font-weight: 600;
font-size: 0.9rem;
}
.order-input {
width: 100%;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 0.65rem 0.8rem;
font-size: 0.95rem;
background: #fff;
}
.order-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 255, 107, 0), 0.15);
}
.order-hint {
color: #6b7280;
font-size: 0.85rem;
}
.order-form-grid {
display: grid;
gap: 0.85rem;
}
.order-form-group {
display: grid;
gap: 0.35rem;
}
.order-form-group.full {
grid-column: 1 / -1;
}
.order-form-group label {
font-weight: 600;
font-size: 0.9rem;
}
.order-summary {
display: grid;
gap: 0.5rem;
}
.order-summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.95rem;
}
.order-summary-row strong {
font-weight: 700;
}
.order-summary-row.discount {
color: #16a34a;
}
.order-fixed-bar {
position: fixed;
bottom: 0;
left: 0;
right: 0;
background: #fff;
border-top: 1px solid #e5e7eb;
padding: 0.75rem 1rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
z-index: 9999;
}
.order-fixed-bar.confirmation {
justify-content: center;
}
.order-fixed-bar.confirmation .order-fixed-total {
display: none;
}
.order-fixed-bar.confirmation .order-fixed-btn {
position: relative;
width: 100%;
min-height: 48px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
}
.order-fixed-bar.confirmation .order-fixed-btn i {
position: absolute;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
}
.order-fixed-bar.confirmation .order-fixed-btn span {
position: absolute;
left: 0;
right: 0;
text-align: center;
}
.order-fixed-total {
display: flex;
align-items: center;
justify-content: center;
flex: 1;
gap: 0.5rem;
font-size: 0.95rem;
}
.order-fixed-total strong {
font-size: 1.525rem;
font-weight: 700;
color: #16a34a;
}
.order-fixed-btn {
border: none;
border-radius: 30px;
background: var(--color-primary);
color: #fff;
padding: 0.75rem 1.25rem;
font-weight: 700;
min-width: 150px;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.order-fixed-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
box-shadow: none;
}
.order-fixed-menu-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.35rem 0.75rem;
border-radius: 999px;
background: #fff;
border: 1px solid #e5e7eb;
color: #6b7280;
font-size: 0.85rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
}
.order-fixed-menu-btn:hover {
background: #f9fafb;
border-color: var(--color-primary);
color: var(--color-primary);
}
.order-fixed-menu-btn i {
font-size: 0.75rem;
}
.order-fixed-menu-btn.is-loading {
cursor: default;
opacity: 0.8;
}
.order-fixed-menu-btn.is-loading span {
opacity: 0;
}
.order-fixed-menu-btn i.spinner-icon {
animation: order-back-spinner 0.8s linear infinite;
}
.order-type-layout {
display: none;
}
.order-type-layout.is-active {
display: block;
}
.order-step-panel {
display: none;
}
.order-step-panel.active {
display: block;
}
.order-phone-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
padding: 1rem;
z-index: 999999;
box-sizing: border-box;
overflow: hidden;
}
.order-phone-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.order-phone-modal {
background: #fff;
border-radius: 18px;
width: 100%;
max-width: 420px;
padding: 1.5rem;
position: relative;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
box-sizing: border-box;
}
.order-phone-close {
position: absolute;
right: 1rem;
top: 1rem;
border: none;
background: transparent;
font-size: 1.1rem;
color: #6b7280;
cursor: pointer;
padding: 0.25rem;
transition: color 0.2s ease;
}
.order-phone-close:hover {
color: #111827;
}
.order-phone-header {
text-align: center;
margin-bottom: 1.5rem;
}
.order-phone-header h2 {
margin: 0 0 0.35rem;
font-size: 1.2rem;
font-weight: 700;
color: #111827;
}
.order-phone-header p {
margin: 0;
font-size: 0.9rem;
color: #6b7280;
}
.order-phone-body {
display: grid;
gap: 1rem;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
.order-phone-form-group {
display: grid;
gap: 0.5rem;
}
.order-phone-form-group label {
font-weight: 600;
font-size: 0.9rem;
color: #111827;
}
.order-phone-input-group {
display: flex;
gap: 0.5rem;
align-items: stretch;
width: 100%;
max-width: 100%;
box-sizing: border-box;
padding: 0;
margin: 0;
}
.order-phone-country-input {
flex: 0 0 auto;
width: 90px;
min-width: 90px;
max-width: 90px;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 0.75rem 0.6rem;
font-size: 1rem;
background: #f9fafb;
color: #6b7280;
text-align: center;
cursor: not-allowed;
box-sizing: border-box;
-webkit-appearance: none;
appearance: none;
}
.order-phone-number-input {
flex: 1 1 auto;
min-width: 0;
max-width: 100%;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 0.75rem 0.8rem;
font-size: 1rem;
font-weight: 700;
background: #fff;
color: #111827;
letter-spacing: 0.01em;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
box-sizing: border-box;
width: 0;
-webkit-appearance: none;
appearance: none;
}
.order-phone-number-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 255, 107, 0), 0.15);
}
.order-phone-number-input.error {
border-color: #ef4444;
}
/* iOS Safari specific fixes */
@supports (-webkit-touch-callout: none) {
.order-phone-modal-overlay {
padding: 0.75rem;
}
.order-phone-modal {
width: calc(100% - 1.5rem);
max-width: calc(420px - 1.5rem);
}
.order-phone-input-group {
width: 100%;
max-width: 100%;
overflow: hidden;
}
.order-phone-number-input {
flex: 1 1 0%;
width: 0;
min-width: 0;
max-width: calc(100% - 90px - 0.5rem);
}
}
.order-phone-error {
font-size: 0.85rem;
color: #ef4444;
min-height: 1.2rem;
margin-top: 0.25rem;
}
.order-phone-send-btn {
width: 100%;
border: none;
border-radius: 12px;
background: var(--color-primary);
color: #fff;
padding: 0.875rem 1rem;
font-size: 0.95rem;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.2s ease;
margin-top: 0.5rem;
}
.order-phone-send-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.order-phone-send-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.order-code-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.45);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease;
padding: 1rem;
z-index: 999999;
}
.order-code-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.order-code-modal {
background: #fff;
border-radius: 18px;
width: 100%;
max-width: 420px;
padding: 1.5rem;
position: relative;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}
.order-code-close {
position: absolute;
right: 1rem;
top: 1rem;
border: none;
background: transparent;
font-size: 1.1rem;
color: #6b7280;
cursor: pointer;
}
.order-code-header h2 {
margin: 0 0 0.35rem;
font-size: 1.2rem;
}
.order-code-header p {
margin: 0 0 1rem;
color: #6b7280;
}
.order-code-phone {
margin-top: 0.5rem !important;
font-weight: 700;
color: #111827;
font-size: 1.15rem;
letter-spacing: 0.02em;
}
.order-code-change-phone {
border: none;
background: transparent;
color: var(--color-primary, var(--color-primary));
font-weight: 700;
font-size: 0.95rem;
padding: 0;
margin-left: 0.5rem;
cursor: pointer;
text-decoration: underline;
}
.order-code-confirm {
width: 100%;
border: none;
border-radius: 12px;
padding: 0.75rem 1rem;
background: var(--color-primary);
color: #fff;
font-weight: 600;
cursor: pointer;
}
.order-code-error {
color: #dc2626;
font-size: 0.85rem;
text-align: center;
margin-bottom: 0.75rem;
min-height: 1rem;
}
.order-confirmation {
display: grid;
gap: 0.75rem;
}
.order-confirmation-thanks {
text-align: center;
padding: 2rem 1rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, rgba(255, 106, 0, 0.08) 0%, rgba(255, 106, 0, 0.04) 100%);
border-radius: 16px;
border: 1px solid rgba(255, 106, 0, 0.15);
}
.order-confirmation-thanks--pending {
background: linear-gradient(135deg, rgba(37, 99, 235, 0.08) 0%, rgba(37, 99, 235, 0.04) 100%);
border-color: rgba(37, 99, 235, 0.15);
}
.order-confirmation-thanks--failed {
background: linear-gradient(135deg, rgba(220, 38, 38, 0.08) 0%, rgba(220, 38, 38, 0.04) 100%);
border-color: rgba(220, 38, 38, 0.15);
}
.order-confirmation-thanks-icon {
width: 80px;
height: 80px;
margin: 0 auto 1rem;
background: #16a34a;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(22, 163, 74, 0.25);
}
.order-confirmation-thanks--pending .order-confirmation-thanks-icon {
background: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25);
}
.order-confirmation-thanks--failed .order-confirmation-thanks-icon {
background: #dc2626;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25);
}
.order-confirmation-thanks-icon i {
font-size: 2.5rem;
color: #ffffff;
}
.order-confirmation-thanks-title {
font-size: 1.5rem;
font-weight: 700;
color: #111827;
margin: 0 0 0.5rem;
}
.order-confirmation-thanks-desc {
font-size: 0.95rem;
color: #6b7280;
margin: 0;
}
.order-confirmation-map-wrap {
margin-bottom: 1.5rem;
text-align: center;
}
.order-confirmation-map-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.75rem 1.25rem;
background: var(--color-primary, #f97316);
color: #fff;
font-size: 0.9375rem;
font-weight: 600;
border-radius: 10px;
text-decoration: none;
transition: background 0.2s ease, transform 0.15s ease;
box-shadow: 0 2px 8px rgba(249, 115, 22, 0.3);
}
.order-confirmation-map-btn:hover {
background: var(--color-primary-dark, #ea580c);
color: #fff;
transform: translateY(-1px);
}
.order-confirmation-map-btn i {
font-size: 1.125rem;
}
.order-confirmation-items {
display: grid;
gap: 0.75rem;
margin-bottom: 1.5rem;
padding-bottom: 1rem;
border-bottom: 1px solid #e5e7eb;
}
.order-confirmation-item {
pointer-events: none;
}
.order-confirmation-item .new-cart-item-actions {
display: none !important;
}
.order-confirmation-item .new-cart-item-remove {
display: none !important;
}
.order-confirmation-item .new-cart-item-change-btn {
display: none !important;
}
.order-confirmation-item .new-cart-item-quantity-btn {
display: none !important;
}
.order-confirmation-quantity {
margin-top: 0.5rem;
font-size: 0.9rem;
color: #6b7280;
font-weight: 500;
}
.order-code-display {
font-size: 1.15rem;
font-weight: 700;
color: var(--color-primary, var(--color-primary));
letter-spacing: 0.05em;
}
.order-confirmation-actions {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.order-delete-btn {
width: 100%;
padding: 0.75rem 1rem;
background: #fef2f2;
border: 1px solid #fecaca;
border-radius: 12px;
color: #dc2626;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.order-delete-btn:hover {
background: #fee2e2;
border-color: #fca5a5;
}
.prev-orders-btn {
width: 100%;
margin-top: 0.75rem;
padding: 0.75rem 1rem;
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
color: #6b7280;
font-weight: 600;
font-size: 0.9rem;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s ease;
}
.prev-orders-btn:hover {
background: #f3f4f6;
border-color: #d1d5db;
color: #111827;
}
.prev-orders-btn i {
font-size: 0.95rem;
}
/* Orders History Modal */
.orders-history-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: stretch;
justify-content: stretch;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
padding: 0;
z-index: 99999999;
}
.orders-history-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.orders-history-modal {
background: #fff;
border-radius: 0;
width: 100%;
height: 100%;
max-width: none;
max-height: none;
display: flex;
flex-direction: column;
box-shadow: none;
position: relative;
}
.orders-history-close {
position: absolute;
right: 1rem;
top: 0.51rem;
border: none;
background: transparent;
font-size: 1.25rem;
color: #6b7280;
cursor: pointer;
padding: 0.035rem;
border-radius: 50%;
transition: all 0.2s ease;
z-index: 1;
padding: 0rem 1rem;
}
.orders-history-close:hover {
background: #f3f4f6;
color: #111827;
}
.orders-history-header {
padding: 0.375rem 1rem;
border-bottom: 1px solid #e5e7eb;
flex-shrink: 0;
}
.orders-history-header h2 {
margin: 0;
font-size: 1rem;
font-weight: 700;
color: #111827;
padding: 0.5rem 1rem;
}
.orders-history-content {
padding: 1.5rem;
overflow-y: auto;
flex: 1;
min-height: 0;
}
.orders-empty {
text-align: center;
padding: 3rem 1rem;
color: #6b7280;
}
.orders-empty i {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.5;
}
.order-history-item {
background: #f9fafb;
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 1rem;
margin-bottom: 0.75rem;
}
.order-history-header-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 0.75rem;
}
.order-history-info {
flex: 1;
min-width: 0;
}
.order-history-info h3 {
margin: 0 0 0.25rem;
font-size: 1rem;
font-weight: 600;
color: #111827;
}
.order-history-info p {
margin: 0;
font-size: 0.875rem;
color: #6b7280;
}
.order-history-actions {
display: flex;
align-items: center;
gap: 0.5rem;
flex-shrink: 0;
}
.order-history-toggle-items {
border: 1px solid #e5e7eb;
background: #fff;
color: #6b7280;
cursor: pointer;
padding: 0.5rem 0.75rem;
border-radius: 8px;
font-size: 0.875rem;
font-weight: 500;
display: flex;
align-items: center;
gap: 0.375rem;
transition: all 0.2s ease;
}
.order-history-toggle-items:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #111827;
}
.order-history-toggle-items i {
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.order-history-delete {
border: none;
background: transparent;
color: #dc2626;
cursor: pointer;
padding: 0.5rem;
border-radius: 8px;
transition: all 0.2s ease;
flex-shrink: 0;
}
.order-history-delete:hover {
background: #fee2e2;
}
.order-history-items-container {
margin: 0.75rem 0;
padding: 0.75rem;
background: #f9fafb;
border-radius: 8px;
border: 1px solid #e5e7eb;
}
.order-history-items-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.order-history-item-product {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
padding: 0.625rem;
background: #fff;
border-radius: 6px;
}
.order-history-item-product-info {
flex: 1;
min-width: 0;
}
.order-history-item-product-info h4 {
margin: 0 0 0.25rem;
font-size: 0.9rem;
font-weight: 600;
color: #111827;
display: flex;
align-items: center;
gap: 0.5rem;
}
.order-history-item-quantity {
font-size: 0.8rem;
font-weight: 500;
color: #6b7280;
}
.order-history-item-product-options {
margin: 0.25rem 0 0;
font-size: 0.8rem;
color: #6b7280;
line-height: 1.4;
}
.order-history-item-product-notes {
margin: 0.25rem 0 0;
font-size: 0.8rem;
color: #6b7280;
font-style: italic;
display: flex;
align-items: center;
gap: 0.25rem;
}
.order-history-item-product-notes i {
font-size: 0.7rem;
}
.order-history-item-product-price {
font-size: 0.9rem;
font-weight: 600;
color: #111827;
flex-shrink: 0;
}
.order-history-details {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 0.75rem;
border-top: 1px solid #e5e7eb;
}
.order-history-total {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
}
.order-history-total strong {
color: var(--color-primary, var(--color-primary));
font-size: 1.1rem;
}
@media (max-width: 768px) {
.order-cart-scroll {
max-height: none;
}
.order-cart-section {
min-height: calc(100vh - 360px);
}
.order-fixed-bar {
padding-bottom: max(0.75rem, env(safe-area-inset-bottom));
}
}
.call-waiter-cancel-btn,
.call-waiter-confirm-btn {
flex: 1;
padding: 0.875rem 1rem;
border-radius: 12px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
border: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.call-waiter-cancel-btn {
background: #fff;
color: #374151;
border: 1.5px solid #e5e7eb;
}
.call-waiter-cancel-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
}
.call-waiter-confirm-btn {
background: var(--color-primary, var(--color-primary));
color: #fff;
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.call-waiter-confirm-btn:hover:not(:disabled) {
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(255, 107, 0, 0.4);
}
.call-waiter-confirm-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
background: #e5e7eb;
color: #9ca3af;
box-shadow: none;
}
.call-waiter-cancel-btn i,
.call-waiter-confirm-btn i {
font-size: 1rem;
}
.call-waiter-btn:hover {
transform: translateY(-2px);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.22);
background: #e55a00;
}
.call-waiter-btn i {
font-size: 1rem;
}
.call-waiter-btn span {
font-size: 0.9rem;
}
/* Mobile: Selection status ve call waiter butonlarını yan yana yerleştir */
@media (max-width: 600px) {
.selection-status-btn {
left: 0.5rem;
bottom: 0.5rem;
padding: 0.6rem 0.8rem;
}
.call-waiter-btn {
right: 0.5rem;
bottom: 0.5rem;
padding: 0.6rem 0.8rem;
}
}
/* ========== PRODUCT GALLERY ========== */
.product-gallery {
position: relative;
width: 100%;
height: 100%;
}
.product-gallery-main {
position: relative;
width: 100%;
height: 100%;
border-radius: 0px;
overflow: hidden;
background: #f3f4f6;
}
.gallery-slides {
display: flex;
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
height: 100%;
width: 100%;
cursor: grab;
}
.gallery-slides.dragging {
cursor: grabbing;
transition: none;
}
.gallery-slide {
flex: 0 0 100%;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.gallery-slide img {
width: 100%;
height: 100%;
object-fit: cover;
cursor: pointer;
user-select: none;
pointer-events: none;
opacity: 1 !important;
/* Galeri resimleri her zaman görünür */
}
.gallery-slide video {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-video-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.3);
cursor: pointer;
transition: background 0.3s ease;
}
.gallery-video-overlay:hover {
background: rgba(0, 0, 0, 0.4);
}
.gallery-video-overlay.playing {
display: none;
}
.gallery-play-btn {
width: 64px;
height: 64px;
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.gallery-play-btn:hover {
transform: scale(1.1);
background: white;
}
.gallery-play-btn i {
font-size: 1.5rem;
color: var(--color-primary);
margin-left: 4px;
}
/* Gallery Navigation Arrows - Sadece fullscreen'de görünür */
.gallery-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 50%;
display: none;
/* Normal modalda gizli */
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
/* Tek item varsa navigation gizle */
.gallery-nav.single-item {
display: none !important;
}
.gallery-nav:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
.gallery-nav-prev {
left: 0.75rem;
}
.gallery-nav-next {
right: 0.75rem;
}
.gallery-nav i {
color: #1f2937;
font-size: 1rem;
}
.gallery-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
/* Gallery Dots */
.gallery-dots {
position: absolute;
bottom: 5rem;
left: 50%;
transform: translateX(-50%);
display: flex;
justify-content: center;
gap: 0.5rem;
padding: 0.5rem;
z-index: 20;
background: rgba(0, 0, 0, 0.3);
border-radius: 20px;
backdrop-filter: blur(4px);
}
/* Tek item varsa dots gizle */
.gallery-dots:empty,
.gallery-dots.single-item {
display: none;
}
.gallery-dot {
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.6);
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.gallery-dot.active {
background: var(--color-primary);
width: 24px;
border-radius: 4px;
}
.gallery-dot:hover {
background: rgba(255, 255, 255, 0.9);
}
/* Fullscreen Gallery */
.gallery-fullscreen-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 999999999;
display: none;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.gallery-fullscreen-overlay.active {
display: flex;
opacity: 1;
}
.gallery-fullscreen-content {
max-width: 90vw;
max-height: 90vh;
position: relative;
display: flex;
align-items: center;
justify-content: center;
cursor: grab;
}
.gallery-fullscreen-content.dragging {
cursor: grabbing;
}
.gallery-fullscreen-content img,
.gallery-fullscreen-content video {
max-width: 100%;
max-height: 90vh;
object-fit: contain;
border-radius: 8px;
user-select: none;
pointer-events: none;
}
.gallery-fullscreen-close {
position: absolute;
top: 1.5rem;
right: 1.5rem;
width: 48px;
height: 48px;
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
.gallery-fullscreen-close:hover {
background: white;
transform: scale(1.1);
}
.gallery-fullscreen-close i {
color: #1f2937;
font-size: 1.25rem;
}
.gallery-fullscreen-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.95);
border: none;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
}
/* Tek item varsa fullscreen navigation gizle */
.gallery-fullscreen-nav.single-item {
display: none !important;
}
.gallery-fullscreen-nav:hover {
background: white;
transform: translateY(-50%) scale(1.1);
}
.gallery-fullscreen-prev {
left: 2rem;
}
.gallery-fullscreen-next {
right: 2rem;
}
.gallery-fullscreen-nav i {
color: #1f2937;
font-size: 1.25rem;
}
.gallery-fullscreen-nav:disabled {
opacity: 0.3;
cursor: not-allowed;
pointer-events: none;
}
.gallery-fullscreen-dots {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 0.75rem;
}
/* Tek item varsa fullscreen dots gizle */
.gallery-fullscreen-dots:empty,
.gallery-fullscreen-dots.single-item {
display: none;
}
.gallery-fullscreen-dot {
width: 12px;
height: 12px;
background: rgba(255, 255, 255, 0.5);
border: none;
border-radius: 50%;
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
}
.gallery-fullscreen-dot.active {
background: white;
width: 36px;
border-radius: 6px;
}
.gallery-fullscreen-dot:hover {
background: rgba(255, 255, 255, 0.8);
}
@media (max-width: 768px) {
.gallery-nav {
width: 36px;
height: 36px;
}
.gallery-fullscreen-nav {
width: 48px;
height: 48px;
}
.gallery-fullscreen-prev {
left: 1rem;
}
.gallery-fullscreen-next {
right: 1rem;
}
.gallery-fullscreen-close {
top: 1rem;
right: 1rem;
width: 40px;
height: 40px;
}
.gallery-dots {
bottom: 0.5rem;
}
}
/* ========== SWEETALERT2 CUSTOM STYLES ========== */
/* SweetAlert overlay ve container z-index artırıldı */
.swal2-container {
z-index: 999999999 !important;
}
.swal2-popup {
z-index: 999999999 !important;
}
.swal2-backdrop-show {
z-index: 999999998 !important;
}
/* Toast için de yüksek z-index */
.swal2-toast {
z-index: 999999999 !important;
top: 1rem !important;
left: auto !important;
right: 1rem !important;
bottom: auto !important;
border-radius: 20px;
}
/* Mobilde toast konumu ve genişliği */
@media (max-width: 768px) {
.swal2-container.swal2-top-end {
width: 100% !important;
padding: 0 1rem !important;
}
.swal2-toast {
top: 1rem !important;
right: 1rem !important;
left: 0rem !important;
width: calc(100% - 0rem) !important;
max-width: 100% !important;
min-width: auto !important;
}
}
/* ========== DESKTOP CART BUTTON ========== */
.desktop-cart-btn {
position: fixed;
right: 1rem;
bottom: 4.5rem;
z-index: 99999;
width: 56px;
height: 56px;
border-radius: 50%;
background: var(--color-primary, var(--color-primary));
color: #fff;
border: none;
display: none;
/* Mobilde gizli */
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.4);
transition: all 0.3s ease;
}
.desktop-cart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(255, 107, 0, 0.5);
background: var(--color-primary, var(--color-primary));
}
.desktop-cart-btn i {
font-size: 1.5rem;
}
.desktop-cart-btn .cart-badge {
position: absolute;
top: -4px;
right: -4px;
background: var(--color-primary, var(--color-primary));
color: #fff;
border-radius: 50%;
width: 22px;
height: 22px;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
font-weight: 600;
border: 2px solid #fff;
}
.desktop-cart-btn .cart-badge:empty {
display: none;
}
/* Desktop'ta görünür, mobilde gizli */
@media (min-width: 992px) {
.desktop-cart-btn {
display: flex;
}
}
/* ========== NEW CART MODAL ========== */
.new-cart-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: 999999;
display: flex;
align-items: center;
justify-content: flex-end;
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s ease;
padding: 0;
will-change: opacity;
}
.new-cart-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.new-cart-modal {
position: fixed;
right: 0;
top: 0;
bottom: 0;
width: 100%;
max-width: 480px;
background: #fff;
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.15);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
}
.new-cart-modal-overlay.active .new-cart-modal {
transform: translateX(0);
box-shadow: -6px 0 32px rgba(0, 0, 0, 0.2);
}
.new-cart-modal-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2rem;
min-height: 120px;
color: #6b7280;
font-size: 0.9375rem;
}
.new-cart-modal-loading-spinner {
width: 36px;
height: 36px;
border: 3px solid rgba(255, 107, 0, 0.2);
border-top-color: var(--color-primary, var(--color-primary));
border-radius: 50%;
animation: news-spin 0.8s linear infinite;
}
.new-cart-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0.35rem 0.9rem;
border-bottom: 1px solid #e5e7eb;
position: sticky;
top: 0;
background: #fff;
z-index: 10;
}
.new-cart-title {
font-size: 1.25rem;
font-weight: 600;
color: #111827;
margin: 0;
}
.new-cart-close {
width: 32px;
height: 32px;
border-radius: 50%;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
padding: 0;
font-size: 1.5rem;
}
.new-cart-close:hover {
background: #f3f4f6;
color: #111827;
}
.new-cart-content {
flex: 1;
overflow-y: auto;
padding: 1rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
/* Cart Items */
.new-cart-items {
display: flex;
flex-direction: column;
gap: 1rem;
}
.new-cart-item {
display: flex;
gap: 0.75rem;
padding: 0.75rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
position: relative;
}
.new-cart-item-image {
width: 72px;
height: 72px;
border-radius: 8px;
overflow: hidden;
flex-shrink: 0;
position: relative;
background: #f9fafb00;
}
.new-cart-item-image img {
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
transition: opacity 0.3s ease;
}
.new-cart-item-image img.loaded {
opacity: 1;
}
.new-cart-item-image .image-loading-spinner {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(249, 250, 251, 0.95);
z-index: 10;
pointer-events: none;
}
.new-cart-item-image .image-loading-spinner .spinner {
width: 24px;
height: 24px;
border: 2px solid #e5e7eb;
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
.new-cart-item-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.new-cart-item-name {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin: 0;
}
.new-cart-item-details {
font-size: 0.875rem;
color: #6b7280;
line-height: 1.5;
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.new-cart-item-options-list {
font-size: 0.875rem;
color: #6b7280;
line-height: 1.5;
margin-bottom: 0.25rem;
}
.new-cart-item-options-list .cart-option-meta {
font-size: 0.8em;
color: #9ca3af;
}
.new-cart-item-options-list .cart-option-line {
display: block;
}
.new-cart-item-options-list .cart-option-line.depth-0 {
margin-left: 0;
}
.new-cart-item-options-list .cart-option-line.depth-1 {
margin-left: 0.75rem;
}
.new-cart-item-options-list .cart-option-line.depth-2 {
margin-left: 1.25rem;
}
.new-cart-item-options-list .cart-option-line.depth-3 {
margin-left: 1.75rem;
}
.new-cart-item-options-list .cart-option-line .cart-option-line-label {
font-size: 0.875rem;
}
.new-cart-item-options-list .cart-option-line small.cart-option-label-extra,
.new-cart-item-options-list .cart-option-line .cart-option-label-extra {
font-size: 0.75rem;
color: #9ca3af;
margin-left: 0.15rem;
}
.new-cart-item-quantity-info {
font-size: 0.8125rem;
color: #6b7280;
}
.new-cart-item-notes {
display: flex;
align-items: flex-start;
gap: 0.375rem;
padding: 0.375rem 0.5rem;
background: #ffffff00;
border-radius: 6px;
font-size: 0.75rem;
color: #343a40;
margin-top: 0.25rem;
}
.new-cart-item-notes i {
font-size: 0.6875rem;
margin-top: 0.125rem;
flex-shrink: 0;
}
.new-cart-item-notes span {
line-height: 1.4;
word-break: break-word;
}
.new-cart-item-price-row {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: auto;
}
.new-cart-item-price {
font-size: 1rem;
font-weight: 600;
color: #111827;
}
.new-cart-item-old-price {
font-size: 0.875rem;
color: #9ca3af;
text-decoration: line-through;
text-decoration-color: #ef4444;
text-decoration-thickness: 2px;
margin-left: 0.1rem;
}
.new-cart-item-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.new-cart-item-change-btn {
padding: 0.375rem 0.75rem;
background: transparent;
color: var(--color-primary);
border: 1px solid #e5e7eb;
border-radius: 30px;
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
transition: all 0.2s ease;
}
.new-cart-item-change-btn:hover {
background: #f9fafb;
border-color: #d1d5db;
color: #111827;
}
.new-cart-item-quantity {
display: flex;
align-items: center;
gap: 0.5rem;
background-color: rgb(243, 243, 247);
border: 1px solid #e5e7eb;
border-radius: 30px;
padding: 0.25rem;
}
.new-cart-item-quantity-btn {
width: 32px;
height: 32px;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 30px;
transition: all 0.2s ease;
}
.new-cart-item-quantity-btn:hover {
background: #f3f4f6;
color: #111827;
}
.new-cart-item-quantity-value {
min-width: 24px;
text-align: center;
font-weight: 600;
color: #111827;
}
.new-cart-item-remove {
position: absolute;
top: 0.5rem;
right: 0.5rem;
width: 28px;
height: 28px;
border: none;
background: transparent;
color: #6b7280;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
opacity: 1;
transition: all 0.2s ease;
padding: 0;
}
.new-cart-item-remove:hover {
background: #f3f4f6;
color: #111827;
}
/* Empty Cart */
.new-cart-empty {
text-align: center;
padding: 3rem 1rem;
color: #6b7280;
}
.new-cart-empty i,
.new-cart-empty .cart-empty-icon {
font-size: 3rem;
color: #d1d5db;
margin: 0 auto 1rem;
display: block;
}
.new-cart-empty .cart-empty-icon {
width: auto;
height: 10rem;
object-fit: contain;
opacity: 1.5;
margin: 0 auto 1rem;
display: block;
}
.new-cart-empty p {
font-size: 1.125rem;
font-weight: 600;
color: #111827;
margin: 0.5rem 0;
}
.new-cart-empty span {
font-size: 0.875rem;
color: var(--color-white);
}
.new-cart-empty .new-cart-empty-menu-btn {
margin-top: 1.25rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.new-cart-empty .new-cart-empty-menu-btn i {
font-size: 0.875rem;
margin: 0;
display: inline-block;
color: inherit;
}
/* Upsell Section */
.new-cart-upsell {
margin-top: 1rem;
}
.upsell-title {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin-bottom: 1rem;
}
.upsell-items {
display: flex;
gap: 0.75rem;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.upsell-item {
min-width: 100px;
padding: 1rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
cursor: pointer;
transition: all 0.2s ease;
}
.upsell-item:hover {
border-color: var(--color-primary);
box-shadow: 0 2px 8px rgba(255, 107, 0, 0.2);
}
.upsell-icon {
width: 48px;
height: 48px;
border-radius: 50%;
background: #f3f4f6;
display: flex;
align-items: center;
justify-content: center;
color: #6b7280;
}
.upsell-item span {
font-size: 0.875rem;
color: #111827;
text-align: center;
}
/* Cart Summary */
.new-cart-summary {
padding-top: 0.875rem;
border-top: 0px solid #e5e7eb;
display: flex;
flex-direction: column;
gap: 0.625rem;
}
.summary-row {
display: flex;
justify-content: space-between;
align-items: center;
font-size: 0.875rem;
color: #6b7280;
padding: 0.375rem 0;
}
.summary-row.total-row {
font-size: 1.125rem;
font-weight: 700;
color: #16a34a;
padding-top: 0.5rem;
border-top: 1px solid #e5e7eb;
}
.summary-row span:last-child {
font-weight: 400;
color: #111827;
}
#pickupOrderTotal {
color: #16a34a;
}
/* Promo Code Input */
.summary-row.promo-row {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
padding: 0.75rem 0;
}
.promo-input-wrapper {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
position: relative;
}
.promo-code-input {
flex: 1;
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid #e5e7eb;
border-radius: 12px;
font-size: 0.875rem;
color: #111827;
background: #f3f3f7;
transition: border-color 0.2s ease;
}
.promo-code-input:focus {
outline: none;
border-color: var(--color-primary);
}
.promo-code-input::placeholder {
color: #9ca3af;
}
.promo-apply-btn {
padding: 0.75rem 1.25rem;
border: none;
border-radius: 8px;
background: #0abb69;
color: #fff;
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
transition: background 0.2s ease, transform 0.1s ease;
white-space: nowrap;
}
.promo-apply-btn:hover {
background: #059669;
transform: translateY(-1px);
}
.promo-apply-btn:active {
transform: translateY(0);
}
/* Kampanya seç kartı */
.campaign-select-row {
padding: 0.5rem 0;
}
.campaign-select-card {
width: 100%;
display: flex;
align-items: center;
gap: 1rem;
padding: 0.5rem 0.7rem;
border-radius: 12px;
border: 1px solid #eee;
background: #f3f3f7;
cursor: pointer;
}
.campaign-select-icon {
width: 35px;
height: 30px;
border-radius: 30px;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-primary, var(--color-primary));
font-size: 30px;
flex-shrink: 0;
}
.campaign-select-texts {
flex: 1;
min-width: 0;
text-align: left;
}
.campaign-select-title {
font-weight: 500;
font-size: 1rem;
color: #111827;
}
.campaign-select-subtitle {
font-size: 0.9rem;
color: #6b7280;
}
.campaign-select-action {
padding: 0.2rem 0.9rem;
border: 2px solid var(--color-primary, var(--color-primary));
color: var(--color-primary, var(--color-primary));
border-radius: 30px;
font-weight: 500;
}
.campaign-applied-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 0.5rem 0;
}
.campaign-applied-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.campaign-applied-label {
font-weight: 600;
color: #111827;
}
.campaign-applied-code {
color: #6b7280;
font-size: 0.79rem;
}
.campaign-applied-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.campaign-applied-discount {
color: #16a34a;
font-weight: 700;
}
.campaign-remove-btn {
border: none;
background: #f3f4f6;
color: #6b7280;
border-radius: 999px;
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
/* Kampanya Modalı */
.campaign-modal-overlay {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.4);
display: none;
z-index: 99999999;
}
.campaign-modal-overlay.active {
display: block;
}
.campaign-modal {
position: absolute;
right: 0;
top: 0;
width: 100%;
max-width: 480px;
height: 100%;
background: #fff;
border-radius: 16px 0 0 16px;
animation: campaignSlideIn 0.25s ease-out;
overflow: hidden;
display: flex;
flex-direction: column;
}
@keyframes campaignSlideIn {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
.campaign-modal-header {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 1rem;
border-bottom: 1px solid #eee;
}
.campaign-modal-back {
border: none;
background: #f3f4f6;
width: 36px;
height: 36px;
border-radius: 999px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.campaign-modal-title {
font-size: 1.15rem;
font-weight: 700;
margin: 0;
}
.campaign-modal-body {
padding: 1rem 1rem 1.5rem;
overflow: auto;
}
.campaign-section-title {
font-size: 0.95rem;
color: #6b7280;
margin: 0.25rem 0 0.75rem;
}
.campaign-list {
display: grid;
gap: 0.75rem;
margin-bottom: 1.25rem;
}
.campaign-card {
display: flex;
flex-direction: column;
gap: 0;
padding: 0.6rem;
border: 1px solid #eee;
border-radius: 20px;
background: #fff;
}
.campaign-card-top {
display: flex;
gap: 0.75rem;
align-items: flex-start;
}
.campaign-card-toggle {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
padding: 0.5rem 0.6rem;
margin-top: 0.5rem;
border: none;
border-top: 1px solid #eee;
background: transparent;
color: #6b7280;
font-size: 0.8rem;
cursor: pointer;
transition: color 0.2s, background 0.2s;
}
.campaign-card-toggle:hover {
background: #f9fafb;
color: #111827;
}
.campaign-card-toggle-icon {
transition: transform 0.25s ease;
}
.campaign-card-toggle-icon--open {
transform: rotate(180deg);
}
.campaign-card-detail {
overflow: hidden;
border-top: 1px solid #eee;
}
.campaign-card-detail-inner {
padding: 0.6rem 0.75rem;
background: #f8fafc;
font-size: 0.8rem;
}
.campaign-detail-line {
display: flex;
gap: 1rem;
margin-bottom: 0.5rem;
}
.campaign-detail-line:last-of-type {
margin-bottom: 0.5rem;
}
.campaign-detail-pair {
flex: 1;
min-width: 0;
display: flex;
align-items: baseline;
gap: 0.35rem;
}
.campaign-detail-pair .campaign-detail-label {
flex-shrink: 0;
margin-bottom: 0;
}
.campaign-detail-pair .campaign-detail-value {
min-width: 0;
}
.campaign-detail-row {
display: flex;
flex-direction: column;
gap: 0.15rem;
margin-bottom: 0.5rem;
}
.campaign-detail-row:last-child {
margin-bottom: 0;
}
.campaign-detail-label {
font-weight: 600;
color: #374151;
}
.campaign-detail-value {
color: #6b7280;
}
.campaign-detail-terms .campaign-detail-label {
margin-bottom: 0.25rem;
}
.campaign-detail-list {
margin: 0;
padding-left: 1.1rem;
color: #6b7280;
line-height: 1.45;
}
.campaign-card-icon {
width: 30px;
height: auto;
/* border-radius: 10px; */
background: #fff;
color: var(--color-primary, var(--color-primary));
display: flex;
align-items: center;
justify-content: center;
font-weight: 500;
flex-shrink: 0;
font-size: 2rem;
margin: auto;
}
.campaign-card-content {
flex: 1;
}
.campaign-card-title {
font-weight: 700;
margin-bottom: 0.25rem;
color: #111827;
}
.campaign-card-desc {
color: #6b7280;
font-size: 0.8rem;
}
.campaign-card .campaign-card-action {
align-self: center;
padding: 0.2rem 0.7rem;
border-radius: 30px;
border: none;
background: #ffffff;
color: var(--color-primary, var(--color-primary));
font-weight: 500;
cursor: pointer;
border: 1px solid var(--color-primary, var(--color-primary));
font-size: 0.8rem;
line-height: 1.5rem;
}
.campaign-card-action[disabled] {
background: #e5e7eb;
color: #9ca3af;
cursor: not-allowed;
border: 1px solid #e5e7eb;
}
.campaign-card-action.campaign-card-action--applied[disabled] {
background: #16a34a;
color: #ffffff;
cursor: not-allowed;
border: 1px solid #16a34a;
}
.promo-error-message {
font-size: 0.8125rem;
color: #ef4444;
padding: 0.5rem 0;
line-height: 1.4;
}
/* Promo Applied Row */
.summary-row.promo-applied-row {
display: flex;
flex-direction: column;
align-items: stretch;
padding: 0.55rem;
background: #ffffff;
border-radius: 12px;
margin-top: 0.5rem;
position: relative;
border: 1px solid #16a34a;
}
.promo-applied-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
flex: 1;
}
.promo-applied-label {
font-size: 0.8125rem;
color: #6b7280;
}
.promo-applied-code {
font-size: 0.875rem;
font-weight: 500;
color: #28a745;
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.promo-chip {
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: #d1fae5;
color: #047857;
font-size: 0.8125rem;
}
.promo-chip-code {
font-weight: 600;
}
.promo-chip small {
font-size: 0.75rem;
opacity: 0.9;
}
.promo-chip-remove {
border: none;
background: transparent;
color: #047857;
cursor: pointer;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
}
.promo-chip-remove:hover {
color: #b91c1c;
}
.promo-line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
}
.promo-line-amount {
font-size: 0.875rem;
font-weight: 600;
color: #28a745;
white-space: nowrap;
}
.promo-applied-actions {
display: none;
}
.promo-applied-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.promo-applied-discount {
font-size: 0.875rem;
font-weight: 600;
color: #28a745;
}
.promo-remove-btn {
width: 28px;
height: 28px;
border-radius: 50%;
border: none;
background: transparent;
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
padding: 0;
position: absolute;
top: 8px;
right: 8px;
}
.promo-remove-btn:hover {
background: #fee2e2;
color: #ef4444;
}
.promo-remove-btn i {
font-size: 0.875rem;
}
.coin-row span:first-child i {
margin-left: 0.25rem;
color: #9ca3af;
cursor: help;
}
/* Cart Footer */
.new-cart-footer {
padding: 1rem 1.25rem;
border-top: 1px solid #e5e7eb;
background: #fff;
position: sticky;
bottom: 0;
display: flex !important;
flex-direction: row !important;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.new-cart-footer-total {
display: flex;
flex-direction: column;
flex: 1;
min-width: 0;
max-width: none;
}
.new-cart-footer-total-label {
font-size: 0.75rem;
color: #6b7280;
margin-bottom: 0.25rem;
}
.new-cart-footer-total-amount {
font-size: 1.25rem;
font-weight: 700;
color: #111827;
}
.new-cart-checkout-btn {
padding: 0.875rem 1.25rem;
background: var(--color-primary, var(--color-primary));
color: #fff;
border: none;
border-radius: 30px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
display: flex !important;
align-items: center;
gap: 0.5rem;
white-space: nowrap;
flex-shrink: 0;
width: auto !important;
max-width: none !important;
transition: all 0.2s ease;
}
.new-cart-checkout-btn.is-loading {
position: relative;
opacity: 0.85;
cursor: default;
}
.new-cart-checkout-btn.is-loading span,
.new-cart-checkout-btn.is-loading i {
opacity: 0.0;
}
.new-cart-checkout-btn.is-loading::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 18px;
height: 18px;
margin-top: -9px;
margin-left: -9px;
border-radius: 50%;
border: 2px solid rgba(255, 255, 255, 0.5);
border-top-color: #ffffff;
animation: new-cart-spinner 0.8s linear infinite;
}
@keyframes new-cart-spinner {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.new-cart-checkout-btn:hover {
background: var(--color-primary-dark, #e55a00);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.new-cart-checkout-btn:active {
transform: translateY(0);
}
/* Mobile responsive */
@media (max-width: 768px) {
.new-cart-modal {
max-width: 100%;
}
.new-cart-header {
padding: 0.375rem 1rem;
}
.new-cart-title {
font-size: 1.125rem;
}
.new-cart-content {
padding: 0.875rem;
gap: 0.875rem;
}
.new-cart-item {
padding: 0.625rem;
gap: 0.625rem;
}
.new-cart-item-image {
width: 64px;
height: 64px;
}
.new-cart-item-name {
font-size: 0.9375rem;
}
.new-cart-item-details {
font-size: 0.8125rem;
}
.new-cart-item-price {
font-size: 0.9375rem;
}
.new-cart-item-change-btn {
padding: 0.3125rem 0.625rem;
font-size: 0.75rem;
}
.new-cart-item-quantity {
padding: 0rem;
}
.new-cart-item-quantity-btn {
width: 28px;
height: 28px;
}
.new-cart-footer {
padding: 0.875rem 1.5rem;
gap: 0.75rem;
display: flex !important;
flex-direction: row !important;
}
.new-cart-footer-total-label {
font-size: 0.6875rem;
}
.new-cart-footer-total-amount {
font-size: 1.125rem;
}
.new-cart-checkout-btn {
padding: 0.75rem 1rem;
font-size: 0.875rem;
}
.new-cart-summary {
padding: 0.1875rem;
gap: 0.1rem;
}
.summary-row {
font-size: 0.875rem;
padding: 0.5rem 0;
}
.pickup-time-modal,
.pickup-payment-modal {
border-radius: 0px 0px 0px;
}
.campaign-modal {
border-radius: 0px 0 0 0px;
}
}
/* Küçük ekranlar için optimizasyon (360px ve altı) */
@media (max-width: 360px) {
.order-fixed-bar {
padding: 0.5rem 0.75rem;
gap: 0.5rem;
}
.order-fixed-menu-btn {
padding: 0.3rem 0.6rem;
font-size: 0.75rem;
gap: 0.35rem;
}
.order-fixed-menu-btn i {
font-size: 0.7rem;
}
.order-fixed-total {
font-size: 0.85rem;
gap: 0.35rem;
}
.order-fixed-total strong {
font-size: 1.25rem;
}
.order-fixed-btn {
padding: 0.6rem 1rem;
font-size: 0.85rem;
min-width: 120px;
}
}
/* Çok küçük ekranlar için optimizasyon (320px ve altı) */
@media (max-width: 320px) {
.pickup-layout-root {
padding: 0.4rem 0.75rem 1rem;
}
.order-fixed-bar {
padding: 0.4rem 0.5rem;
gap: 0.4rem;
}
.order-fixed-menu-btn {
padding: 0.25rem 0.5rem;
font-size: 0.7rem;
gap: 0.3rem;
}
.order-fixed-menu-btn i {
font-size: 0.65rem;
}
.order-fixed-total {
font-size: 0.75rem;
gap: 0.3rem;
}
.order-fixed-total strong {
font-size: 1.1rem;
}
.order-fixed-btn {
padding: 0.5rem 0.75rem;
font-size: 0.75rem;
min-width: 100px;
}
.new-cart-item-quantity {
display: flex;
align-items: center;
gap: 0.15rem;
background-color: rgb(243, 243, 247);
border: 1px solid #e5e7eb;
border-radius: 30px;
padding: 0.25rem;
}
.new-cart-item-image {
width: 48px;
height: 48px;
}
.new-cart-item-quantity-btn {
width: 20px;
height: 20px;
}
}
div:where(.swal2-container) h2:where(.swal2-title) {
position: relative;
max-width: 100%;
margin: 0;
padding: var(--swal2-title-padding);
color: inherit;
font-size: 1.5em;
font-weight: 600;
text-align: center;
text-transform: none;
overflow-wrap: break-word;
cursor: initial;
}
#deliveryOrderTotal,
#cartOrderTotal,
#pickupOrderTotal {
font-weight: 700;
color: #16a34a;
}
/* ========== AUTH MODAL STYLES ========== */
.auth-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: none;
-webkit-backdrop-filter: none;
z-index: 9999999;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.12s ease, visibility 0.12s ease;
padding: 2rem;
will-change: opacity;
}
.auth-modal-overlay.active {
opacity: 1;
visibility: visible;
}
.auth-modal {
background: var(--color-white);
border-radius: 24px;
max-width: 480px;
width: 100%;
max-height: 90vh;
overflow: hidden;
box-shadow: 0 18px 36px rgba(0, 0, 0, 0.2);
position: relative;
display: flex;
flex-direction: column;
transform: translateY(100%);
transition: transform 0.12s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
perspective: 1000px;
-webkit-perspective: 1000px;
}
.auth-modal-overlay.active .auth-modal {
transform: translateY(0);
}
.auth-modal-close {
position: absolute;
top: 1rem;
right: 1rem;
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.05);
border: none;
border-radius: 50%;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.2s ease;
z-index: 10;
}
.auth-modal-close:hover {
background: rgba(0, 0, 0, 0.1);
transform: rotate(90deg);
}
.auth-modal-header {
padding: 1.5rem 1.5rem 1rem;
text-align: center;
}
.auth-modal-header h2 {
font-size: 1.75rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 0.5rem;
}
.auth-modal-header p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
margin: 0;
}
/* Modern Register Modal Header */
.auth-modal-header-modern {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.25rem 1.5rem;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
position: relative;
}
.auth-modal-header-modern h2 {
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0;
flex: 1;
text-align: center;
}
.auth-modal-header-modern .auth-modal-close {
position: absolute;
right: 1.5rem;
top: 50%;
transform: translateY(-50%);
}
.auth-modal-body {
padding: 1rem 1.5rem 1.5rem;
overflow-y: auto;
flex: 1;
}
.auth-form {
display: flex;
flex-direction: column;
gap: 0.875rem;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.375rem;
margin-bottom: 0.5rem;
}
.form-group label {
font-size: 0.8125rem;
font-weight: 600;
color: var(--color-text-primary);
display: block;
margin-bottom: 0.25rem;
}
.form-group input {
width: 100%;
padding: 0.625rem 0.875rem;
border: 1.5px solid var(--color-gray-300);
border-radius: 8px;
font-size: 0.9375rem;
color: var(--color-text-primary);
background: var(--color-white);
transition: all 0.2s ease;
box-sizing: border-box;
}
.form-group input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 255, 107, 0), 0.1);
}
.form-group input::placeholder {
color: var(--color-text-secondary);
}
/* Phone Input Group */
.phone-input-wrapper {
display: flex;
gap: 0.5rem;
align-items: stretch;
}
.phone-code-selector {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 0.75rem;
background: var(--color-gray-50);
border: 1.5px solid var(--color-gray-300);
border-radius: 8px;
min-width: 85px;
font-size: 0.875rem;
color: var(--color-text-primary);
flex-shrink: 0;
}
.phone-code-selector .flag-icon {
font-size: 1.25rem;
line-height: 1;
}
.phone-code-selector .phone-code {
font-weight: 600;
}
.phone-input-wrapper input {
flex: 1;
}
/* Campaign Checkbox */
.campaign-checkbox {
margin-top: 0;
margin-bottom: 0;
}
.campaign-checkbox label {
font-weight: 400;
font-size: 0.8125rem;
line-height: 1.5;
color: #9ca3af;
cursor: pointer;
display: inline;
}
/* Legal Links */
.legal-links {
margin: 0;
padding: 0;
background: transparent;
border-radius: 0;
}
.legal-links p {
font-size: 0.75rem;
color: #9ca3af;
line-height: 1.5;
margin: 0.25rem 0;
}
.legal-links p:first-child {
margin-top: 0;
}
.legal-links p:last-child {
margin-bottom: 0;
}
.legal-link {
color: #8b5cf6;
text-decoration: underline;
font-weight: 400;
cursor: pointer;
transition: color 0.2s ease;
}
.legal-link:hover {
color: #7c3aed;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-row-name {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.form-row-password {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 0.75rem;
}
.password-input-wrapper {
position: relative;
display: flex;
align-items: center;
}
.password-input-wrapper input {
padding-right: 2.75rem;
}
.password-toggle {
position: absolute;
right: 0.625rem;
background: none;
border: none;
color: var(--color-text-secondary);
cursor: pointer;
padding: 0.375rem;
border-radius: 4px;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
z-index: 2;
}
.password-toggle:hover {
color: var(--color-primary);
background: rgba(var(--color-primary-rgb, 255, 107, 0), 0.1);
}
.password-toggle:focus {
outline: none;
color: var(--color-primary);
}
.password-toggle i {
font-size: 0.875rem;
}
.form-check {
display: flex;
flex-direction: row;
align-items: center;
gap: 0.375rem;
margin: 0;
}
#registerModal .form-check,
#loginModal .form-check {
display: flex;
padding-left: 0px;
}
.form-check input[type="checkbox"] {
width: 14px;
height: 14px;
min-width: 14px;
margin: 0;
cursor: pointer;
border-radius: 3px;
border: 1.5px solid var(--color-gray-300);
appearance: none;
-webkit-appearance: none;
background: var(--color-white);
transition: all 0.2s ease;
flex-shrink: 0;
}
.form-check input[type="checkbox"]:checked {
background: var(--color-primary);
border-color: var(--color-primary);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' viewBox='0 0 12 12'%3E%3Cpath fill='white' d='M10 3L4.5 8.5L2 6' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: 9px;
}
.form-check label {
font-size: 0.8125rem;
font-weight: 400;
color: #9ca3af;
cursor: pointer;
margin: 0;
line-height: 1.4;
flex: 1;
word-wrap: break-word;
}
.form-check label a {
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
}
.form-check label a:hover {
text-decoration: underline;
}
.btn-auth-submit {
width: 100%;
padding: 0.875rem;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #e55a00));
color: var(--color-white);
border: none;
border-radius: 10px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 0.25rem;
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.btn-auth-submit:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb, 255, 107, 0), 0.4);
}
.btn-auth-submit:active {
transform: translateY(0);
}
/* Modern Register Submit Button */
.btn-register-submit {
margin-top: 0.5rem;
padding: 0.875rem;
font-size: 0.9375rem;
border-radius: 12px;
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #e55a00));
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.btn-register-submit:hover {
box-shadow: 0 8px 24px rgba(var(--color-primary-rgb, 255, 107, 0), 0.45);
}
.auth-modal-footer {
margin-top: 1.5rem;
padding-top: 1.5rem;
border-top: 1px solid var(--color-gray-200);
text-align: center;
}
.auth-modal-footer p {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0.5rem 0;
}
.auth-modal-footer a {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
}
.auth-modal-footer a:hover {
text-decoration: underline;
}
/* Modern Footer */
.auth-modal-footer-modern {
margin-top: 1rem;
padding-top: 1rem;
text-align: center;
}
.auth-modal-footer-modern p {
font-size: 0.9375rem;
color: var(--color-text-secondary);
margin: 0;
}
.auth-modal-footer-modern a {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
.auth-modal-footer-modern a:hover {
color: var(--color-primary-dark, #e55a00);
text-decoration: underline;
}
/* Modern Register Modal Adjustments */
.register-modal-modern .auth-modal-body {
padding: 0.875rem 1.25rem 1.25rem;
}
.register-modal-modern .auth-form {
gap: 0.75rem;
}
.register-modal-modern .form-group:first-child {
margin-top: 0;
}
/* Mobile Responsive */
@media (max-width: 575px) {
.auth-modal {
max-width: 100%;
border-radius: 24px 24px 0 0;
max-height: 95vh;
}
.auth-modal-overlay {
padding: 0;
align-items: flex-end;
}
.auth-modal-header {
padding: 1.5rem 1.5rem 1rem;
}
.auth-modal-header h2 {
font-size: 1.5rem;
}
.auth-modal-header-modern {
padding: 1.25rem 1.5rem;
}
.auth-modal-header-modern h2 {
font-size: 1.375rem;
}
.auth-modal-header-modern .auth-modal-close {
right: 1.25rem;
}
.auth-modal-body {
padding: 1.25rem 1.5rem 1.5rem;
}
.register-modal-modern .auth-modal-body {
padding: 0.875rem 1rem 1rem;
}
.auth-form {
gap: 0.75rem;
}
.form-group {
gap: 0.25rem;
}
.form-group input {
padding: 0.5625rem 0.75rem;
font-size: 0.875rem;
}
.form-row {
grid-template-columns: 1fr;
}
.form-row-name {
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.form-row-password {
grid-template-columns: 1fr 1fr;
gap: 0.625rem;
}
.phone-code-selector {
min-width: 75px;
padding: 0.5625rem 0.625rem;
font-size: 0.8125rem;
}
.legal-links {
padding: 0.875rem;
}
.legal-links p {
font-size: 0.75rem;
}
.verification-code-group {
gap: 0.625rem;
}
.verification-code-input {
width: 50px;
height: 50px;
font-size: 1.25rem;
}
.btn-back-to-step1 {
top: -0.5rem;
left: -0.5rem;
font-size: 0.875rem;
}
.btn-back-to-step1 i {
font-size: 0.8125rem;
}
.verification-header {
margin-top: 2rem;
}
}
/* ========== REGISTER STEP 2 - VERIFICATION CODE ========== */
.register-step2 {
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
.btn-back-to-step1 {
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
gap: 0.5rem;
background: transparent;
border: none;
color: var(--color-text-primary);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
padding: 0.5rem 0;
transition: color 0.2s ease;
z-index: 10;
}
.btn-back-to-step1:hover {
color: var(--color-primary);
}
.btn-back-to-step1 i {
font-size: 0.875rem;
}
.verification-header {
text-align: center;
margin-top: 2.5rem;
}
.verification-header h3 {
font-size: 1.375rem;
font-weight: 700;
color: var(--color-text-primary);
margin: 0 0 0.75rem;
}
.verification-info {
font-size: 0.875rem;
color: var(--color-text-secondary);
line-height: 1.6;
margin: 0;
}
.verification-info span {
font-weight: 600;
color: var(--color-text-primary);
}
.verification-code-group {
display: flex;
justify-content: center;
gap: 0.75rem;
margin: 1rem 0;
}
.verification-code-input {
width: 60px;
height: 60px;
text-align: center;
font-size: 1.5rem;
font-weight: 700;
border: 2px solid var(--color-gray-300);
border-radius: 12px;
background: var(--color-white);
color: var(--color-text-primary);
transition: all 0.2s ease;
box-sizing: border-box;
}
.verification-code-input:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 255, 107, 0), 0.1);
}
.verification-code-input.error {
border-color: #ef4444;
background-color: #fef2f2;
}
.verification-code-input.success {
border-color: #10b981;
background-color: #f0fdf4;
}
.btn-verify-code {
margin-top: 0.5rem;
}
.verification-footer {
text-align: center;
margin-top: 0.5rem;
}
.verification-footer p {
font-size: 0.875rem;
color: var(--color-text-secondary);
margin: 0;
}
.verification-footer a {
color: var(--color-primary);
text-decoration: none;
font-weight: 600;
transition: color 0.2s ease;
}
.verification-footer a:hover {
color: var(--color-primary-dark, #e55a00);
text-decoration: underline;
}
/* Field Error Styles */
.field-error {
font-size: 0.75rem;
color: #ef4444;
margin-top: 0.375rem;
display: block;
}
.form-group input.error {
border-color: #ef4444;
background-color: #fef2f2;
}
.form-group input.error:focus {
border-color: #ef4444;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}
/* ========== PRODUCTS SLIDER FOR HOMEPAGE ========== */
/* Menu.html yapısına uygun ürün slider */
.products-section #popularProductsSlider {
position: relative;
overflow: hidden;
/* İçeriği gizle */
width: 100%;
margin: 2rem 0;
padding: 0 60px;
/* Butonlar için alan */
}
.products-section .products-slider-track {
display: flex;
transition: transform 0.5s ease;
will-change: transform;
align-items: stretch;
margin: 0;
padding: 0;
overflow: visible;
cursor: grab;
/* Mouse ile kaydırma için */
user-select: none;
/* Seçimi engelle */
}
.products-section .products-slider-track:active {
cursor: grabbing;
}
/* Ürün kartları - menu sayfasındaki stilleri kullan, sadece slider için width ve margin */
.products-section .products-slider-track .product-card {
flex-shrink: 0;
width: calc((100% - (1.5rem * 3)) / 4);
/* 4 kart, 3 gap */
margin-right: 1.5rem;
min-width: 0;
}
.products-section .products-slider-track .product-card:last-child {
margin-right: 0;
}
/* Slider navigasyon butonları - wrapper dışında */
.products-section .slider-nav-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 45px;
height: 45px;
background: #fff;
border: 1px solid #e9ecef;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 20;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.products-section .slider-nav-btn:hover {
background: var(--color-primary);
color: #fff;
border-color: var(--color-primary);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(255, 107, 0, 0.3);
}
.products-section #popularProductsSlider .slider-prev {
left: 10px;
}
.products-section #popularProductsSlider .slider-next {
right: 10px;
}
.products-section .slider-nav-btn i {
font-size: 0.875rem;
}
/* Responsive */
@media (max-width: 1199px) {
.products-section .products-slider-track .product-card {
width: calc((100% - (1.5rem * 2)) / 3);
/* 3 kart, 2 gap */
margin-right: 1.5rem;
}
.products-section #popularProductsSlider {
padding: 0 55px;
}
}
@media (max-width: 767px) {
.products-section .products-slider-track .product-card {
width: calc((100% - 1.5rem) / 2);
/* 2 kart, 1 gap */
margin-right: 1.5rem;
}
.products-section #popularProductsSlider {
padding: 0 50px;
}
.products-section .slider-nav-btn {
width: 40px;
height: 40px;
}
}
@media (max-width: 575px) {
.products-section .products-slider-track .product-card {
width: 100%;
/* 1 kart */
margin-right: 0;
}
.products-section #popularProductsSlider {
padding: 0 45px;
}
.products-section .slider-nav-btn {
width: 40px;
height: 40px;
}
}
/* ========== MODERN HEADER NAVIGATION ========== */
/* Remove icons from navigation */
.modern-header .nav-link {
display: inline-flex;
align-items: center;
padding: 0.25rem 0.625rem;
font-size: 0.8rem;
font-weight: 500;
color: var(--color-text-primary);
text-decoration: none;
border-radius: 6px;
transition: all 0.2s ease;
background: transparent;
}
.modern-header .nav-link:hover {
background: rgba(var(--color-primary-rgb, 255, 107, 0), 0.1);
color: var(--color-primary);
}
.modern-header .nav-link.active {
background: var(--color-primary);
color: var(--color-white);
font-weight: 600;
}
.modern-header .nav-link.active .dropdown-icon {
color: var(--color-white);
}
/* Desktop Dropdown Menu */
.nav-item.has-dropdown {
position: relative;
}
.nav-item.has-dropdown .dropdown-icon {
display: inline-block !important;
margin-left: 0.25rem;
font-size: 0.7rem;
transition: transform 0.3s ease;
}
.nav-item.has-dropdown:hover .dropdown-icon {
transform: rotate(180deg);
}
.nav-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
min-width: 200px;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all 0.3s ease;
z-index: 1000;
overflow: hidden;
}
.nav-item.has-dropdown:hover .nav-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.nav-dropdown-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
font-size: 0.875rem;
color: var(--color-text-primary);
text-decoration: none;
transition: all 0.2s ease;
border-bottom: 1px solid var(--color-gray-100);
}
.nav-dropdown-item-icon {
width: 1.125rem;
text-align: center;
flex-shrink: 0;
font-size: 0.875rem;
color: var(--color-text-secondary, #6b7280);
}
.nav-dropdown-item:hover .nav-dropdown-item-icon {
color: var(--color-primary, var(--color-primary));
}
.nav-dropdown-item:last-child {
border-bottom: none;
}
.nav-dropdown-item:hover {
background: var(--color-gray-50);
color: var(--color-primary);
padding-left: 1.25rem;
}
.nav-dropdown-item.active {
background: var(--color-primary-100, rgba(255, 107, 0, 0.12));
color: var(--color-primary, var(--color-primary));
font-weight: 600;
}
.nav-dropdown-item.active .nav-dropdown-item-icon {
color: var(--color-primary, var(--color-primary));
}
/* Modern Auth Buttons */
.modern-header .auth-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
}
.btn-auth {
padding: 0.3rem 0.875rem;
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
border: none;
cursor: pointer;
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
}
.btn-login {
background: transparent;
color: var(--color-text-primary);
border: 1.5px solid var(--color-gray-300);
}
.btn-login:hover {
background: var(--color-gray-50);
border-color: var(--color-gray-400);
transform: translateY(-1px);
}
.btn-register {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #e55a00));
color: var(--color-white);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.btn-register:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb, 255, 107, 0), 0.4);
}
.btn-register:active,
.btn-login:active {
transform: translateY(0);
}
/* Remove dropdown arrow */
.modern-header .dropdown-arrow,
.modern-header .nav-link .dropdown-arrow {
display: none;
}
/* Mobile Contact Button */
.mobile-contact-btn {
display: none;
width: 35px;
height: 35px;
align-items: center;
justify-content: center;
background: transparent;
border: 2px solid var(--color-gray-200);
border-radius: 12px;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.2s ease;
font-size: 0.875rem;
margin-right: 0.5rem;
}
.mobile-contact-btn:hover {
background: var(--color-gray-50);
border-color: var(--color-primary);
color: var(--color-primary);
}
@media (max-width: 991px) {
.mobile-contact-btn {
display: flex;
}
}
/* Mobile Contact Action Sheet (iOS Style) */
.mobile-contact-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.5);
z-index: 9999999;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease, visibility 0.3s ease;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.mobile-contact-overlay.active {
opacity: 1;
visibility: visible;
}
.mobile-contact-sheet {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
background: transparent;
border-radius: 20px 20px 0 0;
padding: 0.75rem 1rem;
padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
transform: translateY(100%);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
max-width: 100%;
}
.mobile-contact-overlay.active .mobile-contact-sheet {
transform: translateY(0);
}
.mobile-contact-sheet-header {
display: none;
}
.mobile-contact-options {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 0.75rem;
}
.mobile-contact-option {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: white;
border: none;
border-radius: 12px;
text-decoration: none;
color: #3b82f6;
font-size: 1rem;
font-weight: 500;
transition: all 0.2s ease;
cursor: pointer;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mobile-contact-option:active {
background: #f3f4f6;
transform: scale(0.98);
}
.mobile-contact-option i {
font-size: 1.25rem;
color: #4b5563;
width: 24px;
text-align: center;
}
.mobile-contact-option span {
flex: 1;
color: #3b82f6;
}
.mobile-contact-cancel {
width: 100%;
padding: 1rem;
background: white;
border: none;
border-radius: 12px;
color: #dc2626;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-top: 0.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.mobile-contact-cancel:active {
background: #fee2e2;
transform: scale(0.98);
}
/* Language Switcher */
.language-switcher {
position: relative;
}
.language-btn {
display: flex;
align-items: center;
gap: 0.375rem;
padding: 0.35rem 0.75rem;
background: transparent;
border: 1.5px solid var(--color-gray-300);
border-radius: 50px;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.2s ease;
min-width: 55px;
justify-content: center;
}
.language-btn:hover {
background: var(--color-gray-50);
border-color: var(--color-gray-400);
}
.language-current {
font-weight: 600;
}
.language-icon {
font-size: 0.65rem;
transition: transform 0.2s ease;
opacity: 0.6;
}
.language-switcher.active .language-icon {
transform: rotate(180deg);
}
.language-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.08);
min-width: 120px;
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.2s ease;
z-index: 1000;
overflow: hidden;
}
.language-switcher.active .language-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.language-option {
display: flex;
align-items: center;
gap: 0.5rem;
width: 100%;
padding: 0.625rem 1rem;
background: transparent;
border: none;
text-align: left;
cursor: pointer;
transition: background 0.2s ease;
font-size: 0.8rem;
}
.language-option:hover {
background: var(--color-gray-50);
}
.language-option.active {
background: var(--color-primary-50);
color: var(--color-primary);
}
.language-option.active .language-code {
font-weight: 700;
}
.language-code {
font-weight: 600;
min-width: 32px;
font-size: 0.75rem;
}
.language-name {
color: var(--color-text-primary);
font-weight: 500;
}
.language-option.active .language-name {
color: var(--color-primary);
font-weight: 600;
}
/* User Menu (when logged in) */
/* Profile Menu - New class names to avoid conflicts */
.modern-header .profile-menu-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
position: relative;
flex-shrink: 0;
margin: 0;
padding: 0;
}
/* Hide profile menu on mobile - only show in desktop */
@media (max-width: 991px) {
.modern-header .profile-menu-wrapper,
.profile-menu-wrapper {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
overflow: hidden !important;
position: absolute !important;
pointer-events: none !important;
}
}
.modern-header .profile-menu-btn {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 0.875rem;
background: var(--color-gray-50);
border: 1.5px solid var(--color-gray-200);
border-radius: 50px;
cursor: pointer;
transition: all 0.2s ease;
white-space: nowrap;
height: 36px;
margin: 0;
box-shadow: none;
transform: none;
color: var(--color-text-primary);
font-family: inherit;
font-size: 0.875rem;
}
.modern-header .profile-menu-btn:hover {
background: var(--color-gray-100);
border-color: var(--color-gray-300);
transform: none;
box-shadow: none;
}
.modern-header .profile-menu-avatar {
width: 28px;
height: 28px;
border-radius: 50%;
background: #6b7280;
color: var(--color-white);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8125rem;
flex-shrink: 0;
margin: 0;
font-weight: 500;
}
/* Baş harfler: 2 kelime → AÇ, 3 kelime → YEP */
.modern-header .profile-menu-avatar-initials {
font-size: 0.7rem;
font-weight: 600;
line-height: 1;
letter-spacing: -0.03em;
}
.modern-header .profile-menu-text {
font-size: 0.875rem;
font-weight: 500;
color: var(--color-text-primary);
white-space: nowrap;
flex-shrink: 0;
margin: 0;
line-height: 1rem;
}
.modern-header .profile-menu-arrow {
font-size: 0.75rem;
color: var(--color-text-secondary);
transition: transform 0.2s ease;
margin-left: 0.25rem;
}
.modern-header .profile-menu-btn.active .profile-menu-arrow,
.modern-header .profile-menu-wrapper:hover .profile-menu-arrow {
transform: rotate(180deg);
}
/* Profile Dropdown Menu */
.modern-header .profile-menu-dropdown {
position: absolute;
top: calc(100% + 0.75rem);
right: 0;
min-width: 220px;
background: var(--color-white);
border: 1px solid var(--color-gray-200);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
z-index: 1000;
overflow: hidden;
}
.modern-header .profile-menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
color: var(--color-text-primary);
text-decoration: none;
font-size: 0.9375rem;
transition: all 0.2s ease;
border: none;
background: transparent;
width: 100%;
cursor: pointer;
}
.modern-header .profile-menu-item i {
width: 18px;
text-align: center;
color: var(--color-text-secondary);
font-size: 0.875rem;
}
.modern-header .profile-menu-item:hover {
background: var(--color-gray-50);
color: var(--color-primary);
}
.modern-header .profile-menu-item:hover i {
color: var(--color-primary);
}
.modern-header .profile-menu-divider {
height: 1px;
background: var(--color-gray-200);
margin: 0.5rem 0;
}
.modern-header .profile-menu-item#logoutBtn {
color: #ef4444;
}
.modern-header .profile-menu-item#logoutBtn i {
color: #ef4444;
}
.modern-header .profile-menu-item#logoutBtn:hover {
background: #fef2f2;
color: #dc2626;
}
.modern-header .profile-menu-item#logoutBtn:hover i {
color: #dc2626;
}
/* Mobile Cart Button - Hidden on desktop */
.mobile-cart-btn {
display: none;
position: relative;
width: 35px;
height: 35px;
align-items: center;
justify-content: center;
background: transparent;
border: 2px solid var(--color-gray-200);
border-radius: 12px;
color: var(--color-primary);
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.1rem;
}
.mobile-cart-btn:hover {
background: var(--color-gray-50);
border-color: var(--color-primary);
color: var(--color-primary);
}
.mobile-cart-count {
position: absolute;
top: -6px;
right: -6px;
min-width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-primary);
color: white;
border-radius: 10px;
font-size: 0.65rem;
font-weight: 700;
padding: 0 4px;
border: 2px solid white;
}
/* Mobile Navigation - Remove icons */
@media (max-width: 991px) {
.mobile-nav-link {
padding: 0.75rem 1rem;
font-size: 0.9375rem;
font-weight: 500;
}
.mobile-nav-link.active {
background: var(--color-primary);
color: var(--color-white);
font-weight: 600;
}
.mobile-nav-link.active .mobile-nav-arrow {
color: var(--color-white);
opacity: 1;
}
/* Mobile Dropdown/Submenu */
.mobile-nav-item.has-submenu .mobile-nav-link {
display: flex;
align-items: center;
justify-content: space-between;
}
.mobile-nav-arrow {
font-size: 0.75rem;
transition: transform 0.3s ease;
opacity: 0.6;
}
.mobile-nav-item.has-submenu.active .mobile-nav-arrow {
transform: rotate(180deg);
}
.mobile-nav-submenu {
display: none;
flex-direction: column;
padding-left: 1rem;
margin-top: 0.25rem;
border-left: 2px solid var(--color-primary);
}
.mobile-nav-item.has-submenu.active .mobile-nav-submenu {
display: flex;
}
.mobile-nav-submenu-item {
padding: 0.625rem 1rem;
font-size: 0.875rem;
color: var(--color-text-secondary);
text-decoration: none;
transition: all 0.2s ease;
border-radius: 6px;
}
.mobile-nav-submenu-item:hover {
background: var(--color-gray-50);
color: var(--color-primary);
}
/* Desktop auth buttons - hidden on mobile */
.modern-header .auth-buttons {
display: none !important;
}
/* Hide language switcher on mobile header */
.language-switcher {
display: none !important;
}
/* Show mobile cart button on mobile */
.mobile-cart-btn {
display: flex !important;
}
/* Mobile Language Switcher */
.mobile-language-switcher {
position: relative;
padding: 0.075rem 0.61rem;
border-bottom: 0px solid var(--color-gray-200);
z-index: 100;
}
.mobile-language-btn {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
padding: 0.375rem 1rem;
background: var(--color-gray-50);
border: 1.5px solid var(--color-gray-300);
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.2s ease;
}
.mobile-language-btn:hover {
background: var(--color-gray-100);
border-color: var(--color-gray-400);
}
.mobile-language-current {
font-weight: 600;
}
.mobile-language-icon {
font-size: 0.7rem;
transition: transform 0.2s ease;
opacity: 0.6;
margin-left: 5px;
}
.mobile-language-switcher.active .mobile-language-icon {
transform: rotate(180deg);
}
.mobile-language-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
left: 1rem;
right: 1rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.08);
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.2s ease;
z-index: 10001;
overflow: hidden;
margin-top: 0.5rem;
}
.mobile-language-switcher.active .mobile-language-dropdown {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mobile-language-option {
display: flex;
align-items: center;
gap: 0.75rem;
width: 100%;
padding: 0.875rem 1rem;
background: transparent;
border: none;
text-align: left;
cursor: pointer;
transition: background 0.2s ease;
font-size: 0.875rem;
}
.mobile-language-option:hover {
background: var(--color-gray-50);
}
.mobile-language-option.active {
background: var(--color-primary-50);
color: var(--color-primary);
}
.mobile-language-option.active .mobile-language-code {
font-weight: 700;
}
.mobile-language-code {
font-weight: 600;
min-width: 36px;
font-size: 0.875rem;
}
.mobile-language-name {
color: var(--color-text-primary);
font-weight: 500;
}
.mobile-language-option.active .mobile-language-name {
color: var(--color-primary);
font-weight: 600;
}
}
/* Mobile Auth Dropdown */
.mobile-auth-dropdown {
position: relative;
display: block;
}
.mobile-auth-trigger {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--color-gray-50);
border: 1.5px solid var(--color-gray-200);
border-radius: 50%;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.2s ease;
font-size: 1rem;
}
.mobile-auth-trigger:hover,
.mobile-auth-trigger.active {
background: var(--color-primary);
color: var(--color-white);
border-color: var(--color-primary);
}
.mobile-auth-menu {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(0, 0, 0, 0.08);
min-width: 220px;
opacity: 0;
visibility: hidden;
transform: translateY(-5px);
transition: all 0.2s ease;
z-index: 1000;
overflow: hidden;
padding: 0.75rem;
}
.mobile-auth-dropdown.active .mobile-auth-menu {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.mobile-auth-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.5rem;
color: var(--color-text-primary);
text-decoration: none;
border-radius: 10px;
transition: all 0.2s ease;
font-weight: 500;
font-size: 0.9375rem;
margin-bottom: 0.5rem;
}
.mobile-auth-item:last-child {
margin-bottom: 0;
}
.mobile-auth-item.primary {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #e55a00));
color: var(--color-white);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.mobile-auth-item.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb, 255, 107, 0), 0.4);
}
.mobile-auth-item:not(.primary) {
background: transparent;
color: var(--color-text-primary);
border: 1.5px solid var(--color-gray-300);
}
.mobile-auth-item:not(.primary):hover {
background: var(--color-gray-50);
border-color: var(--color-gray-400);
transform: translateY(-1px);
}
.mobile-auth-btn {
flex: 1;
padding: 1rem 1.5rem;
border: none;
border-radius: 16px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
}
.mobile-auth-btn.primary {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #e55a00));
color: var(--color-white);
box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 255, 107, 0), 0.3);
}
.mobile-auth-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(var(--color-primary-rgb, 255, 107, 0), 0.4);
}
.mobile-auth-btn:not(.primary) {
background: transparent;
color: var(--color-text-primary);
border: 1.5px solid var(--color-gray-300);
}
.mobile-auth-btn:hover {
transform: translateY(-1px);
}
.mobile-auth-btn i {
display: none;
}
.header-logo .logo-image-wrapper {
display: flex;
align-items: center;
}
.header-logo .logo-image {
height: 20px;
width: auto;
display: block;
max-height: 50px;
}
.mobile-nav .logo-image {
height: 20px;
width: auto;
display: block;
}
/* Smaller screens */
@media (max-width: 575px) {
.modern-header .nav-links {
gap: 0.5rem;
}
.modern-header .nav-link {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.modern-header .auth-buttons {
display: none;
}
.mobile-auth-trigger {
width: 36px;
height: 36px;
font-size: 0.9rem;
}
.mobile-auth-menu {
min-width: 200px;
padding: 0.625rem;
}
.mobile-auth-item {
padding: 0.875rem 1.25rem;
font-size: 0.875rem;
margin-bottom: 0.375rem;
}
}
/* Desktop only - hide mobile dropdown */
@media (min-width: 992px) {
.mobile-auth-dropdown {
display: none !important;
}
.modern-header .auth-buttons {
display: flex !important;
}
/* Hide mobile language switcher on desktop */
.mobile-language-switcher {
display: none !important;
}
}
/* ========== MOBILE NAV AUTH SECTION ========== */
/* Yeni yapı: .mobile-nav .mobile-auth-section (index.html, menu.html) */
.mobile-nav .mobile-auth-section,
#mobileAuth,
.mobile-auth-section {
width: 100%;
padding: 1rem 0.5rem;
margin-top: 3.5rem;
display: flex !important;
gap: 0.75rem;
background: transparent;
}
/* Eski yapılar için genel stiller (diğer sayfalar) */
.mobile-nav-header .mobile-auth,
.mobile-user-info .mobile-auth,
.mobile-auth {
display: flex;
gap: 0.75rem;
padding: 1rem 0;
margin-top: 0.5rem;
}
.mobile-nav .mobile-auth-section .mobile-auth-btn {
flex: 1;
padding: 1rem 1.5rem !important;
border: none;
border-radius: 16px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
text-align: center;
display: flex !important;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.mobile-nav .mobile-auth-section .mobile-auth-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.mobile-nav .mobile-auth-section .mobile-auth-btn:hover::before {
left: 100%;
}
.mobile-nav .mobile-auth-section .mobile-auth-btn.primary {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #e55a00)) !important;
color: var(--color-white) !important;
box-shadow: 0 4px 16px rgba(var(--color-primary-rgb, 255, 107, 0), 0.35);
}
.mobile-nav .mobile-auth-section .mobile-auth-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(var(--color-primary-rgb, 255, 107, 0), 0.45);
}
.mobile-nav .mobile-auth-section .mobile-auth-btn.primary:active {
transform: translateY(0);
}
.mobile-nav .mobile-auth-section .mobile-auth-btn.secondary {
background: var(--color-white) !important;
color: var(--color-text-primary) !important;
border: 2px solid var(--color-gray-300) !important;
}
.mobile-nav .mobile-auth-section .mobile-auth-btn.secondary:hover {
background: var(--color-gray-50) !important;
border-color: var(--color-gray-400) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mobile-nav .mobile-auth-section .mobile-auth-btn.secondary:active {
transform: translateY(0);
}
/* Genel mobile-auth-btn stilleri (eski yapılar için) */
.mobile-auth-btn {
flex: 1;
padding: 1rem 1.5rem;
border: none;
border-radius: 16px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.mobile-auth-btn::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
transition: left 0.6s ease;
}
.mobile-auth-btn:hover::before {
left: 100%;
}
.mobile-auth-btn.primary {
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark, #e55a00));
color: var(--color-white);
box-shadow: 0 4px 16px rgba(var(--color-primary-rgb, 255, 107, 0), 0.35);
}
.mobile-auth-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 24px rgba(var(--color-primary-rgb, 255, 107, 0), 0.45);
}
.mobile-auth-btn.primary:active {
transform: translateY(0);
}
.mobile-auth-btn.secondary {
background: var(--color-white);
color: var(--color-text-primary);
border: 2px solid var(--color-gray-300);
}
.mobile-auth-btn.secondary:hover {
background: var(--color-gray-50);
border-color: var(--color-gray-400);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.mobile-auth-btn.secondary:active {
transform: translateY(0);
}
.mobile-auth-btn:not(.primary):not(.secondary) {
background: var(--color-white);
color: var(--color-text-primary);
border: 2px solid var(--color-gray-300);
}
.mobile-auth-btn i,
.mobile-auth-btn .fa,
.mobile-auth-btn .fas {
display: none !important;
}
@media (max-width: 575px) {
.mobile-nav .mobile-auth-section {
padding: 0.875rem 1.25rem;
margin-top: 5rem;
gap: 0.625rem;
}
.mobile-nav .mobile-auth-section .mobile-auth-btn {
padding: 0.3875rem 1.25rem !important;
font-size: 0.9375rem;
border-radius: 14px;
}
.mobile-auth {
gap: 0.625rem;
padding: 0.875rem;
}
.mobile-auth-btn {
padding: 0.875rem 1.25rem;
font-size: 0.9375rem;
border-radius: 14px;
}
}
/* ========== MOBILE NAV TOP BAR ========== */
.mobile-nav-top {
position: fixed;
top: 0;
left: 0;
right: 0;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.5rem;
background: var(--color-white);
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
z-index: 10000;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.mobile-nav-close {
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(0, 0, 0, 0.0);
border: 0px solid rgba(0, 0, 0, 0.1);
border-radius: 50%;
color: var(--color-text-primary);
cursor: pointer;
transition: all 0.3s ease;
font-size: 1.2rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.0);
}
.mobile-nav-close:hover {
background: rgba(0, 0, 0, 0.0);
transform: scale(1.1) rotate(90deg);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.0);
}
.mobile-nav-logo {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
color: var(--color-text-primary);
transition: all 0.2s ease;
}
.mobile-nav-logo:hover {
color: var(--color-primary);
transform: scale(1.05);
}
.mobile-nav-logo .logo-icon {
font-size: 1.5rem;
line-height: 1;
}
.mobile-nav-logo .brand-name {
font-size: 1.125rem;
font-weight: 700;
letter-spacing: -0.02em;
color: var(--color-text-primary);
}
@media (max-width: 575px) {
.mobile-nav-top {
padding: 0.2875rem 0.5rem;
}
.mobile-nav-close {
width: 30px;
height: 30px;
font-size: 1.35rem;
margin-right: 10px;
}
.mobile-nav-logo .logo-icon {
font-size: 1.375rem;
}
.mobile-nav-logo .brand-name {
font-size: 1rem;
}
}
/* ========== HERO SLIDER STYLES ========== */
.hero-slider-wrapper {
position: relative;
width: 100%;
height: 600px;
overflow: hidden;
margin: 0;
}
.hero-slider-track {
display: flex;
width: 100%;
height: 100%;
transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.hero-slide {
position: relative;
min-width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: #2c2c2c;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.hero-slide::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.2) 100%);
z-index: 1;
}
.hero-slide-content {
position: relative;
z-index: 2;
max-width: 1200px;
width: 100%;
padding: 0 2rem;
text-align: center;
color: var(--color-white);
}
.hero-slide-title {
font-size: 3.5rem;
font-weight: 800;
line-height: 1.2;
margin-bottom: 1.5rem;
text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
animation: slideInUp 0.8s ease-out;
}
.hero-slide-description {
font-size: 1.25rem;
line-height: 1.6;
margin-bottom: 2rem;
max-width: 700px;
margin-left: auto;
margin-right: auto;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
animation: slideInUp 0.8s ease-out 0.2s both;
}
.hero-slide-actions {
animation: slideInUp 0.8s ease-out 0.4s both;
}
.hero-slide-actions .btn {
font-size: 1.125rem;
padding: 1rem 2.5rem;
border-radius: 50px;
font-weight: 600;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
transition: all 0.3s ease;
}
.hero-slide-actions .btn:hover {
transform: translateY(-3px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
/* Navigation Buttons */
.hero-slider-nav {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 10;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.9);
border: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-text-primary);
font-size: 1.25rem;
transition: all 0.3s ease;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.hero-slider-nav:hover {
background: var(--color-white);
transform: translateY(-50%) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}
.hero-slider-prev {
left: 2rem;
}
.hero-slider-next {
right: 2rem;
}
/* Dots Indicator */
.hero-slider-dots {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
z-index: 10;
display: flex;
gap: 0.75rem;
align-items: center;
}
.hero-slider-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.5);
border: 2px solid rgba(255, 255, 255, 0.8);
cursor: pointer;
transition: all 0.3s ease;
padding: 0;
border: none;
}
.hero-slider-dot:hover {
background: rgba(255, 255, 255, 0.8);
transform: scale(1.2);
}
.hero-slider-dot.active {
background: var(--color-white);
width: 32px;
border-radius: 6px;
}
/* Animations */
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Responsive */
@media (max-width: 991px) {
.hero-slider-wrapper {
height: 500px;
}
.hero-slide-title {
font-size: 2.5rem;
}
.hero-slide-description {
font-size: 1.125rem;
}
.hero-slider-nav {
width: 40px;
height: 40px;
font-size: 1rem;
}
.hero-slider-prev {
left: 1rem;
}
.hero-slider-next {
right: 1rem;
}
}
@media (max-width: 767px) {
.hero-slider-wrapper {
height: 450px;
}
.hero-slide-content {
padding: 0 1.5rem;
}
.hero-slide-title {
font-size: 2rem;
margin-bottom: 1rem;
}
.hero-slide-description {
font-size: 1rem;
margin-bottom: 1.5rem;
}
.hero-slide-actions .btn {
font-size: 1rem;
padding: 0.875rem 2rem;
}
.hero-slider-nav {
width: 36px;
height: 36px;
font-size: 0.875rem;
}
.hero-slider-prev {
left: 0.75rem;
}
.hero-slider-next {
right: 0.75rem;
}
.hero-slider-dots {
bottom: 1.5rem;
}
}
@media (max-width: 575px) {
.hero-slider-wrapper {
height: 400px;
}
.hero-slide-title {
font-size: 1.75rem;
}
.hero-slide-description {
font-size: 0.9375rem;
}
.hero-slider-nav {
display: none;
}
}
/* ========== PROFILE PAGES - MODERN MOBILE-FIRST DESIGN ========== */
/* Profile Main Container */
.profile-main,
.orders-main,
.profile-edit-main,
.addresses-main {
min-height: calc(100vh - 200px);
padding-top: 80px;
/* Header için boşluk */
padding-bottom: 1rem;
background: #f8f9fa;
}
/* Profile Header */
.profile-header,
.orders-header,
.profile-edit-header,
.addresses-header {
margin-bottom: 2rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.profile-header h1,
.orders-header h1,
.profile-edit-header h1,
.addresses-header h1 {
font-size: 2rem;
font-weight: 700;
color: #111827;
margin: 0;
}
.profile-subtitle {
font-size: 1rem;
color: #6b7280;
margin: 0;
}
/* Orders Tabs */
.orders-tabs {
display: flex;
gap: 0.5rem;
border-bottom: 2px solid #e5e7eb;
}
.tab-btn {
padding: 0.75rem 1.5rem;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
color: #6b7280;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
margin-bottom: -2px;
}
.tab-btn:hover {
color: var(--color-primary);
}
.tab-btn.active {
color: var(--color-primary);
border-bottom-color: var(--color-primary);
}
/* Profile Grid */
.profile-grid,
.profile-edit-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 1.5rem;
}
/* Profile Card */
.profile-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.profile-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.profile-card-header {
padding: 1.5rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.profile-card-header h2 {
font-size: 1.25rem;
font-weight: 600;
color: #111827;
margin: 0;
}
.btn-edit {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: #f3f4f6;
color: #374151;
border-radius: 8px;
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.btn-edit:hover {
background: #e5e7eb;
color: #111827;
}
.profile-card-body {
padding: 1.5rem;
}
/* Profile Info Items */
.profile-info-item {
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
border-bottom: 1px solid #f3f4f6;
}
.profile-info-item:last-child {
border-bottom: none;
}
.info-label {
font-size: 0.875rem;
color: #6b7280;
font-weight: 500;
}
.info-value {
font-size: 0.9375rem;
color: #111827;
font-weight: 600;
}
/* Stats Grid */
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1.5rem;
}
.stat-item {
display: flex;
align-items: center;
gap: 1rem;
}
.stat-icon {
width: 48px;
height: 48px;
border-radius: 12px;
background: linear-gradient(135deg, var(--color-primary), #ff8533);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
flex-shrink: 0;
}
.stat-info {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.stat-value {
font-size: 1.5rem;
font-weight: 700;
color: #111827;
line-height: 1;
}
.stat-label {
font-size: 0.75rem;
color: #6b7280;
}
/* Quick Links */
.quick-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem;
background: #f9fafb;
border-radius: 12px;
text-decoration: none;
color: #374151;
transition: all 0.2s ease;
margin-bottom: 0.75rem;
}
.quick-link:last-child {
margin-bottom: 0;
}
.quick-link:hover {
background: #f3f4f6;
transform: translateX(4px);
}
.quick-link i:first-child {
width: 40px;
height: 40px;
border-radius: 10px;
background: linear-gradient(135deg, var(--color-primary), #ff8533);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
flex-shrink: 0;
}
.quick-link span {
flex: 1;
font-weight: 500;
}
.quick-link i:last-child {
color: #9ca3af;
font-size: 0.875rem;
}
/* Orders */
.orders-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.order-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
}
.order-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.order-header {
padding: 1.25rem 1.5rem;
background: #f9fafb;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.order-number {
display: flex;
gap: 0.5rem;
align-items: center;
}
.order-label {
font-size: 0.875rem;
color: #6b7280;
}
.order-value {
font-size: 0.9375rem;
font-weight: 600;
color: #111827;
}
.order-status {
padding: 0.375rem 0.875rem;
border-radius: 20px;
font-size: 0.8125rem;
font-weight: 600;
}
.order-status.status-preparing {
background: #fef3c7;
color: #92400e;
}
.order-status.status-delivered {
background: #d1fae5;
color: #065f46;
}
.order-status.status-completed {
background: #dbeafe;
color: #1e40af;
}
.order-body {
padding: 1.5rem;
}
.order-items {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1.5rem;
}
.order-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.75rem 0;
border-bottom: 1px solid #f3f4f6;
}
.order-item:last-child {
border-bottom: none;
}
.item-name {
flex: 1;
font-size: 0.9375rem;
color: #374151;
font-weight: 500;
}
.item-quantity {
font-size: 0.875rem;
color: #6b7280;
margin: 0 1rem;
}
.item-price {
font-size: 0.9375rem;
color: #111827;
font-weight: 600;
}
.order-info {
display: flex;
flex-direction: column;
gap: 0.75rem;
padding-top: 1.5rem;
border-top: 1px solid #e5e7eb;
}
.order-info-item {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.875rem;
color: #6b7280;
}
.order-info-item i {
width: 20px;
text-align: center;
color: #9ca3af;
}
.order-footer {
padding: 1.25rem 1.5rem;
background: #f9fafb;
border-top: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.order-total {
font-size: 1rem;
color: #374151;
}
.order-total strong {
color: var(--color-primary);
font-size: 1.125rem;
}
.order-eta {
font-size: 0.875rem;
color: #6b7280;
}
/* Addresses */
.addresses-header {
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.btn-primary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: linear-gradient(135deg, var(--color-primary), #ff8533);
color: #fff;
border: none;
border-radius: 12px;
font-size: 0.9375rem;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
}
.btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
}
.addresses-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
.address-card {
background: #fff;
border-radius: 16px;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: all 0.3s ease;
position: relative;
}
.address-card:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.address-card.is-default {
border: 2px solid var(--color-primary);
}
.default-badge {
position: absolute;
top: 1rem;
right: 1rem;
padding: 0.25rem 0.75rem;
background: var(--color-primary);
color: #fff;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 600;
}
.address-header {
padding: 1.25rem 1.5rem;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.address-header h3 {
font-size: 1.125rem;
font-weight: 600;
color: #111827;
margin: 0;
}
.address-actions {
display: flex;
gap: 0.5rem;
}
.btn-icon {
width: 36px;
height: 36px;
border-radius: 8px;
background: #f3f4f6;
border: none;
color: #6b7280;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
}
.btn-icon:hover {
background: #e5e7eb;
color: #111827;
}
.address-body {
padding: 1.5rem;
}
.address-recipient {
font-size: 1rem;
font-weight: 600;
color: #111827;
margin-bottom: 0.75rem;
}
.address-text {
font-size: 0.9375rem;
color: #374151;
line-height: 1.6;
margin-bottom: 0.5rem;
}
.address-location {
font-size: 0.875rem;
color: #6b7280;
margin-bottom: 0.75rem;
}
.address-phone {
font-size: 0.875rem;
color: #6b7280;
display: flex;
align-items: center;
gap: 0.5rem;
}
.address-footer {
padding: 1rem 1.5rem;
border-top: 1px solid #e5e7eb;
}
.btn-text {
background: none;
border: none;
color: var(--color-primary);
font-size: 0.875rem;
font-weight: 600;
cursor: pointer;
padding: 0;
transition: color 0.2s ease;
}
.btn-text:hover {
color: #e55a00;
}
/* Forms */
.profile-form {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.form-group {
display: flex;
gap: 0.5rem;
}
.form-group label {
font-size: 0.875rem;
font-weight: 500;
color: #374151;
}
.form-group input,
.form-group select,
.form-group textarea {
padding: 0.75rem 1rem;
border: 1.5px solid #e5e7eb;
border-radius: 10px;
font-size: 0.9375rem;
color: #111827;
background: #fff;
transition: all 0.2s ease;
font-family: inherit;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.1);
}
.form-group textarea {
resize: vertical;
min-height: 100px;
}
.form-check {
display: flex;
align-items: center;
gap: 0.75rem;
}
.form-check input[type="checkbox"] {
width: 20px;
height: 20px;
cursor: pointer;
}
.form-check label {
font-size: 0.9375rem;
color: #374151;
cursor: pointer;
}
/* Loading & Error States */
.profile-loading,
.orders-loading,
.addresses-loading {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
gap: 1rem;
}
.spinner {
width: 48px;
height: 48px;
border: 4px solid #f3f4f6;
border-top-color: var(--color-primary);
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.empty-state,
.error-message {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 2rem;
text-align: center;
gap: 1rem;
}
.empty-state i,
.error-message i {
font-size: 4rem;
color: #d1d5db;
}
.empty-state p,
.error-message p {
font-size: 1.125rem;
color: #6b7280;
margin: 0;
}
/* Address Form in SweetAlert */
.address-form {
width: 100%;
}
.swal2-textarea {
min-height: 80px;
resize: vertical;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.profile-main,
.orders-main,
.profile-edit-main,
.addresses-main {
padding: 1rem 0;
}
.profile-header h1,
.orders-header h1,
.profile-edit-header h1,
.addresses-header h1 {
font-size: 1.5rem;
}
.addresses-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.addresses-header .btn-primary {
width: 100%;
justify-content: center;
}
.profile-grid,
.profile-edit-grid {
grid-template-columns: 1fr;
}
.stats-grid {
grid-template-columns: 1fr;
}
.addresses-grid {
grid-template-columns: 1fr;
}
.form-row {
grid-template-columns: 1fr;
}
.order-footer {
flex-direction: column;
gap: 0.75rem;
align-items: flex-start;
}
.order-items {
gap: 0.5rem;
}
.order-item {
flex-wrap: wrap;
}
.order-info {
gap: 0.5rem;
}
}
/* Mobile Profile Menu - Direct Links (No Dropdown) */
.mobile-profile-menu-links {
width: 100%;
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-bottom: 1rem;
padding: 0.5rem 0;
}
.mobile-profile-link {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.25rem;
background: #fff;
border: none;
border-radius: 16px;
color: #374151;
text-decoration: none;
font-size: 0.9375rem;
font-weight: 600;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
position: relative;
overflow: hidden;
}
.mobile-profile-link::before {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 4px;
background: var(--color-primary);
transform: scaleY(0);
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-profile-link:hover {
background: linear-gradient(135deg, #fff 0%, #fef7f0 100%);
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.15);
transform: translateX(4px);
}
.mobile-profile-link:hover::before {
transform: scaleY(1);
}
.mobile-profile-link i {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--color-primary), #ff8533);
color: #fff;
font-size: 1.125rem;
border-radius: 12px;
flex-shrink: 0;
box-shadow: 0 2px 8px rgba(255, 107, 0, 0.25);
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.mobile-profile-link:hover i {
transform: scale(1.1) rotate(5deg);
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.35);
}
.mobile-profile-link span {
flex: 1;
text-align: left;
color: #111827;
font-weight: 600;
}
.mobile-profile-link::after {
content: '\f054';
font-family: 'Font Awesome 6 Free';
font-weight: 900;
color: #9ca3af;
font-size: 0.875rem;
transition: all 0.3s ease;
}
.mobile-profile-link:hover::after {
color: var(--color-primary);
transform: translateX(4px);
}
.mobile-profile-divider {
height: 1px;
background: linear-gradient(90deg, transparent 0%, #e5e7eb 20%, #e5e7eb 80%, transparent 100%);
margin: 0.75rem 0;
}
.mobile-profile-link.mobile-profile-logout {
color: #ef4444;
background: #fff;
}
.mobile-profile-link.mobile-profile-logout i {
background: linear-gradient(135deg, #ef4444, #f87171);
box-shadow: 0 2px 8px rgba(239, 68, 68, 0.25);
}
.mobile-profile-link.mobile-profile-logout:hover {
background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}
.mobile-profile-link.mobile-profile-logout::before {
background: #ef4444;
}
.mobile-profile-link.mobile-profile-logout span {
color: #ef4444;
}
.mobile-profile-link.mobile-profile-logout:hover i {
transform: scale(1.1) rotate(-5deg);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.35);
}
.mobile-profile-link.mobile-profile-logout::after {
color: #ef4444;
}
/* Mobile Account Nav Content - Separate from main nav */
@media (max-width: 991px) {
.mobile-nav-account-content {
padding: 0.5rem;
padding-top: 3.5rem;
padding-bottom: 1rem;
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
border-top: 2px solid #e5e7eb;
border-bottom: 2px solid #e5e7eb;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.mobile-nav-account-content .mobile-nav-links {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 0.5rem;
}
.mobile-nav-account-content .mobile-account-nav-item {
margin: 0;
}
/* Logout button spans full width */
.mobile-nav-account-content .mobile-nav-item {
grid-column: 1 / -1;
margin: 0;
}
.mobile-nav-account-content .mobile-nav-link {
display: flex;
align-items: center;
justify-content: start;
padding: 0.3rem 0.525rem;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 12px;
color: #374151;
text-decoration: none;
font-size: 0.9375rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
margin-bottom: 0rem;
}
.mobile-nav-account-content .mobile-nav-link:hover {
background: linear-gradient(135deg, #fff 0%, #fef7f0 100%);
border-color: var(--color-primary);
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(255, 107, 0, 0.15);
}
.mobile-nav-account-content .mobile-nav-link i {
display: inline-block !important;
margin-right: 0.75rem;
font-size: 1.125rem;
color: var(--color-primary);
width: 20px;
text-align: center;
}
/* Exclude chevron arrow from icon styling */
.mobile-nav-account-content .mobile-nav-link .mobile-nav-arrow {
display: inline-block !important;
}
.mobile-nav-account-content .mobile-nav-link .mobile-nav-arrow {
color: #9ca3af;
font-size: 0.875rem;
margin-left: auto;
transition: transform 0.3s ease;
}
.mobile-nav-account-content .mobile-account-nav-item.has-submenu:hover .mobile-nav-arrow {
transform: rotate(180deg);
}
/* Logout button special styling */
.mobile-nav-account-content .mobile-nav-item .profile-menu-item {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: #fff;
border: 1px solid #fee2e2;
border-radius: 12px;
color: #ef4444;
text-decoration: none;
font-size: 0.9375rem;
font-weight: 600;
transition: all 0.3s ease;
box-shadow: 0 1px 3px rgba(239, 68, 68, 0.08);
width: 100%;
}
.mobile-nav-account-content .mobile-nav-item .profile-menu-item:hover {
background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
border-color: #fecaca;
color: #dc2626;
transform: translateX(4px);
box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}
.mobile-nav-account-content .mobile-nav-item .profile-menu-item i {
color: #ef4444;
font-size: 1.125rem;
width: 20px;
text-align: center;
}
.mobile-nav-account-content .mobile-nav-item .profile-menu-item:hover i {
transform: scale(1.1);
}
.mobile-nav-account-content .mobile-account-nav-text {
flex: 1;
text-align: left;
}
}
/* =========================
YP PROFIL – CLEAN WHITE
========================= */
.yp-prof {
font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
color: #0f172a;
}
/* ---------- TOP GRID ---------- */
.yp-prof__topGrid {
display: grid;
grid-template-columns: 380px 1fr;
gap: 16px;
margin-bottom: 24px;
}
@media(max-width:768px) {
.yp-prof__topGrid {
grid-template-columns: 1fr;
}
}
/* ---------- LEGACY PROFILE ---------- */
.yp-prof__legacyProfile {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 20px 16px;
text-align: center;
height: max-content;
}
/* AVATAR – Fotoğraf, baş harfler (AÇ, YEP) veya ikon */
.yp-prof__avatar {
width: 60px;
height: 60px;
border-radius: 50%;
border: 3px solid #6b7280;
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
background: #6b7280;
}
.yp-prof__avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
/* Baş harfler: 2 kelime → AÇ, 3 kelime → YEP */
.yp-prof__avatar-initials {
font-size: 1.3rem;
font-weight: 700;
color: #fff;
letter-spacing: -0.02em;
line-height: 1;
}
.yp-prof__avatar i {
font-size: 42px;
color: #6b7280;
}
.yp-prof__empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.yp-prof__name {
margin: 12px 0 4px;
font-size: 16px;
font-weight: 700;
}
.yp-prof__mail,
.yp-prof__phone {
margin: 2px 0;
font-size: 13px;
color: #64748b;
}
.yp-prof__actions {
display: flex;
gap: 8px;
justify-content: center;
margin-top: 14px;
margin-bottom: 30px;
}
.yp-prof__actionBtn {
padding: 8px 12px;
font-size: 13px;
border-radius: 8px;
text-decoration: none;
color: #fff;
white-space: nowrap;
}
.yp-prof__actionBtn.primary {
background: #0ea5e9;
}
.yp-prof__actionBtn.gray {
background: #6b7280;
}
/* ---------- ORDERS SIDE ---------- */
.yp-prof__orders {
display: grid;
gap: 16px;
}
/* ---------- PANEL ---------- */
.yp-prof__panel {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
}
.yp-prof__panelHead {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 14px;
border-bottom: 1px solid #f1f5f9;
}
.yp-prof__panelHead h4 {
margin: 0;
font-size: 14.5px;
font-weight: 700;
}
.yp-prof__smallBtn {
font-size: 12px;
padding: 6px 10px;
background: #0ea5e9;
color: #fff;
border-radius: 8px;
text-decoration: none;
}
/* ---------- EMPTY STATE ---------- */
.yp-prof__empty {
text-align: center;
padding: 26px 16px;
color: #64748b;
}
.yp-prof__empty p {
margin: 10px 0 12px;
font-size: 14px;
}
.yp-prof__menuBtn {
display: inline-block;
padding: 8px 16px;
background: #16a34a;
color: #fff;
border-radius: 20px;
font-size: 13px;
text-decoration: none;
}
/* ---------- TABLE ---------- */
.yp-prof__table {
padding: 10px 14px;
}
.yp-prof__table .row {
display: grid;
grid-template-columns: 1.2fr 1fr 1.2fr .8fr;
gap: 8px;
font-size: 13px;
padding: 10px 0;
border-top: 1px solid #f1f5f9;
}
.yp-prof__table .row.head {
font-weight: 700;
border-top: none;
color: #475569;
}
.yp-prof__table .cancel {
color: #ef4444;
font-weight: 600;
}
/* ---------- SHORTCUTS GRID ---------- */
.yp-prof__grid {
margin-top: 8px;
}
/* ---------- SHORTCUT LIST ---------- */
.yp-prof__quickList {
border-radius: 14px;
padding: 0px;
margin-top: 0px;
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
box-sizing: border-box;
}
.yp-prof__quick {
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 12px;
border-radius: 12px;
border: 1px solid #e5e7eb;
background: #f8fafc;
text-decoration: none;
color: #0f172a;
transition: all 0.2s ease;
width: 100%;
box-sizing: border-box;
min-width: 0;
}
.yp-prof__quick:hover {
background: #fff;
border-color: #0ea5e9;
box-shadow: 0 2px 8px rgba(14, 165, 233, 0.1);
transform: translateY(-2px);
}
.yp-prof__qLeft {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
flex: 1;
}
.yp-prof__qIco {
width: 40px;
height: 40px;
border-radius: 12px;
display: flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
color: #334155;
}
.yp-prof__qIco svg {
width: 20px;
height: 20px;
display: block;
flex-shrink: 0;
}
.yp-prof__qIco--green {
background: #ecfdf5;
color: #16a34a;
}
.yp-prof__qIco--red {
background: #fef2f2;
color: #ef4444;
}
.yp-prof__qText {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
flex: 1;
overflow: hidden;
}
.yp-prof__qText h5 {
margin: 0;
font-size: 13.5px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.yp-prof__qText span {
font-size: 11.5px;
color: #64748b;
line-height: 1.3;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.yp-prof__chev {
flex-shrink: 0;
margin-left: 8px;
}
.yp-prof__chev svg {
width: 18px;
height: 18px;
color: #94a3b8;
}
/* =========================
PROFIL EDIT PAGE
========================= */
.yp-prof-edit {
width: 100%;
max-width: 100%;
margin: 0;
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
padding: 20px 16px;
text-align: center;
box-sizing: border-box;
}
.yp-prof__sub {
font-size: 13px;
color: #64748b;
margin: -4px 0 16px;
}
/* FORM */
.yp-prof-edit__form {
display: grid;
gap: 14px;
text-align: left;
}
.yp-prof-edit__field label {
display: block;
font-size: 12.5px;
color: #475569;
margin-bottom: 6px;
font-weight: 600;
}
.yp-prof-edit__field input {
width: 100%;
padding: 10px 12px;
border-radius: 10px;
border: 1px solid #e5e7eb;
font-size: 0.8rem;
outline: none;
}
.yp-prof-edit__field input:focus {
border-color: #0ea5e9;
}
/* PHONE CHANGE BUTTON (BILGILERIM) */
.yp-prof-edit__phoneWrap {
position: relative;
}
.yp-prof-edit__phoneWrap input {
padding-right: 92px;
}
.yp-prof-edit__phoneBtn {
position: absolute;
right: 10px;
top: 50%;
transform: translateY(-50%);
padding: 7px 12px;
border-radius: 999px;
border: 1px solid #e5e7eb;
background: #f8fafc;
font-size: 12px;
font-weight: 600;
color: #0f172a;
cursor: pointer;
white-space: nowrap;
}
.yp-prof-edit__phoneBtn:hover {
background: #e5f0ff;
border-color: #bfdbfe;
}
/* ACTIONS */
.yp-prof-edit__actions {
display: flex;
gap: 10px;
margin-top: 8px;
}
.yp-prof-edit__actions .yp-prof__actionBtn {
flex: 1;
text-align: center;
border: none;
cursor: pointer;
}
/* =====================
ORDERS PAGE
===================== */
.yp-orders__top {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 14px;
}
.yp-orders__top h3 {
margin: 0;
font-size: 18px;
font-weight: 700;
}
.yp-orders__top input {
padding: 8px 12px;
border-radius: 10px;
border: 1px solid #e5e7eb;
font-size: 14px;
width: 220px;
}
/* TABS */
.yp-orders__tabs {
display: flex;
gap: 8px;
margin-bottom: 14px;
}
.yp-orders__tabs button {
flex: 1;
padding: 10px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
font-size: 14px;
cursor: pointer;
}
.yp-orders__tabs button.active {
background: #0ea5e9;
color: #fff;
border-color: #0ea5e9;
}
/* LIST */
.yp-orders__list {
display: none;
flex-direction: column;
gap: 10px;
}
.yp-orders__list.active {
display: flex;
}
/* ORDER CARD */
.yp-order-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border: 1px solid #e5e7eb;
border-radius: 14px;
background: #fff;
}
.yp-order-icon {
width: 48px;
height: 48px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
}
/* STATES */
.preparing .yp-order-icon {
background: #fff7ed;
animation: pulse 1.5s infinite;
}
.onway .yp-order-icon {
background: #ecfeff;
animation: move 1s infinite alternate;
}
.completed .yp-order-icon {
background: #ecfdf5;
}
.yp-order-info {
flex: 1;
}
.yp-order-info strong {
display: block;
font-size: 14px;
}
.yp-order-info span {
font-size: 13px;
color: #475569;
}
.yp-order-info small {
display: block;
font-size: 12px;
color: #64748b;
}
.yp-order-actions a {
font-size: 13px;
color: #0ea5e9;
text-decoration: none;
}
/* ANIMATIONS */
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.08);
}
100% {
transform: scale(1);
}
}
@keyframes move {
from {
transform: translateX(0);
}
to {
transform: translateX(4px);
}
}
/* =====================
ORDER DETAIL TOGGLE
===================== */
.yp-order-details {
width: 100%;
margin-top: 10px;
border-top: 1px dashed #e5e7eb;
padding-top: 10px;
display: none;
}
.yp-order-card.open .yp-order-details {
display: block;
}
/* PRODUCTS */
.yp-order-products {
display: flex;
flex-direction: column;
gap: 10px;
}
.yp-product {
display: flex;
align-items: center;
gap: 10px;
}
.yp-product img {
width: 54px;
height: 54px;
border-radius: 10px;
object-fit: cover;
border: 1px solid #e5e7eb;
}
.yp-product div {
flex: 1;
}
.yp-product strong {
display: block;
font-size: 13.5px;
}
.yp-product span {
font-size: 12.5px;
color: #64748b;
}
.yp-product b {
font-size: 13.5px;
}
/* SUMMARY */
.yp-order-summary {
margin-top: 12px;
border-top: 1px solid #f1f5f9;
padding-top: 10px;
}
.yp-order-summary div {
display: flex;
justify-content: space-between;
font-size: 13px;
margin-bottom: 6px;
}
.yp-order-summary .total {
font-weight: 700;
font-size: 14px;
}
.yp-order-card {
display: flex;
flex-wrap: wrap;
gap: 12px;
}
.yp-order-icon,
.yp-order-info,
.yp-order-actions {
flex: 0 0 auto;
}
.yp-order-info {
flex: 1;
}
/* Detay her zaman alta */
.yp-order-details {
flex-basis: 100%;
width: 100%;
margin-top: 8px;
padding-top: 10px;
border-top: 1px dashed #e5e7eb;
}
/* =====================
ADDRESSES PAGE
===================== */
.yp-addr__top {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-bottom: 12px;
}
.yp-addr__top h3 {
margin: 0;
font-size: 18px;
font-weight: 800;
}
.yp-addr__topRight {
display: flex;
gap: 10px;
align-items: center;
}
.yp-addr__topRight input {
width: 260px;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid #e5e7eb;
font-size: 14px;
}
.yp-addr__addBtn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 9px 12px;
border-radius: 10px;
background: #0ea5e9;
color: #fff;
text-decoration: none;
font-size: 13px;
font-weight: 700;
white-space: nowrap;
}
/* Filters */
.yp-addr__filters {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin: 10px 0 14px;
}
.yp-addr__chip {
border: 1px solid #e5e7eb;
background: #fff;
border-radius: 999px;
padding: 8px 12px;
font-size: 13px;
cursor: pointer;
color: #334155;
}
.yp-addr__chip.is-active {
background: #eff6ff;
border-color: #93c5fd;
color: #1d4ed8;
font-weight: 700;
}
.yp-addr__list {
display: flex;
flex-direction: column;
gap: 12px;
}
/* Card */
.yp-addr__card {
background: #fff;
border: 1px solid #e5e7eb;
border-radius: 14px;
overflow: hidden;
}
.yp-addr__head {
padding: 12px 14px;
border-bottom: 1px solid #f1f5f9;
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.yp-addr__titleWrap {
min-width: 0;
}
.yp-addr__badgeDefault {
display: inline-block;
font-size: 12px;
font-weight: 800;
color: #16a34a;
background: #ecfdf5;
border: 1px solid #bbf7d0;
padding: 4px 8px;
border-radius: 999px;
margin-bottom: 8px;
}
.yp-addr__title {
margin: 0;
font-size: 15px;
font-weight: 900;
display: flex;
align-items: center;
gap: 8px;
}
.yp-addr__icon {
width: 28px;
height: 28px;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
background: #f1f5f9;
font-size: 16px;
}
.yp-addr__icon.home {
background: #fef2f2;
}
.yp-addr__icon.work {
background: #eff6ff;
}
.yp-addr__icon.other {
background: #f8fafc;
}
.yp-addr__meta {
margin: 6px 0 0;
color: #64748b;
font-size: 13px;
}
/* Header actions */
.yp-addr__headActions {
display: flex;
gap: 8px;
flex: 0 0 auto;
}
.yp-addr__iconBtn {
width: 36px;
height: 36px;
border-radius: 10px;
border: 1px solid #e5e7eb;
background: #fff;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
}
.yp-addr__iconBtn:hover {
background: #f8fafc;
}
.yp-addr__iconBtn.danger {
border-color: #fecaca;
background: #fff;
}
.yp-addr__iconBtn.danger:hover {
background: #fef2f2;
}
/* Body */
.yp-addr__body {
padding: 12px 14px 14px;
}
.yp-addr__line {
margin: 0 0 10px;
font-size: 13.5px;
color: #0f172a;
}
.yp-addr__kv {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px 12px;
margin-top: 8px;
}
.yp-addr__kv div {
border: 1px solid #f1f5f9;
background: #fbfdff;
border-radius: 12px;
padding: 10px;
}
.yp-addr__kv span {
display: block;
font-size: 12px;
color: #64748b;
margin-bottom: 4px;
}
.yp-addr__kv b {
font-size: 13px;
color: #0f172a;
}
.yp-addr__kv .wide {
grid-column: 1 / -1;
}
/* Buttons */
.yp-addr__actions {
margin-top: 12px;
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.yp-addr__btn {
border: 1px solid #e5e7eb;
background: #fff;
padding: 9px 12px;
border-radius: 10px;
font-size: 13px;
cursor: pointer;
text-decoration: none;
color: #0f172a;
}
.yp-addr__btn:hover {
background: #f8fafc;
}
.yp-addr__btn.primary {
background: #0ea5e9;
border-color: #0ea5e9;
color: #fff;
font-weight: 700;
}
.yp-addr__btn.primary:hover {
background: #0284c7;
}
/* Empty */
.yp-addr__empty {
border: 1px dashed #e5e7eb;
border-radius: 14px;
padding: 22px;
text-align: center;
color: #64748b;
background: #fff;
}
.yp-addr__emptyIcon {
font-size: 34px;
margin-bottom: 8px;
}
/* Mobile improvements */
@media(max-width:768px) {
.yp-addr__top {
flex-direction: column;
align-items: stretch;
}
.yp-addr__topRight {
width: 100%;
}
.yp-addr__topRight input {
width: 100%;
flex: 1;
}
.yp-addr__addBtn {
display: none;
/* mobilde altta sabit CTA var */
}
.yp-addr__kv {
grid-template-columns: 1fr;
}
}
/* Mobile fixed CTA */
.yp-addr__mobileCta {
display: none;
}
@media(max-width:768px) {
.yp-addr__mobileCta {
display: block;
position: sticky;
bottom: 0;
padding: 12px 0 0;
background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 40%);
margin-top: 10px;
}
.yp-addr__mobileBtn {
display: block;
width: 100%;
text-align: center;
padding: 12px 14px;
border-radius: 12px;
background: #0ea5e9;
color: #fff;
text-decoration: none;
font-weight: 800;
}
}
/* =====================
MODAL
===================== */
.yp-modal {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
}
.yp-modal.active {
display: block;
}
.yp-modal__overlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .45);
}
.yp-modal__box {
position: relative;
background: #fff;
width: 100%;
max-width: 480px;
margin: 40px auto;
border-radius: 16px;
overflow: hidden;
animation: modalUp .25s ease;
}
@keyframes modalUp {
from {
transform: translateY(20px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
.yp-modal__head {
padding: 14px 16px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
}
.yp-modal__head h4 {
margin: 0;
font-size: 16px;
font-weight: 800;
}
.yp-modal__close {
font-size: 22px;
background: none;
border: none;
cursor: pointer;
}
/* FORM */
.yp-modal__body {
padding: 16px;
}
.yp-form__group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 12px;
}
.yp-form__group label {
font-size: 12.5px;
color: #475569;
font-weight: 600;
}
.yp-form__group input,
.yp-form__group textarea,
.yp-form__group select {
border: 1px solid #e5e7eb;
border-radius: 10px;
padding: 10px 12px;
font-size: 14px;
resize: none;
}
.yp-form__group input:focus,
.yp-form__group textarea:focus,
.yp-form__group select:focus {
border-color: #0ea5e9;
outline: none;
}
.yp-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media(max-width:480px) {
.yp-modal__box {
margin: 0;
border-radius: 16px 16px 0 0;
position: absolute;
bottom: 0;
}
.yp-form__row {
grid-template-columns: 1fr;
}
}
/* ACTIONS */
.yp-form__actions {
display: flex;
gap: 10px;
margin-top: 16px;
}
.yp-btn {
flex: 1;
padding: 12px;
border-radius: 30px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: none;
}
.yp-btn.primary {
background: #0ea5e9;
color: #fff;
}
.yp-btn.ghost {
background: #f1f5f9;
color: #0f172a;
}
/* =====================
FULLSCREEN ADDRESS MODAL
===================== */
.yp-modal--full {
position: fixed;
inset: 0;
background: #fff;
z-index: 999999;
display: none;
}
.yp-modal--full.active {
display: block;
}
.yp-modal--full .yp-modal__box {
height: 100%;
display: flex;
flex-direction: column;
}
.yp-modal--full .yp-modal__head {
padding: 14px 16px;
border-bottom: 1px solid #e5e7eb;
display: flex;
justify-content: space-between;
align-items: center;
flex: 0 0 auto;
}
.yp-modal--full .yp-modal__head h4 {
margin: 0;
font-size: 17px;
font-weight: 800;
}
.yp-modal--full .yp-modal__close {
font-size: 24px;
background: none;
border: none;
cursor: pointer;
}
.yp-modal--full .yp-modal__body {
padding: 16px;
overflow-y: auto;
flex: 1;
}
/* FORM */
.yp-form__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
@media(max-width:640px) {
.yp-form__row {
grid-template-columns: 1fr;
}
}
.yp-form__group {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 14px;
}
.yp-form__group label {
font-size: 13px;
font-weight: 700;
color: #475569;
}
.yp-form__group label span {
color: #ef4444;
}
.yp-form__group input,
.yp-form__group select,
.yp-form__group textarea {
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 10px 12px;
font-size: 14px;
background: #fff;
}
.yp-form__group textarea {
resize: none;
}
.yp-form__group input:focus,
.yp-form__group select:focus,
.yp-form__group textarea:focus {
border-color: #0ea5e9;
outline: none;
}
/* ACTIONS */
.yp-form__actions {
position: sticky;
bottom: 0;
background: #fff;
padding: 12px 0 4px;
display: flex;
gap: 10px;
border-top: 1px solid #e5e7eb;
}
.yp-btn {
flex: 1;
padding: 14px;
border-radius: 30px;
font-size: 15px;
font-weight: 800;
border: none;
cursor: pointer;
}
.yp-btn.primary {
background: #0ea5e9;
color: #fff;
}
.yp-btn.ghost {
background: #f1f5f9;
color: #0f172a;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.profile-main,
.orders-main,
.profile-edit-main,
.addresses-main {
padding-top: 4rem;
}
}
/* Hide desktop profile menu on mobile */
@media (max-width: 991px) {
.profile-menu-wrapper {
display: none !important;
}
}