/* ==========================================================================================================================
   D tervezet – „Boldi sorrendje” (2026-10-25; 2026-10-27 óta az egyetlen kinézet alapja, fölötte az E)
   A mostani Rajzkarton arculat (röntgenes nyitókép, rajzolt ház, futószalag) Boldi sorrendjében: nyitókép a három
   kiemeléssel → Miben segíthetünk? → Klímák (futószalag) → Így dolgozunk → az öt eszköz (benne a hibakód) → Rólunk →
   Munkáink → Hol dolgozunk → Ajánlatkérés (a sorrend a PHP-részekben: inc/tervezetek/d/). A többi tervezetből: a C alsó
   fülsávja és „Folytassa” kártyája, az A haladásjelzője az ajánlatkérőn. Színek: a mai paletta, új szín nincs.
   ========================================================================================================================== */
html[data-tervezet="d"] {
  --td-kartya: #FFFDF8;
  --td-indigo: #263BAA;
  --td-tinta: #172366;
  --td-tinta-2: #48528F;
  --td-halvany: #ECEEF8;
  --td-fenykek: #B4BEFF;
  --td-vonal: rgba(61, 58, 53, .16);
  --td-gyors: cubic-bezier(.2, .8, .2, 1);
}

/* ---------- Fő menü: Hűtés, Fűtés és Épületgépészet nélkül (Boldi, 2026-10-25: „felesleges megjelenítés, ha igazából
   ugyanoda visz, mint a Miben segíthetünk rész”) – a három oldal a főoldal házáról és a láblécből érhető el ---------- */
html[data-tervezet="d"] .main-nav :is(.nav-hutes, .nav-futes, .nav-epuletgepeszet) { display: none; }

/* ---------- „Szolgáltatások” lenyíló (2026-10-27, Boldi: „akkor legyen az első opció”): a három terület és a szolgáltatások
   oldalai. Asztalon a menüsor alá nyíló panel, telefonon a „Menü” listájában szétnyíló csoport (inc/tervezetek/d/menu-eleje.php,
   nyitás-zárás: tervezet-d.js, 4.) ---------- */
html[data-tervezet="d"] .nav-szolg { --c: var(--navy); position: relative; }
html[data-tervezet="d"] .nav-szolgaltatasok {
  display: inline-flex; align-items: center; gap: .3rem; margin: 0; padding: .35rem 0;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none;
  font: inherit; color: var(--t-tinta); cursor: pointer;
}
html[data-tervezet="d"] .nav-szolgaltatasok[data-aktiv] { border-bottom-color: var(--c); }
html[data-tervezet="d"] .nav-szolg-nyil { flex: none; width: .7rem; height: .7rem; transition: rotate .2s var(--td-gyors); }
html[data-tervezet="d"] .nav-szolgaltatasok[aria-expanded="true"] .nav-szolg-nyil { rotate: 180deg; }
html[data-tervezet="d"] .nav-szolg-panel { display: none; }
html[data-tervezet="d"] .nav-szolgaltatasok[aria-expanded="true"] + .nav-szolg-panel { display: grid; }
html[data-tervezet="d"] .nav-szolg-panel ul { display: grid; margin: 0; padding: 0; list-style: none; }
html[data-tervezet="d"] .nav-szolg-cim { margin: 0 0 .35rem; font-size: .8rem; font-weight: 650; letter-spacing: .01em; color: var(--td-tinta-2); }
html[data-tervezet="d"] .main-nav .nav-szolg-panel a { display: block; border: 0; color: var(--td-tinta); text-decoration: none; }
html[data-tervezet="d"] .main-nav .nav-szolg-panel a[aria-current="page"] { color: var(--td-indigo); font-weight: 700; }
html[data-tervezet="d"] .nav-szolg-teruletek strong { display: block; font-weight: 700; }

@media (min-width: 1100px) {
  @media (hover: hover) and (pointer: fine) {
    html[data-tervezet="d"] .nav-szolgaltatasok:hover { border-bottom-color: var(--t-narancs); }
  }
  html[data-tervezet="d"] .nav-szolg-panel {
    position: absolute; top: calc(100% + 1.15rem); left: -1.1rem; z-index: 30;
    width: min(37rem, calc(100vw - 2rem)); grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 1.25rem 1.75rem;
    padding: 1.15rem 1.25rem 1.25rem; background: var(--td-kartya);
    border: 1px solid var(--td-vonal); border-radius: 14px; box-shadow: 0 26px 50px -26px rgba(23, 35, 102, .5);
    opacity: 1; translate: none; transition: opacity .14s ease, translate .18s var(--td-gyors), display .18s allow-discrete;
  }
  /* a gomb és a panel közti rés: rámutatással át lehessen vinni az egeret, a panel ne csukódjon be */
  html[data-tervezet="d"] .nav-szolg-panel::before { content: ""; position: absolute; inset: -1.25rem 0 100%; }
  @starting-style { html[data-tervezet="d"] .nav-szolgaltatasok[aria-expanded="true"] + .nav-szolg-panel { opacity: 0; translate: 0 -.35rem; } }
  html[data-tervezet="d"] .nav-szolg-teruletek { gap: .15rem; }
  html[data-tervezet="d"] .main-nav .nav-szolg-panel a { margin-inline: -.6rem; padding: .5rem .6rem; border-radius: 8px; line-height: 1.3; }
  html[data-tervezet="d"] .nav-szolg-teruletek span { display: block; margin-top: .1rem; font-size: .86rem; font-weight: 450; color: var(--td-tinta-2); }
  @media (hover: hover) and (pointer: fine) {
    html[data-tervezet="d"] .main-nav .nav-szolg-panel a:hover { background: var(--td-halvany); color: var(--td-tinta); }
  }
  html[data-tervezet="d"] .main-nav .nav-szolg-panel a:focus-visible { outline: 2px solid var(--td-indigo); outline-offset: 0; }
}

@media (max-width: 1099px) {
  /* szétnyitva a menü a képernyőnél magasabb lehet: a fejléc alatt görgethető, az alsó fülsáv ne takarja az alját */
  html[data-tervezet="d"] .main-nav { max-height: calc(100dvh - 4rem); overflow-y: auto; overscroll-behavior: contain; }
  html[data-tervezet="d"] .nav-szolgaltatasok {
    justify-content: space-between; width: 100%; padding: .85rem 0; border-bottom: 1px solid var(--line); text-align: left;
  }
  html[data-tervezet="d"] .nav-szolgaltatasok[data-aktiv] { color: var(--c); border-bottom-color: var(--line); }
  html[data-tervezet="d"] .nav-szolg-nyil { width: .85rem; height: .85rem; }
  html[data-tervezet="d"] .nav-szolg-panel { gap: .9rem; padding: .8rem 0 .9rem .9rem; border-bottom: 1px solid var(--line); }
  html[data-tervezet="d"] .main-nav .nav-szolg-panel a { padding: .5rem 0; font-weight: 550; }
  html[data-tervezet="d"] .nav-szolg-teruletek span { display: none; }
  html[data-tervezet="d"] .nav-szolg-teruletek strong { font-weight: inherit; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-tervezet="d"] :is(.nav-szolg-nyil, .nav-szolg-panel) { transition: none; }
}

/* ---------- Lábléc: 2026-10-27 óta mindenhol tömör (site.css, terv.css: Lábléc), külön D-szabály nem kell ---------- */

/* ---------- Nyitókép: a három kiemelés a linkek alatt (az A tervezetből) ---------- */
/* egymás alatt, mint egy pipás lista: a nyitókép keskeny szöveghasábjában így nem törik 2 + 1 sorba */
html[data-tervezet="d"] .td-bizalom { display: grid; gap: .45rem; justify-items: start; margin: .35rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--td-vonal); list-style: none; }
html[data-tervezet="d"] .td-bizalom li { display: inline-flex; align-items: center; gap: .45rem; font-size: 1rem; color: var(--td-tinta); }
html[data-tervezet="d"] .td-bizalom strong { font-weight: 760; }
html[data-tervezet="d"] .td-bizalom .icon { flex: none; width: 1.25rem; height: 1.25rem; color: var(--td-indigo); stroke-width: 2.4; }
@media (max-width: 400px) {
  html[data-tervezet="d"] .td-bizalom li { font-size: .95rem; }
}

/* ---------- „Folytassa a megkezdett tervét” (a C tervezetből; Zeigarnik) – a Rajzkarton kártyáinak keretével ---------- */
html[data-tervezet="d"] .td-folytat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: .75rem;
  max-width: 34rem;
  min-height: 3.6rem;
  margin: 1rem 0 0;
  padding: .7rem .8rem .7rem .7rem;
  border: 1.5px solid var(--t-grafit);
  border-radius: 4px;
  background: var(--td-kartya);
  color: var(--td-tinta);
  text-decoration: none;
  box-shadow: 4px 4px 0 rgba(58, 63, 70, .08);
}
html[data-tervezet="d"] .td-folytat[hidden] { display: none; }
html[data-tervezet="d"] .td-folytat-ikon { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: 4px; background: var(--td-halvany); color: var(--td-indigo); }
html[data-tervezet="d"] .td-folytat-ikon svg { width: 1.65rem; height: 1.65rem; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
html[data-tervezet="d"] .td-folytat-szoveg { display: grid; gap: .1rem; min-width: 0; }
html[data-tervezet="d"] .td-folytat-szoveg strong { font-size: 1rem; font-weight: 760; line-height: 1.25; }
html[data-tervezet="d"] .td-folytat-szoveg span { font-size: .86rem; line-height: 1.3; color: var(--td-tinta-2); }
/* „folyamatban” jel: félig telt kör – a félbehagyott feladat */
html[data-tervezet="d"] .td-folytat-jel { width: 1.3rem; height: 1.3rem; border-radius: 50%; background: conic-gradient(var(--td-indigo) 0 50%, var(--td-halvany) 50% 100%); box-shadow: 0 0 0 2px var(--td-kartya), 0 0 0 3.5px var(--td-fenykek); }
html[data-tervezet="d"] .td-nyil { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--td-tinta-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .18s var(--td-gyors); }
@media (hover: hover) and (pointer: fine) { html[data-tervezet="d"] .td-folytat:hover .td-nyil { transform: translateX(3px); } }
html[data-tervezet="d"] .td-folytat:focus-visible { outline: 3px solid var(--td-indigo); outline-offset: 3px; }
html[data-tervezet="d"] .td-folytat.is-be { animation: td-be .2s var(--td-gyors) backwards; }
@keyframes td-be { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Narancs gombok: ceruzakeret helyett derengés (Boldi, 2026-10-25: „a narancssárga gombok ne ezek a
   körberajzoltak legyenek, hanem a glowing típusúak”) ----------
   A narancs fő gombok körül meleg fény dereng, rámutatáskor és fókuszban erősebben, lenyomva halványabban. Ahol eddig a
   keret rajzolódott ki egyszer (érintős képernyőn, amikor a gomb a képernyőre ér; a nyitóképen a megjelenés végén – terv.js:
   .is-keretes), ott a gomb egyszer felfénylik. A körvonalas másodgombok ceruzakerete marad. */
html[data-tervezet="d"] .t-gomb-fo .t-keret { display: none; }
html[data-tervezet="d"] :is(.t-gomb-fo, .btn-primary):not(.nav-call) {
  --td-feny: 0 0 0 1px rgba(255, 170, 105, .5), 0 0 16px 1px rgba(255, 122, 26, .42), 0 10px 26px -10px rgba(255, 122, 26, .8);
  --td-feny-eros: 0 0 0 1px rgba(255, 180, 120, .65), 0 0 28px 5px rgba(255, 122, 26, .55), 0 14px 32px -12px rgba(255, 122, 26, .9);
  box-shadow: var(--td-feny);
}
html[data-tervezet="d"] .t-gomb-fo { transition: transform .18s var(--t-ease), background-color .2s ease, color .2s ease, box-shadow .25s ease; }
html[data-tervezet="d"] :is(.t-gomb-fo, .btn-primary):not(.nav-call):focus-visible { box-shadow: var(--td-feny-eros); }
@media (hover: hover) and (pointer: fine) {
  html[data-tervezet="d"] :is(.t-gomb-fo, .btn-primary):not(.nav-call):hover { box-shadow: var(--td-feny-eros); }
}
html[data-tervezet="d"] :is(.t-gomb-fo, .btn-primary):not(.nav-call):active { box-shadow: 0 0 0 1px rgba(255, 170, 105, .45), 0 0 8px 0 rgba(255, 122, 26, .35); }
@keyframes td-felfenylik { 45% { box-shadow: var(--td-feny-eros); } }
@media (prefers-reduced-motion: no-preference) {
  html[data-tervezet="d"] .t-gomb-fo.is-keretes { animation: td-felfenylik 1.2s ease-in-out 1; }
}

/* ---------- Az öt eszköz (a hibakód-kereső is): a terv.css meglévő ötkártyás rácsa rendezi (3 + 2, tableten 2 + 2 + 1) ---------- */

/* ---------- Ajánlatkérés: haladásjelző a három kötelező adathoz (az A tervezetből; célgradiens) ---------- */
html[data-tervezet="d"] .td-haladas { display: grid; gap: .5rem; margin: .25rem 0 1rem; }
html[data-tervezet="d"] .td-haladas-sor { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; font-size: .95rem; font-weight: 650; color: #EEF0FB; }
html[data-tervezet="d"] .td-haladas-szam { display: inline-flex; align-items: center; gap: .35rem; font-variant-numeric: tabular-nums; }
html[data-tervezet="d"] .td-haladas-szam .icon { width: 1.15rem; height: 1.15rem; stroke-width: 2.6; }
html[data-tervezet="d"] .td-haladas-sav { height: 8px; overflow: hidden; border-radius: 999px; background: rgba(255, 255, 255, .2); }
html[data-tervezet="d"] .td-haladas-sav > span { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--td-kartya); transform: scaleX(var(--td-kesz, 0)); transform-origin: 0 50%; transition: transform .22s var(--td-gyors); }
html[data-tervezet="d"] .td-haladas.is-kesz .td-haladas-sav > span { background: #FFFFFF; }

/* ---------- Alsó fülsáv telefonon (a C tervezetből) – ott, ahol eddig a kétgombos sáv volt (760 px alatt) ----------
   A régi sáv láthatatlan lesz, de a helyén marad (visibility, nem display): a futoszalag.js, a terv.js és a tervrajz.js a
   magasságából számolja, mennyi látszik a képernyő aljából – így a fülsávval is jól számolnak, és a lap alján hagyott hely
   (body padding) is megmarad. */
html[data-tervezet="d"] .td-tabsav { display: none; }
@media (max-width: 760px) {
  html[data-tervezet="d"] .mobile-bar { visibility: hidden; }
  html[data-tervezet="d"] .main-nav { max-height: calc(100dvh - 4rem - 4.2rem - env(safe-area-inset-bottom, 0px)); }
  html[data-tervezet="d"] .td-tabsav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 31;
    display: block;
    padding: .25rem max(.35rem, env(safe-area-inset-right, 0px)) calc(.25rem + env(safe-area-inset-bottom, 0px)) max(.35rem, env(safe-area-inset-left, 0px));
    border-top: 1px solid rgba(23, 35, 102, .13);
    background: rgba(255, 253, 248, .95);
    -webkit-backdrop-filter: saturate(1.2) blur(12px);
    backdrop-filter: saturate(1.2) blur(12px);
    box-shadow: 0 -10px 30px -24px rgba(23, 35, 102, .6);
    transition: translate .2s var(--td-gyors), visibility 0s linear 0s;
  }
  html[data-tervezet="d"] .td-tabsav ul { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); max-width: 34rem; margin: 0 auto; padding: 0; list-style: none; }
  html[data-tervezet="d"] .td-tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .12rem;
    min-height: 3.55rem;
    padding: .2rem .1rem;
    border-radius: 12px;
    color: var(--td-tinta-2);
    font-size: .72rem;
    font-weight: 650;
    line-height: 1.1;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    -webkit-user-select: none;
    user-select: none;
  }
  html[data-tervezet="d"] .td-tab-ikon { display: grid; place-items: center; width: 3.2rem; height: 1.95rem; border-radius: 999px; transition: background-color .18s ease, transform .12s var(--td-gyors); }
  html[data-tervezet="d"] .td-tab-ikon svg { width: 1.45rem; height: 1.45rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  html[data-tervezet="d"] .td-tab[aria-current="page"],
  html[data-tervezet="d"] .td-tab.is-aktiv { color: var(--td-tinta); }
  html[data-tervezet="d"] .td-tab[aria-current="page"] .td-tab-ikon,
  html[data-tervezet="d"] .td-tab.is-aktiv .td-tab-ikon { background: var(--td-halvany); }
  html[data-tervezet="d"] .td-tab.td-nem-aktiv { color: var(--td-tinta-2); }
  html[data-tervezet="d"] .td-tab.td-nem-aktiv .td-tab-ikon { background: transparent; }
  html[data-tervezet="d"] .td-tab:active .td-tab-ikon { transform: scale(.9); }
  html[data-tervezet="d"] .td-tab:focus-visible { outline: 3px solid var(--td-indigo); outline-offset: -2px; }
  /* középen a hívás: kiemelt, de INDIGÓ kör – telefonon a narancs csak az „Ajánlatot kérek” (Boldi, 2026-10-25), így az első
     képernyőn egyetlen narancs folt van (von Restorff); a hívás a helye és a mérete miatt így is a leginkább kézre eső gomb */
  html[data-tervezet="d"] .td-tab-hivas { color: var(--td-tinta); font-weight: 750; }
  html[data-tervezet="d"] .td-tab-hivas .td-tab-ikon {
    width: 3.3rem;
    height: 3.3rem;
    margin-top: -1.45rem;
    border-radius: 50%;
    background: var(--td-indigo);
    color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(255, 253, 248, .98), 0 10px 18px -8px rgba(38, 59, 170, .75);
  }
  html[data-tervezet="d"] .td-tab-hivas .td-tab-ikon svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.9; }
  html[data-tervezet="d"] .td-tab-hivas:active .td-tab-ikon { background: var(--td-tinta); }
  /* félbehagyott ajánlatkérés: az „Ajánlat” fülön, hol tart (Zeigarnik – a tervezet-d.js teszi ki) */
  html[data-tervezet="d"] .td-tab-allas { position: absolute; top: .1rem; left: calc(50% + .55rem); min-width: 1.9rem; padding: .05rem .3rem; border-radius: 999px; background: var(--td-indigo); color: #FFFFFF; font-size: .66rem; font-weight: 750; line-height: 1.35; text-align: center; font-variant-numeric: tabular-nums; }
  html[data-tervezet="d"] .td-tab-allas[hidden] { display: none; }
  /* a sütiablak a sáv fölött álljon; a teljes képernyős rajzolásnál és a nagyítóban nincs sáv */
  html[data-tervezet="d"] .suti { bottom: calc(4.6rem + env(safe-area-inset-bottom, 0px)); }
  html[data-tervezet="d"].tr-teljes .td-tabsav,
  html[data-tervezet="d"].lb-open .td-tabsav { visibility: hidden; }
}
/* gépelés közben (érintőképernyőn, nyitott billentyűzetnél) a sáv lecsúszik, hogy ne takarja a mezőt – mint a régi sáv */
@media (pointer: coarse) and (max-width: 760px) {
  html[data-tervezet="d"]:has(:is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="hidden"]), textarea, select):focus) .td-tabsav {
    translate: 0 110%;
    visibility: hidden;
    transition: translate .2s var(--td-gyors), visibility 0s linear .2s;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-tervezet="d"] .td-folytat.is-be { animation: none; }
  html[data-tervezet="d"] .td-haladas-sav > span,
  html[data-tervezet="d"] .td-tab-ikon,
  html[data-tervezet="d"] .td-nyil,
  html[data-tervezet="d"] .td-tabsav { transition: none !important; }
}

/* érintős készüléken a fülsáv elmosás nélkül (terv.css, „Érintős készüléken könnyített megjelenés”) */
@media (hover: none) and (pointer: coarse) {
  html[data-tervezet="d"] .td-tabsav { background: rgba(255, 253, 248, .98); -webkit-backdrop-filter: none; backdrop-filter: none; }
}