/* ==========================================================================
   AFFILIATE GEÇİŞ FORMU — "Altın Sahne" dili
   --------------------------------------------------------------------------
   Kapsam: yalnızca .af altı. Global sınıflara dokunulmaz.

   Durum rengi bilgi taşır ve tek yerden gelir (--k):
     yeşil  = başvuruya hazır        mor    = inceleniyor
     altın  = onaylandı              gri    = sonuçlandı (red)
     mavi   = profil bilgisi gerekli
   Yeni bir durum eklenince yalnızca --k ve rozet metni değişir; kart
   düzeni, ölçüler ve animasyonlar aynı kalır — UI'ya tekrar dönmek gerekmez.
   ========================================================================== */

.af{
  --g:#f5c451; --g2:#ffdf8a;
  --vio:#8b5cf6; --vio2:#c084fc; --cyan:#38bdf8; --em:#34d399;
  --rose:#fb7185; --amber:#fb923c; --gri:#64748b;
  --pane:rgba(15,21,38,.92); --pane2:rgba(9,14,27,.96);
  --line:rgba(148,169,214,.13); --line2:rgba(148,169,214,.26);
  --tx:#f1f5f9; --tx2:#b6c3da; --tx3:#7d8ca6; --tx4:#5b6980;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --rl:26px; --rm:16px; --rs:12px; --k:var(--em); --ink:#062b1c;
  display:flex; flex-direction:column; gap:26px;
  container-type:inline-size;
}
.af svg{display:block}
.af a{text-decoration:none}

@keyframes afRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@keyframes afRadar{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--k) 65%,transparent)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}
@keyframes afSheen{0%{left:-60%;opacity:0}4%{opacity:1}14%{left:130%;opacity:1}15%,100%{left:130%;opacity:0}}
@keyframes afShine{0%{background-position:130% 0}55%,100%{background-position:-80% 0}}
@keyframes afFlow{to{stroke-dashoffset:-18}}

/* =========================================================
   1) HERO — başlık + üç adımlı akış
   ========================================================= */
.af-hero{
  position:relative; overflow:hidden; border-radius:var(--rl);
  border:1px solid rgba(52,211,153,.2);
  background:
    radial-gradient(105% 150% at 88% 40%, rgba(16,185,129,.22), transparent 58%),
    radial-gradient(60% 110% at 12% 108%, rgba(245,196,81,.09), transparent 60%),
    linear-gradient(104deg,#01070c 0%,#03110f 44%,#062019 76%,#04120f 100%);
  box-shadow:0 34px 80px -50px #000, inset 0 1px 0 rgba(255,255,255,.05);
  animation:afRise .5s cubic-bezier(.22,.9,.36,1) backwards;
}
.af-hero-top{
  position:relative; z-index:2; display:flex; align-items:center; gap:clamp(16px,2cqi,28px);
  padding:clamp(22px,2.6cqi,38px) clamp(20px,2.7cqi,40px) clamp(18px,2cqi,26px);
}
.af-hero-i{
  flex:none; position:relative; display:grid; place-items:center;
  width:clamp(62px,6.2cqi,92px); height:clamp(62px,6.2cqi,92px); border-radius:50%;
  background:radial-gradient(circle at 35% 28%, rgba(52,211,153,.3), rgba(52,211,153,.05) 70%);
  border:1px solid rgba(52,211,153,.42);
}
.af-hero-i svg{width:58%; height:58%}
.af-hero-c{min-width:0; flex:1}
.af-kicker{
  display:inline-flex; align-items:center; gap:9px; font-family:var(--mono);
  font-size:clamp(9px,.8cqi,11px); font-weight:700; letter-spacing:.24em;
  text-transform:uppercase; color:#5eb894; margin-bottom:clamp(7px,.8cqi,11px);
}
.af-kicker i{width:7px; height:7px; border-radius:50%; background:var(--em); --k:var(--em); animation:afRadar 1.8s ease-out infinite}
.af-kicker::after{content:''; width:34px; height:1px; background:linear-gradient(90deg,rgba(52,211,153,.5),transparent)}
.af-hero h1{
  margin:0; font-weight:900; letter-spacing:-.028em; line-height:1.04;
  font-size:clamp(25px,3cqi,42px);
  background:linear-gradient(100deg,#d1fae5 38%,#fff 50%,#34d399 64%);
  background-size:230% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:afShine 4.6s ease-in-out infinite;
}
.af-hero p{
  margin:clamp(8px,.9cqi,13px) 0 0; color:#93a5a0; font-weight:600;
  font-size:clamp(12px,1.02cqi,14.5px); line-height:1.6; max-width:60ch;
}
/* üç adım — akışı anlatır, süs değil */
.af-steps{
  position:relative; z-index:2; display:grid; grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(52,211,153,.16);
  background:linear-gradient(180deg,rgba(2,10,8,.6),rgba(2,7,6,.9));
}
.af-step{
  display:flex; align-items:center; gap:12px; padding:14px clamp(14px,1.8cqi,24px); position:relative;
  animation:afRise .45s cubic-bezier(.22,.9,.36,1) backwards; animation-delay:calc(.2s + var(--i,0)*80ms);
}
.af-step + .af-step::before{
  content:''; position:absolute; left:0; top:20%; bottom:20%; width:1px;
  background:linear-gradient(180deg,transparent,rgba(52,211,153,.3),transparent);
}
.af-step-n{
  flex:none; width:30px; height:30px; display:grid; place-items:center; border-radius:50%;
  font-family:var(--mono); font-size:11px; font-weight:700; color:var(--em);
  background:rgba(52,211,153,.11); border:1px solid rgba(52,211,153,.3);
}
.af-step-c{min-width:0}
.af-step-c strong{display:block; font-size:11.5px; font-weight:850; color:#fff; line-height:1.2}
.af-step-c small{display:block; margin-top:3px; font-size:10px; font-weight:650; color:#7d918b; line-height:1.4}

/* =========================================================
   2) GİRİŞ / UYARI ŞERİDİ
   ========================================================= */
.af-note{
  display:flex; align-items:center; gap:13px; padding:13px 16px;
  border-radius:var(--rm); border:1px solid color-mix(in srgb,var(--k) 34%,transparent);
  background:linear-gradient(120deg, color-mix(in srgb,var(--k) 13%,transparent), transparent 72%);
}
.af-note-i{
  width:38px; height:38px; flex:none; display:grid; place-items:center; border-radius:11px;
  font-size:15px; color:var(--k);
  background:color-mix(in srgb,var(--k) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 30%,transparent);
}
.af-note-c{flex:1; min-width:0}
.af-note-c b{display:block; font-size:11.5px; font-weight:900; color:#fff; letter-spacing:.04em; text-transform:uppercase}
.af-note-c small{display:block; margin-top:3px; font-size:10.5px; font-weight:650; color:var(--tx3); line-height:1.5}
.af-note-go{
  flex:none; display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:11px;
  cursor:pointer; font-size:10px; font-weight:900; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink); border:0; font-family:inherit;
  background:linear-gradient(135deg, color-mix(in srgb,var(--k) 62%,#fff), var(--k));
  box-shadow:0 10px 26px -13px var(--k);
}

/* =========================================================
   3) BÖLÜM BAŞLIĞI
   ========================================================= */
.af-sec{display:flex; align-items:center; gap:12px; margin-bottom:14px}
.af-sec h2{
  margin:0; display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; color:var(--tx);
}
.af-sec h2 i{color:var(--em); font-size:14px}
.af-sec h2 em{
  font-style:normal; font-family:var(--mono); font-size:9.5px; font-weight:700; color:var(--tx4);
  letter-spacing:.08em; padding:3px 9px; border-radius:99px;
  background:rgba(148,169,214,.08); border:1px solid var(--line);
}
.af-sec .sp{flex:1}

/* =========================================================
   4) SPONSOR KARTLARI
   Kart sponsorun kendi bandiyla acilir: logo kendi ambiyansi icinde
   buyuk durur, kart listede uzaktan taninir. Durum rengi (--k) bandin
   isigindan butona kadar her katmana akar.
   ========================================================= */
.af-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:18px}
.af-card{
  --k:var(--em); --ink:#062b1c;
  position:relative; overflow:hidden; display:flex; flex-direction:column;
  border-radius:var(--rl);
  border:1px solid color-mix(in srgb,var(--k) 34%,var(--line));
  background:linear-gradient(168deg,#111a2e,#0a1020 62%);
  box-shadow:0 26px 60px -44px #000, 0 0 0 1px color-mix(in srgb,var(--k) 7%,transparent);
  transition:transform .22s cubic-bezier(.34,1.32,.64,1), border-color .2s, box-shadow .2s;
  animation:afRise .5s cubic-bezier(.22,.9,.36,1) backwards; animation-delay:calc(var(--i,0)*70ms);
}
.af-card:hover{
  transform:translateY(-5px);
  border-color:color-mix(in srgb,var(--k) 68%,transparent);
  box-shadow:0 34px 70px -34px color-mix(in srgb,var(--k) 62%,transparent),
             0 0 0 1px color-mix(in srgb,var(--k) 22%,transparent);
}
.af-card::before{
  content:''; position:absolute; top:0; left:10%; right:10%; height:2px; z-index:5;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--k) 90%,#fff),transparent);
}
.af-banner{
  position:relative; height:132px; display:grid; place-items:center;
  overflow:hidden; background:#070c17;
}
.af-banner .bg{
  position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover;
  filter:blur(26px) saturate(1.5) brightness(.5); transform:scale(1.6); opacity:.9;
}
/* Sabit hale kullanilir: donen desen sponsor logolarinin kendi isimasiyla yarisir. */
.af-banner .glow{
  position:absolute; left:50%; top:50%; z-index:1; width:76%; height:150%;
  transform:translate(-50%,-50%); pointer-events:none;
  background:radial-gradient(50% 42% at 50% 50%, color-mix(in srgb,var(--k) 28%,transparent), transparent 72%);
  filter:blur(13px);
}
.af-banner .lg{
  position:relative; z-index:2; max-width:70%; max-height:62%; object-fit:contain;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.75));
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.af-card:hover .af-banner .lg{transform:scale(1.05)}
.af-banner .void{position:relative; z-index:2; font-size:34px; color:color-mix(in srgb,var(--k) 55%,transparent)}
.af-banner .fade{
  position:absolute; z-index:3; left:0; right:0; bottom:0; height:56px; pointer-events:none;
  background:linear-gradient(to top,#111a2e,transparent);
}
.af-tier{
  position:absolute; z-index:4; top:12px; left:12px;
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:99px;
  font-family:var(--mono); font-size:7px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--tx2); background:rgba(6,10,20,.82); border:1px solid rgba(148,169,214,.24);
  backdrop-filter:blur(6px);
}
.af-tier.main{color:#2a1c00; background:linear-gradient(135deg,var(--g2),var(--g)); border-color:transparent}
.af-state{
  position:absolute; z-index:4; top:12px; right:12px;
  display:inline-flex; align-items:center; gap:7px; padding:6px 12px; border-radius:99px;
  font-family:var(--mono); font-size:7.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); background:linear-gradient(135deg, color-mix(in srgb,var(--k) 60%,#fff), var(--k));
  box-shadow:0 6px 18px -8px var(--k); white-space:nowrap; max-width:calc(100% - 24px);
}
.af-state i{font-size:9px}
.af-state.live::before{
  content:''; width:6px; height:6px; border-radius:50%; background:var(--ink);
  animation:afRadar 1.7s ease-out infinite;
}
.af-body{display:flex; flex-direction:column; gap:12px; padding:15px 17px 17px; flex:1}
.af-name{
  margin:0; font-size:17px; font-weight:900; color:#fff; letter-spacing:-.02em; line-height:1.2;
  overflow-wrap:anywhere;
}
.af-info{
  display:flex; align-items:flex-start; gap:11px; padding:11px 12px; border-radius:12px;
  background:rgba(8,13,24,.72); border:1px solid var(--line);
}
.af-info-i{
  width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px; font-size:12px;
  color:var(--k); background:color-mix(in srgb,var(--k) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 26%,transparent);
}
.af-info-c{min-width:0; flex:1}
.af-info-c span{
  display:block; font-family:var(--mono); font-size:7.5px; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; color:var(--tx4);
}
.af-info-c b{
  display:block; margin-top:4px; font-size:12px; font-weight:800; color:#fff;
  line-height:1.4; overflow-wrap:anywhere;
}
.af-info-c b.mut{color:var(--tx3); font-weight:650}
.af-cond{
  display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:11px;
  font-size:11px; font-weight:650; color:#e8d9b0; line-height:1.5;
  background:color-mix(in srgb,var(--g) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--g) 26%,transparent);
}
.af-cond i{flex:none; margin-top:2px; font-size:10px; color:var(--g)}
.af-verdict{
  display:flex; align-items:flex-start; gap:9px; padding:10px 12px; border-radius:11px;
  font-size:11px; font-weight:650; color:var(--tx2); line-height:1.5;
  background:color-mix(in srgb,var(--k) 8%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 24%,transparent);
}
.af-verdict i{flex:none; margin-top:2px; font-size:10px; color:var(--k)}
.af-verdict b{color:#fff; font-weight:850}
.af-act{margin-top:auto; display:flex; flex-direction:column; gap:9px; padding-top:2px}
.af-btn{
  position:relative; overflow:hidden; width:100%; display:inline-flex; align-items:center;
  justify-content:center; gap:10px; padding:14px 18px; border-radius:14px; cursor:pointer;
  font-size:11.5px; font-weight:900; letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink); font-family:inherit; border:1px solid rgba(255,255,255,.34);
  background:linear-gradient(135deg, color-mix(in srgb,var(--k) 62%,#fff), var(--k) 58%, color-mix(in srgb,var(--k) 68%,#000));
  box-shadow:0 16px 38px -18px color-mix(in srgb,var(--k) 95%,transparent), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .18s cubic-bezier(.4,0,.2,1), filter .18s;
}
.af-btn:hover{transform:translateY(-2px); filter:brightness(1.06)}
.af-btn::after{
  content:''; position:absolute; top:-30%; bottom:-30%; left:-60%; width:34%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.4),transparent);
  transform:skewX(-14deg); opacity:0; pointer-events:none;
  animation:afSheen 5.5s linear infinite; animation-delay:calc(1s + var(--i,0)*.7s);
}
.af-btn[disabled]{cursor:default; filter:grayscale(.5) opacity(.78); box-shadow:none}
.af-btn[disabled]::after{animation:none}
.af-btn.ghost{
  color:var(--k); background:color-mix(in srgb,var(--k) 9%,transparent);
  border-color:color-mix(in srgb,var(--k) 34%,transparent); box-shadow:none;
}
.af-btn.ghost::after{animation:none}
.af-btn.ghost:hover{background:color-mix(in srgb,var(--k) 16%,transparent)}
.af-hint{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:9.5px; font-weight:700; color:var(--tx4); text-align:center; line-height:1.4;
}
.af-hint i{color:var(--k); font-size:10px; flex:none}

/* =========================================================
   5) BAŞVURULARIM TABLOSU
   ========================================================= */
.af-tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--rm)}
.af-tbl{width:100%; border-collapse:collapse; min-width:620px; background:rgba(6,10,20,.6)}
.af-tbl th{
  font-family:var(--mono); font-size:8px; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--tx4); text-align:left;
  padding:11px 15px; border-bottom:1px solid var(--line); white-space:nowrap;
}
.af-tbl td{
  padding:12px 15px; border-bottom:1px solid var(--line);
  font-size:11.5px; font-weight:650; color:var(--tx2); vertical-align:middle;
}
.af-tbl tr:last-child td{border-bottom:0}
.af-tbl tr:hover td{background:rgba(148,169,214,.03)}
.af-tbl .sp{display:flex; align-items:center; gap:9px; min-width:0}
.af-tbl .sp img{width:26px; height:26px; border-radius:7px; object-fit:contain; background:#070c17; flex:none}
.af-tbl .sp b{color:#fff; font-weight:850; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.af-tbl time{font-family:var(--mono); font-size:10px; color:var(--tx3); white-space:nowrap}
.af-pill{
  --k:var(--gri);
  display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:99px;
  font-family:var(--mono); font-size:7.5px; font-weight:700; letter-spacing:.13em;
  text-transform:uppercase; color:var(--k);
  background:color-mix(in srgb,var(--k) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--k) 30%,transparent); white-space:nowrap;
}
.af-pill i{font-size:8px}

/* =========================================================
   6) BOŞ DURUM
   ========================================================= */
.af-empty{
  border-radius:var(--rl); border:1px dashed rgba(52,211,153,.26);
  background:radial-gradient(90% 120% at 50% 0%, rgba(52,211,153,.08), transparent 62%),
             linear-gradient(160deg,var(--pane),var(--pane2));
  padding:56px 26px; text-align:center;
}
.af-empty i{font-size:36px; color:rgba(52,211,153,.45)}
.af-empty b{display:block; margin-top:15px; font-size:13.5px; font-weight:900; letter-spacing:.12em; text-transform:uppercase; color:var(--tx)}
.af-empty span{display:block; margin-top:8px; font-size:11px; font-weight:650; color:var(--tx4); line-height:1.5}

/* =========================================================
   7) DUYARLI DAVRANIŞ
   ========================================================= */
@container (max-width:860px){
  .af-steps{grid-template-columns:1fr}
  .af-step + .af-step::before{left:14px; right:14px; top:0; bottom:auto; width:auto; height:1px;
    background:linear-gradient(90deg,transparent,rgba(52,211,153,.26),transparent)}
}
@container (max-width:640px){
  .af{gap:18px}
  .af-hero-top{flex-direction:column; align-items:flex-start; gap:14px; padding:18px 15px 15px}
  .af-hero-i{width:56px; height:56px}
  .af-hero h1{font-size:22px}
  .af-hero p{font-size:12px; line-height:1.55}
  .af-kicker{font-size:8.5px; letter-spacing:.18em}
  .af-kicker::after{display:none}
  .af-step{padding:11px 15px; gap:10px}
  .af-step-n{width:26px; height:26px; font-size:10px}
  .af-step-c strong{font-size:11px}
  .af-step-c small{font-size:9.5px}
  .af-note{flex-wrap:wrap; padding:12px 13px}
  .af-note-go{width:100%; justify-content:center}
  .af-sec h2{font-size:11.5px; letter-spacing:.1em}
  .af-sec h2 em{font-size:9px}
  .af-grid{grid-template-columns:1fr; gap:12px}
  .af-banner{height:104px}
  .af-banner .lg{max-width:64%; max-height:56%}
  .af-tier{top:10px; left:10px; padding:3px 8px; font-size:6.5px; letter-spacing:.1em}
  .af-state{top:10px; right:10px; padding:5px 10px; font-size:7px; letter-spacing:.1em}
  .af-body{padding:13px 14px 15px; gap:10px}
  .af-name{font-size:15.5px}
  .af-info{padding:10px 11px; gap:10px}
  .af-info-i{width:27px; height:27px; font-size:11px}
  .af-info-c b{font-size:11.5px}
  .af-cond,.af-verdict{padding:9px 11px; font-size:10.5px}
  .af-btn{padding:13px 14px; font-size:10.5px; letter-spacing:.1em; gap:8px}
  .af-hint{font-size:9px}
  .af-tbl{min-width:560px}
  .af-tbl th{padding:9px 12px; font-size:7.5px}
  .af-tbl td{padding:10px 12px; font-size:11px}
  .af-empty{padding:40px 20px}
}
@container (max-width:380px){
  .af-banner{height:92px}
  .af-state{max-width:calc(100% - 20px); overflow:hidden; text-overflow:ellipsis}
  .af-name{font-size:14.5px}
}

/* Konteyner sorgusu desteklemeyen tarayıcı yedeği (main dolgusuyla ~+32px) */
@media (max-width:892px){.af-steps{grid-template-columns:1fr}}
@media (max-width:672px){
  .af-grid{grid-template-columns:1fr}
  .af-hero-top{flex-direction:column; align-items:flex-start}
}

@media (prefers-reduced-motion:reduce){
  .af *,.af *::before,.af *::after{
    animation-duration:.001ms!important; animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}