/* ============================================================
   META SAYFASI + OYUNCU ARAMA SAYFASI — assets/css/meta.css
   Tasarım dili main.css'ten gelir: aynı tokenlar, aynı altın/turkuaz
   ölçü dili, aynı üç yazı tipi. Burada HİÇBİR token yeniden
   tanımlanmaz; yalnızca yeni bileşenler eklenir.
   ============================================================ */

/* ══════════ M1. META · HERO ══════════ */
.mg-hero{
  padding:clamp(46px,7vw,92px) var(--gut) clamp(30px,4vw,52px);
  max-width:var(--kap);margin:0 auto;position:relative;
}
.mg-hero__ust{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:18px;
}
.mg-hero__ust b{color:var(--gold);font-weight:400}
.mg-hero__h{
  font-family:var(--font-display);
  font-size:clamp(34px,6.4vw,86px);line-height:.98;letter-spacing:-.01em;
  color:var(--ink);margin-bottom:20px;font-weight:400;
}
.mg-hero__h i{
  font-family:var(--font-editorial);font-style:italic;font-weight:400;
  color:transparent;-webkit-text-stroke:1px var(--gold);
}
.mg-hero__a{
  max-width:62ch;color:var(--govde);font-size:clamp(14px,1.15vw,16.5px);
  line-height:1.72;
}
.mg-hero__a b{color:var(--gold);font-weight:400}
.mg-hero__taze{
  margin-top:20px;font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted-2);
}
.mg-hero__taze--uyari{color:var(--crimson)}
[data-theme="light"] .mg-hero__taze--uyari{color:var(--crimson)}

/* ══════════ M2. BÖLÜM KABUĞU ══════════ */
.mg-bolum{
  max-width:var(--kap);margin:0 auto;
  padding:clamp(30px,4vw,56px) var(--gut);border-top:1px solid var(--line-soft);
}
.mg-bolum__bas{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;
  margin-bottom:clamp(20px,2.6vw,34px);
}
.mg-bolum__bas h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(20px,2.3vw,30px);color:var(--ink);letter-spacing:.01em;
}
.mg-bolum__bas p{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}
.mg-bolum__bas p b{color:var(--gold);font-weight:400}

/* ══════════ M3. ÖNE ÇIKAN KARTLARI ══════════ */
.mg-kart-sira{
  display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.mg-kart{
  position:relative;overflow:hidden;isolation:isolate;
  border:1px solid var(--line);background:var(--panel-solid);
  min-height:190px;display:flex;flex-direction:column;justify-content:flex-end;
  transition:transform .45s var(--ease),border-color .45s var(--ease);
}
.mg-kart:hover{border-color:color-mix(in srgb,var(--gold) 45%,transparent);transform:translateY(-4px)}
.mg-kart__gorsel{position:absolute;inset:0;z-index:0;overflow:hidden;display:block}
.mg-kart__gorsel img{
  width:100%;height:100%;object-fit:cover;object-position:50% 22%;
  filter:saturate(.72) contrast(1.06) brightness(.58);
  transition:transform .8s var(--ease),filter .5s var(--ease);
}
.mg-kart:hover .mg-kart__gorsel img{transform:scale(1.07);filter:saturate(.95) contrast(1.1) brightness(.7)}
.mg-kart::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(5,8,13,.15) 0%,rgba(5,8,13,.66) 52%,rgba(5,8,13,.95) 100%);
}
[data-theme="light"] .mg-kart::after{
  background:linear-gradient(180deg,rgba(244,239,228,.10) 0%,rgba(244,239,228,.70) 52%,rgba(244,239,228,.96) 100%);
}
.mg-kart__ic{position:relative;z-index:2;padding:clamp(15px,1.7vw,20px);display:block}
.mg-kart__etiket{
  font-size:9.5px;letter-spacing:.19em;text-transform:uppercase;
  color:var(--gold);margin-bottom:7px;
}
.mg-kart__ad{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,2vw,25px);color:var(--ink);line-height:1.05;margin-bottom:5px;
}
.mg-kart__deger{
  font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;color:var(--govde-2);
}

/* ══════════ M4. ŞAMPİYON TABLOLARI ══════════ */
.mg-izgara{
  display:grid;gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(370px,1fr));
}
.mg-izgara--tek{grid-template-columns:minmax(0,760px)}
.mg-tablo{border:1px solid var(--line);background:var(--void-2)}
.mg-tablo__bas{
  padding:clamp(15px,1.6vw,20px) clamp(14px,1.5vw,18px);
  border-bottom:1px solid var(--line-soft);
  display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;
}
.mg-tablo__bas h3{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(16px,1.7vw,20px);color:var(--ink);
}
.mg-tablo__alt{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--muted-2);
}

.mg-liste{list-style:none;margin:0;padding:0}
.mg-satir{
  display:grid;align-items:center;gap:10px;
  grid-template-columns:26px minmax(0,1fr) auto 22px;
  padding:9px clamp(14px,1.5vw,18px);
  border-bottom:1px solid var(--line-soft);
  transition:background .3s var(--ease);
}
.mg-satir:last-child{border-bottom:0}
.mg-satir:hover{background:color-mix(in srgb,var(--gold) 5%,transparent)}
.mg-satir__no{
  font-size:11px;color:var(--gold-deep);text-align:right;
}
[data-theme="light"] .mg-satir__no{color:var(--gold)}
.mg-satir__kim{
  display:flex;align-items:center;gap:11px;min-width:0;
}
.mg-gorsel{
  width:34px;height:34px;flex:none;position:relative;overflow:hidden;
  border:1px solid var(--line);background:var(--void-3);display:block;
}
.mg-gorsel img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.mg-gorsel--kucuk{width:26px;height:26px}
.mg-gorsel__harf{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-size:15px;color:var(--gold);font-weight:400;
}
.mg-satir__yazi{display:flex;flex-direction:column;min-width:0}
.mg-satir__ad{
  font-size:13.5px;color:var(--ink);font-weight:400;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.mg-satir__slug{
  font-size:9px;letter-spacing:.1em;color:var(--muted-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.mg-cubuk{
  flex:1;min-width:26px;height:3px;display:block;
  background:var(--line-soft);position:relative;overflow:hidden;
}
.mg-cubuk__ic{
  position:absolute;left:0;top:0;bottom:0;display:block;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold));
}
.mg-satir__deger{
  font-size:12.5px;color:var(--gold-hi);letter-spacing:.04em;white-space:nowrap;
}
[data-theme="light"] .mg-satir__deger{color:var(--gold)}
.mg-deger--art{color:var(--teal)}
[data-theme="light"] .mg-deger--art{color:var(--teal-deep)}
.mg-deger--eks{color:var(--crimson)}
.mg-satir__dis{
  color:var(--muted-2);display:flex;align-items:center;justify-content:center;
  transition:color .3s var(--ease);
}
.mg-satir__dis:hover{color:var(--gold)}

/* arena üçlüleri */
.mg-uclu{display:flex;flex:none}
.mg-uclu .mg-gorsel{margin-left:-9px}
.mg-uclu .mg-gorsel:first-child{margin-left:0}
.mg-satir--arena .mg-satir__kim{gap:13px}

/* ══════════ M5. OYUNCU ARAMA ÇAĞRISI ══════════ */
.mg-cagri{
  max-width:var(--kap);margin:0 auto;padding:0 var(--gut) clamp(40px,6vw,76px);
}
.mg-cagri__ic{
  border:1px solid var(--line);background:var(--panel);
  padding:clamp(28px,4vw,58px);position:relative;overflow:hidden;
}
.mg-cagri__ic::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(120% 90% at 88% 12%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 62%);
}
.mg-cagri__ust{
  position:relative;z-index:1;font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);margin-bottom:14px;
}
.mg-cagri__h{
  position:relative;z-index:1;font-family:var(--font-display);font-weight:400;
  font-size:clamp(23px,3.4vw,44px);color:var(--ink);line-height:1.06;margin-bottom:14px;
}
.mg-cagri__a{
  position:relative;z-index:1;max-width:60ch;color:var(--govde);line-height:1.7;
  margin-bottom:26px;
}
.mg-cagri__a b{color:var(--gold);font-weight:400}
.mg-cagri__a code{
  font-family:var(--font-mono);font-size:.9em;color:var(--gold-hi);
  border:1px solid var(--line);padding:1px 7px;
}
.dugme--buyuk{padding:14px 26px;font-size:12px}

/* ══════════ A1. ARAMA SAYFASI ══════════ */
.ara-hero{
  padding:clamp(44px,6.4vw,86px) var(--gut) clamp(26px,3.4vw,44px);
  max-width:960px;margin:0 auto;
}
.ara-hero__ust{
  font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted-2);margin-bottom:16px;
}
.ara-hero__h{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(30px,5.4vw,66px);line-height:1;color:var(--ink);margin-bottom:16px;
}
.ara-hero__a{max-width:58ch;color:var(--govde);line-height:1.7;margin-bottom:30px}
.ara-hero__a b{color:var(--gold);font-weight:400}

.ara--buyuk{max-width:640px;margin:0 auto}
.ara--buyuk .ara__satir{border-color:color-mix(in srgb,var(--gold) 30%,transparent)}
.ara--buyuk .ara__girdi{font-size:15px;padding:16px 12px}

.ara-bolum{
  max-width:960px;margin:0 auto;
  padding:clamp(24px,3vw,42px) var(--gut) clamp(40px,6vw,70px);
  border-top:1px solid var(--line-soft);
}
.ara-bolum__bas{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin-bottom:22px;
}
.ara-bolum__bas h2{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(19px,2.1vw,27px);color:var(--ink);
}
.ara-bolum__bas p{
  font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted-2);
}
.ara-dizin{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.ara-kart{
  display:flex;align-items:center;gap:16px;background:var(--void-2);
  padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,24px);
  transition:background .3s var(--ease);
}
.ara-kart:hover{background:var(--void-3)}
.ara-kart__amblem{
  width:42px;height:42px;flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid var(--gold);font-family:var(--font-display);
  font-size:19px;color:var(--gold);font-weight:400;
}
.ara-kart__ic{display:flex;flex-direction:column;flex:1;min-width:0}
.ara-kart__ad{font-size:14.5px;color:var(--ink);font-weight:400}
.ara-kart__alt{
  font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:3px;
  overflow:hidden;text-overflow:ellipsis;
}
.ara-kart__ok{
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);flex:none;transition:color .18s ease;
}
/* Örnek oyuncu kartları — kayıtlı dosya kartıyla AYNI iskelet, ama
   sol kenarında ince bir altın şerit taşır: bunlar defterde kayıtlı
   dosyalar değil, Riot API'den getirilen gerçek oyuncular. */
.ornek-kart{
  display:flex;align-items:center;gap:14px;padding:13px 15px;text-decoration:none;
  border:1px solid var(--line);border-left:2px solid color-mix(in srgb,var(--gold) 55%,transparent);
  background:var(--panel);transition:background .18s ease,border-color .18s ease;
}
.ornek-kart:hover{background:var(--void-3);border-left-color:var(--gold)}
.ornek-kart .ara-kart__amblem{flex:none}
[data-theme="light"] .ara-kart__ok{color:var(--gold)}
.ara-kart:hover .ara-kart__ok{color:var(--gold-hi)}
.ara-bos{
  max-width:960px;margin:0 auto;padding:0 var(--gut) clamp(40px,6vw,70px);
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted-2);
}

/* ══════════ D1. DAR EKRAN ══════════ */
@media (max-width:880px){
  .mg-izgara{grid-template-columns:minmax(0,1fr)}
  .mg-kart-sira{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
  .mg-satir{grid-template-columns:22px minmax(0,1fr) auto}
  .mg-satir__dis{display:none}
  .mg-cubuk{display:none}
}
@media (max-width:520px){
  .mg-kart-sila,.mg-kart-sira{grid-template-columns:minmax(0,1fr)}
  .mg-hero__h{font-size:clamp(30px,9vw,48px)}
  .mg-satir__slug{display:none}
}

@media (prefers-reduced-motion:reduce){
  .mg-kart,.mg-kart__gorsel img,.mg-satir,.ara-kart{transition:none}
  .mg-kart:hover{transform:none}
}