/* ==========================================================================
   YAŞAYAN YAZAR SAYFASI
   Mockup: claude.ai/code/artifact/043968ce-e340-4b57-98df-939855e1ce3f

   ⚠ Cevdet'in üç yasağı burada da geçerli: renk ARAYÜZDE (fotoğrafta değil) ·
   accent-rail YOK · altıgen YOK (d20 zarı çizimi istisna, o serbest).
   ⭐ `--yazar` değişkeni şablonda satır içi basılır; slug'dan türer, marka
   ailesinden çıkmaz. Buradaki hiçbir kural onu sabit bir renge bağlamaz.
   ========================================================================== */

.yzr{--yzr-kose:var(--kose,4px)}

/* ---------- 1. KÜNYE ---------- */
.yzr-kunye{
  position:relative;overflow:hidden;margin-top:26px;
  background:var(--yazar);color:#fff;border-radius:var(--yzr-kose);
}
/* Ben-Day tramı: çizgi roman baskısının izi, markanın kendi dili. */
.yzr-kunye::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.3px,transparent 1.4px);
  background-size:9px 9px;
}
.yzr-kunye-ic{position:relative;padding:30px 32px 26px;display:flex;gap:22px;align-items:flex-start}

/* ⚠ Portrenin TABAN stili (yuvarlak, ortalama, katman) tema.css'te —
   `d20mag_yazar_portre()` dizinde de kullaniliyor. Burada yalniz OLCU var. */
.yzr-kunye .yzr-mono{width:92px;height:92px;font-size:44px}

.yzr-kunye-gov{min-width:0;flex:1 1 auto}
.yzr-ust{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  opacity:.72;margin:0 0 7px}
.yzr-kunye h1{font-size:52px;color:#fff;margin:0;line-height:1.06}

.yzr-olcu{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin:11px 0 0;
  font-size:14px;font-variant-numeric:tabular-nums;opacity:.92}
.yzr-olcu b{font-weight:400;font-family:var(--font-baslik);font-size:19px}
.yzr-nokta{opacity:.5}
.yzr-aktif{display:inline-flex;align-items:center;gap:6px;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:3px 10px;
  font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.yzr-aktif i{width:6px;height:6px;border-radius:50%;background:#7ef0a8;display:block}

.yzr-bio{margin-top:14px;font-size:15.5px;line-height:1.6;max-width:60ch;opacity:.94}
.yzr-bio p{margin:0 0 8px}
.yzr-bio p:last-child{margin-bottom:0}

/* Karakter cümlesi — rakamlardan türer, elle yazılmaz. */
.yzr-karakter{margin:16px 0 0;padding-top:14px;border-top:1px solid rgba(255,255,255,.24);
  font-family:var(--font-baslik);font-size:20px;line-height:1.25}
.yzr-karakter em{font-style:normal;opacity:.66;font-family:var(--font-govde);font-size:12px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;display:block;margin-bottom:5px}

/* Künyedeki takip tuşu — koyu zeminde ters çalışır. */
.yzr-kunye .yzr-takip{
  width:auto;margin-top:16px;padding:8px 16px;
  background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.4);color:#fff;
}
.yzr-kunye .yzr-takip:hover{border-color:#fff;background:rgba(255,255,255,.22)}
.yzr-kunye .yzr-takip[aria-pressed="true"]{background:#fff;color:var(--yazar);border-color:#fff}
.yzr-kunye .evren-takip-sayi{color:inherit;opacity:.8}

/* Kurum hesabı (Y6): kişi değil — daha sakin, tramsız. */
.yzr-kurum::before{opacity:.4}

/* ---------- KÜNYE KARAKTERİ (.yzr-kar) ----------
   ⭐ Evren kartındaki karakterin künyeye taşınmış hâli; ayar dili de aynı
   (boy · sağdan · alttan · aynala) ki editör iki kez öğrenmesin.

   ⚠⚠ Sınıf adı `.yzr-karakter` OLAMAZ — o ad karakter CÜMLESİ'nin (yukarıdaki
   "Haberi sıcağı sıcağına yakalar" paragrafı). İlk denemede ikisine de aynı
   adı vermiştim; aynı seçici iki farklı işi üstlenince sonra gelen ötekini
   ezer ve cümle `position:absolute` olurdu. Evren kartı da `.evren-kar` diyor.

   ⚠ `img{max-width:100%}` sıfırlaması yüzdeli yükseklikle çarpışıp görseli
   YATAYDA SIKIŞTIRIR (kart.css'te aynı tuzağa düşülmüştü) → `max-width:none`
   ve `width:auto` bilerek yazılı. */
.yzr-kar{position:absolute;z-index:1;pointer-events:none;user-select:none;
  max-width:none;width:auto;height:var(--kar-boy,118%);
  right:var(--kar-x,0);bottom:var(--kar-y,0);
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.26))}
.yzr-kar[data-yon="aynala"]{transform:scaleX(-1)}
/* Künye içeriği karakterin ÜSTÜNDE kalmalı; metin okunmaz olmasın. */
.yzr-kunye-ic{z-index:2}
/* Geniş ekranda metin bloğu karakterin geldiği yerden uzak dursun;
   dar ekranda karakter zaten gizleniyor (aşağıdaki telefon kuralı). */
@media(min-width:900px){
  .yzr-kunye:has(.yzr-kar) .yzr-kunye-gov{max-width:min(62ch,66%)}
}

/* ---------- bölüm ortak ---------- */
.yzr .blok{margin-top:40px}
.yzr .blok-bas{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:9px;border-bottom:2px solid var(--cizgi-kuvvetli)}
.yzr .blok-bas h2{font-size:25px;margin:0}
.yzr .blok-yan{font-size:13px;color:var(--soluk);margin-left:auto}
.yzr-temizle{margin-left:8px;text-decoration:underline}

/* ---------- 2. ROZET DUVARI ---------- */
.rzt-ust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rzt-b{position:relative;overflow:hidden;text-align:center;
  background:var(--yuzey);border:2px solid var(--cizgi-kuvvetli);
  border-radius:var(--kose,4px);padding:18px 16px 16px}
.rzt-b::after{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:radial-gradient(currentColor 1px,transparent 1.1px);
  background-size:7px 7px;opacity:.07}
.rzt-b-sekil{width:66px;height:66px;margin:0 auto 10px;display:block}
.rzt-b-form{fill:var(--rzt-renk);stroke:var(--cizgi-kuvvetli);stroke-width:3;stroke-linejoin:round}
.rzt-b-sembol{fill:#fff;stroke:none}
.rzt-b-acik .rzt-b-sembol{fill:var(--murekkep)}
.rzt-b-sembol [stroke]{stroke:#fff}
.rzt-b-acik .rzt-b-sembol [stroke]{stroke:var(--murekkep)}
.rzt-b-gorsel{width:66px;height:66px;object-fit:contain;display:block;margin:0 auto}
.rzt-b-ad{font-family:var(--font-baslik);font-size:19px;line-height:1.12;display:block}
.rzt-b-say{display:inline-block;margin-top:8px;font-size:13px;font-weight:800;
  font-variant-numeric:tabular-nums;background:var(--murekkep);color:var(--kagit);
  border-radius:999px;padding:2px 10px}

.rzt-kuyruk{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;align-items:flex-start}

/* "Rozet ver" çağrısı — kapalıyken de görünür, ama basılamadığı BELLİDİR. */
.rzt-cta{margin-top:18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--yuzey);border:1.5px dashed var(--cizgi);
  border-radius:var(--kose,4px);padding:14px 16px}
.rzt-cta p{font-size:13.5px;color:var(--murekkep-soft);margin:0}
.rzt-ver-tus{background:var(--murekkep);color:var(--kagit);border:0;
  border-radius:var(--kose,4px);padding:10px 18px;font-weight:700;font-size:14px;cursor:pointer}
.rzt-ver-tus[disabled]{opacity:.45;cursor:not-allowed}
.rzt-yakinda{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:#8f6a08;background:rgba(251,204,79,.22);border-radius:999px;padding:3px 9px}
:root[data-tema="dark"] .rzt-yakinda{color:#fbcc4f}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="light"]) .rzt-yakinda{color:#fbcc4f}
}

/* ---------- 3. SÜZME ÇİPLERİ ---------- */
.yzr-eksen{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:10px}
.yzr-eksen-ad{flex:none;min-width:96px;font-size:11px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--soluk)}
.yzr-cip{display:inline-flex;align-items:center;gap:7px;background:var(--kagit);
  border:1.5px solid var(--cizgi);border-radius:999px;padding:5px 13px;
  font-size:13.5px;font-weight:600;transition:border-color .14s,background .14s,color .14s}
.yzr-cip:hover{border-color:var(--cizgi-kuvvetli)}
.yzr-cip[aria-pressed="true"]{background:var(--murekkep);color:var(--kagit);border-color:var(--murekkep)}
.yzr-cip em{font-style:normal;font-size:11px;color:var(--soluk);font-variant-numeric:tabular-nums}
.yzr-cip[aria-pressed="true"] em{color:rgba(255,255,255,.72)}

/* Süzgeç çipleri artık "Yazıları" bölümünün İÇİNDE — kumanda, kumanda
   ettiği listenin yanında (Cevdet, DP143). */
.yzr-suzgecler{margin:-4px 0 18px;padding-bottom:16px;border-bottom:1px solid var(--cizgi)}

/* ---------- 4. EVREN MİNİ KARTLARI ---------- */
/* Dizindeki evren kartının küçüğü: aynı ton, aynı tram, aynı logo kutusu. */
.yzr-evrenler{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
/* ⚠⚠ Uzun evren adları logo kutusunun ALTINA giriyordu (Skywalker Destanı,
   Marvel Television dizileri…): logo mutlak konumlu, metin ise kartın altından
   yukarı büyüyor — üç satıra çıkınca çakışıyorlardı. Çözüm metni logonun
   altından başlatmak; kart da gerektiği kadar uzuyor. */
.yzr-ev{position:relative;overflow:hidden;border-radius:var(--yzr-kose);min-height:116px;
  padding:12px;padding-top:50px;color:#fff;display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--ton)}
.yzr-ev::before{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,.16) 1.1px,transparent 1.2px);
  background-size:7px 7px}
.yzr-ev::after{content:"";position:absolute;inset:0;opacity:.85;
  background:linear-gradient(102deg,rgba(0,0,0,.34) 0%,transparent 62%)}
.yzr-ev-logo{position:absolute;top:10px;left:10px;width:32px;height:32px;border-radius:5px;
  background:#fff;display:grid;place-items:center;z-index:2;
  font-family:var(--font-baslik);font-size:15px;color:var(--ton)}
.yzr-ev-ad{position:relative;z-index:2;font-family:var(--font-baslik);font-size:15px;line-height:1.12;overflow-wrap:anywhere;hyphens:auto}
.yzr-ev-say{position:relative;z-index:2;font-size:11.5px;opacity:.86;margin-top:3px;
  font-variant-numeric:tabular-nums}
.yzr-ev-acik{outline:3px solid var(--cizgi-kuvvetli);outline-offset:2px}

/* ---------- 5. YAZMA ÇİZGİSİ ---------- */
.yzr-cizgi{display:flex;align-items:flex-end;gap:3px;height:96px;padding-top:6px}
.yzr-ay{flex:1 1 0;min-width:2px;background:var(--yuzey-2);border-radius:2px 2px 0 0;
  position:relative;display:block;transition:background .14s}
.yzr-ay[data-dolu]{background:var(--yazar)}
.yzr-ay[data-dolu]:hover,.yzr-ay-acik{background:var(--vurgu,#dc303c)}
.yzr-ay-acik{outline:2px solid var(--cizgi-kuvvetli);outline-offset:1px}
.yzr-cizgi-alt{display:flex;justify-content:space-between;gap:10px;margin-top:7px;
  font-size:11.5px;color:var(--soluk);font-variant-numeric:tabular-nums}

/* ---------- 6. BUGÜN X YIL ÖNCE ---------- */
.yzr-gecmis{background:var(--yuzey);border:1.5px solid var(--cizgi);border-radius:var(--yzr-kose);
  padding:18px 20px;display:flex;gap:18px;align-items:center;flex-wrap:wrap;
  transition:border-color .14s}
.yzr-gecmis:hover{border-color:var(--cizgi-kuvvetli)}
.yzr-gecmis-et{font-family:var(--font-baslik);font-size:15px;color:var(--yazar);flex:none}
.yzr-gecmis-gov{min-width:0}
.yzr-gecmis-bas{display:block;font-family:var(--font-baslik);font-size:19px;line-height:1.2}
.yzr-gecmis-alt{display:block;font-size:13px;color:var(--soluk);margin-top:4px}

/* ⚠ Karanlık temada yazarın rengi zeminde değil METİNDE — koyu zeminde
   doygun renk okunmaz. Künyede beyaz yazı var, orada sorun yok. */
:root[data-tema="dark"] .yzr-gecmis-et{filter:brightness(1.55) saturate(.85)}
@media (prefers-color-scheme:dark){
  :root:not([data-tema="light"]) .yzr-gecmis-et{filter:brightness(1.55) saturate(.85)}
}

/* ---------- 7. YAZILAR ---------- */
.yzr-liste{margin-top:2px}
.yzr-yazi{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--cizgi);
  align-items:baseline}
.yzr-yazi-tarih{flex:none;width:82px;font-size:12px;color:var(--soluk);
  font-variant-numeric:tabular-nums}
.yzr-yazi-gov{min-width:0;flex:1 1 auto}
.yzr-yazi h3{font-size:18px;line-height:1.22;margin:0}
.yzr-yazi h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.yzr-yazi-meta{margin:5px 0 0;display:flex;gap:7px;flex-wrap:wrap;font-size:11.5px;color:var(--soluk)}

/* ---------- SOSYAL HESAPLAR ---------- */
.yzr-sos{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.yzr-sos-bag{display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.34);
  border-radius:999px;padding:5px 13px;font-size:13px;color:#fff;
  transition:background .14s,border-color .14s}
.yzr-sos-bag:hover{background:rgba(255,255,255,.24);border-color:#fff}
.yzr-sos-ikon{display:block;width:15px;height:15px;flex:none}
.yzr-sos-ikon svg{width:15px;height:15px;display:block;fill:currentColor}

/* ---------- KURUM: NE YAYIMLADI ----------
   Kişide bu bilgi süzme çipleri + evren kartlarıyla geliyor; kurumda ikisi de
   kapalı (Y6) ama "bu hesaptan ne çıktı" sorusu orada da geçerli. */
.yzr-kd{display:flex;flex-direction:column;gap:2px}
.yzr-kd-satir{display:grid;grid-template-columns:minmax(0,148px) minmax(0,1fr) 58px;
  gap:14px;align-items:center;padding:7px 8px;margin:0 -8px;border-radius:var(--yzr-kose);
  font-size:14.5px;transition:background .14s}
.yzr-kd-satir:hover{background:var(--yuzey)}
.yzr-kd-ad{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.yzr-kd-bar{height:13px;border-radius:2px;background:var(--yuzey-2);overflow:hidden}
.yzr-kd-bar i{display:block;height:100%;background:var(--yazar);border-radius:2px}
.yzr-kd-say{text-align:right;font-size:13px;color:var(--soluk);font-variant-numeric:tabular-nums}

/* ---------- telefon ---------- */
@media(max-width:760px){
  .yzr-kd-satir{grid-template-columns:minmax(0,110px) minmax(0,1fr) 46px;gap:10px;font-size:13.5px}
  .yzr-kunye h1{font-size:34px}
  .yzr-kunye-ic{padding:22px;gap:15px;flex-direction:column}
  .yzr-kunye .yzr-mono{width:64px;height:64px;font-size:30px}
  /* ⚠ Telefonda karakter metnin üstüne biner — gizlenir. */
  .yzr-kar{display:none}
  .yzr-ev{padding-top:46px;min-height:108px}
  .yzr-karakter{font-size:17px}
  .rzt-ust{grid-template-columns:1fr}
  .yzr-eksen-ad{min-width:0;width:100%}
  .yzr-yazi{flex-direction:column;gap:4px}
  .yzr-yazi-tarih{width:auto}
  .yzr .blok-yan{margin-left:0;width:100%}
  /* ⚠ Uzun kariyerde sütunlar dokunulamayacak kadar incelir → kaydırılır. */
  .yzr-cizgi{overflow-x:auto;gap:2px}
  .yzr-cizgi .yzr-ay{min-width:6px}
}

@media(prefers-reduced-motion:reduce){
  .yzr-cip,.yzr-ay,.yzr-gecmis,.yzr-sos-bag,.yzr-kd-satir{transition:none}
}

/* ---------- KÜNYE PERDESİ ("fog") — DP144 ----------
   ⭐ Evren kartındaki dört tipin künye hâli. Kurallar `kart.css`'ten birebir
   taşındı; tek fark renk kaynağı: kartta `--ton`, künyede `--yazar`.
   Ayar dili de aynı (perde · gradyan · blur · yok) — editör iki kez öğrenmesin.

   ⚠ `::before` ZATEN Ben-Day tramında kullanılıyor → perde `::after`.
   ⚠ Katman sırası: `.yzr-kar` z-index 1, perde de 1 ama DOM'da sonra geldiği
   için karakterin ÜSTÜNE düşer; `.yzr-kunye-ic` z-index 2 olduğu için metin
   perdenin de üstünde kalır. İstenen tam olarak bu: sis karakteri yumuşatır,
   yazıyı örtmez. */
.yzr-kunye[data-perde]::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  opacity:var(--kar-perde-opak,.7)}
.yzr-kunye[data-perde="perde"]::after{background:
  linear-gradient(var(--kar-perde-aci,102deg), color-mix(in srgb,var(--yazar) 34%, #000) 0%,
    color-mix(in srgb,var(--yazar) 62%, #000) 22%, transparent var(--kar-perde-yay,48%))}
.yzr-kunye[data-perde="gradyan"]::after{background:
  linear-gradient(0deg, color-mix(in srgb,var(--yazar) 30%, #000) 0%,
    color-mix(in srgb,var(--yazar) 72%, #000) 30%, transparent var(--kar-perde-yay,48%))}
.yzr-kunye[data-perde="blur"]::after{opacity:1;
  backdrop-filter:blur(calc(var(--kar-perde-opak,.7) * 9px));
  -webkit-backdrop-filter:blur(calc(var(--kar-perde-opak,.7) * 9px));
  background:linear-gradient(var(--kar-perde-aci,102deg),
    color-mix(in srgb,var(--yazar) 55%, #000) 0%, transparent var(--kar-perde-yay,48%));
  -webkit-mask-image:linear-gradient(var(--kar-perde-aci,102deg),#000 0%,#000 22%,transparent var(--kar-perde-yay,48%));
  mask-image:linear-gradient(var(--kar-perde-aci,102deg),#000 0%,#000 22%,transparent var(--kar-perde-yay,48%))}