:root{
  --bg:#f9fbff;
  --surface:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:rgba(15, 23, 42, .10);
  --primary:#0b5ed7;
  --primary2:#0ea5e9;
  --accent:#10b981;
  --shadow:0 30px 80px -60px rgba(11,94,215,.55);
  --radius:18px;
  --max:1120px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: radial-gradient(1200px 600px at 75% 0%, rgba(14,165,233,.12), transparent 60%),
              radial-gradient(900px 500px at 10% 10%, rgba(11,94,215,.10), transparent 55%),
              var(--bg);
  color:var(--text);
  line-height:1.6;
}
img{max-width:100%;height:auto}
a{color:inherit}

.container{max-width:var(--max);margin:0 auto;padding:0 20px}

.site-header{
  position:sticky;top:0;z-index:10020; /* menu mobile harus di atas overlay */
  backdrop-filter: blur(14px);
  background: rgba(249,251,255,.72);
  border-bottom:1px solid var(--border);
}
.header-inner{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-mark{
  width:38px;height:38px;border-radius:12px;
  background: linear-gradient(135deg, rgba(11,94,215,.14), rgba(14,165,233,.10));
  border:1px solid rgba(11,94,215,.18);
  display:grid;place-items:center;
}
.brand-title{font-weight:700;font-size:14px;line-height:1.1}
.brand-sub{font-size:12px;color:var(--muted)}

.nav{display:none;gap:6px;align-items:center}
.nav a{
  text-decoration:none;
  font-size:14px;
  color:rgba(15,23,42,.72);
  padding:10px 12px;
  border-radius:12px;
}
.nav a:hover{background:rgba(15,23,42,.05);color:var(--text)}

.header-cta{display:flex;gap:10px;align-items:center}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:14px;
  padding:11px 14px;
  font-weight:700;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
}
.btn-primary{background:var(--primary);color:#fff;box-shadow:0 18px 50px -35px rgba(11,94,215,.75)}
.btn-primary:hover{filter:brightness(.96)}
.btn-outline{background:rgba(255,255,255,.6);border-color:var(--border)}
.btn-outline:hover{background:rgba(255,255,255,.9)}

.hero{position:relative;overflow:hidden;padding:56px 0 26px}
.hero-grid{display:grid;grid-template-columns:1fr;gap:22px;align-items:center}
.hero-card{
  background: rgba(255,255,255,.70);
  border:1px solid rgba(15,23,42,.10);
  border-radius:calc(var(--radius) + 6px);
  padding:22px;
  box-shadow: var(--shadow);
}
.badges{display:flex;gap:8px;flex-wrap:wrap}
.badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
  color:rgba(15,23,42,.78);
}
.badge.primary{background:rgba(11,94,215,.10);border-color:rgba(11,94,215,.20);color:rgba(11,94,215,.95)}
.hero h1{margin:12px 0 8px;font-size:36px;line-height:1.12;letter-spacing:-.02em}
.hero p.lead{margin:0;color:rgba(15,23,42,.72);font-size:16px}
.hero .slogan{margin:12px 0 0;font-weight:700}
.hero .copy{margin:12px 0 0;color:rgba(15,23,42,.85)}
.hero-actions{display:flex;flex-direction:column;gap:10px;margin-top:16px}

.trust-row{display:grid;grid-template-columns:1fr;gap:10px;margin-top:16px}
.trust{
  background:rgba(255,255,255,.65);
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  padding:12px;
  display:flex;gap:10px;align-items:flex-start;
}
.trust b{display:block;font-size:13px}
.trust span{display:block;color:rgba(15,23,42,.66);font-size:12px;margin-top:2px}
.icon{
  width:34px;height:34px;border-radius:14px;
  background:rgba(11,94,215,.10);
  border:1px solid rgba(11,94,215,.18);
  display:grid;place-items:center;flex:0 0 auto;
}

.profile{
  border-radius:calc(var(--radius) + 8px);
  background: rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.10);
  padding:12px;
  box-shadow:0 40px 120px -90px rgba(11,94,215,.65);
}
.profile img{border-radius:calc(var(--radius) + 2px);object-fit:cover;width:100%;aspect-ratio:3/4}
.profile-meta{padding:10px 8px 6px}
.profile-meta b{display:block}
.profile-meta span{display:block;color:rgba(15,23,42,.66);font-size:12px;margin-top:2px}

.section{padding:56px 0}
.section.alt{background:rgba(15,23,42,.03);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.eyebrow{color:rgba(11,94,215,.92);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.h2{margin:10px 0 10px;font-size:30px;line-height:1.18;letter-spacing:-.02em}
.desc{margin:0;color:rgba(15,23,42,.70)}

.grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:18px}
.card{
  background:rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--radius);
  padding:18px;
}
.card h3{margin:12px 0 6px;font-size:16px}
.card p{margin:0;color:rgba(15,23,42,.70);font-size:14px}

.quote{font-size:14px;color:rgba(15,23,42,.88)}
.small{font-size:12px;color:rgba(15,23,42,.62)}

.cta{
  background:linear-gradient(135deg, rgba(11,94,215,.12), rgba(14,165,233,.08));
  border:1px solid rgba(11,94,215,.18);
  border-radius:calc(var(--radius) + 10px);
  padding:20px;
  display:grid;gap:14px;
}
.cta h3{margin:0;font-size:24px;letter-spacing:-.02em}
.cta p{margin:0;color:rgba(15,23,42,.72)}
.cta-actions{display:grid;gap:10px}

.site-footer{border-top:1px solid var(--border);padding:28px 0;background:rgba(255,255,255,.65)}
.footer-row{display:flex;flex-direction:column;gap:12px;align-items:flex-start;justify-content:space-between}
.footer-links{display:flex;flex-wrap:wrap;gap:12px}
.footer-links a{color:rgba(15,23,42,.68);text-decoration:none;font-size:13px}
.footer-links a:hover{color:var(--text)}

.wa-float{
  position:fixed;right:18px;bottom:18px;z-index:50;
  background:#0ea05a;
  color:#fff;text-decoration:none;
  border-radius:999px;
  padding:12px 14px;
  display:inline-flex;gap:10px;align-items:center;
  box-shadow:0 18px 60px -30px rgba(16,185,129,.75);
}
.wa-float:hover{filter:brightness(.97)}

/* Responsive */
@media(min-width: 860px){
  .nav{display:flex}
  .hero-grid{grid-template-columns:1.15fr .85fr;gap:28px}
  .hero-actions{flex-direction:row}
  .trust-row{grid-template-columns:repeat(3, 1fr)}
  .grid{grid-template-columns:repeat(3, 1fr)}
  .grid.two{grid-template-columns:repeat(2, 1fr)}
  .cta{grid-template-columns:1.2fr .8fr;align-items:center;padding:26px}
  .cta-actions{grid-template-columns:1fr 1fr}
  .footer-row{flex-direction:row;align-items:center}
}

/* Accessibility */
:focus-visible{outline:3px solid rgba(14,165,233,.5);outline-offset:2px;border-radius:12px}


/* =======================================
   CUSTOM CSS TAMBAHAN (Felicia)
   Ditambahkan: 2026-03-31
   ======================================= */

.header-cta .btn{
  font-size:14px;      /* ukuran teks tombol */
  padding:6px 12px;    /* tinggi dan lebar tombol */
  border-radius:6px;   /* opsional, membulatkan sudut */
}

.btn-outline-small{
  display:inline-block;
  padding:5px 12px;         /* ukuran kecil tapi terlihat */
  font-size:13px;           /* teks jelas */
  color:#0b5ed7;            /* teks biru */
  border:1px solid #0b5ed7; /* garis pinggir biru */
  border-radius:5px;
  background-color:transparent; /* transparan */
  text-decoration:none;
  transition:0.2s all;
  margin-top:6px;
}

.btn-outline-small:hover{
  background-color:#0b5ed7; /* saat hover jadi biru */
  color:#fff;               /* teks putih saat hover */
}

/* Override lebar container bila diperlukan */
.container{max-width:1100px;margin:auto}

/* Jarak paragraf pada konten postingan */
.entry-content p{margin-bottom:16px;line-height:1.6}

/* =======================================
   FRONT PAGE GRID - STYLE KONSISTEN
   ======================================= */

#layanan .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:15px;
  background-color:#e6f0ff; /* biru muda netral */
  padding:20px;
  border-radius:10px;
}

#layanan .card{
  background-color:#fff7e6;
  padding:15px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:0.3s all;
}

#layanan .card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:translateY(-2px)}

#testimoni .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:15px;
  background-color:#e6f0ff; /* biru muda terang */
  padding:20px;
  border-radius:10px;
}

#testimoni .card{
  background-color:#fff;
  padding:15px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:0.3s all;
}

#testimoni .card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:translateY(-2px)}

#artikel .grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:12px;
  background-color:#fff7e6; /* kuning pucat */
  padding:18px;
  border-radius:10px;
}

/* Kartu artikel versi ringkas + thumbnail responsif */
#artikel .article-card{
  background-color:#fff;
  padding:0;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:0.3s all;
  display:flex;
  flex-direction:column;
}
#artikel .article-card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:translateY(-2px)}

#artikel .article-thumb{display:block;text-decoration:none;color:inherit}
#artikel .article-thumb-img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
  background:#f1f5f9;
}
#artikel .article-thumb-fallback{
  width:100%;
  aspect-ratio:16/9;
  background:linear-gradient(135deg, rgba(11,94,215,.12), rgba(14,165,233,.08));
}

#artikel .article-body{padding:12px 12px 14px}
#artikel .article-title{margin:10px 0 6px;font-size:15px;line-height:1.3}
#artikel .article-date{margin-top:0}
#artikel .article-excerpt{margin-top:8px;font-size:13px;color:#556}
#artikel .article-cta{margin-top:10px}
#artikel .article-cta .btn{padding:8px 12px;border-radius:10px}

/* Rapikan tombol "Lihat semua artikel" */
#artikel .container > div[style*="margin-top:14px"] .btn{padding:10px 14px;border-radius:12px}

#tentang .grid.two{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:20px;
  margin-top:18px;
}

#tentang .card{
  background-color:#e6f0ff;
  padding:15px;
  border-radius:8px;
  box-shadow:0 2px 6px rgba(0,0,0,0.08);
  transition:0.3s all;
}

#tentang .card:hover{box-shadow:0 4px 12px rgba(0,0,0,0.15);transform:translateY(-2px)}

@media screen and (max-width:768px){
  #layanan .grid,
  #testimoni .grid,
  #artikel .grid,
  #tentang .grid.two{grid-template-columns:1fr}
}

/* Grid artikel (archive/kategori) */
.post-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:25px;margin-top:20px}

.post-item{
  background:#fff;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(0,0,0,0.08);
  transition:0.3s;
  display:flex;
  flex-direction:column;
}

.post-item .desc{flex-grow:1}
.post-item:hover{transform:translateY(-5px)}
.post-item h2{font-size:16px;padding:10px 15px 0}
.post-item .desc{font-size:14px;padding:5px 15px;color:#555}

.read-more{display:block;padding:10px 15px 15px;color:#0073aa;font-weight:500}

@media (max-width:992px){.post-grid{grid-template-columns:repeat(2, 1fr)}}
@media (max-width:600px){.post-grid{grid-template-columns:1fr}}

.post-grid .card{margin:0;padding:0;border:none;box-shadow:none;background:none}

.entry-content .aligncenter{display:block;margin:20px auto}

.entry-content{
  text-align:justify;
  font-size:14px;
  line-height:1.6;
  color:#555;
}

.desc{
  text-align:justify;
  font-size:14px;
  line-height:1.6;
  color:#555;
}

.desc img{display:block;margin:20px auto}
.desc p{margin:0 0 16px}

/* ---------- Menu mobile ---------- */
.menu-close{display:none} /* jangan tampil di desktop */
.menu-toggle{display:none;font-size:24px;background:none;border:none;padding:10px;border-radius:12px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent}
.menu-toggle:focus-visible{outline:3px solid rgba(14,165,233,.5);outline-offset:2px}

@media (max-width:859px){
  .menu-toggle{display:block;position:relative;z-index:10002;background:rgba(255,255,255,.72);border:1px solid rgba(15,23,42,.12);backdrop-filter:blur(10px)}
  .menu-toggle:active{transform:scale(.98)}

  .side-menu{
    position:fixed;
    inset:0;
    left:-100%;
    width:100%;
    max-width:none;
    height:100vh;

    /* Full-screen glass yang mengikuti warna tema */
    background:
      radial-gradient(900px 520px at 80% 0%, rgba(14,165,233,.18), transparent 60%),
      radial-gradient(800px 520px at 10% 20%, rgba(11,94,215,.16), transparent 55%),
      rgba(249,251,255,.62);
    backdrop-filter: blur(18px);
    border-left:1px solid rgba(15,23,42,.10);

    padding:84px 18px 22px;
    display:flex;
    flex-direction:column;
    gap:12px;

    transition:left 0.28s ease;
    z-index:10030;
    pointer-events:auto;
    margin:0 !important;
  }

  .side-menu.active{left:0}
}

@media (max-width:859px){
  .side-menu{
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }

  .menu-close{
    position:absolute;
    top:18px;
    right:14px;
    width:44px;
    height:44px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.12);
    background: rgba(255,255,255,.65);
    backdrop-filter: blur(14px);
    font-size:26px;
    line-height:1;
    display:grid;
    place-items:center;
    cursor:pointer;
    z-index:10031;
    -webkit-tap-highlight-color:transparent;
  }
  .menu-close:active{transform:scale(.98)}

  .side-menu a{
    /* Tombol full-width, teks rata kiri */
    width:100%;
    background: rgba(255,255,255,.78);
    border: 1px solid rgba(15,23,42,.10);
    padding:14px 14px;
    border-radius:16px;
    text-align:left;
    font-weight:800;
    color: rgba(15,23,42,.86);
    text-decoration:none;
    transition:0.18s;
    position:relative;
    z-index:10031;
    pointer-events:auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  .side-menu a::after{
    content:"›";
    opacity:.55;
    font-weight:900;
  }

  .side-menu a:active{transform:scale(.99)}
  .side-menu a:hover{
    background: rgba(11,94,215,.92);
    border-color: rgba(11,94,215,.92);
    color:#fff;
  }
  .side-menu a:hover::after{opacity:.9}
}


.menu-overlay{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100vh;
  background:rgba(15,23,42,0.45);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:0.3s;
  z-index:10010; /* di bawah header/menu, di atas konten */
}

.menu-overlay.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.logo{height:60px;width:auto}


/* =======================================
   PROFILE PHOTO RESPONSIVE (home page)
   ======================================= */
.profile-picture{display:block}
.profile-photo{width:100%;height:auto;display:block;border-radius:calc(var(--radius) + 2px);object-fit:cover}

/* Mobile: lebih pendek biar tidak kepanjangan */
@media (max-width:600px){
  .profile-photo{aspect-ratio:1/1; max-height:360px}
}

/* Tablet */
@media (min-width:601px) and (max-width:860px){
  .profile-photo{aspect-ratio:3/4; max-height:520px}
}

/* Desktop */
@media (min-width:861px){
  .profile-photo{aspect-ratio:3/4; max-height:640px}
}


/* =======================================
   TAMBAHAN SESUAI PERMINTAAN (2026-04-06)
   - Bottom menu sticky (semua device)
   - WhatsApp bubble dengan panel teks
   ======================================= */

body{padding-bottom:92px}

/* Bottom nav (lebih rapi) */
.bottom-nav{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
  display:flex;justify-content:center;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
}
.bottom-nav-inner{
  width:min(560px, 100%);
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  border-radius:22px;
  background: rgba(255,255,255,.82);
  border:1px solid rgba(15,23,42,.10);
  backdrop-filter: blur(14px);
  box-shadow:0 22px 70px -60px rgba(11,94,215,.55);
  padding:8px;
}
.bn-item{
  text-decoration:none;
  display:flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 10px;
  border-radius:16px;
  font-weight:900;
  font-size:13px;
  color: rgba(15,23,42,.78);
}
.bn-ico{
  width:34px;height:34px;border-radius:14px;
  display:grid;place-items:center;
  background: rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.08);
}
.bn-item:hover{background:rgba(15,23,42,.04);color:var(--text)}
.bn-item.active{background:rgba(11,94,215,.10);color:rgba(11,94,215,.95)}
.bn-item.active .bn-ico{background:rgba(11,94,215,.12);border-color:rgba(11,94,215,.20)}

@media (max-width:420px){
  .bn-txt{font-size:12px}
  .bn-ico{width:32px;height:32px;border-radius:13px}
}

/* WhatsApp bubble */
.wa-bubble{position:fixed;right:18px;bottom:106px;z-index:50}
.wa-trigger{
  width:56px;height:56px;border-radius:999px;
  border:0;cursor:pointer;
  display:grid;place-items:center;
  background:#25D366;color:#fff;
  box-shadow:0 18px 60px -30px rgba(37,211,102,.75);
}
.wa-trigger:hover{filter:brightness(.97)}

.wa-panel{
  position:absolute;right:0;bottom:66px;
  width:280px;
  border-radius:18px;
  background: rgba(255,255,255,.94);
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 26px 90px -70px rgba(11,94,215,.55);
  padding:12px;
}
.wa-panel-head{display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.wa-panel p{margin:0;font-size:13px;color:rgba(15,23,42,.84);line-height:1.4}
.wa-close{
  width:28px;height:28px;border-radius:10px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(255,255,255,.9);
  cursor:pointer;font-weight:900;
}
.wa-cta{
  margin-top:10px;
  display:inline-flex;align-items:center;justify-content:center;
  width:100%;
  background:#25D366;color:#fff;text-decoration:none;
  border-radius:14px;
  padding:10px 12px;
  font-weight:900;
}

/* =======================================
   FIX MOBILE: Tombol Buat Janji (kontras + center)
   Tambahkan: 2026-04-07
   ======================================= */

@media (max-width: 600px){
  /* tombol Buat Janji di header */
  .header-cta .btn.btn-primary{
    background:#084298;        /* lebih gelap dari #0b5ed7 => kontras naik */
    border-color:#084298;
    color:#ffffff;

    min-height:40px;           /* bikin enak dipencet & rapi */
    padding:10px 14px;         /* balikin biar gak kekecilan */

    display:inline-flex;       /* paksa center */
    align-items:center;
    justify-content:center;
    text-align:center;
    line-height:1.1;

    box-shadow:0 12px 30px -20px rgba(8,66,152,.65);
  }
}

/* =======================================
   FIX: Icon trust-row benar-benar center
   ======================================= */

.trust .icon{
  display:flex !important;      /* override supaya pasti flex-center */
  align-items:center;
  justify-content:center;
  line-height:0;               /* hilangkan efek baseline */
  padding:0;
}

.trust .icon svg{
  display:block;               /* hilangkan baseline gap */
  width:18px;
  height:18px;
}






/* Related posts grid (terpisah) — layout kartu: thumbnail di atas, teks di bawah
   Target: rapi & presisi di desktop / tablet / mobile */

.single-related {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px solid rgba(2, 132, 199, .15);
}

.single-related-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin: 0 0 14px;
}

.related-title{
  margin:0;
  font-size:18px;
  color: #0b2a4a;
}

.related-more{
  font-size:14px;
  text-decoration:none;
  color: #0b5ed7;
}

.related-more:hover{ text-decoration:underline; }

/* GRID: 3 kolom desktop, 2 tablet, 1 mobile */
.related-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* CARD: thumbnail atas, konten bawah (lebih enak dilihat) */
.related-card{
  overflow:hidden;
  border-radius: 16px;
  background: #fff;
  border: 1px solid rgba(2, 132, 199, .18);
  box-shadow: 0 8px 22px rgba(2, 132, 199, .08);
}

/* Thumbnail wrapper: rasio konsisten (tidak memanjang ke bawah) */
.related-thumbWrap{
  display:block;
  border-radius: 16px;
  overflow: hidden;
  background: rgba(2, 132, 199, .10);
  margin: -6px -6px 0; /* mengikuti gaya card theme kamu */
}

.related-thumb{
  width:100%;
  height: auto;
  aspect-ratio: 16 / 9; /* ini kunci: tinggi stabil di semua device */
  object-fit: cover;
  display:block;
}

/* Area teks */
.related-body{
  padding: 12px 12px 14px;
}

.related-name{
  margin:0 0 6px;
  font-size:16px;
  line-height:1.35;
}

.related-name a{
  text-decoration:none;
  color: #073763;
}

.related-name a:hover{ text-decoration:underline; }

.related-date{
  margin:0 0 10px;
  font-size: 12.5px;
  color:#245a8d;
}

.related-excerpt{
  margin:0;
  color:#0b2a4a;
  opacity: .92;
  text-align: left; /* jangan justify */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Kalau theme kamu punya .desc global yang justify, paksa khusus di sini */
.related-card .desc{ text-align:left !important; }

/* Desktop besar: boleh sedikit membesar */
@media (min-width: 1100px){
  .related-grid{ gap: 16px; }
  .related-name{ font-size: 16.5px; }
}

/* Tablet */
@media (max-width: 900px){
  .related-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .related-body{ padding: 12px; }
}

/* Mobile */
@media (max-width: 640px){
  .related-grid{ grid-template-columns: 1fr; }
  .related-thumb{ aspect-ratio: 16 / 10; } /* sedikit lebih tinggi di HP */
}



/* Hero: foto profil di atas untuk mobile/tablet, tetap kanan untuk desktop */

.hero-grid{
  display: grid;
  gap: 16px;
  align-items: start;
}

/* Desktop: teks kiri, foto kanan */
@media (min-width: 901px){
  .hero-grid{
    grid-template-columns: 1.25fr .75fr;
    grid-template-areas: "hero-card profile";
  }
  .hero-card{ grid-area: hero-card; }
  .profile{ grid-area: profile; }
}

/* Tablet & mobile: foto di atas, teks di bawah */
@media (max-width: 900px){
  .hero-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "profile"
      "hero-card";
  }
  .hero-card{ grid-area: hero-card; }
  .profile{ grid-area: profile; }
}

/* Biar foto lebih pas di HP */
.profile-picture{ display:block; }
.profile-photo{
  width: 100%;
  height: auto;
  border-radius: 18px;
  object-fit: cover;
}


/* =====================================================
   Perbaikan tampilan teks:
   Matikan perataan justify di semua halaman,
   KECUALI homepage (body.home)
   ===================================================== */
body:not(.home) .entry-content,
body:not(.home) .entry-content p,
body:not(.home) .entry-content li,
body:not(.home) .desc,
body:not(.home) .desc p{
  text-align: left;
  text-justify: auto;
  hyphens: auto;
}


/* =======================================
   KATEGORI ARTIKEL (PAGE TEMPLATE)
   Ditambahkan: 2026-04-29
   Catatan: ini hanya styling tambahan untuk halaman Kategori Artikel
   ======================================= */

.kat-toolbar{display:flex;gap:10px;flex-wrap:wrap}
.kat-toolbar .kat-btn{padding:10px 14px;border-radius:999px;font-size:14px}

.kat-wrap{overflow:hidden}
.kat-header{padding-bottom:12px;border-bottom:1px solid var(--border)}
.kat-empty{margin-top:14px;background:rgba(15,23,42,.03);border:1px dashed rgba(15,23,42,.18);border-radius:14px;padding:14px}

.kat-pagination ul{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.kat-pagination li a,
.kat-pagination li span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.kat-pagination li span.current{background:var(--primary);border-color:var(--primary);color:#fff}

@media(max-width: 520px){
  .kat-toolbar .kat-btn{width:100%;justify-content:center}
}


/* =======================================
   KATEGORI ARTIKEL (PAGE TEMPLATE)
   Ditambahkan: 2026-04-29
   Catatan: ini hanya styling tambahan untuk halaman Kategori Artikel
   ======================================= */

.kat-toolbar{display:flex;gap:10px;flex-wrap:wrap}
.kat-toolbar .kat-btn{padding:10px 14px;border-radius:999px;font-size:14px}

.kat-wrap{overflow:hidden}
.kat-header{padding-bottom:12px;border-bottom:1px solid var(--border)}
.kat-empty{margin-top:14px;background:rgba(15,23,42,.03);border:1px dashed rgba(15,23,42,.18);border-radius:14px;padding:14px}

.kat-pagination ul{list-style:none;padding:0;margin:0;display:flex;gap:10px;flex-wrap:wrap}
.kat-pagination li a,
.kat-pagination li span{
  display:inline-flex;align-items:center;justify-content:center;
  padding:10px 12px;border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
  text-decoration:none;
  font-weight:700;
  font-size:13px;
}
.kat-pagination li span.current{background:var(--primary);border-color:var(--primary);color:#fff}

@media(max-width: 520px){
  .kat-toolbar .kat-btn{width:100%;justify-content:center}
}

/* Mobile khusus: grid artikel 2 kolom, ringan dan rapi */
@media (max-width: 600px){
  .kat-wrap .grid{grid-template-columns:repeat(2, minmax(0, 1fr));gap:12px}
  .kat-wrap .card{padding:12px}
  .kat-wrap .card h3{font-size:13px;line-height:1.25}
  .kat-wrap .desc{font-size:12px;line-height:1.45}
  .kat-wrap .btn{padding:9px 10px;border-radius:12px;font-size:12px}
}


/* Mobile: rapikan kartu bacaan (hanya thumbnail + judul + cuplikan + tombol Baca) */
@media (max-width: 600px){
  .kat-wrap .kat-meta{display:none !important}

  .kat-wrap .card{padding:12px}
  .kat-wrap .card h3{margin:0 0 6px !important}

  /* Thumbnail lebih rapih dan konsisten */
  .kat-wrap .card a img{border-radius:14px !important}

  /* Cuplikan lebih ringkas */
  .kat-wrap .desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

  /* Tombol Baca: warna jelas, mudah diklik */
  .kat-wrap .kat-actions{margin-top:10px !important}
  .kat-wrap .kat-read{width:100%;justify-content:center}
}

/* Search ringan */
.kat-search-input{
  flex:1 1 220px;
  min-width:160px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:rgba(255,255,255,.72);
}
@media (max-width:600px){
  .kat-search{gap:8px !important}
  .kat-search-input{flex:1 1 100%}
  .kat-search-btn{flex:1 1 100%}
}