/* Hallmark · macrostructure: Halka + Panel (cami çarkı dili) · tone: warm/heritage · anchor hue: İznik kobalt
 * theme: custom, mustafa.ink/cami çarkından uyarlandı (bkz. cami-cark): krem zemin + nokta dokusu, 7 İznik rengi, beyaz panel; YALNIZ AÇIK tema (cami çarkı gibi)
 * paper warm-cream · accent kobalt · display: Cormorant Garamond + Source Sans 3 (Arapça: Amiri) · yarıçap: kart 6px, düğme hap
 * sadeleştirme turu: kart ve süs azaldı, tek kahraman halka, renk = anlam teması
 * pre-emit critique: P4 H5 E4 S4 R5 V4
 * Yazı tipleri sayfaya gömülüdür (fonts/), dış bağlantı yok. Renkler yalnız belirteçlerden gelir.
 */
@font-face { font-family: "Amiri"; font-weight: 400; font-display: swap; src: url("../fonts/amiri-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-weight: 600; font-display: swap; src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-ext-400.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-weight: 400; font-display: swap; src: url("../fonts/source-sans-3-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-ext-600.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-weight: 600; font-display: swap; src: url("../fonts/source-sans-3-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3-latin-ext-700.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Source Sans 3"; font-weight: 700; font-display: swap; src: url("../fonts/source-sans-3-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --zemin: #f4f2ec; --kagit: #ffffff; --cizgi: #c9d2de; --murekkep: #14213d; --soluk: #56627a; --vurgu: #1f3f8f; --turkuaz: #187a7c;
  --g0: #1f3f8f; --g1: #c4412f; --g2: #187a7c; --g3: #3b3570; --g4: #8a5a2b;   /* 1 Rahmet-Cemâl, 2 Celâl, 3 Kudret, 4 İlim, 5 Zât */
  --font-arapca: "Amiri", "Geeza Pro", "Noto Naskh Arabic", serif;
  --font-baslik: "Cormorant Garamond", Georgia, serif;
  --font-metin: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --golge: 0 8px 28px rgba(20, 33, 61, .09);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }
body { margin: 0; min-height: 100dvh; color: var(--murekkep); font: 400 17px/1.55 var(--font-metin); font-variant-numeric: lining-nums;
  background-color: var(--zemin); background-image: radial-gradient(color-mix(in srgb, var(--soluk) 22%, transparent) 1px, transparent 1px); background-size: 22px 22px; }
:focus-visible { outline: 2px solid var(--murekkep); outline-offset: 3px; }

.sayfa { max-width: 1240px; margin: 0 auto; padding: clamp(14px, 3vw, 32px); }
.ust { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 10px 32px; padding-bottom: clamp(6px, 1.4vw, 14px); }
h1 { margin: 0; font: 600 clamp(30px, 4vw, 44px)/1.05 var(--font-baslik); color: var(--vurgu); overflow-wrap: anywhere; }
.alt-baslik { margin: 4px 0 0; font-size: 15px; color: var(--soluk); }
.ilerleme-satiri { display: flex; align-items: center; gap: 12px; width: min(100%, 300px); }
.ilerleme { flex: 1; height: 3px; background: var(--cizgi); border-radius: 999px; overflow: hidden; }
.ilerleme i { display: block; height: 100%; width: 100%; clip-path: inset(0 100% 0 0); background: var(--turkuaz); transition: clip-path .5s var(--ease-out); }
.sayac { font-variant-numeric: tabular-nums lining-nums; color: var(--soluk); font-weight: 600; white-space: nowrap; }

/* tek kahraman: halka. Sağda açık okuma sütunu */
.sahne { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }

/* halka: 99 dilim, renk = anlam teması; okunan tam renk + beyaz yazı, kalan açık ton + koyu yazı */
.halka-kutu { position: relative; aspect-ratio: 1; width: 100%; max-width: 760px; margin: 0 auto; container-type: inline-size; }
.halka-kutu::before { content: ""; position: absolute; inset: -4%; border-radius: 50%; background: radial-gradient(closest-side, #fff 0, rgba(255, 255, 255, .8) 62%, rgba(255, 255, 255, 0) 100%); pointer-events: none; }
#halka { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 10px 18px rgba(20, 33, 61, .12)); }
.gol { fill: var(--kagit); stroke: var(--cizgi); stroke-width: 1.5; }
.isaret { fill: var(--g); stroke: var(--kagit); stroke-width: 2; paint-order: stroke; opacity: 0; transition: opacity .3s; pointer-events: none; }
.isaret.gorunur { opacity: 1; }
.dilim { cursor: pointer; transition: opacity .3s; }
.dilim path { fill: var(--g); fill-opacity: .16; stroke: none; transition: fill-opacity .3s var(--ease-out); }
.dilim text { font: 600 20px var(--font-metin); fill: var(--murekkep); dominant-baseline: central; pointer-events: none; transition: fill .3s; }
.dilim.okundu path { fill-opacity: 1; }
.dilim.okundu text { fill: #fff; }
.dilim:hover path { fill-opacity: .55; }
.dilim.okundu:hover path { fill-opacity: .85; }
.dilim.secili path { fill-opacity: 1; stroke: var(--murekkep); stroke-width: 4; paint-order: stroke; }
.dilim.secili text { fill: #fff; font-weight: 700; }
.dilim.sonuk { opacity: .22; }
.merkez { position: absolute; left: 50%; top: 50%; width: 41%; aspect-ratio: 1; transform: translate(-50%, -50%); display: grid; place-content: center; text-align: center; border-radius: 50%; background: var(--kagit); box-shadow: 0 0 0 1.5px var(--cizgi), 0 0 0 7px var(--kagit), 0 0 0 8px var(--cizgi); pointer-events: none; }
.sira { min-height: 1.2em; font: 600 clamp(18px, 4.6cqw, 32px)/1.2 var(--font-baslik); color: var(--soluk); font-variant-numeric: tabular-nums lining-nums; }
.arapca { margin: 0; padding-top: .1em; font: 400 12.5cqw/1.7 var(--font-arapca); color: var(--murekkep); overflow-wrap: anywhere; }

/* Arapça ismin yazılışı: soldan sağa değil, kalemin gittiği yönde (sağdan sola) yumuşak bir maskeyle açılır */
.yaz { display: inline-block; -webkit-mask: linear-gradient(to left, #000 46%, transparent 54%) 100% 0 / 250% 100% no-repeat; mask: linear-gradient(to left, #000 46%, transparent 54%) 100% 0 / 250% 100% no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  .yaz.yaziliyor { animation: yaz-sag var(--sure, 800ms) cubic-bezier(.45, .05, .35, 1) both; }
  @keyframes yaz-sag { from { mask-position: 0% 0; -webkit-mask-position: 0% 0; } to { mask-position: 100% 0; -webkit-mask-position: 100% 0; } }
  .dilim { animation: dilim-gir .5s var(--ease-out) backwards; animation-delay: calc(var(--i) * 9ms); }
  @keyframes dilim-gir { from { opacity: 0; } to { opacity: 1; } }
}

/* okuma sütunu: kartsız, geniş boşluklu tipografi */
.okuma { --g: var(--g0); min-width: 0; }
.rozet { display: inline-block; margin-bottom: 14px; padding: 4px 14px; border-radius: 999px; background: color-mix(in srgb, var(--g) 12%, transparent); color: var(--g); font: 700 14px/1.5 var(--font-metin); transition: color .3s, background-color .3s; }
.bilgi { min-height: 9.5em; }
.bilgi h2 { margin: 0; font: 600 clamp(40px, 5vw, 64px)/1.02 var(--font-baslik); color: var(--vurgu); overflow-wrap: anywhere; }
.anlam { margin: 10px 0 0; font-size: 21px; line-height: 1.3; color: var(--g); font-weight: 700; transition: color .3s; }
.aciklama { margin: 12px 0 0; max-width: 30em; color: var(--soluk); font-size: 18px; text-wrap: pretty; }

.kontrol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 22px 0 4px; }
button { font: 600 16px/1 var(--font-metin); padding: 12px 20px; min-height: 44px; border: 1px solid var(--cizgi); background: transparent; color: var(--murekkep); border-radius: 999px; cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s, transform .1s; }
button:hover { border-color: var(--soluk); }
button:active { transform: translateY(1px); }
button#oynat { background: var(--vurgu); border-color: var(--vurgu); color: var(--kagit); min-width: 8em; }
button#oynat:hover { filter: brightness(1.1); }
button.ikincil { border-color: transparent; padding-inline: 12px; color: var(--soluk); }
button.ikincil:hover { color: var(--murekkep); border-color: var(--cizgi); }
button.ikincil[aria-pressed="false"] { text-decoration: line-through; text-decoration-thickness: 1px; }
.ses-not { min-height: 1.4em; margin: 0; font-size: 15px; color: var(--soluk); }

/* lejant: anlam temaları (cami çarkındaki bölge listesi gibi); basınca halkada öne çıkar */
.lejant { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 2px; }
.lejant-oge { display: grid; grid-template-columns: 14px 1fr auto; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; font-weight: 600; font-size: 16px; }
.lejant-oge:hover { background: color-mix(in srgb, var(--g) 9%, transparent); }
.lejant-oge[aria-pressed="true"] { background: color-mix(in srgb, var(--g) 14%, transparent); }
.lejant-oge .nokta { width: 12px; height: 12px; border-radius: 50%; background: var(--g); }
.lejant-oge .sayi { color: var(--soluk); font-variant-numeric: tabular-nums lining-nums; font-weight: 500; }

/* 99 ismin ızgarası: sade kartlar, renk yalnız küçük işaret ve seçimde */
.izgara-kutu { margin-top: clamp(28px, 4vw, 48px); }
.izgara-kutu h2 { display: flex; align-items: center; gap: 16px; margin: 0 0 16px; font: 600 30px/1.1 var(--font-baslik); color: var(--vurgu); }
.izgara-kutu h2::after { content: ""; flex: 1; height: 1px; background: var(--cizgi); }
.izgara { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 10px; }
.izgara-oge { position: relative; display: grid; justify-items: center; padding: 18px 8px 10px; background: var(--kagit); border: 1px solid var(--cizgi); border-radius: 6px; cursor: pointer; text-align: center; transition: border-color .15s, box-shadow .15s, transform .15s var(--ease-out), opacity .3s; }
.izgara-oge::before { content: ""; position: absolute; top: 9px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--g); }
.izgara-oge:hover { box-shadow: var(--golge); transform: translateY(-2px); }
.izgara-oge .no { position: absolute; left: 9px; top: 6px; font-size: 13px; color: var(--soluk); font-variant-numeric: tabular-nums lining-nums; }
.izgara-oge .ar { font: 400 30px/1.5 var(--font-arapca); color: var(--murekkep); }
.izgara-oge .ad { font-size: 16px; line-height: 1.25; font-weight: 600; color: var(--murekkep); overflow-wrap: anywhere; }
.izgara-oge.secili { border-color: var(--g); background: color-mix(in srgb, var(--g) 8%, var(--kagit)); box-shadow: 0 0 0 2px var(--g); }
.izgara-oge.sonuk { opacity: .3; }

.ayet { margin: clamp(26px, 4vw, 44px) 0 0; padding-top: 18px; border-top: 1px solid var(--cizgi); text-align: center; }
.ayet-ar { margin: 0; font: 400 clamp(24px, 3vw, 30px)/1.9 var(--font-arapca); color: var(--vurgu); }
.ayet figcaption { font-size: 15px; color: var(--soluk); }
.alt { max-width: 1240px; margin: 0 auto; padding: 0 clamp(14px, 3vw, 32px) 28px; font-size: 14px; color: var(--soluk); text-align: center; text-wrap: balance; }

@media (max-width: 960px) {
  .sahne { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .halka-kutu { max-width: 600px; }
  .okuma { max-width: 600px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .dilim text { display: none; }
  .arapca { font-size: 11.5cqw; }
  .bilgi h2 { font-size: 40px; }
  .kontrol button#oynat { flex: 1 1 100%; }
  .izgara { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
  .izgara-oge { padding-inline: 4px; }
  .izgara-oge .ad { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }