/* ===========================================================================
   OnPixel — İç sayfalar
   Stüdyo, Devlog, yazı, iletişim, gizlilik ve 404 sayfalarının
   ortak bileşenleri. Tokenlar onpixel.css'ten gelir.
   ========================================================================= */

/* --- Sayfa başlığı ------------------------------------------------------- */

.onpixel-phead {
  position: relative;
  padding: clamp(8rem, 18vh, 13rem) 0 clamp(2.5rem, 6vh, 4.5rem);
  overflow: hidden;
  isolation: isolate;
  /* Sert alt kenarlık kaldırıldı: ekran görüntülerinde sayfayı yatay
     dilimlere bölen çizgi buydu. Geçiş artık zeminin kendisiyle. */
  background:
    radial-gradient(85% 70% at 12% 0%,
      color-mix(in srgb, var(--onpixel-e-core) 15%, transparent) 0%, transparent 62%),
    linear-gradient(180deg,
      color-mix(in srgb, var(--onpixel-graphite) 90%, transparent) 0%,
      transparent 100%);
}

.onpixel-phead__title {
  margin: 0.9rem 0 0;
  font-size: var(--onpixel-t-xl);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.92;
  letter-spacing: -0.032em;
  color: var(--onpixel-bone);
  text-wrap: balance;
}
/* Yazı başlıkları okunacak metin; başlık genişliği kırılmasın. */
.onpixel-phead__title--article {
  font-size: var(--onpixel-t-lg);
  font-stretch: 112%;
  max-width: 22ch;
}
.onpixel-phead__lede {
  max-width: 52ch;
  margin-top: 1.3rem;
  color: var(--onpixel-steel);
}
.onpixel-phead--article { padding-bottom: clamp(1.6rem, 4vh, 2.6rem); }

/* --- Metin bağlantısı ---------------------------------------------------- */

.onpixel-tlink {
  color: var(--onpixel-bone);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--onpixel-e-core) 55%, transparent);
  transition: color var(--onpixel-dur) var(--onpixel-ease-out),
              border-color var(--onpixel-dur) var(--onpixel-ease-out);
}
.onpixel-tlink:hover,
.onpixel-tlink:focus-visible {
  color: var(--onpixel-e-glow);
  border-bottom-color: var(--onpixel-e-glow);
}

/* --- İlkeler (stüdyo) ---------------------------------------------------- */

.onpixel-tenets {
  display: grid;
  gap: clamp(1rem, 2vw, 1.7rem);
  margin-top: clamp(2.5rem, 6vh, 4rem);
}
@media (min-width: 56rem) {
  .onpixel-tenets { grid-template-columns: 1fr 1.1fr 0.92fr; }
}
.onpixel-tenet {
  padding: clamp(1.7rem, 3.5vw, 2.6rem);
  border: 1px solid var(--onpixel-edge);
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--onpixel-e-core) 7%, transparent) 0%, transparent 58%),
    var(--onpixel-graphite);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  transition: border-color .4s var(--onpixel-ease-out), background .4s var(--onpixel-ease-out);
}
.onpixel-tenet:hover {
  border-color: color-mix(in srgb, var(--onpixel-e-core) 38%, transparent);
  background:
    linear-gradient(168deg,
      color-mix(in srgb, var(--onpixel-e-core) 15%, transparent) 0%, transparent 62%),
    var(--onpixel-graphite);
}
.onpixel-tenet__name {
  margin: 0 0 0.8rem;
  font-size: var(--onpixel-t-md);
  font-weight: 700;
  font-stretch: 112%;
  color: var(--onpixel-bone);
}
.onpixel-tenet__text {
  margin: 0;
  font-size: var(--onpixel-t-sm);
  line-height: 1.65;
  color: var(--onpixel-steel);
}
.onpixel-tenets__acts { margin-top: clamp(1.8rem, 4vh, 2.6rem); }

/* --- Devlog listesi ------------------------------------------------------ */

.onpixel-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: clamp(2rem, 5vh, 3rem);
}
.onpixel-filter__btn {
  padding: 0.55em 1.05em;
  font: inherit;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--onpixel-steel);
  background: transparent;
  border: 1px solid var(--onpixel-edge);
  cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px));
  transition: color var(--onpixel-dur) var(--onpixel-ease-out),
              border-color var(--onpixel-dur) var(--onpixel-ease-out),
              background var(--onpixel-dur) var(--onpixel-ease-out);
}
.onpixel-filter__btn:hover { color: var(--onpixel-bone); border-color: var(--onpixel-edge-strong); }
.onpixel-filter__btn.is-active {
  color: var(--onpixel-void);
  background: var(--onpixel-bone);
  border-color: var(--onpixel-bone);
}

.onpixel-posts {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--onpixel-edge);
}
.onpixel-post { border-bottom: 1px solid var(--onpixel-edge); }
.onpixel-post[hidden] { display: none; }

.onpixel-post__link {
  display: grid;
  gap: 0.5rem;
  padding: clamp(1.5rem, 3.5vh, 2.4rem) 0;
  text-decoration: none;
  color: inherit;
  transition: padding-left var(--onpixel-dur) var(--onpixel-ease-out);
}
@media (min-width: 56rem) {
  .onpixel-post__link {
    grid-template-columns: 15rem 1fr;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: baseline;
  }
  /* Üç çocuk iki sütuna kendiliğinden akınca özet alt satırın soluna
     düşüyordu. Yerleşim açıkça belirtiliyor. */
  .onpixel-post__link > .onpixel-post__meta { grid-column: 1; grid-row: 1; }
  .onpixel-post__link > .onpixel-post__title { grid-column: 2; grid-row: 1; }
  .onpixel-post__link > .onpixel-post__excerpt { grid-column: 2; grid-row: 2; }
  .onpixel-post__link:hover,
  .onpixel-post__link:focus-visible { padding-left: 1rem; }
}
.onpixel-post__meta {
  display: flex;
  gap: 0.9rem;
  align-items: baseline;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
}
.onpixel-post__cat { color: color-mix(in srgb, var(--onpixel-e-core) 75%, var(--onpixel-steel)); }
.onpixel-post__title {
  margin: 0 0 0.5rem;
  font-size: var(--onpixel-t-md);
  font-weight: 700;
  font-stretch: 108%;
  color: var(--onpixel-bone);
  transition: color var(--onpixel-dur) var(--onpixel-ease-out);
}
.onpixel-post__link:hover .onpixel-post__title { color: var(--onpixel-e-glow); }
.onpixel-post__excerpt {
  margin: 0;
  max-width: var(--onpixel-measure);
  font-size: var(--onpixel-t-sm);
  line-height: 1.65;
  color: var(--onpixel-steel);
}
.onpixel-empty {
  padding: 3rem 0;
  color: var(--onpixel-mute);
  font-size: var(--onpixel-t-sm);
}

/* --- Yazı gövdesi -------------------------------------------------------- */

.onpixel-article__meta {
  display: flex;
  gap: 1rem;
  margin-top: 1.4rem;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
}

.onpixel-prose {
  padding: clamp(3rem, 8vh, 5rem) 0 clamp(2rem, 5vh, 3.5rem);
  color: var(--onpixel-steel);
}
.onpixel-prose p {
  margin: 0 0 1.5em;
  max-width: 68ch;
  font-size: var(--onpixel-t-body);
  line-height: 1.75;
}
.onpixel-prose__lede {
  color: var(--onpixel-bone);
  font-size: var(--onpixel-t-md) !important;
  line-height: 1.55 !important;
}
.onpixel-prose h2 {
  margin: 2.6em 0 0.9em;
  font-size: var(--onpixel-t-md);
  font-weight: 700;
  font-stretch: 112%;
  color: var(--onpixel-bone);
}
.onpixel-prose h2:first-child { margin-top: 0; }

.onpixel-quote {
  --onpixel-c: var(--onpixel-steel);
  margin: 2.4em 0;
  padding: 1.6rem 0 1.6rem 1.8rem;
  border-left: 2px solid var(--onpixel-c);
  font-size: var(--onpixel-t-md);
  line-height: 1.5;
  color: var(--onpixel-bone);
  max-width: 52ch;
}
.onpixel-quote[data-element="fire"]   { --onpixel-c: var(--onpixel-fire-core); }
.onpixel-quote[data-element="ice"]    { --onpixel-c: var(--onpixel-ice-core); }
.onpixel-quote[data-element="poison"] { --onpixel-c: var(--onpixel-poison-core); }

.onpixel-note {
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.5rem !important;
  border: 1px solid var(--onpixel-edge);
  background: var(--onpixel-graphite);
  font-size: var(--onpixel-t-sm) !important;
  color: var(--onpixel-steel);
}
.onpixel-prose--legal h2 { margin-top: 2.2em; }

.onpixel-artnav {
  display: grid;
  gap: 1px;
  padding-bottom: clamp(3rem, 7vh, 5rem);
  background: var(--onpixel-edge);
  border-block: 1px solid var(--onpixel-edge);
  background-clip: padding-box;
}
@media (min-width: 48rem) {
  .onpixel-artnav { grid-template-columns: 1fr 1fr; padding-bottom: 0; margin-bottom: clamp(3rem, 7vh, 5rem); }
}
.onpixel-artnav__item {
  display: grid;
  gap: 0.5rem;
  padding: 1.6rem 1.4rem 1.6rem 0;
  text-decoration: none;
  color: inherit;
  background: var(--onpixel-void);
}
.onpixel-artnav__item--next { text-align: right; padding-right: 0; padding-left: 1.4rem; }
.onpixel-artnav__name {
  font-size: var(--onpixel-t-sm);
  font-weight: 600;
  color: var(--onpixel-bone);
  transition: color var(--onpixel-dur) var(--onpixel-ease-out);
}
.onpixel-artnav__item:hover .onpixel-artnav__name { color: var(--onpixel-e-glow); }

/* --- Medya varlıkları ---------------------------------------------------- */

.onpixel-assets {
  list-style: none;
  margin: clamp(2.5rem, 6vh, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--onpixel-edge);
  border: 1px solid var(--onpixel-edge);
}
@media (min-width: 44rem) { .onpixel-assets { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 72rem) { .onpixel-assets { grid-template-columns: repeat(3, 1fr); } }

.onpixel-asset__link {
  display: grid;
  gap: 0.45rem;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--onpixel-graphite);
  text-decoration: none;
  color: inherit;
  transition: background var(--onpixel-dur) var(--onpixel-ease-out);
}
.onpixel-asset__link:hover { background: var(--onpixel-charcoal); }
.onpixel-asset__name {
  font-size: var(--onpixel-t-sm);
  font-weight: 600;
  color: var(--onpixel-bone);
}
.onpixel-asset__kind {
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
}

.onpixel-desc { margin-top: clamp(2.5rem, 6vh, 4rem); }
.onpixel-desc__label {
  margin: 0 0 0.7rem;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
}
.onpixel-desc__text {
  margin: 0 0 2.2rem;
  max-width: 66ch;
  font-size: var(--onpixel-t-body);
  line-height: 1.7;
  color: var(--onpixel-steel);
}

/* --- İletişim ------------------------------------------------------------ */

.onpixel-contact {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4.5rem);
}
@media (min-width: 62rem) {
  .onpixel-contact { grid-template-columns: 20rem 1fr; }
}
.onpixel-chan {
  padding-bottom: 1.6rem;
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--onpixel-edge);
}
.onpixel-chan:last-child { border-bottom: 0; }
.onpixel-chan__label {
  margin: 0 0 0.45rem;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--onpixel-e-core) 75%, var(--onpixel-steel));
}
.onpixel-chan__text {
  margin: 0 0 0.5rem;
  font-size: var(--onpixel-t-sm);
  line-height: 1.6;
  color: var(--onpixel-steel);
}
.onpixel-chan__addr { margin: 0; font-size: var(--onpixel-t-sm); color: var(--onpixel-bone); }

.onpixel-form { display: grid; gap: 1.4rem; max-width: 44rem; }
.onpixel-field { display: grid; gap: 0.5rem; }
.onpixel-field__label {
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
}
.onpixel-field__input {
  width: 100%;
  padding: 0.85em 1em;
  font: inherit;
  font-size: var(--onpixel-t-sm);
  color: var(--onpixel-bone);
  background: var(--onpixel-graphite);
  border: 1px solid var(--onpixel-edge);
  border-radius: 0;
  transition: border-color var(--onpixel-dur) var(--onpixel-ease-out),
              background var(--onpixel-dur) var(--onpixel-ease-out);
}
.onpixel-field__input:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--onpixel-e-core) 65%, transparent);
  background: var(--onpixel-charcoal);
}
.onpixel-field__input--area { resize: vertical; min-height: 9rem; line-height: 1.6; }

/* Tarayıcı ok işaretini gizleyip kendi işaretimizi koyuyoruz. */
.onpixel-select { position: relative; }
.onpixel-select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.6em;
}
.onpixel-select::after {
  content: "";
  position: absolute;
  right: 1.1em; top: 50%;
  width: 7px; height: 7px;
  margin-top: -5px;
  border-right: 1px solid var(--onpixel-steel);
  border-bottom: 1px solid var(--onpixel-steel);
  transform: rotate(45deg);
  pointer-events: none;
}

.onpixel-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.onpixel-form__send { justify-self: start; margin-top: 0.4rem; }
.onpixel-form__note {
  margin: 0;
  font-size: var(--onpixel-t-hud);
  line-height: 1.7;
  color: var(--onpixel-mute);
}
.onpixel-form__note code {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color: var(--onpixel-steel);
}

/* --- 404 ----------------------------------------------------------------- */

.onpixel-nf {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 78svh;
  padding: clamp(7rem, 16vh, 11rem) 0 clamp(4rem, 9vh, 7rem);
  overflow: hidden;
  isolation: isolate;
  text-align: center;
}

.onpixel-nf__title {
  margin: 0.8rem 0 0;
  font-size: var(--onpixel-t-key);
  font-weight: 900;
  font-stretch: 125%;
  line-height: 0.88;
  letter-spacing: -0.035em;
  color: var(--onpixel-bone);
}
.onpixel-nf__lede {
  max-width: 42ch;
  margin: 1.4rem auto 2.2rem;
  color: var(--onpixel-steel);
}
.onpixel-nf .onpixel-rally__acts { justify-content: center; }

/* --- Hareket azaltma ----------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .onpixel-post__link,
  .onpixel-asset__link,
  .onpixel-filter__btn,
  .onpixel-tlink,
  .onpixel-field__input { transition: none; }
  .onpixel-post__link:hover { padding-left: 0; }
}

/* --- Form sonucu bildirimi ----------------------------------------------- */

.onpixel-flash {
  padding: 1rem 1.2rem;
  margin-bottom: 1.6rem;
  font-size: var(--onpixel-t-sm);
  border-left: 2px solid var(--onpixel-steel);
  background: var(--onpixel-graphite);
  color: var(--onpixel-bone);
  animation: onpixel-flash-in 0.45s var(--onpixel-ease-out) both;
}
.onpixel-flash.is-ok  { border-left-color: var(--onpixel-ice-core); }
.onpixel-flash.is-bad { border-left-color: var(--onpixel-fire-core); }
.onpixel-form > .onpixel-flash { margin: 0; }
.onpixel-flash__code {
  display: block;
  width: fit-content;
  margin-top: .65rem;
  padding: .42rem .62rem;
  font: 760 .78rem/1 var(--onpixel-font-mono, monospace);
  letter-spacing: .1em;
  color: var(--onpixel-ice-core);
  border: 1px solid color-mix(in srgb, var(--onpixel-ice-core) 42%, var(--onpixel-edge));
  background: color-mix(in srgb, var(--onpixel-ice-core) 7%, #05070a);
}
.onpixel-form__send:disabled { cursor: wait; opacity: .62; }
@keyframes onpixel-flash-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

/* --- Okuma ilerlemesi ----------------------------------------------------- */

.onpixel-progress {
  position: fixed;
  top: 0; left: 0;
  z-index: 160;
  width: 100%;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg,
    var(--onpixel-e-core), var(--onpixel-e-glow));
  box-shadow: 0 0 18px color-mix(in srgb, var(--onpixel-e-core) 70%, transparent);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .onpixel-flash { animation: none; }
}

/* --- 404: düşen yuva ------------------------------------------------------
   Oyunun kendi diliyle anlatıyoruz: dört yuvadan biri kapanmış. Metin
   yerine sahnenin kendisi durumu söylüyor. */

.onpixel-lost {
  display: flex;
  justify-content: center;
  gap: 0.7rem;
  margin-bottom: 2.2rem;
}
.onpixel-lost__slot {
  width: clamp(2.4rem, 5vw, 3.6rem);
  aspect-ratio: 5 / 7;
  border: 1px solid color-mix(in srgb, var(--onpixel-e-core) 34%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--onpixel-e-core) 12%, transparent), transparent);
}
.onpixel-lost__slot--gone {
  border-style: dashed;
  border-color: var(--onpixel-edge-strong);
  background: none;
  animation: onpixel-lost-flicker 3.4s ease-in-out infinite;
}
@keyframes onpixel-lost-flicker {
  0%, 100% { opacity: 0.3; }
  50%      { opacity: 0.75; }
}
@media (prefers-reduced-motion: reduce) {
  .onpixel-lost__slot--gone { animation: none; opacity: 0.4; }
}

/* --- Devlog yazılarında element şeridi ------------------------------------
   Yazının konusu hangi elementse, sol kenarda o rengin şeridi belirir.
   Sayfa tonuyla birlikte çalışır: üstüne gelince hem şerit hem sayfa döner. */

.onpixel-post { position: relative; }
.onpixel-post::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  transform: scaleY(0);
  transform-origin: 50% 0;
  transition: transform 0.45s var(--onpixel-ease-out);
  background: linear-gradient(180deg,
    var(--onpixel-c, var(--onpixel-steel)), transparent);
}
.onpixel-post[data-element="fire"]   { --onpixel-c: var(--onpixel-fire-core); }
.onpixel-post[data-element="ice"]    { --onpixel-c: var(--onpixel-ice-core); }
.onpixel-post[data-element="poison"] { --onpixel-c: var(--onpixel-poison-core); }
.onpixel-post:hover::before,
.onpixel-post:focus-within::before { transform: scaleY(1); }

/* --- Stüdyo: soluk element filigranı --------------------------------------
   Sayfa metin ağırlıklı ve boş duruyordu. Filigran içeriği bastırmadan
   yüzeye ağırlık veriyor. */

.onpixel-tenets { position: relative; }
.onpixel-tenets::before {
  content: "";
  position: absolute;
  right: 0;
  top: -55%;
  width: min(34rem, 46vw);
  aspect-ratio: 1;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 50%,
    color-mix(in srgb, var(--onpixel-e-core) 12%, transparent) 0%, transparent 62%);
}

/* --- Altbilgi durum satırı ------------------------------------------------ */

.onpixel-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--onpixel-steel);
}
.onpixel-status i {
  width: 7px; height: 7px;
  background: var(--onpixel-e-core);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--onpixel-e-core) 60%, transparent);
  animation: onpixel-pulse 2.6s ease-out infinite;
}
@keyframes onpixel-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--onpixel-e-core) 55%, transparent); }
  70%  { box-shadow: 0 0 0 10px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .onpixel-status i { animation: none; }
  .onpixel-post::before { transition: none; }
}

/* --- Yazı içindekiler ------------------------------------------------------ */

.onpixel-toc {
  margin-top: clamp(2rem, 5vh, 3rem);
  padding: 1.2rem 1.4rem;
  border-left: 2px solid color-mix(in srgb, var(--onpixel-e-core) 55%, transparent);
  background: color-mix(in srgb, var(--onpixel-graphite) 80%, transparent);
}
.onpixel-toc__title {
  margin: 0 0 0.7rem;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
}
.onpixel-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
  counter-reset: toc;
}
.onpixel-toc li { counter-increment: toc; }
.onpixel-toc a {
  display: inline-block;
  font-size: var(--onpixel-t-sm);
  color: var(--onpixel-steel);
  text-decoration: none;
  transition: color 0.3s var(--onpixel-ease-out),
              transform 0.3s var(--onpixel-ease-out);
}
.onpixel-toc a::before {
  content: counter(toc, decimal-leading-zero) "  ";
  color: var(--onpixel-mute);
}
.onpixel-toc a:hover { color: var(--onpixel-bone); }
/* Kaydırdıkça bulunduğun bölüm işaretlenir. */
.onpixel-toc a.is-here {
  color: var(--onpixel-e-glow);
  transform: translateX(4px);
}
.onpixel-toc a.is-here::before { color: var(--onpixel-e-core); }

.onpixel-article__meta span:last-child { color: var(--onpixel-steel); }

@media (prefers-reduced-motion: reduce) {
  .onpixel-toc a { transition: none; }
  .onpixel-toc a.is-here { transform: none; }
}

/* --- Stüdyo: manifesto duraklaması ---------------------------------------
   Sayfa baştan sona metin bloklarından oluşuyordu. Burası nefes veriyor:
   büyük tek bir cümle ve arkada üç elementin soluk imleri. */

.onpixel-creed {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(5rem, 12vh, 9rem);
  text-align: center;
  background:
    radial-gradient(75% 60% at 50% 50%,
      color-mix(in srgb, var(--onpixel-e-core) 10%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, transparent, var(--onpixel-graphite) 22%,
      var(--onpixel-graphite) 78%, transparent);
}

.onpixel-creed__marks {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(4rem, 18vw, 14rem);
  pointer-events: none;
}
.onpixel-creed__marks svg {
  width: clamp(4rem, 9vw, 7.5rem);
  opacity: 0.14;
}
.onpixel-creed__marks svg:nth-child(1) {
  color: var(--onpixel-fire-core);
  animation: onpixel-creed-a 15s ease-in-out infinite;
}
.onpixel-creed__marks svg:nth-child(2) {
  color: var(--onpixel-ice-core);
  transform: translateY(-2.5rem);
  animation: onpixel-creed-b 19s ease-in-out infinite;
}
.onpixel-creed__marks svg:nth-child(3) {
  color: var(--onpixel-poison-core);
  animation: onpixel-creed-a 23s ease-in-out infinite reverse;
}
@keyframes onpixel-creed-a {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(7deg); }
}
@keyframes onpixel-creed-b {
  0%, 100% { transform: translateY(-2.5rem) rotate(0deg); }
  50%      { transform: translateY(-1rem) rotate(-6deg); }
}

.onpixel-creed__line { margin: 0; }
.onpixel-creed__line p {
  margin: 0 auto;
  max-width: 20ch;
  font-size: var(--onpixel-t-lg);
  font-weight: 780;
  font-stretch: 112%;
  line-height: 1.06;
  letter-spacing: -0.028em;
  color: var(--onpixel-bone);
  text-wrap: balance;
}
.onpixel-creed__sub {
  max-width: 46ch;
  margin: clamp(1.6rem, 4vh, 2.4rem) auto 0;
  font-size: var(--onpixel-t-sm);
  line-height: 1.7;
  color: var(--onpixel-steel);
}

@media (prefers-reduced-motion: reduce) {
  .onpixel-creed__marks svg { animation: none; }
}

/* --- Form doğrulama geri bildirimi --------------------------------------- */

.onpixel-field__input.is-bad {
  border-color: color-mix(in srgb, var(--onpixel-fire-core) 65%, transparent);
  background: color-mix(in srgb, var(--onpixel-fire-core) 7%, var(--onpixel-graphite));
}
.onpixel-field__err {
  margin: 0;
  font-size: var(--onpixel-t-hud);
  line-height: 1.6;
  color: color-mix(in srgb, var(--onpixel-fire-glow) 85%, var(--onpixel-bone));
  animation: onpixel-err-in 0.28s var(--onpixel-ease-out) both;
}
@keyframes onpixel-err-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
.onpixel-field__count {
  margin: 0;
  text-align: right;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.1em;
  color: var(--onpixel-mute);
}
.onpixel-field__count.is-near { color: var(--onpixel-fire-glow); }

@media (prefers-reduced-motion: reduce) {
  .onpixel-field__err { animation: none; }
}

/* --- Yazı sayacı ---------------------------------------------------------- */

.onpixel-tally {
  margin: 0 0 1.2rem;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
}
.onpixel-tally b { color: var(--onpixel-bone); font-weight: 700; }

/* --- Öne çıkan yazı -------------------------------------------------------
   Liste baştan sona aynı ağırlıktaydı, göz nereye bakacağını bilmiyordu.
   İlk yazı büyük bir kart oluyor, geri kalanı liste olarak kalıyor. */

.onpixel-post--lead {
  border-bottom: 0;
  margin-bottom: clamp(1.6rem, 4vh, 2.6rem);
}
.onpixel-post--lead .onpixel-post__link {
  position: relative;
  display: block;
  overflow: hidden;
  padding: clamp(1.8rem, 4vw, 3rem);
  border: 1px solid color-mix(in srgb, var(--onpixel-c, var(--onpixel-steel)) 30%, var(--onpixel-edge));
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--onpixel-c, var(--onpixel-steel)) 13%, transparent) 0%,
      transparent 62%),
    var(--onpixel-graphite);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
  transition: border-color 0.4s var(--onpixel-ease-out),
              background 0.4s var(--onpixel-ease-out);
}
@media (min-width: 56rem) {
  .onpixel-post--lead .onpixel-post__link { grid-template-columns: none; }
  .onpixel-post--lead .onpixel-post__link:hover { padding-left: clamp(1.8rem, 4vw, 3rem); }
}
.onpixel-post--lead .onpixel-post__link:hover {
  border-color: color-mix(in srgb, var(--onpixel-c) 60%, transparent);
  background:
    linear-gradient(150deg,
      color-mix(in srgb, var(--onpixel-c) 22%, transparent) 0%,
      transparent 66%),
    var(--onpixel-graphite);
}
.onpixel-post--lead::before { display: none; }

/* Sigil, kartın sağında büyük ve soluk duruyor; içerikle yarışmıyor. */
.onpixel-post__sigil {
  position: absolute;
  right: -3%;
  top: 50%;
  width: clamp(9rem, 20vw, 15rem);
  transform: translateY(-50%);
  color: var(--onpixel-c, var(--onpixel-steel));
  opacity: 0.13;
  pointer-events: none;
}

.onpixel-post__flag {
  padding: 0.2em 0.55em;
  color: var(--onpixel-void);
  background: var(--onpixel-c, var(--onpixel-bone));
  font-weight: 700;
}

.onpixel-post--lead .onpixel-post__title {
  margin-top: 1rem;
  font-size: var(--onpixel-t-sec);
  font-weight: 780;
  font-stretch: 106%;
  line-height: 1.05;
  letter-spacing: -0.02em;
  max-width: 20ch;
}
.onpixel-post--lead .onpixel-post__excerpt {
  font-size: var(--onpixel-t-body);
  max-width: 52ch;
}

@media (prefers-reduced-motion: reduce) {
  .onpixel-post--lead .onpixel-post__link { transition: none; }
}

/* --- Yazı paylaşımı ------------------------------------------------------- */

.onpixel-share {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem 1.4rem;
  padding-bottom: clamp(2rem, 5vh, 3rem);
}
.onpixel-share__label {
  margin: 0;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
}
.onpixel-share__acts { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; }
/* Paylaşım düğmeleri satır içinde kalsın, dikeyde büyümesin. */
.onpixel-share__btn { flex: 0 0 auto; }

.onpixel-share__done {
  font-size: var(--onpixel-t-hud);
  color: var(--onpixel-e-glow);
}

/* --- Besleme bağlantısı --------------------------------------------------- */

.onpixel-tallyrow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 1.4rem;
}
.onpixel-feed {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--onpixel-t-hud);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--onpixel-mute);
  transition: color 0.3s var(--onpixel-ease-out);
}
.onpixel-feed svg { width: 0.9rem; height: 0.9rem; }
.onpixel-feed:hover,
.onpixel-feed:focus-visible { color: var(--onpixel-e-glow); }

@media (prefers-reduced-motion: reduce) { .onpixel-feed { transition: none; } }