/* ============================================================
   ÖZKAN RULMAN . tasarım sistemi v53 "sistem disiplini"

   Tez: slop tek tek kötü öğe değil, karar verilmemişliktir.
   v47'de 15 punto (kesirli dahil), 19 clamp eğrisi, 6 ağırlık,
   10+ harf aralığı ve üç ayrı gri hue ailesi vardı. Hepsi karara
   bağlandı. Ayırt edici olan basamak sayısı değil, kararlılık.

   TİPOGRAFİ
   . Archivo tek aile (değişken, kendi sunucumuzda).
     IBM Plex Mono YALNIZ parça kodu / ölçü / telefon / antet.
   . Ölçek 8 basamak, kesirli değer yok: --t-2xs .. --t-4xl.
     Bütün font-size tanımları tokena bağlı.
   . Ağırlık: 500 / 600 / 700. Tek kullanımlık 650-750-800 gitti.
   . Harf aralığı dört rol: display / head / body / label.
   . BÜYÜK HARF yalnız 15px altı mikro etiket ve wordmark'ta.
     Başlıklar cümle düzeninde (SLOP-DENETIMI S7 kararı).

   RENK
   . Marka #0000FE ultramarin. Müşteri kararı 05.09.2026:
     SKF görsel sürekliliği korunsun. Değer SKF'nin canlı
     sitesinden yeniden doğrulandı, birebir aynı.
   . Nötrler TEK AİLE, hue ~215 (çelik). Önceden üç aile
     karışıyordu. Griler artık markanın izini taşıyor.
   . Cyan yok, gradient süsü yok, gölge minimum.

   BOŞLUK
   . 4pt tabanlı --sp-1..8; bölüm dolgusu --sec-pad / --sec-pad-s.
   . Yarıçap 4px kontrol / 14px kapsayıcı: keskin endüstriyel
     köşe bilinçli karar.

   Ayrıntı ve gerekçeler: README.md "Tasarım sistemi" bölümü.
   ============================================================ */

:root {
  /* v10; SKF paleti (skf.com/tr'den canlı ölçüldü):
     ultramarin #0000FE · siyah · beyaz · #F6F6F6/#EFEFEF griler · #718096 çelik */
  color-scheme: light;
  --canvas: #FFFFFF;
  --bg-alt: #F6F7F8;
  --surface: #FFFFFF;
  --glass-edge: rgba(255, 255, 255, 0.85);  /* camsı yüzey kenarı */
  --surface-rgb: 255, 255, 255;    /* camsı yüzeylerin taban rengi (karanlık modda değişir) */
  /* mühendislik kâğıdı: ürün render zemini */
  --paper-1: #FBFCFD;
  --paper-2: #EEF0F3;
  --paper-3: #E5E8EC;
  --paper-grid: rgba(0, 0, 254, 0.05);
  --ink: #151719;
  --graphite: #101114;
  --navy: #0B0C0F;                 /* SKF koyu anları siyah ailesinden */
  --steel: #5A687C;               /* beyaz üstünde 5.67:1 (v53 nötr birleştirmesi); AA (v13: #718096 4.0:1 idi) */
  --steel-soft: #99A4B2;
  --dim-guide: #6C7C93;            /* ölçü kılavuz çizgisi: beyazda 3.65:1 (WCAG 1.4.11) */
  --line: #E2E5E9;
  --line-dark: rgba(255, 255, 255, 0.14);
  --brand: #0000FE;                /* SKF ultramarin */
  --brand-solid: #0000FE;          /* üstünde beyaz metin olan dolu yüzeyler */
  --brand-deep: #0000B4;
  --brand-dark: #0000C8;
  --brand-glow: #5050FF;
  --brand-wash: #ECECFF;
  --steel-ink: #5A687C;            /* açık zeminde küçük punto ikincil metin (AA) */
  /* hareket: yerleşik ease eğrileri zayıf; expo-out (giren/çıkan) + inout (yer değiştiren) */
  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-inout: cubic-bezier(0.645, 0.045, 0.355, 1);
  --wa: #147A3D;
  --wa-dark: #0F6332;
  --ok: #1F8A4C;
  /* ---- BOŞLUK: 4pt tabanlı, adı olan basamaklar (v48) -------
     Bölüm dolguları büyütüldü: sayfanın nefes alması gerekiyordu,
     ama katalog sitesi olduğu için pazarlama sayfası ölçüsüne
     (160px+) çıkılmadı; parçayı bulma işi yavaşlamamalı. */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;  --sp-6: 32px;  --sp-7: 48px;  --sp-8: 64px;
  --sec-pad:   clamp(64px, 8vw, 112px);
  --sec-pad-s: clamp(44px, 5vw, 72px);
  --radius-sm: 4px;               /* v15: SKF köşeliliği; butonlar/inputlar keskinleşti */
  --radius-md: 10px;
  --radius-lg: 14px;
  --container: 1320px;
  /* ---- TİPOGRAFİ ÖLÇEĞİ (v48) --------------------------------
     Sekiz basamak, kesirli değer yok. Önceki hal 9-19px arasında
     15 ayrı boyuttu (13.5 / 14.5 / 15.5 / 16.5 dahil); aralarında
     oran olmadığı için sistem değil, tek tek elle ayar gibi
     duruyordu. Ayırt edici olan basamak sayısı değil, kararlılık. */
  --t-2xs: 12px;   /* mono mikro etiket */
  --t-xs:  13px;   /* meta, dipnot */
  --t-sm:  15px;   /* ikincil gövde, kart açıklaması */
  --t-md:  16px;   /* gövde */
  --t-lg:  18px;   /* giriş cümlesi */
  --t-xl:  21px;   /* kart başlığı, h4 */
  --t-2xl: 26px;   /* h3 */
  --t-3xl: clamp(30px, 3.4vw, 42px);   /* h2 */
  --t-4xl: clamp(40px, 5.4vw, 68px);   /* h1 / display */

  /* ---- HARF ARALIĞI: dört rol, on keyfi değer değil ---------- */
  --ls-display: -0.022em;
  --ls-head:    -0.012em;
  --ls-body:     0;
  --ls-label:    0.06em;

  /* ---- SATIR YÜKSEKLİĞİ ------------------------------------- */
  --lh-display: 1.03;
  --lh-head:    1.14;
  --lh-body:    1.62;

  --f-sans: "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", "SF Mono", Consolas, monospace;
  --shadow-1: 0 1px 2px rgba(16, 16, 20, 0.06);
  --shadow-glass: 0 8px 32px rgba(0, 0, 140, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --shadow-glass-d: 0 12px 40px rgba(0, 0, 60, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.22);
  /* ultramarin an degradesi */
  --grad-hero:
    radial-gradient(820px 480px at 84% 8%, rgba(90, 90, 255, 0.5), transparent 58%),
    radial-gradient(700px 520px at 4% 100%, rgba(0, 0, 96, 0.8), transparent 62%),
    linear-gradient(163deg, #0000E6 0%, #0000FE 48%, #0000B8 100%);
}

/* ============================================================
   KARANLIK MOD (v44)
   Varsayılan HER ZAMAN açık temadır; işletim sistemi koyu modda
   olsa bile site beyaz açılır. Koyu tema yalnız ziyaretçi
   başlıktaki düğmeye bastığında devreye girer ve tercihi
   localStorage'da saklanır. Yalnız token yeniden tanımlanır,
   hiçbir bileşen kuralına dokunulmaz.

   Kontrast (zemin #0D0F12 üstünde, hesapla doğrulandı):
     --ink   #E9ECF0 -> 16.8:1     --steel #99A4B2 -> 7.55:1
     --brand #7B7BFF -> 4.60:1     --brand-solid üstünde beyaz -> 6.45:1
   ============================================================ */

:root[data-theme="dark"] {
  color-scheme: dark;
  --canvas: #0D0F12;
  --bg-alt: #14171A;
  --surface: #14171A;
  --surface-rgb: 20, 23, 26;
  --glass-edge: rgba(255, 255, 255, 0.08);
  --ink: #E9ECF0;
  --graphite: #08090C;
  --navy: #050609;
  --steel: #99A4B2;
  --steel-ink: #99A4B2;
  --steel-soft: #6B7684;
  --dim-guide: #8D99A8;
  --line: rgba(255, 255, 255, 0.11);
  --line-dark: rgba(255, 255, 255, 0.16);
  --brand: #7B7BFF;
  --brand-solid: #3B3BFF;
  --brand-deep: #9B9BFF;
  --brand-dark: #5A5AE8;
  --brand-glow: #A0A0FF;
  --brand-wash: rgba(123, 123, 255, 0.16);
  --ok: #38B26A;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5);
  --paper-1: #181B20;
  --paper-2: #131619;
  --paper-3: #0E1114;
  --paper-grid: rgba(123, 123, 255, 0.08);
  --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ---------- liquid glass yüzeyleri ---------- */
.glass {
  background: rgba(var(--surface-rgb), 0.66);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--shadow-glass);
}
.glass-dark {
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: var(--shadow-glass-d);
  color: #FFFFFF;
}

/* ---------- taban ---------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}
body {
  font-family: var(--f-sans);
  font-size: var(--t-md);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
/* <picture> yalnız kaynak seçimi yapar, düzende kutu üretmez */
picture { display: contents; }
/* display:grid/flex taşıyan öğeler [hidden]'ı ezmesin (filtrelerin gizlemesi buna bağlı) */
[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.wrap { max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 48px); }

::selection { background: var(--brand-solid); color: #FFFFFF; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
/* koyu/mavi zeminlerde mavi halka görünmez; beyaza döner */
.hero.on-dark :focus-visible, .action-panel :focus-visible, .site-foot :focus-visible, .steps-band :focus-visible, .assist-band :focus-visible { outline-color: #FFFFFF; }
p, .lead, .desc { text-wrap: pretty; }

.skip {
  position: absolute; left: -9999px; top: 10px; z-index: 100;
  background: var(--brand-solid); color: #FFFFFF; padding: 12px 18px;
  font-size: var(--t-sm); font-weight: 600; border-radius: var(--radius-sm);
}
.skip:focus-visible { left: 10px; }

/* ---------- tipografi (ölçek: denetimdeki tablo) ---------- */
/* SKF dili: display başlıklar BÜYÜK HARF, sıkı ve ağır; gövde sakin */
h1, h2, h3 { text-wrap: balance; }
/* Başlıklar cümle düzeninde. HTML zaten "Ürün grupları" diye yazıyordu;
   büyük harfe çeviren CSS'ti. Bu proje bu kararı v3'te bir kez almış
   (SLOP-DENETIMI-100 S7: "her şeyin büyük harf olması karmaşa hissinin
   ana kaynağı"), sonra geri gelmiş. Yeniden alındı. */
.h1 { font-size: var(--t-4xl); font-weight: 700; line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.h2 { font-size: var(--t-3xl); font-weight: 700; line-height: var(--lh-head); letter-spacing: var(--ls-head); }
.h3 { font-size: var(--t-2xl); font-weight: 600; line-height: 1.22; letter-spacing: var(--ls-head); }
.lead { font-size: var(--t-lg); color: var(--steel); max-width: 58ch; }
.meta { font-size: var(--t-xs); font-weight: 500; color: var(--steel); }
.label { font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--brand); display: block; margin-bottom: 10px; }
.sku { font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500; color: var(--steel); letter-spacing: var(--ls-body); }
.mark { color: var(--brand); }
.on-dark { background: var(--graphite); color: #FFFFFF; }
.on-dark .lead, .on-dark .meta { color: var(--steel-soft); }

/* ---------- bağlantı & buton ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-size: var(--t-md); font-weight: 600; padding: 14px 24px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s var(--ease-out), box-shadow 0.15s var(--ease-out);
}
.btn svg { width: 17px; height: 17px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.985); transition-duration: 0.08s; }
.btn-brand { background: var(--brand-solid); color: #FFFFFF; }
.btn-brand:hover { background: var(--brand-dark); box-shadow: 0 8px 20px rgba(0, 0, 180, 0.22); }
.btn-wa { background: var(--wa); color: #FFFFFF; }
.btn-wa:hover { background: var(--wa-dark); box-shadow: 0 8px 20px rgba(15, 99, 50, 0.24); }
@media (prefers-reduced-motion: reduce) {
  .btn, .btn:hover, .btn:active { transform: none; }
}
.btn-light { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-light:hover { border-color: var(--steel); }
.btn-ghost { border-color: var(--line-dark); color: #FFFFFF; }
.btn-ghost:hover { border-color: #FFFFFF; }
/* cam buton; koyu/mavi zemin üzeri ikincil eylem */
.btn-glass {
  color: #FFFFFF;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.38);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.btn-glass:hover { background: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.6); }

.arrow-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-md); font-weight: 600; color: var(--brand);
}
.arrow-link::after { content: "→"; transition: transform 0.16s var(--ease-out); }
.arrow-link:hover { color: var(--brand-dark); }
.arrow-link:hover::after { transform: translateX(4px); }
/* ikon: WhatsApp simgesi ya da numara yokken main.js'in koyduğu telefon simgesi.
   v57: boyut kuralı yoktu; svg 43px açılıp etiketi alt satıra itiyordu
   (katalogdaki "Arayıp sorun", 16 satırın hepsinde). */
.arrow-link svg { width: 16px; height: 16px; flex: none; }
.on-dark .arrow-link { color: #FFFFFF; }

/* ---------- yardımcı üst şerit (SKF utility bar) ---------- */
.utilbar { background: var(--surface); border-bottom: 1px solid var(--line); font-size: var(--t-xs); color: var(--steel); }
.utilbar .wrap { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding-block: 7px; }
.utilbar .u-right { display: flex; align-items: center; gap: 14px; }
.utilbar .sep { width: 1px; height: 12px; background: var(--line); }
.utilbar a { font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.utilbar a:hover { color: var(--brand); }
@media (max-width: 900px) {
  .utilbar { display: none; }
}

/* ---------- header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 60;
  background: rgba(var(--surface-rgb), 0.62);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border-bottom: 1px solid var(--glass-edge);
  box-shadow: 0 1px 0 rgba(16, 21, 28, 0.05);
  transition: box-shadow 0.2s ease, background 0.2s ease;
}
.site-head.scrolled { background: rgba(var(--surface-rgb), 0.78); box-shadow: 0 10px 32px rgba(6, 32, 92, 0.1); }
.site-head .wrap { display: flex; align-items: center; gap: clamp(14px, 2vw, 28px); height: 72px; }

/* logo: bilezik işareti + sözcük; NOT: gerçek vektörel logo gelince değiştirilecek */
.logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: var(--t-lg); letter-spacing: var(--ls-body); color: var(--ink); flex: none; }
.logo svg { width: 30px; height: 30px; flex: none; }
.logo b { font-weight: 700; }
.logo span { color: var(--brand); font-weight: 700; }
.site-foot .logo { color: #FFFFFF; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav a { position: relative; font-size: var(--t-md); font-weight: 500; color: var(--steel); padding: 10px 12px; border-radius: var(--radius-sm); white-space: nowrap; }
.nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px;
  border-radius: 2px; background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform 0.18s var(--ease-out);
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(0.4); background: var(--steel-soft); }
.nav a[aria-current] { color: var(--brand); font-weight: 600; }
.nav a[aria-current]::after { transform: scaleX(1); background: var(--brand); }
@media (prefers-reduced-motion: reduce) {
  .nav a::after { transition: none; }
}

.head-search { margin-left: auto; display: flex; }
.head-search input {
  width: clamp(170px, 18vw, 250px);
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 14px;
}
.head-search input { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.head-search input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.head-cta { display: flex; align-items: center; gap: 10px; flex: none; }
.head-cta .tel-link { font-weight: 600; font-size: var(--t-sm); color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.head-cta .tel-link:hover { color: var(--brand); }
.head-cta .btn { padding: 11px 18px; font-size: var(--t-sm); }

.nav-burger {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  flex: 0 0 44px; min-width: 44px; width: 44px; height: 44px;
  cursor: pointer; place-items: center;
}
.nav-burger svg { width: 20px; height: 20px; stroke: var(--ink); }

/* 5 menü öğesi + arama + CTA dar başlıkta sığmıyor: arama en son gelir.
   v48'de eşik 1279'du; tipografi ölçeği değişince başlık 1280'de 3px
   taşıyordu. Ölçülüp 1339'a çekildi. */
@media (max-width: 1339px) {
  .head-search { display: none; }
}
@media (max-width: 1060px) {
  .nav a { padding: 10px 9px; font-size: var(--t-sm); }
  .site-head .wrap { gap: 12px; }
}
@media (max-width: 980px) {
  .nav {
    position: absolute; top: 72px; left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    background: var(--surface); border-bottom: 1px solid var(--line);
    padding: 8px 20px 16px;
  }
  html.js .nav { display: none; }
  html.js .nav.open { display: flex; }
  .nav a { padding: 13px 8px; border-bottom: 1px solid var(--line); font-size: var(--t-md); }
  .nav-burger { display: grid; margin-left: auto; }
  .head-cta { margin-left: 0; }
  .head-cta .tel-link { display: none; }
}
@media (max-width: 420px) {
  .head-cta .btn-wa { display: none; }
}

/* ---------- bölüm ritmi ---------- */
.sec { padding-block: var(--sec-pad); }
.sec--s { padding-block: var(--sec-pad-s); }
.sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 28px; margin-bottom: clamp(26px, 3.5vw, 44px); }
.sec-head > div { max-width: 640px; }
.sec-head .lead { margin-top: 10px; }
.bg-alt { background: var(--bg-alt); }

/* sayfa başlığı: gradient bant değil, kanvas + divider */
.page-head { padding-block: clamp(40px, 5vw, 64px) clamp(28px, 3.5vw, 44px); border-bottom: 1px solid var(--line); }
.page-head .crumb { font-size: var(--t-sm); font-weight: 500; color: var(--steel); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.page-head .crumb a:hover { color: var(--brand); }
.page-head .lead { margin-top: 12px; }

/* ---------- HERO (split, poster mavisi + cam) ---------- */
.hero.on-dark { position: relative; background: var(--grad-hero); overflow: hidden; }
.hero-fx { position: absolute; inset: 0; pointer-events: none; }
.hero-fx .arc { position: absolute; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.14); }
.hero-fx .arc-1 { width: 720px; height: 720px; right: -220px; top: -260px; }
.hero-fx .arc-2 { width: 460px; height: 460px; right: -60px; bottom: -230px; border-color: rgba(255, 255, 255, 0.1); }
.hero-fx .wordmark {
  position: absolute; right: -20px; bottom: 4px;
  font-weight: 700; font-size: clamp(90px, 13vw, 190px); line-height: 1;
  letter-spacing: var(--ls-head); text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.14);
}
@keyframes glow-drift { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.9; } }
.hero-fx .glow {
  position: absolute; width: 560px; height: 560px; right: 4%; top: 8%;
  background: radial-gradient(circle, rgba(120, 120, 255, 0.38), transparent 65%);
  animation: glow-drift 9s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .hero-fx .glow { animation: none; }
}
.hero .wrap {
  position: relative;
  display: grid; grid-template-columns: 1.02fr 0.98fr;
  gap: clamp(32px, 4.5vw, 64px); align-items: center;
  padding-block: clamp(52px, 6.5vw, 96px);
}
.hero-kicker { font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--ls-label); text-transform: uppercase; color: rgba(230, 240, 255, 0.85); margin-bottom: 16px; }
.hero h1 { margin-bottom: 18px; }
.hero.on-dark h1 { color: #FFFFFF; }
/* poster dili: dolu beyaz başlık + kontur vurgu kelimesi ("PA 1200LK" kalıbı) */
.hero.on-dark h1 .mark { color: transparent; -webkit-text-stroke: 2px #FFFFFF; }
.hero.on-dark .lead { color: rgba(226, 237, 255, 0.88); }
.hero .lead { margin-bottom: 28px; }
.hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.hero-note { margin-top: 22px; font-size: var(--t-sm); color: var(--steel); max-width: 52ch; }
.hero-note b { color: var(--ink); font-weight: 600; }
.hero.on-dark .hero-note { color: rgba(210, 226, 255, 0.75); }
.hero.on-dark .hero-note b { color: #FFFFFF; }

@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
[data-load] { animation: rise 0.48s var(--ease-out) both; animation-delay: var(--ld, 0s); }
@media (prefers-reduced-motion: reduce) {
  [data-load] { animation: none; }
}

/* medya kartı: çerçevesiz, görsel + altyazı */

@media (max-width: 980px) {
  .hero .wrap { grid-template-columns: 1fr; }
}

/* ---------- parça bulucu: hero kenarına taşan cam panel ---------- */
.finder { position: relative; z-index: 5; }
.finder-float { margin-top: -34px; padding-inline: clamp(20px, 4vw, 48px); max-width: var(--container); margin-inline: auto; }
.finder .panel {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px;
  padding: 16px clamp(16px, 2.5vw, 26px);
  border-radius: var(--radius-lg);
  background: rgba(var(--surface-rgb), 0.7);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid rgba(var(--surface-rgb), 0.9);
  box-shadow: var(--shadow-glass);
}
.finder label { font-size: var(--t-sm); font-weight: 600; white-space: nowrap; }
.finder input {
  flex: 1; min-width: 220px;
  font-family: var(--f-mono); font-size: var(--t-sm); color: var(--ink);
  background: rgba(var(--surface-rgb), 0.85); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 16px;
}
.finder input { transition: border-color 0.15s ease, box-shadow 0.15s ease; }
.finder input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.finder .btn { padding: 13px 20px; font-size: var(--t-sm); }
@media (max-width: 760px) {
  .finder-float { margin-top: -24px; }
}
.finder-flat { padding-inline: clamp(20px, 4vw, 48px); max-width: var(--container); margin-inline: auto; margin-block: 20px 6px; }

/* ---------- asimetrik kategori alanı ---------- */
.cat-feature { display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line); overflow: hidden; transition: box-shadow 0.18s ease; }
.cat-feature:hover { box-shadow: 0 14px 40px rgba(22, 25, 29, 0.1); }
.cat-feature .img { padding: clamp(22px, 3vw, 40px); display: grid; place-items: center; }
/* v31: tam ultramarin sahne bütçeyi zorluyordu (hero + şerit + panel zaten mavi/koyu).
   Kanıt panellerindeki mühendislik kâğıdı diline çevrildi: açık zemin, mavi ızgara. */
.media-blue {
  background:
    repeating-linear-gradient(0deg, var(--paper-grid) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(90deg, var(--paper-grid) 0 1px, transparent 1px 26px),
    linear-gradient(168deg, var(--paper-1) 0%, var(--paper-2) 58%, var(--paper-3) 100%);
  border-bottom: 1px solid var(--line);
}
.media-blue svg ellipse { display: none; } /* koyu gölge zemin üstünde leke yapıyor */
.cat-feature .img svg { width: min(100%, 360px); transition: transform 0.25s var(--ease-out); }
.cat-feature:hover .img svg { transform: scale(1.02); }
/* mavi sahnede gerçek ürün fotoğrafı */
.cat-feature .img img {
  width: min(76%, 320px); height: auto;
  filter: drop-shadow(0 20px 34px rgba(11, 13, 16, 0.2));
  transition: transform 0.25s var(--ease-out);
}
.cat-feature:hover .img img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .cat-feature .img img { transition: none; }
  .cat-feature:hover .img img { transform: none; }
}
.cat-feature .body { padding: 4px clamp(20px, 3vw, 32px) clamp(20px, 3vw, 28px); display: grid; gap: 6px; }
.cat-feature .meta { color: var(--brand); font-weight: 600; }
.cat-feature h3 { font-size: var(--t-2xl); font-weight: 600; }
.cat-feature .pop { font-size: var(--t-sm); color: var(--steel); }
.cat-feature .pop .sku { color: var(--ink); }
.cat-feature .arrow-link { margin-top: 8px; }

/* ---------- kanıt bölümü: medya + bilgi satırları ---------- */
.proof { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(28px, 4vw, 64px); align-items: center; }
.proof-media { border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-alt); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(16, 16, 20, 0.08); }
.proof-media svg { width: 100%; }
/* render kahramanı: ürün cutout + teknik ölçü katmanı + mühendislik kâğıdı dokusu */
.proof-media .stage {
  position: relative;
  background:
    repeating-linear-gradient(0deg, var(--paper-grid) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, var(--paper-grid) 0 1px, transparent 1px 24px),
    linear-gradient(180deg, var(--paper-1), var(--paper-2));
}
/* sahne: sabit oran + ortalanmış ürün; uzun/geniş her ürün aynı nefesle oturur */
.proof-media .stage { display: grid; place-items: center; aspect-ratio: 5 / 4; padding: 56px 30px 34px; }
.proof-media .stage img {
  width: auto; max-width: 72%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 18px 30px rgba(11, 13, 16, 0.18));
}
.proof-media .dim {
  position: absolute; top: 18px; font-family: var(--f-mono); font-size: var(--t-xs);
  letter-spacing: var(--ls-body); pointer-events: none;
}
.proof-media .dim-l { left: 20px; color: #16191D; display: inline-flex; align-items: center; gap: 10px; }
.proof-media .dim-l i {
  width: 62px; height: 1px; background: var(--brand); position: relative; opacity: 0.7;
}
.proof-media .dim-l i::before, .proof-media .dim-l i::after {
  content: ""; position: absolute; top: -5px; width: 1px; height: 11px; background: var(--brand);
}
.proof-media .dim-l i::before { left: 0; }
.proof-media .dim-l i::after { right: 0; }
.proof-media .dim-r { right: 20px; color: var(--steel); }
@media (max-width: 560px) {
  .proof-media .dim-r { display: none; }
}
.proof-media .cap {
  padding: 14px 18px; font-size: var(--t-xs); color: var(--steel);
  background: var(--surface);
  border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 12px;
}
.info-rows { display: flex; flex-direction: column; }
.info-row { padding: 18px 2px; border-top: 1px solid var(--line); display: grid; gap: 3px; }
.info-row:last-child { border-bottom: 1px solid var(--line); }
.info-row h3 { font-size: var(--t-lg); font-weight: 600; }
.info-row p { font-size: var(--t-sm); color: var(--steel); max-width: 60ch; }
.info-row .sku { font-size: var(--t-xs); }
@media (max-width: 900px) {
  .proof { grid-template-columns: 1fr; }
}

/* ---------- süreç: ultramarin şerit (sayfanın ikinci tepesi) ---------- */
.steps-band { position: relative; overflow: hidden; background: var(--grad-hero); color: #FFFFFF; padding-block: clamp(56px, 7vw, 96px); }
/* hero ark imzasının devamı; sayfalar arası marka jesti */
.steps-band::after {
  content: ""; position: absolute; width: 540px; height: 540px; right: -170px; top: -280px;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.13); pointer-events: none;
}
.steps-band .wrap { position: relative; z-index: 1; }
.steps-band .label { color: rgba(230, 240, 255, 0.85); }
.steps-band h2 {
  font-size: var(--t-3xl); font-weight: 700;
  letter-spacing: var(--ls-head);
  margin-bottom: clamp(28px, 3.5vw, 44px);
}
.steps-line { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); }
.steps-line li + li { border-left: 1px solid rgba(255, 255, 255, 0.16); padding-left: clamp(20px, 2.5vw, 30px); }
/* hero "STOKTA" kontur dilinin devamı: dev outline rakamlar */
.steps-line b {
  display: block; font-size: clamp(44px, 5vw, 64px); font-weight: 700; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.9);
  font-variant-numeric: tabular-nums; margin-bottom: 14px;
}
.steps-line h3 { font-size: var(--t-xl); font-weight: 600; margin-bottom: 4px; }
.steps-line p { font-size: var(--t-sm); line-height: var(--lh-body); color: rgba(255, 255, 255, 0.75); max-width: 34ch; }
@media (max-width: 820px) {
  .steps-band { padding-block: 56px; }
  .steps-line { grid-template-columns: 1fr; gap: 24px; }
  .steps-line li + li { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: 22px; }
  .steps-line b { font-size: 40px; margin-bottom: 10px; }
}

/* ---------- aksiyon paneli (koyu grafit + ultramarin parıltı) ---------- */
.action-panel {
  position: relative; overflow: hidden;
  background:
    radial-gradient(620px 380px at 90% -10%, rgba(64, 64, 255, 0.38), transparent 62%),
    linear-gradient(160deg, #14141A 0%, #0B0B0D 100%);
  color: #FFFFFF;
  border-radius: var(--radius-lg); padding: clamp(30px, 4.5vw, 56px);
  display: grid; grid-template-columns: 1.4fr auto; gap: 24px; align-items: center;
  box-shadow: 0 24px 60px rgba(8, 10, 22, 0.35);
}
.action-panel::before {
  content: ""; position: absolute; width: 480px; height: 480px; right: -140px; top: -220px;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.16); pointer-events: none;
}
.action-panel h2 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: var(--ls-head); margin-bottom: 8px; }
.action-panel p { color: rgba(226, 237, 255, 0.85); max-width: 56ch; font-size: var(--t-md); }
.action-panel .btn { font-size: var(--t-md); }
@media (max-width: 820px) {
  .action-panel { grid-template-columns: 1fr; }
}

/* ---------- iletişim modülü (cam) ---------- */
.contact-module {
  background: rgba(var(--surface-rgb), 0.66);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px);
  box-shadow: var(--shadow-glass);
}
.contact-module .cta-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 8px; }
/* numara yokken WhatsApp butonu zaten "Ara"ya döner; ikinci ara butonu gizlenir */
html.no-wa .cta-pair { grid-template-columns: 1fr; }
html.no-wa .cta-pair .btn-brand { display: none; }
.contact-rows { display: flex; flex-direction: column; }
.contact-rows > * { display: flex; align-items: center; gap: 14px; padding: 15px 2px; border-top: 1px solid var(--line); font-size: var(--t-md); }
.contact-rows > *:first-child { border-top: 0; }
.contact-rows svg { width: 20px; height: 20px; stroke: var(--steel); flex: none; }
.contact-rows .grow { flex: 1; }
.contact-rows .num { font-weight: 600; font-variant-numeric: tabular-nums; }
.contact-rows a:hover .num, .contact-rows a:hover .grow { color: var(--brand); }
.contact-rows .ext { color: var(--brand); font-weight: 600; white-space: nowrap; font-size: var(--t-sm); }
.contact-rows .meta { font-size: var(--t-sm); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--steel-soft); flex: none; }
.status-dot.open { background: var(--ok); }
.map-shell { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--line); }
.map-shell iframe { display: block; width: 100%; height: 100%; min-height: 320px; border: 0; filter: grayscale(0.35) saturate(1.05) contrast(1.02); }
.contact-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(22px, 3vw, 44px); align-items: stretch; }
@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; }
  .map-shell iframe { min-height: 280px; }
  .contact-module .cta-pair { grid-template-columns: 1fr; }
}

/* ---------- katalog sayfası: filtre + satırlar ---------- */
.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: clamp(28px, 4vw, 56px); align-items: start; }
.cat-aside { position: sticky; top: 92px; display: grid; gap: 4px; }
.cat-aside .t { font-size: var(--t-sm); font-weight: 600; color: var(--steel); margin-bottom: 6px; }
.chip-btn {
  text-align: left; font-size: var(--t-md); font-weight: 500; color: var(--steel);
  background: none; border: 0; border-left: 2px solid transparent;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s var(--ease-out);
  padding: 9px 12px; cursor: pointer; border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.chip-btn:hover { color: var(--ink); background: var(--bg-alt); }
.chip-btn:active { transform: scale(0.97); }
@media (prefers-reduced-motion: reduce) {
  .chip-btn, .chip-btn:active { transform: none; transition: background 0.15s ease, color 0.15s ease; }
}
.chip-btn[aria-pressed="true"] { color: var(--brand); font-weight: 600; border-left-color: var(--brand); background: var(--brand-wash); }
.cat-count { font-size: var(--t-xs); color: var(--steel); margin-top: 10px; padding-left: 12px; }

.cat-group + .cat-group { margin-top: clamp(30px, 4vw, 44px); }
.cat-group > h2 { font-size: var(--t-sm); font-weight: 600; color: var(--steel); letter-spacing: var(--ls-label); text-transform: uppercase; padding-bottom: 10px; }
.cat-rows {
  display: flex; flex-direction: column;
  /* satır artık görünüm alanına değil, kendi sütununa göre biçim alıyor:
     kenar çubuğu açıkken 950px'de sütun 630px'e iniyor ve satır daralmalı. */
  container-type: inline-size;
  container-name: katalog;
}
.cat-row {
  display: grid; grid-template-columns: 96px 1fr auto; gap: 8px 22px; align-items: center;
  padding: 20px 8px; margin-inline: -6px; border-top: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: background 0.18s ease;
}
.cat-row:hover, .cat-row:focus-within { background: var(--paper-1); }
.cat-rows .cat-row:last-child { border-bottom: 1px solid var(--line); }
.cat-row .thumb {
  position: relative;
  width: 96px; height: 96px; border-radius: var(--radius-md);
  background: var(--paper-2); display: grid; place-items: center; overflow: hidden;
}
.cat-row .thumb svg { width: 52px; height: 52px; stroke: var(--ink); opacity: 0.9; }
/* şeffaf ürün cutout'ları: kırpma değil sığdırma.
   v55: görsel grid öğesiyken height:100% çözülmüyordu; dikey şişeler kutudan
   taşıp alttan kırpılıyordu (katkı 144px, madeni yağ 51px). Mutlak konum +
   object-fit ile kutunun kesin 96x96 ölçüsüne bağlandı. */
.cat-row .thumb img { position: absolute; inset: 0; width: 100%; height: 100%;
  box-sizing: border-box; padding: 8px; object-fit: contain; display: block;
  transition: transform 0.22s var(--ease-out); }
.cat-row:hover .thumb img, .cat-row:focus-within .thumb img { transform: scale(1.045); }
.cat-row h3 { font-size: var(--t-xl); font-weight: 600; transition: color 0.16s ease; }
.cat-row:hover h3, .cat-row:focus-within h3 { color: var(--brand); }
.cat-row .desc { font-size: var(--t-sm); color: var(--steel-ink); max-width: 58ch; margin-top: 2px; }
.cat-row .pop { font-size: var(--t-sm); color: var(--steel-ink); margin-top: 6px; }
.cat-row .pop .sku { color: var(--ink); }
.cat-row .acts { display: grid; gap: 8px; justify-items: start; align-content: start; padding-top: 6px; }
@media (prefers-reduced-motion: reduce) {
  .cat-row .thumb img { transition: none; }
  .cat-row:hover .thumb img, .cat-row:focus-within .thumb img { transform: none; }
}
.cat-row .acts .arrow-link { font-size: var(--t-sm); white-space: nowrap; }
.row-tel { font-size: var(--t-sm); font-weight: 500; color: var(--steel); display: inline-flex; align-items: center; gap: 7px; padding: 8px 0; }
.row-tel svg { width: 15px; height: 15px; stroke: currentColor; }
.row-tel:hover { color: var(--brand); }
html.no-wa .row-tel { display: none; }
.cat-empty { border: 1px dashed var(--line); border-radius: var(--radius-md); padding: 26px; color: var(--steel); text-align: center; margin-top: 20px; }
.cat-empty b { color: var(--ink); }
@media (max-width: 900px) {
  .catalog-layout { grid-template-columns: 1fr; }
  .cat-aside { position: static; display: flex; flex-wrap: wrap; gap: 8px; }
  .cat-aside .t { width: 100%; }
  .chip-btn { border: 1px solid var(--line); border-radius: 99px; padding: 11px 18px; font-size: var(--t-sm); }
  .chip-btn[aria-pressed="true"] { border-color: var(--brand); }
  .cat-count { width: 100%; padding-left: 0; }
}
@container katalog (max-width: 640px) {
  .cat-row { grid-template-columns: 72px 1fr; }
  .cat-row .thumb { width: 72px; height: 72px; }
  .cat-row .thumb svg { width: 40px; height: 40px; }
  .cat-row .acts { grid-column: 2; justify-items: start; }
}
/* container query desteklemeyen eski tarayıcılar için eski davranış */
@supports not (container-type: inline-size) {
  @media (max-width: 700px) {
    .cat-row { grid-template-columns: 72px 1fr; }
    .cat-row .thumb { width: 72px; height: 72px; }
    .cat-row .thumb svg { width: 40px; height: 40px; }
    .cat-row .acts { grid-column: 2; justify-items: start; }
  }
}

/* ---------- hakkımızda çapası: kuruluş yılı ---------- */
.since { margin-bottom: 20px; }
.since b {
  display: block; font-size: clamp(64px, 9vw, 104px); font-weight: 700; line-height: 0.95;
  letter-spacing: var(--ls-display); color: var(--brand); font-variant-numeric: tabular-nums;
}
.since span {
  display: block; margin-top: 8px; font-size: var(--t-sm); font-weight: 600;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--steel);
}

/* ---------- sektör listesi ---------- */

/* ---------- footer ---------- */
.site-foot { background: var(--navy); color: var(--steel-soft); border-top: 3px solid var(--brand); padding-block: 48px 32px; margin-top: clamp(40px, 6vw, 80px); }
.foot-grid { display: grid; grid-template-columns: 1.3fr 0.85fr 1fr 1.1fr; gap: 32px; margin-bottom: 36px; }
.utilbar .meta .status-dot, .foot-list .status-dot { display: inline-block; margin-right: 5px; vertical-align: 1px; }
.site-foot .logo { margin-bottom: 12px; }
.site-foot p { font-size: var(--t-sm); max-width: 34ch; }
.foot-h { font-size: var(--t-xs); font-weight: 600; color: rgba(139, 150, 163, 0.75); margin-bottom: 10px; }
.foot-list li { margin-bottom: 7px; font-size: var(--t-sm); }
.foot-list a:hover { color: #FFFFFF; }
.foot-base { border-top: 1px solid var(--line-dark); padding-top: 18px; display: flex; justify-content: space-between; gap: 16px; font-size: var(--t-xs); }
@media (max-width: 820px) {
  .foot-grid { grid-template-columns: 1fr; gap: 24px; }
  .foot-base { flex-direction: column; }
}

/* ---------- mobil alt bar ---------- */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  display: none; grid-template-columns: 1fr 1fr; gap: 1px;
  background: rgba(var(--surface-rgb), 0.55);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border-top: 1px solid rgba(255, 255, 255, 0.8);
  box-shadow: 0 -8px 28px rgba(6, 32, 92, 0.12);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobilebar a {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-size: var(--t-sm); font-weight: 600; padding: 15px 10px;
  background: transparent; color: var(--ink);
}
.mobilebar a svg { width: 17px; height: 17px; flex: none; }
.mobilebar .mb-wa { background: var(--wa); color: #FFFFFF; }
html.no-wa .mobilebar .mb-wa { background: var(--brand-solid); }
@media (max-width: 760px) {
  .mobilebar { display: grid; }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
  .site-foot { padding-bottom: 24px; }
}

/* ---------- 404 ---------- */

/* ---------- baskı ---------- */
@media print {
  /* ekranda işe yarayan ama kâğıtta yeri olmayanlar */
  .site-head, .utilbar, .mobilebar, .finder, .nav-burger, .head-cta,
  .brandline, .map-shell, .hero-fx, .head-mark, .foot-mark,
  .action-panel, .assist-band, .skip { display: none !important; }

  /* koyu ve renkli şeritler kâğıtta mürekkep yakıyordu: hepsi beyaza iner */
  .on-dark, .hero, .steps-band, .proof-media, .site-foot, .b-tile.wide,
  .cat-feature .img, .media-blue, .proof-media .stage {
    background: #FFFFFF !important; background-image: none !important;
    color: #000000 !important; box-shadow: none !important;
  }
  .b-tile.wide::after, .b-tile.wide::before, .steps-band::after { display: none !important; }
  .steps-band .label, .steps-band h2, .steps-band h3, .steps-band p,
  .hero .lead, .hero-note, .hero-kicker, .hero-stats span,
  .site-foot a, .site-foot p, .site-foot h4 { color: #000000 !important; }
  .steps-line b { color: #000000 !important; -webkit-text-stroke: 0 !important; }
  .hero.on-dark h1 .mark { color: #000000 !important; -webkit-text-stroke: 0 !important; }

  body { padding-bottom: 0; background: #FFFFFF; font-size: 11pt; }
  a[href^="tel:"]::after { content: " (" attr(href) ")"; font-size: 9pt; }

  /* ölçü tablosu kâğıda basılacak asıl içerik: satırlar bölünmesin */
  .dim-row, .cat-row, .info-row, .ucp-grid li { break-inside: avoid; page-break-inside: avoid; }
  .dim-row .ask, .cat-row .acts { display: none !important; }
  .dim-rows { border-top: 1px solid #999; }
  .dim-row { border-color: #CCC !important; padding: 6px 0; }
  .tag-stok, .tag-exact { border: 1px solid #666; color: #000 !important; background: none !important; }
  h2, h3 { break-after: avoid; page-break-after: avoid; }
}

/* ================= v15; GÖRÜNÜR DÖNÜŞÜM KATMANI ================= */

/* hero teknik ızgarası: kanıt sahnesindeki mühendislik kâğıdının mavi-zemin eşleniği */
.hero-fx .gridfx {
  position: absolute; inset: 0;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 54px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 62%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, 0.35) 62%, transparent 100%);
}

/* hero kanıt-stat şeridi (Rexroth/Hoffmann dersi: sayıyla konuşan hero) */
.hero-stats {
  grid-column: 1 / -1;
  display: flex; flex-wrap: wrap; gap: 0 clamp(28px, 4vw, 56px);
  margin-top: clamp(8px, 1.6vw, 14px); padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.hero-stats > div + div { border-left: 1px solid rgba(255, 255, 255, 0.14); padding-left: clamp(28px, 4vw, 56px); }
.hero-stats b {
  display: block; font-size: var(--t-2xl); font-weight: 700;
  letter-spacing: var(--ls-head); font-variant-numeric: tabular-nums;
}
.hero-stats span { display: block; margin-top: 2px; font-size: var(--t-xs); color: rgba(210, 226, 255, 0.75); }
@media (max-width: 700px) {
  .hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
  .hero-stats > div + div { border-left: 0; padding-left: 0; }
}

/* marka akış şeridi; endüstriyel katalog klasiği; linear yalnız marquee kuralı */
.brandline { border-block: 1px solid var(--line); overflow: hidden; margin-top: 28px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.brandline .track {
  display: flex; align-items: center; width: max-content;
  padding-block: 15px; animation: brand-slide 62s linear infinite;
}
/* gap yerine marj: her yarım kendi kuyruk boşluğunu taşır → -50% dikişsiz döner */
.brandline:hover .track { animation-play-state: paused; }
/* iki tur yan yana; her tur kendi kuyruk boşluğunu taşır → -50% dikişsiz döner */
.brandline .mgrup { display: flex; align-items: center; }
.brandline .mgrup > * { margin-right: 46px; }
.brandline i { font-style: normal; color: var(--brand); font-size: var(--t-2xs); flex: none; }

/* MARKA LOGOLARI
   Hangi renkte PNG atılırsa atılsın filtre siyaha indirir; koyu temada
   beyaza çevirir. Yani dosyaların siyah olması şart değil, yalnız
   arka planı şeffaf olsun yeter.
   Dosya yoksa tarayıcı alt metnini gösterir; şerit bozulmaz, marka
   adı eskisi gibi yazıyla görünür. */
.brandline .mlogo {
  height: 26px; width: auto; max-width: 118px; object-fit: contain;
  flex: none; display: block;
  filter: brightness(0) saturate(100%);
  opacity: 0.62;
  transition: opacity 0.18s ease;
  /* dosya eksikse görünecek alt metnin biçimi */
  font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--ls-label);
  color: var(--steel); white-space: nowrap;
}
.brandline:hover .mlogo { opacity: 0.9; }
/* logosu henüz gelmemiş markalar yazıyla görünür; iki biçim aynı ağırlıkta
   dursun ki şerit karışık haldeyken de dengeli okunsun */
.brandline .mad {
  font-size: var(--t-sm); font-weight: 600; letter-spacing: var(--ls-label);
  color: var(--steel); white-space: nowrap; flex: none;
  opacity: 0.82; transition: opacity 0.18s ease;
}
.brandline:hover .mad { opacity: 1; }
:root[data-theme="dark"] .brandline .mlogo { filter: brightness(0) invert(1); opacity: 0.55; }
:root[data-theme="dark"] .brandline:hover .mlogo { opacity: 0.85; }
@media (prefers-reduced-motion: reduce) { .brandline .mlogo { transition: none; } }
@media print { .brandline { display: none; } }
@keyframes brand-slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .brandline .track { animation: none; } }

/* görselli bento katalog mozaiği (feature 2×2 + 4 karo + geniş şerit) */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.bento .cat-feature { grid-column: 1 / 3; grid-row: 1 / 3; }
.b-tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 18px 18px 14px; min-height: 224px; transition: background 0.18s ease;
}
.b-tile h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: var(--ls-head); transition: color 0.16s ease; max-width: 80%; }
.b-tile .meta { display: block; margin-top: 4px; font-size: var(--t-xs); color: var(--steel); max-width: 58%; }
/* her üründe AYNI sahne kutusu: sağ-alt çapa, contain; tutarlı görsel ağırlık */
.b-tile img {
  position: absolute; right: 12px; bottom: 10px; width: 172px; height: 120px;
  object-fit: contain; object-position: right bottom;
  filter: drop-shadow(0 10px 16px rgba(11, 13, 16, 0.14));
  transition: transform 0.25s var(--ease-out);
  transform-origin: right bottom;
}
.b-tile .go { margin-top: auto; align-self: flex-start; color: var(--steel); font-size: var(--t-xl); line-height: 1; transition: transform 0.16s var(--ease-out), color 0.16s ease; }
.b-tile:hover, .b-tile:focus-visible { background: var(--paper-1); }
.b-tile:hover h3, .b-tile:focus-visible h3 { color: var(--brand); }
.b-tile:hover img, .b-tile:focus-visible img { transform: scale(1.06); }
.b-tile:hover .go, .b-tile:focus-visible .go { transform: translateX(3px); color: var(--brand); }
/* geniş şerit: yağ & kimyasal; ürünlerin kendi rengiyle (Castrol yeşili + kırmızı) */
/* sol yarı beyaz kart, sağ yarı yeşil ürün sahnesi; ikisi arasında yumuşak geçiş */
.b-tile.wide {
  grid-column: 1 / -1; min-height: 172px;
  padding: 26px 300px 26px 34px; justify-content: center;
  background: var(--surface);
}
.b-tile.wide::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #E4002B; z-index: 2; }
.b-tile.wide::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 2px, transparent 2px 16px),
    radial-gradient(460px 240px at 74% 50%, rgba(255, 255, 255, 0.14), transparent 72%),
    linear-gradient(101deg, #04361D 0%, #075E30 46%, #0A7C3E 100%);
  -webkit-mask-image: linear-gradient(101deg, transparent 30%, rgba(0, 0, 0, 0.28) 41%, rgba(0, 0, 0, 0.82) 50%, #000 58%);
  mask-image: linear-gradient(101deg, transparent 30%, rgba(0, 0, 0, 0.28) 41%, rgba(0, 0, 0, 0.82) 50%, #000 58%);
  transition: opacity 0.2s ease;
}
.b-tile.wide > :not(img) { position: relative; z-index: 1; }
.b-tile.wide h3 { max-width: 22ch; }
.b-tile.wide .meta { max-width: 40ch; }
.b-tile.wide .go { margin-top: 12px; }
.b-tile.wide img { z-index: 1; width: 214px; height: 152px; right: 40px; bottom: 50%; transform: translateY(50%); object-position: center; }
.b-tile.wide:hover, .b-tile.wide:focus-visible { background: #FAFBFC; }
.b-tile.wide:hover::after, .b-tile.wide:focus-visible::after { opacity: 0.92; }
.b-tile.wide:hover img, .b-tile.wide:focus-visible img { transform: translateY(50%) scale(1.05); }
@media (max-width: 980px) {
  .bento { grid-template-columns: 1fr 1fr; }
  .bento .cat-feature { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 560px) {
  /* dar ekranda kompakt satır: metin solda, ürün sağda dikey ortada; çakışma yok */
  .bento { grid-template-columns: 1fr; gap: 10px; }
  .b-tile { min-height: 0; padding: 14px 100px 14px 16px; justify-content: center; }
  .b-tile h3 { font-size: var(--t-md); max-width: none; }
  .b-tile .meta { max-width: none; }
  .b-tile .go { margin-top: 8px; }
  .b-tile img {
    width: 76px; height: 76px; right: 10px; bottom: 50%;
    transform: translateY(50%); object-position: center;
  }
  .b-tile:hover img, .b-tile:focus-visible img { transform: translateY(50%) scale(1.06); }
  .b-tile.wide { padding: 16px 120px 16px 18px; min-height: 132px; }
  .b-tile.wide img { width: 104px; height: 100px; right: 10px; }
  .b-tile.wide h3, .b-tile.wide .meta { max-width: none; }
  .b-tile.wide::after {
    -webkit-mask-image: linear-gradient(101deg, transparent 40%, rgba(0, 0, 0, 0.4) 54%, #000 68%);
    mask-image: linear-gradient(101deg, transparent 40%, rgba(0, 0, 0, 0.4) 54%, #000 68%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .b-tile img, .b-tile .go { transition: none; }
  .b-tile:hover img, .b-tile:focus-visible img { transform: none; }
}

/* bölüm index imzası; teknik katalog dili */
.label .ix {
  font-family: var(--f-mono); font-style: normal; font-weight: 500; font-size: var(--t-2xs);
  letter-spacing: var(--ls-label); color: var(--steel); margin-right: 10px; position: relative; top: -1px;
}
.steps-band .label .ix { color: rgba(230, 240, 255, 0.6); }

/* ürünler: grup başlıkları display seviyesine (15px küçük-caps → dev caps + mono sayaç) */
.cat-group > h2 {
  font-size: var(--t-2xl); font-weight: 700; text-transform: none; color: var(--ink);
  letter-spacing: var(--ls-head); padding-bottom: 12px;
  display: flex; align-items: baseline; gap: 12px;
}
.cat-group > h2 .cnt {
  font-family: var(--f-mono); font-size: var(--t-xs); font-weight: 500;
  color: var(--steel); letter-spacing: var(--ls-label);
}

/* footer kontur wordmark; hero "STOKTA" imza dilinin kapanışı */
.site-foot { position: relative; overflow: hidden; }
.site-foot .wrap { position: relative; }
.foot-mark {
  position: absolute; right: -12px; bottom: -16px; pointer-events: none; user-select: none;
  font-weight: 700; font-size: clamp(76px, 9vw, 140px); line-height: 1;
  letter-spacing: var(--ls-head); white-space: nowrap; text-transform: uppercase;
  color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.1);
}

/* ================= v16; ÜRÜNLER: PRO KATALOG PAKETİ ================= */

/* katalog kapağı: dev başlık + arka plan outline wordmark + mono stat satırı */
.page-head--catalog, .page-head--cover { position: relative; overflow: hidden; }
.page-head--catalog .wrap, .page-head--cover .wrap { position: relative; }
.page-head--catalog h1 { font-size: var(--t-4xl); letter-spacing: var(--ls-display); }
.head-mark {
  position: absolute; right: -8px; bottom: -14px; pointer-events: none; user-select: none;
  font-weight: 700; font-size: clamp(84px, 11vw, 168px); line-height: 1;
  letter-spacing: var(--ls-head); text-transform: uppercase; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px rgba(22, 22, 24, 0.055);
}
.statline {
  margin-top: 16px; font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: var(--ls-label); color: var(--steel); text-transform: uppercase;
}
.statline i { font-style: normal; color: var(--brand); margin-inline: 8px; font-size: var(--t-2xs); }

/* bulucu hızlı-deneme çipleri */
.finder-flat .panel { flex-wrap: wrap; }
.qfills { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.qfills .qt { font-size: var(--t-xs); font-weight: 600; color: var(--steel); margin-right: 2px; }
.qfill {
  font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 500; color: var(--steel-ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 12px; cursor: pointer; white-space: nowrap;
  transition: color 0.15s ease, border-color 0.15s ease, transform 0.1s var(--ease-out);
}
.qfill:hover { color: var(--brand); border-color: var(--brand); }
.qfill:active { transform: scale(0.96); }
@media (prefers-reduced-motion: reduce) { .qfill, .qfill:active { transform: none; } }

/* kategori çiplerinde adet rozetleri */
.cat-aside .chip-btn { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.chip-btn .n { font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 500; color: var(--steel); }
.chip-btn[aria-pressed="true"] .n { color: var(--brand); }
@media (max-width: 900px) {
  .cat-aside .chip-btn { display: inline-flex; gap: 8px; }
}

/* grup başlığı: brand tik + daha geniş grup arası nefes */
.cat-group > h2 { position: relative; padding-top: 14px; }
.cat-group > h2::before {
  content: ""; position: absolute; top: 0; left: 0; width: 52px; height: 3px; background: var(--brand);
}
.cat-group + .cat-group { margin-top: clamp(44px, 6vw, 72px); }

/* orta akış foto-teşhis şeridi; katalogda ikinci tepe */
.assist-band {
  position: relative; overflow: hidden;
  background: var(--grad-hero); color: #FFFFFF; border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 34px) clamp(22px, 3.5vw, 40px);
  display: flex; align-items: center; justify-content: space-between; gap: 18px 28px;
  margin-block: clamp(38px, 5vw, 60px);
  box-shadow: 0 20px 48px rgba(0, 20, 120, 0.18);
}
.assist-band::after {
  content: ""; position: absolute; width: 360px; height: 360px; right: -110px; top: -180px;
  border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, 0.16); pointer-events: none;
}
.assist-band > div { position: relative; }
.assist-band .ab-t {
  font-size: var(--t-xl); font-weight: 700;
 letter-spacing: var(--ls-head); margin-bottom: 4px;
}
.assist-band p:not(.ab-t) { font-size: var(--t-sm); line-height: var(--lh-body); color: rgba(255, 255, 255, 0.82); max-width: 52ch; }
.assist-band .btn { position: relative; flex: none; }
@media (max-width: 760px) {
  .assist-band { flex-direction: column; align-items: flex-start; }
}

/* tasarlanmış boş durum */
.cat-empty { border: 1px dashed var(--line); border-radius: var(--radius-md); padding: 34px 26px; text-align: center; }
.cat-empty svg { width: 34px; height: 34px; stroke: var(--steel); margin: 0 auto 12px; }
.cat-empty .sug { margin-top: 10px; font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--steel); }
.cat-empty .sug a { color: var(--brand); font-weight: 600; }

/* ================= v17; HAKKIMIZDA & İLETİŞİM PRO PAKETİ ================= */

/* sektör ızgarası: düz listeden numaralı hairline karolarına */
.sector-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px 32px; max-width: 980px; }
.sector-grid li { border-top: 1px solid var(--line); padding-top: 13px; }
.sector-grid .no {
  display: block; font-family: var(--f-mono); font-style: normal; font-size: var(--t-2xs);
  font-weight: 500; letter-spacing: var(--ls-label); color: var(--steel); margin-bottom: 4px;
}
.sector-grid span { font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--ls-body); }

/* çalışma saatleri şeridi: 7 gün, canlı "bugün" vurgusu */
.hours-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.hours-strip li {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 13px 10px 12px; text-align: center; background: var(--surface);
}
.hours-strip .d {
  display: block; font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 500;
  letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--steel); margin-bottom: 5px;
}
.hours-strip .t { font-size: var(--t-xs); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hours-strip li.closed .t { color: var(--steel); font-weight: 500; }
.hours-strip li.today { border-color: var(--brand); background: var(--brand-wash); }
.hours-strip li.today .d { color: var(--brand); }
.hours-note { margin-top: 14px; font-size: var(--t-sm); color: var(--steel); }
@media (max-width: 860px) {
  .hours-strip { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 480px) {
  .hours-strip { grid-template-columns: repeat(2, 1fr); }
}

/* v18 atölye fotoğraflı hero (hero--photo) v74'te kaldırıldı: dükkân fotoğrafı .hero--dukkan kullanıyor. */

/* teknik künye; fotoğraftaki rulmanın altına oturan cam çip */
.hero-shot {
  grid-column: 2; align-self: end; justify-self: end;
  padding: 13px 20px; border-radius: var(--radius-md);
  font-size: var(--t-sm); line-height: 1.45;
}
.hero-shot figcaption { display: grid; gap: 1px; }
.hero-shot .sku { color: rgba(235, 243, 255, 0.85); }

@media (max-width: 980px) {
  .hero-shot { grid-column: 1; justify-self: start; }
}


/* ================= v28; ÖLÇÜ BULUCU ================= */
.mfind { display: block; }
.mf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
/* grid öğelerinin varsayılan min-width:auto'su input'ları küçülmekten alıkoyar */
.mf-grid > * { min-width: 0; }
.mf-field { position: relative; display: block; min-width: 0; }
.mf-field input { min-width: 0; }
.mf-field > span { display: block; font-size: var(--t-xs); font-weight: 600; color: var(--steel-ink); margin-bottom: 6px; }
.mf-field > span i { font-style: italic; font-family: var(--f-mono); color: var(--brand); font-size: var(--t-2xs); }
.mf-field input {
  width: 100%; font-family: var(--f-mono); font-size: var(--t-lg); font-weight: 500; color: var(--ink);
  background: rgba(var(--surface-rgb), 0.9); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 42px 12px 14px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.mf-field input:focus-visible { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-wash); }
.mf-field em {
  position: absolute; right: 12px; bottom: 13px; font-style: normal;
  font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--steel);
}
.mf-field input::-webkit-outer-spin-button, .mf-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mf-field input[type=number] { -moz-appearance: textfield; }

.mf-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.mf-tolt { font-size: var(--t-xs); font-weight: 600; color: var(--steel-ink); }
/* v58: satır atlamıyordu; dar ekranda "Sabit bilyalı" gibi iki kelimelik çipler
   kelime ortasından bölünüyordu. Çip bütün olarak alt satıra geçsin. */
.tol-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.qfill.tol[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); background: var(--brand-wash); }
.mf-clear { margin-left: 4px; }
.mf-count { margin-left: auto; font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--steel); }

/* sonuç satırları */
.dim-rows { display: flex; flex-direction: column; }
.dim-row {
  display: grid; grid-template-columns: 108px 200px 1fr auto; gap: 6px 20px; align-items: center;
  padding: 13px 10px; margin-inline: -8px; border-top: 1px solid var(--line);
  border-radius: var(--radius-sm); transition: background 0.18s ease;
}
.dim-rows .dim-row:last-child { border-bottom: 1px solid var(--line); }
.dim-row:hover, .dim-row:focus-within { background: var(--paper-1); }
.dim-row .code { font-family: var(--f-mono); font-size: var(--t-lg); font-weight: 500; color: var(--ink); letter-spacing: var(--ls-body); }
.dim-row .dims { font-family: var(--f-mono); font-size: var(--t-sm); color: var(--steel-ink); font-variant-numeric: tabular-nums; }
.dim-row .dims i { font-style: normal; color: var(--ink); font-weight: 500; }
.dim-row .ser { font-size: var(--t-sm); color: var(--steel-ink); }
.tag-stok {
  display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 99px;
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--ls-label);
  color: var(--brand); background: var(--brand-wash);
}
.dim-row .ask { font-size: var(--t-sm); font-weight: 600; color: var(--brand); white-space: nowrap; padding: 6px 2px; }
.dim-row .ask::after { content: " →"; }
.dim-row .ask:hover { color: var(--brand-dark); }

/* mil çapı → UCP karşılığı */
.ucp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px 26px; max-width: 940px; }
.ucp-grid li { border-top: 1px solid var(--line); padding-top: 11px; }
.ucp-grid .no { display: block; font-family: var(--f-mono); font-style: normal; font-size: var(--t-2xs); color: var(--steel); margin-bottom: 3px; }
.ucp-grid span { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--ls-body); }

@media (max-width: 860px) {
  .mf-grid { grid-template-columns: repeat(2, 1fr); }
  .dim-row { grid-template-columns: 96px 1fr; gap: 4px 14px; }
  .dim-row .ser { grid-column: 2; }
  .dim-row .ask { grid-column: 2; justify-self: start; }
}
@media (max-width: 460px) {
  .mf-count { margin-left: 0; width: 100%; }
}

/* ================= v32; ölçü bulucu: teknik şema + eşleşme katmanı ================= */
.mf-main { display: grid; grid-template-columns: 1fr 300px; gap: clamp(20px, 3vw, 40px); align-items: center; }
.mf-inputs { min-width: 0; }

/* şema: net rulman görseli + üç basit ölçü etiketi; aktif ölçü ultramarine döner */
.mf-diagram { margin: 0; }
.mf-diagram svg { width: 100%; height: auto; }
.mf-diagram .balls circle { fill: url(#ballG); stroke: var(--dim-guide); stroke-width: 1.2; }
.mf-diagram .bg-ring circle, .mf-diagram .bg-side rect { transition: stroke 0.18s ease; }

.mf-diagram .dg { color: var(--dim-guide); }
.mf-diagram .dg line { stroke: var(--dim-guide); stroke-width: 1.2; transition: stroke 0.18s ease; }
.mf-diagram .lbl { text-anchor: middle; }
.mf-diagram .sym {
  font-family: var(--f-mono); font-size: var(--t-sm); font-weight: 500;
  fill: var(--ink); transition: fill 0.18s ease;
}
.mf-diagram .desc {
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--ls-label);
  fill: var(--steel); transition: fill 0.18s ease;
}
/* aktif ölçü: ok + etiket + ilgili yüzey birlikte yanar */
.mf-diagram.on-od .dg-od, .mf-diagram[data-focus="od"] .dg-od,
.mf-diagram.on-d .dg-d, .mf-diagram[data-focus="d"] .dg-d,
.mf-diagram.on-b .dg-b, .mf-diagram[data-focus="b"] .dg-b { color: var(--brand); }
.mf-diagram.on-od .dg-od line, .mf-diagram[data-focus="od"] .dg-od line,
.mf-diagram.on-d .dg-d line, .mf-diagram[data-focus="d"] .dg-d line,
.mf-diagram.on-b .dg-b line, .mf-diagram[data-focus="b"] .dg-b line { stroke: var(--brand); stroke-width: 1.7; }
.mf-diagram.on-od .dg-od .sym, .mf-diagram[data-focus="od"] .dg-od .sym,
.mf-diagram.on-d .dg-d .sym, .mf-diagram[data-focus="d"] .dg-d .sym,
.mf-diagram.on-b .dg-b .sym, .mf-diagram[data-focus="b"] .dg-b .sym { fill: var(--brand); font-weight: 600; }
.mf-diagram.on-od .dg-od .desc, .mf-diagram[data-focus="od"] .dg-od .desc,
.mf-diagram.on-d .dg-d .desc, .mf-diagram[data-focus="d"] .dg-d .desc,
.mf-diagram.on-b .dg-b .desc, .mf-diagram[data-focus="b"] .dg-b .desc { fill: var(--brand); }
/* yüzey vurgusu YALNIZ odakta: hepsi dolu olduğunda çizim maviye boğulmasın */
.mf-diagram[data-focus="od"] .f-od,
.mf-diagram[data-focus="d"] .f-d,
.mf-diagram[data-focus="b"] .f-b { stroke: var(--brand); stroke-width: 2.2; }

/* tam eşleşme rozeti + konik T işareti + kapsam notu */
.tag-exact {
  display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 99px;
  font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--ls-label);
  color: #FFFFFF; background: var(--brand-solid);
}
.dim-row .dims u { text-decoration: none; font-size: var(--t-2xs); color: var(--steel); }
.mf-note { font-size: var(--t-sm); color: var(--steel-ink); max-width: 76ch; margin-bottom: 18px; }
.mf-note u { text-decoration: none; font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--ink); }

/* en yakın ölçü önerileri (boş sonuçta) */
.near-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 16px; }
.near-list button {
  display: grid; gap: 2px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 10px 16px; transition: border-color 0.15s ease, transform 0.1s var(--ease-out);
}
.near-list button:hover { border-color: var(--brand); }
.near-list button:active { transform: scale(0.97); }
.near-list b { font-family: var(--f-mono); font-size: var(--t-md); font-weight: 500; color: var(--brand); }
.near-list span { font-family: var(--f-mono); font-size: var(--t-2xs); color: var(--steel-ink); }

@media (max-width: 900px) {
  .mf-main { grid-template-columns: 1fr; }
  .mf-diagram { max-width: 280px; margin-inline: auto; order: -1; }
}
@media (prefers-reduced-motion: reduce) {
  .near-list button, .near-list button:active { transform: none; }
}

/* ================= v37; hukuk sayfası + onaylı harita ================= */
.legal { max-width: 78ch; }
.legal h2 { margin-bottom: 12px; }
.legal h3 { margin: 26px 0 6px; font-size: var(--t-lg); font-weight: 600; }
.legal p, .legal li { color: var(--steel-ink); }
.legal p { margin-bottom: 12px; }
.legal ul { margin: 0 0 14px 18px; display: grid; gap: 6px; }
.legal li { list-style: disc; }
.legal b { color: var(--ink); font-weight: 600; }
.legal .fill {
  font-family: var(--f-mono); font-size: var(--t-xs); color: var(--brand);
  background: var(--brand-wash); padding: 1px 6px; border-radius: 3px;
}
.legal-note {
  border: 1px solid var(--line); border-left: 3px solid var(--brand);
  background: var(--bg-alt); border-radius: var(--radius-sm);
  padding: 14px 18px; margin-bottom: 30px; font-size: var(--t-sm); color: var(--steel-ink);
}
.legal-foot { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); font-size: var(--t-sm); }

/* harita: onay verilene kadar Google'a istek gitmez */
.map-consent { display: grid; place-items: center; background: var(--bg-alt); }
.map-ask { max-width: 46ch; padding: 30px 26px; text-align: center; display: grid; justify-items: center; gap: 12px; }
.map-ask svg { width: 30px; height: 30px; color: var(--steel); }
.map-ask p { font-size: var(--t-sm); color: var(--steel-ink); margin: 0; }
.map-ask .map-priv { font-size: var(--t-xs); color: var(--steel); text-decoration: underline; text-underline-offset: 3px; }
.map-ask .map-priv:hover { color: var(--brand); }

/* ---------- dokunma hedefleri (v43) ----------
   WCAG 2.5.8: dokunmatikte en az 24x24, önerilen 44x44.
   Yalnız `pointer: coarse` altında genişler; masaüstündeki
   tipografik yoğunluk olduğu gibi kalır. */
@media (pointer: coarse) {
  .foot-list a,
  .foot-base a,
  .map-ask .map-priv,
  .row-tel,
  .arrow-link,
  .logo {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  /* hedefler birbirine yapışmasın: 44px yükseklik + 6px ayrım */
  .foot-list li { margin-bottom: 6px; }
  /* yan yana linkler arası en az 8px, yanlış dokunmayı önler */
  .foot-base { gap: 10px 20px; }
  .utilbar .u-right { gap: 18px; }
}

/* ---------- tema düğmesi (v43) ---------- */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--steel); cursor: pointer;
  transition: color 0.16s ease, border-color 0.16s ease, background 0.16s ease;
}
.theme-btn:hover { color: var(--brand); border-color: var(--brand); background: var(--brand-wash); }
.theme-btn svg { width: 18px; height: 18px; }
/* açık temada ay (koyuya geç), koyu temada güneş (açığa geç) */
.theme-btn .t-sun { display: none; }
.theme-btn .t-moon { display: block; }
:root[data-theme="dark"] .theme-btn .t-sun { display: block; }
:root[data-theme="dark"] .theme-btn .t-moon { display: none; }
@media (max-width: 640px) {
  .theme-btn { width: 44px; height: 44px; }
}

/* ---------- grup sayfaları (v55) ----------
   v43'teki ilk sürümün üç kusuru giderildi (müşteri geri bildirimi 13.09.2026):
   1) Ürün görseli grid öğesinde max-height:100% ile sınırlanıyordu; yüzde
      çözülmediği için dikey şişe görselleri çerçeveden taşıp kırpılıyordu.
      Artık kesin boyutlu sahne + mutlak konumlu, object-fit:contain görsel.
   2) Seri bölümü arama anahtarlarından üretiliyordu ("yag", "hiz", "saf su")
      ve kayıtsız stok iddiası taşıyordu. Artık etiketli kapsam tablosu.
   3) Kardeş kartlarında <a> içinde <a> vardı; ad kartın dışına düşüyordu. */
.kirinti { border-bottom: 1px solid var(--line); background: var(--bg-alt); }
.kirinti .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding-block: 11px; font-size: var(--t-xs); color: var(--steel); }
.kirinti a { color: var(--steel); }
.kirinti a:hover { color: var(--brand); }
.kirinti span[aria-hidden] { color: var(--steel-soft); }
.kirinti [aria-current] { color: var(--ink); font-weight: 500; }

.grup-bas { padding-block: clamp(36px, 5vw, 72px); }
.grup-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px); align-items: center; }
.grup-metin h1 { font-size: var(--t-4xl); font-weight: 700;
  letter-spacing: var(--ls-display); line-height: var(--lh-display); text-wrap: balance; }
.grup-giris { font-size: var(--t-lg); color: var(--steel-ink); max-width: 52ch;
  margin-top: 16px; text-wrap: pretty; }
.grup-olcu { font-size: var(--t-sm); color: var(--steel-ink); margin-top: 18px; max-width: 52ch; }
.grup-olcu a, .kod-not a { color: var(--brand); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px; }
.grup-olcu a:hover, .kod-not a:hover { text-decoration-thickness: 2px; }
.grup-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.btn-ghost-ink { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-ghost-ink:hover { border-color: var(--brand); color: var(--brand); }

.grup-gorsel { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--line);
  border-radius: var(--radius-lg); overflow: hidden; }
.grup-gorsel img { position: absolute; inset: 0; margin: auto; width: 74%; height: 74%;
  max-width: none; object-fit: contain;
  filter: drop-shadow(0 22px 26px rgba(13, 20, 33, 0.16)); }
.grup-gorsel[data-sekil="dikey"] img { width: 56%; height: 84%; }
.grup-gorsel[data-sekil="yatay"] img { width: 82%; height: 66%; }
@media (max-width: 860px) {
  .grup-wrap { grid-template-columns: minmax(0, 1fr); }
  .grup-gorsel { order: -1; aspect-ratio: 16 / 11; }
}

.grup-h2 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: var(--ls-head);
  line-height: var(--lh-head); text-wrap: balance; }

.kapsam { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.kapsam-bas .kod-not { font-size: var(--t-sm); color: var(--steel); margin-top: 14px; max-width: 40ch; }
.kapsam-tablo { margin: 0; border-top: 1px solid var(--line); }
.kapsam-satir { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 10px 28px;
  align-items: start; padding-block: 18px; border-bottom: 1px solid var(--line); }
.kapsam-satir dt { font-size: var(--t-2xs); font-weight: 600; letter-spacing: var(--ls-label);
  text-transform: uppercase; color: var(--steel); padding-top: 11px; }
.kapsam-satir dd { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kapsam-oge { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 13px;
  font-size: var(--t-sm); font-weight: 500; line-height: 1.3; color: var(--ink);
  font-variant-numeric: tabular-nums; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm); }
.kapsam-satir--not dd { display: block; font-size: var(--t-sm); color: var(--steel-ink); padding-top: 9px; }
@media (min-width: 960px) {
  .kapsam { grid-template-columns: minmax(0, 0.36fr) minmax(0, 0.64fr);
    gap: clamp(40px, 6vw, 96px); align-items: start; }
  .kapsam-bas { position: sticky; top: 112px; }
}
@media (max-width: 560px) {
  .kapsam-satir { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-block: 16px; }
  .kapsam-satir dt, .kapsam-satir--not dd { padding-top: 0; }
}

.kardes-bas { margin-bottom: clamp(20px, 3vw, 32px); }
.kardes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 16px; }
.kardes { position: relative; display: flex; flex-direction: column; align-items: stretch;
  gap: 0; padding: 0; text-align: left; overflow: hidden; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out), transform 0.2s var(--ease-out); }
.kardes:hover { border-color: var(--brand); transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(13, 20, 33, 0.09); }
.kardes:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.kardes .k-sahne { position: relative; display: block; aspect-ratio: 4 / 3; }
.kardes .k-sahne img { position: absolute; inset: 0; margin: auto; width: 70%; height: 70%;
  max-width: none; object-fit: contain; transition: transform 0.3s var(--ease-out);
  filter: drop-shadow(0 12px 14px rgba(13, 20, 33, 0.14)); }
.kardes .k-sahne[data-sekil="dikey"] img { width: 52%; height: 82%; }
.kardes .k-sahne[data-sekil="yatay"] img { width: 80%; height: 62%; }
.kardes:hover .k-sahne img { transform: scale(1.05); }
.kardes .k-alt { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center;
  column-gap: 12px; padding: 14px 16px 16px; }
.kardes .k-kod { display: block; font-family: var(--f-mono); font-size: var(--t-2xs);
  color: var(--steel); letter-spacing: var(--ls-label); }
.kardes .k-ad { display: block; margin-top: 3px; font-size: var(--t-md); font-weight: 600;
  line-height: 1.3; letter-spacing: var(--ls-head); }
.kardes .k-ok { font-size: var(--t-lg); line-height: 1; color: var(--steel);
  transition: transform 0.2s var(--ease-out), color 0.2s var(--ease-out); }
.kardes:hover .k-ok { color: var(--brand); transform: translateX(3px); }
@media (max-width: 560px) {
  .kardes-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .kardes .k-alt { padding: 12px 12px 14px; }
  .kardes .k-ad { font-size: var(--t-sm); }
}
@media (prefers-reduced-motion: reduce) {
  .kardes, .kardes:hover, .kardes .k-sahne img, .kardes:hover .k-sahne img,
  .kardes .k-ok, .kardes:hover .k-ok { transition: none; transform: none; }
}
/* katalog satırı başlığı artık bağlantı; rengi satırın kendi durumundan alsın */
.cat-row h3 a { color: inherit; text-decoration: none; }
.cat-row h3 a:hover, .cat-row h3 a:focus-visible { color: var(--brand); }

/* ---------- sayfa geçişleri ve kaydırma hareketi (v43) ----------
   Site çok sayfalı; sayfalar arası geçiş kesik olmasın diye
   belge-arası view transition açık. Başlık ve alt bilgi
   adlandırıldığı için geçiş sırasında yerinde durur, yanıp sönmez. */
@view-transition { navigation: auto; }

.site-head { view-transition-name: baslik; }
.site-foot { view-transition-name: altbilgi; }
.mobilebar { view-transition-name: mobilcubuk; }

::view-transition-old(root) { animation-duration: 180ms; }
::view-transition-new(root) { animation-duration: 220ms; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Kaydırma hareketi: JavaScript yok, scroll-driven animation.
   Yalnız liste öğelerinde ve çok kısa; sayfanın sakin dili bozulmasın.
   Zaten görünür olan öğeler giriş aralığını geçmiş sayılır ve
   doğrudan son karede durur, yani hiçbir şey gizli kalmaz. */
@keyframes girisYukselt {
  /* transform yerine translate: animasyon bitince hover'daki transform ezilmesin */
  from { opacity: 0; translate: 0 14px; }
  to   { opacity: 1; translate: 0 0; }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .cat-row,
    .kardes,
    .b-tile,
    .kapsam-satir {
      animation: girisYukselt linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
  }
}
/* kareye yakın logolar (INA, Gates) satır yüksekliğinde cılız kalıyor;
   görsel ağırlıkları diğerlerine yaklaşsın diye biraz büyütülür */
.brandline .mlogo[data-kare] { height: 34px; }

/* ---------- dar ekranda buton etiketi (v57) ----------
   "Hemen arayın: 0232 265 06 65" ikonlu butonda Hakkımızda aksiyon panelinde
   390px'de iki satıra kırılıyordu. Genel nowrap verilmedi: katalog aramasındaki
   dinamik etiket daha uzun, 320px'de taşardı. Onun yerine iç boşluk ve punto. */
@media (max-width: 480px) {
  .btn { padding-inline: 18px; gap: 8px; }
  .action-panel { padding-inline: 22px; }
}
@media (max-width: 420px) {
  .btn { font-size: var(--t-sm); }
}

/* ---------- 374px ve altı (v58) ----------
   320px'de başlıktaki menü düğmesi 6px taşıyordu: v43'te eklenen tema düğmesi
   yer kapladı (SLOP-DENETIMI Q2'de 320px taşması 0 diye kayıtlıydı; gerileme).
   360px'de Hakkımızda aksiyon panelindeki ikonlu buton 6px eksik kaldığı için
   iki satıra kırılıyordu (etiket 221px + ikon/boşluk 25px, iç alan 240px).
   Kenar boşluğu 20->16px ve panel iç boşluğu 22->20px ile ikisi birden kapanır. */
@media (max-width: 374px) {
  .wrap, .site-head .wrap { padding-inline: 16px; }
  /* v59: dolgu yalnız sol kenardan 4px kazandırdı (satır zaten taştığı için sağ
     dolgu işe yaramıyor); 320px'de 2px taşma kaldı. Başlıktaki iki boşluk
     12->8px ile 8px daha kazanılır. */
  .site-head .wrap { gap: 8px; }
  .action-panel { padding-inline: 20px; }
}

/* ============================================================
   v63 (15.09.2026) · ana sayfa revizyonu + katalog yeniden tasarımı
   Kullanıcı isteği: hero konum satırı büyük (1982 kalın), ürün kartı
   ve "faturalı" ifadeleri gitti, marka logoları kendi renkleriyle,
   ORS ve 46/68 kampanya kutuları, 11 gruplu kompakt vitrin, katalogda
   kategori başlığında logolar, grup sayfalarında tıklanmayan tip kartları.
   ============================================================ */
.hero-big { font-size: clamp(22px, 2.5vw, 34px); font-weight: 600; letter-spacing: var(--ls-head); line-height: 1.25; color: rgba(226, 237, 255, 0.92); margin: 0 0 30px; max-width: 34ch; }
.hero-big b { font-weight: 800; color: #FFFFFF; font-size: 1.22em; letter-spacing: var(--ls-display); }

.brandline .mlogo[data-renkli] { filter: none; opacity: 0.95; height: 30px; max-width: 132px; }
.brandline .mlogo[data-renkli][data-kare] { height: 38px; }
.brandline:hover .mlogo[data-renkli] { opacity: 1; }
:root[data-theme="dark"] .brandline .mlogo[data-renkli] { filter: brightness(0) invert(1); opacity: 0.6; }

.kampanya { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: clamp(20px, 3vw, 44px); padding: clamp(22px, 3vw, 34px) clamp(22px, 3.5vw, 44px); border-radius: var(--radius-lg); background: var(--navy); color: #FFFFFF; position: relative; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.08); }
.kampanya::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 300px at 12% 50%, rgba(0, 0, 254, 0.45), transparent 62%), radial-gradient(520px 260px at 92% 0%, rgba(90, 90, 255, 0.22), transparent 60%); pointer-events: none; }
.kampanya > * { position: relative; z-index: 1; }
.kampanya-logo { display: grid; place-items: center; width: 168px; height: 92px; padding: 12px 16px; background: #FFFFFF; border-radius: var(--radius-md); }
.kampanya-logo img { width: 100%; height: 100%; object-fit: contain; }
.kampanya-etiket { display: inline-block; font-family: var(--f-mono); font-size: var(--t-2xs); font-weight: 500; letter-spacing: var(--ls-label); text-transform: uppercase; color: #FFFFFF; background: var(--brand); padding: 6px 10px; border-radius: var(--radius-sm); margin-bottom: 12px; }
.kampanya h2 { font-size: var(--t-3xl); font-weight: 700; letter-spacing: var(--ls-head); line-height: var(--lh-head); margin-bottom: 8px; }
.kampanya p { color: rgba(226, 237, 255, 0.82); max-width: 56ch; font-size: var(--t-md); }
.kampanya-cta { font-size: var(--t-md); white-space: nowrap; }
@media (max-width: 860px) { .kampanya { grid-template-columns: 1fr; } .kampanya-logo { width: 140px; height: 76px; } .kampanya-cta { justify-self: start; } }

.vitrin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.vt { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; color: var(--ink); transition: border-color 0.2s var(--ease-out), transform 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.vt:hover, .vt:focus-visible { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16, 16, 20, 0.08); }
.vt-media { position: relative; display: block; aspect-ratio: 5 / 3; border-bottom: 1px solid var(--line); }
.vt-media > picture img, .vt-media > img { position: absolute; inset: 0; margin: auto; width: 62%; height: 74%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(13, 20, 33, 0.14)); transition: transform 0.25s var(--ease-out); }
.vt:hover .vt-media > picture img, .vt:hover .vt-media > img { transform: scale(1.05); }
.vt-media--yazi, .cc-media--yazi { display: grid; place-items: center; align-content: center; gap: 2px; background: linear-gradient(160deg, var(--paper-1), var(--paper-3)); }
.ym-num { font-family: var(--f-mono); font-weight: 600; font-size: clamp(34px, 3.6vw, 46px); letter-spacing: -0.02em; color: var(--brand); line-height: 1; }
.ym-num i { font-style: normal; color: var(--steel-soft); margin-inline: 4px; }
.ym-word { font-weight: 700; font-size: var(--t-2xl); color: var(--brand); letter-spacing: var(--ls-head); }
.vt-media--yazi small, .cc-media--yazi small, .grup-gorsel--yazi small { font-size: var(--t-xs); color: var(--steel); letter-spacing: var(--ls-label); text-transform: uppercase; font-weight: 600; }
.ym-logos { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; padding: 12px; }
.ym-logos img { height: 22px; width: auto; }
.vt-body { display: grid; gap: 3px; padding: 14px 16px 16px; }
.vt h3 { font-size: var(--t-lg); font-weight: 600; letter-spacing: var(--ls-head); }
.vt-meta { font-size: var(--t-xs); color: var(--steel); }
@media (max-width: 1060px) { .vitrin { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .vitrin { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .vt-body { padding: 12px 12px 14px; } .vt h3 { font-size: var(--t-md); } }

.kampanya-yag { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 52px); border-radius: var(--radius-lg); border: 1px solid var(--line); background: linear-gradient(160deg, var(--paper-1), var(--paper-2)); position: relative; overflow: hidden; }
.ky-num { display: flex; align-items: baseline; justify-content: center; gap: 6px; font-family: var(--f-mono); font-weight: 600; color: var(--brand); font-size: clamp(88px, 12vw, 168px); line-height: 0.9; letter-spacing: -0.04em; }
.ky-num i { font-style: normal; color: var(--steel-soft); font-size: 0.5em; }
.ky-metin p { font-size: var(--t-md); color: var(--steel-ink); max-width: 56ch; margin-top: 10px; }
.ky-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ky-list { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 18px; font-size: var(--t-sm); color: var(--steel); }
.ky-list li { display: inline-flex; align-items: center; gap: 8px; }
.ky-list li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
@media (max-width: 820px) { .kampanya-yag { grid-template-columns: 1fr; } .ky-num { justify-content: flex-start; font-size: clamp(72px, 20vw, 120px); } }

.cat-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.cat-group-head h2 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: var(--ls-head); text-transform: none; color: var(--ink); padding: 0; }
/* v76: sıra numarası başlık metninde değil (arama motoru "01Rulmanlar" okumasın); görünüm aynı */
.cat-group-head h2[data-ix]::before { content: attr(data-ix); font-style: italic; margin-right: 12px; }
.marka-satir { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.marka-satir img { height: 24px; width: auto; max-width: 110px; object-fit: contain; }
.marka-satir img.mono { filter: brightness(0); opacity: 0.6; }
:root[data-theme="dark"] .marka-satir img { filter: brightness(0) invert(1); opacity: 0.7; }
.marka-bos { font-size: var(--t-xs); color: var(--steel); }
.cat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cat-card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; transition: border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out); }
.cat-card:hover, .cat-card:focus-within { border-color: var(--brand); box-shadow: 0 14px 34px rgba(16, 16, 20, 0.08); }
.cc-link { display: flex; flex-direction: column; color: var(--ink); }
.cc-media { position: relative; display: block; aspect-ratio: 5 / 3; border-bottom: 1px solid var(--line); }
.cc-media > picture img, .cc-media > img { position: absolute; inset: 0; margin: auto; width: 62%; height: 74%; object-fit: contain; filter: drop-shadow(0 14px 18px rgba(13, 20, 33, 0.14)); transition: transform 0.25s var(--ease-out); }
.cat-card:hover .cc-media > picture img, .cat-card:hover .cc-media > img { transform: scale(1.05); }
.cc-body { display: grid; gap: 4px; padding: 14px 16px 6px; }
.cc-body h3 { font-size: var(--t-xl); font-weight: 600; letter-spacing: var(--ls-head); }
.cat-card:hover h3 { color: var(--brand); }
.cc-meta { font-size: var(--t-xs); color: var(--steel); }
.cc-body .arrow-link { margin-top: 6px; font-size: var(--t-sm); }
.cc-wa { display: inline-flex; align-items: center; gap: 8px; margin: 6px 16px 16px; font-size: var(--t-sm); font-weight: 600; color: var(--wa); }
.cc-wa svg { width: 16px; height: 16px; }
.cc-wa:hover { color: var(--wa-dark); }
.cat-empty { padding: 28px 22px; border: 1px dashed var(--line); border-radius: var(--radius-lg); color: var(--steel); }
@media (max-width: 1100px) { .cat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .cat-grid { grid-template-columns: 1fr; } }

.grup-metin .marka-satir { margin-top: 18px; }
.grup-gorsel--yazi { display: grid; place-items: center; }
.grup-gorsel--yazi .ym-num { font-size: clamp(56px, 7vw, 96px); }
.grup-gorsel--yazi .ym-logos img { height: 34px; }
.tip-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 14px; }
.tip-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; display: flex; flex-direction: column; }
.tip-media { position: relative; display: block; aspect-ratio: 1 / 1; background: #FFFFFF; }
.tip-media img { position: absolute; inset: 0; margin: auto; width: 84%; height: 84%; object-fit: contain; }
.tip-media.media-blue img { width: 70%; height: 70%; filter: drop-shadow(0 14px 18px rgba(13, 20, 33, 0.14)); }
.tip-card h3 { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--ls-head); padding: 12px 14px 14px; border-top: 1px solid var(--line); }
.tip-card--yazi { display: grid; align-content: center; justify-items: start; gap: 4px; padding: 22px 20px; min-height: 120px; }
.tip-big { font-size: var(--t-xl); font-weight: 600; letter-spacing: var(--ls-head); }
.tip-card--num .tip-big { font-family: var(--f-mono); font-size: clamp(34px, 3.4vw, 44px); font-weight: 600; color: var(--brand); letter-spacing: -0.02em; line-height: 1; }
.tip-alt { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--steel); }
.tip-swatch { width: 14px; height: 14px; border-radius: 50%; background: var(--c); border: 1px solid rgba(0, 0, 0, 0.08); margin-bottom: 4px; }
.tip-card--marka { display: grid; place-items: center; padding: 26px 22px; min-height: 120px; background: #FFFFFF; }
.tip-card--marka img { height: 40px; width: auto; max-width: 160px; object-fit: contain; }
:root[data-theme="dark"] .tip-card--marka, :root[data-theme="dark"] .tip-media { background: #FFFFFF; }
.kardes .k-sahne--yazi { display: grid; place-items: center; align-content: center; gap: 4px; background: linear-gradient(160deg, var(--paper-1), var(--paper-3)); aspect-ratio: 4 / 3; }

/* logo panoları: kesit görseli kurallarından bağımsız */
.ym-logos img, .grup-gorsel--yazi .ym-logos img, .k-sahne--yazi .ym-logos img { position: static; inset: auto; margin: 0; width: auto; max-width: 140px; filter: none; transform: none; }
.grup-gorsel--yazi .ym-logos img { height: 34px; }
.k-sahne--yazi .ym-logos img { height: 20px; }
.grup-gorsel--yazi > span { display: grid; place-items: center; gap: 6px; }

/* v63b: gerçek yazı markası (müşterinin logosu); uydurma amblem kaldırıldı */
.logo--img { gap: 0; }
.logo--img img { display: block; height: 30px; width: auto; }
:root[data-theme="dark"] .site-head .logo--img img { filter: invert(1); }
.site-foot .logo--img img { height: 26px; }
@media (max-width: 480px) { .logo--img img { height: 24px; } .site-foot .logo--img img { height: 22px; } }
/* hakkımızda: kurumsal metin ve logolu marka tablosu */
.kurumsal-metin { max-width: 78ch; display: grid; gap: 14px; }
.kurumsal-metin p { font-size: var(--t-lg); line-height: var(--lh-body); color: var(--steel-ink); text-wrap: pretty; }
.logo-tablo-bas { font-size: var(--t-sm); font-weight: 600; color: var(--steel); letter-spacing: var(--ls-label); text-transform: uppercase; margin: 22px 0 10px; }
.logo-tablo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.logo-tablo .lt { display: grid; place-items: center; align-content: center; gap: 10px; min-height: 128px; padding: 20px 14px; background: #FFFFFF; border: 1px solid var(--line); border-radius: var(--radius-lg); }
.logo-tablo img { height: 44px; width: auto; max-width: 150px; object-fit: contain; }
.logo-tablo .lt-ad { font-family: var(--f-mono); font-size: var(--t-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--steel); }
.logo-tablo-not { margin-top: 22px; font-size: var(--t-sm); color: var(--steel-ink); max-width: 90ch; }
:root[data-theme="dark"] .logo-tablo .lt { background: #FFFFFF; border-color: transparent; }
:root[data-theme="dark"] .logo-tablo .lt-ad { color: #5A687C; }
@media (max-width: 1100px) { .logo-tablo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 760px) { .logo-tablo { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .logo-tablo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .logo-tablo img { height: 36px; } }

/* ============================================================
   v64 (16.09.2026) · grup sayfası sırası
   Kullanıcı isteği: çeşitler (ör. "Rulman tipleri") grup adının hemen
   altında; açıklama, logolar ve sipariş düğmeleri ızgaradan sonra.
   Eski .kapsam-bas yapışkandı; 960px üstünde başlık kaydırırken
   ızgaranın arkasında asılı kalıyordu. Yeni başlık yapışkan değil.
   ============================================================ */
.grup-bas { padding-block: clamp(28px, 4vw, 52px) clamp(44px, 5.5vw, 80px); }
.grup-baslik h1 { font-size: var(--t-4xl); font-weight: 700;
  letter-spacing: var(--ls-display); line-height: var(--lh-display); text-wrap: balance; }
.cesit-bas { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 6px 24px; margin-top: clamp(20px, 3vw, 32px); margin-bottom: 18px;
  padding-top: 18px; border-top: 1px solid var(--line); }
.cesit-h2 { font-size: var(--t-2xl); font-weight: 700; letter-spacing: var(--ls-head); line-height: 1.2; }
.cesit-bas .kod-not { font-size: var(--t-sm); color: var(--steel); margin: 0; }
.grup-siparis .grup-giris { margin-top: 0; font-size: var(--t-xl); font-weight: 500; color: var(--ink); line-height: 1.4; }
.grup-siparis .grup-gorsel { aspect-ratio: 16 / 10; }
@media (max-width: 860px) {
  .grup-siparis .grup-gorsel { order: 0; aspect-ratio: 16 / 9; }
}
/* telefonda çeşitler iki sütun; tek sütunda on kart sipariş düğmesini çok aşağı itiyordu */
@media (max-width: 560px) {
  .tip-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tip-card h3 { font-size: var(--t-sm); padding: 10px 12px 12px; }
  .tip-card--yazi { padding: 16px 14px; min-height: 96px; }
  .tip-card--num .tip-big { font-size: 32px; }
  .tip-card--marka { padding: 18px 12px; min-height: 96px; }
  .tip-card--marka img { height: 30px; max-width: 100%; }
}

/* v64 · başlık taşması düzeltmesi
   v63b'de müşterinin yazı markası (720x69, oran 10,43) eski amblemli
   logodan yaklaşık 140px geniş geldi; başlık 320-480, 981-1180 ve 1340 üstü
   genişliklerde taştı (16.09.2026 ölçümü: 430'da 98px, 1024'te 84px,
   1366'da 128px). Çözüm: 980 üstünde telefon numarası yalnız üst bilgi
   çubuğunda (orada zaten görünür); menü 1180'e kadar sıkı; logo 26px;
   760 altında WhatsApp düğmesi alt barda olduğu için başlıktan kalkar;
   dar telefonda logo ekran genişliğine göre küçülür. */
.site-head .logo--img img { height: 26px; }
@media (min-width: 981px) {
  .head-cta .tel-link { display: none; }
}
@media (min-width: 1340px) {
  .head-search input { width: 180px; }
}
@media (min-width: 981px) and (max-width: 1180px) {
  .nav a { padding: 10px 9px; font-size: var(--t-sm); }
  .site-head .wrap { gap: 12px; }
}
@media (min-width: 981px) and (max-width: 1060px) {
  .site-head .logo--img img { height: 24px; }
}
@media (max-width: 760px) {
  .head-cta .btn-wa { display: none; }
  .site-head .logo--img img { height: min(26px, calc((100vw - 160px) / 10.5)); }
}
@media (max-width: 374px) {
  .site-head .logo--img img { height: calc((100vw - 144px) / 10.5); }
}
/* arama kutusu gizliyken (981-1339) tema ve WhatsApp düğmeleri sağa yaslanır */
@media (min-width: 981px) and (max-width: 1339px) {
  .head-cta { margin-left: auto; }
}

/* ============================================================
   v65 (16.09.2026) · tek sayfa katalog
   Kullanıcı isteği: grup sayfası yok, "bir yere tıklayıp içine gitme"
   olmayacak. Ürünler sayfasında her kategori başlığının (logolarıyla)
   altında grupların başlığı ve bütün çeşit kartları görünür.
   Yağ ve gres dört ayrı kategori oldu. Çeşit kartları tıklanmaz.
   ============================================================ */
.katalog-ana { min-width: 0; }
.katalog-ana .cat-group + .cat-group { margin-top: clamp(48px, 6vw, 80px); }
.katalog-ana .cat-group-head { margin-bottom: 20px; }
.kg + .kg { margin-top: clamp(30px, 3.8vw, 46px); }
.kg-bas { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 2px 18px; margin-bottom: 12px; }
.kg-bas h3 { font-size: var(--t-xl); font-weight: 700; letter-spacing: var(--ls-head); line-height: 1.25; }
.kg-wa { display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: var(--t-sm); font-weight: 600; color: var(--wa); white-space: nowrap; }
.kg-wa svg { width: 16px; height: 16px; flex: none; }
.kg-wa:hover { color: var(--wa-dark); }
html.no-wa .kg-wa { color: var(--brand); }
.tip-card .tip-ad { font-size: var(--t-md); font-weight: 600; letter-spacing: var(--ls-head);
  line-height: 1.3; padding: 12px 14px 14px; border-top: 1px solid var(--line); }
/* yazı ve marka kartları daha sık dizilir; görselli kartlar 210px'lik ızgarada kalır */
@media (min-width: 561px) {
  .tip-grid--yazi, .tip-grid--marka { grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
}
@media (max-width: 560px) {
  .tip-card .tip-ad { font-size: var(--t-sm); padding: 10px 12px 12px; }
  .kg-bas { margin-bottom: 10px; }
}
/* marka kartı: logo kartın iç genişliğini aşmasın (1440'ta Castrol ve Petrol Ofisi kesiliyordu) */
.tip-card--marka { padding: 22px 16px; }
.tip-card--marka img { max-width: 100%; }
@media (min-width: 561px) {
  .tip-grid--marka { grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); }
  .tip-card--yazi:not(.tip-card--num) .tip-big { font-size: var(--t-lg); line-height: 1.3; }
}
@media (max-width: 560px) {
  .tip-card--yazi:not(.tip-card--num) .tip-big { font-size: var(--t-md); line-height: 1.3; }
}
/* koyu temada #147A3D koyu zeminde 3,5:1 kalıyordu (küçük metin için 4,5 gerekir) */
:root[data-theme="dark"] .kg-wa { color: #4ADE80; }
:root[data-theme="dark"] .kg-wa:hover { color: #86EFAC; }

/* v66 (16.09.2026): görselli çeşitler önce, görseli olmayanlar altta yazı kartı ızgarasında */
.tip-grid--ek { margin-top: 12px; }

/* ============================================================
   v67 (16.09.2026) · hero'da gerçek dükkân fotoğrafı
   Sahibinin gönderdiği cephe fotoğrafı sağ sütunda çerçeveli kart olarak;
   tabela (ÖZKAN RULMAN + marka logoları) tam görünür, metnin altına girmez.
   Telefonda metnin altına tam genişlikte iner. AI atölye zemini kaldırıldı.
   ============================================================ */
.hero--dukkan .arc, .hero--dukkan .wordmark { display: none; }
.hero--dukkan .glow { opacity: 0.4; }
.hero--dukkan .gridfx { opacity: 0.6; }
.hero-dukkan { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.16); background: #0B0C0F;
  box-shadow: 0 34px 70px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 254, 0.18); }
.hero-dukkan img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.hero-dukkan figcaption { position: absolute; left: 14px; bottom: 14px; max-width: calc(100% - 28px);
  display: inline-flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: var(--radius-md);
  background: rgba(11, 12, 15, 0.74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.12); color: #FFFFFF; font-size: var(--t-xs); line-height: 1.35; }
.hero-dukkan figcaption b { font-size: var(--t-sm); font-weight: 700; letter-spacing: var(--ls-head); }
.hero-dukkan figcaption span { color: rgba(226, 237, 255, 0.82); }
@media (max-width: 860px) {
  .hero-dukkan { margin-top: 28px; }
  .hero-dukkan img { aspect-ratio: 16 / 11; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-dukkan img { transition: transform 0.6s var(--ease-out); }
  .hero-dukkan:hover img { transform: scale(1.02); }
}

/* ============================================================
   v68 (16.09.2026) · dükkân fotoğrafı tam ekran, yazı tarafı buzlu cam
   Kullanıcı: "tam ekran yap ama yazı olan tarafı bulanıklaştır; mobilde de
   yazılar fotoğrafın arkasında olmalı". Masaüstü: 16:9 çekim (sağ komşu
   ve gökyüzü kırpılmış) hero'yu kaplar, solda backdrop-filter bulanıklığı +
   koyu perde, maske ile sağa doğru sıfırlanır; tabelanın "RULMAN" yarısı ve
   SKF sandıkları net kalır. Telefon (<=600): 9:16 çekim hero'yu kaplar,
   metin üstte bulanık alanda, tabela ve sandıklar altta net, stat şeridi
   en altta yolun üstünde. Tablet (601-860): 16:9 çekim, üst bulanık.
   ============================================================ */
.hero-dukkan { display: none; }
.hero--dukkan .arc, .hero--dukkan .wordmark { display: none; }
.hero--dukkan .gridfx { opacity: 0.25; }
.hero--dukkan .glow { opacity: 0.2; }
.hero--dukkan .photo {
  position: absolute; inset: 0;
  background-image: linear-gradient(180deg, transparent 64%, rgba(2, 2, 20, 0.7) 100%), url("../img/dukkan-banner.jpg?v=76");
  background-image: linear-gradient(180deg, transparent 64%, rgba(2, 2, 20, 0.7) 100%),
    image-set(url("../img/dukkan-banner.webp?v=76") type("image/webp"), url("../img/dukkan-banner.jpg?v=76") type("image/jpeg"));
  background-size: cover;
  background-position: center, 100% 70%;
  background-repeat: no-repeat;
}
.hero--dukkan .veil { position: absolute; inset: 0; }
/* kademeli bulanıklık: solda güçlü, ortaya doğru azalarak biter; uzun geçiş, keskin sınır yok */
.hero--dukkan .veil-1 {
  -webkit-backdrop-filter: blur(18px) saturate(1.05); backdrop-filter: blur(18px) saturate(1.05);
  background: linear-gradient(90deg, rgba(3, 3, 36, 0.5) 0%, rgba(3, 3, 36, 0.38) 22%, rgba(3, 3, 40, 0.14) 40%, rgba(3, 3, 40, 0) 56%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 16%, transparent 40%);
  mask-image: linear-gradient(90deg, #000 0%, #000 16%, transparent 40%);
}
.hero--dukkan .veil-2 {
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 26%, transparent 52%);
  mask-image: linear-gradient(90deg, #000 0%, #000 26%, transparent 52%);
}
.hero--dukkan .veil-3 {
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 64%);
  mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 64%);
}
.hero--dukkan .wrap { min-height: clamp(560px, 46vw, 760px); }
.hero--dukkan h1, .hero--dukkan .hero-big, .hero--dukkan .hero-note, .hero--dukkan .hero-stats { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45); }
@media (max-width: 860px) {
  /* tablet: metin tam genişlik; üst yarı bulanık ve koyu, alt yarı (vitrin, sandıklar) net */
  .hero--dukkan .photo { background-position: center, 60% 70%; }
  .hero--dukkan .veil-1 {
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    background: linear-gradient(180deg, rgba(3, 3, 36, 0.55) 0%, rgba(3, 3, 36, 0.45) 60%, rgba(3, 3, 40, 0.15) 100%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.3) 100%);
    mask-image: linear-gradient(180deg, #000 0%, #000 60%, rgba(0, 0, 0, 0.3) 100%);
  }
  .hero--dukkan .veil-2, .hero--dukkan .veil-3 { display: none; }
  .hero--dukkan .wrap { min-height: 0; padding-top: clamp(40px, 6vw, 64px); }
}
@media (max-width: 600px) {
  /* telefon: 9:16 çekim; metin üstte (bulanık), tabela ve sandıklar ortada net, stat şeridi en altta */
  .hero--dukkan .photo {
    background-image: linear-gradient(180deg, transparent 78%, rgba(2, 2, 20, 0.82) 100%), url("../img/dukkan-banner-sm.jpg?v=76");
    background-image: linear-gradient(180deg, transparent 78%, rgba(2, 2, 20, 0.82) 100%),
      image-set(url("../img/dukkan-banner-sm.webp?v=76") type("image/webp"), url("../img/dukkan-banner-sm.jpg?v=76") type("image/jpeg"));
    background-size: cover; background-position: center, 57% bottom;
  }
  .hero--dukkan .veil-1 {
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    background: linear-gradient(180deg, rgba(3, 3, 36, 0.48) 0%, rgba(3, 3, 36, 0.34) 24%, rgba(3, 3, 40, 0) 44%);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 14%, transparent 32%);
    mask-image: linear-gradient(180deg, #000 0%, #000 14%, transparent 32%);
  }
  .hero--dukkan .veil-2 { display: block;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 40%);
    mask-image: linear-gradient(180deg, #000 0%, #000 22%, transparent 40%);
  }
  .hero--dukkan .veil-3 { display: block;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 44%);
    mask-image: linear-gradient(180deg, #000 0%, #000 28%, transparent 44%);
  }
  /* v72: kullanıcı "yazılar sıkıştı, görseli kısalt" dedi: metin normal boyutta; fotoğraf %121 genişlikte üstten
     hizalı (gökyüzü üstte, yol kırpılır); tabela üstü metnin altında (0,913 x genişlik); stat şeridi fotoğrafın
     altında koyu bant, tek satır dört sütun. Hero = 1,79 x genişlik + 72 px stat bandı. */
  .hero--dukkan .photo { background-size: cover, 121% auto; background-position: center, 50% 0; }
  .hero--dukkan .wrap { min-height: calc(100vw * 1.79 + 98px); align-content: space-between; padding-top: 30px; padding-bottom: 0; }
  /* 360-375 px'te h1 üç satıra düşüp tabelaya biniyordu (ölçüldü): iki satırda kalacak ölçek */
  .hero--dukkan h1 { font-size: clamp(30px, 9.6vw, 40px); margin-bottom: 14px; }
  .hero--dukkan .hero-cta { margin-top: 20px; }
  .hero--dukkan .hero-note { margin-top: 16px; }
  /* alt boşluk: parça bulucu paneli hero'ya 24 px biniyor, etiketler altında kalmasın */
  .hero--dukkan .hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; margin: 0 -20px; padding: 12px 20px 40px;
    background: rgba(4, 4, 42, 0.96); border-top: 1px solid rgba(255, 255, 255, 0.14); text-shadow: none; }
  .hero--dukkan .hero-stats > div + div { border-left: 0; padding-left: 0; }
  .hero--dukkan .hero-stats b { font-size: clamp(14px, 4vw, 17px); letter-spacing: -0.01em; white-space: nowrap; }
  .hero--dukkan .hero-stats span { margin-top: 2px; font-size: 10px; line-height: 1.25; }
}

/* v68 · 46/68 kampanya bölümü: büyük sayı yerine Petrol Ofisi HD 46 ve HD 68 tenekeleri (şeffaf kesit) */
.ky-media { position: relative; display: grid; place-items: center; padding: 8px 0; }
.ky-media img { display: block; width: min(100%, 460px); height: auto; }
.ky-rozet { position: absolute; left: 0; top: 0; display: inline-flex; align-items: baseline; gap: 4px; padding: 8px 14px; border-radius: 99px;
  background: var(--brand); color: #FFFFFF; font-family: var(--f-mono); font-weight: 600; font-size: var(--t-xl); line-height: 1; letter-spacing: -0.02em;
  box-shadow: 0 10px 24px rgba(0, 0, 254, 0.25); }
.ky-rozet i { font-style: normal; opacity: 0.6; }
.ky-rozet small { font-size: var(--t-2xs); letter-spacing: var(--ls-label); text-transform: uppercase; margin-left: 6px; opacity: 0.85; }
@media (max-width: 820px) { .ky-media { justify-items: start; } .ky-media img { width: min(100%, 340px); } }
@media (max-width: 413px) {
  /* 360-413 px'te iki düğme yan yana sığmayıp alt alta iniyor ve metin tabelaya biniyordu (ölçüldü; v73'te etiketler "sorun" olunca 390'a da yayıldı) */
  .hero--dukkan .hero-cta { gap: 10px 10px; }
  .hero--dukkan .hero-cta .btn { padding: 12px 13px; font-size: var(--t-sm); }
}
@media (max-width: 340px) {
  /* çok dar ekran: düğmeler alt alta; fotoğraf yakınlaştırılır ki tabela metnin altına insin */
  .hero--dukkan .photo { background-size: cover, 170% auto; }
  .hero--dukkan .wrap { min-height: calc(100vw * 2.75 + 98px); }
}

/* ============================================================
   v73 (16.09.2026) · site geneli denetim düzeltmeleri
   Ölçümle bulunanlar: altbilgi kontrastı 4,10-4,39 (AA altı), koyu temada
   kampanya etiketi 3,43, hakkımızda 320 px'te 10 px taşma, telefonda rakam
   etiketi 10 px, sayfa başı dekoratif yazının metne binmesi, dokunmatikte
   32-41 px hedefler, ölçü tablosunun telefonda 30.000 px uzunluğu.
   ============================================================ */
.site-foot { color: #9AA5B3; }
.foot-h { color: #8B96A3; }
.kampanya-etiket { background: var(--brand-solid); }
:root[data-theme="dark"] .legal .fill,
:root[data-theme="dark"] .qfill.tol[aria-pressed="true"] { color: #B4B4FF; }
.logo-tablo img { max-width: 100%; }
.logo-tablo .lt-ad { text-transform: none; letter-spacing: 0.02em; }
@media (max-width: 860px) { .head-mark { display: none; } }
.action-panel h2 { line-height: var(--lh-head); }
@media (pointer: coarse) {
  .qfill, .chip-btn, .kg-wa { min-height: 44px; }
  .dim-row .ask { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 8px; }
}
@media (max-width: 600px) {
  .hero--dukkan .hero-note, .hero--dukkan .hero-note b { color: #FFFFFF; }
  .hero--dukkan .hero-note { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7), 0 0 16px rgba(0, 0, 0, 0.55); }
  .hero--dukkan .hero-stats span { font-size: 12px; }
}
@media (max-width: 860px) {
  .dim-row { grid-template-columns: 72px minmax(0, 1fr) auto; grid-template-areas: "kod olcu sor" ". seri seri"; gap: 2px 12px; padding: 10px 8px; }
  .dim-row .code { grid-area: kod; font-size: var(--t-md); }
  .dim-row .dims { grid-area: olcu; }
  .dim-row .ser { grid-area: seri; font-size: var(--t-xs); }
  .dim-row .ask { grid-area: sor; justify-self: end; }
}
@media (max-width: 374px) {
  .dim-row { grid-template-columns: 56px minmax(0, 1fr) auto; gap: 2px 8px; }
  .dim-row .dims { font-size: var(--t-xs); }
}