/* ═══════════════════════════════════════════════════
   Seyri Bahçe — Seaside Garden Premium Theme
   Colors: Ocean Teal + Seafoam + Gold + Cream
   ═══════════════════════════════════════════════════ */

:root {
    --primary: #1B6B6D;
    --primary-light: #5BA8A0;
    --primary-dark: #145252;
    --secondary: #D4A853;
    --secondary-light: #E8C97A;
    --bg: #FAFAF7;
    --bg-alt: #F0F5F3;
    --bg-warm: #FFF9F0;
    --surface: #FFFFFF;
    --text: #1a2f3a;
    --text-light: #5a7282;
    --text-muted: #8fa3b0;
    --border: #e2e8e5;
    --border-light: #f0f3f2;
    --shadow-sm: 0 2px 8px rgba(27,107,109,0.06);
    --shadow-md: 0 8px 30px rgba(27,107,109,0.08);
    --shadow-lg: 0 16px 50px rgba(27,107,109,0.12);
    --radius: 16px;
    --radius-sm: 10px;
    --radius-lg: 24px;
    --primary-rgb: 27,107,109;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }

/* ─── Typography ─── */
h1,h2,h3,h4 { font-family:'Playfair Display',serif; }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width:6px; }
::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--primary-light); border-radius:3px; }

/* ─── Navigation ─── */
.navbar { position:fixed; top:0; left:0; right:0; z-index:100; padding:16px 0; transition:all 0.4s; background:transparent; }
.navbar.scrolled { background:rgba(255,255,255,0.95); backdrop-filter:blur(20px); padding:10px 0; box-shadow:0 2px 20px rgba(0,0,0,0.06); }
.nav-container { max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; padding:0 24px; }
.nav-logo { font-family:'Playfair Display',serif; font-size:26px; font-weight:800; color:var(--primary-dark); text-decoration:none; display:flex; align-items:center; gap:8px; }
.nav-logo img { height:44px; border-radius:8px; }
.nav-logo span { color:var(--secondary); }
.nav-logo-text { font-family:'Playfair Display',serif; font-size:22px; font-weight:800; color:var(--primary-dark); }
.nav-logo-text span { color:var(--secondary); }
.nav-links { display:flex; gap:32px; list-style:none; }
.nav-links a { color:var(--text); text-decoration:none; font-size:14px; font-weight:500; transition:color 0.3s; position:relative; }
.nav-links a:hover { color:var(--primary); }
.nav-links a::after { content:''; position:absolute; bottom:-4px; left:0; right:0; height:2px; background:var(--primary); transform:scaleX(0); transition:transform 0.3s; }
.nav-links a:hover::after { transform:scaleX(1); }
.nav-cta { background:var(--primary); color:#fff; padding:10px 24px; border-radius:50px; text-decoration:none; font-size:14px; font-weight:600; transition:all 0.3s; border:none; cursor:pointer; }
.nav-cta:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.mobile-toggle { display:none; background:none; border:none; color:var(--text); font-size:24px; cursor:pointer; }
.mobile-menu { display:none; position:fixed; inset:0; background:rgba(255,255,255,0.98); backdrop-filter:blur(20px); z-index:99; flex-direction:column; align-items:center; justify-content:center; gap:28px; }
.mobile-menu.active { display:flex; }
.mobile-menu a { color:var(--text); text-decoration:none; font-size:20px; font-weight:600; }
.mobile-menu a:hover { color:var(--primary); }
.mobile-menu .close-btn { position:absolute; top:24px; right:24px; background:none; border:none; color:var(--text); font-size:28px; cursor:pointer; }

/* ─── Hero ─── */
.hero { min-height:100vh; position:relative; display:flex; align-items:center; justify-content:center; text-align:center;
    background:linear-gradient(180deg, rgba(250,250,247,0.1) 0%, rgba(250,250,247,0.85) 100%),
               linear-gradient(135deg, #e8f4f0 0%, #d4eae6 50%, #c8e0dc 100%); }
.hero.has-cover { background:linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(250,250,247,0.92) 85%, var(--bg) 100%); }
.hero::after { content:''; position:absolute; bottom:0; left:0; right:0; height:120px; background:linear-gradient(transparent, var(--bg)); pointer-events:none; }
.hero-content { position:relative; z-index:2; max-width:800px; padding:0 24px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; background:rgba(27,107,109,0.08); border:1px solid rgba(27,107,109,0.15); padding:8px 20px; border-radius:50px; font-size:13px; color:var(--primary); margin-bottom:24px; font-weight:600; letter-spacing:0.5px; }
.hero h1 { font-size:clamp(42px,7vw,80px); font-weight:800; line-height:1.1; margin-bottom:20px; color:var(--text); }
.hero h1 span { color:var(--primary); }
.hero.has-cover h1 { color:#fff; text-shadow:0 2px 20px rgba(0,0,0,0.3); }
.hero.has-cover .hero-badge { background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.3); color:#fff; }
.hero.has-cover p { color:rgba(255,255,255,0.9); }
.hero p { font-size:18px; color:var(--text-light); line-height:1.7; margin-bottom:36px; max-width:600px; margin-left:auto; margin-right:auto; }
.hero-btns { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; }

.btn-primary { background:var(--primary); color:#fff; padding:16px 36px; border-radius:50px; font-size:15px; font-weight:700; text-decoration:none; display:inline-flex; align-items:center; gap:10px; transition:all 0.4s; border:none; cursor:pointer; box-shadow:0 8px 25px rgba(var(--primary-rgb),0.25); }
.btn-primary:hover { background:var(--primary-dark); transform:translateY(-3px); box-shadow:0 12px 35px rgba(var(--primary-rgb),0.35); }
.btn-outline { background:transparent; color:var(--text); padding:16px 36px; border-radius:50px; font-size:15px; font-weight:600; text-decoration:none; border:2px solid var(--border); display:inline-flex; align-items:center; gap:10px; transition:all 0.3s; }
.btn-outline:hover { border-color:var(--primary); color:var(--primary); background:rgba(27,107,109,0.04); }
.hero.has-cover .btn-outline { border-color:rgba(255,255,255,0.5); color:#fff; }
.hero.has-cover .btn-outline:hover { border-color:#fff; background:rgba(255,255,255,0.15); }

/* ─── Section Styles ─── */
section { padding:100px 24px; }
.section-header { text-align:center; margin-bottom:60px; }
.section-label { color:var(--primary); font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:3px; margin-bottom:12px; display:block; }
.section-title { font-size:clamp(28px,4vw,46px); font-weight:800; line-height:1.2; color:var(--text); }
.section-subtitle { color:var(--text-light); font-size:16px; margin-top:16px; max-width:500px; margin-left:auto; margin-right:auto; }
.container { max-width:1200px; margin:0 auto; }
.bg-alt { background:var(--bg-alt); }

/* ─── About ─── */
.about-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.about-text p { color:var(--text-light); font-size:16px; line-height:1.8; margin-bottom:24px; }
.about-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:32px; }
.about-stat { text-align:center; padding:16px; background:var(--surface); border-radius:var(--radius); border:1px solid var(--border-light); }
.about-stat .num { font-family:'Playfair Display',serif; font-size:36px; font-weight:800; color:var(--primary); }
.about-stat .label { color:var(--text-muted); font-size:13px; margin-top:4px; }
.about-image { border-radius:var(--radius-lg); overflow:hidden; position:relative; box-shadow:var(--shadow-lg); }
.about-image img { width:100%; height:400px; object-fit:cover; }
.about-image .year-badge { position:absolute; bottom:20px; right:20px; background:var(--primary); color:#fff; padding:12px 20px; border-radius:var(--radius); font-weight:700; font-size:14px; box-shadow:var(--shadow-md); }

/* ─── Features ─── */
.features-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.feature-card { background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); padding:32px; transition:all 0.4s; position:relative; overflow:hidden; }
.feature-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); border-color:rgba(var(--primary-rgb),0.2); }
.feature-card::after { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--primary),var(--primary-light)); transform:scaleX(0); transition:transform 0.4s; transform-origin:left; }
.feature-card:hover::after { transform:scaleX(1); }
.feature-icon { width:56px; height:56px; border-radius:var(--radius-sm); background:linear-gradient(135deg,rgba(var(--primary-rgb),0.08),rgba(var(--primary-rgb),0.03)); display:flex; align-items:center; justify-content:center; font-size:24px; margin-bottom:20px; color:var(--primary); }
.feature-card h3 { font-size:18px; font-weight:700; margin-bottom:10px; color:var(--text); }
.feature-card p { color:var(--text-light); font-size:14px; line-height:1.6; }

/* ─── Gallery ─── */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px; }
.gallery-item { border-radius:var(--radius); overflow:hidden; position:relative; cursor:pointer; aspect-ratio:4/3; box-shadow:var(--shadow-sm); }
.gallery-item img { width:100%; height:100%; object-fit:cover; transition:transform 0.6s ease; }
.gallery-item:hover img { transform:scale(1.06); }
.gallery-item .overlay { position:absolute; inset:0; background:linear-gradient(transparent 50%,rgba(0,0,0,0.5)); opacity:0; transition:opacity 0.3s; display:flex; align-items:flex-end; padding:16px; }
.gallery-item:hover .overlay { opacity:1; }
.gallery-item .overlay span { color:#fff; font-size:13px; font-weight:500; }

/* ─── Menu ─── */
.menu-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:24px; }
.menu-card { background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); overflow:hidden; transition:all 0.4s; }
.menu-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.menu-card-img { width:100%; height:200px; object-fit:cover; }
.menu-card-body { padding:20px; }
.menu-card-body h4 { font-size:17px; font-weight:700; margin-bottom:4px; color:var(--text); }
.menu-card-body .cat-label { font-size:11px; color:var(--primary); font-weight:600; text-transform:uppercase; letter-spacing:1px; }
.menu-card-body .desc { color:var(--text-light); font-size:13px; margin-top:8px; line-height:1.5; }
.menu-card-body .price { font-size:22px; font-weight:800; margin-top:12px; color:var(--primary); }
.btn-add-cart { padding:6px 14px; background:var(--primary); color:#fff; border:none; border-radius:8px; cursor:pointer; font-size:12px; font-weight:600; transition:all 0.3s; }
.btn-add-cart:hover { background:var(--primary-dark); transform:scale(1.05); }
.btn-add-cart:active { transform:scale(0.95); }

/* ─── Reviews ─── */
.reviews-scroll { display:flex; gap:24px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scroll-behavior:smooth; padding-bottom:8px; }
.reviews-scroll::-webkit-scrollbar { display:none; }
.reviews-scroll .review-card { flex:0 0 340px; scroll-snap-align:start; }
.review-card { background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); padding:28px; transition:all 0.3s; position:relative; overflow:hidden; }
.review-card:hover { box-shadow:var(--shadow-md); border-color:rgba(var(--primary-rgb),0.15); }
.review-card::before { content:'\201C'; position:absolute; top:12px; right:20px; font-size:60px; font-family:'Playfair Display',serif; color:rgba(var(--primary-rgb),0.06); line-height:1; }
.review-stars { color:#f59e0b; font-size:14px; margin-bottom:12px; }
.review-text { color:var(--text-light); font-size:14px; line-height:1.7; margin-bottom:16px; font-style:italic; }
.review-author { font-weight:600; font-size:14px; color:var(--text); }
.review-date { color:var(--text-muted); font-size:12px; margin-top:4px; }
@media(max-width:768px) { .reviews-scroll .review-card { flex:0 0 85vw; } }

/* ─── Reservation ─── */
.reservation-section { background:var(--bg-alt); }
.reservation-grid { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.reservation-info h3 { font-size:32px; margin-bottom:16px; color:var(--text); }
.reservation-info p { color:var(--text-light); line-height:1.7; margin-bottom:24px; }
.reservation-form { background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius-lg); padding:32px; box-shadow:var(--shadow-sm); }
.form-group { margin-bottom:16px; }
.form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:var(--text); }
.form-group input,.form-group select,.form-group textarea { width:100%; padding:12px 16px; background:var(--bg); border:1px solid var(--border); border-radius:var(--radius-sm); color:var(--text); font-size:14px; outline:none; transition:border-color 0.3s; font-family:inherit; }
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.08); }
.form-group select option { background:var(--surface); color:var(--text); }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.form-submit { width:100%; padding:14px; background:var(--primary); color:#fff; border:none; border-radius:var(--radius-sm); font-size:15px; font-weight:700; cursor:pointer; transition:all 0.3s; }
.form-submit:hover { background:var(--primary-dark); transform:translateY(-2px); box-shadow:var(--shadow-md); }
.form-submit:disabled { opacity:0.5; cursor:not-allowed; }
.form-success { display:none; text-align:center; padding:40px 20px; }
.form-success i { font-size:48px; color:#10b981; margin-bottom:16px; }
.form-success h4 { font-size:20px; margin-bottom:8px; color:var(--text); }
.form-success p { color:var(--text-light); }

/* ─── Contact ─── */
.contact-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; }
.contact-card { background:var(--surface); border:1px solid var(--border-light); border-radius:var(--radius); padding:28px; text-align:center; transition:all 0.3s; }
.contact-card:hover { box-shadow:var(--shadow-md); border-color:rgba(var(--primary-rgb),0.15); transform:translateY(-2px); }
.contact-icon { font-size:28px; color:var(--primary); margin-bottom:16px; }
.contact-card h4 { font-size:14px; font-weight:700; margin-bottom:8px; color:var(--text); }
.contact-card p { color:var(--text-light); font-size:13px; }
.contact-card a { color:var(--primary); text-decoration:none; font-weight:500; }
.contact-card a:hover { text-decoration:underline; }
.maps-container { margin-top:40px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.maps-container iframe { width:100%; height:350px; border:0; }

/* ─── Footer ─── */
footer { border-top:1px solid var(--border); padding:40px 24px; text-align:center; background:var(--surface); }
footer p { color:var(--text-muted); font-size:13px; }
footer a { color:var(--primary); text-decoration:none; }
.footer-socials { display:flex; gap:12px; justify-content:center; margin-bottom:20px; }
.footer-socials a { width:44px; height:44px; border-radius:50%; background:var(--bg); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; color:var(--text-light); font-size:18px; transition:all 0.3s; }
.footer-socials a:hover { color:var(--primary); border-color:var(--primary); background:rgba(var(--primary-rgb),0.04); }

/* ─── Floating Buttons ─── */
.float-btns { position:fixed; bottom:24px; right:24px; z-index:90; display:flex; flex-direction:column; gap:12px; }
.float-btn { width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:22px; text-decoration:none; border:none; cursor:pointer; transition:all 0.3s; box-shadow:var(--shadow-md); }
.float-btn:hover { transform:scale(1.1); }
.float-qr { background:var(--primary); color:#fff; }
.float-wp { background:#25d366; color:#fff; }

/* ─── Lightbox ─── */
.lightbox { display:none; position:fixed; z-index:9999; inset:0; background:rgba(0,0,0,0.9); align-items:center; justify-content:center; }
.lightbox.active { display:flex; }
.lightbox img { max-width:90%; max-height:90vh; object-fit:contain; border-radius:12px; }
.lightbox .close { position:absolute; top:20px; right:20px; background:none; border:none; color:#fff; font-size:32px; cursor:pointer; }

/* ─── Cart & Order (Light theme) ─── */
#cartPanel { background:var(--surface)!important; }
#cartPanel h3 { color:var(--text)!important; }
.cart-item { display:flex; align-items:center; gap:12px; padding:12px; background:var(--bg); border:1px solid var(--border-light); border-radius:var(--radius-sm); margin-bottom:8px; }
.cart-item-name { color:var(--text); font-size:14px; font-weight:500; flex:1; }
.cart-item-price { color:var(--primary); font-weight:700; font-size:14px; white-space:nowrap; }
.cart-item-qty { display:flex; align-items:center; gap:8px; }
.cart-item-qty button { width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; }
.cart-item-qty button:hover { border-color:var(--primary); color:var(--primary); }
.cart-item-qty span { color:var(--text); font-weight:600; min-width:20px; text-align:center; }
@keyframes cartPulse { 0%{transform:scale(1)} 50%{transform:scale(1.15)} 100%{transform:scale(1)} }

/* ─── Animations ─── */
.fade-up { opacity:0; transform:translateY(30px); transition:all 0.8s cubic-bezier(0.16,1,0.3,1); }
.fade-up.visible { opacity:1; transform:translateY(0); }
.fade-up.visible .stagger-child { opacity:1; transform:translateY(0); }
.stagger-child { opacity:0; transform:translateY(20px); transition:all 0.6s cubic-bezier(0.16,1,0.3,1); }
.stagger-child:nth-child(1) { transition-delay:0.1s; }
.stagger-child:nth-child(2) { transition-delay:0.2s; }
.stagger-child:nth-child(3) { transition-delay:0.3s; }
.stagger-child:nth-child(4) { transition-delay:0.4s; }

/* ─── Responsive ─── */
@media(max-width:768px) {
    .nav-links { display:none; }
    .mobile-toggle { display:block; }
    .hero-btns { flex-direction:column; align-items:center; }
    .btn-primary,.btn-outline { width:100%; max-width:300px; justify-content:center; }
    section { padding:60px 16px; }
    .about-grid,.reservation-grid { grid-template-columns:1fr; gap:32px; }
    .about-stats { grid-template-columns:repeat(3,1fr); }
    .form-row { grid-template-columns:1fr; }
    .gallery-grid { grid-template-columns:repeat(2,1fr); }
    .menu-grid { grid-template-columns:1fr; }
}

/* ─── RTL Support ─── */
[dir="rtl"] .nav-links { direction:rtl; }
[dir="rtl"] .about-grid { direction:rtl; }
[dir="rtl"] .hero-badge i { margin-left:8px; margin-right:0; }

/* ─── Lang Switcher ─── */
.lang-dropdown.active { display:block!important; }
