/* ========================================================= Marinetra — assets/css/base.css Reset, tipografi, ve tüm sayfalarda paylaşılan bileşen davranışları (nav, accordion, galeri, hero slider, form, dil geçişi). Sayfaya özel/otomatik üretilmiş kurallar generated.css dosyasındadır. ========================================================= */ * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: 'Inter', system-ui, sans-serif; color: #0B1F3A; background: #FFFFFF; -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; } input, textarea, select, button { font-family: 'Inter', sans-serif; } @keyframes mrnFade { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } /* -------------------- Language toggle -------------------- */ /* Default state: Turkish visible. When , swap every element carrying data-tr/data-en to its English text. */ [data-lang="en"] [data-en]::before { content: none; } /* Header / nav dropdown */ html, body { overflow-x: hidden; } .mrn-s16 { cursor: pointer; flex-shrink: 0; } /* Uzun ana menü başlıkları (ör. "Project Development & Management") artık tek satırda taşmak yerine en fazla iki satıra sarılır; kısa başlıklar (İletişim, Yacht Management vb.) doğal genişlikleri max-width'in altında kaldığı için tek satırda kalmaya devam eder. */ .mrn-s17 { align-items: center; } .mrn-s17-label { display: block; white-space: normal; text-align: center; max-width: 95px; line-height: 1.2; } /* "Project Development & Management" diğerlerinden daha uzun olduğu için 2 satıra ("Project Development" / "& Management") düzgün sarılması adına daha geniş bir max-width alır; aksi halde 3-4 satıra bölünürdü. */ .mrn-s17-label--wide { max-width: 155px; } /* 7 öğeli nihai üst navigasyon (Brokerage / New Build / Refit & Conversion / Yacht Management / Project Development & Management / Hakkımızda / İletişim) uzun etiketler içerdiği için, standart 1280-1366px masaüstü genişliklerinde taşmayı önlemek üzere gap ve yazı boyutu biraz küçültüldü. "Refit & Conversion" ve "Yacht Management" de artık iki satıra sarılıyor (95px max-width), sadece kısa etiketler ("Brokerage", "İletişim" vb.) tek satırda kalıyor. */ .mrn-s15 { gap: clamp(6px, 1vw, 16px) !important; align-items: stretch; } .mrn-s17 { font-size: clamp(12.5px, 1vw, 14px) !important; } /* CTA butonu ("Projenizi Görüşelim") kendi ayrı sarmalayıcısını kullanır (logo ile karıştırılmaması için mrn-cta-wrap) ve yer açmak için iki satıra ("Projenizi" / "Görüşelim") sarılacak şekilde ayarlanır. */ .mrn-cta-wrap { display: flex; align-items: center; flex-shrink: 0; } .mrn-s21 { padding: 8px 14px !important; font-size: 12.5px !important; white-space: normal; text-align: center; line-height: 1.25; max-width: 88px; flex-shrink: 0; } .mrn-s16:hover > .mrn-s19, .mrn-s16.is-open > .mrn-s19 { opacity: 1 !important; visibility: visible !important; transform: translateY(0) !important; } .mrn-s16:hover > .mrn-s17 > .mrn-s18, .mrn-s16.is-open > .mrn-s17 > .mrn-s18 { transform: rotate(180deg); } /* Mobile nav: collapse the desktop nav into a full-width dropdown panel triggered by the hamburger button. The breakpoint mirrors the design's own clamp()-based header sizing. */ @media (max-width: 1180px) { header nav { display: none !important; position: absolute; top: 74px; left: 0; right: 0; background: #fff; flex-direction: column !important; align-items: stretch !important; height: auto !important; padding: 8px 20px 20px; box-shadow: 0 16px 30px rgba(7,21,39,.16); } header nav > div { height: auto !important; } header nav .mrn-s19 { position: static !important; opacity: 1 !important; visibility: visible !important; box-shadow: none !important; transform: none !important; padding-left: 14px !important; display: none; } header nav > div.is-open .mrn-s19 { display: block; } /* Ok işareti, başlık açıkken döner; dokunma alanı büyütülür */ header nav > div.is-open > a .mrn-s18 { transform: rotate(180deg); } header nav > div > a .mrn-s18 { transition: transform .2s; } header nav > div > a { padding: 14px 4px !important; width: 100%; justify-content: space-between !important; } header.mrn-nav-open nav { display: flex !important; } header div[style], header .mrn-s12 { flex-wrap: wrap; } /* the design computes desktop-vs-mobile chrome with JS (window width) rather than CSS breakpoints, so the static export freezes desktop chrome; restore the intended mobile layout here using structural (not class-based) selectors, since class names are shared/ambiguous between desktop states */ header .mrn-s23 { display: flex !important; } header nav + div { display: none !important; } /* desktop "Teklif Al / WhatsApp" CTA */ } @media (min-width: 1181px) { header .mrn-s23 { display: none !important; } } /* -------------------- FAQ accordion -------------------- */ [data-accordion-panel] { overflow: hidden; transition: max-height .3s; } [data-accordion-panel][data-open="0"] { max-height: 0 !important; } [data-accordion-panel][data-open="1"] { max-height: 600px !important; } [data-accordion-trigger] > span:last-child { transition: transform .25s; } [data-accordion-trigger][data-open="1"] > span:last-child { transform: rotate(45deg); } /* -------------------- Hero slider (home page) -------------------- Positioning (position:absolute;inset:0) is already handled by the slide's own generated utility class (mrn-s26/mrn-s30); here we only toggle visibility, so we must NOT set position again or we override and collapse that class's absolute/inset rule (higher specificity from the attribute selector would otherwise win over the class). The class also sets pointer-events:none (so inactive slides don't intercept clicks); the active slide needs pointer-events re-enabled so its title/subtitle/button become clickable again. */ [data-hero-slide] { transition: opacity .5s ease; } [data-hero-slide]:not([data-active]) { opacity: 0; pointer-events: none; } [data-hero-slide][data-active] { opacity: 1; pointer-events: auto; } [data-hero-dot] { cursor: pointer; } /* Counter/arrows + dots: centered vertically so they stay within the viewport regardless of hero height, instead of being pinned near the bottom (previously below the fold on shorter screens). */ .mrn-s41 { bottom: auto !important; top: 50% !important; transform: translateY(-50%); } /* Mobil/dikey ekranlarda hero: metin ve navigasyon (sayaç/ok/nokta) üst üste binmesin diye metin alt kısma yaslanır, navigasyon en alta sabitlenir ve kompakt tek bir şerit halinde gösterilir. */ @media (max-width: 780px) { /* Mobilde hero artık ekranı doldurup görseli kırpmıyor (sağ/sol kesilme sorunu); görsel oranına uygun, tam genişlikte ve görselin tamamı görünür şekilde gösteriliyor. */ .mrn-s25 { height: auto !important; min-height: 0 !important; aspect-ratio: 4 / 5; } .mrn-s26 img, .mrn-s26 video, .mrn-s30 img, .mrn-s30 video { object-fit: contain !important; background: #071527; } .mrn-s32 { justify-content: flex-end !important; padding-bottom: 118px; } .mrn-s33 { max-width: 100% !important; } .mrn-s41 { top: auto !important; bottom: 60px !important; left: 20px !important; right: 20px !important; transform: none !important; justify-content: space-between !important; } .mrn-s48 { bottom: 20px !important; left: 20px !important; right: 20px !important; justify-content: center !important; } } /* Header background: fully transparent — only a solid white panel directly behind the logo link itself remains. Using the "huge negative margin + matching padding" technique below, the panel's background always extends exactly from the screen's left edge to the logo's own right edge (plus a small buffer), regardless of the logo's actual size — no JS measurement needed, so it can never bleed into the nav links. */ .mrn-s10 { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border-bottom: none !important; box-shadow: none !important; } header a.mrn-s12 { position: relative; z-index: 1; align-self: stretch; background: #fff; margin-left: -9999px; padding-left: 9999px; padding-right: 28px; border-radius: 0 16px 16px 0; box-shadow: 4px 0 20px rgba(0,0,0,.05); } /* The header's nav/CTA/hamburger colors were designed for the old dark navy background. Now that the header itself is transparent (it sits above the hero in normal document flow, not overlapping it, so its real background is the page's white body color) these need to be dark for legibility. */ .mrn-s17, .mrn-s21 { color: #0B1F3A !important; } .mrn-s21 { border-color: rgba(11,31,58,.25) !important; } .mrn-s24 { background: #0B1F3A !important; } /* Logo text now always sits on the white panel above — switch it to a dark, legible color (it was white, meant for the old dark header background). */ .mrn-s14 { color: #0B1F3A !important; } /* -------------------- Image category switcher -------------------- */ [data-gallery-btn] { cursor: pointer; } [data-gallery-btn].is-active { outline: 2px solid #23B4C4; outline-offset: -2px; } /* -------------------- Generic hover polish -------------------- The original design's hover states only worked inside the design tool's own preview and are not part of the exported runtime, so we add a light, universal hover treatment for clickable elements. */ a[href]:hover, button:hover { filter: brightness(1.07); } a[href], button { transition: filter .15s ease, transform .15s ease; } /* -------------------- Contact form success state -------------------- */ [data-contact-form][data-sent="1"] > *:not([data-form-success]) { display: none !important; } [data-form-success] { display: none; } [data-contact-form][data-sent="1"] [data-form-success] { display: block; } /* -------------------- Utility -------------------- */ .mrn-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* -------------------- Floating WhatsApp button -------------------- */ .mrn-whatsapp-float { position: fixed; right: 22px; bottom: 22px; width: 58px; height: 58px; border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 26px rgba(0,0,0,.28); z-index: 999; transition: transform .15s ease; } .mrn-whatsapp-float:hover { transform: scale(1.07); } .mrn-whatsapp-float svg { width: 30px; height: 30px; display: block; } @media (max-width: 480px) { .mrn-whatsapp-float { width: 50px; height: 50px; right: 14px; bottom: 14px; } .mrn-whatsapp-float svg { width: 26px; height: 26px; } } /* Brokerage mega menu: masaüstünde 2 sütun, mobilde tek sütun + dokunmayla aç/kapa (inline style yerine class kullanılarak mobil accordion kuralları artık doğru şekilde geçerli olur) */ .mrn-brokerage-menu { min-width: 440px; display: grid; grid-template-columns: 1fr 1fr; gap: 0; } @media (max-width: 1180px) { .mrn-brokerage-menu { position: static !important; min-width: 0; width: 100% !important; display: none; grid-template-columns: 1fr; } .mrn-brokerage-menu > div { border-left: none !important; padding: 0 !important; } header nav > div.is-open .mrn-brokerage-menu { display: block; } } /* ========================================================= NİHAİ / KESİN mobil alt menü düzeltmesi (dosyanın en sonunda, maksimum önceliğe sahip olması için). Sorun: dokunmatik cihazlarda dokunma bazen CSS ":hover" durumunu da tetikliyor (mobil tarayıcıların "hover simülasyonu"), bu da masaüstüne özel ".mrn-s16:hover > .mrn-s19 { opacity:1 !important; visibility:visible !important; }" kuralının mobilde de devreye girmesine ve alt menünün (position:absolute kalan) masaüstü konumunda / yanda görünmesine yol açabiliyordu — JS'in position:static ataması her zaman zamanında yetişmese bile. Çözüm: mobil genişlikte hem ":hover" davranışını tamamen etkisiz hale getiriyoruz, hem de ".is-open" durumundaki her alt menüyü (Brokerage mega menu dahil) en yüksek öncelikle normal akışa zorluyoruz. ========================================================= */ @media (max-width: 1180px) { /* KÖK NEDEN: .mrn-s16 (üst menü kutusu) display:flex + sabit height:74px kullanıyor; bu yüzden içindeki link ile alt menü aynı satırda YAN YANA flex öğesi olarak duruyordu — alt menüyü position:static yapmak bile bunu tek başına düzeltmiyordu, çünkü flex satırı içinde kalmaya devam ediyordu. Mobilde bu kutuyu dikey akışa (block) çeviriyoruz. */ header nav > div.mrn-s16 { display: block !important; height: auto !important; } /* Dokunma kaynaklı ":hover" durumunu tamamen devre dışı bırak */ header nav > div.mrn-s16:hover > div { opacity: 0 !important; visibility: hidden !important; } /* ".is-open" olan HER alt menüyü (mrn-s19, mrn-brokerage-menu dahil) kesin biçimde normal akışa, tam genişliğe ve görünür hale zorla */ header nav > div.mrn-s16.is-open > div { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; box-shadow: none !important; opacity: 1 !important; visibility: visible !important; grid-template-columns: 1fr !important; border-radius: 0 !important; margin: 0 !important; } header nav > div.mrn-s16:not(.is-open) > div { display: none !important; } header nav > div.mrn-s16.is-open > div > div { border-left: none !important; padding: 0 !important; } }