Widget:Larifk

<style>

   .mw-body {
       padding: unset !important;
   }

   .mw-body-content p {
       display: none;
   }

   .lk-wrap {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       background: #ffffff;
       padding: 24px;
       margin: 0;
       color: #111827;
       position: relative;
       width: 100%;
       box-sizing: border-box;
       min-height: 100vh;
   }

   .lk-wrap p {
       display: unset;
   }

   .lk-wrap.lk-dark {
       background: #1a1a2e;
       color: #e2e8f0;
   }

   .lk-theme-btn {
       position: absolute;
       top: 16px;
       right: 16px;
       background: #f3f4f6;
       border: 1px solid rgba(0, 0, 0, 0.08);
       border-radius: 8px;
       padding: 5px 10px;
       font-size: 12px;
       font-weight: 600;
       color: #6b7280;
       cursor: pointer;
       user-select: none;
       transition: all 0.2s ease;
   }

   .lk-dark .lk-theme-btn {
       background: #16213e;
       border-color: rgba(255, 255, 255, 0.1);
       color: #94a3b8;
   }

   .lk-theme-btn:hover {
       opacity: 0.8;
   }

   .lk-titulo {
       font-size: 1.4rem;
       font-weight: 700;
       color: inherit;
       margin: 0 0 1rem;
       padding-right: 80px;
   }

   .lk-tabs {
       display: flex;
       gap: 6px;
       background: #f3f4f6;
       padding: 5px;
       border-radius: 12px;
       margin-bottom: 24px;
       overflow-x: auto;
       flex-wrap: wrap;
       scrollbar-width: none;
   }

   .lk-dark .lk-tabs {
       background: #16213e;
   }

   .lk-tabs::-webkit-scrollbar {
       display: none;
   }

   .lk-tab {
       display: flex;
       align-items: center;
       gap: 7px;
       padding: 8px 16px;
       font-size: 13px;
       font-weight: 600;
       color: #6b7280;
       cursor: pointer;
       border-radius: 8px;
       transition: all 0.2s ease;
       white-space: nowrap;
       user-select: none;
   }

   .lk-tab:hover {
       background: rgba(128, 128, 128, 0.08);
       color: #111827;
   }

   .lk-dark .lk-tab:hover {
       color: #e2e8f0;
   }

   .lk-tab.active {
       background: #ffffff;
       color: #2563eb;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
   }

   .lk-dark .lk-tab.active {
       background: #1a1a2e;
       color: #4f8cff;
   }

   .lk-tab img {
       width: 20px;
       height: 20px;
       object-fit: contain;
       border-radius: 4px;
   }

   .lk-panel {
       display: none;
       animation: lk-fadeIn 0.25s ease;
   }

   .lk-panel.active {
       display: flex;
       flex-direction: column;
       gap: 14px;
       padding: .25rem 0;
   }

   @keyframes lk-fadeIn {
       from {
           opacity: 0;
           transform: translateY(3px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .lk-slabel {
       font-size: 10px;
       font-weight: 700;
       color: #9ca3af;
       text-transform: uppercase;
       letter-spacing: 0.07em;
       margin-bottom: 5px;
   }

   .lk-rewards {
       display: flex;
       flex-wrap: wrap;
       gap: 8px;
       align-items: flex-start;
   }

   .lk-divider {
       height: 1px;
       background: rgba(0, 0, 0, 0.06);
   }

   .lk-dark .lk-divider {
       background: rgba(255, 255, 255, 0.08);
   }

   .lk-ctabs {
       display: flex;
       justify-content: center;
       gap: 0;
       margin: 0 auto 14px auto;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       overflow: hidden;
       width: fit-content;
   }

   .lk-dark .lk-ctabs {
       border-color: rgba(255, 255, 255, 0.12);
   }

   .lk-ctab {
       display: inline-flex;
       padding: 5px 18px;
       font-size: 12px;
       font-weight: 600;
       color: #6b7280;
       cursor: pointer;
       transition: all 0.2s ease;
       user-select: none;
       background: #f3f4f6;
       border-right: 1px solid rgba(0, 0, 0, 0.1);
   }

   .lk-dark .lk-ctab {
       background: #16213e;
       border-right-color: rgba(255, 255, 255, 0.12);
       color: #94a3b8;
   }

   .lk-ctab:last-child {
       border-right: none;
   }

   .lk-ctab.active {
       background: #ffffff;
       color: #2563eb;
   }

   .lk-dark .lk-ctab.active {
       background: #1a1a2e;
       color: #4f8cff;
   }

   .lk-ctab:hover:not(.active) {
       color: #111827;
       background: rgba(128, 128, 128, 0.08);
   }

   .lk-dark .lk-ctab:hover:not(.active) {
       color: #e2e8f0;
   }

   .lk-cpanel {
       display: none;
       text-align: center;
   }

   .lk-cpanel.active {
       display: flex;
       flex-direction: column;
       align-items: center;
       width: 100%;
   }

   .lk-media-wrap {
       border-radius: 12px;
       overflow: hidden;
       background: #000;
       border: 1px solid rgba(0, 0, 0, 0.06);
       width: 40%;
       aspect-ratio: 16/9;
       position: relative;
   }

   .lk-media-wrap img {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       border: none;
       object-fit: cover;
       display: block;
   }

   .lk-slider {
       position: relative;
       width: 40%;
       border-radius: 12px;
       overflow: hidden;
       background: #000;
       border: 1px solid rgba(0, 0, 0, 0.06);
   }

   .lk-slider-track {
       display: flex;
       transition: transform 0.3s ease;
   }

   .lk-slide {
       min-width: 100%;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .lk-slide img {
       width: 100%;
       height: auto;
       display: block;
   }

   .lk-slide a {
       display: block;
       line-height: 0;
   }

   .lk-slide-btn {
       position: absolute;
       top: 50%;
       transform: translateY(-50%);
       background: rgba(255, 255, 255, 0.85);
       color: #111;
       border-radius: 50%;
       width: 28px;
       height: 28px;
       font-size: 18px;
       line-height: 1;
       cursor: pointer;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 2;
       user-select: none;
       border: 1px solid rgba(0, 0, 0, 0.08);
       transition: all 0.15s ease;
   }

   .lk-dark .lk-slide-btn {
       background: rgba(30, 30, 50, 0.85);
       color: #e2e8f0;
   }

   .lk-slide-btn:hover {
       transform: translateY(-50%) scale(1.08);
   }

   .lk-slide-prev {
       left: 6px;
   }

   .lk-slide-next {
       right: 6px;
   }

   .lk-slide-counter {
       position: absolute;
       bottom: 6px;
       right: 8px;
       font-size: 11px;
       font-weight: 600;
       color: #fff;
       background: rgba(0, 0, 0, 0.5);
       border-radius: 999px;
       padding: 1px 8px;
   }

   @media(max-width:520px) {
       .lk-wrap {
           padding: 16px;
       }

       .lk-tabs {
           gap: 4px;
       }

       .lk-tab {
           padding: 7px 12px;
           font-size: 12px;
       }

       .lk-media-wrap {
           width: 100%;
       }

       .lk-slider {
           width: 100%;
       }
   }

</style> <script>

   document.addEventListener('DOMContentLoaded', function () {

       document.querySelectorAll('.lk-wrap').forEach(function (wrap) {

           var btn = wrap.querySelector('.lk-theme-btn');
           if (btn) {
               btn.addEventListener('click', function () {
                   wrap.classList.toggle('lk-dark');
                   btn.textContent = wrap.classList.contains('lk-dark') ? '☀ Light' : '☾ Dark';
               });
           }

           wrap.querySelectorAll('.lk-tab').forEach(function (tab) {
               tab.addEventListener('click', function () {
                   wrap.querySelectorAll('.lk-tab').forEach(function (t) { t.classList.remove('active'); });
                   wrap.querySelectorAll('.lk-panel').forEach(function (p) { p.classList.remove('active'); });
                   tab.classList.add('active');
                   var panel = wrap.querySelector('.lk-panel[data-panel="' + tab.dataset.tab + '"]');
                   panel.classList.add('active');
                   mountVideo(panel);
               });
           });
           mountVideo(wrap.querySelector('.lk-panel.active'));
       });

       document.querySelectorAll('.lk-panel').forEach(function (panel) {
           panel.querySelectorAll('.lk-ctab').forEach(function (ctab) {
               ctab.addEventListener('click', function () {
                   panel.querySelectorAll('.lk-ctab').forEach(function (t) { t.classList.remove('active'); });
                   panel.querySelectorAll('.lk-cpanel').forEach(function (p) { p.classList.remove('active'); });
                   ctab.classList.add('active');
                   var cpanel = panel.querySelector('.lk-cpanel[data-cpanel="' + ctab.dataset.ctab + '"]');
                   cpanel.classList.add('active');
                   mountVideo(cpanel);
               });
           });
       });

       document.querySelectorAll('.lk-slider').forEach(function (slider) {
           var track = slider.querySelector('.lk-slider-track');
           var counter = slider.querySelector('.lk-slide-counter');
           var total = counter ? parseInt(counter.getAttribute('data-total')) : 0;
           var current = 0;
           function goTo(idx) {
               current = (idx + total) % total;
               track.style.transform = 'translateX(-' + (current * 100) + '%)';
               if (counter) counter.textContent = (current + 1) + ' / ' + total;
           }
           var prev = slider.querySelector('.lk-slide-prev');
           var next = slider.querySelector('.lk-slide-next');
           if (prev) prev.addEventListener('click', function () { goTo(current - 1); });
           if (next) next.addEventListener('click', function () { goTo(current + 1); });
       });

       function mountVideo(panel) {
           if (!panel) return;
           var wrap = panel.querySelector('.lk-media-wrap[data-video]');
           if (!wrap || wrap.querySelector('iframe')) return;
           var id = wrap.getAttribute('data-video');
           var iframe = document.createElement('iframe');
           iframe.src = 'https://www.youtube.com/embed/' + id;
           iframe.setAttribute('allowfullscreen', );
           iframe.setAttribute('frameborder', '0');
           iframe.style.cssText = 'position:absolute;inset:0;width:100%;height:100%;border:none;display:block;';
           wrap.appendChild(iframe);
       }
   });

</script>