.mmpanels {
    background: inherit; /* Arka plan rengini üst öğeden miras alır */
    border-color: inherit; /* Kenarlık rengini üst öğeden miras alır */
}

.mmpanels > .mmpanel {
    overflow: scroll; /* Taşma durumunda kaydırma çubuğu ekler */
    overflow-x: hidden; /* Yatay kaydırmayı gizler */
    overflow-y: auto; /* Dikey kaydırmayı otomatik ekler */
    background: inherit; /* Arka plan rengini üst öğeden miras alır */
    border-color: inherit; /* Kenarlık rengini üst öğeden miras alır */
}

.mmpanels > .mmpanel:not(.mmhidden) {
    display: block; /* .mmhidden sınıfı olmayan panelleri görüntüler */
}

.mmpanels > .mmpanel:after {
    content: ''; /* Boş içerik ekler */
    display: block; /* Blok olarak gösterir */
    height: 20px; /* 20 piksel yüksekliğinde boşluk bırakır */
}

.mm-nav-btn, .mmhidden {
    display: none; /* Navigasyon butonlarını ve .mmhidden sınıflı öğeleri gizler */
}

.mm-fullscreen-bg {
    outline: 0; /* Çerçeve çizgisini kaldırır */
}

.mm-fullscreen-bg:active, .mm-fullscreen-bg:focus, .mm-fullscreen-bg:hover {
    outline: 0; /* Tıklanınca, odaklanınca veya üzerine gelince çerçeve çizgisini kaldırır */
}

.animated.infinite {
    -webkit-animation-iteration-count: infinite; /* Webkit tarayıcılar için animasyonu sonsuz döngüde çalıştırır */
    animation-iteration-count: infinite; /* Animasyonu sonsuz döngüde çalıştırır */
}

/* WhatsApp butonunun etrafındaki dairesel çerçeve */
.mypage-alo-ph-circle {
    width: 90px; /* Genişliği 90 piksel */
    height: 90px; /* Yüksekliği 90 piksel */
    top: 12px; /* Üstten 12 piksel boşluk bırakır */
    left: 12px; /* Soldan 12 piksel boşluk bırakır */
    position: absolute; /* Konumlandırmayı mutlak yapar */
    background-color: transparent; /* Arka planı saydam yapar */
    border-radius: 100%; /* Tam daire oluşturur */
    border: 2px solid #ff7f00; /* Turuncu renkli kenarlık ekler */
    opacity: .1; /* Saydamlığını %10 yapar */
}

/* Mobil cihazlar için dairenin boyutlarını küçültür */
@media (max-width: 576px) {
    .mypage-alo-ph-circle {
        width: 70px;
        height: 70px;
    }
}

/* Animasyonlu büyütme efekti */
.zoomIn {
    -webkit-animation-name: zoomIn;
    animation-name: zoomIn;
}

.animated {
    -webkit-animation-duration: 1s; /* Webkit tarayıcılar için animasyon süresini 1 saniye yapar */
    animation-duration: 1s; /* Animasyon süresini 1 saniye yapar */
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* İç içe daire olan ikinci halka */
.mypage-alo-ph-circle-fill {
    width: 60px;
    height: 60px;
    top: 28px;
    left: 28px;
    position: absolute;
    border-radius: 100%;
    border: 2px solid transparent;
    transition: all .5s; /* Yumuşak bir geçiş efekti ekler */
    opacity: 0.4 !important; /* Görünürlüğü belirli seviyede tutar */
}

/* Mobil cihazlarda boyutları küçült */
@media (max-width: 576px) {
    .mypage-alo-ph-circle-fill {
        width: 50px;
        height: 50px;
        top: 22px;
        left: 22px;
    }
}

/* WhatsApp butonuna hover yapıldığında turuncu çerçeve oluşturur */
.mypage-alo-ph-circle, .mypage-alo-phone:hover .mypage-alo-ph-circle {
    border-color: #ff7f00;
}

/* WhatsApp ikonunun bulunduğu iç kısım */
.mypage-alo-ph-img-circle {
    width: 30px;
    height: 30px;
    top: 43px;
    left: 43px;
    position: absolute;
    background: url(/catalog/view/theme/journal3/css/whatsapp.webp) center center no-repeat rgba(30, 30, 30, 0.1);
    border-radius: 100%;
    opacity: 1;
    transition: all .2s ease-in-out;
    transform-origin: 50% 50%;
    background-size: 100%;
}

/* Mobil cihazlar için boyutları küçült */
@media (max-width: 576px) {
    .mypage-alo-ph-img-circle {
        width: 30px;
        height: 30px;
        top: 32px;
        left: 32px;
    }
}

/* Arka plan rengini turuncu yap */
.mypage-alo-ph-circle-fill, .mypage-alo-ph-img-circle {
    background-color: #ff7f00;
}

/* WhatsApp butonuna hover yapıldığında iç renk değiştir */
.mypage-alo-phone:hover .mypage-alo-ph-circle-fill, .mypage-alo-phone:hover .mypage-alo-ph-img-circle {
    background-color: #ff7f00;
}

/* Titreşim efekti */
.tada {
    -webkit-animation-name: tada;
    animation-name: tada;
}

/* Titreşim animasyonu */
@-webkit-keyframes tada {
    from, to { transform: scale3d(1, 1, 1); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
}

/* Büyüme animasyonu */
@keyframes pulse {
    from, to { transform: scale3d(1, 1, 1); }
    50% { transform: scale3d(1.05, 1.05, 1.05); }
}

/* Yakınlaştırma efekti */
@keyframes zoomIn {
    from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    50% { opacity: 1; }
}

/* WhatsApp butonunun konumu */
.mypage-alo-phone {
    position: fixed; /* Sabit pozisyonda kalmasını sağlar */
    bottom: 180px; /* Ekranın altından 135px yukarıda konumlandırır */
    right: 109px; /* Ekranın sağından 109px içeri alır */
    z-index: 99999; /* Diğer tüm öğelerin üstünde görüntülenmesini sağlar */
}

/* Mobilde konumu değiştir */
@media (max-width: 576px) {
    .mypage-alo-phone {
        left: 0px; /* Mobilde sola yaslar */
        bottom: 120px; /* Mobilde biraz daha yukarı alır */
    }
}