/* =============================================================================
   v8 — GÖRSEL RAFİNASYON
   =============================================================================
   Ana tasarım kimliği korunur: koyu endüstriyel şerit, marka kırmızısı, sıkı
   başlık tipografisi, ince ızgara dokusu. Değişenler ölçülmüş kusurlardır,
   beğeni meselesi değil.

   1. Mega menü sayfaya göre ortalanmıyordu (canlı sitede 56px kayma ölçüldü).
   2. "Rakamlarla" bölümünde uzun bir değer iki satıra taşıp dört rakamın
      ortak taban çizgisini bozuyordu (canlı ölçüm: 44px / 44px / 88px / 44px).
   3. Rakam kartları düz bir gri bloktu — hiyerarşi, ritim ve marka vurgusu yok.
   ========================================================================== */


/* -----------------------------------------------------------------------------
   1. MEGA MENÜ — SAYFAYA GÖRE ORTALAMA

   HATA: `.cms-mega-menu` `position:absolute; left:50%; transform:translateX(-50%)`
   kullanıyor. Bu, en yakın KONUMLANDIRILMIŞ ataya göre çalışır — ve o ata
   `li.has-mega-menu` idi (genişliği ~105px). Yani 1320px'lik panel, menü
   öğesinin ortasına hizalanıyordu.

   Canlı sitede ölçüldü (1920px): panel sol kenarı 356px, olması gereken 300px
   → 56px sağa kayık. Dar ekranlarda kayma büyüyüp panel ekrandan taşıyor.

   ÇÖZÜM: masaüstünde `li` konumlandırmasını kaldır. Böylece en yakın
   konumlandırılmış ata `.cms-header` (tam genişlik) olur ve ortalama sayfaya
   göre çalışır. Alt çizgi göstergesi `a::after` zaten `a` (position:relative)
   üzerinden konumlanıyor, etkilenmez.

   Mobilde mega menü zaten `position:static` olduğu için kural yalnızca
   masaüstünde uygulanır.
   -------------------------------------------------------------------------- */
@media (min-width:1200px){
  /* `!important` GEREKLİ: cms.css içinde masaüstü için
     `.cms-header .header-nav .nav>li{position:relative!important}` kuralı var.
     Özgüllük ne olursa olsun `!important` normal bildirimi ezer; bu yüzden
     burada da işaretlenir. Yalnızca mega menüyü taşıyan öğeyi etkiler. */
  .cms-header .header-nav .nav > li.has-mega-menu{ position:static !important; }
  .cms-header .header-nav .nav > li.has-mega-menu > a{ position:relative !important; }
}


/* -----------------------------------------------------------------------------
   2. RAKAMLARLA ÇUKUROVA SİLO
   -------------------------------------------------------------------------- */

/* Sol sütun: kırmızı dikey aksan, metni ızgaraya bağlar */
.csi-v7-stats-intro{ position:relative; padding-left:22px; }
@media (max-width:600px){ .csi-v7-stats-intro{ padding-left:16px; } }
.csi-v7-stats-intro::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--primary,#d7161b) 0%,rgba(215,22,27,0) 100%);
}

/* Izgara: dış çerçeve yerine hairline ayraçlar — daha hafif, daha teknik */
.csi-v7-stats .csi-v8-stats{
  background:transparent;
  border:0;
  border-radius:0;
  gap:0;
  overflow:visible;
}
.csi-v7-stats .csi-v8-stats .csi-v7-stat{
  background:transparent;
  padding:34px 26px 30px;
  border-left:1px solid rgba(255,255,255,.12);
  gap:0;
  overflow:hidden;
  transition:background-color .32s ease, transform .32s ease;
}
.csi-v7-stats .csi-v8-stats .csi-v7-stat:first-child{ border-left:0; }

/* Üst kenarda, yalnızca hover'da beliren kırmızı çizgi */
.csi-v7-stats .csi-v8-stats .csi-v7-stat::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--primary,#d7161b);
  transform:scaleX(0); transform-origin:left;
  transition:transform .38s cubic-bezier(.22,.61,.36,1);
}
.csi-v7-stats .csi-v8-stats .csi-v7-stat:hover{
  background:rgba(255,255,255,.045);
  transform:translateY(-3px);
}
.csi-v7-stats .csi-v8-stats .csi-v7-stat:hover::before{ transform:scaleX(1); }

/* Teknik çizim hissi veren silik sıra numarası */
.csi-v8-ghost{
  position:absolute; right:14px; top:8px;
  font-family:var(--font-display,inherit);
  font-size:64px; font-weight:800; line-height:1;
  letter-spacing:-.04em;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.07);
  pointer-events:none; user-select:none;
}

/* İkon: serbest gezen glif yerine çerçeveli rozet */
.csi-v7-stats .csi-v8-stats .csi-v7-stat-icon{
  width:44px; height:44px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:10px;
  padding:9px;
  color:rgba(242,243,245,.72);
  transition:color .3s ease, border-color .3s ease, background-color .3s ease;
}
.csi-v7-stats .csi-v8-stats .csi-v7-stat:hover .csi-v7-stat-icon{
  color:var(--primary,#d7161b);
  border-color:rgba(215,22,27,.5);
  background:rgba(215,22,27,.08);
}

/* DEĞER: sayı ve birim ayrı öğeler, ortak taban çizgisinde.
   Bu, "60 Bin m²" değerinin ikinci satıra taşmasını ve kartın etiketini
   aşağı itmesini kalıcı olarak engeller. */
.csi-v8-deger{
  display:flex; align-items:baseline; gap:7px;
  margin:20px 0 0;
  min-height:46px;
  flex-wrap:nowrap;
}
.csi-v7-stats .csi-v8-stats .csi-v7-stat strong{
  font-size:clamp(32px,3.1vw,46px);
  white-space:nowrap;
}
.csi-v8-birim{
  font-family:var(--font-display,inherit);
  font-style:normal;
  font-weight:700;
  font-size:clamp(13px,1.05vw,16px);
  letter-spacing:.01em;
  color:rgba(242,243,245,.62);
  white-space:nowrap;
}

/* Ölçülebilirlik fikrinin görsel karşılığı: görünürlükte uzayan kırmızı çizgi */
.csi-v8-rule{
  display:block; height:2px; width:100%;
  margin:14px 0 16px;
  background:linear-gradient(90deg,var(--primary,#d7161b) 0%,rgba(215,22,27,.15) 100%);
  transform:scaleX(1); transform-origin:left;
  transition:transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay:calc(var(--csi-sira,0) * .09s + .15s);
}
/* VARSAYILAN AÇIK, GİZLİ DEĞİL.
   Çizgi normalde tam boy durur; yalnızca görünürlük gözlemcisi henüz
   tetiklenmemişken toplanır. Tersi yapılsaydı (varsayılan gizli), JavaScript
   çalışmayan bir tarayıcıda çizgiler hiç görünmezdi. `home-v6.js` ayrıca
   1800ms'lik bir güvenlik ağıyla `is-visible` sınıfını her koşulda ekliyor. */
.csi-v7-stats [data-csi-reveal]:not(.is-visible) .csi-v8-rule{ transform:scaleX(0); }

.csi-v7-stats .csi-v8-stats .csi-v7-stat span:not(.csi-v8-ghost):not(.csi-v7-stat-icon):not(.csi-v8-deger):not(.csi-v8-rule){
  font-size:14.5px;
  font-weight:700;
  letter-spacing:.005em;
  color:#fff;
}
.csi-v7-stats .csi-v8-stats .csi-v7-stat small{
  margin-top:7px;
  display:block;
  color:rgba(242,243,245,.46);
}

/* Hareket azaltma tercihine saygı */
@media (prefers-reduced-motion:reduce){
  .csi-v7-stats .csi-v8-stats .csi-v7-stat,
  .csi-v7-stats .csi-v8-stats .csi-v7-stat::before,
  .csi-v8-rule,
  .csi-v7-stats .csi-v8-stats .csi-v7-stat-icon{ transition:none !important; }
  .csi-v8-rule{ transform:scaleX(1); }
}

/* Duyarlılık: ayraçlar yön değiştirir, hayalet numara küçülür */
@media (max-width:900px){
  .csi-v7-stats .csi-v8-stats .csi-v7-stat{
    border-left:0;
    border-top:1px solid rgba(255,255,255,.12);
    padding:26px 20px 24px;
  }
  .csi-v7-stats .csi-v8-stats .csi-v7-stat:first-child{ border-top:0; }
  .csi-v7-stats .csi-v8-stats .csi-v7-stat:nth-child(2){ border-top:0; }
  .csi-v8-ghost{ font-size:48px; }
}
@media (max-width:600px){
  .csi-v7-stats .csi-v8-stats .csi-v7-stat:nth-child(2){ border-top:1px solid rgba(255,255,255,.12); }
  .csi-v8-deger{ min-height:0; }
}


/* -----------------------------------------------------------------------------
   YÜKLEME SIRASI NOTU

   `home-v7-refine.css` sayfa şablonunun İÇİNDE (gövdede) yükleniyor, bu dosya
   ise `<head>`de. Aynı özgüllükteki kurallarda sonra gelen kazandığı için v7
   kuralları bu dosyayı eziyordu. Bu yüzden kurallar `.csi-v7-stats` atasıyla
   nitelendi — yükleme sırasından bağımsız olarak kazanır.
   -------------------------------------------------------------------------- */

/* Üst etiket: iki satıra bölünüp "ORTAĞI" yetim kalıyordu */
.csi-v7-stats .csi-v7-stats-intro .csi-v6-overline{
  display:block;
  line-height:1.5;
  max-width:30ch;
}

/* Sol sütun biraz genişletildi: başlık ve etiket rahat nefes alsın.

   MEDYA SORGUSU ZORUNLU: bu kural özgüllüğü yüksek olduğu için medya sorgusuna
   alınmasaydı `home-v7-refine.css` içindeki
   `@media (max-width:900px){.csi-v7-stats-shell{grid-template-columns:1fr}}`
   kuralını EZERDİ — medya sorguları özgüllük eklemez. Sonuç: telefonda iki
   sütun ısrar eder, kartlar ekrandan taşardı. (Mobil ekran görüntüsünde
   birebir bu görüldü.) */
@media (min-width:901px){
  .csi-v7-stats .csi-v7-stats-shell{ grid-template-columns:minmax(260px,380px) 1fr; }
}

/* ETİKET HİZASI
   "Entegre üretim tesisi" iki satıra taştığında altındaki açıklama diğer üç
   karttan aşağı kayıyordu. Etikete iki satırlık taban yüksekliği verilerek
   dört kartın açıklaması aynı çizgide başlar. */
.csi-v7-stats .csi-v8-stats .csi-v7-stat > span:not(.csi-v8-ghost):not(.csi-v7-stat-icon):not(.csi-v8-deger):not(.csi-v8-rule){
  display:block;
  min-height:2.9em;
}
@media (max-width:900px){
  .csi-v7-stats .csi-v8-stats .csi-v7-stat > span:not(.csi-v8-ghost):not(.csi-v7-stat-icon):not(.csi-v8-deger):not(.csi-v8-rule){
    min-height:0;
  }
}