/* ============================================================================ * Kalite Politikamız ve Sertifikalarımız sayfası * (page-kalite-politikamiz-ve-sertifikalarimiz.php, slug * kalite-politikamiz-ve-sertifikalarimiz). Başlık, breadcrumb ve dış * container product-archive.css'ten ORTAK gelir (aynı hizalama — Hazır Yemek * kategori sayfası / Tarihçe / Değerlerimiz ile birebir aynı). Sadece bu * sayfaya özel: kalite politikası kartı (görsel + metin) ve filtrelenebilir * sertifika bölümü. * * XD "Kalite Politikalarımız ve Sertifikalarımız " artboard'undan (native * 1920, artboard-f87cf9e2-601a-42e3-8fbe-275e69463b5b — Tada.xd, extracted * via graphicContent.agc layer tree): container 140–1780 = 1640, aynı * product-archive.css container formülüyle birebir örtüşüyor. Kalite * politikası kartı 1640×555 r30, sol görsel 795×555 (kartın tam sol * kenarına yaslı), sağ metin sütunu ~795 genişlik + 50px gap. Başlık * Montserrat ExtraBold 52px (1. satır İtalik #9e262d, 2. satır Siyah). * Açıklama Montserrat Regular, ilk kelime ("tada") ExtraBold #9e262d — 12.5px * sabit boyut kullanıcı talebiyle uygulanmıştır (XD native 16px değil). * Sertifikalarımız kartı 1640×781 r30, 50px iç boşluk, başlık Montserrat * ExtraBold Italic 52px #9e262d. Sertifika kartı 284×400 r30, yatay boşluk * 30px (5 kart = 1540 = kart iç genişliği). Kart etiketi Montserrat Bold * 18px, ortalı. Tab metinleri kullanıcı talebiyle #000000 / 12.5px sabit * (XD'nin olası aktif-tab beyaz metin varyasyonunun önüne geçer). 1101–1920+ * bandında geri kalan ölçüler bu 1920 referansından clamp(floor, X.XXvw, * tavan) ile (px / 19.2 = vw) türetilir — product-archive.css'teki about.css * ile aynı teknik. * ==========================================================================*/ /* ---- Kalite Politikası kartı ---- */ .kalite-policy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 2.6vw, 50px); align-items: stretch; background: var(--tada-white); border: 1px solid var(--tada-gray-200); border-radius: clamp(20px, 1.56vw, 30px); overflow: hidden; margin: 0; } .kalite-policy__media { align-self: stretch; } /* Shared "no image selected yet" state for both the policy media box and a certificate card's media box. Deliberately NOT the generic placeholder.svg (which bakes visible "Tada asset placeholder" text into the image itself) — on the live frontend this renders as a plain neutral box with no text at all; the small hint text only prints for logged-in users who can actually fix it (see template-parts/kalite/panel.php), never for public visitors. */ .kalite-empty-state { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-height: 160px; background: var(--tada-gray-100); border: 1px dashed var(--tada-gray-400); border-radius: inherit; box-sizing: border-box; padding: 16px; text-align: center; } .kalite-empty-state__hint { margin: 0; font-family: Montserrat, Arial, sans-serif; font-size: 12px; line-height: 1.4; color: var(--tada-gray-700); } .kalite-policy__image { display: block; width: 100%; height: 100%; aspect-ratio: 795 / 555; object-fit: cover; } .kalite-policy__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 3.1vw, 60px) clamp(24px, 3.1vw, 60px) clamp(28px, 3.1vw, 60px) 0; } .kalite-policy__title { margin: 0 0 clamp(12px, 1.3vw, 24px); font-family: Montserrat, Arial, sans-serif; font-weight: 800; font-size: clamp(28px, 2.7vw, 52px); line-height: 1.1; } .kalite-policy__title-line { display: block; color: var(--tada-black); } .kalite-policy__title-line--accent { font-style: italic; color: var(--tada-red-active); } /* font-size: 12.5px is an explicit, fixed user request — scoped to this description only (never a clamp, never overridden per breakpoint below) and must NOT be copied into any shared/global paragraph style. */ .kalite-policy__description { font-family: Montserrat, Arial, sans-serif; font-weight: 400; font-size: 12.5px; line-height: 1.6; color: var(--tada-black); } .kalite-policy__description p { margin: 0 0 1em; } .kalite-policy__description p:last-child { margin-bottom: 0; } .kalite-policy__description strong { color: var(--tada-red-active); font-weight: 800; } /* ---- Sertifikalarımız bölümü ---- */ .kalite-certs { margin-top: clamp(28px, 3.65vw, 70px); background: var(--tada-white); border: 1px solid var(--tada-gray-200); border-radius: clamp(20px, 1.56vw, 30px); padding: clamp(28px, 3.1vw, 60px) clamp(24px, 2.6vw, 50px); } .kalite-certs__title { margin: 0 0 clamp(20px, 2.1vw, 40px); font-family: Montserrat, Arial, sans-serif; font-weight: 800; font-style: italic; font-size: clamp(26px, 2.7vw, 52px); line-height: 1.1; color: var(--tada-red-active); } /* Filter tabs — same pill convention as .home-recipes__tab (white/bordered inactive, solid red active), auto-width so admin-managed category names of any length never overflow or get clipped. Wraps onto multiple lines on desktop (≥1101px), where the row has enough width that wrapping never grows past a couple of lines. Below 1101px this is overridden to a single-row horizontal scroll instead — see the ≤1100px breakpoint block further down (`flex-wrap: nowrap` + `overflow-x: auto`) — because at tablet and phone widths, wrapping the longest admin-managed label would consume a large share of the screen before the certificate grid even starts. */ .kalite-certs__tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 clamp(24px, 2.6vw, 50px); } /* color: #000000 (inactive) / #ffffff (active) + font-size: 12.5px are explicit, fixed user requests. The active tab distinguishes itself via its red background AND white text — that combination must hold in every state (rest/hover/focus/focus-visible); it must never revert to black on hover/focus. [aria-selected="true"] is belt-and-braces with .is-active (both are always set together by the same JS toggle). Fixed height/line-height/padding across states keeps every button (any name length) the same height and vertically centred — no state changes size. */ .kalite-certs__tab { box-sizing: border-box; padding: 13px 26px; background: var(--tada-white); color: #000000; border: 1px solid var(--tada-gray-200); border-radius: 999px; font-family: Montserrat, Arial, sans-serif; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; line-height: 1.2; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; } .kalite-certs__tab:hover, .kalite-certs__tab:focus-visible { border-color: var(--tada-red-active); color: #000000; } .kalite-certs__tab.is-active, .kalite-certs__tab[aria-selected="true"] { background: var(--tada-red-active); color: #ffffff; border-color: var(--tada-red-active); } .kalite-certs__tab.is-active:hover, .kalite-certs__tab.is-active:focus-visible, .kalite-certs__tab[aria-selected="true"]:hover, .kalite-certs__tab[aria-selected="true"]:focus-visible { color: #ffffff; } /* Desktop only — the container has ample width there (product-archive.css formula), so no tab label ever needs to wrap; every button stays one line at one consistent height. Below 1101px the same `white-space: nowrap` is re-applied in the ≤1100px block, but there it is paired with horizontal scroll instead of wrap, so a label wider than the row scrolls into view rather than overflowing. */ @media (min-width: 1101px) { .kalite-certs__tab { white-space: nowrap; } } .kalite-certs__panel[hidden] { display: none; } .kalite-certs__empty { margin: 0; font-family: Montserrat, Arial, sans-serif; font-size: 14px; color: var(--tada-gray-700); } .kalite-certs__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 1.56vw, 30px); margin: 0; padding: 0; list-style: none; } .kalite-cert-card { display: flex; flex-direction: column; align-items: center; } .kalite-cert-card__link { display: flex; flex-direction: column; align-items: center; width: 100%; text-decoration: none; color: inherit; cursor: pointer; } .kalite-cert-card__link:focus-visible { outline: 3px solid var(--tada-yellow); outline-offset: 4px; border-radius: clamp(16px, 1.56vw, 30px); } /* Hover/focus feedback lives ONLY on the image, inside the media box's own overflow: hidden + fixed 284:400 aspect-ratio — the card, grid cell and title never move or resize, so there is no layout shift and neighbouring cards are never pushed. Same transition timing/easing and hover+focus- visible pairing as .product-card__image in product-archive.css (reused, not a new motion system); scale is a smaller 1.025 (vs. product cards' 1.07) because contain'ed document pages sit much closer to the padded edge — a bigger zoom would start clipping the certificate itself. */ @media (hover: hover) and (pointer: fine) { .kalite-cert-card__image { transition: transform .4s cubic-bezier(.4, 0, .2, 1); } .kalite-cert-card__link:hover .kalite-cert-card__image, .kalite-cert-card__link:focus-visible .kalite-cert-card__image { transform: scale(1.025); } } @media (prefers-reduced-motion: reduce) { .kalite-cert-card__image { transition: none; } .kalite-cert-card__link:hover .kalite-cert-card__image, .kalite-cert-card__link:focus-visible .kalite-cert-card__image { transform: none; } } /* Fixed 284:400 box, identical for all 5 cards regardless of each certificate scan's own (slightly varying) native aspect ratio — this is what guarantees equal outer card sizes and level bottom edges across the row. A small inner padding on the MEDIA box (not the image) plus object-fit: contain on the image itself keeps the document's own white background flush with the card's white background — one border only (on __media), never a second visible frame around the image. */ .kalite-cert-card__media { display: block; width: 100%; aspect-ratio: 284 / 400; background: var(--tada-white); border: 1px solid var(--tada-gray-200); border-radius: clamp(16px, 1.56vw, 30px); overflow: hidden; padding: 6%; box-sizing: border-box; } .kalite-cert-card__image { display: block; width: 100%; height: 100%; object-fit: contain; } .kalite-cert-card__title { display: block; margin-top: clamp(12px, 1.2vw, 20px); text-align: center; font-family: Montserrat, Arial, sans-serif; font-weight: 700; font-size: clamp(14px, 0.94vw, 18px); line-height: 1.4; color: var(--tada-black); transition: color .25s cubic-bezier(.4, 0, .2, 1); } /* Title turns TADA red alongside the image zoom — same colour token/ transition timing as .product-card__title's own hover in product-archive.css (reused, not a new rule). Grouped into the same (hover: hover) and (pointer: fine) block as the image scale above so both the image growing AND the title reddening are governed by one hover- capability gate (never sticks on touch), and reset together under prefers-reduced-motion. The title itself never moves/scales — only its colour changes, so this can never shift layout. */ @media (hover: hover) and (pointer: fine) { .kalite-cert-card__link:hover .kalite-cert-card__title, .kalite-cert-card__link:focus-visible .kalite-cert-card__title { color: var(--tada-red-active); } } @media (prefers-reduced-motion: reduce) { .kalite-cert-card__title { transition: none; } } /* ============================================================================ * Responsive. Desktop (>=1024) keeps the side-by-side policy card and the * 5-column certificate grid (clamp() above already scales everything down * fluidly between 1101–1920+; this block only adjusts the two breakpoints * where the *layout shape* itself changes, not just the scale). Tablet * (769–1023) tightens spacing and drops to 3 columns. Mobile (<=768) stacks * the policy card vertically (image → text, same reading order as desktop) * and drops to a 2-column certificate grid, matching the "content priority, * not squeezed desktop" mobile principle. * ==========================================================================*/ @media (max-width: 1100px) { .kalite-policy { border-radius: 20px; } .kalite-policy__content { padding: 28px 28px 28px 0; } .kalite-certs { border-radius: 20px; padding: 28px 24px; margin-top: 28px; } .kalite-certs__grid { grid-template-columns: repeat(3, 1fr); } /* Tablet + mobile override of the desktop flex-wrap default (line ~144): below 1101px there isn't enough width for every admin-managed category label to sit on one row without wrapping to a second line and pushing the certificate grid down the screen. Single-row horizontal scroll (nowrap + overflow-x) keeps the filter row exactly one button tall, matches the home page's proven horizontal-scroll pattern (.home-recipes__tab equivalent), and never forces equal-width buttons — each pill still sizes to its own label via flex: 0 0 auto. The track scrolls inside itself only: `.kalite-certs` is the panel's own padded box, so the strip can never widen the page (no document-level horizontal overflow). Scrollbar is hidden visually (both engines) but native touch swipe and trackpad horizontal scroll still work — no custom JS drag needed. main.js scrolls the newly activated tab back into view on click/arrow-key (`inline: 'center'`). */ .kalite-certs__tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .kalite-certs__tabs::-webkit-scrollbar { display: none; } /* Padding intentionally NOT changed here — the desktop 13px/26px is kept through the tablet band, which lands every pill at a uniform 43px tall (13 + 13 padding + 15px line-box + 2px border). Mobile shrinks it further in its own block below. */ .kalite-certs__tab { flex: 0 0 auto; white-space: nowrap; } } @media (max-width: 768px) { .kalite-policy { grid-template-columns: 1fr; border-radius: 18px; } .kalite-policy__image { aspect-ratio: 4 / 3; } /* Top/bottom equal (22px both) — the approved top spacing is the source of truth; bottom was 24px, now matched to it. Only in this stacked- card breakpoint (title has margin-top: 0 and the description's last paragraph has margin-bottom: 0, so this padding is the ENTIRE visible gap on both ends — nothing else to account for). Desktop's own top/bottom (both clamp(28px,3.1vw,60px), already equal) is untouched. */ .kalite-policy__content { padding: 22px 20px; } .kalite-policy__title { font-size: 26px; margin-bottom: 12px; } /* font-size intentionally NOT overridden here — 12.5px stays fixed at every breakpoint per explicit request (no extra mobile shrink). */ .kalite-certs { border-radius: 18px; padding: 22px 18px; margin-top: 24px; } .kalite-certs__title { font-size: 24px; margin-bottom: 20px; } /* The single-row horizontal-scroll treatment itself (nowrap + overflow-x + flex: 0 0 auto + white-space: nowrap) now lives in the ≤1100px block above, which covers this breakpoint too — mobile only shrinks the pill padding for touch from here. .kalite-certs__tab font-size intentionally NOT overridden — stays 12.5px fixed at every breakpoint, only padding shrinks. */ .kalite-certs__tab { padding: 11px 20px; } .kalite-certs__grid { grid-template-columns: repeat(2, 1fr); gap: 16px; } .kalite-cert-card__title { font-size: 13px; margin-top: 10px; } } @media (max-width: 400px) { .kalite-certs__tabs { gap: 8px; } .kalite-certs__tab { padding: 10px 16px; } } /* ============================================================================ * Scroll reveal — per-column offset for the certificate grid (Faz 4). * * Every `.kalite-cert-card` is its own `data-animate="fade-up"` target * (template-parts/kalite/panel.php), observed individually rather than as one * stagger container, so a certificate below the fold never reveals early and * the cards of a not-yet-selected category panel never animate at all. What is * left is the left-to-right rhythm WITHIN a row, and that is pure CSS: the * shared keyframe in main.css reads `--tada-anim-delay`, so setting it per * column is all this needs — no JS, no page-specific observer. * * The modulus is the column count the grid ACTUALLY renders at each band (see * the grid-template-columns rules above), not a fixed number, or the cycle * would restart mid-row and the flow would read diagonally: * >= 1101px : 5 columns -> 0 / 80 / 160 / 240 / 320ms * 769-1100 : 3 columns -> 0 / 80 / 160ms * <= 768 : 2 columns -> no offset; every card starts immediately, so a * long mobile list never queues up behind a growing delay. * 320ms max matches the sales-points 5-column grid, the other 5-wide reveal * on the site, and stays inside the shared 650ms budget. * * nth-child counts inside each `.kalite-certs__panel`'s own