/* Khartoum Wire - kamuya acik site.
Renk ve font degiskenleri icin bkz. tokens.css. Onceden buraya @import
ediliyordu (sıralı, render-blocking ikinci istek); artık tokens.css bu
dosyadan once ayri bir ile HTML head'inde geliyor (SEO fix). */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
}
/* ---------- Tipografi hiyerarsisi ----------
Basliklar sistem serifi (bkz. tokens.css --font-display), govde ve butun UI
ogeleri sistem sans'i. Agirlik 700: Georgia'da 800 kesim yok, tarayici
sentezler ve harfler bulanir. Harf araligi -.015em; sans icin dogru olan
-.03em bir serifte harfleri birbirine yapistiriyor. */
h1, h2, h3, h4 {
font-family: var(--font-display); font-weight: 700; color: var(--ink);
letter-spacing: -.015em; line-height: 1.12; text-wrap: balance;
}
::selection { background: var(--ink); color: var(--ink-invert); }
.wires h4{ letter-spacing: .1em; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--gold); }
/* Govde metnindeki bag rengi TASIYAMAZ: palet tek renkli, hover'da yalnizca
bir ton aciliyor. Isareti alt cizgi veriyor (WCAG 1.4.1: renk tek gosterge
olamaz), harflerin altina degmesin diye offset'li. */
.article-body a, .promo a, .form-note a {
text-decoration: underline; text-underline-offset: 3px;
text-decoration-thickness: 1px; text-decoration-color: var(--ink-3);
}
.article-body a:hover, .promo a:hover, .form-note a:hover { text-decoration-color: currentColor; }
/* Odak: golge yok, gorunur outline */
a:focus-visible, button:focus-visible, input:focus-visible {
outline: 2px solid var(--gold); outline-offset: 2px;
}
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }
/* Yalnizca ekran okuyucular icin */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Icerige atla: odaklanana kadar gizli */
.skip-link {
position: absolute; left: 8px; top: -60px; z-index: 100;
background: var(--gold); color: var(--on-gold); padding: 0 16px;
display: inline-flex; align-items: center; min-height: 44px;
font-size: 13px; font-weight: 700; border-radius: var(--radius);
}
.skip-link:focus { top: 8px; color: var(--on-gold); }
/* Ayrac: gazete sutunlarindaki ince cizgilerin karsiligi.
Bloklar renkli kutuya sarilmaz,
ile ayrilir. */
hr { border: 0; height: 0; margin: 0; }
.rule { border-top: 1px solid var(--line); }
/* Butonlar: dolgun hap bicimi, hafif yukselme animasyonu */
.btn-cta, .btn-ghost {
display: inline-flex; align-items: center; justify-content: center; min-height: 44px;
padding: 0 20px; border-radius: var(--radius-s);
font-family: var(--font-sans); font-size: 13px; font-weight: 700;
letter-spacing: -.01em; border: 1px solid transparent; cursor: pointer;
transition: background var(--dur) var(--ease), transform var(--dur) var(--ease),
box-shadow var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-cta { background: var(--gold); color: var(--on-gold) !important; }
.btn-cta:hover { background: var(--gold-hi); transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-cta:active { transform: translateY(0); }
.btn-ghost { background: none; border-color: currentColor; }
.btn-ghost:hover { color: var(--gold); transform: translateY(-2px); }
/* ---------- Masthead ---------- */
.masthead { position: relative; background: var(--dark); }
/* The wire (DESIGN.md sections 1 and 7): a gold hairline under the masthead
that draws left to right once on load. Replaces the grey border-bottom. */
.masthead::after {
content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
background: var(--gold); transform-origin: left center;
animation: wire-draw .9s var(--ease) both;
}
@keyframes wire-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dot-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.4); } }
/* Broadsheet masthead: date | centred wordmark + motto | search. The two side
columns are equal (1fr) so the wordmark sits on the page's true centre
whatever the date or search box measure. */
.masthead .wrap {
display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
gap: 24px; padding-top: 22px; padding-bottom: 20px;
}
.brand { grid-column: 2; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.masthead .search { justify-self: end; }
.masthead .topdate { justify-self: start; }
.logo { display: flex; align-items: center; gap: 13px; min-height: 44px; }
/* Brand mark: an inline