/* ==========================================================================
   sahne.css — ürün sahneleri, RASTER DEĞİL, KODLA
   --------------------------------------------------------------------------
   Sekiz sahne artık görsel dosyası değil; gerçek HTML ve CSS. Bunun bedeli
   biraz daha işaretleme, karşılığında şunlar KENDİLİĞİNDEN geliyor:

     · Dil değişiminde tek bayt inmiyor, hiçbir şey zıplamıyor — aynı DOM,
       yalnızca metin değişiyor. (Rasterlerde kadraj diller arasında kilitli
       değildi: en/de arasında pikselin %6-9'u oynuyordu.)
     · Açık ve koyu tema aynı işaretlemeden çıkıyor, iki ayrı set gerekmiyor.
     · Sayı ve tarih biçimi doğru: `2.842` / `%12,5` Türkçede, `2,842` /
       `12.5%` İngilizcede. Rasterde ikisi de İngilizceydi.
     · Yazı her piksel yoğunluğunda net, seçilebilir, aranabilir.
     · 3,24 MB'lık beş dilli raster yükü sıfırlandı.

   ÖLÇEK NASIL ÇALIŞIYOR
   `.sahne` bir kap sorgusu kabı (`container-type: inline-size`). İçindeki her
   ölçü `cqw` cinsinden, yani sahne genişliğine oranlı. Böylece 1230 px'de de
   980 px'de de kompozisyon birebir aynı kalıyor; medya sorgusuyla yeniden
   ayarlanacak bir şey yok.

   DAR EKRAN
   1024 px altında yazı `cqw` ile küçülüp okunmaz hale gelirdi (390 px'de
   1,2cqw = 4,7 px). Orada panel normal akışa geçiyor ve sahne KENDİ yatay
   kaydırma kabına giriyor — depo kuralının izin verdiği tek yatay kaydırma
   biçimi. Sayfa gövdesi asla yatay kaymıyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   KONTRAST — ÖLÇÜLDÜ, HESAPLANMADI
   `npm run check:contrast` bu jetonları GÖREMEZ: o yalnızca
   `design-system.css`i okuyor. Aşağıdakiler tarayıcıda, gerçek sahnede,
   iki temada birden ölçüldü. Değiştirilirse yeniden ölçülmeli.

                        AÇIK TEMA          KOYU TEMA
     panel başlığı      15,29 : 1          14,73 : 1
     panel metni         8,88 : 1           8,86 : 1
     madde alt satırı    4,59 : 1           5,09 : 1   (sahne zemini üstünde)
     kart başlığı       17,38 : 1          13,17 : 1
     kart alt satırı     5,21 : 1           4,55 : 1   (kart üstünde)
     not kutusu          8,52 : 1           6,90 : 1

   İlk ölçümde `--sc-soluk` açık temada 3,36:1 ve 3,82:1 ile AA'nın ALTINDA
   kalıyordu; ton #7b829a'dan #666c81'e koyulaştırıldı.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   1. TEMA JETONLARI
   Sahnenin kendi paleti. Sayfa jetonlarından türüyor ki tema değişimi
   kendiliğinden doğru olsun; sahneye özel olanlar burada tanımlı.
   -------------------------------------------------------------------------- */
.sahne {
    --sc-zemin: linear-gradient(146deg, #f7f7fb 0%, #f1effb 46%, #ebe9fa 100%);
    --sc-kart: #ffffff;
    --sc-kart-kenar: #e6e4f4;
    --sc-kart-golge: 0 1px 2px rgba(20, 25, 46, .05), 0 8px 24px rgba(20, 25, 46, .06);
    --sc-baslik: #14192e;
    --sc-metin: #3a4159;
    --sc-soluk: #666c81;
    --sc-mor: #5b3df5;
    --sc-mavi: #254bf3;
    --sc-yesil: #22c55e;
    --sc-dolgu: #eceafb;
    --sc-cizgi: #d9d5f2;
    --sc-yer-tutucu: #e8e7f2;
    /* Mor zemin üstündeki yazı. SABİT BEYAZ DEĞİL: koyu temada `--sc-mor`
       açıldığı için beyaz 2,9:1'e düşüyor (AA altı). Kart rengi her iki
       temada da 5,4:1 üstünde kalıyor — ölçüldü. */
    --sc-mor-yazi: var(--sc-kart);
}

[data-theme="dark"] .sahne {
    --sc-zemin: linear-gradient(146deg, #14132e 0%, #171634 46%, #1b1740 100%);
    --sc-kart: #21203f;
    --sc-kart-kenar: #322f5c;
    --sc-kart-golge: 0 1px 2px rgba(0, 0, 0, .28), 0 10px 28px rgba(0, 0, 0, .34);
    --sc-baslik: #eceaf8;
    --sc-metin: #b8b6d0;
    --sc-soluk: #8a87a8;
    --sc-mor: #9b86ff;
    --sc-mavi: #7fa0ff;
    --sc-yesil: #4ade80;
    --sc-dolgu: #2b2952;
    --sc-cizgi: #3b3768;
    --sc-yer-tutucu: #33305e;
}

/* Akış paneli tek sütun: sahne kendi içinde zaten iki sütunlu (metin + görsel
   alan), panelin ayrıca ikiye bölünmesine gerek yok. */
.flow-panel {
    grid-template-columns: minmax(0, 1fr);
}

/* --------------------------------------------------------------------------
   2. SAHNE
   -------------------------------------------------------------------------- */
.sahne {
    container-type: inline-size;
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--sc-zemin);
    /* ÇERÇEVE YOK. Sahne eskiden 1px kenarlık + gölge taşıyordu ve sayfada
       çerçeveli bir görsel gibi duruyordu. Sahne bir resim değil, sayfanın
       kendi yüzeyinin bir parçası; kenarlık ve gölge kaldırıldı, sınırı
       yalnızca kendi zemini belli ediyor. */
}

/* Sahnenin kendi iç kompozisyonu. Oran burada sabit: içerik inmeden yer
   ayrılıyor, altındaki hiçbir şey kaymıyor (CLS 0). */
.sahne-ic {
    display: grid;
    grid-template-columns: 27.5cqw minmax(0, 1fr);
    align-items: center;
    gap: 2cqw;
    aspect-ratio: 1672 / 941;
    padding: 3.4cqw 3.4cqw 3.4cqw 2.6cqw;
}

/* Yıldız tozu — sahnenin derinliği. Tek katman, animasyon yok. */
.sahne::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
        radial-gradient(1.5px 1.5px at 18% 22%, rgba(91, 61, 245, .16) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 72% 12%, rgba(91, 61, 245, .12) 50%, transparent 51%),
        radial-gradient(2px 2px at 88% 62%, rgba(37, 75, 243, .12) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 34% 82%, rgba(91, 61, 245, .12) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 58% 46%, rgba(37, 75, 243, .10) 50%, transparent 51%);
}

[data-theme="dark"] .sahne::before {
    background-image:
        radial-gradient(1.5px 1.5px at 18% 22%, rgba(155, 134, 255, .40) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 72% 12%, rgba(155, 134, 255, .30) 50%, transparent 51%),
        radial-gradient(2px 2px at 88% 62%, rgba(127, 160, 255, .30) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 34% 82%, rgba(155, 134, 255, .28) 50%, transparent 51%),
        radial-gradient(1.5px 1.5px at 58% 46%, rgba(127, 160, 255, .24) 50%, transparent 51%);
}

/* --------------------------------------------------------------------------
   3. SOL PANEL — sahnenin metni
   -------------------------------------------------------------------------- */
.sahne-panel {
    display: flex;
    flex-direction: column;
    gap: 1.5cqw;
    min-width: 0;
}

.sahne-etiket {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1cqw;
    font-size: .82cqw;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--sc-mor);
}

.sahne-dil-rozet {
    padding: .35em .8em;
    border-radius: 999px;
    background: var(--sc-dolgu);
    letter-spacing: .02em;
    text-transform: none;
}

.sahne-panel h3 {
    margin: 0;
    font-size: 2.5cqw;
    line-height: 1.14;
    letter-spacing: -.015em;
    font-weight: 700;
    color: var(--sc-baslik);
}

.sahne-panel h3 b {
    display: block;
    font-weight: 700;
    color: var(--sc-mor);
}

.sahne-panel > p {
    margin: 0;
    font-size: 1.16cqw;
    line-height: 1.5;
    color: var(--sc-metin);
}

/* Numaralı maddeler */
.sahne-madde {
    display: grid;
    gap: 1.1cqw;
    margin: 0;
    padding: 0;
    list-style: none;
    /* `list-style: none` yerlesik `list-item` sayacini durduruyor; bu yüzden
       kendi sayacımız var. Aksi hâlde her madde "0" yazardı. */
    counter-reset: sc-madde;
}

.sahne-madde li {
    display: grid;
    grid-template-columns: 2.1cqw minmax(0, 1fr);
    column-gap: .9cqw;
    row-gap: .2cqw;
    align-items: start;
    counter-increment: sc-madde;
}

/* Başlık ve alt satır AYNI sütunda: ikisi de ızgaranın çocuğu olduğu için
   varsayılanda ayrı hücrelere düşüp metni daralttılar. */
.sahne-madde li > b,
.sahne-madde li > span {
    grid-column: 2;
}

.sahne-madde li::before {
    content: counter(sc-madde);
    display: grid;
    place-items: center;
    width: 2.1cqw;
    height: 2.1cqw;
    border-radius: 50%;
    font-size: .92cqw;
    font-weight: 700;
    color: #fff;
    background: var(--sc-mor);
    grid-row: span 2;
}

.sahne-madde b {
    display: block;
    font-size: 1.06cqw;
    line-height: 1.3;
    color: var(--sc-baslik);
}

.sahne-madde span {
    display: block;
    font-size: .96cqw;
    line-height: 1.4;
    color: var(--sc-soluk);
}

.sahne-not {
    margin: auto 0 0;
    padding: 1.1cqw 1.3cqw;
    border-radius: 1cqw;
    font-size: .92cqw;
    line-height: 1.45;
    font-weight: 600;
    color: var(--sc-mor);
    background: var(--sc-dolgu);
}

/* --------------------------------------------------------------------------
   4. SAHNE İÇERİĞİ — ortak yapı taşları
   -------------------------------------------------------------------------- */
/* Yalnızca dar ekranda bir kaydırma kabı; geniş ekranda ızgaraya hiç
   karışmasın diye kutu üretmiyor. */
.sahne-kaydir {
    display: contents;
}

.sahne-alan {
    position: relative;
    display: grid;
    align-content: center;
    height: 100%;
    min-width: 0;
}

.sc-kart {
    padding: 1.1cqw 1.3cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 1.1cqw;
    background: var(--sc-kart);
    box-shadow: var(--sc-kart-golge);
}

.sc-kart-baslik {
    display: block;
    margin: 0;
    font-size: 1.02cqw;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sc-baslik);
}

.sc-kart-alt {
    display: block;
    margin: .25cqw 0 0;
    font-size: .86cqw;
    line-height: 1.35;
    color: var(--sc-soluk);
}

/* Onay ve bekleme göstergeleri — renge EK olarak biçim taşır:
   onay bir işaret, bekleme boş bir daire. Rengi görmeyen de ayırt eder. */
.sc-tik,
.sc-bekle {
    display: grid;
    place-items: center;
    width: 1.5cqw;
    height: 1.5cqw;
    border-radius: 50%;
    font-size: .9cqw;
    line-height: 1;
}

.sc-tik {
    color: #fff;
    background: var(--sc-yesil);
}

.sc-bekle {
    border: .18cqw solid var(--sc-cizgi);
    background: transparent;
}

/* Yer tutucu çubuklar. Akış sahneleri (1-5) artık ÖRNEK veriyle dolu ve her
   biri kendi üstünde "Örnek ekran" rozeti taşıyor; çubuklar yalnızca henüz
   doldurulmamış iki sahnede kaldı: `.sc-widget` ve `.sc-devir`.
   Kural değişmedi: rozetsiz bir sahnede gerçekmiş gibi duran rakam, olmayan
   bir iddiadır. */
.sc-cubuk {
    display: block;
    height: .62cqw;
    border-radius: 999px;
    background: var(--sc-yer-tutucu);
}

.sc-cubuk + .sc-cubuk {
    margin-top: .5cqw;
}

.sc-cubuk-kisa { width: 42%; }
.sc-cubuk-orta { width: 68%; }
.sc-cubuk-uzun { width: 88%; }

/* Bağlantı çizgileri — sahnedeki kartları çekirdeğe bağlar */
.sc-tel {
    position: absolute;
    border-color: var(--sc-cizgi);
    border-style: solid;
    border-width: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   5. YAPAY ZEKA ÇEKİRDEĞİ
   Blender'da render edilmiş tek kare (düz bakış). JavaScript yok: çekirdek
   ağdan, imleçten ve betikten bağımsız olarak her koşulda görünür ve
   hareketli.
   -------------------------------------------------------------------------- */
/* Çekirdek artık soyut bir küre değil, Synaptix robotunun kendisi
   (`3dmodel_mini_robot.zip` içinden gelen OBJ + 4K doku, Blender'da render
   edildi). Oran 300x444: render edilen 35 pozun BİRLEŞİK kadrajı. Bugün
   tek kare kullanılıyor ama kadraj o birleşik sınırdan geldiği için oran
   aynı — kare kendi sınırına kırpılsaydı robot kutunun içinde başka bir
   ölçekte otururdu. */
.sc-cekirdek {
    position: relative;
    width: 17cqw;
    aspect-ratio: 300 / 444;
    justify-self: center;
    align-self: center;
}

.sc-cekirdek-hale {
    position: absolute;
    /* Robot dikey; hale de ona göre. Yatayda daha geniş taşıyor ki
       gövdenin iki yanında da ışık kalsın. */
    inset: -14% -28%;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(91, 61, 245, .30) 0%,
                rgba(91, 61, 245, .10) 42%,
                rgba(91, 61, 245, 0) 70%);
    pointer-events: none;
}

[data-theme="dark"] .sc-cekirdek-hale {
    background: radial-gradient(circle,
                rgba(139, 118, 255, .42) 0%,
                rgba(139, 118, 255, .14) 42%,
                rgba(139, 118, 255, 0) 70%);
}

/* TEK KARE, DÜZ BAKIŞ.
   İmleç takibi KALDIRILDI. Bir dönem burada 7x5'lik bir poz ızgarası ve
   onu imlece göre karıştıran bir betik vardı; ızgara adımları (yatayda
   12,67, dikeyde 7 derece) gözle görülür biçimde atlıyordu ve dört komşu
   pozu karıştırarak düzeltmek de istenen sonucu vermedi. Karar: robot poz
   değiştirmesin. Hareket tamamen CSS'te — süzülme, yalpa, hale nefesi,
   altındaki itki ve göğüsteki S nabzı.

   Kazanç yalnızca sadelik değil: 551 KB'lık poz ızgarası artık HİÇ
   inmiyor, tek kare 23 KB. Dosya `assets/robot/robot.webp` olarak duruyor
   (üretimi Blender gerektiriyor), yalnızca kullanılmıyor. */
.sc-cekirdek-kare {
    position: absolute;
    inset: 0;
    background-image: url("assets/robot/robot-duz.webp");
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50% 50%;
}


/* --------------------------------------------------------------------------
   ÇEKİRDEK: SÜREKLİ UÇUŞ
   İmleç hiç kıpırdamasa da robot ölü durmamalı. Üst üste binen üç ayrı
   ritim var: dikey süzülme (6,1 sn), gövde yalpası (8,3 sn) ve halenin
   nefesi (7,4 sn). Süreler bilerek birbirinin katı DEĞİL — ortak katları
   dakikaları bulduğu için döngü gözle yakalanamıyor ve hareket "mekanik"
   değil "canlı" okunuyor. Aynı süreyi üçüne de verseydim üçü birlikte
   nabız atar ve tam tersi olurdu.

   NEDEN `translate`/`rotate`, NEDEN `transform` DEĞİL
   Süzülme ve yalpa iki AYRI animasyon. İkisini de `transform` ile
   yazsaydım biri diğerini ezerdi; ayrı CSS özellikleri oldukları için üst
   üste biniyorlar. Tanımayan bir tarayıcıda animasyon hiç uygulanmaz ve
   robot sabit kalır — bozulma değil.

   NEREDE ÇALIŞIR
   HER ziyaretçide, istisnasız: telefonda da, JavaScript kapalıyken de.
   Bu bir CSS animasyonu; imleçle, betikle ya da ağ ile ilgisi yok.
   Tek istisna azaltılmış hareket (dosyanın ilerisinde kapatılıyor).
   -------------------------------------------------------------------------- */
@keyframes sc-suzul {
    0%   { translate: 0 0; }
    27%  { translate: .8% -3.4%; }
    52%  { translate: -.4% -1.0%; }
    78%  { translate: -1.0% -4.1%; }
    100% { translate: 0 0; }
}

@keyframes sc-yalpa {
    0%   { rotate: -1.5deg; }
    50%  { rotate: 1.8deg; }
    100% { rotate: -1.5deg; }
}

@keyframes sc-hale-nefes {
    0%   { scale: 1;    opacity: .80; }
    46%  { scale: 1.08; opacity: 1; }
    100% { scale: 1;    opacity: .80; }
}

/* Uçuş DIŞ kutuda: içindeki her katman (robot, göz kırpma, hale) onunla
   birlikte süzülüyor. Kareye verseydim kırpma katmanı yerinde kalır ve
   robot süzülürken gözler havada asılı dururdu.
   `transform` DEĞİL `translate`/`rotate`: betik dış kutuya `transform`
   yazıyor, ayrı özellikler olduğu için ikisi üst üste biniyor. */
.sc-cekirdek {
    animation:
        sc-suzul 6.1s ease-in-out infinite,
        sc-yalpa 8.3s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   ROBOTUN ALTINDAKİ İTKİ — uçuş hissi
   Robot süzülüyor ama neyin üstünde durduğu belli değildi. Altına yumuşak
   bir itki parıltısı kondu: kenarı olmayan, tamamen sönerek biten bir elips.
   Kutu değil — kenarı olsaydı gövdenin altında bir çizgi gibi okunurdu.

   Nabzı gövdenin süzülmesinden FARKLI sürede (5,3 sn / 6,1 sn): aynı sürede
   olsalardı ikisi birlikte inip kalkar, tek parça gibi mekanik dururdu.
   -------------------------------------------------------------------------- */
.sc-cekirdek-itki {
    position: absolute;
    left: 50%;
    bottom: 2%;
    width: 62%;
    aspect-ratio: 3.1;
    translate: -50% 0;
    border-radius: 50%;
    background: radial-gradient(ellipse at center,
                rgba(91, 61, 245, .42) 0%,
                rgba(91, 61, 245, .16) 38%,
                rgba(91, 61, 245, 0) 72%);
    animation: sc-itki 5.3s ease-in-out infinite;
    pointer-events: none;
}

[data-theme="dark"] .sc-cekirdek-itki {
    background: radial-gradient(ellipse at center,
                rgba(139, 118, 255, .52) 0%,
                rgba(139, 118, 255, .20) 38%,
                rgba(139, 118, 255, 0) 72%);
}

@keyframes sc-itki {
    0%, 100% { opacity: .70; scale: 1 1; }
    50%      { opacity: 1;   scale: 1.14 .86; }
}

/* --------------------------------------------------------------------------
   GÖĞÜSTEKİ S — nabız
   Logonun kare içindeki yeri 35 pozda ölçüldü: x 0,431..0,493, y 0,379..0,394.
   Yani poz değişse de yerinden neredeyse hiç kıpırdamıyor; sabit konum
   yeterli, poz başına tablo taşımaya gerek yok.

   Işık EKLEMELİ (`screen`): logonun kendi rengini parlatıyor, üstünü bir
   daireyle boyamıyor. Normal boyamada açık temada gri bir leke kalırdı.
   -------------------------------------------------------------------------- */
.sc-cekirdek-logo {
    position: absolute;
    left: 46.2%;
    top: 38.7%;
    width: 20%;
    aspect-ratio: 1;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(circle,
                rgba(140, 170, 255, .55) 0%,
                rgba(120, 150, 255, .18) 45%,
                rgba(120, 150, 255, 0) 70%);
    mix-blend-mode: screen;
    animation: sc-logo-nabiz 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes sc-logo-nabiz {
    0%, 100% { opacity: .25; scale: .92; }
    45%      { opacity: 1;   scale: 1.10; }
}

.sc-cekirdek-hale {
    animation: sc-hale-nefes 7.4s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   6. DAR EKRAN
   Panel normal akışa geçer, sahne kendi yatay kaydırma kabına girer.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .sahne {
        container-type: normal;
        overflow: visible;
        border: 0;
        background: none;
        box-shadow: none;
    }

    .sahne::before { display: none; }

    .sahne-ic {
        display: block;
        aspect-ratio: auto;
        padding: 0;
    }

    .sahne-panel {
        gap: var(--space-3, .75rem);
    }

    .sahne-etiket {
        font-size: var(--text-xs, .75rem);
    }

    .sahne-dil-rozet { display: none; }

    .sahne-panel h3 {
        font-size: var(--text-lg, 1.25rem);
        line-height: 1.25;
    }

    .sahne-panel > p,
    .sahne-madde b {
        font-size: var(--text-sm, .9rem);
        line-height: 1.55;
    }

    .sahne-madde {
        gap: var(--space-2, .5rem);
    }

    .sahne-madde li {
        grid-template-columns: 1.6rem minmax(0, 1fr);
        gap: var(--space-2, .5rem);
    }

    .sahne-madde li::before {
        width: 1.6rem;
        height: 1.6rem;
        font-size: var(--text-xs, .75rem);
    }

    .sahne-madde span,
    .sahne-not {
        font-size: var(--text-xs, .78rem);
    }

    .sahne-not {
        margin-top: var(--space-3, .75rem);
        padding: var(--space-3, .75rem);
        border-radius: var(--radius-lg, .75rem);
    }

    /* Sahne kendi kabında kayar: sayfa gövdesi ASLA yatay kaymaz.
       Kaydırma KABI ile ÖLÇEK KABI ayrı olmak zorunda: ikisi aynı öğe
       olduğunda kap sorgusu görünen genişliği (278 px) ölçüyor ve içerideki
       her `cqw` okunmaz hale geliyor. Ölçüldü — bu yüzden `.sahne-kaydir`
       kayar, `.sahne-alan` ise sabit 620 px'lik ölçek kabı olarak kalır. */
    .sahne-kaydir {
        display: block;
        margin-top: var(--space-5, 1.25rem);
        border: 1px solid var(--border);
        border-radius: var(--radius-xl);
        background: var(--sc-zemin);
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
    }

    .sahne-alan {
        container-type: inline-size;
        width: 620px;
        height: auto;
        padding: var(--space-5, 1.25rem);
    }
}

/* --------------------------------------------------------------------------
   6b. ÇAĞRI DÜĞMESİ
   Sahnenin dışında, her ekran boyutunda görünür: sahnenin içine çizilmiş bir
   düğme tıklanamaz.
   -------------------------------------------------------------------------- */
.sahne-link {
    display: inline-flex;
    justify-self: start;
    align-items: center;
    justify-content: center;
    gap: .4em;
    /* Deponun dokunma eşiği. */
    min-height: var(--tap-target, 44px);
    margin-top: var(--space-5, 1.25rem);
    padding: .62em 1.15em;
    border-radius: 999px;
    font-size: var(--text-sm, .9rem);
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: var(--white, #fff);
    background: var(--brand-500, #2c4ced);
    transition: background-color var(--dur-fast, .2s) var(--ease-out, ease);
}

.sahne-link::after {
    content: "→";
    transition: transform var(--dur-fast, .2s) var(--ease-out, ease);
}

.sahne-link:hover,
.sahne-link:focus-visible {
    background: var(--brand-600, #1a38d1);
}

.sahne-link:hover::after,
.sahne-link:focus-visible::after {
    transform: translateX(.22em);
}

@media (prefers-reduced-motion: reduce) {
    .sahne-link,
    .sahne-link::after {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   7. HAREKET
   `.fx-reveal` deponun kendi motoru; betik yoksa ya da reduced-motion ise
   hiçbir sınıf eklenmez ve sahne olduğu gibi görünür.
   -------------------------------------------------------------------------- */
.sahne.fx-armed .sahne-alan {
    opacity: 0;
    transform: translate3d(0, 10px, 0);
}

.sahne.fx-armed.fx-in .sahne-alan {
    opacity: 1;
    transform: none;
    transition:
        opacity   620ms var(--fx-ease, ease) 120ms,
        transform 620ms var(--fx-ease, ease) 120ms;
}

@keyframes sahne-panel-gir {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: none; }
}

.flow-shell.is-ready .flow-panel.is-active {
    animation: sahne-panel-gir 520ms var(--fx-ease, cubic-bezier(.16, 1, .3, 1)) both;
}

@media (prefers-reduced-motion: reduce) {
    .sahne.fx-armed .sahne-alan,
    .sahne.fx-armed.fx-in .sahne-alan {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .flow-shell.is-ready .flow-panel.is-active {
        animation: none;
    }

    /* Uçuş, yalpa ve hale nefesi tamamen durur; robot son hâlinde
       ekranda kalır. Süreyi kısaltmak yetmez — sürekli dönen bir hareket
       vestibüler rahatsızlığın ta kendisi. */
    .sc-cekirdek,
    .sc-cekirdek-kare,
    .sc-cekirdek-hale,
    .sc-cekirdek-itki,
    .sc-cekirdek-logo {
        transition: none;
        animation: none;
    }

    /* İtki ve logo nabzı sabit kalıyor — görünür ama kıpırdamıyor.
       Aralıklarla yanıp sönen bir öğe, azaltılmış hareket isteyen ziyaretçi
       için tam olarak istenmeyen şey. */
    .sc-cekirdek-itki { opacity: .8; }
    .sc-cekirdek-logo { opacity: .5; }
}

/* --------------------------------------------------------------------------
   SAHNE 1 — kanalları bağla
   Üç sütun: kanallar · çekirdek · kanallar. Bağlantı çizgileri kartın kendi
   `::after`ından çıkıyor, ayrı bir SVG katmanı gerekmiyor.
   -------------------------------------------------------------------------- */
.sc-kanallar {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.6cqw;
}

.sc-cevrimici {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .55cqw;
    padding: .5cqw 1cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    font-size: .86cqw;
    font-weight: 600;
    color: var(--sc-metin);
    background: var(--sc-kart);
    box-shadow: var(--sc-kart-golge);
}

.sc-cevrimici i {
    width: .62cqw;
    height: .62cqw;
    border-radius: 50%;
    background: var(--sc-yesil);
}

.sc-kanal-sutun {
    display: grid;
    gap: 1.3cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-kanal {
    position: relative;
    display: grid;
    grid-template-columns: 2.6cqw minmax(0, 1fr) 1.5cqw;
    align-items: center;
    gap: .9cqw;
}

/* Bağlantı teli: kart ile çekirdek arasındaki yatay çizgi. */
.sc-kanal::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2.6cqw;
    border-top: 1px solid var(--sc-cizgi);
}

.sc-kanal-sutun:first-of-type .sc-kanal::after { left: 100%; }
.sc-kanal-sutun:last-of-type  .sc-kanal::after { right: 100%; }

.sc-kanal-ikon {
    display: grid;
    place-items: center;
    width: 2.6cqw;
    height: 2.6cqw;
    border-radius: .7cqw;
    background: var(--sc-dolgu);
    color: var(--sc-mor);
}

.sc-kanal-ikon svg {
    width: 62%;
    height: 62%;
}

.sc-kanal-yazi {
    display: block;
    min-width: 0;
}

.sc-kanal.is-yakinda {
    opacity: .78;
}

/* Marka renkleri: ikonlar sayfanın kanal şeridiyle aynı dili konuşuyor. */
.sc-kanal-ikon.chan-whatsapp  { color: #25d366; background: rgba(37, 211, 102, .12); }
.sc-kanal-ikon.chan-instagram { color: #d62976; background: rgba(214, 41, 118, .12); }
.sc-kanal-ikon.chan-messenger { color: #0084ff; background: rgba(0, 132, 255, .12); }
.sc-kanal-ikon.chan-telegram  { color: #229ed9; background: rgba(34, 158, 217, .12); }
.sc-kanal-ikon.chan-slack     { color: #611f69; background: rgba(97, 31, 105, .12); }
.sc-kanal-ikon.chan-web       { color: var(--sc-mor); background: var(--sc-dolgu); }

[data-theme="dark"] .sc-kanal-ikon.chan-slack { color: #c39bc9; background: rgba(195, 155, 201, .14); }

@media (max-width: 1023px) {
    .sc-kanallar {
        gap: 1.4rem;
    }

    .sc-cevrimici {
        position: static;
        transform: none;
        /* Kendi SATIRI olsun: aksi hâlde üç sütunlu ızgaranın ilk hücresine
           girip çekirdek sütununu 88 px'e sıkıştırıyordu — ölçüldü. */
        grid-column: 1 / -1;
        justify-self: center;
        padding: .35rem .8rem;
        font-size: var(--text-xs, .75rem);
        gap: .4rem;
    }

    .sc-cevrimici i { width: .45rem; height: .45rem; }
}


/* --------------------------------------------------------------------------
   SAHNE 2 — bilgiyi ekle, bot öğrensin
   Sahne 1'in üç sütunlu iskeleti: kaynak kartları · çekirdek · kaynak
   kartları. Bağlantı telleri yine kartın kendi `::after`ından çıkıyor, ayrı
   bir SVG katmanı yok.

   KARTLARIN İÇİ UYDURMA VERİ TAŞIMAZ: dosya adları örnek olduğu belli olan
   yer tutucular, cevap gövdeleri ise `.sc-cubuk` çubukları. Sahte bir sayı
   ya da oran bir pazarlama görselinde yazılı bir iddiadır; burada yok.
   -------------------------------------------------------------------------- */
.sc-kaynaklar {
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 2.4cqw;
}

/* Çekirdek sahne 1'dekinden küçük: buradaki kartlar içerik taşıyor,
   yatay yere ihtiyaçları var. */
.sc-kaynaklar .sc-cekirdek {
    width: 16cqw;
}

/* Üst ortadaki rozet — sahne 1'deki "Çevrimiçi" rozetiyle aynı hizada. */
.sc-kaynak-rozet {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    gap: .55cqw;
    padding: .5cqw 1cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    font-size: .86cqw;
    font-weight: 600;
    color: var(--sc-metin);
    background: var(--sc-kart);
    box-shadow: var(--sc-kart-golge);
}

.sc-kaynak-rozet svg {
    width: 1cqw;
    height: 1cqw;
    flex: none;
    color: var(--sc-mor);
}

.sc-kaynak-sutun {
    display: grid;
    gap: 1.8cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-kaynak {
    position: relative;
    display: grid;
    gap: .9cqw;
}

/* Bağlantı teli: kart ile çekirdek arasındaki yatay çizgi. */
.sc-kaynak::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2.4cqw;
    border-top: 1px solid var(--sc-cizgi);
}

.sc-kaynak-sutun:first-of-type .sc-kaynak::after { left: 100%; }
.sc-kaynak-sutun:last-of-type  .sc-kaynak::after { right: 100%; }

/* Kart başlığı: ikon · yazı · onay işareti */
.sc-kaynak-bas {
    display: grid;
    grid-template-columns: 2.6cqw minmax(0, 1fr) 1.5cqw;
    align-items: center;
    gap: .9cqw;
}

.sc-kaynak-ikon {
    display: grid;
    place-items: center;
    width: 2.6cqw;
    height: 2.6cqw;
    border-radius: .7cqw;
    background: var(--sc-dolgu);
    color: var(--sc-mor);
}

.sc-kaynak-ikon svg {
    width: 62%;
    height: 62%;
}

.sc-kaynak-yazi {
    display: block;
    min-width: 0;
}

/* `.sc-kart-alt` değil: alt satır burada `--sc-soluk` yerine `--sc-metin`
   kullanıyor, iki temada da 4.5:1'in üstünde kalsın diye. */
.sc-kaynak-alt {
    display: block;
    margin: .25cqw 0 0;
    font-size: .86cqw;
    line-height: 1.35;
    color: var(--sc-metin);
}

/* Kaynak ikonlarının kimliği. Yalnızca belge kırmızısı jeton dışı: dosya
   ikonu her yerde kırmızı okunuyor. Koyu tema karşılığı hemen altında —
   #d0342c koyu zeminde 3:1'in altına düşerdi. */
.sc-kaynak-ikon.kay-web { color: var(--sc-mor);  background: var(--sc-dolgu); }
.sc-kaynak-ikon.kay-sss { color: var(--sc-mavi); background: var(--sc-dolgu); }
.sc-kaynak-ikon.kay-kb  { color: var(--sc-mor);  background: var(--sc-dolgu); }
.sc-kaynak-ikon.kay-pdf { color: #d0342c; background: rgba(208, 52, 44, .12); }
[data-theme="dark"] .sc-kaynak-ikon.kay-pdf { color: #ff9a91; background: rgba(255, 154, 145, .14); }

/* ---- Web sitesi kartı: mini tarayıcı penceresi ---- */
.sc-mini-tarayici {
    overflow: hidden;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: .7cqw;
    background: var(--sc-dolgu);
}

.sc-mini-ust {
    display: flex;
    align-items: center;
    gap: .4cqw;
    padding: .5cqw .7cqw;
    border-bottom: 1px solid var(--sc-kart-kenar);
}

.sc-mini-ust i {
    width: .5cqw;
    height: .5cqw;
    border-radius: 50%;
    background: var(--sc-cizgi);
}

.sc-mini-adres {
    display: flex;
    align-items: center;
    gap: .45cqw;
    margin: .6cqw .7cqw;
    padding: .35cqw .65cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    font-size: .8cqw;
    line-height: 1.3;
    color: var(--sc-metin);
    background: var(--sc-kart);
    overflow: hidden;
}

/* Kısaltma flex kabında değil, yazının kendi kutusunda çalışır. */
.sc-mini-adres span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sc-mini-adres svg {
    width: .8cqw;
    height: .8cqw;
    flex: none;
}

.sc-mini-govde {
    padding: 0 .7cqw .75cqw;
}

/* ---- Dosya / soru / makale satırları ---- */
.sc-kaynak-liste {
    display: grid;
    gap: .75cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-kaynak-oge {
    display: grid;
    grid-template-columns: 2cqw minmax(0, 1fr);
    align-items: center;
    column-gap: .7cqw;
    padding: .55cqw .7cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: .6cqw;
    background: var(--sc-dolgu);
}

.sc-kaynak-oge-ikon {
    display: grid;
    place-items: center;
    width: 2cqw;
    height: 2cqw;
    border-radius: .5cqw;
    color: var(--sc-mor);
    background: var(--sc-kart);
}

.sc-kaynak-oge-ikon svg {
    width: 62%;
    height: 62%;
}

.sc-kaynak-oge-yazi {
    display: block;
    min-width: 0;
}

.sc-kaynak-oge-ad {
    display: block;
    font-size: .84cqw;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sc-baslik);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SAHNE 2 DOLDURULDUKTAN SONRA BOŞTA KALDI: kaynak satırları artık gerçek
   özet metni taşıyor, bu bileşik seçici hiçbir öğeye denk gelmiyor. Kural
   zararsız olduğu için duruyor; `.sc-cubuk` başka sahnelerde hâlâ geçerli. */
.sc-kaynak-oge-ad + .sc-cubuk {
    margin-top: .38cqw;
}

/* `--sc-yer-tutucu` beyaz karta göre ayarlı; `--sc-dolgu` zeminde iki ton
   birbirine giriyor ve çubuk kayboluyordu. Satır ve tarayıcı gövdesi
   içinde bir kademe koyu jetona geçiyor. */
.sc-kaynak-oge .sc-cubuk,
.sc-mini-govde .sc-cubuk {
    background: var(--sc-cizgi);
}

/* DAR EKRAN İÇİN AYRI KURAL YOK — bilerek.
   `.sahne-kaydir` kaydırma kabı, `.sahne-alan` ise 620 px'lik ölçek kabı
   olarak kaldığı için buradaki her `cqw` dar ekranda da aynı orana
   çözülüyor; kompozisyon birebir korunuyor. Rozeti `position: static`e
   çevirmek onu ızgaranın bir hücresine sokar ve üç sütunu kaydırırdı. */


/* --------------------------------------------------------------------------
   SAHNE 3 — kontrol et ve yayına al
   İki satır: üstte beş adımlık yatay akış, altta çekirdek ve canlı otomasyon
   kartı. Bağlantı telleri yine `::before` / `::after` ile çiziliyor; ayrı bir
   SVG katmanı yok.

   Adım numaraları `--sc-kart` üzerine `--sc-mor` ile yazılıyor: koyu temada
   mor açılıyor, beyaz yazı orada 4.5:1'in altına düşerdi.
   -------------------------------------------------------------------------- */
.sc-otomasyon {
    grid-template-columns: 1fr auto 1fr;
    grid-template-rows: auto auto;
    align-items: center;
    gap: 4cqw 2.4cqw;
}

/* ---- Üst satır: beş adım ---- */
.sc-adimlar {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 2.2cqw;
    margin: 0;
    padding: 0;
    list-style: none;
    /* `list-style: none` yerleşik `list-item` sayacını durduruyor; sahne 1'in
       madde listesindeki gibi kendi sayacımız var. */
    counter-reset: sc-adim;
}

.sc-adim {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: center;
    gap: .6cqw;
    text-align: center;
    counter-increment: sc-adim;
}

.sc-adim::before {
    content: counter(sc-adim);
    display: grid;
    place-items: center;
    width: 2.1cqw;
    height: 2.1cqw;
    border-radius: 50%;
    font-size: .92cqw;
    font-weight: 700;
    color: var(--sc-kart);
    background: var(--sc-mor);
}

/* Adımlar arası tel: sonraki kartın soluna doğru. */
.sc-adim + .sc-adim::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 2.2cqw;
    border-top: 1px solid var(--sc-cizgi);
}

.sc-adim-ad {
    display: block;
    font-size: .9cqw;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sc-baslik);
    overflow-wrap: break-word;
}

/* ---- Alt satır: durum rozeti · çekirdek · otomasyon kartı ---- */
.sc-yayinda {
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: .55cqw;
    padding: .5cqw 1cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    font-size: .86cqw;
    font-weight: 600;
    color: var(--sc-metin);
    background: var(--sc-kart);
    box-shadow: var(--sc-kart-golge);
}

.sc-yayinda i {
    width: .62cqw;
    height: .62cqw;
    border-radius: 50%;
    background: var(--sc-yesil);
}

.sc-otomasyon .sc-cekirdek {
    width: 17cqw;
}

/* Çekirdekten adım şeridine çıkan dikey tel — satır aralığı kadar. */
.sc-otomasyon .sc-cekirdek::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    height: 4cqw;
    border-left: 1px solid var(--sc-cizgi);
}

.sc-akis {
    position: relative;
    display: grid;
    align-content: start;
    gap: .9cqw;
}

/* Çekirdeğe bağlayan yatay tel. */
.sc-akis::before {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    width: 2.4cqw;
    border-top: 1px solid var(--sc-cizgi);
}

.sc-akis-bas {
    display: flex;
    align-items: center;
    gap: .6cqw;
    margin: 0;
}

.sc-akis-nokta {
    width: .62cqw;
    height: .62cqw;
    flex: none;
    border-radius: 50%;
    background: var(--sc-yesil);
}

.sc-akis-liste {
    display: grid;
    gap: .7cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-akis-oge {
    display: grid;
    grid-template-columns: 2cqw minmax(0, 1fr);
    align-items: center;
    column-gap: .7cqw;
    padding: .55cqw .7cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: .6cqw;
    background: var(--sc-dolgu);
}

/* Tamamlanan adım onay işaretini de taşır: durum yalnızca renkle anlatılmıyor. */
.sc-akis-oge.is-tamam {
    grid-template-columns: 2cqw minmax(0, 1fr) 1.5cqw;
}

.sc-akis-ikon {
    display: grid;
    place-items: center;
    width: 2cqw;
    height: 2cqw;
    border-radius: .5cqw;
    color: var(--sc-mor);
    background: var(--sc-kart);
}

.sc-akis-ikon svg {
    width: 62%;
    height: 62%;
}

.sc-akis-yazi {
    display: block;
    min-width: 0;
}

.sc-akis-ad {
    display: block;
    font-size: .84cqw;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sc-baslik);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* SAHNE 3 DOLDURULDUKTAN SONRA BOŞTA KALDI: akış satırları artık olayın
   kendisini yazıyor. Yukarıdakiyle aynı gerekçeyle duruyor. */
.sc-akis-ad + .sc-cubuk {
    margin-top: .38cqw;
}

/* `--sc-yer-tutucu` beyaz karta göre ayarlı; `--sc-dolgu` zeminde iki ton
   birbirine giriyor ve çubuk kayboluyordu. Satırın içinde bir kademe koyu
   jetona geçiyor. */
.sc-akis-oge .sc-cubuk {
    background: var(--sc-cizgi);
}

/* DAR EKRAN İÇİN AYRI KURAL YOK — bilerek.
   `.sahne-kaydir` kaydırma kabı, `.sahne-alan` ise 620 px'lik ölçek kabı
   olarak kaldığı için buradaki her `cqw` dar ekranda da aynı orana
   çözülüyor; beş adımlık şerit dar ekranda da beş sütun kalıyor. */


/* --------------------------------------------------------------------------
   SAHNE 4 — bot müşterinin dilinde yanıtlar (tek gelen kutusu)
   Üç bölge: kanal şeridi · konuşma listesi · seçili konuşma. Orta ve sağ
   bölge TEK pencere; ürün de öyle çalışıyor — dört kanal ayrı ayrı değil,
   aynı listede toplanıyor.

   Konuşmalar artık ÖRNEK metin: adlar baş harfle kısaltılmış (Ayşe K.),
   gerçek bir telefon ya da e-posta biçimi hiçbir satırda geçmiyor. Sahne
   bunu kendi üstünde "Örnek ekran" rozetiyle yazıyla söylüyor — rozet
   kaldırılırsa bu satırlar gerçekmiş gibi okunur ve kural çiğnenir.
   -------------------------------------------------------------------------- */
.sc-gelen {
    grid-template-columns: 12.6cqw minmax(0, 1fr);
    align-items: center;
    gap: 3cqw;

    /* Mor zeminin ÜSTÜNDEKİ yazı. Kart rengi her iki temada da doğru
       karşıtı veriyor: açıkta beyaz (6,1:1), koyuda lacivert (5,4:1).
       Sabit beyaz koyu temada 2,9:1'e düşerdi. */
    --sc-mor-yazi: var(--sc-kart);
}

/* --- Sol: kanal şeridi ---------------------------------------------------- */
.sc-gelen .sc-gk-kanallar {
    display: grid;
    gap: 1.5cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-gelen .sc-gk-kanal {
    position: relative;
    display: grid;
    grid-template-columns: 2.2cqw minmax(0, 1fr) .62cqw;
    align-items: center;
    gap: .7cqw;
    padding: .75cqw .85cqw;
    border-radius: .85cqw;
}

/* Kanaldan pencereye giden tel — sahne 1'deki bağlantı diliyle aynı. */
.sc-gelen .sc-gk-kanal::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    width: 3cqw;
    border-top: 1px solid var(--sc-cizgi);
}

.sc-gelen .sc-kanal-ikon {
    width: 2.2cqw;
    height: 2.2cqw;
    border-radius: .6cqw;
}

.sc-gelen .sc-gk-kanal-yazi {
    display: block;
    min-width: 0;
}

.sc-gelen .sc-gk-ad {
    display: block;
    font-size: .92cqw;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sc-baslik);
}

/* Alt satır --sc-metin, --sc-soluk değil: soluk jeton beyaz kartta
   3,5:1 veriyor ve 4,5:1 eşiğinin altında kalıyor. */
.sc-gelen .sc-gk-alt {
    display: block;
    margin-top: .14cqw;
    font-size: .8cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

/* Rozet sayacı değil nokta: "yeni var" bilgisi sayı uydurmadan da verilir. */
.sc-gelen .sc-nokta {
    justify-self: end;
    width: .62cqw;
    height: .62cqw;
    border-radius: 50%;
    background: var(--sc-yesil);
}

/* --- Pencere -------------------------------------------------------------- */
.sc-gelen .sc-gk-pencere {
    display: grid;
    gap: 1cqw;
    padding: 1.4cqw;
    border-radius: 1.2cqw;
}

.sc-gelen .sc-gk-ust {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 15cqw;
    align-items: center;
    gap: 1cqw;
}

.sc-gelen .sc-gk-arama {
    display: grid;
    grid-template-columns: 1.1cqw minmax(0, 1fr);
    align-items: center;
    gap: .6cqw;
    padding: .5cqw .8cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    color: var(--sc-metin);
    background: var(--sc-dolgu);
}

.sc-gelen .sc-gk-arama svg {
    width: 1.1cqw;
    height: 1.1cqw;
}

.sc-gelen .sc-gk-arama-cubuk {
    width: 64%;
    height: .5cqw;
    background: var(--sc-cizgi);
}

.sc-gelen .sc-gk-govde {
    display: grid;
    grid-template-columns: 18.5cqw minmax(0, 1fr);
    gap: 1.4cqw;
}

/* --- Orta: filtre sekmeleri ve konuşma listesi ---------------------------- */
.sc-gelen .sc-gk-liste {
    display: grid;
    align-content: start;
    gap: .9cqw;
}

.sc-gelen .sc-gk-sekmeler {
    display: flex;
    flex-wrap: wrap;
    gap: .3cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-gelen .sc-gk-sekme {
    display: block;
    padding: .35cqw .62cqw;
    border-radius: 999px;
    font-size: .8cqw;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sc-metin);
    background: var(--sc-dolgu);
}

.sc-gelen .sc-gk-sekme.is-secili {
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

.sc-gelen .sc-gk-satirlar {
    display: grid;
    gap: .6cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-gelen .sc-gk-satir {
    display: grid;
    grid-template-columns: 2.4cqw minmax(0, 1fr) 2.2cqw;
    align-items: center;
    gap: .7cqw;
    padding: .7cqw .8cqw;
    border-radius: .8cqw;
    background: var(--sc-kart);
    box-shadow: inset 0 0 0 1px var(--sc-kart-kenar);
}

/* Seçili satır rengin YANINDA biçim de taşıyor: soldaki mor kenar.
   Rengi ayırt edemeyen de hangi satırın açık olduğunu görüyor. */
.sc-gelen .sc-gk-satir.is-secili {
    background: var(--sc-dolgu);
    box-shadow:
        inset 0 0 0 1px var(--sc-cizgi),
        inset .24cqw 0 0 var(--sc-mor);
}

/* Avatar: düz siluet. Gerçek kişi fotoğrafı ya da isim YOK. */
.sc-gelen .sc-gk-avatar {
    display: grid;
    place-items: center;
    width: 2.4cqw;
    height: 2.4cqw;
    border-radius: 50%;
    color: var(--sc-soluk);
    background: var(--sc-yer-tutucu);
}

.sc-gelen .sc-gk-avatar.is-mor {
    color: var(--sc-mor);
    background: var(--sc-dolgu);
}

.sc-gelen .sc-gk-avatar svg {
    width: 68%;
    height: 68%;
}

.sc-gelen .sc-gk-satir-yazi {
    display: block;
    min-width: 0;
}

.sc-gelen .sc-gk-satir-yazi .sc-gk-ad-cubuk {
    width: 54%;
    height: .58cqw;
    background: var(--sc-cizgi);
}

.sc-gelen .sc-gk-satir-yazi .sc-gk-onizleme {
    width: 88%;
    height: .5cqw;
    margin-top: .45cqw;
}

/* Saatin yerinde de yer tutucu var: uydurma bir saat de uydurma veridir. */
.sc-gelen .sc-gk-saat {
    width: 100%;
    height: .45cqw;
}

/* --- Sağ: seçili konuşma -------------------------------------------------- */
.sc-gelen .sc-gk-sohbet {
    display: grid;
    align-content: space-between;
    gap: 1.2cqw;
    padding-left: 1.4cqw;
    border-left: 1px solid var(--sc-kart-kenar);
}

.sc-gelen .sc-gk-balonlar {
    display: grid;
    align-content: start;
    gap: .8cqw;
}

.sc-gelen .sc-gk-balon {
    width: 76%;
    padding: .8cqw .9cqw;
    border-radius: 1cqw;
}

.sc-gelen .sc-gk-balon-gelen {
    justify-self: start;
    border: 1px solid var(--sc-kart-kenar);
    border-bottom-left-radius: .3cqw;
    background: var(--sc-dolgu);
}

.sc-gelen .sc-gk-balon-giden {
    justify-self: end;
    border-bottom-right-radius: .3cqw;
    background: var(--sc-mor);
}

.sc-gelen .sc-gk-balon-gelen .sc-cubuk {
    background: var(--sc-cizgi);
}

.sc-gelen .sc-gk-balon-giden .sc-cubuk {
    background: var(--sc-mor-yazi);
    opacity: .72;
}

.sc-gelen .sc-gk-yazac {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.4cqw;
    align-items: center;
    gap: .7cqw;
}

.sc-gelen .sc-gk-yazac-alan {
    display: grid;
    align-items: center;
    padding: .7cqw .9cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    background: var(--sc-dolgu);
}

.sc-gelen .sc-gk-yazac-cubuk {
    width: 46%;
    height: .5cqw;
    background: var(--sc-cizgi);
}

.sc-gelen .sc-gk-gonder {
    display: grid;
    place-items: center;
    width: 2.4cqw;
    height: 2.4cqw;
    border-radius: 50%;
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

.sc-gelen .sc-gk-gonder svg {
    width: 54%;
    height: 54%;
}

/* --- Dar ekran ------------------------------------------------------------
   sahne.css sahneyi kendi yatay kaydırma kabına alıyor; burada yalnızca
   boşluk ve teller toparlanıyor. Tel, kaydırma kabında hiçbir şeye
   bağlanmadığı için havada kalırdı.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .sc-gelen {
        gap: 1.4rem;
    }

    .sc-gelen .sc-gk-kanal::after {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   SAHNE 5 — neyin çalıştığını ölçün (analitik panosu)

   BU SAHNEDEKİ RAKAMLAR ÖRNEKTİR ve sahne bunu kendi üstünde "Örnek ekran"
   rozetiyle söylüyor. Ayrım önemli: gösterilen sayılar bir MÜŞTERİNİN kendi
   panosunda göreceği büyüklükler (günlük mesaj, 7 günlük toplam, soru
   sayıları). Rasterde olan `4,8/5 memnuniyet` gibi ÜRÜN İDDİALARI geri
   gelmedi ve gelmemeli: memnuniyet oranı, müşteri sayısı ve başarı yüzdesi
   bu depoda hiçbir yerde doğru değil. Rozet bu sahnenin taşıyıcı parçası,
   süsü değil.
   -------------------------------------------------------------------------- */
.sc-pano {
    /* Mor zeminin ÜSTÜNDEKİ yazı: kart rengi her iki temada da doğru
       karşıtı veriyor (açıkta beyaz, koyuda lacivert). */
    --sc-mor-yazi: var(--sc-kart);
}

.sc-pano .sc-pano-pencere {
    display: grid;
    gap: 1.2cqw;
    padding: 1.4cqw;
    border-radius: 1.3cqw;
}

/* Pencerenin içindeki kutular kenarlıkla ayrılıyor; ikinci bir gölge
   katmanı panoyu kabartmalı bir yığına çevirirdi. */
.sc-pano .sc-pano-pencere .sc-kart {
    box-shadow: none;
}

/* --- Başlık satırı -------------------------------------------------------- */
.sc-pano .sc-pano-ust {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1cqw;
}

.sc-pano .sc-pano-dugmeler {
    display: flex;
    gap: .6cqw;
}

.sc-pano .sc-pano-dugme {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: .45cqw;
    padding: .45cqw .8cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    font-size: .82cqw;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--sc-metin);
    background: var(--sc-dolgu);
}

.sc-pano .sc-pano-dugme svg {
    width: 1cqw;
    height: 1cqw;
}

/* --- Dört ölçüm kartı ----------------------------------------------------- */
.sc-pano .sc-metrikler {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.1cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-pano .sc-metrik {
    display: grid;
    align-content: start;
    gap: .55cqw;
    padding: .9cqw 1cqw;
    border-radius: .9cqw;
}

.sc-pano .sc-metrik-ikon {
    display: grid;
    place-items: center;
    width: 2.1cqw;
    height: 2.1cqw;
    border-radius: .6cqw;
    color: var(--sc-mor);
    background: var(--sc-dolgu);
}

.sc-pano .sc-metrik-ikon.renk-mavi  { color: var(--sc-mavi); }
.sc-pano .sc-metrik-ikon.renk-yesil { color: var(--sc-yesil); }

.sc-pano .sc-metrik-ikon svg {
    width: 62%;
    height: 62%;
}

.sc-pano .sc-metrik-etiket {
    font-size: .84cqw;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sc-metin);
}

/* RAKAMIN YERİ. Buraya bir sayı yazmak, bu deponun tek yasak ettiği şeydir. */
.sc-pano .sc-metrik-sayi {
    width: 62%;
    height: 1.35cqw;
    border-radius: .4cqw;
}

.sc-pano .sc-metrik-trend {
    display: grid;
    grid-template-columns: .9cqw minmax(0, 1fr);
    align-items: center;
    gap: .45cqw;
}

.sc-pano .sc-metrik-trend svg {
    width: .9cqw;
    height: .9cqw;
}

/* Yön oku: büyüklük değil YÖN gösteriyor, o yüzden yanında rakam yok. */
.sc-pano .sc-ok-yukari { color: var(--sc-yesil); }
.sc-pano .sc-ok-asagi  { color: var(--sc-metin); }

.sc-pano .sc-metrik-trend-cubuk {
    width: 62%;
    height: .42cqw;
}

/* --- Orta sıra: trend grafiği + en çok sorulanlar ------------------------- */
.sc-pano .sc-pano-orta {
    display: grid;
    grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
    gap: 1.2cqw;
}

.sc-pano .sc-grafik-kart,
.sc-pano .sc-halka-kart,
.sc-pano .sc-kanal-kart {
    display: grid;
    align-content: start;
    gap: .8cqw;
    padding: 1cqw 1.1cqw;
    border-radius: .9cqw;
}

/* Kart yüksekliği komşusundan geliyor; düğme dibe otursun diye satırlar
   arasındaki boşluk dağıtılıyor. */
.sc-pano .sc-sorular-kart {
    display: grid;
    align-content: space-between;
    gap: .8cqw;
    padding: 1cqw 1.1cqw;
    border-radius: .9cqw;
}

.sc-pano .sc-grafik {
    display: block;
    width: 100%;
    aspect-ratio: 300 / 86;
}

.sc-pano .sc-grafik-izgara {
    stroke: var(--sc-kart-kenar);
    stroke-width: 1;
}

.sc-pano .sc-grafik-alan {
    fill: url(#sc5-grafik-dolgu);
}

.sc-pano .sc-grafik-stop-ust {
    stop-color: var(--sc-mor);
    stop-opacity: .3;
}

.sc-pano .sc-grafik-stop-alt {
    stop-color: var(--sc-mor);
    stop-opacity: 0;
}

.sc-pano .sc-grafik-cizgi {
    fill: none;
    stroke: var(--sc-mor);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.sc-pano .sc-grafik-nokta {
    fill: var(--sc-kart);
    stroke: var(--sc-mor);
    stroke-width: 2.4;
}

/* Eksende gün adı ya da sayı değil, yer tutucu var. */
.sc-pano .sc-grafik-eksen {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .8cqw;
}

.sc-pano .sc-grafik-eksen i {
    display: block;
    height: .38cqw;
    border-radius: 999px;
    background: var(--sc-yer-tutucu);
}

.sc-pano .sc-soru-liste {
    display: grid;
    gap: .7cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-pano .sc-soru {
    display: grid;
    grid-template-columns: .7cqw minmax(0, 1fr);
    align-items: center;
    gap: .6cqw;
}

.sc-pano .sc-soru i {
    display: block;
    width: .7cqw;
    height: .7cqw;
    border-radius: 50%;
    background: var(--sc-mor);
}

.sc-pano .sc-soru .sc-cubuk {
    height: .55cqw;
}

.sc-pano .sc-yenile-dugme {
    justify-self: start;
    padding: .55cqw 1cqw;
    border-radius: 999px;
    font-size: .82cqw;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

/* --- Alt sıra: halka + kanal listesi -------------------------------------- */
.sc-pano .sc-pano-alt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 1.2cqw;
}

.sc-pano .sc-halka-govde {
    display: grid;
    grid-template-columns: 8.4cqw minmax(0, 1fr);
    align-items: center;
    gap: 1.2cqw;
}

.sc-pano .sc-halka-cizim {
    display: block;
    width: 8.4cqw;
    height: 8.4cqw;
}

.sc-pano .sc-halka-iz {
    fill: none;
    stroke: var(--sc-yer-tutucu);
    stroke-width: 6;
}

/* Dilimler: çevre 100 birim (r = 15.915), her dilim bir `stroke-dasharray`.
   Aralarındaki 1 birimlik boşluk dilimleri renk körü gözünde de ayırıyor. */
.sc-pano .sc-dilim {
    fill: none;
    stroke-width: 6;
    stroke-linecap: butt;
}

.sc-pano .sc-dilim-1 {
    stroke: var(--sc-mor);
    stroke-dasharray: 29 71;
    stroke-dashoffset: 25;
}

.sc-pano .sc-dilim-2 {
    stroke: var(--sc-mavi);
    stroke-dasharray: 23 77;
    stroke-dashoffset: 95;
}

.sc-pano .sc-dilim-3 {
    stroke: var(--sc-yesil);
    stroke-dasharray: 19 81;
    stroke-dashoffset: 71;
}

.sc-pano .sc-dilim-4 {
    stroke: var(--sc-mor);
    stroke-dasharray: 13 87;
    stroke-dashoffset: 51;
    opacity: .45;
}

.sc-pano .sc-dilim-5 {
    stroke: var(--sc-cizgi);
    stroke-dasharray: 11 89;
    stroke-dashoffset: 37;
}

.sc-pano .sc-halka-lejant {
    display: grid;
    gap: .55cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-pano .sc-lejant {
    display: grid;
    grid-template-columns: .62cqw minmax(0, 1fr);
    align-items: center;
    gap: .55cqw;
}

.sc-pano .sc-lejant i {
    display: block;
    width: .62cqw;
    height: .62cqw;
    border-radius: 50%;
    background: var(--sc-cizgi);
}

.sc-pano .sc-lejant-1 i { background: var(--sc-mor); }
.sc-pano .sc-lejant-2 i { background: var(--sc-mavi); }
.sc-pano .sc-lejant-3 i { background: var(--sc-yesil); }
.sc-pano .sc-lejant-4 i { background: var(--sc-mor); opacity: .45; }
.sc-pano .sc-lejant-5 i { background: var(--sc-cizgi); }

.sc-pano .sc-lejant .sc-cubuk {
    height: .48cqw;
}

.sc-pano .sc-kanal-liste {
    display: grid;
    gap: .6cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-pano .sc-kanal-satir {
    display: grid;
    grid-template-columns: 1.9cqw 7.5cqw minmax(0, 1fr);
    align-items: center;
    gap: .7cqw;
}

.sc-pano .sc-kanal-ikon {
    width: 1.9cqw;
    height: 1.9cqw;
    border-radius: .5cqw;
}

.sc-pano .sc-kanal-satir-ad {
    font-size: .86cqw;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sc-baslik);
}

/* Kanal ölçüsü de yer tutucu: kanal ADI gerçek, ölçüsü olamaz. */
.sc-pano .sc-oran {
    display: block;
    height: .5cqw;
    border-radius: 999px;
    background: var(--sc-yer-tutucu);
}

.sc-pano .sc-oran i {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--sc-mor);
}

.sc-pano .sc-oran-1 i { width: 76%; }
.sc-pano .sc-oran-2 i { width: 58%; }
.sc-pano .sc-oran-3 i { width: 44%; }
.sc-pano .sc-oran-4 i { width: 30%; }

/* --- Dar ekran ------------------------------------------------------------
   sahne.css sahneyi kendi yatay kaydırma kabına alıyor; burada yalnızca
   pano nefes alsın diye boşluklar toparlanıyor.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
    .sc-pano .sc-pano-dugmeler {
        gap: .4rem;
    }
}


/* ==========================================================================
   GENİŞ SAHNE — sol metin paneli OLMAYAN sahneler (06 · 07 · 08)
   --------------------------------------------------------------------------
   Sahne 01-05 iki bölgeli: solda metin (.sahne-panel), sağda görsel alan.
   Bu üçü ise sayfanın "özellikler" bölümündeki .split ızgarasına giriyor;
   metin ZATEN sahnenin yanında duruyor. Bu yüzden burada .sahne-ic ve
   .sahne-panel yok — sahne tek bölge.

   ÖLÇEK
   .split-visual sütunu masaüstünde ~585 px. Yani 1cqw ≈ 5,85 px ve sahne 01'in
   ölçeği (1cqw ≈ 12,3 px) buraya OLDUĞU GİBİ taşınamaz: .sc-kart-baslik'in
   1.02cqw'si burada 6 px eder. Bu üç sahnenin kendi ölçeği yaklaşık iki
   katı — mikro etiket 1.5cqw, gövde 1.8cqw, başlık 2.05cqw.

   TUVAL neden var
   Dar ekranda sahne.css .sahne-alan'ı yatay kaydırma kabına çeviriyor ve
   çocuklarına min-width: 620px veriyor. Kap sorgusu birimi kabın GÖRÜNEN
   genişliğine göre çözüldüğü için (350 px), oradaki her yazı 4-5 px'e
   inerdi. .sc-tuval tek çocuk olarak 620 px'e sabitlenip kabın kendisi
   oluyor: dar ekranda da 1cqw = 6,2 px, kompozisyon birebir aynı kalıyor.
   ========================================================================== */

/* Mor zeminin ÜSTÜNDEKİ yazı. Kart rengi her iki temada da doğru karşıtı
   veriyor: açıkta beyaz (6,1:1), koyuda lacivert (5,4:1). Sabit beyaz koyu
   temada 2,9:1'e düşerdi. Jeton sahne 04 ve 05'teki ile aynı değeri taşıyor,
   yalnızca geniş sahnelere kapsanmış. */
.sahne-genis {
    --sc-mor-yazi: var(--sc-kart);
}

.sahne-genis .sahne-alan {
    aspect-ratio: 1192 / 941;
    align-content: stretch;
    grid-template-rows: minmax(0, 1fr);
    padding: 3cqw;
}

.sc-tuval {
    position: relative;
    display: grid;
    min-width: 0;
    height: 100%;
}

/* Geniş sahnelerin ortak düğmeleri (07 kaydeder, 08 devri kapatır). */
.sc-genis-dugme {
    display: block;
    padding: .95cqw 1.1cqw;
    border-radius: .9cqw;
    font-size: 1.65cqw;
    font-weight: 700;
    line-height: 1.25;
    text-align: center;
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

.sc-mini-dugme {
    display: inline-block;
    padding: .5cqw .9cqw;
    border: 1px solid var(--sc-cizgi);
    border-radius: .7cqw;
    font-size: 1.45cqw;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    color: var(--sc-mor);
    background: var(--sc-dolgu);
}

@media (max-width: 1023px) {
    .sahne-genis .sahne-alan {
        aspect-ratio: auto;
        padding: var(--space-5, 1.25rem) var(--space-4, 1rem);
        /* sahne.css'in dar ekran bloğu da `overflow-x: auto` yazıyor ama
           390 px'te .sahne-alan'ın hesaplanan değeri `visible` çıkıyor —
           ölçüldü, yayındaki index.html'de sahne 01 için de öyle: alan
           620 px kalıp responsive-sync'in `overflow-x: clip`i tarafından
           kırpılıyor. Burada aynı bildirim daha yüksek özgüllükle
           tekrarlanıyor ki tuval KIRPILMAK yerine KAYSIN. */
        min-width: 0;
        max-width: 100%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .sahne-genis .sc-tuval {
        container-type: inline-size;
        width: 620px;
        min-width: 620px;
    }
}

/* ==========================================================================
   SAHNE 6 — çok dilli yanıtlar
   Ortada çekirdek, iki yanında üçer dil öbeği. Her öbek: dil kodu + ziyaretçi
   sorusu + botun AYNI DİLDEKİ yanıtı. Balon metinleri çeviri almıyor; anahtar
   üzerinden geliyor ama beş dilde de aynı değer yazılı, çünkü o balonun işi
   o dili GÖSTERMEK.
   ========================================================================== */
.sc-diller .sc-tuval {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 2.2cqw;
    row-gap: 2.6cqw;
}

/* Rozet sahne 01'den geliyor ama orada mutlak konumlu. Burada ızgaranın ilk
   satırı: mutlak konum, dar ekranda kabın kendi ölçüsüne düşüp balonların
   üstüne biniyordu. */
.sc-diller .sc-cevrimici {
    position: static;
    transform: none;
    grid-column: 1 / -1;
    justify-self: center;
    gap: .8cqw;
    padding: .8cqw 1.6cqw;
    font-size: 1.6cqw;
}

.sc-diller .sc-cevrimici i {
    width: 1cqw;
    height: 1cqw;
}

.sc-diller .sc-cekirdek {
    width: 15cqw;
}

.sc-dil-sutun {
    display: grid;
    gap: 2.2cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-dil {
    position: relative;
    display: grid;
    gap: .55cqw;
    justify-items: start;
}

/* Öbeği çekirdeğe bağlayan tel — sahne 01'deki .sc-kanal::after ile aynı fikir. */
.sc-dil::after {
    content: "";
    position: absolute;
    top: 50%;
    width: 2.2cqw;
    border-top: 1px solid var(--sc-cizgi);
    pointer-events: none;
}

.sc-dil-sutun:first-of-type .sc-dil::after { left: 100%; }
.sc-dil-sutun:last-of-type  .sc-dil::after { right: 100%; }

.sc-dil-kod {
    display: inline-block;
    padding: .3cqw 1cqw;
    border-radius: 999px;
    font-size: 1.5cqw;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    color: var(--sc-mor);
    background: var(--sc-dolgu);
}

.sc-diller .sc-dil-balon {
    display: block;
    width: 100%;
    padding: .85cqw 1.15cqw;
    border-radius: 1.2cqw;
    font-size: 1.75cqw;
    line-height: 1.35;
}

/* Soru: ziyaretçi. Kart yüzeyi, sol alt köşesi kırık. */
.sc-diller .sc-dil-soru {
    border-bottom-left-radius: .35cqw;
    color: var(--sc-metin);
}

/* Yanıt: bot. "Hafif dolgulu" — mor tarafta, sol üst köşesi kırık. */
.sc-diller .sc-dil-yanit {
    border: 1px solid var(--sc-cizgi);
    border-top-left-radius: .35cqw;
    font-weight: 600;
    color: var(--sc-baslik);
    background: var(--sc-dolgu);
}

@media (max-width: 1023px) {
    /* Tuvalin KENDİ boşlukları, kap kendisi olduğu için dışarıdaki daha dar
       kaba göre çözülürdü; 620 px'in karşılıkları elle yazılı. */
    .sc-diller .sc-tuval {
        column-gap: 13.6px;
        row-gap: 16px;
    }
}


/* ==========================================================================
   SAHNE 7 — markanıza uygun web widget
   --------------------------------------------------------------------------
   Solda ayar paneli, sağda mock tarayıcı. Paneldeki karşılama metni ile
   widget'ın ilk balonu AYNI ANAHTARDAN geliyor (sc7_karsilama_metin):
   sahnenin anlattığı şey zaten bu — ayarladığınız şey önizlemede görünüyor.

   MOCK SİTEDE MARKA YOK
   Raster sürümünde uydurma bir marka adı ve dört uydurma müşteri logosu
   vardı. İkisi de kaldırıldı: olmayan bir müşteri, yazılmamış bir iddiadır.
   İskelet tamamen soyut; adres çubuğundaki yourwebsite.com yeterli.

   Ortak .sahne-genis / .sc-tuval / .sc-genis-dugme kuralları sahne-06.css'te.
   ========================================================================== */

/* Renk seçicinin altı örneği. Üçü sahnenin kendi jetonlarından geliyor,
   üçü burada tanımlı — koyu temada da okunur karşılıklarıyla. Bunlar YAZI
   TAŞIMAYAN dekoratif dairelerdir; kontrast ölçütü metin için geçerli. */
.sahne {
    --sc-renk-1: var(--sc-mor);
    --sc-renk-2: var(--sc-mavi);
    --sc-renk-3: var(--sc-yesil);
    --sc-renk-4: #f59e0b;
    --sc-renk-5: #e11d80;
    --sc-renk-6: #0ea5e9;
}

[data-theme="dark"] .sahne {
    --sc-renk-4: #fbbf24;
    --sc-renk-5: #f472b6;
    --sc-renk-6: #38bdf8;
}

.sc-widget .sc-tuval {
    grid-template-columns: 30cqw minmax(0, 1fr);
    column-gap: 2.2cqw;
    align-items: stretch;
}

/* --------------------------------------------------- SOL: ayar paneli ---- */
.sc-widget .sc-ayar {
    display: flex;
    flex-direction: column;
    gap: .95cqw;
    min-width: 0;
    padding: 1.5cqw 1.4cqw;
}

.sc-ayar-baslik {
    margin: 0 0 .2cqw;
    font-size: 2.05cqw;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sc-baslik);
}

.sc-ayar-etiket {
    margin: .4cqw 0 0;
    font-size: 1.4cqw;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--sc-metin);
}

.sc-renkler {
    display: flex;
    gap: .85cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-renk {
    width: 2.4cqw;
    height: 2.4cqw;
    border-radius: 50%;
}

.sc-renk-1 { background: var(--sc-renk-1); }
.sc-renk-2 { background: var(--sc-renk-2); }
.sc-renk-3 { background: var(--sc-renk-3); }
.sc-renk-4 { background: var(--sc-renk-4); }
.sc-renk-5 { background: var(--sc-renk-5); }
.sc-renk-6 { background: var(--sc-renk-6); }

/* Seçili örnek: renge EK olarak halka taşıyor, yani rengi ayırt edemeyen de
   hangisinin seçili olduğunu görüyor. */
.sc-renk.is-secili {
    box-shadow:
        0 0 0 .3cqw var(--sc-kart),
        0 0 0 .62cqw var(--sc-mor);
}

.sc-logo-satir {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: .8cqw;
}

.sc-logo-kutu {
    width: 3.4cqw;
    height: 3.4cqw;
    border: 1px dashed var(--sc-cizgi);
    border-radius: .6cqw;
    background: var(--sc-yer-tutucu);
}

.sc-logo-yazi {
    font-size: 1.5cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

.sc-metin-alan {
    margin: 0;
    min-height: 5.6cqw;
    padding: .8cqw 1cqw;
    border: 1px solid var(--sc-cizgi);
    border-radius: .8cqw;
    font-size: 1.5cqw;
    line-height: 1.4;
    color: var(--sc-metin);
    background: var(--sc-dolgu);
}

/* Sohbet başlığı tek satırlık bir alan; karşılama mesajı çok satırlı. */
.sc-metin-satir {
    min-height: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sc-konumlar {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .7cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-konum {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--sc-cizgi);
    border-radius: .5cqw;
    background: var(--sc-kart);
}

.sc-konum i {
    position: absolute;
    width: .85cqw;
    height: .85cqw;
    border-radius: 50%;
    background: var(--sc-cizgi);
}

.sc-konum-sol-ust i { top: .45cqw; left: .45cqw; }
.sc-konum-sag-ust i { top: .45cqw; right: .45cqw; }
.sc-konum-sol-alt i { bottom: .45cqw; left: .45cqw; }
.sc-konum-sag-alt i { bottom: .45cqw; right: .45cqw; }

.sc-konum.is-secili {
    border-color: var(--sc-mor);
    background: var(--sc-dolgu);
}

.sc-konum.is-secili i {
    background: var(--sc-mor);
}

.sc-konum-not {
    margin: 0;
    font-size: 1.4cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

/* Sahnenin iki yarısını birbirine bağlayan satır: soldaki ayar, sağdaki
   önizleme. Sayfanın kendi metni de bunu söylüyor (lp_f2_desc). */
.sc-onizleme-not {
    display: flex;
    align-items: center;
    gap: .6cqw;
    margin: auto 0 0;
    font-size: 1.4cqw;
    line-height: 1.3;
    font-weight: 600;
    color: var(--sc-metin);
}

.sc-onizleme-not i {
    width: .8cqw;
    height: .8cqw;
    border-radius: 50%;
    background: var(--sc-yesil);
}

/* ------------------------------------------------ SAĞ: mock tarayıcı ---- */
.sc-widget .sc-tar-cerceve {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    min-width: 0;
    padding: 0;
    overflow: hidden;
}

.sc-tarayici-ust {
    display: flex;
    align-items: center;
    gap: 1cqw;
    padding: .85cqw 1.1cqw;
    border-bottom: 1px solid var(--sc-kart-kenar);
    background: var(--sc-dolgu);
}

.sc-noktalar {
    display: inline-flex;
    gap: .5cqw;
}

.sc-noktalar i {
    width: .85cqw;
    height: .85cqw;
    border-radius: 50%;
    background: var(--sc-cizgi);
}

.sc-tar-adres {
    flex: 1 1 auto;
    padding: .35cqw .9cqw;
    border-radius: 999px;
    font-size: 1.4cqw;
    line-height: 1.4;
    color: var(--sc-metin);
    background: var(--sc-kart);
}

.sc-tar-govde {
    position: relative;
    min-height: 0;
    padding: 1.4cqw;
}

/* Soyut site iskeleti: yer tutucu çubuk ve blok. Uydurma metin, uydurma
   marka, uydurma "şu şirketler bize güveniyor" şeridi YOK. */
.sc-iskelet {
    display: grid;
    gap: .9cqw;
}

.sc-widget .sc-cubuk {
    height: .9cqw;
}

/* sahne.css'te ardışık çubuklar birbirine margin ile bağlanıyor; burada
   aralığı ızgara boşluğu veriyor, ikisi üst üste binmesin. */
.sc-iskelet .sc-cubuk + .sc-cubuk {
    margin-top: 0;
}

.sc-iskelet-hero {
    height: 9cqw;
    border-radius: .9cqw;
    background: var(--sc-yer-tutucu);
}

.sc-bloklar {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .9cqw;
}

.sc-bloklar span {
    height: 5.5cqw;
    border-radius: .8cqw;
    background: var(--sc-yer-tutucu);
}

/* ------------------------------------------------ Açık sohbet widget'i -- */
.sc-sohbet {
    position: absolute;
    right: 1.4cqw;
    bottom: 1.4cqw;
    display: grid;
    width: 66%;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 1.2cqw;
    overflow: hidden;
    background: var(--sc-kart);
    box-shadow: var(--sc-kart-golge);
}

.sc-sohbet-ust {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8cqw;
    padding: .85cqw 1cqw;
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

.sc-sohbet-ikon {
    display: grid;
    place-items: center;
    width: 2.6cqw;
    height: 2.6cqw;
    border-radius: 50%;
    color: var(--sc-mor);
    background: var(--sc-kart);
}

.sc-sohbet-ikon svg {
    width: 62%;
    height: 62%;
}

.sc-sohbet-yazi {
    display: block;
    min-width: 0;
}

.sc-sohbet-ad {
    display: block;
    font-size: 1.5cqw;
    font-weight: 700;
    line-height: 1.25;
}

.sc-sohbet-durum {
    display: block;
    font-size: 1.35cqw;
    line-height: 1.3;
}

.sc-sohbet-govde {
    display: grid;
    gap: .65cqw;
    padding: 1cqw;
}

.sc-w-balon {
    display: block;
    max-width: 92%;
    padding: .7cqw .9cqw;
    border-radius: 1cqw;
    font-size: 1.42cqw;
    line-height: 1.35;
}

.sc-w-bot {
    justify-self: start;
    border-bottom-left-radius: .3cqw;
    color: var(--sc-baslik);
    background: var(--sc-dolgu);
}

.sc-w-ziyaretci {
    justify-self: end;
    border-bottom-right-radius: .3cqw;
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

.sc-hizli {
    display: flex;
    flex-wrap: wrap;
    gap: .5cqw;
    margin: .15cqw 0 0;
    padding: 0;
    list-style: none;
}

.sc-hizli li {
    padding: .4cqw .8cqw;
    border: 1px solid var(--sc-mor);
    border-radius: 999px;
    font-size: 1.32cqw;
    line-height: 1.3;
    color: var(--sc-mor);
}

.sc-sohbet-alt {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7cqw;
    padding: .75cqw 1cqw;
    border-top: 1px solid var(--sc-kart-kenar);
}

.sc-sohbet-giris {
    font-size: 1.35cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

.sc-sohbet-gonder {
    display: grid;
    place-items: center;
    width: 2.2cqw;
    height: 2.2cqw;
    border-radius: 50%;
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

.sc-sohbet-gonder svg {
    width: 58%;
    height: 58%;
}

@media (max-width: 1023px) {
    /* Tuvalin KENDİ boşluğu, kap kendisi olduğu için dışarıdaki daha dar
       kaba göre çözülürdü; 620 px'in karşılığı elle yazılı. */
    .sc-widget .sc-tuval {
        column-gap: 13.6px;
    }
}


/* ==========================================================================
   SAHNE 8 — gerektiğinde konuşmayı ekibiniz devralır
   --------------------------------------------------------------------------
   Üstte devir şeridi, altında soldan sağa üç kart: görüşme · talep · temsilci.

   NE ANLATTIĞI ÖNEMLİ
   Devir, canlı sohbet devralma DEĞİL: bot konuşmayı özetleyip ekibin gelen
   kutusuna kayıt açıyor (bkz. int_cap_handover_note). "Paylaşılan bağlam"
   satırları da uydurma değil; hepsi bot_requests kaydının gerçek alanları:
   konuşma, request_type, kanal, visitor_* iletişim alanları, created_at.

   KİŞİSEL VERİ YOK
   Müşteri kartındaki değerler .sc-cubuk. Gerçek biçimli bir e-posta ya da
   telefon, bir pazarlama görselinde birinin verisi gibi okunur.

   Ortak .sahne-genis / .sc-tuval / .sc-genis-dugme kuralları sahne-06.css'te.
   ========================================================================== */
.sc-devir .sc-tuval {
    grid-template-rows: auto minmax(0, 1fr);
    row-gap: 1.7cqw;
}

/* İnce üst şerit: kimden kime. */
.sc-devir-serit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8cqw;
    margin: 0;
    padding: .7cqw 1.2cqw;
    border: 1px solid var(--sc-cizgi);
    border-radius: 999px;
    font-size: 1.9cqw;
    line-height: 1.3;
    color: var(--sc-metin);
    background: var(--sc-dolgu);
}

.sc-devir-marka {
    font-weight: 700;
    color: var(--sc-mor);
}

.sc-devir-ok {
    display: inline-grid;
    place-items: center;
    width: 1.8cqw;
    height: 1.8cqw;
    color: var(--sc-mor);
}

.sc-devir-ok svg {
    width: 100%;
    height: 100%;
}

.sc-devir-ic {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr);
    /* Üç sütun da izin verilen yüksekliği doldurur; içerideki boşluk
       kartların İÇİNE dağılır. `start` bıraksaydık üçü de kısa kalıp
       sahnenin altında büyük bir boşluk bırakırdı. */
    align-items: stretch;
    gap: 1.5cqw;
    min-height: 0;
}

.sc-devir .sc-kart {
    padding: 1.5cqw;
    border-radius: 1cqw;
}

.sc-devir .sc-kart-baslik {
    font-size: 2.25cqw;
}

/* Ortak ikincil yazı. sahne.css'in .sc-kart-alt'ı --sc-soluk kullanıyor;
   açık temada beyaz üstünde 3,8:1 kalıyor, bu üç sahnede eşiği tutan
   --sc-metin var. */
.sc-devir-alt {
    display: block;
    margin: .2cqw 0 0;
    font-size: 1.85cqw;
    line-height: 1.35;
    color: var(--sc-metin);
}

/* ------------------------------------------------- 1. Müşteri görüşmesi -- */
/* Fazla yükseklik satır aralarına DAĞILIR. Tek bir yere toplansaydı
   kartın dibinde ölü bir bant kalırdı; balon araları açılınca sahne
   gerçek bir konuşma paneline benziyor. */
.sc-gorusme {
    display: grid;
    align-content: space-between;
    gap: .75cqw;
}

.sc-d-balon {
    display: block;
    max-width: 94%;
    padding: .95cqw 1.15cqw;
    border-radius: 1cqw;
    font-size: 2cqw;
    line-height: 1.35;
}

.sc-d-gelen {
    justify-self: start;
    border: 1px solid var(--sc-kart-kenar);
    border-bottom-left-radius: .3cqw;
    color: var(--sc-metin);
    background: var(--sc-kart);
}

.sc-d-giden {
    justify-self: end;
    border: 1px solid var(--sc-cizgi);
    border-bottom-right-radius: .3cqw;
    color: var(--sc-baslik);
    background: var(--sc-dolgu);
}

.sc-hazirlik {
    display: flex;
    align-items: center;
    gap: .6cqw;
    margin: .3cqw 0 0;
    font-size: 1.8cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

/* "Yazıyor" noktaları: animasyon yok, üç nokta yeterli. */
.sc-yaziyor {
    display: inline-flex;
    gap: .3cqw;
}

.sc-yaziyor i {
    width: .55cqw;
    height: .55cqw;
    border-radius: 50%;
    background: var(--sc-mor);
}

/* ------------------------------------------------------- 2. Yeni talep --- */
/* Vurgulu kart. Yüksekliği İÇERİĞİ kadar: `height: 100%` verildiğinde
   sahnenin altına kadar uzayıp içinde büyük bir boşluk bırakıyordu. */
/* Rozet+başlık ve bağlam başlığı+listesi kendi bloklarında: aksi hâlde
   dağıtım onları da birbirinden ayırırdı. */
.sc-talep {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .8cqw;
    border-color: var(--sc-mor);
}

.sc-talep-ust {
    display: grid;
    justify-items: start;
    gap: .6cqw;
}

.sc-baglam-blok {
    display: grid;
    gap: .7cqw;
}

.sc-rozet {
    align-self: start;
    padding: .4cqw .95cqw;
    border-radius: 999px;
    font-size: 1.58cqw;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

.sc-talep-baslik {
    margin: 0;
    font-size: 2.3cqw;
    font-weight: 700;
    line-height: 1.25;
    color: var(--sc-baslik);
}

.sc-talep-aciklama {
    margin: 0;
    font-size: 1.88cqw;
    line-height: 1.4;
    color: var(--sc-metin);
}

.sc-kanal-rozet {
    display: inline-flex;
    align-self: start;
    align-items: center;
    gap: .6cqw;
    padding: .45cqw 1cqw .45cqw .45cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    font-size: 1.78cqw;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sc-metin);
    background: var(--sc-kart);
}

/* Kanal ikonu sahne 01'in marka paletinden geliyor; burada yalnızca ölçüsü
   bu sahnenin ölçeğine çekiliyor. */
.sc-devir .sc-kanal-ikon {
    width: 2.8cqw;
    height: 2.8cqw;
    border-radius: .6cqw;
}

.sc-baglam-baslik {
    margin: 0;
    font-size: 1.58cqw;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sc-metin);
}

.sc-baglam {
    display: grid;
    gap: .7cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-baglam li {
    display: grid;
    grid-template-columns: 2.3cqw minmax(0, 1fr);
    align-items: center;
    gap: .8cqw;
    font-size: 1.88cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

.sc-devir .sc-tik {
    width: 2.3cqw;
    height: 2.3cqw;
    font-size: 1.5cqw;
}

.sc-talep .sc-genis-dugme {
    font-size: 1.8cqw;
}

/* -------------------------------------------------- 3. Temsilci sütunu --- */
.sc-devir-sag {
    display: grid;
    align-content: space-between;
    gap: 1.25cqw;
    min-width: 0;
}

.sc-temsilci {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: .8cqw;
}

/* DÜZ SİLUET. Gerçek görünümlü bir portre, olmayan bir çalışanı ürünün
   içine yerleştirirdi. */
.sc-avatar {
    display: grid;
    place-items: center;
    width: 4.4cqw;
    height: 4.4cqw;
    border-radius: 50%;
    overflow: hidden;
    color: var(--sc-soluk);
    background: var(--sc-yer-tutucu);
}

.sc-avatar svg {
    width: 78%;
    height: 78%;
}

.sc-temsilci-yazi {
    display: block;
    min-width: 0;
}

.sc-eylemler {
    display: flex;
    grid-column: 1 / -1;
    gap: .6cqw;
}

.sc-eylem {
    display: grid;
    place-items: center;
    width: 2.8cqw;
    height: 2.8cqw;
    border: 1px solid var(--sc-cizgi);
    border-radius: .6cqw;
    color: var(--sc-mor);
    background: var(--sc-dolgu);
}

.sc-eylem svg {
    width: 58%;
    height: 58%;
}

.sc-temsilci,
.sc-musteri,
.sc-notlar {
    align-content: center;
}

.sc-musteri,
.sc-notlar {
    display: grid;
    gap: .7cqw;
}

.sc-alanlar {
    display: grid;
    gap: .65cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Etiket sütunu en uzun çeviriye göre ölçülü ("Téléphone"), yoksa Fransızca
   ve İspanyolcada etiketler iki satıra düşüp satırları kaydırıyordu. */
.sc-alanlar li {
    display: grid;
    grid-template-columns: 9.6cqw minmax(0, 1fr);
    align-items: center;
    gap: .75cqw;
    font-size: 1.75cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

.sc-devir .sc-cubuk {
    height: 1.1cqw;
}

/* Ardışık çubukların margin'i ızgara boşluğuyla çakışmasın. */
.sc-devir .sc-cubuk + .sc-cubuk {
    margin-top: 0;
}

.sc-notlar .sc-mini-dugme {
    justify-self: start;
    margin-top: .2cqw;
}

@media (max-width: 1023px) {
    /* Tuvalin KENDİ boşluğu, kap kendisi olduğu için dışarıdaki daha dar
       kaba göre çözülürdü; 620 px'in karşılığı elle yazılı. */
    .sc-devir .sc-tuval {
        row-gap: 10.5px;
    }
}


/* ==========================================================================
   ÖRNEK İÇERİK — akış sahnelerinin doldurulmuş hâli
   Sahnelerdeki yer tutucu çubukların yerini örnek konuşmalar, adlar ve
   sayılar aldı. Her sahne kendi üstünde "Örnek ekran" rozeti taşıyor;
   buradaki hiçbir rakam ürün iddiası değil.
   ========================================================================== */

/* ==========================================================================
   SAHNE 1 — "Bağla" panelinin YENİ kuralları
   sahne.css'in "SAHNE 1 — kanalları bağla" bloğunun SONUNA, o bloğun dar
   ekran `@media` kuralından ÖNCE eklenecek. Var olan hiçbir kural burada
   tekrar edilmiyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   "ÖRNEK EKRAN" ROZETİ — sahne 1, 2 ve 3 için TEK kural
   Sahnedeki isimler, mesajlar ve saatler örnek veridir; bunu yazıyla söyleyen
   şey bu rozet. Bu yüzden panelin metninde değil, ALANIN İÇİNDE, uydurma
   verinin yanı başında duruyor.

   NEDEN `.sahne-etiket` DEĞİL — ölçüldü
   Rozet önce "SYNAPTIX AI" ile dil rozetinin arasına konmuştu. O satır
   1440 px'de 322 px; üç çocuğun max-content toplamı Türkçede 301 px,
   Almancada 331 px, İspanyolcada 366 px. Yani Türkçe dışındaki DÖRT dilde
   "SYNAPTIX AI" iki satıra kırılıyordu — beş dilde de aynı kalması gereken
   bir kadraj için kabul edilemez.

   Konum: alanın sol üstü. Sahne 1'de "Çevrimiçi", sahne 2'de "Bilgi
   kaynakları" rozeti alanın üst ORTASINDA duruyor; sol üst köşe her üç
   sahnede de, geniş ve dar ekranda da boş.

   Renk çifti `.sc-cevrimici` ailesinden, yazı rengi ondan farklı: `--sc-mor`
   `--sc-kart` üstünde 6,12:1 (açık) ve 5,40:1 (koyu) — ölçüldü.

   Üç ayrı sınıf adı BİLEREK: sahne 4 ve 5 üzerinde paralel çalışılıyor,
   ortak bir ad iki tanımın çakışması demek olurdu.
   -------------------------------------------------------------------------- */
.sc1-ornek,
.sc2-ornek,
.sc3-ornek {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .5cqw;
    padding: .5cqw 1cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    font-size: .86cqw;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--sc-mor);
    background: var(--sc-kart);
    box-shadow: var(--sc-kart-golge);
}

.sc1-ornek svg,
.sc2-ornek svg,
.sc3-ornek svg {
    width: 1cqw;
    height: 1cqw;
    flex: none;
}

/* --------------------------------------------------------------------------
   KANAL KARTININ SON MESAJ ÖNİZLEMESİ
   Kart artık üç değil dört çocuk taşıyor: ikon · yazı · onay, altında da
   tam genişlikte önizleme kutusu. Kutu SATIR 2'ye düşüyor (`1 / -1`), yani
   metin genişliği ikon ve onay sütunlarıyla daralmıyor — dar sütunda
   mesajın yarısı üç noktaya dönerdi.

   Zemin `--sc-dolgu`; bu yüzden ikincil yazı `--sc-soluk` DEĞİL `--sc-metin`.
   Ölçüldü: `--sc-soluk` bu zeminde 4,40:1 (açık) ve 3,96:1 (koyu) ile AA'nın
   altında kalıyor, `--sc-metin` ise 8,53:1 ve 6,90:1 veriyor.
   -------------------------------------------------------------------------- */
.sc-kanal.is-onizlemeli {
    row-gap: .75cqw;
}

.sc-kanal-onizleme {
    grid-column: 1 / -1;
    display: block;
    min-width: 0;
    padding: .5cqw .65cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: .6cqw;
    background: var(--sc-dolgu);
}

.sc-kanal-onizleme-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .6cqw;
}

.sc-kanal-onizleme-ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .8cqw;
    font-weight: 700;
    line-height: 1.3;
    color: var(--sc-baslik);
}

/* Saat kısalmaz: beş dilde de en kısa parça o, ada yer açan odur. */
.sc-kanal-onizleme-saat {
    flex: none;
    font-size: .74cqw;
    font-weight: 600;
    line-height: 1.3;
    font-variant-numeric: tabular-nums;
    color: var(--sc-metin);
}

.sc-kanal-onizleme-mesaj {
    display: block;
    margin-top: .24cqw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .78cqw;
    line-height: 1.35;
    color: var(--sc-metin);
}

/* --------------------------------------------------------------------------
   ÇEKİRDEĞİN ÇEVRESİNDEKİ BİLDİRİM BALONCUKLARI
   Baloncuklar çekirdeğin KENDİ kutusunun içinde duruyor, dışına taşmıyor:
   kutunun sağı ve solundaki 2,6cqw'lık boşluk bağlantı tellerinin yeri, oraya
   sarkan bir baloncuk teli keserdi. Kutunun içinde kaldıkları için hem geniş
   hem dar ekranda aynı yerde çıkıyorlar — dar ekranda sahne, kartların
   yüksekliğine göre sıkışıyor ve kutunun ÜSTÜNDEKİ boşluk kayboluyor.

   Animasyon yok: baloncuklar çekirdeğin kutusunun içinde olduğu için
   çekirdeğin süzülmesiyle birlikte hareket ediyorlar; ayrıca kendi
   başlarına kıpırdamalarına gerek yok.
   -------------------------------------------------------------------------- */
.sc-kanal-baloncuklar {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}

.sc-kanal-baloncuk {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: .45cqw;
    padding: .36cqw .75cqw;
    border: 1px solid var(--sc-kart-kenar);
    border-radius: 999px;
    font-size: .76cqw;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--sc-metin);
    background: var(--sc-kart);
    box-shadow: var(--sc-kart-golge);
}

/* Üçü de farklı yükseklikte: yan yana gelip birbirini itmiyorlar. */
.sc-kanal-baloncuk:nth-child(1) { top: 1%;    left: 0; }
.sc-kanal-baloncuk:nth-child(2) { top: 41%;   right: 0; }
.sc-kanal-baloncuk:nth-child(3) { bottom: 1%; left: 4%; }

/* Nokta dekoratif değil, baloncuğu kanal renginden ayıran işaret. */
.sc-kanal-baloncuk-nokta {
    width: .55cqw;
    height: .55cqw;
    flex: none;
    border-radius: 50%;
    background: var(--sc-mor);
}

.sc-kanal-baloncuk-nokta.bal-yesil { background: var(--sc-yesil); }
.sc-kanal-baloncuk-nokta.bal-mavi  { background: var(--sc-mavi); }
.sc-kanal-baloncuk-nokta.bal-mor   { background: var(--sc-mor); }

/* ==========================================================================
   SAHNE 2 — "Öğret" panelinin YENİ kuralları
   sahne.css'in "SAHNE 2 — bilgiyi ekle, bot öğrensin" bloğunun SONUNA
   eklenecek. Var olan hiçbir kural burada tekrar edilmiyor.

   `.sc2-ornek` rozetinin kuralı panel-1.css'te, üç sahne için tek blok
   hâlinde duruyor; burada tekrarlanmıyor.

   NE DEĞİŞTİ
   Kartların içindeki `.sc-cubuk` yer tutucuları gerçek örnek satırlara
   dönüştü: mini tarayıcı taranan sayfaları, SSS kartı soruları ve kısa
   cevaplarını, bilgi tabanı kartı makale özetlerini gösteriyor. Bunlar
   ÖRNEK bir mağazanın içerikleri; Synaptix hakkında bir sayı, oran ya da
   iddia taşımıyorlar ve sahnenin başındaki "Örnek ekran" rozeti bunu
   yazıyla söylüyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   MİNİ TARAYICI GÖVDESİ — taranan sayfa satırları
   Eskiden üç `.sc-cubuk`tu. Zemin `.sc-mini-tarayici`nin `--sc-dolgu`su;
   bu yüzden yazı `--sc-metin` (8,53:1 açık / 6,90:1 koyu). `--sc-soluk`
   burada 4,40:1'e düşerdi.
   -------------------------------------------------------------------------- */
.sc-mini-sayfalar {
    display: grid;
    gap: .42cqw;
    margin: 0;
    padding: 0;
    list-style: none;
}

.sc-mini-sayfa {
    display: flex;
    align-items: center;
    gap: .45cqw;
    min-width: 0;
}

.sc-mini-sayfa-im {
    width: .42cqw;
    height: .42cqw;
    flex: none;
    border-radius: 50%;
    background: var(--sc-mor);
}

.sc-mini-sayfa-ad {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .76cqw;
    line-height: 1.4;
    color: var(--sc-metin);
}

/* --------------------------------------------------------------------------
   KAYNAK SATIRININ İKİNCİ SATIRI
   PDF satırında dosyanın durumu, SSS satırında kısa cevap, bilgi tabanı
   satırında makalenin özeti. Üçü de `.sc-kaynak-oge`nin `--sc-dolgu`
   zemininde duruyor — yine `--sc-metin`, `--sc-soluk` değil.

   `.sc-kaynak-oge-ad + .sc-cubuk` kuralı artık bu satırlarda karşılık
   bulmuyor; kaldırılmıyor, çünkü kural sahnenin başka yerinde de geçerli
   olabilir ve boşta durması bir şeyi bozmuyor.
   -------------------------------------------------------------------------- */
.sc-kaynak-oge-alt {
    display: block;
    margin-top: .26cqw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .76cqw;
    line-height: 1.35;
    color: var(--sc-metin);
}

/* ==========================================================================
   SAHNE 3 — "Yayınla" panelinin YENİ kuralları
   sahne.css'in "SAHNE 3 — kontrol et ve yayına al" bloğunun SONUNA
   eklenecek. Var olan hiçbir kural burada tekrar edilmiyor.

   `.sc3-ornek` rozetinin kuralı panel-1.css'te, üç sahne için tek blok
   hâlinde duruyor; burada tekrarlanmıyor.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ŞU ANKİ ADIM
   Panelin sekmesi "Yayınla" ise şeritte de o adım işaretli olmalı; aksi hâlde
   beş adım da aynı ağırlıkta duruyor ve şerit hangi noktada olunduğunu
   söylemiyor.

   İşaret RENKTEN İBARET DEĞİL: kart kenarı morlaşırken numara halkası da
   büyüyor, yani biçim de değişiyor. Halka `--sc-dolgu` ve kartın `--sc-kart`
   zemininde duruyor; yazı renkleri hiç değişmediği için ölçülmüş hiçbir
   kontrast çifti etkilenmiyor.
   -------------------------------------------------------------------------- */
.sc-adim.is-simdi {
    border-color: var(--sc-mor);
}

.sc-adim.is-simdi::before {
    box-shadow: 0 0 0 .3cqw var(--sc-dolgu);
}

/* --------------------------------------------------------------------------
   AKIŞ SATIRININ İKİNCİ SATIRI
   Eskiden `.sc-cubuk` yer tutucusuydu; artık olayın kendisini yazıyor
   (hangi kanal, kimden, ne kadar sürdü). Satırdaki tek sayı örnek bir yanıt
   süresi ve örnek bir saat — ikisi de sahnenin "Örnek ekran" rozetiyle
   işaretli kurgunun parçası, üründe geçerli bir iddia değil.

   Zemin `.sc-akis-oge`nin `--sc-dolgu`su: yazı `--sc-metin` (8,53:1 açık /
   6,90:1 koyu). `--sc-soluk` bu zeminde AA'nın altına düşerdi.

   `tabular-nums`: dil değişince "1,2 sn" ile "1.2 s" arasında satır
   genişliği oynamasın.
   -------------------------------------------------------------------------- */
.sc-akis-alt {
    display: block;
    margin-top: .26cqw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .76cqw;
    line-height: 1.35;
    font-variant-numeric: tabular-nums;
    color: var(--sc-metin);
}

/* ==========================================================================
   SAHNE 4 — ÖRNEK KONUŞMALAR
   --------------------------------------------------------------------------
   sahne.css'in "SAHNE 4" bölümünün SONUNA, dar ekran @media bloğundan ÖNCE
   eklenecek yeni kurallar. Yer tutucu çubuklar (.sc-gk-ad-cubuk,
   .sc-gk-onizleme, .sc-gk-saat, .sc-gk-arama-cubuk, .sc-gk-yazac-cubuk)
   artık kullanılmıyor; yerlerini buradaki yazı sınıfları alıyor. Eski
   kuralları silmek gerekmiyor, hiçbir öğe onları taşımıyor.

   RENK: yalnızca --sc-* jetonları. Küçük yazıların hepsi --sc-metin, çünkü
   --sc-soluk koyu temada --sc-dolgu üstünde 3,96:1'e düşüyor ve 4,5:1
   eşiğini geçmiyor. --sc-metin iki temada da geçiyor:
   açık 10,1:1 (kart) / 8,5:1 (dolgu) · koyu 7,9:1 (kart) / 6,9:1 (dolgu).
   ÖLÇÜ: cqw. Tek istisna 1px kenarlar ve 999px hap yarıçapı.
   ========================================================================== */

/* Kanal şeridi genişledi: altındaki satır artık "Yeni mesaj" değil, gerçek
   bir alıntı. 12,6cqw'de her alıntı üç kelimede kesiliyordu. */
.sc-gelen.sc4-gelen {
    grid-template-columns: 15cqw minmax(0, 1fr);
}

/* Alıntı tek satır kalır ve taşarsa üç noktayla biter — gerçek bir gelen
   kutusu önizlemesi gibi. Beş dilin uzunluğu aynı değil; kesme burada
   kazadan değil tasarımdan. */
.sc-gelen .sc4-alinti {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* --- Örnek rozeti ---------------------------------------------------------
   Pencerenin kendi başlık satırında duruyor: ekrandaki ad, mesaj ve
   saatlerin gerçek müşteri verisi olmadığını sahneden ayrılmadan söyler.
   Metin --sc-metin / zemin --sc-dolgu = açık 8,5:1 · koyu 6,9:1.
   İkon --sc-mor / --sc-dolgu = açık 5,2:1 · koyu 4,7:1 (ikon eşiği 3:1).
   -------------------------------------------------------------------------- */
.sc-gelen .sc4-baslik-grup {
    display: flex;
    align-items: center;
    gap: .7cqw;
    min-width: 0;
}

.sc-gelen .sc4-ornek {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .4cqw;
    padding: .3cqw .75cqw;
    border: 1px solid var(--sc-cizgi);
    border-radius: 999px;
    font-size: .78cqw;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--sc-metin);
    background: var(--sc-dolgu);
}

.sc-gelen .sc4-ornek svg {
    flex: none;
    width: .95cqw;
    height: .95cqw;
    color: var(--sc-mor);
}

/* --- Arama ve yazaç: çubuk yerine gerçek yer tutucu yazı ------------------ */
.sc-gelen .sc4-arama-yazi,
.sc-gelen .sc4-yazac-yazi {
    display: block;
    overflow: hidden;
    font-size: .82cqw;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sc-metin);
}

/* --- Konuşma satırları ----------------------------------------------------
   Üçüncü sütun 2,2cqw'den 3,4cqw'ye çıktı: saat yazısı ile okunmamış
   rozeti alt alta oraya giriyor.
   -------------------------------------------------------------------------- */
.sc-gelen .sc-gk-satir.sc4-satir {
    grid-template-columns: 2.4cqw minmax(0, 1fr) 3.4cqw;
}

.sc-gelen .sc4-ad {
    display: block;
    overflow: hidden;
    font-size: .84cqw;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sc-baslik);
}

.sc-gelen .sc4-onizleme {
    display: block;
    overflow: hidden;
    margin-top: .18cqw;
    font-size: .78cqw;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sc-metin);
}

.sc-gelen .sc4-sag {
    display: grid;
    justify-items: end;
    align-content: center;
    gap: .3cqw;
}

.sc-gelen .sc4-saat {
    font-size: .72cqw;
    line-height: 1.25;
    white-space: nowrap;
    color: var(--sc-metin);
}

/* Okunmamış rozeti. Mor zemin üstündeki yazı --sc-mor-yazi: açıkta beyaz
   (6,1:1), koyuda lacivert (5,4:1). Sabit beyaz koyu temada 2,9:1'e düşerdi. */
.sc-gelen .sc4-okunmamis {
    display: grid;
    place-items: center;
    min-width: 1.5cqw;
    height: 1.5cqw;
    padding: 0 .34cqw;
    border-radius: 999px;
    font-size: .7cqw;
    font-weight: 700;
    line-height: 1;
    color: var(--sc-mor-yazi);
    background: var(--sc-mor);
}

/* --- Seçili konuşmanın başlığı --------------------------------------------
   Balonlar kimin konuşması olduğunu tek başına söylemiyordu; başlık
   ziyaretçiyi diyaloğa oturtuyor.
   -------------------------------------------------------------------------- */
.sc-gelen .sc4-sohbet-ust {
    display: grid;
    grid-template-columns: 2.4cqw minmax(0, 1fr) auto;
    align-items: center;
    gap: .7cqw;
    padding-bottom: .8cqw;
    border-bottom: 1px solid var(--sc-kart-kenar);
}

.sc-gelen .sc4-sohbet-yazi {
    display: block;
    min-width: 0;
}

.sc-gelen .sc4-sohbet-ad {
    display: block;
    overflow: hidden;
    font-size: .9cqw;
    font-weight: 700;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sc-baslik);
}

.sc-gelen .sc4-sohbet-alt {
    display: block;
    margin-top: .14cqw;
    font-size: .76cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

/* Yanıtı kimin yazdığı yazıyla söyleniyor; balonun rengi tek başına
   "bot" demiyor. --sc-mor / --sc-dolgu = açık 5,2:1 · koyu 4,7:1. */
.sc-gelen .sc4-rol {
    justify-self: end;
    padding: .28cqw .7cqw;
    border-radius: 999px;
    font-size: .74cqw;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--sc-mor);
    background: var(--sc-dolgu);
}

/* --- Sohbet balonları -----------------------------------------------------
   Sabit %76 genişlik yer tutucu çubuklar içindi. Gerçek cümlede balon
   kendi metnine göre daralmalı, yoksa "Teşekkürler." tek kelimelik bir
   satır için dört parmak genişliğinde bir kutu açıyor.
   -------------------------------------------------------------------------- */
.sc-gelen .sc-gk-balon.sc4-balon {
    width: auto;
    max-width: 82%;
}

.sc-gelen .sc4-balon-yazi {
    display: block;
    font-size: .82cqw;
    line-height: 1.45;
    color: var(--sc-metin);
}

.sc-gelen .sc-gk-balon-giden .sc4-balon-yazi {
    color: var(--sc-mor-yazi);
}

/* ==========================================================================
   SAHNE 5 — ÖRNEK ANALİTİK PANOSU
   --------------------------------------------------------------------------
   sahne.css'in "SAHNE 5" bölümünün SONUNA, dar ekran @media bloğundan ÖNCE
   eklenecek yeni kurallar. Sayıların yerindeki yer tutucular
   (.sc-metrik-sayi, .sc-metrik-trend-cubuk, .sc-grafik-eksen i,
   .sc-soru .sc-cubuk, .sc-lejant .sc-cubuk, .sc-oran-1..4) artık
   kullanılmıyor; hiçbir öğe onları taşımadığı için eski kuralları silmek
   gerekmiyor.

   PANODAKİ HER RAKAM ÖRNEKTİR ve sahne bunu kendi üstünde söylüyor:
   .sc5-ornek rozeti + sol paneldeki sc5_not_ornek notu. Rakamlar bir
   müşterinin KENDİ panosunda görebileceği büyüklükte; hiçbiri ürün iddiası
   değil (memnuniyet oranı, müşteri sayısı, başarı yüzdesi YOK).

   RENK: yalnızca --sc-* jetonları. Küçük yazılar --sc-metin, sayılar
   --sc-baslik. --sc-soluk kullanılmadı: koyu temada --sc-dolgu üstünde
   3,96:1'e düşüyor ve 4,5:1 eşiğini geçmiyor.
   ÖLÇÜ: cqw. Tek istisna 1px kenarlar ve 999px hap yarıçapı.
   ========================================================================== */

/* --- Örnek rozeti — ZORUNLU -----------------------------------------------
   Bu rozet olmadan pano gerçek müşteri verisi gibi okunur.
   Metin --sc-metin / zemin --sc-dolgu = açık 8,5:1 · koyu 6,9:1.
   İkon --sc-mor / --sc-dolgu = açık 5,2:1 · koyu 4,7:1 (ikon eşiği 3:1).
   -------------------------------------------------------------------------- */
.sc-pano .sc5-baslik-grup {
    display: flex;
    align-items: center;
    gap: .7cqw;
    min-width: 0;
}

.sc-pano .sc5-ornek {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: .4cqw;
    padding: .3cqw .75cqw;
    border: 1px solid var(--sc-cizgi);
    border-radius: 999px;
    font-size: .78cqw;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    color: var(--sc-metin);
    background: var(--sc-dolgu);
}

.sc-pano .sc5-ornek svg {
    flex: none;
    width: .95cqw;
    height: .95cqw;
    color: var(--sc-mor);
}

/* --- Ölçüm kartlarının sayıları ------------------------------------------- */
.sc-pano .sc5-sayi {
    display: block;
    font-size: 1.7cqw;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
    color: var(--sc-baslik);
}

/* Yön oku zaten yeşil/nötr; trend yazısı --sc-metin kalıyor. Yeşil yazı
   beyaz kartta 2,3:1 verirdi — okun kendisi ikon olduğu için 3:1 ile
   yetiniyor, yazı 4,5:1'in altına inemez. */
.sc-pano .sc5-trend-yazi {
    font-size: .78cqw;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--sc-metin);
}

/* --- Grafik: özet satırı ve gün adları ------------------------------------ */
.sc-pano .sc5-grafik-ozet {
    display: block;
    font-size: .82cqw;
    line-height: 1.3;
    color: var(--sc-metin);
}

/* Eksende artık yer tutucu değil gün adı var; hücreler eşit olduğu için
   ortalanıyorlar. */
.sc-pano .sc5-gun {
    display: block;
    font-size: .72cqw;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    color: var(--sc-metin);
}

/* --- En çok sorulanlar ----------------------------------------------------
   Üçüncü sütun soruyu kaç kişinin sorduğu. Soru metni tek satır kalır ve
   taşarsa üç noktayla biter.
   -------------------------------------------------------------------------- */
.sc-pano .sc-soru.sc5-soru {
    grid-template-columns: .7cqw minmax(0, 1fr) auto;
}

.sc-pano .sc5-soru-yazi {
    overflow: hidden;
    font-size: .8cqw;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sc-metin);
}

.sc-pano .sc5-soru-sayi {
    font-size: .8cqw;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--sc-baslik);
}

/* --- Talep türleri lejantı ------------------------------------------------
   Paylar halkanın dilimleriyle birebir aynı: 30 · 24 · 20 · 14 · 12.
   Dilimler zaten bu değerlere göre çizilmişti (stroke-dasharray 29/23/19/
   13/11 + 1 birimlik ayırıcı boşluklar), lejantta yazılı değildi.
   -------------------------------------------------------------------------- */
.sc-pano .sc-lejant.sc5-lejant {
    grid-template-columns: .62cqw minmax(0, 1fr) auto;
}

.sc-pano .sc5-lejant-ad {
    overflow: hidden;
    font-size: .78cqw;
    line-height: 1.3;
    white-space: nowrap;
    text-overflow: ellipsis;
    color: var(--sc-metin);
}

.sc-pano .sc5-lejant-pay {
    font-size: .78cqw;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--sc-baslik);
}

/* --- Kanal dağılımı -------------------------------------------------------
   Dördüncü sütun payın kendisi. Çubuk genişlikleri paylarla orantılı
   (pay x 1,81), yani en uzun çubuk %42'lik WhatsApp. Paylar toplamı 100.
   -------------------------------------------------------------------------- */
.sc-pano .sc-kanal-satir.sc5-kanal-satir {
    grid-template-columns: 1.9cqw 7.5cqw minmax(0, 1fr) 3cqw;
}

.sc-pano .sc5-oran-1 i { width: 76%; }
.sc-pano .sc5-oran-2 i { width: 49%; }
.sc-pano .sc5-oran-3 i { width: 34%; }
.sc-pano .sc5-oran-4 i { width: 22%; }

.sc-pano .sc5-kanal-pay {
    font-size: .78cqw;
    font-weight: 700;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--sc-baslik);
}