:root {
  /* Bkz. 03_TASARIM_YENILEME_ONERISI.md Bölüm 2-3 — palet Bühler Group + Framework
     Computer'dan canlı ölçülen veriyle temellendirildi: sıcak nötr zemin (mavi-gri DEĞİL)
     + tek doymuş vurgu rengi (turuncu-kızıl), bakır/altın gibi soluk/metalik değil. */
  --ink: #1F1B17;
  --ink-soft: #5C554C;
  --paper: #FFFFFF;
  --paper-raised: #FAF8F4;
  --paper-sunken: #F1ECE4;
  --accent: #E8622C;
  --accent-deep: #C24A1B;
  --accent-tint: #E8622C14;
  --steel: #8C8175;
  --steel-soft: #B7AEA1;
  --line: #1F1B171a;
  --line-strong: #1F1B1740;
  --good: #3E8E63;
  --footer-bg: #17130F;
  --footer-text: #F1ECE4;
  --font-display: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-headline: "IBM Plex Serif", Georgia, "Times New Roman", serif; /* sadece büyük başlıklar — bkz. .h-xl/.h-lg */
  --font-body: "IBM Plex Sans", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", "Cascadia Code", Consolas, ui-monospace, monospace;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display {
  font-family: var(--font-display);
  font-weight: 700;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -0.01em;
}
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
a { color: inherit; }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- layout helpers ---- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
/* Not: alt/üst boşluklar kasıtlı olarak padding-top/bottom ile ayrı yazılıyor —
   shorthand "padding" kullanılırsa .wrap ile aynı elemanda birleşince (örn.
   class="wrap section-tight") yatay padding'i sıfırlar ve mobilde başlıklar
   ekran kenarına yapışır. */
.section { padding-top: 72px; padding-bottom: 72px; }
.section-tight { padding-top: 40px; padding-bottom: 40px; }
.eyebrow {
  font-family: var(--font-display); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--accent); }
/* Büyük sayfa/bölüm başlıkları serif (--font-headline) — küçük UI metni (nav, buton,
   kart başlıkları) yukarıdaki h1/h2/h3 temel kuralında sans (--font-display) kalır.
   Class specificity (0,1,0) > element specificity (0,0,1), bu yüzden h1.h-xl gibi
   birleşik durumlarda kaynak sırasından bağımsız olarak bu kural kazanır. */
.h-xl { font-family: var(--font-headline); font-weight: 600; font-size: clamp(30px, 4vw, 46px); line-height: 1.08; }
.h-lg { font-family: var(--font-headline); font-weight: 600; font-size: clamp(26px, 3.3vw, 36px); line-height: 1.12; }
.h-md { font-size: 20px; }
.lede { font-size: 17px; line-height: 1.7; color: var(--ink-soft); max-width: 60ch; }
.body-p { font-size: 15.5px; line-height: 1.85; color: var(--ink-soft); max-width: 66ch; }
.body-p p { margin: 0 0 1em; }
/* Haber/Sayfa gövdesine blok düzenleyiciyle eklenen fotoğraf/galeri/video —
   .body-p'nin kendi 66ch okuma genişliğinden taşmasın, köşeleri sitenin diğer
   fotoğraf çerçeveleriyle (.ph vb.) uyumlu hafif yuvarlak olsun. */
.body-p img { max-width: 100%; height: auto; display: block; border-radius: 3px; }
.body-p figure { margin: 22px 0; }
.body-p figcaption { font-size: 12.5px; color: var(--steel); margin-top: 8px; }
.body-p .wp-block-embed { margin: 22px 0; }
.body-p .wp-block-embed iframe { max-width: 100%; border-radius: 3px; }
.body-p .wp-block-gallery { margin: 22px 0; }
/* Taslak/örnek KVKK-Çerez sayfalarının en üstündeki uyarı kutusu (bkz.
   inc/cookie-consent.php kurulum notu) — sayfa içeriğinin kendisi bu class'ı
   kullanıyor, admin gerçek metni yazınca bu kutuyu silmesi yeterli. */
.cm-draft-notice { background: var(--accent-tint); border-left: 3px solid var(--accent); padding: 14px 18px; margin: 0 0 24px; font-size: 13.5px; color: var(--ink); border-radius: 0 3px 3px 0; }
.cm-draft-notice strong { color: var(--accent-deep); }

/* ---- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 8px; border-radius: 3px; cursor: pointer;
  font-family: var(--font-display); font-size: 13.5px; letter-spacing: 0.02em; padding: 13px 22px;
  text-decoration: none; border: 1px solid transparent;
  transition: background-color .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-deep); transform: translateY(-1px); box-shadow: 0 10px 20px rgba(232,98,44,.24); }
.btn-primary:active { transform: translateY(0); box-shadow: none; }
.btn-outline { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-outline:hover { border-color: var(--ink); transform: translateY(-1px); }
.btn-outline:active { transform: translateY(0); }
.btn-ghost { color: var(--accent); padding: 6px 0; font-size: 13.5px; }

/* ---- header ---- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); position: sticky; top: 0; z-index: 30; transition: box-shadow .25s ease; }
.site-header-inner { max-width: 1240px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* Scroll'da sadece gölge belirir: main.js scrollY > 8px olunca .is-scrolled ekler/kaldırır
   (bkz. assets/js/main.js). ÖNEMLİ: burada padding/yükseklik DEĞİŞTİRİLMEMELİ — header
   "position: sticky" olduğu için yükseklik değişimi altındaki tüm içeriği anında kaydırır,
   bu da düşük eşikte (8px) ileri-geri titremeye yol açıyordu (kullanıcı ekran kaydıyla
   bildirdi). Gölge, layout'u etkilemeyen tek güvenli "scroll'da fark edilir" sinyali. */
.site-header.is-scrolled { box-shadow: 0 2px 16px rgba(31,27,23,.08); }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: 0 0 auto; min-width: 0; }
.logo img { max-height: 33px; width: auto; max-width: 100%; }
.logo-mark { font-family: var(--font-display); font-weight: 700; font-size: 19px; letter-spacing: 0.01em; white-space: nowrap; }
.logo-mark span { color: var(--accent); }
.nav-toggle {
  display: none; width: 40px; height: 40px; border: none; background: transparent; cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px; padding: 0; flex: 0 0 auto;
}
.nav-toggle span { display: block; width: 22px; height: 2px; background: var(--ink); transition: transform .2s, opacity .2s; }
.site-header-inner.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-header-inner.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.site-header-inner.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav,
.nav ul { display: flex; flex-wrap: nowrap; align-items: center; gap: 24px; list-style: none; margin: 0; padding: 0; }
.nav li { list-style: none; margin: 0; padding: 0; }
.nav a { text-decoration: none; font-family: var(--font-display); font-size: 13.5px; letter-spacing: 0.03em; color: var(--ink-soft); padding: 4px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav a.current-menu-item, .nav a.current, .nav li.current-menu-item > a, .nav a:hover { color: var(--ink); border-bottom-color: var(--accent); }
.nav .sub-menu { display: none; } /* alt menüler sadece mobil hamburger içinde gösterilir, masaüstünde gizli */
.nav-cta { background: var(--accent); color: #fff; border: none; border-radius: 3px; padding: 10px 18px; font-family: var(--font-display); font-size: 13px; letter-spacing: 0.03em; cursor: pointer; text-decoration: none; display: inline-block; flex: 0 0 auto; }
.nav-whatsapp {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%;
  background: #25D366; color: #fff; text-decoration: none; flex: 0 0 auto; transition: background .15s;
}
.nav-whatsapp:hover { background: #1DA851; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Header'daki LinkedIn/Instagram/YouTube — WhatsApp'ın tersine marka rengi/dolu
   ikon DEĞİL, sitenin genel çizgisel ikon dilinde (bkz. cm_social_icon()), nötr
   renkli, sade bir şerit. Boşsa (hiç link girilmemişse) cm_social_links() bu
   div'i hiç basmaz. */
.nav-social { display: flex; align-items: center; gap: 4px; }
.nav-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--ink-soft); border-radius: 50%; transition: color .15s, background .15s; }
.nav-social a:hover { color: var(--accent); background: var(--paper-raised); }
/* Mobilde header sırası zaten sıkışık (hamburger + WhatsApp + dil seçici) —
   3 sosyal ikon daha eklenince dil seçici ekran dışına taşıyordu (test edildi).
   Sosyal ikonlar mobilde header'dan kaldırılır, footer'da (tüm sayfalarda,
   mobil dahil) zaten eksiksiz duruyorlar. */
@media (max-width: 900px) { .nav-social { display: none; } }
/* ---- header "Ürünler": kategori/alt kategori mega menüsü ----
   Klasik, dar açılır liste + "ok işaretiyle yana açılan alt menü" (flyout) deseni —
   sadece gerçekten alt kategorisi OLAN kategorilerde ok/flyout görünür, olmayanlarda
   satır düz bir link olarak kalır. Flyout, sağda yer yoksa otomatik sola açılır
   (bkz. assets/js/main.js — .flyout-left sınıfı, ekran genişliğine göre hesaplanır).
   Bu desen kategori/alt kategori sayısı arttıkça da bozulmaz: her flyout kendi
   dikey listesi olduğu için satırlar arası hiçbir çapraz bağımlılık yok. */
.nav li.has-megamenu { position: relative; list-style: none; }
.megamenu-toggle { display: none; }
.megamenu {
  display: none; position: absolute; top: calc(100% + 1px); left: 0;
  width: 270px; max-width: 92vw; background: var(--paper); border: 1px solid var(--line);
  border-radius: 4px; box-shadow: 0 16px 32px rgba(30,39,50,.14); z-index: 45;
}
.nav li.has-megamenu:hover .megamenu,
.nav li.has-megamenu:focus-within .megamenu { display: block; }

/* "ul.": ".nav, .nav ul { display:flex }" temel kuralı (bu <ul>'lar da .nav'ın
   içinde) aynı özgüllükte (0,1,1) ama daha ÖNCE tanımlı — tip seçici eklemek
   burada aynı özgüllüğe çıkarıp kaynak sırasının (bizimki sonra) kazanmasını
   sağlıyor, !important gerekmiyor. Bu olmadan liste yatay/satır olarak akıyordu
   ve alt kategori panelleri hover olmadan da görünür kalıyordu. */
ul.megamenu-list { display: block; list-style: none; margin: 0; padding: 8px 0; }
.megamenu-item { position: relative; }
.megamenu-item > a {
  display: flex; align-items: center; gap: 9px; padding: 10px 16px; font-family: var(--font-display);
  font-size: 13px; color: var(--ink-soft); text-decoration: none;
}
.megamenu-item > a:hover, .megamenu-item.open > a { background: var(--paper-raised); color: var(--ink); }
.megamenu-item-icon { color: var(--accent); flex: 0 0 auto; display: flex; }
.megamenu-item-name { flex: 1 1 auto; }
.megamenu-item-arrow { flex: 0 0 auto; color: var(--steel-soft); font-size: 15px; line-height: 1; }
.megamenu-item-toggle { display: none; }

ul.megamenu-flyout {
  display: none; position: absolute; top: -1px; left: 100%; margin-left: 2px;
  width: 260px; max-height: 380px; overflow-y: auto; list-style: none; margin-top: -1px; padding: 8px 0;
  background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 16px 32px rgba(30,39,50,.14);
}
.megamenu-item.has-children:hover > .megamenu-flyout,
.megamenu-item.has-children:focus-within > .megamenu-flyout { display: block; }
.megamenu-item.flyout-left > .megamenu-flyout { left: auto; right: 100%; margin-left: 0; margin-right: 2px; }
.megamenu-flyout li a { display: block; padding: 9px 16px; font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.megamenu-flyout li a:hover { background: var(--paper-raised); color: var(--ink); }

.megamenu-footer { padding: 12px 16px; border-top: 1px solid var(--line); }
.megamenu-footer a { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--accent); text-decoration: none; }
.megamenu-footer a:hover { color: var(--accent-deep); }

/* ---- dil seçici: bayraklı açılır liste ---- */
.lang-dropdown { position: relative; flex: 0 0 auto; }
.lang-dropdown-toggle {
  display: flex; align-items: center; gap: 6px; background: transparent; border: 1px solid var(--line-strong);
  border-radius: 3px; padding: 7px 10px; cursor: pointer; font-family: var(--font-display); font-size: 12.5px;
  letter-spacing: .03em; color: var(--ink); transition: border-color .15s;
}
.lang-dropdown-toggle:hover { border-color: var(--ink); }
.lang-dropdown-toggle img { display: block; border-radius: 1px; box-shadow: 0 0 0 1px var(--line); }
.lang-dropdown-caret { color: var(--steel); flex: 0 0 auto; transition: transform .15s; }
.lang-dropdown.open .lang-dropdown-caret { transform: rotate(180deg); }
.lang-dropdown-menu {
  display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 170px; margin: 0; padding: 6px;
  list-style: none; background: var(--paper); border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 12px 24px rgba(30,39,50,.14); z-index: 45;
}
.lang-dropdown.open .lang-dropdown-menu { display: block; }
.lang-dropdown-menu li { list-style: none; }
.lang-dropdown-menu a {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 3px; text-decoration: none;
  font-family: var(--font-body); font-size: 13.5px; color: var(--ink-soft); white-space: nowrap;
}
.lang-dropdown-menu a img { border-radius: 1px; box-shadow: 0 0 0 1px var(--line); flex: 0 0 auto; }
.lang-dropdown-menu a:hover { background: var(--paper-raised); color: var(--ink); }
.lang-dropdown-menu a.active { color: var(--accent); font-weight: 600; }
@media (max-width: 900px) {
  .lang-dropdown-toggle { padding: 6px 8px; font-size: 11.5px; }
  .lang-dropdown-menu { right: 0; left: auto; }
}
@media (max-width: 900px) {
  .site-header-inner { position: relative; flex-wrap: nowrap; padding: 14px 16px; gap: 10px; }
  /* Yüklenen logo çok geniş bir en-boy oranına sahip (bir "wordmark", ~10:1) — mobilde
     yükseklik yerine GENİŞLİK sınırlanır, aksi halde logo header'ın büyük kısmını kaplar
     ve hamburger/WhatsApp/dil seçici ile sıkışıp bozulur. */
  .logo img { max-height: none; max-width: 128px; height: auto; }
  .nav-toggle { display: inline-flex; margin-left: auto; }
  .nav-menu, .nav-menu ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--paper); border-bottom: 1px solid var(--line);
    box-shadow: 0 12px 24px rgba(30,39,50,.10);
    padding: 8px 0; margin: 0; max-height: calc(100vh - 80px); overflow-y: auto; z-index: 40;
  }
  .site-header-inner.nav-open .nav-menu { display: flex; }
  .nav-menu a {
    display: block; /* <a> varsayılan olarak inline'dır — bu olmadan padding satır yüksekliğini hiç etkilemiyordu */
    padding: 22px 24px; width: 100%; border-bottom-width: 0; font-size: 17px; line-height: 1.3;
    border-left: 3px solid transparent; /* "bulunduğunuz sayfa" işareti buraya taşınır — bir kenar çizgisi, asla komşu satırlara taşmaz, arka plan/kutu YOK */
  }
  /* Alt sayfalar/kategoriler mobil menüde AYRICA listelenmez — masaüstünde de zaten
     .nav .sub-menu{display:none} ile gizli. "Ürünler"/"Kurumsal" gibi tek bir linke
     tıklamak ilgili sayfayı açar, o sayfa kendi alt listesini (kategori/alt sayfa
     kartları) zaten gösterir — mobil hamburger uzun/karışık bir liste olmaz. */
  .nav-menu li + li a { border-top: 1px solid var(--line); } /* satırları ayıran ince çizgi — kutu değil, sadece bölücü */
  /* Dokunmatik cihazlarda :hover parmak kalktıktan sonra da "yapışık" kalabiliyor ve
     rastgele bir satırı sürekli vurgulanmış gösterebiliyordu — bu yüzden mobilde hover/arka
     plan kutusu kullanılmıyor; "bulunduğunuz sayfa" sadece sol kenar çizgisiyle belli olur. */
  .nav-menu a:active { background: var(--paper-raised); } /* sadece parmak basılıyken anlık geri bildirim, bırakınca hemen kalkar */
  .nav-menu li.current-menu-item > a { border-left-color: var(--accent); color: var(--ink); }

  /* "Ürünler" öğesi: mobilde hover olmadığı için sağdaki ok butonuyla dokunarak açılır
     kategori/alt kategori listesi (megamenu, bkz. cm_products_megamenu()) — linke
     dokunmak sayfayı açar, oka dokunmak sadece listeyi genişletir. */
  .nav-menu li.has-megamenu > a { padding-right: 60px; }
  .megamenu-toggle {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 6px; right: 4px;
    width: 44px; height: 44px; background: none; border: none; color: var(--ink-soft); cursor: pointer;
  }
  .megamenu-toggle svg { transition: transform .2s; }
  .nav-menu li.has-megamenu.open .megamenu-toggle svg { transform: rotate(180deg); }
  .megamenu {
    display: none; position: static; width: auto; max-width: none;
    box-shadow: none; border: none; border-radius: 0; padding: 4px 0 10px; background: var(--paper-raised);
  }
  .nav-menu li.has-megamenu.open .megamenu { display: block; }
  .megamenu-list { padding: 0 0 0 24px; }

  /* Masaüstünde okla YANA açılan flyout, dokunmatikte hover olmadığı için anlamsız —
     mobilde her kategorinin kendi ok BUTONU (ayrı, dokunulabilir) olur ve flyout
     yana değil, kategorinin hemen ALTINA, aynı sütunda açılır (akordeon). */
  .megamenu-item.has-children > a { padding-right: 46px; }
  .megamenu-item-arrow { display: none; } /* mobilde onun yerine gerçek dokunulabilir .megamenu-item-toggle var */
  .megamenu-item-toggle {
    display: flex; align-items: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0;
    width: 44px; background: none; border: none; color: var(--ink-soft); cursor: pointer;
  }
  .megamenu-item-toggle svg { transition: transform .2s; }
  .megamenu-item.open > .megamenu-item-toggle svg { transform: rotate(180deg); }
  ul.megamenu-flyout {
    display: none; position: static; width: auto; max-width: none; max-height: none; overflow: visible;
    box-shadow: none; border: none; border-radius: 0; margin: 4px 0 6px; padding: 0 0 0 20px; background: none;
  }
  .megamenu-item.open > .megamenu-flyout { display: block; }
  .megamenu-flyout li a { padding: 9px 4px; font-size: 13.5px; }
  .megamenu-flyout li a:hover { background: none; color: var(--accent); }
  .megamenu-footer { padding: 12px 24px 4px; }
}

/* ---- footer ---- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); margin-top: 64px; }
.footer-inner { max-width: 1240px; margin: 0 auto; padding: 56px 24px 28px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; }
.footer-grid h4 { font-family: var(--font-display); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.footer-grid p, .footer-grid a { font-size: 13.5px; color: #F1ECE4ad; line-height: 1.9; text-decoration: none; display: block; }
.footer-bottom { margin-top: 40px; padding-top: 20px; border-top: 1px solid #F1ECE424; display: flex; justify-content: space-between; font-size: 12px; color: #F1ECE480; flex-wrap: wrap; gap: 8px; }
.footer-legal-links { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal-links a { color: #F1ECE480; text-decoration: none; }
.footer-legal-links a:hover { color: var(--accent); }
@media (max-width: 760px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
/* Dar telefon ekranlarında 2 sütun da sıkışıp taşıyordu (özellikle İletişim
   sütunundaki adres/e-posta metni) — tek sütun, alt alta çok daha rahat okunuyor. */
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }

/* ---- footer sosyal medya ikon şeridi (bkz. cm_social_links()) ----
   Logonun/açıklamanın altında, sol sütunda — sol sütun daha önce boş kalıyordu,
   bu ikonlar hem gerçek bir içerik hem marka varlığı ekliyor. Header'daki
   .nav-social ile AYNI resmi marka ikonlarını (bkz. cm_social_icon()) kullanır,
   sadece renk farklı: footer'ın koyu zemininde SAF BEYAZ (kullanıcı isteği),
   header'ın açık zemininde ise --ink-soft (beyaz orada okunmaz). */
.footer-social { display: flex; align-items: center; gap: 8px; margin-top: 20px; }
.footer-social a { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid #F1ECE433; border-radius: 50%; color: #fff; transition: color .15s, border-color .15s, background .15s; }
.footer-social a:hover { color: var(--accent); border-color: var(--accent); background: #F1ECE40d; }

/* ---- breadcrumb ---- */
.breadcrumb { font-size: 12.5px; color: var(--steel); display: flex; gap: 6px; align-items: center; font-family: var(--font-display); letter-spacing: 0.01em; flex-wrap: wrap; }
.breadcrumb a { text-decoration: none; color: var(--steel); }
.breadcrumb a:hover { color: var(--accent); }
.breadcrumb .current { color: var(--ink); }

/* ---- stats ---- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.stat { padding: 26px 20px; border-left: 1px solid var(--line); }
.stat:first-child { border-left: none; }
.stat .n { font-size: 28px; font-weight: 700; }
.stat .l { font-size: 12px; color: var(--steel); margin-top: 4px; }
@media (max-width: 760px) { .stat-row { grid-template-columns: 1fr 1fr; } .stat:nth-child(3) { border-left: none; } }

/* ---- scroll-reveal: main.js bir eleman görünür olunca IntersectionObserver ile
   .is-visible ekler (bkz. assets/js/main.js) — element bir kez göründükten sonra
   gözlem bırakılır, yukarı scroll'da tekrar gizlenmez. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
/* Kart ızgaralarında kademeli (staggered) beliriş — 6'ya kadar, sonrası ek gecikme almadan aynı anda belirir. */
.cat-grid > .reveal:nth-child(1), .cat-photo-grid > .reveal:nth-child(1), .prod-grid > .reveal:nth-child(1), .corp-grid > .reveal:nth-child(1) { transition-delay: 0ms; }
.cat-grid > .reveal:nth-child(2), .cat-photo-grid > .reveal:nth-child(2), .prod-grid > .reveal:nth-child(2), .corp-grid > .reveal:nth-child(2) { transition-delay: 70ms; }
.cat-grid > .reveal:nth-child(3), .cat-photo-grid > .reveal:nth-child(3), .prod-grid > .reveal:nth-child(3), .corp-grid > .reveal:nth-child(3) { transition-delay: 140ms; }
.cat-grid > .reveal:nth-child(4), .cat-photo-grid > .reveal:nth-child(4), .prod-grid > .reveal:nth-child(4), .corp-grid > .reveal:nth-child(4) { transition-delay: 210ms; }
.cat-grid > .reveal:nth-child(5), .cat-photo-grid > .reveal:nth-child(5), .prod-grid > .reveal:nth-child(5), .corp-grid > .reveal:nth-child(5) { transition-delay: 280ms; }
.cat-grid > .reveal:nth-child(6), .cat-photo-grid > .reveal:nth-child(6), .prod-grid > .reveal:nth-child(6), .corp-grid > .reveal:nth-child(6) { transition-delay: 350ms; }

/* ---- placeholder art (used until real photos are uploaded) ---- */
.ph {
  position: relative; background: repeating-linear-gradient(135deg, var(--paper-sunken), var(--paper-sunken) 8px, var(--paper-raised) 8px, var(--paper-raised) 16px);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
/* object-fit: cover — gerçek ürün fotoğrafları birbirinden çok farklı en-boy oranlarında
   (dikey/yatay/kare); "contain" olsaydı kutuya sığdırılırken kırpılmadan boşluk (letterbox)
   bırakırdı. "cover" kutuyu kırparak tamamen doldurur, boşluk kalmaz — kullanıcı isteği. */
.ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: none; }
/* gerçek fotoğraf varken çapraz çizgili yer tutucu deseni gizler. Saf beyaz (--paper) —
   ÖNCE burada biraz daha koyu bir ton (--paper-sunken) denendi, ama gerçek ürün
   fotoğrafları da (stüdyo çekimi) hemen hemen hep beyaz/açık gri zeminli olduğu için
   o koyu ton, object-fit:contain kullanılan yerlerde (galeri ana görseli) fotoğrafın
   kendi zemini ile ÇARPIŞIP "kutu içinde kutu" gibi bir zıtlık yaratıyordu — kullanıcı
   ekran görüntüsüyle gösterdi. Saf beyaz, fotoğrafın kendi (genelde beyaz) zeminiyle
   kaynaşır, dikiş görünmez. object-fit:cover kullanılan yerlerde (ürün kartları vb.)
   zaten hiç görünmediği için bu seçim oralarda etkisizdir. */
.ph:has(img) { background: var(--paper); }
.ph svg { stroke: var(--steel-soft); }
.ph .corner { position: absolute; width: 12px; height: 12px; border: 1.5px solid var(--ink-soft); opacity: .55; }
.ph .c-tl { top: 8px; left: 8px; border-right: none; border-bottom: none; }
.ph .c-tr { top: 8px; right: 8px; border-left: none; border-bottom: none; }
.ph .c-bl { bottom: 8px; left: 8px; border-right: none; border-top: none; }
.ph .c-br { bottom: 8px; right: 8px; border-left: none; border-top: none; }
.ph .tag { position: absolute; bottom: 8px; right: 22px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--steel-soft); text-transform: uppercase; }

/* ---- category grid ----
   Önceki "gap + arka plan rengi" tekniği (kartlar arasındaki 1px'lik boşluktan
   sızan bir zemin rengiyle çizgi efekti) son satır tamamlanmadığında (örn. 3
   sütunda 4 kart) boş hücrelerin TAMAMINI o zemin rengiyle dolduruyordu — büyük
   çirkin bir gri kutu. Çizgiler artık kartların KENDİ border'larından geliyor
   (sağ+alt), konteyner sadece üst+sol border veriyor; böylece hiç kart olmayan
   bir hücre basitçe HİÇ ÇİZİLMİYOR, kaç kart olursa olsun boşluk oluşmuyor. */
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 32px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.cat-card { background: var(--paper); padding: 28px 24px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .15s ease, transform .2s ease, box-shadow .2s ease; text-decoration: none; color: inherit; display: block; position: relative; }
.cat-card:hover { background: var(--paper-raised); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(31,27,23,.10); z-index: 1; }
.cat-icon { color: var(--accent); margin-bottom: 18px; }
.cat-card h3 { font-size: 16.5px; margin-bottom: 8px; }
.cat-card .sub { font-size: 12.5px; color: var(--steel); line-height: 1.6; }
.cat-card .count { font-size: 11px; color: var(--accent); margin-top: 14px; font-family: var(--font-display); letter-spacing: .04em; }
@media (max-width: 900px) { .cat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cat-grid { grid-template-columns: 1fr; } }

/* ---- category grid (fotoğraflı varyant) ----
   Anasayfadaki üst kategori vitrini için: eski sistemdeki büyük görselli kategori
   tanıtımının karşılığı — solda büyük fotoğraf, sağda başlık+açıklama, tam genişlikte
   alt alta sıralanan satırlar (3'lü ızgara değil). `.cat-grid`/`.cat-card`'tan (bkz.
   cm_urun_ailesi_card(), "Ne üretmek istiyorsunuz?" bloğu) KASITLI olarak ayrı class'lar
   — o basit ikonlu ikinci ızgara bu değişiklikten etkilenmesin diye.
   Fotoğraf alanı BİLEREK .ph'i (ürün kartlarındaki çapraz-çizgili/köşe-süslü "buraya
   foto eklenecek" deseni) MİRAS ALMIYOR — gerçek bir fotoğraf konduğunda bile o slot
   havası kalıyordu (kullanıcı geri bildirimi). object-fit de "cover" değil "contain":
   burada beklenen görseller stüdyo ürün fotoğrafından çok illüstrasyon/render
   ağırlıklı olabilir, cover kırpması öngörülemeyen/çirkin kesimlere yol açıyordu —
   contain hiçbir zaman kırpmaz, oranı tutmayan fotoğraf sadece beyaz zeminde ortalanır. */
.cat-photo-grid { display: flex; flex-direction: column; gap: 18px; margin-top: 32px; }
.cat-photo-card { display: flex; align-items: stretch; background: var(--paper); border: 1px solid var(--line); text-decoration: none; color: inherit; overflow: hidden; transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease; }
.cat-photo-card:hover { border-color: var(--line-strong); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(31,27,23,.10); }
.cat-photo-media { flex: 0 0 38%; aspect-ratio: 16/10; background: var(--paper); border-right: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.cat-photo-media img { max-width: 86%; max-height: 86%; width: auto; height: auto; object-fit: contain; transition: transform .35s ease; }
.cat-photo-card:hover .cat-photo-media img { transform: scale(1.04); }
/* Fotoğraf yokken: sade beyaz zemin + soluk genel ikon, "buraya foto eklenecek" hissi
   veren desen/köşe/etiket YOK — sadece görsel eksik olduğunu sessizce belirtir. */
.cat-photo-media-empty svg { stroke: var(--line-strong); opacity: .6; }
.cat-photo-body { flex: 1; min-width: 0; padding: 30px 36px; display: flex; flex-direction: column; justify-content: center; }
.cat-photo-body h3 { font-size: 19px; margin-bottom: 10px; }
.cat-photo-body .sub { font-size: 13.5px; color: var(--steel); line-height: 1.65; }
.cat-photo-body .count { font-size: 11px; color: var(--accent); margin-top: 16px; font-family: var(--font-display); letter-spacing: .04em; }
@media (max-width: 700px) {
  .cat-photo-card { flex-direction: column; }
  .cat-photo-media { flex-basis: auto; width: 100%; aspect-ratio: 16/9; border-right: none; border-bottom: 1px solid var(--line); }
  .cat-photo-body { padding: 22px 24px; }
}

/* ---- product grid ---- */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
.prod-card { text-decoration: none; color: inherit; display: block; }
.prod-card .ph { aspect-ratio: 4/3; margin-bottom: 14px; transition: border-color .2s ease; }
.prod-card .ph img { transition: transform .35s ease; }
.prod-card:hover .ph { border-color: var(--line-strong); }
.prod-card:hover .ph img { transform: scale(1.045); }
.prod-card h3 { font-size: 15.5px; margin-bottom: 6px; }
.prod-card .spec { font-size: 12px; color: var(--steel); }
/* Haber kartları (bkz. cm_news_card()) AYNI .prod-card yapısını kullanır, sadece
   üstüne tarih satırı ekler — ayrı bir kart sınıfı gerekmez. */
.news-date { font-size: 11.5px; color: var(--steel); font-family: var(--font-display); letter-spacing: .03em; margin-bottom: 6px; }
.prod-card .go { font-size: 12.5px; color: var(--accent); margin-top: 10px; font-family: var(--font-display); transition: transform .15s ease; display: inline-block; }
.prod-card:hover .go { transform: translateX(3px); }
/* z-index gerekli: cm_render_thumb() bu badge'i <img>'den ÖNCE yazdırıyor, z-index olmadan
   aynı .ph içindeki mutlak-konumlu <img> (DOM'da sonra geldiği için) badge'in üstünü örtüyordu. */
.featured-tag { position: absolute; top: 8px; left: 8px; z-index: 2; background: var(--accent); color: #fff; font-size: 9.5px; letter-spacing: .08em; padding: 4px 8px; text-transform: uppercase; font-family: var(--font-display); }
@media (max-width: 900px) { .prod-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .prod-grid { grid-template-columns: 1fr; } }

/* ---- kategori sayfası: sidebar + ürün listesi ---- */
.category-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; margin-top: 28px; align-items: start; }
.category-sidebar-col { position: sticky; top: 24px; }
.category-main-col h1 { margin-top: 0; }
@media (min-width: 901px) { .category-main-col .prod-grid { grid-template-columns: repeat(2, 1fr); } }
/* "grid-3" sınıfı main.js (cm_grid_toggle() ile basılan butonlar) tarafından eklenir/
   kaldırılır — ziyaretçi 2/3 sütun arasında seçim yapabilir, tercih localStorage'da
   kalıcı tutulur. Varsayılan (sınıf yokken) hep 2 sütun. */
@media (min-width: 901px) { .category-main-col.grid-3 .prod-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .category-layout { grid-template-columns: 1fr; gap: 28px; } .category-sidebar-col { position: static; } }

.grid-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 20px; flex-wrap: wrap; }
.grid-toolbar .breadcrumb { margin: 0; }
.grid-toggle { display: flex; gap: 4px; flex: 0 0 auto; }
.grid-toggle-btn {
  width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 3px; background: var(--paper);
  color: var(--steel); display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.grid-toggle-btn:hover { border-color: var(--line-strong); color: var(--ink); }
.grid-toggle-btn.active { border-color: var(--accent); color: var(--accent); background: var(--paper-raised); }
@media (max-width: 900px) { .grid-toggle { display: none; } }

.cat-sidebar { border: 1px solid var(--line); border-radius: 3px; padding: 18px; background: var(--paper-raised); }
.cat-sidebar-all { display: block; font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--ink); text-decoration: none; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.cat-sidebar-all:hover { color: var(--accent); }
.cat-sidebar-all.active { color: var(--accent); }
.cat-sidebar > ul { list-style: none; margin: 0; padding: 0; }
.cat-sidebar > ul > li + li { margin-top: 4px; }
.cat-sidebar-item { position: relative; }
.cat-sidebar-icon-row { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-left: 3px solid transparent; text-decoration: none; color: var(--ink-soft); font-size: 13.5px; border-radius: 2px; transition: color .15s, border-color .15s; }
.cat-sidebar-item.has-children .cat-sidebar-icon-row { padding-right: 30px; }
.cat-sidebar-icon-row:hover { color: var(--ink); }
.cat-sidebar-icon-row.active { color: var(--ink); border-left-color: var(--accent); font-weight: 600; }
.cat-sidebar-icon { color: var(--accent); flex: 0 0 auto; display: flex; }
.cat-sidebar-name { flex: 1 1 auto; }
.cat-sidebar-count { font-size: 11.5px; color: var(--steel-soft); flex: 0 0 auto; }
/* Alt kategorisi olan üst kategorinin satırının SAĞ ucunda ayrı, küçük bir ok butonu —
   satırın geri kalanı (.cat-sidebar-icon-row) o kategorinin sayfasına GİDER, sadece bu
   ok alt kategori listesini AÇAR/KAPAR (megamenu'deki mobil akordeon deseniyle aynı
   mantık, bkz. .megamenu-item-toggle). Varsayılan: sadece o an görüntülenen üst kategori
   açık başlar, diğerleri kapalı — okuna basılınca herhangi biri açılıp kapanabilir. */
.cat-sidebar-toggle {
  position: absolute; top: 2px; right: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; color: var(--steel-soft); cursor: pointer; border-radius: 2px; transition: color .15s, background .15s;
}
.cat-sidebar-toggle:hover { color: var(--ink); background: var(--paper); }
.cat-sidebar-toggle svg { transition: transform .2s; }
/* ">" (doğrudan çocuk) kullanımı KASITLI: her seviye kendi aç/kapat durumunu
   BAĞIMSIZ tutmalı — 3. seviye eklendiğinde üst kategori açıkken 2. seviyedeki bir
   alt kategorinin KENDİ alt listesi (3. seviye) otomatik açılmamalı, sadece kendi
   okuna basılınca açılmalı. Boşluklu (soyundan gelen) bir seçici bunu bozardı. */
.cat-sidebar-item.open > .cat-sidebar-toggle svg,
.cat-sidebar-children li.open > .cat-sidebar-toggle svg { transform: rotate(180deg); }
.cat-sidebar-item.open > .cat-sidebar-toggle,
.cat-sidebar-children li.open > .cat-sidebar-toggle { color: var(--accent); }
.cat-sidebar-children { list-style: none; margin: 4px 0 8px; padding-left: 31px; display: none; }
.cat-sidebar-item.open > .cat-sidebar-children,
.cat-sidebar-children li.open > .cat-sidebar-children { display: block; }
.cat-sidebar-children li + li { margin-top: 2px; }
.cat-sidebar-children a { display: block; padding: 6px 6px; font-size: 13px; color: var(--ink-soft); text-decoration: none; border-left: 3px solid transparent; }
.cat-sidebar-children a:hover { color: var(--ink); }
.cat-sidebar-children a.active { color: var(--accent); border-left-color: var(--accent); font-weight: 600; }
/* 3. seviye: bir alt kategorinin KENDİ alt kategorileri varsa, .cat-sidebar-item ile
   AYNI "satırın sonunda küçük ok" deseni — sadece daha küçük (satır zaten daha kısa). */
.cat-sidebar-children li { position: relative; }
.cat-sidebar-children li.has-children > a { padding-right: 26px; }
.cat-sidebar-children li.has-children > .cat-sidebar-toggle { width: 22px; height: 22px; top: 2px; right: 0; }

/* ---- sayfalama (the_posts_pagination) ---- */
.pagination.navigation { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 40px 0 0; }
.pagination .nav-links { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 3px; font-family: var(--font-display); font-size: 13.5px; color: var(--ink-soft); text-decoration: none; }
.pagination .page-numbers:hover { border-color: var(--ink); color: var(--ink); }
.pagination .page-numbers.current { background: var(--ink); border-color: var(--ink); color: #fff; }
.pagination .page-numbers.dots { border-color: transparent; }

/* ---- machine detail page ---- */
/* Galeri sütunu listedekinden (1.1fr) biraz daha geniş (1.3fr) — sayfa yapısı (2 sütunlu
   grid) aynı kalıyor, sadece fotoğrafa ayrılan alan büyüyor. Ana görsel de listedeki
   kartların aksine object-fit: cover DEĞİL contain kullanır — ürün listesinde kırpma
   (cover) kabul edilebilirken, detay sayfasındaki tek büyük fotoğrafta makinenin bir
   kısmının kırpılıp gitmesi istenmiyor.
   Kutunun oranı BİLEREK 4/3 (yatay ağırlıklı) DEĞİL, 5/4'e (kareye yakın) çekildi:
   makine fotoğrafları bazen dikey/uzun çekilmiş oluyor ("her zaman belirli formatta
   yükleyemem" — admin talebi), 4/3 gibi net yatay bir kutuda dikey bir fotoğraf
   object-fit:contain ile ÇOK küçük kalıyordu. Kareye yakın bir kutu, dikey VE yatay
   fotoğraflar için en kötü durumda bile daha az küçülme demek — tam çözüm yok (kırpma
   istenmiyor), ama en dengeli uzlaşı bu. İç boşluk (padding) SIFIR: fotoğraf, oranının
   uyduğu eksende (yatay fotoğrafta sol-sağ, dikey fotoğrafta üst-alt) kutunun kenarına
   TAM DAYANIR — ekstra bir boşluk payı eklemiyoruz, sadece object-fit:contain'in
   matematiksel olarak bırakmak ZORUNDA olduğu (uymayan eksendeki) boşluk kalır, o da
   artık .ph:has(img)'nin saf beyaz (--paper) arka planıyla fotoğrafın (genelde beyaz
   stüdyo zemini) kendi zeminine karışır, "kutu içinde kutu" hissi vermez. */
.detail-top { display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; padding: 48px 0; }
.gallery .ph.main { aspect-ratio: 5/4; }
.gallery .ph.main img { object-fit: contain; padding: 0; }
.thumbs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 8px; }
.thumbs .ph { aspect-ratio: 1; cursor: pointer; }
.thumbs .ph.sel, .thumbs img.sel { border-color: var(--accent); border-width: 2px; }
/* Eskiden (v1): 38px, hep dolu beyaz daire + çerçeve — fotoğrafı kapatan büyük bir
   buton gibi duruyordu. Sonra (v2): sadece çıplak ok + beyaz text-shadow parlaması,
   çerçeve/arka plan YOK — ama açık renkli (beyaz/gri) fotoğraflarda parlama zeminle
   karışıp ok neredeyse görünmez oluyordu (kullanıcı geri bildirimi: "var mı yok mu
   belli değil"). Üçüncüsü (v3, şimdiki): küçük yarı saydam beyaz bir daire HER ZAMAN
   görünür — hem koyu hem açık renkli fotoğraflarda okunabilir kontrast sağlıyor, ama
   v1'in tam opak/38px "büyük buton" hissini vermeyecek kadar küçük ve hafif (30px,
   %70 saydamlık + ince gölge). */
.gallery-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(31,27,23,.10);
  background: rgba(255,255,255,.72); box-shadow: 0 1px 5px rgba(31,27,23,.10);
  color: var(--ink); display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; font-size: 16px; padding: 0;
}
.gallery-arrow.prev { left: 10px; } .gallery-arrow.next { right: 10px; }
.gallery-arrow:hover { background: var(--paper); border-color: var(--line-strong); color: var(--accent); box-shadow: 0 3px 10px rgba(31,27,23,.16); }
.gallery-arrow:active, .gallery-arrow:focus-visible {
  background: var(--paper); border-color: var(--line-strong); color: var(--ink-soft);
}
.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin: 20px 0 24px; }
.chip { border: 1px solid var(--line); padding: 10px 14px; font-size: 12.5px; min-width: 108px; }
.chip .l { color: var(--steel); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-family: var(--font-display); }
.chip .v { font-family: var(--font-mono); font-size: 14px; margin-top: 3px; }
.pdf-row { display: flex; align-items: center; gap: 14px; border: 1px solid var(--line); padding: 14px 16px; margin-bottom: 22px; background: var(--paper-raised); flex-wrap: wrap; }
.pdf-icon { width: 32px; height: 38px; border: 1.5px solid var(--accent); position: relative; flex: 0 0 auto; }
.pdf-icon::after { content: "PDF"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 7px; color: var(--accent); font-family: var(--font-mono); letter-spacing: .02em; }
.pdf-meta .fn { font-size: 13.5px; }
.pdf-meta .fs { font-size: 11.5px; color: var(--steel); margin-top: 2px; }
.pdf-actions { margin-left: auto; display: flex; gap: 8px; }
.pdf-actions .btn { padding: 9px 14px; font-size: 12.5px; }
.spec-wrap { overflow-x: auto; margin-top: 20px; border: 1px solid var(--line); }
table.spec { width: 100%; border-collapse: collapse; min-width: 480px; }
table.spec tr { border-bottom: 1px solid var(--line); }
table.spec tr:last-child { border-bottom: none; }
table.spec td { padding: 13px 18px; font-size: 13.5px; }
table.spec td:first-child { color: var(--steel); width: 40%; font-family: var(--font-display); font-size: 12.5px; letter-spacing: .02em; }
table.spec td:last-child { font-family: var(--font-mono); }
table.spec tr:nth-child(odd) { background: var(--paper-raised); }

/* ---- makine detay: sekmeli içerik (açıklama / özellikler / video / dokümanlar) ---- */
.tab-strip { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-top: 48px; overflow-x: auto; }
.tab-strip button {
  background: none; border: none; padding: 12px 0; font-family: var(--font-display); font-size: 13.5px;
  color: var(--steel); border-bottom: 2px solid transparent; margin-bottom: -1px; cursor: pointer; white-space: nowrap;
}
.tab-strip button.active, .tab-strip button:hover { color: var(--ink); border-bottom-color: var(--accent); }
.tab-panel { display: none; padding: 24px 0 8px; }
.tab-panel.active { display: block; }
.tab-panel .pdf-row { margin-bottom: 0; }
.video-embed { position: relative; aspect-ratio: 16/9; background: var(--paper-raised); border: 1px solid var(--line); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---- catalog cards ---- */
.catalog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 32px; }
/* Kart zemini de ürün detay galerisiyle (bkz. .gallery .ph.main) AYNI nötr saf beyaz
   (--paper) — .ph içindeki önizleme ile kart gövdesi arasında görünür bir dikiş
   kalmasın diye. */
.catalog-card { border: 1px solid var(--line); background: var(--paper); }
.catalog-card .ph { aspect-ratio: 3/4; border: none; border-bottom: 1px solid var(--line); }
/* object-fit: contain + padding: 0 — ürün detay galerisiyle AYNI mantık (bkz. yukarısı):
   önizleme (PDF ilk sayfası veya manuel kapak görseli) kırpılmadan, uyduğu eksende
   kutunun kenarına tam dayanarak gösterilir; küçük/farklı oranlı bir önizleme yüzünden
   fazladan bir iç boşluk eklenmez. */
.catalog-card .ph img { object-fit: contain; padding: 0; }
.catalog-card .body { padding: 16px 18px 20px; }
.catalog-card h3 { font-size: 14.5px; margin-bottom: 6px; }
.catalog-card .meta { font-size: 11.5px; color: var(--steel); margin-bottom: 14px; font-family: var(--font-mono); }
.catalog-card .actions { display: flex; gap: 8px; }
.catalog-card .btn { flex: 1; justify-content: center; padding: 9px 10px; font-size: 12px; }
@media (max-width: 900px) { .catalog-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .catalog-grid { grid-template-columns: 1fr; } .detail-top { grid-template-columns: 1fr; gap: 32px; } }

/* ---- catalog CTA banner ---- */
.banner { background: var(--ink); color: #fff; padding: 48px 0; }
.banner-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.banner h3 { font-size: 22px; }
.banner p { color: var(--steel-soft); margin-top: 6px; font-size: 14px; }
.banner .btns { display: flex; gap: 10px; }

/* ---- hero slider (tam genişlik fotoğraf + üstte yazı) ---- */
.hero { padding: 0; }
.hero-viewport { position: relative; }
.hero-slide { display: none; }
.hero-slide.active { display: block; animation: heroFade .6s ease; }
@keyframes heroFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero-slide.active { animation: none; } }

.hero-media { position: relative; height: clamp(420px, 56vw, 640px); overflow: hidden; background: var(--paper-raised); }
.hero-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Ken-Burns: aktif slaytın fotoğrafı yavaşça büyür — slayt her .active olduğunda
   main.js'in class toggle'ı animasyonu sıfırdan başlatır (heroFade ile aynı teknik). */
.hero-slide.active .hero-media > img { animation: heroKenBurns 9s ease-out forwards; }
@keyframes heroKenBurns { from { transform: scale(1); } to { transform: scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .hero-slide.active .hero-media > img { animation: none; } }
.hero-media .ph-fill {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--steel-soft);
  background: repeating-linear-gradient(135deg, var(--paper-sunken), var(--paper-sunken) 10px, var(--paper-raised) 10px, var(--paper-raised) 20px);
}
.hero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(8,12,18,.82) 0%, rgba(8,12,18,.4) 42%, rgba(8,12,18,.05) 72%);
}
.hero-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 36px 24px 40px; }
.hero-text-inner { max-width: 1240px; margin: 0 auto; }
.hero-text .eyebrow { color: #fff; }
.hero-text .eyebrow::before { background: #fff; }
.hero-text h1 { color: #fff; max-width: 64ch; }
.hero-text .lede { color: rgba(255,255,255,.88); max-width: 58ch; }
.hero-cta { display: flex; align-items: center; gap: 12px; margin-top: 22px; flex-wrap: wrap; }
.hero-text .btn-outline { border-color: rgba(255,255,255,.7); color: #fff; }
.hero-text .btn-outline:hover { border-color: #fff; background: rgba(255,255,255,.14); }

.hero-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.55);
  background: rgba(12,16,22,.35); color: #fff; display: flex; align-items: center; justify-content: center;
  cursor: pointer; opacity: 0; transition: opacity .2s, background .2s; font-size: 17px;
}
.hero-viewport:hover .hero-arrow, .hero-arrow:focus-visible { opacity: 1; }
.hero-arrow.prev { left: 16px; } .hero-arrow.next { right: 16px; }
.hero-arrow:hover { background: rgba(12,16,22,.6); }
.hero-dots { display: flex; gap: 8px; margin-top: 22px; }
.hero-dot { width: 26px; height: 3px; border-radius: 2px; background: rgba(255,255,255,.4); border: none; cursor: pointer; padding: 0; transition: background .2s; }
.hero-dot.active { background: var(--accent); }
@media (max-width: 640px) { .hero-media { height: clamp(380px, 92vw, 480px); } }

/* ---- reference logo marquee (sonsuz + sürüklenebilir) ----
   Eskiden .wrap'ın DIŞINDA, tam ekran genişliğinde (kenarsız) basılıyordu — kullanıcıya
   "saçma" göründü ("komple ekranı kaplaması"). Artık front-page.php'de bir .wrap içine
   alınıyor (bkz. o dosya) — diğer bölümlerle AYNI genişlikte. İlk denemede dört kenara
   tam border eklenmişti ama bu, logoların sol/sağ kenarda SERT kesilmesini (yarım logo)
   daha da göze batırdı. Şimdi: sol/sağ border YOK, onun yerine kısa bir mesafede (48px)
   şeffaflığa geçen bir CSS mask (`mask-image`) var — logolar kenarlara sert kesilmek
   yerine yumuşakça solup görünüyor. Üst/alt border (yatay "raf" hissi için) korundu;
   mask tüm kutuya uygulandığı için köşelerde onlar da yumuşakça soluyor, kare köşe
   sertliği kalmıyor. Saf CSS, JS/kaydırma mantığına dokunmuyor — geri alması da tek
   satır (mask-image'i kaldırmak) kadar kolay. */
.marquee-wrap {
  margin-top: 28px; overflow-x: auto; overflow-y: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: var(--paper-raised); cursor: grab; scrollbar-width: none; -ms-overflow-style: none; user-select: none;
  touch-action: pan-y; /* yatay hareketi JS/pointer sürüklemesine bırak, dikey sayfa kaydırmasını engelleme */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.marquee-wrap::-webkit-scrollbar { display: none; }
.marquee-wrap.dragging { cursor: grabbing; }
.marquee-track { display: flex; align-items: center; width: max-content; gap: 56px; padding: 22px 32px; }
@media (prefers-reduced-motion: reduce) { .marquee-wrap { scroll-behavior: auto; } }
/* Eskiden .ref-logo (%80) VE .ref-logo img (%90) üst üste binen opacity taşıyordu —
   birleşince ~%72 gibi soluk/"filtreli" bir görünüm veriyordu (kullanıcı: "filtreli
   gibi"); aslında CSS filter değil, bu çift opacity'ydi — ikisi de tam opaklığa çekildi. */
.ref-logo { display: flex; align-items: center; gap: 9px; color: var(--steel); font-family: var(--font-display); font-weight: 600; font-size: 14px; letter-spacing: .03em; white-space: nowrap; }
.ref-logo img { max-height: 46px; width: auto; -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.ref-logo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; }

/* ---- sayfa üstü banner: görsel varsa (cm_page_banner()) tam genişlikte bir şerit ----
   Tüm iç sayfalarda TEK bir ölçü kullanılır (eskiden "normal"/"small" diye iki farklı
   yükseklik vardı, normal olan çok büyük kalıyordu — artık hepsi eski "small" ölçüsünde).
   Sayfa başlığı, ana sayfa hero'sundaki desenin AYNISIYLA (koyu gradyan + beyaz yazı)
   banner'ın içine, alt kısma bindirilir — bkz. .page-banner-text / cm_page_banner(). */
.page-banner { position: relative; height: clamp(220px, 26vw, 340px); overflow: hidden; background: var(--paper-raised); }
.page-banner img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-banner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(8,12,18,.8) 0%, rgba(8,12,18,.36) 48%, rgba(8,12,18,.04) 78%);
}
.page-banner-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 26px 24px 30px; }
.page-banner-text-inner { max-width: 1240px; margin: 0 auto; }
.page-banner-text h1 { color: #fff; margin: 0; }
/* Kırıntı yolu (breadcrumb) artık banner'ın İÇİNDE, başlığın ALTINDA — koyu fotoğraf
   üzerinde okunsun diye açık renk varyantı (bkz. .breadcrumb, normalde koyu metin). */
.page-banner-text .breadcrumb { margin-top: 12px; color: rgba(255,255,255,.72); }
.page-banner-text .breadcrumb a { color: rgba(255,255,255,.72); }
.page-banner-text .breadcrumb a:hover { color: #fff; }
.page-banner-text .breadcrumb .current { color: #fff; }
@media (max-width: 640px) { .page-banner { height: clamp(170px, 42vw, 260px); } .page-banner-text { padding: 18px 20px 22px; } }

/* ---- generic content page ---- */
.page-content { padding-top: 48px; padding-bottom: 72px; }
.page-content h2 { font-size: 24px; margin: 40px 0 14px; }
.page-content ul, .page-content ol { color: var(--ink-soft); line-height: 1.85; }
.page-content img { border: 1px solid var(--line); margin: 24px 0; }

/* ---- kalite belgelerimiz (ana sayfa) ---- */
.cert-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 20px; margin-top: 32px; }
.cert-card { text-decoration: none; color: inherit; display: block; text-align: center; }
.cert-card .ph { aspect-ratio: 3/4; transition: border-color .2s ease; }
/* object-fit: contain + padding: 0 — ürün detay galerisi/Kataloglar kartlarıyla AYNI
   mantık (bkz. .gallery .ph.main, .catalog-card .ph): belge/logo görseli kırpılmadan,
   uyduğu eksende kutunun kenarına tam dayanarak gösterilir, fazladan iç boşluk yok.
   Boşta kalan kenarlar .ph'nin kendi nötr saf beyaz (--paper) arka planıyla dolar
   (bkz. .ph:has(img)) — "kutu içinde kutu" dikişi oluşmaz. */
.cert-card .ph img { object-fit: contain; padding: 0; }
.cert-card .ph svg { color: var(--steel-soft); }
.cert-card:hover .ph { border-color: var(--line-strong); }
.cert-card h3 { font-size: 13.5px; font-weight: 600; margin-top: 14px; }
@media (max-width: 480px) { .cert-grid { grid-template-columns: repeat(2, 1fr); } }

/* ---- kurumsal: alt sayfa kartları (ikon + başlık + özet) ----
   .cat-grid'deki AYNI "gap + arka plan rengi sızıntısı" düzeltmesi burada da
   geçerli: kart sayısı sütun sayısına tam bölünmediğinde (örn. 5 kart / 2 sütun)
   son satırdaki boş hücre eskiden TAMAMEN zemin rengiyle doluyordu. Çizgiler artık
   kartların kendi border'larından (sağ+alt) geliyor, konteyner üst+sol veriyor. */
.corp-grid { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.corp-card { background: var(--paper); padding: 30px 28px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; display: block; position: relative; transition: background .15s ease, transform .2s ease, box-shadow .2s ease; }
.corp-card:hover { background: var(--paper-raised); transform: translateY(-3px); box-shadow: 0 14px 28px rgba(31,27,23,.10); z-index: 1; }
.corp-card-icon { color: var(--accent); margin-bottom: 16px; }
.corp-card h3 { font-size: 17px; margin-bottom: 10px; }
.corp-card p { font-size: 13.5px; color: var(--steel); line-height: 1.7; margin: 0; max-width: 46ch; }
.corp-card .go { font-size: 12.5px; color: var(--accent); margin-top: 16px; font-family: var(--font-display); }
@media (max-width: 700px) { .corp-grid { grid-template-columns: 1fr; } }

/* ---- kurumsal: uluslararası iletişim (yerel iş birliği kişileri) ---- */
.intl-contact { margin-top: 56px; padding-top: 48px; border-top: 1px solid var(--line); }
.intl-contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 28px; }
.intl-contact-card { border: 1px solid var(--line); border-radius: 3px; padding: 18px 20px; background: var(--paper-raised); }
/* Sadece "Bize Ulaşın" kartlarında basılır (page.php, kanal türü ikonu) — Uluslararası
   İletişim kartlarında (ülke/kişi) ikon YOK, aynı .intl-contact-card'ı paylaşırlar. */
.intl-contact-icon { color: var(--accent); margin-bottom: 10px; }
.intl-contact-country { font-family: var(--font-display); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.intl-contact-name { font-size: 14.5px; margin-top: 6px; }
.intl-contact-details { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.intl-contact-details a { font-size: 13px; color: var(--ink-soft); text-decoration: none; }
.intl-contact-details a:hover { color: var(--accent); }
@media (max-width: 900px) { .intl-contact-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .intl-contact-grid { grid-template-columns: 1fr; } }

/* ---- iletişim: form + harita ---- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; margin-top: 48px; align-items: start; }
/* Form VEYA harita alanlarından sadece biri doluysa (bkz. page.php) grid TEK sütuna
   düşer — aksi halde boş kalan yarı, gereksiz büyük bir boşluk gibi duruyordu. */
.contact-grid.contact-grid--single { grid-template-columns: 1fr; max-width: 640px; }
.contact-form-col h2, .contact-map-col h2 { margin-bottom: 18px; }
/* Form alanları zaten kendi zemini (--paper) olan kutucuklardı ama etraflarında
   hiçbir kart/çerçeve yoktu — sayfanın kendi (aynı --paper) arka planıyla
   kaynaşıp "boşlukta duran alanlar" gibi görünüyordu. .cm-map ile AYNI görsel
   dile (kart: raised zemin + border + radius) kavuşturuldu. */
.cm-form { background: var(--paper-raised); border: 1px solid var(--line); border-radius: 3px; padding: 28px 26px; }
@media (max-width: 480px) { .cm-form { padding: 22px 18px; } }
.cm-form label { display: block; font-family: var(--font-display); font-size: 13px; color: var(--ink); margin-bottom: 16px; }
.cm-form .wpcf7-form-control-wrap { display: block; margin-top: 6px; }
.cm-form input[type="text"], .cm-form input[type="email"], .cm-form input[type="tel"], .cm-form textarea {
  width: 100%; font-family: var(--font-body); font-size: 15px; color: var(--ink);
  background: var(--paper); border: 1px solid var(--line-strong); border-radius: 3px;
  padding: 12px 14px; transition: border-color .15s;
}
.cm-form textarea { min-height: 130px; resize: vertical; }
.cm-form input:focus, .cm-form textarea:focus { outline: none; border-color: var(--accent); }
.cm-form input[type="submit"] {
  background: var(--accent); color: #fff; border: none; border-radius: 3px; padding: 12px 28px;
  font-family: var(--font-display); font-size: 14px; letter-spacing: .02em; cursor: pointer; transition: background .15s;
}
.cm-form input[type="submit"]:hover { background: var(--accent-deep); }
.cm-form .wpcf7-not-valid-tip { display: block; color: #C0392B; font-size: 12.5px; margin-top: 6px; }
.cm-form .wpcf7-response-output { margin-top: 18px; padding: 12px 16px; border-radius: 3px; font-size: 14px; border: 1px solid var(--line-strong); }
.cm-form form.sent .wpcf7-response-output { border-color: var(--good); color: var(--good); }
.cm-form form.failed .wpcf7-response-output, .cm-form form.aborted .wpcf7-response-output { border-color: #C0392B; color: #C0392B; }
.cm-form form.invalid .wpcf7-response-output { border-color: var(--steel); color: var(--ink-soft); }
.cm-map { aspect-ratio: 4/3; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.cm-map iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ---- çerez onay bandı (bkz. inc/cookie-consent.php) ----
   Özelleştir → Çerez & KVKK kapalıyken bu elemanlar hiç basılmadığı için bu
   kurallar da ölü kod olmaz ama zararsızdır. Bosch Rexroth Türkiye referans
   alınarak: alt sabit bant + "Ayarlar" ile açılan kategori bazlı ikinci
   görünüm (aynı kutu içinde, ana görünüm gizlenip ayarlar görünümü açılır). */
.cerez-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 200; background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 28px rgba(31,27,23,.14); max-height: 92vh; overflow-y: auto; }
.cerez-banner[hidden] { display: none; }
.cerez-banner-inner { max-width: 1160px; margin: 0 auto; padding: 22px 24px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }
.cerez-banner-inner[hidden] { display: none; }
.cerez-banner-text { flex: 1 1 380px; }
.cerez-banner-text strong { display: block; font-family: var(--font-display); font-size: 15px; margin-bottom: 6px; }
.cerez-banner-text p { font-size: 13.5px; color: var(--ink-soft); line-height: 1.65; margin: 0; }
.cerez-banner-links { margin-top: 8px !important; font-size: 12.5px; }
.cerez-banner-links a { color: var(--accent); text-decoration: underline; }
.cerez-banner-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.cerez-banner-actions .btn { white-space: nowrap; padding: 11px 18px; }

.cerez-settings { max-width: 1160px; margin: 0 auto; padding: 22px 24px; }
.cerez-settings[hidden] { display: none; }
.cerez-settings h3 { margin-bottom: 8px; }
.cerez-settings > p { font-size: 13.5px; color: var(--ink-soft); margin-bottom: 18px; }
.cerez-category { border-top: 1px solid var(--line); padding: 16px 0; }
.cerez-category:first-of-type { border-top: none; padding-top: 0; }
.cerez-category-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cerez-category-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); }
.cerez-category p { font-size: 13px; color: var(--ink-soft); line-height: 1.6; margin: 6px 0 0; }
.cerez-toggle-locked { font-size: 11px; color: var(--steel); font-family: var(--font-display); letter-spacing: .04em; text-transform: uppercase; flex: 0 0 auto; }

.cerez-switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: 0 0 auto; }
.cerez-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.cerez-switch span { position: absolute; inset: 0; background: var(--line-strong); border-radius: 999px; transition: background .15s; pointer-events: none; }
.cerez-switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .15s; }
.cerez-switch input:checked + span { background: var(--accent); }
.cerez-switch input:checked + span::before { transform: translateX(16px); }
.cerez-switch input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

.cerez-settings-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.cerez-settings-actions .btn { padding: 11px 18px; }

@media (max-width: 680px) {
  .cerez-banner-inner { flex-direction: column; align-items: stretch; gap: 16px; }
  .cerez-banner-actions { flex-direction: column; }
  .cerez-banner-actions .btn { width: 100%; justify-content: center; }
  .cerez-settings-actions { flex-direction: column-reverse; }
  .cerez-settings-actions .btn { width: 100%; justify-content: center; }
}