/* EnSevilenler — SEO sayfaları (kategori sıralaması, item, savaş, metodoloji). app.css'in üstüne biner. */
.page { max-width: 44rem; margin: 0 auto; padding: 1rem 1.15rem 3rem; }
.page__title { font-size: clamp(1.5rem, 6.5vw, 2.1rem); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; margin: .75rem 0 .5rem; }
.page__h2 { font-size: clamp(1.15rem, 4.6vw, 1.4rem); font-weight: 800; margin: 2rem 0 .75rem; }
.page__lead { color: var(--gri); margin: 0 0 1rem; }
.page__lead strong { color: var(--gece); }
.page__cta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 2rem 0 1rem; }
.crumbs { font-size: .85rem; color: var(--gri); margin-top: .75rem; }
.crumbs a { color: var(--gri); }
.notice { background: #FFF6DA; border-radius: 14px; padding: 1rem; }
.prose { margin: 0 0 1rem; padding-left: 1.2rem; }
.prose li { margin-bottom: .5rem; }

.tabs { display: flex; flex-wrap: wrap; gap: .4rem; margin: 1rem 0; }
.tabs a { padding: .4rem .9rem; border-radius: 999px; background: #fff; border: 2px solid var(--gece);
          text-decoration: none; color: var(--gece); font-weight: 700; font-size: .9rem; }
.tabs a[aria-current="page"] { background: var(--gece); color: #fff; }

.cat-grid { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: .75rem;
            grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); }
.cat-card a { display: grid; gap: .2rem; padding: 1rem; background: #fff; border: 2px solid var(--gece);
              border-radius: 18px; text-decoration: none; color: var(--gece); height: 100%; }
.cat-card__emoji { font-size: 2rem; line-height: 1; }
.cat-card__name { font-weight: 800; }
.cat-card__meta { font-size: .82rem; color: var(--gri); }

.rank { list-style: none; margin: 1rem 0; padding: 0; }
.rank__row { position: relative; display: grid; grid-template-columns: 2.4rem 3rem 1fr; align-items: center; gap: .6rem;
             padding: .7rem .8rem; background: #fff; border: 2px solid var(--gece); border-radius: 16px; margin-bottom: .55rem; overflow: hidden; }
.rank__pos { font-weight: 900; font-size: 1.1rem; text-align: center; }
.rank__media img { border-radius: 10px; object-fit: cover; display: block; }
.rank__emoji { font-size: 1.9rem; }
.rank__body { display: grid; gap: .1rem; min-width: 0; }
.rank__name { font-weight: 800; color: var(--gece); text-decoration: none; }
.rank__meta { font-size: .82rem; color: var(--gri); }
.rank__trend--up { color: var(--nane); font-weight: 900; }
.rank__trend--down { color: var(--nar); font-weight: 900; }
.rank__bar { position: absolute; inset: auto 0 0 0; height: 4px; background: #F0EAF8; }
.rank__fill { display: block; height: 100%; background: var(--nar); width: 0; }

.item-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.item-head__img { border-radius: 18px; border: 2px solid var(--gece); object-fit: cover; }
.item-head__emoji { font-size: 3.4rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .6rem; margin: 1rem 0; }
.fact { background: #fff; border: 2px solid var(--gece); border-radius: 14px; padding: .7rem .8rem; font-size: .85rem; color: var(--gri); }
.fact strong { display: block; font-size: 1.4rem; color: var(--gece); }

.rivals { list-style: none; margin: 0; padding: 0; }
.rival { padding: .7rem 0; border-top: 1px solid #EEE7F6; display: grid; gap: .3rem; }
.rival:first-child { border-top: 0; }
.rival__name { font-weight: 800; color: var(--gece); }
.rival__bar { display: block; height: 8px; border-radius: 999px; background: #F0EAF8; overflow: hidden; }
.rival__fill { display: block; height: 100%; background: var(--nar); width: 0; }
.rival__pct { font-size: .84rem; color: var(--gri); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { background: #fff; border: 1px solid var(--cizgi, #E2DAEC); border-radius: 999px; padding: .15rem .7rem; font-size: .82rem; color: var(--gri); }

.battle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.battle-card a { display: grid; gap: .45rem; padding: .9rem 1rem; background: #fff; border: 2px solid var(--gece);
                 border-radius: 16px; text-decoration: none; color: var(--gece); height: 100%; }
.battle-card__title { font-weight: 800; }
.battle-card__sides { display: grid; gap: .2rem; font-size: .9rem; }
.battle-card__side { display: flex; gap: .4rem; align-items: baseline; }
.battle-card__side b { margin-left: auto; }
.battle-card__meta { font-size: .8rem; color: var(--gri); }

.site-footer { margin-top: 3rem; padding-top: 1.25rem; border-top: 1px solid #E7DFF2; font-size: .85rem; color: var(--gri); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .9rem; margin-bottom: .5rem; }
.site-footer a { color: var(--gri); }

/* Sevgi Uyumu turu */
.match-bar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.match-bar__count { font-weight: 800; color: var(--gri); }