/* U paketi: rehber + karşılaştırma bileşenleri. Yalnız tokens.css değişkenleri; tek vurgu kuralı korunur. */
.guide { max-width: 1400px; }
.guide .prose { max-width: 72ch; }
.guide .prose h2 { scroll-margin-top: 100px; }
.guide .prose h3 { color: var(--color-frost); }
.guide .prose p, .guide .prose li { overflow-wrap: anywhere; }
.guide .prose code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: #111; border: 1px solid var(--color-graphite); padding: 1px 6px; color: var(--color-frost); }
.guide .prose pre { margin: 1.2em 0; padding: var(--card-padding); background: #0b0b0b; border: 1px solid var(--color-graphite); overflow-x: auto; font-size: 14px; line-height: 1.5; }
.guide .prose pre code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }
.fn { font-size: 11px; line-height: 0; margin-left: 2px; }
.fn a { text-decoration: underline; text-underline-offset: 2px; color: var(--color-frost); padding: 2px 2px; }
.callout { margin: var(--spacing-36) 0; padding: var(--card-padding); border: 1px solid var(--color-graphite); }
.callout--act { border-color: var(--color-frost); }
.callout__h { font-size: var(--text-body-sm) !important; font-weight: 400; color: var(--color-ash) !important; margin: 0 0 12px !important; letter-spacing: 0; }
.callout h3 { font-size: 18px; margin: 0 0 9px; }
.callout .list { margin-top: 0; }
.callout > p { font-size: 16px; line-height: 1.45; }
.who { gap: var(--spacing-29) var(--spacing-36); }
.toc ol { list-style: decimal; padding-left: 1.3em; columns: 2 260px; column-gap: var(--spacing-36); font-size: 16px; line-height: 1.35; }
.toc li { break-inside: avoid; margin-top: .35em; }
.toc a:hover { text-decoration: underline; text-underline-offset: 3px; }
.verified { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: var(--spacing-22) 0; }
.sources { margin-top: var(--spacing-72); padding-top: var(--spacing-36); border-top: 1px solid var(--color-graphite); }
.sources h2 { font-size: 20px !important; margin-top: 0 !important; }
.sources ol { list-style: decimal; padding-left: 1.6em; font-size: 14px; line-height: 1.45; }
.sources li { margin-top: .6em; scroll-margin-top: 100px; }
.sources li:target { color: var(--color-frost); }
.sources li a { word-break: break-all; }
.sources .t-sm { margin-top: 1.2em; }
/* karşılaştırma tablosu */
.cmp { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.4; min-width: 0; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 12px 14px 12px 0; border-top: 1px solid var(--color-graphite); }
.cmp thead th { font-size: var(--text-body-sm); font-weight: 400; color: var(--color-ash); border-top: 0; padding-top: 0; }
.cmp tbody th { color: var(--color-frost); font-weight: 500; width: 22%; }
.cmp tbody td { width: 39%; }
.cmp tbody td:last-child { color: var(--color-frost); }
.cmp tbody tr:last-child > * { border-bottom: 1px solid var(--color-graphite); }
@media (max-width: 760px) {
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100% !important; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tbody tr { border-top: 1px solid var(--color-frost); padding: 14px 0; }
  .cmp tbody th { border: 0; padding: 0 0 8px; font-size: 17px; }
  .cmp tbody td { border: 0; padding: 6px 0; }
  .cmp tbody td::before { content: attr(data-l); display: block; font-size: 12px; color: var(--color-ash); margin-bottom: 2px; }
  .cmp tbody tr:last-child > * { border-bottom: 0; }
}
.rows .row-link p { font-size: 16px; line-height: 1.35; }
@media (max-width: 860px) { .toc ol { columns: 1; } }
.guide .prose { max-width: 980px; }
.guide .prose > p, .guide .prose > ul, .guide .prose > ol, .guide .prose > h2, .guide .prose > h3, .guide .prose > blockquote { max-width: 72ch; }
.prose ul.list, .prose .list { list-style: none; padding-left: 0; }
.prose .list > li + li { margin-top: 0; }
.callout ul.list { padding-left: 0; list-style: none; }
.callout .who ul { margin-top: 12px; }
.row-link h2 { font-size: var(--text-heading-sm); line-height: 1.15; }
.row-link:hover h2 { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }