/* =========================================================
   SEO + PERFORMANCE + ANDROID-LIKE UI POLISH
   PT Metal Multi Energi
   Non-destructive: enhances all public pages without changing structure.
========================================================= */
:root{
    --mme-navy:#061747;
    --mme-blue:#063b8e;
    --mme-blue2:#0b66d8;
    --mme-gold:#ffb703;
    --mme-soft:#f5f8fd;
    --mme-card:#ffffff;
    --mme-radius:24px;
    --mme-shadow:0 18px 50px rgba(6,23,71,.12);
    --mme-shadow2:0 10px 28px rgba(6,59,142,.18);
}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent;}
body{background:linear-gradient(180deg,#ffffff 0%,#f6f9ff 100%);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;}
a,button,.btn,[class*="btn"],.article-card,.product-card,.service-card,.gallery-card,.card{touch-action:manipulation;}
.header,.article-card,.latest-mini,.article-sidebar-card,.related-box,.footer-wrap,.site-footer,[class*="card"],[class*="box"]{
    transform:translateZ(0);
}
.header nav>a,.header nav .drop>a,.header nav .btn,.article-btn,.article-viewall,.wa-floating,.btn,[class*="btn"]{
    min-height:42px;
    position:relative;
    overflow:hidden;
}
.header nav>a::after,.header nav .drop>a::after,.article-btn::after,.article-viewall::after,.btn::after,[class*="btn"]::after{
    content:"";
    position:absolute;
    width:18px;height:18px;
    left:50%;top:50%;
    background:rgba(255,255,255,.42);
    border-radius:999px;
    transform:translate(-50%,-50%) scale(0);
    opacity:0;
    pointer-events:none;
}
.header nav>a:active::after,.header nav .drop>a:active::after,.article-btn:active::after,.article-viewall:active::after,.btn:active::after,[class*="btn"]:active::after{
    animation:mme-ripple .48s ease-out;
}
@keyframes mme-ripple{0%{opacity:.65;transform:translate(-50%,-50%) scale(0)}100%{opacity:0;transform:translate(-50%,-50%) scale(18)}}

img{height:auto;max-width:100%;}
img:not(.no-animate){transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s ease,opacity .35s ease;}
.article-card:hover img,.latest-mini:hover img,.gallery-card:hover img,.product-card:hover img,.service-card:hover img,[class*="card"]:hover img{
    transform:scale(1.035);
    filter:saturate(1.06) contrast(1.04);
}

.mme-reveal{opacity:0;transform:translateY(22px);transition:opacity .72s ease,transform .72s cubic-bezier(.2,.8,.2,1);}
.mme-reveal.mme-visible{opacity:1;transform:none;}
.mme-float-image{animation:mme-float 6.8s ease-in-out infinite;will-change:transform;}
@keyframes mme-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-8px,0)}}

.mme-seo-strip{
    width:min(1180px,calc(100% - 32px));
    margin:38px auto 18px;
    display:grid;
    grid-template-columns:1.2fr .8fr;
    gap:18px;
    align-items:stretch;
}
.mme-seo-panel{
    border:1px solid rgba(6,59,142,.10);
    background:rgba(255,255,255,.84);
    backdrop-filter:blur(14px);
    border-radius:24px;
    box-shadow:var(--mme-shadow);
    padding:24px;
}
.mme-seo-panel h2,.mme-seo-panel h3{margin:0 0 12px;color:#061747;line-height:1.18;}
.mme-seo-panel p{margin:0;color:#52637c;line-height:1.75;}
.mme-seo-tags{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;}
.mme-seo-tags span{
    font-size:12px;font-weight:800;color:#063b8e;background:rgba(6,59,142,.08);
    border:1px solid rgba(6,59,142,.10);border-radius:999px;padding:8px 11px;
}
.mme-android-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.mme-android-chip{
    background:linear-gradient(135deg,#ffffff,#eef5ff);
    border:1px solid rgba(6,59,142,.10);
    border-radius:20px;
    padding:16px;
    box-shadow:0 10px 28px rgba(6,23,71,.08);
}
.mme-android-chip i{color:#063b8e;font-size:20px;margin-bottom:9px;}
.mme-android-chip b{display:block;color:#061747;font-size:14px;line-height:1.35;}
.mme-android-chip small{display:block;color:#5a6a82;margin-top:5px;line-height:1.45;}

.mme-keyword-cloud{
    width:min(1180px,calc(100% - 32px));
    margin:18px auto 42px;
    padding:22px;
    border-radius:24px;
    background:linear-gradient(135deg,rgba(6,23,71,.96),rgba(6,59,142,.94));
    color:#fff;
    box-shadow:0 22px 60px rgba(6,23,71,.22);
}
.mme-keyword-cloud strong{display:block;font-size:18px;margin-bottom:12px;}
.mme-keyword-cloud p{margin:0;color:rgba(255,255,255,.82);line-height:1.7;}
.mme-keyword-list{margin-top:14px;display:flex;gap:8px;flex-wrap:wrap;}
.mme-keyword-list span{border:1px solid rgba(255,255,255,.20);border-radius:999px;padding:7px 10px;background:rgba(255,255,255,.08);font-size:12px;}

@media (max-width:820px){
    body{font-size:15px;}
    .header{border-radius:22px;box-shadow:0 14px 35px rgba(6,23,71,.15);}
    .mme-seo-strip{grid-template-columns:1fr;width:min(100% - 22px,1180px);margin-top:24px;}
    .mme-android-grid{grid-template-columns:1fr;}
    .mme-keyword-cloud{width:min(100% - 22px,1180px);}
    .article-grid{grid-template-columns:1fr!important;}
}

@media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important;}
    .mme-reveal{opacity:1;transform:none;}
}


/* =========================================================
   GLOBAL LIVE ANDROID / MATERIAL UI POLISH ALL PUBLIC PAGES
========================================================= */
:root{--mme-live-blue:#0077ff;--mme-live-cyan:#45c8ff;--mme-live-navy:#061747;--mme-card-radius:24px}
.mme-global-live{width:min(1240px,calc(100% - 36px));margin:18px auto 0;position:relative;z-index:5;border-radius:28px;overflow:hidden;background:linear-gradient(135deg,#061747,#063b8e 55%,#0077ff);box-shadow:0 24px 70px rgba(3,20,58,.22);border:1px solid rgba(255,255,255,.18)}
.mme-global-live-track{display:flex;width:300%;animation:mmeSlideX 18s infinite ease-in-out}.mme-global-live-slide{width:33.333%;min-height:118px;display:grid;grid-template-columns:1fr auto;gap:18px;align-items:center;padding:24px 28px;color:#fff;position:relative}.mme-global-live-slide:before{content:"";position:absolute;right:-70px;top:-90px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(69,200,255,.42),transparent 62%);filter:blur(4px)}.mme-global-live-slide b{font-size:clamp(20px,3vw,31px);line-height:1.08;display:block;letter-spacing:-.3px}.mme-global-live-slide span{display:block;margin-top:8px;color:rgba(255,255,255,.86);font-size:14px;line-height:1.55}.mme-global-live-slide a{position:relative;z-index:2;display:inline-flex;align-items:center;gap:8px;background:#fff;color:#063b8e;text-decoration:none;padding:12px 16px;border-radius:999px;font-weight:900;white-space:nowrap;box-shadow:0 14px 28px rgba(0,0,0,.14)}
@keyframes mmeSlideX{0%,27%{transform:translateX(0)}33%,60%{transform:translateX(-33.333%)}66%,94%{transform:translateX(-66.666%)}100%{transform:translateX(0)}}
body{background-image:radial-gradient(circle at 10% 12%,rgba(0,119,255,.055),transparent 25%),radial-gradient(circle at 92% 8%,rgba(69,200,255,.06),transparent 24%),linear-gradient(180deg,#fff,#f7fbff 70%,#fff)}
.header,.article-card,.article-main,.article-sidebar-card,.related-box,.site-footer,.mme-seo-panel,.idx-card,.idx-product,.idx-service,.product-card,.service-card,.gallery-card,.contact-card,.division-card{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.article-card:hover,.idx-card:hover,.idx-product:hover,.idx-service:hover,.product-card:hover,.service-card:hover,.gallery-card:hover,.contact-card:hover,.division-card:hover{transform:translateY(-6px);box-shadow:0 28px 65px rgba(3,35,80,.16)!important;border-color:rgba(0,119,255,.22)!important}
a,.btn,button,.article-btn,.article-viewall,.header nav a{position:relative;overflow:hidden}.mme-ripple{position:absolute;border-radius:50%;background:rgba(69,200,255,.32);transform:scale(0);animation:mmeRipple .55s linear;pointer-events:none}@keyframes mmeRipple{to{transform:scale(5);opacity:0}}
.mme-float-image{animation:mmeImageBreath 7s ease-in-out infinite alternate;transform-origin:center}@keyframes mmeImageBreath{from{filter:saturate(1.04);transform:translateY(0) scale(1)}to{filter:saturate(1.13);transform:translateY(-4px) scale(1.012)}}
.mme-reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}.mme-reveal.mme-visible{opacity:1;transform:none}.mme-seo-strip{position:relative;overflow:hidden}.mme-seo-strip:before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(69,200,255,.08),transparent);animation:mmeShine 7s infinite;pointer-events:none}@keyframes mmeShine{0%{transform:translateX(-100%)}100%{transform:translateX(100%)}}
@media(max-width:780px){.mme-global-live{width:calc(100% - 24px);border-radius:22px}.mme-global-live-slide{grid-template-columns:1fr;min-height:180px;padding:24px}.mme-global-live-slide a{width:max-content}}
@media(prefers-reduced-motion:reduce){.mme-global-live-track,.mme-float-image,.article-hero-live:before,.article-hero-live:after,.mme-seo-strip:before{animation:none!important}.mme-reveal{opacity:1;transform:none}}


/* =========================================================
   MOBILE STABILITY PATCH - prevent temporary white screen
   Keeps current design but disables heavy entrance hiding on phones.
========================================================= */
html, body { min-height: 100%; }
body { opacity: 1 !important; visibility: visible !important; }
.mme-page-ready .mme-reveal { opacity: 1; transform: none; }
@media (max-width: 820px) {
    .mme-reveal,
    section.mme-reveal,
    .hero.mme-reveal,
    .hero-home.mme-reveal,
    .article-hero-live.mme-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .mme-global-live {
        margin-top: 14px;
        overflow: hidden;
        isolation: isolate;
    }
    .mme-global-live-track {
        width: 100% !important;
        display: block !important;
        transform: none !important;
        animation: none !important;
    }
    .mme-global-live-slide {
        display: none !important;
        width: 100% !important;
        min-height: auto !important;
        padding: 18px 18px 20px !important;
        grid-template-columns: 1fr !important;
    }
    .mme-global-live-slide:first-child {
        display: grid !important;
    }
    .mme-global-live-slide b {
        font-size: 20px !important;
        line-height: 1.18 !important;
    }
    .mme-global-live-slide span {
        font-size: 13px !important;
    }
    .mme-global-live-slide a {
        margin-top: 6px;
        width: fit-content;
        max-width: 100%;
        white-space: normal;
    }
    .mme-float-image {
        animation: none !important;
        transform: none !important;
    }
}