/*
Theme Name: AVTub
Description: Tema AVTub untuk avtubhd.site - ditulis dari nol mengikuti hasil ukur render avtub.hot: latar hitam pekat, teks putih, aksen oranye #ff9900, Helvetica Neue 16px, logo lanskap 270x40.
Version: 1.0
*/
:root{
  --avt-bg:#000;--avt-panel:rgba(0,0,0,.62);--avt-kartu:#121212;--avt-garis:#242424;
  --avt-teks:#fff;--avt-redup:#aaa;--avt-abu:#646c79;--avt-oranye:#ff9900;--avt-oranye2:#d97f00;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;max-width:100%;overflow-x:hidden}
body{background:var(--avt-bg);color:var(--avt-teks);
 font:16px/1.55 "Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Ubuntu,sans-serif;
 -webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:var(--avt-oranye);text-decoration:none}
a:hover{color:var(--avt-oranye2)}

/* ---------- kerangka ---------- */
.avt-w{max-width:1180px;margin:0 auto;padding:0 8px}
.avt-top{background:var(--avt-panel);border-bottom:1px solid var(--avt-garis)}
.avt-tr{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.avt-logo img{width:270px;height:40px;max-width:62vw;object-fit:contain}
.avt-tg{display:none;background:none;border:0;padding:6px;cursor:pointer}
.avt-tg i,.avt-tg i:before,.avt-tg i:after{display:block;width:24px;height:2px;background:var(--avt-oranye);content:""}
.avt-tg i:before{transform:translateY(-7px)}
.avt-tg i:after{transform:translateY(5px)}

.avt-find{display:flex;padding:0 0 11px}
.avt-find input{flex:1;min-width:0;background:var(--avt-kartu);border:1px solid var(--avt-garis);
 border-right:0;border-radius:3px 0 0 3px;color:var(--avt-teks);padding:9px 11px;font-size:14px}
.avt-find input::placeholder{color:var(--avt-abu)}
.avt-find button{background:var(--avt-oranye);border:0;border-radius:0 3px 3px 0;color:#000;
 padding:0 15px;font-size:15px;cursor:pointer}

.avt-nav{background:#0a0a0a;border-bottom:2px solid var(--avt-oranye)}
.avt-nav .avt-w{display:flex;flex-wrap:wrap;gap:2px}
.avt-nav a{display:block;padding:10px 13px;font-size:13px;font-weight:700;color:var(--avt-teks);
 text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.avt-nav a:hover{background:var(--avt-oranye);color:#000}

/* ---------- bilah seksi ---------- */
.avt-bar{display:flex;align-items:center;gap:9px;margin:17px 0 11px;
 border-bottom:1px solid var(--avt-garis);padding-bottom:7px}
.avt-bar h1,.avt-bar h2{margin:0;font-size:19px;font-weight:700;line-height:1.3}
.avt-bar em{font-style:normal;background:var(--avt-oranye);color:#000;font-size:11px;
 font-weight:700;padding:2px 7px;border-radius:2px}

/* ---------- kartu ---------- */
.avt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.avt-c{min-width:0}
.avt-th{position:relative;display:block;background:var(--avt-kartu);border-radius:3px;
 overflow:hidden;aspect-ratio:16/9}
.avt-th img{width:100%;height:100%;object-fit:cover;transition:opacity .18s}
.avt-th:hover img{opacity:.78}
.avt-dur{position:absolute;right:5px;bottom:5px;background:rgba(0,0,0,.82);color:#fff;
 font-size:11px;padding:1px 5px;border-radius:2px}
.avt-j{display:block;margin:6px 0 3px;font-size:13px;line-height:1.35;color:var(--avt-teks);
 max-height:2.7em;overflow:hidden}
.avt-c:hover .avt-j{color:var(--avt-oranye)}
.avt-m{font-size:11px;color:var(--avt-abu)}

/* ---------- paginasi ---------- */
.avt-pg{display:flex;flex-wrap:wrap;gap:5px;margin:18px 0}
.avt-pg a,.avt-pg span{min-width:32px;text-align:center;padding:7px 11px;font-size:13px;
 background:var(--avt-kartu);color:var(--avt-teks);border:1px solid var(--avt-garis);border-radius:3px}
.avt-pg .current{background:var(--avt-oranye);color:#000;border-color:var(--avt-oranye);font-weight:700}
.avt-pg a:hover{border-color:var(--avt-oranye);color:var(--avt-oranye)}

/* ---------- halaman video ---------- */
.avt-play{position:relative;width:100%;aspect-ratio:16/9;background:#000;margin:13px 0 0;
 border:1px solid var(--avt-garis);border-radius:3px;overflow:hidden}
.avt-play iframe,.avt-play img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:contain}
.avt-h1{margin:13px 0 7px;font-size:20px;line-height:1.35;font-weight:700}
.avt-st{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;color:var(--avt-abu);
 border-bottom:1px solid var(--avt-garis);padding-bottom:9px}
.avt-st b{color:var(--avt-oranye)}
.avt-sum{font-size:14px;color:var(--avt-redup);line-height:1.6;margin:11px 0}
.avt-tag{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 6px}
.avt-tag a{background:var(--avt-kartu);border:1px solid var(--avt-garis);border-radius:2px;
 padding:4px 9px;font-size:12px;color:var(--avt-redup)}
.avt-tag a:hover{border-color:var(--avt-oranye);color:var(--avt-oranye)}

/* ---------- dokumen & komentar ---------- */
.avt-doc{font-size:14px;line-height:1.7;color:var(--avt-redup);margin:0 0 18px}
.avt-doc h2{color:var(--avt-teks);font-size:16px;margin:17px 0 7px}
.avt-doc ul{padding-left:19px;margin:7px 0}
.avt-doc strong{color:var(--avt-teks)}
.comment-form input,.comment-form textarea{width:100%;background:var(--avt-kartu);
 border:1px solid var(--avt-garis);color:var(--avt-teks);padding:8px;font-size:13px;
 border-radius:3px;margin:0 0 8px}
.comment-form .submit{background:var(--avt-oranye);color:#000;font-weight:700;border:0;
 padding:8px 18px;border-radius:3px;cursor:pointer;width:auto}
.avt-cm{list-style:none;margin:0;padding:0}
.avt-cm li{background:var(--avt-kartu);padding:9px;border-radius:3px;margin:0 0 7px;font-size:13px}

/* ---------- kaki ---------- */
.avt-foot{margin-top:26px;background:var(--avt-panel);border-top:2px solid var(--avt-oranye);padding:16px 0}
.avt-kw{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.avt-kw a{background:var(--avt-kartu);border:1px solid var(--avt-garis);border-radius:2px;
 padding:4px 9px;font-size:12px;color:var(--avt-redup)}
.avt-kw a:hover{border-color:var(--avt-oranye);color:var(--avt-oranye)}
.avt-legal{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;margin:0 0 9px}
.avt-legal a{color:var(--avt-redup)}
.avt-legal a:hover{color:var(--avt-oranye)}
.avt-cr{font-size:11px;color:var(--avt-abu)}

/* ---------- layar kecil ---------- */
@media(max-width:1000px){.avt-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){
  .avt-grid{grid-template-columns:repeat(2,1fr);gap:9px}
  .avt-tg{display:block}
  .avt-nav{display:none}
  .avt-nav.on{display:block}
  .avt-nav .avt-w{flex-direction:column;gap:0}
  .avt-nav a{border-bottom:1px solid var(--avt-garis)}
  .avt-bar h1,.avt-bar h2{font-size:16px}
  .avt-h1{font-size:17px}
}