/* Tampilan sederhana. Bootstrap 5.1.3 dipakai untuk grid dan komponen. */
body { font-family: Arial, Helvetica, sans-serif; color: #444; font-size: 15px; line-height: 1.7; background: #fff; }
a { color: #3c763d; }
a:hover { color: #285429; }
.container { max-width: 1170px; }
.top-bar { background: #f3f3f3; border-top: 4px solid #3c763d; border-bottom: 1px solid #ddd; padding: 5px 0; font-size: 12px; color: #666; }
.navbar { padding: 16px 0; background: #fff; border-bottom: 1px solid #ddd; }
.navbar-brand { display: flex; gap: 12px; align-items: center; margin-right: 20px; padding: 0; }
.brand-logo { font-size: 38px; font-weight: bold; letter-spacing: -2px; color: #3c763d; line-height: 1.1; border-right: 1px solid #ddd; padding-right: 13px; }
.brand-description { font-size: 12px; font-weight: bold; color: #444; letter-spacing: .3px; line-height: 1.5; }
.brand-description small { display: block; color: #777; font-size: 11px; font-weight: normal; letter-spacing: 0; }
.navbar-light .navbar-nav .nav-link { color: #555; padding: 8px 14px; font-size: 14px; }
.navbar-light .navbar-nav .nav-link.active { background: #3c763d; color: #fff; }
.navbar-light .navbar-nav .nav-link:hover { background: #eee; color: #333; }
.navbar-light .navbar-nav .nav-link.active:hover { background: #315f32; color: white; }
.navbar-toggler { padding: 5px 8px; border-radius: 3px; margin-left: auto; }
.navbar-toggler-icon { width: 23px; height: 23px; }
.hero { background: linear-gradient(90deg, rgba(0,0,0,.73), rgba(0,0,0,.25)), url('../images/production.jpg') center 47% / cover; color: #fff; padding: 57px 0 60px; min-height: 365px; }
.hero-content { max-width: 670px; }
.hero-kicker { font-size: 13px; letter-spacing: 1px; margin-bottom: 10px; }
.hero h1 { font-size: 40px; line-height: 1.2; font-weight: bold; margin-bottom: 15px; }
.hero p:not(.hero-kicker) { color: #eee; font-size: 16px; line-height: 1.7; margin-bottom: 24px; }
.btn { border-radius: 3px; font-size: 14px; padding: 7px 15px; }
.btn-sm { font-size: 13px; padding: 5px 12px; }
.btn-success { background: #3c763d; border-color: #356936; }
.btn-success:hover, .btn-success:focus { background: #2e5b2f; border-color: #285129; }
.btn-outline-secondary { color: #555; border-color: #bbb; }
.section { padding: 43px 0; }
.bg-light { background: #f5f5f5 !important; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5; }
.section-heading { border-bottom: 1px solid #ddd; padding-bottom: 12px; margin-bottom: 25px; display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.section-heading h2, .content-title { font-size: 26px; color: #333; margin: 0 0 8px; line-height: 1.35; font-weight: normal; }
.section-heading p { margin: 0; color: #777; font-size: 14px; }
.section-heading > .btn { white-space: nowrap; margin-top: 2px; }
.about-home { margin-bottom: 12px; }
.simple-link { text-decoration: none; font-size: 14px; }
.catalog-box, .blog-box { background: #fff; border: 1px solid #ddd; border-radius: 3px; padding: 4px; height: 100%; scroll-margin-top: 20px; }
.product-image { display: block; width: 100%; height: 210px; object-fit: contain; background: #f4f4f4; }
.box-body { padding: 15px; }
h3 { font-size: 19px; color: #333; line-height: 1.4; margin-bottom: 10px; }
.box-body h3 { color: #3c763d; }
.box-body p { font-size: 14px; margin-bottom: 15px; }
.table { font-size: 13px; line-height: 1.5; }
.table th { width: 38%; font-weight: normal; background: #f5f5f5; }
.process-list { text-align: center; }
.process-list p { font-size: 14px; max-width: 310px; margin: auto; }
.step-number { width: 44px; height: 44px; background: #3c763d; border: 1px solid #315f32; color: #fff; border-radius: 3px; font-size: 24px; line-height: 42px; margin: 0 auto 14px; }
.gallery-item { padding: 4px; background: #fff; border: 1px solid #ddd; border-radius: 3px; margin: 0; }
.gallery-button { border: 0; display: block; padding: 0; width: 100%; background: #eee; cursor: pointer; }
.gallery-button img { width: 100%; height: 200px; object-fit: cover; display: block; }
.gallery-item figcaption { padding: 7px 9px; font-size: 14px; text-align: center; }
.gallery-button:hover img { opacity: .9; }
.gallery-button:focus-visible { outline: 3px solid #3c763d; outline-offset: 2px; }
.blog-box > img { width: 100%; height: 165px; object-fit: cover; }
.article-label { font-size: 12px !important; color: #777; margin-bottom: 7px !important; }
.page-heading { background: #f5f5f5; padding: 24px 0; border-bottom: 1px solid #ddd; }
.page-heading h1 { font-size: 28px; color: #333; font-weight: normal; margin: 0 0 7px; }
.breadcrumb { font-size: 13px; }
.breadcrumb a { text-decoration: none; }
.about-image { width: 100%; height: 315px; object-fit: cover; }
.info-box, .sidebar, .inquiry-box { border: 1px solid #ddd; background: #fff; padding: 23px; border-radius: 3px; }
.info-box { height: 100%; }
.info-box h2, .sidebar h2, .inquiry-box h2 { font-size: 21px; color: #333; font-weight: normal; }
.info-box p:last-child, .inquiry-box p:last-child { margin-bottom: 0; }
.inquiry-box { background: #f5f5f5; }
.full-article { border: 1px solid #ddd; margin-bottom: 28px; scroll-margin-top: 20px; border-radius: 3px; overflow: hidden; }
.full-article > img { width: 100%; height: 280px; object-fit: cover; }
.article-body { padding: 24px; }
.article-body h2 { font-size: 25px; line-height: 1.4; color: #3c763d; margin-bottom: 17px; }
.article-body p:last-child { margin-bottom: 0; }
.article-list { margin-bottom: 0; }
.article-list li { border-bottom: 1px solid #eee; padding: 11px 0; font-size: 14px; }
.article-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.article-list a { text-decoration: none; }
.photo-credit { border-top: 1px solid #ddd; margin-top: 35px; padding-top: 25px; font-size: 13px; color: #666; }
.photo-credit h2 { font-size: 20px; color: #444; }
.photo-credit ul { padding-left: 20px; }
.form-control, .form-select { border-radius: 3px; font-size: 14px; padding: 9px 11px; }
.form-control:focus, .form-select:focus { border-color: #6a9c6b; box-shadow: 0 0 0 .15rem rgba(60,118,61,.15); }
.form-label { font-size: 14px; margin-bottom: 5px; }
.contact-list { padding-left: 20px; font-size: 14px; }
.sidebar h3 { font-size: 17px; }
footer { border-top: 4px solid #3c763d; background: #292929; color: #ccc; font-size: 12px; padding: 22px 0; }
.footer-content { display: flex; justify-content: space-between; gap: 12px; }
footer a { color: #c4d9b8; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
.skip-link { position: absolute; z-index: 2000; background: #fff; padding: 10px; }
#photoLarge { max-height: 75vh; object-fit: contain; }
@media (max-width: 767px) {
 .navbar { padding: 13px 0; }
 .navbar-brand { gap: 8px; margin-right: 10px; }
 .brand-logo { font-size: 32px; padding-right: 9px; }
 .brand-description { font-size: 10px; }
 .brand-description small { font-size: 10px; }
 .navbar-collapse { margin-top: 14px; }
 .navbar-light .navbar-nav .nav-link { padding: 9px 12px; border-bottom: 1px solid #eee; }
 .hero { padding: 40px 0; min-height: 320px; }
 .hero h1 { font-size: 32px; }
 .hero p:not(.hero-kicker) { font-size: 14px; }
 .hero .btn { padding: 7px 10px; font-size: 12px; }
 .section { padding: 30px 0; }
 .section-heading { display: block; }
 .section-heading h2, .content-title { font-size: 24px; }
 .section-heading > .btn { margin-top: 12px; }
 .process-list > div + div { margin-top: 22px; }
 .product-image { height: 235px; }
 .gallery-button img { height: 200px; }
 .full-article > img { height: 220px; }
 .article-body { padding: 18px; }
 .article-body h2 { font-size: 22px; }
 .footer-content { display: block; text-align: center; }
 .footer-content p + p { margin-top: 5px; }
}