/* Deneme ekranı. Renkler ve düğmeler styles.css'ten gelir.
   Soru ekranı tek ekrandır: soru resmi, bütün şıklar ve düğme kaydırmadan görünür. */
:root { --ust-h: 56px; --dogru: #157347; --dogru-zemin: #e9f7ef; --yanlis: #b42318; --yanlis-zemin: #fdecea; }

.d-ust { height: var(--ust-h); display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 max(16px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left)); background: var(--krem); border-bottom: 1px solid var(--cizgi); }
.d-ust .marka { font-size: 1.2rem; }
.d-ust .marka-ikon { width: 28px; height: 28px; }
.d-ad { font-weight: 800; color: var(--mor); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ekran:focus { outline: none; }
.d-bilgi { text-align: center; padding: 48px 16px; color: var(--soluk); }

/* ---------- kartlar: kod, giriş, sonuç ---------- */
.d-kart { width: min(560px, 100% - 32px); margin: 28px auto; background: var(--kart); border-radius: var(--yaricap); box-shadow: var(--golge); padding: 28px 24px; text-align: center; }
.d-kart h1 { font-size: clamp(1.8rem, 6vw, 2.4rem); }
.d-etiket { font-weight: 800; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; color: var(--turuncu-koyu); margin-bottom: .3em; }
.d-genis { width: 100%; margin-top: 8px; font-size: 1.2rem; min-height: 60px; }

#kod-form { display: grid; gap: 8px; text-align: left; margin: 20px 0 8px; }
#kod-form label { font-weight: 800; }
#kod-form input { font: 800 1.8rem var(--baslik); letter-spacing: .08em; text-align: center; padding: 10px 14px; border: 3px solid var(--cizgi); border-radius: 16px; min-height: 60px; color: var(--mor); width: 100%; }
#kod-form input:focus { border-color: var(--mor); outline: none; }
#kod-form input[aria-invalid="true"] { border-color: var(--yanlis); }
.d-hata { color: var(--yanlis); font-weight: 700; min-height: 1.4em; margin: 0; }

.d-kurallar { text-align: left; margin: 16px 0 20px; padding-left: 1.2em; display: grid; gap: 6px; }
.d-takma { background: var(--krem); border-radius: 18px; padding: 16px; margin-bottom: 12px; }
.d-takma-baslik { font-weight: 800; color: var(--soluk); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin: 0; }
.d-takma-ad { font: 800 clamp(1.6rem, 6vw, 2rem) var(--baslik); color: var(--mor); margin: 4px 0 10px; }
.d-takma .not { margin: 10px 0 0; }

/* ---------- soru: tek ekran ---------- */
body[data-ekran="soru"] { overflow: hidden; }
.d-soru {
  /* Şık kutusu: genişliğin üçte biri ya da yüksekliğin 15'te 2'si, hangisi küçükse. */
  --sik: min(calc((100vw - 64px) / 3), 14dvh, 190px);
  height: calc(100vh - var(--ust-h));
  height: calc(100dvh - var(--ust-h));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto auto;
  grid-template-areas: "ust" "gorsel" "siklar" "ileri";
  gap: 10px;
  padding: 10px 16px max(12px, env(safe-area-inset-bottom));
  max-width: 1200px;
  margin: 0 auto;
}
.d-soru-ust { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; grid-area: ust; }
.d-sira { margin: 0; font-size: 1.05rem; color: var(--soluk); }
.d-sira b { color: var(--mor); font-family: var(--baslik); font-size: 1.3rem; }
.d-sure { margin: 0; font: 800 1.3rem var(--baslik); color: var(--mor); font-variant-numeric: tabular-nums; min-width: 4.5ch; text-align: right; }
.d-sure.az { color: var(--turuncu-koyu); }
.d-sure-cubuk { grid-column: 1 / -1; height: 10px; border-radius: 99px; background: var(--cizgi); overflow: hidden; }
.d-sure-cubuk span { display: block; height: 100%; background: var(--mor); transform-origin: left; transition: transform .25s linear; }
.d-sure-cubuk span.az { background: var(--turuncu); }

.d-gorsel { grid-area: gorsel; position: relative; margin: 0; min-height: 0; }
.d-gorsel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }

.d-siklar { grid-area: siklar; display: grid; grid-template-columns: repeat(3, var(--sik)); gap: 14px; padding: 8px 0 0 8px; justify-content: center; align-content: center; }
.d-sik { position: relative; width: var(--sik); height: var(--sik); padding: 4px; background: #fff; border: 3px solid var(--cizgi); border-radius: 16px; cursor: pointer; transition: border-color .15s ease-out, transform .1s ease-out; -webkit-tap-highlight-color: transparent; }
.d-sik img { width: 100%; height: 100%; object-fit: contain; }
.d-sik:hover { border-color: var(--mor); }
.d-sik:active { transform: scale(.97); }
.d-sik[aria-checked="true"] { border-color: var(--mor); border-width: 5px; padding: 2px; background: #f7f0fa; box-shadow: 0 0 0 3px rgba(101, 21, 132, .18); }
.d-sik-no { position: absolute; top: -10px; left: -10px; min-width: 26px; height: 26px; padding: 0 6px; border-radius: 9px; background: var(--krem); border: 2px solid var(--cizgi); color: var(--yazi); font: 800 .95rem/22px var(--baslik); text-align: center; }
.d-sik[aria-checked="true"] .d-sik-no { background: var(--mor); border-color: var(--mor); color: #fff; }

.d-ileri { grid-area: ileri; width: min(420px, 100%); justify-self: center; min-height: 56px; font-size: 1.15rem; }
.dugme:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }

/* Yatay ekran (tablet, bilgisayar): soru solda, şıklar ve düğme sağda. */
@media (min-aspect-ratio: 5/4) {
  .d-soru {
    --sik: min(calc((100dvh - var(--ust-h) - 190px) / 2), 15vw, 200px);
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "ust ust" "gorsel siklar" "gorsel ileri";
    column-gap: 24px;
  }
  .d-ileri { width: 100%; }
}

/* dvh birimi olmayan eski tarayıcılar (iOS 15.4 ve Chrome 108 öncesi): vh ile aynı ölçü. */
@supports not (height: 1dvh) {
  .d-soru { --sik: min(calc((100vw - 64px) / 3), 14vh, 190px); }
  @media (min-aspect-ratio: 5/4) {
    .d-soru { --sik: min(calc((100vh - var(--ust-h) - 190px) / 2), 15vw, 200px); }
  }
}

/* ---------- sonuç ---------- */
.d-puan { font: 700 1.4rem var(--baslik); color: var(--soluk); margin: 0 0 12px; }
.d-puan b { font-size: 3.4rem; color: var(--mor); }
.d-sayilar { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.d-sayilar li { background: var(--krem); border-radius: 12px; padding: 6px 12px; font-weight: 700; }
.d-sayilar li.dogru { background: var(--dogru-zemin); color: var(--dogru); }
.d-sayilar li.yanlis { background: var(--yanlis-zemin); color: var(--yanlis); }

.d-cozumler { width: min(860px, 100% - 32px); margin: 0 auto; }
.d-cozum-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.d-cozum-ust h2 { margin: 0; font-size: 1.8rem; }
.d-suzgec { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; min-height: 44px; cursor: pointer; }
.d-suzgec input { width: 22px; height: 22px; accent-color: var(--mor); }
.d-cozumler ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.d-cozumler ol.yalniz-hata .d-cozum.dogru { display: none; }
.d-cozum { background: var(--kart); border-radius: 16px; box-shadow: var(--golge-kucuk); border-left: 6px solid var(--cizgi); }
.d-cozum.dogru { border-left-color: var(--dogru); }
.d-cozum.yanlis { border-left-color: var(--yanlis); }
.d-cozum details { background: transparent; border: 0; border-radius: 0; margin: 0; }
.d-cozum summary { display: flex; align-items: center; gap: 12px; padding: 12px 52px 12px 16px; min-height: 56px; }
.d-cozum-no { font: 800 1.2rem var(--baslik); color: var(--mor); min-width: 2ch; }
.d-cozum-tur { flex: 1; font-weight: 700; }
.d-rozet { display: inline-flex; align-items: center; gap: 4px; font-weight: 800; font-size: .9rem; padding: 4px 10px; border-radius: 99px; background: var(--krem); color: var(--soluk); }
.d-rozet svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.d-rozet.dogru { background: var(--dogru-zemin); color: var(--dogru); }
.d-rozet.yanlis { background: var(--yanlis-zemin); color: var(--yanlis); }
.d-cozum-ic { padding: 0 16px 16px; display: grid; gap: 12px; }
.d-cozum-soru { width: min(100%, 420px); margin: 0 auto; border-radius: 12px; border: 1px solid var(--cizgi); }
.d-cozum-siklar { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.d-cozum-siklar figure { position: relative; margin: 0; width: 140px; text-align: center; }
.d-cozum-siklar figcaption { font-weight: 800; font-size: .9rem; color: var(--soluk); margin-bottom: 4px; }
.d-cozum-siklar img { border: 3px solid var(--cizgi); border-radius: 14px; padding: 4px; background: #fff; }
.d-cozum-siklar .d-sik-no { top: 18px; }
.d-cozum.yanlis .d-cozum-siklar figure:first-child img { border-color: var(--yanlis); }
.d-cozum .d-cozum-siklar figure:last-child img { border-color: var(--dogru); }
.d-cozum-siklar figure.bos p { height: 140px; display: grid; place-items: center; border: 3px dashed var(--cizgi); border-radius: 14px; margin: 0; color: var(--soluk); font-weight: 700; }
.d-aciklama { margin: 0; color: var(--yazi); background: var(--krem); border-radius: 12px; padding: 12px 14px; }

.d-son-eylem { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 24px 16px 40px; }

@media (prefers-reduced-motion: reduce) {
  .d-sure-cubuk span { transition: none; }
}

/* ---------- takvim: geri sayım, paket, kazanılan kartlar ---------- */
.d-geri-sayim { font: 800 clamp(2.4rem, 10vw, 3.6rem) var(--baslik); color: var(--mor); font-variant-numeric: tabular-nums; margin: 4px 0 12px; }
.d-paket .kolek-sira, .d-kazanilan .kolek-sira { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.d-kazanilan { margin-top: 0; }
.d-kazanilan h2 { font-size: 1.5rem; }

/* ---------- albüm ---------- */
.album { padding-bottom: 24px; }
.album-seri { width: min(960px, 100% - 32px); margin: 0 auto 28px; }
.album-seri h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-size: 1.5rem; margin: 0 0 4px; }
.album-seri h2 small { font: 700 1rem var(--govde); color: var(--soluk); margin-left: auto; }
.album-yeni { font: 800 .8rem var(--govde); background: var(--turuncu); color: #2b1600; padding: 3px 10px; border-radius: 99px; }
.album-izgara { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.album-not { text-align: center; }

/* ---------- güç kartları (yalnız günlük deneme) ---------- */
.d-guc { grid-column: 1 / -1; display: flex; gap: 8px; margin-top: 4px; }
.d-guc-kart { position: relative; width: 40px; height: 52px; padding: 0; border: 2px solid var(--renk); border-radius: 9px; background: var(--renk); cursor: pointer; overflow: visible; box-shadow: 0 3px 8px rgba(0, 0, 0, .18); transition: transform .15s ease-out; }
.d-guc-kart img { width: 100%; height: 100%; object-fit: cover; border-radius: 7px; display: block; }
.d-guc-kart:hover:not(:disabled) { transform: translateY(-2px) rotate(-3deg); }
.d-guc-kart:disabled { filter: grayscale(1); opacity: .4; cursor: not-allowed; box-shadow: none; }
.d-guc-sayi { position: absolute; right: -7px; top: -7px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 99px; background: var(--turuncu); color: #2b1600; font: 800 .75rem/20px var(--govde); text-align: center; }
.d-guc-kart.patla { animation: guc-patla .5s ease-out; }
@keyframes guc-patla { 0% { transform: scale(1); } 40% { transform: scale(1.35) rotate(6deg); } 100% { transform: scale(1); } }
.d-ipucu { grid-column: 1 / -1; margin: 4px 0 0; padding: 6px 10px; border-radius: 10px; background: #fff7e8; border-left: 4px solid var(--turuncu); font-size: .92rem; font-weight: 700; line-height: 1.35; }
.d-sure.donuk { color: #0e7490; }
.d-sure.donuk::before { content: '❄ '; }
.d-sure-cubuk span.donuk { background: #38bdf8; }
.d-sik.silindi { opacity: .2; filter: grayscale(1); cursor: not-allowed; background: repeating-linear-gradient(45deg, #fff 0 8px, #f1edf5 8px 16px); }
.d-sik.silindi img { visibility: hidden; }
.d-guc-kazanc { display: flex; align-items: center; gap: 12px; text-align: left; background: var(--krem); border-radius: 14px; padding: 10px 12px; margin: 4px 0 12px; }
.d-guc-kazanc img { width: 48px; height: 64px; object-fit: cover; border-radius: 8px; flex: none; }
@media (prefers-reduced-motion: reduce) { .d-guc-kart.patla { animation: none; } }

/* ---------- giriş ve veli paneli ---------- */
.g-form { display: grid; gap: 8px; text-align: left; margin-top: 16px; }
.g-form label, .g-etiket { font-weight: 800; margin: 0; }
.g-form input[type="tel"], .g-form input[inputmode="numeric"], .g-form input[name="gercek_ad"] { font: 700 1.2rem var(--govde); padding: 10px 14px; border: 3px solid var(--cizgi); border-radius: 14px; min-height: 54px; width: 100%; }
.g-form input:focus { border-color: var(--mor); outline: none; }
.g-onay { display: flex; gap: 10px; align-items: flex-start; font-weight: 600 !important; font-size: .92rem; }
.g-onay input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--mor); flex: none; }
.g-baglanti { background: none; border: 0; padding: 8px 4px; min-height: 44px; font: 800 .95rem var(--govde); color: var(--mor); cursor: pointer; text-decoration: underline; }
.g-baglanti:disabled { color: var(--soluk); text-decoration: none; cursor: default; }
.g-metin { text-align: left; }
.g-metin h2 { font-size: 1.2rem; margin: 20px 0 6px; }
.g-metin ul { padding-left: 1.2em; display: grid; gap: 4px; }

/* ---------- sıralama ---------- */
.siralama { width: min(820px, 100% - 32px); margin: 0 auto; padding-bottom: 32px; }
.s-baslik { text-align: center; margin: 24px 0 8px; }
.s-baslik h1 { font-size: clamp(2rem, 7vw, 2.8rem); margin: 0; }
.s-benim { text-align: left; }
.s-benim h2 { font-size: 1.3rem; margin: 0 0 8px; }
.s-benim ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.s-benim li { display: flex; gap: 12px; align-items: center; }
.s-benim li span, .s-liste span { display: block; color: var(--soluk); font-weight: 700; font-size: .92rem; }
.s-kucuk-kart { width: 54px; flex: none; }
.s-kucuk-kart .kolek { max-width: none; border-radius: 9px; padding: 0; }
.s-kucuk-kart .kolek-serit, .s-kucuk-kart .kolek-yildiz { display: none; }
.s-kucuk-kart .kolek-resim { inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); border-radius: 7px; }
.s-avatar-bos { aspect-ratio: 3 / 4; border-radius: 9px; background: var(--cizgi); display: grid; place-items: center; font: 800 1.4rem var(--baslik); color: var(--soluk); }
.s-kursu { display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 10px; margin: 28px 0 8px; }
.s-basamak { display: grid; justify-items: center; text-align: center; gap: 4px; }
.s-kart { width: min(130px, 100%); }
.s-1 .s-kart { width: min(160px, 100%); }
.s-ad { margin: 4px 0 0; font: 800 1.05rem var(--baslik); color: var(--mor); }
.s-puan { margin: 0; font-size: .85rem; font-weight: 700; color: var(--soluk); }
.s-blok { width: 100%; display: grid; place-items: center; border-radius: 14px 14px 0 0; color: #fff; font: 800 2rem var(--baslik); margin-top: 6px; }
.s-1 .s-blok { height: 110px; background: linear-gradient(180deg, #ffd54a, #c99700); color: #2b1600; }
.s-2 .s-blok { height: 80px; background: linear-gradient(180deg, #e5e7eb, #9ca3af); color: #1f2937; }
.s-3 .s-blok { height: 60px; background: linear-gradient(180deg, #f3b07c, #b8642b); }
.s-basamak.benim .s-ad::after, .s-liste li.benim b::after { content: ' (siz)'; color: var(--turuncu-koyu); font-size: .8em; }
.s-liste { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.s-liste li { display: grid; grid-template-columns: 34px 54px 1fr; grid-template-rows: auto auto; align-items: center; column-gap: 12px; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: var(--golge-kucuk); }
.s-liste li.benim { outline: 3px solid var(--turuncu); }
.s-liste .s-no { grid-row: 1 / 3; font: 800 1.3rem var(--baslik); color: var(--mor); }
.s-liste .s-kucuk-kart { grid-row: 1 / 3; }
.s-not { text-align: center; }

.s-kupon { display: block; margin-top: 4px; padding: 6px 10px; border-radius: 10px; background: #fff7e0; color: #7a4a00 !important; font-weight: 700; }


/* ---------- uyarlanır günlük deneme ---------- */
.d-zorluk { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.d-zorluk i { width: 9px; height: 9px; border-radius: 50%; background: var(--cizgi); transition: background-color .3s ease-out; }
.d-zorluk i.dolu { background: var(--turuncu); }
.d-zorluk-not { background: var(--krem); border-radius: 14px; padding: 10px 14px; font-weight: 700; }

/* Anaokulu üreteci soruları (1. ve 2. sınıfın kolay basamakları): resim değil, tarayıcıda çizilen SVG. */
.d-yonerge { grid-column: 1 / -1; margin: 0; font-weight: 800; font-size: 1.05rem; line-height: 1.35; color: var(--yazi); }
.d-ana-kok { position: absolute; inset: 0; display: grid; place-items: center; container-type: size; }
.d-ana-kok .kok { display: grid; gap: 8px; align-items: center; justify-items: center; }
.d-ana-kok .kutu { width: var(--kutu); aspect-ratio: 1; padding: calc(var(--kutu) * .08); border-radius: 14px; background: #fff; border: 3px solid var(--cizgi); }
.d-ana-kok .soru-kutusu { display: grid; place-items: center; padding: 0; font: 800 calc(var(--kutu) * .45) / 1 var(--baslik); color: var(--mor); border: 3px dashed var(--mor); background: #f7f0fa; }
.d-ana-kok .kok-analoji { --kutu: min(27cqw, 42cqh); grid-template-columns: auto auto auto; }
.d-ana-kok .kok-sira { --kutu: min(14cqw, 60cqh); display: flex; flex-wrap: wrap; justify-content: center; }
.d-ana-kok .kok-tek { --kutu: min(70cqw, 85cqh); }
.d-ana-kok .kok-matris { --kutu: min(calc(88cqh / var(--boyut) - 8px), calc(70cqw / var(--boyut))); grid-template-columns: repeat(var(--boyut), auto); }
.d-ana-kok .kok-toplama { --kutu: min(36cqw, 75cqh); display: flex; gap: 12px; }
.d-ana-kok .ok svg { width: 30px; height: 30px; fill: none; stroke: var(--soluk); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.d-ana-kok .arti { font: 800 48px / 1 var(--baslik); color: var(--mor); }
.d-ana-sik { display: block; width: 100%; height: 100%; padding: 10%; }
/* Kökü olmayan soru (Farklı Olanı Bul): şıklar büyür, ekranın ortasına gelir. */
.d-soru.yalniz-sik { --sik: min(calc((100vw - 56px) / 2), 24dvh, 230px); grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "ust" "siklar" "ileri"; }
.d-soru.yalniz-sik .d-gorsel { display: none; }
.d-soru.yalniz-sik .d-siklar { grid-template-columns: repeat(auto-fit, var(--sik)); }
@media (min-aspect-ratio: 5/4) { .d-soru.yalniz-sik { --sik: min(calc((100dvh - var(--ust-h) - 220px) / 2), 22vw, 240px); grid-template-areas: "ust" "siklar" "ileri"; } .d-soru.yalniz-sik .d-ileri { width: min(420px, 100%); } }
.hucre-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.hucre-svg * { stroke-width: 4px; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.hucre-svg .ince, .hucre-svg .ince * { stroke-width: 1.5px; }
.hucre-svg .ayna-cizgisi { stroke-width: 3px; }
.d-ana-kok.d-cozum-soru { position: relative; inset: auto; width: min(100%, 420px); height: 240px; margin: 0 auto; border-radius: 12px; border: 1px solid var(--cizgi); background: #fff; }
.d-cozum-siklar .d-ana-sik { width: 140px; height: 140px; border: 3px solid var(--cizgi); border-radius: 14px; background: #fff; }
.d-cozum.yanlis .d-cozum-siklar figure:first-child .d-ana-sik { border-color: var(--yanlis); }
.d-cozum .d-cozum-siklar figure:last-child .d-ana-sik { border-color: var(--dogru); }

/* Sıralama: sınıf sekmeleri */
.s-siniflar { display: flex; justify-content: center; gap: 8px; margin: 12px 0 4px; }
.s-siniflar a { min-height: 44px; padding: 8px 16px; border-radius: 99px; border: 2px solid var(--cizgi); background: #fff; font-weight: 800; text-decoration: none; display: inline-flex; align-items: center; }
.s-siniflar a[aria-current="page"] { background: var(--mor); border-color: var(--mor); color: #fff; }