/* =========================================
   OW HEADER — CSS
   Dipisah dari kode header custom Oka Witantra
   Dimuat lewat functions.php child theme Kadence
========================================== */

.ow-header-scope,
.ow-header-scope * {
  box-sizing: border-box;
}

.ow-header-scope {
  --ow-ink: #172B3A;
  --ow-ink-soft: #243B4D;
  --ow-teal: #00AEA5;
  --ow-teal-dark: #008F88;
  --ow-white: #FFFFFF;
  --ow-paper: #F5F7F7;
  --ow-muted: #71808A;
  --ow-line: rgba(23,43,58,.13);
  --ow-dark-line: rgba(255,255,255,.13);

  position: relative;
  z-index: 99990;

  width: 100%;
  max-width: 100%;

  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
}


/* =========================================
   HEADER
========================================== */

.ow-header {
  position: absolute;
  top: 0;
  left: 0;

  width: 100%;
  height: 92px;

  z-index: 99990;

  background: rgba(255,255,255,0);
  border-bottom: 1px solid transparent;

  transition:
    height .55s cubic-bezier(.22,1,.36,1),
    background .55s ease,
    border-color .55s ease,
    box-shadow .55s ease;
}


.ow-header.is-scrolled {
  height: 76px;

  background:
    rgba(255,255,255,.88);

  border-bottom-color:
    rgba(23,43,58,.08);

  box-shadow:
    0 10px 40px rgba(23,43,58,.06);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}


.ow-header-inner {
  width: min(1440px, calc(100% - 72px));
  height: 100%;

  margin: 0 auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 40px;
}


/* =========================================
   LOGO
========================================== */

.ow-logo {
  display: inline-flex;
  align-items: center;

  justify-self: start;

  text-decoration: none !important;

  position: relative;
  z-index: 5;

  margin: 0;
  padding: 0;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


.ow-logo-image-wrap {
  display: flex;
  align-items: center;

  width: auto;
  height: auto;

  margin: 0;
  padding: 0;

  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


.ow-logo-image {
  display: block;

  width: 190px;
  max-width: 190px;
  height: auto;

  max-height: 48px;

  object-fit: contain;

  margin: 0;
  padding: 0;

  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}


/* =========================================
   ACTIONS
========================================== */

.ow-header-actions {
  display: flex;

  justify-content: flex-end;
  align-items: center;

  gap: 18px;

  margin: 0;
  padding: 0;
}


/* =========================================
   LANGUAGE SWITCHER (EN / ID)
========================================== */

.ow-lang-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;

  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 4px;

  width: auto;
  height: 38px;

  padding: 0 10px !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 999px !important;

  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;

  cursor: pointer;

  color: var(--ow-ink);

  transition: background .2s ease, color .2s ease;
}

.ow-lang-trigger:hover,
.ow-lang-trigger:focus,
.ow-lang-trigger:active,
.ow-lang-trigger:focus-visible {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: rgba(0,174,165,.08) !important;
  background-color: rgba(0,174,165,.08) !important;

  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;

  color: var(--ow-teal-dark);
}

.ow-lang-globe {
  position: relative;

  width: 15px;
  height: 15px;

  border: 1.5px solid currentColor;
  border-radius: 50%;

  flex: 0 0 auto;
}

.ow-lang-globe::before,
.ow-lang-globe::after {
  content: "";
  position: absolute;
  border: 1.5px solid currentColor;
  border-radius: 50%;
}

.ow-lang-globe::before {
  top: 0;
  bottom: 0;
  left: 5px;
  right: 5px;
  border-top: 0;
  border-bottom: 0;
}

.ow-lang-globe::after {
  top: 50%;
  left: -1.5px;
  right: -1.5px;
  height: 0;
  border-left: 0;
  border-right: 0;
  transform: translateY(-50%);
}

.ow-lang-code {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  line-height: 1;
}


/* =========================================
   SEARCH
========================================== */

.ow-search-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;

  width: 38px;
  height: 38px;

  min-width: 38px;
  min-height: 38px;

  padding: 0 !important;
  margin: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;

  display: grid !important;
  place-items: center;

  cursor: pointer;

  color: var(--ow-ink);
}


.ow-search-trigger:hover,
.ow-search-trigger:focus,
.ow-search-trigger:active,
.ow-search-trigger:focus-visible {
  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  outline: none !important;
}


.ow-search-icon {
  position: relative;

  width: 15px;
  height: 15px;

  border:
    1.5px solid var(--ow-ink);

  border-radius: 50%;

  transition:
    transform .35s ease,
    border-color .3s ease;
}


.ow-search-icon::after {
  content: "";

  position: absolute;

  width: 6px;
  height: 1.5px;

  right: -5px;
  bottom: -2px;

  background: var(--ow-ink);

  transform: rotate(45deg);

  transform-origin: left center;
}


.ow-search-trigger:hover .ow-search-icon {
  transform:
    rotate(-15deg)
    scale(1.08);

  border-color:
    var(--ow-teal);
}


.ow-search-trigger:hover
.ow-search-icon::after {
  background:
    var(--ow-teal);
}


/* =========================================
   MENU TRIGGER
========================================== */

.ow-menu-trigger {
  appearance: none !important;
  -webkit-appearance: none !important;

  position: relative;

  width: 58px;
  height: 58px;

  min-width: 58px;
  min-height: 58px;

  margin: 0 !important;
  padding: 0 !important;

  border: 0 !important;
  border-radius: 50% !important;

  background: transparent !important;
  background-color: transparent !important;

  box-shadow: none !important;

  outline: none !important;

  cursor: pointer;

  display: grid !important;
  place-items: center;

  color: var(--ow-ink);

  font: inherit;

  isolation: isolate;
}


.ow-menu-trigger:hover,
.ow-menu-trigger:focus,
.ow-menu-trigger:active,
.ow-menu-trigger:focus-visible {
  appearance: none !important;
  -webkit-appearance: none !important;

  background: transparent !important;
  background-color: transparent !important;

  border: 0 !important;

  box-shadow: none !important;

  outline: none !important;
}


/* =========================================
   CORE
========================================== */

.ow-trigger-core {
  position: relative;
  z-index: 3;

  width: 46px;
  height: 46px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid var(--ow-teal);

  border-radius: 50%;

  background: transparent !important;
  background-color: transparent !important;

  transition:
    background .45s ease,
    transform .55s cubic-bezier(.22,1,.36,1);
}


.ow-menu-trigger:hover
.ow-trigger-core {
  transform: scale(1.06);

  background:
    rgba(0,174,165,.10) !important;
}


.ow-trigger-lines {
  width: 17px;

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.ow-trigger-lines i {
  display: block;

  width: 100%;
  height: 1.5px;

  background:
    var(--ow-ink);

  transform-origin: center;

  transition:
    transform .45s cubic-bezier(.22,1,.36,1),
    background .3s ease,
    opacity .25s ease;
}


.ow-trigger-lines i:nth-child(2) {
  width: 12px;

  margin-left: auto;
}


.ow-menu-trigger:hover
.ow-trigger-lines i {
  background:
    var(--ow-teal);
}


/* =========================================
   ORBIT RINGS
========================================== */

.ow-trigger-ring {
  position: absolute;

  border:
    1px solid var(--ow-teal);

  border-radius: 50%;

  pointer-events: none;

  opacity: .65;
}


.ow-ring-1 {
  width: 53px;
  height: 53px;

  border-top-color: transparent;

  animation:
    owOrbit 8s linear infinite;
}


.ow-ring-2 {
  width: 59px;
  height: 59px;

  border-right-color: transparent;
  border-bottom-color: transparent;

  opacity: .25;

  animation:
    owOrbitReverse 11s linear infinite;
}


@keyframes owOrbit {

  to {
    transform:
      rotate(360deg);
  }

}


@keyframes owOrbitReverse {

  to {
    transform:
      rotate(-360deg);
  }

}


/* =========================================
   OPEN
========================================== */

.ow-menu-trigger.is-open
.ow-trigger-core {
  background:
    var(--ow-teal) !important;

  transform:
    rotate(90deg);
}


.ow-menu-trigger.is-open
.ow-trigger-lines i {
  background:
    var(--ow-white);
}


.ow-menu-trigger.is-open
.ow-trigger-lines i:nth-child(1) {
  transform:
    translateY(5.5px)
    rotate(45deg);
}


.ow-menu-trigger.is-open
.ow-trigger-lines i:nth-child(2) {
  opacity: 0;

  transform:
    scaleX(0);
}


.ow-menu-trigger.is-open
.ow-trigger-lines i:nth-child(3) {
  transform:
    translateY(-5.5px)
    rotate(-45deg);
}


/* =========================================
   SCROLL
========================================== */

.ow-scroll-progress {
  position: absolute;

  left: 0;
  bottom: -1px;

  width: 100%;
  height: 1px;

  pointer-events: none;
}


.ow-scroll-progress span {
  display: block;

  width: 0;
  height: 100%;

  background:
    var(--ow-teal);
}


/* =========================================
   SEARCH PANEL
========================================== */

.ow-search-panel {
  position: fixed;

  top: 0;
  left: 0;

  width: 100%;
  height: 0;

  overflow: hidden;

  z-index: 99980;

  background:
    rgba(245,247,247,.97);

  transition:
    height .65s cubic-bezier(.22,1,.36,1);
}


.ow-search-panel.is-open {
  height: 280px;
}


.ow-search-inner {
  width:
    min(1000px, calc(100% - 72px));

  margin: 0 auto;

  padding-top: 145px;
}


.ow-search-eyebrow,
.ow-panel-eyebrow {
  display: flex;

  align-items: center;

  gap: 9px;

  font-size: 9px;

  font-weight: 850;

  letter-spacing: .20em;

  text-transform: uppercase;

  color:
    var(--ow-teal-dark);
}


.ow-search-eyebrow span,
.ow-panel-eyebrow span {
  width: 25px;
  height: 2px;

  background:
    var(--ow-teal);
}


.ow-search-form {
  margin-top: 22px;

  display: flex;

  border-bottom:
    1px solid var(--ow-ink);
}


.ow-search-form input {
  flex: 1;

  min-width: 0;

  padding:
    12px 0 15px;

  border: 0 !important;

  outline: 0 !important;

  background:
    transparent !important;

  color:
    var(--ow-ink);

  font-family: inherit;

  font-size:
    clamp(22px, 3vw, 38px);

  font-weight: 600;

  letter-spacing: -.04em;
}


.ow-search-form input::placeholder {
  color:
    rgba(23,43,58,.30);
}


.ow-search-form button {
  appearance: none !important;

  border: 0 !important;

  background:
    transparent !important;

  box-shadow: none !important;

  display: flex;

  align-items: center;

  gap: 10px;

  color:
    var(--ow-ink);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .18em;

  cursor: pointer;
}


.ow-search-form button b {
  color:
    var(--ow-teal);

  font-size: 20px;

  font-weight: 400;
}


/* =========================================
   BACKDROP
========================================== */

.ow-offcanvas-backdrop {
  position: fixed;

  inset: 0;

  z-index: 99991;

  background:
    rgba(10,25,35,.45);

  opacity: 0;

  visibility: hidden;

  pointer-events: none;

  backdrop-filter:
    blur(0);

  -webkit-backdrop-filter:
    blur(0);

  transition:
    opacity .55s ease,
    visibility .55s ease,
    backdrop-filter .55s ease;
}


.ow-offcanvas-backdrop.is-open {
  opacity: 1;

  visibility: visible;

  pointer-events: auto;

  backdrop-filter:
    blur(7px);

  -webkit-backdrop-filter:
    blur(7px);
}


/* =========================================
   OFF CANVAS
========================================== */

.ow-offcanvas {
  position: fixed;

  top: 0;
  right: 0;

  width:
    min(820px, 92vw);

  height: 100dvh;

  z-index: 99992;

  display: flex;

  flex-direction: column;

  background:
    linear-gradient(
      125deg,
      #102A3B 0%,
      #142F42 58%,
      #0C2535 100%
    );

  color:
    var(--ow-white) !important;

  transform:
    translateX(102%);

  transition:
    transform .8s cubic-bezier(.16,1,.3,1);

  overflow: hidden;

  box-shadow:
    -30px 0 90px
    rgba(0,0,0,.20);
}


.ow-offcanvas.is-open {
  transform:
    translateX(0);
}


.ow-offcanvas::before {
  content: "";

  position: absolute;

  inset: 0;

  background-image:
    linear-gradient(
      rgba(255,255,255,.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.025) 1px,
      transparent 1px
    );

  background-size:
    50px 50px;

  pointer-events: none;
}


/* =========================================
   PANEL TOP
========================================== */

.ow-panel-top {
  position: relative;

  z-index: 2;

  height: 105px;

  padding:
    0 48px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-bottom:
    1px solid
    var(--ow-dark-line);
}


.ow-panel-brand {
  display: flex;

  align-items: baseline;

  gap: 9px;
}


.ow-panel-brand span {
  font-size: 22px;

  font-weight: 850;

  letter-spacing: .18em;
}


.ow-panel-brand small {
  font-size: 9px;

  letter-spacing: .28em;

  opacity: .65;
}


/* =========================================
   CLOSE
========================================== */

.ow-close-trigger {
  appearance: none !important;

  position: relative;

  width: 52px;
  height: 52px;

  border:
    1px solid
    rgba(255,255,255,.25) !important;

  border-radius: 50% !important;

  background:
    transparent !important;

  box-shadow:
    none !important;

  padding: 0 !important;
  margin: 0 !important;

  cursor: pointer;

  transition:
    border-color .3s ease,
    transform .5s
    cubic-bezier(.22,1,.36,1);
}


.ow-close-trigger:hover {
  border-color:
    var(--ow-teal) !important;

  transform:
    rotate(90deg);
}


.ow-close-lines {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 18px;
  height: 18px;

  transform:
    translate(-50%,-50%);
}


.ow-close-lines i {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 20px;
  height: 1.5px;

  background:
    white;
}


.ow-close-lines i:first-child {
  transform:
    translate(-50%,-50%)
    rotate(45deg);
}


.ow-close-lines i:last-child {
  transform:
    translate(-50%,-50%)
    rotate(-45deg);
}


.ow-close-circle {
  position: absolute;

  inset: -6px;

  border:
    1px solid
    rgba(0,174,165,.45);

  border-radius: 50%;

  border-left-color:
    transparent;

  animation:
    owOrbit 7s linear infinite;
}


/* =========================================
   PANEL MAIN
========================================== */

.ow-panel-main {
  position: relative;

  z-index: 2;

  flex: 1;

  display: grid;

  grid-template-columns:
    minmax(0,1.1fr)
    minmax(250px,.9fr);

  min-height: 0;
}


.ow-panel-navigation {
  padding:
    5px 48px 30px;
}


/* =========================================
   PANEL NAVIGATION
========================================== */

.ow-panel-nav {
  margin-top: 10px;
}


.ow-panel-nav a {
  position: relative;

  display: grid;

  grid-template-columns:
    42px 1fr 25px;

  align-items: center;

  gap: 12px;

  min-height: 74px;

  border-bottom:
    1px solid
    var(--ow-dark-line);

  color:
    white !important;

  text-decoration: none !important;

  overflow: hidden;

  transition:
    padding-left .45s
    cubic-bezier(.22,1,.36,1);
}


.ow-panel-nav a::before {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 0;
  height: 2px;

  background:
    var(--ow-teal);

  transition:
    width .55s
    cubic-bezier(.22,1,.36,1);
}


.ow-panel-nav a:hover {
  padding-left: 13px;
}


.ow-panel-nav a:hover::before {
  width: 100%;
}


.ow-panel-number {
  font-size: 9px;

  font-weight: 700;

  letter-spacing: .12em;

  color:
    var(--ow-teal);
}


.ow-panel-title {
  display: block;

  font-size:
    clamp(14px, calc(3vw - 10px), 29px);

  line-height: 1;

  font-weight: 550;

  letter-spacing: -.045em;

  white-space: nowrap;

  transition:
    color .3s ease;
}


.ow-panel-nav a:hover
.ow-panel-title {
  color:
    var(--ow-teal);

  font-size:
    clamp(14px, calc(3vw - 10px), 29px);
}


.ow-panel-arrow {
  font-size: 20px;

  font-weight: 300;

  opacity: .4;

  transform:
    translate(-5px,5px);

  transition:
    opacity .3s ease,
    transform .4s
    cubic-bezier(.22,1,.36,1);
}


.ow-panel-nav a:hover
.ow-panel-arrow {
  opacity: 1;

  transform:
    translate(0,0);

  color:
    var(--ow-teal);
}


/* =========================================
   VISUAL
========================================== */

.ow-panel-visual {
  position: relative;

  overflow: hidden;

  border-left:
    1px solid
    var(--ow-dark-line);

  background:
    radial-gradient(
      circle at 50% 35%,
      rgba(0,174,165,.28),
      transparent 32%
    ),
    linear-gradient(
      145deg,
      rgba(0,174,165,.08),
      rgba(0,0,0,.10)
    );
}


.ow-panel-visual::after {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      140deg,
      transparent 20%,
      rgba(0,174,165,.07) 20.2%,
      transparent 20.5%
    );

  pointer-events: none;
}


.ow-panel-orbit {
  position: absolute;

  border:
    1px solid
    rgba(0,174,165,.25);

  border-radius: 50%;

  left: 50%;
  top: 43%;

  transform:
    translate(-50%,-50%);
}


.orbit-a {
  width: 360px;
  height: 360px;

  border-right-color:
    transparent;

  animation:
    owOrbit 18s linear infinite;
}


.orbit-b {
  width: 270px;
  height: 270px;

  border-left-color:
    transparent;

  animation:
    owOrbitReverse 13s linear infinite;
}


.orbit-c {
  width: 165px;
  height: 165px;

  border-bottom-color:
    transparent;

  animation:
    owOrbit 9s linear infinite;
}


.ow-panel-visual-number {
  position: absolute;

  right: 34px;
  top: 38px;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: .16em;

  color:
    var(--ow-teal);

  z-index: 6;
}


/* =========================================
   ANIMATED CHART
========================================== */

.ow-chart-header {
  position: absolute;

  top: 38px;
  left: 38px;
  right: 38px;

  z-index: 5;

  display: flex;

  align-items: center;

  justify-content: space-between;
}


.ow-chart-header span {
  font-size: 8px;

  font-weight: 800;

  letter-spacing: .18em;

  color:
    rgba(255,255,255,.45);
}


.ow-chart-header strong {
  font-size: 18px;

  font-weight: 600;

  letter-spacing: -.03em;

  color:
    var(--ow-teal);
}


.ow-chart {
  position: absolute;

  left: 30px;
  right: 30px;

  top: 105px;
  bottom: 75px;

  overflow: hidden;
}


.ow-chart-grid {
  position: absolute;

  inset: 0;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  opacity: .8;
}


.ow-chart-grid span {
  display: block;

  width: 100%;

  height: 1px;

  background:
    rgba(255,255,255,.07);
}


.ow-chart-svg {
  position: absolute;

  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}


.ow-chart-area {
  fill:
    rgba(0,174,165,.08);

  opacity: 0;

  animation:
    owChartArea 2s
    cubic-bezier(.22,1,.36,1)
    forwards;
}


.ow-chart-line {
  fill: none;

  stroke:
    var(--ow-teal);

  stroke-width: 2.2;

  stroke-linecap: round;

  stroke-linejoin: round;

  stroke-dasharray: 1000;

  stroke-dashoffset: 1000;

  animation:
    owChartDraw 2.4s
    cubic-bezier(.22,1,.36,1)
    forwards;
}


.ow-chart-point {
  fill:
    var(--ow-teal);

  opacity: 0;

  transform-box: fill-box;

  transform-origin: center;

  animation:
    owPointIn .45s
    cubic-bezier(.22,1,.36,1)
    forwards,
    owPointPulse 2.5s
    ease-in-out
    infinite;
}


.point-1 {
  animation-delay:
    1s,
    1.5s;
}


.point-2 {
  animation-delay:
    1.2s,
    1.7s;
}


.point-3 {
  animation-delay:
    1.4s,
    1.9s;
}


.point-4 {
  animation-delay:
    1.6s,
    2.1s;
}


.point-5 {
  animation-delay:
    1.8s,
    2.3s;
}


.point-6 {
  animation-delay:
    2s,
    2.5s;
}


.ow-chart-beam {
  position: absolute;

  top: 0;
  bottom: 0;

  left: -2px;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(0,174,165,.75),
      transparent
    );

  box-shadow:
    0 0 15px
    rgba(0,174,165,.45);

  animation:
    owChartBeam 4.5s
    cubic-bezier(.4,0,.2,1)
    infinite;
}


.ow-chart-value {
  position: absolute;

  right: 5%;
  top: 25%;

  z-index: 5;

  padding: 10px 13px;

  border:
    1px solid
    rgba(0,174,165,.25);

  background:
    rgba(10,35,45,.72);

  backdrop-filter:
    blur(10px);

  -webkit-backdrop-filter:
    blur(10px);

  animation:
    owChartFloat 3s
    ease-in-out
    infinite;
}


.ow-chart-value span {
  display: block;

  margin-bottom: 4px;

  font-size: 6px;

  font-weight: 800;

  letter-spacing: .16em;

  color:
    rgba(255,255,255,.40);
}


.ow-chart-value strong {
  font-size: 14px;

  font-weight: 650;

  color:
    white;
}


.ow-chart-footer {
  position: absolute;

  left: 30px;
  right: 30px;

  bottom: 38px;

  display: flex;

  justify-content: space-between;

  color:
    rgba(255,255,255,.25);

  font-size: 6px;

  font-weight: 700;

  letter-spacing: .14em;
}


/* =========================================
   HOTELIER MESSAGE
========================================== */

.ow-panel-visual-copy {
  position: absolute;

  left: 38px;
  bottom: 48px;

  z-index: 8;

  pointer-events: none;
}


.ow-panel-visual-copy span {
  display: block;

  margin-bottom: 14px;

  font-size: 8px;

  font-weight: 800;

  letter-spacing: .20em;

  color:
    rgba(255,255,255,.55);
}


.ow-panel-visual-copy strong {
  display: block;

  font-size:
    clamp(32px,4vw,56px);

  line-height: .88;

  letter-spacing: -.06em;

  font-weight: 750;

  color: var(--ow-white) !important;
}


.ow-panel-visual-copy em {
  color:
    var(--ow-teal) !important;

  font-style: normal;
}


@keyframes owChartDraw {

  to {
    stroke-dashoffset: 0;
  }

}


@keyframes owChartArea {

  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }

}


@keyframes owPointIn {

  from {
    opacity: 0;

    transform:
      scale(.2);
  }

  to {
    opacity: 1;

    transform:
      scale(1);
  }

}


@keyframes owPointPulse {

  0%,
  100% {
    filter:
      drop-shadow(
        0 0 0
        rgba(0,174,165,0)
      );
  }

  50% {
    filter:
      drop-shadow(
        0 0 7px
        rgba(0,174,165,.8)
      );
  }

}


@keyframes owChartBeam {

  0% {
    transform:
      translateX(0);

    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  92% {
    opacity: 1;
  }

  100% {
    transform:
      translateX(600px);

    opacity: 0;
  }

}


@keyframes owChartFloat {

  0%,
  100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(-8px);
  }

}


/* =========================================
   PANEL BOTTOM
========================================== */

.ow-panel-bottom {
  position: relative;

  z-index: 2;

  min-height: 92px;

  padding:
    20px 48px;

  display: flex;

  align-items: center;

  justify-content: flex-end;

  border-top:
    1px solid
    var(--ow-dark-line);
}


.ow-panel-meta {
  display: flex;

  gap: 25px;

  font-size: 7px;

  font-weight: 700;

  letter-spacing: .14em;

  color:
    rgba(255,255,255,.35);
}


/* =========================================
   PANEL ANIMATION
========================================== */

.ow-offcanvas.is-open
.ow-panel-top {
  animation:
    owPanelFade .65s .15s both;
}


.ow-offcanvas.is-open
.ow-panel-nav a:nth-child(1) {
  animation:
    owMenuItem .7s .24s
    cubic-bezier(.22,1,.36,1)
    both;
}


.ow-offcanvas.is-open
.ow-panel-nav a:nth-child(2) {
  animation:
    owMenuItem .7s .31s
    cubic-bezier(.22,1,.36,1)
    both;
}


.ow-offcanvas.is-open
.ow-panel-nav a:nth-child(3) {
  animation:
    owMenuItem .7s .38s
    cubic-bezier(.22,1,.36,1)
    both;
}


.ow-offcanvas.is-open
.ow-panel-nav a:nth-child(4) {
  animation:
    owMenuItem .7s .45s
    cubic-bezier(.22,1,.36,1)
    both;
}


.ow-offcanvas.is-open
.ow-panel-nav a:nth-child(5) {
  animation:
    owMenuItem .7s .52s
    cubic-bezier(.22,1,.36,1)
    both;
}


.ow-offcanvas.is-open
.ow-panel-visual {
  animation:
    owVisualIn .9s .15s
    cubic-bezier(.22,1,.36,1)
    both;
}


.ow-offcanvas.is-open
.ow-panel-bottom {
  animation:
    owPanelFade .65s .5s both;
}


@keyframes owPanelFade {

  from {
    opacity: 0;
    transform:
      translateY(12px);
  }

  to {
    opacity: 1;
    transform:
      translateY(0);
  }

}


@keyframes owMenuItem {

  from {
    opacity: 0;
    transform:
      translateX(-35px);
  }

  to {
    opacity: 1;
    transform:
      translateX(0);
  }

}


@keyframes owVisualIn {

  from {
    opacity: 0;
    transform:
      translateX(35px)
      scale(1.03);
  }

  to {
    opacity: 1;
    transform:
      translateX(0)
      scale(1);
  }

}


/* =========================================
   MOBILE
========================================== */

@media (max-width: 900px) {

  .ow-header {
    height: 76px;
  }


  .ow-header.is-scrolled {
    height: 70px;
  }


  .ow-header-inner {
    width:
      calc(100% - 34px);

    grid-template-columns:
      1fr auto;

    gap: 15px;
  }


  .ow-header-actions {
    gap: 6px;
  }


  .ow-logo-image {
    width: 165px;
    max-width: 165px;
  }


  .ow-lang-trigger {
    height: 34px;
    padding: 0 8px !important;
  }


  .ow-lang-code {
    font-size: 10px;
  }


  .ow-search-trigger {
    width: 34px;
    height: 34px;

    min-width: 34px;
    min-height: 34px;
  }


  .ow-menu-trigger {
    width: 54px;
    height: 54px;

    min-width: 54px;
    min-height: 54px;
  }


  .ow-search-panel.is-open {
    height: 240px;
  }


  .ow-search-inner {
    width:
      calc(100% - 40px);

    padding-top: 115px;
  }


  /* OFF CANVAS */

  .ow-offcanvas {
    width: 100%;
  }


  .ow-panel-top {
    height: 82px;

    padding:
      0 24px;
  }


  .ow-panel-brand span {
    font-size: 19px;
  }


  .ow-panel-brand small {
    font-size: 7px;
  }


  .ow-panel-main {
    display: block;
  }


  .ow-panel-navigation {
    padding:
      0px 24px 10px;
  }


  .ow-panel-nav {
    margin-top: 0px;
  }


  .ow-panel-nav a {
    min-height: 63px;

    grid-template-columns:
      35px 1fr 20px;
  }


  .ow-panel-title {
    font-size: 18px;
  }


  .ow-panel-nav a:hover
  .ow-panel-title {
    font-size: 18px;
  }


.ow-panel-visual {
  display: block;

  height: 270px;

  margin: 0 24px;
}


  .ow-panel-meta {
    display: none;
  }

}


/* =========================================
   SMALL MOBILE
========================================== */

@media (max-width: 480px) {

  .ow-header-inner {
    width:
      calc(100% - 24px);
  }


  .ow-logo-image {
    width: 145px;
    max-width: 145px;
  }


  .ow-search-trigger {
    display: none;
  }


  .ow-panel-navigation {
    padding-top: 28px;
  }


  .ow-panel-nav a {
    min-height: 59px;
  }


  .ow-panel-title {
    font-size: 15px;
  }


  .ow-panel-nav a:hover
  .ow-panel-title {
    font-size: 15px;
  }


  .ow-close-trigger {
    width: 45px;
    height: 45px;
  }

}


/* =========================================
   REDUCED MOTION
========================================== */

@media (prefers-reduced-motion: reduce) {

  .ow-header-scope *,
  .ow-header-scope *::before,
  .ow-header-scope *::after {
    animation-duration: .01ms !important;

    animation-iteration-count: 1 !important;

    transition-duration: .01ms !important;
  }

}


/* =========================================
   MENU LOCK (html/body saat offcanvas terbuka)
========================================== */

html.ow-menu-lock,
body.ow-menu-lock {
  overflow: hidden !important;
}