:root {
--global-max-width: 1400px; /* site max width */
--global-content-width: 640px; /* post-content-width — Türkçe için ~60-65ch */
--global-wide-width: 960px; /* site max width */
--global-radius: 0px; /* default radius */
--global-gallery-gap: 1em; /* Image gallery distance between images */
--global-hyphens: auto; /* Türkçe uzun kelimeler için otomatik tireleme */
--global-header-height: 92px;
--global-theme-notifications: visible; /* visible/hidden */
--global-progress-bar: visible; /* visible/hidden */
--global-content-preview-fading: 0%; /* 50%-100% for fading effect */
--global-scroll-behavior: smooth;
/* === T-A PALETTE (LIGHT MODE) === */
--color-bg: var(--paper-200) !important; /* ana cream — değişmedi */
--color-bg-elev: #fdfbf6; /* primary feed surface */
--color-bg-acc: var(--paper-200, #f5f1e8);
/* Üç seviyeli editorial yüzey sistemi */
--dragonomi-surface: #faf8f2;
--dragonomi-footer: #efe9dc;
--dragonomi-divider: #ded4c3;
/* T-A semantik tokens */
--color-data: #0891b2; /* cyan — sayı/veri vurgusu (Refinitiv ilhamı) */
--color-amber: #b45309; /* amber — eyebrow/date accent (Bloomberg ilhamı) */
--color-warm-border: rgba(92, 67, 38, 0.12);
/* Eski mavi link tokenları kaldırıldı — site palette amber-cream odaklı */
--color-link: var(--color-brand);
--color-link-visited: var(--color-amber);
/* Analist Tavsiyeleri sektör rengi: editorial deep navy (Çip ve YZ ile aynı aile) */
--tag-analist-tavsiyeleri: #1e40af;
/* Broken slate-900 reference fix — data table dark bg, paletle uyumlu warm-ink */
--color-bg-data: var(--ink-900);
/* Financial semantic colors — editorial deeper tones (Bloomberg/FT) */
--color-up: #15803d; /* forest green — pozitif */
--color-up-soft: #dcfce7; /* mint pastel zemin */
--color-up-deep: #14532d; /* dark forest */
--color-down: #991b1b; /* burgundy — negatif */
--color-down-soft: #fee2e2; /* rose pastel zemin */
--color-down-deep: #7f1d1d; /* wine deep */
--color-live: #c2410c; /* rust amber — live indicator (palet uyumlu) */
/* =================================================================
CANONICAL SECTOR PALETTE (editorial deeper tones — Bloomberg/FT)
Tüm sektör görsel componentlari (chip, pill, rank indicator, tag)
BU tokenlardan okumalı. Tek kaynak.
================================================================= */
--sector-cip: #1e40af; /* deep navy — silikon/AI */
--sector-yazilim: #5b21b6; /* deep violet — code */
--sector-madencilik: #78350f; /* deep brown — earth */
--sector-celik: #334155; /* slate dark — metal */
--sector-tarim: #4d7c0f; /* olive — agri */
--sector-enerji: #b45309; /* Bloomberg amber — oil/gas */
--sector-yenilenebilir: #15803d; /* forest — eco */
--sector-otomotiv: #991b1b; /* burgundy — speed */
--sector-seyahat: #155e75; /* deep teal — sky/sea */
--sector-tuketim: #9d174d; /* burgundy rose — retail */
--sector-kimya: #115e59; /* teal-green — lab */
--sector-savunma: #3f6212; /* military olive */
--sector-finans: #172554; /* dark navy — bank */
--sector-lojistik: #c2410c; /* rust — ship */
--sector-ilac: #831843; /* wine — pharma */
/* Eski --tag-* tokenları artık sektör tokenlarından besleniyor (tek kaynak) */
--tag-cip-ve-yapay-zeka: var(--sector-cip);
--tag-yapay-zeka: var(--sector-cip);
--tag-yari-iletken: var(--sector-cip);
--tag-teknoloji: var(--sector-cip);
--tag-veri-merkezi: var(--sector-cip);
--tag-ag-donanimi: var(--sector-cip);
--tag-yazilim: var(--sector-yazilim);
--tag-yazilim-internet: var(--sector-yazilim);
--tag-siber-guvenlik: var(--sector-yazilim);
--tag-madencilik: var(--sector-madencilik);
--tag-metaller: var(--sector-madencilik);
--tag-nadir-metaller: var(--sector-madencilik);
--tag-emtia: var(--sector-madencilik);
--tag-celik: var(--sector-celik);
--tag-endustri: var(--sector-celik);
--tag-tarim: var(--sector-tarim);
--tag-gida: var(--sector-tarim);
--tag-enerji: var(--sector-enerji);
--tag-yenilenebilir-enerji: var(--sector-yenilenebilir);
--tag-otomotiv: var(--sector-otomotiv);
--tag-elektrikli-arac: var(--sector-otomotiv);
--tag-otonom-surus: var(--sector-otomotiv);
--tag-seyahat: var(--sector-seyahat);
--tag-havayollari: var(--sector-seyahat);
--tag-tuketim: var(--sector-tuketim);
--tag-kimya: var(--sector-kimya);
--tag-savunma: var(--sector-savunma);
--tag-finans: var(--sector-finans);
--tag-lojistik: var(--sector-lojistik);
--tag-nakliyat: var(--sector-lojistik);
--tag-ilac: var(--sector-ilac);
/* Warm shadow (paper kimliği) */
--shadow-warm: rgba(92, 67, 38, 0.10);
--shadow-warm-light: rgba(92, 67, 38, 0.05);
--shadow-warm-strong: rgba(92, 67, 38, 0.16);
}
/* ============================================================ */
/* TYPOGRAPHY ENHANCEMENTS — OpenType, hyphenation, optical */
/* Bloomberg/FT seviyesi okuma deneyimi için ince ayarlar */
/* ============================================================ */
/* 1) OpenType features + render kalitesi (global) */
html {
font-feature-settings: "kern", "liga", "calt";
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* 2) Variable font optical sizing — Source Serif 4 opsz axis */
html { font-optical-sizing: auto; }
/* 3) Türkçe hyphenation + hanging punctuation — uzun kelimeler tirelenir */
.gh-content, .post-content, .content,
.post-card__excerpt, .sabah-card__excerpt {
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 6 3 3;
hanging-punctuation: first last;
}
/* 4) Tabular numerals — finansal sayılar/tarihler hizalı */
time, .news-feed__time, .news-feed__count, .news-feed__more-link,
.top-list__rank, .top-list__count, .top-list__count strong,
.stats-strip strong, .sabah-card__date, .sabah-card__meta,
.date-divider__label, .date-divider__count,
.news-panel__sub, .post-info time {
font-variant-numeric: tabular-nums;
}
/* 5) text-wrap: balance — başlık satırları dengeli kırılsın, orphan olmasın */
.post-hero__title,
.sabah-card__title,
.news-feed__title,
.post-card__title,
.topic-section .section-title,
.news-panel__title,
h1, h2 {
text-wrap: balance;
}
/* Excerpt/lead paragraf — pretty wrap (orphan engelle) */
.post-hero__excerpt,
.sabah-card__excerpt,
.post-card__excerpt {
text-wrap: pretty;
}
/* 6) Display headings — daha sıkı tracking (büyük serif başlıklar) */
.post-hero__title,
body h1 {
letter-spacing: -0.02em;
}
/* 7) Body content — Türkçe için line-height sıkıştır */
.gh-content,
.post-content,
.content {
line-height: 1.55;
}
/* 8) Post hero excerpt — italic, klasik dergi lead pattern */
.post-hero__excerpt {
font-family: var(--font-serif) !important;
font-style: italic;
font-size: 1.1rem;
line-height: 1.45;
color: var(--color-text-acc);
}
/* 9) Figcaption — italic gri caption, sol amber bar (NYT/FT pattern) */
.gh-content figcaption,
.post-content figcaption,
.content figcaption,
.post-hero figcaption {
font-family: var(--font-serif);
font-style: italic;
font-size: 0.85rem;
line-height: 1.45;
color: var(--color-text-muted);
margin-top: 0.6em;
padding-left: 0.9em;
border-left: 2px solid var(--color-amber);
max-width: 36em;
}
/* 10) Inline code — amber tint background */
.gh-content code:not(pre code),
.post-content code:not(pre code),
.content code:not(pre code) {
font-family: var(--font-mono);
font-feature-settings: "calt", "liga";
background: color-mix(in srgb, var(--color-amber) 8%, transparent);
color: var(--color-text);
padding: 0.1em 0.35em;
border-radius: 2px;
font-size: 0.92em;
}
/* 11) Pre/code blocks — JetBrains Mono + amber accent + warm bg */
.gh-content pre,
.post-content pre,
.content pre {
font-family: var(--font-mono);
font-feature-settings: "calt", "liga";
background: var(--color-bg-acc);
border-left: 3px solid var(--color-amber);
padding: 1em 1.25em;
font-size: 0.9em;
line-height: 1.5;
overflow-x: auto;
border-radius: 2px;
}
/* === T-A PALETTE (DARK MODE) — warm-dark, paper identity korunur === */
@media (prefers-color-scheme: dark) {
html[data-color-scheme=system] {
--color-bg: #0f0d0a !important;
--color-bg-elev: #1a1614 !important;
--color-bg-acc: #14110d !important;
--dragonomi-surface: #17130f;
--dragonomi-footer: #0b0907;
--dragonomi-divider: #332a21;
--color-text: #f5f0e6 !important;
--color-text-acc: #d4ccb8 !important;
--color-text-muted: #a89c8a !important;
--color-text-reverse: #1f1b16 !important;
--color-border: rgba(245, 240, 230, 0.08) !important;
--color-hairline: rgba(245, 240, 230, 0.05) !important;
--color-brand: #f7720d; /* brand parlar */
--color-data: #00bfff; /* cyan parlar (Refinitiv) */
--color-amber: #f7b500; /* amber Bloomberg yellow */
--color-warm-border: rgba(245, 240, 230, 0.08);
/* Sektör tokenları — dark mode lighter variants (görünür kalmalı) */
--sector-cip: #60a5fa;
--sector-yazilim: #a78bfa;
--sector-madencilik: #d6a25b;
--sector-celik: #94a3b8;
--sector-tarim: #a3e635;
--sector-enerji: #f7b500;
--sector-yenilenebilir: #4ade80;
--sector-otomotiv: #f87171;
--sector-seyahat: #38bdf8;
--sector-tuketim: #f472b6;
--sector-kimya: #5eead4;
--sector-savunma: #84cc16;
--sector-finans: #818cf8;
--sector-lojistik: #fb923c;
--sector-ilac: #fb7185;
}
}
html[data-color-scheme=dark] {
--color-bg: #0f0d0a !important;
--color-bg-elev: #1a1614 !important;
--color-bg-acc: #14110d !important;
--dragonomi-surface: #17130f;
--dragonomi-footer: #0b0907;
--dragonomi-divider: #332a21;
--color-text: #f5f0e6 !important;
--color-text-acc: #d4ccb8 !important;
--color-text-muted: #a89c8a !important;
--color-text-reverse: #1f1b16 !important;
--color-border: rgba(245, 240, 230, 0.08) !important;
--color-hairline: rgba(245, 240, 230, 0.05) !important;
--color-brand: #f7720d;
--color-data: #00bfff;
--color-amber: #f7b500;
--color-warm-border: rgba(245, 240, 230, 0.08);
/* Sektör tokenları — dark mode lighter variants (görünür kalmalı) */
--sector-cip: #60a5fa;
--sector-yazilim: #a78bfa;
--sector-madencilik: #d6a25b;
--sector-celik: #94a3b8;
--sector-tarim: #a3e635;
--sector-enerji: #f7b500;
--sector-yenilenebilir: #4ade80;
--sector-otomotiv: #f87171;
--sector-seyahat: #38bdf8;
--sector-tuketim: #f472b6;
--sector-kimya: #5eead4;
--sector-savunma: #84cc16;
--sector-finans: #818cf8;
--sector-lojistik: #fb923c;
--sector-ilac: #fb7185;
}
/* ============================================================ */
/* HERO — main-post ile alttaki cards arasına hairline */
/* ============================================================ */
.home-hero[data-layout="3-featured+latest"] .home-hero-cards,
.home-hero[data-layout="3-featured+latest+editors"] .home-hero-cards,
.home-hero[data-layout="3-featured+latest-v2"] .home-hero-cards {
border-top: 1px solid var(--color-border, rgba(92, 67, 38, 0.15));
padding-top: 1.5em;
margin-top: 1.5em;
}
/* ============================================================ */
/* NAV — underline sadece aktif sayfada (default underline kaldır)*/
/* ============================================================ */
.nav a {
border-bottom: none !important;
opacity: 0.9;
}
.nav a:hover {
opacity: 1;
color: var(--color-amber);
}
.nav-current:not(.is-mainitem) a,
.nav-current-parent:not(.is-mainitem) a {
border-bottom: 2px solid var(--color-brand) !important;
opacity: 1;
}
/* ============================================================ */
/* HERO NEWS FEED — gazete akışı + Aktif Şirketler + Dikkat Çek */
/* ============================================================ */
/* === SABAH NOTU MODULE (prominent card, sayfanın üstünde) === */
@keyframes sabah-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(0.85); }
}
/* Sol kolon (sabah card + news-feed) ortak wrapper */
.news-hero__main { display: flex; flex-direction: column; gap: 0.9em; min-width: 0; }
.sabah-card {
display: block;
text-decoration: none;
color: var(--color-text);
background: color-mix(in srgb, var(--color-amber, #b45309) 7%, var(--color-bg-elev, #faf8f3));
border-left: 3px solid var(--color-amber, #b45309);
border-radius: 3px;
padding: 0.7em 1em 0.8em;
box-shadow:
0 2px 6px var(--shadow-warm-light),
0 1px 2px var(--shadow-warm-light),
0 0 0 1px var(--color-border);
transition:
transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 220ms ease,
background 220ms ease;
}
.sabah-card:hover {
transform: translateY(-1px);
box-shadow:
0 6px 14px var(--shadow-warm),
0 2px 4px var(--shadow-warm-light),
0 0 0 1px var(--color-border);
background: color-mix(in srgb, var(--color-amber, #b45309) 10%, var(--color-bg-elev, #faf8f3));
}
.sabah-card__head {
display: flex; align-items: center; justify-content: space-between;
gap: 0.5em;
margin-bottom: 0.3em;
}
.sabah-card__eyebrow {
display: inline-flex; align-items: center; gap: 0.45em;
font-family: var(--font-sans);
font-size: 0.62rem; font-weight: 800;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--color-amber, #b45309);
}
.sabah-card__dot {
width: 7px; height: 7px;
background: var(--color-amber, #b45309);
border-radius: 50%;
}
.is-today .sabah-card__dot {
animation: sabah-pulse 2.4s ease-in-out infinite;
}
.sabah-card__sep { opacity: 0.4; }
.sabah-card__date {
color: var(--color-text-muted);
font-weight: 700;
}
.sabah-card__meta {
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.62rem; font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase; letter-spacing: 0.05em;
white-space: nowrap;
}
.sabah-card__title {
font-family: var(--font-serif);
font-size: 1.05rem; font-weight: 700;
line-height: 1.25;
margin: 0 0 0.25em;
color: var(--color-text);
transition: color 180ms ease;
}
.sabah-card:hover .sabah-card__title { color: var(--color-brand); }
.sabah-card__excerpt {
font-family: var(--font-serif);
font-size: 0.82rem;
line-height: 1.4;
color: var(--color-text-acc, var(--color-text));
margin: 0 0 0.5em;
opacity: 0.82;
/* Max 2 satır göster, sonra ellipsis */
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sabah-card__cta {
display: inline-block;
font-family: var(--font-sans);
font-size: 0.66rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--color-brand, #e85d04);
transition: transform 220ms ease;
}
.sabah-card:hover .sabah-card__cta {
transform: translateX(3px);
}
/* Dün gösterimi — daha sade, "tazelik azaltılmış" */
.sabah-card-wrap.is-yesterday .sabah-card {
background: var(--color-bg-elev, #faf8f3);
border-left-color: var(--color-text-muted);
}
.sabah-card-wrap.is-yesterday .sabah-card__eyebrow {
color: var(--color-text-muted);
opacity: 0.85;
}
@media (max-width: 700px) {
.sabah-card { padding: 0.65em 0.85em 0.75em; }
.sabah-card__title { font-size: 0.95rem; }
.sabah-card__excerpt { font-size: 0.78rem; }
.sabah-card__meta { display: none; }
}
/* === SEKTÖR ŞERİDİ (desktop only) — section-chips pattern === */
.sektor-strip {
margin: 0.6em auto 0.4em;
max-width: var(--global-max-width);
}
.sektor-strip > .container.wrapper {
background: transparent;
padding: 0;
}
.sektor-strip__nav {
display: flex; flex-wrap: wrap; justify-content: center;
gap: 0.5em;
font-family: var(--font-sans);
}
/* Topic-section .chip pattern + sektör-özgü renkli alt çizgi */
.sektor-strip__nav a {
display: inline-block;
padding: 0.4em 0.9em;
font-size: 0.78rem; font-weight: 600;
letter-spacing: 0.04em;
color: var(--color-text);
background: var(--color-bg-acc);
border: 1px solid var(--color-border);
border-bottom: 2px solid color-mix(in srgb, var(--color-border) 70%, var(--sector-color, var(--color-border)) 30%);
border-radius: 0;
text-decoration: none;
transition: all 180ms ease;
line-height: 1.2;
}
.sektor-strip__nav a:hover {
background: var(--sector-color, var(--color-bg-reverse));
color: #fff;
border-color: var(--sector-color, var(--color-bg-reverse));
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
/* Sektör chip strip renkleri — canonical --sector-* tokenlarına referans */
.sektor-strip__nav a[href*="cip-ve-yapay-zeka"] { --sector-color: var(--sector-cip); }
.sektor-strip__nav a[href*="yazilim-internet"] { --sector-color: var(--sector-yazilim); }
.sektor-strip__nav a[href*="madencilik"] { --sector-color: var(--sector-madencilik); }
.sektor-strip__nav a[href*="celik"] { --sector-color: var(--sector-celik); }
.sektor-strip__nav a[href*="yenilenebilir"] { --sector-color: var(--sector-yenilenebilir); }
.sektor-strip__nav a[href*="otomotiv"] { --sector-color: var(--sector-otomotiv); }
.sektor-strip__nav a[href*="seyahat"] { --sector-color: var(--sector-seyahat); }
.sektor-strip__nav a[href*="tuketim"] { --sector-color: var(--sector-tuketim); }
.sektor-strip__nav a[href*="kimya"] { --sector-color: var(--sector-kimya); }
.sektor-strip__nav a[href*="savunma"] { --sector-color: var(--sector-savunma); }
.sektor-strip__nav a[href*="finans"] { --sector-color: var(--sector-finans); }
.sektor-strip__nav a[href*="lojistik"] { --sector-color: var(--sector-lojistik); }
.sektor-strip__nav a[href*="ilac"] { --sector-color: var(--sector-ilac); }
/* === STATS STRIP (mobile only) === */
.stats-strip {
text-align: center;
padding: 1em 0;
font-size: 0.88rem;
color: var(--color-text-muted, #5a544a);
letter-spacing: 0.04em;
border-top: 2px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
background: transparent;
font-family: var(--font-serif);
}
.stats-strip strong { color: var(--color-text, #0b0b0b); font-weight: 700; margin: 0 0.15em; font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.stats-strip__date { font-weight: 700; color: var(--color-text, #0b0b0b); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; }
.stats-strip__sep { margin: 0 0.6em; opacity: 0.35; }
/* === Show/hide based on viewport === */
@media (min-width: 700px) {
.stats-strip--mobile { display: none; }
}
.sektor-strip__hint { display: none; }
/* Mobile'da chip şeridi yatay scroll'la kalsın */
@media (max-width: 699.99px) {
.sektor-strip {
margin: 0.5em 0;
position: relative;
}
.sektor-strip__hint {
position: absolute;
z-index: 20;
top: 0;
right: 0;
width: 3.5rem;
height: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 0.65rem;
color: var(--color-brand);
background: linear-gradient(to right, transparent 0%, var(--color-bg) 58%);
box-shadow: -8px 0 12px color-mix(in srgb, var(--color-bg) 88%, transparent);
font-family: 'JetBrains Mono', ui-monospace, monospace;
font-size: 0.9rem;
font-weight: 700;
pointer-events: none;
transition: opacity 180ms ease;
}
.sektor-strip.is-scrolled .sektor-strip__hint {
opacity: 0;
visibility: hidden;
}
.sektor-strip > .container.wrapper {
padding: 0 0.95em;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
scroll-snap-type: x proximity;
}
.sektor-strip > .container.wrapper::-webkit-scrollbar { display: none; }
.sektor-strip__nav {
flex-wrap: nowrap;
justify-content: flex-start;
width: max-content;
padding: 0.25em 0;
}
.sektor-strip__nav a {
scroll-snap-align: start;
font-size: 0.72rem;
padding: 0.35em 0.7em;
}
}
.news-hero {
display: grid;
grid-template-columns: 2fr 1fr;
gap: 1.5em;
padding: 0.45em 0 1.35em;
align-items: start;
}
/* Dikey gazete kuralı — sol/sağ kolon arası ince double rule (desktop) */
@media (min-width: 901px) {
.news-hero { position: relative; }
.news-hero::after {
content: "";
position: absolute;
left: calc(66.66% + 0.1em); top: 0.5em; bottom: 1em;
width: 3px;
border-left: 1px solid var(--color-border);
border-right: 1px solid var(--color-border);
pointer-events: none;
}
}
@media (max-width: 900px) {
.news-hero { grid-template-columns: 1fr; gap: 1.5em; }
}
/* === FEED — primary kart, sayfadan "yükselmiş" hissi === */
.news-feed {
background: var(--color-bg-elev, #faf8f3);
box-shadow:
0 6px 14px var(--shadow-warm-light),
0 2px 4px var(--shadow-warm-light),
0 0 0 1px var(--color-border);
border-radius: 3px;
border-left: 4px solid var(--color-amber, #b45309);
position: relative;
transition: box-shadow 220ms ease;
}
.news-feed:hover {
box-shadow:
0 10px 24px var(--shadow-warm),
0 4px 8px var(--shadow-warm-light),
0 0 0 1px var(--color-border);
}
.news-feed__header {
display: flex; align-items: baseline; justify-content: space-between;
padding: 0.6em 1.4em 0.45em;
border-bottom: 1px solid var(--color-border);
position: relative;
}
.news-feed__title {
font-family: var(--font-serif);
font-size: 0.95rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
margin: 0;
color: var(--color-text, #0b0b0b);
}
.news-feed__title::before { content: "[ "; color: var(--color-amber); opacity: 0.55; font-weight: 400; }
.news-feed__title::after { content: " ]"; color: var(--color-amber); opacity: 0.55; font-weight: 400; }
.news-feed__count {
font-size: 0.72rem; color: var(--color-text-muted, #5a544a);
letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-variant-numeric: tabular-nums;
opacity: 0.7;
}
.news-feed__list { list-style: none; margin: 0; padding: 0; }
.news-feed__item {
display: grid; grid-template-columns: 120px 1fr auto;
align-items: center; gap: 0.9em;
padding: 0.36em 1.4em;
border-bottom: 1px solid var(--color-hairline);
transition: background 150ms ease, padding-left 200ms ease;
}
.news-feed__sector { text-align: left; }
.news-feed__region { display: none; }
/* Sektör pillar — Bloomberg "eyebrow" stili: %12 renk tint + dark text + renkli nokta */
.sector-pill {
font-family: var(--font-sans);
font-size: 0.62rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.12em;
white-space: nowrap;
padding: 0.28em 0.6em 0.28em 0.45em;
border-radius: 2px;
display: inline-flex; align-items: center; gap: 0.4em;
color: var(--color-text, #1f1b16);
background: color-mix(in srgb, var(--sector-color, #b45309) 18%, transparent);
border: none;
opacity: 1;
transition: background 180ms ease;
}
.sector-pill:hover {
background: color-mix(in srgb, var(--sector-color, #b45309) 28%, transparent);
}
.sector-pill::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--sector-color, var(--color-amber));
flex-shrink: 0;
}
/* Sektör pill renkleri — canonical --sector-* tokenlarına referans (tek kaynak) */
.sector-pill--cip { --sector-color: var(--sector-cip); }
.sector-pill--yazilim { --sector-color: var(--sector-yazilim); }
.sector-pill--maden { --sector-color: var(--sector-madencilik); }
.sector-pill--celik { --sector-color: var(--sector-celik); }
.sector-pill--tarim { --sector-color: var(--sector-tarim); }
.sector-pill--enerji { --sector-color: var(--sector-enerji); }
.sector-pill--yenil { --sector-color: var(--sector-yenilenebilir); }
.sector-pill--oto { --sector-color: var(--sector-otomotiv); }
.sector-pill--seyahat { --sector-color: var(--sector-seyahat); }
.sector-pill--tuketim { --sector-color: var(--sector-tuketim); }
.sector-pill--kimya { --sector-color: var(--sector-kimya); }
.sector-pill--savunma { --sector-color: var(--sector-savunma); }
.sector-pill--finans { --sector-color: var(--sector-finans); }
.sector-pill--lojistik { --sector-color: var(--sector-lojistik); }
.sector-pill--ilac { --sector-color: var(--sector-ilac); }
/* === DATE DIVIDER — Bloomberg "session bar" === */
.date-divider {
display: flex; align-items: center; justify-content: space-between;
padding: 0.5em 1.4em 0.4em;
background: color-mix(in srgb, var(--color-amber) 9%, transparent);
border-top: 1px solid color-mix(in srgb, var(--color-amber) 30%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--color-amber) 30%, transparent);
list-style: none;
opacity: 1;
}
.date-divider:first-child { border-top: none; }
/* "Bugün" satırı özel vurgu — daha güçlü amber zemin + pulse dot */
.date-divider--today {
background: color-mix(in srgb, var(--color-amber) 16%, transparent);
}
.date-divider--today .date-divider__label {
display: inline-flex; align-items: center; gap: 0.45em;
}
.date-divider--today .date-divider__label::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-amber);
animation: sabah-pulse 2.4s ease-in-out infinite;
}
.date-divider__label {
font-family: var(--font-serif);
font-size: 0.75rem; font-weight: 800;
color: var(--color-amber, #b45309);
text-transform: uppercase; letter-spacing: 0.14em;
}
.date-divider__count {
font-family: var(--font-sans);
font-size: 0.6rem; color: var(--color-text-muted, #5a544a);
text-transform: uppercase; letter-spacing: 0.08em;
font-weight: 500;
opacity: 0.8;
}
@media (max-width: 700px) {
.news-feed__item { grid-template-columns: 1fr; gap: 0; padding: 0.5em 0.95em; }
.news-feed__sector { display: none; }
.news-feed__region { display: none; }
.date-divider { padding: 0.4em 0.95em 0.25em; }
}
.news-feed__item {
position: relative;
}
.news-feed__item::after {
content: "→";
position: absolute;
right: 1.2em; top: 50%;
transform: translateY(-50%) translateX(-4px);
color: var(--color-brand);
font-family: var(--font-sans);
font-weight: 700;
font-size: 0.95rem;
opacity: 0;
transition: opacity 180ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
pointer-events: none;
}
.news-feed__item:hover {
background: rgba(232, 93, 4, 0.05);
padding-left: 1.7em;
}
.news-feed__item:hover::after {
opacity: 1;
transform: translateY(-50%) translateX(0);
}
.news-feed__item:last-child { border-bottom: none; }
.news-feed__time {
font-size: 0.78rem; color: var(--color-text-muted, #5a544a);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-weight: 500; font-variant-numeric: tabular-nums;
text-transform: lowercase;
}
.news-feed__time--now { color: var(--color-brand, #e85d04); font-weight: 700; }
.news-feed__title-link {
font-family: var(--font-serif);
font-size: 0.92rem; font-weight: 600;
color: var(--color-text, #0b0b0b); text-decoration: none;
line-height: 1.2;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
min-width: 0; display: block;
}
.news-feed__title-link:hover { color: var(--color-brand, #e85d04); }
.news-feed__region { text-align: right; }
.region-pill {
font-family: var(--font-sans);
font-size: 0.7rem; font-weight: 600;
text-transform: uppercase; letter-spacing: 0.12em;
white-space: nowrap;
padding: 0.2em 0;
display: inline-flex; align-items: center; gap: 0.4em;
color: var(--color-text-muted, #5a544a);
background: transparent;
}
.region-icon {
width: 22px; height: 14px;
opacity: 0.7;
flex-shrink: 0;
}
/* Eski sınıflar — geriye dönük uyumluluk için override yok */
.region-pill--amerika,
.region-pill--asya,
.region-pill--avrupa { color: var(--color-text-muted, #5a544a); background: transparent; }
/* Header'daki "Tüm akış →" link */
.news-feed__more-link {
font-family: var(--font-sans);
font-size: 0.72rem; font-weight: 600;
color: var(--color-text-muted, #5a544a);
text-decoration: none;
text-transform: uppercase; letter-spacing: 0.1em;
opacity: 0.85;
transition: color 180ms ease, opacity 180ms ease;
}
.news-feed__more-link:hover {
color: var(--color-amber);
opacity: 1;
}
@media (max-width: 600px) {
.news-feed__item { padding: 0.6em 0.85em; gap: 0.5em; }
.news-feed__title-link { font-size: 0.95rem; }
}
/* === SIDEBAR PANELS === */
.news-sidebar { display: flex; flex-direction: column; gap: 0.7em; }
/* Sidebar kartları — primary'den hafif: noise/gölge yok, sadece hairline */
.news-panel {
background: var(--dragonomi-surface);
border-top: 1px solid var(--dragonomi-divider);
border-radius: 0;
padding: 0 0 0.6em;
position: relative;
transition: opacity 220ms ease;
}
.news-panel:hover { opacity: 0.98; }
.news-panel__head {
display: flex; align-items: baseline; justify-content: space-between;
gap: 0.5em;
margin: 0 0 0.5em;
padding: 0.55em 0 0.4em;
border-bottom: 1px solid var(--color-hairline);
position: relative;
}
.news-panel__title {
font-family: var(--font-serif);
font-size: 0.78rem; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.14em;
margin: 0;
color: var(--color-text-acc, var(--color-text));
}
.news-panel__sub {
font-size: 0.65rem; color: var(--color-text-muted, #5a544a);
text-transform: uppercase; letter-spacing: 0.1em;
font-weight: 700;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-variant-numeric: tabular-nums;
white-space: nowrap;
opacity: 0.7;
}
/* === TOP COMPANIES LIST === */
.top-list { list-style: none; margin: 0; padding: 0; }
.top-list li {
display: grid; grid-template-columns: 32px 1fr auto;
align-items: baseline; gap: 0.5em;
padding: 0.2em 0;
border-bottom: 1px dotted var(--color-hairline);
transition: padding-left 200ms ease;
}
.top-list li:hover { padding-left: 0.4em; }
.top-list li:last-child { border-bottom: none; }
.top-list__rank {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
font-size: 0.76rem; color: var(--color-text-muted, #5a544a);
font-weight: 600; font-variant-numeric: tabular-nums;
opacity: 0.7;
letter-spacing: -0.02em;
display: inline-flex;
align-items: center;
gap: 0.5em;
position: relative;
}
/* Sektör renk indicator — rank'ın solunda 3px renk barı */
.top-list__rank::before {
content: "";
display: inline-block;
width: 3px; height: 1em;
background: var(--sector-color, transparent);
border-radius: 1px;
flex-shrink: 0;
}
/* Top-list rank — data-sector → canonical --sector-* tokenları */
.top-list__rank[data-sector*="cip-ve-yapay-zeka"] { --sector-color: var(--sector-cip); }
.top-list__rank[data-sector*="yazilim-internet"] { --sector-color: var(--sector-yazilim); }
.top-list__rank[data-sector*="madencilik"] { --sector-color: var(--sector-madencilik); }
.top-list__rank[data-sector*="celik"] { --sector-color: var(--sector-celik); }
.top-list__rank[data-sector*="tarim"] { --sector-color: var(--sector-tarim); }
.top-list__rank[data-sector*="enerji"] { --sector-color: var(--sector-enerji); }
.top-list__rank[data-sector*="yenilenebilir"] { --sector-color: var(--sector-yenilenebilir); }
.top-list__rank[data-sector*="otomotiv"] { --sector-color: var(--sector-otomotiv); }
.top-list__rank[data-sector*="seyahat"] { --sector-color: var(--sector-seyahat); }
.top-list__rank[data-sector*="tuketim"] { --sector-color: var(--sector-tuketim); }
.top-list__rank[data-sector*="kimya"] { --sector-color: var(--sector-kimya); }
.top-list__rank[data-sector*="savunma"] { --sector-color: var(--sector-savunma); }
.top-list__rank[data-sector*="finans"] { --sector-color: var(--sector-finans); }
.top-list__rank[data-sector*="lojistik"] { --sector-color: var(--sector-lojistik); }
.top-list__rank[data-sector*="ilac"] { --sector-color: var(--sector-ilac); }
.top-list__name {
font-family: var(--font-serif);
font-size: 0.86rem; color: var(--color-text, #0b0b0b);
text-decoration: none; font-weight: 600;
line-height: 1.2;
}
.top-list__name:hover { color: var(--color-brand, #e85d04); }
.top-list__count {
text-align: right; font-size: 0.66rem;
padding-inline-end: 0.65rem;
color: var(--color-text-muted, #5a544a); font-weight: 600;
font-variant-numeric: tabular-nums;
text-transform: uppercase; letter-spacing: 0.05em;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
}
.top-list__count strong { color: var(--color-amber, #b45309); font-size: 0.8rem; font-weight: 700; }
.top-list__loading {
grid-template-columns: 1fr !important;
color: var(--color-text-muted, #5a544a);
font-style: italic; padding: 0.5em 0;
}
/* === FEATURED (DİKKAT ÇEKENLER) — legacy, artık topic-section'da === */
.featured-list { list-style: none; margin: 0; padding: 0; }
.featured-item {
padding: 0.9em 0;
border-bottom: 1px dotted var(--color-hairline);
transition: padding-left 200ms ease;
}
.featured-item:hover { padding-left: 0.4em; }
.featured-item:first-child { padding-top: 0; }
.featured-item:last-child { border-bottom: none; padding-bottom: 0; }
.featured-item__title {
font-family: var(--font-headings);
font-size: 1.02rem; font-weight: 700;
color: var(--color-text, #0b0b0b); text-decoration: none;
line-height: 1.3; display: block;
}
.featured-item__title:hover { color: var(--color-brand, #e85d04); }
.featured-item__meta {
font-size: 0.7rem; color: var(--color-text-muted, #5a544a);
margin-top: 0.35em; letter-spacing: 0.08em;
text-transform: uppercase; font-weight: 600;
}
.featured-item__meta span { color: var(--color-brand, #e85d04); }
/* ============================================================ */
/* SABAH NOTLARI RIBBON — day-banner'ın yerine, daily ritual */
/* ============================================================ */
.sabah-ribbon-wrap {
padding-top: 1.5em;
padding-bottom: 1em;
}
/* MOBILE — header: Abone Ol küçük + brand text gerçekten ortalı */
@media (max-width: 47.99em) {
.header__container {
gap: 1em !important;
}
.header__actions .signup-link,
.header__actions .btn.signup-link,
.header__actions .btn--brand {
padding: 0.45em 0.65em !important;
min-width: max-content;
white-space: nowrap;
font-size: 0.7rem !important;
line-height: 1 !important;
letter-spacing: 0.01em !important;
flex: 0 0 auto;
}
.header__actions .signin-link {
padding: 0.45em 0.5em !important;
font-size: 0.78rem !important;
}
/* DG-K46 (v2.4.139): mobilde sembol GÖRÜNÜR (kullanıcı kararı — solda küçük) */
.header__brand .brand-mark {
display: inline-block !important;
height: 26px !important;
width: 26px !important;
}
}
/* MOBILE — sıra: Sabah Notları (tazeyse) → Latest News → Hero Featured */
@media (max-width: 61.99em) {
.home-hero {
display: flex !important;
flex-direction: column !important;
}
/* Latest news en üste */
.home-hero > .home-hero-list-wrapper {
order: 1 !important;
margin-top: 0 !important;
}
/* Hero grup (main-post + cards) altta */
.home-hero > .home-hero-group {
order: 2 !important;
}
}
/* Desktop: hero sol kolonuyla hizalı */
@media (min-width: 62em) {
.sabah-ribbon-wrap {
/* hero flex: main-post=2 + list-wrapper=1 → ribbon %66, gap 1em */
padding-right: calc(33.33% + 1em);
box-sizing: border-box;
}
/* Latest news listesi: max-height kaldır + ribbon varsa yukarı çek */
.home-hero[data-layout="3-featured+latest"] .home-hero-list-wrapper,
.home-hero[data-layout="3-featured+latest+editors"] .home-hero-list-wrapper,
.home-hero[data-layout="3-featured+latest-v2"] .home-hero-list-wrapper {
max-height: none !important;
height: auto !important;
align-self: flex-start !important;
overflow: visible !important;
}
/* Ribbon TAZE ise sidebar'ı yukarı çek; ribbon yoksa olduğu yerde kalsın */
body.has-fresh-ribbon .home-hero[data-layout="3-featured+latest"] .home-hero-list-wrapper,
body.has-fresh-ribbon .home-hero[data-layout="3-featured+latest+editors"] .home-hero-list-wrapper,
body.has-fresh-ribbon .home-hero[data-layout="3-featured+latest-v2"] .home-hero-list-wrapper {
margin-top: -10em !important;
}
/* Latest list içeriği: scroll yok, doğal yüksek */
.home-hero[data-layout="3-featured+latest"] .home-hero-list,
.home-hero[data-layout="3-featured+latest+editors"] .home-hero-list,
.home-hero[data-layout="3-featured+latest-v2"] .home-hero-list {
overflow-y: visible !important;
overflow: visible !important;
max-height: none !important;
height: auto !important;
}
/* Bottom fade-out artifact'i gizle */
.home-hero-list-wrapper:after {
display: none !important;
}
}
/* Ribbon içeriğini hero main-post'un padding'iyle aynı seviyeye getir */
.sabah-ribbon {
padding: 1em 1.25em 1em 0;
}
.sabah-ribbon__content {
padding-left: 1em;
}
.sabah-ribbon {
display: flex;
align-items: stretch;
gap: 1em;
padding: 1em 1.25em 1em 0;
background: var(--color-bg-acc, #f5f1e8);
border-radius: var(--global-radius, 0);
box-shadow:
0 2px 4px var(--shadow-warm-light),
0 0 0 1px rgba(92, 67, 38, 0.07);
text-decoration: none;
color: inherit;
transition: box-shadow 220ms ease, transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1);
position: relative;
}
.sabah-ribbon:hover {
transform: translateY(-1px);
box-shadow:
0 8px 18px var(--shadow-warm),
0 0 0 1px rgba(92, 67, 38, 0.10);
}
.sabah-ribbon__strip {
width: 4px;
background: var(--color-brand, #e85d04);
flex-shrink: 0;
}
.sabah-ribbon__content {
flex: 1;
min-width: 0;
padding-left: 0.5em;
}
.sabah-ribbon__eyebrow {
font-family: var(--font-sans);
font-size: 0.7rem;
letter-spacing: 0.16em;
text-transform: uppercase;
font-weight: 700;
color: var(--color-text-muted, var(--ink-500));
margin-bottom: 0.35em;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5em;
}
.sabah-ribbon__brand {
color: var(--color-brand, #e85d04);
}
.sabah-ribbon__sep {
opacity: 0.45;
}
.sabah-ribbon__label {
color: var(--color-text, var(--ink-700));
}
.sabah-ribbon__date {
font-weight: 600;
color: var(--color-text, var(--ink-700));
}
.sabah-ribbon__title {
font-family: var(--font-serif);
font-size: 1.35rem;
line-height: 1.25;
margin: 0 0 0.25em;
color: var(--color-text, var(--ink-900));
font-weight: 700;
}
.sabah-ribbon:hover .sabah-ribbon__title {
color: var(--color-brand);
}
.sabah-ribbon__excerpt {
font-family: var(--font-serif);
font-size: 0.95rem;
line-height: 1.45;
color: var(--color-text-muted, var(--ink-500));
margin: 0;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.sabah-ribbon__arrow {
align-self: center;
font-size: 1.5em;
color: var(--color-brand);
flex-shrink: 0;
transition: transform 200ms ease;
}
.sabah-ribbon:hover .sabah-ribbon__arrow {
transform: translateX(3px);
}
@media (max-width: 600px) {
.sabah-ribbon__title { font-size: 1.1rem; }
.sabah-ribbon__excerpt { font-size: 0.88rem; -webkit-line-clamp: 3; }
.sabah-ribbon__arrow { display: none; }
}
/* ============================================================ */
/* KAĞIT HİSSİ — SVG noise grain + warm shadows */
/* ============================================================ */
/* Body'nin kendisine grain background — pseudo-element/overlay yok, layout safe.
SVG feTurbulence ile gerçek kağıt teksturu. Cream rengin ÜSTÜNE blend olur. */
body {
background-color: var(--paper-200) !important;
background-image: url("data:image/svg+xml;utf8,");
background-size: 240px 240px;
background-attachment: fixed;
background-repeat: repeat;
}
/* ============================================================ */
/* Topic section border consistency — Bloomberg/FT style */
/* Reset all Maali default post-card borders inside topic */
/* sections, then apply single coherent rule: */
/* • Vertical separator between COLUMNS */
/* • Horizontal separator between STACKED cards (same column) */
/* ============================================================ */
/* RESET */
.topic-section .grid.post-feed .post-card,
.topic-section .grid.post-feed .post-card.main-post,
.topic-section .grid.post-feed .post-card.horizontal,
.topic-section .grid.post-feed .post-card:not(:last-of-type),
.topic-section .post-stack > .post-card,
.topic-section .post-stack > .post-card:not(:last-of-type) {
border: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
padding-top: 0 !important;
}
/* 1+3 — vertical line between main and stack */
.topic-section .grid[data-layout="1+3"] > .post-stack {
border-left: 1px solid var(--color-border) !important;
padding-left: 1.5em !important;
}
/* 1+3 — horizontal between stacked cards */
.topic-section .grid[data-layout="1+3"] .post-stack > .post-card + .post-card {
border-top: 1px solid var(--color-border) !important;
padding-top: 1em !important;
}
/* 4x1 — vertical separators between 4 columns */
.topic-section .grid[data-layout="4x1"] > .post-card + .post-card {
border-left: 1px solid var(--color-border) !important;
padding-left: 1.25em !important;
}
/* 2x2 — vertical between columns + horizontal between rows */
.topic-section .grid[data-layout="2x2"] > .post-card:nth-child(2n) {
border-left: 1px solid var(--color-border) !important;
padding-left: 1.25em !important;
}
.topic-section .grid[data-layout="2x2"] > .post-card:nth-child(n+3) {
border-top: 1px solid var(--color-border) !important;
padding-top: 1em !important;
}
/* Mobile (<768px) — vertical separators kaybolur, sadece horizontal */
@media (max-width: 768px) {
.topic-section .grid.post-feed > .post-card,
.topic-section .grid.post-feed > .post-stack {
border-left: 0 !important;
padding-left: 0 !important;
}
.topic-section .grid.post-feed > .post-card + .post-card,
.topic-section .grid.post-feed > .post-stack + .post-stack,
.topic-section .post-stack > .post-card + .post-card {
border-top: 1px solid var(--color-border) !important;
padding-top: 1em !important;
}
}
/* ============================================================ */
/* Bloomberg/FT estetik geliştirmeleri */
/* ============================================================ */
/* 1) Eyebrow + sol accent strip (kart kenarı) */
.topic-section .post-card {
position: relative;
}
.topic-section .post-card::before {
content: "";
position: absolute;
left: 0;
top: 0.1em;
bottom: 0.1em;
width: 3px;
background: var(--color-accent, var(--color-border));
opacity: 0.85;
}
.topic-section .grid[data-layout="1+3"] > .post-stack > .post-card::before,
.topic-section .grid[data-layout="4x1"] > .post-card:first-of-type::before,
.topic-section .grid[data-layout="2x2"] > .post-card:nth-child(odd)::before {
/* Sütun ilk kartı left border zaten olduğu için strip görünmez, koru */
left: -1.5em;
}
/* Maali baseline'ın `.post-card.no-image.horizontal .post-card__content { padding: 0 !important }`
kuralını (0,4,0 specificity + !important) override eden simetrik content padding. */
.topic-section .post-card .post-card__content,
.topic-section .post-card.no-image.horizontal .post-card__content,
.topic-section .post-card.horizontal .post-card__content {
padding-left: 1.25em !important;
padding-right: 1.25em !important;
padding-top: 0.75em !important;
padding-bottom: 0.75em !important;
}
/* Main-post (1+3 layout sol büyük kart) görseliyle birlikte ekstra nefes */
.topic-section .post-card.main-post .post-card__content {
padding-top: 1em !important;
padding-bottom: 1em !important;
}
/* Sidebar kartları (post-card-simple) için de aynı boşluk */
.home-hero-list .post-card-simple .post-card-simple__content,
.home-hero-list .post-card-simple {
padding-left: 1em;
}
/* Sidebar kart hover state'te inset shadow varsa text daha güvenli boşluk */
.home-hero-list .post-card-simple,
.home-hero-list .post-card {
padding-left: 1em;
}
.post-tag {
font-family: var(--font-sans);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.72rem;
font-weight: 700;
color: var(--color-accent, var(--color-brand));
display: inline-block;
padding: 0 0 0.15em 0;
border-bottom: 1px solid currentColor;
text-decoration: none;
}
.post-tag:hover {
color: var(--color-brand);
border-bottom-color: var(--color-brand);
}
.tag-separator {
display: none; /* Birden fazla tag'de | yerine boşluk yeter */
}
/* 2) Section başlığı — news-feed pattern uyumlu (amber sol bar + bracket + trailing rule) */
.topic-section .section-title {
display: flex !important;
align-items: center !important;
gap: 0.7em !important;
font-family: var(--font-serif) !important;
text-transform: uppercase !important;
letter-spacing: 0.12em !important;
font-size: 0.95rem !important;
font-weight: 700 !important;
border-top: none !important;
border-bottom: none !important;
padding: 0.5em 0 0.4em 1em !important;
margin-bottom: 1em !important;
color: var(--color-text) !important;
}
.topic-section .section-title > a {
display: inline-flex !important;
align-items: baseline;
color: inherit !important;
text-decoration: none;
}
.topic-section .section-title > a::before {
content: "[ ";
color: var(--color-amber, #b45309);
opacity: 0.55;
font-weight: 400;
}
.topic-section .section-title a:hover {
color: var(--color-accent);
}
.topic-section .section-title__arrow {
color: var(--color-amber, #b45309) !important;
margin-left: 0.15em;
}
.topic-section .section-title__arrow::before {
content: " ] ";
color: var(--color-amber, #b45309);
opacity: 0.55;
font-weight: 400;
margin-right: 0.35em;
}
/* Trailing hairline — Bloomberg section divider */
.topic-section .section-title::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
margin-left: 0.6em;
}
/* Static variant — link yerine sadece span (Gözden Kaçmasın gibi tıklanmayan başlıklar) */
.topic-section .section-title--static > span {
display: inline-flex;
align-items: baseline;
}
.topic-section .section-title--static > span::before {
content: "[ ";
color: var(--color-amber, #b45309);
opacity: 0.55;
font-weight: 400;
}
.topic-section .section-title--static > span::after {
content: " ]";
color: var(--color-amber, #b45309);
opacity: 0.55;
font-weight: 400;
}
/* Designer's .topic-section:not(.latest) .post-card-tags {display:none} override */
.topic-section .post-card-tags {
display: flex !important;
margin-bottom: 0.5em;
}
/* 3) Card hover — title accent (lift/shadow aşağıda 3D bloğunda) */
.topic-section .post-card:hover .post-card__title,
.topic-section .post-card:hover .post-card__title a {
color: var(--color-accent, var(--color-brand));
}
/* 4) Pull quote — FT signature — auto-switching */
.post-content blockquote,
.gh-content blockquote,
.content blockquote {
font-family: var(--font-serif);
font-style: italic;
font-size: 1.5rem;
line-height: 1.4;
border-left: 4px solid var(--color-brand);
padding: 0.6em 0 0.6em 1.5em;
margin: 2.5em 0;
color: var(--color-text);
background: linear-gradient(to right, var(--color-bg-acc), transparent 60%);
}
.post-content blockquote::before,
.gh-content blockquote::before {
content: "\201C";
display: block;
font-family: var(--font-serif);
font-size: 3.5rem;
color: var(--color-brand);
line-height: 0.5;
margin-bottom: 0.25em;
margin-left: -0.1em;
font-style: normal;
font-weight: 700;
}
.post-content blockquote p,
.gh-content blockquote p {
margin: 0;
}
/* 5) Drop cap — Bloomberg amber (editorial book pattern, brand'den daha klasik) */
body[data-drop-caps="true"] .gh-content > p:first-of-type::first-letter,
body[data-drop-caps="true"] .post-content > p:first-of-type::first-letter {
font-family: var(--font-serif);
font-size: 3.6em;
float: left;
line-height: 0.85;
margin: 0.08em 0.12em 0 -0.04em;
font-weight: 700;
color: var(--color-amber);
font-variation-settings: "opsz" 60;
}
/* Opt-out class — yazıda ilk paragraf ise */
body[data-drop-caps="true"] .gh-content > p.no-drop-cap:first-of-type::first-letter,
body[data-drop-caps="true"] .post-content > p.no-drop-cap:first-of-type::first-letter {
font-size: 1em;
float: none;
margin: 0;
font-weight: inherit;
color: inherit;
font-family: inherit;
}
/* 6) Tabular numbers tablosu (finansal data) */
.gh-content table,
.post-content table,
.content table {
width: 100%;
border-collapse: collapse;
font-variant-numeric: tabular-nums;
font-family: var(--font-sans);
margin: 2em 0;
font-size: 0.95rem;
}
.gh-content table th,
.post-content table th {
font-family: var(--font-sans);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 700;
border-top: 2px solid var(--color-rule);
border-bottom: 2px solid var(--color-rule);
padding: 0.6em 1em 0.6em 0;
text-align: left;
color: var(--color-text-acc);
background: var(--color-bg-acc);
}
.gh-content table td,
.post-content table td {
padding: 0.6em 1em 0.6em 0;
border-bottom: 1px solid var(--color-border);
color: var(--color-text);
}
.gh-content table td:not(:first-child),
.gh-content table th:not(:first-child),
.post-content table td:not(:first-child),
.post-content table th:not(:first-child) {
text-align: right;
}
.gh-content table tr:hover td,
.post-content table tr:hover td {
background: var(--color-bg-sunken);
}
/* 7) Author byline + reading time (Bloomberg standart) — auto-switching */
.post-card-meta {
font-family: var(--font-sans);
font-size: 0.72rem;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.post-card-meta .post-card-meta__author,
.post-card-meta-author {
color: var(--color-text-acc);
font-weight: 600;
}
.post-card-meta time::before,
.post-card-meta__date::before {
content: "•";
margin: 0 0.5em;
color: var(--color-text-muted);
opacity: 0.6;
}
/* Bonus: post-stack hover'da sol accent strip belirginleşir */
.topic-section .post-card:hover::before {
width: 4px;
opacity: 1;
}
/* ============================================================ */
/* SUBTLE 3D / DEPTH — flat ama katmanlı */
/* ============================================================ */
/* Section'lar aynı arka plan — auto-switching */
.topic-section {
padding: 1.5em 0;
background: var(--color-bg);
}
/* Card resting — cream zemin, warm shadow + hairline (kağıt hissi) */
.topic-section .post-card {
background: var(--color-bg-acc, #f5f1e8) !important;
padding: 1.25em 1em 1.25em 1.5em;
box-shadow:
0 2px 4px var(--shadow-warm-light),
0 1px 0 var(--shadow-warm-light),
0 0 0 1px rgba(92, 67, 38, 0.07);
transition:
transform 220ms cubic-bezier(0.2, 0.7, 0.3, 1),
box-shadow 220ms ease;
}
/* Hover — warm lift + accent strip */
.topic-section .post-card:hover {
transform: translateY(-2px);
box-shadow:
0 10px 24px var(--shadow-warm),
0 4px 8px var(--shadow-warm-light),
0 0 0 1px rgba(92, 67, 38, 0.10),
inset 3px 0 0 var(--color-accent, var(--color-brand));
}
/* Main-post (hero büyük kart) daha belirgin warm elevation */
.topic-section .post-card.main-post {
background: var(--color-bg-acc, #f5f1e8) !important;
box-shadow:
0 3px 6px var(--shadow-warm-light),
0 1px 2px var(--shadow-warm-light),
0 0 0 1px rgba(92, 67, 38, 0.08);
padding: 1.5em 1.5em 1.5em 1.75em;
}
.topic-section .post-card.main-post:hover {
box-shadow:
0 14px 32px var(--shadow-warm-strong),
0 6px 12px var(--shadow-warm),
0 0 0 1px rgba(92, 67, 38, 0.12),
inset 4px 0 0 var(--color-accent, var(--color-brand));
}
/* Feature image — ince hairline border, "framed" hissi */
.post-card .post-card__media {
position: relative;
overflow: hidden;
}
.post-card .post-card__media::after {
content: "";
position: absolute;
inset: 0;
box-shadow: inset 0 0 0 1px var(--color-hairline);
pointer-events: none;
}
/* Image hover'da hafif zoom */
.post-card .post-card__media img {
transition: transform 400ms cubic-bezier(0.2, 0.7, 0.3, 1);
}
.post-card:hover .post-card__media img {
transform: scale(1.03);
}
/* Section başlığı — sol accent stripe (Bloomberg ribbon) */
.topic-section .section-title {
position: relative;
padding-left: 1em;
}
.topic-section .section-title::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 1.1em;
background: var(--color-accent, var(--color-brand));
}
/* Brand mark — subtle drop shadow header'da */
.header .brand-mark {
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.06));
}
/* Header — scroll edildiğinde shadow */
.header[data-style="sticky"] {
transition: box-shadow 250ms ease, backdrop-filter 250ms ease;
background: color-mix(in srgb, var(--color-bg) 92%, transparent);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.header[data-style="sticky"].is-scrolled,
.header.is-scrolled {
box-shadow: 0 2px 12px rgba(11, 11, 11, 0.06);
}
html[data-color-scheme="dark"] .header.is-scrolled,
html[data-color-scheme="dark"] .header[data-style="sticky"].is-scrolled {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
@media (prefers-color-scheme: dark) {
html[data-color-scheme="system"] .header.is-scrolled,
html[data-color-scheme="system"] .header[data-style="sticky"].is-scrolled {
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}
}
/* Hero (anasayfa üstü) — main-post hafif elevation */
.home-hero .post-card.main-post {
background: var(--color-bg-acc, #fafafa);
padding: 1.5em 1.75em;
box-shadow:
0 2px 0 rgba(11, 11, 11, 0.04),
0 0 0 1px rgba(11, 11, 11, 0.03);
}
.home-hero .post-card.main-post:hover {
box-shadow:
0 8px 24px rgba(11, 11, 11, 0.08),
0 0 0 1px rgba(11, 11, 11, 0.04);
}
/* "More" / "Daha fazla" butonları — auto-switching */
.btn.btn--bordered {
border: 1px solid var(--color-text);
background: var(--color-bg-acc);
color: var(--color-text);
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
transition: all 200ms ease;
}
.btn.btn--bordered:hover {
background: var(--color-bg-reverse);
color: var(--color-text-reverse);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
/* Dark mode için override — hem explicit dark hem system+OS dark için */
html[data-color-scheme="dark"] .topic-section .post-card {
background: rgba(255, 255, 255, 0.03);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04),
0 0 0 1px rgba(255, 255, 255, 0.03);
}
html[data-color-scheme="dark"] .topic-section .post-card:hover {
background: rgba(255, 255, 255, 0.06);
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
html[data-color-scheme="system"] .topic-section .post-card {
background: rgba(255, 255, 255, 0.03);
box-shadow:
0 1px 0 rgba(255, 255, 255, 0.04),
0 0 0 1px rgba(255, 255, 255, 0.03);
}
html[data-color-scheme="system"] .topic-section .post-card:hover {
background: rgba(255, 255, 255, 0.06);
box-shadow:
0 6px 18px rgba(0, 0, 0, 0.4),
0 0 0 1px rgba(255, 255, 255, 0.06);
}
}
/* Not: text renkleri artık auto-switching var'larla
(--color-text, --color-text-acc, --color-text-muted) hallediliyor.
Designer'ın app.min.css'i de bu var'lara dayanıyor. Override gereksiz. */
/* Dark mode — main-post elevation (hem dark hem system+OS dark) */
html[data-color-scheme="dark"] .home-hero .post-card.main-post,
html[data-color-scheme="dark"] .topic-section .post-card.main-post {
background: rgba(255, 255, 255, 0.025);
box-shadow:
0 2px 0 rgba(255, 255, 255, 0.04),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
html[data-color-scheme="dark"] .home-hero .post-card.main-post:hover,
html[data-color-scheme="dark"] .topic-section .post-card.main-post:hover {
background: rgba(255, 255, 255, 0.06);
}
@media (prefers-color-scheme: dark) {
html[data-color-scheme="system"] .home-hero .post-card.main-post,
html[data-color-scheme="system"] .topic-section .post-card.main-post {
background: rgba(255, 255, 255, 0.025);
box-shadow:
0 2px 0 rgba(255, 255, 255, 0.04),
0 0 0 1px rgba(255, 255, 255, 0.04);
}
html[data-color-scheme="system"] .home-hero .post-card.main-post:hover,
html[data-color-scheme="system"] .topic-section .post-card.main-post:hover {
background: rgba(255, 255, 255, 0.06);
}
}
/* ============================================================ */
/* Definition Box (Tanım Kutusu) — terim açıklama kartı */
/* Skill kuralı: