/* Tutorial Clipper (2 Okt 2026): item menu LP, tombol topbar clipper, panel. Semua selector khusus tut-*. */
/* Item menu LP: hanya di menu hamburger (<=900px). Di layar besar menu LP tidak berubah. */
.pub-links a.pub-tut-link{display:none}
@media(max-width:900px){.pub-links a.pub-tut-link{display:inline-flex;align-items:center;gap:.5rem}}
.pub-tut-link svg{width:18px;height:18px;flex:0 0 18px;color:#ff5fa2}

/* Tombol topbar dashboard clipper */
.topbar .tut-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:38px;padding:0 13px;margin-left:auto;border:1px solid #3a2030;border-radius:999px;background:linear-gradient(135deg,#1a0712,#14061f);color:#ffd3e6;font:700 12px/1 inherit;letter-spacing:.02em;cursor:pointer;white-space:nowrap;flex:0 0 auto}
.topbar .tut-btn:hover{border-color:#ff7fb0;color:#fff}
.topbar .tut-btn:focus-visible{outline:2px solid #ff5fa2;outline-offset:2px}
.topbar .tut-btn .tut-ikon{display:inline-flex;width:20px;height:20px;border-radius:999px;align-items:center;justify-content:center;background:linear-gradient(135deg,#ff043e 0%,#b40589 55%,#7202ff 100%);color:#fff}
.topbar .tut-btn .tut-ikon svg{width:10px;height:10px}
.topbar .invite-earn + .tut-btn{margin-left:8px}
/* HP: topbar penuh (judul halaman + Undang & Cuan + lonceng) -> tombol topbar disembunyikan, Tutorial ada di menu samping. */
@media(max-width:520px){.topbar .tut-btn{display:none}}

/* Panel */
#tut-panel.tut-panel{width:min(460px,calc(100vw - 24px));max-height:min(620px,calc(100dvh - 32px));padding:0 !important;margin:auto;overflow:auto;background:#0c0c11 !important;border:1px solid #2a1730 !important;border-radius:16px !important;color:#f6f6fa !important;box-shadow:0 24px 64px rgba(0,0,0,.65),0 0 0 1px rgba(255,4,62,.06)}
#tut-panel.tut-panel::backdrop{background:rgba(2,2,6,.74) !important;backdrop-filter:blur(2px)}
#tut-panel .tut-kepala{position:sticky;top:0;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:18px 18px 14px;background:linear-gradient(180deg,#0f0a14,#0c0c11);border-bottom:1px solid #1e1622}
#tut-panel .tut-kepala h2{margin:0;font-size:17px;font-weight:800;line-height:1.25;background:linear-gradient(90deg,#ff5fa2,#b46cff);-webkit-background-clip:text;background-clip:text;color:transparent}
#tut-panel .tut-kepala p{margin:4px 0 0;font-size:12px;color:#a7a3b5}
#tut-panel .tut-daftar{list-style:none;margin:0;padding:10px 12px 14px;display:grid;gap:8px}
#tut-panel .tut-langkah{display:flex;align-items:center;gap:12px;min-height:52px;padding:10px 12px;border:1px solid #1f1a26;border-radius:12px;background:#111018;color:#f6f6fa !important;text-decoration:none !important;transition:border-color .15s,background .15s}
#tut-panel .tut-langkah:hover,#tut-panel .tut-langkah:focus-visible{border-color:#7a2a5e;background:#17101d;outline:none}
#tut-panel .tut-no{flex:0 0 28px;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#ff043e 0%,#b40589 55%,#7202ff 100%)}
#tut-panel .tut-teks{flex:1 1 auto;font-size:14px;font-weight:600;line-height:1.3}
#tut-panel .tut-tonton{flex:0 0 26px;width:26px;height:26px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;color:#ff5fa2;border:1px solid #3a2030}
@media(prefers-reduced-motion:reduce){#tut-panel .tut-langkah{transition:none}}