/* 🧑‍🎨 Karakterim (karakterim.js) · önek krm- · tek yerden, yalnız telefonda */
.krm { display: flex; flex-direction: column; gap: 12px; padding-bottom: 24px; }
.krm-ust { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 22px; color: #fff; background: radial-gradient(120% 140% at 0% 0%, #7b3ff255, transparent 60%), linear-gradient(140deg, #121a2e, #1d2844); }
.krm-ust img, .krm-bos-yuz { flex: none; width: 76px; height: 76px; border-radius: 50%; background: linear-gradient(180deg, #8fd16a, #4fa83a); object-fit: contain; padding: 4px; box-sizing: border-box; }
.krm-bos-yuz { display: grid; place-items: center; font-size: 34px; font-weight: 900; color: #ffffffb0; background: #ffffff1a; }
.krm-ust b { display: block; font-size: 18px; }
.krm-ust small { color: #ffffffb0; font-size: 13px; }
.krm-kart { background: var(--card, #fff); border-radius: 20px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
.krm-adim { display: flex; gap: 10px; align-items: flex-start; margin: 0; font-weight: 700; }
.krm-adim > b { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--primary); color: var(--koci-on-primary, #fff); display: grid; place-items: center; font-size: 14px; }
.krm-not, .krm-gizli { margin: 0; font-size: 13px; color: var(--muted); }
.krm-taban { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; }
.krm-taban button { flex: none; width: 70px; border: 2px solid transparent; border-radius: 14px; background: color-mix(in srgb, var(--line) 50%, transparent); padding: 4px 4px 2px; display: flex; flex-direction: column; align-items: center; color: inherit; font: inherit; cursor: pointer; }
.krm-taban button.on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent); }
.krm-taban img { width: 54px; height: 54px; object-fit: contain; }
.krm-taban small { font-size: 11px; font-weight: 700; }
.krm-tarif { width: 100%; box-sizing: border-box; border: 1.5px solid var(--line); border-radius: 12px; padding: 8px 10px; font: 600 12.5px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; color: inherit; background: transparent; resize: none; }
.krm-kart .btn { margin-top: 0; }
.krm-bicim { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; }
.krm-yukle { position: relative; overflow: hidden; text-align: center; }
.krm-dosya { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; font-size: 0; }
.krm-onizle { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: 16px; background: linear-gradient(180deg, #8fd16a, #4fa83a); }
.krm-onizle img { flex: none; width: 112px; height: 112px; object-fit: contain; filter: drop-shadow(0 4px 4px #0004); }
.krm-onizle > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.krm-ad { width: 100%; box-sizing: border-box; border: 0; border-radius: 10px; padding: 8px 10px; font: inherit; font-weight: 700; color: #2b1d4a; background: #fff; }
.krm-hata { margin: 0; color: #e03131; font-weight: 700; font-size: 14px; }
.krm-bas { margin: 4px 0 -4px; font-size: 12px; letter-spacing: .09em; font-weight: 800; color: var(--muted); text-transform: uppercase; }
.krm-liste { display: flex; flex-direction: column; gap: 6px; }
.krm-liste > div { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--card, #fff); border: 2px solid transparent; }
.krm-liste > div.on { border-color: var(--primary); }
.krm-liste img { width: 44px; height: 44px; object-fit: contain; }
.krm-liste b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.krm-mini { border: 0; border-radius: 10px; padding: 7px 11px; font: inherit; font-size: 13px; font-weight: 800; background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--primary); cursor: pointer; }
.krm-mini.sil { background: #e0313118; color: #e03131; }
.krm-onizle .btn.ghost { margin: 0; background: #0b3d0b40; color: #fff; box-shadow: none; }
.krm-onizle .btn { margin: 0; }
/* Kendi görünümün (karakterimImg): yandan kafa → contain, yuvasını doldurur */
img.krm-ben { width: 100%; height: 100%; object-fit: contain; display: block; }
.sn-para-ben { width: 100%; height: 100%; object-fit: contain; border-radius: 50%; background: #ffffff26; }
.krm-durum.onayli { color: #8ce99a !important; } .krm-durum.red { color: #ffa8a8 !important; } .krm-durum.bekliyor { color: #ffd43b !important; }
.krm-gonder { margin-top: 6px; background: #ffffff26 !important; color: #fff !important; }
.krm-tikler { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.krm-tikler label { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border-radius: 12px; background: color-mix(in srgb, var(--line) 40%, transparent); cursor: pointer; }
.krm-tikler input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--primary); flex: none; }
.krm-tikler b { display: block; font-size: 13px; } .krm-tikler small { color: var(--muted); font-size: 11px; line-height: 1.25; display: block; }
.krm-onay { display: flex; gap: 8px; align-items: flex-start; color: #fff; font-size: 12px; line-height: 1.3; }
.krm-onay input { flex: none; width: 18px; height: 18px; margin-top: 1px; }
@media (max-width: 360px) { .krm-tikler { grid-template-columns: 1fr; } }
/* 🥊 Word Punch dövüşçün */
.krm-ilk { display: block; width: 54px; height: 54px; background-size: 400% 200%; background-position: 0 0; background-repeat: no-repeat; }
.krm-atlas { position: relative; width: 100%; aspect-ratio: 2 / 1; border-radius: 12px; overflow: hidden; background: linear-gradient(180deg, #2b1d4a, #4a3d63); }
.krm-atlas img { position: absolute; inset: 0; width: 100%; height: 100%; }
.krm-atlas i { position: absolute; width: 25%; height: 50%; box-sizing: border-box; border: 1px dashed #ffffff40; font-style: normal; font-size: 10px; font-weight: 700; color: #fff; padding: 2px 4px; text-shadow: 0 1px 2px #000; }
.krm-atlas i b { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); margin-right: 3px; font-size: 9px; }
.krm-punch-onizle { display: flex; flex-direction: column; gap: 8px; }
.krm-onay.koyu { color: inherit; }
.krm-punch .btn.ghost { margin: 0; text-align: center; }