/* Özel Ders Al — öğrenme oyunları ortak stilleri. Tüm kurallar .odal-oyun altında, sınıflar oy- önekli. */
.odal-oyun {
  --oy-lacivert: #1A2340;
  --oy-lacivert-2: #2C3E6B;
  --oy-sari: #FDB750;
  --oy-sari-acik: #FFDD57;
  --oy-krem: #FFF8E7;
  --oy-gri: #5b647d;
  --oy-cizgi: #e3e7ef;
  --oy-yesil: #16a34a;
  --oy-kirmizi: #dc2626;
  --oy-yaricap: 18px;
  max-width: 820px;
  margin: 24px auto;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  color: var(--oy-lacivert);
  box-sizing: border-box;
  position: relative;
}
.odal-oyun *, .odal-oyun *::before, .odal-oyun *::after { box-sizing: border-box; }
.odal-oyun h2, .odal-oyun h3, .odal-oyun h4, .odal-oyun p, .odal-oyun ol, .odal-oyun ul { margin: 0; padding: 0; }
.odal-oyun button { font: inherit; margin: 0; cursor: pointer; text-transform: none; letter-spacing: normal; }
.odal-oyun button:disabled { cursor: default; opacity: .55; }
.odal-oyun button:focus-visible, .odal-oyun a:focus-visible, .odal-oyun input:focus-visible, .odal-oyun select:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
.odal-oyun input, .odal-oyun select { font: inherit; }
.odal-oyun .odal-oyun__yukleniyor { padding: 40px; text-align: center; color: var(--oy-gri); background: #f6f7fb; border-radius: var(--oy-yaricap); }

/* --- Ortak düzen --- */
.odal-oyun .oy-sahne { border-radius: 22px; padding: 22px; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 14px 40px rgba(26, 35, 64, .12); overflow: hidden; position: relative; }
.odal-oyun .oy-satir { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.odal-oyun .oy-satir--arada { justify-content: space-between; }
.odal-oyun .oy-not { font-size: 14px; color: var(--oy-gri); }
.odal-oyun .oy-not a { color: inherit; font-weight: 700; }
.odal-oyun .oy-baslik { font-size: 26px; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; }
.odal-oyun .oy-alt-baslik { font-size: 18px; font-weight: 800; }
.odal-oyun .oy-rozet { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; padding: 4px 10px; border-radius: 999px; background: var(--oy-lacivert); color: #fff; white-space: nowrap; }
.odal-oyun .oy-kart { background: #fff; border: 1px solid var(--oy-cizgi); border-radius: 16px; padding: 16px; color: var(--oy-lacivert); }

/* --- Düğmeler (tıknaz, oyun hissi) --- */
.odal-oyun .oy-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 11px 18px; border-radius: 12px; border: 2px solid var(--oy-lacivert);
  background: var(--oy-sari); color: var(--oy-lacivert);
  font-weight: 800; font-size: 15px; line-height: 1.2; text-decoration: none;
  box-shadow: 0 3px 0 var(--oy-lacivert); transition: transform .08s, box-shadow .08s, background .15s;
}
.odal-oyun .oy-btn:hover:not(:disabled) { background: var(--oy-sari-acik); color: var(--oy-lacivert); }
.odal-oyun .oy-btn:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--oy-lacivert); }
.odal-oyun .oy-btn--ikincil { background: #fff; }
.odal-oyun .oy-btn--ikincil:hover:not(:disabled) { background: #f3f5fa; }
.odal-oyun .oy-btn--koyu { background: var(--oy-lacivert); color: #fff; box-shadow: 0 3px 0 #000; }
.odal-oyun .oy-btn--koyu:hover:not(:disabled) { background: var(--oy-lacivert-2); color: #fff; }
.odal-oyun .oy-btn--buyuk { width: 100%; padding: 15px; font-size: 18px; }
.odal-oyun .oy-btn--kucuk { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.odal-oyun .oy-link { background: none; border: 0; padding: 4px; color: inherit; opacity: .75; text-decoration: underline; font-size: 14px; }
.odal-oyun .oy-cip { padding: 9px 14px; border-radius: 999px; border: 2px solid currentColor; background: transparent; color: inherit; font-weight: 700; }
.odal-oyun .oy-cip[aria-pressed="true"] { background: var(--oy-sari); color: var(--oy-lacivert); border-color: var(--oy-lacivert); }

/* --- Yıldız --- */
.odal-oyun .oy-yildizlar { display: inline-flex; gap: 2px; }
.odal-oyun .oy-yildiz { color: rgba(127, 127, 127, .35); font-size: 18px; line-height: 1; }
.odal-oyun .oy-yildiz--dolu { color: #f59e0b; text-shadow: 0 1px 0 rgba(0, 0, 0, .2); }

/* --- Kesir --- */
.odal-oyun .oy-kesir { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; line-height: 1.05; margin: 0 3px; font-weight: 800; }
.odal-oyun .oy-kesir span:first-child { border-bottom: 2px solid currentColor; padding: 0 3px; }
.odal-oyun .oy-kesir span:last-child { padding: 0 3px; }

/* --- Ekran klavyesi --- */
.odal-oyun .oy-tuslar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-width: 320px; }
.odal-oyun .oy-tus { padding: 12px 0; font-size: 20px; font-weight: 800; border-radius: 12px; border: 2px solid rgba(0, 0, 0, .55); background: #f2f4f8; color: #111827; box-shadow: 0 3px 0 rgba(0, 0, 0, .55); }
.odal-oyun .oy-tus:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
.odal-oyun .oy-tus--sil { background: #fde2e2; }

/* --- Modal --- */
.odal-oyun .oy-modal { position: absolute; inset: 0; z-index: 30; background: rgba(10, 14, 30, .62); display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; border-radius: 22px; animation: oy-belir .18s ease-out; }
.odal-oyun .oy-modal__kutu { background: #fff; color: var(--oy-lacivert); border-radius: 18px; padding: 20px; width: 100%; max-width: 520px; box-shadow: 0 20px 60px rgba(0, 0, 0, .35); display: flex; flex-direction: column; gap: 14px; }
.odal-oyun .oy-ipucu__ust { display: flex; gap: 12px; align-items: center; }
.odal-oyun .oy-ipucu__ust img { width: 72px; height: 72px; object-fit: contain; flex: 0 0 auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .15)); }
.odal-oyun .oy-ipucu__ust b { font-size: 18px; }
.odal-oyun .oy-ipucu__liste { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.odal-oyun .oy-ipucu__adim { background: var(--oy-krem); border-left: 4px solid var(--oy-sari); padding: 10px 12px; border-radius: 10px; display: flex; flex-direction: column; gap: 2px; }
.odal-oyun .oy-ipucu__adim b { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: #805000; }

/* --- Bildirim satırı --- */
.odal-oyun .oy-durum { padding: 12px 14px; border-radius: 12px; font-weight: 700; }
.odal-oyun .oy-durum--iyi { background: #dcfce7; color: #14532d; }
.odal-oyun .oy-durum--kotu { background: #fee2e2; color: #7f1d1d; }
.odal-oyun .oy-durum--bilgi { background: #e0e7ff; color: #1e1b4b; }

/* --- CTA --- */
.odal-oyun .oy-cta { display: flex; gap: 12px; align-items: center; background: var(--oy-krem); color: var(--oy-lacivert); border: 2px dashed var(--oy-sari); border-radius: 16px; padding: 14px; }
.odal-oyun .oy-cta img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.odal-oyun .oy-cta p { font-size: 14px; color: var(--oy-gri); margin: 2px 0 8px; }

/* --- Animasyonlar --- */
.odal-oyun .oy-salla { animation: oy-salla .4s; }
@keyframes oy-salla { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes oy-belir { from { opacity: 0; } to { opacity: 1; } }
.odal-oyun .oy-konfeti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.odal-oyun .oy-konfeti i { position: absolute; top: -12px; width: 9px; height: 14px; border-radius: 2px; animation: oy-dus 1.8s cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes oy-dus { to { top: 105%; transform: rotate(540deg) translateX(30px); opacity: .9; } }
@media (prefers-reduced-motion: reduce) {
  .odal-oyun *, .odal-oyun *::before, .odal-oyun *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
@media (max-width: 520px) {
  .odal-oyun .oy-sahne { padding: 16px; border-radius: 18px; }
  .odal-oyun .oy-baslik { font-size: 22px; }
}

/* --- [odal_ogrenme_merkezi] vitrin --- */
.odal-ogrenme-vitrin { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; margin: 24px 0; }
.odal-ogrenme-kart { background: #fff; border: 1px solid #e3e7ef; border-radius: 18px; padding: 18px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 20px rgba(26, 35, 64, .07); transition: transform .15s, box-shadow .15s; }
.odal-ogrenme-kart:hover { transform: translateY(-3px); box-shadow: 0 12px 32px rgba(26, 35, 64, .12); }
.odal-ogrenme-kart__ikon { font-size: 34px; line-height: 1; }
.odal-ogrenme-kart__grup { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: #805000; }
.odal-ogrenme-kart h3 { margin: 0; font-size: 19px; color: #1A2340; }
.odal-ogrenme-kart p { margin: 0; font-size: 14px; color: #555E7A; flex: 1; }
.odal-ogrenme-kart__btn { align-self: flex-start; margin-top: 6px; padding: 9px 14px; border-radius: 12px; background: #FDB750; color: #1A2340; font-weight: 800; text-decoration: none; border: 2px solid #1A2340; box-shadow: 0 3px 0 #1A2340; }
.odal-ogrenme-kart__btn:hover { background: #FFDD57; color: #1A2340; }
.odal-ogrenme-kart__yakinda { align-self: flex-start; font-size: 13px; font-weight: 700; color: #555E7A; }