/* ==========================================================================
   ToolVerse Training — listing pages + post pages
   Loaded on top of style.css; reuses the site design tokens (:root vars).
   Pages are generated by build_training.py from the /training folder.
   ========================================================================== */

/* ------------------------------- reveal anim ------------------------------ */
@keyframes t-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.t-reveal { animation: t-rise .7s cubic-bezier(.22,.61,.36,1) both; }
.t-reveal.d1 { animation-delay: .05s; } .t-reveal.d2 { animation-delay: .12s; }
.t-reveal.d3 { animation-delay: .2s; }  .t-reveal.d4 { animation-delay: .28s; }
.t-reveal.d5 { animation-delay: .36s; } .t-reveal.d6 { animation-delay: .45s; }
@media (prefers-reduced-motion: reduce) { .t-reveal { animation: none; } }

/* ------------------------------- navbar badge ----------------------------- */
/* Training menü öğesine özel badge/vurgu */
.main-nav a[href="/training/"]::after {
  content: "NEW";
  display: inline-block;
  margin-left: .35rem;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: #fff;
  background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple));
  border-radius: var(--radius-full);
  padding: .15rem .4rem;
  vertical-align: middle;
  box-shadow: 0 2px 6px rgba(255,61,138,.3);
}

/* --------------------------------- shared --------------------------------- */
.training-page { position: relative; overflow: hidden; }
.training-page::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(52rem 30rem at 85% -8%, rgba(139,92,246,.16), transparent 60%),
    radial-gradient(44rem 26rem at -10% 22%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(40rem 28rem at 55% 115%, rgba(255,61,138,.08), transparent 60%);
}
.training-page > .container { position: relative; }

/* top marker strip — echoes the category "case" pages */
.training-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 2.1rem; gap: 1rem;
}
.training-markers { display: flex; gap: 1.4rem; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; color: var(--text-muted); }
.training-markers .is-active { color: var(--accent-cyan); }
.training-close { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em; color: var(--text-secondary); text-decoration: none; border: 1px solid var(--border-glass); border-radius: var(--radius-full); padding: .45rem .95rem; transition: border-color .2s, color .2s; }
.training-close:hover { border-color: var(--border-glass-hover); color: var(--text-primary); }

/* ---------------------------------- hero ---------------------------------- */
.training-hero { padding: 3.2rem 0 2.6rem; }
.training-hero .breadcrumb { margin-bottom: 1.1rem; }
.training-hero h1 {
  font-family: var(--font-display); font-weight: 800;
  font-size: clamp(2.4rem, 6vw, 4.2rem); line-height: 1.04; letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.training-hero h1 .grad {
  background: var(--accent-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.training-kicker { color: var(--text-secondary); font-size: clamp(1rem, 2vw, 1.2rem); max-width: 58rem; margin: 0 0 .6rem; }
.training-intro { color: var(--text-muted); max-width: 58rem; margin: 0 0 1.6rem; }
.training-hero-chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.training-hero-chips .chip { cursor: default; }

/* ------------------------------ featured card ----------------------------- */
.training-featured {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 0; overflow: hidden; margin-bottom: 2.6rem;
  background: var(--bg-surface); border: 1px solid var(--border-glass);
  border-radius: var(--radius-xl); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  text-decoration: none; color: inherit; transition: border-color .25s, transform .25s, box-shadow .25s;
}
.training-featured:hover { border-color: var(--border-glass-hover); transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow-purple); }
.training-featured-media { position: relative; min-height: 15rem; }
.training-featured-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.training-featured-body { padding: clamp(1.4rem, 3vw, 2.4rem); display: flex; flex-direction: column; gap: .85rem; justify-content: center; }
.training-featured-label { display: inline-flex; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; color: var(--accent-cyan); }
.training-featured-label::before { content: ""; width: 1.6rem; height: 1px; background: var(--accent-cyan); opacity: .6; }
.training-featured-body h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 2.6vw, 1.9rem); line-height: 1.15; margin: 0; }
.training-featured-body p { color: var(--text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* -------------------------------- post grid ------------------------------- */
.training-sec-head { display: flex; align-items: baseline; gap: 1.2rem; margin: 0 0 1.4rem; }
.training-sec-head .marker { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .14em; color: var(--text-muted); }
.training-sec-head h2 { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 2.4vw, 1.6rem); margin: 0; }

.training-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: 1.15rem; padding-bottom: 2.4rem;
}
.training-card {
  display: flex; flex-direction: column; gap: .8rem;
  padding: 1.05rem 1.05rem 1.2rem;
  background: var(--bg-surface); border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  text-decoration: none; color: inherit;
  transition: border-color .25s, transform .25s, box-shadow .25s, background .25s;
}
.training-card:hover { border-color: var(--border-glass-hover); background: var(--bg-surface-hover); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.training-card-top { display: flex; align-items: center; justify-content: space-between; }
.training-card-top .num { font-family: var(--font-mono); font-size: .8rem; color: var(--text-muted); }
.training-card-top .tag { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-cyan); border: 1px solid rgba(34,211,238,.35); border-radius: var(--radius-full); padding: .22rem .6rem; }
.training-card .cover { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-glass); }
.training-card .cover img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.training-card:hover .cover img { transform: scale(1.045); }
.training-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.25; margin: 0; }
.training-card .summary { color: var(--text-muted); font-size: .875rem; line-height: 1.5; margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.training-card-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding-top: .55rem; border-top: 1px solid var(--border-glass); }
.training-card-meta .date { font-size: .75rem; color: var(--text-muted); display: inline-flex; align-items: center; gap: .4rem; }
.training-card-meta .read-cta { font-size: .8rem; font-weight: 600; color: var(--accent-cyan); display: inline-flex; align-items: center; gap: .35rem; }
.training-card:hover .read-cta { text-decoration: underline; text-underline-offset: 3px; }

/* gradient placeholder used when a post has no cover/hero image yet */
.cover-placeholder {
  width: 100%; height: 100%; display: grid; place-items: center;
  background:
    radial-gradient(120% 120% at 15% 0%, rgba(255,61,138,.35), transparent 55%),
    radial-gradient(120% 120% at 100% 30%, rgba(34,211,238,.30), transparent 55%),
    linear-gradient(150deg, rgba(139,92,246,.45), rgba(11,42,74,.9));
  color: rgba(255,255,255,.85);
}
.cover-placeholder svg { opacity: .9; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }

/* -------------------------------- pagination ------------------------------- */
.training-pagination {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: .45rem; padding: .6rem 0 3.4rem;
  max-width: 58rem; margin-inline: auto;
}
.training-pagination a, .training-pagination span.pg {
  min-width: 2.5rem; height: 2.5rem; padding: 0 .8rem;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  font-family: var(--font-mono); font-size: .82rem; text-decoration: none;
  color: var(--text-secondary); background: var(--bg-surface);
  border: 1px solid var(--border-glass); border-radius: var(--radius-full);
  transition: border-color .2s, color .2s, background .2s;
}
.training-pagination a:hover { color: var(--text-primary); border-color: var(--border-glass-hover); background: var(--bg-surface-hover); }
.training-pagination .is-current { color: #fff; background: var(--accent-gradient); border-color: transparent; font-weight: 600; }
.training-pagination .is-disabled { opacity: .35; pointer-events: none; }
.training-pagination .pg-info { border: none; background: none; color: var(--text-muted); font-size: .72rem; letter-spacing: .1em; }
.training-pagination .pg-ellipsis { border: none; background: none; min-width: 0; padding: 0 .2rem; color: var(--text-muted); pointer-events: none; }

/* -------------------------------- empty state ------------------------------ */
.training-empty {
  margin: 1rem 0 4rem; padding: clamp(2.2rem, 5vw, 3.6rem);
  text-align: center; background: var(--bg-surface);
  border: 1px dashed var(--border-glass-hover); border-radius: var(--radius-xl);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.training-empty .icon-badge { margin: 0 auto 1.1rem; }
.training-empty h2 { font-family: var(--font-display); font-weight: 700; margin: 0 0 .5rem; }
.training-empty p { color: var(--text-muted); max-width: 34rem; margin: 0 auto 1.4rem; }

/* ================================ post page ================================ */
.training-post-hero { padding: 2.6rem 0 1.2rem; }
.training-post-hero .breadcrumb { margin-bottom: 1.2rem; }
.training-post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: 1.1rem; }
.training-post-meta .tag { font-family: var(--font-mono); font-size: .64rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-cyan); border: 1px solid rgba(34,211,238,.35); border-radius: var(--radius-full); padding: .28rem .7rem; }
.training-post-meta .dot { color: var(--text-muted); }
.training-post-meta time, .training-post-meta .read-time { color: var(--text-muted); font-size: .82rem; }
.training-post-hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 4.6vw, 3.1rem); line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1rem; max-width: 64rem; }
.training-post-hero .lede { color: var(--text-secondary); font-size: clamp(1rem, 1.9vw, 1.15rem); line-height: 1.6; max-width: 58rem; margin: 0; }

/* hero figure — full-bleed, edge-to-edge for a premium editorial feel */
.training-hero-figure {
  width: 100%; max-width: none; margin: 0;
  aspect-ratio: 21 / 9; max-height: 520px;
  border-radius: 0; overflow: hidden;
  border-top: 1px solid var(--border-glass);
  border-bottom: 1px solid var(--border-glass);
  box-shadow: var(--shadow-lg); position: relative;
  background:
    radial-gradient(circle at 30% 20%, rgba(139,92,246,.12), transparent 55%),
    linear-gradient(135deg, rgba(139,92,246,.10), rgba(11,42,74,.5));
}
.training-hero-figure .training-hero-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.training-hero-figure.is-placeholder { display: flex; align-items: center; justify-content: center; }
.training-hero-figure.is-placeholder .cover-placeholder { color: var(--text-muted); opacity: .5; }
.training-hero-figure.is-placeholder .training-hero-img { display: none; }

/* post layout: content wrapper keeps TOC and article aligned */
.training-content { position: relative; z-index: 1; }

/* table of contents — centered glass card above the article, same width as article */
.training-toc { max-width: 58rem; margin: 2rem auto 0; }
.training-toc-inner {
  border: 1px solid var(--border-glass); border-radius: var(--radius-lg); background: var(--bg-surface);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
}
.training-toc-eyebrow { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; color: var(--text-muted); margin: 0 0 .55rem; }
.training-toc-list { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-wrap: wrap; gap: .3rem .5rem; }
.training-toc-list a {
  display: inline-block; font-size: .78rem; line-height: 1.35; color: var(--text-muted); padding: .3rem .65rem;
  border: 1px solid var(--border-glass); border-radius: var(--radius-full); background: var(--bg-surface); transition: color .2s, border-color .2s, background .2s;
}
.training-toc-list a:hover { color: var(--text-secondary); border-color: var(--border-glass-hover); background: var(--bg-surface-hover); }
.training-toc-list a.is-active { color: var(--accent-cyan); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); }
.training-toc-back { display: inline-block; font-size: .78rem; color: var(--text-secondary); margin-top: .1rem; }
.training-toc-back:hover { color: var(--accent-cyan); }

.training-article {
  max-width: 46rem; margin: 2.4rem auto 3rem; padding: 0 0 1rem;
  color: var(--text-secondary); font-size: 1rem; line-height: 1.75;
}
.training-article h2 { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); font-size: 1.45rem; line-height: 1.25; margin: 2.2rem 0 .8rem; }
.training-article h2::before { content: "§ "; color: var(--accent-purple); font-weight: 800; }
.training-article h3 { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); font-size: 1.12rem; margin: 1.7rem 0 .6rem; }
.training-article p { margin: 0 0 1.05rem; }
.training-article a { color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 3px; }
.training-article strong { color: var(--text-primary); }
.training-article ul, .training-article ol { margin: 0 0 1.1rem; padding-left: 1.3rem; }
.training-article li { margin: .35rem 0; }
.training-article li::marker { color: var(--accent-purple); }
.training-article img { max-width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border-glass); }
.training-article blockquote {
  margin: 1.4rem 0; padding: 1rem 1.2rem;
  border-left: 3px solid var(--accent-purple);
  background: var(--bg-surface); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--text-secondary); font-style: italic;
}
.training-article code { font-family: var(--font-mono); font-size: .85em; background: rgba(255,255,255,.07); border: 1px solid var(--border-glass); border-radius: .35rem; padding: .12em .4em; color: var(--accent-cyan); }
.training-article pre { margin: 1.3rem 0; padding: 1.1rem 1.2rem; overflow-x: auto; background: rgba(3,12,24,.72); border: 1px solid var(--border-glass); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.training-article pre code { background: none; border: none; padding: 0; color: #D7E4F2; font-size: .84rem; line-height: 1.6; }
.training-article hr { border: none; border-top: 1px solid var(--border-glass); margin: 2rem 0; }
.training-article table { width: 100%; border-collapse: collapse; margin: 1.3rem 0; font-size: .9rem; }
.training-article th, .training-article td { text-align: left; padding: .6rem .8rem; border: 1px solid var(--border-glass); }
.training-article th { background: var(--bg-surface); color: var(--text-primary); font-family: var(--font-display); font-weight: 700; }

/* callout box for tips inside posts */
.training-tip {
  display: flex; gap: .9rem; align-items: flex-start;
  margin: 1.4rem 0; padding: 1rem 1.2rem;
  background: rgba(52,211,153,.08); border: 1px solid rgba(52,211,153,.3);
  border-radius: var(--radius-md);
}
.training-tip .tip-icon { flex: none; color: var(--accent-mint); margin-top: .15rem; }
.training-tip p { margin: 0; color: var(--text-secondary); }

/* footer nav of a post */
.training-post-nav { max-width: 58rem; margin: 0 auto 4rem; display: flex; justify-content: space-between; gap: 1rem; }

/* -------------------------------- responsive ------------------------------- */
@media (max-width: 860px) {
  .training-featured { grid-template-columns: 1fr; }
  .training-featured-media { min-height: 12rem; aspect-ratio: 16 / 9; }
  .training-top { padding-top: 1.4rem; }
  .training-markers { gap: .9rem; }
}

/* ============================================================
   PREMIUM TRAINING POST — additional components
   Reuses design tokens from style.css (:root vars).
   ============================================================ */

/* reading progress bar — fixed at very top */
.reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1200; background: transparent; pointer-events: none; }
.reading-progress span { display: block; height: 100%; width: 0; background: var(--accent-gradient); box-shadow: 0 0 12px rgba(139,92,246,.6); transition: width .1s linear; }

/* tool pill in the post meta row */
.tool-pill {
  display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; font-size: .8rem;
  color: var(--accent-cyan); border: 1px solid rgba(34,211,238,.3); border-radius: var(--radius-full);
  padding: .15rem .7rem; background: rgba(34,211,238,.08); transition: background .2s, border-color .2s;
}
.tool-pill:hover { background: rgba(34,211,238,.16); border-color: rgba(34,211,238,.5); }

/* inline article figures */
.training-inline-fig { margin: 1.8rem 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-glass); box-shadow: var(--shadow-md); position: relative; aspect-ratio: 16 / 9;
  background: radial-gradient(120% 120% at 0% 0%, rgba(139,92,246,.14), transparent 55%), linear-gradient(135deg, rgba(11,42,74,.5), rgba(6,21,39,.6)); }
.training-inline-fig img { width: 100%; height: 100%; object-fit: cover; display: block; }
.training-inline-fig.is-placeholder { display: flex; align-items: center; justify-content: center; }
.training-inline-fig.is-placeholder img { display: none; }
.training-inline-fig figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: .5rem .9rem; font-size: .72rem; color: var(--text-muted); background: linear-gradient(transparent, rgba(6,21,39,.85)); text-transform: capitalize; letter-spacing: .02em; }


/* related tool card — glass, accent-tinted */
.training-related-tool { max-width: 58rem; margin: 3.4rem auto 0; }
.training-related-card {
  display: flex; align-items: center; gap: 1.4rem; padding: 1.6rem 1.8rem; border-radius: var(--radius-xl);
  border: 1px solid var(--border-glass); background: var(--bg-surface); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md); position: relative; overflow: hidden;
}
.training-related-card::before { content: ""; position: absolute; inset: 0; opacity: .07; pointer-events: none; background: var(--accent-gradient); }
.training-related-card.accent-cyan::before { background: linear-gradient(135deg, var(--accent-cyan), transparent); opacity: .1; }
.training-related-card.accent-mint::before { background: linear-gradient(135deg, var(--accent-mint), transparent); opacity: .1; }
.training-related-card .icon-badge { flex: none; position: relative; }
.training-related-body { flex: 1; min-width: 0; position: relative; }
.training-related-label { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .16em; color: var(--text-muted); }
.training-related-body h2 { font-size: 1.4rem; margin: .25rem 0 .35rem; }
.training-related-body p { margin: 0; color: var(--text-muted); font-size: .9rem; line-height: 1.55; }
.training-related-card .btn { flex: none; position: relative; }

/* prev / next navigation cards */
.training-post-navcards { max-width: 58rem; margin: 2.4rem auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.training-navcard {
  display: flex; flex-direction: column; gap: .35rem; padding: 1.1rem 1.3rem; border-radius: var(--radius-lg);
  border: 1px solid var(--border-glass); background: var(--bg-surface); transition: border-color .2s, background .2s, transform .2s;
}
.training-navcard:hover { border-color: var(--border-glass-hover); background: var(--bg-surface-hover); transform: translateY(-2px); }
.training-navcard--empty { visibility: hidden; }
.training-navcard-label { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .14em; color: var(--text-muted); }
.training-navcard-title { font-family: var(--font-display); font-weight: 700; color: var(--text-primary); font-size: .92rem; line-height: 1.3; }
.training-navcard-date { font-size: .74rem; color: var(--text-muted); }
.training-post-navcards .training-navcard:nth-child(2) { text-align: right; align-items: flex-end; }

/* share row */
.training-share { max-width: 58rem; margin: 2rem auto 3.4rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding-bottom: 1.4rem; border-bottom: 1px solid var(--border-glass); }
.training-share-label { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .14em; color: var(--text-muted); }
.training-share-links { display: flex; gap: .55rem; }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--radius-full);
  border: 1px solid var(--border-glass); background: var(--bg-surface); color: var(--text-secondary); transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.share-btn:hover { color: var(--accent-cyan); border-color: rgba(34,211,238,.4); background: rgba(34,211,238,.08); transform: translateY(-2px); }
.share-btn.is-copied { color: var(--accent-mint); border-color: rgba(52,211,153,.5); background: rgba(52,211,153,.1); }

/* responsive */
@media (max-width: 860px) {
  .training-hero-figure { aspect-ratio: 16 / 9; max-height: 360px; }
  .training-post-hero { padding: 2rem 0 1rem; }
  .training-toc { margin-top: 1.5rem; }
  .training-article { margin-top: 1.5rem; }
  .training-related-card { flex-direction: column; align-items: flex-start; gap: 1rem; text-align: left; }
  .training-related-card .btn { align-self: stretch; }
  .training-post-navcards { grid-template-columns: 1fr; }
  .training-post-navcards .training-navcard:nth-child(2) { text-align: left; align-items: flex-start; }
  .training-step { flex-direction: column; gap: .75rem; }
  .training-step .step-number { align-self: flex-start; }
  .training-faq .faq-q, .training-faq .faq-a { padding: .75rem .9rem; }
  .training-callout { flex-direction: column; gap: .5rem; }
  .training-article h2 { font-size: 1.45rem; margin: 2.2rem 0 .9rem; }
}

/* ==========================================================================
   PREMIUM ARTICLE COMPONENTS — premium training post page enhancements
   ========================================================================== */

/* article body typography — premium overrides */
.training-article {
  max-width: 58rem; margin: 2.4rem auto 3rem; padding: 0 0 1rem;
  color: var(--text-secondary); font-size: 1.04rem; line-height: 1.8;
}
.training-article h2 {
  position: relative; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(1.55rem, 3.6vw, 2.1rem); line-height: 1.18;
  color: var(--text-primary); margin: 3rem 0 1.1rem; padding-bottom: .55rem;
  letter-spacing: -.01em;
}
.training-article h2::before { content: none; }
.training-article h2::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 4rem; height: 3px;
  border-radius: var(--radius-full); background: var(--accent-gradient);
}
.training-article h3 {
  font-family: var(--font-display); font-weight: 700; color: var(--text-primary);
  font-size: 1.18rem; margin: 2rem 0 .7rem;
}
.training-article p { margin: 0 0 1.25rem; }
.training-article strong { color: var(--text-primary); font-weight: 700; }
.training-article a { color: var(--accent-cyan); text-decoration: underline; text-underline-offset: 3px; }

/* numbered step cards */
.training-step {
  display: flex; align-items: flex-start; gap: 1rem;
  margin: 1.6rem 0; padding: 1.15rem 1.25rem;
  background: var(--bg-surface); border: 1px solid var(--border-glass);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.training-step:hover { transform: translateY(-2px); border-color: var(--border-glass-hover); box-shadow: var(--shadow-md); }
.training-step .step-number {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 2.4rem; height: 2.4rem; font-family: var(--font-display); font-weight: 800;
  font-size: 1rem; color: #fff; background: var(--accent-gradient);
  border-radius: var(--radius-full); box-shadow: 0 4px 12px rgba(139,92,246,.35);
}
.training-step .step-content { flex: 1; min-width: 0; }
.training-step .step-title { display: block; color: var(--text-primary); font-weight: 700; margin-bottom: .35rem; }
.training-step .step-content p { margin: 0; color: var(--text-secondary); font-size: .98rem; line-height: 1.65; }

/* callout box */
.training-callout {
  display: flex; align-items: flex-start; gap: .95rem;
  margin: 1.8rem 0; padding: 1.15rem 1.25rem;
  background: rgba(139,92,246,.08); border: 1px solid rgba(139,92,246,.25);
  border-radius: var(--radius-lg); position: relative; overflow: hidden;
}
.training-callout::before {
  content: ""; position: absolute; inset: 0; opacity: .35; pointer-events: none;
  background: linear-gradient(135deg, rgba(139,92,246,.14), transparent 55%, rgba(34,211,238,.08));
}
.training-callout .callout-icon { flex: none; font-size: 1.25rem; line-height: 1; filter: drop-shadow(0 2px 4px rgba(139,92,246,.4)); }
.training-callout .callout-body { flex: 1; position: relative; }
.training-callout .callout-body p { margin: 0; color: var(--text-secondary); font-size: .96rem; line-height: 1.65; }
.training-callout .callout-body p + p { margin-top: .7rem; }


/* FAQ accordion cards */
.training-faq {
  margin: 1.2rem 0; border: 1px solid var(--border-glass); border-radius: var(--radius-lg);
  background: var(--bg-surface); overflow: hidden; box-shadow: var(--shadow-sm);
}
.training-faq-accordion { list-style: none; }
.training-faq-accordion::-webkit-details-marker,
.training-faq-accordion summary::-webkit-details-marker { display: none; }
.training-faq .faq-q { 
  padding: .95rem 1.15rem; font-weight: 600; color: var(--text-primary);
  cursor: pointer; display: flex; align-items: center; 
  user-select: none; -webkit-user-select: none;
  transition: background .22s ease, color .22s ease;
}
.training-faq .faq-q:hover { background: rgba(139,92,246,0.06); }
.training-faq[open] .faq-q { border-bottom: 1px solid var(--border-glass); }
.training-faq .faq-a { 
  padding: .95rem 1.15rem; color: var(--text-secondary); font-size: .96rem; line-height: 1.65;
  animation: faqSlideDown .28s ease;
}
@keyframes faqSlideDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.training-faq .faq-chevron {
  margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center;
  transition: transform .28s ease; color: var(--text-muted);
}
.training-faq[open] .faq-chevron { transform: rotate(180deg); color: var(--accent-violet); }
.training-faq .faq-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.8rem; margin-right: .65rem; padding: .15rem .5rem;
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .08em;
  color: #fff; background: var(--accent-gradient); border-radius: var(--radius-sm);
}
.training-faq .faq-a .faq-label { background: linear-gradient(135deg, var(--accent-cyan), var(--accent-mint)); }

/* enhanced lists */
.training-article ul, .training-article ol { margin: 0 0 1.25rem; padding-left: 0; list-style: none; }
.training-article .training-list li {
  position: relative; padding-left: 1.5rem; margin: .7rem 0;
  color: var(--text-secondary); line-height: 1.7;
}
.training-article .training-list li::before {
  content: ""; position: absolute; left: 0; top: .65rem; width: .45rem; height: .45rem;
  border-radius: 50%; background: var(--accent-gradient); box-shadow: 0 0 8px rgba(139,92,246,.45);
}
.training-article .training-list li strong { color: var(--text-primary); font-weight: 700; }

/* gradient divider */
.training-divider {
  border: none; height: 2px; margin: 2.4rem 0;
  background: linear-gradient(90deg, transparent, var(--accent-purple), var(--accent-cyan), transparent);
  border-radius: var(--radius-full); opacity: .55;
}

/* inline figure */
.training-inline-fig { margin: 2rem 0; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--border-glass); box-shadow: var(--shadow-md); }
.training-inline-fig img { width: 100%; display: block; }
.training-inline-fig figcaption {
  padding: .65rem 1rem; text-align: center; font-size: .78rem; color: var(--text-muted);
  background: var(--bg-surface); border-top: 1px solid var(--border-glass); font-family: var(--font-mono); letter-spacing: .04em;
}


/* ==========================================================================
   TRAINING POST — ARAÇ SAYFASI GÖRÜNÜMÜ (920px TAM UYUM)
   Training postlarını 250 araç sayfasındaki gibi glassmorphism görünüme
   getirir. Resimler ve tüm kart panelleri 920px konteynır içinde şekillenir.
   ========================================================================== */

/* main pozisyonu — tool sayfasındaki body.page-tool main gibi */
body.page-training-post main {
  position: relative;
}

/* training-page içindeki makale container'larını 920px sabitle (header ve footer 1200px standart kalsın) */
body.page-training-post .training-page .container,
body.page-training-post main .container {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

body.page-training-post .training-page {
  max-width: 100%;
  margin: 0 auto;
}

body.page-training-post .training-page::before {
  display: none;
}

/* top marker strip */
body.page-training-post .training-top {
  padding-top: 28px;
}

/* ── hero başlık bölümü ── */
body.page-training-post .training-post-hero {
  padding: 1.2rem 20px 1rem;
}
body.page-training-post .training-post-hero h1 {
  font-size: clamp(1.8rem, 3.8vw, 2.5rem);
  line-height: 1.15;
  margin: 0.6rem 0 0.8rem;
  letter-spacing: -0.01em;
}

/* ── Hero figure: 920px container içinde hizada ── */
body.page-training-post .training-hero-figure {
  max-width: 920px;
  margin: 1.5rem auto;
  aspect-ratio: 21 / 9;
  max-height: 420px;
  border-radius: var(--radius-xl);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: var(--shadow-lg), 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.10);
  position: relative;
}

/* ── İçerik alanı ── */
body.page-training-post .training-content {
  padding: 0;
}

/* TOC — frosted glass panel */
body.page-training-post .training-toc {
  max-width: 100%;
  margin: 1.5rem 0 0;
}
body.page-training-post .training-toc-inner {
  padding: 1.2rem 1.5rem;
  background: linear-gradient(180deg, rgba(23,51,89,0.42), rgba(9,27,50,0.38));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
}

/* Article — frosted glass panel */
body.page-training-post .training-article {
  max-width: 100%;
  margin: 1.5rem 0 0;
  padding: 32px 34px;
  background: linear-gradient(180deg, rgba(23,51,89,0.42), rgba(9,27,50,0.38));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  color: var(--text-secondary);
  font-size: 1.02rem;
  line-height: 1.8;
}

/* Article içindeki başlıklar */
body.page-training-post .training-article h2 {
  position: relative;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.35rem, 2.8vw, 1.75rem);
  line-height: 1.25;
  color: var(--text-primary);
  margin: 2.4rem 0 1rem;
  padding-bottom: 0.6rem;
}
body.page-training-post .training-article h2:first-child {
  margin-top: 0;
}
body.page-training-post .training-article h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3.5rem;
  height: 3px;
  border-radius: var(--radius-full);
  background: var(--accent-gradient);
}

/* Article sonundaki gereksiz çizgi kaldırıldı */
body.page-training-post .training-article .training-divider:last-child {
  display: none;
}

/* Article içindeki step kartları */
body.page-training-post .training-step {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  margin: 1.4rem 0;
}

/* Article içindeki callout */
body.page-training-post .training-callout {
  background: rgba(139,92,246,0.10);
  border: 1px solid rgba(139,92,246,0.25);
  border-radius: var(--radius-lg);
  margin: 1.6rem 0;
}

/* Article içindeki FAQ */
body.page-training-post .training-faq {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-lg);
  margin: 1.4rem 0;
}

/* Inline figure — makale içindeki resimler */
body.page-training-post .training-inline-fig {
  margin: 2rem 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
}

/* Related tool bölümü — frosted glass panel */
body.page-training-post .training-related-tool {
  max-width: 920px;
  margin: 1.5rem auto 0;
  padding: 0 20px;
}
body.page-training-post .training-related-card {
  background: linear-gradient(180deg, rgba(23,51,89,0.42), rgba(9,27,50,0.38));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  padding: 1.8rem 2rem;
}

/* Prev/Next nav — frosted glass panel */
body.page-training-post .training-post-navcards {
  max-width: 920px;
  margin: 1.5rem auto 0;
  padding: 0 20px;
}
body.page-training-post .training-navcard {
  background: linear-gradient(180deg, rgba(23,51,89,0.38), rgba(9,27,50,0.32));
  border: 1px solid rgba(255,255,255,0.14);
  backdrop-filter: blur(16px) saturate(130%);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  box-shadow: var(--shadow-md);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
}
body.page-training-post .training-navcard:hover {
  background: linear-gradient(180deg, rgba(23,51,89,0.52), rgba(9,27,50,0.46));
  border-color: rgba(255,255,255,0.22);
}

/* Share bölümü — frosted glass panel */
body.page-training-post .training-share {
  max-width: 920px;
  margin: 1.5rem auto 3.5rem;
  padding: 1.2rem 1.8rem;
  background: linear-gradient(180deg, rgba(23,51,89,0.42), rgba(9,27,50,0.38));
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  box-shadow: var(--shadow-lg), inset 0 1px 0 rgba(255,255,255,0.10);
  border-radius: var(--radius-xl);
  border-bottom: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

body.page-training-post .training-share-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--text-secondary);
  text-transform: uppercase;
}

body.page-training-post .share-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  color: var(--text-secondary);
  transition: all 0.2s ease;
}
body.page-training-post .share-btn:hover {
  color: var(--accent-cyan);
  border-color: rgba(34,211,238,0.5);
  background: rgba(34,211,238,0.12);
  transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 860px) {
  body.page-training-post .training-hero-figure {
    aspect-ratio: 16 / 9;
    max-height: 320px;
    margin: 1rem auto;
  }
  body.page-training-post .training-article {
    padding: 22px 20px;
  }
  body.page-training-post .training-related-card {
    flex-direction: column;
  }
  body.page-training-post .training-post-navcards {
    grid-template-columns: 1fr;
  }
  body.page-training-post .training-post-navcards .training-navcard:nth-child(2) {
    text-align: left;
    align-items: flex-start;
  }
  body.page-training-post .training-share {
    flex-direction: column;
    align-items: flex-start;
  }
}