/* =========================================================
   MOBİL HIZLI İLETİŞİM
   ========================================================= */

.ero-mobile-actions {
  display: none;
}


/* Sadece mobil */
@media (max-width: 767px) {

  .ero-mobile-actions {
    position: fixed;

    z-index: 998;

    left: 16px;
    bottom: 16px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }


  /* =======================================================
     AÇILAN BUTON GRUBU
     ======================================================= */

  .ero-mobile-actions__items {
    position: absolute;

    left: 0;
    bottom: 66px;

    display: flex;
    flex-direction: column-reverse;

    gap: 10px;

    pointer-events: none;
  }


  .ero-mobile-actions__item {
    position: relative;

    display: flex;
    align-items: center;

    width: 52px;
    height: 52px;

    padding: 0;

    border: 0;

    border-radius:
      50% 48% 52% 46%
      /
      48% 53% 47% 52%;

    color: #ffffff;

    box-shadow:
      0 9px 20px
      rgba(48, 24, 18, .16);

    cursor: pointer;

    opacity: 0;

    transform:
      translateY(18px)
      scale(.72)
      rotate(-8deg);

    pointer-events: none;

    transition:
      opacity .28s ease,
      transform .34s cubic-bezier(.2,.85,.25,1);
  }


  /* Açılma sırası */
  .ero-mobile-actions__item:nth-child(1) {
    transition-delay: 0ms;
  }

  .ero-mobile-actions__item:nth-child(2) {
    transition-delay: 45ms;
  }

  .ero-mobile-actions__item:nth-child(3) {
    transition-delay: 90ms;
  }


  .ero-mobile-actions.is-open
  .ero-mobile-actions__item {
    opacity: 1;

    transform:
      translateY(0)
      scale(1)
      rotate(0);

    pointer-events: auto;
  }


  /* =======================================================
     RENKLER
     ======================================================= */

  .ero-mobile-actions__item--phone {
    background:
      linear-gradient(
        145deg,
        #c5162e,
        #e64b27
      );
  }

  .ero-mobile-actions__item--whatsapp {
    background:
      linear-gradient(
        145deg,
        #e66c2c,
        #f2a12a
      );
  }

  .ero-mobile-actions__item--map {
    background:
      linear-gradient(
        145deg,
        #8f2c21,
        #c5162e
      );
  }


  /* El çizimi dış çizgi */
  .ero-mobile-actions__item::after {
    content: "";

    position: absolute;

    inset: -3px;

    border:
      1.5px solid
      rgba(255, 255, 255, .62);

    border-radius:
      46% 54% 49% 51%
      /
      53% 47% 55% 45%;

    transform: rotate(6deg);

    pointer-events: none;
  }


  /* =======================================================
     İKON
     ======================================================= */

  .ero-mobile-actions__icon {
    position: absolute;

    inset: 0;

    display: flex;
    align-items: center;
    justify-content: center;
  }


  .ero-mobile-actions__icon svg {
    width: 23px;
    height: 23px;

    fill: currentColor;
  }


  /* =======================================================
     YAZI ETİKETİ
     ======================================================= */

  .ero-mobile-actions__label {
    position: absolute;

    left: 62px;
    top: 50%;

    padding:
      7px
      11px;

    background: #fff8f1;

    color: #6e261d;

    border:
      1px solid
      rgba(197, 22, 46, .18);

    border-radius:
      12px 15px 11px 14px
      /
      15px 11px 14px 12px;

    box-shadow:
      0 6px 15px
      rgba(48, 24, 18, .10);

    font-size: 10px;
    font-weight: 900;

    white-space: nowrap;

    opacity: 0;

    transform:
      translate(-8px, -50%);

    transition:
      opacity .22s ease,
      transform .25s ease;

    pointer-events: none;
  }


  .ero-mobile-actions.is-open
  .ero-mobile-actions__label {
    opacity: 1;

    transform:
      translate(0, -50%);
  }


  /* =======================================================
     ANA BUTON
     ======================================================= */

  .ero-mobile-actions__toggle {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    padding: 0;

    border: 0;

    background:
      linear-gradient(
        145deg,
        #2f1a17,
        #4b1e19
      );

    color: #ffffff;

    border-radius:
      49% 51% 46% 54%
      /
      54% 47% 53% 46%;

    box-shadow:
      0 10px 24px
      rgba(44, 22, 17, .24);

    cursor: pointer;

    transition:
      transform .3s ease,
      background .3s ease;
  }


  /* Turuncu el çizimi halka */
  .ero-mobile-actions__toggle::after {
    content: "";

    position: absolute;

    inset: -4px;

    border:
      2px solid #f28a2a;

    border-radius:
      53% 47% 55% 45%
      /
      47% 54% 46% 53%;

    transform: rotate(-7deg);

    pointer-events: none;
  }


  .ero-mobile-actions__toggle-chat,
  .ero-mobile-actions__toggle-close {
    position: absolute;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
      opacity .25s ease,
      transform .3s ease;
  }


  .ero-mobile-actions__toggle-chat svg,
  .ero-mobile-actions__toggle-close svg {
    width: 25px;
    height: 25px;

    fill: currentColor;
  }


  .ero-mobile-actions__toggle-close {
    opacity: 0;

    transform:
      rotate(-90deg)
      scale(.65);
  }


  .ero-mobile-actions.is-open
  .ero-mobile-actions__toggle {
    background: #c5162e;

    transform: rotate(3deg);
  }


  .ero-mobile-actions.is-open
  .ero-mobile-actions__toggle-chat {
    opacity: 0;

    transform:
      rotate(90deg)
      scale(.65);
  }


  .ero-mobile-actions.is-open
  .ero-mobile-actions__toggle-close {
    opacity: 1;

    transform:
      rotate(0)
      scale(1);
  }


  /* WhatsApp şu an bağlantısız */
  .ero-mobile-actions__item.is-disabled {
    cursor: default;
  }

}


/* Hareket azaltma */
@media (prefers-reduced-motion: reduce) {

  .ero-mobile-actions__item,
  .ero-mobile-actions__label,
  .ero-mobile-actions__toggle,
  .ero-mobile-actions__toggle-chat,
  .ero-mobile-actions__toggle-close {
    transition: none !important;
  }

}