/*
 * Linex → pickle uyarlama katmanı (LX-1). custom.css'ten SONRA yüklenir; custom.css satıcı dosyasıdır ve
 * değiştirilmez (tema sahibinin güncellemesi üzerine yazılabilsin; tek istisna TX1'in köşe yuvarlaklığı bağlaması:
 * docs/tokens.md §3). Belgeler: docs/tokens.md, docs/assets.md §6.
 * Denetim: python3 -I tools/css_audit.py — custom.css/mousecursor.css'teki her sabit renk ya burada aynı seçici +
 * özellikle ezilir ya da tools/css_audit_allow.json'da gerekçesiyle izinlidir; bu dosyada renk sabiti yalnız
 * var(--pickle-…, <Linex varsayılanı>) geri dönüşünde bulunur.
 * Tarayıcıyla görülmedi (W0-a / T2 gelmeden pickle'da render yok).
 *
 *  1. Takma ad katmanı (15 §11.1) ve türetilmiş renkler
 *  2. Ana renge bağlı degradeler (custom.css'te sabit #0B2B3F tonları) ve imleç renkleri
 *  3. Renkli arayüz SVG'lerinin maskeye çevrilmesi (ok, alıntı, fayda zemini)
 *  3b. Şablonların `<img>` ile bastığı simgeler ve dönen daireler → maske (TX1; renk panel tokenını izler)
 *  4. Veriden gelen bölüm arka planları (yer tutucu görseller pakette yok — G-8)
 *  5. Animasyon ve imleç kancaları (tema ayarı + prefers-reduced-motion — G-7)
 *  6. Uyarlama sınıfları (şablonların eklediği, Linex'te karşılığı olmayan)
 *  7. Sağdan sola (RTL) düzeltmeleri — `[dir="rtl"]`; rtlcss'in çeviremedikleri (LX-2)
 *  8. Vurgu üstü renk — vurgu zemininde çizilen metin, ikon ve sayaç rengi (`on_accent`; LX D-4)
 *
 * Sağdan sola sayfada layout bu dosyanın yerine `pickle-linex.rtl.css`'i yükler (custom.css → custom.rtl.css,
 * bootstrap.min.css → bootstrap.rtl.min.css ile birlikte). İkisi bu dosyadan tools/build_rtl.cjs (rtlcss) ile üretilir;
 * elle düzenlenmez. §7 rtlcss'in dışında tutulur (`rtl:begin:ignore`): kuralları zaten sağdan sola için yazılmıştır.
 */

/* 1. Takma ad katmanı -------------------------------------------------------------------------------------------
   Panelde değer verilmemiş token'da Linex varsayılanı geçerlidir (sıfır ayarla tema tasarlandığı gibi görünür). */
:root {
  --primary-color:   var(--pickle-color-primary,    #0B2B3F);
  --accent-color:    var(--pickle-color-accent,     #FBE87E);
  --bg-color:        var(--pickle-color-background, #F2F5FB);
  --text-color:      var(--pickle-color-text,       #555555);
  --secondary-color: var(--pickle-color-surface,    #FFFFFF);
  --error-color:     var(--pickle-color-danger,     rgb(230, 87, 87));
  --default-font:    var(--pickle-font-body,        "Plus Jakarta Sans", "Cairo", sans-serif);   /* Arapça glifler Cairo'dan (fonts.css) */

  /* Uyarlama tokenları (Linex'te değişken yok; ilgili kurallar bu dosyada) */
  --lx-heading-font: var(--pickle-font-heading, var(--default-font));
  --lx-radius:       var(--pickle-radius, 10px);
  /* Vurgu zemini (--accent-color) üstündeki metin/ikon rengi (panel: `on_accent`). Değer yoksa ana renk: Linex bu öğeleri
     hep ana renkle çizdi, boşken çıktı bugünkü ile aynıdır. Kuralları §8. */
  --lx-on-accent:    var(--pickle-on-accent, var(--primary-color));

  /* Swiper'ın varsayılan teması (gezinme/sayfalama, Linex ezmediği yerde) vurgu rengine */
  --swiper-theme-color: var(--accent-color);
}

/* Özel özellik bildirimi ayrıştırmada doğrulanmaz: color-mix desteklemeyen tarayıcıda değer kullanım yerinde geçersiz
   olur (custom.css'teki sabite DÖNMEZ). Bu yüzden @supports içinde; dışında custom.css'in sabit tonu kalır.
   color-mix: Chromium 111+, Safari 16.2+, Firefox 113+. */
@supports (color: color-mix(in srgb, white 50%, transparent)) {
  :root {
    --divider-color:      color-mix(in srgb, var(--primary-color) 10%, transparent);
    --dark-divider-color: color-mix(in srgb, var(--white-color) 8%, transparent);
  }
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--lx-heading-font);
}

/* 2. Degradeler ve imleç renkleri -----------------------------------------------------------------------------------
   Normal özellikte color-mix desteklenmezse bildirim ayrıştırmada düşer ve custom.css'teki sabit değer kalır.
   Saydam uç: `transparent` (custom.css'teki rgba(11, 43, 63, 0.00) ile aynı; ara değerleme ön-çarpımlı). */
.image-anime::after {
  background-color: color-mix(in srgb, var(--white-color) 30%, transparent);
}

.team-item-image figure::before {
  background-image: linear-gradient(180deg, transparent 58.21%, color-mix(in srgb, var(--primary-color) 80%, transparent) 87.01%);
}

.service-key-point-box::before {
  background-image: linear-gradient(270deg, color-mix(in srgb, var(--primary-color) 20%, transparent) 0.12%, color-mix(in srgb, var(--primary-color) 90%, transparent) 84.34%);
}

.hero-metal::before {
  background-image: linear-gradient(270deg, transparent 42.05%, color-mix(in srgb, var(--primary-color) 60%, transparent) 58.6%, var(--primary-color) 100%);
}

.hero-info-image-metal::before {
  background-image: linear-gradient(270deg, transparent 0%, color-mix(in srgb, var(--primary-color) 56%, transparent) 57.35%, color-mix(in srgb, var(--primary-color) 80%, transparent) 100%);
}

.what-we-image-metal figure::before {
  background-image: linear-gradient(180deg, transparent 60.86%, var(--primary-color) 91.65%);
}

.intro-video-metal::before {
  background-image: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--primary-color) 90%, transparent) 100%);
}

.our-advantages-stone::before {
  background-image: linear-gradient(270deg, var(--primary-color) 0%, transparent 128.64%);
}

.faq-image-stone::before {
  background-image: linear-gradient(180deg, transparent 0%, var(--primary-color) 100%);
}

/* İmleç metin balonu (mousecursor.css:132 #000) ve beyaz katmanlar (mousecursor.css yalnız `cursor` açıkken yüklenir) */
.cb-cursor.-text::before {
  background: var(--primary-color);
}

.cb-cursor-text,
.cb-cursor.-inverse {
  color: var(--white-color);
}

@supports (mix-blend-mode: exclusion) {
  .cb-cursor.-exclusion::before,
  .cb-cursor.-opaque::before {
    background: var(--white-color);
  }
}

/* 3. Renkli arayüz SVG'leri → maske -------------------------------------------------------------------------------
   Ok simgesi (#0B2B3F sabit dolgulu SVG) tek başına bir sözde öğede duruyorsa: görsel kaldırılır, öğe ana renkle
   boyanır ve okun biçimiyle maskelenir. Fareyle gelinen durumdaki `filter: brightness(0) invert(1)` (beyaz) ve
   `background: url(arrow-white.svg)` kuralları maskenin üstünde aynı sonucu verir.
   Bilinen sınır: `.btn-default` düğmelerinde ok, renkli kutunun (`::before` zemini) üstünde ikinci katmandır; tek
   sözde öğede kutu + farklı renkte ok maskeyle çizilemez → orada Linex'in sabit renkli oku kalır (docs/tokens.md §5.2). */
.readmore-btn::before {
  background-image: none;
  background-color: var(--primary-color);
  -webkit-mask: url('../images/arrow-primary.svg') right center / cover no-repeat;
  mask: url('../images/arrow-primary.svg') right center / cover no-repeat;
}

.page-category-list ul li a::before {
  background-image: none;
  background-color: var(--primary-color);
  -webkit-mask: url('../images/arrow-primary.svg') center / cover no-repeat;
  mask: url('../images/arrow-primary.svg') center / cover no-repeat;
}

.testimonial-slider-stone .testimonial-button-next-stone::before,
.testimonial-slider-stone .testimonial-button-prev-stone::before {
  background-image: none;
  background-color: var(--primary-color);
  -webkit-mask: url('../images/arrow-primary.svg') center / 20px auto no-repeat;
  mask: url('../images/arrow-primary.svg') center / 20px auto no-repeat;
}

/* Yazı alıntısı simgesi (icon-blockquote.svg, #FBE87E): blockquote zemininden ayrı bir sözde öğeye taşınır */
.post-entry blockquote {
  position: relative;
  background-image: none;
}

.post-entry blockquote::before {
  content: '';
  position: absolute;
  top: 30px;
  left: 30px;
  width: 45px;
  height: 45px;
  background-color: var(--accent-color);
  -webkit-mask: url('../images/icon-blockquote.svg') center / contain no-repeat;
  mask: url('../images/icon-blockquote.svg') center / contain no-repeat;
}

/* Avantajlar görselinin zemin şekli (benefits-bg-image.svg, #0B2B3F) */
.our-benefits-image figure {
  position: relative;
  isolation: isolate;
  background-image: none;
}

.our-benefits-image figure::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--primary-color);
  -webkit-mask: url('../images/benefits-bg-image.svg') top center / 100% auto no-repeat;
  mask: url('../images/benefits-bg-image.svg') top center / 100% auto no-repeat;
}

/* 3b. Şablonların `<img>` ile bastığı simgeler → maske (TX1) -------------------------------------------------------
   `<img>` içindeki SVG sayfanın CSS rengini göremez; şablonlar bu simgeleri `lx.glyph('<dosya adı>')` ve dönen daireleri
   `lx.disc('<ad>')` ile basar (views/partials/macros.twig): `<span aria-hidden>` + `mask` + `background-color`, §3 ile aynı
   yöntem. SVG'nin dolgu rengi önemsizdir (maskede yalnız alfa kullanılır); renk burada panel tokenına bağlanır. Boyut ve
   konum kuralları Linex'in `… img` kurallarının aynasıdır: `width: 100%; max-width: N` → `width: N` (custom.css satırı
   yorumda); öğe `<img>` gibi satır içidir (`vertical-align: middle`, Bootstrap reboot). İçerik görselleri ve logolar
   (`badge.image`, `icon.url` …) bu kapsamda DEĞİLDİR: onlar `<img>` kalır. */
[data-lx-glyph] {
  display: inline-block;
  vertical-align: middle;
  aspect-ratio: 1;
  background-color: var(--primary-color);
}

[data-lx-glyph="icon-phone-accent"],
[data-lx-glyph="icon-mail-accent"],
[data-lx-glyph="icon-location-accent"] {
  background-color: var(--accent-color);
}

[data-lx-glyph="icon-phone-accent"] {
  width: 20px;
  -webkit-mask: url('../images/icon-phone-accent.svg') center / contain no-repeat;
  mask: url('../images/icon-phone-accent.svg') center / contain no-repeat;
}

[data-lx-glyph="icon-mail-accent"] {
  width: 20px;
  -webkit-mask: url('../images/icon-mail-accent.svg') center / contain no-repeat;
  mask: url('../images/icon-mail-accent.svg') center / contain no-repeat;
}

[data-lx-glyph="icon-location-accent"] {
  width: 20px;
  -webkit-mask: url('../images/icon-location-accent.svg') center / contain no-repeat;
  mask: url('../images/icon-location-accent.svg') center / contain no-repeat;
}

[data-lx-glyph="icon-phone-primary"] {
  width: 24px;
  -webkit-mask: url('../images/icon-phone-primary.svg') center / contain no-repeat;
  mask: url('../images/icon-phone-primary.svg') center / contain no-repeat;
}

[data-lx-glyph="icon-mail-primary"] {
  width: 24px;
  -webkit-mask: url('../images/icon-mail-primary.svg') center / contain no-repeat;
  mask: url('../images/icon-mail-primary.svg') center / contain no-repeat;
}

[data-lx-glyph="icon-location-primary"] {
  width: 25px;
  -webkit-mask: url('../images/icon-location-primary.svg') center / contain no-repeat;
  mask: url('../images/icon-location-primary.svg') center / contain no-repeat;
}

[data-lx-glyph="icon-headset"] {
  width: 60px;
  -webkit-mask: url('../images/icon-headset.svg') center / contain no-repeat;
  mask: url('../images/icon-headset.svg') center / contain no-repeat;
}

[data-lx-glyph="icon-share"] {
  width: 20px;
  -webkit-mask: url('../images/icon-share.svg') center / contain no-repeat;
  mask: url('../images/icon-share.svg') center / contain no-repeat;
}

[data-lx-glyph="icon-sparkel"] {
  width: 30px;
  -webkit-mask: url('../images/icon-sparkel.svg') center / contain no-repeat;
  mask: url('../images/icon-sparkel.svg') center / contain no-repeat;
}

[data-lx-glyph="arrow-primary"] {
  width: 20px;
  -webkit-mask: url('../images/arrow-primary.svg') center / contain no-repeat;
  mask: url('../images/arrow-primary.svg') center / contain no-repeat;
}

[data-lx-glyph="testimonial-quote"] {
  width: 24px;
  -webkit-mask: url('../images/testimonial-quote.svg') center / contain no-repeat;
  mask: url('../images/testimonial-quote.svg') center / contain no-repeat;
}

/* İki renkli (vurgu rengi hat + ana renkli iki küçük nokta): öğenin kendisi maskelenmez, iki sözde öğe katmandır */
[data-lx-glyph="testimonial-quote-metal"] {
  position: relative;
  width: 40px;
  background-color: transparent;
}

[data-lx-glyph="testimonial-quote-metal"]::before,
[data-lx-glyph="testimonial-quote-metal"]::after {
  content: '';
  position: absolute;
  inset: 0;
}

[data-lx-glyph="testimonial-quote-metal"]::before {
  background-color: var(--accent-color);
  -webkit-mask: url('../images/testimonial-quote-metal.svg') center / contain no-repeat;
  mask: url('../images/testimonial-quote-metal.svg') center / contain no-repeat;
}

[data-lx-glyph="testimonial-quote-metal"]::after {
  background-color: var(--primary-color);
  -webkit-mask: url('../images/testimonial-quote-metal-dots.svg') center / contain no-repeat;
  mask: url('../images/testimonial-quote-metal-dots.svg') center / contain no-repeat;
}

[data-lx-glyph="testimonial-quote-stone"] {
  width: 50px;
  aspect-ratio: 50 / 43;
  -webkit-mask: url('../images/testimonial-quote-stone.svg') center / contain no-repeat;
  mask: url('../images/testimonial-quote-stone.svg') center / contain no-repeat;
}

/* Bağlama göre boyut ve geçişler (her blok ilgili custom.css `img` kuralının aynasıdır) */
.footer-contact-item p [data-lx-glyph] {                                            /* :3145 — footer (default) iletişim satırı */
  width: 20px;
  margin-right: 10px;
}

.footer-contact-item-stone .icon-box [data-lx-glyph] {                              /* :11681 — footer (stone) iletişim satırı */
  width: 18px;
}

.footer-location-item-metal .icon-box [data-lx-glyph] {                             /* :9412, :9858 — footer (metal) konum */
  width: 24px;
}

.hero-info-contact-header-metal .icon-box [data-lx-glyph] {                         /* :7945, :9904 — metal kahraman iletişim kutusu */
  width: 60px;
}

/* Renkli kutu içindeki simgeler: fareyle gelince kutu ana renge döner, simge beyazlar (:4159, :5630, :1350, :8193, :5152) */
.sidebar-cta-contact-item .icon-box [data-lx-glyph],                                /* :4151 */
.contact-info-item .icon-box [data-lx-glyph],                                       /* :5622 */
.about-contact-box .icon-box [data-lx-glyph],                                       /* :1342 */
.about-contact-box-metal .icon-box [data-lx-glyph],                                 /* :8185 */
.team-contact-item .icon-box [data-lx-glyph] {                                      /* :5144 */
  position: relative;
  width: 24px;
  transition: all 0.4s ease-in-out;
  z-index: 1;
}

.sidebar-cta-contact-item .icon-box [data-lx-glyph] {
  width: 20px;
}

.sidebar-cta-contact-item:hover .icon-box [data-lx-glyph],
.contact-info-item:hover .icon-box [data-lx-glyph],
.about-contact-box:hover .icon-box [data-lx-glyph],
.about-contact-box-metal:hover .icon-box [data-lx-glyph],
.team-contact-item:hover .icon-box [data-lx-glyph] {
  filter: brightness(0) invert(1);
}

.footer-newsletter-form .newsletter-btn [data-lx-glyph],                            /* :3089 — bülten düğmesi oku */
.footer-newsletter-form-stone .form-group .newsletter-btn [data-lx-glyph] {         /* :11757 */
  width: 20px;
  transition: all 0.3s ease-in-out;
}

.footer-newsletter-form-metal .newsletter-btn [data-lx-glyph] {                     /* :9384 */
  width: 18px;
  transition: all 0.3s ease-in-out;
}

.footer-newsletter-form .newsletter-btn:hover [data-lx-glyph],                      /* :3095, :9390, :11763 */
.footer-newsletter-form-metal .newsletter-btn:hover [data-lx-glyph],
.footer-newsletter-form-stone .form-group .newsletter-btn:hover [data-lx-glyph],
.project-btn a:hover [data-lx-glyph] {                                              /* :4844 */
  transform: rotate(45deg);
}

.project-btn a [data-lx-glyph] {                                                    /* :4838, :6873 — proje kartı oku */
  width: 40px;
  transition: all 0.3s ease-in-out;
}

.team-social-btn [data-lx-glyph] {                                                  /* :3848 — ekip kartı paylaşım düğmesi */
  width: 20px;
}

.testimonial-item-quote [data-lx-glyph] {                                           /* :2547, :7296 — referans alıntı simgesi */
  width: 24px;
}

.testimonial-item-quote-metal [data-lx-glyph] {                                     /* :9107 */
  width: 40px;
}

.testimonial-item-quote-stone [data-lx-glyph] {                                     /* :11297, :12583 */
  width: 50px;
}

.scrolling-content span [data-lx-glyph] {                                           /* :1030, :6279, :7088 — kayan şerit yıldızı */
  width: 30px;
  margin-right: 20px;
  animation: sparkelotate 3s linear infinite;
}

.section-footer-text.section-satisfy-img .satisfy-client-image.add-more [data-lx-glyph] {   /* :1699 */
  width: 16px;
}

@media only screen and (max-width: 991px) {
  .footer-location-item-metal .icon-box [data-lx-glyph] {                           /* :9858 */
    width: 20px;
  }

  .project-btn a [data-lx-glyph] {                                                  /* :6873 */
    width: 28px;
  }

  .scrolling-content span [data-lx-glyph] {                                         /* :6279 */
    width: 26px;
  }
}

@media only screen and (max-width: 767px) {
  .hero-info-contact-header-metal .icon-box [data-lx-glyph] {                       /* :9904 */
    width: 50px;
  }

  .testimonial-item-quote [data-lx-glyph] {                                         /* :7296 */
    width: 20px;
  }

  .testimonial-item-quote-stone [data-lx-glyph] {                                   /* :12583 */
    width: 40px;
  }

  .scrolling-content span [data-lx-glyph] {                                         /* :7088 */
    width: 22px;
    margin-right: 15px;
  }
}

/* Dönen daireler — varsayılan: metni yola gömülü Linex SVG'si (rozet başlığı varken metinli daire aşağıda, TX3). contact-us-circle / learn-more-circle: öğenin kendisi zemindir
   (vurgu rengi daire; ortasında, okun altında beyaz çekirdek), `::before` ana renkli yazı + iç dairedir (`*-ink.svg`: Linex
   SVG'sinden zemin disk çıkarılmış, ok iç daireden SVG `<mask>` ile oyulmuş — oyuktan beyaz çekirdek görünür). Çekirdek
   yarıçapı okun (%20 / %13) ile iç dairenin (%50 / %33) arasında seçildi. work-circle-metal'da zemin yok: yazı beyaz, ok vurgu
   rengi — tek maske (SVG'nin kendisi) üstünde ortadaki ok bölgesi (yarıçapın %50'sine kadar; ok %28'de biter, yazı %81'de
   başlar) vurgu, dış halka beyaz boyanır. */
[data-lx-disc] {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  animation: infiniterotate 20s infinite linear;
}

a:hover > [data-lx-disc] {
  animation-play-state: paused;
}

[data-lx-disc="contact-us-circle"] {
  background: radial-gradient(circle closest-side, var(--white-color) 0 30%, var(--accent-color) 30%);
}

[data-lx-disc="learn-more-circle"] {
  background: radial-gradient(circle closest-side, var(--white-color) 0 22%, var(--accent-color) 22%);
}

[data-lx-disc="contact-us-circle"]::before,
[data-lx-disc="learn-more-circle"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--primary-color);
}

[data-lx-disc="contact-us-circle"]::before {
  -webkit-mask: url('../images/contact-us-circle-ink.svg') center / 100% 100% no-repeat;
  mask: url('../images/contact-us-circle-ink.svg') center / 100% 100% no-repeat;
}

[data-lx-disc="learn-more-circle"]::before {
  -webkit-mask: url('../images/learn-more-circle-ink.svg') center / 100% 100% no-repeat;
  mask: url('../images/learn-more-circle-ink.svg') center / 100% 100% no-repeat;
}

[data-lx-disc="work-circle-metal"] {
  background: radial-gradient(circle closest-side, var(--accent-color) 0 50%, var(--white-color) 50%);
  -webkit-mask: url('../images/work-circle-metal.svg') center / 100% 100% no-repeat;
  mask: url('../images/work-circle-metal.svg') center / 100% 100% no-repeat;
}

/* Metinli daire (`lx.disc(ad, metin, id)`; G-10, TX3): yazı Linex SVG'sinin yola gömülü yazısı yerine panelin rozet başlığıdır,
   satır içi SVG `textPath` ile çizilir (`fill: currentColor`). Zemin ve iç daire/ok yukarıdaki katmanların aynısıdır; yalnız
   `::before` maskesi yazısız çekirdektir (`*-core.svg`: Linex SVG'sinin iç dairesi + oku, yazı yolları çıkarılmış).
   work-circle-metal'da öğenin kendi maskesi kalkar (alt öğe SVG'yi de maskelerdi): yazı beyaz, ok `::before`'da vurgu rengi.
   Dönüş ve hareket azaltma `[data-lx-disc]` kurallarından gelir; sağdan solada dönüş yönü custom.rtl.css'in aynasıdır. */
[data-lx-disc] > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

[data-lx-disc] text {
  fill: currentColor;
  font-family: inherit;
  font-weight: 700;
  text-transform: uppercase;
}

[data-lx-disc="contact-us-circle"][data-lx-disc-text],
[data-lx-disc="learn-more-circle"][data-lx-disc-text] {
  color: var(--primary-color);
}

[data-lx-disc="contact-us-circle"][data-lx-disc-text]::before {
  -webkit-mask: url('../images/contact-us-circle-core.svg') center / 100% 100% no-repeat;
  mask: url('../images/contact-us-circle-core.svg') center / 100% 100% no-repeat;
}

[data-lx-disc="learn-more-circle"][data-lx-disc-text]::before {
  -webkit-mask: url('../images/learn-more-circle-core.svg') center / 100% 100% no-repeat;
  mask: url('../images/learn-more-circle-core.svg') center / 100% 100% no-repeat;
}

[data-lx-disc="work-circle-metal"][data-lx-disc-text] {
  background: none;
  -webkit-mask: none;
  mask: none;
  color: var(--white-color);
}

[data-lx-disc="work-circle-metal"][data-lx-disc-text]::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--accent-color);
  -webkit-mask: url('../images/work-circle-metal-core.svg') center / 100% 100% no-repeat;
  mask: url('../images/work-circle-metal-core.svg') center / 100% 100% no-repeat;
}

.learn-more-circle a [data-lx-disc] {                                               /* :1126, :5953, :7109 */
  width: 180px;
}

.contact-us-circle a [data-lx-disc] {                                               /* :2827, :6513 */
  width: 120px;
}

.work-circle-metal a [data-lx-disc] {                                               /* :8486, :9745, :10034 */
  width: 140px;
}

.contact-us-circle-metal a [data-lx-disc] {                                         /* :8634, :9514, :10063 */
  width: 190px;
  border: 10px solid var(--white-color);
}

.contact-us-circle-stone a [data-lx-disc] {                                         /* :10376, :11934, :12388 */
  width: 160px;
}

@media only screen and (max-width: 1440px) {
  .contact-us-circle-metal a [data-lx-disc] {
    width: 160px;
  }
}

@media only screen and (max-width: 1024px) {
  .learn-more-circle a [data-lx-disc] {
    width: 140px;
  }

  .contact-us-circle-stone a [data-lx-disc] {
    width: 130px;
  }
}

@media only screen and (max-width: 991px) {
  .contact-us-circle a [data-lx-disc] {
    width: 100px;
  }

  .work-circle-metal a [data-lx-disc] {
    width: 120px;
  }
}

@media only screen and (max-width: 767px) {
  .learn-more-circle a [data-lx-disc],
  .contact-us-circle-stone a [data-lx-disc] {
    width: 100px;
  }

  .work-circle-metal a [data-lx-disc] {
    width: 100px;
  }

  .contact-us-circle-metal a [data-lx-disc] {
    width: 110px;
    border-width: 5px;
  }

  .footer-lets-touch-box .contact-us-circle a [data-lx-disc] {                      /* :7383 */
    width: 80px;
  }
}

/* 4. Bölüm arka planları -------------------------------------------------------------------------------------------
   custom.css bu bölümlerin zeminini boyut etiketli yer tutucu fotoğraflardan çeker; o dosyalar pakette yoktur
   (docs/assets.md §4.1). Görsel veriden gelir: şablon satır içi `background-image` basar (satır içi stil bu kuralı
   ezer). Görsel yoksa koyu zemin rengi (bölümler koyu zemin üstü beyaz metin taşır). */
.hero,
.page-header,
.hero-metal,
.intro-video-metal,
.our-benefits-stone,
.our-advantages-stone,
.service-key-point-box {
  background-image: none;
  background-color: var(--primary-color);
}

/* Metal "hakkımızda" sayacı: rakamlar görselle doldurulmuş metindir (background-clip: text); görsel yerine vurgu rengi */
.about-us-image-counter-metal h2 {
  background-image: none;
  background-color: var(--accent-color);
}

/* 5. Animasyon ve imleç kancaları --------------------------------------------------------------------------------
   `lx-anim`: layout `theme.settings.animations` açıkken <html>'e yazar; linex.js GSAP yüklenemezse ya da hareket
   azaltma istenmişse kaldırır. Linex `.reveal`'ı her zaman gizler (custom.css:183) ve GSAP açar; animasyon kapalıyken
   görseller görünür kalmalı. */
.reveal {
  visibility: visible;
}

.lx-anim .reveal {
  visibility: hidden;
}

/* `lx-cursor-active`: linex.js özel imleci gerçekten kurduğunda yazar (ayar açık + ince işaretçi + hareket azaltma
   yok). Linex bu öğelerde yerel imleci gizler (cursor: none); özel imleç yokken yerel imleç geri gelir. */
html:not(.lx-cursor-active) .section-title h1,
html:not(.lx-cursor-active) .section-title h2,
html:not(.lx-cursor-active) .hero-info-video a,
html:not(.lx-cursor-active) .video-play-button a,
html:not(.lx-cursor-active) .testimonial-slider .swiper-wrapper,
html:not(.lx-cursor-active) .post-featured-image a,
html:not(.lx-cursor-active) .page-header-box h1,
html:not(.lx-cursor-active) .team-item-image a,
html:not(.lx-cursor-active) .page-gallery-box .photo-gallery a,
html:not(.lx-cursor-active) .video-gallery-image a,
html:not(.lx-cursor-active) .video-gallery-image a::after,
html:not(.lx-cursor-active) .testimonial-slider-metal .swiper-wrapper,
html:not(.lx-cursor-active) .testimonial-slider-stone .swiper-wrapper {
  cursor: revert;
}

@media (prefers-reduced-motion: reduce) {
  .scrolling-content,
  .scrolling-content span img,
  .scrolling-content span [data-lx-glyph],
  [data-lx-disc],
  .hero-info-video img,
  .learn-more-circle a img,
  .contact-us-circle a img,
  .contact-us-circle-metal a img,
  .contact-us-circle-stone a img,
  .work-circle-metal a img,
  .video-play-button a::after,
  .loading {
    animation: none !important;
  }

  .lx-anim .reveal {
    visibility: visible;
  }

  .parallaxie {
    background-attachment: scroll !important;
  }
}

/* 6. Uyarlama sınıfları --------------------------------------------------------------------------------------------- */

/* Bölüm zemini karartma / açma katmanı (zarf `background.overlay`, G-8, TX3; macros.twig `bg_class`): içe dönük gölge zeminin
   üstünde, içeriğin ve sözde öğelerin altında boyanır — Linex bölümlerinin `::before`/`::after` katmanlarıyla çakışmaz. */
.lx-overlay-dark {
  box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--primary-color) 70%, transparent);
}

.lx-overlay-light {
  box-shadow: inset 0 0 0 100vmax color-mix(in srgb, var(--white-color) 70%, transparent);
}

/* Sayfa başlığının alt satırı (`PageHeader.data.subtitle`; Linex'te yok, şablon doluysa `<p>` basar — LX D-4 düzeltmesi): zemin koyu
   (ana renk katmanı), başlık/sayfa yolu/yazı meta satırı beyaz çizilir; `<p>` ise gövde rengini (#555) alıp koyu zeminde
   okunmuyordu. Aynı beyaz (`--white-color`); boşluklar değişmez. */
.page-header-box p {
  color: var(--white-color);
}

/* Default ailesinin header'ı saydam ve `absolute`'tur: Linex'te her sayfa altında koyu bir üst bantla (hero ya da sayfa
   başlığı) açılır. Sayfada böyle bir bant yoksa (ör. HeroSlider'sız ana sayfa) header içeriğin üstüne biner; bu durumda
   header kendi koyu bandını çizer ve akışta yer kaplar. :has() — Chromium 105+, Safari 15.4+, Firefox 121+; desteklemeyen
   tarayıcıda Linex davranışı kalır. */
body:not(:has(.hero, .page-header)) header.main-header:not(.header-metal):not(.header-stone) {
  position: relative;
  top: 0;
  margin-top: 20px;
}

body:not(:has(.hero, .page-header)) header.main-header:not(.header-metal):not(.header-stone) .header-sticky {
  background: var(--primary-color);
}

/* Logo yüklenmemişken header site adını yazar (Linex'te yalnız logo görseli var): default ailesi koyu zemin */
.lx-brand-text {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--primary-color);
}

header.main-header:not(.header-metal):not(.header-stone) .lx-brand-text {
  color: var(--white-color);
}

/* Etkin menü öğesi (aria-current="page"; Linex'te yalnız :hover var — G-9) */
.main-menu ul li a[aria-current="page"] {
  color: var(--accent-color);
}

/* Counters `default`: Linex'te tek başına sayaç bölümü yok; liste "ne yapıyoruz" bölümünün üst çizgisini taşır */
.our-counters {
  padding: 100px 0;
}

.our-counters .what-we-counters-list {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ContentBlock `checklist`: tam genişlik yerde kendi kabını açan "önemli noktalar" kutusu (sütun içinde boşluk küçülür) */
.lx-section {
  padding: 100px 0;
}

.lx-page-single .lx-section {
  padding: 0;
}

/* Map: onay yer tutucusu (iframe yerine; CONSENT) */
.lx-map-consent {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 450px;
  padding: 30px;
  text-align: center;
  background-color: var(--secondary-color);
  border-radius: var(--lx-radius);
}

.lx-map-consent p {
  margin: 0;
}

/* Breadcrumb widget'ı tek başına konursa (Linex sayfa yolunu PageHeader içinde basar) */
.lx-breadcrumb {
  padding: 30px 0;
}

.lx-breadcrumb .breadcrumb {
  margin: 0;
}

/* PricingTable: plana dahil olmayan özellik */
.lx-not-included {
  opacity: 0.5;
  text-decoration: line-through;
}

/* Form: görsel captcha */
.lx-captcha-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--lx-radius);
}

/* Stone referans kaydırıcısı: Linex'in div düğmeleri <button>'a çevrildi (klavye); tarayıcı düğme biçimi sıfırlanır */
.testimonial-btn-stone button {
  border: 0;
  padding: 0;
  font: inherit;
}

/* İkon kutusunda öğe görseli (LX Tur A, R4; macros.twig `icon_box`): ikonu olmayan öğe (ürün, proje …) hizmet listelerinde
   görseliyle çizilir. Görsel kutuyu doldurur; Linex'in ikonu beyaza çeviren fareyle-üstünde süzgeci görsele uygulanmaz. */
.icon-box.lx-icon-photo {
  padding: 0;
}

.icon-box.lx-icon-photo img {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  filter: none !important;
}

/* Ürün/proje ızgarası detay sütununda (kategori sayfaları, LX Tur C-2; sidebar-left `col-lg-8`): bölüm dolgusu ve iç kap sütundan
   gelir — ızgara sütunun genişliğini kullanır */
.lx-page-single .page-projects {
  padding: 0;
}

.lx-page-single .page-projects > .container {
  max-width: none;
  padding: 0;
}

/* Ürün kartı (ContentList `products`, ContentDetail `product` ilgili ürünler; Linex proje kartı + kod ve özet) */
.lx-product-item .project-item-content p {
  margin: 10px 0 0;
}

.lx-product-sku span,
.lx-product-meta li span {
  font-weight: 600;
  color: var(--primary-color);
}

/* Ürün detayı: kod/kategori satırı ve teklif bağlantısı (proje bilgi kutusunun zemini) */
.lx-product-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 40px;
  padding: 20px 30px;
  background: var(--secondary-color);
  border-radius: var(--lx-radius);
}

.lx-product-meta li a {
  color: var(--text-color);
}

.lx-product-meta li a:hover {
  color: var(--primary-color);
}

.lx-product-meta ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 30px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Özellik tablosu: başlık bandı kenar listesinin (`.page-category-list h3`) görünümünde, satırlar ayraçlı */
.lx-product-specs {
  margin-bottom: 60px;
  overflow: hidden;
  border-radius: var(--lx-radius);
}

.lx-product-specs h3 {
  margin: 0;
  padding: 22px 30px;
  font-size: 20px;
  color: var(--secondary-color);
  background: var(--primary-color);
}

.lx-product-specs table {
  width: 100%;
  border-collapse: collapse;
  background: var(--secondary-color);
}

.lx-product-specs th,
.lx-product-specs td {
  padding: 15px 30px;
  text-align: start;
  vertical-align: top;
  border-bottom: 1px solid var(--divider-color);
}

.lx-product-specs tr:last-child th,
.lx-product-specs tr:last-child td {
  border-bottom: 0;
}

.lx-product-specs tbody th {
  width: 40%;
  font-weight: 600;
  color: var(--primary-color);
}

.lx-product-specs .lx-product-specs-group th {
  width: auto;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: var(--bg-color);
}

/* Belgeler: kenar listesi görünümü; uzantı ve boyut başlığın yanında */
.lx-product-documents ul li a span {
  font-size: 14px;
  color: var(--text-color);
}

.lx-product-share {
  margin-bottom: 40px;
}

.lx-product-related {
  margin-top: 20px;
}

.lx-product-related .section-title {
  margin-bottom: 30px;
}

/* CategoryFilter `list`: etkin kategori; alt kategoriler girintili (Linex kenar listesinde iç içe liste yok) */
nav.page-category-list a[aria-current="page"],
nav.page-category-list span[aria-current="page"] {
  font-weight: 600;
  color: var(--primary-color);
}

.page-category-list ul ul {
  padding: 15px 0 0;
  padding-inline-start: 20px;
}

.page-category-list ul ul li {
  padding-bottom: 10px;
  margin-bottom: 10px;
}

/* CategoryFilter `inline`: Linex kart etiketinin hapları, ortalı ve sarılan; etkin hap ana renkte */
.lx-category-filter {
  padding-top: 100px;
}

.lx-category-filter + .page-projects {
  padding-top: 40px;
}

.lx-category-filter .project-item-tag {
  margin-bottom: 0;
}

.lx-category-filter .project-item-tag ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}

.lx-category-filter .project-item-tag ul li.active {
  color: var(--white-color);
  background-color: var(--primary-color);
}

/* Form (FORM-c): hata ve durum kutuları, dosya alanı, seçenek grupları (ürün seçici), teklif formunun grup başlıkları */
.contact-form .help-block {
  margin: 8px 0 0;
  font-size: 14px;
}

.contact-form .with-errors:empty,
.contact-form [data-pickle-form-status]:empty {
  display: none;
}

.contact-form .with-errors,
.contact-form [data-pickle-form-status][data-pickle-form-state="error"] {
  color: var(--error-color);
}

.contact-form-btn [data-pickle-form-status] {
  margin: 20px 0 0;
  font-size: 18px;
}

.contact-form .form-label,
.contact-form fieldset fieldset legend {
  display: block;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--primary-color);
}

.contact-form fieldset ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.contact-form .form-check-input {
  margin-inline-end: 8px;
}

.contact-form .form-check-input:checked {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.contact-form [data-pickle-form-captcha-refresh] {
  margin-top: 10px;
  padding: 0;
  background: none;
  border: 0;
}

.lx-quote-form {
  padding: 100px 0;
}

.lx-page-single .lx-quote-form {
  padding: 60px 0 0;
}

.lx-quote-form fieldset > legend {
  margin-bottom: 20px;
  font-size: 20px;
  color: var(--primary-color);
}

/* Türkçe büyük İ (LX Tur C; ölçüm 2026-11-09, Chromium): `text-transform: capitalize` `lang="tr"`'de «i»yi noktasız «I» yapar
   («isteyin» → «Isteyin»), `uppercase` doğru «İ» verir. custom.css'te capitalize taşıyan 21 seçicinin hepsi Türkçe sayfada
   dönüşümsüz kalır (metin panelde/sözlükte yazıldığı gibi); `uppercase` kuralları değişmez. Liste custom.css'ten üretildi —
   Linex güncellemesinde yeni `capitalize` kuralı gelirse buraya eklenir. */
.btn-default:lang(tr),
.readmore-btn:lang(tr),
.section-title h3:lang(tr),
.main-menu ul li a:lang(tr),
.slicknav_nav .slicknav_row:lang(tr),
.slicknav_nav li a:lang(tr),
.scrolling-content span:lang(tr),
.section-footer-text p a:lang(tr),
.video-play-button h3:lang(tr),
.pricing-item-content h2 sub:lang(tr),
.post-item-tags a:lang(tr),
.footer-menu ul li:lang(tr),
.page-header-box ol li.breadcrumb-item:lang(tr),
.page-category-list ul li a:lang(tr),
.tag-links:lang(tr),
.post-tags .tag-links a:lang(tr),
.project-item-tag ul li:lang(tr),
.footer-links-metal h3:lang(tr),
.footer-links-metal ul li:lang(tr),
.pricing-item-price-stone h2 sub:lang(tr),
.footer-links-stone ul li:lang(tr) {
  text-transform: none;
}

@media only screen and (max-width: 991px) {
  .our-counters,
  .lx-section {
    padding: 50px 0;
  }

  .lx-quote-form {
    padding: 50px 0;
  }

  .lx-category-filter {
    padding-top: 50px;
  }

  .lx-product-specs th,
  .lx-product-specs td,
  .lx-product-meta {
    padding: 12px 20px;
  }

  .post-entry blockquote::before {
    top: 20px;
    left: 20px;
    width: 40px;
    height: 40px;
  }
}

@media only screen and (max-width: 767px) {
  .post-entry blockquote::before {
    top: 15px;
    left: 15px;
  }
}

/* Galeri (LX D-3; widgets/Gallery/{grid,videos}.twig + views/partials/gallery-video.twig): `.photo-gallery img` ve
   `.video-gallery-image img` kuralları (custom.css §29-30) yalnız `<img>` içindir; yerel `<video>`, kapaksız videonun oynat kutusu
   ve altyazı için aynı oran (1 / 0.81) ve köşe yarıçapı (`--pickle-radius`) burada. Altyazı bağlantı içinde durabildiği için
   (`a > figure > figcaption`) rengi bağlantı mavisi almasın diye metin rengi açıkça yazılır. */
.lx-gallery-video {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 0.81;
  object-fit: cover;
  border-radius: var(--pickle-radius, 10px);
}

.lx-gallery-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 0.81;
  background: var(--primary-color);
  color: var(--accent-color);
  border-radius: var(--pickle-radius, 10px);
}

.lx-gallery-caption {
  margin-top: 0.5rem;
  color: var(--text-color);
}

/* 7. Sağdan sola (RTL) ------------------------------------------------------------------------------------------------
   Yalnız <html dir="rtl">'de eşleşir (LTR sayfada etkisiz). Yönlü kuralların aynası custom.rtl.css / pickle-linex.rtl.css'te
   (rtlcss); burada rtlcss'in yapamadıkları: görseldeki okların yönü ve Arapça yazının harf aralığı. */
/*rtl:begin:ignore*/
[dir="rtl"] .btn-default::before {
  transform: translateY(-50%) scaleX(-1);
}

[dir="rtl"] .readmore-btn::before,
[dir="rtl"] .page-category-list ul li a::before,
[dir="rtl"] .fa-angle-left,
[dir="rtl"] .fa-angle-right,
[dir="rtl"] .fa-arrow-left,
[dir="rtl"] .fa-arrow-right {
  transform: scaleX(-1);
}

[dir="rtl"] .readmore-btn:hover::before {
  transform: scaleX(-1) rotate(45deg);
}

/* Telefon ve e-posta soldan sağa okunur; sağdan sola metnin içinde karakter sırası bozulmasın (+90 (212) … ) */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"] {
  direction: ltr;
  unicode-bidi: isolate;
}

/* Bitişik yazılarda (Arapça, Farsça, Urduca) negatif harf aralığı harf bağlarını koparır */
:lang(ar) .section-title h1,
:lang(ar) .section-title h2,
:lang(ar) .page-header-box h1,
:lang(ar) .service-entry h2,
:lang(ar) .project-entry h2,
:lang(ar) .how-work-item-content-metal h4,
:lang(fa) .section-title h1,
:lang(fa) .section-title h2,
:lang(fa) .page-header-box h1,
:lang(fa) .service-entry h2,
:lang(fa) .project-entry h2,
:lang(fa) .how-work-item-content-metal h4,
:lang(ur) .section-title h1,
:lang(ur) .section-title h2,
:lang(ur) .page-header-box h1,
:lang(ur) .service-entry h2,
:lang(ur) .project-entry h2,
:lang(ur) .how-work-item-content-metal h4 {
  letter-spacing: normal;
}
/*rtl:end:ignore*/

/* 8. Vurgu üstü renk (LX D-4) ----------------------------------------------------------------------------------------
   Vurgu rengi (`--accent-color`) ZEMİNİNDE çizilen metin, ikon ve sayaç rengi `--lx-on-accent`'tir (§1; panel `on_accent`,
   «Text on accent»). Değer verilmemişse ana renge düşer: Linex bu öğeleri hep ana renkle çizdi → boşken çıktı değişmez.
   Koyu bir vurgu seçen site (ana renk de koyuysa ~2:1 kontrast) `on_accent`'i açık renge (ör. #FFFFFF) çeker.
   Seçici kuralı: custom.css'teki rengi veren kuralın seçicisi (ya da aynı özgüllükte kapsayıcı seçici); bu dosya sonra yüklenir,
   eşit özgüllükte kazanır, fareyle gelince/açıkken zemini ana renge dönen yüzeylerin daha özgül durum kuralları (`:hover`,
   `.active`) olduğu gibi kalır. Rengi bugün ana renk OLMAYAN öğelerde (gri metin, `initial` bağlantı) geri dönüş o renktir:
   `var(--pickle-on-accent, <bugünkü renk>)` — boşken yine birebir.
   Kapsam dışı: vurgu rengiyle çizilen metin/ikon (ör. koyu zeminde vurgu rengi), içerik görselleri (`<img>`: yüklenen
   simgeler renklenemez) ve düğme okunun (`.btn-default::before`) SVG görseli (docs/tokens.md §5.2 sınırı). */

/* 8.1 Düğmeler, etiketler, rozetler */
.btn-default,
.section-footer-text p span,
.post-tags .tag-links a,
.post-social-sharing ul li a,
.project-item-tag ul li,
.member-social-list ul li a,
.post-item-tags a:hover,
.team-social-list ul li:hover a,
.video-play-button a i,
.video-gallery-image a::after,
.faq-accordion .accordion-item .accordion-button.collapsed::after,
.scrolling-content span {
  color: var(--lx-on-accent);
}

::selection {
  color: var(--lx-on-accent);
}

/* 8.2 Sayaçlar ve numara kutuları */
.about-us-counter-content h2,
.about-us-counter-content h2 i,
.what-we-counter-item-metal h2,
.how-work-item-no h3,
.project-why-choose-no h4,
.satisfy-client-image.add-more h3,
.satisfy-client-image.add-more i,
.hero-info-contact-title-metal h3,
.hero-info-contact-item-metal h3,
.hero-info-contact-item-metal p,
.pricing-item.highlighted-box .pricing-item-list h3,
.pricing-item.highlighted-box .pricing-item-list ul li,
.pricing-item.highlighted-box .pricing-item-list ul li:before {
  color: var(--lx-on-accent);
}

.about-us-counter-content p,
.what-we-counter-item-metal p {
  color: var(--pickle-on-accent, var(--text-color));
}

.hero-info-contact-item-metal h3 a {
  color: var(--pickle-on-accent, initial);
}

.team-contact-item .icon-box i {
  color: var(--pickle-on-accent, var(--text-color));
}

/* 8.3 Fareyle gelince / etkinken vurgu zeminine dönen yüzeyler (başka durumda zemin açık ya da ana renk) */
.services-item:hover .service-item-no h3,
.services-item.active .service-item-no h3,
.services-item:hover .services-item-content h3,
.services-item.active .services-item-content h3,
.services-item:hover .services-item-content p,
.services-item.active .services-item-content p,
.service-item-stone:hover .service-item-header-stone h3,
.service-item-stone.active .service-item-header-stone h3,
.service-item-stone:hover .service-item-content-stone p,
.service-item-stone.active .service-item-content-stone p,
.service-item-stone:hover .readmore-btn,
.service-item-stone.active .readmore-btn,
.footer-social-links ul li:hover a i,
.footer-social-links-metal ul li:hover a i,
.footer-social-links-stone ul li:hover a i {
  color: var(--lx-on-accent);
}

.service-item-stone:hover .readmore-btn::before,
.service-item-stone.active .readmore-btn::before,
.testimonial-slider-stone .testimonial-button-next-stone:hover::before,
.testimonial-slider-stone .testimonial-button-prev-stone:hover::before {
  background-color: var(--lx-on-accent);
}

/* 8.4 Açılır menü ve mobil menü (zemin vurgu rengi) */
.main-menu ul ul li a,
.main-header.header-metal .main-menu ul ul li a,
.main-header.header-stone .main-menu ul ul li a,
.slicknav_nav .slicknav_row,
.slicknav_nav li a,
.slicknav_arrow:after {
  color: var(--lx-on-accent);
}

.slicknav_icon .slicknav_icon-bar {
  background-color: var(--lx-on-accent);
}

/* 8.5 Maskeyle çizilen simgeler (§3b): vurgu zeminli kutu/daire/düğme içindekiler */
.project-btn a [data-lx-glyph],
.team-social-btn [data-lx-glyph],
.footer-newsletter-form .newsletter-btn [data-lx-glyph],
.footer-newsletter-form-metal .newsletter-btn [data-lx-glyph],
.footer-newsletter-form-stone .form-group .newsletter-btn [data-lx-glyph],
.sidebar-cta-contact-item .icon-box [data-lx-glyph],
.contact-info-item .icon-box [data-lx-glyph],
.about-contact-box .icon-box [data-lx-glyph],
.about-contact-box-metal .icon-box [data-lx-glyph],
.team-contact-item .icon-box [data-lx-glyph],
.hero-info-contact-header-metal .icon-box [data-lx-glyph],
.satisfy-client-image.add-more [data-lx-glyph],
.testimonial-item-quote [data-lx-glyph],
.scrolling-content span [data-lx-glyph] {
  background-color: var(--lx-on-accent);
}

/* Proje kartı oku: fareyle gelince daire zemini `--secondary-color` olur (vurgu değil) → ok ana renk */
.project-btn a:hover [data-lx-glyph] {
  background-color: var(--primary-color);
}

/* 8.6 Vurgu zeminli ikon kutularındaki yazı tipi simgeleri (0.13.1). `lx.icon()` ikonu `<i class="fa-…">` basar; hiçbir kural rengini
   vermez, bulunduğu kutudan (gövde metni, ~#555) devralır → koyu vurguda okunmaz. Kapsayıcı listesi custom.css'te `.icon-box`'a vurgu
   ZEMİNİ (`background`) veren 25 kuralın kapsayıcılarıdır; `tools/lint.php` ON-ACCENT bu listeyi her koşuda custom.css'ten yeniden tarar
   (kapsayıcı eksik ya da fazlaysa kırmızı). `.team-contact-item` rengi §8.2'dedir. Boşken `inherit` = bugünkü devralma (kutu koyu bir
   bölümdeyse beyaz kalır). `<img>` ikonlar renklenmez (§8 girişi). */
.about-body-item-stone .icon-box i,
.about-contact-box .icon-box i,
.about-contact-box-metal .icon-box i,
.about-us-item .icon-box i,
.about-us-item-metal .icon-box i,
.approach-counter-item .icon-box i,
.approach-item .icon-box i,
.benefits-body-item .icon-box i,
.contact-info-item .icon-box i,
.feature-item .icon-box i,
.hero-info-item-body-metal .icon-box i,
.pricing-item-header .icon-box i,
.service-feature-item .icon-box i,
.service-item-body-stone .icon-box i,
.service-item-metal .icon-box i,
.service-solution-item .icon-box i,
.services-item-header .icon-box i,
.sidebar-cta-contact-item .icon-box i,
.team-what-we-item-header .icon-box i,
.what-we-body-item .icon-box i,
.what-we-counter-item .icon-box i,
.what-we-info-item-stone .icon-box i,
.what-we-item-metal .icon-box i,
.why-choose-item-metal .icon-box i {
  color: var(--pickle-on-accent, inherit);
}

/* Kutu fareyle gelince (ya da kart `.active`) ana renkle dolar: dolgu `.icon-box::before` (z-index 0) ve Linex `<img>`'i dolgunun üstüne
   alıp beyaza çevirir; `<i>` bu iki kuralı bulamıyordu → dolgunun altında kalıp kayboluyordu (0.13.0'da da). Aynısı: simge dolgunun üstüne,
   hover'da beyaz. Hover seçicileri custom.css'teki dolgu kurallarının (`:hover … .icon-box::before`) aynasıdır, lint yeniden tarar. */
.about-body-item-stone .icon-box i,
.about-contact-box .icon-box i,
.about-contact-box-metal .icon-box i,
.about-us-item .icon-box i,
.about-us-item-metal .icon-box i,
.approach-counter-item .icon-box i,
.approach-item .icon-box i,
.benefits-body-item .icon-box i,
.contact-info-item .icon-box i,
.feature-item .icon-box i,
.hero-info-item-body-metal .icon-box i,
.pricing-item-header .icon-box i,
.service-feature-item .icon-box i,
.service-item-body-stone .icon-box i,
.service-item-metal .icon-box i,
.service-solution-item .icon-box i,
.services-item-header .icon-box i,
.sidebar-cta-contact-item .icon-box i,
.team-contact-item .icon-box i,
.team-what-we-item-header .icon-box i,
.what-we-body-item .icon-box i,
.what-we-counter-item .icon-box i,
.what-we-info-item-stone .icon-box i,
.what-we-item-metal .icon-box i,
.why-choose-item-metal .icon-box i {
  position: relative;
  z-index: 1;
}

.about-body-item-stone:hover .icon-box i,
.about-contact-box-metal:hover .icon-box i,
.about-contact-box:hover .icon-box i,
.about-us-item-metal:hover .icon-box i,
.about-us-item:hover .icon-box i,
.approach-counter-item:hover .icon-box i,
.approach-item:hover .icon-box i,
.benefits-body-item:hover .icon-box i,
.contact-info-item:hover .icon-box i,
.feature-item:hover .icon-box i,
.hero-info-item-body-metal:hover .icon-box i,
.pricing-item:hover .pricing-item-header .icon-box i,
.service-feature-item:hover .icon-box i,
.service-item-metal.active .icon-box i,
.service-item-metal:hover .icon-box i,
.service-item-stone.active .service-item-body-stone .icon-box i,
.service-item-stone:hover .service-item-body-stone .icon-box i,
.service-solution-item:hover .icon-box i,
.services-item.active .services-item-header .icon-box i,
.services-item:hover .services-item-header .icon-box i,
.sidebar-cta-contact-item:hover .icon-box i,
.team-contact-item:hover .icon-box i,
.team-what-we-item:hover .team-what-we-item-header .icon-box i,
.what-we-body-item:hover .icon-box i,
.what-we-counter-item:hover .icon-box i,
.what-we-info-item-stone:hover .icon-box i,
.what-we-item-metal:hover .icon-box i,
.why-choose-item-metal:hover .icon-box i {
  color: var(--white-color);
}