/* responsive.css - Responsive layout untuk semua halaman */

/* Breakpoints */
/* mobile: 0 - 480px */
/* tablet: 481px - 768px */
/* desktop: 769px - 1024px */
/* wide: 1025px+ */

/* Base responsive settings */
html {
  font-size: 16px;
}

@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  html {
    font-size: 13px;
  }
}

/* Container responsive */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 12px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 8px;
  }
}

/* Header responsive */
@media (max-width: 768px) {
  .header-container {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  .search-bar {
    order: 3;
    width: 100%;
    max-width: 100%;
  }
  
  .logo h1 {
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .header {
    padding: 8px 12px;
  }
  
  .search-bar input {
    padding: 8px 12px;
    font-size: 13px;
  }
  
  .search-bar button {
    padding: 6px 12px;
  }
}

/* Tabs responsive */
@media (max-width: 768px) {
  .tabs-container {
    top: 56px;
  }
  
  .tab-btn {
    padding: 6px 14px;
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .tabs-container {
    top: 50px;
  }
  
  .tabs-wrapper {
    padding: 8px 12px;
    gap: 4px;
  }
  
  .tab-btn {
    padding: 5px 10px;
    font-size: 11px;
  }
}

/* Bottom navigation - hanya tampil di mobile */
.bottom-nav {
  display: none;
}

@media (max-width: 768px) {
  .bottom-nav {
    display: flex;
  }
  
  body {
    padding-bottom: 65px;
  }
}

/* Main container responsive */
.main-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 16px;
}

@media (max-width: 768px) {
  .main-container {
    padding: 16px 12px;
  }
}

@media (max-width: 480px) {
  .main-container {
    padding: 12px 8px;
  }
}

/* Grid responsive untuk feed */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 16px;
}

@media (max-width: 640px) {
  .module-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
}

@media (min-width: 1024px) {
  .module-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
  }
}

/* Card responsive */
@media (max-width: 480px) {
  .card-title {
    font-size: 12px;
  }
  
  .card-meta {
    font-size: 9px;
  }
  
  .badge {
    padding: 2px 6px;
    font-size: 8px;
  }
  
  .content-tag {
    font-size: 8px;
    padding: 1px 6px;
  }
}

/* Detail page responsive */
@media (max-width: 768px) {
  .hero-section {
    gap: 15px;
  }
  
  .hero-cover {
    width: 120px;
  }
  
  .hero-title {
    font-size: 18px;
  }
  
  .desc {
    font-size: 12px;
  }
  
  .stats {
    gap: 12px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  .hero-section {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .hero-cover {
    width: 150px;
  }
  
  .hero-info {
    text-align: center;
  }
  
  .hero-tags, .content-tags {
    justify-content: center;
  }
  
  .stats {
    justify-content: center;
  }
  
  .play-btn {
    width: 100%;
  }
  
  .episode-item {
    gap: 8px;
  }
  
  .episode-thumb {
    width: 50px;
    height: 38px;
  }
  
  .episode-number {
    width: 35px;
    font-size: 11px;
  }
  
  .episode-name {
    font-size: 12px;
  }
}

/* Player page responsive */
@media (max-width: 768px) {
  .video-player {
    max-height: 50vh;
  }
  
  .nav-episode {
    flex-direction: column;
    gap: 8px;
  }
  
  .nav-btn {
    width: 100%;
    text-align: center;
  }
  
  .subtitle-section {
    flex-direction: column;
    align-items: stretch;
  }
  
  .subtitle-select {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .player-header {
    padding: 8px 12px;
  }
  
  .episode-title {
    font-size: 11px;
  }
  
  .back-btn {
    padding: 6px 12px;
    font-size: 12px;
  }
  
  .subtitle-section {
    padding: 8px 12px;
  }
  
  .episode-info {
    padding: 8px 12px;
  }
  
  .episode-desc {
    font-size: 11px;
  }
  
  .nav-episode {
    padding: 12px;
  }
  
  .nav-btn {
    padding: 8px 16px;
    font-size: 12px;
  }
}

/* Search page responsive */
@media (max-width: 768px) {
  #searchBox {
    flex-direction: column;
    gap: 10px;
  }
  
  #searchInput {
    width: 100%;
  }
  
  #searchBtn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .suggestion-item {
    padding: 10px 12px;
    font-size: 13px;
  }
  
  .search-results .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Modal responsive */
@media (max-width: 480px) {
  .search-modal-content {
    padding: 0 8px;
  }
  
  .search-modal-header input {
    font-size: 14px;
    padding: 10px 12px;
  }
  
  .search-modal-header button {
    padding: 6px 14px;
  }
}

/* Load more button responsive */
@media (max-width: 480px) {
  .load-more-btn {
    padding: 10px 24px;
    font-size: 13px;
    width: 100%;
  }
}

/* Font size adjustments */
@media (max-width: 768px) {
  h1 {
    font-size: 1.5rem;
  }
  
  h2 {
    font-size: 1.3rem;
  }
  
  h3 {
    font-size: 1.1rem;
  }
}

/* Hide elements on mobile */
@media (max-width: 768px) {
  .hide-on-mobile {
    display: none;
  }
}

/* Hide elements on desktop */
@media (min-width: 769px) {
  .hide-on-desktop {
    display: none;
  }
}

/* Touch-friendly adjustments for mobile */
@media (max-width: 768px) {
  button, 
  .tab-btn,
  .drama-card,
  .episode-item,
  .nav-btn,
  .load-more-btn {
    cursor: default;
  }
  
  button:active,
  .tab-btn:active,
  .drama-card:active,
  .episode-item:active {
    opacity: 0.7;
  }
}

/* Landscape mode untuk mobile */
@media (max-width: 768px) and (orientation: landscape) {
  .video-player {
    max-height: 60vh;
  }
  
  .episode-list {
    max-height: 300px;
  }
  
  .bottom-nav {
    padding: 4px 16px 8px;
  }
  
  .bottom-nav-item span:first-child {
    font-size: 18px;
  }
  
  .bottom-nav-item span:last-child {
    font-size: 10px;
  }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
  .module-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Small desktop */
@media (min-width: 1025px) and (max-width: 1280px) {
  .container,
  .main-container,
  .header-container,
  .tabs-wrapper {
    max-width: 95%;
  }
}

/* Print styles (opsional) */
@media print {
  .bottom-nav,
  .tabs-container,
  .nav-episode,
  .subtitle-section {
    display: none;
  }
  
  body {
    background: #fff;
    color: #000;
    padding: 0;
  }
  
  .video-container {
    page-break-inside: avoid;
  }
}