/* Bölüm: marka tanıtım bandı + pazarlama panosu.

   Zemin KOYU, logo BEYAZ ve başlığın içinde. Gradyan logo burada kullanılamaz:
   iki ucu koyu lacivert (rgb(11,59,109)) olduğu için #0f172a üzerinde 1,58:1
   kalıyor ve marka adının başı ile sonu eriyor.

   Pano düzeni SOLDAN SAĞA: getiri kartı · kanal kartları · ciro grafiği. */

.bi-inner {
    display: grid;
    justify-items: center;
    text-align: center;
}

/* ------------------------------------------------------------------ Başlık */

.bi-title {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.42em;
    font-size: var(--fs-h2);
    font-weight: var(--fw-bold);
    line-height: 1.15;
    letter-spacing: var(--ls-heading);
    color: #fff;
}

/* Logo, başlığın BÜYÜK HARF yüksekliğine oturur.

   Dosyada harfler yüksekliğin yalnızca %40'ını kaplıyor; üstte ve altta %30
   saydam alan var. Bu yüzden kutu yüksekliği doğrudan verilemez:
       kutu = büyük harf oranı / 0,40 = 0,694 / 0,40 ≈ 1,74em
   ile logonun harf yüksekliği başlığın "P" harfiyle eşitlenir. Logo dosyası
   değişirse bu katsayı yeniden ölçülmelidir. */
.bi-title__logo { display: inline-flex; align-items: center; }
.bi-title__logo .brandlogo { height: 1.74em; width: auto; }

.bi-title__text { font-weight: var(--fw-medium); }

.bi-lead {
    margin-top: var(--sp-3);
    max-width: 58ch;
    font-size: var(--fs-base);
    line-height: 1.6;
    color: var(--ink-300);
}

/* -------------------------------------------------------------------- Pano */

.bi-screen {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 2.2fr);
    gap: clamp(var(--sp-3), 1.2vw, var(--sp-4));
    align-items: stretch;
    width: 100%;
    /* --sp-9 ölçekte yok; olmayan değişken clamp() içinde kuralı komple düşürür */
    margin-top: clamp(var(--sp-6), 3vw, var(--sp-10));
    padding: clamp(var(--sp-3), 1.6vw, var(--sp-5));
    background: rgba(2, 6, 23, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--r-xl);
    text-align: left;
}

.bi-card {
    display: flex;
    flex-direction: column;
    padding: clamp(var(--sp-3), 1.4vw, var(--sp-5));
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-lg);
}

/* Kart içi başlık hapı */
.bi-pill {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 7px;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--r-full);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: 1;
    color: #fff;
}

.bi-pill svg { flex: none; color: var(--brand-400); }

/* ------------------------------------------------------- Getiri kartı (sol) */

.bi-mini {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-2);
    margin-top: var(--sp-4);
}

.bi-mini__box {
    padding: var(--sp-3);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--r-md);
}

.bi-mini__label {
    font-size: var(--fs-xs);
    color: var(--ink-300);
}

.bi-mini__value {
    margin-top: 4px;
    /* Üst sınır 1.125rem'ken "₺238.000" Archivo ile kutudan 4 px taşıyordu.
       Tabular rakamlar zaten sabit genişlikte; 1.0625rem hem sığıyor hem
       metriği küçültmüyor. */
    font-size: clamp(0.9375rem, 0.7rem + 0.5vw, 1.0625rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

.bi-total {
    margin-top: auto;
    padding-top: var(--sp-5);
    text-align: center;
}

.bi-total__label {
    font-size: var(--fs-xs);
    color: var(--ink-300);
}

.bi-total__value {
    margin-top: var(--sp-2);
    font-size: clamp(1.125rem, 0.7rem + 1.5vw, 1.75rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    letter-spacing: var(--ls-heading);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------ Kanal kartları (orta) */

.bi-channels {
    display: grid;
    grid-auto-rows: 1fr;
    gap: clamp(var(--sp-3), 1.2vw, var(--sp-4));
}

.bi-channel__sub {
    margin-top: auto;
    padding-top: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--ink-300);
}

.bi-channel__value {
    margin-top: 2px;
    font-size: clamp(1.0625rem, 0.75rem + 1vw, 1.375rem);
    font-weight: var(--fw-bold);
    line-height: 1.1;
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ Grafik (sağ) */

.bi-card--chart { position: relative; }

.bi-chart__value {
    margin-top: var(--sp-4);
    font-size: clamp(1.375rem, 0.8rem + 2vw, 2.25rem);
    font-weight: var(--fw-bold);
    line-height: 1.05;
    letter-spacing: var(--ls-heading);
    color: #fff;
    font-variant-numeric: tabular-nums;
}

/* Grafik kartın dibine yapışır: eğri kart tabanından yükselir.
   DİKKAT: buraya padding EKLENMEZ — uçtaki nokta yüzdeyle konumlanıyor ve
   kapsayıcı SVG'den yüksek olursa nokta eğrinin ucundan kopuyor. Üstteki
   boşluğu zaten "margin-top: auto" veriyor. */
.bi-chart {
    position: relative;
    margin-top: auto;
}

.bi-chart__svg {
    display: block;
    width: 100%;
    height: clamp(96px, 10vw, 150px);
}

/* Eğrinin ucundaki nokta: "şu an buradayız" */
.bi-chart__dot {
    position: absolute;
    right: -5px;
    width: 10px;
    height: 10px;
    margin-bottom: -5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.16);
}

.bi-note {
    margin-top: var(--sp-4);
    font-size: var(--fs-xs);
    color: var(--ink-400);
}

/* Açık zemin seçilirse metinler okunur kalsın (logo yine de koyu zemin ister) */
.section--white .bi-title, .section--soft .bi-title, .section--mute .bi-title { color: var(--ink-900); }
.section--white .bi-lead,  .section--soft .bi-lead,  .section--mute .bi-lead  { color: var(--ink-600); }

/* ----------------------------------------------------------------- Kırılım */

@media (max-width: 1000px) {
    /* Grafik tam genişliğe geçer, metrikler altında yan yana kalır */
    .bi-screen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .bi-card--chart { grid-column: 1 / -1; grid-row: 1; }
    .bi-chart__svg { height: 140px; }
}

@media (max-width: 620px) {
    .bi-screen { grid-template-columns: minmax(0, 1fr); }
    .bi-card--chart { grid-column: auto; }
    .bi-channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .bi-title { gap: 0.3em; }
    .bi-chart__svg { height: 118px; }
}

@media (max-width: 420px) {
    .bi-channels { grid-template-columns: minmax(0, 1fr); }
}