/*
 * ========================================================================== 
 * TUM MUSTERI SAYFALARI - SABIT YUKARI CIK VE WHATSAPP PAYLAS
 * ========================================================================== 
 *
 * ETKI ALANI:
 * - Sag altta sayfa basina donme dugmesi.
 * - Altinda, bulunulan sayfanin baglantisini WhatsApp ile paylasma dugmesi.
 *
 * ETKILEMEZ:
 * - Header, ana menu, filtre, urun karti ve acilir pencerelerin icerik yapisi.
 * - Urun, kategori, siparis, musteri veya mail verisi.
 */

/* DEKOHOP-EDITABLE-SETTINGS-START */
:root {
  /* 01 - YERLESIM VE BOYUT
   * right-space: Iki dugmenin ekranin sag kenarindan uzakligi.
   * bottom-space: WhatsApp dugmesinin ekranin altindan uzakligi.
   * button-gap: Yukari dugmesi ile WhatsApp arasindaki dikey bosluk.
   * up-size: Yukari dugmesinin capi (X).
   * whatsapp-scale: WhatsApp capinin X'e orani; 1.625 = onceki 1.3 degerinden tam yuzde 25 buyuk.
   * layer: Icerigin ustunde, header acilir katmanlarinin altinda kalir.
   */
  --dekohop-floating-tools-right-space: 15px;
  --dekohop-floating-tools-bottom-space: 22px;
  --dekohop-floating-tools-button-gap: 10px;
  --dekohop-floating-tools-up-size: 26.4px;
  --dekohop-floating-tools-whatsapp-scale: 1.625;
  --dekohop-floating-tools-layer: 3850;

  /* 02 - ORTAK KART, BORDER, RADIUS VE GOLGE */
  --dekohop-floating-tools-border-width: 1px;
  --dekohop-floating-tools-radius: 50%;
  --dekohop-floating-tools-shadow: 0 9px 24px rgba(35, 62, 52, 0.16);
  --dekohop-floating-tools-hover-shadow: 0 12px 30px rgba(35, 62, 52, 0.23);
  --dekohop-floating-tools-hover-scale: 1.07;

  /* 03 - YUKARI DUGMESI RENKLERI */
  --dekohop-floating-tools-up-background: #fffaf4;
  --dekohop-floating-tools-up-border-color: #dacbbb;
  --dekohop-floating-tools-up-icon-color: #6f513e;
  --dekohop-floating-tools-up-hover-background: #f8eee3;
  --dekohop-floating-tools-up-hover-border-color: #cdb39b;

  /* 04 - WHATSAPP PAYLAS DUGMESI RENKLERI VE SIMGE BOYUTU */
  --dekohop-floating-tools-whatsapp-background: #f0faf4;
  --dekohop-floating-tools-whatsapp-border-color: #abd7bc;
  --dekohop-floating-tools-whatsapp-hover-background: #e1f5e9;
  --dekohop-floating-tools-whatsapp-hover-border-color: #75bd91;
  --dekohop-floating-tools-whatsapp-icon-ratio: 0.54;

  /* 05 - WHATSAPP YARDIM BALONCUĞU */
  --dekohop-floating-tools-tooltip-gap: 9px;
  --dekohop-floating-tools-tooltip-padding: 6px 10px;
  --dekohop-floating-tools-tooltip-radius: 9px;
  --dekohop-floating-tools-tooltip-background: #263f36;
  --dekohop-floating-tools-tooltip-text-color: #ffffff;
  --dekohop-floating-tools-tooltip-font-size: 12px;
  --dekohop-floating-tools-tooltip-shadow: 0 7px 18px rgba(35, 62, 52, 0.18);

  /* 06 - GORUNME ANIMASYONU */
  --dekohop-floating-tools-transition: 180ms ease;
  --dekohop-floating-tools-hidden-shift: 10px;

  /* 07 - WHATSAPP DIKKAT CEKME ANIMASYONU
   * attention-animation: Animasyonu kapatmak icin `none` yazin.
   * attention-duration: Her kisa titresim arasindaki tam dongu suresidir.
   * shake-distance: Simgenin saga-sola hareket mesafesidir.
   * shake-angle: Simgenin titresirken donecegi en yuksek acidir.
   * Yalniz WhatsApp simgesi kisa titresir; dugme konumu, hover ve baloncuk etkilenmez.
   */
  --dekohop-floating-tools-whatsapp-attention-animation: dekohop-whatsapp-attention-shake;
  --dekohop-floating-tools-whatsapp-attention-duration: 1.5s;
  --dekohop-floating-tools-whatsapp-shake-distance: 1.4px;
  --dekohop-floating-tools-whatsapp-shake-angle: 7deg;
}
/* DEKOHOP-EDITABLE-SETTINGS-END */

/* DEKOHOP-COMMON-DESKTOP-RULES-START */
.dekohop-floating-tools {
  position: fixed;
  right: var(--dekohop-floating-tools-right-space);
  left: auto;
  bottom: var(--dekohop-floating-tools-bottom-space);
  z-index: var(--dekohop-floating-tools-layer);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dekohop-floating-tools-button-gap);
  pointer-events: none;
}

.dekohop-floating-tool {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-width: var(--dekohop-floating-tools-border-width);
  border-style: solid;
  border-radius: var(--dekohop-floating-tools-radius);
  box-shadow: var(--dekohop-floating-tools-shadow);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  transition:
    opacity var(--dekohop-floating-tools-transition),
    visibility var(--dekohop-floating-tools-transition),
    transform var(--dekohop-floating-tools-transition),
    background-color var(--dekohop-floating-tools-transition),
    border-color var(--dekohop-floating-tools-transition),
    box-shadow var(--dekohop-floating-tools-transition);
}

.dekohop-floating-tool:hover,
.dekohop-floating-tool:focus {
  box-shadow: var(--dekohop-floating-tools-hover-shadow);
  text-decoration: none;
  transform: scale(var(--dekohop-floating-tools-hover-scale));
  outline: 0;
}

.dekohop-floating-tool--top {
  width: var(--dekohop-floating-tools-up-size);
  height: var(--dekohop-floating-tools-up-size);
  border-color: var(--dekohop-floating-tools-up-border-color);
  background: var(--dekohop-floating-tools-up-background);
  color: var(--dekohop-floating-tools-up-icon-color);
  font-size: calc(var(--dekohop-floating-tools-up-size) * 0.39);
  opacity: 0;
  visibility: hidden;
  transform: translateY(var(--dekohop-floating-tools-hidden-shift)) scale(0.92);
  pointer-events: none;
}

.dekohop-floating-tool--top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}

.dekohop-floating-tool--top:hover,
.dekohop-floating-tool--top:focus {
  border-color: var(--dekohop-floating-tools-up-hover-border-color);
  background: var(--dekohop-floating-tools-up-hover-background);
  color: var(--dekohop-floating-tools-up-icon-color);
  transform: scale(var(--dekohop-floating-tools-hover-scale));
}

.dekohop-floating-tool--whatsapp {
  width: calc(var(--dekohop-floating-tools-up-size) * var(--dekohop-floating-tools-whatsapp-scale));
  height: calc(var(--dekohop-floating-tools-up-size) * var(--dekohop-floating-tools-whatsapp-scale));
  border-color: var(--dekohop-floating-tools-whatsapp-border-color);
  background: var(--dekohop-floating-tools-whatsapp-background);
}

.dekohop-floating-tool--whatsapp:hover,
.dekohop-floating-tool--whatsapp:focus {
  border-color: var(--dekohop-floating-tools-whatsapp-hover-border-color);
  background: var(--dekohop-floating-tools-whatsapp-hover-background);
}

.dekohop-floating-tool--whatsapp::after {
  content: attr(data-tooltip);
  position: absolute;
  top: 50%;
  right: calc(100% + var(--dekohop-floating-tools-tooltip-gap));
  padding: var(--dekohop-floating-tools-tooltip-padding);
  border-radius: var(--dekohop-floating-tools-tooltip-radius);
  background: var(--dekohop-floating-tools-tooltip-background);
  box-shadow: var(--dekohop-floating-tools-tooltip-shadow);
  color: var(--dekohop-floating-tools-tooltip-text-color);
  font-size: var(--dekohop-floating-tools-tooltip-font-size);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translate(4px, -50%);
  transition:
    opacity var(--dekohop-floating-tools-transition),
    visibility var(--dekohop-floating-tools-transition),
    transform var(--dekohop-floating-tools-transition);
}

.dekohop-floating-tool--whatsapp:hover::after,
.dekohop-floating-tool--whatsapp:focus::after {
  opacity: 1;
  visibility: visible;
  transform: translate(0, -50%);
}

.dekohop-floating-tool--whatsapp img {
  display: block;
  width: calc(100% * var(--dekohop-floating-tools-whatsapp-icon-ratio));
  height: calc(100% * var(--dekohop-floating-tools-whatsapp-icon-ratio));
  object-fit: contain;
  animation-name: var(--dekohop-floating-tools-whatsapp-attention-animation);
  animation-duration: var(--dekohop-floating-tools-whatsapp-attention-duration);
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes dekohop-whatsapp-attention-shake {
  0%,
  36%,
  100% {
    transform: translateX(0) rotate(0);
  }

  6%,
  18%,
  30% {
    transform:
      translateX(calc(-1 * var(--dekohop-floating-tools-whatsapp-shake-distance)))
      rotate(calc(-1 * var(--dekohop-floating-tools-whatsapp-shake-angle)));
  }

  12%,
  24% {
    transform:
      translateX(var(--dekohop-floating-tools-whatsapp-shake-distance))
      rotate(var(--dekohop-floating-tools-whatsapp-shake-angle));
  }
}

/* DEKOHOP-COMMON-DESKTOP-RULES-END */

/* DEKOHOP-RESPONSIVE-RULES-START */
/* Mobil/tablet tasarim turunda masaustunu bozmayan ayri degerler eklenecektir. */
@media (prefers-reduced-motion: reduce) {
  .dekohop-floating-tool--whatsapp img {
    animation: none;
    transform: none;
  }
}
/* DEKOHOP-RESPONSIVE-RULES-END */