/* ================================================ footer.css — Tüm sayfalarda ortak footer stili Her sayfanın içinde link edin: ================================================ */ .site-footer { font-family: 'Barlow', sans-serif; background: #0a0e1a; } /* ── Üst şerit ── */ .sf-topbar { background: #1565C0; padding: 16px 56px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .sf-topbar-text { font-size: 14px; font-weight: 400; color: #fff; letter-spacing: .2px; } .sf-topbar-text strong { font-weight: 700; } .sf-topbar-btns { display: flex; gap: 10px; } .sf-btn-wa { padding: 9px 20px; border-radius: 5px; background: #25D366; color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; transition: background .2s; } .sf-btn-wa:hover { background: #1ebe57; } .sf-btn-phone { padding: 9px 20px; border-radius: 5px; background: rgba(255,255,255,.12); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(255,255,255,.2); transition: background .2s; } .sf-btn-phone:hover { background: rgba(255,255,255,.22); } /* ── Ana alan ── */ .sf-main { padding: 52px 56px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; border-bottom: 1px solid rgba(255,255,255,.07); } /* Logo & marka kolonu */ .sf-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 24px; font-weight: 900; letter-spacing: 3px; color: #fff; text-transform: uppercase; text-decoration: none; display: flex; align-items: center; gap: 8px; margin-bottom: 4px; } .sf-logo-bar { width: 22px; height: 2px; background: #1565C0; border-radius: 2px; flex-shrink: 0; } .sf-logo-sub { font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.2); margin-bottom: 16px; } .sf-tagline { font-size: 13px; color: rgba(255,255,255,.38); line-height: 1.8; max-width: 240px; margin-bottom: 22px; } .sf-contacts { display: flex; flex-direction: column; gap: 10px; } .sf-contact-item { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; color: rgba(255,255,255,.45); line-height: 1.5; } .sf-contact-item svg { width: 14px; height: 14px; flex-shrink: 0; margin-top: 1px; stroke: rgba(255,255,255,.25); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .sf-contact-item a { color: rgba(255,255,255,.55); text-decoration: none; transition: color .2s; } .sf-contact-item a:hover { color: #fff; } /* Link kolonları */ .sf-col-title { font-size: 9px; font-weight: 700; letter-spacing: 3px; text-transform: uppercase; color: rgba(255,255,255,.22); margin-bottom: 18px; } .sf-col-links { display: flex; flex-direction: column; gap: 10px; } .sf-col-link { font-size: 13px; color: rgba(255,255,255,.42); text-decoration: none; display: flex; align-items: center; gap: 7px; transition: color .2s; } .sf-col-link::before { content: ''; width: 4px; height: 4px; border-radius: 50%; background: rgba(255,255,255,.12); flex-shrink: 0; transition: background .2s; } .sf-col-link:hover { color: #fff; } .sf-col-link:hover::before { background: #1565C0; } /* Alt bar */ .sf-bottom { padding: 18px 56px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } .sf-copy { font-size: 11px; color: rgba(255,255,255,.16); letter-spacing: .3px; } .sf-bottom-links { display: flex; gap: 18px; } .sf-bottom-link { font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,255,.16); text-decoration: none; transition: color .2s; } .sf-bottom-link:hover { color: rgba(255,255,255,.5); } /* ── Responsive ── */ @media (max-width: 900px) { .sf-topbar { padding: 14px 20px; flex-direction: column; align-items: flex-start; } .sf-main { padding: 36px 20px 28px; grid-template-columns: 1fr 1fr; gap: 28px; } .sf-brand { grid-column: 1 / -1; } .sf-tagline { max-width: 100%; } .sf-bottom { padding: 16px 20px; } } @media (max-width: 540px) { .sf-topbar { padding: 12px 16px; gap: 10px; } .sf-topbar-text { font-size: 13px; } .sf-topbar-btns { flex-direction: column; width: 100%; gap: 8px; } .sf-btn-wa, .sf-btn-phone { text-align: center; padding: 10px; width: 100%; } .sf-main { grid-template-columns: 1fr 1fr; gap: 20px; padding: 28px 16px 20px; } .sf-brand { grid-column: 1 / -1; } .sf-tagline { max-width: 100%; font-size: 12px; } .sf-logo { font-size: 20px; } .sf-bottom { padding: 14px 16px; flex-direction: column; align-items: flex-start; gap: 8px; } .sf-copy { font-size: 10px; } }