:root{
  --bg:#F5F3EF;
  --tile:#161617;
  --light:#ffffff;
  --muted:#c9c9cf;
  --primary:#FC6E44;
  --primary-700:#ff8259;
}
[data-aos="fade-up"] {
  transform: translateY(30px);   /* ubah seberapa jauh jaraknya */
}
[data-aos="fade-down"] {
  transform: translateY(-30px);
}
[data-aos="fade-left"] {
  transform: translateX(30px);
}
[data-aos="fade-right"] {
  transform: translateX(-30px);
}

*{box-sizing:border-box;}
body{
  background:var(--bg); 
  color:var(--light); 
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, 'Noto Sans', 'Liberation Sans', sans-serif;
}
html, body { overflow-x: hidden; }
*,
*::before,
*::after { box-sizing: border-box; }

/* ---------- NAVBAR ---------- */
.navbar-wrapper {
  position: absolute;
  z-index: 1000;
}
.nav-shell {
  background: linear-gradient(180deg, #2b2b2b, #1f1f1f);
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  padding: 18px 24px;
}
.navbar-brand img {
  display: block;
}
.nav .nav-link {
  color: #a0a0a0;
  font-weight: 500;
  padding: 8px 16px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
}
.nav .nav-link:hover {
  color: #fff;
}
.nav .nav-link.active {
  color: #fff;
}
.btn-contact {
  background: #ff6d3d;
  color: #fff;
  border-radius: 50px;
  padding: 8px 20px;
  border: 2px solid rgba(255,255,255,0.2);
  transition: background 0.3s ease;
  font-style: Regular;
  font-size: 20px;
}
.btn-contact:hover{
  background:var(--primary);
  box-shadow: 0 0 10px 3px rgba(252,110,68,0.7);
}
@media (min-width: 901px) {
/* Default (desktop) — jaga agar komponen mobile tidak muncul */
.burger-btn { display: none; }             
.drawer-overlay { display: none; opacity: 0; }
.mobile-drawer { display: none; }          
}
/*.grid-overlay{*/
/*  position:absolute; inset:0; pointer-events:none;*/
/*  background-image:*/
/*    linear-gradient(to right, rgba(255,255,255,0.08) 2px, transparent 1px),*/
/*    linear-gradient(to bottom, rgba(255,255,255,0.08) 2px, transparent 1px);*/
/*  background-size: 100px 100px;*/
/*  mask-image: radial-gradient(closest-side at 50% 40%, rgba(0,0,0,.8), rgba(0,0,0,0.2) 65%, transparent 85%);*/
/*   z-index: 0;*/

/*}*/

/* ---------- HERO SECTION ---------- */

.hero-section{
  position:relative;
  height: fit-content;
  margin: 0px;
  padding-top: 150px;
  background:#151515
}
.hero-container{max-width:1440px;}

 .grid-overlay{
  position:absolute; 
  inset:0; 
  pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 2px, transparent 2px);
  background-size: 100px 100px;
   z-index: 0;
} 
.hero-title{
  font-weight: 500;
  font-style: Medium;
  font-size: 60px;
  padding-bottom: 32px;
  line-height: 5rem;
  margin: 0px;
  max-width: 542px !important;
}
.hero-section .text-muted-300{
  font-size: 20px;
  line-height: 2.2rem !important;
  color: rgba(255,255,255,0.8);
  padding-bottom: 80px;
  max-width: 542px;
}

.text-muted-300 span {
  font-weight: 600;
  color: #fff !important;   
  opacity: 1 !important;
}
.text-center{
  padding-bottom: 60px;
}
.btn-cta-orange{
  background:var(--primary);
  color:#FFFFFF;
  font-weight:600;
  border:none;
  font-weight: 400;
  font-size: 20px;
  z-index: 2;
}

.btn-cta-orange:hover{
  background:var(--primary);
  box-shadow: 0 0 10px 3px rgba(252,110,68,0.7);
  transform: translateY(0) scale(1.08);
}
.btn-outline-light{
  background-color: #292929;
  font-weight: 400;
  font-size: 20px;
  z-index: 2;
}
.btn-outline-light:hover{
  background-color: #292929;
  color:#FFFFFF;
  box-shadow: 0 0 10px 3px rgba(255, 255, 255, 0.7);
  transform: translateY(0) scale(1.08);
}
.person-img{
  position:relative;
  max-width: 690px;
  display:block;
  margin-left:auto;
  z-index:1;
}
.accent-blob{
  position:absolute; z-index:1;
  right: 10px; top: 10%;
  width: 700px; height:auto;
}
.form-float{
  position:absolute; z-index:3;
  right: 10%; top: 50%;
  border:0; border-radius: 12px;
  max-width: 100%;
}

.form-float .card-body{
  background:#fff; 
  border-radius: 16px;
  width: auto;  
}
.form-float .form-label{color:#0e0e0f;}
.form-float .form-select, .form-float .form-control{
  width: auto;              
  display: inline-block; 
  border-color:#e7e7ea;
  white-space: nowrap;}
.form-float .btn-primary{
  width: 100% !important;  
  display: block;
  background:#ff6d3d; 
  border:none;}
.form-float .btn-primary:hover{background:var(--primary);
  box-shadow: 0 0 5px 2px rgba(252,110,68,0.7);}

.badge-floating{
  position:absolute; 
  z-index:3;
  left: 0px; 
  bottom: 10%;
  background:#fff; 
  color:#111;
  border-radius:10px;
  transform: translateY(30%);
  padding: 10px 10px;
}
.badge-floating img{
  width: 43px;
  height: 43px;
}
.badge-floating span{
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
}

.brand-text{font-size:12px; line-height:1.05; color:#fff;}

/* ---------- SOLUTIONS SECTION ---------- */
.py-6{padding-top:4.5rem;padding-bottom:4.5rem}
.solutions-section{
  padding: 60px 0px 100px 0px;
  background:#F5F3EF; 
  color:#121212;
  margin-bottom: 0; 
  border: 0;
}
.solutions-section .text-muted-700{
  color:#707070;
  padding-bottom: 80px ;
  margin: 0px !important;
}
.panel{
  background:#ffffff;
  border-radius:18px;
  padding:20px;
}
.panel-main{padding:0px; max-width:fit-content}

.avatar{background-size:cover;background-position:center; border-radius:50%;}
.avatar.xs{width:22px;height:22px}
.avatar.sm{width:50px;height:50px}
.avatar.md{width:60px;height:60px}
.avatar.ring{  border-radius:999px}

.display-5{
  font-weight: 500;
  font-style: Medium;
  font-size: 46px;
  line-height: 4rem;
  margin: 0px !important;
  padding-bottom: 40px;
}
/* Floating strip */
.floating-avatars{
  position:absolute; left:320px; top:-50px;
  padding:10px; border-radius:14px; background:#fff;
}

/* Small bottom tile */
.small-tile{
  position:absolute; left:8px; bottom:-130px;
  width:268px; padding:18px; border-radius:14px;
}
.btn-icon{
  width:50px; height:50px; background:#ff6d3d; border:none; color:#fff;
  display:inline-flex; align-items:center; justify-content:center; font-size: 20px;
}
.btn-icon:hover{
  background:#FFE6DC; color:#000; 
}
.icon-download{
  width:18px; height:18px; display:inline-block; position:relative;
}
.icon-download::before, .icon-download::after{
  content:""; position:absolute; left:50%; transform:translateX(-50%);
  background:#fff; border-radius:2px;
}
.icon-download::before{top:2px; width:14px; height:10px; border:2px solid #fff; border-top-color:transparent; background:transparent}
.icon-download::after{bottom:2px; width:2px; height:10px}

/* Offer list */
.offer-list{
  position:absolute; 
  left:300px; 
  bottom:-180px; 
  width:300px; 
  padding:18px 18px 8px;
  border-radius:16px;
}
.offer-list h3{
  font-weight: 500;
  font-style: Medium;
  font-size: 20px;
}
.offer-row{
  padding:12px 0; display:flex; align-items:center; justify-content:space-between;
  border-bottom:1px solid #eee; font-size: 16px;
}
.offer-row:last-child{border-bottom:none}
.btn-cta-circle{
  width:40px;height:40px;border-radius:999px;border:none;
  background:#ff6d3d; color:#fff; display:inline-flex; align-items:center; justify-content:center;
}
.btn-cta-circle:hover{
  background:#FFE6DC; color:#000; 
}
.icon-call{
  width:16px;height:16px; display:inline-block;
  border:2px solid #fff; border-radius:3px; transform:rotate(-45deg);
  box-shadow: inset 10px 0 0 #fff;
}

/* Kanan */
.btn-cta-pill{
  background:#ff6d3d; color:#fff; border:none; border-radius:999px;
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
}
 .btn-cta-pill:hover{
  background:var(--primary);
  color: #fff;
  box-shadow: 0 0 10px 3px rgba(252,110,68,0.7);}

/* --------- SERVICES SECTION --------- */
.services-section{
  background:#F5F3EF;
  padding: 120px 0px 70px 0px !important;
  scroll-margin-top: -80px;
}
.services-section .display-6{color:#222}

.title-layanan{
  font-weight: 500;
  font-style: Medium;
  font-size: 46px;
  line-height: 4rem;
  letter-spacing: 0%;
  text-align: center;
  max-width: 670px;
  margin: auto;
}
.service-card{
  display:block;
  background:#fff;
  border-radius:18px;
  padding:28px;
  text-decoration:none;
  color:#2b2b2b;
  box-shadow:0 6px 18px rgba(0,0,0,.06);
  transition: all .25s ease;
  height:100%;
}
.service-card .svc-icon{
  width:80px; height:80px; border-radius:50%;
  background:#FFE6DC; 
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
}
.service-card .svc-icon i{
  font-size: 30px;
  color: #FC6E44;
}
.service-card .svc-title{
  padding-bottom:14px; 
  margin: 0px;
  font-weight: 500;
  font-style: Medium;
  font-size: 32px;
  line-height: 100%;
}
.service-card .svc-desc{
  margin:0; 
  color:#707070;
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
  line-height: 30px;
}

.service-card:hover,
.service-card.active{
  background:#ff6d3d;
  color:#fff;
  transform: translateY(-2px);
  box-shadow:0 10px 28px rgba(255,109,61,.35);
}
.service-card:hover .svc-desc,
.service-card.active .svc-desc{color:#fff}
.service-card:hover .svc-icon,
.service-card.active .svc-icon{
  background:#fff;
  color:#fff;
}

/* ---------- TEMUKAN TALENT SECTION ---------- */
.talent-section{
  background:#F5F3EF; 
  color:#222;
  padding: 120px 0px 60px 0px;
}
.talent-section .display-4{
  letter-spacing:-.5px;
  font-weight: 500;
  font-style: Medium;
  font-size: 46px;
  line-height: 100%;
}
.talent-section .text-muted-700{
  color:#707070;
  padding-bottom: 80px !important;
  margin-bottom: 0px !important;
  max-width: 550px;
}


/* --- Visual stack --- */
.visual-stack{
  position:relative;
  width:min(560px, 100%);
  height:480px;          
}

.visual-stack .vs-board{
  position:absolute;
  right:20px;
  top:-30px;
  max-width:307px;
  max-height: 60px;
  border-radius:18px;
  z-index: 1;
}

.visual-stack .vs-badge{
  position:absolute;
  left:-90px;
  top:100px;
  width:280px;         
  border-radius:16px;
  z-index: 1;
  width:336px;
  height: 60px;
}

.visual-stack .vs-search{
  position:absolute;
  left:0px;
  top:200px;
  border-radius:16px;
  z-index: 1;
}

.visual-stack .vs-card{
  position:absolute;
  left:60px;
  bottom:18px;
  border-radius:16px;
  z-index: 0;
}

.visual-stack .shadow    {box-shadow:0 8px 24px rgba(0,0,0,.08)}
.visual-stack .shadow-lg {box-shadow:0 16px 40px rgba(0,0,0,.10)}

.talent-mobile-figure { display: none; }
.talent-mobile-figure img { display: block; width: 100%; height: auto; }
/* ---------- CTA RECRUIT SECTION ---------- */
.cta-recruit-section{
  background:#F5F3EF;
  padding: 120px 0px;
}
.cta-recruit-section .lead{
  max-width: 504px;
  padding-bottom: 80px;
  margin: 0px;
}
.cta-panel{
  background:#131314;
  border-radius:26px;
  overflow:hidden;
  position:relative;
  box-shadow:0 18px 40px rgba(0,0,0,.28);
  inset:0; 
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.05) 2px, transparent 2px),
    linear-gradient(to bottom, rgba(255,255,255,0.05) 2px, transparent 2px);
  background-size: 90px 90px;
}
.cta-grid{
  position:absolute; inset:0; z-index:0; pointer-events:none;
}
.cta-panel {position:relative; overflow:visible; }
.text-grid-muted{
  color:#fff;
  opacity: 0.8;
  padding-bottom: 80px;
}

.job-card{
  background:#ffffff;
  border-radius:18px;
  padding:22px 24px;
}
.job-card .text-muted{color:#7b7b84!important}

.card-top{
  position:absolute; right:0; top:-350px; width:min(560px,100%);
  z-index: 1;
}
.card-bottom{
  position:absolute; right:80px; top:-80px; width:min(540px,100%);
  border-top-left-radius:24px;  
}
.job-logo{
  width:70px; height:60px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; text-transform:uppercase;
}
.h3{
  color: #000 !important;
  font-weight: 500;
  font-style: Medium;
  font-size: 24px;
  line-height: 100%;
}
.text-nymgo{
  color: #707070;
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
  line-height: 1.5rem;
  letter-spacing: 0%;
}
.text-nymgo span{
  padding-right: 10px;
}
.job-logo.flame{background:#fff0ea}

.chip{
  background:#EFEFF1; 
  color:#6b6b73;
  padding:10px 20px; 
  border-radius:12px; 
  font-weight:600; 
  font-size:0.95rem;
}

.p-lg-6{padding:4rem !important}


/* ---------- FOOTER ---------- */
.site-footer{
  background:#121212;
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif;
}
.site-footer img{
  max-width: 200px;
  height: auto;
}
.site-footer .text-white{
  font-family: Poppins;
  font-weight: 500;
  font-style: Medium;
  font-size: 24px;
  padding-bottom: 32px;
}
.footer-address{
  color:#fff;
  font-size:0.95rem;
  line-height:1.5;
  margin-bottom:0;
  font-weight: 400;
  font-style: Regular;
  font-size: 20px;
}
.footer-divider{
  border-top:1px solid rgba(255,255,255,0.15);
  margin: 20px 0px;
  border: 1px solid #fff;
}
.footer-copy{
  font-weight: 400;
  font-style: Regular;
  font-size: 18px;
  text-align: center;
}
.footer-social .social-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px; height:60px;
  border-radius:50%;
  background:#fff;
  color:#FC6E44;
  font-size:24px;
  transition: all 0.3s ease;
}
.footer-social .social-btn:hover{
  background:#ff6d3d;
  color:#fff;
}

/* ========= MOBILE (<900px) ========= */
@media (max-width: 900px) {
  /* Global */
  .hero-container { max-width: 100%; padding-left: 16px; padding-right: 16px; }
  .grid-overlay { background-size: 70px 70px; }

  /* NAVBAR */
  .navbar-wrapper { position: fixed !important; margin-top: 0 !important; }
  .nav-shell {
    border-radius: 16px;
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: wrap;
    display: flex;
    align-items: center;
    margin-top: 10px;
  }
  .navbar-brand img { height: 32px; }
 
  .nav .nav-link { font-size: 14px; padding: 6px 8px; }
  .btn-contact { margin-left: auto; font-size: 14px; padding: 6px 12px; }

  .nav { display: none; }
  .btn-contact { display: none; } 
  .burger-btn { display: flex; }

  /* Overlay */
  .drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 1090;
    opacity: 0;
    transition: opacity .3s ease;
  }
  .drawer-overlay.show { opacity: 1; }
  .drawer-overlay[hidden] { display: none; }

  /* Drawer */
  .mobile-drawer {
    position: fixed;
    top: 0;
    right: -100%;
    height: 100dvh;
    width: min(86vw, 300px);
    background: #111;        
    color: #fff;
    z-index: 1100;
    box-shadow: -20px 0 40px rgba(0,0,0,.35);
    transition: right .3s ease;
    padding: 20px 16px 24px;
    border-left: 1px solid rgba(255,255,255,.08);
  }
  .mobile-drawer.open { right: 0; }

  .drawer-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px;
  }
  .drawer-header #mobile-menu-title { font-weight: 600; font-size: 18px; }
  .drawer-close {
    background: transparent; border: 0; color: #fff; font-size: 28px; line-height: 1; cursor: pointer;
  }

  .mobile-drawer .nav {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
  }
  .mobile-drawer .nav .nav-link {
    display: block;
    padding: 10px 8px;
    border-radius: 10px;
    color: #eaeaea;
  }
  .mobile-drawer .nav .nav-link:hover,
  .mobile-drawer .nav .nav-link.active {
    background: rgba(255,255,255,.08);
    color: #fff;
  }
  
  .drawer-contact {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 16px;
    padding: 10px auto;
    border-radius: 999px;
    text-decoration: none;
  }
  .burger-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: #ff6600; 
    border: none;
    border-radius: 10px; 
    cursor: pointer;
    gap: 5px;
    margin-left: auto;
  }
  .burger-btn span {
    display: block;
    width: 20px;
    height: 2px;
    background: #fff;  
    border-radius: 1px;
    transition: 0.3s;
  }

  .burger-btn.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .burger-btn.is-active span:nth-child(2) {
    opacity: 0;
  }
  .burger-btn.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }
  body.no-scroll { overflow: hidden; }

  /* HERO */
  .container, .row { border: 0; }
  .hero-section { padding-top: 80px;  }
  .hero-title { padding-top: 40px; padding-bottom: 20px; font-size: 36px; line-height: 1.3; }
  .hero-section .lead { font-size: 16px !important; line-height: 1.5rem !important; padding-bottom: 40px; }
  .accent-blob{
    position: absolute;     /* pastikan parent punya position: relative */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    height: auto;
  }
  .person-img {
    max-width: 100%;  
    margin: 0 auto;
    position: relative;
    z-index: 1;
  }
  .form-float .card-body{
    padding: 10px !important;
  }
  .form-float {
    max-width: fit-content !important;
    top: 140px;
    right: 10px;
  }
  .form-label{
    font-size: 14px;
  }
  .form-select, .form-control{
    font-size: 12px;
  }
  .form-float form {
    padding: 12px 16px;
  }
  .badge-floating {
    left: 10px;
    bottom: 10px;
    transform: none;
    z-index: 3;
  }
  .badge-floating span{
    font-size: 14px;
  }
  .badge-floating img{
    height: 20px;
    width: 20px;
  }
  .btn-primary{
    font-size: 14px;
  }
  .btn-cta-orange, .btn-outline-light{
    font-size: 16px;
    padding: 10px !important;
  }

  /* SOLUTIONS / “Solusi Rekrutmen …” */
  .solutions-section { max-width: 100%; padding: 20px 0px 120px 0px; scroll-margin-top: 50px;}
  .solutions-section .row {
    flex-direction: column-reverse;
  }
  .solutions-section .lead {
    font-size: 16px;
    color: #707070;
    padding-bottom: 40px;
  }
  .btn-cta-pill {
    font-size: 16px;
    padding: 10px 14px !important;
  }
  .display-5 { font-size: 32px; line-height: 2.4rem; }
  .panel.panel-main img { max-width: 350px; height: auto; display: block; }

  .floating-avatars,
  .small-tile,
  .offer-list {
    position: absolute; 
    width: auto;
    margin-top: 0;
  }
  .avatar.md {
    width: 40px;
    height: 40px;
  }
  .images {
    place-items: center;
  }
  .floating-avatars{ max-width: fit-content; left: 48%; top: -15%; padding: 10px;}
  .offer-list { left:50%; bottom: -160px; padding: 10px; max-width: 220px !important;}
  .offer-row { font-size: 12px; }
  .btn-icon { max-width: 40px; height: 40px; font-size: 16px; }
  .small-tile { bottom: -80px; width: 170px; padding: 10px; }
  .small-tile .display-6 { font-size: 16px;}
  .text-muted-300 {font-size: 12px !important;}
  .avatar.sm{
    max-width: 35px;
    max-height: 35px;
  }
  .btn-cta-circle{
    width: 35px;
    height: 35px;
  }
  .btn-icon{
    width: 35px;
    height: 35px;
  }
  .offer-list .mb-3{
    font-size: 16px !important;
  }
  
  /* SERVICES / “Layanan Kami …” */
    
  .services-section{ padding-bottom: 20px !important; padding-top: 40px !important; scroll-margin-top: 60px;}
  .title-layanan { font-size: 32px; line-height: 2.8rem; padding-top: 8px; }
  .service-card { padding: 20px; }
  .service-card .svc-icon { width: 64px; height: 64px; }
  .service-card .svc-title { font-size: 24px; }
  .service-card .svc-desc { font-size: 16px; line-height: 26px; }

  .text-center{
    padding-bottom: 40px;
  }
  /* TALENT */
  .talent-section .display-4 { font-size: 32px; line-height: 1.2; margin-bottom: 10px !important; }
  .talent-section .text-muted-700 { font-size: 16px; padding-bottom: 0px; padding-bottom: 40px !important;}
  .talent-section {
    padding-bottom: 0px !important;
    padding-top: 100px;
  }
  .vs-table,
  .vs-card,
  .vs-search,
  .vs-badge,
  .vs-board,
  .apply-pill { display: none !important; }

  .talent-mobile-figure { 
    display: block;
    position: relative;
    z-index: 1;
    max-width: 400px; 
  }

  /* pastikan kanvas tidak memotong gambar */
  .visual-stack {
    position: relative;
    overflow: visible;
    max-width: 400px;
    place-items: center;        
    margin: 0px !important;
    height: fit-content;
  }
  /* CTA RECRUIT */
  .cta-recruit-section {padding-top: 80px !important; padding-bottom: 60px;}
  .cta-recruit-section .display-4 { font-size: 32px; line-height: 1.2; }
  .cta-panel { padding:  30px 20px !important; }
  .card-top, .card-bottom {
    position: static;  
    width: 100%;
    margin-top: 16px;
    border-radius: 18px;
  }
  .cta-recruit-section .lead{
    padding-bottom: 40px;
    font-size: 16px;
  }
  .job-card { padding: 16px; }
  .job-logo img {
    width: 45px;
    height: 45px;
  }
  .h3 { font-size: 18px; }
  .text-nymgo{font-size: 16px;}
  .chip{ padding: 10px;}

  /* FOOTER */
  .site-footer {padding-top: 30px !important;}
  .site-footer .text-white { font-size: 20px; padding-bottom: 16px; }
  .footer-address { font-size: 16px; }
  .footer-copy { font-size: 14px; text-align: left; }
  .footer-social .social-btn { width: 44px; height: 44px; font-size: 20px; }
  .site-footer img{
    max-width: 200px;
    height: auto;
  }
}

@media (min-width: 700px) and (max-width: 860px) {
  
  .hero-section .lead{
    max-width: 100%;
  }
  .form-float{
    top: 45%;
    right: 15%;
  }
  .small-tile{
    left: 26% !important;;
  }
  .text-muted-700{
    max-width: 100% !important;
  }
  .talent-images{
    place-items: center;
  }
}

/* ========= LARGE DESKTOP (≥1200px) ========= */
@media (min-width: 901px) and (max-width: 1200px){
  /* NAVBAR */
  .nav .nav-link {
    font-size: 20px;
    padding: 8px 14px;
  }
  .btn-contact {
    font-size: 20px;
    padding: 8px 18px;
  }
  .form-float{
    top: 45%;
    right: 10%;
  }
  .col-lg-5 {
    padding-top: 80px !important;
    padding-bottom: 0px !important;
  }
  /* HERO */
  .hero-title {
    font-size: clamp(48px, 5vw, 64px);
    line-height: 1.1;
  }
  .text-muted-300 {
    font-size: 20px;
    line-height: 32px;
  }
  .text-muted-700 {
    margin: 0px !important;
  }
  .person-img {
    max-width: 680px;
  }
  .accent-blob {
    width: 640px;
    left: 10%;
  }
  .talent-section{
    padding-top: 120px !important;
  }

  /* SOLUTIONS */
  .solutions-section{
    padding: 0px;
  }
  .display-5 {
    margin-top: 80px;
    font-size: clamp(40px, 4vw, 48px);
    line-height: 3.2rem;
  }
  .panel-main img {
    max-width: 480px;
  }
  .offer-list {
    left: 300px;
    bottom: -180px;
    max-width: 280px;
  }
  .images img{
    max-width: 400px;
  }
  .floating-avatars{
    left: 40%;
  }
  .small-tile{
    left: 0% !important;
  }
  .offer-list{
    left: 40%;
  }
  /* SERVICES */
 
  .services-section{
    padding: 60px 0px 0px 0px !important;
    scroll-margin-top: 20px;

  }
  .title-layanan {
    font-size: clamp(40px, 4vw, 48px);
    line-height: 1.3;
  }
  .service-card .svc-title {
    font-size: 28px;
  }
  .service-card .svc-desc {
    font-size: 18px;
    line-height: 28px;
  }

  /* TALENT */
  .talent-section{
    padding-top: 100px;
    padding-bottom: 40px;
  }
  .talent-section .display-4 {
    font-size: clamp(40px, 4vw, 48px);
    line-height: 1.2;
  }
  .talent-section .text-muted-700 {
    font-size: 18px;
  }

  /* CTA RECRUIT */
  .cta-recruit-section .display-4 {
    font-size: clamp(40px, 4vw, 48px);
  }
  .cta-recruit-section .lead {
    font-size: 18px;
    line-height: 1.6;
  }
  .card-bottom{
    left: 0%;
  }

  /* FOOTER */
  .site-footer .text-white {
    font-size: 24px;
  }
  .footer-address {
    font-size: 18px;
  }
  .footer-copy {
    font-size: 16px;
  }
}

/* === Scroll Top Button === */
.scroll-top-btn{
  position: fixed;
  right: 20px;
  bottom: 24px;
  width: 45px; height: 45px;
  display: grid; place-items: center;
  border: none; border-radius: 999px;
  background: #FC6E44; color: #fff;
  box-shadow: 0 10px 20px rgba(255, 145, 0, 0.151);
  cursor: pointer;
  opacity: 0; transform: translateY(10px);
  transition: opacity .25s, transform .25s, background .2s;
  z-index: 1080;
}
.scroll-top-btn:hover{ background:#ff8259; }
.scroll-top-btn.show{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ .scroll-top-btn{ transition: none; } }

@media (max-width: 400px){
 .form-float {
    top: 110px !important;
  }
}