/* ============================================================ e-kurs · YEŞİL HEADER (ortak stil) Bu dosyayı her sayfanın kısmında çağır: Renk değişikliği tek yerden: aşağıdaki :root değişkenleri. ============================================================ */ :root{ --yesil:#4ca800; --yesil-koyu:#3d8a00; --turuncu:#ff8a00; --giris-bg:#1f4d2e; } .ek-header *{ box-sizing:border-box; margin:0; padding:0; } .ek-header{ background:var(--yesil); box-shadow:0 2px 8px rgba(0,0,0,.12); position:relative; z-index:50; font-family:"Segoe UI","Trebuchet MS",Tahoma,sans-serif; } .ek-bar{ max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:22px; padding:14px 24px; } .ek-logo{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; background:#fff; border-radius:12px; padding:8px 14px; text-decoration:none; box-shadow:0 1px 3px rgba(0,0,0,.15); } .ek-logo svg{ width:26px; height:26px; } .ek-logo .word{ font-size:22px; font-weight:800; letter-spacing:-.5px; color:#2a2a2a; } .ek-logo .word b{ color:var(--turuncu); } .ek-search{ flex:1 1 auto; max-width:520px; margin:0 auto; display:flex; align-items:center; background:#fff; border-radius:30px; padding:4px 4px 4px 18px; box-shadow:inset 0 1px 2px rgba(0,0,0,.08); } .ek-search .ico-search{ width:20px; height:20px; color:#9aa39a; flex:0 0 auto; } .ek-search input{ flex:1 1 auto; border:none; outline:none; font-size:15px; padding:10px 12px; background:transparent; color:#333; } .ek-search input::placeholder{ color:#a7afa3; } .ek-search button{ flex:0 0 auto; width:40px; height:40px; border:none; border-radius:50%; background:var(--yesil-koyu); color:#fff; cursor:pointer; display:grid; place-items:center; } .ek-search button svg{ width:18px; height:18px; } .ek-actions{ flex:0 0 auto; display:flex; align-items:center; gap:12px; } .ek-btn{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; border-radius:24px; padding:9px 18px; text-decoration:none; cursor:pointer; border:none; } .ek-btn--giris{ background:var(--giris-bg); color:#fff; } .ek-btn--giris:hover{ background:#163823; } .ek-btn--giris svg{ width:16px; height:16px; } .ek-btn--uyelik{ background:#fff; color:var(--yesil); } .ek-btn--uyelik:hover{ box-shadow:0 2px 8px rgba(0,0,0,.18); } /* alt menü + dropdown */ .ek-nav{ display:flex; justify-content:center; gap:6px; padding:0 24px; } .ek-nav > li{ list-style:none; position:relative; } .ek-nav > li > a{ display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none; font-size:16px; font-weight:600; padding:12px 16px 14px; cursor:pointer; } .ek-nav > li > a .caret{ width:11px; height:11px; transition:transform .15s; } .ek-nav > li:hover > a{ background:rgba(0,0,0,.08); } .ek-nav > li:hover > a .caret{ transform:rotate(180deg); } .mega{ position:absolute; left:0; top:100%; background:#fff; border-radius:0 0 12px 12px; box-shadow:0 12px 30px rgba(0,0,0,.18); padding:22px 26px; display:none; grid-template-columns:repeat(3, minmax(180px,1fr)); gap:26px; min-width:620px; } .ek-nav > li:hover .mega, .ek-nav > li.open .mega{ display:grid; } .mega h4{ font-size:13px; text-transform:uppercase; letter-spacing:.5px; color:#9aa39a; margin-bottom:10px; font-weight:800; } .mega a{ display:block; text-decoration:none; color:#37502c; font-size:15px; font-weight:600; padding:6px 0; } .mega a:hover{ color:var(--yesil-koyu); } .mega .sub{ padding-left:12px; } .mega .sub a{ font-size:13.5px; font-weight:500; color:#6b7d5e; padding:4px 0; } @media (max-width:900px){ .ek-bar{ flex-wrap:wrap; gap:12px; } .ek-search{ order:3; flex-basis:100%; max-width:none; } .ek-actions{ margin-left:auto; } .ek-nav{ flex-wrap:wrap; justify-content:flex-start; } .mega{ position:static; min-width:0; box-shadow:none; grid-template-columns:1fr; padding:10px 16px; } }