@import url('https://fonts.googleapis.com/css2?family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Inter:wght@300;400;500&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Inter',sans-serif;background:#fff;color:#2C2A29;line-height:1.55;font-size:1rem;opacity:0;transition:opacity .2s}
body.fonts-loaded{opacity:1}
.header{position:sticky;top:0;width:100%;background:#fff;z-index:20;box-shadow:0 2px 8px rgba(0,0,0,.02),0 4px 12px rgba(0,0,0,.03)}
.header-inner{max-width:880px;margin:0 auto;padding:1rem 1.5rem;display:flex;justify-content:space-between;align-items:baseline}
.logo{font-family:'Newsreader',serif;font-weight:500;font-size:1.3rem;color:#4A4A4A;letter-spacing:-.2px}

.product-item{list-style:none}

.docu-link{font-size:.85rem;color:#A89F91;text-decoration:none;border-bottom:1px solid #DCD5CC}
.docu-link:hover{color:#7A6E5D}
.main-container{max-width:880px;margin:0 auto;padding:2rem 1.5rem 0;background:#fff}
h1{font-family:'Newsreader',serif;font-weight:500;font-size:clamp(1.8rem,5vw,2.5rem);text-align:center;margin-bottom:.75rem;margin-top:.5rem;color:#2C2A29}
h2{font-family:'Inter',sans-serif;font-weight:400;font-size:1.1rem;text-align:center;color:#6B6256;margin-bottom:2rem}
h3{font-family:'Newsreader',serif;font-weight:500;font-size:1.4rem;margin:2.5rem 0 1rem;text-align:center;color:#3D3A36}
.hero-img{border-radius:24px;width:100%;margin:1rem 0 1.5rem;box-shadow:0 12px 28px rgba(0,0,0,.1);transition:all .2s}
.hero-img:hover{transform:translateY(-3px);box-shadow:0 20px 35px rgba(0,0,0,.15)}
.filter-btn,.load-more-btn,.contact-note a{background:#E8E2D9;border:none;padding:.5rem 1.5rem;border-radius:50px;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;cursor:pointer;color:#4A4640;box-shadow:0 3px 0 #CBC3B8,0 4px 12px rgba(0,0,0,.08);transition:all .1s ease;text-decoration:none;display:inline-block}
.filter-btn:active,.load-more-btn:active,.contact-note a:active{transform:translateY(2px);box-shadow:0 1px 0 #CBC3B8,0 4px 12px rgba(0,0,0,.08)}
.filter-btn:hover,.load-more-btn:hover,.contact-note a:hover{background:#F0EBE4;transform:translateY(-1px);box-shadow:0 4px 0 #CBC3B8,0 8px 18px rgba(0,0,0,.1)}
.filter-btn.active{background:#D8CFC4;box-shadow:0 2px 0 #B8AD9F,0 4px 12px rgba(0,0,0,.08);transform:translateY(1px)}
.filter-tabs{display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;margin-bottom:2rem}
.action-link,.demo-link{display:inline-block;background:#fff;border:1.5px solid #D1C9BF;padding:.45rem 1.2rem;border-radius:40px;font-family:'Inter',sans-serif;font-size:.85rem;font-weight:500;text-decoration:none;color:#5E5546;transition:.2s;box-shadow:0 2px 6px rgba(0,0,0,.03)}
.action-link:hover,.demo-link:hover{background:#F0EBE4;border-color:#B3A797;box-shadow:0 6px 12px rgba(0,0,0,.06);transform:translateY(-1px)}
.load-more-wrap{text-align:center;margin:2rem 0}
.product-item{margin-bottom:1rem;border-radius:20px;background:#fff;box-shadow:0 12px 28px rgba(0,0,0,.08);transition:all .2s}
.product-item:hover{box-shadow:0 20px 35px rgba(0,0,0,.12)}
.link-container{display:flex;justify-content:space-between;align-items:center;width:100%;background:0 0;border:none;font-family:'Newsreader',serif;font-weight:500;font-size:1.1rem;padding:1rem 1.2rem;cursor:pointer;text-align:left;border-radius:20px;background:#fff;transition:border-radius .2s}
.link-container[aria-expanded="true"]{border-radius:20px 20px 0 0}
.link-container:hover{background:#FCFAF7}
.meta{font-family:'Inter',sans-serif;font-size:.7rem;color:#9B9285;background:#F0EBE4;padding:.2rem .7rem;border-radius:30px}
.item-details{display:none;padding:0 1.2rem 1.2rem;background:#fff;border-radius:0 0 20px 20px;animation:fadeSlide .2s}
.item-details.show{display:block}
@keyframes fadeSlide{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.product-img{border-radius:18px;width:100%;margin:.5rem 0 .8rem;aspect-ratio:16/9;object-fit:cover;box-shadow:0 6px 14px rgba(0,0,0,.06)}
.details-desc{font-size:.9rem;color:#4A4640;margin:.8rem 0;line-height:1.5}
.action-row{display:flex;gap:1rem;margin-top:.5rem}
.hidden-item{display:none}
.about-card,.case-card,.info-card,.faq-item{box-shadow:0 12px 28px rgba(0,0,0,.08);transition:transform .2s,box-shadow .2s}
.about-card:hover,.case-card:hover{transform:translateY(-3px);box-shadow:0 20px 35px rgba(0,0,0,.12)}
.about-grid,.case-grid,.cocok-grid{display:flex;flex-wrap:wrap;gap:1.5rem;margin:1.5rem 0}
.about-card,.case-card{flex:1 1 200px;background:#FDFCF9;border-radius:24px;padding:1.2rem}
.about-card i,.case-card i{font-size:1.2rem;color:#B3A797;margin-right:.5rem}
.about-card strong,.case-card h4{font-family:'Newsreader',serif;font-size:1rem;margin-bottom:.4rem}
.about-card p,.case-card p{font-size:.85rem;color:#5E5546}
.cocok-grid{justify-content:center}
.cocok-item{background:#F0EBE4;padding:.4rem 1rem;border-radius:40px;font-size:.85rem;color:#4A4640}
.cocok-item i{margin-right:.4rem}
.faq-list{margin:1.5rem 0}
.faq-item{background:#fff;border-radius:20px;margin-bottom:.8rem;overflow:hidden}
.faq-question{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.2rem;font-weight:500;cursor:pointer;background:#fff}
.faq-question:hover{background:#FCFAF7}
.faq-question i{color:#A89F91}
.faq-answer{display:none;padding:0 1.2rem 1rem;font-size:.85rem;color:#6B6256;border-top:1px solid #EFEAE3}
.faq-answer.show{display:block}
.info-card{background:#FDFCF9;border-radius:24px;padding:1.5rem;text-align:center;margin:2rem 0}
.info-card p{font-size:.85rem;color:#5E5546}
.contact-note{text-align:center;margin:1.5rem 0}
.contact-note a{padding:.7rem 2rem;font-size:.95rem}
.contact-note i{margin-right:.5rem}
.footer-text{text-align:center;font-size:.7rem;color:#B3A797;margin-top:2.5rem;padding-bottom:1rem}
@media (max-width:640px){.main-container{padding:1rem 1rem 0}.header-inner{padding:.75rem 1rem}.link-container{padding:.8rem 1rem}.item-details{padding:0 1rem 1rem}h1{margin-top:0}}