/* Cetakin. Blog — Shared Styles */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,700;0,9..144,900;1,9..144,700&family=Outfit:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink: #0e0e0c;
  --paper: #f4ede0;
  --paper-2: #ebe1cf;
  --cyan: #00b3d9;
  --magenta: #e0317a;
  --yellow: #ffd23f;
  --green: #25c93e;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: 'Outfit', system-ui, sans-serif;
  line-height: 1.8;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

/* ===== NAV ===== */
.blog-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(14, 14, 12, 0.95);
  backdrop-filter: blur(12px);
  color: var(--paper);
  padding: 16px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.blog-nav .brand {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: 18px;
  color: var(--paper);
  text-decoration: none;
  letter-spacing: -0.02em;
}
.blog-nav .brand span { color: var(--yellow); }
.blog-nav-links {
  display: flex;
  align-items: center;
  gap: 20px;
}
.blog-nav-links a {
  color: rgba(244, 237, 224, 0.7);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  transition: color 0.2s;
}
.blog-nav-links a:hover { color: var(--yellow); }
.blog-nav-links .nav-cta {
  background: var(--yellow);
  color: var(--ink);
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.blog-nav-links .nav-cta:hover { opacity: 0.9; color: var(--ink); }

/* ===== HERO HEADER ===== */
.blog-hero {
  background: var(--ink);
  color: var(--paper);
  padding: 80px 24px 60px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.blog-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,210,63,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 70% 80%, rgba(224,49,122,0.06) 0%, transparent 50%);
  pointer-events: none;
}
.blog-hero > * { position: relative; z-index: 1; }
.blog-hero .tag {
  display: inline-block;
  background: rgba(255,210,63,0.15);
  color: var(--yellow);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,210,63,0.25);
  margin-bottom: 20px;
}
.blog-hero h1 {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 5.5vw, 52px);
  font-weight: 900;
  line-height: 1.15;
  max-width: 700px;
  margin: 0 auto 16px;
  letter-spacing: -0.02em;
}
.blog-hero .meta {
  font-size: 14px;
  color: rgba(244,237,224,0.55);
  margin-bottom: 0;
}
.blog-hero .meta strong { color: rgba(244,237,224,0.8); }

/* ===== ARTICLE BODY ===== */
.blog-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 56px 24px 100px;
}
.blog-body h2 {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 700;
  margin: 48px 0 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--yellow);
}
.blog-body h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 32px 0 10px;
  color: var(--ink);
}
.blog-body p {
  margin-bottom: 18px;
  font-size: 16px;
  color: #2a2a28;
}
.blog-body ul, .blog-body ol {
  margin: 0 0 20px 24px;
}
.blog-body li {
  margin-bottom: 10px;
  font-size: 16px;
  color: #2a2a28;
}
.blog-body a {
  color: var(--magenta);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}
.blog-body a:hover { color: var(--cyan); }
.blog-body strong { color: var(--ink); }
.blog-body em { color: #555; }

/* ===== TABLE ===== */
.blog-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0 28px;
  font-size: 14px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.blog-body th {
  background: var(--ink);
  color: var(--paper);
  padding: 12px 14px;
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.blog-body td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--paper-2);
  background: #fff;
}
.blog-body tr:last-child td { border-bottom: none; }
.blog-body tr:hover td { background: #fffbe6; }

/* ===== CTA BOX ===== */
.cta-box {
  background: var(--ink);
  color: var(--paper);
  padding: 40px 32px;
  border-radius: 16px;
  text-align: center;
  margin: 48px 0;
  position: relative;
  overflow: hidden;
}
.cta-box::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: var(--yellow);
  border-radius: 50%;
  opacity: 0.08;
  pointer-events: none;
}
.cta-box h3 {
  font-family: 'Fraunces', serif;
  color: var(--yellow);
  font-size: 24px;
  margin-bottom: 10px;
}
.cta-box p {
  color: rgba(244,237,224,0.7);
  font-size: 15px;
  margin-bottom: 20px;
}
.cta-box a {
  display: inline-block;
  background: var(--yellow);
  color: var(--ink);
  padding: 14px 32px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  transition: transform 0.2s, box-shadow 0.2s;
}
.cta-box a:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,210,63,0.3);
  color: var(--ink);
}

/* ===== VERDICT / CALLOUT ===== */
.verdict {
  background: #fffbe6;
  border-left: 4px solid var(--yellow);
  padding: 18px 22px;
  margin: 24px 0;
  border-radius: 0 10px 10px 0;
  font-size: 15px;
}

/* ===== STEP CARDS ===== */
.step {
  background: #fff;
  border: 1px solid var(--paper-2);
  border-radius: 14px;
  padding: 24px 24px 24px 72px;
  margin: 16px 0;
  position: relative;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s, transform 0.2s;
}
.step:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.step-num {
  position: absolute;
  left: 22px;
  top: 24px;
  width: 36px;
  height: 36px;
  background: var(--yellow);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 15px;
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(255,210,63,0.3);
}
.step h3 { margin: 0 0 6px; font-size: 17px; }
.step p { margin-bottom: 8px; font-size: 15px; }
.step ul { margin: 8px 0 0 18px; font-size: 14px; }

/* ===== RELATED ARTICLES ===== */
.related {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid var(--paper-2);
}
.related h2 { border-bottom: none; font-size: 20px; margin-bottom: 16px; }
.related ul { list-style: none; margin: 0; padding: 0; }
.related li {
  margin-bottom: 12px;
  padding: 12px 16px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid var(--paper-2);
  transition: border-color 0.2s;
}
.related li:hover { border-color: var(--yellow); }
.related a {
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
}

/* ===== FOOTER ===== */
.blog-footer {
  background: var(--ink);
  color: rgba(244,237,224,0.5);
  padding: 32px 24px;
  text-align: center;
  font-size: 13px;
}
.blog-footer a { color: var(--yellow); text-decoration: none; }

/* ===== RESPONSIVE ===== */
@media (max-width: 640px) {
  .blog-nav { padding: 14px 16px; }
  .blog-nav-links { gap: 12px; }
  .blog-hero { padding: 60px 20px 48px; }
  .blog-body { padding: 40px 18px 80px; }
  .blog-body table { font-size: 12px; }
  .blog-body th, .blog-body td { padding: 9px 10px; }
  .step { padding-left: 62px; }
  .cta-box { padding: 32px 20px; }
}

/* ===== VIEW TRANSITIONS ===== */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.3s ease both vt-fade-out; }
::view-transition-new(root) { animation: 0.3s ease both vt-fade-in; }
@keyframes vt-fade-out { to { opacity: 0; transform: scale(0.98); } }
@keyframes vt-fade-in { from { opacity: 0; transform: scale(0.98); } }

/* ===== ENTRANCE ANIMATIONS ===== */
.blog-hero .tag,
.blog-hero h1,
.blog-hero .meta {
  animation: blog-fade-up 0.6s ease both;
}
.blog-hero h1 { animation-delay: 0.1s; }
.blog-hero .meta { animation-delay: 0.2s; }

@keyframes blog-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero .tag, .blog-hero h1, .blog-hero .meta {
    animation: none !important;
  }
  html { scroll-behavior: auto; }
}