/* =============================================================================
 * TEAM FORGE — Forge XI: THE FIRST XI origin page (Faz 6)
 * Distinct visual tone: DEEP NAVY + ANTIQUE GOLD only. The set accents (electric
 * green / copper) are FORBIDDEN here — The First XI is an origin collection, NOT a
 * Formation Set (no pitch, no slot, no formation context). Builds on forge-xi.css
 * base but overrides the palette locally. Scoped .og-*. Mobile-first.
 * ========================================================================== */

.og { --og-navy-0: #070c1a; --og-navy-1: #0b1330; --og-navy-2: #12204c;
      --og-gold: #cba14e; --og-gold-soft: #e7d1a1; --og-line: rgba(203,161,78,0.24);
      --og-ink: #f3eee1; --og-muted: #a9a596;
      background: linear-gradient(180deg, var(--og-navy-1) 0%, var(--og-navy-0) 60%); }

.og-main { max-width: 900px; margin: 0 auto; padding: 0 20px 40px; }
.og-eyebrow { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.3em; font-size: 0.74rem; color: var(--og-gold); margin: 0 0 14px; }

/* --------------------------------- hero ---------------------------------- */
.og-hero { text-align: center; padding: clamp(52px, 10vw, 110px) 0 clamp(30px, 5vw, 54px); position: relative; }
.og-hero::after { content: ""; position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--og-gold), transparent); }
.og-kicker { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.34em; font-size: 0.72rem; color: var(--og-gold); margin: 0 0 16px; }
.og-title { font-family: var(--fx-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; line-height: 0.98; font-size: clamp(2.6rem, 10vw, 5.2rem); color: var(--og-ink); margin: 0 0 18px; }
.og-title b { color: var(--og-gold); }
.og-lead { color: var(--og-gold-soft); font-size: clamp(1.05rem, 2.4vw, 1.35rem); line-height: 1.5; max-width: 40ch; margin: 0 auto; }

/* --------------------------- vertical story strip ------------------------ */
.og-chapters { position: relative; padding: 20px 0; }
.og-chapters::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--og-line) 8%, var(--og-line) 92%, transparent); transform: translateX(-50%); }
.og-chapter { position: relative; padding: clamp(28px, 5vw, 48px) 0; text-align: center; }
.og-chapter-key { display: inline-block; font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.82rem; color: var(--og-gold); background: var(--og-navy-0); padding: 6px 18px; border: 1px solid var(--og-line); border-radius: 999px; position: relative; z-index: 1; }
.og-chapter-roles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 22px; }

.og-role { display: flex; flex-direction: column; gap: 3px; text-decoration: none; color: inherit; background: rgba(18,32,76,0.5);
  border: 1px solid var(--og-line); border-radius: var(--fx-radius); padding: 14px 12px 16px; transition: transform 0.14s ease, border-color 0.14s ease, background 0.2s; }
.og-role:hover { transform: translateY(-3px); border-color: var(--og-gold); background: rgba(18,32,76,0.8); }
.og-role:focus-visible { outline: 2px solid var(--og-gold); outline-offset: 2px; }
.og-role-mono { font-family: var(--fx-font-display); font-weight: 700; color: var(--og-gold); font-size: 0.9rem; letter-spacing: 0.06em; }
.og-role-eb { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.22em; font-size: 0.58rem; color: var(--og-gold-soft); margin-top: 6px; }
.og-role-nm { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.92rem; color: var(--og-ink); line-height: 1.08; }
.og-role-line { font-size: 0.74rem; color: var(--og-muted); line-height: 1.4; margin-top: 4px; }

/* Maestro cover — large presentation. */
.og-role.is-cover { grid-column: 1 / -1; align-items: center; text-align: center; padding: 30px 22px 32px;
  background: radial-gradient(120% 90% at 50% 0%, rgba(203,161,78,0.14), transparent 60%), rgba(18,32,76,0.6); border-color: var(--og-gold); }
.og-role.is-cover .og-role-badge { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.62rem; color: var(--og-gold); margin-bottom: 8px; }
.og-role.is-cover .og-role-mono { font-size: 2rem; }
.og-role.is-cover .og-role-eb { font-size: 0.72rem; }
.og-role.is-cover .og-role-nm { font-size: clamp(1.4rem, 5vw, 2.1rem); }
.og-role.is-cover .og-role-line { font-size: 0.92rem; max-width: 40ch; }

/* -------------------------------- editions ------------------------------- */
.og-editions { padding: clamp(40px, 7vw, 76px) 0 clamp(20px, 4vw, 40px); }
.og-editions .og-eyebrow, .og-editions .og-h2 { text-align: center; }
.og-h2 { font-family: var(--fx-font-display); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.4rem, 4vw, 2rem); color: var(--og-ink); margin: 0 0 8px; }
.og-sub { text-align: center; color: var(--og-muted); font-size: 0.98rem; line-height: 1.6; max-width: 56ch; margin: 0 auto 30px; }
.og-edition-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
.og-edition { background: rgba(18,32,76,0.45); border: 1px solid var(--og-line); border-radius: var(--fx-radius); padding: 24px 22px; }
.og-edition-tag { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.72rem; color: var(--og-gold); }
.og-edition h3 { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.3rem; color: var(--og-ink); margin: 8px 0 12px; }
.og-edition ul { margin: 0 0 18px; padding-left: 18px; color: var(--og-gold-soft); line-height: 1.65; font-size: 0.92rem; }
.og-edition li { margin: 5px 0; }
.og-captain { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--og-line); border-left: 3px solid var(--og-gold); border-radius: 8px; background: rgba(203,161,78,0.06); color: var(--og-gold-soft); font-size: 0.9rem; line-height: 1.55; }
.og-captain b { color: var(--og-gold); }
.og-buy { display: inline-flex; align-items: center; gap: 8px; font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.84rem; padding: 12px 20px; border-radius: 10px; background: transparent; border: 1px dashed var(--og-line); color: var(--og-muted); cursor: not-allowed; opacity: 0.85; }
.og-soon { font-family: var(--fx-font-body); text-transform: none; letter-spacing: 0.02em; font-size: 0.66rem; color: var(--og-navy-0); background: var(--og-gold-soft); border-radius: 999px; padding: 2px 8px; }

/* --------------------------------- back ---------------------------------- */
.og-back { text-align: center; padding: 10px 0 clamp(30px, 5vw, 60px); }
.og-back a { color: var(--og-muted); text-decoration: none; font-size: 0.9rem; }
.og-back a:hover { color: var(--og-gold); }

.og .fx-footer { border-top-color: var(--og-line); }

/* ------------------------------ responsive ------------------------------- */
@media (max-width: 620px) {
  .og-chapter-roles { grid-template-columns: 1fr 1fr; }
}
/* FAZ 15 — vitrin gerçek KART görselleriyle. Kart yüklendiğinde (has-card) karo
   kartın kendisidir: monogram ve User Line satırı gizlenir (kart zaten taşır),
   yalnız kimlik satırları küçük altyazı olarak kalır. */
.og-role-card { display: block; width: 100%; border-radius: 8px; margin-bottom: 8px; }
.og-role.has-card .og-role-mono,
.og-role.has-card .og-role-line { display: none; }
.og-role.is-cover.has-card .og-role-card { max-width: 300px; margin: 0 auto 12px; }

/* FAZ 15 — Limited artık sessiz bir satır (satın alma düğmesi yok). */
.og-limited-note { max-width: 62ch; margin: 22px auto 0; padding: 12px 16px; text-align: center;
  border: 1px solid var(--og-line); border-radius: 10px; color: var(--og-muted);
  font-size: 0.88rem; line-height: 1.6; }
.og-limited-note b { color: var(--og-gold-soft); font-weight: 600; }
.og-editions .og-captain { max-width: 62ch; margin: 14px auto 0; }

@media (min-width: 760px) { .og-edition-grid { grid-template-columns: 1fr 1fr; } }
/* Tek edisyon bloğu kaldı -> ızgara ortalanır ve gereksiz genişlemez. */
.og-edition-single { max-width: 520px; margin: 0 auto; }
@media (min-width: 760px) { .og-edition-single { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .og-role { transition: border-color 0.14s ease; } }