/* =========================================================
   V76.48 - HEADER DAN ISI HALAMAN PUBLIK SERAGAM
   ========================================================= */

:root{
  --public-page-width-v7647:calc(100% - clamp(36px,4vw,76px));
}

body:not(.app-body) .site-header{
  width:100%;
}

body:not(.app-body) .site-header > .public-header-full-v7646{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding-left:clamp(18px,2vw,34px) !important;
  padding-right:clamp(18px,2vw,34px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:22px !important;
  box-sizing:border-box !important;
}

body:not(.app-body) .site-header .public-header-full-v7646 .brand{
  flex:1 1 auto;
  justify-content:flex-start !important;
  max-width:min(820px,52vw) !important;
  margin:0 !important;
}

body:not(.app-body) .site-header .public-header-full-v7646 .brand > div{
  min-width:0;
}

body:not(.app-body) .site-header .public-header-full-v7646 .brand-title,
body:not(.app-body) .site-header .public-header-full-v7646 .brand-sub{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

body:not(.app-body) .site-header .public-header-full-v7646 .public-nav{
  margin-left:auto !important;
  flex:0 0 auto;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:clamp(16px,1.8vw,30px) !important;
}

body:not(.app-body) .site-header .public-header-full-v7646 .mobile-menu-btn{
  margin-left:auto !important;
  flex:0 0 auto;
}

@media(min-width:1181px){
  body:not(.app-body) .hero-home-slider-v2 .hero-inner-slider-v2,
  body:not(.app-body) .hero-home-slider-v2 .hero-inner,
  body:not(.app-body) .container:not(.site-header-inner),
  body:not(.app-body) .page-hero .container,
  body:not(.app-body) .public-form-grid,
  body:not(.app-body) .success-card,
  body:not(.app-body) .catalog-layout,
  body:not(.app-body) .catalog-layout-v21,
  body:not(.app-body) .gallery-layout,
  body:not(.app-body) .about-ekskul-section,
  body:not(.app-body) .value-strip,
  body:not(.app-body) .footer .container,
  body:not(.app-body) .copyright{
    width:var(--public-page-width-v7647) !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:0 !important;
    padding-right:0 !important;
    box-sizing:border-box !important;
  }

  body:not(.app-body) .hero-home-slider-v2 .hero-inner-slider-v2,
  body:not(.app-body) .hero-home-slider-v2 .hero-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    text-align:left !important;
  }

  body:not(.app-body) .hero-home-slider-v2 .hero-copy{
    width:min(760px,42vw) !important;
    max-width:760px !important;
    margin:0 !important;
    padding:70px 0 88px !important;
    text-align:left !important;
  }

  body:not(.app-body) .hero-home-slider-v2 .hero-copy .tag{
    margin-left:0 !important;
    margin-right:auto !important;
  }

  body:not(.app-body) .hero-home-slider-v2 .leaf-line{
    margin-left:0 !important;
    margin-right:0 !important;
  }

  body:not(.app-body) .hero-home-slider-v2 .hero-actions{
    justify-content:flex-start !important;
  }

  body:not(.app-body) .about-ekskul-section,
  body:not(.app-body) .home-calendar-section-v75{
    padding-left:0 !important;
    padding-right:0 !important;
  }

  body:not(.app-body) .about-ekskul-content,
  body:not(.app-body) .about-ekskul-content p,
  body:not(.app-body) .about-ekskul-note{
    width:100% !important;
    max-width:none !important;
  }

  body:not(.app-body) .period-public-v58{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:22px !important;
    min-height:88px !important;
    padding:22px 28px !important;
    margin-top:24px !important;
    margin-bottom:28px !important;
    border-radius:22px !important;
    background:linear-gradient(135deg,#ffffff,#f8fbff) !important;
    border:1px solid rgba(37,99,235,.16) !important;
    box-shadow:0 18px 46px rgba(15,39,71,.08) !important;
  }

  body:not(.app-body) .period-public-v58 > div{
    min-width:0 !important;
    display:grid !important;
    gap:5px !important;
  }

  body:not(.app-body) .period-public-v58 span:first-child{
    margin:0 !important;
    color:#64748b !important;
    font-size:13px !important;
    line-height:1.25 !important;
    letter-spacing:.02em !important;
    text-transform:none !important;
  }

  body:not(.app-body) .period-public-v58 b{
    color:#0b2f6f !important;
    font-size:clamp(18px,1.25vw,23px) !important;
    line-height:1.25 !important;
  }

  body:not(.app-body) .period-public-v58 .period-chip-v58{
    min-height:42px !important;
    padding:0 22px !important;
    justify-self:end !important;
    align-self:center !important;
    font-size:14px !important;
    box-shadow:none !important;
  }
}

@media(max-width:1180px){
  body:not(.app-body) .site-header > .public-header-full-v7646{
    min-height:82px !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }

  body:not(.app-body) .site-header .public-header-full-v7646 .brand{
    max-width:calc(100% - 84px) !important;
  }

  body:not(.app-body) .site-header .public-header-full-v7646 .public-nav{
    display:none !important;
  }

  body:not(.app-body) .period-public-v58{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:14px !important;
    padding:18px 20px !important;
    border-radius:20px !important;
  }

  body:not(.app-body) .period-public-v58 .period-chip-v58{
    justify-self:end !important;
  }
}

@media(max-width:640px){
  body:not(.app-body) .site-header > .public-header-full-v7646{
    min-height:76px !important;
    padding-left:12px !important;
    padding-right:12px !important;
    gap:10px !important;
  }

  body:not(.app-body) .site-header .public-header-full-v7646 .brand{
    gap:9px !important;
    max-width:calc(100% - 58px) !important;
  }

  body:not(.app-body) .period-public-v58{
    grid-template-columns:1fr !important;
  }

  body:not(.app-body) .period-public-v58 .period-chip-v58{
    justify-self:start !important;
  }
}