/* ============================================================ Codexia — Shared Landing Styles Tüm app'ler bu dosyayı paylaşır. Tek farklılaşma noktası: her sayfanın 'inde --accent değişkeni override edilir. Sıfır JS, dark-mode otomatik, mobil-öncelikli. ============================================================ */ :root { --accent: #4A9EFF; /* her app kendi 'inde override eder */ --bg: #ffffff; --bg-soft: #f5f6f8; --card: #ffffff; --text: #1a1a1a; --text-soft: #5c6066; --border: #e5e7eb; --radius: 16px; --maxw: 720px; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } @media (prefers-color-scheme: dark) { :root { --bg: #0d0d0f; --bg-soft: #161618; --card: #1a1a1d; --text: #f2f2f3; --text-soft: #9b9ba1; --border: rgba(255, 255, 255, 0.10); } } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; } .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; } /* ---------- Header ---------- */ .site-header { padding: 20px 0; border-bottom: 1px solid var(--border); } .site-header .wrap { display: flex; align-items: center; gap: 12px; } .site-header .logo { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 18px; flex-shrink: 0; overflow: hidden; } /* Metin placeholder kullanan app'ler icin accent arka plan; img varsa gizlenir */ .site-header .logo:not(:has(img)) { background: var(--accent); } .site-header .logo img { width: 100%; height: 100%; border-radius: 10px; object-fit: cover; display: block; } .site-header .brand { font-weight: 600; font-size: 18px; } .site-header nav { margin-left: auto; display: flex; gap: 18px; } .site-header nav a { color: var(--text-soft); text-decoration: none; font-size: 15px; } .site-header nav a:hover { color: var(--accent); } /* ---------- Hero ---------- */ .hero { padding: 72px 0 56px; text-align: center; } .hero h1 { font-size: 40px; line-height: 1.15; letter-spacing: -0.02em; } .hero p.tagline { color: var(--text-soft); font-size: 19px; margin-top: 16px; } .hero .cta { display: inline-block; margin-top: 32px; background: var(--accent); color: #fff; padding: 14px 28px; border-radius: 12px; text-decoration: none; font-weight: 600; font-size: 16px; } .hero .cta:hover { opacity: 0.9; } /* ---------- Generic section ---------- */ .section { padding: 48px 0; } .section h2 { font-size: 26px; letter-spacing: -0.01em; margin-bottom: 24px; } /* ---------- Feature grid ---------- */ .features { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; } .feature { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; } .feature h3 { font-size: 17px; margin-bottom: 8px; } .feature p { color: var(--text-soft); font-size: 15px; } /* ---------- FAQ (pure CSS accordion via
) ---------- */ .faq details { border: 1px solid var(--border); border-radius: 12px; padding: 0; margin-bottom: 12px; background: var(--card); overflow: hidden; } .faq summary { cursor: pointer; padding: 18px 20px; font-weight: 600; font-size: 16px; list-style: none; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 20px; top: 16px; font-size: 22px; font-weight: 400; color: var(--accent); } .faq details[open] summary::after { content: "−"; } .faq details p { padding: 0 20px 18px; color: var(--text-soft); font-size: 15px; } /* ---------- Contact / Support block ---------- */ .contact { background: var(--bg-soft); border-radius: var(--radius); padding: 28px; text-align: center; margin-top: 8px; } .contact a.email { display: inline-block; margin-top: 8px; color: var(--accent); font-weight: 600; font-size: 18px; text-decoration: none; } /* ---------- Legal pages (privacy / terms) ---------- */ .legal { padding: 48px 0 80px; } .legal h1 { font-size: 30px; margin-bottom: 8px; } .legal .updated { color: var(--text-soft); font-size: 14px; margin-bottom: 32px; } .legal h2 { font-size: 20px; margin: 32px 0 12px; } .legal p, .legal li { color: var(--text-soft); font-size: 16px; margin-bottom: 12px; } .legal ul { padding-left: 22px; } .legal .placeholder { background: var(--bg-soft); border: 1px dashed var(--border); border-radius: 12px; padding: 20px; color: var(--text-soft); font-style: italic; } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--border); padding: 32px 0; text-align: center; color: var(--text-soft); font-size: 14px; } .site-footer a { color: var(--text-soft); text-decoration: none; margin: 0 10px; } .site-footer a:hover { color: var(--accent); } .site-footer .copy { margin-top: 12px; opacity: 0.8; } /* ---------- Responsive ---------- */ @media (max-width: 600px) { .hero { padding: 48px 0 36px; } .hero h1 { font-size: 30px; } .hero p.tagline { font-size: 17px; } .features { grid-template-columns: 1fr; } .site-header nav { gap: 12px; } }