*{box-sizing:border-box}body{margin:0;background:#f5f8fc;color:#10213a;font-family:Inter,Arial,sans-serif;line-height:1.65}.blog-header{height:76px;padding:0 max(24px,calc((100% - 1160px)/2));display:flex;align-items:center;justify-content:space-between;background:#071426;color:#fff}.brand{font-weight:900;font-size:22px;color:#fff;text-decoration:none;letter-spacing:-1px}.brand span{color:#22a9ff}.blog-header nav{display:flex;gap:26px}.blog-header nav a{color:#d9e7f8;text-decoration:none;font-size:14px}.wrap{max-width:1160px;margin:auto;padding:56px 24px 80px}.blog-hero{padding:46px;border-radius:22px;background:linear-gradient(120deg,#071a38,#0879d6);color:#fff;margin-bottom:36px}.eyebrow,.meta{font-size:12px;letter-spacing:1.3px;text-transform:uppercase;color:#5aa9ef;font-weight:800}.blog-hero .eyebrow{color:#8bd8ff}.blog-hero h1{font-size:clamp(36px,6vw,58px);line-height:1.1;margin:10px 0}.blog-hero p{max-width:650px}.search{display:flex;gap:8px;max-width:520px;margin-top:25px}.search input{flex:1;min-width:0;padding:14px 16px;border:0;border-radius:9px;font:inherit}.search button,.contact{background:#1689ed;color:white;border:0;border-radius:9px;padding:13px 20px;font-weight:800;text-decoration:none}.posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}.post{background:#fff;border:1px solid #e5edf6;border-radius:16px;overflow:hidden;box-shadow:0 8px 28px #10213a0a}.thumb{height:190px;display:grid;place-items:center;background:linear-gradient(135deg,#071a38,#0879d6);color:white;font-size:24px;font-weight:900;text-decoration:none}.thumb img{width:100%;height:100%;object-fit:cover}.post-body{padding:22px}.post-body h2{font-size:21px;line-height:1.3;margin:8px 0}.post-body h2 a{color:#10213a;text-decoration:none}.post-body p:not(.meta){color:#60718a}.read,.back{color:#087bd7;font-weight:800;text-decoration:none}.empty{padding:45px;background:white;border-radius:14px;text-align:center}.article-wrap{max-width:850px;margin:55px auto 90px;padding:0 24px}.article-wrap h1{font-size:clamp(34px,5vw,52px);line-height:1.15;letter-spacing:-1.5px}.lead{font-size:19px;color:#60718a}.article-image{width:100%;max-height:470px;object-fit:cover;border-radius:18px;margin:20px 0}.article-content{font-size:17px;color:#263a54;overflow-wrap:anywhere}.article-content h2,.article-content h3{color:#10213a;margin-top:30px}.article-content a{color:#087bd7}.contact{display:inline-block;margin-top:25px}footer{text-align:center;padding:26px;background:#071426;color:#b7c8dc;font-size:13px}@media(max-width:800px){.posts{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-header{padding:0 18px}.blog-header nav{gap:13px}}@media(max-width:560px){.posts{grid-template-columns:1fr}.blog-hero{padding:28px 22px}.blog-header{height:auto;min-height:68px;flex-wrap:wrap;gap:8px;padding:14px 18px}.blog-header nav{width:100%;justify-content:space-between}.wrap{padding:28px 16px 55px}}

/* =========================================
   SAFEVISION BLOG - DESIGN REFINEMENT
========================================= */

.blog-hero {
    padding: clamp(30px, 5vw, 58px);
    margin-bottom: 42px;
    box-shadow: 0 18px 45px rgba(7, 26, 56, .12);
}

.posts {
    align-items: stretch;
    gap: 28px;
}

.post {
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.post:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(16, 33, 58, .12);
}

.thumb {
    display: block;
    height: 230px;
    overflow: hidden;
    flex-shrink: 0;
}

.thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.post:hover .thumb img {
    transform: scale(1.045);
}

.post-body {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 24px 25px;
    background: #fff;
}

.post-body .meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 13px;
    color: #1689ed;
    font-size: 11px;
    letter-spacing: .8px;
    line-height: 1.5;
}

.post-body h2 {
    margin: 0 0 12px;
    font-size: 21px;
    line-height: 1.35;
}

.post-body p:not(.meta) {
    margin: 0 0 20px;
    line-height: 1.7;
    font-size: 14px;
}

.post-body .read {
    margin-top: auto;
    display: inline-block;
    padding-top: 8px;
}

.article-wrap {
    max-width: 900px;
    margin-top: 65px;
    margin-bottom: 90px;
}

.article-wrap > .meta {
    display: inline-flex;
    padding: 8px 13px;
    border-radius: 30px;
    background: #e8f3ff;
    margin: 24px 0 5px;
}

.article-wrap h1 {
    color: #10213a;
    margin: 14px 0 18px;
}

.lead {
    line-height: 1.8;
    margin-bottom: 28px;
}

.article-image {
    display: block;
    width: 100%;
    max-height: 500px;
    object-fit: cover;
    border-radius: 20px;
    margin: 30px 0;
    box-shadow: 0 12px 35px rgba(16, 33, 58, .10);
}

.article-content {
    font-size: 17px;
    line-height: 1.9;
    color: #34465e;
}

.article-content p {
    margin: 0 0 22px;
}

.article-content h2 {
    font-size: 29px;
    line-height: 1.3;
}

.article-content h3 {
    font-size: 23px;
}

.article-content ul,
.article-content ol {
    padding-left: 25px;
    margin-bottom: 24px;
}

.article-content blockquote {
    margin: 25px 0;
    padding: 18px 22px;
    border-left: 4px solid #1689ed;
    background: #edf6ff;
    border-radius: 0 12px 12px 0;
}

@media (max-width: 800px) {
    .thumb {
        height: 220px;
    }
}

@media (max-width: 560px) {
    .blog-hero {
        padding: 28px 22px;
        border-radius: 17px;
    }

    .thumb {
        height: 220px;
    }

    .post-body {
        padding: 19px;
    }

    .article-wrap {
        margin-top: 35px;
        padding: 0 18px;
    }

    .article-content {
        font-size: 16px;
        line-height: 1.85;
    }

    .article-image {
        border-radius: 14px;
    }
}


/* =========================================
   DETAIL ARTIKEL - REFINEMENT FINAL
========================================= */

.article-wrap {
    width: min(100% - 48px, 1000px);
    max-width: 1000px;
    margin: 65px auto 100px;
}

.article-wrap h1 {
    font-size: clamp(36px, 4.5vw, 54px);
    line-height: 1.16;
    letter-spacing: -1.4px;
    font-weight: 900;
    margin: 18px 0 20px;
}

.article-wrap > .meta {
    font-size: 12px;
    letter-spacing: 1px;
}

.article-wrap .lead {
    font-size: 20px;
    line-height: 1.8;
    color: #60718a;
    margin-bottom: 28px;
}

.article-image {
    width: 100%;
    max-height: 540px;
    object-fit: cover;
    border-radius: 20px;
    margin: 25px 0 35px;
}

.article-content {
    width: 100%;
    font-size: 18px;
    line-height: 1.95;
    color: #34465e;
    overflow-wrap: anywhere;
}

.article-content p {
    margin: 0 0 24px;
}

.article-content h2 {
    font-size: 30px;
    line-height: 1.35;
    margin: 38px 0 18px;
}

.article-content h3 {
    font-size: 24px;
    line-height: 1.4;
    margin: 30px 0 14px;
}

.article-content ul,
.article-content ol {
    padding-left: 28px;
    margin: 0 0 26px;
}

.article-content li {
    margin-bottom: 9px;
}

.article-content blockquote {
    padding: 22px 25px;
    border-left: 5px solid #1689ed;
    background: #eaf4ff;
    border-radius: 0 14px 14px 0;
    margin: 30px 0;
}

.article-wrap > .contact {
    padding: 15px 23px;
    border-radius: 10px;
    font-size: 15px;
    box-shadow: 0 8px 20px rgba(22, 137, 237, .18);
    transition: transform .2s ease, box-shadow .2s ease;
}

.article-wrap > .contact:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(22, 137, 237, .25);
}

@media (max-width: 700px) {
    .article-wrap {
        width: 100%;
        margin: 35px auto 65px;
        padding: 0 20px;
    }

    .article-wrap h1 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .article-wrap .lead {
        font-size: 17px;
    }

    .article-content {
        font-size: 16px;
        line-height: 1.85;
    }

    .article-content h2 {
        font-size: 25px;
    }

    .article-content h3 {
        font-size: 21px;
    }

    .article-image {
        max-height: 350px;
        border-radius: 15px;
        margin: 20px 0 28px;
    }
}