/* ================================================
   Saksı Evi – stil dosyası
   Renkleri değiştirmek için :root içindeki değişkenleri düzenleyin.
   ================================================ */
/* ---------- fontlar (yerel, OFL lisanslı; latin + latin-ext = Türkçe karakterler) ----------
   Değişken fontlar: her dosya tüm ağırlıkları içerir, burada yalnızca kullanılanlar tanımlı. */
/* Montserrat (SIL OFL, OFL-Montserrat.txt): yalnızca sitenin adı ("Saksı Evi": S a k s ı E v i ve boşluk; pyftsubset, README →
   "Yazı tipleri"); logonun yazısıyla aynı aile ve kalınlıklar ("Mint" 900, "Dizayn" 300; dal isim-logo) */
/* metrikler sabit (ascent / descent / line-gap-override): dosyada hhea / typo yükseliş 968, iniş 251, satır aralığı 0 (upem 1000).
   Chromium bunları 22 px'te tam piksele yuvarlıyor (21 / 6 px); WebKit yuvarlamıyor ve adın taban çizgisi 0,46 px (büyük hâlde
   × 1,722 = 0,80 px) aşağıda kalıyordu. Değerler Chromium'un kullandığı tam piksellerin oranı (21 / 22, 6 / 22): Chromium'da çizim
   değişmez, iki motor aynı taban çizgisini verir (ölçüm: Chromium −0,007 / −0,012 px, WebKit 0,071 / 0,123 px; dosyanın kendi
   değerleri %96,8 / %25,1 hiçbir şeyi değiştirmedi). 2× yazıda (44 px) da tam piksel (42 / 12) */
@font-face {
  font-family: "Montserrat Ad"; font-style: normal; font-weight: 900; font-display: swap;
  ascent-override: 95.4545%; descent-override: 27.2727%; line-gap-override: 0%;
  src: url("../fonts/montserrat-ad-900.woff2?v=11893efcb1") format("woff2");
}
@font-face {
  font-family: "Montserrat Ad"; font-style: normal; font-weight: 300; font-display: swap;
  ascent-override: 95.4545%; descent-override: 27.2727%; line-gap-override: 0%;
  src: url("../fonts/montserrat-ad-300.woff2?v=77a0f1dbb0") format("woff2");
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/manrope-latin-ext.woff2?v=ce093b341d") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap;
  src: url("../fonts/manrope-latin.woff2?v=e310b55a7f") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --bg: #fafaf7;
  --surface: #ffffff;
  --ink: #17201c;
  --muted: #5d6862;
  --line: #e3e7e2;
  --mint: #8fd8b8;        /* logo yeşili */
  --mint-soft: #e9f6ef;
  --mint-deep: #22784f;   /* buton / link (kontrast için koyu ton) */
  --mint-deeper: #185c3c;
  --wa: #198544;          /* beyaz yazıyla 4.7:1 kontrast (WCAG AA) */
  --media-bg: #f3f4f1;    /* ürün görsellerinin zemini (beyaz fonlu fotoğraflar bu tona karışır) */
  --radius: 14px;
  --shadow: 0 1px 2px rgba(23, 32, 28, .05), 0 8px 24px rgba(23, 32, 28, .06);
  --max: 1200px;
  /* iPhone çentik / ev çizgisi payları: viewport-fit=cover ile gelir, diğer cihazlarda 0 */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* sabit çubukların boyları (dal erisim, kullanıcı kararı 2026-10-22): çubukları bunlar boyutlandırır, JavaScript'siz yedek paylar
     (kökteki scroll-padding-top / -bottom, ≤ 600 px'te body padding-bottom) bunlardan türer, ayrı sabit yok; JavaScript açıkken
     main.js → initCovers çubukları ölçer. 1× yazıda her çubuğun ölçülen boyu her piksel oranında değişkenine eşit olmalı (içerik büyürse
     qa/tests/odak-ortulmesi.spec.mjs düşer; bu yüzden çubuklardaki düğme ve çip kenarlığı 1 px: aşağıda) */
  --header-h: 72px;          /* üst çubuğun içerik yüksekliği (yatay telefonda 56) */
  --header-line: 1px;        /* üst çubuğun alt kenarlığı */
  --ral-bar-h: 57.1875px;    /* /renkler'in aile çubuğu: 8 px iç boşluk + çip (41,1875) + 8 px */
  --mobile-bar-h: 71px;      /* ≤ 600 px'te mobil "Ara / WhatsApp" çubuğu; ev çizgisi payı (--safe-b) ayrıca */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
/* height:auto: width/height öznitelikli görsel CSS ile daraltılınca özniteliğin yüksekliği kalmasın, oran korunsun */
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }   /* display: grid/flex verilen öğeler de hidden ile gizlensin */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
a { color: inherit; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .5em; }
p { margin: 0 0 1em; }

/* yatay iPhone'da içerik çentiğin altına girmesin; arka planlar yine tam genişlik */
.container { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 max(20px, var(--safe-r)) 0 max(20px, var(--safe-l)); }
.section { padding: 72px 0; }
.section-cta { padding-top: 0; }
.section-alt { background: var(--surface); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; flex-wrap: wrap; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin: 0; }
.section-head p { color: var(--muted); max-width: 520px; margin: 8px 0 0; }
.eyebrow {
  display: inline-block; font-size: 13px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--mint-deep); margin-bottom: 12px;
}

/* ---------- butonlar ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 22px; border-radius: 999px; font-weight: 700; font-size: 15px;
  text-decoration: none; border: 1.5px solid transparent; cursor: pointer;
  transition: background .2s, color .2s, border-color .2s, transform .2s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn-primary { background: var(--mint-deep); color: #fff; }
.btn-primary:hover { background: var(--mint-deeper); }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #146d38; }
.btn-ghost { border-color: var(--ink); color: var(--ink); background: transparent; }
.btn-ghost:hover { background: var(--ink); color: #fff; }
/* ---------- Instagram düğmesi (iki sitede aynı; README → "Instagram") ----------
 * Marka degradesi: sarı → turuncu yalnızca sol alt köşede (px duraklarla: düğme genişliğinden bağımsız küçük bir köşe),
 * yazı ve glif macenta → mor → mavi üzerinde: beyaz yazı en kötü noktada ≥ 4,5:1 (qa/tests/instagram.spec.mjs piksel
 * piksel ölçer). Üzerine gelince %16 koyulaşır (WhatsApp düğmesi gibi); odak halkası genel :focus-visible kuralı. */
:root {
  --ig-grad: radial-gradient(circle at 0 100%, #feda75 0, #fa7e1e 6px, rgba(250, 126, 30, 0) 15px),
    linear-gradient(to top right, #d62976 12%, #962fbf 58%, #4f5bd5 100%);
  --ig-shade: linear-gradient(rgba(0, 0, 0, .16), rgba(0, 0, 0, .16));
}
/* background-origin: border-box — degrade saydam kenarlığın (.btn 1,5 px) altına da uzansın; yoksa kenarda karşı kenarın
   rengi tekrar eder (ince pembe şerit). background kısayolu origin'i sıfırladığı için her kuralda yeniden yazılır. */
.btn-ig { background: var(--ig-grad); background-origin: border-box; color: #fff; }
.btn-ig:hover { background: var(--ig-shade), var(--ig-grad); background-origin: border-box; }
.btn-ig svg { width: 18px; height: 18px; }
.btn-light { background: #fff; color: var(--ink); }
.btn-outline-light { border-color: rgba(255,255,255,.6); color: #fff; }
.btn-outline-light:hover { background: #fff; color: var(--ink); }

/* ---------- üst bar & header ---------- */
.topbar { background: var(--ink); color: #cfd8d3; font-size: 13.5px; }
.topbar .container { display: flex; justify-content: space-between; gap: 16px; padding-top: 8px; padding-bottom: 8px; }
.topbar a { color: #fff; text-decoration: none; }
.topbar-hours { display: none; }
/* üst çubukta saatler tek satırlık şeritte (900 px'ten; kırılma kuralı orada): gruplar satır içinde; ayırıcı öğe burada da
   gizli, grupların arasındaki "·" bir önceki grubun saat aralığının içinde (::after; ekran okuyucuya boş metin): parça
   kırılmadığı için "·" ondan ayrılamaz, hiçbir satır "·" ile başlayamaz (grubun ::after'ı olsaydı tarayıcılar satır içi kutunun
   ardında bölünmez boşluğa rağmen kırıyordu: 2×'te 1066–1077 px'te "·" alt satıra düşüyordu) */
.topbar [data-hours] .hours-part { display: inline; }
.topbar [data-hours] .hours-part:not(:last-child) .hours-time::after { content: "\a0·"; content: "\a0·" / ""; }

.header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(250, 250, 247, .92);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: var(--header-line) solid var(--line);
}
/* en az --header-h; yazı büyütülünce çubuk içeriğiyle büyür, taşmaz (saksının logosu 2× yazıda da tek satır: dikey ekranda çubuk
   aynı kalır, yatay telefonda büyür; main.js → initCovers boyunu izler) */
.header .container { display: flex; align-items: center; min-height: var(--header-h); gap: 8px; }
/* çapalar ve Tab'la gelinen öğe yapışkan üst çubuğun (--header-h + --header-line) altına iner: JavaScript açıkken main.js →
   initCovers bütün sabit katmanları ölçer (2× yazıda büyüyen çubuk, alt çubuk, çerez bandı), buradaki değer JavaScript'siz yedek
   (çubuğun değişkenlerinden); çapaların scroll-margin-top'u yalnızca çubuktan sonraki boşluk */
:root { scroll-padding-top: calc(var(--header-h) + var(--header-line)); }
.header .logo { margin-right: auto; }

/* sitenin adı logonun yazısı gibi: Montserrat, "Saksı" 900 (logodaki "Mint"), "Evi" 300 ("Dizayn"), ikisi de logonun yazı
   rengi (müşterinin görselinden: #1c1d1f), harf aralığı logodaki gibi −0,02 em (Montserrat'a göre ölçüldü; docs/logo-kaynagi.md) */
.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-size: 22px; letter-spacing: -0.02em;
  font-family: "Montserrat Ad", var(--font); color: #1c1d1f; }
/* Mint Dizayn logosu, yazısıyla (müşterinin görselinden, scripts/prepare-site-logo.mjs; PNG 3×: 223 × 216): üst çubuğun içerik
   yüksekliği kadar (72 px; yatay telefonda 56) */
.logo-img { width: 74px; height: 72px; flex: none; }
.logo b { font-weight: 900; }
.logo span { font-weight: 300; color: inherit; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a { text-decoration: none; font-weight: 600; font-size: 15px; padding: 10px 14px; border-radius: 999px; color: var(--ink); }
.nav a:hover, .nav a[aria-current="page"] { background: var(--mint-soft); color: var(--mint-deeper); }
.nav .btn { margin-left: 8px; padding: 10px 18px; }
.nav .btn-wa, .nav .btn:hover { color: #fff; }
.nav .btn:hover { background: #146d38; }
/* Instagram: geniş ekranda WhatsApp'ın solunda aynı boy hap düğme; dar ekranda menü düğmesinin yanında degrade kare */
.nav .btn-ig { color: #fff; }
.nav .btn-ig:hover { background: var(--ig-shade), var(--ig-grad); background-origin: border-box; color: #fff; }
.header-ig {
  display: none; width: 44px; height: 44px; border-radius: 12px; align-items: center; justify-content: center;
  background: var(--ig-grad); color: #fff; text-decoration: none;
}
.header-ig svg { width: 22px; height: 22px; }
.header-ig:hover { background: var(--ig-shade), var(--ig-grad); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* ---------- hero (kompakt: başlık, tek satır, iki düğme) ---------- */
.hero { padding: 48px 0 36px; }
.hero .container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 56px; align-items: center; }
.hero h1 { font-size: clamp(32px, 4.4vw, 54px); font-weight: 800; margin-bottom: 14px; max-width: 15em; }
.hero h1 em { font-style: normal; color: var(--mint-deep); }
.hero-lead { font-size: 18px; color: var(--muted); max-width: 540px; margin-bottom: 24px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
/* ürün fotoğrafı kendi arka plan tonunda (--tone: build, scripts/saksi-photos-tones.json) */
.hero-media { border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 5; background: var(--tone, var(--media-bg)); }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media picture, .card-media picture, .pd-media picture, .pd-thumb-img picture {
  display: block; width: 100%; height: 100%;
}

/* ---------- ana sayfa: kategoriler (alt alta) ---------- */
.home-products { padding: 12px 0 72px; }
.products-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.products-head h2 { font-size: clamp(26px, 3vw, 34px); margin: 0; }
.link-more { font-weight: 700; font-size: 15px; color: var(--mint-deep); text-decoration: none; white-space: nowrap; }
.link-more:hover { text-decoration: underline; }

/* ---------- kategoriler: ana sayfa listesi, /urunler bölümleri, kategori sayfasının başı ----------
   Kapak beyaz zeminli kesim (scripts/kategori-kapaklar.json): beyaz kutuda bütünüyle görünür (contain) */
.cat-row-media, .cat-block-media, .cat-cover { display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: #fff; }
.cat-row-media picture, .cat-block-media picture, .cat-cover picture { display: block; width: 100%; height: 100%; }
.cat-row-media img, .cat-block-media img, .cat-cover img { width: 100%; height: 100%; object-fit: contain; }
.cat-list { display: flex; flex-direction: column; gap: 12px; }
.cat-row {
  display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 24px; align-items: center; padding: 12px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); text-decoration: none;
  transition: border-color .2s;
}
.cat-row:hover { border-color: var(--mint); }
.cat-row:focus-visible { outline-offset: 4px; }
.cat-row-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cat-row-title { margin: 0; font-size: clamp(19px, 2vw, 22px); line-height: 1.25; }
.cat-row-intro { color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 640px; }
.cat-row-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; font-size: 14px; font-weight: 700; color: var(--mint-deeper); }
.cat-row-more { color: var(--mint-deep); }
.cat-row:hover .cat-row-more { text-decoration: underline; }
/* /urunler: kategori başına bölüm (kapak, ad, giriş; altında modellerin kartları) */
.cat-block { padding: 8px 0 40px; scroll-margin-top: 7px; }   /* üst çubuktan sonraki boşluk (çubuğun payı kökte: scroll-padding-top; önce 80px) */
.cat-block + .cat-block { border-top: 1px solid var(--line); padding-top: 40px; }
.cat-block-head { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center; margin-bottom: 24px; }
.cat-block-media { border: 1px solid var(--line); }
.cat-block-text h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 8px; }
.cat-block-text h2 a { color: inherit; text-decoration: none; }
.cat-block-text h2 a:hover { color: var(--mint-deep); text-decoration: underline; }
.cat-block-text h2 span { color: var(--mint-deep); }
.cat-block-text p { margin: 0; color: var(--muted); max-width: 640px; }
/* kategori sayfası: giriş solda, kapak sağda; "Ayrıca bakın" galeriden sonra */
.cat-head-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 24px 48px; align-items: center; }
.cat-cover { border: 1px solid var(--line); }
.page-head .cat-deco { margin-top: 12px; font-size: 15px; }
.cat-head ~ .listing { padding-bottom: 40px; }
.cat-links { padding-bottom: 56px; }
/* /urunler: yedi kategoriye atlama satırı ("Ayrıca bakın" bağlantılarıyla aynı biçim): metin ayracı yok, bağlantılar
   satıra kırılan flex dizisinde, aralık gap'ten (satır sonunda ayraç kalamaz) */
.cat-jump { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin-top: 14px; font-size: 15px; color: var(--muted); }
.cat-jump a { color: var(--mint-deep); font-weight: 700; text-decoration: none; padding: 6px 0; }
.cat-jump a:hover { text-decoration: underline; }
.cat-links .see-also { margin-top: 0; }

/* ---------- ürün kartları: 4:5 görsel kendi arka plan tonunda, kod + ad, kısa ölçü ---------- */
.grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 20px; }
/* min-width 0: .work gibi (aşağıda): WebKit pencere daralınca .card-media'nın aspect-ratio'su yüzünden kartın en küçük enini eski
   genişlikte tutuyordu (1366 → 320 px'te 262 px taşma; dal erisim, qa/tests/kucultme.spec.mjs) */
.card { display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--ink); border-radius: var(--radius); min-width: 0; }
.card-media { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--tone, var(--media-bg)); }
.card-media img, .card-media .img-ph { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.card:hover .card-media img { transform: scale(1.03); }
.card-body { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.card-title { margin: 0; font-weight: 700; font-size: 16.5px; line-height: 1.3; letter-spacing: normal; }
.card-meta { font-size: 14px; color: var(--muted); }
.card-code, .pd-code { color: var(--mint-deeper); }
.card:focus-visible { outline-offset: 4px; }

.img-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px;
  letter-spacing: .06em; color: #9aa59f;
  background: repeating-linear-gradient(135deg, #f1f3ef 0 12px, #eaede8 12px 24px);
}
/* fotoğrafı olmayan model (data.js → noPhoto): kod ve kısa not, düz zeminde (kontrast ölçülebilir) */
.no-photo {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 16px; text-align: center; background: var(--media-bg);
}
.no-photo-code { font-weight: 800; font-size: 22px; letter-spacing: .04em; color: var(--ink); }
.no-photo-text { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--muted); }
.pd-media .no-photo-code { font-size: 34px; }
.pd-media .no-photo-text { font-size: 16px; }

/* ---------- avantajlar (sıkı: simge ve metin yan yana) ---------- */
.features-section { padding: 56px 0; }
.features-section .section-head { margin-bottom: 24px; }
.features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.feature { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--radius); background: var(--bg); border: 1px solid var(--line); }
.feature-icon {
  flex: none; width: 40px; height: 40px; border-radius: 10px; background: var(--mint-soft); color: var(--mint-deep);
  display: flex; align-items: center; justify-content: center;
}
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-size: 16px; margin-bottom: 4px; letter-spacing: -0.01em; }
.feature p { color: var(--muted); font-size: 14.5px; line-height: 1.5; margin: 0; }

/* ---------- süreç ---------- */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
.step { position: relative; padding-top: 20px; border-top: 2px solid var(--line); }
.step::before {
  counter-increment: step; content: "0" counter(step); display: block; font-size: 14px; font-weight: 800;
  color: var(--mint-deep); margin-bottom: 10px;
}
.step h3 { font-size: 18px; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 15px; margin: 0; }

/* ---------- hakkımızda (sıkı) ---------- */
.about { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
/* fotoğraf kendi oranında (kırpılmaz; width/height öznitelikleri yeri ayırır) */
.about-media { border-radius: var(--radius); overflow: hidden; background: var(--tone, #eef0ec); }
.about-media picture, .about-media img { display: block; width: 100%; height: auto; }
.about h2 { font-size: clamp(26px, 3vw, 36px); }
.about p { color: var(--muted); font-size: 16.5px; }
.check-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.check-list li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--mint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322784f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L19 8'/%3E%3C/svg%3E") center / 14px no-repeat;
}

/* ---------- referanslar ----------
   Her referans aynı kutuda (data.js → REFERENCES_VIEW; scripts/lib/refs.mjs): logo ya da logosu olmayan için yazı kartı.
   Masaüstünde 5 sütun, dar ekranda (≤ 860 px) 2 sütun; eksik son satır ortalanır (dal referanslar, 2026-11-10: 21 referans →
   masaüstünde 5 × 4 + 1, telefonda 2 × 10 + 1). Bunun için ızgaranın izleri iki kat (10 / 4), her kart iki iz kaplar: kart
   genişliği eski 5 / 2 sütunlu ızgarayla aynı ((genişlik − 4 boşluk) / 5), son satırın ilk kartı boş iz sayısının yarısı kadar
   içeriden başlar (yalnızca :nth-child / :nth-last-child; referans sayısından bağımsız).
   Tüm satırlar eşit yükseklikte (grid-auto-rows: 1fr). Logo kartı bir boyut kapsayıcısı (container-type: size, iç
   boşluk 0): her logo kartın %80 genişliğine ya da %76 yüksekliğine (hangisi önce) BÜTÜN SETLE BİRLİKTE ölçeklenir —
   genişlik = min(--w / --dw × 80cqw, --w / --dh × 76cqh); --w logonun, --dw / --dh setin en geniş / en yüksek logosunun
   en büyük kartta görüntüleme boyutu (build: scripts/lib/refs.mjs ← scripts/referans-logolari-olcu.json). Böylece her
   kenarda en az %10 boşluk kalır ve görsel eşitlik (scripts/prepare-reference-logos.mjs) bozulmaz. Logosuz yazı kartı
   (ref-ad) aynı formülle: --ad-fs = setin ölçeğinde yazı boyutu (logolarla aynı görsel ağırlık; logo seti değişirse
   yeniden ölçün, README → "Referans logoları"). Logolar her zaman özgün renginde ve tam opak; üzerine gelince yalnızca
   kart (kenarlık + gölge) değişir, logo değişmez. */
.ref-grid {
  list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr));
  grid-auto-rows: 1fr; gap: 20px;
}
.ref {
  display: flex; align-items: center; justify-content: center; min-height: 104px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); text-align: center;
  grid-column: span 2;
}
/* eksik son satır ortada: son satırda 4 / 3 / 2 / 1 kart → ilki 2. / 3. / 4. / 5. izden başlar */
.ref-grid > .ref:nth-child(5n + 1):nth-last-child(4) { grid-column: 2 / span 2; }
.ref-grid > .ref:nth-child(5n + 1):nth-last-child(3) { grid-column: 3 / span 2; }
.ref-grid > .ref:nth-child(5n + 1):nth-last-child(2) { grid-column: 4 / span 2; }
.ref-grid > .ref:nth-child(5n + 1):last-child { grid-column: 5 / span 2; }
.ref-text span { font-weight: 800; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; }
.ref.ref-logo, .ref.ref-ad { container-type: size; padding: 0; }
.ref-logo img { width: min(calc(var(--w) / var(--dw) * 80cqw), calc(var(--w) / var(--dh) * 76cqh)); height: auto; }
.ref-text.ref-ad span {
  --ad-fs: 19.2; font-size: min(calc(var(--ad-fs) / var(--dw) * 80cqw), calc(var(--ad-fs) / var(--dh) * 76cqh));
  font-weight: 700; line-height: 1.2; white-space: nowrap;
}
/* koyu kart (data.js → REFERENCES[].dark; dal referanslar, 2026-11-10): beyaz logo (Akra Didim, Arcflos, Hotel DreamWorld)
   özgün renginde; boyut ve köşe yarıçapı öbür kartlarla aynı, zemin ve kenarlık sitenin koyu tonu (--ink, altbilgi ve CTA ile aynı) */
.ref.ref-dark { background: var(--ink); border-color: var(--ink); }
@media (hover: hover) {
  .ref { transition: border-color .2s, box-shadow .2s; }
  .ref:hover { border-color: #cbd3cd; box-shadow: var(--shadow); }
  .ref.ref-dark:hover { border-color: var(--ink); }
}

/* ---------- CTA bandı ---------- */
.cta {
  background: var(--ink); color: #fff; border-radius: 24px; padding: 56px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 32px; align-items: center; position: relative; overflow: hidden;
}
.cta::after {
  content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%;
  border: 36px solid var(--mint); opacity: .18;
}
.cta h2 { font-size: clamp(26px, 3vw, 36px); }
.cta p { color: #b9c4be; margin: 0; }
.cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; position: relative; z-index: 1; }

/* ---------- iletişim ---------- */
.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; }
.contact-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 20px; }
.contact-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; }
.contact-list .ci {
  width: 44px; height: 44px; border-radius: 12px; background: var(--mint-soft); color: var(--mint-deep);
  display: flex; align-items: center; justify-content: center;
}
.contact-list .ci svg { width: 20px; height: 20px; }
.contact-list small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.contact-list a, .contact-list span { font-weight: 600; text-decoration: none; word-break: break-word; }
.contact-list a:hover { color: var(--mint-deep); }
/* çalışma saatleri (contact.mjs → hoursHtml; dal saatler, mint-heykel 2a2b677): iletişim kartında her gün grubu her genişlikte
   kendi satırında başlar; grubun içinde kırılmayan parçalar (gün adı, aralıksa kısa çizgiden sonra ikiye; saat aralığı): satır
   yalnızca gün adından sonra, sığmazsa gün aralığının kısa çizgisinden sonra kırılır, saat aralığı ve sözcükler bölünmez
   (inline-block: WebKit ayrı nowrap satır içi öğelerin arasında kırmıyordu); gruplar arasındaki "·" hiç görünmez (öğede ayrıca
   aria-hidden: stil yüklenmezse görünür, ekran okuyucu okumaz). Üst çubuk (tek satırlık şerit): aşağıda .topbar */
[data-hours] .hours-part { display: block; }
[data-hours] .hours-piece { display: inline-block; white-space: nowrap; }
[data-hours] .hours-sep { display: none; }
.contact-actions { display: grid; gap: 12px; margin-top: 28px; }
.map { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); min-height: 360px; background: #eef0ec; }
.map iframe { width: 100%; height: 100%; min-height: 360px; border: 0; display: block; }
/* harita yer tutucusu: Google'a istek yalnızca "Haritayı göster" ile (main.js iframe'i o an ekler) */
.map-ph { height: 100%; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 32px 24px; text-align: center; }
.map-ph .ci { width: 48px; height: 48px; border-radius: 14px; background: var(--surface); color: var(--mint-deep); display: flex; align-items: center; justify-content: center; margin-bottom: 6px; }
.map-ph .ci svg { width: 22px; height: 22px; }
.map-ph p { margin: 0; }
.map-ph-title { font-weight: 800; font-size: 18px; }
.map-ph-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.map-ph-actions .btn { padding: 11px 18px; background: var(--surface); }
.map-ph-actions .btn:hover { background: var(--ink); }
.map-note { font-size: 13px; color: var(--muted); margin-top: 10px !important; }

/* ---------- ürünler sayfası ---------- */
.page-head { padding: 40px 0 20px; }
.listing { padding-bottom: 72px; }
.page-head h1 { font-size: clamp(32px, 4.4vw, 52px); font-weight: 800; }
.page-head p { color: var(--muted); max-width: 640px; font-size: 17px; margin: 0; }
.breadcrumb { font-size: 14px; color: var(--muted); margin-bottom: 16px; display: flex; gap: 8px; flex-wrap: wrap; }
/* dokunma hedefi en az 24 px (WCAG 2.5.8; dal isim-logo: sayfa yolu yapışkan çubuğun altına kaydığında çubuktaki 72 px'lik logo
   bağlantısıyla örtüşüyordu): satır 22,4 px (14 px × 1,6), dolgu üst ve alt 0,8 px; aynı miktarda negatif boşluk düzeni ve yazının
   yerini değiştirmez */
.breadcrumb a { text-decoration: none; display: inline-block; padding-block: 0.8px; margin-block: -0.8px; }
.breadcrumb a:hover { color: var(--mint-deep); }
.breadcrumb-top { padding-top: 32px; }

.tabs {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 20px; margin-bottom: 12px;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  --fade: 64px; /* sağ kenar soldurma genişliği; main.js seçili sekmeyi bu payın soluna kaydırır */
}
.tabs::-webkit-scrollbar { display: none; }
/* Şerit taşıyorsa sağ kenarı soldur (JS .has-more ekler; sona gelince kalkar) */
.tabs.has-more {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade)), transparent);
}
.tabs a {
  flex: none; font: inherit; font-weight: 700; font-size: 15px; padding: 10px 18px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; transition: all .2s; text-decoration: none;
}
.tabs a:hover { border-color: var(--mint); }
.tabs a.active { background: var(--ink); border-color: var(--ink); color: #fff; }
.tab-count { font-size: 12px; background: var(--mint-soft); color: var(--mint-deeper); padding: 1px 8px; border-radius: 999px; }
.tabs a.active .tab-count { background: rgba(255,255,255,.16); color: #fff; }

/* ---------- ürün detay ---------- */
/* Masaüstü: görsel solda (iki satır boyunca, yapışkan), ad ve bilgiler sağda. Mobil: ad, görsel, bilgiler (ad
   görselin üstünde, ilk ekranda). DOM sırası da ad → görsel → bilgi. */
.pd {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); grid-template-rows: auto 1fr;
  grid-template-areas: "gallery title" "gallery info"; column-gap: 56px; align-items: start; padding: 12px 0 72px;
}
.pd > * { min-width: 0; }   /* uzun tablo ızgara sütununu genişletmesin (tablo kendi kutusunda kayar) */
.pd-title { grid-area: title; }
.pd-gallery { grid-area: gallery; position: sticky; top: 96px; }
/* yalnızca sabit katmanların arasına bütünüyle sığarken yapışık (main.js → initCovers → STICKY_FIT; dal erisim): bant açıkken, kısa
   pencerede ya da büyük yazıda altı katmanların altında kalıyordu */
.pd-gallery.stick-off { position: static; }
.pd-info { grid-area: info; }
/* Kutu ana görselin oranında (aspect-ratio ve --ar satır içi, build): boşluk bırakmaz. Küçük görselden seçilen başka bir
   görsel (renk örneği, uygulama fotoğrafı) kutunun boyutunu değiştirmez, içine sığdırılır (düzen kayması yok; main.js).
   Masaüstünde ekran yüksekliğine sığacak kadar daraltılır. Yüklenirken ürünün arka plan tonu görünür. */
.pd-media {
  width: min(100%, calc((100vh - 250px) * var(--ar, 1))); margin: 0 auto; position: relative;
  border-radius: 18px; overflow: hidden; background: var(--tone, var(--media-bg));
}
.pd-media img, .pd-media .img-ph { width: 100%; height: 100%; object-fit: cover; }
/* ana çerçeve kendi görseline bağlantı (görüntüleyici: main.js → initViewer); odak halkası çerçevenin içinde (çerçeve overflow:
   hidden). Bağlantı çerçevenin kutusunu tam doldurur (inset: 0): dar ekranda çerçeve 56svh ile kısaldığında yüzde yükseklik
   kısalmamış en-boy yüksekliğine çözülüyordu (768 × 1024'te 722 / 573 px: görsel alttan kırpılıyor, bağlantı küçük
   görsellerin üstüne taşıyordu; 2026-10-15'te bulundu) */
.pd-media-link { display: block; position: absolute; inset: 0; }
.pd-media-link:focus-visible { outline-offset: -3px; }
.pd-media img { object-fit: contain; }
.pd-media[data-kind="renk"] { background: #fff; }               /* kesimler beyaz zeminde */
.pd-media[data-kind="uygulama"] { background: var(--media-bg); }
/* seçilen uygulama fotoğrafının başlığı: yeri hep ayrılı (iki satır; geniş ekranda bir), şerit kaymasın */
.pd-caption { margin: 8px 0 0; min-height: 1.4em; font-size: 13.5px; line-height: 1.4; font-weight: 600; color: var(--muted); text-align: center; }
.pd-thumbs { display: flex; justify-content: center; gap: 12px; margin-top: 14px; }
/* ana görsel + uygulama fotoğrafları: tek satır, sığmazsa yatay kayar (sayfa taşmaz); azken ortalı (kenar boşluğu auto) */
.pd-thumbs-row { justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; padding: 4px 4px 6px; }
.pd-thumbs-row > .pd-thumb { flex: 0 0 auto; }
.pd-thumbs-row > .pd-thumb:first-child { margin-left: auto; }
.pd-thumbs-row > .pd-thumb:last-child { margin-right: auto; }
.pd-caption + .pd-thumbs-row { margin-top: 4px; }
.pd-thumb { width: 76px; text-decoration: none; color: var(--muted); font-size: 12.5px; font-weight: 600; text-align: center; border-radius: 10px; }
.pd-thumb-img {
  display: block; aspect-ratio: 4 / 5; border-radius: 10px; overflow: hidden; background: var(--tone, var(--media-bg));
  outline: 2px solid transparent; outline-offset: 2px; transition: outline-color .15s;
}
.pd-thumb-img img { width: 100%; height: 100%; object-fit: cover; }
.pd-thumb:hover .pd-thumb-img { outline-color: var(--line); }
.pd-thumb[aria-current="true"] { color: var(--ink); }
.pd-thumb[aria-current="true"] .pd-thumb-img { outline-color: var(--ink); }
.pd-thumb-label { display: block; margin-top: 6px; line-height: 1.3; }
/* "Farklı renklerde": aynı modelin başka renkteki fotoğrafları; ana küçük görsellerden çizgiyle ayrı, kendi başlığıyla.
   Tıklayınca yalnızca ana görsel değişir (main.js); altında "Fotoğraftaki renk örnektir…" cümlesi */
.pd-colors { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); text-align: center; }
.pd-colors-title { margin: 0 0 10px; font-size: 15px; font-weight: 700; letter-spacing: normal; }
.pd-thumbs-colors { flex-wrap: wrap; margin-top: 0; }
.pd-colors .photo-color { margin-top: 10px; }
/* masaüstünde renk şeridi olan sayfa: yapışkan galerinin tamamı ekrana sığsın (görselin yükseklik payı şeridin boyu kadar
   az); kısa ekranda galeri yapışkan değil (şerit görselin altında, kaydırarak görünür) */
@media (min-width: 861px) and (min-height: 761px) {
  .pd-gallery.has-colors .pd-media { width: min(100%, calc((100vh - 440px) * var(--ar, 1))); }
}
@media (min-width: 861px) and (max-height: 760px) { .pd-gallery.has-colors { position: static; } }
/* uygulama fotoğraflı sayfa: görsel, başlığı ve küçük görsel şeridi ilk ekrana sığar (görselin yükseklik payı şerit ve
   başlık kadar az; kısa dizüstü ekranında en az 360px, şerit ilk ekranın biraz altına düşebilir); galeri uzun (renk şeridi
   de olabilir), yapışkan değil. Yatay telefon (yükseklik ≤ 500px) kendi kuralıyla (aşağıda: 100svh − 124px) */
@media (min-width: 861px) {
  .pd-gallery.has-photos { position: static; }
}
@media (min-width: 861px) and (min-height: 501px) {
  .pd-gallery.has-photos .pd-media { width: min(100%, calc(max(360px, 100vh - 390px) * var(--ar, 1))); }
}
.pd-title .eyebrow { text-decoration: none; }
.pd-title h1 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; margin-bottom: 12px; }
.pd-lead { color: var(--muted); font-size: 17px; }
/* ölçü seçici: gerçek radyo düğmeleri (klavye: Tab ile gruba gir, oklarla seç), görünüşü düğme */
.size-picker { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.size-picker legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 10px; }
.size-options { display: flex; flex-wrap: wrap; gap: 8px; }
.size-opt { position: relative; display: inline-flex; }
.size-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.size-opt span {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 72px; padding: 8px 18px;
  border-radius: 999px; border: 1.5px solid var(--line); background: var(--surface); font-weight: 700; font-size: 15px;
  transition: background .15s, border-color .15s, color .15s;
}
.size-opt input:hover + span { border-color: var(--mint-deep); }
.size-opt input:checked + span { background: var(--ink); border-color: var(--ink); color: #fff; }
.size-opt input:focus-visible + span, .kbd .size-opt input:focus + span { outline: 3px solid var(--mint-deep); outline-offset: 2px; }
.size-summary { margin: 12px 0 0; font-size: 15px; color: var(--muted); }
.size-summary strong { color: var(--ink); }
/* renk seçici: öne çıkan RAL renkleri, gerçek radyo düğmeleri (isteğe bağlı, varsayılan seçim yok); fotoğraf
   boyanmaz. --c: renk, --on: seçim işaretinin rengi (build, renk parlaklığına göre) */
.color-picker { border: 0; padding: 0; margin: 24px 0 0; min-width: 0; }
.color-picker legend { font-weight: 700; font-size: 15px; padding: 0; margin-bottom: 12px; }
.legend-note { font-weight: 500; color: var(--muted); }
.color-options { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 14px 6px; }
.color-opt { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; font-size: 12.5px; line-height: 1.25; }
.color-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.color-sw {
  display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin-bottom: 6px;
  border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(23, 32, 28, .18);
  outline: 2px solid transparent; outline-offset: 3px; transition: outline-color .15s;
}
.color-code { font-weight: 700; }
.color-name { color: var(--muted); }
.color-opt input:hover ~ .color-sw { outline-color: var(--line); }
.color-opt input:checked ~ .color-sw { outline-color: var(--ink); }
.color-opt input:checked ~ .color-sw::after {
  content: ""; width: 13px; height: 7px; border-left: 2.5px solid var(--on); border-bottom: 2.5px solid var(--on);
  transform: translateY(-2px) rotate(-45deg);
}
.color-opt input:checked ~ .color-name { color: var(--ink); font-weight: 700; }
.color-opt input:focus-visible ~ .color-sw, .kbd .color-opt input:focus ~ .color-sw { outline: 3px solid var(--mint-deep); outline-offset: 3px; }
.color-status { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin-top: 14px; }
.color-summary { margin: 0; font-size: 15px; color: var(--muted); }
.color-summary strong { color: var(--ink); }
.color-clear {
  font: inherit; font-size: 14px; font-weight: 700; color: var(--mint-deep); background: none; border: 0; padding: 4px 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.color-note { margin: 10px 0 24px; font-size: 13.5px; color: var(--muted); }
.color-note a { font-weight: 700; color: var(--mint-deep); white-space: nowrap; }
/* ölçü tablosu: tüm ölçüler durağan HTML'de (JavaScript'siz ve arama motorları için); seçili ölçü vurgulu */
.dims-wrap { margin: 20px 0 24px; overflow-x: auto; }
.dims { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.dims caption { text-align: left; font-weight: 700; font-size: 15px; padding-bottom: 8px; }
.dims th, .dims td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.dims thead th { font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); border-bottom-width: 2px; }
.dims tbody th { font-weight: 700; }
.dims tr.is-selected { background: var(--mint-soft); }
.dims tr.is-selected th, .dims tr.is-selected td { color: var(--mint-deeper); }
.dims-none { margin: 20px 0 24px; font-size: 15px; }
/* katalog notları (ör. "Ölçüler isteğe göre şekillenebilir"), katalogdaki yazımıyla */
.pd-notes { margin: -8px 0 24px; padding-left: 20px; font-size: 15px; }
.pd-notes li + li { margin-top: 4px; }
/* fotoğraftaki renk: tek nötr cümle, renk seçicinin üstünde */
.photo-color { margin: 0; font-size: 14.5px; color: var(--muted); }
.pd-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pd-note {
  margin: 16px 0 0; padding: 14px 16px; background: var(--mint-soft); border-radius: 12px;
  font-size: 14.5px; color: var(--mint-deeper);
}
.pd-note a { font-weight: 700; color: inherit; }
.specs { margin: 24px 0 0; border-top: 1px solid var(--line); }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.specs dt { color: var(--muted); }
.specs dd { margin: 0; font-weight: 700; text-align: right; }
.related .section-links { display: flex; gap: 10px; flex-wrap: wrap; }
.empty { text-align: center; padding: 80px 0; grid-column: 1 / -1; }

/* ---------- renkler (/renkler): öne çıkan renkler + RAL Classic kartelası ---------- */
.page-head .color-disclaimer {
  display: inline-block; margin-top: 16px; padding: 10px 14px; border-radius: 10px;
  background: var(--mint-soft); color: var(--mint-deeper); font-size: 14.5px;
}
.ral-section { padding: 28px 0 56px; }
.ral-section h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 16px; }
.ral-featured { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px 16px; }
.ral-card { display: flex; flex-direction: column; font-size: 14px; line-height: 1.35; }
.ral-card-sw {
  display: block; aspect-ratio: 3 / 2; margin-bottom: 10px; border-radius: 12px;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(23, 32, 28, .14);
}
.ral-card-code { font-weight: 800; }
.ral-card-name { font-weight: 600; }
.ral-card-en { color: var(--muted); font-size: 13px; }
.ral-all { padding-top: 8px; }
.ral-all-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.ral-count { margin: 0 0 16px; color: var(--muted); font-weight: 600; }
.ral-filter { display: grid; gap: 6px; max-width: 420px; margin: 0 0 16px; }
.ral-filter label { font-weight: 700; font-size: 14px; }
.ral-filter input {
  width: 100%; font: inherit; font-size: 16px; padding: 12px 14px; color: var(--ink);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 12px;
}
.ral-filter input:focus { border-color: var(--mint-deep); }
.ral-empty { margin: 8px 0 0; padding: 20px; border-radius: 12px; background: var(--surface); border: 1px dashed var(--line); color: var(--muted); }
.ral-fx-note { margin: -4px 0 16px; max-width: 72ch; color: var(--muted); font-size: 14.5px; }
/* yapışkan atlama çubuğu üst çubuğun altında; scroll-padding-top = üst çubuk + çubuk, değişkenlerinden (JavaScript açıkken
   main.js → initCovers ölçer, buradaki değer JavaScript'siz yedek): klavyeyle odaklanan kart çubukların altında kalmaz;
   atlanan ailenin başlığının üstündeki boşluk .ral-family'nin scroll-margin-top'u (önce scroll-padding-top 146px = üst çubuk +
   çubuk + 15; README → "Renkler (RAL)") */
:root:has(.ral-jump-bar) { scroll-padding-top: calc(var(--header-h) + var(--header-line) + var(--ral-bar-h)); }
.ral-jump-bar { position: sticky; top: calc(var(--header-h) + var(--header-line)); z-index: 40; min-height: var(--ral-bar-h); padding: 8px 0; background: var(--bg); }
/* çerez bandı açıkken yapışmaz (kullanıcı kararı 2026-10-22): yatay telefonda 2× yazıda üst çubuk + aile çubuğu + bant arasında kart
   bağlantısına yer kalmıyordu; bant kapanınca yine yapışır (main.js → initCovers payı iki anda da günceller) */
.consent-open .ral-jump-bar { position: static; }
.ral-jump-bar .tabs { padding: 0; margin: 0; }
/* kenarlık 1 px (.tabs a'da 1,5): WebKit 1,5 px'i Retina'da yuvarlamıyor, çubuk piksel oranı 2'de 1 px uzuyordu (--ral-bar-h'yi aşıyordu);
   piksel oranı 1'de iki motor 1,5'i zaten 1 px çiziyor (görünüm aynı; kullanıcı kararı 2026-10-22) */
.ral-jump a { padding: 8px 14px; font-size: 14.5px; border-width: 1px; }
.ral-families { margin-top: 20px; }
/* aile çipiyle gelince başlığın üstünde çubuktan sonraki boşluk (main.js → initRalSpy'ın çizgisi de bunu sayar) */
.ral-family { margin-top: 32px; scroll-margin-top: 15px; }
.ral-family:first-child { margin-top: 0; }
.ral-family h3 { display: flex; align-items: center; gap: 10px; font-size: 20px; margin-bottom: 12px; }
.ral-fam-count, .ral-fx { font-size: 12px; font-weight: 700; letter-spacing: 0; padding: 1px 8px; border-radius: 999px; background: var(--mint-soft); color: var(--mint-deeper); }
/* kart: yazılar örneğin altında (her renkte aynı kontrast) */
.ral-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.ral-item {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden; font-size: 14px; line-height: 1.35;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px;
}
.ral-sw { display: block; aspect-ratio: 3 / 2; background: var(--c); border-bottom: 1px solid var(--line); }
.ral-code { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 10px 12px 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.ral-fx { font-size: 11.5px; line-height: 1.5; padding: 0 7px; }
.ral-name { padding: 2px 12px 0; font-weight: 600; overflow-wrap: anywhere; }
.ral-noname { color: var(--muted); }
.ral-wa {
  display: flex; align-items: center; min-height: 40px; margin-top: auto; padding: 6px 12px 10px;
  font-size: 13.5px; font-weight: 700; color: var(--mint-deep); text-underline-offset: 3px;
}
.ral-wa:hover { color: var(--mint-deeper); }
/* odak halkası bağlantının içinde (dal erisim, kullanıcı kararı 2026-10-22): kartın overflow: hidden'ı dışarıdaki halkanın yanlarını ve
   altını kırpıyordu; Shift+Tab'la gelinen bağlantı aile çubuğunun hemen altına inince üst çizgisi de çubuğun altında kalıyor, görünen
   halka kalmıyordu. İçeride dört yanı görünür, yazıya değmez (iç boşluk ≥ 6 px), kart zeminine karşı ≥ 3:1 (qa/tests/ral-halka.spec.mjs) */
.ral-wa:focus-visible { outline-offset: -3px; }

/* /renkler: istenen RAL kodu → WhatsApp (tam RAL tablosu kapalı; README → Renkler (RAL)) */
.ral-ask { padding-top: 0; }
.ral-ask-box {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 20px 40px; align-items: start;
  padding: 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.ral-ask-text h2 { font-size: clamp(20px, 2.4vw, 24px); margin-bottom: 6px; }
.ral-ask-text p { color: var(--muted); margin: 0; }
.ral-ask-text a { color: var(--mint-deep); font-weight: 700; }
.ral-ask-form label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.ral-ask-row { display: flex; gap: 10px; }
.ral-ask-row input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 14px; color: var(--ink);
  background: var(--bg); border: 1.5px solid var(--line); border-radius: 12px;
}
.ral-ask-row input:focus { border-color: var(--mint-deep); }
.ral-ask-row input[aria-invalid="true"] { border-color: #b3261e; }
.ral-ask-row .btn { padding: 12px 20px; }
.ral-ask-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.ral-ask-error { margin: 6px 0 0; font-size: 14px; font-weight: 700; color: #b3261e; }
.ral-ask-error:empty { display: none; }
.ral-links { padding-bottom: 56px; }
.ral-links .see-also { margin-top: 0; }

/* ---------- projeler (/projeler ve ana sayfadaki üç proje) ----------
   Fotoğraflı proje: görsel (4:3) + yazı; fotoğrafsız proje: yazı kartı (üstte ince çizgi). */
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.project-card { display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); }
.section-alt .project-card { background: var(--bg); }
.project-media { aspect-ratio: 4 / 3; background: var(--media-bg); }
.project-media picture { display: block; width: 100%; height: 100%; }
.project-media img { width: 100%; height: 100%; object-fit: cover; }
.project-body { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px 24px; }
.project-cat { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--mint-deep); }
.project-company { font-size: 20px; margin: 0; }
.project-title { margin: 0; font-weight: 700; }
.project-desc { margin: 0; color: var(--muted); font-size: 15px; }
.project-products { margin: 6px 0 0; font-size: 14px; }
.project-products a { color: var(--mint-deep); font-weight: 700; }
/* ---------- Yaptıklarımız: fotoğraf ızgarası (/projeler "Projelerden" / "Üretimden" ve ana sayfa) ----------
   Küçük görsel 4:5 kutuda (ortadan), büyük görsele bağlantı; başlık ve ilgili model bağlantının altında */
.works-section { padding: 16px 0 40px; }
.works-section h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 6px; }
.works-lead { margin: 0 0 18px; color: var(--muted); }
.work-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 16px; }
.work-grid-home { grid-template-columns: repeat(6, minmax(0, 1fr)); }   /* ana sayfa: tek sıra */
/* min-width 0: WebKit pencere daralınca .work-link'in aspect-ratio'su yüzünden ızgara öğesinin en küçük enini eski genişlikte
   tutuyor, ızgara taşıyordu (1366 → 320 px'te 72 px; dal erisim, qa/tests/kucultme.spec.mjs) */
.work { display: flex; flex-direction: column; gap: 8px; margin: 0; min-width: 0; }
.work-link { display: block; aspect-ratio: 4 / 5; border-radius: var(--radius); overflow: hidden; background: var(--media-bg); }
.work-link picture { display: block; width: 100%; height: 100%; }
.work-link img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.work-link:hover img { transform: scale(1.03); }
.work-link:focus-visible { outline-offset: 4px; }
/* görüntüleyici hazırken (main.js → <html class="lb-on">) büyük görsel açan bağlantılarda büyüteç imleci */
.lb-on .work-link, .lb-on .kls-link, .lb-on .pd-media-link { cursor: zoom-in; }
.work figcaption { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; line-height: 1.35; }
.work-cap { font-weight: 600; }
.work-models { font-size: 13.5px; color: var(--muted); }
.work-models a { color: var(--mint-deep); font-weight: 700; }
/* uzun galeri (dal yayin-oncesi-3; saksi.mjs → moreGallery, main.js → initGalleryMore): ilk 8 öğe görünür, fazlası HTML'de gizli
   ("Tümünü göster"e kadar; görselleri geç yüklenir, gizliyken inmez). JavaScript kapalıyken sayfanın <noscript> stili hepsini
   gösterir. Adresin #hedefi gizli öğedeyse galeri açılır, öğe yapışkan üst çubuğun altında kalmaz (kökteki scroll-padding-top +
   scroll-margin) */
.is-collapsed > .work-grid > :nth-child(n + 9), .is-collapsed > .kls-grid > :nth-child(n + 9) { display: none; }
.g-more-row { margin: 24px 0 0; text-align: center; }
.g-wrap .work { scroll-margin-top: 23px; }   /* üst çubuktan sonraki boşluk (önce 96px) */

/* ---------- klasik seri (kategorisinin sayfasında alt bölüm): model başına kart; katalog görselleri ve etiketteki ölçüler ---------- */
.kls-section { margin-top: 48px; scroll-margin-top: 23px; }
.kls-section > h2 { font-size: clamp(24px, 2.8vw, 32px); margin: 0 0 8px; }
.kls-lead { margin: 0 0 20px; color: var(--muted); max-width: 640px; }
.kls-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.kls { display: flex; flex-direction: column; gap: 12px; padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); scroll-margin-top: 23px; }
.kls-title { margin: 0; font-size: 17px; line-height: 1.3; letter-spacing: normal; }
.kls-figs { flex: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); align-content: start; gap: 10px; }
.kls-fig { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.kls-fig picture { display: block; aspect-ratio: 1; border-radius: 10px; overflow: hidden; background: #fff; }
.kls-link { display: block; border-radius: 10px; position: relative; }   /* görsel kendisine bağlantı (görüntüleyici) */
/* büyüteç rozeti (dokunmatik ekranda imleç yok): büyük görsel açan görselin sağ alt köşesinde; mutlak konumlu (düzen kayması
   yok), tıklamayı bağlantıya bırakır; ürün çoğunlukla ortada ve tabana doğru dar (köşe boş) */
.zoom-badge {
  position: absolute; right: 10px; bottom: 10px; width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255, 255, 255, .92); color: var(--ink);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .2); pointer-events: none;
}
.zoom-badge-top { bottom: auto; top: 10px; }   /* sahne görselinde ürün sağ alta uzanıyorsa (saksi.mjs → ZOOM_TOP) */
.kls-link .zoom-badge { right: 6px; bottom: 6px; width: 28px; height: 28px; }
.kls-link .zoom-badge svg { width: 15px; height: 15px; }
.kls-fig img { width: 100%; height: 100%; object-fit: contain; }
.kls-fig figcaption { display: flex; flex-direction: column; font-size: 13.5px; line-height: 1.35; color: var(--muted); }
.kls-wa { align-self: flex-start; padding: 10px 16px; }

/* /projeler: fotoğraflı projeler (varsa), referans listesi, çağrı, Instagram */
.projects-section, .refs-section { padding: 16px 0 56px; }
.projects-section h2, .refs-section h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 18px; }
.page-head p a { color: var(--mint-deep); font-weight: 700; }
.ig-more { padding: 0 0 72px; }
.ig-more .container { display: flex; align-items: center; justify-content: center; gap: 12px 16px; flex-wrap: wrap; text-align: center; }
.ig-more p { margin: 0; font-weight: 600; }

/* ---------- "Ayrıca bakın" (ürün ↔ form ↔ renkler ↔ projeler iç bağlantıları): metin ayracı yok, bağlantılar satıra kırılan
   flex dizisinde, aralık gap'ten (satır sonunda ayraç kalamaz) ---------- */
.see-also { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 28px 0 0; font-size: 14.5px; color: var(--muted); }
.see-also > span:first-child { font-weight: 600; }
.see-also a { color: var(--mint-deep); font-weight: 700; text-decoration: none; padding: 6px 0; }
.see-also a:hover { text-decoration: underline; }

/* ---------- Instagram bandı (ana sayfa, ürün ızgarasının hemen altında): kompakt; fotoğraf yalnızca HOME.instagram doluysa ---------- */
.section.ig-section { padding-top: 0; }   /* ürün ızgarasının alt boşluğu yeter (.section'ın dar ekran kuralından da güçlü) */
.ig-band {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px 20px; align-items: center;
  padding: 22px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
}
.ig-mark { width: 52px; height: 52px; border-radius: 14px; background: var(--ig-grad); color: #fff; display: flex; align-items: center; justify-content: center; }
.ig-mark svg { width: 26px; height: 26px; }
.ig-text h2 { font-size: clamp(20px, 2.2vw, 24px); margin: 0 0 2px; }
.ig-text p { color: var(--muted); margin: 0; }
.ig-text strong { color: var(--ink); }
.ig-follow svg { width: 18px; height: 18px; }
.ig-photos { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; border-radius: 12px; }
.ig-photo { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 12px; background: var(--tone, var(--media-bg)); }
.ig-photo picture { display: block; width: 100%; height: 100%; }
.ig-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.ig-photos:hover .ig-photo img { transform: scale(1.03); }

/* ---------- çerez bandı (yalnızca SITE.gtmId doluyken sayfada) ----------
   En çok ekranın %70'i ("Ayarlar" açıkken): metin ve seçenekler kendi içinde kayar, düğmeler hep görünür. JavaScript açıkken
   main.js → initCovers bandı ayrıca "ekran - üst pay - bir odak hedefi" boyuna sınırlar (sayfada en az bir odak hedefi kadar şerit
   kalsın); o kadar küçülemezse bant kiplidir (dal erisim). */
.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80; background: var(--surface); border-top: 1px solid var(--line);
  box-shadow: 0 -8px 32px rgba(23, 32, 28, .12); padding: 18px 0 calc(18px + var(--safe-b));
  display: flex; flex-direction: column; max-height: 70vh; max-height: 70svh;
}
.consent-box { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; min-height: 0; }
/* metin ve seçenekler yalnızca taşınca kayar (main.js → initCovers: .fit-scroll; kaydırılabilir katmanın yazısını Chromium başka
   çiziyor, mint-heykel'de ölçüldü) */
.consent-text { min-height: 0; max-height: 100%; }
.fit-scroll { overflow-y: auto; overscroll-behavior: contain; }
.consent-title { font-size: 17px; margin: 0 0 4px; letter-spacing: normal; }
.consent-text p { margin: 0; font-size: 14.5px; color: var(--muted); }
.consent-text a { color: var(--mint-deep); font-weight: 700; }
.consent-options { border: 0; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.consent-options label { display: flex; gap: 10px; align-items: baseline; font-weight: 700; font-size: 14.5px; }
.consent-options small { font-weight: 500; color: var(--muted); }
.consent-options input { width: 18px; height: 18px; accent-color: var(--mint-deep); }
.consent-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
/* üç düğme eşit ağırlıkta (KVKK: reddetmek kabul etmek kadar kolay) */
.consent-btn { min-width: 120px; padding: 12px 18px; background: var(--surface); color: var(--ink); border-color: var(--ink); }
/* Düğmeler her hâlde aynı boyda (dal erisim, kullanıcı kararı 2026-10-22: 2× yazıda 360 px'te "Kabul et" ekrandan taşıyordu, geniş
   ekranda düğmeler etiketleri kadar farklı genişlikteydi). Etiketler bugünkü düzene sığıyorsa (1×'te her genişlikte) yukarıdaki esnek
   kutu olduğu gibi kalır; sığmıyorsa main.js → initConsent .consent-actions'a "grid" sınıfını koyar: eşit sütunlu ızgara, geniş
   ekranda tek satır (en geniş düğme kadar), ≤ 860 px'te aşağıda sığdığı kadar sütun, sığmayan düğme alt satıra iner. Etiket tek
   satırda kalır; yalnızca tek düğme bile sığmıyorsa kırılır */
.consent-actions.grid { display: grid; grid-template-columns: repeat(var(--consent-n, 3), minmax(var(--consent-btn, 120px), 1fr)); justify-content: end; }
.consent-actions.grid .consent-btn { white-space: normal; overflow-wrap: anywhere; }
.consent-btn:hover { background: var(--ink); color: #fff; }
.footer-link { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.footer-link:hover { color: var(--mint); }

/* ---------- gizlilik politikası (/gizlilik, taslak doldurulunca) ---------- */
.legal { padding: 0 0 72px; }
.legal-body { max-width: 780px; }
.legal-body h1 { font-size: clamp(30px, 4vw, 44px); font-weight: 800; }
.legal-body h2 { font-size: 22px; margin-top: 32px; }
.legal-body p, .legal-body li { color: var(--muted); }

/* ---------- 404 ---------- */
.notfound { text-align: center; padding: 96px 0 120px; }
.notfound-code {
  display: block; font-size: clamp(96px, 18vw, 168px); font-weight: 800; line-height: 1;
  letter-spacing: -0.05em; color: #4b9c77; margin-bottom: 12px;   /* logo yeşilinin koyusu: zeminle 3,18:1 (büyük metin ≥ 3:1) */
}
.notfound h1 { font-size: clamp(30px, 4.4vw, 48px); font-weight: 800; }
.notfound p { color: var(--muted); font-size: 17px; max-width: 520px; margin: 0 auto 32px; }
.notfound .hero-actions { justify-content: center; }

/* ---------- footer ---------- */
.footer { background: var(--ink); color: #b9c4be; padding: 64px 0 28px; margin-top: 0; font-size: 15px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer h2 { color: #fff; font-size: 15px; margin: 0 0 16px; line-height: 1.6; letter-spacing: normal; }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.footer a { text-decoration: none; color: #b9c4be; }
.footer a:hover { color: var(--mint); }
.footer .logo { color: #fff; margin-bottom: 16px; }
.footer .logo span { color: #9aa7a0; }
/* tam logo (yazısı siyah: koyu altbilgide görünsün diye beyaz levhada; rengi değiştirilmez). 132 px: "Mint Dizayn" ≈ 10,5 px */
.footer-logo { margin: 20px 0 0; }
.footer-logo img { display: block; width: 136px; height: 132px; box-sizing: content-box; padding: 12px; background: #fff; border-radius: 12px; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px;
  /* Sabit WhatsApp butonu (sağdan 20px + 60px) için yer aç; geniş ekranda gerek kalmaz */
  padding-right: calc(clamp(0px, calc(76px + (var(--max) - 100vw) / 2), 76px) + var(--safe-r));
}

/* ---------- sabit WhatsApp butonu ---------- */
.wa-float {
  position: fixed; right: calc(20px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); z-index: 60; width: 60px; height: 60px; border-radius: 50%;
  background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(31, 168, 85, .4); transition: transform .2s;
}
.wa-float:hover { transform: scale(1.06); }
.wa-float svg { width: 30px; height: 30px; }

/* mobil alt çubuk (ara / whatsapp) */
.mobile-bar { display: none; }
/* Çerez bandı açıkken (main.js → initConsent: <html class="consent-open">) alttaki katmanlar gizli: bandın altında kalıyorlardı,
   görünmeden Tab'la odaklanıyorlardı. "Hızlı iletişim" bölgesi de gizli (boş kalmasın); üst çubuk ve kaymayan üst şerit görünür.
   JavaScript kapalıyken sınıf yok (dal erisim; mint-heykel 6c361ff) */
.consent-open :is(.quick-contact, .wa-float, .mobile-bar) { visibility: hidden; }

:focus-visible { outline: 3px solid var(--mint-deep); outline-offset: 2px; }

/* ---------- responsive ---------- */
@media (min-width: 900px) {
  .topbar-hours { display: inline; }
  /* 1×'te şerit her genişlikte tek satır. Büyük yazıda (2×) kırılırsa: saat grubunun içinde parçaların arasında ("Pazartesi –"
     / "Cumartesi:" / "09:00 – 18:00") ya da gruplar arasında "·"dan sonra; önek ("Antalya … imalatı ·") ve telefon numarası
     kırılmaz. Hiçbir satır "·" ya da "–" ile başlamaz, saat aralığı bölünmez */
  .topbar .container > span:first-child, .topbar .container > a { white-space: nowrap; }
  .topbar .hours-part { white-space: normal; }
}
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
  .features, .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .ral-featured { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ral-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .work-grid, .work-grid-home { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kls-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* üst çubuğun menüsü (menü düğmesi, açılır menü, Instagram karesi) 940 px'e kadar: masaüstü menüsü 940 px'ten (dal isim-logo,
   kullanıcı kararı 2026-11-11: tam logo ve Montserrat'la yazılan ad 33 px daha geniş, 900 px'te menü taşıyordu; pay 933 px'ten
   ≥ 16). Dal isim-logo'ya kadar üst şeridin saatleriyle aynı kırılımda (900 px) başlıyordu. Dal erisim'e kadar 860 px'ti: 861–863 px'te menünün son düğmesi (WhatsApp) 863,6 px'te bitiyor, sayfa
   1–3 px yatay taşıyordu; 900 px'te masaüstü menüsüne kalan en dar pay qa/tests/menu-payi.spec.mjs'te ≥ 16 px (kullanıcı kararı
   2026-10-22). Sayfanın geri kalan düzeni 860 px kırılımında */
@media (max-width: 939px) {
  .nav-toggle { display: inline-flex; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch;
    background: var(--bg); border-bottom: 1px solid var(--line); padding: 12px max(20px, var(--safe-r)) 20px max(20px, var(--safe-l)); gap: 4px;
    display: none;
  }
  .nav.open { display: flex; }
  .nav a { padding: 14px 16px; }
  .header-ig { display: inline-flex; }
  .nav .btn { margin: 8px 0 0; }
  .nav .btn-ig { order: -1; margin: 0 0 8px; }   /* açık menünün ilk satırı, tam genişlik */
}
/* masaüstü (940 px'ten; dal isim-logo, kullanıcı kararları 2026-11-11): "Saksı Evi" logonun içindeki "Mint Dizayn" satırıyla aynı
   taban çizgisinde. Logonun yazısının taban çizgisi kaynakta logo yüksekliğinin 212 / 505'i (72 px'te 30,23 px); ortalanan adın
   taban çizgisi, satırın üstünden 1,1368 em (Montserrat, satır yüksekliği 1,6; 22 px'te 25,01 px): ad çubuğun üstüne hizalanır, üst
   boşluğu 30,23 px − 1,1368 em (22 px'te 5,22 px; qa/tests/ust-cubuk.spec.mjs iki hâlde ölçer). Yazı büyütülünce (2×) boşluk 0'da
   durur: ad çubuğun içinde kalır, çubuk içeriğiyle büyür (bugünkü gibi) */
@media (min-width: 940px) {
  .header .logo { align-items: flex-start; }
  .header .logo b, .header .logo > span { margin-top: max(0px, calc(30.23px - 1.1368em)); }
}
/* büyük üst çubuk (sayfanın en üstünde; 1067 px'ten — büyük hâlde menü payı ≥ 16 px olan en dar genişlik: 1067 px'te 16,5, 1066'da 15,5 —,
   yalnızca JavaScript açıkken): logo ve ad aynı oranda büyük (72 → 124 px: logonun "Mint Dizayn" satırının kutusu, y'nin kuyruğu dahil,
   10 CSS px; ölçüt kaynakta: satır 41 / logo 505 px), menü dikeyde ortada. Kaydırınca (main.js → initHeaderSize: IntersectionObserver
   gözcüleri, eşikte titremesin diye iki eşik) bugünkü 72 px'lik çubuk. Düzen kaymaz: büyük hâlde çubuğun kutusu 125 px (alt dolgu 52),
   kompaktta 73 px + 52 px alt boşluk; çubuğun düzendeki payı ikisinde de 125, sonraki içerik yerinden oynamaz; çubuğun içindekiler
   transform'la büyür (düzen değişmez). Katman yardımcısı (initCovers) çubuğun gerçek kutusunu ölçer (ResizeObserver). Hareketsizlik
   isteyende geçiş yok (aşağıdaki prefers-reduced-motion kuralı). JavaScript kapalıyken (scripting: none) bugünkü çubuk, boşluksuz */
@media (min-width: 1067px) and (scripting: enabled) {
  :root { scroll-padding-top: calc(var(--header-h) + var(--header-line) + 52px); }
  .header { padding-bottom: 52px; }
  .header .logo { transform-origin: 0 0; transform: scale(1.72222); transition: transform .2s ease; }
  .header .nav { transform: translateY(26px); transition: transform .2s ease; }
  .header-compact .header { padding-bottom: 0; margin-bottom: 52px; }
  .header-compact .header .logo, .header-compact .header .nav { transform: none; }
}
@media (max-width: 860px) {
  .section { padding: 56px 0; }
  .section-cta { padding-top: 0; }
  .features-section { padding: 48px 0; }
  .hero { padding: 28px 0 20px; }
  .hero .container, .about, .contact, .pd, .cta { grid-template-columns: 1fr; }
  .hero-media { display: none; }
  .ref-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .ref-grid > .ref:nth-child(n):nth-last-child(n) { grid-column: auto / span 2; }   /* masaüstünün son satır kuralları (aynı özgüllük) geçmez */
  .ref-grid > .ref:nth-child(2n + 1):last-child { grid-column: 2 / span 2; }
  .pd { grid-template-areas: "title" "gallery" "info"; grid-template-rows: auto; row-gap: 20px; padding-top: 4px; }
  .pd-title h1 { margin-bottom: 0; }
  .pd-gallery { position: static; }
  /* ad, fotoğraf ve ölçü seçici birbirine yakın: fotoğraf en çok ekranın ~%56'sı, kutuda ürünün arka plan tonuyla */
  .pd-media { width: 100%; max-height: 56vh; max-height: 56svh; }
  .pd-media img { object-fit: contain; }
  /* kategori sayfası: kapak girişin altında, geniş beyaz kutuda */
  .cat-head-grid { grid-template-columns: minmax(0, 1fr); }
  .cat-cover { aspect-ratio: 16 / 10; max-height: 260px; }
  .ral-ask-box { grid-template-columns: 1fr; }
  .ral-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* çerez bandı telefonda: başlık yalnızca ekran okuyucuda, kısa metin, üç düğme tek satırda eşit */
  .consent { padding: 12px 0 calc(12px + var(--safe-b)); }
  .consent-box { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px; }
  .consent-title { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .consent-text p, .consent-options label { font-size: 13.5px; line-height: 1.45; }
  .consent-options { margin-top: 10px; gap: 6px; }
  .consent-actions { justify-content: stretch; gap: 8px; flex-wrap: nowrap; }
  .consent-btn { flex: 1 1 0; min-width: 0; min-height: 44px; padding: 8px 6px; font-size: 14.5px; }
  /* etiketler tek satırda sığmıyorsa (main.js → initConsent): sütun en az en geniş düğmenin tek satırlık eni (--consent-btn), sığdığı
     kadar sütun, hepsi eşit */
  .consent-actions.grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--consent-btn, 0px)), 1fr)); }
  .cta { padding: 36px 28px; }
  .cta-actions { justify-content: flex-start; }
  .about { gap: 32px; }
}
@media (max-width: 600px) {
  /* alt çubuğun payı (sayfanın sonunda boşluk, Tab'la gelinen öğe çubuğun altında kalmaz): JavaScript'siz yedek, çubuğun
     değişkeninden; JavaScript açıkken main.js → initCovers ölçer (yazı büyütülünce çubuk da büyür) */
  :root { scroll-padding-bottom: calc(var(--mobile-bar-h) + var(--safe-b)); }
  body { padding-bottom: calc(var(--mobile-bar-h) + var(--safe-b)); }
  .grid { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .project-grid { grid-template-columns: 1fr; gap: 14px; }
  .work-grid, .work-grid-home { grid-template-columns: 1fr 1fr; gap: 18px 12px; }
  .work figcaption { font-size: 13.5px; }
  .kls-grid { grid-template-columns: 1fr; gap: 14px; }
  .kls { padding: 14px; }
  .cat-row { grid-template-columns: 96px minmax(0, 1fr); gap: 14px; padding: 10px; }
  .cat-row-intro { font-size: 14px; }
  .cat-row-meta { font-size: 13.5px; }
  .cat-block { padding-bottom: 32px; }
  .cat-block + .cat-block { padding-top: 32px; }
  .cat-block-head { grid-template-columns: 96px minmax(0, 1fr); gap: 16px; margin-bottom: 18px; }
  .cat-block-text p { font-size: 15px; }
  .kls-section { margin-top: 36px; }
  .ral-featured { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 10px; }
  .ral-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ral-code { padding: 8px 10px 0; }
  .ral-name { padding: 2px 10px 0; }
  .ral-wa { padding: 6px 10px 8px; font-size: 13px; }
  .ig-band { grid-template-columns: auto minmax(0, 1fr); padding: 18px; }
  .ral-ask-box { padding: 20px; }
  .ral-ask-row { flex-direction: column; }
  .ig-follow { grid-column: 1 / -1; }
  .ig-photos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .ig-photo:nth-child(n+4) { display: none; }
  .map-ph { min-height: 300px; }
  .card { gap: 8px; }
  .card-title { font-size: 15px; }
  .card-meta { font-size: 13px; }
  .hero h1 { font-size: 32px; }
  .hero-lead { font-size: 16px; margin-bottom: 18px; }
  .features, .steps { grid-template-columns: 1fr; }
  .feature { padding: 16px; }
  .page-head { padding: 24px 0 12px; }
  /* ölçü tablosu dar ekrana sığsın: başlıklar ve ölçü adı iki satıra inebilir */
  .dims { font-size: 14px; }
  .dims th, .dims td { padding: 8px; }
  .dims thead th, .dims tbody th { white-space: normal; }
  .footer-grid { grid-template-columns: 1fr; gap: 32px; }
  .pd-actions { grid-template-columns: 1fr; }
  /* ürün sayfası: ad, fotoğraf ve seçici arasındaki boşluklar dar ekranda sıkı */
  .breadcrumb-top { padding-top: 16px; }
  .pd { row-gap: 14px; }
  .pd-thumbs { margin-top: 10px; gap: 10px; }
  .pd-caption { min-height: 2.8em; }
  .pd-thumb { width: 68px; font-size: 12px; }
  .hero-actions .btn { flex: 1; }
  .topbar .container > span:first-child { display: none; }
  .topbar .container { justify-content: center; }
  .contact-card { padding: 24px; }
  .ref-grid { gap: 12px; }
  .ref { min-height: 80px; padding: 12px 10px; }
  .ref-text span { font-size: 15px; }
  .wa-float { display: none; }
  .footer-bottom { padding-right: 0; }
  .mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    min-height: calc(var(--mobile-bar-h) + var(--safe-b));
    padding: 10px max(12px, var(--safe-r)) calc(10px + var(--safe-b)) max(12px, var(--safe-l)); background: rgba(255,255,255,.96);
    border-top: 1px solid var(--line); backdrop-filter: blur(10px);
  }
  /* kenarlık 1 px (.btn'de 1,5, saydam): .ral-jump a gibi, çubuk her piksel oranında --mobile-bar-h boyunda */
  .mobile-bar .btn { padding: 12px; border-width: 1px; }
}
/* 360 px'ten dar, yalnızca iletişim kartının saat satırı (kullanıcı kararı 2026-10-20): ikon + "Çalışma saatleri" üstte,
   saatler altta kartın tam genişliğinde. Büyük yazıda (2×) saat aralığı ("09:00 – 18:00", 206 px) ikonun yanındaki sütuna
   320–354 px'te sığmıyordu, kart sütunundan genişliyordu. Yalnızca CSS: öğeler ve okuma sırası aynı (display: contents ile
   etiket ve saatler satırın ızgarasına geçer); öbür satırlar değişmez. qa/tests/saat-satirlari.spec.mjs */
@media (max-width: 359px) {
  .contact-list li:has(> div > [data-hours]) { row-gap: 10px; }
  .contact-list li:has(> div > [data-hours]) > div { display: contents; }
  .contact-list li:has(> div > [data-hours]) small { align-self: center; }
  .contact-list li:has(> div > [data-hours]) [data-hours] { grid-column: 1 / -1; }
}
/* ---------- kısa yatay ekran (yan çevrilmiş telefon) ----------
   Yalnızca yüksekliği 500px'ten az yatay ekranlar; dikey telefon, tablet ve masaüstü etkilenmez. */
@media (orientation: landscape) and (max-height: 500px) {
  /* üst şerit gizli, header ince: ekranın daha azını kaplasın */
  .topbar { display: none; }
  :root { --header-h: 56px; }
  .logo { font-size: 19px; }
  .logo-img { width: 58px; height: 56px; }
  .nav-toggle { width: 40px; height: 40px; }
  .nav a { padding-top: 10px; padding-bottom: 10px; }
  /* ana sayfa: başlık küçük, butonlar ilk ekranda */
  .hero { padding: 20px 0 40px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero h1 { font-size: 30px; margin-bottom: 10px; }
  .hero-lead { font-size: 16px; margin-bottom: 16px; }
  /* 404 */
  .notfound { padding: 20px 0 40px; }
  .notfound-code { font-size: 64px; margin-bottom: 4px; }
  .notfound h1 { font-size: 26px; }
  .notfound p { font-size: 15px; margin-bottom: 16px; }
  /* kategori sayfaları: başlık sıkı; sabit WhatsApp butonu küçük ve sekmelerin altında kalır */
  .page-head { padding: 16px 0 8px; }
  .page-head h1 { font-size: 28px; margin-bottom: 6px; }
  .page-head p { font-size: 15px; }
  .breadcrumb { margin-bottom: 8px; }
  .wa-float { width: 48px; height: 48px; right: calc(12px + var(--safe-r)); bottom: calc(12px + var(--safe-b)); }
  .wa-float svg { width: 24px; height: 24px; }
  /* ürün sayfası: görsel kutusu ekran yüksekliğine sığar, bilgiler yanında */
  .breadcrumb-top { padding-top: 12px; }
  .pd { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "gallery title" "gallery info"; gap: 0 28px; padding: 8px 0 40px; }
  .pd-gallery { position: static; }
  .pd-media { width: calc((100vh - 124px - var(--safe-b)) * var(--ar, 1)); width: calc((100svh - 124px - var(--safe-b)) * var(--ar, 1)); max-height: none; }
  .pd-thumbs { display: none; }
  .pd-gallery.has-colors .pd-thumbs, .pd-gallery.has-photos .pd-thumbs { display: flex; }   /* renk örnekleri, uygulama fotoğrafları ve ana görsele dönüş görünür kalır */
  .pd-title h1 { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}