/* Template-27 (Betslio) shell — t27-shell/main/container.
   HeaderT27 is a normal in-flow flex block (padding-block: 21px 0; NOT sticky, no
   negative margin), so .t27-main needs only a small top padding — unlike .t26-main's
   140px which assumes the t26 sticky header + its -64px margin. */
.t27-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--t27-text-white, #ffffff);
  background:
    radial-gradient(72% 42% at 50% 0%, rgba(0, 67, 216, 0.16) 0%, rgba(0, 0, 20, 0) 70%),
    var(--t27-bg-base, #000014);
}

.t27-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  width: 100%;
  padding-top: 20px;
  padding-bottom: 56px;
}

.t27-container {
  width: 100%;
  max-width: var(--t27-container-width, 1218px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* Note: DB-injected HTML section rhythm is handled globally by `.t26-sections`
   in base.css (PageSections emits that class for every template), so t27 needs
   no own `-sections` rule. */

@media (max-width: 768px) {
  .t27-main { padding-top: 10px; padding-bottom: 40px; gap: 20px; }
  .t27-container { padding-inline: 14px; }
}

/* =================================================================
   Free-HTML home blocks (DB-editable `PageSections`, SectionId="free")
   Boris kararı (2026-09-27): t27 diğer aileler gibi serbest HTML basar;
   Sections→structured alan köprüsü emekliye ayrıldı (bkz. CLAUDE.md
   "gotcha_t27_structured_vs_t26_t28_free_compositions"). Bu bölüm t26/t28'in
   deseni izler: literal (hash'siz) sınıflar `.t27-shell` altında GLOBAL
   olarak stillenir — çünkü DB'deki ham HTML CSS-module hash'i taşımaz.

   Görsel dil `Hero/FeatureSection/GamesGrid/BonusCards/SeoBlockT27.module.css`
   ile aynı (koyu lacivert taban, yuvarlatılmış kart, accent gradient/tint) ve
   yalnız t27'nin kendi token'larından (--t27-*) üretilir — uydurma hex YOK.

   ⭐ Kontrast kuralı (bkz. CLAUDE.md "bug_t27_accent_dominant_fill_unreadable_text"):
   accent AÇIK renkli sitelerde (örn. #FADA6D) baskın dolgu + sabit beyaz yazı
   okunmaz hale gelir. Bu yüzden taban HER ZAMAN koyu (--t27-surface/-2), accent
   yalnız ince tint/kenarlık/vurgu metni olarak kullanılır — asla dolgu+beyaz-yazı
   kombinasyonu değil.
   ================================================================= */

.t27-shell .container {
  width: 100%;
  max-width: var(--t27-container-width, 1218px);
  margin-inline: auto;
  padding-inline: 20px;
}

/* ⚠️ 2026-09-27 review: real DB content nests a `.container` INSIDE each of
   these blocks too (measured live: `.hero > .container > p`,
   `.bonus-cards > .container > .cards > .card > p`, etc.) — it's just a
   generic wrapper div, not the page-level `.t27-container`. Neutralize the
   page-level container sizing/padding in that context so it doesn't fight
   the card's own padding, and let it fill the card. */
.t27-shell .hero .container,
.t27-shell .bonus-cards .container,
.t27-shell .feature .container,
.t27-shell .games-grid .container,
.t27-shell .seo .container,
.t27-shell .seo-tldr .container,
.t27-shell .seo-about .container,
.t27-shell .seo-mobile .container,
.t27-shell .seo-faq .container {
  max-width: none;
  padding-inline: 0;
  margin-inline: 0;
  width: 100%;
}

/* Common typographic defaults inside every free-HTML block — the AI content
   pipeline writes plain h1-h4/p/a/button/ul markup inside these wrappers
   without module-hashed classes, so headings/body/links need a shell-level
   default independent of any nested class name. */
.t27-shell .hero,
.t27-shell .bonus-cards,
.t27-shell .feature,
.t27-shell .games-grid,
.t27-shell .seo,
.t27-shell .seo-tldr,
.t27-shell .seo-about,
.t27-shell .seo-mobile,
.t27-shell .seo-faq {
  font-family: var(--t27-font-body, 'Poppins', sans-serif);
  color: var(--t27-text-white, #ffffff);
}

.t27-shell .hero h1,
.t27-shell .hero h2,
.t27-shell .bonus-cards h2,
.t27-shell .bonus-cards h3,
.t27-shell .feature h1,
.t27-shell .feature h2,
.t27-shell .feature h3,
.t27-shell .games-grid h2,
.t27-shell .games-grid h3,
.t27-shell .seo h2,
.t27-shell .seo h3,
.t27-shell .seo-tldr h2,
.t27-shell .seo-tldr h3,
.t27-shell .seo-about h2,
.t27-shell .seo-about h3,
.t27-shell .seo-mobile h2,
.t27-shell .seo-mobile h3,
.t27-shell .seo-faq h2,
.t27-shell .seo-faq h3 {
  font-family: var(--t27-font-display, 'Poppins', sans-serif);
  font-weight: 800;
  color: var(--t27-text-white, #ffffff);
  margin: 0 0 12px;
  line-height: 1.2;
}

/* ⚠️ 2026-09-27 review round 4: `base.css` sets a global `ul, ol { list-style:
   none; padding: 0 }` for every template's DB-injected sections (needed for
   the tile/card grids like .games-grid/.bonus-cards) — but that also strips
   bullets/numbers from a genuinely textual list inside .hero/.feature/.seo
   copy. Restore list styling ONLY for the prose blocks (not .bonus-cards/
   .games-grid, whose own `.cards`/`.grid` rules deliberately keep
   `list-style: none` for their tile-grid semantics). */
.t27-shell .hero ul, .t27-shell .hero ol,
.t27-shell .feature ul, .t27-shell .feature ol,
.t27-shell .seo ul, .t27-shell .seo ol,
.t27-shell .seo-tldr ul, .t27-shell .seo-tldr ol,
.t27-shell .seo-about ul, .t27-shell .seo-about ol,
.t27-shell .seo-mobile ul, .t27-shell .seo-mobile ol,
.t27-shell .seo-faq ul, .t27-shell .seo-faq ol {
  padding-inline-start: 22px;
  margin: 0 0 12px;
  color: var(--t27-text-muted, rgba(255, 255, 255, 0.72));
}

.t27-shell .hero ul,
.t27-shell .feature ul,
.t27-shell .seo ul,
.t27-shell .seo-tldr ul,
.t27-shell .seo-about ul,
.t27-shell .seo-mobile ul,
.t27-shell .seo-faq ul {
  list-style-type: disc;
}

/* Döşeme ızgaraları düzyazı DEĞİL: madde işareti almamalı. base.css zaten
   `list-style: none` veriyor ama bunu AÇIKÇA yazıyoruz — (a) niyet okunur olsun,
   (b) yukarıdaki düzyazı kuralı ileride genişletilirse buraya sızmasın,
   (c) kısayol/uzun-biçim farkına bağlı kalmasın. */
.t27-shell .games-grid ul,
.t27-shell .games-grid ol,
.t27-shell .bonus-cards ul,
.t27-shell .bonus-cards ol {
  list-style-type: none;
}

.t27-shell .hero ol,
.t27-shell .feature ol,
.t27-shell .seo ol,
.t27-shell .seo-tldr ol,
.t27-shell .seo-about ol,
.t27-shell .seo-mobile ol,
.t27-shell .seo-faq ol {
  list-style-type: decimal;
}

.t27-shell .hero p,
.t27-shell .bonus-cards p,
.t27-shell .feature p,
.t27-shell .games-grid p,
.t27-shell .seo p,
.t27-shell .seo-tldr p,
.t27-shell .seo-about p,
.t27-shell .seo-mobile p,
.t27-shell .seo-faq p {
  font-family: var(--t27-font-body, 'Poppins', sans-serif);
  font-weight: 400;
  color: var(--t27-text-muted, rgba(255, 255, 255, 0.72));
  line-height: 1.7;
  margin: 0 0 12px;
}

.t27-shell .hero p:last-child,
.t27-shell .bonus-cards p:last-child,
.t27-shell .feature p:last-child,
.t27-shell .games-grid p:last-child,
.t27-shell .seo p:last-child,
.t27-shell .seo-tldr p:last-child,
.t27-shell .seo-about p:last-child,
.t27-shell .seo-mobile p:last-child,
.t27-shell .seo-faq p:last-child {
  margin-bottom: 0;
}

/* ⚠️ 2026-09-27 review round 4: using `--t27-accent` as the FOREGROUND text
   color of inline emphasis is the same failure shape the 2026-09-25 t27
   contrast incident fixed for box fills — accent lightness varies per site
   (measured live against real site tokens: bahisoyna 9.1:1 and betador
   5.6:1 pass, but medobet's accent came in at 4.30-4.38:1, under the 4.5:1
   AA text threshold). Text color that must stay legible regardless of
   accent hue can't itself BE the accent — so emphasis keeps the inherited
   (already-safe) white/muted ink and gets its accent cue from a background
   tint instead (bounded to the same ≤0.16 alpha ceiling the box-fill guard
   enforces), exactly like `--t27-mint`'s highlight pattern in template-26. */
.t27-shell .seo strong, .t27-shell .seo em,
.t27-shell .seo-tldr strong, .t27-shell .seo-tldr em,
.t27-shell .seo-about strong, .t27-shell .seo-about em,
.t27-shell .seo-mobile strong, .t27-shell .seo-mobile em,
.t27-shell .seo-faq strong, .t27-shell .seo-faq em,
.t27-shell .feature strong, .t27-shell .feature em,
.t27-shell .hero strong, .t27-shell .hero em {
  color: inherit;
  font-style: normal;
  font-weight: 700;
  background: rgba(var(--t27-accent-rgb, 0, 174, 255), 0.16);
  border-radius: 3px;
  padding: 0 3px;
}

.t27-shell .seo em, .t27-shell .seo-tldr em, .t27-shell .seo-about em,
.t27-shell .seo-mobile em, .t27-shell .seo-faq em,
.t27-shell .feature em, .t27-shell .hero em {
  font-style: italic;
  font-weight: 400;
}

/* Links/buttons inside free-HTML blocks (registration/CTA pills) — dark pill,
   accent-colored text/border, never accent-filled with fixed white text. */
.t27-shell .hero a, .t27-shell .hero button,
.t27-shell .bonus-cards a, .t27-shell .bonus-cards button,
.t27-shell .feature a, .t27-shell .feature button,
.t27-shell .games-grid a, .t27-shell .games-grid button,
.t27-shell .seo a, .t27-shell .seo button,
.t27-shell .seo-tldr a, .t27-shell .seo-tldr button,
.t27-shell .seo-about a, .t27-shell .seo-about button,
.t27-shell .seo-mobile a, .t27-shell .seo-mobile button,
.t27-shell .seo-faq a, .t27-shell .seo-faq button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border-radius: 10px;
  border: 1px solid var(--t27-accent, #00aeff);
  background: transparent;
  color: var(--t27-accent, #00aeff);
  font-family: var(--t27-font-body, 'Poppins', sans-serif);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease;
}

.t27-shell .hero a:hover, .t27-shell .hero button:hover,
.t27-shell .bonus-cards a:hover, .t27-shell .bonus-cards button:hover,
.t27-shell .feature a:hover, .t27-shell .feature button:hover,
.t27-shell .games-grid a:hover, .t27-shell .games-grid button:hover,
.t27-shell .seo a:hover, .t27-shell .seo button:hover,
.t27-shell .seo-tldr a:hover, .t27-shell .seo-tldr button:hover,
.t27-shell .seo-about a:hover, .t27-shell .seo-about button:hover,
.t27-shell .seo-mobile a:hover, .t27-shell .seo-mobile button:hover,
.t27-shell .seo-faq a:hover, .t27-shell .seo-faq button:hover {
  background: rgba(var(--t27-accent-rgb, 0, 174, 255), 0.12);
}

/* ============================================================
   .hero — mirrors HeroT27.module.css: gradient card, title/subtitle/cta.
   ⚠️ 2026-09-27 review: real DOM is `.hero > .container > p` (text-only
   today, but the layout must also work if an image sibling is added later).
   The card look (gradient/radius/padding) stays on `.hero`; the flex ROW
   (text vs. media) lives on the inner `.container`, since that's the actual
   parent of the content in the measured markup.
   ============================================================ */
.t27-shell .hero {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 48px 52px;
  min-height: 280px;
  background: linear-gradient(120deg, var(--t27-hero-from, #011c54) 0%, var(--t27-hero-to, #043eba) 100%);
}

/* ⚠️ 2026-09-27 review round 4: `display:flex` on `.container` unconditionally
   split ANY text-only content (h1, p, cta link) into side-by-side flex
   columns — measured live: heading/paragraph/CTA landing at x=179/548/793,
   three columns instead of a stacked hero. The row layout (image beside
   text) is only correct when there IS a media sibling; text-only content
   must stack vertically like a normal flow. */
.t27-shell .hero .container {
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100%;
  justify-content: center;
}

.t27-shell .hero .container:has(img, picture, video) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 32px;
}

.t27-shell .hero .container > * {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.t27-shell .hero .container:has(img, picture, video) > * {
  flex: 1 1 320px;
}

/* Text content (no image sibling in the common case) gets a readable measure
   instead of stretching to the full card width — measured live: 1131px,
   start-aligned, no cap. */
.t27-shell .hero p {
  max-width: 65ch;
}

.t27-shell .hero img,
.t27-shell .hero picture,
.t27-shell .hero video {
  max-width: 100%;
  border-radius: 14px;
  object-fit: contain;
}

@media (max-width: 768px) {
  .t27-shell .hero { padding: 28px 22px; min-height: 0; }
}

/* ============================================================
   .bonus-cards — mirrors BonusCardsT27.module.css: a row of accent-tinted
   cards. ⚠️ 2026-09-27 review: real DOM has actual grouping classes —
   `.bonus-cards > .container > .cards > .card > p` — so the card treatment
   targets `.cards`/`.card` directly instead of a generic `> *` guess.
   ⚠️ 2026-09-27 review round 4: `.bonus-cards` had no outer ground of its own
   (unlike hero/feature/seo/games-grid) — its heading (outside `.cards`) sat
   directly on the page background. Same seo/games-grid treatment applied.
   ============================================================ */
.t27-shell .bonus-cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  border-radius: 18px;
  padding: 36px 48px;
  background: linear-gradient(160deg, rgba(var(--t27-accent-rgb, 0, 174, 255), 0.12), var(--t27-surface, #0a1838) 70%);
}

.t27-shell .bonus-cards .cards {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  width: 100%;
}

.t27-shell .bonus-cards .card {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  background: linear-gradient(160deg, rgba(var(--t27-accent-rgb, 0, 174, 255), 0.16), var(--t27-surface-2, #102449));
  border: 1px solid var(--t27-border, rgba(255, 255, 255, 0.08));
  border-radius: 16px;
  padding: 28px 24px;
}

.t27-shell .bonus-cards img {
  width: 72px;
  height: 72px;
  object-fit: contain;
}

@media (max-width: 900px) {
  .t27-shell .bonus-cards .cards {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .t27-shell .bonus-cards .cards::-webkit-scrollbar { display: none; }
  .t27-shell .bonus-cards .card {
    flex: 0 0 78%;
    min-width: 78%;
    scroll-snap-align: start;
  }
}

@media (max-width: 600px) {
  .t27-shell .bonus-cards { padding: 28px 20px; }
}

/* ============================================================
   .feature — mirrors FeatureSectionT27.module.css: image + text split card.
   ⚠️ 2026-09-27 review: same nesting fix as .hero — real DOM is
   `.feature > .container > p` (text-only today). Card look on `.feature`,
   flex row on the inner `.container`.
   ============================================================ */
.t27-shell .feature {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  padding: 40px 48px;
  background: linear-gradient(120deg, var(--t27-hero-from, #06122e) 0%, var(--t27-surface, #0a1838) 55%, var(--t27-hero-to, #0c2a6e) 100%);
}

/* ⚠️ 2026-09-27 review round 4: same three-column split bug as .hero — plain
   flex-row on `.container` turned a text-only h2/p/ul into three side-by-side
   columns (measured live: x=179/548/916, each 345px wide). Row layout only
   when a media sibling exists; otherwise stack. */
.t27-shell .feature .container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  justify-content: center;
}

.t27-shell .feature .container:has(img, picture, video) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 24px;
}

.t27-shell .feature .container > * {
  min-width: 0;
}

.t27-shell .feature .container:has(img, picture, video) > * {
  flex: 1 1 280px;
}

/* ⚠️ 2026-09-27 review fix: text-only feature content (no image sibling) was
   stretching to the full ~1100px card width at desktop, one long line per
   paragraph — must be a DESCENDANT selector (`.feature p`), not `> *`,
   because the real text node is two levels down (`.feature .container p`). */
.t27-shell .feature p {
  max-width: 75ch;
}

.t27-shell .feature img,
.t27-shell .feature picture,
.t27-shell .feature video {
  width: 100%;
  height: 100%;
  min-height: 200px;
  max-height: 320px;
  object-fit: cover;
  border-radius: 14px;
  display: block;
}

@media (max-width: 768px) {
  /* Must match/exceed the specificity of `.container:has(img, picture, video)`
     above (the media-row variant) to actually override it on mobile. */
  .t27-shell .feature .container:has(img, picture, video) { flex-direction: column; }
  .t27-shell .feature { padding: 28px 22px; }
  .t27-shell .feature img,
  .t27-shell .feature picture,
  .t27-shell .feature video { max-height: 220px; }
}

/* ============================================================
   .games-grid — mirrors GamesGridT27.module.css: horizontally-tiled cards.
   ⚠️ 2026-09-27 review: real DOM has actual grouping classes — measured live
   `.games-grid > .container > .grid > .item > p` — so the card treatment
   targets `.grid`/`.item` directly. A `ul`/`li`/bare-`div` fallback is kept
   for any content variant that doesn't use `.grid`/`.item` naming.
   ⚠️ 2026-09-27 review round 3: unlike hero/feature/seo, `.games-grid` had NO
   card background/radius/padding of its own, so its heading and trailing
   paragraph (outside `.grid`) floated with no ground — give it the same
   "seo family" treatment (gradient + radius 18px + padding) for consistency.
   ============================================================ */
.t27-shell .games-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  border-radius: 18px;
  padding: 36px 48px;
  background: linear-gradient(160deg, rgba(var(--t27-accent-rgb, 0, 174, 255), 0.12), var(--t27-surface, #0a1838) 70%);
}

.t27-shell .games-grid .grid,
.t27-shell .games-grid > ul,
.t27-shell .games-grid > ol {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  list-style: none;
  padding: 0;
  margin: 0;
}

.t27-shell .games-grid .item,
.t27-shell .games-grid li {
  flex: 1 1 160px;
  max-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  background: linear-gradient(160deg, rgba(var(--t27-accent-rgb, 0, 174, 255), 0.16), var(--t27-surface-2, #102449));
  border-radius: 14px;
  padding: 14px;
}

/* ⚠️ 2026-09-27 review round 3: the narrow 210px tile is right for a game
   thumbnail + short name, but a text-content variant (h3 heading + a
   multi-line description paragraph, no thumbnail) was measured squeezed
   into that same 210px column and unreadable. `:has(p)` distinguishes the
   two content shapes without needing a separate class name — a tile with a
   real description paragraph gets a wider column, left-aligned copy. The
   narrow centered thumbnail tile (name only, no `<p>`) is untouched. */
.t27-shell .games-grid .item:has(p),
.t27-shell .games-grid li:has(p) {
  flex: 1 1 260px;
  max-width: 340px;
  align-items: flex-start;
  text-align: left;
  padding: 20px 22px;
}

.t27-shell .games-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}

/* Heading/intro paragraph directly above the grid (title + optional lead-in
   text of the whole games-grid block) stay left-aligned with a readable
   measure, same treatment as .feature/.seo body copy. */
.t27-shell .games-grid > .container > h1,
.t27-shell .games-grid > .container > h2 {
  text-align: left;
}

.t27-shell .games-grid > .container > p {
  max-width: 75ch;
}

@media (max-width: 900px) {
  .t27-shell .games-grid .grid,
  .t27-shell .games-grid > ul,
  .t27-shell .games-grid > ol {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding-bottom: 8px;
  }
  .t27-shell .games-grid .grid::-webkit-scrollbar,
  .t27-shell .games-grid > ul::-webkit-scrollbar,
  .t27-shell .games-grid > ol::-webkit-scrollbar { display: none; }
  .t27-shell .games-grid .item,
  .t27-shell .games-grid li {
    flex: 0 0 60%;
    min-width: 60%;
    max-width: none;
    scroll-snap-align: start;
  }

  /* Text-content tiles (real description paragraph) read poorly in a
     horizontal-scroll strip on a narrow viewport — stack them full-width
     instead of shrinking to a 60% scroll-snap card. */
  .t27-shell .games-grid .grid:has(.item p),
  .t27-shell .games-grid > ul:has(li p),
  .t27-shell .games-grid > ol:has(li p) {
    flex-wrap: wrap;
    overflow-x: visible;
  }
  .t27-shell .games-grid .item:has(p),
  .t27-shell .games-grid li:has(p) {
    flex: 1 1 100%;
    min-width: 100%;
    scroll-snap-align: none;
  }
}

@media (max-width: 600px) {
  .t27-shell .games-grid { padding: 28px 20px; }
}

/* ============================================================
   .seo family — mirrors SeoBlockT27.module.css: centered tinted card.
   `.seo` is the generic SEO block; `.seo-tldr/.seo-about/.seo-mobile/.seo-faq`
   are named sub-blocks the content pipeline can emit for the same home
   section (TL;DR / Hakkında / Mobil / SSS) — same card treatment, they only
   differ in content, so one rule set covers all five.
   ============================================================ */
.t27-shell .seo,
.t27-shell .seo-tldr,
.t27-shell .seo-about,
.t27-shell .seo-mobile,
.t27-shell .seo-faq {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  /* ⚠️ 2026-09-27 review fix: these are the site's long-form SEO copy blocks
     (Boris: en değerli uzun-form içerik). Centering the whole block centered
     multi-line paragraphs AND detached bullet markers from list text — only
     the heading is centered, body copy/lists/accordion stay left-aligned. */
  text-align: left;
  background: linear-gradient(160deg, rgba(var(--t27-accent-rgb, 0, 174, 255), 0.14), var(--t27-surface, #0a1838) 70%);
  border: 1px solid var(--t27-border, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  padding: 36px 48px;
}

/* ⚠️ 2026-09-27 review round 4, two bugs in one selector:
   1. `>` (direct child) only matched `.seo > h2` — but `.seo-tldr`/`.seo-about`/
      `.seo-mobile` in real content have NO `.container` wrapper while `.seo`
      itself does (`.seo > .container > h2`), so this rule silently missed the
      more common DOM shape and those three sub-blocks fell back to the
      browser default (left-aligned, since text-align:left is set on the
      block itself) while `.seo`'s heading centered — two different
      alignments on sibling SEO blocks on the same page. Descendant selector
      (no `>`) covers both DOM shapes.
   2. Centering only the heading while the body copy sits in a centered
      `max-width: 75ch` column (below) left their LEFT EDGES misaligned
      (heading spans the full card width, paragraph starts ~200px in) — the
      heading needs the same measure + centering margin as the body column. */
/* ⚠️ Sutun genisligi `ch` DEGIL, PAYLASILAN MUTLAK olcu olmali: `ch` yazi tipine
   gorelidir, baslik gorsel puntoda oldugu icin 75ch'i ~1035px, govdeninki ~667px
   cikiyordu; ikisi de `margin-inline:auto` ile ortalaninca SOL KENARLARI 167px
   kayiyordu (2026-09-27 review). Tek degisken ikisini de ayni sutuna oturtur. */
.t27-shell {
  --t27-prose-measure: 667px;
}

.t27-shell .seo h1, .t27-shell .seo h2, .t27-shell .seo h3, .t27-shell .seo h4,
.t27-shell .seo-tldr h1, .t27-shell .seo-tldr h2, .t27-shell .seo-tldr h3, .t27-shell .seo-tldr h4,
.t27-shell .seo-about h1, .t27-shell .seo-about h2, .t27-shell .seo-about h3, .t27-shell .seo-about h4,
.t27-shell .seo-mobile h1, .t27-shell .seo-mobile h2, .t27-shell .seo-mobile h3, .t27-shell .seo-mobile h4,
.t27-shell .seo-faq h1, .t27-shell .seo-faq h2, .t27-shell .seo-faq h3, .t27-shell .seo-faq h4 {
  text-align: center;
  /* ⚠️ `width: 100%` ZORUNLU: bu bloklar flex kolon + align-items:center oldugu icin
     baslik ICERIGE GORE buzuluyordu (olculdu: 372px / 533px), uzun basliklar ise
     667'ye ulasiyordu — ayni sayfada baslik-govde sol kenari 147px'e kadar kayiyordu.
     Genislik sabitlenince max-width + margin-inline sutunu belirler. */
  width: 100%;
  max-width: var(--t27-prose-measure);
  margin-inline: auto;
}

.t27-shell .seo p, .t27-shell .seo ul, .t27-shell .seo ol,
.t27-shell .seo-tldr p, .t27-shell .seo-tldr ul, .t27-shell .seo-tldr ol,
.t27-shell .seo-about p, .t27-shell .seo-about ul, .t27-shell .seo-about ol,
.t27-shell .seo-mobile p, .t27-shell .seo-mobile ul, .t27-shell .seo-mobile ol,
.t27-shell .seo-faq p, .t27-shell .seo-faq ul, .t27-shell .seo-faq ol {
  text-align: left;
  /* Long-form paragraphs stay readable (~75ch) and centered as a text column,
     without centering the text itself — see review note above. */
  max-width: var(--t27-prose-measure);
  margin-inline: auto;
}

.t27-shell .seo ul, .t27-shell .seo ol,
.t27-shell .seo-tldr ul, .t27-shell .seo-tldr ol,
.t27-shell .seo-about ul, .t27-shell .seo-about ol,
.t27-shell .seo-mobile ul, .t27-shell .seo-mobile ol,
.t27-shell .seo-faq ul, .t27-shell .seo-faq ol {
  padding-inline-start: 22px;
  display: block;
}

.t27-shell .seo li,
.t27-shell .seo-tldr li,
.t27-shell .seo-about li,
.t27-shell .seo-mobile li,
.t27-shell .seo-faq li {
  text-align: left;
}

/* .seo-faq commonly renders as an accordion (native <details>/<summary>) —
   give it the same treatment as t26/t28's faq list without requiring a
   specific nested class name. */
.t27-shell .seo-faq {
  align-items: stretch;
  text-align: left;
}

.t27-shell .seo-faq details {
  position: relative;
  border-radius: 12px;
  background: var(--t27-surface-2, #102449);
  border: 1px solid var(--t27-border, rgba(255, 255, 255, 0.08));
  overflow: hidden;
  text-align: left;
}

.t27-shell .seo-faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  font-family: var(--t27-font-display, 'Poppins', sans-serif);
  font-weight: 700;
  font-size: 16px;
  color: var(--t27-text-white, #ffffff);
  cursor: pointer;
  list-style: none;
}

.t27-shell .seo-faq summary::-webkit-details-marker { display: none; }

.t27-shell .seo-faq details p {
  padding: 0 20px 18px;
  max-width: none;
}

@media (max-width: 600px) {
  .t27-shell .seo,
  .t27-shell .seo-tldr,
  .t27-shell .seo-about,
  .t27-shell .seo-mobile,
  .t27-shell .seo-faq {
    padding: 28px 20px;
  }
}

/* ---- Keep-content: yalniz .t27-prose (adapt akisi yabanci HTML'i bununla sarar) ----
   Sitenin KENDI bolumleri (ciplak /hakkimizda dahil) bu bloktan etkilenmez: hicbir kural .t27-prose disina uygulanmaz.
   Ic secicilerde :where() sifir ozgulluk; kapsayici .t27-shell .t27-prose (0,2,0) base.css sifirlamalarini yener.
   Genislik kabugun kendi konteynerinden gelir (sabit max-width yok). */
.t27-shell .t27-prose { line-height: 1.75; }
.t27-shell .t27-prose :where(h1, h2, h3, h4) { color: var(--t27-text-white, #ffffff); font-weight: 700; line-height: 1.25; margin: 1.6em 0 0.5em; text-wrap: balance; }
.t27-shell .t27-prose :where(h1) { font-size: clamp(26px, 3.2vw, 40px); }
.t27-shell .t27-prose :where(h2) { font-size: clamp(22px, 2.4vw, 30px); }
.t27-shell .t27-prose :where(h3) { font-size: clamp(18px, 1.8vw, 22px); }
.t27-shell .t27-prose > :where(:first-child) { margin-top: 0; }
.t27-shell .t27-prose :where(p, ul, ol, blockquote, table, pre) { margin: 0 0 1.1em; }
.t27-shell .t27-prose :where(ul) { list-style: disc; padding-left: 1.4em; }
.t27-shell .t27-prose :where(ol) { list-style: decimal; padding-left: 1.4em; }
.t27-shell .t27-prose :where(li) { margin-bottom: 0.4em; }
.t27-shell .t27-prose :where(li)::marker { color: var(--t27-accent, #00aeff); }
.t27-shell .t27-prose :where(a) { color: var(--t27-accent, #00aeff); text-decoration: underline; text-underline-offset: 3px; }
.t27-shell .t27-prose :where(strong) { color: var(--t27-text-white, #ffffff); font-weight: 700; }
.t27-shell .t27-prose :where(blockquote) { padding: 4px 0 4px 18px; border-left: 3px solid var(--t27-accent, #00aeff); }
.t27-shell .t27-prose :where(hr) { border: none; border-top: 1px solid var(--t27-border, rgba(255, 255, 255, 0.08)); margin: 1.6em 0; }
.t27-shell .t27-prose :where(table) { display: block; overflow-x: auto; border-collapse: collapse; }
.t27-shell .t27-prose :where(th, td) { padding: 8px 12px; border: 1px solid var(--t27-border, rgba(255, 255, 255, 0.08)); text-align: left; }
.t27-shell .t27-prose :where(details) { margin: 0 0 10px; padding: 0 16px; border: 1px solid var(--t27-border, rgba(255, 255, 255, 0.08)); border-radius: 12px; }
.t27-shell .t27-prose :where(summary) { padding: 12px 0; cursor: pointer; font-weight: 600; color: var(--t27-text-white, #ffffff); }

.t27-shell .t27-prose { overflow-wrap: break-word; }
.t27-shell .t27-prose :where(img, video, iframe) { max-width: 100%; height: auto; }