/* =========================================
   1. GOOGLE FONTS IMPORT
   ========================================= */
@import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Urbanist:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* =========================================
   2. CSS DEĞİŞKENLERİ (ROOT)
   ========================================= */
:root {
  /* --- Renk Paleti --- */
  --color-accent: #B3963B;              /* Butonlar ve ekstra başlıklar için */
  --color-bg-light: #F4F1ED;            /* Belirtilen bazı arka planlar için */
  --color-text-main: #000000;           /* Ana metin rengi */
  --color-text-muted: rgba(0, 0, 0, 0.5); /* %50 opak siyah (silik yazılar için) */
  --color-white: #FFFFFF;

    --color-lightblue: #5B9EC93B;
  /* --- Tipografi --- */
  --font-heading: 'Marcellus', serif;
  --font-body: 'Urbanist', sans-serif;
}

/* =========================================
   3. TEMEL SIFIRLAMA (RESET) & GÖVDE
   ========================================= */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: var(--font-body);
  color: var(--color-text-main);
  background-color: var(--color-white); /* İsteğe göre burayı var(--color-bg-light) yapabilirsin */
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a{
    text-decoration: none;
}
/* =========================================
   4. TİPOGRAFİ & BAŞLIKLAR
   ========================================= */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 400; /* Marcellus sadece 400 ağırlığını destekler */
  line-height: 1.2;
  margin-bottom: 1rem;
}

/* Ekstra başlık rengi için yardımcı sınıf */
.text-accent {
  color: var(--color-accent);
}

/* Silik metinler için yardımcı sınıf */
.text-muted {
  color: var(--color-text-muted);
}

/* =========================================
   5. ARKA PLANLAR
   ========================================= */
.bg-light {
  background-color: var(--color-bg-light);
}

/* =========================================
   6. BUTON TASLAĞI
   ========================================= */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-accent);
  color: var(--color-white); /* Vurgu rengi üzerinde beyaz metin okunaklı olacaktır */
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 4px; /* Tasarımına göre burayı yuvarlatabilir (ör: 50px) veya sıfırlayabilirsin */
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.3s ease, opacity 0.3s ease;
}

.btn-primary:hover {
  opacity: 0.9;
}
/* =========================================
   7. SİTE HEADER (MOBİL ÖNCELİKLİ)
   ========================================= */
.site-header {
  background-color: var(--color-white);
  padding: 1rem 5%;
  position: relative;
  z-index: 50; /* Üstte kalması için */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05); /* Mobilde hafif gölge */
}

.header-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Header Eleman Grupları */
 .header-right {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.header-left {
display: flex;
  align-items: center;
  gap: 0.5rem;
}
.header-left span{
    color:#fff;
    font-weight: 600;
}
.header-center {
  display: flex;
  align-items: center;
  gap: 0rem;
}

/* Ortalamak için sağ ve sol tarafların genişliklerini eşitleme */
.header-left, .header-right {
  flex: 1;
}
.header-right {
  justify-content: flex-end;
}
.header-center {
  justify-content: center;
}

/* --- Logolar --- */
.logo-desktop {
  display: none; /* Mobilde beyaz logoyu gizle */
  height: 170px; /* Logo boyutuna göre ayarla */
}

.logo-mobile {
  display: block; /* Mobilde normal logoyu göster */
  height: 40px;
}

/* --- Hamburger İkonu --- */
.hamburger {
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: end;
}

.hamburger span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: var(--color-text-main);
  transition: all 0.3s ease;
  border-radius: 50px;
}
.hamburger .lasthamburger {
  width: 18px;
}
.header-left a:hover{
    cursor: pointer;
}
.header-left a:hover .lasthamburger {
  width: 30px;
}

.header-left a:hover .lasthamburger {
  width: 30px;
}

.header-left:has(.menu-text-link:hover) .lasthamburger {
  width: 30px;
}

/* Varsayılan lasthamburger genişliği (animasyonun yumuşak olması için) */
.lasthamburger {
  transition: width 0.3s ease; /* Zaten varsa bunu eklemene gerek yok */
}
/* --- Masaüstü Özel Elemanları Gizleme (Mobilde) --- */
.desktop-nav, .reservation-btn {
  display: none;
}

/* --- Dil Seçici --- */
.lang-dropdown {
  position: relative;
}

.lang-btn {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  color: var(--color-text-main);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}



/* =========================================
   8. PAGE HEADER (HERO) KISMI
   ========================================= */
.page-header {
  position: relative;
  width: 100%;
  height: 70vh; /* MOBİL İÇİN YÜKSEKLİK */
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: end;
      justify-content: center;
    text-align: left;
}

.header-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5); 
  z-index: 1;
}

.page-header-content {
  position: relative;
  z-index: 2;
  padding: 0 1rem 2.5rem 0;
}
.page-header-content p{
    color:#fff;
    font-size:16px;
}
.page-title {
  font-size: 2.5rem;
  color: var(--color-accent);
}

/* =========================================
   9. MASAÜSTÜ GÖRÜNÜMÜ (Min 992px)
   ========================================= */
@media (min-width: 992px) {
  
  /* Header Page-Header'ın Üstüne Biniyor */
  .site-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background-color: transparent; /* Şeffaf arka plan */
    box-shadow: none;
  }

  /* Logoları Değiştir */
  .logo-mobile {
    display: none;
  }
  .logo-desktop {
    display: block;
  }

  /* Hamburger Rengi (Şeffaf arkaplanda beyaz görünmeli) */
  .hamburger span {
    background-color: var(--color-white);
  }

  /* Masaüstü Menü ve Butonu Göster */
  .desktop-nav {
    display: flex;
    gap: 1.5rem;
  }
  
  .desktop-nav a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s;
  }

  .desktop-nav a:hover {
    color: var(--color-accent);
  }

  .reservation-btn {
    display: inline-flex;
  }

  /* Dil Seçici Metin Rengi Beyaz Olmalı */
  .lang-btn {
    color: var(--color-white);
  }

  /* Page Header Yüksekliği Güncellemesi */
  .page-header {
    height: 90vh; /* MASAÜSTÜ İÇİN YÜKSEKLİK */
  }

  .page-title {
    font-size: 4rem; /* Masaüstünde daha büyük başlık */
  }
}
/* =========================================
   RESERVATION WIDGET
   ========================================= */
.reservation-widget-wrapper {
  position: relative;
  z-index: 20; /* Hero overlay'in üstünde kalması için */
  /* Widget yüksekliğinin yaklaşık yarısı kadar negatif margin ile yukarı çekiyoruz */
  margin-top: -45px; 
}

.reservation-widget {
  background-color: var(--color-white);
  border-radius: 50px; /* Hap (pill) görünümü */
  padding: 1rem 2rem;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08); /* Görseldeki gibi yumuşak gölge */
}

.widget-item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid rgba(0, 0, 0, 0.05); /* Aralardaki hafif ayırıcı çizgiler (opsiyonel) */
  padding: 0.5rem 1rem;
}

/* Son öğenin çizgisini kaldır */
.widget-item:last-of-type {
  border-right: none;
}

.widget-label {
  font-family: var(--font-body);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  margin-bottom: 0.2rem;
}

.widget-label .icon {
  font-size: 1.1rem;
}

.widget-value {
  font-family: var(--font-body);
  color: var(--color-text-main);
  font-weight: 600;
  font-size: 1rem;
}

/* Özel Buton Ayarı (Hap şeklinde) */
.widget-btn {
  border-radius: 30px; 
  padding: 0.85rem 2rem;
  width: 100%;
}

/* =========================================
   MOBİL VE TABLET UYUMLULUĞU
   ========================================= */
@media (max-width: 991.98px) {
  .reservation-widget-wrapper {
    margin-top: -80px; /* Mobilde widget alt alta geçip uzayacağı için offset'i artırıyoruz */
  }
  
  .reservation-widget {
    border-radius: 20px; /* Mobilde daha dikdörtgenimsi köşeler */
    padding: 1.5rem;
  }
  
  .widget-item {
    border-right: none; /* Mobilde aradaki çizgileri kaldır */
    margin-bottom: 1rem;
    padding: 0;
  }
}
/* İkonun varsayılan durumu ve geçiş efekti */
.custom-arrow-btn .btn-arrow {
  font-size: 2rem; /* Oku ne kadar büyük istediğine göre bu değeri (ör: 2.5rem) artırabilirsin */
  transition: transform 0.3s ease; /* Yumuşak bir kayma animasyonu sağlar */
}

/* Butonun üzerine gelindiğinde (Hover) okun davranışı */
.custom-arrow-btn:hover .btn-arrow {
  transform: translateX(10px); /* Oku sağa doğru 10px kaydırır */
}
.btn-primary:hover{
    opacity:0.7;
    background-color:var(--color-accent);
}
/* =========================================
   GÖRSEL KOMPOZİSYON (KOLAJ) ALANI
   ========================================= */
.image-composition {
  width: 100%;
  /* Kapsayıcının yüksekliğini otomatik ayarlar. 
     Görseldeki gibi dikey dikdörtgen bir alan yaratır. */
  aspect-ratio: 4 / 5; 
  display: block; 
}

/* Sol Taraftaki Uzun Resim */
.image-composition .img-back {
  position: absolute;
  top: 10%; /* Sağdaki resme göre biraz daha aşağıdan başlar */
  left: 0;
  width: 55%;
  height: 70%; /* Kapsayıcının en altına kadar uzanır */
  object-fit: cover; /* Farklı boyutta resim yüklense bile sündürmez, keser */
  z-index: 1;
}

/* Sağ Taraftaki Üstteki Resim */
.image-composition .img-front {
  position: absolute;
  top: 0; /* En üstten başlar */
  right: 0;
  width: 55%;
  height: 60%; /* Altında logo için boşluk bırakacak kadar kısa tutulur */
  object-fit: cover;
  z-index: 2;
}

/* Sağ Alttaki Logo */
.image-composition .comp-logo {
  position: absolute;
  bottom: 25%; /* Alt kenardan biraz yukarıda */
  right: 0; /* Sağ kenardan biraz içeride */
  width: 40%; /* Logoyu sağdaki alanın ortasına sığdırır */
  z-index: 3;
  object-fit: contain;
}

/* =========================================
   MOBİL İÇİN KÜÇÜK DOKUNUŞLAR
   ========================================= */
@media (max-width: 991.98px) {
  .image-composition {
    aspect-ratio: 1 / 1; /* Mobilde veya tablette alanı biraz daha kareye yaklaştırabilirsin */
    margin-top: 2rem;
  }
}
/* =========================================
   ELEGANT FULLSCREEN MENU (MODAL)
   ========================================= */
.fullscreen-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: rgba(15, 15, 15, 0.95); /* Koyu şık bir siyah tonu */
  backdrop-filter: blur(15px); /* Arka planı buzlu cam yapar */
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}

/* Menü Aktif Olduğunda */
.fullscreen-menu-overlay.is-active {
  opacity: 1;
  visibility: visible;
}

/* Kapatma Butonu */
.menu-close-btn {
  position: absolute;
  top: 2rem;
  right: 3rem;
  cursor: pointer;
  color: #ffffff;
  transition: transform 0.4s ease, color 0.3s ease;
  z-index: 10000;
}

.menu-close-btn span {
  font-size: 3rem;
  font-weight: 300;
}

.menu-close-btn:hover {
  transform: rotate(90deg); /* Üzerine gelince döner */
  color: var(--color-accent); 
}

/* --- SOL: Menü Linkleri (Staggered Animation) --- */
.fs-menu-list {
  margin: 0;
  padding: 0;
}

.fs-menu-list li {
  margin-bottom: 1.5rem;
  transform: translateY(40px); /* Aşağıdan başlar */
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Menü açıldığında linkler sırayla yukarı kayarak belirir */
.fullscreen-menu-overlay.is-active .fs-menu-list li {
  transform: translateY(0);
  opacity: 1;
}

/* Sırayla gelme gecikmeleri (Stagger effect) */
.fullscreen-menu-overlay.is-active .fs-menu-list li:nth-child(1) { transition-delay: 0.2s; }
.fullscreen-menu-overlay.is-active .fs-menu-list li:nth-child(2) { transition-delay: 0.3s; }
.fullscreen-menu-overlay.is-active .fs-menu-list li:nth-child(3) { transition-delay: 0.4s; }
.fullscreen-menu-overlay.is-active .fs-menu-list li:nth-child(4) { transition-delay: 0.5s; }
.fullscreen-menu-overlay.is-active .fs-menu-list li:nth-child(5) { transition-delay: 0.6s; }

.fs-menu-list a {
  color: #ffffff;
  font-family: var(--font-heading), 'Playfair Display', serif; /* Senin HTML'deki fontuna uygun */
  font-size: 4rem;
  text-decoration: none;
  position: relative;
  display: inline-block;
  transition: color 0.3s ease;
}

.fs-menu-list a:hover {
  color: var(--color-accent);
}

/* Link Hover: Alt Çizgi Efekti */
.fs-menu-list a::after {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--color-accent);
  transition: width 0.4s ease;
}

.fs-menu-list a:hover::after {
  width: 100%;
}

/* --- SAĞ: Otel Bilgileri (Gecikmeli Giriş) --- */
.menu-info-block {
  transform: translateX(40px);
  opacity: 0;
  transition: all 0.7s ease 0.6s; /* Menü linklerinden sonra gelir */
}

.fullscreen-menu-overlay.is-active .menu-info-block {
  transform: translateX(0);
  opacity: 1;
}

.hover-accent {
  transition: color 0.3s;
}
.hover-accent:hover {
  color: var(--color-accent) !important;
}

/* Mobil Görünüm Optimizasyonu */
@media (max-width: 991.98px) {
  .fs-menu-list a { font-size: 2.8rem; }
  .menu-close-btn { top: 1.5rem; right: 1.5rem; }
  .menu-close-btn span { font-size: 2.5rem; }
}
/* =========================================
   RESIDENCE TABS (SEKMELER)
   ========================================= */
.custom-residence-tabs {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: space-between; /* Sekmeleri alana eşit yayar görseldeki gibi */
  flex-wrap: nowrap;
  overflow-x: auto; /* Mobilde taşmayı önler */
  overflow-y: hidden;
}

/* Scrollbar'ı mobilde gizlemek için (Şık görünüm) */
.custom-residence-tabs::-webkit-scrollbar {
  display: none;
}

.custom-residence-tabs .nav-item {
  flex-grow: 1;
  text-align: center;
}

.custom-residence-tabs .nav-link {
  border: none;
  background: transparent;
  color: var(--color-text-main);
  font-family: var(--font-body);
  font-size: 1.25rem;
  padding: 1rem 0.5rem;
  position: relative;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Seçili Olmayan Tab Hover */
.custom-residence-tabs .nav-link:hover {
  color: var(--color-accent);
}

/* Seçili (Aktif) Tab Stili */
.custom-residence-tabs .nav-link.active {
  font-weight: 600;
  color: var(--color-text-main);
  background: transparent;
}

/* Seçili Tab'ın Altındaki Vurgu Çizgisi */
.custom-residence-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--color-accent); /* Altın vurgu rengimiz */
}

/* =========================================
   RESIDENCE ÖZELLİK KUTULARI (FEATURE BOXES)
   ========================================= */
.residence-feature-box {
  background-color: var(--color-bg-light); /* Belirlediğimiz F4F1ED rengi */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 140px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border: 1px solid rgba(0,0,0,0.02); /* Çok çok hafif bir çerçeve */
}

.residence-feature-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

/* İkon Boyutu */
.feature-icon {
  width: 45px;
  height: 45px;
  object-fit: contain;
}

/* Metin Boyutu */
.feature-text {
  font-size: 0.85rem;
  line-height: 1.5;
}

/* =========================================
   MOBİL OPTİMİZASYONLAR
   ========================================= */
@media (max-width: 767.98px) {
  .custom-residence-tabs .nav-link {
    font-size: 1rem;
    padding: 1rem;
  }
  
  .residence-feature-box {
    min-height: 120px;
    padding: 1rem !important;
  }
  
  .feature-icon {
    width: 35px;
    height: 35px;
  }
  
  .feature-text {
    font-size: 0.75rem;
  }
}
/* 1. Öğe: Sola Yaslı */
.custom-residence-tabs .nav-item:first-child {
  text-align: left;
}
/* Sol taraftaki Bootstrap boşluğunu sıfırla ki tam kenara yapışsın */
.custom-residence-tabs .nav-item:first-child .nav-link {
  padding-left: 0; 
}

/* 2. Öğe: Tam Ortalı */
.custom-residence-tabs .nav-item:nth-child(2) {
  text-align: center;
}

/* 3. Öğe (Sonuncu): Sağa Yaslı */
.custom-residence-tabs .nav-item:last-child {
  text-align: right;
}
/* Sağ taraftaki Bootstrap boşluğunu sıfırla ki tam kenara yapışsın */
.custom-residence-tabs .nav-item:last-child .nav-link {
  padding-right: 0; 
}
#tab-14{
        justify-self: start;
}
#tab-17{
        justify-self: center;
}
#tab-19{
        justify-self: end;
}
#tab-15{
        justify-self: start;
}
#tab-20{
        justify-self: center;
}
#tab-18{
        justify-self: end;
}
/* Seçili Tab'ın Altındaki Vurgu Çizgisi (KALINLAŞTIRILDI) */
.custom-residence-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: -1px; /* Konteynerin altındaki o ince gri çizginin tam üstüne binmesi için */
  left: 0;
  width: 100%;
  height: 4px; /* Çizgi kalınlığı (İstersen 5px de yapabilirsin) */
  background-color: var(--color-accent);
  border-radius: 4px 4px 0 0; /* Üst köşelere şık bir yuvarlaklık katar */
}
.instagram-image img{
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}
/* =========================================
   DİL SEÇİCİ (LANG DROPDOWN)
   ========================================= */
.lang-dropdown {
  position: relative;
  display: inline-block;
}

/* Tıklanabilirlik ve ikon hizalaması */
.lang-btn {
  background: transparent;
  border: none;
  font-family: var(--font-body);
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 0;
}

.lang-btn .arrow {
  font-size: 0.7rem;
  transition: transform 0.3s ease;
}

/* Hover durumunda menüyü göster ve oku döndür */
.lang-dropdown:hover .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-dropdown:hover .lang-btn .arrow {
  transform: rotate(180deg);
}

/* =========================================
   MASAÜSTÜ MENÜ STİLİ (Birleştirilmiş)
   ========================================= */
.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 10px; /* Menüyü aşağı iter */
  background-color: var(--color-white);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  border-radius: 6px;
  min-width: 80px;
  padding: 0.5rem 0;
  z-index: 100;
  
  /* Yumuşak açılış animasyonu */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

/* Görünmez Köprü (Fare boşluğa düşmesin diye) */
.lang-menu::before {
  content: '';
  position: absolute;
  top: -15px; /* Yukarıya doğru 15px'lik tıklama alanı */
  left: 0;
  width: 100%;
  height: 15px;
}

.lang-menu a {
  display: block;
  padding: 0.5rem 1rem;
  color: var(--color-text-main);
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: background-color 0.2s, color 0.2s;
}

.lang-menu a:hover {
  background-color: var(--color-bg-light);
  color: var(--color-accent);
}

/* =========================================
   MOBİL MENÜ STİLİ (Max 991.98px)
   NOT: Ezilmemesi için her zaman en altta kalmalı!
   ========================================= */
@media (max-width: 991.98px) {
  .lang-menu {
    background-color: var(--color-accent);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); 
  }

  .lang-menu a {
    color: var(--color-white);
  }

  .lang-menu a:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-white);
  }
}
/* Tıklanabilir Alan İşaretçileri */
.custom-date-trigger, .custom-guest-trigger {
  cursor: pointer;
  transition: background-color 0.2s;
  border-radius: 8px; /* Hover olduğunda köşeler tatlı dursun diye */
}
.custom-date-trigger:hover, .custom-guest-trigger:hover {
  background-color: var(--color-bg-light);
}

/* Misafir Dropdown */
.guest-dropdown {
  display: none; /* Varsayılan olarak kapalı */
  position: absolute;
  top: 110%; /* Kutunun hemen altında belirir */
  left: 0;
  min-width: 250px;
  z-index: 999;
}
.guest-dropdown.active {
  display: block;
}

/* Sayı artırma/azaltma butonları */
.btn-guest-calc {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-color: rgba(0,0,0,0.1);
  color: var(--color-text-main);
}
.btn-guest-calc:hover {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}
/* Değerlerimiz Kutuları Hover Efekti */
.transition-hover {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}
.transition-hover:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08) !important;
}
/* =========================================
   CONTACT FORM 7 ÖZEL STİLİ (Bono Style)
   ========================================= */
.custom-cf7-wrapper .wpcf7-form-control-wrap input,
.custom-cf7-wrapper .wpcf7-form-control-wrap textarea {
    width: 100%;
    background-color: var(--color-bg-light); /* F4F1ED rengimiz */
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 0.8rem 1.2rem;
    font-family: var(--font-body);
    color: var(--color-text-main);
    transition: all 0.3s ease;
    margin-bottom: 1rem;
}

.custom-cf7-wrapper .wpcf7-form-control-wrap input:focus,
.custom-cf7-wrapper .wpcf7-form-control-wrap textarea:focus {
    outline: none;
    border-color: var(--color-accent); /* Tıklanınca kenarlık altın rengi olur */
    background-color: var(--color-white);
    box-shadow: 0 0 0 4px var(--color-lightblue); /* Hafif mavi bir glow efekti */
}

/* Gönder Butonu */
.custom-cf7-wrapper .wpcf7-submit {
    background-color: var(--color-accent);
    color: var(--color-white);
    border: none;
    border-radius: 30px;
    padding: 0.8rem 2.5rem;
    font-family: var(--font-body);
    font-weight: 600;
    transition: opacity 0.3s ease;
    cursor: pointer;
    width: 100%; /* Mobilde tam genişlik, masaüstünde değiştirebilirsin */
}

.custom-cf7-wrapper .wpcf7-submit:hover {
    opacity: 0.85;
}

/* Form hata ve başarı mesajlarının rengini düzeltme */
.custom-cf7-wrapper .wpcf7-response-output {
    border-radius: 8px !important;
    font-family: var(--font-body);
    margin-top: 1rem !important;
}

/* =========================================
   DİNAMİK GOOGLE MAPS DÜZENLEMESİ
   ========================================= */
/* Panelden gelen iframe'in tasarımımızı bozmaması ve şık durması için */
.custom-map-wrapper {
    line-height: 0; /* İframe altındaki boşluğu siler */
}

.custom-map-wrapper iframe {
    width: 100% !important; /* Ekranı tam kaplamaya zorlar */
    height: 450px !important; /* Harita yüksekliği */
    border: none !important;
    filter: grayscale(20%) contrast(1.1); /* Haritayı bir tık daha premium/mat gösterir (Opsiyonel) */
}

/* İletişim İkonlarında Hover */
.transition-hover-color:hover {
    color: var(--color-accent) !important;
}
/* Single Residence Özel Stilleri */
.residence-hero {
    height: 70vh;
    background-size: cover;
    background-position: center;
    position: relative;
}

.residence-excerpt {
    max-width: 600px;
    letter-spacing: 0.5px;
}

/* Galeri Slider Butonları */
.residenceSwiper {
    padding: 20px 0;
}

.custom-nav {
    width: 45px !important;
    height: 45px !important;
    background-color: var(--color-accent) !important;
    border-radius: 4px;
    color: white !important;
}
.custom-nav::after { font-size: 1.2rem !important; font-weight: bold; }

/* 3'lü Özellik Tablosu */
.residence-features-grid .border-info {
    border-color: #5B9EC9 !important; /* Görseldeki açık mavi tonu */
}

.feature-col {
    min-height: 250px;
}

.feature-list li {
    position: relative;
    padding-bottom: 8px;
}

.bg-light-subtle {
    background-color: #fcfcfc;
}


.residence-gallery .owl-controls .owl-nav span {
    pointer-events: all;
    background: var(--color-accent) !important; /* Altın rengi */
    color: white !important;
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: all 0.3s ease;
    margin: 0 -22px; /* Kenarlardan hafif taşma (Şık durur) */
}

.residence-gallery .owl-controls .owl-nav span:hover {
    opacity: 0.9;
    transform: scale(1.1);
}

.residence-gallery .owl-nav button span {
    font-size: 24px;
}

/* Mobilde butonları içeri çekelim */
@media (max-width: 768px) {
    .residence-gallery .owl-nav button {
        margin: 0 5px;
    }
}
/* Carousel içindeki görselleri 1:1 (Kare) yapma */
#residenceGallery .item img {
    aspect-ratio: 1 / 1;    /* Modern tarayıcılar için en temiz yöntem */
    object-fit: cover;      /* Görseli kareye yayar, boşluk bırakmaz ve deforme etmez */
    width: 100%;            /* Genişliği korur */
    height: auto;           /* Oranı korumak için */
    border-radius: 16px;    /* Tasarımındaki yuvarlatılmış köşeleri korumak için (rounded-4 karşılığı) */
}

/* Eğer çok eski bir tarayıcı desteği gerekirse (opsiyonel fallback) */
@supports not (aspect-ratio: 1 / 1) {
    #residenceGallery .item {
        position: relative;
        width: 100%;
        padding-top: 100%; /* Kare alanı oluşturur */
    }
    #residenceGallery .item img {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
    }
}
.residence-gallery .owl-nav {
    position: absolute;
    top: 93%;
    left:5%!important;
    width: 100%;
    transform: translateY(-50%);
    pointer-events: none;
    display: flex;
    gap:60px!important;
    z-index: 10;
}

.residence-gallery .owl-nav button {
    pointer-events: all;
    background: var(--color-accent) !important;
    width: 40px;
    height: 40px;
    margin: 0 -20px; /* Okları hafifçe dışarı taşır, daha şık durur */
}
/* Özellik Kartları Stil Revizesi */
.feature-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(0, 0, 0, 0.05) !important; /* Çok hafif bir gri çerçeve */
}

.feature-card:hover {
    transform: translateY(-5px); /* Üzerine gelince hafif yükselme efekti */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05) !important;
    border-color: var(--color-accent) !important; /* Vurgu rengi çerçeve */
}

.feature-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 15px;
}

/* Küçük bir nokta ekleyelim listeye */
.feature-list li::before {
    content: "•";
    color: var(--color-accent);
    position: absolute;
    left: 0;
    font-weight: bold;
}

.text-accent {
    color: #B3963B; /* Bono Hotel Altın/Accent Rengi */
    letter-spacing: 1px;
    font-size: 0.9rem;
}
/* Owl Carousel Genel Konteynırı */
.residence-gallery .owl-carousel {
    position: relative;
    padding-bottom: 40px; /* Oklar için alt boşluk */
}

/* --- WEB: OKLAR (NAV) STİLLERİ --- */
@media (min-width: 768px) {
    .residence-gallery .owl-nav {
        position: absolute;
        bottom: 0;
        left: 0; /* Sol alt */
        display: flex;
        gap: 12px;
        margin: 0 !important;
    }

    .residence-gallery .owl-nav button.owl-prev,
    .residence-gallery .owl-nav button.owl-next {
        background-color: var(--color-accent) !important; /* Altın/Kahve tonu */
        color: #fff !important;
        width: 48px;
        height: 48px;
        border-radius: 50% !important; /* Tam yuvarlak */
        display: flex !important;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;
        border: none !important;
        padding: 0 !important;
    }

    .residence-gallery .owl-nav button:hover {
        transform: scale(1.05);
        opacity: 0.9;
    }

    .residence-gallery .owl-nav span {
        font-size: 24px;
        line-height: 1;
    }
}

/* --- MOBİL: NOKTALAR (DOTS) STİLLERİ --- */
@media (max-width: 767px) {
    .residence-gallery .owl-dots {
        text-align: center;
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }

    .residence-gallery .owl-dot span {
        width: 10px;
        height: 10px;
        margin: 5px 7px;
        background: #D1D1D1 !important;
        display: block;
        border-radius: 50%;
        transition: all 0.3s ease;
    }

    .residence-gallery .owl-dot.active span {
        background: var(--color-accent) !important;
        width: 25px; /* Aktif noktayı biraz genişletmek şık durur */
        border-radius: 5px;
    }
}

/* Görseldeki sol üstte duran dekoratif bej kutu efekti (Opsiyonel) */
.residence-gallery::before {
    content: "";
    position: absolute;
    top: 40px;
    left: calc(var(--bs-gutter-x) * .5);
    width: 100px;
    height: 80px;
    background-color: #F4F1ED; /* Açık bej */
    z-index: 0;
    border-radius: 4px;
}