/* ==========================================================================
   Evren kartı — bağımsız bileşen.
   Ayrı dosya: Görünüm → Kart Tasarımı ekranı da bunu yükler; kart iki yerde
   aynı görünmezse editör yalan söyler.
   ========================================================================== */

/* ================= EVREN KARTI =================
   Bütün ölçüler CSS değişkeni; değerler Görünüm → Kart Tasarımı'ndan gelir
   (küme varsayılanı + karta özel). Kart HTML'i tek kaynaktan üretilir:
   `d20mag_evren_kart()` — panelin canlı önizlemesi de aynı işlevi çağırır.
   ⚠ Buradaki sabitler yalnız GERİYE DÜŞÜŞ: ayar okunamazsa eski görünüm çıkar. */
/* ⚠ display:grid burada olmak ZORUNDA — bu dosya tema.css'siz de yüklenir
   (yönetim panelindeki önizleme). Eksikken kartlar blok gibi tam genişlikte
   alt alta düşüyordu; oran bozuluyordu. */
.evren-izgara{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:14px;align-items:stretch}
.evren-bolum .evren-izgara{border-top:0;padding-top:4px}

.evren-kart{
  --ton:var(--br,var(--vurgu));
  --k-yukseklik:300px; --k-kose:var(--kose); --k-ic:20px;
  --k-desen-boy:9px; --k-desen-opak:.155;
  --k-perde-opak:.88; --k-perde-aci:102deg; --k-perde-yay:48%;
  --k-logo-boy:88px; --k-logo-ic:11px; --k-logo-kose:8px; --k-logo-zemin:#fff;
  --k-kar-boy:98%; --k-kar-x:-38px; --k-kar-y:-22px; --k-kar-aci:0deg;
  --k-baslik-boy:27px; --k-sayi-boy:30px; --k-metin-en:78%; --k-golge:.30;
  --k-baslik-font:var(--font-baslik);
  --k-metin:#fff; --k-metin-soft:rgba(255,255,255,.82);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  min-height:var(--k-yukseklik);padding:var(--k-ic);border-radius:var(--k-kose);
  background:var(--ton);color:var(--k-metin)}

/* zemin gradyanı (varsayılan: yok) */
.evren-kart[data-grad="dikey"]{background:
  linear-gradient(180deg,var(--grad-acik) 0%,var(--ton) 55%,var(--grad-koyu) 100%)}
.evren-kart[data-grad="kosegen"]{background:
  linear-gradient(135deg,var(--grad-acik) 0%,var(--ton) 52%,var(--grad-koyu) 100%)}
.evren-kart[data-grad="radyal"]{background:
  radial-gradient(120% 90% at 26% 14%,var(--grad-acik) 0%,var(--ton) 46%,var(--grad-koyu) 100%)}

/* desen — karakterin ARKASINDA. Ben-Day çizgi roman baskısının kendi tramı. */
.evren-kart::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:var(--desen,none);background-size:var(--desen-boy,auto)}
.evren-kart[data-desen="benday"]{
  --desen:radial-gradient(rgba(255,255,255,var(--k-desen-opak)) 1.4px,transparent 1.5px);
  --desen-boy:var(--k-desen-boy) var(--k-desen-boy)}
.evren-kart[data-desen="tarama"]{
  --desen:repeating-linear-gradient(45deg,rgba(255,255,255,var(--k-desen-opak)) 0 1.2px,
    transparent 1.2px var(--k-desen-boy))}
.evren-kart[data-desen="izgara"]{
  --desen:linear-gradient(rgba(255,255,255,var(--k-desen-opak)) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,var(--k-desen-opak)) 1px,transparent 1px);
  --desen-boy:var(--k-desen-boy) var(--k-desen-boy)}
.evren-kart[data-desen="cizgi"]{
  --desen:repeating-linear-gradient(0deg,rgba(255,255,255,var(--k-desen-opak)) 0 1px,
    transparent 1px var(--k-desen-boy))}

/* Perde: figürün üstünde, metnin altında.
   ⚠ Siyah DEĞİL — kartın kendi renginin koyusu; siyah perde paletten çıkarıyordu.
   Yayılım %48'de biter ki figürlerin yüzü açıkta kalsın. */
.evren-kart::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;
  opacity:var(--k-perde-opak)}
.evren-kart[data-perde="perde"]::before{background:
  linear-gradient(var(--k-perde-aci), color-mix(in srgb,var(--ton) 34%, #000) 0%,
    color-mix(in srgb,var(--ton) 62%, #000) 22%, transparent var(--k-perde-yay)),
  var(--perde-alt,none)}
.evren-kart[data-perde="gradyan"]::before{background:
  linear-gradient(0deg, color-mix(in srgb,var(--ton) 30%, #000) 0%,
    color-mix(in srgb,var(--ton) 72%, #000) 30%, transparent var(--k-perde-yay))}
.evren-kart[data-perde="blur"]::before{opacity:1;
  backdrop-filter:blur(calc(var(--k-perde-opak) * 9px));
  -webkit-backdrop-filter:blur(calc(var(--k-perde-opak) * 9px));
  background:linear-gradient(var(--k-perde-aci),
    color-mix(in srgb,var(--ton) 55%, #000) 0%, transparent var(--k-perde-yay));
  -webkit-mask-image:linear-gradient(var(--k-perde-aci),#000 0%,#000 22%,transparent var(--k-perde-yay));
  mask-image:linear-gradient(var(--k-perde-aci),#000 0%,#000 22%,transparent var(--k-perde-yay))}
.evren-kart[data-perde="yok"]::before{background:none;backdrop-filter:none}
.evren-kart[data-perde-alt="1"]{
  --perde-alt:linear-gradient(0deg, color-mix(in srgb,var(--ton) 42%, #000) 0%,
    color-mix(in srgb,var(--ton) 70%, #000) 22%, transparent 44%)}

.evren-kart>*:not(.evren-kar){position:relative;z-index:3}

/* karakter — ⚠ img{max-width:100%} sıfırlaması yüzdeli yükseklikle çarpışıp
   görseli YATAYDA SIKIŞTIRIR; kare görselde belli olur, dar görselde fark edilmez. */
.evren-kar{position:absolute;z-index:1;pointer-events:none;user-select:none;
  max-width:none;width:auto;height:var(--k-kar-boy);
  right:var(--k-kar-x);bottom:var(--k-kar-y);
  transform:rotate(var(--k-kar-aci))}
.evren-kar[data-yon="aynala"]{transform:scaleX(-1) rotate(var(--k-kar-aci))}
.evren-kar[data-yon="bas-asagi"]{transform:scaleY(-1) rotate(var(--k-kar-aci))}
.evren-kar[data-yon="aynala-bas-asagi"]{transform:scale(-1,-1) rotate(var(--k-kar-aci))}
.evren-kart[data-kar-golge="1"] .evren-kar{filter:drop-shadow(0 6px 18px rgba(0,0,0,.28))}

/* logo kutusu — Marvel'ın kırmızısı kırmızı zeminde kaybolduğu için varsayılan beyaz */
.evren-logo{display:grid;place-items:center;width:var(--k-logo-boy);height:var(--k-logo-boy);
  margin-bottom:16px;background:var(--k-logo-zemin);border-radius:var(--k-logo-kose);
  padding:var(--k-logo-ic);overflow:hidden}
/* Logo kutunun İÇİNDE ayrıca ölçeklenip kaydırılabilir: logo biçimleri
   birbirine benzemez (yatay wordmark / kare amblem), kutu ölçüsü tek başına yetmez. */
.evren-logo img{max-width:100%;max-height:100%;object-fit:contain;display:block;
  transform:translate(var(--k-logo-x,0),var(--k-logo-y,0)) scale(var(--k-logo-olcek,1))}
.evren-kart[data-logo-konum="ust-sag"] .evren-logo,
.evren-kart[data-logo-konum="alt-sag"] .evren-logo{position:absolute;right:var(--k-ic);margin:0}
.evren-kart[data-logo-konum="ust-sag"] .evren-logo{top:var(--k-ic)}
.evren-kart[data-logo-konum="alt-sag"] .evren-logo{bottom:var(--k-ic)}

.evren-kart h3{display:block;font-family:var(--k-baslik-font);font-weight:400;
  font-size:var(--k-baslik-boy);line-height:1.05;margin:0;max-width:var(--k-metin-en);
  color:var(--k-metin);text-shadow:0 1px 3px rgba(0,0,0,var(--k-golge))}
.evren-kart h3 a{color:var(--k-metin)}
.evren-bolum .evren-kart h3 a:hover{color:var(--k-metin);text-decoration:underline;
  text-decoration-thickness:2px;text-underline-offset:3px}
.evren-kart .evren-sayi{display:block;margin-top:9px;font-family:var(--k-baslik-font);
  font-weight:400;font-size:var(--k-sayi-boy);line-height:1;color:var(--k-metin);opacity:1;
  font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,var(--k-golge))}
.evren-kart .evren-sayi em{font-family:var(--font-govde);font-style:normal;font-size:14px;
  font-weight:700;color:var(--k-metin-soft);margin-left:5px}
.evren-alt-bas{margin:auto 0 5px;padding-top:15px;font-size:10px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--k-metin-soft)}
.evren-alt{margin:0;max-width:var(--k-metin-en);font-size:12.5px;line-height:1.55;
  color:var(--k-metin);text-shadow:0 1px 3px rgba(0,0,0,calc(var(--k-golge) + .05))}
.evren-alt a{color:var(--k-metin)}
.evren-alt a:hover{text-decoration:underline}
.evren-kart[data-alt="0"] .evren-alt,.evren-kart[data-alt="0"] .evren-alt-bas{display:none}
.evren-kart[data-hiza="alt"]{justify-content:flex-end}
.evren-kart[data-hiza="alt"] .evren-alt-bas{margin-top:15px}

/* açık zeminlerde (sarı) beyaz yazı okunmaz */
.evren-kart[data-metin="koyu"]{--k-metin:#241c00;--k-metin-soft:rgba(36,28,0,.72)}

/* yazısı olmayan evren: aynı kart, sessiz ton */
.evren-kart.bos{background:color-mix(in srgb, var(--ton) 24%, var(--yuzey))}
.evren-kart.bos::before{opacity:calc(var(--k-perde-opak) * .32)}
.evren-kart.bos h3,.evren-kart.bos h3 a,.evren-kart.bos .evren-sayi{color:var(--murekkep);text-shadow:none}
.evren-kart.bos .evren-sayi em,.evren-kart.bos .evren-alt-bas{color:var(--soluk)}
.evren-kart.bos .evren-alt,.evren-kart.bos .evren-alt a{color:var(--murekkep-soft);text-shadow:none}
/* ---------- anasayfanın "Evrenler" bölümü ----------
   ⚠⚠ Bu kurallar DP145'te `tema.css`'ten BURAYA taşındı.
   Sebep: yönetimdeki Kart Tasarımı önizlemesi yalnız `kart.css`'i yükler.
   Kurallar tema.css'te kalınca editörde ızgara çöküyor, kartlar alt alta blok
   oluyordu; satır yüksekliği değişince de karakter (`--kar-boy` yüzde) sitede
   başka, editörde başka görünüyordu.
   ⭐ DP140'ta birebir aynı ders: bileşeni ayrı dosyaya çıkarırken DÜZEN
   KURALLARI da onunla gitmeli. Kart burada, kartın ızgarası orada olamaz. */
.evren-one-izgara{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
  align-items:stretch}
.evren-one-oge{display:flex;flex-direction:column;gap:8px;min-width:0}
.evren-one-oge .evren-kart{flex:1 1 auto;width:auto;max-width:100%}

/* Takip tuşu — ⚠ FAZ 5'e kadar yalnız GÖRSEL: okur hesabı henüz yok, basılı
   durum sayfa yenilenince sıfırlanır (Cevdet'in bilinçli kararı).
   ⚠ Burada olması şart: satır yüksekliğini bu tuş belirliyor. */
.evren-takip{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  padding:9px 12px;font:inherit;font-size:13px;font-weight:700;color:var(--murekkep);
  background:var(--kagit);border:1.5px solid var(--cizgi);border-radius:var(--kose);
  cursor:pointer;transition:border-color .15s,background .15s,color .15s}
.evren-takip:hover{border-color:var(--cizgi-kuvvetli)}
.evren-takip-ikon{font-size:15px;line-height:1;font-weight:400}
.evren-takip[aria-pressed="true"]{background:var(--murekkep);border-color:var(--murekkep);
  color:var(--kagit)}

/* Davet kartının kendine ait alt satırı */
.evren-kapi{text-decoration:none}
.evren-kapi-git{display:flex;align-items:center;gap:6px;margin:14px 0 0;
  font-size:13px;font-weight:700;color:var(--k-metin);
  text-shadow:0 1px 3px rgba(0,0,0,var(--k-golge))}
.evren-kapi-git em{font-style:normal;transition:transform .18s}
.evren-kapi:hover .evren-kapi-git em{transform:translateX(4px)}

@media(max-width:1000px){.evren-one-izgara{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.evren-izgara{grid-template-columns:1fr}
  .evren-one-izgara{grid-template-columns:1fr}
  .evren-kapi{min-height:200px}
  .evren-kart{min-height:0}.evren-kar{height:86%;right:-30px}}
@media(prefers-reduced-motion:reduce){
  .evren-takip{transition:none}.evren-kapi-git em{transition:none}}