/*!
 * Batik Belah Ketupat — Tanggamus heritage motif accents.
 * Scoped by body[data-opd-theme] so colors never leak across OPD installs.
 */
body.skin-magz[data-opd-theme] {
    --batik-a: var(--idds-primary, #900000);
    --batik-b: var(--idds-accent, #FCA416);
    --batik-ink: #1a1a1a;
}

/* Full-bleed shell */
body.skin-magz[data-opd-theme].layout-full-width,
body.skin-magz[data-opd-theme].w-full {
    width: 100%;
    min-height: 100vh;
}
body.skin-magz[data-opd-theme] main#main-content {
    width: 100%;
    min-height: 60vh;
}

/* Firstbar batik strip */
body.skin-magz[data-opd-theme] .firstbar__batik,
body.skin-magz[data-opd-theme] .batik-ketupat,
body.skin-magz[data-opd-theme] .arch-induk__batik-bg {
    pointer-events: none;
    background-image:
        linear-gradient(45deg, var(--batik-b) 25%, transparent 25%),
        linear-gradient(-45deg, var(--batik-b) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--batik-b) 75%),
        linear-gradient(-45deg, transparent 75%, var(--batik-b) 75%),
        linear-gradient(45deg, var(--batik-a) 12%, transparent 12%),
        linear-gradient(-45deg, var(--batik-a) 12%, transparent 12%);
    background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 40px 40px, 40px 40px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0, 0 0, 20px 20px;
    opacity: .12;
}

body.skin-magz[data-opd-theme] .firstbar__batik {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .1;
    mask-image: linear-gradient(180deg, #000 20%, transparent 100%);
}

body.skin-magz[data-opd-theme] .firstbar--full {
    position: relative;
    isolation: isolate;
}
body.skin-magz[data-opd-theme] .firstbar--full > .container-md {
    position: relative;
    z-index: 1;
    max-width: min(100%, 1920px) !important;
    width: 100% !important;
    padding-left: clamp(1rem, 3vw, 2.5rem);
    padding-right: clamp(1rem, 3vw, 2.5rem);
}

/* Larger logos */
body.skin-magz[data-opd-theme] .brand__dual .brand__mark--kab,
body.skin-magz[data-opd-theme] .brand__dual .brand__mark--kab .brand__logo {
    width: 96px !important;
    height: 96px !important;
    min-width: 96px !important;
}
body.skin-magz[data-opd-theme] .brand__dual .brand__mark--opd,
body.skin-magz[data-opd-theme] .brand__dual .brand__mark--opd .brand__logo {
    width: 78px !important;
    height: 78px !important;
    min-width: 78px !important;
}

/* Induk: richer batik under footer & section dividers */
body.skin-magz[data-opd-theme="tanggamus"] .footer::before,
body.skin-magz[data-opd-theme="default"] .footer::before,
body.skin-magz[data-opd-theme="tanggamus"] .batik-divider,
body.skin-magz[data-opd-theme="default"] .batik-divider {
    content: "";
    display: block;
    height: 8px;
    width: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            var(--batik-a) 0 8px,
            var(--batik-b) 8px 12px,
            var(--batik-ink) 12px 14px,
            var(--batik-b) 14px 18px,
            transparent 18px 22px
        );
}

body.skin-magz[data-opd-theme="tanggamus"] .arch-induk__batik-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    opacity: .08;
}

/* Dual-logo in archetype partials — align with header scale */
body.skin-magz[data-opd-theme] .arch-dual-logo img:first-child {
    width: 96px !important;
    height: 96px !important;
}
body.skin-magz[data-opd-theme] .arch-dual-logo img:last-of-type {
    width: 72px !important;
    height: 72px !important;
}

@media (max-width: 720px) {
    body.skin-magz[data-opd-theme] .brand__dual .brand__mark--kab,
    body.skin-magz[data-opd-theme] .brand__dual .brand__mark--kab .brand__logo {
        width: 72px !important;
        height: 72px !important;
        min-width: 72px !important;
    }
    body.skin-magz[data-opd-theme] .brand__dual .brand__mark--opd,
    body.skin-magz[data-opd-theme] .brand__dual .brand__mark--opd .brand__logo {
        width: 58px !important;
        height: 58px !important;
        min-width: 58px !important;
    }
}

/* ─── Per-OPD belah ketupat variants ─── */
body.skin-magz[data-opd-theme] .batik-ketupat,
body.skin-magz[data-opd-theme] .batik-ketupat-band,
body.skin-magz[data-opd-theme] .opd-sig__batik {
    filter: hue-rotate(var(--ketupat-hue, 0deg));
    transform: rotate(var(--ketupat-tilt, 0deg));
    transform-origin: center;
}
body.skin-magz[data-opd-theme] .batik-ketupat--sm { background-size: 14px 14px, 14px 14px, 14px 14px, 14px 14px, 28px 28px, 28px 28px; }
body.skin-magz[data-opd-theme] .batik-ketupat--md { background-size: 20px 20px, 20px 20px, 20px 20px, 20px 20px, 40px 40px, 40px 40px; }
body.skin-magz[data-opd-theme] .batik-ketupat--lg { background-size: 28px 28px, 28px 28px, 28px 28px, 28px 28px, 56px 56px, 56px 56px; }

body.skin-magz[data-opd-theme] .batik-ketupat--shield { opacity: .11; }
body.skin-magz[data-opd-theme] .batik-ketupat--twin { opacity: .13; background-position: 0 0, 0 12px, 12px -12px, -12px 0, 0 0, 24px 24px; }
body.skin-magz[data-opd-theme] .batik-ketupat--stack { opacity: .1; }
body.skin-magz[data-opd-theme] .batik-ketupat--ribbon { opacity: .12; mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
body.skin-magz[data-opd-theme] .batik-ketupat--fan { opacity: .12; }
body.skin-magz[data-opd-theme] .batik-ketupat--cross { opacity: .1; }
body.skin-magz[data-opd-theme] .batik-ketupat--pillar { opacity: .09; mask-image: linear-gradient(180deg, #000 0%, transparent 88%); }

body.skin-magz[data-opd-theme] .ketupat-wash--soft .batik-ketupat,
body.skin-magz[data-opd-theme] .opd-layout.ketupat-wash--soft .batik-ketupat { opacity: .08; }
body.skin-magz[data-opd-theme] .ketupat-wash--rich .batik-ketupat,
body.skin-magz[data-opd-theme] .opd-layout.ketupat-wash--rich .batik-ketupat { opacity: .14; }
body.skin-magz[data-opd-theme] .ketupat-wash--ink .batik-ketupat,
body.skin-magz[data-opd-theme] .opd-layout.ketupat-wash--ink .batik-ketupat {
    opacity: .1;
    --batik-a: color-mix(in srgb, var(--idds-primary, #900000) 85%, #111);
    --batik-b: color-mix(in srgb, var(--idds-accent, #FCA416) 70%, #333);
}

body.skin-magz[data-opd-theme] .batik-ketupat-band {
    display: block;
    width: 100%;
    height: 10px;
    pointer-events: none;
    transform: none;
    background-image:
        linear-gradient(45deg, var(--batik-b) 25%, transparent 25%),
        linear-gradient(-45deg, var(--batik-b) 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, var(--batik-b) 75%),
        linear-gradient(-45deg, transparent 75%, var(--batik-b) 75%),
        linear-gradient(45deg, var(--batik-a) 12%, transparent 12%),
        linear-gradient(-45deg, var(--batik-a) 12%, transparent 12%);
    background-size: 16px 16px, 16px 16px, 16px 16px, 16px 16px, 32px 32px, 32px 32px;
    opacity: .55;
}
body.skin-magz[data-opd-theme] .batik-ketupat-band--ribbon { height: 8px; }
body.skin-magz[data-opd-theme] .batik-ketupat-band--divider { height: 6px; margin: .25rem 0; }
body.skin-magz[data-opd-theme] .batik-divider--ketupat {
    height: 6px;
    width: 100%;
    background:
        repeating-linear-gradient(
            45deg,
            var(--batik-a) 0 8px,
            var(--batik-b) 8px 12px,
            var(--batik-ink) 12px 14px,
            var(--batik-b) 14px 18px,
            transparent 18px 22px
        );
    filter: hue-rotate(var(--ketupat-hue, 0deg));
}

body.skin-magz[data-opd-theme] .batik-ketupat-seal,
body.skin-magz[data-opd-theme] .opd-sig__seal {
    width: 42px;
    height: 42px;
    border-radius: 4px;
    transform: rotate(45deg);
    background:
        linear-gradient(135deg, var(--batik-b), var(--batik-a));
    box-shadow: 0 8px 18px color-mix(in srgb, var(--batik-a) 28%, transparent);
    opacity: .85;
    flex: 0 0 auto;
}
body.skin-magz[data-opd-theme] .batik-ketupat-seal::after,
body.skin-magz[data-opd-theme] .opd-sig__seal::after {
    content: "";
    display: block;
    width: 54%;
    height: 54%;
    margin: 23%;
    background: color-mix(in srgb, #fff 55%, transparent);
    border-radius: 2px;
}

/* ─── OPD signature modules ─── */
body.skin-magz[data-opd-theme] .opd-sig {
    position: relative;
    overflow: hidden;
    margin: clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 3vw, 2rem);
    padding: clamp(1.15rem, 2.5vw, 1.75rem);
    border-radius: 1rem;
    background: #fff;
    border: 1px solid color-mix(in srgb, var(--idds-primary, #900000) 16%, #e2e8f0);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .06);
}
body.skin-magz[data-opd-theme] .opd-sig__batik {
    position: absolute;
    inset: 0;
    opacity: .08;
    pointer-events: none;
}
body.skin-magz[data-opd-theme] .opd-sig__inner {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1rem;
}
body.skin-magz[data-opd-theme] .opd-sig__seal {
    position: absolute;
    top: 1.1rem;
    right: 1.25rem;
    z-index: 2;
}
body.skin-magz[data-opd-theme] .opd-sig__kicker {
    margin: 0;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--idds-primary, #900000);
}
body.skin-magz[data-opd-theme] .opd-sig__title {
    margin: .2rem 0 .35rem;
    font-size: clamp(1.2rem, 2.2vw, 1.55rem);
    color: #0f172a;
}
body.skin-magz[data-opd-theme] .opd-sig__text {
    margin: 0;
    color: #475569;
    line-height: 1.55;
    max-width: 40rem;
}
body.skin-magz[data-opd-theme] .opd-sig__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem .6rem;
}
body.skin-magz[data-opd-theme] .opd-sig__actions a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .5rem .9rem;
    border-radius: .5rem;
    background: color-mix(in srgb, var(--idds-primary, #900000) 92%, #000);
    color: #fff !important;
    font-weight: 700;
    font-size: .86rem;
    text-decoration: none !important;
}
body.skin-magz[data-opd-theme] .opd-sig__actions a:hover {
    filter: brightness(1.06);
}
body.skin-magz[data-opd-theme] .opd-sig__profile {
    margin: .15rem 0 0;
    position: relative;
    z-index: 6;
}
body.skin-magz[data-opd-theme] .opd-sig__profile a {
    font-weight: 800;
    color: var(--idds-primary, #900000) !important;
    text-decoration: none !important;
    pointer-events: auto !important;
}
body.skin-magz[data-opd-theme] .opd-sig__actions--accent,
body.skin-magz[data-opd-theme] .opd-sig__actions a.opd-sig__actions--accent {
    background: var(--idds-accent, #FCA416);
    color: #111 !important;
}
body.skin-magz[data-opd-theme] .opd-sig__status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .65rem 1rem;
    padding: .75rem 1rem;
    border-radius: .65rem;
    background: color-mix(in srgb, var(--idds-primary, #900000) 8%, #fff);
    border: 1px solid color-mix(in srgb, var(--idds-primary, #900000) 18%, #e2e8f0);
}
body.skin-magz[data-opd-theme] .opd-sig__pulse {
    width: .7rem;
    height: .7rem;
    border-radius: 999px;
    background: #dc2626;
    box-shadow: 0 0 0 0 rgba(220, 38, 38, .45);
    animation: opd-sig-pulse 1.6s ease-out infinite;
}
@keyframes opd-sig-pulse {
    70% { box-shadow: 0 0 0 10px rgba(220, 38, 38, 0); }
    100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0); }
}
body.skin-magz[data-opd-theme] .opd-sig--status-strip,
body.skin-magz[data-opd-theme] .opd-sig--security-brief {
    border-left: 5px solid var(--idds-primary, #900000);
}
body.skin-magz[data-opd-theme] .opd-sig--gallery-story,
body.skin-magz[data-opd-theme] .opd-sig--nature-trail {
    background: linear-gradient(135deg, #fff 0%, color-mix(in srgb, var(--idds-secondary, #FCA416) 12%, #fff) 100%);
}
body.skin-magz[data-opd-theme] .opd-sig--care-hotline .opd-sig__status--care a {
    font-weight: 800;
    color: var(--idds-primary, #900000);
    text-decoration: none;
}
body.skin-magz[data-opd-theme] .opd-sig--doc-rail,
body.skin-magz[data-opd-theme] .opd-sig--formal-ledger {
    border-color: color-mix(in srgb, #0f172a 12%, #e2e8f0);
}

@media (max-width: 640px) {
    body.skin-magz[data-opd-theme] .opd-sig__seal { display: none; }
}