/* RBM Careers: semua selector diawali .rbmk agar tidak bentrok dengan tema */
.rbmk{
  --bg:#F3F5F7;--surface:#fff;--ink:#1B2A3A;--muted:#566574;--line:#D9DFE5;
  --brand:#F2572B;--tape:#FFC93C;--band:#1B2A3A;
  background:var(--bg);color:var(--ink);font:400 1rem/1.6 "DM Sans",system-ui,sans-serif;
  padding:24px 0 56px;box-sizing:border-box;
}
.rbmk *{box-sizing:border-box}
.rbmk-wrap{max-width:960px;margin:0 auto;padding-left:20px;padding-right:20px}
.rbmk h1,.rbmk h2,.rbmk h3,.rbmk h4{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;color:var(--ink);line-height:1.1;margin:0}
.rbmk h2{font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;margin-bottom:24px}
.rbmk-section{padding-top:48px;padding-bottom:8px}
.rbmk a:focus-visible,.rbmk summary:focus-visible{outline:3px solid var(--tape);outline-offset:3px}

/* Hero */
.rbmk-hero{padding-top:48px;padding-bottom:16px;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:32px;align-items:start}
.rbmk-ph{aspect-ratio:4/3;border:2px dashed var(--line);border-radius:16px;background:var(--surface);display:grid;place-items:center;text-align:center;padding:16px;color:var(--muted);font-size:.9rem}
@media (max-width:700px){.rbmk-hero{grid-template-columns:1fr}}
.rbmk-tag{display:inline-block;background:var(--tape);color:#1B2A3A;font-weight:700;font-size:.9rem;padding:6px 14px;border-radius:6px;transform:rotate(-2deg);margin-bottom:20px;border:2px dashed #1B2A3A}
.rbmk .rbmk-h1{font-size:clamp(2.6rem,9vw,5.2rem);font-weight:800;letter-spacing:-.02em;max-width:11ch}
.rbmk .rbmk-h1 span{display:inline-block;background:var(--brand);color:#fff;padding:0 .15em;border-radius:.12em;transform:rotate(-1.5deg)}
.rbmk-hero p{max-width:46ch;font-size:1.15rem;color:var(--muted);margin:24px 0 28px}



/* bayangan elips di bawah foto */
.rbmk-hero-media{position:relative;isolation:isolate;padding:32px 32px 56px}

.rbmk-hero-media::before,
.rbmk-hero-media::after{
  content:"";position:absolute;z-index:-1;
  bottom:60px;width:46%;height:60px;
  box-shadow:0 18px 26px rgba(27,42,58,.30);
  transition:transform .5s cubic-bezier(.2,.7,.2,1);
}
.rbmk-hero-media::before{left:44px;transform:rotate(-2.5deg)}
.rbmk-hero-media::after{right:44px;transform:rotate(2.5deg)}

@media (max-width:600px){
  .rbmk-hero-media{padding:20px 20px 40px}
  .rbmk-hero-media::before,
  .rbmk-hero-media::after{bottom:44px;height:44px;box-shadow:0 12px 18px rgba(27,42,58,.30)}
  .rbmk-hero-media::before{left:30px}
  .rbmk-hero-media::after{right:30px}
}


.rbmk .rbmk-hero-photo{
  position:relative;margin:0;max-width:100%;overflow:hidden;
  border-radius:24px;
  box-shadow:0 0 0 2px #fff,0 0 0 2px rgba(27,42,58,.08); /* outline putih + garis tipis */
  transition:box-shadow .5s ease;
}

@media (max-width:600px){
  .rbmk-hero-media{padding:20px 20px 40px}
  .rbmk-hero-media::before{left:8%;right:8%;bottom:10px;height:28px;filter:blur(16px)}
}

.rbmk .rbmk-hero-photo img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border:0;border-radius:0;box-shadow:none;transform:none;
}



    .rbmk .rbmk-hero-photo img{
  transition:transform .8s cubic-bezier(.2,.7,.2,1);
  
}
.rbmk .rbmk-hero-photo{
  transition:box-shadow .5s ease;
}
.rbmk .rbmk-hero-photo::after{
  transition:opacity .5s ease;
}

@media (hover:hover){
  .rbmk-hero-media:hover::before,
  .rbmk-hero-media:hover::after{
    box-shadow:0 24px 36px rgba(27,42,58,.42);
  }
  .rbmk .rbmk-hero-photo:hover img{transform:scale(1.08)}
  .rbmk .rbmk-hero-photo:hover::after{opacity:.6}
}


/* Tombol & tautan */
/* Tombol & tautan */
.rbmk a.rbmk-btn,.rbmk button.rbmk-btn{display:inline-block;background:#DBF8FA;color:#0A333F;font-weight:700;text-decoration:none;padding:13px 24px;border-radius:10px}
.rbmk button.rbmk-btn{border:0;cursor:pointer;font:inherit;font-weight:700}
.rbmk a.rbmk-btn:hover,.rbmk button.rbmk-btn:hover{filter:brightness(.93);color:#fff}

.rbmk a.rbmk-alt{font-size:.92rem;color:var(--muted);text-decoration:underline}


/* Lowongan */
.rbmk-jobs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
@media (max-width:700px){.rbmk-jobs{grid-template-columns:1fr}}
.rbmk details.rbmk-job{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.rbmk details.rbmk-job[open]{border-color:var(--brand)}
.rbmk-job summary{list-style:none;cursor:pointer;padding:22px 24px;display:flex;gap:16px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.rbmk-job summary::-webkit-details-marker{display:none}
.rbmk .rbmk-job h3{font-size:1.4rem;font-weight:800}
.rbmk-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.rbmk-meta span{font-size:.85rem;border:1px solid var(--line);border-radius:99px;padding:2px 12px;color:var(--muted)}
.rbmk-toggle{width:36px;height:36px;border-radius:50%;background:var(--bg);display:grid;place-items:center;font-weight:700;flex:none;transition:transform .2s}
.rbmk-job[open] .rbmk-toggle{transform:rotate(45deg);background:var(--brand);color:#fff}
.rbmk-body{padding:0 24px 26px;border-top:1px solid var(--line)}
.rbmk .rbmk-body h4{margin:20px 0 6px;font-size:1.05rem}
.rbmk-body p,.rbmk-body ul{margin:0;color:var(--muted)}
.rbmk-body ul{padding-left:20px}
.rbmk-apply{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:24px}
.rbmk-empty{color:var(--muted);margin:0}
.rbmk-note{margin:16px 0 0;font-size:.9rem;color:var(--muted)}
.rbmk-note strong{font-weight:500;font-size:.7.2em;color:var(--ink)}

/* Proses */
.rbmk .rbmk-steps{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));counter-reset:rbmk-s}
.rbmk-steps li{counter-increment:rbmk-s;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin:0}
.rbmk-steps li::before{content:counter(rbmk-s);display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;margin-bottom:12px}
.rbmk-steps b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.1rem}
.rbmk-steps span{display:block;color:var(--muted);font-size:.9rem;margin-top:4px}

/* FAQ */
.rbmk-faq details{border-bottom:1px solid var(--line);padding:16px 0}
.rbmk-faq summary{cursor:pointer;font-weight:700}
.rbmk-faq p{margin:10px 0 0;color:var(--muted)}

/* CTA */
.rbmk-cta{margin-top:48px;background:var(--band);border-radius:20px;padding:40px 28px}
.rbmk .rbmk-cta h2{color:#fff;margin-bottom:12px}
.rbmk-cta p{margin:0 0 24px;max-width:48ch;color:#D5DCE3}

@media (prefers-reduced-motion:reduce){.rbmk *{transition:none!important}}

/* Popup lamar */
.rbmk .rbmk-modal{border:0;border-radius:20px;padding:0;width:min(440px,calc(100% - 32px));color:var(--ink);background:var(--surface);box-shadow:0 24px 60px rgba(27,42,58,.35)}
.rbmk .rbmk-modal[open]{animation:rbmk-pop .18s ease-out}
.rbmk-modal::backdrop{background:rgba(27,42,58,.6)}
@keyframes rbmk-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.rbmk .rbmk-modal-in{position:relative;padding:28px 24px 24px}
.rbmk .rbmk-modal-title{font-family:"Bricolage Grotesque","DM Sans",system-ui,sans-serif;font-weight:800;font-size:1.35rem;line-height:1.2;padding-right:40px}
.rbmk .rbmk-modal p{margin:8px 0 0;color:var(--muted)}
.rbmk .rbmk-modal-x{position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;border:0;background:var(--bg);color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer}
.rbmk .rbmk-modal-x:hover{background:var(--brand);color:#fff}
.rbmk .rbmk-portals{display:grid;gap:10px;margin-top:20px}
.rbmk .rbmk-portal{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:700;text-decoration:none;transition:border-color .15s,transform .15s}
.rbmk .rbmk-portal::after{content:"\2192";color:var(--brand)}
.rbmk .rbmk-portal:hover{border-color:var(--brand);transform:translateY(-1px)}
.rbmk .rbmk-portal-name{display:flex;align-items:center;gap:12px}

.rbmk .rbmk-portal-logo{width:44px;height:44px;margin:-8px 0;object-fit:contain;border-radius:10px;flex:none}
.rbmk .rbmk-portal-ico{width:44px;height:44px;margin:-8px 0;border-radius:10px;background:var(--bg);color:var(--ink);display:grid;place-items:center;font-weight:800;font-size:1.1rem;flex:none}

/* ===== Animasi pembuka hero ===== */
@keyframes rbmk-rise{
  from{opacity:0;transform:translateY(28px)}
  to{opacity:1;transform:none}
}
@keyframes rbmk-swipe{
  from{clip-path:inset(0 100% 0 0);transform:rotate(-5deg) translateY(8px)}
  60%{transform:rotate(-.5deg)}
  to{clip-path:inset(0 0 0 0);transform:rotate(-1.5deg)}
}

.rbmk .rbmk-h1{
  animation:rbmk-rise .8s cubic-bezier(.2,.7,.2,1) backwards;
}
.rbmk .rbmk-h1 span{
  animation:rbmk-swipe .9s cubic-bezier(.2,.7,.2,1) .55s backwards;
  transition:transform .35s cubic-bezier(.3,1.6,.5,1);
}

/* sapaan kecil saat disentuh kursor */
@media (hover:hover){
  .rbmk .rbmk-h1 span:hover{transform:rotate(1deg) scale(1.05)}
}

@media (prefers-reduced-motion:reduce){
  .rbmk .rbmk-h1,.rbmk .rbmk-h1 span{animation:none}
}