/*
* Artiviq Homepage — Desktop + Tablet
* Port of artiviq-homepage_2.html. All selectors namespaced under .av- to avoid
* Shoptimizer cascade conflicts. Only loaded when is_front_page() + !artiviq_is_phone().
*/
.artiviq-home * { box-sizing: border-box; }
.artiviq-home--desktop {
background: var(--av-white);
color: var(--av-black);
font-family: var(--av-font-body);
font-weight: 400; /* 300'dü — site geneliyle aynı gövde ağırlığı (v1.8.0) */
overflow-x: hidden;
}
/* Hide Shoptimizer's default header chrome on homepage */
.artiviq-home--desktop .site-header,
.artiviq-home--desktop .sticky-add-to-cart,
.artiviq-home--desktop .top-bar { display: none !important; }
/* ============ NAV ============ */
/* ⚠️ THE BAR IS FULL-BLEED, ITS CONTENT IS NOT (2026-09-22).
*
* `padding: 20px 32px` put the logo 32px from the VIEWPORT edge while every
* page on the site lays its content in a 1280px centred column. The two agree
* only below 1280px; above that they separate by (viewport − 1280) / 2, which
* on the owner's screen meant the logo sat 313px outside the column and 547px
* of empty white before the first menu item. The background, blur and border
* still run edge to edge — only the gutter changed, and it is READ from the
* same token the content column is built from, so they cannot drift again.
* Measured after: logo left edge = column left edge at 1280/1440/1680/1920.
*/
.av-nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; align-items: center; justify-content: space-between; gap: 24px;
padding-block: 20px;
/* THE ONLY place this formula is written. `100%` resolves against the fixed
* element's containing block (the viewport), so the content box lands on
* exactly `(viewport − 1280) / 2 + gutter` — the centred column's own left
* edge — and collapses to a plain gutter below 1280px. */
padding-inline: max(
var(--av-shell-gutter),
calc((100% - var(--av-shell-max)) / 2 + var(--av-shell-gutter))
);
background: rgba(255,255,255,0.97);
-webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
border-bottom: 1px solid rgba(0,0,0,0.08);
transition: padding 0.3s, box-shadow 0.3s;
}
/* Only the VERTICAL padding shrinks on scroll. It used to be the `padding`
* shorthand, which also re-declared a 32px gutter and therefore beat the
* mobile rule's 20px: on a phone the logo jumped 12px sideways the moment the
* page scrolled. Nothing now restates the gutter, so nothing can disagree
* with it. */
.av-nav.scrolled { padding-block: 13px; box-shadow: 0 2px 12px rgba(0,0,0,0.05); }
.av-nav-logo { display: flex; align-items: center; text-decoration: none; color: var(--av-black); flex-shrink: 0; }
/* ⚠️ THE CEILING IS 38px AND IT IS NOT AN AESTHETIC CHOICE.
* The bar's height is set by its TALLEST child, and that is the 38px icon
* button — not the logo. Six hard-coded offsets are anchored to the resulting
* 79px (body padding-top, mega panel top, search panel top, and the scrolled /
* topbar / admin-bar variants of those), so a logo that grows past 38px would
* silently slide the page under the nav. Growing to exactly 38px spends the
* headroom that already exists and changes no offset: measured 79px at every
* width, before and after. 34px is kept as the floor so nothing shrinks on a
* phone; 38px is reached at 1446px. */
.av-nav-logo-img { display: block; height: clamp(34px, 26px + 0.83vw, 38px); width: auto; max-width: 160px; object-fit: contain; transition: opacity 0.2s; }
.av-nav-logo:hover .av-nav-logo-img { opacity: 0.75; }
/* The homepage does not use `.av-page-shell` — its sections are `.av-container`,
* the same 1280px column with a WIDER gutter (clamp(20px,4vw,56px) against the
* shell's 32px). Redefining the INPUT on the home body class is all it takes:
* the nav's formula reads the gutter it inherits, so it follows whichever grid
* the template is built on, with no second rule to fall out of sync with.
* Measured at 1920: section content starts at 368.5, and so does the logo. */
.artiviq-home--desktop { --av-shell-gutter: clamp(20px, 4vw, 56px); }
/* Five items since "Tasarımcılar" (2026-10-23). Measured at 961px (the first desktop
* width): the links get 482px between logo and actions, the labels take 403px, so 28px
* gaps (515px) pushed the "Hediye Bul" CTA onto two lines and the nav grew 79 → 94px,
* under the 79px offset every panel and page top is built on. The gap now tightens to
* 15px at 961 and is back to 28px from 1018px up; nowrap keeps a label on one line.
* The slope is set by the HOME page, whose 4vw gutter (above) leaves ~13px less room than
* the shell's 32px: the first curve (30vw - 270px) fitted inner pages and still pushed the
* home actions up to 11px past the column at 990 (layout gate, first run at 961). */
.av-nav-links { display: flex; gap: clamp(14px, 22vw - 196px, 28px); list-style: none; margin: 0; padding: 0; align-items: center; }
.av-nav-links > li { position: relative; }
.av-nav-links a, .av-nav-link-btn { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--av-gray-dark); text-decoration: none; transition: color 0.2s; font-weight: 400; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.av-nav-links a:hover, .av-nav-link-btn:hover { color: var(--av-black); }
.av-nav-link-btn::after { content: ''; width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); opacity: 0.6; transition: transform 0.25s; }
.av-nav-link-btn[aria-expanded="true"]::after { transform: rotate(225deg) translate(-1px,-1px); }
/* ============ MEGA PANELS ============ */
.av-mega-panel { position: fixed; top: 96px; left: 0; right: 0; z-index: 99; background: rgba(255,255,255,0.98); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 40px 32px 36px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; max-height: calc(100vh - 110px); overflow-y: auto; }
.av-nav.scrolled ~ .av-mega-panel { top: 82px; }
.av-mega-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.av-mega-eyebrow { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--av-accent); margin: 0 auto 18px; }
.av-mega-cats-grid { margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.av-mega-cat-card { display: block; text-decoration: none; color: inherit; aspect-ratio: 4/3; position: relative; overflow: hidden; background: var(--av-off-white); transition: transform 0.3s; cursor: pointer; }
.av-mega-cat-card:hover { transform: translateY(-3px); }
.av-mega-cat-card-bg { position: absolute; inset: 0; transition: filter 0.3s; }
.av-mega-cat-card-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-mega-cat-card:hover .av-mega-cat-card-bg { filter: brightness(0.92); }
/* ── v1.12.0: the mega card label was DARK INK ON AN ARBITRARY PHOTOGRAPH ──
*
* `.av-mega-cat-card-name` was `color: var(--av-black)` while the card's
* background is whatever the category's hero product happened to be shot
* against. On the light shots (vase, bag, statue) it read; on "Çerçeve &
* Ayna" (a black desk), "Mobilya Aksesuarları" (a dark diorama) and
* "Aydınlatma" (a purple night scene) the name was effectively invisible —
* three of seven cards in the store's main navigation, reported by the owner.
*
* Picking a colour per image is not a fix: the hero rotates with the
* catalogue, so whatever is chosen today is wrong the first time a product is
* added. The card has to lay its own ground.
*
* ⚠️ A CAPTION BAR, NOT A CARD-WIDE SCRIM — AND THAT WAS TESTED BOTH WAYS.
* The homepage grid's answer (`.av-cat-card::after`, a gradient over the whole
* card) was tried here first and measured fine, but on the four products shot
* against white it greys out the lower half of the photograph: the vase and
* the bag come out looking hazy rather than lit. Confining the gradient to the
* info block keeps the product clean above a defined band, and the band is
* where the text already was.
*
* ⚠️ SIZED FOR WHITE, NOT FOR BLACK. The dangerous background is a product on
* pure white — that is where a scrim has the least to work with. Verified by
* sampling the RENDERED pixels behind each label at 1440px, not by computing
* what the CSS ought to produce: worst card 13.2:1 for the name and 15.9:1
* behind the count, against the 4.5:1 AA floor. The 38px top padding is
* load-bearing — it puts the transparent end of the gradient ABOVE the text
* instead of behind it, which is what keeps the top edge soft.
*/
.av-mega-cat-card-info {
position: absolute; left: 0; right: 0; bottom: 0;
padding: 38px 16px 14px;
z-index: 2;
display: flex; flex-direction: column; gap: 4px;
background: linear-gradient(to top,
rgba(0, 0, 0, 0.92) 0%,
rgba(0, 0, 0, 0.80) 52%,
rgba(0, 0, 0, 0) 100%);
}
.av-mega-cat-card-name { font-family: var(--av-font-display); font-size: 18px; font-weight: 500; color: var(--av-white); line-height: 1.2; }
/* 9px is small enough that the AA floor applies in full, so this sits at 0.85
* rather than the 0.65 the (10px) homepage subtitle uses. */
.av-mega-cat-card-count { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
/* Brass, not the old rgba(0,0,0,0.65): that badge was designed against a light
* card and would now be a dark chip on a dark bar. Matches `.av-cat-soon`. */
.av-mega-cat-card-soon { display: inline-block; align-self: flex-start; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--av-accent); color: var(--av-white); padding: 3px 7px; }
.av-mega-cats-foot { margin: 22px auto 0; text-align: right; }
/* The panel is full-bleed like the nav, so its CONTENT gets the column's inner
* width and centres inside it — 1200px until 2026-09-22, an arbitrary number
* 16px off the column it hangs under. Now the open panel's left edge is the
* logo's left edge, on both grids. */
.av-mega-eyebrow,
.av-mega-cats-grid,
.av-mega-cats-foot { max-width: calc(var(--av-shell-max) - 2 * var(--av-shell-gutter)); }
.av-mega-cats-foot a { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--av-gray-dark); text-decoration: none; border-bottom: 1px solid var(--av-gray-mid); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; cursor: pointer; }
.av-mega-cats-foot a:hover { color: var(--av-accent); border-color: var(--av-accent); }
.av-nav-actions { display: flex; align-items: center; gap: 6px; }
.av-nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; background: none; border: 0; padding: 0; color: var(--av-black); text-decoration: none; cursor: pointer; position: relative; transition: color 0.2s; border-radius: 50%; }
.av-nav-icon:hover { color: var(--av-accent); }
.av-nav-icon svg { width: 19px; height: 19px; }
.av-nav-cart { margin-right: 4px; }
.av-cart-count { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; background: var(--av-accent); color: var(--av-white); font-family: var(--av-font-body); font-size: 9px; font-weight: 600; line-height: 16px; text-align: center; border-radius: 10px; opacity: 0; transform: scale(0.6); transition: opacity 0.2s, transform 0.2s; pointer-events: none; }
.av-cart-count.is-visible { opacity: 1; transform: scale(1); }
/* nowrap: the home nav's side padding is 4vw (38px at 961) against 32px elsewhere, and
* there the CTA broke onto two lines up to ~1020px (nav 79 → 94px; measured 2026-10-23
* when the layout gate first measured 961). It fits on one line with room to spare. */
.av-nav-cta { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--av-black); color: var(--av-white); padding: 10px 20px; text-decoration: none; transition: background 0.2s, color 0.2s; font-weight: 500; margin-left: 8px; white-space: nowrap; }
.av-nav-cta:hover { background: var(--av-accent); color: var(--av-white); } /* mürekkep/pirinç 3,42 → beyaz/pirinç 5,01 */
.av-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 4px; background: none; border: 0; }
.av-hamburger span { display: block; width: 22px; height: 1.5px; background: var(--av-black); transition: all 0.3s; }
/* ============ SEARCH PANEL (desktop dropdown) ============ */
.av-search-panel { position: fixed; top: 74px; left: 0; right: 0; z-index: 99; background: rgba(255,255,255,0.98); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(0,0,0,0.06); padding: 24px 32px; transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; }
.av-nav.scrolled ~ .av-search-panel { top: 60px; }
.av-search-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
.av-search-form { max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--av-gray-light); padding-bottom: 12px; }
.av-search-input { flex: 1; border: 0; background: transparent; font-family: var(--av-font-display); font-size: 24px; font-weight: 500; color: var(--av-black); outline: none; padding: 6px 0; }
.av-search-input::placeholder { color: var(--av-gray-mid); }
.av-search-submit { background: none; border: 0; color: var(--av-black); cursor: pointer; padding: 6px; display: inline-flex; transition: color 0.2s; }
.av-search-submit:hover { color: var(--av-accent); }
.av-search-submit svg { width: 22px; height: 22px; }
/* ============ MOBILE MENU ============ */
/* Above the nav (100) and the fixed top bar / home top strip (101), 2026-10-23. At 99 the
* nav painted over the open menu: on the home page (nav at 38..107px under the strip) the
* menu's search field (64..104px) could not be tapped, and the × was under the nav on every
* page. The menu is a modal dialog; it covers the header and the × is its close. */
.av-mobile-menu { display: none; position: fixed; inset: 0; background: var(--av-white); z-index: 102; flex-direction: column; align-items: center; justify-content: center; gap: 24px; padding: 32px 24px; }
.av-mobile-menu.open { display: flex; }
.av-mobile-menu a { font-family: var(--av-font-display); font-size: 32px; font-weight: 500; color: var(--av-black); text-decoration: none; transition: color 0.2s; }
.av-mobile-menu a:hover { color: var(--av-accent); }
/* A 44px target centred where the bare glyph used to sit (it was ~18×30px). */
.av-mobile-close { position: absolute; top: 12px; right: 14px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 30px; cursor: pointer; color: var(--av-gray-dark); background: none; border: 0; line-height: 1; }
.av-mobile-cta { color: var(--av-accent) !important; }
.av-mobile-search { width: 100%; max-width: 360px; margin-bottom: 8px; border-bottom: 1px solid var(--av-gray-light); padding-bottom: 10px; }
.av-mobile-search input { width: 100%; border: 0; background: transparent; font-family: var(--av-font-body); font-size: 15px; color: var(--av-black); outline: none; text-align: center; padding: 6px 0; }
.av-mobile-search input::placeholder { color: var(--av-gray-mid); }
.av-mobile-actions { display: flex; gap: 28px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--av-gray-light); width: 100%; max-width: 360px; justify-content: center; }
.av-mobile-actions a { font-family: var(--av-font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--av-gray-dark); display: inline-flex; align-items: center; gap: 4px; }
.av-mobile-actions a:hover { color: var(--av-black); }
.av-mobile-cart-count { color: var(--av-accent); font-weight: 600; }
/* ============ HERO ============ */
.av-hero { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; padding: 110px 32px 70px; overflow: hidden; --av-mx: 0; --av-my: 0; }
.av-hero-circle { position: absolute; width: 560px; height: 560px; border-radius: 50%; border: 1px solid rgba(200,169,110,0.13); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; animation: avRotateSlow 38s linear infinite; }
.av-hero-circle-2 { position: absolute; width: 860px; height: 860px; border-radius: 50%; border: 1px solid rgba(0,0,0,0.04); top: 50%; left: 50%; transform: translate(-50%,-50%); pointer-events: none; animation: avRotateSlow 55s linear infinite reverse; }
@keyframes avRotateSlow { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }
.av-hero-content { position: relative; z-index: 2; text-align: center; max-width: 720px; transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.av-hero-eyebrow { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--av-accent); margin-bottom: 22px; opacity: 0; animation: avFadeUp 0.8s ease forwards 0.3s; }
.av-hero-title { font-family: var(--av-font-display); font-size: clamp(44px, 7.2vw, 84px); font-weight: 600; line-height: 1.08; letter-spacing: -0.025em; margin: 0 0 24px; opacity: 0; animation: avFadeUp 0.9s ease forwards 0.5s; color: var(--av-black); }
/* 2026-09-21: `font-style: italic` KALDIRILDI. Roboto Slab'ın italiği YOK — ne
Google'da ne bizim barındırdığımız iki subset'te. Tarayıcı sessizce Georgia
italiğine düşüyordu, yani "hikaye" kelimesi cümlenin geri kalanından bambaşka
bir yazı ailesinde çıkıyordu (ekran görüntüsüyle doğrulandı). Cormorant'ta
sorun değildi çünkü italiği vardı ve aynı aileydi.
Vurgu artık AİLE değişimiyle değil pirinç rengiyle veriliyor — metin olduğu
için --av-accent-text (kağıtta 4,97), --av-accent değil (4,53'e düşer). */
.av-hero-title em { font-style: normal; color: var(--av-accent-text); }
.av-hero-sub { font-size: clamp(13px, 1.8vw, 15px); color: var(--av-gray-dark); line-height: 1.8; max-width: 460px; margin: 0 auto 38px; opacity: 0; animation: avFadeUp 0.9s ease forwards 0.7s; }
.av-hero-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; opacity: 0; animation: avFadeUp 0.9s ease forwards 0.9s; }
/* 2026-09-21: ST'nin buton dili. Eski hâli 11px/uppercase/0.15em idi — site
genelindeki butonlar artiviq-tokens.css ile .92rem sentence-case'e geçmişti,
ama anasayfa CTA'ları bu satır yüzünden eski görünümde kalmıştı: aynı sayfada
iki ayrı buton dili. */
.av-btn { display: inline-block; font-size: .92rem; letter-spacing: .01em; text-transform: none; text-decoration: none; padding: 13px 24px; transition: all 0.25s; font-weight: 600; line-height: 1.2; font-family: var(--av-font-body); cursor: pointer; border: 1px solid transparent; border-radius: var(--av-radius); }
.av-btn-primary { background: var(--av-black); color: var(--av-white); }
.av-btn-primary:hover { background: var(--av-accent); color: var(--av-white); transform: translateY(-2px); }
.av-btn-ghost { border: 1px solid rgba(0,0,0,0.2); color: var(--av-black); background: transparent; }
.av-btn-ghost:hover { border-color: var(--av-black); background: var(--av-off-white); transform: translateY(-2px); }
.av-btn-accent { background: var(--av-accent); color: var(--av-white); }
.av-btn-accent:hover { background: var(--av-white); color: var(--av-black); transform: translateY(-2px); }
/* The "Keşfet" scroll cue is gone (v1.17.0). It lived at `bottom:16px` under a
nav at `bottom:62px`, and once the nav carried five dots the two boxes
measured 625-682 against 598-636 — overlapping. It had already been hidden on
phones since v1.9.3 for the same collision, and with the dots now sitting in
flow at the foot of the hero there is a visible bottom edge to the section
without it. Markup removed from template-parts/home-desktop.php in the same
commit; nothing else in the theme used these classes. */
/* ============ FLOATING CARDS ============ */
.av-fcards { position: absolute; inset: 0; pointer-events: none; z-index: 1; overflow: hidden; transform: translate3d(calc(var(--av-mx) * 18px), calc(var(--av-my) * 12px), 0); transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; }
.av-fc { position: absolute; perspective: 800px; pointer-events: auto; text-decoration: none; color: inherit; }
.av-fc-inner { background: var(--av-white); border: 1px solid var(--av-gray-light); border-radius: 4px; padding: 10px; box-shadow: 0 6px 30px rgba(0,0,0,0.07), 0 1px 6px rgba(0,0,0,0.04); }
/* Card widths grew ~38% on 2026-09-21 (owner: "görseller bi tık daha büyüsün,
* çünkü çok ufak"). The price chip came out of the markup in the same pass, so
* the card is now image + one label line — which is what let the image take the
* extra height without the card getting taller than its neighbours' gaps. */
/* ⚠️ THE TOPS WERE RE-SPACED BECAUSE THE CARDS GREW AND THE HERO SHRANK IN THE
* SAME PASS, and percentages hide that: 36% of the old 900px slide is 324px,
* 36% of the new 690px slide is 248px, so card 5 climbed 76px into card 1 while
* both were also getting taller. MEASURED after the first deploy: cards 1 and 5
* overlapping by 89×20px. Left column is the tight one — it carries three cards
* to the right column's two.
*
* Verified on the rendered page, pairwise, not by arithmetic: no two cards
* intersect and none reaches under the fixed nav (which the .av-fcards wrapper
* ignores, since it is inset:0 against the slide and not against its padding). */
.av-fc:nth-child(1) { top: 15%; left: 4%; }
.av-fc:nth-child(1) .av-fc-inner { width: 132px; animation: avF1 5s ease-in-out infinite alternate; }
.av-fc:nth-child(2) { top: 61%; left: 2%; }
.av-fc:nth-child(2) .av-fc-inner { width: 108px; animation: avF2 6.2s ease-in-out infinite alternate; }
.av-fc:nth-child(3) { top: 13%; right: 4%; }
.av-fc:nth-child(3) .av-fc-inner { width: 146px; animation: avF3 4.6s ease-in-out infinite alternate; }
.av-fc:nth-child(4) { top: 60%; right: 2%; }
.av-fc:nth-child(4) .av-fc-inner { width: 122px; animation: avF4 7s ease-in-out infinite alternate; }
/* Card 5 moved to the RIGHT (owner, 2026-09-24): the left column carried three
* cards to the right's two and read as a stack. It sits inboard of cards 3/4
* rather than under them, because card 3 is the tallest card on the page. */
.av-fc:nth-child(5) { top: 43%; right: 13%; }
/* MEASURED 2026-09-24: at 1024px card 5 touches card 4 and sits 37px off the h1.
* Below 1100px the right column has no room for a third card; phones already drop it. */
@media (max-width: 1100px) { .av-fc:nth-child(5) { display: none; } }
.av-fc:nth-child(5) .av-fc-inner { width: 84px; animation: avF2 7.6s ease-in-out infinite alternate; }
/* Amplitude roughly doubled and the cycles shortened (owner: "animasyonu biraz
* daha belirgin olsun"). Travel stays under ~34px and the tilt under 16° on
* purpose: these cards sit beside the h1, and motion large enough to be read as
* movement in peripheral vision is motion large enough to pull the eye off the
* headline. The `prefers-reduced-motion` block at the end of this file stops
* them outright — an animation this size is exactly what that setting is for. */
@keyframes avF1 { 0%{transform:translateY(0) rotateX(12deg) rotateY(-15deg)} 100%{transform:translateY(-30px) rotateX(-9deg) rotateY(13deg)} }
@keyframes avF2 { 0%{transform:translateY(0) rotateX(-10deg) rotateY(13deg)} 100%{transform:translateY(-26px) rotateX(13deg) rotateY(-10deg)} }
@keyframes avF3 { 0%{transform:translateY(0) rotateX(15deg) rotateY(10deg)} 100%{transform:translateY(-34px) rotateX(-13deg) rotateY(-15deg)} }
@keyframes avF4 { 0%{transform:translateY(0) rotateX(-13deg) rotateY(-10deg)} 100%{transform:translateY(-24px) rotateX(9deg) rotateY(15deg)} }
/* `object-fit` and `display:block` are load-bearing now that this is an ![]()
* and not a background div: without them a non-square source stretches, and the
* inline baseline adds a few stray pixels under every card. */
.av-fc-img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; background: var(--av-off-white); border-radius: 2px; margin-bottom: 7px; }
/* 2026-09-21: tek satır + ellipsis. Roboto, DM Sans'tan geniş; 68px'lik kartta
"MOBİLYA AKSESUARLARI" üç satıra ve KELİME ORTASINDAN bölünüyordu
("AKSESUA / RLARI"), kart uzuyor ve üstündeki karta biniyordu — ekran
görüntüsünde görüldü. Bu çipler dekoratif; kategori adının tamamının okunması
gerekmiyor, ama kartın YÜKSEKLİĞİNİN sabit kalması gerekiyor, yoksa mutlak
konumlu kardeşleriyle çakışır. Sabit yükseklik burada hizalamanın ön koşulu. */
.av-fc-lbl { font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--av-gray-mid);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.5; }
/* `.av-fc-price` WAS HERE AND IS GONE (owner, 2026-09-21: "fiyat yazısını
* kaldıralım"). Keeping the note because the rule it replaced was written to
* survive a real incident: at 68–106px the price box fell to 46px, Roboto Slab
* needed 60px for "4.499,00 ₺", and v1.8.0 broke the line mid-number
* ("4.499,0" / "0 ₺") which made the cards overlap. The lesson outlives the
* rule — a price must never wrap, and a decorative chip is not the place for
* the display face. If a price ever comes back to these cards, it comes back
* in the body font with `white-space: nowrap`.
*
* Dropping it also bought the height that made the bigger images possible. */
/* ============ MARQUEE ============ */
.av-marquee { border-top: 1px solid var(--av-gray-light); border-bottom: 1px solid var(--av-gray-light); overflow: hidden; padding: 13px 0; background: var(--av-off-white); }
.av-m-track { display: flex; animation: avMScroll var(--av-m-dur, 24s) linear infinite; width: max-content; }
.av-m-item { display: flex; align-items: center; gap: 18px; padding: 0 28px; font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--av-gray-dark); white-space: nowrap; }
.av-m-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--av-accent); flex-shrink: 0; }
@keyframes avMScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
/* ============ SECTIONS ============ */
.av-cats, .av-products-sec, .av-manifesto, .av-features-sec, .av-gift-sec { padding: 80px 32px; }
.av-eyebrow { font-size: 10px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--av-accent); margin: 0 0 12px; }
.av-sec-title { font-family: var(--av-font-display); font-size: clamp(30px, 5vw, 54px); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; margin: 0 0 14px; color: var(--av-black); }
.av-sec-title em { font-style: italic; color: var(--av-gray-mid); }
.av-sec-sub { font-size: 14px; color: var(--av-gray-dark); line-height: 1.7; max-width: 460px; margin: 0 0 44px; }
.av-centered { text-align: center; margin-left: auto; margin-right: auto; }
/* ============ CATEGORIES ============ */
.av-cats { background: var(--av-white); }
.av-cat-hdr { max-width: 1200px; margin: 0 auto 44px; }
.av-cat-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.av-cat-card { position: relative; overflow: hidden; aspect-ratio: 3/4; cursor: pointer; text-decoration: none; display: block; color: var(--av-white); }
.av-cat-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 55%); transition: opacity 0.4s; }
.av-cat-card:hover::after { opacity: 0.75; }
/* v1.14.0: the photo is an ![]()
inside this box now, not a background on it.
* The box keeps its job — the palette colour underneath, and the hover scale,
* which still applies to the ![]()
because the ![]()
is its child. */
.av-cat-bg { position: absolute; inset: 0; transition: transform 0.65s ease; }
.av-cat-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-cat-card:hover .av-cat-bg { transform: scale(1.06); }
.av-cat-info { position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; padding: 18px 14px; transform: translateY(6px); transition: transform 0.3s; }
.av-cat-card:hover .av-cat-info { transform: translateY(0); }
.av-cat-name { font-family: var(--av-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--av-white); line-height: 1.2; margin-bottom: 5px; }
.av-cat-sub { font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.65); }
.av-cat-arrow { position: absolute; top: 14px; right: 14px; z-index: 2; width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.7); transition: opacity 0.3s, transform 0.3s; }
.av-cat-card:hover .av-cat-arrow { opacity: 1; transform: scale(1); }
.av-cat-arrow svg { width: 11px; height: 11px; }
.av-cat-soon { display: inline-block; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--av-accent); color: var(--av-white); padding: 3px 7px; margin-right: 6px; }
/* CTA card (8th cell of cat-grid) */
.av-cat-card--cta { background: var(--av-black); display: flex; align-items: center; justify-content: center; padding: 28px; transition: background 0.3s; aspect-ratio: 3/4; }
.av-cat-card--cta::after { display: none; }
.av-cat-card--cta:hover { background: var(--av-black); }
.av-cat-cta-inner { text-align: center; color: var(--av-white); display: flex; flex-direction: column; gap: 14px; align-items: center; }
.av-cat-cta-eyebrow { font-size: 9px; letter-spacing: 0.25em; text-transform: uppercase; color: var(--av-accent); }
.av-cat-cta-title { font-family: var(--av-font-display); font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; color: var(--av-white); }
.av-cat-cta-title em { font-style: italic; color: var(--av-accent); }
.av-cat-cta-arrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--av-white); border-bottom: 1px solid var(--av-accent); padding-bottom: 3px; transition: transform 0.3s; }
.av-cat-card--cta:hover .av-cat-cta-arrow { transform: translateX(4px); }
/* ============ PRODUCTS ============ */
.av-products-sec { background: var(--av-off-white); }
.av-prod-hdr { max-width: 1200px; margin: 0 auto 44px; display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.av-prod-link { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--av-gray-dark); text-decoration: none; border-bottom: 1px solid var(--av-gray-mid); padding-bottom: 2px; transition: color 0.2s, border-color 0.2s; font-weight: 500; }
.av-prod-link:hover { color: var(--av-black); border-color: var(--av-black); }
.av-prod-grid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.av-prod-card { background: var(--av-white); overflow: hidden; transition: transform 0.3s, box-shadow 0.3s; cursor: pointer; text-decoration: none; color: inherit; display: block; }
.av-prod-card:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(0,0,0,0.1); }
.av-prod-img { aspect-ratio: 1; background: var(--av-gray-light); overflow: hidden; position: relative; }
.av-prod-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.av-prod-badge { position: absolute; top: 10px; left: 10px; font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--av-black); color: var(--av-white); padding: 4px 8px; font-weight: 500; }
.av-badge-new { background: var(--av-accent); color: var(--av-white); }
.av-prod-info { padding: 12px 14px 16px; }
.av-prod-cat { font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--av-gray-mid); margin-bottom: 5px; font-weight: 500; }
.av-prod-name { font-family: var(--av-font-display); font-size: 17px; font-weight: 500; line-height: 1.3; margin-bottom: 7px; color: var(--av-black); }
.av-prod-price { font-size: 13px; font-weight: 500; color: var(--av-black); }
.av-prod-price .amount { font-family: var(--av-font-body); font-weight: 500; }
/* ============ MANIFESTO ============ */
.av-manifesto { background: var(--av-black); padding: 100px 32px; position: relative; overflow: hidden; }
.av-manifesto::before { content: ''; position: absolute; top: -180px; right: -180px; width: 560px; height: 560px; border-radius: 50%; border: 1px solid rgba(200,169,110,0.09); pointer-events: none; }
.av-manifesto-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 1; }
/* `!important` on the face (2026-09-29): the quote is a , and artiviq-tokens.css sets
every `p` to the BODY face with !important (the 2026-09-21 Inter sweep). From that day
the only display line on the page rendered in Roboto next to Roboto Slab headings —
measured with CDP: that rule won, this one lost. */
.av-manifesto-q { font-family: var(--av-font-display) !important; font-size: clamp(26px, 4vw, 50px); font-weight: 600; letter-spacing: -0.02em; color: var(--av-white); line-height: 1.3; margin: 0 0 36px; }
.av-manifesto-q em { font-style: italic; color: var(--av-accent); }
.av-manifesto-body { font-size: 14px; color: rgba(255,255,255,0.55); line-height: 2; max-width: 520px; margin: 0 0 44px; }
.av-manifesto-sig { display: flex; align-items: center; gap: 12px; padding-top: 36px; border-top: 1px solid rgba(255,255,255,0.07); margin-top: 44px; }
.av-manifesto-sig-logo { height: 28px; width: auto; max-width: 130px; opacity: 0.6; }
/* .35 → .55 white (2026-09-29): 10px text at .35 measured 3.22:1 on the manifesto ink,
under WCAG AA's 4.5:1 for small text. .55 is the body copy's own tone above it (5.98:1). */
.av-manifesto-sig-text { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.55); }
/* ============ FEATURES ============ */
.av-features-sec { background: var(--av-white); }
.av-features-inner { max-width: 1200px; margin: 0 auto; }
.av-feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; margin-top: 56px; }
.av-feat-num { font-family: var(--av-font-display); font-size: 46px; font-weight: 600; color: var(--av-accent-light); line-height: 1; margin-bottom: 14px; }
.av-feat-title { font-family: var(--av-font-display); font-size: 22px; font-weight: 600; letter-spacing: -0.02em; margin-bottom: 10px; color: var(--av-black); }
.av-feat-desc { font-size: 13px; color: var(--av-gray-dark); line-height: 1.8; }
/* ============ GIFT CTA ============ */
.av-gift-sec { background: var(--av-off-white); }
.av-gift-inner { max-width: 600px; margin: 0 auto; text-align: center; }
.av-gift-icon { width: 44px; height: 44px; margin: 0 auto 22px; opacity: 0.25; color: var(--av-black); display: block; }
.av-gift-actions { display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }
/* ============ FOOTER ============ */
.av-footer { background: var(--av-black); color: var(--av-white); padding: 56px 32px 28px; }
.av-ft-inner { max-width: 1200px; margin: 0 auto; }
.av-ft-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 44px; padding-bottom: 44px; border-bottom: 1px solid rgba(255,255,255,0.14); margin-bottom: 28px; }
.av-ft-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.av-ft-logo img { height: 38px; width: auto; max-width: 160px; display: block; }
.av-ft-brand-text { font-size: 12.5px; color: rgba(255,255,255,0.62); line-height: 1.8; max-width: 240px; }
.av-ft-social { display: flex; gap: 12px; margin-top: 18px; }
.av-ft-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; color: rgba(255,255,255,0.78); text-decoration: none; transition: color 0.2s, border-color 0.2s, background 0.2s; cursor: pointer; }
.av-ft-social a:hover { color: var(--av-white); border-color: var(--av-accent); background: var(--av-accent); }
.av-ft-social svg { width: 14px; height: 14px; }
/* ── FOOTER LEGIBILITY, measured on the served page 2026-09-21 ──────────────────
* Owner: "footer biraz silik". It was, and by how much is measurable. Against the
* #1F1B16 ground the column titles rendered at rgba(255,255,255,.35) → contrast
* 2.9:1 at 9px, the copyright at .25 → 2.0:1 and the studio credit at .22 → 1.9:1.
* WCAG AA wants 4.5:1 for text this size, so three of the five footer text styles
* were below the floor and the smallest of them was the furthest below it.
*
* The section titles take the brand's brass rather than more white: #B08A4B on this
* ground is 4.8:1, it passes, and it keeps the footer from becoming a grey block of
* four equally loud columns — the hierarchy now comes from HUE, which costs no
* contrast, instead of from dimming, which costs all of it. */
.av-ft-col-title { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--av-accent-light); margin-bottom: 16px; }
.av-ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; }
.av-ft-col a { font-size: 13px; color: rgba(255,255,255,0.78); text-decoration: none; text-underline-offset: 4px; transition: color 0.2s, text-decoration-color 0.2s; }
.av-ft-col a:hover { color: var(--av-white); text-decoration: underline; text-decoration-color: var(--av-accent-light); text-decoration-thickness: 1px; }
.av-footer a:focus-visible { outline: 2px solid var(--av-accent-light); outline-offset: 3px; border-radius: 2px; }
/* ⚠️ The dark ground also swallowed the SELECTION. The owner read the footer as text
* you "cannot select" — you can (userSelect computes to `auto` everywhere in here,
* checked), but the browser default highlight over near-black with 25%-white ink
* leaves almost nothing visible, and dragging across a link starts a link-drag
* instead of a selection, so the copyright line was the only place the gesture even
* reached. A explicit high-contrast selection makes the act visible. */
.av-footer ::selection { background: var(--av-accent-light); color: var(--av-black); }
.av-footer ::-moz-selection { background: var(--av-accent-light); color: var(--av-black); }
.av-ft-bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.av-ft-copy { font-size: 11.5px; color: rgba(255,255,255,0.55); letter-spacing: 0.05em; }
/* === CihanStudio managed block — do not edit between markers === */ /* vendor-token-gate: allow — owned, openly-credited store; see note below */
/* Footer credit — "Dijital Altyapı: [cs] CihanStudio". */ /* vendor-token-gate: allow — same approved credit block */
/* Canonical format: cihanstudio/brand/SITE_CREDIT.md. */ /* vendor-token-gate: allow — same approved credit block */
/* WHY THE ALLOW MARKERS (2026-09-21): vendor_token_gate blocked a push of this file over the
studio name in these comments. The block is pre-existing, owner-approved and already live.
artiviq is an OWNED store that credits the agency on purpose; the doctrine-15 rule the gate
enforces is about PodSigara / SigaraTech / LeafVape, the stores whose operator must not be
traceable. Markers are on the offending lines, per the gate's own escape-hatch contract, so
the exception is visible where the text is. Nothing about the rendered credit changed.
The label is plain text and only the
studio name is the link, so the clickable target is the brand rather than a whole sentence.
Sized at 1em, NOT the usual .86em: this rights line is already 11px, the smallest body text
on the page, and .86em of it is 9.46px — below that the lowercase stops being readable and a
credit nobody can read is one that is not there. Ink stays UNDER the rights line's own alpha
(.55 since the 2026-09-21 legibility pass; this credit .40 / its link .52) so it is quieter
than the line it sits beneath — the ordering is the rule, the numbers are not.
NOT flex: an empty inline-block takes its baseline from its bottom margin edge and the mark's
PNG is cropped so its bottom row IS the "cs" baseline, so the two baselines coincide exactly.
align-items:center would centre on the LINE BOX, which reserves descender room these words
barely use, and the mark would sit ~1.5px low (measured on alfaplatform, 2026-08-04).
Box measured for THIS footer: 11px Inter, x-height 6.005 → 14.74 x 8.01px. */
.av-ft-bottom .cs-credit { display: inline; font-size: 1em; letter-spacing: 0.05em;
color: rgba(255,255,255,0.40); }
.av-ft-bottom .cs-credit a { display: inline; white-space: nowrap;
color: rgba(255,255,255,0.52); text-decoration: none; transition: color 0.2s; }
.av-ft-bottom .cs-credit a::before { content: ''; display: inline-block; overflow: hidden;
vertical-align: baseline; width: 14.74px; height: 8.01px; margin-right: 5px;
background: url("data:image/png;base64,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") center / contain no-repeat;
opacity: 0.55; transition: opacity 0.2s; }
.av-ft-bottom .cs-credit a:hover,
.av-ft-bottom .cs-credit a:focus-visible { color: rgba(255,255,255,0.8); }
.av-ft-bottom .cs-credit a:hover::before,
.av-ft-bottom .cs-credit a:focus-visible::before { opacity: 1; }
/* === end CihanStudio managed block === */ /* vendor-token-gate: allow — same approved credit block */
/* ============ REVEAL ============ */
/* Fail-open: hidden only under html.av-js (set by the eager inline script in
template-parts/home-desktop.php). No JS, or a stylesheet that lost these rules,
leaves the content visible instead of blank (2026-10-19). */
.av-js .av-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.av-js .av-reveal.visible { opacity: 1; transform: translateY(0); }
@keyframes avFadeUp { from{opacity:0;transform:translateY(24px)} to{opacity:1;transform:translateY(0)} }
@keyframes avFadeIn { from{opacity:0} to{opacity:1} }
/* ============ RESPONSIVE ============ */
@media (max-width: 960px) {
/* 16px 20px idi; yatay değer artık tek yerde (grid gutter token'ı), burada
yalnız dikey padding değişiyor. */
.av-nav { padding-block: 16px; }
.av-nav-links, .av-nav-cta { display: none; }
.av-nav-actions { gap: 2px; }
.av-nav-icon { width: 36px; height: 36px; }
.av-nav-icon svg { width: 18px; height: 18px; }
.av-search-panel { top: 64px; padding: 18px 20px; }
.av-search-input { font-size: 18px; }
.av-mega-panel { display: none; }
.av-mega-cats-grid { grid-template-columns: repeat(2, 1fr); }
.av-cat-cta-title { font-size: 22px; }
.av-hamburger { display: flex; margin-left: 4px; }
.av-cats, .av-products-sec, .av-manifesto, .av-features-sec, .av-gift-sec { padding: 56px 20px; }
.av-hero { padding: 96px 20px 64px; }
.av-hero-circle { width: 360px; height: 360px; }
.av-hero-circle-2 { width: 580px; height: 580px; }
/* Grown with the desktop set (owner, 2026-09-21), but by less: at 390px the
h1 already runs the full width, so a card wide enough to be looked at is
a card that starts covering the headline. ~30% rather than ~38%. */
.av-fc:nth-child(1) { top: 11%; left: 0%; }
.av-fc:nth-child(1) .av-fc-inner { width: 92px; }
.av-fc:nth-child(2) { display: none; }
.av-fc:nth-child(3) { top: 11%; right: 0%; }
.av-fc:nth-child(3) .av-fc-inner { width: 100px; }
.av-fc:nth-child(4) { top: 71%; right: 0%; }
.av-fc:nth-child(4) .av-fc-inner { width: 86px; }
.av-fc:nth-child(5) { display: none; }
.av-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.av-prod-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
.av-feat-grid { grid-template-columns: 1fr; gap: 30px; }
/* One column, the number beside its title (2026-09-29): stacked, the three points took
777px at 390 — two screens for six lines of text — because each carried a 46px
numeral on its own row. */
.av-feat-grid { gap: 22px; margin-top: 32px; }
.av-feat { display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; }
.av-feat .av-feat-num { grid-row: 1 / span 2; font-size: 30px; margin: 0; }
.av-feat .av-feat-title { font-size: 19px; margin-bottom: 6px; }
.av-ft-top { grid-template-columns: 1fr 1fr; gap: 28px; }
/* PDP + WC pages — clamp every wrapper to viewport width.
* Shoptimizer's pdp-full body class lets the .product container ship
* with no max-width on mobile, so heading + summary text overflows the
* 393px viewport (Geleneksel Çin Vazo title was clipped from the right).
* Force every non-fixed wrapper to honor 100% of the viewport. */
body:not(.home) {
overflow-x: hidden;
max-width: 100vw;
}
/* #primary is deliberately NOT in this list. Shoptimizer bleeds it to the
* viewport edge on mobile (margin-left:-1em; width:calc(100% + 2em)).
* Capping its width at 100% kept the left bleed and cancelled the right
* one, so the whole PDP sat 16px left of centre with a grey strip on the
* right (owner screenshot, iOS Chrome, 2026-09-23). */
body.single-product #content,
body.single-product .site-main,
body.single-product div.product,
body.single-product .summary,
body.single-product .entry-summary,
body.single-product .commercekit-atc-sticky-tabs,
body.single-product .commercekit-atc-tab-links,
body.single-product .woocommerce-tabs {
max-width: 100%;
box-sizing: border-box;
}
/* Fixed/sticky shells (nav, search, consent, sticky cart) must also clamp
* — without max-width:100vw they expand to a JS-derived width that on
* mobile is the inflated viewport.innerWidth value, not visual viewport. */
.av-nav,
.av-search-panel,
.av-mega-panel,
.artiviq-consent,
div.product form.cart.commercekit_sticky-atc,
.commercekit-atc-sticky-tabs {
max-width: 100vw;
box-sizing: border-box;
}
}
@media (max-width: 480px) {
.av-hero-title { font-size: 42px; }
.av-cat-card { aspect-ratio: 2/3; }
.av-cat-name { font-size: 17px; }
.av-prod-name { font-size: 15px; }
.av-manifesto-q { font-size: 24px; }
.av-ft-top { grid-template-columns: 1fr; gap: 22px; }
.artiviq-home--desktop { cursor: auto; }
.av-btn, .av-cat-card, .av-prod-card, .av-fc { cursor: pointer; }
.av-cursor, .av-cursor-ring { display: none; }
}
/* =====================================================================
* v1.9.0 — 2026-09-21 · SigaraTech's STRUCTURE
*
* v1.8.0 changed the typeface, weights and corners and left the layout
* untouched; the owner's read was correct — "ST gibi değil ne anasayfa ne de
* pdp, plp". A skin is not a structure. This block adds the parts ST has and
* Artiviq did not: a top strip, a section rhythm with eyebrow/title/sub heads,
* a real product grid with cards, and a trust bar.
*
* The hero is NOT a replacement. Owner, same day: "bu hero alanı da kalabilir,
* st'deki ile birlikte ikisi bir olsun slider gibi kaydırmalı" — so Artiviq's
* own composition is slide 1, ST's product stage is slide 2.
* ===================================================================== */
.av-container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }
/* ── top strip ───────────────────────────────────────────────────────── */
.av-topstrip { background: var(--av-black); color: #e9e6df; font-size: .78rem; letter-spacing: .02em; position: relative; z-index: 101; }
.av-topstrip__inner { display: flex; align-items: center; justify-content: center; gap: 34px; min-height: 38px; flex-wrap: wrap; text-align: center; padding-block: 7px; max-width: 1280px; margin: 0 auto; padding-inline: clamp(20px, 4vw, 56px); }
.av-topstrip__item { display: inline-flex; align-items: baseline; gap: 7px; }
.av-topstrip__item strong { color: #fff; font-weight: 600; }
.av-topstrip__item span { color: rgba(255,255,255,.62); }
/* The fixed nav sits at top:0; with a strip above it, push it down. */
.artiviq-home--desktop .av-topstrip + .av-hero { margin-top: 0; }
/* ── hero slider ─────────────────────────────────────────────────────── */
/* .av-hero is a centering flex container on its own; as a slider it becomes a
plain block and each SLIDE does the centering instead. */
/* ⚠️ FLEX COLUMN AT EVERY WIDTH SINCE v1.17.0, NOT JUST ON PHONES.
v1.9.3 took the nav out of absolute positioning on mobile after it landed on
top of a CTA, and wrote down why: "flow layout cannot overlap, whatever the
content height turns out to be". Desktop kept `position:absolute; bottom:62px`
and five slides broke it there too — MEASURED at 1440×900 on 2026-09-22:
nav 598-636 against a stage ending at 620 (the right arrow sat ON the product
photo), and the scroll cue 625-682 under dots at 598-636. Two collisions from
one cause: a control positioned against the section while the content inside
it grew. Same fix, same reason, now everywhere. */
.av-hero.av-heroslider { display: flex; flex-direction: column; padding: 0; min-height: 0; }
.av-heroslider__viewport { overflow: hidden; width: 100%; }
.av-heroslider__track { display: flex; will-change: transform; transition: transform .65s cubic-bezier(.16,1,.3,1); }
/* 2026-09-21: was `min-height: 100vh` + `padding: 110px 32px 96px`, which
* MEASURED 900px tall at 1440×900 around ~520px of content — the owner read the
* result as empty, and they were reading it correctly.
*
* `100vh` is a promise that the hero fills the screen, and it is the wrong
* promise for a hero whose job is to get the visitor to the products: on a
* short laptop it costs a scroll before anything is for sale, and on a tall
* monitor it stretches 520px of content across 1100px. The clamp keeps a
* generous stage on a laptop and stops the stretch above it.
*
* 2026-09-29 (owner: "hero alanla öne çıkan parçalar arasında boşluk var"):
* three paddings were stacked between the last thing on the slide and the
* section heading — slide bottom 78 + nav 20/30 + section top 76. Measured at
* 1440×900: CTA → dots 183px, dots → "Koleksiyondan" 127px, and "Öne çıkan
* parçalar" started at y=934, below the fold. Every slide is as tall as the
* TALLEST one (flex track), and that is a product slide: 520px stage + padding,
* so the bottom padding is what the gap is made of, and the min-height only
* matters on tall screens (1920×1080 went 760 → 680). After: 137 / 77, heading
* at 838 — on screen at 1440×900 and 1280×800. */
.av-heroslide {
flex: 0 0 100%; min-width: 100%; position: relative; overflow: hidden;
min-height: clamp(520px, 68vh, 680px);
display: flex; align-items: center; justify-content: center;
padding: 92px 32px 40px;
}
/* A hidden slide must not be reachable by Tab — an off-screen link that still
takes focus scrolls the viewport sideways and strands the keyboard user. */
.av-heroslide:not(.is-active) { visibility: hidden; }
.av-heroslider__track.is-animating .av-heroslide { visibility: visible; }
.av-heroslider__nav { order: 2; margin: 0 auto; padding-block: 12px 8px; z-index: 5; display: flex; align-items: center; gap: 14px; }
.av-heroslider__arrow {
width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--av-gray-light);
background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
color: var(--av-black); display: inline-flex; align-items: center; justify-content: center;
cursor: pointer; padding: 0; transition: background .2s, border-color .2s, color .2s;
}
.av-heroslider__arrow:hover { background: var(--av-black); border-color: var(--av-black); color: #fff; }
.av-heroslider__arrow svg { width: 17px; height: 17px; }
.av-heroslider__dots { display: flex; align-items: center; gap: 9px; }
.av-heroslider__dot {
width: 9px; height: 9px; padding: 0; border-radius: 50%; cursor: pointer;
border: 1px solid var(--av-gray-mid); background: transparent; transition: background .2s, border-color .2s, transform .2s;
}
.av-heroslider__dot.is-active { background: var(--av-accent); border-color: var(--av-accent); transform: scale(1.25); }
/* Focus must stay visible on a control this small. */
.av-heroslider__arrow:focus-visible,
.av-heroslider__dot:focus-visible { outline: 2px solid var(--av-accent); outline-offset: 3px; }
/* ── hero slides 2-5: the PDP's summary column, on a stage ─────────────
*
* 2026-09-22. This replaces the single "one product on stage" slide with four,
* one per live category. Owner: "şu anki pdp'ye benzer de bir tasarım
* yapabiliriz belki, site hızını bozmayacak hafif bir yapıda, tatlı tatlı
* açılsın".
*
* ⚠️ THE CONTENT COLUMN DOES NOT REUSE `.av-hero-title` / `.av-hero-eyebrow` /
* `.av-hero-sub`, and that is not a naming preference. Those three carry a
* one-shot `animation: avFadeUp ... forwards ` that fires on PAGE LOAD.
* On slide 1 that is exactly right. On a slide the visitor reaches 21 seconds
* later it is exactly wrong: the animation has long since finished, unseen, and
* the slide arrives flat. The classes below start from nothing and get their
* entrance from `.is-active`, so it replays every time the slide comes round —
* which is the "tatlı tatlı açılsın" the owner asked for.
*
* Everything that moves here is `transform` + `opacity`. No layout property is
* animated, so none of this touches the main thread's layout budget.
*/
.av-hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 72px); align-items: center; width: 100%; }
.av-heroslide--stage .av-hero-content { text-align: left; max-width: 520px; margin: 0; }
.av-hero__visual { display: flex; justify-content: center; }
.av-hero__stage {
position: relative; display: block; width: min(100%, 520px); aspect-ratio: 1;
background: var(--av-off-white); border: 1px solid var(--av-gray-light);
border-radius: var(--av-radius-card); overflow: hidden; text-decoration: none;
box-shadow: var(--av-shadow-card); transition: transform .3s ease, box-shadow .3s ease;
}
.av-hero__stage:hover { transform: translateY(-3px); box-shadow: var(--av-shadow-lift); }
.av-hero__stage img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Category line. The dot is the PDP's brass, at the one size where a fill is
allowed to be brass: it carries no text, so the 4.15:1 that bars
`--av-accent` from type does not apply. */
.av-hp__eyebrow {
display: flex; align-items: center; gap: 9px; margin: 0 0 14px;
font-size: 11px; letter-spacing: .2em; text-transform: uppercase;
color: var(--av-gray-mid); font-weight: 500;
}
.av-hp__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--av-accent); flex: 0 0 auto; }
/* A PRODUCT NAME, not a brand statement — the v1.9.1 note still applies:
`.av-hero-title`'s clamp goes to 84px, at which "Artiviq Temple Showcase –
1/64" ran to four lines and filled the slide. Same family and weight, own scale. */
.av-hp__title {
font-family: var(--av-font-display); font-weight: 600;
font-size: clamp(27px, 3.2vw, 44px); line-height: 1.12; letter-spacing: -0.02em;
margin: 0 0 14px; color: var(--av-black);
}
/* Provenance badge — the same two strings the PDP prints under its buy button,
from the same artiviq_pdp_origin_badge(). The PDP's second line (the note)
is dropped here on purpose: a hero states, a product page explains. */
.av-hp__badge {
display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px;
padding: 6px 13px 6px 10px; border: 1px solid var(--av-gray-light);
border-radius: 999px; background: var(--av-off-white);
font-size: .8rem; font-weight: 600; color: var(--av-black);
}
.av-hp__badge svg { width: 15px; height: 15px; color: var(--av-accent-text); flex: 0 0 auto; }
.av-hp__price {
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 0 0 4px;
font-family: var(--av-font-display); font-weight: 600;
font-size: clamp(20px, 2.1vw, 27px); color: var(--av-black); line-height: 1.2;
}
.av-hp__price .woocommerce-Price-amount { white-space: nowrap; }
/* `del`/`ins` arrive inside get_price_html() on anything with a sale price. */
.av-hp__price del { font-size: .68em; color: var(--av-gray-mid); font-weight: 500; }
.av-hp__price ins { text-decoration: none; }
.av-hp__one {
font-family: var(--av-font-body); font-size: .72rem; font-weight: 600;
letter-spacing: .08em; text-transform: uppercase; color: var(--av-accent-text);
border: 1px solid var(--av-accent); border-radius: 999px; padding: 3px 9px;
}
.av-hp__chips { margin: 14px 0 0; }
.av-hp__actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
/* ── the entrance ────────────────────────────────────────────────────── */
/* `both` is load-bearing: during the stagger delay the element holds the
`from` frame, so nothing flashes in before its turn. And the base state is
opacity 1, NOT 0 — the slide leaving the screen loses `.is-active` the
instant the transition starts, and a 0-opacity base would empty it mid-slide
and turn a slide into a cut (the same failure `.is-animating` exists for). */
.av-heroslide--pdp .av-rv { animation-fill-mode: both; }
.av-heroslide--pdp.is-active .av-rv {
animation: avFadeUp .62s cubic-bezier(.16, 1, .3, 1) both;
animation-delay: calc(var(--d, 0) * 80ms);
}
.av-heroslide--pdp.is-active .av-hero__stage { animation: avStageIn .8s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes avStageIn { from { opacity: 0; transform: scale(.965); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) {
.av-hero__inner { grid-template-columns: 1fr; }
.av-heroslide--stage .av-hero-content { text-align: center; margin: 0 auto; }
.av-hp__eyebrow, .av-hp__price, .av-hp__actions, .av-hp__chips { justify-content: center; }
.av-hero__visual { order: -1; }
.av-hero__stage { width: min(100%, 360px); }
.av-heroslide { min-height: auto; padding: 74px 20px 28px; }
/* Five slides is four more chances for a headline to push the CTA under the
fold on a phone, so the product column gets tighter here. */
.av-hp__title { margin-bottom: 12px; }
.av-hp__actions { margin-top: 18px; }
}
/* ── section rhythm ──────────────────────────────────────────────────── */
.av-section { padding-block: clamp(48px, 5.5vw, 76px); }
/* The first section after the hero: the slider's own controls already close the
hero, so a full section top on top of them read as a hole (see .av-heroslide). */
.av-hero.av-heroslider + .av-section { padding-top: clamp(32px, 3.5vw, 48px); }
.av-section--alt { background: var(--av-off-white); }
.av-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(22px, 3vw, 36px); }
.av-section-head__title { max-width: 60ch; }
.av-section-head__title h2 { margin: 8px 0 0; font-family: var(--av-font-display); font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.5rem, 3vw, 2.2rem); color: var(--av-black); }
.av-section-head__sub { margin: 8px 0 0; color: var(--av-gray-mid); font-size: .95rem; line-height: 1.6; }
.av-btn-text { padding: 8px 0; border: 0; border-bottom: 1.5px solid var(--av-black); border-radius: 0; background: none; color: var(--av-black); font-size: .88rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.av-btn-text:hover { color: var(--av-accent-text); border-color: var(--av-accent-text); }
/* ── product grid + card (ST's st-card) ──────────────────────────────── */
.av-product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
@media (max-width: 1100px) { .av-product-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .av-product-grid { grid-template-columns: repeat(2, 1fr); } }
.av-card {
display: flex; flex-direction: column; background: var(--av-white);
border: 1px solid var(--av-gray-light); border-radius: var(--av-radius-card);
overflow: hidden; box-shadow: var(--av-shadow-card);
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.av-card:hover { border-color: var(--av-black); transform: translateY(-2px); box-shadow: var(--av-shadow-lift); }
.av-card__media { position: relative; display: block; aspect-ratio: 1; background: var(--av-off-white); overflow: hidden; }
.av-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.av-card:hover .av-card__media img { transform: scale(1.04); }
.av-card__badge {
position: absolute; top: 10px; left: 10px; z-index: 2;
background: var(--av-black); color: var(--av-white);
font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
padding: 5px 10px; border-radius: var(--av-radius-chip); line-height: 1.4;
}
.av-card__body { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 16px 16px 18px; }
.av-card__cat { font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--av-gray-mid); font-weight: 600; }
.av-card__name { margin: 0; font-family: var(--av-font-body); font-size: .95rem; font-weight: 500; line-height: 1.35; letter-spacing: 0; }
.av-card__name a { color: var(--av-black); text-decoration: none; }
.av-card__name a:hover { color: var(--av-accent-text); }
/* margin-top:auto pins the price row to the bottom so prices line up across a
row whose names run to different line counts. */
.av-card__price-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--av-gray-light); }
.av-card__price { font-family: var(--av-font-display); font-weight: 600; font-size: 1.05rem; color: var(--av-black); white-space: nowrap; }
.av-card__price del { color: var(--av-gray-mid); font-weight: 400; font-size: .85em; }
.av-card__price ins { background: none; text-decoration: none; color: var(--av-black); }
.av-card__go {
width: 34px; height: 34px; flex: 0 0 34px; border-radius: var(--av-radius);
border: 1px solid var(--av-gray-light); color: var(--av-black);
display: inline-flex; align-items: center; justify-content: center;
text-decoration: none; transition: background .2s, color .2s, border-color .2s;
}
.av-card__go:hover { background: var(--av-black); border-color: var(--av-black); color: #fff; }
.av-card__go svg { width: 16px; height: 16px; }
/* ── trust bar ───────────────────────────────────────────────────────── */
.av-trustbar { border-block: 1px solid var(--av-gray-light); background: var(--av-off-white); }
.av-trustbar__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 32px); padding-block: clamp(20px, 2.6vw, 30px); }
@media (max-width: 780px) { .av-trustbar__inner { grid-template-columns: repeat(2, 1fr); } }
.av-trustbar__item { display: flex; flex-direction: column; gap: 4px; }
.av-trustbar__item strong { font-family: var(--av-font-display); font-weight: 600; font-size: 1rem; color: var(--av-black); letter-spacing: -0.01em; }
.av-trustbar__item span { font-size: .86rem; color: var(--av-gray-mid); line-height: 1.5; }
/* ── motion ──────────────────────────────────────────────────────────── */
/* Autoplay is switched off in JS under this query too; killing only the CSS
transition would still move the page, just instantly. */
@media (prefers-reduced-motion: reduce) {
.av-heroslider__track { transition: none; }
.av-hero-circle, .av-hero-circle-2 { animation: none; }
/* The product slides' entrance is a fade+rise; under this query the slide
arrives already there. Note this must also clear the `both` fill-mode
declared on `.av-rv`, or the elements sit on frame zero forever. */
.av-heroslide--pdp .av-rv,
.av-heroslide--pdp.is-active .av-rv,
.av-heroslide--pdp.is-active .av-hero__stage { animation: none; opacity: 1; transform: none; }
}
/* ── v1.9.1 fixes, found by looking at the rendered page ─────────────── */
/* The nav is `position:fixed; top:0`. Putting a strip above it in the document
does not move it — it just hides behind the strip, which is exactly what
happened: the logo and the whole menu disappeared under the trust bar.
The strip's height is not a constant either (it wraps to two lines at some
widths), so it is MEASURED in JS rather than guessed.
⚠️ 2026-09-29: WHAT is measured changed — the strip's BOTTOM EDGE, not its
height. A height is a position only at scroll 0, and two bugs were that one
mistake (both measured on the live page, 1440×900):
· every visitor: the strip is in flow and scrolls away, the nav stayed 38px
down and the product grid showed through the band above it;
· logged in: WordPress pushes the document down 32px (46px ≤782px) for its
toolbar, the strip moved with it and the nav did not — strip 32-70 over
nav 38-117, the logo's top 12px under the strip (owner: "login olan
birine header kaymış görünüyor").
An eager inline script right after the strip (template-parts/home-desktop.php,
NOT the delayed bundle) publishes --av-nav-top = max(strip bottom, fixed
toolbar bottom) on every frame it changes. Before it runs, the fallback is the
scroll-0 value, toolbar included, so the first paint is already right. */
.artiviq-home--desktop {
--av-wpbar: 0px;
--av-nav-y: var(--av-nav-top, calc(38px + var(--av-wpbar)));
}
.admin-bar.artiviq-home--desktop { --av-wpbar: 32px; }
@media screen and (max-width: 782px) { .admin-bar.artiviq-home--desktop { --av-wpbar: 46px; } }
.artiviq-home--desktop .av-nav { top: var(--av-nav-y); }
.artiviq-home--desktop .av-mega-panel { top: calc(96px + var(--av-nav-y)); }
.artiviq-home--desktop .av-search-panel { top: calc(74px + var(--av-nav-y)); }
.artiviq-home--desktop .av-nav.scrolled ~ .av-mega-panel { top: calc(82px + var(--av-nav-y)); }
.artiviq-home--desktop .av-nav.scrolled ~ .av-search-panel { top: calc(60px + var(--av-nav-y)); }
/* Keep the strip on one line where there is room; below that, drop the
explanatory half rather than letting it wrap and shove the nav down. */
@media (max-width: 1280px) { .av-topstrip__item span { display: none; } }
/* v1.9.2 — the strip carries LABELS ONLY.
Measured at 1440px: four label+sub pairs wrapped to two lines, 85px of black
bar before the logo, and the nav had to be pushed that far down. The sub text
was also a duplicate — .av-trustbar lower on the same page already prints the
identical label+sub pairs, from the same artiviq_trust_items() array. One
fact, two places, and the second one was costing 47px of masthead. */
.av-topstrip__item span { display: none; }
.av-topstrip__inner { gap: clamp(18px, 3vw, 44px); }
.av-topstrip__item strong { font-weight: 500; }
/* v1.9.3 — slider controls stop overlapping the slide's own buttons on phones.
The nav is absolutely positioned at bottom:86px, which is fine on desktop
where the slide is 100vh and half empty. At 390px the stage image, headline,
lede and two CTAs fill the slide, and the arrows landed on top of the second
CTA ("Tüm koleksiyon") — measured on the rendered page, not predicted.
Taking it out of absolute positioning removes the whole class of problem:
flow layout cannot overlap, whatever the content height turns out to be.
The scroll cue goes with it — it points at content the visitor reaches by
scrolling anyway, and on a phone it was the second thing in that collision. */
/* v1.9.3's mobile-only version of the nav fix is gone: it is the global rule
now (see .av-hero.av-heroslider above), so repeating it here would be a
second copy of one decision. */
/* =====================================================================
* v1.13.0 — 2026-09-21 · the top strip SCROLLS on a phone
*
* Owner: "mobilde top header alanında tek kelime yazıyor, onu akacak şekilde
* yapsan olur mu?" — and the report was exact. The strip carries four trust
* messages and three separate media queries were hiding them BY RANK
* (`nth-child(n+3)` under 900px and again under 620px, `nth-child(n+2)` under
* 560px and again under 380px). At 390px that left one label standing.
*
* Hiding by rank is the wrong instrument here: the visitor on the smallest
* screen has the least other signal on the page and was getting the least of
* it, and which message survived was decided by array order rather than by
* what a phone shopper needs to know.
*
* ⚠️ WHY -50% IS SEAMLESS AND WHY THERE IS NO `gap` ON THE MOBILE TRACK.
* The template renders the item list TWICE, so the track is 8 identical
* blocks; translating it -50% lands the second set exactly where the first
* was, and the reset frame is pixel-identical to frame zero. That only holds
* if every block is the same width apart — with `gap` the track would be
* 8 items + 7 gaps, 50% of which is half a gap short of 4 items, and the loop
* would drift a few pixels every cycle until the seam became visible. So the
* spacing lives in each item's own `padding-inline`, the same way `.av-m-item`
* does it lower down this file.
*
* Labels only, no sub-text: that is the v1.9.2 decision and it still holds —
* `.av-trustbar` prints the identical label+sub pairs from the same
* `artiviq_trust_items()` array further down the page.
* ===================================================================== */
/* Desktop has room for all four standing still, and a screen reader must not
hear the store's promises twice. */
.av-topstrip__item--clone { display: none; }
@media (max-width: 900px) {
.av-topstrip { overflow: hidden; }
.av-topstrip__inner {
max-width: none;
margin: 0;
padding-inline: 0;
width: max-content;
flex-wrap: nowrap;
justify-content: flex-start;
gap: 0;
animation: avTopstripScroll 26s linear infinite;
}
.av-topstrip__item,
.av-topstrip__item--clone {
display: inline-flex;
padding-inline: 17px;
white-space: nowrap;
}
}
@keyframes avTopstripScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* A strip that never stops moving is the clearest case there is for this
query. Stopped, it falls back to the first four labels left-aligned, which
is readable — not a truncation, just a strip that starts at the beginning. */
@media (prefers-reduced-motion: reduce) {
.av-topstrip__inner { animation: none; }
.av-fc-inner { animation: none !important; }
}
/* =====================================================================
* PALETTE CHIPS — moved here from assets/artiviq-pdp.css, 2026-09-22.
*
* The hero's product slides print the same chips the PDP prints, from the
* same `artiviq_pdp_chips()`. `artiviq-pdp.css` loads on products and product
* archives only; THIS file is enqueued on every page, so this is the file
* both surfaces get. Moved whole rather than copied — see the note left in
* artiviq-pdp.css for why a second copy of `.av-pdp-chip` would have been the
* worse outcome.
* ===================================================================== */
/* ============ PALETTE CHIPS — under the price, above the form ============ */
.av-pdp-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 14px 0 6px;
clear: both;
width: 100%;
}
.av-pdp-chip {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 5px 11px;
border: 1px solid var(--av-gray-light);
/* 14px, not 999px: a one-line chip is ~26px tall, so it is still a full pill; a value
that has to wrap (below) becomes a rounded box instead of a stretched stadium. */
border-radius: 14px;
background: var(--av-off-white);
font-family: var(--av-font-body);
font-size: 12px;
line-height: 1.25;
color: var(--av-black);
text-decoration: none;
/* A chip names one thing. Wrapping "Modern Minimal" mid-phrase turns one fact into
two lines that read as two facts — the same break that split "AKSESUA/RLARI"
across the homepage card labels on 2026-09-21. */
white-space: nowrap;
/* ⚠️ …but never wider than the column. A Malzeme value is often a whole list
("Metal döküm Hot Wheels model araç; PLA pist; … USB kablo.") and nowrap stretched
that chip to 863px inside the 408px summary on 2026-10-23: the wrapper's overflow
cut the sentence at "kaliteli fotoğraf k", on desktop and phone alike. The cap plus
a wrapping VALUE (the key stays on one line) changes nothing for a chip that fits.
Gate check O (`yazi_kirpildi`) now measures this class of defect. */
max-width: 100%;
}
a.av-pdp-chip:hover,
a.av-pdp-chip:focus-visible {
border-color: var(--av-accent);
background: var(--av-sand);
}
.av-pdp-chip__k {
font-size: 10px;
letter-spacing: .05em;
text-transform: uppercase;
font-weight: 600;
color: var(--av-gray-mid);
}
.av-pdp-chip__v {
font-weight: 600;
white-space: normal; /* see max-width on .av-pdp-chip */
min-width: 0;
}
/* Filled variant, used once: the payment chip, which is the page's only offer. */
.av-pdp-chip--fill {
border-color: var(--av-accent);
background: var(--av-accent);
/* White on #8A6A36 measures 5.01:1. Ink on the same fill is 3.42 — under AA, which
is the pair six homepage elements were shipping before 2026-09-21. */
color: var(--av-white);
font-weight: 600;
}
/* ============ SEARCH SUGGESTIONS (CommerceKit ajax search, 2026-09-27) ============
CommerceKit binds to any search input inside `.commercekit-wrapper` (header.php opts both
forms in) and appends `.commercekit-ajs-results` to the form. Its own sheet is grey/#373636
and absolutely positioned against whatever ancestor it finds; here it hangs under the input,
in the palette. */
.av-search-form.commercekit-wrapper,
.av-mobile-search.commercekit-wrapper { position: relative; }
.av-search-panel .commercekit-ajs-results,
.av-mobile-search .commercekit-ajs-results { top: calc(100% + 1px); left: 0; right: 0; width: 100% !important; min-height: 0; max-height: min(70vh, 560px); text-align: left; }
.commercekit-ajs-suggestions { background: var(--av-white); border: 1px solid var(--av-gray-light); border-radius: 0 0 var(--av-radius) var(--av-radius); }
.commercekit-ajs-suggestions > .autocomplete-suggestion { border-bottom-color: var(--av-gray-light); }
.commercekit-ajs-suggestions > .autocomplete-suggestion:hover,
.commercekit-ajs-suggestions > .autocomplete-suggestion.active { background-color: var(--av-off-white); }
.commercekit-ajs-suggestions .commercekit-ajs-post,
.commercekit-ajs-suggestions .commercekit-ajs-product { color: var(--av-black); }
.commercekit-ajs-product-title { font-weight: 600; }
.commercekit-ajs-product-price, .commercekit-ajs-product-price .amount { color: var(--av-black) !important; font-weight: 500; }
.commercekit-ajs-product-price del, .commercekit-ajs-product-price del .amount { color: var(--av-gray-mid) !important; }
.commercekit-ajs-product-out-of-stock { color: var(--av-gray-mid); font-size: 12px; }
.commercekit-ajs-post .commercekit-ajs-post-title span.post-type { color: var(--av-gray-mid); }
.commercekit-ajs-view-all-holder > a { background: var(--av-black); color: var(--av-white); letter-spacing: .12em; }
.commercekit-ajs-view-all-holder > a:hover { background: var(--av-accent); color: var(--av-white); }
.commercekit-ajs-other-result { background: var(--av-off-white); color: var(--av-gray-mid); letter-spacing: .12em; }
/* The mobile menu styles every `a` as a 32px display link; the suggestion list lives inside it. */
.av-mobile-menu .commercekit-ajs-results a { font-family: var(--av-font-body); font-size: 13px; font-weight: 400; line-height: 1.4; }
.av-mobile-menu .commercekit-ajs-results .commercekit-ajs-product-title { font-weight: 600; }
.av-mobile-menu .commercekit-ajs-view-all-holder > a { font-size: 11px; font-weight: 600; height: 40px; line-height: 40px; padding: 0; color: var(--av-white); }
.av-mobile-menu .commercekit-ajs-results { z-index: 5; }