/* ================= LOCK SCROLL ================= */
/* Lebih aman tanpa height:100% */
html.mc-lock,
body.mc-lock {
    overflow: hidden !important;
}

/* ================= PORTAL ================= */
.mc-portal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: rgba(0,0,0,.95);

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    transition: opacity .18s ease;

    /* GPU Stabilizer */
    transform: translateZ(0);
}

/* ACTIVE */
.mc-portal.active {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/* ================= PDF ================= */
#mc-pdf iframe {
    width: 100%;
    height: 100%;
    border: 0;

    /* Hindari render glitch */
    display: block;
    transform: translateZ(0);
}

/* ================= VIDEO ================= */
#mc-video video {
    max-width: 92vw;
    max-height: 92vh;
    display: block;

    transform: translateZ(0);
}

/* ================= CLOSE BUTTON ================= */
.mc-close {
    padding: 12px;
    position: fixed;
    top: 8px;
    right: 8px;
    color: #fff;
    font-size: 12px;
    cursor: pointer;
    z-index: 1000000;
    user-select: none;
}

/* ================= SCOPE LINK RESET ================= */
.mc-scope a {
    text-decoration: none;
}

/* ================= ACTIVE CATEGORY ================= */
.mc-category.active {
    background: #111;
    color: #fff !important;
}

/* ================= SPINNER ================= */
.mc-spinner {
    width: 42px;
    height: 42px;
    border: 4px solid #e5e7eb;
    border-top: 4px solid #111;
    border-radius: 50%;
    animation: mc-spin 0.8s linear infinite;
}

/* Portal base */
#mc-video {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

/* Wrapper agar video tetap center */
.mc-video-wrapper {
    width: 90%;
    max-width: 1100px;
    z-index: 20;
}

#mc-video video {
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Navigation buttons */
.mc-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    width: 64px;
    height: 64px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: rgba(0,0,0,0.6);
    color: #fff;

    font-size: 42px;
    line-height: 1; /* PENTING */
    
    border-radius: 50%;
    border: none;
    cursor: pointer;

    padding: 0; /* pastikan tidak ada padding */
}

.mc-nav-btn span {
    display: block;
    transform: translateY(-5px); /* fine tune */
}

.mc-nav-btn:hover {
    background: rgba(0,0,0,0.85);
}

/* Position */
.mc-prev {
    left: 30px;
}

.mc-next {
    right: 30px;
}

@keyframes mc-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}


/* === HEROICON BUTTON FIX === */
.mc-btn,
button.mc-btn,
a.mc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 8px;
    white-space: nowrap !important;
    font-size: clamp(12px, 1.2vw, 16px);
}

.mc-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.mc-btn-black {
    background: #000 !important;
    color: #fff !important;
}

.mc-btn-white {
    background: #fff !important;
    color: #000 !important;
}


/* === FULL CLEAN HEROICON BUTTON SYSTEM === */
.mc-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center;
    gap: 8px !important;
    white-space: nowrap !important;
    font-size: clamp(12px, 1.2vw, 16px) !important;
    text-decoration: none !important;
}

.mc-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.mc-btn-black {
    background: #000 !important;
    color: #fff !important;
}

.mc-btn-white {
    background: #fff !important;
    color: #000 !important;
}


/* ===============================
   ANTI THEME OVERRIDE SYSTEM
   =============================== */

#mc-isolated-scope,
#mc-isolated-scope * {
    box-sizing: border-box;
}

#mc-isolated-scope a {
    text-decoration: none !important;
}

#mc-isolated-scope .mc-btn {
    all: unset;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    white-space: nowrap !important;
    font-family: inherit !important;
    font-size: clamp(12px, 1.2vw, 16px) !important;
    padding: 12px 20px !important;
    border-radius: 10px !important;
    cursor: pointer !important;
}

#mc-isolated-scope .mc-btn-black {
    background: #000 !important;
    color: #fff !important;
}

#mc-isolated-scope .mc-btn-white {
    background: #fff !important;
    color: #000 !important;
    border: 1px solid #ddd !important;
}

#mc-isolated-scope .mc-btn::before,
#mc-isolated-scope .mc-btn::after {
    content: none !important;
    display: none !important;
}

#mc-isolated-scope .mc-btn i,
#mc-isolated-scope .mc-btn .icon,
#mc-isolated-scope .mc-btn [class*="icon"] {
    display: none !important;
}

#mc-isolated-scope .mc-btn svg {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    display: inline-block !important;
    fill: currentColor !important;
}

#mc-isolated-scope .mc-btn svg path {
    fill: currentColor !important;
}