/* * theme-claude.css — Dr. Fatih Ballı × Claude.ai Tema * Anthropic'in resmi renk paleti kullanılmıştır. * Aktif etmek: etiketine class="theme-claude" ekle * ya da localStorage ile toggle et (main.js'e eklendi). * * Palette referansları: * Anthropic Coral : #D4A27E / #C96A3A / #A8522A * Claude Cream : #F5F1EB / #EDE8DF * Claude Sidebar : #1C1917 / #292524 * Claude Sand : #F9F6F1 */ /* ══════════════════════════════════════════════════════════ CLAUDE TEMA — CSS OVERRIDE (main.css üzerine yazar) ══════════════════════════════════════════════════════════ */ body.theme-claude { /* ── Renk Değişkenleri ─────────────────────────────── */ --primary-color: #C96A3A; /* Anthropic Coral */ --secondary-color: #A8522A; /* Koyu coral */ --accent-color: #E8935A; /* Açık coral */ --dark: #1C1917; /* Claude sidebar koyu */ /* Arkaplan sistemi — Claude'un krem tonu */ --light: #F5F1EB; /* Ana arka plan */ --light-card: #F9F6F1; /* Kart yüzeyi */ --light-soft: #EDE8DF; /* Hover / bölüm ayraç */ --surface-white: #FDFAF6; /* Üst yüzey */ /* Metin */ --text-dark: #1C1917; /* Çok koyu kahve */ --text-light: #78716C; /* Muted stone */ /* Gradyanlar */ --gradient-1: linear-gradient(135deg, #1C1917 0%, #292524 100%); --gradient-2: linear-gradient(135deg, #C96A3A 0%, #E8935A 100%); /* Gölgeler — biraz ısıtılmış */ --shadow-sm: 0 2px 8px rgba(28,25,23,.08); --shadow-md: 0 4px 20px rgba(28,25,23,.12); --shadow-lg: 0 10px 40px rgba(28,25,23,.16); /* Font — Claude slab/serif hissi */ font-family: 'Crimson Pro', Georgia, serif; } /* ── Navbar ──────────────────────────────────────────── */ body.theme-claude .navbar { background: rgba(253,250,246,.97); border-bottom: 1px solid var(--light-soft); } body.theme-claude .navbar.scrolled { background: var(--surface-white); } body.theme-claude .logo { font-family: 'Crimson Pro', serif; color: var(--dark); } body.theme-claude .logo-icon { background: var(--gradient-2); border-radius: 10px; } body.theme-claude .nav-menu a { color: #44403C; } body.theme-claude .nav-menu a:hover { color: var(--primary-color); } body.theme-claude .nav-menu a.active { color: var(--primary-color); } /* CTA Butonları */ body.theme-claude .cta-button { background: linear-gradient(135deg, #C96A3A, #E8935A); box-shadow: 0 4px 16px rgba(201,106,58,.35); } body.theme-claude .cta-button:hover { background: linear-gradient(135deg, #A8522A, #C96A3A); } /* ── Hero Bölümü ─────────────────────────────────────── */ body.theme-claude .hero { background: linear-gradient(150deg, #1C1917 0%, #292524 45%, #3C3429 100%); } body.theme-claude .hero-badge { background: rgba(201,106,58,.18); border-color: rgba(201,106,58,.4); color: #E8935A; } body.theme-claude .hero-title { font-family: 'Crimson Pro', serif; font-weight: 700; } body.theme-claude .hero-title span { color: #E8935A; } body.theme-claude .hero-description { color: rgba(255,255,255,.78); } /* Hero butonlar */ body.theme-claude .btn-hero-primary { background: linear-gradient(135deg, #C96A3A, #E8935A); color: #fff; border: none; box-shadow: 0 4px 20px rgba(201,106,58,.4); } body.theme-claude .btn-hero-outline { border-color: rgba(232,147,90,.5); color: #E8935A; } body.theme-claude .btn-hero-outline:hover { background: rgba(201,106,58,.15); } /* Trust badges hero'da */ body.theme-claude .trust-badge { background: rgba(255,255,255,.08); border-color: rgba(232,147,90,.25); color: rgba(255,255,255,.85); } body.theme-claude .trust-badge i { color: #E8935A; } /* Mobil badge'ler */ body.theme-claude .hero-mobile-stat { background: rgba(201,106,58,.15); border-color: rgba(232,147,90,.3); } /* ── Genel Butonlar ──────────────────────────────────── */ body.theme-claude .btn-primary { background: linear-gradient(135deg, #C96A3A, #E8935A); border-color: #C96A3A; } body.theme-claude .btn-wa { background: #25d366; /* WA yeşili sabit */ } body.theme-claude .btn-block { background: linear-gradient(135deg, #C96A3A, #E8935A); } /* ── Section Başlıkları ───────────────────────────────── */ body.theme-claude .section-subtitle-label { color: var(--primary-color); } body.theme-claude .section-title::after { background: linear-gradient(90deg, #C96A3A, #E8935A); } /* ── Hizmet Kartları ─────────────────────────────────── */ body.theme-claude .service-card { border-top: 3px solid transparent; } body.theme-claude .service-card:hover { border-top-color: var(--primary-color); box-shadow: 0 8px 32px rgba(201,106,58,.15); } body.theme-claude .service-icon-bg { background: linear-gradient(135deg, #C96A3A, #E8935A); } /* ── Stats ───────────────────────────────────────────── */ body.theme-claude .stat-number { color: var(--primary-color); } body.theme-claude .stat-icon { color: var(--primary-color); } /* ── About Strip ─────────────────────────────────────── */ body.theme-claude .about-strip { background: var(--surface-white); } body.theme-claude .about-tag { background: rgba(201,106,58,.12); color: var(--primary-color); border-color: rgba(201,106,58,.25); } body.theme-claude .cert-badge { border-color: rgba(201,106,58,.3); } body.theme-claude .cert-badge i { color: var(--primary-color); } /* ── Süreç ───────────────────────────────────────────── */ body.theme-claude .step-number { background: linear-gradient(135deg, #C96A3A, #E8935A); } body.theme-claude .step-connector { background: linear-gradient(90deg, #C96A3A, #E8935A44); } /* ── Blog Kartları ───────────────────────────────────── */ body.theme-claude .blog-card-category { background: rgba(201,106,58,.1); color: var(--primary-color); } body.theme-claude .blog-card-title:hover { color: var(--primary-color); } body.theme-claude .read-more { color: var(--primary-color); } /* ── SSS / FAQ ───────────────────────────────────────── */ body.theme-claude .acc-btn.active { color: var(--primary-color); } body.theme-claude .acc-icon { color: var(--primary-color); } /* ── Footer ──────────────────────────────────────────── */ body.theme-claude .footer { background: #1C1917; } body.theme-claude .footer-logo { color: #E8935A; } body.theme-claude .footer-social a:hover { background: var(--primary-color); border-color: var(--primary-color); } body.theme-claude .footer-bottom { border-color: rgba(255,255,255,.08); } /* ── WhatsApp FAB — sabit yeşil ──────────────────────── */ body.theme-claude #wa-btn { background: #25d366; } /* ── Scroll to Top ───────────────────────────────────── */ body.theme-claude #scrollTopBtn { background: var(--primary-color); } body.theme-claude #scrollTopBtn:hover { background: var(--secondary-color); } /* ── AI Chat Butonu ──────────────────────────────────── */ body.theme-claude .ai-chat-btn { background: linear-gradient(135deg, #1C1917, #292524) !important; border-color: rgba(201,106,58,.5) !important; box-shadow: 0 4px 20px rgba(28,25,23,.4), 0 0 0 0 rgba(201,106,58,.3) !important; } /* ── Page Hero ───────────────────────────────────────── */ body.theme-claude .page-hero { background: linear-gradient(150deg, #1C1917 0%, #292524 60%, #3C3429 100%); } body.theme-claude .breadcrumb a { color: rgba(232,147,90,.8); } /* ── Form Elemanları ─────────────────────────────────── */ body.theme-claude .form-control:focus { border-color: var(--primary-color); } body.theme-claude .appt-form .form-control:focus { border-color: var(--primary-color); } body.theme-claude .quick-appt-submit { background: linear-gradient(135deg, #C96A3A, #E8935A); } /* ── Dark Mode + Claude tema kombinasyonu ────────────── */ body.theme-claude.dark-mode { --light: #1C1917; --light-card: #242019; --light-soft: rgba(255,255,255,.07); --surface-white: #292524; --text-dark: #E7E5E4; --text-light: #A8A29E; background: #1C1917; } body.theme-claude.dark-mode .navbar { background: rgba(28,25,23,.97); } body.theme-claude.dark-mode .service-card, body.theme-claude.dark-mode .blog-card, body.theme-claude.dark-mode .acc-item, body.theme-claude.dark-mode .sidebar-card, body.theme-claude.dark-mode .step-content { background: #292524; border-color: rgba(255,255,255,.06); } /* ── Navbar'daki tema toggle butonu ─────────────────── */ .theme-toggle-btn { width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, #C96A3A, #E8935A); border: 1.5px solid rgba(201,106,58,.4); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 13px; line-height: 1; flex-shrink: 0; box-shadow: 0 2px 8px rgba(201,106,58,.3); color: #fff; order: -2; /* dark mode butonundan da sola */ margin-right: 4px; transition: transform .2s ease, box-shadow .2s ease; /* JS tarafından inline style ile override edilecek */ } .theme-toggle-btn:hover { opacity: .88; } /* ══════════════════════════════════════════════════════════ EK İYİLEŞTİRMELER — v2 ══════════════════════════════════════════════════════════ */ /* ── 1. TİPOGRAFİ — Crimson Pro her yerde ───────────────── */ body.theme-claude { font-family: 'Crimson Pro', Georgia, serif; font-size: 18px; /* Serif için biraz büyük daha iyi okunur */ line-height: 1.75; } body.theme-claude h1, body.theme-claude h2, body.theme-claude h3, body.theme-claude h4, body.theme-claude h5, body.theme-claude h6, body.theme-claude .section-title, body.theme-claude .hero-title, body.theme-claude .page-title, body.theme-claude .post-title, body.theme-claude .logo { font-family: 'Crimson Pro', Georgia, serif; letter-spacing: -.01em; } body.theme-claude .nav-menu a, body.theme-claude .cta-button, body.theme-claude .btn-hero-primary, body.theme-claude .btn-hero-outline { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.05rem; letter-spacing: .01em; } /* Nav linkleri biraz büyük, serif yakışıyor */ body.theme-claude .nav-menu > li > a { font-size: 1.05rem; font-weight: 600; } /* Section başlıkları daha etkili */ body.theme-claude .section-title { font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 700; font-style: italic; /* Serif'te italik çok güzel */ } body.theme-claude .section-title em, body.theme-claude .section-title span { font-style: normal; color: var(--primary-color); } /* Blog içerik fontu */ body.theme-claude .post-body { font-family: 'Crimson Pro', Georgia, serif; font-size: 1.2rem; line-height: 1.9; color: #2D2420; } body.theme-claude .post-body h2, body.theme-claude .post-body h3 { font-style: italic; } /* Stat rakamları */ body.theme-claude .stat-number { font-family: 'Crimson Pro', serif; font-size: 3.2rem; font-style: italic; } /* ── 2. LOGO ALTERNATİF ──────────────────────────────────── */ body.theme-claude .logo-icon { background: linear-gradient(135deg, #C96A3A, #E8935A); border-radius: 12px; box-shadow: 0 2px 12px rgba(201,106,58,.4); /* Claude'un yuvarlak formuna benzer */ } body.theme-claude .logo { color: #1C1917; } body.theme-claude .logo span, body.theme-claude .logo strong { color: #C96A3A; } /* ── 3. HERO — CANLANAN GRADIENT ANİMASYONU ──────────────── */ @keyframes claudeHeroShift { 0% { background-position: 0% 50%; } 33% { background-position: 50% 100%; } 66% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } body.theme-claude .hero { background: linear-gradient( 150deg, #1C1917 0%, #2D1F14 20%, #3C2A1A 40%, #292524 60%, #1C1917 80%, #3C3429 100% ); background-size: 300% 300%; animation: claudeHeroShift 12s ease infinite; } /* Hero overlay — hafif sıcak sis */ body.theme-claude .hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient( ellipse at 30% 60%, rgba(201,106,58,.12) 0%, transparent 65% ); pointer-events: none; } /* ── 4. KART HOVER EFEKTLERİ ─────────────────────────────── */ body.theme-claude .service-card { border-top: 3px solid transparent; border-left: 3px solid transparent; transition: transform .25s, box-shadow .25s, border-color .25s; } body.theme-claude .service-card:hover { transform: translateY(-6px); border-top-color: transparent; border-left-color: var(--primary-color); /* Sol kenar coral şerit */ box-shadow: -4px 8px 32px rgba(201,106,58,.14), 0 4px 20px rgba(0,0,0,.08); } body.theme-claude .blog-card { transition: transform .25s, box-shadow .25s; } body.theme-claude .blog-card:hover { transform: translateY(-5px); box-shadow: -3px 8px 28px rgba(201,106,58,.12), 0 4px 16px rgba(0,0,0,.07); } /* Step kartları */ body.theme-claude .step-content:hover { border-left: 3px solid var(--primary-color); } /* Sidebar kartları */ body.theme-claude .sidebar-card { border-left: 3px solid transparent; transition: border-color .2s; } body.theme-claude .sidebar-card:hover { border-left-color: var(--primary-color); } /* ── 5. SCROLLBAR — İnce coral ───────────────────────────── */ body.theme-claude { scrollbar-width: thin; scrollbar-color: #C96A3A #F5F1EB; } body.theme-claude::-webkit-scrollbar { width: 6px; height: 6px; } body.theme-claude::-webkit-scrollbar-track { background: #F5F1EB; } body.theme-claude::-webkit-scrollbar-thumb { background: #C96A3A; border-radius: 3px; } body.theme-claude::-webkit-scrollbar-thumb:hover { background: #A8522A; } /* ── 6. ADMİN PANELİ — Claude coral paleti ──────────────── */ body.theme-claude .admin-sidebar, body.admin-claude .admin-sidebar { background: linear-gradient(180deg, #1C1917 0%, #292524 100%); border-right-color: rgba(201,106,58,.2); } body.theme-claude .admin-sidebar .nav-link.active, body.admin-claude .admin-sidebar .nav-link.active { background: rgba(201,106,58,.18); color: #E8935A; border-left-color: #C96A3A; } body.theme-claude .admin-sidebar .nav-link:hover, body.admin-claude .admin-sidebar .nav-link:hover { background: rgba(201,106,58,.1); color: #E8935A; } body.theme-claude .admin-header, body.admin-claude .admin-header { background: #1C1917; border-bottom-color: rgba(201,106,58,.2); } body.theme-claude .btn-primary, body.admin-claude .btn-primary { background: linear-gradient(135deg, #C96A3A, #E8935A); border-color: #C96A3A; } body.theme-claude .btn-primary:hover, body.admin-claude .btn-primary:hover { background: linear-gradient(135deg, #A8522A, #C96A3A); } body.theme-claude th, body.admin-claude th { background: rgba(201,106,58,.08); color: #C96A3A; border-bottom-color: rgba(201,106,58,.2); } body.theme-claude .stat-card .stat-icon, body.admin-claude .stat-card .stat-icon { color: #C96A3A; } body.theme-claude .status-badge.status-published, body.admin-claude .status-badge.status-published { background: rgba(201,106,58,.12); color: #C96A3A; border-color: rgba(201,106,58,.3); } /* Admin scrollbar */ body.theme-claude .admin-sidebar { scrollbar-width: thin; scrollbar-color: #C96A3A #1C1917; } /* ── 7. PRINT / PDF — Siyah beyaz, temiz ─────────────────── */ @media print { body.theme-claude { background: #fff !important; color: #000 !important; font-family: 'Crimson Pro', Georgia, serif; font-size: 12pt; line-height: 1.6; } body.theme-claude .navbar, body.theme-claude #wa-btn, body.theme-claude #scrollTopBtn, body.theme-claude .ai-chat-btn, body.theme-claude .hero-buttons, body.theme-claude footer, body.theme-claude .post-share, body.theme-claude .sidebar { display: none !important; } body.theme-claude .hero { background: #fff !important; animation: none !important; color: #000 !important; padding: 20pt 0; } body.theme-claude .hero-title, body.theme-claude .hero-description { color: #000 !important; } body.theme-claude .post-body { color: #000 !important; font-size: 12pt; } body.theme-claude .post-body h2, body.theme-claude .post-body h3 { color: #1C1917 !important; } body.theme-claude a { color: #000 !important; text-decoration: underline; } body.theme-claude .page-hero { background: #fff !important; border-bottom: 2pt solid #1C1917; padding: 16pt 0; } body.theme-claude .page-hero h1 { color: #1C1917 !important; } /* Sayfa numarası */ body.theme-claude::after { content: "drfatihballi.com"; display: block; text-align: center; font-size: 9pt; color: #888; margin-top: 24pt; border-top: 1pt solid #ddd; padding-top: 8pt; } } /* ── 8. TEMA BUTONU — Animasyonlu geçiş efekti ───────────── */ .theme-toggle-btn { transition: transform .2s, box-shadow .2s, background .3s !important; } body.theme-claude .theme-toggle-btn { background: linear-gradient(135deg, #1C1917, #3C3429) !important; border-color: rgba(232,147,90,.6) !important; box-shadow: 0 0 0 2px rgba(201,106,58,.35), 0 2px 8px rgba(0,0,0,.3) !important; color: #E8935A !important; transform: scale(1.1); } /* ── 9. SEÇİM RENGI ──────────────────────────────────────── */ body.theme-claude ::selection { background: rgba(201,106,58,.25); color: #1C1917; } /* ── 10. FOCUS RING — Erişilebilirlik ───────────────────── */ body.theme-claude :focus-visible { outline: 2px solid #C96A3A; outline-offset: 3px; border-radius: 4px; } /* ── 11. DARK + CLAUDE KOMBİNASYONU EK ──────────────────── */ body.theme-claude.dark-mode { scrollbar-color: #C96A3A #1C1917; } body.theme-claude.dark-mode::-webkit-scrollbar-track { background: #1C1917; } body.theme-claude.dark-mode::-webkit-scrollbar-thumb { background: #C96A3A; } body.theme-claude.dark-mode .hero { background: linear-gradient(150deg, #0D0B09 0%, #1C1917 50%, #221810 100%); background-size: 300% 300%; animation: claudeHeroShift 12s ease infinite; }