/* lp-konsep.css — blok produk kategori + ulasan Google + FAQ + tipografi utk LP konsep (/leatiquelp/suggestion/*). [HERMES 11 Okt 2026] Dipakai bersama 6 halaman konsep. Prefix kelas: lk- */

/* 1. Layout umum section baru */
.lk-section { background:#fff; padding:64px 0; }
.lk-sheet { max-width:1140px; margin:0 auto; padding:0 24px; }
@media (max-width:767px){ .lk-section{padding:44px 0;} .lk-sheet{padding:0 16px;} }

/* 2. Blok produk (#lk-products) */
#lk-products.lk-block { min-height:210px; }
.lk-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:22px; margin:10px 0 28px; }
@media (max-width:1199px){ .lk-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:991px){ .lk-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:767px){ .lk-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; } }
.lk-card { background:#fff; border:1px solid #ececec; border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s ease, transform .2s ease; padding:8px; }
.lk-card:hover { box-shadow:0 10px 24px rgba(0,0,0,.09); transform:translateY(-2px); }
.lk-card__media { display:block; aspect-ratio:1/1; background:#f4f6f5; border-radius:12px; overflow:hidden; }
.lk-card__media img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; transition:transform .35s ease; }
.lk-card:hover .lk-card__media img { transform:scale(1.05); }
.lk-card__body { padding:10px 8px 12px; display:flex; flex-direction:column; gap:5px; text-align:left; }
.lk-card__title { font-size:15.5px; line-height:1.42; margin:0; font-weight:600; }
.lk-card__title a { color:#2b2b2b; text-decoration:none; }
.lk-card__title a:hover { color:#2c6655; }
.lk-card__sku { font-size:12px; color:#9a9a9a; }
.lk-card__cta { display:block; margin-top:auto; padding:10px 14px; background:#2c6655; color:#ffffff; font-weight:600; font-size:14px; line-height:1.3; text-align:center; border-radius:10px; text-decoration:none; transition:background .2s ease, box-shadow .2s ease; }
.lk-card__cta:hover { background:#214d3f; color:#ffffff; }

/* 3. Skeleton */
.lk-skel { background:#eef0ef; border-radius:8px; animation:lkPulse 1.3s ease-in-out infinite; }
.lk-card--skel { pointer-events:none; }
.lk-card--skel .lk-card__media { background:#f4f6f5; }
.lk-skel--line { height:12px; margin:4px 0; display:block; }
.lk-skel--w90{width:90%;} .lk-skel--w60{width:60%;} .lk-skel--w40{width:40%;}
@keyframes lkPulse { 0%,100%{opacity:1;} 50%{opacity:.55;} }

/* 4. Tipografi penjelasan konsep (font Plus Jakarta Sans) */
.lk-prose p { font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif; font-size:20px; line-height:1.8; color:#f7f3ec; max-width:800px; margin:0 auto 16px; text-align:left; font-weight:400; }
.lk-prose p:last-child { margin-bottom:0; }
.lk-prose h1 { text-align:center; margin:0 0 18px; }
@media (max-width:767px){ .lk-prose p{ font-size:17.5px; line-height:1.7; } }
.lk-quote { font-family:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif; font-size:18.5px; line-height:1.78; color:#45403b; max-width:820px; margin:0 auto 24px; text-align:left; }
@media (max-width:767px){ .lk-quote{ font-size:16.5px; } }

/* 5. Ulasan Google (#sec-lk-reviews) */
.lk-rev { text-align:center; }
.lk-rev__brand { display:flex; flex-direction:column; align-items:center; gap:8px; margin-bottom:14px; }
.lk-rev__brand svg { display:block; }
.lk-rev__sub { margin:0; color:#5b5b5b; font-size:15px; letter-spacing:.4px; }
.lk-rev__meta { display:flex; justify-content:center; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:30px; }
.lk-rev__score { font-size:34px; font-weight:700; color:#2c6655; line-height:1; }
.lk-rev__stars { color:#fbbc04; font-size:22px; letter-spacing:3px; line-height:1; white-space:nowrap; }
.lk-rev__count { color:#5b5b5b; font-size:15px; }
.lk-rev__grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; margin:0 0 26px; }
@media (max-width:991px){ .lk-rev__grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:575px){ .lk-rev__grid{ grid-template-columns:1fr; } }
.lk-rev__card { margin:0; border:1px solid #ececec; border-radius:12px; padding:20px 22px; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.05); display:flex; flex-direction:column; gap:10px; text-align:left; }
.lk-rev__card .lk-rev__stars { font-size:16px; letter-spacing:2px; }
.lk-rev__text { color:#4a4a4a; font-size:15px; line-height:1.7; margin:0; display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden; }
.lk-rev__name { font-weight:600; font-size:14.5px; color:#2b2b2b; margin-top:auto; }
.lk-rev__date { font-weight:400; color:#9a9a9a; font-size:12.5px; }
.lk-rev__all { display:inline-block; padding:12px 28px; border:2px solid #2c6655; border-radius:8px; color:#2c6655; font-weight:600; font-size:15px; text-decoration:none; transition:background .2s ease,color .2s ease; }
.lk-rev__all:hover { background:#2c6655; color:#fff; }

/* 6. FAQ (#sec-lk-faq) */
.lk-h2 { font-size:28px; font-weight:700; color:#2b2b2b; text-align:center; margin:0 0 28px; line-height:1.3; }
@media (max-width:767px){ .lk-h2{ font-size:23px; } }
.lk-faq { max-width:860px; margin:0 auto; text-align:left; }
.lk-faq, .lk-faq * { overflow-anchor: none; }
.lk-faq__item { border-bottom:1px solid #e3e3e3; overflow-anchor:none; }
.lk-faq__item:first-child { border-top:1px solid #e3e3e3; }
.lk-faq__q { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; background:none; border:0; padding:18px 0; margin:0; cursor:pointer; text-align:left; font-family:inherit; font-weight:600; font-size:17px; color:#2b2b2b; line-height:1.5; }
.lk-faq__q:hover { color:#2c6655; }
.lk-faq__icon { position:relative; width:20px; height:20px; flex:0 0 20px; }
.lk-faq__icon::before, .lk-faq__icon::after { content:''; position:absolute; left:50%; top:50%; background:#2c6655; border-radius:2px; transition:transform .25s ease, opacity .25s ease; }
.lk-faq__icon::before { width:14px; height:2px; transform:translate(-50%,-50%); }
.lk-faq__icon::after { width:2px; height:14px; transform:translate(-50%,-50%); }
.lk-faq__item.is-open .lk-faq__icon::after { transform:translate(-50%,-50%) scaleY(0); opacity:0; }
.lk-faq__a { overflow-anchor:none; }
.lk-faq__inner { overflow:hidden; }
.lk-faq__inner > p { margin:0; padding-bottom:20px; color:#555; font-size:15.5px; line-height:1.8; }
/* Tanpa JavaScript: jawaban tetap TERBUKA (fallback ramah SEO). Dengan JS: akordeon animasi. */
html.lk-js .lk-faq__a { display:grid; grid-template-rows:0fr; transition:grid-template-rows .28s ease; }
html.lk-js .lk-faq__item.is-open .lk-faq__a { grid-template-rows:1fr; }

/* 7. Perbaikan CTA produk & hero mobile */
#lk-products + .u-btn { display:block; width:max-content; max-width:100%; margin:26px auto 34px; white-space:normal; text-align:center; box-sizing:border-box; }
@media (max-width:767px){ #lk-products + .u-btn { font-size:15px; letter-spacing:1px; padding:12px 16px; } }
@media (max-width:767px){ body section:first-of-type > .u-sheet-1 { min-height:0 !important; padding-bottom:32px; } }