/* Ana sayfa: haber, analiz ve blog vitrini */
.ana { background: #fff; }
.an-kap { max-width: 1160px; margin: 0 auto; padding-left: 20px; padding-right: 20px; }
.an-ust { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.an-ust i { width: 3px; height: 3px; border-radius: 50%; background: var(--text-3); }
.an-ust.acik { color: #b9f2d3; }
.an-not { font-size: 12.5px; color: var(--text-3); margin-top: 16px; }

.an-manset { display: grid; grid-template-columns: 232px minmax(0, 1fr) 318px; gap: 32px; padding-top: 26px; padding-bottom: 40px; align-items: start; }
.an-bas { display: block; color: var(--text); }
.an-bas-gorsel { aspect-ratio: 16 / 9; max-height: 330px; width: 100%; border-radius: var(--r); background: var(--bg-2) center / cover no-repeat; margin-bottom: 16px; }
.an-bas h1, .an-bas h2.an-bas-baslik { font: 800 clamp(26px, 3vw, 34px)/1.12 var(--display); letter-spacing: -.02em; margin: 10px 0 10px; }
.an-bas:hover h1, .an-bas:hover h2.an-bas-baslik { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.an-bas p { font-size: 16.5px; line-height: 1.55; color: var(--text-2); max-width: 62ch; }
.an-kaynak { display: block; margin-top: 14px; font-size: 13px; color: var(--text-3); }
.an-bos { align-self: center; }
.an-blok-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--text); }
.an-blok-ust h2 { font: 800 20px var(--display); letter-spacing: -.01em; }
.an-blok-ust a:not(.btn) { font-size: 13.5px; font-weight: 600; color: var(--accent); }
.an-blok-ust.buyuk { align-items: flex-end; border-bottom: 0; padding-bottom: 0; margin-bottom: 24px; }
.an-blok-ust.buyuk h2 { font-size: clamp(24px, 3vw, 32px); letter-spacing: -.02em; }
.an-blok-ust.buyuk p { color: var(--text-2); margin-top: 6px; max-width: 60ch; }
.an-son-oge { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.an-son-oge:last-of-type { border-bottom: 0; }
.an-son-oge img { flex: none; width: 96px; height: 66px; border-radius: 8px; object-fit: cover; background: var(--bg-2); }
.an-son-oge h3 { font: 700 16.5px/1.32 var(--display); letter-spacing: -.01em; margin-top: 5px; }
.an-son-oge:hover h3 { color: var(--accent); }
.an-son-oge .an-ust { font-size: 11px; }

.an-serit { background: var(--bg-2); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 52px 0; }
.an-bolum { padding-top: 56px; padding-bottom: 60px; }
.an-maclar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.an-mac { display: grid; gap: 10px; padding: 18px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); color: var(--text); transition: border-color .15s, box-shadow .15s; }
.an-mac:hover { border-color: var(--accent); box-shadow: var(--shadow); }
.an-takim { display: flex; align-items: center; gap: 10px; font-size: 16px; }
.an-takim b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-secim { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--border); }
.an-secim > span { font-size: 11.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); }
.an-secim > div:first-of-type { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 4px 0 8px; }
.an-secim b { font: 700 16px var(--display); }
.an-secim em { font: 800 20px var(--display); font-style: normal; color: var(--accent); }
.an-cubuk { height: 6px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.an-cubuk i { display: block; height: 100%; border-radius: 6px; background: var(--accent); }

.an-isabet { background: #0a5c36; color: #fff; padding: 60px 0; }
.an-isabet-ic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.an-isabet h2 { font: 800 clamp(26px, 3.4vw, 36px)/1.14 var(--display); letter-spacing: -.02em; margin: 12px 0 14px; }
.an-isabet p { color: #d3ecdf; font-size: 16.5px; line-height: 1.65; max-width: 52ch; }
.btn.an-beyaz { margin-top: 22px; background: #fff; color: #0a5c36; }
.btn.an-beyaz:hover { background: #eaf6ef; }
.an-sayilar { display: grid; gap: 18px; }
.an-sayilar > div { padding: 22px 24px; border: 1px solid rgba(255, 255, 255, .22); border-radius: var(--r); background: rgba(255, 255, 255, .06); }
.an-sayilar b { display: block; font: 800 clamp(40px, 5vw, 56px)/1 var(--display); letter-spacing: -.03em; }
.an-sayilar span { display: block; margin-top: 8px; font-size: 15px; color: #e6f5ec; }
.an-sayilar small { display: block; margin-top: 2px; font-size: 13px; color: #a9d8c0; }

.an-blog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.an-yazi { display: block; color: var(--text); }
.an-yazi-gorsel { aspect-ratio: 16 / 10; border-radius: var(--r); background: var(--bg-2) center / cover no-repeat; margin-bottom: 14px; border: 1px solid var(--border); }
.an-yazi-gorsel.bos { background: repeating-linear-gradient(135deg, #f0f5f2 0 14px, #e8efeb 14px 28px); }
.an-yazi h3 { font: 700 20px/1.28 var(--display); letter-spacing: -.015em; margin: 8px 0 8px; }
.an-yazi:hover h3 { color: var(--accent); }
.an-yazi p { color: var(--text-2); font-size: 15px; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.an-ozellik { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.an-ozellik > div { padding: 22px; background: #fff; border: 1px solid var(--border); border-radius: var(--r); }
.an-ozellik svg { width: 28px; height: 28px; color: var(--accent); }
.an-ozellik h3 { font: 700 17px var(--display); margin: 14px 0 6px; }
.an-ozellik p { font-size: 14.5px; color: var(--text-2); line-height: 1.6; }
.an-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: 20px; padding: 24px 26px; background: #fff; border: 1px solid var(--border); border-left: 4px solid var(--accent); border-radius: var(--r); }
.an-cta h3 { font: 800 21px var(--display); }
.an-cta p { color: var(--text-2); margin-top: 4px; }

@media (max-width: 960px) {
    .an-maclar, .an-blog { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .an-ozellik { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .an-isabet-ic { grid-template-columns: 1fr; gap: 30px; }
}
@media (max-width: 600px) {
    .an-kap { padding-left: 16px; padding-right: 16px; }
    .an-maclar, .an-blog, .an-ozellik { grid-template-columns: 1fr; }
    .an-bas p { font-size: 16.5px; }
    .an-serit { padding: 40px 0; } .an-isabet { padding: 44px 0; } .an-bolum { padding-top: 42px; padding-bottom: 46px; }
    .an-blok-ust.buyuk { flex-direction: column; align-items: flex-start; }
}

/* İlk ekran: solda küçük son haberler, ortada manşet, sağda maç analizleri */
.an-son .an-blok-ust h2, .an-yan-mac .an-blok-ust h2 { font-size: 16px; }
.an-son .an-son-oge { padding: 11px 0; }
.an-son .an-son-oge h3 { font: 600 14px/1.38 var(--font); letter-spacing: 0; margin-top: 3px; }
.an-son .an-ust { font-size: 10.5px; }
.an-ymac { display: grid; gap: 6px; padding: 11px 0; border-bottom: 1px solid var(--border); color: var(--text); }
.an-ymac:last-of-type { border-bottom: 0; }
.an-ymac .an-ust { font-size: 10.5px; }
.an-ytakim { display: flex; align-items: center; gap: 6px; font-size: 13.5px; min-width: 0; }
.an-ytakim b { font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-ytakim .badge-team { flex: none; }
.an-yvs { color: var(--text-3); }
.an-ysecim { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; }
.an-ysecim span { font-size: 12.5px; color: var(--text-2); }
.an-ysecim em { font: 800 14px var(--display); font-style: normal; color: var(--accent); }
.an-ysecim .an-cubuk { grid-column: 1 / -1; height: 4px; }
.an-ymac:hover .an-ytakim b { color: var(--accent); }
@media (max-width: 1100px) {
    .an-manset { grid-template-columns: minmax(0, 1fr) 300px; }
    .an-son { grid-column: 1 / -1; order: 3; }
    .an-son .an-son-oge h3 { font-size: 15px; }
}
@media (max-width: 760px) {
    .an-manset { grid-template-columns: 1fr; gap: 26px; }
    .an-bas { order: 1; } .an-yan-mac { order: 2; } .an-son { order: 3; }
}

/* Manşet kaydırma */
.an-kaydir { position: relative; min-width: 0; }
.an-kaydir .an-slayt { display: none; }
.an-kaydir .an-slayt.on { display: block; animation: anGel .45s var(--ease); }
@keyframes anGel { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .an-kaydir .an-slayt.on { animation: none; } }
.an-bas-gorsel.bos { display: grid; place-items: center; background: #0a5c36; }
.an-bas-gorsel.bos span { color: #fff; font: 800 22px var(--display); letter-spacing: .04em; text-transform: uppercase; opacity: .9; }
.an-kaydir-alt { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.an-ok { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border-2); background: #fff; color: var(--text); font: 600 20px/1 var(--font); cursor: pointer; }
.an-ok:hover { border-color: var(--accent); color: var(--accent); }
.an-noktalar { display: flex; gap: 6px; flex: 1; }
.an-noktalar button { flex: 1; max-width: 46px; height: 4px; padding: 0; border: 0; border-radius: 4px; background: var(--border-2); cursor: pointer; position: relative; }
.an-noktalar button::after { content: ''; position: absolute; inset: -10px 0; }
.an-noktalar button.on { background: var(--accent); }

.an-devam { margin-top: 14px; }
.an-bas:hover .an-devam { background: var(--accent-2); }