/* Corporate, service, knowledge-base and legal pages (5 October, Kardo after his Dribbble reference: "mavi kutu havada duruyor;
   full width, profesyonel, ruhu olsun"). The heading area runs the full width: path, label and a large H1 on the left, the intro
   on the right, a photo card under it when one is chosen; the wiring-duct slots of the footer return faintly at its foot.
   Colours chosen in the panel (BlockTexts page hero) replace the light ground. Loaded after catalog-v2.css. */
.static-main{display:block}
/* v2 (5 October, Kardo: the path is the ceiling, no stripes, a colour, a gradient or a picture behind, text colours of my own,
   a title-only band). Colours come from the panel as variables (BlockTexts::heroAttrs). */
.static-hero{--h-ink:var(--ink,#17212c);--h-muted:#56626c;--h-eyebrow:var(--red,#d51f2d);position:relative;overflow:hidden;background:var(--hero-bg,linear-gradient(180deg,#f5f8fa 0%,#e7eef4 100%));border-bottom:1px solid #dce5ec}
.static-hero[data-hero-bg="image"]{background:#10283a var(--hero-bg) center/cover no-repeat}
.static-hero[data-hero-bg="image"]::before{content:"";position:absolute;inset:0;background:rgba(9,22,33,var(--hero-overlay,.45))}
.static-hero[data-tone="light"]{--h-ink:#fff;--h-muted:#e1e9ef;--h-eyebrow:#ffb3b9;border-bottom-color:transparent}
.static-hero__crumbs{position:relative;z-index:1;padding-top:24px}
.static-hero .crumb{margin:0;color:var(--hero-crumb,var(--h-muted));font-size:13px}
.static-hero .crumb a,.static-hero .crumb span{color:inherit}
.static-hero__grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-areas:"copy side";align-items:center;gap:28px 72px;padding:52px 0 64px}
.static-hero__grid.has-media{grid-template-areas:"copy side" "copy media"}
/* 6 October, Kardo: the title sat at the bottom and a long intro opened a gap above it; title and intro meet in the middle. */
.static-hero__copy{grid-area:copy;align-self:center;min-width:0}
.static-hero__side{grid-area:side;align-self:center;min-width:0;max-width:540px}
.static-hero__grid.has-media .static-hero__side{align-self:start}
.static-hero__media{grid-area:media;margin:0;align-self:end}
.static-hero__media img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:12px;box-shadow:0 26px 54px #10283a29}
.static-hero .eyebrow{margin:0 0 18px;color:var(--h-eyebrow);font-size:12px;font-weight:700;letter-spacing:2.2px}
.static-hero h1{margin:0;max-width:17ch;color:var(--hero-title,var(--h-ink));font-size:clamp(38px,5.1vw,68px);font-weight:600;line-height:1.05;letter-spacing:-.035em;overflow-wrap:anywhere}
.static-hero .lead{margin:0;color:var(--hero-text,var(--h-muted));font-size:clamp(16px,1.3vw,19px);line-height:1.7}
.static-hero .static-page__meta{display:flex;flex-wrap:wrap;gap:6px 16px;margin:18px 0 0;color:var(--hero-text,var(--h-muted));font-size:13px}
.static-hero[data-hero-layout="title"] .static-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy";min-height:clamp(240px,30vw,400px);padding-top:40px}
.static-hero[data-hero-layout="title"] :is(.static-hero__side,.static-hero__media,.eyebrow){display:none}
.static-main>.static-page-shell{padding-top:56px}
@media(max-width:900px){.static-hero__grid,.static-hero__grid.has-media{grid-template-columns:1fr;grid-template-areas:"copy" "side" "media";gap:22px;padding:30px 0 48px}.static-hero[data-hero-layout="title"] .static-hero__grid{min-height:220px}.static-main>.static-page-shell{padding-top:36px}}
/* Content starts at the same left edge as the heading area (Kardo: "align"): Codex centred a 980 px column; it keeps its reading
   width but stands on the page's left edge. */
.static-page-shell :is(.static-page__body,.static-sections,.static-section--children,.static-section__heading){margin-inline:0}
.static-page-shell .static-sections>:is(.static-section--text,.faq-section,.static-section--contact-copy){margin-inline:0}
.static-page-shell .static-page__body>:is(p,ul,ol){margin-inline:0}

/* About-style sections (5 October): a picture beside a text, and a row of figures. The sections column opens a little wider for
   them; text, FAQ and contact sections keep Codex's reading width. */
.static-page-shell .static-sections{max-width:1180px}
.static-page-shell .static-sections>:is(.static-section--text,.faq-section,.static-section--contact-copy){width:100%;max-width:980px;margin-inline:0}
.static-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.static-split--right .static-split__media{order:2}
.static-split--text{grid-template-columns:minmax(0,1fr)}
.static-split__media{margin:0}
.static-split__media img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;box-shadow:0 20px 44px #10283a1f}
.static-split__copy{min-width:0}
.static-split__copy .eyebrow{margin:0 0 12px;color:var(--red,#d51f2d);font-size:12px;font-weight:700;letter-spacing:2.2px}
.static-split__copy h2{margin:0 0 18px;font-size:clamp(27px,3vw,38px);line-height:1.15;letter-spacing:-.025em}
.static-split__copy .rich-text>*{max-width:62ch}
.static-split__copy .rich-text p{font-size:17px;line-height:1.75}
.static-split__copy .button{margin-top:24px}
/* One text width on every page (6 October, Kardo: "bir sayfa öyle, bu sayfa böyle olamaz"): body text runs the full content width
   as on the brand pages, on corporate, service, article, legal, brand, group and category pages alike. */
.static-page-shell :is(.static-page__body,.static-sections,.static-section--children,.static-section__heading),
.static-page-shell .static-page__body>:is(p,ul,ol),
.static-page-shell .static-sections>:is(.static-section--text,.faq-section,.static-section--contact-copy),
.static-page-shell .static-section--text>:is(p,ul,ol),
.static-page--legal .static-page__body,
.catalog-description .catalog-richtext,
.brand-intro :is(p,ul,ol){max-width:none}
.static-stats>h2{margin:0 0 26px;font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.static-stats__list{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin:0;border-top:1px solid #dfe6eb}
.static-stats__list>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:10px;min-width:0;padding:26px 24px 4px;border-left:1px solid #dfe6eb}
.static-stats__list>div:first-child{padding-left:0;border-left:0}
.static-stats__list dd{margin:0;color:var(--ink,#17212c);font-size:clamp(40px,4.4vw,58px);font-weight:600;line-height:1;letter-spacing:-.03em}
.static-stats__list dt{color:#5f6b75;font-size:14px;line-height:1.5}
@media(max-width:860px){.static-split,.static-split--right{grid-template-columns:minmax(0,1fr);gap:26px}.static-split--right .static-split__media{order:0}.static-stats__list{grid-template-columns:1fr 1fr}.static-stats__list>div{padding:20px 0 6px 18px}.static-stats__list>div:nth-child(odd){padding-left:0;border-left:0}}
/* "Üretimi sona erdi" badge (5 October, Kardo: "Eski ürün" read cheap; a rounded, corporate pill). Amber: an informational state,
   not an error. On the product page it also says what Mesut still offers. */
/* 6 October (Kardo): LS blue (#003478, from the LS logo) with white text, no amber dot. */
.lifecycle-badge{display:inline-flex;align-items:center;margin:0 0 12px;padding:6px 14px;border:0;border-radius:999px;background:#003478;color:#fff;font-size:13px;font-weight:600;letter-spacing:0;line-height:1.3}
.product-intro>p.lifecycle-badge{color:#fff}
.product-card .lifecycle-badge{margin:0 0 0 4px;padding:1px 9px;font-size:11px;vertical-align:1px}
/* A product without its own picture shows its brand's logo (5 October, Kardo), small and centred in the picture box. */
.missing-product-image--logo{display:flex;align-items:center;justify-content:center;background:#f6f8fa}
.missing-product-image--logo img{display:block;width:auto;max-width:58%;max-height:42%;height:auto;object-fit:contain}
.catalog-image img.catalog-image__logo{width:auto;max-width:58%;max-height:46%;height:auto;margin:auto;object-fit:contain}
/* Brand directory logos: a fixed-height row; the logo's own box (templates/site/brands.php) balances wide and square marks. */
.brand-directory .brand-tile__logo{display:flex;align-items:center;height:76px;margin:0 0 24px}
.brand-directory .brand-tile__logo img{display:block;max-width:100%;margin:0;object-fit:contain}
@media(max-width:720px){.brand-directory .brand-tile__logo{height:64px;margin-bottom:18px}}

/* Description texts at the foot of brand, group and category pages run the page's width (Kardo: they stopped half-way). */
.catalog-description .catalog-richtext,.catalog-description .catalog-richtext>*{max-width:none}
.brand-intro,.brand-intro :is(p,ul,ol){max-width:none}

/* Standard left column of brand-group and category pages (partials/catalog-aside.php, 5 October, Kardo): links, code search,
   direct contact, always in this order. Overrides catalog.css/catalog-v2.css box styles meant for the old asides. */
.catalog-layout aside.catalog-aside,.ls-layout aside.catalog-aside{display:grid;gap:16px;align-content:start;align-self:start;padding:0;border:0;border-radius:0;background:none}
.catalog-aside__box{padding:20px;border:1px solid #e1e7ec;border-radius:10px;background:#fff}
.catalog-aside .catalog-aside__box h2{margin:0 0 12px;color:var(--ink,#17212c);font-size:16px;font-weight:700;line-height:1.35}
.catalog-aside__links ul{display:grid;margin:0;padding:0;list-style:none}
.catalog-aside__links li a{display:block;padding:9px 0;border-top:1px solid #eef1f4;color:#33404b;font-size:14px;line-height:1.4}
.catalog-aside__links li:first-child a{border-top:0;padding-top:2px}
.catalog-aside__links li a:hover{color:var(--red,#d51f2d)}
.catalog-aside .catalog-aside__search{padding:20px;border:1px solid #e1e7ec}
.catalog-aside__search label{display:block;margin:0 0 6px;color:#66727d;font-size:12.5px}
.catalog-aside__field{display:flex;gap:8px}
.catalog-aside .catalog-aside__field input{flex:1;min-width:0;min-height:42px;padding:9px 11px;border:1px solid #d5dde3;border-radius:8px;font:inherit;font-size:14px}
.catalog-aside__field .button{min-height:42px;padding:9px 14px;font-size:14px}
/* 6 October (Kardo: the field was squeezed to a sliver beside the button in a narrow column): the field takes the row and the
   button wraps under it only when the column is too narrow for both. */
.catalog-aside .catalog-aside__field{flex-wrap:wrap}
.catalog-aside .catalog-aside__field input{flex:1 1 150px;width:auto}
.catalog-aside .catalog-aside__field .button{flex:0 0 auto;width:auto;margin:0}
.catalog-aside__contact{border-color:#10283a;background:#10283a;color:#d8e3eb}
.catalog-aside .catalog-aside__contact h2{color:#fff}
.catalog-aside__contact p{margin:0 0 12px;font-size:13.5px;line-height:1.55}
.catalog-aside__contact a{display:block;margin-top:6px;color:#fff;font-weight:700}
.catalog-aside__contact a+a{color:#9fe0b8;font-weight:600}
@media(max-width:760px){.catalog-aside{grid-template-columns:minmax(0,1fr)}}
/* Quote and support pages (5 October, Kardo after dacel.com.tr/ariza-kaydi): the corporate heading area, then one form card. */
.form-page__body{padding:48px 0 84px}
.form-card{display:grid;gap:24px;max-width:820px;margin:0 auto;padding:34px 36px;border:1px solid #e1e7ec;border-radius:14px;background:#fff;box-shadow:0 18px 44px #10283a12}
.form-card__info{padding:16px 18px;border-left:3px solid #245d8b;border-radius:8px;background:#f2f6f9;color:#4c5862;font-size:14px;line-height:1.6}
.form-card__info strong{display:block;margin-bottom:4px;color:var(--ink,#17212c)}
.form-card__info p{margin:0}
.form-card__info a{color:#174d79;font-weight:600}
.form-card__group{min-width:0;margin:0;padding:0;border:0}
.form-card__group legend{margin:0 0 14px;padding:0;color:var(--ink,#17212c);font-size:17px;font-weight:700}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px}
.form-grid__full{grid-column:1/-1}
.form-card label{display:grid;gap:7px;color:#3d4954;font-size:13.5px;font-weight:600}
.form-card :is(input:not([type=checkbox]),select,textarea){width:100%;min-height:46px;padding:11px 13px;border:1px solid #d3dbe1;border-radius:8px;background:#fff;color:var(--ink,#17212c);font:inherit;font-size:15px;font-weight:400}
.form-card :is(input,select,textarea):focus{border-color:#245d8b;outline:2px solid #245d8b2e}
.form-card textarea{resize:vertical}
.form-required{color:var(--red,#d51f2d)}
.form-card label.consent{display:flex;align-items:flex-start;gap:10px;font-weight:500}
.form-card .consent input{width:18px;height:18px;margin:2px 0 0;flex-shrink:0}
.form-card .consent a{color:#174d79;text-decoration:underline}
.form-card .form-card__send{justify-content:center;width:100%;min-height:54px;border:0;border-radius:10px;background:linear-gradient(90deg,#10283a,#1f4d6e);font-size:16px}
.form-card .form-card__send:hover{background:linear-gradient(90deg,#0b1d2b,#1b4360)}
.form-card__alt{margin:0;color:#5f6b75;font-size:14px;text-align:center}
.form-card__alt a{color:#1c7a45;font-weight:700}
.form-card--done h2{margin:0;font-size:24px}
.form-card--done p{margin:0;line-height:1.7}
.form-card--done .button{justify-self:start}
.form-card .form-error{color:#b3202c;font-size:12.5px;font-weight:600}
@media(max-width:700px){.form-page__body{padding:28px 0 56px}.form-card{padding:24px 18px}.form-grid{grid-template-columns:minmax(0,1fr)}}
/* Contact page request cards (5 October, Kardo: "arkası gri, hover'da daha gri oluyor; birini Mesut mavisi yapıp yazıları beyaz
   yapabiliriz"): the quote card is navy with white text, the support card white with a navy frame; both lift on hover. */
.contact-requests>a{display:flex;flex-direction:column;border:1px solid #dce4ea;border-top:0;border-radius:12px;background:#fff;box-shadow:0 2px 8px #10283a0d;transition:transform .2s,box-shadow .2s,border-color .2s}
.contact-requests>a:hover{transform:translateY(-3px);border-color:#245d8b;background:#fff;box-shadow:0 16px 36px #10283a1f}
.contact-requests>a>span{margin-top:auto}
.contact-requests>a:first-of-type{border-color:#10283a;background:linear-gradient(135deg,#10283a,#1f4d6e)}
.contact-requests>a:first-of-type:hover{background:linear-gradient(135deg,#0b1d2b,#1b4360)}
.contact-requests>a:first-of-type :is(h3,p){color:#fff}
.contact-requests>a:first-of-type p{color:#d6e2eb}
.contact-requests>a:first-of-type>span{color:#ffb3b9}
@media(prefers-reduced-motion:reduce){.contact-requests>a{transition:none}.contact-requests>a:hover{transform:none}}
/* Tables a little larger everywhere (5 October, Kardo: "yazıları azıcık büyütelim, rahat okunsun"). */
.model-table :is(td,tbody th){font-size:15px}
.model-table thead th{font-size:13.5px}
.model-section table:not(.model-table) :is(td,th){font-size:15.5px}
.model-table-note{margin-top:12px}
/* Kardo, 6 October: tables under one another in a product section were glued together; each table keeps clear of the one above. */
.product-page :is(.model-section,#ozellikler) .table-scroll+.table-scroll{margin-top:40px}
/* A document button is as wide as its name (6 October, Kardo: it ran to the end of the page). */
.product-page .document-link{width:fit-content;max-width:100%}

/* Documents beside the technical overview; a page without one (a series with a model table) gives them the full width instead of
   leaving the right column empty (5 October, Kardo: sometimes right, sometimes under). */
.detail-content:not(:has(#ozellikler)){display:block}

/* Category buttons over a hub's cards (Bilgi merkezi, 5 October). */
.filter-chips{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 26px}
.filter-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1px solid #d5dee5;border-radius:999px;background:#fff;color:#33404b;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:background-color .2s,border-color .2s,color .2s}
.filter-chip span{display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:#eef3f7;color:#245d8b;font-size:12px}
.filter-chip:hover{border-color:#245d8b;color:#174d79}
.filter-chip.is-active{border-color:#10283a;background:#10283a;color:#fff}
.filter-chip.is-active span{background:#ffffff26;color:#fff}
.filter-chip:focus-visible{outline:2px solid #245d8b;outline-offset:2px}
[data-filter-items]>.is-filtered-out{display:none!important}
/* A hub's cards come first (6 October, Kardo: the text under them was glued to them): no gap above the cards, a gap and a hairline
   before what follows them. */
.static-page-shell .static-page>.static-section--children:first-child{margin-top:0}
.static-page-shell .static-section--children+:is(.static-page__body,.static-sections){margin-top:72px;padding-top:56px;border-top:1px solid #dfe6eb}
/* Bilgi merkezi search (6 October): the same grey box as the catalogue's filter, above the category chips. */
.hub-search{margin:0 0 22px;padding:18px;background:#f3f5f7;border:1px solid #e0e6eb;border-radius:7px}
.hub-search>label{display:block;margin:0 0 7px;font-size:14px;font-weight:600}
.hub-search__field{display:flex;flex-wrap:wrap;gap:12px}
.hub-search__field input{flex:1 1 220px;min-width:0;height:46px;padding:10px 14px;background:#fff;border:1px solid #cbd5de;border-radius:4px;font:inherit;font-size:16px}
.hub-search__field input:focus{outline:2px solid var(--ink,#17212c);outline-offset:2px}
.hub-search .hub-search__field .button{flex:0 0 auto;width:auto;min-height:46px;margin:0;padding:11px 24px;border-radius:4px}
.hub-search__result{margin:12px 0 0;color:#4f5b65;font-size:14px}
.hub-search__result a,.hub-search__empty a{color:#174d79;font-weight:600}
.hub-search__empty{margin:0 0 22px;color:#4f5b65}
/* A heading area set to "Gizli" (6 October): no band; the path and the H1 stand as a plain title on the page's own ground. */
.static-hero[data-hero-layout="hidden"]{background:none;border-bottom:0;color:var(--ink,#17212c)}
.static-hero[data-hero-layout="hidden"]::before,.static-hero[data-hero-layout="hidden"]::after{display:none}
.static-hero[data-hero-layout="hidden"] .static-hero__grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy";min-height:0;padding:14px 0 6px}
.static-hero[data-hero-layout="hidden"] h1{color:var(--ink,#17212c)}
/* Table alignment from the panel (6 October): values and column names centred, the code column and long texts stay left. */
.model-table[data-align="center"] :is(td,thead th:not(:first-child)){text-align:center}
.model-table[data-align="center"] td.is-long{text-align:left}
/* The column's contact links each with their own mark (6 October, Kardo: the phone and "WhatsApp ile yazın" ran together). */
.catalog-aside__contact :is(.catalog-aside__phone,.catalog-aside__whatsapp){display:flex;align-items:center;gap:10px;margin-top:0;padding:10px 0}
.catalog-aside__contact .catalog-aside__whatsapp{border-top:1px solid #ffffff26}
.catalog-aside__contact a svg{flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Fault-code internal links (7 October): the brand's other fault pages under a fault page or a guide, the guide first;
   on a product page, its knowledge-base pages under the documents. */
.related-faults{margin-top:48px;padding-top:32px;border-top:1px solid #dfe6eb}
.related-faults h2{margin:0 0 18px;font-size:clamp(21px,2.2vw,26px)}
.related-faults__list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px 24px;margin:0;padding:0;list-style:none}
.related-faults__list a{display:block;padding:10px 0;border-bottom:1px solid #edf0f3;color:#174d79;font-weight:600}
.related-faults__list a:hover{color:var(--red,#d51f2d)}
.related-faults__list .is-guide a{color:var(--red,#d51f2d)}
.product-guides{margin-top:22px}
.product-guides h3{margin:0 0 10px;font-size:17px}
.product-guides ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.product-guides a{color:#174d79;font-weight:600}
.product-guides a:hover{color:var(--red,#d51f2d)}
.knowledge-links{margin-top:56px;margin-bottom:56px}
.knowledge-links h3{margin:22px 0 8px;font-size:17px}
.brand-page .knowledge-links{padding-inline:0}
/* Campaign banner on category and brand pages (8 October, panel: Kampanya alanları). */
.campaign-banner{margin-top:24px;margin-bottom:8px}
.campaign-banner a,.campaign-banner picture{display:block}
.campaign-banner img{display:block;width:100%;height:auto;border-radius:10px}
.campaign-banner a:focus-visible{outline:3px solid var(--red,#d51f2d);outline-offset:3px;border-radius:10px}
.brand-page .campaign-banner{margin-bottom:24px}