/* Kelime Tekrar: mobil öncelikli, sade. Marka renkleri: iyi #00008B, hedef #15B85C. */
:root {
  --zemin: hsl(var(--ih-zemin)); --yuzey: hsl(var(--ih-kart)); --yuzey2: hsl(var(--ih-sessiz)); --metin: hsl(var(--ih-metin)); --soluk: hsl(var(--ih-sessiz-metin)); --cizgi: hsl(var(--ih-kenar-girdi) / .45);
  --iyi: hsl(var(--ih-birincil)); --hedef: hsl(var(--ih-vurgu-metin)); --vurgu: hsl(var(--ih-birincil)); --vurgu-metin: hsl(var(--ih-birincil-uzeri));
  --dogru: #0f7a3d; --dogru-zemin: #dff3e6; --yanlis: #b3261e; --yanlis-zemin: #fbe3e1; --uyari-zemin: #fff3d6; --uyari: #7a5200;
  --golge: var(--ih-golge);
}
:root[data-tema=koyu] {
  --dogru: #5fdc92; --dogru-zemin: #173324; --yanlis: #ff8a80; --yanlis-zemin: #3b1f1d; --uyari-zemin: #3a2f12; --uyari: #f2c35c;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--zemin); color: var(--metin); font: 17px/1.55 Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; display: flex; flex-direction: column; min-height: 100dvh; -webkit-font-smoothing: antialiased; }
a { color: var(--iyi); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .6rem; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; }
p { margin: 0 0 .8rem; }
button, input, select, textarea { font: inherit; color: inherit; }
.kap { max-width: 760px; margin: 0 auto; padding: 0 16px; width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.atla { position: absolute; left: -999px; top: 0; background: var(--yuzey); padding: 8px 12px; z-index: 10; }
.atla:focus { left: 8px; top: 8px; }
:focus-visible { outline: 3px solid var(--vurgu); outline-offset: 2px; }
main { padding-top: 16px; padding-bottom: 32px; flex: 1 0 auto; outline: none; }
h1:focus { outline: none; }
.gizli { display: none !important; }
.soluk { color: var(--soluk); } .kucuk { font-size: .88rem; }
.yukleniyor { color: var(--soluk); }

.app-bar { background: var(--yuzey); border-bottom: 1px solid var(--cizgi); }
.app-ic { display: flex; align-items: center; gap: 12px; padding-top: 6px; padding-bottom: 6px; flex-wrap: wrap; }
.app-ad { font-weight: 700; font-size: 1.02rem; text-decoration: none; margin-right: auto; color: var(--metin); display: inline-flex; align-items: center; gap: 8px; }
.app-ad::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: hsl(var(--ih-vurgu)); }
.app-gezinme { display: flex; gap: 14px; flex-wrap: wrap; }
.app-gezinme a { text-decoration: none; padding: 8px 2px; font-size: .92rem; color: var(--metin); }
.app-gezinme a:hover { text-decoration: underline; }


.dugme { appearance: none; border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 12px; padding: 10px 16px; cursor: pointer; min-height: 46px; text-align: center; }
.dugme:hover { background: var(--yuzey2); }
.dugme.ana { background: var(--vurgu); border-color: var(--vurgu); color: var(--vurgu-metin); font-weight: 700; }
.dugme.ana:hover { filter: brightness(1.1); }
.dugme.hafif { background: transparent; }
.dugme.tehlike { border-color: var(--yanlis); color: var(--yanlis); }
.dugme[disabled] { opacity: .5; cursor: not-allowed; }
.ses-dugme { min-height: 40px; padding: 6px 12px; font-size: .9rem; }
.ses-dugme[aria-pressed="true"] { background: var(--dogru-zemin); border-color: var(--dogru); color: var(--dogru); }

.kutu { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px; margin-bottom: 14px; box-shadow: var(--golge); }
.not { border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; background: var(--uyari-zemin); color: var(--uyari); font-size: .94rem; }
.not.bilgi { background: var(--yuzey2); color: var(--metin); }
.not.hata { background: var(--yanlis-zemin); color: var(--yanlis); }
.rozet { display: inline-block; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 99px; background: var(--uyari-zemin); color: var(--uyari); vertical-align: middle; }

.satir { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.satir > .esnek { flex: 1; min-width: 0; }
.izgara { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

.kaynak-sec { display: grid; gap: 8px; }
.kaynak { text-align: left; border: 2px solid var(--cizgi); background: var(--yuzey); border-radius: 12px; padding: 12px 14px; cursor: pointer; display: block; width: 100%; }
.kaynak[aria-pressed="true"] { border-color: var(--vurgu); background: var(--yuzey2); }
.kaynak small { display: block; color: var(--soluk); }
.mod { text-align: left; border: 1px solid var(--cizgi); background: var(--yuzey); border-radius: 12px; padding: 12px 14px; cursor: pointer; width: 100%; min-height: 76px; }
.mod:hover:not([disabled]) { border-color: var(--vurgu); }
.mod strong { display: block; } .mod span { color: var(--soluk); font-size: .88rem; }
.mod[disabled] { opacity: .55; cursor: not-allowed; }
.ozet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.ozet div { background: var(--yuzey2); border-radius: 10px; padding: 8px 4px; }
.ozet b { display: block; font-size: 1.3rem; } .ozet span { font-size: .75rem; color: var(--soluk); }

.oyun-ust { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-weight: 700; margin-bottom: 8px; }
.oyun-ust .dg { color: var(--dogru); } .oyun-ust .yn { color: var(--yanlis); }
.cubuk { height: 10px; background: var(--yuzey2); border-radius: 6px; overflow: hidden; margin-bottom: 16px; }
.cubuk > i { display: block; height: 100%; background: var(--hedef); transition: width .2s; }
.soru { font-size: 1.5rem; font-weight: 700; margin: 6px 0 14px; overflow-wrap: anywhere; }
.istem { color: var(--soluk); margin-bottom: 4px; }
.secenekler { display: grid; gap: 10px; margin-bottom: 14px; }
.secenek { text-align: left; border: 2px solid var(--cizgi); background: var(--yuzey); border-radius: 12px; padding: 12px 14px; min-height: 52px; cursor: pointer; display: flex; gap: 10px; align-items: center; }
.secenek .no { font-weight: 800; color: var(--soluk); min-width: 1.2em; }
.secenek:hover:not([disabled]) { border-color: var(--vurgu); }
.secenek.dogru { border-color: var(--dogru); background: var(--dogru-zemin); }
.secenek.yanlis { border-color: var(--yanlis); background: var(--yanlis-zemin); }
.secenek[disabled] { cursor: default; }
.geri-bildirim { border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.geri-bildirim.dogru { background: var(--dogru-zemin); color: var(--dogru); }
.geri-bildirim.yanlis { background: var(--yanlis-zemin); color: var(--yanlis); }
.geri-bildirim p { margin: 0 0 4px; } .geri-bildirim .tr { color: var(--soluk); }

.diyalog { display: grid; gap: 8px; margin-bottom: 14px; }
.d-satir { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 12px; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.d-satir .kim { font-weight: 800; color: var(--iyi); min-width: 1.4em; }
.d-satir .metin { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.d-satir .tr { display: block; color: var(--soluk); font-size: .88rem; }
.d-satir.dogru { border-color: var(--dogru); } .d-satir.yanlis { border-color: var(--yanlis); }
.d-oklar { display: flex; gap: 6px; }
.d-oklar .dugme { min-height: 40px; min-width: 40px; padding: 6px 10px; }

.esle-sutunlar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 14px; }
.esle-sutunlar > div { display: grid; gap: 8px; align-content: start; }
.esle-oge { border: 2px solid var(--cizgi); background: var(--yuzey); border-radius: 12px; padding: 10px; min-height: 52px; cursor: pointer; text-align: center; overflow-wrap: anywhere; }
.esle-oge[aria-pressed="true"] { border-color: var(--vurgu); background: var(--yuzey2); }
.esle-oge.eslesti { border-color: var(--dogru); background: var(--dogru-zemin); cursor: default; }
.esle-oge.hata { border-color: var(--yanlis); background: var(--yanlis-zemin); }

.liste-kart { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.kelime-satir { display: flex; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--cizgi); flex-wrap: wrap; }
.kelime-satir .esnek { flex: 1; min-width: 150px; overflow-wrap: anywhere; }
.durum-ozel { font-size: .72rem; padding: 1px 7px; border-radius: 99px; background: var(--yuzey2); color: var(--soluk); margin-left: 6px; }
label { display: block; font-weight: 600; margin-bottom: 4px; }
input[type=text], input[type=email], input[type=password], select, textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--cizgi); border-radius: 10px; background: var(--yuzey); min-height: 46px; }
input[type=checkbox] { width: 20px; height: 20px; vertical-align: middle; margin-right: 8px; }
.alan { margin-bottom: 12px; }
.alan.onay label { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.sekmeler { display: flex; gap: 8px; margin-bottom: 14px; }
.sekmeler .dugme[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-metin); border-color: var(--vurgu); }
ul.temiz { list-style: none; padding: 0; margin: 0 0 8px; }
ul.temiz li { padding: 4px 0; overflow-wrap: anywhere; }
.sonuc-puan { font-size: 2.4rem; font-weight: 800; color: var(--hedef); }

@media (max-width: 520px) {
  body { font-size: 16px; }
  .ozet { grid-template-columns: repeat(2, 1fr); }
  .soru { font-size: 1.3rem; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Ana ekran: tek ekranlık kart */
body:has(.ana-kart) main { padding-top: 8px; padding-bottom: 8px; min-height: 0; }
.ana-kart { max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; height: calc(100dvh - 150px); min-height: 400px; max-height: 680px; }
.sekmeler { display: flex; gap: 6px; background: var(--yuzey2); padding: 4px; border-radius: 14px; }
.sekme { flex: 1; appearance: none; border: 0; background: transparent; border-radius: 10px; padding: 10px 6px; min-height: 44px; font-weight: 700; cursor: pointer; color: var(--soluk); }
.sekme[aria-selected="true"] { background: var(--vurgu); color: var(--vurgu-metin); }
.secimler { display: grid; gap: 10px; grid-template-columns: 1fr 2fr; }
.secimler > .secim:only-child { grid-column: 1 / -1; }
.secim { display: block; font-weight: 400; margin: 0; }
.secim span { display: block; font-size: .78rem; color: var(--soluk); margin-bottom: 2px; }
.secim select { min-height: 46px; }
.durum-satir { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .84rem; flex-wrap: wrap; }
.durum-islem { display: inline-flex; gap: 14px; align-items: center; }
.baglanti { appearance: none; border: 0; background: none; padding: 4px 0; color: var(--iyi); text-decoration: underline; cursor: pointer; font-size: .84rem; }
.mod-izgara { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; gap: 10px; min-height: 0; }
.mod-dugme { appearance: none; border: 2px solid var(--cizgi); background: var(--yuzey); border-radius: 14px; font-weight: 700; font-size: 1rem; cursor: pointer; padding: 8px; box-shadow: var(--golge); min-height: 56px; }
.mod-dugme:hover:not([disabled]) { border-color: var(--vurgu); background: var(--yuzey2); }
.mod-dugme[disabled] { opacity: .4; cursor: not-allowed; box-shadow: none; }
@media (max-width: 420px) { .secimler { grid-template-columns: 1fr; } .ana-kart { height: calc(100dvh - 176px); gap: 10px; } }
@media (max-height: 600px) { .ana-kart { min-height: 0; height: auto; } .mod-dugme { min-height: 48px; } }

/* Ses dosyası indirme */
.ses-kart { display: grid; gap: 12px; margin: 8px 0 12px; }
.ses-satir { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.ses-segment { display: inline-flex; gap: 4px; background: var(--yuzey2); padding: 4px; border-radius: 12px; min-width: 150px; }
.ses-segment .sekme { padding: 8px 12px; min-height: 40px; }
.ses-segment .sekme[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-metin); }
.ses-sonuc { display: grid; gap: 10px; margin: 12px 0; }
.ses-sonuc audio, .ses-sonuc progress { width: 100%; }

/* Uygulama çubuğu: telefonda ad + ses düğmesi üstte, bağlantılar altta tek satır */
@media (max-width: 560px) {
  .app-gezinme { order: 3; width: 100%; justify-content: space-between; gap: 8px; }
  .app-ic { row-gap: 0; padding-top: 4px; padding-bottom: 2px; }
  .app-gezinme a { padding: 6px 2px; }
  .ses-dugme { min-height: 34px; padding: 4px 10px; font-size: .84rem; }
}