/* ============================================================
   WakeSwim Academy — Dark Mode v3
   Palette (ocean-inspired):
     --dm-bg        : #0f172a  slate-900  — sayfa zemini
     --dm-surface   : #1e293b  slate-800  — kart, section yüzeyi
     --dm-raised    : #334155  slate-700  — input, badge, elevated
     --dm-border    : rgba(148,163,184,.10) — ince sınır
     --dm-text-1    : #f1f5f9  slate-100  — başlık
     --dm-text-2    : #cbd5e1  slate-300  — body text
     --dm-text-3    : #94a3b8  slate-400  — ikincil
     --dm-text-4    : #64748b  slate-500  — soluk
   ============================================================ */

/* ── Google Translate gizli widget div'i ───────────────────── */
.VIpgJd-ZVi9od-aZ2wEe-wOHMyf,
.VIpgJd-yAWNEb-L7lbkb { display: none !important; }

/* ── Sticky footer — body flex column, main fills space ───── */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body > main {
    flex: 1 1 auto;
}

/* ── Tema geçiş animasyonu ─────────────────────────────────── */
html.dark *,
html.dark *::before,
html.dark *::after {
    transition:
        background-color 0.2s ease,
        border-color     0.2s ease,
        color            0.15s ease,
        box-shadow       0.2s ease !important;
}
/* transition'ı görsel olmayan elemanlarda iptal et */
html.dark img,
html.dark video,
html.dark iframe,
html.dark svg { transition: none !important; }

/* ── Body & zemin ─────────────────────────────────────────── */
html.dark body {
    background-color: #0f172a !important;
    color: #cbd5e1 !important;
}

/* ── Beyaz & gri arka planlar ─────────────────────────────── */
html.dark .bg-white           { background-color: #1e293b !important; }
html.dark .bg-gray-50         { background-color: #0f172a !important; }
html.dark .bg-gray-100        { background-color: #1e293b !important; }
html.dark .bg-gray-200        { background-color: #334155 !important; }
html.dark .bg-slate-50        { background-color: #0f172a !important; }
html.dark .bg-slate-100       { background-color: #1e293b !important; }
html.dark .bg-slate-200       { background-color: #334155 !important; }

/* Özel renk: kurs section arka planı */
html.dark .bg-\[#eef6ff\]     { background-color: #0d1a2e !important; }

/* Yarı-saydam beyazlar */
html.dark .bg-white\/80,
html.dark .bg-white\/95       {
    background-color: rgba(30, 41, 59, 0.88) !important;
}
html.dark .bg-gray-50\/50     { background-color: rgba(15, 23, 42, 0.6) !important; }
html.dark .bg-white\/5        { background-color: rgba(255,255,255,0.03) !important; }
html.dark .bg-white\/10       { background-color: rgba(255,255,255,0.05) !important; }

/* Mavi tintler */
html.dark .bg-blue-50         { background-color: rgba(59,130,246,.07) !important; }
html.dark .bg-blue-100        { background-color: rgba(59,130,246,.13) !important; }

/* Durum renkleri */
html.dark .bg-green-50        { background-color: rgba(34,197,94,.07) !important; }
html.dark .bg-red-50          { background-color: rgba(239,68,68,.07) !important; }
html.dark .bg-yellow-50       { background-color: rgba(234,179,8,.07) !important; }
html.dark .bg-orange-50       { background-color: rgba(249,115,22,.07) !important; }

/* ── Gradient bölümleri ───────────────────────────────────── */
/* Gradient'leri kaldır, solid renkle değiştir */
html.dark [class*="from-gray-50"],
html.dark [class*="from-slate-50"] {
    background-image: none !important;
    background-color: #0f172a !important;
}
html.dark [class*="from-slate-50"][class*="to-white"],
html.dark .bg-gradient-to-br.from-slate-50,
html.dark .bg-gradient-to-b.from-slate-50 {
    background-image: none !important;
    background-color: #0f172a !important;
}

/* Hero bölümü gradient */
html.dark header.relative.min-h-\[90vh\] {
    background: radial-gradient(ellipse 80% 60% at 50% 0%, #0d2044 0%, #0f172a 60%) !important;
    background-image: none !important;
}
html.dark header.relative.min-h-\[90vh\] > .absolute svg {
    opacity: 0.04 !important;
}

/* ── Hero küçük elemanlar ─────────────────────────────────── */
/* "Antalya'nın en çok..." badge */
html.dark .bg-white\/80.backdrop-blur-md.rounded-full {
    background-color: rgba(30, 41, 59, 0.85) !important;
    border-color: rgba(148,163,184,.15) !important;
}
/* Telefon butonu */
html.dark a[href^="tel"].bg-white,
html.dark a.bg-white.border-2 {
    background-color: #1e293b !important;
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
html.dark a[href^="tel"].bg-white i { color: #60a5fa !important; }

/* ── Metin renkleri ── gray & slate ─────────────────────── */
html.dark .text-gray-900,  html.dark .text-slate-900  { color: #f1f5f9 !important; }
html.dark .text-gray-800,  html.dark .text-slate-800  { color: #e2e8f0 !important; }
html.dark .text-gray-700,  html.dark .text-slate-700  { color: #cbd5e1 !important; }
html.dark .text-gray-600,  html.dark .text-slate-600  { color: #94a3b8 !important; }
html.dark .text-gray-500,  html.dark .text-slate-500  { color: #64748b !important; }
html.dark .text-gray-400,  html.dark .text-slate-400  { color: #475569 !important; }

/* ── Sınır renkleri ──────────────────────────────────────── */
html.dark .border,
html.dark .border-gray-50,  html.dark .border-gray-100,
html.dark .border-gray-200, html.dark .border-gray-200\/50,
html.dark .border-gray-300,
html.dark .border-slate-100,html.dark .border-slate-200,
html.dark .border-slate-200\/60,html.dark .border-slate-300 {
    border-color: rgba(148,163,184,.12) !important;
}
html.dark .border-t  { border-top-color:    rgba(148,163,184,.12) !important; }
html.dark .border-b  { border-bottom-color: rgba(148,163,184,.12) !important; }
html.dark .border-y  { border-top-color:    rgba(148,163,184,.12) !important;
                       border-bottom-color: rgba(148,163,184,.12) !important; }
html.dark .border-l-2 { border-left-color: rgba(148,163,184,.12); }
html.dark .border-l-blue-500  { border-left-color: #3b82f6 !important; }
html.dark .border-l-transparent { border-left-color: transparent !important; }
html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: rgba(148,163,184,.12) !important;
}

/* ── Hover durumları ─────────────────────────────────────── */
html.dark .hover\:bg-gray-50:hover,
html.dark .hover\:bg-gray-100:hover  { background-color: #334155 !important; }
html.dark .hover\:bg-blue-50:hover   { background-color: rgba(59,130,246,.1) !important; }
html.dark .hover\:bg-blue-100:hover  { background-color: rgba(59,130,246,.16) !important; }
html.dark .hover\:bg-red-50:hover    { background-color: rgba(239,68,68,.08) !important; }

/* ── Form elemanları ─────────────────────────────────────── */
html.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="range"]),
html.dark textarea,
html.dark select {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
    border-color: rgba(148,163,184,.2) !important;
}
html.dark input::placeholder,
html.dark textarea::placeholder { color: #64748b !important; }
html.dark input:focus, html.dark textarea:focus, html.dark select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.18) !important;
}
html.dark label { color: #cbd5e1 !important; }

/* ── Gölgeler ────────────────────────────────────────────── */
html.dark .shadow-sm  { box-shadow: 0 1px 4px rgba(0,0,0,.35) !important; }
html.dark .shadow     { box-shadow: 0 2px 8px rgba(0,0,0,.45) !important; }
html.dark .shadow-md  { box-shadow: 0 4px 16px rgba(0,0,0,.5) !important; }
html.dark .shadow-lg  { box-shadow: 0 8px 28px rgba(0,0,0,.55) !important; }
html.dark .shadow-xl  { box-shadow: 0 16px 48px rgba(0,0,0,.6) !important; }

/* ── Dropdown menüler ────────────────────────────────────── */
html.dark [role="menu"] {
    background-color: #1e293b !important;
    border-color: rgba(148,163,184,.12) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,.5) !important;
}
html.dark [role="menuitem"]:hover { background-color: #334155 !important; }

/* ── Bildirim paneli ─────────────────────────────────────── */
html.dark .bg-blue-50\/40,
html.dark .bg-blue-50\/50  { background-color: rgba(59,130,246,.06) !important; }

/* ── Kurs kartları (#kurslar section) ───────────────────── */
html.dark #kurslar              { background-color: #0d1a2e !important; }
html.dark #kurslar .bg-white    { background-color: #172033 !important; }
html.dark #kurslar .bg-slate-200 { background-color: #334155 !important; }
html.dark #kurslar .border-slate-200\/60,
html.dark #kurslar .border-slate-200 { border-color: rgba(148,163,184,.10) !important; }
html.dark #kurslar .text-slate-900 { color: #f1f5f9 !important; }
html.dark #kurslar .text-gray-800  { color: #e2e8f0 !important; }
html.dark #kurslar .bg-blue-50,
html.dark #kurslar .bg-\[#eef6ff\] { background-color: rgba(30,73,201,.12) !important; }
html.dark #kurslar .hover\:bg-blue-700:hover { background-color: #1d4ed8 !important; }

/* ── "Neden biz" kartları ────────────────────────────────── */
html.dark #neden-biz             { background-color: #111827 !important; }
html.dark #neden-biz .bg-gray-50 { background-color: #172033 !important; }
html.dark #neden-biz .bg-white   { background-color: #1e293b !important; }
html.dark #neden-biz .border-gray-100 { border-color: rgba(148,163,184,.1) !important; }

/* ── Blog kartları ───────────────────────────────────────── */
html.dark .group.bg-gray-50.rounded-3xl { background-color: #172033 !important; }
html.dark .bg-gray-200.overflow-hidden  { background-color: #334155 !important; }

/* ── Yorumlar kartları ───────────────────────────────────── */
html.dark #yorumlar              { background-color: #111827 !important;
                                   background-image: none !important; }
html.dark #yorumlar .bg-white    { background-color: #172033 !important; }
html.dark #yorumlar .bg-gray-100 { background-color: #334155 !important; }

/* ── FAQ (Sıkça Sorulan Sorular) ─────────────────────────── */
html.dark #sss                      { background-color: #0f172a !important; }
html.dark details.bg-gray-50        { background-color: #172033 !important; }
html.dark details .border-gray-200  { border-color: rgba(148,163,184,.12) !important; }
html.dark details summary .bg-white { background-color: #1e293b !important; }
html.dark details .border-gray-200\/50 { border-color: rgba(148,163,184,.1) !important; }

/* ── İletişim bölümü — zaten koyu (bg-slate-900) ────────── */
/* Harita iframe'ini koyu filtre ile göster */
html.dark iframe[src*="google.com/maps"] {
    filter: invert(90%) hue-rotate(180deg) saturate(0.8) brightness(0.85) !important;
}
/* İletişim kartları — bg-white/5 zaten yarı-saydam, koru */
html.dark #iletisim .bg-white\/5  { background-color: rgba(255,255,255,0.04) !important; }
html.dark #iletisim .bg-white\/10 { background-color: rgba(255,255,255,0.07) !important; }

/* ── Footer sitemap ──────────────────────────────────────── */
html.dark .hidden.md\:block.bg-gradient-to-br,
html.dark div.hidden.md\:block[class*="from-gray-50"] {
    background-image: none !important;
    background-color: #0a1120 !important;
    border-top-color: rgba(148,163,184,.08) !important;
}
html.dark footer .hidden.md\:block.bg-white,
html.dark footer div.bg-white {
    background-color: #060c18 !important;
    border-top-color: rgba(148,163,184,.08) !important;
}

/* ── Mobil navigasyon barı ───────────────────────────────── */
html.dark #mobile-nav-bar {
    background: rgba(10, 17, 32, 0.92) !important;
    border-top-color: rgba(148,163,184,.1) !important;
    box-shadow: 0 -8px 32px rgba(0,0,0,.4) !important;
}
html.dark #mobile-nav-bar .text-gray-600,
html.dark #mobile-nav-bar .text-gray-500 { color: #94a3b8 !important; }
html.dark #mobile-nav-bar .group:hover .text-gray-600 { color: inherit; }

/* ── Tablolar ────────────────────────────────────────────── */
html.dark table     { color: #e2e8f0 !important; }
html.dark th        { background-color: #1e293b !important;
                      color: #cbd5e1 !important;
                      border-color: rgba(148,163,184,.12) !important; }
html.dark td        { border-color: rgba(148,163,184,.12) !important; }
html.dark tr:hover  { background-color: #1e293b !important; }

/* ── Scroll barı ─────────────────────────────────────────── */
html.dark ::-webkit-scrollbar         { background: #0f172a; }
html.dark ::-webkit-scrollbar-thumb   { background: #334155; border-radius: 4px; }
html.dark ::-webkit-scrollbar-thumb:hover { background: #475569; }

/* ── Dark mode toggle butonu ─────────────────────────────── */
.dark-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 44px;
    border-radius: 8px;
    color: rgba(255,255,255,.7);
    background: transparent;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s, color 0.2s;
}
.dark-toggle:hover {
    background-color: rgba(255,255,255,.1);
    color: #fff;
}