/* =========================================================
   CAREER PAGE — namespaced additions (career-*)
   Layout inspired by career.indofood.com's structure
   (search-first hero, job categories, tabbed about, group/
   testimonial strip), re-expressed in ATI's own navy/gold
   "Ocean to Table" visual language.
   ========================================================= */

#career-page{ --belt-gap: 26px; }

/* ---- shared hover-lift language ----
   Every card that "lifts" on hover (translateY(-6px)) now shares
   the same duration/easing so the whole page reads as one motion
   system instead of several slightly different speeds. ---- */
#career-page{ --lift-dist: -6px; --lift-ease: .4s var(--ease); }

/* ---------------------------------------------------------
   0. SEARCH HERO
--------------------------------------------------------- */
.career-hero {
    position: relative;
    min-height: 100svh;
    height: 100svh;
    display: flex;
    align-items: center;
    background: var(--navy-950);
    overflow: hidden;
    padding: 100px 0 60px;
    box-sizing: border-box;
}
.career-hero-media{position:absolute;inset:0;z-index:0;}
.career-hero-media img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.career-hero-media::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg, rgba(0,27,72,.7) 0%, rgba(0,27,72,.55) 40%, rgba(0,27,72,.97) 100%),
    linear-gradient(100deg, rgba(2,69,122,.9) 0%, rgba(2,69,122,.32) 50%, transparent 100%);
}
.career-hero-content{position:relative;z-index:2;width:100%;}
.career-hero h1{color:#fff;font-size:clamp(34px,5.4vw,62px);max-width:19ch;line-height:1.08;margin-bottom:20px;}
.career-hero > .container > p{color:rgba(255,255,255,.78);font-size:17px;max-width:56ch;margin-bottom:44px;}

.career-search-panel{
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
  border-radius:var(--radius-lg);padding:22px;
  box-shadow:0 30px 60px -24px rgba(0,27,72,.55);
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr auto;gap:12px;align-items:end;
}
.career-search-field{display:flex;flex-direction:column;gap:6px;}
.career-search-field label{font-family:var(--font-mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink-400);}
.career-search-field .input-wrap{position:relative;}
.career-search-field input, .career-search-field select{
  width:100%;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  padding:12px 14px;font-family:var(--font-body);font-size:14px;background:var(--ice-50);
  appearance:none;transition:border-color .3s, box-shadow .3s;color:var(--ink-800);
}
.career-search-field input{padding-left:38px;}
.career-search-field .input-wrap svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-400);pointer-events:none;}
.career-search-field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237488A0' stroke-width='2'><path d='m6 9 6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:34px;}
.career-search-field input:focus, .career-search-field select:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(1,138,190,.15);background:#fff;}
.career-search-panel .btn-primary{padding:12.5px 26px;white-space:nowrap;}

.career-hero-tags{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px;}
.career-hero-tags span{font-family:var(--font-mono);font-size:11.5px;color:rgba(255,255,255,.5);letter-spacing:.04em;}
.career-hero-tags a{
  font-size:12.5px;font-weight:600;color:rgba(255,255,255,.85);
  border:1px solid rgba(255,255,255,.3);border-radius:999px;padding:6px 14px;
  transition:background .3s, border-color .3s;
}
.career-hero-tags a:hover{background:rgba(255,255,255,.12);border-color:#fff;}

@media (max-width:1080px){
  .career-search-panel{grid-template-columns:1fr 1fr;}
  .career-search-panel .btn-primary{grid-column:1/-1;justify-content:center;}
}
@media (max-width:640px){
  .career-hero{padding:128px 0 64px;}
  .career-search-panel{grid-template-columns:1fr;padding:18px;}
}


.career-hero-employee-count {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 50px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 14px;
    line-height: 1.5;
}

.career-hero-employee-count strong {
    color: var(--gold-500);
    font-weight: 700;
}

.employee-count-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--gold-500);
    flex-shrink: 0;
}

/* ---- Hero entrance — plays automatically on page load, no scroll needed.
   Targets the hero's direct children by their existing selectors, so no
   blade/HTML changes required. Respects the global prefers-reduced-motion
   rule already defined in main.css. ---- */
.career-hero-content > .hero-kicker,
.career-hero-content > h1,
.career-hero-content > p,
.career-hero-content > .btn,
.career-hero-content > .career-hero-employee-count{
  opacity:0;
  transform:translateY(26px);
  animation:careerHeroIn .85s var(--ease) forwards;
}
.career-hero-content > .hero-kicker{ animation-delay:.05s; }
.career-hero-content > h1{ animation-delay:.18s; }
.career-hero-content > p{ animation-delay:.32s; }
.career-hero-content > .btn{ animation-delay:.46s; }
.career-hero-content > .career-hero-employee-count{ animation-delay:.6s; }

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

/* ---------------------------------------------------------
   1. JOB CATEGORIES — icon grid (Indofood's "job category
   by function"), each links into the filtered job list
--------------------------------------------------------- */
.career-cat-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;}
.career-cat-card{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  border:1px solid var(--line);border-radius:var(--radius-md);padding:24px 20px;
  background:#fff;
  transition:transform var(--lift-ease), box-shadow var(--lift-ease), border-color var(--lift-ease);
}
.career-cat-card:hover{transform:translateY(var(--lift-dist));box-shadow:0 22px 38px -20px rgba(2,69,122,.25);border-color:transparent;}
.career-cat-ic{
  width:46px;height:46px;border-radius:12px;background:var(--ice-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;
}
.career-cat-card b{font-size:14.5px;color:var(--navy-900);line-height:1.3;}
.career-cat-card span{font-family:var(--font-mono);font-size:11px;color:var(--ink-400);}
@media (max-width:1080px){.career-cat-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.career-cat-grid{grid-template-columns:repeat(2,1fr);}}

/* ---------------------------------------------------------
   2. FEATURED JOBS — card grid variant of .job-card
--------------------------------------------------------- */
.career-job-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
.career-job-grid .job-card{flex-direction:column;align-items:stretch;gap:16px;padding:26px 24px;}
.career-job-grid .job-apply{align-self:flex-start;}
@media (max-width:1080px){.career-job-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.career-job-grid{grid-template-columns:1fr;}}
.career-browse-all{display:flex;justify-content:center;margin-top:40px;}

/* ---------------------------------------------------------
   3. ABOUT TABS — Who we are / Vision & Mission / Values
--------------------------------------------------------- */
.career-about{display:grid;grid-template-columns:.85fr 1.15fr;gap:60px;align-items:start;}
.career-tabs-nav{display:flex;flex-direction:column;gap:4px;position:sticky;top:110px;}
.career-tab-btn{
  text-align:left;padding:16px 18px;border-radius:var(--radius-md);
  font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink-400);
  border:1px solid transparent;transition:all .3s var(--ease);
}
.career-tab-btn:hover{color:var(--navy-900);}
.career-tab-btn.is-active{background:var(--ice-50);border-color:var(--line);color:var(--navy-900);}
.career-tab-btn small{display:block;font-family:var(--font-body);font-weight:400;font-size:12.5px;color:var(--ink-400);margin-top:3px;}
.career-tab-panel{display:none;}
.career-tab-panel.is-active{display:block;animation:tabFade .5s var(--ease);}
@keyframes tabFade{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:translateY(0);}}
.career-tab-panel h3{font-size:26px;margin-bottom:16px;}
.career-tab-panel p{color:var(--ink-600);font-size:15.5px;margin-bottom:14px;max-width:60ch;}
.career-tab-panel ul{display:flex;flex-direction:column;gap:12px;margin-top:18px;}
.career-tab-panel ul li{
  display:flex;gap:12px;align-items:flex-start;color:var(--ink-600);font-size:15px;
  padding:14px 16px;background:var(--ice-50);border-radius:var(--radius-sm);
}
.career-tab-panel ul li svg{flex:none;width:18px;height:18px;color:var(--blue-700);margin-top:1px;}
@media (max-width:1080px){
  .career-about{grid-template-columns:1fr;gap:28px;}
  .career-tabs-nav{position:static;flex-direction:row;flex-wrap:wrap;}
}

/* ---------------------------------------------------------
   4. CAREER BELT — signature element (ATI's own: the literal
   conveyor-line metaphor for a canning-line company)
--------------------------------------------------------- */
.career-belt-section{background:var(--navy-950);position:relative;}
.career-belt{position:relative;margin-top:64px;padding-bottom:8px;}
.career-belt-rail{position:relative;height:3px;border-radius:3px;background:rgba(255,255,255,.12);}
.career-belt-rail i{
  position:absolute;inset:0;border-radius:3px;
  background:repeating-linear-gradient(90deg,var(--gold-500) 0 22px, transparent 22px 38px);
  background-size:76px 100%;animation:beltMove 2.6s linear infinite;opacity:.9;
}
@keyframes beltMove{to{background-position:-76px 0;}}
@media (prefers-reduced-motion:reduce){.career-belt-rail i{animation:none;}}
.career-belt-stations{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--belt-gap);margin-top:-15px;}
.career-belt-station{position:relative;padding-top:44px;}
.career-belt-node{
  position:absolute;top:0;left:0;width:30px;height:30px;border-radius:50%;
  background:var(--gold-500);color:var(--navy-950);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-weight:700;font-size:12px;
  box-shadow:0 0 0 6px var(--navy-950), 0 0 0 7px rgba(255,255,255,.14);
}
.career-belt-card{
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
  border-radius:var(--radius-md);padding:24px 22px;height:100%;
  transition:transform var(--lift-ease), border-color var(--lift-ease), background var(--lift-ease);
}
.career-belt-station:hover .career-belt-card{transform:translateY(var(--lift-dist));border-color:var(--gold-500);background:rgba(255,255,255,.07);}
.career-belt-card b{display:block;color:#fff;font-family:var(--font-display);font-size:16.5px;margin-bottom:8px;}
.career-belt-card p{color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.6;}
.career-belt-eyebrow{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-400);margin-bottom:6px;display:block;}
@media (max-width:1080px){.career-belt-stations{grid-template-columns:repeat(2,1fr);row-gap:36px;}.career-belt-rail{display:none;}}
@media (max-width:640px){.career-belt-stations{grid-template-columns:1fr;}}

/* ---------------------------------------------------------
   5. TESTIMONIALS — "Kata Mereka" horizontal scroll-snap
--------------------------------------------------------- */
.career-testi-track{
  display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:8px 4px 28px;scrollbar-width:thin;scrollbar-color:var(--blue-500) transparent;
}
.career-testi-track::-webkit-scrollbar{height:6px;}
.career-testi-track::-webkit-scrollbar-thumb{background:var(--blue-500);border-radius:6px;}
.career-testi-card{
  flex:0 0 auto;width:340px;scroll-snap-align:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 26px;display:flex;flex-direction:column;gap:16px;
}
.career-testi-quote{color:var(--ink-600);font-size:15px;line-height:1.7;}
.career-testi-quote::before{content:"\201C";font-family:var(--font-display);font-size:34px;color:var(--gold-500);display:block;line-height:.6;margin-bottom:6px;}
.career-testi-person{display:flex;align-items:center;gap:12px;margin-top:auto;}
.career-testi-avatar{
  width:42px;height:42px;border-radius:50%;flex:none;
  background:linear-gradient(150deg,var(--blue-700),var(--navy-900));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-display);font-weight:700;font-size:14px;
}
.career-testi-person b{display:block;font-size:14px;color:var(--navy-900);}
.career-testi-person span{font-size:12px;color:var(--ink-400);}

/* ---------------------------------------------------------
   6. VALUE STRIP tweak
--------------------------------------------------------- */
.career-stats{padding-top:0;}

/* ---------------------------------------------------------
   7. OPEN POSITIONS — filter tabs + searchable job list
--------------------------------------------------------- */
.career-jobs-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:36px;}
.career-filter-tabs{display:flex;flex-wrap:wrap;gap:8px;}
.career-filter-tab{
  font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.02em;
  padding:9px 18px;border-radius:999px;border:1.5px solid var(--line);color:var(--ink-600);
  background:#fff;transition:all .3s var(--ease);
}
.career-filter-tab:hover{border-color:var(--blue-500);color:var(--navy-900);}
.career-filter-tab.is-active{background:var(--navy-900);border-color:var(--navy-900);color:#fff;}
.career-search{position:relative;flex:0 0 auto;width:260px;max-width:100%;}
.career-search input{
  width:100%;padding:11px 16px 11px 42px;border:1.5px solid var(--line);border-radius:999px;
  font-family:var(--font-body);font-size:14px;background:var(--ice-50);transition:border-color .3s, box-shadow .3s;
}
.career-search input:focus{outline:none;border-color:var(--blue-500);box-shadow:0 0 0 4px rgba(1,138,190,.15);background:#fff;}
.career-search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--ink-400);pointer-events:none;}
.career-job-count{font-family:var(--font-mono);font-size:12.5px;color:var(--ink-400);margin-bottom:18px;}
.job-card{cursor:pointer;}
.job-card[hidden]{display:none;}
.job-card .job-apply{flex:none;display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--navy-900);}
.job-card .job-apply svg{width:14px;height:14px;transition:transform .3s var(--ease);}
.job-card:hover .job-apply svg{transform:translate(3px,-3px);}
.career-empty{display:none;text-align:center;padding:60px 20px;color:var(--ink-400);border:1.5px dashed var(--line);border-radius:var(--radius-md);font-size:14.5px;}
.career-empty.show{display:block;}

/* ---------------------------------------------------------
   8. FAQ ACCORDION
--------------------------------------------------------- */
.career-faq{max-width:820px;margin:0 auto;display:flex;flex-direction:column;gap:14px;}
.career-faq-item{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:#fff;transition:border-color .3s;}
.career-faq-item.is-open{border-color:var(--blue-500);}
.career-faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:20px 24px;font-family:var(--font-display);font-weight:600;font-size:15.5px;color:var(--navy-900);text-align:left;}
.career-faq-q svg{flex:none;width:18px;height:18px;transition:transform .35s var(--ease);color:var(--blue-700);}
.career-faq-item.is-open .career-faq-q svg{transform:rotate(135deg);}
.career-faq-a{max-height:0;overflow:hidden;transition:max-height .4s var(--ease);}
.career-faq-a p{padding:0 24px 22px;color:var(--ink-600);font-size:14.5px;line-height:1.7;max-width:64ch;}

/* ---------------------------------------------------------
   9. FINAL CTA — "let recruiters find you" equivalent
--------------------------------------------------------- */
.career-final-cta{
  border-radius:var(--radius-lg);overflow:hidden;position:relative;
  background:linear-gradient(120deg,var(--navy-950) 0%,var(--navy-900) 55%,var(--blue-700) 130%);
  padding:64px 56px;display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;
}
.career-final-cta::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 20%, rgba(242,169,60,.22), transparent 55%);pointer-events:none;}
.career-final-cta-copy{position:relative;max-width:46ch;}
.career-final-cta h2{color:#fff;margin-bottom:12px;}
.career-final-cta p{color:rgba(255,255,255,.72);font-size:15.5px;}
.career-final-cta-actions{position:relative;display:flex;gap:12px;flex-wrap:wrap;}
@media (max-width:640px){.career-final-cta{padding:40px 26px;}.career-jobs-toolbar{flex-direction:column;align-items:stretch;}.career-search{width:100%;}}


/* =========================================================
   CERITA DARI TIM — COVERFLOW TESTIMONIAL CAROUSEL
   ========================================================= */
.testi-section{ padding-top:60px; padding-bottom:20px; overflow:hidden; }

.testi-carousel{
  position:relative;
  outline:none;
  height:clamp(430px, 46vw, 500px);
  margin-top:64px;
  display:flex;
  align-items:center;
  justify-content:center;
  touch-action:pan-y;
}

.testi-stage{ position:relative; width:100%; height:100%; }

.testi-slide{
  position:absolute;
  top:50%; left:50%;
  width:min(520px, 84vw);
  transform:translate(-50%,-50%);
  transition:
    transform .65s cubic-bezier(.22,1,.36,1),
    opacity .6s ease,
    filter .6s ease;
  will-change:transform, opacity, filter;
  cursor:pointer;
}
.testi-slide.is-active{ cursor:default; }

.testi-card{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-radius:28px;
  padding:60px 38px 34px;
  text-align:center;
  box-shadow:0 26px 50px -30px rgba(2,69,122,.28);
  transition:background .55s var(--ease), box-shadow .55s var(--ease), border-color .55s var(--ease);
}
.testi-slide.is-active .testi-card{
  background:linear-gradient(155deg, var(--blue-700) 0%, var(--navy-900) 78%);
  border-color:transparent;
  box-shadow:0 44px 80px -28px rgba(0,27,72,.55);
}

/* avatar bulat mengambang di atas kartu */
.testi-avatar-ring{
  position:absolute;
  top:0; left:50%;
  transform:translate(-50%,-52%);
  width:118px; height:118px;      /* sebelumnya 92px */
  border-radius:50%;
  padding:5px;                     /* sebelumnya 4px */
  background:#fff;
  box-shadow:0 12px 26px -10px rgba(2,69,122,.35), 0 0 0 1px var(--line);
  transition:all .55s var(--spring-ease);
  z-index:2;
}
.testi-avatar-initials{
  width:100%; height:100%;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(145deg, var(--blue-700) 0%, var(--navy-900) 100%);
  color:#fff;
  font-family:var(--font-display);
  font-weight:700;
  font-size:34px;
  letter-spacing:.04em;
  line-height:1;
  user-select:none;
  transition:background .55s var(--ease), color .55s var(--ease), font-size .55s var(--ease);
}
/* slide aktif: ring emas, jadi isi dibuat navy supaya kontras */
.testi-slide.is-active .testi-avatar-initials{
  background:linear-gradient(145deg, var(--navy-900) 0%, var(--blue-700) 100%);
  color:var(--gold-500);
  font-size:40px;
}
.testi-quote-icon{
  width:30px; height:24px; color:var(--ice-100); margin-bottom:14px; margin-top: 14px;
  transition:color .55s var(--ease);
}
.testi-slide.is-active .testi-quote-icon{ color:rgba(242,169,60,.55); }

.testi-quote-text{
  font-family:var(--font-display); font-weight:600;
  font-size:clamp(14.5px, 1.6vw, 16.5px); line-height:1.65;
  color:var(--ink-600); margin:0 0 26px;
  transition:color .55s var(--ease), font-size .55s var(--ease);
}
.testi-slide.is-active .testi-quote-text{ color:#fff; font-size:clamp(16px, 1.9vw, 19px); }

.testi-person{ display:flex; flex-direction:column; gap:4px; }
.testi-person-name{
  font-family:var(--font-display); font-weight:700; font-size:14.5px; color:var(--navy-900);
  transition:color .55s var(--ease), font-size .55s var(--ease);
}
.testi-slide.is-active .testi-person-name{ color:var(--gold-500); font-size:15.5px; }
.testi-person-role{ font-size:12px; color:var(--ink-400); transition:color .55s var(--ease); }
.testi-slide.is-active .testi-person-role{ color:rgba(255,255,255,.75); }

/* panah navigasi */
.testi-arrow{
  position:absolute; top:50%; translate:0 -50%;
  width:48px; height:48px; border-radius:50%; flex:none;
  border:1.5px solid var(--line); color:var(--navy-900); background:#fff;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  box-shadow:0 14px 26px -16px rgba(2,69,122,.35);
  z-index:20;
  transition:background .3s, border-color .3s, transform .3s, color .3s;
}
.testi-arrow svg{ width:18px; height:18px; }
.testi-arrow:hover{ background:var(--navy-900); border-color:var(--navy-900); color:#fff; transform:translateY(-50%) scale(1.06); }
.testi-arrow-prev{ left:0; }
.testi-arrow-next{ right:0; }

/* dot + progress autoplay */
.testi-dots{ display:flex; align-items:center; justify-content:center; gap:10px; margin-top:34px; }
.testi-dot{
  position:relative; width:32px; height:4px; border-radius:3px; background:var(--line);
  border:none; padding:0; cursor:pointer; overflow:hidden;
}
.testi-dot::after{
  content:""; position:absolute; left:0; top:0; bottom:0; width:var(--progress, 0%);
  background:var(--gold-500); border-radius:3px; transition:width 5.5s linear;
}
.testi-dot.is-active{ background:rgba(1,138,190,.18); }

@media (prefers-reduced-motion:reduce){
  .testi-slide, .testi-card, .testi-avatar-ring, .testi-quote-icon,
  .testi-quote-text, .testi-person-name, .testi-person-role{ transition:none !important; }
}

@media (max-width:900px){ .testi-arrow{ display:none; } }

@media (max-width:720px){
  .testi-carousel{ height:clamp(400px, 92vw, 460px); margin-top:52px; }
  .testi-card{ padding:52px 26px 30px; border-radius:22px; }
  .testi-avatar-ring{ width:92px; height:92px; }       /* sebelumnya 78px */
  .testi-slide.is-active .testi-avatar-ring{ width:108px; height:108px; } /* sebelumnya 92px */
  .testi-avatar-initials{ font-size:28px; }
.testi-slide.is-active .testi-avatar-initials{ font-size:33px; }
}

/* =========================================================
   ABOUT MOSAIC — 3-card horizontal layout replacing tabs
   ========================================================= */
.about-mosaic{
  display:grid;
  grid-template-columns:1.05fr .95fr 1fr;
  gap:24px;
  align-items:stretch;
}

.mosaic-card{
  border-radius:var(--radius-lg);
  display:flex;
  flex-direction:column;
  transition:transform var(--lift-ease), box-shadow var(--lift-ease);
}
.mosaic-card:hover{ transform:translateY(var(--lift-dist)); }

/* ---- Profil card ---- */
.mosaic-profile{
  background:#fff;
  border:1px solid var(--line);
  overflow:hidden;
  box-shadow:0 24px 50px -30px rgba(2,69,122,.22);
}
.mosaic-profile:hover{ box-shadow:0 34px 64px -28px rgba(2,69,122,.32); }
.mosaic-media{ aspect-ratio:16/11; overflow:hidden; position:relative; }
@media (min-width:1081px){ .mosaic-media{ aspect-ratio:16/8.5; } }
.mosaic-media img{ width:100%;height:100%;object-fit:cover; transition:transform .8s var(--ease); }
.mosaic-profile:hover .mosaic-media img{ transform:scale(1.07); }
.mosaic-body{ padding:28px 26px 30px; display:flex; flex-direction:column; flex:1; }
.mosaic-tag{
  align-self:flex-start;
  font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:var(--blue-700); background:var(--ice-100);
  padding:6px 14px; border-radius:999px; margin-bottom:14px;
}
.mosaic-body h3{ font-size:20px; margin-bottom:10px; }
.mosaic-body > p{ color:var(--ink-600); font-size:14.5px; line-height:1.65; margin-bottom:22px; }
.mosaic-stats{
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  margin-top:auto; padding-top:20px; border-top:1px solid var(--line);
}
.mosaic-stats div{ text-align:left; }
.mosaic-stats b{
  display:block; font-family:var(--font-mono); font-size:22px; font-weight:700; color:var(--navy-900);
}
.mosaic-stats span{ font-size:11px; color:var(--ink-400); text-transform:uppercase; letter-spacing:.04em; }

/* ---- Visi card ---- */
.mosaic-vision{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg, var(--blue-700), var(--navy-900) 75%);
  color:#fff; padding:34px 30px;
  box-shadow:0 24px 50px -24px rgba(1,138,190,.5);
}
.mosaic-vision::after{
  content:""; position:absolute; width:220px; height:220px; border-radius:50%;
  background:rgba(255,255,255,.08); right:-70px; bottom:-80px;
}
.mosaic-vision-icon{
  position:relative;
  z-index:1;

  width:58px;
  height:58px;

  border-radius:16px;

  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);

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

  color:var(--gold-500);

  margin-bottom:20px;

  box-shadow:
    0 8px 24px rgba(0,0,0,.12);
}

.mosaic-vision-icon svg{
  width:30px;
  height:30px;
}

.mosaic-label{
  position:relative; z-index:1;
  display:block; font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cyan-400); margin-bottom:14px;
}
.mosaic-big{
  position:relative; z-index:1;
  font-family:var(--font-display); font-weight:600; font-size:clamp(18px,1.9vw,22px);
  line-height:1.4; margin-bottom:28px;
}
.mosaic-mini-list{ position:relative; z-index:1; display:flex; flex-direction:column; gap:14px; margin-top:5px; }
.mosaic-mini-item{
  display:flex; align-items:center; gap:12px;
  padding-top:14px; border-top:1px solid rgba(255,255,255,.16);
}
.mosaic-mini-item:first-child{ border-top:none; padding-top:0; }
.mosaic-mini-item svg{ width:18px;height:18px; color:var(--gold-500); flex:none; }
.mosaic-mini-item span{ font-size:13.5px; color:rgba(255,255,255,.82); line-height:1.4; }

.mosaic-badge-foot{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:10px;
  margin-top:26px; padding-top:20px; border-top:1px solid rgba(255,255,255,.16);
  font-size:12.5px; font-weight:600; color:rgba(255,255,255,.85);
}
.mosaic-badge-foot svg{ width:16px;height:16px; color:var(--gold-500); flex:none; }

/* ---- Nilai card ---- */
.mosaic-values{
  background:#fff; border:1px solid var(--line); padding:34px 30px;
  box-shadow:0 24px 50px -30px rgba(2,69,122,.22);
  display:flex; flex-direction:column;
  transition:transform var(--lift-ease), box-shadow var(--lift-ease), border-color var(--lift-ease);
}
.mosaic-values:hover{ transform:translateY(var(--lift-dist)); box-shadow:0 34px 64px -28px rgba(2,69,122,.3); border-color:transparent; }
.mosaic-label-dark{ color:var(--blue-700); }
.mosaic-values h3{ font-size:20px; margin-bottom:10px; }
.mosaic-values > p{ color:var(--ink-600); font-size:14.5px; line-height:1.65; margin-bottom:24px; }
.mosaic-value-list{ display:flex; flex-direction:column; gap:16px; margin-top:20px; }
.mosaic-value-list li{ list-style:none; display:flex; align-items:flex-start; gap:14px; }
.mosaic-value-ic{
  width:38px;height:38px;border-radius:11px; flex:none;
  background:var(--ice-100); color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;
}
.mosaic-value-ic svg{ width:18px;height:18px; }
.mosaic-value-list span{ font-size:14px; color:var(--ink-600); line-height:1.55; padding-top:8px; }

.mosaic-values-foot{
  margin-top:24px; padding-top:18px; border-top:1px solid var(--line);
}
.mosaic-values-foot span{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-400); margin-bottom:5px;
}
.mosaic-values-foot b{
  font-family:var(--font-mono); font-size:12.5px; color:var(--navy-900); letter-spacing:.02em;
}

/* ---- Responsive ---- */
@media (max-width:1080px){
  .about-mosaic{ grid-template-columns:1fr 1fr; }
  .mosaic-profile{ grid-column:span 2; }
}
@media (max-width:720px){
  .about-mosaic{ grid-template-columns:1fr; gap:20px; }
  .mosaic-profile{ grid-column:auto; }
  .mosaic-body,.mosaic-vision,.mosaic-values{ padding:26px 22px; }
  .mosaic-stats{ grid-template-columns:repeat(3,1fr); gap:6px; }
}



/* =========================================================
   ATI CARES — VALUES
   ========================================================= */

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

.values-head{
  position:relative;
  z-index:1;
}

.values-title-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
}

.values-title-row h3{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:700;
  letter-spacing:-.02em;

  color:var(--navy-900);

  margin:0 0 8px;
  line-height:1.15;
}

.values-title-row p{
  color:var(--ink-600);
  font-size:14px;
  line-height:1.6;

  margin:0 0 24px;
  max-width:480px;
}


/* =========================================================
   CARES GRID
   Desktop:
   ATI | CARES
   ========================================================= */

.cares-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  align-items:start;
}


/* =========================================================
   CARES COLUMN
   ========================================================= */

.cares-column{
  display:flex;
  flex-direction:column;
  gap:7px;
}


/* =========================================================
   PEMISAH ATI | CARES
   ========================================================= */

.cares-cares{
  border-left:1px solid var(--line);
  padding-left:18px;
}


/* =========================================================
   VALUE ITEM
   ========================================================= */

.cares-item{
  display:flex;
  align-items:flex-start;
  gap:11px;

  padding:11px 9px;

  border:1px solid transparent;
  border-radius:12px;

  transition:
    background .3s var(--ease),
    border-color .3s var(--ease),
    transform .3s var(--ease);
}

.cares-item:hover{
  background:var(--ice-100);
  border-color:rgba(2,69,122,.08);
  transform:translateY(-2px);
}


/* =========================================================
   LETTER
   ========================================================= */

.cares-letter{
  width:36px;
  height:36px;

  flex:none;

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

  border-radius:10px;

  background:linear-gradient(
    135deg,
    var(--blue-700),
    var(--navy-900)
  );

  color:#fff;

  font-family:var(--font-mono);
  font-size:14px;
  font-weight:800;

  box-shadow:0 5px 12px rgba(2,69,122,.16);

  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease);
}

.cares-item:hover .cares-letter{
  transform:scale(1.06);

  box-shadow:
    0 7px 16px rgba(2,69,122,.22);
}


/* =========================================================
   VALUE TEXT
   ========================================================= */

.cares-item strong{
  display:block;

  color:var(--navy-900);

  font-size:13.5px;
  font-weight:700;

  line-height:1.35;

  margin-bottom:4px;
}

.cares-item span{
  display:block;

  color:var(--ink-500);

  font-size:11.5px;

  line-height:1.45;
}


/* =========================================================
   MOTTO
   ========================================================= */

.mosaic-values-foot{
  margin-top:22px;
  padding-top:18px;

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

.mosaic-values-foot > span{
  display:block;

  font-family:var(--font-mono);

  font-size:10.5px;
  font-weight:700;

  letter-spacing:.12em;
  text-transform:uppercase;

  color:var(--ink-400);

  margin-bottom:11px;
}


/* =========================================================
   MOTTO LIST
   ========================================================= */

.motto-list{
  display:grid;

  grid-template-columns:repeat(5,1fr);

  gap:6px;
}

.motto-list div{
  min-width:0;
}

.motto-list b{
  display:block;

  color:var(--blue-700);

  font-family:var(--font-mono);

  font-size:10.5px;
  font-weight:700;

  line-height:1.35;
}

.motto-list small{
  display:block;

  color:var(--ink-400);

  font-size:9px;

  line-height:1.35;

  margin-top:3px;
}


/* =========================================================
   DESKTOP REFINEMENT
   ========================================================= */

@media (min-width:1081px){

  .cares-item{
    padding:10px 8px;
  }

  .cares-item span{
    max-width:190px;
  }

}


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

@media (max-width:900px){

  .cares-grid{
    gap:12px;
  }

  .cares-cares{
    padding-left:12px;
  }

  .cares-item{
    padding:10px 7px;
  }

  .cares-item strong{
    font-size:13px;
  }

  .cares-item span{
    font-size:11px;
  }

}


/* =========================================================
   MOBILE
   ATI → CARES
   A → T → I → C → A → R → E → S
   ========================================================= */

@media (max-width:720px){

  .mosaic-values{
    padding:26px 22px;
  }

  .cares-grid{
    grid-template-columns:1fr;
    gap:4px;
  }

  .cares-column{
    gap:4px;
  }

  .cares-cares{
    border-left:none;

    padding-left:0;
    padding-top:5px;

    margin-top:5px;

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

  .cares-item{
    padding:10px 8px;
  }

  .cares-item strong{
    font-size:13.5px;
  }

  .cares-item span{
    font-size:11.5px;
  }

  .motto-list{
    grid-template-columns:repeat(2,1fr);
    gap:10px;
  }

}


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

@media (max-width:420px){

  .mosaic-values{
    padding:24px 18px;
  }

  .values-title-row h3{
    font-size:27px;
  }

  .values-title-row p{
    font-size:13px;
  }

  .cares-item{
    padding:9px 6px;
  }

  .cares-letter{
    width:34px;
    height:34px;

    border-radius:9px;

    font-size:13px;
  }

  .cares-item strong{
    font-size:13px;
  }

  .cares-item span{
    font-size:11px;
  }

}

/* =========================================================
   CAREER GALLERY + LIGHTBOX
   ========================================================= */
.career-gallery{ columns:3; column-gap:20px; }
.career-gallery .gallery-item{
  display:block; width:100%; padding:0; border:none; background:none;
  cursor:pointer; text-align:left; font:inherit; color:inherit;
  break-inside:avoid; margin-bottom:20px; border-radius:var(--radius-md);
  overflow:hidden; position:relative;
  box-shadow:0 18px 36px -22px rgba(2,69,122,.3);
  transition:transform var(--lift-ease), box-shadow var(--lift-ease);
}
.career-gallery .gallery-item:hover,
.career-gallery .gallery-item:focus-visible{
  transform:translateY(var(--lift-dist));
  box-shadow:0 28px 48px -20px rgba(2,69,122,.4);
}
.career-gallery .gallery-item img{
  width:100%; display:block; transition:transform .7s var(--ease), filter .5s var(--ease);
}
.career-gallery .gallery-item:hover img,
.career-gallery .gallery-item:focus-visible img{
  transform:scale(1.08);
}
.career-gallery .gallery-item::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,27,72,.85) 0%, rgba(0,27,72,.15) 45%, transparent 65%);
  opacity:.55; transition:opacity .4s var(--ease);
}
.career-gallery .gallery-item:hover::after{ opacity:.85; }
.career-gallery .gallery-caption{
  position:absolute; inset:auto 0 0 0; padding:20px 20px 18px; z-index:1;
  color:#fff; transform:translateY(8px); opacity:.92;
  transition:transform .4s var(--ease);
}
.career-gallery .gallery-item:hover .gallery-caption{ transform:translateY(0); }
.career-gallery .gallery-caption b{ display:block; font-family:var(--font-display); font-size:15px; margin-bottom:2px; }
.career-gallery .gallery-caption span{ font-size:12.5px; color:rgba(255,255,255,.75); }

/* zoom-cue icon */
.career-gallery .gallery-item::before{
  content:""; position:absolute; top:14px; right:14px; z-index:2;
  width:34px; height:34px; border-radius:50%;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.35);
  backdrop-filter:blur(6px);
  opacity:0; transform:scale(.7);
  transition:opacity .35s var(--ease), transform .35s var(--spring-ease);
}
.career-gallery .gallery-item:hover::before{ opacity:1; transform:scale(1); }

@media (max-width:1080px){ .career-gallery{ columns:2; } }
@media (max-width:640px){ .career-gallery{ columns:1; } }

/* ---- Lightbox ---- */
.lightbox{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden;
  transition:opacity .35s var(--ease), visibility .35s var(--ease);
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox-backdrop{
  position:absolute; inset:0;
  background:rgba(0,10,30,.88); backdrop-filter:blur(6px);
}
.lightbox-figure{
  position:relative; z-index:1; max-width:min(880px,90vw); max-height:86vh;
  display:flex; flex-direction:column; align-items:center;
  transform:scale(.94) translateY(14px); opacity:0;
  transition:transform .4s var(--spring-ease), opacity .4s var(--ease);
}
.lightbox.is-open .lightbox-figure{ transform:scale(1) translateY(0); opacity:1; }
.lightbox-figure img{
  max-width:100%; max-height:70vh; width:auto; border-radius:var(--radius-md);
  box-shadow:0 40px 80px -20px rgba(0,0,0,.6);
  display:block;
}
.lightbox-figure figcaption{
  margin-top:18px; text-align:center; color:#fff;
}
.lightbox-figure figcaption b{ display:block; font-family:var(--font-display); font-size:17px; margin-bottom:4px; }
.lightbox-figure figcaption span{ font-size:13.5px; color:rgba(255,255,255,.7); }

.lightbox-close{
  position:absolute; top:24px; right:24px; z-index:2;
  width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.lightbox-close:hover{ background:var(--gold-500); color:var(--navy-950); transform:rotate(90deg); }
.lightbox-close svg{ width:18px; height:18px; }

.lightbox-arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:2;
  width:50px; height:50px; border-radius:50%;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.25); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s, transform .3s;
}
.lightbox-arrow:hover{ background:var(--gold-500); color:var(--navy-950); }
.lightbox-arrow svg{ width:20px; height:20px; }
.lightbox-prev{ left:20px; }
.lightbox-next{ right:20px; }

@media (max-width:640px){
  .lightbox-figure{ max-width:94vw; }
  .lightbox-close{ top:14px; right:14px; width:38px; height:38px; }
  .lightbox-arrow{ width:42px; height:42px; }
  .lightbox-prev{ left:8px; }
  .lightbox-next{ right:8px; }
  .lightbox-figure figcaption b{ font-size:15px; }
}

/* fallback kalau --spring-ease belum ada di :root manapun */
:root{
  --spring-ease: cubic-bezier(.34,1.56,.64,1);
}

/* =========================================================
   CAREER GALLERY FILTER TABS
   ========================================================= */
.career-filter-tabs{
  display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px;
}
.career-filter-tab{
  padding:6px 17px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;color:var(--ink-600);font-size:13.5px;font-weight:700;
  font:inherit;cursor:pointer;
  transition:all .3s var(--ease);
}
.career-filter-tab:hover{border-color:var(--blue-500);color:var(--navy-900);}
.career-filter-tab.is-active{
  background:var(--navy-900);border-color:var(--navy-900);color:#fff;
  box-shadow:0 10px 20px -10px rgba(2,69,122,.4);
}
@media (max-width:640px){
  .career-filter-tabs{gap:8px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:6px;}
  .career-filter-tab{flex:none;padding:9px 16px;font-size:12.5px;}
}

.career-gallery [data-hide]{display:none;}

.career-gallery-empty{
  display:none;text-align:center;padding:50px 20px;color:var(--ink-400);font-size:14.5px;
}
.career-gallery-empty.is-visible{display:block;}

/* =========================================================
   CAREER SAFETY / ANTI-PENIPUAN CTA — v4 (NAVY + GOLD)
   Base gelap pakai navy asli template (bukan coklat/rust),
   aksen full gold. Shield 3D + mesh blob tetap ada.
   ========================================================= */
.career-safety-cta{
  position:relative;
  overflow:hidden;
  border-radius:28px;
  background:
    radial-gradient(120% 140% at 100% 0%, rgba(242,169,60,.20), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(1,138,190,.18), transparent 50%),
    linear-gradient(155deg, var(--navy-950) 0%, var(--navy-900) 55%, var(--blue-700) 130%);
  padding:60px 56px;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:48px;
  align-items:center;
  box-shadow:0 40px 90px -34px rgba(0,27,72,.55);
  isolation:isolate;
  border:1px solid rgba(255,255,255,.08);
}

/* soft animated mesh blobs — gold + cyan, no red/brown */
.career-safety-cta::before,
.career-safety-cta::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(60px);
  z-index:0;
  pointer-events:none;
}
.career-safety-cta::before{
  width:420px;height:420px;
  top:-160px;right:-120px;
  background:radial-gradient(circle, rgba(242,169,60,.32), transparent 70%);
  animation:safetyDrift 12s ease-in-out infinite;
}
.career-safety-cta::after{
  width:320px;height:320px;
  bottom:-140px;left:-80px;
  background:radial-gradient(circle, rgba(74,222,255,.18), transparent 70%);
  animation:safetyDrift 12s ease-in-out infinite reverse;
}
@keyframes safetyDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-18px,16px) scale(1.08); }
}

/* ---------------------------------------------------------
   3D SHIELD
--------------------------------------------------------- */
.career-safety-badge{
  position:relative;
  z-index:2;
  width:132px;height:132px;
  flex:none;
  display:grid;
  place-items:center;
}
.career-safety-badge-glow{
  position:absolute; inset:-26px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(242,169,60,.55), rgba(242,169,60,.12) 55%, transparent 75%);
  animation:safetyPulse 2.6s ease-in-out infinite;
  z-index:0;
}
.career-safety-badge-ring{
  position:absolute; inset:-4px;
  border-radius:50%;
  border:1.5px dashed rgba(242,169,60,.5);
  animation:safetySpin 16s linear infinite;
  z-index:1;
}
.career-safety-shield{
  position:relative; z-index:2;
  width:104px; height:104px;
  filter:drop-shadow(0 18px 28px rgba(0,10,30,.45));
  transition:transform .5s var(--spring-ease);
}
.career-safety-cta:hover .career-safety-shield{ transform:translateY(-4px) rotate(-2deg); }

@keyframes safetyPulse{
  0%,100%{ opacity:.55; transform:scale(.92); }
  50%{ opacity:1; transform:scale(1.1); }
}
@keyframes safetySpin{ to{ transform:rotate(360deg); } }

/* ---------------------------------------------------------
   Copy
--------------------------------------------------------- */
.career-safety-copy{ position:relative; z-index:2; }

.career-safety-eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:11.5px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--gold-500);
  background:rgba(0,0,0,.22);
  border:1px solid rgba(242,169,60,.4);
  padding:7px 16px; border-radius:999px;
  margin-bottom:18px;
}
.career-safety-dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--gold-500);
  animation:safetyDot 1.8s ease-in-out infinite;
}
@keyframes safetyDot{
  0%{ box-shadow:0 0 0 0 rgba(242,169,60,.55); }
  70%{ box-shadow:0 0 0 7px rgba(242,169,60,0); }
  100%{ box-shadow:0 0 0 0 rgba(242,169,60,0); }
}

.career-safety-copy h2{
  color:#fff;
  font-size:clamp(22px,2.4vw,29px);
  margin:0 0 14px;
  line-height:1.25;
  max-width:28ch;
}
.career-safety-copy > p{
  color:rgba(255,255,255,.8);
  font-size:15px;
  line-height:1.7;
  max-width:64ch;
  margin:0 0 26px;
}
.career-safety-copy > p strong{ color:#fff; }

.career-safety-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px 26px;
  margin:0 0 30px;
  padding:0;
}
.career-safety-list li{
  list-style:none;
  display:flex; align-items:flex-start; gap:11px;
  font-size:13.5px; color:rgba(255,255,255,.9); line-height:1.5;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  transition:background .3s var(--ease), transform .3s var(--ease);
}
.career-safety-list li:hover{
  background:rgba(255,255,255,.09);
  transform:translateY(-2px);
}
.career-safety-list li strong{ color:var(--gold-500); }
.career-safety-check{
  flex:none; width:22px;height:22px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(242,169,60,.22);
  border:1px solid rgba(242,169,60,.55);
  color:var(--gold-500); margin-top:1px;
}
.career-safety-check svg{ width:12px;height:12px; }

.career-safety-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.career-safety-actions .btn-primary{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--navy-950);
  box-shadow:0 16px 32px -14px rgba(0,0,0,.45);
}
.career-safety-actions .btn-primary:hover{ filter:brightness(1.06); transform:translateY(-2px); }
.career-safety-actions .btn-outline{ color:#fff; border-color:rgba(255,255,255,.35); }
.career-safety-actions .btn-outline:hover{ background:rgba(255,255,255,.12); border-color:#fff; }
.career-safety-actions .btn{ transition:transform .3s var(--ease), filter .3s var(--ease), background .3s var(--ease), border-color .3s var(--ease); }

@media (prefers-reduced-motion:reduce){
  .career-safety-cta::before,
  .career-safety-cta::after,
  .career-safety-badge-glow,
  .career-safety-badge-ring,
  .career-safety-dot,
  .career-safety-shield{ animation:none !important; transition:none !important; }
}

/* ---------------------------------------------------------
   Responsive
--------------------------------------------------------- */
@media (max-width:1080px){
  .career-safety-cta{ grid-template-columns:1fr; padding:44px 38px; gap:30px; text-align:left; }
  .career-safety-badge{ margin-bottom:2px; }
}
@media (max-width:640px){
  .career-safety-cta{ padding:36px 24px; border-radius:20px; }
  .career-safety-copy h2{ max-width:none; }
  .career-safety-list{ grid-template-columns:1fr; }
  .career-safety-badge{ width:104px; height:104px; }
  .career-safety-shield{ width:80px; height:80px; }
}

/* ---- job title as link ---- */
.job-title-link{
  color:inherit;
  text-decoration:none;
  transition:color .3s var(--ease);
}
.job-title-link:hover{
  color:var(--blue-700);
}

/* ---- dual actions: Lihat Detail + Lamar ---- */
.career-job-grid .job-card{
  /* pastikan card tetap flex column, actions nempel di bawah */
}
.job-card-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  padding-top:4px;
}
.job-detail-link{
  display:inline-flex;
  align-items:center;
  gap:6px;

  font-size:13px;
  font-weight:700;
  color:var(--blue-700);

  padding:4px 0;
  border-bottom:1.5px solid transparent;

  transition:
    color .3s var(--ease),
    border-color .3s var(--ease),
    gap .3s var(--ease);
}

.job-detail-link svg{
  width:13px;
  height:13px;
  flex:none;
  transition:transform .3s var(--ease);
}

.job-detail-link:hover{
  color:var(--navy-900);
  border-color:var(--navy-900);
  gap:9px;
}

.job-detail-link:hover svg{
  transform:translateX(2px);
}
/* =========================================================
   RECRUITMENT FLOW — "Alur Melamar di ATI"  v2 (LIGHT + 3D)
   Ganti SELURUH block lama:
     "9. RECRUITMENT FLOW — alur pendaftaran, 6 langkah ..."
   sampai akhir file career.css dengan block di bawah ini.
   Tema terang, clean, timeline bernomor, hover 3D di card
   & icon, tetap konsisten dgn palet navy/blue/gold yang
   sudah ada (pakai variable --navy-900, --blue-700, dst).
   ========================================================= */

.career-flow-section{
  position:relative;
  overflow:hidden;
  background:linear-gradient(180deg, #fff 0%, var(--ice-50) 45%, #fff 100%);
}

/* dekorasi blob lembut — bukan warna gelap, jadi aman di mata */
.career-flow-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  pointer-events:none;
  z-index:0;
  opacity:.55;
}
.career-flow-blob-1{
  width:420px;height:420px;
  top:-140px; right:-100px;
  background:radial-gradient(circle, rgba(1,138,190,.16), transparent 70%);
  animation:flowBlobDrift 14s ease-in-out infinite;
}
.career-flow-blob-2{
  width:360px;height:360px;
  bottom:-160px; left:-100px;
  background:radial-gradient(circle, rgba(242,169,60,.18), transparent 70%);
  animation:flowBlobDrift 14s ease-in-out infinite reverse;
}
@keyframes flowBlobDrift{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(-16px,14px) scale(1.06); }
}

.career-flow-section .section-head p{ color:var(--ink-600); }

/* ---------------------------------------------------------
   TIMELINE — grid + connecting line
--------------------------------------------------------- */
.career-flow-timeline{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:18px;
  margin-top:74px;
}

/* garis penghubung horizontal, sejajar titik tengah node */
.career-flow-timeline::before{
  content:"";
  position:absolute;
  top:26px;
  left:calc(100%/12);
  right:calc(100%/12);
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, var(--gold-500), var(--blue-500) 50%, var(--gold-500));
  opacity:.35;
  z-index:0;
}
/* highlight yang "berjalan" pelan di atas garis — halus, bukan strobing */
.career-flow-timeline::after{
  content:"";
  position:absolute;
  top:26px;
  left:calc(100%/12);
  width:14%;
  height:3px;
  border-radius:3px;
  background:linear-gradient(90deg, transparent, var(--gold-500) 50%, transparent);
  animation:flowLineTravel 6s ease-in-out infinite;
  z-index:0;
}
@keyframes flowLineTravel{
  0%{ left:calc(100%/12); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ left:78%; opacity:0; }
}

/* ---------------------------------------------------------
   STEP — perspective wrapper utk efek 3D
--------------------------------------------------------- */
.career-flow-step{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  perspective:900px;
}

/* NODE bernomor, duduk di atas garis timeline */
.career-flow-node{
  position:relative;
  z-index:2;
  width:52px;height:52px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(150deg, var(--blue-700), var(--navy-900));
  color:#fff;
  font-family:var(--font-mono);
  font-weight:800;
  font-size:14px;
  letter-spacing:.02em;
  box-shadow:
    0 0 0 6px #fff,
    0 0 0 7px var(--line),
    0 14px 26px -12px rgba(2,69,122,.45);
  margin-bottom:18px;
  transition:transform .4s var(--spring-ease), box-shadow .4s var(--ease);
}
.career-flow-step:hover .career-flow-node{
  transform:translateY(-3px) scale(1.08);
  box-shadow:
    0 0 0 6px #fff,
    0 0 0 7px var(--gold-500),
    0 18px 30px -12px rgba(242,169,60,.5);
}

/* CARD — light, clean, dengan tilt 3D saat hover */
.career-flow-card{
  position:relative;
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px 20px 24px;
  text-align:center;
  transform-style:preserve-3d;
  transition:
    transform .5s var(--spring-ease),
    box-shadow .5s var(--ease),
    border-color .4s var(--ease);
  box-shadow:0 18px 34px -26px rgba(2,69,122,.18);
}
.career-flow-step:hover .career-flow-card{
  transform:translateY(-10px) rotateX(6deg) rotateY(-4deg);
  border-color:transparent;
  box-shadow:0 34px 54px -22px rgba(2,69,122,.32);
}

/* ICON — bulat, gradient, mengapung halus + flip ringan saat hover */
.career-flow-icon{
  width:56px;height:56px;
  margin:0 auto 16px;
  border-radius:16px;
  background:linear-gradient(150deg, var(--ice-100), #fff);
  border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--blue-700);
  box-shadow:0 10px 18px -12px rgba(2,69,122,.25);
  transition:transform .5s var(--spring-ease), box-shadow .4s var(--ease), color .4s var(--ease), background .4s var(--ease);
  animation:flowIconFloat 4.5s ease-in-out infinite;
  animation-delay:calc(var(--i, 0) * .25s);
}
.career-flow-step:hover .career-flow-icon{
  transform:translateY(-4px) rotateY(180deg);
  background:linear-gradient(150deg, var(--blue-700), var(--navy-900));
  color:#fff;
  box-shadow:0 16px 26px -12px rgba(1,138,190,.5);
}
/* icon svg dibalik lagi supaya tidak mirror waktu card di-flip */
.career-flow-step:hover .career-flow-icon svg{ transform:rotateY(180deg); }
.career-flow-icon svg{ width:24px;height:24px; display:block; transition:transform .5s var(--spring-ease); }

@keyframes flowIconFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-4px); }
}

.career-flow-card h4{ color:var(--navy-900); font-size:15.5px; margin-bottom:8px; }
.career-flow-card > p{
  color:var(--ink-500);
  font-size:13px; line-height:1.55;
  margin-bottom:14px;
  min-height:40px;
}

.career-flow-time{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:700;
  color:var(--blue-700);
  background:var(--ice-100);
  border-radius:999px;
  padding:5px 12px;
  margin-bottom:18px;
}
.career-flow-time svg{ width:12px; height:12px; display:block; }

.career-flow-checklist{
  list-style:none; text-align:left;
  border-top:1px dashed var(--line);
  padding-top:14px; margin:0;
  display:flex; flex-direction:column; gap:9px;
}
.career-flow-checklist li{
  display:flex; align-items:flex-start; gap:9px;
  font-size:11.5px; line-height:1.5;
  color:var(--ink-500);
}
.career-flow-check{
  flex:none; width:16px; height:16px; margin-top:1px;
  border-radius:50%;
  background:rgba(1,138,190,.12);
  color:var(--blue-700);
  display:flex; align-items:center; justify-content:center;
  transition:background .3s var(--ease), color .3s var(--ease);
}
.career-flow-step:hover .career-flow-check{
  background:rgba(242,169,60,.2);
  color:var(--gold-500);
}
.career-flow-check svg{ width:9px; height:9px; display:block; }

/* ---------------------------------------------------------
   CTA
--------------------------------------------------------- */
.career-flow-cta{ margin-top:52px; text-align:center; }
.career-flow-cta p{ color:var(--ink-600); font-size:14.5px; margin-bottom:18px; }

/* ---------------------------------------------------------
   RESPONSIVE
--------------------------------------------------------- */
@media (max-width:1100px){
  .career-flow-timeline{ grid-template-columns:repeat(3,1fr); row-gap:32px; }
  .career-flow-timeline::before, .career-flow-timeline::after{ display:none; }
}

@media (max-width:640px){
  /* jadi vertical stepper: node kiri + garis, card di kanan */
  .career-flow-timeline{
    grid-template-columns:1fr;
    gap:0;
    margin-top:52px;
  }
  .career-flow-step{
    flex-direction:row;
    align-items:flex-start;
    gap:16px;
    padding-bottom:28px;
    perspective:none;
  }
  .career-flow-step:last-child{ padding-bottom:0; }
  .career-flow-node{
    flex:none;
    margin-bottom:0;
    width:42px;height:42px;
    font-size:12px;
  }
  /* garis vertikal penghubung antar node */
  .career-flow-step:not(:last-child)::before{
    content:"";
    position:absolute;
    left:20px; top:42px; bottom:0;
    width:2px;
    background:linear-gradient(180deg, var(--gold-500), var(--blue-500));
    opacity:.3;
  }
  .career-flow-card{ text-align:left; padding:20px 18px; }
  .career-flow-step:hover .career-flow-card{ transform:translateY(-4px); }
  .career-flow-icon{ margin:0 0 12px; }
}

/* hormati preferensi reduced-motion */
@media (prefers-reduced-motion:reduce){
  .career-flow-blob,
  .career-flow-timeline::after,
  .career-flow-icon,
  .career-flow-node,
  .career-flow-card{ animation:none !important; }
  .career-flow-step:hover .career-flow-card,
  .career-flow-step:hover .career-flow-icon,
  .career-flow-step:hover .career-flow-icon svg,
  .career-flow-step:hover .career-flow-node{ transform:none !important; }
}