/* Hidden King mi Archmother mı? (taraf.html): ikiye bölünmüş patron sahnesi, terazi, iki yana açılan çubuklar */
.tr-sahne { position: relative; overflow: hidden; border-bottom: 1px solid var(--cizgi); background: #050505; }
.tr-zemin { position: absolute; top: 0; bottom: 0; width: 58%; background-size: cover; background-position: center 30%; }
.tr-zemin.sol { left: 0; clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); filter: saturate(1.1); }
.tr-zemin.sag { right: 0; clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); }
html.hareket .tr-zemin.sol { animation: trSol 1.4s cubic-bezier(.2, .7, .2, 1) backwards; }
html.hareket .tr-zemin.sag { animation: trSag 1.4s cubic-bezier(.2, .7, .2, 1) backwards; }
@keyframes trSol { from { opacity: 0; transform: translateX(-6%); } }
@keyframes trSag { from { opacity: 0; transform: translateX(6%); } }
.tr-sahne::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 60% 70% at 50% 55%, rgba(7, 7, 7, .88), rgba(7, 7, 7, .55) 60%, rgba(7, 7, 7, .25)),
    linear-gradient(0deg, var(--zemin), transparent 40%), linear-gradient(90deg, rgba(255, 172, 17, .14), transparent 30%, transparent 70%, rgba(106, 166, 255, .16)); }
.tr-sahne-ic { position: relative; z-index: 2; display: grid; justify-items: center; gap: 14px; padding: 56px 0 44px; text-align: center; }
.tr-sahne-ic h1 { font-size: clamp(36px, 5vw, 66px); }
/* Başlık: ana sayfadaki patron logoları (oyunun HUD logoları), aralarında "vs"; okunan metin "Hidden King mi Archmother mı?" */
.tr-baslik { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px clamp(16px, 3vw, 34px); margin: 4px 0 2px; }
.tr-gizli { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tr-baslik .patron-logo { display: block; height: clamp(34px, 5.2vw, 64px); background: var(--kehribar); -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat;
  filter: drop-shadow(0 0 16px rgba(255, 172, 17, .45)); }
.tr-baslik .patron-logo.hk { --m: url("oyun/patron/hiddenking-logo.svg"); aspect-ratio: 1280 / 191; }
.tr-baslik .patron-logo.am { --m: url("oyun/patron/archmother-logo.svg"); aspect-ratio: 1373 / 254; height: clamp(40px, 6.2vw, 76px); background: var(--safir); filter: drop-shadow(0 0 16px rgba(106, 166, 255, .5)); }
.tr-vs::before { content: "vs"; font: 700 clamp(18px, 2.2vw, 26px)/1 var(--f-baslik); letter-spacing: .06em; text-transform: uppercase; color: var(--krem-3); }
@media (max-width: 560px) { .tr-baslik { flex-direction: column; gap: 6px; } .tr-baslik .patron-logo { height: 40px; } .tr-baslik .patron-logo.am { height: 46px; } }
.tr-alt { margin: 0; max-width: 560px; color: var(--krem-2); font-size: 17px; }
html.hareket .tr-sahne-ic > * { animation: belir .7s cubic-bezier(.2, .7, .2, 1) backwards; }
html.hareket .tr-sahne-ic > :nth-child(2) { animation-delay: .06s; }
html.hareket .tr-sahne-ic > :nth-child(3) { animation-delay: .12s; }
html.hareket .tr-sahne-ic > :nth-child(4) { animation-delay: .2s; }

.tr-terazi { --k: 50%; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 24px; width: min(760px, 100%); margin-top: 10px; }
.tr-taraf { display: grid; gap: 4px; }
.tr-taraf.kehribar { justify-items: start; text-align: left; }
.tr-taraf.safir { justify-items: end; text-align: right; }
.tr-taraf small { font: 600 12.5px/1 var(--f-arayuz); letter-spacing: .12em; text-transform: uppercase; }
.tr-taraf.kehribar small { color: var(--kehribar); }
.tr-taraf.safir small { color: var(--safir); }
.tr-taraf b { font: 700 clamp(40px, 6vw, 72px)/1 var(--f-baslik); font-variant-numeric: tabular-nums; text-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
.tr-taraf.kehribar b { color: #ffd27a; }
.tr-taraf.safir b { color: #b8d3ff; }
.tr-cubuk { grid-column: 1 / -1; position: relative; display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: rgba(247, 233, 213, .08); box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 8px 30px rgba(0, 0, 0, .5); }
.tr-cubuk i { display: block; height: 100%; }
.tr-cubuk .k { width: var(--k); background: linear-gradient(90deg, #b86c00, var(--kehribar)); }
.tr-cubuk .s { flex: 1; background: linear-gradient(90deg, var(--safir), #2f5fbf); }
.tr-cubuk em { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--krem); box-shadow: 0 0 10px rgba(247, 233, 213, .8); }
html.hareket .tr-terazi:not(.doldu) .tr-cubuk .k { width: 50%; }
html.hareket .tr-cubuk .k { transition: width 1.3s cubic-bezier(.2, .8, .2, 1); }
.tr-hukum { grid-column: 1 / -1; display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 0; font: 500 15px/1.45 var(--f-arayuz); color: var(--krem-2); }
.tr-hukum b { color: var(--krem); }
.tr-hukum svg { width: 18px; height: 18px; color: var(--sari); }

/* özet kartları */
.tr-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 28px; }
.tr-ozet-kart { display: grid; align-content: start; gap: 10px; padding: 18px 20px; }
.tr-ozet-sayi { display: flex; align-items: baseline; gap: 10px; }
.tr-ozet-sayi b { font: 700 30px/1 var(--f-baslik); font-variant-numeric: tabular-nums; }
.tr-ozet-sayi b.k, .tr-t.k, .tr-deger.k.onde, .tr-kh em.k { color: var(--kehribar); }
.tr-ozet-sayi b.s, .tr-t.s, .tr-deger.s.onde, .tr-kh em.s { color: var(--safir); }
.tr-ozet-sayi span { color: var(--krem-3); }
.tr-ozet-kart p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--krem-2); }

/* iki yana açılan çubuk listeleri */
.tr-bolum .bolum-bas { margin-bottom: 18px; }
.tr-liste { display: flex; flex-direction: column; padding: 8px 18px 12px; }
.tr-liste-bas, .tr-satir { display: grid; grid-template-columns: 170px 64px minmax(0, 1fr) 64px 84px; gap: 12px; align-items: center; }
.tr-liste-bas { padding: 8px 0 10px; border-bottom: 1px solid var(--cizgi); font: 600 11px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
.tr-liste-bas .k { color: var(--kehribar); text-align: right; }
.tr-liste-bas .s { color: var(--safir); }
.tr-eksen { display: flex; justify-content: space-between; letter-spacing: .04em; }
.tr-eksen i { font-style: normal; }
.tr-satir { flex: 1; min-height: 44px; padding: 6px 0; border-bottom: 1px solid var(--cizgi); }
.tr-satir:last-of-type { border-bottom: 0; }
.tr-satir-bas { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 600 14px/1.2 var(--f-arayuz); }
.tr-rutbe-ad { display: inline-flex; align-items: center; gap: 8px; }
.tr-rutbe-ad img { width: 34px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); }
.tr-deger { font: 700 14px/1 var(--f-arayuz); font-variant-numeric: tabular-nums; color: var(--krem-3); }
.tr-deger.k { text-align: right; }
.tr-mac { font: 500 12.5px/1 var(--f-arayuz); color: var(--krem-3); text-align: right; white-space: nowrap; }
.tr-iki { position: relative; height: 14px; border-radius: 4px; background: rgba(247, 233, 213, .05); cursor: help; }
.tr-iki i { position: absolute; top: 0; bottom: 0; display: block; }
.tr-orta { left: 50%; width: 2px; margin-left: -1px; background: rgba(247, 233, 213, .45); z-index: 2; }
.tr-ga { left: calc(50% - var(--ga)); width: calc(2 * var(--ga)); background: rgba(247, 233, 213, .1); border-radius: 3px; }
.tr-dolu { width: var(--w); border-radius: 3px; transform-origin: right; }
.tr-dolu.k { right: 50%; background: linear-gradient(270deg, #ffcf6b, #c77a06); }
.tr-dolu.s { left: 50%; background: linear-gradient(90deg, #a9c9ff, #2f63c9); transform-origin: left; }
.tr-satir:not(.anlamli) .tr-dolu { opacity: .45; }
html.hareket .gorundu .tr-dolu { animation: uzan .9s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(.15s + var(--i, 0) * 45ms); }
.tr-dip { display: flex; gap: 8px; align-items: center; margin: 10px 0 0; font-size: 13px; color: var(--krem-3); }
.tr-dip svg { width: 15px; height: 15px; }

/* süre ve gün listeleri yan yana: başlıklar ve kartlar aynı satırı paylaşır (alt kenarlar eşit) */
.tr-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; gap: 0 20px; }
.tr-ikili-sutun { display: grid; grid-row: span 2; grid-template-rows: subgrid; min-width: 0; }
.tr-ikili .tr-liste-bas, .tr-ikili .tr-satir { grid-template-columns: 116px 56px minmax(0, 1fr) 56px 70px; gap: 10px; }

/* kahraman kartları */
.tr-kh-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.tr-kh-kart { padding: 16px 18px; }
.tr-kh-kart.kehribar { box-shadow: inset 0 3px 0 var(--kehribar); }
.tr-kh-kart.safir { box-shadow: inset 0 3px 0 var(--safir); }
.tr-kh-bas { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tr-kh-bas b { font: 700 18px/1 var(--f-baslik); text-transform: uppercase; }
.tr-kh-bas small { margin-left: auto; font: 600 12px/1 var(--f-arayuz); letter-spacing: .1em; text-transform: uppercase; color: var(--krem-3); }
.tr-patron { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 8px; }
.kehribar .tr-patron { background: var(--kehribar-z); color: var(--kehribar); }
.safir .tr-patron { background: var(--safir-z); color: var(--safir); }
.tr-patron svg { width: 18px; height: 18px; }
.tr-kh-liste { display: grid; }
.tr-kh { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto 92px; gap: 12px; align-items: center; padding: 8px 6px; border-top: 1px solid var(--cizgi); border-radius: 6px; transition: background .15s; }
.tr-kh:first-child { border-top: 0; }
.tr-kh:hover { background: rgba(247, 233, 213, .04); }
.tr-kh img { width: 40px; height: 40px; border-radius: 8px; object-fit: cover; object-position: 50% 12%; background: var(--kart-3); }
.tr-kh-ad { display: grid; gap: 3px; min-width: 0; }
.tr-kh-ad b { font: 600 14.5px/1.15 var(--f-arayuz); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tr-kh-ad small { font: 500 12px/1 var(--f-arayuz); color: var(--krem-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-kh em { font: 700 14px/1 var(--f-arayuz); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-kh:not(.anlamli) em { opacity: .7; }
.tr-kh .rozet { justify-self: end; }
.rozet.tr-rk { background: var(--kehribar-z); color: var(--kehribar); }
.rozet.tr-rs { background: var(--safir-z); color: var(--safir); }
.rozet.tr-sans { background: rgba(247, 233, 213, .05); color: var(--krem-3); }
.tr-tumu { display: flex; justify-content: center; margin-top: 16px; }
#tr-tablo { margin-top: 16px; }
#tr-tablo[hidden] { display: none; }
.tr-t { font-weight: 700; }

@media (max-width: 1000px) {
  .tr-ozet { grid-template-columns: minmax(0, 1fr); }
  .tr-ikili { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; gap: 40px; }
  .tr-ikili-sutun { grid-row: auto; grid-template-rows: none; }
  .tr-kh-izgara { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .tr-sahne-ic { padding: 40px 0 32px; }
  .tr-zemin { width: 70%; }
  .tr-liste { padding: 6px 12px 10px; }
  .tr-liste-bas, .tr-satir, .tr-ikili .tr-liste-bas, .tr-ikili .tr-satir { grid-template-columns: minmax(0, 1fr) 54px 54px; gap: 6px 10px; }
  .tr-satir .tr-iki { grid-column: 1 / -1; grid-row: 2; }
  .tr-satir .tr-mac, .tr-liste-bas > span:last-child, .tr-liste-bas .tr-eksen { display: none; }
  .tr-satir .tr-deger.k { grid-column: 2; grid-row: 1; }
  .tr-satir .tr-deger.s { grid-column: 3; grid-row: 1; text-align: right; }
  .tr-liste-bas .s { text-align: right; }
  .tr-kh { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .tr-kh .rozet { display: none; }
  .tr-taraf b { font-size: 38px; }
}