/* ===========================
   Babil Garden - style.css (FULL)
   =========================== */

/* Açık ve ferah palet */
:root{
  --brown:#6f5647;     /* açılmış kahve */
  --gold:#D8B98B;      /* sıcak altın */
  --cream:#FFF8F0;     /* krem arkaplan */
  --stone:#F5F1EA;     /* açık taş */
  --ink:#222;          /* metin */
}

html,body{ scroll-behavior:smooth; }
.text-brown{ color: var(--brown) !important; }

/* ---------------------------
   Butonlar
---------------------------- */
.btn-brown{ background:var(--brown); color:#fff; border:1px solid var(--brown); }
.btn-brown:hover{ background:#5f4b3f; color:#fff; }
.btn-outline-brown{ color:var(--brown); border:1px solid var(--brown); }
.btn-outline-brown:hover{ background:var(--brown); color:#fff; }

/* ---------------------------
   Bölüm boşlukları
---------------------------- */
.section-padding{ padding: 72px 0; }
.bg-cream{ background: var(--cream); }

/* ---------------------------
   HERO – tam ekran video
   (siyah bant bırakmadan kaplat)
---------------------------- */
/* Yükseklik güvenli birimlerle */
.hero-full{ min-height: 100svh; }
.hero-overlay{ min-height: 100svh; }
@supports (height: 100dvh){
  .hero-full{ min-height: 100dvh; }
  .hero-overlay{ min-height: 100dvh; }
}

/* Video kapsayıcı */
.hero-media{
  position:absolute; inset:0; overflow:hidden;
  background:#000; /* siyah bant yerine düzgün arkaplan */
}

/* YouTube iframe / MP4 videoyu ekrana kaplat */
.hero-media iframe,
.hero-media video{
  position:absolute; top:50%; left:50%;
  /* 16:9 – genişlik bazlı */
  width:100vw; height:56.25vw;           /* 100 * 9 / 16 */
  /* Yükseklik bazlı yedek (dar ekranlar) */
  min-width:177.78vh; min-height:100vh;  /* 100 * 16 / 9 */
  transform:translate(-50%,-50%);
  object-fit:cover;                       /* MP4 için */
  pointer-events:none;                    /* hero’da tıklama engellenmesin */
}

/* İçerik katmanı (daha şeffaf) */
.hero-overlay{
  position:relative; z-index:2;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,.35),
    rgba(255,255,255,.55) 35%,
    rgba(255,255,255,.65)
  );
}
@media (max-width: 991.98px){
  .hero-overlay{
    background: linear-gradient(
      180deg,
      rgba(255,255,255,.40),
      rgba(255,255,255,.60) 35%,
      rgba(255,255,255,.72)
    );
  }
}
/* Başlık/metin okunurluğu */
#hero h1, #hero .lead{ text-shadow:0 2px 10px rgba(0,0,0,.12); }

/* ---------------------------
   Özellik kartları
---------------------------- */
.feature-card{
  background:#fff; border:1px solid #eee; border-radius:16px;
  padding:20px; box-shadow:0 8px 22px rgba(0,0,0,.05);
}
.feature-card .icon-wrap{
  width:56px; height:56px; display:grid; place-items:center;
  background:var(--stone); border-radius:12px; margin-bottom:10px;
}

/* ---------------------------
   Timeline
---------------------------- */
.timeline{ display:grid; gap:24px; }
.timeline-item{
  display:grid; grid-template-columns:1fr 1fr; gap:20px;
  align-items:center; background:#fff; border:1px solid #eee;
  border-radius:16px; padding:18px;
}
.timeline-media img{ width:100%; height:auto; border-radius:12px; }
@media (max-width: 992px){ .timeline-item{ grid-template-columns:1fr; } }

/* ---------------------------
   Galeri
---------------------------- */
.gallery-img{
  width:100%; height:100%; object-fit:cover;
  border-radius:12px; border:1px solid #eee; background:#fff;
}

/* ---------------------------
   Referans slider (tek satır)
---------------------------- */
.ref-slider{ position:relative; }
.ref-track{
  display:flex; gap:16px; overflow:auto; padding-bottom:8px;
  scroll-snap-type:x mandatory; scroll-padding:1px;
  -webkit-overflow-scrolling:touch;
}
.ref-track::-webkit-scrollbar{ height:10px; }
.ref-track::-webkit-scrollbar-thumb{ background:#d9c9b2; border-radius:6px; }
.ref-item{ scroll-snap-align:start; flex:0 0 100%; }
@media (min-width: 992px){ .ref-item{ flex:0 0 calc(33.333% - 10.7px); } }
.ref-card{
  background:#fff; border:1px solid #eee; border-radius:14px;
  padding:18px; height:100%; box-shadow:0 8px 18px rgba(0,0,0,.05);
}
.ref-card h6{ color:var(--brown); margin-bottom:6px; }

/* ---------------------------
   Footer & Sosyal ikonlar
---------------------------- */
.footer{ background:#fff; border-top:1px solid #eee; }
.social-links{ text-align:center; } /* mobilde ortalamayı garanti et */
.social-btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid #e6dccc; border-radius:10px; background:#fff; color:var(--brown);
}
.social-btn svg{ display:block; }
.social-btn:hover{ background:var(--stone); }

/* ---------------------------
   WhatsApp floating
---------------------------- */
.whatsapp-float{
  position:fixed; right:18px; bottom:20px; z-index:9999;
  width:68px; height:68px; display:grid; place-items:center;
  background:#25D366; border-radius:50%; box-shadow:0 12px 28px rgba(0,0,0,.28);
  text-decoration:none;
}

/* ===========================
   MOBİL DÜZENLEMELER
=========================== */

/* 1) NAVBAR (MOBİL) — logo + yazı yan yana (eski düzen) */
@media (max-width: 991.98px){
  #mainNav .container{
    position: static !important;
    min-height: auto !important;
  }
  #mainNav .navbar-brand{
    position: static !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;      /* yan yana */
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
  }
  #mainNav .navbar-brand img{
    width:40px; height:40px;
    margin:0 .5rem 0 0 !important;
  }
}

/* 2) FOOTER marka bloğu (MOBİL) — logo üstte, yazı altta, tam ortalı */
@media (max-width: 767.98px){
  .footer .col-md-4:first-child{ text-align:center !important; }
  .footer .col-md-4:first-child img{
    display:block; margin:0 auto 8px;     /* logo ortada */
  }
  .footer .col-md-4:first-child strong{
    display:block; margin-bottom:6px;     /* “Babil GARDEN” ayrık */
  }
  .footer .col-md-4:first-child p{ margin-bottom:0; }
}

/* 3) FOOTER alt satır — © ortada, “with ❤️ Arısu…” alt satırda */
@media (max-width: 767.98px){
  .footer .d-flex.flex-wrap.justify-content-between.align-items-center.small{
    flex-direction:column;
    justify-content:center !important;
    align-items:center !important;
    text-align:center;
    row-gap:6px; padding:8px 0;
  }
  .footer .d-flex.flex-wrap.justify-content-between.align-items-center.small a{
    display:block;                         /* alt satırda, ortalı */
  }
}

/* WhatsApp float: en üstte gizli, aşağı kayınca görünür */
.whatsapp-float{
  position:fixed; right:18px; bottom:20px; z-index:9999;
  width:68px; height:68px; display:grid; place-items:center;
  background:#25D366; border-radius:50%; box-shadow:0 12px 28px rgba(0,0,0,.28);
  text-decoration:none;

  /* başlangıçta gizli */
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.9);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}

/* görünecek hâli */
.whatsapp-float.is-visible{
  opacity:1; visibility:visible; transform:translateY(0) scale(1);
  pointer-events:auto;
}