/* =========================================================
   Yapgitsin — Blog article premium polish
   Layered on top of premium.css. Scoped to body.blog-article.
   ========================================================= */

/* ---------- Ambient warmth (slightly stronger on blog) ---------- */
body.blog-article::before {
  background:
    radial-gradient(circle 1000px at 75% -15%, rgba(217, 100, 18, 0.07), transparent 65%),
    radial-gradient(circle 800px at -10% 40%, rgba(217, 100, 18, 0.04), transparent 65%);
}

/* ---------- Typographic rendering ---------- */
body.blog-article main {
  font-feature-settings: "kern", "liga", "calt", "ss01", "cv11";
}

/* H1 hero — premium tightness + brand highlight refinement */
body.blog-article main h1.h-display {
  letter-spacing: -0.035em;
  font-weight: 800;
}
body.blog-article main h1.h-display em {
  background: linear-gradient(180deg, transparent 62%, rgba(177, 74, 8, 0.18) 62%);
  padding: 0 3px;
  border-radius: 2px;
}

/* Lead paragraph after H1 — larger, premium reading */
body.blog-article main p.lead {
  font-size: 17px;
  line-height: 1.7;
  color: var(--ink-2);
  letter-spacing: -0.005em;
  max-width: 62ch;
}
@media (min-width: 768px) {
  body.blog-article main p.lead {
    font-size: 19px;
    line-height: 1.7;
  }
}

/* Body paragraphs — long-form readability */
body.blog-article main section p:not(.lead):not(.eyebrow) {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  letter-spacing: -0.003em;
}
@media (min-width: 768px) {
  body.blog-article main section p:not(.lead):not(.eyebrow) {
    font-size: 16.5px;
  }
}

/* Strong inside body — slightly heavier, ink-tone */
body.blog-article main section p strong,
body.blog-article main section li strong {
  font-weight: 700;
  color: var(--ink);
}

/* H2 section heading — subtle brand accent bar underneath */
body.blog-article main section h2.h-section {
  position: relative;
  padding-bottom: 16px;
  margin-bottom: 18px;
  letter-spacing: -0.028em;
}
body.blog-article main section h2.h-section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 56px;
  height: 3px;
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-bright) 100%);
  border-radius: 999px;
}
/* Center-aligned section-head H2 — accent centered */
body.blog-article main .section-head h2.h-section::after {
  left: 50%;
  transform: translateX(-50%);
}

/* H3 polish — tighter hierarchy */
body.blog-article main section h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.018em;
  color: var(--ink);
  line-height: 1.35;
}

/* ---------- Lists ---------- */
body.blog-article main section ul.checklist li,
body.blog-article main section ul:not(.checklist) li,
body.blog-article main section ol li {
  font-size: 16px;
  line-height: 1.75;
  color: var(--ink-2);
  letter-spacing: -0.003em;
}
@media (min-width: 768px) {
  body.blog-article main section ul.checklist li,
  body.blog-article main section ul:not(.checklist) li,
  body.blog-article main section ol li {
    font-size: 16.5px;
  }
}
body.blog-article main section ol {
  padding-left: 24px;
}
body.blog-article main section ol li {
  padding-left: 4px;
  margin-bottom: 4px;
}
body.blog-article main section ol li::marker {
  color: var(--brand);
  font-weight: 700;
}

/* ---------- Inline code ---------- */
body.blog-article main code {
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-family: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.86em;
  padding: 2px 7px;
  border-radius: 6px;
  font-weight: 500;
  letter-spacing: 0;
  border: 1px solid rgba(177, 74, 8, 0.10);
}

/* ---------- Tables — premium ---------- */
body.blog-article main table {
  background: var(--surface-3);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  border: 1px solid var(--hairline);
  border-collapse: separate !important;
  border-spacing: 0;
  font-size: 14.5px;
}
body.blog-article main table thead tr {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%) !important;
}
body.blog-article main table th {
  font-weight: 700 !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink) !important;
  border: none !important;
  border-bottom: 1px solid var(--hairline-strong) !important;
  padding: 14px 16px !important;
}
body.blog-article main table td {
  border: none !important;
  border-bottom: 1px solid var(--hairline) !important;
  color: var(--ink-2) !important;
  padding: 12px 16px !important;
  transition: background 150ms var(--ease);
  vertical-align: top;
}
body.blog-article main table tbody tr:last-child td {
  border-bottom: none !important;
}
body.blog-article main table tbody tr:nth-child(odd) td {
  background-color: rgba(0, 0, 0, 0.012);
}
body.blog-article main table tbody tr:hover td {
  background-color: rgba(177, 74, 8, 0.04) !important;
}
/* Brand-soft column highlight preservation */
body.blog-article main table th[style*="background:var(--brand-soft)"],
body.blog-article main table th[style*="background-color:var(--brand-soft)"] {
  background: linear-gradient(180deg, var(--brand-soft) 0%, rgba(251, 238, 222, 0.55) 100%) !important;
}

/* Table wrapper — fade indicators on mobile scroll */
body.blog-article main div[style*="overflow-x:auto"] {
  position: relative;
  border-radius: 12px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 8px), transparent 100%);
}
@media (min-width: 768px) {
  body.blog-article main div[style*="overflow-x:auto"] {
    -webkit-mask-image: none;
            mask-image: none;
  }
}

/* ---------- FAQ — premium polish ---------- */
body.blog-article .faq__item {
  border-radius: 12px;
  transition: border-color 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
  border: 1px solid var(--hairline);
  background: var(--surface-3);
}
body.blog-article .faq__item:hover {
  border-color: var(--hairline-strong);
  box-shadow: var(--shadow-card);
}
body.blog-article .faq__item[open] {
  border-color: rgba(177, 74, 8, 0.32);
  box-shadow: 0 4px 28px -10px rgba(177, 74, 8, 0.16);
}
body.blog-article .faq__item summary {
  font-size: 15.5px;
  line-height: 1.5;
  padding: 20px 24px;
}
body.blog-article .faq__item summary::after {
  font-size: 24px;
  transition: transform 220ms var(--ease), color 220ms var(--ease);
}
body.blog-article .faq__item[open] summary::after {
  color: var(--brand-bright);
}
body.blog-article .faq__answer {
  font-size: 15px;
  line-height: 1.75;
  color: var(--ink-2);
  padding: 20px 24px;
}

/* ---------- Section spacing — premium rhythm ---------- */
body.blog-article main section.section {
  padding-top: 56px;
  padding-bottom: 56px;
}
@media (min-width: 768px) {
  body.blog-article main section.section {
    padding-top: 80px;
    padding-bottom: 80px;
  }
}
body.blog-article main section.section--tight {
  padding-top: 28px;
  padding-bottom: 28px;
}
@media (min-width: 768px) {
  body.blog-article main section.section--tight {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* Soft hairline divider edges between alt sections */
body.blog-article main section.section--alt {
  background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface-2) 60%, var(--surface) 100%);
  position: relative;
}
body.blog-article main section.section--alt::before,
body.blog-article main section.section--alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(26, 20, 17, 0.06) 50%, transparent 100%);
  pointer-events: none;
}
body.blog-article main section.section--alt::before { top: 0; }
body.blog-article main section.section--alt::after { bottom: 0; }

/* ---------- Breadcrumb refinement ---------- */
body.blog-article main section:first-of-type .container > div > div:first-child[style*="display:flex"][style*="font-size:13px"] {
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase;
  color: var(--ink-4) !important;
  margin-bottom: 20px !important;
}
body.blog-article main section:first-of-type .container > div > div:first-child[style*="display:flex"][style*="font-size:13px"] a {
  color: var(--ink-4) !important;
  transition: color 200ms var(--ease);
}
body.blog-article main section:first-of-type .container > div > div:first-child[style*="display:flex"][style*="font-size:13px"] a:hover {
  color: var(--brand);
}

/* ---------- Özet kutusu (TL;DR summary box) ---------- */
body.blog-article main .container > div[style*="background:var(--surface-3)"][style*="border-radius:var(--r-lg)"] {
  background: linear-gradient(135deg, #ffffff 0%, var(--surface) 100%) !important;
  border: 1px solid var(--hairline-strong) !important;
  box-shadow: 0 2px 12px -4px rgba(26, 20, 17, 0.08) !important;
  position: relative;
  overflow: hidden;
}
body.blog-article main .container > div[style*="background:var(--surface-3)"][style*="border-radius:var(--r-lg)"]::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-bright) 100%);
}

/* ---------- "Sözleşme öncesi soru" callout boxes ---------- */
body.blog-article main div[style*="border-left:3px solid var(--brand)"] {
  background: linear-gradient(135deg, var(--brand-soft) 0%, rgba(251, 238, 222, 0.5) 100%) !important;
  border-left: 4px solid var(--brand) !important;
  border-radius: 10px !important;
  box-shadow: 0 1px 8px -2px rgba(177, 74, 8, 0.08);
  padding: 16px 20px !important;
}

/* ---------- Generic white cards — hover lift ---------- */
body.blog-article main section article[style*="background:#fff"],
body.blog-article main section > .container > div > div[style*="background:#fff"] {
  transition: transform 220ms var(--ease), box-shadow 250ms var(--ease), border-color 220ms var(--ease);
}
body.blog-article main section article[style*="background:#fff"]:hover,
body.blog-article main section > .container > div > div[style*="background:#fff"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
  border-color: var(--hairline-strong) !important;
}

/* Sustain hover behavior for brand-soft cards too */
body.blog-article main section article[style*="background:var(--brand-soft)"],
body.blog-article main section > .container > div > div[style*="background:var(--brand-soft)"] {
  transition: transform 220ms var(--ease), box-shadow 250ms var(--ease);
}
body.blog-article main section article[style*="background:var(--brand-soft)"]:hover,
body.blog-article main section > .container > div > div[style*="background:var(--brand-soft)"]:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lift);
}

/* ---------- Final CTA — dark closure block, high contrast ---------- */
body.blog-article .final-cta {
  position: relative;
  background:
    radial-gradient(circle 600px at 85% -10%, rgba(217, 100, 18, 0.22), transparent 60%),
    radial-gradient(circle 500px at -10% 110%, rgba(217, 100, 18, 0.14), transparent 60%),
    linear-gradient(135deg, #1f1812 0%, #14100d 100%);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--r-xl);
  padding: 44px 28px;
  box-shadow: 0 24px 56px -20px rgba(26, 20, 17, 0.45), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  text-align: center;
  overflow: hidden;
  color: #ffffff;
}
body.blog-article .final-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--brand) 20%, var(--brand-bright) 50%, var(--brand) 80%, transparent 100%);
}
@media (min-width: 768px) {
  body.blog-article .final-cta { padding: 64px 48px; }
}

/* Eyebrow on dark — brand-bright */
body.blog-article .final-cta .eyebrow {
  color: var(--brand-bright);
  justify-content: center;
  position: relative;
  z-index: 1;
}
body.blog-article .final-cta .eyebrow::before {
  background: var(--brand-bright);
}

/* H2 on dark — white, larger */
body.blog-article .final-cta h2.h-section {
  color: #ffffff;
  max-width: 640px;
  margin: 14px auto 14px;
  padding-bottom: 18px;
  position: relative;
  z-index: 1;
}
body.blog-article .final-cta h2.h-section::after {
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, var(--brand) 0%, var(--brand-bright) 100%);
  width: 64px;
  height: 3px;
}

/* Body paragraph on dark — close to white, readable */
body.blog-article .final-cta p {
  max-width: 560px;
  margin: 0 auto 28px;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.98);
  font-weight: 500;
  position: relative;
  z-index: 1;
}

body.blog-article .final-cta__cta {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* Primary CTA on dark — keeps brand, glows */
body.blog-article .final-cta .btn-primary {
  background: var(--brand);
  color: #ffffff;
  box-shadow: 0 8px 24px -8px rgba(217, 100, 18, 0.55), 0 1px 0 rgba(255, 255, 255, 0.15) inset;
}
body.blog-article .final-cta .btn-primary:hover {
  background: var(--brand-bright);
  box-shadow: 0 12px 32px -8px rgba(217, 100, 18, 0.7), 0 1px 0 rgba(255, 255, 255, 0.2) inset;
  transform: translateY(-1px);
}

/* Secondary CTA on dark — ghost / outlined for high contrast */
body.blog-article .final-cta .btn-secondary {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
body.blog-article .final-cta .btn-secondary:hover {
  background: rgba(255, 255, 255, 0.10);
  border-color: rgba(255, 255, 255, 0.45);
  color: #ffffff;
  transform: translateY(-1px);
}

/* ---------- "İlgili yazılar" — last sections refinement ---------- */
body.blog-article main section:nth-last-of-type(-n+3) .container > h2 {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 16px;
  padding-bottom: 10px;
  position: relative;
}
body.blog-article main section:nth-last-of-type(-n+3) .container > h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--brand);
  border-radius: 999px;
}
body.blog-article main section.section--tight .container > ul a[style*="color:var(--brand)"] {
  position: relative;
  transition: color 200ms var(--ease), padding-left 200ms var(--ease);
  display: inline-block;
}
body.blog-article main section.section--tight .container > ul a[style*="color:var(--brand)"]:hover {
  color: var(--brand-bright) !important;
}

/* ---------- Badge polish ---------- */
body.blog-article .badge--brand {
  background: linear-gradient(180deg, var(--brand) 0%, var(--brand-strong) 100%);
  box-shadow: 0 1px 2px rgba(177, 74, 8, 0.2);
}

/* ---------- Eyebrow — slightly more letter-spacing on blog ---------- */
body.blog-article main .eyebrow {
  font-size: 11px;
  letter-spacing: 0.18em;
  font-weight: 700;
}

/* ---------- Blockquote-like emphasis (if used) ---------- */
body.blog-article main section blockquote {
  border-left: 4px solid var(--brand);
  background: var(--brand-soft);
  padding: 18px 22px;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  font-style: italic;
}

/* ---------- Reduce horizontal scrollbar weight ---------- */
body.blog-article main div[style*="overflow-x:auto"]::-webkit-scrollbar {
  height: 6px;
}
body.blog-article main div[style*="overflow-x:auto"]::-webkit-scrollbar-thumb {
  background: var(--hairline-strong);
  border-radius: 999px;
}
body.blog-article main div[style*="overflow-x:auto"]::-webkit-scrollbar-track {
  background: transparent;
}