/* Theme Name: Sojo Times Theme URI: https://example.com/sojo-times Author: Sarphan Uzunoğlu Author URI: https://example.com Description: New York Times tarzı klasik bir gazete teması. Old English masthead, Georgia/serif tipografi, ince ayraçlar, çok sütunlu editöryel düzen. Türkçe odaklı haber siteleri için tasarlandı. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.5 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: sojo-times Tags: news, newspaper, blog, editorial, classic, serif, custom-menu, featured-images, full-width-template, threaded-comments, translation-ready */ /* ========================================================= 1. CSS DEĞİŞKENLERİ — NYT paleti ========================================================= */ :root { --st-ink: #121212; --st-paper: #ffffff; --st-muted: #5a5a5a; --st-rule: #dcdcdc; --st-rule-strong:#121212; --st-link: #121212; --st-link-hover: #5a5a5a; --st-accent: #121212; /* siyah-beyaz palet: aksan yok */ --st-kicker: #121212; --st-name: #c81e1e; /* liste kartlarında yazar adı için tek aksan */ --st-bg-soft: #f7f7f5; /* off-white, opinion/section blokları */ --st-bg-quote: #faf7f1; --st-soft-text: #333; /* dek, bio gibi yumuşak metin için */ --st-topbar-bg: #121212; /* üst koyu bar — modlar arasında sabit */ --st-topbar-fg: #ffffff; --st-footer-bg: #121212; --st-footer-fg: #d8d8d8; --st-font-display: "Source Serif 4", "Source Serif Pro", "Charter", Georgia, "Times New Roman", serif; --st-font-masthead:"Source Serif 4", "Source Serif Pro", "Charter", Georgia, "Times New Roman", serif; --st-font-body: "Source Serif 4", "Source Serif Pro", "Charter", Georgia, "Times New Roman", serif; --st-font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; --st-w-content: 1240px; --st-w-narrow: 720px; } /* ========================================================= 1b. GECE MODU — üzerindeyken devreye girer ========================================================= */ :root[data-theme="dark"] { --st-ink: #ececec; --st-paper: #15171a; --st-muted: #9aa0a6; --st-rule: #2c2f33; --st-rule-strong:#ececec; --st-link: #ececec; --st-link-hover: #b6b6b6; --st-accent: #ececec; --st-kicker: #ececec; --st-name: #ff8a8a; --st-bg-soft: #1b1e22; --st-bg-quote: #1b1e22; --st-soft-text: #c4c4c4; --st-topbar-bg: #0a0b0d; --st-topbar-fg: #ececec; --st-footer-bg: #0a0b0d; --st-footer-fg: #c4c4c4; } html, body { transition: background-color .2s ease, color .2s ease; } /* ========================================================= 2. RESET & TEMEL ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { margin: 0; background: var(--st-paper); color: var(--st-ink); font-family: var(--st-font-body); font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; max-width: 100%; } img, picture, svg, video { max-width: 100%; height: auto; display: block; } pre, code { max-width: 100%; overflow-x: auto; } table { display: block; max-width: 100%; overflow-x: auto; } h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; word-break: break-word; } a { color: var(--st-link); text-decoration: none; } a:hover { color: var(--st-link-hover); text-decoration: underline; text-underline-offset: 3px; } h1, h2, h3, h4, h5, h6 { font-family: var(--st-font-display); color: var(--st-ink); font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 .4em; } h1 { font-size: clamp(2rem, 4.4vw, 3.4rem); } h2 { font-size: clamp(1.5rem, 2.8vw, 2.1rem); } h3 { font-size: 1.35rem; } h4 { font-size: 1.1rem; } p { margin: 0 0 1em; } blockquote { font-family: var(--st-font-display); font-style: italic; font-size: 1.35rem; line-height: 1.4; border-left: 3px solid var(--st-ink); padding: .25rem 0 .25rem 1.25rem; margin: 1.5rem 0; background: var(--st-bg-quote); } /* ========================================================= 3. ÜST KOYU BAR ========================================================= */ .st-topbar { background: var(--st-topbar-bg); color: var(--st-topbar-fg); font-family: var(--st-font-sans); font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.08); } .st-topbar-inner { max-width: var(--st-w-content); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .st-topbar a { color: var(--st-topbar-fg); text-decoration: none; } .st-topbar a:hover { opacity: .8; } .st-topbar-date { font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.78); } .st-topbar-link { display: inline-flex; align-items: center; gap: 6px; } /* Tema toggle */ .st-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; color: var(--st-topbar-fg); cursor: pointer; transition: border-color .15s, color .15s, background .15s; } .st-theme-toggle:hover { border-color: rgba(255,255,255,.85); color: #fff; } .st-theme-ic { line-height: 0; display: none; } .st-theme-toggle .st-theme-ic--moon { display: inline-block; } :root[data-theme="dark"] .st-theme-toggle .st-theme-ic--moon { display: none; } :root[data-theme="dark"] .st-theme-toggle .st-theme-ic--sun { display: inline-block; } /* Pill butonlar (Abone Ol & E-gazete CTA) */ .st-pill { display: inline-block; font-family: var(--st-font-sans); font-weight: 600; border-radius: 999px; padding: 6px 14px; line-height: 1.2; font-size: 13px; transition: background .15s, color .15s, border-color .15s; white-space: nowrap; } .st-pill--outline { background: transparent; color: #fff; border: 1px solid #fff; } .st-pill--outline:hover { background: #fff; color: var(--st-ink); text-decoration: none; } .st-pill--solid { background: var(--st-ink); color: var(--st-paper); border: 1px solid var(--st-ink); padding: 10px 22px; font-size: 15px; } .st-pill--solid:hover { background: var(--st-muted); border-color: var(--st-muted); color: var(--st-paper); text-decoration: none; } /* ========================================================= 4. ANA BAR — solda menü, sağda serif logo (Mancave tarzı) ========================================================= */ .st-mainbar { background: var(--st-topbar-bg); color: var(--st-topbar-fg); } .st-mainbar-inner { max-width: var(--st-w-content); margin: 0 auto; padding: 22px 24px 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .st-mainbar-logo a { font-family: var(--st-font-masthead); font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; color: var(--st-topbar-fg); font-weight: 700; text-decoration: none; letter-spacing: -0.02em; } .st-mainbar-logo a:hover { opacity: .85; } .st-mainbar-logo img { max-height: 70px; width: auto; display: inline-block; } @media (max-width: 720px) { .st-mainbar-inner { flex-direction: column-reverse; gap: 18px; align-items: flex-start; padding: 18px 20px 20px; } } /* ========================================================= 5. NAV — serif, dikey ayraçlı (Mancave tarzı) ========================================================= */ .st-nav { flex: 1; min-width: 0; } /* Hamburger butonu — yalnız tablet/mobilde görünür */ .st-nav-burger { display: none; align-items: center; justify-content: center; background: transparent; border: 0; color: var(--st-topbar-fg); padding: 6px 4px; cursor: pointer; } .st-nav-burger:hover { opacity: .8; } .st-primary-menu { display: flex; flex-wrap: nowrap; align-items: center; list-style: none; margin: 0; padding: 0; gap: 0; } .st-primary-menu li { white-space: nowrap; padding: 0 22px; position: relative; } .st-primary-menu li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 22px; background: rgba(255,255,255,.22); } .st-primary-menu li:first-child { padding-left: 0; } .st-primary-menu li:last-child { padding-right: 0; } .st-primary-menu a { display: inline-block; font-family: var(--st-font-display); font-size: clamp(1.05rem, 1.5vw, 1.35rem); font-weight: 600; color: var(--st-topbar-fg); text-decoration: none; letter-spacing: 0; } .st-primary-menu a:hover { opacity: .75; } .st-primary-menu .current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; } .st-nav-search-form { border-top: 1px solid rgba(255,255,255,.1); background: var(--st-topbar-bg); } .st-nav-search-form .st-nav-search-inner { max-width: var(--st-w-content); margin: 0 auto; padding: 12px 24px; } /* ========================================================= 5c. ALT ŞERİT (subnav) — kategoriler / ek menü ========================================================= */ .st-subnav { background: var(--st-topbar-bg); color: var(--st-topbar-fg); border-top: 1px solid rgba(255,255,255,.08); } .st-subnav-inner { max-width: var(--st-w-content); margin: 0 auto; padding: 10px 24px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .st-subnav-inner::-webkit-scrollbar { display: none; } .st-subnav-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: nowrap; align-items: center; gap: 22px; } .st-subnav-menu li { white-space: nowrap; } .st-subnav-menu a { font-family: var(--st-font-sans); font-size: 14px; font-weight: 400; color: var(--st-topbar-fg); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; } .st-subnav-menu a:hover { opacity: .8; } .st-subnav-menu .current-menu-item > a, .st-subnav-menu .current-cat > a { border-bottom-color: var(--st-topbar-fg); } @media (max-width: 1024px) { .st-subnav-inner { padding: 8px 16px; } .st-subnav-menu { gap: 16px; } .st-subnav-menu a { font-size: 13px; } } /* ========================================================= 5b. MOBİL & TABLET — hamburger + yan açılır drawer ========================================================= */ @media (max-width: 1024px) { .st-nav-burger { display: inline-flex; } .st-nav { display: none; } .st-mainbar-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 18px 16px; } .st-mainbar-logo a { font-size: clamp(1.8rem, 5.5vw, 2.6rem); } } /* Drawer (yandan açılır panel) */ .st-drawer { position: fixed; top: 0; left: 0; bottom: 0; width: min(86vw, 320px); background: var(--st-topbar-bg); color: var(--st-topbar-fg); z-index: 1001; transform: translateX(-100%); transition: transform .25s ease, visibility 0s linear .25s; visibility: hidden; pointer-events: none; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 18px 22px 32px; box-shadow: 0 12px 40px rgba(0,0,0,.35); } .st-drawer.is-open { transform: translateX(0); visibility: visible; pointer-events: auto; transition: transform .25s ease, visibility 0s linear 0s; } .st-drawer-head { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.12); padding-bottom: 14px; margin-bottom: 14px; } .st-drawer-title { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.7); } .st-drawer-close { background: transparent; border: 0; color: var(--st-topbar-fg); padding: 6px; cursor: pointer; line-height: 0; } .st-drawer-close:hover { opacity: .75; } .st-drawer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .st-drawer-menu li { border-bottom: 1px solid rgba(255,255,255,.08); } .st-drawer-menu li:last-child { border-bottom: 0; } .st-drawer-menu a { display: block; padding: 16px 0; font-family: var(--st-font-display); font-size: 1.3rem; font-weight: 600; color: var(--st-topbar-fg); text-decoration: none; } .st-drawer-menu a:hover { opacity: .75; } .st-drawer-menu .current-menu-item > a { text-decoration: underline; text-underline-offset: 6px; } /* Backdrop */ .st-drawer-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: 1000; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .25s ease, visibility 0s linear .25s; } .st-drawer-backdrop.is-open { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .25s ease, visibility 0s linear 0s; } /* Drawer açıkken body scroll kilidi (JS class) */ body.st-drawer-open { overflow: hidden; } /* ========================================================= 6. SAYFA İSKELETİ ========================================================= */ .st-container { max-width: var(--st-w-content); margin: 0 auto; padding: 32px 24px 56px; } .st-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } .st-grid.st-grid--2 { grid-template-columns: 1.6fr 1fr; } .st-divider-v { border-left: 1px solid var(--st-rule); padding-left: 32px; } @media (max-width: 960px) { .st-grid, .st-grid.st-grid--2 { grid-template-columns: 1fr; gap: 0; } .st-divider-v { border-left: 0; padding-left: 0; border-top: 1px solid var(--st-rule); padding-top: 24px; margin-top: 24px; } } /* ========================================================= 7. HİKAYE KARTLARI ========================================================= */ .st-story { padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid var(--st-rule); } .st-story:last-child { border-bottom: 0; } .st-kicker { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-kicker); font-weight: 700; margin: 0 0 8px; } .st-story h1 a, .st-story h2 a, .st-story h3 a { color: var(--st-ink); } .st-story h1 a:hover, .st-story h2 a:hover, .st-story h3 a:hover { color: var(--st-link); text-decoration: none; } .st-dek { font-family: var(--st-font-body); font-size: 16px; color: var(--st-soft-text); margin: 8px 0 10px; } .st-byline { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted); } .st-byline a { color: var(--st-muted); } /* Kart byline'ı — küçük yuvarlak avatar + yazar adı */ .st-card-byline { display: flex; align-items: center; gap: 8px; margin: 10px 0 0; } .st-card-avatar { display: inline-block; flex: 0 0 auto; } .st-card-avatar img, .st-avatar-sm { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-card-byline-text { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .04em; text-transform: none; color: var(--st-muted); line-height: 1.3; } .st-card-byline-name { color: var(--st-ink); font-weight: 600; } .st-card-byline-name:hover { text-decoration: none; color: var(--st-muted); } /* "Lede" — ön plana çıkan büyük hikaye */ .st-lede h1 { font-size: clamp(2.1rem, 4vw, 3.2rem); } .st-lede .st-image { margin: 0 0 14px; } .st-lede .st-image figcaption { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-muted); margin-top: 6px; } /* Küçük listeler */ .st-list .st-story { padding-bottom: 14px; margin-bottom: 14px; } .st-list .st-story h3 { font-size: 1.15rem; } /* Lede'in yanındaki tek ikincil hikaye — daha büyük başlık */ .st-secondary .st-image { margin: 0 0 12px; } .st-secondary h2 { font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.18; margin: 6px 0 10px; } .st-secondary .st-dek { font-size: 17px; } /* Manşet (lede) byline */ .st-lede .st-card-byline { gap: 14px; margin-top: 16px; align-items: center; } .st-lede .st-card-avatar img, .st-lede .st-avatar-sm { width: 56px; height: 56px; } .st-lede .st-card-byline-text { font-size: 16px; line-height: 1.3; } .st-lede .st-card-byline-name { font-weight: 700; } .st-lede .st-card-byline-date { color: var(--st-muted); font-weight: 400; font-size: 16px; } /* ========================================================= 8. BÖLÜM (SECTION) BAŞLIKLARI ========================================================= */ .st-section { margin: 56px 0 0; border-top: 4px solid var(--st-ink); padding-top: 18px; } .st-section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 0 22px; } .st-section-head h2 { font-family: var(--st-font-display); font-size: 1.9rem; margin: 0; } .st-section-head .st-more { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; } /* Üst sıra: 1 büyük lead + 3 yan hikaye */ .st-section-top { display: grid; grid-template-columns: 1.5fr 1fr; gap: 28px; padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--st-rule); } .st-section-top .st-section-side .st-story { padding-bottom: 14px; margin-bottom: 14px; } .st-section-top .st-section-side .st-story:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .st-section-top .st-section-side h3 { font-size: 1.05rem; line-height: 1.3; } /* Section lead başlığı — yan kolondaki küçük başlıklardan ayrışsın */ .st-section-lead { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; } .st-section-lead .st-lead-title { font-size: clamp(1.4rem, 2.2vw, 1.9rem); line-height: 1.18; margin: 6px 0 8px; } .st-section-lead .st-lead-title a { color: var(--st-ink); } .st-section-lead .st-image { margin: 0 0 12px; } /* Yan sütundaki küçük hikayeler için tipografi */ .st-side-item { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--st-rule); } .st-side-item:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .st-side-image { display: block; line-height: 0; margin: 0 0 12px; } .st-side-image img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; } .st-side-item h3 { font-size: 1.3rem; line-height: 1.25; margin: 4px 0 10px; font-weight: 700; } .st-side-item .st-card-byline { gap: 12px; margin-top: 6px; } .st-side-item .st-avatar-sm, .st-side-item .st-card-avatar img { width: 40px; height: 40px; } .st-side-item .st-card-byline-text { font-size: 15px; } .st-side-item .st-card-byline-name { font-weight: 600; } /* ========================================================= 8b. SPOTLIGHT — "Saturday read" tarzı ========================================================= */ .st-spotlight { margin: 56px 0 0; border-top: 4px solid var(--st-ink); border-bottom: 1px solid var(--st-ink); padding: 28px 0 36px; background: var(--st-bg-soft); } .st-spotlight-inner { max-width: var(--st-w-content); margin: 0 auto; padding: 0 24px; } .st-spotlight-label { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 18px; } .st-spotlight-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 36px; align-items: center; } @media (max-width: 900px) { .st-spotlight-grid { grid-template-columns: 1fr; } } .st-spotlight-image { margin: 0; } .st-spotlight-image img { width: 100%; } .st-spotlight-title { font-family: var(--st-font-display); font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.12; margin: 8px 0 14px; letter-spacing: -0.015em; } .st-spotlight-title a { color: var(--st-ink); } .st-spotlight-title a:hover { color: var(--st-muted); text-decoration: none; } .st-spotlight-dek { font-family: var(--st-font-display); font-style: italic; font-size: 1.15rem; line-height: 1.5; color: var(--st-soft-text); margin: 0 0 22px; } .st-spotlight-byline { display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: center; border-top: 1px solid var(--st-rule); padding-top: 16px; } .st-spotlight-avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--st-paper); display: block; } .st-spotlight-by { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 2px; } .st-spotlight-name { font-family: var(--st-font-display); font-size: 1.2rem; font-weight: 700; margin: 0; } .st-spotlight-name a { color: var(--st-ink); } .st-spotlight-name a:hover { color: var(--st-muted); text-decoration: none; } .st-spotlight-date { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-muted); margin: 2px 0 0; } /* ========================================================= 8c. YAZARLARDAN — yazar-fotoğrafı odaklı 4'lü şerit ========================================================= */ .st-voices-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } @media (max-width: 900px) { .st-voices-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .st-voices-grid { grid-template-columns: 1fr; gap: 22px; } } .st-voice { text-align: left; } .st-voice-image { display: block; margin: 0 0 14px; line-height: 0; overflow: hidden; } .st-voice-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } .st-voice-byline { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; } .st-voice-avatar { display: inline-block; line-height: 0; flex: 0 0 auto; } .st-voice-avatar img, .st-avatar-xs { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-voice-author-name { font-family: var(--st-font-sans); font-size: 16px; font-weight: 600; color: var(--st-ink); line-height: 1.2; } .st-voice-author-name:hover { color: var(--st-muted); text-decoration: none; } .st-voice-title { font-family: var(--st-font-display); font-style: italic; font-size: 1.55rem; line-height: 1.2; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.005em; } .st-voice-title a { color: var(--st-ink); } .st-voice-title a:hover { color: var(--st-muted); text-decoration: none; } .st-voice-dek { font-family: var(--st-font-body); font-size: 17px; line-height: 1.55; color: var(--st-soft-text); margin: 0; } /* ========================================================= 8d. EN SON — dense 4 kolon küçük grid ========================================================= */ .st-latest-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border-top: 1px solid var(--st-rule); } .st-mini { padding: 28px 32px; border-right: 1px solid var(--st-rule); border-bottom: 1px solid var(--st-rule); background: var(--st-paper); display: grid; grid-template-columns: 1fr auto; gap: 28px; align-items: center; min-height: 220px; } .st-mini:nth-child(2n) { border-right: 0; } .st-mini-body { min-width: 0; } .st-mini-title { font-family: var(--st-font-display); font-size: 1.5rem; line-height: 1.18; margin: 0 0 18px; font-weight: 800; letter-spacing: -0.01em; } .st-mini-title a { color: var(--st-ink); } .st-mini-title a:hover { color: var(--st-muted); text-decoration: none; } .st-mini-author { font-family: var(--st-font-display); color: var(--st-name); font-weight: 700; font-size: 1rem; margin: 0 0 24px; } .st-mini-author a { color: inherit; } .st-mini-author a:hover { color: var(--st-ink); text-decoration: none; } .st-mini-avatar { display: block; line-height: 0; flex: 0 0 auto; } .st-mini-avatar img, .st-mini .st-avatar-md { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-mini-author { margin-bottom: 0; } @media (max-width: 540px) { .st-latest-grid { grid-template-columns: 1fr; } .st-mini { border-right: 0 !important; padding: 22px 18px; min-height: 0; grid-template-columns: 1fr auto; gap: 16px; } .st-mini-title { font-size: 1.2rem; } .st-mini-avatar img, .st-mini .st-avatar-md { width: 80px; height: 80px; } } /* Alt sıra: 4'lü dar kart şeridi */ .st-section-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .st-section-grid .st-story { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .st-section-grid .st-story h3 { font-size: 1.05rem; line-height: 1.3; } @media (max-width: 960px) { .st-section-top { grid-template-columns: 1fr; } } @media (max-width: 900px) { .st-section-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .st-section-grid { grid-template-columns: 1fr; } } /* ========================================================= 9. OPINION ŞERİDİ ========================================================= */ .st-opinion { background: var(--st-bg-soft); border-top: 1px solid var(--st-ink); border-bottom: 1px solid var(--st-ink); padding: 24px 0; margin-top: 48px; } .st-opinion .st-inner { max-width: var(--st-w-content); margin: 0 auto; padding: 0 24px; } .st-opinion h2 { font-family: var(--st-font-display); font-style: italic; font-size: 1.4rem; margin: 0 0 16px; } .st-opinion-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .st-opinion .st-author { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); margin: 4px 0 6px; } .st-opinion h3 { font-family: var(--st-font-display); font-style: italic; font-size: 1.15rem; margin: 0 0 6px; } @media (max-width: 900px) { .st-opinion-grid { grid-template-columns: 1fr; } } /* ========================================================= 10. EN ÇOK OKUNANLAR / SIDEBAR ========================================================= */ .st-mostread { padding-top: 4px; } .st-mostread ol { list-style: none; counter-reset: mr; padding: 0; margin: 0; } .st-mostread li { counter-increment: mr; padding: 14px 0; border-bottom: 1px solid var(--st-rule); display: grid; grid-template-columns: 32px 1fr; gap: 12px; } .st-mostread li::before { content: counter(mr); font-family: var(--st-font-display); font-size: 1.6rem; color: var(--st-muted); line-height: 1; } .st-mostread li h3 { font-size: 1rem; margin: 0; line-height: 1.3; } .st-mostread li a { color: var(--st-ink); } /* ========================================================= 11. TEK YAZI (single.php) — noizez tarzı yerleşim + sağ sidebar ========================================================= */ .st-single-wrap { max-width: var(--st-w-narrow); margin: 0 auto; padding: 12px 24px 24px; } .st-article { max-width: var(--st-w-narrow); margin: 0 auto; padding: 16px 0 32px; } /* Breadcrumb */ .st-breadcrumb { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .st-breadcrumb a { color: var(--st-muted); } .st-breadcrumb a:hover { color: var(--st-ink); text-decoration: none; } .st-breadcrumb .st-bc-sep { color: #b9b9b9; } .st-breadcrumb .st-bc-current { color: var(--st-ink); } .st-article .st-kicker { text-align: left; margin: 0 0 14px; } .st-article h1 { font-size: clamp(2.1rem, 4.5vw, 3rem); margin: 0 0 14px; letter-spacing: -0.015em; } .st-article .st-dek { font-size: 1.25rem; color: var(--st-soft-text); line-height: 1.45; margin: 0 0 28px; font-family: var(--st-font-display); font-style: italic; } /* Yazı başlık + yazar metadata bloğu — Guardian opinion tarzı */ .st-article-head { display: grid; grid-template-columns: 1fr 220px; gap: 36px; align-items: center; margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid var(--st-rule); } .st-article-head-body { min-width: 0; } .st-article-head-kicker { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-name); font-weight: 700; letter-spacing: .02em; margin: 0 0 14px; } .st-article-head-kicker a { color: inherit; text-decoration: none; } .st-article-head-kicker a:hover { text-decoration: underline; text-underline-offset: 4px; } .st-article-head-q { color: var(--st-name); font-weight: 700; margin-right: 4px; font-style: normal; } .st-article-head-title { font-family: var(--st-font-display); font-size: clamp(1.4rem, 2.8vw, 2.1rem); line-height: 1.15; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.01em; color: var(--st-ink); } .st-article-head-author { font-family: var(--st-font-display); color: var(--st-name); font-weight: 700; font-size: 1.1rem; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; } .st-article-head-author a { color: inherit; text-decoration: none; } .st-article-head-author a:hover { color: var(--st-ink); } /* Yazar adı yanındaki küçük yuvarlak avatar — yalnız mobilde görünür */ .st-article-head-avatar-inline { display: none; line-height: 0; flex: 0 0 auto; } .st-article-head-avatar-inline img, .st-avatar-inline { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-article-head-dek { font-family: var(--st-font-body); color: var(--st-soft-text); font-size: 1.05rem; line-height: 1.55; margin: 0 0 18px; } .st-article-head-time { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); margin: 0; } .st-article-head-time .st-dot { margin: 0 6px; } .st-article-head-avatar { display: block; line-height: 0; justify-self: end; } .st-article-head-avatar img, .st-avatar-hero { width: 200px !important; height: 200px !important; border-radius: 50% !important; object-fit: cover; background: var(--st-bg-soft); display: block; } @media (max-width: 720px) { .st-article-head { grid-template-columns: 1fr; gap: 0; padding-bottom: 18px; margin-bottom: 22px; } .st-article-head-avatar { display: none; } /* sağdaki büyük avatar mobilde gizli */ .st-article-head-avatar-inline { display: inline-flex; } /* yazar adı yanındaki küçük avatar görünür */ .st-article-head-title { font-size: clamp(1.3rem, 6vw, 1.7rem); } } /* Byline bloğu — büyük yuvarlak avatar + iki satır */ .st-byline-block { display: flex; align-items: center; gap: 16px; border-top: 1px solid var(--st-rule); border-bottom: 1px solid var(--st-rule); padding: 18px 0; margin: 0 0 32px; } .st-byline-avatar { display: inline-block; flex: 0 0 auto; } .st-byline-avatar img, .st-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: block; background: var(--st-bg-soft); } @media (min-width: 720px) { .st-byline-avatar img, .st-avatar { width: 72px; height: 72px; } } .st-byline-text { display: flex; flex-direction: column; gap: 4px; } .st-byline-line { margin: 0; font-family: var(--st-font-sans); font-size: 14px; } .st-byline-by { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); margin-right: 4px; } .st-byline-name { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--st-ink); font-size: 14px; } .st-byline-name:hover { color: var(--st-link); text-decoration: none; } .st-byline-meta { margin: 0; font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--st-muted); } .st-byline-meta .st-dot { margin: 0 4px; } .st-article .st-hero { margin: 0 0 28px; } .st-article .st-hero figcaption { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-muted); margin-top: 8px; line-height: 1.4; } .st-article-body { font-size: 1.25rem; line-height: 1.65; font-family: var(--st-font-body); } .st-article-body p { margin: 0 0 1.1em; } .st-article-body p:first-of-type::first-letter { font-family: var(--st-font-display); font-size: 4.2rem; float: left; line-height: .95; padding: 4px 14px 0 0; font-weight: 800; } .st-article-body.no-dropcap p:first-of-type::first-letter { font-size: inherit; float: none; line-height: inherit; padding: 0; font-weight: inherit; } .st-article-body h2 { font-size: 1.9rem; margin: 1.6em 0 .4em; } .st-article-body h3 { font-size: 1.4rem; margin: 1.4em 0 .4em; } .st-article-body ul, .st-article-body ol { padding-left: 1.4em; margin: 0 0 1em; } .st-endmark { text-align: left; color: var(--st-ink); font-size: 1rem; margin: 8px 0 0; } /* Etiketler */ .st-article-tags { margin: 28px 0 0; display: flex; flex-wrap: wrap; gap: 6px; font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; } .st-article-tags .st-tag { background: transparent; color: var(--st-ink); border: 1px solid var(--st-rule); padding: 4px 9px; } .st-article-tags .st-tag:hover { border-color: var(--st-ink); } /* Yazar kutusu (büyük avatar) */ .st-author-box { max-width: var(--st-w-narrow); margin: 32px auto 24px; padding: 24px; background: var(--st-bg-soft); display: grid; grid-template-columns: 96px 1fr; gap: 20px; align-items: start; } .st-author-avatar img, .st-avatar-lg { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; display: block; } .st-author-name { font-family: var(--st-font-display); font-size: 1.4rem; margin: 0 0 6px; } .st-author-name a { color: var(--st-ink); } .st-author-name a:hover { color: var(--st-link); text-decoration: none; } .st-author-bio { font-size: 15px; color: var(--st-soft-text); line-height: 1.55; margin: 0; } @media (max-width: 540px) { .st-author-box { grid-template-columns: 64px 1fr; gap: 14px; padding: 18px; } .st-author-avatar img, .st-avatar-lg { width: 64px; height: 64px; } } /* "Son haberler" related grid */ .st-related { max-width: var(--st-w-content); margin: 0 auto; padding: 0 24px; } .st-related .st-section-head h2 { font-size: 1.4rem; } /* ========================================================= 11b. SAĞ RAİL — "Diğer Yazarlar" ========================================================= */ .st-side-rail { position: sticky; top: 64px; padding-top: 24px; } @media (max-width: 1024px) { .st-side-rail { position: static; padding-top: 0; } } .st-rail-title { font-family: var(--st-font-display); font-size: 1.7rem; color: var(--st-ink); margin: 0 0 6px; padding: 0; line-height: 1.1; } .st-rail-title::after { content: ""; display: block; width: 100%; border-top: 2px solid var(--st-ink); margin-top: 8px; } .st-rail-list { list-style: none; margin: 0; padding: 0; } .st-rail-item { display: grid; grid-template-columns: 1fr 72px; gap: 12px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--st-rule); } .st-rail-item:last-child { border-bottom: 0; } .st-rail-author { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-ink); margin: 0 0 4px; } .st-rail-title-link { font-family: var(--st-font-display); font-size: 1.1rem; line-height: 1.25; margin: 0; font-weight: 700; } .st-rail-title-link a { color: var(--st-ink); } .st-rail-title-link a:hover { color: var(--st-link); text-decoration: none; } .st-rail-avatar { display: block; } .st-rail-avatar img, .st-avatar-md { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } /* ========================================================= 11b2. LİSTE KARTI — arşiv ve yazar sayfalarındaki yazı satırı ========================================================= */ .st-list { margin: 0; } .st-list-card { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; padding: 36px 0; border-bottom: 1px solid var(--st-rule); } .st-list-card.has-image { grid-template-columns: 1fr 220px; } .st-list-card.has-avatar { grid-template-columns: 1fr 100px; padding: 26px 0; } .st-list-card.has-avatar .st-list-card-title { font-size: clamp(1.1rem, 1.6vw, 1.4rem); margin: 0 0 10px; } .st-list-card.has-avatar .st-list-card-author { margin: 0 0 8px; } .st-list-card-avatar-wrap { display: block; line-height: 0; } .st-list-card-avatar-wrap img, .st-list-card-avatar { width: 100px !important; height: 100px !important; border-radius: 50% !important; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-list-card-body { min-width: 0; } .st-list-card-title { font-family: var(--st-font-display); font-size: clamp(1.4rem, 2.4vw, 2rem); line-height: 1.18; margin: 0 0 14px; font-weight: 700; letter-spacing: -0.015em; } .st-list-card-title a { color: var(--st-ink); } .st-list-card-title a:hover { color: var(--st-muted); text-decoration: none; } .st-list-card-quote { color: var(--st-muted); font-size: 0.85em; margin-right: 4px; font-style: normal; } .st-list-card-author { font-family: var(--st-font-display); font-weight: 700; color: var(--st-name); margin: 0 0 12px; font-size: 1.05rem; } .st-list-card-author a { color: inherit; } .st-list-card-author a:hover { color: var(--st-ink); text-decoration: none; } .st-list-card-dek { font-family: var(--st-font-body); color: var(--st-soft-text); font-size: 1.05rem; line-height: 1.55; margin: 0 0 14px; max-width: 56ch; } .st-list-card-time { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); margin: 0; } .st-list-card-image { display: block; line-height: 0; } .st-list-card-image img { width: 220px; height: 220px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } @media (max-width: 720px) { .st-list-card { gap: 16px; padding: 24px 0; } .st-list-card.has-image { grid-template-columns: 1fr 110px; } .st-list-card.has-avatar { grid-template-columns: 1fr 72px; padding: 22px 0; } .st-list-card-image img { width: 110px; height: 110px; margin: 0; } .st-list-card-avatar-wrap img, .st-list-card-avatar { width: 72px !important; height: 72px !important; } .st-list-card-title { font-size: 1.2rem; margin: 0 0 10px; } .st-list-card.has-avatar .st-list-card-title { font-size: 1.05rem; } .st-list-card-dek { font-size: 0.95rem; -webkit-line-clamp: 3; } } @media (max-width: 420px) { .st-list-card.has-image { grid-template-columns: 1fr 88px; } .st-list-card.has-avatar { grid-template-columns: 1fr 56px; } .st-list-card-image img { width: 88px; height: 88px; } .st-list-card-avatar-wrap img, .st-list-card-avatar { width: 56px !important; height: 56px !important; } } /* ========================================================= 11b2c. BU KATEGORİDE DİĞER İÇERİKLER — single.php altında ========================================================= */ .st-related-cat { max-width: var(--st-w-content); margin: 32px auto 0; padding: 0 24px; } .st-related-cat-title { font-family: var(--st-font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; margin: 0 0 18px; letter-spacing: -0.01em; } .st-related-cat-title a { color: var(--st-name); text-decoration: none; } .st-related-cat-title a:hover { text-decoration: underline; text-underline-offset: 4px; } /* Hücre içi ayraç çizgileri — sadece KART ARASI, dış kenarda asla. */ .st-related-cat-grid { max-width: none !important; margin: 0 !important; padding: 0 !important; grid-template-columns: repeat(3, 1fr) !important; gap: 0 !important; background: transparent !important; border: 0 !important; } .st-related-cat-grid > .st-arc-cell { background: transparent !important; border: 0 !important; border-right: 1px solid var(--st-rule) !important; border-bottom: 1px solid var(--st-rule) !important; padding: 22px 18px !important; } /* Son kolon: sağ ayraç yok. Son satır: alt ayraç yok. */ .st-related-cat-grid > .st-arc-cell:nth-child(3n) { border-right: 0 !important; } .st-related-cat-grid > .st-arc-cell:nth-last-child(-n+3) { border-bottom: 0 !important; } @media (max-width: 960px) { .st-related-cat-grid { grid-template-columns: repeat(2, 1fr) !important; } .st-related-cat-grid > .st-arc-cell { border-right: 1px solid var(--st-rule) !important; border-bottom: 1px solid var(--st-rule) !important; } .st-related-cat-grid > .st-arc-cell:nth-child(3n) { border-right: 1px solid var(--st-rule) !important; } .st-related-cat-grid > .st-arc-cell:nth-child(2n) { border-right: 0 !important; } .st-related-cat-grid > .st-arc-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--st-rule) !important; } .st-related-cat-grid > .st-arc-cell:nth-last-child(-n+2) { border-bottom: 0 !important; } } @media (max-width: 600px) { .st-related-cat { padding: 0 16px; margin-top: 24px; } .st-related-cat-title { font-size: 1.2rem; } .st-related-cat-grid { grid-template-columns: 1fr !important; } .st-related-cat-grid > .st-arc-cell { border-right: 0 !important; } .st-related-cat-grid > .st-arc-cell:last-child { border-bottom: 0 !important; } .st-related-cat-grid > .st-arc-cell:not(:last-child) { border-bottom: 1px solid var(--st-rule) !important; } } /* ========================================================= 11b3. ÇOK OKUNANLAR — single.php altında ========================================================= */ .st-mostviewed { max-width: var(--st-w-content); margin: 32px auto 0; padding: 0 24px 16px; } .st-mostviewed-title { font-family: var(--st-font-display); font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; } .st-mostviewed-list { list-style: none; margin: 0; padding: 0; border-top: 3px solid var(--st-ink); display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, auto); grid-auto-flow: column; column-gap: 32px; } .st-mostviewed-item { display: grid; grid-template-columns: 70px 1fr; gap: 20px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--st-rule); } .st-mostviewed-item.has-image { grid-template-columns: 70px 1fr 96px; } .st-mostviewed-num { font-family: var(--st-font-display); font-size: clamp(2.4rem, 4vw, 3.4rem); line-height: 1; font-weight: 700; color: var(--st-ink); text-align: left; } .st-mostviewed-headline { font-family: var(--st-font-display); font-size: 1.1rem; line-height: 1.25; font-weight: 700; margin: 0; } .st-mostviewed-headline a { color: var(--st-ink); text-decoration: none; } .st-mostviewed-headline a:hover { color: var(--st-muted); text-decoration: none; } .st-mostviewed-image { display: block; line-height: 0; } .st-mostviewed-image img { width: 96px; height: 72px; object-fit: cover; display: block; background: var(--st-bg-soft); } @media (max-width: 720px) { .st-mostviewed-list { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; column-gap: 0; } .st-mostviewed-item { grid-template-columns: 48px 1fr; gap: 14px; padding: 14px 0; } .st-mostviewed-item.has-image { grid-template-columns: 48px 1fr 72px; } .st-mostviewed-num { font-size: 2.2rem; } .st-mostviewed-image img { width: 72px; height: 54px; } } /* ========================================================= 11c. YAZAR SAYFASI (author.php) ========================================================= */ .st-author-page { max-width: var(--st-w-narrow); margin: 0 auto; padding: 40px 24px 64px; } .st-author-header { border-bottom: 1px solid var(--st-ink); padding-bottom: 28px; margin-bottom: 8px; } .st-author-id { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; } .st-author-avatar-lg { flex: 0 0 auto; line-height: 0; } .st-author-avatar-lg img, .st-avatar-xl { width: 120px !important; height: 120px !important; border-radius: 50% !important; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-author-headline { font-family: var(--st-font-display); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.1; margin: 0; letter-spacing: -0.015em; font-weight: 700; } .st-author-intro { font-family: var(--st-font-display); font-style: italic; font-size: 1.3rem; line-height: 1.45; color: var(--st-soft-text); margin: 0; max-width: 640px; } @media (max-width: 540px) { .st-author-id { gap: 16px; } .st-author-avatar-lg img, .st-avatar-xl { width: 84px !important; height: 84px !important; } } .st-author-posts { margin-top: 0; } .st-author-post { display: grid; grid-template-columns: 120px 1fr; gap: 32px; padding: 28px 0; border-bottom: 1px solid var(--st-rule); } .st-author-post-date { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-muted); line-height: 1.4; } .st-author-post-title { font-family: var(--st-font-display); font-size: clamp(1.3rem, 2.2vw, 1.8rem); line-height: 1.2; margin: 0 0 10px; font-weight: 700; letter-spacing: -0.01em; } .st-author-post-title a { color: var(--st-ink); } .st-author-post-title a:hover { color: var(--st-muted); text-decoration: none; } .st-author-post-dek { font-family: var(--st-font-body); font-size: 1.05rem; line-height: 1.55; color: var(--st-soft-text); margin: 0 0 12px; } .st-author-post-byline { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); margin: 0; } @media (max-width: 720px) { .st-author-post { grid-template-columns: 1fr; gap: 8px; } .st-author-post-date { order: 0; } .st-author-post-body { order: 1; } } /* ========================================================= 11b4. ARŞİV — 3 katmanlı yerleşim (lead / mid / bottom) ========================================================= */ .st-arc-lead, .st-arc-mid, .st-arc-bottom { max-width: var(--st-w-content); margin: 0 auto; } .st-arc-lead { padding: 8px 24px 32px; } .st-arc-mid { padding: 24px 24px; border-top: 1px solid var(--st-rule); margin-top: 12px; } .st-arc-bottom { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; padding: 0 24px; border-top: 1px solid var(--st-rule); margin-top: 12px; } /* — Ortak kart tipografisi — */ .st-arc-q { color: var(--st-name); font-weight: 700; margin-right: 4px; } .st-arc-card-title { font-family: var(--st-font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.22; margin: 0 0 10px; letter-spacing: -0.005em; } .st-arc-card-title a { color: var(--st-ink); text-decoration: none; } .st-arc-card-title a:hover { color: var(--st-muted); } .st-arc-card-author { font-family: var(--st-font-display); font-weight: 700; color: var(--st-name); font-size: 1rem; margin: 0 0 8px; } .st-arc-card-author a { color: inherit; text-decoration: none; } .st-arc-card-author a:hover { color: var(--st-ink); } .st-arc-card-dek { font-family: var(--st-font-body); color: var(--st-soft-text); font-size: 1rem; line-height: 1.5; margin: 0 0 12px; } .st-arc-card-time { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-muted); letter-spacing: .04em; margin: 0; } /* — TIER 1: LEAD — */ .st-arc-lead.has-image { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .st-arc-lead-kicker { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-name); font-weight: 700; margin: 0 0 12px; } .st-arc-lead-kicker a { color: inherit; text-decoration: none; } .st-arc-lead-title { font-family: var(--st-font-display); font-size: clamp(2rem, 4vw, 3rem); line-height: 1.1; font-weight: 800; margin: 0 0 14px; letter-spacing: -0.015em; } .st-arc-lead-title a { color: var(--st-ink); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; } .st-arc-lead-title a:hover { color: var(--st-muted); } .st-arc-lead-author { font-family: var(--st-font-display); font-weight: 700; color: var(--st-name); font-size: 1.05rem; margin: 0 0 14px; } .st-arc-lead-author a { color: inherit; text-decoration: none; } .st-arc-lead-dek { font-family: var(--st-font-body); color: var(--st-soft-text); font-size: 1.1rem; line-height: 1.5; margin: 0 0 18px; } .st-arc-lead-time { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-muted); margin: 0; } .st-arc-lead-image { display: block; line-height: 0; } .st-arc-lead-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; } /* — TIER 2: MID — */ .st-arc-mid { display: flex; flex-direction: column; gap: 24px; } .st-arc-mid-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; padding-bottom: 22px; border-bottom: 1px solid var(--st-rule); } .st-arc-mid-hero-body { min-width: 0; } .st-arc-mid-hero .st-arc-card-title { font-size: clamp(1.4rem, 2.4vw, 1.9rem); } .st-arc-mid-hero .st-arc-card-image, .st-arc-mid-hero .st-arc-card-avatar { display: block; line-height: 0; } .st-arc-mid-hero .st-arc-card-image img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .st-arc-mid-hero .st-arc-card-avatar img { width: 180px; height: 180px; border-radius: 50%; object-fit: cover; margin-left: auto; } .st-arc-mid-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .st-arc-mid-card { display: grid; gap: 16px; align-items: center; } .st-arc-mid-card.layout-avatar { grid-template-columns: 1fr 110px; } .st-arc-mid-card.layout-image { grid-template-columns: 160px 1fr; } .st-arc-mid-card .st-arc-card-title { font-size: 1.15rem; } .st-arc-card-image-sm { display: block; line-height: 0; } .st-arc-card-image-sm img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .st-arc-card-avatar-sm { display: block; line-height: 0; } .st-arc-card-avatar-sm img { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; } /* — TIER 3: BOTTOM (2×3 grid) — */ .st-arc-cell { display: grid; gap: 16px; align-items: center; padding: 22px 18px; border-bottom: 1px solid var(--st-rule); border-right: 1px solid var(--st-rule); } .st-arc-cell:nth-child(2n) { border-right: 0; } .st-arc-cell:nth-last-child(1), .st-arc-cell:nth-last-child(2) { border-bottom: 0; } .st-arc-cell.layout-avatar { grid-template-columns: 1fr 90px; } .st-arc-cell.layout-image { grid-template-columns: 140px 1fr; } .st-arc-cell .st-arc-card-title { font-size: 1.05rem; } .st-arc-cell .st-arc-card-avatar-sm img { width: 90px; height: 90px; } /* Pagination spacing */ .st-archive-head + .st-arc-lead { margin-top: 0; } .st-archive-head { max-width: var(--st-w-content); margin: 0 auto; padding: 32px 24px 0; } /* — Mobil/Tablet — */ @media (max-width: 900px) { .st-arc-lead.has-image, .st-arc-mid-hero { grid-template-columns: 1fr; gap: 18px; } .st-arc-mid-hero .st-arc-card-avatar img { margin-left: 0; width: 120px; height: 120px; } .st-arc-mid-row { grid-template-columns: 1fr; gap: 18px; } .st-arc-bottom { grid-template-columns: 1fr; } .st-arc-cell { border-right: 0; } .st-arc-cell:nth-last-child(2) { border-bottom: 1px solid var(--st-rule); } } @media (max-width: 600px) { .st-arc-lead { padding: 8px 16px 24px; } .st-arc-mid, .st-arc-bottom { padding-left: 16px; padding-right: 16px; } .st-arc-lead-title { font-size: clamp(1.6rem, 7vw, 2.1rem); } .st-arc-card-title { font-size: 1.05rem; } .st-arc-mid-card.layout-avatar { grid-template-columns: 1fr 72px; gap: 14px; } .st-arc-mid-card.layout-image { grid-template-columns: 110px 1fr; gap: 14px; } .st-arc-card-avatar-sm img { width: 72px; height: 72px; } .st-arc-cell.layout-avatar { grid-template-columns: 1fr 64px; gap: 12px; padding: 18px 14px; } .st-arc-cell.layout-image { grid-template-columns: 96px 1fr; gap: 12px; padding: 18px 14px; } .st-arc-cell .st-arc-card-avatar-sm img { width: 64px; height: 64px; } } /* ========================================================= 11d. YAZARLAR SAYFASI (page-yazarlar.php) ========================================================= */ .st-staff { max-width: var(--st-w-content); margin: 0 auto; padding: 32px 24px 64px; } .st-staff-header { border-bottom: 1px solid var(--st-ink); padding-bottom: 22px; margin-bottom: 8px; } .st-staff-headline { font-family: var(--st-font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1.1; margin: 0; font-weight: 700; letter-spacing: -0.015em; } .st-staff-intro { font-family: var(--st-font-display); font-style: italic; font-size: 1.2rem; line-height: 1.5; color: var(--st-soft-text); margin: 16px 0 0; max-width: 720px; } .st-staff-list { margin-top: 8px; } .st-staff-card { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: start; padding: 36px 0; border-bottom: 1px solid var(--st-rule); } .st-staff-card:last-child { border-bottom: 0; } .st-staff-avatar { display: block; line-height: 0; } .st-staff-avatar img, .st-staff-avatar .st-avatar-xl { width: 200px !important; height: 200px !important; border-radius: 50% !important; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-staff-body { min-width: 0; } .st-staff-name { font-family: var(--st-font-display); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1.15; margin: 0 0 16px; font-weight: 700; letter-spacing: -0.01em; } .st-staff-name a { color: var(--st-ink); text-decoration: none; } .st-staff-name a:hover { color: var(--st-muted); } .st-staff-meta { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-muted); margin: 8px 0 10px; } .st-staff-stories { list-style: none; margin: 0; padding: 0; } .st-staff-stories li { padding: 14px 0; border-bottom: 1px solid var(--st-rule); display: flex; justify-content: space-between; gap: 24px; align-items: baseline; } .st-staff-stories li:last-child { border-bottom: 0; } .st-staff-stories-title { font-family: var(--st-font-display); font-size: 1.1rem; line-height: 1.3; font-weight: 700; color: var(--st-ink); flex: 1; text-decoration: none; } .st-staff-stories-title:hover { color: var(--st-muted); text-decoration: none; } .st-staff-stories-date { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); white-space: nowrap; flex: 0 0 auto; } .st-staff-more { display: inline-block; margin-top: 16px; font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-ink); font-weight: 700; text-decoration: none; } .st-staff-more:hover { color: var(--st-muted); text-decoration: none; } @media (max-width: 720px) { .st-staff-card { grid-template-columns: 1fr; gap: 18px; } .st-staff-avatar img, .st-staff-avatar .st-avatar-xl { width: 140px !important; height: 140px !important; } .st-staff-stories li { flex-direction: column; gap: 6px; align-items: flex-start; } } /* ========================================================= 12. ARŞİV / KATEGORİ ========================================================= */ .st-archive-head { border-bottom: 1px solid var(--st-ink); padding-bottom: 16px; margin-bottom: 28px; } .st-archive-head .st-overline { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-muted); } .st-archive-head h1 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); margin: 6px 0 0; } .st-archive-list { display: grid; grid-template-columns: 1fr; gap: 0; } .st-archive-list .st-story { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; padding: 22px 0; } .st-archive-list .st-story .st-image { order: 2; } @media (max-width: 720px) { .st-archive-list .st-story { grid-template-columns: 1fr; } } /* ========================================================= 13. FOOTER ========================================================= */ /* ========================================================= 13b. PRE-FOOTER — footer üstü widget alanı ========================================================= */ .st-prefooter { background: var(--st-bg-soft); color: var(--st-ink); margin-top: 48px; padding: 32px 24px 36px; border-top: 1px solid var(--st-rule); border-bottom: 1px solid var(--st-rule); font-family: var(--st-font-body); } .st-prefooter-inner { max-width: var(--st-w-content); margin: 0 auto; } .st-prefooter-top { padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid var(--st-rule); font-size: 1.05rem; line-height: 1.5; color: var(--st-ink); } .st-prefooter-top:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; } .st-prefooter-top p { margin: 0 0 .5em; } .st-prefooter-top a { color: var(--st-name); text-decoration: none; font-weight: 600; } .st-prefooter-top a:hover { text-decoration: underline; text-underline-offset: 3px; } .st-prefooter-top-title { font-family: var(--st-font-display); font-size: 1.2rem; margin: 0 0 8px; font-weight: 700; } .st-prefooter-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .st-prefooter-col h4, .st-prefooter-col-title { font-family: var(--st-font-display); font-size: 1.1rem; margin: 0 0 8px; font-weight: 700; color: var(--st-ink); } .st-prefooter-col p { font-size: 14px; line-height: 1.5; color: var(--st-soft-text); margin: 0 0 8px; } .st-prefooter-col a { color: var(--st-ink); } .st-prefooter-col a:hover { color: var(--st-muted); text-decoration: none; } .st-prefooter-col img { max-width: 100%; height: auto; margin: 0 0 10px; } @media (max-width: 900px) { .st-prefooter-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 540px) { .st-prefooter { padding: 24px 16px; } .st-prefooter-grid { grid-template-columns: 1fr; gap: 22px; } .st-prefooter-top { font-size: 1rem; } } /* Gece modu — pre-footer'da arka plan biraz daha derin */ :root[data-theme="dark"] .st-prefooter { background: var(--st-bg-soft); } /* ========================================================= 13. FOOTER ========================================================= */ .st-footer { background: var(--st-footer-bg); color: var(--st-footer-fg); margin-top: 48px; padding: 22px 24px; font-family: var(--st-font-sans); font-size: 14px; } /* Pre-footer hemen üstündeyse footer'ın üst margin'ini sıfırla */ .st-prefooter + .st-footer { margin-top: 0; } .st-footer .st-inner { max-width: var(--st-w-content); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .st-footer a { color: var(--st-footer-fg); text-decoration: none; } .st-footer a:hover { color: #fff; text-decoration: underline; text-underline-offset: 4px; } .st-footer-menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } .st-footer-menu li { padding: 0 18px; position: relative; line-height: 1.4; } .st-footer-menu li:first-child { padding-left: 0; } .st-footer-menu li + li::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 14px; background: rgba(255,255,255,.2); } .st-footer-menu a { font-size: 14px; color: var(--st-footer-fg); } .st-footer-brand { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.25; text-align: right; } .st-footer-line { display: block; } .st-footer-line--strong { font-family: var(--st-font-display); font-size: 1.4rem; font-weight: 700; color: #fff; letter-spacing: -0.01em; } @media (max-width: 720px) { .st-footer .st-inner { flex-direction: column; align-items: flex-start; gap: 18px; } .st-footer-brand { align-items: flex-start; text-align: left; } .st-footer-menu { gap: 0; } } /* ========================================================= 14. KÜÇÜK YARDIMCILAR ========================================================= */ .st-image figure { margin: 0; } .screen-reader-text { border: 0; clip: rect(1px,1px,1px,1px); -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .st-pagination { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--st-rule); padding-top: 18px; margin-top: 32px; font-family: var(--st-font-sans); font-size: 13px; } .st-tag { display: inline-block; font-family: var(--st-font-sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; background: var(--st-accent); color: #fff; padding: 3px 8px; margin-right: 6px; } .st-search-form { display: flex; gap: 8px; } .st-search-form input[type="search"] { flex: 1; border: 1px solid var(--st-rule); padding: 8px 10px; font-family: var(--st-font-body); } .st-search-form button { border: 1px solid var(--st-ink); background: var(--st-ink); color: #fff; padding: 8px 14px; font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; } /* yorum bölümü için minimal */ .st-comments { max-width: var(--st-w-narrow); margin: 0 auto; padding: 0 24px 56px; } .st-comments h2 { font-size: 1.4rem; border-top: 1px solid var(--st-ink); padding-top: 16px; } .st-comments .comment-list { list-style: none; padding: 0; } .st-comments .comment { border-bottom: 1px solid var(--st-rule); padding: 14px 0; } /* ========================================================= 99. MOBİL PAS — ≤600px için kapsamlı küçültme & taşma koruması ========================================================= */ @media (max-width: 600px) { body { font-size: 16px; } h1 { font-size: clamp(1.6rem, 7vw, 2rem); } h2 { font-size: clamp(1.3rem, 5.5vw, 1.6rem); } h3 { font-size: 1.15rem; } /* Genel container'lar */ .st-container { padding: 18px 16px 36px; } .st-archive-head { padding: 0 16px; } .st-archive-list { padding: 0 16px; } /* Header */ .st-topbar-inner { padding: 8px 14px; gap: 8px; flex-wrap: wrap; } .st-topbar-date { font-size: 10px; letter-spacing: .14em; } .st-theme-toggle { width: 30px; height: 30px; } .st-mainbar-inner { padding: 16px 16px 18px; gap: 14px; } .st-mainbar-logo a { font-size: clamp(1.6rem, 8vw, 2.4rem); line-height: 1.05; letter-spacing: -0.01em; } .st-primary-menu li { padding: 0 12px; } .st-primary-menu li + li::before { height: 14px; } .st-primary-menu a { font-size: 0.95rem; } /* Manşet */ .st-grid, .st-grid--2 { gap: 0; } .st-lede h1 { font-size: clamp(1.7rem, 7vw, 2.1rem); line-height: 1.18; } .st-lede .st-image { margin: 0 0 12px; } .st-lede .st-card-byline-text { font-size: 14px; } .st-lede .st-card-byline-date { font-size: 14px; } .st-lede .st-card-avatar img, .st-lede .st-avatar-sm { width: 44px; height: 44px; } .st-secondary h2 { font-size: clamp(1.4rem, 6vw, 1.8rem); } .st-side-item { padding-bottom: 16px; margin-bottom: 16px; } .st-side-item h3 { font-size: 1.15rem; } .st-side-item .st-card-byline-text { font-size: 13px; } .st-side-item .st-avatar-sm, .st-side-item .st-card-avatar img { width: 32px; height: 32px; } /* Section başlıkları */ .st-section { margin-top: 36px; padding-top: 12px; } .st-section-head { margin-bottom: 14px; } .st-section-head h2 { font-size: 1.3rem; } .st-section-head .st-more { font-size: 10px; } /* Spotlight */ .st-spotlight { padding: 20px 0 24px; margin-top: 36px; } .st-spotlight-inner { padding: 0 16px; } .st-spotlight-grid { gap: 18px; } .st-spotlight-title { font-size: clamp(1.5rem, 7vw, 2rem); margin: 6px 0 10px; } .st-spotlight-dek { font-size: 1rem; line-height: 1.45; margin: 0 0 16px; } .st-spotlight-byline { grid-template-columns: 56px 1fr; gap: 12px; padding-top: 12px; } .st-spotlight-avatar img { width: 56px; height: 56px; } .st-spotlight-name { font-size: 1rem; } .st-spotlight-by, .st-spotlight-date { font-size: 10px; } /* Voices */ .st-voices-grid { gap: 22px; } .st-voice-title { font-size: 1.2rem; } .st-voice-dek { font-size: 14px; } .st-voice-author-name { font-size: 14px; } /* Mini (Lab) */ .st-mini { border-right: 0 !important; padding: 18px 16px; min-height: 0; grid-template-columns: 1fr 80px; gap: 14px; } .st-mini-title { font-size: 1.05rem; line-height: 1.25; margin: 0 0 10px; } .st-mini-author { font-size: 14px; margin: 0; } .st-mini-avatar img, .st-mini .st-avatar-md { width: 80px; height: 80px; } /* Tek yazı */ .st-single-wrap { padding: 8px 16px 16px; gap: 20px; } .st-article { padding: 8px 0 20px; } .st-article h1 { font-size: clamp(1.7rem, 8vw, 2.2rem); } .st-article .st-dek { font-size: 1.05rem; line-height: 1.45; } .st-article-body { font-size: 1.05rem; line-height: 1.6; } .st-article-body p:first-of-type::first-letter { font-size: 3rem; padding: 2px 8px 0 0; } .st-article-body h2 { font-size: 1.35rem; } .st-article-body h3 { font-size: 1.15rem; } .st-breadcrumb { font-size: 10px; gap: 4px; } .st-byline-block { gap: 12px; padding: 14px 0; margin-bottom: 22px; } .st-byline-avatar img, .st-avatar { width: 52px !important; height: 52px !important; } .st-author-box { padding: 16px; gap: 14px; grid-template-columns: 64px 1fr; } .st-author-avatar img, .st-avatar-lg { width: 64px !important; height: 64px !important; } /* Yazar sayfası */ .st-author-page { padding: 24px 16px 40px; } .st-author-id { gap: 14px; } .st-author-avatar-lg img, .st-avatar-xl { width: 84px !important; height: 84px !important; } .st-author-headline { font-size: clamp(1.6rem, 8vw, 2.2rem); } .st-author-intro { font-size: 1rem; } /* Staff sayfası */ .st-staff { padding: 24px 16px 40px; } .st-staff-headline { font-size: clamp(1.7rem, 8vw, 2.2rem); } .st-staff-card { grid-template-columns: 1fr; gap: 16px; padding: 26px 0; } .st-staff-card .st-staff-avatar img, .st-staff-card .st-staff-avatar .st-avatar-xl { width: 120px !important; height: 120px !important; } .st-staff-name { font-size: 1.4rem; margin: 0 0 10px; } .st-staff-stories li { flex-direction: column; gap: 4px; align-items: flex-start; padding: 12px 0; } .st-staff-stories-title { font-size: 1rem; } .st-staff-stories-date { font-size: 10px; } /* Liste kartı (arşiv) */ .st-list-card { padding: 22px 0; gap: 14px; } .st-list-card.has-image { grid-template-columns: 1fr 88px; } .st-list-card-image img { width: 88px; height: 88px; } .st-list-card-title { font-size: 1.1rem; line-height: 1.22; } .st-list-card-author { font-size: 0.95rem; margin: 0 0 8px; } .st-list-card-dek { font-size: 0.95rem; line-height: 1.5; margin: 0 0 10px; } .st-list-card-time { font-size: 10px; letter-spacing: .12em; } /* Çok okunanlar */ .st-mostviewed { padding: 0 16px 16px; margin-top: 24px; } .st-mostviewed-title { font-size: 1.4rem; margin: 0 0 12px; } .st-mostviewed-item { padding: 14px 0; gap: 12px; } .st-mostviewed-item, .st-mostviewed-item.has-image { grid-template-columns: 42px 1fr 64px; } .st-mostviewed-num { font-size: 1.9rem; } .st-mostviewed-headline { font-size: 0.95rem; line-height: 1.25; } .st-mostviewed-image img { width: 64px; height: 48px; } /* Footer */ .st-footer { padding: 18px 16px; } .st-footer .st-inner { gap: 14px; } .st-footer-line--strong { font-size: 1.15rem; } .st-footer-menu { gap: 0; } .st-footer-menu li { padding: 0 10px; } .st-footer-menu a { font-size: 12px; } /* Yorumlar */ .st-comments { padding: 0 16px 36px; } .st-comments h2 { font-size: 1.2rem; } /* Yardımcılar */ .st-search-form input[type="search"] { font-size: 16px; } /* iOS zoom önler */ } /* Çok dar ekranlarda en kritik öğeler için ek küçültme */ @media (max-width: 380px) { .st-list-card.has-image { grid-template-columns: 1fr 72px; } .st-list-card-image img { width: 72px; height: 72px; } .st-mainbar-logo a { font-size: 1.6rem; } .st-mostviewed-item, .st-mostviewed-item.has-image { grid-template-columns: 34px 1fr 54px; } .st-mostviewed-num { font-size: 1.6rem; } .st-mostviewed-image img { width: 54px; height: 40px; } }