/* =============================================================================
   v9 — ANA SAYFA: KAPASİTE SEÇİCİ + TESİS AKIŞI
   =============================================================================
   Marka kimliği korunur: koyu endüstriyel zemin, marka kırmızısı, sıkı ve
   büyük harfli başlık tipografisi, ince ızgara dokusu. Yeni olan tasarım dili
   değil, sayfanın YAPTIĞI iş: ziyaretçi artık bakmıyor, kullanıyor.
   ========================================================================== */

.csi-v9-shell{ width:min(1400px,calc(100% - 48px)); margin:0 auto; }
@media (max-width:900px){ .csi-v9-shell{ width:calc(100% - 28px); } }

.csi-v9-head{ margin-bottom:34px; }
.csi-v9-head h2{
  font-family:var(--font-display,inherit);
  font-weight:800;
  font-size:clamp(28px,3.4vw,46px);
  line-height:1.02;
  text-transform:uppercase;
  letter-spacing:-.01em;
  margin:12px 0 0;
}
.csi-v9-head p{ margin:14px 0 0; max-width:62ch; font-size:15px; line-height:1.6; }


/* -----------------------------------------------------------------------------
   1. KAPASİTE SEÇİCİ
   -------------------------------------------------------------------------- */
.csi-v9-finder{
  background:#12181f;
  color:#f2f3f5;
  padding:84px 0 88px;
  position:relative;
  overflow:hidden;
}
/* Teknik çizim dokusu — ölçüm yapılan bir yüzey hissi */
.csi-v9-finder::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(120% 80% at 50% 0,#000 25%,transparent 78%);
  -webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000 25%,transparent 78%);
}
.csi-v9-finder>*{ position:relative; z-index:1; }
.csi-v9-finder .csi-v6-overline{ color:rgba(242,243,245,.55); }
.csi-v9-finder .csi-v9-head h2{ color:#fff; }
.csi-v9-finder .csi-v9-head p{ color:rgba(242,243,245,.62); }

.csi-v9-finder-grid{
  display:grid;
  grid-template-columns:minmax(300px,420px) minmax(0,1fr);
  gap:26px;
  align-items:stretch;
}
@media (max-width:980px){ .csi-v9-finder-grid{ grid-template-columns:1fr; } }

.csi-v9-panel{
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.10);
  padding:28px 26px 24px;
  display:flex;
  flex-direction:column;
  gap:22px;
}
.csi-v9-field{ display:block; }
.csi-v9-field>span{
  display:block;
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:rgba(242,243,245,.5);
  margin-bottom:9px;
}
.csi-v9-field select,
.csi-v9-amount input{
  width:100%;
  height:52px;
  background:#0d1319;
  border:1px solid rgba(255,255,255,.14);
  color:#fff;
  padding:0 14px;
  font:inherit;
  outline:none;
  border-radius:0;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.csi-v9-field select:focus,
.csi-v9-amount input:focus{
  border-color:var(--primary,#d7161b);
  box-shadow:0 0 0 3px rgba(215,22,27,.16);
}
.csi-v9-amount{ display:flex; gap:10px; }
.csi-v9-amount input{
  flex:1 1 auto; min-width:0;
  font-family:var(--font-display,inherit);
  font-weight:800; font-size:22px; letter-spacing:.01em;
}
.csi-v9-unit{ display:flex; flex:0 0 auto; border:1px solid rgba(255,255,255,.14); }
.csi-v9-unit button{
  width:52px; height:52px;
  background:transparent; border:0; cursor:pointer;
  color:rgba(242,243,245,.55);
  font:700 12px/1 var(--body,inherit);
  transition:background-color .2s ease, color .2s ease;
}
.csi-v9-unit button+button{ border-left:1px solid rgba(255,255,255,.14); }
.csi-v9-unit button.is-active{ background:var(--primary,#d7161b); color:#fff; }

/* Kaydırıcı: fare ve dokunmatik için hızlı keşif; sayı alanı kesin giriş için */
.csi-v9-range{
  -webkit-appearance:none; appearance:none;
  width:100%; height:2px; margin-top:16px;
  background:rgba(255,255,255,.16);
  cursor:pointer;
}
.csi-v9-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:16px; border-radius:50%;
  background:var(--primary,#d7161b);
  border:3px solid #12181f;
  box-shadow:0 0 0 1px rgba(215,22,27,.5);
}
.csi-v9-range::-moz-range-thumb{
  width:16px; height:16px; border:3px solid #12181f; border-radius:50%;
  background:var(--primary,#d7161b);
}
.csi-v9-range:focus-visible{ outline:2px solid var(--primary,#d7161b); outline-offset:6px; }

.csi-v9-note{
  margin:0; font-size:11px; line-height:1.55;
  color:rgba(242,243,245,.38);
  border-top:1px solid rgba(255,255,255,.08);
  padding-top:16px;
}

/* --- SONUÇ PANELİ --- */
.csi-v9-result{
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.10);
  padding:28px 30px 26px;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(280px,360px);
  grid-template-areas:
    "head  stage"
    "metrics stage"
    "alt   stage"
    "cta   stage";
  gap:0 30px;
  align-content:start;
  position:relative;
}
@media (max-width:760px){
  .csi-v9-result{ grid-template-columns:1fr; grid-template-areas:"head" "stage" "metrics" "alt" "cta"; }
}

.csi-v9-result-head{ grid-area:head; }
.csi-v9-result-head b{
  display:block;
  font-family:var(--font-display,inherit);
  font-weight:800;
  font-size:clamp(30px,3.4vw,44px);
  line-height:1;
  letter-spacing:-.015em;
  color:#fff;
  margin:10px 0 6px;
  font-variant-numeric:tabular-nums;
}
.csi-v9-result-head small{ display:block; color:var(--primary,#d7161b); font-weight:700; font-size:12px; letter-spacing:.04em; }

/* Ölçekli çizim alanı */
.csi-v9-stage{
  grid-area:stage;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-end;
  border-left:1px solid rgba(255,255,255,.08);
  padding-left:26px;
  min-height:340px;
}
@media (max-width:760px){
  .csi-v9-stage{ border-left:0; border-top:1px solid rgba(255,255,255,.08); padding:22px 0 0; margin:20px 0 6px; }
}
.csi-v9-silo{ width:100%; max-width:340px; height:300px; display:block; }
.csi-v9-scale{ display:flex; align-items:center; gap:8px; margin-top:12px; font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:rgba(242,243,245,.42); }
.csi-v9-scale i{ display:block; width:22px; height:1px; background:rgba(242,243,245,.3); }

.csi-v9-metrics{
  grid-area:metrics;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0; margin:24px 0 0; padding:0;
  border-top:1px solid rgba(255,255,255,.09);
}
@media (max-width:520px){
  .csi-v9-metrics{ grid-template-columns:1fr 1fr; }
  /* İki sütuna düşünce üçüncü ölçü alt satıra geçiyor ve soldaki ayraç onu
     içeri kaydırıyordu (telefon ekran görüntüsünde görüldü). Satır başındaki
     her öğede ayraç kaldırılır. */
  .csi-v9-metrics>div:nth-child(2n+1){ border-left:0; padding-left:0; }
}
.csi-v9-metrics>div{ padding:16px 16px 16px 0; }
.csi-v9-metrics>div+div{ border-left:1px solid rgba(255,255,255,.09); padding-left:16px; }
.csi-v9-metrics dt{ font-size:10px; letter-spacing:.09em; text-transform:uppercase; color:rgba(242,243,245,.45); }
.csi-v9-metrics dd{
  margin:8px 0 0;
  font-family:var(--font-display,inherit); font-weight:800;
  font-size:clamp(17px,1.7vw,23px); color:#fff;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.csi-v9-alt,
.csi-v9-uyari{ grid-area:alt; margin:14px 0 0; font-size:12.5px; line-height:1.55; }
.csi-v9-alt{ color:rgba(242,243,245,.55); }
.csi-v9-uyari{
  color:#ffd9da;
  background:rgba(215,22,27,.10);
  border-left:2px solid var(--primary,#d7161b);
  padding:11px 13px;
}
.csi-v9-alt b{ color:#fff; }

.csi-v9-cta{
  grid-area:cta;
  justify-self:start;
  margin-top:22px;
  display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 24px;
  background:var(--primary,#d7161b); color:#fff;
  font:700 12px/1 var(--body,inherit); letter-spacing:.06em; text-transform:uppercase;
  transition:transform .22s ease, box-shadow .22s ease;
}
.csi-v9-cta:hover{ transform:translateY(-2px); box-shadow:0 12px 30px rgba(215,22,27,.28); color:#fff; }

/* Hesaplama sürerken panel hafifçe söner: bir şeyin çalıştığı görünür */
.csi-v9-result.is-calculating{ opacity:.55; transition:opacity .18s ease; }


/* -----------------------------------------------------------------------------
   2. TESİS AKIŞI
   -------------------------------------------------------------------------- */
.csi-v9-flow{ padding:84px 0 88px; background:#fff; }

.csi-v9-flow-track{
  list-style:none; margin:0 0 0; padding:0;
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:1fr;
  position:relative;
}
/* Aşamaları birbirine bağlayan çizgi — "entegre" iddiasının görsel karşılığı */
.csi-v9-flow-track::before{
  content:""; position:absolute; left:0; right:0; top:37px; height:1px;
  background:#e0e1e3;
}
@media (max-width:860px){
  .csi-v9-flow-track{ grid-auto-flow:row; grid-auto-columns:auto; }
  .csi-v9-flow-track::before{ left:19px; right:auto; top:0; bottom:0; width:1px; height:auto; }
}

.csi-v9-flow-node button{
  width:100%;
  background:none; border:0; cursor:pointer;
  display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  padding:0 14px 0 0;
  text-align:left;
  color:#73767b;
  transition:color .24s ease;
}
@media (max-width:860px){
  .csi-v9-flow-node button{ flex-direction:row; align-items:center; gap:14px; padding:11px 0; }
}
.csi-v9-flow-no{ font-size:10px; font-weight:700; letter-spacing:.11em; color:#a9acb1; transition:color .24s ease; order:0; }
@media (max-width:860px){ .csi-v9-flow-no{ order:2; } }

.csi-v9-flow-dot{
  width:15px; height:15px; border-radius:50%;
  background:#fff; border:1px solid #cfd1d3;
  position:relative; z-index:1;
  transition:border-color .24s ease, box-shadow .24s ease, background-color .24s ease;
  flex:0 0 auto;
}
@media (max-width:860px){ .csi-v9-flow-dot{ order:0; margin-left:12px; } }

.csi-v9-flow-label{
  font-family:var(--font-display,inherit);
  font-weight:700; font-size:14px; line-height:1.15;
  text-transform:uppercase; letter-spacing:.005em;
  color:#1d1e21;
  transition:color .24s ease;
  order:2;
}
@media (max-width:860px){ .csi-v9-flow-label{ order:1; flex:1 1 auto; } }

.csi-v9-flow-node.is-active .csi-v9-flow-dot{
  background:var(--primary,#d7161b);
  border-color:var(--primary,#d7161b);
  box-shadow:0 0 0 4px rgba(215,22,27,.14);
}
.csi-v9-flow-node.is-active .csi-v9-flow-no{ color:var(--primary,#d7161b); }
.csi-v9-flow-node button:hover .csi-v9-flow-dot{ border-color:var(--primary,#d7161b); }
.csi-v9-flow-node button:focus-visible{ outline:2px solid var(--primary,#d7161b); outline-offset:4px; }

.csi-v9-flow-panels{
  margin-top:34px;
  border-top:1px solid #e0e1e3;
  padding-top:30px;
  /* Panel yüksekliği içeriğe göre değişince sayfa zıplıyordu; taban yükseklik
     bunu engeller. Ölçüldü: en uzun ve en kısa açıklama arasında 46px fark. */
  min-height:172px;
}
/* GÖRÜNÜRLÜK TARAYICI VARSAYILANINA BIRAKILMAZ.
   `hidden` özniteliği normalde UA stil sayfasındaki `[hidden]{display:none}`
   kuralıyla çalışır. Ölçüldü: bu tarayıcıda `<div hidden>` gizleniyor ama
   `<article hidden>` GİZLENMİYOR — sayfadaki hiçbir yazar kuralı `article`
   için `display` tanımlamadığı hâlde. Sonuç: sekmelerin hepsi aynı anda
   görünüyordu.

   Bir bileşenin görünürlüğü, tarayıcılar arasında değişebilen bir varsayılana
   asla bırakılmamalı. Kural burada açıkça yazılır. */
.csi-v9-flow-panel[hidden]{ display:none !important; }

.csi-v9-flow-panel{ max-width:760px; }
.csi-v9-flow-step{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--primary,#d7161b); }
.csi-v9-flow-panel h3{
  font-family:var(--font-display,inherit); font-weight:800;
  font-size:clamp(22px,2.4vw,32px); line-height:1.06; text-transform:uppercase;
  margin:12px 0 0; color:#1d1e21;
}
.csi-v9-flow-panel p{ margin:14px 0 0; color:#5c6066; line-height:1.65; }
.csi-v9-flow-panel .csi-v6-inline-link{ margin-top:18px; display:inline-flex; }

/* Panel değişimi yumuşak: sert geçiş, tıklamanın işe yarayıp yaramadığını
   belirsizleştiriyordu. */
.csi-v9-flow-panel{ animation:csiV9Fade .34s ease both; }
@keyframes csiV9Fade{ from{ opacity:0; transform:translateY(7px); } to{ opacity:1; transform:none; } }

@media (prefers-reduced-motion:reduce){
  .csi-v9-flow-panel{ animation:none; }
  .csi-v9-cta:hover{ transform:none; }
  .csi-v9-result.is-calculating{ transition:none; }
}

/* Aşama panelindeki ürün listesi: kataloğun gerçek içeriği, etiket biçiminde */
.csi-v9-flow-urunler{
  list-style:none; margin:18px 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.csi-v9-flow-urunler a{
  display:inline-flex; align-items:center;
  padding:8px 13px;
  border:1px solid #e0e1e3;
  background:#fafafb;
  font-size:12px; font-weight:600; color:#3a3d42;
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.csi-v9-flow-urunler a:hover{
  border-color:var(--primary,#d7161b);
  color:var(--primary,#d7161b);
  background:#fff;
}