/* Popüler buildler (buildler.html) */
.sb-eylem { display: flex; flex-wrap: wrap; gap: 10px; align-self: end; }
.bl-kap { padding-bottom: 72px; }
.bl-tur-not { margin: 18px 0 16px; }
.bl-tur-not b { color: var(--krem-2); }
.t-silah { color: var(--silah, #e8a33d); } .t-ruh { color: var(--ruh, #b98cf5); } .t-hibrit { color: var(--krem); }

.bl-liste { display: grid; gap: 8px; }
.bl-kart { padding: 0; overflow: hidden; border-left: 3px solid color-mix(in srgb, var(--kr) 75%, transparent); transition: border-color .15s, box-shadow .15s; }
html.hareket .bl-kart { animation: belir .4s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i, 0) * 22ms); }
.bl-kart.acik { box-shadow: 0 18px 40px rgba(0, 0, 0, .35); }
.bl-bas { width: 100%; display: grid; grid-template-columns: 46px minmax(0, 1.4fr) auto minmax(0, 1fr) auto 18px; gap: 14px; align-items: center; padding: 12px 16px 12px 12px;
  border: 0; background: none; color: var(--krem); text-align: left; cursor: pointer; }
.bl-bas:hover { background: rgba(247, 233, 213, .035); }
.bl-kh { width: 46px; height: 46px; border-radius: 9px; object-fit: cover; object-position: 50% 12%; background: var(--kart-3); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--kr) 60%, transparent); }
.bl-ad { display: grid; gap: 6px; min-width: 0; }
.bl-ad b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 15.5px/1.15 var(--f-arayuz); }
.bl-ad small { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font: 500 12.5px/1 var(--f-arayuz); color: var(--krem-3); }
.bl-tur { padding: 5px 10px; border-radius: 999px; font: 700 11.5px/1 var(--f-arayuz); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
  background: rgba(247, 233, 213, .06); box-shadow: inset 0 0 0 1px currentColor; }
.bl-tur.t-hibrit { background: linear-gradient(90deg, color-mix(in srgb, var(--silah, #e8a33d) 22%, transparent), color-mix(in srgb, var(--ruh, #b98cf5) 22%, transparent)); box-shadow: inset 0 0 0 1px var(--cizgi-2); }
.bl-esyalar { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; }
.bl-esyalar i { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 6px; background: color-mix(in srgb, var(--sr) 28%, #15120f); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sr) 50%, transparent); }
.bl-esyalar img { width: 70%; height: 70%; object-fit: contain; }
.bl-esyalar em { flex: none; font: 600 12px/1 var(--f-arayuz); font-style: normal; color: var(--krem-3); padding-left: 2px; }
.bl-oran { display: grid; gap: 4px; justify-items: end; }
.bl-oran b { font: 700 18px/1 var(--f-baslik); font-variant-numeric: tabular-nums; }
.bl-oran small { font: 500 11.5px/1 var(--f-arayuz); color: var(--krem-3); white-space: nowrap; }
.bl-bas > svg { width: 18px; height: 18px; color: var(--krem-3); transition: transform .2s; }
.bl-kart.acik .bl-bas > svg { transform: rotate(180deg); }
.bl-govde { padding: 0 12px 12px; }
.bl-govde[hidden] { display: none; }
.bl-plan-ac { margin: 0; max-width: 760px; font-size: 13.5px; line-height: 1.45; color: var(--krem-2); }
.bl-daha { display: flex; justify-content: center; margin-top: 18px; }
.bl-daha small { font-weight: 500; color: var(--krem-3); }

/* Oyundaki plan paneli (kahraman sayfasıyla aynı görünüm) */
.rutbe-rozet.gizli { padding: 4px 8px; border-radius: 4px; background: rgba(247, 233, 213, .06); color: var(--krem-3); }
.kh-plan-govde { display: grid; gap: 14px; min-width: 0; padding: 18px; border-radius: var(--r);
  background: linear-gradient(rgba(54, 45, 33, .9), rgba(40, 33, 24, .94)), url("oyun/dukkan/arka-genel.webp") center / cover; box-shadow: inset 0 0 0 1px rgba(214, 190, 150, .18), 0 20px 50px rgba(0, 0, 0, .4); }
.kh-plan-pano { display: flex; flex-wrap: wrap; gap: 10px; align-content: start; }
.kh-plan-kat { --kart-g: 64px; flex: 1 1 calc(var(--w) * (var(--kart-g) + 6px) + 22px); max-width: 100%; display: grid; align-content: start; gap: 8px; padding: 9px 10px 11px;
  border-radius: 4px; background: rgba(20, 16, 11, .5); box-shadow: inset 0 0 0 1px rgba(214, 190, 150, .14); }
.kh-plan-kat.istege { background: rgba(28, 34, 52, .55); box-shadow: inset 0 0 0 1px rgba(120, 150, 220, .25); }
.kh-plan-kat-bas { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.kh-plan-kat-bas b { font: 700 14px/1.1 var(--f-arayuz); color: #f1e3cc; }
.kh-plan-kat-bas small { flex-basis: 100%; font: 500 12px/1.3 var(--f-arayuz); color: rgba(241, 227, 204, .6); }
.kh-istege { padding: 2px 6px; border-radius: 3px; background: rgba(110, 150, 230, .25); color: #b9cdf7; font: 700 10px/1.3 var(--f-arayuz); letter-spacing: .06em; text-transform: uppercase; }
.kh-plan-kartlar { display: flex; flex-wrap: wrap; gap: 6px; }
.kh-plan-kartlar .oyun-kart { --ok-g: var(--kart-g); }
.kh-plan-alt { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid rgba(214, 190, 150, .14); }
.kh-plan-alt small { font-size: 12px; color: var(--krem-3); }
.ipucu-plan-not { margin: 0 0 8px; padding: 8px 10px; border-radius: 6px; background: rgba(247, 233, 213, .06); font-size: 12.5px; line-height: 1.4; color: var(--krem-2); }
.ipucu-plan-not b { display: block; margin-bottom: 3px; font: 600 10.5px/1 var(--f-arayuz); letter-spacing: .12em; text-transform: uppercase; color: var(--krem-3); }

@media (max-width: 900px) {
  .bl-bas { grid-template-columns: 42px minmax(0, 1fr) auto 18px; grid-template-areas: "kh ad oran ok" "kh tur tur tur" "es es es es"; row-gap: 10px; }
  .bl-kh { grid-area: kh; width: 42px; height: 42px; align-self: start; }
  .bl-ad { grid-area: ad; } .bl-oran { grid-area: oran; } .bl-bas > svg { grid-area: ok; }
  .bl-tur { grid-area: tur; justify-self: start; }
  .bl-esyalar { grid-area: es; }
}
@media (max-width: 560px) {
  .kh-plan-govde { padding: 12px; }
  .kh-plan-kat { --kart-g: 56px; }
  .bl-govde { padding: 0 8px 8px; }
}