/* ==========================================================================
   KOD ETKİNLİKLERİ — "Altın Sahne"
   --------------------------------------------------------------------------
   Kapsam: yalnızca .ke-* sınıfları. Site genelindeki hiçbir seçiciye
   dokunulmaz. Renk dili üst menüyle aynı.

   Kart ızgarası auto-fill/minmax ile: kart sayısı değişince ya da yeni
   alan eklenince kırılım eşiği yazmak gerekmez.
   ========================================================================== */
.ke-page{
  --ke-altin:#f5c451; --ke-altin2:#ffdf8a; --ke-mor:#a78bfa; --ke-yesil:#34d399;
  --ke-line:rgba(148,169,214,.13); --ke-line2:rgba(148,169,214,.24);
  --ke-tx:#f1f5f9; --ke-tx2:#b6c3da; --ke-tx3:#7d8ca6; --ke-tx4:#5b6980;
  --ke-mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  max-width:1200px; margin:0 auto; padding-bottom:48px;
  font-family:Manrope,system-ui,sans-serif;
}
.ke-page *{box-sizing:border-box}
.ke-page svg{display:block}

/* ---------- başlık ---------- */
.ke-head{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-bottom:22px}
.ke-head-l{display:flex; align-items:center; gap:13px; min-width:0}
.ke-head-ic{
  width:46px; height:46px; flex:none; display:grid; place-items:center; border-radius:14px;
  background:linear-gradient(150deg,rgba(245,196,81,.16),rgba(245,196,81,.04));
  border:1px solid rgba(245,196,81,.28);
  box-shadow:0 10px 26px -16px rgba(245,196,81,.8);
}
.ke-head-ic svg{width:26px; height:26px}
.ke-head h1{margin:0; font-size:22px; font-weight:900; letter-spacing:-.02em; color:#fff; line-height:1.1}
.ke-sub{
  margin-top:5px; font-family:var(--ke-mono); font-size:9.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase; color:var(--ke-tx4);
}
.ke-head-r{display:flex; align-items:center; gap:8px; margin-left:auto; flex-wrap:wrap}
.ke-chip{
  display:inline-flex; align-items:center; height:34px; padding:0 14px; border-radius:999px;
  font-size:11.5px; font-weight:800; color:var(--ke-tx2); white-space:nowrap;
  border:1px solid var(--ke-line2); background:linear-gradient(155deg,rgba(17,26,46,.9),rgba(11,17,32,.95));
  transition:color .16s, border-color .16s, transform .16s;
}
.ke-chip:hover{color:#fff; border-color:rgba(245,196,81,.5); transform:translateY(-1px)}

/* ---------- ızgara ---------- */
.ke-izgara{
  display:grid; gap:16px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}

/* ---------- kart ---------- */
.ke-kart{
  --k:var(--ke-altin);
  position:relative; display:flex; flex-direction:column; gap:10px;
  padding:16px; border-radius:20px; overflow:hidden;
  border:1px solid color-mix(in srgb,var(--k) 22%,var(--ke-line));
  background:
    radial-gradient(120% 70% at 50% 0%, color-mix(in srgb,var(--k) 11%,transparent), transparent 62%),
    linear-gradient(180deg,rgba(16,23,41,.88),rgba(6,10,20,.94));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07), 0 18px 40px -28px rgba(0,0,0,.95);
  transition:border-color .18s, transform .18s cubic-bezier(.4,0,.2,1);
}
.ke-kart:hover{transform:translateY(-2px); border-color:color-mix(in srgb,var(--k) 44%,transparent)}
.ke-kart.is-alindi{--k:var(--ke-yesil)}
.ke-kart.is-doldu{opacity:.62}

.ke-gorsel{margin:-16px -16px 2px; border-radius:20px 20px 0 0; overflow:hidden; background:#0b1120}
.ke-gorsel img{display:block; width:100%; height:132px; object-fit:cover}

.ke-ust{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.ke-sponsor{
  display:inline-flex; align-items:center; gap:7px; padding:4px 10px 4px 5px; border-radius:999px;
  font-size:11px; font-weight:800; color:var(--ke-tx2);
  background:rgba(148,169,214,.07); border:1px solid var(--ke-line2);
}
.ke-sponsor img{width:18px; height:18px; border-radius:50%; object-fit:contain; background:#0b1120}
.ke-rozet{
  margin-left:auto; padding:4px 10px; border-radius:999px;
  font-family:var(--ke-mono); font-size:8px; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#201604;
  background:linear-gradient(135deg,var(--ke-altin2),var(--ke-altin));
}

.ke-baslik{margin:2px 0 0; font-size:16px; font-weight:900; color:#fff; line-height:1.25}
.ke-odul{
  font-family:var(--ke-mono); font-size:9px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ke-altin);
}
.ke-aciklama{margin:0; font-size:12.5px; font-weight:500; color:var(--ke-tx3); line-height:1.6}

/* ---------- şartlar ----------
   Her şart bir çip. Sağlanan yeşil tik, eksik olan gri nokta.
   Yeni bir şart eklemek = bir çip daha; düzen kendiliğinden sarar. */
.ke-sartlar{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
.ke-sart{
  display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:999px;
  font-size:10.5px; font-weight:700; color:var(--ke-tx3);
  background:rgba(148,169,214,.06); border:1px solid var(--ke-line);
}
.ke-sart i{
  width:12px; height:12px; flex:none; border-radius:50%; position:relative;
  background:rgba(148,169,214,.22);
}
.ke-sart.ok{color:#a7f3d0; background:rgba(52,211,153,.1); border-color:rgba(52,211,153,.28)}
.ke-sart.ok i{background:var(--ke-yesil)}
.ke-sart.ok i::after{
  content:''; position:absolute; inset:0; margin:auto; width:3px; height:6px;
  border:solid #04241a; border-width:0 1.6px 1.6px 0; transform:rotate(45deg) translate(-.5px,-1px);
}
.ke-sart.adet{color:#fde68a; background:rgba(245,196,81,.09); border-color:rgba(245,196,81,.24)}
.ke-sart.adet i{background:var(--ke-altin)}
.ke-sart.adet.bitti{color:#fda4af; background:rgba(251,113,133,.1); border-color:rgba(251,113,133,.26)}
.ke-sart.adet.bitti i{background:#fb7185}
.ke-sart.sure{font-family:var(--ke-mono); font-size:9px; letter-spacing:.06em}
.ke-sart.sure i{background:rgba(148,169,214,.35)}

/* ---------- kod alanı ---------- */
.ke-kod{
  display:flex; align-items:center; gap:8px; margin-top:auto;
  padding:11px 12px; border-radius:13px;
  border:1px dashed var(--ke-line2); background:rgba(5,9,18,.5);
}
.ke-kod-tx{
  flex:1; min-width:0; font-family:var(--ke-mono); font-size:15px; font-weight:700;
  letter-spacing:.22em; color:var(--ke-tx4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
/* Kod açıldığında kutu katılaşır ve altın olur. */
.ke-kod[data-durum="acik"]{
  border-style:solid; border-color:rgba(52,211,153,.4);
  background:linear-gradient(150deg,rgba(52,211,153,.12),rgba(5,9,18,.6));
}
.ke-kod[data-durum="acik"] .ke-kod-tx{
  color:#fff; letter-spacing:.14em; user-select:all; cursor:copy;
}
.ke-kopya{
  width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:9px;
  cursor:pointer; color:var(--ke-tx2); font-family:inherit;
  border:1px solid var(--ke-line2); background:rgba(148,169,214,.07);
  transition:color .16s, border-color .16s;
}
.ke-kopya:hover{color:#fff; border-color:rgba(52,211,153,.5)}
.ke-kopya svg{width:14px; height:14px}
/* [hidden] display:none demek ama yukarıdaki display:grid aynı özgüllükte
   ve sonra geldiği için onu eziyordu; kod açılmadan düğme görünüyordu. */
.ke-kopya[hidden]{display:none}

/* ---------- düğme ---------- */
.ke-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:42px; padding:0 16px; border-radius:12px; cursor:pointer; font-family:inherit;
  font-size:12.5px; font-weight:800; text-align:center; border:0;
  color:#201604; background:linear-gradient(135deg,var(--ke-altin2),var(--ke-altin));
  box-shadow:0 12px 26px -14px rgba(245,196,81,.9);
  transition:filter .16s, transform .16s;
}
.ke-btn:hover{filter:brightness(1.06); transform:translateY(-1px)}
.ke-btn.is-uyari{
  color:var(--ke-tx2); background:linear-gradient(155deg,rgba(17,26,46,.9),rgba(11,17,32,.95));
  border:1px solid var(--ke-line2); box-shadow:none;
}
.ke-btn.is-uyari:hover{color:#fff; border-color:rgba(245,196,81,.5)}
.ke-btn.is-pasif{
  color:var(--ke-tx4); background:rgba(148,169,214,.07); border:1px solid var(--ke-line);
  box-shadow:none; cursor:not-allowed;
}
.ke-btn.is-pasif:hover{transform:none; filter:none}

.ke-durum{min-height:14px; font-size:11px; font-weight:700; color:var(--ke-tx4)}
.ke-durum.ok{color:#a7f3d0}
.ke-durum.uyari{color:#fda4af}

/* ---------- boş durum ---------- */
.ke-bos{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  padding:46px 24px; border-radius:20px; border:1px dashed var(--ke-line2);
  background:linear-gradient(180deg,rgba(14,20,36,.6),rgba(6,10,20,.8));
}
.ke-bos b{font-size:15px; font-weight:900; color:#fff}
.ke-bos span{font-size:12.5px; font-weight:500; color:var(--ke-tx3); max-width:400px; line-height:1.6}
.ke-bos-cta{
  margin-top:6px; display:inline-flex; align-items:center; height:38px; padding:0 20px;
  border-radius:999px; font-size:11.5px; font-weight:800; color:#201604;
  background:linear-gradient(135deg,var(--ke-altin2),var(--ke-altin));
}

@media (max-width:560px){
  .ke-head h1{font-size:18px}
  .ke-head-r{width:100%; margin-left:0}
  .ke-izgara{grid-template-columns:1fr; gap:13px}
  .ke-kart{padding:14px; border-radius:17px}
  .ke-gorsel{margin:-14px -14px 2px}
  .ke-gorsel img{height:112px}
}

@media (prefers-reduced-motion:reduce){
  .ke-kart,.ke-btn,.ke-chip{transition:none}
}