/* ============================================================ endcod — Ana Stil Dosyası (style.css) Orijinal (Tailwind) tasarımın renk paleti ve düzeni elle yeniden yazıldı; okunaklı ve düzenlenebilir olsun diye. Renkler CSS değişkenleriyle tutulur. Koyu tema varsayılandır (). Tema düğmesi bu sınıfı açıp kapatır. ============================================================ */ /* ---------- Renk değişkenleri: AÇIK tema (varsayılan) ---------- */ :root { --bg: #FFFFFF; --surface: #F9FAFB; --card: #FFFFFF; --text: #111827; --muted: #4B5563; --border: #E5E7EB; --blue: #2563EB; --cyan: #06B6D4; --wa: #25D366; --gradient: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%); --radius-card: 12px; --radius-btn: 8px; --header-bg: rgba(255,255,255,0.8); } /* ---------- Renk değişkenleri: KOYU tema ---------- */ html.dark { --bg: #0A0F1E; --surface: #111827; --card: #1E2533; --text: #F3F4F6; --muted: #9CA3AF; --border: #1F2937; --header-bg: rgba(10,15,30,0.8); } /* ---------- Temel ---------- */ * { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 15px; /* orijinaldeki gibi */ } @media (max-width: 640px) { html { font-size: 14px; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 0; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } ul { margin: 0; padding: 0; list-style: none; } /* ---------- Yardımcı sınıflar ---------- */ .container { max-width: 80rem; margin: 0 auto; padding: 0 1.25rem; } @media (min-width: 640px) { .container { padding: 0 1.5rem; } } @media (min-width: 1024px) { .container { padding: 0 2rem; } } .text-gradient { background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Butonlar */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius-btn); font-weight: 600; cursor: pointer; border: 1px solid transparent; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; } .btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 10px 20px -8px rgba(37,99,235,0.5); } .btn-primary:hover { transform: scale(1.02); box-shadow: 0 14px 26px -8px rgba(37,99,235,0.65); } .btn-outline { background: transparent; border-color: var(--border); color: var(--text); } .btn-outline:hover { border-color: var(--cyan); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } /* Kart */ .card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.5rem; } /* ============================================================ ÜST MENÜ (header) ============================================================ */ .site-header { position: sticky; top: 0; z-index: 50; background: var(--header-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border); } .nav-bar { display: flex; align-items: center; justify-content: space-between; height: 64px; } .brand img { height: 28px; width: auto; } @media (min-width: 768px) { .brand img { height: 32px; } } .nav-desktop { display: none; align-items: center; gap: 1.5rem; } .nav-desktop a, .nav-dropdown-btn { color: var(--text); transition: color .15s ease; } .nav-desktop a:hover, .nav-dropdown-btn:hover { color: var(--cyan); } .nav-dropdown { position: relative; } .nav-dropdown-btn { display: inline-flex; align-items: center; gap: 0.25rem; background: none; border: none; font: inherit; cursor: pointer; padding: 0; } .nav-dropdown-menu { position: absolute; top: 100%; left: 0; padding-top: 0.5rem; min-width: 14rem; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .15s ease, transform .15s ease, visibility .15s; } .nav-dropdown:hover .nav-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .nav-dropdown-menu a { display: block; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 0.5rem; margin: 0; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.35); } .nav-dropdown-menu a { /* tek kutu görünümü için ilk çocuk üstte */ } .nav-dropdown-menu a + a { margin-top: 0; } .nav-dropdown-menu a span, .nav-dropdown-menu a { } /* açılır menü linklerini kutunun içinde ayrı satırlar gibi göster */ .nav-dropdown-menu { display: block; } .nav-dropdown-menu > a { border: none; border-radius: 6px; box-shadow: none; padding: 0.5rem 0.75rem; background: transparent; } .nav-dropdown-menu { /* dış kutu */ background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.35); padding: 0.5rem; } .nav-dropdown-menu > a:hover { background: var(--surface); color: var(--cyan); } .nav-actions { display: flex; align-items: center; gap: 0.5rem; } .lang-switch { padding: 0.375rem 0.75rem; border-radius: var(--radius-btn); font-size: 0.875rem; font-weight: 500; text-transform: uppercase; transition: background .15s ease; } .lang-switch:hover { background: var(--surface); } .theme-toggle { padding: 0.5rem; border: none; background: none; cursor: pointer; color: var(--text); border-radius: var(--radius-btn); line-height: 0; transition: background .15s ease; } .theme-toggle:hover { background: var(--surface); } /* Koyu temada güneş, açık temada ay göster */ html.dark .theme-toggle .icon-moon { display: none; } html:not(.dark) .theme-toggle .icon-sun { display: none; } .nav-cta { display: none; } .menu-toggle { padding: 0.5rem; border: none; background: none; cursor: pointer; color: var(--text); line-height: 0; } @media (min-width: 640px) { .nav-cta { display: inline-flex; } } @media (min-width: 768px) { .nav-desktop { display: flex; } .menu-toggle { display: none; } } /* Mobil menü */ .nav-mobile { border-top: 1px solid var(--border); background: var(--bg); } .nav-mobile nav { display: flex; flex-direction: column; gap: 0.75rem; padding: 1rem; } .nav-mobile a { color: var(--text); } .nav-mobile a:hover { color: var(--cyan); } /* ============================================================ HERO ============================================================ */ .hero { position: relative; overflow: hidden; } .hero-bg { position: absolute; inset: 0; z-index: -1; } .hero-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); border-radius: 50%; } .hero-ring-1 { width: 600px; height: 600px; border: 1px solid rgba(37,99,235,0.2); animation: orbit 30s linear infinite; } .hero-ring-2 { width: 800px; height: 800px; border: 1px solid rgba(6,182,212,0.15); animation: orbit 45s linear infinite reverse; } .hero-glow { width: 400px; height: 400px; background: var(--gradient); opacity: 0.1; filter: blur(80px); } @keyframes orbit { from { transform: translate(-50%,-50%) rotate(0); } to { transform: translate(-50%,-50%) rotate(360deg); } } .hero-inner { padding: 6rem 0; text-align: center; position: relative; } @media (min-width: 768px) { .hero-inner { padding: 9rem 0; } } .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.375rem 1rem; margin-bottom: 2rem; border: 1px solid rgba(6,182,212,0.3); background: rgba(6,182,212,0.05); color: var(--cyan); border-radius: 999px; font-size: 0.875rem; } .hero-eyebrow .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cyan); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } } .hero h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.1; max-width: 56rem; margin: 0 auto; } @media (min-width: 768px) { .hero h1 { font-size: 3.75rem; } } @media (min-width: 1024px) { .hero h1 { font-size: 4.5rem; } } .hero p { margin: 1.5rem auto 0; max-width: 42rem; color: var(--muted); font-size: 1.125rem; } @media (min-width: 768px) { .hero p { font-size: 1.25rem; } } .hero-actions { margin-top: 2.5rem; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; } /* ============================================================ GÜVEN BANDI (metrikler) ============================================================ */ .trust-band { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); } .trust-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; align-items: center; padding: 2.5rem 0; } @media (min-width: 768px) { .trust-grid { grid-template-columns: repeat(4, 1fr); } } .trust-badge { display: flex; justify-content: center; } .metric { text-align: center; } .metric-num { font-size: 1.875rem; font-weight: 800; } .metric-label { font-size: 0.875rem; color: var(--muted); } /* ============================================================ BÖLÜMLER (services + cta) ============================================================ */ .section { padding: 5rem 0; } .section-head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; } .section-head h2 { font-size: 1.875rem; font-weight: 800; } @media (min-width: 768px) { .section-head h2 { font-size: 3rem; } } .section-head p { margin-top: 1rem; color: var(--muted); } .services-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(3, 1fr); } } .service-card { display: block; transition: border-color .15s ease; } .service-card:hover { border-color: rgba(6,182,212,0.5); } .service-card .svc-icon { color: var(--cyan); margin-bottom: 1rem; } .service-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: 0.5rem; } .service-card p { color: var(--muted); font-size: 0.875rem; margin: 0; } .service-card .learn { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.25rem; color: var(--cyan); font-weight: 500; } .service-card:hover .learn { gap: 0.5rem; } .cta-band { border-radius: var(--radius-card); background: var(--gradient); color: #fff; text-align: center; padding: 3rem; } .cta-band h2 { font-size: 1.875rem; font-weight: 800; margin-bottom: 1rem; } @media (min-width: 768px) { .cta-band h2 { font-size: 2.25rem; } } .cta-band p { font-size: 1.125rem; opacity: 0.9; margin: 0 0 2rem; } .cta-band .btn-white { display: inline-flex; align-items: center; gap: 0.5rem; background: #fff; color: var(--blue); font-weight: 700; padding: 0.75rem 2rem; border-radius: var(--radius-btn); transition: transform .15s ease; } .cta-band .btn-white:hover { transform: scale(1.05); } /* ============================================================ FOOTER ============================================================ */ .site-footer { border-top: 1px solid var(--border); margin-top: 5rem; } .footer-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; padding: 3rem 0; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(5, 1fr); } } .footer-brand { grid-column: span 2; } @media (min-width: 768px) { .footer-brand { grid-column: span 1; } } .footer-brand .brand img { height: 28px; } .footer-tagline { margin-top: 0.75rem; font-size: 0.875rem; color: var(--muted); } .footer-partner { display: inline-block; margin-top: 1.25rem; background: #fff; padding: 8px 12px; border-radius: 10px; line-height: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.25); transition: transform .15s ease; } .footer-partner:hover { transform: translateY(-2px); } .footer-partner img { display: block; } .footer-col h4 { font-weight: 600; margin-bottom: 0.75rem; } .footer-col ul { display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.875rem; } .footer-col a { color: var(--text); } .footer-col a:hover { color: var(--cyan); } .footer-contact a { color: var(--muted); } .footer-contact .footer-wa:hover { color: var(--wa); } .footer-bottom { margin-top: 2.5rem; padding: 1.5rem 0; border-top: 1px solid var(--border); font-size: 0.875rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.5rem; justify-content: space-between; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; } } .footer-bottom p { margin: 0; } /* WhatsApp sabit düğme */ .wa-float { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 40; background: var(--wa); color: #fff; border-radius: 50%; padding: 1rem; line-height: 0; box-shadow: 0 20px 40px -8px rgba(0,0,0,0.4); transition: transform .15s ease; } .wa-float:hover { transform: scale(1.1); } /* ============================================================ BASİT SAYFA (yakında / 404) ============================================================ */ .simple-page { text-align: center; padding: 6rem 0; } .simple-page h1 { font-size: 2.25rem; font-weight: 800; margin-bottom: 1rem; } .simple-page p { color: var(--muted); margin: 0 auto 2rem; max-width: 32rem; } /* Erişilebilirlik: klavye odağı görünür kalsın */ a:focus-visible, button:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; } /* Hareket azaltma tercihi */ @media (prefers-reduced-motion: reduce) { .hero-ring, .hero-eyebrow .dot { animation: none; } * { scroll-behavior: auto; } } /* ============================================================ HİZMET SAYFASI + PAKET KARTLARI (3. adım) ============================================================ */ .svc-hero { padding: 4rem 0 2rem; } @media (min-width: 768px) { .svc-hero { padding: 5rem 0 2rem; } } .svc-hero-inner { max-width: 48rem; } .svc-icon-badge { display: inline-flex; padding: 0.75rem; margin-bottom: 1.5rem; border-radius: var(--radius-card); background: var(--gradient); color: #fff; line-height: 0; } .svc-hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1.5rem; } @media (min-width: 768px) { .svc-hero h1 { font-size: 3.75rem; } } .svc-hero p { font-size: 1.125rem; color: var(--muted); margin: 0; } .svc-packages { padding-bottom: 4rem; } .pkg-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .pkg-grid-3 { grid-template-columns: repeat(3, 1fr); } .pkg-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 48rem; margin: 0 auto; } } .pkg-grid-1 { max-width: 28rem; margin: 0 auto; } .pkg-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 1.5rem; transition: border-color .15s ease; } .pkg-card:hover { border-color: rgba(6,182,212,0.5); } .pkg-popular { border-color: var(--cyan); box-shadow: 0 0 0 2px rgba(6,182,212,0.2), 0 20px 40px -12px rgba(6,182,212,0.15); } .pkg-badge { position: absolute; top: -0.75rem; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.25rem; white-space: nowrap; padding: 0.25rem 0.75rem; border-radius: 999px; background: var(--gradient); color: #fff; font-size: 0.7rem; font-weight: 700; } .pkg-head { margin-bottom: 1rem; padding-top: 0.5rem; } .pkg-head h3 { font-size: 1.5rem; font-weight: 800; margin-bottom: 0.5rem; } .pkg-tagline { font-size: 0.875rem; color: var(--muted); margin: 0; } .pkg-price { margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); } .pkg-price-main { font-size: 1.875rem; font-weight: 800; } .pkg-price-note { font-size: 0.75rem; color: var(--muted); margin-top: 0.25rem; } .pkg-features { display: flex; flex-direction: column; gap: 0.75rem; margin-bottom: 2rem; flex: 1; } .pkg-features li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.875rem; } .pkg-check { margin-top: 0.15rem; flex-shrink: 0; color: var(--muted); } .pkg-popular .pkg-check { color: var(--cyan); } .pkg-features span { color: var(--text); } .pkg-cta { width: 100%; } /* ============================================================ HAKKIMIZDA (4. adım) ============================================================ */ .about-page { padding: 4rem 0; } @media (min-width: 768px) { .about-page { padding: 6rem 0; } } .about-head { max-width: 48rem; margin-bottom: 3rem; } .about-head h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; } @media (min-width: 768px) { .about-head h1 { font-size: 3.75rem; } } .about-head p { font-size: 1.125rem; color: var(--muted); margin: 0; } .about-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; margin-bottom: 3rem; } @media (min-width: 768px) { .about-grid-2 { grid-template-columns: repeat(2, 1fr); } } .about-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .about-grid-3 { grid-template-columns: repeat(3, 1fr); } } .about-card h2 { font-size: 1.5rem; font-weight: 700; margin-bottom: 0.75rem; } .about-card h3 { font-size: 1.125rem; font-weight: 700; margin-bottom: 0.5rem; } .about-card p { color: var(--muted); margin: 0; } .about-ico { display: inline-flex; color: var(--cyan); margin-bottom: 0.75rem; } .about-card-center { text-align: center; } .about-card-center .about-ico { display: block; margin: 0 auto 0.75rem; width: 28px; } .about-values-title { font-size: 1.875rem; font-weight: 800; text-align: center; margin: 3rem 0 2rem; } .about-partner { margin-top: 3rem; display: flex; justify-content: center; } /* ============================================================ İLETİŞİM + FORM (4. adım) ============================================================ */ .contact-page { padding: 4rem 0; } @media (min-width: 768px) { .contact-page { padding: 6rem 0; } } .contact-head { max-width: 42rem; margin-bottom: 2.5rem; } .contact-head h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: 1rem; } @media (min-width: 768px) { .contact-head h1 { font-size: 3.75rem; } } .contact-head p { font-size: 1.125rem; color: var(--muted); margin: 0; } .contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; } @media (min-width: 1024px) { .contact-grid { grid-template-columns: 1fr 1fr; } } .contact-info { display: flex; flex-direction: column; gap: 1rem; } .contact-info-item { display: flex; align-items: center; gap: 1rem; font-weight: 500; transition: border-color .15s ease; } .contact-info-item:hover { border-color: rgba(6,182,212,0.5); } .ci-ico { color: var(--cyan); line-height: 0; } .ci-wa { color: var(--wa); } .contact-form-wrap { } .form-error { padding: 0.75rem 1rem; margin-bottom: 1rem; border-radius: var(--radius-btn); background: rgba(239,68,68,0.1); border: 1px solid rgba(239,68,68,0.3); color: #ef4444; font-size: 0.875rem; } .contact-form { display: flex; flex-direction: column; gap: 1rem; } .form-row-2 { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .form-row-2 { grid-template-columns: repeat(2, 1fr); } } .form-field { display: flex; flex-direction: column; } .form-field label { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; } .contact-form input[type="text"], .contact-form input[type="email"], .contact-form input[type="tel"], .contact-form textarea { width: 100%; padding: 0.625rem 0.875rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-btn); color: var(--text); font: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(6,182,212,0.15); } .contact-form textarea { resize: vertical; } .service-options { display: flex; flex-direction: column; gap: 0.5rem; } .service-option, .kvkk-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius-btn); cursor: pointer; transition: border-color .15s ease, background .15s ease; } .kvkk-option { align-items: flex-start; } .service-option:hover, .kvkk-option:hover { border-color: rgba(6,182,212,0.5); } .service-option input:checked ~ span, .kvkk-option input:checked ~ span { color: var(--text); } .service-option:has(input:checked), .kvkk-option:has(input:checked) { border-color: var(--cyan); background: rgba(6,182,212,0.05); } .service-option input, .kvkk-option input { width: 1rem; height: 1rem; accent-color: var(--cyan); flex-shrink: 0; } .kvkk-option input { margin-top: 0.15rem; } .kvkk-option span { font-size: 0.875rem; } .kvkk-option a { color: var(--cyan); } .kvkk-option a:hover { text-decoration: underline; } /* Bot tuzağı — görünmez */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .contact-submit { width: 100%; margin-top: 0.5rem; } /* ============================================================ TEŞEKKÜRLER (4. adım) ============================================================ */ .thankyou-page { padding: 8rem 0; } .thankyou-ico { display: inline-flex; padding: 1rem; margin-bottom: 1.5rem; border-radius: 999px; background: rgba(6,182,212,0.1); color: var(--cyan); } /* İletişim formu — telefon ipucu + hata durumu */ .form-hint { display: block; margin-top: 0.4rem; font-size: 0.82rem; color: rgba(255,255,255,0.55); line-height: 1.4; } .contact-form input.input-error { border-color: #ef4444; box-shadow: 0 0 0 2px rgba(239,68,68,0.25); } /* ---- SAYFA BAŞLIKLARINI ORTALA (ana sayfa hariç) ---- */ /* Hizmet, Hakkımızda ve İletişim sayfalarının üst başlık bölümü (ikon + başlık + açıklama) hem masaüstü hem mobilde ortalanır. Ana sayfa hero'su ayrı (.hero-inner) — o zaten ortalı. */ .svc-hero-inner, .about-head, .contact-head { margin-left: auto; margin-right: auto; text-align: center; } /* ---- MOBİL YATAY BOŞLUK GÜVENCESİ ---- */ /* Bazı sayfa başlıkları/bölümleri mobilde kenara yapışmasın diye .container padding'ini pekiştirir. */ @media (max-width: 639px) { .container { padding-left: 1.25rem; padding-right: 1.25rem; } .svc-hero, .about-page, .contact-page, .simple-page, .section, .hero-inner, .footer-inner, .footer-bottom { padding-left: 1.25rem; padding-right: 1.25rem; } }