/* Esmâü'l-Hüsnâ ezber oyunu — modules.css değişkenleriyle (sıcak, sade; çocuklara uygun ama ağırbaşlı) */
.ni-eo { --_ok: #1f7a4d; --_okbg: #e5f4ea; --_uy: #8a5a12; --_uybg: #fbf1dc; --_at: #7a5c14; max-width: 920px; margin: 0 auto 2rem; }
[data-theme="dark"] .ni-eo { --_ok: #7fd3a4; --_okbg: rgba(46, 160, 100, .16); --_uy: #e7c07a; --_uybg: rgba(200, 162, 74, .16); --_at: #d9b865; }
.ni-eo-yukle { color: var(--_m); }
.ni-eo [hidden] { display: none !important; }
.ni-eo-h { font-size: 1.05rem; margin: 1.5rem 0 .6rem; color: var(--_t); }

/* çocuk modu şeridi */
.ni-eo-cocuk { display: flex; gap: .7rem; align-items: center; padding: .7rem 1rem; margin: 0 0 1rem; border-radius: var(--_r); background: var(--_uybg); border: 1px solid color-mix(in srgb, var(--_a) 45%, transparent); }
.ni-eo-cocuk span { font-size: 1.6rem; }
.ni-eo-cocuk p { margin: 0; font-size: .95rem; }

/* özet */
.ni-eo-ozet { padding: 1.1rem 1.2rem; border-radius: calc(var(--_r) + 4px); color: #fff; background: radial-gradient(120% 160% at 50% 0%, var(--_p2) 0%, var(--_p) 55%, #0a3f38 100%); position: relative; overflow: hidden; }
.ni-eo-ozet::before { content: ""; position: absolute; inset: 8px; border: 1px solid rgba(200, 162, 74, .5); border-radius: calc(var(--_r) - 2px); pointer-events: none; }
.ni-eo-ozet__ana { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; }
.ni-eo-ozet__ana strong { font-size: 2.6rem; line-height: 1; color: var(--_a); font-variant-numeric: tabular-nums; }
.ni-eo-ozet__ana span { font-size: 1.2rem; opacity: .9; }
.ni-eo-ozet__ana small { font-size: .95rem; opacity: .9; margin-left: .2rem; }
.ni-eo-bar { height: .6rem; border-radius: 99px; background: rgba(255, 255, 255, .16); overflow: hidden; margin: .7rem 0 .8rem; }
.ni-eo-bar span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e5c77a, var(--_a)); transition: width .3s; min-width: 2px; }
.ni-eo .ni-eo-cip { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; margin: 0; padding: 0; }
.ni-eo .ni-eo-cip li { margin: 0; }
.ni-eo-cip li { font-size: .82rem; padding: .2rem .65rem; border-radius: 99px; background: rgba(255, 255, 255, .12); }
.ni-eo-cip li.is-vade { background: var(--_a); color: #1b1606; font-weight: 700; }
.ni-eo-not { margin: .8rem 0 0; font-size: .85rem; opacity: .92; }
.ni-eo-not a { color: #f2d58f; }

/* gruplar */
.ni-eo-gruplar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }
@media (max-width: 560px) { .ni-eo-gruplar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ni-eo-gruplar button { display: grid; gap: .2rem; text-align: left; padding: .65rem .75rem; border-radius: 14px; border: 1.5px solid var(--_b); background: var(--_s); color: var(--_t); font: inherit; cursor: pointer; min-width: 0; transition: border-color .15s, transform .15s; }
.ni-eo-gruplar button:hover { border-color: var(--_p2); }
.ni-eo-gruplar button.is-on { border-color: var(--_p); box-shadow: 0 0 0 2px color-mix(in srgb, var(--_p) 30%, transparent); background: color-mix(in srgb, var(--_p) 6%, var(--_s)); }
.ni-eo-gruplar button:disabled { opacity: .55; cursor: default; }
.ni-eo-gruplar b { font-size: .95rem; }
.ni-eo-gruplar small { color: var(--_m); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ni-eo-gruplar__ek { background: var(--_s2) !important; }
.ni-eo-mini { display: block; height: .35rem; border-radius: 99px; background: var(--_s2); overflow: hidden; }
.ni-eo-mini i { display: block; height: 100%; background: linear-gradient(90deg, var(--_p), var(--_a)); border-radius: inherit; }

/* kipler */
.ni-eo-kipler { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .55rem; }
@media (max-width: 760px) { .ni-eo-kipler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 420px) { .ni-eo-kipler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ni-eo-kipler button { display: grid; justify-items: center; gap: .15rem; padding: .85rem .5rem; border-radius: 16px; border: 1.5px solid color-mix(in srgb, var(--_a) 45%, var(--_b)); background: linear-gradient(180deg, color-mix(in srgb, var(--_a) 12%, var(--_s)), var(--_s)); color: var(--_t); font: inherit; cursor: pointer; text-align: center; transition: transform .15s; min-width: 0; }
.ni-eo-kipler button:hover { transform: translateY(-2px); }
.ni-eo-kipler span { font-size: 1.7rem; line-height: 1.2; }
.ni-eo-kipler span[lang=ar] { font-family: var(--_ar); color: var(--_p); font-weight: 700; }
.ni-eo-kipler strong { font-size: .98rem; }
.ni-eo-kipler small { color: var(--_m); font-size: .76rem; line-height: 1.25; }

/* sahne */
.ni-eo-sahne { margin: 1.2rem 0; padding: 1rem; border-radius: calc(var(--_r) + 4px); background: var(--_s); border: 1px solid var(--_b); scroll-margin-top: 80px; }
.ni-eo-sahne.is-kutlama { animation: ni-eo-parla 1.1s ease; }
@keyframes ni-eo-parla { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--_a) 60%, transparent); } 100% { box-shadow: 0 0 0 18px transparent; } }
.ni-eo-sahne__ust { display: flex; align-items: center; gap: .6rem; margin: 0 0 .8rem; }
.ni-eo-sahne__ust h3 { margin: 0; font-size: 1.05rem; flex: 1; min-width: 0; }
.ni-eo-sayac { font-size: .85rem; color: var(--_m); font-variant-numeric: tabular-nums; }
.ni-eo-x { width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1px solid var(--_b); background: var(--_s2); color: var(--_t); cursor: pointer; font-size: .95rem; }
.ni-eo-kart { position: relative; text-align: center; padding: 1.2rem 1rem 1rem; border-radius: var(--_r); color: #fff; background: radial-gradient(120% 140% at 50% 0%, var(--_p2) 0%, var(--_p) 55%, #0a3f38 100%); }
.ni-eo-kart::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(200, 162, 74, .5); border-radius: calc(var(--_r) - 4px); pointer-events: none; }
.ni-eo-no { display: inline-grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 .35rem; border-radius: 10px; border: 1.5px solid var(--_a); font-size: .85rem; font-weight: 700; }
.ni-eo-ar { font-family: var(--_ar); font-size: clamp(2.4rem, 10vw, 3.8rem); line-height: 1.7; margin: .2rem 0 0; }
.ni-eo-ar--buyuk { font-size: clamp(3rem, 13vw, 4.6rem); }
.ni-eo-tr { font-family: var(--font-serif, Georgia, serif); font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--_a); }
.ni-eo-anlam { margin: .5rem auto 0; max-width: 34rem; font-size: 1.05rem; line-height: 1.55; opacity: .95; }
.ni-eo-kart--anlam { padding: 1.4rem 1.2rem; }
.ni-eo-kart--anlam .ni-eo-anlam { margin: 0 auto; font-size: 1.15rem; }
.ni-eo-kart--sira { opacity: .92; }
.ni-eo-kart--sira .ni-eo-ar { font-size: clamp(2rem, 8vw, 2.8rem); }
.ni-eo-kutu { display: flex; justify-content: center; align-items: center; gap: .3rem; margin: .7rem 0 0; }
.ni-eo-kutu i { width: .7rem; height: .7rem; border-radius: 50%; background: var(--_s2); border: 1px solid var(--_b); }
.ni-eo-kutu i.is-on { background: var(--_a); border-color: var(--_a); }
.ni-eo-kutu small { margin-left: .35rem; font-size: .8rem; color: var(--_m); }
.ni-eo-soru { text-align: center; font-weight: 700; font-size: 1.08rem; margin: 1rem 0 .7rem; }
.ni-eo-soru small { font-weight: 400; color: var(--_m); font-size: .85rem; }
.ni-eo-secenek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; }
.ni-eo-secenek:has(.is-uzun) { grid-template-columns: 1fr; }
@media (max-width: 480px) { .ni-eo-secenek { grid-template-columns: 1fr; } }
.ni-eo-secenek button { display: flex; align-items: center; gap: .6rem; text-align: left; padding: .8rem .9rem; min-height: 3.2rem; border-radius: 14px; border: 1.5px solid var(--_b); background: var(--_s); color: var(--_t); font: inherit; font-size: 1.02rem; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.ni-eo-secenek button.is-uzun { font-weight: 500; font-size: .98rem; line-height: 1.4; }
.ni-eo-secenek button:hover:not(:disabled) { border-color: var(--_p2); background: color-mix(in srgb, var(--_p) 5%, var(--_s)); }
.ni-eo-secenek button:disabled { cursor: default; }
.ni-eo-secenek kbd { flex: none; display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 8px; background: var(--_s2); color: var(--_m); font: inherit; font-size: .8rem; font-weight: 700; }
.ni-eo-secenek button.is-dogru { border-color: var(--_ok); background: var(--_okbg); color: var(--_ok); }
.ni-eo-secenek button.is-dogru kbd { background: var(--_ok); color: #fff; }
.ni-eo-secenek button.is-yanlis { border-color: var(--_a); background: var(--_uybg); color: var(--_uy); }
.ni-eo-secenek button:disabled:not(.is-dogru):not(.is-yanlis) { opacity: .6; }
.ni-eo-yaz input { width: 100%; box-sizing: border-box; padding: .8rem 1rem; border-radius: 14px; border: 1.5px solid var(--_b); background: var(--_s); color: var(--_t); font: inherit; font-size: 1.15rem; text-align: center; }
.ni-eo-yaz input:focus { outline: none; border-color: var(--_p); box-shadow: 0 0 0 3px color-mix(in srgb, var(--_p) 22%, transparent); }
.ni-eo-yaz input.is-dogru { border-color: var(--_ok); background: var(--_okbg); }
.ni-eo-yaz input.is-yanlis { border-color: var(--_a); background: var(--_uybg); }
.ni-eo-ipucu { text-align: center; color: var(--_at); font-weight: 600; margin: .4rem 0 0; }
.ni-eo-dug { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .9rem 0 0; }
.ni-eo-geri:empty { display: none; }
.ni-eo-geri { margin: 1rem 0 0; padding: .8rem; border-radius: var(--_r); background: var(--_s2); text-align: center; }
.ni-eo-geri p { margin: .2rem 0; }
.ni-eo-geri__baslik { font-weight: 800; font-size: 1.1rem; }
.ni-eo-geri__baslik.is-dogru { color: var(--_ok); }
.ni-eo-geri__baslik.is-yanlis { color: var(--_uy); }
.ni-eo-mini-kart { display: grid; gap: .1rem; margin: .6rem auto 0; max-width: 30rem; }
.ni-eo-mini-kart span { font-family: var(--_ar); font-size: 1.8rem; line-height: 1.6; color: var(--_p); }
.ni-eo-mini-kart small { color: var(--_m); font-size: .9rem; }
.ni-eo-alt { text-align: center; font-size: .9rem; margin: .8rem 0 0; }
.ni-eo-bos { color: var(--_m); text-align: center; }
.ni-eo-son { text-align: center; padding: .5rem 0; }
.ni-eo-son__buyuk { font-size: 3rem; line-height: 1.2; }
.ni-eo-son h4 { margin: .2rem 0 .4rem; font-size: 1.3rem; }
.ni-eo-son__toplam { color: var(--_m); }
.ni-eo-son__cocuk { display: inline-block; padding: .35rem .9rem; border-radius: 99px; background: var(--_uybg); color: var(--_uy); font-weight: 700; }
.ni-eo-nasil { margin: 1.5rem 0 .5rem; padding: .8rem 1rem; border-radius: var(--_r); background: var(--_s2); }
.ni-eo-nasil summary { cursor: pointer; font-weight: 700; }
.ni-eo-nasil p { font-size: .92rem; margin: .6rem 0; }
.ni-eo-ayar { display: flex; gap: .45rem; align-items: center; font-size: .9rem; }
.ni-eo-kaynak { font-size: .82rem; color: var(--_m); }
[data-theme="dark"] .ni-eo-mini-kart span { color: var(--_a); }
@media (prefers-reduced-motion: reduce) { .ni-eo-kipler button, .ni-eo-bar span { transition: none; } }