---

---

---

@import url('https://fonts.googleapis.com/css?family=Raleway:900&display=swap'); :root { --accent-color: #f5c842; --accent-light: #ffe27a; --base-color: rgba(22, 18, 12, 0.92); --menu-bg: rgba(35, 29, 18, 0.88); --tooltip-bg: rgba(45, 36, 19, 0.85); --border-color: rgba(245, 200, 66, 0.35); --shadow-color: rgba(245, 200, 66, 0.25); } /* ========================= CONTAINER ========================= */ .ard-sosmed { display: block; position: fixed; bottom: 75%; left: 10px; cursor: pointer; font-family: Raleway, sans-serif; z-index: 100; } .ard-sosmed ul { position: relative; margin: 0; padding: 0; } .ard-sosmed ul li { position: absolute; list-style: none; text-decoration: none; opacity: 0; } /* ========================= HAMBURGER BUTTON ========================= */ .hamburg { background-color: var(--base-color); border: 1px solid var(--border-color); box-shadow: 0 0 12px var(--shadow-color); } .bar1, .bar2, .bar3 { width: 80%; height: 5px; margin: 6px auto; background-color: var(--accent-color); transition: .4s; position: relative; transform: translateY(-1px); } /* HAMBURGER ? X */ /* ================================= FIX HAMBURGER ? X YATORO23 ================================= */ .ard-sosmed .hamburg { position: absolute !important; width: 55px !important; height: 55px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } /* Semua garis */ .ard-sosmed .hamburg .bar1, .ard-sosmed .hamburg .bar2, .ard-sosmed .hamburg .bar3 { position: absolute !important; width: 32px !important; height: 4px !important; margin: 0 !important; padding: 0 !important; border-radius: 10px !important; background-color: var(--accent-color) !important; transition: transform .35s ease, opacity .25s ease !important; } /* Posisi awal hamburger */ .ard-sosmed .hamburg .bar1 { transform: translateY(-10px) !important; } .ard-sosmed .hamburg .bar2 { transform: translateY(0) !important; } .ard-sosmed .hamburg .bar3 { transform: translateY(10px) !important; } /* Saat menu OPEN ? bentuk X */ .ard-sosmed.open .hamburg .bar1 { transform: translateY(0) rotate(45deg) !important; } .ard-sosmed.open .hamburg .bar2 { opacity: 0 !important; transform: scaleX(0) !important; } .ard-sosmed.open .hamburg .bar3 { transform: translateY(0) rotate(-45deg) !important; } /* ========================= MENU ICON ========================= */ .ard-sosmed ul li a { display: flex; width: 55px; height: 55px; border: 2px solid var(--accent-color); border-radius: 30px; justify-content: center; align-items: center; background-color: var(--menu-bg); box-shadow: 0 0 8px var(--shadow-color); } .ard-sosmed ul li div { background-color: var(--tooltip-bg); color: var(--accent-color); border: 1px solid var(--border-color); padding: 6px 10px; border-radius: 6px; box-shadow: 0 4px 15px rgba(0,0,0,.5); } .ard-sosmed.open ul li a { pointer-events: auto; } /* ========================= POSISI MENU ========================= */ .ard-sosmed ul li:nth-child(1) { --menu-position: 70px; } .ard-sosmed ul li:nth-child(2) { --menu-position: 140px; } .ard-sosmed ul li:nth-child(3) { --menu-position: 210px; } .ard-sosmed ul li:nth-child(4) { --menu-position: 280px; } .ard-sosmed ul li:nth-child(5) { --menu-position: 350px; } /* ========================= ANIMASI BUKA ========================= */ @keyframes menuOpen { 0% { transform: translateY(0); opacity: 0; } 100% { transform: translateY(var(--menu-position)); opacity: 1; } } .ard-sosmed.open ul li { animation: menuOpen .45s ease forwards; } .ard-sosmed.open ul li:nth-child(1) { animation-delay: 0s; } .ard-sosmed.open ul li:nth-child(2) { animation-delay: .08s; } .ard-sosmed.open ul li:nth-child(3) { animation-delay: .16s; } .ard-sosmed.open ul li:nth-child(4) { animation-delay: .24s; } .ard-sosmed.open ul li:nth-child(5) { animation-delay: .32s; } /* ========================= ANIMASI TUTUP ========================= */ @keyframes menuClose { 0% { transform: translateY(var(--menu-position)); opacity: 1; } 100% { transform: translateY(0); opacity: 0; } } .ard-sosmed.close ul li { animation: menuClose .4s ease forwards; } /* Tutup dari bawah ke atas */ .ard-sosmed.close ul li:nth-child(5) { animation-delay: 0s; } .ard-sosmed.close ul li:nth-child(4) { animation-delay: .08s; } .ard-sosmed.close ul li:nth-child(3) { animation-delay: .16s; } .ard-sosmed.close ul li:nth-child(2) { animation-delay: .24s; } .ard-sosmed.close ul li:nth-child(1) { animation-delay: .32s; } /* ========================= TOOLTIP ========================= */ .ard-sosmed ul li div { position: absolute; opacity: 0; scale: .1; transition: all .3s ease; font-family: Raleway, sans-serif; font-size: large; background: rgb(0 0 0 / 24%); color: var(--accent-color); text-align: center; text-wrap: nowrap; cursor: default; z-index: 100; transform: translate(15px, -35px); } .ard-sosmed ul li:hover div { opacity: 1; scale: 1; transform: translate(65px, -35px); } /* ========================= ATTENTION ========================= */ .attention { position: relative; width: 80px; height: 30px; margin-bottom: 5px; left: -5px; padding-bottom: 10px; background-color: rgb(0 0 0 / 24%); color: var(--accent-color); display: flex; justify-content: center; align-items: center; opacity: 0; cursor: default; text-wrap: nowrap; clip-path: polygon( 0 0, 100% 0, 100% 75%, 49% 75%, 22% 100%, 22% 75%, 0 75% ); } .whore { animation: flicker 1s infinite; } .whore:hover { animation-duration: 10s; } @keyframes flicker { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } /* ========================= MOBILE ========================= */ @media screen and (max-width: 600px) { .ard-sosmed { bottom: 70%; } } /* FIX UKURAN FLOATING MENU YATORO23 */ .ard-sosmed ul li { width: 55px !important; height: 55px !important; overflow: visible !important; } .ard-sosmed ul li a { display: flex !important; width: 55px !important; height: 55px !important; min-width: 55px !important; max-width: 55px !important; overflow: hidden !important; justify-content: center !important; align-items: center !important; background-color: var(--menu-bg) !important; border: 2px solid var(--accent-color) !important; border-radius: 50% !important; box-sizing: border-box !important; } .ard-sosmed ul li a img { display: block !important; width: 90% !important; height: 90% !important; min-width: 0 !important; min-height: 0 !important; max-width: 90% !important; max-height: 90% !important; object-fit: contain !important; } /* FIX KLIK HAMBURGER */ .ard-sosmed .hamburg { z-index: 9999 !important; } .ard-sosmed ul { z-index: 100 !important; } .ard-sosmed ul li { z-index: 101 !important; } .ard-sosmed.close ul li a { pointer-events: none !important; } /* FIX TOMBOL HAMBURGER BULAT */ .ard-sosmed .hamburg { position: absolute !important; width: 55px !important; height: 55px !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: var(--base-color) !important; border-radius: 50% !important; overflow: hidden !important; box-sizing: border-box !important; border: 1px solid var(--border-color) !important; box-shadow: 0 0 12px var(--shadow-color) !important; z-index: 9999 !important; }