/* ================= RESET ================= */
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

html { scroll-behavior:smooth; }

body {
  background:#000;
  color:#fff;
  overflow-x:hidden;
}

.empty-state {
  text-align:center;
  padding:40px 20px;
}

.empty-state h3 {
  color:#f5c518;
  margin-bottom:10px;
}

.empty-state p {
  color:#aaa;
  font-size:14px;
  margin-bottom:10px;
}


/* 🏆 WINNER GRID */
.winner-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

/* CARD */
.winner-card {
  position:relative;
  border-radius:14px;
  overflow:hidden;
  transition:0.4s;
  cursor:pointer;
}

.winner-card img {
  width:100%;
  height:230px;
  object-fit:cover;
}

/* HOVER */
.winner-card:hover {
  transform:scale(1.08);
}

/* OVERLAY */
.winner-overlay {
  position:absolute;
  bottom:0;
  width:100%;
  padding:10px;
  background:linear-gradient(transparent,black);
}

.winner-overlay h3 {
  font-size:14px;
}

.winner-overlay p {
  font-size:12px;
  color:#ccc;
}

/* 🏆 BADGE */
.winner-badge {
  position:absolute;
  top:10px;
  left:10px;
  background:linear-gradient(135deg,#f5c518,#ffdd55);
  color:#000;
  padding:5px 10px;
  font-size:11px;
  border-radius:20px;
  font-weight:bold;
  box-shadow:0 0 10px rgba(245,197,24,0.7);
}

/* EMPTY STATE */
.empty-state {
  text-align:center;
  padding:50px 20px;
}

.empty-state h2 {
  color:#f5c518;
  margin-bottom:10px;
}

.empty-state p {
  color:#aaa;
  margin-bottom:8px;
}

/* DESKTOP */
@media(min-width:768px){
  .winner-grid {
    grid-template-columns:repeat(4,1fr);
  }
}


/* ================= TOP BAR ================= */
.topbar {
  height:55px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.85);
  backdrop-filter:blur(12px);
}

/* ================= APP ================= */
.app {
  padding-bottom:80px;
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100%;
}

.logo {
  width:auto;
  height:32px;
  object-fit:contain;
}

/* LOGO ONLY STYLE */
.logo-only {
  height:32px;   /* 🔥 ideal size */
  width:auto;
  transition:0.3s;
  object-fit:contain;
}

.logo-only:hover {
  transform:scale(1.1);
}

/* ================= HERO ================= */
.hero-cinema {
  position:relative;
  height:90vh;
  display:flex;
  align-items:flex-end;
}

.hero-cinema::before {
  content:"";
  position:absolute;
  width:100%;
  height:100%;
  background:
    linear-gradient(to top,#000 20%, rgba(0,0,0,0.4)),
    url('https://images.unsplash.com/photo-1536440136628-849c177e76a1') center/cover;
  z-index:1;
}

.hero-content {
  position:relative;
  z-index:2;
  padding:20px;
  margin-bottom:60px;
  max-width:90%;
  animation:fadeUp 0.8s ease;
}

.hero-content h1 {
  font-size:30px;
  line-height:1.2;
  text-shadow:0 0 20px rgba(255,255,255,0.3);
}

.hero-content p {
  color:#ccc;
  margin:10px 0 20px;
  font-size:14px;
}


/* EVENT CARD */
.event-card {
  padding:20px;
  border-radius:14px;
}

/* ROW */
.event-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.event-row:last-child {
  border-bottom:none;
}

/* LABEL */
.event-label {
  font-size:13px;
  color:#aaa;
}

/* DATE */
.event-date {
  font-size:14px;
  font-weight:600;
}

/* HIGHLIGHT (EVENT DAY) */
.event-date.highlight {
  color:#f5c518;
  text-shadow:0 0 10px rgba(245,197,24,0.6);
}

/* CENTER TITLE */
.center h3 {
  text-align:center;
  margin-bottom:10px;
}

/* ================= BUTTONS ================= */
.hero-actions {
  display:flex;
  gap:10px;
}

.btn {
  background:linear-gradient(135deg,#f5c518,#ffdd55);
  color:#000;
  padding:12px 16px;
  border-radius:10px;
  font-weight:bold;
  text-decoration:none;
  box-shadow:0 0 15px rgba(245,197,24,0.5);
  transition:0.3s;
  display:inline-block;
}

.btn:hover {
  transform:scale(1.05);
}

.btn-outline {
  border:1px solid rgba(255,255,255,0.6);
  padding:12px 16px;
  border-radius:10px;
  color:#fff;
  text-decoration:none;
  transition:0.3s;
}

.btn-outline:hover {
  background:#fff;
  color:#000;
}

/* ================= CARD ================= */
.card {
  background:linear-gradient(145deg,#111,#0a0a0a);
  margin:12px;
  padding:18px;
  border-radius:18px;
  box-shadow:0 10px 25px rgba(0,0,0,0.6);
  transition:0.3s;
}

.card:hover {
  transform:translateY(-5px);
  box-shadow:0 15px 40px rgba(0,0,0,0.8);
}


/* ABOUT LIST */
.about-list {
  list-style:none;
  margin-top:10px;
}

.about-list li {
  padding:8px 0;
  font-size:14px;
  border-bottom:1px solid rgba(255,255,255,0.05);
}

.about-list li:last-child {
  border-bottom:none;
}


/* AWARD LIST */
.award-list {
  list-style:none;
  margin-top:10px;
}

.award-list li {
  padding:10px 0;
  border-bottom:1px solid rgba(255,255,255,0.05);
  font-size:14px;
}

.award-list li:last-child {
  border-bottom:none;
}

/* AWARD CARD TEXT */
.award-card h4 {
  margin-bottom:6px;
  font-size:15px;
}

.award-card p {
  font-size:12px;
  color:#aaa;
}


/* MODAL */
.modal {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.95);
  justify-content:center;
  align-items:center;
  z-index:9999;
  backdrop-filter:blur(8px);
}

.modal-content {
  width:92%;
  max-width:520px;
  background:#000;
  border-radius:14px;
  overflow:hidden;
  position:relative;
  animation:fadeUp 0.3s ease;
}

.modal-content iframe {
  width:100%;
  height:230px;
  background:#000;
}

/* INFO */
.modal-info {
  padding:12px;
}

.modal-info h3 {
  font-size:16px;
  margin-bottom:6px;
}

.modal-info p {
  font-size:13px;
  color:#ccc;
}

.close {
  position:absolute;
  top:10px;
  right:15px;
  font-size:26px;
  color:#fff;
  cursor:pointer;
  z-index:10;
}


/* ================= STATS ================= */
.stats {
  display:flex;
  justify-content:space-around;
  padding:20px;
}

.stat h2 {
  color:#f5c518;
  font-size:22px;
  text-shadow:0 0 12px rgba(245,197,24,0.8);
}

.stat p {
  font-size:12px;
  color:#ccc;
}

/* ================= SECTION ================= */
.section {
  padding:20px;
}

.section h3 {
  margin-bottom:10px;
  position:relative;
}

.section h3::after {
  content:"";
  width:40px;
  height:2px;
  background:#f5c518;
  display:block;
  margin-top:5px;
}

/* ================= CAROUSEL ================= */
.film-row,
.carousel {
  display:flex;
  overflow-x:auto;
  gap:12px;
  scroll-snap-type:x mandatory;
}

.carousel::-webkit-scrollbar,
.film-row::-webkit-scrollbar {
  display:none;
}

.film-item,
.film-card {
  min-width:160px;
  scroll-snap-align:start;
  transition:0.4s;
  position:relative;
}

.film-item img,
.film-card img {
  width:100%;
  border-radius:10px;
}

.film-item {
  position:relative;
  min-width:140px;
  transition:0.3s;
}

.film-item:hover,
.film-card:hover {
  transform:scale(1.08);
  z-index:10;
}

.film-info {
  position:absolute;
  bottom:0;
  width:100%;
  padding:8px;
  font-size:12px;
  background:linear-gradient(transparent,black);
  text-align:center;
}


/* GRID */
.film-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

/* FILM BOX */
.film-box {
  position:relative;
  overflow:hidden;
  border-radius:12px;
}

.film-box img {
  width:100%;
  display:block;
  border-radius:12px;
  transition:0.4s;
}

/* HOVER EFFECT */
.film-hover {
  position:absolute;
  bottom:0;
  width:100%;
  padding:10px;
  background:linear-gradient(transparent,black);
  opacity:0;
  transition:0.3s;
}

.film-hover h4 {
  font-size:13px;
  margin-bottom:3px;
}

.film-hover p {
  font-size:11px;
  color:#ccc;
}

/* HOVER ANIMATION */
.film-box:hover img {
  transform:scale(1.1);
}

.film-box:hover .film-hover {
  opacity:1;
}

/* RESPONSIVE (TABLET+) */
@media(min-width:768px){
  .film-grid {
    grid-template-columns:repeat(4,1fr);
  }
}



/* CAROUSEL */
.carousel {
  display:flex;
  overflow-x:auto;
  gap:12px;
  padding-bottom:10px;
}

.carousel::-webkit-scrollbar {
  display:none;
}

/* FILM CARD */
.film-card {
  min-width:150px;
  position:relative;
  border-radius:12px;
  overflow:hidden;
  transition:0.4s;
}

.film-card img {
  width:100%;
  height:220px;
  object-fit:cover;
  border-radius:12px;
}

/* OVERLAY */
.film-overlay {
  position:absolute;
  bottom:0;
  width:100%;
  padding:8px;
  background:linear-gradient(transparent,black);
}

.film-overlay h4 {
  font-size:12px;
}

/* HOVER EFFECT */
.film-card:hover {
  transform:scale(1.1);
}

/* POPUP */
.film-popup {
  display:none;
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  background:rgba(0,0,0,0.95);
  justify-content:center;
  align-items:center;
  z-index:9999;
}

.film-popup-content {
  width:90%;
  max-width:500px;
  background:#000;
  border-radius:12px;
  overflow:hidden;
  position:relative;
}

/* VIDEO */
.film-popup iframe {
  width:100%;
  height:220px;
}

/* TEXT */
.film-popup h3 {
  padding:10px;
}

.film-popup p {
  padding:0 10px 10px;
  color:#ccc;
}

/* CLOSE */
.close-btn {
  position:absolute;
  top:10px;
  right:15px;
  font-size:26px;
  color:#fff;
  cursor:pointer;
}


/* ================= AWARDS ================= */
.awards-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
}

.award-card {
  background:linear-gradient(145deg,#111,#000);
  padding:18px;
  text-align:center;
  border-radius:12px;
  border:1px solid rgba(255,215,0,0.2);
  box-shadow:0 0 10px rgba(255,215,0,0.1);
  transition:0.3s;
}

.award-card:hover {
  transform:scale(1.05);
  box-shadow:0 0 25px rgba(255,215,0,0.6);
}

/* ================= GLASS ================= */
.glass {
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(12px);
  border-radius:12px;
}

/* ================= CTA ================= */
.cta-premium {
  text-align:center;
  padding:60px 20px;
  background:radial-gradient(circle,#111,#000);
}

.cta-premium h2 {
  font-size:22px;
  margin-bottom:20px;
}

/* ================= FORM INPUT (FIXED) ================= */
input,
select,
textarea {
  width:100%;
  padding:14px;
  margin:10px 0;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.08);
  color:#fff;
  border-radius:12px;
  font-size:14px;
  outline:none;
  transition:0.3s;
}

/* placeholder */
input::placeholder,
textarea::placeholder {
  color:#aaa;
}

/* focus glow */
input:focus,
select:focus,
textarea:focus {
  border-color:#f5c518;
  box-shadow:0 0 10px rgba(245,197,24,0.4);
  background:rgba(255,255,255,0.08);
}

/* textarea fix */
textarea {
  min-height:120px;
  resize:none;
}

/* dropdown arrow */
select {
  appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg fill='white' height='20' viewBox='0 0 24 24' width='20'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position:right 12px center;
}

/* ================= FILE UPLOAD ================= */
/* hide input */
input[type="file"] {
  display:none;
}

.upload-box {
  border:2px dashed rgba(255,255,255,0.2);
  padding:20px;
  text-align:center;
  border-radius:14px;
  cursor:pointer;
  transition:0.3s;
  display:block;
}

.upload-box:hover {
  border-color:#f5c518;
  background:rgba(255,255,255,0.05);
  box-shadow:0 0 20px rgba(245,197,24,0.3);
}

/* upload content */
.upload-content {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  font-size:14px;
}

/* icon size */
.upload-icon {
  font-size:28px;
}

.file-name {
  margin-top:10px;
  font-size:12px;
  color:#aaa;
}


/* ===== BUTTON FIX ===== */
.submit-btn {
  width:100%;
  padding:16px;
  font-size:16px;
  border-radius:12px;
  box-shadow:0 0 20px rgba(245,197,24,0.6);
}

/* ================= POSTER ================= */
.poster {
  width:100%;
  border-radius:12px;
}

/* ================= BOTTOM NAV ================= */
.bottom-nav {
  position:fixed;
  bottom:0;
  width:100%;
  display:flex;
  justify-content:space-around;
  align-items:center;
  background:rgba(0,0,0,0.9);
  backdrop-filter:blur(15px);
  padding:10px 0;
  border-top:1px solid rgba(255,255,255,0.05);
  z-index:999;
}

.bottom-nav a {
  color:#aaa;
  font-size:22px;
  text-decoration:none;
  transition:0.3s;
}

.bottom-nav a:hover,
.bottom-nav a.active {
  color:#f5c518;
  transform:scale(1.2);
}


/* NORMAL ITEMS */
.nav-item {
  display:flex;
  flex-direction:column;
  align-items:center;
  font-size:12px;
  color:#888;
  text-decoration:none;
  transition:0.3s;
}

.nav-item .icon {
  font-size:20px;
  transition:0.3s;
}

/* ACTIVE */
.nav-item.active {
  color:#f5c518;
  animation:pop 0.3s ease;
}

.nav-item.active .icon {
  transform:scale(1.2);
}

/* TAP EFFECT */
.nav-item:active {
  transform:scale(0.9);
}

/* CENTER BUTTON */
.nav-center {
  position:relative;
  top:-20px;
  background:linear-gradient(135deg,#f5c518,#ffdd55);
  width:55px;
  height:55px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:#000;
  text-decoration:none;
  box-shadow:0 5px 20px rgba(245,197,24,0.6);
  transition:0.3s;
}

/* CENTER HOVER */
.nav-center:hover {
  transform:scale(1.1);
}

/* RIPPLE EFFECT */
.nav-item::after {
  content:"";
  position:absolute;
  width:40px;
  height:40px;
  border-radius:50%;
  background:rgba(245,197,24,0.2);
  opacity:0;
  transition:0.3s;
}

.nav-item:active::after {
  opacity:1;
  transform:scale(1.5);
}

@keyframes pop {
  from { transform:scale(0.8); }
  to { transform:scale(1.2); }
}

/* ================= ANIMATION ================= */
@keyframes fadeUp {
  from {
    opacity:0;
    transform:translateY(30px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}