@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@500;600&family=Source+Sans+3:wght@400;500&display=swap');

.kelime-karti-wrapper {
    max-width: 640px;
    margin: 0 auto;
    padding: 32px 40px 20px;
    box-sizing: border-box;
    font-family: 'Source Sans 3', Georgia, sans-serif;
}

/* ===== Sahne (kart destesinin oturduğu alan) ===== */
.kelime-karti-stage {
    position: relative;
    width: 100%;
    height: 520px;
    perspective: 1400px;
}

/* Kartın altında görünen "deste" hissi veren gölge katmanlar */
.kk-stage-shadow {
    position: absolute;
    inset: 10px 6px 0 6px;
    border-radius: 18px;
    background: #e8e6f0;
    border: 1px solid rgba(0,0,0,0.05);
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.kk-shadow-1 {
    inset: 8px 10px 0 10px;
    transform: translateY(6px) scale(0.98);
    background: #efedf5;
    z-index: 1;
}
.kk-shadow-2 {
    inset: 8px 18px 0 18px;
    transform: translateY(14px) scale(0.95);
    background: #f5f4f8;
    z-index: 0;
}
.kelime-karti-stage[data-remaining="0"] .kk-shadow-1,
.kelime-karti-stage[data-remaining="0"] .kk-shadow-2 { opacity: 0; }
.kelime-karti-stage[data-remaining="1"] .kk-shadow-2 { opacity: 0; }

.kk-cards {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 2;
    transform-style: preserve-3d;
}

/* ===== Tek bir kart ===== */
.kk-card {
    position: absolute;
    inset: 0;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.16);
    display: flex;
    flex-direction: column;
    backface-visibility: hidden;
    transform-origin: center;
    transform: rotateY(0deg) scale(1);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    transition: transform 0.5s cubic-bezier(.4,.1,.2,1), opacity 0.32s ease;
}

.kk-card.is-active {
    opacity: 1;
    pointer-events: auto;
    transform: rotateY(0deg) scale(1);
    z-index: 5;
}

/* Zaten görülmüş, geride kalan kartlar sola kayıp kaybolur */
.kk-card.is-prev {
    opacity: 0;
    transform: rotateY(-25deg) translateX(-40px) scale(0.92);
    z-index: 1;
}

/* Henüz görülmemiş kartlar sağda bekler (görünmez, sadece hazır) */
.kk-card:not(.is-active):not(.is-prev) {
    transform: rotateY(18deg) translateX(30px) scale(0.94);
}

/* ===== Kapak kartı — sadece kelimeyi gösterir ===== */
.kk-card-kapak {
    background: linear-gradient(160deg, #1a1a2e 0%, #2b2447 55%, #1a1a2e 100%);
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

.kk-kapak-ic { padding: 0 62px; }

.kk-kapak-ust {
    margin: 0 0 10px;
    font-size: 0.7em;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: #C9A24B;
}

.kk-kapak-kelime {
    margin: 0 0 18px;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 3.4em;
    font-weight: 600;
    color: #fdfcf8;
    letter-spacing: 0.03em;
}

.kk-kapak-kelime::after {
    content: '';
    display: block;
    width: 46px;
    height: 2px;
    background: linear-gradient(90deg, #C9A24B, #E8C97A);
    margin: 16px auto 0;
    border-radius: 99px;
}

.kk-kapak-ipucu {
    margin: 0;
    font-size: 0.78em;
    color: rgba(255,255,255,0.55);
    letter-spacing: 0.02em;
}

/* ===== İçerik kartları ===== */
.kelime-karti-baslik {
    padding: 16px 20px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.kelime-karti-baslik-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 18px;
    border-radius: 999px;
    border: 1.5px solid rgba(255,255,255,0.45);
    background: rgba(255,255,255,0.18);
    font-size: 0.88em;
    font-weight: 500;
    letter-spacing: 0.06em;
    color: #fff;
}

.kelime-karti-icerik {
    padding: 10px 58px 30px;
    font-size: 1.05em;
    line-height: 1.9;
    flex: 1 1 auto;
    overflow-y: auto;
}

/* Renk temaları */
.kk-tema-1 { background: linear-gradient(145deg,#FF6B9D,#C44569); }
.kk-tema-1 .kelime-karti-icerik { background:#fff0f5; color:#5a1a2e; }

.kk-tema-2 { background: linear-gradient(145deg,#4FACFE,#0972C6); }
.kk-tema-2 .kelime-karti-icerik { background:#eef6ff; color:#0c2e5e; }

.kk-tema-3 { background: linear-gradient(145deg,#43E97B,#1A9E50); }
.kk-tema-3 .kelime-karti-icerik { background:#efffed; color:#0f3a1e; }

.kk-tema-4 { background: linear-gradient(145deg,#F8B500,#E07A00); }
.kk-tema-4 .kelime-karti-icerik { background:#fff8e6; color:#4a2a00; }

.kk-tema-5 { background: linear-gradient(145deg,#A78BFA,#6D28D9); }
.kk-tema-5 .kelime-karti-icerik { background:#f3f0ff; color:#2d1b69; }

.kk-tema-6 { background: linear-gradient(145deg,#FD7065,#C43020); }
.kk-tema-6 .kelime-karti-icerik { background:#fff1f0; color:#4a1010; }

.kk-tema-7 { background: linear-gradient(145deg,#2DD4CF,#0A8F8A); }
.kk-tema-7 .kelime-karti-icerik { background:#edfffe; color:#053535; }

.kk-tema-8 { background: linear-gradient(145deg,#F97316,#B84800); }
.kk-tema-8 .kelime-karti-icerik { background:#fff4ec; color:#4a1a00; }

/* ===== Ok butonları (kartın kenarında, dışa taşan) ===== */
.kk-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.9);
    background: rgba(26,26,46,0.92);
    color: #fdfcf8;
    font-size: 1.1em;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 20;
    box-shadow: 0 6px 16px rgba(0,0,0,0.3);
    transition: transform 0.18s ease, background 0.18s ease, opacity 0.18s ease;
}
.kk-nav:hover:not(:disabled) {
    transform: translateY(-50%) scale(1.08);
    background: #C9A24B;
}
.kk-nav:active:not(:disabled) {
    transform: translateY(-50%) scale(0.95);
}
.kk-nav:disabled {
    opacity: 0.28;
    cursor: default;
}
.kk-nav-prev { left: -23px; }
.kk-nav-next { right: -23px; }

/* ===== İlerleme göstergesi ===== */
.kk-progress {
    text-align: center;
    margin-top: 18px;
    font-size: 0.78em;
    letter-spacing: 0.1em;
    color: #9a9aaa;
}
.kk-progress-current { color: #1a1a2e; font-weight: 600; }
.kk-progress-ayrac { margin: 0 4px; }

@media (max-width: 640px) {
    .kelime-karti-wrapper { padding: 28px 30px 20px; }
    .kelime-karti-stage { height: 440px; }
    .kk-kapak-kelime { font-size: 2.2em; }
    .kk-kapak-ic { padding: 0 48px; }
    .kelime-karti-icerik { font-size: 0.96em; padding: 8px 44px 24px; }
    .kk-nav { width: 38px; height: 38px; }
    .kk-nav-prev { left: -18px; }
    .kk-nav-next { right: -18px; }
}