/* =========================================================
   JUSTIN TRANS RENTAL
   REUSABLE SEO BLOG ARTICLE STYLE — v1.0.72
   The theme owns the H1, category, date and featured image.
   Post HTML should contain article body only.
========================================================= */

body.single{
  --jtrb-primary:#079eae;
  --jtrb-primary-dark:#087f91;
  --jtrb-primary-soft:#eaf8fa;
  --jtrb-navy:#16232d;
  --jtrb-text:#34424b;
  --jtrb-muted:#687780;
  --jtrb-white:#fff;
  --jtrb-border:#e3ecef;
  --jtrb-soft:#f7fafb;
  --jtrb-green:#168a67;
  --jtrb-shadow:0 12px 35px rgba(16,45,56,.08);
}

/* Wider, balanced single-post shell */
body.single .jtr-article-shell{
  width:min(calc(100% - 32px), 940px);
  max-width:940px;
  padding-block:28px 64px;
}

/* Breadcrumbs */
body.single .jtr-breadcrumbs{
  max-width:860px;
  margin:0 auto 22px;
}

/* Post header — only H1 on the page */
body.single .jtr-blog-entry .jtr-entry-header{
  max-width:860px;
  margin:0 auto 26px;
}
body.single .jtr-blog-entry .jtr-entry-kicker{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:0 0 10px;
  text-transform:none;
  letter-spacing:0;
  font-size:13px;
  font-weight:800;
}
body.single .jtr-blog-entry .jtr-entry-kicker a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--jtrb-primary-soft);
  color:var(--jtrb-primary-dark);
  text-decoration:none;
}
body.single .jtr-blog-entry .jtr-entry-title{
  margin:0;
  max-width:850px;
  color:var(--jtrb-navy);
  font-size:clamp(2rem,5vw,3rem);
  line-height:1.10;
  letter-spacing:-.035em;
}
body.single .jtr-blog-entry .jtr-entry-meta{
  margin-top:13px;
  color:var(--jtrb-muted);
  font-size:13px;
}

/* Featured image standard: 1200 x 630 / 1.9048:1 */
body.single .jtr-blog-entry .jtr-featured-image{
  width:100%;
  margin:0 0 34px;
  border-radius:18px;
  overflow:hidden;
  background:var(--jtrb-soft);
  box-shadow:0 10px 30px rgba(16,45,56,.07);
}
body.single .jtr-blog-entry .jtr-featured-image img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1200/630;
  object-fit:cover;
}

/* Reading column */
body.single .jtr-blog-entry .jtr-entry-content{
  width:min(100%,820px);
  margin-inline:auto;
  color:var(--jtrb-text);
  font-size:16.5px;
  line-height:1.78;
}
body.single .jtr-blog-entry .jtr-entry-content > :first-child{margin-top:0}
body.single .jtr-blog-entry .jtr-entry-content > :last-child{margin-bottom:0}

/* Article intro */
body.single .jtr-blog-entry .jtrb-intro{
  margin:0 0 22px;
  color:var(--jtrb-text);
  font-size:18px;
  line-height:1.72;
  font-weight:500;
}

/* Headings */
body.single .jtr-blog-entry .jtr-entry-content h2{
  margin:42px 0 13px;
  color:var(--jtrb-navy);
  font-size:clamp(1.55rem,3.4vw,2rem);
  line-height:1.22;
  letter-spacing:-.025em;
}
body.single .jtr-blog-entry .jtr-entry-content h3{
  margin:28px 0 9px;
  color:var(--jtrb-navy);
  font-size:clamp(1.2rem,2.7vw,1.45rem);
  line-height:1.3;
}
body.single .jtr-blog-entry .jtr-entry-content p{margin:0 0 17px}
body.single .jtr-blog-entry .jtr-entry-content ul,
body.single .jtr-blog-entry .jtr-entry-content ol{
  margin:0 0 20px;
  padding-left:22px;
}
body.single .jtr-blog-entry .jtr-entry-content li{margin:7px 0}
body.single .jtr-blog-entry .jtr-entry-content a{
  color:var(--jtrb-primary-dark);
  font-weight:750;
  text-decoration-thickness:.07em;
  text-underline-offset:.16em;
}

/* Table of contents */
body.single .jtr-blog-entry .jtrb-toc{
  margin:24px 0 30px;
  padding:19px 20px;
  border:1px solid var(--jtrb-border);
  border-radius:15px;
  background:#fff;
  box-shadow:var(--jtrb-shadow);
}
body.single .jtr-blog-entry .jtrb-toc strong{
  display:block;
  color:var(--jtrb-navy);
  font-size:15px;
}
body.single .jtr-blog-entry .jtrb-toc ul{
  margin:10px 0 0;
  padding-left:19px;
}
body.single .jtr-blog-entry .jtrb-toc li{
  margin:6px 0;
  font-size:13px;
  line-height:1.5;
}

/* Notes */
body.single .jtr-blog-entry .jtrb-note{
  margin:24px 0;
  padding:17px 18px;
  border-left:4px solid var(--jtrb-primary);
  border-radius:12px;
  background:var(--jtrb-primary-soft);
}
body.single .jtr-blog-entry .jtrb-note strong{color:var(--jtrb-navy)}

/* Comparison / choice cards */
body.single .jtr-blog-entry .jtrb-card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:13px;
  margin:22px 0 25px;
}
body.single .jtr-blog-entry .jtrb-card{
  margin:0;
  padding:18px;
  border:1px solid var(--jtrb-border);
  border-radius:15px;
  background:#fff;
  box-shadow:0 6px 20px rgba(16,45,56,.035);
}
body.single .jtr-blog-entry .jtrb-card h3{
  margin:0;
  font-size:18px;
}
body.single .jtr-blog-entry .jtrb-card p{
  margin:8px 0 0;
  color:var(--jtrb-muted);
  font-size:13px;
  line-height:1.6;
}

/* Responsive table */
body.single .jtr-blog-entry .jtrb-table-hint{
  display:none;
  margin:0 0 7px;
  color:var(--jtrb-muted);
  font-size:11px;
  font-weight:800;
}
body.single .jtr-blog-entry .jtrb-table-wrap{
  width:100%;
  margin:20px 0 28px;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--jtrb-border);
  border-radius:15px;
  background:#fff;
}
body.single .jtr-blog-entry .jtrb-table-wrap table{
  width:100%;
  min-width:700px;
  margin:0;
  border-collapse:collapse;
}
body.single .jtr-blog-entry .jtrb-table-wrap th,
body.single .jtr-blog-entry .jtrb-table-wrap td{
  padding:13px 14px;
  border:0;
  border-bottom:1px solid var(--jtrb-border);
  text-align:left;
  vertical-align:top;
  font-size:13px;
  line-height:1.5;
}
body.single .jtr-blog-entry .jtrb-table-wrap th{
  background:var(--jtrb-soft);
  color:var(--jtrb-navy);
  font-weight:850;
}
body.single .jtr-blog-entry .jtrb-table-wrap tr:last-child td{border-bottom:0}

/* Related internal links */
body.single .jtr-blog-entry .jtrb-related{
  margin:32px 0 0;
  padding:20px;
  border:1px solid var(--jtrb-border);
  border-radius:16px;
  background:var(--jtrb-soft);
}
body.single .jtr-blog-entry .jtrb-related h2{
  margin:0 0 12px;
  font-size:21px;
}
body.single .jtr-blog-entry .jtrb-related ul{
  margin:0;
  padding-left:19px;
}
body.single .jtr-blog-entry .jtrb-related li{
  margin:7px 0;
  font-size:13px;
}

/* End conversion CTA */
body.single .jtr-blog-entry .jtrb-cta{
  margin-top:34px;
  padding:25px;
  border-radius:19px;
  background:var(--jtrb-navy);
  color:#fff;
}
body.single .jtr-blog-entry .jtrb-cta h2{
  margin:0;
  color:#fff;
  font-size:clamp(1.45rem,3vw,1.75rem);
  line-height:1.25;
}
body.single .jtr-blog-entry .jtrb-cta p{
  margin:10px 0 0;
  color:rgba(255,255,255,.82);
  font-size:14px;
  line-height:1.65;
}
body.single .jtr-blog-entry .jtrb-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
body.single .jtr-blog-entry .jtrb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:11px 17px;
  border-radius:11px;
  text-decoration:none !important;
  font-size:14px;
  font-weight:850;
  line-height:1.15;
  text-align:center;
}
body.single .jtr-blog-entry .jtrb-btn-wa{
  background:var(--jtrb-green);
  color:#fff;
}
body.single .jtr-blog-entry .jtrb-btn-light{
  background:#fff;
  color:var(--jtrb-navy);
}

/* Post footer */
body.single .jtr-blog-entry .jtr-post-footer{
  width:min(100%,820px);
  margin:30px auto 0;
}
body.single .jtr-blog-entry .jtr-tags a{
  display:inline-flex;
  align-items:center;
  padding:5px 9px;
  border:1px solid var(--jtrb-border);
  border-radius:999px;
  color:var(--jtrb-primary-dark);
  text-decoration:none;
}
body.single .jtr-post-navigation{
  width:min(100%,820px);
  margin:32px auto 0;
}

/* Classic Editor can occasionally insert empty paragraphs */
body.single .jtr-blog-entry .jtr-entry-content > p:empty,
body.single .jtr-blog-entry .jtr-entry-content > br:first-child{
  display:none;
}

@media (max-width:679px){
  body.single .jtr-article-shell{
    width:min(calc(100% - 24px),940px);
    padding-block:20px 48px;
  }
  body.single .jtr-breadcrumbs{margin-bottom:16px}
  body.single .jtr-blog-entry .jtr-entry-header{margin-bottom:20px}
  body.single .jtr-blog-entry .jtr-entry-title{font-size:31px}
  body.single .jtr-blog-entry .jtr-featured-image{
    margin-bottom:25px;
    border-radius:13px;
  }
  body.single .jtr-blog-entry .jtr-entry-content{
    font-size:16px;
    line-height:1.74;
  }
  body.single .jtr-blog-entry .jtrb-intro{font-size:17px}
  body.single .jtr-blog-entry .jtr-entry-content h2{
    margin-top:35px;
    font-size:24px;
  }
  body.single .jtr-blog-entry .jtrb-table-hint{display:block}
  body.single .jtr-blog-entry .jtrb-cta{padding:21px}
  body.single .jtr-blog-entry .jtrb-btn{width:100%}
}

@media (min-width:680px){
  body.single .jtr-blog-entry .jtrb-card-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}


/* =========================================================
   v1.0.73 — Yoast breadcrumb + CTA clarity fixes
========================================================= */

/* The visual breadcrumb now comes from Yoast when available. */
body.single .jtr-breadcrumbs{
  display:block;
  max-width:860px;
  margin:0 auto 22px;
  color:var(--jtrb-muted);
  font-size:13px;
  line-height:1.55;
}
body.single .jtr-breadcrumbs a{
  color:var(--jtrb-muted);
  font-weight:650;
  text-decoration:none;
}
body.single .jtr-breadcrumbs a:hover{
  color:var(--jtrb-primary-dark);
  text-decoration:underline;
  text-underline-offset:.16em;
}
body.single .jtr-breadcrumbs .breadcrumb_last,
body.single .jtr-breadcrumbs [aria-current="page"]{
  color:var(--jtrb-muted);
}
body.single .jtr-breadcrumb-separator{
  display:inline-block;
  margin:0 6px;
  color:#9aa8ae;
}

/* Yoast commonly returns nested spans; allow natural wrapping on phones. */
body.single .jtr-yoast-breadcrumbs > span,
body.single .jtr-yoast-breadcrumbs > span > span{
  white-space:normal;
}

/*
 * The general article-link selector is more specific than the button selector.
 * Force intended CTA colors so text cannot inherit teal link styling.
 */
body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-wa,
body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-wa:visited{
  background:#168a67;
  color:#fff !important;
  border:1px solid #168a67;
  font-size:15px;
  font-weight:900;
  min-height:52px;
  padding:12px 19px;
  text-decoration:none !important;
}
body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-wa:hover,
body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-wa:focus{
  background:#117454;
  border-color:#117454;
  color:#fff !important;
}

body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-light,
body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-light:visited{
  background:#fff;
  color:var(--jtrb-navy) !important;
  border:1px solid rgba(255,255,255,.86);
  font-size:15px;
  font-weight:900;
  min-height:52px;
  padding:12px 19px;
  text-decoration:none !important;
}
body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-light:hover,
body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-light:focus{
  background:#f3f7f8;
  color:var(--jtrb-navy) !important;
}

body.single .jtr-blog-entry .jtrb-cta{
  border:1px solid rgba(255,255,255,.06);
}
body.single .jtr-blog-entry .jtrb-cta h2{
  max-width:760px;
}
body.single .jtr-blog-entry .jtrb-cta p{
  max-width:760px;
}

@media (max-width:679px){
  body.single .jtr-breadcrumbs{
    margin-bottom:17px;
    font-size:12.5px;
    line-height:1.5;
  }
  body.single .jtr-blog-entry .jtrb-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-wa,
  body.single .jtr-blog-entry .jtr-entry-content a.jtrb-btn-light{
    width:100%;
    min-height:52px;
  }
}


/* =========================================================
   v1.0.74 — Final mobile article polish
========================================================= */

/*
 * On phones the H1 immediately follows the breadcrumb, so repeating the full
 * article title in the breadcrumb adds clutter. Keep:
 * Beranda › Blog › Kategori
 * while desktop retains the full breadcrumb including the current article.
 */
@media (max-width:679px){
  body.single .jtr-yoast-breadcrumbs > span{
    font-size:0;
    line-height:1.55;
  }
  body.single .jtr-yoast-breadcrumbs > span > span{
    font-size:12.5px;
    line-height:1.55;
  }
  body.single .jtr-yoast-breadcrumbs > span > span:not(.breadcrumb_last)::after{
    content:"›";
    display:inline-block;
    margin:0 6px;
    color:#9aa8ae;
    font-weight:500;
  }
  body.single .jtr-yoast-breadcrumbs > span > span:nth-last-child(2)::after{
    content:"";
    margin:0;
  }
  body.single .jtr-yoast-breadcrumbs .breadcrumb_last{
    display:none !important;
  }

  /* Fallback breadcrumb when Yoast is temporarily unavailable. */
  body.single .jtr-breadcrumbs:not(.jtr-yoast-breadcrumbs) [aria-current="page"]{
    display:none;
  }
  body.single .jtr-breadcrumbs:not(.jtr-yoast-breadcrumbs) .jtr-current-separator{
    display:none;
  }
}