/*
Theme Name: Mencoba Sinema Indonesia
Theme URI: https://mencobasinemaindonesia.art
Author: Ibni
Author URI: https://mencobasinemaindonesia.art
Description: Clean dark theme untuk Sinema Indonesia plugin. Mendukung shortcode registration, login, dan profile showcase dengan cinema dark aesthetic.
Version: 1.0.0
Requires at least: 5.8
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sinema-theme
Tags: dark, cinema, professional, portfolio, custom-menu, custom-logo

Sinema Indonesia Theme, Copyright 2025
Sinema Indonesia is distributed under the terms of the GNU GPL.
*/

/* ============================================
   CSS RESET & BASE
   ============================================ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

/* ============================================
   CSS VARIABLES - CINEMA DARK THEME
   ============================================ */

:root {
	/* Colors - Sync with Sinema Indonesia Plugin */
	--primary: #00d9ff;
	--secondary: #9d4edd;
	--dark-bg: #0f0c29;
	--dark-gradient: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
	--dark-card: rgba(26, 26, 46, 0.95);
	--dark-lighter: #16213e;
	--border-color: #3d3d5c;
	
	/* Text Colors */
	--text-light: #eaeaea;
	--text-muted: #b8b8b8;
	--text-dark: #0a0a0a;
	
	/* Effects */
	--neon-glow: 0 0 20px rgba(0, 217, 255, 0.3);
	--card-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
	
	/* Spacing */
	--container-width: 1200px;
	--header-height: 80px;
	--spacing-xs: 0.5rem;
	--spacing-sm: 1rem;
	--spacing-md: 2rem;
	--spacing-lg: 3rem;
	
	/* Typography */
	--font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
	--font-size-base: 16px;
	--line-height: 1.6;
	
	/* Transitions */
	--transition-fast: 0.2s ease;
	--transition-normal: 0.3s ease;
	--transition-slow: 0.5s ease;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-family);
	font-size: var(--font-size-base);
	line-height: var(--line-height);
	color: var(--text-light);
	background: var(--dark-bg);
	min-height: 100vh;
	overflow-x: hidden;
}

/* Animated stars background */
body::before {
	content: '';
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.5;
	animation: twinkle 3s ease-in-out infinite;
	pointer-events: none;
	z-index: 0;
}

@keyframes twinkle {
	0%, 100% { opacity: 0.5; }
	50% { opacity: 0.8; }
}

/* Container */
.container {
	max-width: var(--container-width);
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* Links */
a {
	color: var(--primary);
	text-decoration: none;
	transition: var(--transition-fast);
}

a:hover {
	color: var(--text-light);
	text-shadow: var(--neon-glow);
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: var(--spacing-sm);
	color: var(--text-light);
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; }

/* Paragraph */
p {
	margin-bottom: var(--spacing-sm);
}

/* Images */
img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.text-center { text-align: center; }
.text-muted { color: var(--text-muted); }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: var(--spacing-md); }

/* ============================================
   WORDPRESS CORE CLASSES
   ============================================ */

.alignleft {
	float: left;
	margin-right: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
}

.alignright {
	float: right;
	margin-left: var(--spacing-sm);
	margin-bottom: var(--spacing-sm);
}

.aligncenter {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
	:root {
		--header-height: 70px;
		--font-size-base: 14px;
	}
	
	h1 { font-size: 2rem; }
	h2 { font-size: 1.75rem; }
	h3 { font-size: 1.5rem; }
}