/* Shared scenery and sculpted header. Only the site shell is affected. */
:root {
  --scene-image: var(--scene-default, url('../themes/scenes/zeytin.svg'));
  --scene-bg: var(--t-bg, #f7f7f6);
  --scene-surface: var(--t-surface, #ffffff);
  --scene-text: var(--t-text, #24251d);
  --scene-accent: rgb(var(--t-accent, 122 155 58));
  --scene-shadow: rgb(0 0 0 / .18);
  --scene-light: rgb(255 255 255 / .28);
  --scene-size: max(100vw, 160svh) auto;
  --site-header-height: 116px;
  --scene-blur: 0px;
  --scene-saturation: 1;
  --reading-surface: color-mix(in srgb, var(--scene-surface) 45%, transparent);
}
html.dark {
  --scene-default: url('../themes/scenes/modern.svg');
  --scene-bg: var(--t-bg, #0f0e0c);
  --scene-surface: var(--t-surface, #1a1916);
  --scene-text: var(--t-text, #f7f7f6);
  --scene-shadow: rgb(0 0 0 / .48);
  --scene-light: rgb(255 255 255 / .13);
}
html.dark:not([data-theme-name]) { --scene-image: var(--scene-default, url('../themes/scenes/modern.svg')); }
html body {
  isolation: isolate;
  background-color: var(--scene-bg) !important;
  background-image: none !important;
}
/* Blur the scenery only; text, controls and content remain sharp. */
html body::before, html body::after {
  content: '';
  position: fixed;
  pointer-events: none;
}
html body::before {
  inset: -20px;
  z-index: -2;
  background: var(--scene-custom, var(--scene-image)) center top / var(--scene-size) no-repeat;
  filter: blur(var(--scene-blur)) saturate(var(--scene-saturation));
}
html body::after {
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--scene-bg) var(--photo-wash-top, 22%), transparent), color-mix(in srgb, var(--scene-bg) var(--photo-wash-bottom, 52%), transparent)),
    radial-gradient(ellipse at 12% 6%, color-mix(in srgb, var(--scene-accent) 20%, transparent), transparent 56%);
}
html body > .site-header,
html body > .portal-header {
  isolation: isolate;
  color: var(--scene-text);
  background-color: transparent !important;
  background-image:
    linear-gradient(180deg, rgb(255 255 255 / .04), transparent 42%, rgb(0 0 0 / .09)),
    linear-gradient(115deg, color-mix(in srgb, color-mix(in srgb, var(--scene-accent) 10%, var(--scene-surface)) 33%, transparent), color-mix(in srgb, var(--scene-bg) 30%, transparent) 60%, color-mix(in srgb, color-mix(in srgb, var(--scene-accent) 4%, var(--scene-bg)) 35%, transparent));
  border-top: 1px solid color-mix(in srgb, var(--scene-accent) 55%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--scene-accent) 32%, var(--scene-surface));
  box-shadow: inset 0 1px 0 var(--scene-light), inset 0 -2px 0 color-mix(in srgb, var(--scene-shadow) 45%, transparent), 0 2px 0 var(--scene-bg), 0 8px 22px -8px var(--scene-shadow);
  backdrop-filter: blur(10px) saturate(.8);
}
/* Override palette utility backgrounds so portal headers share the same alpha. */
html[data-theme-name] body > .site-header,
html[data-theme-name] body > .portal-header { background-color: transparent !important; }
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% -60%, color-mix(in srgb, var(--scene-accent) 22%, transparent), transparent 75%);
}
.site-header-top { height: 76px; gap: clamp(12px, 2vw, 28px); }
.site-header .site-logo, .site-header [data-logo] { text-shadow: 0 2px 1px var(--scene-shadow); }
.site-header [data-arama-form] { max-width: 580px; min-width: 0; }
.site-header [data-arama-basit] {
  position: relative;
  padding: 2px;
  border: 1px solid color-mix(in srgb, var(--scene-accent) 38%, var(--scene-surface));
  border-radius: 0;
  background: var(--scene-surface);
  box-shadow: inset 0 1px 0 var(--scene-light), 0 2px 7px -3px var(--scene-shadow);
  transition: border-color .18s, box-shadow .18s;
}
.site-header [data-arama-basit]:focus-within {
  border-color: var(--scene-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--scene-accent) 22%, transparent);
}
html .site-header [data-arama-input] {
  height: 38px;
  min-width: 0;
  border: 0;
  border-radius: 0;
  background: var(--scene-bg) !important;
  color: var(--scene-text) !important;
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--scene-shadow) 40%, transparent);
}
html .site-header [data-arama-input]::placeholder { color: var(--scene-text); opacity: .65; }
html .site-header [data-arama-basit] > button {
  height: 38px;
  width: 40px;
  flex-shrink: 0;
  border: 0;
}
html .site-header [data-arama-detay-ac] { background: var(--scene-bg) !important; color: var(--scene-text); }
html .site-header [data-arama-basit] > button[type=submit] {
  margin-left: 4px;
  border-radius: 0;
  background: linear-gradient(155deg, color-mix(in srgb, var(--scene-accent) 88%, white), var(--scene-accent)) !important;
  color: var(--scene-button-text, #101510) !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .2);
}
.site-header [data-arama-basit] > button:active { transform: translateY(1px); }
.site-header [data-arama-oneriler], .site-header [data-arama-detay] { top: calc(100% + 12px); }
.site-header [data-arama-detay] { max-width: calc(100vw - 24px); }
.site-header .site-main-nav {
  min-height: 38px;
  height: auto;
  border-top: 1px solid color-mix(in srgb, var(--scene-accent) 16%, transparent);
  gap: clamp(10px, 1.4vw, 22px);
}
.site-header .site-main-nav > a { padding-block: 10px; }
.site-header .site-main-nav > .ml-auto { gap: clamp(8px, 1.2vw, 20px); }
.site-header a:focus-visible, .site-header button:focus-visible {
  outline: 2px solid var(--scene-accent);
  outline-offset: 3px;
}
html { scroll-padding-top: calc(var(--site-header-height) + 20px); }
body .sticky.top-20 { top: calc(var(--site-header-height) + 20px); }
.yan-menu { max-height: calc(100dvh - var(--site-header-height) - 120px); }
/* Preserve each palette's hue, with readable link tones on its content surfaces. */
html[data-theme-name] .text-accent,
html[data-theme-name] .text-accent-dark,
html[data-theme-name] .entry-content a {
  color: var(--scene-link, var(--scene-accent)) !important;
}
body > footer {
  background-color: var(--scene-surface) !important;
  background-image: linear-gradient(115deg, color-mix(in srgb, var(--scene-accent) 7%, var(--scene-surface)), var(--scene-bg));
  background-position: center bottom;
  background-size: cover;
  border-top: 1px solid color-mix(in srgb, var(--scene-accent) 25%, transparent);
}
@media (min-width: 768px) and (max-width: 1199px) {
  .site-header .site-main-nav { flex-wrap: wrap; padding-block: 5px; gap: 6px 14px; }
  .site-header .site-main-nav > a { padding-block: 3px; }
  .site-header .site-main-nav > .ml-auto { flex-wrap: wrap; margin-left: 0; gap: 8px 14px; }
}
@media (max-width: 639px) {
  .site-header-top { flex-wrap: wrap; height: auto; min-height: 112px; padding-block: 10px 14px; gap: 8px; }
  .site-header [data-arama-form] { display: flex; order: 10; flex-basis: 100%; max-width: none; }
  .site-header [data-arama-basit] { border-radius: 0; padding: 2px; }
  html .site-header [data-arama-input], html .site-header [data-arama-basit] > button { height: 36px; }
  html body::before { background-size: auto max(100svh, 900px); }
}
@media (prefers-reduced-motion: reduce) {
  .site-header [data-arama-basit] { transition: none; }
  .site-header [data-arama-basit] > button:active { transform: none; }
}
@media (forced-colors: active) {
  html body::before, html body::after { display: none; }
  html body, html body > .site-header, html body > .portal-header, body > footer { background-image: none !important; }
  .site-header [data-arama-basit] { border: 1px solid ButtonText; }
}

/* Standalone portals share the theme without inheriting the dictionary's grid. */
html .portal-shell { color: var(--scene-text) !important; }
.portal-shell .grid, .portal-shell .grid > * { min-width: 0; }
.portal-shell input, .portal-shell textarea, .portal-shell select { min-width: 0; max-width: 100%; }
.portal-header { position: relative; }
.portal-header form { min-width: 0; }
.portal-header form input { flex: 1 1 auto; }
@media (max-width: 639px) {
  .portal-header > div:first-child { flex-wrap: wrap; row-gap: 10px; }
  .portal-header form { flex: 1 1 180px; }
  .portal-header form button { flex-shrink: 0; }
}
html .portal-header > .bg-ink-900,
html .portal-header > .bg-white { background-color: transparent !important; }
html .portal-shell .hero-bg,
html .portal-shell .hero {
  position: relative;
  isolation: isolate;
  background: var(--scene-bg) !important;
  color: var(--scene-text);
}
.portal-shell .hero::before, .portal-shell .hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--scene-custom, var(--scene-image)) center / cover;
  filter: blur(var(--scene-blur)) saturate(var(--scene-saturation));
  opacity: .24;
  /* Keep blurred edges inside the hero without clipping menus or controls. */
  clip-path: inset(0);
}
.portal-shell .hero::after, .portal-shell .hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, color-mix(in srgb, var(--scene-accent) 12%, transparent), transparent 70%);
}
.portal-shell .hero + main, .portal-shell .hero-bg + main {
  position: relative;
  z-index: 1;
}
@media (forced-colors: active) {
  .portal-shell .hero::before, .portal-shell .hero::after,
  .portal-shell .hero-bg::before, .portal-shell .hero-bg::after { display: none; }
}
html .portal-shell input[type=search],
html .portal-shell form:has(input[type=search]),
html .portal-shell form:has(input[type=search]) button,
html .portal-shell .hero-bg form,
html .portal-shell .hero-bg form input,
html .portal-shell .hero-bg form button,
html .portal-header input, html .portal-header button,
html .site-header [data-arama-basit] input,
html .site-header [data-arama-basit] button { border-radius: 0; }
.portal-photo-credits { padding: 16px 24px; text-align: center; }
.theme-photo-credits {
  display: inline-block;
  padding: 6px 10px;
  font-size: 11px;
  color: var(--scene-text);
  background: color-mix(in srgb, var(--scene-surface) 92%, transparent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (min-width: 1024px) {
  html body > div > aside > .sticky {
    padding: 12px;
    background: var(--reading-surface);
    border: 1px solid color-mix(in srgb, var(--scene-text) 12%, transparent);
  }
}
/* Content is gently translucent, but stays more opaque than the header.
   Tint backgrounds only: text, buttons and uploaded images retain full opacity. */
html:root body li[data-entry-id],
html:root body .reading-surface,
html:root body .topic-sidebar,
html:root body .info-sidebar > .border,
html:root body .info-sidebar > .vitrin {
  background-color: var(--reading-surface) !important;
}
/* Avoid stacking two translucent backgrounds into an opaque right column. */
html:root body .info-sidebar {
  background: transparent;
}
@media (forced-colors: active) {
  html:root body li[data-entry-id],
  html:root body .reading-surface,
  html:root body .topic-sidebar,
  html:root body .info-sidebar > .border,
  html:root body .info-sidebar > .vitrin {
    background-color: Canvas !important;
  }
}