/* İkra — Aussehen.

   Ruhig und fast schwarz-weiß, eine Akzentfarbe, große Flächen: das Kind
   soll tippen können, ohne zu zielen. Der arabische Text ist der Star —
   alles andere tritt zurück. Tokens wie in der Familie (tasarim-sistemi). */

@font-face {
  font-family: 'Hafs';
  src: url('/yazi/hafs.woff2') format('woff2');
  font-display: block;   /* lieber einen Moment warten als falsche Buchstaben */
}

:root {
  --papier: #f7f6f2;
  --karte: #ffffff;
  --tinte: #243b39;
  --leise: #61716d;
  --linie: #dce4de;
  --akzent: #21756b;
  --akzent-zemin: #e6efea;
  --dogru: #25644b;
  --dogru-zemin: #e7f2e8;
  --sicak: #8d4c36;
  --sicak-zemin: #f5efe2;
  --kirmizi: #b3432b;
  --rundung: 20px;
  --golge: 0 8px 32px rgba(36, 59, 57, 0.04);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--papier);
  color: var(--tinte);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

.perde {
  min-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px 24px calc(32px + env(safe-area-inset-bottom));
}

.marka {
  margin: 0;
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dar {
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.etiket { font-size: 16px; color: var(--leise); margin: 0; }
.hata { color: var(--kirmizi); font-size: 16px; margin: 0; }

input[type="password"] {
  width: 100%;
  font: inherit;
  font-size: 22px;
  padding: 16px 18px;
  border: 2px solid var(--linie);
  border-radius: var(--rundung);
  background: var(--karte);
  color: var(--tinte);
}
input[type="password"]:focus { outline: none; border-color: var(--akzent); }

button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }

.birincil {
  background: var(--akzent);
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  padding: 16px 28px;
  border-radius: var(--rundung);
  min-height: 60px;
}
.birincil:disabled { opacity: .4; }

.ikincilKnopf {
  background: var(--sicak-zemin);
  color: var(--sicak);
  font-size: 18px;
  font-weight: 600;
  padding: 16px 24px;
  border-radius: var(--rundung);
  min-height: 60px;
}

/* Der eine große Knopf auf der Startseite — eine Einladung, kein Formular */
.buyukKnopf {
  width: min(62vw, 260px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--akzent);
  color: #fff;
  font-size: 32px;
  font-weight: 700;
  box-shadow: var(--golge);
}
.buyukKnopf:active { transform: scale(.97); }

/* ------------------------------------------------------------ Die Sitzung */

/* Feste Bühne: oben die Einordnung, unten die Knöpfe — IMMER sichtbar.
   Nur der Text in der Mitte scrollt, wenn eine Sure nicht ganz passt. */
.calisma {
  height: 100dvh;
  min-height: 0;
  justify-content: space-between;
  gap: 12px;
}

.calisma .metin {
  overflow-y: auto;
  min-height: 0;
  flex: 1;
  -webkit-overflow-scrolling: touch;
}

.ust {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* Abschnitts-Punkte: wo bin ich in der heutigen Arbeit */
.adimlar { display: flex; gap: 8px; }
.adimlar i {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--linie);
}
.adimlar i.simdiki { background: var(--akzent); }
.adimlar i.gecti { background: var(--akzent-zemin); border: 1px solid var(--akzent); }

/* Der arabische Text — der Star. Groß, ruhig, viel Luft zwischen den Zeilen. */
.arabi {
  font-family: 'Hafs', serif;
  direction: rtl;
  text-align: center;
}

.besmele { font-size: clamp(26px, 5vw, 36px); color: var(--leise); margin: 0; }

.metin {
  font-size: clamp(38px, 8vw, 64px);
  line-height: 2.05;
  max-width: 820px;
  padding: 8px 4px;
}

.metin .kelime {
  display: inline-block;
  padding: 0 .12em;
  border-radius: 12px;
  transition: background .15s, color .15s, filter .2s;
}

/* Wort, das gerade erklingt */
.metin .kelime.aktif { background: var(--akzent-zemin); color: var(--akzent); }

/* Verstecktes Wort: verschwommen statt ersetzt — die FORM bleibt als leiser
   Anker sichtbar, wie ein Blick durchs Milchglas auf die Mushaf-Seite */
.metin .kelime.gizli { filter: blur(12px); opacity: .55; }
.metin .kelime.gizli.acik { filter: none; opacity: 1; color: var(--sicak); }

/* Wörter außerhalb des geübten Abschnitts treten zurück */
.metin .kelime.soluk { opacity: .25; }

.metin .ayetSonu {
  display: inline-block;
  color: var(--leise);
  font-size: .75em;
  padding: 0 .3em;
}

.meal {
  font-size: 17px;
  color: var(--leise);
  max-width: 560px;
  text-align: center;
  margin: 0;
}

.alt {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 120px;
  justify-content: flex-end;
}

.yonerge { font-size: 18px; color: var(--leise); margin: 0; text-align: center; }

/* „Jetzt du" — die Lücke, in der Musab spricht. Pulsiert leise, kein Text-Zwang. */
.soyle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 600;
  color: var(--akzent);
  background: var(--akzent-zemin);
  padding: 14px 24px;
  border-radius: var(--rundung);
}
.soyle span {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--akzent);
  animation: nabiz 1s ease-in-out infinite;
}
@keyframes nabiz {
  0%, 100% { transform: scale(.7); opacity: .5; }
  50% { transform: scale(1.15); opacity: 1; }
}

.dugmeler { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* -------------------------------------------------------------- Aufnahme */

.kayitBaslik { margin: 0; font-size: 26px; font-weight: 700; }

.kayitKnopf {
  width: 140px; height: 140px;
  border-radius: 50%;
  background: var(--karte);
  border: 3px solid var(--linie);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--golge);
}
.kayitKnopf span {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--kirmizi);
  transition: border-radius .2s, transform .2s;
}
.kayitKnopf.calisiyor span {
  border-radius: 12px;
  transform: scale(.72);
  animation: nabiz 1.4s ease-in-out infinite;
}

/* ---------------------------------------------------------- Grüner Moment */

.vurgulu {
  background: var(--dogru);
  color: #fff;
}
.isaret { width: 120px; height: 120px; }
.isaret .cizgi {
  stroke-dasharray: 60;
  stroke-dashoffset: 60;
  animation: ciz .6s .2s ease forwards;
}
@keyframes ciz { to { stroke-dashoffset: 0; } }
.vurguSoz { font-size: 26px; font-weight: 700; margin: 0; }