/*
 * 343 — editoryel tasarım sistemi
 * Tek kaynak: renk, tipografi ve ritim yalnızca burada tanımlanır.
 * Şablonlar ed-* sınıflarını kullanır, ham renk/px yazmaz.
 *
 * Aydınlık/karanlık tek token setinden gelir: :root aydınlığı tanımlar,
 * dark blokları YALNIZCA token'ları yeniden tanımlar. Bir rengin tek
 * tanımı asla bir media/[data-theme] bloğunun içinde olmaz.
 */

:root {
    --paper: #faf8f4;
    --sheet: #ffffff;
    --ink: #15161a;
    --ink-2: #5a5750;
    --rule: #d5cfc4;
    --rule-2: #e8e2d8;
    --tint: #f2ede3;
    --red: #c31423;
    /* Koyu bant aydınlık temada da koyu kalır: editoryel kontrast aracı. */
    --band: #15161a;
    --band-ink: #f3f1ed;
    --band-ink-2: #a8a29a;
    --band-rule: #32343b;
    --shadow: 0 1px 2px rgba(21, 22, 26, .06);

    --serif: "Newsreader", Georgia, "Times New Roman", serif;
    --sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

    --wrap: 1240px;
    --gutter: 40px;
}

/* Sistem tercihi karanlıksa ve kullanıcı elle aydınlık seçmediyse. */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --paper: #121316;
        --sheet: #17181c;
        --ink: #ecebe7;
        --ink-2: #9b958c;
        --rule: #2e3037;
        --rule-2: #232529;
        --tint: #191b1f;
        --red: #ff4b58;
        --band: #0b0c0e;
        --band-ink: #ecebe7;
        --band-ink-2: #8e8981;
        --band-rule: #26282d;
        --shadow: 0 1px 2px rgba(0, 0, 0, .5);
    }
}

/* Elle seçim her iki yönde de kazanır. */
:root[data-theme="dark"] {
    --paper: #121316;
    --sheet: #17181c;
    --ink: #ecebe7;
    --ink-2: #9b958c;
    --rule: #2e3037;
    --rule-2: #232529;
    --tint: #191b1f;
    --red: #ff4b58;
    --band: #0b0c0e;
    --band-ink: #ecebe7;
    --band-ink-2: #8e8981;
    --band-rule: #26282d;
    --shadow: 0 1px 2px rgba(0, 0, 0, .5);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; }
a:hover, a:focus-visible { color: var(--red); }

:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 600; margin: 0; }

/* ---------- yardımcılar ---------- */

.ed-wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.ed-kicker {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 600;
    font-size: 11px;
    line-height: 1.2;
}

.ed-sans { font-family: var(--sans); }

/* text-wrap: balance manşetlerde dul satırı engeller, desteklenmeyen
   tarayıcıda sessizce yok sayılır. */
.ed-hl { text-wrap: balance; }

.ed-muted { color: var(--ink-2); }
.ed-accent { color: var(--red); }

.ed-visually-hidden {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Kart görselleri: oran ayrılır, yükleme sırasında zıplama olmaz. */
.ed-img { display: block; width: 100%; object-fit: cover; background: var(--tint); }
.ed-img--16x9 { aspect-ratio: 16 / 9; }
.ed-img--4x3  { aspect-ratio: 4 / 3; }

/* ---------- üst şerit ---------- */

.ed-topbar {
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: .03em;
    color: var(--ink-2);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 14px 0;
}

.ed-topbar__group { display: flex; gap: 20px; align-items: center; }

.ed-btn-ghost {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    font-size: 11px;
    border: 1px solid var(--rule);
    background: none;
    color: inherit;
    padding: 8px 14px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 34px;
}

.ed-btn-ghost:hover { border-color: var(--red); color: var(--red); }

/* Tema anahtarı: iki ikon üst üste, aktif olan görünür. */
.ed-theme__sun, .ed-theme__moon { display: none; }
:root[data-theme="dark"] .ed-theme__sun { display: block; }
:root[data-theme="light"] .ed-theme__moon { display: block; }
:root:not([data-theme]) .ed-theme__moon { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) .ed-theme__moon { display: none; }
    :root:not([data-theme]) .ed-theme__sun { display: block; }
}

/* ---------- masthead ---------- */

.ed-masthead {
    border-top: 1px solid var(--ink);
    border-bottom: 1px solid var(--rule);
    padding: 26px 0 20px;
    text-align: center;
}

.ed-masthead__logo { height: 52px; width: auto; display: block; margin: 0 auto; }

.ed-masthead__tagline {
    font-family: var(--sans);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: .42em;
    color: var(--ink-2);
    margin-top: 14px;
}

/* ---------- menü ---------- */

.ed-nav { border-bottom: 2px solid var(--ink); }

.ed-nav__list {
    list-style: none;
    margin: 0;
    padding: 13px 0;
    display: flex;
    gap: 34px;
    justify-content: center;
    flex-wrap: wrap;
}

.ed-nav__link {
    font-family: var(--sans);
    text-transform: uppercase;
    letter-spacing: .15em;
    font-weight: 600;
    font-size: 12px;
    display: inline-block;
    padding: 5px 0;
}

.ed-nav__link--active { color: var(--red); }

/* ---------- bölüm başlığı ---------- */

.ed-section {
    border-top: 2px solid var(--ink);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 26px;
}

.ed-section__title { font-family: var(--sans); text-transform: uppercase; letter-spacing: .15em; font-weight: 600; font-size: 13px; margin: 0; }
.ed-section__more { font-family: var(--sans); font-size: 12px; color: var(--ink-2); }

/* ---------- manşet ---------- */

.ed-lead__kicker { margin: 22px 0 12px; color: var(--red); }

.ed-lead__title {
    font-size: clamp(34px, 4.4vw, 63px);
    line-height: 1.02;
    letter-spacing: -.021em;
    margin: 0 0 18px;
}

.ed-lead__deck {
    font-size: clamp(18px, 1.5vw, 21px);
    line-height: 1.5;
    color: var(--ink-2);
    font-weight: 300;
    margin: 0 0 20px;
    max-width: 60ch;
}

.ed-byline {
    font-family: var(--sans);
    display: flex;
    gap: 14px;
    align-items: center;
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--ink-2);
    letter-spacing: .04em;
}

.ed-byline__sep { color: var(--rule); }

/* ---------- kart ---------- */

.ed-card__kicker { margin: 16px 0 9px; color: var(--red); font-size: 10px; }

.ed-card__title {
    font-size: 25px;
    line-height: 1.16;
    margin: 0 0 10px;
}

.ed-card__deck {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--ink-2);
    font-weight: 300;
}

.ed-grid { display: grid; gap: 36px; }
.ed-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ed-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---------- liste (son dakika / ilgili) ---------- */

.ed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }

.ed-list__item { padding: 18px 0; border-bottom: 1px solid var(--rule-2); }
.ed-list__item:last-child { border-bottom: 0; }

.ed-list__time { font-family: var(--sans); font-size: 11px; letter-spacing: .06em; color: var(--ink-2); margin-bottom: 7px; }
.ed-list__time--live { color: var(--red); }

.ed-list__title { font-size: 20px; line-height: 1.24; font-weight: 500; margin: 0; }

/* numaralı liste (en çok okunan) */
.ed-rank { list-style: none; margin: 0; padding: 0; }
.ed-rank__item { display: flex; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--rule-2); }
.ed-rank__no { font-size: 34px; font-weight: 200; color: var(--ink-2); line-height: 1; width: 38px; flex-shrink: 0; }
.ed-rank__item:first-child .ed-rank__no { color: var(--red); }
.ed-rank__title { font-size: 19px; line-height: 1.28; font-weight: 500; }

/* ---------- yan sütun ---------- */

.ed-aside { border-left: 1px solid var(--rule); padding-left: var(--gutter); }

.ed-aside__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    border-bottom: 2px solid var(--ink);
    padding-bottom: 9px;
    margin-bottom: 4px;
}

.ed-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--red); display: inline-block; }

.ed-promo { margin-top: 30px; background: var(--tint); border-top: 2px solid var(--red); padding: 22px; }
.ed-promo__text { margin: 0 0 16px; font-size: 17px; line-height: 1.45; }
.ed-promo__cta { display: block; width: 100%; text-align: center; border: 1px solid var(--ink); padding: 11px 0; }
.ed-promo__cta:hover { background: var(--ink); color: var(--paper); }

/* ---------- koyu bant (youtube) ---------- */

.ed-band { background: var(--band); color: var(--band-ink); padding: 54px 0; }
.ed-band .ed-section { border-top: 0; border-bottom: 1px solid var(--band-rule); padding: 0 0 16px; }
.ed-band .ed-section__title { color: var(--band-ink); }
.ed-band .ed-section__more { color: var(--band-ink-2); }
.ed-band .ed-card__title { color: var(--band-ink); font-size: 21px; line-height: 1.2; font-weight: 500; }

.ed-video { position: relative; display: block; }
.ed-video__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.ed-video__dur {
    position: absolute; right: 10px; bottom: 10px;
    background: rgba(0, 0, 0, .78); color: #fff;
    font-family: var(--sans); font-size: 11px; letter-spacing: .04em; padding: 3px 7px;
}

/* ---------- tablo (puan durumu) ---------- */

.ed-table { width: 100%; border-collapse: collapse; font-size: 16px; }
.ed-table th {
    font-family: var(--sans); text-transform: uppercase; letter-spacing: .15em;
    font-size: 10px; font-weight: 600; color: var(--ink-2);
    padding: 14px 0 10px; text-align: right;
}
.ed-table th:first-child { text-align: left; }
.ed-table td { padding: 11px 0; text-align: right; color: var(--ink-2); }
.ed-table td:first-child { text-align: left; color: var(--ink); }
.ed-table td:last-child { font-weight: 600; color: var(--ink); }
.ed-table tbody tr { border-top: 1px solid var(--rule-2); }
.ed-table tbody tr:last-child { border-bottom: 1px solid var(--rule-2); }
.ed-table__pos { font-family: var(--sans); font-weight: 600; display: inline-block; width: 22px; color: var(--ink-2); }
.ed-table tbody tr:nth-child(-n+2) .ed-table__pos { color: var(--red); }

/* ---------- haber gövdesi ---------- */

.ed-article { max-width: 720px; }

.ed-article__title {
    font-size: clamp(31px, 3.8vw, 54px);
    line-height: 1.05;
    letter-spacing: -.02em;
    margin: 0 0 22px;
}

.ed-article__deck {
    font-size: clamp(19px, 1.7vw, 23px);
    line-height: 1.5;
    font-weight: 300;
    font-style: italic;
    color: var(--ink-2);
    margin: 0 0 30px;
}

.ed-meta {
    display: flex; gap: 16px; align-items: center;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
    margin-bottom: 32px;
}

.ed-meta__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--tint); border: 1px solid var(--rule); flex-shrink: 0; object-fit: cover; }
.ed-meta__body { flex-grow: 1; min-width: 0; }
.ed-meta__sub { font-family: var(--sans); font-size: 12px; color: var(--ink-2); margin-top: 3px; }

.ed-iconbtn {
    width: 38px; height: 38px;
    border: 1px solid var(--rule);
    background: none; color: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.ed-iconbtn:hover { border-color: var(--red); color: var(--red); }

.ed-figcaption { font-family: var(--sans); font-size: 12px; color: var(--ink-2); padding: 11px 0 34px; border-bottom: 1px solid var(--rule-2); line-height: 1.5; }

/* Editörün girdiği HTML: sınıf eklenemediği için eleman seçicilerle biçimlenir. */
.ed-body { padding-top: 32px; font-size: 19px; line-height: 1.72; }
.ed-body p { margin: 0 0 24px; }
.ed-body h2 { font-size: 30px; line-height: 1.2; margin: 40px 0 16px; }
.ed-body h3 { font-size: 24px; line-height: 1.25; margin: 32px 0 14px; }
.ed-body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
/* Editör 1400px'lik görsel gömüyor, sütun 720px: max-width olmadan taşar. */
.ed-body img { display: block; max-width: 100%; height: auto; margin: 32px 0; }
.ed-body figure { margin: 32px 0; }
.ed-body figure img { margin: 0; }
.ed-body figcaption { font-family: var(--sans); font-size: 12px; color: var(--ink-2); line-height: 1.5; padding-top: 10px; }
.ed-body hr { border: 0; border-top: 1px solid var(--rule); margin: 40px 0; }
.ed-body table { display: block; overflow-x: auto; }
.ed-body ul, .ed-body ol { margin: 0 0 24px; padding-left: 24px; }
.ed-body li { margin-bottom: 10px; }
.ed-body blockquote {
    margin: 34px 0; padding: 0 0 0 26px;
    border-left: 3px solid var(--red);
    font-size: 25px; line-height: 1.4; font-style: italic; color: var(--ink);
}
.ed-body blockquote p { margin: 0; font-size: inherit; }
.ed-body iframe { max-width: 100%; aspect-ratio: 16 / 9; height: auto; display: block; margin: 32px 0; }
.ed-body table { width: 100%; border-collapse: collapse; margin: 0 0 24px; font-size: 16px; }
.ed-body td, .ed-body th { border: 1px solid var(--rule-2); padding: 8px 10px; }

.ed-tags { display: flex; gap: 9px; flex-wrap: wrap; padding: 12px 0 40px; }
.ed-tag {
    font-family: var(--sans); text-transform: uppercase; letter-spacing: .15em;
    font-weight: 600; font-size: 10px;
    border: 1px solid var(--rule); padding: 8px 13px; color: var(--ink-2);
    min-height: 30px; display: inline-flex; align-items: center;
}
.ed-tag:hover { border-color: var(--red); color: var(--red); }

/* ---------- sayfalama ---------- */

.ed-pagination { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; padding: 40px 0; }
.ed-pagination a, .ed-pagination span {
    font-family: var(--sans); font-size: 13px;
    min-width: 40px; min-height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--rule); padding: 0 10px;
}
.ed-pagination .ed-pagination__current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.ed-pagination .ed-pagination__disabled { color: var(--ink-2); opacity: .45; }

/* ---------- footer ---------- */

.ed-footer { border-top: 2px solid var(--ink); margin-top: 56px; padding: 34px 0 44px; }
.ed-footer__inner { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; }
.ed-footer__logo { height: 30px; width: auto; display: block; }
.ed-footer__about { font-family: var(--sans); font-size: 12px; color: var(--ink-2); margin: 16px 0 0; max-width: 36ch; line-height: 1.6; }
.ed-footer__cols { display: flex; gap: 56px; flex-wrap: wrap; }
.ed-footer__col { display: flex; flex-direction: column; gap: 9px; }
.ed-footer__col-head { font-family: var(--sans); text-transform: uppercase; letter-spacing: .15em; font-weight: 600; font-size: 10px; color: var(--ink-2); margin-bottom: 5px; }
.ed-footer__link { font-family: var(--sans); font-size: 13px; padding: 4px 0; }

.ed-socials { display: flex; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; }
.ed-socials__link {
    width: 36px; height: 36px;
    border: 1px solid var(--rule);
    display: inline-flex; align-items: center; justify-content: center;
}
.ed-socials__link:hover { border-color: var(--red); color: var(--red); }

/* ---------- mobil menü ---------- */

.ed-burger { display: none; }

.ed-drawer {
    position: fixed; inset: 0; z-index: 60;
    background: var(--paper);
    padding: 20px var(--gutter);
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform .22s ease;
}
.ed-drawer[data-open="true"] { transform: translateX(0); }
.ed-drawer__list { list-style: none; margin: 24px 0 0; padding: 0; }
.ed-drawer__list li { border-bottom: 1px solid var(--rule-2); }
.ed-drawer__list a { display: block; padding: 16px 0; font-family: var(--sans); text-transform: uppercase; letter-spacing: .15em; font-weight: 600; font-size: 13px; }

@media (prefers-reduced-motion: reduce) {
    .ed-drawer { transition: none; }
}

/* ---------- kırılımlar ---------- */

.ed-split { display: grid; gap: 44px; }
.ed-split--lead { grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr); }
.ed-split--half { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; }
.ed-split--article { grid-template-columns: minmax(0, 1fr) 316px; gap: 64px; }

@media (max-width: 1080px) {
    .ed-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    :root { --gutter: 20px; }

    .ed-split--lead,
    .ed-split--half,
    .ed-split--article { grid-template-columns: minmax(0, 1fr); gap: 36px; }

    .ed-aside { border-left: 0; padding-left: 0; border-top: 1px solid var(--rule); padding-top: 28px; }

    .ed-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }

    .ed-masthead { padding: 18px 0 14px; }
    .ed-masthead__logo { height: 38px; }
    .ed-masthead__tagline { font-size: 9px; letter-spacing: .3em; margin-top: 10px; }

    .ed-nav { display: none; }
    .ed-burger { display: inline-flex; }

    .ed-topbar { font-size: 11px; }
    .ed-topbar__hide-sm { display: none; }

    .ed-card__title { font-size: 21px; }
    .ed-list__title { font-size: 18px; }
    .ed-body { font-size: 18px; }
}

@media (max-width: 560px) {
    .ed-grid--3, .ed-grid--4 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
    .ed-footer__inner { flex-direction: column; gap: 28px; }
    .ed-footer__cols { gap: 36px; }
}

/* ---------- baskı ---------- */

@media print {
    .ed-topbar, .ed-nav, .ed-band, .ed-aside, .ed-footer, .ed-burger, .ed-tags { display: none; }
    body { background: #fff; color: #000; font-size: 12pt; }
    .ed-article { max-width: none; }
}

/* ---------- form ---------- */

.ed-field { margin-bottom: 18px; }
.ed-label { display: block; font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: .15em; font-weight: 600; color: var(--ink-2); margin-bottom: 8px; }
.ed-input {
    width: 100%;
    font-family: var(--sans); font-size: 15px;
    color: var(--ink); background: var(--sheet);
    border: 1px solid var(--rule);
    padding: 12px 14px;
    min-height: 46px;
}
.ed-input:focus { border-color: var(--red); outline: none; }
.ed-error { display: block; font-family: var(--sans); font-size: 12px; color: var(--red); margin-top: 6px; min-height: 1em; }

.ed-btn {
    font-family: var(--sans); text-transform: uppercase; letter-spacing: .12em;
    font-weight: 600; font-size: 12px;
    background: var(--ink); color: var(--paper);
    border: 1px solid var(--ink);
    padding: 13px 26px; cursor: pointer;
    min-height: 46px;
}
.ed-btn:hover { background: var(--red); border-color: var(--red); color: #fff; }
.ed-btn[disabled] { opacity: .55; cursor: default; }
.ed-btn[data-busy] { position: relative; color: transparent; }
.ed-btn[data-busy]::after {
    content: ""; position: absolute; inset: 0; margin: auto;
    width: 16px; height: 16px; border: 2px solid var(--paper);
    border-top-color: transparent; border-radius: 50%;
    animation: ed-spin .7s linear infinite;
}
@keyframes ed-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ed-btn[data-busy]::after { animation: none; } }

/* ---------- arama kutusu ---------- */

.ed-search { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.ed-search__form { display: flex; gap: 10px; }
.ed-search__form .ed-input { flex-grow: 1; }

/* ---------- bildirim ---------- */

.ed-toast {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
    z-index: 90; max-width: min(520px, calc(100vw - 32px));
    font-family: var(--sans); font-size: 14px; line-height: 1.45;
    background: var(--ink); color: var(--paper);
    padding: 14px 20px; box-shadow: 0 6px 24px rgba(0, 0, 0, .22);
    transition: opacity .3s ease, transform .3s ease;
}
.ed-toast--error { background: var(--red); color: #fff; }
.ed-toast[data-leaving] { opacity: 0; transform: translateX(-50%) translateY(8px); }
@media (prefers-reduced-motion: reduce) { .ed-toast { transition: none; } }

/* ---------- boş durum ---------- */

.ed-empty { padding: 80px 0; text-align: center; color: var(--ink-2); }
.ed-empty__title { font-size: 30px; margin: 0 0 12px; color: var(--ink); }