/* =========================================================
   ÇEKİLİŞLER
   Kart ızgarası: görsel (ödül görseli ya da sponsorun kare logosu),
   bilgi, geri sayım ve katılım formu. Sponsorlar sayfasıyla
   aynı görsel dil. Tek çekiliş varsa masaüstünde kart
   yataya döner.
   ========================================================= */

/* ---------------- başlık ---------------- */
.ck-hero {
    margin: 24px 0 18px;
    padding: 2px 2px 0;
}
.ck-hero__uzeri {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 3.4px;
    text-transform: uppercase;
    color: var(--gold);
}
.ck-hero__uzeri::before {
    content: '';
    width: 26px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold));
}
.ck-hero__t {
    margin: 9px 0 0;
    font-size: clamp(26px, 5.2vw, 42px);
    font-weight: 900;
    letter-spacing: clamp(1px, .5vw, 4px);
    line-height: 1.05;
    color: var(--text);
}
.ck-hero__s {
    margin: 11px 0 0;
    max-width: 62ch;
    color: var(--text-2);
    font-size: 13.5px;
    line-height: 1.7;
}
.ck-hero__rozet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    padding: 6px 13px;
    border-radius: 99px;
    border: 1px solid rgba(52, 197, 106, .4);
    background: rgba(52, 197, 106, .1);
    color: #8ff0b4;
    font-size: 12px;
    font-weight: 600;
}
.ck-hero__rozet b { font-weight: 800; }

.ck-nokta {
    width: 8px;
    height: 8px;
    flex: none;
    border-radius: 50%;
    background: #34c56a;
    animation: ck-nabiz 1.8s ease-out infinite;
}
@keyframes ck-nabiz {
    0%   { box-shadow: 0 0 0 0 rgba(52, 197, 106, .55); }
    70%  { box-shadow: 0 0 0 8px rgba(52, 197, 106, 0); }
    100% { box-shadow: 0 0 0 0 rgba(52, 197, 106, 0); }
}

/* ---------------- ızgara ---------------- */
.ck-liste {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
    gap: 16px;
}

.ck-kart {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: linear-gradient(180deg, rgba(23, 39, 65, .92), rgba(11, 21, 38, .96));
    border: 1px solid var(--line);
    scroll-margin-top: 90px;
    transition: border-color .2s, transform .25s cubic-bezier(.2, .7, .3, 1), box-shadow .25s;
}
.ck-kart--yayinda:hover {
    border-color: rgba(var(--accent-rgb), .45);
    transform: translateY(-2px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .35);
}
.ck-kart:target { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(var(--accent-rgb), .4); }
.ck-kart--bitti { opacity: .72; }
.ck-kart--bitti .ck-kart__gorsel img { filter: grayscale(.8); }

/* ---------------- görsel ---------------- */
.ck-kart__gorsel {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background:
        radial-gradient(60% 70% at 50% 45%, rgba(var(--accent-rgb), .16), transparent 70%),
        linear-gradient(165deg, #1a2d4c, #0a1424);
}
.ck-kart__gorsel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Yüklenen görsel her oranda karta tamamen sığar (kırpılmaz). Kalan
   boşluğu aynı görselin bulanık, koyulaştırılmış kopyası doldurur;
   aynı adres olduğu için ikinci bir indirme olmaz. */
.ck-kart__gorsel .ck-kart__zemin {
    position: absolute;
    inset: 0;
    object-fit: cover;
    filter: blur(24px) saturate(1.15) brightness(.5);
    transform: scale(1.15);
}
.ck-kart__gorsel .ck-kart__resim {
    position: relative;
    z-index: 1;
    object-fit: contain;
    padding: 4%;   /* çok yatay logolar kart kenarına dayanmasın */
}
.ck-kart--bitti .ck-kart__gorsel .ck-kart__zemin { filter: blur(24px) grayscale(1) brightness(.4); }

.ck-kart__gorsel.is-logo img {
    object-fit: contain;
    padding: 9% 22%;
    filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .5));
}
.ck-kart__yer {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: var(--gold);
}
.ck-kart__yer .icon { width: 64px; height: 64px; opacity: .55; }

.ck-rozet {
    position: absolute;
    z-index: 2;
    top: 12px;
    left: 12px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 11px;
    border-radius: 99px;
    border: 1px solid rgba(255, 255, 255, .18);
    background: rgba(6, 12, 24, .74);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
}
.ck-rozet--yayinda { border-color: rgba(52, 197, 106, .55); color: #8ff0b4; }
.ck-rozet--yakinda { border-color: rgba(var(--accent-rgb), .55); color: var(--gold-2); }
.ck-rozet--bitti   { color: var(--text-3); }

/* ---------------- gövde ---------------- */
.ck-kart__govde {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    padding: 16px 18px 18px;
}
.ck-kart__sponsor {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--gold);
}
.ck-kart__sponsor .icon { width: 14px; height: 14px; }
.ck-kart__baslik {
    margin: 0;
    font-size: 19px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
    overflow-wrap: anywhere;
}
.ck-kart__odul {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 10px 12px;
    border-radius: var(--r);
    border: 1px solid rgba(var(--accent-rgb), .35);
    background: var(--gold-dim);
    color: var(--gold-2);
    font-size: 14.5px;
    font-weight: 800;
    overflow-wrap: anywhere;
}
.ck-kart__odul .icon { width: 20px; height: 20px; flex: none; }
.ck-kart__aciklama {
    margin: 0;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.ck-bilgi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    font-size: 12px;
    color: var(--text-3);
}
.ck-bilgi b { color: var(--text); font-variant-numeric: tabular-nums; }
.ck-sayac b { color: var(--gold-2); }
.ck-sayac.is-bitti b { color: var(--text-3); }

/* ---------------- sonuç şeridi ---------------- */
.ck-sonuc {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 13px;
    border-radius: var(--r);
    border: 1px solid var(--line-2);
    font-size: 13px;
    line-height: 1.55;
}
.ck-sonuc b { color: var(--text); font-weight: 700; }
.ck-sonuc__ic { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.ck-sonuc--ok   { border-color: rgba(52, 197, 106, .45); background: rgba(52, 197, 106, .1); }
.ck-sonuc--ok   .ck-sonuc__ic { color: #6fe09b; }
.ck-sonuc--hata { border-color: rgba(224, 69, 79, .45);  background: rgba(224, 69, 79, .1); }
.ck-sonuc--hata .ck-sonuc__ic { color: #ff9096; }

/* ---------------- form ---------------- */
.ck-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.ck-alanlar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.ck-alan {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-2);
}
.ck-alan input {
    width: 100%;
    padding: 11px 12px;
    border-radius: var(--r-sm);
    border: 1px solid var(--line-2);
    background: rgba(6, 12, 24, .55);
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    transition: border-color .18s, background .18s;
}
.ck-alan input:focus {
    outline: none;
    border-color: var(--gold);
    background: rgba(6, 12, 24, .78);
}

.ck-onay {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--text-2);
    cursor: pointer;
}
.ck-onay input { width: 17px; height: 17px; flex: none; margin: 1px 0 0; accent-color: var(--gold); }

.ck-kosul { font-size: 12px; color: var(--text-3); }
.ck-kosul summary { width: max-content; color: var(--gold-2); cursor: pointer; }
.ck-kosul div {
    max-height: 220px;
    margin-top: 8px;
    padding: 10px 12px;
    overflow: auto;
    border-radius: var(--r-sm);
    border: 1px solid var(--line);
    background: rgba(6, 12, 24, .45);
    line-height: 1.6;
}

.ck-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    width: 100%;
    padding: 13px 20px;
    border-radius: 99px;
    border: 1px solid var(--gold);
    background: var(--cta-bg);
    box-shadow: var(--cta-glow);
    color: var(--accent-ink);
    font: inherit;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1px;
    cursor: pointer;
    transition: filter .18s, transform .18s;
}
.ck-btn:hover { filter: brightness(1.07); transform: translateY(-1px); }
.ck-btn:disabled { opacity: .55; filter: grayscale(1); transform: none; cursor: not-allowed; }
.ck-btn .icon { width: 18px; height: 18px; }

/* bot tuzağı: ekran dışında, ekran okuyucudan da gizli */
.ck-tuzak {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.ck-kim { margin: 0; font-size: 11.5px; color: var(--text-3); }
.ck-kim b { color: var(--gold-2); }

.ck-not {
    margin: 18px 2px 0;
    color: var(--text-3);
    font-size: 11.5px;
    line-height: 1.6;
}

/* ---------------- boş durum ---------------- */
.ck-bos {
    display: grid;
    place-items: center;
    gap: 9px;
    padding: 52px 20px;
    border-radius: var(--r-lg);
    border: 1px dashed var(--line-2);
    background: linear-gradient(180deg, rgba(23, 39, 65, .6), rgba(11, 21, 38, .8));
    text-align: center;
}
.ck-bos__ic { width: 34px; height: 34px; color: var(--gold); opacity: .6; }
.ck-bos b { font-size: 14.5px; }
.ck-bos span { color: var(--text-3); font-size: 12.5px; }

/* ---------------- tek çekiliş: masaüstünde yatay ---------------- */
@media (min-width: 900px) {
    .ck-liste--tek { grid-template-columns: 1fr; }
    .ck-liste--tek .ck-kart { flex-direction: row; }
    .ck-liste--tek .ck-kart__gorsel { flex: 0 0 46%; aspect-ratio: auto; min-height: 340px; }
    .ck-liste--tek .ck-kart__govde { padding: 22px 26px 24px; }
    .ck-liste--tek .ck-kart__baslik { font-size: 24px; }
}

/* ---------------- dar ekran ---------------- */
@media (max-width: 640px) {
    .ck-hero { margin: 18px 0 14px; }
    .ck-liste { gap: 12px; }
    .ck-alanlar { grid-template-columns: 1fr; }
    .ck-kart__govde { padding: 14px 14px 16px; }
    .ck-kart__baslik { font-size: 17px; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-nokta { animation: none; }
    .ck-kart, .ck-btn { transition: none; }
    .ck-kart--yayinda:hover, .ck-btn:hover { transform: none; }
}