:root {
    --kb-primary: #2563eb; --kb-primary-dark: #1e40af; --kb-primary-light: #dbeafe;
    --kb-bg: #f5f7fb; --kb-card: #ffffff; --kb-text: #1f2937; --kb-text-muted: #6b7280;
    --kb-border: #e5e7eb; --kb-success: #10b981; --kb-warning: #f59e0b; --kb-error: #ef4444;
    --kb-radius: 16px; --kb-radius-sm: 8px;
    --kb-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 12px rgba(0,0,0,.04);
    --kb-shadow-lg: 0 4px 12px rgba(0,0,0,.08), 0 12px 32px rgba(0,0,0,.06);
    --kb-container: 1200px; --kb-transition: .2s ease;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.6; color: var(--kb-text); background: var(--kb-bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--kb-primary); text-decoration: none; transition: color var(--kb-transition); }
a:hover { color: var(--kb-primary-dark); }
h1,h2,h3,h4 { line-height: 1.25; margin: 0 0 .6em; color: var(--kb-text); }
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.875rem); }
h3 { font-size: 1.25rem; }
.kb-skip-link { position: absolute; left: -9999px; top: 0; background: var(--kb-primary); color: #fff; padding: .5rem 1rem; z-index: 9999; }
.kb-skip-link:focus { left: 0; }
.kb-container { max-width: var(--kb-container); margin: 0 auto; padding: 0 1rem; }
.kb-section { padding: 2rem 0; }
.kb-section--alt { background: #fff; }
.kb-section__title { margin-bottom: 1.5rem; }
.kb-section__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.kb-link { font-weight: 600; }
.kb-header { background: #fff; border-bottom: 1px solid var(--kb-border); position: sticky; top: 0; z-index: 100; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.kb-header__inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 1rem; }
.kb-logo { display: flex; align-items: center; }
.kb-logo__text { font-size: 1.35rem; font-weight: 800; color: var(--kb-text); }
.kb-logo__text span { color: var(--kb-primary); }
.kb-nav { display: none; }
.kb-nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: 1.5rem; }
.kb-nav__list a { color: var(--kb-text); font-weight: 500; font-size: .95rem; padding: .5rem 0; }
.kb-nav__list a:hover { color: var(--kb-primary); }
.kb-header__actions { display: flex; gap: .5rem; align-items: center; }
.kb-burger { display: flex; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; padding: .5rem; }
.kb-burger span { width: 24px; height: 2px; background: var(--kb-text); transition: transform var(--kb-transition); }
.kb-btn { display: inline-flex; align-items: center; justify-content: center; padding: .75rem 1.25rem; border-radius: var(--kb-radius-sm); font-weight: 600; font-size: .95rem; border: 0; cursor: pointer; transition: all var(--kb-transition); text-decoration: none; background: var(--kb-primary); color: #fff; }
.kb-btn:hover { background: var(--kb-primary-dark); color: #fff; transform: translateY(-1px); }
.kb-btn--primary { background: var(--kb-primary); color: #fff; }
.kb-btn--outline { background: transparent; color: var(--kb-primary); border: 2px solid var(--kb-primary); }
.kb-btn--outline:hover { background: var(--kb-primary); color: #fff; }
.kb-btn--sm { padding: .5rem .9rem; font-size: .875rem; }
.kb-btn--lg { padding: 1rem 1.75rem; font-size: 1rem; }
.kb-hero { position: relative; background: linear-gradient(135deg, var(--kb-primary) 0%, var(--kb-primary-dark) 100%); color: #fff; padding: 3rem 0 4rem; overflow: hidden; }
.kb-hero__bg { position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 20%, rgba(255,255,255,.1) 0%, transparent 50%); }
.kb-hero__inner { position: relative; text-align: center; }
.kb-hero__title { color: #fff; margin-bottom: .5rem; }
.kb-hero__sub { opacity: .9; margin-bottom: 2rem; font-size: 1.05rem; }
.kb-hero__search { background: #fff; border-radius: var(--kb-radius); padding: 1rem; display: grid; gap: .75rem; box-shadow: var(--kb-shadow-lg); max-width: 900px; margin: 0 auto; }
.kb-hero__field { display: flex; flex-direction: column; gap: .25rem; text-align: left; }
.kb-hero__field label { font-size: .8rem; font-weight: 600; color: var(--kb-text-muted); }
.kb-hero__field input, .kb-hero__field select { padding: .65rem .75rem; border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm); font-size: .95rem; background: #fff; color: var(--kb-text); }
.kb-hero__search .kb-btn { width: 100%; }
.kb-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.kb-grid--4 { grid-template-columns: 1fr; }
.kb-card { background: var(--kb-card); border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); overflow: hidden; transition: all var(--kb-transition); }
.kb-card:hover { box-shadow: var(--kb-shadow-lg); transform: translateY(-2px); }
.kb-card--body { padding: 1.5rem; }
.kb-listing-card { display: flex; flex-direction: column; }
.kb-listing-card__img { position: relative; aspect-ratio: 3/2; overflow: hidden; background: #f0f0f0; }
.kb-listing-card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.kb-listing-card:hover .kb-listing-card__img img { transform: scale(1.05); }
.kb-listing-card__body { padding: 1rem 1.25rem 1.25rem; flex: 1; display: flex; flex-direction: column; }
.kb-listing-card__cat { display: inline-block; font-size: .75rem; font-weight: 600; color: var(--kb-primary); text-transform: uppercase; margin-bottom: .5rem; letter-spacing: .5px; }
.kb-listing-card__title { margin-bottom: .5rem; font-size: 1.1rem; }
.kb-listing-card__title a { color: var(--kb-text); }
.kb-listing-card__title a:hover { color: var(--kb-primary); }
.kb-listing-card__excerpt { color: var(--kb-text-muted); font-size: .9rem; margin: .5rem 0; flex: 1; }
.kb-listing-card__meta { font-size: .85rem; color: var(--kb-text-muted); margin-top: .5rem; padding-top: .75rem; border-top: 1px solid var(--kb-border); }
.kb-listing-card--featured { border: 2px solid var(--kb-warning); }
.kb-listing-card--premium { border: 2px solid var(--kb-primary); }
.kb-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .5rem; }
.kb-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .2rem .6rem; border-radius: 999px; font-size: .7rem; font-weight: 700; letter-spacing: .3px; }
.kb-badge--verified { background: #d1fae5; color: #065f46; }
.kb-badge--featured { background: #fef3c7; color: #92400e; }
.kb-badge--premium { background: #dbeafe; color: #1e40af; }
.kb-badge--sponsored { background: #fee2e2; color: #991b1b; }
.kb-listing-card__img .kb-badges { position: absolute; top: .75rem; left: .75rem; }
.kb-tax-badges { display: flex; gap: .4rem; flex-wrap: wrap; margin: .5rem 0; }
.kb-chip { display: inline-flex; align-items: center; gap: .25rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 500; background: var(--kb-primary-light); color: var(--kb-primary-dark); }
.kb-chip:hover { background: var(--kb-primary); color: #fff; }
.kb-stars { display: inline-flex; gap: 2px; color: #fbbf24; font-size: 1rem; }
.kb-star--empty { color: #e5e7eb; }
.kb-rating-inline { display: flex; align-items: center; gap: .4rem; font-size: .875rem; color: var(--kb-text-muted); margin: .25rem 0; }
.kb-hero-img { width: 100%; max-height: 480px; overflow: hidden; background: #000; }
.kb-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.kb-listing-single__head { margin: 1.5rem 0; }
.kb-listing-single__title { margin-bottom: .5rem; }
.kb-listing-single__grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.kb-listing-single__main { display: flex; flex-direction: column; gap: 1.5rem; }
.kb-listing-single__sidebar { display: flex; flex-direction: column; gap: 1rem; }
.kb-actions { display: grid; gap: .5rem; grid-template-columns: repeat(2, 1fr); }
.kb-action { display: flex; align-items: center; justify-content: center; gap: .4rem; padding: .85rem .75rem; border-radius: var(--kb-radius-sm); font-weight: 600; font-size: .9rem; background: #f3f4f6; color: var(--kb-text); transition: all var(--kb-transition); }
.kb-action:hover { transform: translateY(-2px); box-shadow: var(--kb-shadow); }
.kb-action--call { background: #dbeafe; color: #1e40af; }
.kb-action--wa { background: #d1fae5; color: #065f46; }
.kb-action--web { background: #ede9fe; color: #5b21b6; }
.kb-action--fb { background: #dbeafe; color: #1d4ed8; }
.kb-action--dir { background: #fef3c7; color: #92400e; }
.kb-action__icon { font-size: 1.1rem; }
.kb-info-list { margin: 0; }
.kb-info-list__row { display: grid; grid-template-columns: 120px 1fr; gap: .5rem; padding: .75rem 0; border-bottom: 1px solid var(--kb-border); }
.kb-info-list__row:last-child { border-bottom: 0; }
.kb-info-list dt { font-weight: 600; color: var(--kb-text-muted); font-size: .9rem; }
.kb-info-list dd { margin: 0; word-break: break-word; }
.kb-map { border-radius: var(--kb-radius-sm); overflow: hidden; }
.kb-map iframe { width: 100%; height: 360px; border: 0; display: block; }
.kb-breadcrumb { padding: 1rem 0; font-size: .85rem; }
.kb-breadcrumb ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem; }
.kb-breadcrumb li:not(:last-child)::after { content: "›"; margin-left: .4rem; color: var(--kb-text-muted); }
.kb-breadcrumb a { color: var(--kb-text-muted); }
.kb-breadcrumb a:hover { color: var(--kb-primary); }
.kb-cat-grid { display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
.kb-cat-card { background: #fff; border-radius: var(--kb-radius); padding: 1.25rem 1rem; text-align: center; box-shadow: var(--kb-shadow); transition: all var(--kb-transition); display: flex; flex-direction: column; gap: .25rem; color: var(--kb-text); }
.kb-cat-card:hover { transform: translateY(-3px); box-shadow: var(--kb-shadow-lg); color: var(--kb-primary); }
.kb-cat-card__icon { font-size: 2rem; }
.kb-cat-card__name { font-weight: 600; font-size: .95rem; }
.kb-cat-card__count { font-size: .8rem; color: var(--kb-text-muted); }
.kb-cat-grid--sm { grid-template-columns: repeat(2, 1fr); }
.kb-cat-card--sm { padding: .75rem; }
.kb-bandar-grid { display: flex; flex-wrap: wrap; gap: .5rem; }
.kb-bandar-chip { padding: .5rem 1rem; background: #fff; border-radius: 999px; box-shadow: var(--kb-shadow); font-size: .9rem; color: var(--kb-text); transition: all var(--kb-transition); }
.kb-bandar-chip:hover { background: var(--kb-primary); color: #fff; transform: translateY(-1px); }
.kb-bandar-chip span { color: var(--kb-text-muted); font-size: .8rem; }
.kb-bandar-chip:hover span { color: rgba(255,255,255,.8); }
.kb-blog-card { background: #fff; border-radius: var(--kb-radius); overflow: hidden; box-shadow: var(--kb-shadow); }
.kb-blog-card__img { aspect-ratio: 16/9; overflow: hidden; display: block; }
.kb-blog-card__img img { width: 100%; height: 100%; object-fit: cover; }
.kb-blog-card__body { padding: 1rem 1.25rem; }
.kb-blog-card__body h3 { font-size: 1.05rem; margin-bottom: .4rem; }
.kb-blog-card__body p { font-size: .875rem; color: var(--kb-text-muted); }
.kb-blog-card__body time { font-size: .8rem; color: var(--kb-text-muted); }
.kb-sticky-mobile { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--kb-border); display: grid; grid-template-columns: repeat(3, 1fr); padding: .5rem; gap: .4rem; z-index: 90; box-shadow: 0 -4px 12px rgba(0,0,0,.08); padding-bottom: calc(.5rem + env(safe-area-inset-bottom)); }
.kb-sticky-btn { display: flex; flex-direction: column; align-items: center; gap: .15rem; padding: .5rem; border-radius: var(--kb-radius-sm); font-size: .75rem; font-weight: 600; color: #fff; }
.kb-sticky-btn span { font-size: .7rem; }
.kb-sticky-btn--call { background: var(--kb-primary); }
.kb-sticky-btn--wa { background: var(--kb-success); }
.kb-sticky-btn--dir { background: var(--kb-warning); }
.kb-archive-layout { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
.kb-filter__form { background: #fff; padding: 1rem; border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); display: grid; gap: .75rem; }
.kb-filter label { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.kb-filter input, .kb-filter select { padding: .6rem; border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm); font-size: .9rem; background: #fff; }
.kb-archive-head { margin-bottom: 1.5rem; }
.kb-archive-head__desc { color: var(--kb-text-muted); margin-top: .5rem; }
.kb-archive-head__count { font-size: .9rem; color: var(--kb-text-muted); }
.kb-form { display: grid; gap: 1rem; max-width: 720px; }
.kb-form label { display: flex; flex-direction: column; gap: .35rem; font-weight: 600; font-size: .9rem; }
.kb-form input, .kb-form select, .kb-form textarea { padding: .75rem; border: 1px solid var(--kb-border); border-radius: var(--kb-radius-sm); font-size: .95rem; font-family: inherit; background: #fff; }
.kb-form input:focus, .kb-form select:focus, .kb-form textarea:focus { outline: 0; border-color: var(--kb-primary); box-shadow: 0 0 0 3px var(--kb-primary-light); }
.kb-form--inline { grid-template-columns: 1fr auto; align-items: end; max-width: 100%; }
.kb-alert { padding: 1rem 1.25rem; border-radius: var(--kb-radius-sm); background: var(--kb-primary-light); color: var(--kb-primary-dark); margin-bottom: 1rem; }
.kb-alert--success { background: #d1fae5; color: #065f46; }
.kb-alert--error { background: #fee2e2; color: #991b1b; }
.kb-faq__item { background: #fff; border-radius: var(--kb-radius-sm); margin-bottom: .5rem; padding: 1rem 1.25rem; box-shadow: var(--kb-shadow); }
.kb-faq__item summary { font-weight: 600; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.kb-faq__item summary::-webkit-details-marker { display: none; }
.kb-faq__item summary::after { content: "+"; font-size: 1.5rem; color: var(--kb-primary); }
.kb-faq__item[open] summary::after { content: "−"; }
.kb-faq__item > div { margin-top: .75rem; color: var(--kb-text-muted); }
.kb-reviews__summary { display: flex; align-items: center; gap: 1rem; padding: 1rem; background: #fff; border-radius: var(--kb-radius-sm); margin-bottom: 1rem; }
.kb-reviews__avg { font-size: 2.5rem; font-weight: 800; color: var(--kb-primary); }
.kb-review { background: #fff; padding: 1rem 1.25rem; border-radius: var(--kb-radius-sm); margin-bottom: .75rem; box-shadow: var(--kb-shadow); }
.kb-review header { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .5rem; font-size: .875rem; }
.kb-review time { color: var(--kb-text-muted); margin-left: auto; }
.kb-modal { position: fixed; inset: 0; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1rem; }
.kb-modal__inner { background: #fff; border-radius: var(--kb-radius); padding: 2rem; max-width: 500px; width: 100%; position: relative; max-height: 90vh; overflow-y: auto; }
.kb-modal__close { position: absolute; top: 1rem; right: 1rem; background: none; border: 0; font-size: 1.5rem; cursor: pointer; color: var(--kb-text-muted); }
.kb-pricing { display: grid; gap: 1.5rem; grid-template-columns: 1fr; margin: 2rem 0; }
.kb-pricing__card { background: #fff; padding: 2rem; border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); text-align: center; position: relative; }
.kb-pricing__card--featured { border: 2px solid var(--kb-primary); }
.kb-pricing__tag { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--kb-primary); color: #fff; padding: .25rem .75rem; border-radius: 999px; font-size: .75rem; font-weight: 700; }
.kb-pricing__price { font-size: 2rem; font-weight: 800; color: var(--kb-primary); margin: .5rem 0 1rem; }
.kb-pricing__price span { font-size: .9rem; color: var(--kb-text-muted); font-weight: 400; }
.kb-pricing ul { list-style: none; padding: 0; margin: 1.5rem 0; text-align: left; }
.kb-pricing li { padding: .4rem 0; border-bottom: 1px solid var(--kb-border); }
.kb-ad { margin: 1.5rem 0; min-height: 90px; text-align: center; }
.kb-affiliate { margin: 2rem 0; padding: 1rem; background: #fff; border-radius: var(--kb-radius); box-shadow: var(--kb-shadow); text-align: center; }
.kb-footer { background: #1f2937; color: #d1d5db; padding: 3rem 0 1rem; margin-top: 3rem; }
.kb-footer__grid { display: grid; gap: 2rem; grid-template-columns: 1fr; margin-bottom: 2rem; }
.kb-footer h4 { color: #fff; margin-bottom: 1rem; }
.kb-footer a { color: #d1d5db; }
.kb-footer a:hover { color: #fff; }
.kb-footer__bottom { border-top: 1px solid #374151; padding-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; align-items: center; text-align: center; }
.kb-footer__menu { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.nav-links { display: flex; justify-content: center; gap: .5rem; margin-top: 2rem; }
.nav-links a, .nav-links span { padding: .5rem 1rem; background: #fff; border-radius: var(--kb-radius-sm); box-shadow: var(--kb-shadow); color: var(--kb-text); }
.nav-links .current { background: var(--kb-primary); color: #fff; }
@media (min-width: 640px) {
    .kb-grid { grid-template-columns: repeat(2, 1fr); }
    .kb-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .kb-cat-grid { grid-template-columns: repeat(3, 1fr); }
    .kb-hero__search { grid-template-columns: repeat(2, 1fr); }
    .kb-hero__search .kb-btn { grid-column: 1 / -1; }
    .kb-actions { grid-template-columns: repeat(3, 1fr); }
    .kb-footer__grid { grid-template-columns: repeat(2, 1fr); }
    .kb-pricing { grid-template-columns: repeat(3, 1fr); }
    .kb-footer__bottom { flex-direction: row; justify-content: space-between; }
}
@media (min-width: 960px) {
    .kb-container { padding: 0 2rem; }
    .kb-section { padding: 3rem 0; }
    .kb-grid { grid-template-columns: repeat(3, 1fr); }
    .kb-grid--4 { grid-template-columns: repeat(4, 1fr); }
    .kb-cat-grid { grid-template-columns: repeat(4, 1fr); }
    .kb-nav { display: block; }
    .kb-burger { display: none; }
    .kb-hero { padding: 5rem 0 6rem; }
    .kb-hero__search { grid-template-columns: 2fr 1.5fr 1.5fr auto; }
    .kb-hero__search .kb-btn { width: auto; grid-column: auto; }
    .kb-listing-single__grid { grid-template-columns: 2fr 1fr; }
    .kb-sidebar-sticky { position: sticky; top: 80px; }
    .kb-archive-layout { grid-template-columns: 280px 1fr; }
    .kb-footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; }
    .kb-actions-desktop { display: none; }
    .kb-sticky-mobile { display: none; }
    .kb-info-list__row { grid-template-columns: 160px 1fr; }
}
@media (min-width: 1200px) {
    .kb-cat-grid { grid-template-columns: repeat(6, 1fr); }
}
@media print {
    .kb-header, .kb-footer, .kb-sticky-mobile, .kb-ad, .kb-affiliate { display: none; }
}