/* 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.25.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-font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Menlo", "Consolas", "Liberation Mono", monospace; --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 currentColor; border-radius: 50%; color: var(--st-topbar-fg); opacity: .65; cursor: pointer; transition: opacity .15s; } .st-theme-toggle:hover { opacity: 1; } .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; } /* Arama butonu — mainbar'da tema toggle'ın yanında */ .st-nav-search { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; background: transparent; border: 1px solid currentColor; border-radius: 50%; color: var(--st-topbar-fg); opacity: .65; cursor: pointer; transition: opacity .15s; flex: 0 0 auto; } .st-nav-search:hover { opacity: 1; } .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: currentColor; opacity: .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 { color: var(--st-name); opacity: 1; } .st-primary-menu .current-menu-item > a { color: var(--st-name); text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--st-name); } .st-nav-search-form { border-top: 1px solid; border-top-color: currentColor; background: var(--st-topbar-bg); color: var(--st-topbar-fg); } .st-nav-search-form .st-nav-search-inner { max-width: var(--st-w-content); margin: 0 auto; padding: 12px 24px; } /* Header rengiyle uyumlu arama formu */ .st-nav-search-form .st-search-form input[type="search"] { border: 1px solid currentColor; background: transparent; color: var(--st-topbar-fg); } .st-nav-search-form .st-search-form input[type="search"]::placeholder { color: currentColor; opacity: .55; } .st-nav-search-form .st-search-form button { background: var(--st-topbar-fg); border-color: var(--st-topbar-fg); color: var(--st-topbar-bg); } .st-nav-search-form .st-search-form button:hover { background: var(--st-name); border-color: var(--st-name); color: #fff; } /* ========================================================= 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 currentColor; padding-bottom: 14px; margin-bottom: 14px; color: var(--st-topbar-fg); } .st-drawer-head > * { color: var(--st-topbar-fg); } .st-drawer-title { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; opacity: .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 currentColor; opacity: 1; } .st-drawer-menu li { position: relative; } .st-drawer-menu li::after { content: ""; position: absolute; inset: auto 0 -1px 0; height: 1px; background: currentColor; opacity: .12; } .st-drawer-menu li { border-bottom: 0; } .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 { color: var(--st-name); opacity: 1; } .st-drawer-menu .current-menu-item > a { color: var(--st-name); 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 a { color: inherit; text-decoration: none; } .st-card-byline-name a: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 { margin: 0 0 28px; } .st-article-head-top { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; padding-bottom: 26px; border-bottom: 1px solid var(--st-rule); } .st-article-head-foot { padding: 26px 0; border-bottom: 1px solid var(--st-rule); } .st-article-head-body { min-width: 0; } .st-article-head-kicker { font-family: var(--st-font-mono); font-size: 12.5px; color: var(--st-ink); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 18px; } .st-article-head-kicker a { color: inherit; text-decoration: none; } .st-article-head-kicker a:hover { color: var(--st-name); } .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(2rem, 4.6vw, 3.4rem); line-height: 1.08; font-weight: 800; margin: 0 0 18px; letter-spacing: -0.02em; color: var(--st-ink); } .st-article-head-author { font-family: var(--st-font-display); color: var(--st-ink); font-weight: 700; font-size: 1.5rem; line-height: 1.2; margin: 0; display: flex; align-items: center; gap: 12px; } .st-article-head-author a { color: inherit; text-decoration: none; } .st-article-head-author a:hover { color: var(--st-name); } /* 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.28rem; line-height: 1.5; margin: 0 0 22px; max-width: 760px; } .st-article-head-foot .st-article-head-time { margin: 0; } .st-article-head-time { font-family: var(--st-font-mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--st-muted); margin: 0; } .st-article-head-time .st-dot { margin: 0 8px; } .st-article-head-avatars { display: flex; flex-direction: column; align-items: flex-end; gap: 14px; justify-self: end; } .st-article-head-avatar { display: block; line-height: 0; } .st-article-head-avatar img, .st-avatar-hero { width: 132px !important; height: 132px !important; border-radius: 50% !important; object-fit: cover; background: var(--st-avatar-bg, #f2c14e); display: block; box-shadow: 0 0 0 1px var(--st-rule), 0 0 0 5px #fff, 0 0 0 6px var(--st-rule); } /* Birden fazla yazar: avatarları yatay bindir (2+ yazar) */ .st-article-head-avatars.is-multi { flex-direction: row; align-items: center; gap: 0; } .st-article-head-avatars.is-multi .st-article-head-avatar { margin-left: -34px; } .st-article-head-avatars.is-multi .st-article-head-avatar:first-child { margin-left: 0; } .st-article-head-avatars.is-multi .st-article-head-avatar img, .st-article-head-avatars.is-multi .st-avatar-hero { width: 108px !important; height: 108px !important; box-shadow: 0 0 0 4px #fff, 0 0 0 5px var(--st-rule); } /* Birden fazla yazar kutusu arası boşluk */ .st-author-box + .st-author-box { margin-top: 18px; } @media (max-width: 720px) { .st-article-head-top { grid-template-columns: 1fr; gap: 0; padding-bottom: 18px; } .st-article-head-foot { padding: 18px 0; } .st-article-head-avatars { display: none; } /* sağdaki büyük avatar(lar) 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.7rem, 8vw, 2.2rem); } .st-article-head-author { font-size: 1.2rem; } .st-article-head-dek { font-size: 1.1rem; } } /* 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; } /* ------------------------------------------------------------ İçerik görselleri — hizalama + masaüstünde sütun dışına taşma (Guardian tarzı: sola/sağa yaslı fotoğraflar metin sütununun kenarından dışarı doğru genişler.) ------------------------------------------------------------ */ .st-article-body img { max-width: 100%; height: auto; } .st-article-body figure { margin: 1.8em 0; } .st-article-body figure img, .st-article-body .wp-block-image img { display: block; width: 100%; height: auto; } .st-article-body figcaption, .st-article-body .wp-caption-text { font-family: var(--st-font-sans); font-size: .82rem; line-height: 1.45; color: var(--st-muted); margin-top: 8px; padding-left: 2px; border-left: 0; } .st-article-body .aligncenter { display: block; margin: 1.9em auto; text-align: center; } /* Küçük/orta ekran: yaslı görseller sütun içinde kalır */ .st-article-body .alignleft { float: left; max-width: 50%; margin: .5em 1.6em 1.1em 0; } .st-article-body .alignright { float: right; max-width: 50%; margin: .5em 0 1.1em 1.6em; } .st-article-body .alignleft img, .st-article-body .alignright img { width: 100%; } /* Masaüstü: sütunun dışına taşır (yan boşluklara genişler) */ @media (min-width: 1120px) { .st-article-body .alignleft { width: 440px; max-width: none; margin-left: -220px; margin-right: 40px; } .st-article-body .alignright { width: 440px; max-width: none; margin-right: -220px; margin-left: 40px; } .st-article-body .alignwide { width: 1040px; max-width: none; margin-left: -160px; margin-right: -160px; } .st-article-body .alignwide img { width: 100%; } } @media (min-width: 1420px) { .st-article-body .alignleft { width: 520px; margin-left: -300px; } .st-article-body .alignright { width: 520px; margin-right: -300px; } } .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; } } /* ========================================================= 11b5. ARAMA SAYFASI — yazar kartları üst bölüm ========================================================= */ .st-search-authors, .st-search-section-title { max-width: var(--st-w-content); margin: 0 auto; } .st-search-authors { padding: 8px 24px 28px; } .st-search-authors-title { font-family: var(--st-font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; margin: 0 0 16px; letter-spacing: -0.01em; } .st-search-authors-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; } .st-search-author { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; padding: 18px 0; border-top: 1px solid var(--st-rule); } .st-search-author:nth-child(-n+2) { border-top: 0; padding-top: 0; } .st-search-author-avatar { display: block; line-height: 0; } .st-search-author-avatar img, .st-search-author-img { width: 96px !important; height: 96px !important; border-radius: 50% !important; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-search-author-name { font-family: var(--st-font-display); font-size: 1.2rem; font-weight: 700; margin: 0 0 4px; } .st-search-author-name a { color: var(--st-ink); text-decoration: none; } .st-search-author-name a:hover { color: var(--st-name); } .st-search-author-bio { color: var(--st-soft-text); font-size: 0.95rem; line-height: 1.45; margin: 0 0 6px; } .st-search-author-link { margin: 0; font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; } .st-search-author-link a { color: var(--st-name); text-decoration: none; } .st-search-author-link a:hover { text-decoration: underline; } .st-search-section-title { font-family: var(--st-font-display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 700; margin: 24px auto 0; padding: 0 24px 8px; letter-spacing: -0.01em; border-top: 1px solid var(--st-rule); padding-top: 18px; } @media (max-width: 720px) { .st-search-authors-grid { grid-template-columns: 1fr; gap: 0; } .st-search-author { grid-template-columns: 72px 1fr; gap: 14px; } .st-search-author:nth-child(-n+2) { border-top: 1px solid var(--st-rule); padding-top: 18px; } .st-search-author:first-child { border-top: 0; padding-top: 0; } .st-search-author-avatar img, .st-search-author-img { width: 72px !important; height: 72px !important; } } /* Arama sonuçları — raporlar */ .st-search-reports { margin: 32px auto 0; max-width: var(--st-w-content); padding: 0 24px; } .st-search-reports-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 18px; } @media (max-width: 720px) { .st-search-reports-grid { grid-template-columns: 1fr; } } .st-search-report { display: grid; grid-template-columns: 160px 1fr; gap: 18px; padding: 18px 0; border-top: 1px solid var(--st-rule); } .st-search-report:nth-child(-n+2) { border-top: 0; padding-top: 0; } @media (max-width: 720px) { .st-search-report { grid-template-columns: 100px 1fr; gap: 14px; } .st-search-report:nth-child(-n+2) { border-top: 1px solid var(--st-rule); padding-top: 18px; } .st-search-report:first-child { border-top: 0; padding-top: 0; } } .st-search-report-image { display: block; line-height: 0; } .st-search-report-image img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .st-search-report-body { display: flex; flex-direction: column; gap: 6px; } .st-search-report-kicker { font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-name); margin: 0; } .st-search-report-title { font-family: var(--st-font-display); font-size: 20px; font-weight: 800; line-height: 1.25; margin: 0; } .st-search-report-title a { color: var(--st-ink); text-decoration: none; } .st-search-report-title a:hover { text-decoration: underline; } .st-search-report-authors { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-soft-text); margin: 0; } .st-search-report-dek { font-family: var(--st-font-body); font-size: 14px; line-height: 1.55; color: var(--st-soft-text); margin: 4px 0 0; } /* Canlı arama — araştırmacı için boş avatar fallback */ .st-live-avatar--empty { display: inline-block; width: 48px; height: 48px; border-radius: 50%; background: var(--st-bg-soft); border: 1px solid var(--st-rule); } /* ========================================================= 11e0. ANASAYFA — KURUMSAL HERO + BÖLÜMLER ========================================================= */ .st-home-hero { background: var(--st-bg-soft); padding: 60px 24px; margin: 0 0 36px; } .st-home-hero-inner { max-width: var(--st-w-content); margin: 0 auto; } .st-home-hero.has-image .st-home-hero-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px; align-items: center; } @media (max-width: 900px) { .st-home-hero.has-image .st-home-hero-inner { grid-template-columns: 1fr; gap: 28px; } } .st-home-hero-text { min-width: 0; } .st-home-hero-title { font-family: var(--st-font-display); font-size: clamp(2.2rem, 5.4vw, 4.2rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 22px; max-width: 18ch; color: var(--st-ink); } .st-home-hero-intro { font-family: var(--st-font-body); font-size: 1.15rem; line-height: 1.65; color: var(--st-soft-text); max-width: 640px; } .st-home-hero-intro p { margin: 0 0 1em; } .st-home-hero-intro p:last-child { margin-bottom: 0; } .st-home-hero-image { line-height: 0; aspect-ratio: 4/3; overflow: hidden; } .st-home-hero-image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Makale altı YouTube Shorts şeridi (3 sütun, 9:16) */ .st-shorts { margin: 40px 0 24px; padding-top: 32px; border-top: 4px solid var(--st-ink); } .st-shorts-title { font-family: var(--st-font-display); font-size: clamp(22px, 2.4vw, 30px); font-weight: 800; margin: 0 0 18px; color: var(--st-ink); letter-spacing: -0.005em; } .st-shorts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .st-short { position: relative; aspect-ratio: 9 / 16; background: #000; border-radius: 6px; overflow: hidden; } .st-short iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 720px) { .st-shorts-grid { gap: 10px; } } @media (max-width: 480px) { .st-shorts-grid { grid-template-columns: 1fr; gap: 18px; } .st-short { aspect-ratio: 9 / 16; max-width: 320px; margin: 0 auto; width: 100%; } } /* Makale altı paylaşım butonu (NYT tarzı dropdown) */ .st-share { position: relative; margin: 36px 0 8px; padding-top: 24px; border-top: 1px solid var(--st-rule); } .st-share-trigger-wrap { display: inline-block; } .st-share-trigger { display: inline-flex; align-items: center; gap: 10px; padding: 10px 18px; background: var(--st-paper); color: var(--st-ink); border: 1px solid var(--st-rule); border-radius: 999px; font-family: var(--st-font-sans); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; } .st-share-trigger:hover, .st-share-trigger[aria-expanded="true"] { border-color: var(--st-ink); background: var(--st-ink); color: var(--st-paper); } .st-share-trigger svg { display: block; } .st-share-menu { position: absolute; z-index: 50; bottom: calc(100% - 12px); left: 0; width: 320px; background: var(--st-paper); border: 1px solid var(--st-rule); border-radius: 12px; box-shadow: 0 18px 40px rgba(0,0,0,.18); padding: 18px 0 8px; } .st-share-menu::after, .st-share-menu::before { content: ''; position: absolute; left: 30px; width: 0; height: 0; border-style: solid; } .st-share-menu::before { bottom: -9px; border-width: 9px 9px 0 9px; border-color: var(--st-rule) transparent transparent transparent; } .st-share-menu::after { bottom: -8px; border-width: 8px 8px 0 8px; border-color: var(--st-paper) transparent transparent transparent; } .st-share-menu[hidden] { display: none; } .st-share-title { font-family: var(--st-font-display); font-weight: 800; font-size: 18px; margin: 0 22px 4px; color: var(--st-ink); } .st-share-sub { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-soft-text); margin: 0 22px 14px; line-height: 1.45; } .st-share-list { list-style: none; margin: 0; padding: 0; max-height: 60vh; overflow-y: auto; } .st-share-list li + li .st-share-item { border-top: 1px solid var(--st-rule); } .st-share-item { display: flex; align-items: center; gap: 14px; padding: 12px 22px; text-decoration: none; color: var(--st-ink); font-family: var(--st-font-sans); font-size: 15px; font-weight: 500; transition: background .15s ease; position: relative; } .st-share-item:hover { background: var(--st-bg-soft); text-decoration: none; } .st-share-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--st-rule); background: var(--st-paper); color: var(--st-ink); flex-shrink: 0; } .st-share-item:hover .st-share-icon { border-color: var(--st-ink); } .st-share-label { flex: 1; } .st-share-copied { font-family: var(--st-font-sans); font-size: 12px; font-weight: 600; color: #176f3a; background: #d7f1e1; padding: 4px 8px; border-radius: 999px; } @media (max-width: 480px) { .st-share-menu { position: fixed; left: 12px; right: 12px; bottom: 12px; width: auto; max-width: none; } .st-share-menu::before, .st-share-menu::after { display: none; } } /* Medya Yansımaları — araştırma arşivi ve tek rapor altında */ .st-research-press { margin: 64px 0 24px; padding-top: 40px; border-top: 4px solid var(--st-ink); } .st-research-press-head { margin: 0 0 22px; } .st-research-press-title { font-family: var(--st-font-display); font-size: clamp(28px, 3.4vw, 40px); font-weight: 800; line-height: 1.15; margin: 0 0 8px; color: var(--st-ink); letter-spacing: -0.005em; } .st-research-press-intro { font-family: var(--st-font-body); font-size: 16px; color: var(--st-soft-text); margin: 0; max-width: 720px; } .st-report-press { margin-top: 40px; } .st-report-press .st-pp-section-title { margin-bottom: 18px; } .st-press-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } @media (max-width: 1024px) { .st-press-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .st-press-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .st-press-grid { grid-template-columns: 1fr; } } .st-press-card { display: flex; flex-direction: column; background: var(--st-bg-soft); border: 1px solid var(--st-rule); border-radius: 4px; overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .st-press-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.08); border-color: var(--st-ink); text-decoration: none; } .st-press-card-image { display: block; width: 100%; aspect-ratio: 16 / 9; background-color: var(--st-bg-soft); background-size: cover; background-position: center; } .st-press-card-image--empty { background-color: var(--st-bg-soft); background-image: linear-gradient(135deg, var(--st-bg-soft) 0%, var(--st-rule) 100%); } .st-press-card-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; background: var(--st-paper); } .st-press-card-outlet { font-family: var(--st-font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--st-name); } .st-press-card-title { font-family: var(--st-font-display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--st-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .st-press-card-date { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-soft-text); margin-top: auto; display: flex; justify-content: space-between; align-items: center; } .st-press-card-arrow { color: var(--st-ink); font-size: 14px; } /* ========================================================= HAKKIMIZDA SAYFASI — Internews tarzı sade şablon ========================================================= */ .st-hk { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } /* Sayfa başı: breadcrumb + büyük H1 */ .st-hk-head { padding: 28px 0 24px; border-bottom: 1px solid var(--st-rule); margin-bottom: 36px; } .st-hk-breadcrumb { font-family: var(--st-font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-soft-text); margin: 0 0 14px; font-weight: 600; } .st-hk-breadcrumb a { color: var(--st-soft-text); text-decoration: none; } .st-hk-breadcrumb a:hover { color: var(--st-ink); text-decoration: underline; } .st-hk-breadcrumb span[aria-hidden] { margin: 0 6px; } .st-hk-h1 { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(42px, 6.4vw, 84px); line-height: 1.02; letter-spacing: -0.015em; margin: 0; color: var(--st-ink); } /* Opsiyonel YouTube video */ .st-hk-video { position: relative; aspect-ratio: 16 / 9; margin: 0 0 36px; background: #000; overflow: hidden; } .st-hk-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } /* İki sütunlu layout: prose + yan navigasyon */ .st-hk-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 48px; align-items: flex-start; } @media (max-width: 860px) { .st-hk-layout { grid-template-columns: 1fr; gap: 36px; } } /* Prose */ .st-hk-prose p, .st-hk-prose li { font-size: 19px; line-height: 1.62; color: var(--st-ink); margin: 0 0 22px; } .st-hk-prose p:first-child strong, .st-hk-prose strong { font-weight: 700; } .st-hk-prose h2 { font-family: var(--st-font-display); font-weight: 800; font-size: 28px; line-height: 1.2; margin: 36px 0 12px; color: var(--st-ink); letter-spacing: -0.005em; } .st-hk-prose a { color: var(--st-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Yan navigasyon */ .st-hk-aside { border-top: 4px solid var(--st-ink); padding-top: 18px; position: sticky; top: 100px; } @media (max-width: 860px) { .st-hk-aside { position: static; } } .st-hk-aside-title { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--st-name); margin: 0 0 12px; } .st-hk-aside-list { list-style: none; margin: 0; padding: 0; } .st-hk-aside-list li { border-top: 1px solid var(--st-rule); } .st-hk-aside-list li:first-child { border-top: 0; } .st-hk-aside-list a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; font-family: var(--st-font-display); font-size: 18px; font-weight: 700; color: var(--st-ink); text-decoration: none; transition: color .15s ease; } .st-hk-aside-list a:hover { color: var(--st-name); } .st-hk-aside-list a span[aria-hidden] { font-family: var(--st-font-sans); font-size: 16px; color: var(--st-soft-text); transition: transform .2s ease, color .15s ease; } .st-hk-aside-list a:hover span[aria-hidden] { transform: translateX(4px); color: var(--st-name); } /* Anasayfa fon bölümü panel görünümü */ .st-home-funding--panel { background: var(--st-bg-soft); padding: 48px 36px; border-top: 4px solid var(--st-ink); border-bottom: 4px solid var(--st-ink); margin-top: 56px; margin-bottom: 56px; } @media (max-width: 720px) { .st-home-funding--panel { padding: 28px 20px; } } .st-home-funding-headline { margin: 0 0 28px; display: grid; grid-template-columns: 1fr auto; grid-template-areas: "eyebrow eyebrow" "title more" "sub sub"; gap: 4px 24px; align-items: end; } @media (max-width: 600px) { .st-home-funding-headline { grid-template-columns: 1fr; grid-template-areas: "eyebrow" "title" "sub" "more"; } } .st-home-funding-eyebrow { grid-area: eyebrow; font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--st-name); margin: 0 0 4px; } .st-home-funding-h2 { grid-area: title; font-family: var(--st-font-display); font-weight: 800; font-size: clamp(30px, 4vw, 46px); line-height: 1.05; margin: 0; color: var(--st-ink); letter-spacing: -0.01em; } .st-home-funding-sub { grid-area: sub; font-size: 16px; line-height: 1.55; color: var(--st-soft-text); margin: 6px 0 0; max-width: 680px; } .st-home-funding-more { grid-area: more; font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--st-ink); text-decoration: none; white-space: nowrap; align-self: end; } .st-home-funding-more:hover { color: var(--st-name); } /* ========================================================= SINGLE POST — Hibe Rehberi + Fon promo bloğu ========================================================= */ .st-resource-promo { margin: 56px 0 0; padding: 36px; background: var(--st-ink); color: var(--st-paper); border-left: 6px solid var(--st-name); } @media (max-width: 720px) { .st-resource-promo { padding: 26px 22px; } } .st-resource-promo-head { margin: 0 0 24px; max-width: 760px; } .st-resource-promo-kicker { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--st-name); margin: 0 0 10px; } .st-resource-promo-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.15; margin: 0 0 12px; color: var(--st-paper); letter-spacing: -0.005em; } .st-resource-promo-lead { font-size: 15px; line-height: 1.55; color: var(--st-paper); opacity: .85; margin: 0; } .st-resource-promo-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 20px; align-items: stretch; } @media (max-width: 720px) { .st-resource-promo-grid { grid-template-columns: 1fr; } } /* Sol: Rehber kartı */ .st-resource-card { display: flex; flex-direction: column; gap: 10px; padding: 22px 24px; background: var(--st-paper); color: var(--st-ink); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; } .st-resource-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.18); text-decoration: none; } .st-resource-card-tag { align-self: flex-start; font-family: var(--st-font-sans); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; padding: 4px 10px; border-radius: 999px; background: var(--st-ink); color: var(--st-paper); } .st-resource-card-title { font-family: var(--st-font-display); font-weight: 800; font-size: 22px; line-height: 1.2; color: var(--st-ink); letter-spacing: -0.005em; } .st-resource-card-text { font-size: 14px; line-height: 1.55; color: var(--st-soft-text); } .st-resource-card-cta { margin-top: auto; font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--st-ink); border-bottom: 2px solid var(--st-ink); padding-bottom: 2px; align-self: flex-start; } /* Sağ: Fon çağrıları mini liste */ .st-resource-fundings { background: rgba(255,255,255,0.06); padding: 22px 24px; color: var(--st-paper); } .st-resource-fundings-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin: 0 0 14px; font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; } .st-resource-fundings-head > span { color: var(--st-name); } .st-resource-fundings-head a { color: var(--st-paper); text-decoration: none; opacity: .8; } .st-resource-fundings-head a:hover { opacity: 1; } .st-resource-fundings-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .st-resource-fundings-list li { margin: 0; } .st-resource-fundings-list a { display: block; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.15); color: var(--st-paper); text-decoration: none; } .st-resource-fundings-list li:first-child a { border-top: 0; padding-top: 4px; } .st-resource-fundings-list a:hover .st-resource-funding-title { text-decoration: underline; } .st-resource-funding-title { display: block; font-family: var(--st-font-display); font-weight: 700; font-size: 15px; line-height: 1.3; margin: 0 0 4px; } .st-resource-funding-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-family: var(--st-font-sans); font-size: 11px; color: var(--st-paper); opacity: .75; text-transform: uppercase; letter-spacing: .04em; } /* ========================================================= FON KARTLARI — ortak: anasayfa ve arşivde aynı kart bileşeni ========================================================= */ .st-funding-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } @media (max-width: 720px) { .st-funding-cards { grid-template-columns: 1fr; gap: 14px; } } .st-funding-card { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px; background: var(--st-paper); border: 1px solid var(--st-rule); transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; position: relative; } .st-funding-card:hover { border-color: var(--st-ink); box-shadow: 0 6px 16px rgba(0,0,0,.06); transform: translateY(-2px); } .st-funding-card-link { text-decoration: none; color: inherit; display: block; } .st-funding-card-link::after { /* Tüm kartı tıklanabilir yap */ content: ''; position: absolute; inset: 0; } .st-funding-card-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(16px, 1.5vw, 19px); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.01em; margin: 0; color: #1d3a8a; } .st-funding-card:hover .st-funding-card-title { text-decoration: underline; } .st-funding-card-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; padding: 12px 0 6px; border-top: 1px solid var(--st-rule); border-bottom: 1px solid var(--st-rule); padding-bottom: 12px; } @media (max-width: 480px) { .st-funding-card-meta { grid-template-columns: 1fr; } } .st-funding-card-meta > div { margin: 0; min-width: 0; } .st-funding-card-meta dt { font-family: var(--st-font-sans); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--st-name); margin: 0 0 1px; } .st-funding-card-meta dd { margin: 0; font-size: 13px; line-height: 1.35; color: var(--st-ink); word-wrap: break-word; } .st-funding-card-excerpt { font-size: 13.5px; line-height: 1.55; color: var(--st-soft-text); margin: 0; } .st-funding-card-cta { margin: auto 0 0; padding-top: 4px; display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; z-index: 2; } .st-funding-card-cta a { font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--st-ink); text-decoration: none; border-bottom: 2px solid var(--st-ink); padding-bottom: 2px; position: relative; z-index: 3; } .st-funding-card-cta a:hover { color: var(--st-name); border-color: var(--st-name); } .st-funding-card-status { font-family: var(--st-font-sans); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 4px 10px; border-radius: 999px; background: var(--st-bg-soft); color: var(--st-soft-text); } .st-funding-card-status.is-open { background: #d7f1e1; color: #176f3a; } /* Anasayfa altındaki Hibe Rehberi promo banner — yatay, full width */ .st-funding-banner { margin-top: 28px; background: var(--st-ink); color: var(--st-paper); padding: 28px 30px; border-left: 4px solid var(--st-name); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 24px; } @media (max-width: 720px) { .st-funding-banner { grid-template-columns: 1fr; padding: 22px 22px; gap: 16px; } } .st-funding-banner-text-body, .st-funding-banner-kicker, .st-funding-banner-title { margin: 0; } .st-funding-banner-kicker { font-family: var(--st-font-sans); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--st-name); margin-bottom: 8px; } .st-funding-banner-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.15; color: var(--st-paper); letter-spacing: -0.005em; margin-bottom: 8px; } .st-funding-banner-text-body { font-size: 14px; line-height: 1.55; color: var(--st-paper); opacity: .88; max-width: 640px; } .st-funding-banner-cta { margin: 0; } .st-funding-banner-btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 24px; background: var(--st-paper); color: var(--st-ink); border-radius: 999px; font-family: var(--st-font-sans); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s ease; white-space: nowrap; } .st-funding-banner-btn:hover { background: transparent; color: var(--st-paper); box-shadow: inset 0 0 0 1px var(--st-paper); transform: translateY(-1px); text-decoration: none; } /* ========================================================= FON ÇAĞRILARI — arşiv + tek çağrı sayfası ========================================================= */ .st-fn-archive { max-width: 920px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-fn-archive-head { padding: 32px 0 28px; border-bottom: 4px solid var(--st-ink); margin-bottom: 40px; } .st-fn-archive-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05; margin: 4px 0 16px; letter-spacing: -0.012em; color: var(--st-ink); } .st-fn-archive-lead { font-size: 17px; line-height: 1.55; color: var(--st-soft-text); margin: 0; max-width: 720px; } /* GFMD-tarzı 3 sütunlu satır listeleme */ .st-fn-rows { list-style: none; margin: 0; padding: 0; } .st-fn-row { padding: 32px 0; border-top: 1px solid var(--st-rule); } .st-fn-row:first-child { border-top: 0; padding-top: 4px; } .st-fn-row-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(17px, 1.6vw, 20px); line-height: 1.25; text-transform: uppercase; letter-spacing: 0.01em; margin: 0 0 18px; } .st-fn-row-title a { color: #1d3a8a; /* GFMD mavisi tonunda lacivert */ text-decoration: none; } .st-fn-row-title a:hover { text-decoration: underline; } .st-fn-row-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 32px; margin: 0 0 14px; } @media (max-width: 760px) { .st-fn-row-meta { grid-template-columns: 1fr; gap: 8px; } } .st-fn-col { display: flex; flex-direction: column; gap: 6px; } .st-fn-field { font-size: 14px; line-height: 1.45; color: #6b7280; } .st-fn-label { font-weight: 700; color: var(--st-ink); margin-right: 4px; } .st-fn-row-excerpt { font-size: 15px; line-height: 1.6; color: var(--st-ink); margin: 6px 0 10px; max-width: 880px; } .st-fn-row-actions { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 12px 22px; align-items: center; } .st-fn-row-primary { font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--st-ink); text-decoration: none; border-bottom: 2px solid var(--st-ink); padding-bottom: 2px; } .st-fn-row-primary:hover { color: var(--st-name); border-color: var(--st-name); } .st-fn-row-secondary { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-soft-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .st-fn-row-secondary:hover { color: var(--st-ink); } .st-fn-empty { padding: 60px 0; text-align: center; color: var(--st-soft-text); font-style: italic; } /* Single */ .st-fn-single { max-width: 820px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-fn-single-head { padding: 28px 0 28px; border-bottom: 4px solid var(--st-ink); margin-bottom: 36px; } .st-fn-single-meta { display: flex; align-items: center; gap: 10px; font-family: var(--st-font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-soft-text); font-weight: 600; margin: 0 0 10px; } .st-fn-single-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(30px, 4vw, 48px); line-height: 1.05; margin: 0 0 12px; letter-spacing: -0.01em; color: var(--st-ink); } .st-fn-single-en { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-soft-text); margin: 0 0 18px; } .st-fn-single-en span { font-weight: 700; text-transform: uppercase; letter-spacing: .08em; } .st-fn-cta { margin: 0; } .st-fn-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: var(--st-ink); color: var(--st-paper); border-radius: 999px; font-family: var(--st-font-sans); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s ease; } .st-fn-cta-btn:hover { background: var(--st-paper); color: var(--st-ink); box-shadow: inset 0 0 0 1px var(--st-ink); transform: translateY(-1px); text-decoration: none; } .st-fn-body { font-size: 17px; line-height: 1.7; color: var(--st-ink); } .st-fn-body p { margin: 0 0 16px; } .st-fn-body h2 { font-family: var(--st-font-display); font-weight: 800; font-size: 24px; line-height: 1.2; margin: 32px 0 12px; } .st-fn-body h3 { font-family: var(--st-font-display); font-weight: 800; font-size: 19px; margin: 22px 0 8px; } .st-fn-body ul, .st-fn-body ol { margin: 0 0 18px; padding-left: 22px; } .st-fn-body li { margin: 0 0 6px; line-height: 1.6; } .st-fn-body a { color: var(--st-ink); text-decoration: underline; text-underline-offset: 3px; } .st-fn-disclaimer { margin: 36px 0 0; padding: 14px 18px; background: var(--st-bg-soft); border-left: 3px solid var(--st-name); font-size: 13px; color: var(--st-soft-text); line-height: 1.5; } /* ========================================================= HİBE REHBERİ — landing + tek bölüm sayfası ========================================================= */ /* LANDING */ .st-gd-landing { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-gd-hero { padding: 56px 0 48px; border-bottom: 4px solid var(--st-ink); margin-bottom: 48px; max-width: 880px; } .st-gd-hero-kicker { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--st-name); margin: 0 0 12px; } .st-gd-hero-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(42px, 6vw, 84px); line-height: 1.02; margin: 0 0 18px; color: var(--st-ink); letter-spacing: -0.015em; } .st-gd-hero-lead { font-size: 19px; line-height: 1.55; color: var(--st-ink); margin: 0 0 26px; max-width: 700px; } .st-gd-hero-cta { display: flex; align-items: center; gap: 18px; margin: 0; flex-wrap: wrap; } .st-gd-hero-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; background: var(--st-ink); color: var(--st-paper); border-radius: 999px; font-family: var(--st-font-sans); font-size: 15px; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s ease; } .st-gd-hero-btn:hover { background: var(--st-paper); color: var(--st-ink); box-shadow: inset 0 0 0 1px var(--st-ink); text-decoration: none; transform: translateY(-1px); } .st-gd-hero-meta { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-soft-text); text-transform: uppercase; letter-spacing: .08em; font-weight: 600; } .st-gd-modules-title { font-family: var(--st-font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--st-name); margin: 0 0 18px; } .st-gd-modules-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } @media (max-width: 720px) { .st-gd-modules-list { grid-template-columns: 1fr; } } .st-gd-module-card { display: grid; grid-template-columns: 56px 1fr 24px; align-items: flex-start; gap: 18px; padding: 22px 22px; border: 1px solid var(--st-rule); background: var(--st-paper); color: var(--st-ink); text-decoration: none; transition: background .15s ease, transform .15s ease, border-color .15s ease; height: 100%; } .st-gd-module-card:hover { background: var(--st-bg-soft); border-color: var(--st-ink); transform: translateY(-2px); text-decoration: none; } .st-gd-module-num { font-family: var(--st-font-display); font-weight: 800; font-size: 26px; line-height: 1; color: var(--st-name); letter-spacing: -0.005em; } .st-gd-module-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .st-gd-module-name { font-family: var(--st-font-display); font-weight: 800; font-size: 19px; line-height: 1.25; color: var(--st-ink); } .st-gd-module-dek { font-size: 14px; line-height: 1.5; color: var(--st-soft-text); } .st-gd-module-kids { font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-name); font-weight: 700; margin-top: 4px; } .st-gd-module-arrow { font-family: var(--st-font-sans); font-size: 22px; color: var(--st-soft-text); align-self: center; transition: transform .2s ease, color .2s ease; } .st-gd-module-card:hover .st-gd-module-arrow { color: var(--st-ink); transform: translateX(3px); } .st-gd-empty { padding: 60px 0; text-align: center; color: var(--st-soft-text); font-style: italic; } /* SINGLE — bölüm sayfası */ .st-gd-single { max-width: 1320px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-gd-single-head { padding: 28px 0 24px; border-bottom: 1px solid var(--st-rule); margin-bottom: 40px; max-width: 880px; } .st-gd-single-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(32px, 4.4vw, 52px); line-height: 1.05; margin: 4px 0 14px; color: var(--st-ink); letter-spacing: -0.01em; } .st-gd-single-lead { font-size: 18px; line-height: 1.55; color: var(--st-soft-text); margin: 0; } .st-gd-grid { display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 40px; align-items: flex-start; } .st-gd-grid--no-toc { grid-template-columns: 240px minmax(0, 1fr); } @media (max-width: 1100px) { .st-gd-grid { grid-template-columns: 220px minmax(0, 1fr); } .st-gd-grid--no-toc { grid-template-columns: 220px minmax(0, 1fr); } .st-gd-toc { display: none; } } @media (max-width: 860px) { .st-gd-grid, .st-gd-grid--no-toc { grid-template-columns: 1fr; gap: 28px; } .st-gd-nav { position: static; } } /* Sol navigasyon */ .st-gd-nav { position: sticky; top: 90px; border-top: 4px solid var(--st-ink); padding-top: 16px; max-height: calc(100vh - 110px); overflow-y: auto; } .st-gd-nav-title { font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 800; color: var(--st-name); margin: 0 0 12px; } .st-gd-nav-list { list-style: none; margin: 0; padding: 0; } .st-gd-nav-item { margin: 0; } .st-gd-nav-link { display: grid; grid-template-columns: 28px 1fr; align-items: baseline; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--st-rule); font-family: var(--st-font-sans); font-size: 14px; font-weight: 600; color: var(--st-ink); text-decoration: none; line-height: 1.3; } .st-gd-nav-link:hover { color: var(--st-name); } .st-gd-nav-link.is-current { color: var(--st-name); font-weight: 800; } .st-gd-nav-num { font-family: var(--st-font-display); font-weight: 800; color: var(--st-soft-text); font-size: 13px; } .st-gd-nav-link.is-current .st-gd-nav-num, .st-gd-nav-item.is-active-branch .st-gd-nav-num { color: var(--st-name); } .st-gd-nav-sub { list-style: none; margin: 4px 0 8px 36px; padding: 0; border-left: 2px solid var(--st-rule); } .st-gd-nav-sub li { margin: 0; } .st-gd-nav-sub a { display: block; padding: 6px 0 6px 12px; font-size: 13px; color: var(--st-soft-text); text-decoration: none; line-height: 1.4; } .st-gd-nav-sub a:hover { color: var(--st-ink); } .st-gd-nav-sub a.is-current { color: var(--st-name); font-weight: 700; } /* Orta içerik prose */ .st-gd-content { min-width: 0; } .st-gd-prose { font-size: 17px; line-height: 1.7; color: var(--st-ink); max-width: 720px; } .st-gd-prose h2 { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 44px 0 14px; color: var(--st-ink); letter-spacing: -0.005em; border-top: 2px solid var(--st-ink); padding-top: 18px; scroll-margin-top: 90px; } .st-gd-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .st-gd-prose h3 { font-family: var(--st-font-display); font-weight: 800; font-size: 20px; line-height: 1.25; margin: 28px 0 10px; color: var(--st-ink); scroll-margin-top: 90px; } .st-gd-prose p { margin: 0 0 16px; } .st-gd-prose ul, .st-gd-prose ol { margin: 0 0 20px; padding-left: 24px; } .st-gd-prose li { margin: 0 0 8px; line-height: 1.6; } .st-gd-prose a { color: var(--st-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .st-gd-prose blockquote { margin: 22px 0; padding: 6px 0 6px 20px; border-left: 3px solid var(--st-ink); font-style: italic; color: var(--st-soft-text); } .st-gd-prose img { max-width: 100%; height: auto; display: block; margin: 18px 0; } /* Önceki/Sonraki gezinti */ .st-gd-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 56px; padding-top: 24px; border-top: 4px solid var(--st-ink); } .st-gd-pager a { display: flex; flex-direction: column; gap: 4px; padding: 18px 22px; border: 1px solid var(--st-rule); text-decoration: none; color: var(--st-ink); transition: background .15s ease, border-color .15s ease; } .st-gd-pager a:hover { background: var(--st-bg-soft); border-color: var(--st-ink); text-decoration: none; } .st-gd-pager-next { text-align: right; } .st-gd-pager-meta { font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-soft-text); font-weight: 700; } .st-gd-pager-title { font-family: var(--st-font-display); font-weight: 800; font-size: 17px; line-height: 1.25; color: var(--st-ink); } .st-gd-pager-arrow { font-family: var(--st-font-sans); font-size: 18px; color: var(--st-soft-text); } /* Sağ TOC */ .st-gd-toc { position: sticky; top: 90px; border-top: 2px solid var(--st-ink); padding-top: 14px; } .st-gd-toc-title { font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--st-name); margin: 0 0 10px; } .st-gd-toc-list { list-style: none; margin: 0; padding: 0; } .st-gd-toc-list li { margin: 0; } .st-gd-toc-list a { display: block; padding: 6px 0; font-family: var(--st-font-sans); font-size: 12px; color: var(--st-soft-text); text-decoration: none; line-height: 1.45; border-bottom: 1px solid var(--st-rule); transition: color .15s ease; } .st-gd-toc-list a:hover { color: var(--st-ink); } .st-gd-toc-l3 a { padding-left: 12px; font-size: 11px; } /* ========================================================= YÖNERGELER SAYFASI — PDF belge kart listesi ========================================================= */ .st-yn { max-width: 960px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-yn-head { padding: 28px 0 28px; border-bottom: 4px solid var(--st-ink); margin-bottom: 48px; } .st-yn-h1 { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(36px, 5.4vw, 64px); line-height: 1.05; margin: 4px 0 14px; color: var(--st-ink); letter-spacing: -0.012em; } .st-yn-lead { font-size: 17px; line-height: 1.6; color: var(--st-soft-text); max-width: 760px; margin: 0; } .st-yn-section-title { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--st-name); margin: 0 0 18px; } .st-yn-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .st-yn-item { display: grid; grid-template-columns: 56px 1fr; gap: 18px; padding: 24px 0; border-top: 1px solid var(--st-rule); align-items: flex-start; } .st-yn-item:first-child { border-top: 0; padding-top: 8px; } .st-yn-item-icon { width: 56px; height: 56px; border: 1px solid var(--st-rule); border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--st-paper); color: var(--st-ink); } .st-yn-item-body { display: flex; flex-direction: column; gap: 8px; } .st-yn-item-title { font-family: var(--st-font-display); font-weight: 800; font-size: 21px; line-height: 1.25; margin: 0; color: var(--st-ink); letter-spacing: -0.005em; } .st-yn-item-title a { color: var(--st-ink); text-decoration: none; } .st-yn-item-title a:hover { text-decoration: underline; } .st-yn-item-desc { font-size: 15px; line-height: 1.55; color: var(--st-soft-text); margin: 0; } .st-yn-item-dl { margin: 4px 0 0; } .st-yn-item-dl a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--st-ink); text-decoration: none; padding: 6px 0; border-bottom: 2px solid var(--st-ink); } .st-yn-item-dl a:hover { color: var(--st-name); border-color: var(--st-name); } .st-yn-item-dl--soon { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-soft-text); margin: 4px 0 0; font-style: italic; } .st-yn-section--prose { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--st-rule); } /* ========================================================= HUKUKİ SAYFA — Kullanım Şartları, KVKK, vb. ========================================================= */ .st-lg { max-width: 1200px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-lg-head { padding: 28px 0 24px; border-bottom: 1px solid var(--st-rule); margin-bottom: 40px; max-width: 880px; } .st-lg-h1 { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(34px, 5vw, 60px); line-height: 1.05; margin: 4px 0 14px; color: var(--st-ink); letter-spacing: -0.012em; } .st-lg-lead { font-size: 17px; line-height: 1.6; color: var(--st-soft-text); margin: 0 0 12px; } .st-lg-updated { font-family: var(--st-font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-soft-text); margin: 0; font-weight: 600; } .st-lg-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 56px; align-items: flex-start; } .st-lg-layout--single { grid-template-columns: 1fr; } @media (max-width: 900px) { .st-lg-layout { grid-template-columns: 1fr; gap: 30px; } } /* İçindekiler */ .st-lg-toc { position: sticky; top: 90px; border-top: 4px solid var(--st-ink); padding-top: 16px; } @media (max-width: 900px) { .st-lg-toc { position: static; } } .st-lg-toc-title { font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; font-weight: 800; color: var(--st-name); margin: 0 0 12px; } .st-lg-toc-list { list-style: none; margin: 0; padding: 0; counter-reset: tocno; max-height: 70vh; overflow-y: auto; } .st-lg-toc-list li { margin: 0; line-height: 1.35; } .st-lg-toc-list a { display: block; padding: 8px 0; font-family: var(--st-font-sans); font-size: 13px; font-weight: 600; color: var(--st-ink); text-decoration: none; border-bottom: 1px solid var(--st-rule); transition: color .15s ease, background .15s ease; } .st-lg-toc-list a:hover { color: var(--st-name); } .st-lg-toc-l3 a { padding-left: 14px; font-size: 12px; color: var(--st-soft-text); font-weight: 500; } /* Gövde — uzun hukuki metin */ .st-lg-body { font-size: 17px; line-height: 1.7; color: var(--st-ink); } .st-lg-body h2 { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.2; margin: 48px 0 14px; padding-top: 12px; color: var(--st-ink); letter-spacing: -0.005em; border-top: 2px solid var(--st-ink); padding-top: 18px; scroll-margin-top: 90px; } .st-lg-body h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; } .st-lg-body h3 { font-family: var(--st-font-display); font-weight: 800; font-size: 20px; line-height: 1.25; margin: 28px 0 10px; color: var(--st-ink); scroll-margin-top: 90px; } .st-lg-body h4 { font-family: var(--st-font-sans); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; margin: 22px 0 8px; color: var(--st-name); } .st-lg-body p { margin: 0 0 14px; } .st-lg-body ul, .st-lg-body ol { margin: 0 0 18px; padding-left: 24px; } .st-lg-body li { margin: 0 0 8px; line-height: 1.6; } .st-lg-body a { color: var(--st-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .st-lg-body table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 15px; } .st-lg-body th, .st-lg-body td { padding: 10px 12px; border: 1px solid var(--st-rule); text-align: left; vertical-align: top; } .st-lg-body th { background: var(--st-bg-soft); font-family: var(--st-font-sans); font-weight: 700; } .st-lg-body blockquote { margin: 18px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--st-ink); color: var(--st-soft-text); font-style: italic; } /* ========================================================= REKLAM SAYFASI — sponsor/işbirliği sayfası ========================================================= */ .st-rk { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-rk-head { padding: 28px 0 32px; border-bottom: 4px solid var(--st-ink); margin-bottom: 56px; text-align: center; } .st-rk-head .st-hk-breadcrumb { justify-content: center; display: flex; } .st-rk-h1 { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(36px, 5.6vw, 72px); line-height: 1.05; margin: 0 0 16px; color: var(--st-ink); letter-spacing: -0.015em; } .st-rk-lead { font-size: 18px; line-height: 1.55; color: var(--st-ink); max-width: 760px; margin: 0 auto 22px; } .st-rk-lead a { color: var(--st-ink); text-decoration: underline; } .st-rk-cta { margin: 0; display: flex; flex-wrap: wrap; gap: 14px 18px; justify-content: center; align-items: center; } .st-rk-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 24px; background: var(--st-ink); color: var(--st-paper); border-radius: 999px; font-family: var(--st-font-sans); font-size: 15px; font-weight: 700; letter-spacing: .02em; text-decoration: none; transition: background .2s ease, color .2s ease, transform .15s ease; } .st-rk-cta-btn:hover { background: var(--st-paper); color: var(--st-ink); box-shadow: inset 0 0 0 1px var(--st-ink); transform: translateY(-1px); text-decoration: none; } .st-rk-cta-email { font-family: var(--st-font-sans); font-size: 14px; color: var(--st-soft-text); } /* Genel section başlığı */ .st-rk-section { margin: 64px 0; } .st-rk-section-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.15; margin: 0 0 18px; color: var(--st-ink); letter-spacing: -0.005em; } /* Hakkında + hedefler — 2 sütun */ .st-rk-about-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 48px; align-items: flex-start; } @media (max-width: 860px) { .st-rk-about-grid { grid-template-columns: 1fr; gap: 28px; } } .st-rk-about-text p { font-size: 17px; line-height: 1.6; color: var(--st-ink); margin: 0 0 16px; } .st-rk-goals { background: var(--st-bg-soft); padding: 24px 26px; border-left: 4px solid var(--st-ink); } .st-rk-goals-title { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--st-name); margin: 0 0 14px; } .st-rk-goals-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .st-rk-goals-list li { font-family: var(--st-font-display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--st-ink); padding-left: 22px; position: relative; } .st-rk-goals-list li::before { content: '→'; position: absolute; left: 0; top: 0; color: var(--st-name); font-weight: 800; } /* İlkeler */ .st-rk-principles { display: grid; grid-template-columns: 1fr; gap: 36px; padding-top: 56px; border-top: 1px solid var(--st-rule); } .st-rk-principles.has-image { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; } @media (max-width: 860px) { .st-rk-principles.has-image { grid-template-columns: 1fr; } } .st-rk-principles-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .st-rk-principles-list li { font-size: 17px; line-height: 1.55; color: var(--st-ink); padding: 14px 0 14px 26px; border-top: 1px solid var(--st-rule); position: relative; } .st-rk-principles-list li:first-child { border-top: 0; padding-top: 4px; } .st-rk-principles-list li::before { content: '✓'; position: absolute; left: 0; top: 15px; color: var(--st-name); font-weight: 800; } .st-rk-principles-list li:first-child::before { top: 5px; } .st-rk-principles-image { margin: 0; line-height: 0; } .st-rk-principles-image img { width: 100%; height: auto; display: block; border-radius: 6px; } .st-rk-section--prose { padding-top: 28px; border-top: 1px solid var(--st-rule); } /* ========================================================= KÜNYE SAYFASI — sade ekip + yayın kurulu + iletişim ========================================================= */ .st-kn { max-width: 880px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); text-align: center; } .st-kn-head { padding: 28px 0 24px; border-bottom: 1px solid var(--st-rule); margin-bottom: 40px; } .st-kn-head .st-hk-breadcrumb, .st-kn-head .st-hk-h1 { text-align: center; } .st-kn-head .st-hk-h1 { margin: 0 auto; } .st-kn-head .st-ct-lead { margin: 14px auto 0; } .st-kn-head .st-hk-breadcrumb { justify-content: center; display: flex; } .st-kn-section { margin: 40px 0; } .st-kn-section-title { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--st-name); margin: 0 0 22px; } /* Roller */ .st-kn-roles { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; } .st-kn-role { margin: 0; padding: 18px 0; border-top: 1px solid var(--st-rule); } .st-kn-role:first-child { border-top: 0; padding-top: 4px; } .st-kn-role-title { font-family: var(--st-font-display); font-weight: 800; font-size: 18px; line-height: 1.25; margin: 0 0 6px; color: var(--st-ink); } .st-kn-role-names { margin: 0; font-size: 17px; line-height: 1.45; color: var(--st-ink); } /* Yayın kurulu */ .st-kn-board { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; } .st-kn-board li { font-family: var(--st-font-display); font-weight: 700; font-size: 17px; color: var(--st-ink); line-height: 1.4; position: relative; padding-right: 22px; } .st-kn-board li:not(:last-child)::after { content: '·'; position: absolute; right: 0; color: var(--st-soft-text); } /* İletişim mini bloğu */ .st-kn-contact { display: flex; flex-direction: column; gap: 14px; align-items: center; } .st-kn-contact-row { display: flex; flex-direction: column; gap: 4px; text-align: center; } .st-kn-contact-label { font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-soft-text); font-weight: 700; } .st-kn-contact-text { font-size: 16px; line-height: 1.5; color: var(--st-ink); } .st-kn-contact a { color: var(--st-ink); text-decoration: underline; font-size: 17px; font-weight: 600; } .st-kn-section--prose { text-align: left; padding-top: 24px; border-top: 1px solid var(--st-rule); } /* ========================================================= DESTEKLENENLER SAYFASI — programlara göre mezunlar + uzmanlar ========================================================= */ .st-ds { max-width: 1180px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-ds-section { margin-top: 56px; } .st-ds-section:first-of-type { margin-top: 36px; } .st-ds-section-head { max-width: 760px; margin: 0 0 28px; padding-bottom: 18px; border-bottom: 4px solid var(--st-ink); } .st-ds-section-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; margin: 4px 0 8px; color: var(--st-ink); letter-spacing: -0.01em; } .st-ds-section-lead { font-size: 17px; line-height: 1.55; color: var(--st-soft-text); margin: 0; } /* Program grupları */ .st-ds-group { margin: 28px 0 36px; } .st-ds-group-head { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 1px solid var(--st-rule); } .st-ds-group-title { font-family: var(--st-font-display); font-weight: 800; font-size: 22px; line-height: 1.2; margin: 0; letter-spacing: -0.005em; } .st-ds-group-title a { color: var(--st-ink); text-decoration: none; } .st-ds-group-title a:hover { text-decoration: underline; } .st-ds-group-count { font-family: var(--st-font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-soft-text); font-weight: 700; white-space: nowrap; } /* Alumni grid (logo wall) */ .st-ds-alumni-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px 22px; } @media (max-width: 1024px) { .st-ds-alumni-grid { grid-template-columns: repeat(4, 1fr); } } @media (max-width: 640px) { .st-ds-alumni-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 420px) { .st-ds-alumni-grid { grid-template-columns: repeat(2, 1fr); } } .st-ds-alumnus { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; color: var(--st-ink); padding: 14px 8px; transition: opacity .2s ease, transform .2s ease; } a.st-ds-alumnus:hover { transform: translateY(-2px); text-decoration: none; } .st-ds-alumnus-logo { width: 100%; max-height: 80px; height: 80px; object-fit: contain; display: block; filter: grayscale(1); opacity: .8; transition: filter .2s ease, opacity .2s ease; } a.st-ds-alumnus:hover .st-ds-alumnus-logo { filter: grayscale(0); opacity: 1; } .st-ds-alumnus-logo--empty { background: var(--st-bg-soft); border-radius: 4px; } .st-ds-alumnus-name { font-family: var(--st-font-sans); font-size: 12px; font-weight: 600; text-align: center; color: var(--st-soft-text); line-height: 1.3; } /* Uzmanlar grid */ .st-ds-experts-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } @media (max-width: 1024px) { .st-ds-experts-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .st-ds-experts-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; } } .st-ds-expert { text-align: center; } .st-ds-expert-photo { width: 140px; height: 140px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 14px; background: var(--st-bg-soft); border: 1px solid var(--st-rule); } .st-ds-expert-photo--empty { background: linear-gradient(135deg, var(--st-bg-soft) 0%, var(--st-rule) 100%); } .st-ds-expert-name { font-family: var(--st-font-display); font-weight: 800; font-size: 17px; line-height: 1.25; margin: 0 0 6px; color: var(--st-ink); } .st-ds-expert-bio { font-size: 13px; line-height: 1.5; color: var(--st-soft-text); margin: 0; max-width: 220px; margin-left: auto; margin-right: auto; } .st-ds-section--prose { padding-top: 24px; border-top: 1px solid var(--st-rule); } /* ========================================================= İLETİŞİM SAYFASI — sade, iki sütun (info + form) ========================================================= */ .st-ct { max-width: 1080px; margin: 0 auto; padding: 0 24px 80px; font-family: var(--st-font-body); color: var(--st-ink); } .st-ct-head { padding: 28px 0 24px; border-bottom: 1px solid var(--st-rule); margin-bottom: 40px; } .st-ct-lead { font-size: 18px; line-height: 1.55; color: var(--st-soft-text); margin: 14px 0 0; max-width: 760px; } .st-ct-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 56px; align-items: flex-start; } @media (max-width: 860px) { .st-ct-layout { grid-template-columns: 1fr; gap: 36px; } } /* Sol: iletişim bilgileri */ .st-ct-info { display: flex; flex-direction: column; gap: 28px; } .st-ct-block { padding-top: 18px; border-top: 2px solid var(--st-ink); } .st-ct-block:first-child { border-top: 0; padding-top: 0; } .st-ct-block-title { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--st-name); margin: 0 0 10px; } .st-ct-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .st-ct-list li { display: flex; flex-direction: column; gap: 2px; font-size: 16px; line-height: 1.4; } .st-ct-list-label { font-family: var(--st-font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--st-soft-text); font-weight: 700; } .st-ct-list a { color: var(--st-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; font-weight: 600; } .st-ct-text { font-size: 16px; line-height: 1.5; color: var(--st-ink); margin: 0; } .st-ct-text a { color: var(--st-ink); text-decoration: underline; } .st-ct-social { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; } .st-ct-social-link { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border: 1px solid var(--st-rule); border-radius: 999px; font-family: var(--st-font-sans); font-size: 13px; font-weight: 600; color: var(--st-ink); text-decoration: none; transition: background .2s ease, color .2s ease, border-color .2s ease; } .st-ct-social-link:hover { background: var(--st-ink); color: var(--st-paper); border-color: var(--st-ink); text-decoration: none; } /* Sağ: form */ .st-ct-form-wrap { background: var(--st-bg-soft); padding: 32px; } @media (max-width: 860px) { .st-ct-form-wrap { padding: 24px; } } .st-ct-form-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.2; margin: 0 0 18px; color: var(--st-ink); letter-spacing: -0.005em; } .st-ct-msg { padding: 12px 16px; margin: 0 0 18px; font-size: 14px; border-radius: 4px; border: 1px solid; } .st-ct-msg--ok { background: #d7f1e1; color: #1d6a3a; border-color: #b9e3c8; } .st-ct-msg--err { background: #fde2e1; color: #9d2520; border-color: #f5b6b3; } .st-ct-form { display: flex; flex-direction: column; gap: 16px; } .st-ct-row { display: grid; gap: 16px; } .st-ct-row--2 { grid-template-columns: 1fr 1fr; } @media (max-width: 540px) { .st-ct-row--2 { grid-template-columns: 1fr; } } .st-ct-field { display: flex; flex-direction: column; gap: 6px; } .st-ct-field > span { font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--st-soft-text); } .st-ct-field input, .st-ct-field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--st-rule); background: var(--st-paper); color: var(--st-ink); font-family: var(--st-font-body); font-size: 16px; line-height: 1.4; border-radius: 4px; transition: border-color .15s ease, box-shadow .15s ease; } .st-ct-field input:focus, .st-ct-field textarea:focus { outline: 0; border-color: var(--st-ink); box-shadow: 0 0 0 3px rgba(0,0,0,.06); } .st-ct-field textarea { resize: vertical; min-height: 140px; } .st-ct-submit { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 14px 26px; background: var(--st-ink); color: var(--st-paper); border: 1px solid var(--st-ink); border-radius: 999px; font-family: var(--st-font-sans); font-size: 15px; font-weight: 700; letter-spacing: .02em; cursor: pointer; transition: background .2s ease, color .2s ease, transform .15s ease; } .st-ct-submit:hover { background: var(--st-paper); color: var(--st-ink); transform: translateY(-1px); } .st-ct-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .st-ct-extra { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--st-rule); } /* Vizyon · Misyon · Amaç — sade 3 sütun */ .st-hk-pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--st-rule); } @media (max-width: 860px) { .st-hk-pillars { grid-template-columns: 1fr; gap: 24px; } } .st-hk-pillar p { font-size: 16px; line-height: 1.6; color: var(--st-ink); margin: 0; } .st-hk-pillar-title { font-family: var(--st-font-display); font-weight: 800; font-size: 22px; line-height: 1.15; margin: 0 0 12px; color: var(--st-ink); border-bottom: 2px solid var(--st-ink); padding-bottom: 10px; letter-spacing: -0.005em; } /* Değişim teorisi — numaralı 4 adım, sade */ .st-hk-theory { margin-top: 80px; padding-top: 48px; border-top: 4px solid var(--st-ink); } .st-hk-theory-head { max-width: 720px; margin: 0 0 36px; } .st-hk-eyebrow { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--st-name); margin: 0 0 8px; } .st-hk-theory-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(32px, 4vw, 48px); line-height: 1.05; margin: 0 0 14px; color: var(--st-ink); letter-spacing: -0.01em; } .st-hk-theory-lead { font-size: 18px; line-height: 1.55; color: var(--st-soft-text); margin: 0; } .st-hk-theory-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 36px; } @media (max-width: 800px) { .st-hk-theory-steps { grid-template-columns: 1fr; gap: 22px; } } .st-hk-theory-steps > li { margin: 0; padding: 22px 0 0; border-top: 1px solid var(--st-rule); } .st-hk-theory-step-num { display: inline-block; font-family: var(--st-font-sans); font-size: 13px; font-weight: 800; color: var(--st-name); letter-spacing: .1em; margin-bottom: 6px; } .st-hk-theory-steps h3 { font-family: var(--st-font-display); font-size: 24px; font-weight: 800; line-height: 1.2; margin: 0 0 10px; color: var(--st-ink); letter-spacing: -0.005em; } .st-hk-theory-steps p { font-size: 16px; line-height: 1.6; color: var(--st-ink); margin: 0; } /* Program/Proje — Duyurular */ .st-pp-announcements { margin: 56px 0; } .st-pp-announcements-list { list-style: none; margin: 0; padding: 0; } .st-pp-announcement { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 18px 0; border-top: 1px solid var(--st-rule); } .st-pp-announcement:first-child { border-top: 0; padding-top: 6px; } @media (max-width: 600px) { .st-pp-announcement { grid-template-columns: 1fr; gap: 4px; } } .st-pp-announcement-date { font-family: var(--st-font-sans); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--st-name); } .st-pp-announcement-title { font-family: var(--st-font-display); font-weight: 800; font-size: 19px; line-height: 1.25; margin: 0 0 6px; color: var(--st-ink); } .st-pp-announcement-title a { color: inherit; text-decoration: none; } .st-pp-announcement-title a:hover { text-decoration: underline; } .st-pp-announcement-text { font-size: 15px; line-height: 1.55; color: var(--st-soft-text); margin: 0; } /* Program/Proje — Haberlerde (basın yansımaları satır listesi) */ .st-pp-news { margin: 56px 0; } .st-pp-news-list { list-style: none; margin: 0; padding: 0; } .st-pp-news-item { display: grid; grid-template-columns: 140px 1fr auto; gap: 18px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--st-rule); } .st-pp-news-item:first-child { border-top: 0; } @media (max-width: 720px) { .st-pp-news-item { grid-template-columns: 1fr; gap: 2px; padding: 14px 0; } } .st-pp-news-source { font-family: var(--st-font-sans); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--st-name); } .st-pp-news-title { font-family: var(--st-font-display); font-weight: 700; font-size: 17px; line-height: 1.3; color: var(--st-ink); } .st-pp-news-title a { color: var(--st-ink); text-decoration: none; border-bottom: 1px solid transparent; } .st-pp-news-title a:hover { border-bottom-color: var(--st-ink); } .st-pp-news-date { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-soft-text); white-space: nowrap; } /* Program/Proje — Çıktılar (ürün kartları) Kart rengi türden gelir: --out-renk. */ .st-pp-outputs { margin: 56px 0; } .st-out-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .st-out-head .st-pp-section-title { margin-bottom: 0; } .st-out-count { font-family: var(--st-font-mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--st-soft-text); margin: 0; } /* Tür başlığı */ .st-out-group { display: flex; align-items: center; gap: 10px; margin: 34px 0 14px; font-family: var(--st-font-sans); font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--out-renk, var(--st-ink)); } .st-out-group::after { content: ""; flex: 1; height: 1px; background: color-mix(in srgb, var(--out-renk, #888) 30%, transparent); } .st-out-group-ic { display: inline-flex; } .st-out-group-n { font-family: var(--st-font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0; padding: 2px 7px; border-radius: 999px; background: color-mix(in srgb, var(--out-renk, #888) 14%, transparent); color: var(--out-renk, var(--st-ink)); } /* Izgara — tek sütun; kart genişliği tam satır. */ .st-out-grid { display: grid; grid-template-columns: 1fr; gap: 20px; } /* Kart */ .st-out-card { display: flex; flex-direction: column; background: var(--st-paper); border: 1px solid var(--st-rule); border-top: 3px solid var(--out-renk, var(--st-ink)); border-radius: 4px; overflow: hidden; transition: box-shadow .18s ease, transform .18s ease; } .st-out-card:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .08); } .st-out-govde { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: 22px 26px 22px; } /* --- Ekran görüntüsü şeridi --- Geniş ekranda kartın solunda sabit sütun, dar ekranda üst bant. Birden fazla görselde yatay kaydırmalı. */ .st-out-shots { position: relative; background: var(--st-bg-soft); display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .st-out-shots::-webkit-scrollbar { display: none; } .st-out-shot { margin: 0; scroll-snap-align: start; overflow: hidden; min-width: 0; } .st-out-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top center; /* arayüz başlığı görünsün */ display: block; } .st-out-shots-n { position: absolute; right: 10px; top: 10px; z-index: 2; font-family: var(--st-font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(0, 0, 0, .55); padding: 4px 9px; border-radius: 999px; backdrop-filter: blur(4px); pointer-events: none; } /* Geniş ekran: görsel solda sütun */ @media (min-width: 761px) { .st-out-card--shot { flex-direction: row; align-items: stretch; } .st-out-card--shot > .st-out-shots { flex: 0 0 44%; max-width: 44%; border-right: 1px solid var(--st-rule); min-height: 100%; } .st-out-card--shot .st-out-shot { height: 100%; min-height: 250px; } } /* Dar ekran: görsel üstte bant */ @media (max-width: 760px) { .st-out-card--shot > .st-out-shots { border-bottom: 1px solid var(--st-rule); } .st-out-card--shot .st-out-shot { aspect-ratio: 16 / 10; } } .st-out-card-top { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 14px; } /* Logo kutusu */ .st-out-logo { width: 100px; height: 100px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--st-bg-soft); border: 1px solid var(--st-rule); overflow: hidden; } .st-out-logo img, .st-out-logo .st-out-logo-img { width: 100%; height: 100%; object-fit: contain; padding: 9px; box-sizing: border-box; display: block; } /* Logo yoksa tür ikonu — kutuyla orantılı büyüsün. */ .st-out-logo svg { width: 42px; height: 42px; } .st-out-logo.is-bos { background: color-mix(in srgb, var(--out-renk, #888) 12%, transparent); border-color: color-mix(in srgb, var(--out-renk, #888) 24%, transparent); color: var(--out-renk, var(--st-ink)); } .st-out-card-head { min-width: 0; } .st-out-kind { display: inline-block; font-family: var(--st-font-sans); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--out-renk, var(--st-ink)); margin-bottom: 5px; } .st-out-title { font-family: var(--st-font-display); font-size: 1.32rem; font-weight: 800; line-height: 1.18; letter-spacing: -0.01em; margin: 0; color: var(--st-ink); } .st-out-title a { color: inherit; text-decoration: none; } .st-out-title a:hover { color: var(--out-renk, var(--st-name)); } /* Durum rozeti */ .st-out-durum { flex: 0 0 auto; font-family: var(--st-font-sans); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; white-space: nowrap; border: 1px solid var(--st-rule); color: var(--st-soft-text); background: var(--st-bg-soft); } .st-out-durum--yayinda { color: #1f7a4c; border-color: #b6dcc6; background: #eaf6ef; } .st-out-durum--beta { color: #9a6b12; border-color: #e6d3a3; background: #fbf4e3; } .st-out-durum--gelistiriliyor { color: #2f6ea8; border-color: #bcd6ea; background: #eaf2f9; } .st-out-durum--arsiv { color: #6b6b66; border-color: #d8d8d2; background: #f2f2ef; } .st-out-desc { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--st-ink); max-width: 66ch; } /* Künye çipleri */ .st-out-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; } .st-out-facts li { font-family: var(--st-font-sans); font-size: 11.5px; font-weight: 600; color: var(--st-soft-text); padding: 4px 10px; border-radius: 999px; background: var(--st-bg-soft); border: 1px solid var(--st-rule); } /* Eylemler */ .st-out-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: auto; padding-top: 4px; } .st-out-cta { display: inline-flex; align-items: center; gap: 7px; font-family: var(--st-font-sans); font-size: 13.5px; font-weight: 700; text-decoration: none; color: var(--st-paper); background: var(--out-renk, var(--st-ink)); padding: 9px 16px; border-radius: 6px; transition: filter .15s ease; } .st-out-cta:hover { filter: brightness(1.12); text-decoration: none; } .st-out-alt { font-family: var(--st-font-sans); font-size: 13px; font-weight: 600; color: var(--st-soft-text); text-decoration: none; border-bottom: 1px solid var(--st-rule); padding-bottom: 1px; } .st-out-alt:hover { color: var(--st-ink); border-color: currentColor; text-decoration: none; } @media (max-width: 560px) { .st-out-govde { padding: 18px 18px 18px; } .st-out-card-top { grid-template-columns: auto 1fr; } .st-out-durum { grid-column: 2; justify-self: start; } .st-out-logo { width: 76px; height: 76px; border-radius: 12px; } .st-out-logo svg { width: 32px; height: 32px; } .st-out-title { font-size: 1.2rem; } } @media (prefers-reduced-motion: reduce) { .st-out-card { transition: none; } .st-out-card:hover { transform: none; } } /* Program/Proje — İlgili bağlantılar */ .st-pp-links { margin: 56px 0; } .st-pp-links-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .st-pp-link { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-top: 1px solid var(--st-rule); } .st-pp-link:first-child { border-top: 0; padding-top: 4px; } .st-pp-link-title { font-family: var(--st-font-display); font-weight: 700; font-size: 16px; line-height: 1.3; color: var(--st-ink); text-decoration: none; } a.st-pp-link-title:hover { color: var(--st-name); text-decoration: underline; } .st-pp-link-desc { font-size: 13px; color: var(--st-soft-text); line-height: 1.5; } /* "Kuluçkadan çıkanlar anlatıyor" — röportaj kartları (3 sütun) */ .st-pp-stories { margin: 56px 0; } .st-pp-stories-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } @media (max-width: 900px) { .st-pp-stories-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .st-pp-stories-grid { grid-template-columns: 1fr; } } .st-pp-story { display: flex; flex-direction: column; gap: 10px; } .st-pp-story-image { display: block; line-height: 0; background: var(--st-bg-soft); overflow: hidden; } .st-pp-story-image img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; display: block; transition: transform .35s ease; } .st-pp-story-image:hover img { transform: scale(1.03); } .st-pp-story-image-empty { display: block; width: 100%; aspect-ratio: 4 / 3; background: linear-gradient(135deg, var(--st-bg-soft) 0%, var(--st-rule) 100%); } .st-pp-story-body { display: flex; flex-direction: column; gap: 4px; } .st-pp-story-title { font-family: var(--st-font-display); font-size: 19px; font-weight: 800; line-height: 1.25; letter-spacing: -0.005em; margin: 0; } .st-pp-story-title a { color: var(--st-ink); text-decoration: none; } .st-pp-story-title a:hover { text-decoration: underline; } .st-pp-story-meta { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-soft-text); margin: 0; } .st-pp-story-sep { margin: 0 4px; } /* Proje meta (destekleyen + süre) */ .st-pp-meta { margin: 14px 0 18px; padding: 14px 0 4px; border-top: 1px solid var(--st-rule); border-bottom: 1px solid var(--st-rule); display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; } @media (max-width: 600px) { .st-pp-meta { grid-template-columns: 1fr; gap: 10px; } } .st-pp-meta-row { margin: 0; } .st-pp-meta dt { font-family: var(--st-font-sans); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--st-name); margin: 0 0 2px; } .st-pp-meta dd { margin: 0; font-family: var(--st-font-body); font-size: 15px; line-height: 1.4; color: var(--st-ink); } .st-pp-meta dd a { color: var(--st-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } /* Program / Proje CTA butonu */ .st-pp-cta { margin: 18px 0 0; } .st-pp-cta--head { margin-top: 22px; } .st-pp-cta-btn { display: inline-flex; align-items: center; gap: 10px; padding: 14px 26px; background: var(--st-ink); color: var(--st-paper); font-family: var(--st-font-sans); font-weight: 700; font-size: 15px; letter-spacing: .02em; text-decoration: none; border: 1px solid var(--st-ink); border-radius: 999px; line-height: 1.1; transition: background .2s ease, color .2s ease, transform .2s ease, border-color .2s ease; } .st-pp-cta-btn:hover { background: var(--st-paper); color: var(--st-ink); text-decoration: none; transform: translateY(-1px); } .st-pp-cta-arrow { font-size: 18px; line-height: 1; transition: transform .2s ease; } .st-pp-cta-btn:hover .st-pp-cta-arrow { transform: translateX(3px); } /* Anasayfada programlar grid'i — Guardian Foundation kart stiliyle */ .st-home-programs-grid { grid-template-columns: repeat(3, 1fr); } @media (max-width: 900px) { .st-home-programs-grid { grid-template-columns: repeat(2, 1fr) !important; } } @media (max-width: 600px) { .st-home-programs-grid { grid-template-columns: 1fr !important; } } /* Anasayfada programlar — tek satır carousel */ .st-home-programs-carousel { position: relative; margin: 0; } .st-home-programs-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 1fr); gap: 24px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 4px 4px 14px; margin: 0; } .st-home-programs-track::-webkit-scrollbar { height: 8px; } .st-home-programs-track::-webkit-scrollbar-thumb { background: var(--st-rule); border-radius: 4px; } .st-home-programs-track > .st-program-frame { scroll-snap-align: start; min-width: 0; } @media (max-width: 600px) { .st-home-programs-track { grid-auto-columns: 78%; } } /* Anasayfada raporlar grid'i */ .st-home-reports-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .st-home-reports-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .st-home-reports-grid { grid-template-columns: 1fr; } } .st-home-report { display: flex; flex-direction: column; gap: 8px; } .st-home-report-image { display: block; line-height: 0; margin: 0 0 8px; overflow: hidden; } .st-home-report-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform .35s ease; } .st-home-report-image:hover img { transform: scale(1.03); } .st-home-report-date { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); margin: 0; } .st-home-report-title { font-family: var(--st-font-display); font-size: 1.25rem; line-height: 1.25; font-weight: 800; margin: 0; letter-spacing: -0.005em; } .st-home-report-title a { color: var(--st-ink); text-decoration: none; } .st-home-report-title a:hover { color: var(--st-name); } .st-home-report-authors { font-family: var(--st-font-display); font-size: .95rem; color: var(--st-name); font-weight: 600; margin: 0; } /* Anasayfa mezun ağı — daha küçük logo grid (mevcut sayfalarda) */ .st-home-alumni .st-pp-alumni-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)) !important; gap: 32px 24px !important; } .st-home-alumni .st-pp-alumnus-logo { max-height: 64px; } /* Birlikte çalıştıklarımız — tek satır, 8 logo */ .st-home-collab { background: var(--st-bg-soft); padding: 48px 24px; margin: 36px 0; } .st-home-collab-inner { max-width: var(--st-w-content); margin: 0 auto; } .st-home-collab .st-section-head { border-top: 0; padding-top: 0; margin-bottom: 28px; } .st-home-collab-strip { display: grid; grid-template-columns: repeat(8, 1fr); align-items: center; gap: 28px; } .st-home-collab-strip--6 { grid-template-columns: repeat(6, 1fr); gap: 40px; } @media (max-width: 1024px) { .st-home-collab-strip, .st-home-collab-strip--6 { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: thin; padding-bottom: 8px; } .st-home-collab-item { flex: 0 0 120px; scroll-snap-align: start; } .st-home-collab-strip--6 .st-home-collab-item { flex: 0 0 160px; } } .st-home-collab-item { display: flex; align-items: center; justify-content: center; text-decoration: none; color: var(--st-ink); min-height: 80px; transition: transform .25s ease; } .st-home-collab-item:hover { transform: translateY(-3px); text-decoration: none; } .st-home-collab-logo { max-width: 100%; max-height: 64px; width: auto; height: auto; object-fit: contain; display: block; filter: grayscale(1); opacity: .75; transition: filter .25s ease, opacity .25s ease; } .st-home-collab--lg .st-home-collab-logo { max-height: 110px; max-width: 180px; opacity: .9; } .st-home-collab--lg .st-home-collab-name { font-size: 16px; } .st-home-collab--lg .st-home-collab-item:hover .st-home-collab-logo { opacity: 1; } .st-home-collab-item:hover .st-home-collab-logo { filter: grayscale(0); opacity: 1; } .st-home-collab-name { font-family: var(--st-font-sans); font-size: 13px; font-weight: 600; color: var(--st-muted); text-align: center; line-height: 1.3; } /* Makaleler bölümleri ayraç */ .st-home-articles-divider { max-width: var(--st-w-content); margin: 16px auto 4px; height: 1px; background: var(--st-rule); } /* ========================================================= 11e. PROGRAM & PROJE — tek sayfa + arşiv (polished) ========================================================= */ .st-pp { max-width: 1040px; margin: 0 auto; padding: 24px 24px 88px; } .st-pp-head { margin: 0 0 48px; padding-bottom: 36px; border-bottom: 3px solid var(--st-ink); position: relative; } /* Featured image varsa başlık ile görsel yan yana */ .st-pp-head.has-image { display: grid; grid-template-columns: 1.05fr 1fr; gap: 44px; align-items: center; } .st-pp-head-text { min-width: 0; } .st-pp-head-image { margin: 0; aspect-ratio: 1/1; overflow: hidden; } .st-pp-head-image img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 720px) { .st-pp-head.has-image { grid-template-columns: 1fr; gap: 22px; } .st-pp-head-image { order: -1; } } .st-pp-overline { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; color: var(--st-name); font-weight: 700; margin: 0 0 18px; display: inline-flex; align-items: center; gap: 10px; } .st-pp-overline::before { content: ""; display: inline-block; width: 28px; height: 2px; background: var(--st-name); } .st-pp-overline a { color: var(--st-name); text-decoration: none; } .st-pp-overline a:hover { text-decoration: underline; } .st-pp-overline .st-bc-sep { margin: 0 6px; opacity: .6; } .st-pp-title { font-family: var(--st-font-display); font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 18px; color: var(--st-ink); } .st-pp-dek { 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: 56ch; } .st-pp-hero { margin: 0 0 36px; } .st-pp-hero img { width: 100%; height: auto; display: block; } .st-pp-section { margin: 0 0 56px; } .st-pp-section-title { font-family: var(--st-font-display); font-size: clamp(1.5rem, 2.6vw, 1.95rem); font-weight: 800; margin: 0 0 18px; padding: 0 0 12px; border: 0; letter-spacing: -0.01em; position: relative; } .st-pp-section-title::after { content: ""; display: block; width: 56px; height: 3px; background: var(--st-name); margin-top: 10px; } .st-pp-section-body { font-family: var(--st-font-body); font-size: 1.1rem; line-height: 1.7; color: var(--st-ink); max-width: 68ch; } .st-pp-section-body p { margin: 0 0 1.1em; } .st-pp-section-body p:last-child { margin-bottom: 0; } /* Stats grid — daha güçlü bant */ .st-pp-stats { margin: 56px 0; padding: 44px 28px; background: var(--st-ink); color: var(--st-paper); } .st-pp-stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 24px; text-align: center; } .st-pp-stat { display: flex; flex-direction: column; gap: 6px; } .st-pp-stat-value { font-family: var(--st-font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; line-height: 1; color: var(--st-paper); letter-spacing: -0.02em; } .st-pp-stat-label { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.7); } /* Quotes — daha hava + tipografik vurgu */ .st-pp-quotes { margin: 56px 0; } .st-pp-quotes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } @media (max-width: 720px) { .st-pp-quotes-grid { grid-template-columns: 1fr; gap: 22px; } } .st-pp-quote { margin: 0; padding: 28px 28px 24px; background: var(--st-bg-soft); border-top: 3px solid var(--st-name); position: relative; } .st-pp-quote::before { content: "\201C"; position: absolute; top: 4px; left: 22px; font-family: var(--st-font-display); font-size: 4.2rem; line-height: 1; color: var(--st-name); opacity: .2; } .st-pp-quote-text { font-family: var(--st-font-display); font-style: italic; font-size: 1.15rem; line-height: 1.55; color: var(--st-ink); margin: 0 0 18px; padding-top: 18px; } .st-pp-quote-attr { font-family: var(--st-font-sans); font-size: 13px; line-height: 1.4; display: flex; flex-direction: column; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.08); } .st-pp-quote-name { font-weight: 700; color: var(--st-ink); letter-spacing: .02em; } .st-pp-quote-org { color: var(--st-muted); font-size: 12px; margin-top: 3px; } /* Raporlar / Belgeler */ .st-pp-docs { margin: 56px 0; } .st-pp-docs-list { list-style: none; margin: 18px 0 0; padding: 0; } .st-pp-doc { display: flex; align-items: flex-start; gap: 18px; padding: 18px 20px; background: var(--st-bg-soft); border-left: 3px solid var(--st-name); margin-bottom: 10px; } .st-pp-doc-icon { flex: 0 0 auto; color: var(--st-name); line-height: 0; padding-top: 2px; } .st-pp-doc-body { flex: 1; min-width: 0; } .st-pp-doc-title { font-family: var(--st-font-display); font-size: 1.1rem; font-weight: 700; margin: 0 0 10px; color: var(--st-ink); } .st-pp-doc-actions { display: flex; flex-wrap: wrap; gap: 8px; } .st-pp-doc-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; background: var(--st-ink); color: var(--st-paper); font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; letter-spacing: .04em; text-decoration: none; border-radius: 2px; transition: background .15s; } .st-pp-doc-btn:hover { background: var(--st-muted); color: var(--st-paper); text-decoration: none; } /* Dersler / Atölyeler */ .st-pp-lessons { margin: 56px 0; } .st-pp-lessons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 18px; } @media (max-width: 900px) { .st-pp-lessons-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .st-pp-lessons-grid { grid-template-columns: 1fr; } } .st-lesson { display: block; color: var(--st-ink); text-decoration: none; transition: transform .25s ease; } .st-lesson:hover { transform: translateY(-3px); text-decoration: none; } .st-lesson-media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--st-bg-soft); margin: 0 0 14px; } .st-lesson-image { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .st-lesson:hover .st-lesson-image { transform: scale(1.04); } .st-lesson-image--empty { background: var(--st-bg-soft); } .st-lesson-badge { position: absolute; top: 14px; left: 14px; background: #f59e0b; color: #fff; font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; padding: 5px 11px; border-radius: 3px; } .st-lesson-arrow { position: absolute; right: 14px; bottom: 14px; width: 44px; height: 44px; border-radius: 50%; background: var(--st-paper); color: var(--st-ink); display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.12); transition: background .2s, color .2s; } .st-lesson:hover .st-lesson-arrow { background: var(--st-ink); color: var(--st-paper); } .st-lesson-teacher { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; } .st-lesson-teacher-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; flex: 0 0 32px; } .st-lesson-teacher-photo--empty { background: var(--st-bg-soft); } .st-lesson-teacher-name { font-family: var(--st-font-sans); font-size: 14px; color: var(--st-muted); font-weight: 600; } .st-lesson-title { font-family: var(--st-font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.25; margin: 0; color: var(--st-ink); letter-spacing: -0.005em; } .st-lesson:hover .st-lesson-title { color: var(--st-name); } /* Videolar — YouTube embed grid */ .st-pp-videos { margin: 56px 0; } .st-pp-videos-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 18px; } @media (max-width: 720px) { .st-pp-videos-grid { grid-template-columns: 1fr; gap: 20px; } } .st-pp-video { margin: 0; } .st-pp-video-embed { position: relative; aspect-ratio: 16/9; background: var(--st-ink); overflow: hidden; } .st-pp-video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; } .st-pp-video-fallback { display: block; padding: 18px; background: var(--st-bg-soft); color: var(--st-ink); text-decoration: none; font-family: var(--st-font-sans); font-size: 13px; word-break: break-all; } .st-pp-video-title { font-family: var(--st-font-display); font-size: 1rem; font-weight: 700; color: var(--st-ink); margin: 10px 0 0; line-height: 1.35; } /* Mezunlar — logolu grid */ .st-pp-alumni { margin: 56px 0; } .st-pp-alumni-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 18px; } .st-pp-alumni-head .st-pp-section-title { margin: 0; } .st-pp-alumni-count { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); } .st-pp-alumni-more { margin: 18px 0 0; } .st-pp-alumni-more a { display: inline-block; font-family: var(--st-font-sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--st-name); text-decoration: none; padding: 8px 0; } .st-pp-alumni-more a:hover { text-decoration: underline; text-underline-offset: 4px; } .st-pp-alumni-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; align-items: stretch; margin-top: 18px; } /* Mezunlar: hava alan, çerçevesiz logo duvarı */ .st-pp-alumni-grid { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important; gap: 36px 28px !important; align-items: end !important; } .st-pp-alumnus { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; text-align: center; gap: 14px; padding: 0; background: transparent; border: 0; color: var(--st-ink); text-decoration: none; transition: transform .25s ease, opacity .25s ease; min-height: auto; } .st-pp-alumnus:hover { transform: translateY(-3px); text-decoration: none; box-shadow: none; } .st-pp-alumnus-logo { max-width: 100%; max-height: 84px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; opacity: .82; filter: grayscale(1); transition: filter .25s ease, opacity .25s ease; } .st-pp-alumnus:hover .st-pp-alumnus-logo { filter: grayscale(0); opacity: 1; } .st-pp-alumnus-logo--empty { width: 84px; height: 84px; border-radius: 50%; background: var(--st-bg-soft); opacity: .6; } .st-pp-alumnus-name { font-family: var(--st-font-sans); font-size: 12px; font-weight: 600; color: var(--st-muted); line-height: 1.35; letter-spacing: .02em; transition: color .2s ease; } .st-pp-alumnus:hover .st-pp-alumnus-name { color: var(--st-ink); } /* Experts carousel */ .st-pp-experts { margin: 56px 0; } .st-pp-experts-head { display: flex; align-items: center; justify-content: space-between; margin: 0 0 22px; gap: 16px; } .st-pp-experts-head .st-pp-section-title { margin: 0; padding: 0; } .st-pp-experts-head .st-pp-section-title::after { margin-top: 8px; } .st-pp-experts-nav { display: flex; gap: 6px; } .st-pp-experts-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--st-rule); background: var(--st-paper); color: var(--st-ink); cursor: pointer; font-size: 18px; line-height: 1; transition: background .15s, color .15s, border-color .15s; } .st-pp-experts-btn:hover { background: var(--st-ink); color: var(--st-paper); border-color: var(--st-ink); } .st-pp-experts-track { display: flex; gap: 32px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 12px; margin-right: -24px; /* taşınma için */ } .st-pp-experts-track::-webkit-scrollbar { display: none; } .st-pp-expert { flex: 0 0 240px; scroll-snap-align: start; background: transparent; padding: 0; border: 0; text-align: center; } .st-pp-expert-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 16px; background: var(--st-bg-soft); } .st-pp-expert-photo--empty { background: var(--st-bg-soft); } .st-pp-expert-name { font-family: var(--st-font-display); font-size: 1.2rem; font-weight: 800; margin: 0 auto 8px; color: var(--st-ink); letter-spacing: -0.005em; text-align: center; } .st-pp-expert-bio { font-family: var(--st-font-body); font-size: 14px; line-height: 1.6; color: var(--st-soft-text); margin: 0 auto; text-align: center; max-width: 200px; } @media (max-width: 720px) { .st-pp-experts-track { gap: 22px; } .st-pp-expert { flex: 0 0 200px; } .st-pp-expert-photo { width: 96px; height: 96px; } } /* Galeri grid */ .st-pp-gallery { margin: 56px 0; } .st-pp-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .st-pp-gallery-item { display: block; line-height: 0; overflow: hidden; } .st-pp-gallery-item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform .25s ease; } .st-pp-gallery-item:hover img { transform: scale(1.04); } @media (max-width: 600px) { .st-pp-gallery-grid { grid-template-columns: repeat(2, 1fr); } } /* Alt projeler (Program sayfasında) */ .st-pp-children { margin: 64px 0 0; padding-top: 32px; border-top: 3px solid var(--st-ink); } .st-pp-children-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px; margin-top: 24px; } @media (max-width: 600px) { .st-pp-children-grid { grid-template-columns: 1fr; } } .st-pp-card { display: flex; flex-direction: column; } .st-pp-card-image { display: block; line-height: 0; margin: 0 0 14px; overflow: hidden; } .st-pp-card-image img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; transition: transform .35s ease; } .st-pp-card-image:hover img { transform: scale(1.03); } .st-pp-card-title { font-family: var(--st-font-display); font-size: 1.25rem; line-height: 1.25; font-weight: 800; margin: 0 0 8px; letter-spacing: -0.005em; } .st-pp-card-title a { color: var(--st-ink); text-decoration: none; } .st-pp-card-title a:hover { color: var(--st-name); } .st-pp-card-dek { font-size: 0.95rem; color: var(--st-soft-text); line-height: 1.55; margin: 0; } .st-pp-back { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--st-rule); } .st-pp-back-link { display: inline-block; font-family: var(--st-font-sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--st-name); text-decoration: none; padding: 8px 0; } .st-pp-back-link:hover { text-decoration: underline; text-underline-offset: 4px; } /* Arşivler */ .st-pp-archive { max-width: var(--st-w-content); margin: 0 auto; padding: 12px 24px 56px; } .st-pp-archive-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } @media (max-width: 900px) { .st-pp-archive-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .st-pp-archive-grid { grid-template-columns: 1fr; } } /* Programlar — Guardian Foundation tarzı çerçeveli kart grid'i */ .st-program-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } /* Tek program sayfasının altındaki alt projeler için 2 kolon (sayfa daha dar) */ .st-pp-children .st-program-grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 900px) { .st-program-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .st-program-grid, .st-pp-children .st-program-grid { grid-template-columns: 1fr; } } .st-program-frame { background: var(--st-bg-soft); padding: 12px; display: flex; flex-direction: column; transition: transform .25s ease, box-shadow .25s ease; } .st-program-frame:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,.08); } .st-program-frame-image { display: block; line-height: 0; background: var(--st-paper); aspect-ratio: 1/1; overflow: hidden; /* Logo/illüstrasyon kesilmesin — contain + iç padding */ } .st-program-frame-image img { width: 100%; height: 100%; object-fit: contain; object-position: center; padding: 18px; box-sizing: border-box; display: block; transition: transform .35s ease; } .st-program-frame:hover .st-program-frame-image img { transform: scale(1.04); } .st-program-frame-body { background: var(--st-paper); padding: 26px 22px 30px; flex: 1; display: flex; flex-direction: column; gap: 10px; } .st-program-frame-title { font-family: var(--st-font-display); font-size: clamp(1.4rem, 2.2vw, 1.7rem); font-weight: 800; line-height: 1.18; margin: 0; letter-spacing: -0.01em; } .st-program-frame-title a { color: var(--st-name); text-decoration: none; } .st-program-frame-title a:hover { color: var(--st-ink); } .st-program-frame-dek { font-family: var(--st-font-body); font-size: 1rem; line-height: 1.55; color: var(--st-ink); margin: 0; } .st-ext-mark { font-size: .7em; opacity: .65; margin-left: 4px; display: inline-block; vertical-align: 2px; } .st-pp-archive-group { margin: 0 0 38px; } .st-pp-archive-group-title { font-family: var(--st-font-display); font-size: 1.5rem; font-weight: 800; margin: 0 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--st-ink); } .st-pp-archive-group-title a { color: var(--st-ink); text-decoration: none; } .st-pp-archive-group-title a:hover { color: var(--st-name); } /* ========================================================= 11f. RAPOR — tek sayfa + Araştırma arşivi ========================================================= */ .st-report { max-width: 1040px; margin: 0 auto; padding: 16px 24px 56px; } .st-report-head { margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--st-rule); } /* Featured image varsa başlık ve görsel yan yana */ .st-report-head.has-image { display: grid; grid-template-columns: 1.1fr 1fr; gap: 32px; align-items: center; } .st-report-head-text { min-width: 0; } .st-report-head-image { margin: 0; } .st-report-head-image img { width: 100%; height: auto; display: block; } @media (max-width: 720px) { .st-report-head.has-image { grid-template-columns: 1fr; gap: 18px; } .st-report-head-image { order: -1; } } .st-report-overline { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 10px; } .st-report-overline a { color: var(--st-name); text-decoration: none; } .st-report-overline a:hover { text-decoration: underline; } .st-report-overline .st-bc-sep { margin: 0 6px; opacity: .6; } .st-report-title { font-family: var(--st-font-display); font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; } .st-report-dek { font-family: var(--st-font-body); font-size: 1.1rem; line-height: 1.55; color: var(--st-soft-text); margin: 0 0 10px; } .st-report-meta { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); margin: 0; } .st-report-hero { margin: 0 0 24px; } .st-report-hero img { width: 100%; height: auto; display: block; } /* İndirme butonları */ .st-report-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 28px; padding: 14px; background: var(--st-bg-soft); border-left: 3px solid var(--st-name); } .st-report-btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; background: var(--st-ink); color: var(--st-paper); font-family: var(--st-font-sans); font-weight: 700; font-size: 13px; letter-spacing: .04em; text-decoration: none; border-radius: 2px; transition: background .15s; } .st-report-btn:hover { background: var(--st-muted); color: var(--st-paper); text-decoration: none; } .st-report-btn--podcast { background: #1db954; color: #fff; } .st-report-btn--podcast:hover { background: #169c46; color: #fff; } .st-report-section-title { font-family: var(--st-font-display); font-size: 1.5rem; font-weight: 800; margin: 32px 0 12px; padding-bottom: 6px; border-bottom: 1px solid var(--st-rule); } .st-report-podcast-embed { margin: 12px 0 0; } .st-report-podcast-embed iframe { width: 100%; border: 0; border-radius: 12px; } /* İngilizce özet */ .st-report-en { margin: 24px 0; padding: 22px; background: var(--st-bg-soft); border-left: 3px solid var(--st-ink); } .st-report-en .st-report-section-title { margin-top: 0; border: 0; padding: 0; font-size: 1.2rem; } .st-report-en-title { font-family: var(--st-font-display); font-size: 1.3rem; font-weight: 800; margin: 6px 0 12px; line-height: 1.2; } .st-report-en-body { font-family: var(--st-font-body); font-size: 1rem; line-height: 1.65; color: var(--st-soft-text); } .st-report-en-body p { margin: 0 0 1em; } /* Rapor yazarları (en fazla 4) — alt alta tek kolon */ .st-report-authors-grid { display: flex; flex-direction: column; gap: 22px; margin-top: 12px; } .st-report-author { display: flex; align-items: flex-start; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--st-rule); } .st-report-author:last-child { border-bottom: 0; padding-bottom: 0; } .st-report-author-photo, .st-report-author-photo-link { flex: 0 0 88px; line-height: 0; } .st-report-author-photo { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-report-author-content { flex: 1; min-width: 0; } .st-report-author-photo--empty { background: var(--st-bg-soft); } .st-report-author-name { font-family: var(--st-font-display); font-size: 1.1rem; font-weight: 700; margin: 0 0 6px; color: var(--st-ink); } .st-report-author-name a { color: inherit; text-decoration: none; } .st-report-author-name a:hover { color: var(--st-name); text-decoration: underline; text-underline-offset: 3px; } .st-report-author-photo-link { display: block; line-height: 0; } .st-report-author-bio { font-family: var(--st-font-body); font-size: 14px; line-height: 1.55; color: var(--st-soft-text); margin: 0; } @media (max-width: 480px) { .st-report-author { gap: 14px; } .st-report-author-photo, .st-report-author-photo-link { flex: 0 0 64px; } .st-report-author-photo { width: 64px; height: 64px; } } /* Benzer raporlar */ .st-report-similar { margin: 32px 0; } .st-report-similar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 14px; } @media (max-width: 720px) { .st-report-similar-grid { grid-template-columns: 1fr; } } .st-report-similar-card { display: flex; flex-direction: column; } .st-report-similar-image { display: block; line-height: 0; margin: 0 0 10px; } .st-report-similar-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } .st-report-similar-title { font-family: var(--st-font-display); font-size: 1.1rem; font-weight: 700; line-height: 1.25; margin: 0 0 6px; } .st-report-similar-title a { color: var(--st-ink); text-decoration: none; } .st-report-similar-title a:hover { color: var(--st-name); } .st-report-similar-authors { font-family: var(--st-font-display); color: var(--st-name); font-weight: 600; font-size: .95rem; margin: 0 0 4px; } .st-report-similar-date { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); margin: 0; } /* YouTube / Podcast bağlantıları */ .st-report-media { margin: 28px 0; } .st-report-media-list { list-style: none; margin: 12px 0 0; padding: 0; } .st-report-media-item { display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--st-rule); } .st-report-media-item:last-child { border-bottom: 0; } .st-report-media-type { font-family: var(--st-font-sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-paper); background: var(--st-ink); padding: 4px 10px; border-radius: 2px; flex: 0 0 auto; } .st-report-media-item--youtube .st-report-media-type { background: #cc0000; } .st-report-media-item--podcast .st-report-media-type { background: #1db954; } .st-report-media-item--article .st-report-media-type { background: #1f6feb; } .st-report-media-link { font-family: var(--st-font-display); font-size: 1.05rem; font-weight: 700; color: var(--st-ink); text-decoration: none; line-height: 1.3; } .st-report-media-link:hover { color: var(--st-name); text-decoration: underline; text-underline-offset: 3px; } /* Araştırmacılar sayfası (page-arastirmacilar.php) */ .st-researchers { max-width: 1040px; margin: 0 auto; padding: 16px 24px 56px; } .st-researchers-head { border-bottom: 1px solid var(--st-ink); padding-bottom: 22px; margin-bottom: 28px; } .st-researchers-headline { font-family: var(--st-font-display); font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 12px; } .st-researchers-intro { 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 12px; } .st-researchers-meta { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 0; } .st-researchers-count { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); } .st-researchers-back { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--st-name); text-decoration: none; } .st-researchers-back:hover { text-decoration: underline; } .st-researchers-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px 36px; } @media (max-width: 720px) { .st-researchers-list { grid-template-columns: 1fr; gap: 22px; } } .st-researcher { display: grid; grid-template-columns: 120px 1fr; gap: 18px; align-items: start; padding: 18px 0; border-top: 1px solid var(--st-rule); scroll-margin-top: 80px; /* anchor #yazar-... scroll için header altına bırak */ } .st-researcher:target { background: var(--st-bg-soft); margin: 0 -12px; padding: 18px 12px; } .st-researcher-photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-researcher-photo--empty { background: var(--st-bg-soft); } .st-researcher-body { min-width: 0; } .st-researcher-name { font-family: var(--st-font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 700; margin: 0 0 10px; color: var(--st-ink); } .st-researcher-bio { font-family: var(--st-font-body); font-size: 1rem; line-height: 1.6; color: var(--st-soft-text); margin: 0 0 14px; } .st-researcher-meta { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 6px; } .st-researcher-reports { list-style: none; margin: 0; padding: 0; } .st-researcher-reports li { padding: 4px 0; } .st-researcher-reports a { font-family: var(--st-font-display); font-size: 1rem; color: var(--st-ink); text-decoration: none; } .st-researcher-reports a:hover { color: var(--st-name); text-decoration: underline; } @media (max-width: 720px) { .st-researcher { grid-template-columns: 84px 1fr; gap: 14px; padding: 16px 0; } .st-researcher-photo { width: 84px; height: 84px; } } /* Araştırma sayfası — hero, intro, 2 bilgi bloğu, raporlar başlığı */ .st-research-hero { background: var(--st-bg-soft); border-bottom: 1px solid var(--st-rule); padding: 36px 24px 32px; } .st-research-hero-inner { max-width: 1040px; margin: 0 auto; } .st-research-hero-inner .st-overline { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 10px; } .st-research-hero-title { font-family: var(--st-font-display); font-size: clamp(2rem, 4.4vw, 3.2rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 14px; max-width: 820px; } .st-research-intro { font-family: var(--st-font-body); font-size: 1.1rem; line-height: 1.6; color: var(--st-soft-text); margin: 0; max-width: 760px; } .st-research-intro p { margin: 0 0 .8em; } .st-research-intro p:last-child { margin-bottom: 0; } .st-research-team-link { margin: 18px 0 0; } .st-research-team-link a { display: inline-block; font-family: var(--st-font-sans); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; color: var(--st-name); text-decoration: none; padding: 10px 18px; border: 1px solid var(--st-name); border-radius: 2px; transition: background .15s, color .15s; } .st-research-team-link a:hover { background: var(--st-name); color: #fff; text-decoration: none; } /* 2 bilgi bloğu (Neden Kurulduk? + Ne Yapıyoruz?) */ .st-research-info { max-width: 1040px; margin: 36px auto 0; padding: 0 24px; } .st-research-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; } @media (max-width: 720px) { .st-research-info-grid { grid-template-columns: 1fr; gap: 22px; } } .st-research-info-title { font-family: var(--st-font-display); font-size: clamp(1.3rem, 2.2vw, 1.7rem); font-weight: 800; margin: 0 0 12px; padding-bottom: 8px; border-bottom: 2px solid var(--st-ink); } .st-research-info-body { font-family: var(--st-font-body); font-size: 1rem; line-height: 1.7; color: var(--st-ink); } .st-research-info-body p { margin: 0 0 1em; } .st-research-info-body p:last-child { margin-bottom: 0; } /* Raporlar başlığı + arama (info bloklarının altında) */ .st-research-list-head { max-width: 1040px; margin: 44px auto 0; padding: 0 24px; } .st-research-list-title { font-family: var(--st-font-display); font-size: clamp(1.6rem, 2.8vw, 2.2rem); font-weight: 800; margin: 0 0 14px; padding-bottom: 10px; border-bottom: 3px solid var(--st-ink); display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; } /* Arama input'u */ .st-research-filter { margin: 0 0 16px; } .st-research-filter-input { width: 100%; max-width: 420px; padding: 10px 14px; font-family: var(--st-font-body); font-size: 1rem; background: var(--st-paper); color: var(--st-ink); border: 1px solid var(--st-rule); border-radius: 2px; transition: border-color .15s; } .st-research-filter-input:focus { outline: none; border-color: var(--st-ink); } .st-research-filter-empty { font-family: var(--st-font-sans); font-size: 14px; color: var(--st-muted); margin: 10px 0 0; padding: 14px; background: var(--st-bg-soft); border-radius: 2px; } /* Araştırma arşivi */ .st-report-archive { max-width: var(--st-w-content); margin: 0 auto; padding: 12px 24px 56px; } .st-report-archive-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 36px; border-top: 1px solid var(--st-rule); padding-top: 28px; } @media (max-width: 720px) { .st-report-archive-list { grid-template-columns: 1fr; gap: 26px; } } .st-report-card { display: flex; flex-direction: column; gap: 14px; padding: 0; border: 0; } .st-report-card-image { display: block; line-height: 0; order: -1; } .st-report-card-image img { width: 100%; aspect-ratio: 16/10; object-fit: cover; } .st-report-card-body { min-width: 0; } .st-report-card-date { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 6px; } .st-report-card-title { font-family: var(--st-font-display); font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.2; margin: 0 0 8px; } .st-report-card-title a { color: var(--st-ink); text-decoration: none; } .st-report-card-title a:hover { color: var(--st-name); } .st-report-card-dek { color: var(--st-soft-text); font-size: 1rem; line-height: 1.55; margin: 0 0 12px; } /* Rapor kartında araştırmacılar (mini avatar + isim) */ .st-report-card-authors { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--st-rule); border-bottom: 1px solid var(--st-rule); } .st-report-card-author { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; transition: color .15s; } .st-report-card-author:hover { color: var(--st-name); } .st-report-card-author:hover .st-report-card-author-name { color: var(--st-name); } .st-report-card-author-photo { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; flex: 0 0 32px; } .st-report-card-author-photo--empty { background: var(--st-bg-soft); } .st-report-card-author-name { font-family: var(--st-font-display); font-size: 14px; font-weight: 600; color: var(--st-ink); line-height: 1.2; } .st-report-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .st-report-tag { display: inline-block; padding: 4px 10px; background: var(--st-ink); color: var(--st-paper); font-family: var(--st-font-sans); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-decoration: none; border-radius: 2px; } .st-report-tag:hover { background: var(--st-muted); color: var(--st-paper); text-decoration: none; } .st-report-tag--podcast { background: #1db954; } .st-report-tag--podcast:hover { background: #169c46; } .st-report-readmore { margin-left: auto; font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-name); text-decoration: none; font-weight: 700; } .st-report-readmore:hover { text-decoration: underline; } @media (max-width: 720px) { .st-report-card.has-image { grid-template-columns: 1fr; gap: 14px; } .st-report-card-image img { aspect-ratio: 16/10; } .st-report-readmore { margin-left: 0; } } /* ========================================================= 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; } /* ========================================================= CANLI ARAMA — input yazarken açılan önizleme dropdown'ı ========================================================= */ .st-live-search { position: relative; } .st-live-results { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 1100; background: var(--st-paper); color: var(--st-ink); border: 1px solid var(--st-rule); box-shadow: 0 12px 36px rgba(0,0,0,.18); max-height: 70vh; overflow-y: auto; -webkit-overflow-scrolling: touch; } .st-live-empty { font-family: var(--st-font-sans); font-size: 13px; color: var(--st-muted); padding: 14px 16px; margin: 0; } .st-live-group { padding: 8px 0; } .st-live-group + .st-live-group { border-top: 1px solid var(--st-rule); } .st-live-group-title { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-muted); padding: 6px 16px; margin: 0 0 4px; } .st-live-list { list-style: none; margin: 0; padding: 0; } .st-live-item a { display: flex; align-items: center; gap: 12px; padding: 8px 16px; text-decoration: none; color: var(--st-ink); transition: background .12s; } .st-live-item a:hover { background: var(--st-bg-soft); } .st-live-avatar, .st-live-thumb { width: 40px; height: 40px; object-fit: cover; flex: 0 0 auto; background: var(--st-bg-soft); } .st-live-avatar { border-radius: 50%; } .st-live-thumb { border-radius: 2px; } .st-live-text { display: flex; flex-direction: column; min-width: 0; flex: 1; } .st-live-title { font-family: var(--st-font-display); font-weight: 700; font-size: 14px; color: var(--st-ink); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-live-meta { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-muted); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .st-live-item--author .st-live-title { color: var(--st-name); } @media (max-width: 600px) { .st-live-results { max-height: 60vh; } .st-live-avatar, .st-live-thumb { width: 34px; height: 34px; } } .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; } } /* ========================================================= Anasayfa — Dijital Akademi kategori çipleri ========================================================= */ .st-home-academy-cats { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; font-family: var(--st-font-sans); } .st-home-academy-cat { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 6px 14px; border: 1px solid var(--st-rule); border-radius: 999px; color: var(--st-ink); text-decoration: none; transition: background .2s, border-color .2s, color .2s; } .st-home-academy-cat:hover { background: var(--st-bg-soft); border-color: var(--st-ink); } /* ========================================================= Manşet — köşe yazıları ızgarası (3×2, tırnak + başlık + yazar + tarih) ========================================================= */ .st-oped { margin: 8px 0 10px; } .st-oped-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--st-rule); } .st-oped-item { display: flex; gap: 18px; align-items: flex-start; padding: 26px 24px; border-bottom: 1px solid var(--st-rule); border-right: 1px solid var(--st-rule); } .st-oped-item:nth-child(3n) { border-right: 0; } .st-oped-media, .st-oped-avatar { flex: 0 0 116px; line-height: 0; display: block; } .st-oped-media img { width: 116px; height: 116px; object-fit: cover; display: block; } .st-oped-avatar img { width: 116px; height: 116px; border-radius: 50%; object-fit: cover; display: block; background: var(--st-bg-soft); } .st-oped-text { flex: 1; min-width: 0; } .st-oped-title { font-family: var(--st-font-display); font-size: 1.18rem; font-weight: 800; line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 12px; } .st-oped-quote { color: var(--st-name); font-weight: 700; font-size: 1.4em; line-height: 0; margin-right: 3px; vertical-align: -0.22em; } .st-oped-title a { color: var(--st-ink); text-decoration: none; } .st-oped-title a:hover { color: var(--st-muted); } .st-oped-author { font-family: var(--st-font-display); font-size: 1.05rem; font-weight: 700; margin: 0 0 8px; } .st-oped-author a { color: var(--st-name); text-decoration: none; } .st-oped-author a:hover { color: var(--st-ink); } .st-oped-date { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted); margin: 0; } @media (max-width: 900px) { .st-oped-grid { grid-template-columns: repeat(2, 1fr); } .st-oped-item:nth-child(3n) { border-right: 1px solid var(--st-rule); } .st-oped-item:nth-child(2n) { border-right: 0; } } @media (max-width: 600px) { .st-oped-grid { grid-template-columns: 1fr; } .st-oped-item { border-right: 0 !important; padding: 22px 4px; } .st-oped-media, .st-oped-avatar { flex-basis: 92px; } .st-oped-media img, .st-oped-avatar img { width: 92px; height: 92px; } } /* ========================================================= Anasayfa — Yolu kesişenler: yuvarlak logolu carousel ========================================================= */ .st-home-collab-carousel { position: relative; } .st-home-collab-track { display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: 36px; align-items: start; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 10px; margin: 0; } .st-home-collab-track::-webkit-scrollbar { display: none; } .st-home-collab--round .st-home-collab-item { scroll-snap-align: start; flex-direction: column; gap: 10px; min-height: 0; width: 124px; } .st-home-collab--round .st-home-collab-logo { width: 116px; height: 116px; max-width: none; max-height: none; border-radius: 50%; object-fit: cover; background: var(--st-paper); border: 1px solid var(--st-rule); padding: 0; filter: grayscale(1); opacity: .85; transition: filter .25s ease, opacity .25s ease, transform .25s ease; } .st-home-collab--round .st-home-collab-item:hover .st-home-collab-logo { filter: grayscale(0); opacity: 1; } .st-home-collab--round .st-home-collab-name { display: flex; align-items: center; justify-content: center; text-align: center; width: 116px; height: 116px; border-radius: 50%; background: var(--st-bg-soft); font-family: var(--st-font-sans); font-size: 13px; color: var(--st-ink); padding: 10px; } .st-carousel-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; border: 1px solid var(--st-rule); background: var(--st-paper); color: var(--st-ink); font-size: 22px; line-height: 1; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0,0,0,.10); transition: background .2s, color .2s; } .st-carousel-nav:hover { background: var(--st-ink); color: var(--st-paper); } .st-carousel-nav--prev { left: -8px; } .st-carousel-nav--next { right: -8px; } .st-carousel-nav[aria-disabled="true"] { opacity: 0; pointer-events: none; } @media (max-width: 600px) { .st-carousel-nav { display: none; } .st-home-collab--round .st-home-collab-logo, .st-home-collab--round .st-home-collab-name { width: 92px; height: 92px; } .st-home-collab--round .st-home-collab-item { width: 100px; } } /* Program sayfası altı — seçilen kategorilerden oped akışı */ .st-pp-feed { margin: 44px 0 10px; } .st-pp-feed .st-pp-section-title { margin-bottom: 18px; } .st-pp-feed-nav { margin-top: 26px; align-items: center; } .st-pp-feed-count { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted); } /* ========================================================= Guardian tarzı değişken mozaik ızgara (.st-gw) — program akışı ========================================================= */ .st-gw { display: grid; grid-template-columns: repeat(6, 1fr); border-top: 2px solid var(--st-ink); } .st-gw-card { display: flex; flex-direction: column; padding: 18px 20px 22px; border-bottom: 1px solid var(--st-rule); border-right: 1px solid var(--st-rule); min-width: 0; } .st-gw-span-2 { grid-column: span 2; } .st-gw-span-3 { grid-column: span 3; } .st-gw-span-4 { grid-column: span 4; } .st-gw-media { display: block; line-height: 0; overflow: hidden; margin: 0 0 12px; } .st-gw-media img { width: 100%; object-fit: cover; display: block; transition: transform .35s ease; } .st-gw--hero .st-gw-media img { aspect-ratio: 16 / 9; } .st-gw--medium .st-gw-media img { aspect-ratio: 3 / 2; } .st-gw--compact .st-gw-media img { aspect-ratio: 3 / 2; } .st-gw-card:hover .st-gw-media img { transform: scale(1.03); } .st-gw-avatar { display: block; line-height: 0; margin: 0 0 12px; } .st-gw-avatar img { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--st-bg-soft); display: block; } .st-gw--avatar .st-gw-avatar img { width: 96px; height: 96px; } .st-gw--compact.is-avatar .st-gw-avatar img { width: 84px; height: 84px; } .st-gw-kicker { font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .02em; margin: 0 0 6px; } .st-gw-kicker a { color: var(--st-name); text-decoration: none; } .st-gw-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; } .st-gw-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.18; margin: 0 0 10px; } .st-gw--hero .st-gw-title { font-size: clamp(1.5rem, 2.4vw, 2rem); } .st-gw--medium .st-gw-title { font-size: 1.35rem; } .st-gw--compact .st-gw-title, .st-gw--avatar .st-gw-title { font-size: 1.12rem; } .st-gw-title a { color: var(--st-ink); text-decoration: none; } .st-gw-title a:hover { color: var(--st-muted); } .st-gw-quote { color: var(--st-name); font-weight: 700; margin-right: 3px; } .st-gw-byline { font-family: var(--st-font-sans); font-size: 12.5px; color: var(--st-muted); margin: auto 0 0; } .st-gw-author a { color: var(--st-name); text-decoration: none; font-weight: 600; } .st-gw-author a:hover { color: var(--st-ink); } .st-gw-time { color: var(--st-muted); } @media (max-width: 900px) { .st-gw { grid-template-columns: repeat(2, 1fr); } .st-gw-span-2, .st-gw-span-3, .st-gw-span-4 { grid-column: span 1; } .st-gw--hero .st-gw-title { font-size: 1.4rem; } } @media (max-width: 560px) { .st-gw { grid-template-columns: 1fr; } .st-gw-span-2, .st-gw-span-3, .st-gw-span-4 { grid-column: span 1; } } /* ========================================================= Program akışı — üst 3 "feature" (Guardian Lifestyle bloğu) Solda başlık rayı + metin solda / büyük görsel sağda ========================================================= */ .st-pp-feat { display: grid; grid-template-columns: 190px 1fr; border-top: 2px solid var(--st-ink); } .st-pp-feat-rail { padding: 24px 24px 24px 0; } .st-pp-feat-railtitle { font-family: var(--st-font-display); font-size: clamp(1.5rem, 2.4vw, 2rem); font-weight: 800; letter-spacing: -0.01em; margin: 0; } .st-pp-feat-list { border-left: 1px solid var(--st-rule); } .st-pp-feat-card { display: grid; grid-template-columns: 1fr 1.25fr; gap: 28px; padding: 24px; border-bottom: 1px solid var(--st-rule); align-items: start; } .st-pp-feat-text { min-width: 0; } .st-pp-feat-kicker { font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; color: var(--st-name); margin: 0 0 8px; } .st-pp-feat-kicker a { color: inherit; text-decoration: none; } .st-pp-feat-kicker a:hover { text-decoration: underline; text-underline-offset: 3px; } .st-pp-feat-title { font-family: var(--st-font-display); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 14px; } .st-pp-feat-title a { color: var(--st-ink); text-decoration: none; } .st-pp-feat-title a:hover { color: var(--st-muted); } .st-pp-feat-dek { font-family: var(--st-font-body); font-size: 1.05rem; line-height: 1.55; color: var(--st-soft-text); margin: 0 0 14px; } .st-pp-feat-byline { font-family: var(--st-font-sans); font-size: 12.5px; color: var(--st-muted); margin: 0; } .st-pp-feat-author a { color: var(--st-name); font-weight: 600; text-decoration: none; } .st-pp-feat-author a:hover { color: var(--st-ink); } .st-pp-feat-img { display: block; line-height: 0; overflow: hidden; } .st-pp-feat-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; transition: transform .35s ease; } .st-pp-feat-card:hover .st-pp-feat-img img { transform: scale(1.03); } .st-pp-feat-card.no-image .st-pp-feat-img img { aspect-ratio: 1 / 1; width: 200px; height: 200px; border-radius: 50%; margin: 0 auto; } @media (max-width: 900px) { .st-pp-feat { grid-template-columns: 1fr; } .st-pp-feat-rail { padding: 16px 0 4px; } .st-pp-feat-list { border-left: 0; } .st-pp-feat-card { grid-template-columns: 1fr; gap: 14px; padding: 20px 0; } .st-pp-feat-card .st-pp-feat-img { order: -1; } } /* ========================================================= Keşfet — gazetecilik bülteni (tema stili) ========================================================= */ .st-kesfet { max-width: var(--st-w-narrow); margin: 0 auto; padding: 0 24px; } .st-kesfet-updated { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-muted); text-align: center; margin: 8px 0 30px; } .st-kesfet-empty { font-family: var(--st-font-body); color: var(--st-muted); text-align: center; padding: 40px 0; } .st-kesfet-item { position: relative; padding: 28px 0; border-top: 1px solid var(--st-rule); } .st-kesfet-item:first-of-type { border-top: 2px solid var(--st-ink); } .st-kesfet-num { position: absolute; top: 18px; right: 0; font-family: var(--st-font-display); font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 800; line-height: 1; color: var(--st-rule); pointer-events: none; } .st-kesfet-item.is-featured .st-kesfet-num { color: var(--st-name); opacity: .25; } .st-kesfet-overline { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-name); font-weight: 700; margin: 0 0 8px; } .st-kesfet-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.14; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 10px; padding-right: 64px; color: var(--st-ink); } .st-kesfet-title a { color: inherit; text-decoration: none; } .st-kesfet-title a:hover { color: var(--st-name); } .st-kesfet-item.is-featured .st-kesfet-title { font-size: clamp(1.8rem, 3.2vw, 2.4rem); } /* Sayfa içeriğindeki drop-cap kuralının bülten bloğuna sızmasını engelle (S/Ö/E devleşmesi). */ .st-kesfet p::first-letter, .st-kesfet-body p::first-letter, .st-home-kesfet p::first-letter, .st-article-body .st-kesfet p:first-of-type::first-letter, .st-article-body .st-home-kesfet p:first-of-type::first-letter { font-size: inherit !important; float: none !important; line-height: inherit !important; padding: 0 !important; font-weight: inherit !important; font-family: inherit !important; } .st-kesfet-meta { font-family: var(--st-font-sans); font-size: 12.5px; letter-spacing: .02em; margin: 0 0 14px; } .st-kesfet-source { color: var(--st-name); font-weight: 700; } .st-kesfet-sep { color: var(--st-rule); margin: 0 6px; } .st-kesfet-srclink { color: var(--st-ink); text-decoration: underline; text-underline-offset: 3px; } .st-kesfet-srclink:hover { color: var(--st-muted); } .st-kesfet-body { font-family: var(--st-font-body); font-size: 1.1rem; line-height: 1.7; color: var(--st-ink); } .st-kesfet-body p { margin: 0 0 1em; } .st-kesfet-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 14px; } .st-kesfet-tag { font-family: var(--st-font-sans); font-size: 11px; letter-spacing: .04em; color: var(--st-muted); } .st-kesfet-tag::before { content: "#"; color: var(--st-rule); } .st-kesfet-foot { font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .04em; color: var(--st-muted); text-align: center; margin: 30px 0 10px; padding-top: 18px; border-top: 1px solid var(--st-rule); } /* Anasayfa Keşfet bloğu — 4 içerik (başlık + paragraf) */ .st-home-kesfet-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--st-rule); } .st-home-kesfet-item { padding: 18px 20px; border-right: 1px solid var(--st-rule); } .st-home-kesfet-item:last-child { border-right: 0; } .st-home-kesfet-src { font-family: var(--st-font-sans); font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--st-name); margin: 0 0 6px; } .st-home-kesfet-title { font-family: var(--st-font-display); font-size: 1.2rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; margin: 0 0 8px; } .st-home-kesfet-title a { color: var(--st-ink); text-decoration: none; } .st-home-kesfet-title a:hover { color: var(--st-muted); } .st-home-kesfet-dek { font-family: var(--st-font-body); font-size: 0.98rem; line-height: 1.5; color: var(--st-soft-text); margin: 0; } @media (max-width: 900px) { .st-home-kesfet-grid { grid-template-columns: repeat(2, 1fr); } .st-home-kesfet-item:nth-child(2n) { border-right: 0; } .st-home-kesfet-item { border-bottom: 1px solid var(--st-rule); } } @media (max-width: 560px) { .st-home-kesfet-grid { grid-template-columns: 1fr; } .st-home-kesfet-item { border-right: 0; } } /* ============================================================ EKİP (/ekip/) — sojo_team ============================================================ */ /* Ekip sayfası artık assets/team.css ile geliyor (künye düzeni). Eski .st-team-* kart ızgarası kaldırıldı; işaretlemesi de kullanılmıyor. */ /* ============================================================ YAPAY ZEKÂ REHBERİ (/yz-rehberi/) — page-yz-rehberi.php .st-gd-* düzenini paylaşır; buradakiler ek bileşenler. ============================================================ */ .st-yz-hero { max-width: var(--st-w-content); margin: 0 auto; padding: 40px 24px 30px; border-bottom: 3px solid var(--st-ink); } .st-yz-hero-overline { font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--st-name); margin: 10px 0 12px; } .st-yz-hero-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: 1.0; margin: 0 0 18px; color: var(--st-ink); } .st-yz-hero-sub { font-family: var(--st-font-body); font-size: 1.25rem; line-height: 1.5; color: var(--st-muted); margin: 0 0 16px; max-width: 720px; } .st-yz-hero-meta { font-family: var(--st-font-sans); font-size: 12.5px; letter-spacing: .02em; color: var(--st-soft-text, #8a857c); margin: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: baseline; } .st-yz-hero-year { font-weight: 700; color: var(--st-name); } /* Prose içi başlık numaraları/ritim */ .st-yz-prose h2 { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.1; margin: 2em 0 .5em; padding-top: .6em; border-top: 1px solid var(--st-rule); scroll-margin-top: 90px; } .st-yz-prose h2:first-child { border-top: 0; padding-top: 0; margin-top: .3em; } .st-yz-prose h3 { font-family: var(--st-font-display); font-weight: 700; font-size: 1.32rem; margin: 1.5em 0 .4em; color: var(--st-ink); scroll-margin-top: 90px; } .st-yz-prose p { margin: 0 0 1.05em; } .st-yz-prose ul, .st-yz-prose ol { padding-left: 1.3em; margin: 0 0 1.2em; } .st-yz-prose li { margin: 0 0 .5em; } .st-yz-prose .st-yz-subhead { font-family: var(--st-font-sans); font-weight: 700; font-size: .82rem; letter-spacing: .09em; text-transform: uppercase; color: var(--st-name); margin: 1.6em 0 .5em; } /* Vaka çalışması kutusu */ .st-yz-case { border: 1px solid var(--st-rule); border-left: 3px solid var(--st-name); border-radius: 4px; background: #fff; padding: 20px 22px; margin: 1.6em 0; } .st-yz-case-meta { font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--st-soft-text, #6b665e); margin: 0 0 6px; } .st-yz-case-year { display: inline-block; background: var(--st-name); color: #fff; font-weight: 700; padding: 1px 8px; border-radius: 3px; margin-right: 8px; letter-spacing: .02em; } .st-yz-case-title { font-family: var(--st-font-display); font-weight: 800; font-size: 1.18rem; line-height: 1.2; margin: 0 0 8px; color: var(--st-ink); } .st-yz-case-sum { font-family: var(--st-font-body); font-size: 1rem; line-height: 1.6; color: var(--st-soft-text, #4a463f); margin: 0 0 8px; } .st-yz-case-src { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-muted); margin: 4px 0 0; } .st-yz-case-src span { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-right: 6px; color: var(--st-soft-text, #6b665e); } /* Not / "Daha fazla bilgi" kutuları */ .st-yz-note { background: var(--st-paper-2, #f4f1ea); border-radius: 4px; padding: 16px 20px; margin: 1.6em 0; font-size: .98rem; } .st-yz-note p { margin: 0 0 .6em; } .st-yz-note p:last-child { margin: 0; } .st-yz-prose .st-yz-more { font-family: var(--st-font-sans); font-size: .92rem; line-height: 1.5; color: var(--st-muted); border-left: 2px solid var(--st-rule); padding: 2px 0 2px 14px; margin: 1.2em 0; } .st-yz-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: .95rem; } .st-yz-prose th, .st-yz-prose td { border: 1px solid var(--st-rule); padding: 8px 12px; text-align: left; vertical-align: top; } .st-yz-prose th { background: var(--st-paper-2, #f4f1ea); font-family: var(--st-font-sans); font-size: 12px; letter-spacing: .04em; text-transform: uppercase; } /* ============================================================ PROGRAM/PROJE KATEGORİ AKIŞI — Sojo B (yazar fotoğrafı odaklı) ============================================================ */ .st-pp-authors { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 44px 32px; margin-top: 8px; } .st-pp-author-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .st-pp-author-photo { display: inline-flex; justify-content: center; width: 148px; height: 148px; margin: 0 0 18px; position: relative; } .st-pp-author-photo .st-pp-author-img, .st-pp-author-photo img { width: 148px; height: 148px; border-radius: 50%; object-fit: cover; display: block; background: var(--st-paper-2, #f0ece3); box-shadow: 0 0 0 1px var(--st-rule), 0 0 0 6px #fff, 0 0 0 7px var(--st-rule); transition: transform .3s ease; } .st-pp-author-card:hover .st-pp-author-photo img { transform: translateY(-3px); } /* Çok yazarlı: üst üste binen avatarlar */ .st-pp-author-photo.is-multi { width: auto; } .st-pp-author-photo.is-multi img { width: 108px; height: 108px; margin-left: -34px; box-shadow: 0 0 0 1px var(--st-rule), 0 0 0 5px #fff; } .st-pp-author-photo.is-multi img:first-child { margin-left: 0; } .st-pp-author-name { font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--st-name); margin: 0 0 8px; line-height: 1.3; } .st-pp-author-name a { color: inherit; text-decoration: none; } .st-pp-author-name a:hover { text-decoration: underline; text-underline-offset: 3px; } .st-pp-author-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.01em; font-size: 1.22rem; line-height: 1.2; margin: 0 0 8px; } .st-pp-author-title a { color: var(--st-ink); text-decoration: none; } .st-pp-author-title a:hover { color: var(--st-name); } .st-pp-author-time { font-family: var(--st-font-sans); font-size: 12px; color: var(--st-muted); margin: auto 0 0; } @media (max-width: 520px) { .st-pp-authors { grid-template-columns: repeat(2, 1fr); gap: 32px 18px; } .st-pp-author-photo, .st-pp-author-photo .st-pp-author-img, .st-pp-author-photo img { width: 112px; height: 112px; } } /* ============================================================ GAZETECİ (/gazeteci/) — video serisi ============================================================ */ .st-gz-wrap { padding: 48px 0 88px; } .st-gz-head { max-width: var(--st-w-narrow); margin: 0 0 40px; padding-bottom: 26px; border-bottom: 3px solid var(--st-ink); } .st-gz-kicker { font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--st-name); margin: 0 0 12px; } .st-gz-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(2.6rem, 6vw, 4.4rem); line-height: 1.0; margin: 0 0 16px; color: var(--st-ink); } .st-gz-intro { font-family: var(--st-font-body); font-size: 1.2rem; line-height: 1.55; color: var(--st-muted); margin: 0; max-width: 640px; } .st-gz-count { font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--st-soft-text, #8a857c); margin: 16px 0 0; } .st-gz-empty { color: var(--st-muted); } /* Oynatıcı çerçevesi (16:9) */ .st-gz-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; } .st-gz-player { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; background: #000; display: block; } .st-gz-thumb { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease, opacity .3s ease; } .st-gz-player:hover .st-gz-thumb { transform: scale(1.04); opacity: .82; } .st-gz-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 68px; height: 48px; } .st-gz-play svg { display: block; width: 100%; height: 100%; } .st-gz-play-bg { fill: #000; opacity: .72; transition: fill .2s ease, opacity .2s ease; } .st-gz-player:hover .st-gz-play-bg { fill: var(--st-name); opacity: 1; } .st-gz-iframe { width: 100%; height: 100%; aspect-ratio: 16 / 9; border: 0; display: block; border-radius: 6px; } /* Öne çıkan (ilk) video */ .st-gz-feature { margin: 0 0 56px; } .st-gz-frame--lg { border-radius: 8px; } .st-gz-feature-cap { display: block; margin: 20px 0 0; } .st-gz-ep { display: inline-block; font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .08em; color: #fff; background: var(--st-name); padding: 2px 9px; border-radius: 3px; margin: 0 0 10px; } .st-gz-feature-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.12; margin: 0 0 8px; color: var(--st-ink); } .st-gz-feature-desc { font-family: var(--st-font-body); font-size: 1.1rem; line-height: 1.6; color: var(--st-soft-text, #4a463f); margin: 0; max-width: 720px; } /* Kalan videolar ızgarası */ .st-gz-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 28px; } .st-gz-card-ep { font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--st-name); margin: 14px 0 5px; } .st-gz-card-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.01em; font-size: 1.22rem; line-height: 1.2; margin: 0 0 6px; color: var(--st-ink); } .st-gz-card-desc { font-family: var(--st-font-body); font-size: .98rem; line-height: 1.55; color: var(--st-soft-text, #4a463f); margin: 0; } @media (max-width: 860px) { .st-gz-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 520px) { .st-gz-grid { grid-template-columns: 1fr; gap: 30px; } } /* ============================================================ TEKİL YAZI ARAÇ ÇUBUĞU (paylaşım · Google kaynak · yazı boyutu) ============================================================ */ .st-article-tools { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 0 18px; margin: 0 0 8px; border-bottom: 1px solid var(--st-rule); } .st-tools-row { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; } .st-tools-share { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; } .st-tool-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: var(--st-bg-soft, #f2f0ea); color: var(--st-ink); border: 0; cursor: pointer; padding: 0; transition: background .15s ease, color .15s ease, transform .15s ease; } .st-tool-btn:hover { background: var(--st-name); color: #fff; transform: translateY(-2px); } /* TTS ikon durumu */ .st-tts .st-tts-stop { display: none; } .st-tts.is-playing { background: var(--st-name); color: #fff; } .st-tts.is-playing .st-tts-play { display: none; } .st-tts.is-playing .st-tts-stop { display: inline; } /* Yer imi durumu */ .st-bookmark .st-bm-on { display: none; } .st-bookmark.is-saved { background: var(--st-name); color: #fff; } .st-bookmark.is-saved .st-bm-off { display: none; } .st-bookmark.is-saved .st-bm-on { display: inline; } /* Google tercih edilen kaynak — tam genişlik alt satır */ .st-tool-source { display: inline-flex; align-items: center; gap: 9px; padding: 12px 20px; border: 1px solid var(--st-rule); border-radius: 999px; font-family: var(--st-font-sans); font-size: 14px; font-weight: 600; color: var(--st-ink); text-decoration: none; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .st-tool-source--full { width: 100%; justify-content: flex-start; } .st-tool-source:hover { border-color: #b9b4a8; box-shadow: 0 2px 10px -6px rgba(0,0,0,.3); } .st-tool-source svg { flex: 0 0 auto; } .st-tools-size { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; margin-left: auto; } .st-fs-btn { background: none; border: 0; cursor: pointer; color: var(--st-ink); font-family: var(--st-font-display); line-height: 1; padding: 2px 2px; } .st-fs-btn.st-fs-dec { font-size: 15px; color: var(--st-muted); } .st-fs-btn.st-fs-inc { font-size: 22px; } .st-fs-btn:hover { color: var(--st-name); } .st-fs-range { -webkit-appearance: none; appearance: none; width: 120px; height: 4px; border-radius: 3px; background: var(--st-rule); outline: none; } .st-fs-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--st-ink); cursor: pointer; } .st-fs-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--st-ink); cursor: pointer; } .st-fs-val { font-family: var(--st-font-sans); font-size: 15px; color: var(--st-ink); min-width: 20px; text-align: right; } @media (max-width: 720px) { .st-article-tools { gap: 12px; } .st-tools-row { gap: 10px; } .st-tools-share { gap: 6px; } .st-tool-btn { width: 36px; height: 36px; } .st-tools-size { gap: 7px; } .st-fs-range { width: 84px; } .st-fs-val { min-width: 16px; font-size: 14px; } .st-tool-source { font-size: 13px; padding: 11px 16px; } } @media (max-width: 420px) { .st-tool-print { display: none; } .st-fs-range { width: 64px; } } @media print { .st-article-tools { display: none; } } /* ============================================================ TEKİL YAZI: İçindekiler (TOC) ============================================================ */ html { scroll-behavior: smooth; } .st-article-body h2, .st-article-body h3 { scroll-margin-top: 90px; } .st-toc { margin: 0 0 28px; } .st-toc-title { font-family: var(--st-font-sans); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 12px; } .st-toc-list { list-style: none; margin: 0; padding: 0; } .st-toc-list li { margin: 0; } .st-toc-list a { display: block; font-family: var(--st-font-sans); font-size: 14px; line-height: 1.35; color: var(--st-soft-text, #4a463f); text-decoration: none; padding: 5px 0 5px 12px; border-left: 2px solid var(--st-rule); transition: color .15s ease, border-color .15s ease; } .st-toc-list a:hover { color: var(--st-ink); } .st-toc-list a.is-active { color: var(--st-name); border-left-color: var(--st-name); font-weight: 600; } .st-toc-l3 a { padding-left: 26px; font-size: 13px; color: var(--st-muted); } /* İçeriğin üstünde kutu olarak */ .st-toc { background: var(--st-paper-2, #f4f1ea); border-radius: 6px; padding: 16px 18px; } /* ============================================================ TEKİL YAZI: Yazı ortası margin blokları (sol ilgili kart · sağ "Dahası") ============================================================ */ .st-inarticle { display: none; } @media (min-width: 1360px) { .st-article-body { position: relative; } .st-inarticle { display: block; position: relative; height: 0; } .st-inarticle-left, .st-inarticle-right { position: absolute; top: 6px; } .st-inarticle-left { right: 100%; margin-right: 52px; width: 236px; } .st-inarticle-right { left: 100%; margin-left: 52px; width: 264px; } /* Sol: ilgili kart (kompakt) */ .st-ia-card-img { display: block; width: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: 4px; margin: 0 0 9px; background: var(--st-paper-2,#f0ece3); } .st-ia-cat { font-family: var(--st-font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--st-name); margin: 0 0 5px; } .st-ia-title { font-family: var(--st-font-display); font-weight: 800; font-size: 1.18rem; line-height: 1.14; letter-spacing: -0.01em; margin: 0 0 7px; } .st-ia-title a { color: var(--st-ink); text-decoration: none; } .st-ia-title a:hover { color: var(--st-name); } .st-ia-more { display: inline-block; font-family: var(--st-font-sans); font-size: 12px; font-weight: 700; letter-spacing: .03em; color: var(--st-name); text-decoration: none; } .st-ia-more:hover { text-decoration: underline; text-underline-offset: 3px; } /* Sağ: "İlginizi çekebilir" listesi (kompakt) */ .st-inarticle-right .st-ia-head { font-family: var(--st-font-display); font-weight: 800; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--st-ink); margin: 0 0 2px; padding-bottom: 8px; border-bottom: 2px solid var(--st-ink); } .st-ia-list { list-style: none; margin: 0; padding: 0; } .st-ia-item { display: grid; grid-template-columns: 58px 1fr; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--st-rule); align-items: start; } .st-ia-item:last-child { border-bottom: 0; padding-bottom: 0; } .st-ia-item-img { width: 58px; height: 58px; object-fit: cover; border-radius: 3px; background: var(--st-paper-2,#f0ece3); } .st-ia-item-title { font-family: var(--st-font-display); font-weight: 700; font-size: .95rem; line-height: 1.16; margin: 0; } .st-ia-item-title a { color: var(--st-ink); text-decoration: none; } .st-ia-item-title a:hover { color: var(--st-name); } } /* ============================================================ TEKİL YAZI DÜZENLERİ — Kapak / Sade / Dergi ============================================================ */ /* Kapak & Sade: sağ büyük avatar sütunu olmadığı için başlık tek sütun */ .st-layout-cover .st-article-head-top, .st-layout-compact .st-article-head-top { grid-template-columns: 1fr; gap: 0; } /* Kapak: başlığın üstünde geniş görsel */ .st-hero--cover { margin: 0 0 22px; } .st-hero--cover img { width: 100%; height: auto; display: block; border-radius: 4px; } /* Kapak byline satırı (avatar + ad | tarih) */ .st-byline { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--st-rule); } .st-byline-avatar { line-height: 0; flex: 0 0 auto; } .st-byline-avatar img, .st-byline-avatar-img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--st-avatar-bg, #f2c14e); display: block; } .st-byline-name { font-family: var(--st-font-display); font-weight: 700; font-size: 1.05rem; color: var(--st-ink); } .st-byline-name a { color: inherit; text-decoration: none; } .st-byline-name a:hover { color: var(--st-name); } .st-byline-date { margin-left: auto; font-family: var(--st-font-sans); font-size: 12.5px; letter-spacing: .02em; color: var(--st-muted); } /* Sade byline */ .st-byline-compact { font-family: var(--st-font-display); font-weight: 700; font-size: 1.1rem; color: var(--st-ink); margin: 0 0 8px; } .st-byline-compact a { color: inherit; text-decoration: none; } .st-byline-compact a:hover { color: var(--st-name); } /* Dergi: içerik + sağ kenar çubuğu grid */ .st-layout-magazine.st-single-wrap { max-width: var(--st-w-content); } .st-mag-grid { display: grid; grid-template-columns: minmax(0, var(--st-w-narrow)) 300px; gap: 48px; justify-content: center; align-items: start; } .st-mag-grid > .st-article { max-width: none; } .st-mag-side { min-width: 0; } .st-mag-side .st-newsletter { position: sticky; top: 88px; } @media (max-width: 1080px) { .st-layout-magazine.st-single-wrap { max-width: var(--st-w-narrow); } .st-mag-grid { grid-template-columns: 1fr; gap: 32px; } .st-mag-side .st-newsletter { position: static; } } /* Dergi düzeni (sağ kenar çubuğu): yazı ortası blokları tamamen gizli */ .st-layout-magazine .st-inarticle { display: none !important; } /* Bülten kayıt kutusu */ .st-newsletter { border: 1px solid var(--st-rule); border-radius: 8px; padding: 22px 20px; background: var(--st-paper-2, #f4f1ea); } .st-newsletter-title { font-family: var(--st-font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.15; margin: 0 0 8px; color: var(--st-ink); } .st-newsletter-desc { font-family: var(--st-font-body); font-size: .98rem; line-height: 1.5; color: var(--st-soft-text, #4a463f); margin: 0 0 16px; } .st-newsletter-form { display: flex; flex-direction: column; gap: 10px; } .st-newsletter-input { font-family: var(--st-font-sans); font-size: 15px; padding: 11px 14px; border: 1px solid var(--st-rule); border-radius: 6px; background: #fff; } .st-newsletter-input:focus { outline: none; border-color: var(--st-ink); } .st-newsletter-btn { font-family: var(--st-font-sans); font-size: 15px; font-weight: 700; padding: 11px 16px; border: 0; border-radius: 6px; background: var(--st-ink); color: #fff; cursor: pointer; transition: background .15s ease; } .st-newsletter-btn:hover { background: var(--st-name); } .st-newsletter-note { font-family: var(--st-font-sans); font-size: 11.5px; color: var(--st-muted); margin: 10px 0 0; } /* ============================================================ HEADER: Kaydedilenler ikonu + KAYDEDİLENLER SAYFASI ============================================================ */ .st-nav-saved { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; color: inherit; text-decoration: none; } .st-nav-saved:hover { opacity: .7; } .st-nav-saved-count { position: absolute; top: 2px; right: 0; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: var(--st-name); color: #fff; font-family: var(--st-font-sans); font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .st-saved-wrap { padding: 48px 0 88px; } .st-saved-head { max-width: var(--st-w-narrow); margin: 0 0 40px; padding-bottom: 24px; border-bottom: 3px solid var(--st-ink); } .st-saved-overline { font-family: var(--st-font-mono); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--st-name); margin: 0 0 12px; } .st-saved-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(2.4rem, 5vw, 3.6rem); margin: 0 0 14px; color: var(--st-ink); } .st-saved-intro { font-family: var(--st-font-body); font-size: 1.1rem; line-height: 1.55; color: var(--st-muted); margin: 0; max-width: 620px; } .st-saved-empty { font-family: var(--st-font-body); color: var(--st-muted); font-size: 1.05rem; } .st-saved-list { display: flex; flex-direction: column; } .st-saved-item { display: grid; grid-template-columns: 120px 1fr auto; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--st-rule); } .st-saved-item:first-child { border-top: 1px solid var(--st-rule); } .st-saved-thumb { line-height: 0; } .st-saved-thumb img { width: 120px; height: 80px; object-fit: cover; border-radius: 4px; display: block; background: var(--st-paper-2,#f0ece3); } .st-saved-thumb--empty { display: block; width: 120px; height: 80px; border-radius: 4px; background: var(--st-paper-2,#f0ece3); } .st-saved-cat { font-family: var(--st-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--st-name); margin: 0 0 5px; } .st-saved-item-title { font-family: var(--st-font-display); font-weight: 800; font-size: 1.3rem; line-height: 1.18; margin: 0 0 5px; } .st-saved-item-title a { color: var(--st-ink); text-decoration: none; } .st-saved-item-title a:hover { color: var(--st-name); } .st-saved-date { font-family: var(--st-font-mono); font-size: 12px; letter-spacing: .02em; text-transform: uppercase; color: var(--st-muted); margin: 0; } .st-saved-remove { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--st-rule); background: #fff; color: var(--st-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color .15s ease, border-color .15s ease, background .15s ease; } .st-saved-remove:hover { color: #fff; background: var(--st-name); border-color: var(--st-name); } @media (max-width: 560px) { .st-saved-item { grid-template-columns: 84px 1fr auto; gap: 14px; } .st-saved-thumb img, .st-saved-thumb--empty { width: 84px; height: 60px; } .st-saved-item-title { font-size: 1.1rem; } } /* ============================================================ FOOTER ÜSTÜ CTA — Üyelik · Bülten · Bağlan ============================================================ */ .st-pfcta { border-top: 2px solid var(--st-ink); padding: 48px 0 44px; } .st-pfcta-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 48px; align-items: start; } .st-pfcta-col { position: relative; } .st-pfcta-col + .st-pfcta-col { padding-left: 48px; border-left: 1px solid var(--st-rule); margin-left: -24px; } .st-pfcta-title { font-family: var(--st-font-sans); font-weight: 800; font-size: 1.15rem; letter-spacing: .01em; text-transform: uppercase; margin: 0 0 14px; color: var(--st-ink); } .st-pfcta-text { font-family: var(--st-font-body); font-size: 1.05rem; line-height: 1.5; color: var(--st-ink); margin: 0 0 20px; } .st-pfcta-btn { display: inline-block; font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--st-ink); padding: 12px 24px; text-decoration: none; transition: background .15s ease; } .st-pfcta-btn:hover { background: var(--st-name); } .st-pfcta-form { max-width: 420px; } .st-pfcta-input { width: 100%; font-family: var(--st-font-body); font-size: 1.05rem; padding: 8px 2px; border: 0; border-bottom: 1px solid var(--st-ink); background: transparent; color: var(--st-ink); margin: 0 0 14px; } .st-pfcta-input::placeholder { color: var(--st-muted); } .st-pfcta-input:focus { outline: none; border-bottom-width: 2px; } .st-pfcta-form-row { display: flex; gap: 12px; align-items: flex-end; } .st-pfcta-form-row .st-pfcta-input { flex: 1; margin: 0; } .st-pfcta-signup { flex: 0 0 auto; font-family: var(--st-font-sans); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: var(--st-ink); border: 0; padding: 11px 20px; cursor: pointer; transition: background .15s ease; } .st-pfcta-signup:hover { background: var(--st-name); } .st-pfcta-note { display: block; font-family: var(--st-font-sans); font-size: 11px; color: var(--st-muted); margin-top: 8px; } .st-pfcta-social { display: flex; flex-wrap: wrap; gap: 22px; align-items: center; } .st-pfcta-social a { color: var(--st-ink); line-height: 0; transition: color .15s ease, transform .15s ease; } .st-pfcta-social a:hover { color: var(--st-name); transform: translateY(-2px); } @media (max-width: 900px) { .st-pfcta-grid { grid-template-columns: 1fr; gap: 36px; } .st-pfcta-col + .st-pfcta-col { padding-left: 0; border-left: 0; margin-left: 0; padding-top: 32px; border-top: 1px solid var(--st-rule); } } /* ============================================================ AKADEMİ ARŞİVİ — arka plan videolu hero ============================================================ */ .st-akhero { position: relative; overflow: hidden; background: #12131a; min-height: clamp(320px, 42vw, 540px); display: flex; align-items: center; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -32px; /* .st-container üst paddingini kapat → header'a yaslan */ margin-bottom: 40px; } .st-akhero-video { position: absolute; inset: 0; overflow: hidden; } .st-akhero-video iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100%; transform: translate(-50%, -50%); pointer-events: none; border: 0; } .st-akhero-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,14,.85) 0%, rgba(8,9,14,.55) 45%, rgba(8,9,14,.25) 100%); } .st-akhero-inner { position: relative; z-index: 2; width: 100%; padding-top: 40px; padding-bottom: 40px; padding-left: clamp(28px, 6vw, 110px); } .st-akhero-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.02em; line-height: 1.02; font-size: clamp(2.4rem, 5.4vw, 4.2rem); color: #fff; margin: 0 0 14px; max-width: 16ch; } .st-akhero-label { font-family: var(--st-font-mono); font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #fff; margin: 0; opacity: .92; } @media (max-width: 600px) { .st-akhero { min-height: 300px; margin-top: -18px; } .st-akhero-title { font-size: clamp(2rem, 9vw, 2.6rem); } } /* ============================================================ * Newsframes — Netflix tarzı YouTube oynatma listesi vitrini * ============================================================ */ .st-nf { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -32px; margin-bottom: -56px; padding-bottom: 56px; background: #0b0b0f; color: #fff; overflow: hidden; } body.st-nf-lock { overflow: hidden; } /* ---- Hero ---- */ .st-nf-hero { position: relative; min-height: clamp(440px, 62vw, 720px); display: flex; align-items: flex-end; overflow: hidden; background: #16161d; } .st-nf-hero-bg { position: absolute; inset: 0; z-index: 0; } .st-nf-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; } .st-nf-hero-bg iframe { position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100%; transform: translate(-50%, -50%); pointer-events: none; border: 0; } .st-nf-hero-shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(11,11,15,.92) 0%, rgba(11,11,15,.60) 42%, rgba(11,11,15,.10) 72%, rgba(11,11,15,0) 100%), linear-gradient(0deg, rgba(11,11,15,.95) 0%, rgba(11,11,15,.35) 30%, rgba(11,11,15,0) 62%); } .st-nf-hero-inner { position: relative; z-index: 2; width: 100%; max-width: var(--st-w-content, 1240px); margin: 0 auto; padding: 0 clamp(28px, 6vw, 110px) clamp(40px, 5vw, 72px); box-sizing: border-box; } .st-nf-hero-kicker { font-family: var(--st-font-mono); font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--st-name, #d40000); margin: 0 0 12px; } .st-nf-hero-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(2.6rem, 6vw, 5rem); line-height: .98; color: #fff; margin: 0 0 16px; max-width: 15ch; text-shadow: 0 2px 24px rgba(0,0,0,.5); } .st-nf-hero-meta { font-family: var(--st-font-sans); font-size: 15px; font-weight: 600; color: rgba(255,255,255,.85); margin: 0 0 14px; letter-spacing: .01em; } .st-nf-hero-desc { font-family: var(--st-font-body); font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.5; color: rgba(255,255,255,.9); margin: 0 0 24px; max-width: 46ch; text-shadow: 0 1px 12px rgba(0,0,0,.4); } .st-nf-hero-btns { display: flex; flex-wrap: wrap; gap: 14px; } .st-nf-btn { display: inline-flex; align-items: center; gap: 9px; font-family: var(--st-font-sans); font-size: 1rem; font-weight: 700; padding: 13px 28px; border-radius: 6px; border: 0; cursor: pointer; transition: transform .12s ease, background .15s ease, color .15s ease; } .st-nf-btn svg { display: block; } .st-nf-btn--play { background: #fff; color: #111; } .st-nf-btn--play:hover { background: rgba(255,255,255,.82); transform: translateY(-1px); } .st-nf-btn--info { background: rgba(109,109,110,.55); color: #fff; } .st-nf-btn--info:hover { background: rgba(109,109,110,.4); transform: translateY(-1px); } /* ---- Satırlar ---- */ .st-nf-row { position: relative; margin: 34px 0 0; } .st-nf-row-title { font-family: var(--st-font-display); font-weight: 800; font-size: clamp(1.15rem, 2vw, 1.5rem); color: #fff; margin: 0 0 14px; padding: 0 clamp(28px, 6vw, 110px); max-width: none; } .st-nf-row-wrap { position: relative; } .st-nf-track { display: flex; gap: 14px; padding: 4px clamp(28px, 6vw, 110px) 8px; overflow-x: auto; overflow-y: visible; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .st-nf-track::-webkit-scrollbar { display: none; } /* ---- Kart ---- */ .st-nf-card { flex: 0 0 auto; width: clamp(200px, 22vw, 300px); background: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; color: #fff; display: flex; flex-direction: column; transition: transform .18s ease; } .st-nf-card:hover, .st-nf-card:focus-visible { transform: scale(1.045); z-index: 3; outline: none; } .st-nf-card-img { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; background: #1c1c26; box-shadow: 0 4px 18px rgba(0,0,0,.4); } .st-nf-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .st-nf-card-ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: var(--st-font-display); font-weight: 800; font-size: 3rem; color: rgba(255,255,255,.28); background: linear-gradient(135deg, #24242f, #14141b); } .st-nf-card-preview { position: absolute; inset: 0; z-index: 1; opacity: 0; transition: opacity .25s ease; pointer-events: none; background: #000; } .st-nf-card-preview iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 178%; min-width: 178%; min-height: 100%; transform: translate(-50%, -50%); border: 0; } .st-nf-card.is-previewing .st-nf-card-preview { opacity: 1; } .st-nf-card-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity .18s ease; background: rgba(0,0,0,.28); } .st-nf-card-play svg { width: 46px; height: 46px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); } .st-nf-card:hover .st-nf-card-play, .st-nf-card:focus-visible .st-nf-card-play { opacity: 1; } .st-nf-card.is-previewing .st-nf-card-play { opacity: 0; } .st-nf-card-title { font-family: var(--st-font-sans); font-size: .95rem; font-weight: 600; color: #fff; margin: 10px 2px 0; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .st-nf-card-meta { font-family: var(--st-font-mono); font-size: 11px; letter-spacing: .04em; color: rgba(255,255,255,.5); margin: 4px 2px 0; } /* ---- Okla kaydırma ---- */ .st-nf-arrow { position: absolute; top: 4px; bottom: 8px; z-index: 4; width: clamp(28px, 6vw, 64px); border: 0; cursor: pointer; color: #fff; font-size: 2rem; line-height: 1; background: linear-gradient(90deg, rgba(11,11,15,.85), rgba(11,11,15,0)); opacity: 0; transition: opacity .2s ease; display: flex; align-items: center; justify-content: center; } .st-nf-arrow--prev { left: 0; } .st-nf-arrow--next { right: 0; background: linear-gradient(270deg, rgba(11,11,15,.85), rgba(11,11,15,0)); } .st-nf-row-wrap:hover .st-nf-arrow { opacity: 1; } .st-nf-arrow:hover { color: var(--st-name, #d40000); } /* ---- Modal ---- */ .st-nf-modal[hidden] { display: none; } .st-nf-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; } .st-nf-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.82); backdrop-filter: blur(3px); } .st-nf-modal-box { position: relative; z-index: 1; width: min(1000px, 96vw); background: #0f0f14; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 80px rgba(0,0,0,.6); } .st-nf-modal-x { position: absolute; top: 10px; right: 12px; z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; cursor: pointer; background: rgba(0,0,0,.6); color: #fff; font-size: 24px; line-height: 1; display: flex; align-items: center; justify-content: center; } .st-nf-modal-x:hover { background: rgba(0,0,0,.85); } .st-nf-modal-player { position: relative; aspect-ratio: 16 / 9; background: #000; } .st-nf-modal-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .st-nf-modal-info { padding: 20px 24px 26px; } .st-nf-modal-title { font-family: var(--st-font-display); font-weight: 800; font-size: 1.4rem; color: #fff; margin: 0 0 8px; } .st-nf-modal-desc { font-family: var(--st-font-body); font-size: 1rem; line-height: 1.55; color: rgba(255,255,255,.82); margin: 0; } @media (max-width: 600px) { .st-nf { margin-top: -18px; } .st-nf-hero { min-height: 78vw; } .st-nf-hero-inner { padding-left: 18px; padding-right: 18px; } .st-nf-hero-title { font-size: clamp(2rem, 10vw, 2.8rem); } .st-nf-hero-desc { display: none; } .st-nf-row-title, .st-nf-track { padding-left: 18px; padding-right: 18px; } .st-nf-card { width: 62vw; } .st-nf-arrow { display: none; } .st-nf-modal { padding: 0; align-items: stretch; } .st-nf-modal-box { width: 100vw; border-radius: 0; align-self: center; } } /* ============================================================ * OYUNLAR — Manşet Bulmacası / Sudoku / Kelime Avı / Haber Testi * ============================================================ */ .st-games { margin: 40px 0; } .st-games-inner { max-width: var(--st-w-content, 1240px); margin: 0 auto; } .st-games-head { display: flex; align-items: center; gap: 20px; margin: 0 0 22px; } .st-games-label { font-family: var(--st-font-mono); font-size: 13px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: #6b6b6b; margin: 0; white-space: nowrap; } .st-games-rule { flex: 1; height: 2px; background: #111; opacity: .9; } /* Kart şeridi */ /* Kart sayısı arttıkça (6 oyun) sütun sayısı kendiliğinden ayarlansın. */ .st-games-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 22px 26px; } .st-game-card { display: flex; align-items: center; gap: 16px; background: transparent; border: 0; padding: 6px; margin: 0; cursor: pointer; text-align: left; border-radius: 12px; transition: background .15s ease, transform .12s ease; } .st-game-card:hover { background: #f4f4f2; transform: translateY(-1px); } .st-game-card[aria-selected="true"] { background: #f0f0ee; } .st-game-ic { flex: 0 0 auto; width: 60px; height: 60px; border-radius: 16px; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 16px rgba(0,0,0,.12); } .st-game-txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; } .st-game-name { font-family: var(--st-font-display); font-weight: 800; font-size: 1.18rem; color: #111; line-height: 1.1; } .st-game-desc { font-family: var(--st-font-sans); font-size: .9rem; color: #6b6b6b; line-height: 1.25; } /* Sahne / paneller */ .st-game-stage { margin-top: 30px; } .st-game-panel { display: none; } .st-game-panel.is-active { display: block; } .st-game-panel { border: 1px solid #e6e6e2; border-radius: 14px; background: #fff; padding: clamp(18px, 3vw, 30px); } /* SON BASKI kendi tam genişlikli sahnesini kuruyor; kabuk çerçeve istemiyor. */ .st-game-panel--sonbaski { border: 0; border-radius: 0; background: transparent; padding: 0; } .st-game-kicker { font-family: var(--st-font-mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--st-name, #d40000); font-weight: 700; } .st-game-count { font-family: var(--st-font-mono); font-size: 12px; color: #8a8a8a; letter-spacing: .04em; } .st-mansett-head, .st-sudoku-head, .st-kelime-head, .st-haber-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 18px; } .st-game-empty { color: #777; padding: 20px 0; } .st-game-msg { min-height: 22px; margin: 14px 0 0; font-family: var(--st-font-sans); font-size: .95rem; color: #444; } .st-game-msg.is-ok { color: #1f8a4c; font-weight: 600; } .st-game-msg.is-bad { color: #c0392b; font-weight: 600; } .st-game-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .st-game-btn { font-family: var(--st-font-sans); font-size: .95rem; font-weight: 600; padding: 10px 18px; border-radius: 8px; border: 1px solid #d5d5d0; background: #fff; color: #222; cursor: pointer; transition: background .15s ease, border-color .15s ease; } .st-game-btn:hover { background: #f4f4f2; } .st-game-btn--main { background: #111; color: #fff; border-color: #111; } .st-game-btn--main:hover { background: #333; } /* --- Manşet Bulmacası --- */ .st-mansett-line { font-family: var(--st-font-display); font-size: clamp(1.15rem, 2.4vw, 1.7rem); line-height: 1.7; color: #111; margin: 0; } .st-mansett-boxes { display: inline-flex; gap: 5px; vertical-align: middle; margin: 0 6px; } .st-mansett-box { width: 1.7em; height: 1.9em; text-align: center; font-family: var(--st-font-display); font-weight: 800; font-size: .8em; text-transform: uppercase; border: 0; border-bottom: 3px solid #111; background: #f7f7f5; border-radius: 6px 6px 0 0; color: #111; padding: 0; } .st-mansett-box:focus { outline: none; background: #fff5cc; } .st-mansett-box.is-ok { background: #d8f0df; border-bottom-color: #1f8a4c; } .st-mansett-box.is-bad { background: #f7dcd8; border-bottom-color: #c0392b; } /* --- Sudoku --- */ .st-sudoku-grid { display: grid; grid-template-columns: repeat(9, 1fr); gap: 0; width: min(440px, 100%); margin: 0 auto; aspect-ratio: 1; border: 3px solid #111; border-radius: 4px; overflow: hidden; } .st-sudoku-cell { display: flex; align-items: center; justify-content: center; border: 1px solid #d7d7d2; font-family: var(--st-font-sans); font-size: clamp(1rem, 3.4vw, 1.5rem); color: #2b62b8; cursor: pointer; user-select: none; background: #fff; } .st-sudoku-cell.is-fixed { color: #111; font-weight: 700; background: #fafafa; cursor: default; } .st-sudoku-cell.br { border-right: 2.5px solid #111; } .st-sudoku-cell.bb { border-bottom: 2.5px solid #111; } .st-sudoku-cell.is-sel { background: #fff2b8; } .st-sudoku-cell.is-same { background: #eef1f9; } .st-sudoku-cell.is-sel.is-same { background: #fff2b8; } .st-sudoku-cell.is-bad { color: #c0392b; background: #f9e2de; } .st-sudoku-pad { display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; width: min(440px, 100%); margin: 16px auto 0; } .st-sudoku-key { aspect-ratio: 1; border: 1px solid #d5d5d0; background: #fff; border-radius: 8px; cursor: pointer; font-family: var(--st-font-sans); font-size: 1.05rem; font-weight: 600; color: #222; } .st-sudoku-key:hover { background: #f4f4f2; } .st-sudoku-key--erase { color: #c0392b; } /* --- Kelime Avı --- */ .st-kelime-wrap { display: flex; gap: 26px; flex-wrap: wrap; align-items: flex-start; } .st-kelime-grid { display: grid; grid-template-columns: repeat(var(--n, 10), 1fr); gap: 3px; width: min(460px, 100%); flex: 1 1 320px; touch-action: none; } .st-kelime-cell { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; background: #f4f4f2; border-radius: 5px; font-family: var(--st-font-sans); font-weight: 600; font-size: clamp(.7rem, 2.4vw, 1rem); color: #333; user-select: none; text-transform: uppercase; } .st-kelime-cell.is-sel { background: #ffe08a; color: #111; } .st-kelime-cell.is-found { background: #cdead6; color: #1f8a4c; } .st-kelime-words { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; min-width: 130px; } .st-kelime-word { font-family: var(--st-font-sans); font-size: .98rem; color: #333; letter-spacing: .04em; } .st-kelime-word.is-found { color: #1f8a4c; text-decoration: line-through; opacity: .7; } /* --- Haber Testi --- */ .st-haber-q { font-family: var(--st-font-display); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.7rem); color: #111; line-height: 1.35; margin: 0 0 6px; } .st-haber-ask { font-family: var(--st-font-sans); font-size: .95rem; color: #6b6b6b; margin: 0 0 16px; } .st-haber-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; } .st-haber-opt { font-family: var(--st-font-sans); font-size: 1rem; font-weight: 600; text-align: left; padding: 14px 18px; border: 1px solid #d5d5d0; border-radius: 10px; background: #fff; color: #222; cursor: pointer; transition: background .12s ease, border-color .12s ease; } .st-haber-opt:hover:not(:disabled) { background: #f4f4f2; border-color: #bdbdb8; } .st-haber-opt:disabled { cursor: default; } .st-haber-opt.is-ok { background: #d8f0df; border-color: #1f8a4c; color: #146c39; } .st-haber-opt.is-bad { background: #f7dcd8; border-color: #c0392b; color: #a5281c; } .st-haber-result { font-family: var(--st-font-display); font-size: 1.4rem; color: #111; } /* --- Beş Harf (Wordle mekaniği) --- */ .st-besharf-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 18px; } .st-besharf-grid { display: grid; grid-template-rows: repeat(6, 1fr); gap: 6px; width: min(330px, 100%); margin: 0 auto; } .st-besharf-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; } .st-besharf-tile { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border: 2px solid #e0e0dc; border-radius: 6px; background: #fff; font-family: var(--st-font-display); font-weight: 800; font-size: clamp(1.3rem, 6vw, 1.9rem); line-height: 1; color: #111; text-transform: uppercase; user-select: none; transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease; } .st-besharf-tile.is-dolu { border-color: #b9b9b3; transform: scale(1.04); } .st-besharf-tile.is-dogru { background: #1f8a4c; border-color: #1f8a4c; color: #fff; } .st-besharf-tile.is-yer { background: #d9b24c; border-color: #d9b24c; color: #fff; } .st-besharf-tile.is-yok { background: #8e8e88; border-color: #8e8e88; color: #fff; } @keyframes st-besharf-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(4px); } } .st-besharf-row.is-shake { animation: st-besharf-shake .32s ease; } .st-besharf-keys { margin: 20px auto 0; width: min(520px, 100%); display: flex; flex-direction: column; gap: 6px; } .st-besharf-krow { display: flex; justify-content: center; gap: 5px; } .st-besharf-key { flex: 1 1 0; min-width: 0; height: 52px; padding: 0 2px; border: 1px solid #d5d5d0; border-radius: 7px; background: #fff; color: #222; font-family: var(--st-font-sans); font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .12s ease, border-color .12s ease, color .12s ease; } .st-besharf-key:hover { background: #f4f4f2; } .st-besharf-key:active { transform: translateY(1px); } .st-besharf-key--wide { flex: 1.6 1 0; font-size: .9rem; } .st-besharf-key.is-dogru { background: #1f8a4c; border-color: #1f8a4c; color: #fff; } .st-besharf-key.is-yer { background: #d9b24c; border-color: #d9b24c; color: #fff; } .st-besharf-key.is-yok { background: #e8e8e4; border-color: #ddddd8; color: #9a9a94; } @media (prefers-reduced-motion: reduce) { .st-besharf-row.is-shake { animation: none; } .st-besharf-tile { transition: none; } } @media (max-width: 860px) { .st-games-strip { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 560px) { .st-games-strip { grid-template-columns: 1fr; gap: 12px; } .st-game-ic { width: 52px; height: 52px; border-radius: 14px; } .st-haber-opts { grid-template-columns: 1fr; } .st-kelime-wrap { gap: 16px; } .st-besharf-grid { width: min(300px, 92%); gap: 5px; } .st-besharf-row { gap: 5px; } .st-besharf-keys { gap: 5px; } .st-besharf-krow { gap: 4px; } .st-besharf-key { height: 46px; font-size: .92rem; border-radius: 6px; } .st-besharf-key--wide { font-size: .78rem; } .st-kelime-words { flex-direction: row; flex-wrap: wrap; gap: 6px 14px; } } /* Oyun logoları anasayfa şeridi (anchor kartlar) */ a.st-game-card { text-decoration: none; color: inherit; } a.st-game-card:hover { text-decoration: none; } .st-games--strip { margin: 44px auto; } /* ========================================================= Keşfet — bülten + arşiv rötuşları ========================================================= */ /* "Son güncelleme" etiketi — ortalı, iki yanı ince çizgili */ .st-kesfet-updated { display: flex; align-items: center; gap: 16px; justify-content: center; max-width: 520px; margin: 6px auto 34px; } .st-kesfet-updated::before, .st-kesfet-updated::after { content: ""; flex: 1; height: 1px; background: var(--st-rule); } /* Öne çıkan içerik — hafif kart */ .st-kesfet-item.is-featured { background: #faf9f6; border: 1px solid var(--st-rule); border-top: 3px solid var(--st-name); border-radius: 14px; padding: 28px 30px 30px; margin-bottom: 10px; } .st-kesfet-item.is-featured .st-kesfet-num { top: 22px; right: 24px; } .st-kesfet-item.is-featured + .st-kesfet-item { border-top: 2px solid var(--st-ink); } /* Meta satırı biraz nefes alsın */ .st-kesfet-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 4px; margin: 0 0 16px; } /* Etiketler — yumuşak çipler */ .st-kesfet-tags { gap: 8px 8px; margin-top: 18px; } .st-kesfet-tag { background: #f2f1ee; border-radius: 999px; padding: 4px 12px; color: var(--st-muted); font-size: 11px; letter-spacing: .03em; line-height: 1.6; } .st-kesfet-tag::before { content: "#"; color: var(--st-name); margin-right: 1px; opacity: .7; } /* Arşiv görünümü bildirimi */ .st-kesfet-archive-note { font-family: var(--st-font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--st-muted); background: #faf9f6; border: 1px solid var(--st-rule); border-left: 3px solid var(--st-name); border-radius: 10px; padding: 12px 16px; margin: 0 0 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .st-kesfet-archive-note a { color: var(--st-name); text-decoration: none; font-weight: 700; } .st-kesfet-archive-note a:hover { text-decoration: underline; text-underline-offset: 3px; } /* Arşiv — "Önceki bültenler" liste görünümü */ .st-kesfet-archive { margin: 48px 0 10px; padding-top: 26px; border-top: 2px solid var(--st-ink); } .st-kesfet-archive-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin: 0 0 6px; } .st-kesfet-archive-title { font-family: var(--st-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--st-muted); margin: 0; } .st-kesfet-archive-list { list-style: none; margin: 0; padding: 0; } .st-kesfet-archive-item { border-bottom: 1px solid var(--st-rule); } .st-kesfet-arc-row { display: flex; align-items: center; gap: 18px; padding: 22px 4px; text-decoration: none; color: inherit; transition: opacity .15s ease; } a.st-kesfet-arc-row:hover { opacity: 1; } .st-kesfet-arc-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .st-kesfet-arc-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; font-size: clamp(1.25rem, 2.2vw, 1.6rem); color: var(--st-ink); } a.st-kesfet-arc-row:hover .st-kesfet-arc-title { color: var(--st-name); } .st-kesfet-arc-sub { font-family: var(--st-font-sans); font-size: .95rem; color: var(--st-muted); letter-spacing: .01em; } .st-kesfet-arc-go { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 1px solid var(--st-rule); color: var(--st-ink); transition: background .15s ease, color .15s ease, border-color .15s ease, transform .12s ease; } a.st-kesfet-arc-row:hover .st-kesfet-arc-go { background: var(--st-name); border-color: var(--st-name); color: #fff; transform: translateX(2px); } .st-kesfet-archive-item.is-active .st-kesfet-arc-title { color: var(--st-name); } .st-kesfet-archive-item.is-active .st-kesfet-arc-go { background: var(--st-name); border-color: var(--st-name); color: #fff; } @media (max-width: 520px) { .st-kesfet-item.is-featured { padding: 22px 18px 24px; } .st-kesfet-arc-row { padding: 18px 2px; gap: 12px; } .st-kesfet-arc-go { width: 38px; height: 38px; } } /* ============================================================ * Yazarlar dizini — arama + A–Z indeks + öne çıkanlar * ============================================================ */ .st-yz { max-width: var(--st-w-content, 1240px); margin: 0 auto; } .st-yz-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: 6px 0 6px; padding-bottom: 18px; border-bottom: 3px solid var(--st-ink); } .st-yz-title { font-family: var(--st-font-display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(2rem, 5vw, 3.2rem); margin: 0; color: var(--st-ink); } .st-yz-count { font-family: var(--st-font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--st-muted); margin: 0; } .st-yz-intro { font-family: var(--st-font-body); font-size: 1.1rem; line-height: 1.6; color: var(--st-ink); margin: 22px 0 0; max-width: 70ch; } /* Arama */ .st-yz-search { position: relative; display: flex; align-items: center; margin: 28px 0 18px; max-width: 460px; } .st-yz-search-ic { position: absolute; left: 16px; color: var(--st-muted); pointer-events: none; } .st-yz-search-input { width: 100%; font-family: var(--st-font-sans); font-size: 1rem; color: var(--st-ink); padding: 14px 44px 14px 46px; border: 1px solid var(--st-rule); border-radius: 999px; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .st-yz-search-input:focus { outline: none; border-color: var(--st-ink); box-shadow: 0 0 0 3px rgba(0,0,0,.04); } .st-yz-search-clear { position: absolute; right: 10px; width: 28px; height: 28px; border: 0; border-radius: 50%; background: #f0f0ee; color: var(--st-ink); font-size: 18px; line-height: 1; cursor: pointer; } .st-yz-search-clear:hover { background: #e4e4e0; } /* A–Z indeks */ .st-yz-az { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 34px; padding-bottom: 22px; border-bottom: 1px solid var(--st-rule); } .st-yz-az-link { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; padding: 0 6px; font-family: var(--st-font-mono); font-size: 13px; font-weight: 700; border-radius: 7px; color: var(--st-ink); text-decoration: none; transition: background .12s ease, color .12s ease; } a.st-yz-az-link:hover { background: var(--st-name); color: #fff; } .st-yz-az-link.is-off { color: var(--st-rule); pointer-events: none; } /* Bölüm başlıkları */ .st-yz-sub { font-family: var(--st-font-mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--st-muted); margin: 0 0 18px; } /* Öne çıkanlar */ .st-yz-featured { margin: 0 0 46px; } .st-yz-feat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px 18px; } .st-yz-feat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; text-decoration: none; } .st-yz-feat-av img, .st-yz-feat-av .avatar { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; display: block; box-shadow: 0 4px 16px rgba(0,0,0,.12); transition: transform .15s ease, box-shadow .15s ease; } .st-yz-feat:hover .st-yz-feat-av img, .st-yz-feat:hover .st-yz-feat-av .avatar { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0,0,0,.18); } .st-yz-feat-name { font-family: var(--st-font-display); font-weight: 800; font-size: 1.12rem; line-height: 1.2; color: var(--st-ink); } .st-yz-feat:hover .st-yz-feat-name { color: var(--st-name); } .st-yz-feat-count { font-family: var(--st-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--st-muted); } /* Dizin */ .st-yz-group { margin: 0 0 8px; } .st-yz-letter { font-family: var(--st-font-display); font-weight: 800; font-size: 1.6rem; color: var(--st-name); margin: 22px 0 4px; padding-bottom: 8px; border-bottom: 2px solid var(--st-rule); } .st-yz-rows { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 40px; } .st-yz-row { border-bottom: 1px solid var(--st-rule); } .st-yz-row-link { display: flex; align-items: center; gap: 14px; padding: 14px 2px; text-decoration: none; color: inherit; } .st-yz-row-av img, .st-yz-row-av .avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; flex: 0 0 auto; } .st-yz-row-name { flex: 1; min-width: 0; font-family: var(--st-font-display); font-weight: 700; font-size: 1.08rem; color: var(--st-ink); letter-spacing: -0.01em; } .st-yz-row-link:hover .st-yz-row-name { color: var(--st-name); } .st-yz-row-count { font-family: var(--st-font-mono); font-size: 11px; color: var(--st-muted); background: #f2f1ee; border-radius: 999px; padding: 3px 10px; flex: 0 0 auto; } .st-yz-empty, .st-yz-empty-all { font-family: var(--st-font-body); color: var(--st-muted); padding: 24px 0; } @media (max-width: 900px) { .st-yz-feat-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 680px) { .st-yz-rows { grid-template-columns: 1fr; } .st-yz-feat-grid { grid-template-columns: repeat(2, 1fr); } .st-yz-feat-av img, .st-yz-feat-av .avatar { width: 88px; height: 88px; } } /* ============================================================ OYUNLAR — SON BASKI kartı inc/sonbaski.php · inc/games.php Şerit sütunları yukarıda (8110) tanımlı; burada tekrar edilmiyordu, 210px'lik eski değer 6 kartı fazla sıkıştırıyordu. ============================================================ */ .st-game-card--feature .st-game-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; letter-spacing: .01em; } .st-game-badge { font-family: var(--st-font-sans); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; background: var(--st-name); color: #fff; line-height: 1.5; } .st-game-card--feature:hover .st-game-ic { transform: rotate(-2deg); } .st-game-card--feature .st-game-ic { transition: transform .15s ease; } /* "Yazılar" arşivi — başlık altındaki sayaç (sojo-yazilar.php) */ .st-archive-count { margin: 6px 0 0; font-family: var(--st-font-mono); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--st-muted); } /* Oyunlar hub'ı — SON BASKI kartındaki kapak görseli */ .st-game-card--feature.has-shot { position: relative; overflow: hidden; isolation: isolate; } .st-game-card--feature .st-game-shot { position: absolute; inset: 0 0 0 auto; width: 46%; z-index: -1; display: block; -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%); mask-image: linear-gradient(90deg, transparent, #000 45%); opacity: .55; pointer-events: none; } .st-game-card--feature .st-game-shot img { width: 100%; height: 100%; object-fit: cover; object-position: right center; display: block; } @media (max-width: 700px) { .st-game-card--feature .st-game-shot { width: 58%; opacity: .4; } }