/* /rehber/ uygulama rehberi. Tokenlar /ankitus.css'ten gelir (tokens.json v1.10.0).
   Adım listesi ve takılırsanız kutusu eski rehber.css deseninin aynısı; rehber.css
   yerinde duruyor (karar 8), bu sayfa onu yüklemez. */

.rehber { padding-block: var(--s8) var(--s9); }
.rehber h1 { font-size: clamp(2rem, 4.6vw, 3.25rem); margin: var(--s2) 0 var(--s5); }
.rehber .lede { margin-bottom: var(--s4); }
.rehber__ac { margin-top: var(--s5); }
.rehber__not { color: var(--ink-subtle); font-size: .9375rem; }

/* Uygulama içi tarayıcı uyarısı */
.uyari { border-left: 3px solid var(--blue); background: var(--surface-alt); border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s4) var(--s5); margin-top: var(--s6); }
.uyari b { font-weight: 500; }

/* Sekmeler: seçili durum mürekkeple işaretlenir, maviyle değil (ankitus.css kuralı) */
.sekmeler { margin-top: var(--s7); position: sticky; top: 0; z-index: 5; background: var(--paper); padding-block: var(--s3); border-bottom: 1px solid var(--hairline); }
.sekme-sira, .secim { display: flex; gap: var(--s2); flex-wrap: wrap; }
.secim { margin-top: var(--s3); }
.sekme-sira button, .secim button { cursor: pointer; border: 1px solid var(--hairline); background: var(--paper); color: var(--ink);
  border-radius: var(--r-pill); font: inherit; line-height: 1; }
.sekme-sira button { padding: 12px 20px; font-size: 1rem; }
.secim button { padding: 9px 16px; font-size: .9375rem; color: var(--ink-muted); }
.sekme-sira button:hover, .secim button:hover { border-color: var(--ink-faint); }
.sekme-sira button[aria-selected="true"], .secim button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
.sekme-sira button:focus-visible, .secim button:focus-visible { outline: 2px solid var(--blue-700); outline-offset: 2px; }

/* Yol bölümleri */
section.yol { margin-top: var(--s8); scroll-margin-top: 140px; }
.js-sekme section.yol { margin-top: var(--s6); }
section.yol h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.yol__not { color: var(--ink-subtle); font-size: .9375rem; margin-top: var(--s3); }

/* Adım listesi (eski rehber.css ol.adimlar) */
ol.adimlar { list-style: none; margin: var(--s5) 0 0; padding: 0; counter-reset: adim; }
ol.adimlar > li { counter-increment: adim; position: relative; padding: 0 0 var(--s6) var(--s7); border-left: 1px solid var(--hairline); margin-left: 15px; }
ol.adimlar > li:last-child { border-left-color: transparent; padding-bottom: 0; }
ol.adimlar > li::before { content: counter(adim); position: absolute; left: -15px; top: -2px; width: 30px; height: 30px;
  background: var(--blue); color: var(--ink); border-radius: 999px; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 500; }
.adim { font-size: 1.0625rem; color: var(--ink); margin: 0; }
.adim a { color: var(--blue-700); text-decoration: none; border-bottom: 1px solid var(--blue-100); }
.adim a:hover { border-bottom-color: var(--blue-700); }

/* Kurulum kareleri: kırpılmış ekran şeridi, çerçevesiz; kenar hairline, köşe r-md */
figure.ss { margin: var(--s4) 0 0; }
figure.ss img { display: block; width: min(100%, var(--gen, 393px)); height: auto; border: 1px solid var(--hairline); border-radius: var(--r-md); background: #14161A; }
figure.ss figcaption { font-size: .9375rem; color: var(--ink-subtle); margin-top: var(--s2); max-width: 56ch; }

/* Takılırsanız (eski rehber.css details.takilirsan) */
.takilirsaniz { margin-top: var(--s9); }
.takilirsaniz h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--s4); }
details.takilirsan { background: var(--blue-050); border: 1px solid var(--blue-100); border-radius: var(--r-md); padding: var(--s4) var(--s5); margin: var(--s3) 0; }
details.takilirsan summary { cursor: pointer; list-style: none; color: var(--blue-700); }
details.takilirsan summary::-webkit-details-marker { display: none; }
details.takilirsan summary::before { content: "+ "; }
details.takilirsan[open] summary::before { content: "\2212 "; }
details.takilirsan[open] summary { margin-bottom: var(--s3); }
details.takilirsan p { color: var(--ink-muted); margin: 0; }

@media (max-width: 640px) {
  .rehber { padding-block: var(--s6) var(--s8); }
  ol.adimlar > li { padding-left: var(--s6); }
  /* Dar ekranda kare adım girintisinden çıkar, sütunun tamamını kullanır: etiketler okunur kalsın */
  ol.adimlar figure.ss { margin-left: calc(-1 * (var(--s6) + 16px)); width: calc(100% + var(--s6) + 16px); }
  .sekme-sira button { padding: 11px 16px; }
}