/* style.css — ortak stiller */
html, body { font-family:Arial, sans-serif; background:#f8f9fa; color:#333; height:100%; }
h1,h2,h3 { margin-bottom:0.5em; color:#222; }
.categories, #cardsContainer, #teachingArea, #examArea { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:1rem; padding:1rem; }
.category-card { display:block; background:#fff; border-radius:10px; overflow:hidden; text-decoration:none; color:inherit; box-shadow:0 4px 8px rgba(0,0,0,0.1); transition:transform 0.2s; }
.category-card:hover { transform:scale(1.05); }
.category-card img { width:100%; height:120px; object-fit:cover; }
.category-card .info { padding:0.5rem; }
.flip-card { background:transparent; width:200px; height:240px; perspective:1000px; position:relative; }
.flip-card .front,.flip-card .back { position:absolute; width:100%; height:100%; border-radius:10px; backface-visibility:hidden; display:flex; align-items:center; justify-content:center; font-weight:bold; font-size:1.2rem; padding:1rem; box-shadow:0 4px 8px rgba(0,0,0,0.2); }
.flip-card .front { background:#007bff; color:#fff; }
.flip-card .back { background:#fff; transform:rotateY(180deg); }
.flip-card:hover .front { transform:rotateY(180deg); }
.flip-card:hover .back { transform:rotateY(360deg); }
button { margin:1rem; padding:0.6rem 1.2rem; font-size:1rem; border:none; border-radius:6px; background:#007bff; color:#fff; cursor:pointer; }
button:hover { background:#0056b3; }
.question { background:#fff; border-radius:8px; padding:1rem; box-shadow:0 2px 6px rgba(0,0,0,0.1); }
.question ul { list-style:none; margin-top:0.5rem; }
.question li { background:#f1f1f1; padding:0.4rem 0.6rem; margin-bottom:0.3rem; border-radius:4px; cursor:pointer; }
.question li:hover { background:#e0e0e0; }
.correct { background:#28a745; color:#fff; }
.wrong { background:#dc3545; color:#fff; }