/* metasanjaya — recreated from the live blog.metasanjaya.com stylesheet.
 *
 * The custom properties, card treatment, nav underline animation, pagination
 * and post-content rules below are copied from the production CSS served by
 * blog.metasanjaya.com rather than re-derived by eye, so the recreation
 * matches the original exactly.
 *
 * Additions beyond the original are confined to selectors Rustpress needs
 * and the live blog has no markup for (comments, related posts, engagement,
 * search results, sidebar widget variants, 404). They reuse the same tokens
 * so they look native rather than bolted on.
 */

:root {
  --color-primary: #0a0a0a;
  --color-secondary: #1a1a1a;
  --color-accent: #6366f1;
  --color-accent-light: #818cf8;
  --color-text: #f5f5f5;
  --color-text-muted: #a3a3a3;
  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background-color: var(--color-primary);
  color: var(--color-text);
  overflow-x: hidden;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
::selection { background-color: var(--color-accent); color: #fff; }
a { color: var(--color-accent-light); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
.container { max-width: 1152px; margin: 0 auto; padding: 0 1.5rem; }

.glass-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
}
.gradient-text {
  background: linear-gradient(135deg, #6366f1, #a855f7, #ec4899);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text-glow { text-shadow: 0 0 8px rgba(99,102,241,.6), 0 0 15px rgba(99,102,241,.3); }

/* Header */
.header {
  position: fixed; top: 0; z-index: 50; width: 100%;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(16px);
}
.nav {
  max-width: 1152px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
}
.logo { font-size: 1.25rem; font-weight: 600; letter-spacing: 0.02em; color: var(--color-text); }
.logo:hover { text-decoration: none; }
.nav-menu { display: none; gap: 1.5rem; align-items: center; list-style: none; font-size: 0.875rem; }
@media (min-width: 768px) { .nav-menu { display: flex; } }
.nav-link { position: relative; color: var(--color-text); text-transform: uppercase; letter-spacing: 0.04em; }
.nav-link:hover { text-decoration: none; }
.nav-link::after {
  content: ''; position: absolute; bottom: -4px; left: 0;
  width: 0; height: 2px;
  background: linear-gradient(90deg, #6366f1, #ec4899);
  transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }
/* Current section: the underline stays drawn instead of only on hover. */
.nav-link.active::after { width: 100%; }
.btn-consult {
  display: none;
  border: 1px solid rgba(129,140,248,0.5);
  border-radius: 9999px;
  padding: 0.5rem 1.25rem;
  font-size: 0.875rem; font-weight: 500;
  color: var(--color-text);
}
.btn-consult:hover { text-decoration: none; background: rgba(99,102,241,0.15); }
@media (min-width: 768px) { .btn-consult { display: inline-block; } }
.menu-btn { display: block; padding: 0.5rem; background: none; border: none; color: #fff; cursor: pointer; z-index: 60; }
@media (min-width: 768px) { .menu-btn { display: none; } }

/* Mobile menu */
.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(20px);
  transform: translateY(-100%); transition: transform .3s ease;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2rem;
  font-size: 1.125rem;
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { color: var(--color-text); }

/* Main layout */
.page-wrap { position: relative; z-index: 10; padding-top: 6rem; }
.main-grid { display: grid; grid-template-columns: 1fr 300px; gap: 3rem; padding-bottom: 4rem; }
@media (max-width: 768px) { .main-grid { grid-template-columns: 1fr; gap: 2rem; } }

/* Cards */
.card { background: rgba(255,255,255,0.03); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.08); border-radius: 16px; padding: 1.5rem; margin-bottom: 1.5rem; transition: transform .4s ease, box-shadow .4s ease, border-color .3s ease; }
.card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(99,102,241,0.15); border-color: rgba(99,102,241,0.3); }

.post-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.5rem; color: var(--color-text); }
.post-title a { color: inherit; }
.post-title a:hover { text-decoration: none; color: var(--color-accent-light); }
.post-excerpt { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 1rem; }
.post-meta { font-size: 0.8125rem; color: var(--color-text-muted); display: flex; flex-wrap: wrap; gap: 1rem; }
.post-image { width: 100%; height: 200px; object-fit: cover; border-radius: 10px; margin-bottom: 1rem; }
/* Single-post hero image.
   Deliberately a SEPARATE class from .post-image: that one is shared with
   home.html and archive.html, where the fixed 200px crop is wanted for uniform
   cards. Kakak asked to fix only the post page.
   Generated featured images are 1672x941 (16:9), so matching aspect-ratio with
   object-fit:contain shows the whole frame — the old `height:200px` + `cover`
   cropped faces off the top and bottom. */
.post-hero-image {
  width: 100%;
  aspect-ratio: 1672 / 941;
  height: auto;
  object-fit: contain;
  background: #0d0d0d;
  border-radius: 10px;
  margin-bottom: 1rem;
  display: block;
}
.badge { background: var(--color-accent); color: #fff; padding: 0.25rem 0.75rem; border-radius: 4px; font-size: 0.75rem; font-weight: 600; }
.badge:hover { text-decoration: none; }

/* Single post content */
.post-content { font-size: 1.0625rem; line-height: 1.85; color: #e5e5e5; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; }
.post-content img { max-width: 100%; height: auto; border-radius: 8px; }
.post-content a { word-break: break-all; }
.post-content h1 { font-size: 2rem; margin: 2rem 0 1rem; }
.post-content h2 { font-size: 1.6rem; margin: 2rem 0 1rem; }
.post-content h3 { font-size: 1.3rem; margin: 1.5rem 0 0.75rem; }
.post-content p { margin-bottom: 1.25rem; }
.post-content ul, .post-content ol { margin: 1rem 0 1.25rem 1.5rem; }
.post-content li { margin-bottom: 0.5rem; }
.post-content blockquote { border-left: 3px solid var(--color-accent); padding-left: 1rem; margin: 1.5rem 0; color: var(--color-text-muted); font-style: italic; }
.post-content code { background: rgba(255,255,255,0.1); padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875rem; }
.post-content pre { background: rgba(255,255,255,0.05); padding: 1rem; border-radius: 8px; overflow-x: auto; margin: 1.5rem 0; }
.post-content pre code { background: none; padding: 0; }
.post-content table { width: 100%; border-collapse: collapse; margin: 1.5rem 0; }
.post-content th, .post-content td { border: 1px solid rgba(255,255,255,0.1); padding: 0.5rem 0.75rem; text-align: left; }
.post-content th { background: rgba(255,255,255,0.05); }
.post-content a { color: var(--color-accent-light); text-decoration: underline; text-underline-offset: 2px; }

/* Sidebar */
.sidebar-title { font-size: 0.8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; color: var(--color-text-muted); }
.sidebar-post { display: flex; gap: 0.75rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-post:last-child { border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
.sidebar-post img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.sidebar-post-title { font-size: 0.875rem; font-weight: 500; line-height: 1.4; color: var(--color-text); }
.sidebar-post-title:hover { text-decoration: none; color: var(--color-accent-light); }
.sidebar-post-date { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.25rem; }
.cat-chip { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); padding: 0.375rem 0.75rem; border-radius: 6px; font-size: 0.8125rem; color: var(--color-text); display: inline-block; }
.cat-chip:hover { text-decoration: none; border-color: var(--color-accent); }
.cat-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }

/* Sidebar search + CTA, matching the original's chip/button treatment */
.sidebar-search { display: flex; gap: 0.5rem; }
.sidebar-search input {
  flex: 1; min-width: 0;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 6px; padding: 0.5rem 0.75rem;
  color: var(--color-text); font-family: inherit; font-size: 0.875rem;
}
.sidebar-search input:focus { outline: none; border-color: var(--color-accent); }
.sidebar-search button {
  background: var(--color-accent); color: #fff; border: none;
  border-radius: 6px; padding: 0.5rem 0.875rem;
  font-family: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
}
.sidebar-search button:hover { background: var(--color-accent-light); }
.cta-text { color: var(--color-text-muted); font-size: 0.875rem; margin-bottom: 1rem; }
.btn-cta {
  display: inline-block; background: var(--color-accent); color: #fff;
  border-radius: 9999px; padding: 0.625rem 1.5rem;
  font-size: 0.875rem; font-weight: 600;
}
.btn-cta:hover { text-decoration: none; background: var(--color-accent-light); }

/* Footer */
.footer { position: relative; z-index: 10; border-top: 1px solid rgba(255,255,255,0.1); padding: 2rem 0; text-align: center; color: var(--color-text-muted); font-size: 0.875rem; }
.footer a { color: var(--color-text-muted); }
.footer a:hover { color: var(--color-accent-light); }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: 0.5rem; margin-top: 2rem; }
.pagination a, .pagination span { padding: 0.5rem 1rem; border-radius: 8px; font-size: 0.875rem; }
.pagination a { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: var(--color-text); }
.pagination a:hover { text-decoration: none; border-color: var(--color-accent); }
.pagination .current { background: var(--color-accent); color: #fff; }

/* Breadcrumb */
.breadcrumb { font-size: 0.8125rem; color: var(--color-text-muted); margin-bottom: 1.5rem; }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-accent-light); }

/* Page headings (archive, category, search, 404) */
.page-title { font-size: 2rem; font-weight: 700; margin-bottom: 0.5rem; }
.page-subtitle { color: var(--color-text-muted); font-size: 0.9375rem; margin-bottom: 2rem; }
.empty-state { color: var(--color-text-muted); text-align: center; padding: 3rem 1rem; }

/* Post header meta */
.post-header { margin-bottom: 1.5rem; }
.post-header h1 { font-size: 2.125rem; font-weight: 700; line-height: 1.25; margin: 0.5rem 0; }
.post-categories { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }

/* Related posts */
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
.related-item { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; overflow: hidden; }
.related-item:hover { border-color: rgba(99,102,241,0.3); }
.related-item img { width: 100%; height: 120px; object-fit: cover; }
.related-item-body { padding: 0.75rem; }
.related-item-title { font-size: 0.9375rem; font-weight: 500; color: var(--color-text); line-height: 1.4; }
.related-item-title:hover { text-decoration: none; color: var(--color-accent-light); }

/* Engagement + comments */
.engagement { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 2rem 0 1rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,0.08); }
.engagement-btn { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 9999px; padding: 0.5rem 1rem; font-size: 0.875rem; color: var(--color-text); cursor: pointer; font-family: inherit; }
.engagement-btn:hover { border-color: var(--color-accent); }
.comment-list { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.comment { background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 10px; padding: 1rem; }
.comment-author { font-weight: 600; font-size: 0.9375rem; }
.comment-date { font-size: 0.75rem; color: var(--color-text-muted); margin-left: 0.5rem; }
.comment-body { margin-top: 0.5rem; color: #e5e5e5; font-size: 0.9375rem; }
.comment-form { margin-top: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.comment-form input, .comment-form textarea {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px; padding: 0.625rem 0.75rem;
  color: var(--color-text); font-family: inherit; font-size: 0.9375rem;
}
.comment-form input:focus, .comment-form textarea:focus { outline: none; border-color: var(--color-accent); }
.comment-form button {
  align-self: flex-start;
  background: var(--color-accent); color: #fff; border: none;
  border-radius: 9999px; padding: 0.625rem 1.5rem;
  font-family: inherit; font-size: 0.875rem; font-weight: 600; cursor: pointer;
}
.comment-form button:hover { background: var(--color-accent-light); }

::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--color-primary); }
::-webkit-scrollbar-thumb { background: rgba(99,102,241,0.5); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(99,102,241,0.8); }