/* ==========================================================================
   BASE — Değişkenler, reset, tipografi
   Elder Scrolls Türk
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tasarım Değişkenleri (Design Tokens)
   -------------------------------------------------------------------------- */
:root {

	/* --- Renkler: 60 / 30 / 10 sistemi --- */
	--est-color-60: #ECE7E1; /* Ana zemin — parşömen */
	--est-color-30: #3E352C; /* İkincil — koyu kahve, metin ve koyu bloklar */
	--est-color-10: #7b2233; /* Vurgu — bordo */

	/* --- Türetilmiş tonlar --- */
	--est-bg:            var(--est-color-60);
	--est-bg-raised:     #F5EDE0;
	--est-bg-sunken:     #E3D5C1;
	--est-bg-dark:       var(--est-color-30);
	--est-bg-dark-deep:  #24201D; /* Kart ve koyu şerit zemini */
	--est-bg-black:      #1C1815; /* Header, footer, en koyu alan */
	--est-slate:         #1F303A; /* Discord şeridi */

	--est-ink:           var(--est-color-30);
	--est-ink-muted:     #6B5F52;
	--est-ink-faint:     #8C8073;
	--est-ink-inverse:   #ECE7E1;
	--est-ink-inverse-muted: #B3A794;

	--est-accent:        var(--est-color-10);
	--est-accent-dark:   #5E1A27;
	--est-accent-light:  #9A3446;

	/* --- Altın vurgu (etiket ve numaralar) --- */
	--est-gold:          #C8A45C;
	--est-gold-soft:     #A08A63;

	--est-line:          #CBBBA4;
	--est-line-soft:     #DCCFBB;
	--est-line-dark:     #4E443A;

	/* --- Tipografi --- */
	--est-font-body:    "Spectral", Georgia, "Times New Roman", serif;
	--est-font-heading: "Cinzel", Georgia, "Times New Roman", serif;
	--est-font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--est-text-xs:   0.75rem;
	--est-text-sm:   0.875rem;
	--est-text-base: 1rem;
	--est-text-lg:   1.125rem;

	--est-h1: 2.5rem;
	--est-h2: 2rem;
	--est-h3: 1.5rem;
	--est-h4: 1.125rem;
	--est-h5: 1.125rem;
	--est-h6: 1rem;

	--est-leading-tight: 1.2;
	--est-leading-snug:  1.4;
	--est-leading-body:  1.75;

	--est-tracking-heading: 0.02em;
	--est-tracking-wide:    0.12em;

	/* --- Ölçü ve boşluk (konteyner: em) --- */
	--est-container:      75em;
	--est-container-wide: 87.5em;
	--est-container-text: 46em;
	--est-gutter:         1.5em;

	--est-space-1: 0.25em;
	--est-space-2: 0.5em;
	--est-space-3: 1em;
	--est-space-4: 1.5em;
	--est-space-5: 2.5em;
	--est-space-6: 4em;
	--est-space-7: 6em;

	/* --- Diğer (ince işler: px) --- */
	--est-radius: 2px;
	--est-header-height: 76px;
	--est-shadow-sm: 0 1px 2px rgba(62, 53, 44, 0.08);
	--est-shadow:    0 2px 12px rgba(62, 53, 44, 0.32);
	--est-shadow-lg: 0 8px 32px rgba(62, 53, 44, 0.18);
	--est-transition: 220ms cubic-bezier(0.4, 0, 0.2, 1);

	/* --- Geçişler: site genelinde yumuşak açılıp kapanma --- */
	--est-fade: 300ms ease-in-out;

	/* --- Sol navigasyon ve üst şerit --- */
	--est-sidenav-w: 265px;
	--est-topbar-h: 70px;

	/* --- Hub arka planı (özelleştiriciden ezilir) --- */
	--est-hub-overlay: #ECE7E1;
	--est-hub-overlay-alpha: 0.8;
	--est-hub-map: none;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--est-topbar-h) + 1em);
}

body {
	margin: 0;
	background-color: var(--est-bg);
	color: var(--est-ink);
	font-family: var(--est-font-body);
	font-size: var(--est-text-base);
	line-height: var(--est-leading-body);
	font-weight: 400;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg,
iframe {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

hr {
	border: 0;
	border-top: 1px solid var(--est-line);
	margin: var(--est-space-5) 0;
}

/* --------------------------------------------------------------------------
   3. Tipografi
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
	margin: 0 0 var(--est-space-3);
	font-family: var(--est-font-heading);
	font-weight: 600;
	line-height: var(--est-leading-tight);
	letter-spacing: var(--est-tracking-heading);
	color: var(--est-ink);
	text-wrap: balance;
}

h1 { font-size: var(--est-h1); }
h2 { font-size: var(--est-h2); }
h3 { font-size: var(--est-h3); }
h4 { font-size: var(--est-h4); }
h5 { font-size: var(--est-h5); }
h6 { font-size: var(--est-h6); text-transform: uppercase; letter-spacing: var(--est-tracking-wide); }

p {
	margin: 0 0 var(--est-space-3);
}

a {
	color: var(--est-accent);
	text-decoration: none;
	text-underline-offset: 3px;
	transition: color var(--est-transition);
}

a:hover,
a:focus {
	color: var(--est-accent-dark);
	text-decoration: underline;
}

strong, b { font-weight: 600; }

blockquote {
	margin: var(--est-space-5) 0;
	padding: var(--est-space-2) 0 var(--est-space-2) var(--est-space-4);
	border-left: 3px solid var(--est-accent);
	font-style: italic;
	color: var(--est-ink-muted);
}

blockquote p:last-child { margin-bottom: 0; }

ul, ol {
	margin: 0 0 var(--est-space-3);
	padding-left: 1.5em;
}

li { margin-bottom: var(--est-space-1); }

code, pre, kbd {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: var(--est-text-sm);
}

code {
	background: var(--est-bg-sunken);
	padding: 0.15em 0.4em;
	border-radius: var(--est-radius);
}

pre {
	background: var(--est-bg-dark);
	color: var(--est-ink-inverse);
	padding: var(--est-space-4);
	overflow-x: auto;
	border-radius: var(--est-radius);
}

pre code { background: none; padding: 0; }

table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: var(--est-space-4);
	font-size: var(--est-text-sm);
}

th, td {
	padding: 0.6em 0.8em;
	border: 1px solid var(--est-line);
	text-align: left;
}

th {
	background: var(--est-bg-sunken);
	font-family: var(--est-font-heading);
	font-weight: 600;
}

figure { margin: var(--est-space-5) 0; }

figcaption {
	margin-top: var(--est-space-2);
	font-size: var(--est-text-sm);
	color: var(--est-ink-muted);
	text-align: center;
	font-style: italic;
}

::selection {
	background: var(--est-accent);
	color: #fff;
}

/* --------------------------------------------------------------------------
   4. Erişilebilirlik
   -------------------------------------------------------------------------- */
.screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link {
	position: absolute;
	top: -100px;
	left: 1em;
	z-index: 9999;
	background: var(--est-bg-dark);
	color: var(--est-ink-inverse);
	padding: 0.75em 1.25em;
	font-family: var(--est-font-heading);
	font-size: var(--est-text-sm);
}

.skip-link:focus {
	top: 1em;
	color: var(--est-ink-inverse);
}

:focus-visible {
	outline: 2px solid var(--est-accent);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* --------------------------------------------------------------------------
   5. Mobil tipografi ölçeği
   -------------------------------------------------------------------------- */
@media (max-width: 782px) {
	:root {
		--est-h1: 2rem;
		--est-h2: 1.625rem;
		--est-h3: 1.3125rem;
		--est-header-height: 64px;
	}
}

/* --------------------------------------------------------------------------
   6. Site genelinde yumuşak geçişler (fade in / out)
   -------------------------------------------------------------------------- */
a,
button,
input,
select,
textarea,
summary,
[class*="est-"] {
	transition:
		color var(--est-fade),
		background-color var(--est-fade),
		border-color var(--est-fade),
		opacity var(--est-fade),
		box-shadow var(--est-fade),
		filter var(--est-fade);
}

img {
	transition: opacity var(--est-fade), filter var(--est-fade);
}

/* --------------------------------------------------------------------------
   7. Daedrik alfabe (Daedra - Pixel Sagas)
   Latin harfleri Daedrik gliflere karsilik gelir.
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Daedra";
	src: url("../fonts/daedra.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

.est-daedric {
	font-family: "Daedra", var(--est-font-heading);
	font-weight: 400;
	letter-spacing: 0.06em;
}