/*
Theme Name: TT Press
Theme URI: https://titikterang.co.id/
Author: Marga Bagus
Description: Lightweight news theme inspired by BBC. Fast, secure, SEO-first.
Version: 0.4
Text Domain: ttpress
*/

/* =========================================================
   0) TOKENS / RESET / BASE
   ========================================================= */
:root{
  /* Colors */
  --tt-bg:#F5F5F5;
  --tt-heading:#0F1626;
  --tt-body:#4b4848;
  --tt-accent:#FFD700;
  --tt-orange:#FFD700;

  /* Layout */
  --tt-max:1200px;
  --tt-content:760px;

  /* Logo sizes */
  --logo-h-desktop:42px;
  --logo-h-mobile:28px;
  --footer-logo-h:36px;

  /* Icon sizes */
  --tt-icon-size-mobile:26px;
  --tt-icon-size-desktop:22px;
}

*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0; background:var(--tt-bg); color:var(--tt-body);
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}
img{ max-width:100%; height:auto; display:block }

/* Typography */
h1,h2,h3,h4,h5,h6{
  color:var(--tt-heading);
  font-family:'Inter Tight',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-weight:800; margin:0 0 .4em;
}
/* Global links — mengikuti token heading (light/dark) */
a{
  color: var(--tt-heading);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
a:hover{ border-bottom-color: var(--tt-accent); }
.screen-reader-text{ position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Layout helpers */
.container{ max-width:var(--tt-max); margin:0 auto; padding:0 0 16px }
.tt-content{ max-width:var(--tt-content); margin:0 auto }

/* =========================================================
   1) HEADER / NAV
   ========================================================= */
.site-header{
  position:sticky; top:0; z-index:50; background:#fff; border-bottom:2px solid #e9e9e9;
}
.header-inner{
  display:flex; align-items:center; gap:18px; justify-content:flex-start;
  padding:10px 0;
}

/* Logo */
.logo{ display:flex; align-items:center; gap:10px; border:0 }
.logo img{ height:var(--logo-h-desktop); width:auto; display:block }
.logo-text{ font-weight:800; font-size:20px; color:var(--tt-heading) }

/* Desktop nav */
.nav{ margin-left:auto }
.nav .menu{ list-style:none; margin:0; padding:0; display:flex; gap:18px }
.nav .menu>li{ position:relative }
.nav .menu a{ display:block; padding:10px 12px; border-radius:10px; border-bottom:0; color:var(--tt-heading) }
.nav .menu a:hover{ background:#f7f7f7 }

/* Desktop dropdown */
.nav .menu li ul{
  list-style:none; margin:0; padding:8px; position:absolute; left:0; top:100%;
  min-width:220px; background:#fff; border:1px solid #eee; border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.08); display:none; z-index:40;
}
.nav .menu li:hover>ul, .nav .menu li:focus-within>ul{ display:block }
.nav .menu li ul a{ padding:10px 12px; border-radius:8px }

/* Header tools (search & hamburger) */
.btn-search,
.btn-mobile{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  width:36px; height:36px;
  padding:0; line-height:1;
  border-radius:10px; border:0; background:transparent; margin-right:0;
}
.btn-search svg,
.btn-mobile svg{
  display:block;
  width:var(--tt-icon-size-mobile);
  height:var(--tt-icon-size-mobile);
  fill:currentColor;
}
.btn-search:hover,
.btn-mobile:hover{ background:#f7f7f7 }
@media (min-width:901px){
  .header-inner{ gap:14px }
  .nav{ margin-left:0 }
  .btn-search{ margin-left:auto }
  .btn-search svg, .btn-mobile svg{
    width:var(--tt-icon-size-desktop);
    height:var(--tt-icon-size-desktop);
  }
}

/* Mobile order: [btn-mobile] [logo] […spasi…] [btn-search di kanan] */
@media (max-width:900px){
  .header-inner{display:flex;align-items:center;gap:10px}
  .btn-mobile{ display:inline-flex; order:1 }
  .logo{ order:2 }
  .btn-search{ order:3; margin-left:auto }
  .logo img{ height:var(--logo-h-mobile); max-height:var(--logo-h-mobile) }
  .nav{ display:none }
}

/* =========================================================
   2) SEARCH MODAL
   ========================================================= */
.search-modal{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:70;
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.search-box{
  position:relative; background:#fff; border-radius:16px; max-width:720px; width:100%;
  padding:18px 20px 24px; box-shadow:0 12px 40px rgba(0,0,0,.12);
}
.search-box form{ display:flex; gap:10px }
.search-box input{ flex:1; padding:12px 14px; border:2px solid #eee; border-radius:12px }
.search-box .btn-go{ padding:12px 14px; border-radius:12px; border:1px solid #eee; background:#000; color:#fff }
.search-box .hint{ margin:10px 0 0; color:#666; font-size:12px; text-align:center }

/* =========================================================
   3) GRIDS / CARDS / HOVER
   ========================================================= */
.grid{ display:grid; gap:18px }
.grid.cols-2{ grid-template-columns:2fr 1fr }
.grid.cols-3{ grid-template-columns:repeat(3,1fr) }
.grid.cols-4{ grid-template-columns:repeat(4,1fr) }
@media (max-width:980px){
  .grid.cols-2{ grid-template-columns:1fr }
  .grid.cols-3,.grid.cols-4{ grid-template-columns:repeat(2,1fr) }
}
@media (max-width:600px){ .grid.cols-3,.grid.cols-4{ grid-template-columns:1fr } }

.card{ display:block }
.card .thumb{ border-radius:10px; overflow:hidden; background:#eee }
.card .thumb.aspect-16x9{ aspect-ratio:16/9 }
.card .thumb.aspect-4x3{ aspect-ratio:4/3 }
.card .thumb img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .25s ease, filter .25s ease; transform: translateZ(0);
}
.card .title{ font-weight:800; line-height:1.2; margin:.5rem 0 }
.card .meta{ color:#666; font-size:13px }
.card:hover .title{ border-bottom-color:var(--tt-accent) }

/* Hover efek global */
.card:hover .thumb img,
.card:focus-visible .thumb img{ transform:scale(1.05); filter:grayscale(100%) }

/* Mini list cards (Berita Pilihan & Berita Lain) */
.section .list .card.mini{
  display:grid; grid-template-columns:180px 1fr; gap:12px; align-items:center; padding:0;
}
.section .list .card.mini .thumb{ aspect-ratio:4/3; border-radius:10px; overflow:hidden; background:#eee }
.section .list .card.mini .thumb img{ width:100%; height:100%; object-fit:cover }
.section .list .card.mini .title{ font-size:16px; margin:0 0 4px; line-height:1.35 }
.section .list .card.mini .meta{ margin:0; color:#666; font-size:13px }
@media (max-width:1100px){ .section .list .card.mini{ grid-template-columns:150px 1fr } }
@media (max-width:700px){  .section .list .card.mini{ grid-template-columns:120px 1fr } }

/* =========================================================
   4) HERO & HEADLINE
   ========================================================= */
.hero-section{ margin-top:25px }
.hero{ margin:20px 0 }
.hero .lead .title{ font-size:clamp(24px,3vw,36px) }

/* Side (2 kolom x 2 baris) – gunakan .grid-side (bukan .grid/.cols-2) */
.hero-section .side .grid-side{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-content:start;
}
.hero-section .side .card .thumb{ aspect-ratio:16/9; border-radius:10px; overflow:hidden }
.hero-section .side .card .title{ font-size:16px; line-height:1.32; margin:8px 0 4px }
.hero-section .side .card .meta{ margin:0; color:#666; font-size:13px }

/* Tetap 2 kolom hingga smartphone; turun 1 kolom hanya di layar sangat kecil */
@media (max-width:980px){
  .hero-section .side .grid-side{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .hero-section .side .card .title{ font-size:15px }
  .hero-section .side .card .meta{ font-size:12px }
}
@media (max-width:340px){
  .hero-section .side .grid-side{ grid-template-columns:1fr }
}

/* Lead excerpt clamp */
.section .lead .card .lead-excerpt{
  font-size:16px; line-height:1.6; margin-top:8px;
  display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; -webkit-line-clamp:5;
}
@media (max-width:1200px){ .section .lead .card .lead-excerpt{ -webkit-line-clamp:4 } }
@media (max-width:700px){  .section .lead .card .lead-excerpt{ font-size:15px; -webkit-line-clamp:3 } }

/* Headline list */
.headline-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin:24px 0 40px;
}
@media (max-width:900px){ .headline-row{ grid-template-columns:repeat(2,1fr) } }
@media (max-width:600px){ .headline-row{ grid-template-columns:1fr } }
.headline-row a{
  display:block; padding:10px; border:1px solid #eee; border-radius:10px;
  transition:transform .2s ease, box-shadow .2s ease; will-change:transform
}
.headline-row a .meta{ margin-top:6px }
.headline-row a:hover, .headline-row a:focus-visible{ transform:scale(1.02); box-shadow:0 8px 28px rgba(0,0,0,.08) }

/* =========================================================
   5) HOME SECTIONS (layout kiri/kanan + spasi)
   ========================================================= */
.section{ margin-bottom:30px }
.section h2{ margin-bottom:14px }

.section .grid.cols-2{
  display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:24px; grid-template-areas:"lead list";
}
.section .grid.cols-2 .lead{ grid-area:lead }
.section .grid.cols-2 .list{ grid-area:list }

/* Berita Lain: swap kolom di desktop */
.section--lain .grid.cols-2.swap-desktop{
  grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);
  grid-template-areas:"list lead";
}

/* Responsive: tumpuk (lead dulu) */
@media (max-width:900px){
  .section .grid.cols-2,
  .section--lain .grid.cols-2.swap-desktop{
    grid-template-columns:1fr; gap:18px;
    grid-template-areas:"lead" "list";
  }
}

/* TT Home – perbaiki header section kategori */
.page-template-tt-home .section--cat .section-head{
  display:flex;
  align-items:flex-end;              /* garis bawah judul rapi */
  justify-content:space-between;
  gap:12px;
  margin:6px 0 12px;
  flex-wrap:nowrap;                  /* cegah turun baris di desktop */
}

.page-template-tt-home .section--cat .cat-title{
  display:flex; align-items:center; gap:8px;
  margin:0; flex:1 1 auto; min-width:0;  /* biar judul fleksibel */
}

.page-template-tt-home .section--cat .cat-title a{
  display:inline-flex;               /* jangan block full width */
  align-items:center; text-decoration:none;
}

.page-template-tt-home .section--cat .chev{ opacity:.4; line-height:1; }

.page-template-tt-home .section--cat .see-all{
  flex:0 0 auto;                     /* tetap di kanan */
  margin-left:auto; white-space:nowrap;
  display:inline-flex; align-items:center; gap:6px;
  font-size:14px; font-weight:600; text-decoration:none;
  border:1px solid #eee; border-radius:999px; padding:6px 10px;
}

/* Home – perbaiki warna "Lihat semua" agar adaptif dark mode */
.page-template-tt-home .section--cat .see-all{
  color: var(--tt-muted);                 /* abu di light, terang di dark */
  border-color: var(--tt-border);
  background: var(--tt-surface);
}
.page-template-tt-home .section--cat .see-all:hover{
  color: var(--tt-heading);               /* jadi kontras saat hover */
  border-color: var(--tt-accent);
  background: linear-gradient(180deg, var(--tt-surface) 0%, var(--tt-hover) 100%);
}

/* Mobile: izinkan turun ke baris baru, tetap rata kanan */
@media (max-width:720px){
  .page-template-tt-home .section--cat .section-head{ flex-wrap:wrap; }
  .page-template-tt-home .section--cat .see-all{ margin-left:auto; }
}

/* =========================================================
   6) ARCHIVE / TAG / AUTHOR / STREAM / SEARCH FILTER
   ========================================================= */
/* Header */
.archive-head, .author-head{ margin:10px 0 14px }
.archive-title{ font-size:clamp(22px,3.2vw,32px); margin:0 0 10px }

/* Chips bar (subkategori) */
.chipbar{ display:flex; gap:8px; overflow:auto; padding-bottom:6px; margin:6px 0 10px }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:6px 10px;
  border:1px solid #eee; border-radius:999px; font-size:13px; white-space:nowrap; color:#0F1626;
}
.chip:hover{ background:#f7f7f7 }

/* Tabs */
.tt-tabbar{ display:flex; gap:10px; margin:8px 0 6px }
.tt-tab{ padding:6px 10px; border:1px solid #eee; border-radius:999px; font-size:13px; background:#fff; cursor:pointer }
.tt-tab.active{ background:#111; color:#fff; border-color:#111 }
.tt-tabpanel[hidden]{ display:none }

/* Stream (A–B–C pattern via span kolom) */
.tt-stream{ display:grid; gap:18px; margin:10px 0 24px }
@media (min-width:901px){
  .tt-stream{ grid-template-columns:repeat(12,minmax(0,1fr)) }
  .tt-stream .card--lg{ grid-column:span 12 }
  .tt-stream .card--sm{ grid-column:span 4 }
  .tt-stream .card--md{ grid-column:span 6 }
}
@media (max-width:900px){
  .tt-stream .card--lg, .tt-stream .card--sm, .tt-stream .card--md{ grid-column:1 / -1 }
}

/* Search filter bar */
.search-head h1{ margin:0 0 10px }
.search-filter{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin:10px 0 12px;
}
.search-filter select{ padding:8px 10px; border:1px solid #eee; border-radius:10px }
.search-filter .btn-apply{
  padding:8px 12px; border:1px solid #eee; background:#111; color:#fff; border-radius:10px; cursor:pointer;
}

/* Tag hero (Topik) */
.tag-hero{
  margin:10px 0 14px; display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.tag-title{ font-size:clamp(22px,3.2vw,32px); margin:0 }
.tag-desc{ margin:6px 0 0; max-width:70ch; color:#555 }

.tag-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap }
.tag-follow-btn{
  border:1px solid #eee; background:#111; color:#fff; border-radius:999px;
  padding:8px 12px; cursor:pointer; transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}
.tag-follow-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px rgba(0,0,0,.12) }
.tag-follow-btn:active{ transform:translateY(0) scale(.98) }
.tag-follow-btn.is-following{ background:#0F1626 }

.tag-rss{
  border:1px solid #eee; border-radius:999px; padding:8px 12px; font-size:13px;
  background:#fff; color:#0F1626;
}
.tag-rss:hover{ background:#f7f7f7 }

.author-head .avatar{ border-radius:50%; width:96px; height:96px; object-fit:cover }

/* =========================================================
   7) SINGLE ARTICLE
   ========================================================= */
.single .entry-header{ text-align:center; margin:28px auto 50px; max-width:var(--tt-content) }
.single .entry-title{ font-size:clamp(28px,4.6vw,44px); line-height:1.15 }
.meta,.meta-inline{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center; color:#666; font-size:14px; margin:0 auto 12px;
}
.meta a,.meta-inline a{ color:#f59e0b }
.share-inline{ display:flex; gap:10px; justify-content:center; margin:16px 0 }
.share-inline a,.share-inline button{
  border:1px solid #eee; padding:8px 10px; border-radius:999px; background:#fff;
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
}
.featured{ margin:16px auto 50px; max-width:var(--tt-content); border-radius:12px; overflow:hidden }
.entry-content{ max-width:var(--tt-content); margin:0 auto; line-height:1.8 }
.entry-content img{ height:auto; max-width:100%; border-radius:8px }

/* TOC */
.toc{ max-width:var(--tt-content); margin:20px auto; border:1px solid #eee; border-radius:12px; padding:16px; background:#fff }
.toc .toc-header{ display:flex; align-items:center; justify-content:space-between; gap:8px }
.toc .toc-toggle{ border:1px solid #e5e5e5; background:#fff; border-radius:8px; padding:6px 10px; font-size:13px; cursor:pointer }
.toc.collapsed ol{ display:none }
.toc h4{ margin:0 }
.toc ol{ margin:10px 0 0 16px }

/* Tags, Related, Comments */
.tags{ max-width:var(--tt-content); margin:24px auto; display:flex; gap:8px; flex-wrap:wrap }
.tags a{ background:#f5f5f5; padding:6px 10px; border-radius:999px; font-size:13px }
.related{ max-width:var(--tt-content); margin:24px auto }
.related .grid.cols-2{ grid-template-columns:repeat(2,1fr) }
@media (max-width:700px){ .related .grid.cols-2{ grid-template-columns:1fr } }
.related .card.mini .thumb{ width:100%; aspect-ratio:4/3; background:#eee; border-radius:10px; overflow:hidden }
.related .card.mini .thumb img{ width:100%; height:100%; object-fit:cover }

#comments{ margin:200px auto 200px; max-width:var(--tt-content) }
#comments .comment-list{ list-style:none; padding:0 }
#comments input,#comments textarea{ width:100%; padding:10px; border:1px solid #ddd; border-radius:10px }
#comments button,#comments .btn-submit{ padding:10px 16px; border-radius:10px; border:0; background:#111; color:#fff; cursor:pointer }

/* Mobile side padding for all single blocks */
@media (max-width:900px){
  .single .entry-header,
  .featured,
  .entry-content,
  .toc,
  .tags,
  .related,
  #comments,
  .share-inline,
  .post-share-inline{ padding-left:16px; padding-right:16px }
}

/* Breadcrumb tweaks */
.mb-breadcrumbs{ margin-top:160px; margin-bottom:50px }
@media (max-width:900px){ .mb-breadcrumbs{ margin-top:100px; margin-bottom:35px } }
@media (max-width:600px){ .mb-breadcrumbs{ margin-top:80px; margin-bottom:25px } }
.mb-breadcrumbs .breadcrumb-item:last-child{
  max-width:52ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* Share Inline block */
.post-share-inline{
  margin:12px auto 20px; display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap;
}
.post-share-inline .share-title{ font-size:14px; font-weight:700; color:var(--tt-heading); margin:0 }
.post-share-inline .share-actions{ display:flex; gap:8px; flex-wrap:wrap; align-items:center }
.post-share-inline .share-btn{
  display:inline-flex; align-items:center; gap:8px; border:1px solid #eee; background:#fff; padding:8px 12px; border-radius:999px; cursor:pointer; color:#0F1626;
}
.post-share-inline .share-btn:hover{ background:#f7f7f7 }
.post-share-inline .share-btn svg{ width:16px; height:16px; display:block; fill:currentColor }

.single .meta-inline{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.single .meta-inline .credit-chip{
  display:inline-flex; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid var(--tt-border);
  background:var(--tt-surface);
  color:var(--tt-heading);
  font-size:13px;
}
.single .meta-inline .credit-chip a{
  color:inherit; border-bottom:1px solid transparent;
}
.single .meta-inline .credit-chip a:hover{ border-bottom-color:var(--tt-accent) }

/* === Single: jaga media tetap di dalam lebar artikel === */
.single .entry-content :where(.wp-block-image, .wp-caption, figure){
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.single .entry-content :where(img, svg, video, canvas, iframe, embed){
  display: block;
  height: auto;
  max-width: 100%;
}

/* Matikan full-bleed Gutenberg di dalam artikel */
.single .entry-content :where(.alignwide, .alignfull){
  width: 100% !important;
  max-width: var(--tt-content) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Classic editor safety: gambar kiri/kanan jadi full di mobile */
@media (max-width: 700px){
  .single .entry-content :where(.alignleft, .alignright){
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Opsi: kalau butuh benar-benar full-bleed khusus gambar tertentu, 
   tambahkan class tt-bleed pada blok gambar tsb */
.single .entry-content .tt-bleed{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* =========================================================
   8) FOOTER
   ========================================================= */
.site-footer .head{ background:var(--tt-orange); color:#fff; padding:16px 0; margin-top:100px }
.site-footer .head .logo-text{ color:#fff }
.site-footer .body{ background:#000; color:#fff; padding:24px 0 }
.site-footer .cols{ display:grid; grid-template-columns:2fr 2fr 2fr; gap:20px }
.site-footer h4{ margin:0 0 10px; font-size:16px; text-transform:uppercase; letter-spacing:.3px; color:#fff }
.site-footer ul{ list-style:none; padding:0; margin:0 }
.site-footer li{ margin:6px 0 }
.site-footer .body a{ color:#fff; border-bottom:1px solid rgba(255,255,255,.25) }
.site-footer .bottom{ background:#111; color:#ddd; text-align:center; padding:12px 16px }
.site-footer .footer-brand img{ height:var(--footer-logo-h); width:auto }
@media (max-width:900px){ .site-footer .cols{ grid-template-columns:1fr } }

/* =========================================================
   9) MOBILE MENU (overlay)
   ========================================================= */
[hidden]{ display:none !important }

.mobile-menu{
  position:fixed; inset:0; z-index:80; background:#fff;
  display:flex; justify-content:center; overflow:auto; padding:14px;
}
.mm-wrap{ width:100%; max-width:720px; display:flex; flex-direction:column; min-height:100vh; margin:0 auto }
.mm-head{ display:flex; justify-content:flex-end; margin-bottom:6px }
.mm-close{ border:0; background:transparent; padding:8px; border-radius:10px }
.mm-close:hover{ background:#f4f4f4 }

/* Reset warisan desktop */
.mobile-menu .menu, .mobile-menu .menu > li{ float:none !important }
.mobile-menu .menu{ list-style:none; margin:0; padding:0 }

/* List utama – rata kiri, ditengah vertikal, font besar */
.mobile-menu-list{
  list-style:none; margin:0; padding:10px 6px 24px;
  display:flex; flex-direction:column; gap:12px; align-items:flex-start;
  margin-top:auto; margin-bottom:auto;
  font-size:22px; line-height:1.35; font-weight:600;
}
.mobile-menu-list > li{ width:100% }
.mobile-menu-list a{ display:block; width:100%; padding:10px 12px; border-radius:10px; color:var(--tt-heading) }
.mobile-menu-list a:hover{ background:#f7f7f7 }

/* Submenu: toggle by class .open */
.mobile-menu .sub-menu{ display:none; list-style:none; margin:6px 0 0 0; padding:0 0 0 12px; border-left:1px solid #eee }
.mobile-menu li.open > .sub-menu{ display:block }
.mobile-menu .menu-item-has-children > a{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.mobile-menu .menu-item-has-children > a::after{ content:"▾"; opacity:.65; transform:translateY(-1px) }

/* Lock scroll saat menu terbuka */
body.mm-open{ overflow:hidden }

/* =========================================================
   10) BACK TO TOP
   ========================================================= */
#tt-backtotop{
  position:fixed; right:18px; bottom:20px; z-index:10000;
  width:44px; height:44px; border-radius:50%; border:0;
  background:#111; color:#fff; box-shadow:0 10px 30px rgba(0,0,0,.18);
  display:none; align-items:center; justify-content:center;
  transition:transform .15s ease, box-shadow .2s ease, background-color .2s ease, opacity .2s ease;
  -webkit-tap-highlight-color:transparent; padding:0;
}
#tt-backtotop.show{ display:inline-flex }
#tt-backtotop svg{ width:20px; height:20px; display:block }
#tt-backtotop:hover{ transform:translateY(-2px); background:#000; box-shadow:0 14px 36px rgba(0,0,0,.22) }
#tt-backtotop:focus-visible{ outline:2px solid var(--tt-accent); outline-offset:2px }
#tt-backtotop:active{ transform:translateY(0) scale(.97); box-shadow:0 8px 24px rgba(0,0,0,.18) }
@media (prefers-reduced-motion:reduce){ #tt-backtotop{ transition:none } }
@supports (padding:max(0px)){
  #tt-backtotop{ right:max(18px, env(safe-area-inset-right)); bottom:max(20px, env(safe-area-inset-bottom)) }
}

/* =========================================================
   11) UTILITIES / MISC
   ========================================================= */
.not-found{ text-align:center; padding:80px 0 }

/* =========================================================
   12) DARK MODE — TOKENS & OVERRIDES (Phase 1: auto follow OS)
   ========================================================= */

/* --- Tambahan token (untuk surface/border/muted/hover, tombol, FAB) --- */
:root{
  /* Light defaults */
  --tt-surface:#ffffff;          /* panel/kartu */
  --tt-surface-2:#fafafa;        /* surface sekunder */
  --tt-border:#e5e7eb;           /* garis pemisah */
  --tt-muted:#6b7280;            /* teks sekunder */
  --tt-hover:#f7f7f7;            /* hover ringan */
  --tt-shadow:0 12px 40px rgba(0,0,0,.12);

  /* Komponen */
  --tt-button-bg:#111;
  --tt-button-fg:#fff;
  --tt-fab-bg:#111;              /* back-to-top dsb */
  --tt-fab-fg:#fff;
}

/* --- Auto DARK mengikuti OS, jika user belum override manual --- */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --tt-bg:#0b1220;
    --tt-heading:#e7ecf6;
    --tt-body:#c7d0de;

    --tt-surface:#0e172a;
    --tt-surface-2:#0b1424;
    --tt-border:#243145;
    --tt-muted:#94a3b8;
    --tt-hover:#172033;
    --tt-shadow:0 12px 40px rgba(0,0,0,.6);

    --tt-button-bg:#0F1626;
    --tt-button-fg:#fff;
    --tt-fab-bg:#0F1626;
    --tt-fab-fg:#fff;
  }
}

/* --- Manual override (opsional, jika nanti ada tombol toggle) --- */
html[data-theme="dark"]{
  --tt-bg:#0b1220;
  --tt-heading:#e7ecf6;
  --tt-body:#c7d0de;

  --tt-surface:#0e172a;
  --tt-surface-2:#0b1424;
  --tt-border:#243145;
  --tt-muted:#94a3b8;
  --tt-hover:#172033;
  --tt-shadow:0 12px 40px rgba(0,0,0,.6);

  --tt-button-bg:#0F1626;
  --tt-button-fg:#fff;
  --tt-fab-bg:#0F1626;
  --tt-fab-fg:#fff;
}
html[data-theme="light"]{
  --tt-bg:#ffffff;
  --tt-heading:#0F1626;
  --tt-body:#4b4848;

  --tt-surface:#ffffff;
  --tt-surface-2:#fafafa;
  --tt-border:#e5e7eb;
  --tt-muted:#6b7280;
  --tt-hover:#f7f7f7;
  --tt-shadow:0 12px 40px rgba(0,0,0,.12);

  --tt-button-bg:#111;
  --tt-button-fg:#fff;
  --tt-fab-bg:#111;
  --tt-fab-fg:#fff;
}

/* --- Remap komponen ke token (override ringan & aman) --- */

/* Body */
body{ background:var(--tt-bg); color:var(--tt-body); }

/* Header & nav */
.site-header{ background:var(--tt-surface); border-bottom-color:var(--tt-border) }
.nav .menu a:hover{ background:var(--tt-hover) }
.nav .menu li ul{
  background:var(--tt-surface);
  border-color:var(--tt-border);
  box-shadow:var(--tt-shadow);
}

/* Search modal & form */
.search-box{
  background:var(--tt-surface);
  box-shadow:var(--tt-shadow);
}
.search-box input{ border-color:var(--tt-border) }
.search-box .btn-go{
  border-color:var(--tt-border);
  background:var(--tt-button-bg); color:var(--tt-button-fg);
}

/* Card/listing & meta */
.headline-row a{ background:var(--tt-surface); border-color:var(--tt-border) }
.card .meta{ color:var(--tt-muted) }

/* TOC, tags, related, comments inputs */
.toc{ background:var(--tt-surface); border-color:var(--tt-border) }
.tags a{ background:var(--tt-surface-2) }
#comments input,#comments textarea{ border-color:var(--tt-border) }

/* Mobile menu */
.mobile-menu{ background:var(--tt-surface) }
.mobile-menu-list a:hover{ background:var(--tt-hover) }
.mobile-menu .sub-menu{ border-left-color:var(--tt-border) }

/* Back to top (FAB) */
#tt-backtotop{ background:var(--tt-fab-bg); color:var(--tt-fab-fg) }
#tt-backtotop:hover{ background:var(--tt-fab-bg) }

/* ===== Header mobile <=480px: logo center + sedikit diperbesar ===== */
@media (max-width:480px){
  /* pakai grid: [menu] [logo] [search] */
  .header-inner{
    display:grid;
    grid-template-columns:36px 1fr 36px;  /* kiri: btn-mobile | tengah: logo | kanan: btn-search */
    align-items:center;
    gap:8px;
  }
  .btn-mobile{ grid-column:1; justify-self:start; justify-content: flex-start; }
  .logo{ grid-column:2; justify-self:center; }     /* center beneran */
  .btn-search{ grid-column:3; justify-self:end; margin-left:0; } /* hapus dorongan flex */

  /* perbesar logo dari 28px -> 32px (silakan ganti 34px kalau mau lebih besar) */
  :root{ --logo-h-mobile: 36px; }
  .logo img, .logo svg{ height:var(--logo-h-mobile); width:auto; }
}

/* ===========================
   DARK MODE FIX PACK – warna link, ikon, judul, excerpt, breadcrumbs
   =========================== */

/* 1) Link global ikut token (override rule lama a{color:#0f1626}) */
a{ color: var(--tt-heading); }

/* 2) Header & ikon (search, hamburger, close) mengikuti heading color */
.site-header{ color: var(--tt-heading); }
.btn-search, .btn-mobile, .mm-close{ color: var(--tt-heading); }
.btn-search:hover, .btn-mobile:hover, .mm-close:hover{ background: var(--tt-hover); }

/* 3) Judul & heading section */
.card .title,
.section > h2,
.section--cat .cat-title,
.section--cat .cat-title a{ color: var(--tt-heading); }

/* 4) Excerpt di dalam card/link harus pakai body color (bukan color dari <a>) */
.section .lead .card .lead-excerpt,
.card .excerpt,
.headline-row a .excerpt,
.tt-stream .excerpt{ color: var(--tt-body) !important; }

/* 5) Meta (tanggal/penulis) */
.meta, .meta-inline,
.card .meta,
.hero .side .card .meta{ color: var(--tt-muted); }

/* 6) Headline cards mengikuti surface/border token */
.headline-row a{ background: var(--tt-surface); border-color: var(--tt-border); }

/* 7) Breadcrumbs */
.mb-breadcrumbs, .mb-breadcrumbs a{ color: var(--tt-heading); }

/* 8) Section kategori (judul & link) */
.section--cat .see-all{ color: var(--tt-muted); }
.section--cat .see-all:hover{ color: var(--tt-heading); }

/* 9) Mobile menu link */
.mobile-menu-list a{ color: var(--tt-heading); }

/* Share ikon-only */
.post-share-inline{ gap:12px }
.post-share-inline .share-actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center }
.post-share-inline .share-btn{
  width:42px; height:42px; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--tt-border);
  background:var(--tt-surface);
  color:var(--tt-heading);
  border-radius:50%;
  box-shadow:none;
}
.post-share-inline .share-btn:hover{ background:var(--tt-hover) }
.post-share-inline .share-btn svg{ width:18px; height:18px; display:block }

/* Dark mode kontras lebih baik */
@media (prefers-color-scheme: dark){
  :root:not([data-theme]) .post-share-inline .share-btn{ border-color:var(--tt-border); background:var(--tt-surface) }
}
html[data-theme="dark"] .post-share-inline .share-btn{ border-color:var(--tt-border); background:var(--tt-surface) }

/* Aksesibilitas: sembunyikan teks bantu */
.sr-only{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* =======================
   404 – Media-grade UX
   Scoped to .nf404 to avoid global bleed
   ======================= */
.nf404{ padding:80px 0 60px; }
@media (max-width:900px){ .nf404{ padding-top:64px; } }

/* Hero */
.nf404 .nf-hero{ text-align:center; margin-bottom:26px; }
.nf404 .nf-kicker{ font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:#999; margin:0 0 6px; }
.nf404 .nf-title{ font-size:clamp(28px,5vw,48px); line-height:1.1; margin:0 0 8px; }
.nf404 .nf-sub{ color:#666; max-width:52ch; margin:0 auto 16px; }

/* Search */
.nf404 .nf-search{ display:flex; gap:10px; justify-content:center; max-width:680px; margin:8px auto 10px; }
.nf404 .nf-search input{ flex:1; padding:12px 14px; border:2px solid #eee; border-radius:12px; }
.nf404 .nf-search .btn{ padding:12px 16px; border-radius:12px; border:1px solid #eee; background:#000; color:#fff; cursor:pointer; }

/* Actions */
.nf404 .nf-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.nf404 .btn{ transition:opacity .15s ease; }
.nf404 .btn.ghost{ background:#fff; border:1px solid #eee; color:#0F1626; }
.nf404 .btn.outline{ background:#fff; border:1px solid #eee; }
.nf404 .btn:hover{ opacity:.9; }

/* Section head */
.nf404 .nf-section-head{ display:flex; align-items:center; justify-content:space-between; margin:18px 0 10px; }
.nf404 .nf-h2{ font-size:20px; margin:0; }

/* List/Grid */
.nf404 .nf-list{ text-align:initial; }
.nf404 .nf-list .grid{ --gap:22px; gap:var(--gap); }

/* Card mini (structure + spacing) */
.nf404 .nf-list .card.mini{ display:flex; flex-direction:column; text-align:left; margin-bottom:4px; }
.nf404 .nf-list .card.mini .thumb{ margin:0 0 10px; border-radius:14px; overflow:hidden; background:#f2f2f2; }

/* Title */
.nf404 .nf-list .card.mini .title{ font-size:16px; line-height:1.3; margin:0 0 8px; text-align:left; }
.nf404 .nf-list .card.mini .title a{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; text-decoration:none;
}

/* Meta/date align left (no overlay) */
.nf404 .nf-list .card.mini .meta{
  position:static !important;
  margin-top:8px; font-size:12px; color:#666;
  text-align:left !important; justify-content:flex-start !important; align-items:center;
}
.nf404 .nf-list .card.mini .meta a{ color:inherit; }
.nf404 .nf-list .card.mini .meta > *{ display:inline; margin-right:8px; }

/* Badges / categories / tags */
.nf404 .nf-list .card.mini :is(.badges,.tags,.tag-links,.cat-links,.category,.meta-inline){
  position:static !important; display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
.nf404 .nf-list .card.mini :is(.badges,.tags,.tag-links,.cat-links) a,
.nf404 .nf-list .card.mini :is(.category) a{
  display:inline-flex; align-items:center; padding:4px 8px;
  border:1px solid #eee; border-radius:999px; font-size:12px; line-height:1; background:#fff; text-decoration:none;
}

/* Chips kategori (Explore topics) */
.nf404 .nf-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.nf404 .chip{
  display:inline-flex; align-items:center; gap:8px; padding:8px 12px;
  border:1px solid #eee; border-radius:999px; background:#fff; color:#0F1626; text-decoration:none;
}
.nf404 .chip:hover{ background:#f7f7f7; }

/* Help area */
.nf404 .nf-help{ margin-top:14px; color:#666; }
.nf404 .nf-help-links{ display:flex; gap:14px; flex-wrap:wrap; list-style:none; padding:0; margin:10px 0 0; }
.nf404 .nf-help a{ color:#f59e0b; }

/* =======================
   TT – About Page
   ======================= */
.tt-about{ padding:64px 0 48px; }
@media (max-width:900px){ .tt-about{ padding-top:56px; } }

.tt-about .about-kicker{
  font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#9ca3af; margin:0 0 4px;
}
.tt-about .about-title{
  font-size:clamp(28px,4.8vw,44px); line-height:1.1; margin:0 0 4px;
}
.tt-about .about-tagline{ color:#374151; font-weight:600; margin:0 0 12px; }
.tt-about .about-hero-media{
  margin:16px auto 10px; max-width:880px; border-radius:18px; overflow:hidden;
  box-shadow:0 6px 24px rgba(0,0,0,.06);
}
.tt-about .about-hero-media img{ width:100%; height:auto; display:block; }
.tt-about .about-intro{ color:#4b5563; max-width:70ch; margin: 8px auto 30px; text-align:center; }
.tt-about .about-actions{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:10px; }
.tt-about .btn.primary{ background:#000; color:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:10px 14px; }
.tt-about .btn.outline{ background:#fff; color:#111827; border:1px solid #e5e7eb; border-radius:12px; padding:10px 14px; }
.tt-about .btn.ghost{ background:#fff; color:#111827; border:1px solid #e5e7eb; border-radius:12px; padding:10px 14px; }
.tt-about .btn:hover{ opacity:.92; }

/* Section heading */
.tt-about .sec-title{ font-size:20px; margin:22px 0 12px; }

/* Principles grid */
.tt-about .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:900px){ .tt-about .grid{ grid-template-columns:1fr; } }

.tt-about .card.principle{
  border:1px solid #eee; border-radius:16px; padding:16px 16px 14px; background:#fff;
}
.tt-about .card.principle .p-title{ font-weight:700; margin:0 0 6px; }
.tt-about .card.principle .p-desc{ margin:0; color:#4b5563; }

/* Story (WYSIWYG from editor) */
.tt-about .wysiwyg p{ margin:12px 0; }
.tt-about .wysiwyg h3{ margin:18px 0 8px; font-size:18px; }
.tt-about .wysiwyg ul{ padding-left:18px; }

/* Team */
.tt-about .card.team{
  border:1px solid #eee; border-radius:16px; padding:16px; background:#fff;
}
.tt-about .team-role{ margin:0 0 10px; font-weight:800; }
.tt-about .team-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:8px; }
.tt-about .chip{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  border:1px solid #eee; border-radius:999px; background:#fff; color:#111827; text-decoration:none;
  font-size:13px; line-height:1;
}

/* Contact box */
.tt-about .contact-card{
  border:1px solid #eee; border-radius:16px; padding:16px; background:#fafafa;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.tt-about .contact-address{ margin:0; color:#374151; }
.tt-about .contact-actions{ display:flex; gap:10px; flex-wrap:wrap; }

/* === TT About – Card Hover Effects (Principles + Team) === */
.tt-about{ --card-bd:#e5e7eb; --card-bg:#fff; --shadow:0 6px 24px rgba(0,0,0,.06); --shadow-hover:0 12px 28px rgba(0,0,0,.12); --accent: #f59e0b; }

.tt-about .card.principle,
.tt-about .card.team{
  position:relative;
  background:var(--card-bg);
  border:1px solid var(--card-bd);
  border-radius:16px;
  transition:transform .18s ease, box-shadow .22s ease, border-color .18s ease, background .18s ease;
  box-shadow:0 0 0 rgba(0,0,0,0);
  will-change:transform;
}

/* Hover: sedikit terangkat + shadow lembut + subtle gradient */
.tt-about .card.principle:hover,
.tt-about .card.team:hover{
  transform:translateY(-2px);
  border-color:#e2e8f0;
  box-shadow:var(--shadow-hover);
  background:linear-gradient(180deg,#fff 0%, #fafafa 100%);
}

/* Fokus keyboard (aksesibilitas) */
.tt-about .card.principle:focus-within,
.tt-about .card.team:focus-within{
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(16,24,40,.08), var(--shadow-hover);
  outline:2px solid transparent;
}

/* Sedikit penekanan judul saat hover */
.tt-about .card.principle:hover,
.tt-about .card.team:hover{ box-shadow:0 0 0 3px rgba(245,158,11,.15), var(--shadow-hover); }

/* Chip anggota: hover ringan */
.tt-about .chip:hover{
  background:#f7f7f7;
  border-color:#e5e7eb;
  transform:translateY(-1px);
  transition:transform .14s ease, background .18s ease, border-color .18s ease;
}

/* Hormati preferensi pengguna (minim animasi) */
@media (prefers-reduced-motion: reduce){
  .tt-about .card.principle,
  .tt-about .card.team,
  .tt-about .chip{ transition:none; transform:none; }
}

/* =======================
   TT – Submit Page (Kirim Artikel)
   ======================= */
.tt-submit{ padding:64px 0 48px; }
@media (max-width:900px){ .tt-submit{ padding-top:56px; } }

.tt-submit .submit-kicker{ font-weight:800; text-transform:uppercase; color:#9ca3af; margin:0 0 4px; }
.tt-submit .submit-title{ font-size:clamp(28px,4.8vw,44px); line-height:1.1; margin:0 0 6px; }
.tt-submit .submit-tagline{ color:#374151; font-weight:600; margin:0 0 8px; }
.tt-submit .submit-lead{ color:#4b5563; max-width:70ch; }
.tt-submit .submit-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; }
.tt-submit .btn.primary{ background:#000; color:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:10px 14px; }
.tt-submit .btn.outline{ background:#fff; color:#111827; border:1px solid #e5e7eb; border-radius:12px; padding:10px 14px; }
.tt-submit .btn:hover{ opacity:.92; }

.tt-submit .sec-title{ font-size:20px; margin:22px 0 12px; }
.tt-submit .layout{ display:grid; grid-template-columns:2fr 1fr; gap:24px; }
@media (max-width:1100px){ .tt-submit .layout{ grid-template-columns:1fr; } }

.tt-submit .tick{ padding-left:18px; }
.tt-submit .tick li{ margin:8px 0; }
.tt-submit .num{ padding-left:18px; }
.tt-submit .num li{ margin:8px 0; }
.tt-submit .dash{ padding-left:18px; }
.tt-submit .dash li{ margin:8px 0; list-style-type: "– "; }

.tt-submit .builder-card{
  position:sticky; top:96px;
  border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
}
.tt-submit .builder-card .muted{ color:#6b7280; margin-top:-2px; }

.tt-submit .send-box{ display:flex; flex-direction:column; gap:8px; margin-top:8px; }
.tt-submit .send-box label{ font-size:13px; color:#374151; }
.tt-submit .send-box input{
  padding:10px 12px; border:1px solid #e5e7eb; border-radius:12px;
}
.tt-submit .btn-row{ display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.tt-submit .hint{ color:#6b7280; font-size:12px; margin-top:6px; }
.tt-submit code{ background:#f6f7f8; padding:2px 6px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  .tt-submit *{ transition:none !important; }
}

/* =======================
   CTA Hover Pack – Buttons
   Berlaku di 404, Tentang, Kirim Artikel
   ======================= */
.nf404 .btn, .tt-about .btn, .tt-submit .btn{
  --btn-accent: #f59e0b;              /* ganti bila perlu */
  --btn-fg: #111827;
  --btn-bg: #fff;
  --btn-bd: #e5e7eb;
  --btn-shadow: 0 0 0 rgba(0,0,0,0);
  --btn-shadow-hover: 0 10px 22px rgba(0,0,0,.12);

  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; border:1px solid var(--btn-bd); border-radius:12px;
  padding:10px 14px; background:var(--btn-bg); color:var(--btn-fg);
  transition: transform .16s ease, box-shadow .22s ease,
              background-color .18s ease, border-color .18s ease, color .18s ease;
  box-shadow: var(--btn-shadow);
  will-change: transform;
}

/* Variants */
.nf404 .btn.primary, .tt-about .btn.primary, .tt-submit .btn.primary{
  --btn-bg:#000; --btn-fg:#fff; --btn-bd:#000;
  background:var(--btn-bg); color:var(--btn-fg); border-color:var(--btn-bd);
}
.nf404 .btn.outline, .tt-about .btn.outline, .tt-submit .btn.outline{
  background:#fff; color:#111827; border-color:#e5e7eb;
}
.nf404 .btn.ghost, .tt-about .btn.ghost, .tt-submit .btn.ghost{
  background:#fff; color:#111827; border-color:#e5e7eb;
}

/* Hover: sedikit terangkat + subtle gradient */
.nf404 .btn:hover, .tt-about .btn:hover, .tt-submit .btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--btn-shadow-hover);
}
.nf404 .btn.primary:hover, .tt-about .btn.primary:hover, .tt-submit .btn.primary:hover{
  filter:brightness(1.02);
}
.nf404 .btn.outline:hover, .tt-about .btn.outline:hover, .tt-submit .btn.outline:hover,
.nf404 .btn.ghost:hover, .tt-about .btn.ghost:hover, .tt-submit .btn.ghost:hover{
  border-color: var(--btn-accent);
  background: linear-gradient(180deg,#fff 0%, #fafafa 100%);
}

/* Active (tekan) */
.nf404 .btn:active, .tt-about .btn:active, .tt-submit .btn:active{
  transform: translateY(0);
  filter:brightness(.98);
}

/* Focus keyboard: ring aksen yang jelas (aksesibel) */
.nf404 .btn:focus-visible, .tt-about .btn:focus-visible, .tt-submit .btn:focus-visible{
  outline:2px solid transparent;
  box-shadow:
    0 0 0 3px rgba(17,24,39,.08),
    0 0 0 4.5px rgba(245,158,11,.28), /* ring aksen */
    var(--btn-shadow-hover);
  border-color: var(--btn-accent);
}

/* Optional: ikon panah kecil “bergerak” saat hover */
.nf404 .btn .chev, .tt-about .btn .chev, .tt-submit .btn .chev{
  transition: transform .16s ease;
}
.nf404 .btn:hover .chev, .tt-about .btn:hover .chev, .tt-submit .btn:hover .chev{
  transform: translateX(2px);
}

/* Hormati preferensi pengguna */
@media (prefers-reduced-motion: reduce){
  .nf404 .btn, .tt-about .btn, .tt-submit .btn{ transition:none; transform:none; }
}
/* TT – About: mobile intro align-left + extra spacing before actions */
@media (max-width: 900px){
  .tt-about .about-intro{
    text-align: left;        /* dari center -> left saat mobile */
    margin: 8px auto 30px;   /* tambah jarak bawah sebelum .about-actions */
  }
}

/* =======================
   TT – Privacy Policy
   ======================= */
.tt-privacy{ padding:64px 0 48px; }
@media (max-width:900px){ .tt-privacy{ padding-top:56px; } }

.tt-privacy .pp-kicker{ font-weight:800; text-transform:uppercase; color:#9ca3af; margin:0 0 4px; }
.tt-privacy .pp-title{ font-size:clamp(28px,4.8vw,44px); line-height:1.1; margin:0 0 6px; }
.tt-privacy .pp-tagline{ color:#374151; font-weight:600; margin:0 0 8px; }
.tt-privacy .pp-updated{ color:#6b7280; font-size:12px; }

.tt-privacy .layout{ display:grid; grid-template-columns:2fr 1fr; gap:24px; }
@media (max-width:1100px){ .tt-privacy .layout{ grid-template-columns:1fr; } }

.tt-privacy .sec-title{ font-size:20px; margin:22px 0 10px; }
.tt-privacy .pp-section [id]{ scroll-margin-top:96px; }
.tt-privacy .pp-content p{ margin:10px 0; color:#374151; }
.tt-privacy .pp-content .muted{ color:#6b7280; }

.tt-privacy .tick{ padding-left:18px; }
.tt-privacy .tick li{ margin:8px 0; list-style: "✓  "; }
.tt-privacy .dash{ padding-left:18px; }
.tt-privacy .dash li{ margin:8px 0; list-style: "–  "; }

.tt-privacy .pp-toc{
  position:sticky; top:96px;
  border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
  display:flex; flex-direction:column; gap:10px;
}
.tt-privacy .pp-toc ol{ margin:0; padding-left:18px; }
.tt-privacy .pp-toc a{ text-decoration:none; color:#111827; }
.tt-privacy .pp-toc a:hover{ color:#f59e0b; }

/* Tombol full width di TOC */
.tt-privacy .pp-toc .btn.wfull{ width:100%; }

/* Reuse CTA Hover Pack */
.tt-privacy .btn{ /* mengikuti pack tombol sebelumnya */ }

/* =======================
   TT – Disclaimer Page
   ======================= */
.tt-disclaimer{ padding:64px 0 48px; }
@media (max-width:900px){ .tt-disclaimer{ padding-top:56px; } }

.tt-disclaimer .dc-kicker{ font-weight:800; text-transform:uppercase; color:#9ca3af; margin:0 0 4px; }
.tt-disclaimer .dc-title{ font-size:clamp(28px,4.8vw,44px); line-height:1.1; margin:0 0 6px; }
.tt-disclaimer .dc-tagline{ color:#374151; font-weight:600; margin:0 0 8px; }
.tt-disclaimer .dc-updated{ color:#6b7280; font-size:12px; }

.tt-disclaimer .layout{ display:grid; grid-template-columns:2fr 1fr; gap:24px; }
@media (max-width:1100px){ .tt-disclaimer .layout{ grid-template-columns:1fr; } }

.tt-disclaimer .lead p{ color:#374151; margin:8px 0 2px; }
.tt-disclaimer .sec-title{ font-size:20px; margin:22px 0 10px; }
.tt-disclaimer .dc-section [id]{ scroll-margin-top:96px; }
.tt-disclaimer .dc-content p{ margin:10px 0; color:#374151; }

/* TOC sticky di kanan */
.tt-disclaimer .dc-toc{
  position:sticky; top:96px;
  border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
  display:flex; flex-direction:column; gap:10px;
}
.tt-disclaimer .dc-toc ol{ margin:0; padding-left:18px; }
.tt-disclaimer .dc-toc a{ text-decoration:none; color:#111827; }
.tt-disclaimer .dc-toc a:hover{ color:#f59e0b; }

/* Tombol full width di TOC */
.tt-disclaimer .dc-toc .btn.wfull{ width:100%; }

/* Reuse CTA Hover Pack (sudah kamu tambahkan sebelumnya) */
.tt-disclaimer .btn{ /* mengikuti pack tombol global */ }

/* =======================
   TT – Pedoman Media Siber
   ======================= */
.tt-pedoman{ padding:64px 0 48px; }
@media (max-width:900px){ .tt-pedoman{ padding-top:56px; } }

.tt-pedoman .gd-kicker{ font-weight:800; text-transform:uppercase; color:#9ca3af; margin:0 0 4px; }
.tt-pedoman .gd-title{ font-size:clamp(28px,4.8vw,44px); line-height:1.1; margin:0 0 6px; }
.tt-pedoman .gd-tagline{ color:#374151; font-weight:600; margin:0 0 8px; }
.tt-pedoman .gd-updated{ color:#6b7280; font-size:12px; }
.tt-pedoman .gd-actions{ margin-top:10px; display:flex; gap:10px; flex-wrap:wrap; }

/* Layout */
.tt-pedoman .layout{ display:grid; grid-template-columns:2fr 1fr; gap:24px; }
@media (max-width:1100px){ .tt-pedoman .layout{ grid-template-columns:1fr; } }

.tt-pedoman .lead p{ color:#374151; margin:8px 0 2px; }
.tt-pedoman .sec-title{ font-size:20px; margin:22px 0 10px; }
.tt-pedoman .gd-section [id]{ scroll-margin-top:96px; }
.tt-pedoman .gd-content p{ margin:10px 0; color:#374151; }

/* Daftar bernomor/berhuruf */
.tt-pedoman .num{ padding-left:20px; }
.tt-pedoman .num > li{ margin:6px 0; }
.tt-pedoman .alpha{ padding-left:20px; list-style: lower-alpha; }
.tt-pedoman .alpha > li{ margin:6px 0; }

/* TOC sticky kanan */
.tt-pedoman .gd-toc{
  position:sticky; top:96px;
  border:1px solid #e5e7eb; border-radius:16px; background:#fff; padding:16px;
  box-shadow:0 6px 24px rgba(0,0,0,.04);
  display:flex; flex-direction:column; gap:10px;
}
.tt-pedoman .gd-toc ol{ margin:0; padding-left:18px; }
.tt-pedoman .gd-toc a{ text-decoration:none; color:#111827; }
.tt-pedoman .gd-toc a:hover{ color:#f59e0b; }

/* Tombol (pakai CTA Hover Pack bila sudah ada); fallback simple */
.tt-pedoman .btn{ border:1px solid #e5e7eb; border-radius:12px; padding:10px 14px; background:#fff; color:#111827; }
.tt-pedoman .btn.outline:hover{ border-color:#f59e0b; background:linear-gradient(180deg,#fff 0%, #fafafa 100%); }

/* Print-friendly tweaks */
@media print{
  .tt-pedoman .gd-toc, .tt-pedoman .gd-actions, header.site-header, footer.site-footer{ display:none !important; }
  .tt-pedoman{ padding:0; }
  .tt-pedoman .sec-title{ page-break-after: avoid; }
}

/* =========================================
   MOBILE SAFE SIDE PADDING (≤900px)
   Berlaku untuk: 404, Tentang, Kirim Artikel, Privasi, Pedoman, Disclaimer
   ========================================= */
@media (max-width:900px){
  /* kontainer konten tiap section */
  .nf404 .nf-hero,
  .nf404 .nf-section-head,
  .nf404 .nf-list,
  .tt-about .tt-content,
  .tt-about .about-hero-media,
  .tt-about .contact-card,
  .tt-submit .tt-content,
  .tt-submit .builder-card,
  .tt-privacy .tt-content,
  .tt-privacy .pp-toc,
  .tt-disclaimer .tt-content,
  .tt-disclaimer .dc-toc,
  .tt-pedoman .tt-content,
  .tt-pedoman .gd-toc{
    padding-left:16px;
    padding-right:16px;
  }

  /* grid/layout wrapper agar tidak “nempel pinggir” */
  .tt-about .layout,
  .tt-submit .layout,
  .tt-privacy .layout,
  .tt-disclaimer .layout,
  .tt-pedoman .layout{
    padding-left:16px;
    padding-right:16px;
  }

  /* list/grid kartu di 404 */
  .nf404 .nf-list .grid{
    padding-left:16px;
    padding-right:16px;
  }
}

/* ===== Table ===== */
.tt-table-wrap{
  --tt-orange:#FFD700 --tt-stack-bp:768px; /* ubah bila perlu */
  --tt-radius:10px; --tt-b:1px; --tt-bc:#eaeaea; --tt-bc2:#f4f4f4;
}
.tt-table-wrap table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--tt-radius);overflow:hidden}
.tt-table-wrap caption{ text-align:left;font-weight:600;margin:8px 0 }
.tt-table-wrap th,.tt-table-wrap td{padding:10px 12px;border-bottom:var(--tt-b) solid var(--tt-bc2);vertical-align:top}
.tt-table-wrap thead th{border-bottom:var(--tt-b) solid var(--tt-bc);background:#fff;border-top:3px solid var(--tt-brand)}
.tt-table-wrap.tt-zebra tbody tr:nth-child(even) td{background:#fcfcfc}
.tt-table-wrap.tt-compact th,.tt-table-wrap.tt-compact td{padding:8px 10px}
.tt-table-wrap.tt-sticky thead th{position:sticky;top:0;z-index:2;box-shadow:0 1px 0 var(--tt-bc)}
/* Scroll mode (default, aman untuk tabel lebar) */
.tt-table-wrap.tt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tt-table-wrap.tt-scroll::-webkit-scrollbar{height:10px}
.tt-table-wrap.tt-scroll::-webkit-scrollbar-thumb{background:#d7d7d7;border-radius:999px}
.tt-table-wrap.tt-scroll::-webkit-scrollbar-track{background:#f1f1f1}

/* ===== Stack mode (kartu) – aktif <= var(--tt-stack-bp) ===== */
@media (max-width: var(--tt-stack-bp)){
  .tt-table-wrap.tt-stack table,
  .tt-table-wrap.tt-stack thead,
  .tt-table-wrap.tt-stack tbody,
  .tt-table-wrap.tt-stack th,
  .tt-table-wrap.tt-stack td,
  .tt-table-wrap.tt-stack tr{display:block;width:100%}
  .tt-table-wrap.tt-stack thead{display:none}
  .tt-table-wrap.tt-stack tr{border:var(--tt-b) solid var(--tt-bc);border-radius:12px;margin-bottom:10px;overflow:hidden;background:#fff}
  .tt-table-wrap.tt-stack td{border:0;border-bottom:var(--tt-b) solid var(--tt-bc2);padding:10px 12px;position:relative}
  .tt-table-wrap.tt-stack td:last-child{border-bottom:0}
  .tt-table-wrap.tt-stack td::before{content:attr(data-label);font-weight:600;color:#333;display:block;margin-bottom:6px}
}

/* ===== Extra small tuning (<=480px) ===== */
@media (max-width:480px){
  .tt-table-wrap{--tt-radius:8px}
  .tt-table-wrap caption{font-size:14.5px}
  .tt-table-wrap th,.tt-table-wrap td{padding:8px 10px;font-size:14px;line-height:1.4}
  .tt-table-wrap.tt-stack td{padding:9px 10px}
  /* cegah pecah layout oleh kata/URL panjang */
  .tt-table-wrap td,.tt-table-wrap th{word-break:break-word;overflow-wrap:anywhere}
  /* scrollbar lebih tipis di perangkat kecil (mode scroll) */
  .tt-table-wrap.tt-scroll::-webkit-scrollbar{height:8px}
}

/* ===== Ultra small (<=360px), opsional tapi membantu HP mungil ===== */
@media (max-width:360px){
  .tt-table-wrap th,.tt-table-wrap td{font-size:13.5px;padding:7px 9px}
}

/* ===== Single Article – Heading & TOC & Caption tuning ===== */

/* 1) Heading dalam artikel: rapatkan line-height & margin */
.single .entry-content h2,
.single .entry-content h3{
  line-height: 1.25;
  margin: 16px 0 10px;
}
@media (max-width: 900px){
  .single .entry-content h2,
  .single .entry-content h3{
    line-height: 1.18;          /* lebih rapat di smartphone */
    margin: 14px 0 8px;
  }
}

/* ===== FIX: TOC lebar di mobile & sejajar dengan konten ===== */
#tt-toc{
  /* pastikan kotaknya tidak lebih lebar dari artikel */
  max-width: var(--tt-content);
  width: min(95%, var(--tt-content));
  margin: 18px auto;
  /* beri gutter yang fleksibel agar selaras dengan konten artikel */
  padding: 14px clamp(12px, 4vw, 16px);
  box-sizing: border-box;
}

/* daftar panjang tidak mendorong lebar kontainer */
#tt-toc a{
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}

/* rapikan indent agar tidak “nyelonong” melebar */
#tt-toc ol{
  margin: 10px 0 0;
  padding-left: 1.1em;       /* cukup untuk bullet/nomor */
  list-style-position: outside;
}

/* amankan semua elemen di dalam TOC agar tidak melebihi kontainer */
#tt-toc *{ max-width: 100%; }

/* spacing lebih lega di mobile, tetap rapi di desktop */
@media (max-width: 900px){
  #tt-toc{ margin-top: 18px; margin-bottom: 18px; }
}
@media (min-width: 901px){
  #tt-toc{ margin-top: 22px; margin-bottom: 22px; }
}

/* 3) Caption gambar: perkecil & rata tengah (WP Gutenberg/Classic) */
.single .entry-content figure figcaption,
.single .entry-content .wp-caption .wp-caption-text{
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tt-muted);
  text-align: center;
  margin-top: 6px;
}
@media (min-width: 901px){
  .single .entry-content figure figcaption,
  .single .entry-content .wp-caption .wp-caption-text{
    font-size: 12px;           /* konsisten di desktop */
    text-align: center;          /* paksa center di desktop juga */
  }
}

/* 4) Jaga block gambar + caption tetap sejajar dengan lebar artikel */
.single .entry-content :where(figure, .wp-caption){
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* === Favorite Bar (di bawah TOC) === */
.fav-bar{
  max-width: var(--tt-content);
  margin: 14px auto 8px;
  display: flex; justify-content: left;
}
.fav-btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:10px 14px; border:1px solid #eee; border-radius:999px;
  background:#fff; color:#0f172a; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.fav-btn:hover{ transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.06); }
.fav-btn:focus{ outline:none; box-shadow:0 0 0 3px rgba(59,130,246,.35); }
.ico-star{ width:18px; height:18px; display:block; }
.fav-btn.is-on{ color:#eab308; border-color:#f59e0b; background:#fff7d6; }
.fav-btn.is-on .ico-star path[opacity]{ opacity:.45; }

/* padding sisi di mobile biar konsisten dgn TOC/Share */
@media (max-width:900px){
  .fav-bar{ padding-left:16px; padding-right:16px; }
}

.tt-tabpanel[hidden]{ display:none; }
.tt-tabbar .tt-tab[aria-selected="true"]{ font-weight:700; border-bottom:2px solid #111; }
.fav-btn{ position:relative; z-index:1; pointer-events:auto; }

/* Archive: ratakan meta tanggal ke kiri di semua tab (Terbaru/Populer/Favorit) */
.archive .tt-tabpanel .tt-stream .card .meta{
  display: flex;                 /* kalau sebelumnya block/center */
  justify-content: flex-start;   /* pastikan tidak center */
  text-align: left;              /* kalau ada text-align center yang diwarisi */
  margin-left: 0;                /* jaga jangan terdorong ke tengah */
}

/* (opsional) kalau masih ada yang ngeyel karena .card punya text-align:center */
.archive .tt-tabpanel .tt-stream .card{ text-align: left; }
#panel-favs .tt-stream .card .meta{
  display:flex; justify-content:flex-start; text-align:left; margin-left:0;
}

/* =========================
   THEME SURFACE / BACKGROUND
   ========================= */
/* Pastikan background terang sesuai permintaan */
:root{ --tt-bg:#fdfdfd; }
html[data-theme="light"]{
  --tt-bg:#fdfdfd;                 /* sebelumnya #ffffff → bikin “tidak solid” */
  --tt-surface:#ffffff;
  --tt-surface-2:#fafafa;
  --tt-border:#e5e7eb;
  --tt-hover:#f7f7f7;
}
body{ background:var(--tt-bg); }

/* =========================
   TOPIK TERKAIT (Tags) – chip putih, container transparan
   ========================= */
.tags{
  max-width: var(--tt-content);
  margin: 24px auto;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  /* override aturan lama yang membuat panel putih seluruhnya */
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

.tags a{
  background: #fff;                          /* chip putih */
  border: 1px solid var(--tt-border);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: #0f172a;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
  transition:
    transform .15s ease,
    box-shadow .15s ease,
    border-color .15s ease,
    background-color .15s ease;
}

.tags a:hover{
  background: #f7f7f7;                       /* efek hover tetap ada */
  border-color: #d1d5db;
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.tags a:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35); /* aksesibilitas */
}

/* =========================
   RELATED (single) – kartu putih full, gambar nempel, meta kiri
   (override semua versi sebelumnya)
   ========================= */
.related{ max-width:var(--tt-content); margin:24px auto; }
.related .grid.cols-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:700px){ .related .grid.cols-3{ grid-template-columns:1fr; gap:16px; } }

/* kartu putih tanpa padding internal */
.related .card{
  background:#fff !important;
  border:1px solid var(--tt-border);
  border-radius:14px;
  overflow:hidden;
  display:flex; flex-direction:column;
  padding:0 !important;
  text-align:left;
}
/* gambar nempel ke atas, no gap */
.related .card .thumb{
  display:block; width:100%;
  aspect-ratio:4/3; margin:0; border-radius:0; background:#fff;
}
.related .card .thumb img{
  width:100%; height:100%; display:block;
  object-fit:cover;         /* no crop, hindari burem karena scale */
}
.related .card .body{ padding:12px 14px 14px; }
.related .card .title{ margin:0 0 6px; line-height:1.35; }
.related .card .meta{
  display:flex; justify-content:flex-start;
  text-align:left; color:#666; font-size:13px; margin-top:2px;
}

/* ===== HAPUS efek center yang mungkin diwarisi dari .card global  ===== */
.related .card .meta, .related .card{ text-align:left !important; }

/* =========================
   KOMENTAR – panel putih solid
   ========================= */
#comments{
  max-width:var(--tt-content);
  margin: 32px auto 48px;
}
#comments .comment-respond{
  background:#fff;
  border:1px solid var(--tt-border);
  border-radius:12px;
  padding:16px;
}
#comments .comment-list .comment-body{
  background:#fff;
  border:1px solid var(--tt-border);
  border-radius:12px;
  padding:14px;
  margin-bottom:12px;
}
#comments input,#comments textarea{
  width:100%; padding:10px;
  border:1px solid var(--tt-border); border-radius:10px; background:#fff;
}
/* ===== Comments: hover/focus untuk tombol Kirim Komentar ===== */
#comments .comment-form .btn.primary,
#comments .form-submit #submit {
  display:inline-flex; align-items:center; justify-content:center;
  gap:8px; padding:10px 16px;
  border-radius:999px;
  border:1px solid var(--tt-border);
  background:#111;              /* warna tombol */
  color:#fff; font-weight:600;
  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .12s ease,
    border-color .12s ease;
}

#comments .comment-form .btn.primary:hover,
#comments .form-submit #submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  background:#000;              /* sedikit lebih gelap saat hover */
  border-color:#000;
}

#comments .comment-form .btn.primary:active,
#comments .form-submit #submit:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

#comments .comment-form .btn.primary:focus-visible,
#comments .form-submit #submit:focus-visible {
  outline:none;
  box-shadow: 0 0 0 3px rgba(59,130,246,.35), 0 4px 12px rgba(0,0,0,.12);
}

/* state disabled (kalau plugin/form validation mematikannya) */
#comments .comment-form .btn.primary[disabled],
#comments .form-submit #submit[disabled] {
  opacity:.6; cursor:not-allowed; transform:none; box-shadow:none;
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #comments .comment-form .btn.primary,
  #comments .form-submit #submit { transition: none; }
}

/* Judul "Topik Terkait" */
.post-taxonomy .tags-title{
  font-size: 18px;
  line-height: 1.3;
  margin: 0 0 12px;
  font-weight: 700;
  color: #111;
}
@media (max-width: 600px){
  .post-taxonomy .tags-title{ font-size: 24px; font-weight: 800; margin-bottom: 10px; margin-top: 50px; }
}

/* Chip tag: putih per-tag, rapi & tidak overflow */
.post-taxonomy .tags{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 100%;
}
.post-taxonomy .tags a{
  display: inline-block;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 9999px;
  text-decoration: none;
  color: #111;
  /* tidak mengubah ukuran font global; biarkan ikut tema */
}
.post-taxonomy .tags a:hover{
  border-color: #d0d0d0;
}
/* ==========================================================================
   TitikTerang — New Post Toast (Base + Variants)
   - Komponen toast artikel baru di kanan, tepat di atas Back-to-Top
   - Gunakan token tema: --tt-border, --tt-surface, --tt-heading, --tt-shadow, --tt-muted, --tt-hover, --tt-accent
   ========================================================================== */

:root{
  --tt-toast-w: 340px;    /* max width desktop */
  --tt-toast-thumb: 56px; /* ukuran thumbnail default */
}

/* ===== BASE ===== */
.tt-newpost-toast{
  position: fixed;
  right: 18px;
  /* offset: 20px margin + tinggi BackToTop 44px + jarak 14px */
  bottom: calc(20px + 44px + 14px);
  z-index: 10001;
  width: min(var(--tt-toast-w), 92vw);
  max-width: 92vw;

  display: none;                 /* di-toggle via .show */
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--tt-border);
  border-radius: 14px;
  background: var(--tt-surface);
  color: var(--tt-heading);
  box-shadow: var(--tt-shadow);
  -webkit-tap-highlight-color: transparent;
  transition: transform .16s ease, opacity .16s ease, box-shadow .22s ease;
  transform: translateY(6px);
  opacity: 0;
}
.tt-newpost-toast.show{
  display: flex;
  transform: translateY(0);
  opacity: 1;
}
.tt-newpost-thumb{
  flex: 0 0 auto;
  width: var(--tt-toast-thumb);
  height: var(--tt-toast-thumb);
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
}
.tt-newpost-thumb img{
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.tt-newpost-body{
  min-width: 0;
  display: grid; gap: 2px;
}
.tt-newpost-kicker{
  font-size: 12px; font-weight: 700; letter-spacing: .2px; color: var(--tt-muted);
}
.tt-newpost-title{
  font-weight: 800; line-height: 1.25; margin: 0;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tt-newpost-link{
  color: inherit; text-decoration: none; border-bottom: 1px solid transparent;
}
.tt-newpost-link:hover{ border-bottom-color: var(--tt-accent); }

.tt-newpost-close{
  margin-left: auto;
  border: 1px solid var(--tt-border);
  background: var(--tt-surface);
  border-radius: 10px;
  width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.tt-newpost-close:hover{ background: var(--tt-hover); }

/* Safe area (kanan) */
@supports (padding: max(0px)){
  .tt-newpost-toast{
    right: max(18px, env(safe-area-inset-right));
    bottom: calc(max(20px, env(safe-area-inset-bottom)) + 44px + 14px);
  }
}

/* Mobile tuning (base) */
@media (max-width: 480px){
  :root{ --tt-toast-thumb: 52px; }
  .tt-newpost-title{ font-size: 15px; }
}

/* ===== VARIANTS & EXTRAS ===== */

/* Posisi kiri opsional */
.tt-newpost-toast.pos-left{ left:18px; right:auto; }
@supports (padding: max(0px)){
  .tt-newpost-toast.pos-left{
    left: max(18px, env(safe-area-inset-left));
    right: auto;
  }
}

/* --- Rich variant --- */
.tt-newpost-toast.variant-rich{
  gap: 12px;
  padding: 12px 14px 16px;
}
.tt-newpost-toast.variant-rich .tt-newpost-thumb{
  --tt-toast-thumb: 64px;
  border: 1px solid var(--tt-border);
}
.tt-newpost-meta{
  display:flex; align-items:center; gap:8px; margin-top:2px;
  font-size:12px; color: var(--tt-muted);
}
.tt-newpost-cat{
  padding:2px 8px; border-radius:999px; background: var(--tt-hover);
  font-weight:700; letter-spacing:.2px; white-space:nowrap;
}
.tt-newpost-time{ white-space:nowrap; }

/* CTA (Rich) */
.tt-newpost-cta{
  margin-top:8px;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px; border:1px solid var(--tt-border);
  text-decoration:none; color: var(--tt-heading); background: var(--tt-surface);
}
.tt-newpost-cta:hover{ background: var(--tt-hover); }

/* Progress bar (Rich) */
.tt-newpost-prog{
  position:absolute; left:0; right:0; bottom:0; height:3px;
  background: var(--tt-accent); transform-origin:left; width:100%;
  animation-name: tt-toast-progress; animation-timing-function: linear; animation-fill-mode: forwards;
}
@keyframes tt-toast-progress {
  from{ transform: scaleX(1); }
  to  { transform: scaleX(0); }
}

/* --- Stack variant --- */
.tt-newpost-toast.variant-stack{
  display:none; /* di-toggle via .show */
  flex-direction:column; align-items:stretch;
  width: min(360px, 94vw);
}
.tt-newpost-list{ display:flex; flex-direction:column; gap:8px; margin: 4px 0 2px; }
.tt-newpost-item{
  display:flex; gap:10px; align-items:center; padding:8px; border:1px solid var(--tt-border);
  border-radius:12px; background: var(--tt-surface);
  cursor:pointer;
}
.tt-newpost-item:hover{ background: var(--tt-hover); }
.tt-newpost-item .thumb{
  width:48px; height:48px; border-radius:8px; overflow:hidden; background:#eee; flex:0 0 auto;
}
.tt-newpost-item .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.tt-newpost-item .t{ min-width:0; display:grid; gap:2px; }
.tt-newpost-item .t .ti{
  font-weight:700; line-height:1.25;
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden;
}
.tt-newpost-item .t .m{ font-size:12px; color:var(--tt-muted); }

/* Mobile tweaks (variants) */
@media (max-width:480px){
  .tt-newpost-toast.variant-rich .tt-newpost-title{ font-size:15px; }
  .tt-newpost-item .t .ti{ font-size:14px; }
}
/* ===== Read-Later ===== */
.tt-readlater-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px; border-radius:10px; border:1px solid var(--tt-border);
  background: var(--tt-surface); color: var(--tt-heading); cursor:pointer;
}
.tt-readlater-btn:hover{ background: var(--tt-hover); }
.tt-readlater-btn .mark{ font-weight:800; }
.tt-readlater-btn.saved{ border-color: var(--tt-accent); }

.tt-readlater-fab{
  position: fixed;
  right: 18px;
  bottom: calc(20px + 44px + 14px + 48px); /* di atas Back-to-Top dan ruang toast */
  z-index: 10001;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--tt-surface); color: var(--tt-heading);
  border: 1px solid var(--tt-border);
  display: none; align-items:center; justify-content:center; cursor:pointer;
  box-shadow: var(--tt-shadow);
}
.tt-readlater-fab.show{ display:flex; }
.tt-readlater-fab .badge{
  position:absolute; top:-6px; right:-6px; 
  min-width:18px; height:18px; padding:0 4px; border-radius:999px;
  background: var(--tt-accent); color: #fff; font-size:11px; display:flex; align-items:center; justify-content:center;
}

.tt-readlater-drawer{
  position: fixed; right: 18px;
  bottom: calc(20px + 44px + 14px + 44px + 10px);
  z-index: 10001; width: min(360px, 94vw);
  background: var(--tt-surface); color: var(--tt-heading);
  border:1px solid var(--tt-border); border-radius: 14px; box-shadow: var(--tt-shadow);
  display:none; padding: 10px;
}
.tt-readlater-drawer.show{ display:block; }
.tt-readlater-drawer h4{ margin:6px 8px 8px; font-weight:800; font-size:16px; }
.tt-readlater-list{ display:flex; flex-direction:column; gap:8px; max-height: 40vh; overflow:auto; }
.tt-readlater-item{
  display:flex; gap:10px; align-items:center;
  padding:8px; border:1px solid var(--tt-border); border-radius:10px;
}
.tt-readlater-item .thumb{ width:48px; height:48px; border-radius:8px; overflow:hidden; background:#eee; flex:0 0 auto; }
.tt-readlater-item img{ width:100%; height:100%; object-fit:cover; display:block; }
.tt-readlater-item .t{ min-width:0; display:grid; gap:2px; }
.tt-readlater-item .ti{
  font-weight:700; line-height:1.25; 
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.tt-readlater-item .rm{
  margin-left:auto; border:1px solid var(--tt-border); background:var(--tt-surface);
  border-radius:10px; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
}
.tt-readlater-item .rm:hover{ background: var(--tt-hover); }

/* Safe area */
@supports (padding: max(0px)){
  .tt-readlater-fab{ right: max(18px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 44px + 14px + 48px); }
  .tt-readlater-drawer{ right: max(18px, env(safe-area-inset-right)); bottom: calc(max(20px, env(safe-area-inset-bottom)) + 44px + 14px + 44px + 10px); }
}
/* ===== Reading Progress Bar ===== */
.tt-progress {
  position: fixed;
  left: 0; right: 0;
  top: 0;
  height: 3px;
  z-index: 10003;
  background: linear-gradient(to right, var(--tt-accent) 0%, var(--tt-accent) 100%) no-repeat left center / 0% 100%;
  transform: translateZ(0);
  pointer-events: none;
}
body.has-breaking .tt-progress { top: 52px; } /* turun kalau ada Breaking */
@supports (padding: max(0px)) {
  .tt-progress { top: max(0px, env(safe-area-inset-top)); }
  body.has-breaking .tt-progress { top: calc(52px + env(safe-area-inset-top)); }
}
/* ===== PWA Install Banner (A2HS) ===== */
.tt-a2hs {
  position: fixed;
  left: 16px; right: 16px;
  z-index: 10002;
  display: none; /* toggle .show via JS */
  bottom: calc(20px + 48px); /* default: beri ruang untuk back-to-top / FAB */
  background: var(--tt-surface, #fff);
  color: var(--tt-heading, #111);
  border: 1px solid var(--tt-border, #e5e7eb);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,.12);
  padding: 10px;
}
.tt-a2hs.show { display: block; }

.tt-a2hs-inner { display: grid; grid-template-columns: 48px 1fr auto; gap: 10px; align-items: center; }
.tt-a2hs .thumb {
  width: 48px; height: 48px; border-radius: 12px; overflow: hidden; background: #f1f5f9;
  display: flex; align-items: center; justify-content: center; font-weight: 800;
}
.tt-a2hs .txt { min-width: 0; }
.tt-a2hs .txt b { display:block; font-size: 14px; line-height:1.2; }
.tt-a2hs .txt span { display:block; font-size: 12px; color: var(--tt-muted,#667085); }
.tt-a2hs .actions { display:flex; gap:8px; }
.tt-a2hs .btn {
  border:1px solid var(--tt-border,#e5e7eb); background: var(--tt-surface,#fff);
  border-radius:10px; padding:8px 10px; cursor:pointer;
}
.tt-a2hs .btn.primary { background: var(--tt-accent,#111); color:#fff; border-color: var(--tt-accent,#111); }
.tt-a2hs .btn:hover { filter: brightness(0.98); }

/* iOS instruction line */
.tt-a2hs .ios-steps { margin-top: 6px; font-size: 12px; color: var(--tt-muted,#667085); }

@supports (padding: max(0px)) {
  .tt-a2hs { 
    left: max(16px, env(safe-area-inset-left)); 
    right: max(16px, env(safe-area-inset-right)); 
    bottom: calc(max(16px, env(safe-area-inset-bottom)) + 48px);
  }
}

/* Hide on big screens */
@media (min-width: 1024px){
  .tt-a2hs { display:none !important; }
}
/* ==== TT: Views chip (ikut gaya .meta-inline .credit-chip) ==== */
.single .meta-inline .tt-views-chip{
  display:inline-flex; align-items:center; gap:8px;
}
.single .meta-inline .tt-views-chip .ico-eye{ opacity:.9; }
.single .meta-inline .tt-views-chip b{ font-weight:700; color:var(--tt-heading); }
.single .meta-inline .tt-views-chip .label{ opacity:.7; }
@media (max-width:480px){
  .single .meta-inline .tt-views-chip .label{ display:none; } /* hemat ruang di HP */
}

/* Fallback jarak angka vs label pada chip views */
.credit-chip.tt-views-chip{ display:inline-flex; align-items:center; gap:8px; }
.credit-chip.tt-views-chip b + .label{ margin-left:.25em; }
@media (max-width:480px){ .credit-chip.tt-views-chip .label{ display:none; } }

@media (max-width: 480px){
  .single .meta-inline{
    font-size: 12.5px;
    gap: 6px;
  }
  .single .meta-inline .credit-chip{ padding: 4px 8px; }
  .single .meta-inline .tt-views-chip .label{ display:none; } /* ringkas */
  /* Jika ada chip teks panjang, sembunyikan prefix */
  .single .meta-inline .chip-prefix{ display:none; } /* hanya jika markupmu punya .chip-prefix */
}

/* =========================
   TT – Artikel Terpopuler (judul-only, 5 grid)
   ========================= */
:root{ --tt-pop-rank: #ffd729; } /* sesuai permintaan */

.tt-popular{ margin: 26px 0 34px; }
.tt-popular .tt-popular-heading{
  margin: 0 0 25px;
  font-size: 24px; line-height: 1.25; font-weight: 800;
  color: var(--tt-heading);
}

/* Counter + grid */
.tt-pop-grid{
  counter-reset: ttpop;
  display: grid;
  gap: 22px;
  grid-template-columns: repeat(5, minmax(0,1fr));
  margin: 0; padding: 0;
  list-style: none;
}

/* Kartu: number besar + judul, no border, no bg */
.tt-pop-card{ margin:0; }
.tt-pop-link{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 14px;
  text-decoration: none;
  color: var(--tt-heading);
  border-bottom: 0; /* hilangkan underline-on-hover global */
}

.tt-pop-rank::before{
  counter-increment: ttpop;
  content: counter(ttpop);
  font-weight: 900;
  /* ukuran fleksibel: kecil di mobile, besar di desktop */
  font-size: clamp(36px, 6vw, 72px);
  line-height: 1;
  color: var(--tt-pop-rank);
  display: block;
  transform: translateY(-2px);
}

/* Hapus clamp agar judul tampil penuh */
.tt-pop-title{
  display:block;            /* sebelumnya -webkit-box */
  overflow:visible;         /* sebelumnya hidden */
  -webkit-line-clamp:unset; /* matikan clamp */
  font-size: 20px;
  line-height:1.28;
  font-weight:800;
}

/* Hover: gunakan aksen link yang sudah ada di tema */
.tt-pop-link:hover .tt-pop-title{ border-bottom: 1px solid var(--tt-accent); }

/* Responsive kolom: 5 → 3 → 2; smartphone dijaga 2 kolom */
@media (max-width: 1200px){
  .tt-pop-grid{ grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 900px){
  .container{ max-width:var(--tt-max); margin:0 auto; padding:20px 16px }
  .tt-popular .tt-content{ padding-left:16px; padding-right:16px; } /* aman sisi kiri/kanan */
  .tt-pop-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
  .tt-pop-title{font-size:18px;}
  .tt-content.post-taxonomy{
    margin-left: 16px;     
  }
}
/* Opsional: HP sangat kecil (<=360px) turun 1 kolom agar tidak pecah */
@media (max-width: 360px){
  .container{ max-width:var(--tt-max); margin:0 auto; padding:20px 16px }    
  .tt-pop-grid{ grid-template-columns: 1fr; }
  .tt-pop-title{font-size:16px;}
}

/* Featured image + caption (single) */
.featured {
  /* sebelumnya: margin:16px auto 50px */
  margin: 16px auto 60px;        /* beri extra space sebelum TOC */
  border-radius: 12px;
  overflow: hidden;               /* jaga sudut gambar tetap rounded */
}

.featured img {
  display: block;
  width: 100%;
  height: auto;
}

.featured figcaption,
.featured .featured-caption{
  font-size: 13px;                /* kecil, tidak ganggu */
  line-height: 1.5;
  color: var(--tt-muted);         /* auto dark mode */
  text-align: left;
  padding: 8px 10px 0;            /* sedikit jarak dari gambar */
}

@media (max-width: 900px){
  .featured{ margin-bottom: 56px; } /* tetap lega di mobile */
}