:root {
    --tr-orange: #c2410c;
    --tr-orange-bright: #ea580c;
    --tr-ink: #172033;
    --tr-muted: #64748b;
    --tr-line: #e2e8f0;
    --tr-soft: #fff7ed;
}

.seo-page, .blog-page { color: var(--tr-ink); background: #f8fafc; }
.seo-shell, .blog-article-shell { width: min(1180px, calc(100% - 2rem)); margin-inline: auto; }
.seo-hero, .blog-hero, .blog-article-header {
    padding: clamp(3.5rem, 7vw, 5.5rem) 0 calc(clamp(3.5rem, 7vw, 5.5rem) + 3.75rem);
    color: #fff;
    background: radial-gradient(circle at 82% 8%, rgba(255,255,255,.18), transparent 28%), linear-gradient(135deg, #7c2d12, #c2410c 55%, #ea580c);
}
body.seo-page .seo-hero h1, .blog-hero h1, .blog-article-header h1 { max-width: 900px; margin: .6rem 0 1rem; color:#fff !important; font-size: clamp(2.15rem, 5vw, 4.2rem); line-height:1.07; letter-spacing:-.04em; }
.seo-hero p, .blog-hero p, .blog-lead { max-width: 780px; margin:0; color:#ffedd5; font-size:clamp(1rem, 2vw, 1.2rem); line-height:1.75; }
.seo-eyebrow { display:inline-flex; padding:.42rem .82rem; color:#7c2d12; background:#ffedd5; border-radius:999px; font-size:.78rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; }
.seo-breadcrumb { display:flex; flex-wrap:wrap; gap:.55rem; margin-bottom:1.5rem; color:rgba(255,255,255,.78); font-size:.9rem; }
.seo-breadcrumb a { color:#fff; text-decoration:underline; text-underline-offset:3px; }
/* Keep hero links legible when global navigation hover styles are applied. */
body.seo-page .seo-hero a,
body.seo-page .seo-hero a:hover,
body.seo-page .seo-hero a:focus,
body.seo-page .seo-hero a:active {
    color:#fff !important;
}
body.seo-page .seo-hero .seo-breadcrumb a:hover,
body.seo-page .seo-hero .seo-breadcrumb a:focus {
    color:#ffedd5 !important;
    text-decoration-thickness:2px;
}
.seo-keyword-list, .blog-tags { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.6rem; }
.seo-keyword-list span, .blog-tags span { padding:.48rem .78rem; border:1px solid rgba(255,255,255,.32); border-radius:999px; color:#fff; background:rgba(124,45,18,.3); font-size:.86rem; }
.seo-search-shell { position:relative; z-index:2; margin-top:-3.75rem; background:transparent; border:0; }
.seo-search-shell .filter-and-search { width:min(1180px, calc(100% - 2rem)); margin:0 auto !important; }
.seo-search-shell .search-properti {
    padding:1rem !important;
    background:#fff;
    border:1px solid rgba(255,255,255,.65);
    border-radius:18px !important;
    box-shadow:0 18px 42px rgba(79,31,12,.22);
}
.seo-search-shell .wrapper-input-search { display:grid; grid-template-columns:minmax(0,1fr) 170px 120px auto; gap:.75rem; align-items:center; }
.seo-search-shell .input-group { min-width:0; }
.seo-search-shell .form-search-keyword-agent,
.seo-search-shell #listingOrder {
    height:48px;
    border:1px solid #d8e0ea;
    border-radius:12px;
    color:var(--tr-ink) !important;
    background:#fff;
    box-shadow:none;
}
.seo-search-shell .form-search-keyword-agent { padding-inline:1rem 3rem; }
.seo-search-shell .btn-searching-filter,
.seo-search-shell .btn-outline-primary {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
    padding:.65rem 1rem;
    border-radius:12px;
    font-weight:800 !important;
    white-space:nowrap;
}
.seo-search-shell .btn-searching-filter { background:var(--tr-orange); color:#fff; }
.seo-search-shell .btn-searching-filter:hover { background:#9a3412; color:#fff; }
.seo-search-shell .btn-outline-primary { color:#9a3412; border-color:#fdba74; background:#fff7ed; }
.seo-search-shell .btn-outline-primary:hover { color:#fff; border-color:#c2410c; background:#c2410c; }
.seo-listing-section, .blog-list-section { padding:clamp(2.5rem, 6vw, 5rem) 0; }
.seo-section-heading { display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.75fr); gap:2rem; align-items:end; margin-bottom:2rem; }
.seo-section-heading span { color:var(--tr-orange); font-size:.82rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.seo-section-heading h2 { margin:.35rem 0 0; color:var(--tr-ink); font-size:clamp(1.65rem, 3vw, 2.45rem); letter-spacing:-.025em; }
.seo-section-heading p { margin:0; color:var(--tr-muted); line-height:1.7; }
.seo-property-grid, .blog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.35rem; }
.seo-property-card, .blog-card { overflow:hidden; display:flex; flex-direction:column; background:#fff; border:1px solid var(--tr-line); border-radius:20px; box-shadow:0 14px 34px rgba(15,23,42,.07); transition:transform .2s ease, box-shadow .2s ease; }
.seo-property-card:hover, .blog-card:hover { transform:translateY(-3px); box-shadow:0 20px 44px rgba(15,23,42,.12); }
.seo-property-main, .blog-card-link { display:flex; flex:1; flex-direction:column; color:inherit; text-decoration:none; }
.seo-property-image-wrap, .blog-card-image-wrap { position:relative; overflow:hidden; aspect-ratio:16/10; background:#e2e8f0; }
.seo-property-image, .blog-card-image { width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.seo-property-card:hover .seo-property-image, .blog-card:hover .blog-card-image { transform:scale(1.025); }
.seo-property-type, .blog-featured { position:absolute; top:.85rem; left:.85rem; padding:.38rem .65rem; border-radius:999px; color:#fff; background:rgba(23,32,51,.87); font-size:.75rem; font-weight:800; }
.seo-property-body, .blog-card-body { display:flex; flex:1; flex-direction:column; padding:1.15rem; }
.seo-property-price-row { display:flex; align-items:start; justify-content:space-between; gap:.8rem; margin-bottom:.75rem; }
.seo-property-price-row strong { color:var(--tr-orange); font-size:1.1rem; }
.seo-property-price-row small { color:var(--tr-muted); text-align:right; }
.seo-property-body h2, .blog-card-body h2 { margin:0 0 .55rem; color:var(--tr-ink); font-size:1.12rem; line-height:1.35; }
.seo-property-location { margin:0 0 .55rem; color:var(--tr-muted); font-size:.88rem; }
.seo-property-description, .blog-card-body p { display:-webkit-box; overflow:hidden; margin:0 0 1rem; color:#475569; line-height:1.6; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.seo-property-facts { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:auto; }
.seo-property-facts span { padding:.32rem .48rem; color:#475569; background:#f1f5f9; border-radius:7px; font-size:.75rem; font-weight:700; }
.seo-property-agent { display:flex; align-items:center; gap:.7rem; padding:.85rem 1.1rem; color:var(--tr-ink); border-top:1px solid var(--tr-line); text-decoration:none; }
.seo-property-agent img { width:38px; height:38px; object-fit:cover; border-radius:50%; }
.seo-property-agent > span:nth-child(2) { display:flex; min-width:0; flex:1; flex-direction:column; }
.seo-property-agent strong, .seo-property-agent small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.seo-property-agent small { color:var(--tr-muted); }
.seo-pager { display:flex; justify-content:center; margin-top:2.2rem; }
.seo-empty { padding:clamp(2rem,5vw,4rem); text-align:center; background:#fff; border:1px dashed #cbd5e1; border-radius:20px; }
.seo-empty i { color:var(--tr-orange); font-size:3rem; }
.seo-empty h2 { margin:.7rem 0; }
.seo-empty p { color:var(--tr-muted); }
.seo-guide-section { padding:clamp(2.8rem,6vw,5rem) 0; color:#fff; background:var(--tr-ink); }
.seo-guide-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:clamp(2rem,6vw,6rem); align-items:start; }
.seo-guide-grid h2 { margin:.8rem 0; color:#fff; font-size:clamp(1.7rem,3vw,2.6rem); }
.seo-guide-grid p { color:#cbd5e1; line-height:1.7; }
.seo-guide-grid ol { display:grid; gap:.85rem; padding:0; margin:0; list-style:none; }
.seo-guide-grid li { display:flex; gap:1rem; align-items:center; padding:1rem 1.15rem; color:#e2e8f0; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); border-radius:14px; }
.seo-guide-grid li span { display:grid; flex:0 0 2.4rem; height:2.4rem; place-items:center; color:#7c2d12; background:#ffedd5; border-radius:10px; font-weight:900; }
.seo-related-section { padding:clamp(2.6rem,6vw,4.5rem) 0; background:#fff; }
.seo-related-section h2 { margin:0 0 1.3rem; color:var(--tr-ink); }
.seo-related-links { display:flex; flex-wrap:wrap; gap:.65rem; }
.seo-related-links a { padding:.58rem .8rem; color:#9a3412; background:var(--tr-soft); border:1px solid #fed7aa; border-radius:10px; font-weight:700; text-decoration:none; }
.blog-card-meta { display:flex; justify-content:space-between; gap:.7rem; margin-bottom:.75rem; color:var(--tr-muted); font-size:.78rem; }
.blog-card-meta span { color:var(--tr-orange); font-weight:800; text-transform:uppercase; }
.blog-read-more { margin-top:auto; color:var(--tr-orange); font-weight:800; }
.blog-article-header { padding-bottom:clamp(4rem,10vw,7.5rem); }
.blog-article-header h1 { font-size:clamp(2.2rem,5vw,4rem); }
.blog-byline { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.3rem; color:#fed7aa; font-weight:700; }
.blog-article-main { position:relative; padding-bottom:5rem; }
.blog-cover { overflow:hidden; margin:clamp(-4rem,-7vw,-2.7rem) 0 2.4rem; background:#e2e8f0; border:7px solid #fff; border-radius:24px; box-shadow:0 18px 50px rgba(15,23,42,.18); }
.blog-cover img { display:block; width:100%; max-height:620px; object-fit:cover; }
.blog-rich-content { max-width:820px; margin-inline:auto; color:#334155; font-size:1.05rem; line-height:1.85; }
.blog-rich-content h2, .blog-rich-content h3, .blog-rich-content h4 { margin:1.8em 0 .6em; color:var(--tr-ink); line-height:1.3; }
.blog-rich-content img { max-width:100%; height:auto; border-radius:16px; }
.blog-rich-content figure { margin:1.7rem 0; }
.blog-rich-content blockquote { padding:1rem 1.2rem; color:#7c2d12; background:var(--tr-soft); border-left:4px solid var(--tr-orange); }
.blog-rich-content table { display:block; overflow-x:auto; width:100%; border-collapse:collapse; }
.blog-rich-content th, .blog-rich-content td { padding:.7rem; border:1px solid var(--tr-line); }
.blog-video { position:relative; overflow:hidden; width:100%; padding-top:56.25%; margin:1.7rem 0; background:#0f172a; border-radius:18px; }
.blog-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.blog-primary-video, .blog-source, .blog-tags, .blog-back { max-width:820px; margin-inline:auto; }
.blog-source { overflow-wrap:anywhere; padding:1rem; margin-top:2rem; background:#f1f5f9; border-radius:12px; }
.blog-article-main .blog-tags span { color:#9a3412; background:var(--tr-soft); border-color:#fed7aa; }
.blog-back { padding-top:2rem; margin-top:2rem; border-top:1px solid var(--tr-line); font-weight:800; }
.home-popular-searches { background:#fff7ed; }
.home-popular-heading { display:flex; align-items:end; justify-content:space-between; gap:2rem; margin-bottom:1.5rem; }
.home-popular-heading h2 { color:var(--tr-ink); }
.home-popular-heading > p { max-width:430px; line-height:1.65; }
.home-popular-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.home-popular-card { position:relative; display:flex; flex-direction:column; min-height:155px; padding:1.25rem; color:var(--tr-ink); background:#fff; border:1px solid #fed7aa; border-radius:18px; box-shadow:0 10px 26px rgba(124,45,18,.06); text-decoration:none; }
.home-popular-card > span { color:var(--tr-orange); font-size:.74rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
.home-popular-card strong { margin:.45rem 2rem .45rem 0; font-size:1.05rem; line-height:1.35; }
.home-popular-card small { margin-top:auto; color:var(--tr-muted); }
.home-popular-card i { position:absolute; top:1.05rem; right:1.15rem; color:var(--tr-orange); font-size:1.35rem; font-style:normal; }

@media (max-width: 991.98px) {
    .seo-search-shell .wrapper-input-search { grid-template-columns:minmax(0,1fr) minmax(0,1fr); }
    .seo-search-shell .wrapper-search-keyword-agent { grid-column:1 / -1; }
    .seo-property-grid, .blog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .seo-guide-grid { grid-template-columns:1fr; }
    .home-popular-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 767.98px) {
    .seo-hero { padding-bottom:calc(2.5rem + 7rem); }
    .seo-search-shell { margin-top:-7rem; }
    .seo-search-shell .search-properti { padding:.8rem !important; border-radius:14px !important; }
    .seo-section-heading { grid-template-columns:1fr; gap:.8rem; }
    .seo-property-grid, .blog-grid { grid-template-columns:1fr; }
    .home-popular-heading { display:block; }
    .home-popular-grid { grid-template-columns:1fr; }
    .seo-hero, .blog-hero, .blog-article-header { padding-top:calc(70px + 2.5rem); }
}
@media (max-width: 480px) {
    .seo-search-shell .wrapper-input-search { grid-template-columns:1fr; }
    .seo-search-shell .wrapper-search-keyword-agent { grid-column:auto; }
    .seo-search-shell .btn-searching-filter,
    .seo-search-shell .btn-outline-primary { width:100%; }
}
@media (prefers-reduced-motion: reduce) {
    .seo-property-card, .blog-card, .seo-property-image, .blog-card-image { transition:none; }
}

/* Halaman kategori SEO (/dijual/*, /disewa/*) disamakan dengan katalog
 * properti terbaru: lebar penuh dengan padding sisi, dan 4 kartu per baris
 * di desktop. Dikunci ke body.seo-page karena .seo-shell juga dipakai blog
 * (body.blog-page) yang lebar bacanya memang sengaja dibatasi. */
@media (min-width: 992px) {
  body.seo-page .seo-shell {
    width: 100%;
    max-width: none;
    padding-inline: 2rem;
  }
}

@media (min-width: 1200px) {
  body.seo-page .seo-shell {
    padding-inline: 4rem;
  }

  body.seo-page .seo-property-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}