/* ============================================================
   YZTD · Article (publication detail) styles.
   Scoped prose via real CSS classes (.yz-art …) · NOT inline
   !important, because React drops inline !important at port time.
   720px reading column. → Next.js: Article page + prose module.
   ============================================================ */

/* ---------- ARTICLE HEADER ---------- */
.yz-article-head { background: var(--paper); border-bottom: 1px solid var(--mist); }
.yz-article-head__inner { max-width: var(--read); margin: 0 auto; padding: 56px var(--gutter) 44px; }
.yz-article-kicker { font-family: var(--f-label); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--royal); margin-bottom: 20px; }
.yz-article-title { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.1rem, 4.4vw, 3.1rem); line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 22px; color: var(--ink); text-wrap: balance; }
.yz-article-deck { font-size: 1.2rem; line-height: 1.6; color: var(--text-mute); margin: 0 0 36px; }
.yz-article-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.yz-article-meta .yz-avatar { width: 46px; height: 46px; font-size: .95rem; margin-bottom: 0; }
.yz-article-meta__name { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.yz-article-meta__sub { font-family: var(--f-label); font-size: 12px; color: var(--text-mute); margin-top: 3px; }

/* ---------- COVER ---------- */
.yz-article-cover {
  aspect-ratio: 16/7; border-radius: var(--r-lg); overflow: hidden; margin-top: -22px;
  background-color: var(--ink);
  background-image: repeating-linear-gradient(135deg, rgba(107,164,218,.16) 0 13px, transparent 13px 28px);
  display: flex; align-items: flex-end; padding: 22px;
}
.yz-article-cover__label { font-family: var(--f-label); font-size: 11.5px; letter-spacing: .06em; color: var(--on-dark-mute); }

/* ---------- PROSE (.yz-art) ---------- */
.yz-art { max-width: var(--read); margin: 0 auto; padding: 56px var(--gutter) 40px; }
.yz-art p { font-size: 1.0875rem; line-height: 1.78; color: var(--prose); margin: 0 0 26px; }
.yz-art p.yz-lead { font-size: 1.22rem; line-height: 1.7; color: var(--ink); }
.yz-art blockquote { margin: 40px 0; padding: 8px 0 8px 28px; border-left: 3px solid var(--royal); }
.yz-art blockquote p { font-family: var(--f-display); font-weight: 500; font-size: 1.5rem; line-height: 1.35; letter-spacing: -0.01em; color: var(--ink); margin: 0; }
.yz-art h2 { font-family: var(--f-display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); margin: 48px 0 18px; }
.yz-art h2 .yz-num { font-family: var(--f-label); font-size: .9rem; color: var(--royal); margin-right: 10px; font-weight: 500; }
.yz-art ul { margin: 0 0 26px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }
.yz-art li { position: relative; padding-left: 24px; font-size: 1.0625rem; line-height: 1.7; color: var(--prose); }
.yz-art li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 8px; height: 8px; background: var(--sky); transform: rotate(45deg); border-radius: 1px; }
.yz-art strong { color: var(--ink); font-weight: 600; }
.yz-art h3 { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--ink); margin: 32px 0 12px; }
/* ordered/numbered clauses (Tüzük maddeleri, legal lists) */
.yz-art ol { margin: 0 0 26px; padding: 0; list-style: none; counter-reset: yz-ol; display: flex; flex-direction: column; gap: 12px; }
.yz-art ol > li { position: relative; padding-left: 34px; font-size: 1.0625rem; line-height: 1.7; color: var(--prose); counter-increment: yz-ol; }
.yz-art ol > li::before { content: counter(yz-ol); position: absolute; left: 0; top: 0; width: auto; height: auto; background: none; transform: none; border-radius: 0; font-family: var(--f-label); font-size: .85rem; font-weight: 500; color: var(--royal); }
/* prose tables (KVKK veri kategorileri, çerez envanteri) */
.yz-art table { width: 100%; border-collapse: collapse; margin: 8px 0 34px; font-size: .95rem; }
.yz-art th, .yz-art td { text-align: left; padding: 11px 14px; border: 1px solid var(--mist); line-height: 1.55; color: var(--prose); vertical-align: top; }
.yz-art th { font-family: var(--f-label); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--royal); background: var(--paper); font-weight: 600; }

/* inline chart / data figure placeholder */
.yz-figure {
  aspect-ratio: 16/8; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--mist);
  background-color: var(--paper);
  background-image: repeating-linear-gradient(135deg, var(--mist) 0 12px, transparent 12px 24px);
  display: flex; align-items: flex-end; padding: 18px; margin: 8px 0 34px;
}
.yz-figure__label { font-family: var(--f-label); font-size: 11px; letter-spacing: .06em; color: var(--text-mute); }

/* ---------- TAGS ---------- */
.yz-tags { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--mist); }
.yz-tag { font-family: var(--f-label); font-size: 12px; color: var(--royal); background: var(--paper); border: 1px solid var(--mist); padding: 7px 13px; border-radius: 999px; }

/* ---------- RELATED ---------- */
.yz-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.yz-related-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--mist); border-radius: var(--r-lg); overflow: hidden; transition: transform .3s var(--ease-out), box-shadow .3s ease; }
.yz-related-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }
.yz-related-card__cover { aspect-ratio: 16/9; background-color: var(--ink); background-image: repeating-linear-gradient(135deg, rgba(107,164,218,.16) 0 11px, transparent 11px 24px); }
.yz-related-card__body { padding: 24px 24px 28px; }
.yz-related-card__tag { font-family: var(--f-label); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--royal); margin-bottom: 12px; }
.yz-related-card__title { font-family: var(--f-display); font-weight: 600; font-size: 1.16rem; line-height: 1.25; letter-spacing: -0.01em; margin: 0; color: var(--ink); text-wrap: balance; }

@media (max-width: 820px) { .yz-related-grid { grid-template-columns: 1fr; } }