/* Derman+ — Landing Page düzen bileşenleri 5 Eyl 2026: bu blok şablon sayfaların 'inde inline duruyordu. Şablondan yeni sayfa üretirken yeniden yazıldığı için blok düşüyor ve sayfa CSS'siz render oluyordu (7 sayfa). Tek dosyaya alındı. */ /* ── KVKK page accent overrides ── */ :root { --kv: #0A5FFF; --kv-light: rgba(10,95,255,0.10); --kv-border: rgba(10,95,255,0.30); } /* Hero */ .lp-hero { padding: 100px 24px 80px; text-align: center; max-width: 860px; margin: 0 auto; } .lp-hero__badge { display: inline-flex; align-items: center; gap: 8px; background: var(--kv-light); border: 1px solid var(--kv-border); border-radius: 100px; padding: 6px 16px; font-size: 0.8125rem; font-weight: 600; color: #00D4FF; letter-spacing: 0.3px; margin-bottom: 24px; } .lp-hero h1 { font-size: clamp(2rem,5vw,3.25rem); font-weight: 800; color: var(--t1); line-height: 1.15; letter-spacing: -1.5px; margin-bottom: 20px; } .lp-hero h1 span { background: linear-gradient(135deg, var(--kv), #00D4FF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .lp-hero p { font-size: 1.125rem; color: var(--t2); max-width: 620px; margin: 0 auto 36px; line-height: 1.75; } .lp-hero__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .btn-primary { background: var(--kv); color: white; font-weight: 700; padding: 14px 28px; border-radius: 10px; font-size: 0.9375rem; text-decoration: none; transition: background 0.2s; } .btn-primary:hover { background: #003FCC; } .btn-secondary { background: rgba(255,255,255,0.05); border: 1px solid var(--b2); color: var(--t1); font-weight: 600; padding: 14px 28px; border-radius: 10px; font-size: 0.9375rem; text-decoration: none; transition: background 0.2s; } .btn-secondary:hover { background: rgba(255,255,255,0.10); } /* Stats bar */ .stats-bar { max-width: 900px; margin: 0 auto 80px; padding: 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1px; background: var(--b1); border: 1px solid var(--b1); border-radius: 16px; overflow: hidden; } .stat-item { background: var(--s1); padding: 28px 24px; text-align: center; } .stat-item__value { font-size: 1.875rem; font-weight: 800; color: var(--t1); letter-spacing: -1px; } .stat-item__value--danger { color: #f85149; } .stat-item__label { font-size: 0.8125rem; color: var(--t3); margin-top: 4px; line-height: 1.4; } /* Features */ .features-section { max-width: 1080px; margin: 0 auto 80px; padding: 0 24px; } .section-label { font-size: 0.8125rem; font-weight: 600; color: var(--kv); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 12px; } .section-title { font-size: clamp(1.5rem,3.5vw,2.25rem); font-weight: 800; color: var(--t1); letter-spacing: -0.75px; margin-bottom: 48px; line-height: 1.2; } .features-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; } .feat-card { background: var(--s1); border: 1px solid var(--b1); border-radius: 16px; padding: 28px; transition: border-color 0.2s; } .feat-card:hover { border-color: var(--kv-border); } .feat-card__icon { width: 44px; height: 44px; background: var(--kv-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 16px; } .feat-card__icon svg { width: 22px; height: 22px; stroke: var(--kv); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .feat-card h3 { font-size: 0.9375rem; font-weight: 700; color: var(--t1); margin-bottom: 8px; } .feat-card p { font-size: 0.875rem; color: var(--t3); line-height: 1.65; } /* Checklist */ .checklist-section { max-width: 720px; margin: 0 auto 80px; padding: 0 24px; } .checklist { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 12px; } .checklist li { display: flex; align-items: center; gap: 14px; background: var(--s1); border: 1px solid var(--b1); border-radius: 12px; padding: 16px 20px; font-size: 0.9375rem; color: var(--t2); } .checklist__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 700; } .checklist__icon--pass { background: rgba(63,185,80,0.12); color: #3fb950; border: 1px solid rgba(63,185,80,0.25); } .checklist__icon--fail { background: rgba(248,81,73,0.10); color: #f85149; border: 1px solid rgba(248,81,73,0.20); } .checklist-note { background: var(--kv-light); border: 1px solid var(--kv-border); border-radius: 12px; padding: 16px 20px; font-size: 0.875rem; color: var(--t2); line-height: 1.6; } .checklist-note strong { color: var(--t1); } /* Compare table */ .compare-section { max-width: 900px; margin: 0 auto 80px; padding: 0 24px; } .compare-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--b1); } table.compare { width: 100%; border-collapse: collapse; background: var(--s1); } table.compare thead th { padding: 16px 20px; font-size: 0.8125rem; font-weight: 700; text-align: center; color: var(--t3); border-bottom: 1px solid var(--b1); white-space: nowrap; } table.compare thead th:first-child { text-align: left; } table.compare thead th.th-derman { color: var(--kv); background: var(--kv-light); } table.compare tbody td { padding: 14px 20px; font-size: 0.875rem; color: var(--t2); border-bottom: 1px solid var(--b1); text-align: center; } table.compare tbody td:first-child { text-align: left; font-weight: 600; color: var(--t1); } table.compare tbody tr:last-child td { border-bottom: none; } table.compare tbody td.td-derman { background: rgba(10,95,255,0.04); } .badge-yes { color: #3fb950; font-weight: 700; } .badge-partial { color: #e3b341; font-weight: 600; } .badge-no { color: #f85149; font-weight: 700; } /* Pain & Solve */ .pain-section { max-width: 860px; margin: 0 auto 80px; padding: 0 24px; } .pain-card { background: rgba(248,81,73,0.05); border: 1px solid rgba(248,81,73,0.15); border-radius: 16px; padding: 32px; display: flex; gap: 20px; align-items: flex-start; margin-bottom: 16px; } .pain-card--solve { background: rgba(63,185,80,0.05); border-color: rgba(63,185,80,0.20); } .pain-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 2px; } .pain-card h3 { font-size: 0.9375rem; font-weight: 700; color: var(--t1); margin-bottom: 6px; } .pain-card p { font-size: 0.875rem; color: var(--t3); line-height: 1.6; margin: 0; } /* FAQ */ .faq-section { max-width: 720px; margin: 0 auto 80px; padding: 0 24px; } .faq-item { border-bottom: 1px solid var(--b1); padding: 24px 0; } .faq-item h3 { font-size: 0.9375rem; font-weight: 700; color: var(--t1); margin-bottom: 10px; } .faq-item p { font-size: 0.875rem; color: var(--t3); line-height: 1.7; margin: 0; } /* CTA */ .cta-section { max-width: 760px; margin: 0 auto 100px; padding: 0 24px; } .cta-box { background: linear-gradient(135deg, rgba(10,95,255,0.15) 0%, rgba(0,212,255,0.08) 100%); border: 1px solid var(--kv-border); border-radius: 24px; padding: 56px 40px; text-align: center; } .cta-box h2 { font-size: clamp(1.5rem,3vw,2rem); font-weight: 800; color: var(--t1); letter-spacing: -0.5px; margin-bottom: 12px; } .cta-box p { font-size: 1rem; color: var(--t2); margin-bottom: 32px; line-height: 1.65; } /* 5 Eyl 2026: .cta-inner yeni sayfalarda kullanıldı ama hiçbir yerde tanımlı değildi — C7 render kontrolü yakaladı. CTA bloğunun iç sarmalayıcısı. */ .cta-inner { max-width: 640px; margin: 0 auto; text-align: center; } .cta-inner h2 { font-size: clamp(1.5rem, 3.5vw, 2.1rem); font-weight: 800; line-height: 1.25; margin-bottom: 14px; color: var(--t1); } .cta-inner p { color: var(--t2); line-height: 1.7; margin-bottom: 26px; font-size: 1rem; } .cta-inner .btn-primary { display: inline-block; }