.tutorial-video-section{position:relative;overflow:hidden}
.tutorial-video-section:not(.tutorial-video-section-teacher){background:linear-gradient(180deg,#f7f8ff 0%,#fff 100%)}
.tutorial-video-section-teacher{margin-top:18px;padding:22px}
.tutorial-video-heading{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}
.tutorial-video-heading h2{margin:5px 0 6px;font-size:clamp(22px,3vw,32px)}
.tutorial-video-heading p{margin:0;max-width:720px;line-height:1.65}
.tutorial-video-count{display:inline-flex;align-items:center;justify-content:center;min-width:74px;padding:9px 12px;border-radius:999px;background:#ede9fe;color:#5b21b6;font-weight:800;font-size:13px;white-space:nowrap}
.tutorial-video-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:18px}
.tutorial-video-card{overflow:hidden;border-radius:20px;background:#fff;border:1px solid #e7e9f2;box-shadow:0 14px 34px rgba(28,31,55,.08);transition:transform .18s ease,box-shadow .18s ease}
.tutorial-video-card:hover{transform:translateY(-3px);box-shadow:0 18px 42px rgba(28,31,55,.12)}
.tutorial-video-player{position:relative;aspect-ratio:16/9;background:#111827;overflow:hidden}
.tutorial-video-player iframe{width:100%;height:100%;border:0;display:block}
.tutorial-video-poster{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#111827;cursor:pointer;overflow:hidden;text-align:left}
.tutorial-video-poster img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .3s ease}
.tutorial-video-poster:hover img{transform:scale(1.025)}
.tutorial-video-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,12,23,.05),rgba(8,12,23,.42))}
.tutorial-video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:64px;height:64px;border-radius:50%;padding-left:4px;background:#ef233c;color:#fff;font-size:24px;box-shadow:0 12px 30px rgba(0,0,0,.28);border:4px solid rgba(255,255,255,.9)}
.tutorial-video-play-label{position:absolute;left:16px;bottom:14px;color:#fff;font-size:13px;font-weight:800;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.tutorial-video-copy{padding:16px 17px 17px}
.tutorial-video-copy h3{margin:0 0 7px;font-size:17px;line-height:1.4;color:#172033}
.tutorial-video-copy p{margin:0 0 12px;color:#667085;font-size:14px;line-height:1.6}
.tutorial-video-copy a{display:inline-flex;color:#5b36e8;font-size:13px;font-weight:800;text-decoration:none}
.tutorial-video-copy a:hover{text-decoration:underline}

/* V4.82.1 — beranda publik: video berjejer horizontal dan dapat digeser. */
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-grid{
  display:flex;
  flex-wrap:nowrap;
  gap:16px;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  scroll-behavior:smooth;
  overscroll-behavior-inline:contain;
  -webkit-overflow-scrolling:touch;
  padding:2px 4px 14px;
  margin:0 -4px;
  cursor:grab;
  scrollbar-width:thin;
  scrollbar-color:#c7c2f5 transparent;
}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-grid::-webkit-scrollbar{height:8px}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-grid::-webkit-scrollbar-track{background:transparent}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-grid::-webkit-scrollbar-thumb{background:#c7c2f5;border-radius:999px}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-grid.is-dragging{cursor:grabbing;scroll-behavior:auto;user-select:none}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-card{
  flex:0 0 300px;
  width:300px;
  max-width:300px;
  scroll-snap-align:start;
  border-radius:18px;
}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-play{
  width:52px;
  height:52px;
  font-size:20px;
  border-width:3px;
}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-play-label{
  left:12px;
  bottom:10px;
  font-size:12px;
}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-copy{padding:13px 14px 14px}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-copy h3{font-size:15px;margin-bottom:5px}
.tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-copy p{font-size:13px;line-height:1.5;margin-bottom:9px}

@media(max-width:700px){
  .tutorial-video-section-teacher{padding:16px}
  .tutorial-video-heading{align-items:flex-start}
  .tutorial-video-heading h2{font-size:23px}
  .tutorial-video-section-teacher .tutorial-video-grid{grid-template-columns:1fr}
  .tutorial-video-play{width:56px;height:56px;font-size:21px}
  .tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-grid{
    gap:13px;
    padding-bottom:12px;
    scroll-snap-type:x mandatory;
  }
  .tutorial-video-section:not(.tutorial-video-section-teacher) .tutorial-video-card{
    flex-basis:min(82vw,300px);
    width:min(82vw,300px);
    max-width:min(82vw,300px);
  }
}