/* ==========================================================================
   YL Platform — Typography
   Design System v1.0 — mobile-first, --yl-font-* değişkenleri kullanılır.
   ========================================================================== */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--yl-font-primary);
    font-size: var(--yl-font-base);
    line-height: var(--yl-lh-body);
    color: var(--yl-text-primary);
    background: var(--yl-bg-page);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--yl-sp-3);
    font-weight: var(--yl-weight-semibold);
    line-height: var(--yl-lh-snug);
    color: var(--yl-text-primary);
}

p {
    margin: 0 0 var(--yl-sp-4);
}

a {
    color: var(--yl-text-link-hover);
    text-decoration: none;
    transition: color var(--yl-transition-fast);
}
a:hover { color: var(--yl-color-primary); }
a:focus-visible {
    outline: 2px solid var(--yl-border-focus);
    outline-offset: 2px;
}

ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img { max-width: 100%; height: auto; display: block; }

button { font-family: inherit; }

/* -------------------------------------------------------------------------
   Başlık ölçekleri — mobile-first, md breakpoint'te büyür
   ------------------------------------------------------------------------- */

.yl-article__title {
    font-size: var(--yl-font-xl);
    line-height: var(--yl-lh-tight);
    margin-bottom: var(--yl-sp-3);
}
@media (min-width: 768px) {
    .yl-article__title { font-size: 1.75rem; }
}
@media (min-width: 1024px) {
    .yl-article__title { font-size: var(--yl-font-3xl); }
}

.yl-article__lead {
    font-size: var(--yl-font-md);
    font-style: italic;
    color: var(--yl-text-secondary);
    line-height: var(--yl-lh-relaxed);
    border-left: 3px solid var(--yl-color-primary);
    padding-left: var(--yl-sp-3);
    margin-bottom: var(--yl-sp-5);
}

.yl-card__title { font-size: var(--yl-font-md); font-weight: var(--yl-weight-semibold); margin: var(--yl-sp-2) 0; }
.yl-card__title a { color: var(--yl-text-primary); }
.yl-card__title a:hover { color: var(--yl-color-primary); }
.yl-card__title--sm { font-size: var(--yl-font-base); }

.yl-card--large .yl-card__title { font-size: var(--yl-font-lg); }
@media (min-width: 768px) {
    .yl-card--large .yl-card__title { font-size: var(--yl-font-xl); }
}

.yl-card__excerpt {
    font-size: var(--yl-font-sm);
    color: var(--yl-text-secondary);
    line-height: var(--yl-lh-relaxed);
    margin: var(--yl-sp-2) 0;
}
.yl-card__excerpt--sm { font-size: var(--yl-font-xs); }

.yl-card__meta-bottom {
    display: flex;
    gap: var(--yl-sp-3);
    flex-wrap: wrap;
    font-size: var(--yl-font-xs);
    color: var(--yl-text-tertiary);
}

.yl-section__title {
    font-size: var(--yl-font-lg);
    border-left: 3px solid var(--yl-color-primary);
    padding-left: var(--yl-sp-2);
    margin: 0;
}

.yl-article__content {
    font-size: var(--yl-font-md);
    line-height: var(--yl-lh-body);
}
.yl-article__content p { margin-bottom: var(--yl-sp-4); }
.yl-article__content h2 { font-size: var(--yl-font-lg); margin-top: var(--yl-sp-8); }
.yl-article__content h3 { font-size: var(--yl-font-md); margin-top: var(--yl-sp-6); }
.yl-article__content--serif { font-family: var(--yl-font-serif); }
.yl-article__content blockquote {
    border-left: 3px solid var(--yl-color-primary);
    background: var(--yl-bg-subtle);
    padding: var(--yl-sp-3) var(--yl-sp-4);
    margin: var(--yl-sp-5) 0;
    font-style: italic;
    border-radius: 0 var(--yl-radius-md) var(--yl-radius-md) 0;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(1px,1px,1px,1px);
}