/* ==========================================================================
   BikeCityHub — Açık tema (uygulamanın açık temasından): pastel lime/gök mavisi zemin,
   beyaz yuvarlak kartlar, yumuşak gölgeler, lime vurgu + zeytin yeşili metin vurgusu.
   Yalnızca html[data-theme="light"] iken yüklenir; koyu tema dosyalarına dokunmaz.
   ========================================================================== */

html[data-theme="light"] {
    color-scheme: light;
    --accent: #d4ff3f;
    --accent-2: #b4ee2f;
    --accent-text: #4d6a0c;
    --bg: #f5f7fa;
    --bg-soft: #ffffff;
    --card: #ffffff;
    --panel: #ffffff;
    --text: #14181f;
    --muted: rgba(20, 24, 31, 0.66);
    --stroke: #e3e7ee;
    --sp-blue: #3b82f6;
    --sp-violet: #8b5cf6;
    --brand: #d4ff3f;
    --brand-strong: #b4ee2f;
    --lt-shadow: 0 18px 44px -22px rgba(20, 24, 31, 0.22);
    --lt-shadow-lg: 0 30px 70px -28px rgba(20, 24, 31, 0.3);
    --lt-r: 22px;
}

html[data-theme="light"] ::selection { background: rgba(212, 255, 63, 0.7); color: #14181f; }
html[data-theme="light"] body {
    color: var(--text);
    background:
        radial-gradient(900px circle at 8% -6%, rgba(212, 255, 63, 0.34), transparent 55%),
        radial-gradient(800px circle at 96% 6%, rgba(125, 211, 252, 0.32), transparent 55%),
        linear-gradient(180deg, #f8fbec 0%, #f3f6fb 42%, #eaf3fb 100%);
    background-attachment: fixed;
}

/* ---------- Aurora / ilerleme çubuğu ----------------------------------- */
html[data-theme="light"] .sp-aurora i:nth-child(1) { opacity: 0.34; }
html[data-theme="light"] .sp-aurora i:nth-child(2) { opacity: 0.3; }
html[data-theme="light"] .sp-aurora i:nth-child(3) { opacity: 0.2; }
html[data-theme="light"] .sp-aurora::after {
    background-image:
        linear-gradient(rgba(20, 24, 31, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(20, 24, 31, 0.035) 1px, transparent 1px);
}
html[data-theme="light"] .sp-progress { box-shadow: 0 0 14px rgba(163, 230, 53, 0.55); }

/* ---------- Header ------------------------------------------------------ */
html[data-theme="light"] header.site,
html[data-theme="light"] .site-header {
    background: rgba(255, 255, 255, 0.72);
    border-bottom: 1px solid rgba(20, 24, 31, 0.07);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset;
}
html[data-theme="light"] header.site.is-scrolled { background: rgba(255, 255, 255, 0.92); box-shadow: 0 14px 36px -24px rgba(20, 24, 31, 0.35); }
html[data-theme="light"] .brand { color: var(--text); }
html[data-theme="light"] .brand .mark,
html[data-theme="light"] .brand-mark { color: #14181f; }
html[data-theme="light"] .brand .mark svg { stroke: #14181f; }
html[data-theme="light"] nav.links a.navlink,
html[data-theme="light"] .nav-links a { color: var(--muted); }
html[data-theme="light"] nav.links a.navlink:hover,
html[data-theme="light"] nav.links a.navlink.is-active,
html[data-theme="light"] nav.links a.navlink.active,
html[data-theme="light"] .nav-links a:hover { color: var(--text); }
html[data-theme="light"] nav.links a.navlink::after { background: var(--accent-text); }
html[data-theme="light"] .lang-switch label { color: var(--muted); }
html[data-theme="light"] .lang-switch select {
    background: #fff; color: var(--text); border: 1px solid var(--stroke); border-radius: 10px;
}
html[data-theme="light"] .lang-switch select option { background: #fff; color: #14181f; }

/* ---------- Butonlar ---------------------------------------------------- */
html[data-theme="light"] .btn-solid,
html[data-theme="light"] .send,
html[data-theme="light"] .btn-primary,
html[data-theme="light"] .nav-cta {
    background: linear-gradient(135deg, #d4ff3f, #b8f02f); color: #14181f; border-color: transparent;
    box-shadow: 0 12px 28px -12px rgba(120, 170, 20, 0.7);
}
html[data-theme="light"] .btn-solid:hover { box-shadow: 0 18px 36px -12px rgba(120, 170, 20, 0.85); }
html[data-theme="light"] .btn-outline,
html[data-theme="light"] .btn-ghost {
    background: #fff; color: var(--text); border: 1px solid #cfd6e2; box-shadow: 0 6px 18px -12px rgba(20, 24, 31, 0.3);
}
html[data-theme="light"] .btn-outline:hover,
html[data-theme="light"] .btn-ghost:hover { border-color: var(--accent-text); color: var(--accent-text); background: #fff; }

/* ---------- Rozet / eyebrow / vurgu metinleri -------------------------- */
html[data-theme="light"] .badge,
html[data-theme="light"] .eyebrow,
html[data-theme="light"] .legal-eyebrow {
    background: rgba(163, 230, 53, 0.22); border: 1px solid rgba(95, 127, 22, 0.28); color: var(--accent-text);
}
html[data-theme="light"] .badge::before { background: #6fa81a; box-shadow: 0 0 10px rgba(111, 168, 26, 0.6); }
html[data-theme="light"] .blog-section .view-all,
html[data-theme="light"] .blog-teaser-readmore,
html[data-theme="light"] .post-card .readmore,
html[data-theme="light"] .related-eyebrow,
html[data-theme="light"] .related-all,
html[data-theme="light"] .related-card .more,
html[data-theme="light"] .post-eyebrow,
html[data-theme="light"] .blog-hero .eyebrow,
html[data-theme="light"] .person span,
html[data-theme="light"] .row a.mail,
html[data-theme="light"] .post-content a,
html[data-theme="light"] .hero h1 em,
html[data-theme="light"] .spot ul li .dash { color: var(--accent-text); }
html[data-theme="light"] .blog-hero .eyebrow { background: none; border: 0; padding: 0; }
html[data-theme="light"] .back-link:hover,
html[data-theme="light"] .footer-col a:hover,
html[data-theme="light"] .pagination a:hover,
html[data-theme="light"] .share-btn:hover { color: var(--accent-text); border-color: var(--accent-text); }
html[data-theme="light"] .post-content blockquote { border-left-color: #8ac22a; }
html[data-theme="light"][dir="rtl"] .post-content blockquote { border-right-color: #8ac22a; }

/* ---------- Hero -------------------------------------------------------- */
html[data-theme="light"] .hero h1 { color: var(--text); }
html[data-theme="light"] .hero h1 span[data-i18n="hero_title_2"] {
    background: linear-gradient(100deg, #5f7f16, #2f9e5b, #2563eb, #7c3aed, #5f7f16);
    background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .hero p.desc,
html[data-theme="light"] .spot p.desc { color: var(--muted); }
html[data-theme="light"] .hero-media {
    border: 1px solid rgba(255, 255, 255, 0.9); background: #fff;
    box-shadow: 0 50px 100px -40px rgba(20, 24, 31, 0.4), 0 0 90px -30px rgba(163, 230, 53, 0.75);
}
html[data-theme="light"] .sp-orbit { border-color: rgba(95, 127, 22, 0.25); }

/* ---------- Ticker / bölümler ------------------------------------------ */
html[data-theme="light"] .sp-ticker { background: rgba(255, 255, 255, 0.55); border-color: rgba(20, 24, 31, 0.07); }
html[data-theme="light"] .sp-ticker__item { color: rgba(20, 24, 31, 0.5); }
html[data-theme="light"] .sp-ticker__item::after { color: #8ac22a; }
html[data-theme="light"] section.spot,
html[data-theme="light"] section.spot.alt,
html[data-theme="light"] .quotes-section { border-color: rgba(20, 24, 31, 0.06); }
html[data-theme="light"] section.spot.alt { background: rgba(255, 255, 255, 0.62); }
html[data-theme="light"] .quotes-section { background: rgba(255, 255, 255, 0.5); }
html[data-theme="light"] .spot-media {
    border: 1px solid rgba(255, 255, 255, 0.95); background: #fff; box-shadow: var(--lt-shadow-lg);
}
html[data-theme="light"] .spot-media:hover { border-color: rgba(138, 194, 42, 0.6); box-shadow: 0 40px 80px -34px rgba(95, 127, 22, 0.5); }
html[data-theme="light"] .spot h2,
html[data-theme="light"] .grid-section .head h2,
html[data-theme="light"] .quotes-section h2,
html[data-theme="light"] .blog-section .head h2 {
    background: linear-gradient(120deg, #14181f 55%, #4d6a0c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
html[data-theme="light"] .spot ul li { color: rgba(20, 24, 31, 0.82); }
html[data-theme="light"] .spot ul li .dash {
    background-color: rgba(163, 230, 53, 0.3); border-color: rgba(95, 127, 22, 0.35);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234d6a0c' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* ---------- Kartlar ----------------------------------------------------- */
html[data-theme="light"] .feat-card,
html[data-theme="light"] .quote-card,
html[data-theme="light"] .blog-teaser-card,
html[data-theme="light"] .blog-card,
html[data-theme="light"] .post-card,
html[data-theme="light"] .related-card,
html[data-theme="light"] .card {
    background: #fff !important; border: 1px solid var(--stroke) !important; border-radius: var(--lt-r) !important;
    box-shadow: var(--lt-shadow); backdrop-filter: none;
}
html[data-theme="light"] .feat-card:hover,
html[data-theme="light"] .quote-card:hover,
html[data-theme="light"] .blog-teaser-card:hover,
html[data-theme="light"] .post-card:hover,
html[data-theme="light"] .related-card:hover {
    border-color: rgba(138, 194, 42, 0.7) !important; box-shadow: var(--lt-shadow-lg);
}
html[data-theme="light"] .feat-card::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%), rgba(212, 255, 63, 0.3), transparent 45%); }
html[data-theme="light"] .feat-card .icon { background: rgba(212, 255, 63, 0.4); border-color: rgba(95, 127, 22, 0.3); }
html[data-theme="light"] .feat-card .icon svg { stroke: var(--accent-text); }
html[data-theme="light"] .feat-card p,
html[data-theme="light"] .quote-card p.text { color: rgba(20, 24, 31, 0.72); }
html[data-theme="light"] .quote-person .role { color: rgba(20, 24, 31, 0.5); }
html[data-theme="light"] .avatar { color: #14181f; box-shadow: 0 8px 20px -8px rgba(120, 170, 20, 0.7); }
html[data-theme="light"] .blog-teaser-card .thumb,
html[data-theme="light"] .post-card .thumb,
html[data-theme="light"] .related-card .thumb { background: linear-gradient(135deg, #eef3e0, #e6eef8); }
html[data-theme="light"] .related-card .thumb::after { background: linear-gradient(180deg, transparent 60%, rgba(20, 24, 31, 0.18)); }
html[data-theme="light"] .blog-teaser-meta,
html[data-theme="light"] .post-meta,
html[data-theme="light"] .post-meta-row,
html[data-theme="light"] .related-card .date,
html[data-theme="light"] .share-label,
html[data-theme="light"] .card .tag { color: rgba(20, 24, 31, 0.52); }
html[data-theme="light"] .related-card p { color: var(--muted); }

/* ---------- CTA --------------------------------------------------------- */
html[data-theme="light"] .cta-banner {
    background: linear-gradient(120deg, #d4ff3f, #b8f02f, #d4ff3f); background-size: 200% 100%;
    box-shadow: 0 50px 110px -44px rgba(120, 170, 20, 0.75);
}
html[data-theme="light"] .cta-banner h2 { color: #14181f; }
html[data-theme="light"] .cta-banner p { color: rgba(20, 24, 31, 0.78); }
html[data-theme="light"] .btn-dark { background: #14181f; color: #d4ff3f; border-color: #14181f; border-radius: 14px; }
html[data-theme="light"] .btn-dark-outline { color: #14181f; border-color: #14181f; border-radius: 14px; }

/* ---------- Footer ------------------------------------------------------ */
html[data-theme="light"] footer.site,
html[data-theme="light"] .site-footer { border-top: 1px solid rgba(20, 24, 31, 0.08); background: rgba(255, 255, 255, 0.55); }
html[data-theme="light"] .footer-grid,
html[data-theme="light"] .footer-bottom { border-color: rgba(20, 24, 31, 0.08); }
html[data-theme="light"] .footer-col .label { color: rgba(20, 24, 31, 0.5); }
html[data-theme="light"] .footer-col a,
html[data-theme="light"] .footer-links a { color: rgba(20, 24, 31, 0.72); }
html[data-theme="light"] .footer-brand p,
html[data-theme="light"] .footer-bottom,
html[data-theme="light"] .footer-row { color: rgba(20, 24, 31, 0.55); }

/* ---------- Yukarı çık / mobil menü ------------------------------------ */
html[data-theme="light"] .sp-top { background: #fff; color: var(--accent-text); border-color: rgba(95, 127, 22, 0.35); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .sp-top:hover { background: var(--accent); color: #14181f; }
html[data-theme="light"] .sp-burger { background: #fff; border-color: var(--stroke); color: var(--text); }
@media (max-width: 900px) {
    html[data-theme="light"] nav.links { background: rgba(255, 255, 255, 0.98); border-bottom: 1px solid var(--stroke); box-shadow: 0 30px 60px -30px rgba(20, 24, 31, 0.35); }
    html[data-theme="light"] header.site.menu-open { background: rgba(255, 255, 255, 0.98); }
    html[data-theme="light"] nav.links a.navlink:hover { background: rgba(20, 24, 31, 0.05); }
}

/* ---------- Blog listesi / yazı ---------------------------------------- */
html[data-theme="light"] .blog-hero { border-bottom: 1px solid rgba(20, 24, 31, 0.06); }
html[data-theme="light"] .pagination a,
html[data-theme="light"] .pagination span { background: #fff; border: 1px solid var(--stroke); border-radius: 12px; }
html[data-theme="light"] .pagination .current { background: var(--accent); color: #14181f; border-color: transparent; }
html[data-theme="light"] .post-hero-banner { background: rgba(255, 255, 255, 0.6); border-bottom: 1px solid var(--stroke); }
html[data-theme="light"] .post-meta-row { border-bottom: 1px solid var(--stroke); }
html[data-theme="light"] .post-content { color: rgba(20, 24, 31, 0.9); }
html[data-theme="light"] .share-btn { background: #fff; border: 1px solid var(--stroke); color: var(--text); }
html[data-theme="light"] .related-section { background: rgba(255, 255, 255, 0.55); border-top: 1px solid rgba(20, 24, 31, 0.07); }
html[data-theme="light"] .related-card .more svg { stroke: currentColor; }

/* ---------- İletişim ---------------------------------------------------- */
html[data-theme="light"] .form-card {
    background: linear-gradient(180deg, rgba(212, 255, 63, 0.22), #fff 36%) !important; border-color: rgba(138, 194, 42, 0.45) !important;
}
html[data-theme="light"] .ico { background: rgba(212, 255, 63, 0.4); border: 1px solid rgba(95, 127, 22, 0.3); color: var(--accent-text); border-radius: 14px; }
html[data-theme="light"] .person { background: #f7f9fc; border: 1px solid var(--stroke); border-radius: 16px; }
html[data-theme="light"] .field label { color: rgba(20, 24, 31, 0.62); }
html[data-theme="light"] .field input,
html[data-theme="light"] .field textarea { background: #f3f5f9; border: 1px solid var(--stroke); color: var(--text); border-radius: 14px; }
html[data-theme="light"] .field input::placeholder,
html[data-theme="light"] .field textarea::placeholder { color: rgba(20, 24, 31, 0.38); }
html[data-theme="light"] .field input:focus,
html[data-theme="light"] .field textarea:focus { background: #fff; border-color: #6fa81a; box-shadow: 0 0 0 4px rgba(163, 230, 53, 0.3); }
html[data-theme="light"] .input-wrap svg { color: rgba(20, 24, 31, 0.4); }
html[data-theme="light"] .counter,
html[data-theme="light"] .privacy { color: rgba(20, 24, 31, 0.5); }
html[data-theme="light"] .send { border-radius: 14px; }
html[data-theme="light"] .spin { border-color: rgba(20, 24, 31, 0.2); border-top-color: #14181f; }
html[data-theme="light"] .banner-err { background: #fef2f2; border: 1px solid #fca5a5; color: #b91c1c; border-radius: 12px; }
html[data-theme="light"] .err { color: #dc2626; }
html[data-theme="light"] .success button { border: 1px solid var(--stroke); border-radius: 12px; background: #fff; }

/* ---------- Yasal sayfalar (site-modern.css) --------------------------- */
html[data-theme="light"] .legal-header h1,
html[data-theme="light"] .legal-content h2 { color: var(--text); }
html[data-theme="light"] .legal-updated,
html[data-theme="light"] .legal-content p,
html[data-theme="light"] .legal-content li { color: rgba(20, 24, 31, 0.78); }
html[data-theme="light"] .legal-content strong { color: var(--text); }
html[data-theme="light"] .legal-content a,
html[data-theme="light"] .legal-back { color: var(--accent-text); }
html[data-theme="light"] .legal-shell,
html[data-theme="light"] .legal-toc { background: #fff; border: 1px solid var(--stroke); border-radius: var(--lt-r); box-shadow: var(--lt-shadow); }
html[data-theme="light"] .legal-toc a { color: rgba(20, 24, 31, 0.7); }
html[data-theme="light"] .legal-toc a:hover { color: var(--accent-text); }
html[data-theme="light"] .legal-callout { background: rgba(212, 255, 63, 0.28); border: 1px solid rgba(95, 127, 22, 0.35); color: var(--text); border-radius: 14px; }
html[data-theme="light"] .legal-callout-warn { background: #fff7ed; border: 1px solid #fdba74; }
html[data-theme="light"] .menu-toggle { color: var(--text); }
html[data-theme="light"] .legal-content section[id] { border-color: var(--stroke); }