/* =========================================================
   JASPEST · CV Jaya Abadi Solusi — logo & animasi
   Aman tanpa JS: kondisi tersembunyi hanya aktif bila JS
   sudah menandai elemen (.reveal / .stagger).
   ========================================================= */

:root{--ease-out:cubic-bezier(.2,.7,.2,1);--ease-soft:cubic-bezier(.4,0,.2,1)}

/* ---------- Logo ---------- */
.brand{position:relative;flex-shrink:0}
.brand .brand-logo{
  display:block;width:auto;max-width:none;height:68px;object-fit:contain;
  transform-origin:left center;
  transition:transform .35s var(--ease-out),filter .35s var(--ease-soft);
}
.brand:hover .brand-logo{transform:scale(1.05) rotate(-1deg);filter:drop-shadow(0 6px 10px #00a8f022)}
.brand:active .brand-logo{transform:scale(.98)}
.site-header.scrolled .brand .brand-logo{transform:scale(.88)}
.site-header.scrolled .brand:hover .brand-logo{transform:scale(.93) rotate(-1deg)}

.brand-footer .brand-logo{
  height:84px;background:#fff;border-radius:16px;padding:9px 14px;
  box-shadow:0 10px 28px #00000026;
}
.brand-footer:hover .brand-logo{transform:translateY(-3px) scale(1.03) rotate(0)}

/* kilau halus yang lewat di atas logo header */
.site-header .brand::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:10px;
  background:linear-gradient(105deg,transparent 35%,#ffffffcc 50%,transparent 65%);
  background-size:260% 100%;background-position:160% 0;mix-blend-mode:soft-light;
  animation:logoShine 7s ease-in-out 2.4s infinite;
}

@keyframes logoIn{from{opacity:0;transform:translateY(-10px) scale(.82) rotate(-4deg)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes logoShine{0%,70%{background-position:160% 0}100%{background-position:-60% 0}}
.js-anim .site-header .brand .brand-logo{animation:logoIn .9s var(--ease-out) .1s backwards}
.js-anim .brand-footer .brand-logo{animation:none}

/* ---------- Header & navigasi ---------- */
.site-header{transition:box-shadow .3s,background-color .3s}
.js-anim .site-header{animation:headerDrop .7s var(--ease-out) backwards}
@keyframes headerDrop{from{transform:translateY(-100%);opacity:0}to{transform:none;opacity:1}}

.desktop-nav a{position:relative;padding:6px 0}
.desktop-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--red),var(--blue));
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease-out);
}
.desktop-nav a:hover::after,.desktop-nav a.is-active::after{transform:scaleX(1)}
.desktop-nav a.is-active{color:var(--blue-ink)}
.portal-link{transition:color .2s,transform .2s}
.portal-link:hover{color:var(--blue-ink);transform:translateY(-1px)}
.portal-link:hover svg{animation:wiggle .5s ease-in-out}
.menu-toggle svg{transition:transform .3s var(--ease-out)}
.menu-toggle[aria-expanded="true"] svg{transform:rotate(90deg)}
.mobile-nav:not([hidden]){animation:slideDown .3s var(--ease-out)}
.mobile-nav>a,.mobile-nav>button{transition:color .2s,padding-left .2s}
.mobile-nav>a:hover,.mobile-nav>button:hover{color:var(--blue-ink);padding-left:6px}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}

/* ---------- Hero (animasi saat halaman dibuka) ---------- */
.js-anim .hero-copy>*{animation:rise .85s var(--ease-out) backwards}
.js-anim .hero-copy>:nth-child(1){animation-delay:.15s}
.js-anim .hero-copy>:nth-child(2){animation-delay:.28s}
.js-anim .hero-copy>:nth-child(3){animation-delay:.42s}
.js-anim .hero-copy>:nth-child(4){animation-delay:.56s}
.js-anim .hero-copy>:nth-child(5){animation-delay:.7s}
.js-anim .hero-copy>:nth-child(n+6){animation-delay:.8s}

.js-anim .hero-image-frame{animation:frameIn 1.1s var(--ease-out) .2s backwards}
.hero-image-frame img{animation:kenburns 22s ease-in-out 1.2s infinite alternate}
.js-anim .hero-note{animation:popIn .7s var(--ease-out) 1.1s backwards,floaty 7s ease-in-out 2s infinite reverse}
.js-anim .hero-red-accent{transform-origin:top;animation:growY .8s var(--ease-out) 1.2s backwards}
.hero-visual:before{animation:driftBox 9s ease-in-out infinite alternate}
.status-dot{animation:dotPulse 2s ease-out infinite}
.note-icon{animation:softBeat 3.2s ease-in-out infinite}

.hero-cta .button-red{animation:ringPulse 3s ease-out 2s infinite}
.hero-cta .button-red:hover{animation-play-state:paused}
.hero-cta .button-red svg,.button-blue svg{transition:transform .25s var(--ease-out)}
.hero-cta .button-red:hover svg,.button-blue:hover svg{transform:translateX(4px)}
.text-link svg{transition:transform .25s var(--ease-out)}
.text-link:hover svg{transform:translateX(4px)}

@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes frameIn{from{opacity:0;transform:translateX(34px) scale(.96)}to{opacity:1;transform:none}}
@keyframes popIn{from{opacity:0;transform:translateY(18px) scale(.92)}to{opacity:1;transform:none}}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.08)}}
@keyframes growY{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes driftBox{from{transform:translate(0,0) rotate(0)}to{transform:translate(-8px,8px) rotate(2deg)}}
@keyframes dotPulse{0%{box-shadow:0 0 0 0 #e0202866}80%,100%{box-shadow:0 0 0 9px #e0202800}}
@keyframes softBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes ringPulse{
  0%{box-shadow:0 8px 20px #e0202817,0 0 0 0 #e0202855}
  70%,100%{box-shadow:0 8px 20px #e0202817,0 0 0 16px #e0202800}
}

/* ---------- Tombol: kilau saat hover ---------- */
.button{position:relative;overflow:hidden;isolation:isolate}
.button::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
  background:linear-gradient(105deg,transparent,#ffffff40,transparent);
  transform:skewX(-20deg);transition:left .6s var(--ease-out);
}
.button:hover::after{left:130%}
.button:active{transform:translateY(0) scale(.98)}

/* ---------- Muncul saat di-scroll ---------- */
.js-anim .reveal{
  opacity:0;transform:translateY(32px);
  transition:opacity .8s var(--ease-out),transform .8s var(--ease-out);
  transition-delay:var(--reveal-delay,0s);
}
.js-anim .reveal.from-left{transform:translateX(-40px)}
.js-anim .reveal.from-right{transform:translateX(40px)}
.js-anim .reveal.zoom{transform:scale(.94) translateY(20px)}
.js-anim .reveal.is-visible{opacity:1;transform:none}

/* anak-anak grid muncul bergantian */
.js-anim .stagger:not(.is-visible)>*{opacity:0}
.js-anim .stagger.is-visible>*{animation:rise .7s var(--ease-out) backwards}
.js-anim .stagger.is-visible>:nth-child(1){animation-delay:.02s}
.js-anim .stagger.is-visible>:nth-child(2){animation-delay:.09s}
.js-anim .stagger.is-visible>:nth-child(3){animation-delay:.16s}
.js-anim .stagger.is-visible>:nth-child(4){animation-delay:.23s}
.js-anim .stagger.is-visible>:nth-child(5){animation-delay:.3s}
.js-anim .stagger.is-visible>:nth-child(6){animation-delay:.37s}
.js-anim .stagger.is-visible>:nth-child(7){animation-delay:.44s}
.js-anim .stagger.is-visible>:nth-child(8){animation-delay:.5s}
.js-anim .stagger.is-visible>:nth-child(n+9){animation-delay:.55s}

/* garis aksen pada label bagian tumbuh saat terlihat */
.js-anim .reveal .eyebrow-line,.js-anim .reveal.eyebrow .eyebrow-line{transform-origin:left;transform:scaleX(0);transition:transform .8s var(--ease-out) .35s}
.js-anim .reveal.is-visible .eyebrow-line{transform:scaleX(1)}

/* ---------- Interaksi kartu ---------- */
.service-icon,.dialog-service-icon{transition:transform .35s var(--ease-out),background-color .25s}
.service-card:hover .service-icon{transform:rotate(-7deg) scale(1.1)}
.service-card .text-link svg{transition:transform .25s var(--ease-out)}
.service-card:hover .text-link svg{transform:translateX(4px)}
.assurance-inner svg{transition:transform .3s var(--ease-out)}
.assurance-inner>div:hover svg{transform:translateY(-3px) scale(1.12)}
.gallery-expand{transition:transform .3s var(--ease-out),background-color .2s}
.gallery-card:hover .gallery-expand{transform:scale(1.15)}
.filter-button{transition:background-color .2s,color .2s,border-color .2s,transform .2s}
.filter-button:hover{transform:translateY(-2px)}
.article-meta>svg{transition:transform .25s var(--ease-out)}
.article-card:hover .article-meta>svg{transform:translateX(4px)}
.directory-icon{transition:transform .35s var(--ease-out)}
.directory-card:hover .directory-icon{transform:rotate(-6deg) scale(1.1)}
.directory-card-visual img{transition:transform .6s var(--ease-out)}
.directory-card:hover .directory-card-visual img{transform:scale(1.06)}
.about-stamp>svg{animation:softBeat 3.4s ease-in-out infinite}
.contact-decoration{animation:driftSpin 14s ease-in-out infinite alternate}
@keyframes driftSpin{from{transform:rotate(-10deg) translateY(0)}to{transform:rotate(-2deg) translateY(-10px)}}

/* FAQ */
.faq-list details[open]>p{animation:fadeDown .35s var(--ease-out)}
.faq-list summary{transition:color .2s}
.faq-list summary:hover{color:var(--blue-ink)}
.faq-list summary svg{transition:transform .3s var(--ease-out)}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Formulir */
.field input:not([type=file]),.field textarea,.field select{transition:border-color .2s,box-shadow .2s,transform .2s}
.field input:focus,.field textarea:focus,.field select:focus{transform:translateY(-1px)}
.property-options label>span{transition:border-color .2s,background-color .2s,color .2s,transform .2s}
.property-options label:hover>span{transform:translateY(-1px)}
.upload-zone{transition:border-color .2s,background-color .2s,transform .2s}
.upload-zone:hover{border-color:var(--blue);background:#f2fafe}
.photo-item{animation:popIn .35s var(--ease-out) backwards}
.field-error:not(:empty){animation:shake .4s ease-in-out}
.form-error-summary{animation:shake .4s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-5px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(3px)}}

/* ---------- Chat, dialog, toast ---------- */
.js-anim .chat-launcher{animation:popIn .7s var(--ease-out) 1.6s backwards}
.chat-launcher{transition:background-color .2s,transform .25s var(--ease-out),box-shadow .25s}
.chat-launcher:hover{transform:translateY(-3px);box-shadow:0 10px 28px #1b212a60}
.chat-launcher-icon>svg{animation:wiggle 4.5s ease-in-out 3s infinite}
.chat-online-dot{animation:dotPulseBlue 2s ease-out infinite}
@keyframes dotPulseBlue{0%{box-shadow:0 0 0 0 #cee7f3aa}80%,100%{box-shadow:0 0 0 7px #cee7f300}}
.chat-panel:not([hidden]){animation:panelIn .3s var(--ease-out);transform-origin:bottom right}
@keyframes panelIn{from{opacity:0;transform:translateY(14px) scale(.95)}to{opacity:1;transform:none}}
.chat-message{animation:msgIn .35s var(--ease-out) backwards}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.quick-questions>button{transition:background-color .2s,transform .2s}
.quick-questions>button:hover{transform:translateY(-1px)}
.chat-send{transition:background-color .2s,transform .2s}
.chat-send:hover{transform:scale(1.07)}

.content-dialog[open]{animation:dialogIn .35s var(--ease-out)}
.content-dialog[open]::backdrop{animation:fadeIn .3s ease-out}
@keyframes dialogIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.dialog-close{transition:transform .25s var(--ease-out)}
.dialog-close:hover{transform:rotate(90deg)}

.toast{animation:toastIn .35s var(--ease-out) backwards}
@keyframes toastIn{from{opacity:0;transform:translate(-50%,14px)}to{opacity:1;transform:translateX(-50%)}}

/* ---------- Responsif ---------- */
@media(max-width:960px){
  .brand .brand-logo{height:60px}
}
@media(max-width:700px){
  .brand .brand-logo{height:52px}
  .brand-footer .brand-logo{height:72px}
  .js-anim .reveal.from-left,.js-anim .reveal.from-right{transform:translateY(28px)}
  .hero-image-frame img{animation-duration:26s}
}
@media(max-width:370px){
  .brand .brand-logo{height:44px}
}

/* ---------- Aksesibilitas & cetak ---------- */
@media(prefers-reduced-motion:reduce){
  .js-anim .reveal,.js-anim .stagger>*{opacity:1!important;transform:none!important}
}
@media print{
  .js-anim .reveal,.js-anim .stagger>*{opacity:1!important;transform:none!important;animation:none!important}
}

/* ---------- Kalimat pembuka di atas judul hero ---------- */
.hero .hero-kicker{display:flex;align-items:center;gap:12px;margin:0 0 24px;font-size:17px;line-height:1.35;color:var(--text);font-weight:500}
.hero .hero-kicker-mark{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:var(--blue);color:#fff;transform:rotate(-6deg);box-shadow:3px 3px 0 var(--red)}
.hero .hero-kicker-mark svg{width:21px;height:21px}
.hero .hero-kicker strong{color:var(--ink);font-weight:800;background:linear-gradient(transparent 62%,rgba(237,53,72,.24) 62%);padding:0 2px}
@media(max-width:700px){.hero .hero-kicker{font-size:15px;gap:10px;margin-bottom:18px}.hero .hero-kicker-mark{width:34px;height:34px;border-radius:10px}.hero .hero-kicker-mark svg{width:19px;height:19px}}

/* ---------- Aksesibilitas ---------- */
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}

/* ---------- Bagian video: panel gelap bergaya sinematik ---------- */
.video-section{position:relative;background:radial-gradient(circle at 18% 12%,rgba(16,77,193,.55),transparent 46%),linear-gradient(160deg,#1b212a,#1b212a 60%,#22141a);color:#fff;isolation:isolate}
.video-section::before{content:"♪";position:absolute;left:-2%;bottom:-23%;z-index:-1;font-size:560px;line-height:1;font-family:Georgia,serif;color:rgba(255,255,255,.045);pointer-events:none}
.video-section::after{content:"";position:absolute;inset:0;z-index:-1;background-image:radial-gradient(rgba(255,255,255,.09) 1px,transparent 1.4px);background-size:22px 22px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 70%);mask-image:linear-gradient(90deg,transparent,#000 70%);pointer-events:none}
.video-copy h2{color:#fff}
.video-copy h2::after{content:"";display:block;width:64px;height:4px;margin-top:24px;border-radius:2px;background:var(--red)}
.video-copy>p{color:#d1d6dc}
.video-mini-note{display:inline-flex;padding:14px 20px 14px 16px;border:1px solid rgba(255,255,255,.2);border-radius:14px;background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.video-mini-note strong{color:#fff}
.video-mini-note div>span{color:#acb4c0}
.tiktok-letter{color:#bec5ce}
.video-cta{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:30px}
.video-cta>span{max-width:230px;font-size:12px;line-height:1.6;color:#acb4c0}
.video-host::before{content:"";position:absolute;inset:6% 2% 2%;z-index:-1;background:radial-gradient(circle at 50% 40%,rgba(237,53,72,.42),rgba(16,77,193,.25) 45%,transparent 70%);filter:blur(46px)}
.video-outline{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.06)}
.video-source-link{color:#cee7f3}
.video-host .tiktok-frame,.video-host iframe{box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
@media(max-width:960px){.video-cta>span{max-width:none}.video-section::before{font-size:340px}}

/* Bagian video: putih dengan gradasi biru muda (menggantikan latar gelap) */
.video-section{background:linear-gradient(180deg,#fff 0%,#e4f5fe 100%);color:var(--ink)}
.video-section::before{color:rgba(0,168,240,.08)}
.video-section::after{background-image:radial-gradient(rgba(0,168,240,.22) 1px,transparent 1.4px)}
.video-copy h2{color:var(--ink)}
.video-copy>p,.video-cta>span{color:#46586a}
.video-mini-note{border-color:#c7e3f1;background:#fff;backdrop-filter:none;box-shadow:0 6px 18px -10px rgba(0,120,180,.25)}
.video-mini-note strong{color:var(--ink)}
.video-mini-note div>span{color:#5d6f82}
.tiktok-letter{color:var(--blue-ink)}
.video-host::before{background:radial-gradient(circle at 50% 40%,rgba(224,32,40,.12),rgba(0,168,240,.16) 45%,transparent 70%);filter:blur(46px)}
.video-outline{border-color:#c7e3f1;background:#f2f9fc}
.video-source-link{color:var(--blue-ink)}
.video-host .tiktok-frame,.video-host iframe{box-shadow:0 24px 44px -22px rgba(20,60,90,.45)}

/* Tipografi: Inter Display untuk judul, Inter untuk teks */
h1,h2,h3,.brand-name,.process-no,.video-brand,.video-placeholder-copy strong{font-family:var(--display);font-weight:700}
h1,h2,h3{letter-spacing:-.02em}
.hero h1{letter-spacing:-.025em;line-height:1.08}
.section-heading h2,.contact-copy h2,.video-copy h2{letter-spacing:-.025em;line-height:1.12}
.service-card h3,.gallery-info h3,.article-info h3,.form-card h3{letter-spacing:-.015em;line-height:1.25}
.brand-name,.video-brand,.video-placeholder-copy strong{letter-spacing:-.02em}
.about-block h3{font-family:var(--font);letter-spacing:1.5px}