:root {
  --primary-color: #6F4E37; /* Dark Coffee */
  --secondary-color: #D2B48C; /* Cream Coffee */
  --accent-color: #A0522D; /* Lighter Coffee / Sienna */
  --light-bg: #F5F5DC; /* Beige */
  --dark-bg: #362214; /* Very Dark Coffee */
}

/* --- BUG FIX: Sayfa İçi Kaydırma ve Scroll Bar Ayarı --- */
html {
  scroll-behavior: smooth;
  /* Navbar yüksekliği (~80px) kadar pay bırakır, başlıklar menü altında kalmaz */
  scroll-padding-top: 90px; 
}

body {
  font-family: 'Poppins', sans-serif;
  color: #333;
  background-color: var(--light-bg);
}

/* NEW CUSTOM HEADING STYLES */
h1 {
  font-family: 'Playfair Display', serif;
  color: rgb(212, 212, 212); /* White for Hero Section */
}
h2 {
  font-family: 'Playfair Display', serif;
  color: var(--primary-color); /* Dark coffee for section titles */
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
}
h3 {
  font-family: 'Playfair Display', serif;
  color: var(--accent-color); /* Accent color for subtitles */
  font-size: 1.8rem;
  font-weight: 600;
}
h4 {
  font-family: 'Playfair Display', serif;
  color: var(--dark-bg);
  font-size: 1.4rem;
}

/* --- VISUAL FIX: H5 Rengi --- */
/* Genel h5 rengini koyu yaptık ki beyaz kartlarda okunsun */
h5 {
  font-family: 'Playfair Display', serif;
  color: var(--primary-color); 
  font-size: 1.25rem;
  font-weight: 700;
}
h6 {
  font-family: 'Poppins', sans-serif; 
  color: var(--primary-color);
  font-size: 1rem;
}

/* SPECIAL STYLE FOR PRODUCT CARD TITLES ONLY */
.product-title {
    color: var(--accent-color) !important; /* Lighter coffee accent */
}
/* END OF GENERAL HEADING STYLES */

.navbar {
  background-color: var(--dark-bg) !important;
  border-bottom: 2px solid var(--primary-color);
}
.navbar-brand, .nav-link {
  color: var(--secondary-color) !important;
  font-weight: 600;
}
.navbar-brand:hover, .nav-link:hover {
  color: var(--light-bg) !important;
}

/* DÜZELTME: Buradaki invert kodu silindi, ikon artık beyaz görünecek. */

/* Hero Section */
.hero-section {
  background: url('img/hero-bg.jpg') no-repeat center center/cover;
  height: 90vh; 
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.9); 
  position: relative;
  background-attachment: fixed;
}
.hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4); 
}
.hero-content {
  position: relative;
  z-index: 1;
}
.hero-section .display-4 {
  font-size: 4.5rem; 
  font-weight: 700;
}
.hero-section .lead {
  font-size: 1.8rem; 
  margin-bottom: 3rem; 
  color: var(--secondary-color); 
}

/* General Button Styles */
.btn {
  border-radius: 50px;
  padding: 0.75rem 2rem;
  font-weight: 600;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.btn-primary {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}
.btn-primary:hover {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}
.btn-outline-primary {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.btn-outline-primary:hover {
    background-color: var(--primary-color);
    color: white;
}

/* Section Padding */
section {
  padding: 60px 0;
}
#about { background-color: var(--light-bg); }
#menu { background-color: #fff; }
#contact { background-color: var(--secondary-color); }

/* Card Styles */
.card {
  border: none;
  border-radius: 15px;
  box-shadow: 0 10px 20px rgba(0,0,0,0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden; 
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}
.card-img-top { height: 250px; object-fit: cover; }
.card-body { padding: 1.5rem; }

/* About Image */
#about img {
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Contact Form Styling */
#contact .form-control {
  border-radius: 10px;
  border: 1px solid var(--primary-color);
}
#contact .form-control:focus {
  border-color: var(--accent-color);
  box-shadow: 0 0 0 0.25rem rgba(160, 82, 45, 0.25);
}

/* Footer */
footer {
  background-color: var(--dark-bg) !important;
  color: var(--secondary-color) !important;
  padding: 2.5rem 0 !important;
}
footer a { color: var(--primary-color); text-decoration: none; }
footer a:hover { color: var(--light-bg); }

/* --- CUSTOM CHECKOUT MODAL STYLES (COFFEE THEME) --- */
#checkoutModal .modal-content {
  border-radius: 15px;
  border: none;
  box-shadow: 0 15px 35px rgba(54, 34, 20, 0.3); 
}

/* Header */
#checkoutModal .modal-header {
  background-color: var(--primary-color); 
  color: white;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 1.5rem;
  border-bottom: 2px solid var(--primary-color);
}

/* Modal Title (H5) - Koyu zemin üzerinde olduğu için açık renk override ediyoruz */
#checkoutModal .modal-title {
  color: var(--light-bg) !important; 
  font-family: 'Playfair Display', serif;
  font-weight: bold;
}

/* Total Box */
.total-box {
  background-color: #fff;
  border: 2px solid;
  border-color:var(--primary-color);
  border-radius: 12px;
  padding: 1.5rem;
  text-align: center;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.total-label {
  font-size: 0.9rem;
  color: var(--primary-color);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Total Amount Number */
.total-amount {
  font-size: 2.5rem;
  color:  var(--primary-color); 
  font-weight: 700;
  font-family: 'Playfair Display', serif;
  margin: 0;
}

/* Form Inputs */
#checkoutModal .form-control {
  border-radius: 8px;
  padding: 0.75rem 1rem;
  border: 1px solid #43392e; 
  background-color: #fff;
}
#checkoutModal .form-control:focus {
  background-color: #fff;
  border-color: var(--primary-color); 
  box-shadow: 0 0 0 0.25rem rgba(160, 82, 45, 0.15); /* Gölge rengini biraz daha soft yaptım */
}

/* Icon Boxes */
#checkoutModal .input-group-text {
  background-color: var(--primary-color);
  border-color: #e0d0c0;
  color: var(--primary-color);
}

/* Pay Button */
.btn-pay {
  background-color: var(--dark-bg); 
  color: var(--secondary-color);
  border: 1px solid var(--dark-bg);
  padding: 1rem;
  font-size: 1.1rem;
  border-radius: 50px;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(54, 34, 20, 0.4);
}
.btn-pay:hover {
  background-color: var(--primary-color);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(54, 34, 20, 0.5);
}

/* Focus Effect for Card Number Input */
.custom-input-group {
  transition: all 0.2s ease;
  border: 1px solid #43392e; 
}
.custom-input-group:focus-within {
  border-color: var(--primary-color) !important; 
  box-shadow: 0 0 0 4px rgba(160, 82, 45, 0.15); 
  background-color: #fff;
}

/* --- Offcanvas Cart Styles --- */

/* Main Cart Panel */
#cartOffcanvas {
  background-color: var(--light-bg); 
  box-shadow: -5px 0 15px rgba(0, 0, 0, 0.2);
}

/* Cart Header */
#cartOffcanvas .offcanvas-header {
  background-color: var(--dark-bg); 
  color: var(--secondary-color); 
  border-bottom: 1px solid var(--primary-color);
}
/* Cart Title - Header içi (Override) */
#cartOffcanvas .offcanvas-title {
  color: var(--light-bg) !important;
}

#cartOffcanvas .offcanvas-header .btn-close {
  filter: invert(1); 
}

/* Cart Footer */
.offcanvas-footer {
  border-top: 2px solid var(--primary-color) !important;
  padding: 1rem !important;
}

/* Style for H5 in Footer ONLY */
.offcanvas-footer h5 {
    color: var(--dark-bg) !important; 
    font-size: 1.5rem; 
}

/* Style for Total amount in Footer */
.offcanvas-footer h5 span {
    color: var(--primary-color) !important; 
    font-weight: 700;
}

/* --- MOBILE FIXES (MEDIA QUERY) --- */
@media (max-width: 768px) {

  /* 1. Background Problem Solution */
  .hero-section {
  background-attachment: scroll !important; /* 'Scroll' is required instead of 'fixed' on mobile */
  background-position: center center !important;
  height: 70vh; /* We can make it a little shorter on mobile */
  }
  
  /* 2. Text Size and Shadow Fix */
  .hero-section .display-4 {
  font-size: 2.8rem; /* Let's make the text a little smaller on mobile */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9); /* Let's thin out the shadow, remove the mud look */
  }

  .hero-section .lead {
  font-size: 1.2rem;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.9);
  }
}