/* blog.css - Hediyo Blog */
:root {
  --blog-ink:#2a222b;
  --blog-muted:#6f6872;
  --blog-line:#ece7f2;
  --blog-purple:#7C3AED;
  --blog-purple-dark:#5B21B6;
  --blog-soft:#fbf8ff;
  --blog-warm:#fff7ed;
}

.blog-list-wrap { padding-top:28px; }


.blog-breadcrumb {
  max-width:72rem;
  margin:0 auto;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-family:'Plus Jakarta Sans',sans-serif;
  font-size:.8rem;
  font-weight:700;
  color:#9a929d;
  border-bottom:1px solid #f4eff7;
}
.blog-breadcrumb a {
  color:#625a66;
  text-decoration:none;
  transition:color .15s ease;
}
.blog-breadcrumb a:hover { color:var(--blog-purple); }
.blog-breadcrumb i { font-size:.68rem; color:#c4bac9; }
.blog-breadcrumb span {
  color:var(--blog-purple-dark);
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Blog cards */
.blog-card {
  background:#fff;
  border-radius:14px;
  border:1px solid var(--blog-line);
  overflow:hidden;
  text-decoration:none;
  display:flex;
  flex-direction:column;
  min-height:100%;
  box-shadow:none;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.blog-card:hover {
  transform:translateY(-3px);
  border-color:rgba(124,58,237,.35);
  box-shadow:0 18px 44px rgba(42,34,43,.08);
}
.blog-card-img {
  position:relative;
  aspect-ratio:1.32/.82;
  background:linear-gradient(135deg,var(--blog-soft),var(--blog-warm));
  overflow:hidden;
  border-bottom:1px solid var(--blog-line);
}
.blog-card-img img {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .38s ease;
}
.blog-card:hover .blog-card-img img { transform:scale(1.045); }
.blog-category-badge {
  position:absolute;
  left:10px;
  bottom:10px;
  max-width:calc(100% - 20px);
  background:rgba(255,255,255,.94);
  color:var(--blog-purple-dark);
  border:1px solid rgba(255,255,255,.75);
  backdrop-filter:blur(8px);
  font-size:.72rem;
  font-weight:850;
  font-family:'Plus Jakarta Sans',sans-serif;
  padding:6px 9px;
  border-radius:8px;
  letter-spacing:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.blog-card-body {
  padding:16px;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.blog-card-title {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:850;
  font-size:1rem;
  color:var(--blog-ink);
  line-height:1.34;
  margin:0;
  letter-spacing:0;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:anywhere;
}
.blog-card-summary {
  font-size:.84rem;
  color:#756d79;
  line-height:1.62;
  margin:0;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
  min-height:4.08em;
}
.blog-card-meta {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-top:11px;
  margin-top:auto;
  border-top:1px solid #f0eaf6;
  font-size:.75rem;
  color:#9a929d;
  font-weight:650;
  font-family:'Plus Jakarta Sans',sans-serif;
}
.blog-card-meta span { display:flex; align-items:center; gap:4px; min-width:0; }
.blog-card-meta span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Category filters */
.cat-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  min-height:38px;
  padding:0 13px;
  border-radius:9px;
  border:1px solid #e7dff0;
  background:#fff;
  font-size:.8rem;
  font-weight:750;
  font-family:'Plus Jakarta Sans',sans-serif;
  color:#625a66;
  cursor:pointer;
  transition:border-color .16s ease, color .16s ease, background .16s ease, transform .16s ease;
}
.cat-btn:hover { border-color:rgba(124,58,237,.45); color:var(--blog-purple); background:#fbf8ff; }
.cat-btn.active { border-color:var(--blog-purple); background:var(--blog-purple); color:#fff; }

/* Pagination */
.page-btn {
  width:36px;
  height:36px;
  border-radius:9px;
  border:1px solid #e7dff0;
  background:#fff;
  color:#625a66;
  font-weight:800;
  cursor:pointer;
  transition:border-color .15s, color .15s, background .15s;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.page-btn:hover { border-color:var(--blog-purple); color:var(--blog-purple); }
.page-btn-active { background:var(--blog-purple); border-color:var(--blog-purple); color:white; }

/* Blog post content */
.blog-content {
  font-size:1.02rem;
  line-height:1.86;
  color:#4D4A45;
  font-family:'Inter',sans-serif;
  max-width:740px;
  margin:0 auto;
}
.blog-content h1,
.blog-content h2,
.blog-content h3 {
  font-family:'Plus Jakarta Sans',sans-serif;
  font-weight:850;
  color:var(--blog-ink);
  letter-spacing:0;
  line-height:1.18;
}
.blog-content h1 { font-size:2rem; margin:2rem 0 1rem; }
.blog-content h2 {
  font-size:clamp(1.35rem,2.4vw,1.9rem);
  margin:2.4rem 0 1rem;
  padding-top:1.35rem;
  border-top:1px solid #E8E1D7;
}
.blog-content h3 { font-size:1.12rem; margin:1.8rem 0 .75rem; color:#3e3842; }
.blog-content p { margin-bottom:1.15rem; }
.blog-content ul,
.blog-content ol { padding-left:1.35rem; margin-bottom:1.25rem; }
.blog-content li { margin-bottom:.55rem; }
.blog-content strong { color:var(--blog-ink); font-weight:800; }
.blog-content em { color:#6B6470; }
.blog-content a { color:var(--blog-purple-dark); font-weight:700; text-decoration:underline; text-underline-offset:3px; }
.blog-content table {
  width:100%;
  border-collapse:collapse;
  margin:1.5rem 0;
  font-size:.9rem;
  border:1px solid var(--blog-line);
}
.blog-content td { padding:10px 14px; border:1px solid var(--blog-line); }
.blog-content tr:nth-child(odd) td { background:#fbfafc; }
.blog-content tr:first-child td { background:#f5f0ff; font-weight:800; color:var(--blog-purple-dark); }

.blog-cover {
  width:100%;
  max-height:500px;
  object-fit:cover;
  object-position:center;
  border-radius:14px;
  margin-bottom:2rem;
  padding-right: 0!important;
  padding-left: 0!important;
  border:1px solid var(--blog-line);
}

.related-card {
  display:block;
  text-decoration:none;
  background:#fff;
  border:1px solid var(--blog-line);
  border-radius:14px;
  padding:10px;
  transition:transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.related-card:hover { transform:translateY(-3px); border-color:rgba(124,58,237,.35); box-shadow:0 14px 34px rgba(42,34,43,.07); }
.related-card h3 { color:var(--blog-ink); }
.related-card img { border-radius:10px !important; }

.blog-cta-box {
  background:#fff;
  border-radius:14px;
  padding:28px 24px;
  text-align:center;
  margin:2rem 0;
  border:1px solid rgba(124,58,237,.18);
  box-shadow:0 18px 44px rgba(42,34,43,.06);
}

@media (max-width: 640px) {
  .blog-cover { height:210px; }
  .blog-content { font-size:1rem; }
  .blog-content h2 { font-size:1.25rem; }
  .blog-card-img { aspect-ratio:16/10; }
  .blog-card-meta { align-items:flex-start; flex-direction:column; }
}




/* Migrated from blog-post.html */
:root { --ink:#2a222b; }
    body { font-family:'Inter',sans-serif; background:#ffffff; }
    .font-jakarta { font-family:'Plus Jakarta Sans',sans-serif; }
    /* Blog post hero — dark editorial header */
    .post-hero {
      background: linear-gradient(135deg, var(--ink) 0%, #3B1F54 60%, #1e1827 100%);
      padding: 3.5rem 1rem 4rem; text-align: center; position: relative; overflow: hidden;
    }
    .post-hero:after {
      content:""; position:absolute; right:-5rem; top:-5rem;
      width:20rem; height:20rem; border:1px solid rgba(255,255,255,0.06);
      border-radius:50%; pointer-events:none;
    }
    .post-hero-inner { max-width: 48rem; margin: 0 auto; position: relative; z-index: 1; }
    .post-hero h1 {
      font-family:'Plus Jakarta Sans',sans-serif; font-size:clamp(1.8rem,5vw,2.75rem);
      font-weight:800; color:#fff; line-height:1.12; text-shadow:0 2px 20px rgba(0,0,0,0.35); margin-bottom:1rem;
    }
    .post-hero .meta { color:rgba(255,255,255,0.55); font-size:0.875rem; display:flex; flex-wrap:wrap; gap:1rem; justify-content:center; align-items:center; font-family:'Plus Jakarta Sans',sans-serif; font-weight:600; }



/* Migrated from blog.html */
:root { --ink:#2a222b; }
    body { font-family:'Inter',sans-serif; background:#ffffff; }
    .font-jakarta { font-family:'Plus Jakarta Sans',sans-serif; }
    .blog-hero {
      background: linear-gradient(135deg,#FFF7ED 0%,#F4ECFF 52%,#FDF2F8 100%);
      position: relative;
      border-bottom: 1px solid #EDE8F4;
    }
    .blog-hero:after {
      position:absolute; right:-6rem; bottom:-6rem;
      width:24rem; height:24rem; border:1px solid rgba(109,40,217,0.08);
      border-radius:50%; pointer-events:none;
    }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}