.report-title {
    background: linear-gradient(135deg, #ffffff, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.report-desc {
    color: #b0b8d4;
}
.report-textarea {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
    color: #e0e6ff;
}
.back-link {
    color: #a855f7;
}
.tutorial-caption {
    color: #a855f7;
}
*{
margin:0;
padding:0;
box-sizing:border-box;
-webkit-tap-highlight-color: transparent;
}
html{
scroll-behavior:smooth;
}
	body{
	background:#0a0e27;
	color:#e0e6ff;
	font-family:'Poppins',sans-serif;
	overflow-x:hidden;
	}
	/* Video Overlay Styles */
	#globalVideoOverlay {
		position: fixed;
		inset: 0;
		z-index: 10000;
		background: rgba(0,0,0,0.5);
		backdrop-filter: blur(4px);
		display: none;
		align-items: center;
		justify-content: center;
		pointer-events: none;
	}
	#globalVideoContainer {
		width: 100%;
		max-width: 320px;
		aspect-ratio: 9/16;
		position: relative;
		pointer-events: auto;
		box-shadow: 0 0 50px rgba(0,0,0,0.5);
		border-radius: 20px;
		overflow: hidden;
		background: transparent;
	}
	#myGlobalVideo {
		width: 100%;
		height: 100%;
		object-fit: cover;
		background: transparent;
	}
/* =======================
   ANIMATED BACKGROUND
======================= */
.bg-container{
position:fixed;
inset:0;
z-index:-1;
overflow:hidden;
}
.bg-base{
position:absolute;
inset:0;
background:
linear-gradient(135deg, #0a0e27 0%, #1a1f3a 50%, #0f1428 100%);
}
.bg-gradient{
position:absolute;
inset:0;
background:
radial-gradient(circle at 20% 50%, #7c3aed30, transparent 50%),
radial-gradient(circle at 80% 80%, #0ea5e930, transparent 50%);
animation:gradientShift 8s ease-in-out infinite;
}
.bg-glow{
position:absolute;
width:400px;
height:400px;
background:radial-gradient(circle, #a855f730, transparent 70%);
border-radius:50%;
filter:blur(60px);
animation:float 6s ease-in-out infinite;
}
.bg-glow:nth-child(3){
width:300px;
height:300px;
background:radial-gradient(circle, #0ea5e930, transparent 70%);
animation:float 8s ease-in-out infinite reverse;
top:10%;
right:10%;
}
@keyframes gradientShift{
0%, 100%{
opacity:0.5;
}
50%{
opacity:1;
}
}
@keyframes float{
0%, 100%{
transform:translate(0, 0);
}
50%{
transform:translate(30px, 30px);
}
}
/* =======================
   NAVBAR
======================= */
	nav{
	display:flex;
	justify-content:space-between;
	align-items:center;
	padding:20px 40px;
	background:rgba(10, 14, 39, 0.8);
	backdrop-filter:blur(20px);
	border-bottom:1px solid rgba(255, 255, 255, 0.1);
	position:sticky;
	top:0;
	z-index:999;
	animation:slideDown 0.6s ease-out;
	gap: 15px;
	}
@keyframes slideDown{
from{
transform:translateY(-100%);
opacity:0;
}
to{
transform:translateY(0);
opacity:1;
}
}
.logo{
font-size:24px;
font-weight:800;
background:linear-gradient(135deg, #a855f7, #0ea5e9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
font-family:'Space Mono', monospace;
letter-spacing:1px;
display: flex;
align-items: center;
gap: 5px;
}
.search-container {
    position: relative;
    margin-left: 15px;
    flex-grow: 1;
    max-width: 300px;
}
.search-input {
    width: 100%;
    padding: 8px 15px 8px 35px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 20px;
    color: #e0e6ff;
    font-size: 13px;
    outline: none;
    transition: all 0.3s ease;
}
.search-input:focus {
    background: rgba(255, 255, 255, 0.1);
    border-color: #a855f7;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.2);
}
.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #a855f7;
    font-size: 14px;
    pointer-events: none;
}
.nav{
display:flex;
gap:8px;
}
.nav a{
color:#e0e6ff;
text-decoration:none;
padding:10px 20px;
border-radius:8px;
background:rgba(168, 85, 247, 0.1);
border:1px solid rgba(168, 85, 247, 0.3);
transition:all 0.3s ease;
font-weight:500;
font-size:14px;
cursor:pointer;
}
@media (hover: hover) {
    .nav a:hover {
        background: rgba(168, 85, 247, 0.3);
        border-color: rgba(168, 85, 247, 0.6);
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(168, 85, 247, 0.2);
    }
}
.menu-toggle{
display:none;
font-size:28px;
cursor:pointer;
color:#e0e6ff;
}
/* =======================
   HERO SECTION
======================= */
			.hero{
			min-height:100vh;
			display:flex;
			align-items:center;
			justify-content:center;
			padding:40px;
			position:relative;
			overflow:hidden;
			}
.hero::before{
content:'';
position:absolute;
inset:0;
background-image:url('https://d2xsxph8kpxj0f.cloudfront.net/310519663676409921/FzJCCRNkQDm4LvvPCd3iQB/mlbb-hero-bg-ijGYdXsicQgwBbE8Xr2MDL.webp');
background-size:cover;
background-position:center;
opacity:0.15;
z-index:0;
}
.hero-content{
max-width:1200px;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:60px;
align-items:center;
position:relative;
z-index:1;
}
.hero-text h1{
font-size:56px;
font-weight:800;
line-height:1.2;
margin-bottom:20px;
background:linear-gradient(135deg, #ffffff, #a855f7, #0ea5e9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
animation:fadeInUp 0.8s ease-out;
}
.hero-text p{
font-size:18px;
color:#b0b8d4;
margin-bottom:30px;
line-height:1.6;
animation:fadeInUp 0.8s ease-out 0.1s backwards;
}
.hero-buttons{
display:flex;
gap:20px;
animation:fadeInUp 0.8s ease-out 0.2s backwards;
}
.btn{
padding:14px 32px;
border:none;
border-radius:10px;
font-weight:600;
font-size:16px;
cursor:pointer;
transition:all 0.3s ease;
font-family:'Poppins', sans-serif;
}
.btn-primary{
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:white;
box-shadow:0 10px 30px rgba(168, 85, 247, 0.3);
}
@media (hover: hover) {
    .btn-primary:hover {
        transform: translateY(-3px);
        box-shadow: 0 15px 40px rgba(168, 85, 247, 0.5);
    }
}
.btn-secondary{
background:rgba(168, 85, 247, 0.2);
color:#a855f7;
border:2px solid #a855f7;
}
@media (hover: hover) {
    .btn-secondary:hover {
        background: rgba(168, 85, 247, 0.3);
        transform: translateY(-3px);
    }
}
.hero-visual{
position:relative;
display:flex;
align-items:center;
justify-content:center;
animation:fadeInRight 0.8s ease-out 0.3s backwards;
}
.hero-card{
width:100%;
max-width:400px;
aspect-ratio:1;
background:rgba(168, 85, 247, 0.1);
border:2px solid rgba(168, 85, 247, 0.3);
border-radius:20px;
padding:30px;
backdrop-filter:blur(10px);
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
text-align:center;
position:relative;
overflow:hidden;
}
.hero-card::before{
content:'';
position:absolute;
inset:0;
background:radial-gradient(circle at 50% 50%, rgba(168, 85, 247, 0.2), transparent 70%);
display: none !important;
}
.hero-card-content{
position:relative;
z-index:1;
}
.hero-card-content h2{
font-size:32px;
margin-bottom:10px;
}
.hero-card-content p{
color:#b0b8d4;
font-size:14px;
}
@keyframes fadeInUp{
from{
opacity:0;
transform:translateY(30px);
}
to{
opacity:1;
transform:translateY(0);
}
}
@keyframes fadeInRight{
from{
opacity:0;
transform:translateX(30px);
}
to{
opacity:1;
transform:translateX(0);
}
}
@keyframes pulse{
0%, 100%{
opacity:0.5;
}
50%{
opacity:1;
}
}
/* =======================
   CONTAINER
======================= */
.container{
max-width:1200px;
margin:0 auto;
padding:40px;
}
/* =======================
   SECTION TITLE
======================= */
.section-title{
text-align:center;
margin-bottom:60px;
}
.section-title h2{
font-size:48px;
font-weight:800;
margin-bottom:15px;
background:linear-gradient(135deg, #ffffff, #a855f7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
}
.section-title p{
font-size:18px;
color:#b0b8d4;
}

/* =======================
   GRID - UPDATED FOR KAZEO STYLE
======================= */
.grid{
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:16px;
margin-top:40px;
}
@media (min-width: 640px) {
.grid {
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
}
@media (min-width: 1024px) {
.grid {
grid-template-columns: repeat(4, 1fr);
gap: 24px;
}
}
/* =======================
   CARD - UPDATED FOR KAZEO STYLE
======================= */
.card{
background:rgba(255, 255, 255, 0.05);
border:1px solid rgba(255, 255, 255, 0.1);
border-radius:12px;
overflow:hidden;
backdrop-filter:blur(10px);
transition:all 0.3s ease;
cursor:pointer;
position:relative;
display:flex;
flex-direction:column;
height:100%;
}
.card:hover{
transform:translateY(-4px);
border-color:rgba(255, 255, 255, 0.2);
box-shadow:0 12px 30px rgba(168, 85, 247, 0.15);
background:rgba(255, 255, 255, 0.08);
}
.card img{
width:100%;
height:128px;
object-fit:cover;
display:block;
background:#1a1f3a;
transition:transform 0.4s ease;
}
@media (min-width: 640px) {
.card img {
height: 160px;
}
}
.card:hover img{
transform:scale(1.05);
}
.card-content{
padding:16px;
flex-grow:1;
display:flex;
flex-direction:column;
justify-content:space-between;
}
@media (min-width: 640px) {
.card-content {
padding: 20px;
}
}
.card-content h3{
margin-bottom:8px;
font-size:13px;
font-weight:600;
color:#e0e6ff;
text-align:center;
word-break:break-word;
line-height:1.4;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 2.8em;
}
@media (min-width: 640px) {
.card-content h3 {
font-size: 14px;
}
}

/* =======================
   ANIMATION SYNC & CARD TAG
======================= */
.card {
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@media (max-width: 768px) {
    .card:active, .card.is-pressed {
        transform: translateY(-4px) scale(1.02) !important;
        border-color: rgba(255, 255, 255, 0.2) !important;
        box-shadow: 0 12px 30px rgba(168, 85, 247, 0.25) !important;
        background: rgba(255, 255, 255, 0.08) !important;
    }
    .card:active img, .card.is-pressed img {
        transform: scale(1.05) !important;
    }
}

	.card-tag {
	    font-size: 10px;
	    color: #a855f7;
	    text-align: center;
	    font-weight: 700;
	    margin-top: 8px;
	    padding: 4px 10px;
	    background: rgba(168, 85, 247, 0.12);
	    border: 1px solid rgba(168, 85, 247, 0.2);
	    border-radius: 6px;
	    text-transform: uppercase;
	    letter-spacing: 0.8px;
	    display: inline-block;
	    align-self: center;
	    box-shadow: 0 2px 8px rgba(168, 85, 247, 0.1);
	}
		.card-footer {
		    display: flex;
		    justify-content: space-between;
		    align-items: center;
		    margin-top: auto;
		    padding-top: 10px;
		}
		.card-view-count {
		    font-size: 9px;
		    color: #b0b8d4;
		    opacity: 0.8;
		    font-weight: 500;
		}
		.card-lihat-disini {
		    font-size: 10px;
		    color: #a855f7;
		    opacity: 0.7;
		    font-weight: 500;
		}
@media (max-width: 768px) {
    .card-tag {
        font-size: 9px !important;
        padding: 3px 8px;
    }
}

.card-content p{
font-size:11px;
color:#b0b8d4;
text-align:center;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
height: 2.8em;
}


/* =======================
   BUTTON
======================= */
button{
margin-top:10px;
width:100%;
padding:10px;
border:none;
border-radius:8px;
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:white;
cursor:pointer;
font-weight:600;
font-size:13px;
transition:all 0.3s ease;
font-family:'Poppins', sans-serif;
}
@media (hover: hover) {
    button:hover {
        transform: translateY(-2px);
        box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3);
    }
}
/* EFEK KLIK GLOBAL - SANGAT KUAT */
/* Menambahkan class .is-pressed untuk mendukung JavaScript Touch Events di Mobile */
button:active, .btn:active, .nav a:active, .back-btn:active, .asset-button:active,
button.is-pressed, .btn.is-pressed, .nav a.is-pressed, .back-btn.is-pressed, .asset-button.is-pressed,
.back-btn-story.is-pressed {
    transform: scale(0.88) !important;
    filter: brightness(0.6) !important;
    background: #7c3aed !important;
    transition: transform 0.1s !important;
}
.menu-toggle:active, .menu-toggle.is-pressed {
    transform: scale(0.8);
    opacity: 0.5;
    transition: transform 0.1s;
}
@media (hover: none) {
    .card:active, .card.is-pressed {
        transform: scale(0.96);
        background: rgba(168, 85, 247, 0.2);
    }
}
/* =======================
   HERO DETAIL
======================= */
.hero-detail{
display:flex;
flex-direction:column;
gap:30px;
animation:fadeInUp 0.6s ease-out;
}
.back-btn, .back-btn-story {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    padding: 8px 16px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    white-space: nowrap;
    margin: 0 0 15px 0;
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}
.back-btn:hover, .back-btn-story:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(168, 85, 247, 0.4);
    filter: brightness(1.1);
}
/* =======================
   STATS
======================= */
.stats{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
gap:20px;
margin:60px 0;
}
.stat-card{
background:rgba(168, 85, 247, 0.1);
border:1px solid rgba(168, 85, 247, 0.3);
border-radius:15px;
padding:30px;
text-align:center;
backdrop-filter:blur(10px);
}
.stat-card h3{
font-size:32px;
font-weight:800;
background:linear-gradient(135deg, #a855f7, #0ea5e9);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
margin-bottom:10px;
}
.stat-card p{
color:#b0b8d4;
font-size:14px;
}
/* =======================
   STORY PAGE
======================= */
.story-container{
display:flex;
flex-direction:column;
gap:30px;
max-width:1000px;
margin:0 auto;
padding:40px;
animation:fadeInUp 0.6s ease-out;
}
.story-unified-card{
position:relative;
width:100%;
border-radius:24px;
overflow:hidden;
background:rgba(168, 85, 247, 0.1);
border:2px solid rgba(168, 85, 247, 0.3);
backdrop-filter:blur(10px);
box-shadow:0 20px 50px rgba(0,0,0,0.3);
}
.story-image-container{
width:100%;
}
.story-info-overlay{
position:absolute;
bottom:0;
left:0;
right:0;
padding:10px 30px; /* Reduced padding to move text closer to bottom */
background:linear-gradient(to top, rgba(10, 14, 39, 0.95), transparent);
}
.story-info-overlay h1{
font-size:36px;
font-weight:800;
background:linear-gradient(135deg, #ffffff, #a855f7);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
background-clip:text;
margin:0;
line-height:1.2;
}
.story-info-overlay p{
font-size:16px;
color:#b0b8d4;
margin:8px 0 0 0;
}
.story-image-container img{
width:100%;
height:auto;
display:block;
object-fit:cover;
}

/* =======================
   DOWNLOAD ASSETS (KAZEO STYLE)
======================= */
.download-assets-section{
width:100%;
margin-top:20px;
}
.assets-title{
font-size:28px;
font-weight:800;
margin-bottom:25px;
color:#e0e6ff;
position:relative;
display:inline-block;
}
.assets-title::after{
content:'';
position:absolute;
bottom:-8px;
left:0;
width:60px;
height:4px;
background:linear-gradient(90deg, #a855f7, transparent);
border-radius:2px;
}
.assets-table-container{
width:100%;
background:rgba(168, 85, 247, 0.05);
border:1px solid rgba(168, 85, 247, 0.2);
border-radius:20px;
overflow:hidden;
backdrop-filter:blur(10px);
}
.assets-table{
width:100%;
border-collapse:collapse;
text-align:center;
table-layout:fixed;
}
.assets-table th{
padding:18px 10px;
background:rgba(168, 85, 247, 0.1);
color:#a855f7;
font-weight:700;
font-size:14px;
text-transform:uppercase;
letter-spacing:1px;
border-bottom:1px solid rgba(168, 85, 247, 0.2);
}
.assets-table th:nth-child(1){
width:33.33%;
text-align:center;
}
.assets-table th:nth-child(2){
width:33.33%;
text-align:center;
}
.assets-table th:nth-child(3){
width:33.33%;
text-align:center;
}
.assets-table td{
padding:15px 10px;
border-bottom:1px solid rgba(168, 85, 247, 0.1);
vertical-align:middle;
}
.assets-table td:nth-child(1){
width:33.33%;
text-align:center;
}
.assets-table td:nth-child(2){
width:33.33%;
text-align:center;
}
.assets-table td:nth-child(3){
width:33.33%;
text-align:center;
}
.assets-table tr:last-child td{
border-bottom:none;
}
.asset-variant-name{
font-weight:600;
color:#e0e6ff;
font-size:15px;
}
.asset-icon-cell{
width:100px;
}
.asset-mini-icon{
width:64px;
height:64px;
border-radius:12px;
background:transparent;
border:none;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
transition:all 0.3s ease;
margin:0 auto;
}
.asset-mini-icon:hover{
transform:scale(1.1);
}
.asset-mini-icon img{
width:100%;
height:100%;
object-fit:cover;
}
.download-btn-kazeo{
padding:10px 20px;
background:linear-gradient(135deg, #a855f7, #7c3aed);
color:white;
text-decoration:none;
border:none;
border-radius:10px;
font-weight:700;
font-size:13px;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
transition:all 0.3s ease;
box-shadow:0 4px 12px rgba(168, 85, 247, 0.2);
width:100%;
max-width:140px;
margin:0 auto;
cursor:pointer;
font-family:'Poppins', sans-serif;
}
.download-btn-kazeo:hover{
transform:translateY(-3px);
box-shadow:0 8px 20px rgba(168, 85, 247, 0.4);
filter:brightness(1.1);
}
.assets-loading,
.assets-empty{
padding:20px;
text-align:center;
color:#b0b8d4;
font-size:14px;
}
@media(max-width:768px){
.asset-item-row{
grid-template-columns:1fr;
gap:10px;
}
.asset-replace{
text-align:left;
}
.asset-icon{
width:55px;
height:55px;
margin:5px 0;
}
.asset-action{
justify-content:flex-start;
}
.download-link{
width:100%;
padding:10px 14px;
text-align:center;
}
.story-image-container img {
max-height: none; /* Biar gambar mobile lebih besar */
height: auto;
}
.download-assets-section {
padding: 15px;
}
}
/* =======================
   MOBILE RESPONSIVE
======================= */
	@media(max-width:768px){
		/* Global font size reduction */
			body { font-size: 13px; }
			h1 { font-size: 28px !important; }
			h2 { font-size: 24px !important; }
			h3 { font-size: 18px !important; }
			p { font-size: 13px !important; }
	
				.logo { font-size: 14px !important; flex-shrink: 0; }
				.logo span { font-size: 16px !important; }
				.search-container { max-width: none; margin-left: 0; flex-grow: 1; }
				.search-input { padding: 6px 10px 6px 28px; font-size: 11px; }
				.search-icon { left: 8px; font-size: 12px; }
	
				.menu-toggle {
					display: block;
					font-size: 22px;
					flex-shrink: 0;
				}
				nav {
					padding: 10px 15px;
					gap: 10px;
				}
		.nav {
			display: none;
			position: absolute;
			top: 100%;
			left: 0;
			right: 0;
			background: rgba(10, 14, 39, 0.98);
			flex-direction: column;
			padding: 15px;
			gap: 8px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.1);
			backdrop-filter: blur(20px);
			z-index: 1000;
		}
		.nav.active {
			display: flex;
		}
		.nav a {
			width: 100%;
			text-align: center;
			padding: 12px;
			font-size: 13px;
		}
			.hero-content{
			grid-template-columns:1fr;
			gap:20px;
			margin-top: 0;
			}
			.hero { min-height: auto !important; padding-bottom: 20px; }
			.hero-buttons {
				display: grid;
				grid-template-columns: repeat(3, 1fr);
				gap: 10px;
				width: 100%;
			}
		.hero-buttons .btn {
			padding: 10px 5px;
			font-size: 11px;
			white-space: nowrap;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
		}
					.hero-card {
						max-width: none;
						width: 100%;
						aspect-ratio: 2/1;
					}
.hero-card.report-card {
						aspect-ratio: auto !important;
						min-height: auto !important;
						padding: 20px !important;
					}
					.hero-card.report-card::before {
						animation: none !important;
						display: none !important;
					}
					.trending-section {
							width: 100%;
							margin-top: 10px;
							margin-bottom: 10px;
							animation: fadeInUp 0.8s ease-out 0.4s backwards;
						}
						.trending-section .grid {
							margin-top: 15px;
						}

		.trending-title {
			font-size: 18px;
			font-weight: 800;
			margin-bottom: 20px;
			color: #e0e6ff;
			position: relative;
			display: inline-block;
		}
		.trending-title::after {
			content: '';
			position: absolute;
			bottom: -5px;
			left: 0;
			width: 40px;
			height: 3px;
			background: linear-gradient(90deg, #a855f7, transparent);
			border-radius: 2px;
		}
		body.theme-tako .trending-title {
			color: #000000;
		}
		body.theme-tako .trending-title::after {
			background: #000000;
		}
	.hero-text h1{
	font-size:32px !important;
	}
	.section-title h2{
	font-size:28px !important;
	}
	
	.container {
		padding: 20px;
	}
	.card-content h3 {
				font-size: 13px !important;
				height: 2.8em !important;
				margin-bottom: 8px !important;
			}
	.card-content p {
				font-size: 11px !important;
				height: 2.8em !important;
				margin-bottom: 5px !important;
			}
	
	.story-container {
		padding: 20px;
		gap: 20px;
	}
		.story-info-overlay {
			padding: 5px 20px; /* Even tighter for mobile */
		}
	.story-info-overlay h1 {
			font-size: 18px !important;
		}
	.story-info-overlay p {
			font-size: 11px !important;
			margin: 2px 0 0 0 !important;
		}
	.download-assets-section{
	padding: 15px 0;
	}
	.assets-title {
		font-size: 20px !important;
	}
	.assets-table th, .assets-table td {
		padding: 12px 5px;
		font-size: 11px;
	}
	.asset-variant-name {
		font-size: 12px;
	}
	.asset-mini-icon {
		width: 45px;
		height: 45px;
	}
	.download-btn-kazeo {
		padding: 8px 12px;
		font-size: 11px;
	}
	}


/* TEMA 2 (TAKO STYLE) OVERRIDES - MINIMALIST BLACK & WHITE */
body.theme-tako {
    background: #ffffff !important;
    color: #000000 !important;
}
body.theme-tako .bg-base {
    background: linear-gradient(135deg, #ffffff 0%, #f5f5f5 50%, #ffffff 100%) !important;
}
body.theme-tako .bg-gradient {
    background: radial-gradient(circle at 20% 50%, #00000008, transparent 50%), 
                radial-gradient(circle at 80% 80%, #00000008, transparent 50%) !important;
}
body.theme-tako .bg-glow {
    background: radial-gradient(circle, #00000005, transparent 70%) !important;
}
body.theme-tako nav {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom: 1px solid #000000 !important;
}
body.theme-tako .menu-toggle {
    color: #000000 !important; /* Warna tombol hamburger Tema 2 jadi hitam */
}
body.theme-tako .logo {
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
}
body.theme-tako .search-input {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
}
body.theme-tako .search-icon {
    color: #000000 !important;
}
body.theme-tako .nav a, 
body.theme-tako .btn, 
body.theme-tako button, 
body.theme-tako .back-btn, 
body.theme-tako .download-btn-kazeo, 
body.theme-tako .asset-button {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 0px #888888 !important;
    transition: all 0.1s ease-out !important;
    transform: translate(0, 0) !important;
    text-decoration: none !important;
}
body.theme-tako .nav a:active, 
body.theme-tako .btn:active, 
body.theme-tako button:active {
    transform: translate(2px, 2px) !important;
    box-shadow: 0px 0px 0px #888888 !important;
}
body.theme-tako .hero-text h1, 
body.theme-tako .section-title h2, 
body.theme-tako .stat-card h3 {
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
}
body.theme-tako .hero-text p, 
body.theme-tako .section-title p, 
body.theme-tako .stat-card p, 
body.theme-tako .card-content p {
    color: #333333 !important;
}
body.theme-tako .hero-card, 
body.theme-tako .card, 
body.theme-tako .nav a:hover, body.theme-tako .btn:hover, body.theme-tako button:hover, body.theme-tako .back-btn:hover, body.theme-tako .download-btn-kazeo:hover, body.theme-tako .asset-button:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0px #000000 !important;
    background: #333333 !important;
}
body.theme-tako .nav a:active, body.theme-tako .nav a.is-pressed, body.theme-tako .btn:active, body.theme-tako .btn.is-pressed, body.theme-tako button:active, body.theme-tako button.is-pressed, body.theme-tako .back-btn:active, body.theme-tako .back-btn.is-pressed, body.theme-tako .download-btn-kazeo:active, body.theme-tako .download-btn-kazeo.is-pressed {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px #888888 !important;
    background: #ffffff !important;
    color: #000000 !important;
}
body.theme-tako .hero-card:hover, body.theme-tako .card:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 3px 3px 0px #000000 !important;
}
body.theme-tako .hero-card:active, body.theme-tako .hero-card.is-pressed, body.theme-tako .card:active, body.theme-tako .card.is-pressed {
    transform: translate(6px, 6px) !important;
    box-shadow: 0px 0px 0px #000000 !important;
}
body.theme-tako .stat-card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0px #000000 !important;
    transition: all 0.1s ease-out !important;
    transform: translate(0, 0) !important;
}
body.theme-tako .card-content h3 {
    color: #000000 !important;
}
body.theme-tako .card-tag {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 6px !important;
}
body.theme-tako .card-lihat-disini {
    color: #000000 !important;
}
body.theme-tako .rt-user-widget {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
body.theme-tako .rt-badge {
    background: #ffffff !important;
    color: #000000 !important;
    border: 1px solid #000000 !important;
}
body.theme-tako .report-title {
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
}
body.theme-tako .report-desc {
    color: #333333 !important;
}
body.theme-tako .report-textarea {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
}
body.theme-tako .tutorial-caption {
    color: #000000 !important;
}
body.theme-tako .back-link {
    color: #000000 !important;
}
body.theme-tako .story-unified-card {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
}
body.theme-tako .toast-notification {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #ffffff !important;
}


/* STORY PAGE MINIMALIST OVERRIDES FOR THEME 2 */
body.theme-tako .report-title {
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
}
body.theme-tako .report-desc {
    color: #333333 !important;
}
body.theme-tako .report-textarea {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    color: #000000 !important;
}
body.theme-tako .tutorial-caption {
    color: #000000 !important;
}
body.theme-tako .back-link {
    color: #000000 !important;
}
body.theme-tako .story-unified-card {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
    box-shadow: 4px 4px 0px #000000 !important;
}
body.theme-tako .story-info-overlay {
    background: linear-gradient(to top, rgba(255, 255, 255, 0.95), transparent) !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
body.theme-tako .story-info-overlay h1 {
    color: #000000 !important;
    background: none !important;
    -webkit-text-fill-color: #000000 !important;
}
body.theme-tako .story-info-overlay p {
    color: #333333 !important;
}
body.theme-tako .assets-title {
    color: #000000 !important;
}
body.theme-tako .assets-title::after {
    background: #000000 !important;
}
body.theme-tako .assets-table-container {
    background: #ffffff !important;
    border: 1px solid #000000 !important;
}
body.theme-tako .assets-table th {
    background: #f0f0f0 !important;
    color: #000000 !important;
    border-bottom: 1px solid #000000 !important;
}
body.theme-tako .assets-table td {
    border-bottom: 1px solid #f0f0f0 !important;
    color: #000000 !important;
}
body.theme-tako .asset-variant-name {
    color: #000000 !important;
}
body.theme-tako .back-btn-story {
    background: #000000 !important;
    color: #ffffff !important;
    border: 1px solid #000000 !important;
    box-shadow: 3px 3px 0px #888888 !important;
}
body.theme-tako .asset-mini-icon {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* ANIMATION OVERRIDES FOR THEME 2 (SYNC WITH UNTITLED-2.HTML) */
body.theme-tako .bg-gradient {
    animation: gradientShift 0.5s ease-in-out infinite !important;
}
body.theme-tako .bg-glow {
    animation: float 0.5s ease-in-out infinite !important;
}
body.theme-tako .bg-glow:nth-child(3) {
    animation: float 0.5s ease-in-out infinite reverse !important;
}
body.theme-tako nav {
    animation: slideDown 0.5s ease-out !important;
}
body.theme-tako .hero-text h1 {
    animation: fadeInUp 0.5s ease-out !important;
}
body.theme-tako .hero-text p, 
body.theme-tako .hero-buttons {
    animation: fadeInUp 0.5s ease-out 0.05s backwards !important;
}
body.theme-tako .hero-visual {
    animation: fadeInRight 0.5s ease-out 0.05s backwards !important;
}
body.theme-tako .hero-card::before {
    display: none !important;
}
body.theme-tako .card {
    transition: all 0.1s ease-out !important;
}
body.theme-tako .card img {
    transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}
body.theme-tako .btn, 
body.theme-tako button, 
body.theme-tako .nav a {
    transition: all 0.1s ease-out !important;
}

/* Custom Keyframes for Theme 2 if needed to be different from default */
@keyframes takoPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

/* PERFECT SYNC WITH UNTITLED-2.HTML FOR THEME 2 */
body.theme-tako .nav a, 
body.theme-tako .btn, 
body.theme-tako button, 
body.theme-tako .back-btn, 
body.theme-tako .back-btn-story,
body.theme-tako .download-btn-kazeo, 
body.theme-tako .asset-button {
    background: #000000 !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 8px !important;
    box-shadow: 4px 4px 0px #888888 !important;
    transition: all 0.1s ease-out !important;
    transform: translate(0, 0) !important;
    text-decoration: none !important;
}

body.theme-tako .nav a:hover, 
body.theme-tako .btn:hover, 
body.theme-tako button:hover, 
body.theme-tako .back-btn:hover, 
body.theme-tako .back-btn-story:hover,
body.theme-tako .download-btn-kazeo:hover, 
body.theme-tako .asset-button:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 2px 2px 0px #000000 !important;
    background: #333333 !important;
}

body.theme-tako .nav a:active, 
body.theme-tako .nav a.is-pressed, 
body.theme-tako .btn:active, 
body.theme-tako .btn.is-pressed, 
body.theme-tako button:active, 
body.theme-tako button.is-pressed, 
body.theme-tako .back-btn:active, 
body.theme-tako .back-btn.is-pressed, 
body.theme-tako .back-btn-story:active,
body.theme-tako .back-btn-story.is-pressed,
body.theme-tako .download-btn-kazeo:active, 
body.theme-tako .download-btn-kazeo.is-pressed {
    transform: translate(4px, 4px) !important;
    box-shadow: 0px 0px 0px #888888 !important;
    background: #ffffff !important;
    color: #000000 !important;
}

body.theme-tako .hero-card, 
body.theme-tako .card {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
    border-radius: 16px !important;
    box-shadow: 6px 6px 0px #000000 !important;
    transition: all 0.1s ease-out !important;
    transform: translate(0, 0) !important;
}

body.theme-tako .hero-card:hover, 
body.theme-tako .card:hover {
    transform: translate(3px, 3px) !important;
    box-shadow: 3px 3px 0px #000000 !important;
}

body.theme-tako .hero-card:active, 
body.theme-tako .hero-card.is-pressed, 
body.theme-tako .card:active, 
body.theme-tako .card.is-pressed {
    transform: translate(6px, 6px) !important;
    box-shadow: 0px 0px 0px #000000 !important;
}

body.theme-tako .rt-user-widget {
    background: #000000 !important;
    border: 2px solid #ffffff !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

body.theme-tako .rt-user-widget svg {
    fill: #ffffff !important;
}

body.theme-tako .rt-badge {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.theme-tako .rt-tooltip {
    background: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #000000 !important;
}

body.theme-tako .toast-notification {
    background: rgba(0, 0, 0, 0.9) !important;
    color: #ffffff !important;
    border: 2px solid #000000 !important;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3) !important;
}

/* MOBILE SPECIFIC SYNC FOR THEME 2 (UNTITLED-2.HTML) */
@media(max-width:768px) {
    body.theme-tako .download-btn-kazeo {
        padding: 4px 8px !important;
        font-size: 9px !important;
        max-width: 80px !important;
        border-radius: 6px !important;
        box-shadow: 2px 2px 0px #888888 !important;
        transition: all 0.1s ease-out !important;
    }
    body.theme-tako .download-btn-kazeo:active, 
    body.theme-tako .download-btn-kazeo.is-pressed {
        transform: translate(2px, 2px) !important;
        box-shadow: 0px 0px 0px #888888 !important;
        background: #ffffff !important;
        color: #000000 !important;
    }
    
    /* Sinkronisasi transisi animasi tombol mobile lainnya */
    body.theme-tako .nav a, 
    body.theme-tako .btn, 
    body.theme-tako button, 
    body.theme-tako .back-btn, 
    body.theme-tako .back-btn-story {
        transition: all 0.1s ease-out !important;
    }
}


/* =======================
   VIDEO OVERLAY & ADDITIONAL STYLES
======================= */

.video-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.video-overlay-content {
    max-width: 90%;
    max-height: 90%;
    border-radius: 20px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}