/* ===================================================================
   Anasayfa
   Her bölümün kendi görsel dili var (bkz. DESIGN_SYSTEM.md §6).
   =================================================================== */

/* ---------- Hero: tam genişlik, marka renkleriyle kurulu koyu zemin ----------
   Arka plan fotoğrafla değil, CSS katmanlarıyla kuruluyor: eski zirvelerin
   backdrop'undaki yıl yazıları ("2024 Ankara") %22 opaklıkta bile okunuyor ve
   2026 duyurusunun arkasında eskimiş duruyordu. Katmanlar yaşlanmaz.
   Yayıncı panelden 2026'ya ait bir görsel yüklerse .hero__bg bu katmanların
   üstünde görünür (z-index -1 > -2); kurgu ikisini de destekler. */
.hero {
    position: relative;
    isolation: isolate;
    background: var(--color-surface-dark);
    color: var(--color-text-invert);
    padding-block: clamp(56px, 8vw, 96px);
    overflow: hidden;
}

/* Fotoğraf en altta (-3), ışık ve doku katmanları üstünde (-2).
   Sıralama böyle: fotoğraf katmanların altında kalırsa mavi/altın huzmeler
   tamamen gizlenir ve zemin fotoğraf konduğu an düz bir örtüye döner. */
.hero__bg { position: absolute; inset: 0; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }

/* Zemin: köşegen koyulaşma + kurumsal mavi ve altın ışık huzmeleri.
   Yarı saydam: fotoğraf yokken altındaki --color-surface-dark ile tam koyu
   zemini kurar, fotoğraf varken de onun üzerinde metin kontrastını sağlar
   (beyaz metin için WCAG AA). Tek katman iki işi de görüyor. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        radial-gradient(58% 78% at 84% 6%, rgba(248,210,105,.13) 0%, transparent 60%),
        radial-gradient(68% 92% at 10% 0%, rgba(2,83,154,.52) 0%, transparent 66%),
        linear-gradient(165deg, rgba(23,43,77,.80) 0%, rgba(16,32,58,.88) 56%, rgba(10,22,38,.94) 100%);
}

/* İnce ızgara: yüzeye doku verir, aşağı doğru silinir */
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(0deg,  rgba(255,255,255,.05) 0 1px, transparent 1px 72px);
    -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, transparent 72%);
            mask-image: linear-gradient(180deg, rgba(0,0,0,.9) 0%, transparent 72%);
}

.hero__event {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .1em;
    color: var(--color-accent);
    margin-bottom: var(--space-4);
}

.hero__title {
    font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.25rem);
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--color-text-invert);
    margin-bottom: var(--space-7);
}

.hero__speakers {
    display: grid;
    /* Satır başına dört kart (yayıncı kararı, 17 Eylül): liste sekiz kişiye
       çıkınca tek sıra portreleri okunmayacak kadar daraltıyordu. Son satır
       eksik kalırsa kartlar soldan hizalı durur, genişlemez. */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-6) var(--space-4);
    list-style: none;
    margin: 0 0 var(--space-5);
    padding: 0;
}
.hero__speakers li { margin: 0; }

.speaker { text-align: center; }

.speaker__photo {
    aspect-ratio: 1 / 1;
    margin-bottom: var(--space-3);
    overflow: hidden;
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .06);
    border-bottom: 2px solid var(--color-accent);
}
.speaker__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }

.speaker__name {
    font-family: var(--font-heading);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 var(--space-1);
    color: var(--color-text-invert);
}
.speaker__mark { color: var(--color-accent); }

.speaker__title {
    font-size: var(--text-xs);
    line-height: 1.45;
    color: rgba(255, 255, 255, .72);
    margin: 0;
}

/* ---- Kaydırma noktaları: yalnızca mobil şeritte görünür ----
   Masaüstünde liste ızgara olduğu için kaydırılacak bir şey yok; noktalar
   orada yanıltıcı olur, o yüzden varsayılan gizli. */
.hero__dots { display: none; }

.hero__footnote {
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, .6);
    margin: 0;
}

@media (max-width: 767px) {
    /* Mobilde küçültülmüş ızgara değil: kaydırmalı şerit */
    .hero__speakers {
        display: flex;
        gap: var(--space-4);
        scroll-snap-type: x mandatory;
        padding-bottom: var(--space-2);
        margin-inline: calc(var(--gutter) * -1);
        padding-inline: var(--gutter);
        /* Kaydırma çubuğu kartların altında gri bir bant olarak duruyordu ve
           konum bilgisini zaten noktalar veriyor. Banner şeridindeki gibi iki
           motorda da kaldırılıyor; kaydırmanın kendisi çalışmaya devam eder. */
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .hero__speakers::-webkit-scrollbar { display: none; width: 0; height: 0; }
    /* Tek kart, tek ekran: 42vw'lik şeritte kartlar yarım kalıyor, yanındaki
       kırpık kart hangisinin okunacağını belirsizleştiriyordu. Kart genişliği
       şeridin görünen alanına eşit; kaydırma her seferinde bir profilde durur. */
    .hero__speakers li { flex: 0 0 100%; max-width: none; scroll-snap-align: center; }
    .speaker__photo { max-width: 260px; margin-inline: auto; }

    /* Nokta görsel olarak 9px, basılacak alan düğmenin tamamı: parmakla
       9px'lik bir hedefe isabet edilmiyor. */
    .hero__dots {
        display: flex;
        justify-content: center;
        margin: 0 0 var(--space-5);
    }
    .hero__dot {
        display: grid;
        place-items: center;
        height: 32px;
        padding: 0 7px;
        border: 0;
        background: none;
        cursor: pointer;
    }
    .hero__dot::before {
        content: "";
        display: block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background: rgba(255, 255, 255, .32);
        transition: background var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
    }
    .hero__dot[aria-current="true"]::before {
        background: var(--color-accent);
        transform: scale(1.25);
    }
    .hero__dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
}

/* ---------- Davetiye: split layout, sol altın şerit, köşe 0 ---------- */
.invitation__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: var(--space-8);
    align-items: start;
}

.invitation__body { border-left: 3px solid var(--color-accent); padding-left: var(--space-6); }

.invitation__sign {
    padding: var(--space-6);
    background: var(--color-surface);
    text-align: center;
}
/* Kaynak portrede baş, karenin üst kenarına dayanıyor; daire maskesi saç
   üstünü kırpıp "kafadan kesilmiş" görüntü veriyordu. Fotoğrafın kendi yuvarlak
   köşeleriyle uyumlu kare çerçeve kullanılıyor, kırpma yok. */
.invitation__sign img {
    width: 120px; height: 120px;
    object-fit: cover;
    object-position: center top;
    border-radius: var(--radius-lg);
    margin: 0 auto var(--space-4);
}
.invitation__sign-text { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.7; margin: 0; }
.invitation__sign-name { font-weight: 600; color: var(--color-text); }

@media (max-width: 899px) {
    .invitation__grid { grid-template-columns: 1fr; gap: var(--space-6); }
    .invitation__body { padding-left: var(--space-4); }
}

/* ---------- Kurumlar: ince şerit, üst/alt kenarlık ---------- */
.institutions { border-block: 1px solid var(--color-border); background: #fff; }

.institutions__statement {
    max-width: 78ch;
    margin: 0 auto var(--space-7);
    text-align: center;
    font-family: var(--font-heading);
    font-size: var(--text-h4);
    font-weight: 600;
    line-height: 1.4;
    color: var(--color-primary-900);
}

.institutions__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-7);
    list-style: none;
    margin: 0;
    padding: 0;
}
.institutions__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    max-width: 170px;
    text-align: center;
}
.institutions__item img { width: auto; height: 64px; object-fit: contain; }

.institutions__abbr {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border: 2px solid var(--color-primary);
    border-radius: 50%;
    font-family: var(--font-heading);
    font-weight: 700;
    color: var(--color-primary);
}
.institutions__name { font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.4; }

/* ---------- Program: zaman çizelgesi, köşe 0, kart yok ---------- */

.program__days { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-8); }

.program__day-head { padding-bottom: var(--space-4); border-bottom: 2px solid var(--color-primary); margin-bottom: var(--space-5); }
.program__day-head h3 { margin: 0 0 var(--space-1); color: var(--color-primary); }
.program__day-head p { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

.timeline { list-style: none; margin: 0; padding: 0; }
.timeline__row {
    display: grid;
    grid-template-columns: 92px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-4) 0 var(--space-4) var(--space-5);
    margin: 0;
    position: relative;
    border-bottom: 1px solid var(--color-border);
}
.timeline__row::before {
    content: "";
    position: absolute;
    left: 0; top: calc(var(--space-4) + 8px);
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}
.timeline__row:last-child { border-bottom: 0; }

.timeline__time { font-variant-numeric: tabular-nums; font-weight: 600; font-size: var(--text-sm); color: var(--color-primary); }
.timeline__title { margin: 0; font-size: var(--text-sm); }

@media (max-width: 899px) {
    .program__days { grid-template-columns: 1fr; gap: var(--space-7); }
}
@media (max-width: 479px) {
    .timeline__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ---------- Çalıştaylar: 3 sütun, yalnızca üst vurgu çizgisi ---------- */
.workshops__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }

.workshop {
    display: flex;
    flex-direction: column;
    padding: var(--space-6) 0 0;
    border-top: 3px solid var(--color-primary);
    background: var(--color-background);
}

.workshop__badge {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin: 0 0 var(--space-3);
}
.workshop__title { font-size: var(--text-h4); margin-bottom: var(--space-3); }
.workshop__quote {
    font-style: italic;
    color: var(--color-primary-700);
    padding-left: var(--space-4);
    border-left: 2px solid var(--color-accent);
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.workshop__body { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-5); }

.workshop__block { margin-bottom: var(--space-4); }
.workshop__block:last-child { margin-bottom: 0; margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.workshop__block h4 {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.workshop__block p { font-size: var(--text-sm); margin: 0; }

@media (max-width: 991px) { .workshops__grid { grid-template-columns: 1fr; } }

/* ---------- Kapalı oturum: tek koyu blok ---------- */
/* Çalıştaylar bölümünün devamı: iki bölümün dikey boşluğu üst üste binince
   arada boş bir ekran oluşuyordu. Üst boşluk kaldırılır, kart bir önceki
   bölümün kapanış notuna yaslanır. */
.closed-session { padding-top: 0; }

.closed-session__card {
    /* Tek sütun: kartta buton yok (oturum davetlilere özel). */
    padding: var(--space-6) var(--space-7);
    background: var(--color-primary-900);
    color: var(--color-text-invert);
    border-radius: var(--radius-md);
}
/* Başlık ve tarih aynı satırda; dar ekranda tarih alta iner. */
.closed-session__head {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
}
.closed-session__meta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-accent);
    margin: 0;
}
.closed-session__title { color: var(--color-text-invert); font-size: var(--text-h3); margin: 0; }

.closed-session__body { color: rgba(255, 255, 255, .8); max-width: none; margin: 0; }

/* ---------- Paneller: yatay liste, yalnızca ayraç çizgisi, köşe 0 ---------- */
.panels__list { list-style: none; margin: 0; padding: 0; }

.panel {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--space-6);
    padding: var(--space-6) 0;
    margin: 0;
    border-top: 1px solid var(--color-border-strong);
}
.panel:last-child { border-bottom: 1px solid var(--color-border-strong); }

/* Liste zaten alt çizgisiyle kapanıyor; kapanış notunun kendi üst çizgisi
   ikinci bir ayraç oluşturuyordu. */
.panels .section-note--full { border-top: 0; }

.panel__badge {
    display: block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--color-primary);
    margin-bottom: var(--space-1);
}
.panel__time time { font-family: var(--font-heading); font-size: var(--text-h4); font-weight: 600; color: var(--color-text); }
.panel__content h3 { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.panel__content p { color: var(--color-text-muted); margin: 0; }

@media (max-width: 767px) { .panel { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ---------- Neden katılmalısınız: büyük numara, kart yok ---------- */
.why__list { list-style: none; margin: 0; padding: 0; counter-reset: why; }

.why__item {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: var(--space-5);
    padding: var(--space-6) 0;
    margin: 0;
    border-bottom: 1px solid var(--color-border);
}
.why__item:last-child { border-bottom: 0; }

.why__number {
    font-family: var(--font-heading);
    font-size: 3.75rem;
    font-weight: 700;
    line-height: .9;
    color: var(--color-primary-100);
}
.why__title { font-size: var(--text-h4); margin-bottom: var(--space-2); }
.why__body { color: var(--color-text-muted); max-width: var(--measure); margin: 0; }

@media (max-width: 599px) {
    .why__item { grid-template-columns: 1fr; gap: var(--space-2); }
    .why__number { font-size: 2.75rem; }
}

/* ---------- Rakamlarla: tam genişlik koyu bant ---------- */
.stats__grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-6);
    margin: 0;
}
.stat { text-align: center; }
.stat__value {
    font-family: var(--font-heading);
    font-size: clamp(2.125rem, 1.5rem + 2.1vw, 3.25rem);
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    margin: 0 0 var(--space-2);
    font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--text-xs); line-height: 1.45; color: rgba(255, 255, 255, .75); margin: 0; }

@media (max-width: 991px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 599px) { .stats__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-5); } }

/* ---------- Sponsorluk ---------- */
.sponsorship__intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
}
.sponsorship__intro .section-head { margin-bottom: 0; }
.sponsorship__intro .section-head::after { display: none; }

/* Son zirvenin sponsor duvarı.

   Önceki hâl iki dar kutuya sığdırılmış EKRAN GÖRÜNTÜSÜYDÜ: bölümün
   genişliğinin yarısını kaplıyor, logolar da o kutunun içinde küçücük
   kalıyordu. Şimdi logolar tek tek basılıyor ve ızgara bölümün TAM
   genişliğini kullanıyor — altı sütun, her hücrede kademe üstte, logo
   altta.

   Kademeye göre kümelenmiş: her kademe bir kez başlık olarak yazılıyor,
   logoları altında dört sütunlu bir satırda diziliyor. Önce kademe her
   hücrenin üstünde tekrarlanıyordu ve dört stant sponsoru aynı adı dört
   kez yazıyordu.

   Dört sütun ve 1200 px kap: hücre başına ~272 px düşüyor, logo kutusu bu
   genişliğin tamamını alıyor. Bir süre altı sütundu; yayıncının kararıyla
   dörde indi ve logolar ~%53 genişledi. Kutu SABİT yükseklikte çünkü
   logoların oranı 0,9 ile 8,9 arasında değişiyor; yükseklik serbest
   bırakılınca satırlar birbirinden farklı yükseklikte oluyor ve ızgara
   kırılıyordu. object-fit: contain her logoyu kutuya sığdırır, kırpmaz. */
/* Dış ızgara kademeleri yan yana dizer: her kademe kendi logo sayısı
   kadar sütun kaplar (--span, en çok 4). Tek logolu dört kademe böylece
   tek satıra sığar. Her kademe tam satır alsaydı bölüm 963 px'e çıkıyor
   ve sağda koca boşluk kalıyordu. */
.sponsor-wall {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-7) var(--space-4);
    margin: var(--space-7) 0 0;
}

.sponsor-wall__group {
    grid-column: span var(--span, 1);
    min-width: 0;
}

/* İç ızgara da aynı sayıda sütun: grup dışarıda kaç sütun kapladıysa
   logoları da o kadar kolona bölünür, yani bütün logolar sayfa boyunca
   aynı genişlikte hizalanır. */
.sponsor-wall__row {
    display: grid;
    grid-template-columns: repeat(var(--span, 1), 1fr);
    gap: var(--space-6) var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.sponsor-wall__item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    min-width: 0;
}

/* Kademe başlığı: küçük, sakin ve sola dayalı; yanında sayfanın sonuna
   kadar uzanan ince bir çizgi. Çizgi başlığın hangi logo kümesini
   kapsadığını gösteriyor — /sponsorluk/ sayfasındaki kademe başlıklarıyla
   aynı dil. Ortalanmış bir başlık tek logolu kademelerde logodan kopuk
   duruyordu. */
.sponsor-wall__tier {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: 0 0 var(--space-4);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    line-height: 1.3;
}
.sponsor-wall__tier::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border);
}

.sponsor-wall__logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    /* Logo olabildiğince büyük: kutu hücrenin tam genişliği, yükseklik de
       en geniş logonun okunur kaldığı ölçü. Sütun altıdan dörde inince
       hücre genişlediği için yükseklik de bir kademe arttı — yoksa geniş
       logolar büyür, kare olanlar eski boyunda kalırdı. */
    block-size: 120px;
}
.sponsor-wall__logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
a.sponsor-wall__logo { transition: transform .18s ease; }
a.sponsor-wall__logo:hover,
a.sponsor-wall__logo:focus-visible { transform: scale(1.06); }

/* Sütun sayısı daraldıkça azalır; hücre 150 px'in altına inince logolar
   okunmaz oluyordu (ölçüldü), o yüzden sütun bırakmak yerine sayı
   düşüyor ve logo kutusu büyüyor. */
/* Dar ekranda kademeler yan yana sığmıyor: her biri tam satıra geçer ve
   logoları sabit sütun sayısına döner. --span burada geçersiz kılınıyor,
   yoksa tek logolu bir kademe dar ekranda da tek kolona sıkışırdı. */
@media (max-width: 991px) {
    .sponsor-wall { grid-template-columns: 1fr; gap: var(--space-6); }
    .sponsor-wall__group { grid-column: 1 / -1; }
    .sponsor-wall__row { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 599px) {
    .sponsor-wall__row { grid-template-columns: repeat(2, 1fr); }
    .sponsor-wall__logo { block-size: 68px; }
}

.sponsorship__profiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-7);
    margin-top: var(--space-8);
}
.profile__title {
    font-size: var(--text-h4);
    padding-bottom: var(--space-3);
    border-bottom: 2px solid var(--color-accent);
    margin-bottom: var(--space-4);
}
.profile__list { list-style: none; margin: 0; padding: 0; }
.profile__list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    margin: 0;
    font-size: var(--text-sm);
}
.profile__check { color: var(--color-primary); margin-top: 3px; }

@media (max-width: 767px) { .sponsorship__profiles { grid-template-columns: 1fr; gap: var(--space-6); } }

/* ---------- Medya kütüphanesi ----------
   Koyu bant + sayı kartları: arşivin büyüklüğü ölçülebilir bir bilgi olarak
   gösterilir, böylece bölüm hem dikkat çeker hem de bir şey söyler. */
.media-library__head { margin-bottom: var(--space-7); }
.media-library__head h2 { margin: 0; }

.media-library__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
    list-style: none;
    margin: 0;
    padding: 0;
}
.media-card { margin: 0; }

.media-card a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-4);
    align-items: center;
    padding: var(--space-6);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: var(--color-text-invert);
    background: rgba(255, 255, 255, .03);
    transition: background-color var(--dur-base) var(--ease),
                border-color var(--dur-base) var(--ease),
                transform var(--dur-base) var(--ease);
}
.media-card a:hover {
    background: rgba(255, 255, 255, .08);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    color: var(--color-text-invert);
}

.media-card__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: var(--radius-md);
    background: rgba(248, 210, 105, .14);
    color: var(--color-accent);
}

.media-card__count {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}
.media-card__unit {
    align-self: start;
    font-size: var(--text-xs);
    color: rgba(255, 255, 255, .6);
}

.media-card__label {
    grid-column: 2;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
}
.media-card__label .icon { transition: transform var(--dur-fast) var(--ease); }
.media-card a:hover .media-card__label .icon { transform: translateX(3px); }

@media (max-width: 899px) { .media-library__grid { grid-template-columns: 1fr; } }

/* ---------- Haberler ----------
   Kart bileşeni (.news-card, .news__grid) base.css'e taşındı: haber
   yazısının "Diğer haberler" bölümü de aynı kartı kullanıyor ve bu
   dosyayı yüklemiyordu. Burada yalnız ana sayfaya özel kısım kalır. */
.news__all { margin: var(--space-7) 0 0; text-align: center; }