/* SliceDrive - black and dark yellow */
*,*::before,*::after{box-sizing:border-box}

:root{
  --bg:#000;

  /* HEADER / LOGO - tetap warna asli */
  --y:#d4a017;
  --yh:#f0b90b;
  --yd:#a67f12;

  /* CONTENT - dark gold / orange tua */
  --cy:#a86f0a;
  --cyh:#c4870d;
  --cyd:#76500a;
  --cline:rgba(168,111,10,.28);
  --cwash:rgba(168,111,10,.08);

  --line:rgba(212,160,23,.28);
  --wash:rgba(212,160,23,.08);
  --r:14px;

  --head:"Bricolage Grotesque","Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --body:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

html{
  color-scheme:dark;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden
}

body{
  margin:0;
  min-height:100vh;
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--cy);
  font:400 16px/1.6 var(--body);
  overflow-x:clip
}

[hidden]{display:none!important}

a{
  color:var(--cyh);
  text-decoration:none
}

a:hover{text-decoration:underline}

h1,h2,h3{
  font-family:var(--head);
  font-weight:800;
  letter-spacing:-.025em;
  line-height:1.1;
  margin:0 0 .5em;
  color:var(--cy)
}

h1{font-size:clamp(2.2rem,7vw,3.6rem)}
h2{font-size:1.5rem}
h3{font-size:1.1rem}

p{margin:0 0 1em}

.dim{color:var(--cyd)}

.lead{
  font-size:1.1rem;
  color:var(--cyd);
  max-width:34em
}

:focus-visible{
  outline:2px solid var(--cyh);
  outline-offset:2px
}

::selection{
  background:var(--cy);
  color:#000
}

.wrap{
  width:100%;
  max-width:1000px;
  margin:0 auto;
  padding-left:max(18px,env(safe-area-inset-left));
  padding-right:max(18px,env(safe-area-inset-right))
}

.wide{max-width:1180px}
.narrow{max-width:660px}

main{
  flex:1 0 auto;
  width:100%;
  padding-bottom:56px
}

.center-page{
  text-align:center;
  padding-top:96px
}


/* =========================================================
   HEADER
   Tetap menggunakan warna kuning asli
   ========================================================= */

.top{
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)
}

.bar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:60px
}

.brand{
  display:flex;
  align-items:center;
  gap:9px;
  color:var(--y);
  font:800 1.25rem/1 var(--head);
  letter-spacing:-.03em
}

.brand:hover{text-decoration:none}

.brand em{
  font-style:normal;
  color:var(--yd);
  font-weight:600
}

.nav{
  display:flex;
  align-items:center;
  gap:4px
}

.nav form{margin:0}

.nav a{
  padding:8px 13px;
  border-radius:99px;
  color:var(--y);
  font-weight:600;
  font-size:.95rem
}

.nav a:hover{
  background:var(--wash);
  text-decoration:none
}

.nav a.on{
  background:var(--y);
  color:#000
}

@media(max-width:480px){
  .nav a{
    padding:7px 10px;
    font-size:.88rem
  }

  .brand span{font-size:1.1rem}
  .brand svg{
    width:22px;
    height:22px
  }
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
  position:relative;
  padding:60px 0 30px
}

.hero::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:-50vw;
  right:-50vw;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(
    104deg,
    transparent 0 62%,
    var(--cwash) 62% 62.7%,
    transparent 62.7% 100%
  )
}

.hero h1{max-width:9em}


/* =========================================================
   COMPONENTS
   ========================================================= */

.card{
  border:1px solid var(--cline);
  border-radius:18px;
  padding:22px;
  background:var(--bg)
}

.card + .card{margin-top:16px}

.field{margin:0 0 16px}

.field label,
.lbl{
  display:block;
  font-weight:600;
  margin-bottom:6px;
  font-size:.95rem
}

.hint{
  font-size:.85rem;
  color:var(--cyd);
  margin-top:5px
}

input[type=text],
input[type=url],
input[type=password],
input[type=number],
input[type=search],
textarea,
select{
  width:100%;
  background:var(--bg);
  color:var(--cy);
  border:1px solid var(--cline);
  border-radius:12px;
  padding:12px 14px;
  font:inherit;
  outline:none;
  transition:border-color .15s,box-shadow .15s
}

textarea{
  resize:vertical;
  min-height:96px
}

input:focus,
textarea:focus,
select:focus{
  border-color:var(--cyh);
  box-shadow:0 0 0 3px rgba(196,135,13,.18)
}

::placeholder{
  color:var(--cyd);
  opacity:.8
}

input[type=checkbox]{
  width:18px;
  height:18px;
  accent-color:var(--cy);
  vertical-align:middle;
  margin:0
}

input[type=file]{color:var(--cy)}

input[readonly]{cursor:text}


/* BUTTON */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:12px 22px;
  border-radius:12px;
  border:1.5px solid var(--cy);
  background:var(--cy);
  color:#000;
  font:700 1rem/1.2 var(--body);
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s
}

.btn:hover{
  background:var(--cyh);
  border-color:var(--cyh);
  text-decoration:none;
  color:#000
}

.btn.ghost{
  background:transparent;
  color:var(--cy)
}

.btn.ghost:hover{
  background:var(--cwash);
  color:var(--cyh);
  border-color:var(--cyh)
}

.btn.sm{
  padding:8px 14px;
  font-size:.9rem;
  border-radius:10px
}

.btn.block{width:100%}

.btn[disabled]{
  opacity:.5;
  cursor:not-allowed
}


/* ALERT */

.alert{
  border:1px solid var(--cy);
  border-radius:12px;
  padding:12px 14px;
  background:var(--cwash);
  margin:0 0 16px
}

.alert strong{font-weight:700}


/* ROW */

.row{
  display:flex;
  gap:8px;
  align-items:stretch
}

.row > input{
  flex:1;
  min-width:0
}

@media(max-width:480px){
  .row.wrapm{flex-wrap:wrap}
  .row.wrapm .btn{width:100%}
}


/* =========================================================
   DROPZONE
   ========================================================= */

.drop{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  text-align:center;
  cursor:pointer;
  border:2px dashed rgba(168,111,10,.5);
  border-radius:18px;
  padding:38px 18px;
  margin-bottom:18px;
  transition:background .15s,border-color .15s
}

.drop:hover,
.drop.over{
  border-color:var(--cyh);
  background:var(--cwash)
}

.drop input{display:none}

.drop svg{
  color:var(--cy);
  margin-bottom:4px
}

.drop strong{
  font-family:var(--head);
  font-size:1.2rem;
  word-break:break-word
}

.drop small{color:var(--cyd)}

.bar{
  height:10px;
  border-radius:99px;
  border:1px solid var(--cline);
  overflow:hidden
}

.bar i{
  display:block;
  height:100%;
  width:0;
  background:var(--cy);
  transition:width .15s
}

.progress{margin:0 0 16px}

.progress small{
  display:block;
  margin-top:6px;
  color:var(--cyd)
}


/* =========================================================
   TOOLS
   ========================================================= */

.grid2{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:14px;
  margin-top:28px
}

.tool{
  display:block;
  border:1px solid var(--cline);
  border-radius:18px;
  padding:20px;
  color:var(--cy);
  transition:border-color .15s,background .15s
}

.tool:hover{
  border-color:var(--cy);
  background:var(--cwash);
  text-decoration:none
}

.tool h3{margin-bottom:6px}

.tool p{
  margin:0;
  color:var(--cyd)
}


/* =========================================================
   VIDEO PAGE
   ========================================================= */

.player{
  display:block;
  width:100%;
  max-height:72vh;
  max-height:72dvh;
  aspect-ratio:16/9;
  object-fit:contain;
  background:#000;
  border:1px solid var(--cline);
  border-radius:16px
}

.vtitle{
  margin:22px 0 4px;
  font-size:clamp(1.5rem,4vw,2.2rem);
  word-break:break-word
}

.meta{
  color:var(--cyd);
  font-size:.92rem;
  margin-bottom:20px
}

.share{margin-top:22px}

.share h2{
  font-size:1.1rem;
  margin-bottom:10px
}

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:12px
}

.chips a,
.chips button{
  font-size:.9rem
}


/* =========================================================
   PUBLIC BIO PAGE
   ========================================================= */

body.bare main.bio{
  flex:1 0 auto;
  display:flex;
  flex-direction:column
}

.bio{
  width:100%;
  max-width:480px;
  margin:0 auto;
  padding:44px 18px 40px;
  text-align:center
}

.avatar{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--cy);
  display:block;
  margin:0 auto 18px
}

.avatar.ph{
  display:flex;
  align-items:center;
  justify-content:center;
  font:800 3rem/1 var(--head)
}

.bio h1{
  font-size:clamp(1.7rem,6vw,2.3rem);
  margin-bottom:.35em;
  word-break:break-word
}

.bio .desc{
  color:var(--cyd);
  margin-bottom:26px;
  white-space:normal;
  word-break:break-word
}

.bio-btn{
  display:block;
  padding:15px 18px;
  margin:0 0 12px;
  border-radius:14px;
  border:1.5px solid var(--cy);
  color:var(--cy);
  font-weight:700;
  transition:background .15s,color .15s;
  word-break:break-word
}

.bio-btn:hover{
  background:var(--cy);
  color:#000;
  text-decoration:none
}

.bio-foot{
  margin-top:auto;
  padding-top:34px;
  font-size:.85rem;
  color:var(--cyd)
}

.owner{
  max-width:480px;
  margin:18px auto 0;
  padding:0 18px;
  width:100%
}


/* =========================================================
   BIO FORM
   ========================================================= */

.btn-row{
  display:grid;
  grid-template-columns:1fr 1.4fr auto;
  gap:8px;
  margin-bottom:8px
}

@media(max-width:560px){
  .btn-row{
    grid-template-columns:1fr auto
  }

  .btn-row input:nth-child(2){
    grid-column:1/-1;
    order:3
  }
}


/* =========================================================
   FOOTER
   Tanpa garis dan tanpa tombol Admin
   ========================================================= */

.foot{
  margin-top:auto;
  flex-shrink:0;
  border-top:0 !important;
  padding:18px 0 max(18px,env(safe-area-inset-bottom));
  color:var(--cyd);
  font-size:.9rem
}

.foot .wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  width:100%
}

.foot a{display:none}


/* =========================================================
   ADMIN
   ========================================================= */

.tabs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding:18px 0 14px;
  scrollbar-width:none
}

.tabs::-webkit-scrollbar{display:none}

.tab{
  flex:none;
  padding:9px 16px;
  border-radius:99px;
  border:1px solid var(--cline);
  color:var(--cy);
  font-weight:600;
  white-space:nowrap
}

.tab:hover{
  border-color:var(--cy);
  text-decoration:none
}

.tab.on{
  background:var(--cy);
  color:#000;
  border-color:var(--cy)
}

.stats{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:12px;
  margin-bottom:16px
}

.stat{
  border:1px solid var(--cline);
  border-radius:16px;
  padding:16px 18px
}

.stat span{
  display:block;
  color:var(--cyd);
  font-size:.9rem
}

.stat strong{
  display:block;
  font:800 2rem/1.15 var(--head);
  letter-spacing:-.02em
}

.stat small{color:var(--cyd)}

.toolbar{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:14px
}

.toolbar input[type=search]{
  flex:1;
  min-width:180px
}

.tbl{
  width:100%;
  border-collapse:collapse
}

.tbl th,
.tbl td{
  padding:12px 10px;
  text-align:left;
  border-bottom:1px solid var(--cline);
  vertical-align:middle
}

.tbl th{
  color:var(--cyd);
  font-weight:600;
  font-size:.88rem
}

.tbl td.act{
  white-space:nowrap;
  display:flex;
  gap:6px;
  flex-wrap:wrap
}

.tbl .trunc{
  max-width:280px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  display:inline-block;
  vertical-align:bottom
}

.bulk{
  margin-top:14px;
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap
}

.pager{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:16px;
  color:var(--cyd);
  font-size:.92rem
}

.empty{
  border:1px dashed var(--cline);
  border-radius:16px;
  padding:32px 18px;
  text-align:center;
  color:var(--cyd)
}

.switchline{
  display:flex;
  gap:10px;
  align-items:center;
  font-weight:600
}

.two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

@media(max-width:560px){
  .two{grid-template-columns:1fr}
}

code,
.mono{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88rem;
  word-break:break-all
}

.codebox{
  border:1px solid var(--cline);
  border-radius:12px;
  padding:10px 12px;
  margin:8px 0 14px
}


/* =========================================================
   MOBILE TABLE
   ========================================================= */

@media(max-width:720px){
  .tbl thead{display:none}

  .tbl,
  .tbl tbody,
  .tbl tr,
  .tbl td{
    display:block;
    width:100%
  }

  .tbl tr{
    border:1px solid var(--cline);
    border-radius:16px;
    padding:8px 14px;
    margin-bottom:12px
  }

  .tbl td{
    border:0;
    padding:6px 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    text-align:right
  }

  .tbl td::before{
    content:attr(data-label);
    color:var(--cyd);
    text-align:left;
    flex:none;
    font-size:.88rem
  }

  .tbl td.chk{
    justify-content:flex-start
  }

  .tbl td.chk::before{
    content:"Select"
  }

  .tbl td.act{
    justify-content:flex-end;
    padding-top:10px
  }

  .tbl td.act::before{display:none}

  .tbl .trunc{max-width:58vw}
}


/* =========================================================
   GENERAL
   ========================================================= */

img,
video{
  max-width:100%
}

input,
textarea,
select,
button{
  max-width:100%
}

@media(min-width:1024px){
  .hero{
    padding:84px 0 40px
  }
}

@media(max-width:600px){
  .hero{
    padding:34px 0 18px
  }

  .card{
    padding:16px;
    border-radius:16px
  }

  .drop{padding:28px 14px}

  main{padding-bottom:36px}

  .bio{padding-top:32px}

  .avatar{
    width:104px;
    height:104px
  }

  .stats{
    grid-template-columns:1fr 1fr
  }

  .stat strong{font-size:1.6rem}

  .foot{font-size:.85rem}
}

@media(max-width:380px){
  .brand em{display:none}
  .stats{grid-template-columns:1fr}
}

@media(prefers-reduced-motion:reduce){
  *{
    transition:none!important;
    scroll-behavior:auto!important
  }
}

  background:rgba(180,70,40,.07);
  color:#9a431f;

  font-size:.92rem;
  line-height:1.45;
  text-align:center;
}

/* Progress */
.simple-progress{
  width:100%;
  max-width:410px;
  margin:28px auto 0;
}

.simple-progress-track{
  width:100%;
  height:8px;
  overflow:hidden;
  border-radius:999px;
  background:#e3e6eb;
}

.simple-progress-track i{
  display:block;
  width:0;
  height:100%;
  border-radius:999px;
  background:#202938;
  transition:width .15s ease;
}

.simple-progress span{
  display:block;
  margin-top:8px;
  color:#697386;
  font-size:.85rem;
  text-align:center;
}

/* Mobile */
@media(max-width:600px){

  .simple-hero{
    padding:100px 20px 70px;
  }

  .simple-hero h1{
    font-size:clamp(2.65rem,12vw,4rem);
    letter-spacing:-.05em;
  }

  .simple-hero > p{
    margin-top:30px;
    font-size:1.15rem;
  }

  .simple-upload{
    margin-top:58px;
  }

  .simple-upload-btn{
    min-height:68px;
    max-width:360px;
    font-size:1.15rem;
  }
}

@media(max-width:380px){

  .simple-hero{
    padding-top:75px;
  }

  .simple-hero h1{
    font-size:2.45rem;
  }

  .simple-upload-btn{
    min-height:64px;
  }
}
/* =========================================================
   SIMPLE HOME PAGE
   Warna mengikuti warna utama website
   ========================================================= */

.home-simple{
  flex:1 0 auto;
  width:100%;
  display:flex;
  justify-content:center;
}

.simple-hero{
  width:100%;
  max-width:900px;
  text-align:center;
  padding:150px 24px 100px;
}


/* Main title */

.simple-hero h1{
  margin:0;
  color:var(--cy);
  font-family:var(--head);
  font-size:clamp(3rem,7vw,5.4rem);
  font-weight:800;
  line-height:.98;
  letter-spacing:-.055em;
}

.simple-hero h1 span{
  color:var(--cyd);
}


/* Subtitle */

.simple-hero > p{
  margin:48px 0 0;
  color:var(--cyd);
  font-size:clamp(1.2rem,2.5vw,1.65rem);
  line-height:1.4;
}


/* Upload form */

.simple-upload{
  margin:90px auto 0;
  width:100%;
  max-width:520px;
}


/* Optional title */

.simple-title{
  display:none !important;
}


/* Upload button */

.simple-upload-btn{
  appearance:none;
  display:flex;
  align-items:center;
  justify-content:center;

  width:100%;
  max-width:410px;
  min-height:76px;

  margin:0 auto;
  padding:18px 30px;

  border:1.5px solid var(--cy);
  border-radius:999px;

  background:var(--cy);
  color:#000;

  font-family:var(--body);
  font-size:1.35rem;
  font-weight:600;
  line-height:1;

  cursor:pointer;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    transform .18s ease,
    box-shadow .18s ease;
}

.simple-upload-btn:hover{
  background:var(--cyh);
  border-color:var(--cyh);
  color:#000;
  text-decoration:none;
  transform:translateY(-1px);
  box-shadow:0 10px 28px rgba(212,160,23,.12);
}

.simple-upload-btn:active{
  transform:translateY(0);
}

.simple-upload-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}


/* Selected file */

.simple-file{
  margin:20px auto 0;
  max-width:410px;

  color:var(--cyd);

  font-size:.92rem;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* Error / notification */

.simple-msg{
  width:100%;
  max-width:520px;

  margin:20px auto 0;
  padding:13px 16px;

  border:1px solid var(--line);
  border-radius:12px;

  background:var(--wash);
  color:var(--cy);

  font-size:.92rem;
  line-height:1.45;
  text-align:center;
}


/* Progress */

.simple-progress{
  width:100%;
  max-width:410px;

  margin:28px auto 0;
}

.simple-progress-track{
  width:100%;
  height:8px;

  overflow:hidden;
  border-radius:999px;

  background:rgba(212,160,23,.16);
}

.simple-progress-track i{
  display:block;

  width:0;
  height:100%;

  border-radius:999px;

  background:var(--y);

  transition:width .15s ease;
}

.simple-progress span{
  display:block;

  margin-top:8px;

  color:var(--cyd);

  font-size:.85rem;
  text-align:center;
}


/* Mobile */

@media(max-width:600px){

  .simple-hero{
    padding:100px 20px 70px;
  }

  .simple-hero h1{
    font-size:clamp(2.65rem,12vw,4rem);
    letter-spacing:-.05em;
  }

  .simple-hero > p{
    margin-top:30px;
    font-size:1.15rem;
  }

  .simple-upload{
    margin-top:58px;
  }

  .simple-upload-btn{
    min-height:68px;
    max-width:360px;
    font-size:1.15rem;
  }
}


@media(max-width:380px){

  .simple-hero{
    padding-top:75px;
  }

  .simple-hero h1{
    font-size:2.45rem;
  }

  .simple-upload-btn{
    min-height:64px;
  }
}
/* =========================================================
   VIDEO PAGE
   Hanya berlaku untuk halaman video
   ========================================================= */


/* ---------------------------------------------------------
   VIDEO HEADER
   --------------------------------------------------------- */

.video-top{
  background:rgba(0,0,0,.92);
  border-bottom:1px solid var(--line);
}

.video-bar{
  min-height:60px;

  display:flex;
  align-items:center;
  justify-content:space-between;

  gap:16px;
}


/* Tombol upload di kanan */

.video-upload-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  min-height:38px;
  padding:8px 16px;

  border:1px solid var(--y);
  border-radius:999px;

  background:transparent;
  color:var(--y);

  font-size:.9rem;
  font-weight:700;

  white-space:nowrap;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}

.video-upload-link:hover{
  background:var(--y);
  border-color:var(--y);
  color:#000;

  text-decoration:none;
}


/* ---------------------------------------------------------
   VIDEO CONTAINER
   --------------------------------------------------------- */

.video-page{
  width:100%;
  max-width:1000px;

  margin:0 auto;

  padding:42px 18px 60px;
}


/*
 * Video TIDAK dipaksa 16:9.
 *
 * width:auto + height:auto membuat browser menggunakan
 * ukuran/aspect ratio asli video.
 *
 * max-width dan max-height hanya membatasi agar video
 * tidak keluar layar atau menjadi terlalu besar.
 */

.video-box{
  --ar:1.7778;
  width:min(100%,960px,calc(72vh * var(--ar)));
  width:min(100%,960px,calc(72dvh * var(--ar)));
  aspect-ratio:var(--ar);
  margin:0 auto;
  background:#000;
  border:1px solid var(--line);
  border-radius:14px;
  overflow:hidden;
}
.video-box .player,
.video-box video{
  display:block;width:100%;height:100%;
  max-width:none;max-height:none;
  aspect-ratio:auto;object-fit:contain;
  border:0;border-radius:0;background:#000;
}

.video-upload-link{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:38px;padding:8px 22px;
  border:1.5px solid var(--y);border-radius:999px;
  background:var(--y);color:#000;
  font-size:.9rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;white-space:nowrap;
  transition:background .15s,border-color .15s;
}
.video-upload-link:hover{
  background:var(--yh);border-color:var(--yh);
  color:#000;text-decoration:none;
}


/* ---------------------------------------------------------
   VIDEO INFO
   --------------------------------------------------------- */

.video-info{
  width:100%;
  max-width:760px;

  margin:22px auto 0;
}

.video-info h1{
  margin:0 0 6px;

  color:var(--y);

  font-family:var(--head);
  font-size:clamp(1.35rem,4vw,2rem);
  font-weight:800;

  line-height:1.15;
  letter-spacing:-.025em;

  word-break:break-word;
}

.video-info .meta{
  margin:0;

  color:var(--yd);

  font-size:.9rem;
  line-height:1.5;
}


/* ---------------------------------------------------------
   SHARE LINK
   --------------------------------------------------------- */

.video-share{
  width:100%;
  max-width:760px;

  margin:22px auto 0;
}

.share-label{
  display:block;

  margin-bottom:7px;

  color:var(--y);

  font-size:.9rem;
  font-weight:600;
}


/*
 * Link dibuat benar-benar terlihat.
 */

.video-share-row{
  display:grid;

  grid-template-columns:minmax(0,1fr) auto;

  gap:8px;

  width:100%;
}


/* Kotak URL */

.video-share-row input{
  width:100%;
  min-width:0;

  height:46px;

  padding:10px 13px;

  background:#000;

  border:1px solid var(--line);
  border-radius:10px;

  color:var(--y);

  font-family:var(--body);
  font-size:.92rem;

  outline:none;

  /*
   * URL panjang tetap berada di dalam kotak.
   */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.video-share-row input:hover{
  border-color:var(--y);
}

.video-share-row input:focus{
  border-color:var(--yh);

  box-shadow:
    0 0 0 3px rgba(240,185,11,.12);
}


/* Tombol Copy */

.video-share-row .btn{
  min-width:82px;
  height:46px;

  padding:10px 17px;

  border-radius:10px;

  background:var(--y);
  border-color:var(--y);

  color:#000;

  font-weight:700;
}

.video-share-row .btn:hover{
  background:var(--yh);
  border-color:var(--yh);
  color:#000;
}


/* ---------------------------------------------------------
   HAPUS SHARE SOSIAL
   --------------------------------------------------------- */

.video-share .whatsapp,
.video-share .facebook,
.video-share .twitter,
.video-share .telegram,
.video-share .share-social,
.video-share .social-share,
.share-social,
.social-share{
  display:none !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media(max-width:600px){

  .video-bar{
    min-height:56px;
  }

  .video-top .brand span{
    font-size:1.05rem;
  }

  .video-top .brand svg{
    width:22px;
    height:22px;
  }

  .video-upload-link{
    min-height:36px;

    padding:7px 13px;

    font-size:.82rem;
  }


  .video-page{
    padding:28px 14px 40px;
  }


  /*
   * Di HP video boleh lebih tinggi.
   * Tetap mengikuti ukuran asli.
   */

  .video-box .player,
  .video-box video{
    max-width:100%;
    max-height:70dvh;

    border-radius:11px;
  }


  .video-info{
    margin-top:18px;
  }

  .video-info h1{
    font-size:1.35rem;
  }


  .video-share{
    margin-top:20px;
  }

  .video-share-row{
    grid-template-columns:minmax(0,1fr) auto;

    gap:6px;
  }

  .video-share-row input{
    height:44px;

    padding:9px 11px;

    font-size:.84rem;
  }

  .video-share-row .btn{
    height:44px;

    min-width:70px;

    padding:9px 13px;

    font-size:.9rem;
  }
}


/* ---------------------------------------------------------
   HP SANGAT KECIL
   --------------------------------------------------------- */

@media(max-width:380px){

  .video-top .brand span{
    font-size:1rem;
  }

  .video-page{
    padding-left:12px;
    padding-right:12px;
  }

  .video-share-row input{
    font-size:.8rem;
  }

  .video-share-row .btn{
    min-width:64px;
    padding-left:10px;
    padding-right:10px;
  }
}