/* Extracted from inline <style> in index.html for CSP hardening */

@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  src: url("../webfonts/poppins-v24-latin-regular.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 700;
  src: url("../webfonts/roboto-v51-latin-700.woff2") format("woff2");
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  font-style: normal;
  font-weight: 900;
  src: url("../webfonts/roboto-v51-latin-900.woff2") format("woff2");
  font-display: swap;
}

/* Footer spacing compaction */
footer {
  padding: 32px 20px 24px !important;
}

.footer-logo {
  margin-bottom: 10px !important;
}

.footer-content h3 {
  margin: 0 0 8px !important;
  line-height: 1.25;
}

.footer-content .footer-info {
  margin: 7px 0 !important;
  line-height: 1.45;
}

.footer-content p:last-child {
  margin-top: 10px !important;
}

/* About page header cleanup */
.about-section .section-title > span {
  display: none !important;
}

.about-section .section-title > p {
  color: #1d2f8f !important;
  font-weight: 700 !important;
}

.about-section .section-title > p a {
  color: inherit !important;
  font-weight: inherit !important;
}
/* block 1 */
html,
      body {
        margin: 0;
        padding: 0;
      }
      body {
        line-height: 1.6;
        color: #121212;
        background: #fff;
        font-family: "Poppins", Arial, Helvetica, sans-serif;
      }
      h1,
      h2,
      h3 {
        font-family: "Roboto", sans-serif;
        font-weight: 700;
      }
      .brand-name,
      .about-content h2,
      footer h3 {
        font-family: "Roboto", sans-serif;
        font-weight: 900;
      }
      #main-nav {
        position: sticky;
        top: 0;
        z-index: 99999;
        background: rgba(255, 255, 255, 0.35);
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
      }
      .nav-container {
        max-width: 1200px;
        margin: auto;
        padding: 0 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      .brand {
        display: flex;
        align-items: center;
        gap: 15px;
      }
      .brand-logo {
        width: 55px;
        aspect-ratio: 525 / 564;
        height: auto;
        display: block;
      }
      .hero {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        padding: 100px 20px;
        color: #fff;
        min-height: 85svh;
      }
      .hero-bg-image {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        z-index: 0;
      }
      .hero-overlay {
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(8, 12, 20, 0.5) 0%, rgba(8, 12, 20, 0.38) 100%);
        z-index: 1;
        pointer-events: none;
      }
      .hero-content {
        position: relative;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 500px;
        padding: 0 16px;
      }
      .hero-copy {
        max-width: 820px;
        background: rgba(0, 0, 0, 0.38);
        border: 1px solid rgba(255, 255, 255, 0.24);
        border-radius: 16px;
        padding: 28px 24px;
        backdrop-filter: blur(3px);
      }
      .hero-logo {
        width: 120px;
        aspect-ratio: 525 / 564;
        height: auto;
        display: block;
        margin-bottom: 20px;
      }
      .hero h1 {
        font-size: clamp(1.8rem, 5vw, 3.25rem);
        max-width: 900px;
        margin: 0 0 20px;
        line-height: 1.1;
        color: #ffffff;
      }
      .hero p {
        font-size: clamp(0.95rem, 2vw, 1.2rem);
        max-width: 600px;
        margin: 0 auto 26px;
        color: #ffffff;
      }
      .hero-cta {
        display: inline-block;
        background: #d6001c;
        color: #fff;
        text-decoration: none;
        font-weight: 700;
        padding: 12px 24px;
        border-radius: 8px;
      }
      .hero-cta:hover {
        background: #b70018;
      }
      @media (max-width: 768px) {
        .hero {
          min-height: 72svh;
          padding: 100px 15px 50px;
        }
        .hero-content {
          min-height: 440px;
        }
        .hero-copy {
          width: 100%;
          padding: 20px 16px;
        }
        .hero h1 {
          font-size: clamp(1.5rem, 6vw, 2rem);
        }
        .hero p {
          font-size: clamp(0.9rem, 3.7vw, 1rem);
          margin-bottom: 20px;
        }
      }
      .sr-only {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
      }

/* block 2 */
#home.hero .hero-overlay {
        background: linear-gradient(120deg, rgba(4, 7, 13, 0.44) 0%, rgba(8, 12, 20, 0.28) 48%, rgba(8, 12, 20, 0.38) 100%);
      }
      #home.hero .hero-bg-image {
        filter: brightness(1.22) contrast(1.01) saturate(1.06);
      }
      #home.hero .hero-copy {
        max-width: 860px;
        background: linear-gradient(135deg, rgba(11, 15, 24, 0.22) 0%, rgba(9, 13, 20, 0.08) 100%);
        border: 1px solid rgba(255, 255, 255, 0.3);
        box-shadow: 0 16px 30px rgba(0, 0, 0, 0.16);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-radius: 22px;
      }
      #home.hero .hero-logo {
        width: clamp(98px, 14vw, 132px);
        margin: 0 auto 14px;
        filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.35));
      }
      #home.hero .hero-copy h1,
      #home.hero .hero-copy p {
        color: #ffffff;
        text-shadow: 0 4px 18px rgba(0, 0, 0, 0.58);
        opacity: 1;
        visibility: visible;
      }
      #home.hero .hero-copy h1 {
        font-size: clamp(2rem, 5.5vw, 3.35rem);
        font-weight: 900;
        margin-bottom: 16px;
      }
      #home.hero .hero-copy p {
        max-width: 700px;
        margin: 0 auto 22px;
      }
      #home.hero .hero-btns {
        display: flex;
        justify-content: center;
        gap: 12px;
        flex-wrap: nowrap;
        width: 100%;
        max-width: 460px;
        margin: 0 auto;
      }
      #home.hero .hero-btns .btn-primary,
      #home.hero .hero-btns .btn-outline {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 0;
        flex: 1 1 0;
        padding: 12px 18px;
        min-height: 48px;
        border-radius: 10px;
        text-decoration: none;
        font-weight: 700;
        letter-spacing: 0.2px;
        line-height: 1.2;
        white-space: nowrap;
        text-align: center;
        box-sizing: border-box;
        transition:
          transform 0.25s ease,
          background-color 0.25s ease,
          border-color 0.25s ease;
      }
      #home.hero .hero-btns .btn-primary {
        background: #d6001c;
        color: #ffffff;
        border: 2px solid #d6001c;
      }
      #home.hero .hero-btns .btn-primary:hover {
        background: #b70018;
        border-color: #b70018;
        transform: translateY(-2px);
      }
      #home.hero .hero-btns .btn-outline {
        color: #ffffff;
        border: 2px solid rgba(255, 255, 255, 0.92);
        background: rgba(255, 255, 255, 0.03);
      }
      #home.hero .hero-btns .btn-outline:hover,
      #home.hero .hero-btns .btn-outline:focus-visible,
      #home.hero .hero-btns .btn-outline:active {
        background: #25d366;
        border-color: #25d366;
        color: #ffffff;
        transform: translateY(-2px);
      }
      #home.hero .hero-hours {
        margin-top: 24px;
        max-width: 460px;
        width: 100%;
        min-height: 0;
      }
      #home.hero .hours-box {
        background: linear-gradient(145deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0.04) 100%);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 16px;
        padding: 14px 16px;
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
      }
      #home.hero .hours-box h3 {
        margin: 0 0 8px;
        color: #ff1a1a;
        font-size: 1.14rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }
      #home.hero .hours-box h3 .hours-title-icon {
        font-size: 0.95em;
        color: #ff1a1a;
      }
      #home.hero .hours-box p {
        margin: 0 0 3px;
        font-size: 0.95rem;
        line-height: 1.25;
        font-weight: 700;
      }
      #home.hero .hours-box .hours-lines {
        width: fit-content;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
      }
      #home.hero .hours-box .hours-line {
        color: #ffffff;
        margin: 0;
        display: grid;
        grid-template-columns: auto clamp(96px, 31vw, 118px) auto auto;
        align-items: baseline;
        column-gap: 4px;
        text-align: left;
      }
      #home.hero .hours-box .hours-line::before {
        content: "-";
        display: block;
      }
      #home.hero .hours-box .hours-line .hours-label,
      #home.hero .hours-box .hours-line .hours-sep,
      #home.hero .hours-box .hours-line .hours-value {
        display: block;
      }
      #home.hero .hours-box .hours-line .hours-sep {
        text-align: center;
        width: 1ch;
      }
      #home.hero .hours-box .hours-line .hours-value {
        white-space: nowrap;
        padding-left: 1px;
      }
      #home.hero #tanggal-hari {
        margin-top: 6px;
        min-height: 1.25em;
        color: #39ff14;
        font-size: 0.98rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
      }
      #home.hero #tanggal-hari::before {
        content: "\f073";
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        font-size: 0.9em;
        color: #39ff14;
      }
      #main-nav {
        padding: 12px 0 !important;
        transition:
          background-color 0.25s ease,
          box-shadow 0.25s ease !important;
      }
      #main-nav.navbar-scrolled {
        padding: 12px 0 !important;
        background-color: rgba(255, 255, 255, 0.68) !important;
      }
      @media (max-width: 768px) {
        #home.hero {
          min-height: auto;
          padding: 84px 16px 34px;
        }
        #home.hero .hero-content {
          min-height: auto !important;
          height: auto;
          padding: 0 4px;
        }
        #home.hero .hero-copy {
          width: 100%;
          height: auto;
          min-height: 0;
          padding: 22px 18px;
          margin-top: -14px;
          border-radius: 18px;
          overflow: visible;
        }
        #home.hero .hero-copy h1 {
          font-size: clamp(1.56rem, 6.5vw, 2.2rem);
          line-height: 1.2;
        }
        #home.hero .hero-copy > p {
          font-size: 0.95rem;
          margin-bottom: 18px;
        }
        #home.hero .hours-box h3 {
          font-size: 1.08rem;
          gap: 6px;
        }
        #home.hero .hours-box p {
          margin: 0 0 2px;
          font-size: 0.88rem;
          line-height: 1.2;
        }
        #home.hero #tanggal-hari {
          margin-top: 4px;
          min-height: 1.15em;
          font-size: 0.92rem;
          line-height: 1.15;
        }
        #home.hero .hero-btns {
          display: flex !important;
          flex-direction: column !important;
          align-items: stretch !important;
          width: 100% !important;
          max-width: 100% !important;
          gap: 12px !important;
        }
        #home.hero .hero-btns .btn-primary,
        #home.hero .hero-btns .btn-outline {
          width: 100% !important;
          max-width: 100% !important;
          min-width: 0 !important;
          flex: 0 0 auto !important;
          min-height: 46px !important;
          font-size: clamp(0.9rem, 3.8vw, 0.96rem);
          padding: 11px 16px !important;
          line-height: 1.2;
          white-space: nowrap !important;
        }
        #home.hero .hero-btns .btn-primary {
          margin-bottom: 0;
        }
        #home.hero .hero-hours {
          margin-top: 22px;
          min-height: 0;
        }
      }
      @media (max-width: 420px) {
        #home.hero {
          padding: 78px 12px 32px;
        }
        #home.hero .hero-copy {
          margin-top: -16px;
        }
        #home.hero .hero-btns .btn-primary,
        #home.hero .hero-btns .btn-outline {
          font-size: 0.88rem;
          min-height: 44px !important;
          padding: 10px 14px !important;
        }
        #home.hero .hours-box {
          padding: 12px 13px;
        }
        #home.hero .hours-box h3 {
          font-size: 1.02rem;
          gap: 5px;
        }
        #home.hero .hours-box p {
          font-size: 0.84rem;
          margin: 0 0 1px;
          line-height: 1.18;
        }
        #home.hero #tanggal-hari {
          margin-top: 3px;
          font-size: 0.89rem;
        }
      }
      .catalog-wa-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
      }
      .catalog-wa-btn .wa-icon {
        color: #25d366;
        font-size: 1.05rem;
        line-height: 1;
      }

      .running-wrapper {
        background: #1d2f8f !important;
      }
      .running-track {
        animation: scroll-left 24s linear infinite;
        will-change: transform;
        transform: translate3d(0, 0, 0);
        backface-visibility: hidden;
      }
      .running-text {
        color: #ffffff;
        text-shadow: none;
        text-rendering: geometricPrecision;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }


/* CSP hardening replacements for previous inline style attributes */
.instagram-link {
  background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
  color: #ffffff !important;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 8px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.map-embed {
  border: 0;
}