/* ======== VARIABLES ======== */
:root {
  --primary: #890406; /* deep red */
  --secondary: #FEF768; /* warm yellow */
  --bg-light: #ffffff; 
  --bg-dark: #000000; 
  --text-light: #1C1C1E; 
  --text-dark: #F2F2F7; 
  --glass-light: rgba(255, 255, 255, 0.55); /* Light glass effect */
  --glass-dark: rgba(0, 0, 0, 0.55); /* Dark glass effect for dark mode */
  --blur: 16px;
  --border-light: rgba(0, 0, 0, 0.08);
  --border-dark: rgba(255, 255, 255, 0.12);
  --header-height: 72px;
}

/* ======== RESET ======== */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html, body {
  height: 100%;
}
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: url('images/pempek-hero.jpg') center/cover no-repeat fixed; /* For backdrop-filter */
  color: var(--text-light);
  line-height: 1.5;
  transition: background .35s ease, color .35s ease;
  padding-top: var(--header-height); /* space for fixed header */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.dark-mode {
  background: var(--bg-dark);
  color: var(--text-dark);
}

/* ======== FIXED HEADER ======== */
.main-header {
  position: fixed;
  top: 0; left: 0; width: 100%;
  height: var(--header-height);
  display: flex; align-items: center;
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  background: var(--glass-light);
  border-bottom: 1px solid var(--border-light);
  z-index: 1100;
  transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
body.dark-mode .main-header {
  background: var(--glass-dark);
  border-bottom: 1px solid var(--border-dark);
}

/* container inside header */
.header-container {
  width: 100%; max-width: 1200px; margin: 0 auto; padding: 10px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}

/* logo area */
.logo-area {
  display: flex; align-items: center; gap: 10px;
}
.logo-small {
  width: 60x; height: 60px; object-fit: contain;
  transition: filter 0.3s ease;
}
body.dark-mode .logo-small {
  filter: brightness(1.4); /* make logo pop on dark background */
}
.brand-name {
  font-weight: 700; color: var(--primary); font-size: 1.1rem; letter-spacing: .2px;
}
body.dark-mode .brand-name {
  color: var(--secondary);
}

/* nav area */
.nav {
  position: relative;
  display: flex;
  align-items: center;
  background: transparent !important;
  z-index: 12000;
}
.nav ul {
  display: flex;
  gap: 18px;
  list-style: none;
  align-items: center;
}
.nav a {
  color: var(--primary); text-decoration: none; font-weight: 600;
  padding: 6px 12px; border-radius: 14px; transition: all .2s ease;
}
.nav a:hover, .nav .active a {
  background: rgba(137,4,6,0.12);
  color: var(--primary);
}
body.dark-mode .nav a {
  color: var(--secondary);
}
body.dark-mode .nav a:hover, 
body.dark-mode .nav .active a {
  background: rgba(254,247,104,0.12);
  color: var(--secondary);
}

/* hamburger (mobile) */
.nav-toggle {
  display: none;
  background: transparent; border: 0;
  font-size: 1.25rem; cursor: pointer;
  color: var(--primary);
  z-index: 13000;
}
body.dark-mode .nav-toggle { color: var(--secondary); }

/* theme toggle button */
.theme-toggle {
  background: var(--glass-light);
  border: 1px solid var(--border-light);
  padding: 8px 10px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.15rem;
  color: var(--primary);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  transition: transform .12s ease, background .2s, color .2s;
}
.theme-toggle:hover { transform: scale(1.06); }
body.dark-mode .theme-toggle {
  background: var(--glass-dark);
  color: var(--secondary);
  border-color: var(--border-dark);
}

/* ======== HERO ======== */
.hero {
  min-height: calc(50vh - var(--header-height));
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  padding: 20px;
  margin: 0;
}
.hero .overlay {
  width: 100%; max-width: 520px; padding: 28px;
  border-radius: 22px;
  background: var(--glass-light);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border-light);
  text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
body.dark-mode .hero .overlay {
  background: var(--glass-dark);
  border: 1px solid var(--border-dark);
}
.logo-full { width: 240px; margin-bottom: 10px; }
.hero h1 {
  font-size: 2.2rem;
  color: var(--primary);
  margin-bottom: 6px;
}
body.dark-mode .hero h1 { color: var(--secondary); }


/* ======== SECTIONS ======== */
.section-title {
  font-size: 1.6rem;
  text-align: center;
  margin: 28px 0 18px;
  color: var(--primary);
  font-weight: 700;
}
body.dark-mode .section-title { color: var(--secondary); }

/* cards */
.card-container {
  display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;
  padding: 20px;
}
.card {
  width: 100%; max-width: 280px; padding: 18px;
  border-radius: 20px;
  background: var(--glass-light);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  border: 1px solid var(--border-light);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  text-align: center;
  transition: transform .25s ease, box-shadow .25s ease;
}
body.dark-mode .card {
  background: var(--glass-dark);
  border: 1px solid var(--border-dark);
}
.card img { width: 100%; border-radius: 12px; margin-bottom: 12px; }
.card h3 {
  color: var(--primary);
  margin-bottom: 10px;
  font-size: 1.1rem;
}
body.dark-mode .card h3 { color: var(--secondary); }
.card p { color: var(--text-light); margin-bottom: 14px; }
body.dark-mode .card p { color: var(--text-dark); }
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

/* buttons */
.ios-button {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 999px;
  border: 0;
  background: var(--primary);
  color: var(--secondary);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(137,4,6,0.25);
  transition: transform .12s ease, background .12s;
}
.ios-button:hover {
  transform: translateY(-2px);
  background: #6b0305;
  color: #fff;
}
body.dark-mode .ios-button {
  background: var(--secondary);
  color: var(--primary);
}
body.dark-mode .ios-button:hover {
  background: #fff27a;
  color: var(--primary);
}

/* ABOUT, MAP, FOOTER */
.about {
  max-width: 880px;
  margin: 32px auto;
  padding: 0 20px;
  color: var(--text-light);
}
body.dark-mode .about { color: var(--text-dark); }

.map iframe {
  width: 100%;
  padding: 5px;
  border-radius: 14px;
  border: 2px solid var(--primary);
  box-shadow: 0 8px 20px rgba(0,0,0,.12);
}
body.dark-mode .map iframe {
  border-color: var(--secondary);
}

footer {
  margin-top: 40px;
  padding: 22px;
  text-align: center;
  background: var(--glass-light);
  border-top: 1px solid var(--border-light);
}
body.dark-mode footer {
  background: var(--glass-dark);
  border-top: 1px solid var(--border-dark);
}
footer p { color: var(--primary); }
body.dark-mode footer p { color: var(--secondary); }
footer a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}
body.dark-mode footer a { color: var(--secondary); }
footer .socials img {
  width: 26px;
  filter: brightness(0);
  opacity: .85;
}
body.dark-mode footer .socials img { filter: brightness(1.5); }

html { scroll-behavior: smooth; }

/* ======== MOBILE MENU ======== */
@media (max-width: 768px) {
  .nav ul {
    position: fixed;
    top: calc(var(--header-height) + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    flex-direction: column;
    min-width: 220px;
    padding: 16px;
    border-radius: 22px;
    text-align: center;

    /* Real frosted glass effect */
    background: rgba(255, 255, 255, 0.90); /* must be semi-transparent */
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    background-clip: padding-box;

    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.25);

    z-index: 12000; /* above header */
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s cubic-bezier(.2, .9, .2, 1), opacity 0.18s ease;
  }

  /* Open state */
  .nav.open ul {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
  }

  /* Dark Mode Frosted Glass */
  body.dark-mode .nav ul {
    background: rgba(0, 0, 0, 0.90);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55);
  }

  /* Hamburger Button */
  .nav-toggle {
    display: block;
    margin-right: 10px;
    cursor: pointer;
  }

  /* Nav Links */
  .nav ul li a {
    display: block;
    padding: 12px;
    color: var(--primary);
    font-weight: 600;
    border-radius: 12px;
    transition: background 0.2s ease, color 0.2s ease;
  }

  /* Hover effect */
  .nav ul li a:hover {
    background: rgba(137, 4, 6, 0.12);
    color: var(--primary);
  }

  /* Dark Mode Hover */
  body.dark-mode .nav ul li a:hover {
    background: rgba(254, 247, 104, 0.12);
    color: var(--secondary);
  }
}

.app-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  padding: 12px 20px;
  margin: 10px 0;
  border-radius: 30px;
  font-size: 16px;
  transition: 0.3s ease;
}

.app-button img,
.app-button i {
  width: 22px;
  height: 22px;
  font-size: 20px;
}

/* Platform Colors */
.whatsapp { background: #25D366; }
.instagram { background: #E4405F; }
.tiktok { background: #000000; }
.gofood { background: #D32F2F; }
.grabfood { background: #00B14F; }
.shopeefood { background: #FF5722; }

/* Hover Effect */
.app-button:hover {
  opacity: 0.9;
  transform: scale(1.05);
}
.tiktok {
  background: #000000;
  border: 1px solid #444;
}

.tiktok:hover {
  border-color: #ff0050; /* TikTok pink */
  box-shadow: 0 0 6px #00f2ea, 0 0 6px #ff0050; /* blue + pink glow */
}