/* Base */
*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  background:#5f50ff;
  color:#1f2a44;
  line-height:1.45;
}

/* Card */
.card{
  position:relative;
  margin:24px auto;
  height:calc(100vh - 48px);
  max-width:960px;
  background:#fff;
  border-radius:16px;
  box-shadow:0 22px 50px rgba(21,25,78,.35);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

/* Nav */
.nav{display:flex;align-items:center;justify-content:space-between;padding:12px 18px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-logo{height:100px;width:100px;object-fit:cover;}
.brand-text{font-weight:700;font-size:13px;color:#4c4f66;}
.meta{list-style:none;display:flex;gap:16px;margin:0;padding:0;}
.meta-item{display:flex;align-items:center;gap:6px;font-size:13px;color:#4c4f66;}
.meta-item .ico{width:16px;height:16px;}
.meta-item .ico svg{width:100%;height:100%;stroke:#6b7280;stroke-width:2;fill:none;}

/* Hero */
.hero{flex:1 1 auto;display:flex;justify-content:center;align-items:flex-start;padding:16px 18px;overflow-y:auto;}
.hero-left.full{max-width:760px;margin:0 auto;width:100%;}

.title{margin:4px 0 8px;}
.title-line{display:block;font-weight:800;line-height:1.2;}
.title-line.light{color:#8ca0ff;font-size:30px;}
.title-line.dark{color:#4c4f66;font-size:32px;}

.subtitle{margin:6px 0 10px;color:#6b7280;}
.team h3{margin:10px 0 6px;font-size:16px;color:#4c4f66;}
.team ul{margin:0 0 10px 0;padding:0;list-style:none;}
.team li{font-weight:normal;}
.team li.anggota{padding-left:28px;} /* indent lebih jauh */

/* Slider */
.device{max-width:500px;margin:12px auto 0;}
.screen{
  border:4px solid #0f172a; /* lebih tipis */
  border-radius:14px;
  overflow:hidden;
  background:#0f172a;
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.base{height:12px;width:90%;margin:6px auto 0;background:#c7cbe6;border-radius:0 0 14px 14px;}
.slider{overflow:hidden;position:relative;background:#111827;}
.slides{display:flex;transition:transform .6s ease;}
.slides img{flex:0 0 100%;width:100%;height:240px;object-fit:cover;cursor:pointer;}
.nav-btn{position:absolute;top:50%;transform:translateY(-50%);background:rgba(0,0,0,.35);color:#fff;border:none;width:28px;height:28px;border-radius:50%;cursor:pointer;}
.nav-btn.left{left:6px;} .nav-btn.right{right:6px;}
.indicators{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);display:flex;gap:6px;}
.indicators span{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.65);cursor:pointer;}
.indicators span.active{background:#5f50ff;}

/* CTA */
.cta-wrapper{margin:14px auto 0;display:flex;justify-content:center;}
.btn.cta{
  display:inline-block;
  background:#5f50ff;
  color:#fff;
  border-radius:10px;
  padding:10px 16px;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 6px 16px rgba(95,80,255,.3);
  transition:background-color .2s ease, transform .08s ease, box-shadow .2s ease;
  z-index: 100;
}
.btn.cta:hover{background:#4939d8;transform:translateY(-1px) scale(1.02);box-shadow:0 10px 22px rgba(95,80,255,.35);}
.btn.cta:active{transform:translateY(0) scale(.99);box-shadow:0 6px 14px rgba(95,80,255,.28);}

/* Wave */
.wave{position:absolute;bottom:0;left:0;width:100%;height:108px;fill:#eef2ff;z-index: 90;}

/* Responsive */
@media(max-width:980px){
  .hero-left.full{max-width:92%;}
  .title-line.light{font-size:26px;}
  .title-line.dark{font-size:28px;}
  .slides img{height:220px;}
  .brand-text{display:none;}
}
@media(max-width:640px){
  .meta{gap:10px;}
  .meta-item{font-size:12px;gap:4px;}
  .title-line.light{font-size:20px;}
  .title-line.dark{font-size:22px;}
  .slides img{height:170px;}
}