/* Guide kit: shared guide pieces. Built from site.css tokens (GUI, slot, tooltip). */

/* both languages are in the page; show one */
:root:not([lang="tr"]) [data-l="tr"], :root[lang="tr"] [data-l="en"] { display: none !important; }

/* ---------- tag: what v3.7.0 added ---------- */
.g-tag {
  display: inline-flex; align-items: center; gap: 6px; vertical-align: middle;
  font-family: var(--f-block); font-size: 11px; line-height: 1; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 7px 4px; color: #1d1405; background: #ffd83d;
  box-shadow: inset -2px -2px 0 #b8901a, inset 2px 2px 0 #fff3a8;
  text-shadow: none; white-space: nowrap;
}

/* ---------- keycaps ---------- */
.g-keys { display: inline-flex; align-items: center; gap: 4px; vertical-align: middle; }
.g-keys i { font-style: normal; color: var(--text-3); font-size: 13px; }
.g-keys kbd {
  font-family: var(--f-pixel); font-size: 14px; line-height: 1; color: #fff;
  min-width: 26px; padding: 5px 7px 6px; text-align: center;
  background: #3a3a40; border: 2px solid #000;
  box-shadow: inset 2px 2px 0 rgb(255 255 255 / .18), inset -2px -3px 0 rgb(0 0 0 / .45);
}

/* ---------- callout ---------- */
.g-note {
  --c: var(--aqua);
  display: grid; grid-template-columns: 25px 1fr; gap: 12px; align-items: start;
  padding: 12px 14px; margin-top: 14px;
  background: rgb(16 0 16 / .62); border-left: 4px solid var(--c);
  box-shadow: inset 0 0 0 2px rgb(0 0 0 / .5);
}
.g-note.is-tip { --c: #ffe04a; }
.g-note.is-warn { --c: #ff9f43; }
.g-note .ico { margin-top: 1px; }
.g-note b { display: block; font-family: var(--f-pixel); font-weight: 400; font-size: 15px; color: var(--c); line-height: 1.2; margin-bottom: 4px; }
.g-note p { font-size: 15px; line-height: 1.5; color: #dcdce2; }
.g-note a { color: var(--c); }

/* ---------- screenshot frame + highlight ---------- */
.g-frame { position: relative; overflow: hidden; aspect-ratio: 880 / 580; background: #111; }
.g-frame img { width: 100%; height: 100%; object-fit: cover; transition: opacity .25s var(--ease); }
.g-frame img.is-swapping { opacity: .35; }
.g-rect {
  position: absolute; pointer-events: none;
  border: 2px solid #fff; outline: 2px solid #000;
  box-shadow: 0 0 0 200vmax rgb(8 8 12 / .55);
  transition: left .5s var(--ease), top .5s var(--ease), width .5s var(--ease), height .5s var(--ease), opacity .3s;
}

/* ---------- step body text, shared rhythm ---------- */
.g-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.g-h .g-keys { margin-left: auto; }

/* ---------- hero text ---------- */
.g-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-family: var(--f-pixel); font-size: 16px; color: #e8e8ee; text-shadow: 2px 2px 0 var(--mc-shadow); }
.g-eyebrow code { font-family: var(--f-mono); font-size: 14px; padding: 3px 7px; background: rgb(0 0 0 / .45); text-shadow: none; }
.g-lede { margin-top: 20px; max-width: 48ch; font-size: 19px; color: #f2f4fa; text-shadow: 0 1px 2px rgb(0 0 0 / .7); }
.g-meta { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; font-size: 15px; color: #d6d8e2; text-shadow: 0 1px 2px rgb(0 0 0 / .8); }
.g-meta .dot { width: 4px; height: 4px; background: currentColor; opacity: .6; }
.g-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- What's new head ---------- */
.g-new-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; margin-bottom: 20px; }
.g-new-head h2 { font-family: var(--f-pixel); font-weight: 400; font-size: clamp(26px, 2.6vw, 34px); color: #fff; text-shadow: 3px 3px 0 var(--mc-shadow); }
.g-new-head p { color: var(--text-2); font-size: 16px; }
@media (max-width: 560px) { .g-lede { font-size: 17px; } }