/* Custom CSS on top of Tailwind utility classes — consolidated from the
   original per-page <style> blocks so every template shares one file. */

html { scroll-behavior: smooth; }
body { font-family: 'Plus Jakarta Sans', sans-serif; }

.mobile-menu { transition: max-height .3s ease; overflow: hidden; }

/* Homepage: trusted-by logo marquee */
.logo-track { animation: apk-scroll-left 25s linear infinite; }
@keyframes apk-scroll-left {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.logo-track:hover { animation-play-state: paused; }

/* Homepage: hero background slider (min 3 slides, auto cross-fade) */
.hero-slide { opacity: 0; animation: apk-hero-fade 18s infinite; }
.hero-slide:nth-child(1) { animation-delay: 0s; }
.hero-slide:nth-child(2) { animation-delay: 6s; }
.hero-slide:nth-child(3) { animation-delay: 12s; }
@keyframes apk-hero-fade {
	0% { opacity: 0; }
	4% { opacity: 1; }
	30% { opacity: 1; }
	36% { opacity: 0; }
	100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.hero-slide { animation: none; opacity: 1; }
}

/* Homepage: service cards */
.service-card .service-icon svg { color: #212134; transition: color .3s ease; }
.service-card:hover .service-icon { background-color: #F05A24; }
.service-card:hover .service-icon svg { color: #fff; }
.service-card:hover { border-color: #F05A24; box-shadow: 0 10px 30px -10px rgba(240, 90, 36, 0.35); }
.service-card:hover .service-link { color: #F05A24; }

/* Homepage: capability cards — border highlight on hover only, no permanent state */
.cap-card { border: 2px solid transparent; transition: border-color .3s ease, transform .3s ease; }
.cap-card:hover { border-color: #F05A24; transform: translateY(-3px); }

/* Portfolio card hover overlay (grid + masonry) */
.portfolio-card .overlay {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .25s ease, transform .25s ease;
}
.portfolio-card:hover .overlay { opacity: 1; transform: translateY(0); }
.portfolio-card img { transition: transform .4s ease; }
.portfolio-card:hover img { transform: scale(1.04); }

/* Filter buttons: homepage portfolio filter uses navy active state */
.filter-btn.active {
	background-color: #212134;
	color: #fff;
	border-color: #212134;
}
/* Portofolio/Blog filter + Kapabilitas method tabs use orange active state */
.filter-btn-orange.active,
.tab-btn.active {
	background-color: #F05A24;
	color: #fff;
	border-color: #F05A24;
}

.step-connector {
	background: #212134;
}

input:focus, textarea:focus, select:focus {
	outline: none;
	border-color: #F05A24;
	box-shadow: 0 0 0 3px rgba(240,90,36,0.15);
}

/* Layanan page: alternating image/text rows */
.service-row img { transition: transform .5s ease; }
.service-row:hover img { transform: scale(1.03); }

/* Portofolio page: masonry grid */
.masonry { column-count: 1; column-gap: 1.5rem; }
@media (min-width: 640px) { .masonry { column-count: 2; } }
@media (min-width: 1024px) { .masonry { column-count: 3; } }
.masonry-item { break-inside: avoid; margin-bottom: 1.5rem; }

/* Blog article cards */
.article-card img { transition: transform .4s ease; }
.article-card:hover img { transform: scale(1.05); }

/* Blog single: article body typography */
.prose-custom h2 { font-weight: 800; font-size: 1.5rem; color: #212134; margin-top: 2.5rem; margin-bottom: 1rem; }
.prose-custom p { color: rgba(33,33,52,0.75); line-height: 1.8; margin-bottom: 1.25rem; }
.prose-custom ul { list-style: disc; padding-left: 1.5rem; color: rgba(33,33,52,0.75); margin-bottom: 1.25rem; }
.prose-custom li { margin-bottom: 0.5rem; line-height: 1.7; }
.prose-custom li strong { color: #212134; }
.prose-custom .prose-lead { font-size: 1.125rem; font-style: italic; color: #212134; border-left: 4px solid #F05A24; padding-left: 1.25rem; }

/* Kapabilitas page: machine carousel + method tabs */
.carousel-slide { display: none; }
.carousel-slide.active { display: block; }
.method-panel { display: none; }
.method-panel.active { display: grid; }