:root{
  --brand:#FC983A;
  --text:#0f172a;
  --text-dark:#0b1220;
  --muted:#6b7280;
  --bg:#ffffff;
}
/* Added missing tokens used elsewhere */
:root { --brand-600: #F97316; --text-weak: #6b7280; }

/* Global site theme: orange accents, white backgrounds, dark readable text */
html,body{background:var(--bg);color:var(--text);}
body{font-family:Inter, 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;}

/* Links and brand accents */
a, a:visited { color: var(--brand); }
.text-brand, .brand { color: var(--brand) !important; }

/* Headings should use brand or dark text for clarity */
h1,h2,h3,h4,h5,h6{ color: var(--brand); font-weight:800; }
.font-display { color:var(--brand); }

/* Dark mode variables: keep orange accents, white text */
html.dark{
  --bg: #06080F;
  --text: #f8fafc;
  --muted: #94A3B8;
  --brand: #FC983A;
}

/* Cards / glass surfaces should be light and have dark text */
.glass-ui, .glass-panel, .card { background: #fff; color: var(--text); border:1px solid rgba(15,23,42,0.06); box-shadow:0 10px 30px rgba(15,23,42,0.06); }
html.dark .glass-ui, html.dark .glass-panel, html.dark .card { background: rgba(15,23,42,0.6); color: var(--text); border:1px solid rgba(255,255,255,0.06); box-shadow:0 10px 30px rgba(0,0,0,0.6); }

/* Ensure body text inside known containers is readable */
.legal-text p, p, li, .lead, .text-lg { color: var(--muted); }
html.dark .legal-text p, html.dark p, html.dark li, html.dark .lead, html.dark .text-lg { color: #cbd5e1; }

/* On pages that are not intentionally dark, avoid forcing white text */
/* Avoid globally overriding .text-white (breaks dark overlays within light pages).
  Use the utility class `force-dark` when you need dark text on light pages. */
html:not(.dark) .text-white.force-dark { color: var(--text) !important; }
/* Keep .text-white on explicit dark pages */
/* Remove forced .text-white in dark mode to allow explicit dark: text utilities to work.
   Use Tailwind's `dark:text-...` where appropriate in templates. */

/* Ensure important chat/send UI is visible in both modes */
.chat-input input::placeholder { color: rgba(148,163,184,0.6); }
.dark .chat-input input::placeholder { color: rgba(203,213,225,0.45); }

/* Force the small circular send/scroll buttons to use brand color */
footer .w-11.h-11, .scroll-to-bottom-btn, #scrollToBottomBtn {
  background: var(--brand) !important;
  color: #fff !important;
  box-shadow: 0 8px 20px rgba(252,152,58,0.18) !important;
}

/* Fix modal buttons that used both `text-white` and `dark:text-...` causing conflicts */
.glass-panel .btn, .glass-panel button, .glass-panel .w-full {
  color: inherit !important;
}

/* Make sure message bubbles and controls keep contrast */
.msg-bubble-them { background-color: #0b1220; color: #cbd5e1; }
.dark .msg-bubble-them { background-color: rgba(255,255,255,0.06); color: #e6eef8; }

/* Small utility to force dark text when needed on light backgrounds */
.force-dark-text { color: var(--text) !important; }

/* --- Messages page: glass-panel dark-contrast overrides --- */
/* Ensure any light-gray text classes inside dark glass panels become readable */
.glass-panel .text-slate-900,
.glass-panel .text-slate-800,
.glass-panel .text-slate-700,
.glass-panel .text-slate-600,
.glass-panel .text-gray-800,
.glass-panel .text-gray-700 {
  color: #E6EEF8 !important;
}

/* Buttons/links inside glass panels should be clearly visible */
.glass-panel a,
.glass-panel button,
.glass-panel .btn,
.glass-panel .menu-item,
.glass-panel .dropdown-item {
  color: #E6EEF8 !important;
}

/* Normalize pale backgrounds used for buttons into subtle dark tints inside panels */
.glass-panel .bg-slate-100,
.glass-panel .bg-slate-200,
.glass-panel .bg-white,
.glass-panel .bg-gray-100 {
  background-color: rgba(255,255,255,0.06) !important;
  color: #E6EEF8 !important;
  border-color: rgba(255,255,255,0.04) !important;
}

/* Small orange/amber pills in message bubbles: ensure text contrast */
.glass-panel .pill,
.glass-panel .badge,
.glass-panel .inline-badge {
  color: #081224 !important;
  background-image: linear-gradient(135deg, var(--brand) 0%, #E67E22 100%) !important;
}

/* Dropdown/menu overlays (three-dot menu) */
.glass-panel .dropdown,
.glass-panel .menu {
  background: rgba(6,8,15,0.9) !important;
  color: #E6EEF8 !important;
  box-shadow: 0 12px 30px rgba(2,6,23,0.6) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
}

/* Ensure modal action buttons are readable */
.glass-panel #closeStudentProfile,
.glass-panel #hideStudentAvatar,
.glass-panel .w-full {
  background-color: #ffffff !important;
  color: #0b1220 !important;
}

/* small floating action (up arrow) ensure visibility */
.glass-panel .w-11.h-11, .glass-panel .small-btn {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Dark-mode: ensure light-background elements inside glass panels are readable (dark text) */
html.dark .glass-panel .bg-white,
html.dark .glass-panel .bg-slate-100,
html.dark .glass-panel .bg-slate-200,
html.dark .glass-panel input,
html.dark .glass-panel .w-full,
html.dark .glass-panel button.bg-slate-200,
html.dark .glass-panel .rounded-2xl.bg-slate-100 {
  color: var(--text-dark) !important;
}

/* Inputs and placeholders inside glass panels in dark mode should use dark text */
html.dark .glass-panel input,
html.dark .glass-panel textarea,
html.dark .glass-panel .chat-input input {
  color: var(--text-dark) !important;
  background-color: rgba(255,255,255,0.92) !important;
}
html.dark .glass-panel input::placeholder,
html.dark .glass-panel textarea::placeholder {
  color: rgba(2,6,23,0.35) !important;
}

/* Ensure small floating buttons are visible on dark backgrounds */
.floating-btn, .small-btn, .w-11.h-11, .w-12.h-12 {
  background: var(--brand) !important;
  color: #fff !important;
}

/* Specific: fix closeStudentProfile contrast in messages modal */
#closeStudentProfile {
  background-color: #fff !important;
  color: var(--text-dark) !important;
}
html.dark #closeStudentProfile { background-color: #fff !important; color: var(--text-dark) !important; }

/* Small utilities to keep contrast */
.btn-primary { background: var(--brand); color: #fff !important; border-color: transparent; }
.btn-ghost { background: transparent; color: var(--brand); border:1px solid rgba(0,0,0,0.06); }

/* Fallback fixes for existing custom classes */
.bg-glow{display:none}

/* Ensure nav pills and important CTAs are readable in both modes */
.nav-pill { color: var(--text); }
.nav-pill.active { color: #fff; background: linear-gradient(135deg, var(--brand) 0%, #E67E22 100%); }
html.dark .nav-pill { color: #cbd5e1; }

/* Card heading contrast */
.glass-ui h3, .card h3, h3 { color: var(--text); }
html.dark .glass-ui h3, html.dark .card h3, html.dark h3 { color: #fff; }


/* Ensure footer and minor text remain readable */
footer, .muted, .small { color: var(--muted); }

/* --- Additional index & hero contrast fixes --- */
/* Hero title should always be highly readable */
.hero-title { color: var(--text) !important; text-shadow: none !important; }
.hero .text-white, .hero-title span.text-primary { color: var(--brand) !important; }

/* Pricing & CTA adjustments */
.subscribe-primary { background: linear-gradient(135deg,var(--brand),var(--brand-600)); color: #fff !important; border: none !important; }
.subscribe-primary:hover { filter: brightness(1.03); }

/* Ensure pale text inside white cards is darker for readability */
.bg-white .text-gray-400, .bg-white .text-gray-500, .bg-white .text-gray-600, .bg-white .text-white { color: var(--text-weak) !important; opacity: 1 !important; }
.bg-white .text-white { color: var(--text) !important; }

/* Feature cards: icons and headings */
.group > .w-16, .feature-card .w-16 { box-shadow: none; }
.group .text-accent, .group .text-primary { color: var(--brand) !important; }
.group .fa-user-tie, .group .fa-chart-pie { opacity: 0.98 !important; color: rgba(255,255,255,0.95) !important; }

/* Periyot selection: make selected visible */
#pricing .relative.inline-flex .selected, #pricing .relative.inline-flex button[aria-pressed="true"] { background: linear-gradient(180deg, rgba(252,152,58,0.12), rgba(252,152,58,0.06)); color: #081224 !important; border:1px solid rgba(252,152,58,0.14); }
#pricing .relative.inline-flex button:hover { background: rgba(252,152,58,0.06); }

/* Make periyot toggle responsive and prevent overflow */
#pricing .relative.inline-flex { display: inline-flex; gap:0.5rem; align-items:center; overflow:hidden; border-radius: 18px; }
#pricing .relative.inline-flex button { flex: 0 1 auto; min-width: 0; white-space: nowrap; }
@media (max-width: 640px) {
  #pricing .relative.inline-flex { flex-wrap: wrap; gap: 0.5rem; }
  #pricing .relative.inline-flex button { padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.85rem; }
}

/* Very small screens: stack periyot buttons vertically to avoid overflow */
@media (max-width: 420px) {
  #pricing .relative.inline-flex { display: flex; flex-direction: column; align-items: stretch; gap: 0.5rem; }
  #pricing .relative.inline-flex button { width: 100%; padding-left: 0.75rem; padding-right: 0.75rem; font-size: 0.9rem; }
}

/* Prevent thin visual gap on toggle container by clipping overflow and ensuring background-clip */
#pricing .flex-shrink-0 { overflow: hidden; background-clip: padding-box; -webkit-backface-visibility: hidden; backface-visibility: hidden; }

/* FAQ / CTA and subtle links made readable */
.faq .section-title, .section-title { color: var(--text) !important; }
.cta-ghost { color: var(--brand) !important; border: 1px solid rgba(15,23,42,0.04); }

/* Contact form submit */
form button[type=submit], .form-submit { background: linear-gradient(135deg,var(--brand),var(--brand-600)); color: #fff; border: none; }

/* Footer quick links: ensure visibility in dark footers */
.footer-quick-links a { color: #E6EEF8 !important; }

/* Accessibility: increased line-height for small text on cards */
.feature-card p, .feature-card li, .glass-panel p { line-height: 1.6; }

/* End of theme */

/* --- Targeted fixes for index elements user reported --- */
/* Contact CTA anchor (inline) */
a[href="#contact"].inline-flex, a.contact-cta, .contact-cta {
  background: linear-gradient(135deg,var(--brand),var(--brand-600)) !important;
  color: #081224 !important;
  padding: 12px 20px !important;
  border-radius: 16px !important;
  font-weight: 800 !important;
  box-shadow: 0 8px 24px rgba(249,115,22,0.12) !important;
}

/* Contact form submit — ensure disabled is visible and enabled is clear */
#contactSubmitBtn, button#contactSubmitBtn, .form-submit {
  background: linear-gradient(135deg,var(--brand),var(--brand-600)) !important;
  color: #081224 !important;
  border: none !important;
  font-weight: 800 !important;
}
#contactSubmitBtn[disabled], button#contactSubmitBtn[disabled] {
  background: #E2E8F0 !important;
  color: #334155 !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}

/* Ensure accent-background feature card content is readable */
.bg-accent, .bg-accent * {
  color: #fff !important;
}
.bg-accent p, .bg-accent .text-gray-400, .bg-accent .text-gray-500 {
  color: rgba(255,255,255,0.92) !important;
}
.bg-accent .w-16 { background: rgba(255,255,255,0.08) !important; color: #fff !important; }
.bg-accent .fa { color: #fff !important; opacity: 0.95 !important; }

/* Make 'Program ve Hedef Yönetimi' list items readable on accent card */
.bg-accent ul li, .bg-accent .space-y-3 li { color: rgba(255,255,255,0.9) !important; }

/* Subscribe buttons consistency: enforce brand gradient and readable text */
.subscribe-primary { background: linear-gradient(135deg,var(--brand),var(--brand-600)) !important; color: #081224 !important; }
.subscribe-primary.bg-accent { background: linear-gradient(135deg,var(--brand),var(--brand-600)) !important; color: #081224 !important; }
.subscribe-primary:hover { filter: brightness(1.02); }

/* Pricing toggle: ensure selected and unselected states contrast */
#pricing .relative.inline-flex button { background: transparent !important; color: #081224 !important; }
#pricing .relative.inline-flex button:first-child { border-radius: 12px; }
#pricing .relative.inline-flex button[aria-pressed="true"], #pricing .relative.inline-flex button.active, #pricing .relative.inline-flex .selected {
  background: linear-gradient(180deg, rgba(252,152,58,0.12), rgba(252,152,58,0.06)) !important;
  color: #081224 !important;
  border: 1px solid rgba(252,152,58,0.14) !important;
}

/* Hero and big headings — ensure visible on all backgrounds */
.hero-title, .index-hero .hero-title { color: var(--text) !important; text-shadow: none !important; }
.hero .text-primary, .index-hero .text-primary { color: var(--brand) !important; }

/* General large section subtitles that were too pale */
.section-subtle, .lead, .text-gray-400, .text-gray-500 { color: var(--text-weak) !important; }

/* Some specific phrases to ensure emphasis */
.feature-card h3, .section-title { color: var(--brand) !important; font-weight:800 !important; }

/* Ensure small CTA like 'İletişime Geç' inside pale backgrounds stays visible */
.cta-ghost, a.cta-ghost { color: var(--brand) !important; border: 1px solid rgba(15,23,42,0.04) !important; }

/* End targeted fixes */