/* ---------- Tier listeler ---------- */
.tl-root .ic, .tl-sec svg, .tl-hero svg { flex: none; }
.t-S { --tc: #ff4057; --tg: rgba(255,64,87,.35); }
.t-A { --tc: #f2b45a; --tg: rgba(242,180,90,.3); }
.t-B { --tc: #c99cff; --tg: rgba(201,156,255,.28); }
.t-C { --tc: #3fd1b5; --tg: rgba(63,209,181,.26); }
.t-D { --tc: #5b8cff; --tg: rgba(91,140,255,.26); }
.t-F { --tc: #8d8a85; --tg: rgba(141,138,133,.2); }

/* kahraman */
.tl-hero { position: relative; overflow: hidden; isolation: isolate; background: #06070a; min-height: 430px; display: flex; align-items: flex-end; }
.tl-hero .pn-art.bg-asc { background-size: cover; filter: blur(46px) saturate(1.2) brightness(.5); transform: scale(1.3); animation: none; }
.tl-hero .up-asc-img { left: 76%; top: 50%; width: min(760px, 58vw); }
.tl-hero-in { width: 100%; padding-top: 80px; padding-bottom: 50px; }
.tl-hero-in > * { animation: rise .9s cubic-bezier(.2,.8,.2,1) both; }
.tl-hero-in > :nth-child(3) { animation-delay: .08s; }
.tl-hero-in > :nth-child(4) { animation-delay: .16s; }
.tl-title { margin: 14px 0 12px; font: 700 clamp(40px, 5vw, 70px)/1.02 var(--f-display); background: linear-gradient(180deg, #fff3d6, #d9b26f 62%, #8f7140);
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 8px 30px rgba(0,0,0,.9)); }
.tl-title.sm { font-size: clamp(30px, 3.6vw, 52px); max-width: 860px; }
.tl-sub { max-width: 640px; margin: 0 0 22px; color: #b6aa94; font-size: 17px; line-height: 1.6; }
.tl-strip { display: flex; gap: 10px; }
.tl-strip span { width: 46px; height: 46px; display: grid; place-items: center; font: 700 20px var(--f-display); color: var(--tc);
  background: linear-gradient(180deg, rgba(20,16,14,.9), rgba(6,6,8,.9)); border: 1px solid color-mix(in srgb, var(--tc) 55%, transparent);
  box-shadow: 0 0 22px var(--tg), inset 0 0 14px rgba(0,0,0,.8); text-shadow: 0 0 14px var(--tc); clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  animation: tlFloat 4s ease-in-out infinite; }
.tl-strip span:nth-child(2n) { animation-delay: -2s; }
@keyframes tlFloat { 50% { transform: translateY(-4px); } }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; font: 600 12px var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: #8b7f6b; }
.tl-meta b { color: var(--gold2); font-weight: 700; }
.tl-meta .btn { margin-left: 4px; display: inline-flex; gap: 8px; align-items: center; }
.tl-meta .btn svg { width: 15px; height: 15px; }

/* dizin kartları */
.tl-sec { padding-top: 40px; overflow-x: clip; }
.tl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 22px; }
.tl-card { position: relative; display: flex; flex-direction: column; overflow: hidden; color: inherit; text-align: left; cursor: pointer;
  background: linear-gradient(180deg, #15110f, #0a0909); border: 1px solid rgba(217,178,111,.16); box-shadow: 0 20px 50px rgba(0,0,0,.5);
  transition: border-color .3s, box-shadow .3s, transform .3s; }
.tl-card:hover { border-color: rgba(243,220,170,.55); box-shadow: 0 24px 60px rgba(0,0,0,.6), 0 0 34px rgba(200,29,51,.22); }
.tl-cart { position: relative; height: 200px; overflow: hidden; isolation: isolate; display: grid; place-items: center; }
.tl-cbg { position: absolute; inset: 0; z-index: -2; background: center 35% / cover; transition: transform .8s cubic-bezier(.2,.8,.2,1); filter: saturate(1.1) brightness(.7); }
.tl-cbg.asc { filter: blur(22px) saturate(1.3) brightness(.55); transform: scale(1.3); }
.tl-card:hover .tl-cbg { transform: scale(1.08); }
.tl-card:hover .tl-cbg.asc { transform: scale(1.4); }
.tl-cart::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #12100e 0%, transparent 60%), radial-gradient(circle at 50% 45%, transparent 30%, rgba(0,0,0,.5)); }
.tl-cmedal { width: 150px; height: 150px; border-radius: 50%; padding: 4px; background: conic-gradient(from 0deg, #f3dcaa, #8f6a35, #f3dcaa, #8f6a35, #f3dcaa); box-shadow: 0 0 40px rgba(200,29,51,.45), 0 16px 40px rgba(0,0,0,.8);
  transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.tl-cmedal img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; border: 3px solid #0a0909; }
.tl-card:hover .tl-cmedal { transform: scale(1.06) rotate(-3deg); }
.tl-cicons { display: flex; gap: 14px; }
.tl-cicons img { width: 74px; height: 74px; object-fit: contain; filter: drop-shadow(0 8px 18px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(226,189,120,.35)); transition: transform .5s; }
.tl-cicons img:nth-child(2) { transform: translateY(-12px) scale(1.15); }
.tl-card:hover .tl-cicons img { transform: translateY(-6px); }
.tl-card:hover .tl-cicons img:nth-child(2) { transform: translateY(-18px) scale(1.2); }
.tl-ckind { position: absolute; left: 14px; top: 14px; padding: 5px 10px; font: 700 10px var(--f-head); letter-spacing: .22em; text-transform: uppercase; color: #fff3d6;
  background: linear-gradient(180deg, rgba(200,29,51,.85), rgba(110,15,28,.85)); border: 1px solid rgba(243,220,170,.5); }
.tl-cbody { display: grid; gap: 6px; padding: 18px 22px 22px; flex: 1; }
.tl-cbody > b { font: 700 20px/1.25 var(--f-display); color: #f3e2bb; }
.tl-cbody > small { font: 600 12px var(--f-head); letter-spacing: .14em; text-transform: uppercase; color: #7d7262; }
.tl-ctop { display: flex; align-items: center; gap: 6px; margin-top: 10px; padding-top: 12px; border-top: 1px solid rgba(217,178,111,.1); }
.tl-ctop em { margin-right: 6px; font: 700 10px var(--f-head); font-style: normal; letter-spacing: .22em; text-transform: uppercase; color: #ff4057; }
.tl-ctop span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: #0b0909; box-shadow: 0 0 0 1px rgba(255,64,87,.5), 0 0 12px rgba(255,64,87,.25); }
.tl-ctop img { width: 100%; height: 100%; object-fit: cover; }
.tl-ctop img.ic { object-fit: contain; padding: 4px; }
.tl-ctop i { font: 700 14px var(--f-display); font-style: normal; color: #e2bd78; }
.tl-new { align-items: center; justify-content: center; gap: 8px; min-height: 340px; color: #8b7f6b; background: rgba(255,255,255,.015); border-style: dashed; font: inherit; }
.tl-new svg { width: 40px; height: 40px; color: var(--ember); }
.tl-new b { font: 700 18px var(--f-display); color: #e8d9bb; }
.tl-new small { font-size: 13px; }

/* liste sayfası */
.tl-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; align-items: start; }
.tl-main { min-width: 0; display: grid; gap: 22px; }
.tl-side { position: sticky; top: calc(var(--hdr) + 20px); display: grid; gap: 18px; }
.tl-scard { position: relative; padding: 18px 20px; background: linear-gradient(180deg, rgba(21,17,15,.95), rgba(9,8,9,.97)); border: 1px solid rgba(217,178,111,.14); }
.tl-scard > h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font: 700 12px var(--f-head); letter-spacing: .26em; text-transform: uppercase; color: var(--gold2); }
.tl-scard > h3 svg { width: 16px; height: 16px; color: var(--ember); }
.tl-key { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tl-key li { display: flex; align-items: center; gap: 12px; color: #a99d88; font-size: 14.5px; }
.tl-key b { width: 30px; height: 30px; display: grid; place-items: center; font: 700 14px var(--f-display); color: var(--tc); border: 1px solid color-mix(in srgb, var(--tc) 50%, transparent); background: rgba(0,0,0,.4); box-shadow: 0 0 12px var(--tg); }
.tl-other { display: grid; grid-template-columns: 64px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 8px 0; color: inherit; border-top: 1px solid rgba(217,178,111,.08); }
.tl-other:first-of-type { border-top: 0; }
.tl-other span { grid-row: span 2; width: 64px; height: 44px; background: center / cover; border: 1px solid rgba(217,178,111,.2); filter: brightness(.8); transition: filter .2s; }
.tl-other b { font: 700 14px/1.25 var(--f-display); color: #e8d9bb; }
.tl-other small { color: #6f6656; font-size: 12px; }
.tl-other:hover span { filter: none; }
.tl-other:hover b { color: #fff3d6; }

.tl-note { position: relative; padding: 18px 22px 18px 22px; background: linear-gradient(90deg, rgba(200,29,51,.14), rgba(200,29,51,.03) 70%); border: 1px solid rgba(255,90,100,.3); border-left: 3px solid var(--ember); }
.tl-note-h { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 6px; font: 700 12px var(--f-head); letter-spacing: .24em; text-transform: uppercase; color: #ff8a8f; }
.tl-note-h svg { width: 16px; height: 16px; }
.tl-note p { margin: 0; color: #e2d6bd; font-size: 15px; line-height: 1.6; }

.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; padding: 14px 18px; background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.1); color: #a99d88; font-size: 13.5px; }
.tl-legend span { display: inline-flex; align-items: center; gap: 8px; }
.tl-legend i { width: 20px; height: 20px; display: grid; place-items: center; }
.tl-legend svg, .tl-mv svg { width: 13px; height: 13px; stroke-width: 2.4; }
.mv-u, .mv-u2 { --mc: #5fd37a; } .mv-d, .mv-d2 { --mc: #ff5a5f; } .mv-n { --mc: #6aa8ff; }
.tl-legend i, .tl-mv { color: var(--mc); background: color-mix(in srgb, var(--mc) 16%, transparent); border: 1px solid color-mix(in srgb, var(--mc) 45%, transparent); }

.tl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.tl-search { display: flex; align-items: center; gap: 10px; flex: 0 1 300px; padding: 0 14px; height: 44px; background: rgba(0,0,0,.45); border: 1px solid rgba(217,178,111,.2); transition: border-color .2s, box-shadow .2s; }
.tl-search:focus-within { border-color: rgba(243,220,170,.55); box-shadow: 0 0 20px rgba(200,29,51,.15); }
.tl-search svg { width: 17px; height: 17px; color: #8b7f6b; }
.tl-search input { flex: 1; min-width: 0; background: none; border: 0; outline: none; color: var(--text); font: 15px var(--f-body); }
.tl-cf { display: flex; flex-wrap: wrap; gap: 4px; }
.tl-cf button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 10px; cursor: pointer; color: #9d917d; background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.12);
  font: 600 12px var(--f-head); letter-spacing: .06em; transition: all .2s; }
.tl-cf button img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; filter: grayscale(.8) brightness(.7); transition: filter .2s; }
.tl-cf button span { display: none; }
.tl-cf button:hover { color: #f3e2bb; border-color: rgba(217,178,111,.4); }
.tl-cf button:hover img, .tl-cf button.on img { filter: none; }
.tl-cf button.on { color: #fff3d6; border-color: #e2bd78; background: rgba(200,29,51,.28); }
.tl-cf button.on span { display: inline; }

/* kademe satırları */
.tl-tiers { display: grid; gap: 12px; }
.tl-row { position: relative; display: grid; grid-template-columns: 92px minmax(0, 1fr); min-height: 84px; overflow: hidden;
  background: linear-gradient(90deg, color-mix(in srgb, var(--tc) 9%, #0c0a0a), #0c0a0a 45%); border: 1px solid color-mix(in srgb, var(--tc) 30%, transparent);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.4), 0 14px 34px rgba(0,0,0,.35); transition: border-color .3s, box-shadow .3s; animation: rise .6s cubic-bezier(.2,.8,.2,1) both; }
.tl-row:nth-child(2) { animation-delay: .05s; } .tl-row:nth-child(3) { animation-delay: .1s; } .tl-row:nth-child(4) { animation-delay: .15s; } .tl-row:nth-child(5) { animation-delay: .2s; } .tl-row:nth-child(6) { animation-delay: .25s; }
.tl-row::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--tc); box-shadow: 0 0 18px var(--tc); }
.tl-row.over { border-color: var(--tc); box-shadow: 0 0 30px var(--tg); }
.tl-row[hidden] { display: none; }
.tl-plate { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 10px 6px;
  border-right: 1px solid color-mix(in srgb, var(--tc) 22%, transparent); background: radial-gradient(circle at 50% 45%, var(--tg), transparent 70%); }
.tl-plate b { font: 700 46px/1 var(--f-display); color: var(--tc); text-shadow: 0 0 22px var(--tc), 0 2px 0 rgba(0,0,0,.8); }
.tl-plate small { font: 700 9px var(--f-head); letter-spacing: .2em; text-transform: uppercase; color: color-mix(in srgb, var(--tc) 70%, #8b7f6b); text-align: center; }
.tl-row.t-S .tl-plate b { animation: tlPulse 3s ease-in-out infinite; }
@keyframes tlPulse { 50% { text-shadow: 0 0 34px var(--tc), 0 0 60px var(--tg), 0 2px 0 rgba(0,0,0,.8); } }
.tl-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 12px; align-content: center; }
.tl-item { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 12px 8px 8px; color: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.035), rgba(0,0,0,.25)); border: 1px solid rgba(255,255,255,.06); transition: border-color .2s, background .2s, transform .2s; }
.tl-item[hidden] { display: none; }
.tl-item:hover { border-color: color-mix(in srgb, var(--tc) 60%, transparent); background: linear-gradient(180deg, color-mix(in srgb, var(--tc) 12%, transparent), rgba(0,0,0,.25)); z-index: 2; }
.tl-item.link:hover { transform: translateY(-2px); }
.tl-ic { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: radial-gradient(circle, #241c16, #0a0909);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--tc) 55%, transparent), 0 0 12px var(--tg); }
.tl-ic img.pt { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; }
.tl-ic img.ic { width: 82%; height: 82%; object-fit: contain; }
.tl-ic i { font: 700 18px var(--f-display); font-style: normal; color: var(--tc); }
.tl-in { flex: 1; min-width: 0; display: grid; gap: 1px; }
.tl-in b { font: 600 15px/1.25 var(--f-body); color: #efe3c8; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-in small { font: 600 10px var(--f-head); letter-spacing: .16em; text-transform: uppercase; color: #7d7262; }
.tl-mv { position: absolute; right: 6px; top: 6px; width: 18px; height: 18px; display: grid; place-items: center; }
.tl-tip { position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); padding: 10px 12px; font-size: 13px; line-height: 1.45; color: #e2d6bd; pointer-events: none; opacity: 0; transform: translateY(4px);
  background: #0d0b0b; border: 1px solid rgba(217,178,111,.35); box-shadow: 0 14px 30px rgba(0,0,0,.7); transition: opacity .2s, transform .2s; z-index: 5; }
.tl-item:hover .tl-tip { opacity: 1; transform: none; }
.tl-item:has(.tl-tip) .tl-in b::after { content: ' •'; color: var(--ember2); }
.tl-empty, .tl-none { padding: 40px 20px; text-align: center; color: #7d7262; border: 1px dashed rgba(217,178,111,.18); }
.tl-none[hidden] { display: none; }

/* değişiklik günlüğü */
.tl-logs { margin-top: 18px; display: grid; gap: 8px; }
.tl-logs h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 700 24px var(--f-display); color: #f3e2bb; }
.tl-logs h2 svg { width: 22px; height: 22px; color: var(--ember); }
.tl-log { background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.12); }
.tl-log summary { display: flex; align-items: center; gap: 10px; padding: 14px 18px; cursor: pointer; list-style: none; font: 700 15px var(--f-display); color: #e8d9bb; }
.tl-log summary::-webkit-details-marker { display: none; }
.tl-log summary span { flex: 1; }
.tl-log summary .chev { width: 18px; height: 18px; color: var(--ember2); transition: transform .3s; }
.tl-log[open] summary .chev { transform: rotate(180deg); }
.tl-log > div { padding: 0 18px 14px; color: #b6aa94; font-size: 14.5px; }
.tl-log > div p { margin: 0 0 6px; }

/* düzenleyici */
.tl-editbar { position: sticky; top: calc(var(--hdr) + 10px); z-index: 20; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px;
  background: linear-gradient(180deg, rgba(40,14,18,.96), rgba(16,10,10,.96)); border: 1px solid rgba(255,90,100,.45); box-shadow: 0 14px 40px rgba(0,0,0,.6), 0 0 26px rgba(200,29,51,.2); backdrop-filter: blur(10px); }
.tl-eb-t { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; font: 700 12px var(--f-head); letter-spacing: .24em; text-transform: uppercase; color: #ff8a8f; }
.tl-eb-t svg { width: 16px; height: 16px; }
.tl-eb-n { display: inline-flex; align-items: center; gap: 8px; color: #a99d88; font-size: 13.5px; }
.tl-editbar .btn.sm { margin: 0; }
.tl-edform { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; padding: 20px; background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.14); }
.tl-edform label { display: grid; gap: 6px; font: 600 11px var(--f-head); letter-spacing: .18em; text-transform: uppercase; color: #8b7f6b; }
.tl-edform .w { grid-column: 1 / -1; }
.tl-edform textarea { resize: vertical; font: 15px/1.5 var(--f-body); letter-spacing: 0; text-transform: none; }
.tl-edform .be-link { justify-self: start; }
.tl-hint { margin: 0; color: #7d7262; font-size: 13px; text-transform: none; letter-spacing: 0; }
.tl-tiers.edit .tl-row { animation: none; }
.tl-tiers.edit .tl-items { min-height: 70px; }
.tl-tiers.edit .tl-item { cursor: grab; padding-left: 4px; }
.tl-tiers.edit .tl-item.drag { opacity: .35; }
.tl-grip { width: 16px; color: #5f574b; }
.tl-grip svg { width: 16px; height: 16px; }
.tl-ed { display: flex; gap: 2px; }
.tl-ed button { width: 26px; height: 26px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #8b7f6b; background: rgba(0,0,0,.35); border: 1px solid rgba(217,178,111,.15); }
.tl-ed button svg { width: 13px; height: 13px; }
.tl-ed button:hover { color: #fff3d6; border-color: #e2bd78; }
.tl-ed [data-idel]:hover { color: #ff7a6b; border-color: #ff7a6b; }
.tl-tiers.edit .tl-mv { right: auto; left: 46px; top: 2px; }
.tl-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 58px; cursor: pointer; color: var(--tc); background: rgba(255,255,255,.015);
  border: 1px dashed color-mix(in srgb, var(--tc) 45%, transparent); font: 700 12px var(--f-head); letter-spacing: .18em; text-transform: uppercase; transition: background .2s; }
.tl-add svg { width: 16px; height: 16px; }
.tl-add:hover { background: color-mix(in srgb, var(--tc) 12%, transparent); }
.tl-logadd { display: grid; grid-template-columns: 170px 1fr auto; gap: 8px; }
.tl-logadd .btn { margin: 0; }
.tl-logdel { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; cursor: pointer; color: #8b7f6b; background: none; border: 1px solid rgba(217,178,111,.15); }
.tl-logdel svg { width: 14px; height: 14px; }
.tl-logdel:hover { color: #ff7a6b; border-color: #ff7a6b; }

.tl-modal { width: min(640px, calc(100vw - 32px)); }
.tl-form { display: grid; gap: 14px; }
.tl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.tl-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; max-height: 250px; overflow-y: auto; padding-right: 4px; }
.tl-pick button { display: grid; justify-items: center; gap: 6px; padding: 8px 4px; cursor: pointer; color: #a99d88; background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.12);
  font: 700 11px var(--f-display); text-transform: none; letter-spacing: 0; transition: all .2s; }
.tl-pick img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.tl-pick button.in { opacity: .45; }
.tl-pick button:hover, .tl-pick button.on { opacity: 1; color: #fff3d6; border-color: #e2bd78; background: rgba(200,29,51,.25); }
.tl-bres { display: grid; gap: 4px; }
.tl-bres button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 10px; cursor: pointer; text-align: left;
  color: #e8d9bb; background: rgba(255,255,255,.02); border: 1px solid rgba(217,178,111,.12); font: inherit; text-transform: none; letter-spacing: 0; }
.tl-bres img { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.tl-bres small { color: #7d7262; font-size: 11px; }
.tl-bres button:hover { border-color: #e2bd78; }
.tl-icons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -6px; }
.tl-icons label { position: relative; width: 52px; height: 52px; display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle, #241c16, #0a0909); border: 1px solid rgba(217,178,111,.15); }
.tl-icons input { position: absolute; opacity: 0; pointer-events: none; }
.tl-icons img { width: 40px; height: 40px; object-fit: contain; }
.tl-icons i { color: #6f6656; font-style: normal; }
.tl-icons label:has(input:checked) { border-color: #e2bd78; box-shadow: 0 0 14px rgba(226,189,120,.4); background: radial-gradient(circle, rgba(200,29,51,.35), #0a0909); }

@media (max-width: 1100px) {
  .tl-layout { grid-template-columns: 1fr; }
  .tl-side { position: static; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
  .tl-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .tl-hero { min-height: 0; }
  .tl-hero-in { padding-top: 46px; padding-bottom: 32px; }
  .tl-hero .up-asc-img { left: 78%; top: 30%; width: 420px; opacity: .45; }
  .tl-strip span { width: 38px; height: 38px; font-size: 17px; }
  .tl-grid { grid-template-columns: 1fr; }
  .tl-row { grid-template-columns: 58px minmax(0, 1fr); }
  .tl-plate b { font-size: 32px; }
  .tl-plate small { display: none; }
  .tl-items { grid-template-columns: 1fr; padding: 8px; gap: 6px; }
  .tl-ic { width: 36px; height: 36px; }
  .tl-in b { font-size: 14px; }
  .tl-search { flex-basis: 100%; }
  .tl-edform, .tl-2, .tl-logadd { grid-template-columns: 1fr; }
  .tl-editbar { top: calc(var(--hdr) + 6px); }
  .tl-eb-n { order: 3; flex-basis: 100%; }
}