/* Embervale Docs (2026-10-19). Ayni gorsel dil: krem kart, koyu mor cerceve, turuncu vurgu. */
/* Yazi tipleri yerel (canli sitenin CSP kurali dis kaynaktan font yuklemeyi engeller). */
@font-face { font-family: 'Nunito'; src: url(fonts/nunito-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(fonts/nunito-latin-800-normal.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(fonts/nunito-latin-900-normal.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Pixelify Sans'; src: url(fonts/pixelify-sans-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url(fonts/silkscreen-latin-400-normal.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url(fonts/silkscreen-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Space Mono'; src: url(fonts/space-mono-latin-700-normal.woff2) format('woff2'); font-weight: 700; font-display: swap; }
:root { --ink: #2a1430; --cream: #fff4dc; --paper: #f6e3c3; --orange: #e2702a; --yellow: #ffd24a; --muted: #5a3a35; --soft: #9a7c70; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: Nunito, sans-serif; color: var(--ink); background: #1d0f22; min-height: 100vh; }
a { color: inherit; }
.bg { position: fixed; inset: 0; background: url(img/bg.jpg) center/cover, #2a1430; filter: blur(6px); transform: scale(1.04); z-index: -1; }
.bg::after { content: ''; position: absolute; inset: 0; background: rgba(42,20,48,.74); }
.wrap { max-width: 1480px; margin: 0 auto; padding: 18px 16px 40px; }

.nav { display: flex; align-items: center; gap: 12px; background: var(--cream); border: 5px solid var(--ink); border-radius: 16px; padding: 10px 14px; position: sticky; top: 10px; z-index: 5; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: 10px; }
.brand img { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--ink); }
.brand span { font-family: 'Pixelify Sans'; font-size: 28px; letter-spacing: 1px; }
.tab { font-family: Silkscreen; font-weight: 700; font-size: 16px; letter-spacing: 2px; padding: 8px 14px; border: 4px solid var(--ink); background: var(--cream); text-decoration: none; color: var(--ink); cursor: pointer; }
.tab.on { background: var(--yellow); }
.tab.x { background: var(--ink); color: var(--cream); }
.tab.menu { display: none; }
.sp { flex: 1; }

.main { display: grid; grid-template-columns: 310px minmax(0, 1fr); gap: 22px; margin-top: 20px; align-items: start; }
.side { background: var(--paper); border: 5px solid var(--ink); border-radius: 14px; padding: 16px 14px; position: sticky; top: 100px; max-height: calc(100vh - 120px); overflow: auto; }
.search { width: 100%; background: var(--cream); border: 4px solid var(--ink); border-radius: 8px; padding: 9px 12px; font: 800 16px Nunito, sans-serif; color: var(--ink); }
.results { margin-top: 8px; }
.results a { display: block; padding: 7px 10px; border-radius: 8px; font-weight: 800; text-decoration: none; color: var(--muted); }
.results a:hover { background: var(--cream); }
.results .none { padding: 7px 10px; font-weight: 800; color: var(--soft); }
.grp { font-family: Silkscreen; font-weight: 700; font-size: 13px; letter-spacing: 2px; color: var(--orange); margin: 16px 6px 6px; }
.it { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-weight: 800; font-size: 17px; color: var(--muted); text-decoration: none; }
.it:hover { background: var(--cream); }
.it .ic { width: 24px; text-align: center; }
.it.on { background: var(--ink); color: var(--cream); }

.page { background: var(--paper); border: 5px solid var(--ink); border-radius: 14px; padding: 28px 34px 32px; min-height: 60vh; outline: none; }
.crumb { font-family: Silkscreen; font-size: 14px; letter-spacing: 2px; color: var(--soft); }
.page h1 { font-family: 'Pixelify Sans'; font-size: 50px; margin: 6px 0 6px; color: var(--orange); text-shadow: 3px 3px 0 var(--ink); line-height: 1.1; }
.page h2 { font-family: Silkscreen; font-weight: 700; font-size: 22px; letter-spacing: 2px; margin: 30px 0 12px; }
.page h3 { font-weight: 900; font-size: 22px; margin: 22px 0 8px; }
.page p, .page li { font-weight: 800; font-size: 18px; line-height: 1.5; color: var(--muted); }
.page .lead { font-size: 21px; max-width: 980px; margin: 0; }
.page ul { padding-left: 22px; }
.page strong { color: var(--ink); }

/* Ekran goruntusu + numarali isaretler (konumlar % olarak) */
.shot { margin-top: 20px; border: 5px solid var(--ink); border-radius: 12px; overflow: hidden; position: relative; box-shadow: 8px 8px 0 rgba(42,20,48,.3); background: var(--ink); }
.shot img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
.shot.crop { aspect-ratio: 16 / 8.4; }
.shot.crop img { height: 100%; object-fit: cover; object-position: top; }
/* Numaranin merkezi verilen noktaya oturur, etiket saginda durur (.pin.l: etiket solda). */
.pin { position: absolute; transform: translate(-20px, -50%); display: flex; align-items: center; gap: 6px; pointer-events: none; }
.pin.l { transform: translate(calc(-100% + 20px), -50%); flex-direction: row-reverse; }
.legend { display: none; margin: 10px 0 0; padding-left: 0; list-style: none; }
.legend li { font-weight: 800; font-size: 15px; color: var(--muted); margin: 4px 0; }
.legend b { display: inline-flex; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); font: 700 13px 'Space Mono', monospace; align-items: center; justify-content: center; margin-right: 8px; }
.pin b { width: 40px; height: 40px; border-radius: 50%; background: var(--yellow); border: 4px solid var(--ink); font: 700 20px 'Space Mono', monospace; display: flex; align-items: center; justify-content: center; box-shadow: 3px 3px 0 rgba(42,20,48,.5); flex: none; }
.pin span { background: var(--cream); border: 4px solid var(--ink); border-radius: 8px; padding: 4px 10px; font-weight: 900; font-size: 16px; white-space: nowrap; }
.figcap { font-weight: 800; font-size: 15px; color: var(--soft); margin: 8px 2px 0; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.step { background: var(--cream); border: 5px solid var(--ink); border-radius: 12px; padding: 16px 16px 14px; box-shadow: 5px 5px 0 rgba(42,20,48,.25); }
.step .n { display: inline-flex; width: 36px; height: 36px; border-radius: 50%; background: var(--orange); color: var(--cream); border: 3px solid var(--ink); font: 700 19px 'Space Mono', monospace; align-items: center; justify-content: center; }
.step .t { font-weight: 900; font-size: 22px; margin: 8px 0 4px; color: var(--ink); }
.step .d { font-weight: 800; font-size: 17px; line-height: 1.45; color: var(--muted); }
.key { display: inline-block; font: 700 14px 'Space Mono', monospace; background: var(--ink); color: var(--cream); padding: 1px 8px; border-radius: 5px; vertical-align: 1px; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.card { background: var(--cream); border: 4px solid var(--ink); border-radius: 12px; padding: 14px; text-align: center; }
.card img { width: 96px; height: 96px; object-fit: contain; image-rendering: pixelated; }
.card .t { font-weight: 900; font-size: 19px; }
.card .d { font-weight: 800; font-size: 15px; color: var(--muted); }

.tip, .warn { margin-top: 20px; display: flex; gap: 14px; align-items: flex-start; border: 5px solid var(--ink); border-radius: 12px; padding: 14px 18px; }
.tip { background: #fff0b8; }
.warn { background: #ffd9c7; }
.tip .b, .warn .b { font-family: Silkscreen; font-weight: 700; font-size: 16px; letter-spacing: 2px; background: var(--ink); color: var(--yellow); padding: 4px 10px; border-radius: 6px; white-space: nowrap; }
.tip p, .warn p { margin: 0; color: var(--ink); }

.faq details { background: var(--cream); border: 4px solid var(--ink); border-radius: 10px; padding: 12px 16px; margin-top: 12px; }
.faq summary { font-weight: 900; font-size: 18px; cursor: pointer; }
.faq details p { margin: 10px 0 0; }

.next { margin-top: 28px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.btn { font-family: Silkscreen; font-weight: 700; font-size: 16px; letter-spacing: 2px; padding: 11px 18px; border: 4px solid var(--ink); background: var(--cream); text-decoration: none; color: var(--ink); }
.btn.y { background: var(--yellow); margin-left: auto; }

@media (max-width: 900px) {
  .main { grid-template-columns: 1fr; }
  .tab.menu { display: inline-block; }
  .nav { gap: 8px; padding: 8px 10px; flex-wrap: nowrap; }
  .nav .tab:not(.menu) { display: none; }
  .brand { margin-right: 0; min-width: 0; }
  .brand img { width: 36px; height: 36px; }
  .brand span { font-size: 22px; }
  .tab { font-size: 13px; padding: 6px 10px; }
  .wrap { padding: 12px 10px 30px; }
  .page h2 { font-size: 18px; }
  .shot, .steps, .cards { max-width: 100%; }
  .page * { max-width: 100%; overflow-wrap: anywhere; }
  .side { display: none; position: static; max-height: none; }
  .side.open { display: block; }
  .page { padding: 20px 16px 24px; }
  .page h1 { font-size: 36px; }
  .pin span { display: none; }
  .pin, .pin.l { transform: translate(-50%, -50%); }
  .legend { display: block; }
  .pin b { width: 30px; height: 30px; font-size: 15px; border-width: 3px; }
}