/* ========================================================= MESAFE — Yayın İlkeleri sayfaları ortak stil dosyası Bu dosyayı altı ilke sayfasıyla aynı klasöre koyun. Çakışmaya karşı önlem: bütün kurallar ".mesafe-ilke" sınıfı altında kapsanmıştır (scoped). Sitenin geri kalanındaki body / a / h1 / footer gibi genel etiketlere DOKUNMAZ — yalnızca içindeki elemanları etkiler. Bu sayede mevcut site stiliyle çakışma riski olmaz. ========================================================= */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;1,9..144,400;1,9..144,500&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400&display=swap'); .mesafe-ilke{ --paper: #eee9e0; --paper-raised: #f6f3ec; --ink: #201d1a; --ink-soft: #55504a; --ink-faint: #8a8377; --rule: #ccc4b3; --accent: #7c2f2b; --accent-soft: #7c2f2b1a; --accent-line: #7c2f2b55; --font-display: 'Fraunces', 'Iowan Old Style', serif; --font-body: 'Source Serif 4', 'Iowan Old Style', Georgia, serif; --measure: 42rem; margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 1.06rem; line-height: 1.75; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mesafe-ilke *{ box-sizing: border-box; } .mesafe-ilke a{ color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } .mesafe-ilke a:hover{ color: var(--ink); } .mesafe-ilke a:focus-visible, .mesafe-ilke button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- Masthead ---------- */ .mesafe-ilke .masthead{ border-bottom: 1px solid var(--rule); background: var(--paper-raised); } .mesafe-ilke .masthead__inner{ max-width: 62rem; margin: 0 auto; padding: 1.35rem 1.5rem 0; display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .mesafe-ilke .wordmark{ font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; letter-spacing: 0.08em; color: var(--ink); text-decoration: none; } .mesafe-ilke .wordmark:hover{ color: var(--accent); } .mesafe-ilke .masthead__section{ font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); } /* horizontal section nav */ .mesafe-ilke .ilkeler-nav{ max-width: 62rem; margin: 0 auto; padding: 0.9rem 1.5rem 1.1rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; } .mesafe-ilke .ilkeler-nav a{ font-size: 0.86rem; color: var(--ink-soft); text-decoration: none; padding-bottom: 0.2rem; border-bottom: 1px solid transparent; white-space: nowrap; } .mesafe-ilke .ilkeler-nav a:hover{ color: var(--accent); } .mesafe-ilke .ilkeler-nav a[aria-current="page"]{ color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; } /* ---------- Page header ---------- */ .mesafe-ilke main{ max-width: var(--measure); margin: 0 auto; padding: 3rem 1.5rem 5rem; } .mesafe-ilke .doc-eyebrow{ font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 0.6rem; } .mesafe-ilke h1.doc-title{ font-family: var(--font-display); font-weight: 600; font-size: clamp(2rem, 4vw, 2.75rem); line-height: 1.15; margin: 0 0 1.1rem; color: var(--ink); } .mesafe-ilke .doc-crossref{ font-style: italic; color: var(--ink-soft); font-size: 0.95rem; border-left: 2px solid var(--rule); padding-left: 1rem; margin: 0 0 1.75rem; } .mesafe-ilke .doc-crossref a{ font-style: normal; } /* ---------- The measure rule (signature element) ---------- */ .mesafe-ilke .olcu{ --tick: 14px; display: flex; align-items: center; gap: 1rem; margin: 0 0 2.75rem; } .mesafe-ilke .olcu__cetvel{ flex: 1 1 auto; height: 10px; background-image: repeating-linear-gradient( to right, var(--rule) 0, var(--rule) 1px, transparent 1px, transparent var(--tick) ); background-position: bottom left; background-size: 100% 100%; border-bottom: 1px solid var(--ink-faint); } .mesafe-ilke .olcu__deger{ flex: 0 0 auto; font-size: 0.78rem; letter-spacing: 0.04em; color: var(--ink-faint); white-space: nowrap; } /* ---------- Body typography ---------- */ .mesafe-ilke article h2{ font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; color: var(--ink); margin: 2.6rem 0 1rem; padding-top: 0.2rem; border-top: 1px solid var(--rule); } .mesafe-ilke article > h2:first-child{ border-top: none; padding-top: 0; } .mesafe-ilke article h3{ font-family: var(--font-display); font-weight: 600; font-size: 1.18rem; color: var(--ink); margin: 1.9rem 0 0.7rem; } .mesafe-ilke article p{ margin: 0 0 1.15rem; } .mesafe-ilke article ul, .mesafe-ilke article ol{ margin: 0 0 1.15rem; padding-left: 1.3rem; } .mesafe-ilke article li{ margin-bottom: 0.55rem; } .mesafe-ilke article li::marker{ color: var(--accent); } .mesafe-ilke article em{ font-style: italic; } .mesafe-ilke article strong{ font-weight: 600; } .mesafe-ilke article blockquote{ margin: 1.4rem 0 1.6rem; padding: 0.2rem 0 0.2rem 1.2rem; border-left: 2px solid var(--accent-line); color: var(--ink-soft); font-size: 0.98rem; } .mesafe-ilke article blockquote p{ margin: 0 0 0.5rem; } .mesafe-ilke article blockquote p:last-child{ margin-bottom: 0; } .mesafe-ilke .dipnot{ font-size: 0.92rem; color: var(--ink-soft); } .mesafe-ilke hr.ayrac{ border: none; border-top: 1px solid var(--rule); margin: 2.6rem 0; } .mesafe-ilke table.kaynak-ornek{ width: 100%; border-collapse: collapse; margin: 1rem 0 1.6rem; font-size: 0.94rem; } .mesafe-ilke table.kaynak-ornek td{ border-top: 1px solid var(--rule); padding: 0.55rem 0.6rem 0.55rem 0; vertical-align: top; } .mesafe-ilke code, .mesafe-ilke .kod{ font-family: 'Source Serif 4', serif; font-style: italic; } .mesafe-ilke .doldur{ background: var(--accent-soft); padding: 0.05em 0.35em; border-radius: 3px; font-style: normal; } .mesafe-ilke .manifesto-misra{ font-family: var(--font-display); font-style: italic; font-size: 1.15rem; line-height: 1.9; margin: 2rem 0; color: var(--ink); } .mesafe-ilke .manifesto-misra p{ margin: 0; } .mesafe-ilke .manifesto-imza{ font-family: var(--font-display); font-weight: 600; letter-spacing: 0.14em; text-align: center; margin-top: 2.5rem; } /* ---------- Footer ---------- */ .mesafe-ilke footer{ border-top: 1px solid var(--rule); background: var(--paper-raised); } .mesafe-ilke footer .footer-inner{ max-width: 62rem; margin: 0 auto; padding: 1.6rem 1.5rem; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; font-size: 0.86rem; color: var(--ink-soft); } .mesafe-ilke footer a{ color: var(--ink-soft); } .mesafe-ilke footer a:hover{ color: var(--accent); } @media (max-width: 640px){ .mesafe-ilke main{ padding: 2rem 1.25rem 3.5rem; } .mesafe-ilke .masthead__inner, .mesafe-ilke .ilkeler-nav, .mesafe-ilke footer .footer-inner{ padding-left: 1.25rem; padding-right: 1.25rem; } }