/* Halaman panduan + pemutar "video" animasi */
.lp-links a.on{color:#fff}
.tut-hero{background:radial-gradient(1000px 420px at 85% -20%,#1F3A35 0%,transparent 60%),var(--ink);color:#fff;padding:56px 0 64px}
.tut-hero h1{color:#fff;font-size:clamp(30px,4.4vw,48px);line-height:1.1;letter-spacing:-.02em;margin:16px 0 12px}
.tut-hero .lp-pill{display:inline-flex;gap:6px;align-items:center}
.tut-toc{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:34px}
.tut-toc a{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 14px;color:#fff;transition:background .15s,border-color .15s}
.tut-toc a:hover{background:rgba(255,255,255,.1);border-color:rgba(94,224,200,.4)}
.tut-toc b{display:block;font-size:14px;line-height:1.3}
.tut-toc small{color:#9FAAA6;font-size:12px}
.tut-toc-n{font-family:var(--mono);color:#5EE0C8;font-size:12px;width:18px;flex-shrink:0}
.tut-toc-ic{width:34px;height:34px;border-radius:10px;background:rgba(94,224,200,.12);color:#5EE0C8;display:flex;align-items:center;justify-content:center;flex-shrink:0}

.tut-ch{padding:64px 0;border-bottom:1px solid var(--line);scroll-margin-top:68px}
.tut-ch:nth-child(even){background:var(--bg)}
.tut-ch-in{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px 40px;align-items:start}
.tut-ch-head{grid-column:1/-1;max-width:760px}
.tut-ch-head h2{font-size:clamp(24px,3vw,34px);letter-spacing:-.02em;margin:0 0 8px}
.tut-ch-head p{font-size:17px}
.tut-steps{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px 22px 22px}
.tut-steps h3{font-size:16px;margin:0 0 12px}
.tut-steps ol{margin:0 0 4px;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:12px}
.tut-steps li{counter-increment:s;display:grid;grid-template-columns:26px 1fr;gap:10px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.tut-steps li::before{content:counter(s);width:24px;height:24px;border-radius:999px;background:var(--acc-s);color:var(--acc);font-weight:800;font-size:12px;display:flex;align-items:center;justify-content:center;margin-top:1px}
.tut-steps .btn{margin-top:16px;width:100%;justify-content:center}

/* Pemutar */
.tp{background:#0E1413;border-radius:18px;overflow:hidden;box-shadow:0 20px 50px rgba(23,32,30,.18);user-select:none}
.tp-stage{position:relative;aspect-ratio:16/10;overflow:hidden;background:radial-gradient(600px 300px at 50% 0%,#1F3A35,#0E1413)}
.tp-frame{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tp-cam{position:relative;flex-shrink:0;width:100%;height:100%;transform-origin:50% 50%;transition:transform 5.5s cubic-bezier(.3,.1,.3,1),opacity .35s}
.tp-img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;background:#1a2321}
/* Slide ponsel: tampil dalam bingkai HP */
.tp.is-m .tp-cam{border-radius:26px;box-shadow:0 0 0 7px #05090A,0 20px 50px rgba(0,0,0,.5)}
.tp.is-m .tp-img{border-radius:26px}
.tp-cam.fade{opacity:0}
.tp-spot{position:absolute;border-radius:10px;box-shadow:0 0 0 3px #F5A524,0 0 0 9999px rgba(8,14,13,.38);animation:tpPulse 1.6s ease-in-out infinite;transition:left .6s,top .6s,width .6s,height .6s,opacity .3s;pointer-events:none}
@keyframes tpPulse{0%,100%{box-shadow:0 0 0 3px #F5A524,0 0 0 9999px rgba(8,14,13,.38)}50%{box-shadow:0 0 0 6px rgba(245,165,36,.55),0 0 0 9999px rgba(8,14,13,.38)}}
.tp-cursor{position:absolute;width:26px;height:26px;left:50%;top:60%;transition:left 1s cubic-bezier(.5,0,.2,1),top 1s cubic-bezier(.5,0,.2,1),transform .15s;filter:drop-shadow(0 3px 5px rgba(0,0,0,.4));pointer-events:none;opacity:0}
.tp.started .tp-cursor{opacity:1}
.tp-cursor.click{transform:scale(.8)}
.tp-cap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);width:min(88%,760px);text-align:center;pointer-events:none}
.tp-cap span{display:inline-block;background:rgba(14,20,19,.88);color:#fff;border-radius:12px;padding:10px 16px;font-size:clamp(13px,1.6vw,17px);font-weight:600;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.3);transition:opacity .3s,transform .3s}
.tp-cap.swap span{opacity:0;transform:translateY(6px)}
.tp-big{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:16px;background:rgba(8,14,13,.5);border:0;color:#fff;cursor:pointer;font:inherit;text-align:left}
.tp-big-ic{width:76px;height:76px;border-radius:999px;background:var(--acc);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 10px rgba(11,107,99,.3);transition:transform .15s}
.tp-big:hover .tp-big-ic{transform:scale(1.07)}
.tp-big-ic .ic{margin-left:4px}
.tp-big-t{font-size:20px;font-weight:800;display:flex;flex-direction:column}
.tp-big-t small{font-size:13px;font-weight:600;color:#C6CECB}
.tp.started .tp-big{display:none}
.tp-end{position:absolute;inset:0;background:rgba(8,14,13,.82);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;color:#fff;padding:20px;text-align:center}
.tp-end[hidden]{display:none}
.tp-end b{font-size:22px}
.tp-end-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tp-bar{display:flex;align-items:center;gap:4px;padding:8px 10px;background:#0E1413}
.tp-btn{width:38px;height:38px;border-radius:10px;border:0;background:transparent;color:#DDE3E1;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0}
.tp-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.tp-btn.off{color:#6B7673}
.tp-prog{flex:1;display:flex;gap:4px;padding:0 6px;min-width:0}
.tp-prog button{flex:1;height:22px;border:0;background:transparent;padding:0;cursor:pointer;display:flex;align-items:center}
.tp-prog i{display:block;width:100%;height:4px;border-radius:4px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.tp-prog i::after{content:"";position:absolute;inset:0;width:var(--p,0%);background:#5EE0C8;border-radius:4px}
.tp-prog button.done i::after{width:100%}
.tp:fullscreen{border-radius:0;display:flex;flex-direction:column;justify-content:center;background:#0E1413}
.tp:fullscreen .tp-stage{aspect-ratio:auto;flex:1}
.tp-note{color:#9FAAA6;font-size:12px;padding:0 14px 10px;background:#0E1413;margin:0}
@media (max-width:980px){.tut-ch-in{grid-template-columns:1fr}.tut-ch{padding:44px 0}}
@media (max-width:560px){
  .tp-stage{aspect-ratio:4/3.3}
  .tp-big-ic{width:60px;height:60px}.tp-big-t{font-size:17px}
  .tp-cap{bottom:10px;width:94%}.tp-cap span{padding:8px 10px}
  .tp-fs{display:none}
}
@media (prefers-reduced-motion:reduce){.tp-cam{transition:opacity .3s}.tp-spot{animation:none}.tp-cursor{transition:none}}