/* GENEL AYARLAR */
body { font-family: "Amiri", "Inter", system-ui, serif; background-color: #052e16; background-image: radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.05) 0, transparent 40%), radial-gradient(circle at 75% 75%, rgba(255, 255, 255, 0.05) 0, transparent 40%); background-size: 180px 180px; color: #fefae0; margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 18px; }
h1 { font-family: "Amiri", serif; font-size: 1.35rem; color: #ffe066; margin: 0; text-shadow: 0 0 6px rgba(255, 215, 0, 0.4); }
h2 { font-size: 1.7rem; color: #ffd700; margin-bottom: 1rem; text-shadow: 0 0 10px rgba(255, 255, 150, 0.3); }

/* QUIZ KARTI */
.card { background: linear-gradient(145deg, #fffef8 0%, #fff9e6 100%); color: #1b4332; padding: 18px; border-radius: 15px; box-shadow: 0 0 0 3px #d4af37, 0 7px 20px rgba(0, 0, 0, 0.2); max-width: 340px; width: 100%; opacity: 1; transition: opacity .5s ease; margin-bottom: 15px; }
.fade-out { opacity: 0; } .fade-in { opacity: 1; }

/* SORU VE ŞIKLAR */
.question { font-weight: 600; font-size: 17px; margin-bottom: 14px; }
.options button { display: block; width: 100%; background: #fff; color: #1b4332; border: 2px solid #d4af37; border-radius: 9px; margin: 7px 0; padding: 9px; font-size: 15px; cursor: pointer; transition: all .2s; position: relative; }
.options button:hover { background: #d4af37; color: #fff; }
.options button.correct { background: #15803d; color: #fff; border-color: #14532d; }
.options button.wrong { background: #b91c1c; color: #fff; border-color: #7f1d1d; }
.explanation { margin-top: 6px; font-size: 14px; color: #065f46; background: rgba(255, 255, 255, 0.8); border-radius: 7px; padding: 5px 7px; }

/* BUTONLAR VE İLERLEME */
.controls { margin-top: 14px; display: flex; gap: 10px; justify-content: center; }
button { background: #1b4332; color: #ffd700; border: 2px solid #d4af37; padding: 7px 14px; border-radius: 9px; font-size: 14.5px; cursor: pointer; transition: all .2s; }
button:hover { background: #14532d; color: #fff7d6; }
.progress-container { width: 100%; max-width: 340px; height: 10px; background: rgba(255, 255, 255, 0.2); border-radius: 10px; overflow: hidden; margin-bottom: 10px; }
.progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, #ffd700, #fff7b3); transition: width 0.3s ease; }
.dua { margin-top: 14px; font-style: italic; font-size: 15px; color: #064e3b; background: rgba(255, 255, 255, 0.85); border-radius: 9px; padding: 9px; }

/* ANA SAYFA MENÜ IZGARASI */
.grid-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 15px; width: 100%; max-width: 800px; margin-top: 20px; }
.test-btn { background: linear-gradient(145deg, #1b4332, #064e3b); color: #ffd700; border: 2px solid #d4af37; padding: 20px 10px; border-radius: 12px; text-decoration: none; font-weight: bold; transition: transform 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 6px rgba(0,0,0,0.3); }
.test-btn:hover { transform: translateY(-5px); box-shadow: 0 8px 15px rgba(212, 175, 55, 0.3); color: #fff; }
.test-btn span { font-size: 1.5rem; display: block; margin-bottom: 5px; }
.disabled { background: #0f1f18; color: #555; border-color: #333; pointer-events: none; opacity: 0.6; }