/*
Theme Name: ModTube
Theme URI: https://example.com
Author: Abell & ChatGPT
Description: Tube theme style EnjoyVideo + ModPorn UI.
Version: 1.1
Text Domain: modtube
*/

/* RESET */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:#000;color:#ddd;font-family:'Roboto',sans-serif;font-size:14px}
a{color:#fff;text-decoration:none}
a:hover{text-decoration:none}
img{max-width:100%;display:block}

/* HEADER */
.mod-header{background:#000;border-bottom:1px solid #111}
.mod-header-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 25px;
}
.mod-logo a{display:flex;align-items:center}
.mod-logo-main,.mod-logo-sub{
  font-family:'Roboto Condensed',sans-serif;font-weight:900;font-size:32px;letter-spacing:1px
}
.mod-logo-main{color:#ff002b}
.mod-logo-sub{color:#fff}

/* SEARCH */
.mod-search-form{flex:1;max-width:900px;display:flex;align-items:center;margin:0 25px}
.mod-search-input{
  flex:1;height:42px;border-radius:22px 0 0 22px;border:none;padding:0 16px;font-size:15px
}
.mod-search-btn{
  width:48px;height:42px;border:none;border-radius:0 22px 22px 0;background:#0063ff;color:#fff;font-size:18px;cursor:pointer
}

/* NAVIGATION */
.mod-nav{
  background:#050505;
  border-top:1px solid #111;
  border-bottom:1px solid #111;
}
.mod-nav-menu{
  list-style:none;
  display:flex;
  padding:0 25px;
  align-items:center;
  gap:32px;
  margin:0;
  height:40px;
  font-family:'Roboto Condensed',sans-serif;
  font-weight:700;
  font-size:14px;
}
.mod-nav-menu a{color:#fff}
.mod-nav-menu a:hover,
.mod-nav-menu>li.current-menu-item>a{color:#1e90ff}
.mod-nav-menu>li.current-menu-item::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#1e90ff
}

/* ALIGNMENT FIX: HOME sejajar garis biru section */
.mod-nav-menu{margin-left:38px}   /* geser horizontal presisi */

/* MAIN CONTAINER */
.mod-container{
  max-width:1180px;
  margin:10px auto 0;
  padding:0 15px 40px;
}

/* ===== SECTION TITLE GLOBAL ===== */
.mod-section-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  color: #fff;
  margin: 18px 0 15px;
  border-left: 3px solid #1e90ff;
  padding-left: 10px;
}

/* GRID */
.mod-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:15px;
}

.mod-card{background:#050505;border-radius:4px;overflow:hidden}
.mod-card-thumb{position:relative;background:#111}
.mod-card-duration,.mod-card-hd{
  position:absolute;bottom:6px;font-size:11px;padding:2px 6px;border-radius:3px;color:#fff
}
.mod-card-duration{right:6px;background:rgba(0,0,0,0.75)}
.mod-card-hd{left:6px;background:#00c853}

.mod-card-body{padding:8px 9px 10px}
.mod-card-title{font-size:13px;color:#fff;margin-bottom:4px;max-height:34px;overflow:hidden}
.mod-card-title a:hover{color:#1e90ff}

.mod-card-meta{font-size:11px;color:#888;display:flex;justify-content:space-between}

/* FOOTER */
.mod-footer{background:#000;border-top:1px solid #111;padding:25px 15px 20px;margin-top:30px;font-size:12px;color:#888}
.mod-footer-top{
  max-width:1180px;margin:0 auto 20px;
  display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px
}
.mod-footer-col h4{color:#fff;font-size:13px;margin:0 0 8px}

/* RESPONSIVE */
@media(max-width:980px){
  .mod-grid{grid-template-columns:repeat(3,1fr)}
  .mod-single{flex-direction:column}
  .mod-search-form{margin:10px 0}
}
@media(max-width:768px){
  .mod-grid{grid-template-columns:repeat(2,1fr)}
  .mod-nav-menu{overflow-x:auto;white-space:nowrap}
}
@media(max-width:480px){
  .mod-grid{grid-template-columns:1fr}
}
/* RESET FIXES */
.mod-nav-menu { margin-left: 0 !important; }
.mod-container { margin-top: 0 !important; }

/* ALIGN EXACT LIKE MODPORN ORIGINAL */
.mod-nav {
  display: flex;
  justify-content: center;
}

.mod-nav-menu {
  width: 1180px;             /* mengikuti container */
  padding: 0 10px !important;
  gap: 28px;
}

/* Section title alignment fix */
.mod-section-title {
  margin-top: 12px;
}
/* === SUBMENU FIX CLEAN === */
.mod-nav-menu li {
  position: relative;
}

.mod-nav-menu .sub-menu,
.mod-nav-menu .children {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #050505;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  min-width: 200px;
  border: 1px solid #111;
  z-index: 9999;
}

.mod-nav-menu li:hover > .sub-menu,
.mod-nav-menu li:hover > .children {
  display: block;
}

/* submenu items */
.mod-nav-menu .sub-menu li a,
.mod-nav-menu .children li a {
  display: block;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 400;
  white-space: nowrap;
  color: #eee !important;
}

/* hover style */
.mod-nav-menu .sub-menu li a:hover,
.mod-nav-menu .children li a:hover {
  background: #111;
  color: #1e90ff !important;
}

/* submenu arrow separation */
.mod-nav-menu > li > a {
  position: relative;
  padding-right: 6px;
}

/* fix scrolling */
.mod-nav-menu {
  overflow: visible !important;
}
/* HEADER ALIGNMENT LIKE MODPORN ORIGINAL */
.mod-header-top {
  max-width: 1180px;
  margin: 0 auto;             /* Pusatkan header top */
  padding: 10px 0 10px 0;     /* buang padding kiri */
}

.mod-logo {
  margin-left: 0 !important;  /* reset posisi logo */
}

.mod-header {
  padding: 0 25px;            /* beri padding kiri kanan kecil */
}
.mod-card-meta {
  display: none !important;
}
.mod-card-body {
  padding-bottom: 6px !important;
}
/* ===== FOOTER NEW CLEAN ===== */
.mod-footer {
  background: #000;
  padding: 40px 15px 35px;
  text-align: center;
  color: #888;
  font-size: 13px;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 38px;
  list-style: none;
  margin: 0 0 25px;
  padding: 0;
}

.footer-links a {
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: 'Roboto Condensed', sans-serif;
}

.footer-links a:hover {
  color: #1e90ff;
}

.footer-desc {
  max-width: 820px;
  margin: 0 auto 25px;
  line-height: 1.6;
  font-size: 13px;
  color: #999;
}

.footer-copy {
  font-size: 12px;
  color: #777;
}
/* ===== PAGINATION STYLE NEW ===== */
.mod-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin: 35px 0;
}

.mod-pagination a,
.mod-pagination span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 12px;
  border-radius: 20px;
  background: #1a1a1a;
  color: #ccc;
  font-size: 15px;
  font-weight: 600;
  font-family: 'Roboto Condensed', sans-serif;
  transition: background .2s, color .2s;
}

.mod-pagination a:hover {
  background: #2a2a2a;
  color: #fff;
}

.mod-pagination .current {
  background: #1e90ff;
  color: #fff;
}

.mod-pagination .dots {
  background: transparent;
  color: #777;
  padding: 0 4px;
}
/* ===== BODY WARNA ===== */
body {
  background: #000000 !important;
  color: #ddd;
}

/* ===== FOOTER WARNA ===== */
.mod-footer {
  background: #0b0b0b !important;  /* sedikit lebih terang dari body */
  border-top: 1px solid #111;
  padding: 35px 0 25px;
  text-align: center;
}

/* WARNA LINK FOOTER */
.mod-footer a {
  color: #ffffff !important;
}

.mod-footer a:hover {
  color: #1e90ff !important; /* biru hover */
}

/* WARNA TEXT DESKRIPSI */
.mod-footer-desc {
  color: #aaaaaa !important; /* abu lembut */
}

/* COPYRIGHT TEXT */
.mod-footer-copy {
  color: #777777 !important;
}
.mod-card {
  background: #0d0d0d !important;
}
/* ===== SINGLE LAYOUT 2 KOLOM ===== */
.mod-single {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  margin-top: 10px;
}

.mod-single-main { flex: 3; }
.mod-single-side { flex: 1.3; }

/* judul & meta */
.mod-single-title {
  font-family: 'Roboto Condensed', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #fff;
  margin: 10px 0 8px;
}

.mod-single-meta {
  font-size: 12px;
  color: #aaa;
  display: flex;
  gap: 15px;
  margin-bottom: 10px;
}

/* player besar */
.mod-single-player {
  background: #000;
  margin-bottom: 12px;
}

.mod-single-player iframe,
.mod-single-player video {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: none;
}

/* tombol */
.mod-single-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.mod-btn {
  border: none;
  padding: 7px 12px;
  font-size: 12px;
  border-radius: 3px;
  background: #111;
  color: #ddd;
  cursor: pointer;
}

.mod-btn-primary {
  background: #1e90ff;
  color: #fff;
}

/* sidebar box */
.mod-side-box {
  background: #0d0d0d;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 12px;
  font-size: 12px;
  color: #ccc;
  text-align: center;
}

/* responsive */
@media (max-width: 980px) {
  .mod-single {
    flex-direction: column;
  }
  .mod-single-side {
    width: 100%;
  }
}
/* BANNER PLACEHOLDER 300x250 DI SIDEBAR SINGLE */
.mod-banner-300 {
  width: 300px;
  height: 250px;
  max-width: 100%;
  margin: 0 auto 12px;
  background: #0d0d0d;
  border-radius: 6px;
  border: 1px solid #222;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: #cccccc;
}
/* ===== RESPONSIVE: PAGINATION & FOOTER ===== */
@media (max-width: 768px) {

  /* pagination lebih kecil & bisa turun ke bawah */
  .mod-pagination {
    flex-wrap: wrap;
    gap: 6px;
    margin: 20px 0;
  }

  .mod-pagination a,
  .mod-pagination span {
    min-width: 30px;
    height: 30px;
    padding: 0 10px;
    font-size: 13px;
    margin-bottom: 4px;
  }

  /* footer menu rapih di mobile */
  .footer-links {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
    column-gap: 18px;
  }

  .footer-links li {
    list-style: none;
    text-align: center;
  }

  .mod-footer-desc {
    padding: 0 15px;
    font-size: 12px;
  }

  .mod-footer-copy {
    font-size: 11px;
  }
}
/* ===== SINGLE RESPONSIVE ===== */
@media (max-width: 768px) {

  .mod-single {
    flex-direction: column;
    align-items: stretch;
    gap: 16px;
  }

  .mod-single-main,
  .mod-single-side {
    width: 100%;
  }

  .mod-single-title {
    font-size: 22px;
    line-height: 1.3;
    padding: 0 10px;
  }

  .mod-single-meta {
    padding: 0 10px;
    flex-wrap: wrap;
    gap: 8px;
  }

  .mod-single-player iframe,
  .mod-single-player video {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .mod-single-actions {
    padding: 0 10px 5px;
    flex-wrap: wrap;
  }

  .mod-btn,
  .mod-btn-primary {
    font-size: 11px;
    padding: 6px 10px;
  }

  .mod-single-side {
    padding: 0 10px 10px;
  }

  .mod-banner-300 {
    width: 100%;
    max-width: 320px;
    margin: 0 auto 12px;
  }
}
/* Batasi tinggi logo custom */
.mod-logo img.custom-logo,
.custom-logo {
  max-height: 70px;   /* ubah 70 jadi 60 / 50 kalau masih kegedean */
  height: auto;
  width: auto;
}

/* Di mobile, lebih kecil lagi */
@media (max-width: 768px) {
  .mod-logo img.custom-logo,
  .custom-logo {
    max-height: 50px;
  }
}
/* BATASIN UKURAN LOGO DI HEADER */
.mod-logo {
  height: 80px;
  display: flex;
  align-items: center;
}

.mod-logo img.custom-logo,
.custom-logo {
  max-height: 60px;   /* ubah 60 kalau mau lebih kecil/besar */
  width: auto;
  height: auto;
}

/* MOBILE */
@media (max-width: 768px) {
  .mod-logo {
    height: 60px;
  }
  .mod-logo img.custom-logo,
  .custom-logo {
    max-height: 45px;
  }
}
.mod-footer-badges {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  margin: 15px 0 10px;
  opacity: 0.55;
}

.mod-footer-badges img {
  max-height: 45px;
  width: auto;
  filter: grayscale(100%);
}