/* Sayfa-içi çıkış kutusu (tools/cta_box.py): kod sayfaları + rehberler. Düz zemin, tokens.css değişkenleri; degrade/parlama/gölge yok. */
.cta-box { margin: 40px 0 0; padding: 24px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2);
  display: grid; gap: 16px; align-items: center; color: var(--text); }
.cta-box h2 { margin: 0 0 6px; font-size: var(--fs-lg); line-height: var(--lh-tight); color: var(--text); }
.cta-box p { margin: 0; max-width: 62ch; color: var(--text-2); }
.cta-box .cta-more { margin-top: 10px; font-size: var(--fs-sm); }
.cta-box .cta-more a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.cta-box .btn { justify-self: start; }
@media (min-width: 720px) {
  .cta-box { grid-template-columns: 1fr auto; padding: 28px 32px; gap: 28px; }
  .cta-box .btn { justify-self: end; }
}
@media print { .cta-box { display: none; } }

/* Kod sayfası "GBF'nizde nerede geçmeli?" kartı (tools/code_card.py): düz zemin, 1px kenarlık, gölge/degrade yok. */
.code-card { margin: 0 0 32px; padding: 20px 24px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); color: var(--text); }
.code-card h2 { margin: 0 0 8px; font-size: var(--fs-lg); line-height: var(--lh-tight); color: var(--text); }
.code-card p { margin: 0 0 12px; color: var(--text-2); }
.code-card-map { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.code-card-map li { display: grid; grid-template-columns: 7.5em 1fr; gap: 10px; padding: 8px 12px; background: var(--surface-2); border-radius: var(--radius-sm); }
.code-card-map strong { color: var(--text); }
.code-card-map span { color: var(--text-2); }
.code-card .btn-primary, .code-card .btn-primary:hover { color: var(--surface); text-decoration: none; }
.code-card-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 8px; }
.code-card-cta span { color: var(--text-2); font-size: var(--fs-sm); }
.code-card .cta-more { margin: 0 0 12px; font-size: var(--fs-sm); }
.code-card .cta-more a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.code-card-d > summary { cursor: pointer; margin: 0 0 12px; }
.code-card-d > summary h2 { display: inline; margin: 0; }
.code-card-d[open] > summary { margin-bottom: 8px; }
.code-card .code-card-src { margin: 0; font-size: var(--fs-sm); color: var(--text-2); }
@media (max-width: 520px) { .code-card { padding: 16px; } .code-card-map li { grid-template-columns: 1fr; gap: 2px; } }
@media print { .code-card .btn, .code-card-cta { display: none; } }

/* Sayfa üstü şerit (tools/cta_box.hero_strip): hero özetinin / rehber lead'inin hemen altında, ilk ekranda. Düz zemin, 1px kenarlık, gölge/degrade yok. */
.hero-strip { margin: 16px 0 0; padding: 10px 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-2);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; color: var(--text); }
.hero-strip p { margin: 0; flex: 1 1 260px; min-width: 0; font-size: var(--fs-sm); line-height: 1.35; font-weight: 600; color: var(--text); }
.hero-strip-act { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.hero-strip .btn { min-height: 40px; padding: 8px 14px; font-size: .9375rem; white-space: nowrap; }
.hero-strip .btn-primary, .hero-strip .btn-primary:hover { color: var(--surface); text-decoration: none; }
.hero-strip-more { font-size: var(--fs-sm); color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.g-article > .hero-strip { margin: 0 0 24px; }
@media (max-width: 520px) {
  .hero-strip { padding: 10px 12px; gap: 8px; }
  .hero-strip p { flex-basis: 100%; font-size: .8125rem; }
  .hero-strip-act { width: 100%; justify-content: space-between; }
}
/* Mobil: kod sayfasında şerit özet kutusunun ÜSTÜNE (ilk ekranda kalsın); özet kutusu dar ekranda uzun */
@media (max-width: 719px) {
  .g-hero-inner:has(> .k-summary) { display: flex; flex-direction: column; }
  .g-hero-inner > .hero-strip { order: 3; margin: 12px 0 16px; }
  .g-hero-inner > .k-summary { order: 4; }
}
@media print { .hero-strip { display: none; } }

/* Yan kart / alt çubuk (tools/cta_box.sticky_bar + static/sticky-cta.js): pop-up değil. Düz marka zemini (#3034FF) üstünde beyaz metin
   (kontrast 7:1, WCAG AA); gölge/degrade yok. Dar ekran: alt tam genişlik çubuk (5 sn ya da %10 kaydırma). Geniş masaüstü (js .is-side; kod sayfası >=1360 px,
   rehber [data-wide] >=1600 px): içerik sütununun sağ boşluğunda, üstten 96 px, kaydırmayla birlikte kalan kart; yüklenince hemen görünür. */
.sticky-cta { --col: 880px; position: fixed; z-index: 900; background: var(--primary); color: #fff; display: grid; align-items: center; gap: 8px;
  left: 0; right: 0; bottom: 0; padding: 8px 8px 8px 12px; grid-template-columns: 1fr auto 32px; grid-template-areas: "text btn x"; }
.sticky-cta[data-wide] { --col: 1096px; }
.sticky-cta[hidden] { display: none; }
.sticky-cta-shot, .sticky-cta-t, .sticky-cta-note { display: none; }
.sticky-cta p { grid-area: text; margin: 0; min-width: 0; font-size: .8125rem; line-height: 1.25; color: #fff; }
.sticky-cta .btn { grid-area: btn; min-height: 40px; padding: 8px 12px; font-size: .875rem; font-weight: 600; white-space: nowrap;
  background: #fff; border-color: #fff; color: var(--primary); }
.sticky-cta .btn:hover { background: var(--primary-soft); border-color: var(--primary-soft); color: var(--primary); }
.sticky-cta-x { grid-area: x; align-self: start; width: 32px; height: 32px; border: 0; border-radius: var(--radius-sm); background: transparent;
  color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.sticky-cta-x:hover { background: rgba(255, 255, 255, .18); }
.sticky-cta-x:focus-visible, .sticky-cta .btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
body.has-sticky:not(.has-side) { padding-bottom: var(--sticky-h, 72px); }
.sticky-cta.is-side { left: auto; bottom: auto; top: 96px; right: 16px; width: clamp(200px, calc((100vw - var(--col)) / 2 - 48px), 280px);
  padding: 0 0 14px; gap: 6px 12px; border-radius: var(--radius-lg); overflow: hidden;
  grid-template-columns: 1fr 32px; grid-template-areas: "img img" "title x" "text text" "btn btn" "note note"; }
.is-side .sticky-cta-shot { display: block; grid-area: img; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; background: #fff; }
.is-side .sticky-cta-t { display: block; grid-area: title; padding: 4px 0 0 14px; font-size: 1.0625rem; line-height: 1.25; font-weight: 700; color: #fff; }
.is-side .sticky-cta-x { margin: 2px 6px 0 0; width: 28px; height: 28px; font-size: 1.25rem; opacity: .85; }
.is-side p { padding: 0 14px; font-size: var(--fs-sm); line-height: 1.35; }
.is-side .btn { margin: 4px 14px 0; justify-content: center; white-space: normal; text-align: center; }
.is-side .sticky-cta-note { display: block; grid-area: note; padding: 0 14px; font-size: var(--fs-xs); line-height: 1.3; color: #fff; }
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta.is-in { animation: sticky-cta-in .2s ease-out; }
  .sticky-cta.is-side.is-in { animation: sticky-cta-fade .15s ease-out; }
  @keyframes sticky-cta-in { from { transform: translateY(100%); } to { transform: none; } }
  @keyframes sticky-cta-fade { from { opacity: 0; } to { opacity: 1; } }
}
@media print { .sticky-cta { display: none; } }