/* Mengatur font utama dari Google Fonts */
body {
  font-family: "Inter", sans-serif;
}

/* Class helper untuk menyembunyikan elemen, digunakan oleh JavaScript */
.hidden {
  display: none !important;
}

/* Animasi fade-in sederhana untuk setiap bagian/halaman */
.view-section {
  animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* === Gaya untuk Pemutar Video Kustom (Versi Lanjutan) === */
#video-player-container, .video-controls-container button, .settings-menu button {
  -webkit-tap-highlight-color: transparent; /* Mencegah highlight biru saat di-tap di mobile */
}

.video-controls-container {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  color: white;
  z-index: 100;
  opacity: 0;
  transition: opacity 150ms ease-in-out;
  background-image: linear-gradient(to top, rgba(0, 0, 0, 0.75), transparent);
}

#video-player-container:hover .video-controls-container,
#video-player-container.paused .video-controls-container,
#video-player-container.mobile-controls-active .video-controls-container {
  opacity: 1;
}

.video-controls-container button {
  background: none; border: none; color: inherit; padding: 0; cursor: pointer;
  opacity: 0.9; transition: opacity 150ms ease-in-out, transform 150ms ease-in-out;
}
.video-controls-container button:hover { opacity: 1; transform: scale(1.1); }

/* Timeline */
.timeline-container { height: 7px; cursor: pointer; display: flex; align-items: center; }
.timeline { background-color: rgba(100, 116, 139, 0.5); height: 3px; width: 100%; position: relative; }
.timeline::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: calc(100% - var(--preview-position, 0) * 100%); background-color: rgb(156 163 175); display: none; }
.timeline::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: calc(100% - var(--progress-position, 0) * 100%); background-color: rgb(59 130 246); }
.timeline-container:hover .timeline { height: 100%; }
.timeline-container:hover .timeline::before { display: block; }
.timeline .thumb-indicator { position: absolute; top: 50%; left: calc(var(--progress-position, 0) * 100%); transform: translate(-50%, -50%) scale(0); background-color: rgb(59 130 246); height: 15px; width: 15px; border-radius: 50%; transition: transform 150ms ease-in-out; }
.timeline-container:hover .thumb-indicator { transform: translate(-50%, -50%) scale(1); }

/* Volume */
.volume-container { display: flex; align-items: center; }
.volume-slider { width: 0; transform-origin: left; transform: scaleX(0); transition: width 150ms ease-in-out, transform 150ms ease-in-out; -webkit-appearance: none; appearance: none; background-color: rgba(255, 255, 255, 0.3); height: 4px; border-radius: 5px; }
.volume-container:hover .volume-slider { width: 100px; transform: scaleX(1); }
.volume-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 12px; height: 12px; background: white; cursor: pointer; border-radius: 50%; }
.volume-slider::-moz-range-thumb { width: 12px; height: 12px; background: white; cursor: pointer; border-radius: 50%; }

/* Tombol tengah */
.center-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 101; background-color: rgba(0, 0, 0, 0.6); border-radius: 50%; padding: 1rem; transition: opacity 200ms ease-in-out, transform 200ms ease-in-out; }
.center-play-btn:hover { transform: translate(-50%, -50%) scale(1.1); }
#video-player-container.playing .center-play-btn:not(.manual-show) { opacity: 0; pointer-events: none; }

/* Menu Pengaturan Lanjutan */
.settings-menu { position: absolute; bottom: 5rem; right: 1.5rem; width: 260px; background-color: rgba(20, 20, 20, 0.9); backdrop-filter: blur(5px); border-radius: 8px; z-index: 102; transform-origin: bottom right; transition: opacity 150ms ease-in-out, transform 150ms ease-in-out; }
.settings-menu.hidden { opacity: 0; transform: scale(0.9); pointer-events: none; }
.settings-menu button { width: 100%; text-align: left; padding: 0.75rem 1rem; font-size: 0.875rem; display: flex; justify-content: space-between; align-items: center; }
.settings-menu button:hover { background-color: rgba(255, 255, 255, 0.1); }
.settings-menu button.active { background-color: rgba(59, 130, 246, 0.2); color: rgb(96 165 250); font-weight: 600; }
.settings-menu button .value { color: #9ca3af; }
.settings-menu button.back-btn::before { content: '‹'; margin-right: 0.5rem; font-weight: bold; }

/* Menu Klik Kanan Kustom & Info Video */
.custom-context-menu { position: fixed; display: none; background: rgba(28, 28, 28, 0.95); backdrop-filter: blur(5px); color: white; border-radius: 8px; padding: 0.5rem; font-size: 0.8rem; z-index: 9999; }
.custom-context-menu > div { padding: 0.25rem 0.5rem; cursor: pointer; border-radius: 4px; }
.custom-context-menu > div:hover { background-color: rgba(255, 255, 255, 0.1); }
.video-info-overlay { position: absolute; top: 1rem; left: 1rem; background: rgba(0,0,0,0.7); color: white; padding: 0.5rem 1rem; font-size: 0.75rem; font-family: monospace; z-index: 101; border-radius: 4px; line-height: 1.4; pointer-events: none; }

/* Keyboard Shortcut Help */
.shortcuts-help { position: absolute; inset: 0; background: rgba(0,0,0,0.8); z-index: 200; display: flex; align-items: center; justify-content: center; color: white; }
.shortcuts-help-content { background: #1e293b; padding: 2rem; border-radius: 12px; width: 90%; max-width: 400px; position: relative; }
.shortcuts-help-content h3 { font-size: 1.25rem; font-weight: bold; margin-bottom: 1rem; }
.shortcuts-help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1.5rem; }
.shortcuts-help-grid kbd { background: #334155; padding: 0.1rem 0.4rem; border-radius: 4px; font-family: monospace; }
.shortcuts-help-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; color: white; cursor: pointer; font-size: 1.5rem; line-height: 1; }

/* Subtitle Styling */
::cue { background: rgba(0, 0, 0, 0.6); color: white; font-family: "Inter", sans-serif; }

/* Mode Embed */
body.embed-mode { padding: 0; margin: 0; overflow: hidden; }
body.embed-mode #app-container { max-width: none; padding: 0; }
body.embed-mode #video-player-container { width: 100vw; height: 100vh; border-radius: 0; }

/* Penyesuaian Mobile */
@media (max-width: 640px) {
  .volume-container { display: none; } /* Sembunyikan volume slider di mobile */
}