/* ========================================================= DADAYLILAR MOBILE MENU COMPLETELY ISOLATED ========================================================= */ #dly26x-menu { display: none !important; } /* ========================================================= MOBILE ONLY ========================================================= */ @media only screen and (max-width: 767px) { /* PAGE LOCK */ html.dly26x-body-lock, body.dly26x-body-lock { overflow: hidden !important; height: 100% !important; } /* ===================================================== FULL SCREEN MENU ===================================================== */ #dly26x-menu { position: fixed !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100vw !important; height: 100dvh !important; margin: 0 !important; padding: 0 !important; display: block !important; visibility: hidden !important; opacity: 0 !important; transform: translate3d(100%, 0, 0) !important; z-index: 2147483647 !important; background: #052f55 !important; overflow: hidden !important; pointer-events: none !important; transition: transform .38s cubic-bezier(.76,0,.24,1), opacity .22s ease, visibility .38s ease !important; } #dly26x-menu.dly26x-open { visibility: visible !important; opacity: 1 !important; transform: translate3d(0,0,0) !important; pointer-events: auto !important; } #dly26x-menu, #dly26x-menu * { box-sizing: border-box !important; } /* ===================================================== PANEL ===================================================== */ #dly26x-menu .dly26x-panel { position: relative !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: max(22px, env(safe-area-inset-top)) 28px max(18px, env(safe-area-inset-bottom)) 28px !important; display: flex !important; flex-direction: column !important; background: radial-gradient( circle at 100% 0%, rgba(255,255,255,.075), transparent 37% ), linear-gradient( 145deg, #062b4d 0%, #06375f 52%, #052b4c 100% ) !important; overflow: hidden !important; } /* ===================================================== TOP ===================================================== */ #dly26x-menu .dly26x-top { width: 100% !important; min-height: 86px !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 0 18px 0 !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; border-bottom: 1px solid rgba(255,255,255,.16) !important; } #dly26x-menu .dly26x-brand { display: block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 27px !important; line-height: .9 !important; font-weight: 800 !important; letter-spacing: .5px !important; text-decoration: none !important; } #dly26x-menu .dly26x-brand span { display: block !important; margin: 8px 0 0 0 !important; padding: 0 !important; color: rgba(255,255,255,.86) !important; font-size: 12px !important; line-height: 1 !important; font-weight: 600 !important; letter-spacing: 7px !important; } /* CLOSE BUTTON */ #dly26x-menu #dly26x-close { appearance: none !important; -webkit-appearance: none !important; position: relative !important; width: 48px !important; height: 48px !important; flex: 0 0 48px !important; margin: 0 !important; padding: 0 !important; display: block !important; border: 1px solid rgba(255,255,255,.35) !important; border-radius: 50% !important; background: transparent !important; box-shadow: none !important; cursor: pointer !important; } #dly26x-menu .dly26x-close-line { position: absolute !important; top: 50% !important; left: 50% !important; width: 21px !important; height: 2px !important; background: #ffffff !important; } #dly26x-menu .dly26x-close-a { transform: translate(-50%,-50%) rotate(45deg) !important; } #dly26x-menu .dly26x-close-b { transform: translate(-50%,-50%) rotate(-45deg) !important; } /* ===================================================== MAIN SCROLLABLE AREA ===================================================== */ #dly26x-menu .dly26x-main-area { width: 100% !important; flex: 1 1 auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch !important; } #dly26x-menu .dly26x-nav { display: block !important; width: 100% !important; margin: 0 !important; padding: 18px 0 22px 0 !important; } #dly26x-menu .dly26x-group { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== MAIN ROW ===================================================== */ #dly26x-menu .dly26x-row { appearance: none !important; -webkit-appearance: none !important; position: relative !important; width: 100% !important; min-height: 68px !important; margin: 0 !important; padding: 0 !important; display: grid !important; grid-template-columns: 30px minmax(0,1fr) 18px !important; align-items: center !important; column-gap: 10px !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.11) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; color: #ffffff !important; text-align: left !important; text-decoration: none !important; float: none !important; cursor: pointer !important; touch-action: manipulation !important; -webkit-tap-highlight-color: transparent !important; } /* GOLD LINE */ #dly26x-menu .dly26x-rule { display: block !important; width: 22px !important; height: 1px !important; margin: 0 !important; padding: 0 !important; background: #d6a92c !important; } /* TEXT */ #dly26x-menu .dly26x-text { display: flex !important; flex-direction: column !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } #dly26x-menu .dly26x-text strong { display: block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; line-height: 1.05 !important; font-weight: 600 !important; white-space: nowrap !important; } #dly26x-menu .dly26x-text small { display: block !important; margin: 5px 0 0 0 !important; padding: 0 !important; color: rgba(255,255,255,.50) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.7px !important; white-space: nowrap !important; } /* ARROW */ #dly26x-menu .dly26x-chevron { display: block !important; margin: 0 !important; padding: 0 !important; color: #d6a92c !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 25px !important; line-height: 1 !important; font-weight: 300 !important; text-align: right !important; transition: transform .25s ease !important; } #dly26x-menu .dly26x-group.dly26x-sub-open > .dly26x-row .dly26x-chevron { transform: rotate(90deg) !important; } /* ===================================================== SUBMENUS ===================================================== */ #dly26x-menu .dly26x-submenu { display: block !important; width: 100% !important; max-height: 0 !important; margin: 0 !important; padding: 0 0 0 40px !important; overflow: hidden !important; will-change: max-height, opacity !important; opacity: 0 !important; background: rgba(0,0,0,.08) !important; transition: max-height .40s ease, opacity .25s ease, padding .35s ease !important; } #dly26x-menu .dly26x-group.dly26x-sub-open > .dly26x-submenu { max-height: 1000px !important; padding-top: 6px !important; padding-bottom: 6px !important; opacity: 1 !important; } #dly26x-menu .dly26x-submenu a { width: 100% !important; min-height: 38px !important; margin: 0 !important; padding: 0 5px !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; border: 0 !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; background: transparent !important; color: rgba(255,255,255,.78) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12.5px !important; line-height: 1.15 !important; font-weight: 500 !important; text-decoration: none !important; float: none !important; } #dly26x-menu .dly26x-submenu a:last-child { border-bottom: 0 !important; } #dly26x-menu .dly26x-submenu a b { color: #d6a92c !important; font-size: 14px !important; font-weight: 400 !important; } #dly26x-menu .dly26x-submenu .dly26x-viewall { color: #d6a92c !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px !important; } /* ===================================================== BOTTOM AREA ===================================================== */ #dly26x-menu .dly26x-bottom-area { width: 100% !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; } /* ===================================================== ISM LOGIN ===================================================== */ #dly26x-menu .dly26x-secure-area { width: 100% !important; margin: 0 !important; padding: 16px 0 0 0 !important; border-top: 1px solid rgba(255,255,255,.10) !important; } #dly26x-menu .dly26x-ism { width: 100% !important; min-height: 62px !important; margin: 0 !important; padding: 0 16px !important; display: grid !important; grid-template-columns: 38px minmax(0,1fr) 25px !important; align-items: center !important; column-gap: 12px !important; border: 1px solid rgba(214,169,44,.50) !important; background: rgba(255,255,255,.035) !important; color: #ffffff !important; text-decoration: none !important; float: none !important; } #dly26x-menu .dly26x-lock { width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px solid rgba(214,169,44,.50) !important; color: #d6a92c !important; font-size: 14px !important; } #dly26x-menu .dly26x-ism-copy { display: flex !important; flex-direction: column !important; } #dly26x-menu .dly26x-ism-copy strong { display: block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; line-height: 1 !important; font-weight: 600 !important; } #dly26x-menu .dly26x-ism-copy small { display: block !important; margin: 5px 0 0 0 !important; padding: 0 !important; color: rgba(255,255,255,.46) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 8px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.7px !important; } #dly26x-menu .dly26x-ism-arrow { color: #d6a92c !important; font-size: 18px !important; line-height: 1 !important; text-align: right !important; } /* ===================================================== FOOTER ===================================================== */ #dly26x-menu .dly26x-bottom { width: 100% !important; margin: 0 !important; padding: 18px 0 3px 0 !important; } #dly26x-menu .dly26x-footer-brand { display: flex !important; flex-direction: row !important; align-items: center !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.54) !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 8.5px !important; line-height: 1 !important; font-weight: 700 !important; letter-spacing: 1.4px !important; white-space: nowrap !important; } #dly26x-menu .dly26x-footer-brand span { display: block !important; width: 24px !important; height: 1px !important; margin: 0 9px !important; background: #d6a92c !important; } } /* ========================================================= DESKTOP SAFETY ========================================================= */ @media only screen and (min-width: 768px) { #dly26x-menu { display: none !important; } } /* ========================================================= DADAYLILAR SHIPPING — CLEAN PREMIUM OCEAN BLUE + INDEPENDENT SVG WORLD MAP FINAL Approved single-tier layout: compact, pale, map watermark ========================================================= */ @media only screen and (min-width:768px){ header{ position:relative !important; z-index:1000 !important; isolation:isolate !important; overflow:visible !important; min-height:112px !important; border:0 !important; background: linear-gradient( 100deg, #f7fbff 0%, #edf7fc 32%, #dceef8 67%, #c9e3f2 100% ) !important; box-shadow:0 5px 18px rgba(8,45,83,.08) !important; } /* WORLD MAP — independent SVG layer. No photo, sea, clouds or ship. */ header::before{ content:"" !important; display:block !important; position:absolute !important; z-index:1 !important; top:8px !important; right:5.5% !important; bottom:9px !important; left:43% !important; pointer-events:none !important; opacity:.28 !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 430'%3E%3Cg fill='%236c9fbd'%3E%3Cpath d='M57 87l39-27 55-9 46 12 35 29 41 7 25 24-13 23-38 5-19 24-29 6-11 35-22 12-22-26-32-11-13-28-28-12-18-30z'/%3E%3Cpath d='M244 202l29 9 22 30 7 42-17 40-18 48-21 11-8-35-20-38 6-35-15-31z'/%3E%3Cpath d='M410 87l31-15 39 5 21 19 32-6 34 12 38-9 44 16 50-6 57 18 42 28-8 21-45 3-30 20-36-8-31 19-32-9-27 16-18-17-30 8-21-20-29 4-24-24-38-5-18-22 17-18z'/%3E%3Cpath d='M505 192l35 3 25 20 29 8 18 29-9 38-21 21-7 43-28 35-28-7-8-34-22-23 7-34-19-32 8-38z'/%3E%3Cpath d='M747 276l28-13 38 9 27 22-5 24-30 11-35-8-28-19z'/%3E%3Cpath d='M825 145l18-12 22 8-5 16-21 6z'/%3E%3Cpath d='M876 326l17-6 11 10-9 11-17-3z'/%3E%3C/g%3E%3C/svg%3E") !important; background-repeat:no-repeat !important; background-position:center center !important; background-size:contain !important; filter:none !important; -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 15%,#000 35%,#000 100%) !important; mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.55) 15%,#000 35%,#000 100%) !important; } /* Navy + gold line exactly under navigation, before the existing slider. */ header::after{ content:"" !important; position:absolute !important; z-index:6 !important; left:0 !important; right:0 !important; bottom:0 !important; height:4px !important; pointer-events:none !important; background:linear-gradient(to bottom,#12366f 0 2px,#d6a92c 2px 4px) !important; } header > .container, header .header-row{ position:relative !important; z-index:5 !important; min-height:112px !important; } header .header-row{ display:flex !important; align-items:center !important; } header .logo-area, header .logo-c, header .logo{ background:transparent !important; border:0 !important; box-shadow:none !important; } header .logo img{ display:block !important; background:transparent !important; transform:scale(1.12) !important; transform-origin:left center !important; filter:drop-shadow(0 3px 7px rgba(8,45,83,.08)) !important; } /* Approved strong gold desktop navigation. */ html body header .menu-c > ul > li > a, html body header .menu-c > ul > li > a:link, html body header .menu-c > ul > li > a:visited{ position:relative !important; color:#c88e00 !important; font-size:15px !important; line-height:1 !important; font-weight:800 !important; letter-spacing:.25px !important; text-shadow:none !important; text-decoration:none !important; transition:color .18s ease,transform .18s ease !important; } html body header .menu-c > ul > li > a::after{ content:"" !important; position:absolute !important; left:50% !important; bottom:-11px !important; width:0 !important; height:2px !important; border-radius:2px !important; background:#d6a92c !important; transform:translateX(-50%) !important; transition:width .18s ease !important; } html body header .menu-c > ul > li > a:hover, html body header .menu-c > ul > li > a:focus, html body header .menu-c > ul > li > a:active{ color:#9d6b00 !important; } html body header .menu-c > ul > li > a:hover::after, html body header .menu-c > ul > li > a:focus::after{ width:70% !important; } /* Never contaminate existing dropdown link styling. */ html body header .menu-c li > ul a::after{ content:none !important; display:none !important; } /* ISM LOGIN — navy, compact and optically aligned with the menu. */ html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited{ color:#fff !important; background:#0b376c !important; font-size:15px !important; font-weight:800 !important; letter-spacing:.1px !important; text-shadow:none !important; border:1px solid #d6a92c !important; border-radius:4px !important; box-shadow:0 5px 14px rgba(10,48,94,.18) !important; } html body header .menu-c > ul > li:last-child > a::after{ content:none !important; display:none !important; } html body header .menu-c > ul > li:last-child > a:hover, html body header .menu-c > ul > li:last-child > a:focus, html body header .menu-c > ul > li:last-child > a:active{ color:#fff !important; background:#082a54 !important; border-color:#d6a92c !important; transform:translateY(-1px) !important; box-shadow:0 7px 18px rgba(10,48,94,.24) !important; } } /* MOBILE — keep the established mobile system, only use the clean pale header. */ @media only screen and (max-width:767px){ header{ position:relative !important; z-index:1000 !important; isolation:isolate !important; overflow:visible !important; border:0 !important; background:linear-gradient(100deg,#f7fbff 0%,#e6f3fa 58%,#d2e9f5 100%) !important; box-shadow:0 5px 16px rgba(7,42,78,.08) !important; } header::before{ content:none !important; display:none !important; } header::after{ content:"" !important; position:absolute !important; z-index:4 !important; left:0 !important; right:0 !important; bottom:0 !important; height:3px !important; background:linear-gradient(to bottom,#12366f 0 2px,#d6a92c 2px 3px) !important; pointer-events:none !important; } header > .container, header .header-row{ position:relative !important; z-index:5 !important; } header .logo-area, header .logo-c, header .logo{ background:transparent !important; border:0 !important; box-shadow:none !important; } header .logo img{ background:transparent !important; filter:drop-shadow(0 3px 6px rgba(8,45,83,.07)) !important; } } /* DROPDOWN SAFETY — preserve the existing working desktop menu behavior. */ header::before, header::after{ pointer-events:none !important; } @media only screen and (min-width:768px){ header, header > .container, header .header-row, header .menu-c, header .menu-c ul, header .menu-c li{ overflow:visible !important; } header .menu-c{ position:relative !important; z-index:10020 !important; } header .menu-c li{ position:relative; } header .menu-c li > ul{ z-index:10030 !important; } } /* FINAL SKY HEADER + DROPDOWN STACKING FIX */ @media only screen and (min-width:768px){ html body header{ position:relative !important; z-index:50000 !important; isolation:isolate !important; overflow:visible !important; border:0 !important; background: radial-gradient(ellipse at 12% 78%,rgba(255,255,255,.94) 0 8%,rgba(255,255,255,.46) 18%,transparent 32%), radial-gradient(ellipse at 31% 72%,rgba(255,255,255,.82) 0 7%,rgba(255,255,255,.32) 17%,transparent 30%), radial-gradient(ellipse at 58% 76%,rgba(255,255,255,.72) 0 6%,rgba(255,255,255,.24) 16%,transparent 28%), radial-gradient(ellipse at 84% 69%,rgba(255,255,255,.82) 0 7%,rgba(255,255,255,.28) 17%,transparent 30%), linear-gradient(180deg,#88c7ee 0%,#b7dcf3 45%,#e8f5fc 100%) !important; box-shadow:0 5px 18px rgba(10,52,91,.10) !important; } html body header::before{ content:"" !important; display:block !important; position:absolute !important; z-index:0 !important; inset:0 !important; pointer-events:none !important; opacity:1 !important; background: radial-gradient(ellipse at 5% 90%,rgba(255,255,255,.76) 0 6%,rgba(255,255,255,.20) 18%,transparent 31%), radial-gradient(ellipse at 24% 84%,rgba(255,255,255,.58) 0 6%,rgba(255,255,255,.16) 17%,transparent 29%), radial-gradient(ellipse at 71% 86%,rgba(255,255,255,.54) 0 6%,rgba(255,255,255,.14) 17%,transparent 29%), radial-gradient(ellipse at 95% 82%,rgba(255,255,255,.68) 0 6%,rgba(255,255,255,.18) 18%,transparent 30%) !important; background-image:none !important; -webkit-mask-image:none !important; mask-image:none !important; filter:none !important; } html body header::after{ content:"" !important; display:block !important; position:absolute !important; z-index:2 !important; left:0 !important; right:0 !important; bottom:0 !important; height:4px !important; pointer-events:none !important; background:linear-gradient(to bottom,#12366f 0 2px,#d5ab32 2px 4px) !important; } html body header > .container, html body header .header-row{ position:relative !important; z-index:10 !important; overflow:visible !important; } html body header .logo-area, html body header .logo-c, html body header .logo{ position:relative !important; z-index:20 !important; background:transparent !important; } html body header .menu-c{ position:relative !important; z-index:60000 !important; overflow:visible !important; } html body header .menu-c ul, html body header .menu-c li{ overflow:visible !important; } html body header .menu-c li{ position:relative !important; } html body header .menu-c li > ul{ z-index:65000 !important; } html body header .menu-c > ul > li > a, html body header .menu-c > ul > li > a:link, html body header .menu-c > ul > li > a:visited{ color:#c58f0b !important; font-weight:800 !important; text-shadow:0 1px 0 rgba(255,255,255,.70) !important; } html body header .menu-c > ul > li > a:hover, html body header .menu-c > ul > li > a:focus{ color:#9f7000 !important; } html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited, html body header .menu-c > ul > li:last-child > a:hover, html body header .menu-c > ul > li:last-child > a:focus{ color:#fff !important; background:#12366f !important; border-color:#d5ab32 !important; text-shadow:none !important; } } @media only screen and (max-width:767px){ html body header{ position:relative !important; z-index:50000 !important; overflow:visible !important; background: radial-gradient(ellipse at 22% 78%,rgba(255,255,255,.82) 0 10%,transparent 31%), linear-gradient(180deg,#9fd1ef 0%,#dff1fb 100%) !important; } html body header::before{content:none !important;display:none !important;} html body header::after{ content:"" !important; position:absolute !important; z-index:2 !important; left:0 !important;right:0 !important;bottom:0 !important; height:3px !important; pointer-events:none !important; background:linear-gradient(to bottom,#12366f 0 2px,#d5ab32 2px 3px) !important; } } /* ========================================================= FINAL NAVIGATION — NAVY BUTTONS / GOLD BORDER / WHITE TEXT Sky, header height and layout are intentionally unchanged. ========================================================= */ @media only screen and (min-width:768px){ /* Keep menu/dropdowns above divider + slider */ html body header{ z-index:50000 !important; overflow:visible !important; } html body header > .container, html body header .header-row, html body header .menu-c, html body header .menu-c > ul, html body header .menu-c li{ overflow:visible !important; } html body header .menu-c{ position:relative !important; z-index:60000 !important; } /* Each TOP-LEVEL menu item becomes an ISM-style button */ html body header .menu-c > ul > li{ position:relative !important; } html body header .menu-c > ul > li > a, html body header .menu-c > ul > li > a:link, html body header .menu-c > ul > li > a:visited{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:46px !important; padding:0 19px !important; margin:0 3px !important; background:linear-gradient(180deg,#123f78 0%,#082f62 100%) !important; color:#ffffff !important; border:1px solid #d5ab32 !important; border-radius:4px !important; font-weight:800 !important; font-size:14px !important; line-height:1 !important; letter-spacing:.15px !important; text-shadow:none !important; text-decoration:none !important; box-shadow: 0 7px 16px rgba(7,42,78,.16), inset 0 1px 0 rgba(255,255,255,.08) !important; transition: background .20s ease, border-color .20s ease, box-shadow .20s ease, transform .20s ease !important; } /* Remove old underline effect from top links */ html body header .menu-c > ul > li > a::after{ display:none !important; content:none !important; } html body header .menu-c > ul > li > a:hover, html body header .menu-c > ul > li > a:focus{ background:linear-gradient(180deg,#0e356a 0%,#062750 100%) !important; color:#ffffff !important; border-color:#e3ba43 !important; box-shadow: 0 9px 20px rgba(7,42,78,.23), inset 0 -3px 0 #d5ab32 !important; transform:translateY(-1px) !important; } /* ISM LOGIN remains the same family, slightly separated */ html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited{ margin-left:22px !important; padding-left:22px !important; padding-right:22px !important; background:linear-gradient(180deg,#123f78 0%,#082f62 100%) !important; color:#fff !important; border:1px solid #d5ab32 !important; } /* Dropdowns stay as dropdown panels — do NOT inherit button styling */ html body header .menu-c li > ul{ z-index:65000 !important; } html body header .menu-c li > ul a{ transform:none !important; } } /* ========================================================== FINAL DESKTOP HEADER FIT - Gives the header a wider desktop container - Reserves real space for the logo - Keeps CAREERS between NEWS and CONTACT - Gold text on every top-level navy button - Mobile menu untouched ========================================================== */ @media only screen and (min-width:768px){ html body header > .container{ width:calc(100% - 48px) !important; max-width:1420px !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; } html body header .header-row{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; width:100% !important; min-height:112px !important; gap:18px !important; } html body header .logo-area{ flex:0 0 330px !important; width:330px !important; min-width:330px !important; max-width:330px !important; margin:0 !important; padding:0 !important; position:relative !important; z-index:20 !important; } html body header .logo-area .logo-c, html body header .logo-area .logo{ width:100% !important; max-width:100% !important; overflow:visible !important; } html body header .menu-c{ flex:1 1 auto !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; } html body header .menu-c > ul{ width:100% !important; display:flex !important; align-items:center !important; justify-content:flex-start !important; flex-wrap:nowrap !important; gap:7px !important; margin:0 !important; padding:0 !important; } html body header .menu-c > ul > li{ flex:0 0 auto !important; margin:0 !important; padding:0 !important; } html body header .menu-c > ul > li > a, html body header .menu-c > ul > li > a:link, html body header .menu-c > ul > li > a:visited{ min-height:46px !important; padding-left:16px !important; padding-right:16px !important; margin:0 !important; color:#f2bd00 !important; white-space:nowrap !important; font-size:14px !important; text-shadow:none !important; } html body header .menu-c > ul > li > a:hover, html body header .menu-c > ul > li > a:focus, html body header .menu-c > ul > li > a:active, html body header .menu-c > ul > li:hover > a{ color:#ffd34d !important; } /* ISM LOGIN stays separated on the right, but uses the same gold text. */ html body header .menu-c > ul > li:last-child{ margin-left:auto !important; } html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited, html body header .menu-c > ul > li:last-child > a:hover, html body header .menu-c > ul > li:last-child > a:focus{ margin-left:18px !important; padding-left:22px !important; padding-right:22px !important; color:#f2bd00 !important; } } /* Intermediate desktop widths: preserve logo and fit navigation cleanly. */ @media only screen and (min-width:768px) and (max-width:1300px){ html body header > .container{ width:calc(100% - 24px) !important; } html body header .header-row{ gap:10px !important; } html body header .logo-area{ flex-basis:285px !important; width:285px !important; min-width:285px !important; max-width:285px !important; } html body header .menu-c > ul{ gap:4px !important; } html body header .menu-c > ul > li > a, html body header .menu-c > ul > li > a:link, html body header .menu-c > ul > li > a:visited{ padding-left:11px !important; padding-right:11px !important; font-size:12px !important; } html body header .menu-c > ul > li:last-child > a{ margin-left:8px !important; padding-left:14px !important; padding-right:14px !important; } } /* ========================================================== DADAYLILAR SHIPPING — PREMIUM CLEAN DESKTOP NAVIGATION Approved direction: - No navy boxes on normal navigation items - Navy text on sky header - Gold underline / gold text on hover & active - ISM LOGIN remains the only navy/gold button - Existing logo, PHP menu, dropdowns and mobile menu preserved ========================================================== */ @media only screen and (min-width: 768px) { html body header{ min-height:112px !important; overflow:visible !important; } html body header > .container{ width:calc(100% - 48px) !important; max-width:1420px !important; margin:0 auto !important; padding:0 !important; } html body header .header-row{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; width:100% !important; min-height:112px !important; gap:28px !important; overflow:visible !important; } html body header .logo-area{ flex:0 0 330px !important; width:330px !important; min-width:330px !important; max-width:330px !important; margin:0 !important; padding:0 !important; position:relative !important; z-index:20 !important; } html body header .menu-c{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; margin:0 !important; padding:0 !important; overflow:visible !important; } html body header .menu-c > ul{ display:flex !important; align-items:center !important; justify-content:flex-start !important; flex-wrap:nowrap !important; width:100% !important; gap:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; } html body header .menu-c > ul > li{ flex:0 0 auto !important; position:relative !important; margin:0 !important; padding:0 !important; overflow:visible !important; } /* Normal navigation links */ html body header .menu-c > ul > li:not(:last-child) > a, html body header .menu-c > ul > li:not(:last-child) > a:link, html body header .menu-c > ul > li:not(:last-child) > a:visited{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-height:48px !important; padding:0 18px !important; margin:0 !important; background:transparent !important; background-image:none !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; color:#07366f !important; font-size:14px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.15px !important; text-shadow:none !important; white-space:nowrap !important; transition:color .22s ease !important; } /* Elegant underline */ html body header .menu-c > ul > li:not(:last-child) > a::after{ content:"" !important; position:absolute !important; left:18px !important; right:18px !important; bottom:4px !important; height:2px !important; background:#d9a900 !important; transform:scaleX(0) !important; transform-origin:center !important; transition:transform .22s ease !important; } html body header .menu-c > ul > li:not(:last-child) > a:hover, html body header .menu-c > ul > li:not(:last-child):hover > a, html body header .menu-c > ul > li:not(:last-child) > a:focus, html body header .menu-c > ul > li:not(:last-child) > a:active, html body header .menu-c > ul > li:not(:last-child).active > a{ color:#c89500 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } html body header .menu-c > ul > li:not(:last-child) > a:hover::after, html body header .menu-c > ul > li:not(:last-child):hover > a::after, html body header .menu-c > ul > li:not(:last-child) > a:focus::after, html body header .menu-c > ul > li:not(:last-child).active > a::after{ transform:scaleX(1) !important; } /* CAREERS active page support */ html body.dly-careers-active header .menu-c > ul > li.dly-careers-menu-item > a{ color:#c89500 !important; } html body.dly-careers-active header .menu-c > ul > li.dly-careers-menu-item > a::after{ transform:scaleX(1) !important; } /* ISM LOGIN — only boxed desktop item */ html body header .menu-c > ul > li:last-child{ margin-left:auto !important; padding-left:30px !important; } html body header .menu-c > ul > li:last-child::before{ content:"" !important; position:absolute !important; left:10px !important; top:50% !important; width:1px !important; height:42px !important; background:rgba(7,54,111,.20) !important; transform:translateY(-50%) !important; } html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:48px !important; padding:0 24px !important; margin:0 !important; background:linear-gradient(180deg,#0b427d 0%,#062f62 100%) !important; border:1px solid #d9a900 !important; border-radius:3px !important; box-shadow:0 5px 14px rgba(2,37,77,.14) !important; color:#f2bd00 !important; font-size:14px !important; font-weight:800 !important; white-space:nowrap !important; transition:transform .2s ease, box-shadow .2s ease, background .2s ease !important; } html body header .menu-c > ul > li:last-child > a::after{ display:none !important; content:none !important; } html body header .menu-c > ul > li:last-child > a:hover, html body header .menu-c > ul > li:last-child > a:focus{ color:#ffd34d !important; background:linear-gradient(180deg,#0d4a8c 0%,#07376f 100%) !important; transform:translateY(-1px) !important; box-shadow:0 7px 18px rgba(2,37,77,.20) !important; } /* Keep dropdowns premium and above hero/slider */ html body header .menu-c li > ul{ z-index:65000 !important; } } /* Fit smaller desktop/laptop widths without touching mobile */ @media only screen and (min-width:768px) and (max-width:1300px){ html body header > .container{ width:calc(100% - 24px) !important; } html body header .header-row{ gap:14px !important; } html body header .logo-area{ flex-basis:285px !important; width:285px !important; min-width:285px !important; max-width:285px !important; } html body header .menu-c > ul > li:not(:last-child) > a{ padding-left:11px !important; padding-right:11px !important; font-size:12px !important; } html body header .menu-c > ul > li:not(:last-child) > a::after{ left:11px !important; right:11px !important; } html body header .menu-c > ul > li:last-child{ padding-left:16px !important; } html body header .menu-c > ul > li:last-child::before{ left:5px !important; } html body header .menu-c > ul > li:last-child > a{ padding-left:16px !important; padding-right:16px !important; font-size:12px !important; } } /* CAREERS — premium two-item dropdown */ html body header .menu-c > ul > li.dly-careers-menu-item > ul.dly-careers-dropdown{ display:block !important; visibility:hidden !important; opacity:0 !important; pointer-events:none !important; position:absolute !important; top:100% !important; left:50% !important; transform:translate(-50%, 8px) !important; width:210px !important; min-width:210px !important; margin:0 !important; padding:8px 0 !important; list-style:none !important; background:rgba(5,48,98,.98) !important; border:1px solid rgba(217,169,0,.72) !important; border-top:2px solid #d9a900 !important; border-radius:2px !important; box-shadow:0 14px 30px rgba(2,37,77,.20) !important; z-index:70000 !important; transition:opacity .18s ease, transform .18s ease, visibility .18s ease !important; } html body header .menu-c > ul > li.dly-careers-menu-item:hover > ul.dly-careers-dropdown, html body header .menu-c > ul > li.dly-careers-menu-item:focus-within > ul.dly-careers-dropdown{ visibility:visible !important; opacity:1 !important; pointer-events:auto !important; transform:translate(-50%, 0) !important; } html body header .menu-c > ul > li.dly-careers-menu-item > ul.dly-careers-dropdown::before{ content:"" !important; position:absolute !important; left:0 !important; right:0 !important; top:-12px !important; height:12px !important; } html body header .menu-c > ul > li.dly-careers-menu-item > ul.dly-careers-dropdown > li{ display:block !important; width:100% !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; } html body header .menu-c > ul > li.dly-careers-menu-item > ul.dly-careers-dropdown > li > a{ display:flex !important; align-items:center !important; width:100% !important; min-height:44px !important; margin:0 !important; padding:0 18px !important; background:transparent !important; border:0 !important; color:#ffffff !important; font-size:12px !important; font-weight:800 !important; letter-spacing:.45px !important; white-space:nowrap !important; text-decoration:none !important; transition:color .18s ease, background .18s ease, padding-left .18s ease !important; } html body header .menu-c > ul > li.dly-careers-menu-item > ul.dly-careers-dropdown > li + li > a{ border-top:1px solid rgba(255,255,255,.10) !important; } html body header .menu-c > ul > li.dly-careers-menu-item > ul.dly-careers-dropdown > li > a:hover, html body header .menu-c > ul > li.dly-careers-menu-item > ul.dly-careers-dropdown > li > a:focus{ color:#f2bd00 !important; background:rgba(255,255,255,.055) !important; padding-left:22px !important; } /* DADAYLILAR SHIPPING — CLEAN STORM SEA + DYNAMIC RAIN Background file: /files/header-storm-sea.png Existing logo/menu/Careers dropdown/mobile menu are preserved. */ @media only screen and (min-width:768px){ html body header{ position:relative !important; z-index:50000 !important; overflow:visible !important; isolation:isolate !important; min-height:132px !important; background: linear-gradient(90deg, rgba(244,250,253,.88) 0%, rgba(240,248,252,.76) 27%, rgba(229,241,248,.57) 58%, rgba(215,233,243,.46) 100%), url("/files/header-storm-sea.webp?v=20261008") center 53% / cover no-repeat !important; box-shadow:0 8px 24px rgba(3,38,70,.17) !important; border:0 !important; } html body header > .container, html body header .header-row, html body header .logo-area, html body header .menu-c{ position:relative !important; z-index:20 !important; overflow:visible !important; } html body header .header-row{ min-height:132px !important; } /* Gold/navy double rule at bottom */ html body header::after{ content:"" !important; position:absolute !important; z-index:25 !important; left:0 !important; right:0 !important; bottom:0 !important; height:4px !important; pointer-events:none !important; background:linear-gradient(to bottom,#07366f 0 2px,#d5a400 2px 4px) !important; } /* Dynamic rain canvas */ #dly-header-rain{ position:absolute !important; z-index:8 !important; inset:0 !important; width:100% !important; height:100% !important; pointer-events:none !important; opacity:.52 !important; } /* Ensure dropdown stays over the rain and next section */ html body header .menu-c, html body header .menu-c > ul, html body header .menu-c li{ overflow:visible !important; } html body header .menu-c li > ul{ z-index:65000 !important; } } @media only screen and (max-width:767px){ #dly-header-rain{display:none !important;} } /* ========================================================= FINAL FIX 1) Header artwork framed closer to approved visual 2) ALL dropdowns remain above the navy/gold bottom rule 3) Dynamic rain retained 4) Intermittent lightning flash added ========================================================= */ @media only screen and (min-width:768px){ html body header{ min-height:132px !important; height:132px !important; overflow:visible !important; isolation:auto !important; /* Less white wash; show the dramatic storm image properly */ background: linear-gradient(90deg, rgba(235,245,250,.30) 0%, rgba(230,241,247,.18) 28%, rgba(9,47,80,.06) 58%, rgba(4,32,62,.10) 100%), url("/files/header-storm-sea.webp?v=20261008") center 46% / cover no-repeat !important; box-shadow:0 8px 24px rgba(2,32,61,.18) !important; } html body header > .container{ height:132px !important; min-height:132px !important; position:relative !important; z-index:100 !important; overflow:visible !important; } html body header .header-row{ height:128px !important; min-height:128px !important; position:relative !important; z-index:110 !important; overflow:visible !important; } html body header .logo-area{ position:relative !important; z-index:120 !important; } html body header .menu-c{ position:relative !important; z-index:100000 !important; overflow:visible !important; } html body header .menu-c > ul{ position:relative !important; z-index:100001 !important; overflow:visible !important; } html body header .menu-c li{ position:relative !important; overflow:visible !important; } /* Critical fix: dropdown starts immediately below menu text, not below the header's navy/gold separator */ html body header .menu-c li > ul{ top:100% !important; margin-top:0 !important; z-index:100500 !important; } /* Invisible hover bridge prevents dropdown disappearing */ html body header .menu-c > ul > li:has(> ul)::after{ content:"" !important; position:absolute !important; left:0 !important; right:0 !important; top:100% !important; height:14px !important; background:transparent !important; pointer-events:auto !important; } /* Existing dropdown styling, but safely above separator/hero */ html body header .menu-c > ul > li > ul{ min-width:210px !important; background:rgba(5,51,96,.98) !important; border-top:3px solid #d7a600 !important; border-left:1px solid rgba(215,166,0,.55) !important; border-right:1px solid rgba(215,166,0,.55) !important; border-bottom:1px solid rgba(215,166,0,.55) !important; box-shadow:0 14px 28px rgba(0,28,55,.25) !important; } html body header .menu-c > ul > li > ul > li > a{ color:#fff !important; background:transparent !important; } html body header .menu-c > ul > li > ul > li > a:hover{ color:#f4c400 !important; background:rgba(255,255,255,.06) !important; } /* Separator must stay visually at bottom, but BELOW menus */ html body header::after{ z-index:30 !important; height:4px !important; } #dly-header-rain{ z-index:20 !important; opacity:.42 !important; } /* Lightning overlays — always behind actual logo/menu */ #dly-lightning-flash, #dly-lightning-bolt{ position:absolute !important; inset:0 !important; pointer-events:none !important; } #dly-lightning-flash{ z-index:21 !important; opacity:0; mix-blend-mode:screen; } /* Three fixed strike zones: left / center / right */ html body header.dly-lightning-left #dly-lightning-flash{ background: radial-gradient(circle at 7% 22%, rgba(225,244,255,.94) 0%, rgba(176,218,255,.40) 11%, rgba(113,174,224,.14) 25%, transparent 46%) !important; } html body header.dly-lightning-center #dly-lightning-flash{ background: radial-gradient(circle at 52% 20%, rgba(225,244,255,.94) 0%, rgba(176,218,255,.40) 11%, rgba(113,174,224,.14) 25%, transparent 46%) !important; } html body header.dly-lightning-right #dly-lightning-flash{ background: radial-gradient(circle at 94% 22%, rgba(225,244,255,.94) 0%, rgba(176,218,255,.40) 11%, rgba(113,174,224,.14) 25%, transparent 46%) !important; } #dly-lightning-bolt{ z-index:22 !important; opacity:0; } #dly-lightning-bolt svg{ position:absolute; top:0; width:14%; height:118%; filter: drop-shadow(0 0 4px rgba(220,244,255,.95)) drop-shadow(0 0 13px rgba(105,181,255,.72)); } html body header.dly-lightning-left #dly-lightning-bolt svg{ left:0%; right:auto; } html body header.dly-lightning-center #dly-lightning-bolt svg{ left:45%; right:auto; } html body header.dly-lightning-right #dly-lightning-bolt svg{ left:auto; right:0%; } #dly-lightning-bolt path{ fill:none; stroke:rgba(240,249,255,.98); stroke-width:2.1; stroke-linecap:round; stroke-linejoin:round; } #dly-lightning-bolt path.branch{ stroke-width:1.15; opacity:.85; } html body header.dly-strike #dly-lightning-flash{ animation:dlyFlash .72s ease-out both; } html body header.dly-strike #dly-lightning-bolt{ animation:dlyBolt .72s ease-out both; } @keyframes dlyFlash{ 0%{opacity:0} 7%{opacity:.88} 15%{opacity:.10} 23%{opacity:.72} 34%{opacity:.04} 100%{opacity:0} } @keyframes dlyBolt{ 0%{opacity:0} 7%{opacity:1} 15%{opacity:.08} 23%{opacity:.94} 36%{opacity:.02} 100%{opacity:0} } } @media (prefers-reduced-motion:reduce){ #dly-lightning-flash, #dly-lightning-bolt{ display:none !important; } } @media only screen and (min-width:768px){ /* Main navigation: white for maximum contrast over storm image */ html body header .menu-c > ul > li:not(:last-child) > a, html body header .menu-c > ul > li:not(:last-child) > a:link, html body header .menu-c > ul > li:not(:last-child) > a:visited { color:#ffffff !important; font-weight:800 !important; text-shadow: 0 1px 2px rgba(0,22,48,.95), 0 0 7px rgba(0,22,48,.55) !important; transition: color .18s ease, text-shadow .18s ease, transform .18s ease !important; } /* Gold hover/focus */ html body header .menu-c > ul > li:not(:last-child) > a:hover, html body header .menu-c > ul > li:not(:last-child) > a:focus { color:#f2bd00 !important; text-shadow: 0 1px 2px rgba(0,22,48,.95), 0 0 8px rgba(242,189,0,.18) !important; } /* Keep active Careers gold */ html body.dly-careers-active header .menu-c > ul > li.dly-careers-menu-item > a { color:#f2bd00 !important; } /* Existing active/current menu classes */ html body header .menu-c > ul > li.active:not(:last-child) > a, html body header .menu-c > ul > li.current:not(:last-child) > a, html body header .menu-c > ul > li.current-menu-item:not(:last-child) > a, html body header .menu-c > ul > li.current_page_item:not(:last-child) > a { color:#f2bd00 !important; } /* Premium gold underline on hover/current */ html body header .menu-c > ul > li:not(:last-child) > a::after { background:#f2bd00 !important; } /* ISM Login stays navy/gold */ html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited, html body header .menu-c > ul > li:last-child > a:hover, html body header .menu-c > ul > li:last-child > a:focus { color:#f2bd00 !important; text-shadow:none !important; } /* Dropdowns: white text, gold hover */ html body header .menu-c li > ul > li > a, html body header .menu-c li > ul > li > a:link, html body header .menu-c li > ul > li > a:visited { color:#ffffff !important; text-shadow:none !important; } html body header .menu-c li > ul > li > a:hover, html body header .menu-c li > ul > li > a:focus { color:#f2bd00 !important; } } @media only screen and (min-width:768px){ html body header{ position:relative !important; z-index:50000 !important; overflow:visible !important; } html body header > .container, html body header .header-row, html body header .menu-c, html body header .menu-c > ul, html body header .menu-c li{ overflow:visible !important; } /* REMOVE every previous glass/panel treatment */ html body header .menu-c{ position:relative !important; z-index:60000 !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; } html body header .menu-c > ul{ display:flex !important; align-items:center !important; background:transparent !important; border:0 !important; box-shadow:none !important; } /* CLEAN WHITE NAVIGATION */ html body header .menu-c > ul > li:not(:last-child) > a, html body header .menu-c > ul > li:not(:last-child) > a:link, html body header .menu-c > ul > li:not(:last-child) > a:visited{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; min-height:44px !important; padding:0 17px !important; margin:0 1px !important; color:#ffffff !important; background:transparent !important; border:0 !important; border-radius:0 !important; box-shadow:none !important; font-size:14px !important; line-height:1 !important; font-weight:900 !important; letter-spacing:.15px !important; text-shadow: 0 2px 3px rgba(0,24,52,.98), 0 0 9px rgba(0,24,52,.85), 0 0 16px rgba(0,24,52,.45) !important; transition:color .18s ease, transform .18s ease !important; } html body header .menu-c > ul > li:not(:last-child) > a:hover, html body header .menu-c > ul > li:not(:last-child) > a:focus{ color:#f5bd00 !important; transform:translateY(-1px) !important; } /* SHORT GOLD UNDERLINE */ html body header .menu-c > ul > li:not(:last-child) > a::after{ content:"" !important; position:absolute !important; left:17px !important; right:17px !important; bottom:2px !important; height:2px !important; background:#f5bd00 !important; border-radius:2px !important; transform:scaleX(0) !important; transform-origin:center !important; opacity:0 !important; transition:transform .18s ease, opacity .18s ease !important; } html body header .menu-c > ul > li:not(:last-child) > a:hover::after, html body header .menu-c > ul > li:not(:last-child) > a:focus::after, html body header .menu-c > ul > li.active:not(:last-child) > a::after, html body header .menu-c > ul > li.current:not(:last-child) > a::after, html body header .menu-c > ul > li.current-menu-item:not(:last-child) > a::after, html body header .menu-c > ul > li.current_page_item:not(:last-child) > a::after, html body.dly-careers-active header .menu-c > ul > li.dly-careers-menu-item > a::after{ transform:scaleX(1) !important; opacity:1 !important; } html body header .menu-c > ul > li.active:not(:last-child) > a, html body header .menu-c > ul > li.current:not(:last-child) > a, html body header .menu-c > ul > li.current-menu-item:not(:last-child) > a, html body header .menu-c > ul > li.current_page_item:not(:last-child) > a, html body.dly-careers-active header .menu-c > ul > li.dly-careers-menu-item > a{ color:#f5bd00 !important; } /* ISM LOGIN remains the only boxed item */ html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited{ min-height:46px !important; padding:0 24px !important; margin-left:27px !important; color:#f5bd00 !important; background:rgba(3,51,99,.94) !important; border:1px solid #f5bd00 !important; border-radius:3px !important; font-weight:900 !important; text-shadow:none !important; box-shadow:0 7px 18px rgba(0,24,52,.20) !important; } html body header .menu-c > ul > li:last-child > a:hover, html body header .menu-c > ul > li:last-child > a:focus{ color:#062e59 !important; background:#f5bd00 !important; } /* Dropdown stays safely above the gold divider / hero */ html body header .menu-c li > ul{ z-index:65000 !important; margin-top:0 !important; background:rgba(5,48,90,.985) !important; border-top:2px solid #f5bd00 !important; box-shadow:0 14px 28px rgba(0,20,45,.28) !important; } html body header .menu-c li > ul > li > a{ color:#fff !important; font-weight:800 !important; text-shadow:none !important; } html body header .menu-c li > ul > li > a:hover, html body header .menu-c li > ul > li > a:focus{ color:#f5bd00 !important; background:rgba(255,255,255,.045) !important; } } @media only screen and (min-width:768px){ html body header{ min-height:142px !important; height:142px !important; background: linear-gradient(90deg, rgba(235,245,250,.24) 0%, rgba(230,241,247,.13) 28%, rgba(9,47,80,.04) 58%, rgba(4,32,62,.08) 100%), url("/files/header-storm-sea.webp?v=20261008") center 68% / cover no-repeat !important; } html body header > .container{ height:142px !important; min-height:142px !important; } html body header .header-row{ height:138px !important; min-height:138px !important; } /* Keep all interactive layers above the storm/sea/rain artwork. */ html body header > .container, html body header .header-row, html body header .logo-area, html body header .menu-c{ position:relative !important; z-index:100 !important; } #dly-header-rain{z-index:20 !important;} #dly-lightning-flash{z-index:21 !important;} #dly-lightning-bolt{z-index:22 !important;} html body header::after{z-index:30 !important;} html body header .menu-c{z-index:100000 !important;} html body header .menu-c li > ul{z-index:100500 !important;} } /* ========================================================= LAPTOP / SMALL DESKTOP ========================================================= */ @media only screen and (min-width:768px) and (max-width:1600px){ /* Use almost all available laptop width */ html body header > .container{ width:calc(100% - 30px) !important; max-width:none !important; margin-left:auto !important; margin-right:auto !important; padding-left:0 !important; padding-right:0 !important; } /* Main header row */ html body header .header-row{ display:flex !important; align-items:center !important; flex-wrap:nowrap !important; width:100% !important; gap:24px !important; overflow:visible !important; } /* ===================================================== LOGO Give logo its own space and create visual separation from navigation. ===================================================== */ html body header .logo-area{ flex:0 0 250px !important; width:250px !important; min-width:250px !important; max-width:250px !important; margin:0 !important; padding:0 !important; position:relative !important; z-index:100 !important; } html body header .logo-area .logo-c, html body header .logo-area .logo{ width:100% !important; max-width:100% !important; } html body header .logo img{ display:block !important; width:100% !important; max-width:250px !important; height:auto !important; transform:none !important; transform-origin:left center !important; } /* ===================================================== NAVIGATION ===================================================== */ html body header .menu-c{ flex:1 1 0 !important; width:auto !important; min-width:0 !important; margin:0 !important; padding:0 !important; overflow:visible !important; } html body header .menu-c > ul{ display:flex !important; align-items:center !important; justify-content:flex-end !important; flex-wrap:nowrap !important; width:100% !important; gap:0 !important; margin:0 !important; padding:0 !important; } html body header .menu-c > ul > li{ flex:0 0 auto !important; margin:0 !important; padding:0 !important; } /* Normal navigation links */ html body header .menu-c > ul > li:not(:last-child) > a, html body header .menu-c > ul > li:not(:last-child) > a:link, html body header .menu-c > ul > li:not(:last-child) > a:visited{ min-height:44px !important; padding-left:10px !important; padding-right:10px !important; margin-left:0 !important; margin-right:0 !important; font-size:13px !important; letter-spacing:0 !important; white-space:nowrap !important; } /* Gold underline must follow smaller padding */ html body header .menu-c > ul > li:not(:last-child) > a::after{ left:10px !important; right:10px !important; } /* ===================================================== ISM LOGIN No longer allowed to push outside viewport ===================================================== */ html body header .menu-c > ul > li:last-child{ flex:0 0 auto !important; margin-left:12px !important; margin-right:0 !important; } html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited{ min-height:44px !important; padding-left:15px !important; padding-right:15px !important; margin-left:0 !important; margin-right:0 !important; font-size:13px !important; white-space:nowrap !important; } } /* ========================================================= 1366 / 1440 CLASS LAPTOPS Slightly tighter but still visually spacious. ========================================================= */ @media only screen and (min-width:1100px) and (max-width:1450px){ html body header > .container{ width:calc(100% - 24px) !important; } html body header .header-row{ gap:28px !important; } /* Logo remains clearly separated from navigation */ html body header .logo-area{ flex-basis:225px !important; width:225px !important; min-width:225px !important; max-width:225px !important; } html body header .logo img{ width:225px !important; max-width:225px !important; } /* Compact navigation */ html body header .menu-c > ul > li:not(:last-child) > a, html body header .menu-c > ul > li:not(:last-child) > a:link, html body header .menu-c > ul > li:not(:last-child) > a:visited{ padding-left:8px !important; padding-right:8px !important; font-size:12px !important; } html body header .menu-c > ul > li:not(:last-child) > a::after{ left:8px !important; right:8px !important; } /* ISM LOGIN */ html body header .menu-c > ul > li:last-child{ margin-left:9px !important; } html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited{ padding-left:12px !important; padding-right:12px !important; font-size:12px !important; } } /* ========================================================= 768–1099 Existing mobile breakpoint is 767px. Make tablet/small laptop desktop navigation fit safely. ========================================================= */ @media only screen and (min-width:768px) and (max-width:1099px){ html body header > .container{ width:calc(100% - 18px) !important; } html body header .header-row{ gap:12px !important; } html body header .logo-area{ flex-basis:180px !important; width:180px !important; min-width:180px !important; max-width:180px !important; } html body header .logo img{ width:180px !important; max-width:180px !important; } html body header .menu-c > ul > li:not(:last-child) > a, html body header .menu-c > ul > li:not(:last-child) > a:link, html body header .menu-c > ul > li:not(:last-child) > a:visited{ padding-left:5px !important; padding-right:5px !important; font-size:11px !important; } html body header .menu-c > ul > li:not(:last-child) > a::after{ left:5px !important; right:5px !important; } html body header .menu-c > ul > li:last-child{ margin-left:5px !important; } html body header .menu-c > ul > li:last-child > a, html body header .menu-c > ul > li:last-child > a:link, html body header .menu-c > ul > li:last-child > a:visited{ padding-left:8px !important; padding-right:8px !important; font-size:11px !important; } } @media only screen and (max-width:767px){ html body header{ position:relative !important; z-index:50000 !important; isolation:isolate !important; overflow:hidden !important; min-height:104px !important; height:104px !important; border:0 !important; background: linear-gradient(90deg, rgba(230,242,249,.20) 0%, rgba(210,228,239,.10) 35%, rgba(6,42,75,.08) 70%, rgba(2,25,52,.16) 100%), url("/files/header-storm-sea-mobile.webp?v=20261007") center 66% / cover no-repeat !important; box-shadow:0 6px 18px rgba(2,28,55,.22) !important; } html body header > .container{ position:relative !important; z-index:100 !important; height:104px !important; min-height:104px !important; overflow:visible !important; } html body header .header-row{ position:relative !important; z-index:110 !important; display:flex !important; align-items:center !important; justify-content:space-between !important; height:100px !important; min-height:100px !important; overflow:visible !important; } html body header .logo-area, html body header .logo-c, html body header .logo{ position:relative !important; z-index:120 !important; background:transparent !important; border:0 !important; box-shadow:none !important; } html body header .logo img{ position:relative !important; z-index:121 !important; display:block !important; background:transparent !important; filter:drop-shadow(0 2px 5px rgba(255,255,255,.16)) drop-shadow(0 3px 7px rgba(0,22,47,.20)) !important; } html body header .header-top-mobil, html body header .mobil-menu{ position:relative !important; z-index:130 !important; } html body header .mobil-menu, html body header .mobil-menu:link, html body header .mobil-menu:visited{ color:#ffffff !important; text-shadow:0 2px 5px rgba(0,24,52,.72) !important; } /* Old mobile pseudo-background is neutralized. */ html body header::before{ content:none !important; display:none !important; background:none !important; } /* Keep the approved navy/gold lower rule. */ html body header::after{ content:"" !important; display:block !important; position:absolute !important; z-index:160 !important; left:0 !important; right:0 !important; bottom:0 !important; height:4px !important; pointer-events:none !important; background:linear-gradient(to bottom,#07366f 0 2px,#d5a400 2px 4px) !important; } /* Mobile dynamic rain. */ #dly-header-rain-mobile{ position:absolute !important; z-index:20 !important; inset:0 !important; width:100% !important; height:100% !important; display:block !important; pointer-events:none !important; opacity:.48 !important; } /* Mobile lightning layers. */ #dly-mobile-lightning-flash, #dly-mobile-lightning-bolt{ position:absolute !important; inset:0 !important; width:100% !important; height:100% !important; pointer-events:none !important; } #dly-mobile-lightning-flash{ z-index:21 !important; opacity:0; background: radial-gradient(circle at var(--dly-light-x,50%) 0%, rgba(255,255,255,.96) 0%, rgba(215,235,255,.54) 14%, rgba(160,205,245,.18) 31%, transparent 58%) !important; mix-blend-mode:screen; } #dly-mobile-lightning-bolt{ z-index:22 !important; opacity:0; } #dly-mobile-lightning-bolt svg{ width:100% !important; height:100% !important; display:block !important; overflow:visible !important; } #dly-mobile-lightning-bolt path{ fill:none !important; stroke:rgba(245,250,255,.98) !important; stroke-width:1.15 !important; stroke-linecap:round !important; stroke-linejoin:round !important; filter:drop-shadow(0 0 2px rgba(255,255,255,.95)) drop-shadow(0 0 5px rgba(160,205,255,.88)) !important; } #dly-mobile-lightning-bolt path.dly-mobile-branch{ stroke-width:.72 !important; opacity:.78 !important; } } @media only screen and (max-width:767px){ /* HEADER */ html body header{ width:100% !important; height:104px !important; min-height:104px !important; overflow:hidden !important; } /* CONTAINER */ html body header > .container{ width:100% !important; max-width:none !important; height:104px !important; min-height:104px !important; margin:0 !important; padding:0 18px !important; box-sizing:border-box !important; } /* MAIN ROW */ html body header .header-row{ width:100% !important; height:100px !important; min-height:100px !important; margin:0 !important; padding:0 !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important; gap:16px !important; box-sizing:border-box !important; } /* ===================================================== MOBILE LOGO AREA ===================================================== */ html body header .logo-area{ position:relative !important; flex:0 1 285px !important; width:285px !important; max-width:calc(100% - 68px) !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:0 !important; float:none !important; overflow:visible !important; z-index:120 !important; } html body header .logo-area .logo-c{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; float:none !important; } html body header .logo-area .logo{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; float:none !important; } html body header .logo-area picture{ display:block !important; width:100% !important; max-width:100% !important; height:auto !important; margin:0 !important; padding:0 !important; } html body header .logo-area picture img, html body header .logo img{ display:block !important; width:100% !important; max-width:285px !important; height:auto !important; max-height:72px !important; object-fit:contain !important; object-position:left center !important; margin:0 !important; padding:0 !important; transform:none !important; float:none !important; background:transparent !important; filter: drop-shadow(0 2px 5px rgba(255,255,255,.16)) drop-shadow(0 3px 7px rgba(0,22,47,.20)) !important; } /* ===================================================== HIDE DESKTOP NAVIGATION ON MOBILE ===================================================== */ html body header .menu-c{ display:none !important; } /* ===================================================== MOBILE HAMBURGER ===================================================== */ html body header .header-top-mobil{ position:relative !important; flex:0 0 48px !important; width:48px !important; min-width:48px !important; max-width:48px !important; height:48px !important; margin:0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; float:none !important; right:auto !important; left:auto !important; top:auto !important; z-index:150 !important; } html body header .header-top-mobil .mobil-menu{ position:relative !important; display:flex !important; align-items:center !important; justify-content:center !important; width:46px !important; height:46px !important; margin:0 !important; padding:0 !important; top:auto !important; right:auto !important; bottom:auto !important; left:auto !important; color:#ffffff !important; background:rgba(3,35,67,.28) !important; border:1px solid rgba(255,255,255,.26) !important; border-radius:4px !important; box-shadow: 0 4px 12px rgba(0,20,43,.18), inset 0 1px 0 rgba(255,255,255,.08) !important; text-decoration:none !important; z-index:151 !important; } html body header .header-top-mobil .mobil-menu i{ margin:0 !important; padding:0 !important; font-size:23px !important; line-height:1 !important; color:#ffffff !important; text-shadow:0 2px 5px rgba(0,24,52,.70) !important; } /* Language element must not steal mobile row width */ html body header .header-row > .lang-c, html body header .header-row > .langs, html body header .header-row > .language{ display:none !important; } } /* ========================================================= SMALL PHONES ========================================================= */ @media only screen and (max-width:390px){ html body header > .container{ padding-left:14px !important; padding-right:14px !important; } html body header .logo-area{ flex-basis:245px !important; width:245px !important; max-width:calc(100% - 62px) !important; } html body header .logo-area picture img, html body header .logo img{ max-width:245px !important; max-height:66px !important; } } @media only screen and (min-width:768px){ html body header .header-row{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; overflow:visible !important; } /* Menu and language occupy separate, real flex boxes. */ html body header .header-row > .menu-c{ position:relative !important; flex:1 1 0 !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; padding:0 !important; float:none !important; left:auto !important; right:auto !important; transform:none !important; overflow:visible !important; } html body header .header-row > .menu-c > ul{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-end !important; width:100% !important; min-width:0 !important; margin:0 !important; padding:0 !important; box-sizing:border-box !important; } html body header .header-row > .menu-c > ul > li{ flex:0 0 auto !important; } /* Remove accumulated ISM offsets; retain its existing button styling. */ html body header .header-row > .menu-c > ul > li:last-child{ margin:0 0 0 12px !important; padding:0 !important; } html body header .header-row > .menu-c > ul > li:last-child > a, html body header .header-row > .menu-c > ul > li:last-child > a:link, html body header .header-row > .menu-c > ul > li:last-child > a:visited{ margin-left:0 !important; margin-right:0 !important; box-sizing:border-box !important; white-space:nowrap !important; } /* Row gap supplies the spacing after ISM, without a second margin. */ html body header .header-row > .lang-d.dly-lang-inline{ position:relative !important; display:flex !important; flex:0 0 82px !important; width:82px !important; min-width:82px !important; max-width:82px !important; height:44px !important; align-self:center !important; align-items:center !important; justify-content:flex-start !important; order:0 !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; box-sizing:border-box !important; float:none !important; inset:auto !important; transform:none !important; overflow:visible !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; z-index:100001 !important; } /* Preserve the DOM hook expected by the existing language JavaScript. */ html body header .header-row > .lang-d.dly-lang-inline > .lang-selected{ position:absolute !important; display:block !important; width:1px !important; height:1px !important; margin:0 !important; padding:0 !important; overflow:hidden !important; opacity:0 !important; pointer-events:none !important; } html body header .header-row > .lang-d.dly-lang-inline > .lang-selected::after{ content:none !important; display:none !important; } html body header .header-row > .lang-d.dly-lang-inline > .lang-select, html body header .header-row > .lang-d.dly-lang-inline > .lang-select.active{ position:static !important; display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:flex-start !important; gap:0 !important; width:100% !important; min-width:0 !important; max-width:none !important; height:auto !important; max-height:none !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; box-shadow:none !important; inset:auto !important; transform:none !important; overflow:visible !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; white-space:nowrap !important; } html body header .header-row > .lang-d.dly-lang-inline > .lang-select > a{ position:relative !important; display:inline-flex !important; flex:0 0 auto !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; height:auto !important; margin:0 !important; padding:5px 4px !important; border:0 !important; background:transparent !important; color:#ffffff !important; font-family:"Open Sans",Arial,sans-serif !important; font-size:12px !important; line-height:1 !important; font-weight:700 !important; letter-spacing:.5px !important; text-decoration:none !important; text-indent:0 !important; float:none !important; inset:auto !important; transform:none !important; opacity:1 !important; visibility:visible !important; pointer-events:auto !important; cursor:pointer !important; } html body header .header-row > .lang-d.dly-lang-inline > .lang-select > a.active, html body header .header-row > .lang-d.dly-lang-inline > .lang-select > a:hover, html body header .header-row > .lang-d.dly-lang-inline > .lang-select > a:focus{ color:#f5bd00 !important; } html body header .header-row > .lang-d.dly-lang-inline .dly-lang-separator{ display:inline-flex !important; flex:0 0 auto !important; margin:0 2px !important; padding:0 !important; color:rgba(255,255,255,.70) !important; font-size:12px !important; line-height:1 !important; } } /* Match the existing compact desktop navigation on tablets. */ @media only screen and (min-width:768px) and (max-width:1099px){ html body header .header-row > .lang-d.dly-lang-inline{ flex-basis:68px !important; width:68px !important; min-width:68px !important; max-width:68px !important; } html body header .header-row > .menu-c > ul > li:last-child{ margin-left:5px !important; } } @media only screen and (min-width:768px) and (max-width:991px){ html body header .header-row > .menu-c > ul > li:not(:last-child) > a, html body header .header-row > .menu-c > ul > li:not(:last-child) > a:link, html body header .header-row > .menu-c > ul > li:not(:last-child) > a:visited{ padding-left:3px !important; padding-right:3px !important; font-size:10px !important; } html body header .header-row > .menu-c > ul > li:not(:last-child) > a::after{ left:3px !important; right:3px !important; } } @media only screen and (max-width:767px){ html body header .header-row > .lang-d, html body header .header-row > .lang-d.dly-lang-inline{ display:none !important; } html body header .header-row > .logo-area{ flex-shrink:1 !important; min-width:0 !important; } html body header .header-row > .header-top-mobil{ position:relative !important; display:flex !important; flex:0 0 48px !important; width:48px !important; min-width:48px !important; max-width:48px !important; height:48px !important; align-items:center !important; justify-content:flex-end !important; margin:0 !important; padding:0 !important; inset:auto !important; transform:none !important; visibility:visible !important; opacity:1 !important; overflow:visible !important; pointer-events:auto !important; z-index:150 !important; } html body header .header-row > .header-top-mobil > #dly26x-open{ position:relative !important; display:flex !important; width:46px !important; height:46px !important; flex:0 0 46px !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; margin:0 !important; padding:0 !important; inset:auto !important; transform:none !important; visibility:visible !important; opacity:1 !important; pointer-events:auto !important; z-index:151 !important; } /* Draw the bars locally so the trigger does not depend on icon-font loading. */ html body header .header-row > .header-top-mobil > #dly26x-open > i{ display:none !important; } html body header .header-row > .header-top-mobil > #dly26x-open::before{ content:"" !important; display:block !important; position:absolute !important; left:50% !important; top:50% !important; width:22px !important; height:2px !important; margin:0 !important; padding:0 !important; border:0 !important; background:#ffffff !important; box-shadow:0 -7px 0 #ffffff,0 7px 0 #ffffff !important; transform:translate(-50%,-50%) !important; opacity:1 !important; visibility:visible !important; pointer-events:none !important; } } @media (min-width:768px){ html body header .header-row > .lang-d.dly-lang-inline > .lang-select > a[data-lang]{flex-direction:column !important;gap:6px !important;} html body header .header-row > .lang-d.dly-lang-inline > .lang-select > a[data-lang]::before{content:"" !important;display:block !important;width:18px !important;height:12px !important;flex:0 0 12px !important;background-size:100% 100% !important;background-repeat:no-repeat !important;border-radius:1px;box-shadow:0 0 0 1px rgba(255,255,255,.18);} html body header .header-row > .lang-d.dly-lang-inline > .lang-select > a[data-lang="en"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Cdefs%3E%3CclipPath%20id%3D%22c%22%3E%3Cpath%20d%3D%22M0%200h60v40H0z%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Cpath%20fill%3D%22%23012169%22%20d%3D%22M0%200h60v40H0z%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%228%22%20d%3D%22m0%200%2060%2040M60%200%200%2040%22%2F%3E%3Cpath%20stroke%3D%22%23c8102e%22%20stroke-width%3D%223%22%20d%3D%22m0%200%2060%2040M60%200%200%2040%22%2F%3E%3Cpath%20stroke%3D%22%23fff%22%20stroke-width%3D%2213%22%20d%3D%22M30%200v40M0%2020h60%22%2F%3E%3Cpath%20stroke%3D%22%23c8102e%22%20stroke-width%3D%228%22%20d%3D%22M30%200v40M0%2020h60%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") !important;} html body header .header-row > .lang-d.dly-lang-inline > .lang-select > a[data-lang="tr"]::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Cpath%20fill%3D%22%23e30a17%22%20d%3D%22M0%200h60v40H0z%22%2F%3E%3Ccircle%20cx%3D%2225%22%20cy%3D%2220%22%20r%3D%2210%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2220%22%20r%3D%228%22%20fill%3D%22%23e30a17%22%2F%3E%3Cpath%20fill%3D%22%23fff%22%20d%3D%22m36%2014%201.8%204.1%204.5.4-3.4%203%201%204.4-3.9-2.3-3.9%202.3%201-4.4-3.4-3%204.5-.4z%22%2F%3E%3C%2Fsvg%3E") !important;} html body header .header-row > .lang-d.dly-lang-inline .dly-lang-separator{align-self:flex-end !important;margin-bottom:5px !important;} } /* ========================================================= DADAYLILAR — DESKTOP HEADER WIDTH LOCK Header'ın sağa-sola oynamasını engeller. SADECE üst header'a etki eder. ========================================================= */ @media (min-width: 992px) { html body header { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; left: 0 !important; right: 0 !important; box-sizing: border-box !important; } html body header > .container { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 18px !important; padding-right: 18px !important; box-sizing: border-box !important; } html body header .header-row { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } /* LOGO SABİT */ html body header .logo-area { flex: 0 0 430px !important; width: 430px !important; max-width: 430px !important; margin: 0 !important; } html body header .logo-area .logo-c, html body header .logo-area .logo { width: 100% !important; max-width: 100% !important; } html body header .logo-area img { display: block !important; width: 100% !important; max-width: 430px !important; height: auto !important; } /* MENÜ KALAN ALANI KULLANSIN */ html body header .menu-c { flex: 1 1 auto !important; width: auto !important; min-width: 0 !important; margin-left: 35px !important; margin-right: 0 !important; } html body header .menu-c > ul { width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; margin: 0 !important; padding: 0 !important; } html body header .menu-c > ul > li { flex: 0 0 auto !important; } }