/* Smith Digital V8: banner ilustrasi responsif, posisi independen desktop / mobile.
 * Variabel berasal dari angka yang divalidasi di server, bukan input CSS mentah.
 */
body .hero-image {
    display:block;
    width:min(var(--hero-desktop-width,380px),47%);
    max-width:47%;
    height:auto;
    object-fit:contain;
    right:var(--hero-desktop-right,14px);
    bottom:var(--hero-desktop-bottom,12px);
    top:auto;
    left:auto;
    pointer-events:none;
    user-select:none;
}
body .hero-copy {z-index:2}
body .hero-caption {z-index:2}
@media(max-width:780px) {
    body .hero-image {
        width:min(var(--hero-mobile-width,190px),58%);
        max-width:58%;
        right:var(--hero-mobile-right,10px);
        bottom:var(--hero-mobile-bottom,8px);
        height:auto;
        opacity:1;
    }
}
@media(max-width:480px) {
    body .hero {min-height:352px}
    body .hero-image {max-width:56%}
    body .hero-caption {
        left:25px;
        right:auto;
        bottom:12px;
        max-width:53%;
        text-align:left;
        line-height:1.5;
    }
}
/* Admin preview: menggunakan ilustrasi dan offset dari website, bukan placeholder. */
.v8-banner-preview-controls{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:20px 0 12px}
.v8-banner-preview-controls strong{margin-right:auto}
.v8-banner-preview-controls button[aria-pressed="true"]{background:var(--accent);color:#fff;border-color:var(--accent)}
.v8-banner-preview {
    width:100%;max-width:610px;height:270px;overflow:hidden;position:relative;
    background:var(--accent,#2159ed);color:#fff;border-radius:15px;
    transition:max-width .18s ease,height .18s ease;
}
.v8-banner-preview img{
    position:absolute;display:block;width:min(var(--hero-desktop-width,380px),48%);max-width:48%;height:auto;
    right:var(--hero-desktop-right,14px);bottom:var(--hero-desktop-bottom,12px);
    pointer-events:none;
}
.v8-banner-preview-copy{
    position:relative;z-index:1;display:flex;flex-direction:column;gap:12px;
    padding:25px;width:58%;font-size:12px;
}
.v8-banner-preview-copy strong{font-size:clamp(17px,2.5vw,27px);line-height:1.2;white-space:pre-line}
.v8-banner-preview-copy span:not(.v8-banner-preview-cta){opacity:.9}
.v8-banner-preview-cta{background:#fff;color:#1646c2;border-radius:7px;width:fit-content;padding:9px;font-weight:700}
.v8-banner-preview[data-device="mobile"]{max-width:335px;height:355px}
.v8-banner-preview[data-device="mobile"] img{
    width:min(var(--hero-mobile-width,190px),56%);max-width:56%;
    right:var(--hero-mobile-right,10px);bottom:var(--hero-mobile-bottom,8px);
}
.v8-banner-preview[data-device="mobile"] .v8-banner-preview-copy{padding:23px;width:82%}
.v8-banner-preview[data-device="mobile"] .v8-banner-preview-copy strong{font-size:22px}
.v8-banner-preview[data-device="mobile"] .v8-banner-preview-copy span:not(.v8-banner-preview-cta){max-width:195px}
@media(max-width:400px){.v8-banner-preview-copy{padding:18px}.v8-banner-preview[data-device="mobile"]{max-width:100%}}