/* Rol rehberleri (rol-rehberleri.html) */
.rr-kap { padding: 28px 0 72px; }
.rr-gez { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.rr-gez-oge { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-top: 3px solid var(--rr); color: var(--krem); transition: transform .2s, border-color .15s; }
.rr-gez-oge:hover { transform: translateY(-2px); }
.rr-gez-oge > span:last-child { display: grid; gap: 4px; }
.rr-gez-oge b { font: 700 20px/1 var(--f-baslik); text-transform: uppercase; }
.rr-gez-oge small { font: 500 12.5px/1 var(--f-arayuz); color: var(--krem-3); }
.rr-ikon { flex: none; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--rr) 18%, transparent); color: var(--rr); }
.rr-ikon svg { width: 22px; height: 22px; }
.rr-rol .bolum-bas h2 { color: var(--krem); }
.rr-rol .etiket { --e: var(--rr); }
.rr-izgara { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rr-ipucu, .rr-guclu { padding: 20px; }
.rr-ipucu h3, .rr-guclu h3 { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font: 700 18px/1.1 var(--f-arayuz); text-transform: none; }
.rr-ipucu h3 svg, .rr-guclu h3 svg { width: 18px; height: 18px; color: var(--rr); }
.rr-ipucu ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.rr-ipucu li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.55; color: var(--krem-2); }
.rr-ipucu li::before { content: ""; position: absolute; left: 4px; top: .62em; width: 7px; height: 7px; border-radius: 2px; background: var(--rr); transform: rotate(45deg); }
.rr-ipucu li a { color: var(--krem); text-decoration: underline; text-decoration-color: var(--cizgi-2); text-underline-offset: 3px; }
.rr-sira { display: grid; gap: 6px; margin: 0 0 12px; padding: 0; list-style: none; }
.rr-sira a { display: grid; grid-template-columns: 22px 36px minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; color: var(--krem); transition: background .14s; }
.rr-sira a:hover { background: rgba(247, 233, 213, .05); }
.rr-no { grid-row: span 2; font: 700 16px/1 var(--f-baslik); color: var(--rr); text-align: center; }
.rr-sira img { grid-row: span 2; width: 36px; height: 36px; border-radius: 7px; object-fit: cover; object-position: 50% 12%; }
.rr-sira b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14.5px/1.1 var(--f-arayuz); }
.rr-sira em { grid-row: span 2; font: 700 17px/1 var(--f-baslik); font-style: normal; color: var(--yesil); }
.rr-sira small { font: 500 11.5px/1 var(--f-arayuz); color: var(--krem-3); }
.rr-kahramanlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 10px; margin-top: 14px; }
.rr-kh { position: relative; display: grid; align-content: end; aspect-ratio: 280 / 380; border-radius: 10px; overflow: hidden; background: var(--kart-3); color: var(--krem);
  box-shadow: inset 0 0 0 1px var(--cizgi); transition: transform .2s, box-shadow .2s; }
.rr-kh:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--kr) 70%, transparent); }
.rr-kh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rr-kh::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7, 7, 7, .9), transparent 45%); }
.rr-kh b { position: relative; z-index: 1; padding: 8px; font: 700 14px/1.1 var(--f-baslik); text-transform: uppercase; }
html.hareket .rr-kh { animation: belir .4s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 30ms); }

@media (max-width: 900px) {
  .rr-gez { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rr-izgara { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .rr-gez-oge { padding: 12px; gap: 10px; }
  .rr-gez-oge b { font-size: 17px; }
  .rr-ikon { width: 36px; height: 36px; }
  .rr-kahramanlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.rr-diger[hidden] { display: none; }