/* LTLearner · Ayna Koyu — site/app/oyun-ayna-koyu.css
   Kök: .oyun.oyun-ayna (oyunlar.js kabuğu). Görsel dil DESIGN.md: gece denizi, hairline ızgara, ışık yalnız izde ve düğümde, tek kum eylem düğmesi.
   Işın sürekli çizgidir; hiçbir şey yanıp sönmez (saniyede 3'ten fazla parlama yok). prefers-reduced-motion: ışın anında çizilir. */

.oyun-ayna .ayna { display: grid; gap: 8px; width: 100%; max-width: 640px; margin: 0 auto; }
.oyun-ayna .ayna-dikey { max-width: 440px; }

/* ---- yönerge satırı ---- */
.oyun-ayna .ayna-yonerge { text-align: left; flex: 1 1 0; min-width: 0; color: var(--o-metin); font-size: max(var(--yb-kucuk, 14px), 0.92rem); font-weight: 500; line-height: 1.35; text-wrap: balance; }
.oyun-ayna .ayna-yonerge-satir { justify-content: space-between; gap: 10px; flex-wrap: nowrap; }
.oyun-ayna .oyun-dinle { flex: none; }

/* ---- tahta ---- */
.oyun-ayna .ayna-tahta { position: relative; width: 100%; border-radius: 16px; overflow: hidden; border: 1px solid var(--o-kenar-2); background: var(--o-yuzey); touch-action: manipulation; }
.oyun-ayna .ayna-tahta.tahmin-kipi { border-color: var(--o-kum); box-shadow: 0 0 0 3px rgba(244, 217, 166, 0.18); cursor: crosshair; }
.oyun-ayna .ayna-svg, .oyun-ayna .ayna-svg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.oyun-ayna .ayna-izgara { position: absolute; inset: 0; display: grid; z-index: 2; }
.oyun-ayna .ayna-hucre { appearance: none; -webkit-appearance: none; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer; position: relative; }
.oyun-ayna .ayna-hucre.kilit { cursor: default; pointer-events: none; }
.oyun-ayna .ayna-hucre:focus-visible { outline: 2px solid var(--o-kum); outline-offset: -4px; border-radius: 10px; }
.oyun-ayna .ayna-hucre:not(.dolu):not(.kilit)::after { content: ""; position: absolute; left: 50%; top: 50%; width: 22%; height: 22%; transform: translate(-50%, -50%) rotate(-45deg); border-radius: 3px; border-top: 2px solid rgba(244, 217, 166, 0); transition: border-color 160ms var(--o-ease), width 160ms var(--o-ease); }
@media (hover: hover) { .oyun-ayna .ayna-hucre:not(.dolu):not(.kilit):hover::after { border-top-color: rgba(244, 217, 166, 0.55); width: 56%; } }
.oyun-ayna .tahmin-kipi .ayna-hucre::after { display: none; }

/* ---- SVG nesneleri ---- */
.oyun-ayna .ayna-zemin { fill: #081221; transition: fill 600ms var(--o-ease); }
.oyun-ayna .yandi .ayna-zemin { fill: #0F2640; }
.oyun-ayna .ayna-cizgi { stroke: rgba(255, 255, 255, 0.07); stroke-width: 0.02; fill: none; }
.oyun-ayna .ayna-kaya path:first-child { fill: #1A2740; stroke: #3A4E72; stroke-width: 0.035; stroke-linejoin: round; }
.oyun-ayna .ayna-kaya-iz { fill: none; stroke: #3A4E72; stroke-width: 0.025; stroke-linecap: round; }
.oyun-ayna .ayna-fener .gov { fill: #10203A; stroke: #8FA2BD; stroke-width: 0.03; stroke-linejoin: round; }
.oyun-ayna .ayna-fener .serit { stroke: var(--o-kum); stroke-width: 0.05; fill: none; }
.oyun-ayna .ayna-fener .oda { fill: #081221; stroke: var(--o-kum); stroke-width: 0.03; }
.oyun-ayna .ayna-fener .cati { fill: #8FA2BD; }
.oyun-ayna .ayna-fener .lamba { fill: var(--o-kum); }
.oyun-ayna .ayna-fener-ok path { fill: var(--o-isik); opacity: 0.9; }

.oyun-ayna .ayna-mercek .dis { fill: rgba(91, 242, 230, 0.07); stroke: #8FA2BD; stroke-width: 0.04; transition: fill 400ms var(--o-ease), stroke 400ms var(--o-ease); }
.oyun-ayna .ayna-mercek .ic { fill: rgba(255, 255, 255, 0.05); stroke: var(--o-isik-koyu); stroke-width: 0.03; }
.oyun-ayna .ayna-mercek .haç { stroke: #8FA2BD; stroke-width: 0.03; fill: none; }
.oyun-ayna .ayna-mercek.yandi .dis { fill: rgba(244, 217, 166, 0.5); stroke: var(--o-kum); }
.oyun-ayna .ayna-mercek.yandi .ic { fill: var(--o-kum); stroke: #fff; }
.oyun-ayna .ayna-mercek .isima, .oyun-ayna .ayna-sandik .isima { fill: rgba(244, 217, 166, 0.16); }
.oyun-ayna .ayna-mercek .isima2 { fill: rgba(244, 217, 166, 0.2); }
.oyun-ayna .ayna-sandik .kutu { stroke: #E6EEF7; stroke-width: 0.035; }
.oyun-ayna .ayna-sandik .kutu-iz { stroke: rgba(4, 16, 24, 0.45); stroke-width: 0.03; fill: none; }
.oyun-ayna .ayna-sandik .kutu-harf { font: 700 0.2px var(--o-sans); fill: #fff; stroke: #041018; stroke-width: 0.045; paint-order: stroke; }
.oyun-ayna .ayna-filtre rect { fill-opacity: 0.4; stroke-width: 0.05; }
.oyun-ayna svg text { letter-spacing: 0; font-feature-settings: "tnum" 1; }
.oyun-ayna .ayna-filtre .filtre-iz { stroke: rgba(255, 255, 255, 0.45); stroke-width: 0.025; fill: none; }
.oyun-ayna .ayna-filtre .filtre-harf { font: 700 0.3px var(--o-sans); fill: #fff; stroke: #041018; stroke-width: 0.05; paint-order: stroke; }

.oyun-ayna .ayna-ayna .ayna-cam { stroke: rgba(201, 213, 230, 0.32); stroke-width: 0.17; stroke-linecap: round; }
.oyun-ayna .ayna-ayna .ayna-yuz { stroke: var(--o-kum); stroke-width: 0.075; stroke-linecap: round; }
.oyun-ayna .ayna-ayna.sabit .ayna-yuz { stroke: #C9D5E6; }
.oyun-ayna .ayna-ayna .ayna-vida { fill: #8FA2BD; }
.oyun-ayna .ayna-halka { fill: none; stroke: var(--o-isik); stroke-width: 0.04; stroke-dasharray: 0.12 0.09; }
.oyun-ayna .ayna-aci-et { font: 600 0.27px var(--o-sans); fill: var(--o-kum); stroke: #081221; stroke-width: 0.07; paint-order: stroke; }

.oyun-ayna .ayna-isin-isima { fill: none; stroke-width: 0.2; opacity: 0.2; stroke-linecap: round; stroke-linejoin: round; }
.oyun-ayna .ayna-isin-cekirdek { fill: none; stroke-width: 0.065; stroke-linecap: round; stroke-linejoin: round; }
.oyun-ayna .ayna-isin-grup.anim .ayna-isin { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ayna-yaz var(--sr, 700ms) linear var(--gec, 0ms) forwards; }
@keyframes ayna-yaz { to { stroke-dashoffset: 0; } }
.oyun-ayna .ayna-acilar.anim { opacity: 0; animation: ayna-belir 420ms var(--o-ease) var(--gec, 0ms) forwards; }
@keyframes ayna-belir { to { opacity: 1; } }
.oyun-ayna .ayna-onizleme { fill: none; stroke: var(--o-isik); stroke-width: 0.04; stroke-dasharray: 0.12 0.1; opacity: 0.5; stroke-linecap: round; }
.oyun-ayna .ayna-onizleme.ayna-isin-isima { display: none; }
.oyun-ayna .ayna-golge { fill: none; stroke: var(--o-kum); stroke-width: 0.07; stroke-dasharray: 0.16 0.1; opacity: 0.6; stroke-linecap: round; }
.oyun-ayna .ayna-normal .nrm { stroke: #C9D5E6; stroke-width: 0.03; stroke-dasharray: 0.07 0.06; fill: none; opacity: 0.9; }
.oyun-ayna .ayna-normal .ac { fill: none; stroke: var(--o-kum); stroke-width: 0.04; stroke-linecap: round; }
.oyun-ayna .ayna-normal .ac-isaret { stroke: var(--o-kum); stroke-width: 0.04; stroke-linecap: round; }
.oyun-ayna .ayna-normal .ac-yazi { font: 600 0.26px var(--o-sans); fill: var(--o-metin); stroke: #081221; stroke-width: 0.07; paint-order: stroke; }
.oyun-ayna .ayna-tahmin path { fill: none; stroke: var(--o-kum); stroke-width: 0.06; stroke-dasharray: 0.14 0.1; stroke-linecap: round; stroke-linejoin: round; }

/* ---- bilgi, panel ---- */
.oyun-ayna .ayna-bilgi { min-height: 2.3em; margin: -2px 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: max(var(--yb-kucuk, 14px), 0.95rem); line-height: 1.3; text-wrap: balance; }
.oyun-ayna .ayna-panel { display: grid; gap: 8px; }
.oyun-ayna .ayna-panel:empty { display: none; }
.oyun-ayna .ayna-tepsi { display: flex; align-items: center; gap: 8px; min-height: 28px; color: var(--o-soluk); font-size: 0.86rem; }
.oyun-ayna .ayna-tepsi-et { font-weight: 600; color: var(--o-metin); }
.oyun-ayna .ayna-tepsi-ayna { display: inline-block; width: 26px; height: 7px; border-radius: 4px; background: var(--o-kum); transform: rotate(-30deg); }
.oyun-ayna .ayna-tepsi-ayna.kullanildi { background: transparent; border: 1px dashed var(--o-soluk); }
.oyun-ayna .ayna-tepsi-sayi { margin-left: auto; font-weight: 600; color: var(--o-metin); font-size: 0.86rem; }

.oyun-ayna .ayna-dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: max(48px, var(--yb-hedef, 48px)); min-width: 48px; padding: 0 14px; border: 1px solid var(--o-kenar-2); border-radius: 999px; background: transparent; color: var(--o-metin); font-weight: 600; font-size: 0.92rem; cursor: pointer; transition: border-color 160ms var(--o-ease), background 160ms var(--o-ease), transform 160ms var(--o-ease); }
.oyun-ayna .ayna-dugme svg { width: 20px; height: 20px; flex: none; }
.oyun-ayna .ayna-dugme:hover { border-color: var(--o-metin); }
.oyun-ayna .ayna-dugme:disabled { opacity: 0.5; cursor: default; }
.oyun-ayna .ayna-dugme.pasif { opacity: 0.55; border-style: dashed; }
.oyun-ayna .ayna-kontrol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; align-items: stretch; }
.oyun-ayna .ayna-s1 .ayna-kontrol, .oyun-ayna .ayna-s2 .ayna-kontrol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.oyun-ayna .ayna-kontrol .ayna-dugme { padding: 0 8px; }
.oyun-ayna .ayna-aci-kutu { display: flex; align-items: center; justify-content: center; border: 1px solid var(--o-kenar); border-radius: 14px; background: rgba(8, 18, 33, 0.7); color: var(--o-kum); font: 700 1.25rem/1 var(--o-display); font-feature-settings: "tnum" 1; min-height: max(48px, var(--yb-hedef, 48px)); }

.oyun-ayna .ayna-eylemler { display: grid; gap: 8px; }
.oyun-ayna .ayna-ac { width: 100%; min-height: max(56px, var(--yb-hedef-ana, 64px)); font-size: 1.05rem; }
.oyun-ayna .ayna-ac.pasif { opacity: 1; background: transparent; color: var(--o-soluk); border: 1px dashed var(--o-kenar-2); box-shadow: none; }
.oyun-ayna .ayna-ikinci { display: flex; gap: 8px; }
.oyun-ayna .ayna-ikinci .ayna-dugme { flex: 1 1 0; padding: 0 8px; }
.oyun-ayna .ayna-ipucu.onerilen { border-color: var(--o-kum); color: var(--o-kum); }
.oyun-ayna .ayna-tahmin-dugme.acik { border-color: var(--o-kum); color: var(--o-kum); background: rgba(244, 217, 166, 0.08); }

/* ---- renk kartı (seviye 5) ---- */
.oyun-ayna .ayna-kart { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--o-kenar-2); border-radius: 14px; background: var(--o-yuzey); }
.oyun-ayna .ayna-kart-ust { display: flex; align-items: center; gap: 10px; justify-content: space-between; }
.oyun-ayna .ayna-kart-soru { margin: 0; font-weight: 600; line-height: 1.3; text-wrap: balance; }
.oyun-ayna .ayna-kart-secenek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.oyun-ayna .ayna-renk-sec { display: flex; align-items: center; gap: 10px; min-height: max(52px, var(--yb-hedef, 48px)); padding: 0 14px; border: 1px solid var(--o-kenar-2); border-radius: 14px; background: var(--o-yuzey-2); color: var(--o-metin); font-weight: 600; cursor: pointer; }
.oyun-ayna .ayna-renk-sec:hover { border-color: var(--o-metin); }
.oyun-ayna .ayna-renk-nokta { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #E6EEF7; flex: none; }
.oyun-ayna .ayna-renk-nokta.c-kirmizi { background: #E63946; }
.oyun-ayna .ayna-renk-nokta.c-mavi { background: #2D7CF6; }
.oyun-ayna .ayna-renk-nokta.c-beyaz { background: #E6EEF7; }
.oyun-ayna .ayna-renk-nokta.c-siyah { background: #0A0F1A; }
.oyun-ayna .ayna-kart-cip { margin: 0; align-self: start; justify-self: start; padding: 6px 12px; border: 1px solid var(--o-kenar-2); border-radius: 999px; font-size: 0.86rem; color: var(--o-metin); background: rgba(8, 18, 33, 0.7); }

/* ---- keşif ve üç kapı ---- */
.oyun-ayna .ayna-kesif { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid var(--o-kenar-2); border-radius: 14px; background: var(--o-yuzey); }
.oyun-ayna .ayna-kesif-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.oyun-ayna .ayna-kesif-et { font-size: 0.78rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--o-isik); font-weight: 600; }
.oyun-ayna .ayna-kesif-cumle { margin: 0; font: 600 1.08rem/1.35 var(--o-sans); text-wrap: balance; }
.oyun-ayna .ayna-kesif-ek { margin: 0; color: var(--o-soluk); font-size: 0.92rem; line-height: 1.4; }
.oyun-ayna .ayna-usta { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 0; color: var(--o-kum); font-weight: 600; font-size: 0.9rem; }
.oyun-ayna .ayna-usta svg { width: 20px; height: 20px; }
.oyun-ayna .ayna-kapi-soru { margin: 0; text-align: center; color: var(--o-soluk); font-size: 0.92rem; }
.oyun-ayna .ayna-kapilar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.oyun-ayna .ayna-kapi { display: grid; place-items: center; gap: 2px; align-content: center; min-height: 60px; padding: 8px 6px; border: 1px solid var(--o-kenar-2); border-radius: 14px; background: var(--o-yuzey); color: var(--o-metin); font-weight: 600; cursor: pointer; transition: border-color 160ms var(--o-ease); }
.oyun-ayna .ayna-kapi small { font-size: 0.72rem; font-weight: 500; color: var(--o-kum); }
.oyun-ayna .ayna-kapi.onerilen { border-color: var(--o-kum); }
.oyun-ayna .ayna-kapi:hover { border-color: var(--o-metin); }
.oyun-ayna .ayna-bitir { width: 100%; min-height: max(56px, var(--yb-hedef-ana, 64px)); }

.oyun-ayna .ayna-kapanis { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 24px 8px; }
.oyun-ayna .ayna-kapanis h2 { margin: 0; font: 700 1.6rem/1.1 var(--o-display); letter-spacing: -0.02em; }
.oyun-ayna .ayna-kapanis p { margin: 0; color: var(--o-soluk); }
.oyun-ayna .ayna-kapanis-fener svg { width: 72px; height: 72px; }
.oyun-ayna .ayna-kapanis-fener .gov { fill: #10203A; stroke: #8FA2BD; stroke-width: 1.2; }
.oyun-ayna .ayna-kapanis-fener .serit { stroke: var(--o-kum); stroke-width: 2; fill: none; }
.oyun-ayna .ayna-kapanis-fener .oda { fill: #081221; stroke: var(--o-kum); stroke-width: 1.2; }
.oyun-ayna .ayna-kapanis-fener .cati { fill: #8FA2BD; }
.oyun-ayna .ayna-kapanis-fener .lamba { fill: var(--o-kum); }
.oyun-ayna .ayna-kapanis-fener .isik { stroke: var(--o-isik); stroke-width: 1.6; stroke-linecap: round; fill: none; }

/* ---- "Nasıl oynanır" örnek turu: açık, sade ---- */
.oyun-ornek .oyun-ayna .ayna-yonerge-satir, .oyun-ornek.oyun-ayna .ayna-yonerge-satir { display: none; }
.oyun-ornek .ayna-panel, .oyun-ornek .ayna-ikinci { display: none; }

@media (max-width: 400px) {
  .oyun-ayna .ayna-dugme { font-size: 0.86rem; gap: 6px; padding: 0 6px; }
  .oyun-ayna .ayna-yonerge { font-size: 0.9rem; }
  .oyun-ayna .ayna-kapi { font-size: 0.9rem; }
}
@media (prefers-reduced-motion: reduce) {
  .oyun-ayna *, .oyun-ayna *::before, .oyun-ayna *::after { animation: none !important; transition: none !important; }
  .oyun-ayna .ayna-acilar.anim { opacity: 1; }
  .oyun-ayna .ayna-isin-grup.anim .ayna-isin { stroke-dasharray: none; stroke-dashoffset: 0; }
}