/* optionOS website — guide / tutorial
   tokens: base.css · category axis (.guide-tabs + html[data-category]) TEK-EV base.css · sayfa-kalıbı: whats-new kardeşi */

html { scroll-snap-type: none; height: auto; scroll-behavior: smooth; }

/* iki-dil: i18n.js html[lang]'ı set eder · seçili-olmayan dil blokları gizlenir (sayfa-scoped) */
html[lang="tr"] .g-wrap [lang="en"] { display: none; }
html[lang="en"] .g-wrap [lang="tr"] { display: none; }

.g-wrap { max-width: 920px; margin: 0 auto; padding: 56px 20px 96px; }
.g-wrap .brand { margin-bottom: 44px; }

.g-head h1 { font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.g-head p { color: var(--muted); margin-top: 8px; font-size: 15px; }

.category-hidden:not(button) { display: none; }

/* nav (sol · sticky) + içerik (sağ) · anchor /guide/#{id} = kas-hafızası hedefi */
.g-body { display: grid; grid-template-columns: 220px 1fr; gap: 40px; margin-top: 32px; align-items: start; }
.g-nav { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 2px; }
.g-nav a {
  color: var(--muted); font-size: 14px; line-height: 1.4;
  padding: 8px 12px; border-radius: 8px; border-left: 2px solid transparent;
}
.g-nav a small { display: block; margin-top: 3px; color: var(--dim); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .04em; }
.g-nav a:hover { color: var(--text); background: var(--panel); }
.g-nav a:target, .g-nav a.on { color: var(--text); border-left-color: var(--blue); }

.g-page {
  scroll-margin-top: 24px;
  margin-bottom: 40px; padding: 24px 26px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 16px; backdrop-filter: blur(8px);
}
.g-page h2 { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.g-page p { color: var(--muted); line-height: 1.7; margin-top: 12px; font-size: 15px; }
.g-page img {
  max-width: 100%; border-radius: 10px;
  border: 1px solid var(--line-2); margin-top: 14px;
  background: rgba(0,0,0,.2);
}
.g-page a { color: var(--blue-hi); }
.g-page a:hover { text-decoration: underline; }
.g-page code {
  font-family: var(--mono); font-size: 13px;
  background: var(--panel-2); border: 1px solid var(--line);
  padding: 2px 6px; border-radius: 6px;
}
.g-page strong { color: var(--text); }

.g-empty { color: var(--dim); margin-top: 48px; }

@media (max-width: 720px) {
  .g-body { grid-template-columns: 1fr; }
  .g-nav { position: static; flex-direction: row; flex-wrap: wrap; }
}


.g-image-card {
  margin: 18px 0 22px; padding: 12px;
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 14px;
}
.g-image-card img { display: block; width: 100%; max-width: 100%; margin: 0; }
.g-image-card figcaption { color: var(--muted); font-size: 13px; line-height: 1.5; margin-top: 10px; }
.g-image-description { color: var(--dim); font-size: 12.5px; line-height: 1.55; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.g-callout-legend { display: grid; gap: 7px; margin-top: 12px; padding: 0; list-style: none; }
.g-callout-legend li { display: grid; grid-template-columns: auto 1fr; gap: 8px; align-items: start; color: var(--muted); font-size: 13px; line-height: 1.45; }
.g-callout-n { min-width: 22px; height: 22px; border-radius: 999px; display: inline-grid; place-items: center; color: white; background: var(--blue); font: 12px var(--mono); }

.g-tag-panel {
  margin: 14px 0 18px; padding: 12px;
  background: rgba(90, 140, 255, .07); border: 1px solid var(--line);
  border-radius: 14px;
}
.g-tag-title { color: var(--dim); font: 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 8px; }
.g-tag-panel ul { display: grid; gap: 8px; padding: 0; margin: 0; list-style: none; }
.g-tag-panel li { display: grid; grid-template-columns: minmax(128px, auto) 1fr; gap: 10px; align-items: start; color: var(--muted); font-size: 13px; line-height: 1.45; }
.g-tag-panel code { width: fit-content; color: var(--text); }

@media (max-width: 720px) {
  .g-tag-panel li { grid-template-columns: 1fr; gap: 4px; }
}

.g-tree {
  margin: 14px 0; padding: 14px;
  overflow: auto; color: var(--muted);
  background: rgba(255,255,255,.035); border: 1px solid var(--line);
  border-radius: 12px;
}
.g-tree code { background: transparent; border: 0; padding: 0; font-size: 13px; line-height: 1.55; }

.g-tag-panel code.tag-amber { background: rgba(180, 120, 40, .16); border-color: rgba(214, 156, 68, .35); color: #e8c37a; }
.g-tag-panel code.tag-green { background: rgba(58, 143, 95, .16); border-color: rgba(87, 178, 123, .35); color: #95d6ad; }
.g-tag-panel code.tag-blue { background: rgba(66, 119, 210, .16); border-color: rgba(94, 145, 229, .35); color: #a9c6ff; }
.g-tag-panel code.tag-violet { background: rgba(125, 92, 198, .16); border-color: rgba(157, 127, 224, .35); color: #c9b7ff; }
.g-tag-panel code.tag-slate { background: rgba(120, 130, 150, .13); border-color: rgba(150, 160, 178, .28); color: #c2c8d2; }
.g-tag-panel code.tag-teal { background: rgba(57, 145, 143, .16); border-color: rgba(84, 181, 178, .35); color: #9bddda; }
.g-tag-panel code.tag-purple { background: rgba(145, 84, 190, .16); border-color: rgba(178, 119, 222, .35); color: #dab4ff; }
.g-tag-panel code.tag-cyan { background: rgba(59, 142, 176, .16); border-color: rgba(87, 176, 211, .35); color: #a8e1f5; }
.g-tag-panel code.tag-beige { background: rgba(160, 130, 86, .16); border-color: rgba(190, 160, 112, .35); color: #dcc49d; }