/* ============================================================
   ZÜMRÜT — iki modlu site teması (açık + koyu)
   ------------------------------------------------------------
   Bu dosya çekirdek derlemeden (public/build) SONRA yüklenir.
   Üç katman:

   1) Marka aksanı (mod bağımsız): çekirdeğin gök/çivit vurguları
      her iki modda zümrüde çevrilir.
   2) g-* bileşen sınıfları: temanın kendi yerleşim/ana sayfa
      görünümleri bunları kullanır; renkleri mod değişkenlerinden alır.
   3) Koyu mod katmanı (html.g-koyu): çekirdekten gelen İÇ SAYFALARIN
      açık tema utility'leri koyu palete yeniden haritalanır. Açık
      modda bu katman devre dışıdır — çekirdek görünüm zaten açıktır.

   Mod seçimi: ziyaretçi üstteki ay/güneş düğmesiyle seçer
   (localStorage "ss-tema"); tercih yoksa işletim sistemi teması.
   ============================================================ */

:root {
    /* AÇIK mod paleti */
    --g-zemin: #F8FAFC;
    --g-yuzey: #FFFFFF;
    --g-kabarik: #F1F5F9;
    --g-cizgi: rgba(15, 23, 42, 0.10);
    --g-baslik: #0F172A;
    --g-metin: #334155;
    --g-soluk: #64748B;
    --g-vurgu: #059669;
    --g-vurgu-koyu: #047857;
    --g-vurgu-2: #0891B2;
    --g-btn-metin: #FFFFFF;
    --g-ust-zemin: #0B1220;      /* ince üst bar iki modda da koyu */
    --g-golge: rgba(15, 23, 42, 0.08);
}

html.g-koyu {
    /* KOYU mod paleti */
    color-scheme: dark;
    --g-zemin: #0A101E;
    --g-yuzey: #101A2C;
    --g-kabarik: #15223A;
    --g-cizgi: rgba(148, 163, 184, 0.14);
    --g-baslik: #F1F5F9;
    --g-metin: #B9C5D8;
    --g-soluk: #8494AB;
    --g-vurgu: #34D399;
    --g-vurgu-koyu: #0EA47A;
    --g-vurgu-2: #22D3EE;
    --g-btn-metin: #052E22;
    --g-golge: rgba(2, 6, 16, 0.5);
}

/* ---------- Taban ---------- */

body { background: var(--g-zemin); color: var(--g-metin); }

h1, h2, h3, h4 {
    font-family: 'Sora', ui-sans-serif, system-ui, sans-serif;
    letter-spacing: -0.01em;
}

::selection { background: rgba(16, 185, 129, 0.3); }

a:focus-visible, button:focus-visible, input:focus-visible {
    outline: 2px solid var(--g-vurgu);
    outline-offset: 2px;
}

/* ---------- 1) Marka aksanı (iki modda da geçerli) ---------- */

.text-sky-500, .text-sky-600, .text-sky-700 { color: var(--g-vurgu); }
.hover\:text-sky-500:hover, .hover\:text-sky-600:hover, .hover\:text-sky-700:hover { color: var(--g-vurgu-2); }
.group:hover .group-hover\:text-sky-700 { color: var(--g-vurgu); }
.from-sky-400 { --tw-gradient-from: #34D399; }
.from-sky-500 { --tw-gradient-from: #10B981; }
.from-sky-600 { --tw-gradient-from: #059669; }
.to-indigo-500 { --tw-gradient-to: #22D3EE; }
.to-indigo-600 { --tw-gradient-to: #0891B2; }
.to-indigo-700 { --tw-gradient-to: #0E7490; }
.hover\:from-sky-400:hover { --tw-gradient-from: #34D399; }
.hover\:to-indigo-500:hover { --tw-gradient-to: #22D3EE; }
.bg-sky-100 { background-color: rgba(16, 185, 129, 0.12); }
.border-sky-200, .border-sky-300, .border-sky-400, .border-sky-500 { border-color: rgba(16, 185, 129, 0.45); }
.hover\:border-sky-300:hover, .hover\:border-sky-400:hover { border-color: rgba(16, 185, 129, 0.45); }
.ring-sky-100, .ring-sky-400\/30 { --tw-ring-color: rgba(16, 185, 129, 0.3); }
.ring-sky-500, .focus\:ring-sky-500:focus { --tw-ring-color: var(--g-vurgu); }
.hover\:bg-sky-50:hover { background-color: rgba(16, 185, 129, 0.08); }

/* ---------- 2) Tema bileşenleri (g-*, mod değişkenlerinden) ---------- */

.g-ustbar { background: var(--g-ust-zemin); color: #8494AB; border-bottom: 1px solid rgba(148, 163, 184, 0.14); }
.g-ustbar a:hover { color: var(--g-vurgu); }

.g-baslik {
    background: color-mix(in srgb, var(--g-zemin) 88%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--g-cizgi);
}

.g-nav-link { color: var(--g-metin); border-radius: 0.5rem; transition: color .15s ease, background .15s ease; }
.g-nav-link:hover { color: var(--g-vurgu); background: rgba(16, 185, 129, 0.08); }

.g-acilir {
    background: var(--g-yuzey);
    border: 1px solid var(--g-cizgi);
    border-radius: 0.75rem;
    box-shadow: 0 18px 40px var(--g-golge);
    overflow: hidden;
}
.g-acilir a { color: var(--g-metin); transition: color .15s ease, background .15s ease; }
.g-acilir a:hover { color: var(--g-vurgu); background: rgba(16, 185, 129, 0.08); }

.g-btn {
    background: linear-gradient(100deg, var(--g-vurgu-koyu), var(--g-vurgu));
    color: var(--g-btn-metin);
    font-weight: 600;
    border-radius: 0.75rem;
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.25);
    transition: filter .15s ease, transform .15s ease;
}
.g-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }

.g-btn-ikincil {
    background: color-mix(in srgb, var(--g-soluk) 10%, transparent);
    color: var(--g-baslik);
    font-weight: 600;
    border: 1px solid var(--g-cizgi);
    border-radius: 0.75rem;
    transition: border-color .15s ease, color .15s ease;
}
.g-btn-ikincil:hover { border-color: rgba(16, 185, 129, 0.5); color: var(--g-vurgu); }

.g-kart {
    background: var(--g-yuzey);
    border: 1px solid var(--g-cizgi);
    border-radius: 1rem;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.g-kart:hover, a.g-kart:hover {
    transform: translateY(-2px);
    border-color: rgba(16, 185, 129, 0.35);
    box-shadow: 0 16px 40px var(--g-golge);
}

.g-cip { background: var(--g-kabarik); border: 1px solid var(--g-cizgi); border-radius: 9999px; color: var(--g-metin); }
.g-cip strong, .g-cip .g-fiyat { color: var(--g-vurgu); }

.g-rozet {
    border: 1px solid rgba(16, 185, 129, 0.35);
    background: rgba(16, 185, 129, 0.08);
    color: var(--g-vurgu);
    border-radius: 9999px;
    font-weight: 600;
}

.g-etiket { color: var(--g-vurgu); font-weight: 600; text-transform: uppercase; letter-spacing: 0.2em; }

.g-gradyan-metin {
    background: linear-gradient(95deg, var(--g-vurgu), var(--g-vurgu-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.g-ikon { background: rgba(16, 185, 129, 0.1); color: var(--g-vurgu); border-radius: 0.75rem; }

/* Hero: ince ızgara + zümrüt parlama (iki modda da) */
.g-hero {
    position: relative;
    border-bottom: 1px solid var(--g-cizgi);
    background:
        radial-gradient(ellipse at top right, rgba(16, 185, 129, 0.10), transparent 55%),
        radial-gradient(ellipse at bottom left, rgba(8, 145, 178, 0.06), transparent 50%);
}
.g-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(color-mix(in srgb, var(--g-soluk) 12%, transparent) 1px, transparent 1px),
        linear-gradient(90deg, color-mix(in srgb, var(--g-soluk) 12%, transparent) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
    mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
}

/* Terminal görünümlü kart (hero'daki domain sorgusu) */
.g-terminal { background: var(--g-yuzey); border: 1px solid var(--g-cizgi); border-radius: 1rem; box-shadow: 0 24px 60px var(--g-golge); }
html.g-koyu .g-terminal { background: #0C1526; }
.g-terminal-bas { border-bottom: 1px solid var(--g-cizgi); }
.g-nokta { width: 10px; height: 10px; border-radius: 9999px; display: inline-block; }
.g-nokta-1 { background: #F87171; } .g-nokta-2 { background: #FBBF24; } .g-nokta-3 { background: #34D399; }

.g-bant { background: var(--g-kabarik); border-top: 1px solid var(--g-cizgi); border-bottom: 1px solid var(--g-cizgi); }
html.g-koyu .g-bant { background: var(--g-yuzey); }

.g-sekme {
    border-radius: 9999px;
    color: var(--g-soluk);
    border: 1px solid var(--g-cizgi);
    background: transparent;
    font-weight: 600;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.g-sekme:hover { color: var(--g-baslik); background: color-mix(in srgb, var(--g-soluk) 10%, transparent); }
.g-sekme-aktif { background: rgba(16, 185, 129, 0.12); border-color: rgba(16, 185, 129, 0.5); color: var(--g-vurgu); }

.g-istatistik {
    background:
        radial-gradient(ellipse at top left, rgba(16, 185, 129, 0.12), transparent 55%),
        var(--g-kabarik);
    border-top: 1px solid var(--g-cizgi);
    border-bottom: 1px solid var(--g-cizgi);
}
html.g-koyu .g-istatistik {
    background:
        radial-gradient(ellipse at top left, rgba(52, 211, 153, 0.16), transparent 55%),
        linear-gradient(120deg, #0C1A24, #0A1428);
}

.g-altbilgi { background: var(--g-ust-zemin); border-top: 1px solid rgba(148, 163, 184, 0.14); color: #8494AB; }
.g-altbilgi a:hover { color: var(--g-vurgu); }
.g-altbilgi h3 { color: #F1F5F9; }
/* Footer iki modda da koyu zeminli: içindeki açık-tema metin sınıfları sabitlenir */
.g-altbilgi .text-slate-900, .g-altbilgi .text-slate-500 { color: #8494AB; }

.g-ping { background: var(--g-vurgu); }

/* Moda göre logo: açık modda koyu metinli, koyu modda beyaz logo */
html.g-koyu .g-logo-acik { display: none; }
html:not(.g-koyu) .g-logo-koyu { display: none; }

/* Mod düğmesi */
.g-mod { border: 1px solid var(--g-cizgi); border-radius: 9999px; color: var(--g-metin); transition: color .15s ease, border-color .15s ease; }
.g-mod:hover { color: var(--g-vurgu); border-color: rgba(16, 185, 129, 0.5); }
html.g-koyu .g-mod .g-mod-ay { display: none; }
html:not(.g-koyu) .g-mod .g-mod-gunes { display: none; }

/* ---------- 3) KOYU MOD katmanı: çekirdek iç sayfalar ---------- */

/* Zeminler */
html.g-koyu .bg-white { background-color: var(--g-yuzey); }
html.g-koyu .bg-white\/95 { background-color: rgba(16, 26, 44, 0.92); }
html.g-koyu .bg-slate-50, html.g-koyu .bg-slate-50\/60, html.g-koyu .bg-slate-100,
html.g-koyu .bg-sky-50, html.g-koyu .bg-sky-50\/70 { background-color: var(--g-kabarik); }
html.g-koyu .bg-slate-900 { background-color: #1D2B47; }
html.g-koyu .bg-slate-700, html.g-koyu .hover\:bg-slate-700:hover { background-color: rgba(36, 52, 83, 0.9); }
html.g-koyu .bg-emerald-50 { background-color: rgba(52, 211, 153, 0.08); }
html.g-koyu .bg-red-50 { background-color: rgba(248, 113, 113, 0.1); }
html.g-koyu .bg-amber-50 { background-color: rgba(251, 191, 36, 0.1); }
html.g-koyu .hover\:bg-slate-50:hover, html.g-koyu .hover\:bg-slate-100:hover { background-color: rgba(148, 163, 184, 0.08); }
html.g-koyu .hover\:bg-sky-50:hover { background-color: rgba(52, 211, 153, 0.08); }

/* Metinler */
html.g-koyu .text-slate-900, html.g-koyu .text-slate-800 { color: var(--g-baslik); }
html.g-koyu .text-slate-700, html.g-koyu .text-slate-600 { color: #C6D1E1; }
html.g-koyu .text-slate-500 { color: #93A3B8; }
html.g-koyu .text-slate-400 { color: var(--g-soluk); }

/* Çizgiler ve halkalar */
html.g-koyu .border-slate-100, html.g-koyu .border-slate-200, html.g-koyu .border-slate-300 { border-color: var(--g-cizgi); }
html.g-koyu .ring-slate-200, html.g-koyu .ring-slate-300 { --tw-ring-color: var(--g-cizgi); }
html.g-koyu .ring-emerald-200 { --tw-ring-color: rgba(52, 211, 153, 0.4); }
html.g-koyu .divide-slate-100 > * + *, html.g-koyu .divide-slate-200 > * + * { border-color: var(--g-cizgi); }

/* Açık zemin gradyanları koyuda zemine döner */
html.g-koyu .from-sky-50\/70 { --tw-gradient-from: rgba(21, 34, 58, 0.7); }
html.g-koyu .via-white { --tw-gradient-via: var(--g-zemin); }
html.g-koyu .to-white { --tw-gradient-to: var(--g-zemin); }
html.g-koyu .from-sky-100\/60 { --tw-gradient-from: rgba(52, 211, 153, 0.08); }
html.g-koyu .to-indigo-100\/40 { --tw-gradient-to: rgba(34, 211, 238, 0.06); }

/* İkon yongaları: açık pastel kutular → yarı saydam koyu kutular */
html.g-koyu .bg-indigo-100 { background-color: rgba(129, 140, 248, 0.14); }
html.g-koyu .bg-cyan-100 { background-color: rgba(34, 211, 238, 0.14); }
html.g-koyu .bg-blue-100 { background-color: rgba(96, 165, 250, 0.14); }
html.g-koyu .bg-violet-100 { background-color: rgba(167, 139, 250, 0.14); }
html.g-koyu .bg-amber-100 { background-color: rgba(251, 191, 36, 0.14); }
html.g-koyu .bg-rose-100 { background-color: rgba(251, 113, 133, 0.14); }
html.g-koyu .bg-emerald-100 { background-color: rgba(52, 211, 153, 0.14); }
html.g-koyu .text-indigo-600 { color: #A5B4FC; }
html.g-koyu .text-cyan-600 { color: #67E8F9; }
html.g-koyu .text-blue-600 { color: #93C5FD; }
html.g-koyu .text-violet-600 { color: #C4B5FD; }
html.g-koyu .text-amber-600, html.g-koyu .text-amber-700 { color: #FCD34D; }
html.g-koyu .text-rose-500, html.g-koyu .text-rose-600 { color: #FDA4AF; }
html.g-koyu .text-red-600, html.g-koyu .text-red-700 { color: #FCA5A5; }
html.g-koyu .text-emerald-600, html.g-koyu .text-emerald-700 { color: #6EE7B7; }

/* Form elemanları ve gölgeler */
html.g-koyu input, html.g-koyu select, html.g-koyu textarea { color-scheme: dark; }
html.g-koyu .placeholder\:text-slate-400::placeholder { color: var(--g-soluk); }
html.g-koyu .shadow-sm { box-shadow: 0 1px 2px rgba(2, 6, 16, 0.5); }
html.g-koyu .shadow-md { box-shadow: 0 8px 20px rgba(2, 6, 16, 0.45); }
html.g-koyu .shadow-lg, html.g-koyu .shadow-xl { box-shadow: 0 20px 45px rgba(2, 6, 16, 0.55); }

@media (prefers-reduced-motion: reduce) {
    .g-btn, .g-kart, .g-nav-link { transition: none; }
}