/* Kelime kartlari */
.kl { margin-top: -88px; padding-bottom: 80px; }
.kl-seviyeler { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.kl-sev { position: relative; overflow: hidden; display: grid; gap: 2px; text-align: left; padding: 20px 20px 18px; border-radius: 22px; border: 0; cursor: pointer;
          font-family: inherit; color: #fff; box-shadow: var(--golge-buyuk); transition: transform .2s, box-shadow .2s, outline-color .2s; outline: 3px solid transparent; outline-offset: 3px; }
.kl-sev::after { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 130px; border-radius: 50%; background: rgba(255,255,255,.1); }
.kl-sev:hover { transform: translateY(-3px); }
.kl-sev.sec { outline-color: var(--altin); transform: translateY(-3px); }
.kl-sev b { font-size: 34px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.kl-sev span { font-weight: 800; font-size: 16px; margin-top: 6px; }
.kl-sev small { color: rgba(255,255,255,.75); font-weight: 600; font-size: 13px; }
.s-a1 { background: linear-gradient(140deg, #0f5a4a, #19b37a); }
.s-a2 { background: linear-gradient(140deg, #16245e, #3d7bff); }
.s-b1 { background: linear-gradient(140deg, #4c1d95, #8b5cf6); }
.s-b2 { background: linear-gradient(140deg, #7c2d12, #f59e0b); }

.kl-alan { max-width: 620px; margin: 36px auto 0; }
.kl-ust { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.kl-sayac { font-weight: 800; color: var(--baslik); font-variant-numeric: tabular-nums; min-width: 56px; }
.kl-ilerleme { flex: 1; height: 8px; border-radius: 8px; background: #e6e9f2; overflow: hidden; }
.kl-ilerleme i { display: block; height: 100%; background: linear-gradient(90deg, var(--altin), var(--mint)); border-radius: 8px; transition: width .3s; }
.kl-ikon-btn { width: 40px; height: 40px; border-radius: 12px; border: 1.5px solid var(--cizgi); background: var(--kart); font-size: 18px; font-weight: 800; color: var(--baslik); cursor: pointer; }

.kl-sahne { perspective: 1400px; }
.kl-kart { position: relative; height: 380px; cursor: pointer; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.2,.8,.2,1); outline: none; }
.kl-kart.gir { animation: kl-gir .4s ease; }
@keyframes kl-gir { from { opacity: 0; transform: translateX(30px) rotate(2deg); } }
.kl-kart.cevrik { transform: rotateY(180deg); }
.kl-kart:focus-visible .kl-yuz { box-shadow: 0 0 0 4px #c9d6ff, var(--golge-buyuk); }
.kl-yuz { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 28px; padding: 28px;
          display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: var(--kart);
          border: 1px solid var(--cizgi); box-shadow: var(--golge-buyuk); overflow: hidden; }
.kl-on::before { content: ""; position: absolute; inset: 0 0 auto; height: 8px; background: var(--renk, var(--lac3)); }
.kl-kart[data-artikel="der"] { --renk: var(--mavi); --acik: #eef3ff; }
.kl-kart[data-artikel="die"] { --renk: var(--kir); --acik: #fdeef0; }
.kl-kart[data-artikel="das"] { --renk: var(--mint); --acik: #e6f8f0; }
.kl-kart[data-artikel="yok"] { --renk: var(--altin); --acik: #fff7df; }
.kl-on { background: radial-gradient(500px 260px at 50% 110%, var(--acik, #f3f5fd), #fff 70%); }
.kl-rozet { position: absolute; top: 22px; left: 22px; font-size: 12px; font-weight: 800; color: var(--lac3); background: #eaeefc; padding: 5px 10px; border-radius: 99px; }
.kl-rozet.tr { background: var(--altin); color: var(--baslik); }
.kl-ses { position: absolute; top: 16px; right: 16px; width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center;
          background: var(--lac); color: var(--altin); box-shadow: 0 8px 20px rgba(11,22,64,.25); transition: transform .15s; }
.kl-ses:hover { transform: scale(1.06); } .kl-ses:active { transform: scale(.95); }
.kl-ses.kucuk { position: static; width: 40px; height: 40px; flex: none; }
.kl-kelime { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kl-artikel { font-size: 22px; font-weight: 800; padding: 6px 18px; border-radius: 99px; color: #fff; letter-spacing: .02em; }
.kl-artikel.a-der { background: var(--mavi); } .kl-artikel.a-die { background: var(--kir); } .kl-artikel.a-das { background: var(--mint); }
.kl-kelime b { font-size: clamp(40px, 8vw, 60px); font-weight: 800; letter-spacing: -.03em; color: var(--baslik); line-height: 1.05; word-break: break-word; }
.kl-cogul { margin-top: 14px; color: var(--soluk); font-weight: 700; }
.kl-ipucu { position: absolute; bottom: 18px; font-size: 13px; font-weight: 700; color: #a3abc2; }
.kl-arka { transform: rotateY(180deg); background: linear-gradient(160deg, var(--lac), var(--lac3)); color: #fff; border: 0; }
.kl-tr { font-size: clamp(32px, 6vw, 46px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 22px; }
.kl-ornek { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.14);
            border-radius: 18px; padding: 14px 16px; }
.kl-ornek .kl-ses { background: var(--altin); color: var(--baslik); }
.kl-ornek p { font-weight: 700; } .kl-ornek p.tr { color: #c9d2f2; font-weight: 600; font-size: 14px; margin-top: 2px; }
.kl-ornek > p { flex: 1; }
.kl-ornek { flex-wrap: wrap; } .kl-ornek p { width: calc(100% - 56px); }
.kl-ornek p.tr { margin-left: 54px; }

.kl-alt { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 20px; }
.kl-klavye { text-align: center; color: var(--soluk); font-size: 13px; font-weight: 600; margin-top: 14px; }
kbd { font: 700 12px inherit; font-family: inherit; background: var(--kart); border: 1px solid var(--cizgi); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; }
.kl-uyari { text-align: center; color: var(--kir); font-weight: 700; margin-top: 10px; }
.kl-bos { display: grid; justify-items: center; text-align: center; gap: 6px; max-width: 620px; margin: 36px auto 0; background: var(--kart); border: 1.5px dashed var(--cizgi); border-radius: 24px; padding: 44px 20px; }
.kl-bos span { font-size: 38px; } .kl-bos b { font-size: 20px; color: var(--baslik); } .kl-bos p { color: var(--soluk); }
.kl-renk { display: flex; justify-content: center; flex-wrap: wrap; gap: 18px; margin-top: 26px; color: var(--soluk); font-weight: 700; font-size: 14px; }
.kl-renk i { font-style: normal; font-weight: 800; }

@media (max-width: 760px) {
  .kl-seviyeler { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kl-sev { padding: 16px; } .kl-sev b { font-size: 28px; }
  .kl-kart { height: 360px; }
  .kl-yuz { padding: 22px 18px; }
  .kl-alt { grid-template-columns: 1fr 1fr; } .kl-alt #klCevir { grid-column: span 2; grid-row: 1; }
  .kl-klavye { display: none; }
}

[data-tema="koyu"] .kl-on { background: radial-gradient(500px 260px at 50% 110%, var(--kart2), var(--kart) 70%); }
[data-tema="koyu"] .kl-kart[data-artikel="der"] { --acik: #14244d; } [data-tema="koyu"] .kl-kart[data-artikel="die"] { --acik: #3a1620; }
[data-tema="koyu"] .kl-kart[data-artikel="das"] { --acik: #0f3328; } [data-tema="koyu"] .kl-kart[data-artikel="yok"] { --acik: #3a2f10; }
[data-tema="koyu"] .kl-ilerleme { background: var(--cizgi); }
[data-tema="koyu"] kbd { background: var(--kart); border-color: var(--cizgi); color: var(--metin); }

.kl-zor-satir { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 12px; flex-wrap: wrap; }
.kl-tekrar-link { font-weight: 700; color: var(--soluk); text-decoration: none; }

/* "Dinle" yazili ses butonu (kulaklik ikonu anlasilmiyordu) */
.kl-ses { width: auto; height: auto; border-radius: 99px; padding: 10px 16px 10px 14px; gap: 6px; display: inline-flex; align-items: center;
          font: 800 15px inherit; font-family: inherit; color: #fff; }
.kl-ses span { color: var(--altin); }
.kl-ses.kucuk { width: auto; height: auto; padding: 8px 12px; font-size: 13px; }
.kl-ornek .kl-ses span { color: var(--baslik); }
/* otomatik dinle anahtari */
.kl-oto { display: flex; align-items: center; gap: 12px; max-width: 520px; margin: 16px auto 0; padding: 12px 16px; border-radius: 16px;
          background: var(--kart); border: 1px solid var(--cizgi); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.kl-oto input { position: absolute; opacity: 0; pointer-events: none; }
.kl-anahtar { flex: none; width: 48px; height: 28px; border-radius: 99px; background: var(--cizgi); position: relative; transition: background .2s; }
.kl-anahtar::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff;
                     box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: transform .2s; }
.kl-oto input:checked + .kl-anahtar { background: var(--mint); }
.kl-oto input:checked + .kl-anahtar::after { transform: translateX(20px); }
.kl-oto input:focus-visible + .kl-anahtar { outline: 3px solid var(--altin); outline-offset: 2px; }
.kl-oto-metin { display: grid; } .kl-oto-metin b { color: var(--baslik); font-size: 15px; } .kl-oto-metin small { color: var(--soluk); font-size: 13px; }

@media (max-width: 760px) {
  /* seviyeler tek satirda kompakt */
  .kl-seviyeler { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .kl-sev { padding: 10px 6px; border-radius: 14px; text-align: center; justify-items: center; }
  .kl-sev b { font-size: 20px; } .kl-sev span { font-size: 11px; } .kl-sev small { display: none; }
  .kl-sev::after, .kl-sev::before { display: none; }
  .kl { padding-bottom: 24px; }
  .kl-ust { margin-top: 14px; }
  .kl-kart { height: 320px; }
  .kl-kelime b { font-size: clamp(30px, 10vw, 44px); }
  /* Onceki | Cevir | Sonraki tek satirda */
  .kl-alt { grid-template-columns: 1fr 1.15fr 1fr; gap: 8px; margin-top: 14px; }
  .kl-alt #klCevir { grid-column: auto; grid-row: auto; order: 0; }
  .kl-alt #klGeri { order: -1; } .kl-alt #klIleri { order: 1; }
  .kl-alt .btn { padding: 13px 8px; font-size: 15px; }
  .kl-ses { top: 12px; right: 12px; padding: 8px 13px 8px 11px; font-size: 14px; }
  .kl-renk { margin-top: 18px; gap: 14px; font-size: 13px; }
}

@media (max-width: 760px) { .kl { margin-top: -48px; } }
@media (max-width: 760px) {
  .kl-ornek { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px; }
  .kl-ornek .kl-ses { order: 2; }
  .kl-ornek > p { flex: none; text-align: left; }
  .kl-tr { font-size: 30px; }
}

/* ---------------- kelime SEO sayfalari (/kelimeler/<kur>/<slug>/, /kelimeler/konu/<slug>/) ---------------- */
.ks-govde { padding-block: 32px 60px; }
.ks-liste { display: grid; gap: 10px; margin-bottom: 18px; }
.ks-liste > div { display: flex; gap: 10px; padding: 12px 16px; border-radius: 14px; background: var(--kart); border: 1px solid var(--cizgi); }
.ks-liste dt { flex: none; width: 90px; color: var(--soluk); font-weight: 700; font-size: 13.5px; }
.ks-liste dd { margin: 0; font-weight: 700; color: var(--baslik); }
.ks-ornek { padding: 18px 20px; border-radius: 16px; background: var(--kart2); margin-bottom: 18px; }
.ks-de { margin: 0 0 6px; font-size: 18px; font-weight: 700; color: var(--baslik); }
.ks-tr { margin: 0; color: var(--metin2); font-weight: 600; }
.ks-link { margin-bottom: 20px; } .ks-link a { color: var(--lac3); font-weight: 800; text-decoration: none; }
.ks-cta { display: flex; gap: 10px; flex-wrap: wrap; }
.ks-konu-liste { padding-block: 24px 60px; display: grid; gap: 8px; }
.ks-satir { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; background: var(--kart); border: 1px solid var(--cizgi);
            text-decoration: none; color: var(--baslik); transition: transform .12s; }
.ks-satir:hover { transform: translateX(3px); border-color: var(--lac3); }
.ks-rozet { flex: none; width: 34px; text-align: center; padding: 3px 0; border-radius: 8px; font-size: 11px; font-weight: 800; color: #fff; }
.ks-rozet.k-A1 { background: var(--mint); } .ks-rozet.k-A2 { background: var(--mavi); } .ks-rozet.k-B1 { background: var(--mor); } .ks-rozet.k-B2 { background: #f59e0b; }
.ks-anlam { margin-left: auto; color: var(--soluk); font-weight: 600; font-size: 14px; }
@media (max-width: 600px) { .ks-anlam { display: none; } }