/* ============================================================================ MERIPORT B2B — TASARIM SİSTEMİ Brand Kit 2026 · Terracotta Copper Edition · Light / Dark Mode ---------------------------------------------------------------------------- Tema, üzerinden çalışır. Tailwind'in `dark:` varyantı için aynı anda de yönetilir (darkMode:'class'). Tüm yüzey/metin değerleri semantik token'lardan gelir; yeni bir tema eklemek için yalnız token bloğu yazmak yeterlidir. ========================================================================== */ /* ═══════════════════════ 1. MARKA TOKEN'LARI (tema bağımsız) ═══════════════ */ :root { --mp-copper-50 : #FDF3EC; --mp-copper-100: #FAE4D4; --mp-copper-200: #F2C4A0; --mp-copper-300: #E8A06A; --mp-copper-400: #DC8340; --mp-copper-500: #C96A1E; --mp-copper-600: #B85B14; /* Primary Accent */ --mp-copper-700: #9E470E; /* Secondary Accent */ --mp-copper-800: #6E2D05; --mp-copper-900: #4A1D03; --mp-navy : #0F172A; --mp-panel : #1E293B; --mp-panel-deep: #141E33; --mp-cream : #F4F0EE; --mp-cream-200 : #E5DDD8; --mp-accent : var(--mp-copper-600); /* Metalik bakır degrade — Brand Kit: diyagonal 138°, ışık sol üstten */ --mp-metal: linear-gradient(138deg, #F2B77F 0%, #D6853B 14%, #BC6018 32%, #A54D10 48%, #BC651F 63%, #E09758 80%, #8A3B0A 100%); --mp-cta: linear-gradient(135deg, var(--mp-copper-500) 0%, var(--mp-copper-600) 45%, var(--mp-copper-700) 100%); --mp-glow : 0 8px 24px -6px rgba(184,91,20,.42); --mp-glow-lg : 0 16px 44px -10px rgba(184,91,20,.50); --mp-emboss : inset 0 1px 0 rgba(255,224,198,.28), inset 0 -1px 0 rgba(110,45,5,.35); --mp-r-sm : 6px; --mp-r-md : 10px; --mp-r-lg : 14px; --mp-r-xl : 20px; --mp-r-pill: 999px; --mp-font-display: 'Playfair Display', 'Times New Roman', Georgia, serif; --mp-font-head : 'Montserrat', 'Segoe UI', system-ui, sans-serif; --mp-font-body : 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif; /* Bölüm ritmi — masaüstünde iki bölüm arası 2 × değer kadar boşluk oluşur */ --mp-sec-y : clamp(56px, 6vw, 84px); --mp-sec-y-tight : clamp(40px, 4.5vw, 60px); --mp-topbar-h : 38px; --mp-nav-h : 76px; --mp-ease : cubic-bezier(.22,.61,.36,1); } /* ═══════════════════════ 2. TEMA: DARK (varsayılan) ═══════════════════════ */ :root, :root[data-theme="dark"] { color-scheme: dark; --mp-bg : #0F172A; --mp-bg-deep : #0B1220; --mp-bg-radials: radial-gradient(1100px 620px at 12% -8%, rgba(184,91,20,.16), transparent 62%), radial-gradient(900px 560px at 92% 4%, rgba(158,71,14,.13), transparent 60%), radial-gradient(800px 700px at 50% 108%, rgba(184,91,20,.09), transparent 65%); --mp-band : rgba(11,18,32,.75); --mp-band-top : #0B1220; --mp-surface-1 : rgba(30,41,59,.82); --mp-surface-2 : rgba(20,30,51,.94); --mp-surface-soft-1: rgba(30,41,59,.66); --mp-surface-soft-2: rgba(20,30,51,.88); --mp-surface-flat : #131F38; /* menü, çekmece, açılır liste */ --mp-border : rgba(184,91,20,.20); --mp-border-hover : rgba(184,91,20,.55); --mp-border-soft : rgba(148,163,184,.14); --mp-divider : rgba(148,163,184,.12); --mp-text : #FFFFFF; --mp-text-soft : #CBD5E1; --mp-text-muted : #94A3B8; --mp-text-invert : #0F172A; --mp-input-bg : rgba(11,17,34,.62); --mp-input-bg-focus: rgba(11,17,34,.85); --mp-input-border : rgba(148,163,184,.20); --mp-input-ph : #64748B; --mp-nav-bg : rgba(15,23,42,.72); --mp-nav-bg-stuck : rgba(11,17,34,.94); --mp-nav-border : rgba(148,163,184,.10); --mp-topbar-bg : linear-gradient(90deg, #0A1122, #131F38 50%, #0A1122); --mp-footer-bg : linear-gradient(180deg, #0B1220, #070C18); --mp-drawer-bg : linear-gradient(170deg, #131F38, #0B1220); --mp-cta-card : linear-gradient(150deg, rgba(184,91,20,.22), rgba(110,45,5,.10)); --mp-cta-card-brd : rgba(184,91,20,.45); /* Metalik yazı — koyu zeminde açık tonlar öne çıkar */ --mp-metal-text : var(--mp-metal); --mp-accent-solid : var(--mp-copper-500); --mp-shadow-sm : 0 2px 4px -1px rgba(0,0,0,.28), 0 1px 2px -1px rgba(0,0,0,.20); --mp-shadow-md : 0 6px 12px -3px rgba(0,0,0,.35), 0 3px 6px -3px rgba(0,0,0,.25); --mp-shadow-lg : 0 14px 28px -6px rgba(0,0,0,.45), 0 6px 10px -6px rgba(0,0,0,.30); --mp-shadow-xl : 0 26px 50px -12px rgba(0,0,0,.55); --mp-scroll-track: #0B1220; --mp-grain-op : .05; --mp-grain-blend : overlay; } /* ═══════════════════════ 3. TEMA: LIGHT ═══════════════════════ */ :root[data-theme="light"] { color-scheme: light; --mp-bg : #F4F0EE; /* Warm Cream */ --mp-bg-deep : #EDE6E1; --mp-bg-radials: radial-gradient(1100px 620px at 12% -8%, rgba(184,91,20,.10), transparent 62%), radial-gradient(900px 560px at 92% 4%, rgba(158,71,14,.07), transparent 60%), radial-gradient(800px 700px at 50% 108%, rgba(184,91,20,.06), transparent 65%); --mp-band : rgba(255,255,255,.62); --mp-band-top : #EDE6E1; --mp-surface-1 : rgba(255,255,255,.94); /* Clean White */ --mp-surface-2 : rgba(255,255,255,.99); --mp-surface-soft-1: rgba(255,255,255,.80); --mp-surface-soft-2: rgba(255,255,255,.94); --mp-surface-flat : #FFFFFF; --mp-border : rgba(184,91,20,.22); --mp-border-hover : rgba(184,91,20,.58); --mp-border-soft : rgba(15,23,42,.10); --mp-divider : rgba(15,23,42,.10); --mp-text : #0F172A; /* Deep Slate Navy */ --mp-text-soft : #334155; --mp-text-muted : #64748B; /* Slate Muted */ --mp-text-invert : #FFFFFF; --mp-input-bg : #FFFFFF; --mp-input-bg-focus: #FFFFFF; --mp-input-border : rgba(15,23,42,.18); --mp-input-ph : #94A3B8; --mp-nav-bg : rgba(244,240,238,.80); --mp-nav-bg-stuck : rgba(255,255,255,.95); --mp-nav-border : rgba(15,23,42,.09); --mp-topbar-bg : linear-gradient(90deg, #EBE3DE, #FBF9F8 50%, #EBE3DE); --mp-footer-bg : linear-gradient(180deg, #FBF9F8, #EBE3DE); --mp-drawer-bg : linear-gradient(170deg, #FFFFFF, #F4F0EE); --mp-cta-card : linear-gradient(150deg, rgba(184,91,20,.14), rgba(255,255,255,.85)); --mp-cta-card-brd : rgba(184,91,20,.40); /* Krem zeminde metalik degradenin açık uçları okunmaz — koyu uçlara kaydırıldı. Brand Kit kontrast notu: #F4F0EE üzerinde küçük metin için #9E470E (5.52:1). */ --mp-metal-text : linear-gradient(138deg, #C96A1E 0%, #A54D10 22%, #6E2D05 48%, #9E470E 72%, #B85B14 100%); --mp-accent-solid : var(--mp-copper-700); --mp-shadow-sm : 0 2px 4px -1px rgba(74,29,3,.08), 0 1px 2px -1px rgba(74,29,3,.06); --mp-shadow-md : 0 6px 14px -4px rgba(74,29,3,.12), 0 3px 6px -3px rgba(74,29,3,.08); --mp-shadow-lg : 0 16px 30px -8px rgba(74,29,3,.16), 0 6px 12px -6px rgba(74,29,3,.10); --mp-shadow-xl : 0 26px 50px -12px rgba(74,29,3,.22); --mp-scroll-track: #E5DDD8; --mp-grain-op : .035; --mp-grain-blend : multiply; } /* Sistem tercihi light ise ve kullanıcı seçim yapmadıysa light uygula */ /* NOT: prefers-color-scheme ile otomatik açık temaya geçiş BİLEREK yok. Marka sunumu koyu zemin üzerine kurulu; Dark Mode her koşulda varsayılandır (JS kapalı olsa bile). Açık temaya yalnız kullanıcı düğmeyle geçer ve tercih localStorage['mp_theme'] içinde saklanır. */ /* ═══════════════════════ 4. TEMEL ═══════════════════════ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } /* i18n açılış koruması — içerik yerine oturana kadar tek karelik gizleme */ html[data-mp-boot] body { opacity: 0; } body { opacity: 1; transition: opacity .18s ease; } body { margin: 0; background-color: var(--mp-bg); color: var(--mp-text); font-family: var(--mp-font-body); font-size: 16px; line-height: 1.68; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color .3s var(--mp-ease), color .3s var(--mp-ease); } body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: var(--mp-bg-radials), var(--mp-bg); pointer-events: none; transition: background .3s var(--mp-ease); } /* Kağıt/deri hissi veren gömülü SVG grain — hiçbir dosya indirmez (~1 KB) */ body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: var(--mp-grain-op); mix-blend-mode: var(--mp-grain-blend); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"); } img, svg, video { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ::selection { background: var(--mp-copper-600); color: #fff; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--mp-scroll-track); } ::-webkit-scrollbar-thumb { background: var(--mp-copper-700); border-radius: 99px; border: 2px solid var(--mp-scroll-track); } ::-webkit-scrollbar-thumb:hover { background: var(--mp-copper-600); } :focus-visible { outline: 2px solid var(--mp-copper-500); outline-offset: 3px; border-radius: 4px; } .mp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .mp-skip { position: absolute; left: 50%; transform: translateX(-50%) translateY(-140%); top: 8px; z-index: 200; background: var(--mp-copper-600); color: #fff; padding: 10px 20px; border-radius: var(--mp-r-md); font-weight: 600; transition: transform .2s var(--mp-ease); } .mp-skip:focus { transform: translateX(-50%) translateY(0); } /* ═══════════════════════ 5. TİPOGRAFİ ═══════════════════════ */ .mp-display { font-family: var(--mp-font-display); font-weight: 500; line-height: 1.12; letter-spacing: -.015em; color: var(--mp-text); } .mp-head { font-family: var(--mp-font-head); font-weight: 600; letter-spacing: -.01em; } .mp-accent { color: var(--mp-accent-solid); background: var(--mp-metal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not (-webkit-background-clip: text) { .mp-accent { color: var(--mp-accent-solid); -webkit-text-fill-color: currentColor; } } .mp-muted { color: var(--mp-text-muted); } .mp-soft { color: var(--mp-text-soft); } /* Tema güvenli vurgu hover'ı (Tailwind hover:text-white yerine) */ .mp-hover-strong { transition: color .22s var(--mp-ease); } .mp-hover-strong:hover { color: var(--mp-text); } .mp-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mp-font-head); font-size: 12px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--mp-copper-600); } :root[data-theme="dark"] .mp-eyebrow { color: var(--mp-copper-400); } .mp-eyebrow::before, .mp-eyebrow::after { content: ''; width: 34px; height: 1px; background: linear-gradient(90deg, transparent, var(--mp-copper-600)); } .mp-eyebrow::after { background: linear-gradient(90deg, var(--mp-copper-600), transparent); } .mp-eyebrow--start::before { display: none; } .mp-rule { height: 1px; border: 0; width: 100%; background: linear-gradient(90deg, transparent, rgba(184,91,20,.55) 35%, rgba(184,91,20,.95) 50%, rgba(184,91,20,.55) 65%, transparent); } /* ═══════════════════════ 6. YÜZEYLER ═══════════════════════ */ .mp-card { position: relative; background: linear-gradient(158deg, var(--mp-surface-1) 0%, var(--mp-surface-2) 100%); border: 1px solid var(--mp-border); border-radius: var(--mp-r-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: var(--mp-shadow-md); color: var(--mp-text); transition: border-color .35s var(--mp-ease), transform .35s var(--mp-ease), box-shadow .35s var(--mp-ease), background .3s var(--mp-ease); } .mp-card::before { content: ''; position: absolute; top: 0; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, rgba(232,160,106,.45), transparent); opacity: 0; transition: opacity .35s var(--mp-ease); } .mp-card:hover { border-color: var(--mp-border-hover); transform: translateY(-4px); box-shadow: var(--mp-shadow-lg), var(--mp-glow); } .mp-card:hover::before { opacity: 1; } .mp-card--flat:hover { transform: none; } .mp-panel { background: linear-gradient(158deg, var(--mp-surface-soft-1), var(--mp-surface-soft-2)); border: 1px solid var(--mp-border-soft); border-radius: var(--mp-r-lg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* Bakır vurgulu CTA kartı */ .mp-cta-card { background: var(--mp-cta-card) !important; border-color: var(--mp-cta-card-brd) !important; } /* Bölüm bandı — sayfa akışında hafif yüzey farkı */ .mp-band { background: linear-gradient(180deg, transparent, var(--mp-band) 20%, var(--mp-band) 80%, transparent); } .mp-band--strong { background: linear-gradient(180deg, transparent, var(--mp-band) 16%, var(--mp-band) 84%, transparent); } .mp-band--top { background: linear-gradient(180deg, var(--mp-band-top), transparent); } /* Görsel üzerindeki bölümler her iki temada da koyu kalır */ .mp-onimage, .mp-onimage .mp-display { color: #FFFFFF; } .mp-onimage .mp-muted { color: #CBD5E1; } .mp-onimage .mp-eyebrow { color: var(--mp-copper-400); } .mp-onimage .mp-accent { background: var(--mp-metal); -webkit-background-clip: text; background-clip: text; } @supports not (-webkit-background-clip: text) { .mp-onimage .mp-accent { color: var(--mp-copper-400); -webkit-text-fill-color: currentColor; } } .mp-onimage .mp-chip { color: var(--mp-copper-200); background: rgba(184,91,20,.16); border-color: rgba(184,91,20,.34); } .mp-onimage .mp-hover-strong:hover { color: #fff; } .mp-icon { display: inline-flex; align-items: center; justify-content: center; width: 54px; height: 54px; flex: 0 0 54px; border-radius: var(--mp-r-md); background: linear-gradient(145deg, rgba(184,91,20,.20), rgba(110,45,5,.12)); border: 1px solid rgba(184,91,20,.34); color: var(--mp-copper-600); font-size: 21px; box-shadow: var(--mp-emboss); transition: all .35s var(--mp-ease); } :root[data-theme="dark"] .mp-icon { color: var(--mp-copper-300); } .mp-card:hover .mp-icon, .mp-icon-hoverable:hover .mp-icon { background: var(--mp-cta); border-color: transparent; color: #fff; box-shadow: var(--mp-glow); } .mp-icon--sm { width: 40px; height: 40px; flex-basis: 40px; font-size: 15px; border-radius: var(--mp-r-sm); } .mp-icon--lg { width: 66px; height: 66px; flex-basis: 66px; font-size: 26px; } .mp-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 13px; font-size: 12px; font-weight: 500; font-family: var(--mp-font-head); color: var(--mp-copper-700); background: rgba(184,91,20,.10); border: 1px solid rgba(184,91,20,.28); border-radius: var(--mp-r-pill); white-space: nowrap; transition: all .25s var(--mp-ease); } :root[data-theme="dark"] .mp-chip { color: var(--mp-copper-200); background: rgba(184,91,20,.11); } a.mp-chip:hover { background: rgba(184,91,20,.20); border-color: var(--mp-copper-600); } /* ═══════════════════════ 7. BUTON ═══════════════════════ */ .mp-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 26px; font-family: var(--mp-font-head); font-size: 13.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; border-radius: var(--mp-r-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: all .3s var(--mp-ease); -webkit-tap-highlight-color: transparent; } .mp-btn i, .mp-btn svg { transition: transform .3s var(--mp-ease); } .mp-btn:hover i.mp-arrow { transform: translateX(4px); } .mp-rtl .mp-btn:hover i.mp-arrow { transform: translateX(-4px); } .mp-btn-primary { background: var(--mp-cta); color: #fff; box-shadow: var(--mp-glow), var(--mp-emboss); } .mp-btn-primary:hover { background: linear-gradient(135deg, var(--mp-copper-400), var(--mp-copper-500) 45%, var(--mp-copper-600)); box-shadow: var(--mp-glow-lg), var(--mp-emboss); transform: translateY(-2px); } .mp-btn-primary:active { transform: translateY(0); } .mp-btn-ghost { background: rgba(184,91,20,.06); border-color: rgba(184,91,20,.55); color: var(--mp-copper-700); } :root[data-theme="dark"] .mp-btn-ghost { color: var(--mp-copper-300); } .mp-btn-ghost:hover { background: rgba(184,91,20,.15); border-color: var(--mp-copper-500); transform: translateY(-2px); } .mp-btn-light { background: rgba(15,23,42,.05); border-color: rgba(15,23,42,.18); color: var(--mp-text); } :root[data-theme="dark"] .mp-btn-light { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.20); color: #fff; } .mp-btn-light:hover { background: rgba(15,23,42,.10); border-color: rgba(15,23,42,.32); } :root[data-theme="dark"] .mp-btn-light:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.38); } .mp-btn-wa { background: #22A45D; color: #fff; box-shadow: 0 8px 22px -8px rgba(34,164,93,.6); } .mp-btn-wa:hover { background: #1C8C4F; transform: translateY(-2px); } .mp-btn--sm { padding: 9px 17px; font-size: 12px; } .mp-btn--lg { padding: 16px 34px; font-size: 14.5px; } .mp-btn--full{ width: 100%; } .mp-btn[disabled], .mp-btn.is-busy { opacity: .6; pointer-events: none; } .mp-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mp-font-head); font-size: 13px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--mp-copper-700); transition: color .25s var(--mp-ease); } :root[data-theme="dark"] .mp-link { color: var(--mp-copper-400); } .mp-link:hover { color: var(--mp-copper-500); } :root[data-theme="dark"] .mp-link:hover { color: var(--mp-copper-200); } .mp-link:hover i { transform: translateX(4px); } .mp-link i { transition: transform .25s var(--mp-ease); } /* ═══════════════════════ 8. ÜST ÇUBUK ═══════════════════════ */ .mp-topbar { background: var(--mp-topbar-bg); border-bottom: 1px solid var(--mp-border); font-size: 12.5px; color: var(--mp-text-soft); transition: background .3s var(--mp-ease), color .3s var(--mp-ease); } .mp-topbar a { transition: color .22s var(--mp-ease); } .mp-topbar a:hover { color: var(--mp-copper-600); } .mp-topbar i { color: var(--mp-copper-600); } :root[data-theme="dark"] .mp-topbar a:hover, :root[data-theme="dark"] .mp-topbar i { color: var(--mp-copper-400); } /* ---- Tema değiştirici ---- */ .mp-theme-toggle { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; border-radius: var(--mp-r-sm); border: 1px solid rgba(184,91,20,.30); background: rgba(184,91,20,.08); color: var(--mp-copper-600); cursor: pointer; overflow: hidden; transition: all .25s var(--mp-ease); } :root[data-theme="dark"] .mp-theme-toggle { color: var(--mp-copper-300); } .mp-theme-toggle:hover { background: rgba(184,91,20,.18); border-color: var(--mp-copper-600); } .mp-theme-toggle i { position: absolute; font-size: 13px; transition: transform .42s var(--mp-ease), opacity .28s var(--mp-ease); } /* Dark tema → ay görünür (light'a geçiş sunar: güneş) */ .mp-theme-toggle .mp-sun { transform: translateY(0) rotate(0deg); opacity: 1; } .mp-theme-toggle .mp-moon { transform: translateY(-140%) rotate(-90deg); opacity: 0; } :root[data-theme="light"] .mp-theme-toggle .mp-sun { transform: translateY(140%) rotate(90deg); opacity: 0; } :root[data-theme="light"] .mp-theme-toggle .mp-moon { transform: translateY(0) rotate(0deg); opacity: 1; } /* Navbar içindeki büyük varyant (mobil erişim) */ .mp-theme-toggle--nav { width: 42px; height: 42px; border-radius: var(--mp-r-md); } .mp-theme-toggle--nav i { font-size: 15px; } /* ---- Dil seçici ---- */ .mp-lang { position: relative; } .mp-lang-btn { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border-radius: var(--mp-r-sm); border: 1px solid rgba(184,91,20,.30); background: rgba(184,91,20,.08); color: var(--mp-copper-700); font-family: var(--mp-font-head); font-size: 12px; font-weight: 600; letter-spacing: .06em; cursor: pointer; transition: all .25s var(--mp-ease); } :root[data-theme="dark"] .mp-lang-btn { color: var(--mp-copper-200); } .mp-lang-btn:hover { background: rgba(184,91,20,.18); border-color: var(--mp-copper-600); } .mp-lang-btn .mp-caret { transition: transform .25s var(--mp-ease); font-size: 10px; } .mp-lang.is-open .mp-caret { transform: rotate(180deg); } .mp-lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 172px; z-index: 120; padding: 6px; background: var(--mp-surface-flat); border: 1px solid var(--mp-border); border-radius: var(--mp-r-md); box-shadow: var(--mp-shadow-xl); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity .22s var(--mp-ease), visibility .22s var(--mp-ease), transform .22s var(--mp-ease); max-height: 320px; overflow-y: auto; } .mp-lang.is-open .mp-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); } .mp-lang-menu button { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 9px 12px; background: none; border: 0; cursor: pointer; color: var(--mp-text-soft); font-size: 13px; text-align: start; font-family: var(--mp-font-body); border-radius: var(--mp-r-sm); transition: all .18s var(--mp-ease); } .mp-lang-menu button:hover { background: rgba(184,91,20,.14); color: var(--mp-text); } .mp-lang-menu button[aria-current="true"] { color: var(--mp-copper-600); background: rgba(184,91,20,.10); } .mp-lang-menu button .mp-lang-code { font-family: var(--mp-font-head); font-size: 11px; font-weight: 700; letter-spacing: .08em; opacity: .65; } /* ═══════════════════════ 9. NAVBAR ═══════════════════════ */ .mp-nav { position: sticky; top: 0; z-index: 100; background: var(--mp-nav-bg); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); border-bottom: 1px solid var(--mp-nav-border); transition: background .35s var(--mp-ease), box-shadow .35s var(--mp-ease), border-color .35s var(--mp-ease); } .mp-nav.is-stuck { background: var(--mp-nav-bg-stuck); border-bottom-color: var(--mp-border); box-shadow: var(--mp-shadow-lg); } .mp-nav-inner { height: var(--mp-nav-h); transition: height .35s var(--mp-ease); } .mp-nav.is-stuck .mp-nav-inner { height: 64px; } .mp-logo { display: flex; align-items: center; gap: 12px; } .mp-logo img { height: 42px; width: auto; transition: height .35s var(--mp-ease); } .mp-nav.is-stuck .mp-logo img { height: 36px; } .mp-logo-text { line-height: 1; } .mp-logo-text b { display: block; font-family: var(--mp-font-head); font-weight: 600; font-size: 19px; letter-spacing: .10em; color: var(--mp-text); } .mp-logo-text span { display: block; font-size: 8.5px; letter-spacing: .34em; color: var(--mp-copper-600); margin-top: 3px; font-weight: 500; } :root[data-theme="dark"] .mp-logo-text span { color: var(--mp-copper-500); } .mp-navlink { position: relative; padding: 8px 2px; font-family: var(--mp-font-head); font-size: 13px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--mp-text-soft); transition: color .25s var(--mp-ease); white-space: nowrap; } .mp-navlink::after { content: ''; position: absolute; bottom: 0; inset-inline-start: 0; width: 0; height: 2px; border-radius: 2px; background: var(--mp-cta); transition: width .3s var(--mp-ease); } .mp-navlink:hover { color: var(--mp-text); } .mp-navlink:hover::after { width: 100%; } .mp-navlink.is-active { color: var(--mp-copper-600); } :root[data-theme="dark"] .mp-navlink.is-active { color: var(--mp-copper-400); } .mp-navlink.is-active::after { width: 100%; } .mp-dropdown { position: relative; } .mp-dropdown-menu { position: absolute; top: calc(100% + 14px); inset-inline-start: -18px; min-width: 268px; z-index: 110; padding: 8px; background: var(--mp-surface-flat); border: 1px solid var(--mp-border); border-radius: var(--mp-r-lg); box-shadow: var(--mp-shadow-xl); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: opacity .25s var(--mp-ease), visibility .25s var(--mp-ease), transform .25s var(--mp-ease); } .mp-dropdown:hover .mp-dropdown-menu, .mp-dropdown:focus-within .mp-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .mp-dropdown-menu::before { content: ''; position: absolute; top: -14px; left: 0; right: 0; height: 14px; } .mp-dropdown-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--mp-r-sm); transition: background .2s var(--mp-ease); } .mp-dropdown-item:hover { background: rgba(184,91,20,.14); } .mp-dropdown-item img { width: 42px; height: 42px; object-fit: cover; border-radius: var(--mp-r-sm); flex: 0 0 42px; } .mp-dropdown-item b { display: block; font-family: var(--mp-font-head); font-size: 13px; font-weight: 600; letter-spacing: .13em; color: var(--mp-text); } .mp-dropdown-item small { display: block; font-size: 11.5px; color: var(--mp-text-muted); margin-top: 2px; } .mp-burger { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 11px; background: none; border: 0; cursor: pointer; } .mp-burger span { display: block; height: 2px; width: 100%; border-radius: 2px; background: var(--mp-copper-600); transition: transform .3s var(--mp-ease), opacity .2s var(--mp-ease); } .mp-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .mp-burger.is-open span:nth-child(2) { opacity: 0; } .mp-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mp-drawer { position: fixed; inset: 0; z-index: 130; visibility: hidden; pointer-events: none; } .mp-drawer.is-open { visibility: visible; pointer-events: auto; } .mp-drawer-scrim { position: absolute; inset: 0; background: rgba(5,9,18,.62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s var(--mp-ease); } .mp-drawer.is-open .mp-drawer-scrim { opacity: 1; } .mp-drawer-panel { position: absolute; top: 0; bottom: 0; inset-inline-end: 0; width: min(88vw, 380px); background: var(--mp-drawer-bg); border-inline-start: 1px solid var(--mp-border); box-shadow: var(--mp-shadow-xl); transform: translateX(100%); transition: transform .34s var(--mp-ease); overflow-y: auto; padding: 22px 22px calc(22px + env(safe-area-inset-bottom)); } .mp-rtl .mp-drawer-panel { transform: translateX(-100%); } .mp-drawer.is-open .mp-drawer-panel { transform: translateX(0); } .mp-drawer-link { display: flex; align-items: center; justify-content: space-between; padding: 15px 4px; font-family: var(--mp-font-head); font-size: 15px; font-weight: 500; letter-spacing: .05em; text-transform: uppercase; color: var(--mp-text-soft); border-bottom: 1px solid var(--mp-divider); transition: color .22s var(--mp-ease), padding-inline-start .22s var(--mp-ease); } .mp-drawer-link:hover, .mp-drawer-link.is-active { color: var(--mp-copper-600); padding-inline-start: 10px; } /* ═══════════════════════ 10. HERO ═══════════════════════ */ .mp-hero { position: relative; min-height: clamp(560px, 84vh, 820px); display: flex; align-items: center; overflow: hidden; background: #0F172A; /* görsel yüklenene kadar */ } .mp-hero-media { position: absolute; inset: 0; z-index: 0; } .mp-hero-media picture, .mp-hero-media img { width: 100%; height: 100%; object-fit: cover; } .mp-hero-veil { position: absolute; inset: 0; z-index: 1; background: radial-gradient(760px 520px at 50% 46%, rgba(15,23,42,.86), rgba(15,23,42,.34) 62%, transparent 82%), linear-gradient(180deg, rgba(11,17,34,.62) 0%, transparent 26%, transparent 70%, rgba(11,17,34,.86) 100%); } .mp-hero-content { position: relative; z-index: 2; width: 100%; } .mp-hero h1 { font-size: clamp(2.4rem, 6.2vw, 4.6rem); margin: 0; } /* Sayfa başlığı görselleri koyu kalır, alt kenar sayfa zeminine erir */ .mp-pagehead { position: relative; overflow: hidden; background: #0F172A; } .mp-pagehead > .mp-pagehead-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,.88), rgba(15,23,42,.82) 40%, rgba(11,18,32,.96)); } .mp-pagehead::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; background: linear-gradient(180deg, transparent, var(--mp-bg)); pointer-events: none; z-index: 2; } .mp-pagehead > .mp-container { position: relative; z-index: 3; } .mp-stat b { display: block; font-family: var(--mp-font-display); font-size: clamp(1.9rem, 4vw, 2.8rem); line-height: 1; background: var(--mp-metal-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } @supports not (-webkit-background-clip: text) { .mp-stat b { color: var(--mp-accent-solid); -webkit-text-fill-color: currentColor; } } .mp-stat span { display: block; margin-top: 8px; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--mp-text-muted); font-family: var(--mp-font-head); font-weight: 500; } .mp-scroll-hint { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: #94A3B8; font-family: var(--mp-font-head); } .mp-scroll-hint i { animation: mp-bob 2.1s ease-in-out infinite; color: var(--mp-copper-500); } @keyframes mp-bob { 0%,100% { transform: translateY(0); opacity: .55; } 50% { transform: translateY(6px); opacity: 1; } } /* ═══════════════════════ 11. MARKA KARTI ═══════════════════════ */ .mp-brand-card { display: flex; flex-direction: column; overflow: hidden; } .mp-brand-photo { position: relative; overflow: hidden; aspect-ratio: 4 / 5; background: #0B1220; } .mp-brand-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; transition: transform .8s var(--mp-ease), filter .5s var(--mp-ease); filter: saturate(.92); } .mp-brand-card:hover .mp-brand-photo img { transform: scale(1.06); filter: saturate(1.05); } .mp-brand-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(15,23,42,.45) 70%, var(--mp-surface-2) 100%); } .mp-ornament { color: var(--mp-copper-600); opacity: .95; } :root[data-theme="dark"] .mp-ornament { color: var(--mp-copper-400); } .mp-brand-name { font-family: var(--mp-font-display); font-size: 27px; font-weight: 500; letter-spacing: .26em; color: var(--mp-text); line-height: 1; } .mp-brand-suffix { font-family: var(--mp-font-head); font-size: 10px; font-weight: 500; letter-spacing: .40em; color: var(--mp-text-muted); margin-top: 9px; } .mp-brand-tagline { font-family: var(--mp-font-display); font-style: italic; font-size: 16px; color: var(--mp-copper-700); } :root[data-theme="dark"] .mp-brand-tagline { color: var(--mp-copper-300); } /* Marka kategori satırı (Tailwind text-copper-400 yerine tema güvenli) */ .mp-brand-cat { font-family: var(--mp-font-head); font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--mp-copper-700); } :root[data-theme="dark"] .mp-brand-cat { color: var(--mp-copper-400); } /* ═══════════════════════ 12. SÜREÇ ═══════════════════════ */ .mp-step { position: relative; } .mp-step-num { font-family: var(--mp-font-display); font-size: 60px; line-height: 1; font-weight: 500; color: transparent; -webkit-text-stroke: 1px rgba(184,91,20,.45); transition: all .4s var(--mp-ease); } .mp-step:hover .mp-step-num { color: rgba(184,91,20,.14); -webkit-text-stroke-color: rgba(184,91,20,.85); } .mp-step-line { position: absolute; top: 34px; inset-inline-start: calc(50% + 44px); width: calc(100% - 88px); height: 1px; background: linear-gradient(90deg, rgba(184,91,20,.5), rgba(184,91,20,.14)); } .mp-rtl .mp-step-line { background: linear-gradient(270deg, rgba(184,91,20,.5), rgba(184,91,20,.14)); } @media (max-width: 1023px) { .mp-step-line { display: none; } } /* ═══════════════════════ 13. FORM ═══════════════════════ */ .mp-label { display: block; margin-bottom: 7px; font-family: var(--mp-font-head); font-size: 12px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--mp-text-soft); } .mp-label .mp-req { color: var(--mp-copper-600); margin-inline-start: 3px; } .mp-label .mp-opt { color: var(--mp-text-muted); font-weight: 400; text-transform: none; letter-spacing: .02em; } .mp-input, .mp-select, .mp-textarea { width: 100%; padding: 13px 15px; background: var(--mp-input-bg); border: 1px solid var(--mp-input-border); border-radius: var(--mp-r-md); color: var(--mp-text); font-family: var(--mp-font-body); font-size: 14.5px; transition: border-color .25s var(--mp-ease), box-shadow .25s var(--mp-ease), background .25s var(--mp-ease); } .mp-input::placeholder, .mp-textarea::placeholder { color: var(--mp-input-ph); } .mp-input:focus, .mp-select:focus, .mp-textarea:focus { outline: none; border-color: var(--mp-copper-600); background: var(--mp-input-bg-focus); box-shadow: 0 0 0 3px rgba(184,91,20,.16); } .mp-textarea { resize: vertical; min-height: 124px; line-height: 1.6; } .mp-select { appearance: none; -webkit-appearance: none; padding-inline-end: 42px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23B85B14' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 15px center; background-size: 12px; } .mp-rtl .mp-select { background-position: left 15px center; } .mp-select option { background: var(--mp-surface-flat); color: var(--mp-text); } .mp-field.has-error .mp-input, .mp-field.has-error .mp-select, .mp-field.has-error .mp-textarea { border-color: #E2574C; box-shadow: 0 0 0 3px rgba(226,87,76,.14); } .mp-error { display: none; margin-top: 6px; font-size: 12.5px; color: #C4392E; } :root[data-theme="dark"] .mp-error { color: #F08A82; } .mp-field.has-error .mp-error { display: block; } .mp-check { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; } .mp-check input { position: absolute; opacity: 0; width: 0; height: 0; } .mp-check-box { flex: 0 0 20px; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--mp-input-border); border-radius: 5px; background: var(--mp-input-bg); display: inline-flex; align-items: center; justify-content: center; transition: all .22s var(--mp-ease); } .mp-check-box::after { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; color: #fff; opacity: 0; transform: scale(.5); transition: all .18s var(--mp-ease); } .mp-check input:checked + .mp-check-box { background: var(--mp-cta); border-color: transparent; } .mp-check input:checked + .mp-check-box::after { opacity: 1; transform: scale(1); } .mp-check input:focus-visible + .mp-check-box { outline: 2px solid var(--mp-copper-500); outline-offset: 2px; } .mp-check span:last-child { font-size: 13px; color: var(--mp-text-muted); line-height: 1.55; } .mp-field.has-error .mp-check-box { border-color: #E2574C; } .mp-segment { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mp-segment label { position: relative; display: block; cursor: pointer; } .mp-segment input { position: absolute; opacity: 0; width: 0; height: 0; } .mp-segment span { display: block; padding: 11px 8px; text-align: center; font-family: var(--mp-font-head); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: var(--mp-text-soft); background: var(--mp-input-bg); border: 1px solid var(--mp-input-border); border-radius: var(--mp-r-md); transition: all .22s var(--mp-ease); } .mp-segment input:checked + span { background: rgba(184,91,20,.16); border-color: var(--mp-copper-600); color: var(--mp-copper-700); box-shadow: var(--mp-emboss); } :root[data-theme="dark"] .mp-segment input:checked + span { color: var(--mp-copper-200); } .mp-segment input:focus-visible + span { outline: 2px solid var(--mp-copper-500); outline-offset: 2px; } .mp-feedback { display: none; padding: 18px 20px; border-radius: var(--mp-r-md); border: 1px solid; font-size: 14px; } .mp-feedback.is-visible { display: block; animation: mp-fade-up .4s var(--mp-ease); } .mp-feedback--ok { background: rgba(34,164,93,.10); border-color: rgba(34,164,93,.42); color: #157F44; } .mp-feedback--err { background: rgba(226,87,76,.10); border-color: rgba(226,87,76,.42); color: #B0362C; } :root[data-theme="dark"] .mp-feedback--ok { color: #7BDCA8; } :root[data-theme="dark"] .mp-feedback--err { color: #F0A49E; } .mp-feedback b { display: block; color: var(--mp-text); margin-bottom: 4px; font-family: var(--mp-font-head); } /* ═══════════════════════ 14. AKORDİYON ═══════════════════════ */ .mp-acc-item { border-bottom: 1px solid var(--mp-divider); } .mp-acc-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; padding: 21px 0; background: none; border: 0; cursor: pointer; text-align: start; font-family: var(--mp-font-head); font-size: 15.5px; font-weight: 600; color: var(--mp-text); transition: color .22s var(--mp-ease); } .mp-acc-head:hover { color: var(--mp-copper-600); } .mp-acc-head i { color: var(--mp-copper-600); transition: transform .3s var(--mp-ease); flex: 0 0 auto; } .mp-acc-item.is-open .mp-acc-head i { transform: rotate(45deg); } .mp-acc-body { overflow: hidden; max-height: 0; transition: max-height .38s var(--mp-ease); } .mp-acc-body > div { padding: 0 0 22px; color: var(--mp-text-muted); font-size: 14.5px; line-height: 1.75; } /* ═══════════════════════ 15. FOOTER ═══════════════════════ */ .mp-footer { position: relative; background: var(--mp-footer-bg); border-top: 1px solid var(--mp-border); color: var(--mp-text); transition: background .3s var(--mp-ease), color .3s var(--mp-ease); } .mp-footer-title { font-family: var(--mp-font-head); font-size: 12.5px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--mp-copper-700); margin-bottom: 20px; } :root[data-theme="dark"] .mp-footer-title { color: var(--mp-copper-400); } .mp-footer-link { display: inline-flex; align-items: center; gap: 9px; color: var(--mp-text-muted); font-size: 14px; transition: color .22s var(--mp-ease), gap .22s var(--mp-ease); } .mp-footer-link::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--mp-copper-700); flex: 0 0 5px; transition: background .22s var(--mp-ease); } .mp-footer-link:hover { color: var(--mp-text); gap: 13px; } .mp-footer-link:hover::before { background: var(--mp-copper-500); } .mp-social { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--mp-r-sm); border: 1px solid rgba(184,91,20,.30); background: rgba(184,91,20,.08); color: var(--mp-copper-700); transition: all .26s var(--mp-ease); } :root[data-theme="dark"] .mp-social { color: var(--mp-copper-300); } .mp-social:hover { background: var(--mp-cta); border-color: transparent; color: #fff; transform: translateY(-3px); box-shadow: var(--mp-glow); } /* ═══════════════════════ 16. MOBİL SABİT ÇUBUK ═══════════════════════ */ .mp-floatbar { position: fixed; bottom: 0; inset-inline: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--mp-nav-bg-stuck); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--mp-border); box-shadow: var(--mp-shadow-lg); transform: translateY(110%); transition: transform .34s var(--mp-ease), background .3s var(--mp-ease); } .mp-floatbar.is-visible { transform: translateY(0); } .mp-floatbar .mp-btn { padding: 13px 10px; font-size: 12px; } @media (min-width: 1024px) { .mp-floatbar { display: none !important; } } @media (max-width: 1023px) { body { padding-bottom: 74px; } } .mp-totop { position: fixed; inset-inline-end: 20px; bottom: 92px; z-index: 88; width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--mp-cta); color: #fff; border: 0; cursor: pointer; box-shadow: var(--mp-glow); opacity: 0; visibility: hidden; transform: translateY(12px); transition: all .3s var(--mp-ease); } .mp-totop.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .mp-totop:hover { transform: translateY(-3px); box-shadow: var(--mp-glow-lg); } @media (min-width: 1024px) { .mp-totop { bottom: 26px; } } /* ═══════════════════════ 17. HAREKET ═══════════════════════ */ .mp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--mp-ease), transform .7s var(--mp-ease); will-change: opacity, transform; } .mp-reveal.is-in { opacity: 1; transform: none; } @keyframes mp-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .mp-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } /* ═══════════════════════ 18. RTL ═══════════════════════ */ .mp-rtl .mp-eyebrow { letter-spacing: .10em; } .mp-rtl .mp-navlink, .mp-rtl .mp-btn, .mp-rtl .mp-label, .mp-rtl .mp-drawer-link { letter-spacing: 0; text-transform: none; } .mp-rtl .mp-brand-name { letter-spacing: .12em; } .mp-rtl .mp-brand-suffix { letter-spacing: .18em; } .mp-rtl .mp-logo-text b { letter-spacing: .06em; } .mp-rtl .mp-stat span { letter-spacing: .04em; } .mp-rtl .mp-footer-title { letter-spacing: .06em; } .mp-rtl .mp-brand-name, .mp-rtl .mp-brand-suffix, .mp-rtl .mp-logo-text { direction: ltr; } /* ═══════════════════════ 19. YARDIMCI ═══════════════════════ */ .mp-container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 20px; } @media (min-width: 768px) { .mp-container { padding-inline: 32px; } } @media (min-width: 1280px) { .mp-container { padding-inline: 40px; } } .mp-section { padding-block: var(--mp-sec-y); } .mp-section--tight { padding-block: var(--mp-sec-y-tight); } .mp-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Harita: koyu temada karart, açık temada doğal bırak */ .mp-map { filter: none; } :root[data-theme="dark"] .mp-map { filter: grayscale(.3) contrast(1.05) brightness(.85); } /* ═══════════════════════ 20. BASKI ═══════════════════════ */ @media print { body::before, body::after, .mp-topbar, .mp-nav, .mp-floatbar, .mp-totop, .mp-scroll-hint, .mp-drawer { display: none !important; } body { background: #fff; color: #000; padding: 0; } .mp-card, .mp-panel { border: 1px solid #ccc; background: #fff; box-shadow: none; } .mp-accent, .mp-stat b { -webkit-text-fill-color: #9E470E; color: #9E470E; background: none; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; } } /* ════════════════════ 21. TEMA EKLERİ (yama sonrası) ════════════════════ */ /* Görsel kenarını kart yüzeyine eriten katmanlar — temaya göre renk alır */ :root, :root[data-theme="dark"] { --mp-fade-1 : rgba(20,30,51,.96); --mp-fade-0 : rgba(20,30,51,0); --mp-wa-card: linear-gradient(150deg, rgba(34,164,93,.16), rgba(20,30,51,.90)); } :root[data-theme="light"] { --mp-fade-1 : rgba(255,255,255,.97); --mp-fade-0 : rgba(255,255,255,0); --mp-wa-card: linear-gradient(150deg, rgba(34,164,93,.14), rgba(255,255,255,.94)); } .mp-fade-start { background: linear-gradient(90deg, var(--mp-fade-1) 0%, var(--mp-fade-0) 55%); } .mp-fade-end { background: linear-gradient(270deg, var(--mp-fade-1) 0%, var(--mp-fade-0) 55%); } .mp-rtl .mp-fade-start { background: linear-gradient(270deg, var(--mp-fade-1) 0%, var(--mp-fade-0) 55%); } .mp-rtl .mp-fade-end { background: linear-gradient(90deg, var(--mp-fade-1) 0%, var(--mp-fade-0) 55%); } /* Breadcrumb'ın aktif adımı — görsel üstünde açık bakır, sayfa içinde koyu bakır */ .mp-crumb { color: var(--mp-copper-700); } :root[data-theme="dark"] .mp-crumb, .mp-onimage .mp-crumb { color: var(--mp-copper-400); } /* Tailwind bakır yardımcıları: krem zeminde WCAG AA için koyu tona kaydır. (Brand Kit: #F4F0EE üzerinde #B85B14 = 4.08:1 → yetersiz, #9E470E = 5.52:1) */ :root[data-theme="light"] .text-copper-300, :root[data-theme="light"] .text-copper-400, :root[data-theme="light"] .text-copper-500 { color: var(--mp-copper-700); } /* Görsel üstündeki koyu bölümlerde açık bakır korunur */ :root[data-theme="light"] .mp-onimage .text-copper-300 { color: var(--mp-copper-300); } :root[data-theme="light"] .mp-onimage .text-copper-400 { color: var(--mp-copper-400); } :root[data-theme="light"] .mp-onimage .text-copper-500 { color: var(--mp-copper-400); } /* Görsel üstü bölümlerde nötr Tailwind metin sınıfları da açık kalsın */ .mp-onimage .mp-brand-cat { color: var(--mp-copper-400); } /* Marka fotoğrafı: temaya göre alt eritme (kart yüzeyine bağlanır) */ .mp-brand-photo::after { background: linear-gradient(180deg, transparent 38%, rgba(15,23,42,.35) 70%, var(--mp-surface-2) 100%); } :root[data-theme="light"] .mp-brand-photo::after { background: linear-gradient(180deg, transparent 46%, rgba(255,255,255,.35) 76%, var(--mp-surface-2) 100%); } /* ════════════════════ 22. HUKUKİ SAYFALAR (uzun metin) ════════════════════ */ .mp-legal { max-width: 76ch; } .mp-legal > * + * { margin-top: 1.15em; } .mp-legal h2 { font-family: var(--mp-font-display); font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.25; color: var(--mp-text); margin-top: 2.6em; padding-top: 1.6em; border-top: 1px solid var(--mp-divider); scroll-margin-top: 120px; } .mp-legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; } .mp-legal h3 { font-family: var(--mp-font-head); font-size: 1.02rem; font-weight: 600; color: var(--mp-text); margin-top: 1.9em; } .mp-legal p, .mp-legal li { color: var(--mp-text-muted); line-height: 1.78; } .mp-legal a:not(.mp-btn):not(.mp-link) { color: var(--mp-copper-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(184,91,20,.45); transition: color .2s var(--mp-ease), text-decoration-color .2s var(--mp-ease); } :root[data-theme="dark"] .mp-legal a:not(.mp-btn):not(.mp-link) { color: var(--mp-copper-300); } .mp-legal a:not(.mp-btn):not(.mp-link):hover { text-decoration-color: currentColor; } .mp-legal ul, .mp-legal ol { padding-inline-start: 1.35em; } .mp-legal ul > li { list-style: none; position: relative; padding-inline-start: 1.1em; } .mp-legal ul > li + li, .mp-legal ol > li + li { margin-top: .6em; } .mp-legal ul > li::before { content: ''; position: absolute; inset-inline-start: 0; top: .72em; width: 5px; height: 5px; border-radius: 50%; background: var(--mp-copper-600); } .mp-legal ol { list-style: decimal; } .mp-legal ol > li::marker { color: var(--mp-copper-600); font-family: var(--mp-font-head); font-weight: 600; } .mp-legal strong { color: var(--mp-text); font-weight: 600; } /* Öne çıkan kutu (yasal uyarı, önemli not) */ .mp-legal-note { border: 1px solid var(--mp-border); border-inline-start: 3px solid var(--mp-copper-600); border-radius: var(--mp-r-md); background: rgba(184,91,20,.07); padding: 18px 20px; font-size: .93rem; } .mp-legal-note p { color: var(--mp-text-soft); margin: 0; } .mp-legal-note p + p { margin-top: .7em; } /* Tanım listesi (veri kategorileri, çerez amaçları) */ .mp-legal dl { display: grid; gap: 0; } .mp-legal dt { font-family: var(--mp-font-head); font-size: .82rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-copper-700); padding-top: 1.1em; border-top: 1px solid var(--mp-divider); } :root[data-theme="dark"] .mp-legal dt { color: var(--mp-copper-400); } .mp-legal dd { margin: .45em 0 1.1em; color: var(--mp-text-muted); line-height: 1.7; } /* Tablo (çerez envanteri) — dar ekranda kendi kabında kayar */ .mp-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--mp-border-soft); border-radius: var(--mp-r-md); background: linear-gradient(158deg, var(--mp-surface-soft-1), var(--mp-surface-soft-2)); } .mp-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: .88rem; } .mp-table th, .mp-table td { padding: 13px 16px; text-align: start; vertical-align: top; } .mp-table thead th { font-family: var(--mp-font-head); font-size: .74rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--mp-copper-700); border-bottom: 1px solid var(--mp-border); white-space: nowrap; } :root[data-theme="dark"] .mp-table thead th { color: var(--mp-copper-400); } .mp-table tbody tr + tr td { border-top: 1px solid var(--mp-divider); } .mp-table td { color: var(--mp-text-muted); line-height: 1.6; } .mp-table td:first-child { color: var(--mp-text); font-family: var(--mp-font-head); font-size: .82rem; font-weight: 600; white-space: nowrap; } /* İçindekiler — geniş ekranda yapışkan */ .mp-toc { font-size: .88rem; } .mp-toc-title { font-family: var(--mp-font-head); font-size: .74rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--mp-copper-700); margin-bottom: 14px; } :root[data-theme="dark"] .mp-toc-title { color: var(--mp-copper-400); } .mp-toc a { display: block; padding: 7px 0 7px 14px; border-inline-start: 2px solid var(--mp-divider); color: var(--mp-text-muted); line-height: 1.45; transition: color .2s var(--mp-ease), border-color .2s var(--mp-ease); } .mp-toc a:hover { color: var(--mp-text); border-inline-start-color: var(--mp-copper-600); } .mp-toc a.is-current { color: var(--mp-copper-700); border-inline-start-color: var(--mp-copper-600); } :root[data-theme="dark"] .mp-toc a.is-current { color: var(--mp-copper-300); } @media (min-width: 1024px) { .mp-toc-sticky { position: sticky; top: 108px; max-height: calc(100vh - 140px); overflow-y: auto; } } /* Son güncelleme rozeti */ .mp-legal-meta { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mp-font-head); font-size: .76rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mp-text-muted); } .mp-legal-meta i { color: var(--mp-copper-600); } @media print { .mp-toc, .mp-legal-note .mp-btn { display: none !important; } .mp-legal { max-width: none; } .mp-legal h2 { break-after: avoid; } .mp-table-wrap { overflow: visible; border: 1px solid #ccc; } } /* ════════════════ 23. RTL — BİDİ YALITIMI ════════════════ Arapça'da paragraf yönü sağdan sola olduğu için, Latin harf ve rakam dizileri (telefon, e-posta, adres, tarih) nötr karakterler yüzünden ters okunur: "+90 533 945 21 33" → "33 21 945 533 90+". Çözüm: bu diziler dir="ltr" ile ayrı bir bidi izolasyonuna alınır. HTML tarafında ilgili düğümlere dir="ltr" verildi; aşağıdakiler güvence katmanı ve HTML'de işaretlenemeyen durumlar içindir. */ /* Marka kilidi RTL'de aynalanmaz — Brand Kit: amblem ile yazı ayrılamaz, yatay kilidin dizilişi sabittir. */ .mp-rtl .mp-logo { direction: ltr; } /* Sayaçlar: "50+" → "+50" olmasın */ .mp-rtl .mp-stat b { direction: ltr; unicode-bidi: isolate; } /* Telefon / e-posta / URL alanları LTR yazılır, hizası RTL düzenle uyumlu kalır */ .mp-rtl input[type="tel"], .mp-rtl input[type="email"], .mp-rtl input[type="url"] { direction: ltr; text-align: right; } .mp-rtl input[type="tel"]::placeholder, .mp-rtl input[type="email"]::placeholder, .mp-rtl input[type="url"]::placeholder { direction: ltr; } /* Çerez tablosunun ilk sütunu teknik ad içerir (mp_lang, Google Fonts…) */ .mp-rtl .mp-table td:first-child { direction: ltr; unicode-bidi: isolate; } /* Dil kodu rozetleri (TR, EN, AR…) */ .mp-rtl .mp-lang-code { direction: ltr; unicode-bidi: isolate; } /* Tarih ve saat damgaları */ .mp-rtl time, .mp-rtl .mp-legal-meta time { direction: ltr; unicode-bidi: isolate; } /* Ürün kodu / teslim şekli çipleri (EXW, FOB Mersin, CIF, DAP) */ .mp-rtl .mp-chip { unicode-bidi: isolate; } /* ════════════════ 24. BÖLÜM AYRIMI (masaüstü) ════════════════ Marka tek renk üzerine kurulu olduğu için bölümler arasında renk farkı yaratmıyoruz. Bunun yerine iki sinyal kullanılıyor: 1) Dönüşümlü yüzey — .mp-band taşıyan bölüm bir tık yükseltilmiş görünür 2) Bakır saç teli — bandın üst/alt kenarında ortası parlayan 1px çizgi Mobilde her ikisi de kapalı: dar ekranda bölümler zaten arka arkaya okunur ve ince çizgiler gürültü yaratır. */ @media (min-width: 1024px) { .mp-band, .mp-band--strong { position: relative; /* Kenarlarda erime yok — sınır net olsun ki saç teli oturabilsin */ background: var(--mp-band); } .mp-band::before, .mp-band::after, .mp-band--strong::before, .mp-band--strong::after { content: ''; position: absolute; inset-inline: 0; height: 1px; pointer-events: none; background: linear-gradient(90deg, transparent 0%, rgba(184,91,20,.32) 22%, rgba(184,91,20,.72) 50%, rgba(184,91,20,.32) 78%, transparent 100%); } .mp-band::before, .mp-band--strong::before { top: 0; } .mp-band::after, .mp-band--strong::after { bottom: 0; } /* Açık temada yükseltilmiş yüzey beyaza yaklaşır, çizgi biraz koyulaşır */ :root[data-theme="light"] .mp-band::before, :root[data-theme="light"] .mp-band::after { background: linear-gradient(90deg, transparent 0%, rgba(158,71,14,.26) 22%, rgba(158,71,14,.60) 50%, rgba(158,71,14,.26) 78%, transparent 100%); } /* Üst banda geçişte (hero/sayaç altı) yalnız alt çizgi kalsın */ .mp-band--top { position: relative; } .mp-band--top::after { content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(184,91,20,.45) 50%, transparent); } /* Bölüm başlığı ile içerik arasındaki nefes biraz daralsın */ .mp-section > .mp-container > header { margin-bottom: 3rem; } } /* Mobil: ayrım sinyali kapalı, sade akış */ @media (max-width: 1023px) { .mp-band, .mp-band--strong { background: linear-gradient(180deg, transparent, var(--mp-band) 14%, var(--mp-band) 86%, transparent); } }