/* Calm editorial layer over styles.css: one paper tone, hairlines, light type, orange used sparingly (logo accent). */
:root {
  --paper: #f8f6f1;
  --card: #fff;
  --line: #e6e2d9;
  --ink: #161616;
  --ink-soft: #66615a;
  --accent: #fe4b00; /* logo orange */
  --accent-ink: #161616;
  --radius: 14px;
  --line-hover: rgba(254, 75, 0, 0.85); /* orange hover border */
  --primary: var(--accent);
  --display: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .section-heading, .portfolio-caption-heading {
  font-family: var(--display); color: var(--ink); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
}
a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
.text-muted { color: var(--ink-soft) !important; }
.text-primary { color: var(--accent) !important; }
::selection { background: var(--accent); color: var(--ink); }

/* Sections: one background, hairline dividers */
.page-section { padding: 6rem 0; border-top: 1px solid var(--line); background: transparent; }
.page-section.bg-light, .bg-light { background: transparent !important; }
.page-section .text-center:not(.row) { text-align: left !important; max-width: 40rem; margin-bottom: 3rem; }
.page-section h2.section-heading { font-size: clamp(2rem, 4.5vw, 3rem); text-transform: none !important; margin-bottom: 0.75rem; }
.page-section h3.section-subheading, .footer-section h3.section-subheading {
  font-family: "Inter", sans-serif; font-style: normal; font-size: 1rem; color: var(--ink-soft) !important; margin-bottom: 0;
}

/* Buttons: solid orange only for primary CTAs (nav, hero, floating); everything else is quiet */
.btn-primary {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; font-weight: 600; text-transform: none;
}
.btn-primary:hover, .btn-primary:focus { background: var(--ink); color: #fff; }
.btn-wa {
  background: var(--accent); color: var(--accent-ink); border: 0; border-radius: 999px; font-weight: 600;
  text-transform: none; padding: 0.65rem 1.3rem; transition: background 0.2s ease, color 0.2s ease;
}
.btn-wa:hover, .btn-wa:focus { background: var(--ink); color: #fff; }
.btn-lg { padding: 0.9rem 1.7rem; font-size: 1rem; }
.btn-outline-primary { color: var(--ink); border: 1px solid var(--line); border-radius: 999px; }
.btn-outline-primary:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Dark rounded nav bar */
#mainNav, #categoryNav, #mainNav.navbar-shrink, #categoryNav.navbar-shrink {
  top: 0.75rem; left: 0.75rem; right: 0.75rem; width: auto; padding: 0.5rem 0.75rem;
  background: rgba(22, 22, 22, 0.88); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 20px;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
@media (min-width: 992px) {
  #mainNav, #categoryNav, #mainNav.navbar-shrink, #categoryNav.navbar-shrink { padding: 0.4rem 1rem; border-radius: 999px; }
}
#mainNav, #categoryNav { transition: transform 0.3s ease; }
#mainNav.nav-hidden, #categoryNav.nav-hidden { transform: translateY(-150%); }
#mainNav .navbar-brand img, #categoryNav .navbar-brand img,
#mainNav.navbar-shrink .navbar-brand img, #categoryNav.navbar-shrink .navbar-brand img { height: 2.5rem; }
#mainNav .navbar-nav .nav-item .nav-link, #categoryNav .navbar-nav .nav-item .nav-link {
  font-family: "Inter", sans-serif; font-weight: 500; font-size: 0.9rem; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, 0.85);
}
#mainNav .navbar-nav .nav-item .nav-link:hover, #mainNav .navbar-nav .nav-item .nav-link.active,
#categoryNav .navbar-nav .nav-item .nav-link:hover { color: var(--accent); }
#mainNav .navbar-toggler, #categoryNav .navbar-toggler { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 999px; font-weight: 600; }
.navbar .btn-wa { padding: 0.45rem 1.05rem; font-size: 0.9rem; margin: 0.5rem 0; }
@media (min-width: 992px) { .navbar .btn-wa { margin: 0; } }

/* Hero */
.masthead {
  position: relative; overflow: hidden; isolation: isolate; background: var(--ink);
  text-align: left; height: calc(100vh - 1.5rem); min-height: 520px; padding-bottom: 3rem;
  margin: 0.75rem 0.75rem 0; border-radius: 24px;
}
/* Parallax: the image layer is taller than the hero and shifts with scroll (--py set in js/scripts.js) */
.masthead::before {
  content: ""; position: absolute; inset: -35% 0 0; z-index: -1; will-change: transform;
  background: linear-gradient(180deg, rgba(22, 22, 22, 0.35) 0%, rgba(22, 22, 22, 0.7) 100%), url("../assets/img/5-2.png") center / cover no-repeat;
  transform: translate3d(0, var(--py, 0px), 0);
}
.masthead .container { transform: translate3d(0, var(--cy, 0px), 0); opacity: var(--co, 1); }
.masthead .row { align-items: flex-end !important; }
.masthead .text-center { text-align: left !important; }
.masthead h1 { font-family: var(--display); font-weight: 600; font-size: clamp(2.25rem, 6vw, 4.5rem); line-height: 1.02; letter-spacing: -0.03em; color: #fff; text-transform: none; max-width: 16ch; }
.masthead .lead { font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); max-width: 30rem; margin-top: 1rem; }
.hero-cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.hero-link { margin: 0; color: #fff; font-size: 0.95rem; }
.hero-link:hover { color: #fff; text-decoration-color: #fff; }
@media (min-width: 768px) { header.masthead { padding-top: 8rem; padding-bottom: 4rem; } }

/* Cards: white, hairline border, no shadows */
#services .row { row-gap: 1rem; }
.cards { background: var(--card); background-clip: padding-box; border: 8px solid var(--paper); border-radius: calc(var(--radius) + 8px); padding: 1.75rem 1.5rem; text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
/* Layanan icons: large faded background layer behind the text */
.cards { position: relative; overflow: hidden; min-height: 15rem; }
.cards > div:first-child { position: absolute; right: -0.75rem; bottom: -1.25rem; z-index: 0; pointer-events: none; transform: rotate(-10deg); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cards .fa-stack { width: auto; height: auto; line-height: 1; font-size: 9rem; width: 1.25em; height: 1em; opacity: 0.12; display: block; }
.cards:hover > div:first-child { transform: rotate(-4deg) scale(1.08); }
.cards > div:last-child { position: relative; z-index: 1; }
.cards:hover { color: inherit; transform: none; box-shadow: inset 0 0 0 1px var(--line); } /* no hover shadow (overrides styles.css) */
.cards-primary:hover { transform: none; box-shadow: none; }
.cards h4 { font-weight: 600; font-size: 1.15rem; text-align: left; }
.cards p { text-align: left; font-size: 0.92rem; }
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.card .fa-stack { font-size: 1.6rem; }

/* Catalog */
.catalog-tools { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 0.75rem 2rem; margin-bottom: 2rem; border-bottom: 1px solid var(--line); }
.cat-tabs { display: flex; gap: 1.75rem; overflow-x: auto; overflow-y: hidden; }
.catalog-controls { display: flex; gap: 0.5rem; padding-bottom: 0.6rem; }
.catalog-field { border: 1px solid var(--line); background: var(--card); color: var(--ink); border-radius: 999px; padding: 0.45rem 1rem; font: 500 0.9rem "Inter", sans-serif; transition: border-color 0.3s ease; }
select.catalog-field { -webkit-appearance: none; appearance: none; padding-right: 2.25rem; cursor: pointer;
  background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none' stroke='%23161616' stroke-width='1.5'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E") no-repeat right 1rem center; }
.catalog-field:focus { outline: none; border-color: var(--ink); }
.catalog-empty { text-align: center; color: var(--ink-soft); padding: 2rem 0; }
.cat-tab { border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--ink-soft); padding: 0.6rem 0; font-weight: 600; white-space: nowrap; transition: color 0.2s ease, border-color 0.2s ease; }
a.cat-tab { display: inline-block; text-decoration: none; }
.cat-tab span { font-weight: 400; opacity: 0.7; }
.cat-tab:hover { color: var(--ink); }
.cat-tab.active { color: var(--ink); border-bottom-color: var(--ink); }
.product-card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; }
/* hover border is one overlay ring above the image, so it stays a single even line */
.product-card::after { content: ""; position: absolute; inset: -1px; border: 2px solid transparent; border-radius: inherit; pointer-events: none; transition: border-color 0.35s ease; }
.product-card:hover::after { border-color: var(--line-hover); }
.product-card > a { display: block; overflow: hidden; background: var(--paper); }
.product-card img { width: 100%; height: auto; display: block; transition: transform 0.5s ease; }
.product-card:hover img { transform: scale(1.03); }
.product-body { padding: 1rem; display: flex; flex-direction: column; flex: 1; }
.product-body h4 { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.2rem; line-height: 1.25; }
.product-body .price { margin: 0 0 1rem; color: var(--ink-soft); font-size: 0.88rem; line-height: 1.4; }
.product-body .btn-wa, .col-lg-3 > .btn-wa {
  margin-top: auto; padding: 0.5rem; font-size: 0.85rem; background: transparent; color: var(--ink); border: 1px solid var(--line);
}
.product-body .btn-wa:hover, .col-lg-3 > .btn-wa:hover { background: var(--ink); border-color: var(--ink); color: #fff; }
.catalog-links { text-align: left; margin-top: 1.5rem; }
.catalog-links a { margin: 0 1rem 0 0; font-weight: 500; }
#categoryNav ~ .page-section figure { border-radius: var(--radius) !important; border: 1px solid var(--line); box-shadow: none !important; }
#categoryNav ~ .page-section figcaption h6 { font-style: normal !important; font-weight: 600 !important; }

/* How to rent: the one dark band */
#cara-sewa { background: var(--ink); color: #fff; border: 0; border-radius: var(--radius); margin: 3rem 0.75rem 0; }
#cara-sewa h2, #cara-sewa h4 { color: #fff; }
#cara-sewa .section-subheading { color: rgba(255, 255, 255, 0.65) !important; }
.steps { list-style: none; counter-reset: step; padding: 0; margin: 0; text-align: left; row-gap: 1.5rem; }
.steps li { counter-increment: step; }
.steps li::before { content: "0" counter(step); display: block; margin-bottom: 0.75rem; font: 600 1.5rem/1 var(--display); color: var(--accent); }
.steps h4 { font-size: 1.1rem; font-weight: 600; }
.steps p { color: rgba(255, 255, 255, 0.65); font-size: 0.9rem; margin: 0; }
#cara-sewa + section { border-top: 0; }
.steps-cta { margin-top: 2.5rem; text-align: right; }
#cara-sewa .btn-wa:hover, #cara-sewa .btn-wa:focus { background: #fff; color: var(--ink); }

/* Contact: light */
section#contact { background: transparent; }
section#contact .section-heading { color: var(--ink); }
section#contact .section-subheading { color: var(--ink-soft) !important; }
section#contact .footer .btn-outline-primary { color: var(--ink); }


/* Gallery: stacked photo carousel (drag, arrows or keyboard; positions set in js/scripts.js) */
.stack { position: relative; user-select: none; -webkit-user-select: none; width: 100vw; margin-left: calc(50% - 50vw); } /* full-bleed so the fanned cards have room */
.stack:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius); }
.stack-stage { position: relative; height: 20rem; overflow: hidden; }
.stack-drag { position: absolute; inset: 0; z-index: 200; cursor: grab; touch-action: pan-y; }
.stack-drag:active { cursor: grabbing; }
.stack-card {
  position: absolute; left: 50%; top: 50%; margin: 0; width: 11rem; height: 14rem; border-radius: 1rem; overflow: hidden;
  background: var(--paper-2, #ebe7dd); pointer-events: none; will-change: transform, opacity;
}
.stack-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stack-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2) 55%, transparent); }
.stack-card::after { content: ""; position: absolute; inset: 0; background: #000; opacity: min(calc(var(--a, 0) * 0.3), 0.55); }
.stack-badge { position: absolute; z-index: 1; top: 0.75rem; right: 0.75rem; padding: 0.15rem 0.6rem; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--ink); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.stack-card figcaption { position: absolute; z-index: 1; left: 0.9rem; right: 0.9rem; bottom: 1rem; color: #fff; font: 600 0.95rem/1.2 var(--display); opacity: max(0, calc(1 - var(--a, 0) * 2)); }
@media (min-width: 640px) { .stack-stage { height: 28rem; } .stack-card { width: 14rem; height: 20rem; } }
@media (min-width: 1024px) { .stack-stage { height: 32rem; } .stack-card { width: 16rem; height: 24rem; } .stack-card figcaption { font-size: 1.15rem; } }

/* Product detail */
.detail { padding-top: 7rem; border-top: 0; }
.breadcrumb { background: transparent; padding: 0; margin-bottom: 2rem; font-size: 0.9rem; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ink-soft); }
.breadcrumb-item.active { color: var(--ink-soft); }
.detail-gallery { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.detail-gallery .carousel-indicators li { background-color: var(--ink); opacity: 0.25; height: 3px; }
.detail-gallery .carousel-indicators .active { opacity: 1; }
.detail-info { padding: 1rem 0; }
.detail-badge { display: inline-block; padding: 0.15rem 0.7rem; margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.detail-info h1 { font-size: clamp(2rem, 4vw, 2.75rem); margin-bottom: 0.75rem; }
.detail-price { font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; }
.detail-back { margin-top: 1.5rem; font-size: 0.95rem; }
@media (min-width: 992px) { .detail-info { padding: 2rem 0 0 1rem; } }
@media (max-width: 991px) { .detail-info { margin-top: 1.5rem; } }

.detail + .page-section { border-top: 0; padding-top: 3rem; } /* no divider between product and recommendations */
/* Recommendations: swipeable slider (scroll-snap); all 5 fit in one row on desktop */
#categoryNav ~ section .row-5 { flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; margin: 0 -0.5rem; padding-bottom: 0.75rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
#categoryNav ~ section .row-5 > .product-col { flex: 0 0 72%; max-width: 72%; padding: 0 0.5rem; scroll-snap-align: start; }
@media (min-width: 576px) { #categoryNav ~ section .row-5 > .product-col { flex-basis: 42%; max-width: 42%; } }
@media (min-width: 768px) { #categoryNav ~ section .row-5 > .product-col { flex-basis: 32%; max-width: 32%; } }
@media (min-width: 992px) { #categoryNav ~ section .row-5 > .product-col { flex-basis: 20%; max-width: 20%; } }

/* Footer social buttons */
.btn-social { height: 3.5rem; width: 3.5rem; font-size: 1.5rem; }
/* same look as the Chat WhatsApp button: orange fill, dark icon, dark hover */
.btn-outline-primary.btn-social, section#contact .footer .btn-outline-primary.btn-social { background: var(--accent); border: 0; color: var(--accent-ink); transition: background 0.2s ease, color 0.2s ease; }
.btn-outline-primary.btn-social:hover, .btn-outline-primary.btn-social:focus, section#contact .footer .btn-outline-primary.btn-social:hover { background: var(--ink); color: #fff; }
@media (max-width: 575px) { .btn-social { height: 3.25rem; width: 3.25rem; margin-left: 0.35rem !important; margin-right: 0.35rem !important; } }

/* Footer */
.footer { color: var(--ink-soft); font-family: "Inter", sans-serif; }

/* Floating WhatsApp */
.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 1030; display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.7rem 1.1rem; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 0.9rem;
  box-shadow: 0 4px 14px rgba(22, 22, 22, 0.2); text-decoration: none;
}
.wa-float:hover { background: var(--ink); color: #fff; text-decoration: none; }
.wa-float i, .wa-float svg { font-size: 1.3rem; }

/* Mobile */
@media (max-width: 575px) {
  .container { padding-left: 1rem; padding-right: 1rem; }
  .page-section { padding: 3.5rem 0; }
  .page-section .text-center:not(.row) { margin-bottom: 2rem; }
  #cara-sewa { margin: 2rem 0.5rem 0; }
  .wa-float span { display: none; }
  .wa-float { padding: 0.85rem; }
  .cards { padding: 1.5rem 1.25rem; }
  .cat-tabs { gap: 1.25rem; }
  .catalog-controls { width: 100%; }
  .catalog-controls .catalog-field { flex: 1; min-width: 0; }
  .product-body { padding: 0.75rem; }
  .product-body h4 { font-size: 0.95rem; }
  .product-body .btn-wa, .col-lg-3 > .btn-wa { font-size: 0.78rem; padding: 0.5rem 0.25rem; }
  .product-body .btn-wa i, .product-body .btn-wa svg, .col-lg-3 > .btn-wa i, .col-lg-3 > .btn-wa svg { display: none; }
  .navbar .btn-wa { display: block; text-align: center; }
  #categoryNav ~ section .row { margin-left: -0.4rem; margin-right: -0.4rem; }
  #categoryNav ~ section .col-lg-3 { flex: 0 0 50%; max-width: 50%; padding: 0 0.4rem; }
  #categoryNav ~ section figure { padding: 0.5rem !important; margin-bottom: 0.75rem; }
  #categoryNav ~ section figcaption { padding: 0.75rem 0.25rem !important; }
  #categoryNav ~ section figcaption h6 { font-size: 0.95rem; }
}

/* Entrance animations */
@keyframes rise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.masthead h1, .masthead .lead, .hero-cta > * { animation: rise 1.1s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.masthead h1 { animation-delay: 0.5s; }
.masthead .lead { animation-delay: 1s; }
.hero-cta > :nth-child(1) { animation-delay: 1.5s; }
.hero-cta > :nth-child(2) { animation-delay: 1.8s; }
@media (scripting: enabled) {
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1.1s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease, border-color 0.35s ease; }
  .reveal.in { opacity: 1; transform: none; transition-delay: var(--d, 0ms); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-aos], .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .masthead h1, .masthead .lead, .hero-cta > * { animation: none; }
  .product-card img, .btn-wa, #mainNav, #categoryNav { transition: none; }
}