/* ==========================================================================
   NEVADA MODS — ÜYELİK KARTLARI (v14.21 — "gerçek metal kart" revizyonu)
   --------------------------------------------------------------------------
   Tasarım niyeti: kart bir ürün fotoğrafı gibi dursun — çekilmiş, ışığı
   ayarlanmış, elde tutulan fiziksel bir nesne. Ekran öğesi gibi değil.

   Fiziksel his BEŞ katmanın üst üste binmesinden gelir (arkadan öne):
     1. METAL ZEMİN     — çok duraklı yönlü gradyan (düz renk asla metal
                           gibi durmaz; ışığın kartın üstünde nasıl kırıldığı
                           taklit edilir)
     2. FIRÇALANMIŞ DOKU — çok ince, çapraz tekrar eden çizgiler (gerçek
                           metal kartların yüzeyindeki fırça izi)
     3. HOLOGRAM ŞERİDİ  — güvenlik folyosu hissi veren, köşegen, çok-tonlu
                           ince bir bant (gerçek premium kartlardaki holografik
                           etiketin sakin/zevkli bir yorumu)
     4. GUILLOCHE + VINYETTE — banknot dokusu + kenarlara doğru hafif
                           kararma (stüdyoda fotoğraflanmış gibi derinlik)
     5. PARLAMA          — fareyle eğilme sırasında imleci takip eden,
                           camsı/sıvı-metal bir ışık noktası + şerit

   Renk kartın kendi --ca/--cb/--cink değişkenlerinden gelir; şablon inline
   basar, böylece yeni bir seviye eklemek CSS değil sadece VERİ işi olur.
   Free kart `.mc--free` ile bilinçli olarak sade/mat bırakılır — hiyerarşi
   renkten önce DOKUdan okunmalı (ücretsiz kart lüks görünmemeli).
   ========================================================================== */

.mc-wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(16px,4vw,60px); }

/* ---------- KART ---------- */
.mc{
  position:relative; aspect-ratio:1.586/1;      /* gerçek kart oranı (ISO/IEC 7810) */
  border-radius:18px; overflow:hidden; isolation:isolate;

  /* 5 katman, ARKADAN ÖNE: vinyet -> hologram şeridi -> fırça dokusu -> metal zemin.
     background-blend-mode listesi AYNI SIRADA eşleşir. */
  background:
    radial-gradient(130% 130% at 48% 12%, transparent 52%, rgba(0,0,0,.24) 100%),
    linear-gradient(114deg,
      transparent 56%, rgba(255,255,255,.09) 60%, rgba(148,205,255,.22) 63%,
      rgba(255,255,255,.16) 66%, rgba(255,214,140,.20) 69%,
      rgba(200,166,255,.16) 72%, transparent 76%),
    repeating-linear-gradient(113deg,
      rgba(255,255,255,.055) 0 1px, rgba(0,0,0,.035) 1px 2px, transparent 2px 3.4px),
    linear-gradient(135deg,
      var(--cb) 0%, var(--ca) 26%, #ffffff22 42%,
      var(--ca) 56%, var(--cb) 78%, var(--ca) 100%);
  background-blend-mode: normal, overlay, overlay, normal;

  box-shadow:
    0 2px 4px rgba(0,0,0,.28),
    0 20px 48px rgba(0,0,0,.46),
    inset 0 1px 0 rgba(255,255,255,.36),
    inset 0 -1px 0 rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.05);   /* çok ince iç kenar — "dövülmüş metal" beveli */
  color:var(--cink);
  transform-style:preserve-3d;
  transition:transform .55s var(--ease-cine,cubic-bezier(.2,.7,.2,1)),
             box-shadow .55s var(--ease-cine,cubic-bezier(.2,.7,.2,1));
  will-change:transform;
}

/* guilloche dokusu — para/kart baskısı hissi (ince, çift katmanlı) */
.mc::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  opacity:.15; mix-blend-mode:overlay;
  background:
    repeating-conic-gradient(from 0deg at 30% 42%,
      rgba(255,255,255,.9) 0deg 1.1deg, transparent 1.1deg 3.2deg),
    repeating-conic-gradient(from 22deg at 84% 78%,
      rgba(255,255,255,.55) 0deg .8deg, transparent .8deg 3.6deg),
    repeating-linear-gradient(58deg,
      rgba(255,255,255,.5) 0 1px, transparent 1px 7px);
}

/* parlama — tilt sırasında JS'in yazdığı --mx/--my ile kayar. İki katman:
   imleci tam takip eden yuvarlak bir "cam" refleksiyon + çapraz genel şerit. */
.mc::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    radial-gradient(340px circle at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.55), rgba(255,255,255,.14) 40%, transparent 66%),
    linear-gradient(105deg,
      transparent 38%, rgba(255,255,255,.38) 47%,
      rgba(255,255,255,.66) 50%, rgba(255,255,255,.38) 53%, transparent 62%);
  background-position: 0 0, calc(var(--mx,50%) - 50% + 50%) calc(var(--my,50%) - 50% + 50%);
  opacity:0; transition:opacity .45s ease;
}
.mc:hover::after{ opacity:.9; }
.mc:hover{
  box-shadow:
    0 4px 10px rgba(0,0,0,.32), 0 36px 84px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.42), inset 0 -1px 0 rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.08);
}

/* ---------- FREE KART: bilinçli olarak MAT ----------
   Aynı yapı, ama hologram/fırça/parlama bastırılır ve gölge sığlaşır —
   göz "bu temel seviye" mesajını renk okumadan, DOKUDAN alır. */
.mc--free{ box-shadow:0 2px 4px rgba(0,0,0,.22), 0 12px 28px rgba(0,0,0,.32),
  inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.24); }
.mc--free::before{ opacity:.08; }
.mc--free:hover::after{ opacity:.4; }
.mc--free:hover{ box-shadow:0 3px 6px rgba(0,0,0,.24), 0 18px 40px rgba(0,0,0,.36),
  inset 0 1px 0 rgba(255,255,255,.26), inset 0 -1px 0 rgba(0,0,0,.26); }

/* içerik katmanı */
.mc__in{
  position:relative; z-index:3; height:100%;
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(16px,3.4%,26px);
}

.mc__top{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mc__brand{
  font-family:var(--display); font-weight:700; font-size:clamp(9px,1.5cqw,11px);
  letter-spacing:.34em; text-transform:uppercase; opacity:.72;
}
.mc__lvl{
  font-family:var(--display); font-weight:900; letter-spacing:-.02em; line-height:.92;
  font-size:clamp(26px,10cqw,44px); text-transform:uppercase;
  /* folyo baskı hissi: hafif dikey ton geçişli metin + emboss gölgesi.
     color-mix desteklenmeyen eski tarayıcıda `color` geri düşer. */
  color:var(--cink);
  background-image:linear-gradient(180deg,
    color-mix(in srgb, var(--cink) 100%, #fff 38%) 0%,
    var(--cink) 55%,
    color-mix(in srgb, var(--cink) 100%, #000 22%) 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.22)) drop-shadow(0 2px 5px rgba(0,0,0,.22));
}
.mc__tag{
  font-family:var(--mono); font-size:clamp(8px,1.5cqw,10px); letter-spacing:.24em;
  text-transform:uppercase; opacity:.66; margin-top:5px;
}

/* çip — gerçek EMV çip geometrisi (kontak grid + bevel) */
.mc__chip{
  width:clamp(34px,10%,46px); aspect-ratio:1.32/1; border-radius:6px; flex:none;
  background:linear-gradient(135deg,#F8ECC4 0%,#E7C976 22%,#B8933F 48%,#8C6E28 64%,#D9BD73 82%,#F6E7B4 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.28), inset 0 1px 1px rgba(255,255,255,.55), 0 1px 3px rgba(0,0,0,.32);
  position:relative; overflow:hidden;
}
.mc__chip::before{
  content:""; position:absolute; inset:16% 9%; opacity:.85;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.34) 0 1px, transparent 1px 33.33%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.34) 0 1px, transparent 1px 50%);
}
.mc__chip::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(200deg, rgba(255,255,255,.55), transparent 45%);
  mix-blend-mode:overlay;
}

.mc__bottom{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px; }
.mc__holder{ min-width:0; }
.mc__label{
  font-family:var(--mono); font-size:clamp(7px,1.3cqw,9px); letter-spacing:.2em;
  text-transform:uppercase; opacity:.6; display:block; margin-bottom:3px;
}
.mc__name{
  font-family:var(--display); font-weight:700; font-size:clamp(12px,3.4cqw,17px);
  letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:min(100%,240px);
}
.mc__no{
  font-family:var(--mono); font-size:clamp(9px,2.2cqw,12px); letter-spacing:.14em;
  opacity:.82; text-align:right; white-space:nowrap;
}

/* kilitli kart: buzlu cam + asma kilit — flat gri yerine "arkasında ışık var" hissi */
.mc--locked{ filter:grayscale(.72) brightness(.58) contrast(.94); }
.mc--locked .mc__in{ opacity:.5; }
.mc__lock{
  position:absolute; inset:0; z-index:4; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:10px;
  background:radial-gradient(60% 60% at 50% 45%, rgba(6,8,11,.46), rgba(6,8,11,.76));
  backdrop-filter:blur(1.5px);
  color:#E8EDF2;
}
.mc__lock svg{ opacity:.92; filter:drop-shadow(0 2px 6px rgba(0,0,0,.4)); }
.mc__lock span{
  font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}

/* sahip olunan kartın rozeti — canlı durum noktalı, folyo-cam etiket */
.mc__owned{
  position:absolute; top:12px; right:12px; z-index:5;
  font-family:var(--mono); font-size:9px; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 11px 5px 9px; border-radius:99px;
  background:linear-gradient(135deg, rgba(18,20,24,.86), rgba(18,20,24,.66));
  color:#fff; border:1px solid rgba(255,255,255,.3);
  backdrop-filter:blur(8px) saturate(1.5);
  box-shadow:0 3px 10px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.2);
}
.mc__owned::before{
  content:""; width:5px; height:5px; border-radius:50%; flex:none;
  background:#7EE3A6; box-shadow:0 0 6px 1px rgba(126,227,166,.9);
}

/* ---------- VİTRİN (üyelik sayfası) ---------- */
.mc-grid{
  display:grid; gap:clamp(18px,2.6vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  container-type:inline-size;
}
.mc-col{ container-type:inline-size; }
.mc-col .mc{ container-type:inline-size; }

.mc-body{ margin-top:18px; }
.mc-body__price{
  font-family:var(--display); font-weight:800; font-size:clamp(20px,2.4vw,26px);
  color:var(--text); letter-spacing:-.01em; margin:0 0 4px;
}
.mc-body__price small{
  font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.1em;
  color:var(--text-3); text-transform:uppercase; margin-left:5px;
}
.mc-body__desc{ font-size:13.5px; line-height:1.6; color:var(--text-2); margin:0 0 14px; }
.mc-perks{ list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:10px; }
.mc-perks li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:13px; line-height:1.5; color:var(--text-2);
}
/* v14.21: check ikonunu düz çizgi yerine rengine-gömülü rozet gibi göster —
   tek satır CSS, şablona dokunmadan mevcut <svg> üstüne uygulanır. */
.mc-perks svg{
  flex:none; margin-top:1px; padding:3px; box-sizing:content-box;
  border-radius:50%; color:var(--cacc);
  background:color-mix(in srgb, var(--cacc) 16%, transparent);
}

.mc-cta{
  position:relative; overflow:hidden;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; box-sizing:border-box; padding:13px 18px; border-radius:11px;
  font-family:var(--body); font-weight:700; font-size:13.5px; letter-spacing:.04em;
  text-decoration:none; border:1px solid transparent; cursor:pointer;
  transition:transform .3s var(--ease-cine,cubic-bezier(.2,.7,.2,1)), filter .3s ease, box-shadow .3s ease;
}
/* alım butonu — dolgu bittiği gibi kartın kendi tonlarından bir "cila cilası"
   ve hover'da soldan sağa geçen ince bir parıltı (şablona dokunmadan ::before) */
.mc-cta--buy{
  background:linear-gradient(135deg,var(--cacc),var(--cacc2)); color:var(--cink);
  box-shadow:0 8px 22px -10px color-mix(in srgb, var(--cacc) 65%, transparent);
}
.mc-cta--buy::before{
  content:""; position:absolute; inset:0; transform:translateX(-130%);
  background:linear-gradient(100deg, transparent 32%, rgba(255,255,255,.55) 50%, transparent 68%);
  transition:transform .65s ease;
}
.mc-cta--buy:hover::before{ transform:translateX(130%); }
.mc-cta--buy:hover{
  transform:translateY(-2px); filter:brightness(1.08);
  box-shadow:0 12px 30px -10px color-mix(in srgb, var(--cacc) 75%, transparent);
}
.mc-cta--have{
  background:transparent; border-color:var(--line-2); color:var(--text-3);
  cursor:default; font-weight:600; opacity:.85;
}
.mc-cta--have:hover{ transform:none; }

/* ---------- PROFİL SAYFASINDAKİ TEK KART ---------- */
.mc-solo{ max-width:430px; container-type:inline-size; }
.mc-solo .mc{ container-type:inline-size; }

.mc-upsell{
  margin-top:20px; padding:16px 18px; border-radius:14px;
  border:1px solid var(--line); background:var(--ink-1);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.mc-upsell p{ margin:0; flex:1 1 240px; font-size:13.5px; color:var(--text-2); line-height:1.55; }
.mc-upsell b{ color:var(--text); }

/* açık temada metal kartlar aynı kalır (kart fiziksel bir nesne, tema değil) */
html[data-site-theme="light"] body.site .mc{ box-shadow:0 2px 4px rgba(28,38,54,.16),
  0 20px 48px rgba(28,38,54,.24), inset 0 1px 0 rgba(255,255,255,.4),
  inset 0 -1px 0 rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.06); }

@media (prefers-reduced-motion: reduce){
  .mc{ transition:none; }
  .mc::after{ display:none; }
  .mc-cta--buy::before{ display:none; }
}

/* ---------- v13.92: KADEMELİ GÖSTERİM ---------- */

/* "X'teki her şey" satırı — miras alınan maddeler katlanır durur */
.mc-inherit{
  position:relative; display:flex; align-items:flex-start; gap:9px; flex-wrap:wrap;
  padding:11px 13px; margin:0 0 14px; border-radius:11px;
  background:var(--ink-2); border:1px solid var(--line);
  font-size:13px; line-height:1.5; color:var(--text-2);
}
.mc-inherit > svg{ flex:none; margin-top:3px; color:var(--cacc); }
.mc-inherit > span{ flex:1 1 auto; min-width:0; }
.mc-inherit b{ color:var(--text); font-weight:700; }

.mc-inherit__more{
  flex:none; background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--cacc); text-decoration:underline;
  text-underline-offset:3px; -webkit-tap-highlight-color:transparent;
}
.mc-inherit__more:hover{ opacity:.75; }

.mc-inherit__list{
  flex:1 1 100%; list-style:none; margin:0; padding:0;
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s var(--ease-cine,cubic-bezier(.2,.7,.2,1));
}
.mc-inherit__list > li{ overflow:hidden; }
.mc-inherit.is-open .mc-inherit__list{ grid-template-rows:1fr; }
.mc-inherit__list li{
  font-size:12.5px; color:var(--text-3); line-height:1.55;
  padding-left:22px; position:relative;
}
.mc-inherit.is-open .mc-inherit__list li{ padding-top:5px; }
.mc-inherit__list li::before{
  content:"·"; position:absolute; left:9px; color:var(--text-3);
}

/* "Dahil" rozeti — sahip olunan karttan daha sessiz */
.mc__owned--inc{
  background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.2);
  font-weight:400;
}
.mc__owned--inc::before{ background:rgba(255,255,255,.55); box-shadow:none; }

/* dahil edilmiş (ama satın alınmamış) kart: kilitli değil ama öne de çıkmaz */
.mc-cta--have{ opacity:.85; }

/* ---------- v14.14: DOĞRUDAN ÖDEME (Stripe / PayPal) ---------- */
.mc-pay{ display:flex; flex-direction:column; gap:8px; }
.mc-pay form{ width:100%; margin:0; }
.mc-cta--stripe{
  background:linear-gradient(135deg,#635bff,#4b45c6); color:#fff; border:none;
}
.mc-cta--stripe:hover{ transform:translateY(-2px); filter:brightness(1.08); }
.mc-cta--paypal{
  background:#ffc439; color:#0a2540; border:none; font-weight:800;
}
.mc-cta--paypal:hover{ transform:translateY(-2px); filter:brightness(1.04); }
/* Patreon "alternatif" bağlantısı — ödeme butonlarının altında ince görünür */
.mc-cta--alt{
  background:transparent; border-color:var(--line-2); color:var(--text-2);
  font-weight:600; margin-top:8px;
}
.mc-cta--alt:hover{ transform:translateY(-1px); color:var(--text); }
/* Üyelik sayfası hata bandı */
.mc-alert{
  max-width:560px; margin:0 0 26px; padding:12px 16px; border-radius:11px;
  background:color-mix(in srgb, #ff6b6b 12%, transparent);
  border:1px solid color-mix(in srgb, #ff6b6b 40%, transparent);
  color:var(--text); font-size:13.5px; font-family:var(--body);
}

/* v14.15: kendi ödeme sistemi açıkken kart üstünde fiyat */
.mc-price{
  font-family:var(--display,inherit); font-weight:800;
  font-size:22px; line-height:1; color:var(--text); margin:0 0 10px;
}
.mc-price small{ font-size:12px; font-weight:600; color:var(--text-3); letter-spacing:.02em; }