/* =============================================================================
   Genel stiller. Ham renk/ölçü değeri YAZILMAZ — her şey tokens.css'ten gelir.
   ============================================================================= */

html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: var(--fs-400);
    line-height: 1.6;
    background-color: var(--surface-0);
    color: var(--text-primary);
    -webkit-font-smoothing: antialiased;
}

/* --- Başlık ölçeği ----------------------------------------------------------
   Sıkı letter-spacing + ağır grotesk, TED başlık karakterini veren asıl unsur. */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    letter-spacing: -0.02em;
    text-wrap: balance;
    /* "TEDxYouth@EyüboğluHS" gibi bölünemez uzun kelimeler dar ekranda taşıyordu. */
    overflow-wrap: break-word;
}

h1 {
    font-size: var(--fs-800);
    font-weight: 800;
    letter-spacing: -0.03em;
}

h2 { font-size: var(--fs-700); }
h3 { font-size: var(--fs-600); }
h4 { font-size: var(--fs-500); }
h5, h6 { font-size: var(--fs-400); }

.hero-title {
    font-size: var(--fs-900);
    font-weight: 800;
    letter-spacing: -0.035em;
    margin-bottom: var(--space-2);
}

.hero-meta {
    font-size: var(--fs-500);
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* --- Okuma ölçüsü -----------------------------------------------------------
   Koyu zeminde uzun metin, ölçü sınırlanmadan yorucu olur.                    */

.prose {
    max-width: 68ch;
    line-height: 1.75;
}

.prose > p:last-child {
    margin-bottom: 0;
}

/* --- Vurgu rengi ------------------------------------------------------------
   --accent-text aktif temayla değişir: koyu temada açık kırmızı (5.7:1),
   açık temada bir ton koyu kırmızı (6.2:1). İkisi de AA. Tanımı tokens.css'te. */

.text-accent { color: var(--accent-text); }

/* =============================================================================
   Bölüm (PageSection) yüzey sistemi

   Tonlar ANLAMSALDIR (taban / yükseltilmiş), mutlak renk değildir: ikisi de aktif
   temanın yüzey token'larını okur. Bu sayede tek bir bant tanımı hem koyu hem
   açık temada doğru çalışır.
   ============================================================================= */

.page-section > .container > .page-section-inner {
    padding-block: var(--space-6);
}

.page-section.density-compact > .container > .page-section-inner { padding-block: var(--space-4); }
.page-section.density-spacious > .container > .page-section-inner { padding-block: var(--space-7); }

@media (min-width: 768px) {
    .page-section > .container > .page-section-inner { padding-block: var(--space-7); }
    .page-section.density-compact > .container > .page-section-inner { padding-block: var(--space-5); }
    .page-section.density-spacious > .container > .page-section-inner { padding-block: var(--space-8); }
}

.tone-base {
    background-color: var(--surface-0);
    color: var(--text-primary);
}

.tone-elevated {
    background-color: var(--surface-2);
    color: var(--text-primary);
}

/* Video/iframe kabı — About ve EventYear'da ortak. */
.media-frame {
    display: block;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    border-radius: var(--radius-md);
    background-color: #000;
}

.form-legend {
    font-family: var(--font-heading);
    font-size: var(--fs-400);
    font-weight: 700;
    margin-bottom: var(--space-3);
}

/* =============================================================================
   Erişilebilirlik
   ============================================================================= */

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    z-index: 1080;
    padding: var(--space-2) var(--space-4);
    background-color: var(--tedx-red);
    color: #FFFFFF;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
    text-decoration: none;
    font-weight: 600;
}

.skip-link:focus {
    top: 0;
    color: #FFFFFF;
}

/* Bootstrap kendi focus halkasını .btn ve form kontrollerinde yönetiyor
   (--bs-focus-ring-color token'a bağlandı); geri kalan her şey buradan. */
a:not(.btn):focus-visible,
button:not(.btn):focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):not(.btn):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* FocusOnNavigate ve skip-link hedefleri programatik olarak odaklanır; görsel halka almamalılar. */
[tabindex="-1"]:focus {
    outline: none;
}

/* =============================================================================
   Hareket
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}