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

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

.ft-scope{

  --ft-ink:#172B3A;
  --ft-ink-2:#1E3445;

  --ft-teal:#00B4A6;

  --ft-paper:#F4F7F9;

  --ft-muted:
    rgba(244,247,249,.52);

  --ft-line:
    rgba(244,247,249,.10);

  width:100vw;

  position:relative;

  left:50%;
  right:50%;

  margin-left:-50vw;
  margin-right:-50vw;

  overflow:hidden;

  background:
    radial-gradient(
      circle at 82% 15%,
      rgba(0,180,166,.11),
      transparent 29%
    ),
    linear-gradient(
      135deg,
      #172B3A 0%,
      #142735 55%,
      #10232F 100%
    );

  color:var(--ft-paper);

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

  -webkit-font-smoothing:antialiased;

}


.ft-scope *,
.ft-scope *::before,
.ft-scope *::after{

  box-sizing:border-box;

}


/* =========================================================
   BACKGROUND GRID
========================================================= */

.ft-grid{

  position:absolute;

  inset:0;

  pointer-events:none;

  opacity:.42;

  background-image:

    linear-gradient(
      rgba(244,247,249,.035) 1px,
      transparent 1px
    ),

    linear-gradient(
      90deg,
      rgba(244,247,249,.035) 1px,
      transparent 1px
    );

  background-size:80px 80px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 70%,
      transparent
    );

  -webkit-mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 70%,
      transparent
    );

}


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

.ft-glow{

  position:absolute;

  width:420px;
  height:420px;

  right:-170px;
  top:-160px;

  border-radius:50%;

  border:
    1px solid
    rgba(0,180,166,.16);

  box-shadow:

    0 0 0 60px
    rgba(0,180,166,.025),

    0 0 0 120px
    rgba(0,180,166,.018);

  pointer-events:none;

}


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

.ft-main{

  position:relative;

  z-index:2;

  max-width:1280px;

  margin:0 auto;

  padding:

    clamp(72px,8vw,112px)
    clamp(22px,5vw,64px)
    clamp(72px,8vw,105px);

  display:grid;

  grid-template-columns:

    minmax(0,1.2fr)
    minmax(360px,.8fr);

  gap:
    clamp(50px,8vw,120px);

  align-items:start;

}


/* =========================================================
   LEFT
========================================================= */

.ft-kicker{

  display:flex;

  align-items:center;

  gap:10px;

  margin-bottom:24px;

  color:var(--ft-teal);

  font-size:11px;

  font-weight:800;

  letter-spacing:.17em;

  text-transform:uppercase;

}


.ft-kicker-dot{

  width:7px;
  height:7px;

  flex-shrink:0;

  border-radius:50%;

  background:var(--ft-teal);

  box-shadow:

    0 0 0 5px
    rgba(0,180,166,.10),

    0 0 18px
    rgba(0,180,166,.35);

  animation:
    ftPulse 2.4s ease-in-out infinite;

}


@keyframes ftPulse{

  0%,
  100%{

    opacity:1;

    transform:scale(1);

  }

  50%{

    opacity:.55;

    transform:scale(.72);

  }

}


/* =========================================================
   HEADLINE
========================================================= */

.ft-scope .ft-headline{

  margin:0 !important;

  padding:0 !important;

  max-width:760px;

  color:var(--ft-paper);

  font-size:
    clamp(42px,6vw,78px);

  line-height:.98;

  letter-spacing:-.055em;

  font-weight:600;

}


.ft-headline span{

  color:var(--ft-teal);

}


/* =========================================================
   INTRO
========================================================= */

.ft-intro{

  max-width:530px;

  margin:
    32px 0 36px !important;

  padding:0 !important;

  color:
    rgba(244,247,249,.58);

  font-size:15px;

  line-height:1.8;

}


/* =========================================================
   CTA
========================================================= */

.ft-cta{

  position:relative;

  display:inline-flex;

  align-items:center;

  gap:18px;

  padding:
    15px 19px
    15px 22px;

  background:var(--ft-teal);

  color:var(--ft-ink);

  border-radius:9px;

  text-decoration:none;

  font-size:12px;

  font-weight:800;

  letter-spacing:.12em;

  overflow:hidden;

  transition:

    transform .3s ease,
    box-shadow .3s ease,
    gap .3s ease;

}


.ft-cta::before{

  content:"";

  position:absolute;

  inset:0;

  background:
    linear-gradient(
      110deg,
      transparent 25%,
      rgba(255,255,255,.28) 50%,
      transparent 75%
    );

  transform:
    translateX(-120%);

  transition:
    transform .6s ease;

}


.ft-cta span,
.ft-cta b{

  position:relative;

  z-index:1;

}


.ft-cta b{

  font-size:18px;

  line-height:1;

  font-weight:500;

  transition:
    transform .3s ease;

}


.ft-cta:hover{

  transform:
    translateY(-3px);

  gap:22px;

  box-shadow:
    0 14px 35px
    rgba(0,180,166,.22);

}


.ft-cta:hover::before{

  transform:
    translateX(120%);

}


.ft-cta:hover b{

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

}


/* =========================================================
   RIGHT
========================================================= */

.ft-right{

  padding-top:4px;

}


.ft-side-label{

  margin-bottom:18px;

  color:
    rgba(244,247,249,.38);

  font-size:10px;

  font-weight:800;

  letter-spacing:.18em;

  text-transform:uppercase;

}


/* =========================================================
   SOCIAL LIST
========================================================= */

.ft-social-list{

  display:flex;

  flex-direction:column;

}


.ft-social-item{

  position:relative;

  display:grid;

  grid-template-columns:
    30px 32px 1fr 20px;

  align-items:center;

  min-height:70px;

  padding:
    9px 4px;

  border-top:
    1px solid var(--ft-line);

  color:var(--ft-paper);

  text-decoration:none;

  transition:

    padding .3s ease,
    background .3s ease,
    border-color .3s ease;

}


.ft-social-item:last-child{

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

}


/* teal edge */

.ft-social-item::before{

  content:"";

  position:absolute;

  left:0;

  top:0;
  bottom:0;

  width:2px;

  background:var(--ft-teal);

  transform:
    scaleY(0);

  transform-origin:center;

  transition:
    transform .3s ease;

}


.ft-social-item:hover{

  padding-left:14px;

  padding-right:12px;

  background:
    rgba(0,180,166,.055);

  border-color:
    rgba(0,180,166,.22);

}


.ft-social-item:hover::before{

  transform:
    scaleY(1);

}


/* =========================================================
   INDEX
========================================================= */

.ft-social-index{

  color:
    rgba(244,247,249,.25);

  font-size:9px;

  font-weight:700;

  letter-spacing:.08em;

}


/* =========================================================
   ICON
========================================================= */

.ft-social-icon{

  width:26px;
  height:26px;

  display:flex;

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

  color:var(--ft-teal);

  border:
    1px solid
    rgba(0,180,166,.28);

  border-radius:50%;

  font-size:11px;

  font-weight:800;

}


/* =========================================================
   SOCIAL NAME
========================================================= */

.ft-social-name{

  display:flex;

  flex-direction:column;

  gap:3px;

  color:var(--ft-paper);

  font-size:13px;

  font-weight:700;

}


.ft-social-name small{

  color:
    rgba(244,247,249,.35);

  font-size:10px;

  font-weight:500;

  letter-spacing:.02em;

}


/* =========================================================
   ARROW
========================================================= */

.ft-social-arrow{

  color:
    rgba(244,247,249,.35);

  font-size:16px;

  transition:

    color .3s ease,
    transform .3s ease;

}


.ft-social-item:hover
.ft-social-arrow{

  color:var(--ft-teal);

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

}


/* =========================================================
   WHATSAPP EMPHASIS
========================================================= */

.ft-whatsapp{

  margin-top:4px;

}


.ft-whatsapp .ft-social-icon{

  color:#62D9CC;

  border-color:
    rgba(98,217,204,.40);

}


.ft-whatsapp .ft-social-name small{

  color:
    rgba(0,180,166,.68);

}


.ft-whatsapp:hover{

  background:
    rgba(0,180,166,.09);

}


/* =========================================================
   NOTE
========================================================= */

.ft-note{

  display:flex;

  align-items:flex-start;

  gap:14px;

  margin-top:34px;

}


.ft-note-line{

  width:22px;
  height:1px;

  margin-top:9px;

  flex-shrink:0;

  background:var(--ft-teal);

}


.ft-note p{

  margin:0 !important;

  padding:0 !important;

  color:
    rgba(244,247,249,.4);

  font-size:11px;

  line-height:1.7;

}


.ft-note strong{

  color:
    rgba(244,247,249,.72);

  font-weight:600;

}


/* =========================================================
   SIGNATURE
========================================================= */

.ft-signature{

  position:relative;

  z-index:2;

  max-width:1280px;

  margin:0 auto;

  padding:

    0
    clamp(22px,5vw,64px)
    clamp(42px,5vw,58px);

  overflow:hidden;

}


.ft-signature-top{

  display:flex;

  justify-content:space-between;

  align-items:center;

  padding-bottom:10px;

  border-bottom:
    1px solid
    rgba(244,247,249,.08);

  color:
    rgba(244,247,249,.27);

  font-size:9px;

  font-weight:700;

  letter-spacing:.14em;

}


.ft-word{

  margin-top:-4px;

  color:
    rgba(244,247,249,.045);

  font-size:
    clamp(100px,20vw,260px);

  line-height:.72;

  font-weight:800;

  letter-spacing:-.09em;

  user-select:none;

  white-space:nowrap;

}


.ft-word span{

  color:
    rgba(0,180,166,.16);

}


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

.ft-bottom{

  position:relative;

  z-index:3;

  max-width:1280px;

  margin:0 auto;

  padding:

    19px
    clamp(22px,5vw,64px)
    26px;

  border-top:
    1px solid
    rgba(244,247,249,.08);

  display:flex;

  justify-content:space-between;

  align-items:center;

  gap:20px;

  color:
    rgba(244,247,249,.28);

  font-size:9px;

  font-weight:600;

  letter-spacing:.08em;

  text-transform:uppercase;

}


.ft-bottom-right{

  color:
    rgba(0,180,166,.52);

}


.ft-bottom-right i{

  padding:0 6px;

  color:
    rgba(244,247,249,.18);

  font-style:normal;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:900px){

  .ft-main{

    grid-template-columns:1fr;

    gap:70px;

  }

  .ft-headline{

    max-width:680px;

  }

  .ft-right{

    max-width:650px;

  }

}


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

@media (max-width:600px){

  .ft-main{

    padding:
      66px 20px 70px;

    gap:58px;

  }


  .ft-kicker{

    margin-bottom:20px;

    font-size:10px;

  }


  .ft-headline{

    font-size:
      clamp(40px,12vw,58px);

    letter-spacing:-.06em;

  }


  .ft-intro{

    margin:
      26px 0 30px !important;

    font-size:14px;

    line-height:1.75;

  }


  .ft-cta{

    padding:
      14px 17px
      14px 19px;

  }


  .ft-social-item{

    grid-template-columns:
      24px 32px 1fr 18px;

    min-height:68px;

  }


  .ft-social-name{

    font-size:12.5px;

  }


  .ft-social-name small{

    font-size:9px;

  }


  .ft-note{

    margin-top:28px;

  }


  .ft-signature{

    padding:
      0 20px 42px;

  }


  .ft-signature-top{

    font-size:8px;

  }


  .ft-word{

    font-size:31vw;

    margin-top:4px;

  }


  .ft-bottom{

    padding:
      18px 20px 24px;

    flex-direction:column;

    align-items:flex-start;

    font-size:8px;

    line-height:1.7;

  }


  .ft-bottom-right{

    line-height:1.8;

  }


  .ft-grid{

    background-size:55px 55px;

  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.ft-cta:focus-visible,
.ft-social-item:focus-visible{

  outline:
    2px solid
    var(--ft-teal);

  outline-offset:4px;

}


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

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

  .ft-kicker-dot{

    animation:none;

  }

  .ft-cta,
  .ft-cta::before,
  .ft-cta b,
  .ft-social-item,
  .ft-social-item::before,
  .ft-social-arrow{

    transition:none;

  }

}