/* ==========================================================================
Trkafem — app.css (single stylesheet; all colors are CSS variables)
Max side padding across the site: 10px (containers, cards, boxes).
========================================================================== */
/* ---- 1) TOKENS ----------------------------------------------------------- */
:root {
--brand: #D8352F;
--brand-strong: #B62823;
--brand-soft: #FBE9E8;
--brand-contrast: #ffffff;
--related-label: #B62823;
--page: #ffffff;
--surface-1: #ffffff;
--surface-2: #f5f6f8;
--surface-3: #eaecef;
--ink: #16181d;
--ink-2: #494d55;
--ink-3: #6b7079;
--line: rgba(0, 0, 0, .10);
--line-strong: rgba(0, 0, 0, .18);
/* Footer + mobile chrome (header/bottom-bar on mobile) are dark */
--footer-bg: #14161a;
--footer-ink: #e7e8ea;
--footer-ink-2: rgba(231, 232, 234, .62);
--footer-line: rgba(255, 255, 255, .10);
--chrome-bg: #14161a; /* mobile header + bottom bar background */
--chrome-ink: #e7e8ea;
--chrome-ink-2: rgba(231, 232, 234, .6);
--chrome-line: rgba(255, 255, 255, .12);
--danger: #D8352F;
--online: #22c55e; /* "user is online" indicator (avatar ring + pulse) */
--success: #1f9e6f;
--font-sans: "Merriweather", Georgia, "Times New Roman", serif;
--font-ui: "Spline Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
--font-serif: Georgia, "Times New Roman", serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--container-max: 1000px;
--pad: 10px; /* the one horizontal padding, max 10px */
--radius: 10px;
--radius-card: 5px;
--radius-sm: 7px;
--header-h: 60px;
--sp-1: 4px; --sp-2: 8px; --sp-3: 10px; --sp-4: 14px;
--sp-5: 18px; --sp-6: 24px; --sp-7: 36px; --sp-8: 48px;
--card-gap: 12px;
color-scheme: light;
}
/* ---- 2) DARK THEME ------------------------------------------------------- */
[data-theme="dark"] {
--page: #0f1115;
--surface-1: #171a1f;
--surface-2: #1d2127;
--surface-3: #23272e;
--ink: #f2f3f5;
--ink-2: #b8bcc4;
--ink-3: #868b94;
--line: rgba(255, 255, 255, .10);
--line-strong: rgba(255, 255, 255, .18);
--brand-soft: #2a1615;
--footer-bg: #0b0d10;
--chrome-bg: #0b0d10;
--related-label: #F09595;
color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not([data-theme="dark"]) {
--page: #0f1115; --surface-1: #171a1f; --surface-2: #1d2127; --surface-3: #23272e;
--ink: #f2f3f5; --ink-2: #b8bcc4; --ink-3: #868b94;
--line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.18);
--brand-soft: #2a1615; --footer-bg: #0b0d10; --chrome-bg: #0b0d10; --related-label: #F09595; color-scheme: dark;
}
}
/* ---- 3) RESET & BASE ----------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}
body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.6;
color: var(--ink); background: var(--page); -webkit-font-smoothing: antialiased; }
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--brand); }
h1, h2, h3, h4 { margin: 0 0 var(--sp-3); line-height: 1.25; font-weight: 700; }
p { margin: 0 0 var(--sp-3); }
button { font: inherit; cursor: pointer; }
img[loading="lazy"] { opacity: 0; transition: opacity .35s ease; }
img[loading="lazy"].is-loaded, img[loading="lazy"].is-error { opacity: 1; }
@media (prefers-reduced-motion: reduce) { img[loading="lazy"] { opacity: 1; transition: none; } }
/* ---- 4) LAYOUT (single width, 10px side padding) ------------------------- */
.container { width: 100%; max-width: var(--container-max); margin-inline: auto; padding-inline: var(--pad); }
.site-main { padding-block: var(--sp-5); min-height: 60vh; }
/* ---- 5) HEADER ----------------------------------------------------------- */
.site-header {
position: sticky; top: 0; z-index: 50;
background: var(--surface-1); border-bottom: 1px solid var(--line);
box-shadow: 0 1px 3px rgba(0,0,0,.06), 0 4px 12px rgba(0,0,0,.04);
transition: box-shadow .2s ease, background .2s ease;
}
.site-header__bar { display: flex; align-items: center; gap: var(--sp-3); height: var(--header-h); transition: height .2s ease; }
.site-header.is-scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.10), 0 8px 24px rgba(0,0,0,.06); }
.site-header.is-scrolled .site-header__bar { height: 50px; }
.site-header.is-scrolled .site-logo { font-size: 18px; }
/* 700, not 800: Spline Sans ships no 800 weight, so an 800 here was being
faked by the browser (synthetic bold — thicker but mushy). The real 700 is
cleaner. Merriweather DOES have an 800 and still uses it for headlines. */
.site-logo { font-size: 20px; font-weight: 700; white-space: nowrap; letter-spacing: .02em;
font-family: var(--font-ui);
display: inline-flex; align-items: baseline; flex-shrink: 0; transition: font-size .2s ease; }
.site-logo__mark { color: var(--ink); }
.site-logo__accent { color: var(--brand); }
/* Inline desktop search sits between logo and actions */
.site-search { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; max-width: 460px; }
.site-search__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.site-search__icon { position: absolute; left: 12px; color: var(--ink-3); font-size: 18px; pointer-events: none; }
.site-search__input { width: 100%; height: 40px; padding: 0 14px 0 38px; border: 1px solid var(--line);
border-radius: 20px; background: var(--surface-2); color: var(--ink); font-size: 14px; }
.site-search__input::placeholder { color: var(--ink-3); }
.site-search__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
/* Actions pinned to the right */
.site-header__actions { display: flex; align-items: center; gap: var(--sp-2); flex-shrink: 0; margin-left: auto; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px;
border: none; border-radius: 50%; background: transparent; color: var(--ink-2); font-size: 23px; }
.icon-btn:hover { background: var(--surface-2); color: var(--ink); }
.site-header__search-toggle { display: none; }
/* Category menu panel (desktop: slides down from header) */
.site-menu-panel { overflow: hidden; max-height: 0; background: var(--surface-1);
border-bottom: 1px solid transparent; transition: max-height .28s ease, border-color .28s ease; }
.site-menu-panel.is-open { max-height: 70vh; border-bottom-color: var(--line); }
.site-menu-panel__inner { padding-block: var(--sp-3); }
.site-menu-panel__nav { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--sp-2); }
.site-menu-panel__link { display: flex; align-items: center; justify-content: space-between; padding: 10px;
border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font-size: 15px; font-weight: 600;
transition: background .15s ease, color .15s ease; }
.site-menu-panel__link:hover { background: var(--brand); color: var(--brand-contrast); }
.site-menu-panel__arrow { font-size: 17px; opacity: .5; transition: opacity .15s ease, transform .15s ease; }
.site-menu-panel__link:hover .site-menu-panel__arrow { opacity: 1; transform: translateX(2px); }
/* Desktop search panel (slides down from header) */
.site-search-panel { overflow: hidden; max-height: 0; background: var(--surface-1);
border-bottom: 1px solid transparent; transition: max-height .26s ease, border-color .26s ease; }
.site-search-panel.is-open { max-height: 80px; border-bottom-color: var(--line); }
.site-search-panel__form { display: flex; align-items: center; gap: var(--sp-2); padding-block: var(--sp-2); }
.site-search-panel__icon { color: var(--ink-3); font-size: 18px; flex-shrink: 0; }
.site-search-panel__input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 1px solid var(--line);
border-radius: 10px; background: var(--surface-2); color: var(--ink); font-size: 16px; }
.site-search-panel__input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.site-search-panel__close { border: none; background: transparent; color: var(--ink-2); font-size: 20px; padding: 6px; flex-shrink: 0; }
.site-menu-scrim { position: fixed; inset: 0; z-index: 40; border: none; background: rgba(0,0,0,.35); }
/* ---- Section heading ----------------------------------------------------- */
.section-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); }
.section-head__title { font-size: 20px; }
.section-head::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* ---- News cards ---------------------------------------------------------- */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--card-gap); }
.news-card { background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; display: block; }
.news-card:hover { border-color: var(--line-strong); }
.news-card__media { aspect-ratio: 16 / 10; background: var(--surface-3); overflow: hidden; }
.news-card__media img { width: 100%; height: 100%; object-fit: cover; }
.news-card__body { padding: var(--pad); }
.news-card__eyebrow { color: var(--brand); font-size: 12px; font-weight: 600; }
.news-card__title { font-size: 16px; font-weight: 700; line-height: 1.35; margin: var(--sp-1) 0 0; }
.news-card__title--hero { font-size: 24px; }
.news-card__meta { margin: var(--sp-2) 0 0; font-size: 12px; color: var(--ink-3); }
.news-card--hero { margin-bottom: var(--card-gap); }
.news-card--hero .news-card__media { aspect-ratio: 21 / 9; }
/* ---- Footer (always dark) ------------------------------------------------ */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); margin-top: var(--sp-7); padding-block: var(--sp-5); }
.site-footer a { color: var(--footer-ink-2); }
.site-footer a:hover { color: var(--footer-ink); }
.site-footer__top { display: grid; grid-template-columns: 1.8fr 1fr 1fr; gap: var(--sp-4); }
.site-footer .site-logo__mark { color: var(--footer-ink); }
.site-footer__tagline { font-size: 13px; color: var(--footer-ink-2); margin: var(--sp-3) 0; }
.site-footer__social { display: flex; gap: var(--sp-1); }
.site-footer__social .icon-btn { color: var(--footer-ink-2); }
.site-footer__social .icon-btn:hover { color: var(--footer-ink); background: rgba(255,255,255,.08); }
.site-footer__col { display: flex; flex-direction: column; gap: var(--sp-2); }
.site-footer__col a { font-size: 14px; }
.site-footer__heading { font-size: 13px; font-weight: 700; color: var(--footer-ink); text-transform: uppercase; letter-spacing: .04em; margin-bottom: var(--sp-1); }
/* App section: full-width single row (text left, buttons right) */
.site-footer__app { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
flex-wrap: wrap; margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--footer-line); }
.site-footer__app .site-footer__heading { margin-bottom: 2px; }
.site-footer__app-desc { font-size: 13px; color: var(--footer-ink-2); margin: 0; }
.site-footer__app-btns { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.store-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 14px; border: 1px solid var(--footer-line);
border-radius: var(--radius-sm); font-size: 12px; color: var(--footer-ink-2); background: transparent; white-space: nowrap; }
.store-btn:hover { color: var(--footer-ink); border-color: rgba(255,255,255,.25); }
.store-btn--accent { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.store-btn--accent:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--brand-contrast); }
.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-3);
margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px solid var(--footer-line); font-size: 12px; color: var(--footer-ink-2); }
.site-footer__legal { display: flex; gap: var(--sp-4); }
/* Simple layout: brand+social row, two-ended link row (with · separators), copyright. */
.site-footer__simple-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.site-footer__simple-links { display: flex; align-items: flex-start; justify-content: space-between;
flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); margin-top: var(--sp-4);
padding-top: var(--sp-3); border-top: 1px solid var(--footer-line); }
.site-footer__inline-links { display: flex; flex-wrap: wrap; align-items: center; }
.site-footer__inline-links a { font-size: 14px; position: relative; padding: 2px 0; }
/* "·" separator between items (not before the first). */
.site-footer__inline-links a + a::before { content: "·"; color: var(--footer-line);
margin: 0 var(--sp-2); }
.site-footer__inline-links--end { justify-content: flex-end; text-align: right; }
.site-footer__simple-copy { margin-top: var(--sp-3); font-size: 12px; color: var(--footer-ink-2); }
@media (max-width: 720px) {
.site-footer__top { grid-template-columns: 1fr 1fr; }
.site-footer__brand { grid-column: 1 / -1; }
.site-footer__app { flex-direction: column; align-items: flex-start; }
.site-footer__app-btns { width: 100%; }
.site-footer__app-btns .store-btn { flex: 1; }
.site-footer__simple-links { flex-direction: column; gap: var(--sp-3); }
.site-footer__inline-links--end { justify-content: flex-start; text-align: left; }
}
/* ---- Buttons + forms ----------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 16px;
border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-1);
color: var(--ink); font-size: 14px; font-weight: 600; }
.btn:hover { border-color: var(--brand); color: var(--brand); }
.btn--accent { background: var(--brand); border-color: var(--brand); color: var(--brand-contrast); }
.btn--accent:hover { background: var(--brand-strong); border-color: var(--brand-strong); color: var(--brand-contrast); }
.btn--block { width: 100%; }
.form-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: var(--sp-3); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.form-input { height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
background: var(--surface-1); color: var(--ink); font-size: 16px; width: 100%; }
.form-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.form-error { font-size: 12px; color: var(--danger); margin-top: 2px; }
.auth-notice { background: var(--brand-soft); color: var(--brand-strong); border-radius: var(--radius-sm);
padding: 10px 12px; margin-bottom: var(--sp-3); font-size: 13px; line-height: 1.5; }
.auth-notice p { margin: 0; }
.auth-notice p + p { margin-top: 6px; }
/* ---- Auth modal ---------------------------------------------------------- */
.auth-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: var(--pad); }
.auth-modal.is-open { display: flex; }
.auth-modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.auth-modal__dialog { position: relative; width: 100%; max-width: 440px; background: var(--surface-1);
border-radius: 14px; padding: var(--sp-5); box-shadow: 0 20px 60px rgba(0,0,0,.25);
max-height: 92vh; overflow-y: auto; }
.auth-modal__close { position: absolute; top: 10px; right: 10px; }
.auth-modal__tabs { display: flex; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.auth-modal__tab { flex: 1; padding: 10px; border: none; border-bottom: 2px solid var(--line);
background: transparent; color: var(--ink-3); font-weight: 600; font-size: 15px; }
.auth-modal__tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.auth-form.is-hidden { display: none; }
/* Register tab: brand welcome instead of a plain title */
/* Modal body keeps a stable height so switching tabs doesn't jump */
.auth-modal__body { position: relative; min-height: 430px; }
.auth-form { transition: opacity .2s ease; }
/* Remember me + forgot password row */
.auth-form__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.checkbox { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--ink-2); cursor: pointer; }
.checkbox input { width: 16px; height: 16px; accent-color: var(--brand); }
.auth-form__link { font-size: 13px; color: var(--brand); }
.auth-form__link:hover { color: var(--brand-strong); text-decoration: underline; }
/* "veya" divider */
.auth-divider { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-3) 0; color: var(--ink-3); font-size: 12px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
/* Social sign-in buttons (visual only for now) */
.social-auth { display: flex; flex-direction: column; gap: var(--sp-2); }
.social-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px;
border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface-1);
color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; }
.social-btn i { font-size: 18px; }
.social-btn--google i { color: #db4437; }
.social-btn--facebook i { color: #1877f2; }
.social-btn:disabled { opacity: .8; cursor: default; }
.social-btn:not(:disabled):hover { border-color: var(--brand); }
/* Gender radios — compact, single row, colored on select (no caption) */
.gender-options { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-bottom: var(--sp-3); }
.gender-option { display: flex; align-items: center; justify-content: center; gap: 6px;
padding: 9px 6px; border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm);
cursor: pointer; font-size: 13px; color: var(--ink-2); transition: border-color .15s, background .15s, color .15s; }
.gender-option i { font-size: 17px; }
.gender-option input { position: absolute; opacity: 0; width: 0; height: 0; }
.gender-option--male:has(input:checked) { border-color: #4a90d9; background: #e7f0fb; color: #2f6fb0; }
.gender-option--female:has(input:checked) { border-color: #e0559b; background: #fbe7f1; color: #b23c7c; }
.gender-option--other:has(input:checked) { border-color: #8a9099; background: #eceef1; color: #565b63; }
.gender-option:focus-within { box-shadow: 0 0 0 3px var(--brand-soft); }
/* ---- User menu ----------------------------------------------------------- */
/* display:flex (not the default block) so the trigger button inside is a flex
item rather than an inline-level box sitting on a text baseline. As a block,
the div picked up the line-box descender gap below the button, making it
taller than its 36/42px sibling icons — and `align-items:center` on the
header row then centred that taller box, nudging the avatar visibly UP. */
.user-menu { position: relative; display: flex; align-items: center; }
/* The avatar occupies the same 42px slot as the .icon-btn glyphs, but the
IMAGE itself stays small (32px) so it reads as an avatar, not a big blob.
A green ring marks the user as online, with a soft pulse radiating from it.
overflow is NOT hidden here — the pulse needs to escape the box. */
.user-menu__trigger {
position: relative;
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; padding: 0;
border: none; background: transparent;
border-radius: 50%; cursor: pointer; line-height: 0;
}
.user-menu__avatar {
width: 32px; height: 32px; border-radius: 50%;
display: block; object-fit: cover;
background: var(--surface-2);
/* The green "online" ring. box-shadow (not border) so it doesn't change
the image's box size. */
box-shadow: 0 0 0 2px var(--online, #22c55e);
transition: transform .15s;
}
.user-menu__trigger:hover .user-menu__avatar { transform: scale(1.06); }
.user-menu__trigger:focus-visible { outline: none; }
.user-menu__trigger:focus-visible .user-menu__avatar {
box-shadow: 0 0 0 2px var(--online, #22c55e), 0 0 0 5px var(--brand-soft);
}
/* Radiating "online" pulse — a ring that expands and fades, forever. It sits
behind the avatar and is purely decorative. */
.user-menu__trigger::after {
content: "";
position: absolute; top: 50%; left: 50%;
width: 32px; height: 32px; margin: -16px 0 0 -16px;
border-radius: 50%;
border: 2px solid var(--online, #22c55e);
opacity: 0;
animation: online-pulse 2.4s ease-out infinite;
pointer-events: none;
}
@keyframes online-pulse {
0% { transform: scale(1); opacity: .55; }
70% { transform: scale(1.5); opacity: 0; }
100% { transform: scale(1.5); opacity: 0; }
}
/* No reduced-motion override needed here: this stylesheet already has a global
`prefers-reduced-motion` rule that kills every animation with !important. */
.user-menu__dropdown { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; background: var(--surface-1);
border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 8px; display: none; z-index: 60; }
.user-menu.is-open .user-menu__dropdown { display: block; }
.user-menu__name { display: block; padding: 8px 10px; font-weight: 700; font-size: 14px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.user-menu__item { display: block; width: 100%; text-align: left; padding: 9px 10px; border: none; background: transparent;
color: var(--ink-2); font-size: 14px; border-radius: 6px; cursor: pointer; }
.user-menu__item:hover { background: var(--surface-2); color: var(--ink); }
.user-menu__item--danger { color: var(--danger); }
.user-menu__logout { margin: 0; }
/* ---- Bottom bar + bottom sheets (mobile) --------------------------------- */
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: none;
background: var(--chrome-bg); border-top: 1px solid var(--chrome-line);
box-shadow: 0 -2px 12px rgba(0,0,0,.18); padding-bottom: env(safe-area-inset-bottom, 0); }
.bottom-bar__item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
padding: 7px 0; border: none; background: transparent; color: var(--chrome-ink-2); font-size: 11px; font-weight: 500;
cursor: pointer; text-decoration: none; min-height: 54px; position: relative; }
.bottom-bar__item i { font-size: 22px; }
.bottom-bar__item.is-active { color: #fff; }
.bottom-bar__item:hover { color: #fff; }
/* Separators between items */
.bottom-bar__item + .bottom-bar__item::before { content: ""; position: absolute; left: 0; top: 50%;
transform: translateY(-50%); width: 1px; height: 26px; background: var(--chrome-line); }
/* Search modal (centered, glowing border, dim background) */
.search-modal { position: fixed; inset: 0; z-index: 120; display: none; align-items: flex-start; justify-content: center; padding: 80px var(--pad) var(--pad); }
.search-modal.is-open { display: flex; }
.search-modal__scrim { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.search-modal__dialog { position: relative; width: 100%; max-width: 560px; }
.search-modal__form { display: flex; align-items: center; gap: var(--sp-2); background: var(--surface-1);
border: 2px solid var(--brand); border-radius: 14px; padding: 6px 6px 6px 16px;
box-shadow: 0 0 0 4px var(--brand-soft), 0 20px 50px rgba(0,0,0,.35); }
.search-modal__icon { color: var(--brand); font-size: 22px; flex-shrink: 0; }
.search-modal__input { flex: 1; min-width: 0; height: 52px; border: none; background: transparent;
color: var(--ink); font-size: 18px; }
.search-modal__input:focus { outline: none; }
.search-modal__input::placeholder { color: var(--ink-3); }
.search-modal__close { width: 44px; height: 44px; border: none; border-radius: 10px; background: var(--surface-2);
color: var(--ink-2); font-size: 20px; flex-shrink: 0; cursor: pointer; }
.search-modal__close:hover { background: var(--surface-3); color: var(--ink); }
/* Sidebar (slides in from the left via the header menu icon) */
.sidebar { position: fixed; inset: 0; z-index: 115; visibility: hidden; }
.sidebar.is-open { visibility: visible; }
.sidebar__scrim { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; transition: opacity .2s ease; border: none; }
.sidebar.is-open .sidebar__scrim { opacity: 1; }
.sidebar__panel { position: absolute; inset-block: 0; inset-inline-start: 0; width: min(82vw, 320px);
background: var(--surface-1); transform: translateX(-100%); transition: transform .24s ease;
display: flex; flex-direction: column; padding: var(--pad); overflow-y: auto; }
.sidebar.is-open .sidebar__panel { transform: translateX(0); }
.sidebar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.sidebar__label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); padding: 4px 6px; }
/* gap: 0 — rows are separated by the hairline border on .sidebar__link now;
a gap on top of that would double the spacing and break the divider line. */
.sidebar__nav { display: flex; flex-direction: column; gap: 0; }
.sidebar__link { display: flex; align-items: center; justify-content: space-between; gap: 10px;
padding: 13px 10px;
border-radius: var(--radius-sm); color: var(--ink); font-size: 15px; font-weight: 600;
/* A hairline between rows so the list reads as separate entries. */
border-bottom: 1px solid var(--line); }
.sidebar__link:last-of-type { border-bottom: 0; }
.sidebar__link:hover { background: var(--surface-2); color: var(--brand); }
/* Left side = icon + label; the chevron stays on the right. */
.sidebar__link-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sidebar__icon { flex: none; font-size: 18px; color: var(--ink-3); }
.sidebar__link:hover .sidebar__icon { color: var(--brand); }
.sidebar__link i { color: var(--ink-3); font-size: 16px; }
.sidebar__link:hover i { color: var(--brand); }
/* Auth pair — sits under the menu, side by side. */
.sidebar__auth { display: flex; gap: 8px; margin-top: var(--sp-4); }
.sidebar__auth-btn { flex: 1 1 0; justify-content: center; gap: 6px; }
.sidebar__auth-btn i { font-size: 17px; }
/* Category sheet (rises from the bottom bar; the bar stays visible above it) */
.cat-sheet { position: fixed; inset: 0; z-index: 85; visibility: hidden; }
.cat-sheet.is-open { visibility: visible; }
.cat-sheet__scrim { position: fixed; inset: 0; background: rgba(0,0,0,.4); opacity: 0; transition: opacity .2s ease; border: none; }
.cat-sheet.is-open .cat-sheet__scrim { opacity: 1; }
.cat-sheet__panel { position: absolute; left: 0; right: 0;
bottom: calc(54px + env(safe-area-inset-bottom, 0)); /* sit on top of the bottom bar */
background: var(--surface-1); border-top: 1px solid var(--line); border-radius: 16px 16px 0 0;
padding: var(--pad); transform: translateY(110%); transition: transform .26s ease; max-height: 60vh; overflow-y: auto;
box-shadow: 0 -8px 24px rgba(0,0,0,.14); }
.cat-sheet.is-open .cat-sheet__panel { transform: translateY(0); }
.cat-sheet__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-3); }
.cat-sheet__title { font-size: 15px; font-weight: 700; }
.cat-sheet__close { width: 34px; height: 34px; border: none; border-radius: 8px; background: var(--surface-2); color: var(--ink-2); font-size: 18px; cursor: pointer; }
.cat-sheet__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.cat-sheet__item { display: flex; align-items: center; justify-content: center; text-align: center; padding: 14px 10px;
border-radius: var(--radius-sm); background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 15px; }
.cat-sheet__item:hover { background: var(--brand); color: var(--brand-contrast); }
/* Scroll to top */
.to-top { position: fixed; right: 16px; bottom: 16px; z-index: 80; width: 44px; height: 44px;
border: none; border-radius: 50%; background: var(--brand); color: var(--brand-contrast);
font-size: 22px; display: flex; align-items: center; justify-content: center;
box-shadow: 0 6px 18px rgba(0,0,0,.25); cursor: pointer; opacity: 0; transform: translateY(10px);
transition: opacity .2s ease, transform .2s ease; }
.to-top.is-visible { opacity: 1; transform: translateY(0); }
.to-top:hover { background: var(--brand-strong); }
/* On mobile, sit above the bottom bar */
@media (max-width: 640px) {
.to-top { bottom: calc(54px + env(safe-area-inset-bottom, 0) + 12px); right: 12px; }
}
/* ---- Utilities & a11y ---------------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 10px 16px; background: var(--brand); color: var(--brand-contrast); border-radius: 0 0 var(--radius-sm) 0; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
[hidden] { display: none !important; }
/* ---- Mobile ------------------------------------------------------------- */
@media (max-width: 640px) {
/* Content starts closer to the header on phones. .site-main's 18px
padding-block is right for desktop but leaves a big dead band under the
app-like dark header. Bottom stays roomier — the body already reserves
clearance for the fixed bottom bar, this is just breathing room. */
.site-main { padding-block: var(--sp-3) var(--sp-5); }
/* Dark, app-like header */
.site-header { background: var(--chrome-bg); border-bottom-color: var(--chrome-line);
box-shadow: 0 2px 10px rgba(0,0,0,.2); }
.site-header .site-logo__mark { color: var(--chrome-ink); }
.site-header .icon-btn { color: var(--chrome-ink-2); }
.site-header .icon-btn:hover { color: #fff; background: rgba(255,255,255,.08); }
/* Inline search hidden; icon opens the bottom sheet instead */
.site-search { display: none; }
/* Bottom bar + sheets visible on mobile */
.bottom-bar { display: flex; }
body { padding-bottom: calc(54px + env(safe-area-inset-bottom, 0)); }
/* Category menu / desktop search panels are replaced by bottom sheets */
.site-menu-panel, .site-search-panel { display: none; }
}
/* ---- Mobile ------------------------------------------------------------- */
/* ======================================================================
Article detail page
====================================================================== */
/* Article fills the site container width (same left/right edges as the
header), so there's no leftover space on the right. */
.article { padding-top: var(--sp-4, 16px); padding-bottom: 40px; }
/* Two-column layout: content + sticky sidebar (desktop). */
.article__layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 20px; align-items: start; }
.article__content { min-width: 0; }
.article__sidebar { min-width: 0; align-self: start; position: sticky; top: 80px; }
/* Gap reduced ~40% (24→14): the ad and the "Son Haberler" block were floating
too far apart. The stack's own gap now owns ALL vertical spacing — the ad's
default 24px block margin is cancelled here so it (a) starts flush with the
article title in the left column instead of 24px below it, and (b) doesn't
double up with the stack gap. */
.sidebar-sticky { display: flex; flex-direction: column; gap: 14px; }
.sidebar-sticky > .ad { margin: 0; }
/* ==========================================================================
Weather widget (sidebar) — replaces the old "reklam alanı" placeholder.
Compact SINGLE-ROW strip: condition icon + temperature + city/description +
humidity/wind, on a flat sky-tinted background that shifts by day/night
(JS sets data-part). The condition icon keeps its own small animation; there's
no room for the drifting-cloud backdrop the tall card had. Data from
Open-Meteo, filled client-side. */
.side-weather {
display: flex; align-items: center; gap: 12px;
padding: 11px 15px; border-radius: var(--radius); color: #fff;
background: #2b6aa8;
box-shadow: 0 6px 18px rgba(43, 106, 168, .30);
}
/* Night palette — deep indigo, cooler. */
.side-weather[data-part="night"] {
background: #253a6b;
box-shadow: 0 6px 18px rgba(27, 42, 82, .35);
}
/* Loading/error fallback keeps the brand look so a failed fetch isn't a void.
Uses brand-strong (#B62823, 6.33 with white) not --brand (#D8352F, only
4.70) so the text clears AA even if the admin sets a lighter --brand. */
.side-weather[data-part="error"] {
background: var(--brand-strong);
box-shadow: 0 6px 18px rgba(182, 40, 35, .26);
}
.side-weather__icon { width: 40px; height: 40px; flex: 0 0 40px; display: block; }
.side-weather__icon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.side-weather__temp {
font-family: var(--font-ui); font-size: 27px; font-weight: 800; line-height: 1;
flex: 0 0 auto;
}
.side-weather__mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.side-weather__city {
font-family: var(--font-ui); font-size: 13px; font-weight: 700; letter-spacing: .01em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-weather__desc {
font-family: var(--font-ui); font-size: 12px; font-weight: 500;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.side-weather__meta {
flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px;
}
.side-weather__metaitem {
display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-ui); font-size: 11.5px; font-weight: 600;
}
.side-weather__metaicon { width: 13px; height: 13px; display: inline-block; flex: 0 0 13px; }
.side-weather__metaicon svg { width: 100%; height: 100%; display: block; }
/* --- animated condition-icon pieces (classes set by JS on the SVG) -------- */
.sw-sun { transform-origin: center; animation: sw-orb-spin 18s linear infinite; }
.sw-cloud-f { animation: sw-bob 4s ease-in-out infinite; }
.sw-rain { animation: sw-fall 1.1s linear infinite; }
.sw-rain-2 { animation: sw-fall 1.1s linear infinite .4s; }
.sw-bolt { animation: sw-flash 2.4s steps(1) infinite; }
@keyframes sw-orb-spin { to { transform: rotate(360deg); } }
@keyframes sw-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(2px); } }
@keyframes sw-fall { 0% { transform: translateY(-2px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes sw-flash { 0%,92%,100% { opacity: 1; } 94%,98% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
.sw-sun, .sw-cloud-f, .sw-rain, .sw-rain-2, .sw-bolt { animation: none; }
}
/* Sidebar title */
.side-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 2px solid var(--brand); }
/* Latest — lead (first) item: big 16:9 image + title */
.side-latest { display: block; }
.side-lead { display: block; text-decoration: none; color: inherit; margin-bottom: 16px; }
.side-lead__media { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); margin-bottom: 8px; }
.side-lead__media picture, .side-lead__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-lead__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 26px; }
.side-lead__cat { position: absolute; top: 8px; left: 8px; z-index: 1; display: inline-block;
padding: 3px 9px; background: var(--brand); color: #fff; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; border-radius: 4px; }
.side-lead__title { font-size: 15px; font-weight: 700; line-height: 1.35; margin: 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.side-lead:hover .side-lead__title { color: var(--brand); }
/* Latest — rest: image left, title right */
.side-item { display: grid; grid-template-columns: 96px 1fr; gap: 10px; text-decoration: none; color: inherit;
padding: 12px 0; border-top: 1px solid var(--line); align-items: center; }
.side-item__media { aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: var(--surface-2); }
.side-item__media picture, .side-item__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-item__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 16px; }
.side-item__title { font-size: 13px; font-weight: 600; line-height: 1.35; margin: 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.side-item:hover .side-item__title { color: var(--brand); }
@media (max-width: 900px) {
/* Sidebar drops below the content on narrower screens. */
.article__layout { grid-template-columns: 1fr; gap: 32px; }
.article__sidebar { position: static; }
}
/* Breadcrumb */
.breadcrumb { display: flex; align-items: center; flex-wrap: nowrap; gap: 4px; font-size: 13px; color: var(--ink-3);
margin-bottom: 16px; }
.breadcrumb a { color: var(--ink-3); text-decoration: none; flex-shrink: 0; }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb i { font-size: 14px; opacity: .6; flex-shrink: 0; }
.breadcrumb span[aria-current] { color: var(--ink-2); }
/* Current page (article title): fills remaining width and truncates with … .
Full title stays in the HTML (SEO/JSON-LD unaffected); only the visible
text is clipped, and it adapts to screen width automatically. */
.breadcrumb__current { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Header */
.article__category { display: inline-flex; align-items: center; height: 40px; font-size: 11px; font-weight: 700; text-transform: uppercase;
letter-spacing: .05em; color: var(--brand-strong); text-decoration: none;
padding: 0 14px; border-radius: 4px; background: var(--brand-soft); margin-left: auto; white-space: nowrap; }
.article__category:hover { background: var(--brand); color: #fff; }
.article__title { font-size: clamp(24px, 4.2vw, 33px); line-height: 1.22; font-weight: 800; margin: 0 0 14px; letter-spacing: -.01em; }
.article__spot { font-size: 18px; line-height: 1.55; color: var(--ink-2); margin: 0 0 20px; font-weight: 400; text-align: justify; }
/* Byline */
.article__byline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
padding: 14px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-bottom: 24px; }
.article__author { display: flex; align-items: center; gap: 10px; }
.article__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.article__author-info { display: flex; flex-direction: column; }
.article__author-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.article__author-role { font-size: 12px; color: var(--ink-3); display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.article__author-sep { color: var(--line-strong); }
.article__author-role time { color: var(--ink-3); }
.article__meta { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-3); flex-wrap: wrap; }
.article__meta > * { display: inline-flex; align-items: center; gap: 5px; }
.article__meta i { font-size: 15px; }
/* Cover */
.article__cover { position: relative; margin: 0 0 28px; }
.article__cover picture, .article__cover img { width: 100%; border-radius: var(--radius); display: block; }
.article__cover figcaption { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 8px; font-style: italic; }
/* Cover hover share panel — slides in from the right on hover (desktop). */
.cover-share { position: absolute; top: 12px; right: 12px; display: flex; flex-direction: column; gap: 8px;
opacity: 0; transform: translateX(16px); transition: opacity .25s ease, transform .25s ease; pointer-events: none; }
.article__cover:hover .cover-share,
.article__cover:focus-within .cover-share { opacity: 1; transform: translateX(0); pointer-events: auto; }
.cover-share__btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
border-radius: 50%; border: none; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; font-size: 18px;
text-decoration: none; backdrop-filter: blur(4px); transition: background .15s, transform .15s; }
.cover-share__btn:hover { transform: scale(1.08); }
.cover-share__btn i { color: #fff; }
.cover-share__btn--x:hover { background: #000; }
.cover-share__btn--fb:hover { background: #1877f2; }
.cover-share__btn--wa:hover { background: #25d366; }
.cover-share__btn--link:hover { background: var(--brand); }
.cover-share__btn.is-copied { background: #25d366; }
/* Body */
.article__body { font-size: 18px; line-height: 1.75; color: var(--ink); text-align: justify; }
.article__body > *:first-child { margin-top: 0; }
.article__body p { margin: 0 0 1.3em; }
.article__body h2 { font-size: 26px; font-weight: 700; margin: 1.6em 0 .5em; line-height: 1.3; }
.article__body h3 { font-size: 22px; font-weight: 700; margin: 1.4em 0 .5em; }
.article__body h4 { font-size: 19px; font-weight: 700; margin: 1.2em 0 .5em; }
.article__body a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.article__body ul, .article__body ol { margin: 0 0 1.3em; padding-left: 1.4em; }
.article__body li { margin-bottom: .4em; }
.article__body blockquote { margin: 1.5em 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--brand);
color: var(--ink-2); font-style: italic; }
.article__body img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1.2em 0; }
.article__body figure { margin: 1.5em 0; }
.article__body figcaption { font-size: 13px; color: var(--ink-3); text-align: center; margin-top: 6px; }
/* Share — one full-width row of equal rectangular buttons */
.article__share { display: flex; gap: 8px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.share-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 44px;
border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-1); color: var(--ink-2);
cursor: pointer; font-size: 18px; text-decoration: none; transition: all .15s; }
.share-btn:hover { color: #fff; }
.share-btn--x:hover { background: #000; border-color: #000; }
.share-btn--fb:hover { background: #1877f2; border-color: #1877f2; }
.share-btn--wa:hover { background: #25d366; border-color: #25d366; }
.share-btn--link:hover { background: var(--brand); border-color: var(--brand); }
.share-btn.is-copied { background: #25d366; border-color: #25d366; color: #fff; }
/* Push notification prompt card (article footer) */
.push-card {
display: flex; align-items: center; gap: 14px;
margin-top: 28px; padding: 16px 18px;
background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius);
transition: opacity .2s ease;
}
.push-card__icon {
flex: none; width: 44px; height: 44px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
background: var(--brand); color: #fff; font-size: 22px;
}
.push-card__text { flex: 1 1 auto; min-width: 0; }
.push-card__title { margin: 0; font-family: var(--font-ui); font-size: 15px; font-weight: 600; color: var(--ink); }
.push-card__desc { margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.push-card__actions { flex: none; display: flex; align-items: center; gap: 6px; }
.push-card__btn {
display: inline-flex; align-items: center; gap: 6px;
height: 40px; padding: 0 16px; border: none; border-radius: var(--radius-sm);
background: var(--brand); color: #fff; cursor: pointer;
font-family: var(--font-ui); font-size: 13px; font-weight: 600;
white-space: nowrap; transition: background .15s;
}
.push-card__btn i { font-size: 16px; }
.push-card__btn:hover { background: var(--brand-strong); }
.push-card__dismiss {
flex: none; width: 34px; height: 34px; display: none;
align-items: center; justify-content: center;
border: none; border-radius: var(--radius-sm); background: transparent;
color: var(--ink-3); cursor: pointer; font-size: 18px; transition: background .15s, color .15s;
}
.push-card__dismiss:hover { background: var(--surface-2); color: var(--ink); }
/* Off state: dismiss shown so user can defer without acting */
.push-card[data-push-card-state="off"] .push-card__dismiss { display: inline-flex; }
/* On state: success styling, muted, kept only until it self-dismisses */
.push-card[data-push-card-state="on"] { opacity: .78; }
.push-card[data-push-card-state="on"] .push-card__icon { background: var(--brand-soft); color: var(--brand); }
.push-card[data-push-card-state="on"] .push-card__btn {
background: transparent; color: var(--ink-3); border: 1px solid var(--line);
}
.push-card[data-push-card-state="on"] .push-card__btn:hover { background: var(--surface-2); color: var(--ink); }
/* Blocked state: informational only, no action button */
.push-card[data-push-card-state="blocked"] .push-card__icon { background: var(--surface-2); color: var(--ink-3); }
.push-card[data-push-card-state="blocked"] .push-card__actions { display: none; }
@media (max-width: 560px) {
.push-card { flex-wrap: wrap; gap: 12px; }
.push-card__text { flex: 1 1 140px; }
.push-card__actions { flex: 1 1 100%; }
.push-card__btn { flex: 1 1 auto; justify-content: center; }
}
/* Section titles */
.section-title { font-size: 22px; font-weight: 700; margin: 40px 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--brand); display: inline-block; }
/* Related */
.related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 16px; }
.related-card { display: block; text-decoration: none; color: inherit; background: var(--surface-1);
border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.related-card:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.related-card__media { aspect-ratio: 3/2; background: var(--surface-2); overflow: hidden; }
.related-card__media picture, .related-card__media img { width: 100%; height: 100%; object-fit: cover; }
.related-card__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 26px; }
.related-card__body { padding: 12px; }
.related-card__title { font-size: 14px; font-weight: 600; line-height: 1.35; margin: 0 0 6px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.related-card__date { font-size: 12px; color: var(--ink-3); }
/* Comments */
.comments { margin-top: 40px; }
.comments__count { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 24px;
padding: 0 8px; background: var(--brand); color: #fff; border-radius: 12px; font-size: 13px; margin-left: 6px; vertical-align: middle; }
.comment-form { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; margin-bottom: 28px; }
.comment-form__row { margin-bottom: 12px; }
.comment-form textarea.form-input { min-height: 90px; padding: 12px; line-height: 1.5; resize: vertical; font-family: inherit; height: auto; }
.comment-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.comment-form__note { font-size: 12px; color: var(--ink-3); }
.comment-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.comment { padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.comment__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.comment__author { font-weight: 700; font-size: 14px; }
.comment__date { font-size: 12px; color: var(--ink-3); margin-left: auto; }
.comment__text { margin: 0; font-size: 15px; line-height: 1.65; color: var(--ink-2); text-align: justify; }
.comments__empty { color: var(--ink-3); font-size: 15px; display: flex; align-items: center; gap: 8px; padding: 20px 0; }
/* Alerts (shared) */
.alert { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: 14px; margin-bottom: 16px; }
.alert--success { background: #e3f5ec; color: #1f7a54; }
.alert--error { background: var(--brand-soft); color: var(--brand-strong); }
/* Error page */
.error-page { text-align: center; padding: 60px 20px; }
.error-page__code { font-size: 90px; font-weight: 800; color: var(--brand); line-height: 1; }
.error-page__title { font-size: 26px; margin: 10px 0; }
.error-page__text { color: var(--ink-3); margin-bottom: 24px; }
.page-narrow { max-width: 600px; margin: 0 auto; }
@media (max-width: 600px) {
/* Content sits inside the layout's .container. On mobile the article page
keeps a comfortable 10px text gutter; images break out to the edge. */
.page-article .site-main > .container { padding-inline: 10px; }
.article__title { font-size: 21px; line-height: 1.25; }
.article__spot { font-size: 15px; }
.article__body { font-size: 16px; }
.related__grid { grid-template-columns: repeat(2, 1fr); }
/* Cover image goes fully edge-to-edge (breaks out of the 10px gutter). */
.article__cover { margin-inline: -10px; }
.article__cover picture, .article__cover img { border-radius: 0; }
.article__cover figcaption { padding-inline: 10px; }
/* No hover on touch — hide the cover share panel; the full-width
buttons below cover sharing on mobile. */
.cover-share { display: none; }
/* In-body images also go edge-to-edge on mobile. */
.article__body img { margin-inline: -10px; max-width: calc(100% + 20px); width: calc(100% + 20px); border-radius: 0; }
.article__body figure { margin-inline: -10px; }
.article__body figure img { margin-inline: 0; }
.article__body figcaption { padding-inline: 10px; }
}
/* ======================================================================
Category listing page
====================================================================== */
.category { padding-top: var(--sp-4, 16px); padding-bottom: 40px; }
/* Header */
.category__header { margin-bottom: 28px; padding-bottom: 20px; border-bottom: 2px solid var(--brand); }
.category__top { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.category__intro { min-width: 0; }
.category__title { font-size: clamp(26px, 4vw, 34px); font-weight: 800; margin: 0; letter-spacing: -.01em; }
.category__desc { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; max-width: 60ch; }
.category__stat { flex-shrink: 0; text-align: center; padding-left: 20px; border-left: 1px solid var(--line); }
.category__stat-num { display: block; font-size: 28px; font-weight: 800; color: var(--brand); line-height: 1; }
.category__stat-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .08em; color: var(--ink-3); margin-top: 5px; }
.category__subs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.category__sub { display: inline-flex; align-items: center; padding: 6px 14px; background: var(--surface-2);
border: 1px solid var(--line); border-radius: 20px; font-size: 13px; font-weight: 600; color: var(--ink-2);
text-decoration: none; transition: all .15s; }
.category__sub:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
/* Lead article (large, image + text side by side on desktop) */
.lead-card { display: grid; grid-template-columns: 1.4fr 1fr; gap: 24px; text-decoration: none; color: inherit;
margin-bottom: 32px; align-items: center; }
.lead-card__media { aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: var(--surface-2); }
.lead-card__media picture, .lead-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.lead-card:hover .lead-card__media img { transform: scale(1.03); }
.lead-card__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 40px; }
.lead-card__cat { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); margin-bottom: 10px; }
.lead-card__title { font-size: clamp(22px, 3vw, 30px); font-weight: 800; line-height: 1.2; margin: 0 0 12px; letter-spacing: -.01em; }
.lead-card:hover .lead-card__title { color: var(--brand); }
.lead-card__spot { font-size: 16px; line-height: 1.55; color: var(--ink-2); margin: 0 0 14px; }
.lead-card__meta { display: flex; gap: 16px; font-size: 13px; color: var(--ink-3); }
.lead-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
/* News grid */
.news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 24px; }
.news-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; background: var(--surface-1);
border: 1px solid var(--line); border-radius: var(--radius-card); overflow: hidden; transition: transform .15s, box-shadow .15s; }
.news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.09); }
.news-card__media { aspect-ratio: 3/2; background: var(--surface-2); overflow: hidden; }
.news-card__media picture, .news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.news-card__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 28px; }
.news-card__body { padding: 14px; flex: 1; display: flex; flex-direction: column; }
.news-card__title { font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 8px;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.news-card:hover .news-card__title { color: var(--brand); }
.news-card__spot { font-size: 13px; line-height: 1.5; color: var(--ink-2); margin: 0 0 10px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.news-card__meta { display: flex; gap: 12px; font-size: 12px; color: var(--ink-3); margin-top: auto; }
.news-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
/* Load more */
.load-more { display: flex; justify-content: center; margin-top: 32px; }
.btn--lg { height: 48px; padding: 0 28px; font-size: 15px; }
.load-more .btn { gap: 6px; }
/* Empty */
.category__empty { text-align: center; padding: 60px 20px; color: var(--ink-3); }
.category__empty i { font-size: 44px; display: block; margin-bottom: 12px; }
@media (max-width: 720px) {
.lead-card { grid-template-columns: 1fr; gap: 14px; }
.lead-card__media { aspect-ratio: 16/9; }
}
@media (max-width: 600px) {
.page-category .site-main > .container { padding-inline: 12px; }
.category__top { gap: 14px; }
.category__stat { padding-left: 14px; }
.category__stat-num { font-size: 24px; }
.category__desc { font-size: 14px; }
.news-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
.news-card__body { padding: 10px; }
.news-card__title { font-size: 14px; }
.news-card__spot { display: none; }
}
/* ======================================================================
Homepage
====================================================================== */
/* No padding-top here: .site-main already spaces the content below the header
(18px desktop / 10px mobile). This wrapper used to add another 16px on top
of that, which is what made the gap between the header and the featured
cards look oversized. padding-bottom stays — it separates the last section
from the footer. */
.home { padding-bottom: 48px; display: flex; flex-direction: column; gap: 20px; }
/* Small card titles use the UI sans (Spline Sans) for crisp legibility at
small sizes; large display headings stay in the serif (Merriweather). */
.feat-box__title, .side-news__title, .news-card__title,
.related-card__title, .side-lead__title, .side-item__title,
.hero-slide__title {
font-family: var(--font-ui); letter-spacing: -.005em;
}
/* --- Featured boxes (top 4) --- */
.home-featured { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.feat-box { position: relative; display: block; aspect-ratio: 4/3; border-radius: var(--radius-card); overflow: hidden;
text-decoration: none; background: var(--surface-2); }
.feat-box__media, .feat-box__media picture, .feat-box__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.feat-box__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 30px; background: var(--surface-3); }
.feat-box__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
padding: 12px; background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.5) 40%, transparent 72%); }
.feat-box__cat { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: #fff; background: var(--brand); padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }
.feat-box__title { font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0;
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* --- Hero: slider + side --- */
.home-hero { display: grid; grid-template-columns: 2fr 1fr; gap: 10px; height: 480px; }
/* Slider = image track (fills most) + a dots strip attached at the bottom. */
.hero-slider { position: relative; display: flex; flex-direction: column; border-radius: var(--radius);
overflow: hidden; background: var(--surface-2); height: 100%; }
.hero-slider__track { position: relative; flex: 1; min-height: 0; }
.hero-slide { position: absolute; inset: 0; display: block; text-decoration: none; opacity: 0; visibility: hidden;
transition: opacity .5s ease; }
.hero-slide.is-active { opacity: 1; visibility: visible; }
.hero-slide__media, .hero-slide__media picture, .hero-slide__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-slide__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 44px; background: var(--surface-3); }
.hero-slide__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end;
padding: 22px; background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.75) 22%, rgba(0,0,0,.35) 50%, transparent 80%); }
.hero-slide__cat { align-self: flex-start; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: #fff; background: var(--brand); padding: 3px 10px; border-radius: 4px; margin-bottom: 10px; }
.hero-slide__title { font-size: clamp(19px, 2vw, 24px); font-weight: 700; line-height: 1.22; color: #fff; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Dots strip — attached below the image, numbers spread full width */
.hero-dots { flex-shrink: 0; display: flex; gap: 4px; padding: 6px; background: var(--chrome-bg, #14161a); }
.hero-dot { flex: 1; height: 30px; border: none; border-radius: 5px; cursor: pointer; background: rgba(255,255,255,.12);
color: rgba(255,255,255,.75); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center;
transition: background .15s, color .15s; padding: 0; font-family: var(--font-ui); }
.hero-dot:hover { background: rgba(255,255,255,.28); color: #fff; }
.hero-dot.is-active { background: var(--brand); color: #fff; }
/* Side news (3, fill slider height) */
.hero-side { display: grid; grid-template-rows: repeat(3, 1fr); gap: 10px; min-height: 0; }
.side-news { position: relative; display: block; border-radius: var(--radius-card); overflow: hidden; text-decoration: none;
background: var(--surface-2); min-height: 0; }
.side-news__media, .side-news__media picture, .side-news__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.side-news__noimg { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font-size: 24px; background: var(--surface-3); }
.side-news__body { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; padding: 12px;
background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 45%, transparent 78%); }
.side-news__cat { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
color: #fff; background: var(--brand); padding: 2px 8px; border-radius: 4px; margin-bottom: 6px; }
.side-news__title { font-size: 14px; font-weight: 700; line-height: 1.3; color: #fff; margin: 0;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* --- Currency strip --- */
.currency-strip { display: flex; align-items: stretch; gap: 0; background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden; }
.currency-strip__label { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700;
color: #fff; background: var(--brand); padding: 0 18px; flex-shrink: 0; }
.currency-strip__label i { font-size: 17px; }
.currency-strip__items { display: flex; flex: 1; overflow-x: auto; }
.currency-item { display: flex; flex-direction: column; justify-content: center; gap: 2px; flex: 1; min-width: 110px;
padding: 10px 18px; border-right: 1px solid var(--line); }
.currency-item:last-child { border-right: none; }
.currency-item__code { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
letter-spacing: .03em; color: var(--ink-3); }
.currency-item__code::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; flex-shrink: 0; }
.currency-item--gold .currency-item__code::before { background: #d4a017; }
.currency-item--crypto .currency-item__code::before { background: #f7931a; }
.currency-item__value { font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.01em; }
.currency-strip__date { display: inline-flex; align-items: center; font-size: 11px; color: var(--ink-3); flex-shrink: 0;
padding: 0 16px; white-space: nowrap; background: var(--surface-3); border-left: 1px solid var(--line); }
/* --- Latest grid --- */
.home-latest .news-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.section-head { margin-bottom: 4px; }
/* News card category badge on media (homepage variant) */
.news-card { position: relative; }
.news-card__cat { position: absolute; top: 8px; left: 8px; z-index: 1; font-size: 10px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; color: #fff; background: var(--brand); padding: 2px 8px; border-radius: 4px; }
/* Infinite scroll */
.infinite-sentinel { min-height: 40px; display: flex; align-items: center; justify-content: center; margin-top: 24px; }
.infinite-loader { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3); }
.infinite-loader i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) {
.home-hero { grid-template-columns: 1fr; height: auto; }
.hero-slider { height: 340px; }
.hero-side { grid-template-rows: none; grid-template-columns: repeat(3, 1fr); }
.side-news { aspect-ratio: 4/3; }
.home-latest .news-grid { grid-template-columns: repeat(3, 1fr); }
.home-featured { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
.page-home .site-main > .container { padding-inline: 10px; }
.home { gap: 14px; }
.home-featured { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero-slider { height: 260px; }
.hero-side { grid-template-columns: 1fr; gap: 10px; }
.side-news { aspect-ratio: 16/9; }
.home-latest .news-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.hero-slide__overlay { padding: 14px; }
/* Currency: stack label on top, rates as a wrapping grid — no scroll. */
.currency-strip { flex-direction: column; align-items: stretch; }
.currency-strip__label { width: 100%; padding: 9px 12px; justify-content: center; }
.currency-strip__items { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.currency-item { min-width: 0; padding: 9px 6px; border-right: 1px solid var(--line);
border-top: 1px solid var(--line); align-items: center; text-align: center; }
.currency-item:nth-child(3n) { border-right: none; }
.currency-item__code { justify-content: center; font-size: 10px; }
.currency-item__value { font-size: 14px; }
.currency-strip__date { display: none; }
}
/* ======================================================================
Comment form enhancements
====================================================================== */
/* Honeypot — visually hidden but still in the DOM (bots fill it). Not
display:none, since some bots skip those; push it off-screen instead. */
.comment-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.comment-form__meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.comment-form__hint { font-size: 12px; color: #92610a; display: inline-flex; align-items: center; gap: 5px; }
[data-theme="dark"] .comment-form__hint { color: #e0a800; }
.comment-form__counter { font-size: 12px; color: var(--ink-3); margin-left: auto; font-variant-numeric: tabular-nums; }
.comment-form__note { display: inline-flex; align-items: center; gap: 6px; }
.comment-form__note i { color: var(--brand); }
.comment-form__error:not([hidden]),
.comment-alert:not([hidden]) { display: block; }
/* Logged-in user card (shown instead of the name field) */
.comment-form__user { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 12px;
background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius-sm); }
.comment-form__user-avatar { width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; object-fit: cover; background: var(--brand-soft); }
.comment-form__user-info { display: flex; flex-direction: column; line-height: 1.3; }
.comment-form__user-name { font-weight: 700; font-size: 14px; color: var(--ink); }
.comment-form__user-label { font-size: 12px; color: var(--ink-3); }
/* ======================================================================
Static content pages
====================================================================== */
/* ===== Account area (/hesap) =====================================
Tabbed dashboard. Desktop = left rail + content; mobile = one row of
icon tabs (capped at 5 in the view so it never scrolls or wraps at 375px).
================================================================= */
.account { padding: 20px 0 48px; max-width: 980px; margin-inline: auto; }
/* --- identity card --- */
.acc-id {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
margin-top: 14px; padding: 18px;
background: var(--surface-1); border: 1px solid var(--line); border-radius: var(--radius);
}
.acc-id__avatar { flex: none; width: 56px; height: 56px; border-radius: 50%; object-fit: cover; background: var(--surface-2); }
.acc-id__text { flex: 1 1 180px; min-width: 0; }
.acc-id__name { margin: 0; font-family: var(--font-ui); font-size: 19px; font-weight: 700; color: var(--ink); }
.acc-id__email { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acc-id__role {
flex: none; padding: 4px 12px; border-radius: 999px;
background: var(--brand-soft); color: var(--brand-strong);
font-family: var(--font-ui); font-size: 12px; font-weight: 600;
}
.acc-id__actions { flex: none; display: flex; align-items: center; gap: 8px; }
.acc-id__logout { margin: 0; }
.acc-id__logout-btn:hover { border-color: var(--danger); color: var(--danger); }
/* --- layout: rail + content --- */
.acc-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; margin-top: 16px; }
/* --- tabs (desktop rail) --- */
.acc-tabs { display: flex; flex-direction: column; gap: 2px; align-self: start; }
.acc-tab {
display: flex; align-items: center; gap: 10px;
padding: 11px 12px; border: 0; border-left: 3px solid transparent;
background: transparent; cursor: pointer; text-align: left; width: 100%;
font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink-3);
transition: background .15s, color .15s, border-color .15s;
}
.acc-tab:hover { background: var(--surface-2); color: var(--ink); }
.acc-tab.is-active { background: var(--surface-1); border-left-color: var(--brand); color: var(--ink); }
.acc-tab.is-active .acc-tab__icon { color: var(--brand); }
.acc-tab__icon { flex: none; font-size: 18px; color: var(--ink-3); }
.acc-tab__short { display: none; } /* mobile-only label */
/* --- panels --- */
.acc-content { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.acc-panel { display: flex; flex-direction: column; gap: 12px; }
.acc-panel[hidden] { display: none; }
/* --- stat tiles --- */
.acc-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.acc-stat {
padding: 14px; border-radius: var(--radius);
background: var(--surface-1); border: 1px solid var(--line);
display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.acc-stat__label { font-size: 12px; color: var(--ink-3); }
.acc-stat__value { font-family: var(--font-ui); font-size: 24px; font-weight: 700; color: var(--ink); line-height: 1.1; }
.acc-stat__value small { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.acc-stat__value--sm { font-size: 17px; }
/* --- cards --- */
.acc-card {
padding: 18px; border-radius: var(--radius);
background: var(--surface-1); border: 1px solid var(--line);
}
.acc-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.acc-card__title { margin: 0 0 12px; font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--ink); }
.acc-card__head .acc-card__title { margin: 0; }
.acc-card__more {
border: 0; background: transparent; cursor: pointer;
display: inline-flex; align-items: center; gap: 3px;
font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--brand);
}
.acc-card__more:hover { color: var(--brand-strong); }
/* --- info note (forward-looking cards for plain members) --- */
.acc-note { display: flex; align-items: flex-start; gap: 14px; }
.acc-note__icon {
flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
background: var(--brand-soft); color: var(--brand); font-size: 21px;
}
.acc-note__text { margin: 0 0 10px; font-size: 14px; line-height: 1.5; color: var(--ink-3); }
.acc-note .acc-card__title { margin: 0 0 4px; }
/* --- lists --- */
.acc-list { list-style: none; margin: 0; padding: 0; }
.acc-list__row {
display: flex; align-items: center; gap: 12px;
padding: 11px 0; border-bottom: 1px solid var(--line);
}
.acc-list__row:last-child { border-bottom: 0; padding-bottom: 0; }
.acc-list__row--stack { flex-direction: column; align-items: flex-start; gap: 5px; }
.acc-list__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: inherit; }
.acc-list__title {
font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35;
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
a.acc-list__main:hover .acc-list__title { color: var(--brand); }
.acc-list__sub { font-size: 12px; color: var(--ink-3); }
.acc-list__meta {
flex: none; display: inline-flex; align-items: center; gap: 4px;
font-size: 13px; color: var(--ink-3);
}
/* --- comments --- */
.acc-comment__body { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.acc-comment__meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 12px; color: var(--ink-3); }
.acc-comment__meta a { color: var(--ink-2); font-weight: 600; }
.acc-comment__meta a:hover { color: var(--brand); }
.acc-comment__sep { color: var(--line-strong); }
.acc-badge { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.acc-badge--wait { background: var(--surface-3); color: var(--ink-3); }
/* --- forms --- */
.acc-form { display: flex; flex-direction: column; gap: 14px; }
.acc-form__row { display: flex; gap: 14px; flex-wrap: wrap; }
.acc-form__row > .acc-field { flex: 1 1 200px; }
.acc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.acc-field label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--ink-2); }
.acc-field .form-input[aria-invalid="true"] { border-color: var(--danger); }
.acc-field .form-input:disabled { background: var(--surface-2); color: var(--ink-3); cursor: not-allowed; }
.acc-hint { font-size: 12px; color: var(--ink-3); }
.acc-hint--foot { margin-top: 12px; }
.acc-hint a { color: var(--brand); font-weight: 600; }
.acc-form .btn { align-self: flex-start; }
.acc-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.acc-row__label { margin: 0; font-size: 14px; font-weight: 600; color: var(--ink); }
.acc-row__hint { margin: 2px 0 0; font-size: 13px; color: var(--ink-3); }
/* --- alerts --- */
.acc-alert {
display: flex; align-items: center; gap: 8px;
margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm);
font-size: 13px; font-weight: 600;
}
.acc-alert--ok { background: var(--brand-soft); color: var(--brand-strong); }
.acc-alert--err { background: var(--surface-2); color: var(--ink-2); }
/* --- empty states --- */
.acc-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 32px 16px; text-align: center; }
.acc-empty i { font-size: 34px; color: var(--line-strong); }
.acc-empty__title { margin: 4px 0 0; font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink); }
.acc-empty__text { margin: 0 0 6px; font-size: 13px; color: var(--ink-3); max-width: 340px; }
/* Small button — exists in admin.css but not here, and the account page needs it. */
.btn--sm { height: 34px; padding: 0 12px; font-size: 13px; }
/* ---------- mobile ---------- */
@media (max-width: 760px) {
.acc-layout { grid-template-columns: 1fr; gap: 12px; }
/* Tabs become ONE row of icon buttons. The view caps them at 5, so at
375px they still fit without scrolling — no overflow, no wrap. */
.acc-tabs {
flex-direction: row; gap: 2px;
padding: 4px; border: 1px solid var(--line); border-radius: var(--radius);
background: var(--surface-1);
}
.acc-tab {
flex: 1 1 0; min-width: 0;
flex-direction: column; gap: 3px; align-items: center; justify-content: center;
padding: 9px 2px; border-left: 0; border-radius: var(--radius-sm);
font-size: 11px; text-align: center;
}
.acc-tab.is-active { background: var(--brand-soft); color: var(--brand-strong); }
.acc-tab.is-active .acc-tab__icon { color: var(--brand); }
.acc-tab__icon { font-size: 19px; }
.acc-tab__label { display: none; }
.acc-tab__short { display: block; }
.acc-id { gap: 10px; padding: 14px; }
.acc-id__avatar { width: 44px; height: 44px; }
.acc-id__name { font-size: 16px; }
.acc-id__actions { width: 100%; }
.acc-id__actions .btn { flex: 1 1 auto; justify-content: center; }
.acc-id__logout { flex: 1 1 auto; display: flex; }
.acc-id__logout-btn { width: 100%; justify-content: center; }
.acc-stats { gap: 8px; }
.acc-stat { padding: 11px; }
.acc-stat__label { font-size: 11px; }
.acc-stat__value { font-size: 19px; }
.acc-stat__value--sm { font-size: 14px; }
.acc-card { padding: 14px; }
.acc-form__row { flex-direction: column; gap: 14px; }
/* flex-basis is measured along the MAIN axis. In the desktop row that's
width (200px), which is what we want. But the line above turns the row
into a COLUMN, so that same 200px becomes a minimum HEIGHT — and with
flex-grow:1 the fields stretch even further. A ~70px input then sat in a
200px+ box, which is where the huge gaps between Ad / Soyad / Cinsiyet
came from. Reset the basis so each field is just as tall as its content. */
.acc-form__row > .acc-field { flex: 0 0 auto; }
.acc-form .btn { align-self: stretch; }
.acc-row .btn { width: 100%; justify-content: center; }
}
/* Media library picker (article editor) */
.media-picker {
position: fixed; inset: 0; z-index: 1200;
display: flex; align-items: center; justify-content: center;
padding: 20px; background: rgba(0, 0, 0, .55);
}
.media-picker[hidden] { display: none; }
.media-picker__dialog {
display: flex; flex-direction: column;
width: 100%; max-width: 860px; max-height: 85vh;
background: var(--surface-1); border: 1px solid var(--line);
border-radius: var(--radius); overflow: hidden;
box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.media-picker__head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 16px 20px; border-bottom: 1px solid var(--line);
}
.media-picker__title { margin: 0; font-family: var(--font-ui); font-size: 16px; font-weight: 700; color: var(--ink); }
.media-picker__close {
flex: none; width: 34px; height: 34px;
display: flex; align-items: center; justify-content: center;
border: none; border-radius: var(--radius-sm); background: transparent;
color: var(--ink-3); cursor: pointer; font-size: 18px;
}
.media-picker__close:hover { background: var(--surface-2); color: var(--ink); }
.media-picker__tools { padding: 14px 20px; border-bottom: 1px solid var(--line); }
.media-picker__search { width: 100%; }
.media-picker__body {
flex: 1 1 auto; overflow-y: auto; padding: 20px;
display: grid; gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
align-content: start;
}
.media-picker__msg {
grid-column: 1 / -1; margin: 0; padding: 32px 0;
text-align: center; font-size: 14px; color: var(--ink-3);
}
.media-picker__item {
display: flex; flex-direction: column; gap: 6px; padding: 0;
border: 1px solid var(--line); border-radius: var(--radius-sm);
background: var(--surface-1); cursor: pointer; overflow: hidden;
text-align: left; transition: border-color .15s, transform .1s;
}
.media-picker__item:hover { border-color: var(--brand); transform: translateY(-2px); }
/* Sized wrapper + a full-height img — the pattern the media library page uses.
aspect-ratio directly on the ![]()
collapses its height and nothing shows. */
.media-picker__thumb {
flex: none; display: block; width: 100%; aspect-ratio: 3 / 2;
background: var(--surface-2); overflow: hidden;
}
.media-picker__thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.media-picker__cap {
padding: 0 8px 8px; font-size: 12px; line-height: 1.35; color: var(--ink-2);
overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
@media (max-width: 560px) {
.media-picker { padding: 0; }
.media-picker__dialog { max-width: none; max-height: 100vh; height: 100%; border-radius: 0; border: none; }
.media-picker__body { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
.static-page { padding: 20px 0 48px; max-width: 820px; margin-inline: auto; }
.static-page__title { font-size: clamp(26px, 4vw, 36px); font-weight: 800; line-height: 1.2; margin: 12px 0 20px; }
.static-page__content { font-size: 17px; line-height: 1.75; color: var(--ink); }
.static-page__content p { margin: 0 0 1.1em; }
.static-page__content h2 { font-size: 24px; font-weight: 700; margin: 1.5em 0 .6em; }
.static-page__content h3 { font-size: 20px; font-weight: 700; margin: 1.3em 0 .5em; }
.static-page__content ul, .static-page__content ol { margin: 0 0 1.1em; padding-left: 1.5em; }
.static-page__content li { margin-bottom: .4em; }
.static-page__content a { color: var(--brand); text-decoration: underline; }
.static-page__content img { max-width: 100%; height: auto; border-radius: var(--radius-sm); margin: 1em 0; }
.static-page__content blockquote { margin: 1em 0; padding: 8px 16px; border-left: 3px solid var(--brand); color: var(--ink-2); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
/* Contact form */
.contact { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); }
.contact__title { font-size: 22px; font-weight: 700; margin: 0 0 18px; }
.contact-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.contact-form__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form .form-field { margin-bottom: 14px; }
.contact-form__actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 4px; }
.contact-form__note { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-3); }
.contact-form__note i { color: var(--brand); }
.contact-form__error:not([hidden]), .contact__alert:not([hidden]) { display: block; margin-bottom: 14px; }
@media (max-width: 600px) {
.contact-form__grid { grid-template-columns: 1fr; }
}
/* ===================== SEARCH RESULTS PAGE ===================== */
.search-page { padding-block: 24px 48px; }
.search-page__head { margin-bottom: 24px; }
.search-page__title { font-family: var(--font-ui); font-size: 24px; font-weight: 700; color: var(--ink); margin: 0 0 4px; }
.search-page__q { color: var(--brand); }
.search-page__count { font-size: 14px; color: var(--ink-3); margin: 0 0 16px; }
.search-page__form { display: flex; align-items: center; gap: 8px; position: relative; margin-top: 12px; }
.search-page__form-icon { position: absolute; left: 14px; color: var(--ink-3); font-size: 18px; pointer-events: none; }
.search-page__input { flex: 1; min-width: 0; height: 46px; padding: 0 14px 0 42px; font-size: 15px;
font-family: var(--font-ui); color: var(--ink); background: var(--surface-1);
border: 1px solid var(--line); border-radius: var(--radius-sm); }
.search-page__input:focus { outline: none; border-color: var(--brand); }
.search-page__submit { height: 46px; flex-shrink: 0; }
.search-page__empty { text-align: center; padding: 56px 20px; color: var(--ink-3); }
.search-page__empty i { font-size: 44px; opacity: .55; }
.search-page__empty p { font-size: 17px; font-weight: 600; color: var(--ink-2); margin: 14px 0 6px; }
.search-page__empty-hint { font-size: 14px; color: var(--ink-3); }
/* Pager (prev / status / next) */
.pager { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 32px; }
.pager__link { display: inline-flex; align-items: center; gap: 4px; padding: 9px 16px; font-size: 14px; font-weight: 600;
font-family: var(--font-ui); color: var(--ink); background: var(--surface-1);
border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; }
.pager__link:hover { border-color: var(--brand); color: var(--brand); }
.pager__status { font-size: 14px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
@media (max-width: 480px) {
.search-page__submit { padding-inline: 14px; }
.search-page__title { font-size: 20px; }
}
/* ==========================================================================
PWA install banner (in-flow at the very top, above the header; scrolls away
naturally, header pins to top:0 with no gap) + toasts
========================================================================== */
/* The banner sits in normal flow at the very top of , above the header.
Because it is in-flow, it scrolls away naturally when the user scrolls down,
and the sticky header pins to top:0 with no gap. It is collapsed (height 0)
until JS adds .is-open, which animates it open. */
/* ---- Announcement bar (thin strip at the very top) ---------------------- */
.announce-bar { font-size: 14px; }
.announce-bar__inner { display: flex; align-items: center; gap: var(--sp-2);
padding-block: 9px; justify-content: center; text-align: center; }
.announce-bar__icon { font-size: 17px; flex-shrink: 0; opacity: .9; }
.announce-bar__text { color: inherit; }
a.announce-bar__text:hover { text-decoration: underline; }
.announce-bar__text .ti { font-size: 15px; vertical-align: -2px; }
.announce-bar__close { margin-left: var(--sp-2); background: none; border: 0;
cursor: pointer; padding: 2px; display: inline-flex; opacity: .7; flex-shrink: 0; }
.announce-bar__close:hover { opacity: 1; }
.announce-bar__close .ti { font-size: 16px; }
@media (max-width: 560px) {
.announce-bar { font-size: 13px; }
.announce-bar__inner { padding-inline: var(--sp-2); }
}
.pwa-banner {
overflow: hidden;
max-height: 0;
background: var(--surface-1);
border-bottom: 0 solid var(--line);
transition: max-height .32s cubic-bezier(.22, .61, .36, 1);
will-change: max-height;
}
.pwa-banner.is-open {
max-height: 120px; /* comfortably above the real banner height */
border-bottom-width: 1px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
}
.pwa-banner__inner {
display: flex;
align-items: center;
gap: 12px;
padding: 10px var(--pad);
}
.pwa-banner__icon {
flex: 0 0 auto;
display: inline-flex;
}
.pwa-banner__icon img {
width: 40px; height: 40px;
border-radius: var(--radius-sm);
display: block;
}
.pwa-banner__text {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
line-height: 1.3;
}
.pwa-banner__title {
font-family: var(--font-ui);
font-size: 14px;
font-weight: 700;
color: var(--ink);
}
.pwa-banner__desc {
font-size: 12.5px;
color: var(--ink-2);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.pwa-banner__actions {
flex: 0 0 auto;
display: flex;
align-items: center;
gap: 6px;
}
.pwa-banner__close {
width: 34px; height: 34px;
}
/* On narrow screens keep it tight; hide the description if space is short. */
@media (max-width: 400px) {
.pwa-banner__desc { display: none; }
}
/* ---- Toasts (shared: update notice, etc.) -------------------------------- */
.toast-host {
position: fixed;
left: 50%;
bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
transform: translateX(-50%);
z-index: 110;
display: flex;
flex-direction: column;
gap: 8px;
width: min(440px, calc(100vw - 24px));
pointer-events: none;
}
/* Lift above the mobile bottom bar when it's visible. */
@media (max-width: 768px) {
.toast-host { bottom: calc(env(safe-area-inset-bottom, 0px) + 72px); }
}
.toast {
pointer-events: auto;
display: flex;
align-items: center;
gap: 10px;
background: var(--surface-1);
color: var(--ink);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
padding: 10px 12px;
opacity: 0;
transform: translateY(12px);
transition: opacity .24s ease, transform .24s ease;
}
.toast.is-shown { opacity: 1; transform: translateY(0); }
.toast__msg {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.toast__msg i { color: var(--brand); font-size: 18px; flex: 0 0 auto; }
.toast__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.toast__btn {
appearance: none;
border: 0;
background: transparent;
color: var(--ink-2);
font: inherit;
font-weight: 600;
font-size: 13.5px;
padding: 7px 10px;
border-radius: var(--radius-sm);
cursor: pointer;
}
.toast__btn--accent { color: var(--brand); }
.toast__btn--accent:hover { background: var(--brand-soft); }
.toast__close { width: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.toast__close:hover { background: var(--surface-2); }
@media (prefers-reduced-motion: reduce) {
.pwa-banner, .toast { transition: none; }
}
/* Uploaded image logo (Appearance page) */
.site-logo--image { display: inline-flex; align-items: center; }
.site-logo__img { height: 34px; width: auto; max-width: 200px; object-fit: contain; display: block; }
.site-logo--footer .site-logo__img { height: 30px; }
/* ==========================================================================
Main menu bar (desktop) — composed from independent AXES, not fixed styles.
Classes on .site-header:
nav-pos--below | nav-pos--beside (own strip vs. on the logo row)
nav-bg--light | nav-bg--colored | nav-bg--dark
nav-ind--underline | --divider | --pill | --box (active/hover indicator)
nav-align--left | nav-align--center (logo position, beside mode)
nav-case--upper | --lower | --capitalize (label text-transform)
nav-strip (thin brand strip above header)
nav-inline (== nav-pos--beside; menu sits on the logo row)
All colors derive from var(--brand). Mobile hides the bar (sidebar used).
========================================================================== */
.main-nav { display: none; } /* mobile-first: hidden */
@media (min-width: 861px) {
.site-header--has-nav .main-nav { display: block; }
.main-nav__inner { display: flex; align-items: center; position: relative; }
/* flex: 0 0 auto — without it the list stretches to fill the row and the
overflow button gets shoved to the far right, leaving a dead gap between
the last menu item and the button. Now the button sits right where the
menu ends. */
.main-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch;
flex: 0 0 auto; min-width: 0; }
.main-nav__item { position: relative; display: flex; }
.main-nav__link {
display: inline-flex; align-items: center; gap: 5px; height: 46px; padding: 0 15px;
font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--ink-2);
text-decoration: none; white-space: nowrap;
transition: color .15s, background .15s, border-color .15s;
}
.main-nav__link:hover { color: var(--brand); }
.main-nav__caret { font-size: 14px; opacity: .7; }
.main-nav__icon { font-size: 17px; }
.main-nav__submenu .ti { font-size: 15px; vertical-align: -2px; margin-right: 2px; }
/* Alignment: in the below-bar layout the menu strip is container-aligned,
but each link has its own 15px inset, so the first link's TEXT sits 15px
right of the logo. Two strategies:
- underline/divider (no background box): zero the first link's left pad
so the text lines up with the logo.
- pill/box (have a highlight box): keep each link's inset (the box needs
breathing room) but shift the whole LIST left by 15px so the first
item's text still lines up with the logo. */
.nav-pos--below.nav-ind--underline .main-nav__list > .main-nav__item:first-child > .main-nav__link,
.nav-pos--below.nav-ind--divider .main-nav__list > .main-nav__item:first-child > .main-nav__link {
padding-left: 0;
}
.nav-pos--below.nav-ind--pill .main-nav__list,
.nav-pos--below.nav-ind--box .main-nav__list {
margin-left: -15px;
}
/* Letter-case */
.nav-case--upper .main-nav__text { text-transform: uppercase; letter-spacing: .02em; }
.nav-case--lower .main-nav__text { text-transform: lowercase; }
.nav-case--capitalize .main-nav__text { text-transform: capitalize; }
/* Dropdown (one level) */
.main-nav__submenu {
position: absolute; top: 100%; left: 0; min-width: 190px; z-index: 40;
list-style: none; margin: 0; padding: 6px; display: none;
background: var(--surface-1); border: 1px solid var(--line);
border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.14);
}
.main-nav__item--has-children:hover .main-nav__submenu,
.main-nav__item--has-children:focus-within .main-nav__submenu { display: block; }
.main-nav__sublink {
display: block; padding: 8px 12px; border-radius: 6px;
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.main-nav__sublink:hover { background: var(--brand-soft); color: var(--brand-strong); }
/* Overflow "+" */
.main-nav__more { position: relative; display: flex; align-items: center; }
.main-nav__more[hidden] { display: none; }
.main-nav__more-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; margin-left: 8px; border: 0; cursor: pointer;
/* A faint fill so it reads as a control rather than a stray glyph.
It only appears when the menu actually overflows. */
background: rgba(0, 0, 0, .06); color: inherit; border-radius: 6px; font-size: 17px;
transition: background .15s;
}
.main-nav__more-btn:hover { background: rgba(0,0,0,.12); }
.main-nav__more-list {
position: absolute; top: 100%; right: 0; min-width: 190px; z-index: 41;
list-style: none; margin: 6px 0 0; padding: 6px; display: none;
background: var(--surface-1); border: 1px solid var(--line);
border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.14); }
/* Opens on hover (desktop) AND on click. The click path stays because
hover doesn't exist on touch devices, and keyboard users need it too. */
.main-nav__more:hover .main-nav__more-list,
.main-nav__more:focus-within .main-nav__more-list,
.main-nav__more.is-open .main-nav__more-list { display: block; }
/* The list sits 6px below the button (margin), leaving a dead strip the
cursor must cross — hover would break there and the menu would snap shut.
This invisible bridge covers that strip. */
.main-nav__more-list::before {
content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px;
}
.main-nav__more-list a {
display: block; padding: 8px 12px; border-radius: 6px;
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
color: var(--ink-2); text-decoration: none; white-space: nowrap;
}
.main-nav__more-list a:hover { background: var(--brand-soft); color: var(--brand-strong); }
/* Sticky-shrink */
.site-header.is-scrolled .main-nav__link { height: 40px; }
/* ===== AXIS: thin brand strip above the header ===== */
.nav-strip.site-header::before { content: ""; display: block; height: 6px; background: var(--brand); }
}
@media (min-width: 861px) {
/* ===== AXIS: position ===== */
/* below → own strip under the bar, container-aligned to the logo. */
.nav-pos--below .main-nav { border-top: 1px solid var(--line); }
.nav-pos--below .main-nav__inner { /* .container class already applied in markup */ }
/* beside → menu on the logo row (single row), filling the middle. */
.nav-inline .site-header__bar { gap: var(--sp-4); }
.nav-inline .main-nav { display: flex; flex: 1; min-width: 0; }
.nav-inline .main-nav__inner { flex: 1; min-width: 0; }
/* flex: 0 0 auto, NOT flex: 1 — this rule is more specific than the base
.main-nav__list one, so a `flex: 1` here re-stretches the list across the
whole row and shoves the overflow button all the way to the right, next
to the search/theme icons. Keeping it auto-width means the button sits
immediately after the last visible menu item, which is the point. */
.nav-inline .main-nav__list { flex: 0 0 auto; min-width: 0; overflow: hidden; }
.nav-inline .main-nav__link { height: var(--header-h); }
.site-header.is-scrolled.nav-inline .main-nav__link { height: 52px; }
/* ===== AXIS: background ===== */
/* colored: the menu area (below) or the whole header (beside) goes brand. */
.nav-pos--below.nav-bg--colored .main-nav { background: var(--brand); border-top: none; }
.nav-pos--below.nav-bg--dark .main-nav { background: var(--brand-strong); border-top: none; }
.nav-inline.nav-bg--colored.site-header { background: var(--brand); }
.nav-inline.nav-bg--dark.site-header { background: var(--brand-strong); }
/* On colored/dark bg: menu links become white for contrast. Idle links are
slightly dimmed so hover/active (full white) gives clear feedback. */
.nav-bg--colored .main-nav__link,
.nav-bg--dark .main-nav__link { color: rgba(255,255,255,.82); }
.nav-bg--colored .main-nav__link:hover,
.nav-bg--dark .main-nav__link:hover,
.nav-bg--colored .main-nav__link.is-active,
.nav-bg--dark .main-nav__link.is-active { color: #fff; }
/* Dropdowns stay light (readable) regardless of bar bg. */
.nav-bg--colored .main-nav__sublink, .nav-bg--dark .main-nav__sublink,
.nav-bg--colored .main-nav__more-list a, .nav-bg--dark .main-nav__more-list a { color: var(--ink-2); }
/* On a colored/dark bar the default rgba(0,0,0,.06) fill is invisible —
flip it to a translucent white so the button still reads as a control. */
.nav-bg--colored .main-nav__more-btn, .nav-bg--dark .main-nav__more-btn {
color: #fff; background: rgba(255,255,255,.16);
}
.nav-bg--colored .main-nav__more-btn:hover, .nav-bg--dark .main-nav__more-btn:hover {
background: rgba(255,255,255,.28);
}
/* When background is colored/dark AND the menu is on the logo row (beside),
the logo + header icons also need to be white. */
.nav-inline.nav-bg--colored .site-logo__accent, .nav-inline.nav-bg--colored .site-logo__mark,
.nav-inline.nav-bg--dark .site-logo__accent, .nav-inline.nav-bg--dark .site-logo__mark { color: #fff; }
.nav-inline.nav-bg--colored .site-header__bar .icon-btn,
.nav-inline.nav-bg--dark .site-header__bar .icon-btn { color: #fff; }
.nav-inline.nav-bg--colored .site-header__bar .icon-btn:hover,
.nav-inline.nav-bg--dark .site-header__bar .icon-btn:hover { background: rgba(255,255,255,.16); }
/* Avatar on a colored/dark header: keep the green online ring, but add a
thin light gap between the photo and the ring so the green doesn't sit
directly against the red bar (which muddies both colors). */
.nav-inline.nav-bg--colored .site-header__bar .user-menu__avatar,
.nav-inline.nav-bg--dark .site-header__bar .user-menu__avatar {
box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 0 0 4px var(--online);
}
.nav-inline.nav-bg--colored .site-header__bar .user-menu__trigger::after,
.nav-inline.nav-bg--dark .site-header__bar .user-menu__trigger::after {
border-color: rgba(255, 255, 255, .85);
}
}
@media (min-width: 861px) {
/* ===== AXIS: active/hover indicator =====
Colors adapt to the background: on light bg the accent is var(--brand);
on colored/dark bg it's white (so it shows against the colored strip). */
/* --- underline --- */
.nav-ind--underline .main-nav__link { border-bottom: 2px solid transparent; }
.nav-ind--underline .main-nav__link:hover,
.nav-ind--underline .main-nav__link.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.nav-bg--colored.nav-ind--underline .main-nav__link:hover,
.nav-bg--colored.nav-ind--underline .main-nav__link.is-active,
.nav-bg--dark.nav-ind--underline .main-nav__link:hover,
.nav-bg--dark.nav-ind--underline .main-nav__link.is-active { color: #fff; border-bottom-color: #fff; }
/* --- divider (vertical lines between items) --- */
.nav-ind--divider .main-nav__item + .main-nav__item::before {
content: ""; align-self: center; width: 1px; height: 16px; background: var(--line);
}
.nav-ind--divider .main-nav__link:hover,
.nav-ind--divider .main-nav__link.is-active { color: var(--brand); }
/* On colored/dark bg the light divider line would vanish, so make it a
semi-transparent white; keep active/hover text white too for contrast. */
.nav-bg--colored.nav-ind--divider .main-nav__item + .main-nav__item::before,
.nav-bg--dark.nav-ind--divider .main-nav__item + .main-nav__item::before {
background: rgba(255,255,255,.4);
}
.nav-bg--colored.nav-ind--divider .main-nav__link:hover,
.nav-bg--dark.nav-ind--divider .main-nav__link:hover,
.nav-bg--colored.nav-ind--divider .main-nav__link.is-active,
.nav-bg--dark.nav-ind--divider .main-nav__link.is-active { color: #fff; }
/* --- pill --- */
.nav-ind--pill .main-nav__link { height: 34px; align-self: center; border-radius: 999px; }
.nav-ind--pill .main-nav__link:hover,
.nav-ind--pill .main-nav__link.is-active { background: var(--brand); color: #fff; }
.nav-bg--colored.nav-ind--pill .main-nav__link:hover,
.nav-bg--colored.nav-ind--pill .main-nav__link.is-active,
.nav-bg--dark.nav-ind--pill .main-nav__link:hover,
.nav-bg--dark.nav-ind--pill .main-nav__link.is-active { background: #fff; color: var(--brand-strong); }
/* --- box (filled square-ish highlight) --- */
.nav-ind--box .main-nav__link:hover,
.nav-ind--box .main-nav__link.is-active { background: var(--brand); color: #fff; border-radius: 7px; }
.nav-bg--colored.nav-ind--box .main-nav__link:hover,
.nav-bg--colored.nav-ind--box .main-nav__link.is-active,
.nav-bg--dark.nav-ind--box .main-nav__link:hover,
.nav-bg--dark.nav-ind--box .main-nav__link.is-active { background: rgba(255,255,255,.2); color: #fff; }
/* ===== AXIS: logo alignment (beside mode only) ===== */
/* left (default): menu right after the logo; icons pushed right. */
.nav-align--left.nav-inline .main-nav__list { justify-content: flex-start; }
/* center: logo centered, menu fills the left, icons on the right. */
.nav-align--center.nav-inline .main-nav { order: 1; }
.nav-align--center.nav-inline .site-logo { order: 2; margin: 0 auto; }
.nav-align--center.nav-inline .site-header__actions { order: 3; }
.nav-align--center.nav-inline .main-nav__list { justify-content: flex-start; }
/* Light-bg pill/box need a readable dropdown; already handled above. */
}
/* ==========================================================================
Header search form (fills the logo-row gap when enabled, below-mode only)
========================================================================== */
.header-search { display: none; } /* mobile: hidden (bottom bar has search) */
@media (min-width: 861px) {
.nav-has-search .header-search {
display: flex; align-items: center; gap: 8px; flex: 1;
margin: 0 auto; padding: 0 14px; height: 40px;
background: var(--surface-2); border: 1px solid var(--line);
transition: border-color .15s, background .15s;
}
/* Corner style — set by header-search--{radius}. */
.header-search--pill { border-radius: 999px; }
.header-search--rounded { border-radius: 10px; }
.header-search--square { border-radius: 3px; }
.nav-has-search .header-search:focus-within { border-color: var(--brand); background: var(--surface-1); }
.header-search__icon { font-size: 18px; color: var(--ink-3); flex-shrink: 0; }
.header-search__input {
flex: 1; min-width: 0; border: 0; background: transparent; outline: none;
font-family: var(--font-ui); font-size: 14px; color: var(--ink);
}
.header-search__input::placeholder { color: var(--ink-3); }
/* Cancel the native search clear button for a cleaner look. */
.header-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
}
/* ==========================================================================
TAGS + IN-CONTENT RELATED CARDS
========================================================================== */
/* --- Tag chips under the article body ----------------------------------- */
.article__tags { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap;
margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--line); }
.article__tags-label { display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-ui); font-size: 12px; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3);
padding-top: 5px; white-space: nowrap; }
.article__tags-list { display: flex; flex-wrap: wrap; gap: 7px; }
.tag-chip { display: inline-flex; align-items: center;
padding: 5px 11px; border-radius: 999px;
background: var(--surface-2); border: 1px solid var(--line);
font-family: var(--font-ui); font-size: 13px; font-weight: 500;
color: var(--ink-2); text-decoration: none;
transition: background .15s, color .15s, border-color .15s; }
.tag-chip:hover { background: var(--brand-soft); border-color: var(--brand);
color: var(--brand); }
/* --- Tag archive page header badge --------------------------------------- */
/* The tag page reuses .category__* wholesale; this is the only addition. */
.tag-hero__icon { display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; margin-right: 8px; border-radius: var(--radius-sm);
background: var(--brand-soft); color: var(--brand);
font-size: 20px; vertical-align: middle; }
/* --- Related card placed INSIDE the article body ------------------------- */
/* Sits between paragraphs, so it must read as an interruption — a tinted
panel with a brand rule on the left — without shouting louder than the
article itself.
IMPORTANT: this card lives INSIDE .article__body, so that block's prose
styling rains down on it. Three rules in particular had to be undone here,
and each needs the extra specificity (.article__body .inline-related...) to
actually win, because .article__body a / img are two-class selectors too:
1. `.article__body a { text-decoration: underline }` — the whole card is an
, so the headline came out underlined like a body link.
2. `.article__body { text-align: justify }` — justification stretched the
word-gaps of the short headline into rivers (very visible on mobile,
where the line is narrow).
3. `.article__body img { height: auto }` + the mobile full-bleed rule
(`margin-inline: -10px; width: calc(100% + 20px)`) — these override the
thumbnail's fixed height, which kills object-fit:cover (it needs a
constrained box) and let the image bleed out of its frame.
Don't "simplify" these back to single-class selectors — they'll silently
lose the cascade again. */
.inline-related { margin: 26px 0; }
.article__body .inline-related__link { display: flex; align-items: center; gap: 14px;
padding: 12px 14px; border-radius: var(--radius);
background: var(--surface-2); border: 1px solid var(--line);
border-left: 3px solid var(--brand);
text-decoration: none; /* undo .article__body a */
text-align: left; /* undo justify */
transition: background .15s, border-color .15s; }
.article__body .inline-related__link:hover { background: var(--brand-soft);
border-color: var(--line-strong); border-left-color: var(--brand);
text-decoration: none; }
/* Fixed 3:2 frame. The thumbnail must keep its box or object-fit has nothing to
cover, which is what left the photo squashed/stretched before. */
.inline-related__media { flex: 0 0 104px; width: 104px; height: 70px;
border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-3); }
.article__body .inline-related__media img {
width: 100%; height: 100%; /* undo .article__body img { height: auto } */
max-width: none; object-fit: cover; object-position: center;
display: block; margin: 0; border-radius: 0; }
.inline-related__noimg { width: 100%; height: 100%; display: flex; align-items: center;
justify-content: center; color: var(--ink-3); font-size: 20px; }
.inline-related__body { flex: 1 1 auto; min-width: 0; }
.inline-related__label { display: inline-flex; align-items: center; gap: 5px;
font-family: var(--font-ui); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--related-label);
margin-bottom: 4px; }
/* The headline is UI, not prose: its own font-size and line-height, never the
body's 18px/1.75 — that was making a 2-line clamp swallow half the title. */
.article__body .inline-related__title { margin: 0;
font-size: 16px; font-weight: 700; line-height: 1.35;
color: var(--ink); text-align: left; text-decoration: none;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; }
.article__body .inline-related__link:hover .inline-related__title { color: var(--brand); }
.inline-related__arrow { flex: 0 0 auto; color: var(--ink-3); font-size: 18px; }
.article__body .inline-related__link:hover .inline-related__arrow { color: var(--brand); }
@media (max-width: 640px) {
.inline-related { margin: 20px 0; }
/* On a 375px screen the old 74px thumb + 14px gap left barely 200px for the
headline, so it clipped at two lines mid-word. Shrinking the thumb and the
type, and allowing THREE lines, is what lets the full headline show — the
user's ask was "make it smaller but show the whole title", and that is a
trade of thumbnail size for text room. */
.article__body .inline-related__link { gap: 10px; padding: 10px; }
.inline-related__media { flex-basis: 76px; width: 76px; height: 52px; }
.inline-related__label { font-size: 10px; margin-bottom: 3px; }
.article__body .inline-related__title { font-size: 14px; line-height: 1.3;
-webkit-line-clamp: 3;
/* Turkish headlines are long; without this a single unbroken word can
still force a clip. Let it hyphenate rather than truncate. */
overflow-wrap: anywhere; hyphens: auto; }
.inline-related__arrow { font-size: 16px; }
.article__tags { flex-direction: column; gap: 8px; }
.article__tags-label { padding-top: 0; }
}
/* --- Comment gate (members-only mode, guest sees this instead of the form) - */
.comment-gate { display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
padding: 16px 18px; margin-bottom: 28px;
background: var(--surface-2); border: 1px solid var(--line);
border-radius: var(--radius); }
.comment-gate > i { font-size: 20px; color: var(--ink-3); flex: 0 0 auto; }
.comment-gate__text { flex: 1 1 200px; margin: 0; font-family: var(--font-ui);
font-size: 14px; color: var(--ink-2); }
@media (max-width: 480px) {
.comment-gate { flex-direction: column; align-items: stretch; text-align: center; }
.comment-gate > i { align-self: center; }
.comment-gate .btn { justify-content: center; }
}
/* ==========================================================================
RELATED ARTICLES — selectable layouts (Haber Detay ayarları)
========================================================================== */
/* Breakpoint switching. These two wrappers only exist when desktop and mobile
are configured DIFFERENTLY — when they match, a single unwrapped block is
rendered and neither rule applies. Keep them display:none rather than
visibility/opacity so the hidden copy costs no layout and no image fetch
(the browser skips loading images inside display:none subtrees). */
.related--mob { display: none; }
@media (max-width: 640px) {
.related--desk { display: none; }
.related--mob { display: block; }
}
/* --- Layout B: featured lead + compact list ------------------------------ */
.related-feat { display: grid; grid-template-columns: 1.15fr 1fr; gap: 18px; }
/* Only one item survived the inline cards — no lead, just the list. */
.related-feat--nolead { grid-template-columns: 1fr; }
.related-feat__lead { display: block; text-decoration: none; color: inherit;
background: var(--surface-1); border: 1px solid var(--line);
border-radius: var(--radius-card); overflow: hidden;
transition: transform .15s, box-shadow .15s; }
.related-feat__lead:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08); }
.related-feat__lead-media { aspect-ratio: 16/9; background: var(--surface-2); overflow: hidden; }
.related-feat__lead-media picture, .related-feat__lead-media img {
width: 100%; height: 100%; object-fit: cover; display: block; }
.related-feat__lead-body { padding: 14px; }
/* The badge is the whole point of this layout: related() ranks by shared tags,
so item 1 really is the closest match — say so. */
.related-feat__badge { display: inline-block; margin-bottom: 7px;
padding: 2px 8px; border-radius: 4px;
background: var(--brand-soft); color: var(--brand);
font-family: var(--font-ui); font-size: 10px; font-weight: 700;
letter-spacing: .05em; }
.related-feat__lead-title { margin: 0 0 6px; font-size: 17px; font-weight: 700;
line-height: 1.35; color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.related-feat__lead:hover .related-feat__lead-title { color: var(--brand); }
.related-feat__lead-spot { margin: 0 0 6px; font-family: var(--font-ui);
font-size: 13px; line-height: 1.45; color: var(--ink-2);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.related-feat__date { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
.related-feat__list { display: flex; flex-direction: column; gap: 10px; }
.related-feat__item { display: flex; gap: 11px; align-items: center;
text-decoration: none; color: inherit;
padding-bottom: 10px; border-bottom: 1px solid var(--line);
transition: background .15s; }
.related-feat__item:last-child { border-bottom: 0; padding-bottom: 0; }
.related-feat__item:hover .related-feat__item-title { color: var(--brand); }
.related-feat__item-media { flex: 0 0 78px; width: 78px; height: 52px;
border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.related-feat__item-media picture, .related-feat__item-media img {
width: 100%; height: 100%; object-fit: cover; display: block; }
.related-feat__item-body { min-width: 0; }
.related-feat__item-title { margin: 0 0 3px; font-size: 14px; font-weight: 700;
line-height: 1.35; color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 640px) {
/* MOBILE: no hero. The lead is FLATTENED into an ordinary strip so all
items read as one scannable list of equal rows.
Why not a big lead here too? At 375px a 16:9 hero eats most of the
viewport for a block the reader is skimming, not studying — and the
ranking survives anyway, because the most-related story is still simply
FIRST in the list. The badge and spot earn their space on desktop; on
mobile they'd just push the other stories off the screen.
This is done in CSS, NOT by rendering different markup: when desktop and
mobile share a layout the page emits ONE block, so the same HTML has to
serve both. Changing the shape here is what lets that stay true. */
.related-feat { grid-template-columns: 1fr; gap: 0; }
/* Lead becomes a strip: same row shape as .related-feat__item. */
.related-feat__lead { display: flex; gap: 10px; align-items: center;
background: transparent; border: 0; border-radius: 0;
padding-bottom: 10px; margin-bottom: 10px;
border-bottom: 1px solid var(--line); }
.related-feat__lead:hover { transform: none; box-shadow: none; }
.related-feat__lead-media { flex: 0 0 68px; width: 68px; height: 46px;
aspect-ratio: auto; border-radius: var(--radius-sm); overflow: hidden; }
.related-feat__lead-body { padding: 0; min-width: 0; }
/* The hero-only extras go away — they're what made it a hero. */
.related-feat__badge,
.related-feat__lead-spot { display: none; }
/* Match the list rows exactly, so nothing gives away that this was a lead. */
.related-feat__lead-title { margin: 0 0 3px; font-size: 14px; line-height: 1.35;
-webkit-line-clamp: 3; overflow-wrap: anywhere; }
/* Long Turkish headlines: a third line rather than a clip. */
.related-feat__item-title { -webkit-line-clamp: 3; overflow-wrap: anywhere; }
.related-feat__item-media { flex-basis: 68px; width: 68px; height: 46px; }
}
/* --- Layout C: numbered list, no images ---------------------------------- */
.related-list { list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
.related-list__row { border-bottom: 1px solid var(--line); }
.related-list__link { display: flex; gap: 12px; align-items: baseline;
padding: 12px 0; text-decoration: none; color: inherit; }
.related-list__link:hover .related-list__title { color: var(--brand); }
/* The number is the ranking, not decoration — item 1 shares the most tags. */
.related-list__num { flex: 0 0 auto; font-size: 18px; font-weight: 700;
color: var(--brand); line-height: 1; min-width: 18px; }
.related-list__body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.related-list__title { font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--ink); }
.related-list__meta { font-family: var(--font-ui); font-size: 12px; color: var(--ink-3); }
@media (max-width: 640px) {
/* One column: two columns of headlines at 375px is unreadable. */
.related-list { grid-template-columns: 1fr; }
.related-list__title { font-size: 14px; overflow-wrap: anywhere; }
.related-list__num { font-size: 16px; }
}
/* ==========================================================================
ADS — IAB formats, native, mobile art
========================================================================== */
/* Every ad carries a visible "Reklam" label by default. This isn't decoration —
Turkish advertising rules (and basic honesty) require paid placement to be
distinguishable from editorial content, and a news site that blurs the line
is trading its credibility for a click. The label CAN be switched off per ad
in the admin; that's the advertiser's call and its cost is stated there. */
.ad { margin: 24px 0; text-align: center; }
.ad__label { display: block; margin-bottom: 6px;
font-family: var(--font-ui); font-size: 10px; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.ad__link { display: block; max-width: 100%; line-height: 0; text-decoration: none; }
/* THE FIX for the oversized header banner.
Before this, an ad image printed at its natural size — upload a squarish
creative and it became a giant block above the article. Now the FRAME owns
the geometry: the format pins an aspect-ratio and a max-width, the image is
fitted into it with object-fit, and nothing the advertiser uploads can blow
the layout apart. */
.ad__media { display: block; margin: 0 auto; max-width: 100%;
border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.ad__media picture, .ad__media img, .ad__img {
width: 100%; height: 100%; display: block; object-fit: cover; max-width: none; }
/* --- The IAB formats ----------------------------------------------------- */
/* aspect-ratio does the enforcing; max-width stops a banner outgrowing its
column on a wide screen. Both are needed: ratio alone would let a 728×90
stretch to 1200px on desktop and look absurd. */
.ad--fmt-leaderboard .ad__media { aspect-ratio: 728/90; max-width: 728px; }
.ad--fmt-billboard .ad__media { aspect-ratio: 970/250; max-width: 970px; }
.ad--fmt-rectangle .ad__media { aspect-ratio: 300/250; max-width: 300px; }
.ad--fmt-halfpage .ad__media { aspect-ratio: 300/600; max-width: 300px; }
.ad--fmt-mobile_banner .ad__media { aspect-ratio: 320/100; max-width: 320px; }
/* "Serbest": keep the creative's own proportions, only cap the width. The safe
default when you don't know what size the advertiser will send. */
.ad--fmt-responsive .ad__media { aspect-ratio: auto; max-width: 100%; }
.ad--fmt-responsive .ad__media img { height: auto; object-fit: contain; }
/* --- Desktop vs mobile artwork ------------------------------------------- */
/* A 970×250 billboard scaled to 375px is unreadable — the text inside it
disappears. So a separate mobile creative can be uploaded, and CSS swaps
them. display:none (not opacity/visibility) so the hidden one costs no
layout and the browser skips downloading it. */
.ad__media--mob { display: none; }
@media (max-width: 640px) {
.ad__media--desk { display: none; }
.ad__media--mob { display: block; }
/* Wide formats can't survive a phone. If no mobile creative was uploaded,
the desktop one is scaled rather than hidden: ugly beats invisible, and
an advertiser paying for a slot should still appear. */
.ad--fmt-leaderboard .ad__media,
.ad--fmt-billboard .ad__media { max-width: 100%; }
/* Height cap on phones for IMAGE ads — a full-width portrait/responsive
creative or a 300×600 halfpage renders 460–600px tall on a 375px screen.
Cap the artwork at 280px and cover-crop it. (Image-on-top TEXT ads —
card / promo_media / promo_side — are shrunk further down, in the later
@media block that sits AFTER their per-style rules, so specificity wins.) */
.ad--fmt-responsive .ad__media,
.ad--fmt-halfpage .ad__media { aspect-ratio: auto; max-height: 280px; }
.ad--fmt-responsive .ad__media img { height: 100%; object-fit: cover; }
.ad__media img, .ad__img { max-height: 280px; }
}
/* Third-party embeds (AdSense) size themselves; just stop them overflowing. */
.ad iframe, .ad ins { max-width: 100%; }
/* --- Slot rhythm --------------------------------------------------------- */
.ad--article_inline, .ad--article_mid { margin: 26px 0; }
.ad--sidebar { margin: 0 0 20px; }
.ad--header { margin: 0 0 20px; }
.ad--footer { margin: 28px 0 0; }
.ad--home_feed_1, .ad--home_feed_2 { margin: 0; }
@media (max-width: 640px) {
.ad { margin: 20px 0; }
.ad--article_inline, .ad--article_mid { margin: 20px 0; }
/* The generic `.ad { margin: 20px 0 }` above re-applies a 20px TOP margin to
the header slot, which sits right under .site-main's own 10px top padding
→ a 30px dead band under the header. The header ad's top spacing is owned
by .site-main; zero its own top margin so the gap is just the 10px. */
.ad--header { margin-top: 0; }
}
/* ==========================================================================
NATIVE ADS — an ad wearing the news card's clothes
==========================================================================
It deliberately borrows the card shape: a banner dropped into a feed of story
cards reads as an interruption and gets scrolled past, while a card that
matches its surroundings gets read. That IS the format's value — and exactly
why the badge matters. Same shape, declared honestly.
The dashed border + tinted background are the tell: close enough to belong,
different enough that nobody mistakes it for editorial. */
.ad--fmt-native { text-align: left; margin: 0; }
.ad--fmt-native .ad__label { display: none; } /* the card carries its own badge */
.ad-native { position: relative; display: block; text-decoration: none; color: inherit;
background: var(--surface-2); border: 1px dashed var(--line-strong);
border-radius: var(--radius-card); overflow: hidden;
transition: transform .15s, box-shadow .15s, border-color .15s; }
.ad-native:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,.08);
border-color: var(--brand); }
.ad-native__media { display: block; aspect-ratio: 3/2; overflow: hidden; background: var(--surface-3); }
.ad-native__media picture, .ad-native__media img {
width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-native__body { display: block; padding: 12px; }
/* The badge. Small, but never absent — this is the line between a native ad and
a deception. */
.ad-native::before { content: 'REKLAM'; position: absolute; z-index: 2;
top: 8px; left: 8px; padding: 3px 8px; border-radius: 4px;
background: rgba(0,0,0,.72); color: #fff;
font-family: var(--font-ui); font-size: 9px; font-weight: 700;
letter-spacing: .08em; }
/* Label switched off for this ad — the badge goes with it. The dashed border
stays, so it still doesn't pass for editorial at a glance. */
.ad-native--nolabel::before { content: none; }
.ad-native__brand { display: block; margin-bottom: 5px;
font-family: var(--font-ui); font-size: 11px; font-weight: 600;
text-transform: uppercase; letter-spacing: .04em; color: var(--brand); }
.ad-native__title { display: block; font-size: 15px; font-weight: 700;
line-height: 1.35; color: var(--ink); margin-bottom: 5px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-native:hover .ad-native__title { color: var(--brand); }
.ad-native__text { display: block; font-family: var(--font-ui);
font-size: 13px; line-height: 1.45; color: var(--ink-2); margin-bottom: 8px;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-native__cta { display: inline-flex; align-items: center; gap: 4px;
font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--brand); }
/* In-body native (article_inline / article_mid): a horizontal strip, matching
the inline related-article card so the body's rhythm doesn't lurch. */
.ad--article_inline .ad-native,
.ad--article_mid .ad-native { display: flex; gap: 14px; align-items: center; padding: 12px; }
.ad--article_inline .ad-native__media,
.ad--article_mid .ad-native__media { flex: 0 0 104px; width: 104px; height: 70px;
aspect-ratio: auto; border-radius: var(--radius-sm); }
.ad--article_inline .ad-native__body,
.ad--article_mid .ad-native__body { padding: 0; min-width: 0; }
.ad--article_inline .ad-native__text,
.ad--article_mid .ad-native__text { display: none; } /* no room in a strip */
@media (max-width: 640px) {
.ad--article_inline .ad-native__media,
.ad--article_mid .ad-native__media { flex-basis: 76px; width: 76px; height: 52px; }
.ad-native__title { font-size: 14px; overflow-wrap: anywhere; }
}
/* ==========================================================================
TEXT ADS — assembled from fields, not uploaded as a picture
==========================================================================
The AdSense-style ad: headline, description lines, display URL, optional
thumbnail, optional button. Four styles, same fields — only the arrangement
changes, so switching style never loses content. */
/* The outer .ad__label is hidden: the card carries its own badge, positioned
over the content where it can't be missed. */
.ad--text { text-align: left; }
.ad--text .ad__label { display: none; }
.ad-text { position: relative; display: block; text-decoration: none; color: inherit;
background: var(--surface-1); border: 1px solid var(--line);
border-radius: var(--radius-card); overflow: hidden;
transition: transform .15s, box-shadow .15s, border-color .15s; }
.ad-text:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,.08);
border-color: var(--brand); }
/* The badge. Same rule as everywhere else in this system: a paid placement has
to be distinguishable from editorial. Removed only when show_label is off,
and even then the dashed border stays. */
.ad-text::before { content: 'REKLAM'; position: absolute; z-index: 2;
top: 8px; right: 8px; padding: 3px 7px; border-radius: 4px;
background: rgba(0,0,0,.66); color: #fff;
font-family: var(--font-ui); font-size: 9px; font-weight: 700;
letter-spacing: .07em; }
.ad-text--nolabel::before { content: none; }
.ad-text--nolabel { border-style: dashed; }
.ad-text__media { display: block; position: relative; overflow: hidden; background: var(--surface-2); flex: 0 0 auto; }
.ad-text__media picture, .ad-text__media img {
width: 100%; height: 100%; object-fit: cover; display: block; }
/* Brand pill overlaid on the image — emitted in the markup only when there's
both an image and a brand, but shown ONLY on mobile (see the ≤640px block).
On desktop the brand lives in the body, so the pill is hidden here to avoid
showing the brand twice. Dark translucent chip + white text = readable over
any image (light or dark) without a per-image contrast gamble; backdrop-blur
is a progressive nicety that costs nothing where unsupported. */
.ad-text__brand-pill { display: none; }
.ad-text__body { display: block; padding: 14px; min-width: 0; }
.ad-text__brand { display: block; margin-bottom: 4px;
font-family: var(--font-ui); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: .05em; color: var(--brand); }
.ad-text__title { display: block; margin-bottom: 6px;
font-size: 16px; font-weight: 700; line-height: 1.35; color: var(--ink);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ad-text:hover .ad-text__title { color: var(--brand); }
.ad-text__lines { display: block; margin-bottom: 8px; }
.ad-text__line { display: block; font-family: var(--font-ui);
font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.ad-text__foot { display: flex; align-items: center; justify-content: space-between;
gap: 10px; flex-wrap: wrap; }
/* The display URL. Green, like AdSense's — it reads as an ADDRESS rather than a
link, which is the point: the reader sees where they're going before they go. */
.ad-text__url { font-family: var(--font-ui); font-size: 12px; font-weight: 600;
color: #1f7a53; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ad-text__cta { display: inline-flex; align-items: center; gap: 4px;
padding: 5px 12px; border-radius: 999px;
background: var(--brand); color: #fff;
font-family: var(--font-ui); font-size: 12px; font-weight: 600;
white-space: nowrap; }
.ad-text:hover .ad-text__cta { filter: brightness(.92); }
/* --- Style: CARD (image on top) — the default, sits in a feed ------------- */
/* 3:2 in narrow columns (sidebar), but capped at 260px so a wide main-column
card doesn't grow a ~520px-tall image. object-fit:cover keeps it undistorted;
only the top/bottom is trimmed past the cap. */
.ad-text--card .ad-text__media { aspect-ratio: 3/2; width: 100%; max-height: 260px; }
/* --- Style: HORIZONTAL (image left) — in-body, below-article -------------- */
.ad-text--horizontal { display: flex; align-items: stretch; }
.ad-text--horizontal .ad-text__media { width: 160px; aspect-ratio: auto; }
.ad-text--horizontal .ad-text__body { flex: 1 1 auto; }
/* --- Style: COMPACT (narrow vertical) — sidebar --------------------------- */
.ad-text--compact .ad-text__media { aspect-ratio: 16/9; width: 100%; }
.ad-text--compact .ad-text__body { padding: 12px; }
.ad-text--compact .ad-text__title { font-size: 15px; }
.ad-text--compact .ad-text__line { font-size: 12px; }
.ad-text--compact .ad-text__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
.ad-text--compact .ad-text__cta { width: 100%; justify-content: center; }
/* --- Style: PLAIN (no image) — the classic text ad ------------------------ */
/* The left brand rule replaces the missing image as the visual anchor —
without it a text-only block just reads as a stray paragraph. */
.ad-text--plain { border-left: 3px solid var(--brand); }
.ad-text--plain .ad-text__media { display: none; }
.ad-text--plain .ad-text__body { padding: 14px 16px; }
/* ==========================================================================
v7 — COLOUR-FILLED TEXT STYLES (promo / promo_media / cta / strip)
==========================================================================
Same markup and fields as the styles above; only the skin differs. The
brand fill is the visual anchor, so these read as a deliberate placement
rather than a stray card. The "REKLAM" badge and dashed-when-unlabelled
rules still apply — they're on .ad-text itself, not per style. */
/* --- Style: PROMO (brand fill, no image) --------------------------------- */
.ad-text--promo { background: var(--brand); border-color: var(--brand); color: #fff; }
.ad-text--promo::before { background: rgba(0,0,0,.28); }
.ad-text--promo .ad-text__media { display: none; }
.ad-text--promo .ad-text__body { padding: 18px; }
.ad-text--promo .ad-text__brand { color: #fff; }
.ad-text--promo .ad-text__title { color: #fff; }
.ad-text--promo .ad-text__line { color: #fff; }
.ad-text--promo .ad-text__url { color: #fff; }
.ad-text--promo .ad-text__cta { background: #fff; color: var(--brand-strong); }
.ad-text--promo:hover { border-color: var(--brand); box-shadow: 0 10px 26px rgba(216,53,47,.34); }
.ad-text--promo:hover .ad-text__title { color: #fff; }
.ad-text--promo:hover .ad-text__cta { filter: none; background: #fff; }
/* --- Style: PROMO_MEDIA (brand fill + image on top) ---------------------- */
.ad-text--promo_media { background: var(--brand); border-color: var(--brand); color: #fff; }
.ad-text--promo_media::before { background: rgba(0,0,0,.35); }
.ad-text--promo_media .ad-text__media { aspect-ratio: 3/2; width: 100%; max-height: 260px; background: var(--brand-strong); }
.ad-text--promo_media .ad-text__body { padding: 16px 18px; }
.ad-text--promo_media .ad-text__brand { color: #fff; }
.ad-text--promo_media .ad-text__title { color: #fff; }
.ad-text--promo_media .ad-text__line { color: #fff; }
.ad-text--promo_media .ad-text__url { color: #fff; }
.ad-text--promo_media .ad-text__cta { background: #fff; color: var(--brand-strong); }
.ad-text--promo_media:hover { border-color: var(--brand); box-shadow: 0 10px 26px rgba(216,53,47,.34); }
.ad-text--promo_media:hover .ad-text__title { color: #fff; }
.ad-text--promo_media:hover .ad-text__cta { filter: none; background: #fff; }
/* --- Style: PROMO_SIDE (brand fill + image on the LEFT) ------------------- */
/* The horizontal twin of promo_media: same red fill and white text, but the
image sits to the left and the copy to the right, so the whole ad is only as
tall as the text (~200px) instead of image-on-top's ~420px. Good when the
placement shouldn't dominate the page. Below 480px it stacks image-on-top. */
.ad-text--promo_side { background: var(--brand); border-color: var(--brand); color: #fff;
display: flex; align-items: stretch; }
.ad-text--promo_side::before { background: rgba(0,0,0,.35); }
.ad-text--promo_side .ad-text__media { width: 300px; flex: 0 0 300px; aspect-ratio: auto;
background: var(--brand-strong); }
.ad-text--promo_side .ad-text__body { flex: 1 1 auto; padding: 16px 18px;
display: flex; flex-direction: column; justify-content: center; }
.ad-text--promo_side .ad-text__brand { color: #fff; }
.ad-text--promo_side .ad-text__title { color: #fff; }
.ad-text--promo_side .ad-text__line { color: #fff; }
.ad-text--promo_side .ad-text__url { color: #fff; }
.ad-text--promo_side .ad-text__cta { background: #fff; color: var(--brand-strong); }
.ad-text--promo_side:hover { border-color: var(--brand); box-shadow: 0 10px 26px rgba(216,53,47,.34); }
.ad-text--promo_side:hover .ad-text__title { color: #fff; }
.ad-text--promo_side:hover .ad-text__cta { filter: none; background: #fff; }
/* --- Style: CTA (white, left brand rule, full-width button) -------------- */
/* The footer becomes a stacked block: a big full-width button, then the URL
centred beneath it. Tıklama odaklı. */
.ad-text--cta { border-left: 4px solid var(--brand); }
.ad-text--cta .ad-text__media { display: none; }
.ad-text--cta .ad-text__body { padding: 18px; }
.ad-text--cta .ad-text__foot { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
.ad-text--cta .ad-text__cta { width: 100%; justify-content: center; padding: 11px;
border-radius: var(--radius-sm); font-size: 13.5px; }
.ad-text--cta .ad-text__url { text-align: center; width: 100%; color: var(--ink-3); }
/* --- Style: STRIP (thin horizontal banner, left brand edge) -------------- */
/* Dar; başlık + tek satır + inline CTA. Az yer kaplar. */
.ad-text--strip { display: flex; align-items: stretch; border-left: 6px solid var(--brand); }
.ad-text--strip .ad-text__media { display: none; }
.ad-text--strip .ad-text__body { flex: 1 1 auto; padding: 13px 15px 13px 14px;
display: flex; flex-direction: column; justify-content: center; }
.ad-text--strip .ad-text__brand { font-size: 10.5px; margin-bottom: 2px; }
.ad-text--strip .ad-text__title { font-size: 15px; margin-bottom: 3px; -webkit-line-clamp: 1; }
.ad-text--strip .ad-text__lines { margin-bottom: 0; }
.ad-text--strip .ad-text__line { font-size: 12.5px; }
.ad-text--strip .ad-text__line + .ad-text__line { display: none; }
.ad-text--strip .ad-text__foot { margin-top: 8px; gap: 8px; }
.ad-text--strip .ad-text__cta { background: none; color: var(--brand); padding: 0;
border-radius: 0; font-weight: 700; }
.ad-text--strip:hover .ad-text__cta { filter: none; text-decoration: underline; }
@media (max-width: 640px) {
/* A 160px thumbnail beside text leaves ~180px for the headline at 375px —
not enough. The horizontal style stacks (image on top) instead of
shrinking further; the artwork height is then capped below with the other
image-on-top styles. */
.ad-text--horizontal { display: block; }
/* promo_side (brand fill + image left) stacks the same way at phone width,
image on top, capped so it doesn't dominate the screen. */
.ad-text--promo_side { display: block; }
/* Image-on-top text ads (card / promo_media / promo_side / horizontal /
compact) put a ~227px image (3:2 of the full width) ON TOP of the
brand+title+two-lines+URL+button, so the TOTAL ad is ~410px on a phone —
too big. This block sits AFTER every per-style
`.ad-text--x .ad-text__media { max-height:260px }` rule (and after the
horizontal `aspect-ratio:3/2` line above), so these same-specificity
overrides win on order. With the brand moved OUT of the body and onto the
image as a pill (freeing ~24px), the artwork can breathe at 150px and the
total still lands near ~290px. */
.ad-text--card .ad-text__media,
.ad-text--promo_media .ad-text__media,
.ad-text--promo_side .ad-text__media,
.ad-text--horizontal .ad-text__media,
.ad-text--compact .ad-text__media {
width: 100%; flex: none; aspect-ratio: auto; max-height: 150px;
}
.ad-text__media img, .ad-text__media picture { height: 100%; object-fit: cover; }
/* Brand becomes a pill on the image (top-left) and the body copy drops its
own brand line, so it shows once. Only the styles that actually render an
image get the pill; image-less styles (plain/promo/cta/strip) keep the
body brand — their media span, and thus the pill, isn't emitted anyway. */
.ad-text--card .ad-text__brand,
.ad-text--promo_media .ad-text__brand,
.ad-text--promo_side .ad-text__brand,
.ad-text--horizontal .ad-text__brand,
.ad-text--compact .ad-text__brand { display: none; }
.ad-text__brand-pill {
display: inline-block; position: absolute; top: 8px; left: 8px;
max-width: calc(100% - 16px); box-sizing: border-box;
padding: 3px 9px; border-radius: 4px;
background: rgba(17, 19, 24, .72); color: #fff;
font-family: var(--font-ui); font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: .04em; line-height: 1.4;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
-webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.ad-text__title { font-size: 15px; overflow-wrap: anywhere; }
.ad-text__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
.ad-text__cta { width: 100%; justify-content: center; }
}
/* ==========================================================================
v6 — RAIL ADS (vertical skyscrapers) + STICKY BOTTOM BAR
==========================================================================
These are placements, not styles. The rails live OUTSIDE the 1000px
container and are position:fixed, so they never touch the content flow.
They only appear when there's enough room on either side of the container:
1000px content + 2×(180px rail + 10px gap) fits from ~1380px of viewport.
Below that they're display:none — no overlap, ever. */
.ad-rail {
position: fixed; top: calc(var(--header-h) + 12px); height: 600px;
width: 180px; z-index: 40;
display: none; /* shown only ≥1380px, see media query */
align-items: stretch; /* the ad fills the full rail height */
justify-content: center;
pointer-events: none; /* the wrapper is inert; the ad re-enables */
}
.ad-rail > * { pointer-events: auto; width: 180px; }
.ad-rail .ad { margin: 0; width: 180px; height: 100%; } /* fill the rail, no default margin */
/* The rail ad is a SKYSCRAPER: it fills the whole 180px-wide column top to
bottom. Its body becomes a column so the image sits at the top and the text
block + button spread down the rest of the height instead of leaving the
lower half empty. Any text style is normalised to this tall shape in a rail. */
.ad-rail .ad-text {
width: 180px; height: 100%;
display: flex; flex-direction: column;
}
.ad-rail .ad-text__media { flex: 0 0 auto; }
.ad-rail .ad-text__body {
flex: 1 1 auto; display: flex; flex-direction: column;
justify-content: flex-start; /* content (title, URL, button) stays at the top */
}
/* The foot (URL + button) stays right after the text, NOT pushed to the bottom
— the user wants the content grouped at the top and only the FRAME tall. */
.ad-rail .ad-text__foot { margin-top: 0; }
.ad-rail--left { left: 0; }
.ad-rail--right { right: 0; }
/* The rail becomes visible only when the viewport is wide enough that a 180px
column fits beside the centred 1000px container without touching it:
(1380 - 1000) / 2 = 190px per side ≥ 180px rail + 10px gap. As soon as it
shows, pin it just outside the container edge (not the screen edge) so it
stays close to the content at EVERY width — otherwise a wide screen would
leave a big gap between the rail (at the screen edge) and the centred
container. The maths: 50% - half-container(500) - gap(10) - rail(180). At
1380px this puts the rail flush to the screen edge (0px), so it never
overlaps the container or leaves the viewport. (180px rail can't fit 1300px —
it needs 1380 — so the user chose 180px + a 1380px threshold over a narrower
rail that would show from 1300px.) */
@media (min-width: 1380px) {
.ad-rail { display: flex; }
.ad-rail--left { left: calc(50% - 500px - 10px - 180px); right: auto; }
.ad-rail--right { right: calc(50% - 500px - 10px - 180px); left: auto; }
}
/* ---- Sticky bottom bar --------------------------------------------------
A slim, dismissible bar pinned to the bottom on every scroll position. Its
inner uses .container so the ad lines up with the page content. app.js
unhides it (and honours a per-session dismissal). */
.ad-sticky-bottom {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
background: var(--surface-1); border-top: 2px solid var(--brand);
box-shadow: 0 -4px 16px rgba(0,0,0,.10);
animation: ad-sticky-in .25s ease;
}
@keyframes ad-sticky-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.ad-sticky-bottom__inner {
display: flex; align-items: center; gap: 12px;
min-height: 73px; /* + the bar's 2px red top rule + a hair ≈ 75px total */
padding-top: 4px; padding-bottom: 4px;
}
/* Inside the bar every style stays SLIM (one horizontal row, no tall card) but
KEEPS its visual identity — promo's red fill, cta/strip/plain's left brand
rule, card/horizontal's thumbnail. We only normalise the LAYOUT to a row and
trim the height; we do NOT strip colours/borders (that made all 8 look
identical). */
.ad-sticky-bottom__inner .ad { flex: 1 1 auto; min-width: 0; margin: 0; } /* kill the .ad wrapper's 24px block margin — THAT was the 100px bar */
.ad-sticky-bottom__inner .ad-text {
/* Drop the card's box outline (top/right/bottom) so there's no frame-inside-
a-frame in the bar — only the bar's own top rule remains. The LEFT border
stays untouched so cta/strip/plain keep their brand rule; promo keeps its
fill because we don't touch background here. */
border-top: none; border-right: none; border-bottom: none;
border-radius: 0; transform: none !important; box-shadow: none !important;
display: flex; flex-direction: row; align-items: center; gap: 12px;
padding: 4px 14px 4px 0;
}
.ad-sticky-bottom__inner .ad-text::before { display: none; } /* bar is clearly an ad; skip the corner badge */
/* A small square thumbnail on the left instead of a full-width banner, so
card/horizontal/compact/promo_media still SHOW their image but stay slim. */
.ad-sticky-bottom__inner .ad-text__media {
flex: 0 0 auto; width: 76px; height: 52px; aspect-ratio: auto;
border-radius: 6px; overflow: hidden; align-self: center;
}
.ad-sticky-bottom__inner .ad-text__media img,
.ad-sticky-bottom__inner .ad-text__media picture { width: 100%; height: 100%; object-fit: cover; }
.ad-sticky-bottom__inner .ad-text__body {
padding: 6px 0 6px 14px; display: flex; flex-direction: row; align-items: center;
gap: 4px 10px; flex-wrap: nowrap; min-width: 0; flex: 1 1 auto; overflow: hidden;
}
.ad-sticky-bottom__inner .ad-text--cta .ad-text__body,
.ad-sticky-bottom__inner .ad-text--compact .ad-text__body,
.ad-sticky-bottom__inner .ad-text--strip .ad-text__body,
.ad-sticky-bottom__inner .ad-text--plain .ad-text__body { padding: 6px 0 6px 14px; }
.ad-sticky-bottom__inner .ad-text__brand { display: none; } /* title carries identity; save the width */
.ad-sticky-bottom__inner .ad-text__title {
-webkit-line-clamp: 1; font-size: 14px; margin-bottom: 0; flex: 0 1 auto;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-sticky-bottom__inner .ad-text__lines { margin-bottom: 0; display: inline; }
.ad-sticky-bottom__inner .ad-text__line {
display: inline; font-size: 12.5px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ad-sticky-bottom__inner .ad-text__line + .ad-text__line { display: none; } /* one line fits; hide the rest */
.ad-sticky-bottom__inner .ad-text__foot { margin: 0 0 0 auto; flex: 0 0 auto; }
.ad-sticky-bottom__inner .ad-text__url { display: none; } /* URL not needed in a one-line bar */
/* Compact CTA in the bar: some styles (cta, compact) make it full-width with
big padding for the card; in the bar it must be a small inline pill so the
row stays ~48px tall. */
.ad-sticky-bottom__inner .ad-text__cta {
width: auto !important; padding: 5px 11px !important; font-size: 12px;
line-height: 1.1; white-space: nowrap; justify-content: center;
}
.ad-sticky-bottom__close {
flex: 0 0 auto; width: 30px; height: 30px; border: none; cursor: pointer;
border-radius: 50%; background: var(--surface-3); color: var(--ink-2);
display: flex; align-items: center; justify-content: center; font-size: 17px;
transition: background .15s, color .15s;
}
.ad-sticky-bottom__close:hover { background: var(--brand-soft); color: var(--brand); }
/* When the bar is present, lift the back-to-top / other fixed corner UI is not
our concern here, but give the page a little breathing room so the bar never
hides the last line of the footer on short pages. */
body:has(.ad-sticky-bottom:not([hidden])) { padding-bottom: 60px; }
@media (max-width: 640px) {
.ad-sticky-bottom__inner { gap: 8px; padding-inline: 10px; padding-top: 5px; padding-bottom: 5px; }
/* On a phone only the headline + a compact button + close need to fit. The
lines are dropped so the bar stays one tidy row, never wrapping tall. */
.ad-sticky-bottom__inner .ad-text__title { font-size: 13.5px; }
.ad-sticky-bottom__inner .ad-text__lines { display: none; }
.ad-sticky-bottom__inner .ad-text__cta {
padding: 7px 12px; font-size: 12px; white-space: nowrap;
}
.ad-sticky-bottom__close { width: 26px; height: 26px; font-size: 15px; }
}