/* Ejderha site stili. Oyunun ana menusuyle ayni dil: mesale isiginda bronz zemin, altin cizgiler,
   Cinzel basliklar, cerceveli levha dugmeler. Kahraman bolumunde oyunun ejderhasi durur. */

@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400; font-display: swap; src: url(yazi/alegreya-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400; font-display: swap; src: url(yazi/alegreya-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(yazi/alegreya-latin-400-italic.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400; font-display: swap; src: url(yazi/alegreya-latin-ext-400-italic.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+1E00-1E9F; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(yazi/cinzel-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 600; font-display: swap; src: url(yazi/cinzel-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(yazi/cinzel-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Cinzel'; font-style: normal; font-weight: 700; font-display: swap; src: url(yazi/cinzel-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(yazi/figtree-latin-400-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400; font-display: swap; src: url(yazi/figtree-latin-ext-400-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(yazi/figtree-latin-500-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 500; font-display: swap; src: url(yazi/figtree-latin-ext-500-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(yazi/figtree-latin-600-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 600; font-display: swap; src: url(yazi/figtree-latin-ext-600-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(yazi/figtree-latin-700-normal.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 700; font-display: swap; src: url(yazi/figtree-latin-ext-700-normal.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --komur: #0D0A08;
  --is: #17110D;
  --kul: #211913;
  --murekkep-cizgi: #3A2D21;
  --kemik: #F3E6CC;
  --toz: #BFAE92;
  --pirinc: #C9A15E;
  --pirinc-soluk: rgba(201, 161, 94, 0.28);
  --kor: #E9C27A;
  --kor-koyu: #B8863F;
  --patina: #5FA89C;
  --iyi: #74B183;
  --uyari: #E0B04E;
  --kritik: #E5674F;

  --baslik: 'Cinzel', Georgia, serif;
  --anlati: 'Alegreya', Georgia, serif;
  --arayuz: 'Figtree', 'Segoe UI', system-ui, sans-serif;

  --olcek-0: 0.875rem;
  --olcek-1: 1rem;
  --olcek-2: 1.1875rem;
  --olcek-3: 1.5rem;
  --olcek-4: 2rem;
  --olcek-5: 2.75rem;
  --olcek-6: clamp(2.5rem, 1.6rem + 3.6vw, 4.25rem);

  --genislik: 72rem;
  --metin-genislik: 38rem;
  --kose: 10px;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
body { margin: 0; background: radial-gradient(1400px 900px at 50% -10%, #1E1510 0%, transparent 60%), var(--komur); color: var(--kemik); font: 400 var(--olcek-1)/1.6 var(--arayuz); -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-color: var(--pirinc-soluk); }
a:hover { text-decoration-color: var(--pirinc); }
:focus-visible { outline: 2px solid var(--pirinc); outline-offset: 3px; border-radius: 2px; }
.ikon { width: 1.15em; height: 1.15em; flex: none; }
.gizli-metin { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: 1rem; top: -4rem; padding: .6rem 1rem; background: var(--kemik); color: var(--komur); border-radius: 6px; z-index: 100; }
.atla:focus { top: 1rem; }
.kap { width: min(var(--genislik), 100% - 2rem); margin-inline: auto; }

/* ---------------------------------------------------------------- dugmeler
   Levha dugme: 9 dilimli cerceve (asagidaki --cerceve degiskenleri araclar/cerceve.py ile uretilir). */
.dugme { --y: 23px; display: inline-flex; align-items: center; justify-content: center; gap: .55rem; min-height: calc(var(--y) * 2); padding: .4rem calc(var(--y) + .5rem);
  border: 0 solid transparent; border-image: var(--cerceve) 40 34 fill / 50% calc(var(--y) * .85) stretch; background: none; color: var(--kemik);
  font: 600 var(--olcek-1)/1 var(--arayuz); text-decoration: none; cursor: pointer; white-space: nowrap; transition: filter .15s, transform .15s; }
.dugme .ikon { color: var(--kor); }
.dugme:hover, .dugme:focus-visible { border-image-source: var(--cerceve-uzer); filter: drop-shadow(0 0 8px rgba(233, 160, 60, .35)); outline: none; }
.dugme:active { transform: translateY(1px); }
.dugme.ana { border-image-source: var(--cerceve-ana); color: #1E1408; font-weight: 700; }
.dugme.ana .ikon { color: #1E1408; }
.dugme.ana:hover, .dugme.ana:focus-visible { border-image-source: var(--cerceve-ana-uzer); }
.dugme.ince { border-image-source: var(--cerceve); }
.dugme.tehlike { border-image-source: var(--cerceve-tehlike); color: #FFC9BB; }
.dugme.tehlike:hover, .dugme.tehlike:focus-visible { border-image-source: var(--cerceve-tehlike-uzer); }
.dugme.kucuk { --y: 18px; font-size: var(--olcek-0); }
.dugme.tam { width: 100%; }
.dugme[disabled] { opacity: .5; cursor: not-allowed; filter: grayscale(.6); }

/* ---------------------------------------------------------------- ust menu */
.ust { position: sticky; top: 0; z-index: 20; background: rgba(21, 19, 15, .86); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(201, 154, 74, .14); }
.ust .kap { display: flex; align-items: center; gap: 1rem; min-height: 4.25rem; width: min(calc(var(--genislik) + 8rem), 100% - 2rem); }
.marka { display: flex; align-items: center; gap: .6rem; text-decoration: none; font: 700 1.35rem/1 var(--baslik); letter-spacing: .08em; color: var(--kor); }
.marka img { width: 34px; height: 34px; }
.ust nav { display: flex; align-items: center; gap: .1rem; margin-right: auto; padding-left: .9rem; border-left: 1px solid rgba(201, 154, 74, .18); }
/* Baglantilar hic kirilmaz: sigmadiklari genislikte menu dugmesine toplanirlar. Bulunulan sayfa altin bir cizgiyle isaretlenir. */
.ust nav a { position: relative; padding: .55rem .6rem; border-radius: 8px; white-space: nowrap; text-decoration: none; color: var(--toz); font-weight: 500; font-size: .92rem; letter-spacing: 0; transition: color .15s, background-color .15s; }
.ust nav a::after { content: ''; position: absolute; left: .6rem; right: .6rem; bottom: .2rem; height: 2px; border-radius: 2px; background: linear-gradient(90deg, transparent, var(--kor), transparent); opacity: 0; transform: scaleX(.4); transition: opacity .2s, transform .2s; }
.ust nav a:hover { color: var(--kemik); background: rgba(201, 154, 74, .06); }
.ust nav a[aria-current] { color: var(--kemik); }
.ust nav a[aria-current]::after, .ust nav a:hover::after { opacity: 1; transform: scaleX(1); }
.ust nav a:focus-visible { outline: 2px solid var(--kor); outline-offset: 1px; }
.ust-sag { display: flex; align-items: center; gap: .6rem; flex: none; }
.ust-sag .dugme { white-space: nowrap; }
/* Marka genis ekranda sikismaz (Beta rozeti menunun ayracina binmesin). Yonetim dugmesi orta genislikte sadece ikondur. */
@media (min-width: 761px) { .marka { flex: none; } }
@media (max-width: 1399px) { .ust-yonetim .ust-etiket { display: none; } .ust-yonetim { padding-inline: .7rem; } }
/* Uzun gorunen ad ust seridi tasirmaz: tamami dugmenin title metninde. */
.ust-ad { display: inline-block; max-width: 7.5rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.dil-sec { position: relative; }
.dil-sec summary { list-style: none; display: flex; align-items: center; gap: .35rem; cursor: pointer; color: var(--toz); padding: .4rem .6rem; border-radius: 8px; font-weight: 500; }
.dil-sec summary::-webkit-details-marker { display: none; }
.dil-sec summary:hover { color: var(--kemik); background: var(--is); }
.dil-sec ul { position: absolute; right: 0; top: calc(100% + 6px); margin: 0; padding: .35rem; list-style: none; background: var(--is); border: 1px solid var(--murekkep-cizgi); border-radius: var(--kose); min-width: 9rem; box-shadow: 0 12px 30px rgba(0, 0, 0, .5); }
.dil-sec li a { display: block; padding: .5rem .75rem; border-radius: 6px; text-decoration: none; }
.dil-sec li a:hover, .dil-sec li a[aria-current="true"] { background: var(--kul); }
.menu-dugme { display: none; background: none; border: 0; color: var(--kemik); padding: .5rem; cursor: pointer; }
.menu-dugme .ikon { width: 26px; height: 26px; }

/* ---------------------------------------------------------------- bildirimler */
.bildirimler { margin-top: 1rem; display: grid; gap: .5rem; }
.bildirim { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: var(--kose); background: var(--is); border: 1px solid var(--murekkep-cizgi); }
.bildirim .ikon { margin-top: .15rem; }
.bildirim.basari { border-color: rgba(116, 177, 131, .45); }
.bildirim.basari .ikon { color: var(--iyi); }
.bildirim.hata { border-color: rgba(229, 103, 79, .5); }
.bildirim.hata .ikon { color: var(--kritik); }
.bildirim.uyari { border-color: rgba(224, 176, 78, .45); }
.bildirim.uyari .ikon { color: var(--uyari); }

/* ---------------------------------------------------------------- kahraman */
.kahraman { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(3rem, 7vw, 6rem); }
.kahraman .kap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.kahraman h1 { margin: 0 0 1.25rem; font: 700 var(--olcek-6)/1.08 var(--baslik); letter-spacing: .02em; text-wrap: balance;
  background: linear-gradient(180deg, #FBEFD2 10%, #E9C27A 60%, #A87C44 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .8)); }
.kahraman .giris-metni { margin: 0 0 2rem; font: 400 var(--olcek-2)/1.6 var(--anlati); color: #D6CDBB; max-width: 32rem; }
.kahraman .eylemler { display: flex; flex-wrap: wrap; gap: .75rem; }
.kahraman .not { margin: 1.25rem 0 0; font-size: var(--olcek-0); color: var(--toz); }

/* Oyunun ejderhasi: ana menudeki kafa, arkasinda nefesle buyuyen kor halesi, gozlerinde ates, onunde yukselen kivilcimlar.
   --egx ve --egy (-1 ile 1) imlecin yonudur, site.js yazar. Kafa ona dogru hafifce doner. */
.ejderha-sahne { --egx: 0; --egy: 0; position: relative; display: grid; place-items: center; perspective: 900px; overflow-x: clip; }
.ejderha-sahne::before { content: ''; position: absolute; inset: 8% 10%; border-radius: 50%; background: radial-gradient(circle, rgba(200, 80, 20, .34), transparent 65%); filter: blur(20px);
  animation: hale 7s ease-in-out infinite; }
.ejderha-kafa { position: relative; width: min(100%, 560px); transform: rotateY(calc(var(--egx) * 5deg)) rotateX(calc(var(--egy) * -4deg)); transition: transform .9s cubic-bezier(.2, .7, .2, 1);
  animation: ejderha-gelis 1.4s .2s cubic-bezier(.2, .7, .2, 1) both, nefes 7s 1.6s ease-in-out infinite; }
.ejderha-kafa img { width: 100%; height: auto; filter: drop-shadow(0 24px 40px rgba(0, 0, 0, .6)); }
/* Gozler: kafa resmindeki iris konumlari (660 x 680 resimde 238,280 ve 422,280). Kenar boslugu yuzdesi genislige gore oldugu icin ortalama margin ile. */
.goz { position: absolute; top: 41.2%; width: 15%; aspect-ratio: 2 / 1; margin: -3.75% 0 0 -7.5%; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(255, 214, 120, .95), rgba(255, 120, 20, .55) 45%, transparent 100%); opacity: .35; animation: goz 7s ease-in-out infinite; }
.goz.sol { left: 36%; }
.goz.sag { left: 64%; }
.kivilcim { position: absolute; left: 0; top: -10%; width: 100%; height: 110%; pointer-events: none; }
@keyframes ejderha-gelis { from { opacity: 0; scale: .94; filter: brightness(.4); } }
@keyframes nefes { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes hale { 0%, 100% { opacity: .75; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@keyframes goz { 0%, 100% { opacity: .3; } 45% { opacity: .9; } 55% { opacity: .75; } }
.oyun-goruntusu { margin-top: 2.5rem; }

/* Savas haritasi cercevesi: kenarlarda koordinatlar */
.harita { --hucre: calc(100% / 10); position: relative; padding: 1.6rem 0 0 1.6rem; }
.harita-sutun, .harita-satir { position: absolute; display: flex; font: 700 .72rem/1 var(--arayuz); color: var(--pirinc); letter-spacing: .04em; opacity: .85; }
.harita-sutun { top: 0; left: 1.6rem; right: 0; height: 1.6rem; }
.harita-sutun span { flex: 1; display: grid; place-items: center; border-left: 1px solid var(--pirinc-soluk); }
.harita-satir { top: 1.6rem; left: 0; bottom: 0; width: 1.6rem; flex-direction: column; }
.harita-satir span { flex: 1; display: grid; place-items: center; border-top: 1px solid var(--pirinc-soluk); }
.harita figure { margin: 0; position: relative; border: 1px solid var(--pirinc); border-radius: 2px; overflow: hidden; background: #0d0b09; aspect-ratio: 16 / 10; }
.harita figure img { width: 100%; height: 100%; object-fit: cover; }
.harita figure::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--pirinc-soluk) 1px, transparent 1px), linear-gradient(90deg, var(--pirinc-soluk) 1px, transparent 1px); background-size: 10% 12.5%; mix-blend-mode: screen; opacity: .35; }
.harita figcaption { position: absolute; right: .75rem; bottom: .75rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(21, 19, 15, .82); font-size: var(--olcek-0); color: var(--toz); }

/* ---------------------------------------------------------------- bolumler */
.bolum { padding: clamp(3rem, 7vw, 5.5rem) 0; border-top: 1px solid rgba(201, 154, 74, .12); }
.bolum h2 { margin: 0 0 .75rem; font: 700 var(--olcek-5)/1.12 var(--baslik); letter-spacing: .02em; text-wrap: balance; color: var(--kor); text-shadow: 0 2px 0 #000; }
.bolum .ozet { margin: 0; color: var(--toz); font: 400 var(--olcek-2)/1.6 var(--anlati); max-width: 30rem; }

/* Bolum basligi: ortada baslik, altinda pirinc susleme (iki cizgi ve elmas), sonra kisa ozet. */
.bolum-baslik { display: grid; justify-items: center; gap: .9rem; margin: 0 auto clamp(2.25rem, 5vw, 3.5rem); max-width: 44rem; text-align: center; }
.bolum-baslik h2 { margin: 0; }
.bolum-baslik::after { content: ''; order: 1; width: min(16rem, 70%); aspect-ratio: 240 / 14;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 14'%3E%3Cdefs%3E%3ClinearGradient id='a'%3E%3Cstop offset='0' stop-color='%23C9A15E' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C9A15E'/%3E%3C/linearGradient%3E%3ClinearGradient id='b' x1='1' x2='0'%3E%3Cstop offset='0' stop-color='%23C9A15E' stop-opacity='0'/%3E%3Cstop offset='1' stop-color='%23C9A15E'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0 7h100' stroke='url(%23a)'/%3E%3Cpath d='M140 7h100' stroke='url(%23b)'/%3E%3Cpath d='M106 7l4-3 4 3-4 3zM126 7l4-3 4 3-4 3z' fill='%23B8863F'/%3E%3Cpath d='M120 1l6 6-6 6-6-6z' fill='%23E9C27A' stroke='%23120D09' stroke-width='1'/%3E%3C/svg%3E") center / contain no-repeat; }
.bolum-baslik .ozet { order: 2; max-width: 36rem; }

/* Kural maddeleri: madalyon ikonlu levhalar */
.kurallar { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.kural { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .45rem; padding: 1.6rem 1.5rem 1.7rem; border: 1px solid #4A3826; border-radius: 4px;
  background: radial-gradient(420px 180px at 50% -40%, rgba(201, 161, 94, .1), transparent 70%), linear-gradient(180deg, rgba(33, 23, 15, .9), rgba(16, 12, 9, .9));
  box-shadow: inset 0 0 0 3px #120D09, inset 0 0 0 4px rgba(201, 161, 94, .14); transition: transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s; }
.kural:hover { transform: translateY(-4px); border-color: rgba(201, 161, 94, .6); box-shadow: inset 0 0 0 3px #120D09, inset 0 0 0 4px rgba(201, 161, 94, .3), 0 18px 34px rgba(0, 0, 0, .45); }
.kural dt { font: 700 var(--olcek-3)/1.2 var(--baslik); letter-spacing: .01em; }
.kural dd { margin: 0; color: #CFC6B3; }
.kural .rozet-ikon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; margin-bottom: .55rem; padding: .7rem; border-radius: 50%; color: var(--kor);
  background: radial-gradient(circle at 35% 30%, #3A2A1A, #150F0A 70%); box-shadow: 0 0 0 1px rgba(201, 161, 94, .55), 0 0 0 4px #120D09, 0 0 0 5px rgba(201, 161, 94, .25), 0 8px 18px rgba(0, 0, 0, .5);
  transition: color .35s, box-shadow .35s; }
.kural:hover .rozet-ikon { color: #FFE2A6; box-shadow: 0 0 0 1px var(--kor), 0 0 0 4px #120D09, 0 0 0 5px rgba(233, 194, 122, .5), 0 0 22px rgba(233, 160, 60, .35); }
.kural .rozet-ikon svg { width: 100%; height: 100%; }

/* Nasil oynanir: gercek bir sira oldugu icin numarali */
/* Yenilikler: kitap kenarindaki notlar gibi, solda ince bir cizgi ve ikon. */
.yenilikler { list-style: none; margin: 0; padding: 0 0 0 1.5rem; border-left: 1px solid var(--murekkep-cizgi); display: grid; gap: 1.75rem; }
.yenilikler li { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: .3rem; }
.yenilik-ikon { position: absolute; left: calc(-1.5rem - 1.05rem); top: .1rem; width: 2.1rem; height: 2.1rem; padding: .35rem; box-sizing: border-box; border-radius: 50%; background: var(--komur); border: 1px solid var(--pirinc-soluk); color: var(--pirinc); }
.yenilik-ikon svg { width: 100%; height: 100%; }
.yenilikler h3 { margin: 0 0 0 .9rem; font: 700 var(--olcek-3)/1.2 var(--baslik); }
.yenilikler p { margin: 0 0 0 .9rem; color: #CFC6B3; max-width: var(--metin-genislik); }
@media (max-width: 900px) { .yenilikler { margin-left: 1.05rem; padding-left: 1.2rem; } .yenilik-ikon { left: calc(-1.2rem - 1.05rem); } .yenilikler h3, .yenilikler p { margin-left: .6rem; } }
/* Nasil oynanir: gorev parsomeni. Adimlar kirmizi balmumu muhurlerle numaralanir, aralarinda murekkeple cizilmis bir yol. */
.parsomen.gorev { max-width: min(62rem, calc(100% - var(--uc) * 2)); margin-inline: auto; }
.parsomen.gorev .parsomen-ic { padding: clamp(1.8rem, 4vw, 3rem) clamp(1.4rem, 4.5vw, 3.5rem) clamp(2rem, 4.5vw, 3.25rem); text-align: center; }
.parsomen.gorev .ozet { margin-inline: auto; max-width: 30rem; }
.adimlar { list-style: none; margin: clamp(1.75rem, 4vw, 2.5rem) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; position: relative; }
.adimlar::before { content: ''; position: absolute; top: 1.6rem; left: 16%; right: 16%; height: 2px; z-index: 0; clip-path: inset(0);
  background: repeating-linear-gradient(90deg, rgba(78, 36, 16, .55) 0 10px, transparent 10px 18px); }
.adimlar li { position: relative; display: grid; justify-items: center; gap: .35rem; }
.adimlar h3 { margin: .9rem 0 .15rem; font: 700 var(--olcek-3)/1.2 var(--baslik); color: #4E2410; }
.adimlar p { margin: 0; color: #3B2814; font: 400 var(--olcek-1)/1.55 var(--anlati); max-width: 17rem; }

/* Balmumu muhur: duzensiz kenar, ici kabarik, uzerinde baski. */
.muhur { position: relative; z-index: 1; display: grid; place-items: center; width: 5.25rem; height: 5.25rem; border-radius: 47% 53% 50% 50% / 52% 46% 54% 48%; color: rgba(255, 196, 176, .72);
  background: radial-gradient(circle at 36% 30%, #E0664C 0, #B23324 34%, #7E1C12 68%, #57110A 100%);
  box-shadow: inset 0 0 0 5px rgba(87, 17, 10, .55), inset 0 0 0 6px rgba(255, 150, 120, .25), inset 0 -6px 10px rgba(40, 6, 2, .55), inset 0 5px 8px rgba(255, 170, 140, .3), 0 6px 12px rgba(40, 12, 4, .45), 2px 2px 0 -1px #9E2A1C, -2px 3px 0 -1px #8C2416; }
.muhur .ikon { width: 52%; height: 52%; filter: drop-shadow(0 -1px 0 rgba(60, 8, 2, .7)) drop-shadow(0 1px 0 rgba(255, 190, 170, .35)); }
.muhur.kucuk { width: 3.2rem; height: 3.2rem; font: 700 1.35rem/1 var(--baslik); color: #FFD9C8; text-shadow: 0 -1px 0 rgba(60, 8, 2, .9), 0 1px 0 rgba(255, 190, 170, .35); }

/* Siniflar: on iki kucuk levha */
.siniflar { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.siniflar li { display: grid; align-content: start; gap: .3rem; padding: 1rem 1.1rem 1.1rem; border: 1px solid var(--murekkep-cizgi); border-radius: 4px; background: rgba(23, 17, 13, .65);
  transition: border-color .3s, background .3s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.siniflar li:hover { border-color: rgba(201, 161, 94, .55); background: rgba(40, 29, 19, .8); transform: translateY(-3px); }
.siniflar strong { display: block; font: 700 var(--olcek-2)/1.2 var(--baslik); color: var(--kor); }
.siniflar span { color: var(--toz); font-size: var(--olcek-0); }

/* SSS */
.sss { max-width: 48rem; margin-inline: auto; }
.sss details { border-bottom: 1px solid var(--murekkep-cizgi); }
.sss summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 1.15rem 0; font: 700 var(--olcek-2)/1.35 var(--baslik); transition: color .2s; }
.sss summary:hover { color: var(--kor); }
.sss summary::-webkit-details-marker { display: none; }
.sss summary::after { content: '+'; color: var(--pirinc); font: 400 1.5rem/1 var(--arayuz); transition: transform .25s; }
.sss details[open] summary::after { transform: rotate(45deg); }
.sss details p { margin: 0 0 1.25rem; color: #CFC6B3; max-width: var(--metin-genislik); }
.sss details[open] p { animation: sss-ac .35s ease-out; }
@keyframes sss-ac { from { opacity: 0; translate: 0 -6px; } }

/* Kapanis cagrisi: muhurlu mektup */
.davet { padding: clamp(3.5rem, 8vw, 6rem) 0 clamp(4.5rem, 9vw, 7rem); border-top: 1px solid rgba(201, 154, 74, .12);
  background: radial-gradient(700px 320px at 50% 60%, rgba(160, 70, 20, .14), transparent 70%); }
.parsomen.mektup { max-width: min(44rem, calc(100% - var(--uc) * 2)); margin-inline: auto; }
.parsomen.mektup .parsomen-ic { display: grid; justify-items: center; gap: 1.6rem; padding: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 5vw, 3.5rem) clamp(3.6rem, 7vw, 4.4rem); text-align: center; }
.parsomen.mektup p { margin: 0; font: 700 var(--olcek-4)/1.15 var(--baslik); color: #4E2410 !important; text-wrap: balance; }
.parsomen.mektup > .muhur { position: absolute; left: 50%; bottom: -1.9rem; z-index: 2; translate: -50% 0; }
/* Muhur catlagi: basildiktan sonra ince bir yarik acilir. */
.parsomen.mektup > .muhur::after { content: ''; position: absolute; left: 47%; top: 6%; width: 9%; height: 88%; background: #3A0A05;
  clip-path: polygon(40% 0, 60% 0, 45% 18%, 75% 33%, 40% 52%, 70% 68%, 35% 84%, 55% 100%, 42% 100%, 20% 84%, 52% 68%, 20% 52%, 58% 33%, 28% 18%); opacity: .8; }

/* ---------------------------------------------------------------- alt bilgi */
.alt { padding: 3rem 0 2.5rem; border-top: 1px solid rgba(201, 154, 74, .12); color: var(--toz); font-size: var(--olcek-0); }
.alt .kap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(2, minmax(0, 1fr)); gap: 2rem; }
.alt h2 { margin: 0 0 .75rem; font: 700 var(--olcek-1)/1.2 var(--baslik); color: var(--kemik); }
.alt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--kemik); }
.alt .lisans { grid-column: 1 / -1; margin: 1rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--murekkep-cizgi); font-size: .8rem; line-height: 1.6; }

/* ---------------------------------------------------------------- cerez bandi */
.cerez { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 40rem; margin-inline: auto; padding: 1.1rem 1.25rem; border-radius: 14px; background: var(--is); border: 1px solid var(--murekkep-cizgi); box-shadow: 0 18px 40px rgba(0, 0, 0, .55); display: grid; gap: .9rem; }
.cerez[hidden] { display: none; }
.cerez p { margin: 0; font-size: var(--olcek-0); color: #D6CDBB; }
.cerez .eylemler { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

/* ---------------------------------------------------------------- formlar */
.sayfa-dar { width: min(30rem, 100% - 2rem); margin: clamp(2rem, 6vw, 4.5rem) auto; }
.sayfa-orta { width: min(48rem, 100% - 2rem); margin: clamp(2rem, 6vw, 4rem) auto; }
.kart-yuzey { padding: clamp(1.5rem, 4vw, 2.25rem); background: linear-gradient(180deg, rgba(33, 23, 15, .94), rgba(18, 13, 9, .94)); border: 1px solid #5A4632; border-radius: 4px;
  box-shadow: inset 0 0 0 4px #120D09, inset 0 0 0 5px rgba(201, 161, 94, .22), 0 14px 34px rgba(0, 0, 0, .4); }
.sayfa-dar h1, .sayfa-orta h1 { margin: 0 0 .5rem; font: 700 var(--olcek-4)/1.15 var(--baslik); }
.sayfa-dar .aciklama, .sayfa-orta .aciklama { margin: 0 0 1.5rem; color: var(--toz); }
form.dikey { display: grid; gap: 1.1rem; }
.alan { display: grid; gap: .4rem; }
.alan label, .alan .etiket { font-weight: 600; font-size: var(--olcek-0); }
.alan small { color: var(--toz); font-size: .82rem; }
.alan .hata-metni { color: #F2A08F; font-size: .85rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=url], input[type=search], select, textarea {
  width: 100%; min-height: 46px; padding: .65rem .85rem; border-radius: 4px; border: 1px solid #4A3A2A; background: #0E0A07; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .6); color: var(--kemik); font: 400 var(--olcek-1)/1.4 var(--arayuz); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--pirinc); box-shadow: 0 0 0 3px var(--pirinc-soluk); }
input[aria-invalid=true] { border-color: rgba(229, 103, 79, .7); }
.sifre-kutu { position: relative; }
.sifre-kutu input { padding-right: 3rem; }
.sifre-goster { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: none; color: var(--toz); cursor: pointer; }
.sifre-goster:hover { color: var(--kemik); background: var(--kul); }
.guc { height: 4px; border-radius: 99px; background: var(--kul); overflow: hidden; }
.guc i { display: block; height: 100%; width: 0; background: var(--kritik); transition: width .2s, background .2s; }
.onay { display: flex; gap: .7rem; align-items: flex-start; font-size: var(--olcek-0); }
.onay input { width: 1.15rem; height: 1.15rem; margin-top: .15rem; accent-color: var(--pirinc); flex: none; }
.onay small { display: block; margin-top: .15rem; color: var(--toz); font-size: .8125rem; }
.ayrac { display: flex; align-items: center; gap: 1rem; color: var(--toz); font-size: var(--olcek-0); margin: .25rem 0; }
.ayrac::before, .ayrac::after { content: ''; flex: 1; height: 1px; background: var(--murekkep-cizgi); }
.google { background: #F2EEE6; color: #1F1F1F; border-color: #F2EEE6; }
.google:hover { background: #fff; border-color: #fff; }
.form-alt { margin-top: 1.25rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: var(--olcek-0); color: var(--toz); }
.kod-girdi { font: 700 1.6rem/1 var(--arayuz) !important; letter-spacing: .4em; text-align: center; }

/* ---------------------------------------------------------------- hesap */
.hesap-izgara { display: grid; gap: 1.25rem; }
.hesap-izgara h2 { margin: 0 0 1rem; font: 700 var(--olcek-3)/1.2 var(--baslik); display: flex; align-items: center; gap: .6rem; }
.hesap-izgara h2 .ikon { color: var(--pirinc); }
.satirlar { list-style: none; margin: 0; padding: 0; }
.satirlar li { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--murekkep-cizgi); }
.satirlar li:last-child { border-bottom: 0; }
.satirlar .soluk { color: var(--toz); font-size: var(--olcek-0); }
.etiket-hap { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; background: var(--kul); font-size: .8rem; font-weight: 600; }
.etiket-hap.iyi { color: var(--iyi); }
.etiket-hap.uyari { color: var(--uyari); }
.qr { width: 196px; height: 196px; padding: 10px; background: #fff; border-radius: 10px; }
.qr svg { width: 100%; height: 100%; }
.gizli-kod { font: 700 1.05rem/1.4 var(--arayuz); letter-spacing: .12em; word-break: break-all; padding: .7rem .9rem; background: #12100D; border: 1px dashed var(--murekkep-cizgi); border-radius: var(--kose); }
.tehlike-bolge { border-color: rgba(229, 103, 79, .35); }

/* ---------------------------------------------------------------- hesabim
   Ustte kimlik levhasi (oyun menusundeki avatar madalyonuyla ayni dil), solda bolumler, sagda tek bolum.
   Betik yoksa bolumler alt alta durur. */
.hesap { width: min(70rem, 100% - 2rem); margin: clamp(1.5rem, 4vw, 3rem) auto clamp(3rem, 6vw, 5rem); }
.hesap-levha { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem 1.4rem; padding: 1.4rem 1.6rem 0;
  border: 1px solid #5A4632; border-radius: 4px; background: radial-gradient(600px 200px at 0% 0%, rgba(201, 161, 94, .12), transparent 70%), linear-gradient(180deg, #1E160F, #130E0A);
  box-shadow: inset 0 0 0 4px #120D09, inset 0 0 0 5px rgba(201, 161, 94, .18); }
.hesap-madalya { display: grid; place-items: center; width: 4.5rem; height: 4.5rem; border-radius: 50%; font: 700 2rem/1 var(--baslik); color: #2A1B0C;
  background: radial-gradient(circle at 35% 30%, #F7E2B0, #C9A15E 55%, #8A6532); box-shadow: 0 0 0 3px #120D09, 0 0 0 4px rgba(233, 194, 122, .5), 0 8px 18px rgba(0, 0, 0, .5); }
.hesap-kim { min-width: 0; }
.hesap-levha-eylem { display: flex; flex-direction: column; align-items: stretch; gap: .5rem; }
.hesap-levha-eylem form .dugme { width: 100%; }
.hesap-kim h1 { margin: 0; font: 700 var(--olcek-4)/1.1 var(--baslik); overflow-wrap: anywhere; }
.hesap-kim p { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; margin: .4rem 0 0; color: #D6CDBB; font-size: var(--olcek-0); }
.hesap-kim p > span:first-child { overflow-wrap: anywhere; }
.hesap-kim .soluk { color: var(--toz); margin-top: .25rem; }
.hesap-durum { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 1.2rem -1.6rem 0; padding: 0; border-top: 1px solid var(--murekkep-cizgi); }
.hesap-durum li { flex: 1 1 12rem; border-right: 1px solid var(--murekkep-cizgi); }
.hesap-durum li:last-child { border-right: 0; }
.hesap-durum a, .hesap-durum li > span { display: flex; align-items: center; gap: .55rem; padding: .85rem 1.6rem; color: #D6CDBB; font-size: var(--olcek-0); text-decoration: none; }
.hesap-durum a:hover, .hesap-durum a:focus-visible { background: rgba(201, 161, 94, .07); color: var(--kemik); outline: none; }
.hesap-durum .ikon { color: var(--pirinc); }
.hesap-durum .ikon.iyi { color: var(--iyi); }
.hesap-durum .ikon.uyari { color: var(--uyari); }

.hesap-govde { display: grid; grid-template-columns: 14.5rem minmax(0, 1fr); gap: 1.5rem; margin-top: 1.5rem; align-items: start; }
.hesap-menu { position: sticky; top: 5.5rem; display: grid; gap: .2rem; }
.hesap-menu a { position: relative; display: flex; align-items: center; gap: .7rem; padding: .7rem .9rem; border-radius: 6px; color: var(--toz); font-weight: 500; text-decoration: none; }
.hesap-menu a .ikon { color: var(--toz); }
.hesap-menu a:hover { background: var(--is); color: var(--kemik); }
.hesap-menu a:focus-visible { outline: 2px solid var(--pirinc); outline-offset: -2px; }
.hesap-menu a[aria-current="true"] { background: var(--kul); color: var(--kemik); }
.hesap-menu a[aria-current="true"]::before { content: ''; position: absolute; left: 0; top: .55rem; bottom: .55rem; width: 3px; border-radius: 2px; background: var(--kor); }
.hesap-menu a[aria-current="true"] .ikon { color: var(--kor); }
.hesap-rozet { margin-left: auto; min-width: 1.5rem; padding: .1rem .45rem; border-radius: 999px; background: #2C2219; color: var(--kemik); font: 600 .75rem/1.4 var(--arayuz); text-align: center; }
.hesap-rozet.uyari { background: rgba(224, 176, 78, .16); color: var(--uyari); }

.hesap-paneller { display: grid; gap: 1.25rem; min-width: 0; }
.hesap-panel { padding: clamp(1.3rem, 3vw, 2rem); border: 1px solid #5A4632; border-radius: 4px; background: linear-gradient(180deg, rgba(33, 23, 15, .94), rgba(18, 13, 9, .94));
  box-shadow: inset 0 0 0 4px #120D09, inset 0 0 0 5px rgba(201, 161, 94, .18); scroll-margin-top: 6rem; }
.hesap-panel[hidden] { display: none; }
.hesap-panel h2 { margin: 0 0 .35rem; font: 700 var(--olcek-3)/1.2 var(--baslik); }
.hesap-panel h3 { margin: 1.75rem 0 .8rem; font: 600 var(--olcek-2)/1.25 var(--baslik); color: var(--kor); }
.hesap-panel .alan { align-content: start; }
.hesap-panel-not { margin: 0 0 1.4rem; color: var(--toz); font-size: var(--olcek-0); max-width: 40rem; }
.hesap-panel > h2 + .hesap-satir { margin-top: 1.2rem; }
.hesap-bos { margin: 1rem 0 0; padding: 1rem 1.1rem; border: 1px dashed var(--murekkep-cizgi); border-radius: 6px; color: var(--toz); font-size: var(--olcek-0); }
.hesap-satir { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1rem 1.1rem; border: 1px solid var(--murekkep-cizgi); border-radius: 6px; background: rgba(13, 10, 8, .45); }
.hesap-satir .soluk { color: var(--toz); font-size: var(--olcek-0); }
.hesap-satir-ikon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--kul); color: var(--pirinc); }
.hesap-satir.dikkat { border-color: rgba(224, 176, 78, .45); background: rgba(224, 176, 78, .05); }
.hesap-satir.dikkat .hesap-satir-ikon { color: var(--uyari); }

.davet-sayi { display: inline-flex; align-items: baseline; gap: .45rem; font-weight: 500; color: var(--toz); }
.davet-sayi strong { font: 700 var(--olcek-4)/1 var(--baslik); color: var(--kor); }
.davet-liste li.kapali .davet-kod { color: var(--toz); text-decoration: none; }
.davet-liste { margin-top: .75rem; }
.cihaz { display: flex; align-items: center; gap: .8rem; }
.cihaz .ikon { color: var(--toz); }
.cihaz-liste li.bu .cihaz .ikon { color: var(--iyi); }
.cihaz-liste { margin-bottom: 1rem; }

.gb-kisayol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.gb-kisayol a { display: flex; align-items: flex-start; gap: .8rem; padding: 1rem 1.1rem; border: 1px solid var(--murekkep-cizgi); border-radius: 6px; background: rgba(13, 10, 8, .45); text-decoration: none; }
.gb-kisayol a:hover, .gb-kisayol a:focus-visible { border-color: var(--pirinc); background: rgba(201, 161, 94, .06); outline: none; }
.gb-kisayol .ikon { margin-top: .15rem; color: var(--pirinc); }
.gb-kisayol strong { display: block; }
.gb-kisayol small { display: block; margin-top: .2rem; color: var(--toz); font-size: var(--olcek-0); }

.tehlike-acilir { margin-top: 1.25rem; border: 1px solid rgba(229, 103, 79, .3); border-radius: 6px; }
.tehlike-acilir summary { display: flex; align-items: center; gap: .6rem; padding: .95rem 1.1rem; cursor: pointer; color: #F2A08F; font-weight: 600; list-style: none; }
.tehlike-acilir summary::-webkit-details-marker { display: none; }
.tehlike-acilir summary::after { content: ''; margin-left: auto; width: .5rem; height: .5rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .15s; }
.tehlike-acilir[open] summary::after { transform: rotate(-135deg); }
.tehlike-acilir summary:focus-visible { outline: 2px solid var(--kritik); outline-offset: -2px; }
.tehlike-acilir > :not(summary) { margin: 0 1.1rem 1.1rem; }

@media (max-width: 860px) {
  .hesap-levha { grid-template-columns: auto minmax(0, 1fr); padding: 1.2rem 1.1rem 0; }
  .hesap-levha-eylem { grid-column: 1 / -1; }
  .hesap-levha-eylem .dugme { width: 100%; }
  .hesap-durum { margin: 1rem -1.1rem 0; }
  .hesap-durum li { flex: 1 1 50%; border-bottom: 1px solid var(--murekkep-cizgi); }
  .hesap-durum a, .hesap-durum li > span { padding: .75rem 1.1rem; }
  .hesap-govde { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .hesap-menu { position: sticky; top: 4.25rem; z-index: 5; display: flex; gap: .35rem; overflow-x: auto; margin: 0 -1rem; padding: .5rem 1rem;
    background: rgba(13, 10, 8, .92); backdrop-filter: blur(6px); scrollbar-width: none; }
  .hesap-menu::-webkit-scrollbar { display: none; }
  .hesap-menu a { flex: none; padding: .55rem .8rem; border: 1px solid var(--murekkep-cizgi); border-radius: 999px; font-size: var(--olcek-0); }
  .hesap-menu a[aria-current="true"]::before { display: none; }
  .hesap-menu a[aria-current="true"] { border-color: var(--pirinc); }
  .hesap-satir { grid-template-columns: auto minmax(0, 1fr); }
  .hesap-satir > :last-child { grid-column: 1 / -1; }
  .gb-kisayol { grid-template-columns: minmax(0, 1fr); }
  .davet-liste li { flex-wrap: wrap; }
}
@media (max-width: 520px) { .hesap-durum a, .hesap-durum li > span { padding: .7rem .9rem; font-size: .8rem; } .hesap-madalya { width: 3.5rem; height: 3.5rem; font-size: 1.6rem; } }

/* ---------------------------------------------------------------- yasal metin */
.metin { max-width: 44rem; font: 400 1.075rem/1.75 var(--anlati); }
.metin h1 { font: 700 var(--olcek-5)/1.1 var(--baslik); margin: 0 0 .5rem; }
/* Telefonda metin sayfasi basligi ekrana gore kuculur: uzun tek sozcukler (Nutzungsbedingungen) heceyle iki satira sigar. */
@media (max-width: 480px) { .metin h1 { font-size: min(var(--olcek-5), 8.4vw); } }
.metin h2 { font: 700 var(--olcek-3)/1.25 var(--baslik); margin: 2.25rem 0 .6rem; }
.metin p, .metin li { color: #D6CDBB; }
.metin .tarih { color: var(--toz); font-family: var(--arayuz); font-size: var(--olcek-0); }
.metin table { width: 100%; border-collapse: collapse; font: 400 var(--olcek-0)/1.5 var(--arayuz); }
.metin th, .metin td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--murekkep-cizgi); vertical-align: top; }
/* Tek sozcukluk uzun basliklar dar ekranda tasmasin: sigmayan sozcuk kirilir (heceleme sadece metin sayfalarinda). */
h1, h2, h3 { overflow-wrap: break-word; }
.metin :is(h1, h2, h3) { hyphens: auto; }
/* Uzun Almanca sozcukler (Vertragserfuellung) dar ekranda tabloyu tasirmasin: hecelenir, gerekirse sozcuk icinden kirilir. */
.metin table { table-layout: fixed; }
.metin th, .metin td { overflow-wrap: anywhere; hyphens: auto; }

/* ---------------------------------------------------------------- rehber sayfalari */
.rehber { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding: clamp(2rem, 5vw, 3.5rem) 0 4rem; }
.rehber-yan { position: sticky; top: 5.5rem; display: grid; gap: 1rem; padding: 1.25rem; border: 1px solid #5A4632; border-radius: 4px;
  background: linear-gradient(180deg, rgba(33, 23, 15, .94), rgba(18, 13, 9, .94)); box-shadow: inset 0 0 0 3px #120D09, inset 0 0 0 4px rgba(201, 161, 94, .2); }
.rehber-yan h2 { margin: 0; font: 700 var(--olcek-1)/1.2 var(--baslik); color: var(--kor); }
.rehber-yan ol { margin: 0; padding: 0 0 0 1.2rem; display: grid; gap: .45rem; font-size: var(--olcek-0); }
.rehber-yan a { text-decoration: none; color: var(--toz); }
.rehber-yan a:hover { color: var(--kemik); }
.rehber-metin { max-width: 46rem; }
.rehber-metin h1 { color: var(--kor); text-shadow: 0 2px 0 #000; }
.rehber-metin section { padding-top: .5rem; scroll-margin-top: 5.5rem; }
.rehber-metin h2 { color: var(--kor); padding-bottom: .4rem; border-bottom: 1px solid rgba(201, 161, 94, .25); }
.rehber-giris { font-size: 1.15rem; color: #E2D6BE !important; }
.rehber-liste { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.rehber-liste li { position: relative; padding-left: 1.6rem; }
.rehber-liste li::before { content: ''; position: absolute; left: .2rem; top: .62em; width: .5rem; height: .5rem; transform: rotate(45deg); background: var(--kor); box-shadow: 0 0 0 2px #120D09, 0 0 0 3px rgba(201, 161, 94, .5); }
.rehber-metin .tablo-kap { margin: 1rem 0; overflow-x: auto; border: 1px solid #4A3A2A; border-radius: 4px; }
.rehber-metin table th[scope="col"] { color: var(--kor); font-family: var(--arayuz); }
.rehber-metin table th[scope="row"] { font-weight: 600; color: var(--kemik); }
.rehber-diger { margin-top: 3rem; padding: 1.5rem; border: 1px solid #5A4632; border-radius: 4px; background: rgba(18, 13, 9, .6); font-family: var(--arayuz); }
.rehber-diger p { margin: 0 0 1rem; }
.rehber-diger .eylemler { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (max-width: 900px) {
  .rehber { grid-template-columns: minmax(0, 1fr); }
  .rehber-yan { position: static; }
}

/* ---------------------------------------------------------------- hata sayfasi */
.hata-sayfa { text-align: center; padding: clamp(3rem, 10vw, 7rem) 1rem; }
.hata-sayfa .kod { font: 700 clamp(4rem, 14vw, 8rem)/1 var(--baslik); color: var(--pirinc); }
.hata-sayfa h1 { font: 700 var(--olcek-4)/1.2 var(--baslik); margin: .5rem 0; }
.hata-sayfa p { color: var(--toz); max-width: 30rem; margin: 0 auto 1.75rem; }

/* ---------------------------------------------------------------- dar ekran */
@media (max-width: 900px) {
  .kahraman .kap { grid-template-columns: minmax(0, 1fr); }
  .ejderha-sahne { order: -1; margin: -1rem auto -1.5rem; }
  .ejderha-kafa { width: min(76vw, 340px); }
  .kurallar, .siniflar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .adimlar { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .adimlar::before { display: none; }
  .adimlar li + li { padding-top: 1.5rem; border-top: 1px dashed rgba(78, 36, 16, .35); }
  .alt .kap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .alt .kap > :first-child { grid-column: 1 / -1; }
}
/* Ust menu baglantilari genis ekran disinda menu dugmesine toplanir: hesap dugmeleriyle ayni satira sigmayinca tasmasin. */
@media (max-width: 1200px) {
  .menu-dugme { display: block; }
  .ust nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: .5rem 1rem 1rem; background: var(--komur); border-bottom: 1px solid var(--murekkep-cizgi); border-left: 0; display: none; }
  .ust nav.acik { display: flex; }
  .ust nav a { padding: .8rem .25rem; border-radius: 0; border-bottom: 1px solid var(--murekkep-cizgi); font-size: 1rem; }
  .ust nav a::after { display: none; }
  .ust nav a[aria-current] { color: var(--kor); }
  .ust-sag { margin-left: auto; }
}
@media (max-width: 760px) {
  .ust-sag .dugme:not(.ana) { display: none; }
  .ust .kap { gap: .75rem; }
  .marka span { display: none; }
  .harita { padding: 1.2rem 0 0 1.2rem; }
  .harita-sutun { left: 1.2rem; height: 1.2rem; font-size: .6rem; }
  .harita-satir { top: 1.2rem; width: 1.2rem; font-size: .6rem; }
}
/* Cok dar telefonda (320 px) uzun dugme metinleri (Almanca "Konto erstellen") ust menuden tasmasin. */
@media (max-width: 360px) {
  .ust .kap { gap: .4rem; }
  .ust-sag { gap: .3rem; }
  .ust-sag .dugme.ana { --y: 15px; padding-inline: calc(var(--y) + .15rem); font-size: .8rem; }
  .dil-sec summary { padding: .4rem .3rem; }
}
@media (max-width: 600px) {
  .kurallar { grid-template-columns: minmax(0, 1fr); }
  .kural { grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 1rem; padding: 1.25rem 1.1rem; }
  .kural .rozet-ikon { grid-row: 1 / span 2; margin: 0; }
  .siniflar { gap: .6rem; }
  .siniflar li { padding: .85rem .85rem .9rem; }
  .muhur { width: 4.4rem; height: 4.4rem; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
/* Otomatik testler (Playwright) ekran goruntusunu hareketsiz son halde alir: site.js navigator.webdriver gorunce ekler. */
html.otomasyon *, html.otomasyon *::before, html.otomasyon *::after { transition: none !important; animation: none !important; }

/* ---------------------------------------------------------------- yonetim */
/* Komuta masasi: ustte ince bir bronz serit, solda menzil haritasi gibi gruplu menu (madalyon ikonlar, muhur rozetler),
   sagda sayfa. Kartlar oyunun bronz levha dilindedir: ince pirinc cizgi, ic golge, Cinzel basliklar. */
.panel-ust .kap { width: auto; margin-inline: clamp(1rem, 2vw, 1.5rem); }
.panel-etiket { padding: .25rem .6rem; border: 1px solid rgba(201, 161, 94, .4); border-radius: 4px; font: 700 .72rem/1 var(--baslik); letter-spacing: .14em; text-transform: uppercase; color: var(--kor); }
.panel-geri { display: inline-flex; align-items: center; gap: .35rem; margin-right: auto; padding: .4rem .55rem; border-radius: 6px; color: var(--toz); font-size: var(--olcek-0); font-weight: 500; text-decoration: none; }
.panel-geri:hover, .panel-geri:focus-visible { color: var(--kemik); background: var(--is); }
@media (max-width: 760px) { .panel-geri span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
.ikon.ters { transform: rotate(180deg); }

.yonetim { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); align-content: start; min-height: calc(100vh - 4.25rem); }
.yonetim-yan { position: sticky; top: 4.25rem; align-self: start; max-height: calc(100vh - 4.25rem); overflow-y: auto; display: grid; align-content: start; gap: 1.35rem; padding: 1.5rem .9rem 2rem;
  border-right: 1px solid #3A2C1F; background: linear-gradient(180deg, rgba(30, 22, 15, .92), rgba(15, 11, 8, .92)); box-shadow: inset -1px 0 0 rgba(201, 161, 94, .1); scrollbar-width: thin; }
.yan-grup { display: grid; gap: .15rem; }
.yan-baslik { margin: 0 0 .35rem; padding: 0 .75rem; font: 700 .7rem/1 var(--baslik); letter-spacing: .16em; text-transform: uppercase; color: rgba(201, 161, 94, .75); }
.yonetim-yan a { position: relative; display: flex; align-items: center; gap: .7rem; padding: .45rem .75rem .45rem .5rem; border-radius: 6px; color: var(--toz); font-weight: 500; text-decoration: none; transition: background .2s, color .2s; }
.yan-ikon { display: grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%; color: var(--toz);
  background: radial-gradient(circle at 35% 30%, #2C2117, #120D09 75%); box-shadow: 0 0 0 1px rgba(201, 161, 94, .22); transition: color .2s, box-shadow .2s; }
.yan-ikon .ikon { width: 1rem; height: 1rem; }
.yan-ad { flex: 1; min-width: 0; }
.yonetim-yan a:hover, .yonetim-yan a:focus-visible { background: rgba(201, 161, 94, .07); color: var(--kemik); outline: none; }
.yonetim-yan a:focus-visible { box-shadow: 0 0 0 2px var(--pirinc); }
.yonetim-yan a:hover .yan-ikon { color: var(--kor); }
.yonetim-yan a[aria-current="page"] { background: linear-gradient(90deg, rgba(201, 161, 94, .16), rgba(201, 161, 94, .03)); color: var(--kemik); }
.yonetim-yan a[aria-current="page"]::before { content: ''; position: absolute; left: -.9rem; top: .4rem; bottom: .4rem; width: 3px; border-radius: 0 2px 2px 0; background: var(--kor); box-shadow: 0 0 10px rgba(233, 194, 122, .5); }
.yonetim-yan a[aria-current="page"] .yan-ikon { color: #FFE2A6; box-shadow: 0 0 0 1px var(--kor), 0 0 12px rgba(233, 160, 60, .3); }
.yan-rozet { min-width: 1.45rem; padding: .18rem .42rem; border-radius: 999px; background: radial-gradient(circle at 35% 30%, #C84A34, #7E1C12); color: #FFE3D6; font: 700 .72rem/1.1 var(--arayuz); text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 1px rgba(40, 6, 2, .7); }
.yan-rozet.uyari { background: radial-gradient(circle at 35% 30%, #F0C66A, #A9761F); color: #1E1408; }

.yonetim-icerik { min-width: 0; padding: clamp(1.25rem, 3vw, 2.5rem) clamp(1rem, 3.5vw, 3rem) 4rem; }
.yonetim-icerik > * { max-width: 76rem; }
.yonetim-icerik > .bildirimler { margin: 0 0 1.5rem; }
.yonetim-icerik h1 { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 .5rem; font: 700 var(--olcek-4)/1.15 var(--baslik); color: var(--kemik); }
.yonetim-icerik h1 + :not(.aciklama) { margin-top: 1.5rem; }
.yonetim-icerik .aciklama { margin: 0 0 1.75rem; color: var(--toz); max-width: 68ch; }
.yonetim-icerik h2 { display: flex; align-items: center; gap: .6rem; margin: 2.25rem 0 .9rem; font: 700 var(--olcek-2)/1.2 var(--baslik); letter-spacing: .02em; color: var(--kor); }
.yonetim-icerik > h2::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(201, 161, 94, .35), transparent); }
.yonetim-icerik .soluk { color: var(--toz); font-size: var(--olcek-0); }
.yonetim-icerik .not { color: var(--toz); font-size: var(--olcek-0); }
.yonetim-icerik code { padding: .1rem .35rem; border-radius: 4px; background: #120D09; border: 1px solid var(--murekkep-cizgi); font: 600 .85rem/1.3 ui-monospace, Consolas, monospace; letter-spacing: .04em; color: var(--kor); }

/* Ortak bronz levha yuzeyi */
.yonetim .ayar-grup, .yonetim .sayac, .yonetim .tablo-kap, .yonetim .gb-kayit, .yonetim .durum-satir, .yonetim .goc-listesi {
  border: 1px solid #4A3826; border-radius: 4px; background: linear-gradient(180deg, rgba(31, 22, 15, .95), rgba(16, 12, 9, .95));
  box-shadow: inset 0 0 0 3px #120D09, inset 0 0 0 4px rgba(201, 161, 94, .13); }

/* Sayaclar: madalyon degil, pirinc rakamli kucuk levhalar */
.sayaclar { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr)); gap: .9rem; }
.yonetim .sayac { position: relative; display: grid; gap: .35rem; align-content: start; padding: 1.1rem 1.2rem 1.15rem; overflow: hidden; }
.yonetim .sayac::before { content: ''; position: absolute; inset: 0; background: radial-gradient(260px 90px at 0% 0%, rgba(201, 161, 94, .12), transparent 70%); pointer-events: none; }
.yonetim .sayac strong { font: 700 2.1rem/1.05 var(--baslik); font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #FBEFD2, #D9AE62); -webkit-background-clip: text; background-clip: text; color: transparent; }
.yonetim .sayac span { color: var(--toz); font-size: var(--olcek-0); line-height: 1.4; }
.yonetim .sayac a { color: var(--kemik); }
@media (forced-colors: active) { .yonetim .sayac strong { color: CanvasText; background: none; } }

/* Kurulum ve sunucu durumu: iki sutunlu satirlar, solda renkli isaret */
.yonetim .denetim-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: .6rem; }
.yonetim .denetim-listesi li { gap: .75rem; padding: .7rem .9rem; border: 1px solid var(--murekkep-cizgi); border-left: 3px solid #5A4632; border-radius: 4px; background: rgba(18, 13, 9, .6); }
.yonetim .denetim-listesi li:has(.ikon.iyi) { border-left-color: var(--iyi); }
.yonetim .denetim-listesi li:has(.ikon.kotu) { border-left-color: var(--uyari); background: rgba(224, 176, 78, .05); }
.yonetim .denetim-listesi .ikon { color: var(--toz); }
.yonetim .denetim-listesi.tek { grid-template-columns: minmax(0, 1fr); }
.denetim-listesi { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.denetim-listesi li { display: flex; gap: .6rem; align-items: center; }
.denetim-listesi .ikon.iyi { color: var(--iyi); }
.denetim-listesi .ikon.kotu { color: var(--uyari); }

/* Ayar gruplari: genis ekranda solda baslik ve aciklama, sagda alanlar */
.ayar-grup { display: grid; gap: 1rem; padding: 1.5rem; border: 1px solid #5A4632; border-radius: 4px; background: linear-gradient(180deg, rgba(33, 23, 15, .94), rgba(18, 13, 9, .94)); box-shadow: inset 0 0 0 3px #120D09, inset 0 0 0 4px rgba(201, 161, 94, .2); margin-bottom: 1.25rem; }
.ayar-grup h2 { margin: 0; font-size: var(--olcek-2); }
.ayar-grup p.not { margin: -.5rem 0 0; color: var(--toz); font-size: var(--olcek-0); }
.yonetim .ayar-grup { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1.25rem 2.25rem; padding: 1.6rem 1.75rem; margin-bottom: 1rem; }
.yonetim .grup-bas { display: grid; align-content: start; gap: .5rem; }
.yonetim .grup-bas h2 { margin: 0; color: var(--kemik); }
.yonetim .grup-bas p.not, .yonetim .grup-bas .not { margin: 0; line-height: 1.5; overflow-wrap: anywhere; }
.yonetim .grup-govde { display: grid; gap: 1rem; align-content: start; min-width: 0; }
/* Yan yana iki alandan birinin aciklamasi olunca digerinin kutusu uzamasin. */
.yonetim .ikili { align-items: start; }
.yonetim .alan { align-content: start; }
.ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
/* Uzun formlarin kaydet dugmesi ekranin altinda durur, kartlarin arasinda kaybolmaz. */
.kaydet-cubugu { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 1.25rem; margin: 1.25rem 0 0; padding: .85rem 1.25rem;
  border: 1px solid #5A4632; border-radius: 4px 4px 0 0; background: rgba(18, 13, 9, .92); backdrop-filter: blur(8px); box-shadow: 0 -12px 30px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(201, 161, 94, .25); }
.kaydet-cubugu .not { margin: 0 auto 0 0; }

/* Arama ve suzgec cubugu */
.arama { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; max-width: 34rem; }
.arama input, .arama select { flex: 1 1 14rem; width: auto; }
.sayfalama { display: flex; align-items: center; gap: .5rem; margin-top: 1.25rem; }
.sekme-baglantilari { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .9rem; }
.sekme-baglantilari a { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .85rem; border: 1px solid var(--murekkep-cizgi); border-radius: 999px; text-decoration: none; color: var(--toz); font-size: var(--olcek-0); font-weight: 500; transition: border-color .2s, color .2s, background .2s; }
.sekme-baglantilari a:hover, .sekme-baglantilari a:focus-visible { border-color: rgba(201, 161, 94, .55); color: var(--kemik); outline: none; }
.sekme-baglantilari a[aria-current="page"] { border-color: var(--pirinc); background: rgba(201, 161, 94, .12); color: var(--kemik); }
.sekme-baglantilari .ikon { width: 1rem; height: 1rem; }
.islem-satiri { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Tablolar */
.tablo-kap { overflow-x: auto; border: 1px solid var(--murekkep-cizgi); border-radius: 12px; }
table.tablo { width: 100%; border-collapse: collapse; font-size: var(--olcek-0); }
.tablo th, .tablo td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--murekkep-cizgi); vertical-align: middle; white-space: nowrap; }
.tablo th { color: var(--toz); font-weight: 600; background: var(--is); }
.tablo tr:last-child td { border-bottom: 0; }
.tablo td.kir { white-space: normal; word-break: break-word; max-width: 28rem; }
.tablo form { display: inline-flex; gap: .35rem; align-items: center; }
.tablo select { min-height: 34px; padding: .25rem .5rem; width: auto; }
.yonetim .tablo-kap { overflow: visible; }
.yonetim .tablo th { padding: .8rem .9rem; background: rgba(201, 161, 94, .06); border-bottom: 1px solid #4A3826; font: 700 .72rem/1.2 var(--baslik); letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 194, 122, .85); }
.yonetim .tablo td { padding: .75rem .9rem; border-bottom-color: rgba(58, 45, 33, .7); }
.yonetim .tablo tbody tr { transition: background .15s; }
.yonetim .tablo tbody tr:hover { background: rgba(201, 161, 94, .04); }
.yonetim .tablo input[type=number] { min-height: 36px; }
.yonetim .tablo .bos td { padding: 1.5rem; color: var(--toz); text-align: center; }
/* Icerik alani dar kalinca (telefon, tablet, kucuk dizustu) satirlar karta donusur: her hucrenin basinda kendi sutun adi yazar.
   Esik ekran degil icerik genisligidir: yan menu yer kapladigi icin ekran genisligi tek basina yetmez. */
.yonetim-icerik { container: panel-icerik / inline-size; }
@container panel-icerik (max-width: 820px) {
  .yonetim .tablo.kartli thead { display: none; }
  .yonetim .tablo.kartli, .yonetim .tablo.kartli tbody, .yonetim .tablo.kartli tr, .yonetim .tablo.kartli td { display: block; width: 100%; }
  .yonetim .tablo.kartli tr { padding: .6rem 0; border-bottom: 1px solid #4A3826; }
  .yonetim .tablo.kartli tr:last-child { border-bottom: 0; }
  .yonetim .tablo.kartli td { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .75rem; align-items: center; justify-items: start; padding: .4rem 1rem; border: 0; white-space: normal; overflow-wrap: anywhere; }
  .yonetim .tablo.kartli td::before { content: attr(data-etiket); font: 700 .68rem/1.3 var(--baslik); letter-spacing: .1em; text-transform: uppercase; color: rgba(233, 194, 122, .75); }
  .yonetim .tablo.kartli td.kir { max-width: none; }
  .yonetim .tablo.kartli .bos td { display: block; }
  .yonetim .tablo.kartli .bos td::before { content: none; }
  /* Yonet paneli genis bir is alani ister: etiket ustte, panel satirin tam genisliginde. */
  .yonetim .tablo.kartli td:has(.yonet) { grid-template-columns: minmax(0, 1fr); justify-items: stretch; }
  .yonetim .tablo.kartli td:has(.yonet)::before { display: none; }
  .yonetim .tablo.kartli td:has(.yonet) .yonet > summary { width: 100%; justify-content: center; }
  .sayaclar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
  .yonetim .sayac { padding: .9rem 1rem; }
  .yonetim .sayac strong { font-size: 1.7rem; }
}
@media (max-width: 420px) { .yonet-panel .satir { grid-template-columns: minmax(0, 1fr); } }

/* Hap etiketleri: rol, durum */
.hap { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .55rem; border: 1px solid var(--murekkep-cizgi); border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; color: var(--toz); }
.hap .ikon { width: .9rem; height: .9rem; }
.hap.iyi { border-color: rgba(116, 177, 131, .45); color: var(--iyi); }
.hap.uyari { border-color: rgba(224, 176, 78, .45); color: var(--uyari); }
.hap.kritik { border-color: rgba(229, 103, 79, .5); color: #F2A08F; }
.hap.altin { border-color: rgba(233, 194, 122, .55); color: var(--kor); background: rgba(201, 161, 94, .08); }

/* Kullanici hucresi: bas harf madalyonu, ad, e-posta ve isaretler */
.kisi { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.kisi-madalya { display: grid; place-items: center; flex: none; width: 2.3rem; height: 2.3rem; border-radius: 50%; font: 700 1rem/1 var(--baslik); color: #2A1B0C;
  background: radial-gradient(circle at 35% 30%, #F7E2B0, #C9A15E 55%, #8A6532); box-shadow: 0 0 0 2px #120D09, 0 0 0 3px rgba(233, 194, 122, .35); }
.kisi-madalya.soluk-madalya { filter: grayscale(.8) brightness(.7); }
.kisi-bilgi { display: grid; gap: .1rem; min-width: 0; }
.kisi-bilgi strong { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-weight: 600; color: var(--kemik); }
.kisi-bilgi span { color: var(--toz); font-size: .8rem; overflow-wrap: anywhere; }
.kisi-bilgi .hap { font-size: .7rem; padding: .08rem .45rem; }
.hak-form { display: inline-flex; align-items: center; gap: .35rem; }
.hak-form input { width: 4.25rem !important; padding: .3rem .5rem; text-align: center; }
.ikon-dugme { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; padding: 0; border: 1px solid var(--murekkep-cizgi); border-radius: 6px; background: #120D09; color: var(--toz); cursor: pointer; transition: color .2s, border-color .2s; }
.ikon-dugme:hover, .ikon-dugme:focus-visible { color: var(--kor); border-color: var(--pirinc); outline: none; }
/* Yonet acilir paneli: rol, durum ve dogrulama islemleri tek yerde. */
.yonet { position: relative; display: inline-block; }
.yonet > summary { list-style: none; display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .75rem; border: 1px solid #5A4632; border-radius: 6px; background: #17110D; color: var(--kemik); font-size: var(--olcek-0); font-weight: 600; cursor: pointer; }
.yonet > summary::-webkit-details-marker { display: none; }
.yonet > summary::after { content: ''; width: .4rem; height: .4rem; margin-left: .15rem; border-right: 2px solid var(--pirinc); border-bottom: 2px solid var(--pirinc); transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.yonet[open] > summary { border-color: var(--pirinc); }
.yonet[open] > summary::after { transform: rotate(-135deg) translateY(-1px); }
.yonet-panel { position: absolute; right: 0; top: calc(100% + .4rem); z-index: 10; display: grid; gap: 1rem; width: min(21rem, 86vw); padding: 1.1rem 1.15rem; white-space: normal;
  border: 1px solid #5A4632; border-radius: 6px; background: linear-gradient(180deg, #21170F, #130E0A); box-shadow: inset 0 0 0 3px #120D09, inset 0 0 0 4px rgba(201, 161, 94, .2), 0 22px 44px rgba(0, 0, 0, .6);
  animation: panel-ac .18s ease-out; }
@keyframes panel-ac { from { opacity: 0; translate: 0 -4px; } }
.yonet-panel form { display: grid !important; gap: .55rem; }
.yonet-panel .etiket { font: 700 .7rem/1.2 var(--baslik); letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 194, 122, .8); }
.yonet-panel select, .yonet-panel input { width: 100% !important; }
.yonet-panel .satir { display: grid; grid-template-columns: minmax(0, 1fr) 6.5rem; gap: .5rem; }
.yonet-panel small { color: var(--toz); font-size: .76rem; line-height: 1.45; }
.yonet-panel .dugmeler { display: flex; flex-wrap: wrap; gap: .4rem; }
.yonet-panel hr { width: 100%; margin: 0; border: 0; border-top: 1px dashed var(--murekkep-cizgi); }
@container panel-icerik (max-width: 820px) { .yonet { display: block; } .yonet-panel { position: static; width: 100%; margin-top: .5rem; } }

/* Goc listesi: uygulananlar sirayla, bekleyenler uyariyla */
.yonetim .goc-listesi { list-style: none; margin: 0; padding: .4rem 0; display: grid; }
.goc-listesi li { display: flex; align-items: center; gap: .75rem; padding: .55rem 1.1rem; font: 500 .9rem/1.3 ui-monospace, Consolas, monospace; color: #D6CDBB; }
.goc-listesi li + li { border-top: 1px solid rgba(58, 45, 33, .6); }
.goc-listesi .ikon.iyi { color: var(--iyi); }
.goc-listesi .ikon.kotu { color: var(--uyari); }

.yonetim-icerik code.supheli { border-color: rgba(224, 176, 78, .5); color: var(--uyari); }

/* Bos durum */
.bos-durum { display: grid; justify-items: center; gap: .5rem; padding: 2.25rem 1rem; border: 1px dashed var(--murekkep-cizgi); border-radius: 4px; color: var(--toz); text-align: center; }
.bos-durum .ikon { width: 1.8rem; height: 1.8rem; color: rgba(201, 161, 94, .6); }

@media (max-width: 1100px) { .yonetim .ayar-grup { grid-template-columns: minmax(0, 1fr); gap: 1rem; } }
@media (max-width: 860px) {
  .yonetim { grid-template-columns: minmax(0, 1fr); }
  /* Telefonda menu ust kenarda yatay kaydirilan bir serit olur, grup basliklari gizlenir. */
  .yonetim-yan { top: 4.25rem; z-index: 6; max-height: none; display: flex; gap: .3rem; padding: .5rem .75rem; overflow-x: auto; border-right: 0; border-bottom: 1px solid #3A2C1F; scrollbar-width: none; }
  .yonetim-yan::-webkit-scrollbar { display: none; }
  .yan-grup { display: contents; }
  .yan-baslik { display: none; }
  .yonetim-yan a { flex: none; padding: .3rem .7rem .3rem .3rem; border: 1px solid var(--murekkep-cizgi); border-radius: 999px; font-size: var(--olcek-0); }
  .yonetim-yan a[aria-current="page"] { border-color: var(--pirinc); }
  .yonetim-yan a[aria-current="page"]::before { display: none; }
  .yan-ikon { width: 1.7rem; height: 1.7rem; }
  .panel-etiket { display: none; }
  .ikili { grid-template-columns: minmax(0, 1fr); }
}

.gizli-kod { display: flex; flex-wrap: wrap; gap: .2em .6em; }
.gizli-kod span { white-space: nowrap; }
.kurulum form.dikey, .denetim-listesi + form, .denetim-listesi + .bildirim { margin-top: 1.5rem; }

#ana-menu .sadece-mobil { display: none; }
@media (max-width: 760px) { #ana-menu .sadece-mobil { display: block; } }

.kod-kucuk { width: 6.5rem; padding: .35rem .6rem; font-size: .9rem; }

/* cerceve:bas (araclar/cerceve.py uretir) */
:root {
  --cerceve: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cdefs%3E%3ClinearGradient id=%22d%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2321160F%22/%3E%3Cstop offset=%221%22 stop-color=%22%23120C08%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23C9A15E%22/%3E%3Cstop offset=%221%22 stop-color=%22%237A5A34%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M20 1H140L158.5 40L140 79H20L1.5 40Z%22 fill=%22url%28%23d%29%22 stroke=%22url%28%23k%29%22 stroke-width=%222%22/%3E%3Cpath d=%22M23 6.5H137L152 40L137 73.5H23L8 40Z%22 fill=%22none%22 stroke=%22%23C9A15E%22 stroke-opacity=%220.45%22 stroke-width=%221%22/%3E%3Cpath d=%22M1.5 40L7 34L12.5 40L7 46Z M158.5 40L153 34L147.5 40L153 46Z%22 fill=%22%23E9C27A%22/%3E%3C/svg%3E");
  --cerceve-uzer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cdefs%3E%3ClinearGradient id=%22d%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233A2716%22/%3E%3Cstop offset=%221%22 stop-color=%22%231E140C%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23F6D896%22/%3E%3Cstop offset=%221%22 stop-color=%22%23C99A5C%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M20 1H140L158.5 40L140 79H20L1.5 40Z%22 fill=%22url%28%23d%29%22 stroke=%22url%28%23k%29%22 stroke-width=%222%22/%3E%3Cpath d=%22M23 6.5H137L152 40L137 73.5H23L8 40Z%22 fill=%22none%22 stroke=%22%23F6D896%22 stroke-opacity=%220.7%22 stroke-width=%221%22/%3E%3Cpath d=%22M1.5 40L7 34L12.5 40L7 46Z M158.5 40L153 34L147.5 40L153 46Z%22 fill=%22%23FFF0C8%22/%3E%3C/svg%3E");
  --cerceve-ana: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cdefs%3E%3ClinearGradient id=%22d%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23F0CD86%22/%3E%3Cstop offset=%221%22 stop-color=%22%23B8863F%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFF1C8%22/%3E%3Cstop offset=%221%22 stop-color=%22%238C6A3C%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M20 1H140L158.5 40L140 79H20L1.5 40Z%22 fill=%22url%28%23d%29%22 stroke=%22url%28%23k%29%22 stroke-width=%222%22/%3E%3Cpath d=%22M23 6.5H137L152 40L137 73.5H23L8 40Z%22 fill=%22none%22 stroke=%22%23FFF1C8%22 stroke-opacity=%220.8%22 stroke-width=%221%22/%3E%3Cpath d=%22M1.5 40L7 34L12.5 40L7 46Z M158.5 40L153 34L147.5 40L153 46Z%22 fill=%22%23FFF6DC%22/%3E%3C/svg%3E");
  --cerceve-ana-uzer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cdefs%3E%3ClinearGradient id=%22d%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23F8DDA0%22/%3E%3Cstop offset=%221%22 stop-color=%22%23CB9A4E%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFFFFF%22/%3E%3Cstop offset=%221%22 stop-color=%22%239C7440%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M20 1H140L158.5 40L140 79H20L1.5 40Z%22 fill=%22url%28%23d%29%22 stroke=%22url%28%23k%29%22 stroke-width=%222%22/%3E%3Cpath d=%22M23 6.5H137L152 40L137 73.5H23L8 40Z%22 fill=%22none%22 stroke=%22%23FFFFFF%22 stroke-opacity=%220.9%22 stroke-width=%221%22/%3E%3Cpath d=%22M1.5 40L7 34L12.5 40L7 46Z M158.5 40L153 34L147.5 40L153 46Z%22 fill=%22%23FFFFFF%22/%3E%3C/svg%3E");
  --cerceve-tehlike: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cdefs%3E%3ClinearGradient id=%22d%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%232A100C%22/%3E%3Cstop offset=%221%22 stop-color=%22%23160806%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23E07A5F%22/%3E%3Cstop offset=%221%22 stop-color=%22%238A3424%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M20 1H140L158.5 40L140 79H20L1.5 40Z%22 fill=%22url%28%23d%29%22 stroke=%22url%28%23k%29%22 stroke-width=%222%22/%3E%3Cpath d=%22M23 6.5H137L152 40L137 73.5H23L8 40Z%22 fill=%22none%22 stroke=%22%23E07A5F%22 stroke-opacity=%220.45%22 stroke-width=%221%22/%3E%3Cpath d=%22M1.5 40L7 34L12.5 40L7 46Z M158.5 40L153 34L147.5 40L153 46Z%22 fill=%22%23F2A08A%22/%3E%3C/svg%3E");
  --cerceve-tehlike-uzer: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cdefs%3E%3ClinearGradient id=%22d%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%2340160F%22/%3E%3Cstop offset=%221%22 stop-color=%22%23200A07%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23FFB19C%22/%3E%3Cstop offset=%221%22 stop-color=%22%23C0503A%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M20 1H140L158.5 40L140 79H20L1.5 40Z%22 fill=%22url%28%23d%29%22 stroke=%22url%28%23k%29%22 stroke-width=%222%22/%3E%3Cpath d=%22M23 6.5H137L152 40L137 73.5H23L8 40Z%22 fill=%22none%22 stroke=%22%23FFB19C%22 stroke-opacity=%220.7%22 stroke-width=%221%22/%3E%3Cpath d=%22M1.5 40L7 34L12.5 40L7 46Z M158.5 40L153 34L147.5 40L153 46Z%22 fill=%22%23FFD2C4%22/%3E%3C/svg%3E");
  --cerceve-secili: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22160%22 height=%2280%22 viewBox=%220 0 160 80%22%3E%3Cdefs%3E%3ClinearGradient id=%22d%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%233A2716%22/%3E%3Cstop offset=%221%22 stop-color=%22%231E140C%22/%3E%3C/linearGradient%3E%3ClinearGradient id=%22k%22 x1=%220%22 y1=%220%22 x2=%220%22 y2=%221%22%3E%3Cstop offset=%220%22 stop-color=%22%23F6D896%22/%3E%3Cstop offset=%221%22 stop-color=%22%23E9C27A%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d=%22M20 1H140L158.5 40L140 79H20L1.5 40Z%22 fill=%22url%28%23d%29%22 stroke=%22url%28%23k%29%22 stroke-width=%222%22/%3E%3Cpath d=%22M23 6.5H137L152 40L137 73.5H23L8 40Z%22 fill=%22none%22 stroke=%22%23F6D896%22 stroke-opacity=%220.9%22 stroke-width=%221%22/%3E%3Cpath d=%22M1.5 40L7 34L12.5 40L7 46Z M158.5 40L153 34L147.5 40L153 46Z%22 fill=%22%23FFF0C8%22/%3E%3C/svg%3E");
}
/* cerceve:son */

/* ---------------------------------------------------------------- kapali beta */
/* Beta isareti markanin yaninda durur: pirinc yerine patina, bronz levhaya islenmis kucuk bir damga gibi. */
.marka .beta-damga { display: inline-block; align-self: flex-start; margin-top: .1rem; padding: .2rem .42rem .18rem; border: 1px solid rgba(95, 168, 156, .55);
  border-radius: 4px; font: 600 .62rem/1 var(--arayuz); letter-spacing: .06em; color: var(--patina); }
@media (max-width: 760px) { .marka .beta-damga { display: inline-block; } }
.beta-serit { display: flex; align-items: flex-start; gap: .55rem; margin: 0 0 1.4rem; max-width: 32rem; font-size: var(--olcek-0); color: var(--toz); }
.beta-serit .ikon { color: var(--patina); margin-top: .15rem; }
.beta-serit strong { color: var(--kemik); font-weight: 600; }
.kahraman .vitrin { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 1.5rem 0 0; font-size: var(--olcek-0); color: var(--toz); }
.vitrin span { display: inline-flex; align-items: baseline; gap: .35rem; }
.vitrin strong { font: 700 var(--olcek-2)/1 var(--arayuz); color: var(--kemik); font-variant-numeric: tabular-nums; }
/* Durum noktasi yok: sayilarin basinda sitenin kendi ikonlari durur. */
.vitrin .ikon { width: 1.05rem; height: 1.05rem; align-self: center; color: var(--pirinc); }
.beta-not { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1.25rem; padding: .85rem 1rem; border: 1px solid rgba(95, 168, 156, .35); border-radius: var(--kose);
  background: rgba(95, 168, 156, .07); font-size: var(--olcek-0); }
.beta-not .ikon { color: var(--patina); margin-top: .2rem; }
.beta-not p { margin: 0; }

.davet-hak { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin: 0 0 .5rem; font-weight: 600; }
.davet-kod { font: 600 1rem/1.3 var(--arayuz); letter-spacing: .08em; font-variant-numeric: tabular-nums; color: var(--kor); }
.davet-islem { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.kopya-alani { width: min(100%, 22rem); font-size: var(--olcek-0); }
.eylemler-satir { display: flex; flex-wrap: wrap; gap: .5rem; }

.gb-tur { margin: 0; padding: 0; border: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; }
.gb-tur legend { margin-bottom: .5rem; font-weight: 600; }
.gb-secim { position: relative; }
.gb-secim input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.gb-secim span { display: flex; align-items: center; gap: .55rem; padding: .8rem .95rem; border: 1px solid var(--murekkep-cizgi); border-radius: var(--kose); background: var(--is); font-weight: 500; }
.gb-secim span .ikon { color: var(--toz); }
.gb-secim input:checked + span { border-color: var(--pirinc); background: var(--kul); }
.gb-secim input:checked + span .ikon { color: var(--kor); }
.gb-secim input:focus-visible + span { box-shadow: 0 0 0 3px var(--pirinc-soluk); }
.gb-gecmis { margin-top: 1.25rem; }
.gb-gecmis h2 { margin: 0 0 .5rem; font: 700 var(--olcek-2)/1.2 var(--baslik); }
.gb-gecmis li > span:first-child { display: block; }
.gb-gecmis .ikon { display: inline-block; vertical-align: -.15em; color: var(--toz); }
.gb-not { display: block; margin-top: .3rem; color: var(--kemik); font-size: var(--olcek-0); }
.gb-liste { display: grid; gap: 1rem; margin-top: 1rem; }
.gb-kayit header { display: grid; gap: .2rem; margin-bottom: .75rem; }
.gb-kayit h2 { margin: 0; display: flex; align-items: center; gap: .5rem; font: 700 var(--olcek-2)/1.25 var(--baslik); }
.gb-kayit h2 .ikon { color: var(--pirinc); }
.gb-metin { max-width: var(--metin-genislik); color: #D6CDBB; }
.gb-islem { display: grid; grid-template-columns: 12rem minmax(0, 1fr) auto; gap: .75rem; align-items: end; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--murekkep-cizgi); }
@media (max-width: 760px) { .gb-islem { grid-template-columns: minmax(0, 1fr); } }
/* Istemci hata kaydi: ustte gunluk sayi ve toplu silme, kayitta acilir yigin izi. */
.ih-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; }
.ih-ust p { margin: 0; }
/* Istatistik: huni satirlari pirinc cubuklu, tablolar kartli. */
.ist-bolum { margin-top: 1rem; }
.ist-bolum h2 { display: flex; align-items: center; gap: .5rem; margin: 0 0 1rem; font: 700 var(--olcek-2)/1.25 var(--baslik); }
.ist-bolum h2 .ikon { color: var(--pirinc); }
.ist-huni { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.ist-huni li { display: grid; grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr) 7rem; gap: 1rem; align-items: center; }
.ist-huni progress { width: 100%; height: .75rem; border: 1px solid rgba(201, 154, 74, .35); border-radius: 99px; background: rgba(0, 0, 0, .35); overflow: hidden; appearance: none; }
.ist-huni progress::-webkit-progress-bar { background: rgba(0, 0, 0, .35); }
.ist-huni progress::-webkit-progress-value { background: linear-gradient(90deg, #A87A34, #E9C27A); border-radius: 99px; }
.ist-huni progress::-moz-progress-bar { background: linear-gradient(90deg, #A87A34, #E9C27A); border-radius: 99px; }
.ist-sayi { text-align: right; font-variant-numeric: tabular-nums; }
.ist-bolum .tablo th { white-space: normal; vertical-align: bottom; }
.ist-bolum .tablo td { font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .ist-huni li { grid-template-columns: minmax(0, 1fr) auto; } .ist-huni progress { grid-column: 1 / -1; grid-row: 2; } }
.ih-toplu { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.ih-kayit { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem 1rem; padding-block: 1rem; }
.ih-kayit > * { grid-column: 1; }
.ih-kayit header { margin-bottom: .25rem; }
/* Hata metni kod gibi okunur: baslik yazi tipi ve buyuk harf yok. */
.ih-kayit h2 { font: 600 1rem/1.45 var(--arayuz); text-transform: none; letter-spacing: 0; }
.ih-kayit p { margin: 0; font-size: .8125rem; }
.ih-islem { grid-column: 2; grid-row: 1; align-self: start; }
@media (max-width: 760px) { .ih-kayit { grid-template-columns: minmax(0, 1fr); } .ih-islem { grid-column: 1; grid-row: auto; } }
.gb-kayit details { margin: .5rem 0; }
.gb-kayit details summary { cursor: pointer; color: var(--pirinc); }
.gb-kayit pre { margin: .5rem 0 0; padding: .75rem; max-height: 16rem; overflow: auto; border-radius: 8px; background: var(--zemin, #14120F); font-size: .8125rem; line-height: 1.5; white-space: pre-wrap; }
.gb-kayit .kir { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- parsomen
   Bolum basliklari, rehber girisleri ve yasal metinlerin acilisi asili bir parsomene yazilir: ustte ve altta
   sarili parsomen rulosu ve topuzlu merdane, arada yaslanmis kagit. Doku, kenar, rulo ve topuz gorselleri
   araclar/parsomen-uret.py ile uretilir (toplam yaklasik 81 KB), gerisi CSS. */
.parsomen { --merdane: 30px; --uc: 42px; --kenar: 72px; position: relative; padding: calc(var(--merdane) - 10px) 0; margin: 0 var(--uc); filter: drop-shadow(0 16px 22px rgba(0, 0, 0, .55)); }
/* Merdane: ustte ve altta sarili parsomen rulosu, iki ucunda tornada cekilmis ceviz topuz ve pirinc bilezik.
   Rulo ve topuz gorselleri araclar/parsomen-uret.py ile aydinlatilmis olarak cizilir. Rulo ustte durur, merdanenin
   ucu onun altina girer. Topuzlar kagidin disina tasar (--uc). */
.parsomen::before, .parsomen::after { content: ''; position: absolute; left: calc(var(--uc) * -1); right: calc(var(--uc) * -1); height: var(--merdane); z-index: 1;
  background:
    url(gorsel/parsomen-rulo-ust.webp) center / calc(100% - var(--uc) * 2 + 8px) 100% no-repeat,
    url(gorsel/parsomen-uc-sol.webp) left center / calc(var(--merdane) * 2) 100% no-repeat,
    url(gorsel/parsomen-uc-sag.webp) right center / calc(var(--merdane) * 2) 100% no-repeat;
  filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .5)); }
.parsomen::after { background-image: url(gorsel/parsomen-rulo-alt.webp), url(gorsel/parsomen-uc-sol.webp), url(gorsel/parsomen-uc-sag.webp); }
.parsomen::before { top: 0; }
/* Acilma: --kapali 1 iken kagit ust merdaneye sarili, 0 iken tamamen acik. Alt merdane kagidin ucunu tasir. */
.parsomen { --kapali: 0; }
.parsomen::after { bottom: calc(var(--kapali) * (100% - var(--merdane) * 2 + 20px)); }
.parsomen > .parsomen-ic { -webkit-mask: linear-gradient(#000 0 0) top / 100% calc((1 - var(--kapali)) * 100% + 2px) no-repeat; mask: linear-gradient(#000 0 0) top / 100% calc((1 - var(--kapali)) * 100% + 2px) no-repeat; }
/* Kagit: kendi uretilmis dokumuz (araclar/parsomen-uret.py). Yirtik kenar bir maskedir, kenar boyunca yanik ve
   yaslanmis koyulasma ayri bir katmandir. Ikisi de dikeyde dikissiz tekrar eder, uzun sayfada da kenar duzensiz kalir. */
.parsomen-ic { position: relative; isolation: isolate; padding: clamp(1.35rem, 3vw, 2rem) clamp(1.3rem, 3.2vw, 2.1rem); color: #3B2814; }
.parsomen-ic::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    url(gorsel/parsomen-ton-sol.webp) left top / var(--kenar) 1024px repeat-y,
    url(gorsel/parsomen-ton-sag.webp) right top / var(--kenar) 1024px repeat-y,
    linear-gradient(180deg, rgba(52, 28, 8, .55), rgba(52, 28, 8, 0) 26px, rgba(52, 28, 8, 0) calc(100% - 26px), rgba(52, 28, 8, .55)),
    radial-gradient(120% 90% at 50% 45%, rgba(255, 246, 222, .18), transparent 55%, rgba(110, 62, 20, .2)),
    #E2CA98 url(gorsel/parsomen-doku.webp) center top / 1024px 1024px repeat;
  -webkit-mask: url(gorsel/parsomen-kenar-sol.webp) left top / var(--kenar) 1024px repeat-y, url(gorsel/parsomen-kenar-sag.webp) right top / var(--kenar) 1024px repeat-y, linear-gradient(#000 0 0) center / calc(100% - var(--kenar) * 2 + 2px) 100% no-repeat;
  mask: url(gorsel/parsomen-kenar-sol.webp) left top / var(--kenar) 1024px repeat-y, url(gorsel/parsomen-kenar-sag.webp) right top / var(--kenar) 1024px repeat-y, linear-gradient(#000 0 0) center / calc(100% - var(--kenar) * 2 + 2px) 100% no-repeat; }
.parsomen-ic > :first-child { margin-top: 0; }
.parsomen-ic > :last-child { margin-bottom: 0; }
.parsomen-ic :is(h1, h2) { color: #4E2410 !important; text-shadow: 0 1px 0 rgba(255, 240, 205, .55) !important; }
.parsomen-ic p, .parsomen-ic .ozet, .parsomen-ic .rehber-giris { color: #3B2814 !important; }
.parsomen-ic .tarih { color: #6B4F2E !important; }
.parsomen-ic a:not(.dugme) { color: #6A2A0E; text-decoration-color: rgba(106, 42, 14, .4); }
.parsomen-ic a:not(.dugme):hover { text-decoration-color: #6A2A0E; }
.parsomen-ic ::selection { background: rgba(122, 52, 18, .25); }
.metin > .parsomen, .rehber-metin > .parsomen { margin-bottom: 2.25rem; }
.metin > .parsomen h1 { margin-bottom: .5rem; }
@media (max-width: 520px) { .parsomen { --merdane: 22px; --uc: 28px; --kenar: 36px; } }
@media (forced-colors: active) { .parsomen-ic { background: Canvas; color: CanvasText; } .parsomen-ic::before { display: none; } .parsomen > .parsomen-ic { -webkit-mask: none; mask: none; } .parsomen::before, .parsomen::after { background: CanvasText; } }
/* Yasal metinlerde parsomen sayfanin basinda biraz asagida durur. Rehberde yan menuyle ayni hizadan baslar. */
.metin:not(.rehber-metin) > .parsomen:first-child { margin-top: clamp(2rem, 5vw, 3.5rem); }
.parsomen-ic h2 { font-size: clamp(1.75rem, 1.1rem + 1.7vw, 2.5rem); overflow-wrap: break-word; hyphens: auto; }
/* Sayfa acilisindaki parsomen (rehber, yasal metinler, katkida bulunanlar) yuklenince asagi dogru acilir. */
.metin > .parsomen:first-child { animation: parsomen-ac 1.3s .15s cubic-bezier(.45, .05, .2, 1) both; }

/* ---------------------------------------------------------------- parsomen tomari
   Rehber, yasal metinler, katkida bulunanlar ve ansiklopedi: sayfanin tamami tek bir uzun parsomene yazilir.
   Kagit uzerinde murekkep dili: koyu kahve yazi, bordo basliklar, kahverengi elmas isaretler, ince murekkep cizgiler.
   Uzun kagit asagi dogru acilmaz (capa ile ortadan gelen okur bos kagit gormesin), sadece yavasca belirir. */
.tomar { --murekkep: #3B2814; --murekkep-koyu: #4E2410; --murekkep-soluk: #6B4F2E; --murekkep-ince: rgba(92, 56, 20, .32); --bordo: #8C2A16; --kagit-acik: rgba(255, 248, 230, .38);
  filter: none; box-shadow: 0 22px 44px rgba(0, 0, 0, .5); }
.metin > .parsomen.tomar:first-child { animation: tomar-gel .6s .1s ease-out both; }
@keyframes tomar-gel { from { opacity: 0; translate: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .metin > .parsomen.tomar:first-child { animation: none; } }
.tomar > .parsomen-ic { padding: clamp(1.6rem, 4.5vw, 3.25rem) clamp(1.25rem, 5vw, 3.5rem) clamp(2rem, 5vw, 3.5rem); }
.tomar .parsomen-ic :is(p, li, td, dd, label) { color: var(--murekkep); }
.tomar .parsomen-ic :is(h1, h2) { color: var(--murekkep-koyu) !important; text-shadow: 0 1px 0 rgba(255, 240, 205, .55) !important; }
.tomar .parsomen-ic :is(h3, h4, strong, th) { color: #5A2E12; }
.tomar .parsomen-ic a:not(.dugme) { color: #6A2A0E; text-decoration-color: rgba(106, 42, 14, .45); }
.tomar .parsomen-ic a:not(.dugme):hover { color: var(--bordo); text-decoration-color: currentColor; }
.tomar .parsomen-ic .tarih { color: var(--murekkep-soluk) !important; }
/* Metnin ara basliklari (yasal metinde dogrudan, rehberde bolumun basinda): ince cizgi ve ustte kucuk bir murekkep susu. */
.tomar .parsomen-ic > h2, .tomar .parsomen-ic > section > h2 { font-size: var(--olcek-3); margin: 2.4rem 0 .7rem; padding-bottom: .45rem; border-bottom: 1px solid var(--murekkep-ince); }
.tomar .parsomen-ic h1 + .tarih, .tomar .parsomen-ic h1 + p { margin-top: .25rem; }
.tomar .parsomen-ic > h1, .rehber-metin .tomar .parsomen-ic > h1 { padding-bottom: .6rem; margin-bottom: .9rem; border-bottom: 2px solid var(--murekkep-ince); }
.tomar .parsomen-ic > h2::before, .tomar .parsomen-ic > section > h2::before { content: ''; display: block; width: 6rem; height: .7rem; margin: 0 0 1.1rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12'%3E%3Cpath d='M0 6h38M58 6h38' stroke='%237A4A1E' stroke-opacity='.55' stroke-width='1'/%3E%3Cpath d='M48 1l5 5-5 5-5-5z' fill='%237A4A1E'/%3E%3Ccircle cx='40' cy='6' r='1.2' fill='%237A4A1E'/%3E%3Ccircle cx='56' cy='6' r='1.2' fill='%237A4A1E'/%3E%3C/svg%3E") left center / contain no-repeat; }
.tomar .parsomen-ic ul:not([class]), .tomar .parsomen-ic ol:not([class]) { padding-left: 1.4rem; }
.tomar .parsomen-ic ul:not([class]) > li::marker { color: #7A4A1E; }
.tomar .parsomen-ic table { border-collapse: collapse; margin: 1rem 0; }
.tomar .parsomen-ic :is(th, td) { border-bottom: 1px solid var(--murekkep-ince); }
.tomar .parsomen-ic thead th { background: rgba(92, 56, 20, .08); color: var(--murekkep-koyu); font-weight: 700; }
.tomar .parsomen-ic ::selection { background: rgba(122, 52, 18, .25); }
.tomar .parsomen-ic code { padding: .05rem .3rem; border-radius: 3px; background: rgba(92, 56, 20, .1); color: var(--murekkep-koyu); }

/* Rehber tomari */
.tomar .rehber-giris { font-size: 1.15rem; color: var(--murekkep) !important; }
.tomar .rehber-liste li::before { background: #7A4A1E; box-shadow: 0 0 0 2px rgba(255, 245, 220, .7), 0 0 0 3px rgba(92, 56, 20, .45); }
.tomar.parsomen .tablo-kap { border-color: var(--murekkep-ince); background: var(--kagit-acik); }
.rehber-metin .tomar table th[scope="col"] { color: var(--murekkep-koyu); }
.rehber-metin .tomar table th[scope="row"] { color: #5A2E12; }
.tomar .rehber-diger { margin-top: 2.75rem; border: 1px solid var(--murekkep-ince); border-top: 3px double rgba(92, 56, 20, .45); background: var(--kagit-acik); }
.rehber-metin .tomar h1 { color: var(--murekkep-koyu); text-shadow: none; }
.rehber-metin .tomar h2 { color: var(--murekkep-koyu); }

/* Tanitim tomari (Serbest Hikaye): oyun ici gorsel kagida yapistirilmis bir levha gibi, ozellikler madalyonlu iki sutun. */
.tanitim { padding: clamp(2rem, 5vw, 3.5rem) 0 4rem; }
.tanitim-metin { max-width: none; }
.tanitim .tomar { max-width: min(60rem, calc(100% - var(--uc) * 2)); margin-inline: auto; }
.tanitim-eylem { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.4rem 0 1.8rem; }
.tanitim-gorsel { margin: 0 0 .5rem; padding: .55rem; background: #1B140E; border: 1px solid #5A4632; border-radius: 3px; box-shadow: 0 1px 0 rgba(255, 240, 205, .5), 0 10px 22px rgba(60, 34, 12, .35); rotate: -.4deg; }
.tanitim-gorsel img { display: block; width: 100%; height: auto; border-radius: 2px; }
.tanitim-gorsel figcaption { margin: .5rem .2rem 0; font: 500 var(--olcek--1, .85rem)/1.4 var(--arayuz); color: #CDBFA4; text-align: right; }
.tanitim-ozellikler { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem 2rem; }
.tanitim-ozellikler li { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr); column-gap: .9rem; align-items: start; }
.tanitim-ikon { grid-row: span 2; width: 2.9rem; height: 2.9rem; display: grid; place-items: center; border-radius: 50%; color: #F3DDB0;
  background: radial-gradient(circle at 38% 30%, #7A4A1E, #3A2412 75%); box-shadow: inset 0 0 0 1.5px #C9A15E, inset 0 0 0 3.5px #2A190C, 0 2px 4px rgba(60, 34, 12, .35); }
.tanitim-ikon .ikon { width: 1.35rem; height: 1.35rem; }
.tanitim-ozellikler h3 { margin: .15rem 0 .3rem; font: 700 var(--olcek-2)/1.25 var(--baslik); }
.tanitim-ozellikler p { margin: 0; }
.tomar .tanitim-sss { max-width: none; }
.tomar .tanitim-sss details { border-bottom-color: var(--murekkep-ince); }
.tomar .tanitim-sss summary { color: #5A2E12; }
.tomar .tanitim-sss summary::after { color: #7A4A1E; }
.yenilik-baglanti { display: inline-flex; align-items: center; gap: .3rem; margin: .2rem 0 0 .9rem; font: 600 .95rem/1.3 var(--arayuz); color: var(--pirinc); }
.yenilik-baglanti .ikon { width: 1rem; height: 1rem; }
@media (max-width: 900px) { .yenilik-baglanti { margin-left: 0; } }
@media (max-width: 700px) { .tanitim-ozellikler { grid-template-columns: minmax(0, 1fr); } .tanitim-gorsel { rotate: none; } }
/* Ansiklopedi canavar sayfasi: arenaya cagri (parsomen icinde, mumlu muhur dugmesi ve kisa aciklama). */
.ans-arena { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 1rem 0 1.4rem; padding: .9rem 1rem; border: 1px solid var(--murekkep-ince, rgba(92, 56, 20, .32));
  border-left: 3px solid #8C2A16; border-radius: 3px; background: var(--kagit-acik, rgba(255, 248, 230, .38)); }
.ans-arena span { font: 500 .95rem/1.4 var(--arayuz); color: var(--murekkep-soluk, #6B4F2E); }

/* Ansiklopedi tomari: kural kitabi sayfasi. Deger kutulari istatistik bloguna doner (ustte ve altta bordo cizgi). */
.ans-tomar { margin-bottom: 0; }
.ans-tomar .ans-bas { margin-bottom: clamp(1.25rem, 3vw, 2rem); padding-bottom: clamp(1rem, 2.5vw, 1.5rem); border-bottom: 2px solid var(--murekkep-ince); }
.ans-tomar .ans-bas h1 { padding: 0; margin: 0; border: 0; }
.tomar .ans-vurgu { color: var(--murekkep) !important; }
.tomar .ans-not, .tomar .ans-ornek, .tomar .ans-ornek > span:first-child { color: var(--murekkep-soluk) !important; }
.tomar .ans-degerler { border: 0; border-top: 3px solid var(--bordo); border-bottom: 3px solid var(--bordo); border-radius: 0; background: var(--kagit-acik); box-shadow: none; }
.tomar .ans-degerler > div { border-bottom-color: var(--murekkep-ince); }
.tomar .ans-degerler dt { color: var(--bordo); }
.tomar .ans-degerler dd { color: var(--murekkep); }
.tomar .ans-degerler dd a, .tomar .ans-kural a, .tomar .ans-tablo a, .tomar .ans-ornek a, .tomar .ans-secenek a { color: #6A2A0E; text-decoration-color: rgba(106, 42, 14, .45); }
.tomar .ans-bolum > h2, .tomar .ans-grup > h2, .tomar .ans-hakkinda h2 { margin-top: 0; color: var(--murekkep-koyu); text-shadow: none; border-bottom: 1px solid var(--bordo); }
.tomar .ans-bolum > h3, .tomar .ans-ozellik h3, .tomar .ans-grup > h3 { color: #5A2E12; }
.tomar .ans-ozellik h3 small, .tomar .ans-sayi, .tomar .ans-kartlar .ans-kart-alt { color: #7A4A1E; }
.tomar .ans-kural, .tomar .ans-kural p, .tomar .ans-hakkinda { color: var(--murekkep); }
.tomar .ans-kural strong { color: #5A2E12; }
.tomar .ans-kural em { color: var(--murekkep-soluk); }
.tomar .ans-liste li::before { background: #7A4A1E; box-shadow: 0 0 0 2px rgba(255, 245, 220, .7), 0 0 0 3px rgba(92, 56, 20, .45); }
.tomar .ans-oyunda { border-color: rgba(47, 111, 100, .45); background: rgba(47, 111, 100, .08); }
.tomar .ans-oyunda .ikon { color: #2F6F64; }
.tomar .ans-panel { border: 1px solid var(--murekkep-ince); background: var(--kagit-acik); box-shadow: inset 0 0 0 3px rgba(255, 248, 230, .4), inset 0 0 0 4px rgba(92, 56, 20, .14); }
.tomar .ans-panel > h2 { color: var(--murekkep-koyu); font-size: var(--olcek-1); margin: 0 0 .8rem; padding: 0; border: 0; }
.tomar .ans-yan-liste a { color: var(--murekkep); }
.tomar .ans-yan-liste a:hover, .tomar .ans-yan-liste a:focus-visible { background: rgba(92, 56, 20, .08); color: var(--murekkep-koyu); }
.tomar .ans-yan-liste small { color: var(--murekkep-soluk); }
.tomar .ans-secenek li { color: var(--murekkep); }
.tomar .ans-tablo-kap { border: 1px solid var(--murekkep-ince); background: var(--kagit-acik); }
.tomar .ans-tablo :is(th, td) { border-bottom-color: var(--murekkep-ince); }
.tomar .ans-tablo thead th { background: rgba(92, 56, 20, .08); border-bottom-color: var(--bordo); color: var(--bordo); }
.tomar .ans-tablo tbody tr:hover { background: rgba(92, 56, 20, .05); }
.tomar .ans-tablo tbody th, .tomar .ans-yetenek-tablo td strong { color: #5A2E12; }
.tomar .ans-tablo tbody th small { color: var(--murekkep-soluk); }
.tomar .ans-tablo td { color: var(--murekkep); }
.tomar .ans-yetenek-tablo td small { color: #2F6F64; }
.tomar .ans-oge-liste a, .tomar .ans-kartlar > li, .tomar .ans-kategoriler .kural { border: 1px solid var(--murekkep-ince); background: var(--kagit-acik); box-shadow: none; }
.tomar .ans-oge-liste a:hover, .tomar .ans-oge-liste a:focus-visible, .tomar .ans-kartlar > li:hover, .tomar .ans-kategoriler .kural:hover { border-color: #8C5A2B; background: rgba(255, 250, 238, .6); }
.tomar .ans-oge-liste strong, .tomar .ans-kartlar h2, .tomar .ans-kategoriler .kural h2, .tomar .ans-kart-baglanti { color: var(--murekkep-koyu); }
.tomar .ans-oge-liste span, .tomar .ans-kartlar p, .tomar .ans-kategoriler .kural p { color: var(--murekkep-soluk); }
.tomar .ans-hap-liste a, .tomar .ans-hap-liste span { border-color: var(--murekkep-ince); color: var(--murekkep); background: var(--kagit-acik); }
.tomar .ans-hap-liste a:hover, .tomar .ans-hap-liste a:focus-visible { border-color: #8C5A2B; color: var(--murekkep-koyu); }
.tomar .ans-devam { color: #6A2A0E; }
.tomar .ans-sinif-serit a { color: var(--murekkep); }
.tomar .ans-sinif-serit a:hover, .tomar .ans-sinif-serit a:focus-visible { background: rgba(92, 56, 20, .08); color: var(--murekkep-koyu); }
.tomar .ans-sonuc, .tomar .ans-grup > h2 small { color: var(--murekkep-soluk); }
.tomar .ans-suzgec :is(input, select) { background: rgba(255, 250, 238, .7); border-color: rgba(92, 56, 20, .45); color: var(--murekkep); }
.tomar .ans-suzgec :is(input, select):focus { border-color: var(--bordo); outline-color: var(--bordo); }
.tomar .ans-ara-kutu .ikon { color: var(--murekkep-soluk); }
.tomar .ans-nadirlik.n-siradan { color: #5E5446; }
.tomar .ans-nadirlik.n-yaygin-degil { color: #2E6B3C; }
.tomar .ans-nadirlik.n-nadir { color: #2D5A8C; }
.tomar .ans-nadirlik.n-cok-nadir { color: #6A3A94; }
.tomar .ans-nadirlik.n-efsanevi { color: #9A5A12; }
.tomar .rozet-ikon { color: #F2D9A0; }
@media (max-width: 600px) { .tomar > .parsomen-ic { padding-inline: 1.6rem; } }
/* ---------------------------------------------------------------- canli tasarim
   Gorunur olunca canlanma. Betik yoksa, hareket azaltma isteniyorsa ya da otomatik testte her sey son haliyle durur:
   gizleme kurallari sadece html.canli altinda gecerlidir ve site.js bu sinifi ancak hareket serbestse ekler. */
@property --kapali { syntax: '<number>'; inherits: true; initial-value: 0; }
@keyframes parsomen-ac { from { --kapali: 1; } }

/* Yazdirirken henuz gorunmemis bolumler de basilir. */
@media print { html.canli [data-gorun], html.canli [data-gorun] > li { opacity: 1 !important; translate: none !important; } html.canli .parsomen { --kapali: 0 !important; } html.canli .muhur { scale: 1 !important; opacity: 1 !important; rotate: none !important; } .kivilcim { display: none; } }
html.canli [data-gorun] { transition: opacity .8s cubic-bezier(.2, .7, .2, 1), translate .8s cubic-bezier(.2, .7, .2, 1); }
html.canli [data-gorun]:not(.gorundu) { opacity: 0; translate: 0 28px; }
/* Parsomenler kaymaz, acilir. */
html.canli .parsomen[data-gorun] { transition: --kapali 1.4s .1s cubic-bezier(.45, .05, .2, 1); }
html.canli .parsomen[data-gorun]:not(.gorundu) { opacity: 1; translate: none; --kapali: 1; }
/* Mektubun muhuru kagit acildiktan sonra basilir ve catlar. */
html.canli .parsomen.mektup > .muhur { transition: scale .45s 1.35s cubic-bezier(.3, 1.6, .5, 1), opacity .2s 1.35s, rotate .45s 1.35s; }
html.canli .parsomen.mektup > .muhur::after { transition: clip-path .5s 1.9s ease-out, opacity .3s 1.9s; }
html.canli .parsomen.mektup:not(.gorundu) > .muhur { scale: 2.1; opacity: 0; rotate: -18deg; }
html.canli .parsomen.mektup:not(.gorundu) > .muhur::after { opacity: 0; clip-path: polygon(40% 0, 60% 0, 45% 18%, 28% 18%); }
/* Gorev parsomeninde muhurler sirayla basilir. */
html.canli .parsomen.gorev .muhur { transition: scale .4s cubic-bezier(.3, 1.6, .5, 1), opacity .2s; }
html.canli .parsomen.gorev li:nth-child(1) .muhur { transition-delay: 1.2s; }
html.canli .parsomen.gorev li:nth-child(2) .muhur { transition-delay: 1.45s; }
html.canli .parsomen.gorev li:nth-child(3) .muhur { transition-delay: 1.7s; }
html.canli .parsomen.gorev:not(.gorundu) .muhur { scale: 1.9; opacity: 0; }
html.canli .parsomen.gorev .adimlar::before { transition: clip-path 1.2s 1.3s ease-in-out; }
html.canli .parsomen.gorev:not(.gorundu) .adimlar::before { clip-path: inset(0 100% 0 0); }
/* Susleme cizgisi ortadan iki yana uzar. */
html.canli .bolum-baslik::after { transition: scale 1s .25s cubic-bezier(.2, .7, .2, 1); }
html.canli .bolum-baslik:not(.gorundu)::after { scale: 0 1; }
/* Ard arda gelen levhalar sirayla belirir. --g sadece belirme gecikmesidir, uzerine gelme gecikmesiz kalir. */
.kural:nth-child(3n + 2) { --g: .1s; }
.kural:nth-child(3n) { --g: .2s; }
html.canli .kural[data-gorun] { transition: opacity .8s var(--g, 0s) cubic-bezier(.2, .7, .2, 1), translate .8s var(--g, 0s) cubic-bezier(.2, .7, .2, 1),
  transform .35s cubic-bezier(.2, .7, .2, 1), border-color .35s, box-shadow .35s; }
html.canli :is(.siniflar, .yenilikler)[data-gorun] { transition: none; }
html.canli :is(.siniflar, .yenilikler)[data-gorun]:not(.gorundu) { opacity: 1; translate: none; }
html.canli :is(.siniflar, .yenilikler)[data-gorun] > li { transition: opacity .6s var(--g, 0s) cubic-bezier(.2, .7, .2, 1), translate .6s var(--g, 0s) cubic-bezier(.2, .7, .2, 1),
  border-color .3s, background .3s, transform .3s cubic-bezier(.2, .7, .2, 1); }
html.canli :is(.siniflar, .yenilikler)[data-gorun]:not(.gorundu) > li { opacity: 0; translate: 0 18px; }
:is(.siniflar, .yenilikler) > li:nth-child(2) { --g: .06s; }
:is(.siniflar, .yenilikler) > li:nth-child(3) { --g: .12s; }
:is(.siniflar, .yenilikler) > li:nth-child(4) { --g: .18s; }
:is(.siniflar, .yenilikler) > li:nth-child(5) { --g: .24s; }
.siniflar > li:nth-child(6) { --g: .3s; }
.siniflar > li:nth-child(7) { --g: .36s; }
.siniflar > li:nth-child(8) { --g: .42s; }
.siniflar > li:nth-child(9) { --g: .48s; }
.siniflar > li:nth-child(10) { --g: .54s; }
.siniflar > li:nth-child(11) { --g: .6s; }
.siniflar > li:nth-child(12) { --g: .66s; }
/* Yenilikler cizgisi yukaridan asagi cizilir. */
.yenilikler { position: relative; max-width: 50rem; margin-inline: auto; border-left: 0; }
.yenilikler::before { content: ''; position: absolute; left: 0; top: .2rem; bottom: .2rem; width: 1px; background: linear-gradient(var(--pirinc-soluk), var(--murekkep-cizgi) 85%, transparent); transform-origin: top; }
@media (max-width: 900px) { .yenilikler { margin-left: 1.05rem; } }
html.canli .yenilikler::before { transition: scale 1.4s ease-out; }
html.canli .yenilikler:not(.gorundu)::before { scale: 1 0; }
/* Oyun goruntusu masaya iner: hafif egik gelir, yerine oturur. */
.oyun-goruntusu-bolum .kap { perspective: 1400px; }
html.canli .harita[data-gorun] { transition: opacity 1s cubic-bezier(.2, .7, .2, 1), translate 1s cubic-bezier(.2, .7, .2, 1), rotate 1.2s cubic-bezier(.2, .7, .2, 1); transform-origin: 50% 100%; }
html.canli .harita[data-gorun]:not(.gorundu) { opacity: 0; translate: 0 40px; rotate: x 16deg; }
.harita figure::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255, 236, 190, .14) 50%, transparent 65%) -150% 0 / 200% 100% no-repeat; }
html.canli .harita.gorundu figure::before { animation: isik-gecer 2.2s .7s ease-in-out both; }
@keyframes isik-gecer { to { background-position: 250% 0; } }

/* Kahraman bolumu yuklenince sirayla gelir, baslikta ara ara pirinc parlamasi gecer. */
.kahraman .kap > div:first-child > * { animation: yukari-gel .9s cubic-bezier(.2, .7, .2, 1) both; }
.kahraman .kap > div:first-child > :nth-child(2) { animation-delay: .1s; }
.kahraman .kap > div:first-child > :nth-child(3) { animation-delay: .22s; }
.kahraman .kap > div:first-child > :nth-child(4) { animation-delay: .34s; }
.kahraman .kap > div:first-child > :nth-child(5) { animation-delay: .46s; }
.kahraman .kap > div:first-child > :nth-child(n + 6) { animation-delay: .56s; }
@keyframes yukari-gel { from { opacity: 0; translate: 0 18px; } }
.kahraman h1 { background: linear-gradient(105deg, transparent 42%, rgba(255, 250, 232, .95) 50%, transparent 58%) 160% 0 / 250% 100% no-repeat,
  linear-gradient(180deg, #FBEFD2 10%, #E9C27A 60%, #A87C44 100%); -webkit-background-clip: text; background-clip: text;
  animation: yukari-gel .9s .1s cubic-bezier(.2, .7, .2, 1) both, parilti 9s 1.6s ease-in-out infinite; }
@keyframes parilti { 0% { background-position: 160% 0, 0 0; } 18%, 100% { background-position: -60% 0, 0 0; } }
/* Ana eylem dugmesi davet eder gibi hafifce isildar. */
.kahraman .dugme.ana { animation: isilti 3.6s 2s ease-in-out infinite; }
@keyframes isilti { 0%, 100% { filter: drop-shadow(0 0 0 rgba(233, 160, 60, 0)); } 50% { filter: drop-shadow(0 0 12px rgba(233, 160, 60, .45)); } }
.kahraman .dugme.ana:hover { animation-play-state: paused; }

/* ---------------------------------------------------------------- SRD ansiklopedisi
   Kural kitabi gibi: ustte gezinti yolu ve parsomen baslik, altinda bronz deger levhasi, Alegreya kural metni,
   yanda bronz paneller. Madalyonlar oyunun game-icons ikonlaridir. Tablolar dar ekranda kendi kutusunda kayar. */
.ans { padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(3rem, 6vw, 4.5rem); }
.ans-yol ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; margin: 0 0 1.25rem; padding: 0; list-style: none; font-size: var(--olcek-0); color: var(--toz); }
.ans-yol li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.ans-yol li + li::before { content: ''; width: .4rem; height: .4rem; border-top: 1.5px solid var(--pirinc); border-right: 1.5px solid var(--pirinc); transform: rotate(45deg); opacity: .7; flex: none; }
.ans-yol a { color: var(--toz); text-decoration: none; }
.ans-yol a:hover { color: var(--kemik); }
.ans-yol [aria-current] { color: var(--kemik); overflow-wrap: anywhere; }

.ans-bas { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.ans-bas { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 3vw, 1.75rem); }
.ans-madalyon { display: grid; place-items: center; width: clamp(4rem, 9vw, 5.5rem); aspect-ratio: 1; padding: clamp(.8rem, 2vw, 1.1rem); border-radius: 50%; color: #F2D9A0;
  background: radial-gradient(circle at 35% 30%, #5A3A1E, #2A180B 72%); box-shadow: 0 0 0 2px #8A6532, 0 0 0 5px rgba(78, 36, 16, .35), 0 6px 14px rgba(40, 20, 6, .45); }
.ans-madalyon svg { width: 100%; height: 100%; }
.ans-bas-metin { min-width: 0; }
.ans-bas h1 { margin: 0; font: 700 clamp(1.9rem, 1.2rem + 2.6vw, var(--olcek-5))/1.1 var(--baslik); overflow-wrap: break-word; hyphens: auto; }
.ans-etiket { margin: 0 0 .35rem !important; font: 700 .74rem/1.2 var(--arayuz); letter-spacing: .14em; text-transform: uppercase; color: #7A4A1E !important; }
.ans-srd { margin: .35rem 0 0 !important; font: italic 400 1.05rem/1.4 var(--anlati); color: #5C3D1E !important; }
.ans-srd span { font-style: normal; font-weight: 600; }
.ans-tip { margin: .5rem 0 0 !important; font: 400 1.15rem/1.5 var(--anlati); }
.ans-giris { margin: .9rem 0 0 !important; max-width: 46rem; font: 400 1.075rem/1.65 var(--anlati); }

.ans-izgara { display: grid; grid-template-columns: minmax(0, 1fr) 18.5rem; gap: clamp(1.5rem, 3.5vw, 2.75rem); align-items: start; }
.ans-ana { min-width: 0; }
.ans-yan { display: grid; gap: 1rem; min-width: 0; }

/* Deger levhasi: kural kitabindaki istatistik kutusu gibi */
.ans-degerler { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 0; margin: 0 0 1.75rem; padding: .35rem 0;
  border: 1px solid #5A4632; border-radius: 4px; background: linear-gradient(180deg, rgba(33, 23, 15, .94), rgba(18, 13, 9, .94)); box-shadow: inset 0 0 0 4px #120D09, inset 0 0 0 5px rgba(201, 161, 94, .2); }
.ans-degerler > div { min-width: 0; padding: .7rem 1.1rem; border-bottom: 1px solid rgba(58, 45, 33, .7); }
.ans-degerler > div.genis { grid-column: 1 / -1; }
.ans-degerler > div:last-child { border-bottom: 0; }
.ans-degerler dt { margin-bottom: .2rem; font: 700 .7rem/1.3 var(--baslik); letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 194, 122, .85); }
.ans-degerler dd { margin: 0; color: var(--kemik); overflow-wrap: anywhere; }
.ans-degerler dd a { color: var(--kor); }
.ans-istatistik { display: grid; gap: 1rem; margin-bottom: 1.75rem; }
.ans-istatistik .ans-degerler, .ans-istatistik .ans-tablo-kap { margin: 0; }

.ans-bolum { margin: 0 0 2rem; scroll-margin-top: 5.5rem; }
.ans-bolum > h2 { margin: 0 0 .9rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(201, 161, 94, .25); font: 700 var(--olcek-3)/1.25 var(--baslik); color: var(--kor); text-shadow: 0 2px 0 #000; }
.ans-bolum > h3 { margin: 1.25rem 0 .6rem; font: 700 var(--olcek-1)/1.3 var(--baslik); color: var(--kemik); }
.ans-kural { font: 400 1.075rem/1.75 var(--anlati); color: #D6CDBB; max-width: 46rem; }
.ans-kural p { margin: 0 0 .9rem; }
.ans-kural p:last-child { margin-bottom: 0; }
.ans-kural strong { color: var(--kemik); font-weight: 700; }
.ans-kural a, .ans-ornek a, .ans-degerler dd a { text-decoration-color: rgba(233, 194, 122, .45); }
.ans-kural a { color: var(--kor); }
.ans-kural em { font-style: italic; color: var(--toz); }
.ans-liste { margin: 0 0 .9rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.ans-liste li { position: relative; padding-left: 1.5rem; }
.ans-liste li::before { content: ''; position: absolute; left: .2rem; top: .7em; width: .45rem; height: .45rem; transform: rotate(45deg); background: var(--kor); box-shadow: 0 0 0 2px #120D09, 0 0 0 3px rgba(201, 161, 94, .5); }
.ans-ozellik { margin: 0 0 1.5rem; scroll-margin-top: 5.5rem; }
.ans-ozellik h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; margin: 0 0 .5rem; font: 700 var(--olcek-2)/1.3 var(--baslik); color: var(--kemik); }
.ans-ozellik h3 small { font: 600 .78rem/1.2 var(--arayuz); letter-spacing: .06em; color: var(--pirinc); }
.ans-vurgu { margin: 0 0 1.25rem; max-width: 46rem; font: italic 400 1.15rem/1.6 var(--anlati); color: #E2D6BE; }
.ans-not { margin: .75rem 0 1rem; max-width: 46rem; color: var(--toz); font-size: var(--olcek-0); }
.ans-ornek { margin: .5rem 0 0; font-size: var(--olcek-0); color: #CFC6B3; }
.ans-ornek > span:first-child { color: var(--toz); font-weight: 600; }
.ans-ornek a { color: var(--kor); }
.ans-oyunda { display: flex; gap: .7rem; align-items: flex-start; margin: 0 0 1.75rem; padding: .85rem 1rem; max-width: 46rem; border: 1px solid rgba(95, 168, 156, .35); border-radius: var(--kose);
  background: rgba(95, 168, 156, .07); font-size: var(--olcek-0); }
.ans-oyunda .ikon { margin-top: .2rem; color: var(--patina); }

/* Yan paneller */
.ans-panel { padding: 1.15rem 1.2rem 1.25rem; border: 1px solid #4A3826; border-radius: 4px; background: linear-gradient(180deg, rgba(31, 22, 15, .95), rgba(16, 12, 9, .95));
  box-shadow: inset 0 0 0 3px #120D09, inset 0 0 0 4px rgba(201, 161, 94, .13); min-width: 0; }
.ans-panel > h2 { margin: 0 0 .8rem; font: 700 var(--olcek-1)/1.3 var(--baslik); letter-spacing: .02em; color: var(--kor); }
.ans-panel .ans-not { margin: 0; }
.ans-yan-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .1rem; }
.ans-yan-liste a { display: flex; align-items: center; gap: .65rem; padding: .45rem .5rem; margin: 0 -.5rem; border-radius: 6px; color: #D6CDBB; text-decoration: none; font-size: .95rem; }
.ans-yan-liste a:hover, .ans-yan-liste a:focus-visible { background: rgba(201, 161, 94, .08); color: var(--kemik); }
.ans-yan-liste small { margin-left: auto; padding-left: .5rem; color: var(--toz); font-size: .78rem; white-space: nowrap; }
.ans-mini-madalyon { display: grid; place-items: center; flex: none; width: 2.1rem; height: 2.1rem; padding: .4rem; border-radius: 50%; color: var(--kor);
  background: radial-gradient(circle at 35% 30%, #2C2117, #120D09 75%); box-shadow: 0 0 0 1px rgba(201, 161, 94, .35); }
.ans-mini-madalyon svg { width: 100%; height: 100%; }
.ans-secenek { margin: 0 0 .5rem; padding: 0; list-style: none; display: grid; gap: .6rem; }
.ans-secenek li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .6rem; align-items: start; font-size: .92rem; color: #D6CDBB; }
.ans-secenek strong { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font: 700 .85rem/1 var(--baslik); color: #1E1408;
  background: radial-gradient(circle at 35% 30%, #F7E2B0, #C9A15E 55%, #8A6532); }
.ans-secenek a { color: var(--kor); }

/* Oyuna cagri, komsu sayfalar, atif */
.ans-oyun { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem; margin: clamp(2rem, 4vw, 3rem) 0 1.5rem; padding: 1.5rem 1.6rem;
  border: 1px solid #5A4632; border-radius: 4px; background: radial-gradient(600px 220px at 0% 0%, rgba(201, 161, 94, .14), transparent 70%), linear-gradient(180deg, #1E160F, #130E0A);
  box-shadow: inset 0 0 0 4px #120D09, inset 0 0 0 5px rgba(201, 161, 94, .22), 0 14px 34px rgba(0, 0, 0, .35); }
.ans-oyun .rozet-ikon { display: grid; place-items: center; width: 3.6rem; height: 3.6rem; padding: .7rem; border-radius: 50%; color: var(--kor);
  background: radial-gradient(circle at 35% 30%, #3A2A1A, #150F0A 70%); box-shadow: 0 0 0 1px rgba(201, 161, 94, .55), 0 0 0 4px #120D09, 0 0 0 5px rgba(201, 161, 94, .25); }
.ans-oyun .rozet-ikon svg { width: 100%; height: 100%; }
.ans-oyun h2 { margin: 0 0 .3rem; font: 700 var(--olcek-3)/1.2 var(--baslik); color: var(--kemik); }
.ans-oyun p { margin: 0; color: #D6CDBB; max-width: 40rem; }
.ans-oyun .eylemler { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.ans-komsu { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: .75rem; margin: 0 0 1.5rem; }
.ans-komsu a { color: #D6CDBB; text-decoration: none; }
.ans-komsu-onceki, .ans-komsu-sonraki { display: grid; gap: .1rem; min-width: 0; padding: .7rem .9rem; border: 1px solid var(--murekkep-cizgi); border-radius: 6px; }
.ans-komsu-sonraki { text-align: right; }
.ans-komsu-onceki:hover, .ans-komsu-sonraki:hover { border-color: rgba(201, 161, 94, .55); background: rgba(201, 161, 94, .05); }
.ans-komsu span { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--toz); }
.ans-komsu strong { font: 700 var(--olcek-1)/1.3 var(--baslik); color: var(--kemik); overflow-wrap: anywhere; }
.ans-komsu-hepsi { padding: .5rem .9rem; border-radius: 999px; border: 1px solid var(--pirinc-soluk); font-size: var(--olcek-0); font-weight: 600; white-space: nowrap; }
.ans-komsu-hepsi:hover { border-color: var(--pirinc); color: var(--kemik); }
.ans-lisans { display: flex; gap: .6rem; align-items: flex-start; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--murekkep-cizgi); color: var(--toz); font-size: .82rem; line-height: 1.6; }
.ans-lisans .ikon { margin-top: .2rem; color: var(--pirinc); }
.ans-lisans a { color: var(--kemik); }

/* Ansiklopedi ana sayfasi */
.ans-kategoriler { margin: 0 0 2rem; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.1rem; }
.ans-kategoriler .kural h2 { margin: 0; font: 700 var(--olcek-3)/1.2 var(--baslik); }
.ans-kategoriler .kural p { margin: 0; color: #CFC6B3; }
.ans-kart-baglanti { color: var(--kemik); text-decoration: none; }
.ans-kart-baglanti::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ans-kart-baglanti:focus-visible { outline: none; }
.ans-kart-baglanti:focus-visible::after { outline: 2px solid var(--pirinc); outline-offset: 3px; }
.ans-sayi { margin-top: .35rem; font: 600 .8rem/1.2 var(--arayuz); letter-spacing: .06em; color: var(--pirinc); }
.ans-iki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; margin-bottom: 1.1rem; }
.ans-hap-liste { margin: 0 0 .5rem; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.ans-hap-liste a, .ans-hap-liste span { display: inline-block; padding: .35rem .8rem; border: 1px solid var(--murekkep-cizgi); border-radius: 999px; color: #D6CDBB; text-decoration: none; font-size: var(--olcek-0); }
.ans-hap-liste a:hover, .ans-hap-liste a:focus-visible { border-color: var(--pirinc); color: var(--kemik); background: rgba(201, 161, 94, .06); }
.ans-devam { display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem; color: var(--kor); font-weight: 600; font-size: var(--olcek-0); text-decoration: none; }
.ans-devam:hover { text-decoration: underline; }
.ans-sinif-serit { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: .5rem; }
.ans-sinif-serit a { display: flex; align-items: center; gap: .6rem; padding: .45rem .6rem; border-radius: 6px; color: #D6CDBB; text-decoration: none; }
.ans-sinif-serit a:hover, .ans-sinif-serit a:focus-visible { background: rgba(201, 161, 94, .08); color: var(--kemik); }
.ans-hakkinda { margin: 2rem 0 0; max-width: 46rem; font: 400 1.05rem/1.7 var(--anlati); color: #D6CDBB; }
.ans-hakkinda h2 { margin: 0 0 .6rem; font: 700 var(--olcek-3)/1.25 var(--baslik); color: var(--kor); }
.ans-hakkinda p { margin: 0 0 .8rem; }

/* Dizinler: arama, gruplu listeler, kartlar, tablolar */
.ans-suzgec { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 0 0 1.5rem; }
.ans-suzgec[hidden] { display: none; }
.ans-ara-kutu { position: relative; flex: 1 1 16rem; min-width: 0; }
.ans-ara-kutu .ikon { position: absolute; left: .8rem; top: 50%; transform: translateY(-50%); color: var(--toz); pointer-events: none; }
.ans-ara-kutu input { padding-left: 2.5rem; }
.ans-suzgec select { flex: 0 1 13rem; width: auto; min-width: 0; }
.ans-sonuc { flex-basis: 100%; margin: 0; min-height: 1.4em; color: var(--toz); font-size: var(--olcek-0); }
.ans-grup { margin: 0 0 2rem; }
.ans-grup[hidden] { display: none; }
.ans-grup > h2 { display: flex; align-items: baseline; gap: .6rem; margin: 0 0 .9rem; padding-bottom: .4rem; border-bottom: 1px solid rgba(201, 161, 94, .25); font: 700 var(--olcek-3)/1.25 var(--baslik); color: var(--kor); }
.ans-grup > h2 small { font: 600 .8rem/1 var(--arayuz); color: var(--toz); }
.ans-grup > h3 { margin: 1.25rem 0 .6rem; font: 700 var(--olcek-1)/1.3 var(--baslik); color: var(--kemik); }
.ans-oge-liste { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; }
.ans-oge-liste.genis { grid-template-columns: repeat(auto-fill, minmax(21rem, 1fr)); }
.ans-oge-liste li[hidden] { display: none; }
.ans-oge-liste a { display: grid; align-content: start; gap: .15rem; height: 100%; padding: .65rem .85rem; border: 1px solid var(--murekkep-cizgi); border-radius: 4px; background: rgba(23, 17, 13, .65);
  color: var(--kemik); text-decoration: none; transition: border-color .2s, background .2s; }
.ans-oge-liste a:hover, .ans-oge-liste a:focus-visible { border-color: rgba(201, 161, 94, .55); background: rgba(40, 29, 19, .8); }
.ans-oge-liste strong { font: 700 1rem/1.3 var(--baslik); overflow-wrap: anywhere; }
.ans-oge-liste span { color: var(--toz); font-size: .82rem; line-height: 1.45; }
.ans-kartlar { margin: 0 0 2rem; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .9rem; }
.ans-kartlar > li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: start; gap: .35rem .85rem; padding: 1.1rem 1.15rem 1.2rem;
  border: 1px solid var(--murekkep-cizgi); border-radius: 4px; background: rgba(23, 17, 13, .65); transition: border-color .3s, background .3s, transform .3s cubic-bezier(.2, .7, .2, 1); }
.ans-kartlar > li:hover { border-color: rgba(201, 161, 94, .55); background: rgba(40, 29, 19, .8); transform: translateY(-3px); }
.ans-kartlar .ans-mini-madalyon { grid-row: 1 / span 3; width: 2.8rem; height: 2.8rem; padding: .55rem; }
.ans-kartlar h2 { margin: 0; font: 700 var(--olcek-2)/1.25 var(--baslik); }
.ans-kartlar p { margin: 0; color: #CFC6B3; font-size: .92rem; }
.ans-kartlar .ans-kart-alt { color: var(--pirinc); font-size: .8rem; font-weight: 600; }
.ans-tablo-kap { margin: 0 0 1rem; border-color: #4A3A2A; border-radius: 4px; background: rgba(16, 12, 9, .6); }
.ans-tablo { width: 100%; border-collapse: collapse; font-size: var(--olcek-0); }
.ans-tablo caption { text-align: left; }
.ans-tablo th, .ans-tablo td { padding: .6rem .8rem; text-align: left; vertical-align: top; border-bottom: 1px solid rgba(58, 45, 33, .7); }
.ans-tablo thead th { background: rgba(201, 161, 94, .06); border-bottom: 1px solid #4A3826; font: 700 .7rem/1.3 var(--baslik); letter-spacing: .08em; text-transform: uppercase; color: rgba(233, 194, 122, .85); vertical-align: bottom; }
.ans-tablo thead abbr { text-decoration: none; }
.ans-tablo tbody tr:last-child > * { border-bottom: 0; }
.ans-tablo tbody tr:hover { background: rgba(201, 161, 94, .04); }
.ans-tablo tbody th { font-weight: 600; color: var(--kemik); min-width: 9rem; }
.ans-tablo tbody th small { display: block; margin-top: .2rem; max-width: 26rem; font-weight: 400; color: var(--toz); font-size: .8rem; line-height: 1.45; }
.ans-tablo a { color: var(--kor); text-decoration-color: rgba(233, 194, 122, .4); }
.ans-tablo td { color: #D6CDBB; }
.ans-tablo td.kir { min-width: 10rem; }
.ans-tablo tr[hidden] { display: none; }
.ans-yetenek-tablo th, .ans-yetenek-tablo td { text-align: center; }
.ans-yetenek-tablo td strong { display: block; font: 700 1.2rem/1.2 var(--baslik); color: var(--kemik); }
.ans-yetenek-tablo td small { display: block; margin-top: .2rem; color: var(--patina); font-size: .74rem; }
.ans-dar-tablo { max-width: 22rem; }
.ans-nadirlik { display: inline-block; padding: .1rem .55rem; border-radius: 999px; border: 1px solid currentColor; font-size: .85rem; font-weight: 600; }
.ans-nadirlik.n-siradan { color: #C9C2B3; }
.ans-nadirlik.n-yaygin-degil { color: #8FC79B; }
.ans-nadirlik.n-nadir { color: #8DB7E0; }
.ans-nadirlik.n-cok-nadir { color: #C3A2E6; }
.ans-nadirlik.n-efsanevi { color: #F0B163; }

@media (max-width: 1100px) {
  .ans-izgara { grid-template-columns: minmax(0, 1fr); }
  .ans-yan { grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); }
  .ans-kategoriler { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .ans-oyun { grid-template-columns: auto minmax(0, 1fr); padding: 1.2rem 1.1rem; }
  .ans-oyun .eylemler { grid-column: 1 / -1; justify-content: flex-start; }
  .ans-iki { grid-template-columns: minmax(0, 1fr); }
  .ans-komsu { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ans-komsu-hepsi { grid-column: 1 / -1; grid-row: 2; justify-self: center; }
}
@media (max-width: 600px) {
  .ans-kategoriler { grid-template-columns: minmax(0, 1fr); }
  .ans-kategoriler .kural { grid-template-columns: 3.6rem minmax(0, 1fr); column-gap: 1rem; }
  .ans-kategoriler .kural .rozet-ikon { grid-row: 1 / span 3; margin: 0; }
  .ans-bas { grid-template-columns: minmax(0, 1fr); }
  .ans-madalyon { width: 3.6rem; padding: .65rem; }
  .ans-oge-liste, .ans-oge-liste.genis, .ans-kartlar { grid-template-columns: minmax(0, 1fr); }
  .ans-suzgec select { flex: 1 1 calc(50% - .3rem); }
  .ans-oyun .dugme { flex: 1 1 100%; white-space: normal; text-align: center; }
}

/* Arac sayfalari (Site\Araclar): arac kutusu kagida yapistirilmis bronz levha, aciklama ve tablolar parsomende. */
:is(.arac-sayfa, .sablon-sayfa) .arac-yol { margin: 0 0 .6rem; font: 600 var(--olcek-0)/1.3 var(--arayuz); }
:is(.arac-sayfa, .sablon-sayfa) .arac-yol a { display: inline-flex; align-items: center; gap: .3rem; }
:is(.arac-sayfa, .sablon-sayfa) .arac-yol .ikon { width: .95rem; height: .95rem; }
.arac-not { font: 400 var(--olcek-0)/1.5 var(--arayuz); color: var(--murekkep-soluk, #6B4F2E); }
.arac-kutu { margin: 1.6rem 0 .5rem; padding: clamp(1rem, 3vw, 1.6rem); background: radial-gradient(120% 80% at 50% 0%, #2B1F14 0%, transparent 70%), linear-gradient(180deg, #21170F, #140E0A);
  border: 1px solid #5A4632; border-radius: 6px; color: var(--kemik); font-family: var(--arayuz);
  box-shadow: inset 0 0 0 4px #140E0A, inset 0 0 0 5px rgba(201, 161, 94, .35), 0 1px 0 rgba(255, 240, 205, .5), 0 12px 26px rgba(60, 34, 12, .38); }
.tomar .parsomen-ic .arac-kutu h2, .arac-kutu h3 { color: var(--kor); font: 700 var(--olcek-2)/1.25 var(--baslik); margin: 0 0 .8rem; border: 0; padding: 0; }
.tomar .parsomen-ic .arac-kutu h2::before { display: none; }
.arac-kutu h3 { font-size: var(--olcek-1); margin-top: 1.4rem; }
.arac-kutu .alan { margin-bottom: 1rem; }
.arac-kutu label, .arac-kutu legend { color: var(--toz); }
.arac-kutu .eylemler { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1rem 0 0; }
.arac-kutu .arac-not { color: var(--toz); margin: 1rem 0 0; }
.tomar .parsomen-ic .arac-kutu a:not(.dugme) { color: var(--kor); }

/* Zar atici */
.zar-dugmeler { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 1.2rem; }
.zar-dugme { display: grid; justify-items: center; gap: .2rem; min-width: 4.2rem; padding: .55rem .4rem .45rem; border-radius: 50% 50% 46% 46% / 40% 40% 60% 60%; cursor: pointer;
  color: #F3DDB0; font: 700 .95rem/1 var(--baslik); background: radial-gradient(circle at 38% 30%, #5A4129, #1A120C 72%);
  border: 0; box-shadow: inset 0 0 0 1.5px #C9A15E, inset 0 0 0 4px #140E09, inset 0 0 0 5px rgba(201, 161, 94, .45), 0 3px 8px rgba(0, 0, 0, .45); transition: transform .12s, box-shadow .12s; }
.zar-dugme .ikon { width: 1.5rem; height: 1.5rem; color: var(--kor); }
.zar-dugme:hover, .zar-dugme:focus-visible { transform: translateY(-2px); outline: none; box-shadow: inset 0 0 0 1.5px #F6D896, inset 0 0 0 4px #140E09, inset 0 0 0 5px rgba(246, 216, 150, .7), 0 0 12px rgba(240, 150, 50, .45); }
.zar-dugme:active { transform: scale(.96); }
.zar-kip { display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; margin: 0 0 .5rem; padding: 0; border: 0; }
.zar-kip legend { width: 100%; margin-bottom: .4rem; font: 600 var(--olcek-0)/1.3 var(--arayuz); }
.zar-sonuc:empty { display: none; }
.zar-sonuc { margin-top: 1.2rem; }
.zar-kutu { padding: 1rem 1.1rem; border-radius: 8px; border: 1px solid rgba(201, 161, 94, .45); background: rgba(201, 161, 94, .07); animation: arac-gir .25s ease-out; }
.zar-ifade { margin: 0 0 .7rem; font: 700 var(--olcek-1)/1.2 var(--baslik); color: var(--kor); }
.zar-tasla { list-style: none; margin: 0 0 .8rem; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.zar-tas { min-width: 2.4rem; height: 2.4rem; display: grid; place-items: center; padding: 0 .4rem; border-radius: 7px; font: 700 1.05rem/1 var(--arayuz);
  color: #1E1408; background: linear-gradient(180deg, #F0CD86, #B8863F); box-shadow: inset 0 0 0 1px #FFF1C8, 0 2px 4px rgba(0, 0, 0, .4); }
.zar-tas.kritik { background: linear-gradient(180deg, #FFE7A8, #E0A94A); box-shadow: inset 0 0 0 1px #FFF6DC, 0 0 10px rgba(240, 190, 80, .7); }
.zar-tas.bir { color: #FFE9D6; background: linear-gradient(180deg, #C0452A, #7A1E0E); box-shadow: inset 0 0 0 1px #E58A70, 0 2px 4px rgba(0, 0, 0, .4); }
.zar-tas.dusen { opacity: .38; text-decoration: line-through; }
.zar-toplam { display: flex; align-items: baseline; gap: .8rem; margin: 0; }
.zar-toplam span { color: var(--toz); font-size: var(--olcek-0); text-transform: uppercase; letter-spacing: .08em; }
.zar-toplam strong { font: 700 var(--olcek-5)/1 var(--baslik); color: #FFF1D2; text-shadow: 0 0 18px rgba(233, 160, 60, .35); }
.zar-hata { margin: 0; color: var(--kritik); }
.zar-gecmis { margin: 0; padding-left: 1.3rem; color: var(--toz); font-size: var(--olcek-0); line-height: 1.7; }
.zar-gecmis .bos { list-style: none; margin-left: -1.3rem; }
@keyframes arac-gir { from { opacity: 0; transform: translateY(6px); } }

/* Karsilasma zorlugu */
.ks-iki { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 1.6rem; }
.ks-satirlar { display: flex; flex-direction: column; gap: .7rem; margin-bottom: .8rem; }
.ks-satir { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; padding: .7rem; border: 1px solid rgba(201, 161, 94, .3); border-radius: 6px; background: rgba(0, 0, 0, .18); }
.ks-satir .alan { margin: 0; flex: 1 1 7rem; min-width: 0; }
.ks-satir .ks-hazir { flex-basis: 100%; }
.ks-satir select { width: 100%; }
.ks-sil { align-self: flex-end; }
.ks-sonuc { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid rgba(201, 161, 94, .3); }
.ks-etiket { margin: 0 0 .4rem; color: var(--toz); font-size: var(--olcek-0); text-transform: uppercase; letter-spacing: .08em; }
.ks-butce { display: grid; grid-template-columns: repeat(3, auto 1fr); gap: .2rem .6rem; margin: 0 0 1rem; align-items: baseline; }
.ks-butce dt { color: var(--toz); }
.ks-butce dd { margin: 0; font: 700 var(--olcek-2)/1.2 var(--baslik); color: var(--kemik); }
.ks-toplam { display: flex; align-items: baseline; gap: .8rem; margin: 0 0 1.6rem; }
.ks-toplam span { color: var(--toz); }
.ks-toplam strong { font: 700 var(--olcek-4)/1 var(--baslik); color: #FFF1D2; }
.ks-cubuk { position: relative; height: .9rem; margin: 0 0 2.4rem; border-radius: 99px; background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(201, 161, 94, .35); }
.ks-dolu { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, var(--iyi), var(--uyari) 60%, var(--kritik)); transition: width .25s ease-out; }
.ks-cizgi { position: absolute; top: -.25rem; height: 1.4rem; width: 2px; background: var(--kor); transform: translateX(-1px); }
.ks-cizgi span { position: absolute; top: 1.7rem; left: 50%; transform: translateX(-50%); white-space: nowrap; color: var(--toz); font: 600 .72rem/1 var(--arayuz); }
.ks-yorum { margin: 0; padding: .7rem .9rem; border-radius: 6px; font-weight: 600; border-left: 3px solid var(--toz); background: rgba(255, 255, 255, .04); }
.ks-yorum.alti, .ks-yorum.sdusuk { border-color: var(--iyi); }
.ks-yorum.sorta { border-color: var(--uyari); }
.ks-yorum.syuksek, .ks-yorum.ustu { border-color: var(--kritik); color: #FFD2C4; }
.ks-kd-tablo th[scope="row"] { width: 4rem; }
@media (max-width: 760px) { .ks-iki { grid-template-columns: minmax(0, 1fr); } .ks-butce { grid-template-columns: auto 1fr; } .arac-kutu .dugme { white-space: normal; max-width: 100%; } }

/* Rastgele kahraman */
.kh-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.kh-kart { height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 1.1rem .9rem 1rem; border-radius: 8px;
  border: 1px solid rgba(201, 161, 94, .45); background: rgba(201, 161, 94, .06); animation: arac-gir .25s ease-out; }
.kh-kart[hidden] { display: none; }
.kh-madalya { width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 50%; color: #EBC67E;
  background: radial-gradient(circle at 38% 30%, #5A4129, #1A120C 72%); box-shadow: inset 0 0 0 1.5px #C9A15E, inset 0 0 0 4px #140E09, inset 0 0 0 5px rgba(201, 161, 94, .45); }
.kh-madalya .ikon { width: 2.1rem; height: 2.1rem; }
.kh-etiket { margin: .7rem 0 .1rem; color: var(--toz); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; }
.tomar .parsomen-ic .arac-kutu .kh-ad { margin: 0 0 .5rem; font-size: var(--olcek-3); color: var(--kor); }
.kh-ozet { margin: 0 0 .9rem; font: 400 var(--olcek-0)/1.5 var(--anlati); color: var(--kemik); flex: 1; }
.kh-ans { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; font-size: var(--olcek-0); }
.kh-ans .ikon { width: 1rem; height: 1rem; }
@media (max-width: 760px) { .kh-kartlar { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kh-kart, .zar-kutu { animation: none; } .zar-dugme, .ks-dolu { transition: none; } }

/* Arac listesi (dizin ve diger araclar) */
.arac-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.tomar .parsomen-ic .arac-liste a { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 6px;
  border: 1px solid var(--murekkep-ince); background: var(--kagit-acik); text-decoration: none; }
.tomar .parsomen-ic .arac-liste a:hover, .tomar .parsomen-ic .arac-liste a:focus-visible { border-color: #7A4A1E; background: rgba(255, 248, 230, .6); }
.arac-liste strong { display: block; font: 700 var(--olcek-2)/1.2 var(--baslik); color: var(--murekkep-koyu); }
.arac-liste small { display: block; margin-top: .2rem; font: 400 var(--olcek-0)/1.45 var(--arayuz); color: var(--murekkep); }
.arac-git { display: inline-flex; align-items: center; gap: .3rem; font: 600 var(--olcek-0)/1 var(--arayuz); color: #7A4A1E; }
.arac-git .ikon { width: 1rem; height: 1rem; }
.tomar .parsomen-ic .arac-liste.kucuk a { grid-template-columns: 2.9rem minmax(0, 1fr); }
@media (max-width: 560px) { .tomar .parsomen-ic .arac-liste a { grid-template-columns: 2.9rem minmax(0, 1fr); } .arac-git { display: none; } }

/* Parsomen metin renkleri bronz levhanin icine gecmesin: murekkep degiskenleri levhanin renklerine doner. */
.tomar .parsomen-ic .arac-kutu { --murekkep: var(--kemik); --murekkep-koyu: var(--kor); --murekkep-soluk: var(--toz); }
.tomar .parsomen-ic .arac-kutu :is(h2, h3) { color: var(--kor) !important; text-shadow: 0 1px 0 #000 !important; }
.tomar .parsomen-ic .arac-kutu :is(label, legend, .onay span, .zar-gecmis li, .ks-etiket, .ks-butce dt, .ks-toplam span, .kh-etiket, .arac-not) { color: var(--toz); }
.tomar .parsomen-ic .arac-kutu :is(strong, th) { color: inherit; }
.tomar .parsomen-ic .arac-kutu .ks-yorum:is(.syuksek, .ustu) { color: #FFD2C4 !important; }
/* .parsomen-ic p kurali rengi !important ile murekkebe sabitler: levhanin paragraflari ayni gucle geri alinir. */
.tomar .parsomen-ic .arac-kutu p { color: var(--kemik) !important; }
.tomar .parsomen-ic .arac-kutu p:is(.ks-etiket, .kh-etiket, .arac-not) { color: var(--toz) !important; }
.tomar .parsomen-ic .arac-kutu p.zar-ifade { color: var(--kor) !important; }
.tomar .parsomen-ic .arac-kutu p.zar-hata { color: var(--kritik) !important; }
.arac-kutu :is(div, label, select, input) { min-width: 0; }
.arac-kutu select, .arac-kutu input { max-width: 100%; }
.tomar .parsomen-ic .arac-sayfa .rehber-diger h2, .arac-sayfa .tomar .rehber-diger h2 { font-size: var(--olcek-3); margin: 0 0 .6rem; }

/* Topluluk maceralari (Site\Sablonlar): dizin kartlari ve ayrinti sayfasi, parsomen icinde. */
.sb-bos { font: 400 var(--olcek-1)/1.6 var(--anlati); }
.sb-liste { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .9rem; }
.tomar .parsomen-ic .sb-liste a { display: grid; grid-template-columns: 2.9rem minmax(0, 1fr) auto; align-items: center; gap: .9rem; padding: .9rem 1rem; border-radius: 6px;
  border: 1px solid var(--murekkep-ince); background: var(--kagit-acik); text-decoration: none; }
.tomar .parsomen-ic .sb-liste a:hover, .tomar .parsomen-ic .sb-liste a:focus-visible { border-color: #7A4A1E; background: rgba(255, 248, 230, .6); }
.sb-liste-metin { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.sb-liste strong { font: 700 var(--olcek-2)/1.2 var(--baslik); color: var(--murekkep-koyu); }
.sb-liste small { font: 400 var(--olcek-0)/1.45 var(--arayuz); color: var(--murekkep); }
.tomar .parsomen-ic .sb-liste.kucuk a { grid-template-columns: 2.9rem minmax(0, 1fr); }
.sb-meta { font: 600 var(--olcek-0)/1.4 var(--arayuz); color: var(--murekkep-soluk); }
.sb-meta-buyuk { display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: .4rem 0 1.4rem; }
.sb-meta-buyuk span { display: inline-flex; align-items: center; gap: .35rem; }
.sb-meta-buyuk .ikon { width: 1.05rem; height: 1.05rem; color: #7A4A1E; }
.sb-anlat .eylemler { margin-top: .4rem; }
.sb-sahneler { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 1.3rem; }
.tomar .parsomen-ic .sb-sahneler h3 { display: flex; align-items: center; gap: .7rem; margin: 0 0 .3rem; font: 700 var(--olcek-2)/1.25 var(--baslik); color: var(--murekkep-koyu); }
.sb-sahneler .muhur.kucuk { width: 2.3rem; height: 2.3rem; font-size: 1rem; flex: none; }
.sb-sahneler p { margin: .2rem 0 0 3rem; font: 400 var(--olcek-1)/1.6 var(--anlati); }
.tomar .parsomen-ic .sb-sahneler .sb-yer { font: 600 var(--olcek-0)/1.3 var(--arayuz); color: var(--murekkep-soluk) !important; text-transform: uppercase; letter-spacing: .06em; }
.sb-kisiler { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: .8rem 1.4rem; margin: 1rem 0 0; }
.sb-kisiler div { padding-left: .8rem; border-left: 2px solid var(--murekkep-ince); }
.tomar .parsomen-ic .sb-kisiler dt { font: 700 var(--olcek-1)/1.3 var(--baslik); color: var(--murekkep-koyu); }
.sb-kisiler dd { margin: .15rem 0 0; font: 400 var(--olcek-0)/1.45 var(--arayuz); }
@media (max-width: 560px) { .tomar .parsomen-ic .sb-liste a { grid-template-columns: 2.9rem minmax(0, 1fr); } .sb-liste .arac-git { display: none; } .sb-sahneler p { margin-left: 0; } }