/* ============================================================
   TAILWIND EXTRA — Production style.css'te eksik olan utility'leri
   tamamlar (özellikle dark: modifier'lar ve opacity'li bg'ler).
   PHP-üretimi sayfalar (vefat, namaz, abdest, ezanı-namazı vb.) için
   ============================================================ */

/* ============ TEXT COLORS (LIGHT) ============ */
.text-gray-100 { color: rgb(243 244 246) !important; }
.text-gray-200 { color: rgb(229 231 235) !important; }
.text-gray-300 { color: rgb(209 213 219) !important; }
.text-gray-400 { color: rgb(156 163 175) !important; }
.text-gray-500 { color: rgb(107 114 128) !important; }
.text-gray-600 { color: rgb(75 85 99) !important; }
.text-gray-700 { color: rgb(55 65 81) !important; }
.text-gray-800 { color: rgb(31 41 55) !important; }
.text-gray-900 { color: rgb(17 24 39) !important; }

/* ============ TEXT COLORS — DARK MODE OVERRIDE ============ */
.dark .dark\:text-gray-100 { color: rgb(243 244 246) !important; }
.dark .dark\:text-gray-200 { color: rgb(229 231 235) !important; }
.dark .dark\:text-gray-300 { color: rgb(209 213 219) !important; }
.dark .dark\:text-gray-400 { color: rgb(156 163 175) !important; }
.dark .dark\:text-white   { color: #ffffff !important; }
.dark .dark\:text-islamic-green { color: #34d399 !important; }

/* ============ BACKGROUND — LIGHT (Opacity'li) ============ */
.bg-gray-100\/30 { background-color: rgb(243 244 246 / 0.30) !important; }
.bg-gray-100\/50 { background-color: rgb(243 244 246 / 0.50) !important; }
.bg-gray-200\/30 { background-color: rgb(229 231 235 / 0.30) !important; }
.bg-gray-200\/50 { background-color: rgb(229 231 235 / 0.50) !important; }
.bg-gray-700\/30 { background-color: rgb(55 65 81 / 0.30) !important; }
.bg-gray-700\/50 { background-color: rgb(55 65 81 / 0.50) !important; }
.bg-gray-800\/30 { background-color: rgb(31 41 55 / 0.30) !important; }
.bg-gray-800\/50 { background-color: rgb(31 41 55 / 0.50) !important; }

.bg-green-500\/10 { background-color: rgb(34 197 94 / 0.10) !important; }
.bg-green-500\/20 { background-color: rgb(34 197 94 / 0.20) !important; }
.bg-green-900\/20 { background-color: rgb(20 83 45 / 0.20) !important; }
.bg-green-900\/30 { background-color: rgb(20 83 45 / 0.30) !important; }

.bg-blue-500\/10 { background-color: rgb(59 130 246 / 0.10) !important; }
.bg-blue-900\/20 { background-color: rgb(30 58 138 / 0.20) !important; }

.bg-amber-500\/10 { background-color: rgb(245 158 11 / 0.10) !important; }
.bg-amber-900\/20 { background-color: rgb(120 53 15 / 0.20) !important; }

.bg-red-500\/10 { background-color: rgb(239 68 68 / 0.10) !important; }
.bg-red-900\/20 { background-color: rgb(127 29 29 / 0.20) !important; }

.bg-purple-500\/10 { background-color: rgb(168 85 247 / 0.10) !important; }
.bg-purple-500\/20 { background-color: rgb(168 85 247 / 0.20) !important; }
.bg-purple-900\/20 { background-color: rgb(88 28 135 / 0.20) !important; }
.bg-purple-900\/30 { background-color: rgb(88 28 135 / 0.30) !important; }

.bg-gray-300\/30 { background-color: rgb(209 213 219 / 0.30) !important; }
.bg-gray-600\/30 { background-color: rgb(75 85 99 / 0.30) !important; }
.bg-green-500\/20 { background-color: rgb(34 197 94 / 0.20) !important; }

/* ============ BACKGROUND — DARK MODE OVERRIDE ============ */
.dark .dark\:bg-gray-700\/50 { background-color: rgb(55 65 81 / 0.50) !important; }
.dark .dark\:bg-gray-800\/30 { background-color: rgb(31 41 55 / 0.30) !important; }
.dark .dark\:bg-gray-800\/50 { background-color: rgb(31 41 55 / 0.50) !important; }
.dark .dark\:bg-green-900\/20 { background-color: rgb(20 83 45 / 0.20) !important; }
.dark .dark\:bg-green-900\/30 { background-color: rgb(20 83 45 / 0.30) !important; }
.dark .dark\:bg-blue-900\/20 { background-color: rgb(30 58 138 / 0.20) !important; }
.dark .dark\:bg-amber-900\/20 { background-color: rgb(120 53 15 / 0.20) !important; }
.dark .dark\:bg-red-900\/20 { background-color: rgb(127 29 29 / 0.20) !important; }
.dark .dark\:bg-purple-900\/20 { background-color: rgb(88 28 135 / 0.20) !important; }
.dark .dark\:bg-purple-900\/30 { background-color: rgb(88 28 135 / 0.30) !important; }
.dark .dark\:bg-gray-600\/30 { background-color: rgb(75 85 99 / 0.30) !important; }
.dark .dark\:bg-green-900\/30 { background-color: rgb(20 83 45 / 0.30) !important; }
.dark .dark\:bg-gray-900   { background-color: rgb(17 24 39) !important; }
.dark .dark\:bg-gray-800   { background-color: rgb(31 41 55) !important; }
.dark .dark\:bg-gray-700   { background-color: rgb(55 65 81) !important; }
.dark .dark\:bg-gray-600   { background-color: rgb(75 85 99) !important; }

/* ============ Divide (border between flex/grid children) ============ */
.dark .dark\:divide-gray-700 > * + * { border-color: rgb(55 65 81) !important; }
.dark .dark\:divide-gray-800 > * + * { border-color: rgb(31 41 55) !important; }

/* ============ Gradient from/to (hero, button bg) ============ */
.dark .dark\:from-green-700 { --tw-gradient-from: rgb(21 128 61) !important; }
.dark .dark\:from-green-800 { --tw-gradient-from: rgb(22 101 52) !important; }
.dark .dark\:from-green-900 { --tw-gradient-from: rgb(20 83 45) !important; }
.dark .dark\:to-green-800 { --tw-gradient-to: rgb(22 101 52) !important; }
.dark .dark\:to-green-900 { --tw-gradient-to: rgb(20 83 45) !important; }

/* ============ BORDER ============ */
.border-islamic-green { border-color: #00843D !important; }
.dark .dark\:border-islamic-green { border-color: #34d399 !important; }
.border-green-500 { border-color: rgb(34 197 94) !important; }
.border-amber-500 { border-color: rgb(245 158 11) !important; }
.border-blue-500  { border-color: rgb(59 130 246) !important; }
.border-red-500   { border-color: rgb(239 68 68) !important; }

.dark .dark\:border-gray-700 { border-color: rgb(55 65 81) !important; }
.dark .dark\:border-gray-800 { border-color: rgb(31 41 55) !important; }

/* ============ TEXT COLORS — Renkli token (info/warning/error) ============ */
.text-green-600 { color: rgb(22 163 74) !important; }
.text-green-700 { color: rgb(21 128 61) !important; }
.dark .dark\:text-green-300 { color: rgb(134 239 172) !important; }
.dark .dark\:text-green-400 { color: rgb(74 222 128) !important; }

.text-blue-600  { color: rgb(37 99 235) !important; }
.text-blue-700  { color: rgb(29 78 216) !important; }
.dark .dark\:text-blue-300  { color: rgb(147 197 253) !important; }
.dark .dark\:text-blue-400  { color: rgb(96 165 250) !important; }

.text-amber-600 { color: rgb(217 119 6) !important; }
.text-amber-700 { color: rgb(180 83 9) !important; }
.dark .dark\:text-amber-300 { color: rgb(252 211 77) !important; }
.dark .dark\:text-amber-400 { color: rgb(251 191 36) !important; }

.text-red-600   { color: rgb(220 38 38) !important; }
.dark .dark\:text-red-400   { color: rgb(248 113 113) !important; }

/* ============ PROSE (Tailwind Typography fallback) ============ */
.prose { max-width: 65ch; color: rgb(55 65 81); }
.prose.max-w-none { max-width: none; }
.prose p, .prose ul, .prose ol, .prose blockquote { margin-bottom: 1.25em; line-height: 1.75; }
.prose h2 { margin-top: 2em; margin-bottom: 1em; font-weight: 700; }
.prose h3 { margin-top: 1.6em; margin-bottom: 0.6em; font-weight: 600; }
.prose strong { color: inherit; font-weight: 600; }
.prose em { color: inherit; font-style: italic; }
.prose blockquote { border-left: 3px solid #d1d5db; padding-left: 1em; font-style: italic; color: #6b7280; }
.prose code { color: #00843D; font-family: ui-monospace, monospace; padding: 0.1em 0.3em; background: rgb(0 132 61 / 0.08); border-radius: 4px; }
.prose ul { list-style: disc; padding-left: 1.5em; }
.prose ol { list-style: decimal; padding-left: 1.5em; }
.prose a { color: #00843D; text-decoration: underline; }
.prose-green { /* default prose */ }
.dark .dark\:prose-invert { color: rgb(209 213 219); }
.dark .dark\:prose-invert h1, .dark .dark\:prose-invert h2, .dark .dark\:prose-invert h3, .dark .dark\:prose-invert h4 { color: rgb(243 244 246); }
.dark .dark\:prose-invert blockquote { border-left-color: #4b5563; color: #9ca3af; }
.dark .dark\:prose-invert a { color: #34d399; }

/* ============ BG WITH OPACITY MODIFIER (Tailwind v3 syntax) ============ */
.bg-islamic-green\/10 { background-color: rgb(0 132 61 / 0.10) !important; }
.bg-islamic-green\/20 { background-color: rgb(0 132 61 / 0.20) !important; }

/* ============ DETAILS/SUMMARY (FAQ accordion) ============ */
details summary {
  cursor: pointer;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details[open] summary { font-weight: 600; }