/* ==========================================================================
   1. TEMEL AYARLAR & FERAH BEYAZ & GOLD PALETİ
   ========================================================================== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

html {
  scroll-behavior: smooth;
}

:root {
  /* Ana Renkler (Açık & Ferah Lüks Gold Paleti) */
  --primary-gold: #D4AF37;
  /* Parlak VIP Altın */
  --primary-gold-light: #F4E7B6;
  /* Yumuşak Şampanya */
  --primary-gold-dark: #B8860B;
  /* Koyu Vurgu Gold */
  --primary-white: #FFFFFF;
  --bg-light: #FDFBF7;
  /* Ferah Krem / İnci Beyazı Zemin */
  --card-bg: #FFFFFF;
  /* Kart Arka Planı */

  /* Text Renkleri */
  --text-main: #2C2C2C;
  /* Şık Koyu Füme */
  --text-muted: #666666;
  /* İkincil Metin Grisi */

  /* Gradientler (Ferah Açık Geçişler) */
  --grad-primary: linear-gradient(135deg, #FFFFFF 0%, #F4E7B6 50%, #D4AF37 100%);
  --grad-gold-btn: linear-gradient(135deg, #D4AF37 0%, #B8860B 100%);
  --grad-card: linear-gradient(145deg, #FFFFFF 0%, #FDFBF7 100%);

  /* Çerçeve ve Gölgeler */
  --card-border: rgba(212, 175, 55, 0.3);
  --input-bg: rgba(255, 255, 255, 0.9);
  --shadow-light: 0 10px 30px rgba(0, 0, 0, 0.06);
  --shadow-gold: 0 10px 25px rgba(212, 175, 55, 0.25);
}

body {
  background: var(--bg-light);
  color: var(--text-main);
  min-height: 100vh;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ==========================================================================
   2. HEADER & NAVİGASYON
   ========================================================================== */
.header {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  border-bottom: 1px solid var(--card-border);
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.03);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 80px;
}

.logo {
  font-size: 26px;
  font-weight: 800;
  color: var(--text-main);
  text-decoration: none;
  letter-spacing: 2px;
}

.logo span {
  background: var(--grad-gold-btn);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-links a {
  color: var(--text-main);
  text-decoration: none;
  margin: 0 15px;
  font-weight: 600;
  font-size: 15px;
  transition: color 0.3s ease;
}

.nav-links a:hover {
  color: var(--primary-gold-dark);
}

.header-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.btn-phone {
  background: var(--grad-gold-btn);
  color: #FFFFFF !important;
  padding: 10px 22px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow-gold);
  transition: transform 0.3s, box-shadow 0.3s;
}

.btn-phone:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

/* Dil Seçici */
.lang-switcher {
  position: relative;
  display: inline-block;
}

.lang-btn {
  background: #FFFFFF;
  color: var(--text-main);
  border: 1px solid var(--card-border);
  padding: 8px 14px;
  border-radius: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 13px;
  transition: border-color 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.lang-btn:hover {
  border-color: var(--primary-gold);
}

.lang-btn img,
.lang-dropdown-content img {
  width: 20px;
  height: 14px;
  object-fit: cover;
  border-radius: 2px;
}

.lang-dropdown-content {
  display: none;
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: 10px;
  background: #FFFFFF;
  min-width: 150px;
  box-shadow: var(--shadow-light);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  z-index: 1001;
  overflow: hidden;
}

.lang-dropdown-content div {
  color: var(--text-main);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-size: 13px;
  transition: background-color 0.2s, color 0.2s;
}

.lang-dropdown-content div:hover {
  background-color: var(--primary-gold-light);
  color: var(--primary-gold-dark);
}

.lang-dropdown-content.show {
  display: block;
}

/* ==========================================================================
   3. HERO & REZERVASYON KARTI ALANI
   ========================================================================== */
.hero {
  position: relative;
  min-height: calc(100vh - 80px);
  background: url('images5.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 130px;
  padding-bottom: 60px;
}

.hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, rgba(253, 251, 247, 0.75) 0%, rgba(244, 231, 182, 0.85) 100%);
}

.hero-content {
  position: relative;
  z-index: 1;
  text-align: center;
  width: 100%;
}

.hero-content h1 {
  font-size: 44px;
  margin-bottom: 12px;
  color: var(--text-main);
  font-weight: 800;
  letter-spacing: 1px;
}

.hero-content p {
  color: var(--text-muted);
  font-size: 18px;
  margin-bottom: 35px;
  font-weight: 500;
}

.booking-card {
  background: var(--card-bg);
  padding: 40px;
  border-radius: 24px;
  border: 1.5px solid var(--card-border);
  box-shadow: 0 15px 40px rgba(212, 175, 55, 0.15);
  max-width: 1100px;
  margin: 0 auto;
}

#transfer-form {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
  align-items: flex-end;
}

.form-group {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.form-group label {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--primary-gold-dark);
  text-transform: uppercase;
  letter-spacing: 1.2px;
}

.input-icon-box {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.field-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  pointer-events: none;
  z-index: 2;
}

.custom-arrow {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-size: 12px;
  color: var(--primary-gold-dark);
  pointer-events: none;
  z-index: 2;
}

.form-group select {
  height: 60px;
  width: 100%;
  padding-left: 50px !important;
  padding-right: 45px !important;
  background: #FDFBF7 !important;
  border: 1.5px solid var(--card-border) !important;
  color: var(--text-main) !important;
  border-radius: 30px !important;
  font-size: 16px;
  font-weight: 600;
  outline: none;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
  transition: all 0.3s ease;
}

.form-group select option {
  background: #FFFFFF;
  color: var(--text-main);
  font-size: 16px;
  padding: 12px;
}

.form-group select:focus {
  border-color: var(--primary-gold) !important;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.3);
}

.passenger-counter {
  height: 60px !important;
  border-radius: 30px !important;
  background: #FDFBF7 !important;
  border: 1.5px solid var(--card-border) !important;
  padding: 0 15px !important;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.03);
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100%;
}

.pax-btn {
  background: var(--grad-gold-btn) !important;
  color: #FFFFFF !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  font-size: 20px !important;
  font-weight: 800;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
  transition: transform 0.2s ease;
}

.pax-btn:hover {
  transform: scale(1.1) !important;
}

.passenger-counter span {
  color: var(--text-main);
  font-size: 18px;
  font-weight: 800;
  min-width: 30px;
  text-align: center;
  user-select: none;
}

.btn-search {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  height: 60px;
  background: linear-gradient(135deg, #D4AF37 0%, #D4AF37 100%);
  color: #ffffff;
  font-size: 18px;
  font-weight: 800;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  margin-top: 15px;
  box-shadow: 0 6px 25px rgba(255, 82, 29, 0.35);
  transition: transform 0.3s, box-shadow 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-search:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(255, 82, 29, 0.5);
}

.form-note {
  grid-column: 1 / -1;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 15px;
  line-height: 1.5;
}

.form-note strong {
  color: var(--text-main);
}

/* ==========================================================================
   4. MODAL & BİLGİLENDİRME KARTLARI
   ========================================================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease-in-out;
}

.modal-overlay.active {
  opacity: 1;
  visibility: visible;
}

.modal-card {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  box-shadow: var(--shadow-light);
  border-radius: 16px;
  width: 90%;
  max-width: 400px;
  padding: 24px;
  position: relative;
  transform: scale(0.8);
  transition: transform 0.3s ease-in-out;
  color: var(--text-main);
}

.modal-overlay.active .modal-card {
  transform: scale(1);
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: transparent;
  border: none;
  color: #aaa;
  font-size: 24px;
  cursor: pointer;
}

.modal-header {
  text-align: center;
  margin-bottom: 20px;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: var(--text-main);
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  background: var(--bg-light);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.contact-item:hover {
  background: var(--primary-gold-light);
}

.contact-value {
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-gold-dark);
}

/* Bilgilendirme ve Standartlar Kartı */
.features-info-card {
  margin-top: 35px;
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 16px;
  padding: 30px;
  color: var(--text-main);
  box-shadow: var(--shadow-light);
  text-align: left;
}

.info-card-header h2 span {
  color: var(--primary-gold-dark);
}

.info-feature-item {
  border-left: 3px solid var(--primary-gold);
  padding-left: 16px;
  margin-bottom: 20px;
}

.info-feature-item h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--primary-gold-dark);
  margin-bottom: 6px;
}

.info-card-footer .brand-text {
  font-weight: 800;
  color: var(--primary-gold-dark);
  font-size: 18px;
}

/* ==========================================================================
   5. SIKÇA SORULAN SORULAR (FAQ)
   ========================================================================== */
.faq-page {
  padding-top: 80px;
}

.faq-hero {
  background: var(--bg-light);
  border-bottom: 1px solid var(--card-border);
  padding: 50px 20px 30px;
  text-align: center;
}

.faq-hero h1 {
  font-size: 32px;
  color: var(--text-main);
  margin-bottom: 8px;
}

.faq-hero p {
  color: var(--primary-gold-dark);
  font-size: 15px;
}

.faq-section {
  padding: 30px 20px 80px;
  max-width: 850px;
  margin: 0 auto;
}

.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-item {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-question {
  width: 100%;
  padding: 18px 20px;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 15px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-arrow {
  font-size: 13px;
  color: var(--primary-gold-dark);
  transition: transform 0.3s ease;
}

.faq-item.active {
  border-color: var(--primary-gold);
  box-shadow: var(--shadow-light);
}

.faq-item.active .faq-arrow {
  transform: rotate(90deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  background: var(--bg-light);
}

.faq-item.active .faq-answer {
  max-height: 250px;
  padding: 16px 20px 20px 20px;
  border-top: 1px solid var(--card-border);
}

.faq-answer p {
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* ==========================================================================
   6. YASAL METİNLER VE KVKK SAYFASI
   ========================================================================== */
.legal-page {
  padding-top: 80px;
}

.legal-hero {
  background: var(--bg-light);
  border-bottom: 1px solid var(--card-border);
  padding: 50px 20px 30px;
  text-align: center;
}

.legal-hero h1 {
  font-size: 28px;
  color: var(--text-main);
}

.legal-section {
  padding: 40px 20px 80px;
  max-width: 900px;
  margin: 0 auto;
}

.legal-card {
  background: #FFFFFF;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 24px 28px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-light);
}

.legal-card h2 {
  font-size: 18px;
  color: var(--text-main);
  margin-bottom: 14px;
}

.legal-card p,
.legal-card ul {
  color: var(--text-muted);
  font-size: 14.5px;
  line-height: 1.7;
}

/* ==========================================================================
   7. FOOTER STİLLERİ (DÜZELTİLMİŞ)
   ========================================================================== */
.footer {
  width: 100% !important;
  background-color: #ffffff;
  /* Beyaz zemin ekranin solundan sagina uzanir */
  border-top: 1px solid #eee;
  padding: 50px 0 20px 0;
  margin-top: auto;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1.2fr 1fr;
  gap: 30px;
}

.footer-col h3 {
  color: var(--text-main);
  font-size: 17px;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
  display: inline-block;
}

.footer-col h3::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 35px;
  height: 3px;
  background: var(--primary-gold);
  border-radius: 2px;
}

.footer-desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-top: 15px;
}

.footer-links,
.footer-contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer-links a,
.footer-contact a,
.footer-dest-grid a {
  color: var(--text-muted) !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: inline-block;
  /* Transform efektinin pürüzsüz çalışması için gerekli */
}

/* Diğer footer linkleri padding kullanmaya devam edebilir */
.footer-links a:hover,
.footer-contact a:hover {
  color: var(--primary-gold-dark) !important;
  padding-left: 4px;
}

/* Sadece dest-grid (yan yana sütunlar) için padding yerine transform kullanıyoruz */
.footer-dest-grid a:hover {
  color: var(--primary-gold-dark) !important;
  transform: translateX(4px);
  /* Sağdaki sütunu itmeden, sadece yazıyı 4px sağa kaydırır */
}

.footer-dest-grid {
  display: flex;
  gap: 20px;
}

.footer-dest-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  /* Sütun genişliklerini sabitleyerek birbirini etkilemesini önler */
}

.footer-contact li {
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--text-muted);
}

.footer-bottom {
  max-width: 1200px;
  margin: 30px auto 0 auto;
  padding-top: 20px;
  border-top: 1px solid #f0f0f0;
  text-align: center;
  font-size: 14px;
  color: #666;
}

/* ==========================================================================
   8. RESPONSIVE DÜZEN
   ========================================================================== */
@media (max-width: 992px) {
  #transfer-form {
    grid-template-columns: 1fr 1fr;
  }

  .footer-container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 576px) {
  #transfer-form {
    grid-template-columns: 1fr;
  }

  .hero-content h1 {
    font-size: 32px;
  }

  .booking-card {
    padding: 25px;
  }

  .footer-container {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   ÜCRETSİZ İPTAL SAYFASI VE KART STİLLERİ
   ========================================================================== */

/* Sayfa Genel Yapısı */
.legal-page {
  background-color: var(--bg-light, #FDFBF7);
}

.legal-hero {
  background: linear-gradient(180deg, #FFFFFF 0%, #FDFBF7 100%);
  border-bottom: 1px solid var(--card-border, rgba(212, 175, 55, 0.25));
  padding: 60px 20px 40px;
  text-align: center;
  margin-top: 80px;
  /* Header altı boşluk */
}

.legal-hero h1 {
  font-size: 32px;
  color: var(--text-main, #2C2C2C);
  font-weight: 800;
  margin-bottom: 8px;
}

.legal-hero p {
  color: var(--primary-gold-dark, #B8860B);
  font-size: 16px;
  font-weight: 600;
}

/* İçerik Kapsayıcısı */
.cancel-content {
  max-width: 800px;
  margin: 40px auto 80px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Standart Metin Kartları */
.cancel-card {
  background: #FFFFFF;
  border: 1px solid var(--card-border, rgba(212, 175, 55, 0.25));
  border-radius: 16px;
  padding: 22px 28px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cancel-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 25px rgba(212, 175, 55, 0.12);
}

.cancel-card p {
  color: var(--text-main, #2C2C2C);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}

/* Kart 4: WhatsApp Vurgulu Kart */
.cancel-whatsapp-card {
  background: #FDFBF7;
  border: 1.5px solid var(--primary-gold, #D4AF37);
  display: inline-block;
  align-self: flex-start;
}

.cancel-whatsapp-card p strong {
  color: var(--text-main, #2C2C2C);
}

.cancel-whatsapp-card a {
  color: var(--primary-gold-dark, #B8860B) !important;
  text-decoration: none !important;
  font-weight: 700;
  font-size: 16px;
  margin-left: 6px;
  transition: color 0.3s ease;
}

.cancel-whatsapp-card a:hover {
  color: var(--primary-gold, #D4AF37) !important;
}

/* Kart 5: İmza Kartı */
.cancel-signature-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding-left: 5px;
  margin-top: 10px;
}

.cancel-signature-card p {
  font-style: italic;
  color: var(--text-muted, #666666);
  font-size: 14px;
  font-weight: 600;
}

/* ==========================================================================
   MUTLU MİSAFİRLER GALERİ SLIDER (BEYAZ & GOLD UYUMLU)
   ========================================================================== */
.gallery-section {
  padding: 50px 20px;
  text-align: center;
}

.gallery-header h2 {
  font-size: 28px;
  color: var(--text-main, #2C2C2C);
  font-weight: 800;
  margin-bottom: 6px;
}

.gallery-header h2 span {
  color: var(--primary-gold-dark, #B8860B);
}

.gallery-header p {
  color: var(--text-muted, #666666);
  font-size: 15px;
  margin-bottom: 25px;
}

/* Slider Alanı Kapsayıcısı */
.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 1100px;
  margin: 0 auto;
  /* Ok butonları için kartların dışında boşluk (gutter) bırakılıyor */
  padding: 0 54px;
  box-sizing: border-box;
}

/* Kaydırılabilir Fotoğraf Şeridi */
.gallery-slider {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 5px;
  /* Kaydırma çubuğunu gizle */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
  /* Kart kart temiz hizalı kaydırma (blog slider ile aynı mantık) */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

.gallery-slider::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

/* Tekil Fotoğraf Kartları */
.slide-card {
  flex: 0 0 280px;
  /* Her kartın genişliği */
  height: 380px;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid var(--primary-gold, #D4AF37);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Kaydırma bittiğinde kart tam kenara yapışsın, yarım görünmesin */
  scroll-snap-align: start;
}

.slide-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.25);
}

.slide-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Yön Ok Butonları (Yuvarlak Gold Stil) */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #FFFFFF;
  border: 1.5px solid var(--primary-gold, #D4AF37);
  color: var(--primary-gold-dark, #B8860B);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.slide-btn:hover {
  background: var(--primary-gold, #D4AF37);
  color: #FFFFFF;
  scale: 1.1;
}

.prev-btn {
  left: 0;
}

.next-btn {
  right: 0;
}

/* Mobil Uyum */
@media (max-width: 768px) {
  .slider-wrapper {
    /* Mobilde daha küçük butona göre daha dar gutter, karta daha çok yer bırakır */
    padding: 0 40px;
  }

  .slide-card {
    /* Ekran genişliğine göre esner, hem büyür hem de bir sonraki kart hafifçe görünür */
    flex: 0 0 clamp(240px, 74vw, 320px);
    max-width: clamp(240px, 74vw, 320px);
    height: clamp(300px, 92vw, 400px);
  }

  .slide-card img {
    height: 100%;
  }

  .prev-btn {
    left: 0;
  }

  .next-btn {
    right: 0;
  }
}

/* Alt İmza Alanı (İlk Görseldeki Ortalanmış Gold Stil) */
.cancel-signature-card {
  text-align: center !important;
  /* Ortalar */
  margin-top: 35px;
  padding-top: 20px;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.cancel-signature-card p {
  margin: 4px 0 !important;
  font-style: italic !important;
  /* İtalik yapar */
  color: #D4AF37 !important;
  /* Altın Gold Rengi */
  font-weight: 700;
}

/* Saygılarımızla */
.cancel-signature-card .sig-title {
  font-size: 16px;
}

/* antalyatransfervip.net */
.cancel-signature-card .sig-domain {
  font-size: 18px;
  letter-spacing: 0.5px;
}

/* Operasyon Merkezi */
.cancel-signature-card .sig-subtitle {
  font-size: 16px;
}

/* ==========================================================================
   ÇALIŞTIĞIMIZ BÖLGELER (CANLI SARI / SUNSET GOLD TATİL TEMASI)
   ========================================================================== */
.regions-section {
  padding: 60px 20px;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.section-title h2 {
  font-size: 32px;
  color: #1A1A1A;
  font-weight: 800;
}

.section-title h2 span {
  color: #D4AF37;
}

/* Grid Yapısı */
.regions-grid {
  display: grid;
  /* Minimum kart genişliğini 260px yerine 320px yapıyoruz */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  max-width: 1280px;
  /* Geniş ekranlarda rahat sığması için */
  margin: 0 auto;
}

/* Ferah & Canlı Beyaz Zeminli VIP Kart Yapısı */
.region-card {
  background: #FFFFFF;
  border: 2px solid #F3C623;
  border-radius: 20px;
  overflow: hidden;
  /* Dışa taşmaları engeller */
  box-shadow: 0 8px 25px rgba(243, 198, 35, 0.15);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-sizing: border-box;
  /* Padding genişletmesini önler */
}

.region-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 35px rgba(243, 198, 35, 0.3);
}

/* Görsel Alanı */
.region-img-box {
  position: relative;
  height: 200px;
}

.region-img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Sağ Üst Kırmızı İndirim Rozeti */
.badge-discount {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #E50914;
  color: #FFFFFF;
  font-size: 11px;
  font-weight: 800;
  padding: 4px 12px;
  border-radius: 12px;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* Görsel Üzerindeki Bölge Adı */
.region-name {
  position: absolute;
  bottom: 12px;
  left: 15px;
  color: #FFFFFF;
  font-size: 26px;
  font-weight: 800;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8);
  margin: 0;
}

/* Kartın İçerik Alanı */
.region-details {
  padding: 18px;
  background: #FFFFFF;
}

.special-price-label {
  color: #E50914;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.5px;
  display: block;
  margin-bottom: 10px;
}

/* Gidiş-Dönüş ve Buton Yan Yana Düzeni */
.pricing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 16px;
  width: 100%;
}

/* Gidiş Dönüş İç Kutusu (Tatil Sarısı Zeminli & Net Çerçeveli) */
.price-box.round-trip {
  flex: 1;
  min-width: 0;
  /* İçeriğin genişliği zorlamasını engeller */
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: #FFFDF0;
  border: 1.5px solid #F3C623;
  border-radius: 12px;
  padding: 8px 10px;
  box-sizing: border-box;
}

.price-type {
  font-size: 10px;
  color: #555555;
  font-weight: 800;
  display: block;
}

.price-values {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 2px 0;
}

.old-price {
  font-size: 15px;
  text-decoration: line-through;
  color: #999999;
}

/* Net Okunan Canlı Fiyat Rengi */
.new-price {
  font-size: 30px;
  font-weight: 900;
  color: #D97706;
  /* Sıcak/Belirgin Amber Sarısı (Net Okunur) */
}

.discount-tag {
  background: rgba(229, 9, 20, 0.1);
  color: #E50914;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
}

/* Reservierung Butonu (Doygun Canlı Sarı & Koyu Yazı) */
.btn-reserve {
  flex: 1;
  min-width: 0;
  /* Butonun kart dışına taşmasını kesinlikle önler */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #F3C623;
  color: #111111;
  font-weight: 800;
  font-size: 12px;
  /* Rusça metinler için ideal yazı boyutu */
  padding: 12px 8px;
  border: none;
  border-radius: 12px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* Beklenmedik bir uzunlukta üç nokta koyar */
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(243, 198, 35, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  user-select: none;
}

.btn-reserve:hover {
  background: #e8b919;
  box-shadow: 0 6px 16px rgba(243, 198, 35, 0.5);
  transform: translateY(-2px);
}

/* Tek Yön Satırı */
.one-way-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  margin-bottom: 12px;
  padding-left: 2px;
}

.one-way-label {
  color: #555555;
  font-weight: 800;
  font-size: 11px;
}

.new-price-sm {
  font-size: 20px;
  font-weight: 900;
  color: #D97706;
}

.discount-tag-sm {
  background: rgba(229, 9, 20, 0.1);
  color: #E50914;
  font-size: 10px;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 4px;
}

/* Yıldızlar */
.stars {
  color: #FFB800;
  font-size: 15px;
  letter-spacing: 2px;
}

section,
footer {
  scroll-margin-top: 70px;
  /* Header yüksekliğinize göre 80px - 100px arası ayarlayabilirsiniz */
}

/* Misafirler bölümünün üst kısmına boşluk ekler */
#guests {
  margin-top: 60px;
  /* İstediğiniz mesafeye göre 60px, 80px veya 100px yapabilirsiniz */
}

.current-price-small {
  font-size: 0.95rem;
  font-weight: 800;
  color: #1a1a1a;
}

/* Fiyat Popup Stilleri */
.price-modal-card {
  max-width: 420px;
  text-align: center;
  border: 2px solid var(--primary-gold);
}

.route-info {
  background: var(--bg-light);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  text-align: left;
}

.route-info p {
  margin-bottom: 6px;
  font-size: 14px;
  color: var(--text-main);
}

.route-info p:last-child {
  margin-bottom: 0;
}

.price-display-box {
  background: linear-gradient(135deg, #FFFDF0 0%, #F4E7B6 100%);
  border: 1.5px solid var(--primary-gold);
  border-radius: 16px;
  padding: 18px;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.price-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.price-value {
  font-size: 38px;
  font-weight: 900;
  color: var(--primary-gold-dark);
  margin-top: 4px;
}

.btn-modal-book {
  display: block;
  width: 100%;
  padding: 15px 20px;
  margin-top: 15px;
  border: none;
  border-radius: 30px;
  background: linear-gradient(135deg, #D4AF37, #B8860B);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.30);
  transition: all 0.3s ease;
}

.btn-modal-book:hover {
  background: linear-gradient(135deg, #E0BC45, #C49A00);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(212, 175, 55, 0.40);
}

.btn-modal-book:active {
  transform: translateY(0);
}

/* --- Modal Transfer Tipi Radyo Butonları --- */
/* Kayan Switch Ana Kapsayıcısı */
/* Kayan Switch Ana Kapsayıcısı (Yuvarlak & Sarı Temalı) */
.trip-switch-container {
  position: relative;
  display: flex;
  background-color: #fcf8e8;
  /* Hafif krem/sarımsı zemin */
  border-radius: 50px;
  /* Tam yuvarlak (Capsule) kenarlar */
  padding: 5px;
  margin: 15px 0;
  user-select: none;
  border: 1.5px solid #ebd99f;
  /* İnce sarı/altın çerçeve */
}

/* Gizli radyo inputları */
.trip-switch-container input[type="radio"] {
  display: none !important;
}

/* Etiketler (Buton Metinleri) */
.switch-label {
  flex: 1;
  text-align: center;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #7a6b38;
  /* Pasif durumda koyu sarı/kahve tonu */
  cursor: pointer;
  z-index: 2;
  transition: color 0.3s ease;
}

/* Sağa/Sola Kayan Kutu (Sarı Buton) */
.switch-slider {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  background: linear-gradient(135deg, #fada5e, #d4a017);
  /* Canlı altın/sarı geçişi */
  border-radius: 40px;
  /* Kayan kutu da yuvarlak */
  box-shadow: 0 3px 10px rgba(212, 160, 23, 0.3);
  transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

/* Seçili Olan Tarafın Yazı Rengi */
#tripRound:checked~label[for="tripRound"],
#tripOneWay:checked~label[for="tripOneWay"] {
  color: #ffffff;
  /* Seçili butonun üzerindeki yazı beyaz olur */
  font-weight: 700;
}

/* Tek Yön Seçildiğinde Kutuyu Sağa Kaydır */
#tripOneWay:checked~.switch-slider {
  transform: translateX(100%);
}

/* ==========================================
   SABİT WHATSAPP BUTONU
   ========================================== */
.whatsapp-fixed-btn {
  position: fixed;
  bottom: 25px;
  right: 25px;
  width: 60px;
  height: 60px;
  background-color: #25d366;
  color: #ffffff !important;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
  z-index: 9999;
  transition: all 0.3s ease;
  text-decoration: none;
  animation: pulse-whatsapp 2s infinite;
}

.whatsapp-fixed-btn:hover {
  transform: scale(1.1);
  background-color: #20ba5a;
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.6);
}

/* Yanındaki İpucu Balonu (Tooltip - Masaüstü için) */
.whatsapp-tooltip {
  position: absolute;
  right: 70px;
  background-color: #333333;
  color: #ffffff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
  pointer-events: none;
}

.whatsapp-fixed-btn:hover .whatsapp-tooltip {
  opacity: 1;
  visibility: visible;
}

/* Hafif Nabız / Parlama Animasyonu */
@keyframes pulse-whatsapp {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* ==========================================
   HEADER & MENÜ RESPONSIVE KESİN ÇÖZÜM
   ========================================== */

/* 1. Masaüstü Ekranlar (Yazıların dikeyde katlanmasını önler) */
header nav ul,
header .nav-links {
  display: flex !important;
  flex-wrap: nowrap !important;
  /* Alt satıra geçmeyi kesinlikle engeller */
  align-items: center !important;
  gap: 15px !important;
  /* Linkler arası mesafeyi dengeler */
}

header nav a,
header .nav-links a {
  white-space: nowrap !important;
  /* "Ana Sayfa" vs. yazıların kırılmasını engeller */
  font-size: 14px !important;
}

header .btn-contact,
header a[href^="tel:"] {
  white-space: nowrap !important;
  /* Sarı buton yazısını tek satır tutar */
  padding: 8px 16px !important;
  font-size: 13px !important;
}

/* 2. Sadece Gerçek Mobil / Küçük Tablet Ekranlar (768px ve Altı) */
@media (max-width: 768px) {

  header nav,
  header .nav-links,
  header ul {
    display: none !important;
    /* Sadece cep telefonlarında gizler */
  }

  header .btn-contact,
  header a[href^="tel:"] {
    padding: 6px 10px !important;
    font-size: 12px !important;
  }
}

.faq-item {
  background: #ffffff;
  border: 1px solid var(--card-border);
  border-radius: 12px;
  margin-bottom: 15px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.faq-question {
  width: 100%;
  padding: 18px 20px;
  text-align: left;
  background: none;
  border: none;
  font-size: 16px;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s;
}

.faq-question:hover {
  background-color: var(--primary-gold-light);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out, padding 0.3s ease;
  padding: 0 20px;
  background: #fdfbf7;
}

.faq-item.active .faq-answer {
  max-height: 200px;
  padding: 15px 20px;
}

.faq-item.active .faq-question i {
  transform: rotate(180deg);
  transition: transform 0.3s;
}

/* ==========================================
   REZERVASYON SAYFASI STİLLERİ (rezervasyon.html)
   ========================================== */
.res-page-container {
  max-width: 1140px !important;
  width: 92%;
  margin: 30px auto;
}

.res-card {
  background: #FFFFFF;
  border: 1.5px solid #E2E8F0;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  padding: 18px 20px;
  margin-bottom: 16px !important;

}

.res-header {
  border-bottom: 2px solid #F4E7B6;
  padding-bottom: 15px;
  margin-bottom: 25px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.res-header h2 {
  font-size: 20px;
  color: #1A1A1A;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

.step-badge {
  background: linear-gradient(135deg, #D4AF37 0%, #AA7C11 100%);
  color: #FFF;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 15px;
  background: #FDFBF7;
  border: 1px solid #E2E8F0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}

.summary-item label {
  font-size: 11px;
  text-transform: uppercase;
  color: #718096;
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}

.summary-item span {
  font-size: 15px;
  font-weight: 700;
  color: #1A1A1A;
}

.price-summary-box {
  background: linear-gradient(135deg, #FFFDF0 0%, #F4E7B6 100%);
  border: 2px solid #D4AF37;
  border-radius: 16px;
  padding: 20px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 10px;
}

.price-summary-box .price-title {
  font-size: 12px;
  font-weight: 700;
  color: #718096;
  text-transform: uppercase;
}

.price-summary-box .price-amount {
  font-size: 38px;
  font-weight: 900;
  color: #AA7C11;
  margin: 5px 0;
}

/* Switch Stili */
.trip-switch-box {
  display: flex;
  gap: 15px;
  align-items: center;
  background: #FAFAFA;
  padding: 12px 18px;
  border-radius: 12px;
  border: 1px solid #E2E8F0;
  margin-bottom: 15px;
}

.trip-switch-box label {
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.form-group-full {
  grid-column: 1 / -1;
}

.res-input-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.res-input-box label {
  font-size: 13px;
  font-weight: 700;
  color: #1A1A1A;
}

.res-input-box input,
.res-input-box select,
.res-input-box textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #CBD5E0;
  border-radius: 10px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s;
  background: #FAFAFA;
  box-sizing: border-box;
}

.res-input-box input:focus,
.res-input-box select:focus,
.res-input-box textarea:focus {
  border-color: #D4AF37;
  background: #FFFFFF;
}

.payment-option-card {
  border: 2px solid #25D366;
  background: #F2FBF5;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 15px;
}

.payment-option-card input[type="radio"] {
  width: 20px;
  height: 20px;
  accent-color: #25D366;
}

.payment-info h4 {
  font-size: 15px;
  color: #1E7E34;
  margin: 0 0 4px 0;
}

.payment-info p {
  font-size: 12.5px;
  color: #555;
  margin: 0;
}

.btn-submit-res {
  width: 100%;
  padding: 16px;
  background: linear-gradient(135deg, #D4AF37 0%, #AA7C11 100%);
  color: #FFFFFF;
  font-size: 18px;
  font-weight: 800;
  border: none;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
  transition: transform 0.2s, box-shadow 0.2s;
  margin-top: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.btn-submit-res:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
}

@media (max-width: 768px) {
  .form-grid {
    grid-template-columns: 1fr;
  }

  .res-page-container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ==========================================
   YENİ EKLENEN FORM ALANLARI VE SAYAC STİLLERİ
   ========================================== */

/* İkonlu İnput Yapısı */
.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

.input-with-icon i {
  position: absolute;
  left: 14px;
  color: #D4AF37;
  font-size: 14px;
}

.input-with-icon input,
.input-with-icon textarea {
  padding-left: 40px !important;
}

/* Ülke Kodlu Telefon Girdisi */
.phone-input-group {
  display: flex;
  border: 1.5px solid #CBD5E0;
  border-radius: 10px;
  overflow: hidden;
  background: #FAFAFA;
}

.phone-input-group select {
  border: none;
  background: #F4F4F4;
  padding: 0 10px;
  border-right: 1px solid #CBD5E0;
  outline: none;
  font-size: 13px;
  cursor: pointer;
}

.phone-code-badge {
  padding: 12px 10px;
  font-weight: 700;
  color: #D4AF37;
  background: #FFFDF0;
  border-right: 1px solid #CBD5E0;
  font-size: 14px;
}

.phone-input-group input {
  border: none !important;
  background: transparent !important;
  padding: 12px 14px !important;
  width: 100%;
}

/* Bebek Koltuğu Akordiyon & Sayaçlar */
.seat-accordion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1.5px solid #E2E8F0;
  padding: 14px 18px;
  border-radius: 10px;
  background: #FAFAFA;
  margin-bottom: 15px;
}

.seat-accordion-header span {
  font-weight: 700;
  color: #1A1A1A;
  font-size: 14px;
}

.seats-flex-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.seat-counter-card {
  border: 1.5px solid #E2E8F0;
  border-radius: 12px;
  padding: 15px 10px;
  text-align: center;
  background: #FFFFFF;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seat-counter-card i {
  font-size: 24px;
  color: #D4AF37;
  margin-bottom: 8px;
}

.seat-counter-card span {
  font-size: 12px;
  font-weight: 700;
  color: #D4AF37;
  margin-bottom: 10px;
}

.counter-box {
  display: flex;
  align-items: center;
  gap: 6px;
}

.counter-box button {
  width: 28px;
  height: 28px;
  border: 1px solid #D4AF37;
  background: transparent;
  color: #AA7C11;
  border-radius: 6px;
  cursor: pointer;
  font-weight: bold;
}

.counter-box button:hover {
  background: #D4AF37;
  color: #FFF;
}

.counter-box input {
  width: 30px;
  text-align: center;
  border: 1px solid #CBD5E0;
  border-radius: 6px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 600;
}

/* Sağ Yan Panel Listeleri */
.sidebar-info-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sidebar-info-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.side-icon {
  width: 36px;
  height: 36px;
  background: #FFFDF0;
  border: 1px solid #F4E7B6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #AA7C11;
  font-size: 14px;
}

.sidebar-info-item label {
  font-size: 11px;
  color: #AA7C11;
  font-weight: 700;
  display: block;
  text-transform: uppercase;
}

.sidebar-info-item span {
  font-size: 14px;
  color: #1A1A1A;
  font-weight: 700;
}

/* Fiyat Kırılımı */
.price-breakdown {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.price-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: #718096;
}

.price-line strong {
  color: #D4AF37;
  font-weight: 800;
}

.price-line.total-line {
  font-size: 16px;
  color: #1A1A1A;
}

@media (max-width: 900px) {
  #finalBookingForm {
    grid-template-columns: 1fr !important;
  }

  .seats-flex-grid {
    grid-template-columns: 1fr;
  }
}

#finalBookingForm {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: 20px;
  align-items: start;
}

.form-right-col {
  position: sticky;
  top: 90px;
  /* Header yüksekliğinize göre mesafe (sayfa kaydırılınca üstte 90px boşluk bırakır) */
  display: flex;
  flex-direction: column;
  gap: 25px;
  z-index: 10;
}

/* İnput Yüksekliklerini ve Yazı Boyutlarını Daha Derli Toplu Yap */
.input-with-icon input,
.phone-input-group input,
.phone-input-group select,
.phone-code-badge {
  padding: 9px 12px !important;
  font-size: 13.5px !important;
  height: 40px !important;
  box-sizing: border-box;
}

.input-with-icon i {
  top: 12px !important;
  font-size: 13px !important;
}

.res-input-box label {
  font-size: 11px !important;
  margin-bottom: 4px !important;
}

.res-header h2 {
  font-size: 17px !important;
  margin-bottom: 6px !important;
}

/* Sağ Kolon (Sticky ve Kompakt Boyutlandırma) */
.form-right-col {
  position: sticky;
  top: 100px;
  /* Header'ın altında kalacak şekilde sabitleme */
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 10;
}

.sidebar-info-list {
  gap: 12px !important;
}

.side-icon {
  width: 32px !important;
  height: 32px !important;
  font-size: 12px !important;
}

/* 1. Sayfa İçeriğini Header'ın Altına İndir */
.res-page-container {
  max-width: 1140px !important;
  width: 92%;
  margin-top: 130px !important;
  /* Header altında kalmaması için üst boşluk artırıldı */
  margin-bottom: 40px !important;
  margin-left: auto;
  margin-right: auto;
}

/* 2. Sağ Paneli Header'ın Altında Kalacak Şekilde Sabitle */
.form-right-col {
  position: sticky;
  top: 110px !important;
  /* Sayfa kaydırıldığında header'ın hemen altında durması için */
  display: flex;
  flex-direction: column;
  gap: 16px;
  z-index: 10;
}

/* Sayfa Başlığı Stili */
.page-title {
  font-size: 38px;
  font-weight: 700;
  color: #c59d27;
  /* Sitenizin altın/sarı tema rengi */
  text-align: center;
  /* Başlığı ortala */
  margin-bottom: 25px;
}

/* Header mesafesini başlığa göre uyarlamak için margin-top ayarı */
.res-page-container {
  max-width: 1140px !important;
  width: 92%;
  margin-top: 100px !important;
  /* Header ile başlık arasındaki mesafe */
  margin-bottom: 35px !important;
  margin-left: auto;
  margin-right: auto;
}

/* Input İçi Kapsayıcı Yapısı */
.input-with-icon {
  position: relative;
  display: flex;
  align-items: center;
}

/* İkonların Sol Tarafta Sabit Durması */
.input-with-icon i,
.input-with-icon svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%) !important;
  font-size: 14px;
  color: #c59d27;
  pointer-events: none;
  /* İkona tıklanınca input'a odaklanması için */
  z-index: 2;
}

/* Input İçindeki Yazının İkonun Sağında Kalması İçin Sol Boşluk */
.input-with-icon input {
  padding-left: 36px !important;
  /* İkon ile metin arasına güvenli boşluk bırakır */
  width: 100%;
}

/* Ana Kart Kutu Arka Planları (Kişisel Bilgiler, Detaylar vb.) */
/* 1. Inputlar, Selectler ve Textarea İçin Bir Tık Daha Açık Krem */
.input-with-icon input,
.phone-input-group input,
.phone-input-group select,
.res-input-box textarea {
  background-color: #fdfbf7 !important;
  /* Bir tık daha açık, yumuşak krem */
  border: 1px solid #ebdcc5 !important;
  color: #2c2c2c !important;
}

/* 2. Bebek Koltuğu Akordiyon Başlığı (Üst Bar) */
.seat-accordion-header {
  background-color: #f9f4ea !important;
  border: 1px solid #ebdcc5 !important;
  color: #1a1a1a !important;
}

/* 3. Puset / Çocuk Koltuğu / Yükseltici Kartları */
.seats-flex-grid .seat-counter-card,
.seat-card {
  background-color: #fdfbf7 !important;
  /* Açık krem zemin */
  border: 1px solid #ebdcc5 !important;
}

/* Sayaç Alanları (Sayı Kutusunun İçi ve Artı/Eksi Butonları) */
.counter-box input,
.counter-value {
  background-color: #f5eedf !important;
  border: 1px solid #e2d3b4 !important;
  color: #1a1a1a !important;
}

.counter-box button,
.btn-counter {
  background-color: #f9f4ea !important;
  border: 1px solid #d4af37 !important;
  color: #aa7c11 !important;
}

.counter-box button:hover,
.btn-counter:hover {
  background-color: #d4af37 !important;
  color: #ffffff !important;
}

/* 4. Odaklanma (Focus) Anı */
.input-with-icon input:focus,
.phone-input-group input:focus,
.phone-input-group select:focus,
.res-input-box textarea:focus {
  background-color: #ffffff !important;
  /* Yazarken netlik için saf beyaz parlaklık */
  border-color: #d4af37 !important;
  outline: none;
}

/* Input/Select Kapsayıcısı */
.field-wrapper {
  position: relative !important;
  display: block;
  width: 100%;
}

/* Hata Durumunda Kenarlık */
.input-error {
  border: 1.5px solid #d4a017 !important;
  box-shadow: 0 0 5px rgba(212, 175, 55, 0.4) !important;
}

/* Baloncuk Stili */
.custom-tooltip {
  position: absolute;
  top: calc(100% + 6px);
  left: 20px;
  background-color: #ffffff;
  color: #2d3748;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 99999 !important;
  border: 1px solid #dcdcdc;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

/* Baloncuğun Ok (Üçgen) Kısmı */
.custom-tooltip::before {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 15px;
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #ccc transparent;
}

.custom-tooltip::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 15px;
  border-width: 0 6px 7px 6px;
  border-style: solid;
  border-color: transparent transparent #dcdcdc transparent;
  z-index: 1;
}

/* Turuncu Ünlem Kutucuğu */
.tooltip-icon {
  background: #ff5722;
  color: #fff;
  font-weight: bold;
  padding: 1px 6px;
  border-radius: 3px;
  font-size: 12px;
}

/* Form Grid Düzenlemesi */
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-grid .row {
  display: flex;
  flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

.form-grid .col-md-6 {
  flex: 0 0 50%;
  max-width: 50%;
  padding-right: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}

/* Kutuların altındaki çakışan marjinleri sıfırlama */
.form-grid .res-input-box {
  margin-bottom: 0 !important;
  width: 100%;
}

/* Mobil Ekranlar İçin (768px altı alt alta dursun) */
@media (max-width: 767px) {
  .form-grid .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
    margin-bottom: 15px;
  }
}

/* Tooltip için kapsayıcı konumlandırması */
/* Tooltip için kapsayıcı konumlandırması */
.input-with-icon,
.phone-input-group,
.res-input-box,
.col-md-6 {
  position: relative !important;
}

/* Ekran görüntüsündeki Popover Stil Uyarı Baloncuğu */
.custom-tooltip {
  position: absolute;
  top: calc(100% + 8px);
  left: 25px;
  background-color: #ffffff;
  color: #2d3748;
  padding: 8px 14px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  z-index: 9999;
  border: 1px solid #dcdcdc;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  animation: fadeIn 0.2s ease-in-out;
}

/* Sol Taraftaki Turuncu Ünlem İkonu Kutusu */
.custom-tooltip-icon {
  background-color: #e65100;
  color: #ffffff;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 12px;
  flex-shrink: 0;
}

/* Yukarı Bakan Beyaz Ok İşareti ve Dış Çizgisi */
.custom-tooltip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 15px;
  border-width: 0 6px 7px 6px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
  z-index: 2;
}

.custom-tooltip::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 18px;
  border-width: 0 7px 7px 7px;
  border-style: solid;
  border-color: transparent transparent #dcdcdc transparent;
  z-index: 1;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.res-card,
.form-grid,
.res-input-box,
.field-wrapper,
.input-with-icon,
.phone-input-group {
  overflow: visible !important;
  position: relative !important;
}

/* Modal Arka Plan Karartması */
.custom-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(3px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 999999 !important;
  padding: 15px;
}

.custom-modal-overlay.active {
  display: flex !important;
}

/* Ana Modal Kartı (Görseldeki Altın Çerçeveli Yapı) */
.custom-modal-card {
  position: relative;
  background: #ffffff;
  width: 100%;
  max-width: 440px;
  border-radius: 20px;
  border: 3px solid #d4a017;
  padding: 25px 20px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  text-align: center;
  animation: modalPopIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Kapatma Çarpı Butonu */
.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #999;
  cursor: pointer;
}

.modal-header-custom .modal-emoji {
  font-size: 32px;
  display: block;
  margin-bottom: 5px;
}

.modal-header-custom h2 {
  font-size: 20px;
  font-weight: 700;
  color: #1a1a1a;
  margin: 0 0 15px 0;
}

/* İç Bilgi Kutusu (Görseldeki krem arka planlı alan) */
.modal-info-box {
  background-color: #fffdf5;
  border: 1px solid #f3e5ab;
  border-radius: 12px;
  padding: 12px 15px;
  text-align: left;
  font-size: 14px;
  color: #333;
  margin-bottom: 15px;
}

.modal-info-box p {
  margin: 4px 0;
}

/* Yeşil Onay/Başarı Kutusu (Görseldeki Fiyat Alanı Tarzında) */
.modal-success-banner {
  background-color: #fffdf0;
  border: 1.5px solid #e6c200;
  border-radius: 16px;
  padding: 18px 15px;
  margin-bottom: 20px;
}

.banner-title {
  display: block;
  font-size: 13px;
  font-weight: 800;
  color: #b8860b;
  /* Altın/Sarı tonu */
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.banner-subtext {
  font-size: 24px;
  font-weight: 800;
  color: #996515;
  /* Koyu Altın/Kahve vurgusu */
}

/* Yeşil Ana Sayfa Butonu (Görseldeki Buton Stili) */
.modal-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: linear-gradient(135deg, #d4a017, #aa7c11);
  /* Sarımsı Altın Gradyan */
  color: #ffffff !important;
  text-decoration: none !important;
  font-size: 17px;
  font-weight: 700;
  padding: 13px 0;
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(212, 160, 23, 0.4);
  transition: transform 0.15s ease, background 0.2s ease;
}

.modal-action-btn:hover {
  background: linear-gradient(135deg, #b8860b, #8c660d);
  transform: translateY(-1px);
}

@keyframes modalPopIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.cancel-email-card a {
  color: #d4a017;
  /* Altın/sarı tonu */
  font-weight: bold;
  text-decoration: none;
}

.cancel-email-card a:hover {
  text-decoration: underline;
}

/* İki Kartı Yan Yana Hizalayan Kapsayıcı */
.cancel-contact-row {
  display: flex;
  gap: 15px;
  /* Kartlar arasındaki boşluk */
  width: 100%;
}

/* Kartların Eşit Genişlikte Olmasını Sağlar */
.cancel-contact-row .cancel-card {
  flex: 1;
  margin-bottom: 0;
  /* Alt boşluğu sıfırla */
}

/* Mobil Cihazlarda Üst Üste Geçsin (Duyarlı Tasarım) */
@media (max-width: 768px) {
  .cancel-contact-row {
    flex-direction: column;
  }
}

.cancel-contact-row {
  display: flex;
  gap: 15px;
  width: 100%;
}

.cancel-contact-row .cancel-card {
  flex: 1;
  margin-bottom: 0;
}

/* Her İki Kart İçin Birebir Aynı Arka Plan ve Kenarlık Stili */
.cancel-whatsapp-card,
.cancel-email-card {
  background-color: #fffdf0;
  /* Krem / Sarımsı arka plan */
  border: 1px solid #d4a017;
  /* Altın sarısı çerçeve */
  border-radius: 12px;
  padding: 16px 20px;
}

/* Kart İçindeki Link Stilleri */
.cancel-whatsapp-card a,
.cancel-email-card a {
  color: #b8860b;
  /* Altın sarısı yazı rengi */
  font-weight: 700;
  text-decoration: none;
}

.cancel-whatsapp-card a:hover,
.cancel-email-card a:hover {
  text-decoration: underline;
}

/* Mobil Uyumlu Yapı */
@media (max-width: 768px) {
  .cancel-contact-row {
    flex-direction: column;
    gap: 10px;
  }
}

/* ==========================================
   MOBİL REZERVASYON SIRALAMASI
   ========================================== */

@media (max-width: 900px) {

  #finalBookingForm {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 20px !important;
    box-sizing: border-box !important;
  }

  #finalBookingForm .form-left-col,
  #finalBookingForm .form-right-col {
    display: contents !important;
  }

  /* TÜM KARTLAR TAM GENİŞLİK */
  #finalBookingForm .res-card {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  /* Kişisel Bilgiler */
  #finalBookingForm .form-left-col>.res-card:nth-child(1) {
    order: 1;
  }

  /* Bebek Koltuğu & Notlar */
  #finalBookingForm .form-left-col>.res-card:nth-child(2) {
    order: 2;
  }

  /* Rezervasyon Detayları */
  #finalBookingForm .form-right-col>.res-card:nth-child(1) {
    order: 3;
  }

  /* Ödeme Detayları */
  #finalBookingForm .form-right-col>.res-card:nth-child(2) {
    order: 4;
  }

  /* Ödeme Yöntemi + Rezervasyonu Tamamla */
  #finalBookingForm .form-left-col>.res-card:nth-child(3) {
    order: 5;
  }
}

/* ==========================================================================
   BLOG SAYFALARI
   ========================================================================== */
.blog-hero {
  background: var(--grad-primary);
  padding: 90px 0 60px;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
}

.blog-hero h1 {
  font-size: 2.4rem;
  color: var(--text-main);
  margin-bottom: 10px;
}

.blog-hero p {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.blog-section {
  padding: 60px 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 28px;
  margin-top: 20px;
}

.blog-card {
  background: var(--grad-card);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}

.blog-card-img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  display: block;
}

.blog-card-body {
  padding: 22px 22px 26px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-card-tag {
  display: inline-block;
  background: var(--grad-gold-btn);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 4px 12px;
  border-radius: 20px;
  margin-bottom: 12px;
  width: fit-content;
  text-transform: uppercase;
}

.blog-card h2 {
  font-size: 1.15rem;
  color: var(--text-main);
  margin-bottom: 10px;
  line-height: 1.35;
}

.blog-card p {
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;
}

.blog-card-link {
  color: var(--primary-gold-dark);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.92rem;
}

.blog-card-link:hover {
  text-decoration: underline;
}

/* TEKİL BLOG YAZISI SAYFASI */
.post-hero {
  background: var(--grad-primary);
  padding: 80px 0 50px;
  text-align: center;
  border-bottom: 1px solid var(--card-border);
}

.post-hero .post-breadcrumb {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 14px;
}

.post-hero .post-breadcrumb a {
  color: var(--primary-gold-dark);
  text-decoration: none;
}

.post-hero h1 {
  font-size: 2.1rem;
  color: var(--text-main);
  max-width: 800px;
  margin: 0 auto 12px;
}

.post-meta {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.post-section {
  padding: 50px 0 70px;
}

.post-content {
  max-width: 780px;
  margin: 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 16px;
  box-shadow: var(--shadow-light);
  padding: 40px 44px;
}

.post-content h2 {
  font-size: 1.4rem;
  color: var(--text-main);
  margin: 32px 0 14px;
}

.post-content h2:first-child {
  margin-top: 0;
}

.post-content p {
  color: var(--text-main);
  line-height: 1.8;
  margin-bottom: 16px;
  font-size: 1rem;
}

.post-content ul {
  margin: 0 0 16px 20px;
  color: var(--text-main);
  line-height: 1.8;
}

.post-content li {
  margin-bottom: 6px;
}

.post-cta {
  margin-top: 30px;
  padding: 26px;
  background: var(--grad-primary);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  text-align: center;
}

.post-cta p {
  margin-bottom: 14px;
  font-weight: 600;
  color: var(--text-main);
}

.post-cta a.btn-post-reserve {
  display: inline-block;
  background: var(--grad-gold-btn);
  color: #fff;
  font-weight: 700;
  padding: 13px 30px;
  border-radius: 30px;
  text-decoration: none;
  box-shadow: var(--shadow-gold);
}

.post-related {
  max-width: 780px;
  margin: 36px auto 0;
}

.post-related h3 {
  font-size: 1.1rem;
  margin-bottom: 14px;
  color: var(--text-main);
}

.post-related ul {
  list-style: none;
  margin: 0;
}

.post-related li {
  margin-bottom: 8px;
}

.post-related a {
  color: var(--primary-gold-dark);
  text-decoration: none;
  font-weight: 600;
}

.post-related a:hover {
  text-decoration: underline;
}

@media (max-width: 600px) {
  .post-content {
    padding: 28px 22px;
  }

  .post-hero h1 {
    font-size: 1.5rem;
  }
}


/* ==========================================================================
   ANASAYFA - BLOG YAZILARI SLIDER (index.html)
   ========================================================================== */
.blog-carousel-section {
  padding: 50px 20px;
  text-align: center;
}

.blog-carousel-track {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  scroll-behavior: smooth;
  padding: 10px 5px 16px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.blog-carousel-track::-webkit-scrollbar {
  display: none;
}

.blog-slide-card {
  flex: 0 0 320px;
  background: var(--grad-card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-light);
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-slide-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-gold);
}

.blog-slide-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

.blog-slide-body {
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.blog-slide-body h3 {
  font-size: 1.05rem;
  line-height: 1.4;
  color: var(--text-main);
  margin: 12px 0 10px;
}

.blog-slide-body p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.6;
  margin-bottom: 18px;
  flex-grow: 1;

  /* Excerpt'i 3 satırla sınırla */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  /* Standart özellik eklendi */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.btn-read-more {
  display: inline-block;
  align-self: flex-start;
  background: var(--grad-gold-btn);
  color: #fff;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 10px 20px;
  border-radius: 24px;
  text-decoration: none;
  box-shadow: var(--shadow-gold);
  transition: transform 0.25s ease;
}

.btn-read-more:hover {
  transform: translateY(-2px);
}

.blog-see-all {
  margin-top: 10px;
}

.blog-see-all a {
  display: inline-block;
  color: var(--primary-gold-dark);
  font-weight: 700;
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 2px solid var(--primary-gold);
  padding-bottom: 3px;
}

.blog-see-all a:hover {
  color: var(--text-main);
}

@media (max-width: 768px) {
  .blog-slider-track {
    gap: 0 !important;
  }

  .blog-slide-card {
    flex: 0 0 100% !important;
    min-width: 100% !important;
    scroll-snap-align: start;
  }
}

@media (max-width: 768px) {

  /* Ok butonlarını mobilde daha küçük yapıp kenarlara alabilir veya saklayabilirsiniz */
  .slide-btn {
    display: flex;
    /* İsteğe göre 'none' yapılarak sadece parmakla kaydırma bırakılabilir */
    width: 36px;
    height: 36px;
    font-size: 18px;
    z-index: 10;
  }

  .blog-slide-card {
    flex: 0 0 260px;
    max-width: 260px;
  }

  .blog-slide-card img {
    height: 160px;
  }
}

/* ==========================================
   SLIDER & GALERİ EKSTRA DÜZENLEMELERİ
   (Not: .slider-wrapper, .slide-btn, .gallery-slider,
   .slide-card ve .slide-card img kuralları yukarıda
   zaten tanımlı olduğu için burada TEKRAR edilmiyor.
   Böylece kart yüksekliği ile görsel yüksekliği
   çakışıp altta boşluk kalmıyor.) */

/* 4. Blog Slider Ekstra Düzeltmeleri */
.blog-carousel-track {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 10px 5px 20px 5px;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
}

.blog-carousel-track::-webkit-scrollbar {
  display: none;
}

.blog-slide-card {
  flex: 0 0 300px;
  /* Mobil için ideal blog kartı genişliği */
  max-width: 300px;
  border-radius: 12px;
  overflow: hidden;
  scroll-snap-align: start;
}

.blog-slide-card img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  display: block;
}

/* ==========================================
   MOBİL EKRANLAR İÇİN MEDIA QUERY (max-width: 768px)
   ========================================== */
@media (max-width: 768px) {

  /* Ok butonlarını mobilde boyutlandır ve hizala */
  .slide-btn {
    display: flex;
    width: 36px;
    height: 36px;
    font-size: 16px;
    z-index: 10;
  }

  .slide-btn.prev-btn {
    left: 0;
  }

  .slide-btn.next-btn {
    right: 0;
  }
}