/* ========================================================================== DGA Havacılık — Header / Footer Kaynak: 02-SAYFA-UYGULAMA.md "Global — Header / Footer", 01-TASARIM-SISTEMI.md. Kural: yalnızca tokens.css değişkenleri kullanılır — ham hex/px YASAK. ========================================================================== */ /* -------------------------------------------------------------------------- 0. İkon ortak boyutu -------------------------------------------------------------------------- */ .dga-icon { flex-shrink: 0; } /* -------------------------------------------------------------------------- 0. Header — tamamı (duyuru + ana satır + kaynaklar şeridi) sabit kalır. ÖNEMLİ: sticky yalnızca .dga-header__row'a verilirse "kayma alanı" (containing block) en yakın normal-flow parent'ı (.dga-header, yalnızca ~100-150px yüksek) ile sınırlı kalır — sayfa birkaç yüz px kaydırılınca element parent'ının sınırını aşıp normal (sticky olmayan) bir kutu gibi kaybolur. Sticky bunun yerine burada, parent'ı (tüm sayfa yüksekliği) olan .dga-header'a uygulanır, böylece tüm sayfa boyunca üstte kalır. -------------------------------------------------------------------------- */ .dga-header { position: sticky; top: 0; z-index: 40; } /* -------------------------------------------------------------------------- 1. Duyuru şeridi (kırmızı, tam genişlik, tek satır, ortalı) -------------------------------------------------------------------------- */ .dga-announcement { background: var(--color-primary); color: var(--color-surface); } .dga-announcement__inner { display: flex; justify-content: center; align-items: center; padding-block: var(--space-1); } .dga-announcement__text { margin: 0; font-size: 13px; font-weight: 600; text-align: center; line-height: 1.4; } .dga-announcement__link { color: var(--color-surface); text-decoration: underline; text-underline-offset: 2px; font-weight: 700; margin-inline-start: var(--space-1); white-space: nowrap; } .dga-announcement__link:hover { color: var(--red-300); } /* -------------------------------------------------------------------------- 2. Ana satır (logo / nav / arama / hesap / sepet) -------------------------------------------------------------------------- */ .dga-header__row { background: var(--color-surface); box-shadow: var(--shadow-header); position: relative; z-index: 1; } .dga-header__inner { display: flex; align-items: center; gap: var(--space-4); padding-block: var(--space-2); } .dga-logo { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; } .dga-logo img { height: 40px; width: auto; } .dga-logo__wordmark { font-family: var(--font-sans); font-weight: 800; font-size: 20px; letter-spacing: -0.01em; color: var(--color-text); } .dga-logo__wordmark--dark { color: var(--color-surface); } .dga-logo__accent { color: var(--color-primary); } .dga-header__nav { flex: 1; min-width: 0; } .dga-header__actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* -------------------------------------------------------------------------- 3-4. Ana nav + mega menü paneli — TAŞINDI: assets/css/mega-menu.css'te tanımlı (dga_render_primary_menu() / dga_render_mega_panel() çıktısını .is-open JS class'ı ile birlikte o dosya stilliyor; burada tekrar tanımlanırsa iki dosya çakışır — bilinçli olarak buradan kaldırıldı). -------------------------------------------------------------------------- */ /* -------------------------------------------------------------------------- 5. Arama pill'i + kategori dropdown -------------------------------------------------------------------------- */ .dga-search { display: flex; align-items: center; background: var(--color-surface-alt); border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); padding-inline-start: var(--space-2); overflow: hidden; } .dga-search__select { border: none; background: transparent; font-size: 13px; font-weight: 600; color: var(--color-text-muted); padding-block: var(--space-1); padding-inline-end: var(--space-1); border-inline-end: 1px solid var(--color-border-strong); max-width: 120px; } .dga-search__input { border: none; background: transparent; font-size: 14px; color: var(--color-text); padding: var(--space-1) var(--space-2); width: 180px; min-width: 0; } .dga-search__input::placeholder { color: var(--color-text-faint); } .dga-search__submit { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 3px; flex-shrink: 0; border: none; border-radius: var(--radius-icon); background: var(--color-primary); color: var(--color-surface); cursor: pointer; transition: background var(--transition), transform var(--transition); } .dga-search__submit:hover { background: var(--color-primary-hover); transform: translateY(-1px); } /* -------------------------------------------------------------------------- 6. Hesap / sepet / hamburger -------------------------------------------------------------------------- */ .dga-header__link { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; color: var(--color-text); font-size: 13px; font-weight: 600; padding: var(--space-1); position: relative; } .dga-header__link:hover { color: var(--color-primary); } .dga-header__link-text { white-space: nowrap; } .dga-header__link--cart { position: relative; } .dga-cart__count { position: absolute; top: -6px; right: -8px; min-width: 18px; height: 18px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-icon); background: var(--color-primary); color: var(--color-surface); font-size: 11px; font-weight: 700; line-height: 1; } /* .dga-hamburger — TAŞINDI: assets/css/mobile-menu.css'te tanımlı, burada tekrar tanımlanırsa iki dosya çakışır (aynı desen: bkz. mega-menu.css taşıma notu). */ /* -------------------------------------------------------------------------- 7. Gri kaynaklar şeridi -------------------------------------------------------------------------- */ .dga-resources-bar { background: var(--color-surface-alt); border-top: 1px solid var(--color-border); } .dga-resources-bar__list { display: flex; align-items: center; gap: var(--space-4); list-style: none; margin: 0; padding: var(--space-1) 0; overflow-x: auto; } .dga-resources-bar__list a { font-size: 12px; font-weight: 600; color: var(--color-text-muted); text-decoration: none; white-space: nowrap; } .dga-resources-bar__list a:hover { color: var(--color-primary); } /* -------------------------------------------------------------------------- 8. Mobil hamburger drawer — kabuk (.dga-mobile-drawer/__header/__close) TAŞINDI: assets/css/mobile-menu.css'te tanımlı. Yalnızca o dosyanın stillemediği iç içerik alanı burada kalıyor. -------------------------------------------------------------------------- */ .dga-mobile-drawer__content { padding: var(--space-3) var(--gutter-mobile); } /* ========================================================================== FOOTER ========================================================================== */ .dga-footer { background: var(--ink-900); color: var(--paper-100); } .dga-footer a { color: inherit; } /* -------------------------------------------------------------------------- 9. İletişim & güven şeridi (4 ikon kutu) -------------------------------------------------------------------------- */ .dga-footer__trust { border-bottom: 1px solid var(--ink-600); } .dga-footer__trust-inner { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); padding-block: var(--space-4); } @media (min-width: 768px) { .dga-footer__trust-inner { grid-template-columns: repeat(4, 1fr); } } .dga-footer__trust-item { display: flex; align-items: flex-start; gap: var(--space-2); } .dga-footer__trust-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-icon); background: var(--ink-800); color: var(--color-primary); } .dga-footer__trust-body { display: flex; flex-direction: column; gap: 2px; font-size: 14px; font-weight: 700; min-width: 0; } .dga-footer__trust-body a { text-decoration: none; } .dga-footer__trust-body a:hover { color: var(--red-300); } .dga-footer__trust-body small { font-size: 12px; font-weight: 500; color: var(--ink-400); } /* -------------------------------------------------------------------------- 10. Sütunlar (marka + wp_nav_menu('footer') + bülten) -------------------------------------------------------------------------- */ .dga-footer__main { padding-block: var(--space-6); } .dga-footer__columns { display: grid; grid-template-columns: 1fr; gap: var(--space-4); } @media (min-width: 768px) { .dga-footer__columns { grid-template-columns: 1.4fr 1fr 1fr 1fr 1.4fr; gap: var(--space-3); } } .dga-footer__logo { display: inline-flex; } .dga-footer__logo img { height: 34px; width: auto; } .dga-footer__desc { margin: var(--space-2) 0 0; font-size: 13px; line-height: 1.6; color: var(--ink-400); max-width: 32ch; } .dga-footer__social { display: flex; gap: var(--space-1); list-style: none; margin: var(--space-3) 0 0; padding: 0; } .dga-footer__social a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-icon); background: var(--ink-800); transition: background var(--transition), color var(--transition); } .dga-footer__social a:hover { background: var(--color-primary); color: var(--paper-0); } .dga-footer__col-title { margin: 0 0 var(--space-2); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--paper-0); cursor: default; list-style: none; } .dga-footer__col-title::-webkit-details-marker { display: none; } .dga-footer__col-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); } .dga-footer__col-list a { font-size: 13px; color: var(--ink-400); text-decoration: none; } .dga-footer__col-list a:hover { color: var(--paper-0); } .dga-footer__newsletter-desc { margin: 0 0 var(--space-2); font-size: 13px; color: var(--ink-400); line-height: 1.5; } .dga-footer__newsletter-row { display: flex; border-radius: var(--radius-pill); background: var(--ink-800); border: 1px solid var(--ink-600); overflow: hidden; } .dga-footer__newsletter-input { flex: 1; min-width: 0; border: none; background: transparent; color: var(--paper-0); font-size: 13px; padding: var(--space-2); } .dga-footer__newsletter-input::placeholder { color: var(--ink-400); } .dga-footer__newsletter-submit { border: none; border-radius: var(--radius-pill); background: var(--color-primary); color: var(--paper-0); font-size: 13px; font-weight: 700; padding: 0 var(--space-3); cursor: pointer; transition: background var(--transition); } .dga-footer__newsletter-submit:hover { background: var(--color-primary-hover); } .dga-footer__newsletter-kvkk { margin-top: var(--space-2); font-size: 11px; line-height: 1.5; color: var(--ink-400); } .dga-footer__newsletter-kvkk label { display: flex; align-items: flex-start; gap: var(--space-1); } .dga-footer__newsletter-kvkk input { margin-top: 3px; } .dga-footer__newsletter-kvkk a { text-decoration: underline; } /* -------------------------------------------------------------------------- 11. Ödeme & güven şeridi -------------------------------------------------------------------------- */ .dga-footer__payment { border-top: 1px solid var(--ink-600); border-bottom: 1px solid var(--ink-600); } .dga-footer__payment-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding-block: var(--space-3); } .dga-footer__payment-methods { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .dga-footer__payment-label { font-size: 12px; font-weight: 700; color: var(--ink-400); text-transform: uppercase; letter-spacing: 0.04em; } .dga-footer__payment-list { display: flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; } .dga-footer__payment-item { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 28px; padding-inline: var(--space-1); background: var(--ink-800); font-size: 10px; font-weight: 700; letter-spacing: 0.02em; color: var(--paper-100); } .dga-footer__badges { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .dga-footer__badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 600; color: var(--ink-400); } .dga-footer__badge .dga-icon { color: var(--green-600); } /* -------------------------------------------------------------------------- 12. Yasal satır ÖNEMLİ — iki AYRI sabit (position: fixed) öğe bu satırın (sayfanın son satırı, tam altta) İKİ kenarına da biniyordu, sayfa en alta kaydırıldığında: 1) SAĞDA — "Teklif Sepeti" FAB'ı (components/teklif-sepeti.css .dga-teklif-sepeti-fab, right/bottom: var(--space-3)=24px, 56px kare, koşulsuz TÜM sayfalarda basılır): .dga-container'ın gutter'ı (mobilde 16px, masaüstünde 48px) FAB'ın toplam sağ-kenar payından (24px boşluk + 56px genişlik = 80px) AZ olduğu için, konteynerin kendi 1440px max-width'inden geniş ekranlarda (~1504px'e kadar) DAHİL, hemen hemen HER genişlikte "Garanti Politikası" dahil linklerin ÜSTÜNE biniyordu. 2) SOLDA — "Yukarı Çık" butonu (components/scroll-top.css .dga-scroll-top, left/bottom: var(--space-3)=24px, 44px kare): aynı gutter'lardan az kaldığı için telif hakkı ("© ... DGA Havacılık") metninin ÜSTÜNE biniyordu. Düzeltme — iki parça: a) <768px (mobil — alt gezinme çubuğunun kendi 767.98px eşiğiyle AYNI): her iki sabit öğe de zaten mobile-bottom-nav.css'in çakışma düzeltmesiyle DAHA YUKARI itiliyor (bkz. o dosyadaki not) — burada YALNIZCA bu satırın ALT boşluğu, o itilmiş bandın TAMAMINI (56px bar + var(--space-2) + kendi yüksekliği) karşılayacak kadar büyütülür, böylece satırın içeriği dikeyde o bandın ÜSTÜNE çıkar (yatay boşluğa gerek kalmaz — dar mobil genişlikte 80-88px'lik yatay boşluk içeriği sıkıştırırdı). b) ≥768px (tablet + masaüstü — mobil alt nav artık yok, iki sabit öğe de kendi varsayılan sol/sağ-alt köşesinde): bu satıra her iki öğenin footprint'ini karşılayacak SOL + SAĞ boşluk eklenir. Bu genişlik, konteynerin gutter'ının 768-1023px arasında YİNE 16px (mobil gutter) olduğu "tablet" aralığını da kapsar — önceden yalnızca ≥1024px'te düzeltiliyordu, 768-1023px arası boşlukta çakışma DEVAM ediyordu. teklif-sepeti.css/scroll-top.css dosyalarının KENDİ konum kurallarına dokunulmaz, yalnızca bu satırın iç boşluğu büyütülür. -------------------------------------------------------------------------- */ .dga-footer__legal-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); padding-block: var(--space-3); } @media (max-width: 767.98px) { .dga-footer__legal-inner { padding-bottom: calc(56px + var(--space-2) + 56px); /* bkz. not (a) — en büyük (FAB) öğeye göre */ } } @media (min-width: 768px) { .dga-footer__legal-inner { padding-inline-start: 80px; /* 44px "Yukarı Çık" + 24px boşluğu + 12px ekstra tampon */ padding-inline-end: 88px; /* 56px "Teklif Sepeti" FAB + 24px boşluğu + 8px ekstra tampon */ } } .dga-footer__copyright { margin: 0; font-size: 12px; color: var(--ink-400); } .dga-footer__legal-list { display: flex; flex-wrap: wrap; gap: var(--space-3); list-style: none; margin: 0; padding: 0; } .dga-footer__legal-list a { font-size: 12px; color: var(--ink-400); text-decoration: none; } .dga-footer__legal-list a:hover { color: var(--paper-0); } /* ========================================================================== 13. Responsive — mobil (<1024px): hamburger görünür, ana nav/kaynaklar şeridi gizlenir (mobil drawer devralır); footer sütunları akordeon. ========================================================================== */ @media (max-width: 1023.98px) { .dga-header__nav, .dga-search__select, .dga-header__link-text { display: none; } .dga-search { display: none; } .dga-hamburger { display: inline-flex; } .dga-header__inner { justify-content: space-between; } } @media (min-width: 1024px) { /* Akordeon yalnızca mobilde anlamlı; masaüstünde her zaman açık ve tıklanamaz görünür. Yalnızca

(wp_nav_menu('footer') sütunları) hedeflenir — bülten sütunundaki

bu seçiciye girmez, dokunulmaz. */ details.dga-footercol > summary.dga-footercol-title { pointer-events: none; } } @media (max-width: 767.98px) { details.dga-footercol > summary.dga-footercol-title { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-1); cursor: pointer; } details.dga-footercol > summary.dga-footercol-title::after { content: "+"; font-weight: 700; } details.dga-footercol[open] > summary.dga-footercol-title::after { content: "\2212"; } details.dga-footercol .dga-footercol-list { padding-block: var(--space-1) var(--space-2); } }