/* ============================================================
   BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body, #wrap {
  width: 100%; height: 100%;
  background: #111;
  overflow: hidden;
  font-family: 'Bahnschrift','DIN Next','Arial Narrow',Arial,sans-serif;
}

* {
  font-weight: normal !important;
  font-style:  normal !important;
  text-decoration: none !important;
}

/* ============================================================
   WRAP
   ============================================================ */
#wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
}

/* ============================================================
   LOGO
   ============================================================ */
#logo-wrap {
  position: absolute;
  z-index: 10;
  pointer-events: none;
}

#logo-gif {
  width: 100%;
  height: auto;
  display: block;
}

/* ============================================================
   SVG
   ============================================================ */
#main-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

/* ============================================================
   BALKEN
   ============================================================ */
.bar       { cursor: pointer; }
.bar-label { pointer-events: none; user-select: none; }

/* ============================================================
   EXPAND OVERLAY
   ============================================================ */
#expand-overlay {
  position: fixed;
  pointer-events: none;
  z-index: 200;
  border-radius: 50%;
  transform: scale(0);
}

/* ============================================================
   DESKTOP UI TEXTE
   ============================================================ */
#desktop-ui text { cursor: pointer; }

/* ============================================================
   MOBILE UI
   ============================================================ */
#mobile-ui {
  display: none;
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 20;
}

/* Hamburger Button */
#hamburger-btn {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: rgba(17,17,17,0.85);
  border: 1px solid #A3C2C7;
  border-radius: 4px;
  cursor: pointer;
  pointer-events: all;
  z-index: 30;
}

#hamburger-btn span {
  display: block;
  width: 22px; height: 2px;
  background: #A3C2C7;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

#hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#hamburger-btn.open span:nth-child(2) { opacity: 0; }
#hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Hamburger Menu */
#hamburger-menu {
  position: absolute;
  left: 0;
  background: rgba(17,17,17,0.97);
  border-right: 1px solid #A3C2C7;
  border-bottom: 1px solid #A3C2C7;
  display: flex;
  flex-direction: column;
  pointer-events: all;
  transform: translateX(-110%);
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1);
  z-index: 25;
  min-width: 200px;
}

#hamburger-menu.open      { transform: translateX(0); }
#hamburger-menu a         { padding: 14px 20px; font-size: 16px;
                            color: #A3C2C7;
                            border-bottom: 1px solid rgba(163,194,199,0.2); }
#hamburger-menu a:last-child { border-bottom: none; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  #mobile-ui  { display: block; }
}