/* GLOBAL */
*{box-sizing:border-box;margin:0;padding:0;}
body{
    font-family:"Poppins",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:#f6fbff;
    color:#1b2330;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
main{min-height:60vh;}
.container{
    max-width:1100px;
    margin:0 auto;
    padding:20px;
}

/* topbar fixed */
.topbar{
    background: linear-gradient(90deg,#0057ff,#00a5ff);
    color:#fff;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    text-align:center;
    font-size:13px;
    padding:5px 10px;
    font-weight:500;
    z-index:6000;
}

/* header masuk tepat di bawah topbar */
.site-header{
    position:fixed;
    top:25px;  /* sebelumnya 32px */
    width:100%;
    z-index:5000;
    background:#fff;
    border-bottom:1px solid #e0e7f1;
}

/* kurangi padding header di mobile */
@media(max-width:768px){
    .header-inner{
        padding:8px 16px; /* lebih kecil */
    }
}
body{
    padding-top:77px; /* sebelumnya 80px */
}
.topbar{
    box-shadow:0 1px 4px rgba(0,0,0,.08);
    border-bottom:1px solid rgba(255,255,255,.15);
}

/* ============================
HEADER & NAVBAR
============================ */


.header-inner{
max-width:1100px;
margin:0 auto;
padding:12px 20px;
display:flex;
align-items:center;
justify-content:space-between;
gap:20px;
}

/* ============================
BRAND
============================ */
.brand{
display:flex;
align-items:center;
gap:4px;
font-weight:700;
font-size:20px;
}

.brand-main{
color:#0057ff;
}

.brand-sub{
color:#111827;
padding:2px 6px;
border-radius:999px;
background:#e7f1ff;
font-size:13px;
}

/* ============================
NAV
============================ */
.main-nav{
display:flex;
}

.main-nav .menu{
list-style:none;
display:flex;
align-items:center;
gap:18px;
}

.main-nav .menu > li{
position:relative;
}

.main-nav .menu > li > a,
.main-nav .menu > li > button{
font-size:14px;
font-weight:500;
background:none;
border:none;
cursor:pointer;
color:#1f2933;
}

.main-nav .menu > li > a:hover,
.main-nav .menu > li > button:hover{
color:#0057ff;
}

/* ============================
BUTTON: GET QUOTE
============================ */
.btn-nav{
padding:7px 14px;
border-radius:999px;
border:1px solid #0057ff;
color:#0057ff!important;
}

.btn-nav:hover{
background:#0057ff;
color:#fff!important;
}

/* ============================
DROPDOWN
============================ */
.has-sub .dropdown{
list-style:none;
position:absolute;
top:34px;
left:0;
display:none;
min-width:210px;
padding:6px 0;
border-radius:10px;
background:#fff;
box-shadow:0 16px 40px rgba(15,23,42,0.12);
}

/* Desktop open */
.has-sub:hover .dropdown{
display:block;
}

/* Mobile open */
.has-sub.open .dropdown{
display:block;
}

.dropdown li a{
display:block;
padding:10px 14px;
font-size:13px;
color:#111827;
}

.dropdown li a:hover{
background:#f3f6ff;
}

/* ============================
HAMBURGER
============================ */
.hamburger{
display:none;
background:none;
border:1px solid #d1ddf0;
border-radius:8px;
padding:6px 9px;
font-size:18px;
cursor:pointer;
}

/* HERO */
.hero{
background:linear-gradient(135deg,#0057ff 0%,#00a5ff 100%);
color:#fff;
padding:60px 20px 70px;
}


.hero{
    position:relative;
    z-index:1;
}

.hero-inner{
    max-width:800px;
    margin:0 auto;
    text-align:center;
}
.hero h1{
    font-size:34px;
    margin-bottom:10px;
    font-weight:700;
}
.hero p{
    font-size:17px;
    opacity:.9;
    margin-bottom:24px;
}

/* SEARCH BOX */
.search-box{
    display:flex;
    justify-content:center;
    margin-bottom:16px;
}
.search-box input{
    width:68%;
    max-width:480px;
    padding:13px 16px;
    border:none;
    border-radius:999px 0 0 999px;
    font-size:15px;
    outline:none;
}
.search-box button{
    padding:13px 20px;
    border:none;
    border-radius:0 999px 999px 0;
    background:#ffffff;
    color:#0057ff;
    font-weight:600;
    cursor:pointer;
}
.search-box button:hover{
    background:#e7f1ff;
}
.hero-tags{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:8px;
    margin-top:4px;
}
.hero-tags span{
    padding:4px 10px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.45);
    font-size:11px;
    opacity:0.9;
}

/* HOME SECTIONS */
.home-section{
    margin-top:32px;
}
.home-section h2{
    font-size:24px;
    margin-bottom:6px;
    color:#0f172a;
}
.section-sub{
    font-size:14px;
    color:#64748b;
    margin-bottom:18px;
}

/* CATEGORY GRID */
.category-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:18px;
}
.card{
    background:#ffffff;
    border-radius:14px;
    padding:18px 18px 16px;
    box-shadow:0 14px 35px rgba(148,163,184,0.15);
    border:1px solid #e2e8f0;
}
.cat-card h3{
    font-size:16px;
    margin-bottom:6px;
    color:#0f172a;
}
.cat-card p{
    font-size:13px;
    color:#6b7280;
    margin-bottom:12px;
}
.chip{
    display:inline-block;
    font-size:12px;
    font-weight:500;
    color:#0057ff;
}

/* TWO COLUMNS */
.two-cols{
    display:grid;
    grid-template-columns:2fr 1.3fr;
    gap:20px;
    align-items:flex-start;
}
.two-cols .col p{
    font-size:14px;
    color:#4b5563;
    margin-bottom:12px;
}
.list-check{
    list-style:none;
    margin:8px 0 14px;
}
.list-check li{
    font-size:14px;
    color:#111827;
    margin-bottom:6px;
}
.list-check li::before{
    content:"✔";
    color:#10b981;
    margin-right:6px;
    font-size:12px;
}
.card-soft{
    background:#f8fbff;
    border-style:dashed;
}

/* BUTTONS */
.btn-main{
    display:inline-block;
    padding:10px 20px;
    border-radius:999px;
    background:#0057ff;
    color:#fff;
    font-size:14px;
    font-weight:600;
}
.btn-main:hover{
    background:#0042c7;
}
.btn-outline{
    display:inline-block;
    padding:9px 17px;
    border-radius:999px;
    border:1px solid #0057ff;
    font-size:13px;
    color:#0057ff;
}
.btn-outline:hover{
    background:#0057ff;
    color:#fff;
}
.btn-full{
    width:100%;
    text-align:center;
}

/* GENERIC PAGE */
.page{
    max-width:900px;
    margin:30px auto;
}
.page-narrow{
    max-width:700px;
}
.page h1{
    font-size:26px;
    margin-bottom:8px;
    color:#0f172a;
}
.page-sub{
    font-size:14px;
    color:#64748b;
    margin-bottom:20px;
}

/* COMPARE TABLE */
.compare-table{
    display:grid;
    gap:8px;
    margin-top:16px;
}
.compare-table .row{
    display:grid;
    grid-template-columns:1.3fr 1.4fr 1fr 1.2fr 1.5fr;
    background:#ffffff;
    border-radius:10px;
    padding:12px 14px;
    font-size:13px;
    border:1px solid #e2e8f0;
}
.compare-table .head{
    background:#e5f0ff;
    font-weight:600;
}

/* QUOTE FORM */
.quote-form{
    margin-top:14px;
}
.field{
    margin-bottom:16px;
}
.field label{
    display:block;
    font-size:13px;
    font-weight:600;
    margin-bottom:5px;
    color:#0f172a;
}
.field input,
.field select,
.field textarea{
    width:100%;
    padding:10px 11px;
    border-radius:10px;
    border:1px solid #cbd5e1;
    font-size:14px;
}
.field textarea{
    min-height:90px;
    resize:vertical;
}
.dual{
    display:flex;
    gap:14px;
}
.dual .field{flex:1;}

/* CALCULATOR */
.calc-card{
    margin-top:16px;
}
.calc-form{
    margin-bottom:18px;
}
.calc-result h3{
    font-size:18px;
    margin-bottom:4px;
}
.calc-result p{
    margin-bottom:4px;
}
.calc-result .note{
    font-size:12px;
    color:#6b7280;
}

/* PRODUCT */
.product{
    max-width:900px;
    margin:30px auto;
}
.product h1{
    font-size:26px;
    margin-bottom:12px;
}
.p-big{
    font-size:15px;
    color:#4b5563;
    margin-bottom:22px;
}
.feature-boxes{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin-bottom:20px;
}
.feature-boxes .box{
    flex:1;
    min-width:260px;
    background:#ffffff;
    border-radius:14px;
    padding:16px;
    border:1px solid #e2e8f0;
}
.feature-boxes h3{
    font-size:16px;
    margin-bottom:6px;
}
.feature-boxes ul{
    margin-left:16px;
    font-size:13px;
    color:#4b5563;
}

/* PRODUCT CARDS */
.cards{
    display:flex;
    flex-wrap:wrap;
    gap:16px;
    margin:10px 0 20px;
}
.cards .card{
    flex:1;
    min-width:220px;
    text-align:left;
}
.card.premium{
    border:1.5px solid #0057ff;
}

/* FAQ */
.faq h2{
    font-size:20px;
    margin:20px 0 10px;
}
.faq .q{
    margin-bottom:14px;
}
.faq .q h3{
    font-size:15px;
    margin-bottom:4px;
}
.faq .q p{
    font-size:14px;
    color:#4b5563;
}

/* FOOTER */
.site-footer{
    border-top:1px solid #e2e8f0;
    margin-top:40px;
    background:#ffffff;
}
.footer-inner{
    max-width:1100px;
    margin:0 auto;
    padding:24px 20px 10px;
    display:grid;
    grid-template-columns:2fr 1.3fr 1.3fr;
    gap:24px;
}
.footer-col h4{
    font-size:14px;
    margin-bottom:8px;
    color:#0f172a;
}
.footer-col p{
    font-size:13px;
    color:#6b7280;
}
.footer-col ul{
    list-style:none;
}
.footer-col li{
    margin-bottom:4px;
}
.footer-col a{
    font-size:13px;
    color:#4b5563;
}
.footer-col a:hover{
    color:#0057ff;
}
.footer-bottom{
    max-width:1100px;
    margin:0 auto;
    padding:12px 20px 18px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    border-top:1px solid #e5e7eb;
    font-size:12px;
    color:#6b7280;
}
.footer-links a{
    margin-left:4px;
}

/* RESPONSIVE */
@media(max-width:900px){
    .two-cols{
        grid-template-columns:1fr;
    }
}
@media(max-width:768px){
    .header-inner{
        padding:10px 16px;
    }
    .main-nav{
        position:absolute;
        inset:56px 0 auto 0;
        background:#ffffff;
        border-bottom:1px solid #e5e7f0;
        padding:10px 16px 14px;
        display:none;
    }
    .site-header.nav-open .main-nav{
        display:block;
    }
    .main-nav .menu{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }
    .has-sub .dropdown{
        position:static;
        margin-top:4px;
        box-shadow:none;
        border-radius:10px;
        border:1px solid #e5e7f0;
        width:100%;
    }
    .hamburger{
        display:block;
    }
    .hero{
        padding:40px 16px 50px;
    }
    .hero h1{
        font-size:26px;
    }
    .search-box{
        flex-direction:column;
        align-items:stretch;
    }
    .search-box input,
    .search-box button{
        width:100%;
        border-radius:999px;
    }
    .search-box button{
        margin-top:8px;
    }
    .container{
        padding:16px;
    }
    .category-grid{
        grid-template-columns:1fr;
    }
    .footer-inner{
        grid-template-columns:1fr;
    }
    .footer-bottom{
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }
    .compare-table .row{
        grid-template-columns:1.2fr 1.2fr;
    }
    .dual{
        flex-direction:column;
    }
}

.search-page .search-list {
    list-style: none;
    padding: 0;
}

.search-page .search-list li {
    margin: 12px 0;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.search-page .search-list a {
    color: #0c2d66;
    font-weight: 600;
    font-size: 17px;
}


@media(max-width:768px){
    .topbar{
        font-size:12px;
        padding:8px 10px;
    }
    body{
        padding-top:50px;
    }
}
/* Biar link di dalam list-check kelihatan jelas */
.list-check a {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.list-check a::after {
    content: " →";
    font-weight: 700;
}

.list-check a:hover {
    text-decoration: none;
}

.list-links {
    list-style: none;
    margin: 1rem 0;
    padding: 0;
}

.list-links li + li {
    margin-top: 0.25rem;
}

.list-links a {
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.list-links a::after {
    content: " →";
    font-weight: 700;
}

.list-links a:hover {
    text-decoration: none;
}

.related .list-links a {
    display: inline-block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

.tool-card {
    padding: 18px 20px;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    text-decoration: none;
    color: #111;
    transition: 0.2s ease;
}

.tool-card:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 10px rgba(59,130,246,0.2);
    transform: translateY(-3px);
}

.tool-card h3 {
    margin: 0 0 6px;
    font-size: 17px;
    color: #0f172a;
}

.tool-card p {
    margin: 0;
    color: #475569;
    font-size: 14px;
}


.insurance-grid {
    display: grid;
    gap: 25px;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    margin-top: 25px;
}

.ins-card {
    border: 1px solid #e4e7eb;
    padding: 25px;
    border-radius: 12px;
    background: #fff;
    transition: 0.2s;
}

.ins-card:hover {
    border-color: #0d6efd;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.ins-card h3 {
    margin-bottom: 8px;
    font-size: 1.2rem;
}

.ins-card p {
    color: #555;
    font-size: .95rem;
}

.related ul.list-links a {
  display: inline-block;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  white-space: normal;
  line-height: 1.4;
}

.related ul.list-links li {
  margin-bottom: 10px;
}

.author-box img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    object-fit: cover;
}

img {
    max-width: 100%;
    height: auto;
}