/* ==========================================================================
   ROZET — form + sembol + renk + görsel
   ⚠ Emoji değil: çizgi roman çıkartması. Ben-Day dilinin devamı, kelime
   ChunkFive (--font-baslik) ile yazılır.
   ⭐ Ayrı dosya, kart.css deseni: site ve yönetimdeki rozet ekranı AYNI stili
   yükler. Editörde başka türlü görünen bir rozet, editörü yalancı yapar.
   ========================================================================== */

.rzt{
  --rzt-renk:#dc303c;
  --rzt-metin:#fff;
  --rzt-dolgu:var(--rzt-renk);
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;
  font-family:var(--font-baslik);font-size:13px;line-height:1.1;letter-spacing:.2px;
  color:var(--rzt-metin);background:var(--rzt-dolgu);
  border:2px solid var(--cizgi-kuvvetli);
  max-width:100%;
  vertical-align:middle;
}

/* Açık renkli rozette beyaz yazı okunmaz — kartlardaki luminance guard'ın aynısı.
   Sınıfı PHP koyar (d20mag_renk_acik_mi), CSS renk hesabı yapamaz. */
.rzt-acik{--rzt-metin:#15161a}

.rzt-kelime{font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ×N — rozetin kendisi kadar önemli değil, ama okunur olmalı. */
.rzt-sayi{
  font-family:var(--font-govde);font-size:11px;font-weight:800;
  padding:2px 6px;border-radius:20px;
  background:rgba(0,0,0,.22);
  flex:0 0 auto;
}
.rzt-acik .rzt-sayi{background:rgba(0,0,0,.13)}

.rzt-ikon{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.rzt-sembol{display:block;color:currentColor}
.rzt-gorsel{display:block;width:1.55em;height:1.55em;object-fit:contain}

/* --- Ölçüler --------------------------------------------------------- */
.rzt-buyuk{font-size:16px;padding:10px 17px;gap:9px;border-width:2.5px}
.rzt-buyuk .rzt-sayi{font-size:12px}
.rzt-mini{font-size:11px;padding:4px 9px;gap:5px;border-width:1.5px}
.rzt-mini .rzt-sayi{font-size:10px;padding:1px 5px}

/* --- FORM: pul ------------------------------------------------------- *
   Tırtıklı kenar. `mask` ile delikler açılır; desteklemeyen tarayıcıda
   kesik çizgili kenar kalır — rozet yine okunur.                        */
.rzt-pul{
  border-style:dashed;
  border-radius:3px;
}

/* --- FORM: bant ------------------------------------------------------ *
   İki ucu çentikli şerit. clip-path kenarlığı kırpar, o yüzden çerçeve
   yerine gölge kullanılır.                                              */
.rzt-bant{
  border:0;
  padding-left:19px;padding-right:19px;
  clip-path:polygon(0 0,100% 0,calc(100% - 9px) 50%,100% 100%,0 100%,9px 50%);
  box-shadow:inset 0 0 0 2px rgba(0,0,0,.28);
}
.rzt-bant.rzt-mini{padding-left:14px;padding-right:14px}

/* --- FORM: madalyon -------------------------------------------------- *
   Yuvarlak; içeride ince bir halka (ödül hissi).                        */
.rzt-madalyon{
  border-radius:999px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.42);
}
.rzt-acik.rzt-madalyon{box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.22)}

/* --- FORM: balon ----------------------------------------------------- *
   Konuşma balonu: yuvarlak köşe + alt sol kuyruk. Kuyruk kenarlıkla
   birlikte çizilir ki çerçeve kesintisiz görünsün.                      */
.rzt-balon{
  border-radius:14px 14px 14px 4px;
  position:relative;
  margin-bottom:5px;
}
.rzt-balon::after{
  content:"";position:absolute;left:11px;bottom:-7px;
  width:0;height:0;
  border-left:8px solid transparent;
  border-right:0 solid transparent;
  border-top:8px solid var(--cizgi-kuvvetli);
}
.rzt-balon::before{
  content:"";position:absolute;left:12px;bottom:-4px;
  width:0;height:0;z-index:1;
  border-left:6px solid transparent;
  border-right:0 solid transparent;
  border-top:6px solid var(--rzt-dolgu);
}

/* --- FORM: patlama --------------------------------------------------- *
   Yıldız patlaması. clip-path kenarlığı kırptığı için çerçeve içeriden
   gölgeyle taklit edilir; kenar payı da onun için geniş.                */
.rzt-patlama{
  border:0;
  padding:11px 21px;
  clip-path:polygon(
    0% 46%, 6% 30%, 3% 12%, 18% 16%, 27% 3%,
    38% 14%, 50% 0%, 62% 14%, 73% 3%, 82% 16%,
    97% 12%, 94% 30%, 100% 46%, 94% 62%, 97% 82%,
    82% 78%, 73% 95%, 62% 82%, 50% 100%, 38% 82%,
    27% 95%, 18% 78%, 3% 82%, 6% 62%
  );
}
.rzt-patlama.rzt-mini{padding:8px 16px}
.rzt-patlama.rzt-buyuk{padding:15px 27px}

/* --- Sembolsüz rozet ------------------------------------------------- */
.rzt-sembolsuz{padding-left:14px}
.rzt-sembolsuz.rzt-bant{padding-left:19px}

/* ==========================================================================
   ROZET DUVARI — yazar profilinde
   ========================================================================== */

.rzt-duvar{margin:26px 0}
.rzt-duvar-baslik{
  font-family:var(--font-baslik);font-size:15px;font-weight:400;
  text-transform:uppercase;letter-spacing:.6px;
  color:var(--murekkep-soft);
  margin:0 0 13px;
}
.rzt-duvar-liste{display:flex;flex-wrap:wrap;gap:10px 9px;align-items:flex-start}

/* Patlama formu komşusunu itmesin: clip-path kutuyu küçültmez. */
.rzt-duvar-liste .rzt-patlama{margin:-2px}

/* --- Boş hâl ---------------------------------------------------------- */
.rzt-yok{
  font-size:14px;color:var(--soluk);
  border:1.5px dashed var(--cizgi);border-radius:var(--kose,6px);
  padding:15px 17px;margin:22px 0;
}

/* ==========================================================================
   Telefon
   ⚠ Uzun kelimeler ("Bunu ben de düşünmüştüm ama yazamamıştım") dar ekranda
   tek satıra sığmaz; nowrap + ellipsis kesiyor. Dar ekranda kelime sarılsın.
   ========================================================================== */

@media (max-width:600px){
  .rzt{font-size:12px;padding:6px 11px}
  .rzt-buyuk{font-size:14px;padding:8px 14px}
  .rzt-kelime{white-space:normal;overflow:visible;text-overflow:clip}
  .rzt-duvar-liste{gap:8px 7px}
}