<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

    <title>Cinema SI</title>
    <meta content="" name="description">
    <meta content="" name="keywords">

    <link href="assets/img/icon.png" rel="icon">
    <link href="assets/img/apple-touch-icon.png" rel="apple-touch-icon">

    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i|Raleway:300,300i,400,400i,500,500i,600,600i,700,700i|Poppins:300,300i,400,400i,500,500i,600,600i,700,700i" rel="stylesheet">

    <link href="assets/vendor/font-awsome/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/vendor/animate.css/animate.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
    <link href="assets/vendor/bootstrap-icons/bootstrap-icons.css" rel="stylesheet">
    <link href="assets/vendor/boxicons/css/boxicons.min.css" rel="stylesheet">
    <link href="assets/vendor/glightbox/css/glightbox.min.css" rel="stylesheet">
    <link href="assets/vendor/swiper/swiper-bundle.min.css" rel="stylesheet">

    <link href="assets/css/style.css" rel="stylesheet">

    <style>
        /* Loading Screen Styles */
        #loading-screen {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #f0f2f5; /* Match body background from our custom style */
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999; /* Pastikan di atas semua konten */
            transition: opacity 0.5s ease-out; /* Untuk efek fade out */
            opacity: 1; /* Default visible */
        }

        .spinner {
            border: 8px solid rgba(0, 123, 255, 0.2); /* Light blue border */
            border-top: 8px solid #007bff; /* Blue top border */
            border-radius: 50%;
            width: 60px;
            height: 60px;
            animation: spin 1s linear infinite;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Hide content until loading is complete */
        /* Penting: Ini menyembunyikan semua konten utama */
        body.loading #main-content-wrapper {
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out; /* Transisi saat muncul */
        }

        /* Custom Global Styles (dari pembahasan film.php dan kursi.php) */
        /* Anda bisa memindahkan ini ke assets/css/style.css atau file custom.css lainnya */
        body {
            font-family: 'Poppins', sans-serif; /* Poppins already linked above */
            background-color: #f0f2f5;
            color: #333;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        .message {
            padding: 12px 20px;
            margin: 20px auto;
            border-radius: 8px;
            text-align: center;
            font-weight: 600;
            max-width: 900px;
            box-sizing: border-box;
            animation: fadeInDown 0.5s ease-out;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        }
        @keyframes fadeInDown {
            from { opacity: 0; transform: translateY(-20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        .message.error {
            background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb;
        }
        .message.success {
            background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb;
        }
        
        /* Jika navigation.php Anda memiliki class 'fixed-top' atau sejenisnya,
           pastikan konten utama memiliki padding-top yang cukup
           agar tidak tertutup oleh navbar */
        /* Contoh:
        main {
            padding-top: 80px; // Sesuaikan dengan tinggi navbar Anda
        }
        */
    </style>
</head>

<body class="loading"> <div id="loading-screen">
        <div class="spinner"></div>
    </div>
    <div id="main-content-wrapper">

        <header id="header" class="d-flex align-items-center">
            </header><main id="main">
            <?php 
                // require_once 'views/navigation.php'; 
                // Atau
                // include 'views/navbar.php'; 
            ?>