/*!
* Abya Creative — theme overrides on top of Start Bootstrap Agency v7 (styles.css)
* Earthy palette: ink #0F0D0A, cream #F5EFE2, mauve #B09585, terra #8C3D22
* Load this file AFTER css/styles.css
*/

:root {
  --abya-ink: #0F0D0A;
  --abya-ink2: #2B2420;
  --abya-cream: #F5EFE2;
  --abya-paper: #FAFAF7;
  --abya-mauve: #B09585;
  --abya-terra: #8C3D22;
  --abya-terra2: #A8492A;
  --abya-muted: #8A7C70;
  --abya-serif: "DM Serif Display", Georgia, serif;
  --abya-sans: "Inter", system-ui, -apple-system, sans-serif;

  /* re-point bootstrap utility vars (text-primary/bg-primary/border-primary/link) to terra */
  --bs-primary: var(--abya-terra);
  --bs-primary-rgb: 140, 61, 34;
  --bs-link-color: var(--abya-terra);
  --bs-link-hover-color: var(--abya-terra2);
  --bs-body-font-family: var(--abya-sans);
  --bs-body-color: var(--abya-ink2);
  --bs-body-bg: var(--abya-paper);
}

body {
  font-family: var(--abya-sans);
  background-color: var(--abya-paper);
}

h1, h2, h3, h4, h5, h6,
.section-heading, .masthead-heading, .navbar-brand,
.portfolio-caption-heading, .timeline-heading h4,
.team-member h4, .modal-content h2 {
  font-family: var(--abya-serif) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.section-subheading, .masthead-subheading,
.portfolio-caption-subheading {
  font-family: var(--abya-sans) !important;
  font-style: normal !important;
  color: var(--abya-muted) !important;
}

/* ---------- Navbar ---------- */
#mainNav,
#mainNav.navbar-shrink {
  background-color: var(--abya-ink) !important;
}
#mainNav .navbar-brand {
  color: var(--abya-cream) !important;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
#mainNav .navbar-brand img { height: 1.9rem; }
#mainNav .navbar-nav .nav-item .nav-link {
  font-family: var(--abya-sans);
  text-transform: none;
  letter-spacing: 0;
  color: rgba(245,239,226,.7);
}
#mainNav .navbar-nav .nav-item .nav-link.active,
#mainNav .navbar-nav .nav-item .nav-link:hover {
  color: var(--abya-mauve) !important;
}
.lang-btn {
  font-family: var(--abya-sans);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid rgba(245,239,226,.28);
  color: var(--abya-cream);
  background: none;
  cursor: pointer;
  transition: .2s;
}
.lang-btn:hover { border-color: rgba(245,239,226,.65); }
.kicker { letter-spacing: .15em; font-size: .85rem; }

/* ---------- Buttons ---------- */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--abya-terra);
  --bs-btn-border-color: var(--abya-terra);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--abya-terra2);
  --bs-btn-hover-border-color: var(--abya-terra2);
  --bs-btn-active-bg: var(--abya-terra2);
  --bs-btn-active-border-color: var(--abya-terra2);
  --bs-btn-disabled-bg: var(--abya-terra);
  --bs-btn-disabled-border-color: var(--abya-terra);
}
.btn-xl {
  font-family: var(--abya-sans);
  text-transform: none;
  border-radius: 999px;
  font-weight: 600;
}
.btn-social {
  background-color: rgba(245,239,226,.08);
  color: var(--abya-cream);
  border: 1px solid rgba(245,239,226,.18);
}
.btn-social:hover { background-color: var(--abya-terra); border-color: var(--abya-terra); color: #fff; }

/* ---------- Masthead / Hero ---------- */
header.masthead {
  background:
    linear-gradient(180deg, rgba(15,13,10,.55) 0%, rgba(15,13,10,.75) 100%),
    url("../assets/img/header-bg.jpg") !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-size: cover !important;
  color: var(--abya-cream);
}
header.masthead .masthead-subheading { color: var(--abya-mauve); font-size: 1.1rem; }
header.masthead .masthead-heading { color: var(--abya-cream); }

/* ---------- Sections ---------- */
.bg-light { background-color: var(--abya-cream) !important; }
.page-section .section-heading { color: var(--abya-ink); }

/* service icon stack */
.fa-stack .text-primary { color: var(--abya-terra) !important; }

/* ---------- Services (checklist card style) ---------- */
.svc-card {
  background: #fff;
  border: 1px solid rgba(15,13,10,.08);
  border-radius: 16px;
  padding: 30px 28px;
  height: 100%;
  text-align: left;
  transition: transform .2s, box-shadow .2s;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px rgba(15,13,10,.08);
}
.svc-ico {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  border: 1px solid rgba(140,61,34,.25);
  background: rgba(140,61,34,.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.svc-ico i { font-size: 1.25rem; color: var(--abya-terra); }
.svc-card h4 {
  font-family: var(--abya-serif);
  font-size: 1.2rem;
  color: var(--abya-ink);
  margin-bottom: 10px;
}
.svc-card > p {
  color: var(--abya-muted);
  font-size: .93rem;
  line-height: 1.6;
  margin-bottom: 18px;
}
.svc-check {
  list-style: none;
  padding: 0;
  margin: 0;
}
.svc-check li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .88rem;
  color: var(--abya-ink2);
  margin-bottom: 9px;
}
.svc-check li:last-child { margin-bottom: 0; }
.svc-check li i {
  color: var(--abya-terra);
  font-size: .78rem;
  margin-top: 4px;
  flex-shrink: 0;
}

/* Service cards that include a photo */
.svc-card.has-img {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
}
.svc-card.has-img .svc-card-body { flex: 1 1 220px; min-width: 0; }
.svc-card.has-img .svc-card-media {
  flex: 0 0 220px;
  width: 220px;
}
.svc-card.has-img .svc-card-media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}
@media (max-width: 767px) {
  .svc-card.has-img { flex-direction: column; }
  .svc-card.has-img .svc-card-media { width: 100%; flex: none; }
  .svc-card.has-img .svc-card-media img { aspect-ratio: 3 / 2; }
}

/* ============================================================
   SECTION COLOR SCHEME — setiap section punya warna berbeda
   semua dari palet Abya: ink, cream, paper, mauve, terra
   ============================================================ */

/* ---------- ABOUT — Cream warm (paling terang) ---------- */
#about {
  background-color: var(--abya-cream) !important;
}
#about .section-heading  { color: var(--abya-ink); }
#about .section-subheading { color: var(--abya-muted) !important; }
#about .timeline-panel {
  background: var(--abya-paper);
  box-shadow: 0 8px 28px rgba(15,13,10,.07);
}
#about .timeline-panel .timeline-heading h4 { color: var(--abya-ink); }
#about .timeline-panel .timeline-heading h4.subheading { color: var(--abya-terra); }
#about .timeline-panel p.text-muted { color: var(--abya-muted) !important; }
#about .timeline:before { background-color: rgba(140,61,34,.2); }

/* ---------- SERVICES — Paper putih bersih ---------- */
#services {
  background-color: var(--abya-paper) !important;
}
#services .section-heading  { color: var(--abya-ink); }
#services .section-subheading { color: var(--abya-muted) !important; }
#services .svc-card {
  background: #fff;
  border: 1px solid rgba(15,13,10,.08);
}
#services .kicker {
  color: var(--abya-terra) !important;
  font-weight: 600;
  letter-spacing: .18em;
  font-size: .78rem;
}

/* ---------- PORTFOLIO/PRODUCT — Ink gelap ---------- */
#portfolio {
  background-color: rgba(140,61,34,.05) !important;
}
#portfolio .section-heading  { color: var(--abya-ink) !important; }
#portfolio .section-subheading { color: var(--abya-mauve) !important; }
#portfolio .portfolio-item {
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(245,239,226,.08);
}
#portfolio .portfolio-item .portfolio-link .portfolio-hover {
  background: rgba(140,61,34,.6);
}
#portfolio .portfolio-item .portfolio-caption {
  background-color: #1c1712;
  border-top: 1px solid rgba(245,239,226,.06);
}
#portfolio .portfolio-item .portfolio-caption-heading {
  color: var(--abya-cream);
  font-family: var(--abya-serif);
}
#portfolio .portfolio-item .portfolio-caption-subheading {
  color: var(--abya-mauve) !important;
}
#portfolio .portfolio-item img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ---------- CLIENTS — Mauve warm medium ---------- */
#clients {
  background: #D4C4B5 !important; /* mauve dipucat/diterangkan */
  padding: 100px 0;
}
#clients h1,
#clients h2 {
  color: var(--abya-ink) !important;
  font-family: var(--abya-serif) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
#clients h3.text-muted {
  color: var(--abya-ink2) !important;
  opacity: .7;
}
#clients .Clients-strip {
  color: var(--abya-ink);
}
#clients .industry-badge .ico,
#clients .Clients-strip .ico {
  background: rgba(140,61,34,.15);
  border-radius: 10px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
#clients .Clients-strip .ico svg {
  stroke: var(--abya-terra);
}

/* ---------- CONTACT — Terra burnt orange ---------- */
section#contact {
  background: var(--abya-terra) !important;
}
section#contact .section-heading {
  color: #fff !important;
}
section#contact .section-subheading {
  color: rgba(255,255,255,.75) !important;
}
section#contact .form-control {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  color: #fff;
  border-radius: 8px;
}
section#contact .form-control::placeholder {
  color: rgba(255,255,255,.55);
}
section#contact .form-control:focus {
  background: rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.6);
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.15);
  color: #fff;
}
section#contact .btn-primary {
  --bs-btn-bg: var(--abya-ink);
  --bs-btn-border-color: var(--abya-ink);
  --bs-btn-color: var(--abya-cream);
  --bs-btn-hover-bg: var(--abya-ink2);
  --bs-btn-hover-border-color: var(--abya-ink2);
}
section#contact .contact-note {
  color: rgba(255,255,255,.6);
}
section#contact .contact-note a {
  color: rgba(255,255,255,.85);
}

/* ---------- Timeline (About) ---------- */
.timeline:before { background-color: rgba(140,61,34,.18); }
.timeline > li .timeline-image {
  background-color: var(--abya-terra);
  border-color: var(--abya-cream);
  display: flex;
  align-items: center;
  justify-content: center;
}
.timeline > li .timeline-image i {
  color: #fff;
  font-size: 1.6rem;
}
.timeline > li .timeline-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
@media (min-width: 992px) {
  .timeline > li .timeline-image i { font-size: 2.4rem; }
}
.timeline .timeline-panel { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(15,13,10,.06); }

/* ---------- Team ---------- */
.team-member img {
  object-fit: cover;
  object-position: center top;
}
.team-avatar {
  width: 14rem;
  height: 14rem;
  border-radius: 50%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--abya-terra), var(--abya-mauve));
  color: #fff;
  font-family: var(--abya-serif);
  font-size: 3.2rem;
  border: .5rem solid rgba(140,61,34,.08);
}
.team-member .role { color: var(--abya-terra); font-weight: 600; }

/* ---------- Industries strip (replaces client logos) ---------- */
.Clients-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 14px 10px;
  color: var(--abya-ink2);
  font-weight: 600;
  font-size: .92rem;
}
.industry-badge .ico {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(140,61,34,.1);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.industry-badge .ico svg { width: 20px; height: 20px; stroke: var(--abya-terra); fill: none; stroke-width: 1.8; }

/* #clients background kini diatur di blok "SECTION COLOR SCHEME" di atas */

/* Contact styling kini diatur di blok "SECTION COLOR SCHEME" di atas */

/* ---------- Footer ---------- */
.footer {
  background-color: var(--abya-ink);
  color: rgba(245,239,226,.55);
  padding: 2rem 0;
}
.footer a.link-dark { color: rgba(245,239,226,.55) !important; }
.footer a.link-dark:hover { color: var(--abya-cream) !important; }

/* ---------- Modal close icon ---------- */
.portfolio-modal .close-modal svg { stroke: var(--abya-ink); width: 2rem; height: 2rem; }