/* Blog posts (inc/posts.php): sideways-scrolling tables, the FAQ and related products. */

.gs-table-scroll { overflow-x: auto; margin-bottom: 1.5em; -webkit-overflow-scrolling: touch; }
.gs-table-scroll:focus-visible { outline: none; box-shadow: var(--gs-focus); border-radius: var(--gs-radius); }
.gs-table-scroll table { min-width: 560px; width: 100%; margin: 0; border-collapse: collapse; font: 400 0.9375rem/1.5 var(--gs-font-read); }
.gs-table-scroll th, .gs-table-scroll td { padding: 10px 12px; border: 1px solid var(--gs-line); text-align: left; vertical-align: top; }
.gs-table-scroll thead th { background: var(--gs-band); color: var(--gs-navy); font-weight: 600; }

.gs-post-faq, .gs-post-related { margin-top: 40px; }
.gs-post-faq h2, .gs-post-related h2 { margin-bottom: 12px; }
.gs-post-faq .gs-faq__item { border-bottom: 1px solid var(--gs-line); }
.gs-post-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding-block: 12px; color: var(--gs-navy); font-weight: 600; list-style: none; cursor: pointer; }
.gs-post-faq summary::-webkit-details-marker { display: none; }
.gs-post-faq summary .gs-icon { flex: none; transition: transform 0.2s; }
.gs-post-faq [open] summary .gs-icon { transform: rotate(180deg); }
.gs-post-faq .gs-faq__answer { padding-bottom: 16px; font-family: var(--gs-font-read); }

.gs-post-related ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.gs-post-related a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 16px; border: 1px solid var(--gs-line); border-radius: var(--gs-radius); background: var(--gs-white); color: var(--gs-navy); font-weight: 600; line-height: 1.3; text-decoration: none; }
.gs-post-related a:hover { background: var(--gs-band); }
@media (prefers-reduced-motion: reduce) { .gs-post-faq summary .gs-icon { transition: none; } }

.gs-post-byline { margin-bottom: 24px !important; color: var(--gs-muted); font: 400 0.9375rem/1.5 var(--gs-font-info); }
.gs-post-byline a { color: var(--gs-navy); font-weight: 600; text-underline-offset: 3px; }
.gs-post-author { margin-top: 40px; padding: 20px 24px; border-left: 3px solid var(--gs-accent); border-radius: var(--gs-radius); background: var(--gs-band); }
.gs-post-author p { margin: 0; font: 400 0.9375rem/1.6 var(--gs-font-read); }
.gs-post-author__name { margin-bottom: 6px !important; font-weight: 700 !important; }
.gs-post-author__name a { color: var(--gs-navy); text-decoration: none; }
.gs-post-author__name a:hover { text-decoration: underline; text-underline-offset: 3px; }
.gs-author__bio { max-width: 72ch; margin-bottom: 40px; color: #4F5459; font: 400 1.0625rem/1.7 var(--gs-font-read); }
.gs-author__bio p { margin-bottom: 1em; }

/* Post page (single.php, UI/UX round 24 Oct): the blog head, a reading column with
   "Bu sayfada" and a call box beside it, then "Diğer yazılar". */
.gs-post-head .gs-blog-head__inner { padding-bottom: clamp(32px, 4vw, 48px); }
.gs-post-head h1 { max-width: 32ch; font-size: clamp(1.625rem, 1rem + 2vw, 2.5rem); line-height: 1.15; }
.gs-post-head .gs-meta { color: #D3E3EC; font-family: var(--gs-font-info); }

.gs-post__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 64px; align-items: start; padding-block: clamp(32px, 5vw, 56px) clamp(48px, 7vw, 80px); }
.gs-post__article { min-width: 0; max-width: 760px; }
.gs-post__media { margin: 0 0 32px; }
.gs-post__media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--gs-radius-lg); background: var(--gs-mist); }

/* Reading text. */
.gs-post__content { color: #4F5459; font: 400 1.0625rem/1.8 var(--gs-font-read); }
.gs-post__content :where(p, ul, ol, blockquote, figure) { margin: 0 0 1.1em; }
.gs-post__content h2 { margin: 1.9em 0 0.6em; font-size: 1.375rem; line-height: 1.25; scroll-margin-top: 96px; }
.gs-post__content h3 { margin: 1.5em 0 0.5em; color: var(--gs-navy); font: 700 1.125rem/1.35 var(--gs-font); text-transform: none; }
.gs-post__content a { color: var(--gs-navy); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.gs-post__content strong { color: var(--gs-navy); }
.gs-post__content :is(ul, ol) { padding-inline-start: 1.35em; }
.gs-post__content li + li { margin-top: 0.4em; }
.gs-post__content ul li::marker { color: var(--gs-accent); }
.gs-post__content ol li::marker { color: var(--gs-navy); font-weight: 700; }
.gs-post__content blockquote { padding: 4px 0 4px 20px; border-left: 3px solid var(--gs-accent); color: #193656; font-style: italic; }
.gs-post__content img { max-width: 100%; height: auto; border-radius: var(--gs-radius); }
/* The opening paragraph (most posts answer the question there) reads as the lead. */
.gs-post__content > .gs-post-byline + p,
.gs-post__content > .gs-post-byline + * > p:first-child { padding: 18px 22px; border-left: 3px solid var(--gs-accent); border-radius: var(--gs-radius); background: var(--gs-mist); color: #193656; font-size: 1.125rem; line-height: 1.7; }
/* The older posts' Elementor wrappers carry their own boxed width. They also end with the
   old site's "ACENTELİKLERİMİZ" logo carousel (ElementsKit), cut off on the new page and
   repeating the logo strip: hidden, as on the product pages (spec: no broken old content). */
.gs-post__content .e-con, .gs-post__content .e-con-inner { max-width: none !important; padding: 0 !important; }
.gs-post__content :is(.e-con, .elementor-section):has(.elementor-widget-elementskit-client-logo):not(:has(.elementor-widget-text-editor)),
.gs-post__content :is(.elementor-widget-elementskit-client-logo, .elementor-widget-elementskit-heading) { display: none !important; }
/* inc/posts.php's lists keep their own layout, not the reading text's. */
.gs-post__content .gs-post-related ul { padding: 0; }
.gs-post__content .gs-post-related li { margin: 0; }

/* "Bu sayfada" and the call box. */
.gs-post__aside { display: grid; gap: 24px; }
.gs-post .gs-toc { font-family: var(--gs-font-info); }
.gs-post .gs-toc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--gs-line); }
.gs-post .gs-toc a { display: block; margin-left: -2px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; color: var(--gs-muted); font-size: 0.9375rem; line-height: 1.35; text-decoration: none; }
.gs-post .gs-toc a:hover { color: var(--gs-navy); }
.gs-post .gs-toc a[aria-current] { border-left-color: var(--gs-accent); color: var(--gs-navy); font-weight: 600; }
.gs-toc__title { margin-bottom: 10px !important; color: var(--gs-orange-text); font: 600 0.8125rem/1.3 var(--gs-font-info); letter-spacing: 0.06em; text-transform: uppercase; }


@media (min-width: 1200px) {
  .gs-post__body { grid-template-columns: minmax(0, 760px) 280px; justify-content: space-between; }
  .gs-post__aside { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; scrollbar-width: thin; }
}
/* Below: the list is a row of chips above the image, the call box after the text. */
@media (max-width: 1199px) {
  .gs-post__aside { display: contents; }
  .gs-post .gs-toc { order: -1; }
  .gs-post .gs-toc ol { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 6px; border-left: 0; scrollbar-width: thin; }
  .gs-post .gs-toc li { flex: none; }
  .gs-post .gs-toc a { margin: 0; padding: 8px 12px; border: 1px solid var(--gs-line); border-radius: var(--gs-radius); background: var(--gs-white); color: var(--gs-navy); font-size: 0.875rem; white-space: nowrap; }
  .gs-post .gs-toc a[aria-current] { border-color: var(--gs-navy); }
  .gs-post__article { max-width: none; }
  .gs-post .gs-call-box { max-width: 760px; }
}

/* "Diğer yazılar". */
.gs-post-more { padding-block: clamp(44px, 6vw, 72px); background: var(--gs-band); }
.gs-post-more h2 { font-size: var(--gs-fs-2xl); }