/* Dört oyun modu. Her mod kendi rengini --mod olarak sahneden alır. */

/* ——— Kartlar ——— */
.yon-sec{display:flex;justify-self:center;background:var(--yuzey-2);border-radius:99px;padding:4px;gap:4px}
.yon-sec button{font:700 14px var(--f-metin);color:var(--soluk);background:none;border:0;border-radius:99px;padding:8px 14px;cursor:pointer}
.yon-sec button[aria-pressed="true"]{background:var(--yuzey);color:var(--murekkep);box-shadow:0 2px 8px rgb(0 0 0/.08)}
.kart-alan{perspective:1400px}
.kart-tasiyici{position:relative;touch-action:pan-y;transition:transform .3s var(--yay)}
.kart-tasiyici.yeni{animation:kartGel .45s var(--yay)}
.kart-tasiyici.ucus-sag{transform:translateX(130%) rotate(16deg)!important;opacity:0;transition:transform .28s ease-in,opacity .28s}
.kart-tasiyici.ucus-sol{transform:translateX(-130%) rotate(-16deg)!important;opacity:0;transition:transform .28s ease-in,opacity .28s}
.kart{position:relative;height:clamp(340px,56vh,460px);transform-style:preserve-3d;transition:transform .6s var(--yay);cursor:pointer;border-radius:32px}
.kart.ters{transform:rotateY(180deg)}
.yuz{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:32px;background:var(--yuzey);box-shadow:var(--golge);border:2px solid color-mix(in srgb,var(--renk) 55%,var(--cizgi));padding:18px 20px 20px;display:flex;flex-direction:column;overflow:auto}
.yuz.on{background:radial-gradient(120% 75% at 50% 0%,color-mix(in srgb,var(--renk) 26%,var(--yuzey)),var(--yuzey) 72%)}
.yuz.arka{transform:rotateY(180deg)}
.yuz-ust{display:flex;justify-content:space-between;align-items:center;gap:10px}
.yuz-orta{flex:1;display:grid;place-content:center;text-align:center;gap:10px;padding-block:10px}
.buyuk-kelime{font:600 clamp(42px,11vw,62px)/1.05 var(--f-baslik);margin:0;overflow-wrap:anywhere}
.buyuk-anlam{font:600 clamp(30px,7.5vw,40px)/1.15 var(--f-baslik);margin:0}
.kucuk{margin:0;color:var(--soluk);font-size:17px}
.yuz-alt{display:flex;align-items:center;justify-content:center;gap:6px;margin:0;color:var(--soluk);font-size:14px;font-weight:800}
.yuz-alt svg{width:18px;height:18px}
.arka-anlam{font:600 clamp(30px,7.5vw,38px)/1.15 var(--f-baslik);margin:14px 0 2px}
.arka-tr{margin:0;color:var(--soluk);font-size:17px}
.ses-btn{width:52px;height:52px;background:color-mix(in srgb,var(--renk,var(--mod)) 30%,var(--yuzey));border-color:transparent}
.isaret{position:absolute;top:22px;z-index:2;font:600 19px var(--f-baslik);padding:6px 14px;border-radius:14px;border:3px solid;pointer-events:none}
.isaret.sag{right:22px;color:var(--dogru);background:var(--dogru-zemin);opacity:var(--sag,0);transform:rotate(8deg)}
.isaret.sol{left:22px;color:var(--yanlis);background:var(--yanlis-zemin);opacity:var(--sol,0);transform:rotate(-8deg)}
.kaydir-ipucu{margin:0;text-align:center;color:var(--soluk);font-size:14px;font-weight:800;min-height:21px}
.karar{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dugme.tekrar{color:var(--yanlis);background:var(--yanlis-zemin);box-shadow:0 4px 0 color-mix(in srgb,var(--yanlis) 45%,transparent)}
.dugme.biliyorum{color:var(--yuzey);background:var(--dogru);box-shadow:0 4px 0 color-mix(in srgb,var(--dogru) 55%,#000)}
@keyframes kartGel{from{transform:scale(.9) translateY(18px);opacity:0}}

/* ——— Test ——— */
.noktalar{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.noktalar i{width:12px;height:12px;border-radius:50%;background:var(--cizgi);transition:transform .3s var(--yay),background .2s}
.noktalar i.simdi{background:var(--mod);transform:scale(1.35)}
.noktalar i.d{background:var(--dogru)}
.noktalar i.y{background:var(--yanlis)}
.soru-kart{background:var(--yuzey);border-radius:32px;padding:20px;box-shadow:var(--golge);display:grid;gap:8px;animation:kartGel .4s var(--yay)}
.soru-ust{display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:14px;font-weight:800}
.soru-govde{font:600 clamp(30px,8vw,42px)/1.15 var(--f-baslik);margin:8px 0 0;overflow-wrap:anywhere}
.soru-not{margin:0;color:var(--soluk);font-size:17px}
.bosluk{display:inline-block;min-width:3em;height:.9em;border-bottom:4px dotted var(--mod);vertical-align:baseline}
.siklar{display:grid;gap:10px;margin-top:10px}
.sik{display:flex;align-items:center;gap:12px;width:100%;text-align:left;font:700 17px var(--f-metin);color:var(--murekkep);background:var(--yuzey);border:2px solid var(--cizgi);border-radius:20px;padding:9px 14px 9px 9px;min-height:60px;cursor:pointer;box-shadow:0 3px 0 var(--cizgi);transition:transform .12s,border-color .15s,background .15s,opacity .2s}
.sik [lang=en]{font:500 19px var(--f-baslik)}
.sik:hover:not(:disabled){border-color:var(--mod)}
.sik:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 var(--cizgi)}
.sik:disabled{cursor:default;color:var(--murekkep)}
.harf{flex:none;width:40px;height:40px;border-radius:14px;display:grid;place-items:center;background:var(--yuzey-2);font:600 17px var(--f-baslik);color:var(--soluk)}
.sik.dogru{border-color:var(--dogru);background:var(--dogru-zemin);box-shadow:0 3px 0 var(--dogru);animation:pop .45s var(--yay)}
.sik.dogru .harf{background:var(--dogru);color:var(--yuzey)}
.sik.yanlis{border-color:var(--yanlis);background:var(--yanlis-zemin);box-shadow:0 3px 0 var(--yanlis);animation:salla .4s}
.sik.yanlis .harf{background:var(--yanlis);color:var(--yuzey)}
.sik.sonuk{opacity:.4}
.geri-bildirim{position:sticky;bottom:calc(12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;gap:12px;padding:10px 10px 10px 8px;border-radius:26px;border:2px solid;box-shadow:var(--golge);animation:yuksel .4s var(--yay);z-index:3}
.geri-bildirim.iyi{background:var(--dogru-zemin);border-color:var(--dogru)}
.geri-bildirim.kotu{background:var(--yanlis-zemin);border-color:var(--yanlis)}
.gb-filiz{width:56px;flex:none}
.gb-metin{flex:1;min-width:0;display:grid}
.gb-metin b{font:600 20px var(--f-baslik)}
.iyi .gb-metin b{color:var(--dogru)}
.kotu .gb-metin b{color:var(--yanlis)}
.gb-metin span{font-size:14px}
.geri-bildirim .dugme{min-height:50px;padding:10px 18px}
@keyframes pop{40%{transform:scale(1.04)}}
@keyframes salla{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ——— Eşleştir ——— */
.olcumler{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.esle{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.esle .sutun{display:grid;gap:10px;align-content:start}
.tas{min-height:70px;padding:10px 12px;border-radius:22px;border:2px solid var(--cizgi);background:var(--yuzey);color:var(--murekkep);box-shadow:0 4px 0 var(--cizgi);font:700 15px/1.25 var(--f-metin);cursor:pointer;transition:transform .18s var(--yay),background .2s,border-color .2s;overflow-wrap:anywhere}
.tas.en{font:600 18px/1.2 var(--f-baslik)}
.tas:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 var(--cizgi)}
.tas.secili{background:var(--mod);border-color:var(--mod);color:var(--pastel-yazi);box-shadow:0 4px 0 color-mix(in srgb,var(--mod) 60%,#000);transform:translateY(-3px)}
.tas.tamam{background:var(--dogru-zemin);border-color:var(--dogru);color:var(--dogru);box-shadow:none;cursor:default;animation:eslesti .7s var(--yay) forwards}
.tas.hata{background:var(--yanlis-zemin);border-color:var(--yanlis);animation:salla .4s}
@keyframes eslesti{30%{transform:scale(1.07)}100%{transform:scale(.96);opacity:.5}}

/* ——— Saksılar ——— */
.sepet{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:16px;min-height:76px;border-radius:28px;background:var(--yuzey);border:2px dashed var(--cizgi)}
.sepet.uyari{animation:salla .4s}
.kcip{font:500 17px var(--f-baslik);color:var(--murekkep);background:var(--yuzey-2);border:2px solid transparent;border-radius:99px;padding:8px 16px;cursor:pointer;box-shadow:0 3px 0 var(--cizgi);transition:transform .18s var(--yay)}
.kcip.secili{background:var(--murekkep);color:var(--yuzey);transform:translateY(-3px) scale(1.05);box-shadow:0 5px 0 color-mix(in srgb,var(--murekkep) 55%,#000)}
.kcip.hata{animation:salla .4s;border-color:var(--yanlis)}
.saksilar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:620px){.saksilar{grid-template-columns:minmax(0,1fr)}}
.saksi{display:flex;flex-direction:column;gap:10px;text-align:left;padding:14px;border-radius:28px;color:var(--murekkep);background:color-mix(in srgb,var(--renk) 16%,var(--yuzey));border:2px solid color-mix(in srgb,var(--renk) 60%,var(--cizgi));box-shadow:0 4px 0 color-mix(in srgb,var(--renk) 60%,var(--cizgi));cursor:pointer;min-height:140px;transition:transform .18s var(--yay)}
/* Üstte saksı ve sayaç, altında tam genişlikte grup adı: uzun adlar da rahat sığar */
.saksi-bas{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.saksi-resim{width:46px;height:auto;flex:none}
.saksi-adlar{display:grid;gap:2px;min-width:0}
.saksi-ad{display:block;font:600 18px/1.2 var(--f-baslik);text-wrap:balance;overflow-wrap:break-word}
.saksi-alt{display:block;font-size:13px;color:var(--soluk);font-weight:700}
.saksi-sayac{flex:none;white-space:nowrap;font:600 14px var(--f-baslik);color:var(--murekkep);background:var(--yuzey);border-radius:99px;padding:3px 10px;font-variant-numeric:tabular-nums}
.saksi-ic{display:flex;flex-wrap:wrap;gap:6px}
.saksi-ic span{font:500 15px var(--f-baslik);background:var(--yuzey);border-radius:99px;padding:4px 12px;animation:kok .45s var(--yay)}
.saksilar.bekliyor .saksi{border-style:dashed;animation:nabiz 1.4s ease-in-out infinite}
.saksilar .saksi.dolu{animation:pop .45s var(--yay)}
.saksilar .saksi.hata{animation:salla .4s;border-color:var(--yanlis)}
@keyframes nabiz{50%{transform:translateY(-4px)}}
@keyframes kok{from{transform:scale(.3);opacity:0}}