/* ==========================================================================
   MHR Mühendislik — pages.css
   Inner-page component styles (token-driven, no build step). Loaded after
   base.css. Covers: page hero, breadcrumb, prose, spec readouts/tables,
   accordion (native <details>), gallery, filter bar, pagination, process
   steps, timeline, team/cert cards, logo wall, contact cards, share row.
   Every value resolves to a token in tokens.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Inner page hero (solid header sits above it)
   -------------------------------------------------------------------------- */
.page-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--color-primary);
  color: var(--color-white);
  padding-block: var(--space-7) var(--space-6);
}
.page-hero__blueprint {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--blueprint-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line-dark) 1px, transparent 1px);
  background-size: var(--blueprint-cell) var(--blueprint-cell);
  -webkit-mask-image: radial-gradient(120% 120% at 20% 0%, #000 40%, transparent 90%);
  mask-image: radial-gradient(120% 120% at 20% 0%, #000 40%, transparent 90%);
}
.page-hero__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(90% 70% at 85% 0%, rgba(28, 111, 214, 0.3), transparent 60%),
    radial-gradient(70% 70% at 0% 100%, rgba(62, 169, 53, 0.16), transparent 55%);
}
.page-hero__inner { position: relative; z-index: 1; max-width: var(--measure); }
.page-hero__inner--center { margin-inline: auto; text-align: center; }
.page-hero__title {
  font-size: clamp(2.25rem, 4vw + 1rem, var(--fs-page));
  color: var(--color-white);
  margin-block: var(--space-2) var(--space-3);
}
.page-hero__intro {
  font-size: var(--fs-body);
  color: rgba(255, 255, 255, 0.78);
  max-width: 62ch;
  text-wrap: pretty;
}
.page-hero__inner--center .page-hero__intro { margin-inline: auto; }
.page-hero .eyebrow { color: var(--color-accent); }
.page-hero .eyebrow::before { background: var(--color-accent); }

/* --------------------------------------------------------------------------
   Breadcrumb
   -------------------------------------------------------------------------- */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  letter-spacing: var(--tracking-mono);
}
.breadcrumb a { color: inherit; opacity: 0.75; }
.breadcrumb a:hover { opacity: 1; color: var(--color-accent); }
.breadcrumb__sep { opacity: 0.4; }
.breadcrumb [aria-current="page"] { opacity: 0.55; }
.page-hero .breadcrumb { color: rgba(255, 255, 255, 0.85); }

/* --------------------------------------------------------------------------
   Content layout: main + sidebar
   -------------------------------------------------------------------------- */
.content-layout {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
  .content-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-7); }
  .content-layout--narrow { grid-template-columns: minmax(0, 1fr) 300px; }
}
.content-sidebar { align-self: start; }
@media (min-width: 1024px) {
  .content-sidebar--sticky { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
}
.content-main { min-width: 0; }

.sidebar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.sidebar-card + .sidebar-card { margin-top: var(--space-3); }
.sidebar-card__title {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

/* --------------------------------------------------------------------------
   Prose (article / rich content body)
   -------------------------------------------------------------------------- */
.prose { max-width: var(--measure); color: var(--color-text); }
.prose > * + * { margin-top: var(--space-3); }
.prose h2 { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); margin-top: var(--space-5); }
.prose h3 { font-size: var(--fs-card); margin-top: var(--space-4); }
.prose h4 { font-size: 1.15rem; margin-top: var(--space-3); }
.prose p, .prose li { line-height: var(--lh-body); color: var(--color-text-secondary); }
.prose strong { color: var(--color-text); }
.prose a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(28,111,214,0.4); }
.prose a:hover { text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-inline-start: 1.25em; display: grid; gap: 8px; }
.prose ul { list-style: none; padding-inline-start: 0; }
.prose ul > li { position: relative; padding-inline-start: 1.6em; }
.prose ul > li::before {
  content: "";
  position: absolute; left: 0; top: 0.6em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--color-accent);
}
.prose ol { list-style: decimal; }
.prose blockquote {
  margin-inline: 0;
  padding: var(--space-3) var(--space-4);
  border-inline-start: 3px solid var(--color-accent);
  background: var(--surface-muted);
  border-radius: var(--radius-input);
  font-size: 1.15rem;
  color: var(--color-text);
}
.prose img, .prose figure { border-radius: var(--radius-image); overflow: hidden; }
.prose figcaption { font-size: var(--fs-small); color: var(--color-text-secondary); margin-top: 8px; text-align: center; }
.prose hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-5); }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.prose th, .prose td { padding: 10px 12px; border-bottom: 1px solid var(--color-border); text-align: start; }
.prose thead th { font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-mono); }
.prose :where(pre, code) { font-family: var(--font-mono); }
.prose pre { background: var(--color-primary); color: #e6edf3; padding: var(--space-3); border-radius: var(--radius-input); overflow-x: auto; }

.lead {
  font-size: clamp(1.15rem, 1vw + 1rem, 1.375rem);
  line-height: 1.55;
  color: var(--color-text);
  max-width: var(--measure);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Spec readout (project meta as instrument-panel data)
   -------------------------------------------------------------------------- */
.spec-readout {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.spec-readout__item { background: var(--color-surface); padding: var(--space-3) var(--space-4); }
.spec-readout__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}
.spec-readout__value {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: 1.15rem;
  font-weight: var(--fw-bold);
  color: var(--color-text);
}
.spec-readout__value .accent { color: var(--color-accent); }

/* Two-column spec table (solutions, technical specs — never a price) */
.spec-table {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.spec-table__row {
  display: grid;
  grid-template-columns: minmax(120px, 40%) 1fr;
  gap: var(--space-2);
  padding: 12px var(--space-4);
  border-bottom: 1px solid var(--color-border);
}
.spec-table__row:last-child { border-bottom: 0; }
.spec-table__row:nth-child(odd) { background: var(--surface-muted); }
.spec-table__key {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-secondary);
}
.spec-table__val { font-weight: var(--fw-medium); }

/* --------------------------------------------------------------------------
   Accordion / FAQ — native <details>, zero JS
   -------------------------------------------------------------------------- */
.accordion { display: grid; gap: var(--space-2); max-width: var(--measure); }
.accordion__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  overflow: hidden;
}
.accordion__item[open] { border-color: var(--color-secondary); box-shadow: var(--shadow-sm); }
.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-3) var(--space-4);
  font-weight: var(--fw-semibold);
  font-size: 1.05rem;
  cursor: pointer;
  list-style: none;
}
.accordion__trigger::-webkit-details-marker { display: none; }
.accordion__trigger::after {
  content: "";
  flex-shrink: 0;
  width: 12px; height: 12px;
  border-right: 2px solid var(--color-accent);
  border-bottom: 2px solid var(--color-accent);
  transform: rotate(45deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
.accordion__item[open] .accordion__trigger::after { transform: rotate(-135deg); }
.accordion__panel { padding: 0 var(--space-4) var(--space-4); color: var(--color-text-secondary); }
.accordion__panel > * + * { margin-top: var(--space-2); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */
.gallery {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
}
.gallery__item {
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--surface-muted);
}
.gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-emphasis); }
.gallery__item:hover img { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   Filter bar (archives)
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
  align-items: center;
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
}
.filter-bar__group { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.filter-bar__label {
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-secondary);
}
.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  min-height: 40px;
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  transition: all var(--dur-fast) var(--ease-standard);
}
.filter-chip:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.filter-chip.is-active,
.filter-chip[aria-current="page"] {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Pagination (the_posts_pagination)
   -------------------------------------------------------------------------- */
.pagination { margin-top: var(--space-6); }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px; min-height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  background: var(--color-surface);
}
.pagination .page-numbers:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.pagination .page-numbers.current {
  background: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-white);
}
.pagination .page-numbers.dots { border-color: transparent; background: transparent; }

/* Load-more / simple pager */
.pager { display: flex; justify-content: space-between; gap: var(--space-2); margin-top: var(--space-6); }

/* --------------------------------------------------------------------------
   Process steps (numbered — real sequence)
   -------------------------------------------------------------------------- */
.step-list { display: grid; gap: var(--space-4); counter-reset: mhr-step; }
@media (min-width: 768px) { .step-list--row { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } }
.step { position: relative; padding-inline-start: 64px; }
.step__num {
  position: absolute;
  left: 0; top: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-pill);
  background: rgba(28, 111, 214, 0.1);
  color: var(--color-secondary);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}
.step__title { font-size: 1.15rem; margin-bottom: 6px; }
.step__text { color: var(--color-text-secondary); font-size: 0.95rem; }
.section--navy .step__text { color: rgba(255,255,255,0.72); }
.section--navy .step__num { background: rgba(62,169,53,0.16); color: var(--color-accent); }

/* --------------------------------------------------------------------------
   Timeline (corporate milestones)
   -------------------------------------------------------------------------- */
.timeline { display: grid; gap: var(--space-4); border-inline-start: 2px solid var(--color-border); padding-inline-start: var(--space-4); }
.timeline__item { position: relative; }
.timeline__item::before {
  content: "";
  position: absolute; left: calc(-1 * var(--space-4) - 6px); top: 6px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-accent);
  box-shadow: 0 0 0 4px var(--color-bg);
}
.timeline__year { font-family: var(--font-mono); font-weight: var(--fw-bold); color: var(--color-secondary); }

/* --------------------------------------------------------------------------
   Team / certification cards, logo wall
   -------------------------------------------------------------------------- */
.team-card { padding: var(--space-3); text-align: center; align-items: center; }
.team-card__photo { width: 96px; height: 96px; border-radius: var(--radius-pill); overflow: hidden; margin: 0 auto var(--space-2); background: var(--surface-muted); }
.team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.team-card__name { font-size: 1.05rem; font-weight: var(--fw-bold); }
.team-card__role { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-mono); }

.cert-card { padding: var(--space-3); align-items: center; text-align: center; gap: var(--space-1); }
.cert-card__img { height: 72px; display: flex; align-items: center; justify-content: center; margin-bottom: var(--space-1); }
.cert-card__img img { max-height: 72px; width: auto; }
.cert-card__name { font-size: 0.95rem; font-weight: var(--fw-semibold); }
.cert-card__meta { font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-text-secondary); }

.logo-wall {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(auto-fill, minmax(min(50%, 180px), 1fr));
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
}
.logo-wall__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 110px;
  padding: var(--space-3);
  background: var(--color-surface);
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter var(--dur-base) var(--ease-standard), opacity var(--dur-base) var(--ease-standard);
}
.logo-wall__item:hover { filter: grayscale(0); opacity: 1; }
.logo-wall__item img { max-height: 56px; width: auto; }

/* --------------------------------------------------------------------------
   Check list (values / included items)
   -------------------------------------------------------------------------- */
.check-list { display: grid; gap: 12px; }
.check-list li { position: relative; padding-inline-start: 32px; color: var(--color-text-secondary); }
.check-list li::before {
  content: "";
  position: absolute; left: 0; top: 2px;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(62,169,53,0.14);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233EA935' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* --------------------------------------------------------------------------
   Contact info cards + share row
   -------------------------------------------------------------------------- */
.contact-cards { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.contact-card { padding: var(--space-4); gap: var(--space-1); }
.contact-card__icon { display: inline-flex; width: 48px; height: 48px; align-items: center; justify-content: center; border-radius: var(--radius-input); background: rgba(28,111,214,0.08); color: var(--color-secondary); margin-bottom: var(--space-1); }
.contact-card__label { font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-mono); color: var(--color-text-secondary); }
.contact-card__value { font-weight: var(--fw-semibold); }
.map-embed { border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--color-border); aspect-ratio: 16 / 9; }
.map-embed iframe { width: 100%; height: 100%; border: 0; display: block; }

.share-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.share-row__label { font-family: var(--font-mono); font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-mono); color: var(--color-text-secondary); }
.share-row a { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border-radius: var(--radius-pill); border: 1px solid var(--color-border); color: var(--color-text-secondary); }
.share-row a:hover { border-color: var(--color-secondary); color: var(--color-secondary); }

/* Term chips (post categories/tags) */
.term-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.term-chips a {
  display: inline-flex; padding: 4px 12px;
  font-family: var(--font-mono); font-size: 0.75rem;
  text-transform: uppercase; letter-spacing: var(--tracking-mono);
  border-radius: var(--radius-pill);
  background: var(--surface-muted); color: var(--color-text-secondary);
}
.term-chips a:hover { background: var(--color-secondary); color: var(--color-white); }

/* Article meta line */
.article-meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-3); align-items: center; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--color-text-secondary); }
.article-meta .icon { width: 15px; height: 15px; vertical-align: -2px; }

/* Author box */
.author-box { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-4); background: var(--surface-muted); border-radius: var(--radius-card); margin-top: var(--space-5); }
.author-box__avatar { width: 64px; height: 64px; border-radius: var(--radius-pill); overflow: hidden; flex-shrink: 0; background: var(--color-border); }
.author-box__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* Section divider with blueprint tick */
.section--alt { background: var(--surface-muted); }

/* --------------------------------------------------------------------------
   Custom form engine — inc/forms/render.php (.mhr-* classes)
   Inputs inherit the base.css input styling; these add layout, states,
   error/success panels and the "next steps" block.
   -------------------------------------------------------------------------- */
.mhr-form-wrap { max-width: 640px; }
.mhr-form { display: grid; gap: var(--space-3); }
.mhr-field { display: flex; flex-direction: column; }
.mhr-field-row { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 560px) { .mhr-field-row { grid-template-columns: 1fr 1fr; } }
.mhr-label { font-weight: var(--fw-medium); font-size: var(--fs-small); margin-bottom: 6px; }
.mhr-req { color: var(--color-error); }
.mhr-help { font-size: var(--fs-small); color: var(--color-text-secondary); margin-top: 6px; }
.mhr-error { font-size: var(--fs-small); color: var(--color-error); margin-top: 6px; }
.mhr-error:empty { display: none; }
.mhr-field--error .mhr-input { border-color: var(--color-error); }
.mhr-field--error .mhr-input:focus { box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }

/* File input (CV upload) — constrain to the column so it never overflows on
   mobile (type=file is not covered by the base width:100% control styles) and
   give it an intentional, styled look. */
.mhr-field { min-width: 0; }
.mhr-file {
  width: 100%;
  max-width: 100%;
  padding: 10px 12px;
  font-size: var(--fs-small);
  border: 1.5px dashed var(--color-border);
  border-radius: var(--radius-input);
  background: var(--surface-muted);
  cursor: pointer;
}
.mhr-file::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-input);
  background: var(--color-secondary);
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  cursor: pointer;
}
.mhr-file::file-selector-button:hover { background: var(--color-secondary-hover); }
.mhr-file { padding: 10px 14px; background: var(--surface-muted); }

/* KVKK / checkbox row */
.mhr-field--check .mhr-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: var(--fs-small); color: var(--color-text-secondary); font-weight: var(--fw-regular); margin: 0; }
.mhr-check input[type="checkbox"] { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; accent-color: var(--color-secondary); }
.mhr-check a { color: var(--color-secondary); text-decoration: underline; text-underline-offset: 2px; }

/* Submit */
.mhr-form__submit { display: flex; flex-direction: column; gap: 10px; margin-top: var(--space-2); align-items: flex-start; }
.mhr-submit[aria-disabled="true"], .mhr-submit:disabled { opacity: 0.7; cursor: progress; }
.mhr-form__consent-note { font-size: 0.8rem; color: var(--color-text-secondary); }

/* Error summary banner */
.mhr-form-summary {
  display: flex; gap: 10px; align-items: center;
  padding: var(--space-3);
  border-radius: var(--radius-input);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: var(--color-error);
  margin-bottom: var(--space-3);
}
.mhr-form-summary .icon { width: 20px; height: 20px; flex-shrink: 0; }

/* Success panel */
.mhr-form-success {
  position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: var(--space-6) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface);
}
.mhr-form-success__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: var(--radius-pill);
  background: rgba(62, 169, 53, 0.14); color: var(--color-success);
  margin-bottom: var(--space-2);
}
.mhr-form-success__icon .icon { width: 32px; height: 32px; }
.mhr-form-success__title { font-size: clamp(1.5rem, 2vw + 1rem, 2rem); }
.mhr-form-success__ref { margin-top: var(--space-1); color: var(--color-secondary); }
.mhr-form-success__text { color: var(--color-text-secondary); margin-top: var(--space-2); }
.mhr-form-success__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; margin-top: var(--space-4); }

/* Success "next steps" */
.mhr-next-steps { display: grid; gap: var(--space-3); text-align: left; max-width: 460px; margin: var(--space-4) auto 0; }
.mhr-next-steps__item { display: grid; grid-template-columns: auto auto 1fr; gap: var(--space-2); align-items: center; }
.mhr-next-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-pill);
  background: var(--color-primary); color: var(--color-white);
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}
.mhr-next-steps__icon { color: var(--color-accent); }
.mhr-next-steps__icon .icon { width: 20px; height: 20px; }
.mhr-next-steps__body { display: flex; flex-direction: column; }
.mhr-next-steps__body strong { font-size: 0.95rem; }
.mhr-next-steps__body span { font-size: var(--fs-small); color: var(--color-text-secondary); }

/* ==========================================================================
   WHITE / LIGHT THEME OVERRIDE  (client direction: "tamamen beyaz tasarım")
   Loaded last → wins over base.css. Flips every dark/navy block to white with
   dark text; brand blue/green kept only as sparse accents (buttons, links).
   ========================================================================== */

/* ---- Header: always clean white (no dark transparent state) ---- */
.site-header[data-header-mode="transparent"] {
  background-color: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--color-border);
  --nav-ink: var(--color-text);
}
.site-header[data-header-mode="transparent"] .site-logo__h { color: var(--color-text); }
.site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-link:hover { color: var(--color-secondary); }

/* ---- Hero → white ---- */
.hero {
  background-color: #fff;
  color: var(--color-text);
  min-height: clamp(520px, 70vh, 780px);
}
.hero__gradient { display: none; }
.hero__fallback {
  background:
    radial-gradient(110% 80% at 88% -10%, rgba(28, 111, 214, 0.07), transparent 60%),
    radial-gradient(80% 80% at -5% 110%, rgba(62, 169, 53, 0.05), transparent 55%),
    #fff;
}
.hero__blueprint {
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
}
.hero__title { color: var(--color-primary); }
.hero__subhead { color: var(--color-text-secondary); }
.hero__eyebrow { color: var(--color-secondary); }
.hero__eyebrow::before { background: var(--color-secondary); }
.hero__stats li { border-inline-start-color: var(--color-border); }
.hero__stats .stat__label { color: var(--color-text-secondary); }
.hero__stats .stat__value { color: var(--color-secondary); }

/* ---- Inner page hero → white ---- */
.page-hero {
  background-color: #fff;
  color: var(--color-text);
  border-bottom: 1px solid var(--color-border);
}
.page-hero__glow { background: radial-gradient(90% 70% at 88% -10%, rgba(28, 111, 214, 0.06), transparent 60%); }
.page-hero__blueprint {
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
}
.page-hero__title { color: var(--color-primary); }
.page-hero__intro { color: var(--color-text-secondary); }
.page-hero .breadcrumb { color: var(--color-text-secondary); }
.page-hero .eyebrow { color: var(--color-secondary); }
.page-hero .eyebrow::before { background: var(--color-secondary); }

/* ---- Former navy sections → light ---- */
.section--navy {
  background-color: var(--surface-muted);
  color: var(--color-text);
}
.section--navy h2,
.section--navy h3 { color: var(--color-text); }
.section--navy .section__intro { color: var(--color-text-secondary); }
.section--navy .feature-list__item p { color: var(--color-text-secondary); }
.section--navy .eyebrow--on-dark { color: var(--color-secondary); }
.section--navy .eyebrow--on-dark::before { background: var(--color-secondary); }
.section--navy .stat__label { color: var(--color-text-secondary); }
.section--navy .stat__value { color: var(--color-secondary); }
.section--navy .step__num { background: rgba(28, 111, 214, 0.1); color: var(--color-secondary); }
.section--navy .step__text { color: var(--color-text-secondary); }
.section--navy .blueprint-grid--dark,
.hero__blueprint,
.cta-band .blueprint-grid--dark {
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px) !important;
}

/* ---- CTA band → light card ---- */
.cta-band {
  background-color: var(--surface-muted);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.cta-band__title { color: var(--color-primary); }
.cta-band__text { color: var(--color-text-secondary); }
.cta-band .blueprint-corners::before,
.cta-band .blueprint-corners::after { border-color: rgba(28, 111, 214, 0.25); }

/* ---- "On dark" outline buttons now sit on light → restyle ---- */
.hero .btn-on-dark,
.section--navy .btn-on-dark,
.cta-band .btn-on-dark {
  color: var(--color-text);
  background: #fff;
  border-color: var(--color-border);
}
.hero .btn-on-dark:hover,
.section--navy .btn-on-dark:hover,
.cta-band .btn-on-dark:hover {
  background: var(--surface-muted);
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}

/* ---- Footer → white ---- */
.site-footer {
  background-color: #fff;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}
.site-footer a { color: var(--color-text-secondary); }
.site-footer a:hover { color: var(--color-secondary); }
.footer-col__title { color: var(--color-text); }
.footer-brand__logo { --nav-ink: var(--color-text); }
.footer-contact .icon { color: var(--color-secondary); }
.footer-social a { background: var(--surface-muted); color: var(--color-text-secondary); }
.footer-social a:hover { background: var(--color-secondary); color: #fff; }
.footer-bottom { border-top-color: var(--color-border); }

/* Success-panel step numbers stay legible on white */
.mhr-next-steps__num { background: var(--color-secondary); }

/* ==========================================================================
   PREMIUM POLISH  (reference: arisezgidogankayseri.com)
   Formula: DARK hero/heading/CTA/footer bands over a WHITE content body,
   fully-rounded PILL buttons + pill nav. Loaded last → wins over the block
   above. This intentionally re-darkens the hero bands the white block lightened.
   ========================================================================== */

/* ---- Pill buttons everywhere ---- */
.btn { border-radius: 999px; font-weight: var(--fw-semibold); }
.btn-lg { --btn-pad-x: 34px; }
.service-card__link, .btn { letter-spacing: -0.01em; }

/* Guarantee primary button legibility (fixes the faint/gray text) */
.btn-primary { background-color: var(--color-secondary) !important; color: #fff !important; }
.btn-primary:hover { background-color: var(--color-secondary-hover) !important; color: #fff !important; }
.btn-primary .icon { color: #fff; }

/* ---- Nav items → pill (client: "buton gibi olmalı") ---- */
.nav-link { padding: 9px 16px; border-radius: 999px; font-weight: var(--fw-semibold); }
.nav-link::after { display: none; }
.nav-link:hover { background: rgba(28, 111, 214, 0.08); color: var(--color-secondary); }
.current-menu-item > .nav-link,
.current_page_item > .nav-link { background: var(--color-secondary); color: #fff; }
.site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-link:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---- Header: transparent again over the dark hero ---- */
.site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) {
  background-color: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom-color: transparent;
  --nav-ink: rgba(255, 255, 255, 0.92);
}
/* When scrolled, the transparent header SOLIDIFIES (base.css supplies the bg) */
.site-header[data-header-mode="transparent"][data-scrolled="true"] { --nav-ink: var(--color-text); }
.site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .site-logo__h { color: rgba(255, 255, 255, 0.92); }

/* ---- HERO → dark band (reference) ---- */
.hero { background-color: var(--color-primary); color: var(--color-white); }
.hero__gradient { display: block; }
.hero__fallback {
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(28, 111, 214, 0.4), transparent 60%),
    radial-gradient(90% 90% at 0% 100%, rgba(62, 169, 53, 0.18), transparent 55%),
    var(--color-primary);
}
.hero__blueprint {
  background-image:
    linear-gradient(to right, var(--blueprint-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line-dark) 1px, transparent 1px);
}
.hero__title { color: var(--color-white); }
.hero__subhead { color: rgba(255, 255, 255, 0.85); }
.hero__eyebrow { color: var(--color-accent); }
.hero__eyebrow::before { background: var(--color-accent); }
.hero__stats li { border-inline-start-color: rgba(255, 255, 255, 0.16); }
.hero__stats .stat__label { color: rgba(255, 255, 255, 0.7); }
.hero__stats .stat__value { color: var(--color-accent); }
.hero .btn-on-dark { color: var(--color-white); background: transparent; border-color: rgba(255, 255, 255, 0.6); }
.hero .btn-on-dark:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

/* ---- Optional full-bleed hero BACKGROUND photo (animated, cinematic) ---- */
.hero__photo-bg {
  position: absolute;
  inset: -3%; /* bleed so the slow zoom never reveals an edge */
  z-index: -2; /* above .hero__fallback, below the dark scrim (.hero__gradient, z-index:-1) */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.06);
  animation: mhr-hero-kenburns 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes mhr-hero-kenburns {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.16) translate3d(-1.5%, -2%, 0); }
}
/* Photo present → hide the gradient-mesh base and lay a rich, readable scrim over the image. */
.hero--has-bg .hero__fallback { display: none; }
.hero--has-bg .hero__gradient {
  display: block;
  background:
    linear-gradient(90deg, rgba(8, 20, 42, 0.94) 0%, rgba(8, 20, 42, 0.74) 40%, rgba(8, 20, 42, 0.40) 100%),
    linear-gradient(180deg, rgba(8, 20, 42, 0.05) 0%, rgba(8, 20, 42, 0.62) 100%);
}
/* Slow-breathing brand glow layered over the photo for depth and motion. */
.hero--has-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(120% 90% at 82% -5%, rgba(28, 111, 214, 0.32), transparent 55%);
  animation: mhr-hero-glow 9s ease-in-out infinite alternate;
}
@keyframes mhr-hero-glow {
  from { opacity: 0.5; }
  to   { opacity: 1; }
}
/* Keep the blueprint grid subtle so it reads as texture, not clutter, over a photo. */
.hero--has-bg .hero__blueprint { opacity: 0.28; }
@media (prefers-reduced-motion: reduce) {
  .hero__photo-bg { animation: none !important; transform: scale(1.06); }
  .hero--has-bg::after { animation: none !important; }
}

/* Kombi blueprint motif — reinforces the combi-focused hero on the visual side.
   Drawn via mask + background-color so the line colour follows the theme
   (light lines on the navy dark hero, MHR-blue lines on the white light hero).
   Sits above the gradient/blueprint but below .hero__content (whole .hero__bg is
   z-index:-2), bleeds off the right edge, and stays behind the contact card. */
.hero__kombi {
  position: absolute;
  top: 50%;
  right: -30px;
  transform: translateY(-50%);
  z-index: 0;
  width: clamp(400px, 34vw, 560px);
  aspect-ratio: 420 / 560;
  -webkit-mask: url("../img/kombi-hero.svg") center / contain no-repeat;
          mask: url("../img/kombi-hero.svg") center / contain no-repeat;
  background-color: #cfe0fb;   /* dark hero → light blueprint lines on navy */
  opacity: 0.5;
  pointer-events: none;
}
/* Light hero (white bg) → MHR-blue lines so the motif stays legible. */
:root[data-theme="light"] .hero__kombi {
  background-color: var(--color-secondary);
  opacity: 0.22;
}
/* Hidden on tablet/mobile (like .hero__visual) so it never crowds the text. */
@media (max-width: 1023px) { .hero__kombi { display: none; } }
/* When a real hero photo is set, drop the motif to avoid clutter. */
.hero--has-bg .hero__kombi { display: none; }

/* ==========================================================================
   Kombi showcase (homepage) — foreground illustration + feature list
   ========================================================================== */
.kombi-feature__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media (min-width: 900px) {
  .kombi-feature__grid { grid-template-columns: 0.9fr 1.1fr; gap: var(--space-7); }
}
.kombi-feature__visual { display: flex; justify-content: center; }
.kombi-figure {
  position: relative;
  width: 100%;
  max-width: 380px;
  padding: var(--space-5);
  background: linear-gradient(160deg, rgba(28, 111, 214, 0.09), rgba(62, 169, 53, 0.05));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-image);
}
.kombi-figure__img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.12));
}
.kombi-figure__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}
.kombi-figure__badge .icon { width: 16px; height: 16px; color: var(--color-success); }
.kombi-figure__spec {
  position: absolute;
  right: 16px;
  bottom: 16px;
  display: grid;
  justify-items: center;
  padding: 10px 16px;
  border-radius: var(--radius-card);
  background: var(--color-secondary);
  color: #fff;
  box-shadow: var(--shadow-lg);
}
.kombi-figure__spec b { font-size: 1.5rem; line-height: 1; font-weight: var(--fw-extrabold); }
.kombi-figure__spec span { font-size: 10px; letter-spacing: var(--tracking-mono); opacity: 0.9; margin-top: 2px; }

/* Gerçek saha fotoğrafı varyantı: çerçeve/dolgu yok, fotoğraf kartın kendisi.
   Rozetler (garanti + enerji sınıfı) fotoğrafın üzerinde durmaya devam eder. */
.kombi-figure--photo {
  padding: 0;
  border: 0;
  background: none;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  isolation: isolate;
}
.kombi-figure--photo .kombi-figure__img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-image);
  filter: none;
}
/* Alt kısımda okunurluk için yumuşak koyu geçiş. */
.kombi-figure--photo::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 46%;
  border-radius: 0 0 var(--radius-image) var(--radius-image);
  background: linear-gradient(to top, rgba(15, 23, 42, 0.72), transparent);
  pointer-events: none;
}
.kombi-figure__tag {
  position: absolute;
  left: 16px;
  bottom: 18px;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: var(--tracking-mono);
  color: rgba(255, 255, 255, 0.92);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
}
.kombi-figure--photo .kombi-figure__spec { z-index: 1; }
.kombi-figure--photo .kombi-figure__badge { z-index: 1; }


.kombi-feature__list {
  list-style: none;
  margin: var(--space-5) 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
}
@media (min-width: 560px) { .kombi-feature__list { grid-template-columns: 1fr 1fr; } }
.kombi-feature__item { display: flex; gap: var(--space-3); }
.kombi-feature__item .icon { flex-shrink: 0; width: 26px; height: 26px; color: var(--color-secondary); }
.kombi-feature__item h3 { font-size: 1.0625rem; margin: 0 0 4px; }
.kombi-feature__item p { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-text-secondary); margin: 0; }
.kombi-feature__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
@media (max-width: 480px) {
  .kombi-feature__cta { flex-direction: column; align-items: stretch; }
  .kombi-feature__cta .btn { width: 100%; }
}

/* Kombi service tiles (Satış / Montaj / Bakım & Servis) */
.kombi-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
@media (min-width: 640px) { .kombi-tiles { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .kombi-tiles { grid-template-columns: repeat(3, 1fr); } }
.kombi-tile { overflow: hidden; }
.kombi-tile__media {
  position: relative;
  display: flex;
  justify-content: center;
  padding: var(--space-5) var(--space-5) var(--space-4);
  background: linear-gradient(160deg, rgba(28, 111, 214, 0.09), rgba(62, 169, 53, 0.05));
  border-bottom: 1px solid var(--color-border);
}
.kombi-tile__img { width: 128px; height: auto; display: block; filter: drop-shadow(0 12px 20px rgba(15, 23, 42, 0.10)); }
.kombi-tile__badge {
  position: absolute;
  right: 18px;
  bottom: -22px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-secondary);
  color: #fff;
  border: 3px solid var(--color-surface);
  box-shadow: var(--shadow-md);
}
.kombi-tile__badge .icon { width: 24px; height: 24px; }
.kombi-tile__badge--blue  { background: var(--color-secondary); }
.kombi-tile__badge--green { background: var(--color-accent); }
.kombi-tile__badge--navy  { background: var(--color-primary); }
.kombi-tile__body { padding: var(--space-5); padding-top: calc(var(--space-4) + 14px); }
.kombi-tile__title { font-size: 1.1875rem; margin: 0 0 var(--space-2); }
.kombi-tile__text { font-size: var(--fs-small); line-height: var(--lh-body); color: var(--color-text-secondary); margin: 0 0 var(--space-3); }

/* ---- INNER PAGE HERO → dark band (reference contact hero) ---- */
.page-hero { background-color: var(--color-primary); color: var(--color-white); border-bottom: 0; }
.page-hero__title { color: var(--color-white); }
.page-hero__intro { color: rgba(255, 255, 255, 0.78); }
.page-hero .breadcrumb { color: rgba(255, 255, 255, 0.85); }
.page-hero .eyebrow { color: var(--color-accent); }
.page-hero .eyebrow::before { background: var(--color-accent); }
.page-hero__glow { background: radial-gradient(90% 70% at 85% -10%, rgba(28, 111, 214, 0.3), transparent 60%); }
.page-hero__blueprint {
  background-image:
    linear-gradient(to right, var(--blueprint-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line-dark) 1px, transparent 1px);
}

/* ---- Content bands (Neden MHR / Süreç / stats) STAY white ---- */
.section--navy { background-color: #fff; color: var(--color-text); }
.section--navy h2, .section--navy h3 { color: var(--color-text); }
.section--navy .section__intro { color: var(--color-text-secondary); }
.section--navy .feature-list__item p { color: var(--color-text-secondary); }
.section--navy .eyebrow--on-dark { color: var(--color-secondary); }
.section--navy .eyebrow--on-dark::before { background: var(--color-secondary); }
.section--navy .stat__label { color: var(--color-text-secondary); }
.section--navy .stat__value { color: var(--color-secondary); }
.section--navy .step__num { background: rgba(28, 111, 214, 0.1); color: var(--color-secondary); }
.section--navy .step__text { color: var(--color-text-secondary); }
.section--navy .blueprint-grid--dark {
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
}
.section--navy .btn-on-dark { color: var(--color-text); background: #fff; border-color: var(--color-border); }
.section--navy .btn-on-dark:hover { background: var(--surface-muted); color: var(--color-secondary); border-color: var(--color-secondary); }

/* ---- CTA band → dark (reference) — fixes the faint Teklif Al button ---- */
.cta-band { background-color: var(--color-primary); color: var(--color-white); border: 0; }
.cta-band__title { color: var(--color-white); }
.cta-band__text { color: rgba(255, 255, 255, 0.75); }
.cta-band .blueprint-corners::before,
.cta-band .blueprint-corners::after { border-color: rgba(0, 194, 255, 0.3); }
.cta-band .btn-on-dark { color: var(--color-white); background: transparent; border-color: rgba(255, 255, 255, 0.6); }
.cta-band .btn-on-dark:hover { background: rgba(255, 255, 255, 0.12); color: #fff; border-color: #fff; }

/* ---- Footer → dark (reference) ---- */
.site-footer { background-color: var(--color-primary); color: rgba(255, 255, 255, 0.72); border-top: 0; }
.site-footer a { color: rgba(255, 255, 255, 0.72); }
.site-footer a:hover { color: var(--color-accent); }
.footer-col__title { color: var(--color-white); }
.footer-brand__logo { --nav-ink: var(--color-white); }
.footer-social a { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.72); }
.footer-social a:hover { background: var(--color-accent); color: #fff; }
.footer-contact .icon { color: var(--color-accent); }
.footer-bottom { border-top-color: rgba(255, 255, 255, 0.1); }

/* ---- Cards: a touch more premium (softer, larger radius) ---- */
.card { border-radius: 24px; }
.service-card__icon { border-radius: 16px; }

/* ==========================================================================
   THEME TOGGLE + DARK THEME  (default: light; toggled via data-theme on <html>)
   ========================================================================== */

/* Toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 999px;
  color: var(--nav-ink);
  flex-shrink: 0;
  touch-action: manipulation;
}
.theme-toggle:hover { background: rgba(127, 127, 127, 0.14); }
.theme-toggle .icon { width: 20px; height: 20px; }
.theme-toggle__sun { display: none; }
:root[data-theme="dark"] .theme-toggle__sun { display: inline-flex; }
:root[data-theme="dark"] .theme-toggle__moon { display: none; }

/* ---- Dark palette (token swap) ---- */
:root[data-theme="dark"] {
  --color-bg:             #0A0F1A;
  --color-surface:        #121B2C;
  --color-border:         rgba(255, 255, 255, 0.10);
  --color-text:           #E7EDF6;
  --color-text-secondary: #97A5B9;
  --surface-muted:        #0E1626;
  --blueprint-line:       rgba(120, 170, 255, 0.06);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 24px 56px rgba(0, 0, 0, 0.6);
  color-scheme: dark;
}

/* Content bands (were hardcoded #fff for light) → surface in dark */
:root[data-theme="dark"] .section--navy { background-color: var(--color-surface); }
:root[data-theme="dark"] .section--alt { background-color: var(--surface-muted); }

/* Dark hero / heading / CTA / footer bands → near-black, distinct from body */
:root[data-theme="dark"] .hero,
:root[data-theme="dark"] .page-hero,
:root[data-theme="dark"] .cta-band,
:root[data-theme="dark"] .site-footer { background-color: #05090F; }
:root[data-theme="dark"] .hero__fallback {
  background:
    radial-gradient(120% 80% at 85% 0%, rgba(28, 111, 214, 0.28), transparent 60%),
    radial-gradient(90% 90% at 0% 100%, rgba(62, 169, 53, 0.14), transparent 55%),
    #05090F;
}

/* Header solid state in dark */
:root[data-theme="dark"] .site-header[data-header-mode="solid"],
:root[data-theme="dark"] .site-header[data-scrolled="true"] {
  background-color: rgba(10, 15, 26, 0.9);
  border-bottom-color: var(--color-border);
  --nav-ink: var(--color-text);
}
:root[data-theme="dark"] .nav-link:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* Form controls in dark */
:root[data-theme="dark"] input[type="text"],
:root[data-theme="dark"] input[type="email"],
:root[data-theme="dark"] input[type="tel"],
:root[data-theme="dark"] input[type="url"],
:root[data-theme="dark"] input[type="search"],
:root[data-theme="dark"] input[type="number"],
:root[data-theme="dark"] input[type="password"],
:root[data-theme="dark"] textarea,
:root[data-theme="dark"] select {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Sticky mobile CTA + drawer already dark-friendly; adjust the light bar */
:root[data-theme="dark"] .mobile-cta-bar { background: rgba(10, 15, 26, 0.95); border-top-color: var(--color-border); }
:root[data-theme="dark"] .site-header[data-header-mode="transparent"] .site-logo__h { color: rgba(255, 255, 255, 0.92); }

/* ==========================================================================
   TOP UTILITY BAR  (reference: Aris — tagline + phone + WhatsApp strip)
   ========================================================================== */
.topbar {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-primary);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-height: 40px;
}
.topbar__tag {
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
}
.topbar__actions { display: flex; align-items: center; gap: var(--space-3); }
.topbar__link {
  display: inline-flex; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 13px; font-weight: var(--fw-medium);
}
.topbar__link:hover { color: var(--color-accent); }
.topbar__link .icon { width: 15px; height: 15px; color: var(--color-accent); }
@media (max-width: 640px) {
  .topbar__tag { display: none; }
  .topbar__inner { justify-content: center; }
}
:root[data-theme="dark"] .topbar { background: #05090F; }

/* Phone now lives in the topbar — drop the duplicate in the header */
.site-header__utilities .phone-link { display: none; }

/* ==========================================================================
   NAV AS BUTTONS  (targets the REAL wp_nav_menu output, not just .nav-link)
   Client: "sekmeler buton gibi olmalı" — pill buttons, not plain blue links.
   ========================================================================== */
.site-header__nav .nav-list { gap: 6px; }
.site-header__nav .nav-list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 999px;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--nav-ink);
  background: transparent;
  border: 1px solid var(--color-border);
  transition:
    background-color var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),
    border-color var(--dur-fast) var(--ease-standard);
}
.site-header__nav .nav-list a:hover {
  background: rgba(28, 111, 214, 0.08);
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.site-header__nav .nav-list .current-menu-item > a,
.site-header__nav .nav-list .current_page_item > a,
.site-header__nav .nav-list .current-menu-parent > a,
.site-header__nav .nav-list .current-menu-ancestor > a {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
}

/* Transparent header over the dark hero (front page, un-scrolled) */
.site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-list a {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.22);
}
.site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-list a:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
.site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-list .current-menu-item > a,
.site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-list .current_page_item > a {
  background: var(--color-secondary);
  color: #fff;
  border-color: var(--color-secondary);
}

/* Dark theme nav buttons */
:root[data-theme="dark"] .site-header__nav .nav-list a { border-color: var(--color-border); }
:root[data-theme="dark"] .site-header__nav .nav-list a:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }

/* ==========================================================================
   İLETİŞİM — two-column (LEFT map · RIGHT info + form)
   ========================================================================== */
.iletisim-grid {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 1024px) {
  .iletisim-grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); }
}
.iletisim-map {
  border-radius: var(--radius-card);
  overflow: hidden;
  border: 1px solid var(--color-border);
  min-height: 440px;
  background: var(--surface-muted);
}
@media (min-width: 1024px) {
  .iletisim-map {
    position: sticky;
    top: calc(var(--header-h) + var(--space-3));
    height: 620px;
  }
}
.iletisim-map iframe { width: 100%; height: 100%; min-height: 440px; border: 0; display: block; }

.contact-list {
  display: grid;
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.contact-list__item {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  padding: var(--space-3) var(--space-4);
  background: var(--color-surface);
}
.contact-list__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-input);
  background: rgba(28, 111, 214, 0.08);
  color: var(--color-secondary);
}
.contact-list__icon .icon { width: 20px; height: 20px; }
.contact-list__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.contact-list__label {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-mono);
  color: var(--color-text-secondary);
}
.contact-list__value { font-weight: var(--fw-semibold); color: var(--color-text); word-break: break-word; }
a.contact-list__value:hover { color: var(--color-secondary); }
.contact-list__link {
  display: inline-flex; align-items: center; gap: 4px;
  margin-top: 4px;
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  color: var(--color-secondary);
}
.contact-list__link .icon { width: 14px; height: 14px; }
.iletisim-form-title { font-size: var(--fs-card); margin-bottom: var(--space-3); }

/* ==========================================================================
   HERO — 2 columns (text + animated visual) + LIGHT-theme hero (no black block)
   ========================================================================== */
.hero__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: center;
  width: 100%;
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-7); }
}
.hero__inner { max-width: 60ch; }
@media (max-width: 1023px) { .hero__visual { display: none; } }

/* ---- LIGHT theme hero: white, dark text (fixes the "black block") ---- */
:root[data-theme="light"] .hero { background-color: #fff; color: var(--color-text); }
:root[data-theme="light"] .hero__gradient { display: none; }
:root[data-theme="light"] .hero__fallback {
  background:
    radial-gradient(100% 80% at 92% -10%, rgba(28, 111, 214, 0.08), transparent 60%),
    radial-gradient(80% 80% at -5% 110%, rgba(62, 169, 53, 0.06), transparent 55%),
    #fff;
}
:root[data-theme="light"] .hero__blueprint {
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
}
:root[data-theme="light"] .hero__title { color: var(--color-primary); }
:root[data-theme="light"] .hero__subhead { color: var(--color-text-secondary); }
:root[data-theme="light"] .hero__eyebrow { color: var(--color-secondary); }
:root[data-theme="light"] .hero__eyebrow::before { background: var(--color-secondary); }
:root[data-theme="light"] .hero__stats li { border-inline-start-color: var(--color-border); }
:root[data-theme="light"] .hero__stats .stat__label { color: var(--color-text-secondary); }
:root[data-theme="light"] .hero__stats .stat__value { color: var(--color-secondary); }
:root[data-theme="light"] .hero .btn-on-dark {
  color: var(--color-text); background: var(--color-surface); border-color: var(--color-border);
}
:root[data-theme="light"] .hero .btn-on-dark:hover {
  background: var(--surface-muted); color: var(--color-secondary); border-color: var(--color-secondary);
}
/* header transparent over a LIGHT hero → dark ink + dark nav pills */
:root[data-theme="light"] .site-header[data-header-mode="transparent"] { --nav-ink: var(--color-text); }
:root[data-theme="light"] .site-header[data-header-mode="transparent"] .site-logo__h { color: var(--color-text); }
:root[data-theme="light"] .site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-list a {
  color: var(--color-text); border-color: var(--color-border);
}
:root[data-theme="light"] .site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-list a:hover {
  background: rgba(28, 111, 214, 0.08); color: var(--color-secondary); border-color: var(--color-secondary);
}
:root[data-theme="light"] .site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-list .current-menu-item > a,
:root[data-theme="light"] .site-header[data-header-mode="transparent"]:not([data-scrolled="true"]) .nav-list .current_page_item > a {
  background: var(--color-secondary); color: #fff; border-color: var(--color-secondary);
}

/* ---- Hero visual (animated) ---- */
.hero__visual { position: relative; display: flex; justify-content: center; }
/* Must come AFTER the display:flex above (same specificity) so it actually wins
   on mobile — otherwise the contact card shows on phones and its wide content
   blows out the grid track, causing full-page horizontal overflow. */
@media (max-width: 1023px) { .hero__visual { display: none; } }
.hero-figure { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; }
.hero-figure--photo { aspect-ratio: auto; }
.hero-figure__photo { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-image); box-shadow: var(--shadow-lg); }
.hero-figure__panel {
  position: relative; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-image); overflow: hidden;
  background: linear-gradient(160deg, rgba(28, 111, 214, 0.16), rgba(62, 169, 53, 0.10)), var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-lg);
  animation: mhr-float 6s var(--ease-standard) infinite;
}
.hero-figure__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--blueprint-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line) 1px, transparent 1px);
  background-size: 40px 40px;
}
.hero-figure__icons { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.hero-figure__icons span {
  display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: var(--radius-card);
  background: var(--color-surface); box-shadow: var(--shadow-md); color: var(--color-secondary);
}
.hero-figure__icons span:nth-child(3) { color: var(--color-accent); }
.hero-figure__icons .icon { width: 34px; height: 34px; }
.hero-figure__badge {
  position: absolute; top: 7%; left: -5%;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-radius: 999px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md); font-size: 11px; color: var(--color-text);
  animation: mhr-float 5s var(--ease-standard) infinite reverse;
}
.hero-figure__badge .icon { width: 16px; height: 16px; color: var(--color-accent); }
.hero-figure__chip {
  position: absolute; bottom: 7%; right: -4%;
  display: flex; flex-direction: column; align-items: center;
  padding: 12px 18px; border-radius: var(--radius-input);
  background: var(--color-primary); color: #fff; box-shadow: var(--shadow-lg);
  animation: mhr-float 7s var(--ease-standard) infinite;
}
.hero-figure__chip b { font-size: 1.375rem; color: var(--color-accent); line-height: 1; }
.hero-figure__chip span { font-size: 10px; letter-spacing: var(--tracking-mono); opacity: 0.8; margin-top: 2px; }
@keyframes mhr-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@media (prefers-reduced-motion: reduce) {
  .hero-figure__panel, .hero-figure__badge, .hero-figure__chip { animation: none !important; }
}

/* ==========================================================================
   TEKLİF AL page (page-teklif-al.php) — style its ad-hoc classes
   ========================================================================== */
.page-hero-lite {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--color-primary); color: #fff;
  padding-block: var(--space-7) var(--space-6);
}
.page-hero-lite .container { position: relative; z-index: 1; }
.page-hero-lite .blueprint-grid {
  background-image:
    linear-gradient(to right, var(--blueprint-line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--blueprint-line-dark) 1px, transparent 1px);
}
.page-hero-lite .breadcrumb { color: rgba(255, 255, 255, 0.85); margin-bottom: var(--space-2); }
.page-hero-lite .breadcrumb a { color: inherit; opacity: 0.8; }
.page-hero-lite .breadcrumb a:hover { opacity: 1; color: var(--color-accent); }
.page-hero-lite__eyebrow {
  display: inline-block; color: var(--color-accent);
  font-size: var(--fs-small); text-transform: uppercase; letter-spacing: var(--tracking-mono);
  margin-bottom: var(--space-2);
}
.page-hero-lite__title { font-size: clamp(2.25rem, 4vw + 1rem, var(--fs-page)); color: #fff; margin-bottom: var(--space-3); }
.page-hero-lite__sub { color: rgba(255, 255, 255, 0.78); max-width: 60ch; }

.teklif-layout {
  display: grid; gap: var(--space-5);
  grid-template-columns: 1fr; align-items: start;
  padding-block: var(--space-7);
}
@media (min-width: 1024px) {
  .teklif-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); }
}
.teklif-layout__side { display: grid; gap: var(--space-3); }
@media (min-width: 1024px) {
  .teklif-layout__side { position: sticky; top: calc(var(--header-h) + var(--space-3)); }
}
.teklif-intro { margin-bottom: var(--space-4); color: var(--color-text-secondary); }

.trust-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-sm);
}
.trust-card__title { font-size: 1.125rem; margin-bottom: var(--space-3); }
.trust-badges { display: grid; gap: var(--space-2); }
.trust-badge { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-medium); }
.trust-badge__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--radius-input);
  background: rgba(62, 169, 53, 0.1); color: var(--color-accent); flex-shrink: 0;
}
.trust-badge__icon .icon { width: 18px; height: 18px; }
.trust-card--contact .contact-row { display: flex; align-items: center; gap: 10px; min-height: 44px; font-weight: var(--fw-medium); color: var(--color-text); }
.trust-card--contact .contact-row .icon { width: 20px; height: 20px; color: var(--color-accent); }
.trust-card--contact .contact-row:hover { color: var(--color-secondary); }
.mini-steps { display: grid; gap: var(--space-3); }
.mini-steps__item { display: flex; gap: var(--space-2); align-items: flex-start; }
.mini-steps__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 999px;
  background: var(--color-secondary); color: #fff;
  font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 0.85rem; flex-shrink: 0;
}
.mini-steps__body { display: flex; flex-direction: column; gap: 2px; }
.mini-steps__body strong { font-size: 0.95rem; }
.mini-steps__body span { font-size: var(--fs-small); color: var(--color-text-secondary); }

/* ==========================================================================
   WordPress admin bar offset (logged-in) — keep the sticky header below the bar
   ========================================================================== */
body.admin-bar .site-header { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header { top: 46px; }
}

/* ==========================================================================
   ÜRÜNLER — priced product catalog (cards + single buy box)
   ========================================================================== */
.urun-grid {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}
@media (min-width: 768px) { .urun-grid { gap: var(--space-4); } }

.urun-card { padding: 0; }
.urun-card__media {
  position: relative; display: block; aspect-ratio: 3 / 4; /* kombi/klima photos are usually VERTICAL */
  background: #fff; /* clean product tile — a product on white reads as catalog */
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
/* contain on white → the WHOLE (vertical) product shows, never cropped */
.urun-card__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-3); }
.urun-card__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: rgba(28, 111, 214, 0.25); }
.urun-card__ph .icon { width: 48px; height: 48px; }
.urun-card__badge {
  position: absolute; top: 10px; left: 10px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--color-accent); color: #fff;
  font-family: var(--font-mono); font-size: 11px; font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--tracking-mono);
}
.urun-card__badge--out { background: var(--color-text-secondary); left: auto; right: 10px; }
.urun-card__body { padding: var(--space-3) var(--space-4) var(--space-4); display: flex; flex-direction: column; gap: 8px; height: 100%; }
.urun-card__brand { font-size: 0.7rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-mono); }
.urun-card__title { font-size: 1.05rem; font-weight: var(--fw-bold); }
.urun-card__title a { color: var(--color-text); }
.urun-card__title a:hover { color: var(--color-secondary); }
.urun-card__price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-top: auto; }
.urun-card__now { font-size: 1.25rem; font-weight: var(--fw-extrabold); color: var(--color-secondary); font-variant-numeric: tabular-nums; }
.urun-card__old { font-size: 0.9rem; color: var(--color-text-secondary); text-decoration: line-through; }
.urun-card__ask { font-weight: var(--fw-semibold); color: var(--color-text-secondary); }
.urun-card__actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.urun-card__detail { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-semibold); color: var(--color-secondary); }
.urun-card__detail .icon { width: 16px; height: 16px; }

/* Product single */
/* Product detail: image LEFT, description + specs RIGHT (fills the empty middle). */
.urun-single__top { display: grid; gap: var(--space-5); align-items: start; }
@media (min-width: 640px) { .urun-single__top { grid-template-columns: 360px minmax(0, 1fr); } }
.urun-single__top--nomedia { display: block; }
.urun-single__intro .prose { margin: 0; }
.urun-single__specs { margin-top: var(--space-5); }

.urun-single__media {
  max-width: 360px;      /* was full column-width → far too large; keep it a neat product tile */
  margin: 0;
  border-radius: var(--radius-image);
  overflow: hidden;
  border: 1px solid var(--color-border);
  background: #fff;
  aspect-ratio: 3 / 4;   /* vertical product */
}
.urun-single__media img { width: 100%; height: 100%; object-fit: contain; padding: var(--space-4); display: block; }
.urun-buy { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-card); padding: var(--space-4); box-shadow: var(--shadow-sm); }
.urun-buy__brand { display: block; font-size: 0.75rem; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-mono); margin-bottom: 8px; }
.urun-buy__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.urun-buy__now { font-size: 2rem; font-weight: var(--fw-extrabold); color: var(--color-secondary); font-variant-numeric: tabular-nums; line-height: 1; }
.urun-buy__old { font-size: 1.1rem; color: var(--color-text-secondary); text-decoration: line-through; }
.urun-buy__ask { font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--color-text-secondary); }
.urun-buy__stok { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: var(--fw-semibold); margin-bottom: 16px; }
.urun-buy__stok--var { color: var(--color-success); }
.urun-buy__stok--siparis { color: var(--color-warning); }
.urun-buy__stok--yok { color: var(--color-error); }
.urun-buy__kod { margin-top: 12px; font-size: var(--fs-small); color: var(--color-text-secondary); }

/* ==========================================================================
   GALERİ — company + on-site field photos
   ========================================================================== */
.galeri-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
}
/* Geniş ekranda 4'lü satır — 8'li ana sayfa şeridi ve 7'li galeri
   düzgün bir ritimde otursun. */
@media (min-width: 1100px) {
  .galeri-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Dikey (telefonla çekilmiş) fotoğraflar için dikey kutu — kırpma olmaz. */
.galeri-grid--portrait .galeri-item { aspect-ratio: 3 / 4; }
/* Telefonda tek sütun çok uzun bir şerit oluşturuyordu — 2'li dizilsin. */
@media (max-width: 639px) {
  .galeri-grid--portrait { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
}

.galeri-item {
  position: relative; display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-image);
  overflow: hidden;
  background: var(--surface-muted);
}
.galeri-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-emphasis); }
.galeri-item:hover img { transform: scale(1.06); }
.galeri-item__ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text-secondary); }
.galeri-item__ph .icon { width: 40px; height: 40px; }
.galeri-item__overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--space-3);
  background: linear-gradient(to top, rgba(15, 23, 42, 0.78), transparent 62%);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-standard);
}
.galeri-item:hover .galeri-item__overlay,
.galeri-item:focus-visible .galeri-item__overlay { opacity: 1; }
.galeri-item__icon {
  position: absolute; top: var(--space-3); right: var(--space-3);
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.92); color: var(--color-primary);
}
.galeri-item__icon .icon { width: 18px; height: 18px; }
.galeri-item__cap { color: #fff; font-weight: var(--fw-semibold); font-size: 0.95rem; }
.galeri-item__meta { display: block; font-size: 0.7rem; color: rgba(255, 255, 255, 0.75); text-transform: uppercase; letter-spacing: var(--tracking-mono); margin-top: 2px; }

/* ==========================================================================
   HERO contact card (Akıncılar-style) + WhatsApp FAB pulse
   ========================================================================== */
.hero-card {
  width: 100%; max-width: 400px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-image);
  padding: var(--space-5);
  box-shadow: var(--shadow-lg);
  animation: mhr-float 6s var(--ease-standard) infinite;
}
.hero-card__eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-small);
  text-transform: uppercase; letter-spacing: var(--tracking-mono);
  color: var(--color-accent); margin-bottom: 8px;
}
.hero-card__lead { color: var(--color-text-secondary); font-size: var(--fs-small); margin-bottom: var(--space-3); }
.hero-card__phones { display: grid; gap: 14px; margin-bottom: var(--space-3); }
.hero-card__phone-item { display: grid; gap: 2px; }
.hero-card__phone-label {
  font-size: 12px; font-weight: var(--fw-semibold);
  text-transform: uppercase; letter-spacing: var(--tracking-mono);
  color: var(--color-text-secondary);
}
.hero-card__phone {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 1.6rem; font-weight: var(--fw-extrabold);
  color: var(--color-text); font-variant-numeric: tabular-nums;
}
/* All listed numbers share ONE size — no "first bigger". */
.hero-card__phones .hero-card__phone { margin-bottom: 0; font-size: 1.5rem; }
.hero-card__phone .icon { width: 24px; height: 24px; color: var(--color-secondary); }
.hero-card__phone:hover { color: var(--color-secondary); }
.hero-card__wa { background: #25D366; color: #fff; margin-bottom: var(--space-3); }
.hero-card__wa:hover { background: #1fb457; color: #fff; }
.hero-card__trust { display: grid; gap: 8px; }
.hero-card__trust li { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--color-text-secondary); font-weight: var(--fw-medium); }
.hero-card__trust .icon { width: 16px; height: 16px; color: var(--color-success); flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .hero-card { animation: none !important; } }

.whatsapp-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  pointer-events: none;
  animation: mhr-wa-pulse 2.4s ease-out infinite;
}
@keyframes mhr-wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); }
  70%  { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); }
  100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}
@media (prefers-reduced-motion: reduce) { .whatsapp-fab::after { animation: none; } }

/* ==========================================================================
   POLISH v2 — richer "Neden MHR" cards + "Süreç" step cards (MHR identity)
   ========================================================================== */
/* Neden MHR: plain feature list → premium cards with icon badges */
.feature-list__item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  gap: var(--space-3);
  align-items: flex-start;
  transition:
    transform var(--dur-base) var(--ease-emphasis),
    box-shadow var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard);
}
.feature-list__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.feature-list__item > .icon {
  width: 52px; height: 52px; padding: 13px;
  box-sizing: border-box; flex-shrink: 0;
  border-radius: var(--radius-input);
  background: rgba(28, 111, 214, 0.08); color: var(--color-secondary);
  transition: background-color var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.feature-list__item:hover > .icon { background: var(--color-secondary); color: #fff; }
.feature-list__item h3 { font-size: 1.15rem; margin-bottom: 6px; }

/* Süreç: steps → cards with the mono number on top */
.step {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: var(--space-4);
  padding-inline-start: var(--space-4);
  transition: transform var(--dur-base) var(--ease-emphasis), box-shadow var(--dur-base) var(--ease-standard);
}
.step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.step__num {
  position: static;
  width: 48px; height: 48px;
  margin-bottom: var(--space-3);
  font-size: 1.05rem;
}
.step__title { font-size: 1.1rem; }

/* ==========================================================================
   GALERİ — lightbox (tam ekran fotoğraf görüntüleyici)
   Galeri kartları JS kapalıyken de çalışır (yeni sekmede açılır); JS varsa
   burada tanımlı overlay devreye girer. Hem panelden eklenen görseller hem de
   temayla gelen saha fotoğrafları aynı `.galeri-item` işaretlemesini kullanır.
   ========================================================================== */
.section__header--tight { margin-top: var(--space-7); }

.galeri-item { cursor: zoom-in; }

.mhr-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal); /* WhatsApp FAB (--z-fab) ve header'ın üstünde kalmalı */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: clamp(12px, 4vw, 40px);
  background: rgba(8, 13, 26, 0.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-standard);
}
.mhr-lightbox[data-open="true"] { opacity: 1; }
.mhr-lightbox[hidden] { display: none; }

.mhr-lightbox__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: min(100%, 900px);
  min-width: 0;
}
.mhr-lightbox__img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 160px);
  width: auto;
  height: auto;
  border-radius: var(--radius-image);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  background: rgba(255, 255, 255, 0.06);
  transform: scale(0.98);
  transition: transform var(--dur-base) var(--ease-emphasis);
}
.mhr-lightbox[data-open="true"] .mhr-lightbox__img { transform: scale(1); }

.mhr-lightbox__cap {
  text-align: center;
  color: #fff;
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  line-height: 1.4;
  max-width: 60ch;
}
.mhr-lightbox__count {
  display: block;
  margin-top: 4px;
  font-size: 0.72rem;
  font-weight: var(--fw-regular);
  letter-spacing: var(--tracking-mono);
  color: rgba(255, 255, 255, 0.6);
}

.mhr-lightbox__close,
.mhr-lightbox__nav {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.mhr-lightbox__close:hover,
.mhr-lightbox__nav:hover { background: rgba(255, 255, 255, 0.2); }
.mhr-lightbox__close:focus-visible,
.mhr-lightbox__nav:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.mhr-lightbox__close {
  position: absolute;
  top: clamp(12px, 3vw, 28px);
  right: clamp(12px, 3vw, 28px);
}
.mhr-lightbox[data-single="true"] .mhr-lightbox__nav { display: none; }

@media (max-width: 640px) {
  .mhr-lightbox { gap: 6px; padding-inline: 6px; }
  .mhr-lightbox__nav { position: absolute; bottom: 16px; }
  .mhr-lightbox__nav--prev { left: 16px; }
  .mhr-lightbox__nav--next { right: 16px; }
  .mhr-lightbox__img { max-height: calc(100vh - 190px); }
  .mhr-lightbox__cap { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .mhr-lightbox,
  .mhr-lightbox__img { transition: none; }
}