/* EŞİK — interna.com.tr bileşen stilleri.
   Anayasa: docs/design/TASARIM-ANAYASASI.md. Bu dosyada ham hex/rgb YOKTUR
   (K37 hex-lint) — her renk tokens.css'ten `var(--…)` ile gelir (K5/K40).
   Gölge tek aile ve petrol-tonludur (K20); çizgiler 1px hairline (K19);
   köşe seti kapalıdır (K18); ağırlıklar yalnız 400/500/600 (K13);
   animasyon yalnız iki imzadır (K28) ve reduced-motion'da tamamen durur. */

/* ─────────────────────────── taban ─────────────────────────── */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

::selection {
  background: var(--brand-subtle);
  color: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  transition: color var(--t-fast) var(--ease);
}

a:hover {
  color: var(--brand-press);
}

img,
video,
svg {
  max-width: 100%;
  height: auto;
}

svg.icon,
svg.glyph {
  height: auto;
  flex: none;
  vertical-align: -0.18em;
}

/* 700 sitede yoktur (K13): vurgu dahil her kalın 600 render edilir. */
b,
strong {
  font-weight: 600;
}

h1,
h2,
h3 {
  font-weight: 600;
  line-height: 1.25;
  text-wrap: balance;
  margin-block: 0 var(--s3);
}

h1 {
  font-size: clamp(2.125rem, 1.35rem + 3.2vw, 3.25rem);
  letter-spacing: -0.025em;
  line-height: 1.12;
}

h2 {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
  letter-spacing: -0.02em;
  margin-block: var(--s7) var(--s3); /* K16 boşluk asimetrisi */
}

h2:first-child {
  margin-block-start: 0;
}

h3 {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-block: var(--s6) var(--s2);
}

h3:first-child {
  margin-block-start: 0;
}

p {
  margin-block: 0 var(--s3);
}

hr,
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--hairline);
  margin-block: var(--s7);
}

table {
  font-variant-numeric: tabular-nums;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--surface);
  color: var(--ink);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
}

.skip-link:focus {
  left: var(--s3);
  top: var(--s3);
}

/* ─────────────────────────── ölçü + ritim ─────────────────────────── */

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s4);
}

.wrap--prose {
  max-width: calc(var(--measure) + 2 * var(--s4));
}

.wrap--form {
  max-width: 36rem;
}

.section {
  padding-block: var(--s6); /* K21 mobil taban */
}

.section--tight {
  padding-block: var(--s5);
}

.section--sis {
  background: var(--bg-2);
}

@media (min-width: 760px) {
  .section {
    padding-block: var(--s8); /* K21 desktop ≥96px */
  }

  .section--tight {
    padding-block: var(--s6);
  }
}

/* Gövde metni ölçüye kilitli (K16): düz akış elemanları 68ch'yi aşamaz. */
.prose .wp-block-post-content {
  padding-block: var(--s6);
}

.prose .wp-block-post-content > :where(p, h2, h3, ul, ol, blockquote) {
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: var(--s4);
}

.prose .wp-block-post-content > :where(ul, ol) {
  padding-inline-start: calc(var(--s4) + 1.25em);
}

/* ─────────────────────────── tipografik roller ─────────────────────────── */

/* Eyebrow küçük harf YAZILIR — transform yok (D10/Y11). */
.eyebrow {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--brand);
  margin-block-end: var(--s2);
}

.eyebrow--inv {
  color: var(--inv-ink-2);
}

.standfirst,
.wp-block-post-excerpt__excerpt {
  font-size: 1.1875rem;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
}

.footnote {
  font-size: 0.8125rem;
  color: var(--ink-2);
}

/* P7 boşluk cesareti: kritik cümle yalnız bırakılır, büyütülmez. */
.pull-line {
  font-weight: 500;
  max-width: var(--measure);
  margin-block: var(--s6);
}

.wordmark {
  font-weight: 600;
  letter-spacing: -0.3px;
  font-size: 1.125rem;
}

/* ─────────────────────────── butonlar ─────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px; /* K30 hedef ≥44px — K23/1'in h40'ından bilinçli sapma */
  padding: 0 var(--s4);
  border-radius: var(--r-btn);
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.btn--primary {
  background: var(--brand);
  color: var(--on-brand);
}

.btn--primary:hover,
.btn--primary:active {
  background: var(--brand-press);
  color: var(--on-brand);
}

/* Ters hero-buton: gradyan üstünde petrol dolgu yoktur (K8). */
.btn--hero {
  background: var(--inv-ink);
  color: var(--brand-press);
}

.btn--hero:hover,
.btn--hero:active {
  background: var(--on-brand);
  color: var(--abis);
}

.btn--outline {
  background: transparent;
  border: 1px solid var(--hairline-strong);
  color: var(--brand);
}

.btn--outline:hover {
  border-color: var(--brand);
  color: var(--brand-press);
}

.btn__icon {
  margin-inline-start: 2px;
}

/* Kehribar rozet — K7 bütçeli tek vurgu ailesi; asla buton, asla link. */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--r-card);
  font-size: 0.8125rem;
  font-weight: 500;
}

.badge--amber {
  background: var(--amber-bg);
  color: var(--on-amber);
}

/* ─────────────────────────── masthead (K23/1) ─────────────────────────── */

.masthead {
  background: var(--bg);
  border-bottom: 1px solid var(--hairline);
}

.masthead__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s4);
  min-height: 64px;
  display: flex;
  align-items: center;
  gap: var(--s4);
}

.masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  text-decoration: none;
}

.masthead__glyph {
  color: var(--brand);
}

.masthead__nav {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-inline-start: auto;
}

.masthead__link {
  color: var(--ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
  padding-block: 10px; /* 44px hedefe tamamlama */
}

.masthead__link:hover {
  color: var(--ink);
}

.masthead__toggle-box,
.masthead__toggle {
  display: none;
}

@media (max-width: 879px) {
  .masthead__inner {
    flex-wrap: wrap;
  }

  .masthead__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-inline-start: auto;
    border: 1px solid var(--hairline);
    border-radius: var(--r-card);
    color: var(--ink);
    cursor: pointer;
  }

  /* Checkbox görünmez ama odaklanabilir kalır (JS'siz erişilebilir menü). */
  .masthead__toggle-box {
    display: block;
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
  }

  .masthead__toggle-box:focus-visible + .masthead__toggle {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
  }

  .masthead__nav {
    display: none;
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding-block: var(--s2) var(--s4);
  }

  .masthead__toggle-box:checked ~ .masthead__nav {
    display: flex;
  }

  .masthead__link {
    min-height: 44px;
    display: flex;
    align-items: center;
    border-top: 1px solid var(--hairline);
  }

  .masthead__cta {
    margin-block-start: var(--s3);
  }
}

/* Demo sayfasında masthead CTA gizlenir: sayfanın tek petrol dolgusu
   formun gönder butonudur (K8 viewport bütçesi). */
.page-template-page-demo .masthead__cta {
  display: none;
}

/* ─────────────────────────── hero-band (K23/2, K3) ─────────────────────────── */

.hero-band {
  background: var(--inv-hero-grad);
  color: var(--inv-ink);
  padding-block: var(--s7);
}

.hero-band--abis {
  /* Güvenlik sayfası: Abis-ağır eşik — düz yüzey, gradyan bütçesine girmez. */
  background: var(--abis);
}

.hero-band--home {
  padding-block: var(--s8);
}

.hero-band__inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: center;
  gap: var(--s7);
}

.hero-band__aside {
  display: flex;
  justify-content: center;
  color: var(--inv-glyph);
}

@media (max-width: 899px) {
  .hero-band__inner--split {
    grid-template-columns: 1fr;
  }

  .hero-band__aside {
    display: none;
  }
}

.hero-band__title,
.hero-band h1 {
  color: var(--inv-ink);
  margin-block: 0 var(--s3);
}

.hero-band__standfirst,
.hero-band .wp-block-post-excerpt__excerpt {
  color: var(--inv-ink-2);
}

.hero-band__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s4);
  margin-block: var(--s5) 0;
}

.hero-band__secondary {
  color: var(--inv-ink);
  text-decoration-color: var(--inv-ink-2);
  padding-block: 10px;
}

.hero-band__secondary:hover {
  color: var(--inv-ink);
  text-decoration-color: var(--inv-ink);
}

.trust-line {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--inv-ink-2);
  font-size: 0.9375rem;
  margin-block: var(--s6) 0;
}

.trust-line__icon {
  color: var(--inv-glyph);
}

/* İmza animasyon 1/2 — glif nefesi (K28/1): scale 1↔1.03, 2600ms.
   Splash'ın 1100ms/1.06 nefesinden bilinçli sapma: kalıcı sahnede yarı
   genlik + uzun periyot (anayasada gerekçeli). */
.hero-band--home .hero-band__glyph .glyph__dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: interna-glif-nefes 2600ms ease-in-out infinite;
}

@keyframes interna-glif-nefes {
  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.03);
  }
}

/* ─────────────────────────── başlık bloğu ─────────────────────────── */

.entry-head {
  padding-block: var(--s7) var(--s6);
  border-bottom: 1px solid var(--hairline);
}

.entry-head__meta {
  margin-block-start: var(--s3);
}

.entry-head__date,
.entry-head .wp-block-post-date {
  font-size: 0.8125rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────── answer-block (K23/13) ─────────────────────────── */

.answer-block {
  border-left: 3px solid var(--rc-reply-bar);
  background: var(--rc-reply-bg);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  padding: var(--s4) var(--s5) var(--s4) var(--s4);
}

.answer-block__text {
  margin: 0;
  max-width: var(--measure);
}

/* ─────────────────────────── SSS (K23/12) ─────────────────────────── */

.faq-item {
  border-top: 1px solid var(--hairline);
}

.faq-item:last-of-type {
  border-bottom: 1px solid var(--hairline);
}

.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  min-height: 44px;
  padding-block: var(--s3);
  font-weight: 500;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid var(--ink-2);
  border-bottom: 1.5px solid var(--ink-2);
  transform: rotate(45deg);
  transition: transform var(--t-fast) var(--ease);
}

.faq-item[open] summary::after {
  transform: rotate(-135deg);
}

.faq-item__body {
  padding-block: 0 var(--s4);
  color: var(--ink);
  max-width: var(--measure);
}

.faq-item__body p {
  margin: 0;
}

/* ─────────────────────────── kaynakça (K23/15) ─────────────────────────── */

.kaynakca {
  border-top: 1px solid var(--hairline);
  padding-block-start: var(--s5);
}

.kaynakca__list {
  font-size: 0.8125rem;
  padding-inline-start: 1.25em;
  margin: 0;
}

.kaynakca__list li {
  margin-block-end: var(--s2);
}

.kaynakca__meta {
  color: var(--ink-2);
}

/* ─────────────────────────── ağdan (K23/16) ─────────────────────────── */

.network-links {
  border-top: 1px solid var(--hairline);
  padding-block-start: var(--s5);
}

.network-links__title {
  font-size: 1.25rem;
  margin-block: 0 var(--s4);
}

.network-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.network-links__item {
  margin-block-end: var(--s4);
}

.network-links__why {
  display: block;
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin-block-start: 2px;
}

/* ─────────────────────────── karşılaştırma (K23/11) ─────────────────────────── */

.compare-scroll {
  overflow-x: auto;
}

.compare {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9375rem;
}

.compare thead th {
  background: var(--bg-2);
  font-size: 0.8125rem;
  font-weight: 500;
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--hairline-strong);
}

.compare tbody th,
.compare tbody td {
  text-align: left;
  font-weight: 400;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}

.compare tbody th {
  font-weight: 500;
}

.compare .cell-check {
  color: var(--ink);
}

.compare .cell-none {
  color: var(--ink-2);
}

.compare__ref a {
  text-decoration: none;
  font-size: 0.6875rem;
}

/* ─────────────────────────── hüküm bloğu (8.4) ─────────────────────────── */

.hukum {
  border-top: 1px solid var(--hairline);
  padding-block-start: var(--s5);
}

.hukum__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s5);
}

@media (max-width: 719px) {
  .hukum__cols {
    grid-template-columns: 1fr;
  }
}

.hukum__col h3 {
  font-size: 1.0625rem;
  margin-block: 0 var(--s2);
}

.hukum__col p {
  margin: 0;
  color: var(--ink);
}

/* ─────────────────────────── cta-form (K23/19) ─────────────────────────── */

.cta-form__hp {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.cta-form__row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-block: 0 var(--s4);
}

.cta-form__row label {
  font-size: 0.8125rem;
  font-weight: 500;
}

.cta-form__opt {
  font-weight: 400;
  color: var(--ink-2);
}

.cta-form input[type="text"],
.cta-form input[type="email"],
.cta-form select,
.cta-form textarea {
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  min-height: 44px;
  padding: 10px var(--s3);
}

.cta-form textarea {
  resize: vertical;
}

.cta-form input:focus-visible,
.cta-form select:focus-visible,
.cta-form textarea:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.cta-form__consent {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: 0.9375rem;
  margin-block: var(--s5) var(--s4);
}

.cta-form__consent input {
  width: 20px;
  height: 20px;
  margin-block-start: 2px;
  accent-color: var(--brand);
  flex: none;
}

.cta-form__submit {
  margin-block: 0 var(--s2);
}

.cta-form__note {
  margin: 0;
}

.cta-form__done {
  display: flex;
  align-items: center;
  gap: var(--s2);
  background: var(--brand-subtle);
  border-radius: var(--r-card);
  padding: var(--s3) var(--s4);
  margin-block-end: var(--s5);
  color: var(--brand-press);
}

.cta-form__done p {
  margin: 0;
}

/* hata/limit durumu — işleyici ?talep=hata|limit döner; err çizgisi + nötr zemin
   (K7: kehribar bütçesine dokunmadan durum bildirimi). */
.cta-form__done--err {
  background: var(--bg-2);
  border-left: 3px solid var(--err);
  border-radius: 0 var(--r-card) var(--r-card) 0;
  color: var(--ink);
}

/* ─────────────────────────── quote-card (K23/18) ─────────────────────────── */

.quote-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s4);
  max-width: 56rem;
  margin-inline: auto;
}

@media (max-width: 759px) {
  .quote-cards {
    grid-template-columns: 1fr;
  }
}

.quote-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
}

.quote-card__title {
  margin-block: 0 var(--s2);
}

.quote-card__lead {
  color: var(--ink-2);
}

.quote-card__scope {
  list-style: none;
  margin: 0 0 var(--s4);
  padding: 0;
}

.quote-card__scope li {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s2);
  font-size: 0.9375rem;
}

.quote-card__cta {
  margin-block: auto 0;
}

.quote-cards__note {
  max-width: 56rem;
  margin: var(--s3) auto 0;
}

/* ─────────────────────────── demo-cta yüzeyleri ─────────────────────────── */

/* Kapanış bandı: sayfanın 2. ve SON gradyan yüzeyi (K3). */
.cta-band {
  background: var(--inv-hero-grad);
  color: var(--inv-ink);
  padding-block: var(--s8);
  text-align: center;
}

.cta-band__title {
  color: var(--inv-ink);
  margin-block: 0 var(--s2);
}

.cta-band__sub {
  color: var(--inv-ink-2);
  margin-inline: auto;
  max-width: var(--measure);
}

.cta-band__actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--s3);
  margin-block: var(--s5) 0;
}

.cta-quiet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  border-block: 1px solid var(--hairline);
  padding-block: var(--s5);
  flex-wrap: wrap;
}

.cta-quiet__text {
  margin: 0;
  font-weight: 500;
}

.cta-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s5);
}

.cta-card__title {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  font-size: 1.25rem;
  margin-block: 0 var(--s2);
}

.cta-card__sub {
  color: var(--ink-2);
}

/* ─────────────────────────── üç kilit (K23/10) ─────────────────────────── */

.uc-kilit__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.uc-kilit__item {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s3);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s4);
}

.uc-kilit__no {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  color: var(--brand);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.uc-kilit__ad {
  font-size: 1.0625rem;
  margin-block: 0 var(--s1);
}

.uc-kilit__body p {
  margin: 0;
}

.uc-kilit__kapanis {
  font-weight: 500;
  font-size: 1.1875rem;
  margin-block: var(--s6) 0;
}

/* ─────────────────────────── donanım kademeleri (8.6) ─────────────────────────── */

.tiers__pills {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0 0 var(--s3);
  padding: 0;
}

.tiers__pill {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.tiers__note {
  color: var(--ink-2);
  font-size: 0.9375rem;
  margin: 0;
}

/* ─────────────────────────── hukuk çerçevesi ─────────────────────────── */

.hukuk-cerceve {
  background: var(--bg-2);
  border-radius: var(--r-card);
  padding: var(--s4) var(--s5);
}

.hukuk-cerceve__tavsiye {
  margin: 0;
  font-size: 0.9375rem;
}

.hukuk-cerceve__title {
  font-size: 0.9375rem;
  margin-block: var(--s4) var(--s2);
}

.hukuk-cerceve__list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.8125rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

.hukuk-cerceve__list li {
  margin-block-end: var(--s1);
}

/* ─────────────────────────── EN-TR eşleme ─────────────────────────── */

.en-tr__intro {
  color: var(--ink-2);
}

.en-tr__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin: 0;
  padding: 0;
}

.en-tr__item {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s2) var(--s3);
}

.en-tr__term {
  font-weight: 500;
  font-size: 0.9375rem;
}

.en-tr__desc {
  display: block;
  color: var(--ink-2);
  font-size: 0.8125rem;
}

/* ─────────────────────────── güven şeridi ─────────────────────────── */

.trust-strip {
  background: var(--bg-2);
  border-block: 1px solid var(--hairline);
  padding-block: var(--s3);
}

.trust-strip__inner {
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.trust-strip__icon {
  color: var(--brand);
}

.trust-strip__text {
  margin: 0;
  font-size: 0.9375rem;
}

/* ─────────────────────────── recreation çerçevesi (K23/4) ─────────────────────────── */

.rc-frame {
  margin: 0;
  background: var(--bg-2);
  border: 1px solid var(--hairline);
  border-radius: var(--r-frame);
  box-shadow: var(--shadow-float);
  padding: var(--s4);
}

.rc-frame__caption {
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin-block-start: var(--s3);
}

/* ── ChatListDemo (K23/5) ── */

.chatlist {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
  max-width: 380px;
  margin-inline: auto;
}

.chatlist__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s3) var(--s3) var(--s2);
}

.chatlist__title {
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.chatlist__pen {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand);
  border-radius: 8px;
}

.chatlist__search {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 var(--s3) var(--s2);
  background: var(--bg-2);
  border-radius: var(--r-pill);
  padding: 8px var(--s3);
  color: var(--ink-3); /* dekoratif placeholder — bilgi taşımaz (K31) */
  font-size: 0.875rem;
}

.chatlist__row {
  display: flex;
  align-items: center;
  gap: var(--s2);
  padding: 10px var(--s3);
  border-top: 1px solid var(--hairline);
}

.chatlist__avatar {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand);
  border-radius: var(--r-pill);
  font-size: 0.8125rem;
  font-weight: 600;
}

.chatlist__mid {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.chatlist__name {
  font-size: 0.9375rem;
  font-weight: 500;
}

.chatlist__preview {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chatlist__tick {
  color: var(--ink-3);
  display: inline-flex;
  flex: none;
}

/* Okundu tiki: ürünün camgöbeği tiki beyaz listede görünmez kalırdı;
   aynı ailenin okunur tonu (reply-bar) kullanılır — bilinçli minyatür uyarlaması. */
.chatlist__tick--read {
  color: var(--rc-reply-bar);
}

.chatlist__side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.chatlist__time {
  font-size: 0.75rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* Okunmamış rozeti: recreation içi kehribar — K7 bütçesine SAYILIR. */
.chatlist__badge {
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--amber);
  color: var(--on-amber);
  border-radius: var(--r-pill);
  font-size: 0.6875rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding-inline: 5px;
}

.chatlist__tabbar {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid var(--hairline);
  padding-block: 8px;
}

.chatlist__tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  font-size: 0.65625rem;
  color: var(--ink-3); /* pasif sekme — dekoratif */
}

.chatlist__tab.is-active {
  color: var(--brand);
  font-weight: 500;
}

/* ── BubbleDemo (K23/6) ── */

.rc-frame--wash .bubbles {
  background: var(--bg-wash);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 420px;
  margin-inline: auto;
}

.bubble {
  max-width: 78%;
  padding: 8px 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.bubble__text {
  margin: 0;
}

/* Balon anatomisi: ana köşe 16, kuyruk 4 — kuyruk gönderen tarafında. */
.bubble--in {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px 16px 16px 4px;
}

.bubble--out {
  align-self: flex-end;
  background: var(--rc-bubble-sent);
  color: var(--on-brand);
  border-radius: 16px 16px 4px 16px;
}

.bubble__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 0.6875rem;
  font-variant-numeric: tabular-nums;
  margin-block-start: 2px;
}

.bubble--in .bubble__meta {
  color: var(--ink-3); /* dekoratif meta */
}

.bubble--out .bubble__meta {
  color: var(--rc-bubble-meta);
}

.bubble__reply {
  display: block;
  border-left: 3px solid var(--rc-reply-bar);
  background: var(--rc-reply-bg);
  border-radius: 6px;
  padding: 6px 8px;
  margin-block-end: 6px;
}

.bubble__reply-name {
  display: block;
  font-size: 0.6875rem;
  font-weight: 500;
  color: var(--rc-bubble-meta);
}

.bubble__reply-text {
  display: block;
  font-size: 0.75rem;
  color: var(--rc-bubble-meta);
}

/* İmza animasyon 2/2 — tik makinesi (K28/2, D6): Check → CheckCheck
   (--ink-3) → CheckCheck (--rc-read-tick). Adım hissi keyframe
   basamaklarıyla, tam döngü 6s, JS'siz. */
.ticks {
  color: var(--ink-3);
  animation: interna-tick-renk 6s var(--ease) infinite;
}

.ticks__second {
  opacity: 0;
  animation: interna-tick-iki 6s var(--ease) infinite;
}

@keyframes interna-tick-renk {
  0%,
  48% {
    color: var(--ink-3);
  }

  52%,
  96% {
    color: var(--rc-read-tick);
  }

  100% {
    color: var(--ink-3);
  }
}

@keyframes interna-tick-iki {
  0%,
  18% {
    opacity: 0;
  }

  22%,
  100% {
    opacity: 1;
  }
}

/* ── DesktopRailDemo (K23/7) ── */

.rail-demo {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  overflow: hidden;
}

.rail-demo__titlebar {
  position: relative;
  height: 38px; /* ürün gerçeği */
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-2);
  border-bottom: 1px solid var(--hairline);
}

.rail-demo__dots {
  position: absolute;
  left: var(--s3);
  display: flex;
  gap: 6px;
}

.rail-demo__dots i {
  width: 10px;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--hairline-strong);
}

.rail-demo__apptitle {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--ink-2);
}

.rail-demo__cols {
  display: grid;
  grid-template-columns: 44px 148px minmax(0, 1fr);
  min-height: 250px;
}

.rail-demo__rail {
  background: var(--inv-rail);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
  padding-block: var(--s2);
}

.rail-demo__glyph {
  color: var(--inv-glyph);
  margin-block-end: var(--s1);
}

.rail-demo__icon {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--inv-rail-icon);
}

.rail-demo__icon.is-active {
  color: var(--inv-ink);
  background: var(--rc-rail-active);
}

.rail-demo__icon--last {
  margin-block-start: auto;
}

.rail-demo__list {
  border-right: 1px solid var(--hairline);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.rail-demo__row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px;
  border-radius: 8px;
}

.rail-demo__row.is-active {
  background: var(--brand-subtle);
}

.rail-demo__avatar {
  flex: none;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand);
  border: 1px solid var(--hairline);
  border-radius: var(--r-pill);
  font-size: 0.5625rem;
  font-weight: 600;
}

.rail-demo__rowtext {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.rail-demo__name {
  font-size: 0.6875rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-demo__preview {
  font-size: 0.625rem;
  color: var(--ink-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rail-demo__canvas {
  position: relative;
  background: var(--bg-wash);
  padding: var(--s6) var(--s3) var(--s3);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}

.rail-demo__bubble {
  max-width: 62%; /* masaüstü balon oranı — ürün gerçeği */
  font-size: 0.6875rem;
  line-height: 1.4;
  padding: 5px 8px;
}

.rail-demo__bubble--in {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px 10px 10px 3px;
}

.rail-demo__bubble--out {
  align-self: flex-end;
  background: var(--rc-bubble-sent);
  color: var(--on-brand);
  border-radius: 10px 10px 3px 10px;
}

.rail-demo__kbar {
  position: absolute;
  top: var(--s3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  box-shadow: var(--shadow-card);
  padding: 6px 10px;
  white-space: nowrap;
}

.rail-demo__kkey {
  font-size: 0.6875rem;
  font-weight: 500;
  background: var(--bg-2);
  border-radius: 4px;
  padding: 2px 5px;
}

.rail-demo__kinput {
  font-size: 0.6875rem;
  color: var(--ink-2);
}

@media (max-width: 619px) {
  .rail-demo__cols {
    grid-template-columns: 44px minmax(0, 1fr);
  }

  .rail-demo__list {
    display: none;
  }
}

/* ── CallDemo (K23/8) — cam yüzeylerin tek meşru adresi (Y1 istisnası) ── */

.call-demo {
  background: var(--inv-call-grad);
  border-radius: var(--r-card);
  padding: var(--s6) var(--s4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s1);
  max-width: 300px;
  margin-inline: auto;
}

.call-demo__avatar {
  width: 84px;
  height: 84px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--rc-call-glass);
  border: 1px solid var(--rc-call-glass);
  border-radius: var(--r-pill);
  color: var(--inv-ink);
  font-size: 1.375rem;
  font-weight: 600;
  margin-block-end: var(--s2);
}

.call-demo__name {
  color: var(--inv-ink);
  font-size: 1.0625rem;
  font-weight: 600;
}

.call-demo__line {
  color: var(--inv-ink-2);
  font-size: 0.8125rem;
}

.call-demo__controls {
  display: flex;
  gap: var(--s3);
  margin-block-start: var(--s5);
}

.call-demo__btn {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-pill);
}

.call-demo__btn--glass {
  background: var(--rc-call-glass);
  color: var(--inv-ink);
}

.call-demo__btn--end {
  background: var(--rc-call-end);
  color: var(--inv-ink);
}

.call-demo__btn--end .icon {
  transform: rotate(135deg);
}

.call-demo__btn--accept {
  background: var(--ok);
  color: var(--inv-ink);
}

/* ─────────────────────────── feature-row (K23/9, K21) ─────────────────────────── */

.feature-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s7);
  align-items: center;
}

.feature-row + .feature-row {
  margin-block-start: var(--s8);
}

.feature-row--flip .feature-row__figure {
  order: -1;
}

.feature-row__text h3 {
  margin-block-start: 0;
}

.feature-row__figure {
  display: flex;
  justify-content: center;
}

@media (max-width: 759px) {
  .feature-row {
    grid-template-columns: 1fr;
    gap: var(--s5);
  }

  .feature-row--flip .feature-row__figure {
    order: 0;
  }
}

/* ── FeatureRow mini figürleri (DOM, bitmap değil — K42) ── */

.fig {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
  padding: var(--s4);
}

.fig--invite {
  max-width: 300px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s2);
}

.fig-invite__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-subtle);
  color: var(--brand);
  border-radius: var(--r-card);
}

.fig-invite__title {
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0;
}

.fig-invite__sub {
  font-size: 0.8125rem;
  color: var(--ink-2);
  margin: 0;
}

.fig-invite__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-btn);
  padding: 8px 14px;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--brand-press);
  margin-block-start: var(--s1);
}

.fig--locks {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  max-width: 300px;
  width: 100%;
}

.fig-locks__row {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 10px var(--s3);
  font-size: 0.9375rem;
  font-weight: 500;
}

.fig-locks__row .icon {
  color: var(--brand);
}

.fig--paket {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s2);
  max-width: 340px;
  width: 100%;
}

.fig-paket__card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: var(--s3);
}

.fig-paket__card .icon {
  color: var(--brand);
}

.fig-paket__name {
  font-size: 0.9375rem;
  font-weight: 500;
}

.fig-paket__sub {
  font-size: 0.75rem;
  color: var(--ink-2);
}

/* ─────────────────────────── landing sahneleri ─────────────────────────── */

.product-stage__head {
  max-width: var(--measure);
  margin-block-end: var(--s6);
}

.product-stage {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--s5);
  align-items: start;
}

.product-stage__secondary {
  margin-block-start: var(--s7); /* asimetrik oturma (K21/P4) */
}

@media (max-width: 819px) {
  .product-stage {
    grid-template-columns: 1fr;
  }

  .product-stage__secondary {
    margin-block-start: 0;
  }
}

.desktop-stage__head {
  max-width: var(--measure);
  margin-block-end: var(--s6);
}

/* ─────────────────────────── dürüstlük bölümü (K36) ─────────────────────────── */

.honesty {
  margin: 0;
}

.honesty__item {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s4);
}

.honesty__item dt {
  font-size: 1.0625rem;
  font-weight: 500;
}

.honesty__item dd {
  margin: 6px 0 0;
  color: var(--ink);
}

/* ─────────────────────────── platform rozetleri (K23/17) ─────────────────────────── */

.platforms {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
}

.platforms__badge {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card); /* pill DEĞİL */
  padding: 10px 14px;
  font-size: 0.9375rem;
  font-weight: 500;
}

/* ─────────────────────────── süreç adımları (8.7) ─────────────────────────── */

.steps {
  list-style: none;
  counter-reset: interna-adim;
  margin: 0;
  padding: 0;
}

.steps__item {
  counter-increment: interna-adim;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: var(--s3);
  border-top: 1px solid var(--hairline);
  padding-block: var(--s4);
}

.steps__item::before {
  content: counter(interna-adim);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-pill);
  color: var(--brand);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* ─────────────────────────── mimari diyagram (8.6, Y4: düz DOM) ─────────────────────────── */

.mimari {
  display: flex;
  flex-direction: column;
  gap: var(--s3);
  align-items: stretch;
}

.mimari__bina {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--r-card);
  background: var(--surface);
  padding: var(--s4);
  display: flex;
  flex-direction: column;
  gap: var(--s3);
}

.mimari__label {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
}

.mimari__server {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  background: var(--brand-subtle);
  color: var(--brand-press);
  padding: var(--s2) var(--s3);
  font-size: 0.9375rem;
  font-weight: 500;
  align-self: flex-start;
}

.mimari__clients {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.mimari__client {
  border: 1px solid var(--hairline);
  border-radius: var(--r-card);
  padding: 6px 12px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.mimari__dis {
  border: 1px dashed var(--hairline-strong);
  border-radius: var(--r-card);
  padding: var(--s2) var(--s3);
  font-size: 0.8125rem;
  color: var(--ink-2);
  text-align: center;
}

/* ─────────────────────────── guide-cta (8.3) ─────────────────────────── */

.guide-cta {
  padding-block: var(--s6);
}

.guide-cta__row {
  margin: 0;
}

/* ─────────────────────────── arşiv listeleri ─────────────────────────── */

.archive-list__item {
  border-top: 1px solid var(--hairline);
  padding-block: var(--s5);
}

.archive-list__title {
  font-size: 1.25rem;
  letter-spacing: -0.01em;
  margin-block: 0 var(--s1);
}

.archive-list__title a {
  color: var(--ink);
  text-decoration: none;
}

.archive-list__title a:hover {
  color: var(--brand-press);
  text-decoration: underline;
}

.archive-list__excerpt .wp-block-post-excerpt__excerpt {
  font-size: 1rem;
  color: var(--ink-2);
  margin: 0;
}

.archive-list__date {
  font-size: 0.8125rem;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
  margin-block-start: var(--s1);
}

.wp-block-query-pagination {
  display: flex;
  gap: var(--s4);
  padding-block: var(--s5);
}

/* ─────────────────────────── footer künye (K23/20, D3) ─────────────────────────── */

.footer {
  background: var(--abis); /* mode-invariant (K6) */
  color: var(--inv-ink);
  padding-block: var(--s7) var(--s6);
}

.footer__inner {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--s4);
}

.footer__brand {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-block-end: var(--s6);
}

.footer__glyph {
  color: var(--inv-glyph);
}

.footer__slogan {
  margin: 0 0 0 var(--s3);
  color: var(--inv-ink-2);
  font-size: 0.9375rem;
}

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--s5);
}

@media (max-width: 899px) {
  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 519px) {
  .footer__cols {
    grid-template-columns: 1fr;
  }
}

.footer__title {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--inv-ink);
  margin-block: 0 var(--s3);
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer__list li {
  margin-block-end: var(--s2);
}

.footer__list a {
  color: var(--inv-ink-2);
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer__list a:hover {
  color: var(--inv-ink);
  text-decoration: underline;
}

.footer__kunye {
  border-top: 1px solid var(--inv-card);
  margin-block-start: var(--s6);
  padding-block-start: var(--s4);
}

.footer__ayrim {
  color: var(--inv-ink-2);
  font-size: 0.8125rem;
  max-width: 72ch;
  margin-block: 0 var(--s2);
}

.footer__telif {
  color: var(--inv-ink-2);
  font-size: 0.8125rem;
  margin: 0;
}

/* ─────────────────────────── hareket kapısı (K28) ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  /* Tik makinesi statik son karede durur: okundu. */
  .ticks {
    color: var(--rc-read-tick);
  }

  .ticks__second {
    opacity: 1;
  }
}