/* Tambahan untuk versi Laravel/Filament (dimuat setelah style.css) */

/* 8 menu: navbar dibuat lebih rapat, burger muncul lebih awal */
.nav nav{gap:20px}
@media(max-width:1180px){
  .burger{display:flex}
  .nav-actions .cv-btn{display:none}
  .cv-mobile{display:inline-flex;justify-content:center;margin-top:8px}
  .nav nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:2px;background:var(--bg);color:var(--text);padding:14px 5% 18px;display:none;border-bottom:1px solid var(--border);box-shadow:0 14px 24px rgba(0,0,0,.18)}
  .nav nav.open{display:flex}
  .nav nav a:not(.cv-btn){padding:12px 4px;font-size:1rem;color:var(--heading)}
}

/* Experience / Education: satu timeline per section */
.tl-single{max-width:860px}
.empty{color:var(--muted)}

/* Kartu project & sertifikat dengan foto */
.proj-img{display:block;margin:-28px -28px 18px;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius) var(--radius) 0 0;background:var(--bg-alt)}
.proj-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.card:hover .proj-img img{transform:scale(1.05)}
.cert .tl-date{margin-bottom:8px}
.more{display:inline-flex;align-items:center;gap:6px;margin-top:14px;color:var(--blue);font-weight:600;font-size:.9rem}
.more:hover{color:var(--gold-dark)}

/* logo upload */
.logo-img{height:36px;width:auto;display:block}

/* ANIMASI v3 */
@keyframes rise{from{opacity:0;transform:translateY(26px)}}
@keyframes slideIn{from{opacity:0;transform:translateX(70px) scale(.96)}}
@keyframes dropIn{from{opacity:0;translate:0 -18px}}
@keyframes bob{50%{translate:0 -12px}}
@keyframes drift{to{translate:-40px 24px}}
@keyframes drift2{to{translate:30px -20px}}
@keyframes navIn{from{opacity:0;transform:translateY(-22px)}}
@keyframes menuIn{from{opacity:0;translate:0 -10px}}
@keyframes spinIcon{to{transform:rotate(360deg)}}
.nav{animation:navIn .7s ease both}
.hero-text>*{animation:rise .85s cubic-bezier(.2,.7,.2,1) both}
.hero-text>:nth-child(1){animation-delay:.05s}.hero-text>:nth-child(2){animation-delay:.15s}.hero-text>:nth-child(3){animation-delay:.28s}.hero-text>:nth-child(4){animation-delay:.4s}.hero-text>:nth-child(5){animation-delay:.52s}.hero-text>:nth-child(6){animation-delay:.64s}
.hero-photo{animation:slideIn 1s .25s cubic-bezier(.2,.7,.2,1) both}
.tag-pill{animation:dropIn .7s .9s both}
.glass{animation:dropIn .8s .5s both,bob 6s 1.4s ease-in-out infinite}
.w1{animation:drift 18s ease-in-out infinite alternate}
.w2{animation:drift2 22s ease-in-out infinite alternate}
.nav nav.open{animation:menuIn .25s ease}
html.js .reveal{--tx:0px;--ty:28px;transform:translate(var(--tx),var(--ty));transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.show{transform:none;transition-delay:calc(var(--i,0)*90ms)}
html.js .about-grid>.reveal:first-child,html.js .contact-info.reveal{--tx:-44px;--ty:0px}
html.js .quick.reveal,html.js .form.reveal{--tx:44px;--ty:0px}
html.js .reveal .bar-gold{width:0;transition:width .8s .25s ease}
html.js .reveal.show .bar-gold{width:38px}
.tl-item::after{content:"";position:absolute;left:-2px;top:0;bottom:0;width:2px;background:var(--border);transform-origin:top}
html.js .tl-item{border-left-color:transparent}
html.js .tl-single .tl-item::after{transform:scaleY(0);transition:transform .6s ease}
html.js .tl-single.show .tl-item::after{transform:scaleY(1)}
html.js .tl-item::before{transform:scale(0);transition:transform .5s cubic-bezier(.3,1.7,.5,1)}
html.js .tl-single.show .tl-item::before{transform:scale(1)}
html.js .tl-single.show .tl-item:nth-child(1)::before{transition-delay:.2s}
html.js .tl-single.show .tl-item:nth-child(2)::before{transition-delay:.5s}
html.js .tl-single.show .tl-item:nth-child(3)::before{transition-delay:.8s}
html.js .tl-single.show .tl-item:nth-child(4)::before{transition-delay:1.1s}
html.js .tl-single.show .tl-item:nth-child(5)::before{transition-delay:1.4s}
html.js .tl-single.show .tl-item:nth-child(2)::after{transition-delay:.3s}
html.js .tl-single.show .tl-item:nth-child(3)::after{transition-delay:.6s}
html.js .tl-single.show .tl-item:nth-child(4)::after{transition-delay:.9s}
html.js .tl-single.show .tl-item:nth-child(5)::after{transition-delay:1.2s}
.proj{animation:none}
.proj.pop-in{animation:pop .45s ease backwards}
.btn{position:relative;overflow:hidden}
.btn-gold::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);transition:left .65s ease;pointer-events:none}
.btn-gold:hover::after{left:130%}
.hero-social a,.foot-social a{transition:transform .3s cubic-bezier(.3,1.6,.5,1),color .2s,background .2s,border-color .2s}
.hero-social a:hover{transform:translateY(-4px) scale(1.15)}
.chips span .ic{transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.chips span:hover .ic{transform:rotate(-14deg) scale(1.2)}
.icon-btn.spin .ic{animation:spinIcon .6s ease}
@media(max-width:700px){html.js .reveal{--ty:18px;transition-duration:.55s}html.js .reveal.show{transition-delay:calc(var(--i,0)*55ms)}.w1,.w2{animation:none}}
@media(prefers-reduced-motion:reduce){html.js .reveal,html.js .reveal.show{opacity:1!important;transform:none!important}.nav,.hero-text>*,.hero-photo,.tag-pill,.glass,.w1,.w2{animation:none!important}}
html.js .reveal.done{transition:opacity .3s ease,transform .3s ease,box-shadow .3s ease,border-color .3s ease,background .3s ease;transition-delay:0s}
html.js .card.reveal.done:hover{transform:translateY(-8px)}

/* CONTACT v4 */
a.c-item{text-decoration:none;color:inherit}
a.c-item .q-ic,a.c-item b{transition:background .25s,color .25s}
a.c-item:hover .q-ic{background:var(--gold);color:var(--navy)}
a.c-item:hover b{color:var(--blue)}
a.c-item>div{transition:transform .25s}
a.c-item:hover>div{transform:translateX(4px)}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}