/* Homepage finishing layer: cohesive section transitions, testimonial detail,
   and a compact brand preloader. Loaded after the shared site shell. */

.hero::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:112px;
  border:0;
  background:linear-gradient(180deg,transparent 0%,rgba(244,246,251,.35) 54%,#F5F7FB 100%);
  pointer-events:none;
}

.layanan{
  background-image:
    linear-gradient(180deg,rgba(245,247,251,.97) 0%,rgba(255,255,255,.95) 26%,rgba(255,251,240,.92) 67%,rgba(238,225,185,.86) 100%),
    url('coretax-bg-v2.jpg');
}

.proses{
  background-image:
    linear-gradient(180deg,rgba(238,225,185,.88) 0%,rgba(255,252,244,.96) 22%,rgba(248,248,246,.94) 72%,rgba(37,40,117,.91) 100%),
    url('proses-kerjasama-bg.jpg');
}

.kelas{
  background-image:
    url('spiral-flow-features-bottom.svg'),
    linear-gradient(180deg,rgba(39,42,123,.94) 0%,rgba(26,29,94,.89) 68%,rgba(245,244,239,.91) 100%),
    url('home-training-bg-ai.jpg');
  background-position:center,center,center 45%;
  background-size:100% 100%,100% 100%,cover;
}

.kelas::after{
  content:'';
  position:absolute;
  inset:auto 0 0;
  height:104px;
  background:linear-gradient(180deg,transparent,#F7F5EE);
  pointer-events:none;
}

.testi{
  isolation:isolate;
  background-color:#F8F5EC;
  background-image:
    url('spiral-flow-features-bottom.svg'),
    linear-gradient(180deg,rgba(248,246,239,.95) 0%,rgba(255,252,245,.91) 34%,rgba(241,245,240,.9) 74%,rgba(22,24,70,.98) 100%),
    url('testimonials-trust-bg-ai.jpg');
  background-position:center,center,center 34%;
  background-size:100% 100%,100% 100%,cover;
  background-repeat:no-repeat;
}

.testi::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(circle at 14% 28%,rgba(216,166,61,.12),transparent 28%),
    radial-gradient(circle at 86% 58%,rgba(14,166,114,.09),transparent 26%);
  pointer-events:none;
}

.testi .section-head{
  max-width:760px;
  margin-bottom:48px;
  padding:28px 34px 26px;
  border:1px solid rgba(255,255,255,.74);
  border-radius:26px;
  background:rgba(255,255,255,.62);
  box-shadow:0 20px 55px rgba(31,34,93,.08),inset 0 1px 0 rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.testi .section-head h2{font-size:clamp(36px,4.6vw,52px);letter-spacing:-.035em;}
.testi-group-label{
  position:relative;
  z-index:1;
  padding:9px 18px;
  margin-bottom:24px;
  color:#806118;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(216,166,61,.24);
  box-shadow:0 10px 28px rgba(31,34,93,.07);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
}

.testi-rating{
  width:max-content;
  max-width:100%;
  margin:-11px auto 30px;
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.82);
  box-shadow:0 8px 22px rgba(31,34,93,.06);
}

.testi .grid-3{position:relative;z-index:1;}
.testi-card{
  min-height:245px;
  padding:28px;
  border:1px solid rgba(255,255,255,.88);
  border-radius:22px;
  background:linear-gradient(145deg,rgba(255,255,255,.96),rgba(255,255,255,.82));
  box-shadow:0 20px 52px rgba(31,34,93,.11),inset 0 1px 0 rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}

.testi-card::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg,#2B2E83,#D8A63D);
  opacity:.72;
}

.testi .testi-rating + .grid-3 .testi-card::after{background:linear-gradient(90deg,#0E8F62,#D8A63D);}
.testi-card:hover{box-shadow:0 25px 58px rgba(31,34,93,.16);border-color:rgba(216,166,61,.42);}
.testi-avatar{
  width:46px;
  height:46px;
  border-radius:15px;
  background:linear-gradient(145deg,#FFF3CB,#F2F3F9);
  border:1px solid rgba(216,166,61,.16);
  box-shadow:0 8px 18px rgba(31,34,93,.08);
}
.testi-card h4{font-size:16px;line-height:1.3;}
.testi-card span{line-height:1.45;}
.testi-stars{font-size:13px;margin:14px 0 12px;}
.testi-card p{font-size:13.8px;line-height:1.74;}
.testi-more{
  position:relative;
  z-index:1;
  width:max-content;
  max-width:100%;
  margin:34px auto 0;
  padding:10px 16px;
  border-radius:999px;
  color:#E0E5EF;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.13);
}
.testi-more a{color:#F2C85B;}

.cta-footer-connect{
  background-color:#11133E;
  background-image:
    url('spiral-flow-cta.svg'),
    linear-gradient(180deg,#17194D 0%,#151746 38%,#11133E 100%),
    url('cta-dataviz-bg.jpg');
}

.cta-footer-connect footer{
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
  border-top-color:rgba(255,255,255,.07);
}

/* Preloader */
.preloader{
  background-color:#11133E;
  background-image:
    url('spiral-flow-hero.svg'),
    radial-gradient(circle at 18% 88%,rgba(216,166,61,.12),transparent 30%),
    radial-gradient(circle at 86% 12%,rgba(14,166,114,.15),transparent 32%),
    linear-gradient(135deg,#0C0E3C 0%,#252875 56%,#0B4B49 100%);
  background-position:center,center,center,center;
  background-size:145% 100%,100% 100%,100% 100%,100% 100%;
  animation:preloaderFlow 8s ease-in-out infinite alternate;
  transition:opacity .6s ease,filter .6s ease,transform .6s cubic-bezier(.22,1,.36,1);
}

.preloader::before{
  content:'';
  position:absolute;
  width:min(72vw,760px);
  aspect-ratio:2.5/1;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  box-shadow:0 0 0 42px rgba(255,255,255,.018),0 0 0 84px rgba(255,255,255,.012);
  transform:rotate(-7deg);
  pointer-events:none;
}

.preloader-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:19px;
  min-width:min(86vw,540px);
  padding:38px 46px 34px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:28px;
  background:rgba(9,12,57,.38);
  box-shadow:0 30px 82px rgba(3,5,34,.3),inset 0 1px 0 rgba(255,255,255,.08);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  opacity:0;
  filter:blur(7px);
  transform:translateY(10px) scale(.96);
  animation:preloaderIn .72s cubic-bezier(.22,1,.36,1) forwards;
  transition:opacity .35s ease,transform .45s ease;
}

.preloader-brand-row{display:flex;align-items:center;justify-content:center;gap:16px;}
.preloader-logo{
  color:#fff;
  font-size:clamp(28px,4.2vw,39px);
  opacity:1;
  filter:none;
  transform:none;
  animation:none;
  text-shadow:0 8px 24px rgba(2,4,31,.24);
}
.preloader-divider{width:1px;height:34px;background:linear-gradient(180deg,transparent,rgba(255,255,255,.38),transparent);}
.preloader-partner{display:flex;align-items:center;gap:8px;color:#fff;font-family:'Outfit',sans-serif;font-size:17px;font-weight:800;}
.preloader-partner img{width:23px;height:23px;object-fit:contain;}
.preloader-partner-name{display:inline;white-space:nowrap;letter-spacing:-.02em;}
.preloader-partner .gold-accent{color:#F6C512;}
.preloader-tagline{color:#C7D2DA;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;text-align:center;}
.preloader-progress{width:min(68vw,280px);height:3px;border-radius:999px;background:rgba(255,255,255,.11);overflow:hidden;}
.preloader-progress span{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#D8A63D,#F6C512 42%,#0FA968);transform:scaleX(0);transform-origin:left;animation:preloaderProgress .8s cubic-bezier(.22,1,.36,1) .08s forwards;}
.preloader-status{color:#9EABBF;font-size:10.5px;letter-spacing:.08em;}

.preloader.is-hiding{opacity:0;filter:blur(8px);transform:scale(1.015);}
.preloader.is-hiding .preloader-inner{opacity:0;transform:translateY(-8px) scale(.98);}

@keyframes preloaderFlow{
  from{background-position:42% center,center,center,center;}
  to{background-position:58% center,center,center,center;}
}
@keyframes preloaderIn{to{opacity:1;filter:blur(0);transform:translateY(0) scale(1);}}
@keyframes preloaderProgress{to{transform:scaleX(1);}}

@media(max-width:560px){
  .testi .section-head{padding:25px 18px 23px;border-radius:22px;}
  .testi-card{min-height:0;padding:24px 21px;}
  .preloader-inner{min-width:88vw;padding:31px 20px 28px;border-radius:23px;}
  .preloader-brand-row{gap:10px;}
  .preloader-divider{height:27px;}
  .preloader-partner{font-size:13px;gap:6px;}
  .preloader-partner img{width:18px;height:18px;}
  .preloader-tagline{font-size:9px;letter-spacing:.11em;}
}

@media(prefers-reduced-motion:reduce){
  .preloader{animation:none;}
  .preloader-inner,.preloader-progress span{animation-duration:.01ms;}
}