/* ============================================================
   Akyar Koyu Otel & Pansiyon — style.css
   Bootstrap 5.3 CDN üzerine kurulu, çok sayfalı "Premium paket" teması.
   Sıra: bu dosya her sayfada bootstrap.min.css'ten SONRA yüklenir.

   İÇİNDEKİLER
   01. Renk & font değişkenleri
   02. Taşma önleme
   03. Navbar
   04. Hero (ana sayfa + iç sayfa başlıkları)
   05. Kartlar (olanak / oda / galeri / yorum)
   06. Fiyat tablosu
   07. Rezervasyon formu
   08. Sayfa içi bölümler (istatistik, süreç, SSS)
   09. Footer
   10. Sabit butonlar
   11. Responsive ince ayarlar
   ============================================================ */

/* ============================================================
   01. Renk & Font Değişkenleri
   Kimlik: Akdeniz kıyısı — derin deniz mavisi, kum/terracotta sıcaklığı,
   çam yeşili ikinci vurgu. Fotoğrafsız, gradyan ve tipografiyle taşınıyor.
   ============================================================ */
:root {
  --ink: #17242b;
  --slate: #3c5560;
  --sea: #0b7285;        /* ana marka rengi — derin deniz mavisi */
  --sea-dark: #0a4a58;
  --terracotta: #d97748; /* sıcak vurgu — kum/gün batımı */
  --terracotta-dark: #b85c33;
  --pine: #2f6e51;       /* ikincil vurgu — çam yeşili */
  --sand: #f6ecdc;       /* zemin — kum tonu */
  --sand-2: #efe0c8;
  --paper: #fffdf9;
  --txt-mid: #4f6670;
  --txt-light: #82969e;
  --border: rgba(23, 36, 43, 0.12);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 2px 16px rgba(23, 36, 43, 0.08);
  --shadow-md: 0 14px 34px rgba(23, 36, 43, 0.16);
  --tr: 0.25s ease;

  --bs-primary: var(--sea);
  --bs-primary-rgb: 11, 114, 133;
  --bs-body-font-family: 'Inter', sans-serif;
  --bs-body-color: var(--ink);
  --bs-link-color: var(--sea);
  --bs-link-hover-color: var(--sea-dark);
}

h1, h2, h3, .navbar-brand, .footer-brand {
  font-family: 'Fraunces', serif;
  letter-spacing: -0.01em;
}

/* ============================================================
   02. Taşma Önleme
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  width: 100%;
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  width: 100%;
  position: relative;
  background: var(--paper);
  padding-top: 76px; /* sabit navbar yüksekliği kadar boşluk — çok sayfalı
                          yapıda her sayfa başlığı doğrudan içerikle
                          başladığı için (tam ekran hero yok) bu daha
                          basit ve güvenilir */
}
img { max-width: 100%; height: auto; }

.section { padding: 4.5rem 0; }
.section.alt { background: var(--sand); }

.sec-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sea);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.sec-title { font-size: clamp(1.6rem, 4vw, 2.3rem); margin-bottom: 1.25rem; }
.sec-lead { color: var(--txt-mid); max-width: 680px; }

.btn-brand {
  background: var(--sea);
  border-color: var(--sea);
  color: var(--paper);
  font-weight: 700;
  border-radius: 10px;
  padding: 0.75rem 1.6rem;
  min-height: 44px;
  transition: transform var(--tr), box-shadow var(--tr), background var(--tr);
}
.btn-brand:hover {
  background: var(--sea-dark);
  border-color: var(--sea-dark);
  color: var(--paper);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.btn-outline-brand {
  border: 1.5px solid var(--sea);
  color: var(--sea);
  border-radius: 10px;
  padding: 0.75rem 1.6rem;
  min-height: 44px;
  font-weight: 700;
  transition: all var(--tr);
  background: transparent;
}
.btn-outline-brand:hover { background: var(--sea); color: var(--paper); }

.btn-sun {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--paper);
  font-weight: 700;
  border-radius: 10px;
  padding: 0.75rem 1.6rem;
  min-height: 44px;
}
.btn-sun:hover { background: var(--terracotta-dark); border-color: var(--terracotta-dark); color: var(--paper); }

.btn-green {
  background: var(--pine);
  border-color: var(--pine);
  color: var(--paper);
  font-weight: 700;
  border-radius: 10px;
  padding: 0.75rem 1.6rem;
  min-height: 44px;
}
.btn-green:hover { background: #21503a; border-color: #21503a; color: var(--paper); }

/* ============================================================
   03. Navbar
   ============================================================ */
#mainNavbar {
  background: rgba(255, 253, 249, 0.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
  overflow-x: hidden;
  max-width: 100vw;
}
#mainNavbar .container { min-width: 0; }

.navbar-brand {
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink) !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.navbar-brand .brand-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(150deg, var(--sea), var(--pine));
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  font-size: 1rem;
  flex-shrink: 0;
}
.navbar-brand span { color: var(--sea); }

.navbar-nav .nav-link {
  color: var(--txt-mid);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.6rem 0.9rem !important;
  border-radius: 8px;
}
.navbar-nav .nav-link:hover { color: var(--sea); }
.navbar-nav .nav-link.active { color: var(--sea); background: var(--sand); }

@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--paper);
    margin-top: 0.75rem;
    padding: 0.5rem 1rem 1rem;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-sm);
  }
  .navbar-nav .btn-brand { margin-top: 0.5rem; display: inline-block; }
}

/* ============================================================
   04. Hero
   ============================================================ */
#hero {
  position: relative;
  min-height: 86vh;
  min-height: 86svh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 3.5rem 0;
  margin: 0;
  /* GÖRSEL EKLEMEK İÇİN: assets/img/hero.jpg dosyasını koyun ve aşağıdaki
     listenin SONUNA `, url('assets/img/hero.jpg')` ekleyin — gradyan
     katmanı üstte kalacağı için fotoğraf yumuşak bir karartmayla görünür.
     Dosya yokken url() yazmak tarayıcı konsoluna 404 düşürdüğü için
     referans bilerek kaldırıldı. İkinci katman, fotoğrafsız halde
     yüzeye derinlik veren çizgi dokusudur. */
  background-color: var(--sea-dark);
  background-image:
    linear-gradient(120deg, rgba(10,74,88,0.92) 15%, rgba(11,114,133,0.75) 55%, rgba(217,119,72,0.55) 130%),
    repeating-linear-gradient(118deg, rgba(255,255,255,0.035) 0 2px, transparent 2px 26px);
  background-size: cover;
  background-position: center 40%;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
@media (max-width: 600px) {
  #hero { background-attachment: scroll; min-height: 78svh; }
}
.hero-inner { position: relative; z-index: 2; max-width: 640px; }
.eyebrow {
  display: inline-block;
  color: var(--paper);
  background: rgba(217, 119, 72, 0.32);
  border: 1px solid rgba(255,255,255,0.28);
  font-size: 0.8rem; letter-spacing: 0.06em;
  padding: 0.35rem 0.9rem;
  border-radius: 50px;
  margin-bottom: 1.25rem; font-weight: 600;
}
.hero-title { color: var(--paper); font-size: clamp(2rem, 5.5vw, 3.3rem); margin-bottom: 1.1rem; }
.hero-sub { color: rgba(255,255,255,0.88); font-size: 1.05rem; max-width: 540px; margin-bottom: 2rem; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 0.9rem; }

.hero-badges { display: flex; flex-wrap: wrap; gap: 1.5rem; margin-top: 2.5rem; }
.hero-badge { color: rgba(255,255,255,0.92); font-size: 0.85rem; display: flex; align-items: center; gap: 0.5rem; }
.hero-badge i { color: var(--terracotta); }

/* Küçük başlık — iç sayfalarda tam ekran hero yerine kullanılır */
.page-head {
  background: linear-gradient(120deg, var(--sea-dark), var(--sea) 65%, var(--pine) 145%);
  color: var(--paper);
  padding: 3.25rem 0;
}
.page-head h1 { color: var(--paper); font-size: clamp(1.8rem, 4.5vw, 2.6rem); margin-bottom: 0.6rem; }
.page-head p { color: rgba(255,255,255,0.88); max-width: 640px; margin: 0; }
.page-head .breadcrumb-link { color: rgba(255,255,255,0.78); font-size: 0.85rem; text-decoration: none; }
.page-head .breadcrumb-link:hover { color: var(--paper); }

/* ============================================================
   05. Kartlar
   ============================================================ */
.icon-tile {
  width: 52px; height: 52px;
  border-radius: 12px;
  background: var(--sand);
  color: var(--sea);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  margin-bottom: 1rem;
}

.service-card, .room-card, .post-card, .value-card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform var(--tr), box-shadow var(--tr);
}
.service-card:hover, .room-card:hover, .post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }

.service-card { padding: 1.75rem; }
.service-card h3 { font-size: 1.1rem; margin-bottom: 0.5rem; }
.service-card p { color: var(--txt-mid); font-size: 0.92rem; margin-bottom: 0; }
.service-card .price-tag { display: inline-block; margin-top: 1rem; font-weight: 700; color: var(--pine); font-size: 0.9rem; }

/* Oda kartı — klinikteki doctor-card deseninden esinlenildi */
.room-card { overflow: hidden; }
.room-photo {
  height: 190px;
  display: flex; align-items: center; justify-content: center;
  color: var(--paper);
  font-family: 'Fraunces', serif;
  font-size: 1.7rem;
  font-weight: 700;
  text-align: center;
  padding: 1rem;
  position: relative;
}
.room-photo.rp1 { background: linear-gradient(150deg, var(--sea), var(--sea-dark)); }
.room-photo.rp2 { background: linear-gradient(150deg, var(--terracotta), var(--terracotta-dark)); }
.room-photo.rp3 { background: linear-gradient(150deg, var(--pine), #1c4531); }
.room-photo.rp4 { background: linear-gradient(150deg, #3f9ab0, var(--sea-dark)); }
.room-badge {
  position: absolute; top: 0.75rem; right: 0.75rem;
  background: rgba(255,255,255,0.92); color: var(--ink);
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700;
  padding: 0.3rem 0.65rem; border-radius: 50px;
}
.room-body { padding: 1.4rem; }
.room-body h3 { font-size: 1.1rem; margin-bottom: 0.3rem; }
.room-meta { color: var(--sea); font-weight: 700; font-size: 0.85rem; margin-bottom: 0.7rem; display: flex; gap: 1rem; flex-wrap: wrap; }
.room-meta span { display: inline-flex; align-items: center; gap: 0.35rem; }
.room-body p { color: var(--txt-mid); font-size: 0.9rem; margin-bottom: 0.9rem; }
.room-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.room-feats li {
  font-size: 0.78rem; color: var(--slate);
  background: var(--sand); border-radius: 50px;
  padding: 0.3rem 0.7rem; display: inline-flex; align-items: center; gap: 0.3rem;
}
.room-feats li i { color: var(--pine); }

.value-card { padding: 1.75rem; text-align: left; }

.post-card { overflow: hidden; }
.post-cover {
  height: 150px;
  display: flex; align-items: flex-end;
  padding: 1rem;
  color: var(--paper);
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
}
.post-cover.pc1 { background: linear-gradient(140deg, var(--sea), var(--pine)); }
.post-cover.pc2 { background: linear-gradient(140deg, var(--pine), var(--sea-dark)); }
.post-cover.pc3 { background: linear-gradient(140deg, var(--terracotta), var(--sea-dark)); }
.post-body { padding: 1.4rem; }
.post-body h3 { font-size: 1.05rem; margin-bottom: 0.5rem; }
.post-body p { color: var(--txt-mid); font-size: 0.9rem; }

/* ============================================================
   06. Fiyat Tablosu — geniş içerik, mobilde yatay kaydırma sarmalayıcı
   ============================================================ */
/* Tablo dar ekrana sığmıyor; sayfayı yatay kaydırmak yerine tabloyu
   kendi kabı içinde kaydırıyoruz. Kap sayfaya sığar, tablo içeride kayar. */
.price-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
/* Kaydırılabildiği görünmezse kullanıcı sütunları kaçırır — mobilde ipucu */
.price-table-hint { display: none; }
@media (max-width: 600px) {
  .price-table-hint {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--txt-light);
    margin-bottom: 0.6rem;
  }
}
.price-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
  background: var(--paper);
  margin: 0;
}
.price-table th, .price-table td {
  padding: 0.9rem 1.1rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
  font-size: 0.92rem;
  white-space: nowrap;
}
.price-table thead th {
  background: var(--sea-dark);
  color: var(--paper);
  font-weight: 700;
  font-family: 'Fraunces', serif;
}
.price-table tbody tr:last-child td { border-bottom: none; }
.price-table tbody tr:hover { background: var(--sand); }
.price-table td.price-cell { font-weight: 700; color: var(--sea-dark); }
.price-table-note { font-size: 0.82rem; color: var(--txt-light); margin-top: 0.75rem; }

/* ============================================================
   07. Rezervasyon Formu
   ============================================================ */
.appt-form {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  box-shadow: var(--shadow-sm);
}
.appt-form .form-control,
.appt-form .form-select,
.appt-form .form-check-input {
  border-color: var(--border);
  background: var(--sand);
}
.appt-form .form-control:focus,
.appt-form .form-select:focus {
  border-color: var(--sea);
  box-shadow: 0 0 0 0.2rem rgba(11, 114, 133, 0.15);
}
.appt-form .invalid-feedback { font-size: 0.8rem; }

.form-success {
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(47, 110, 81, 0.1);
  border: 1px solid rgba(47, 110, 81, 0.4);
  border-radius: var(--radius-sm);
  color: var(--pine);
  font-weight: 700;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.form-success small { display: block; font-weight: 400; color: var(--txt-mid); margin-top: 0.25rem; }

.demo-note {
  background: rgba(11, 114, 133, 0.08);
  border: 1px dashed rgba(11, 114, 133, 0.35);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  font-size: 0.85rem;
  color: var(--sea-dark);
  margin-bottom: 1.5rem;
}

/* ============================================================
   08. İstatistik / Süreç / SSS / Galeri
   ============================================================ */
.stat-row { display: flex; flex-wrap: wrap; gap: 2.5rem; }
.stat-item strong { display: block; font-family: 'Fraunces', serif; font-size: 2rem; color: var(--sea); }
.stat-item span { color: var(--txt-mid); font-size: 0.88rem; }

.process-step { display: flex; gap: 1rem; margin-bottom: 1.75rem; }
.process-num {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sea);
  color: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.process-step h3 { font-size: 1.02rem; margin-bottom: 0.3rem; }
.process-step p { color: var(--txt-mid); font-size: 0.9rem; margin: 0; }

.accordion-button { font-weight: 700; color: var(--ink); }
.accordion-button:not(.collapsed) { color: var(--sea); background: var(--sand); box-shadow: none; }
.accordion-button:focus { box-shadow: 0 0 0 0.2rem rgba(11, 114, 133, 0.15); }

/* Galeri — fotoğraf yerine tipografik/desen blokları */
.gallery-item {
  height: 190px;
  border-radius: var(--radius);
  display: flex; align-items: flex-end;
  padding: 1.1rem;
  color: var(--paper);
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 700;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform var(--tr);
}
.gallery-item:hover { transform: translateY(-4px); }
.gallery-item span { position: relative; z-index: 2; }
.gallery-item::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 10%, rgba(255,255,255,0.22), transparent 55%);
}
.gallery-item.g1 { background: linear-gradient(150deg, var(--sea), var(--sea-dark)); }
.gallery-item.g2 { background: linear-gradient(150deg, var(--terracotta), var(--terracotta-dark)); }
.gallery-item.g3 { background: linear-gradient(150deg, var(--pine), #1c4531); }
.gallery-item.g4 { background: linear-gradient(150deg, #3f9ab0, var(--sea-dark)); }
.gallery-item.g5 { background: linear-gradient(150deg, #e0a95f, var(--terracotta-dark)); }
.gallery-item.g6 { background: linear-gradient(150deg, #4caf85, var(--pine)); }
.gallery-item.g7 { background: linear-gradient(150deg, var(--sea-dark), #123544); }
.gallery-item.g8 { background: linear-gradient(150deg, var(--terracotta-dark), #7d3f22); }

/* Olanak kartı — ikon + kısa açıklama */
.amenity-card { padding: 1.6rem; text-align: center; }
.amenity-card .icon-tile { margin: 0 auto 1rem; }
.amenity-card h3 { font-size: 1rem; margin-bottom: 0.4rem; }
.amenity-card p { color: var(--txt-mid); font-size: 0.86rem; margin: 0; }

/* Harita çerçevesi */
.map-frame { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border); }

/* ============================================================
   09. Footer
   ============================================================ */
#footer { background: var(--ink); color: #d8e6e6; padding: 3rem 0 1.5rem; }
.footer-brand { font-size: 1.15rem; color: var(--paper); font-weight: 700; }
.footer-brand span { color: #e0a45f; }
.footer-tag { color: rgba(216,230,230,0.62); font-size: 0.88rem; margin: 0.9rem 0 0; }
.footer-head { color: #e0a45f; font-weight: 700; margin-bottom: 1rem; font-size: 0.92rem; }
.footer-list { list-style: none; padding: 0; margin: 0; }
/* overflow-wrap: uzun e-posta adresi dar ekranda satır sonunda bölünmeyip
   sütundan taşıyordu (360px'de ölçülerek bulundu). */
.footer-list li {
  margin-bottom: 0.6rem;
  font-size: 0.88rem;
  color: rgba(216,230,230,0.78);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.footer-list a { color: inherit; }
.footer-list a:hover { color: #e0a45f; }
.footer-bottom {
  border-top: 1px solid rgba(216,230,230,0.14);
  margin-top: 2rem;
  padding-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: rgba(216,230,230,0.58);
}

/* ============================================================
   10. Sabit Butonlar
   ============================================================ */
#whatsappFab {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  width: 56px; height: 56px;
  background: #25d366;
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  z-index: 999;
  box-shadow: var(--shadow-md);
  transition: transform var(--tr);
}
#whatsappFab:hover { color: #fff; transform: scale(1.07); }

#scrollTop {
  position: fixed;
  right: 1.1rem;
  bottom: 5.4rem;
  width: 42px; height: 42px;
  background: var(--sea);
  color: var(--paper);
  border: none;
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  z-index: 998;
  box-shadow: var(--shadow-sm);
}
#scrollTop.visible { display: flex; }

/* ============================================================
   11. Responsive İnce Ayarlar
   ============================================================ */
@media (max-width: 767.98px) {
  /* Bootstrap'te g-5 gutter'ı 3rem olduğu için satıra -24px negatif margin
     veriyor; .container'ın yan boşluğu ise 12px. Aradaki 12px fark dar
     ekranda içeriği ekran dışına taşırıyor (ölçülerek bulundu). Mobilde
     gutter'ı 1.5rem'e indiriyoruz: negatif margin -12px olup container
     boşluğuyla tam örtüşüyor. */
  .row.g-5, .row.gx-5 { --bs-gutter-x: 1.5rem; }
}

@media (max-width: 480px) {
  .section { padding: 3.25rem 0; }
  #hero { padding: 2.5rem 0; }
  .hero-btns .btn { flex: 1 1 auto; text-align: center; }
  .page-head { padding: 2.5rem 0; }
  #whatsappFab { width: 50px; height: 50px; font-size: 1.3rem; }
  .gallery-item { height: 150px; }
}