/* Batik Custom Plugin — Public CSS */

/* ── Variables ── */
:root {
    --bcp-purple: #534AB7;
    --bcp-purple-light: #EEEDFE;
    --bcp-teal: #0F6E56;
    --bcp-teal-light: #E1F5EE;
    --bcp-amber: #BA7517;
    --bcp-amber-light: #FAEEDA;
    --bcp-coral: #993C1D;
    --bcp-coral-light: #FAECE7;
    --bcp-blue: #185FA5;
    --bcp-blue-light: #E6F1FB;
    --bcp-text: #1d2327;
    --bcp-muted: #666;
    --bcp-border: #e0e0e0;
    --bcp-radius: 10px;
}

/* ── Hero ── */
.bcp-hero { padding: 64px 20px; text-align: center; }
.bcp-hero__inner { max-width: 720px; margin: 0 auto; }
.bcp-hero__headline { font-size: clamp(24px, 4vw, 38px); font-weight: 700; color: var(--bcp-text); line-height: 1.25; margin: 0 0 16px; }
.bcp-hero__sub { font-size: 16px; color: var(--bcp-muted); margin: 0 0 24px; line-height: 1.6; }
.bcp-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 32px; }
.bcp-hero__cta { font-size: 16px; padding: 14px 32px; }

/* ── Badges ── */
.bcp-badge { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.bcp-badge--blue   { background: var(--bcp-blue-light);   color: var(--bcp-blue); }
.bcp-badge--teal   { background: var(--bcp-teal-light);   color: var(--bcp-teal); }
.bcp-badge--amber  { background: var(--bcp-amber-light);  color: var(--bcp-amber); }
.bcp-badge--coral  { background: var(--bcp-coral-light);  color: var(--bcp-coral); }
.bcp-badge--purple { background: var(--bcp-purple-light); color: var(--bcp-purple); }

/* ── Buttons ── */
.bcp-btn { display: inline-block; padding: 10px 22px; border-radius: var(--bcp-radius); font-size: 14px; font-weight: 500; text-decoration: none; cursor: pointer; border: none; transition: opacity .15s; }
.bcp-btn:hover { opacity: .88; }
.bcp-btn--primary  { background: var(--bcp-purple); color: #fff; }
.bcp-btn--secondary{ background: #fff; color: var(--bcp-purple); border: 1.5px solid var(--bcp-purple); }
.bcp-btn--full { width: 100%; text-align: center; box-sizing: border-box; }

/* ── Section common ── */
.bcp-section-title { font-size: clamp(20px, 3vw, 28px); font-weight: 700; color: var(--bcp-text); text-align: center; margin: 0 0 10px; }
.bcp-section-sub { font-size: 15px; color: var(--bcp-muted); text-align: center; margin: 0 0 40px; }

/* ── Proses ── */
.bcp-proses { padding: 60px 20px; background: #fafafa; }
.bcp-proses__grid { max-width: 840px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.bcp-proses__item { display: flex; gap: 14px; background: #fff; border: 1px solid var(--bcp-border); border-radius: var(--bcp-radius); padding: 18px 20px; align-items: flex-start; }
.bcp-proses__num { width: 36px; height: 36px; min-width: 36px; border-radius: 50%; background: var(--bcp-purple-light); color: var(--bcp-purple); font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.bcp-proses__judul { font-size: 14px; font-weight: 600; margin: 0 0 4px; color: var(--bcp-text); }
.bcp-proses__desc { font-size: 13px; color: var(--bcp-muted); margin: 0; line-height: 1.5; }

/* ── Form ── */
.bcp-form-section { padding: 60px 20px; }
.bcp-form-wrap { max-width: 680px; margin: 0 auto; }
.bcp-form { margin-top: 28px; }
.bcp-form__row { margin-bottom: 16px; }
.bcp-form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.bcp-form__row--3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.bcp-form__group { display: flex; flex-direction: column; }
.bcp-form__group--center { justify-content: flex-end; }
.bcp-label { font-size: 13px; font-weight: 500; color: var(--bcp-text); margin-bottom: 5px; }
.bcp-label-note { font-weight: 400; color: var(--bcp-muted); font-size: 12px; }
.bcp-req { color: #e24b4a; }
.bcp-input { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--bcp-border); border-radius: 8px; font-size: 14px; color: var(--bcp-text); transition: border-color .15s; }
.bcp-input:focus { outline: none; border-color: var(--bcp-purple); }
.bcp-select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px; }
.bcp-textarea { resize: vertical; min-height: 80px; }
.bcp-form__info { display: flex; gap: 8px; align-items: flex-start; background: var(--bcp-blue-light); color: var(--bcp-blue); padding: 12px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 16px; line-height: 1.5; }
.bcp-form-msg { padding: 12px 16px; border-radius: 8px; font-size: 14px; margin-bottom: 16px; }
.bcp-form-msg--success { background: var(--bcp-teal-light); color: var(--bcp-teal); }
.bcp-form-msg--error   { background: #fcebeb; color: #a32d2d; }

/* ── Kalkulator ── */
.bcp-kalkulator { padding: 60px 20px; background: #fafafa; }
.bcp-kalkulator__wrap { max-width: 680px; margin: 0 auto; }
.bcp-kalk__form { background: #fff; border: 1px solid var(--bcp-border); border-radius: var(--bcp-radius); padding: 24px; }
.bcp-kalk__result { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--bcp-border); }
.bcp-kalk__result-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 10px; }
.bcp-kalk__stat { background: #f8f8f8; border-radius: 8px; padding: 12px; text-align: center; }
.bcp-kalk__stat-label { display: block; font-size: 11px; color: var(--bcp-muted); margin-bottom: 4px; }
.bcp-kalk__stat-val { display: block; font-size: 16px; font-weight: 600; color: var(--bcp-text); }
.bcp-kalk__catatan { font-size: 12px; color: var(--bcp-muted); margin: 0; }

/* ── Responsive ── */
@media (max-width: 600px) {
    .bcp-form__row--2, .bcp-form__row--3 { grid-template-columns: 1fr; }
    .bcp-kalk__result-grid { grid-template-columns: 1fr 1fr; }
    .bcp-proses__grid { grid-template-columns: 1fr; }
}

.bcp-help{display:block;margin-top:6px;color:#64748b;font-size:12px;line-height:1.5}.bcp-kalk__fixed{height:44px;display:flex;align-items:center;padding:0 14px;border:1px solid #d7deea;border-radius:10px;background:#f8fafc;font-weight:600;color:#1e293b}

/* ── Portfolio & Mini Store Additions (v2) ────────── */
.bcw-ministore-hero { position:relative; }
.bcw-portfolio-grid > div { transition: box-shadow .15s, transform .15s; }
.bcw-portfolio-grid > div:hover { transform: translateY(-2px); }


/* ── Landing v1 Conversion Upgrade ───────────────────────── */
.bcp-shell{max-width:1160px;margin:0 auto;padding:0 20px;box-sizing:border-box}
.bcp-btn--lg{padding:14px 28px;font-size:15px}
.bcw-landing-hero{background:linear-gradient(135deg,#f4f1ff 0%,#ffffff 48%,#eef6ff 100%);padding:56px 0 34px;overflow:hidden}
.bcw-landing-hero__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:28px;align-items:center}
.bcw-kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#4f46e5;margin-bottom:14px}
.bcw-landing-title{font-size:clamp(32px,5vw,54px);line-height:1.08;font-weight:800;color:#111827;margin:0 0 14px}
.bcw-landing-sub{font-size:17px;line-height:1.7;color:#4b5563;max-width:760px;margin:0 0 18px}
.bcw-landing-points{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 22px}.bcw-landing-points span{background:#fff;border:1px solid #dbe4ff;color:#312e81;padding:8px 12px;border-radius:999px;font-size:13px;font-weight:700}
.bcw-landing-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px}
.bcw-landing-trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.bcw-trustbox{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:16px 16px 15px;box-shadow:0 8px 24px rgba(15,23,42,.05)}
.bcw-trustbox strong{display:block;font-size:22px;color:#312e81;line-height:1.1;margin-bottom:6px}.bcw-trustbox span{display:block;font-size:13px;line-height:1.55;color:#6b7280}
.bcw-highlight-card{background:linear-gradient(160deg,#1e1b4b,#312e81);color:#fff;border-radius:28px;padding:28px;box-shadow:0 20px 50px rgba(49,46,129,.25)}
.bcw-highlight-card__label{font-size:13px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#c7d2fe;margin-bottom:14px}.bcw-highlight-list{margin:0;padding-left:18px}.bcw-highlight-list li{margin:0 0 10px;line-height:1.6;color:rgba(255,255,255,.92)}.bcw-highlight-note{margin-top:12px;font-size:13px;line-height:1.65;color:rgba(255,255,255,.8)}
.bcw-value-strip{padding:18px 0 8px}.bcw-value-strip__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}.bcw-value-item{background:#fff;border:1px solid #e5e7eb;border-radius:18px;padding:18px 18px 16px}.bcw-value-item b{display:block;font-size:16px;color:#111827;margin-bottom:8px}.bcw-value-item span{font-size:14px;line-height:1.65;color:#6b7280}
.bcw-home-portfolio{padding:48px 0 20px}.bcw-empty-state{max-width:760px;margin:0 auto;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:20px;padding:28px;text-align:center}.bcw-empty-state strong{display:block;color:#0f172a;font-size:18px;margin-bottom:8px}.bcw-empty-state p{margin:0;color:#64748b;line-height:1.7}.bcw-section-cta{text-align:center;margin-top:12px}
.bcw-home-reassure{padding:14px 0 6px}.bcw-home-reassure__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.bcw-reassure-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;padding:22px}.bcw-reassure-card h3{font-size:20px;margin:0 0 12px;color:#111827}.bcw-reassure-card ul{margin:0;padding-left:18px}.bcw-reassure-card li{margin:0 0 10px;color:#4b5563;line-height:1.7}.bcw-reassure-card--accent{background:linear-gradient(135deg,#eef2ff,#f8faff);border-color:#c7d2fe}
.bcw-home-portfolio .bcw-portfolio-card,.bcw-home-portfolio .bcw-portfolio-grid > div{height:100%}
@media (max-width: 900px){.bcw-landing-hero__grid,.bcw-home-reassure__grid,.bcw-value-strip__grid{grid-template-columns:1fr}.bcw-landing-trust{grid-template-columns:1fr}.bcw-landing-hero{padding-top:38px}}


/* Proses Produksi */
/* ── Proses Produksi Grid ── */
.bcw-production-section{padding:40px 0 24px}
.bcw-production-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.bcw-production-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;overflow:hidden;box-shadow:0 4px 16px rgba(15,23,42,.06);transition:transform .22s ease,box-shadow .22s ease}
.bcw-production-card:hover{transform:translateY(-5px);box-shadow:0 16px 40px rgba(15,23,42,.13)}
.bcw-production-card--featured{border-color:#d4a855;box-shadow:0 4px 20px rgba(212,168,85,.18)}
.bcw-production-card--featured:hover{box-shadow:0 16px 44px rgba(212,168,85,.28)}
.bcw-production-card__media{aspect-ratio:16/9;background:#f8fafc;overflow:hidden;position:relative}
.bcw-production-card__media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .35s ease}
.bcw-production-card:hover .bcw-production-card__media img{transform:scale(1.06)}
.bcw-production-card__placeholder{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#94a3b8;font-weight:700;gap:6px;font-size:30px}
.bcw-production-card__badge{position:absolute;bottom:10px;left:10px;background:rgba(15,23,42,.62);backdrop-filter:blur(6px);color:#fff;font-size:11px;font-weight:600;padding:3px 10px;border-radius:20px;letter-spacing:.4px;line-height:1.6}
.bcw-production-card__star{position:absolute;top:10px;right:10px;background:rgba(212,168,85,.92);color:#fff;font-size:12px;padding:2px 8px;border-radius:12px;line-height:1.6}
.bcw-production-card__body{padding:18px 20px 22px}
.bcw-production-card__body h3{margin:0 0 8px;font-size:18px;line-height:1.3;color:#111827;font-weight:700}
.bcw-production-card__body p{margin:0;color:#64748b;line-height:1.7;font-size:14px}
/* ── Pagination ── */
.bcw-production-pagination{display:flex;gap:8px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:36px}
.bcw-ppag-btn{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border-radius:10px;border:1.5px solid #e5e7eb;background:#fff;color:#374151;font-size:14px;font-weight:600;text-decoration:none;transition:all .18s ease;line-height:1}
.bcw-ppag-btn:hover{border-color:#d4a855;color:#d4a855;background:#fffbf0}
.bcw-ppag-btn--active{background:linear-gradient(135deg,#d4a855,#b8892e);border-color:#d4a855;color:#fff !important;box-shadow:0 4px 12px rgba(212,168,85,.35)}
.bcw-ppag-btn--nav{font-size:18px;min-width:40px}
.bcw-ppag-info{color:#94a3b8;font-size:13px;margin-left:4px}
@media (max-width: 1024px){.bcw-production-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width: 767px){.bcw-production-grid{grid-template-columns:1fr;} .bcw-production-card__body h3{font-size:16px;}}