/* =========================================================== Oxygen Yachting — Bülten makale stil dosyası (paylaşımlı) Sürüm: v7 · Konum: /bulten/assets/bulten.css Bu dosya makale sayfalarının ortak CSS'idir. Her yeni makale içine sadece şu satırı koyar: Böylece makale HTML'leri ~30KB inline CSS taşımaz (tek sefer cache'lenir). =========================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --orange: #E8551A; --orange-lt: #F5C4A6; --dark: #0D1B2A; --mid: #4A453E; --muted: #8A8278; --rule: #C9C0B4; --cream: #F7F3EC; --cream-dk: #EDE7DC; --white: #FDFAF5; --serif: 'Cormorant Garamond', Georgia, serif; --sc: 'Cormorant SC', Georgia, serif; --sans: 'DM Sans', sans-serif; } html { font-size: 16px; } body { background: var(--cream); color: var(--dark); font-family: var(--serif); -webkit-font-smoothing: antialiased; } /* Turkish uppercase I fix */ [lang="tr"] { text-transform: none; } /* ── TOP BAR ── */ .top-bar { background: var(--dark); color: var(--muted); font-family: var(--sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 40px; display: flex; justify-content: space-between; align-items: center; } .top-bar a { color: var(--orange); text-decoration: none; } .back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--cream) !important; font-size: 10px; } .back-link::before { content: '←'; } /* ── SITE HEADER ── */ .site-header { background: var(--white); padding: 18px 40px; border-bottom: 3px solid var(--dark); text-align: center; } .site-wordmark { font-family: var(--sc); font-weight: 600; font-size: 28px; letter-spacing: 0.28em; color: var(--dark); } .site-wordmark em { font-style: normal; color: var(--orange); } .site-tagline { font-family: var(--sans); font-size: 9.5px; letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted); margin-top: 3px; } /* ── ARTICLE ── */ .article-wrap { max-width: 720px; margin: 0 auto; padding: 48px 24px 64px; background: var(--white); } .article-kicker { font-family: var(--sans); font-size: 9.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--orange); margin-bottom: 14px; } .article-headline { font-family: var(--serif); font-weight: 600; font-size: 44px; line-height: 1.1; color: var(--dark); margin-bottom: 14px; } .article-deck { font-family: var(--serif); font-size: 19px; font-style: italic; font-weight: 300; color: var(--mid); line-height: 1.55; margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); } .article-meta { font-family: var(--sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin-bottom: 32px; } .article-body { font-family: var(--serif); font-size: 18px; line-height: 1.78; color: var(--dark); } .article-body p { margin-bottom: 1.3em; } .article-body h2 { font-family: var(--serif); font-weight: 600; font-size: 26px; line-height: 1.2; color: var(--dark); margin: 2em 0 0.6em; padding-top: 1.2em; border-top: 1px solid var(--rule); } .article-body blockquote { border-left: 3px solid var(--orange); margin: 2em 0; padding: 0.5em 0 0.5em 24px; font-style: italic; font-size: 20px; color: var(--mid); line-height: 1.55; } .article-body .drop-cap::first-letter { font-family: var(--sc); font-size: 4.5em; font-weight: 600; float: left; line-height: 0.75; margin: 0.1em 0.08em 0 0; color: var(--orange); } /* ── SOFT SELL IN ARTICLE ── */ .article-soft-sell { background: var(--cream-dk); border-left: 3px solid var(--orange); padding: 20px 24px; margin: 2.5em 0; font-family: var(--serif); font-size: 16px; font-style: italic; color: var(--mid); line-height: 1.6; } .article-soft-sell strong { font-style: normal; color: var(--dark); } .article-soft-sell a { color: var(--orange); text-decoration: none; font-style: normal; font-weight: 500; font-family: var(--sans); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; display: inline-block; margin-top: 10px; } /* ── ARTICLE FOOTER ── */ .article-end { margin-top: 3em; padding-top: 20px; border-top: 2px solid var(--dark); font-family: var(--sans); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); display: flex; justify-content: space-between; align-items: center; } .article-end a { color: var(--orange); text-decoration: none; display: inline-flex; align-items: center; gap: 6px; } .article-end a::before { content: '←'; } /* ── FOOTER ── */ footer { background: var(--dark); color: var(--muted); font-family: var(--sans); font-size: 10px; letter-spacing: 0.08em; padding: 24px 40px; display: flex; justify-content: space-between; align-items: center; } footer a { color: var(--orange); text-decoration: none; } .footer-logo { font-family: var(--sc); font-size: 14px; font-weight: 500; letter-spacing: 0.22em; color: var(--cream); } .footer-logo span { color: var(--orange); } /* ── MOBILE ── */ @media (max-width: 768px) { .top-bar { padding: 6px 16px; } .site-header { padding: 14px 16px; } .site-wordmark { font-size: 22px; } .article-wrap { padding: 32px 16px 48px; } .article-headline { font-size: 30px; } .article-deck { font-size: 16px; } .article-body { font-size: 17px; } footer { flex-direction: column; gap: 12px; text-align: center; padding: 20px 16px; } .article-end { flex-direction: column; gap: 12px; text-align: center; } } /* ── TÜRKÇE BÜYÜK HARFLERİ DÜZELTMESİ ── */ /* text-transform:uppercase Türkçe i harfini yanlış büyütür */ /* Çözüm: uppercase gereken tüm metinler HTML'de zaten büyük yazılmış */ .top-bar, .section-nav a, .kicker, .byline, .article-kicker, .article-meta, .sidebar-label, .section-divider-label, .read-more, .soft-sell-cta, .footer-logo, .masthead-tagline, .site-tagline, .header-format, .back-link, .article-end { text-transform: none; } .site-footer{background:var(--dark)}.footer-main{max-width:1200px;margin:0 auto;padding:48px 40px 32px;display:grid;grid-template-columns:1fr 1px 1fr 1px 1fr;gap:0}.footer-col{padding:0 40px}.footer-col:first-child{padding-left:0}.footer-col:last-child{padding-right:0}.footer-divider-v{background:#1a2d3f}.footer-col-label{font-family:var(--sans);font-size:8.5px;font-weight:600;letter-spacing:0.22em;color:var(--orange);margin-bottom:20px}.footer-col-item{font-family:var(--serif);font-size:15px;color:#5a7a9a;padding:8px 0;border-bottom:1px solid #1a2d3f;transition:color 0.2s}.footer-col-item:last-child{border-bottom:none}.footer-col-item:hover{color:#c0ccd8}.footer-col-item a{color:inherit;text-decoration:none}.footer-col-item.italic{font-style:italic;color:#2a4a6a;font-size:13px}.footer-bottom{border-top:1px solid #1a2d3f;padding:20px 40px;max-width:1200px;margin:0 auto;display:flex;justify-content:space-between;align-items:center}.footer-logo-wrap{display:flex;flex-direction:column}.footer-logo{font-family:var(--sc);font-size:18px;font-weight:300;letter-spacing:0.4em;color:#c0ccd8;white-space:nowrap}.footer-logo-sub{font-family:var(--sans);font-size:8px;letter-spacing:0.28em;color:#4a6a8a;margin-top:3px;text-align:center}.footer-logo span{color:var(--orange)}.footer-copy{font-family:var(--sans);font-size:9px;letter-spacing:0.1em;color:#1e3045}@media(max-width:768px){.footer-main{grid-template-columns:1fr;gap:28px;padding:32px 16px}.footer-divider-v{display:none}.footer-col{padding:0;text-align:center}.footer-bottom{flex-direction:column;gap:12px;text-align:center;padding:16px}} .mobile-slogan-strip { display: none; } @media(max-width:900px) { .mobile-slogan-strip { display: block; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 300; font-size: 13px; color: var(--muted); background: var(--white); padding: 7px 16px; white-space: nowrap; border-bottom: 1px solid var(--rule); letter-spacing: 0.01em; } }