:root{
    --zio-blue:#172bd8;
    --zio-blue-dark:#070e71;
    --zio-navy:#101b33;
    --zio-text:#17233d;
    --zio-muted:#63708a;
    --zio-soft:#f3f6fb;
    --zio-soft-2:#eaf0f8;
    --zio-border:#dfe7f3;
    --zio-white:#ffffff;
    --zio-radius:22px;
    --zio-shadow:0 20px 50px rgba(16,24,40,.08);
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

html,
body{
    margin:0;
    padding:0;
    width:100%;
    overflow-x:hidden;
    font-family:'Montserrat', Arial, sans-serif;
    color:var(--zio-text);
    background:#fff;
    font-size:13px;
    line-height:1.6;
}

body{
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
}

a{
    color:inherit;
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

p{
    color:var(--zio-muted);
    margin:0 0 16px;
}

h1,
h2,
h3,
h4,
h5,
h6{
    margin:0;
    color:var(--zio-navy);
    font-weight:800;
    letter-spacing:-.035em;
}

h1{
    font-size:38px;
    line-height:1.12;
}

h2{
    font-size:30px;
    line-height:1.18;
}

h3{
    font-size:19px;
    line-height:1.25;
}

.zio-container,
.site-container{
    width:min(1180px, calc(100% - 42px));
    margin:0 auto;
}

#google_translate_element,
.goog-te-banner-frame,
.goog-te-gadget,
.goog-tooltip,
iframe.skiptranslate{
    display:none!important;
    visibility:hidden!important;
}

body{
    top:0!important;
}

/* TOP BAR */
.zio-topbar{
    background:var(--zio-blue-dark);
    color:#fff;
    position:sticky;
    top:0;
    z-index:10050;
    transition:transform .28s ease, opacity .28s ease;
}

.zio-topbar-inner{
    height:34px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
}

.zio-topbar-contact{
    display:flex;
    align-items:center;
    gap:10px;
    font-size:11px;
    font-weight:400;
    letter-spacing:0;
}

.zio-topbar-contact span{
    font-weight:400;
}

.zio-topbar-social{
    display:flex;
    align-items:center;
    gap:8px;
}

.zio-topbar-social a{
    width:25px;
    height:25px;
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    color:#fff;
    font-size:11px;
    transition:.2s ease;
}

.zio-topbar-social a:hover{
    background:#fff;
    color:var(--zio-blue-dark);
}

body.zio-topbar-hidden .zio-topbar{
    transform:translateY(-100%);
    opacity:0;
    pointer-events:none;
}

/* HEADER */
.zio-header{
    position:sticky;
    top:34px;
    z-index:10040;
    background:#fff;
    border-bottom:1px solid #edf1f8;
    transition:top .28s ease, box-shadow .28s ease;
}

body.zio-topbar-hidden .zio-header{
    top:0;
    box-shadow:0 12px 30px rgba(16,24,40,.08);
}

.zio-header-inner{
    min-height:86px;
    display:grid;
    grid-template-columns:180px minmax(260px, 360px) 1fr auto;
    align-items:center;
    gap:22px;
    position:relative;
}

.zio-brand{
    display:flex;
    align-items:center;
    justify-content:flex-start;
}

.zio-brand img{
    width:142px;
    height:auto;
}

.zio-header-search{
    height:42px;
    display:flex;
    align-items:center;
    border:1px solid var(--zio-border);
    border-radius:999px;
    overflow:hidden;
    background:#fff;
}

.zio-header-search input{
    flex:1;
    min-width:0;
    height:100%;
    border:0;
    outline:0;
    padding:0 16px;
    font-size:12px;
    color:var(--zio-text);
}

.zio-header-search button{
    width:74px;
    height:100%;
    border:0;
    border-left:1px solid var(--zio-border);
    background:#fff;
    color:var(--zio-navy);
    font-size:12px;
    font-weight:800;
    cursor:pointer;
}

.zio-nav{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:20px;
    white-space:nowrap;
}

.zio-nav > a,
.zio-nav-dropdown > button{
    border:0;
    background:transparent;
    padding:0;
    color:var(--zio-navy);
    font-size:12px;
    line-height:1;
    font-weight:800;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:5px;
}

.zio-nav > a:hover,
.zio-nav-dropdown > button:hover{
    color:var(--zio-blue);
}

.zio-nav-dropdown{
    position:relative;
}

.zio-dropdown-menu{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    transform:translateX(-50%) translateY(8px);
    min-width:245px;
    background:#fff;
    border:1px solid var(--zio-border);
    border-radius:18px;
    padding:10px;
    box-shadow:var(--zio-shadow);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:.2s ease;
    z-index:10060;
}

.zio-dropdown-menu.wide{
    min-width:280px;
}

.zio-nav-dropdown:hover .zio-dropdown-menu{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateX(-50%) translateY(0);
}

.zio-dropdown-menu a{
    display:block;
    padding:10px 12px;
    border-radius:12px;
    color:var(--zio-text);
    font-size:12px;
    font-weight:700;
}

.zio-dropdown-menu a:hover{
    background:#eef3ff;
    color:var(--zio-blue);
}

.zio-header-actions{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;
}

.zio-lang-switch{
    height:42px;
    padding:4px;
    border:1px solid var(--zio-border);
    border-radius:999px;
    display:flex;
    align-items:center;
    gap:4px;
    background:#fff;
    box-shadow:0 10px 25px rgba(16,24,40,.06);
}

.zio-lang-switch button{
    height:32px;
    min-width:38px;
    border:0;
    border-radius:999px;
    background:transparent;
    color:var(--zio-navy);
    font-size:11px;
    font-weight:900;
    cursor:pointer;
}

.zio-lang-switch button.active{
    background:var(--zio-blue);
    color:#fff;
}

.zio-lang-switch span{
    width:1px;
    height:20px;
    background:var(--zio-border);
}

.zio-mobile-toggle{
    display:none;
    width:42px;
    height:42px;
    border:1px solid var(--zio-border);
    border-radius:14px;
    background:#fff;
    color:var(--zio-navy);
    font-size:22px;
    cursor:pointer;
}

.zio-mobile-panel,
.zio-mobile-overlay{
    display:none;
}

/* HERO SLIDER */
.home-hero-down-wrapper{
    background:#fff;
}

.zio-hero-slider{
    position:relative;
    height:520px;
    overflow:hidden;
    background:#030846;
}

.zio-hero-track,
.zio-hero-slide{
    position:absolute;
    inset:0;
}

.zio-hero-slide{
    opacity:0;
    pointer-events:none;
    transition:opacity .6s ease;
}

.zio-hero-slide.active{
    opacity:1;
    pointer-events:auto;
}

.zio-hero-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center;
    transform:scale(1.02);
}

.zio-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(4,8,57,.98) 0%, rgba(6,13,82,.88) 36%, rgba(8,16,88,.68) 70%, rgba(6,12,70,.6) 100%);
}

.zio-hero-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    max-width:780px;
}

.zio-hero-content span{
    display:inline-flex;
    padding:8px 17px;
    border:1px solid rgba(255,255,255,.25);
    border-radius:999px;
    color:#fff;
    background:rgba(255,255,255,.10);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:20px;
}

.zio-hero-content h1{
    color:#fff;
    max-width:720px;
    font-size:42px;
    line-height:1.1;
    margin-bottom:18px;
}

.zio-hero-content p{
    color:#fff;
    max-width:720px;
    font-size:14px;
    line-height:1.7;
    margin-bottom:26px;
}

.zio-hero-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.zio-hero-btn{
    min-height:46px;
    padding:0 26px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
    font-weight:900;
}

.zio-hero-btn.primary{
    background:#fff;
    color:var(--zio-blue-dark);
}

.zio-hero-btn.secondary{
    border:1px solid rgba(255,255,255,.35);
    color:#fff;
}

.zio-hero-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:3;
    width:52px;
    height:52px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:var(--zio-blue);
    display:grid;
    place-items:center;
    cursor:pointer;
    box-shadow:0 14px 30px rgba(0,0,0,.14);
}

.zio-hero-arrow svg{
    width:24px;
    height:24px;
}

.zio-hero-prev{
    left:28px;
}

.zio-hero-next{
    right:28px;
}

.zio-hero-dots{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    z-index:3;
    display:flex;
    gap:9px;
}

.zio-hero-dots button{
    width:10px;
    height:10px;
    border:0;
    border-radius:999px;
    background:rgba(255,255,255,.45);
    cursor:pointer;
}

.zio-hero-dots button.active{
    width:34px;
    background:#fff;
}

/* HOME */
.home-zio-about-section,
.home-admin-products-section,
.home-admin-solution-section,
.home-admin-customer-section,
.home-admin-article-section{
    padding:72px 0;
}

.home-zio-about-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:58px;
}

.home-zio-about-media{
    overflow:hidden;
    border-radius:26px;
    box-shadow:var(--zio-shadow);
    background:#fff;
}

.home-zio-about-media img{
    width:100%;
    height:420px;
    object-fit:cover;
}

.home-zio-about-content span,
.home-admin-section-head span,
.product-section-label,
.company-final-content > span,
.content-section-head span,
.company-latest-articles-head span{
    display:block;
    color:var(--zio-blue);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:10px;
}

.home-zio-about-content h2{
    margin-bottom:18px;
}

.home-zio-about-btn{
    margin-top:8px;
    min-height:42px;
    padding:0 22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    border:1px solid var(--zio-border);
    color:var(--zio-blue);
    font-weight:900;
    font-size:12px;
}

.home-admin-products-section,
.home-admin-customer-section,
.home-admin-article-section,
.company-latest-articles-section,
.zio-page-tail-section{
    background:var(--zio-soft);
}

.home-admin-solution-section{
    background:#fff;
}

.home-admin-section-head,
.company-latest-articles-head{
    text-align:center;
    max-width:760px;
    margin:0 auto 42px;
}

.home-admin-section-head p,
.company-latest-articles-head p{
    margin-top:12px;
}

.home-admin-product-grid,
.home-admin-article-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:26px;
}

.home-admin-product-card,
.home-admin-article-card,
.news-card,
.portfolio-card,
.corrosion-product-card,
.fabric-product-card,
.related-product-card,
.download-card,
.career-card{
    background:#fff;
    border:1px solid var(--zio-border);
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--zio-shadow);
    transition:.22s ease;
}

.home-admin-product-card:hover,
.home-admin-article-card:hover,
.news-card:hover,
.portfolio-card:hover,
.corrosion-product-card:hover,
.fabric-product-card:hover{
    transform:translateY(-4px);
}

.home-admin-product-card img,
.home-admin-article-card img,
.news-image img,
.portfolio-card-image img,
.corrosion-product-image img,
.fabric-product-image img{
    width:100%;
    height:250px;
    object-fit:cover;
}

.home-admin-product-card div,
.home-admin-article-card div,
.news-body,
.portfolio-card-body,
.corrosion-product-body,
.fabric-product-body{
    padding:22px;
}

.home-admin-product-card span{
    display:block;
    color:var(--zio-blue);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:8px;
}

.home-admin-product-card h3,
.home-admin-article-card h3{
    margin-bottom:12px;
}

.home-admin-solution-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:22px;
}

.home-admin-solution-card,
.home-admin-customer-card,
.company-vision-card,
.company-value-row,
.company-contact-boxes > div,
.company-business-grid > div,
.company-core-grid > div,
.company-standard-grid > div,
.company-feature-grid > div{
    background:#fff;
    border:1px solid var(--zio-border);
    border-radius:22px;
    padding:26px;
    box-shadow:0 14px 36px rgba(16,24,40,.05);
}

.home-admin-solution-card i{
    width:48px;
    height:48px;
    display:grid;
    place-items:center;
    border-radius:14px;
    background:var(--zio-blue);
    color:#fff;
    font-size:22px;
    margin-bottom:18px;
}

.home-admin-customer-grid{
    display:grid;
    grid-template-columns:repeat(6, minmax(0,1fr));
    gap:18px;
}

.home-admin-customer-card{
    min-height:112px;
    display:grid;
    place-items:center;
    text-align:center;
    font-weight:900;
}

.home-admin-customer-card img{
    max-width:120px;
    max-height:58px;
    object-fit:contain;
}

.home-admin-cta-section{
    background:linear-gradient(135deg, #111b9f, #2638ea);
    padding:58px 0;
}

.home-admin-cta-box{
    display:grid;
    grid-template-columns:1fr auto;
    align-items:center;
    gap:24px;
}

.home-admin-cta-box span,
.home-admin-cta-box h2,
.home-admin-cta-box p{
    color:#fff;
}

.home-admin-cta-box p{
    max-width:760px;
}

.home-admin-cta-box a{
    min-height:50px;
    padding:0 26px;
    display:inline-flex;
    align-items:center;
    gap:10px;
    justify-content:center;
    background:#fff;
    color:var(--zio-blue);
    border-radius:999px;
    font-weight:900;
    font-size:12px;
}

/* GENERAL PAGE HERO */
.content-hero,
.product-detail-hero,
.fabric-hero,
.form-hero,
.portfolio-hero,
.portfolio-detail-hero,
.faq-hero,
.download-hero,
.career-hero,
.career-detail-hero,
.search-hero,
.article-hero,
.inner-hero{
    position:relative;
    min-height:320px;
    overflow:hidden;
    background:#060b55 url('/images/hero-cover.png') center/cover no-repeat;
}

.content-hero-overlay,
.product-detail-overlay,
.form-hero-overlay,
.portfolio-hero-overlay,
.portfolio-detail-overlay,
.faq-hero-overlay,
.download-hero-overlay,
.career-hero-overlay,
.article-hero-overlay,
.inner-hero-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg, rgba(4,8,57,.95), rgba(13,27,118,.72));
}

.content-hero-content,
.product-detail-hero-content,
.form-hero-content,
.portfolio-hero-content,
.portfolio-detail-hero-content,
.faq-hero-content,
.download-hero-content,
.career-hero-content,
.article-hero-content,
.inner-hero-content{
    position:relative;
    z-index:1;
    min-height:320px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.content-hero h1,
.product-detail-hero h1,
.form-hero h1,
.portfolio-hero h1,
.faq-hero h1,
.download-hero h1,
.career-hero h1,
.article-hero h1,
.inner-hero h1{
    color:#fff;
}

.content-hero p,
.product-detail-hero p,
.form-hero p,
.portfolio-hero p,
.faq-hero p,
.download-hero p,
.career-hero p,
.article-hero p,
.inner-hero p{
    color:#fff;
    max-width:720px;
}

/* COMPANY */
.company-final-page,
.product-intro-section,
.corrosion-catalog-section,
.fabric-catalog-section,
.portfolio-section,
.news-section,
.faq-section,
.download-section,
.quotation-section,
.traceability-section,
.search-result-section,
.career-section,
.csr-section,
.article-section,
.product-detail-page-content{
    padding:64px 0;
}

.company-final-grid{
    display:grid;
    grid-template-columns:280px 1fr;
    gap:32px;
    align-items:start;
}

.company-final-sidebar{
    position:sticky;
    top:130px;
    background:#fff;
    border:1px solid var(--zio-border);
    border-radius:24px;
    padding:22px;
    box-shadow:var(--zio-shadow);
}

.company-final-sidebar h2{
    font-size:24px;
    margin-bottom:18px;
}

.company-final-sidebar a{
    display:block;
    padding:11px 14px;
    border-radius:13px;
    color:#526079;
    font-weight:800;
    margin-bottom:4px;
}

.company-final-sidebar a.active,
.company-final-sidebar a:hover{
    background:#eef3ff;
    color:var(--zio-blue);
}

.company-final-content{
    background:#fff;
    border:1px solid var(--zio-border);
    border-radius:24px;
    padding:34px;
    box-shadow:var(--zio-shadow);
}

.company-final-summary{
    padding:20px;
    border-radius:18px;
    background:var(--zio-soft);
    border:1px solid var(--zio-border);
    color:var(--zio-navy);
    font-weight:800;
    margin:22px 0;
}

.company-final-image{
    margin:24px 0;
    border-radius:22px;
    overflow:hidden;
}

.company-final-image img{
    width:100%;
    max-height:440px;
    object-fit:cover;
}

.company-vision-grid,
.company-business-grid,
.company-core-grid,
.company-standard-grid,
.company-feature-grid,
.company-contact-boxes,
.zio-form-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0,1fr));
    gap:18px;
    margin-top:24px;
}

.company-contact-boxes{
    grid-template-columns:repeat(3, minmax(0,1fr));
}

.zio-contact-form-wrap{
    margin-top:28px;
    background:#fff;
    border:1px solid var(--zio-border);
    border-radius:22px;
    padding:24px;
}

.form-group{
    display:flex;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
}

.form-group label{
    font-weight:800;
    color:var(--zio-navy);
}

.form-group input,
.form-group textarea,
.form-group select,
.zio-contact-form input,
.zio-contact-form textarea{
    width:100%;
    border:1px solid var(--zio-border);
    border-radius:14px;
    padding:12px 14px;
    outline:0;
    font-size:13px;
    background:#fff;
}

.quotation-submit-btn,
.career-submit-btn,
.zio-contact-form button{
    border:0;
    border-radius:999px;
    padding:13px 24px;
    background:var(--zio-blue);
    color:#fff;
    font-weight:900;
    cursor:pointer;
}

/* GRIDS */
.corrosion-product-grid,
.fabric-product-grid,
.portfolio-grid,
.news-grid,
.download-grid,
.career-grid,
.related-product-grid,
.company-latest-articles-grid{
    display:grid;
    grid-template-columns:repeat(3, minmax(0,1fr));
    gap:22px;
}

.product-intro-grid,
.quotation-grid,
.traceability-wrap,
.article-layout,
.portfolio-detail-grid,
.product-detail-page-grid,
.career-detail-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:32px;
    align-items:start;
}

.product-detail-page-image,
.article-hero-image,
.portfolio-gallery-main{
    border-radius:24px;
    overflow:hidden;
    box-shadow:var(--zio-shadow);
}

.product-detail-page-image img,
.article-hero-image img,
.portfolio-gallery-main img{
    width:100%;
    object-fit:cover;
}

.detail-table,
.trace-detail-table{
    width:100%;
    border-collapse:collapse;
    background:#fff;
    border-radius:16px;
    overflow:hidden;
    border:1px solid var(--zio-border);
}

.detail-table th,
.detail-table td,
.trace-detail-table th,
.trace-detail-table td{
    padding:12px;
    border-bottom:1px solid var(--zio-border);
    text-align:left;
}

/* PAGE TAIL */
.zio-page-tail-section{
    padding:54px 0;
}

.zio-page-tail-box{
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:22px;
    align-items:center;
    background:#fff;
    border:1px solid var(--zio-border);
    border-radius:24px;
    padding:28px;
    box-shadow:var(--zio-shadow);
}

.zio-page-tail-icon{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:18px;
    background:var(--zio-blue);
    color:#fff;
    font-size:25px;
}

.zio-page-tail-content span{
    display:block;
    color:var(--zio-blue);
    font-size:11px;
    font-weight:900;
    text-transform:uppercase;
    margin-bottom:6px;
}

.zio-page-tail-actions{
    display:flex;
    gap:10px;
    flex-wrap:wrap;
}

.zio-page-tail-actions a{
    min-height:42px;
    padding:0 18px;
    border-radius:999px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    font-size:12px;
}

.zio-page-tail-actions .primary{
    background:var(--zio-blue);
    color:#fff;
}

.zio-page-tail-actions .secondary{
    border:1px solid var(--zio-border);
    color:var(--zio-blue);
}

/* FOOTER */
.zio-footer{
    background:#f3f4f6;
    border-top:1px solid #e7edf5;
}

.zio-footer-grid{
    padding:58px 0;
    display:grid;
    grid-template-columns:1.35fr .8fr .8fr .8fr 1.1fr;
    gap:32px;
    align-items:start;
}

.zio-footer-company img{
    width:155px;
    margin-bottom:18px;
}

.zio-footer h4{
    font-size:15px;
    margin-bottom:14px;
}

.zio-footer-column a{
    display:block;
    color:var(--zio-text);
    margin:0 0 9px;
    font-size:12.5px;
}

.zio-footer-social{
    display:flex;
    gap:10px;
    margin-bottom:20px;
}

.zio-footer-social a{
    width:40px;
    height:40px;
    display:grid;
    place-items:center;
    border-radius:999px;
    color:#fff;
    background:var(--zio-blue);
    box-shadow:0 12px 28px rgba(16,24,40,.12);
}

.zio-footer-social a:nth-child(1){background:#e83e70;}
.zio-footer-social a:nth-child(4){background:#f00;}

.zio-footer-newsletter strong{
    display:block;
    margin-bottom:4px;
}

.zio-newsletter-form{
    height:40px;
    display:flex;
    border:1px solid var(--zio-border);
    border-radius:999px;
    overflow:hidden;
    background:#fff;
}

.zio-newsletter-form input{
    flex:1;
    min-width:0;
    border:0;
    outline:0;
    padding:0 14px;
    font-size:12px;
}

.zio-newsletter-form button{
    border:0;
    background:var(--zio-blue);
    color:#fff;
    padding:0 18px;
    font-weight:900;
    cursor:pointer;
}

.zio-footer-bottom{
    background:#000;
    color:#fff;
    text-align:center;
    font-size:12px;
    font-weight:700;
    padding:14px 16px;
}

/* WA */
.zio-wa-button{
    position:fixed;
    right:30px;
    bottom:30px;
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    border-radius:999px;
    background:#25d366;
    color:#fff;
    font-size:28px;
    z-index:10030;
    box-shadow:0 18px 34px rgba(37,211,102,.32);
}

/* ALERTS */
.form-alert-success,
.success{
    background:#ecfdf3;
    border:1px solid #b7efc5;
    color:#067647;
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:18px;
}

.error,
.trace-error{
    background:#fff2f2;
    border:1px solid #ffd2d2;
    color:#b42318;
    padding:14px 16px;
    border-radius:14px;
    margin-bottom:18px;
}

/* RESPONSIVE TABLET */
@media(max-width:1100px){
    .zio-header-inner{
        grid-template-columns:170px minmax(220px, 310px) 1fr auto;
        gap:16px;
    }

    .zio-nav{
        gap:14px;
    }

    .zio-nav > a,
    .zio-nav-dropdown > button{
        font-size:11px;
    }

    .home-admin-customer-grid{
        grid-template-columns:repeat(3, minmax(0,1fr));
    }

    .corrosion-product-grid,
    .fabric-product-grid,
    .portfolio-grid,
    .news-grid,
    .download-grid,
    .career-grid,
    .related-product-grid,
    .company-latest-articles-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
    }
}

/* MOBILE */
@media(max-width:768px){
    html,
    body{
        font-size:12px;
    }

    h1{
        font-size:24px;
    }

    h2{
        font-size:21px;
    }

    h3{
        font-size:16px;
    }

    .zio-container,
    .site-container{
        width:calc(100% - 32px);
    }

    .zio-topbar-inner{
        height:42px;
        justify-content:space-between;
    }

    .zio-topbar-contact{
        gap:6px;
        font-size:10px;
        line-height:1.25;
        flex-wrap:wrap;
    }

    .zio-topbar-social a{
        width:25px;
        height:25px;
        font-size:10px;
    }

    .zio-header{
        top:42px;
    }

    .zio-header-inner{
        min-height:auto;
        padding:14px 0;
        grid-template-columns:1fr auto auto;
        grid-template-areas:
            "brand lang menu";
        gap:10px;
    }

    .zio-brand{
        grid-area:brand;
        padding-left:12px;
    }

    .zio-brand img{
        width:132px;
    }

    .zio-header-search,
    .zio-nav{
        display:none;
    }

    .zio-header-actions{
        display:flex;
        gap:8px;
    }

    .zio-lang-switch{
        grid-area:lang;
        height:38px;
        padding:4px;
    }

    .zio-lang-switch button{
        min-width:34px;
        height:30px;
        font-size:10.5px;
    }

    .zio-mobile-toggle{
        grid-area:menu;
        display:grid;
        place-items:center;
        width:40px;
        height:40px;
    }

    .zio-mobile-overlay{
        position:fixed;
        inset:0;
        background:rgba(8,15,40,.52);
        backdrop-filter:blur(4px);
        z-index:10020;
        opacity:0;
        visibility:hidden;
        transition:.22s ease;
        display:block;
    }

    body.zio-menu-open .zio-mobile-overlay{
        opacity:1;
        visibility:visible;
    }

    .zio-mobile-panel{
        position:absolute;
        top:calc(100% + 10px);
        left:0;
        right:0;
        width:100%;
        max-height:calc(100vh - 170px);
        overflow-y:auto;
        display:none;
        background:#fff;
        border:1px solid var(--zio-border);
        border-radius:20px;
        padding:12px;
        box-shadow:0 26px 70px rgba(16,24,40,.24);
        z-index:10070;
    }

    body.zio-menu-open .zio-mobile-panel{
        display:block;
    }

    .zio-mobile-search{
        display:flex;
        height:42px;
        border:1px solid var(--zio-border);
        border-radius:999px;
        overflow:hidden;
        margin-bottom:10px;
    }

    .zio-mobile-search input{
        flex:1;
        min-width:0;
        border:0;
        outline:0;
        padding:0 14px;
        font-size:11.5px;
    }

    .zio-mobile-search button{
        width:70px;
        border:0;
        border-left:1px solid var(--zio-border);
        background:#fff;
        font-weight:900;
        font-size:11.5px;
    }

    .zio-mobile-panel > a,
    .zio-mobile-group > button{
        width:100%;
        min-height:39px;
        padding:9px 12px;
        display:flex;
        align-items:center;
        justify-content:space-between;
        border:0;
        background:transparent;
        border-radius:13px;
        color:var(--zio-navy);
        font-size:12px;
        font-weight:850;
        text-align:left;
    }

    .zio-mobile-panel > a:hover,
    .zio-mobile-group > button:hover,
    .zio-mobile-panel a.is-pressed{
        background:#eef3ff;
        color:var(--zio-blue);
    }

    .zio-mobile-group.is-open > button i{
        transform:rotate(180deg);
    }

    .zio-mobile-submenu{
        display:none;
        padding:3px 0 8px 12px;
        margin-left:8px;
        border-left:2px solid #edf1fb;
    }

    .zio-mobile-group.is-open .zio-mobile-submenu{
        display:block;
    }

    .zio-mobile-submenu a{
        display:block;
        padding:8px 10px;
        border-radius:10px;
        color:#526079;
        font-size:11.3px;
        font-weight:750;
    }

    .zio-hero-slider{
        height:560px;
    }

    .zio-hero-content{
        justify-content:center;
        padding:42px 0;
        max-width:100%;
    }

    .zio-hero-content span{
        font-size:9.5px;
        padding:7px 12px;
        margin-bottom:16px;
    }

    .zio-hero-content h1{
        font-size:26px;
        line-height:1.14;
        max-width:88%;
        margin-bottom:14px;
    }

    .zio-hero-content p{
        font-size:12px;
        line-height:1.55;
        max-width:92%;
        margin-bottom:20px;
    }

    .zio-hero-btn{
        min-height:40px;
        padding:0 17px;
        font-size:11px;
    }

    .zio-hero-arrow{
        width:44px;
        height:44px;
    }

    .zio-hero-prev{
        left:14px;
    }

    .zio-hero-next{
        right:14px;
    }

    .zio-hero-dots{
        bottom:20px;
    }

    .home-zio-about-section,
    .home-admin-products-section,
    .home-admin-solution-section,
    .home-admin-customer-section,
    .home-admin-article-section{
        padding:52px 0;
    }

    .home-zio-about-grid,
    .home-admin-product-grid,
    .home-admin-article-grid,
    .home-admin-solution-grid,
    .product-intro-grid,
    .quotation-grid,
    .traceability-wrap,
    .article-layout,
    .portfolio-detail-grid,
    .product-detail-page-grid,
    .career-detail-grid,
    .company-final-grid,
    .company-vision-grid,
    .company-business-grid,
    .company-core-grid,
    .company-standard-grid,
    .company-feature-grid,
    .company-contact-boxes,
    .zio-form-grid{
        grid-template-columns:1fr;
    }

    .home-zio-about-media img{
        height:300px;
    }

    .home-admin-section-head{
        margin-bottom:28px;
    }

    .home-admin-product-card img,
    .home-admin-article-card img,
    .news-image img,
    .portfolio-card-image img,
    .corrosion-product-image img,
    .fabric-product-image img{
        height:210px;
    }

    .home-admin-customer-grid{
        grid-template-columns:repeat(2, minmax(0,1fr));
        gap:12px;
    }

    .home-admin-customer-card{
        min-height:92px;
        padding:18px;
    }

    .home-admin-cta-box{
        grid-template-columns:1fr;
        text-align:left;
    }

    .home-admin-cta-section{
        padding:44px 0;
    }

    .company-final-sidebar{
        position:relative;
        top:auto;
    }

    .company-final-content{
        padding:22px;
    }

    .corrosion-product-grid,
    .fabric-product-grid,
    .portfolio-grid,
    .news-grid,
    .download-grid,
    .career-grid,
    .related-product-grid,
    .company-latest-articles-grid{
        grid-template-columns:1fr;
    }

    .zio-page-tail-box{
        grid-template-columns:1fr;
        padding:22px;
    }

    .zio-page-tail-actions{
        width:100%;
    }

    .zio-page-tail-actions a{
        flex:1;
    }

    .zio-footer-grid{
        grid-template-columns:1fr;
        gap:24px;
        padding:42px 0;
    }

    .zio-footer-company img{
        width:145px;
    }

    .zio-wa-button{
        right:20px;
        bottom:20px;
        width:54px;
        height:54px;
        font-size:26px;
    }
}

@media(max-width:420px){
    .zio-container,
    .site-container{
        width:calc(100% - 26px);
    }

    .zio-brand{
        padding-left:10px;
    }

    .zio-brand img{
        width:126px;
    }

    .zio-hero-content h1{
        font-size:24px;
    }

    .zio-hero-actions{
        gap:10px;
    }

    .zio-hero-btn{
        min-height:38px;
        padding:0 14px;
    }
}
/* =========================================================
   FINAL PUBLISH FIX - HEADER FIXED, BUKAN STICKY
   ========================================================= */

.zio-topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    z-index:99990 !important;
    height:34px !important;
    transform:translateY(0) !important;
    opacity:1 !important;
}

.zio-header{
    position:fixed !important;
    top:34px !important;
    left:0 !important;
    right:0 !important;
    z-index:99980 !important;
    background:#ffffff !important;
    box-shadow:0 10px 28px rgba(16,24,40,.08) !important;
}

body.zio-topbar-hidden .zio-topbar{
    transform:translateY(-100%) !important;
    opacity:0 !important;
    pointer-events:none !important;
}

body.zio-topbar-hidden .zio-header{
    top:0 !important;
}

.zio-main{
    padding-top:120px !important;
}

.zio-brand{
    padding-left:18px !important;
}

.zio-brand img{
    width:140px !important;
}

.zio-topbar-contact,
.zio-topbar-contact span{
    font-weight:400 !important;
}

.home-admin-cta-box h2,
.home-admin-cta-box p,
.home-admin-cta-box span{
    color:#ffffff !important;
}

/* Desktop lebih rapi */
@media(min-width:769px){
    .zio-header-inner{
        min-height:86px !important;
    }

    .zio-header-search{
        margin-left:6px !important;
    }
}

/* Mobile fixed header */
@media(max-width:768px){
    .zio-topbar{
        height:42px !important;
    }

    .zio-header{
        top:42px !important;
    }

    body.zio-topbar-hidden .zio-header{
        top:0 !important;
    }

    .zio-main{
        padding-top:142px !important;
    }

    body.zio-topbar-hidden .zio-main{
        padding-top:100px !important;
    }

    .zio-brand{
        padding-left:14px !important;
    }

    .zio-brand img{
        width:132px !important;
    }

    .zio-mobile-panel{
        top:calc(100% + 10px) !important;
        z-index:100000 !important;
    }

    .zio-mobile-overlay{
        z-index:99950 !important;
    }
}

@media(max-width:420px){
    .zio-brand{
        padding-left:16px !important;
    }

    .zio-brand img{
        width:128px !important;
    }
}


/* =========================================================
   GOOGLE TRANSLATE CLEAN MODE
   ========================================================= */

#google_translate_element{
    position:absolute !important;
    left:-99999px !important;
    top:-99999px !important;
    width:1px !important;
    height:1px !important;
    overflow:hidden !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
.goog-te-gadget,
.goog-te-balloon-frame,
iframe.goog-te-banner-frame{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
}

body{
    top:0 !important;
}

body > .skiptranslate{
    display:none !important;
}

.zio-lang,
.zio-lang *,
[data-zio-lang],
[data-zio-lang]{
    translate:no !important;
}


/* =========================================================
   ZIOFLEX MARKET MAP SECTION
   ========================================================= */

.home-market-map-section{
    background:#f3f6fb;
    padding:104px 0 112px;
    position:relative;
    overflow:hidden;
}

.home-market-map-head{
    text-align:center;
    max-width:820px;
    margin:0 auto 42px;
}

.home-market-map-head span{
    display:block;
    color:var(--zio-blue);
    font-size:10.5px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:.04em;
    margin-bottom:10px;
}

.home-market-map-head h2{
    font-size:32px;
    line-height:1.18;
    margin-bottom:12px;
}

.home-market-map-head p{
    font-size:13px;
    line-height:1.75;
    max-width:760px;
    margin:0 auto;
}

.home-market-map-card{
    display:grid;
    grid-template-columns:minmax(0, 1fr) 300px;
    align-items:center;
    gap:30px;
    background:#ffffff;
    border:1px solid var(--zio-border);
    border-radius:30px;
    padding:34px;
    box-shadow:0 24px 65px rgba(16,24,40,.08);
}

.home-market-map-visual{
    position:relative;
    width:100%;
    min-height:390px;
    border-radius:24px;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border:1px solid #e8eef8;
    overflow:hidden;
}

.home-market-map-visual img{
    width:100%;
    height:100%;
    min-height:390px;
    object-fit:contain;
    padding:28px;
}

.home-market-map-pins{
    position:absolute;
    inset:0;
    z-index:2;
}

.market-pin{
    position:absolute;
    transform:translate(-50%, -50%);
    display:flex;
    align-items:center;
    gap:7px;
    z-index:3;
    white-space:nowrap;
}

.market-pin span{
    width:12px;
    height:12px;
    border-radius:999px;
    display:block;
    background:#e31b23;
    box-shadow:0 0 0 6px rgba(227,27,35,.12), 0 8px 18px rgba(227,27,35,.28);
    position:relative;
}

.market-pin span::after{
    content:"";
    position:absolute;
    inset:-7px;
    border-radius:999px;
    border:1px solid rgba(227,27,35,.35);
    animation:marketPulse 1.8s infinite;
}

.market-pin strong{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 10px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid #ffd1d4;
    color:#cf111b;
    font-size:11px;
    line-height:1;
    font-weight:800;
    box-shadow:0 10px 22px rgba(16,24,40,.09);
}

.market-pin-blue span{
    background:#172bd8;
    box-shadow:0 0 0 6px rgba(23,43,216,.12), 0 8px 18px rgba(23,43,216,.28);
}

.market-pin-blue span::after{
    border-color:rgba(23,43,216,.35);
}

.market-pin-blue strong{
    color:#172bd8;
    border-color:#cdd5ff;
}

.market-pin-orange span{
    background:#f97316;
    box-shadow:0 0 0 6px rgba(249,115,22,.14), 0 8px 18px rgba(249,115,22,.28);
}

.market-pin-orange span::after{
    border-color:rgba(249,115,22,.35);
}

.market-pin-orange strong{
    color:#ea580c;
    border-color:#fed7aa;
}

.market-pin-green span{
    background:#16a34a;
    box-shadow:0 0 0 6px rgba(22,163,74,.14), 0 8px 18px rgba(22,163,74,.28);
}

.market-pin-green span::after{
    border-color:rgba(22,163,74,.35);
}

.market-pin-green strong{
    color:#15803d;
    border-color:#bbf7d0;
}

@keyframes marketPulse{
    0%{
        opacity:.8;
        transform:scale(.7);
    }
    100%{
        opacity:0;
        transform:scale(1.65);
    }
}

.home-market-map-list{
    background:#f8fbff;
    border:1px solid #e8eef8;
    border-radius:24px;
    padding:26px;
}

.home-market-map-list h3{
    font-size:21px;
    margin-bottom:8px;
}

.home-market-map-list p{
    font-size:12.5px;
    line-height:1.65;
    margin-bottom:18px;
}

.home-market-map-tags{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
}

.home-market-map-tags span{
    display:inline-flex;
    align-items:center;
    min-height:32px;
    padding:0 12px;
    border-radius:999px;
    background:#ffffff;
    border:1px solid var(--zio-border);
    color:var(--zio-navy);
    font-size:11.5px;
    font-weight:800;
}

@media(max-width:992px){
    .home-market-map-card{
        grid-template-columns:1fr;
    }

    .home-market-map-list{
        order:2;
    }
}

@media(max-width:768px){
    .home-market-map-section{
        padding:72px 0 78px;
    }

    .home-market-map-head{
        margin-bottom:30px;
    }

    .home-market-map-head h2{
        font-size:25px;
    }

    .home-market-map-card{
        padding:18px;
        border-radius:24px;
    }

    .home-market-map-visual{
        min-height:330px;
    }

    .home-market-map-visual img{
        min-height:330px;
        padding:16px;
    }

    .market-pin strong{
        font-size:10px;
        min-height:23px;
        padding:0 8px;
    }

    .market-pin span{
        width:10px;
        height:10px;
    }

    .home-market-map-list{
        padding:20px;
    }
}

/* =========================================================
   ZIOFLEX REAL INDONESIA MAP FIX
   ========================================================= */

.home-market-map-section{
    background:#f3f6fb !important;
    padding:96px 0 108px !important;
}

.home-market-map-card{
    grid-template-columns:minmax(0, 1fr) 300px !important;
    gap:28px !important;
    padding:34px !important;
    border-radius:30px !important;
}

.home-market-map-visual{
    min-height:440px !important;
    background:#ffffff !important;
    border-radius:24px !important;
    overflow:hidden !important;
}

.home-market-map-visual img{
    width:100% !important;
    height:100% !important;
    min-height:440px !important;
    object-fit:contain !important;
    padding:22px !important;
}

.market-pin{
    width:15px !important;
    height:15px !important;
    display:block !important;
    transform:translate(-50%, -50%) !important;
    z-index:8 !important;
}

.market-pin > span{
    width:14px !important;
    height:14px !important;
    display:block !important;
    border:3px solid #ffffff !important;
    border-radius:999px !important;
    background:#e31b23 !important;
    box-shadow:0 0 0 6px rgba(227,27,35,.12), 0 10px 24px rgba(227,27,35,.32) !important;
}

.market-pin > span::after{
    content:"" !important;
    position:absolute !important;
    inset:-7px !important;
    border-radius:999px !important;
    border:1px solid rgba(227,27,35,.38) !important;
    animation:marketPulse 1.8s infinite !important;
}

.market-pin > strong{
    position:absolute !important;
    left:50% !important;
    bottom:24px !important;
    transform:translateX(-50%) translateY(7px) !important;
    min-height:26px !important;
    padding:0 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:#ffffff !important;
    border:1px solid #ffd1d4 !important;
    color:#cf111b !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    box-shadow:0 14px 28px rgba(16,24,40,.14) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.market-pin:hover > strong{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(-50%) translateY(0) !important;
}

.home-market-map-list{
    background:#f8fbff !important;
    border:1px solid #e7edf6 !important;
    border-radius:24px !important;
    padding:26px !important;
}

.home-market-map-tags{
    gap:9px !important;
}

.home-market-map-tags span{
    background:#ffffff !important;
    border:1px solid var(--zio-border) !important;
    color:var(--zio-navy) !important;
}

@media(max-width:992px){
    .home-market-map-card{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:768px){
    .home-market-map-section{
        padding:72px 0 78px !important;
    }

    .home-market-map-card{
        padding:18px !important;
    }

    .home-market-map-visual,
    .home-market-map-visual img{
        min-height:340px !important;
    }

    .home-market-map-visual img{
        padding:12px !important;
    }

    .market-pin{
        width:12px !important;
        height:12px !important;
    }

    .market-pin > span{
        width:12px !important;
        height:12px !important;
    }
}

/* =========================================================
   ZIOFLEX FINAL REAL INDONESIA MAP PATCH
   ========================================================= */

.home-market-map-section{
    background:#f3f6fb !important;
    padding-top:122px !important;
    padding-bottom:110px !important;
    scroll-margin-top:135px !important;
}

.home-market-map-head{
    margin-bottom:42px !important;
}

.home-market-map-head h2{
    margin-top:0 !important;
}

.home-market-map-card{
    max-width:1180px !important;
    margin:0 auto !important;
    display:grid !important;
    grid-template-columns:minmax(0,1fr) 300px !important;
    gap:28px !important;
    padding:34px !important;
}

.home-market-map-visual{
    min-height:430px !important;
    background:#ffffff !important;
    border-radius:24px !important;
    overflow:hidden !important;
}

.home-market-map-visual img{
    width:100% !important;
    height:100% !important;
    min-height:430px !important;
    object-fit:contain !important;
    padding:20px !important;
}

.market-pin{
    width:15px !important;
    height:15px !important;
    display:block !important;
    transform:translate(-50%, -50%) !important;
    z-index:8 !important;
}

.market-pin > span{
    width:14px !important;
    height:14px !important;
    display:block !important;
    border:3px solid #ffffff !important;
    border-radius:999px !important;
    background:#e31b23 !important;
    box-shadow:0 0 0 6px rgba(227,27,35,.12), 0 10px 24px rgba(227,27,35,.32) !important;
}

.market-pin > strong{
    position:absolute !important;
    left:50% !important;
    bottom:24px !important;
    transform:translateX(-50%) translateY(7px) !important;
    min-height:26px !important;
    padding:0 10px !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:#ffffff !important;
    border:1px solid #ffd1d4 !important;
    color:#cf111b !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
    box-shadow:0 14px 28px rgba(16,24,40,.14) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.market-pin:hover > strong{
    opacity:1 !important;
    visibility:visible !important;
    transform:translateX(-50%) translateY(0) !important;
}

@media(max-width:992px){
    .home-market-map-card{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:768px){
    .home-market-map-section{
        padding-top:82px !important;
        padding-bottom:78px !important;
    }

    .home-market-map-card{
        padding:18px !important;
    }

    .home-market-map-visual,
    .home-market-map-visual img{
        min-height:330px !important;
    }

    .home-market-map-visual img{
        padding:12px !important;
    }
}


/* =========================================================
   ZIOFLEX MARKET MAP SECTION - BACKGROUND DIFFERENT
   ========================================================= */

.home-market-map-section{
    position:relative !important;
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
    padding:100px 0 110px !important;
    border-top:1px solid #e7edf6 !important;
    border-bottom:1px solid #e7edf6 !important;
    overflow:hidden !important;
}

.home-market-map-section::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:
        radial-gradient(circle at 12% 18%, rgba(23,43,216,.05), transparent 26%),
        radial-gradient(circle at 88% 82%, rgba(7,14,113,.04), transparent 28%) !important;
    pointer-events:none !important;
}

.home-market-map-section > .zio-container,
.home-market-map-section > .site-container{
    position:relative !important;
    z-index:2 !important;
}

.home-market-map-head{
    margin-bottom:34px !important;
}

.home-market-map-card{
    background:#ffffff !important;
    border:1px solid #e7edf6 !important;
    box-shadow:0 18px 44px rgba(16,24,40,.06) !important;
}

.home-market-map-list{
    background:#f7faff !important;
}

.home-admin-customer-section{
    background:#f3f6fb !important;
}

.home-admin-article-section{
    background:#f3f6fb !important;
}

@media(max-width:768px){
    .home-market-map-section{
        padding:72px 0 82px !important;
    }
}

/* =========================================================
   FINAL FIX - DROPDOWN MENU HEADER MUDAH DIKLIK
   ========================================================= */

.zio-header,
.zio-header-inner,
.zio-nav,
.zio-nav-dropdown{
    overflow:visible !important;
}

.zio-header{
    z-index:999999 !important;
}

.zio-nav{
    position:relative !important;
    z-index:1000000 !important;
}

.zio-nav-dropdown{
    position:relative !important;
    padding-top:22px !important;
    padding-bottom:22px !important;
    margin-top:-22px !important;
    margin-bottom:-22px !important;
}

.zio-nav-dropdown::after{
    content:"" !important;
    position:absolute !important;
    left:-28px !important;
    right:-28px !important;
    top:100% !important;
    height:40px !important;
    background:transparent !important;
    z-index:999998 !important;
}

.zio-dropdown-menu{
    display:block !important;
    position:absolute !important;
    top:calc(100% + 2px) !important;
    left:50% !important;
    transform:translateX(-50%) translateY(8px) !important;
    z-index:1000001 !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.zio-dropdown-menu::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:-38px !important;
    height:38px !important;
    background:transparent !important;
}

.zio-nav-dropdown:hover > .zio-dropdown-menu,
.zio-nav-dropdown:focus-within > .zio-dropdown-menu,
.zio-dropdown-menu:hover{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
}

.zio-dropdown-menu a{
    position:relative !important;
    z-index:1000002 !important;
    pointer-events:auto !important;
}

@media(max-width:768px){
    .zio-nav-dropdown{
        padding-top:0 !important;
        padding-bottom:0 !important;
        margin-top:0 !important;
        margin-bottom:0 !important;
    }

    .zio-dropdown-menu{
        position:static !important;
        transform:none !important;
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }
}

/* =========================================================
   TRACEABILITY PAGE - MODERN FINAL UI
   ========================================================= */

.traceability-section{
    position:relative !important;
    padding:86px 0 96px !important;
    background:
        radial-gradient(circle at 8% 5%, rgba(23,43,216,.08), transparent 27%),
        radial-gradient(circle at 88% 86%, rgba(7,14,113,.06), transparent 30%),
        linear-gradient(180deg, #ffffff 0%, #f5f8ff 100%) !important;
    overflow:hidden !important;
}

.traceability-section::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background-image:
        linear-gradient(rgba(23,43,216,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,43,216,.035) 1px, transparent 1px) !important;
    background-size:42px 42px !important;
    pointer-events:none !important;
}

.traceability-section > .site-container,
.traceability-section > .zio-container{
    position:relative !important;
    z-index:2 !important;
}

.traceability-layout{
    display:grid !important;
    grid-template-columns:minmax(360px, 430px) minmax(0, 1fr) !important;
    gap:30px !important;
    align-items:start !important;
}

.traceability-search-card,
.trace-result-card{
    position:relative !important;
    background:rgba(255,255,255,.92) !important;
    border:1px solid rgba(223,231,243,.95) !important;
    border-radius:30px !important;
    padding:32px !important;
    box-shadow:0 26px 70px rgba(16,24,40,.09) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
}

.traceability-search-card::after{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:28px !important;
    right:28px !important;
    height:4px !important;
    border-radius:0 0 999px 999px !important;
    background:linear-gradient(90deg, var(--zio-blue), #63a4ff) !important;
}

.traceability-search-card .product-section-label{
    display:inline-flex !important;
    align-items:center !important;
    min-height:30px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    background:#edf3ff !important;
    color:var(--zio-blue) !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    letter-spacing:.04em !important;
    margin-bottom:16px !important;
}

.traceability-search-card h2{
    font-size:31px !important;
    line-height:1.12 !important;
    letter-spacing:-.045em !important;
    margin:0 0 12px !important;
    color:var(--zio-navy) !important;
}

.traceability-lead{
    font-size:13.5px !important;
    line-height:1.78 !important;
    color:var(--zio-muted) !important;
    margin:0 0 18px !important;
}

.traceability-lead strong{
    color:var(--zio-navy) !important;
}

.traceability-code-note{
    display:flex !important;
    gap:12px !important;
    align-items:flex-start !important;
    padding:16px 17px !important;
    border-radius:20px !important;
    background:linear-gradient(180deg, #f7faff 0%, #ffffff 100%) !important;
    border:1px solid #dce7ff !important;
    color:var(--zio-text) !important;
    font-size:12.8px !important;
    line-height:1.7 !important;
    margin-bottom:20px !important;
}

.traceability-code-note::before{
    content:"i" !important;
    flex:0 0 auto !important;
    width:24px !important;
    height:24px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:999px !important;
    background:var(--zio-blue) !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:900 !important;
    margin-top:1px !important;
}

.traceability-code-note strong{
    color:var(--zio-blue-dark) !important;
}

.traceability-form{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:8px !important;
    border:1px solid #dfe7f3 !important;
    border-radius:999px !important;
    background:#fff !important;
    box-shadow:0 14px 32px rgba(16,24,40,.05) !important;
    margin:0 0 16px !important;
}

.traceability-form input{
    flex:1 !important;
    min-width:0 !important;
    height:44px !important;
    border:0 !important;
    outline:0 !important;
    border-radius:999px !important;
    padding:0 14px !important;
    background:transparent !important;
    color:var(--zio-navy) !important;
    font-size:13px !important;
    font-weight:600 !important;
    box-shadow:none !important;
}

.traceability-form input::placeholder{
    color:#8a96ad !important;
    font-weight:500 !important;
}

.traceability-form button{
    flex:0 0 auto !important;
    height:44px !important;
    border:0 !important;
    border-radius:999px !important;
    padding:0 22px !important;
    background:linear-gradient(135deg, var(--zio-blue), #3454ff) !important;
    color:#fff !important;
    font-size:12.5px !important;
    font-weight:900 !important;
    cursor:pointer !important;
    white-space:nowrap !important;
    box-shadow:0 13px 25px rgba(23,43,216,.20) !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
}

.traceability-form button:hover{
    transform:translateY(-1px) !important;
    box-shadow:0 16px 30px rgba(23,43,216,.25) !important;
}

.trace-error{
    padding:12px 14px !important;
    border-radius:16px !important;
    background:#fff1f1 !important;
    border:1px solid #ffd2d2 !important;
    color:#b42318 !important;
    font-size:12.5px !important;
    font-weight:800 !important;
    margin:10px 0 0 !important;
}

.traceability-helper-box{
    margin-top:24px !important;
    padding-top:24px !important;
    border-top:1px dashed #d7e0ee !important;
}

.traceability-helper-box h3{
    font-size:18px !important;
    line-height:1.25 !important;
    margin:0 0 15px !important;
    color:var(--zio-navy) !important;
}

.traceability-helper-grid{
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:12px !important;
}

.traceability-helper-item{
    min-height:116px !important;
    padding:16px !important;
    border:1px solid #e7edf6 !important;
    border-radius:20px !important;
    background:#fbfdff !important;
}

.traceability-helper-item strong{
    display:block !important;
    color:var(--zio-navy) !important;
    font-size:12.8px !important;
    line-height:1.35 !important;
    margin-bottom:6px !important;
}

.traceability-helper-item span{
    display:block !important;
    color:var(--zio-muted) !important;
    font-size:11.8px !important;
    line-height:1.65 !important;
}

.traceability-result-stack{
    display:grid !important;
    gap:22px !important;
}

.trace-result-card{
    overflow:hidden !important;
}

.trace-result-card::before{
    content:"" !important;
    position:absolute !important;
    width:180px !important;
    height:180px !important;
    right:-80px !important;
    top:-90px !important;
    border-radius:999px !important;
    background:rgba(23,43,216,.055) !important;
    pointer-events:none !important;
}

.trace-result-header{
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
    flex-wrap:wrap !important;
    margin:0 0 15px !important;
    position:relative !important;
    z-index:2 !important;
}

.trace-result-header span,
.trace-result-header strong{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:30px !important;
    padding:0 12px !important;
    border-radius:999px !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    line-height:1 !important;
    letter-spacing:.04em !important;
}

.trace-result-header span{
    background:#edf3ff !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
}

.trace-result-header strong{
    background:#eafbf1 !important;
    color:#11823a !important;
}

.trace-result-card h3{
    position:relative !important;
    z-index:2 !important;
    font-size:23px !important;
    line-height:1.2 !important;
    letter-spacing:-.035em !important;
    margin:0 0 8px !important;
    color:var(--zio-navy) !important;
}

.trace-result-card > p{
    position:relative !important;
    z-index:2 !important;
    font-size:13.2px !important;
    line-height:1.75 !important;
    color:var(--zio-muted) !important;
    margin:0 0 20px !important;
}

.trace-detail-grid{
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:13px !important;
}

.trace-detail-item{
    padding:15px 16px !important;
    border:1px solid #e7edf6 !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, #fbfdff 0%, #ffffff 100%) !important;
}

.trace-detail-item span{
    display:block !important;
    color:#7a879e !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    margin-bottom:6px !important;
}

.trace-detail-item strong{
    display:block !important;
    color:var(--zio-navy) !important;
    font-size:14.2px !important;
    line-height:1.45 !important;
    font-weight:900 !important;
    word-break:break-word !important;
}

.trace-result-placeholder{
    background:
        linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(248,251,255,.96) 100%) !important;
}

.trace-placeholder-steps{
    display:grid !important;
    gap:12px !important;
    margin-top:20px !important;
}

.trace-placeholder-step{
    display:grid !important;
    grid-template-columns:42px 1fr !important;
    gap:13px !important;
    align-items:start !important;
    padding:14px !important;
    border:1px solid #e7edf6 !important;
    border-radius:18px !important;
    background:#fff !important;
}

.trace-placeholder-step > strong{
    width:42px !important;
    height:42px !important;
    display:grid !important;
    place-items:center !important;
    border-radius:14px !important;
    background:linear-gradient(135deg, var(--zio-blue), #3454ff) !important;
    color:#fff !important;
    font-size:15px !important;
    font-weight:900 !important;
    box-shadow:0 12px 22px rgba(23,43,216,.16) !important;
}

.trace-placeholder-step h4{
    margin:2px 0 5px !important;
    font-size:13.8px !important;
    line-height:1.3 !important;
    color:var(--zio-navy) !important;
}

.trace-placeholder-step p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    font-size:12.2px !important;
    line-height:1.68 !important;
}

.trace-warranty-card .trace-result-header strong{
    background:#fff6e8 !important;
    color:#b87400 !important;
}

.warranty-note-box{
    margin-top:16px !important;
    padding:17px !important;
    border-radius:20px !important;
    border:1px solid #e7edf6 !important;
    background:#fff !important;
}

.warranty-note-box span{
    display:block !important;
    color:var(--zio-navy) !important;
    font-size:11px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    margin-bottom:7px !important;
}

.warranty-note-box p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    font-size:13px !important;
    line-height:1.75 !important;
}

.trace-login-only{
    background:linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
}

.trace-login-only .trace-result-header strong{
    background:#fff6e8 !important;
    color:#b87400 !important;
}

.trace-login-only a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:46px !important;
    padding:0 22px !important;
    border-radius:999px !important;
    background:var(--zio-blue) !important;
    color:#fff !important;
    font-size:12.5px !important;
    font-weight:900 !important;
    margin-top:4px !important;
    box-shadow:0 12px 24px rgba(23,43,216,.16) !important;
}

.trace-not-found{
    border-color:#ffd8d8 !important;
    background:linear-gradient(180deg, #ffffff 0%, #fff8f8 100%) !important;
}

.trace-not-found .trace-result-header strong{
    background:#fff0f0 !important;
    color:#d22020 !important;
}

.trace-not-found-note{
    margin-top:12px !important;
    padding:15px 16px !important;
    border-radius:18px !important;
    background:#fff !important;
    border:1px solid #ffe0e0 !important;
    color:#b43333 !important;
    font-size:13px !important;
    line-height:1.7 !important;
}

/* Hide old table style if old markup remains */
.trace-detail-table{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:13px !important;
    width:100% !important;
    border:0 !important;
    background:transparent !important;
    border-radius:0 !important;
    overflow:visible !important;
}

.trace-detail-table > div{
    padding:15px 16px !important;
    border:1px solid #e7edf6 !important;
    border-radius:18px !important;
    background:linear-gradient(180deg, #fbfdff 0%, #ffffff 100%) !important;
}

.trace-detail-table > div > span{
    display:block !important;
    color:#7a879e !important;
    font-size:10.5px !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    margin-bottom:6px !important;
}

.trace-detail-table > div > strong{
    display:block !important;
    color:var(--zio-navy) !important;
    font-size:14.2px !important;
    line-height:1.45 !important;
    font-weight:900 !important;
}

@media(max-width:1100px){
    .traceability-layout{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:768px){
    .traceability-section{
        padding:58px 0 72px !important;
    }

    .traceability-search-card,
    .trace-result-card{
        padding:22px !important;
        border-radius:24px !important;
    }

    .traceability-search-card h2{
        font-size:24px !important;
    }

    .traceability-form{
        flex-direction:column !important;
        align-items:stretch !important;
        border-radius:22px !important;
        padding:10px !important;
    }

    .traceability-form input{
        height:46px !important;
        padding:0 12px !important;
    }

    .traceability-form button{
        width:100% !important;
    }

    .traceability-helper-grid,
    .trace-detail-grid,
    .trace-detail-table{
        grid-template-columns:1fr !important;
    }

    .trace-placeholder-step{
        grid-template-columns:38px 1fr !important;
    }

    .trace-placeholder-step > strong{
        width:38px !important;
        height:38px !important;
        border-radius:12px !important;
        font-size:14px !important;
    }
}

/* =========================================================
   TRACEABILITY FINAL CLEAN LOOK - NO GRID & LESS BOLD
   ========================================================= */

.traceability-section{
    background:linear-gradient(180deg, #ffffff 0%, #f7f9ff 100%) !important;
}

.traceability-section::before{
    display:none !important;
    content:none !important;
    background:none !important;
}

.traceability-search-card,
.trace-result-card{
    background:#ffffff !important;
}

.traceability-search-card h2,
.trace-result-card h3{
    font-weight:700 !important;
    letter-spacing:-.025em !important;
}

.traceability-lead strong,
.traceability-code-note strong,
.traceability-helper-item strong,
.trace-detail-item strong,
.warranty-note-box span,
.trace-placeholder-step h4{
    font-weight:600 !important;
}

.trace-detail-item span{
    font-weight:600 !important;
    letter-spacing:.035em !important;
}

.trace-result-header span,
.trace-result-header strong{
    font-weight:700 !important;
}

.traceability-form input{
    font-weight:500 !important;
}

.traceability-form button,
.trace-login-only a{
    font-weight:700 !important;
}

.traceability-helper-box h3{
    font-weight:700 !important;
}

.trace-placeholder-step > strong{
    font-weight:700 !important;
}

.trace-detail-item{
    background:#ffffff !important;
}

.traceability-helper-item{
    background:#ffffff !important;
}

/* =========================================================
   ZIOFLEX HEADER MENU FINAL CLEAN FIX
   Desktop + Mobile Header / Dropdown / Topbar
   ========================================================= */

/* Desktop header stability */
.zio-topbar{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:34px !important;
    z-index:99990 !important;
    background:var(--zio-blue-dark) !important;
    transform:translateY(0) !important;
    opacity:1 !important;
    pointer-events:auto !important;
}

.zio-topbar-inner{
    height:34px !important;
}

.zio-header{
    position:fixed !important;
    top:34px !important;
    left:0 !important;
    right:0 !important;
    z-index:99980 !important;
    background:rgba(255,255,255,.98) !important;
    border-bottom:1px solid rgba(223,231,243,.95) !important;
    box-shadow:0 10px 28px rgba(16,24,40,.07) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    overflow:visible !important;
}

body.zio-topbar-hidden .zio-topbar{
    transform:translateY(-100%) !important;
    opacity:0 !important;
    pointer-events:none !important;
}

body.zio-topbar-hidden .zio-header{
    top:0 !important;
}

.zio-main{
    padding-top:120px !important;
}

body.zio-topbar-hidden .zio-main{
    padding-top:86px !important;
}

.zio-header-inner{
    min-height:86px !important;
    display:grid !important;
    grid-template-columns:185px minmax(260px, 360px) minmax(0,1fr) auto !important;
    align-items:center !important;
    gap:18px !important;
    overflow:visible !important;
}

.zio-brand{
    padding-left:18px !important;
}

.zio-brand img{
    width:142px !important;
    height:auto !important;
}

.zio-header-search{
    height:42px !important;
    border:1px solid #dfe7f3 !important;
    border-radius:999px !important;
    background:#fff !important;
    box-shadow:0 8px 22px rgba(16,24,40,.04) !important;
}

.zio-header-search input{
    font-size:12px !important;
    font-weight:500 !important;
}

.zio-header-search button{
    font-weight:700 !important;
}

.zio-nav{
    position:relative !important;
    z-index:100000 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:8px !important;
    overflow:visible !important;
    white-space:nowrap !important;
}

.zio-nav > a,
.zio-nav-dropdown > button{
    min-height:38px !important;
    padding:0 10px !important;
    border:0 !important;
    border-radius:999px !important;
    background:transparent !important;
    color:var(--zio-navy) !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:700 !important;
    letter-spacing:-.01em !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    cursor:pointer !important;
    transition:background .18s ease, color .18s ease, transform .18s ease !important;
}

.zio-nav > a:hover,
.zio-nav-dropdown:hover > button,
.zio-nav-dropdown > button:hover,
.zio-nav-dropdown:focus-within > button{
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
}

.zio-nav-dropdown{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    min-height:54px !important;
    padding:0 !important;
    margin:0 !important;
    overflow:visible !important;
}

/* bridge area so mouse can move to dropdown without disappearing */
.zio-nav-dropdown::after{
    content:"" !important;
    position:absolute !important;
    left:-20px !important;
    right:-20px !important;
    top:100% !important;
    height:24px !important;
    background:transparent !important;
    z-index:100001 !important;
}

.zio-dropdown-menu{
    display:block !important;
    position:absolute !important;
    top:calc(100% + 8px) !important;
    left:50% !important;
    transform:translateX(-50%) translateY(8px) !important;
    min-width:250px !important;
    padding:10px !important;
    background:#fff !important;
    border:1px solid #dfe7f3 !important;
    border-radius:18px !important;
    box-shadow:0 24px 60px rgba(16,24,40,.16) !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    z-index:100002 !important;
    transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important;
}

.zio-dropdown-menu.wide{
    min-width:292px !important;
}

.zio-dropdown-menu::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:-22px !important;
    height:22px !important;
    background:transparent !important;
}

.zio-nav-dropdown:hover > .zio-dropdown-menu,
.zio-nav-dropdown:focus-within > .zio-dropdown-menu,
.zio-dropdown-menu:hover{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateX(-50%) translateY(0) !important;
}

.zio-dropdown-menu a{
    display:flex !important;
    align-items:center !important;
    min-height:38px !important;
    padding:0 13px !important;
    border-radius:12px !important;
    color:var(--zio-text) !important;
    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:600 !important;
    position:relative !important;
    z-index:100003 !important;
    transition:background .16s ease, color .16s ease, transform .16s ease !important;
}

.zio-dropdown-menu a:hover{
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
    transform:translateX(2px) !important;
}

.zio-header-actions{
    gap:10px !important;
}

.zio-lang-switch{
    height:42px !important;
    border:1px solid #dfe7f3 !important;
    box-shadow:0 10px 24px rgba(16,24,40,.07) !important;
}

.zio-lang-switch button{
    font-weight:800 !important;
}

.zio-mobile-panel,
.zio-mobile-overlay{
    display:none !important;
}

@media(max-width:1180px) and (min-width:769px){
    .zio-header-inner{
        grid-template-columns:170px minmax(220px, 310px) minmax(0,1fr) auto !important;
        gap:12px !important;
    }

    .zio-nav{
        gap:4px !important;
    }

    .zio-nav > a,
    .zio-nav-dropdown > button{
        font-size:11px !important;
        padding:0 8px !important;
    }
}

/* Mobile header clean */
@media(max-width:768px){
    .zio-topbar{
        height:36px !important;
        z-index:99990 !important;
    }

    .zio-topbar-inner{
        height:36px !important;
        width:calc(100% - 20px) !important;
        gap:6px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
    }

    .zio-topbar-contact{
        flex:1 1 auto !important;
        min-width:0 !important;
        display:flex !important;
        align-items:center !important;
        gap:5px !important;
        flex-wrap:nowrap !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        font-size:9.2px !important;
        line-height:1 !important;
        letter-spacing:-.25px !important;
    }

    .zio-topbar-contact span,
    .zio-topbar-contact a{
        flex-shrink:0 !important;
        white-space:nowrap !important;
    }

    .zio-topbar-social{
        flex:0 0 auto !important;
        gap:5px !important;
    }

    .zio-topbar-social a{
        width:22px !important;
        height:22px !important;
        font-size:8.5px !important;
    }

    .zio-header{
        top:36px !important;
        z-index:99980 !important;
    }

    body.zio-topbar-hidden .zio-header{
        top:0 !important;
    }

    .zio-main{
        padding-top:126px !important;
    }

    body.zio-topbar-hidden .zio-main{
        padding-top:90px !important;
    }

    .zio-header-inner{
        min-height:90px !important;
        padding:0 !important;
        display:grid !important;
        grid-template-columns:1fr auto auto !important;
        grid-template-areas:"brand lang menu" !important;
        align-items:center !important;
        gap:10px !important;
        overflow:visible !important;
    }

    .zio-brand{
        grid-area:brand !important;
        padding-left:18px !important;
    }

    .zio-brand img{
        width:132px !important;
    }

    .zio-header-search,
    .zio-nav{
        display:none !important;
    }

    .zio-header-actions{
        grid-area:lang !important;
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
    }

    .zio-lang-switch{
        height:40px !important;
        padding:4px !important;
    }

    .zio-lang-switch button{
        height:32px !important;
        min-width:35px !important;
        font-size:10.5px !important;
    }

    .zio-mobile-toggle{
        grid-area:menu !important;
        display:grid !important;
        place-items:center !important;
        width:42px !important;
        height:42px !important;
        margin-right:12px !important;
        border:1px solid #dfe7f3 !important;
        border-radius:15px !important;
        background:#fff !important;
        color:var(--zio-navy) !important;
        font-size:22px !important;
        box-shadow:0 10px 24px rgba(16,24,40,.06) !important;
        z-index:100006 !important;
    }

    .zio-mobile-overlay{
        display:block !important;
        position:fixed !important;
        inset:0 !important;
        background:rgba(8,15,40,.52) !important;
        backdrop-filter:blur(5px) !important;
        -webkit-backdrop-filter:blur(5px) !important;
        z-index:99970 !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transition:opacity .22s ease, visibility .22s ease !important;
    }

    body.zio-menu-open .zio-mobile-overlay{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
    }

    .zio-mobile-panel{
        display:block !important;
        position:fixed !important;
        top:136px !important;
        left:14px !important;
        right:14px !important;
        width:auto !important;
        max-height:calc(100vh - 154px) !important;
        overflow-y:auto !important;
        padding:12px !important;
        border:1px solid #dfe7f3 !important;
        border-radius:22px !important;
        background:#fff !important;
        box-shadow:0 28px 80px rgba(16,24,40,.28) !important;
        z-index:100005 !important;
        opacity:0 !important;
        visibility:hidden !important;
        pointer-events:none !important;
        transform:translateY(10px) !important;
        transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important;
    }

    body.zio-topbar-hidden .zio-mobile-panel{
        top:100px !important;
        max-height:calc(100vh - 118px) !important;
    }

    body.zio-menu-open .zio-mobile-panel{
        opacity:1 !important;
        visibility:visible !important;
        pointer-events:auto !important;
        transform:translateY(0) !important;
    }

    .zio-mobile-search{
        display:flex !important;
        height:44px !important;
        border:1px solid #dfe7f3 !important;
        border-radius:999px !important;
        overflow:hidden !important;
        background:#fff !important;
        margin-bottom:10px !important;
    }

    .zio-mobile-search input{
        flex:1 !important;
        min-width:0 !important;
        border:0 !important;
        outline:0 !important;
        padding:0 14px !important;
        font-size:12px !important;
    }

    .zio-mobile-search button{
        width:72px !important;
        border:0 !important;
        border-left:1px solid #dfe7f3 !important;
        background:#fff !important;
        color:var(--zio-navy) !important;
        font-weight:800 !important;
        font-size:11.5px !important;
    }

    .zio-mobile-panel > a,
    .zio-mobile-group > button{
        width:100% !important;
        min-height:42px !important;
        padding:0 13px !important;
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        border:0 !important;
        border-radius:14px !important;
        background:transparent !important;
        color:var(--zio-navy) !important;
        font-size:12.2px !important;
        font-weight:750 !important;
        text-align:left !important;
    }

    .zio-mobile-panel > a:hover,
    .zio-mobile-group > button:hover,
    .zio-mobile-panel a.is-pressed{
        background:#eef3ff !important;
        color:var(--zio-blue) !important;
    }

    .zio-mobile-group.is-open > button{
        background:#eef3ff !important;
        color:var(--zio-blue) !important;
    }

    .zio-mobile-group.is-open > button i{
        transform:rotate(180deg) !important;
    }

    .zio-mobile-submenu{
        display:none !important;
        margin:4px 0 8px 10px !important;
        padding:6px 0 6px 10px !important;
        border-left:2px solid #edf1fb !important;
    }

    .zio-mobile-group.is-open .zio-mobile-submenu{
        display:block !important;
    }

    .zio-mobile-submenu a{
        display:block !important;
        min-height:36px !important;
        padding:9px 11px !important;
        border-radius:12px !important;
        color:#526079 !important;
        font-size:11.6px !important;
        font-weight:650 !important;
    }

    .zio-mobile-submenu a:hover{
        background:#eef3ff !important;
        color:var(--zio-blue) !important;
    }
}

@media(max-width:390px){
    .zio-topbar-contact{
        font-size:8.6px !important;
        gap:4px !important;
        letter-spacing:-.35px !important;
    }

    .zio-topbar-social{
        gap:4px !important;
    }

    .zio-topbar-social a{
        width:21px !important;
        height:21px !important;
        font-size:8px !important;
    }

    .zio-brand{
        padding-left:16px !important;
    }

    .zio-brand img{
        width:126px !important;
    }

    .zio-mobile-toggle{
        width:40px !important;
        height:40px !important;
        margin-right:10px !important;
    }
}

/* =========================================================
   FINAL DESKTOP HEADER FIX - MENU TIDAK NUMPUK SEARCH
   ========================================================= */

@media(min-width:769px){
    .zio-header{
        overflow:visible !important;
    }

    .zio-header .zio-container,
    .zio-header .site-container{
        width:min(1320px, calc(100% - 42px)) !important;
    }

    .zio-header-inner{
        display:flex !important;
        grid-template-columns:none !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:16px !important;
        min-height:86px !important;
        overflow:visible !important;
    }

    .zio-brand{
        flex:0 0 170px !important;
        padding-left:0 !important;
        min-width:170px !important;
    }

    .zio-brand img{
        width:142px !important;
        max-width:142px !important;
    }

    .zio-header-search{
        flex:0 0 320px !important;
        width:320px !important;
        max-width:320px !important;
        min-width:280px !important;
        position:relative !important;
        z-index:1 !important;
    }

    .zio-header-search input{
        font-size:12px !important;
        padding-left:16px !important;
        padding-right:12px !important;
    }

    .zio-header-search button{
        width:70px !important;
        min-width:70px !important;
        font-size:11.5px !important;
    }

    .zio-nav{
        flex:1 1 auto !important;
        min-width:0 !important;
        display:flex !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:15px !important;
        white-space:nowrap !important;
        position:relative !important;
        z-index:3 !important;
        overflow:visible !important;
    }

    .zio-nav > a,
    .zio-nav-dropdown > button{
        font-size:11.5px !important;
        line-height:1 !important;
        font-weight:800 !important;
        white-space:nowrap !important;
        padding:0 !important;
    }

    .zio-header-actions{
        flex:0 0 auto !important;
        min-width:max-content !important;
        position:relative !important;
        z-index:4 !important;
    }

    .zio-lang-switch{
        height:42px !important;
        flex:0 0 auto !important;
    }

    .zio-dropdown-menu{
        z-index:1000001 !important;
    }
}

@media(min-width:769px) and (max-width:1220px){
    .zio-header .zio-container,
    .zio-header .site-container{
        width:calc(100% - 28px) !important;
    }

    .zio-header-inner{
        gap:12px !important;
    }

    .zio-brand{
        flex-basis:155px !important;
        min-width:155px !important;
    }

    .zio-brand img{
        width:132px !important;
        max-width:132px !important;
    }

    .zio-header-search{
        flex-basis:260px !important;
        width:260px !important;
        max-width:260px !important;
        min-width:230px !important;
    }

    .zio-header-search button{
        width:58px !important;
        min-width:58px !important;
    }

    .zio-nav{
        gap:10px !important;
    }

    .zio-nav > a,
    .zio-nav-dropdown > button{
        font-size:10.7px !important;
    }

    .zio-lang-switch button{
        min-width:34px !important;
        font-size:10px !important;
    }
}

/* =========================================================
   ZIOFLEX COORDINATE MAP FINAL
   ========================================================= */

.home-market-map-visual.coordinate-map-visual{
    position:relative !important;
    min-height:470px !important;
    padding:0 !important;
    background:#ffffff !important;
    border:1px solid #e8eef8 !important;
    border-radius:24px !important;
    overflow:hidden !important;
}

.zio-coordinate-map{
    width:100% !important;
    height:470px !important;
    min-height:470px !important;
    border-radius:24px !important;
    overflow:hidden !important;
    background:#eef3f8 !important;
    z-index:1 !important;
}

.zio-coordinate-map .leaflet-control-attribution{
    font-size:9px !important;
}

.zio-coordinate-map .leaflet-control-zoom a{
    color:var(--zio-navy) !important;
    font-weight:900 !important;
}

.zio-coordinate-marker{
    width:22px !important;
    height:22px !important;
    border-radius:999px !important;
}

.zio-coordinate-marker span{
    width:16px !important;
    height:16px !important;
    display:block !important;
    border-radius:999px !important;
    background:#e31b23 !important;
    border:3px solid #ffffff !important;
    box-shadow:0 0 0 7px rgba(227,27,35,.13), 0 12px 26px rgba(227,27,35,.34) !important;
    position:relative !important;
}

.zio-coordinate-marker span::after{
    content:"" !important;
    position:absolute !important;
    inset:-9px !important;
    border-radius:999px !important;
    border:1px solid rgba(227,27,35,.35) !important;
    animation:marketPulse 1.8s infinite !important;
}

.zio-coordinate-map .leaflet-popup-content-wrapper{
    border-radius:14px !important;
    box-shadow:0 18px 40px rgba(16,24,40,.18) !important;
}

.zio-coordinate-map .leaflet-popup-content{
    margin:12px 14px !important;
    font-family:'Montserrat', Arial, sans-serif !important;
    color:var(--zio-navy) !important;
    font-size:12px !important;
    line-height:1.45 !important;
}

.zio-coordinate-map .leaflet-popup-content strong{
    font-size:13px !important;
    font-weight:900 !important;
}

.zio-coordinate-map .leaflet-popup-content span{
    color:var(--zio-muted) !important;
}

@media(max-width:992px){
    .home-market-map-visual.coordinate-map-visual,
    .zio-coordinate-map{
        min-height:410px !important;
        height:410px !important;
    }
}

@media(max-width:768px){
    .home-market-map-visual.coordinate-map-visual,
    .zio-coordinate-map{
        min-height:350px !important;
        height:350px !important;
        border-radius:20px !important;
    }
}

/* =========================================================
   FIX LEAFLET MAP TILE - JANGAN KETABRAK CSS IMAGE LAMA
   ========================================================= */

.coordinate-map-visual .leaflet-container{
    width:100% !important;
    height:470px !important;
    background:#eef3f8 !important;
}

.coordinate-map-visual .leaflet-tile-pane{
    z-index:200 !important;
}

.coordinate-map-visual .leaflet-overlay-pane{
    z-index:400 !important;
}

.coordinate-map-visual .leaflet-marker-pane{
    z-index:600 !important;
}

.coordinate-map-visual .leaflet-popup-pane{
    z-index:700 !important;
}

.coordinate-map-visual .leaflet-tile,
.coordinate-map-visual .leaflet-tile-container img,
.coordinate-map-visual .leaflet-pane img{
    width:256px !important;
    height:256px !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
    padding:0 !important;
    margin:0 !important;
    object-fit:cover !important;
    border-radius:0 !important;
    box-shadow:none !important;
    opacity:1 !important;
}

.coordinate-map-visual img.leaflet-tile{
    display:block !important;
}

.zio-coordinate-map{
    position:relative !important;
    width:100% !important;
    height:470px !important;
    min-height:470px !important;
    border-radius:24px !important;
    overflow:hidden !important;
}

@media(max-width:992px){
    .coordinate-map-visual .leaflet-container,
    .zio-coordinate-map{
        height:410px !important;
        min-height:410px !important;
    }
}

@media(max-width:768px){
    .coordinate-map-visual .leaflet-container,
    .zio-coordinate-map{
        height:350px !important;
        min-height:350px !important;
    }
}

/* =========================================================
   LEAFLET ATTRIBUTION SMALL & CLEAN
   ========================================================= */

.zio-coordinate-map .leaflet-control-attribution{
    font-size:7px !important;
    line-height:1 !important;
    padding:2px 5px !important;
    background:rgba(255,255,255,.45) !important;
    color:rgba(7,14,113,.32) !important;
    border-radius:8px 0 0 0 !important;
    box-shadow:none !important;
    opacity:.45 !important;
}

.zio-coordinate-map .leaflet-control-attribution a{
    color:rgba(7,14,113,.35) !important;
    text-decoration:none !important;
}

.zio-coordinate-map .leaflet-control-attribution:hover{
    opacity:.85 !important;
    background:rgba(255,255,255,.78) !important;
}

.zio-coordinate-map .leaflet-bottom.leaflet-right{
    right:4px !important;
    bottom:4px !important;
}

/* =========================================================
   HERO SLIDER ARROW - SMALL MODERN FINAL
   ========================================================= */

.zio-hero-arrow{
    width:40px !important;
    height:40px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.88) !important;
    color:var(--zio-blue) !important;
    border:1px solid rgba(255,255,255,.55) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.16) !important;
    backdrop-filter:blur(10px) !important;
    -webkit-backdrop-filter:blur(10px) !important;
    transition:
        transform .18s ease,
        background .18s ease,
        color .18s ease,
        box-shadow .18s ease !important;
}

.zio-hero-arrow svg{
    width:18px !important;
    height:18px !important;
    stroke-width:2.6px !important;
}

.zio-hero-arrow:hover{
    background:var(--zio-blue) !important;
    color:#ffffff !important;
    transform:translateY(-50%) scale(1.06) !important;
    box-shadow:0 16px 34px rgba(23,43,216,.25) !important;
}

.zio-hero-arrow:active{
    transform:translateY(-50%) scale(.96) !important;
}

.zio-hero-prev{
    left:24px !important;
}

.zio-hero-next{
    right:24px !important;
}

/* Dots dibuat lebih modern juga */
.zio-hero-dots{
    bottom:24px !important;
    gap:8px !important;
}

.zio-hero-dots button{
    width:9px !important;
    height:9px !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.45) !important;
    border:1px solid rgba(255,255,255,.45) !important;
    transition:all .2s ease !important;
}

.zio-hero-dots button.active{
    width:30px !important;
    background:#ffffff !important;
    border-color:#ffffff !important;
}

/* Mobile */
@media(max-width:768px){
    .zio-hero-arrow{
        width:36px !important;
        height:36px !important;
        box-shadow:0 10px 22px rgba(0,0,0,.14) !important;
    }

    .zio-hero-arrow svg{
        width:16px !important;
        height:16px !important;
    }

    .zio-hero-prev{
        left:14px !important;
    }

    .zio-hero-next{
        right:14px !important;
    }

    .zio-hero-dots{
        bottom:22px !important;
    }

    .zio-hero-dots button{
        width:8px !important;
        height:8px !important;
    }

    .zio-hero-dots button.active{
        width:26px !important;
    }
}

/* =========================================================
   INDUSTRIAL SOLUTION - MODERN CENTER CARD
   ========================================================= */

.industrial-solution-section{
    padding: 90px 0 100px;
    background: #ffffff;
}

.industrial-solution-head{
    max-width: 900px;
    margin: 0 auto 42px;
    text-align: center;
}

.industrial-solution-subtitle{
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .08em;
    color: #1d39d8;
    text-transform: uppercase;
}

.industrial-solution-head h2{
    margin: 0 0 14px;
    font-size: 52px;
    line-height: 1.15;
    font-weight: 800;
    color: #0f172a;
}

.industrial-solution-head p{
    margin: 0 auto;
    max-width: 760px;
    font-size: 18px;
    line-height: 1.8;
    color: #64748b;
}

.industrial-solution-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.industrial-solution-card{
    background: #ffffff;
    border: 1px solid #dbe5f1;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    text-align: center;
}

.industrial-solution-card:hover{
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
    border-color: #c7d7ee;
}

.industrial-solution-media{
    width: 100%;
    height: 220px;
    overflow: hidden;
    background: #f8fafc;
}

.industrial-solution-media img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

.industrial-solution-card:hover .industrial-solution-media img{
    transform: scale(1.05);
}

.industrial-solution-content{
    padding: 26px 24px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.industrial-solution-content h3{
    margin: 0 0 12px;
    font-size: 32px;
    line-height: 1.25;
    font-weight: 800;
    color: #0f172a;
    text-align: center;
}

.industrial-solution-content p{
    margin: 0;
    max-width: 90%;
    font-size: 17px;
    line-height: 1.8;
    color: #64748b;
    text-align: center;
}

/* tablet */
@media (max-width: 1199px){
    .industrial-solution-head h2{
        font-size: 44px;
    }

    .industrial-solution-content h3{
        font-size: 28px;
    }
}

/* mobile */
@media (max-width: 991px){
    .industrial-solution-section{
        padding: 75px 0 85px;
    }

    .industrial-solution-grid{
        grid-template-columns: 1fr;
        gap: 22px;
    }

    .industrial-solution-head h2{
        font-size: 36px;
    }

    .industrial-solution-head p{
        font-size: 16px;
    }

    .industrial-solution-media{
        height: 210px;
    }

    .industrial-solution-content{
        padding: 22px 20px 26px;
    }

    .industrial-solution-content h3{
        font-size: 26px;
    }

    .industrial-solution-content p{
        max-width: 100%;
        font-size: 15px;
    }
}

/* =========================================================
   ZIOFLEX FONT SUBJECT SMALLER & MORE ELEGANT
   ========================================================= */

/* Judul utama tiap section */
.home-admin-section-head h2,
.home-market-map-head h2{
    font-size:clamp(27px, 2.35vw, 36px) !important;
    line-height:1.25 !important;
    font-weight:600 !important;
    letter-spacing:-.015em !important;
}

/* Judul section About / Tentang */
.home-zio-about-content h2{
    font-size:clamp(28px, 2.45vw, 38px) !important;
    line-height:1.28 !important;
    font-weight:600 !important;
    letter-spacing:-.018em !important;
}

/* Judul besar di Industrial Solution kiri */
.home-industrial-intro h3{
    font-size:clamp(24px, 2.05vw, 30px) !important;
    line-height:1.28 !important;
    font-weight:600 !important;
    letter-spacing:-.015em !important;
}

/* Judul card Industrial Solution kanan */
.home-industrial-card-content h3{
    font-size:20px !important;
    line-height:1.3 !important;
    font-weight:600 !important;
    letter-spacing:-.012em !important;
}

/* Judul card produk */
.home-admin-product-card h3{
    font-size:22px !important;
    line-height:1.3 !important;
    font-weight:600 !important;
    letter-spacing:-.012em !important;
}

/* Judul artikel */
.home-admin-article-card h3{
    font-size:21px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
    letter-spacing:-.012em !important;
}

/* Judul CTA bawah */
.home-admin-cta-box h2{
    font-size:clamp(27px, 2.25vw, 36px) !important;
    line-height:1.25 !important;
    font-weight:600 !important;
    letter-spacing:-.015em !important;
}

/* Eyebrow / teks kecil biru */
.home-admin-section-head span,
.home-zio-about-content span,
.home-market-map-head span,
.home-industrial-intro-label,
.home-industrial-card-content small,
.home-admin-product-card span,
.home-admin-cta-box span{
    font-size:11px !important;
    font-weight:700 !important;
    letter-spacing:.045em !important;
}

/* Paragraf dibuat lebih kalem */
.home-admin-section-head p,
.home-zio-about-content p,
.home-industrial-intro p,
.home-industrial-card-content p,
.home-admin-product-card p,
.home-admin-article-card p,
.home-admin-cta-box p,
.home-market-map-head p{
    font-size:14.5px !important;
    line-height:1.75 !important;
    font-weight:400 !important;
}

/* Mobile */
@media(max-width:768px){
    .home-admin-section-head h2,
    .home-market-map-head h2{
        font-size:25px !important;
    }

    .home-zio-about-content h2{
        font-size:27px !important;
    }

    .home-industrial-intro h3{
        font-size:24px !important;
    }

    .home-industrial-card-content h3,
    .home-admin-product-card h3,
    .home-admin-article-card h3{
        font-size:20px !important;
    }

    .home-admin-cta-box h2{
        font-size:25px !important;
    }
}

/* =========================================================
   ZIOFLEX FONT SUBJECT EXTRA SMALL & ELEGANT
   ========================================================= */

/* Judul utama semua section */
.home-admin-section-head h2,
.home-market-map-head h2,
.home-admin-solution-section .home-admin-section-head h2{
    font-size:clamp(24px, 1.95vw, 31px) !important;
    line-height:1.32 !important;
    font-weight:500 !important;
    letter-spacing:-.01em !important;
}

/* Judul About / Tentang */
.home-zio-about-content h2{
    font-size:clamp(25px, 2.05vw, 32px) !important;
    line-height:1.35 !important;
    font-weight:500 !important;
    letter-spacing:-.01em !important;
}

/* Judul kiri Industrial Solution */
.home-industrial-intro h3{
    font-size:clamp(22px, 1.85vw, 27px) !important;
    line-height:1.34 !important;
    font-weight:500 !important;
    letter-spacing:-.008em !important;
}

/* Judul kartu Industrial Solution */
.home-industrial-card-content h3{
    font-size:18px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
    letter-spacing:-.006em !important;
}

/* Judul kartu Produk */
.home-admin-product-card h3{
    font-size:19px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
    letter-spacing:-.006em !important;
}

/* Judul Artikel */
.home-admin-article-card h3{
    font-size:19px !important;
    line-height:1.38 !important;
    font-weight:500 !important;
    letter-spacing:-.006em !important;
}

/* Judul CTA */
.home-admin-cta-box h2{
    font-size:clamp(24px, 1.95vw, 31px) !important;
    line-height:1.32 !important;
    font-weight:500 !important;
    letter-spacing:-.01em !important;
}

/* Judul card / block lain */
.home-admin-empty-card,
.home-market-map-list h3{
    font-size:20px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

/* Label biru kecil */
.home-admin-section-head span,
.home-zio-about-content span,
.home-market-map-head span,
.home-industrial-intro-label,
.home-industrial-card-content small,
.home-admin-product-card span,
.home-admin-cta-box span{
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.055em !important;
}

/* Paragraf semua section */
.home-admin-section-head p,
.home-zio-about-content p,
.home-industrial-intro p,
.home-industrial-card-content p,
.home-admin-product-card p,
.home-admin-article-card p,
.home-admin-cta-box p,
.home-market-map-head p,
.home-market-map-list p{
    font-size:13.8px !important;
    line-height:1.72 !important;
    font-weight:400 !important;
}

/* Menu list / teks kecil tambahan */
.home-admin-product-card small,
.home-admin-article-card small,
.home-industrial-note-item strong{
    font-size:13px !important;
    font-weight:500 !important;
}

.home-industrial-note-item small{
    font-size:12.2px !important;
    line-height:1.62 !important;
}

/* Mobile */
@media(max-width:768px){
    .home-admin-section-head h2,
    .home-market-map-head h2,
    .home-admin-solution-section .home-admin-section-head h2{
        font-size:23px !important;
    }

    .home-zio-about-content h2{
        font-size:24px !important;
    }

    .home-industrial-intro h3{
        font-size:22px !important;
    }

    .home-industrial-card-content h3,
    .home-admin-product-card h3,
    .home-admin-article-card h3{
        font-size:18px !important;
    }

    .home-admin-cta-box h2{
        font-size:23px !important;
    }

    .home-admin-section-head p,
    .home-zio-about-content p,
    .home-industrial-intro p,
    .home-industrial-card-content p,
    .home-admin-product-card p,
    .home-admin-article-card p,
    .home-admin-cta-box p,
    .home-market-map-head p,
    .home-market-map-list p{
        font-size:13.5px !important;
    }
}

/* =========================================================
   ZIOFLEX GLOBAL TYPOGRAPHY - ALL FRONTEND PAGES
   ========================================================= */

/* Font utama seluruh website */
body,
button,
input,
select,
textarea{
    font-family:"Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, Arial, sans-serif !important;
}

/* Semua judul utama halaman */
body h1,
.page-title,
.hero-title,
.zio-page-title,
.company-page-title,
.product-detail-title,
.article-detail-title{
    font-size:clamp(28px, 2.35vw, 38px) !important;
    line-height:1.28 !important;
    font-weight:500 !important;
    letter-spacing:-.012em !important;
}

/* Semua judul section */
body h2,
.section-title,
.home-admin-section-head h2,
.home-market-map-head h2,
.company-section h2,
.product-section h2,
.article-section h2,
.download-section h2,
.faq-section h2,
.traceability-section h2,
.career-section h2{
    font-size:clamp(23px, 1.85vw, 30px) !important;
    line-height:1.34 !important;
    font-weight:500 !important;
    letter-spacing:-.01em !important;
}

/* Judul card / sub section */
body h3,
.card-title,
.product-card h3,
.home-admin-product-card h3,
.home-admin-article-card h3,
.home-industrial-card-content h3,
.company-card h3,
.portfolio-card h3,
.download-card h3,
.faq-item h3,
.job-card h3{
    font-size:clamp(18px, 1.35vw, 22px) !important;
    line-height:1.36 !important;
    font-weight:500 !important;
    letter-spacing:-.006em !important;
}

/* Judul kecil */
body h4,
body h5,
body h6{
    font-weight:500 !important;
    line-height:1.4 !important;
    letter-spacing:-.004em !important;
}

/* Eyebrow / label biru kecil */
.home-admin-section-head span,
.home-zio-about-content span,
.home-market-map-head span,
.home-industrial-intro-label,
.home-industrial-card-content small,
.home-admin-product-card span,
.home-admin-cta-box span,
.page-eyebrow,
.section-eyebrow,
.zio-eyebrow,
.badge,
.badge-label{
    font-size:10px !important;
    line-height:1.35 !important;
    font-weight:600 !important;
    letter-spacing:.055em !important;
    text-transform:uppercase;
}

/* Paragraf seluruh halaman */
body p,
body li,
.page-content p,
.company-content p,
.product-content p,
.article-content p,
.home-admin-section-head p,
.home-zio-about-content p,
.home-industrial-intro p,
.home-industrial-card-content p,
.home-admin-product-card p,
.home-admin-article-card p,
.home-admin-cta-box p,
.home-market-map-head p,
.home-market-map-list p{
    font-size:14px !important;
    line-height:1.75 !important;
    font-weight:400 !important;
    letter-spacing:0 !important;
}

/* Link dan menu jangan terlalu tebal */
body a,
.nav-link,
.zio-nav-link,
.dropdown-menu a,
.mobile-menu a{
    font-weight:500 !important;
}

/* Button tetap tegas tapi tidak terlalu bold */
button,
.btn,
.zio-btn,
.home-zio-about-btn,
.home-admin-cta-box a,
.home-admin-product-card,
.home-industrial-card-content small{
    font-weight:500 !important;
}

/* Hero / banner halaman selain beranda */
.page-hero h1,
.inner-hero h1,
.company-hero h1,
.product-hero h1,
.article-hero h1,
.traceability-hero h1,
.career-hero h1,
.download-hero h1,
.faq-hero h1{
    font-size:clamp(29px, 2.5vw, 40px) !important;
    line-height:1.25 !important;
    font-weight:500 !important;
    letter-spacing:-.012em !important;
}

.page-hero p,
.inner-hero p,
.company-hero p,
.product-hero p,
.article-hero p,
.traceability-hero p,
.career-hero p,
.download-hero p,
.faq-hero p{
    font-size:14.5px !important;
    line-height:1.75 !important;
    font-weight:400 !important;
}

/* Khusus homepage section title tetap lebih kalem */
.home-admin-section-head h2,
.home-market-map-head h2,
.home-admin-solution-section .home-admin-section-head h2{
    font-size:clamp(23px, 1.85vw, 30px) !important;
    line-height:1.34 !important;
    font-weight:500 !important;
}

/* About section */
.home-zio-about-content h2{
    font-size:clamp(25px, 2.05vw, 33px) !important;
    line-height:1.33 !important;
    font-weight:500 !important;
}

/* Industrial solution */
.home-industrial-intro h3{
    font-size:clamp(22px, 1.85vw, 28px) !important;
    line-height:1.34 !important;
    font-weight:500 !important;
}

.home-industrial-card-content h3{
    font-size:18px !important;
    line-height:1.36 !important;
    font-weight:500 !important;
}

/* Product card */
.home-admin-product-card h3{
    font-size:19px !important;
    line-height:1.36 !important;
    font-weight:500 !important;
}

/* Article card */
.home-admin-article-card h3{
    font-size:19px !important;
    line-height:1.38 !important;
    font-weight:500 !important;
}

/* CTA */
.home-admin-cta-box h2{
    font-size:clamp(23px, 1.85vw, 30px) !important;
    line-height:1.34 !important;
    font-weight:500 !important;
}

/* Mobile */
@media(max-width:768px){
    body h1,
    .page-title,
    .hero-title,
    .zio-page-title,
    .company-page-title,
    .product-detail-title,
    .article-detail-title,
    .page-hero h1,
    .inner-hero h1,
    .company-hero h1,
    .product-hero h1,
    .article-hero h1,
    .traceability-hero h1,
    .career-hero h1,
    .download-hero h1,
    .faq-hero h1{
        font-size:25px !important;
        line-height:1.32 !important;
    }

    body h2,
    .section-title,
    .home-admin-section-head h2,
    .home-market-map-head h2{
        font-size:22px !important;
        line-height:1.36 !important;
    }

    body h3,
    .home-industrial-card-content h3,
    .home-admin-product-card h3,
    .home-admin-article-card h3{
        font-size:18px !important;
        line-height:1.38 !important;
    }

    body p,
    body li,
    .page-content p,
    .company-content p,
    .product-content p,
    .article-content p{
        font-size:13.5px !important;
        line-height:1.72 !important;
    }
}

/* =========================================================
   ZIOFLEX NEWS & ARTICLE SPACING FIX
   ========================================================= */

.home-admin-article-section{
    padding-top:110px !important;
    padding-bottom:105px !important;
    margin-top:0 !important;
    position:relative !important;
}

/* Supaya ada jarak aman kalau section sebelumnya punya card besar */
.company-final-page + .home-admin-article-section,
.zio-contact-form-wrap + .home-admin-article-section,
.home-market-map-section + .home-admin-article-section{
    padding-top:125px !important;
}

/* Jarak heading ke card artikel */
.home-admin-article-section .home-admin-section-head{
    margin-bottom:46px !important;
}

/* Card artikel jangan terlalu mepet ke bawah layar */
.home-admin-article-grid{
    padding-bottom:10px !important;
}

/* Kalau di halaman informasi perusahaan, beri napas lebih */
.company-final-page{
    padding-bottom:115px !important;
}

/* Mobile */
@media(max-width:768px){
    .home-admin-article-section{
        padding-top:82px !important;
        padding-bottom:82px !important;
    }

    .company-final-page + .home-admin-article-section,
    .zio-contact-form-wrap + .home-admin-article-section,
    .home-market-map-section + .home-admin-article-section{
        padding-top:92px !important;
    }

    .home-admin-article-section .home-admin-section-head{
        margin-bottom:32px !important;
    }

    .company-final-page{
        padding-bottom:88px !important;
    }
}

/* =========================================================
   ZIOFLEX CONTACT PAGE FINAL CLEANUP - 2026-07-01
   ========================================================= */

/* Area halaman informasi perusahaan dibuat lebih clean */
.company-final-page{
    padding-top:78px !important;
    padding-bottom:96px !important;
    background:#ffffff !important;
}

.company-final-grid{
    align-items:start !important;
}

.company-final-sidebar{
    border-radius:22px !important;
    box-shadow:0 14px 36px rgba(16,24,40,.045) !important;
}

.company-final-card{
    border-radius:30px !important;
    background:#ffffff !important;
    border:1px solid #dfe8f5 !important;
    box-shadow:0 22px 60px rgba(16,24,40,.055) !important;
    padding:36px !important;
}

/* Kotak kosong di atas map berasal dari blok content kosong; ini dimatikan */
.company-final-card > .company-final-content:not(:has(p)){
    display:none !important;
    height:0 !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
}

.company-final-card > .company-final-content:has(p){
    display:block !important;
    margin:28px 0 0 !important;
    padding:24px 0 0 !important;
    border:0 !important;
    border-top:1px solid #e4edf8 !important;
    background:transparent !important;
    box-shadow:none !important;
    border-radius:0 !important;
}

.company-final-summary:empty,
.company-final-image:empty,
.company-map-card:empty{
    display:none !important;
}

/* Contact page: map dibuat lebih rapi dan menyatu */
.company-map-card{
    position:relative !important;
    z-index:2 !important;
    margin:24px 0 24px !important;
    border-radius:24px !important;
    background:#ffffff !important;
    border:1px solid #dfe8f5 !important;
    overflow:hidden !important;
    box-shadow:0 14px 38px rgba(16,24,40,.05) !important;
}

.company-map-head{
    display:grid !important;
    grid-template-columns:1fr auto !important;
    align-items:center !important;
    gap:18px !important;
    padding:22px 24px !important;
    background:#ffffff !important;
    border-bottom:1px solid #e7edf6 !important;
}

.company-map-head span{
    display:inline-flex !important;
    margin:0 0 7px !important;
    color:var(--zio-blue) !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.055em !important;
    text-transform:uppercase !important;
}

.company-map-head h3{
    margin:0 0 7px !important;
    color:var(--zio-navy) !important;
    font-size:19px !important;
    line-height:1.35 !important;
    font-weight:500 !important;
    letter-spacing:-.006em !important;
}

.company-map-head p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    font-size:13.5px !important;
    line-height:1.65 !important;
    font-weight:400 !important;
}

.company-map-open{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:40px !important;
    padding:0 17px !important;
    border-radius:999px !important;
    background:var(--zio-blue) !important;
    color:#ffffff !important;
    text-decoration:none !important;
    font-size:12px !important;
    font-weight:500 !important;
    white-space:nowrap !important;
    box-shadow:0 12px 26px rgba(23,43,216,.16) !important;
}

.company-map-open:hover{
    color:#ffffff !important;
    transform:translateY(-1px) !important;
}

.company-map-frame{
    position:relative !important;
    height:320px !important;
    background:#edf3f8 !important;
    overflow:hidden !important;
}

.company-map-frame iframe{
    width:100% !important;
    height:100% !important;
    display:block !important;
    border:0 !important;
}

.company-map-click{
    position:absolute !important;
    inset:0 !important;
    z-index:4 !important;
    display:flex !important;
    align-items:flex-end !important;
    justify-content:flex-start !important;
    padding:18px !important;
    text-decoration:none !important;
    background:linear-gradient(180deg, transparent 58%, rgba(7,14,113,.12) 100%) !important;
}

.company-map-click span{
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    min-height:38px !important;
    padding:0 15px !important;
    border-radius:999px !important;
    background:#ffffff !important;
    color:var(--zio-navy) !important;
    font-size:12px !important;
    font-weight:500 !important;
    box-shadow:0 14px 30px rgba(16,24,40,.13) !important;
}

/* Contact boxes dibuat lebih ringan */
.company-contact-boxes{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:14px !important;
    margin:0 0 24px !important;
}

.company-contact-boxes > div{
    min-height:118px !important;
    padding:20px !important;
    border-radius:20px !important;
    background:#ffffff !important;
    border:1px solid #dfe8f5 !important;
    box-shadow:none !important;
}

.company-contact-boxes i{
    width:34px !important;
    height:34px !important;
    margin-bottom:12px !important;
    border-radius:12px !important;
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
}

.company-contact-boxes span{
    display:block !important;
    margin-bottom:5px !important;
    color:var(--zio-muted) !important;
    font-size:12px !important;
    font-weight:400 !important;
}

.company-contact-boxes strong{
    display:block !important;
    color:var(--zio-navy) !important;
    font-size:12.8px !important;
    line-height:1.55 !important;
    font-weight:500 !important;
}

/* Form kontak dibuat tidak terlalu berat */
.zio-contact-form-wrap{
    margin-top:24px !important;
    padding:26px !important;
    border-radius:24px !important;
    background:#f8fbff !important;
    border:1px solid #dfe8f5 !important;
    box-shadow:none !important;
}

.zio-contact-form-head{
    margin-bottom:20px !important;
}

.zio-contact-form-head span{
    display:block !important;
    margin-bottom:7px !important;
    color:var(--zio-blue) !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.055em !important;
    text-transform:uppercase !important;
}

.zio-contact-form-head h2{
    margin:0 0 7px !important;
    color:var(--zio-navy) !important;
    font-size:23px !important;
    line-height:1.32 !important;
    font-weight:500 !important;
}

.zio-contact-form-head p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    font-size:13.5px !important;
    line-height:1.65 !important;
}

.zio-contact-form input,
.zio-contact-form textarea{
    border-radius:13px !important;
    border:1px solid #d9e4f2 !important;
    background:#ffffff !important;
    font-size:13px !important;
    font-weight:400 !important;
    box-shadow:none !important;
}

.zio-contact-form button{
    min-height:42px !important;
    padding:0 19px !important;
    border-radius:999px !important;
    font-size:12px !important;
    font-weight:500 !important;
}

/* News & Article di halaman company: diberi napas dan background dipisah */
.company-latest-articles-section{
    position:relative !important;
    margin-top:82px !important;
    padding-top:96px !important;
    padding-bottom:104px !important;
    background:linear-gradient(180deg, #f6f8fc 0%, #eef3fa 100%) !important;
    border-top:1px solid #e4ebf5 !important;
}

.company-latest-articles-section::before{
    content:"" !important;
    position:absolute !important;
    left:0 !important;
    right:0 !important;
    top:-82px !important;
    height:82px !important;
    background:#ffffff !important;
    pointer-events:none !important;
}

.company-latest-articles-head{
    max-width:760px !important;
    margin:0 auto 46px !important;
    text-align:center !important;
}

.company-latest-articles-head h2{
    font-size:26px !important;
    line-height:1.32 !important;
    font-weight:500 !important;
}

.company-latest-articles-head p{
    max-width:690px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    font-size:13.5px !important;
    line-height:1.7 !important;
}

.company-latest-articles-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:24px !important;
    max-width:880px !important;
    margin:0 auto !important;
}

.company-latest-article-card{
    border-radius:22px !important;
    background:#ffffff !important;
    border:1px solid #dfe8f5 !important;
    box-shadow:0 14px 34px rgba(16,24,40,.055) !important;
    overflow:hidden !important;
}

.company-latest-article-image{
    height:220px !important;
    background:#eef3f8 !important;
    overflow:hidden !important;
}

.company-latest-article-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
}

.company-latest-article-body{
    padding:20px 22px 22px !important;
}

.company-latest-article-body h3{
    font-size:18px !important;
    line-height:1.38 !important;
    font-weight:500 !important;
    margin:0 0 10px !important;
}

.company-latest-article-body p{
    font-size:13px !important;
    line-height:1.68 !important;
}

@media(max-width:1050px){
    .company-final-card{
        padding:30px !important;
    }

    .company-contact-boxes,
    .company-latest-articles-grid{
        grid-template-columns:1fr !important;
    }
}

@media(max-width:768px){
    .company-final-page{
        padding-top:48px !important;
        padding-bottom:72px !important;
    }

    .company-final-card{
        padding:22px !important;
        border-radius:24px !important;
    }

    .company-map-head{
        grid-template-columns:1fr !important;
        padding:20px !important;
    }

    .company-map-open{
        justify-self:start !important;
    }

    .company-map-frame{
        height:260px !important;
    }

    .company-contact-boxes{
        grid-template-columns:1fr !important;
    }

    .zio-contact-form-wrap{
        padding:22px !important;
    }

    .company-latest-articles-section{
        margin-top:62px !important;
        padding-top:76px !important;
        padding-bottom:82px !important;
    }

    .company-latest-articles-section::before{
        top:-62px !important;
        height:62px !important;
    }

    .company-latest-article-image{
        height:200px !important;
    }
}

/* =========================================================
   COMPANY PAGE SOLID LAYOUT + ARTICLE GAP FIX
   ========================================================= */

/* Area halaman informasi perusahaan dibuat lebih padat */
.company-final-page{
    padding-top:48px !important;
    padding-bottom:48px !important;
    background:#ffffff !important;
}

/* Sidebar dan konten kanan dibuat menempel */
.company-final-grid{
    grid-template-columns:250px minmax(0, 1fr) !important;
    gap:0 !important;
    align-items:stretch !important;
    max-width:1180px !important;
    margin-left:auto !important;
    margin-right:auto !important;
}

/* Sidebar kiri jadi bagian dari satu container */
.company-final-sidebar{
    position:sticky !important;
    top:112px !important;
    align-self:flex-start !important;
    min-height:100% !important;
    padding:26px 24px !important;
    border:1px solid #dfe8f5 !important;
    border-right:0 !important;
    border-radius:26px 0 0 26px !important;
    background:#ffffff !important;
    box-shadow:0 18px 48px rgba(16,24,40,.055) !important;
}

/* Konten kanan menempel dengan sidebar */
.company-final-card{
    padding:32px 34px 36px !important;
    border:1px solid #dfe8f5 !important;
    border-radius:0 26px 26px 0 !important;
    background:#ffffff !important;
    box-shadow:0 18px 48px rgba(16,24,40,.055) !important;
}

/* Hilangkan kesan kotak-kotak terlalu banyak */
.company-final-summary,
.company-map-card,
.company-contact-boxes > div,
.zio-contact-form-wrap,
.company-feature-grid,
.company-standard-grid > div,
.company-core-grid > div,
.company-business-grid > div,
.company-vision-card,
.company-qc-flow > div,
.company-rnd-timeline > div,
.company-org-box,
.company-group-highlight{
    box-shadow:none !important;
}

/* Summary jangan terlalu seperti kotak besar */
.company-final-summary{
    margin-bottom:22px !important;
    padding:18px 20px !important;
    border-radius:16px !important;
    background:#f8fbff !important;
}

/* Gambar perusahaan lebih solid di dalam container */
.company-final-image{
    margin-bottom:24px !important;
    border-radius:18px !important;
}

.company-final-image img{
    height:360px !important;
}

/* Feature tentang kami jangan terlihat seperti 3 kotak terpisah besar */
.company-feature-grid{
    margin-top:22px !important;
    margin-bottom:24px !important;
    border-radius:18px !important;
    background:#f8fbff !important;
}

/* Konten paragraf dibuat menyatu */
.company-final-content{
    margin-top:22px !important;
    padding-top:22px !important;
}

/* Kotak kosong pada kontak dimatikan */
.company-final-content:empty{
    display:none !important;
}

.company-final-content:has(+ .company-map-card){
    display:none !important;
}

/* Map kontak lebih rapi dan tidak terlalu turun */
.company-map-card{
    margin-top:22px !important;
    margin-bottom:24px !important;
    border-radius:20px !important;
}

.company-map-head{
    padding:20px 22px !important;
}

.company-map-frame{
    height:280px !important;
}

/* Kotak email telepon alamat lebih rapat */
.company-contact-boxes{
    margin-top:22px !important;
    margin-bottom:24px !important;
    gap:12px !important;
}

.company-contact-boxes > div{
    padding:18px !important;
    border-radius:18px !important;
}

/* Form kontak tidak terlalu tinggi */
.zio-contact-form-wrap{
    margin-top:24px !important;
    padding:24px !important;
    border-radius:20px !important;
}

/* =========================================================
   Artikel terbaru dinaikkan, jangan terlalu jauh dari konten
   ========================================================= */

.company-latest-articles-section,
.home-admin-article-section{
    padding-top:58px !important;
    padding-bottom:78px !important;
    margin-top:0 !important;
    background:#f3f6fb !important;
}

/* Kalau artikel muncul setelah halaman informasi perusahaan */
.company-final-page + .company-latest-articles-section,
.company-final-page + .home-admin-article-section{
    padding-top:54px !important;
}

/* Heading artikel jangan terlalu turun */
.company-latest-articles-section .home-admin-section-head,
.home-admin-article-section .home-admin-section-head{
    margin-bottom:34px !important;
}

/* Card artikel dibuat naik dan lebih rapat */
.company-latest-articles-section .home-admin-article-grid,
.home-admin-article-section .home-admin-article-grid{
    margin-top:0 !important;
    padding-bottom:0 !important;
}

/* Footer jangan terlalu jauh dari artikel */
.site-footer,
.footer-section{
    margin-top:0 !important;
}

/* Tablet */
@media(max-width:1100px){
    .company-final-grid{
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .company-final-sidebar{
        position:relative !important;
        top:auto !important;
        border-right:1px solid #dfe8f5 !important;
        border-radius:24px !important;
    }

    .company-final-card{
        border-radius:24px !important;
    }
}

/* Mobile */
@media(max-width:768px){
    .company-final-page{
        padding-top:36px !important;
        padding-bottom:38px !important;
    }

    .company-final-sidebar{
        padding:20px !important;
    }

    .company-final-card{
        padding:24px 20px 28px !important;
    }

    .company-final-image img{
        height:250px !important;
    }

    .company-map-frame{
        height:240px !important;
    }

    .company-latest-articles-section,
    .home-admin-article-section{
        padding-top:46px !important;
        padding-bottom:64px !important;
    }
}

/* =========================================================
   HOME SOLUTION SECTION - SOLID / NO ROUNDED / FULL WHITE
   ========================================================= */

.home-admin-solution-section{
    background:#ffffff !important;
    padding:72px 0 72px !important;
    position:relative !important;
    overflow:hidden !important;
}

.home-admin-solution-section::before,
.home-admin-solution-section::after{
    display:none !important;
}

.home-admin-solution-section .site-container{
    max-width:1320px !important;
    width:100% !important;
    padding-left:24px !important;
    padding-right:24px !important;
}

/* Judul section */
.home-admin-solution-section .home-admin-section-head{
    text-align:center !important;
    margin-bottom:36px !important;
}

.home-admin-solution-section .home-admin-section-head h2{
    margin-bottom:10px !important;
}

.home-admin-solution-section .home-admin-section-head p{
    max-width:760px !important;
    margin:0 auto !important;
}

/* Container utama kiri + kanan dibuat full putih dan solid */
.home-admin-solution-wrap,
.home-admin-solution-box,
.home-admin-solution-shell,
.home-admin-solution-layout{
    display:grid !important;
    grid-template-columns:1.05fr 1fr !important;
    gap:0 !important;
    background:#ffffff !important;
    border:1px solid #dbe5f2 !important;
    border-radius:0 !important;
    overflow:hidden !important;
    box-shadow:none !important;
}

/* Panel kiri */
.home-admin-solution-left,
.home-admin-solution-intro,
.home-admin-solution-main{
    background:#ffffff !important;
    padding:34px 34px 28px !important;
    border-right:1px solid #dbe5f2 !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/* Badge kecil kiri */
.home-admin-solution-left .home-admin-solution-label,
.home-admin-solution-intro .home-admin-solution-label,
.home-admin-solution-main .home-admin-solution-label{
    display:inline-block !important;
    padding:6px 12px !important;
    border:1px solid #dbe5f2 !important;
    border-radius:0 !important;
    background:#f7faff !important;
    margin-bottom:16px !important;
}

/* Judul kiri */
.home-admin-solution-left h3,
.home-admin-solution-intro h3,
.home-admin-solution-main h3{
    margin-bottom:18px !important;
    line-height:1.35 !important;
}

/* List benefit kiri */
.home-admin-solution-left .home-admin-solution-points,
.home-admin-solution-intro .home-admin-solution-points,
.home-admin-solution-main .home-admin-solution-points{
    display:grid !important;
    gap:12px !important;
    margin-top:24px !important;
}

.home-admin-solution-left .home-admin-solution-points li,
.home-admin-solution-intro .home-admin-solution-points li,
.home-admin-solution-main .home-admin-solution-points li{
    display:flex !important;
    align-items:flex-start !important;
    gap:12px !important;
    padding:14px 14px !important;
    border:1px solid #dbe5f2 !important;
    border-radius:0 !important;
    background:#f9fbff !important;
    box-shadow:none !important;
}

/* Gambar / sketsa bawah kiri */
.home-admin-solution-left .home-admin-solution-figure,
.home-admin-solution-intro .home-admin-solution-figure,
.home-admin-solution-main .home-admin-solution-figure{
    margin-top:22px !important;
    padding:18px !important;
    border:1px solid #dbe5f2 !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:none !important;
}

/* Panel kanan */
.home-admin-solution-right,
.home-admin-solution-list,
.home-admin-solution-cards{
    background:#ffffff !important;
    padding:28px !important;
    border-radius:0 !important;
    box-shadow:none !important;
}

/* Card kanan */
.home-admin-solution-right .home-admin-solution-card,
.home-admin-solution-list .home-admin-solution-card,
.home-admin-solution-cards .home-admin-solution-card{
    display:flex !important;
    align-items:center !important;
    gap:18px !important;
    padding:22px 20px !important;
    margin-bottom:14px !important;
    border:1px solid #dbe5f2 !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:none !important;
    position:relative !important;
}

.home-admin-solution-right .home-admin-solution-card:last-child,
.home-admin-solution-list .home-admin-solution-card:last-child,
.home-admin-solution-cards .home-admin-solution-card:last-child{
    margin-bottom:0 !important;
}

/* Hilangkan lingkaran / oval dekorasi */
.home-admin-solution-card::before,
.home-admin-solution-card::after,
.home-admin-solution-left::before,
.home-admin-solution-left::after,
.home-admin-solution-right::before,
.home-admin-solution-right::after,
.home-admin-solution-intro::before,
.home-admin-solution-intro::after,
.home-admin-solution-main::before,
.home-admin-solution-main::after{
    display:none !important;
    content:none !important;
}

/* Icon box kanan */
.home-admin-solution-card .solution-icon,
.home-admin-solution-card .home-admin-solution-icon,
.home-admin-solution-card .solution-card-icon{
    width:64px !important;
    min-width:64px !important;
    height:64px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid #dbe5f2 !important;
    border-radius:0 !important;
    background:#f8fbff !important;
    box-shadow:none !important;
}

/* Label solution 01/02/03 */
.home-admin-solution-card .solution-badge,
.home-admin-solution-card .home-admin-solution-badge,
.home-admin-solution-card .solution-number{
    display:inline-block !important;
    padding:5px 10px !important;
    border:1px solid #dbe5f2 !important;
    border-radius:0 !important;
    background:#f7faff !important;
    margin-bottom:10px !important;
}

/* Semua sudut dipaksa kotak */
.home-admin-solution-section *,
.home-admin-solution-section *::before,
.home-admin-solution-section *::after{
    border-radius:0 !important;
}

/* Mobile */
@media (max-width: 991.98px){
    .home-admin-solution-wrap,
    .home-admin-solution-box,
    .home-admin-solution-shell,
    .home-admin-solution-layout{
        grid-template-columns:1fr !important;
    }

    .home-admin-solution-left,
    .home-admin-solution-intro,
    .home-admin-solution-main{
        border-right:0 !important;
        border-bottom:1px solid #dbe5f2 !important;
    }

    .home-admin-solution-right,
    .home-admin-solution-list,
    .home-admin-solution-cards{
        padding:20px !important;
    }
}

@media (max-width: 767.98px){
    .home-admin-solution-section{
        padding:56px 0 !important;
    }

    .home-admin-solution-section .site-container{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .home-admin-solution-left,
    .home-admin-solution-intro,
    .home-admin-solution-main{
        padding:22px 20px !important;
    }

    .home-admin-solution-right .home-admin-solution-card,
    .home-admin-solution-list .home-admin-solution-card,
    .home-admin-solution-cards .home-admin-solution-card{
        align-items:flex-start !important;
        padding:18px 16px !important;
    }
}

/* =========================================================
   ZIOFLEX DOWNLOAD PAGE CLEAN MODERN FIX
   ========================================================= */

/* Area utama halaman download */
.download-section,
.download-page-section,
.document-section,
.document-library-section,
.download-center-section{
    padding:72px 0 82px !important;
    background:#ffffff !important;
}

/* Container halaman download */
.download-section .site-container,
.download-page-section .site-container,
.document-section .site-container,
.document-library-section .site-container,
.download-center-section .site-container{
    max-width:1180px !important;
}

/* Heading halaman download */
.download-section .section-head,
.download-page-section .section-head,
.document-section .section-head,
.document-library-section .section-head,
.download-center-section .section-head,
.download-section .inner-section-head,
.download-page-section .inner-section-head{
    margin-bottom:34px !important;
    max-width:760px !important;
}

.download-section h1,
.download-section h2,
.download-page-section h1,
.download-page-section h2,
.document-section h1,
.document-section h2,
.document-library-section h1,
.document-library-section h2,
.download-center-section h1,
.download-center-section h2{
    margin-bottom:10px !important;
}

/* Grid dokumen */
.download-grid,
.download-document-grid,
.document-grid,
.download-list,
.document-list{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:18px !important;
    align-items:stretch !important;
}

/* Card dokumen */
.download-card,
.download-document-card,
.document-card,
.download-item,
.document-item{
    position:relative !important;
    min-height:190px !important;
    padding:24px !important;
    border:1px solid #dfe8f5 !important;
    border-radius:0 !important;
    background:#ffffff !important;
    box-shadow:0 14px 34px rgba(16,24,40,.055) !important;
    overflow:hidden !important;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

/* Aksen kecil atas card */
.download-card::before,
.download-document-card::before,
.document-card::before,
.download-item::before,
.document-item::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    right:0 !important;
    height:3px !important;
    background:linear-gradient(90deg, var(--zio-blue), rgba(23,43,216,.12)) !important;
}

/* Hover */
.download-card:hover,
.download-document-card:hover,
.document-card:hover,
.download-item:hover,
.document-item:hover{
    transform:translateY(-4px) !important;
    border-color:#cbd9ee !important;
    box-shadow:0 22px 46px rgba(16,24,40,.085) !important;
}

/* Label PDF / kategori */
.download-card small,
.download-document-card small,
.document-card small,
.download-item small,
.document-item small,
.download-card span,
.download-document-card span,
.document-card span{
    display:inline-flex !important;
    align-items:center !important;
    min-height:26px !important;
    padding:0 10px !important;
    margin-bottom:12px !important;
    border:1px solid #dbe6ff !important;
    background:#f3f6ff !important;
    color:var(--zio-blue) !important;
    border-radius:0 !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
}

/* Icon PDF kalau ada */
.download-card i,
.download-document-card i,
.document-card i,
.download-item i,
.document-item i{
    color:var(--zio-blue) !important;
}

/* Judul dokumen */
.download-card h3,
.download-document-card h3,
.document-card h3,
.download-item h3,
.document-item h3{
    margin:0 0 10px !important;
    color:var(--zio-navy) !important;
    line-height:1.35 !important;
}

/* Deskripsi dokumen */
.download-card p,
.download-document-card p,
.document-card p,
.download-item p,
.document-item p{
    margin:0 0 18px !important;
    color:var(--zio-muted) !important;
    line-height:1.7 !important;
}

/* Tombol download */
.download-card a,
.download-document-card a,
.document-card a,
.download-item a,
.document-item a,
.download-card button,
.download-document-card button,
.document-card button,
.download-item button,
.document-item button{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:8px !important;
    min-height:38px !important;
    padding:0 15px !important;
    border-radius:0 !important;
    border:1px solid var(--zio-blue) !important;
    background:var(--zio-blue) !important;
    color:#ffffff !important;
    text-decoration:none !important;
    cursor:pointer !important;
}

/* Tombol disabled / file belum upload */
.download-card .disabled,
.download-document-card .disabled,
.document-card .disabled,
.download-item .disabled,
.document-item .disabled,
.download-card button:disabled,
.download-document-card button:disabled,
.document-card button:disabled,
.download-item button:disabled,
.document-item button:disabled{
    border-color:#d8e1ee !important;
    background:#f3f6fb !important;
    color:#8a97ad !important;
    cursor:not-allowed !important;
}

/* Kalau tombol lama berbentuk input/button bawaan browser */
.download-card input[type="button"],
.download-document-card input[type="button"],
.document-card input[type="button"],
.download-item input[type="button"],
.document-item input[type="button"]{
    appearance:none !important;
    -webkit-appearance:none !important;
    border-radius:0 !important;
    border:1px solid #d8e1ee !important;
    background:#f3f6fb !important;
    color:#8a97ad !important;
    padding:9px 14px !important;
}

/* Section bantuan teknis bawah download jangan terlalu mepet */
.download-section + .technical-assistance-section,
.download-page-section + .technical-assistance-section,
.document-section + .technical-assistance-section,
.document-library-section + .technical-assistance-section,
.download-center-section + .technical-assistance-section,
.download-section + .home-admin-cta-section,
.download-page-section + .home-admin-cta-section,
.document-section + .home-admin-cta-section{
    padding-top:78px !important;
}

/* Kalau halaman download langsung ketemu CTA global */
.zio-technical-assistance,
.technical-assistance-section{
    margin-top:0 !important;
}

/* Tablet */
@media(max-width:1100px){
    .download-grid,
    .download-document-grid,
    .document-grid,
    .download-list,
    .document-list{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media(max-width:768px){
    .download-section,
    .download-page-section,
    .document-section,
    .document-library-section,
    .download-center-section{
        padding:52px 0 64px !important;
    }

    .download-grid,
    .download-document-grid,
    .document-grid,
    .download-list,
    .document-list{
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    .download-card,
    .download-document-card,
    .document-card,
    .download-item,
    .document-item{
        min-height:auto !important;
        padding:20px !important;
    }
}

/* =========================================================
   ZIOFLEX ARTICLE / NEWS PAGE MODERN FIX
   ========================================================= */

/* Section utama halaman artikel */
.news-page-section,
.article-page-section,
.blog-page-section,
.news-list-section,
.article-list-section,
.zio-news-section,
.zio-article-section{
    padding:72px 0 88px !important;
    background:#ffffff !important;
}

/* Container artikel lebih ideal */
.news-page-section .site-container,
.article-page-section .site-container,
.blog-page-section .site-container,
.news-list-section .site-container,
.article-list-section .site-container,
.zio-news-section .site-container,
.zio-article-section .site-container{
    max-width:1180px !important;
}

/* Heading artikel */
.news-page-section .section-head,
.article-page-section .section-head,
.blog-page-section .section-head,
.news-list-section .section-head,
.article-list-section .section-head,
.zio-news-section .section-head,
.zio-article-section .section-head,
.news-page-section .inner-section-head,
.article-page-section .inner-section-head,
.blog-page-section .inner-section-head{
    max-width:760px !important;
    margin-bottom:38px !important;
}

/* Kalau halaman artikel memakai heading biasa */
.news-page-section h2,
.article-page-section h2,
.blog-page-section h2,
.news-list-section h2,
.article-list-section h2,
.zio-news-section h2,
.zio-article-section h2{
    margin-bottom:10px !important;
}

/* Grid artikel */
.news-grid,
.article-grid,
.blog-grid,
.news-list,
.article-list,
.zio-news-grid,
.zio-article-grid,
.article-card-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:22px !important;
    align-items:stretch !important;
}

/* Card artikel */
.news-card,
.article-card,
.blog-card,
.zio-news-card,
.zio-article-card,
.article-list-card,
.news-list-card{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:100% !important;
    border:1px solid #dfe8f5 !important;
    border-radius:0 !important;
    background:#ffffff !important;
    overflow:hidden !important;
    text-decoration:none !important;
    box-shadow:0 16px 38px rgba(16,24,40,.055) !important;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.news-card:hover,
.article-card:hover,
.blog-card:hover,
.zio-news-card:hover,
.zio-article-card:hover,
.article-list-card:hover,
.news-list-card:hover{
    transform:translateY(-5px) !important;
    border-color:#cbd9ee !important;
    box-shadow:0 24px 52px rgba(16,24,40,.09) !important;
}

/* Area gambar artikel */
.news-card img,
.article-card img,
.blog-card img,
.zio-news-card img,
.zio-article-card img,
.article-list-card img,
.news-list-card img{
    width:100% !important;
    height:210px !important;
    display:block !important;
    object-fit:cover !important;
    background:
        linear-gradient(rgba(23,43,216,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(23,43,216,.035) 1px, transparent 1px),
        #f3f6fb !important;
    background-size:24px 24px !important;
    border-bottom:1px solid #e4edf8 !important;
}

/* Isi card */
.news-card > div,
.article-card > div,
.blog-card > div,
.zio-news-card > div,
.zio-article-card > div,
.article-list-card > div,
.news-list-card > div{
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    padding:22px !important;
}

/* Kategori / tanggal */
.news-card small,
.article-card small,
.blog-card small,
.zio-news-card small,
.zio-article-card small,
.article-list-card small,
.news-list-card small,
.news-card span,
.article-card span,
.blog-card span{
    display:inline-flex !important;
    align-self:flex-start !important;
    min-height:25px !important;
    align-items:center !important;
    padding:0 10px !important;
    margin-bottom:12px !important;
    border:1px solid #dbe6ff !important;
    background:#f3f6ff !important;
    color:var(--zio-blue) !important;
    border-radius:0 !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
}

/* Judul artikel */
.news-card h3,
.article-card h3,
.blog-card h3,
.zio-news-card h3,
.zio-article-card h3,
.article-list-card h3,
.news-list-card h3{
    margin:0 0 11px !important;
    color:var(--zio-navy) !important;
    line-height:1.35 !important;
    font-weight:500 !important;
}

/* Deskripsi */
.news-card p,
.article-card p,
.blog-card p,
.zio-news-card p,
.zio-article-card p,
.article-list-card p,
.news-list-card p{
    margin:0 0 18px !important;
    color:var(--zio-muted) !important;
    line-height:1.75 !important;
}

/* Link baca artikel */
.news-card a,
.article-card a,
.blog-card a,
.zio-news-card a,
.zio-article-card a,
.article-list-card a,
.news-list-card a,
.news-card .read-more,
.article-card .read-more,
.blog-card .read-more{
    margin-top:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    gap:8px !important;
    color:var(--zio-blue) !important;
    text-decoration:none !important;
    font-weight:500 !important;
}

/* Kalau link utama adalah card, teks baca artikel di dalam card */
.news-card strong:last-child,
.article-card strong:last-child,
.blog-card strong:last-child{
    margin-top:auto !important;
    color:var(--zio-blue) !important;
    font-weight:500 !important;
}

/* Hero artikel dibuat lebih padat dan premium */
.news-hero,
.article-hero,
.blog-hero,
.page-hero.article-page-hero,
.inner-hero{
    min-height:300px !important;
}

/* CTA bawah halaman artikel jangan terlalu jauh */
.news-page-section + .technical-assistance-section,
.article-page-section + .technical-assistance-section,
.blog-page-section + .technical-assistance-section,
.news-list-section + .technical-assistance-section,
.article-list-section + .technical-assistance-section,
.zio-news-section + .technical-assistance-section,
.zio-article-section + .technical-assistance-section{
    padding-top:70px !important;
}

/* Section knowledge center bawah */
.technical-assistance-section,
.zio-technical-assistance{
    background:#f3f6fb !important;
}

/* Jika halaman artikel masih pakai card homepage */
.home-admin-article-section{
    padding-top:72px !important;
    padding-bottom:88px !important;
}

.home-admin-article-grid{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:22px !important;
    max-width:900px !important;
}

.home-admin-article-card{
    border-radius:0 !important;
    box-shadow:0 16px 38px rgba(16,24,40,.055) !important;
}

.home-admin-article-card img{
    height:220px !important;
    object-fit:cover !important;
}

/* Tablet */
@media(max-width:1100px){
    .news-grid,
    .article-grid,
    .blog-grid,
    .news-list,
    .article-list,
    .zio-news-grid,
    .zio-article-grid,
    .article-card-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }
}

/* Mobile */
@media(max-width:768px){
    .news-page-section,
    .article-page-section,
    .blog-page-section,
    .news-list-section,
    .article-list-section,
    .zio-news-section,
    .zio-article-section{
        padding:52px 0 66px !important;
    }

    .news-grid,
    .article-grid,
    .blog-grid,
    .news-list,
    .article-list,
    .zio-news-grid,
    .zio-article-grid,
    .article-card-grid,
    .home-admin-article-grid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .news-card img,
    .article-card img,
    .blog-card img,
    .zio-news-card img,
    .zio-article-card img,
    .article-list-card img,
    .news-list-card img,
    .home-admin-article-card img{
        height:200px !important;
    }

    .news-card > div,
    .article-card > div,
    .blog-card > div,
    .zio-news-card > div,
    .zio-article-card > div,
    .article-list-card > div,
    .news-list-card > div{
        padding:20px !important;
    }
}

/* =========================================================
   ZIOFLEX ARTICLE DETAIL PAGE - CLEAN ELEGANT FIX
   ========================================================= */

/* Hero detail artikel dibuat lebih elegan */
.article-detail-hero,
.news-detail-hero,
.blog-detail-hero,
.article-hero,
.news-hero{
    position:relative !important;
    min-height:360px !important;
    display:flex !important;
    align-items:center !important;
    background-size:cover !important;
    background-position:center !important;
    overflow:hidden !important;
}

.article-detail-hero::before,
.news-detail-hero::before,
.blog-detail-hero::before,
.article-hero::before,
.news-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(90deg, rgba(7,14,75,.88) 0%, rgba(7,14,75,.68) 48%, rgba(7,14,75,.35) 100%) !important;
    z-index:1 !important;
}

.article-detail-hero > *,
.news-detail-hero > *,
.blog-detail-hero > *,
.article-hero > *,
.news-hero > *{
    position:relative !important;
    z-index:2 !important;
}

.article-detail-hero .site-container,
.news-detail-hero .site-container,
.blog-detail-hero .site-container,
.article-hero .site-container,
.news-hero .site-container{
    max-width:1180px !important;
}

.article-detail-hero span,
.news-detail-hero span,
.blog-detail-hero span,
.article-hero span,
.news-hero span{
    display:inline-flex !important;
    align-items:center !important;
    min-height:30px !important;
    padding:0 13px !important;
    margin-bottom:16px !important;
    border:1px solid rgba(255,255,255,.22) !important;
    background:rgba(255,255,255,.10) !important;
    color:#ffffff !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
}

.article-detail-hero h1,
.news-detail-hero h1,
.blog-detail-hero h1,
.article-hero h1,
.news-hero h1{
    max-width:850px !important;
    color:#ffffff !important;
    margin:0 0 14px !important;
}

.article-detail-hero p,
.news-detail-hero p,
.blog-detail-hero p,
.article-hero p,
.news-hero p{
    max-width:760px !important;
    color:rgba(255,255,255,.86) !important;
    margin:0 !important;
}

/* Area detail artikel */
.article-detail-section,
.news-detail-section,
.blog-detail-section,
.article-show-section,
.news-show-section{
    padding:72px 0 82px !important;
    background:#ffffff !important;
}

.article-detail-section .site-container,
.news-detail-section .site-container,
.blog-detail-section .site-container,
.article-show-section .site-container,
.news-show-section .site-container{
    max-width:1180px !important;
}

/* Layout artikel + related */
.article-detail-layout,
.news-detail-layout,
.blog-detail-layout,
.article-show-layout,
.news-show-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 330px !important;
    gap:34px !important;
    align-items:start !important;
}

/* Konten artikel dibuat seperti container solid */
.article-detail-content,
.news-detail-content,
.blog-detail-content,
.article-show-content,
.news-show-content,
.article-content,
.news-content{
    padding:34px !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    box-shadow:0 18px 44px rgba(16,24,40,.055) !important;
}

/* Hilangkan gambar kecil rusak / duplicate image di awal konten */
.article-detail-content > img:first-child,
.news-detail-content > img:first-child,
.blog-detail-content > img:first-child,
.article-show-content > img:first-child,
.news-show-content > img:first-child,
.article-content > img:first-child,
.news-content > img:first-child{
    display:none !important;
}

/* Paragraf artikel */
.article-detail-content p,
.news-detail-content p,
.blog-detail-content p,
.article-show-content p,
.news-show-content p,
.article-content p,
.news-content p{
    margin:0 0 18px !important;
    color:var(--zio-muted) !important;
    line-height:1.85 !important;
}

/* Catatan dalam artikel dibuat lebih rapi */
.article-detail-content strong,
.news-detail-content strong,
.blog-detail-content strong,
.article-show-content strong,
.news-show-content strong,
.article-content strong,
.news-content strong{
    color:var(--zio-navy) !important;
    font-weight:600 !important;
}

.article-detail-content p:has(strong),
.news-detail-content p:has(strong),
.blog-detail-content p:has(strong),
.article-show-content p:has(strong),
.news-show-content p:has(strong),
.article-content p:has(strong),
.news-content p:has(strong){
    padding:18px 20px !important;
    background:#f8fbff !important;
    border:1px solid #e4edf8 !important;
    margin:24px 0 !important;
}

/* Related artikel kanan */
.article-related,
.news-related,
.blog-related,
.related-articles,
.article-sidebar,
.news-sidebar{
    padding:24px !important;
    border:1px solid #dfe8f5 !important;
    background:#f8fbff !important;
    box-shadow:0 18px 44px rgba(16,24,40,.045) !important;
}

.article-related h2,
.news-related h2,
.blog-related h2,
.related-articles h2,
.article-sidebar h2,
.news-sidebar h2,
.article-related h3,
.news-related h3,
.blog-related h3,
.related-articles h3,
.article-sidebar h3,
.news-sidebar h3{
    margin:0 0 18px !important;
    color:var(--zio-navy) !important;
}

/* Link artikel terkait */
.article-related a,
.news-related a,
.blog-related a,
.related-articles a,
.article-sidebar a,
.news-sidebar a{
    display:block !important;
    padding:15px 0 !important;
    border-bottom:1px solid #e1e9f5 !important;
    color:var(--zio-navy) !important;
    text-decoration:none !important;
    line-height:1.5 !important;
}

.article-related a:last-child,
.news-related a:last-child,
.blog-related a:last-child,
.related-articles a:last-child,
.article-sidebar a:last-child,
.news-sidebar a:last-child{
    border-bottom:0 !important;
}

.article-related a:hover,
.news-related a:hover,
.blog-related a:hover,
.related-articles a:hover,
.article-sidebar a:hover,
.news-sidebar a:hover{
    color:var(--zio-blue) !important;
}

/* Konsultasi teknis di bawah artikel dibuat lebih premium */
.article-consultation,
.news-consultation,
.blog-consultation,
.article-cta,
.news-cta{
    margin-top:36px !important;
    padding:28px 30px !important;
    border:1px solid #dfe8f5 !important;
    background:#f8fbff !important;
}

.article-consultation span,
.news-consultation span,
.blog-consultation span,
.article-cta span,
.news-cta span{
    display:inline-flex !important;
    margin-bottom:8px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
}

.article-consultation h2,
.news-consultation h2,
.blog-consultation h2,
.article-cta h2,
.news-cta h2{
    margin:0 0 8px !important;
}

.article-consultation p,
.news-consultation p,
.blog-consultation p,
.article-cta p,
.news-cta p{
    margin:0 !important;
}

/* CTA Knowledge Center bawah jangan terlalu mepet */
.article-detail-section + .technical-assistance-section,
.news-detail-section + .technical-assistance-section,
.blog-detail-section + .technical-assistance-section,
.article-show-section + .technical-assistance-section,
.news-show-section + .technical-assistance-section{
    padding-top:74px !important;
    padding-bottom:78px !important;
    background:#f3f6fb !important;
}

/* Semua sudut detail artikel lebih tegas */
.article-detail-section *,
.news-detail-section *,
.blog-detail-section *,
.article-show-section *,
.news-show-section *{
    border-radius:0 !important;
}

/* Tablet */
@media(max-width:1100px){
    .article-detail-layout,
    .news-detail-layout,
    .blog-detail-layout,
    .article-show-layout,
    .news-show-layout{
        grid-template-columns:1fr !important;
    }

    .article-related,
    .news-related,
    .blog-related,
    .related-articles,
    .article-sidebar,
    .news-sidebar{
        margin-top:8px !important;
    }
}

/* Mobile */
@media(max-width:768px){
    .article-detail-hero,
    .news-detail-hero,
    .blog-detail-hero,
    .article-hero,
    .news-hero{
        min-height:310px !important;
    }

    .article-detail-section,
    .news-detail-section,
    .blog-detail-section,
    .article-show-section,
    .news-show-section{
        padding:52px 0 62px !important;
    }

    .article-detail-content,
    .news-detail-content,
    .blog-detail-content,
    .article-show-content,
    .news-show-content,
    .article-content,
    .news-content{
        padding:24px 20px !important;
    }

    .article-related,
    .news-related,
    .blog-related,
    .related-articles,
    .article-sidebar,
    .news-sidebar{
        padding:20px !important;
    }

    .article-consultation,
    .news-consultation,
    .blog-consultation,
    .article-cta,
    .news-cta{
        padding:22px 20px !important;
    }
}

/* =========================================================
   ARTICLE GALLERY FIX
   ========================================================= */

.article-gallery{
    margin:30px 0 26px !important;
    padding:24px !important;
    border:1px solid #dfe8f5 !important;
    background:#f8fbff !important;
}

.article-gallery > span{
    display:inline-flex !important;
    margin-bottom:8px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.05em !important;
}

.article-gallery h2{
    margin:0 0 18px !important;
}

.article-gallery-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
}

.article-gallery-grid a{
    display:block !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    overflow:hidden !important;
}

.article-gallery-grid img{
    width:100% !important;
    height:180px !important;
    display:block !important;
    object-fit:cover !important;
}

@media(max-width:768px){
    .article-gallery-grid{
        grid-template-columns:1fr !important;
    }

    .article-gallery-grid img{
        height:210px !important;
    }
}

/* =========================================================
   ZIOFLEX PORTFOLIO PAGE - MODERN CLEAN FIX
   ========================================================= */

/* Section list portfolio */
.portfolio-section,
.portfolio-page-section,
.portfolio-list-section,
.project-section,
.project-page-section{
    padding:72px 0 86px !important;
    background:#ffffff !important;
}

/* Container portfolio */
.portfolio-section .site-container,
.portfolio-page-section .site-container,
.portfolio-list-section .site-container,
.project-section .site-container,
.project-page-section .site-container{
    max-width:1180px !important;
}

/* Heading portfolio */
.portfolio-section .content-section-head,
.portfolio-page-section .content-section-head,
.portfolio-list-section .content-section-head,
.project-section .content-section-head,
.project-page-section .content-section-head{
    max-width:760px !important;
    margin-bottom:34px !important;
}

/* Grid list portfolio */
.portfolio-grid,
.project-grid,
.portfolio-list,
.project-list{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:24px !important;
    max-width:920px !important;
}

/* Card portfolio */
.portfolio-card,
.project-card,
.portfolio-item,
.project-item{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:100% !important;
    background:#ffffff !important;
    border:1px solid #dfe8f5 !important;
    border-radius:18px !important;
    overflow:hidden !important;
    text-decoration:none !important;
    box-shadow:0 18px 42px rgba(16,24,40,.06) !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.portfolio-card:hover,
.project-card:hover,
.portfolio-item:hover,
.project-item:hover{
    transform:translateY(-5px) !important;
    border-color:#cbd9ee !important;
    box-shadow:0 26px 58px rgba(16,24,40,.10) !important;
}

/* Gambar card portfolio */
.portfolio-card img,
.project-card img,
.portfolio-item img,
.project-item img{
    width:100% !important;
    height:250px !important;
    display:block !important;
    object-fit:cover !important;
    border-bottom:1px solid #e4edf8 !important;
    background:#f3f6fb !important;
}

/* Isi card portfolio */
.portfolio-card > div,
.project-card > div,
.portfolio-item > div,
.project-item > div{
    flex:1 !important;
    padding:22px 22px 24px !important;
    display:flex !important;
    flex-direction:column !important;
}

/* Kategori kecil */
.portfolio-card span,
.project-card span,
.portfolio-item span,
.project-item span,
.portfolio-card small,
.project-card small,
.portfolio-item small,
.project-item small{
    display:inline-flex !important;
    align-self:flex-start !important;
    min-height:26px !important;
    align-items:center !important;
    padding:0 10px !important;
    margin-bottom:12px !important;
    border-radius:999px !important;
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
}

/* Judul card */
.portfolio-card h3,
.project-card h3,
.portfolio-item h3,
.project-item h3{
    margin:0 0 9px !important;
    color:var(--zio-navy) !important;
    line-height:1.34 !important;
    font-weight:500 !important;
}

/* Deskripsi card */
.portfolio-card p,
.project-card p,
.portfolio-item p,
.project-item p{
    margin:0 0 16px !important;
    color:var(--zio-muted) !important;
    line-height:1.72 !important;
}

/* Link detail */
.portfolio-card strong,
.project-card strong,
.portfolio-item strong,
.project-item strong{
    margin-top:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    color:var(--zio-blue) !important;
    font-weight:500 !important;
}

/* =========================================================
   PORTFOLIO DETAIL PAGE
   ========================================================= */

.portfolio-detail-section,
.project-detail-section,
.portfolio-show-section,
.project-show-section{
    padding:72px 0 82px !important;
    background:#ffffff !important;
}

.portfolio-detail-section .site-container,
.project-detail-section .site-container,
.portfolio-show-section .site-container,
.project-show-section .site-container{
    max-width:1180px !important;
}

/* Layout detail */
.portfolio-detail-layout,
.project-detail-layout,
.portfolio-show-layout,
.project-show-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 360px !important;
    gap:28px !important;
    align-items:start !important;
}

/* Konten utama detail */
.portfolio-detail-main,
.project-detail-main,
.portfolio-show-main,
.project-show-main,
.portfolio-content,
.project-content{
    padding:32px !important;
    border:1px solid #dfe8f5 !important;
    border-radius:22px !important;
    background:#ffffff !important;
    box-shadow:0 20px 48px rgba(16,24,40,.06) !important;
}

/* Judul kecil detail */
.portfolio-detail-main > span,
.project-detail-main > span,
.portfolio-show-main > span,
.project-show-main > span,
.portfolio-content > span,
.project-content > span{
    display:inline-flex !important;
    align-items:center !important;
    min-height:28px !important;
    padding:0 11px !important;
    margin-bottom:10px !important;
    border-radius:999px !important;
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.05em !important;
}

/* Paragraph detail */
.portfolio-detail-main p,
.project-detail-main p,
.portfolio-show-main p,
.project-show-main p,
.portfolio-content p,
.project-content p{
    color:var(--zio-muted) !important;
    line-height:1.78 !important;
    margin-bottom:16px !important;
}

/* Gambar dokumentasi detail */
.portfolio-detail-main img,
.project-detail-main img,
.portfolio-show-main img,
.project-show-main img,
.portfolio-content img,
.project-content img{
    width:100% !important;
    max-height:420px !important;
    object-fit:cover !important;
    display:block !important;
    border:1px solid #dfe8f5 !important;
    border-radius:18px !important;
    margin:18px 0 22px !important;
    background:#f3f6fb !important;
}

/* Sidebar ringkasan project */
.portfolio-detail-sidebar,
.project-detail-sidebar,
.portfolio-sidebar,
.project-sidebar,
.project-summary,
.portfolio-summary{
    position:sticky !important;
    top:118px !important;
    padding:26px !important;
    border:1px solid #dfe8f5 !important;
    border-radius:22px !important;
    background:#f8fbff !important;
    box-shadow:0 18px 42px rgba(16,24,40,.055) !important;
}

.portfolio-detail-sidebar h3,
.project-detail-sidebar h3,
.portfolio-sidebar h3,
.project-sidebar h3,
.project-summary h3,
.portfolio-summary h3{
    margin:0 0 18px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

/* Item ringkasan */
.portfolio-detail-sidebar p,
.project-detail-sidebar p,
.portfolio-sidebar p,
.project-sidebar p,
.project-summary p,
.portfolio-summary p{
    padding:13px 0 !important;
    margin:0 !important;
    border-bottom:1px solid #e1e9f5 !important;
    color:var(--zio-muted) !important;
    line-height:1.6 !important;
}

.portfolio-detail-sidebar p:last-child,
.project-detail-sidebar p:last-child,
.portfolio-sidebar p:last-child,
.project-sidebar p:last-child,
.project-summary p:last-child,
.portfolio-summary p:last-child{
    border-bottom:0 !important;
}

/* Strong di sidebar */
.portfolio-detail-sidebar strong,
.project-detail-sidebar strong,
.portfolio-sidebar strong,
.project-sidebar strong,
.project-summary strong,
.portfolio-summary strong{
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

/* Tags */
.portfolio-tags,
.project-tags,
.portfolio-tag-list,
.project-tag-list{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin:20px 0 8px !important;
}

.portfolio-tags span,
.project-tags span,
.portfolio-tag-list span,
.project-tag-list span{
    display:inline-flex !important;
    align-items:center !important;
    min-height:30px !important;
    padding:0 11px !important;
    border-radius:999px !important;
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
    font-size:11px !important;
    font-weight:500 !important;
}

/* Portfolio lainnya */
.related-portfolios,
.portfolio-related,
.project-related,
.other-portfolios{
    margin-top:34px !important;
}

.related-portfolios h2,
.portfolio-related h2,
.project-related h2,
.other-portfolios h2{
    margin-bottom:18px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.related-portfolios .portfolio-grid,
.portfolio-related .portfolio-grid,
.project-related .project-grid,
.other-portfolios .portfolio-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    max-width:100% !important;
    gap:18px !important;
}

.related-portfolios .portfolio-card img,
.portfolio-related .portfolio-card img,
.project-related .project-card img,
.other-portfolios .portfolio-card img{
    height:190px !important;
}

/* CTA bawah portfolio */
.portfolio-section + .content-cta-section,
.portfolio-page-section + .content-cta-section,
.portfolio-list-section + .content-cta-section,
.portfolio-detail-section + .content-cta-section,
.project-detail-section + .content-cta-section,
.portfolio-show-section + .content-cta-section,
.project-show-section + .content-cta-section{
    padding-top:74px !important;
    padding-bottom:78px !important;
    background:#f3f6fb !important;
}

/* Box CTA supaya tidak terlalu besar */
.content-cta-box{
    border-radius:22px !important;
    box-shadow:0 18px 42px rgba(16,24,40,.055) !important;
}

/* =========================================================
   Portfolio fallback untuk struktur lama
   ========================================================= */

body:has(a[href*="/portfolio"]) .portfolio-section,
body:has(a[href*="/portfolio"]) .project-section{
    background:#ffffff !important;
}

body:has(.portfolio-card) .portfolio-grid,
body:has(.project-card) .project-grid{
    display:grid !important;
    gap:24px !important;
}

/* Tablet */
@media(max-width:1100px){
    .portfolio-detail-layout,
    .project-detail-layout,
    .portfolio-show-layout,
    .project-show-layout{
        grid-template-columns:1fr !important;
    }

    .portfolio-detail-sidebar,
    .project-detail-sidebar,
    .portfolio-sidebar,
    .project-sidebar,
    .project-summary,
    .portfolio-summary{
        position:relative !important;
        top:auto !important;
    }
}

/* Mobile */
@media(max-width:768px){
    .portfolio-section,
    .portfolio-page-section,
    .portfolio-list-section,
    .project-section,
    .project-page-section,
    .portfolio-detail-section,
    .project-detail-section,
    .portfolio-show-section,
    .project-show-section{
        padding:52px 0 64px !important;
    }

    .portfolio-grid,
    .project-grid,
    .portfolio-list,
    .project-list,
    .related-portfolios .portfolio-grid,
    .portfolio-related .portfolio-grid,
    .project-related .project-grid,
    .other-portfolios .portfolio-grid{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .portfolio-card img,
    .project-card img,
    .portfolio-item img,
    .project-item img{
        height:210px !important;
    }

    .portfolio-detail-main,
    .project-detail-main,
    .portfolio-show-main,
    .project-show-main,
    .portfolio-content,
    .project-content,
    .portfolio-detail-sidebar,
    .project-detail-sidebar,
    .portfolio-sidebar,
    .project-sidebar,
    .project-summary,
    .portfolio-summary{
        padding:22px !important;
        border-radius:18px !important;
    }

    .portfolio-detail-main img,
    .project-detail-main img,
    .portfolio-show-main img,
    .project-show-main img,
    .portfolio-content img,
    .project-content img{
        max-height:260px !important;
        border-radius:14px !important;
    }
}

/* =========================================================
   PORTFOLIO DETAIL GALLERY - CLEAN FIX
   ========================================================= */

.portfolio-gallery{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
    margin:20px 0 26px !important;
}

.portfolio-gallery a{
    display:block !important;
    overflow:hidden !important;
    border:1px solid #dfe8f5 !important;
    background:#f3f6fb !important;
    text-decoration:none !important;
}

.portfolio-gallery-main{
    grid-column:span 2 !important;
}

.portfolio-gallery img{
    width:100% !important;
    height:210px !important;
    display:block !important;
    object-fit:cover !important;
    transition:transform .22s ease !important;
}

.portfolio-gallery-main img{
    height:390px !important;
}

.portfolio-gallery a:hover img{
    transform:scale(1.035) !important;
}

.portfolio-detail-tags{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px !important;
    margin-top:12px !important;
}

.portfolio-detail-tags span{
    display:inline-flex !important;
    align-items:center !important;
    min-height:30px !important;
    padding:0 11px !important;
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
    border:1px solid #dbe6ff !important;
    font-size:11px !important;
    font-weight:500 !important;
}

.portfolio-info-list{
    display:grid !important;
    gap:0 !important;
}

.portfolio-info-list > div{
    padding:14px 0 !important;
    border-bottom:1px solid #e1e9f5 !important;
}

.portfolio-info-list > div:last-child{
    border-bottom:0 !important;
}

.portfolio-info-list span{
    display:block !important;
    margin-bottom:5px !important;
    color:var(--zio-muted) !important;
    font-size:12px !important;
}

.portfolio-info-list strong{
    display:block !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

@media(max-width:768px){
    .portfolio-gallery{
        grid-template-columns:1fr !important;
    }

    .portfolio-gallery-main{
        grid-column:span 1 !important;
    }

    .portfolio-gallery img,
    .portfolio-gallery-main img{
        height:230px !important;
    }
}

/* =========================================================
   ZIOFLEX CAREER PAGE - LIST & DETAIL CLEAN FIX
   ========================================================= */

/* Halaman list karir */
.career-section,
.career-page-section,
.career-list-section,
.job-section,
.job-list-section,
.jobs-section{
    padding:72px 0 86px !important;
    background:#ffffff !important;
}

.career-section .site-container,
.career-page-section .site-container,
.career-list-section .site-container,
.job-section .site-container,
.job-list-section .site-container,
.jobs-section .site-container{
    max-width:1180px !important;
}

/* Heading list karir */
.career-section .content-section-head,
.career-page-section .content-section-head,
.career-list-section .content-section-head,
.job-section .content-section-head,
.job-list-section .content-section-head,
.jobs-section .content-section-head{
    max-width:760px !important;
    margin-bottom:32px !important;
}

.career-section .content-section-head span,
.career-page-section .content-section-head span,
.career-list-section .content-section-head span,
.job-section .content-section-head span,
.job-list-section .content-section-head span,
.jobs-section .content-section-head span{
    display:inline-flex !important;
    margin-bottom:8px !important;
    color:var(--zio-blue) !important;
    letter-spacing:.04em !important;
    text-transform:uppercase !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.career-section .content-section-head h2,
.career-page-section .content-section-head h2,
.career-list-section .content-section-head h2,
.job-section .content-section-head h2,
.job-list-section .content-section-head h2,
.jobs-section .content-section-head h2{
    margin:0 0 8px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

/* Grid lowongan */
.career-grid,
.job-grid,
.jobs-grid,
.career-list,
.job-list{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:22px !important;
    max-width:980px !important;
}

/* Card lowongan */
.career-card,
.job-card,
.jobs-card,
.career-item,
.job-item{
    position:relative !important;
    display:flex !important;
    flex-direction:column !important;
    min-height:230px !important;
    padding:26px !important;
    border:1px solid #dfe8f5 !important;
    border-radius:22px !important;
    background:#ffffff !important;
    overflow:hidden !important;
    text-decoration:none !important;
    box-shadow:0 18px 42px rgba(16,24,40,.055) !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.career-card::before,
.job-card::before,
.jobs-card::before,
.career-item::before,
.job-item::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:100% !important;
    height:4px !important;
    background:linear-gradient(90deg, var(--zio-blue), rgba(23,43,216,.12)) !important;
}

.career-card:hover,
.job-card:hover,
.jobs-card:hover,
.career-item:hover,
.job-item:hover{
    transform:translateY(-5px) !important;
    border-color:#cbd9ee !important;
    box-shadow:0 26px 58px rgba(16,24,40,.095) !important;
}

/* Departemen */
.career-card span,
.job-card span,
.jobs-card span,
.career-item span,
.job-item span,
.career-card small,
.job-card small,
.jobs-card small,
.career-item small,
.job-item small{
    display:inline-flex !important;
    align-self:flex-start !important;
    min-height:26px !important;
    align-items:center !important;
    padding:0 10px !important;
    margin-bottom:12px !important;
    border-radius:999px !important;
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.045em !important;
    text-transform:uppercase !important;
}

/* Judul lowongan */
.career-card h3,
.job-card h3,
.jobs-card h3,
.career-item h3,
.job-item h3{
    margin:0 0 10px !important;
    color:var(--zio-navy) !important;
    line-height:1.32 !important;
    font-weight:500 !important;
}

/* Deskripsi */
.career-card p,
.job-card p,
.jobs-card p,
.career-item p,
.job-item p{
    margin:0 0 18px !important;
    color:var(--zio-muted) !important;
    line-height:1.7 !important;
}

/* Info lokasi / tipe / deadline */
.career-card .career-meta,
.job-card .career-meta,
.jobs-card .career-meta,
.career-card .job-meta,
.job-card .job-meta,
.jobs-card .job-meta,
.career-meta,
.job-meta{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:8px 12px !important;
    margin-top:auto !important;
    padding-top:16px !important;
    border-top:1px solid #e5edf8 !important;
    color:var(--zio-muted) !important;
    font-size:12px !important;
}

.career-card strong,
.job-card strong,
.jobs-card strong,
.career-item strong,
.job-item strong{
    margin-top:auto !important;
    display:inline-flex !important;
    align-items:center !important;
    color:var(--zio-blue) !important;
    font-weight:500 !important;
}

/* =========================================================
   CAREER DETAIL PAGE
   ========================================================= */

.career-detail-section,
.job-detail-section,
.career-show-section,
.job-show-section{
    padding:72px 0 84px !important;
    background:#ffffff !important;
}

.career-detail-section .site-container,
.job-detail-section .site-container,
.career-show-section .site-container,
.job-show-section .site-container{
    max-width:1180px !important;
}

/* Layout detail + form */
.career-detail-grid,
.job-detail-grid,
.career-detail-layout,
.job-detail-layout{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 460px !important;
    gap:34px !important;
    align-items:start !important;
}

/* Konten kiri detail */
.career-detail-content,
.job-detail-content,
.career-info,
.job-info{
    padding:32px !important;
    border:1px solid #dfe8f5 !important;
    border-radius:22px !important;
    background:#ffffff !important;
    box-shadow:0 18px 42px rgba(16,24,40,.055) !important;
}

.career-detail-content > span,
.job-detail-content > span,
.career-info > span,
.job-info > span{
    display:inline-flex !important;
    min-height:28px !important;
    align-items:center !important;
    padding:0 11px !important;
    margin-bottom:12px !important;
    border-radius:999px !important;
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    font-size:10px !important;
    font-weight:600 !important;
    letter-spacing:.05em !important;
}

.career-detail-content h2,
.job-detail-content h2,
.career-info h2,
.job-info h2{
    margin:0 0 10px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.career-detail-content h3,
.job-detail-content h3,
.career-info h3,
.job-info h3{
    margin:24px 0 12px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.career-detail-content p,
.job-detail-content p,
.career-info p,
.job-info p{
    margin:0 0 14px !important;
    color:var(--zio-muted) !important;
    line-height:1.75 !important;
}

/* List persyaratan / tanggung jawab */
.career-detail-content ul,
.job-detail-content ul,
.career-info ul,
.job-info ul{
    display:grid !important;
    gap:10px !important;
    margin:12px 0 0 !important;
    padding-left:0 !important;
    list-style:none !important;
}

.career-detail-content li,
.job-detail-content li,
.career-info li,
.job-info li{
    position:relative !important;
    padding:12px 14px 12px 42px !important;
    border:1px solid #e3ebf6 !important;
    border-radius:14px !important;
    background:#f8fbff !important;
    color:var(--zio-muted) !important;
    line-height:1.6 !important;
}

.career-detail-content li::before,
.job-detail-content li::before,
.career-info li::before,
.job-info li::before{
    content:"✓" !important;
    position:absolute !important;
    left:14px !important;
    top:12px !important;
    width:20px !important;
    height:20px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    border-radius:999px !important;
    background:var(--zio-blue) !important;
    color:#ffffff !important;
    font-size:11px !important;
}

/* Form lamaran kanan */
.career-apply-box,
.job-apply-box,
.career-form-box,
.job-form-box,
.application-form-box,
.apply-form-box,
.career-application-form,
.job-application-form{
    padding:30px !important;
    border:1px solid #dfe8f5 !important;
    border-radius:22px !important;
    background:#f8fbff !important;
    box-shadow:0 20px 48px rgba(16,24,40,.065) !important;
}

.career-apply-box h2,
.job-apply-box h2,
.career-form-box h2,
.job-form-box h2,
.application-form-box h2,
.apply-form-box h2,
.career-application-form h2,
.job-application-form h2{
    margin:0 0 6px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.career-apply-box p,
.job-apply-box p,
.career-form-box p,
.job-form-box p,
.application-form-box p,
.apply-form-box p,
.career-application-form p,
.job-application-form p{
    color:var(--zio-muted) !important;
    line-height:1.65 !important;
    margin-bottom:20px !important;
}

/* Form input */
.career-apply-box form,
.job-apply-box form,
.career-form-box form,
.job-form-box form,
.application-form-box form,
.apply-form-box form,
.career-application-form form,
.job-application-form form{
    display:grid !important;
    gap:15px !important;
}

.career-apply-box label,
.job-apply-box label,
.career-form-box label,
.job-form-box label,
.application-form-box label,
.apply-form-box label,
.career-application-form label,
.job-application-form label{
    display:block !important;
    margin-bottom:7px !important;
    color:var(--zio-navy) !important;
    font-size:12px !important;
    font-weight:500 !important;
}

.career-apply-box input,
.job-apply-box input,
.career-form-box input,
.job-form-box input,
.application-form-box input,
.apply-form-box input,
.career-application-form input,
.job-application-form input,
.career-apply-box textarea,
.job-apply-box textarea,
.career-form-box textarea,
.job-form-box textarea,
.application-form-box textarea,
.apply-form-box textarea,
.career-application-form textarea,
.job-application-form textarea,
.career-apply-box select,
.job-apply-box select,
.career-form-box select,
.job-form-box select,
.application-form-box select,
.apply-form-box select,
.career-application-form select,
.job-application-form select{
    width:100% !important;
    min-height:44px !important;
    padding:11px 14px !important;
    border:1px solid #d7e2f2 !important;
    border-radius:14px !important;
    background:#ffffff !important;
    color:var(--zio-navy) !important;
    outline:none !important;
}

.career-apply-box textarea,
.job-apply-box textarea,
.career-form-box textarea,
.job-form-box textarea,
.application-form-box textarea,
.apply-form-box textarea,
.career-application-form textarea,
.job-application-form textarea{
    min-height:110px !important;
    resize:vertical !important;
}

.career-apply-box input:focus,
.job-apply-box input:focus,
.career-form-box input:focus,
.job-form-box input:focus,
.application-form-box input:focus,
.apply-form-box input:focus,
.career-application-form input:focus,
.job-application-form input:focus,
.career-apply-box textarea:focus,
.job-apply-box textarea:focus,
.career-form-box textarea:focus,
.job-form-box textarea:focus,
.application-form-box textarea:focus,
.apply-form-box textarea:focus,
.career-application-form textarea:focus,
.job-application-form textarea:focus{
    border-color:var(--zio-blue) !important;
    box-shadow:0 0 0 4px rgba(23,43,216,.08) !important;
}

/* Upload file */
.career-apply-box input[type="file"],
.job-apply-box input[type="file"],
.career-form-box input[type="file"],
.job-form-box input[type="file"],
.application-form-box input[type="file"],
.apply-form-box input[type="file"],
.career-application-form input[type="file"],
.job-application-form input[type="file"]{
    padding:9px !important;
    background:#ffffff !important;
}

/* Tombol submit */
.career-apply-box button,
.job-apply-box button,
.career-form-box button,
.job-form-box button,
.application-form-box button,
.apply-form-box button,
.career-application-form button,
.job-application-form button,
.career-apply-box input[type="submit"],
.job-apply-box input[type="submit"],
.career-form-box input[type="submit"],
.job-form-box input[type="submit"],
.application-form-box input[type="submit"],
.apply-form-box input[type="submit"]{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    padding:0 20px !important;
    border:0 !important;
    border-radius:999px !important;
    background:var(--zio-blue) !important;
    color:#ffffff !important;
    font-weight:500 !important;
    cursor:pointer !important;
    box-shadow:0 14px 28px rgba(23,43,216,.18) !important;
}

/* CTA bawah karir */
.career-section + .content-cta-section,
.career-page-section + .content-cta-section,
.career-list-section + .content-cta-section,
.job-section + .content-cta-section,
.job-list-section + .content-cta-section,
.career-detail-section + .content-cta-section,
.job-detail-section + .content-cta-section,
.career-show-section + .content-cta-section,
.job-show-section + .content-cta-section{
    padding-top:74px !important;
    padding-bottom:78px !important;
    background:#f3f6fb !important;
}

/* Tablet */
@media(max-width:1100px){
    .career-detail-grid,
    .job-detail-grid,
    .career-detail-layout,
    .job-detail-layout{
        grid-template-columns:1fr !important;
    }

    .career-grid,
    .job-grid,
    .jobs-grid,
    .career-list,
    .job-list{
        max-width:100% !important;
    }
}

/* Mobile */
@media(max-width:768px){
    .career-section,
    .career-page-section,
    .career-list-section,
    .job-section,
    .job-list-section,
    .jobs-section,
    .career-detail-section,
    .job-detail-section,
    .career-show-section,
    .job-show-section{
        padding:52px 0 64px !important;
    }

    .career-grid,
    .job-grid,
    .jobs-grid,
    .career-list,
    .job-list{
        grid-template-columns:1fr !important;
        gap:16px !important;
    }

    .career-card,
    .job-card,
    .jobs-card,
    .career-item,
    .job-item,
    .career-detail-content,
    .job-detail-content,
    .career-info,
    .job-info,
    .career-apply-box,
    .job-apply-box,
    .career-form-box,
    .job-form-box,
    .application-form-box,
    .apply-form-box,
    .career-application-form,
    .job-application-form{
        padding:22px !important;
        border-radius:18px !important;
    }
}

/* =========================================================
   CAREER DETAIL HERO TEXT VISIBILITY FIX
   ========================================================= */

.career-hero,
.job-hero,
.career-detail-hero,
.job-detail-hero,
.inner-hero,
.content-hero{
    position:relative !important;
    overflow:hidden !important;
}

/* Overlay dibuat lebih gelap agar tulisan putih terbaca */
.career-hero::before,
.job-hero::before,
.career-detail-hero::before,
.job-detail-hero::before,
.inner-hero::before,
.content-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(
        90deg,
        rgba(7,14,75,.88) 0%,
        rgba(7,14,75,.70) 48%,
        rgba(7,14,75,.45) 100%
    ) !important;
    z-index:1 !important;
}

/* Semua isi hero harus di atas overlay */
.career-hero > *,
.job-hero > *,
.career-detail-hero > *,
.job-detail-hero > *,
.inner-hero > *,
.content-hero > *{
    position:relative !important;
    z-index:2 !important;
}

/* Khusus teks detail karir */
.career-hero span,
.job-hero span,
.career-detail-hero span,
.job-detail-hero span,
.inner-hero span,
.content-hero span{
    color:rgba(255,255,255,.78) !important;
    font-weight:500 !important;
    text-transform:none !important;
}

.career-hero h1,
.job-hero h1,
.career-detail-hero h1,
.job-detail-hero h1,
.inner-hero h1,
.content-hero h1{
    color:#ffffff !important;
    font-weight:500 !important;
    text-shadow:0 8px 24px rgba(0,0,0,.22) !important;
}

.career-hero p,
.job-hero p,
.career-detail-hero p,
.job-detail-hero p,
.inner-hero p,
.content-hero p{
    color:rgba(255,255,255,.88) !important;
    font-weight:400 !important;
    line-height:1.7 !important;
    text-shadow:0 6px 18px rgba(0,0,0,.18) !important;
}

/* Kalau class-nya pakai career hero content */
.career-hero-content span,
.job-hero-content span,
.career-detail-hero-content span,
.job-detail-hero-content span,
.content-hero-content span{
    color:rgba(255,255,255,.78) !important;
}

.career-hero-content h1,
.job-hero-content h1,
.career-detail-hero-content h1,
.job-detail-hero-content h1,
.content-hero-content h1{
    color:#ffffff !important;
}

.career-hero-content p,
.job-hero-content p,
.career-detail-hero-content p,
.job-detail-hero-content p,
.content-hero-content p{
    color:rgba(255,255,255,.88) !important;
}

/* =========================================================
   ZIOFLEX CSR ACTIVITY PAGE
   ========================================================= */

.csr-activity-section{
    padding:72px 0 86px !important;
    background:#ffffff !important;
}

.csr-activity-section .site-container,
.csr-related-section .site-container{
    max-width:1180px !important;
}

.csr-activity-head{
    max-width:760px !important;
    margin-bottom:34px !important;
}

.csr-activity-head span{
    display:inline-flex !important;
    margin-bottom:8px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.csr-activity-head h2{
    margin:0 0 10px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.csr-activity-head p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    line-height:1.75 !important;
}

.csr-activity-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:22px !important;
}

.csr-activity-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:100% !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    text-decoration:none !important;
    overflow:hidden !important;
    box-shadow:0 18px 42px rgba(16,24,40,.055) !important;
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.csr-activity-card:hover{
    transform:translateY(-5px) !important;
    border-color:#cbd9ee !important;
    box-shadow:0 26px 58px rgba(16,24,40,.095) !important;
}

.csr-activity-image{
    position:relative !important;
    height:235px !important;
    overflow:hidden !important;
    background:#f3f6fb !important;
}

.csr-activity-image img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
    transition:transform .22s ease !important;
}

.csr-activity-card:hover .csr-activity-image img{
    transform:scale(1.035) !important;
}

.csr-activity-date{
    position:absolute !important;
    left:18px !important;
    bottom:18px !important;
    min-width:76px !important;
    padding:10px 12px !important;
    background:#ffffff !important;
    border:1px solid #dfe8f5 !important;
    box-shadow:0 14px 30px rgba(16,24,40,.12) !important;
}

.csr-activity-date strong{
    display:block !important;
    color:var(--zio-blue) !important;
    font-size:22px !important;
    line-height:1 !important;
    font-weight:600 !important;
}

.csr-activity-date span{
    display:block !important;
    margin-top:4px !important;
    color:var(--zio-muted) !important;
    font-size:11px !important;
}

.csr-activity-body{
    flex:1 !important;
    padding:22px !important;
    display:flex !important;
    flex-direction:column !important;
}

.csr-activity-body > span{
    display:inline-flex !important;
    align-self:flex-start !important;
    margin-bottom:10px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
    font-size:10px !important;
    font-weight:600 !important;
}

.csr-activity-body h3{
    margin:0 0 10px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
    line-height:1.35 !important;
}

.csr-activity-body p{
    margin:0 0 18px !important;
    color:var(--zio-muted) !important;
    line-height:1.72 !important;
}

.csr-activity-body strong{
    margin-top:auto !important;
    color:var(--zio-blue) !important;
    font-weight:500 !important;
}

.csr-empty-card{
    grid-column:1 / -1 !important;
    padding:30px !important;
    border:1px solid #dfe8f5 !important;
    background:#f8fbff !important;
    color:var(--zio-muted) !important;
}

.csr-value-section{
    padding:76px 0 !important;
    background:#f3f6fb !important;
}

.csr-value-box{
    max-width:1180px !important;
}

.csr-value-box > div{
    padding:34px !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    box-shadow:0 18px 42px rgba(16,24,40,.055) !important;
}

.csr-value-box span{
    display:inline-flex !important;
    margin-bottom:10px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.csr-value-box h2{
    margin:0 0 12px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.csr-value-box p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    line-height:1.75 !important;
}

/* =========================================================
   CSR DETAIL
   ========================================================= */

.csr-detail-hero{
    position:relative !important;
    min-height:360px !important;
    display:flex !important;
    align-items:center !important;
    background-size:cover !important;
    background-position:center !important;
    overflow:hidden !important;
}

.csr-detail-hero::before{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(90deg, rgba(7,14,75,.88), rgba(7,14,75,.62), rgba(7,14,75,.35)) !important;
    z-index:1 !important;
}

.csr-detail-hero > *{
    position:relative !important;
    z-index:2 !important;
}

.csr-detail-hero-content{
    color:#ffffff !important;
}

.csr-detail-hero-content span{
    display:inline-flex !important;
    margin-bottom:12px !important;
    color:rgba(255,255,255,.82) !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.csr-detail-hero-content h1{
    max-width:850px !important;
    margin:0 0 12px !important;
    color:#ffffff !important;
    font-weight:500 !important;
}

.csr-detail-hero-content p{
    max-width:760px !important;
    margin:0 !important;
    color:rgba(255,255,255,.88) !important;
    line-height:1.75 !important;
}

.csr-detail-section{
    padding:72px 0 82px !important;
    background:#ffffff !important;
}

.csr-detail-grid{
    max-width:1180px !important;
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 330px !important;
    gap:28px !important;
    align-items:start !important;
}

.csr-detail-main,
.csr-detail-sidebar{
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    box-shadow:0 18px 42px rgba(16,24,40,.055) !important;
}

.csr-detail-main{
    padding:32px !important;
}

.csr-detail-label{
    display:inline-flex !important;
    margin-bottom:10px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.csr-detail-main h2,
.csr-detail-main h3,
.csr-detail-sidebar h3{
    margin:0 0 16px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.csr-detail-main h3{
    margin-top:28px !important;
}

.csr-detail-main p{
    color:var(--zio-muted) !important;
    line-height:1.82 !important;
    margin:0 0 16px !important;
}

.csr-detail-sidebar{
    position:sticky !important;
    top:118px !important;
    padding:26px !important;
    background:#f8fbff !important;
}

.csr-info-list > div{
    padding:14px 0 !important;
    border-bottom:1px solid #e1e9f5 !important;
}

.csr-info-list > div:last-child{
    border-bottom:0 !important;
}

.csr-info-list span{
    display:block !important;
    margin-bottom:5px !important;
    color:var(--zio-muted) !important;
    font-size:12px !important;
}

.csr-info-list strong{
    display:block !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.csr-gallery{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:14px !important;
    margin-top:18px !important;
}

.csr-gallery a{
    position:relative !important;
    display:block !important;
    overflow:hidden !important;
    border:1px solid #dfe8f5 !important;
    background:#f3f6fb !important;
    text-decoration:none !important;
}

.csr-gallery-main{
    grid-column:span 2 !important;
}

.csr-gallery img{
    width:100% !important;
    height:220px !important;
    display:block !important;
    object-fit:cover !important;
    transition:transform .22s ease !important;
}

.csr-gallery-main img{
    height:390px !important;
}

.csr-gallery a:hover img{
    transform:scale(1.035) !important;
}

.csr-gallery span{
    position:absolute !important;
    left:14px !important;
    right:14px !important;
    bottom:14px !important;
    padding:10px 12px !important;
    background:rgba(255,255,255,.94) !important;
    color:var(--zio-navy) !important;
    font-size:12px !important;
    line-height:1.45 !important;
    box-shadow:0 14px 30px rgba(16,24,40,.13) !important;
}

.csr-related-section{
    padding:72px 0 84px !important;
    background:#f3f6fb !important;
}

@media(max-width:1100px){
    .csr-activity-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .csr-detail-grid{
        grid-template-columns:1fr !important;
    }

    .csr-detail-sidebar{
        position:relative !important;
        top:auto !important;
    }
}

@media(max-width:768px){
    .csr-activity-section,
    .csr-detail-section,
    .csr-related-section,
    .csr-value-section{
        padding:52px 0 64px !important;
    }

    .csr-activity-grid,
    .csr-gallery{
        grid-template-columns:1fr !important;
    }

    .csr-gallery-main{
        grid-column:span 1 !important;
    }

    .csr-gallery img,
    .csr-gallery-main img{
        height:230px !important;
    }

    .csr-detail-main,
    .csr-detail-sidebar,
    .csr-value-box > div{
        padding:22px !important;
    }
}

/* =========================================================
   ZIOFLEX PRODUCT PAGE MODERN FIX
   ========================================================= */

.zio-product-hero{
    position:relative !important;
    min-height:420px !important;
    display:flex !important;
    align-items:center !important;
    background-size:cover !important;
    background-position:center !important;
    overflow:hidden !important;
}

.zio-product-hero-overlay{
    position:absolute !important;
    inset:0 !important;
    background:linear-gradient(90deg, rgba(7,14,75,.92), rgba(7,14,75,.72), rgba(7,14,75,.42)) !important;
    z-index:1 !important;
}

.zio-product-hero-inner{
    position:relative !important;
    z-index:2 !important;
}

.zio-product-hero-content{
    max-width:760px !important;
    color:#ffffff !important;
}

.zio-product-hero-content span{
    display:inline-flex !important;
    margin-bottom:12px !important;
    color:rgba(255,255,255,.78) !important;
    font-size:11px !important;
    font-weight:500 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
}

.zio-product-hero-content h1{
    margin:0 0 14px !important;
    color:#ffffff !important;
    font-weight:500 !important;
    line-height:1.18 !important;
}

.zio-product-hero-content p{
    max-width:700px !important;
    margin:0 !important;
    color:rgba(255,255,255,.88) !important;
    line-height:1.75 !important;
}

.zio-product-hero-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
    margin-top:26px !important;
}

.zio-product-hero-actions a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    padding:0 20px !important;
    border-radius:999px !important;
    text-decoration:none !important;
    font-weight:500 !important;
}

.zio-product-hero-actions a:first-child{
    background:#ffffff !important;
    color:var(--zio-navy) !important;
}

.zio-product-hero-actions a:last-child{
    border:1px solid rgba(255,255,255,.35) !important;
    color:#ffffff !important;
}

.zio-product-intro{
    padding:64px 0 34px !important;
    background:#ffffff !important;
}

.zio-product-intro-box{
    display:grid !important;
    grid-template-columns:360px minmax(0, 1fr) !important;
    gap:44px !important;
    align-items:start !important;
    padding:34px !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    box-shadow:0 20px 52px rgba(16,24,40,.055) !important;
}

.zio-product-intro-box span,
.zio-section-head span{
    display:inline-flex !important;
    margin-bottom:9px !important;
    color:var(--zio-blue) !important;
    font-size:11px !important;
    font-weight:600 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
}

.zio-product-intro-box h2,
.zio-section-head h2{
    margin:0 0 10px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
    line-height:1.28 !important;
}

.zio-product-intro-box p,
.zio-section-head p{
    margin:0 0 12px !important;
    color:var(--zio-muted) !important;
    line-height:1.75 !important;
}

.zio-product-intro-box p:last-child{
    margin-bottom:0 !important;
}

.zio-product-catalog{
    padding:52px 0 86px !important;
    background:#ffffff !important;
}

.zio-section-head{
    max-width:760px !important;
    margin-bottom:30px !important;
}

.zio-product-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:22px !important;
}

.zio-product-card{
    display:flex !important;
    flex-direction:column !important;
    min-height:100% !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    text-decoration:none !important;
    overflow:hidden !important;
    box-shadow:0 18px 44px rgba(16,24,40,.055) !important;
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.zio-product-card:hover{
    transform:translateY(-5px) !important;
    border-color:#cbd9ee !important;
    box-shadow:0 26px 58px rgba(16,24,40,.095) !important;
}

.zio-product-card-image{
    height:218px !important;
    background:#f3f6fb !important;
    overflow:hidden !important;
}

.zio-product-card-image img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
    transition:transform .22s ease !important;
}

.zio-product-card:hover .zio-product-card-image img{
    transform:scale(1.035) !important;
}

.zio-product-card-body{
    flex:1 !important;
    display:flex !important;
    flex-direction:column !important;
    padding:22px !important;
}

.zio-product-card-body > span{
    display:inline-flex !important;
    align-self:flex-start !important;
    margin-bottom:9px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
    font-size:10px !important;
    font-weight:600 !important;
}

.zio-product-card-body h3{
    margin:0 0 10px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
    line-height:1.35 !important;
}

.zio-product-card-body p{
    margin:0 0 18px !important;
    color:var(--zio-muted) !important;
    line-height:1.7 !important;
}

.zio-product-card-footer{
    margin-top:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    padding-top:16px !important;
    border-top:1px solid #e4edf8 !important;
    color:var(--zio-blue) !important;
}

.zio-product-card-footer strong{
    font-weight:500 !important;
}

.zio-product-card-footer i{
    transition:transform .18s ease !important;
}

.zio-product-card:hover .zio-product-card-footer i{
    transform:translateX(4px) !important;
}

.zio-empty-card{
    grid-column:1 / -1 !important;
    padding:30px !important;
    border:1px solid #dfe8f5 !important;
    background:#f8fbff !important;
}

.zio-empty-card h3{
    margin:0 0 8px !important;
    font-weight:500 !important;
    color:var(--zio-navy) !important;
}

.zio-empty-card p{
    margin:0 !important;
    color:var(--zio-muted) !important;
}

/* =========================================================
   PRODUCT DETAIL
   ========================================================= */

.zio-product-detail-hero{
    padding:74px 0 70px !important;
    background:#ffffff !important;
}

.zio-product-detail-grid{
    display:grid !important;
    grid-template-columns:minmax(0, 520px) minmax(0, 1fr) !important;
    gap:48px !important;
    align-items:center !important;
}

.zio-product-detail-image{
    overflow:hidden !important;
    border:1px solid #dfe8f5 !important;
    background:#f3f6fb !important;
    box-shadow:0 22px 58px rgba(16,24,40,.075) !important;
}

.zio-product-detail-image img{
    width:100% !important;
    height:390px !important;
    display:block !important;
    object-fit:cover !important;
}

.zio-product-detail-content span{
    display:inline-flex !important;
    margin-bottom:10px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.zio-product-detail-content h1{
    margin:0 0 14px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
    line-height:1.2 !important;
}

.zio-product-detail-content p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    line-height:1.8 !important;
}

.zio-product-detail-points{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:12px !important;
    margin:24px 0 26px !important;
}

.zio-product-detail-points > div{
    padding:16px !important;
    border:1px solid #e1e9f5 !important;
    background:#f8fbff !important;
}

.zio-product-detail-points i{
    width:34px !important;
    height:34px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    margin-bottom:10px !important;
    background:#eef3ff !important;
    color:var(--zio-blue) !important;
}

.zio-product-detail-points strong{
    display:block !important;
    margin-bottom:5px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.zio-product-detail-points small{
    display:block !important;
    color:var(--zio-muted) !important;
    line-height:1.55 !important;
}

.zio-detail-actions{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:12px !important;
}

.zio-detail-actions a{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:44px !important;
    padding:0 18px !important;
    border-radius:999px !important;
    text-decoration:none !important;
    font-weight:500 !important;
}

.zio-detail-actions a:first-child{
    background:var(--zio-blue) !important;
    color:#ffffff !important;
}

.zio-detail-actions a:last-child{
    border:1px solid #d8e3f3 !important;
    color:var(--zio-navy) !important;
    background:#ffffff !important;
}

.zio-product-detail-info{
    padding:72px 0 !important;
    background:#f3f6fb !important;
}

.zio-detail-info-box{
    display:grid !important;
    grid-template-columns:minmax(0, 1fr) 360px !important;
    gap:24px !important;
    align-items:start !important;
}

.zio-detail-info-main,
.zio-detail-info-side{
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    box-shadow:0 18px 44px rgba(16,24,40,.055) !important;
}

.zio-detail-info-main{
    padding:30px !important;
}

.zio-detail-info-side{
    padding:26px !important;
}

.zio-detail-heading{
    margin-bottom:24px !important;
}

.zio-detail-heading span{
    display:inline-flex !important;
    margin-bottom:9px !important;
    color:var(--zio-blue) !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
    font-size:11px !important;
    font-weight:600 !important;
}

.zio-detail-heading h2,
.zio-detail-panel h3,
.zio-detail-info-side h3{
    margin:0 0 10px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.zio-detail-heading p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    line-height:1.75 !important;
}

.zio-material-list{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:12px !important;
    margin-top:16px !important;
}

.zio-material-list > div{
    padding:16px !important;
    border:1px solid #e1e9f5 !important;
    background:#f8fbff !important;
}

.zio-material-list span{
    display:block !important;
    margin-bottom:6px !important;
    color:var(--zio-muted) !important;
    font-size:12px !important;
}

.zio-material-list strong{
    display:block !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
    line-height:1.55 !important;
}

.zio-spec-list{
    display:grid !important;
    gap:10px !important;
    margin-top:16px !important;
}

.zio-spec-list > div{
    display:grid !important;
    grid-template-columns:24px 1fr !important;
    gap:10px !important;
    align-items:start !important;
    padding:13px !important;
    border:1px solid #e1e9f5 !important;
    background:#ffffff !important;
}

.zio-spec-list i{
    width:24px !important;
    height:24px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    background:var(--zio-blue) !important;
    color:#ffffff !important;
    font-size:12px !important;
}

.zio-spec-list span{
    color:var(--zio-muted) !important;
    line-height:1.55 !important;
}

.zio-application-section,
.zio-related-section{
    padding:72px 0 82px !important;
    background:#ffffff !important;
}

.zio-related-section{
    background:#f8fbff !important;
}

.zio-application-tags{
    display:flex !important;
    flex-wrap:wrap !important;
    gap:10px !important;
    max-width:920px !important;
}

.zio-application-tags span{
    display:inline-flex !important;
    align-items:center !important;
    min-height:36px !important;
    padding:0 14px !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    color:var(--zio-navy) !important;
    box-shadow:0 10px 24px rgba(16,24,40,.04) !important;
}

.zio-related-grid{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:18px !important;
}

.zio-related-card{
    display:block !important;
    overflow:hidden !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    text-decoration:none !important;
    box-shadow:0 16px 38px rgba(16,24,40,.055) !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
}

.zio-related-card:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 24px 52px rgba(16,24,40,.09) !important;
}

.zio-related-card img{
    width:100% !important;
    height:165px !important;
    display:block !important;
    object-fit:cover !important;
}

.zio-related-card div{
    padding:16px !important;
}

.zio-related-card span{
    display:block !important;
    margin-bottom:7px !important;
    color:var(--zio-blue) !important;
    font-size:10px !important;
    font-weight:600 !important;
    text-transform:uppercase !important;
    letter-spacing:.045em !important;
}

.zio-related-card h3{
    margin:0 !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
    line-height:1.35 !important;
}

.zio-product-cta{
    padding:72px 0 84px !important;
    background:#f3f6fb !important;
}

.zio-product-cta-box{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:26px !important;
    padding:34px !important;
    border:1px solid #dfe8f5 !important;
    background:#ffffff !important;
    box-shadow:0 20px 52px rgba(16,24,40,.06) !important;
}

.zio-product-cta-box span{
    display:inline-flex !important;
    margin-bottom:9px !important;
    color:var(--zio-blue) !important;
    font-size:11px !important;
    font-weight:600 !important;
    text-transform:uppercase !important;
    letter-spacing:.05em !important;
}

.zio-product-cta-box h2{
    margin:0 0 9px !important;
    color:var(--zio-navy) !important;
    font-weight:500 !important;
}

.zio-product-cta-box p{
    margin:0 !important;
    color:var(--zio-muted) !important;
    line-height:1.72 !important;
}

.zio-product-cta-box a{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    min-height:46px !important;
    padding:0 21px !important;
    border-radius:999px !important;
    background:var(--zio-blue) !important;
    color:#ffffff !important;
    text-decoration:none !important;
    font-weight:500 !important;
}

/* Biar card produk lebih solid, tidak terlalu oval */
.zio-product-card,
.zio-product-card-image,
.zio-product-detail-image,
.zio-detail-info-main,
.zio-detail-info-side,
.zio-material-list > div,
.zio-spec-list > div,
.zio-related-card,
.zio-product-intro-box,
.zio-product-cta-box{
    border-radius:18px !important;
}

/* Responsive */
@media(max-width:1100px){
    .zio-product-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .zio-product-detail-grid,
    .zio-detail-info-box,
    .zio-product-intro-box{
        grid-template-columns:1fr !important;
    }

    .zio-related-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .zio-product-cta-box{
        align-items:flex-start !important;
        flex-direction:column !important;
    }
}

@media(max-width:768px){
    .zio-product-hero{
        min-height:390px !important;
    }

    .zio-product-intro,
    .zio-product-catalog,
    .zio-product-detail-hero,
    .zio-product-detail-info,
    .zio-application-section,
    .zio-related-section,
    .zio-product-cta{
        padding:52px 0 64px !important;
    }

    .zio-product-grid,
    .zio-related-grid,
    .zio-material-list,
    .zio-product-detail-points{
        grid-template-columns:1fr !important;
    }

    .zio-product-intro-box,
    .zio-detail-info-main,
    .zio-detail-info-side,
    .zio-product-cta-box{
        padding:22px !important;
    }

    .zio-product-card-image{
        height:210px !important;
    }

    .zio-product-detail-image img{
        height:270px !important;
    }
}

/* =========================================================
   HIDE OLD PRODUCT CTA BOX
   ========================================================= */

.zio-product-catalog ~ .content-cta-section,
.zio-product-catalog ~ .product-engineering-section,
.zio-product-catalog ~ .product-cta-section,
.zio-product-catalog ~ .technical-assistance-section{
    display:none !important;
}

body:has(.zio-product-catalog) .content-cta-section{
    display:none !important;
}

/* =========================================================
   REMOVE PRODUCT DETAIL CTA DUPLICATE
   ========================================================= */

body:has(.zio-product-detail-hero) .zio-product-cta,
body:has(.zio-product-detail-hero) .content-cta-section,
body:has(.zio-product-detail-hero) .product-engineering-section,
body:has(.zio-product-detail-hero) .product-cta-section,
body:has(.zio-product-detail-hero) .technical-assistance-section{
    display:none !important;
}

.zio-related-section + .zio-product-cta,
.zio-related-section + .content-cta-section,
.zio-application-section + .zio-product-cta,
.zio-application-section + .content-cta-section{
    display:none !important;
}

/* Rapikan jarak bawah detail produk setelah CTA dihapus */
.zio-related-section{
    padding-bottom:86px !important;
}

/* =========================================================
   FINAL FIX - HIDE PRODUCT DETAIL FOOTER CTA
   Menghapus box:
   - Product Engineering
   - Produk dapat disesuaikan dengan drawing dan kondisi operasi
   pada halaman detail produk.
   ========================================================= */

body:has(.zio-product-detail-hero) .zio-page-tail-section,
body:has(.zio-product-detail-grid) .zio-page-tail-section,
body:has(.zio-detail-info-box) .zio-page-tail-section,
body:has(.product-detail-page-content) .zio-page-tail-section,
body:has(.product-detail-hero) .zio-page-tail-section,
body:has(.zio-product-catalog) .zio-page-tail-section{
    display:none !important;
    visibility:hidden !important;
    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;
    padding:0 !important;
    margin:0 !important;
    overflow:hidden !important;
    border:0 !important;
}

/* Backup selector kalau section masih terbaca dari layout footer */
body:has(.zio-product-detail-hero) .zio-page-tail-box,
body:has(.zio-product-detail-grid) .zio-page-tail-box,
body:has(.zio-detail-info-box) .zio-page-tail-box,
body:has(.product-detail-page-content) .zio-page-tail-box,
body:has(.product-detail-hero) .zio-page-tail-box,
body:has(.zio-product-catalog) .zio-page-tail-box{
    display:none !important;
}

/* Pastikan CTA lama produk juga tetap hilang */
body:has(.zio-product-detail-hero) .zio-product-cta,
body:has(.zio-product-detail-hero) .content-cta-section,
body:has(.zio-product-detail-hero) .product-engineering-section,
body:has(.zio-product-detail-hero) .product-cta-section,
body:has(.zio-product-detail-hero) .technical-assistance-section,
body:has(.zio-product-detail-grid) .zio-product-cta,
body:has(.zio-product-detail-grid) .content-cta-section,
body:has(.zio-product-detail-grid) .product-engineering-section,
body:has(.zio-product-detail-grid) .product-cta-section,
body:has(.zio-product-detail-grid) .technical-assistance-section{
    display:none !important;
}

/* Rapikan jarak footer setelah box CTA produk dihapus */
body:has(.zio-product-detail-hero) .zio-footer,
body:has(.zio-product-detail-grid) .zio-footer,
body:has(.zio-detail-info-box) .zio-footer,
body:has(.product-detail-page-content) .zio-footer,
body:has(.product-detail-hero) .zio-footer{
    margin-top:0 !important;
}

/* =========================================================
   PRODUCT DETAIL GALLERY
   ========================================================= */

.zio-product-detail-media{
    display:block !important;
}

.zio-product-gallery-thumbs{
    display:grid !important;
    grid-template-columns:repeat(5, minmax(0, 1fr)) !important;
    gap:10px !important;
    margin-top:12px !important;
}

.zio-product-gallery-thumbs a{
    display:block !important;
    height:78px !important;
    border:1px solid #dfe8f5 !important;
    background:#f5f8fc !important;
    overflow:hidden !important;
    border-radius:14px !important;
    opacity:.78 !important;
    transition:opacity .18s ease, transform .18s ease, border-color .18s ease !important;
}

.zio-product-gallery-thumbs a:hover,
.zio-product-gallery-thumbs a.active{
    opacity:1 !important;
    transform:translateY(-2px) !important;
    border-color:var(--zio-blue) !important;
}

.zio-product-gallery-thumbs img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
}

.zio-product-documentation{
    padding:72px 0 82px !important;
    background:#ffffff !important;
}

.zio-product-documentation-grid{
    display:grid !important;
    grid-template-columns:1.35fr 1fr 1fr !important;
    gap:16px !important;
}

.zio-product-documentation-grid a{
    display:block !important;
    min-height:230px !important;
    border:1px solid #dfe8f5 !important;
    background:#f5f8fc !important;
    overflow:hidden !important;
    border-radius:18px !important;
    box-shadow:0 18px 44px rgba(16,24,40,.055) !important;
    transition:transform .18s ease, box-shadow .18s ease !important;
}

.zio-product-documentation-grid a:hover{
    transform:translateY(-4px) !important;
    box-shadow:0 26px 58px rgba(16,24,40,.09) !important;
}

.zio-product-documentation-grid a.featured{
    grid-row:span 2 !important;
    min-height:476px !important;
}

.zio-product-documentation-grid img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
}

@media(max-width:1100px){
    .zio-product-documentation-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .zio-product-documentation-grid a.featured{
        grid-row:auto !important;
        min-height:260px !important;
    }
}

@media(max-width:768px){
    .zio-product-gallery-thumbs{
        grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    }

    .zio-product-gallery-thumbs a{
        height:64px !important;
        border-radius:12px !important;
    }

    .zio-product-documentation{
        padding:52px 0 64px !important;
    }

    .zio-product-documentation-grid{
        grid-template-columns:1fr !important;
    }

    .zio-product-documentation-grid a,
    .zio-product-documentation-grid a.featured{
        min-height:240px !important;
    }
}