@import url('https://fonts.googleapis.com/css2?family=Francois+One&display=swap');



* {

	font-family: 'Plus Jakarta Sans', system-ui, sans-serif;

}



html, body{

  margin: 0;

  min-height: 100%;

  background: #030712;

}



::-webkit-scrollbar{

  width: 5px;

  height: 5px;

  background: transparent;          /* ini yang sering bikin putih hilang */

}



::-webkit-scrollbar-track,

::-webkit-scrollbar-track-piece{

  background: transparent;

}



::-webkit-scrollbar-thumb{

  background: rgba(250, 204, 21, 0.3);

  border-radius: 10px;

}



::-webkit-scrollbar-corner{

  background: transparent;

}



/*  */

/* Navbar */

/*  */



.nav-glass {

	background: rgba(3, 7, 18, 0.85);

	backdrop-filter: blur(20px);

	-webkit-backdrop-filter: blur(20px);

	border-bottom: 1px solid rgba(255, 255, 255, 0.06);

}



.nav-glass h1 {

	font-family: "Francois One", sans-serif;

	font-style: normal;

}



.bottom-nav {

	background: linear-gradient(to top, rgba(3, 7, 18, 0.98), rgba(3, 7, 18, 0.95));

	backdrop-filter: blur(20px);

	-webkit-backdrop-filter: blur(20px);

	border-top: 1px solid rgba(255, 255, 255, 0.08);

}



.bottom-nav-item {

	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.bottom-nav-item.active {

	color: #facc15;

}



.bottom-nav-item.active .nav-indicator {

	opacity: 1;

}



.nav-indicator {

	opacity: 0;

	transition: all 0.3s ease;

}



.glow-yellow {

	box-shadow: 0 0 60px rgba(250, 204, 21, 0.2);

}



.glow-soft {

	box-shadow: 0 20px 60px -15px rgba(0, 0, 0, 0.7);

}



.text-gradient {

	background: linear-gradient(135deg, #facc15 0%, #fde68a 50%, #facc15 100%);

	-webkit-background-clip: text;

	-webkit-text-fill-color: transparent;

	background-clip: text;

}



.sirene-dot {

	animation: sirene 2s ease-in-out infinite;

}



@keyframes sirene {



	0%,

	100% {

		background: #3b82f6;

		box-shadow: 0 0 12px #3b82f6;

	}



	50% {

		background: #ef4444;

		box-shadow: 0 0 12px #ef4444;

	}

}



.police-tape {

	background: repeating-linear-gradient(90deg, #facc15 0px, #facc15 20px, transparent 20px, transparent 40px);

	animation: tape-move 30s linear infinite;

}



@keyframes tape-move {

	0% {

		background-position: 0 0;

	}



	100% {

		background-position: 1000px 0;

	}

}



/*  */

/* Video Card */

/*  */



.video-card {

	background: linear-gradient(165deg, rgba(31, 41, 55, 0.5), rgba(17, 24, 39, 0.7));

	border: 1px solid rgba(255, 255, 255, 0.06);

	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.video-card:hover {

	border-color: rgba(250, 204, 21, 0.3);

	box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.8), 0 0 50px rgba(250, 204, 21, 0.08);

}



.video-card:hover .card-thumb {

	transform: scale(1.08);

}



.video-card:hover .card-play {

	opacity: 1;

	transform: translate(-50%, -50%) scale(1);

}



.delete-btn {

  opacity: 1;

  transition: opacity 0.3s ease;

}



@media (hover: hover) and (pointer: fine) {

  .delete-btn {

    opacity: 0;

  }



  .video-card:hover .delete-btn {

    opacity: 1;

  }

}



.card-thumb {

	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.card-play {

	opacity: 0;

	transform: translate(-50%, -50%) scale(0.8);

	transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);

}



.continue-card {

	background: linear-gradient(135deg, rgba(250, 204, 21, 0.08), rgba(17, 24, 39, 0.9));

	border: 1px solid rgba(250, 204, 21, 0.15);

}



.continue-card:hover {

	border-color: rgba(250, 204, 21, 0.4);

	box-shadow: 0 20px 50px -15px rgba(250, 204, 21, 0.15);

}



.progress-bar {

	background: linear-gradient(90deg, #facc15, #f59e0b);

	box-shadow: 0 0 12px rgba(250, 204, 21, 0.5);

}



.badge-live {

	background: linear-gradient(135deg, #ef4444, #dc2626);

	animation: pulse-live 2s infinite;

}



@keyframes pulse-live {



	0%, 100% {

		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);

	}



	50% {

		box-shadow: 0 0 0 8px rgba(239, 68, 68, 0);

	}

}



.badge-new { 

	background: linear-gradient(135deg, #ef4444, #dc2626); 

	animation: pulse-badge 2s infinite; 

}

@keyframes pulse-badge { 

	0%, 100% { 

		box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); 

	} 

	50% { 

		box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); 

	} 

}



.badge-month { 

	background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.1)); 

	border: 1px solid rgba(59, 130, 246, 0.3); 

}



/*  */

/* Search */

/*  */



.search-box {

	background: rgba(31, 41, 55, 0.6);

	border: 1px solid rgba(255, 255, 255, 0.08);

	transition: all 0.3s ease;

}



.search-box:focus-within {

	border-color: rgba(250, 204, 21, 0.4);

	box-shadow: 0 0 30px rgba(250, 204, 21, 0.1);

	background: rgba(31, 41, 55, 0.8);

}



.search-dropdown {

	background: rgba(17, 24, 39, 0.98);

	backdrop-filter: blur(20px);

	border: 1px solid rgba(255, 255, 255, 0.1);

}



/*  */

/* Swiper */

/*  */



.swiper-button-next,

.swiper-button-prev {

	width: 44px !important;

	height: 44px !important;

	background: rgba(255, 255, 255, 0.1);

	backdrop-filter: blur(10px);

	border: 1px solid rgba(255, 255, 255, 0.1);

	border-radius: 50%;

	transition: all 0.3s ease;

}



.swiper-button-next:hover,

.swiper-button-prev:hover {

	background: rgba(250, 204, 21, 0.2);

	border-color: rgba(250, 204, 21, 0.3);

}



.swiper-button-next::after,

.swiper-button-prev::after {

	font-size: 16px !important;

	font-weight: bold;

	color: white;

}



.swiper-pagination-bullet {

	background: rgba(255, 255, 255, 0.3) !important;

}



.swiper-pagination-bullet-active {

	background: #facc15 !important;

	width: 24px !important;

	border-radius: 4px !important;

}



.stat-card {

	background: linear-gradient(135deg, rgba(31, 41, 55, 0.4), rgba(17, 24, 39, 0.6));

	border: 1px solid rgba(255, 255, 255, 0.05);

}



.mobile-search-overlay {

	background: rgba(3, 7, 18, 0.98);

	backdrop-filter: blur(20px);

}



.skeleton {

	background: linear-gradient(90deg, rgba(31, 41, 55, 0.5) 0%, rgba(55, 65, 81, 0.5) 50%, rgba(31, 41, 55, 0.5) 100%);

	background-size: 200% 100%;

	animation: shimmer 1.5s ease-in-out infinite;

}



@keyframes shimmer {

	0% {

		background-position: 200% 0;

	}



	100% {

		background-position: -200% 0;

	}

}



.empty-icon {

	animation: float 4s ease-in-out infinite;

}



@keyframes float {



	0%,

	100% {

		transform: translateY(0);

	}



	50% {

		transform: translateY(-15px);

	}

}







/*  */

/* Backdrop SweetAlert2 */

/*  */

.swal2-backdrop-show {

    backdrop-filter: blur(12px);

    -webkit-backdrop-filter: blur(12px);

    background: rgba(0, 0, 0, 0.5) !important;

}



/*  */

/* Search Playlist */

/*  */

.video-card:hover .card-overlay { 

	opacity: 1; 

}



.card-overlay { 

	background: linear-gradient(180deg, transparent 0%, rgba(3, 7, 18, 0.95) 100%); 

	opacity: 0.7; 

	transition: opacity 0.4s ease; 

}

.filter-glass { 

	background: rgba(17, 24, 39, 0.6); 

	backdrop-filter: blur(20px); 

	border: 1px solid rgba(255, 255, 255, 0.05); 

}



.search-container { 

	background: rgba(31, 41, 55, 0.5); 

	border: 1px solid rgba(255, 255, 255, 0.1); 

	transition: all 0.3s ease; 

}



.search-container:focus-within { 

	border-color: rgba(250, 204, 21, 0.5); 

	box-shadow: 0 0 20px rgba(250, 204, 21, 0.1); 

}



.highlight-match { 

	background: rgba(250, 204, 21, 0.3); 

	padding: 0 2px; 

	border-radius: 2px;

}



select { 

	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%23facc15' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");

	background-position: right 12px center; 

	background-repeat: no-repeat; 

	background-size: 16px;

}



.empty-state-icon { 

	background: linear-gradient(135deg, rgba(250, 204, 21, 0.1), transparent);

}



.float-element { 

	animation: float 6s ease-in-out infinite; 

}



@keyframes float { 

	0%, 100% { 

		transform: translateY(0px); 

	} 50% { 

		transform: translateY(-20px); 

	} 

}





/*  */

/* Histori */

/*  */

.section-glass {

    background: linear-gradient(145deg, rgba(31, 41, 55, 0.3), rgba(17, 24, 39, 0.5));

    border: 1px solid rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

}



/*  */

/* Login Pagw */

/*  */

.bg-pattern {

    position: fixed;

    inset: 0;

    background-image: 

        linear-gradient(rgba(250, 204, 21, 0.03) 1px, transparent 1px),

        linear-gradient(90deg, rgba(250, 204, 21, 0.03) 1px, transparent 1px);

    background-size: 50px 50px;

    pointer-events: none;

}



.bg-glow {

    position: fixed;

    top: -50%;

    left: 50%;

    transform: translateX(-50%);

    width: 100%;

    height: 100%;

    background: radial-gradient(ellipse, rgba(250, 204, 21, 0.08) 0%, transparent 60%);

    pointer-events: none;

}



.login-card, .register-card {

    background: linear-gradient(145deg, rgba(31, 41, 55, 0.4), rgba(17, 24, 39, 0.6));

    border: 1px solid rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(20px);

    animation: cardFadeIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



@keyframes cardFadeIn {

    0% { opacity: 0; transform: translateY(30px) scale(0.98); }

    100% { opacity: 1; transform: translateY(0) scale(1); }

}



.input-field {

    background: rgba(17, 24, 39, 0.6);

    border: 1px solid rgba(255, 255, 255, 0.08);

    transition: all 0.3s ease;

}



.input-field:focus {

    border-color: rgba(250, 204, 21, 0.5);

    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.1);

}



.input-field:focus + .input-icon { color: #facc15; }



.pin-input {

    width: 50px;

    height: 58px;

    text-align: center;

    font-size: 1.5rem;

    font-weight: 700;

    background: rgba(17, 24, 39, 0.6);

    border: 2px solid rgba(255, 255, 255, 0.08);

    border-radius: 14px;

    color: white;

    transition: all 0.3s ease;

    caret-color: #facc15;

}



.pin-input:focus {

    outline: none;

    border-color: #facc15;

    box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.15), 0 0 20px rgba(250, 204, 21, 0.1);

}



.pin-input.filled {

    border-color: rgba(250, 204, 21, 0.5);

    background: rgba(250, 204, 21, 0.05);

}



.pin-input.match {

    border-color: #22c55e;

    background: rgba(34, 197, 94, 0.05);

}



.pin-input.error {

    border-color: #ef4444;

    animation: shake 0.5s ease;

}



@keyframes shake {

    0%, 100% { transform: translateX(0); }

    20%, 60% { transform: translateX(-6px); }

    40%, 80% { transform: translateX(6px); }

}



.submit-btn {

    background: linear-gradient(135deg, #facc15, #eab308);

    transition: all 0.3s ease;

}



.submit-btn:hover {

    box-shadow: 0 10px 40px rgba(250, 204, 21, 0.3);

    transform: translateY(-2px);

}



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



.submit-btn.loading {

    pointer-events: none;

    opacity: 0.8;

}



.secure-badge {

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(239, 68, 68, 0.15));

    border: 1px solid rgba(59, 130, 246, 0.2);

}



/*  */

/* Register Pagw */

/*  */

.strength-bar {

    height: 4px;

    border-radius: 2px;

    transition: all 0.3s ease;

}



.step-indicator {

    transition: all 0.3s ease;

}



.step-indicator.active {

    background: linear-gradient(135deg, #facc15, #eab308);

    color: #030712;

}



.step-indicator.completed {

    background: linear-gradient(135deg, #22c55e, #16a34a);

    color: white;

}



/*  */

/* Admin Pagw */

/*  */

.admin-card {

	background: linear-gradient(145deg, rgba(31, 41, 55, 0.4), rgba(17, 24, 39, 0.6));

	border: 2px solid rgba(255, 255, 255, 0.05);

	transition: all 0.3s ease;

}



.admin-card:hover {

	border-color: rgba(255, 255, 255, 0.1);

	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

}



.admin-card.selected {

	border-color: rgba(250, 204, 21, 0.5);

	background: linear-gradient(145deg, rgba(250, 204, 21, 0.1), rgba(17, 24, 39, 0.6));

}



.custom-checkbox {

	appearance: none;

	width: 22px;

	height: 22px;

	border: 2px solid rgba(255, 255, 255, 0.2);

	border-radius: 6px;

	background: rgba(17, 24, 39, 0.6);

	cursor: pointer;

	transition: all 0.2s ease;

	position: relative;

}



.custom-checkbox:hover {

	border-color: rgba(250, 204, 21, 0.5);

}



.custom-checkbox:checked {

	background: linear-gradient(135deg, #facc15, #eab308);

	border-color: #facc15;

}



.custom-checkbox:checked::after {

	content: '';

	position: absolute;

	left: 6px;

	top: 2px;

	width: 6px;

	height: 11px;

	border: solid #030712;

	border-width: 0 2.5px 2.5px 0;

	transform: rotate(45deg);

}



.custom-checkbox:indeterminate {

	background: linear-gradient(135deg, #facc15, #eab308);

	border-color: #facc15;

}



.custom-checkbox:indeterminate::after {

	content: '';

	position: absolute;

	left: 4px;

	top: 8px;

	width: 10px;

	height: 2.5px;

	background: #030712;

	border-radius: 1px;

}



.selection-bar {

	background: linear-gradient(135deg, #facc15, #eab308);

	animation: slideDown 0.3s ease;

}



@keyframes slideDown {

	0% {

		opacity: 0;

		transform: translateY(-100%);

	}



	100% {

		opacity: 1;

		transform: translateY(0);

	}

}



.modal-overlay {

	background: rgba(3, 7, 18, 0.8);

	backdrop-filter: blur(8px);

}



.modal-content {

	animation: modalEnter 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



@keyframes modalEnter {

	0% {

		opacity: 0;

		transform: scale(0.95) translateY(20px);

	}



	100% {

		opacity: 1;

		transform: scale(1) translateY(0);

	}

}



.flatpickr-calendar {

	background: #1f2937 !important;

	border: 1px solid rgba(255, 255, 255, 0.1) !important;

	border-radius: 16px !important;

	box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5) !important;

}



.flatpickr-day.selected {

	background: #facc15 !important;

	border-color: #facc15 !important;

	color: #030712 !important;

}



.flatpickr-day:hover {

	background: rgba(250, 204, 21, 0.2) !important;

}



/*  */

/* Watch Page */

/*  */

/* Plyr Custom Theme */



:root {

    --plyr-color-main: #facc15;

    --plyr-video-control-color: #fff;

    --plyr-video-control-background-hover: rgba(250, 204, 21, 0.8);

    --plyr-badge-background: #facc15;

    --plyr-badge-text-color: #030712;

    --plyr-video-background: #030712;

}



.plyr { border-radius: 14px; overflow: hidden; background: #030712; }

.plyr__control--overlaid { background: rgba(250, 204, 21, 0.9) !important; }

.plyr--full-ui input[type=range] { color: #facc15; }



.player-container { 

    border-radius: 14px;

    overflow: hidden; 

    background: linear-gradient(145deg, rgba(31, 41, 55, 0.3), rgba(17, 24, 39, 0.5));

    border: 1px solid rgba(255, 255, 255, 0.05);

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

}



.next-card { 

    background: linear-gradient(145deg, rgba(31, 41, 55, 0.3), rgba(17, 24, 39, 0.5));

    border: 1px solid rgba(255, 255, 255, 0.05);

    transition: all 0.3s ease;

}

.next-card:hover { 

    background: linear-gradient(145deg, rgba(31, 41, 55, 0.5), rgba(17, 24, 39, 0.7));

    border-color: rgba(250, 204, 21, 0.2);

    transform: translateX(4px);

}

.next-card.active { 

    border-color: rgba(250, 204, 21, 0.5);

    background: linear-gradient(145deg, rgba(250, 204, 21, 0.1), rgba(17, 24, 39, 0.5));

}



.next-list { 

	max-height: calc(100vh - 280px); 

	overflow-y: auto; 

}



.next-list::-webkit-scrollbar { 

	width: 4px; 

}



.action-btn {

            background: linear-gradient(145deg, rgba(31, 41, 55, 0.5), rgba(17, 24, 39, 0.8));

            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: all 0.3s ease;

}

.action-btn:hover { 

    border-color: rgba(250, 204, 21, 0.3);

    box-shadow: 0 0 20px rgba(250, 204, 21, 0.1);

}



.resume-popup {

    animation: popUp 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}

@keyframes popUp {

    0% { opacity: 0; transform: translateY(20px); }

    100% { opacity: 1; transform: translateY(0); }

}



.tag-badge {

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));

    border: 1px solid rgba(59, 130, 246, 0.2);

}



.autoplay-toggle {

    background: rgba(31, 41, 55, 0.5);

    border: 1px solid rgba(255, 255, 255, 0.1);

}

.autoplay-toggle.active {

    background: rgba(250, 204, 21, 0.2);

    border-color: rgba(250, 204, 21, 0.3);

}

.autoplay-toggle .toggle-dot {

    transition: transform 0.3s ease;

}

.autoplay-toggle.active .toggle-dot {

    transform: translateX(16px);

    background: #facc15;

}