/* ==========================================================================
   VIKI ARSIVI - alt kategori filtreleri + yazi izgarasi
   Elder Scrolls Turk
   ========================================================================== */

.est-wiki {
	padding-block: var(--est-space-6) var(--est-space-7);
}

/* --------------------------------------------------------------------------
   1. Baslik + alt kategori kutulari
   -------------------------------------------------------------------------- */
.est-wtop__title {
	margin: 0 0 0.35em;
	font-size: clamp(1.9rem, 3vw, 2.75rem);
	font-weight: 600;
	line-height: 1.15;
}

.est-wtop__sub {
	margin: 0 0 var(--est-space-5);
	font-size: var(--est-text-lg);
	color: var(--est-ink-muted);
}

.est-wfilters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--est-space-3);
}

.est-wfilter {
	display: flex;
	align-items: center;
	gap: 1em;
	width: 100%;
	padding: 1.15em 1.35em;
	background: var(--est-bg-raised);
	border: 1px solid var(--est-line-soft);
	color: var(--est-ink);
	font-family: var(--est-font-heading);
	font-size: 1.0625rem;
	font-weight: 500;
	letter-spacing: 0.01em;
	text-align: left;
	cursor: pointer;
	transition: background var(--est-fade), border-color var(--est-fade), color var(--est-fade), box-shadow var(--est-fade);
}

.est-wfilter__num {
	flex: 0 0 auto;
	font-family: var(--est-font-mono);
	font-size: 0.8125rem;
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--est-gold-soft);
	transition: color var(--est-fade);
}

.est-wfilter:hover,
.est-wfilter:focus-visible {
	border-color: var(--est-line);
	box-shadow: var(--est-shadow);
	color: var(--est-accent);
}

.est-wfilter.is-active {
	background: var(--est-accent);
	border-color: var(--est-accent);
	color: #F5EFE6;
}

.est-wfilter.is-active .est-wfilter__num { color: rgba(245, 239, 230, 0.72); }

/* --- Ayirici cizgi --- */
.est-wiki__rule {
	margin: var(--est-space-6) 0 var(--est-space-6);
	border-top: 1px solid var(--est-line);
}

/* --------------------------------------------------------------------------
   2. Liste basligi + sag taraftaki sekmeler
   -------------------------------------------------------------------------- */
.est-wlist__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--est-space-3);
	margin-bottom: var(--est-space-5);
}

.est-wlist__title {
	margin: 0;
	font-size: clamp(1.5rem, 2.2vw, 2rem);
	font-weight: 600;
}

.est-wlist__tools {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 0.5em;
}

.est-wtabs {
	display: flex;
	flex-wrap: wrap;
	border: 1px solid var(--est-line-soft);
	background: var(--est-bg-raised);
}

.est-wtab {
	padding: 0.7em 1.15em;
	background: transparent;
	border: 0;
	border-left: 1px solid var(--est-line-soft);
	color: var(--est-ink-muted);
	font-family: var(--est-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: color var(--est-fade), background var(--est-fade);
}

.est-wtab:first-child { border-left: 0; }

.est-wtab:hover,
.est-wtab:focus-visible { color: var(--est-accent); }

.est-wtab.is-active {
	color: var(--est-accent);
	background: rgba(123, 34, 51, 0.08);
	box-shadow: inset 0 -2px 0 var(--est-accent);
}

/* --- Arama formu (sekmelerin yaninda) --- */
.est-wsearch {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0 1.15em;
	background: var(--est-bg-raised);
	border: 1px solid var(--est-line-soft);
	transition: border-color var(--est-fade), box-shadow var(--est-fade);
}

.est-wsearch:hover { border-color: var(--est-line); }

.est-wsearch.is-focused {
	border-color: var(--est-accent);
	box-shadow: var(--est-shadow);
}

.est-wsearch__icon {
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
	color: var(--est-ink-faint);
	transition: color var(--est-fade);
}

.est-wsearch.is-focused .est-wsearch__icon { color: var(--est-accent); }

.est-wsearch input.est-wsearch__field {
	flex: 0 1 auto;
	width: 8.5em;
	margin: 0;
	padding: 0.7em 0;
	background: transparent;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
	color: var(--est-ink);
	font-family: var(--est-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.est-wsearch__field::placeholder {
	color: var(--est-ink-muted);
	opacity: 1;
	transition: color var(--est-fade);
}

/* Tiklayinca yer tutucu metin kaybolur */
.est-wsearch__field:focus::placeholder { color: transparent; }

.est-wsearch__field:focus { outline: none; }

.est-wsearch__field::-webkit-search-cancel-button { cursor: pointer; }

/* --------------------------------------------------------------------------
   3. Izgara + kart
   -------------------------------------------------------------------------- */
.est-wgrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--est-space-4);
	transition: opacity var(--est-fade);
}

.est-wgrid.is-swapping { opacity: 0; }

.est-wcard {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 1.35em 1.4em 1.15em;
	background: var(--est-bg-raised);
	border: 1px solid var(--est-line-soft);
	transition: border-color var(--est-fade), box-shadow var(--est-fade);
}

.est-wcard:hover {
	border-color: var(--est-line);
	box-shadow: var(--est-shadow);
}

.est-wcard__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1em;
	margin-bottom: 0.9em;
}

.est-wcard__cats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}

.est-wcard__cat {
	display: inline-block;
	padding: 0.32em 0.7em;
	border: 1px solid var(--est-line);
	font-family: var(--est-font-mono);
	font-size: 0.625rem;
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--est-accent);
}

.est-wcard__date {
	flex: 0 0 auto;
	padding-top: 0.35em;
	font-family: var(--est-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.1em;
	color: var(--est-ink-faint);
	white-space: nowrap;
}

.est-wcard__title {
	margin: 0 0 0.55em;
	font-size: 1.1875rem;
	font-weight: 600;
	line-height: 1.28;
}

.est-wcard__title a { color: var(--est-ink); }

.est-wcard__title a:hover,
.est-wcard__title a:focus-visible,
.est-wcard:hover .est-wcard__title a {
	color: var(--est-accent);
	text-decoration: none;
}

/* Tum kart tiklanabilir */
.est-wcard__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.est-wcard__excerpt {
	margin: 0 0 1.15em;
	font-size: 0.9375rem;
	line-height: 1.62;
	color: var(--est-ink-muted);
}

/* .est-wcard__foot kaldirildi (yazar satiri yok) */

/* --------------------------------------------------------------------------
   4. Yukleniyor + bos sonuc
   -------------------------------------------------------------------------- */
.est-wmore {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.7em;
	min-height: 4.5em;
	margin-top: var(--est-space-5);
	font-family: var(--est-font-mono);
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--est-ink-faint);
	opacity: 0;
}

.est-wmore.is-busy { opacity: 1; }
.est-wmore.is-done { display: none; }

.est-wmore__spin {
	width: 14px;
	height: 14px;
	border: 2px solid var(--est-line);
	border-top-color: var(--est-accent);
	border-radius: 50%;
	animation: est-spin 700ms linear infinite;
}

.est-wempty {
	padding: var(--est-space-5) 0;
	font-size: var(--est-text-lg);
	color: var(--est-ink-muted);
}

/* Yeni gelen kartlar */
.est-wcard--new {
	opacity: 0;
	transform: translateY(10px);
	animation: est-wcard-in 420ms ease-out forwards;
}

@keyframes est-wcard-in {
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.est-wcard--new { animation: none; opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   5. Duyarli davranis
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.est-wgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
	.est-wfilters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 620px) {
	.est-wgrid { grid-template-columns: minmax(0, 1fr); }
	.est-wfilters { grid-template-columns: minmax(0, 1fr); }
	.est-wlist__tools { width: 100%; }
	.est-wtabs { width: 100%; }
	.est-wtab { flex: 1 1 auto; text-align: center; }
	.est-wsearch { width: 100%; min-width: 0; }
}

/* --------------------------------------------------------------------------
   6. Viki alt kategori arsivi
   (Cografya, Irk, Karakter, Orgut, Tanri, Tarih)
   -------------------------------------------------------------------------- */
.est-wcrumb {
	margin: 0 0 0.75em;
	font-family: var(--est-font-mono);
	font-size: 0.6875rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--est-ink-faint);
}

.est-wcrumb a { color: var(--est-ink-muted); }

.est-wcrumb a:hover,
.est-wcrumb a:focus-visible {
	color: var(--est-accent);
	text-decoration: none;
}

.est-wcrumb__sep {
	margin: 0 0.5em;
	color: var(--est-line);
}

.est-wcrumb__current { color: var(--est-accent); }

/* Alt kategoride filtre kutulari yok; baslik blogu alttaki cizgiye yaslanir. */
.est-wtop--child .est-wtop__sub { margin-bottom: 0; }
.est-wtop--child .est-wtop__sub > :first-child { margin-top: 0; }
.est-wtop--child .est-wtop__sub > :last-child { margin-bottom: 0; }