/* ===========================================================
   TRIDAYA HEAVY PARTS — Company Profile
   Custom theme layer on top of Bootstrap 5 (Putih + Hijau)
   =========================================================== */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  --brand-green: #16a34a;
  --brand-green-light: #4ade80;
  --brand-green-dark: #123524;
  --brand-text: #123524;
  --brand-text-soft: #4d6a58;
  --brand-bg-tint: #f2fdf6;
  --brand-border: #e1f3e7;
}

html{ scroll-behavior:smooth; }
body{
  font-family:'Manrope', sans-serif;
  color:var(--brand-text);
  background:#ffffff;
  padding-top:80px; /* fixed navbar offset */
}
a{ text-decoration:none; }
::selection{ background:var(--brand-green-light); color:#123524; }

/* ---------- background blobs ---------- */
.bg-blob{ position:absolute; border-radius:50%; filter:blur(60px); z-index:0; pointer-events:none; }
.bg-blob.b1{ width:520px; height:520px; background:radial-gradient(circle,#86efac,transparent 70%); top:-180px; right:-120px; opacity:0.45; }
.bg-blob.b2{ width:420px; height:420px; background:radial-gradient(circle,#4ade80,transparent 70%); top:520px; left:-160px; opacity:0.25; }

/* ---------- navbar ---------- */
.navbar-brand-custom{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:1.15rem; color:var(--brand-text); }
.navbar-brand-custom .logo-box{
  width:36px; height:36px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand-green),var(--brand-green-light));
  display:flex; align-items:center; justify-content:center; color:#fff; font-weight:800; font-size:15px;
}
.navbar-custom{
  background:#ffffff; border-bottom:1px solid var(--brand-border);
  box-shadow:0 2px 20px rgba(18,53,36,0.04);
}
.btn-hamburger{
  border:1.5px solid var(--brand-border); background:#fff; border-radius:10px;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
}
.btn-hamburger:hover{ background:var(--brand-bg-tint); }

/* ---------- desktop inline nav (lg and up) ---------- */
.nav-desktop{ list-style:none; padding:0; margin:0; }
.nav-desktop .nav-link{
  color:var(--brand-text); font-weight:600; font-size:.95rem;
  padding:.55rem 1.1rem; border-radius:30px; transition:background .2s ease, color .2s ease;
}
.nav-desktop .nav-link.active{ background:var(--brand-green); color:#fff !important; }
.nav-desktop .nav-link:hover:not(.active){ color:var(--brand-green); background:var(--brand-bg-tint); }

/* ---------- offcanvas nav (below lg only) ---------- */
.offcanvas-brand{
  background:linear-gradient(135deg,var(--brand-green-dark),#1c4531);
  color:#fff;
}
.offcanvas-nav{ list-style:none; padding:0; margin:0; }
.offcanvas-nav .nav-link{
  color:var(--brand-text); font-weight:600; font-size:1.05rem; padding:14px 18px;
  border-radius:12px; margin-bottom:6px; transition:background .2s ease, color .2s ease;
}
.offcanvas-nav .nav-link.active{ background:var(--brand-green); color:#fff !important; }
.offcanvas-nav .nav-link:hover:not(.active){ color:var(--brand-green); background:var(--brand-bg-tint); }

/* ---------- buttons ---------- */
.btn-brand{
  background:linear-gradient(135deg,var(--brand-green),var(--brand-green-light));
  color:#fff; font-weight:700; font-size:.95rem; border:none; border-radius:30px;
  padding:.85rem 1.7rem; box-shadow:0 10px 24px rgba(22,163,74,0.28);
}
.btn-brand:hover{ color:#fff; filter:brightness(1.05); }
.btn-brand-outline{
  border:1.5px solid var(--brand-border); color:var(--brand-text); font-weight:600; font-size:.95rem;
  border-radius:30px; padding:.85rem 1.7rem; background:#fff;
}
.btn-brand-outline:hover{ border-color:var(--brand-green); color:var(--brand-green); }

/* ---------- jumbotron / hero (Home) ---------- */
.hero-jumbotron{
  position:relative; min-height:640px; display:flex; align-items:center;
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero-jumbotron::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(9,26,18,0.88) 0%, rgba(12,40,26,0.72) 45%, rgba(16,90,52,0.35) 100%);
}
.hero-jumbotron .hero-content{ position:relative; z-index:2; color:#fff; }
.hero-badge{
  display:inline-flex; font-size:.8rem; font-weight:700; color:#c9f7da; letter-spacing:1.5px;
  background:rgba(255,255,255,0.1); border:1px solid rgba(255,255,255,0.25); padding:.5rem 1.1rem; border-radius:30px;
  margin-bottom:1.4rem; backdrop-filter:blur(4px);
}
.hero-jumbotron h1{ font-weight:800; font-size:3rem; line-height:1.15; }
.hero-jumbotron h1 .accent{ color:var(--brand-green-light); }
.hero-jumbotron p.lead{ color:#e4f3ea; max-width:560px; }

/* ---------- page header (non-home) ---------- */
.page-header{ position:relative; padding:70px 0 50px; text-align:center; background:var(--brand-bg-tint); overflow:hidden; }
.page-header .page-badge{
  display:inline-flex; font-size:.8rem; font-weight:700; color:var(--brand-green); letter-spacing:1.5px;
  background:#fff; border:1px solid #bdf0d0; padding:.5rem 1.1rem; border-radius:30px; margin-bottom:1.2rem;
  box-shadow:0 4px 18px rgba(34,197,94,0.12);
}
.page-header h1{ font-weight:800; font-size:2.6rem; }
.page-header p.lead{ color:var(--brand-text-soft); max-width:600px; margin:1rem auto 0; }

/* ---------- section helpers ---------- */
.section-tag{ font-size:.8rem; font-weight:700; color:var(--brand-green); letter-spacing:1.5px; }
.section-title{ font-weight:800; font-size:1.9rem; margin-top:.5rem; }
.text-brand-soft{ color:var(--brand-text-soft); }
.bg-brand-tint{ background:var(--brand-bg-tint); }

/* ---------- cards ---------- */
.card-brand{
  background:#fff; border:1px solid var(--brand-border); border-radius:20px; overflow:hidden;
  box-shadow:0 12px 28px -18px rgba(22,163,74,0.2); height:100%;
}
.card-brand .card-photo{ height:180px; width:100%; object-fit:cover; }
.card-brand .card-body{ padding:1.6rem; }
.card-brand .card-title{ font-weight:700; font-size:1.05rem; }
.card-brand .card-text{ font-size:.9rem; color:var(--brand-text-soft); }

/* ---------- stat strip ---------- */
.stat-strip{ background:var(--brand-bg-tint); border-top:1px solid var(--brand-border); border-bottom:1px solid var(--brand-border); }
.stat-strip .stat{ padding:2rem 1rem; text-align:center; border-right:1px solid var(--brand-border); }
.stat-strip .stat:last-child{ border-right:none; }
.stat-strip .stat-num{ font-weight:800; font-size:2rem; color:var(--brand-green); }
.stat-strip .stat-label{ font-size:.8rem; color:var(--brand-text-soft); margin-top:.3rem; }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(135deg,var(--brand-green-dark),#16653a);
  border-radius:28px; color:#fff; padding:3rem;
}
.cta-banner .btn-light-brand{ background:#fff; color:var(--brand-green-dark); font-weight:700; border-radius:30px; padding:.85rem 1.7rem; border:none; }

/* ---------- footer ---------- */
footer.site-footer{ background:#fff; border-top:1px solid var(--brand-border); padding:3.2rem 0 1.5rem; }
footer.site-footer h6{ font-weight:700; margin-bottom:1rem; }
footer.site-footer a, footer.site-footer p{ color:var(--brand-text-soft); font-size:.9rem; line-height:2; }
footer.site-footer a:hover{ color:var(--brand-green); }
.footer-bottom{ border-top:1px solid var(--brand-border); padding:1.2rem 0; font-size:.8rem; color:#8ba397; }

/* ---------- owner section (About) ---------- */
.owner-section{ background:var(--brand-bg-tint); border-radius:28px; padding:3.5rem; }
.owner-photo{ width:100%; aspect-ratio:1/1.05; object-fit:cover; border-radius:22px; border:1px solid #cdeedb; }
.owner-name{ font-weight:800; font-size:1.5rem; }
.owner-role{ font-size:.85rem; font-weight:700; color:var(--brand-green); letter-spacing:1px; margin-top:.2rem; }
.owner-quote{ font-size:1.05rem; font-style:italic; color:#1c4531; margin-top:1.3rem; line-height:1.7; }
.owner-bio{ font-size:.9rem; color:var(--brand-text-soft); margin-top:1.1rem; line-height:1.75; }

/* ---------- maps (About) ---------- */
.map-card{ background:#fff; border:1px solid var(--brand-border); border-radius:20px; overflow:hidden; box-shadow:0 12px 28px -18px rgba(22,163,74,0.2); height:100%; }
.map-card iframe{ width:100%; height:260px; border:none; display:block; }
.map-card .map-body{ padding:1.4rem 1.5rem; }
.map-card .map-tag{ font-size:.72rem; font-weight:700; color:var(--brand-green); letter-spacing:1px; }
.map-card .map-name{ font-weight:700; font-size:1.05rem; margin-top:.3rem; }
.map-card .map-address{ font-size:.85rem; color:var(--brand-text-soft); margin-top:.4rem; }

/* ---------- gallery (flat, no category grouping) ---------- */
.gallery-item{ border-radius:18px; overflow:hidden; position:relative; cursor:pointer; border:1px solid var(--brand-border); }
.gallery-item img{ width:100%; height:260px; object-fit:cover; transition:transform .4s ease; display:block; }
.gallery-item:hover img{ transform:scale(1.06); }
.gallery-item .gallery-overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 55%, rgba(9,26,18,0.75) 100%);
  display:flex; align-items:flex-end; padding:1rem 1.2rem; opacity:0; transition:opacity .3s ease;
}
.gallery-item:hover .gallery-overlay{ opacity:1; }
.gallery-item .gallery-overlay .g-title{ color:#fff; font-weight:700; font-size:1rem; }
.gallery-item .gallery-overlay .g-hint{ color:#c9f7da; font-size:.75rem; }

#galleryModal .modal-content{ border-radius:20px; overflow:hidden; border:none; }
#galleryModal .modal-img{ width:100%; max-height:480px; object-fit:cover; }
#galleryModal .modal-body{ padding:1.6rem 1.8rem; }
#galleryModal .modal-title-custom{ font-weight:800; font-size:1.3rem; }
#galleryModal .modal-desc{ color:var(--brand-text-soft); margin-top:.5rem; font-size:.92rem; line-height:1.7; }

/* ---------- process steps (Layanan) ---------- */
.step-num{
  width:44px; height:44px; border-radius:50%; background:var(--brand-green); color:#fff; font-weight:800;
  display:flex; align-items:center; justify-content:center; margin:0 auto .9rem;
}
.step-name{ font-weight:700; font-size:.95rem; }
.step-desc{ font-size:.82rem; color:var(--brand-text-soft); margin-top:.4rem; }

/* ---------- service detail rows (Layanan) ---------- */
.service-detail-tag{ font-size:.78rem; font-weight:700; color:var(--brand-green); letter-spacing:1.5px; }
.service-detail-title{ font-weight:800; font-size:1.55rem; margin-top:.4rem; }
.service-detail-desc{ font-size:.92rem; color:var(--brand-text-soft); margin-top:.8rem; line-height:1.8; }
.service-visual-img{ width:100%; height:320px; object-fit:cover; border-radius:22px; border:1px solid var(--brand-border); }

/* ---------- floating CTAs ---------- */
.floating-cta{ position:fixed; right:24px; z-index:1040; display:flex; flex-direction:column; gap:12px; align-items:flex-end; }
.floating-cta.bottom{ bottom:26px; }
.fab-btn{
  width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 24px rgba(0,0,0,0.18); transition:opacity .3s ease, transform .3s ease;
  font-size:1.3rem; border:none;
}
.fab-whatsapp{ background:#25D366; color:#fff; }
.fab-whatsapp:hover{ color:#fff; transform:translateY(-3px); }
.fab-top{ background:var(--brand-green-dark); color:#fff; opacity:0; visibility:hidden; transform:translateY(10px); }
.fab-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.fab-top:hover{ background:var(--brand-green); color:#fff; }

/* ---------- responsive tweaks ---------- */
@media (max-width: 991.98px){
  .hero-jumbotron h1{ font-size:2.2rem; }
  .owner-section{ padding:2rem; }
  .service-detail .order-lg-1, .service-detail .order-lg-2{ order:initial !important; }
}
@media (max-width: 575.98px){
  .hero-jumbotron{ min-height:520px; }
  .hero-jumbotron h1{ font-size:1.8rem; }
  .stat-strip .stat{ padding:1.2rem .5rem; border-right:none; border-bottom:1px solid var(--brand-border); }
  .cta-banner{ padding:2rem 1.4rem; text-align:center; }
  .cta-banner .d-flex{ flex-direction:column; gap:1.2rem; }
}