/* =========================================================
   İç sayfalar: ürünler, ürün detay, projeler, proje detay, referanslar,
   kurumsal, servis, iletişim, teklif
   Dil: marka kırmızısı giriş → açık içerik → koyu kapanış + footer.
   İmza: kırmızı giriş ile açık yüzeyin sınırına yarı yarıya oturan renk blokları / görsel.
   ========================================================= */
html { scroll-padding-top: calc(var(--header-h) + 76px); }

/* ---------- Ortak kırmızı hero ---------- */
.p-head {
  --on-dark-muted: var(--white);
  display: flow-root;
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + clamp(48px, 6vw, 88px));
  background: var(--red); color: var(--white);
}
.p-head :focus-visible { outline-color: var(--white); }
.crumbs { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-bottom: 28px; font-size: var(--fs-small); color: var(--on-dark-muted); }
.crumbs a:hover { color: var(--white); }
.p-head__row { display: grid; gap: 22px; max-width: 760px; }
.p-head h1 { font-size: clamp(2.6rem, 1.5rem + 3.4vw, 4.5rem); line-height: .98; font-weight: 800; letter-spacing: -.035em; font-variation-settings: "wdth" 115; text-wrap: balance; }
.p-head p { max-width: 32em; color: var(--on-dark-muted); font-size: var(--fs-lead); line-height: 1.55; }
.p-head__count { display: block; color: var(--white); font-weight: 600; }

/* ---------- Ürünler: renk kartları ---------- */
.cat-filter { position: sticky; top: var(--header-h); z-index: 20; display: flex; gap: 8px; overflow-x: auto; padding-block: 14px; background: var(--paper); scrollbar-width: none; }
.cat-filter button { flex: none; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: .9375rem; font-weight: 600; transition: border-color .2s, background-color .2s, color .2s; }
.cat-filter button:hover { border-color: var(--graphite); }
.cat-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.cat-group { padding-top: clamp(40px, 4vw, 56px); }
.cat-group[hidden] { display: none; }
.cat-group__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.cat-group__head h2 { display: flex; align-items: center; gap: 12px; font-size: var(--fs-h3); font-weight: 800; letter-spacing: -.025em; font-variation-settings: "wdth" 112; }
.cat-group__head .code { color: var(--graphite); }
.cat-end { height: clamp(56px, 6vw, 96px); }
.cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cards > li { display: grid; }
.swc { display: grid; grid-template-rows: auto 1fr; background: var(--white); transition: transform .3s var(--ease), box-shadow .3s; }
.swc:hover { transform: translateY(-6px); box-shadow: 0 18px 36px -18px rgb(20 32 43 / 35%); }
.swc__color { display: flex; flex-direction: column; justify-content: space-between; min-height: 150px; padding: 14px 16px; background: var(--ral); color: var(--white); }
.swc__color[data-ink="dark"] { color: #0E0E10; }
.swc__no { font-size: var(--fs-h3); line-height: 1; font-weight: 800; letter-spacing: -.03em; font-variation-settings: "wdth" 80; }
.swc__body { display: grid; gap: 6px; align-content: start; padding: 16px 16px 20px; }
.swc__body b { font-size: 1.125rem; line-height: 1.25; font-weight: 700; transition: color .2s; }
.swc__body > span:not(.swc__go) { color: var(--graphite); font-size: var(--fs-small); }
.swc__go { display: inline-flex; align-items: center; gap: 6px; align-self: end; margin-top: 8px; color: var(--blue); font-weight: 600; font-size: var(--fs-small); }
.swc:hover .swc__body b { color: var(--blue); }
.swc--svc .swc__color { min-height: 110px; }
.swc--category { height: 100%; }
.swc--category .swc__color { padding: 0; }
.swc--category .swc__body { grid-template-rows: auto 1fr auto; align-content: stretch; padding: 24px; }
@media (max-width: 600px) { .cards.cards--category { grid-template-columns: 1fr; } }
.svc-row { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 16px; }
.svc-row .tags { margin: 0; align-content: start; }
/* Ürün satırları (iki sayfada ortak) */
.products { border-top: 1.5px solid var(--ink); }
.product { display: grid; grid-template-columns: 64px minmax(0, 1fr) 24px; gap: 8px 20px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--line); }
.product .code { color: var(--graphite); }
.product b { display: block; font-size: 1.25rem; font-weight: 700; letter-spacing: -.01em; transition: color .2s; }
.product .d { display: block; max-width: 44em; margin-top: 4px; color: var(--graphite); }
.product .icon { align-self: center; color: var(--graphite); transition: transform .25s var(--ease), color .2s; }
a.product:hover b { color: var(--blue); }
a.product:hover .icon { transform: translateX(4px); color: var(--blue); }
.product[aria-current="page"] b { color: var(--graphite); }
.product[aria-current="page"] .icon { visibility: hidden; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags li { padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: var(--fs-small); }

/* ---------- Koyu kapanış (iki sayfada ortak) ---------- */
.p-close { margin-top: clamp(32px, 4vw, 56px); background: var(--ink); color: var(--on-dark); }
.p-close .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px 64px; align-items: end; padding-block: clamp(72px, 7vw, 112px); border-bottom: 1px solid rgb(255 255 255 / 14%); }
.p-close h2 { max-width: 18ch; color: var(--white); font-size: var(--fs-h2); line-height: 1.04; font-weight: 800; letter-spacing: -.03em; font-variation-settings: "wdth" 115; }
.p-close p { max-width: 36em; margin-top: 16px; color: var(--on-dark-muted); }
.p-close .acts { display: grid; gap: 16px; justify-items: start; }
.p-close .tel { color: var(--white); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 800; font-variation-settings: "wdth" 90; border-bottom: 2px solid var(--red); }
.p-close :focus-visible { outline-color: var(--white); }

/* =========================================================
   Ürün detay sayfası
   ========================================================= */
.pd-fam { display: inline-flex; align-items: center; gap: 10px; color: var(--on-dark-muted); font-size: var(--fs-small); font-weight: 600; }
.pd-fam:hover { color: var(--white); }
.pd-fam .chip { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 25%); }
.p-head .actions { margin-top: 8px; }
.p-head .btn--primary { background: var(--white); color: var(--red); }
.p-head .btn--primary:hover { background: var(--paper); color: var(--red-deep); }
.p-head .btn--light { box-shadow: inset 0 0 0 1.5px var(--white); color: var(--white); }
.p-head .btn--light:hover { background: var(--white); color: var(--red); }

/* Koyu girişle açık yüzey arasına oturan görsel */
.pd-figure { position: relative; z-index: 1; margin: clamp(48px, 5vw, 72px) 0 -160px; }
.pd-figure__frame { background: var(--white); }
.pd-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.pd-figure__empty { display: grid; place-items: center; aspect-ratio: 21 / 9; color: var(--graphite); background: var(--line-soft); }
.pd-figure__tag { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 5px 9px; background: var(--white); color: var(--ink); }
.pd-figure__tag .chip { width: 8px; height: 16px; }
.pd-body { padding-top: calc(160px + clamp(56px, 6vw, 88px)); }

.pd-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 104px); align-items: start; }
.pd-h { margin-bottom: 20px; font-size: var(--fs-h3); line-height: 1.1; font-weight: 800; letter-spacing: -.025em; font-variation-settings: "wdth" 112; }

/* Teknik bilgiler */
.specs { border-top: 1.5px solid var(--ink); }
.specs div { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 600; }
.specs dd { margin: 0; color: var(--graphite); }
.specs dd.pending { color: var(--graphite); font-style: italic; }
.specs-note { margin-top: 14px; font-size: var(--fs-small); color: var(--graphite); }

/* Aynı aileden: yapışkan yan liste */
.pd-side { position: sticky; top: calc(var(--header-h) + 32px); }
.pd-side .product { grid-template-columns: 48px minmax(0, 1fr) 20px; padding: 16px 0; }
.pd-side .product b { font-size: 1.0625rem; }
.pd-side__all { margin-top: 18px; }

/* Projede kısa bilgi tablosu, yapışkan listenin hareket alanını daraltmasın.
   Sonraki bölümün mevcut boşluğu takip alanına dahildir; ek boşluk eklenmez. */
@media (min-width: 1024px) {
  .pd-grid--project { --side-travel: clamp(72px, 8vw, 120px); align-items: stretch; }
  .pd-grid--project > section { padding-bottom: var(--side-travel); }
  .pd-side-track { padding-bottom: 24px; }
  .pd-side-track::after { content: ""; display: block; height: calc(var(--side-travel) - 24px); }
  .pd-grid--project + .pd-projects,
  .pd-grid--project + .pd-pager { margin-top: 0; }
}

/* İlgili projeler */
.pd-projects { margin-top: clamp(72px, 8vw, 120px); }
.pd-projects__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 12px 24px; }
.pd-projects__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.pd-project { display: grid; gap: 12px; }
.pd-project__fig { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--line-soft); }
.pd-project__fig img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); }
.pd-project:hover img { transform: scale(1.03); }
.pd-project__fig .code { position: absolute; left: 12px; top: 12px; padding: 5px 9px; background: var(--white); }
.pd-project b { font-weight: 700; transition: color .2s; }
.pd-project:hover b { color: var(--blue); }
.pd-project span.m { display: block; color: var(--graphite); font-size: var(--fs-small); }

/* Önceki / sonraki ürün */
.pd-pager { display: grid; grid-template-columns: 1fr 1fr; margin-top: clamp(72px, 8vw, 120px); border-top: 1px solid var(--line); }
.pd-pager a { display: grid; gap: 6px; padding: 24px 0; }
.pd-pager a + a { justify-items: end; text-align: right; }
.pd-pager .code { color: var(--graphite); }
.pd-pager b { font-size: 1.25rem; font-weight: 700; transition: color .2s; }
.pd-pager a:hover b { color: var(--blue); }

@media (max-width: 1023px) {
  .cards { grid-template-columns: 1fr 1fr; }
  .svc-row { grid-template-columns: 1fr; }
  .p-close .container, .pd-grid { grid-template-columns: 1fr; }
  .pd-side { position: static; }
  .pd-figure { margin-bottom: -96px; }
  .pd-figure img, .pd-figure__empty { aspect-ratio: 16 / 9; }
  .pd-body { padding-top: calc(96px + 56px); }
  .pd-projects__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .cards { gap: 10px; }
  .swc__color { min-height: 110px; }
  .product { grid-template-columns: 44px minmax(0, 1fr) 20px; gap: 6px 12px; }
  .product b { font-size: 1.0625rem; }
  .specs div { grid-template-columns: 1fr; gap: 4px; }
  .pd-projects__grid { grid-template-columns: 1fr; }
  .pd-pager { grid-template-columns: 1fr; }
  .pd-pager a + a { justify-items: start; text-align: left; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) { .swc { transition: none; } }
@media (min-width: 1024px) and (max-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =========================================================
   Ortak: koyu girişin altında görsel/blok yoksa
   ========================================================= */
.p-head--plain { padding-bottom: clamp(56px, 6vw, 96px); }
.pg-body { padding-block: clamp(56px, 6vw, 96px); }
.pg-more { margin-top: clamp(48px, 5vw, 72px); color: var(--graphite); }
.pg-more .link-arrow { display: inline-flex; }
.empty-note { padding: 40px 0; color: var(--graphite); }
.btn--secondary.is-pending { color: var(--graphite); box-shadow: inset 0 0 0 1.5px var(--line); opacity: 1; }
.btn--secondary.is-pending:hover { background: none; color: var(--graphite); }

/* =========================================================
   Projeler
   ========================================================= */
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 48px); }
.filter button {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--white);
  font-size: .9375rem; font-weight: 600; transition: border-color .2s, background-color .2s, color .2s;
}
.filter button:hover { border-color: var(--graphite); }
.filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.proj-grid > li.is-featured { grid-column: span 2; grid-row: span 2; }
.proj-grid > li.is-featured .pd-project { height: 100%; grid-template-rows: 1fr auto; }
.proj-grid > li.is-featured .pd-project__fig { aspect-ratio: auto; min-height: 360px; }
.proj-grid.is-filtered > li.is-featured { grid-column: auto; grid-row: auto; }
.proj-grid.is-filtered > li.is-featured .pd-project { height: auto; grid-template-rows: auto; }
.proj-grid.is-filtered > li.is-featured .pd-project__fig { aspect-ratio: 4 / 3; min-height: 0; }
.proj-grid > li[hidden] { display: none; }
.pd-project__cap { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.pd-project__fam { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); font-weight: 600; white-space: nowrap; }
.pd-pager .m { color: var(--graphite); font-size: var(--fs-small); }

/* =========================================================
   Referanslar
   ========================================================= */
/* Logo duvarı (16 Ekim, kullanıcının seçimi): ince çizgili ızgara, üzerine gelince alttan bilgi şeridi */
.demo-note { margin-bottom: 24px; color: var(--graphite); font-size: var(--fs-small); }
.seg-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 48px); }
.seg-filter button { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: .9375rem; font-weight: 600; transition: border-color .2s, background-color .2s, color .2s; }
.seg-filter button:hover { border-color: var(--graphite); }
.seg-filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--white); }
.lg-ph { display: grid; place-items: center; background: var(--line-soft); color: var(--graphite); }
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.wall > li { position: relative; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.wall > li[hidden] { display: none; }
.wall__cell { position: relative; display: grid; place-items: center; height: 200px; padding: 28px; overflow: hidden; outline-offset: -3px; }
.wall__cell img { max-width: 70%; max-height: 72px; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.wall__cell .lg-ph { width: 60%; height: 64px; }
.wall__info { position: absolute; inset: auto 0 0 0; display: grid; gap: 8px; padding: 14px 16px; background: var(--white); transform: translateY(101%); transition: transform .35s var(--ease); }
.wall__info b { font-weight: 700; }
.wall__cell:hover .wall__info, .wall__cell:focus-visible .wall__info, .wall__cell:focus-within .wall__info { transform: none; }
.wall__cell:hover img { filter: none; opacity: 1; }
.fam-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: var(--fs-small); font-weight: 600; }
.fam-chips li { display: inline-flex; align-items: center; gap: 8px; }
@media (hover: none) { .wall__info { position: static; transform: none; } .wall__cell { height: auto; grid-template-rows: 120px auto; place-items: stretch; } .wall__cell .lg-ph, .wall__cell img { place-self: center; } }
@media (max-width: 1023px) { .wall { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .wall { grid-template-columns: 1fr 1fr; } .wall__cell { height: 140px; padding: 18px; } }
@media (prefers-reduced-motion: reduce) { .wall__info { transition: none; } }

/* =========================================================
   Kurumsal
   ========================================================= */
.about { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 88px); align-items: start; }
.about__lead { margin-bottom: 20px; font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); line-height: 1.35; font-weight: 600; letter-spacing: -.01em; }
.about__text p:not(.about__lead) { color: var(--graphite); max-width: 36em; }
.about__ph { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--line-soft); color: var(--graphite); }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px clamp(24px, 3vw, 48px); margin-top: clamp(64px, 7vw, 104px); padding-top: clamp(40px, 4vw, 56px); border-top: 1px solid var(--line); }
.fact svg { width: 44px; height: 44px; margin-bottom: 18px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.fact svg .d { stroke: var(--blue); }
.fact strong { display: block; margin-bottom: 6px; font-size: 1.125rem; font-weight: 700; }
.fact span { color: var(--graphite); }
.about-fams { margin-top: clamp(64px, 7vw, 104px); }
.about-fams__list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 clamp(24px, 4vw, 64px); border-top: 1.5px solid var(--ink); }
.about-fams__list a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); }
.about-fams__list b { display: block; font-size: 1.125rem; font-weight: 700; transition: color .2s; }
.about-fams__list .m { display: block; color: var(--graphite); font-size: var(--fs-small); }
.about-fams__list .icon { color: var(--graphite); transition: transform .25s var(--ease), color .2s; }
.about-fams__list a:hover b, .about-fams__list a:hover .icon { color: var(--blue); }
.about-fams__list a:hover .icon { transform: translateX(4px); }
.place { margin-top: clamp(64px, 7vw, 104px); }
.place__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 16px 32px; padding-top: 20px; border-top: 1.5px solid var(--ink); }
.place address { font-style: normal; font-size: 1.125rem; }

/* =========================================================
   Servis ve iletişim
   ========================================================= */
.ways { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: clamp(64px, 7vw, 104px); border-top: 1.5px solid var(--ink); }
.way { display: grid; gap: 10px; align-content: start; justify-items: start; padding: clamp(28px, 3vw, 40px) clamp(24px, 3vw, 48px) 0 0; }
.way + .way { padding-left: clamp(24px, 3vw, 48px); border-left: 1px solid var(--line); }
.way .code { color: var(--graphite); }
.way .pd-h { margin-bottom: 0; }
.way p { color: var(--graphite); max-width: 30em; }
.way__tel { margin-top: 6px; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); font-weight: 800; line-height: 1.2; font-variation-settings: "wdth" 90; border-bottom: 2px solid var(--red); }
.way__tel:hover { color: var(--red); }
.svc-sub { margin: 32px 0 0; font-size: 1.125rem; font-weight: 700; }
.contact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px clamp(24px, 3vw, 48px); border-top: 1.5px solid var(--ink); padding-top: clamp(28px, 3vw, 40px); }
.contact__item { display: grid; gap: 10px; align-content: start; justify-items: start; }
.contact__item .code { color: var(--graphite); }
.contact__big { font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; font-variation-settings: "wdth" 95; overflow-wrap: anywhere; }
.contact__big:hover { color: var(--blue); }
.contact__addr { font-style: normal; font-size: 1.125rem; max-width: 22em; }
.route { margin-top: clamp(64px, 7vw, 104px); max-width: 880px; }

/* =========================================================
   Teklif formu
   ========================================================= */
.qform { display: grid; gap: 28px; }
.qform [hidden] { display: none; }
.quote-availability { margin-bottom: 28px; color: var(--graphite); font-size: var(--fs-small); }
.request-type { min-width: 0; padding: 0; margin: 0; border: 0; }
.request-type legend { margin-bottom: 12px; font-weight: 700; font-size: 1.125rem; }
.request-type__choices { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: var(--radius); }
.request-type label { position: relative; cursor: pointer; }
.request-type input { position: absolute; opacity: 0; }
.request-type label span { display: block; padding: 12px 24px; min-height: 44px; border-radius: var(--radius); font-weight: 600; }
.request-type input:checked + span { background: var(--ink); color: var(--white); }
.request-type input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.contact-side__item { display: grid; justify-items: start; gap: 10px; padding-block: 24px; border-top: 1px solid var(--line); }
.contact-side__item h3 { font-size: var(--fs-body); font-weight: 600; color: var(--graphite); }
.contact-side__item address { font-style: normal; max-width: 30ch; }
.fam-pick { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.fam-pick legend { width: 100%; margin-bottom: 12px; font-weight: 700; font-size: 1.125rem; }
.fam-pick label { position: relative; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); font-size: .9375rem; font-weight: 600; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.fam-pick input { position: absolute; opacity: 0; pointer-events: none; }
.fam-pick label:hover { border-color: var(--graphite); }
.fam-pick label:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.fam-pick label:has(input:focus-visible) { outline: 2px solid var(--blue); outline-offset: 2px; }
.fam-pick .chip { width: 10px; height: 20px; transition: width .2s var(--ease); }
.fam-pick input:checked + .chip { width: 20px; }
.fam-pick__model { width: 100%; margin-top: 4px; color: var(--graphite); font-size: var(--fs-small); }
.fam-pick__model b { color: var(--ink); }
.qform__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.opt { font-weight: 400; color: var(--graphite); }
.field__error, .qform > .field__error { color: var(--red-deep); font-size: var(--fs-small); font-weight: 600; }
.field [aria-invalid="true"] { border-color: var(--red-deep); }
.consent { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-small); color: var(--graphite); }
.consent input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--ink); }
.qform .btn { justify-self: start; }
.notice { margin-bottom: 32px; padding: 18px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); }
.notice strong { display: block; margin-bottom: 4px; }
.notice p { color: var(--graphite); }
.notice a { color: var(--blue); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.notice--error { border-color: var(--red-deep); }
.notice:focus { outline: 2px solid var(--blue); outline-offset: 3px; }
.qside { display: grid; gap: 12px; justify-items: start; padding-top: 4px; }
.qside .code { color: var(--graphite); }
.qside p { margin-top: 20px; color: var(--graphite); }

@media (max-width: 1023px) {
  .proj-grid { grid-template-columns: 1fr 1fr; }
  .proj-grid > li.is-featured { grid-column: 1 / -1; grid-row: auto; }
  .proj-grid > li.is-featured .pd-project { height: auto; grid-template-rows: auto; }
  .proj-grid > li.is-featured .pd-project__fig { aspect-ratio: 16 / 10; min-height: 0; }
  .about { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .contact { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .proj-grid, .about-fams__list, .ways, .contact, .qform__grid, .facts { grid-template-columns: 1fr; }
  .way + .way { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 28px; }
  .pd-project__cap { flex-direction: column; gap: 6px; }
}

/* ---------- Ürün ailesi sayfası: diğer aileler (renk blokları) ---------- */
.fam-others { margin-top: clamp(72px, 8vw, 120px); }
.fam-others ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
.fam-others a {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 18px;
  min-height: 104px; padding: 14px 16px 16px;
  background: var(--ral); color: var(--white);
  transition: transform .3s var(--ease);
}
.fam-others a[data-ink="dark"] { color: #0E0E10; }
.fam-others a:hover, .fam-others a:focus-visible { transform: translateY(-6px); }
.fam-others strong { font-size: 1.125rem; line-height: 1.15; font-weight: 750; font-variation-settings: "wdth" 105; }
@media (max-width: 1023px) { .fam-others ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .fam-others ul { grid-template-columns: 1fr 1fr; } .fam-others a { min-height: 104px; } }
@media (prefers-reduced-motion: reduce) { .fam-others a { transition: none; } }
.cat-group__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 6px 20px; }
@media (max-width: 600px) { .cat-group__head { flex-direction: column; gap: 8px; } .cat-group__meta { justify-content: flex-start; } }

/* Ürün sayfası: teknik bilgi girilmemişse keşif başlıkları (26 Ekim) */
.pd-lead { max-width: 40em; margin-bottom: 24px; color: var(--graphite); font-size: var(--fs-lead); line-height: 1.55; }
.pd-checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; margin: 0; padding: 0; list-style: none; border-top: 1.5px solid var(--ink); }
.pd-checklist li { display: grid; gap: 4px; align-content: start; padding: 18px 0; border-bottom: 1px solid var(--line); }
.pd-checklist b { font-size: 1.0625rem; font-weight: 700; }
.pd-checklist span { color: var(--graphite); }
.product--plain { grid-template-columns: minmax(0, 1fr) 20px !important; }
.pd-pager__dir { color: var(--graphite); font-size: var(--fs-small); font-weight: 600; }
@media (max-width: 600px) { .pd-checklist { grid-template-columns: 1fr; } }

/* Ürün ve kategori sayfası metni (panel "Sayfa metni" alanı, rich_text) */
.pd-main { display: grid; gap: clamp(48px, 6vw, 72px); }
.pd-text { max-width: 40em; color: var(--graphite); line-height: 1.65; }
.pd-text p + p, .pd-text ul + p, .pd-text p + ul { margin-top: 1em; }
.pd-text ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.pd-text li { position: relative; padding: 10px 0 10px 22px; border-bottom: 1px solid var(--line); color: var(--ink); }
.pd-text li::before { content: ""; position: absolute; left: 2px; top: calc(10px + .78em); width: 10px; height: 1.5px; background: var(--red); }
.fam-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 96px); margin-bottom: clamp(56px, 7vw, 96px); padding-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
@media (max-width: 900px) { .fam-intro { grid-template-columns: 1fr; gap: 0; } }

/* Boş durum: henüz proje/referans yayınlanmadığında (çıkış hazırlığı, 26 Ekim) */
.wall:not(:has(> li)), .proj-grid:not(:has(> li)) { display: none; }
.empty-state-site { display: grid; gap: 16px; justify-items: start; max-width: 40em; padding: clamp(32px, 5vw, 56px) 0; border-top: 1.5px solid var(--ink); }
.empty-state-site p { color: var(--graphite); font-size: var(--fs-lead); line-height: 1.55; }