/* ══════════════════════════════════════════════════════════════════
   AÇILIŞ — RÜTBE SAHNESİ (kapak)
   Kürsü verisi (leagueofgraphs) açılış ekranına taşındı. Amaç: sayfa
   açılır açılmaz "nerede duruyor" sorusu cevaplansın. Rank tipografisi
   kürsüdeki kartlardan DAHA BÜYÜK; arma, kademe ve yüzdelik ayrı
   ayrı vurgulanır ki göze ilk çarpan şey kademe olsun.

   Kaynak: assets/veri/lg-<oyuncu>.json — veri yoksa blok çizilmez.
   ══════════════════════════════════════════════════════════════════ */

.kap-rank{
  position:relative;margin-top:clamp(48px,7vh,96px);
  padding-top:clamp(34px,5vh,58px);border-top:1px solid var(--line);
  /* .arkana 3 sütunlu grid (sol | sahne | sağ). Bu blok dördüncü öge
     olarak ilk sütuna düşüyordu ve 416px'e sıkışıyordu → tam genişlik. */
  grid-column:1 / -1;
  width:100%;
}
.kap-rank[hidden]{display:none}

/* başlık şeridi */
.kap-rank__bas{
  display:flex;align-items:baseline;gap:clamp(12px,1.6vw,22px);flex-wrap:wrap;
  margin-bottom:clamp(24px,3.4vh,40px);
}
.kap-rank__baslik{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(15px,1.7vw,22px);letter-spacing:.08em;color:var(--ink);
}
.kap-rank__kaynak{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted-2);margin-left:auto;
}

/* ── iki rütbe kartı ────────────────────────────────────────────── */
.kap-rank__kartlar{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(18px,2.4vw,32px);
}

.kap-kart{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(24px,3vw,38px);
  border:1px solid var(--line);
  background:linear-gradient(165deg,var(--panel),color-mix(in srgb,var(--void-2) 42%,transparent));
  transition:border-color .7s var(--ease),transform .7s var(--ease),box-shadow .7s var(--ease);
}
/* kademeye göre renkli ışık — kartın kendi sıcaklığı olur */
.kap-kart::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(130% 90% at 8% -10%,
    color-mix(in srgb,var(--kk-renk,var(--gold)) 22%,transparent),transparent 58%);
}
/* üstte ince kademe şeridi */
.kap-kart::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--kk-renk,var(--gold)),transparent);
  opacity:.85;
}
.kap-kart:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--kk-renk,var(--gold)) 46%,transparent);
  box-shadow:0 22px 60px -28px color-mix(in srgb,var(--kk-renk,var(--gold)) 55%,transparent);
}

.kap-kart__ust{display:flex;align-items:flex-start;gap:clamp(14px,1.8vw,24px)}
/* arma: kartın kimliği — BÜYÜK ve parlak (önceki 58px küçük kalıyordu) */
.kap-kart__arma{
  width:clamp(76px,7.4vw,104px);height:clamp(76px,7.4vw,104px);flex:none;
  filter:drop-shadow(0 9px 30px color-mix(in srgb,var(--kk-renk,var(--gold)) 62%,transparent))
         drop-shadow(0 2px 7px rgba(0,0,0,.62));
  animation:kapArmaGir .9s var(--ease-out) both;
}
@keyframes kapArmaGir{
  from{opacity:0;transform:scale(.82) rotate(-7deg)}
  to{opacity:1;transform:none}
}
.kap-kart__ad{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(16px,1.6vw,21px);letter-spacing:.05em;color:var(--ink);line-height:1.15;
  white-space:nowrap;                  /* "TEKLİ SIRALI" bölünmez */
}
.kap-kart__alt{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted-2);margin-top:6px;line-height:1.45;
}
/* YAN TABLO DAR (290px) — alt başlık iki satıra kırılıyordu
   ("SOLOQUEUE · / DERECELİ TEK"). Punto ve harf aralığı düşürülüp
   tek satıra sabitlenir; ölçüm satırları da aynı şekilde korunur. */
.kap-ikili__yan .kap-kart__alt{
  font-size:8px;letter-spacing:.09em;white-space:nowrap;
}
.kap-ikili__yan .kap-kart__ad{font-size:clamp(14px,1.3vw,18px)}
/* ölçüm etiketi: "DÜNYA SIRASI" tek satırda kalsın */
.kap-ikili__yan .kap-kart__olcum dt{font-size:8.5px;letter-spacing:.11em}
.kap-ikili__yan .kap-kart__olcum dd{font-size:12.5px}
/* kademe tipografisi dar kartta taşmasın */
.kap-ikili__yan .kap-kart__derece{font-size:clamp(30px,min(5.4vw,17cqw),62px)}
/* LP TAŞMASI DÜZELTMESİ: "DIAMOND IV  96 LP" tek satırda 290px'e
   sığmıyordu (ölçüldü: 96 LP 3px dışarı taşıyordu). Yan kartta
   kademe satırı SARMALI yapılır — LP alt satıra iner, taşma biter.
   Böylece kademe de büyütülebilir (istem: "ikisini de büyült"). */
.kap-ikili__yan .kap-kart__kademe{
  flex-wrap:wrap;row-gap:2px;justify-content:flex-start;
}
.kap-ikili__yan .kap-kart__lp{
  font-size:clamp(14px,1.5vw,18px);
  flex-basis:100%;            /* LP daima kendi satırına iner */
}
.kap-ikili__yan .kap-kart__arma{width:clamp(44px,4.4vw,60px);height:clamp(44px,4.4vw,60px)}

/* ── KADEME — sayfanın en büyük tipografisi ─────────────────────── */
.kap-kart__kademe{
  display:flex;align-items:baseline;gap:clamp(8px,1vw,14px);
  flex-wrap:nowrap;            /* kademe + numara DAİMA tek satırda */
  margin-top:clamp(16px,2.2vh,26px);
  container-type:inline-size;
}
.kap-kart__derece{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  /* "CHALLENGER" (10 karakter) en uzunu; kart içi genişliğin ~%88'ini
     geçmeyecek şekilde ölçeklenir. Hem ekran (vw) hem kart (cqw)
     genişliğine bakılır — hangisi küçükse o kazanır. */
  font-size:clamp(32px,min(6.4vw,17cqw),84px);
  line-height:.9;letter-spacing:-.015em;
  color:var(--kk-renk,var(--gold-hi));
  text-shadow:0 0 40px color-mix(in srgb,var(--kk-renk,var(--gold)) 40%,transparent);
  white-space:nowrap;          /* "DIAMOND" bölünmez */
}
/* kademe içi rakam (IV / II) — harflerden ince ayrılır, DAİMA görünür */
.kap-kart__dereceNum{
  font-size:.44em;opacity:.72;letter-spacing:.06em;margin-left:.18em;
  vertical-align:baseline;
}
.kap-kart__lp{
  font-family:var(--font-mono);font-size:clamp(12px,1.2vw,15px);letter-spacing:.1em;
  color:var(--gold-hi);white-space:nowrap;
}
.kap-kart__lp b{font-weight:700;font-size:1.25em}

/* ── ölçümler ─────────────────────────────────────────────────────
   TEK SÜTUN: etiket solda, değer sağda — aynı satırda. İki sütunlu
   ızgarada her hücre ~88px kalıyordu ve "Dünya sırası" 2, "G / M"
   3 satıra kırılıyordu. Tek sütunda bazı satırlar 260px alır:
   etiket ve sayı hiç kırılmaz, punto da büyütülebilir. */
.kap-kart__olcum{
  display:grid;grid-template-columns:minmax(0,1fr);
  gap:0;margin-top:clamp(18px,2.4vh,26px);
  padding-top:clamp(12px,1.6vh,18px);border-top:1px solid var(--line-soft);
}
.kap-kart__olcum > div{
  display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid var(--line-soft);
}
.kap-kart__olcum > div:last-child{border-bottom:0}
.kap-kart__olcum dt{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);white-space:nowrap;flex:none;
}
.kap-kart__olcum dd{
  font-family:var(--font-mono);font-size:14px;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.kap-kart__olcum dd.is-vurgu{color:var(--kk-renk,var(--gold-hi));font-weight:700}

/* ── SEZON ZİRVELERİ şeridi ─────────────────────────────────────── */
.kap-rank__blokBaslik{
  font-family:var(--font-display);font-weight:700;text-transform:uppercase;
  font-size:clamp(13px,1.35vw,17px);letter-spacing:.09em;color:var(--ink);
  display:flex;align-items:center;gap:16px;
  margin:clamp(34px,4.6vh,54px) 0 clamp(16px,2.2vh,24px);
}
.kap-rank__blokBaslik::after{content:'';flex:1;height:1px;background:var(--line)}
.kap-rank__blokBaslik small{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;color:var(--muted-2);
  text-transform:uppercase;
}

.kap-rank__serit{
  display:grid;grid-auto-flow:column;grid-auto-columns:minmax(78px,1fr);
  gap:clamp(6px,1vw,12px);list-style:none;margin:0;padding:0;
}
/* dar ekranda yatay kaydırma */
@media (max-width:760px){
  .kap-rank__serit{grid-auto-flow:row;grid-template-columns:repeat(auto-fit,minmax(78px,1fr))}
}

.kap-sezon{
  position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:clamp(8px,1.1vh,12px);
  padding:clamp(14px,2.1vh,22px) clamp(6px,.7vw,10px);
  border:1px solid var(--line-soft);
  background:color-mix(in srgb,var(--void-2) 52%,transparent);
  min-height:clamp(112px,13vh,148px);
  transition:border-color .5s var(--ease),transform .5s var(--ease),background .5s var(--ease);
}
.kap-sezon:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb,var(--ks-renk,var(--gold)) 44%,transparent);
  background:color-mix(in srgb,var(--ks-renk,var(--gold)) 8%,transparent);
}
/* en son dilim = bugünkü kademe, işaretli */
.kap-sezon--son{
  border-color:color-mix(in srgb,var(--ks-renk,var(--gold)) 40%,transparent);
  background:color-mix(in srgb,var(--ks-renk,var(--gold)) 7%,transparent);
}
.kap-sezon--son::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--ks-renk,var(--gold));opacity:.9;
}
.kap-sezon__s{
  font-family:var(--font-mono);font-size:clamp(8.5px,.8vw,10px);letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);text-align:center;line-height:1.35;
}
/* arma BÜYÜK — sezon kutusunun ana görseli */
.kap-sezon__arma{
  width:clamp(38px,4vw,54px);height:clamp(38px,4vw,54px);
  filter:drop-shadow(0 4px 14px color-mix(in srgb,var(--ks-renk,var(--gold)) 55%,transparent));
}
.kap-sezon__k{
  font-family:var(--font-mono);font-size:clamp(8.5px,.82vw,10.5px);letter-spacing:.13em;
  text-transform:uppercase;color:var(--ks-renk,var(--ink));opacity:.92;
  text-align:center;
}

/* ── kademe yükselişi: ilk → son ───────────────────────────────── */
.kap-rank__yol{
  display:flex;align-items:center;gap:clamp(10px,1.4vw,18px);flex-wrap:wrap;
  margin-top:clamp(20px,2.6vh,30px);
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted-2);
}
.kap-rank__yol b{color:var(--muted);font-weight:400}
.kap-rank__ok{color:var(--gold);letter-spacing:0}

/* ══════════════════════════════════════════════════════════════════
   RÜTBE HALKA GÖSTERGESİ — ince halka + ortada tek sayı
   Referans: profil özetindeki "220 / %50,9" halkaları.
   ══════════════════════════════════════════════════════════════════ */
/* kazanma oranı eşik renkleri — global, çünkü inline style'da
   var(--hrk-yesil) olarak referans ediliyor (yerel tanım görünmez). */
:root{
  --hrk-yesil:#4fbf7a;
  --hrk-kirmizi:#e0806f;
}
.hrk{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  flex:none;
}
.hrk__sar{position:relative;display:grid;place-items:center;width:var(--hrk-boyut,132px);height:var(--hrk-boyut,132px)}
.hrk__svg{display:block;transform:rotate(-90deg)}   /* yay tepeden başlasın */
/* soluk iz: yayın kalanı */
.hrk__iz{stroke:color-mix(in srgb,var(--line) 85%,transparent)}
/* yay: kademe/win-rate renginde, yuvarlak uçlu */
.hrk__yay{
  stroke:var(--hrk-renk,var(--gold-hi));
  filter:drop-shadow(0 0 10px color-mix(in srgb,var(--hrk-renk,var(--gold)) 46%,transparent));
  transition:stroke .5s var(--ease);
}
.hrk__metin{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-weight:700;
  font-size:calc(var(--hrk-boyut,132px) * .235);
  line-height:1;color:var(--ink);letter-spacing:-.01em;
  font-variant-numeric:tabular-nums;
}
.hrk__etiket{
  font-family:var(--font-mono);font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted-2);text-align:center;
}
.hrk__alt{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;
  color:var(--hrk-renk,var(--gold-hi));text-align:center;
  font-variant-numeric:tabular-nums;
}

/* ══════════════════════════════════════════════════════════════════
   PROFİL SAYFASI UYARLAMASI (/summoner/...)
   .arkana açılış ekranı için tasarlandı: min-height:100vh + overflow:hidden.
   Profil sayfasında altına rütbe bloğu geldiği için bu kısıt kartların
   üstünü kırpıyordu. Burada yüksekliği içeriğe bırakılır.
   ══════════════════════════════════════════════════════════════════ */
/* "Verileri Güncelle" tuşu .pf içinde MUTLAK konumlanır (sağ üst
   köşe). Bunun için .pf konumlanmış olmalı; aksi hâlde tuş sayfanın
   en tepesine kaçar. (veri-guncelle.css ile birlikte çalışır.) */
/* pf__guncelle-konum */
.pf{position:relative}

.pf .arkana{
  min-height:0;
  overflow:visible;
  align-items:start;
  padding-bottom:0;
  /* Tek sütun: içeriği .kap-ikili kendi 3 sütunlu düzenine böler
     (rank | Qiyana | rank). .arkana'nın kendi 3 sütununa gerek yok. */
  grid-template-columns:minmax(0,1fr);
}
/* ══════════════════════════════════════════════════════════════════
   AÇILIŞ DÜZENİ: [rank+halkalar] [Qiyana] [rank+halkalar]
   Referans düzeni. Ortada Qiyana kartı en büyük öğe; iki yanında
   eşit genişlikte rütbe sütunları. Yan sütunlar kendi rank kartını
   ve altında iki halkayı taşır. 1080px altında alt alta düşer.
   ══════════════════════════════════════════════════════════════════ */
.kap-ikili{
  grid-column:1 / -1;
  width:100%;
  display:grid;
  /* ══ YAN TABLOLAR KÜÇÜLTÜLDÜ, ORTA SÜTUN GENİŞLETİLDİ ═══════════
     KULLANICI: "bu hale getirmek için sağdaki ve soldaki tabloları
     küçült ama eski kart sistemini geri getir" + kapak LOGO hizasında
     başlasın.

     ÖNCEKİ ÖLÇÜM: kolonlar 570 | 316 | 570 = 1484px. Yan tablolar çok
     genişti, orta sütun yelpazeye dar geliyordu (yan kartlar sığmıyor,
     panele değiyordu).

     YENİ: 290 | 862 | 290 + 2×21 = 1484.
       · yan tablo 290px → ölçüm satırları hâlâ tek satırda okunur
         (etiket ~100px + değer ~70px + boşluk = ~230px, 290 rahat)
       · orta sütun 862px → yelpaze bol yer bulur, yan kartlar
         orta kartın yanından görünür ve tablolara DEĞMEZ
     gap 21px: tablo ile kart arasında nefes payı. */
  /* ORTA SÜTUN ESNEK: sabit 862px verilince 1440px'te yan sütunlar
     108px'e düşüyor ve tablolar okunamıyordu (ölçüldü).
     Bunun yerine orta sütun "max 862px AMA yanlara en az 290px
     bırak" kuralıyla tanımlanır: `minmax(0,862px)` yerine
     `minmax(290px, 862px)` yan sütunlara, ortaya da `1fr` verilir —
     böylece ortaya ne kalırsa o kadar alır, ama 862px'i geçmez. */
  grid-template-columns:minmax(330px,1fr) minmax(0,862px) minmax(330px,1fr);
  gap:clamp(10px,1.5vw,21px);
  align-items:start;
}
.kap-ikili__orta{
  width:100%;display:flex;justify-content:center;min-width:0;
  /* Orta sütun artık 862px; Qiyana kartı 404×644 sabit.
     --ak .92 → 372×592. Kart büyütüldü çünkü yelpazenin
     yan kartlarına yer var ve referans görselde orta kart BÜYÜK. */
  --ak:.92;
}
.kap-ikili__orta .arkana__sar{width:calc(404px * var(--ak));height:calc(644px * var(--ak))}
.kap-ikili__yan{display:flex;flex-direction:column;gap:clamp(18px,2.6vh,30px);min-width:0}
/* sol sütun Qiyana'ya yaslanır (sağa hizalı), sağ sütun soldan hizalı */
.kap-ikili__yan#kap-sol{align-items:stretch}
.kap-ikili__yan#kap-sag{align-items:stretch}

/* sütun: rank kartı + altında halkalar */
.kap-sutun{display:flex;flex-direction:column;gap:clamp(16px,2.2vh,26px);min-width:0}
.kap-sutun .kap-kart{width:100%}
/* halkalar sütun içinde YAN YANA, ortalanmış.
   Boyut sütun genişliğine göre: iki halka + boşluk 300px'e sığmalı,
   bu yüzden cqw (kart genişliği) ölçüsü kullanılır. */
.kap-sutun .arkana__halkalar{
  display:flex;flex-wrap:nowrap;gap:clamp(10px,1.2vw,18px);
  justify-content:center;align-items:flex-start;
  margin-top:0;padding-top:0;border-top:0;
  position:static;
  --hrk-boyut:clamp(96px,8.4vw,124px);
}
.kap-sutun .arkana__halkalar .hrk{flex:0 1 auto;min-width:0}
.kap-sutun .arkana__halkalar .hrk__metin{font-size:calc(var(--hrk-boyut,112px) * .245)}
.kap-sutun .arkana__halkalar .hrk__etiket{
  font-size:8.5px;letter-spacing:.14em;white-space:nowrap;
}
.kap-sutun .arkana__halkalar .hrk__alt{font-size:9px;letter-spacing:.08em}

/* dar ekran: alt alta — Qiyana ortada, sütunlar üst/alt */
@media (max-width:1080px){
  .kap-ikili{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vh,40px);justify-items:center}

  .kap-ikili__yan{width:100%;max-width:520px}
  .kap-ikili__orta{--ak:1;order:-1}             /* Qiyana EN ÜSTTE */
}
/* mobil: ölçüm etiketleri sıkışmasın — tek sütun, tam genişlik.
   Qiyana kartı 404px sabit; 620px altında ekrana sığdırmak için
   --ak ölçeği düşürülür (kart 404×ak genişliğinde çizilir). */
@media (max-width:620px){
  .kap-ikili__orta{--ak:.86}
  .kap-kart__olcum{grid-template-columns:minmax(0,1fr)}
  .kap-kart__olcum > div{padding:7px 0}
  .kap-kart__ust{gap:14px}
  .kap-sutun .arkana__halkalar{--hrk-boyut:clamp(88px,24vw,120px);gap:14px}
  .kap-sutun .arkana__halkalar .hrk__alt{font-size:8.5px}
}
/* ── SEZON ZİRVELERİ — 8 eşit kutu, tek sıra ─────────────────────
   Referans: koyu zemin, üstte sezon kodu, ortada arma, altta kademe.
   Başlık yok; rank sütunlarının hemen altında başlar. */
.kap-rank--tam{
  grid-column:1 / -1;
  width:100%;
  /* rank sütunlarının hemen altı — referanstaki gibi az boşluk */
  margin-top:clamp(20px,2.8vh,34px);
  padding-top:0;
  border-top:0;
}
.kap-rank__serit{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(0,1fr);      /* 8 eşit sütun */
  gap:clamp(7px,.9vw,13px);
  list-style:none;margin:0;padding:0;
}

/* ── SIRALAMA: bilgi SOLA, Qiyana SAĞA ────────────────────────────
   .arkana grid'i [sol][sahne][sağ]. Profil sayfasında içerik yer
   değiştirir: .arkana__sag (rütbe kartları + halkalar) 1. sütuna,
   .arkana__sahne (Qiyana) 2. sütuna geçer.
   GENİŞ EKRANDA geçerli; 1000px altında tek sütuna düşer (aşağıda). */
@media (min-width:1001px){
  .pf .arkana__sag{grid-column:1;grid-row:1;justify-self:stretch}
  .pf .arkana__sahne{grid-column:2;grid-row:1}
}
/* dar ekran: alt alta, kart ÜSTTE (açılış ekranı mantığı) */
@media (max-width:1000px){
  .pf .arkana{grid-template-columns:minmax(0,1fr);justify-items:center;gap:30px}
  .pf .arkana__sahne{grid-column:1;grid-row:1}
  .pf .arkana__sag{grid-column:1;grid-row:2;width:100%;justify-self:stretch}
  /* dar ekranda halkalar YAN YANA */
  #arkana .arkana__halkalar{flex-direction:row;justify-content:center;height:auto}
}

/* ── HALKALAR: oynanan maç + kazanma oranı ────────────────────────
   Açılış sayfasında varsayılan; profil sayfasında #arkana kuralı
   (yukarıda) geçersiz kılar. */
.arkana__halkalar{
  display:flex;flex-wrap:wrap;gap:clamp(18px,2.6vw,40px);
  justify-content:flex-start;
}

/* ── SEZON / RÜTBE KAPLARI — tam genişlik, ardışık ──────────────── */
.pf .arkana .kap-rank{grid-column:1 / -1}
#kapak-sezon{margin-top:clamp(28px,4vh,50px)}
/* profil sayfasında kartlar biraz küçülsün — açılış kadar yer yok */
.pf .kap-kart__derece{font-size:clamp(28px,min(5vw,14cqw),64px)}
.pf .kap-kart__arma{width:clamp(48px,5vw,68px);height:clamp(48px,5vw,68px)}