/* Etkileşimli modüllerin ortak stilleri (sunum ve öğrenci ekranı) */
/* Modüllerde ortak */
.modul { width: 100%; display: grid; gap: 1em; }
.modul svg { width: 100%; height: auto; max-height: 55vh; background: var(--yuzey); border: 2px solid var(--cizgi); border-radius: 14px; }
.kontroller { display: flex; flex-wrap: wrap; gap: 1em 1.5em; align-items: center; }
.kontroller label { display: grid; gap: .2em; font-weight: 700; font-size: .85em; min-width: 12em; }
.kontroller input[type=range] { width: 100%; height: 2em; accent-color: var(--vurgu); }
.durum-chip { display: inline-block; padding: .15em .7em; border-radius: 999px; font-weight: 700; font-size: .85em; border: 2px solid var(--cizgi); }
.durum-chip.iyi { border-color: var(--dogru); color: var(--dogru); }
.durum-chip.kotu { border-color: var(--yanlis); color: var(--yanlis); }
.sekme { display: flex; flex-wrap: wrap; gap: .5em; }
.sekme button { min-height: 44px; padding: .3em 1em; border: 2px solid var(--metin); border-radius: 10px; background: var(--yuzey); font-weight: 700; }
.sekme button[aria-pressed="true"] { background: var(--vurgu); color: var(--vurgu-metin); border-color: var(--vurgu); }
.sv-metin { fill: var(--metin); font-family: Lexend, sans-serif; }
.sv-soluk { fill: var(--soluk); font-family: Lexend, sans-serif; }
.sv-cizgi { stroke: var(--metin); fill: none; }
.sv-dolgu { fill: var(--vurgu); }
.sv-tas { font-family: 'Satranc Simgeleri', serif; }

/* Modül SVG sınıfları */
.sq-a { fill: var(--kare-a); } .sq-k { fill: var(--kare-k); }
.tas { font-family: 'Satranc Simgeleri', serif; fill: #fff; stroke: #111; stroke-width: 1.3; paint-order: stroke; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.sv-vurgu { fill: var(--vurgu); } .sv-yan { fill: var(--vurgu); opacity: .6; } .sv-ust { fill: var(--vurgu); opacity: .95; }
.sv-altin { fill: var(--altin); }
.sv-ince { stroke: var(--metin); stroke-width: 1.5; fill: none; }
.hamle { fill: var(--vurgu); opacity: .75; } .yeme { fill: none; stroke: var(--yanlis); stroke-width: 4; }
.imlec { fill: none; stroke: var(--altin); stroke-width: 4; }
.not-metin { margin: 0; color: var(--soluk); }
.kart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .8em; }
.oyun-kart { background: var(--yuzey); border: 3px solid var(--cizgi); border-radius: 12px; padding: .7em .9em; text-align: left; }
.oyun-kart[aria-pressed="true"] { border-color: var(--vurgu); background: var(--yuzey2); }
.oyun-kart.dogru { border-color: var(--dogru); } .oyun-kart.yanlis { border-color: var(--yanlis); animation: sars .3s; }
@keyframes sars { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.kovalar { display: grid; grid-template-columns: 1fr 1fr; gap: 1em; }
.kova { min-height: 8em; border: 3px dashed var(--metin); border-radius: 14px; padding: .6em; display: grid; gap: .4em; align-content: start; background: var(--yuzey2); text-align: left; }
.kova > b { font-size: 1.1em; }
.kova .yerlesen { background: var(--yuzey); border-left: 5px solid var(--dogru); padding: .2em .6em; border-radius: 6px; }
.modul svg { max-height: 42vh; }
.iki-sutun { display: grid; gap: 1em; align-items: start; }
@media (min-width: 900px) { .iki-sutun { grid-template-columns: 1fr 1fr; } .iki-sutun svg { max-height: 60vh; } }

/* Avatar SVG'leri modül çizim kutusu stillerinden etkilenmesin */
.modul .avatar svg, .modul svg.av-ic { width: 100% !important; max-height: none !important; background: none !important; border: 0 !important; border-radius: 0 !important; }
.modul svg.av-ic { width: auto !important; }