/* =============================================================================
 * TEAM FORGE — FORGE XI · AKORDEON ROL VİTRİNİ (Faz 15)
 *
 * /forge-xi#roller artık 20 rolü GERÇEK ÇERÇEVELİ KART görselleriyle, pozisyon
 * gruplarına ayrılmış bir ızgarada gösterir. Bir karta tıklandığında, o kartın
 * bulunduğu SATIRIN ÜZERİNDE tam genişlikte bir panel açılır (kart satırı ve
 * altındakiler yumuşakça aşağı kayar). Panel, rol detay sayfasının bileşenlerini
 * (assets/js/forge-xi-role-detail.js -> FXRoleDossier) yeniden kullanır; bu yüzden
 * .rd-* kuralları forge-xi-role-detail.css'ten gelir ve BURADA ÇOĞALTILMAZ.
 *
 * Izgara: mobil 2 sütun -> 3 -> masaüstü 4 -> geniş masaüstü 5.
 * Panel bir ızgara öğesidir (grid-column: 1 / -1) — bu yüzden "satırın üzerinde
 * açılma" davranışı saf CSS Grid akışıyla elde edilir, mutlak konumlandırma yok.
 * prefers-reduced-motion: tüm geçişler kapanır (panel anında belirir).
 * ========================================================================== */

/* ------------------------- pozisyon grupları ----------------------------- */
.rl-group + .rl-group { margin-top: clamp(26px, 4vw, 44px); }
.rl-group-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.rl-group-t {
  font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.14em;
  font-size: 0.92rem; color: var(--fx-ink); margin: 0;
}
.rl-group-n { font-size: 0.76rem; color: var(--fx-gold-dim); font-variant-numeric: tabular-nums; }
.rl-group-head::after { content: ""; flex: 1; height: 1px; background: var(--fx-line-soft); }

/* ------------------------------ ızgara ----------------------------------- */
.rl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; }
@media (min-width: 640px)  { .rl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 900px)  { .rl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1200px) { .rl-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }

/* --------------------------- kart karosu --------------------------------- */
/* Karo BASILI KARTIN KENDİSİDİR: portre değil, çerçeveli kart görseli (5:7). */
.rl-card {
  display: block; width: 100%; padding: 0; text-align: left; cursor: pointer;
  background: transparent; border: 0; color: inherit; font: inherit;
  transition: transform .16s ease;
}
.rl-card:hover { transform: translateY(-3px); }
.rl-card:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 4px; border-radius: 12px; }
.rl-card-img {
  position: relative; display: block; width: 100%; aspect-ratio: 7 / 10; overflow: hidden;
  border-radius: 10px; background: var(--fx-panel-2); border: 1px solid var(--fx-line-soft);
}
.rl-card-img > .fx-visual { position: absolute; inset: 0; width: 100%; height: 100%; }
.rl-card-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  display: block; opacity: 0; transition: opacity .25s ease;
}
.rl-card-img img.is-ready { opacity: 1; }
.rl-card:hover .rl-card-img { border-color: var(--fx-line); }
.rl-card[aria-expanded="true"] .rl-card-img { border-color: var(--fx-gold); box-shadow: 0 0 0 1px var(--fx-gold-dim); }

.rl-card-meta { display: block; padding: 9px 2px 0; }
.rl-card-eb {
  display: block; font-family: var(--fx-font-display); text-transform: uppercase;
  letter-spacing: 0.2em; font-size: 0.58rem; color: var(--fx-gold);
}
.rl-card-nm {
  display: block; font-family: var(--fx-font-display); text-transform: uppercase;
  letter-spacing: 0.02em; font-size: 0.9rem; line-height: 1.15; color: var(--fx-ink); margin-top: 2px;
}
.rl-card-ana {
  display: inline-block; margin-top: 6px; font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--fx-gold-dim);
  border: 1px solid var(--fx-line-soft); border-radius: 999px; padding: 1px 7px;
}

/* ------------------------------- panel ----------------------------------- */
.rl-panel {
  grid-column: 1 / -1; position: relative;
  background: linear-gradient(180deg, rgba(212,175,55,0.05), transparent 240px), var(--fx-panel);
  border: 1px solid var(--fx-line); border-radius: 16px;
  padding: clamp(16px, 2.6vw, 26px);
  margin: 4px 0 10px;
  scroll-margin-top: 84px;
}
.rl-panel:focus { outline: none; }
.rl-panel:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 3px; }
.rl-panel-close {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--fx-line-soft); border-radius: 9px;
  color: var(--fx-muted); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.rl-panel-close:hover { color: var(--fx-gold); border-color: var(--fx-gold); }
.rl-panel-close:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 2px; }

/* ==========================================================================
   FAZ 15B — PANEL DÜZENİ: TEK YATAY BANT
   Üç sütun AYNI ÜST HİZADAN başlar (align-items: start). Eski düzende hikâye
   sütunu taktik etki/Key Trait/FORGE/mini saha yığınıyla dikeyde uzuyor, panel
   ekranı taşıyordu. Artık: sol = kart + satın alma, orta = yalnız hikâye,
   sağ = kompakt profil kutusu. Masaüstünde panel ~%90 viewport'a sığmayı hedefler.
   ========================================================================== */
/* İçerik geçişi: başka bir karta tıklanınca panel KAPANMAZ, içeriği ~200ms solarak değişir. */
.rl-panel-body { display: grid; grid-template-columns: 1fr; gap: clamp(18px, 2.4vw, 30px); transition: opacity .2s ease; }
.rl-panel.is-swapping .rl-panel-body { opacity: 0; }
@media (min-width: 900px) {
  .rl-panel-body { grid-template-columns: minmax(0, 300px) minmax(0, 1.35fr) minmax(0, 300px); align-items: start; }
}
@media (min-width: 1200px) {
  .rl-panel-body { grid-template-columns: minmax(0, 330px) minmax(0, 1.4fr) minmax(0, 320px); }
}

.rl-col { min-width: 0; }
/* [1] kart sütunu mobilde ortalanır, masaüstünde kendi sütununun üstüne yaslanır. */
.rl-col-card { display: flex; flex-direction: column; align-items: center; gap: 14px; }
@media (min-width: 900px) { .rl-col-card { align-items: stretch; } }

/* [1] büyük çerçeveli kart görseli */
.rl-bigcard { position: relative; width: 100%; max-width: 320px; margin: 0 auto; aspect-ratio: 7 / 10;
  border-radius: 12px; overflow: hidden; background: var(--fx-panel-2); border: 1px solid var(--fx-line-soft); }
.rl-bigcard img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
  opacity: 0; transition: opacity .3s ease; }
.rl-bigcard img.is-ready { opacity: 1; }
.rl-bigcard > .fx-visual { position: absolute; inset: 0; width: 100%; height: 100%; }

/* [1] SATIN ALMA SATIRI — kartın hemen altında, panelde TEK satın alma yüzeyi.
   Katalog kapısı kapalıyken (dbPricingOn=false / ürün pasif) hiç doldurulmaz ve
   :empty olduğu için hiç yer kaplamaz. */
.rl-buyrow { width: 100%; max-width: 320px; margin: 0 auto; }
.rl-buyrow:empty { display: none; }
.rl-buyrow .rd-single { border: 0; padding: 0; }
.rl-buyrow .rd-single-row { margin-top: 0; gap: 10px; justify-content: center; }
@media (min-width: 900px) { .rl-buyrow .rd-single-row { justify-content: flex-start; } }
.rl-buyrow .rd-single-add { flex: 1 1 auto; justify-content: center; min-height: 44px; }
/* Birden çok koleksiyonda seçici belirir; satırı ezmesin diye sınırlanır. */
.rl-buyrow .rd-single-select { max-width: 190px; flex: 1 1 auto; min-width: 0; }
.rl-buyrow .rd-single-price { margin-left: auto; }
@media (min-width: 900px) { .rl-buyrow .rd-single-price { margin-left: 0; } }
/* FAZ 15C — KAPALI DURUM: katalog kapısı kapalıyken blok AYNI yerde durur,
   düğme pasiftir ve tek satır "Satın alma çok yakında." der. Kartın altı boş kalmaz.
   (Gömülü "Takımını Kur" bölümündeki tk-soon kalıbının aynısı.) */
.rd-single-soon { margin: 8px 0 0; font-size: 0.8rem; color: var(--fx-muted); text-align: center; }
.rd-single-soon[hidden] { display: none; }
@media (min-width: 900px) { .rd-single-soon { text-align: left; } }
.rd-single-add[disabled] { opacity: 0.45; cursor: not-allowed; filter: grayscale(0.35); }

/* [2] hikâye — geniş nefes payı, başka içerik yok */
.rl-col-story .rd-section { padding: 0; border-top: 0; }
.rl-col-story .rd-h2 { font-size: 1.2rem; }
.rl-col-story .rd-story { font-size: 0.95rem; line-height: 1.75; max-width: 62ch; }

.rl-spec-label {
  font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.16em;
  font-size: 0.58rem; color: var(--fx-muted); margin: 0 0 8px;
}
.rl-zone { display: flex; align-items: center; gap: 14px; }
.rl-zone .rd-pitch { margin: 0; max-width: 92px; flex: none; }
.rl-zone-text { font-size: 0.82rem; color: var(--fx-muted); line-height: 1.5; margin: 0; }

/* [3] KOMPAKT PROFİL KUTUSU — sağ sütunun varsayılan yüzü.
   Kutu GÖVDESİ (koyu lacivert gradyan + altın çizgi + radius) .rd-face'ten gelir:
   profil kutusu flip kabının bir yüzüdür, bu yüzden zemin/çerçeve BURADA tekrar
   tanımlanmaz — aksi halde iç içe iki çerçeve görünürdü. */
/* Yükseklik flip kabının İKİ yüzünden UZUN olanına göre belirlenir (kart yüzü daha
   uzun). Kutu içeriği bu yüzden `space-between` ile yayılır: altta büyük ölü boşluk
   yerine bölümler dengeli dağılır. Tek bölüm kalsa bile üstte durur (start davranışı
   `gap` ile korunur). */
.rl-profile { padding: 18px 16px 20px; display: grid; gap: 16px; align-content: space-between; }
.rl-profile-eb { display: block; font-family: var(--fx-font-display); text-transform: uppercase;
  letter-spacing: 0.24em; font-size: 0.58rem; color: var(--fx-gold); }
.rl-profile-nm { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.02em;
  font-size: 1.12rem; line-height: 1.1; color: var(--fx-ink); margin-top: 3px; }
.rl-profile-wide { display: inline-block; margin-top: 7px; font-size: 0.6rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--fx-muted); border: 1px solid var(--fx-line-soft);
  border-radius: 999px; padding: 2px 9px; }
.rl-profile-id::after { content: ""; display: block; height: 1px; margin-top: 13px; background: var(--fx-line-soft); }
.rl-profile-sec { min-width: 0; }
.rl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-chip { font-family: var(--fx-font-display); text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 0.62rem; color: var(--fx-muted); border: 1px solid var(--fx-line-soft);
  border-radius: 999px; padding: 4px 10px; background: transparent; }
.rl-chip-link { cursor: pointer; font: inherit; font-size: 0.62rem; }
.rl-chip-link:hover { color: var(--fx-gold); border-color: var(--fx-gold-dim); }
.rl-chip-link:focus-visible { outline: 2px solid var(--fx-gold); outline-offset: 2px; }

/* [3] flip: kutu ve kart yüzü AYNI kutuda; çevirme mekaniği rol dosyasından gelir.
   FAZ 15C — ORTAK ZARF. İki yüz de sol sütundaki ana kartla AYNI ölçüdedir:
   genişlik 320px, oran 70/100 (basılı kart oranı). Önceden yüzler içeriğe göre
   büyüyordu ve taktik yüzü ana karttan belirgin şekilde uzun kalıyordu. */
.rl-col-flip .rd-cardwrap { padding: 0; gap: 12px; align-items: center; }
.rl-col-flip .rd-card { width: 100%; max-width: 320px; }
/* Faz 16c — Option A: tam boy yüz artık SESSİZ VİDEO ile kaplanan bir "story kartı".
   Zarf video oranına (9:16) çekilir -> video tam oturur, boşluk yok, %100 görünür. */
.rl-col-flip .rd-card-inner { aspect-ratio: 9 / 16; }
/* Forge XI CSS'inde GLOBAL box-sizing YOKTUR (bkz. faz10b taşma regresyon testi):
   height:100% + padding + kenarlık, zarfı 32px aşıyordu. Bu alt ağaçta border-box
   açıkça verilir -> iki yüz de zarfa BİREBİR oturur. */
.rl-col-flip .rd-card-inner,
.rl-col-flip .rd-face,
.rl-col-flip .rd-face * { box-sizing: border-box; }
.rl-col-flip .rd-face { border-radius: 12px; height: 100%; overflow: hidden; }

/* Taktik yüzü: başlık + sahne + User Line zarfa SIĞAR. Sahne kalan boşluğu alır;
   görsel `contain` ile TAM görünür — kırpma yok, taşma yok. Yanlarda kalan ince
   şerit kart gövdesiyle aynı tondadır (#0a0e18), vinyetle birlikte görünmez. */
/* Faz 16c — Option A overlay: video/görsel kartın TAMAMINI kaplar; başlık ve User Line
   degrade şeritlerle ÜSTÜNE biner. Sahne mutlak konumla arkaya (z:0) alınır. */
.rl-col-flip .rd-face-front-full { position: relative; }
.rl-col-flip .rd-face-front-full .rd-cf-scene-full {
  position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; margin: 0; border-radius: 0; min-height: 0;
}
.rl-col-flip .rd-face-front-full .rd-cf-art-full,
.rl-col-flip .rd-face-front-full .rd-cf-video {
  object-fit: cover; object-position: center; filter: none;   /* video kendi sahnesine sahip -> ton düşürme yok */
}
/* Başlık: üst degrade şeridin üstünde okunur. */
.rl-col-flip .rd-face-front-full .rd-cf-z1 {
  position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 15px 15px 42px;
  background: linear-gradient(180deg, rgba(6,9,16,0.92) 0%, rgba(6,9,16,0.60) 46%, transparent 100%);
}
.rl-col-flip .rd-face-front-full .rd-cf-name { text-shadow: 0 2px 10px rgba(0,0,0,0.72); }
.rl-col-flip .rd-face-front-full .rd-cf-effects li { color: #e7e4db; text-shadow: 0 1px 6px rgba(0,0,0,0.65); }
/* User Line: alt degrade şeridin üstünde. */
.rl-col-flip .rd-face-front-full .rd-cf-userline {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; margin: 0; padding: 34px 15px 15px;
  background: linear-gradient(0deg, rgba(6,9,16,0.92) 0%, rgba(6,9,16,0.50) 50%, transparent 100%);
  text-shadow: 0 2px 8px rgba(0,0,0,0.7);
}
/* Profil yüzü (diğer flip yüzü) 9:16 zarfta dikeyde ortalanır (üstte-altta boşluk dengeli). */
.rl-col-flip .rl-profile { justify-content: center; }
.rl-col-flip .rd-cf-userline { margin: 10px 16px 14px; font-size: 0.84rem; }
.rl-col-flip .rd-cf-z1 { padding: 14px 14px 0; }
.rl-col-flip .rd-cf-name { font-size: 1.15rem; }

/* Profil kutusu AYNI zarfa sığmalı: en yoğun rol (çok koleksiyon + sinerji + wide
   alt etiketi) bile taşmasın diye mini saha, eksen satırları, rozetler ve aralıklar
   ölçülü biçimde küçültülür. Ölçüldü: en kötü durum 38px taşıyordu. */
.rl-col-flip .rl-profile { padding: 13px 13px 14px; gap: 10px; }
.rl-col-flip .rl-profile .rd-forge { gap: 4px; }
.rl-col-flip .rl-profile .rd-forge-row { grid-template-columns: 52px 1fr 18px; gap: 8px; }
.rl-col-flip .rl-profile .rd-forge-bar { height: 5px; }
.rl-col-flip .rl-profile .rd-forge-val { font-size: 0.68rem; }
.rl-col-flip .rl-profile .rd-pitch { max-width: 52px; }
.rl-col-flip .rl-profile .rl-zone { gap: 10px; }
.rl-col-flip .rl-profile .rl-zone-text { font-size: 0.78rem; }
.rl-col-flip .rl-profile .rl-spec-label { margin-bottom: 5px; }
.rl-col-flip .rl-profile .rl-chips { gap: 5px; }
.rl-col-flip .rl-profile .rl-chip { padding: 3px 8px; font-size: 0.57rem; letter-spacing: 0.05em; }
.rl-col-flip .rl-profile-nm { font-size: 1rem; }
.rl-col-flip .rl-profile-eb { font-size: 0.55rem; }
.rl-col-flip .rl-profile-wide { margin-top: 5px; font-size: 0.55rem; padding: 1px 8px; }
.rl-col-flip .rl-profile-id::after { margin-top: 9px; }

/* Panel içindeki tam boy ön yüz: karakter görseli kartın büyük kısmını kaplar.
   Sahne kutusu KAYNAK ORANINDADIR (1664×2496 = 2:3), böylece tam boy plaka ne
   kırpılır ne de yanlarda boş şerit bırakır. Görsel henüz yoksa aynı kutuda
   onaylı faset placeholder durur (bkz. buildFullBodyScene). */
.rd-face-front-full .rd-cf-scene-full { aspect-ratio: 2 / 3; background: #0a0e18; }
.rd-face-front-full .rd-cf-art-full { object-fit: cover; object-position: center top;
  /* Plakalar açık gri stüdyo zemininde çekilmiş; ton düşürme onları kartın koyu
     gövdesiyle aynı ışığa getirir. Karakteri boğmayacak kadar: siyah formalı
     roller (ör. VIGIL) zeminden ayrık kalmalı. */
  filter: brightness(0.84) contrast(1.05) saturate(0.97); }

/* KOYU GRADYAN + VİNYET — kaynak dosyaya DOKUNMADAN entegrasyon.
   Neden görsel işleme değil de katman: plakaların zemini düz DEĞİL (bir kısmında
   stüdyo rayları/çerçeveleri var), bu yüzden zemin ayıklama artık bırakıyor
   (bkz. assets/img/forge-xi/fullbody/README.md). Katman, zemini karartıp
   karakteri merkezde bırakır; yeni export gerekmez.

   Dört katman (hepsi aynı renk -> birleşik alfa sıradan bağımsız):
     1) radial vinyet -> köşeler/kenarlar (zeminin çoğu oradadır) koyulaşır,
     2) yan şeritler  -> sol/sağ dış ~%25 kart gövdesine bağlanır,
     3) üst/alt füzyon-> başlık şeridi ve User Line'a yumuşak geçiş,
     4) düz taban tonu-> hiçbir piksel tamamen ham kalmaz (parlak halka olmaz).
   Merkez (%50 44%) en açık nokta olarak KALIR: figür spot altında durur, yüz
   ve gövde kararmaz. YALNIZ .has-art ile açılır -> placeholder karartılmaz. */
.rd-face-front-full .rd-cf-scene-full.has-art::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background:
    radial-gradient(108% 72% at 50% 44%,
      rgba(8, 12, 22, 0) 20%, rgba(8, 12, 22, 0.42) 60%, rgba(8, 12, 22, 0.90) 100%),
    linear-gradient(90deg,
      rgba(8, 12, 22, 0.80) 0%, rgba(8, 12, 22, 0) 26%,
      rgba(8, 12, 22, 0) 74%, rgba(8, 12, 22, 0.80) 100%),
    linear-gradient(180deg,
      rgba(8, 12, 22, 0.64) 0%, rgba(8, 12, 22, 0) 12%,
      rgba(8, 12, 22, 0) 78%, rgba(8, 12, 22, 0.92) 100%),
    linear-gradient(rgba(8, 12, 22, 0.14), rgba(8, 12, 22, 0.14));
}
/* Altın saç çizgisi: plaka ile kart yüzü arasındaki sınırı belirginleştirir. */
.rd-face-front-full .rd-cf-scene-full.has-art { border-color: rgba(212, 175, 55, 0.22); }

/* ------------------------------ hareket ---------------------------------- */
/* FLIP-benzeri "büyüyerek taşınma": panelin büyük kartı, tıklanan karonun
   konum/ölçeğinden kendi yerine akar. JS yalnız başlangıç transform'unu verir. */
.rl-flip-anim { transition: transform .34s cubic-bezier(.2,.7,.2,1); will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .rl-card, .rl-panel-body, .rl-flip-anim, .rl-card-img img, .rl-bigcard img { transition: none !important; }
  .rl-card:hover { transform: none; }
}