/* dersaadet.org tanıtım sitesi. Renkler web/ sitesiyle aynı; dış yazı tipi yok (istek yok, KVKK yükü yok). */
:root {
  --krem: #ffddb0;
  --kayisi: #ffbe91;
  --gok: #cfebff;
  --gok-soluk: rgba(207, 235, 255, .72);
  --firuze: #60a5c1;
  --murekkep: #203777;
  --murekkep-koyu: #16264f;
  --cizgi: rgba(255, 221, 176, .16);
  --baslik: "Lora", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --govde: "Libre Franklin", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background-color: var(--murekkep-koyu);
  background-image:
    radial-gradient(ellipse 90% 520px at 50% 0, rgba(96, 165, 193, .2), transparent),
    linear-gradient(var(--murekkep), var(--murekkep-koyu) 720px);
  background-repeat: no-repeat;
  color: var(--gok);
  font-family: var(--govde);
  font-size: 1.0625rem;
  line-height: 1.65;
}
a { color: var(--kayisi); text-underline-offset: 3px; }
a:hover { color: var(--krem); }
:focus-visible { outline: 2px solid var(--kayisi); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--baslik); color: var(--krem); line-height: 1.25; }
h1 { margin: 0; font-size: clamp(1.9rem, 6vw, 2.6rem); }
h2 { margin: 0 0 14px; font-size: clamp(1.4rem, 4.2vw, 1.85rem); }
h3 { margin: 0 0 6px; font-size: 1.18rem; }

.atla { position: absolute; left: -9999px; }
.atla:focus { left: 16px; top: 12px; z-index: 2; padding: 8px 14px; background: var(--krem); color: var(--murekkep-koyu); border-radius: 6px; }

.ust, main, .alt { max-width: 66rem; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.ust { display: flex; align-items: center; justify-content: space-between; gap: 10px 24px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.marka { display: inline-flex; align-items: center; gap: 10px; color: var(--krem); text-decoration: none; font-family: var(--baslik); font-weight: 700; font-size: 1.1rem; letter-spacing: .14em; text-transform: uppercase; }
.marka-muhur { width: 34px; height: 34px; color: var(--kayisi); }
.ust nav, .alt nav { display: flex; flex-wrap: wrap; gap: 4px 20px; }
.ust nav a { color: var(--gok); text-decoration: none; padding: 6px 0; border-bottom: 2px solid transparent; }
.ust nav a:hover { color: var(--krem); }
.ust nav a[aria-current="page"] { color: var(--krem); border-bottom-color: var(--kayisi); }

main { padding-bottom: 72px; }
main > section { margin-top: 64px; }
main > section.kahraman { margin-top: 0; }

.kahraman { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 40px 0 8px; text-align: center; }
.kahraman .muhur { width: 96px; color: var(--kayisi); }
.kahraman h1 { font-size: clamp(2.4rem, 9vw, 4.2rem); letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 2px 0 var(--murekkep-koyu), 0 6px 18px rgba(0, 0, 0, .45); }
.kahraman .h1-alt { display: block; margin-top: 10px; font-size: 1.25rem; font-weight: 400; letter-spacing: 0; text-transform: none; text-shadow: none; }
.bezeme { width: 220px; max-width: 70vw; height: 30px; color: var(--kayisi); }
.slogan { margin: 0; max-width: 34rem; font-family: var(--baslik); font-size: 1.2rem; font-style: italic; color: var(--krem); }
.durum { margin: 6px 0 0; display: inline-flex; align-items: center; gap: 10px; padding: 9px 18px; border: 1px solid rgba(255, 221, 176, .28); border-radius: 999px; color: var(--krem); font-size: .95rem; }
.durum::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--kayisi); box-shadow: 0 0 0 4px rgba(255, 190, 145, .16); }

.giris { margin: 0 0 20px; max-width: 46rem; color: var(--gok-soluk); }
.metin { max-width: 44rem; }
.metin p, .metin ul, .metin ol { margin: 0 0 1.05em; }
.metin li { margin-bottom: .35em; }
.metin h2 { margin-top: 2.1em; }
.metin h3 { margin-top: 1.7em; }
.metin blockquote { margin: 1.5em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--kayisi); font-family: var(--baslik); font-size: 1.15rem; font-style: italic; color: var(--krem); }
.metin blockquote p { margin: 0; }
.metin strong { color: var(--krem); }

.kartlar, .ozellikler, .yazi-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.kartlar { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.kart { padding: 18px 18px 16px; background: rgba(255, 255, 255, .04); border: 1px solid var(--cizgi); border-top: 3px solid var(--renk, var(--kayisi)); border-radius: 12px; }
.kart p { margin: 8px 0 0; }
.kunye { font-size: .9rem; color: var(--gok-soluk); }
.ozellikler { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px; }
.ozellikler p { margin: 0; }
.ozellikler h3::before { content: "◆"; margin-right: 8px; font-size: .7em; vertical-align: .15em; color: var(--kayisi); }

.yazi-listesi article { padding: 16px 0; border-bottom: 1px solid var(--cizgi); }
.yazi-listesi h2, .yazi-listesi h3 { margin: 0; font-size: 1.25rem; }
.yazi-listesi h2 a, .yazi-listesi h3 a { color: var(--krem); text-decoration: none; }
.yazi-listesi h2 a:hover, .yazi-listesi h3 a:hover { text-decoration: underline; }
.yazi-listesi time, .tarih { font-size: .875rem; color: var(--gok-soluk); }
.yazi-listesi p { margin: 6px 0 0; }

.sorular { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px 28px; }
.sorular p { margin: 0; }

.kirinti { padding-top: 20px; font-size: .875rem; }
.kirinti ol { display: flex; flex-wrap: wrap; gap: 4px 8px; list-style: none; margin: 0; padding: 0; color: var(--gok-soluk); }
.kirinti li + li::before { content: "›"; margin-right: 8px; opacity: .6; }
.sayfa-ust { padding: 28px 0 8px; margin-top: 0 !important; }
.sayfa-ust h1 { max-width: 46rem; }
.sayfa-ust .giris, .sayfa-ust .tarih { margin-top: 12px; }
.yazi .metin { margin-top: 20px; }
.diger { margin-top: 64px; }
.bulunamadi { min-height: 50vh; }

.alt { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; padding-top: 24px; padding-bottom: 40px; border-top: 1px solid var(--cizgi); font-size: .875rem; color: var(--gok-soluk); }
.alt p { margin: 0; }
.alt nav a { color: var(--gok-soluk); }

@media (prefers-reduced-motion: no-preference) {
  .kahraman { animation: belir .8s ease-out both; }
  @keyframes belir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
}

/* Zümre renkleri: shared/data/kingdoms.json */
.zumre-ryong { --renk: #1E6B4F; }
.zumre-hoshi { --renk: #B58A2E; }
.zumre-baram { --renk: #B33A1D; }