.whatsapp {
    position: fixed;
    left: 15px;
    bottom: 15px;
    transition: all .5s ease-in-out;
    z-index: 999;
}

.whatsapp a {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    font-size: 28px;
    display: block;
    text-align: center;
    line-height: 50px;
    color: white;
    background: #23252d;
    border: 1px solid #ffffff;
    
}

.whatsapp .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    line-height: normal;
    font-size: 15px;
    top: 13px;
    left: 105%;
    height: auto;
}

.whatsapp:hover a {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
   background-color: #4dc247;
}

.whatsapp:hover .tooltiptext {
    visibility: visible;
}



.telefon {
    position: fixed;
    left: 15px;
    bottom: 75px;
    transition: all .5s ease-in-out;
    z-index: 999;
}

.telefon a {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    font-size: 28px;
    display: block;
    text-align: center;
    line-height: 50px;
    color: white;
    background: #23252d;
    border: 1px solid #ffffff;
}

.telefon .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    line-height: normal;
    font-size: 15px;
    top: 13px;
    left: 105%;
    height: auto;
}

.telefon:hover a {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    background-color: #337ab7;
}

.telefon:hover .tooltiptext {
    visibility: visible;
}










.katalog {
    position: fixed;
    left: 15px;
    bottom: 135px;
    transition: all .5s ease-in-out;
    z-index: 999;
}

.katalog a {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.4);
    font-size: 28px;
    display: block;
    text-align: center;
    line-height: 50px;
    color: white;
    background: #23252d;
    border: 1px solid #ffffff;
}

.katalog .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    line-height: normal;
    font-size: 15px;
    top: 13px;
    left: 105%;
    height: auto;
}

.katalog:hover a {
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
     background-color: #e74c3c;
}

.katalog:hover .tooltiptext {
    visibility: visible;
}


.custom-btn {
            margin-top: 10px;
            display: inline-block;
            background-color: black;
            color: white;
            padding: 10px 10px;
            text-decoration: none;
            font-size: 12px;
            border-radius: 5px;
            transition: background-color 0.3s ease-in-out;
            letter-spacing: 7px;
        }

.custom-btn:hover {
    background-color: #00AEEF; /* Mavi renk */
    color: white;
}



#impetus_map {
    width: 100%;
    height: 480px;
    filter: grayscale(100%) contrast(1.1) brightness(0.95);
}



/* WINLUX FILTER - FORCE CENTER */
.wl-filterbar{
  text-align:center !important;
  width:100% !important;
}

.wl-filterbar #wlFilterWrap{
  display:inline-flex !important;
  justify-content:center !important;
  align-items:center !important;
  flex-wrap:wrap !important;

  /* template float/right override */
  float:none !important;
  position:static !important;
  right:auto !important;
  left:auto !important;

  margin:0 auto !important;
  padding:0 !important;
  list-style:none !important;
}

.wl-filterbar #wlFilterWrap > .btn-filter{
  display:inline-flex !important;
  align-items:center !important;
  float:none !important;
  margin:0 !important;
  padding:0 !important;
}

.wl-filterbar #wlFilterWrap > .btn-filter + .btn-filter::before{
  content:" / ";
  margin:0 14px;
  color: rgba(0,0,0,.35);
  font-weight:600;
}

.wl-filterbar #wlFilterWrap > .btn-filter a{
  display:inline-block !important;
  font-weight:700;
  color:#111;
  text-decoration:none;
}

.wl-filterbar #wlFilterWrap > .btn-filter.btn-active a{
  color:#1e88e5;
}

/* Isotope + responsive için doğru */
#wlGalleryGrid .project-grid-item-img img.project-img{
  width:100% !important;
  height:260px !important;      /* sabit yükseklik istiyorsan */
  object-fit:cover !important;
  display:block;
}
@media(max-width:991px){
  #wlGalleryGrid .project-grid-item-img img.project-img{ height:240px !important; }
}
@media(max-width:575px){
  #wlGalleryGrid .project-grid-item-img img.project-img{ height:220px !important; }
}



/* ==============================
   WL HERO COUNTER
============================== */
/* Banner parent'ı referans olsun */
.top-banner{ position: relative; }

/* ===== WL HERO COUNTER (FINAL) ===== */
/* Header yüksekliğini buradan ayarla */
:root{
  --wl-header-h: 86px;     /* header yüksekliği */
  --wl-counter-y: -90px;    /* sayacı menünün altından ne kadar aşağı koyayım */
}

/* Sayaç: menünün ALTINDAN başlar, asla menünün içine girmez */
.wl-hero-counter--top{
  position: absolute;
  left: 50%;
  top: calc(var(--wl-header-h) + var(--wl-counter-y));
  transform: translateX(-50%);
  z-index: 50;

   margin: 40px auto 18px;

  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 44px;

  text-align: center;
  color: #fff;
  padding: 14px 36px;
  pointer-events: none;
}

/* ✅ Görsel olarak “daha yukarıda” dursun diye:
   hero yazı grubunu biraz aşağı alıyoruz (çakışmasın) */
.top-banner .content{
  padding-top: calc(var(--wl-header-h) + 90px);
}

/* Breakpoints (header küçülür) */
@media (max-width:1199px){
  :root{ --wl-header-h: 78px; }
}
@media (max-width:991px){
  :root{ --wl-header-h: 72px; }
}
@media (max-width:768px){
  :root{ --wl-header-h: 64px; }
  .top-banner .content{
    padding-top: calc(var(--wl-header-h) + 70px);
  }
}

/* Siyah şeffaf bant */


/* değer */
.wl-hero-counter--top .wl-counter-item span{
  display:block;
  font-size: 35px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 1px;
  color: #fff;
  /* 
  text-shadow: 0 4px 18px rgba(0,0,0,.6);
   */
}

/* etiket */
.wl-hero-counter--top .wl-counter-item small{
  display:block;
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: 2.5px;
  color: rgba(255,255,255,.75);
}

/* item arası çizgi */
.wl-hero-counter--top .wl-counter-item{
  position: relative;
  padding: 0 12px;
}

.wl-hero-counter--top .wl-counter-item:after{
  content:"";
  position:absolute;
  right:-22px;
  top: 10px;
  width:1px;
  height: 34px;
  background: rgba(255,255,255,.22);
}

.wl-hero-counter--top .wl-counter-item:last-child:after{
  display:none;
}


/* Sadece HERO sayacı anim (class ile gelenler) */
.wl-hero-counter .wl-num{
  display:inline-block;
  will-change: transform, opacity, filter;
}

.wl-hero-counter .wl-pop{
  animation: wlHeroPop .28s ease-out;
}

@keyframes wlHeroPop{
  0%   { transform: translateY(6px) scale(.96); opacity:.65; filter: blur(1px); }
  60%  { transform: translateY(-2px) scale(1.03); opacity:1;  filter: blur(0); }
  100% { transform: translateY(0)  scale(1);     opacity:1;  filter: blur(0); }
}

/* ===== Tablet ===== */
@media (max-width: 991px){
  .wl-hero-counter--top{
    top: 200px;
    gap: 22px;
    padding: 12px 24px;
  }
  .wl-hero-counter--top .wl-counter-item span{ font-size: 24px; }
  .wl-hero-counter--top .wl-counter-item:after{ right:-12px; }
}

/* ===== Mobil FIX (en kritik kısım) =====
   Absolute iptal -> içerik akışına girer, yazıya binmez */
@media (max-width: 768px){

  /* Sayaç: tam genişlik, ortalı */
  .top-banner .content .wl-hero-counter--top{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;

    width: 100% !important;
    max-width: 520px;              /* fazla büyümesin */
    margin: 14px auto 10px !important;

    padding: 10px 12px !important;

    display: flex !important;
    flex-wrap: nowrap !important;  /* satır atmasın */
    justify-content: center !important;
    align-items: flex-end !important;

    gap: 0 !important;             /* çizgilerle daha temiz */
    box-sizing: border-box;
  }

  /* Bant */
  .top-banner .content .wl-hero-counter--top::before{
    border-radius: 6px !important;
    backdrop-filter: blur(3px) !important;
  }

  /* Her kutu eşit genişlik (5 adet) */
  .top-banner .content .wl-hero-counter--top .wl-counter-item{
    flex: 0 0 20% !important;       /* 5 sütun */
    padding: 0 6px !important;
  }

  /* Sayı */
  .top-banner .content .wl-hero-counter--top .wl-counter-item span{
    font-size: 20px !important;
    color: #fff !important;
  }

  /* Alt yazı */
  .top-banner .content .wl-hero-counter--top .wl-counter-item small{
    font-size: 10px !important;
    letter-spacing: 2px !important;
    margin-top: 6px !important;
    color: rgba(255,255,255,.75) !important;
  }

  /* Dikey ayraç */
  .top-banner .content .wl-hero-counter--top .wl-counter-item:after{
    right: 0 !important;            /* item sonuna */
    top: 8px !important;
    height: 26px !important;
    opacity: .22 !important;
  }
}

@media (max-width: 380px){
  .top-banner .content .wl-hero-counter--top{
    padding: 9px 8px !important;
    margin-top: 10px !important;
  }
  .top-banner .content .wl-hero-counter--top .wl-counter-item span{
    font-size: 18px !important;
  }
  .top-banner .content .wl-hero-counter--top .wl-counter-item small{
    font-size: 9px !important;
    letter-spacing: 1.5px !important;
  }
}


  /* HERO banner ilk yüklemede gri boşluk yapmasın */
.top-banner{
  position: relative;
  overflow: hidden;
  background: #0b0c10; /* görsel gelene kadar koyu bir arka plan */
}

/* img'yi direkt cover yap */
.top-banner > img.s-img-switch{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
  display: block !important;
  max-width: none !important;
  z-index: 0 !important;
}




/* GENEL (mobil-first) ayar – tüm cihazlarda geçerli */
.winlux_subtitle{
  font-family: "Roboto",sans-serif;
  color: white;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 3px;
  font-weight: 300;
  margin-top: 16px;     /* normal boşluk */
  margin-bottom: 32px;  /* biraz aşağıya nefes alanı */
  text-align: center;   /* mobilde ortala istersen */
}

/* SADECE TABLET/DESKTOP için eski negatif margin */
@media (min-width: 992px){
  .winlux_subtitle{
    font-size: 20px;
    line-height: 18px;
    letter-spacing: 4.5px;
    margin-top: -40px;   /* sadece büyük ekranda yukarı çek */
    margin-bottom: 64px;
  }
}