/* =========================================================
   ZIOFLEX WEBSITE - TAHAP 5 FINAL POLISH
   Header, mobile, CTA, footer, article, search, error, admin-safe frontend polish
   ========================================================= */

:root{
    --z5-blue:#172bd8;
    --z5-blue-dark:#070e71;
    --z5-navy:#07143f;
    --z5-text:#17233d;
    --z5-muted:#64708a;
    --z5-border:#dfe8f6;
    --z5-soft:#f4f7fc;
    --z5-white:#ffffff;
    --z5-shadow:0 22px 62px rgba(10, 21, 63, .10);
}

.zio-skip-link{
    position:absolute;
    left:18px;
    top:-120px;
    z-index:20000;
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 16px;
    border-radius:999px;
    background:var(--z5-blue);
    color:#fff;
    font-size:12px;
    font-weight:800;
    box-shadow:0 14px 34px rgba(23,43,216,.28);
    transition:top .2s ease;
}

.zio-skip-link:focus{
    top:12px;
    outline:2px solid #fff;
    outline-offset:2px;
}

.zio-header{
    backdrop-filter:saturate(160%) blur(10px);
}

.zio-header::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-1px;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(23,43,216,.20), transparent);
    pointer-events:none;
}

body.zio-scrolled .zio-header,
body.zio-topbar-hidden .zio-header{
    box-shadow:0 16px 42px rgba(11,24,62,.10) !important;
}

.zio-header-search{
    box-shadow:0 12px 34px rgba(10,21,63,.035);
}

.zio-header-search:focus-within{
    border-color:rgba(23,43,216,.46);
    box-shadow:0 16px 42px rgba(23,43,216,.09);
}

.zio-header-search input::placeholder,
.zio-mobile-search input::placeholder{
    color:#8792a8;
}

.zio-nav > a,
.zio-nav-dropdown > button{
    position:relative;
}

.zio-nav > a::after,
.zio-nav-dropdown > button::after{
    content:"";
    position:absolute;
    left:50%;
    right:50%;
    bottom:-10px;
    height:2px;
    border-radius:999px;
    background:var(--z5-blue);
    transition:left .18s ease, right .18s ease;
}

.zio-nav > a:hover::after,
.zio-nav-dropdown:hover > button::after,
.zio-nav > a:focus-visible::after,
.zio-nav-dropdown > button:focus-visible::after{
    left:0;
    right:0;
}

.zio-dropdown-menu{
    border:1px solid rgba(223,232,246,.96) !important;
    box-shadow:0 26px 70px rgba(7,20,63,.14) !important;
    border-radius:20px !important;
    padding:10px !important;
}

.zio-dropdown-menu a{
    border-radius:14px;
    transition:background .18s ease, color .18s ease, transform .18s ease;
}

.zio-dropdown-menu a:hover,
.zio-dropdown-menu a:focus-visible{
    background:#eef3ff;
    color:var(--z5-blue);
    transform:translateX(2px);
}

.zio-mobile-panel{
    box-shadow:0 24px 90px rgba(7,20,63,.18);
}

.zio-mobile-panel a,
.zio-mobile-group > button,
.zio-mobile-submenu a{
    min-height:42px;
}

/* Global premium section action */
.zio-section-center-action{
    display:flex;
    justify-content:center;
    margin-top:30px;
}

.zio-section-center-action a{
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:42px;
    padding:0 19px;
    border-radius:999px;
    background:#fff;
    border:1px solid rgba(23,43,216,.18);
    color:var(--z5-blue);
    font-size:12px;
    font-weight:800;
    box-shadow:0 16px 40px rgba(7,20,63,.07);
    transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

.zio-section-center-action a:hover{
    transform:translateY(-2px);
    background:var(--z5-blue);
    color:#fff;
    box-shadow:0 20px 48px rgba(23,43,216,.20);
}

/* Article final polish: 4 cards premium */
.home-admin-article-section,
.company-latest-articles-section{
    background:
        radial-gradient(circle at 50% 0%, rgba(23,43,216,.05), transparent 34%),
        linear-gradient(180deg, #f5f8fd 0%, #eef4fb 100%) !important;
}

.home-admin-article-grid,
.company-latest-articles-grid{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
    gap:24px !important;
    align-items:stretch !important;
}

.home-admin-article-card,
.company-latest-article-card{
    height:100% !important;
    border-radius:22px !important;
    overflow:hidden !important;
    background:#fff !important;
    border:1px solid rgba(223,232,246,.94) !important;
    box-shadow:0 22px 56px rgba(7,20,63,.075) !important;
    transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease !important;
}

.home-admin-article-card:hover,
.company-latest-article-card:hover{
    transform:translateY(-6px) !important;
    border-color:rgba(23,43,216,.24) !important;
    box-shadow:0 28px 74px rgba(7,20,63,.12) !important;
}

.home-admin-article-card > img,
.company-latest-article-image{
    height:178px !important;
    background:linear-gradient(135deg, #070e71, #172bd8) !important;
}

.home-admin-article-card > img,
.company-latest-article-image img{
    width:100% !important;
    object-fit:cover !important;
}

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

.home-admin-article-card > div,
.company-latest-article-body{
    min-height:255px !important;
    display:flex !important;
    flex-direction:column !important;
}

.home-admin-article-card small,
.company-latest-article-meta{
    color:var(--z5-blue) !important;
    font-weight:800 !important;
    letter-spacing:.04em !important;
}

.home-admin-article-card h3,
.company-latest-article-card h3{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    min-height:50px !important;
}

.home-admin-article-card p,
.company-latest-article-card p{
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
    min-height:45px !important;
}

.home-admin-article-card strong,
.company-latest-article-card strong{
    margin-top:auto !important;
}

/* Article detail sidebar final */
.article-sidebar{
    position:sticky;
    top:126px;
    align-self:start;
}

.article-related-item{
    display:grid !important;
    grid-template-columns:38px 1fr !important;
    gap:12px !important;
    align-items:start !important;
    padding:14px 0 !important;
}

.article-related-number{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:12px;
    background:#eef3ff;
    color:var(--z5-blue);
    font-weight:900;
    font-size:11px;
}

.article-related-text small{
    display:block;
    margin-bottom:4px;
    color:var(--z5-muted);
    font-size:10px;
    font-weight:800;
    letter-spacing:.045em;
    text-transform:uppercase;
}

.article-related-text strong{
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    line-height:1.45;
}

.article-related-all{
    margin-top:14px;
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:40px;
    padding:0 16px;
    border-radius:999px;
    background:var(--z5-blue);
    color:#fff;
    font-size:12px;
    font-weight:800;
    box-shadow:0 16px 42px rgba(23,43,216,.22);
}

/* Search and 404 final */
.search-hero-final,
.error-page-section-final{
    background:
        radial-gradient(circle at 20% 0%, rgba(23,43,216,.08), transparent 30%),
        linear-gradient(180deg, #f6f9ff, #ffffff) !important;
}

.search-result-head span{
    display:inline-flex;
    margin-bottom:8px;
    padding:5px 10px;
    border-radius:999px;
    background:#eef3ff;
    color:var(--z5-blue);
    font-size:10px;
    font-weight:900;
    letter-spacing:.05em;
    text-transform:uppercase;
}

.search-card{
    overflow:hidden;
    border-radius:22px !important;
    border:1px solid var(--z5-border) !important;
    background:#fff !important;
    box-shadow:0 18px 48px rgba(7,20,63,.06) !important;
    transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.search-card:hover{
    transform:translateY(-5px);
    border-color:rgba(23,43,216,.25) !important;
    box-shadow:0 24px 62px rgba(7,20,63,.12) !important;
}

.search-card img{
    height:170px !important;
    width:100% !important;
    object-fit:cover !important;
    background:#07143f !important;
}

.search-empty-box-final i{
    width:58px;
    height:58px;
    display:grid;
    place-items:center;
    margin:0 auto 16px;
    border-radius:18px;
    background:#eef3ff;
    color:var(--z5-blue);
    font-size:24px;
}

.search-suggestion-tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:10px;
    margin-top:18px;
}

.search-suggestion-tags a{
    min-height:34px;
    display:inline-flex;
    align-items:center;
    padding:0 13px;
    border-radius:999px;
    background:#fff;
    border:1px solid var(--z5-border);
    color:var(--z5-blue);
    font-size:11px;
    font-weight:800;
}

.error-page-box-final{
    max-width:920px !important;
}

.error-quick-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin:28px 0 28px;
}

.error-quick-grid a{
    display:flex;
    flex-direction:column;
    gap:6px;
    padding:18px;
    border-radius:20px;
    border:1px solid var(--z5-border);
    background:#fff;
    box-shadow:0 16px 42px rgba(7,20,63,.055);
    text-align:left;
}

.error-quick-grid i{
    width:42px;
    height:42px;
    display:grid;
    place-items:center;
    margin-bottom:4px;
    border-radius:14px;
    background:#eef3ff;
    color:var(--z5-blue);
    font-size:20px;
}

.error-quick-grid strong{
    color:var(--z5-navy);
    line-height:1.3;
}

.error-quick-grid small{
    color:var(--z5-muted);
    line-height:1.5;
}

/* Footer final */
.zio-footer{
    position:relative;
    background:
        radial-gradient(circle at 12% 0%, rgba(23,43,216,.18), transparent 30%),
        linear-gradient(180deg, #07143f 0%, #050b27 100%) !important;
}

.zio-footer::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:0;
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}

.zio-footer-grid{
    gap:30px !important;
}

.zio-footer-company img{
    background:#fff;
    padding:10px 12px;
    border-radius:16px;
}

.zio-footer-column a:hover,
.zio-footer-follow a:hover{
    color:#fff !important;
    opacity:1 !important;
}

.zio-newsletter-form{
    box-shadow:0 14px 40px rgba(0,0,0,.18);
}

/* Floating actions */
.zio-wa-button{
    box-shadow:0 20px 48px rgba(23,199,93,.34) !important;
}

.zio-wa-button span{
    position:absolute;
    right:62px;
    top:50%;
    transform:translateY(-50%) translateX(8px);
    min-height:34px;
    display:inline-flex;
    align-items:center;
    padding:0 12px;
    border-radius:999px;
    background:#fff;
    color:#0f172a;
    font-size:11px;
    font-weight:900;
    white-space:nowrap;
    box-shadow:0 14px 38px rgba(7,20,63,.14);
    opacity:0;
    pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
}

.zio-wa-button:hover span{
    opacity:1;
    transform:translateY(-50%) translateX(0);
}

.zio-back-to-top{
    position:fixed;
    right:26px;
    bottom:98px;
    z-index:10030;
    width:46px;
    height:46px;
    display:grid;
    place-items:center;
    border:0;
    border-radius:999px;
    background:#fff;
    color:var(--z5-blue);
    font-size:24px;
    box-shadow:0 18px 46px rgba(7,20,63,.15);
    cursor:pointer;
    opacity:0;
    transform:translateY(14px);
    pointer-events:none;
    transition:opacity .2s ease, transform .2s ease, background .2s ease, color .2s ease;
}

.zio-back-to-top.is-visible{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.zio-back-to-top:hover{
    background:var(--z5-blue);
    color:#fff;
}

@media (max-width: 1280px){
    .home-admin-article-grid,
    .company-latest-articles-grid{
        gap:20px !important;
    }

    .home-admin-article-card > img,
    .company-latest-article-image{
        height:158px !important;
    }
}

@media (max-width: 1100px){
    .home-admin-article-grid,
    .company-latest-articles-grid,
    .error-quick-grid{
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    }

    .article-sidebar{
        position:relative;
        top:auto;
    }
}

@media (max-width: 767.98px){
    .zio-container,
    .site-container{
        width:min(100% - 28px, 1180px) !important;
    }

    .zio-topbar-contact{
        width:100%;
        justify-content:center;
        gap:6px;
        font-size:10px !important;
        white-space:nowrap;
    }

    .zio-topbar-social{
        display:none !important;
    }

    .zio-header-inner{
        min-height:70px !important;
    }

    .home-admin-article-grid,
    .company-latest-articles-grid,
    .error-quick-grid{
        grid-template-columns:1fr !important;
    }

    .home-admin-article-card > img,
    .company-latest-article-image{
        height:190px !important;
    }

    .home-admin-article-card > div,
    .company-latest-article-body{
        min-height:auto !important;
    }

    .zio-wa-button span{
        display:none;
    }

    .zio-back-to-top{
        right:20px;
        bottom:88px;
        width:42px;
        height:42px;
    }
}

.zio-input-attention{
    animation:zioInputAttention .62s ease;
}

@keyframes zioInputAttention{
    0%, 100%{ box-shadow:none; }
    35%{ box-shadow:0 0 0 4px rgba(239,68,68,.16); }
}

/* =========================================================
   ZIOFLEX TAHAP 5B - MINOR UI FINAL FIX
   Softer surface, article fallback, related button, mobile hero/header polish
   ========================================================= */
:root{
    --z5b-page:#f6f8fc;
    --z5b-surface:#ffffff;
    --z5b-soft:#f2f6fc;
    --z5b-border:rgba(207,219,238,.78);
    --z5b-navy:#061142;
    --z5b-blue:#172bd8;
    --z5b-muted:#5f6f8e;
    --z5b-shadow:0 24px 70px rgba(7,20,63,.09);
}
html{background:var(--z5b-page)!important;}
body{background:linear-gradient(180deg,#ffffff 0%,#f7f9fd 48%,#f3f7fc 100%)!important;color:var(--z5b-navy)!important;}
.zio-header{background:rgba(255,255,255,.96)!important;border-bottom:1px solid rgba(214,225,242,.82)!important;}
.zio-topbar{background:#070e71!important;}
.zio-header-inner{min-height:78px!important;}
.zio-header-search,.zio-lang-switch,.zio-mobile-toggle{border-color:rgba(207,219,238,.92)!important;box-shadow:0 14px 38px rgba(7,20,63,.045)!important;}
.zio-header-search input{background:transparent!important;}
.home-admin-article-section,.company-latest-articles-section{background:radial-gradient(circle at 50% 0%,rgba(23,43,216,.07),transparent 28%),linear-gradient(180deg,#f8fbff 0%,#eef4fb 100%)!important;border-top:1px solid rgba(214,225,242,.70)!important;border-bottom:1px solid rgba(214,225,242,.70)!important;}
.home-admin-article-grid,.company-latest-articles-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:26px!important;}
.home-admin-article-card,.company-latest-article-card{border:1px solid rgba(207,219,238,.90)!important;border-radius:24px!important;background:#fff!important;box-shadow:0 24px 70px rgba(7,20,63,.085)!important;overflow:hidden!important;}
.home-admin-article-card:hover,.company-latest-article-card:hover{transform:translateY(-5px)!important;box-shadow:0 30px 78px rgba(7,20,63,.13)!important;border-color:rgba(23,43,216,.25)!important;}
.home-admin-article-card>img,.company-latest-article-image{height:172px!important;min-height:172px!important;background:linear-gradient(135deg,#07106b 0%,#172bd8 100%)!important;display:block!important;position:relative!important;}
.home-admin-article-card>img,.company-latest-article-image img{width:100%!important;height:172px!important;object-fit:cover!important;display:block!important;}
.home-admin-article-card>div,.company-latest-article-body{min-height:250px!important;padding:22px!important;display:flex!important;flex-direction:column!important;}
.home-admin-article-card small,.company-latest-article-meta small,.company-latest-article-meta span{font-size:10.5px!important;line-height:1.2!important;}
.home-admin-article-card h3,.company-latest-article-card h3{font-size:18px!important;line-height:1.28!important;min-height:46px!important;margin-bottom:10px!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
.home-admin-article-card p,.company-latest-article-card p{font-size:13px!important;line-height:1.6!important;color:#5f6f8e!important;display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important;}
.home-admin-article-card strong,.company-latest-article-card strong{margin-top:auto!important;display:inline-flex!important;align-items:center!important;gap:5px!important;font-size:12px!important;font-weight:900!important;color:var(--z5b-blue)!important;}
.article-layout{align-items:start!important;}
.article-content{background:#fff!important;border:1px solid rgba(207,219,238,.86)!important;border-radius:2px!important;box-shadow:0 22px 70px rgba(7,20,63,.055)!important;}
.article-sidebar{background:#fff!important;border:1px solid rgba(207,219,238,.92)!important;border-radius:26px!important;box-shadow:0 28px 80px rgba(7,20,63,.10)!important;}
.article-related-all{width:100%!important;min-height:48px!important;border-radius:999px!important;background:linear-gradient(135deg,#172bd8 0%,#0714b8 100%)!important;color:#fff!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;font-size:12px!important;font-weight:900!important;letter-spacing:.01em!important;text-decoration:none!important;margin-top:16px!important;box-shadow:0 18px 42px rgba(23,43,216,.22)!important;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease!important;}
.article-related-all:hover{transform:translateY(-2px)!important;box-shadow:0 24px 54px rgba(23,43,216,.28)!important;filter:saturate(1.08)!important;color:#fff!important;}
.zio-page-tail-section{background:#eef4fb!important;}
.zio-page-tail-box{background:rgba(255,255,255,.92)!important;border:1px solid rgba(207,219,238,.88)!important;box-shadow:0 26px 70px rgba(7,20,63,.085)!important;}
.zio-wa-button{width:auto!important;min-width:62px!important;height:62px!important;padding:0 16px!important;border-radius:999px!important;gap:8px!important;box-shadow:0 20px 46px rgba(37,211,102,.34)!important;}
.zio-wa-button span{display:inline-block!important;font-size:12px!important;font-weight:900!important;}
.zio-back-to-top{right:30px!important;bottom:104px!important;}
img[src=""],img:not([src]){visibility:hidden!important;}
@media(max-width:1280px){.home-admin-article-grid,.company-latest-articles-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;max-width:900px!important;margin:0 auto!important;}.home-admin-article-card>img,.company-latest-article-image,.company-latest-article-image img{height:190px!important;}}
@media(max-width:768px){
    body{background:#f7f9fd!important;}
    .zio-topbar-contact{justify-content:center!important;gap:7px!important;font-size:12px!important;white-space:nowrap!important;}
    .zio-topbar-social{display:none!important;}
    .zio-header-inner{min-height:106px!important;padding:16px 0!important;display:grid!important;grid-template-columns:1fr auto auto!important;gap:12px!important;align-items:center!important;}
    .zio-brand img{max-height:56px!important;width:auto!important;}
    .zio-header-actions{gap:10px!important;justify-content:flex-end!important;}
    .zio-lang-switch{height:54px!important;border-radius:999px!important;}
    .zio-lang-switch button{min-width:52px!important;height:48px!important;font-size:14px!important;}
    .zio-mobile-toggle{width:56px!important;height:56px!important;border-radius:18px!important;font-size:28px!important;background:#fff!important;}
    .zio-mobile-panel{top:calc(100% + 8px)!important;border-radius:22px!important;padding:14px!important;}
    .zio-hero-slider{height:620px!important;min-height:620px!important;}
    .zio-hero-overlay{background:linear-gradient(180deg,rgba(5,9,61,.86) 0%,rgba(7,14,89,.88) 46%,rgba(5,9,61,.95) 100%)!important;}
    .zio-hero-content{justify-content:center!important;padding:74px 24px 88px!important;max-width:100%!important;}
    .zio-hero-content span{font-size:11px!important;line-height:1.2!important;padding:10px 16px!important;margin-bottom:18px!important;max-width:94%!important;}
    .zio-hero-content h1{font-size:38px!important;line-height:1.14!important;letter-spacing:-.03em!important;max-width:92%!important;margin-bottom:16px!important;}
    .zio-hero-content p{font-size:18px!important;line-height:1.55!important;max-width:94%!important;margin-bottom:26px!important;}
    .zio-hero-actions{gap:12px!important;}
    .zio-hero-btn{min-height:50px!important;padding:0 25px!important;font-size:14px!important;}
    .zio-hero-arrow{top:auto!important;bottom:96px!important;width:42px!important;height:42px!important;transform:none!important;background:rgba(255,255,255,.88)!important;}
    .zio-hero-arrow:hover{transform:none!important;}
    .zio-hero-prev{left:26px!important;}
    .zio-hero-next{right:26px!important;}
    .zio-hero-dots{bottom:38px!important;}
    .home-admin-article-grid,.company-latest-articles-grid{grid-template-columns:1fr!important;gap:18px!important;max-width:420px!important;}
    .home-admin-article-card>img,.company-latest-article-image,.company-latest-article-image img{height:210px!important;}
    .home-admin-article-card>div,.company-latest-article-body{min-height:auto!important;padding:20px!important;}
    .article-sidebar{position:relative!important;top:auto!important;margin-top:24px!important;}
    .article-related-all{min-height:46px!important;}
    .zio-wa-button{right:22px!important;bottom:24px!important;width:64px!important;height:64px!important;min-width:64px!important;padding:0!important;}
    .zio-wa-button span{display:none!important;}
    .zio-back-to-top{right:22px!important;bottom:98px!important;}
}
@media(max-width:420px){
    .zio-brand img{max-height:50px!important;}
    .zio-header-inner{gap:9px!important;}
    .zio-lang-switch{height:50px!important;}
    .zio-lang-switch button{min-width:47px!important;height:44px!important;}
    .zio-mobile-toggle{width:52px!important;height:52px!important;}
    .zio-hero-slider{height:610px!important;min-height:610px!important;}
    .zio-hero-content{padding:64px 22px 86px!important;}
    .zio-hero-content h1{font-size:34px!important;line-height:1.16!important;max-width:96%!important;}
    .zio-hero-content p{font-size:16px!important;max-width:96%!important;}
    .zio-hero-btn{min-height:48px!important;padding:0 20px!important;}
}

/* =========================================================
   ZIOFLEX TAHAP 5C - FINAL CORRECTION
   Footer readability, mobile header revert, article CTA cleanup, related button text
   ========================================================= */

/* 1) Footer kembali terang supaya tulisan terbaca */
.zio-footer{
    background:linear-gradient(180deg,#f4f7fb 0%,#eef3f8 100%) !important;
    border-top:1px solid #dce6f2 !important;
    color:#25314d !important;
}
.zio-footer::before{display:none !important;}
.zio-footer h4,
.zio-footer-company p,
.zio-footer-newsletter strong,
.zio-footer-newsletter p,
.zio-footer-column a,
.zio-footer-follow h4{
    color:#25314d !important;
    opacity:1 !important;
}
.zio-footer-column a:hover,
.zio-footer-column a:focus-visible{
    color:#172bd8 !important;
    opacity:1 !important;
}
.zio-footer-company img{
    background:#ffffff !important;
    border:1px solid #dce6f2 !important;
    box-shadow:0 14px 34px rgba(7,20,63,.08) !important;
}
.zio-footer-newsletter .zio-newsletter-form{
    background:#ffffff !important;
    border:1px solid #ccd9ea !important;
    box-shadow:0 14px 34px rgba(7,20,63,.08) !important;
}
.zio-newsletter-form input{
    color:#17233d !important;
    background:#fff !important;
}
.zio-newsletter-form input::placeholder{color:#7a879d !important;}
.zio-newsletter-form button{
    background:#172bd8 !important;
    color:#ffffff !important;
}
.zio-footer-social a,
.zio-footer-social a i{
    color:#ffffff !important;
}
.zio-footer-bottom{
    background:#07143f !important;
    color:#ffffff !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
}
.zio-footer-bottom *{color:#ffffff !important;}

/* 2) Tombol Lihat Semua Artikel di artikel terkait: teks wajib putih */
.article-related-all,
.article-related-all:visited,
.article-related-all:hover,
.article-related-all:focus,
.article-related-all i,
.article-related-all span{
    color:#ffffff !important;
    opacity:1 !important;
}

/* 3) Netralisir CTA Knowledge Center pada halaman berita bila masih tersisa dari cache */
body:has(.article-layout) .zio-page-tail-section,
body:has(.news-grid) .zio-page-tail-section,
body:has(.article-section) .zio-page-tail-section{
    display:none !important;
}

/* 4) Mobile header dikembalikan lebih compact seperti sebelumnya */
@media(max-width:768px){
    .zio-topbar{height:42px !important;}
    .zio-topbar-inner{height:42px !important;}
    .zio-topbar-contact{
        width:100% !important;
        justify-content:center !important;
        gap:6px !important;
        font-size:10px !important;
        line-height:1.25 !important;
        white-space:nowrap !important;
        flex-wrap:nowrap !important;
    }
    .zio-topbar-social{display:none !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-header-inner{
        min-height:auto !important;
        padding:14px 0 !important;
        display:grid !important;
        grid-template-columns:1fr auto auto !important;
        grid-template-areas:"brand lang menu" !important;
        gap:10px !important;
        align-items:center !important;
    }
    .zio-brand{
        grid-area:brand !important;
        padding-left:12px !important;
    }
    .zio-brand img{
        width:132px !important;
        max-width:132px !important;
        max-height:none !important;
        height:auto !important;
    }
    .zio-header-search,
    .zio-nav{display:none !important;}
    .zio-header-actions{
        display:flex !important;
        gap:8px !important;
        align-items:center !important;
        justify-content:flex-end !important;
    }
    .zio-lang-switch{
        grid-area:lang !important;
        height:38px !important;
        padding:4px !important;
        border-radius:999px !important;
        box-shadow:0 10px 28px rgba(7,20,63,.07) !important;
    }
    .zio-lang-switch button{
        min-width:34px !important;
        height:30px !important;
        font-size:10.5px !important;
        border-radius:999px !important;
    }
    .zio-mobile-toggle{
        grid-area:menu !important;
        display:grid !important;
        place-items:center !important;
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
        border-radius:15px !important;
        font-size:22px !important;
        background:#ffffff !important;
        box-shadow:0 10px 28px rgba(7,20,63,.07) !important;
    }
    .zio-mobile-panel{
        top:calc(100% + 10px) !important;
        border-radius:20px !important;
        padding:12px !important;
        max-height:calc(100vh - 170px) !important;
    }

    /* Mobile hero dibuat proporsional, tidak terlalu besar */
    .zio-hero-slider{
        height:560px !important;
        min-height:560px !important;
    }
    .zio-hero-overlay{
        background:linear-gradient(90deg, rgba(5,9,61,.90) 0%, rgba(7,14,89,.78) 55%, rgba(5,9,61,.70) 100%) !important;
    }
    .zio-hero-content{
        justify-content:center !important;
        padding:42px 0 !important;
        max-width:100% !important;
    }
    .zio-hero-content span{
        font-size:9.5px !important;
        line-height:1.2 !important;
        padding:7px 12px !important;
        margin-bottom:16px !important;
        max-width:90% !important;
    }
    .zio-hero-content h1{
        font-size:26px !important;
        line-height:1.14 !important;
        max-width:88% !important;
        margin-bottom:14px !important;
        letter-spacing:-.02em !important;
    }
    .zio-hero-content p{
        font-size:12px !important;
        line-height:1.55 !important;
        max-width:92% !important;
        margin-bottom:20px !important;
    }
    .zio-hero-actions{gap:10px !important;}
    .zio-hero-btn{
        min-height:40px !important;
        padding:0 17px !important;
        font-size:11px !important;
    }
    .zio-hero-arrow{
        top:50% !important;
        bottom:auto !important;
        width:40px !important;
        height:40px !important;
        transform:translateY(-50%) !important;
        background:rgba(255,255,255,.90) !important;
    }
    .zio-hero-arrow:hover{transform:translateY(-50%) !important;}
    .zio-hero-prev{left:14px !important;}
    .zio-hero-next{right:14px !important;}
    .zio-hero-dots{bottom:20px !important;}

    .zio-wa-button{
        right:22px !important;
        bottom:24px !important;
        width:58px !important;
        height:58px !important;
        min-width:58px !important;
        padding:0 !important;
    }
    .zio-wa-button span{display:none !important;}
    .zio-back-to-top{
        right:22px !important;
        bottom:92px !important;
        width:42px !important;
        height:42px !important;
    }
}

@media(max-width:420px){
    .zio-brand img{
        width:128px !important;
        max-width:128px !important;
    }
    .zio-header-inner{gap:8px !important;}
    .zio-lang-switch{height:38px !important;}
    .zio-lang-switch button{min-width:32px !important;height:30px !important;}
    .zio-mobile-toggle{width:40px !important;height:40px !important;min-width:40px !important;}
    .zio-hero-slider{height:555px !important;min-height:555px !important;}
    .zio-hero-content h1{font-size:25px !important;max-width:90% !important;}
    .zio-hero-content p{font-size:12px !important;max-width:92% !important;}
}