/* ═══════════════════════════════════════════════════════ Kairos Corporate Theme — style.css Fonts : Fraunces (headings, serif) + Plus Jakarta Sans (body) Colors : Cream #faf7f2 + Burgundy #7b1c1c + Dark #1c0a00 Prefix : kr- ═══════════════════════════════════════════════════════ */ /* Font: layout.php içinde olarak yükleniyor */ :root { --kr-primary: #7b1c1c; --kr-primary-d: #5e1414; --kr-primary-l: #f5ebe8; --kr-dark: #1c0a00; --kr-dark2: #2e1505; --kr-gold: #e8c99a; --kr-gold-d: #c9a56a; --kr-text: #2e1505; --kr-text-muted: #7a6a5a; --kr-bg: #ffffff; --kr-bg-cream: #faf7f2; --kr-bg-warm: #f5ede0; --kr-border: #ede8e0; --kr-border-warm: #d4c4b0; --kr-radius: 8px; --kr-radius-sm: 4px; --kr-shadow: 0 2px 16px rgba(28,10,0,0.07); --kr-shadow-lg: 0 8px 40px rgba(28,10,0,0.12); --font-heading: 'Fraunces', serif; --font-body: 'Plus Jakarta Sans', sans-serif; /* ThemeCore modül eşlemeleri */ --tc-primary: var(--kr-primary); --tc-primary-d: var(--kr-primary-d); --tc-primary-l: var(--kr-primary-l); --tc-dark: var(--kr-dark); --tc-text: var(--kr-text); --tc-text-muted: var(--kr-text-muted); --tc-border: var(--kr-border); --tc-bg: var(--kr-bg); --tc-bg2: var(--kr-bg-cream); --tc-radius: var(--kr-radius); --font: var(--font-heading); --font-2: var(--font-body); } /* ── Reset ──────────────────────────────────────────── */ html { scroll-behavior: smooth; font-size: 15px; overflow-x: hidden; max-width: 100%; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--kr-text); background: var(--kr-bg); line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100vw; } a { text-decoration: none; color: inherit; transition: all 0.25s ease; } img { max-width: 100%; height: auto; display: block; } ul, li { list-style: none; } .container { max-width: 1380px; margin: 0 auto; padding: 0 2rem; box-sizing: border-box; width: 100%; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: var(--kr-dark); font-weight: 700; line-height: 1.2; } /* ── Animasyonlar ───────────────────────────────────── */ @keyframes krFadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .kr-fade-up { animation: krFadeUp 0.75s ease both; } .kr-fade-up.delay-1 { animation-delay: 0.12s; } .kr-fade-up.delay-2 { animation-delay: 0.24s; } .tc-animate, .kr-animate { opacity: 0; transform: translateY(20px); transition: opacity 0.65s ease, transform 0.65s ease; } .tc-animate.visible, .kr-animate.visible { opacity: 1; transform: translateY(0); } .tc-animate.delay-1, .kr-animate.delay-1 { transition-delay: 0.10s; } .tc-animate.delay-2, .kr-animate.delay-2 { transition-delay: 0.20s; } .tc-animate.delay-3, .kr-animate.delay-3 { transition-delay: 0.30s; } .tc-animate.delay-4, .kr-animate.delay-4 { transition-delay: 0.40s; } /* ── Butonlar ───────────────────────────────────────── */ .kr-btn { display: inline-flex; align-items: center; gap: 8px; padding: 0.85rem 1.75rem; border-radius: var(--kr-radius-sm); font-family: var(--font-body); font-size: 0.88rem; font-weight: 700; cursor: pointer; border: none; transition: all 0.25s ease; white-space: nowrap; } .kr-btn-primary { background: var(--kr-primary); color: #ffffff; } .kr-btn-primary:hover { background: var(--kr-primary-d); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(123,28,28,0.25); } .kr-btn-dark { background: var(--kr-dark); color: #ffffff; } .kr-btn-dark:hover { background: var(--kr-dark2); transform: translateY(-2px); box-shadow: var(--kr-shadow); } .kr-btn-outline { background: transparent; color: var(--kr-dark); border: 1.5px solid var(--kr-border-warm); } .kr-btn-outline:hover { border-color: var(--kr-dark); background: var(--kr-dark); color: #ffffff; } .kr-btn-outline-light { background: transparent; color: rgba(255,255,255,0.8); border: 1.5px solid rgba(255,255,255,0.2); } .kr-btn-outline-light:hover { border-color: var(--kr-gold); color: var(--kr-gold); } /* ── Section ────────────────────────────────────────── */ .kr-section { padding: 90px 0; } .kr-section-cream { background: var(--kr-bg-cream); } .kr-section-dark { background: var(--kr-dark); } .kr-section-warm { background: var(--kr-bg-warm); } .kr-section-label { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--kr-primary); margin-bottom: 0.875rem; } .kr-section-label::before { content: ''; width: 20px; height: 2px; background: var(--kr-primary); display: inline-block; border-radius: 2px; } .kr-section-title { font-family: var(--font-heading); font-size: clamp(1.8rem, 3.5vw, 2.6rem); font-weight: 900; color: var(--kr-dark); letter-spacing: -0.02em; line-height: 1.15; } .kr-section-title em { font-style: italic; color: var(--kr-primary); } .kr-section-title-wrap { text-align: center; max-width: 640px; margin: 0 auto 4rem; } .kr-section-subtitle { font-size: 1rem; color: var(--kr-text-muted); margin-top: 0.75rem; line-height: 1.75; font-family: var(--font-body); } /* ══════════════════════════════════════════════════════ TOPBAR ══════════════════════════════════════════════════════ */ .kr-topbar { background: var(--kr-dark); padding: 8px 0; font-size: 0.78rem; } .kr-topbar-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .kr-topbar-left { display: flex; align-items: center; gap: 20px; } .kr-topbar-item { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,0.5); } .kr-topbar-item i { color: var(--kr-gold); font-size: 0.72rem; } .kr-topbar-item a { color: rgba(255,255,255,0.5); } .kr-topbar-item a:hover { color: var(--kr-gold); } .kr-topbar-social { display: flex; gap: 6px; align-items: center; } .kr-topbar-social a { width: 24px; height: 24px; border-radius: var(--kr-radius-sm); background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 0.7rem; transition: all 0.2s; } .kr-topbar-social a:hover { background: var(--kr-primary); color: #fff; } /* ══════════════════════════════════════════════════════ HEADER - position:fixed, top = topbar yüksekliği (JS ile class toggle) - kr-header-inner: kendi padding'i var, ayrı container YOK - Mobilde padding:0, border-radius:0 ══════════════════════════════════════════════════════ */ .kr-header-wrap { position: fixed; top: 40px; left: 0; right: 0; width: 100%; max-width: 100vw; z-index: 1000; padding: 0 1.5rem; box-sizing: border-box; transition: top 0.35s ease, padding 0.35s ease; } .kr-header-wrap.scrolled { top: 0; padding: 0; } .kr-header { background: rgba(250,247,242,0.95); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--kr-border); border-bottom: 2px solid var(--kr-primary); border-radius: 0; box-shadow: var(--kr-shadow); transition: all 0.35s ease; width: 100%; box-sizing: border-box; max-width: 1380px; margin: 0 auto; } .kr-header-wrap.scrolled .kr-header { max-width: 100%; background: rgba(250,247,242,0.98); } .kr-header-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; padding: 0 2rem; box-sizing: border-box; width: 100%; } /* Logo */ .kr-logo { display: flex; align-items: center; gap: 0; text-decoration: none; flex-shrink: 0; } .kr-logo-text { font-family: var(--font-heading); font-weight: 900; font-size: 1.6rem; color: var(--kr-dark); letter-spacing: -0.03em; line-height: 1; } .kr-logo-text span { color: var(--kr-primary); } /* Nav */ .kr-nav { display: flex; align-items: center; gap: 30px; } .kr-nav-link { font-family: var(--font-body); font-size: 0.9rem; font-weight: 600; color: var(--kr-text); padding: 8px 0; position: relative; } .kr-nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--kr-primary); transform: scaleX(0); transform-origin: right; transition: transform 0.3s ease; } .kr-nav-link:hover, .kr-nav-link.active { color: var(--kr-primary); } .kr-nav-link:hover::after, .kr-nav-link.active::after { transform: scaleX(1); transform-origin: left; } .kr-header-actions { display: flex; align-items: center; gap: 12px; } /* Mobil toggle */ .kr-nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 4px; flex-direction: column; gap: 5px; width: 32px; height: 32px; justify-content: center; } .kr-nav-toggle span { display: block; width: 22px; height: 2px; background: var(--kr-dark); border-radius: 2px; transition: all 0.3s ease; } .kr-nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); } .kr-nav-toggle.open span:nth-child(2) { opacity: 0; } .kr-nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); } /* ══════════════════════════════════════════════════════ HERO — Split Screen Sol: Krem arka plan + içerik Sağ: Koyu (#1c0a00) panel + öne çıkan proje ══════════════════════════════════════════════════════ */ .kr-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; overflow: hidden; } /* Sol panel */ .kr-hero-left { background: var(--kr-bg-cream); display: flex; flex-direction: column; justify-content: center; padding: 160px 64px 80px; position: relative; } .kr-hero-left::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--kr-border); } /* Sağ panel */ .kr-hero-right { background: var(--kr-dark); display: flex; flex-direction: column; justify-content: space-between; padding: 160px 56px 0; position: relative; overflow: hidden; } /* Dekoratif arka plan deseni */ .kr-hero-right::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; border-radius: 50%; border: 1px solid rgba(232,201,154,0.08); pointer-events: none; } .kr-hero-right::after { content: ''; position: absolute; top: -50px; right: -50px; width: 250px; height: 250px; border-radius: 50%; border: 1px solid rgba(232,201,154,0.06); pointer-events: none; } .kr-hero-label { display: inline-flex; align-items: center; gap: 7px; background: var(--kr-primary-l); border: 1px solid rgba(123,28,28,0.15); padding: 5px 14px; border-radius: var(--kr-radius-sm); font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; color: var(--kr-primary); text-transform: uppercase; letter-spacing: 0.09em; margin-bottom: 1.75rem; width: fit-content; } .kr-hero-label i { font-size: 0.7rem; } .kr-hero-title { font-family: var(--font-heading); font-size: clamp(2.8rem, 5vw, 4.6rem); font-weight: 900; color: var(--kr-dark); line-height: 1.06; letter-spacing: -0.03em; margin-bottom: 1.5rem; } .kr-hero-title em { font-style: italic; color: var(--kr-primary); } .kr-hero-text { font-size: 1rem; color: var(--kr-text-muted); line-height: 1.8; max-width: 400px; margin-bottom: 2.5rem; } .kr-hero-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } /* Sağ panel içerik */ .kr-hero-right-content { position: relative; z-index: 1; } .kr-hero-right-label { font-family: var(--font-body); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.35); margin-bottom: 1.25rem; } .kr-hero-project-title { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; color: #ffffff; line-height: 1.2; margin-bottom: 0.75rem; letter-spacing: -0.02em; } .kr-hero-project-desc { font-size: 0.9rem; color: rgba(255,255,255,0.45); line-height: 1.7; max-width: 340px; margin-bottom: 1.75rem; } .kr-hero-project-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 2.5rem; } .kr-hero-project-tag { font-size: 0.7rem; font-weight: 600; padding: 4px 12px; border-radius: var(--kr-radius-sm); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.08); color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.06em; } /* Hero stats — sağ panelin alt kısmı */ .kr-hero-stats { position: relative; z-index: 1; border-top: 1px solid rgba(255,255,255,0.07); display: grid; grid-template-columns: repeat(2, 1fr); margin: 0 -56px; padding: 0 56px; } .kr-hero-stat { padding: 24px 0; border-right: 1px solid rgba(255,255,255,0.07); } .kr-hero-stat:nth-child(even) { border-right: none; padding-left: 24px; } .kr-hero-stat:nth-child(odd) { padding-right: 24px; } .kr-stat-num { font-family: var(--font-heading); font-size: 2.2rem; font-weight: 900; color: var(--kr-gold); line-height: 1; margin-bottom: 4px; } .kr-stat-lbl { font-size: 0.72rem; font-weight: 600; color: rgba(255,255,255,0.35); text-transform: uppercase; letter-spacing: 0.08em; } /* ══════════════════════════════════════════════════════ HİZMET ÇUBUĞU — Hero altı şerit ══════════════════════════════════════════════════════ */ .kr-services-bar { background: var(--kr-dark); border-top: 1px solid rgba(255,255,255,0.06); } .kr-services-bar-inner { display: grid; grid-template-columns: repeat(4, 1fr); } .kr-service-bar-item { padding: 20px 28px; border-right: 1px solid rgba(255,255,255,0.06); display: flex; align-items: center; gap: 10px; transition: background 0.2s; cursor: default; } .kr-service-bar-item:last-child { border-right: none; } .kr-service-bar-item:hover { background: rgba(255,255,255,0.03); } .kr-service-bar-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--kr-primary); flex-shrink: 0; } .kr-service-bar-name { font-family: var(--font-body); font-size: 0.82rem; font-weight: 700; color: rgba(255,255,255,0.55); letter-spacing: 0.02em; } /* ══════════════════════════════════════════════════════ FORM ══════════════════════════════════════════════════════ */ .kr-form-group { margin-bottom: 14px; } .kr-form-label { display: block; font-size: 0.72rem; font-weight: 700; color: var(--kr-text); margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.05em; } .kr-form-input { width: 100%; padding: 10px 14px; border-radius: var(--kr-radius-sm); border: 1.5px solid var(--kr-border); background: var(--kr-bg-cream); font-family: var(--font-body); font-size: 0.9rem; color: var(--kr-text); outline: none; transition: all 0.2s; } .kr-form-input:focus { border-color: var(--kr-primary); background: #fff; box-shadow: 0 0 0 3px rgba(123,28,28,0.08); } .kr-form-submit { width: 100%; background: var(--kr-primary); color: #ffffff; border: none; border-radius: var(--kr-radius-sm); padding: 12px; font-family: var(--font-body); font-size: 0.9rem; font-weight: 700; cursor: pointer; transition: all 0.2s; } .kr-form-submit:hover { background: var(--kr-primary-d); } .kr-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .kr-alert { padding: 10px 14px; border-radius: var(--kr-radius-sm); font-size: 0.85rem; font-weight: 600; margin-bottom: 14px; display: none; } .kr-alert-success { background: #dcfce7; color: #166534; border: 1px solid #bbf7d0; } .kr-alert-error { background: #fee2e2; color: #991b1b; border: 1px solid #fecaca; } /* ══════════════════════════════════════════════════════ İÇ SAYFA BAŞLIĞI ══════════════════════════════════════════════════════ */ .kr-page-header { background: var(--kr-dark); padding: 150px 0 60px; position: relative; overflow: hidden; border-bottom: 3px solid var(--kr-primary); } .kr-page-header::before { content: ''; position: absolute; top: -60px; right: -60px; width: 350px; height: 350px; border-radius: 50%; border: 1px solid rgba(232,201,154,0.06); pointer-events: none; } .kr-page-header h1 { font-family: var(--font-heading); font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 900; color: #ffffff; margin-bottom: 12px; letter-spacing: -0.03em; } .kr-page-header h1 em { font-style: italic; color: var(--kr-gold); } .kr-breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: rgba(255,255,255,0.45); } .kr-breadcrumb a { color: var(--kr-gold); } .kr-breadcrumb a:hover { color: rgba(232,201,154,0.7); } .kr-breadcrumb i { font-size: 0.6rem; color: rgba(255,255,255,0.25); } /* ══════════════════════════════════════════════════════ MODÜL SARICI ══════════════════════════════════════════════════════ */ .kr-module-wrap { min-height: 300px; } /* ══════════════════════════════════════════════════════ BLOG ══════════════════════════════════════════════════════ */ .kr-blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; } .kr-blog-card { background: #ffffff; border: 1px solid var(--kr-border); border-radius: var(--kr-radius); overflow: hidden; transition: all 0.3s ease; display: flex; flex-direction: column; } .kr-blog-card:hover { transform: translateY(-5px); box-shadow: var(--kr-shadow-lg); border-color: var(--kr-border-warm); } .kr-blog-thumb-wrap { overflow: hidden; } .kr-blog-thumb { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; transition: transform 0.45s ease; } .kr-blog-card:hover .kr-blog-thumb { transform: scale(1.04); } .kr-blog-thumb-placeholder { width: 100%; aspect-ratio: 16/10; background: var(--kr-bg-warm); display: flex; align-items: center; justify-content: center; color: var(--kr-primary); font-size: 2.5rem; opacity: 0.25; } .kr-blog-body { padding: 22px; display: flex; flex-direction: column; flex: 1; } .kr-blog-cat { display: inline-block; font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--kr-primary); background: var(--kr-primary-l); padding: 3px 10px; border-radius: var(--kr-radius-sm); margin-bottom: 10px; width: max-content; } .kr-blog-title { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 700; line-height: 1.35; margin-bottom: 8px; color: var(--kr-dark); } .kr-blog-title a:hover { color: var(--kr-primary); } .kr-blog-excerpt { font-size: 0.88rem; color: var(--kr-text-muted); line-height: 1.65; margin-bottom: 16px; flex: 1; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .kr-blog-meta { display: flex; align-items: center; justify-content: space-between; border-top: 1px solid var(--kr-border); padding-top: 14px; font-size: 0.78rem; color: var(--kr-text-muted); } .kr-blog-meta span { display: flex; align-items: center; gap: 5px; } .kr-blog-meta i { color: var(--kr-primary); } .kr-blog-read { font-weight: 700; color: var(--kr-primary); display: flex; align-items: center; gap: 4px; transition: gap 0.2s; } .kr-blog-card:hover .kr-blog-read { gap: 8px; } /* ══════════════════════════════════════════════════════ İLETİŞİM ══════════════════════════════════════════════════════ */ .kr-contact-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: start; } .kr-contact-info-card { background: var(--kr-dark); border-radius: var(--kr-radius); padding: 44px 36px; position: relative; overflow: hidden; } .kr-contact-info-card::before { content: ''; position: absolute; bottom: -80px; right: -80px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(232,201,154,0.07); pointer-events: none; } .kr-contact-info-card h3 { font-family: var(--font-heading); color: #fff; font-size: 1.5rem; font-weight: 700; margin-bottom: 8px; position: relative; } .kr-contact-info-card > p { color: rgba(255,255,255,0.45); font-size: 0.88rem; line-height: 1.7; margin-bottom: 32px; position: relative; } .kr-contact-info-list { display: flex; flex-direction: column; gap: 22px; position: relative; } .kr-contact-info-item { display: flex; align-items: flex-start; gap: 14px; } .kr-contact-info-icon { width: 40px; height: 40px; border-radius: var(--kr-radius-sm); background: rgba(232,201,154,0.08); border: 1px solid rgba(232,201,154,0.15); display: flex; align-items: center; justify-content: center; color: var(--kr-gold); font-size: 0.95rem; flex-shrink: 0; } .kr-contact-info-item h5 { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: rgba(255,255,255,0.35); margin-bottom: 3px; } .kr-contact-info-item p, .kr-contact-info-item a { font-size: 0.9rem; color: rgba(255,255,255,0.7); } .kr-contact-info-item a:hover { color: var(--kr-gold); } .kr-contact-form-card { background: #fff; border: 1px solid var(--kr-border); border-radius: var(--kr-radius); padding: 44px; box-shadow: var(--kr-shadow); border-top: 3px solid var(--kr-primary); } .kr-contact-form-card h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; margin-bottom: 6px; } .kr-contact-form-card > p { font-size: 0.88rem; color: var(--kr-text-muted); margin-bottom: 28px; } /* ══════════════════════════════════════════════════════ 404 ══════════════════════════════════════════════════════ */ .kr-error-wrap { min-height: 75vh; display: flex; align-items: center; justify-content: center; padding-top: 110px; background: var(--kr-bg-cream); } .kr-error-inner { text-align: center; max-width: 520px; } .kr-error-code { font-family: var(--font-heading); font-size: 7rem; font-weight: 900; color: var(--kr-primary); line-height: 1; margin-bottom: 16px; opacity: 0.15; } .kr-error-title { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; margin-bottom: 12px; } .kr-error-desc { color: var(--kr-text-muted); font-size: 0.95rem; margin-bottom: 28px; line-height: 1.7; } /* ══════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════ */ .kr-footer { background: var(--kr-dark); font-family: var(--font-body); } .kr-footer-main { padding: 80px 0 50px; } .kr-footer-grid { display: grid; grid-template-columns: 1.4fr 0.9fr 0.9fr 1fr; gap: 40px; margin-bottom: 50px; } .kr-footer-col h4 { font-family: var(--font-heading); color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid rgba(255,255,255,0.06); } .kr-footer-logo-text { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 900; color: #fff; letter-spacing: -0.02em; display: inline-block; margin-bottom: 4px; } .kr-footer-logo-text span { color: var(--kr-gold); } .kr-footer-about { font-size: 0.88rem; line-height: 1.7; color: rgba(255,255,255,0.4); margin-bottom: 18px; margin-top: 12px; } .kr-footer-socials { display: flex; gap: 8px; } .kr-footer-socials a { width: 32px; height: 32px; border-radius: var(--kr-radius-sm); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 0.78rem; transition: all 0.25s; } .kr-footer-socials a:hover { background: var(--kr-primary); border-color: var(--kr-primary); color: #fff; transform: translateY(-2px); } .kr-footer-links { display: flex; flex-direction: column; gap: 10px; } .kr-footer-links a { font-size: 0.88rem; color: rgba(255,255,255,0.4); display: flex; align-items: center; gap: 6px; transition: all 0.2s; } .kr-footer-links a:hover { color: var(--kr-gold); padding-left: 4px; } .kr-footer-links a i { font-size: 0.6rem; color: var(--kr-primary); } .kr-footer-contact-list { display: flex; flex-direction: column; gap: 12px; } .kr-footer-contact-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.88rem; color: rgba(255,255,255,0.4); } .kr-footer-contact-list i { color: var(--kr-gold); margin-top: 3px; } .kr-footer-contact-list a { color: rgba(255,255,255,0.4); } .kr-footer-contact-list a:hover { color: var(--kr-gold); } .kr-footer-bottom { background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.05); padding: 18px 0; } .kr-footer-bottom-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; } .kr-footer-copyright { font-size: 0.82rem; color: rgba(255,255,255,0.25); } .kr-footer-bottom-links { display: flex; gap: 20px; } .kr-footer-bottom-links a { font-size: 0.82rem; color: rgba(255,255,255,0.25); } .kr-footer-bottom-links a:hover { color: var(--kr-gold); } /* Bordo üst çizgi — footer'ın en üstü */ .kr-footer-top-bar { height: 3px; background: var(--kr-primary); } /* Yukarı çık */ .kr-back-top { position: fixed; bottom: 24px; right: 24px; width: 40px; height: 40px; background: var(--kr-primary); color: #fff; border: none; border-radius: var(--kr-radius-sm); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.3s ease; z-index: 999; font-size: 0.95rem; box-shadow: 0 4px 12px rgba(123,28,28,0.3); } .kr-back-top.show { opacity: 1; visibility: visible; transform: translateY(0); } .kr-back-top:hover { background: var(--kr-primary-d); transform: translateY(-3px); } /* ── Yardımcı ────────────────────────────────────────── */ .kr-prose { font-family: var(--font-body); color: var(--kr-text); line-height: 1.85; font-size: 1.02rem; } .kr-prose h2, .kr-prose h3 { font-family: var(--font-heading); margin: 2rem 0 0.75rem; } .kr-prose p { margin-bottom: 1rem; } /* ══════════════════════════════════════════════════════ RESPONSIVE ══════════════════════════════════════════════════════ */ @media (max-width: 1024px) { .kr-hero { grid-template-columns: 1fr; } .kr-hero-right { padding: 60px 40px 0; min-height: 400px; } .kr-hero-stats { grid-template-columns: repeat(4,1fr); } .kr-hero-stat { border-right: 1px solid rgba(255,255,255,0.07); } .kr-hero-stat:last-child { border-right: none; } .kr-hero-stat:nth-child(even), .kr-hero-stat:nth-child(odd) { padding: 20px 16px; } .kr-services-bar-inner { grid-template-columns: repeat(2,1fr); } .kr-footer-grid { grid-template-columns: repeat(2,1fr); gap: 28px; } .kr-contact-grid { grid-template-columns: 1fr; gap: 30px; } } @media (max-width: 768px) { html, body { overflow-x: hidden; max-width: 100%; } /* Header */ .kr-header-wrap { top: 0; padding: 0; left: 0; right: 0; } .kr-header { max-width: 100%; } .kr-header-inner { padding: 0 1.25rem; } .kr-nav { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: var(--kr-dark); flex-direction: column; justify-content: center; align-items: center; gap: 28px; transform: translateX(-100%); opacity: 0; pointer-events: none; transition: all 0.35s ease; z-index: 1001; } .kr-nav.open { transform: translateX(0); opacity: 1; pointer-events: auto; } .kr-nav .kr-nav-link { font-size: 1.25rem; color: rgba(255,255,255,0.85); } .kr-nav .kr-nav-link::after { background: var(--kr-gold); } .kr-nav-toggle { display: flex; z-index: 1002; } .kr-header-actions .kr-btn { display: none; } /* Hero */ .kr-hero { grid-template-columns: 1fr; } .kr-hero-left { padding: 130px 28px 50px; } .kr-hero-right { padding: 40px 28px 0; } .kr-hero-stats { grid-template-columns: repeat(2,1fr); margin: 0 -28px; padding: 0 28px; } .kr-hero-stat:nth-child(odd) { padding: 18px 8px 18px 0; border-right: 1px solid rgba(255,255,255,0.07); } .kr-hero-stat:nth-child(even) { padding: 18px 0 18px 16px; } .kr-hero-stat:nth-child(3), .kr-hero-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,0.07); } .kr-services-bar-inner { grid-template-columns: 1fr 1fr; } /* Genel */ .kr-section { padding: 60px 0; } .container { padding: 0 1.25rem; } .kr-footer-grid { grid-template-columns: 1fr; } .kr-footer-bottom-inner { flex-direction: column; text-align: center; } .kr-form-row { grid-template-columns: 1fr; } .kr-page-header { padding-top: 110px; } .kr-contact-form-card { padding: 28px 20px; } } @media (max-width: 480px) { .kr-hero-title { font-size: 2.4rem; } .kr-blog-grid { grid-template-columns: 1fr; } }