/* ═══════════════════════════════════════════════════════════
   Horasan Butik Hotel — style.css  (v2)
   Tasarım: Ege Butik · Terracotta · Krem · Playfair + Lato
   ──────────────────────────────────────────────────────────
   Dosya yapısı:
   01. RESET & KÖK DEĞİŞKENLERİ
   02. TEMEL ELEMENTLER
   03. YARDIMCI SINIFLAR
   04. HEADER / NAV
   05. MOBİL MENÜ
   06. HERO
   07. ÖZELLIKLER ŞERIDI
   08. HAKKIMIZDA
   09. GALERİ (Ana sayfa şeridi)
   10. MISAFIR YORUMLARI
   11. CTA BÖLÜMÜ
   12. İLETİŞİM
   13. FOOTER
   14. WHATSAPP FLOAT
   15. LIGHTBOX
   16. FORM DURUMU / HATA
   17. ANİMASYON SINIFI
   18. SAYFA BAŞLIKLARI (iç sayfalar)
   19. GALERİ SAYFASI
   20. HAKKIMIZDA SAYFASI
   21. İLETİŞİM SAYFASI
   22. SCROLL-TO-TOP
   23. RESPONSIVE (Media Queries)
═══════════════════════════════════════════════════════════ */

/* ─── 01. RESET & KÖK DEĞİŞKENLERİ ─────────────────────── */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;          /* padding genişliği artırmasın */
}

:root {
  /* — Renkler — */
  --clr-primary:      #c2714f;     /* Terracotta / Kiremit */
  --clr-primary-dk:   #a85c3d;     /* Koyu terracotta (hover) */
  --clr-primary-lt:   #f0d9cf;     /* Açık terracotta (arka plan) */
  --clr-cream:        #faf7f2;     /* Ana arka plan */
  --clr-cream-dk:     #f0ebe2;     /* Hafif koyu krem (bölümler) */
  --clr-dark:         #1e1a16;     /* Ana koyu (başlıklar) */
  --clr-body:         #4a4540;     /* Gövde metni */
  --clr-muted:        #8c7d72;     /* Soluk metin */
  --clr-border:       #e5ddd4;     /* Kenarlık */
  --clr-white:        #ffffff;
  --clr-black:        #000000;

  /* — Tipografi — */
  --ff-heading: 'Playfair Display', Georgia, serif;
  --ff-body:    'Lato', 'Helvetica Neue', sans-serif;

  /* — Boyutlar — */
  --max-w:       1200px;           /* Maksimum içerik genişliği */
  --header-h:    80px;             /* Header yüksekliği */
  --radius:      12px;             /* Standart köşe yuvarlaması */
  --radius-sm:   8px;
  --radius-lg:   20px;

  /* — Geçişler — */
  --transition:  0.3s ease;        /* Standart animasyon süresi */

  /* — Gölgeler — */
  --shadow-sm:   0 2px 8px rgba(30,26,22,.06);
  --shadow-md:   0 4px 24px rgba(30,26,22,.10);
  --shadow-lg:   0 8px 40px rgba(30,26,22,.15);
}

/* ─── 02. TEMEL ELEMENTLER ──────────────────────────────── */
html {
  scroll-behavior: smooth;         /* Smooth scroll (CSS seviyesinde) */
  font-size: 16px;
  overflow-x: hidden;              /* Yatay kaymayı engelle */
}

body {
  font-family: var(--ff-body);
  color: var(--clr-body);
  background-color: var(--clr-cream);
  line-height: 1.6;
  padding-top: var(--header-h);    /* Header fixed olduğu için içerik alta itsin */
}

img {
  display: block;                  /* Inline boşluğunu kaldır */
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  cursor: pointer;
  font-family: var(--ff-body);
}

ul,
ol {
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--ff-heading);
  color: var(--clr-dark);
  line-height: 1.2;
  font-weight: 600;
}

p {
  line-height: 1.75;
}

/* ─── 03. YARDIMCI SINIFLAR ─────────────────────────────── */

/* İçeriği ortalar, max genişlik verir */
.container {
  max-width: var(--max-w);
  margin-inline: auto;             /* margin: 0 auto kısayolu */
  padding-inline: 24px;            /* padding: 0 24px kısayolu */
}

/* Bölüm ortak dikey boşluk */
.section {
  padding-block: 96px;             /* padding: 96px 0 kısayolu */
}

/* Açık krem arka plan */
.section--alt {
  background-color: var(--clr-cream-dk);
}

/* Koyu arka plan */
.section--dark {
  background-color: var(--clr-dark);
  color: var(--clr-white);
}

/* Bölüm başlık grubu (üst metin + başlık + çizgi) */
.section-header {
  text-align: center;
  margin-bottom: 56px;
}

/* "ÇEŞME · İZMİR" gibi üst küçük metin */
.eyebrow {
  display: inline-block;
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 12px;
}

/* Bölüm başlığı altındaki süslü çizgi */
.section-title {
  font-size: clamp(28px, 4vw, 44px);
  margin-bottom: 0;
}

.section-title::after {
  content: '';
  display: block;
  width: 52px;
  height: 3px;
  background: var(--clr-primary);
  margin: 18px auto 0;
  border-radius: 2px;
}

/* Sola hizalı başlıklar için */
.section-title--left::after {
  margin-left: 0;
}

/* Buton bazı */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 30px;
  border-radius: 4px;
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  border: 2px solid transparent;
  transition: var(--transition);
  cursor: pointer;
  white-space: nowrap;
}

/* Ana buton: Terracotta dolgulu */
.btn-primary {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}

.btn-primary:hover {
  background: var(--clr-primary-dk);
  border-color: var(--clr-primary-dk);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(194,113,79,.35);
}

/* Çerçeveli buton: Şeffaf */
.btn-outline {
  background: transparent;
  color: var(--clr-white);
  border-color: rgba(255,255,255,.6);
}

.btn-outline:hover {
  background: rgba(255,255,255,.12);
  border-color: var(--clr-white);
  transform: translateY(-2px);
}

/* Koyu zemin üstünde çerçeveli (iletişim sayfası) */
.btn-outline--dark {
  color: var(--clr-dark);
  border-color: var(--clr-dark);
}

.btn-outline--dark:hover {
  background: var(--clr-dark);
  color: var(--clr-white);
}

/* ─── 04. HEADER / NAV ──────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--transition), box-shadow var(--transition);
}

/* Sayfa tepesinde: şeffaf (hero görseli görünsün) */
.site-header:not(.scrolled) {
  background: transparent;
}

/* 60px+ scroll: beyaz arka plan */
.site-header.scrolled {
  background: rgba(250,247,242,.97);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);      /* Cam efekti */
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;  /* Logo sol, nav sağ */
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 24px;
}

/* Logo */
.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;                  /* Logo küçülmesin */
}

.logo-img {
  height: 68px;
  width: auto;
}

/* Menü linkleri */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 6px;
}

.nav-link {
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--clr-black);         /* Her zaman siyah */
  position: relative;
  transition: color var(--transition);
}

/* Hover alt çizgi animasyonu */
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 14px;
  right: 14px;
  height: 1.5px;
  background: var(--clr-primary);
  transform: scaleX(0);
  transition: transform var(--transition);
  transform-origin: left;
}

.nav-link:hover::after,
.nav-link.active::after {
  transform: scaleX(1);
}

/* Scroll sonrası link rengi - her zaman siyah kalır */
.site-header.scrolled .nav-link {
  color: var(--clr-dark);
}

/* Header şeffaf durumda da siyah metin için arka plan */
.site-header:not(.scrolled) {
  background: rgba(250,247,242,.92);
  backdrop-filter: blur(8px);
}

/* Rezervasyon butonu (nav içinde) */
.btn-rezerv {
  background: var(--clr-primary);
  color: var(--clr-white) !important;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.5px;
  transition: var(--transition);
}

.btn-rezerv::after {
  display: none;                   /* Alt çizgi efekti bu butona istemiyoruz */
}

.btn-rezerv:hover {
  background: var(--clr-primary-dk);
  transform: translateY(-1px);
}

/* Hamburger butonu (mobilde görünür) */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 6px;
  background: none;
  border: none;
  cursor: pointer;
}

.hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--clr-dark);   /* Her zaman koyu */
  border-radius: 2px;
  transition: var(--transition);
}

.site-header.scrolled .hamburger-line {
  background: var(--clr-dark);
}

/* ─── 05. MOBİL MENÜ ────────────────────────────────────── */
.mobile-menu {
  display: none;                   /* Başta gizli */
  position: fixed;
  inset: 0;                        /* top:0 right:0 bottom:0 left:0 */
  z-index: 1050;
  background: var(--clr-dark);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.mobile-menu.open {
  display: flex;                   /* Açık: görünür */
}

.mobile-menu-close {
  position: absolute;
  top: 24px;
  right: 24px;
  background: none;
  border: none;
  color: var(--clr-white);
  font-size: 36px;
  line-height: 1;
}

.mobile-nav-link {
  font-family: var(--ff-heading);
  font-size: 36px;
  color: var(--clr-white);
  transition: color var(--transition);
}

.mobile-nav-link:hover {
  color: var(--clr-primary);
}

/* ─── 06. HERO ──────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: calc(100vh - var(--header-h));
  display: flex;
  align-items: center;
  overflow: hidden;
}

/* Hero slideshow */
.hero-slides {
  position: absolute;
  inset: 0;
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.hero-slide.active {
  opacity: 1;
  animation: heroZoom 8s ease forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}

/* Slide gostergeciler */
.hero-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  gap: 10px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.45);
  transition: background 0.3s, transform 0.3s;
}

.hero-dot.active {
  background: var(--clr-white);
  transform: scale(1.4);
}

/* Koyu katman: fotograf ustunde, yazi okunabilsin */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    135deg,
    rgba(30,26,22,.72) 0%,
    rgba(30,26,22,.40) 50%,
    rgba(30,26,22,.60) 100%
  );
}

/* Icerik kutusu */
.hero-content {
  position: relative;
  z-index: 3;
  max-width: 640px;
  color: var(--clr-white);
  padding-block: 80px;
  animation: fadeInUp 0.9s ease both;
}

.hero-content .eyebrow {
  color: var(--clr-primary-lt);
}

.hero-content h1 {
  font-size: clamp(40px, 6vw, 72px);
  color: var(--clr-white);
  margin-block: 14px 20px;
  line-height: 1.1;
}

.hero-content p {
  font-size: 18px;
  color: rgba(255,255,255,.8);
  max-width: 480px;
  margin-bottom: 36px;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* ─── 07. ÖZELLİKLER ŞERİDİ ────────────────────────────── */
.features-strip {
  background: var(--clr-primary);
  padding-block: 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  divide-x: 1px solid rgba(255,255,255,.2);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 24px;
  border-right: 1px solid rgba(255,255,255,.2);
  transition: background var(--transition);
}

.feature-item:last-child {
  border-right: none;
}

.feature-item:hover {
  background: rgba(255,255,255,.08);
}

.feature-icon {
  font-size: 32px;
  flex-shrink: 0;
}

.feature-item h4 {
  font-family: var(--ff-heading);
  font-size: 16px;
  color: var(--clr-white);
  margin-bottom: 3px;
}

.feature-item p {
  font-size: 13px;
  color: rgba(255,255,255,.75);
  line-height: 1.4;
}

/* ─── 08. HAKKIMIZDA (Ana sayfa özet) ───────────────────── */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Fotoğraf bloğu */
.about-img-wrap {
  position: relative;
}

.about-img-main {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* Küçük öne çıkan kutu */
.about-badge {
  position: absolute;
  bottom: -24px;
  right: -24px;
  background: var(--clr-primary);
  color: var(--clr-white);
  padding: 24px 28px;
  border-radius: var(--radius-sm);
  text-align: center;
  box-shadow: var(--shadow-md);
}

.about-badge-num {
  font-family: var(--ff-heading);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
}

.about-badge-label {
  font-size: 12px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  opacity: .85;
  margin-top: 4px;
}

/* Metin tarafı */
.about-text .eyebrow {
  display: block;
  margin-bottom: 10px;
}

.about-text h2 {
  margin-bottom: 20px;
}

.about-text p {
  margin-bottom: 16px;
  color: var(--clr-body);
}

/* Özellik listesi */
.about-list {
  margin: 24px 0 32px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.about-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.about-list li::before {
  content: '';
  width: 18px;
  height: 2px;
  background: var(--clr-primary);
  flex-shrink: 0;
}

/* ─── 09. GALERİ ŞERİDİ (Ana sayfa) ────────────────────── */
.gallery-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  height: 420px;
}

.gallery-strip-item {
  position: relative;
  overflow: hidden;
  cursor: pointer;
}

.gallery-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-strip-item:hover img {
  transform: scale(1.08);
}

.gallery-strip-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,26,22,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity var(--transition);
}

.gallery-strip-item:hover .gallery-strip-overlay {
  opacity: 1;
}

.gallery-strip-icon {
  color: var(--clr-white);
  font-size: 32px;
}

/* ─── 10. MİSAFİR YORUMLARI ─────────────────────────────── */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.review-card {
  background: var(--clr-white);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
  transition: box-shadow var(--transition), transform var(--transition);
}

.review-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.review-stars {
  color: #f59e0b;                  /* Altın sarısı yıldız */
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.review-text {
  font-style: italic;
  color: var(--clr-body);
  margin-bottom: 16px;
  line-height: 1.7;
}

.review-text::before {
  content: '"';
  font-size: 48px;
  font-family: var(--ff-heading);
  color: var(--clr-primary-lt);
  line-height: 0.5;
  display: block;
  margin-bottom: 8px;
}

.review-author {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clr-primary-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--ff-heading);
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-primary);
  flex-shrink: 0;
}

.review-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--clr-dark);
}

.review-source {
  font-size: 12px;
  color: var(--clr-muted);
}

/* ─── 11. CTA BÖLÜMÜ ────────────────────────────────────── */
.cta-section {
  position: relative;
  text-align: center;
  overflow: hidden;
}

.cta-bg {
  position: absolute;
  inset: 0;
  background-image: url('../img/cta-bg.jpg');
  background-size: cover;
  background-position: center;
  filter: brightness(.4);          /* Görseli karart */
}

.cta-content {
  position: relative;
  z-index: 2;
}

.cta-content h2 {
  font-size: clamp(32px, 5vw, 56px);
  color: var(--clr-white);
  margin-bottom: 16px;
}

.cta-content p {
  font-size: 18px;
  color: rgba(255,255,255,.8);
  max-width: 500px;
  margin: 0 auto 36px;
}

.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─── 12. İLETİŞİM ──────────────────────────────────────── */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 56px;
  align-items: start;
}

/* Sol: İletişim bilgileri */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* WhatsApp büyük buton */
.wa-btn-big {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #25D366;
  color: var(--clr-white);
  padding: 16px 24px;
  border-radius: var(--radius-sm);
  font-weight: 700;
  font-size: 16px;
  transition: var(--transition);
  margin-bottom: 20px;
}

.wa-btn-big:hover {
  background: #1ebe58;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(37,211,102,.35);
}

.wa-btn-big svg {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
}

/* İletişim item (ikon + metin) */
.contact-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid var(--clr-border);
}

.contact-item:last-child {
  border-bottom: none;
}

.contact-item-icon {
  width: 44px;
  height: 44px;
  background: var(--clr-primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.contact-item-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--clr-primary);
  margin-bottom: 4px;
}

.contact-item-val {
  font-size: 16px;
  font-weight: 600;
  color: var(--clr-dark);
  line-height: 1.4;
}

.contact-item-val a {
  color: var(--clr-primary);
  transition: color var(--transition);
}

.contact-item-val a:hover {
  color: var(--clr-primary-dk);
  text-decoration: underline;
}

/* Harita */
.map-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 24px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--clr-border);
}

.map-wrap iframe {
  width: 100%;
  height: 260px;
  border: none;
  display: block;
}

/* Sağ: Form */
.contact-form-wrap {
  background: var(--clr-white);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--clr-border);
}

.contact-form-wrap h3 {
  font-size: 26px;
  margin-bottom: 6px;
}

.contact-form-wrap > p {
  font-size: 14px;
  color: var(--clr-muted);
  margin-bottom: 28px;
}

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

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}

.form-group.full {
  grid-column: 1 / -1;            /* Tüm satırı kapla */
}

.form-group label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-muted);
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 12px 14px;
  border: 1.5px solid var(--clr-border);
  border-radius: var(--radius-sm);
  background: var(--clr-cream);
  font-family: var(--ff-body);
  font-size: 15px;
  color: var(--clr-dark);
  outline: none;
  transition: border-color var(--transition), background var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--clr-primary);
  background: var(--clr-white);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: var(--clr-muted);
}

.form-group select option {
  background: var(--clr-white);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

/* Form submit butonu */
.form-submit {
  width: 100%;
  padding: 15px;
  background: var(--clr-primary);
  color: var(--clr-white);
  border: none;
  border-radius: var(--radius-sm);
  font-family: var(--ff-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: var(--transition);
  margin-top: 4px;
}

.form-submit:hover {
  background: var(--clr-primary-dk);
  transform: translateY(-1px);
}

/* ─── 13. FOOTER ────────────────────────────────────────── */
.site-footer {
  background: var(--clr-dark);
  color: rgba(255,255,255,.6);
  padding-block: 64px 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand .logo-img {
  height: 52px;
  filter: brightness(0) invert(1);  /* Logoyu beyaza çevir */
  opacity: .85;
  margin-bottom: 18px;
}

.footer-brand p {
  font-size: 14px;
  line-height: 1.75;
  max-width: 280px;
}

.footer-col h5 {
  font-family: var(--ff-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--clr-white);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-col ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-col ul a {
  font-size: 14px;
  color: rgba(255,255,255,.5);
  transition: color var(--transition);
}

.footer-col ul a:hover {
  color: var(--clr-primary);
}

.footer-contact-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
}

.footer-contact-line a {
  color: rgba(255,255,255,.5);
  transition: color var(--transition);
}

.footer-contact-line a:hover {
  color: var(--clr-primary);
}

/* Alt şerit */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.08);
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

.footer-bottom p {
  font-size: 13px;
}

.footer-socials {
  display: flex;
  gap: 8px;
}

.footer-socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: rgba(255,255,255,.5);
  transition: var(--transition);
}

.footer-socials a:hover {
  border-color: var(--clr-primary);
  background: var(--clr-primary);
  color: var(--clr-white);
}

/* ─── 14. WHATSAPP FLOAT BUTONU ─────────────────────────── */
.wa-float {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 9000;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  transition: transform var(--transition), box-shadow var(--transition);
  animation: popIn 0.5s ease 1s both;
}

.wa-float svg {
  width: 30px;
  height: 30px;
}

.wa-float:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 28px rgba(37,211,102,.6);
}

/* Hover'da tooltip */
.wa-float-tip {
  position: absolute;
  right: 68px;
  background: var(--clr-dark);
  color: var(--clr-white);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition);
}

.wa-float:hover .wa-float-tip {
  opacity: 1;
}

/* ─── 15. LIGHTBOX ──────────────────────────────────────── */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10,8,6,.94);
  align-items: center;
  justify-content: center;
}

.lightbox.open {
  display: flex;
}

.lb-img-wrap {
  max-width: 88vw;
  max-height: 85vh;
}

.lb-img-wrap img {
  max-width: 100%;
  max-height: 85vh;
  object-fit: contain;
  border-radius: 6px;
}

.lb-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: var(--clr-white);
  font-size: 44px;
  line-height: 1;
  opacity: .7;
  transition: opacity var(--transition);
}

.lb-close:hover {
  opacity: 1;
}

.lb-prev,
.lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255,255,255,.12);
  border: none;
  border-radius: 50%;
  width: 52px;
  height: 52px;
  color: var(--clr-white);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}

.lb-prev { left: 20px; }
.lb-next { right: 20px; }
.lb-prev:hover,
.lb-next:hover { background: rgba(255,255,255,.25); }

.lb-caption {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: rgba(255,255,255,.65);
  font-size: 14px;
}

/* ─── 16. FORM DURUMU ───────────────────────────────────── */
.error-msg {
  font-size: 12px;
  color: #dc2626;
  display: none;
  margin-top: 2px;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #dc2626;
}

.form-group.has-error .error-msg {
  display: block;
}

.form-success {
  display: none;
  margin-top: 16px;
  padding: 14px;
  background: rgba(22,163,74,.1);
  border: 1px solid rgba(22,163,74,.3);
  border-radius: var(--radius-sm);
  color: #15803d;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
}

/* ─── 17. ANİMASYON SINIFLARI ───────────────────────────── */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

/* IntersectionObserver ile tetiklenen animasyon */
.aos {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}

.aos.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ─── 18. SAYFA BAŞLIKLARI (iç sayfalar) ────────────────── */
.page-hero {
  position: relative;
  height: 48vh;
  min-height: 320px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}

.page-hero-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
}

.page-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,26,22,.75) 0%, rgba(30,26,22,.2) 100%);
}

.page-hero-content {
  position: relative;
  z-index: 2;
  color: var(--clr-white);
  padding: 40px 0;
}

.page-hero-content h1 {
  font-size: clamp(32px, 5vw, 56px);
  color: var(--clr-white);
}

/* Breadcrumb */
.breadcrumb {
  background: var(--clr-cream-dk);
  padding: 12px 0;
  border-bottom: 1px solid var(--clr-border);
  font-size: 13px;
  color: var(--clr-muted);
}

.breadcrumb a {
  color: var(--clr-primary);
}

.breadcrumb-sep {
  margin-inline: 8px;
  color: var(--clr-border);
}

/* ─── 19. GALERİ SAYFASI ────────────────────────────────── */
.gallery-filter {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.filter-btn {
  font-family: var(--ff-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 8px 20px;
  border-radius: 100px;
  border: 1.5px solid var(--clr-border);
  background: var(--clr-white);
  color: var(--clr-muted);
  transition: var(--transition);
}

.filter-btn.active,
.filter-btn:hover {
  background: var(--clr-primary);
  color: var(--clr-white);
  border-color: var(--clr-primary);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.gallery-item {
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
  cursor: pointer;
  aspect-ratio: 4/3;               /* Kare+yatay oran */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img {
  transform: scale(1.07);
}

.gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(30,26,22,.7) 0%, transparent 60%);
  opacity: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 20px;
  transition: opacity var(--transition);
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

.gallery-overlay-title {
  color: var(--clr-white);
  font-family: var(--ff-heading);
  font-size: 17px;
}

/* ─── 20. HAKKIMIZDA SAYFASI ────────────────────────────── */
.about-full {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: start;
}

.about-img-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.about-img-grid img {
  border-radius: var(--radius-sm);
  width: 100%;
  height: 220px;
  object-fit: cover;
}

.about-img-grid img:first-child {
  grid-column: 1 / -1;             /* İlk görsel tam satır */
  height: 300px;
}

.cesme-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.cesme-card {
  background: var(--clr-white);
  border-radius: var(--radius);
  padding: 28px 20px;
  text-align: center;
  border: 1px solid var(--clr-border);
  transition: var(--transition);
}

.cesme-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-primary-lt);
}

.cesme-card .card-icon {
  font-size: 36px;
  margin-bottom: 14px;
}

.cesme-card h4 {
  font-size: 17px;
  margin-bottom: 8px;
}

.cesme-card p {
  font-size: 13px;
  color: var(--clr-muted);
}

/* ─── 21. İLETİŞİM SAYFASI ──────────────────────────────── */
.contact-page-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 56px;
  align-items: start;
}

/* ─── 22. SCROLL-TO-TOP BUTONU ──────────────────────────── */
.scroll-top {
  position: fixed;
  bottom: 100px;
  right: 28px;
  z-index: 999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--clr-primary);
  color: var(--clr-white);
  border: none;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
  box-shadow: 0 4px 16px rgba(194,113,79,.4);
}

.scroll-top.visible {
  opacity: 1;
  pointer-events: auto;
}

.scroll-top:hover {
  transform: translateY(-3px);
}

/* ─── 23a. HAKKIMIZDA EK STİLLER ───────────────────────── */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.value-card {
  background: var(--clr-white);
  border-radius: var(--radius);
  padding: 36px 24px;
  text-align: center;
  border: 1px solid var(--clr-border);
  transition: var(--transition);
}

.value-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--clr-primary-lt);
}

.value-icon {
  font-size: 40px;
  margin-bottom: 16px;
  line-height: 1;
}

.value-card h3 {
  font-size: 18px;
  margin-bottom: 12px;
}

.value-card p {
  font-size: 14px;
  color: var(--clr-muted);
  line-height: 1.7;
}

/* İstatistik satırı */
.about-stats-row {
  display: flex;
  gap: 32px;
  padding-top: 8px;
}

.about-stat-item {
  text-align: center;
  padding: 20px 24px;
  background: var(--clr-cream-dk);
  border-radius: var(--radius);
  flex: 1;
  border: 1px solid var(--clr-border);
}

.about-stat-num {
  font-family: var(--ff-heading);
  font-size: 32px;
  font-weight: 700;
  color: var(--clr-primary);
  line-height: 1;
  margin-bottom: 6px;
}

.about-stat-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--clr-muted);
}

/* ─── 23. RESPONSIVE ────────────────────────────────────── */

/* ── Tablet (max-width: 1024px) ── */
@media (max-width: 1024px) {
  .nav-menu    { display: none; }     /* Masaüstü menü gizle */
  .hamburger   { display: flex; }     /* Hamburger göster */

  .about-grid  { grid-template-columns: 1fr; gap: 48px; }
  .about-img-wrap { max-width: 560px; margin: 0 auto; }
  .about-badge { bottom: -16px; right: 0; }

  .features-grid { grid-template-columns: repeat(2, 1fr); }

  .reviews-grid  { grid-template-columns: repeat(2, 1fr); }
  .cesme-cards   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid   { grid-template-columns: 1fr 1fr; }

  .gallery-strip { grid-template-columns: repeat(2, 1fr); height: auto; }
  .gallery-strip-item { height: 240px; }

  .contact-grid { grid-template-columns: 1fr; }
  .contact-page-grid { grid-template-columns: 1fr; }
  .about-full   { grid-template-columns: 1fr; }
  .values-grid  { grid-template-columns: repeat(2, 1fr); }
}

/* ── Mobil (max-width: 768px) ── */
@media (max-width: 768px) {
  :root { --header-h: 68px; }

  .section { padding-block: 64px; }

  .hero-content { padding-block: 60px; }
  .hero-cta { flex-direction: column; align-items: flex-start; }

  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-strip { grid-template-columns: 1fr 1fr; }

  .reviews-grid  { grid-template-columns: 1fr; }
  .footer-grid   { grid-template-columns: 1fr; gap: 32px; }
  .footer-bottom { flex-direction: column; text-align: center; }

  .contact-form-wrap { padding: 24px; }
  .form-row { grid-template-columns: 1fr; }

  .page-hero { height: 36vh; min-height: 260px; }
  .page-hero-content { padding: 28px 0; }

  .values-grid { grid-template-columns: 1fr 1fr; }
  .about-stats-row { gap: 12px; }
  .about-stat-item { padding: 14px 12px; }
}

/* ── Küçük Mobil (max-width: 480px) ── */
@media (max-width: 480px) {
  .gallery-grid   { grid-template-columns: 1fr; }
  .gallery-strip  { grid-template-columns: 1fr; }
  .gallery-strip-item { height: 220px; }
  .features-grid  { grid-template-columns: 1fr; }
  .cesme-cards    { grid-template-columns: 1fr 1fr; }
  .about-list     { grid-template-columns: 1fr; }
  .values-grid    { grid-template-columns: 1fr; }
  .about-stats-row { flex-direction: column; gap: 10px; }

  .wa-float        { width: 50px; height: 50px; bottom: 18px; right: 18px; }
  .wa-float svg    { width: 26px; height: 26px; }
  .scroll-top      { bottom: 84px; right: 18px; }
}