:root{
  --bg:#fff; --fg:#000; --muted:#5a5858; --muted2:#302f2f;
  --surface:#f2f2f2; --surface2:#e7e7e7; --surface3:#dddddd;
  --border:#e5e5e5; --danger:#cc0000; --shadow:0 8px 32px rgba(0,0,0,.1);
}
/*@media (prefers-color-scheme:dark){
  :root{
    --bg:#0b0b0b; --fg:#fafafa; --muted:#b5b5b5; --muted2:#d0d0d0;
    --surface:#181818; --surface2:#222; --surface3:#2a2a2a;
    --border:#2c2c2c; --danger:#ff4d4d; --shadow:0 10px 24px rgba(0,0,0,.35);
  }
}*/

/* reset ringkas */

html,body{ height:100%; }
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--fg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{ color:inherit; text-decoration:none; }
:focus-visible{ outline:2px solid #6aa7ff; outline-offset:2px; border-radius:4px; }

/* layout dasar */
.container{
  max-width:1100px; margin:0 auto; min-height:100vh;
  display:flex; flex-direction:column; padding-inline:16px;
}
.top{ padding:8px 8px; display:flex; align-items:center; }
.logo{
  font-size:26px; letter-spacing:-2px; font-weight:600;
  font-family:'Poppins',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.upload{
  font-size:15px; margin-left:20px; padding:8px 20px;
  border-radius:48px; font-weight:600; background:var(--surface2);
  cursor:pointer; transition:background-color .15s ease, opacity .15s ease;
}
.upload:hover{ background:var(--surface3); }
.more{ margin-left:auto; font-size:15px; font-weight:500; }
.text{ margin-top:64px; padding:0 8px; }
.main-line{ font-size:26px; font-weight:700; text-align:center; }
.second-line{ margin-top:16px; font-size:16px; font-weight:400; text-align:center; }

.footer{
  font-size:13px; color:var(--muted2); text-align:center;
  margin-top:auto; padding:32px 16px;
}
.copyright{ font-weight:500; }
.legal{
  display:flex; justify-content:center; margin-top:8px;
  font-size:12px; color:var(--muted);
}
.legal .item{ margin:0 8px; }
.legal a:hover{ text-decoration:underline; }

/* upload box */
.box{ margin-top:32px; text-align:center; }
.box-upload{
  background:var(--fg); color:var(--bg); border-radius:48px;
  padding:12px 24px; font-weight:700; cursor:pointer; width:165px; margin:0 auto;
  transition:opacity .15s ease;
}
.box-upload:hover{ opacity:.9; }

/* drag overlay */
body.dragging::before{
  content:"Drop the file anywhere on this page";
  position:fixed; inset:0; display:flex; justify-content:center; align-items:center;
  font-size:1.5em; background:rgba(78,78,78,.72); pointer-events:none;
  color:#e0e0e0; text-align:center; font-weight:600;
}
.upload-error{ color:var(--danger); text-align:center; font-size:14px; margin-top:12px; }

/* halaman video (container) */
.video{ margin-top:12px; width:100%; display:flex; justify-content:center; }
.video-inner{
  width:100%; display:flex; align-items:center; justify-content:center; max-width:720px;
}
.as{ max-width:720px; margin:8px auto 0; width:100%; }

/* tombol aksi bawah video */
.video-actions{ width:100%; justify-content:center; }
.video-actions-inner{
  width:100%; max-width:720px; display:flex; gap:8px; padding:12px 12px 6px;
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none; white-space:nowrap;
}
.video-actions-inner::-webkit-scrollbar{ display:none; }
.action-btn{
  background:var(--surface); border:none; padding:8px 16px; border-radius:16px;
  font-family:inherit; font-size:14px; font-weight:500; cursor:pointer;
  transition:background-color .2s ease, opacity .15s ease; flex-shrink:0; color:var(--fg);
}
.action-btn:hover{ background:var(--surface3); }

/* modal */
.modal{
  display:none; position:fixed; z-index:100; inset:0;
  background:rgba(0,0,0,.5); backdrop-filter:blur(4px); overflow-y:auto;
}
@supports not ((backdrop-filter: blur(4px))){ .modal{ background:rgba(0,0,0,.6); } }
.modal-content{
  background:var(--bg); color:var(--fg); margin:10% auto; padding:2rem;
  border:1px solid var(--border); width:90%; max-width:450px; border-radius:12px;
  position:relative; box-shadow:var(--shadow);
}
.modal-close{
  position:absolute; right:1.5rem; top:1rem; color:var(--fg);
  font-size:24px; font-weight:bold; cursor:pointer; transition:opacity .2s ease;
}
.modal-close:hover{ opacity:.7; }

/* animasi tombol upload saat proses */
@keyframes grad{
  0%{ background-position:0% 50% }
  50%{ background-position:100% 50% }
  100%{ background-position:0% 50% }
}
.box-upload.animate{
  background:linear-gradient(270deg,#000,#333,#2a2a2a);
  background-size:600% 600%;
  animation:grad 1.5s ease infinite;
}
@media (prefers-reduced-motion:reduce){
  .box-upload.animate{ animation:none; }
}