/* ============================================================
   SOLGAR BI — panel dili (kullanıcı mockup'ı 2026-09-06)
   Kırık beyaz zemin · beyaz kartlar · Solgar altını · mürekkep kanat.
   Tipografi ölçeği app.css'in --fs-* değerleridir (13px gövde, 22px
   sayfa başlığı, 28px KPI değeri) — kullanıcı: "fontlar standartlarımıza
   göre olmalı". Bu dosya app.css + erp.css'ten SONRA yüklenir ve marka
   tokenlarını Solgar'a çevirir (erp.css'in .fcb-* şeridi bu tokenlarla
   otomatik altına döner).
   ============================================================ */

:root, [data-theme="light"] {
    --bg-0: #F2EEE6;
    --erp-bg: #F2EEE6;
    --erp-surface: #FFFFFF;
    --erp-border: #E6DFD1;
    --erp-border-strong: #D9D0BE;
    --erp-vurgu: #C9A84C;
    --erp-kalin-cizgi: #1E1B16;
    --text-primary: #1E1B16;
    --text-dim: #6B665C;

    --gold: #C9A84C;
    --gold-soft: rgba(201, 168, 76, 0.14);
    --gold-deep: #8A6A2E;
    --gold-text: #6E5320;
    --gold-light: #E4C87A;

    --zeytin: #7A8B3A;
    --celik: #5A6E8C;
    --lacivert: #2C3E5A;
    --success: #3A8A3A; --success-text: #2F7A2F;
    --danger: #B8433E;  --danger-text: #A23B36;

    /* Donut dilimleri (Donut.razor --gseri-*) — altın · zeytin · çelik · lacivert · kum · bronz */
    --gseri-1: #C9A84C; --gseri-2: #7A8B3A; --gseri-3: #5A6E8C;
    --gseri-4: #2C3E5A; --gseri-5: #D8CDB3; --gseri-6: #8A6A2E;

    --murekkep: #15130F;
    --murekkep-cam: rgba(21, 19, 15, 0.86);
    --murekkep-metin: #D9D3C4;
    --murekkep-soluk: #8C867A;

    --kanat-ray: 56px; --kanat-ust: 300px; --kanat-alt: 210px;
}
[data-theme="dark"] {
    --bg-0: #171512; --erp-bg: #171512; --erp-surface: #1F1C18;
    --erp-border: #2E2A24; --erp-border-strong: #3A352D;
    --erp-kalin-cizgi: #F1E7CF; --text-primary: #F1E7CF; --text-dim: #A39C8E;
    --gold: #D9B95E; --gold-text: #E4C87A; --gold-soft: rgba(217, 185, 94, 0.16);
    --gseri-5: #5A523F;
    --success: #5FB35F; --success-text: #7CC77C; --danger: #D9605A; --danger-text: #E07B76;
}

html, body, #app { height: 100%; overflow: hidden; }
body { background: var(--bg-0); color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-md); }

/* ---------------- KABUK ---------------- */
.sf-shell { position: relative; height: 100vh; height: 100dvh; background: var(--erp-bg); color: var(--text-primary); overflow: hidden; }
.sf-main { position: absolute; inset: 0 0 0 var(--kanat-ray); overflow-y: auto; overflow-x: hidden; padding: 16px 22px 26px 24px; scrollbar-gutter: stable; }
.sf-main::-webkit-scrollbar { width: 8px; }
.sf-main::-webkit-scrollbar-thumb { background: var(--erp-border-strong); border-radius: 4px; }

/* ---------------- KANAT MENÜ — "Altın Kılıç" (kullanıcı seçimi 2026-09-06) ----------------
   Dış sarmal (.kanat) KESİLMEZ: 56px ray ↔ 300px açık. Gövde (.kanat-govde) mürekkep
   rengi, eğik kesimli (üst 300 / alt 210), yarı saydam — BULANIKLIK YOK (backdrop-filter
   eğik kesimin dışına sızıp sağdaki içeriği bozuyordu). Kenar (.kanat-kenar) 2px altın
   çizgi + panelin İÇİNE bakan ışıma; çizginin sağına yalnız 12px çarpan ton — içerik
   keskin kalır. Açılışta ışık boncuğu aşağı, kapanışta yukarı akar. Fare için :hover,
   dokunmatik için .acik. */
.kanat { position: fixed; inset: 0 auto 0 0; z-index: 60; width: var(--kanat-ray); overflow: visible;
    transition: width .38s cubic-bezier(.2,.8,.2,1); }
.kanat:hover, .kanat.acik { width: var(--kanat-ust); }
.kanat-govde { position: absolute; inset: 0; background: var(--murekkep); color: var(--murekkep-metin); overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
    transition: clip-path .38s cubic-bezier(.2,.8,.2,1), background .38s; }
.kanat:hover .kanat-govde, .kanat.acik .kanat-govde { clip-path: polygon(0 0, 100% 0, var(--kanat-alt) 100%, 0 100%); background: rgba(21,19,15,.90); }
/* İç ışıma: gövdenin kendi kesimi eğik kenarı izler → hale hep kenara yaslı, dışa taşmaz */
.kanat-govde::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s;
    background: linear-gradient(90deg, transparent 62%, rgba(201,168,76,.08) 82%, rgba(228,200,122,.38) 94%, rgba(255,243,207,.85) 100%); }
.kanat:hover .kanat-govde::after, .kanat.acik .kanat-govde::after { opacity: 1; }
.kanat-ic { position: relative; z-index: 1; width: var(--kanat-ust); display: flex; flex-direction: column; height: 100%; padding: 12px 0 14px; }
.kanat .ad { opacity: 0; transform: translateX(-6px); transition: opacity .22s .06s, transform .22s .06s; white-space: nowrap; }
.kanat:hover .ad, .kanat.acik .ad { opacity: 1; transform: none; }

/* Kenar katmanı: üst-sağa çapalı, açılınca kesimle aynı açıya döner (atan2(90px, yükseklik)) */
.kanat-kenar { position: absolute; top: 0; right: -1px; width: 2px; height: hypot(100vh, 90px); height: hypot(100dvh, 90px);
    transform-origin: top right; transform: rotate(0deg); opacity: 0; pointer-events: none;
    background: linear-gradient(180deg, #FFF3CF, var(--gold-light) 18%, var(--gold) 58%, var(--gold-deep));
    box-shadow: 0 0 3px 0 rgba(255,243,207,.95);
    transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .95s ease; }
.kanat:hover .kanat-kenar, .kanat.acik .kanat-kenar { transform: rotate(atan2(90px, 100vh)); transform: rotate(atan2(90px, 100dvh)); opacity: 1;
    transition: transform .38s cubic-bezier(.2,.8,.2,1), opacity .25s ease; animation: kilic-nefes 3.2s ease-in-out 1.1s infinite; }
.kanat-kenar::after { content: ""; position: absolute; top: 0; bottom: 0; left: 100%; width: 12px; pointer-events: none; mix-blend-mode: multiply;
    background: linear-gradient(90deg, rgba(201,168,76,.55), rgba(201,168,76,.18) 45%, transparent); }
.kanat-isik { position: absolute; left: -13px; width: 16px; height: 130px; border-radius: 50%; opacity: 0;
    background: radial-gradient(ellipse at center, #fff 0%, #FFF3CF 22%, rgba(228,200,122,.65) 52%, transparent 74%); }
.kanat:hover .kanat-isik, .kanat.acik .kanat-isik { animation: kilic-in 1.05s cubic-bezier(.2,.7,.2,1) 1 forwards; }
.kanat:not(:hover):not(.acik) .kanat-isik { animation: kilic-out .85s ease-in 1 forwards; }
@keyframes kilic-in  { 0% { top: -130px; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { top: 100%; opacity: 0 } }
@keyframes kilic-out { 0% { top: 100%; opacity: 0 } 8% { opacity: 1 } 92% { opacity: 1 } 100% { top: -130px; opacity: 0 } }
@keyframes kilic-nefes { 0%, 100% { filter: brightness(1) } 50% { filter: brightness(1.35) } }

.kanat-logo { display: flex; justify-content: center; padding: 6px 0 0; }
.kanat-logo-halka { position: relative; display: grid; place-items: center; padding: 10px 12px; border-radius: 14px; isolation: isolate; }
/* Altın nabız — iki katman, YUMUŞAK: kenarı belli olmayan geniş elips, tepe parlaklığı düşük
   (kullanıcı 2026-09-06: "yuvarlaklık sırıtıyor, en parlak hâlde logoyu boğuyor"). Merkez
   koyu-altın (krem değil) → altın logo hale üzerinde okunur kalır. */
.kanat-logo-halka::after { content: ""; position: absolute; inset: -8px -12px; border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 62% 58% at 50% 50%, rgba(201,168,76,.40), rgba(201,168,76,.20) 40%, rgba(201,168,76,.07) 68%, transparent 88%);
    animation: logo-nabiz 3s ease-in-out infinite; }
.kanat-logo-halka::before { content: ""; position: absolute; inset: -30px -40px; border-radius: 50%; z-index: -1; pointer-events: none;
    background: radial-gradient(ellipse 60% 55% at 50% 50%, rgba(201,168,76,.22), rgba(138,106,46,.10) 48%, rgba(138,106,46,.03) 74%, transparent 92%);
    animation: logo-nabiz 3s ease-in-out .5s infinite; }
@keyframes logo-nabiz { 0%, 100% { opacity: .5; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.04); } }
.kanat-logo-img { display: block; height: 22px; width: auto; position: relative; z-index: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,.65));
    transition: height .38s cubic-bezier(.2,.8,.2,1); }
.kanat:hover .kanat-logo-img, .kanat.acik .kanat-logo-img { height: 62px; }
.kanat-selam { text-align: center; padding: 6px 0 0; font-size: var(--fs-xs); color: var(--murekkep-soluk); }
.kanat-selam b { color: var(--gold-light); font-weight: 600; }

.kanat-menu { margin-top: 14px; padding-left: 8px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.kanat-oge { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px 0 0; border-radius: 0 19px 19px 0;
    color: var(--murekkep-metin); text-decoration: none; font-weight: 500; font-size: var(--fs-md); white-space: nowrap;
    transition: background .2s, color .2s; }
.kanat-oge:hover, .kanat-oge:focus-visible { background: rgba(228,200,122,.10); color: #fff; outline: none; }
.kanat-oge.active { background: var(--gold); color: var(--murekkep); font-weight: 600; }
.kanat-ikon { width: 40px; height: 38px; flex: none; display: grid; place-items: center; }
.kanat-bolum { margin: 12px 0 2px 16px; font-size: var(--fs-2xs); letter-spacing: .2em; color: var(--murekkep-soluk); font-weight: 700; }

/* ALT BLOK — eğik kenarın dar ucu: açıkken kenar bu yükseklikte ≈228→210px; blok 14px içeriden
   başlar, 186px genişliğinde kalır. Slogan sağa hizalı, satırlar kenara PARALEL kademeli
   (aşağı indikçe daha içeride). Kimlik + çıkış Inter Tight, mono yok. */
.kanat-alt { margin-top: auto; padding: 0 0 0 14px; width: 200px; display: flex; flex-direction: column; gap: 12px; }
.kanat-slogan { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; padding-right: 8px;
    font-family: var(--font-display); font-weight: 600; font-size: var(--fs-sm); letter-spacing: .01em; line-height: 1.3; }
.kanat-slogan span, .kanat-slogan i { font-style: normal; color: var(--murekkep-metin); white-space: nowrap; }
.kanat-slogan span:nth-child(2) { padding-right: 7px; color: #C9C2B0; }
.kanat-slogan i { padding-right: 14px; color: var(--gold-light); font-weight: 700; }
.kanat-slogan::after { content: ""; width: 140px; height: 1px; margin: 8px 20px 0 0;
    background: linear-gradient(90deg, transparent, rgba(228,200,122,.55) 40%, rgba(228,200,122,.75)); }
.kanat-kimlik { display: flex; align-items: center; gap: 10px; }
.kanat-avatar { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
    background: linear-gradient(145deg, var(--gold-light), var(--gold) 55%, var(--gold-deep)); color: var(--murekkep);
    font-family: var(--font-display); font-weight: 800; font-size: 12px; letter-spacing: .02em;
    box-shadow: 0 0 0 1px rgba(228,200,122,.35), 0 0 14px -4px rgba(201,168,76,.7); }
.kanat-kimlik-meta { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.kanat-kimlik-meta b { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 700; color: #F1E7CF; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kanat-kimlik-meta i { font-style: normal; font-family: var(--font-body); font-size: var(--fs-2xs); color: var(--murekkep-soluk); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.kanat-cikis { appearance: none; cursor: pointer; align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px 0 10px; border-radius: 14px;
    border: 1px solid rgba(228,200,122,.35); background: rgba(228,200,122,.06); color: var(--murekkep-metin);
    font-family: var(--font-display); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em;
    transition: color .2s, border-color .2s, background .2s, box-shadow .2s; }
.kanat-cikis:hover { color: var(--murekkep); background: var(--gold); border-color: var(--gold); box-shadow: 0 0 14px -4px var(--gold); }
.kanat-cikis .ad { transition-delay: 0s; }
.kanat-ipucu { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 64px; border-radius: 2px 0 0 2px;
    background: linear-gradient(180deg, transparent, var(--gold), transparent); opacity: .8; transition: opacity .2s; }
.kanat:hover .kanat-ipucu, .kanat.acik .kanat-ipucu { opacity: 0; }

/* ---------------- SAYFA BAŞLIĞI ---------------- */
/* Başlık dili SolgarWU ile aynı (.admin-title): Inter 700, küçük harf, son kelime altın degrade;
   WU 22px → burada 19px (kullanıcı 2026-09-06: "biraz küçültelim"). Alt satır 13px soluk. */
.sf-baslik { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.sf-baslik-grup { display: flex; align-items: baseline; gap: 12px; }
.sf-baslik h1 { margin: 0; font-family: 'Inter', var(--font-body); font-weight: 700; font-size: 19px; letter-spacing: -.01em; text-transform: none; line-height: 1.15; }
.sf-baslik h1 .accent { background: linear-gradient(135deg, var(--gold-light), var(--gold), var(--gold-deep));
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
[data-theme="dark"] .sf-baslik h1 .accent { background: linear-gradient(135deg, #FFF3CF, var(--gold-light), var(--gold)); -webkit-background-clip: text; background-clip: text; }
.sf-alt { margin: 3px 0 0; color: var(--text-dim); font-size: var(--fs-md); }

.sf-meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 2px 0 10px; font-size: var(--fs-xs); color: var(--text-dim); }
.sf-eksik { color: var(--gold-text); }
.sf-uyari { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border: 1px solid var(--erp-border); background: var(--erp-surface); border-radius: 10px; font-size: var(--fs-md); color: var(--text-dim); }
.sf-hata { color: var(--danger-text); border-color: var(--danger); }
.rapor-yetkisiz { padding: 30px; text-align: center; color: var(--text-dim); }

/* ---------------- KPI ---------------- */
/* KPI KARTLARI SABİT GENİŞLİKTE VE SOLA YANAŞIK (CEO 2026-09-14: "kartları küçültelim, sağ
   taraflarındaki boşluğa gerek yok; kutular sayı değerlerini çevreleyecek kadar olsun, eşit ve sola
   yanaşık, sağ boş kalabilir"). Eskiden 6 eşit kolona YAYILIYORDU: 4 kartlı sayfada her kart 305px
   oluyor, içerik 200px'te bitip geri kalanı boşluk kalıyordu ("4 yayvan kutu"). Ölçüldü: kartların
   gerçek içerik ihtiyacı 122-287px; 200px hem en geniş DEĞERİ alıyor hem 6 kartlı sayfalarda
   bugünküyle aynı (oralarda hiçbir şey değişmiyor). */
.sf-kpiler { display: grid; grid-template-columns: repeat(auto-fill, var(--kpi-en, 200px));
    justify-content: start; gap: 12px; margin-bottom: 12px; }
/* ÇERÇEVE BOŞLUĞU YOK — Finansal Tablolar (CEO 2026-09-11'de üç panel kalkınca kalan iki panel
   iki satır boyunda kaldı): gelir tablosu satırları ve alacak barları panel yüksekliğine yayılır.
   İçerik panelden uzunsa tablo kendi boyunda kalır ve normal kayar (height:100% tabloyu küçültmez). */
/* GELİR TABLOSU KOMPAKT (CEO 2026-09-13: "boşluk kalmasın diye sayfaya sığdırmışsın ama güzel
   durmuyor; normal kompakt listeleyelim, satır araları açılmasın, gerekirse aşağısı boş kalsın").
   Eskiden `height: 100%` ile panel boyuna GERİLİYORDU (ÇERÇEVE BOŞLUĞU YOK kuralı) — satır araları
   açılıp tablo seyreliyordu. Artık doğal yüksekliğinde, üste yaslı; panelin altı boş kalabilir. */
.sf-p-gelir .sf-kaydir > table { height: auto; }
.sf-p-gelir .sf-kaydir { align-content: start; }
/* EN BÜYÜK ALACAKLAR DA KOMPAKT (CEO 2026-09-14: "daraltalım, geniş istenmiyor; alt taraf boş
   kalsın sorun değil") — gelir tablosuyla aynı karar. Eskiden `justify-content: space-between`
   barları panel boyuna YAYIYORDU (ÇERÇEVE BOŞLUĞU YOK kuralı); satır araları açılıp liste
   seyrekleşiyordu. Artık doğal aralıklarında, üste yaslı; panelin altı boş kalabilir. */
.sf-p-alacak .sf-kaydir { display: block; align-content: start; scrollbar-gutter: stable; }
.sf-p-alacak .sf-barlar { display: flex; flex-direction: column; }

/* Kanat menüsünde "yalnız Türkiye" rozeti (CEO 2026-09-11) — emoji değil, çizilmiş bayrak:
   Windows'ta 🇹🇷 emoji bayrak olarak değil "TR" harfleriyle çıkıyor. */
.kanat-bayrak { display: inline-flex; align-items: center; margin-left: 6px; flex: none; }
.kanat-bayrak svg { width: 15px; height: 10px; border-radius: 1.5px; box-shadow: 0 0 0 1px rgba(255,255,255,.28); }

/* ÜÇ KARTLI KPI SATIRI (pano, CEO 2026-09-11: üç kart kaldı → sayfaya ortalı, belirgin ışıklı çerçeve).
   Kartlar sayfanın ortasında durur; altın çerçeve + dışa yumuşak ışık + üstten hafif parlaklık. */
/* Pano üçlüsü: kart eni diğer sayfalarla aynı ama ORTALI kalır — CEO 2026-09-11'de bunu açıkça
   istemişti ("başka bir şey koymayalım, ortalayalım, çerçevesi belirgin ve ışıklı olsun"). */
.sf-kpiler.sf-kpi-uc { grid-template-columns: repeat(3, var(--kpi-en, 200px)); justify-content: center;
    max-width: none; margin-inline: auto; gap: 18px; margin-bottom: 16px; }
.sf-kpiler.sf-kpi-uc .sf-kpi { position: relative; border: 1px solid var(--gold);
    background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, var(--erp-surface)) 0%, var(--erp-surface) 58%);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 12%, transparent), 0 10px 28px -12px color-mix(in srgb, var(--gold) 55%, transparent); }
.sf-kpiler.sf-kpi-uc .sf-kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--gold-light) 85%, transparent), transparent); }
[data-theme="dark"] .sf-kpiler.sf-kpi-uc .sf-kpi { box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 16%, transparent), 0 10px 30px -10px color-mix(in srgb, var(--gold) 40%, transparent); }
@media (max-width: 1100px) { .sf-kpiler.sf-kpi-uc { max-width: none; } }
.sf-kpi { background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 12px; padding: 13px 14px; display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; min-width: 0;
    transition: box-shadow .2s, transform .2s; }
.sf-kpi:hover { box-shadow: 0 10px 24px -16px rgba(60,40,10,.35); transform: translateY(-1px); }
.sf-kpi-tr { border-style: dashed; }
.sf-kpi-yuvar { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: #fff; }
.sf-kpi-yuvar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.y-altin { background: var(--gold-deep); } .y-altin-koyu { background: #6E5320; } .y-zeytin { background: var(--zeytin); }
.y-celik { background: var(--celik); } .y-celik-koyu { background: #45566E; } .y-lacivert { background: var(--lacivert); }
.sf-kpi > div { display: flex; flex-direction: column; min-width: 0; }
.sf-kpi-ad { font-size: var(--fs-sm); color: var(--text-dim); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-kpi-ad small { font-size: var(--fs-2xs); letter-spacing: .04em; color: var(--gold-text); margin-left: 4px; }
.sf-kpi-deger { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-2xl); letter-spacing: -.01em; line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sf-kpi-fark { font-weight: 600; font-size: var(--fs-sm); margin-top: 3px; }
.sf-kpi-fark.art { color: var(--success-text); } .sf-kpi-fark.dus { color: var(--danger-text); } .sf-kpi-fark.notr { color: var(--text-dim); }
.sf-kpi-alt { font-size: var(--fs-xs); color: var(--text-dim); margin-top: 3px; }
.sf-kpi-gecen { font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------------- PANELLER ---------------- */
.sf-izgara { display: grid; gap: 12px; margin-bottom: 12px; }
.sf-izgara-1 { grid-template-columns: 1fr 1.9fr; }
.sf-yigin { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.sf-yigin .sf-panel { flex: 1 1 auto; }
.sf-izgara-2 { grid-template-columns: 1fr 1fr 1.35fr; }
.sf-izgara-3 { grid-template-columns: 1fr 1.2fr .9fr; }
.sf-panel { background: var(--erp-surface); border: 1px solid var(--erp-border); border-radius: 12px; padding: 14px 16px; min-width: 0; }
.sf-panel-baslik { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.sf-panel-baslik > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: 8px; }
.sf-isaret { width: 7px; height: 7px; background: var(--gold); transform: rotate(45deg); display: inline-block; flex: none; }
.sf-lejant { display: flex; gap: 12px; font-size: var(--fs-xs); color: var(--text-dim); white-space: nowrap; }
.sf-lejant .lj { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.lj-bu { background: linear-gradient(180deg, var(--cg-bu-2), var(--cg-bu-1) 45%, var(--cg-bu-3)); border: 1px solid var(--cg-bu-kenar); }
.lj-onceki { background: linear-gradient(180deg, var(--cg-on-2), var(--cg-on-1)); border: 1px solid var(--cg-on-kenar); }
.sf-bos { color: var(--text-dim); font-size: var(--fs-sm); padding: 10px 0; }

/* SVG grafik */
.sf-grafik { width: 100%; }
.sf-svg { width: 100%; height: auto; display: block; overflow: visible; }
.sf-kilavuz { stroke: var(--erp-border); stroke-width: 1; }
.sf-ay-zemin { fill: transparent; }
.sf-ay:hover .sf-ay-zemin { fill: var(--gold-soft); }
.sf-cubuk-bu { fill: var(--gold); transition: fill .2s; }
.sf-cubuk-onceki { fill: #D8CDB3; }
.sf-cubuk-kismi { fill: var(--gold); fill-opacity: .55; stroke: var(--gold); stroke-dasharray: 3 2; }
.sf-ay.soluk { opacity: .35; }
.sf-svg-deger { font-family: var(--font-body); font-size: 9.5px; font-weight: 600; fill: var(--text-primary); }
.sf-svg-eksen { font-family: var(--font-body); font-size: var(--fs-2xs); fill: var(--text-dim); }
.sf-yil-secili .sf-cubuk-bu { fill: var(--gold-deep); }

/* Tablolar */
.sf-tablo { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.sf-tablo th { text-align: left; font-weight: 600; color: var(--text-dim); font-size: var(--fs-xs); padding: 0 6px 7px 0; border-bottom: 1px solid var(--erp-border); }
.sf-tablo td { padding: 6px 6px 6px 0; border-bottom: 1px solid #F0EBE1; vertical-align: middle; }
[data-theme="dark"] .sf-tablo td { border-bottom-color: #2A2620; }
.sf-tablo tr:last-child td { border-bottom: 0; }
.sf-tablo .sag { text-align: right; padding-right: 0; }
.sf-tablo tr.tik { cursor: pointer; }
.sf-tablo tr.tik:hover td { background: var(--gold-soft); }
.sf-tablo tr.secili td { background: var(--gold-soft); font-weight: 600; }
.sf-tablo tr.toplam td { border-top: 1.5px solid var(--erp-kalin-cizgi); font-weight: 700; }
.sf-tablo-sik td, .sf-tablo-sik th { padding-top: 4px; padding-bottom: 4px; font-size: var(--fs-xs); }
/* SIRA NUMARASI HÜCRESİ — yalnız tablo hücresi. ÇAKIŞMA (kullanıcı 2026-09-11: "ilk 10 üründe
   kolonlar kaymış"): aynı .sf-sira sınıfını sıralanabilir başlıklar da kullanıyor (TabloSira.Sinif);
   genel width:18px başlık metnini 18px'e sıkıştırıp değer kolonlarıyla hizayı bozuyordu. */
td.sf-sira { color: var(--text-dim); width: 18px; }
.sf-kod { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-dim); }
.sf-urun { max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-pay { display: inline-block; height: 5px; border-radius: 3px; background: var(--gold); vertical-align: middle; margin-right: 6px; max-width: 60px; }
.art { color: var(--success-text); } .dus { color: var(--danger-text); }
.sf-bayat { color: var(--gold-text); font-size: var(--fs-xs); margin-left: 3px; cursor: help; }

/* Yatay barlar */
.sf-barlar { display: flex; flex-direction: column; gap: 7px; }
.sf-barlar-sik { gap: 5px; }
.sf-bar { display: grid; grid-template-columns: minmax(90px, 1.1fr) 2fr auto; gap: 10px; align-items: center; font-size: var(--fs-sm); padding: 2px 4px; border-radius: 6px; }
.sf-barlar-sik .sf-bar { grid-template-columns: minmax(120px, 1.4fr) 1.6fr auto auto; }
.sf-bar.tik { cursor: pointer; } .sf-bar.tik:hover, .sf-bar.secili { background: var(--gold-soft); }
.sf-bar-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-bar-ad small { color: var(--text-dim); font-size: var(--fs-2xs); margin-left: 4px; }
.sf-bar-kanal { height: 12px; background: #F0EBE1; border-radius: 3px; overflow: hidden; }
[data-theme="dark"] .sf-bar-kanal { background: #2A2620; }
.sf-bar-kanal i { display: block; height: 100%; background: var(--gold); border-radius: 3px; transition: width .4s ease; }
.sf-bar-deger { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sf-bar-yoy { font-size: var(--fs-xs); font-weight: 600; min-width: 48px; text-align: right; }

/* Harita */
.sf-panel-harita { display: flex; flex-direction: column; }
.sf-panel-harita .sf-harita-satir { display: grid; grid-template-columns: 1.7fr 1fr; gap: 14px; align-items: center; flex: 1; }
.harita-kap { position: relative; }
.harita { width: 100%; height: auto; display: block; }
.h-baglam { fill: #EDE7DA; stroke: #FFFFFF; stroke-width: .8; }
[data-theme="dark"] .h-baglam { fill: #2A2620; stroke: #171512; }
.h-ulke { stroke: #FFFFFF; stroke-width: .9; transition: fill .25s, stroke .25s; }
[data-theme="dark"] .h-ulke { stroke: #171512; }
.h-k0 { fill: #E4DDCF; } .h-k1 { fill: #EBDDB5; } .h-k2 { fill: #DEC98A; } .h-k3 { fill: #C9A84C; } .h-k4 { fill: #A8873A; } .h-k5 { fill: #7E6228; }

/* ============================================================================
   BÖLGE (PAZAR) RENKLERİ — CEO 2026-09-14: renklendirme ÜLKEYE değil BÖLGEYE göre.
   Türkiye turkuaz · Rusya hafif kırmızı · Ukrayna hafif turuncu · Eurasia yeşil.
   Belarus Rusya'nın, Moldova Ukrayna'nın rengini alır (pazar eşlemesi sunucuyla aynı).
   TEK KAYNAK: sınıf Client/Services/BolgeRenk.cs'ten gelir, renk burada durur.
   Haritada ülkenin dolgusu BÖLGESİNİN rengidir — DÜZ, koyuluk kademesi YOK (CEO 2026-09-15:
   "Kazakistan, Özbekistan, Kırgızistan, Tacikistan aynı yeşil olmalı; Rusya'yla Belarus aynı
   renk; renkler çok açılmış"). 13.09'daki satış-büyüklüğü koyuluğu aynı bölgeyi farklı tonlara
   bölüyordu, kaldırıldı. Veri olmayan ülke gri kalır.
   ============================================================================ */
:root {
    --bl-tr:  #2BA6A0;   /* Türkiye — turkuaz */
    --bl-ru:  #D9736B;   /* Rusya — hafif kırmızı */
    --bl-ua:  #A78BD1;   /* Ukrayna & Moldova — açık mor (CEO 2026-09-21: "çok koyu olmayan mor"; 14.09–21.09 arası hafif turuncu #E8A24C idi) */
    --bl-cis: #4FA05B;   /* Eurasia — yeşil */
}
.bl-tr  { --bolge-renk: var(--bl-tr); }
.bl-ru  { --bolge-renk: var(--bl-ru); }
.bl-ua  { --bolge-renk: var(--bl-ua); }
.bl-cis { --bolge-renk: var(--bl-cis); }

/* Harita: bölgesi olan ülkede dolgu bölgenin rengidir, hepsi aynı ton. Veri yoksa (h-k0) gri. */
.h-ulke.bl-tr, .h-ulke.bl-ru, .h-ulke.bl-ua, .h-ulke.bl-cis { fill: var(--bolge-renk); }
.h-ulke.bl-tr.h-k0, .h-ulke.bl-ru.h-k0, .h-ulke.bl-ua.h-k0, .h-ulke.bl-cis.h-k0 { fill: #E4DDCF; }
.h-ulke.bl-tr.h-k0, .h-ulke.bl-ru.h-k0, .h-ulke.bl-ua.h-k0, .h-ulke.bl-cis.h-k0 { fill: color-mix(in srgb, var(--bolge-renk) 16%, #EDE7DA); }

/* Yazı rengi: dolgu metinde okunacak kadar koyu değil → aynı tondan koyulaştırılmış tür. */
.bl-tr, .bl-ru, .bl-ua, .bl-cis { --bolge-yazi: color-mix(in srgb, var(--bolge-renk) 78%, #1C1710); }
[data-theme="dark"] .bl-tr, [data-theme="dark"] .bl-ru, [data-theme="dark"] .bl-ua, [data-theme="dark"] .bl-cis
    { --bolge-yazi: color-mix(in srgb, var(--bolge-renk) 82%, #FFFFFF); }

/* LİSTELERDE AD ÖNÜNDE RENKLİ YUVARLAK (CEO 2026-09-14; bir ara baş harf boyanmıştı, kullanıcı
   yuvarlağa döndürdü) — ad hiç değişmez, bölge tek bakışta okunur. */
.bl-nokta { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px;
    vertical-align: 1px; flex: none; background: var(--bolge-renk);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--bolge-renk) 45%, transparent); }
/* Bölge satırının kendi adı tümüyle renklidir (zaten bölgeyi temsil ediyor). */
.bl-ad.bl-tr, .bl-ad.bl-ru, .bl-ad.bl-ua, .bl-ad.bl-cis { color: var(--bolge-yazi); font-weight: 700; }
.fcb-cip.bl-tr, .fcb-cip.bl-ru, .fcb-cip.bl-ua, .fcb-cip.bl-cis { color: var(--bolge-yazi); font-weight: 600; }
.fcb-cip.bl-tr b, .fcb-cip.bl-ru b, .fcb-cip.bl-ua b, .fcb-cip.bl-cis b { color: inherit; }

/* Harita lejantı — dört BÖLGE */
.harita-lejant .h-lj-ulke { display: inline-flex; align-items: center; gap: 3px; margin-left: 8px; }
.harita-lejant .h-lj-ulke i { width: 8px; height: 8px; border-radius: 50%; background: var(--bolge-renk); }
.h-tik { cursor: pointer; } .h-tik:hover { stroke: var(--murekkep); stroke-width: 1.4; }
.h-secili { stroke: var(--murekkep); stroke-width: 1.6; }
.h-bayat { stroke: var(--danger); stroke-width: 1.2; stroke-dasharray: 3 2; }
.h-etiket { font-family: var(--font-body); font-size: 8.5px; font-weight: 600; fill: var(--text-primary); pointer-events: none; }
.h-etiket-buyuk { font-size: 10px; font-weight: 700; }
.h-deger { font-family: var(--font-body); font-size: 8.5px; fill: var(--text-dim); pointer-events: none; }
[data-theme="dark"] .h-etiket, [data-theme="dark"] .h-deger { fill: #F1E7CF; }
.harita-lejant { display: flex; align-items: center; gap: 4px; margin-top: 6px; font-size: var(--fs-2xs); color: var(--text-dim); }
.harita-lejant i { display: inline-block; width: 16px; height: 8px; border-radius: 2px; }
.harita-lejant .h-k1 { background: #EBDDB5; } .harita-lejant .h-k2 { background: #DEC98A; } .harita-lejant .h-k3 { background: #C9A84C; } .harita-lejant .h-k4 { background: #A8873A; } .harita-lejant .h-k5 { background: #7E6228; }
.h-lj-bayat { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; }
.h-lj-bayat i { width: 14px; height: 8px; border: 1.2px dashed var(--danger); border-radius: 2px; background: transparent; }

/* Donut (erp.css .gd-* sınıflarını Solgar tokenlarıyla besler) */
.gd-c0 { stroke: var(--gseri-1); background: var(--gseri-1); } .gd-c1 { stroke: var(--gseri-2); background: var(--gseri-2); }
.gd-c2 { stroke: var(--gseri-3); background: var(--gseri-3); } .gd-c3 { stroke: var(--gseri-4); background: var(--gseri-4); }
.gd-c4 { stroke: var(--gseri-5); background: var(--gseri-5); } .gd-c5 { stroke: var(--gseri-6); background: var(--gseri-6); }

/* Notlar */
.sf-notlar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--fs-sm); line-height: 1.4; }
.sf-notlar li { position: relative; padding-left: 20px; }
.sf-notlar li::before { content: ""; position: absolute; left: 0; top: 5px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); }
.sf-notlar li.uyari::before { background: var(--danger); }

/* İskelet sayfalar */
.sf-iskelet { background: var(--erp-surface); border: 1px dashed var(--erp-border-strong); border-radius: 12px; padding: 16px 18px; }
.sf-iskelet-not { display: flex; align-items: center; gap: 10px; color: var(--text-dim); font-size: var(--fs-md); margin-bottom: 12px; }
.sf-iskelet-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sf-iskelet-kart { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--erp-border); border-radius: 10px; font-size: var(--fs-sm); background: var(--erp-bg); }
.sf-iskelet-kaynak { margin: 12px 0 0; font-size: var(--fs-xs); color: var(--text-dim); }

/* Tooltip kutusu (js/grafik.js) — Solgar tonu */
.gtip { background: var(--murekkep); color: #F1E7CF; border: 1px solid rgba(228,200,122,.35); border-top-color: var(--gold); max-width: 320px; }
.gtip b { color: var(--gold-light) !important; }
.gtip span { color: #E9E1CF !important; font-family: var(--font-body) !important; letter-spacing: 0 !important; white-space: normal !important; }

/* ---------------- KIRILIMLAR ---------------- */
@media (max-width: 1400px) { .sf-kpiler { --kpi-en: 184px; } }
@media (max-width: 1180px) {
    .sf-izgara-1, .sf-izgara-2, .sf-izgara-3 { grid-template-columns: 1fr 1fr; }
    .sf-panel-harita { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .sf-kpiler, .sf-izgara-1, .sf-izgara-2, .sf-izgara-3, .sf-iskelet-izgara { grid-template-columns: 1fr; }
    .sf-panel-harita .sf-harita-satir { grid-template-columns: 1fr; }
    .sf-main { padding: 12px 12px 20px 14px; }
}
@media (prefers-reduced-motion: reduce) { .kanat, .kanat * { transition: none !important; } }

/* ============================================================
   FİLTRE ŞERİDİ (.fcb) — AztekFi'nin şerit dili, Solgar tokenlarıyla.
   (Eski bileşenin <style> bloğundan buraya taşındı: ortak sınıf sayfa
   stilinde bırakılmaz.)
   ============================================================ */
.fcb{display:flex;flex-direction:column;gap:5px;margin-bottom:10px;padding:2px 0 8px;border-bottom:1px solid var(--erp-border)}
.fcb-ust{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fcb-anahtarlar{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.fcb-tgl{display:inline-flex;border:1px solid var(--erp-border-strong);border-radius:7px;overflow:hidden;background:var(--erp-surface)}
.fcb-tgl button{appearance:none;border:0;cursor:pointer;padding:4px 8px;background:transparent;color:var(--text-dim);
    font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;transition:background .15s,color .15s}
.fcb-aylar button{padding:4px 5.5px;letter-spacing:0}
.fcb-tgl button.on{background:var(--gold);color:var(--murekkep)}
.fcb-tgl button:hover:not(.on){color:var(--text-primary);background:var(--gold-soft)}
.fcb-temizle{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;
    border:1px solid var(--erp-border-strong);background:var(--erp-surface);color:var(--text-primary);
    font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;
    transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.fcb-temizle svg{flex:none}
.fcb-temizle:not(:disabled){border-color:var(--danger);color:var(--danger-text)}
.fcb-temizle:hover:not(:disabled){background:var(--danger);border-color:var(--danger);color:#fff}
.fcb-temizle:disabled{opacity:.35;cursor:default}
.fcb-sag{margin-left:auto;display:flex;align-items:flex-start;gap:6px}
.fcb-yenile-kutu{display:flex;flex-direction:column;align-items:center;gap:2px}
.fcb-yenile{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:5px;padding:5px 10px;border-radius:7px;
    border:1px solid var(--gold);background:var(--erp-surface);color:var(--gold-text);
    font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.12em;transition:background .18s,color .18s}
.fcb-yenile svg{flex:none}
.fcb-yenile:hover:not(:disabled){background:var(--gold);color:var(--murekkep)}
.fcb-yenile:disabled{cursor:progress;opacity:.75}
.fcb-yenile.calisiyor svg{animation:fcb-spin .9s linear infinite}
@keyframes fcb-spin{to{transform:rotate(360deg)}}
.fcb-oto{font-family:var(--font-body);font-size:8px;letter-spacing:.02em;color:var(--text-dim);opacity:.8;white-space:nowrap}
.fcb-son-veri{font-family:var(--font-mono);font-size:8.5px;letter-spacing:.04em;color:var(--text-dim);white-space:nowrap}
.fcb-kilit{color:var(--danger-text);font-weight:700}
.fcb-onay-arka{position:fixed;inset:0;z-index:300;background:rgba(21,19,15,.45);display:grid;place-items:center;animation:fcb-onay-gir .18s ease both}
.fcb-onay{width:min(92vw,460px);padding:20px 22px 18px;background:var(--erp-surface);color:var(--text-primary);border:1px solid var(--gold);border-radius:12px;
    box-shadow:0 24px 60px rgba(0,0,0,.35),0 0 30px rgba(201,168,76,.25)}
@keyframes fcb-onay-gir{from{opacity:0}to{opacity:1}}
.fcb-onay-baslik{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-size:var(--fs-sm);font-weight:800;letter-spacing:.16em;color:var(--gold-text);margin-bottom:12px}
.fcb-onay-metin{margin:0 0 8px;font-size:var(--fs-base);line-height:1.45}
.fcb-onay-metin b{font-weight:800}
.fcb-onay-alt{margin:0 0 16px;font-size:var(--fs-sm);color:var(--text-dim)}
.fcb-onay-alt.fcb-onay-uyari{color:var(--danger-text);font-weight:700}
.fcb-onay-dugmeler{display:flex;justify-content:flex-end;gap:8px}
.fcb-onay-vazgec,.fcb-onay-evet{appearance:none;cursor:pointer;padding:7px 15px;border-radius:7px;font-family:var(--font-body);font-size:var(--fs-2xs);font-weight:800;letter-spacing:.14em;
    border:1px solid var(--erp-border-strong);background:transparent;color:var(--text-primary);transition:background .18s,color .18s}
.fcb-onay-vazgec:hover{background:var(--erp-kalin-cizgi);color:var(--erp-bg)}
.fcb-onay-evet{border-color:var(--gold);color:var(--gold-text)}
.fcb-onay-evet:hover{background:var(--gold);color:var(--murekkep)}
.fcb-boyutlar{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.fcb-boyutlar select, .fcb-boyutlar .fcb-sec-dugme{appearance:none;cursor:pointer;padding:4px 20px 4px 8px;max-width:180px;min-width:0;flex:1 1 120px;border-radius:7px;text-overflow:ellipsis;
    border:1px solid var(--erp-border-strong);background:var(--erp-surface);color:var(--text-primary);font-family:var(--font-body);font-size:var(--fs-xs);font-weight:600;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B665C'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:right 8px center}
.fcb-boyutlar select.fcb-derin{border-style:dashed;color:var(--text-dim)}
.fcb-boyutlar select.fcb-derin:hover{color:var(--text-primary)}

/* FİLTREDE BÖLGE RENKLİ (CEO: "filtrede ülke değil bölge kısmını renklendirelim" + "filtredeki
   yazıları da bu renklere çevirelim"). Native <select> KULLANILAMAZ: açılan listeyi işletim sistemi
   çizer ve macOS'ta option rengi yok sayılır — bu yüzden pazar için kendi açılırımız var.
   YAZI TİPİ TUZAĞI (CEO 2026-09-14: "renkler ok, yazı tipi bozulmuş"): düğme `font: inherit` ile
   filtre çubuğunun yazısını alıyordu ve komşu select'ler AŞAĞIDAKİ yoğunluk bloğunda 10,5px'e
   çekildiği için açılır tek başına iri kalıyordu; genişliği de flex paylaşımına girmiyordu.
   Çözüm kopyalamak DEĞİL, AYNI KURALI PAYLAŞMAK: düğme `.fcb-boyutlar select` ile aynı seçicide
   (yukarıda) ve `.fcb-sec` her breakpoint'te select'le aynı flex değerlerini alır (aşağıda) —
   böylece select ölçüsü değişince açılır da kendiliğinden izler. Bu blok, paylaştığı kurallardan
   SONRA durmalı (renk/hover aynı özgüllükte; önce yazılırsa ortak kural onları ezer). */
.fcb-sec { position: relative; display: block; }
.fcb-boyutlar .fcb-sec { flex: 1 1 120px; max-width: 180px; min-width: 0; }
.fcb-boyutlar .fcb-sec-dugme { width: 100%; max-width: none; text-align: left; overflow: hidden; white-space: nowrap; }
.fcb-sec-dugme:hover { border-color: var(--gold); }
.fcb-sec-dugme.bl-tr, .fcb-sec-dugme.bl-ru, .fcb-sec-dugme.bl-ua, .fcb-sec-dugme.bl-cis
    { color: var(--bolge-yazi); font-weight: 700; border-color: color-mix(in srgb, var(--bolge-renk) 55%, transparent); }
.fcb-sec-arka { position: fixed; inset: 0; z-index: 40; }            /* dışarı tıkla → kapan */
.fcb-sec-liste { position: absolute; top: calc(100% + 4px); left: 0; z-index: 41; min-width: 100%;
    margin: 0; padding: 4px; list-style: none; border-radius: 10px; border: 1px solid var(--erp-border-strong);
    background: var(--erp-surface); box-shadow: 0 14px 34px -14px rgba(30, 27, 22, .55); }
.fcb-sec-liste li { margin: 0; }
.fcb-sec-liste button { appearance: none; border: 0; background: none; cursor: pointer;
    display: block; width: 100%; text-align: left; white-space: nowrap; padding: 5px 12px; border-radius: 7px;
    color: var(--text-primary); font-family: var(--font-body); font-weight: 600; }
.fcb-sec-liste button:hover { background: var(--gold-soft); }
.fcb-sec-liste button.on { background: var(--gold-soft); box-shadow: inset 0 0 0 1px var(--gold); }
.fcb-sec-liste button.bl-tr, .fcb-sec-liste button.bl-ru, .fcb-sec-liste button.bl-ua, .fcb-sec-liste button.bl-cis
    { color: var(--bolge-yazi); font-weight: 700; }
.fcb-filtre-bandi{position:relative;display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:5px 10px;border:1px solid var(--gold);border-radius:8px;background:var(--erp-surface);overflow:hidden}
.fcb-etiket{font-family:var(--font-display);font-size:var(--fs-xs);font-weight:800;letter-spacing:.22em;color:var(--gold-text)}
.fcb-cip{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;border-radius:100px;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.03em;
    border:1px solid var(--gold);color:var(--gold-text);background:var(--gold-soft)}
.fcb-cip b{font-weight:800}
.fcb-cip button{appearance:none;border:0;cursor:pointer;background:transparent;color:inherit;font-size:13px;line-height:1;padding:0 0 0 2px;opacity:.7}
.fcb-cip button:hover{opacity:1}
.fcb-cip-sabit{border-color:var(--erp-border-strong);color:var(--text-dim);background:transparent}
.fcb-cip-tumu{border-style:dashed;border-color:var(--erp-border-strong);color:var(--text-dim);background:transparent}
/* SAYFAYA UYGULANMAYAN FİLTRE (CEO 2026-09-14: "stok lojistikte ülke seçince veriler değişmiyor,
   normal mi?"). Normal — sayfa yalnız Logo/Türkiye — ve sunucu bunu Meta.Eksik'te SÖYLÜYORDU, ama
   oraya yalnız "⚠ n not" çipinin FARE İPUCUNDAN bakılabiliyor; CEO tablette, ipucu yok. Artık
   filtrenin KENDİ çipi söylüyor: değer üstü çizili + "uygulanmaz" etiketi. Şerit/satır EKLENMEZ
   (2026-09-14'te tam bu yüzden kaldırıldı) — çip zaten filtre çubuğunda, sayfa kaymaz. */
.fcb-cip-yok{border-style:dashed;border-color:var(--erp-border-strong);color:var(--text-dim);background:transparent;
    text-decoration:line-through;text-decoration-thickness:1px}
/* inline-block, üstten gelen çizgiyi KESER — etiket ve × üstü çizili görünmesin. */
.fcb-cip-yok > i{display:inline-block;text-decoration:none;font-style:normal;font-weight:700;font-size:8.5px;letter-spacing:.06em;text-transform:uppercase;
    padding:1px 5px;border-radius:100px;background:var(--danger-soft);color:var(--danger-text)}
/* Bölge renkli çip "uygulanmaz" hâlinde rengini bırakır — yanıltmasın. */
.fcb-cip-yok.bl-tr, .fcb-cip-yok.bl-ru, .fcb-cip-yok.bl-ua, .fcb-cip-yok.bl-cis{color:var(--text-dim);font-weight:700}


/* ============================================================
   GERİ BİLDİRİM TURU (2026-09-06)
   ============================================================ */
/* KPI kartları — "ÇİFT KILIÇ" (kullanıcı seçimi 2026-09-06): çerçevede iki ışık boncuğu
   SÜREKLİ döner (biri saat yönünde, diğeri tersine; her turda iki kez kesişir). Açık temada
   koyu altın (beyaz kartta okunur), koyu temada açık altın-beyaz — tokenlar aşağıda. */
:root, [data-theme="light"] { --kilic-a: #6E5320; --kilic-b: #8A6A2E; --kilic-c: #C9A84C; --kilic-parlak: #B8923A; }
[data-theme="dark"] { --kilic-a: #C9A84C; --kilic-b: #E4C87A; --kilic-c: #FFF3CF; --kilic-parlak: #FFF3CF; }
@property --kpi-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@property --kpi-b { syntax: '<angle>'; inherits: false; initial-value: 180deg; }
.sf-kpi { position: relative; isolation: isolate; border-color: transparent;
    background: linear-gradient(var(--erp-surface), var(--erp-surface)) padding-box,
                linear-gradient(135deg, var(--kilic-c), var(--erp-border) 35%, var(--erp-border) 65%, var(--kilic-b)) border-box; }
.sf-kpi::before, .sf-kpi::after { content: ""; position: absolute; inset: -1.5px; border-radius: 13.5px; padding: 1.5px; pointer-events: none; z-index: 1;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.sf-kpi::before { background: conic-gradient(from var(--kpi-a), transparent 0 74%, var(--kilic-a) 86%, var(--kilic-parlak) 92%, var(--kilic-c) 96%, transparent 100%);
    animation: kilic-saat 3.2s linear infinite; }
.sf-kpi::after  { background: conic-gradient(from var(--kpi-b), transparent 0 74%, var(--kilic-a) 86%, var(--kilic-parlak) 92%, var(--kilic-c) 96%, transparent 100%);
    animation: kilic-ters 3.2s linear infinite; }
@keyframes kilic-saat { to { --kpi-a: 360deg } }
@keyframes kilic-ters { from { --kpi-b: 180deg } to { --kpi-b: -180deg } }
.sf-kpi:nth-child(2)::before, .sf-kpi:nth-child(2)::after { animation-delay: -.5s }
.sf-kpi:nth-child(3)::before, .sf-kpi:nth-child(3)::after { animation-delay: -1s }
.sf-kpi:nth-child(4)::before, .sf-kpi:nth-child(4)::after { animation-delay: -1.5s }
.sf-kpi:nth-child(5)::before, .sf-kpi:nth-child(5)::after { animation-delay: -2s }
.sf-kpi:nth-child(6)::before, .sf-kpi:nth-child(6)::after { animation-delay: -2.5s }
.sf-kpi:hover { box-shadow: 0 12px 28px -16px rgba(60,40,10,.45), 0 0 22px -10px var(--gold); }
.sf-kpi-tr { border-style: solid; background: linear-gradient(var(--erp-surface), var(--erp-surface)) padding-box,
    linear-gradient(135deg, var(--celik), var(--erp-border) 35%, var(--erp-border) 65%, var(--celik)) border-box; }

/* "Veriler güncelleniyor" bildirimi — aynı çift kılıç, sürekli (çalışıyor hissi). erp.css'in
   kare çerçevesi ve nabzı Solgar diline çevrilir. */
.bekleme-katmani { border-radius: 12px; border-color: transparent; isolation: isolate;
    background: linear-gradient(var(--erp-surface), var(--erp-surface)) padding-box,
                linear-gradient(135deg, var(--kilic-c), var(--erp-border) 35%, var(--erp-border) 65%, var(--kilic-b)) border-box;
    box-shadow: 0 12px 34px rgba(0,0,0,.22), 0 0 26px -6px rgba(201,168,76,.45); }
.bekleme-katmani.yenileme { animation: bekleme-gir .28s cubic-bezier(.2,.85,.25,1) both; }
.bekleme-katmani::before, .bekleme-katmani::after { content: ""; position: absolute; inset: -1.5px; border-radius: 13.5px; padding: 1.5px; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.bekleme-katmani::before { background: conic-gradient(from var(--kpi-a), transparent 0 74%, var(--kilic-a) 86%, var(--kilic-parlak) 92%, var(--kilic-c) 96%, transparent 100%); animation: kilic-saat 2.4s linear infinite; }
.bekleme-katmani::after  { background: conic-gradient(from var(--kpi-b), transparent 0 74%, var(--kilic-a) 86%, var(--kilic-parlak) 92%, var(--kilic-c) 96%, transparent 100%); animation: kilic-ters 2.4s linear infinite; }
@media (prefers-reduced-motion: reduce) { .sf-kpi::before, .sf-kpi::after, .bekleme-katmani::before, .bekleme-katmani::after, .kanat-logo-halka::before, .kanat-logo-halka::after { animation: none; } }

/* Panel başlığı: büyüt düğmesi */
.sf-buyut { appearance: none; cursor: pointer; width: 26px; height: 26px; border-radius: 7px; display: inline-grid; place-items: center;
    border: 1px solid var(--erp-border-strong); background: var(--erp-surface); color: var(--text-dim); transition: color .2s, border-color .2s, box-shadow .2s; }
.sf-buyut:hover { color: var(--gold-text); border-color: var(--gold); box-shadow: 0 0 12px -4px var(--gold); }

/* Tema düğmesi — GÜNCELLE'nin yanında, renk değiştiren ışık halkası */
.fcb-tema { display: inline-flex; align-items: center; margin-top: 1px; }
.fcb-tema .tema-dugmesi { width: 28px; height: 28px; border: 1px solid var(--gold); background: var(--erp-surface); color: var(--gold-text);
    animation: tema-isik 3.6s ease-in-out infinite; }
.fcb-tema .tema-dugmesi:hover { color: var(--text-primary); border-color: var(--gold); background: var(--gold-soft); }
/* TR / EN dil düğmesi (CEO 2026-10-08) — tema düğmesinin solunda, aynı altın çerçeve; seçili dil altın zeminli. Çeviri js/dil.js. */
.fcb-dil { display: inline-flex; align-items: center; margin-top: 1px; }
.dil-dugmesi { display: inline-flex; height: 28px; border: 1px solid var(--gold); border-radius: 14px; overflow: hidden; background: var(--erp-surface); }
.dil-dugmesi button { appearance: none; cursor: pointer; border: 0; background: transparent; color: var(--gold-text); padding: 0 7px;
    font: 700 10px/1 'Inter', var(--font-body); letter-spacing: .05em; transition: background .2s, color .2s; }
.dil-dugmesi button + button { border-left: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); }
.dil-dugmesi button.on { background: linear-gradient(180deg, var(--cg-bu-2, #e9d9a6), var(--gold)); color: #1b1408; cursor: default; }
.dil-dugmesi button:not(.on):hover { background: var(--gold-soft); color: var(--text-primary); }
/* İngilizcede CSS ile basılan iki yazı (sözlük metin düğümlerini çevirir, ::before/::after içeriğini değil) */
html[lang="en"] .sf-rp-govde.sf-mesgul::after { content: "Updating data…"; }
html[lang="en"] .sf-filtre-serit::before { content: "PAGE FILTER"; }
@keyframes tema-isik {
    0%, 100% { box-shadow: 0 0 0 2px rgba(201,168,76,.28), 0 0 12px 1px rgba(201,168,76,.75); }
    33%      { box-shadow: 0 0 0 2px rgba(90,110,140,.28),  0 0 12px 1px rgba(90,110,140,.85); }
    66%      { box-shadow: 0 0 0 2px rgba(122,139,58,.28),  0 0 12px 1px rgba(122,139,58,.85); }
}
/* Para birimi anahtarı (AztekFi): USD yeşil, TL kırmızı; aktifken dolu */
.fcb-para button.usd { color: var(--success-text); } .fcb-para button.tl { color: var(--danger-text); }
.fcb-para button.usd.on { background: var(--success); color: #fff; } .fcb-para button.tl.on { background: var(--danger); color: #fff; }
.fcb-cip-kur { border-style: dashed; }

/* Harita popup — tam sayfa */
.hp-arka { position: fixed; inset: 0; z-index: 400; background: rgba(21,19,15,.55); display: grid; place-items: center; padding: 18px;
    -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); animation: hp-gir .2s ease both; }
@keyframes hp-gir { from { opacity: 0 } to { opacity: 1 } }
.hp { width: min(1500px, 96vw); height: min(900px, 92vh); background: var(--erp-surface); border: 1px solid var(--gold); border-radius: 14px;
    box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 40px rgba(201,168,76,.25); display: flex; flex-direction: column; overflow: hidden; }
.hp-baslik { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--erp-border); }
.hp-baslik > span:first-child { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-lg); display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.hp-cipler { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.hp-kapat { appearance: none; cursor: pointer; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--erp-border-strong); background: transparent; color: var(--text-dim); font-size: 18px; line-height: 1; }
.hp-kapat:hover { color: var(--text-primary); border-color: var(--gold); }
.hp-govde { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; padding: 14px 16px 16px; flex: 1; min-height: 0; }
.hp-harita { display: flex; align-items: center; min-width: 0; }
.hp-harita .harita-kap { width: 100%; }
.hp-yan { display: flex; flex-direction: column; gap: 12px; min-width: 0; overflow-y: auto; }
.hp-kpiler { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.hp-kpi { border: 1px solid var(--erp-border); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.hp-kpi span { font-size: var(--fs-2xs); color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em; }
.hp-kpi b { font-family: var(--font-display); font-weight: 800; font-size: var(--fs-xl); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.hp-kpi i { font-style: normal; font-size: var(--fs-xs); font-weight: 600; color: var(--text-dim); }
.hp-not { margin: 0; font-size: var(--fs-xs); color: var(--danger-text); }
@media (max-width: 1180px) { .sf-izgara-1 { grid-template-columns: 1fr; } .hp-govde { grid-template-columns: 1fr; } }

/* ============================================================
   YOĞUNLUK — tek ekran (kullanıcı 2026-09-06: "filtre çok yer kaplıyor,
   boşlukları azalt, Yönetici Panosu tek sayfaya sığsın"). Bu blok sondadır ve
   yukarıdaki ölçüleri sıkılaştırır; tipografi ölçeği yine app.css tokenları.
   ============================================================ */
.sf-main { padding: 10px 16px 14px 18px; }

/* Başlık: açıklama aynı satırda, altın nokta ayraçlı; Inter 12px soluk (kullanıcı: eski hâli göze batıyordu) */
.sf-baslik { margin-bottom: 4px; align-items: center; }
.sf-baslik-grup { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sf-baslik h1 { font-size: 18px; }
.sf-alt { margin: 0; font-family: 'Inter', var(--font-body); font-weight: 400; font-size: 12px; letter-spacing: 0; color: var(--text-dim); }
.sf-alt::before { content: "·"; color: var(--gold); font-weight: 700; margin-right: 8px; }

/* Filtre şeridi: iki satır — [anahtarlar … Temizle · Güncelle · Son veri · tema] / [açılırlar + FİLTRE bandı] */
.fcb { gap: 4px; margin-bottom: 6px; padding: 0 0 5px; }
.fcb-ust { gap: 6px; }
.fcb-anahtarlar { gap: 4px; }
.fcb-tgl button { padding: 3px 7px; font-size: 10px; }
.fcb-aylar button { padding: 3px 5px; }
.fcb-temizle, .fcb-yenile { height: 26px; padding: 0 9px; font-size: 10px; }
.fcb-sag { gap: 6px; align-items: center; }
.fcb-yenile-kutu { flex-direction: row; align-items: center; gap: 8px; }
.fcb-son-veri { font-family: 'Inter', var(--font-body); font-size: 10px; letter-spacing: 0; color: var(--text-dim); }
.fcb-tema .tema-dugmesi { width: 26px; height: 26px; }
.fcb-dil .dil-dugmesi { height: 26px; }
.fcb-alt { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fcb-boyutlar { flex: 1 1 auto; gap: 5px; }
.fcb-boyutlar select, .fcb-boyutlar .fcb-sec-dugme { padding: 3px 18px 3px 7px; }
.fcb-boyutlar select, .fcb-boyutlar .fcb-sec-dugme, .fcb-sec-liste button { font-size: 10.5px; }
.fcb-boyutlar select, .fcb-boyutlar .fcb-sec { flex: 0 1 150px; max-width: 160px; }
.fcb-filtre-bandi { flex: 0 1 auto; padding: 3px 8px; gap: 6px; }
.fcb-etiket { font-size: 10px; }
.fcb-cip { padding: 1.5px 8px; font-size: 9.5px; }
.sf-meta { margin: 0 0 6px; font-size: 10.5px; gap: 4px 6px; }

/* KPI şeridi */
.sf-kpiler { gap: 10px; margin-bottom: 10px; }
.sf-kpi { padding: 9px 12px; grid-template-columns: 36px 1fr; gap: 10px; border-radius: 11px; }
.sf-kpi::before, .sf-kpi::after { border-radius: 12.5px; }
.sf-kpi-yuvar { width: 36px; height: 36px; }
.sf-kpi-yuvar svg { width: 17px; height: 17px; }
.sf-kpi-ad { font-size: 11px; }
.sf-kpi-ad small { font-size: 9px; }
.sf-kpi-deger { font-size: 22px; }
.sf-kpi-fark { font-size: 11px; margin-top: 1px; }
.sf-kpi-alt, .sf-kpi-gecen, .sf-kpi-onceki { font-size: 10px; }
.sf-kpi-onceki { color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Paneller: 3 şerit × 3 kolon */
.sf-izgara { gap: 10px; margin-bottom: 10px; }
.sf-izgara-1 { grid-template-columns: 1fr 1.6fr .85fr; }
.sf-izgara-2 { grid-template-columns: 1fr 1fr 1.3fr; }
.sf-izgara-3 { grid-template-columns: 1fr 1.2fr .9fr; }
.sf-panel { padding: 10px 12px; border-radius: 11px; min-height: 0; }
.sf-panel-baslik { margin-bottom: 6px; }
.sf-panel-baslik > span:first-child { font-size: 13px; }
.sf-lejant { font-size: 10px; gap: 9px; }
.sf-panel-harita .sf-harita-satir { grid-template-columns: 1.45fr 1fr; gap: 10px; align-items: start; }
.harita-lejant { margin-top: 2px; font-size: 9px; }
.sf-tablo { font-size: 11px; }
.sf-tablo th { font-size: 10px; padding-bottom: 4px; }
.sf-tablo td { padding: 3.5px 5px 3.5px 0; }
.sf-tablo-sik td, .sf-tablo-sik th { padding-top: 2.5px; padding-bottom: 2.5px; font-size: 10.5px; }
.sf-urun { max-width: 190px; }
.sf-barlar { gap: 4px; }
.sf-bar { font-size: 11px; padding: 1px 4px; gap: 8px; }
.sf-bar-kanal { height: 9px; }
.sf-bar-yoy { font-size: 10px; }
.sf-svg-deger { font-size: 9px; }
.sf-svg-eksen { font-size: 9px; }
.sf-notlar { font-size: 11px; gap: 5px; line-height: 1.35; }
.sf-notlar li { padding-left: 16px; }
.sf-notlar li::before { top: 4px; width: 7px; height: 7px; }
/* Donut (erp.css .gd-*) kompakt */
.gd-kap { display: grid; grid-template-columns: 118px 1fr; gap: 10px; align-items: center; }
.gd-svg { width: 118px; height: 118px; }
.gd-lejant { gap: 4px; }
.gd-lj { font-size: 10.5px; padding: 2px 4px; }
.gd-merkez { font-size: 15px; } .gd-merkez-alt { font-size: 8.5px; }
@media (max-width: 1400px) { .sf-kpiler { --kpi-en: 184px; } }
@media (max-width: 1180px) { .sf-izgara-1, .sf-izgara-2, .sf-izgara-3 { grid-template-columns: 1fr 1fr; } .sf-panel-harita { grid-column: 1 / -1; } }

/* Slogan: önceki kademeli hâl korunur (sağa hizalı, satırlar eğik kenara paralel içeri kayar).
   Yalnız "Daha Mutlu" bir tık büyür (13,5px) ve sağ boşluğu 9px olur → SOL başı üst satır
   ("Daha Sağlıklı") ile aynı hizaya gelir (ölçüm: Sağlıklı 70,2px / pr 7 · Mutlu 13,5px ≈ 72,3px / pr 9). */
.kanat-slogan i { font-size: 12.75px; padding-right: 9px; }   /* ölçüldü: sol baş 114,8px = "Daha Sağlıklı" ile aynı */
/* Çıkış: daha küçük, bloğun ortasında */
.kanat-cikis { align-self: center; margin-left: -14px; height: 24px; padding: 0 10px 0 9px; font-size: 10px; gap: 6px; }   /* -14px: bloğun sol iç boşluğunu telafi eder → görsel ortada */
.kanat-cikis svg { width: 12px; height: 12px; }

/* Tek ekran: 1. şerit haritanın yüksekliğiyle uzuyordu (393px) → harita 190px'e sabitlenir,
   en-boy oranı korunur (popup'taki büyük harita etkilenmez). KPI 6'lı sıra 1200px'e kadar korunur. */
.sf-panel-harita .harita-kap { height: 196px; display: flex; flex-direction: column; align-items: center; }
.sf-panel-harita .harita { height: 178px; width: auto; max-width: 100%; }
.sf-panel-harita .harita-lejant { width: 100%; }
@media (max-width: 1400px) { .sf-kpiler { --kpi-en: 184px; } }
@media (max-width: 1200px) { .sf-kpiler { --kpi-en: 176px; } }

/* Tek ekran son sıkma (1600×900'de 24px taşıyordu) */
.sf-main { padding: 8px 16px 8px 18px; }
.sf-izgara { margin-bottom: 8px; }
.sf-kpiler { margin-bottom: 8px; }
.sf-panel { padding: 8px 11px; }
.sf-panel-harita .harita-kap { height: 188px; }
.sf-panel-harita .harita { height: 170px; }

/* Yoğunluk 3 (kullanıcı 2026-09-06): meta başlık satırında; açılırlar TEK tam satır (kaymaz);
   FİLTRE bandı ayrı ince satır; listeler 10 kayıt / 5 görünür + kart içi kaydırma; açıklama 11px. */
.sf-baslik { justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 4px; }
.sf-alt { font-size: 11px; }
.sf-meta-ust { margin: 0 0 0 auto; font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-wrap: nowrap; }
.fcb-boyutlar { display: flex; flex-wrap: nowrap; gap: 6px; width: 100%; }
.fcb-boyutlar select, .fcb-boyutlar .fcb-sec { flex: 1 1 0; min-width: 0; max-width: none; }
/* GENİŞLİK EŞİTLİĞİ: Chrome, <select>'in esneklik TABANINA kendi dolgusunu ve kenarlığını ekler —
   `flex-basis: 0` ve `box-sizing: border-box` bunu değiştirmez. Ölçüldü (1512px, 6 kutu): beş select
   207px, açılırın düz div sarmalayıcısı 180px; fark her birinde TAM 27px = 7+18 dolgu + 2 kenarlık
   (select'lerin dolgusu sıfırlanınca fark kayboluyor). Sarmalayıcı bu payı açıkça alır → altı kutu da
   202px. Yukarıdaki dolgu değişirse bu satır da değişmeli. */
.fcb-boyutlar .fcb-sec { flex-basis: calc(7px + 18px + 2px); }
.fcb-filtre-bandi { width: 100%; flex: none; }
.sf-kaydir { max-height: 132px; overflow-y: auto; overflow-x: hidden; padding-right: 4px; scrollbar-width: thin; scrollbar-color: var(--erp-border-strong) transparent; }
.sf-kaydir::-webkit-scrollbar { width: 6px; } .sf-kaydir::-webkit-scrollbar-thumb { background: var(--erp-border-strong); border-radius: 3px; }
.sf-kaydir .sf-tablo thead th { position: sticky; top: 0; background: var(--erp-surface); z-index: 1; }
.sf-izgara-2 .sf-panel, .sf-izgara-3 .sf-panel { display: flex; flex-direction: column; }

/* Harita büyük (kullanıcı: "bu hali küçük"): listeler kısaldığı için 1. şerit büyüyebilir */
.sf-izgara-1 { grid-template-columns: 1fr 1.95fr .8fr; }
.sf-panel-harita .sf-harita-satir { grid-template-columns: 1.6fr 1fr; align-items: center; }
.sf-panel-harita .harita-kap { height: 272px; }
.sf-panel-harita .harita { height: 254px; }

/* Harita yüksekliği ekrana göre: 1600×900'de 198px (tam sığar), 2000×1190'da 254px (tavan) */
.sf-panel-harita .harita-kap { height: auto; }
.sf-panel-harita .harita { height: clamp(170px, 22vh, 254px); }

/* ============================================================
   DÜZEN 2 (kullanıcı 2026-09-06): Net Satış en büyük, harita büyük; pazar+marka sağda küçük yığın;
   2. şerit kategori · ürünler · müşteriler · notlar (kaydırmalı). Yıl bazında grafik kaldırıldı.
   ============================================================ */
.sf-izgara-1 { grid-template-columns: 1.9fr 2.1fr 1fr; align-items: stretch; }
.sf-izgara-2 { grid-template-columns: 1fr 1.55fr 1.4fr 1.05fr; }
.sf-yigin { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.sf-yigin .sf-panel { flex: 1 1 auto; }
.sf-panel-netsatis { display: flex; flex-direction: column; }
.sf-panel-netsatis .sf-grafik-buyuk { flex: 1; display: flex; align-items: stretch; }
.sf-panel-netsatis .sf-svg-deger { font-size: 10px; }
.sf-panel-alt { font-family: var(--font-body); font-size: 10px; font-weight: 500; color: var(--text-dim); margin-left: 6px; }
.sf-panel-harita .sf-harita-satir { grid-template-columns: 1.55fr 1fr; align-items: center; }
.sf-panel-harita .harita { height: clamp(250px, 36vh, 400px); }
.sf-panel-pazar .gd-kap { grid-template-columns: 100px 1fr; gap: 8px; }
.sf-panel-pazar .gd-svg { width: 100px; height: 100px; }
.sf-panel-pazar .gd-lj { font-size: 10px; }
.sf-kaydir { max-height: clamp(131px, 22vh, 280px); }
.sf-notlar.sf-kaydir { max-height: clamp(131px, 22vh, 280px); }
@media (max-width: 1400px) { .sf-izgara-2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1180px) { .sf-izgara-1 { grid-template-columns: 1fr; } .sf-yigin { flex-direction: row; } }

/* ============================================================
   DÜZEN 4 — KULLANICININ DÜZEN ARACIYLA VERDİĞİ YERLEŞİM (2026-09-06, akşam)
   6 kolon = KPI kartları (hiza kaynağı). Satır 1: Net Satış kolon 1–3; sağ alan
   kolon 4–6 içinde iki yığın (480/440 oranı): A = Marka + İlk 10 Ürün, B = Pazar +
   Notlar + Kategori. Satır 2: Müşteri kolon 1–2, Harita kolon 3–6. Satır oranı
   460/420 ≈ 1.1/1. Gövde kalan yüksekliği doldurur (flex:1) → tek sayfa.
   (Düzen 3: Net Satış+Harita sol 4 kolon, yığınlar kolon 5 ve 6 — kaldırıldı.)
   ============================================================ */
/* overflow:hidden YALNIZ panoda (.sf-main-pano sınıfını AppLayout rota bazlı basar).
   Tüm .sf-main'e uygulandığında Kullanıcı Yetkileri / Log gibi uzun sayfalar
   KAYDIRILAMAZ oldu (canlıda görüldü 2026-09-06). Pano 100dvh'ye sığdığı için
   yalnız onda gizlenir; diğer sayfalar .sf-main'in taban overflow-y:auto'suyla kayar. */
.sf-main.sf-main-pano { overflow: hidden; }
.sf-pano { display: flex; flex-direction: column; height: calc(100dvh - 16px); min-height: 0; }
.sf-pano .sf-kpiler { flex: none; }
.sf-govde { flex: 1 1 auto; min-height: 0; display: grid; gap: 8px 10px;
    grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(0, 1.1fr) minmax(0, 1fr); }
.sf-kpiler { gap: 10px; }
.sf-g-netsatis { grid-column: 1 / 4; grid-row: 1; }
.sf-g-sag      { grid-column: 4 / 7; grid-row: 1; display: grid; grid-template-columns: minmax(0, 480fr) minmax(0, 440fr); gap: 10px; min-height: 0; min-width: 0; }
/* Alt satırda YER DEĞİŞTİ (kullanıcı 2026-09-11): harita solda, müşteri listesi sağda. */
.sf-g-harita   { grid-column: 1 / 5; grid-row: 2; }
.sf-g-musteri  { grid-column: 5 / 7; grid-row: 2; }
.sf-sutun { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.sf-sutun > .sf-panel { min-height: 0; }
.sf-p-marka { flex: 0 0 26%; }  .sf-p-urunler { flex: 1 1 auto; }
.sf-p-pazar { flex: 0 0 26%; }  .sf-p-notlar { flex: 1 1 0; } .sf-p-kategori { flex: 1 1 0; }
.sf-govde .sf-panel { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sf-govde .sf-panel-baslik { flex: none; }
.sf-govde .sf-kaydir { flex: 1 1 auto; min-height: 0; max-height: none; }
.sf-govde .sf-notlar.sf-kaydir { max-height: none; }
.sf-panel-netsatis .sf-grafik-buyuk { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: center; }
.sf-panel-netsatis .sf-svg { width: 100%; height: 100%; }
.sf-panel-harita .sf-harita-satir { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; align-items: stretch; }
.sf-panel-harita .harita-kap { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.sf-panel-harita .harita { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; max-width: 100%; }
.sf-panel-pazar .gd-kap { grid-template-columns: 88px 1fr; gap: 8px; }
.sf-panel-pazar .gd-svg { width: 88px; height: 88px; }
.sf-panel-pazar .gd-lj { font-size: 10px; padding: 1px 4px; }
.sf-tablo-sik td, .sf-tablo-sik th { padding-top: 2px; padding-bottom: 2px; }
.sf-g-musteri .sf-bar { grid-template-columns: minmax(160px, 1.4fr) 2fr auto auto; }
.sf-g-musteri .sf-bar-kanal { height: 11px; }
@media (max-width: 1180px) {
    .sf-main.sf-main-pano { overflow-y: auto; }
    .sf-pano { height: auto; }
    .sf-govde { grid-template-columns: 1fr; grid-template-rows: none; }
    .sf-g-netsatis, .sf-g-sag, .sf-g-harita, .sf-g-musteri { grid-column: 1; grid-row: auto; }
    .sf-g-sag { grid-template-columns: 1fr; grid-template-rows: none; }
    .sf-g-sag > .sf-panel { grid-column: 1; grid-row: auto; }
    .sf-govde .sf-kaydir { max-height: 240px; }
    .sf-panel-harita .harita { height: 260px; }
}

/* ============================================================
   DÜZEN 3b — SIĞDIRMA (2026-09-06; kullanıcı: "içerikler kırık ve bozuk, kutulara
   sığdıralım; müşteride 15; boşluk kalmasın ve kaymasın; ay yazıları küçülsün").
   Hedef ekranlar: 1512×~860 (MacBook 14", sağ kolon 225px) ve 2000×1190.
   İlke: sabit yükseklikli liste YOK — satırlar kartın yüksekliğine yayılır (flex),
   sütun sayısı kart genişliğine göre daralır (container query). Ürün / Müşteri /
   Ülke listeleri KAYDIRMAZ; yalnız Notlar kaydırır. Tablo yerine grid satırları:
   225px'te 4 sütunlu tablo başlığı ve "526, M₺" kırılması bu yüzden kalktı.
   ============================================================ */
.sf-tablo th, .sf-tablo td.sag, .sf-bar-deger, .sf-bar-yoy { white-space: nowrap; }
/* Aylık grafik: yazılar viewBox birimi (640 geniş) → panel genişliğiyle ölçeklenir; 7.5 ≈ 10–14px */
.sf-panel-netsatis .sf-svg-deger { font-size: 7.5px; }
.sf-panel-netsatis .sf-svg-eksen { font-size: 7.5px; }
/* Üst iki kart aynı yükseklik (sıra hizası): kısa ekranda 106px taban, genişte 128px tavan */
.sf-p-marka, .sf-p-pazar { flex: 0 0 clamp(106px, 26%, 128px); container-type: size; }
/* Marka: pay şeridi + lejant */
.sfmk-serit { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: #EFE9DD; gap: 1px; flex: none; margin: 2px 0 6px; }
[data-theme="dark"] .sfmk-serit { background: #2A2620; }
.sfmk-serit i { display: block; height: 100%; min-width: 0; transition: width .4s ease; }
.sfmk-serit i.tik { cursor: pointer; }
.sfmk-serit i.secili { box-shadow: inset 0 0 0 1.5px var(--text-primary); }
.sfmk-lejant { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; overflow: hidden; }
.sfmk-lj { appearance: none; border: 0; background: transparent; text-align: left; font-family: var(--font-body); color: var(--text-primary);
    display: grid; grid-template-columns: 8px minmax(0, 1fr) auto auto auto; gap: 6px; align-items: center;
    padding: 1px 4px; border-radius: 4px; font-size: 10.5px; min-height: 15px; cursor: pointer; }
.sfmk-lj:hover, .sfmk-lj.secili { background: var(--gold-soft); }
.sfmk-lj i { width: 8px; height: 8px; display: inline-block; border-radius: 2px; }
.sfmk-ad { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sfmk-deger { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sfmk-yoy { font-size: 10px; font-weight: 600; min-width: 34px; text-align: right; white-space: nowrap; }
.sfmk-pay { font-family: var(--font-mono); font-size: 9.5px; color: var(--text-dim); min-width: 32px; text-align: right; font-variant-numeric: tabular-nums; }
@container (max-width: 262px) { .sfmk-pay { display: none; } .sfmk-lj { grid-template-columns: 8px minmax(0, 1fr) auto auto; } }
/* Pazar donut: yüksekliğe göre ölçülenir (kesilmez); kart çok kısaysa merkez yazısı gizlenir */
.sf-p-pazar .gd-kap { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-height: 0; height: auto; }
.sf-p-pazar .gd-svg { height: 100%; width: auto; max-height: 96px; aspect-ratio: 1; flex: none; }
.sf-p-pazar .gd-lejant { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; justify-content: space-evenly; gap: 0; overflow: hidden; }
.sf-p-pazar .gd-lj { padding: 1px 4px; grid-template-columns: 8px minmax(0, 1fr) auto auto; gap: 5px; }
.sf-p-pazar .gd-lj-ad { font-size: 10px; } .sf-p-pazar .gd-lj-deger { font-size: 10px; } .sf-p-pazar .gd-lj-pay { font-size: 9px; min-width: 26px; }
/* Liste deseni (Ürün, Ülke): başlık satırı + kartı dolduran satırlar */
.sf-liste-kap { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sf-liste-baslik, .sf-satir { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 0 4px; }
.sf-liste-ulke { grid-template-columns: minmax(0, 1.2fr) auto auto auto; }
.sf-liste-baslik { flex: none; font-size: 10px; font-weight: 600; color: var(--text-dim); padding-bottom: 3px; border-bottom: 1px solid var(--erp-border); white-space: nowrap; }
.sf-liste-baslik .sag { text-align: right; }
.sf-liste { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.sf-satir { flex: 1 1 0; min-height: 14px; font-size: 10.5px; border-radius: 4px; }
.sf-satir + .sf-satir { border-top: 1px solid #F0EBE1; }
[data-theme="dark"] .sf-satir + .sf-satir { border-top-color: #2A2620; }
.sf-satir.tik { cursor: pointer; } .sf-satir.tik:hover, .sf-satir.secili { background: var(--gold-soft); }
.sf-satir.secili { font-weight: 600; }
.sf-satir-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-satir-ad small { color: var(--text-dim); font-size: 9px; margin-left: 3px; font-variant-numeric: tabular-nums; }
.sf-satir-deger { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.sf-satir-yoy { font-size: 10px; font-weight: 600; min-width: 34px; text-align: right; white-space: nowrap; }
.sf-satir-pay { white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.sf-pay-kutu { display: inline-block; width: 34px; height: 5px; border-radius: 3px; background: #EFE9DD; vertical-align: middle; margin-right: 5px; overflow: hidden; }
[data-theme="dark"] .sf-pay-kutu { background: #2A2620; }
.sf-pay-kutu i { display: block; height: 100%; background: var(--gold); border-radius: 3px; }
.sf-panel-harita .harita-kap { align-items: center; justify-content: center; }
/* Kategori: 5 satır kompakt ve sabit (kaydırmaz); Notlar kalan yeri alır — tek kaydıran kart */
/* Düzen 4: Kategori Notlar'ın ÜSTÜNDE, ikisi eşit pay (çizimde 140/140). Kategori
   içeriğinin altına inmez (min-height:auto = içerik), satırları kartı doldurur
   (Müşteri deseni); kalan boşluğu Notlar alır ve yalnız o kaydırır. */
.sf-govde .sf-p-kategori { flex: 1 1 0; min-height: auto; }
.sf-p-kategori .sf-barlar { flex: 1 1 auto; min-height: 0; }
.sf-p-kategori .sf-bar { flex: 1 1 0; }
.sf-p-kategori .sf-barlar { gap: 2px; }
.sf-p-kategori .sf-bar { font-size: 10.5px; padding: 0 4px; gap: 6px; grid-template-columns: minmax(48px, 1fr) 1.3fr auto; min-height: 15px; }
.sf-p-kategori .sf-bar-kanal { height: 7px; }
.sf-p-notlar { flex: 1 1 0; min-height: 0; }
.sf-p-notlar .sf-notlar { font-size: 10.5px; gap: 4px; line-height: 1.35; }
/* Müşteri — İlk 15: satırlar kartı doldurur, kaydırma yok */
.sf-g-musteri .sf-barlar { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 0; overflow: hidden; }
.sf-g-musteri .sf-bar { flex: 1 1 0; min-height: 14px; font-size: 10.5px; padding: 0 4px; gap: 8px; grid-template-columns: minmax(130px, 1.4fr) 1.6fr auto auto; border-radius: 4px; }
.sf-g-musteri .sf-bar + .sf-bar { border-top: 1px solid #F0EBE1; }
[data-theme="dark"] .sf-g-musteri .sf-bar + .sf-bar { border-top-color: #2A2620; }
.sf-g-musteri .sf-bar-kanal { height: 8px; }
.sf-g-musteri .sf-bar-ad small { font-size: 9px; }
.sf-g-musteri .sf-bar-yoy { font-size: 10px; min-width: 42px; }
@media (max-width: 1180px) {
    .sf-p-marka, .sf-p-pazar { flex-basis: auto; container-type: normal; }
    .sf-p-pazar .gd-svg { height: 96px; }
    .sf-liste, .sf-g-musteri .sf-barlar { overflow-y: auto; max-height: 320px; }
    .sf-satir, .sf-g-musteri .sf-bar { flex: none; min-height: 20px; }
}
/* 3b düzeltmeleri (ölçüm 1512×860 / 2000×1190): lejant satır yüksekliği, donut merkez eşiği (container
   sorgusu İÇERİK kutusunu ölçer: 128px kart = 106px içerik), dar kolonda ürün satırı sıkılaştırma */
.sfmk-lj, .sf-p-pazar .gd-lj { line-height: 1.2; }
.sf-p-pazar .gd-merkez { font-size: 15px; }
@container (max-height: 96px) { .sf-p-pazar .gd-merkez, .sf-p-pazar .gd-merkez-alt { display: none; } }
.sf-p-urunler { container-type: inline-size; }
.sf-satir-ad small { margin: 0 3px 0 0; }
@container (max-width: 262px) {
    .sf-p-urunler .sf-satir, .sf-p-urunler .sf-liste-baslik { font-size: 10px; gap: 5px; }
    .sf-p-urunler .sf-satir-yoy { min-width: 30px; }
}
@media (max-width: 1180px) { .sf-p-urunler { container-type: normal; } }
/* Marka lejantı 1512×860'ta 6px taşıyordu (3×15 satır + düğme UA payı): kenar boşluğu sıfır, şerit altı 4px */
.sfmk-lj { margin: 0; min-height: 14px; }
.sfmk-serit { margin: 2px 0 4px; }

/* ============================================================
   RAPOR SAYFALARI 2–10 (2026-09-06): Pano'nun panel dilinde, AKAN (kaydırılan) sayfa.
   Tek ekrana sığma zorunluluğu yok; ızgaralar KPI kolonlarına hizalı 6'lı sistemden
   türetilir (k2 = 3+3, k3 = 2+2+2, k21 = 4+2, k12 = 2+4). Dar ekranda tek kolon.
   ============================================================ */
.sf-rp { display: flex; flex-direction: column; gap: 10px; padding-bottom: 14px; }
.sf-rp .sf-kpiler { margin-bottom: 0; }
.sf-rp-izgara { display: grid; gap: 10px; align-items: stretch; }
.sf-rp-izgara.k2  { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sf-rp-izgara.k3  { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-rp-izgara.k4  { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sf-rp-izgara.k21 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.sf-rp-izgara.k12 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
.sf-rp-izgara.k32 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.sf-rp .sf-panel { display: flex; flex-direction: column; min-width: 0; }
.sf-rp .sf-panel-baslik { flex: none; }
.sf-rp .sf-kaydir { max-height: 330px; }
.sf-rp .sf-kaydir.uzun { max-height: 520px; }
.sf-rp .sf-tablo { font-size: 11.5px; }
.sf-rp .sf-tablo td, .sf-rp .sf-tablo th { padding: 4px 8px 4px 0; }
.sf-rp .sf-tablo td.sag, .sf-rp .sf-tablo th.sag { padding-right: 0; }
.sf-rp .sf-svg { max-height: 260px; }
.sf-rp-not { font-size: 11px; color: var(--text-dim); line-height: 1.45; margin: 4px 0 0; }
.sf-rp-not b { color: var(--text-primary); font-weight: 600; }
.sf-rp-bos { color: var(--text-dim); font-size: 12px; padding: 14px 4px; }
.sf-rp-ozet { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 11.5px; color: var(--text-dim); margin-bottom: 6px; }
.sf-rp-ozet b { color: var(--text-primary); font-weight: 700; font-variant-numeric: tabular-nums; }

/* Rozetler: durum / seviye */
.sf-rozet { display: inline-block; padding: 1px 8px; border-radius: 100px; font-size: 10px; font-weight: 700; letter-spacing: .03em; white-space: nowrap;
    border: 1px solid var(--erp-border-strong); color: var(--text-dim); background: transparent; }
/* STOK DURUM RENKLERİ (CEO 2026-09-11: "bitti ile kritik ayırt edilemiyor, göze batsın"; 2026-09-25: merkezde yoksa
   en yakın kaynak): üç KIRMIZI durum — OUT OF STOCK (hiçbir yerde yok) DOLU kırmızı, YOLDA ve ANTREPO (geliyor)
   kırmızı çerçeve; kritik lacivert-mavi. */
.sf-rozet.stok-yok { border-color: var(--danger); color: #fff; background: var(--danger); font-weight: 700; letter-spacing: .04em; }
.sf-rozet.stok-yolda, .sf-rozet.stok-antrepo { border-color: var(--danger); color: var(--danger-text); background: color-mix(in srgb, var(--danger) 12%, transparent); font-weight: 700; letter-spacing: .04em; }
.sf-rozet.kritik { border-color: #2F6FB5; color: #2F6FB5; background: color-mix(in srgb, #2F6FB5 12%, transparent); }
[data-theme="dark"] .sf-rozet.kritik { border-color: #6FA8E8; color: #8FBEF0; background: color-mix(in srgb, #6FA8E8 16%, transparent); }
@keyframes sf-nabiz { 0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 22%, transparent); } 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--danger) 6%, transparent); } }
/* Merkezde stoğu olmayan satır: sayı kırmızı, satır soluk kırmızı zeminle işaretli */
.sf-stok-yok { color: var(--danger-text); font-weight: 700; }
.sf-tablo tr:has(.sf-rozet.stok-yok) td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
.sf-tablo tr:has(.sf-rozet.stok-yolda, .sf-rozet.stok-antrepo) td { background: color-mix(in srgb, var(--danger) 3.5%, transparent); }
.sf-rozet.dusuk, .sf-rozet.dikkat { border-color: var(--gold); color: var(--gold-text); background: var(--gold-soft); }
.sf-rozet.normal, .sf-rozet.olumlu { border-color: var(--success); color: var(--success-text); background: color-mix(in srgb, var(--success) 10%, transparent); }
.sf-rozet.yuksek, .sf-rozet.takip { border-color: var(--celik); color: var(--celik); background: color-mix(in srgb, var(--celik) 10%, transparent); }
.sf-rozet.hareketsiz { border-style: dashed; }
.sf-gecikmis { color: var(--danger-text); font-weight: 600; }

/* Sinyal kartları (Yönetim Özeti) */
.sf-sinyaller { display: flex; flex-direction: column; gap: 6px; }
.sf-sinyal { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 4px 12px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--erp-border); border-left-width: 4px; background: var(--erp-surface); }
.sf-sinyal.kritik { border-left-color: var(--danger); } .sf-sinyal.dikkat { border-left-color: var(--gold); }
.sf-sinyal.takip { border-left-color: var(--celik); } .sf-sinyal.olumlu { border-left-color: var(--success); }
.sf-sinyal-alan { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; padding-top: 3px; }
.sf-sinyal-baslik { font-family: var(--font-display); font-weight: 700; font-size: 12.5px; }
.sf-sinyal-detay { grid-column: 2; font-size: 11px; color: var(--text-dim); line-height: 1.4; }
.sf-sinyal-aksiyon { grid-column: 2; font-size: 11px; color: var(--gold-text); }
.sf-sinyal-aksiyon::before { content: "→ "; }
.sf-sinyal a { color: var(--gold-text); text-decoration: none; font-size: 10.5px; margin-left: 8px; }
.sf-sinyal a:hover { text-decoration: underline; }
.sf-sayaclar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.sf-sayac { border-radius: 11px; padding: 12px 14px; border: 1px solid var(--erp-border); background: var(--erp-surface); display: flex; flex-direction: column; gap: 2px; border-top-width: 4px; }
.sf-sayac.kritik { border-top-color: var(--danger); } .sf-sayac.dikkat { border-top-color: var(--gold); } .sf-sayac.takip { border-top-color: var(--celik); } .sf-sayac.olumlu { border-top-color: var(--success); }
.sf-sayac b { font-family: var(--font-display); font-weight: 800; font-size: 26px; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sf-sayac span { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }

/* Gelir tablosu */
.sf-gt td:first-child { white-space: normal; }
/* GELİR TABLOSU SAYI KOLONLARI (CEO 2026-09-12: "son kolon kayıyor, okunmuyor"): sayı kolonları
   asla sıkışmaz ve satır atlamaz; yüzde hücresi MONO DEĞİL (mono daha geniş ve tipografi kuralına
   aykırı) — gövde yazısı + hizalı rakam. Başlık ve hücre aynı hizada. */
.sf-gt th.sag, .sf-gt td.sag { white-space: nowrap; }
.sf-gt th:nth-child(2), .sf-gt td:nth-child(2), .sf-gt th:nth-child(3), .sf-gt td:nth-child(3) { min-width: 84px; }
.sf-gt th:nth-child(4), .sf-gt td:nth-child(4) { min-width: 64px; }
.sf-gt th:nth-child(5), .sf-gt td:nth-child(5) { min-width: 56px; }
.sf-gt td.gt-oran { font-family: var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-dim); }
.sf-gt tr.ara td { font-weight: 700; border-top: 1px solid var(--erp-border-strong); background: var(--gold-soft); }
.sf-gt tr.sonuc td { font-weight: 800; border-top: 2px solid var(--erp-kalin-cizgi); border-bottom: 2px double var(--erp-kalin-cizgi); }
.sf-gt tr.gider td.deger { color: var(--text-dim); }
.sf-gt .sf-hesap { font-size: 9.5px; color: var(--text-dim); display: block; }

/* Küçük çoklu grafikler (ülke × ay) */
.sf-mini-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.sf-mini { border: 1px solid var(--erp-border); border-radius: 9px; padding: 6px 8px 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0; cursor: pointer; transition: border-color .2s, box-shadow .2s; }
.sf-mini:hover, .sf-mini.secili { border-color: var(--gold); box-shadow: 0 0 12px -6px var(--gold); }
.sf-mini-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 11px; }
.sf-mini-bas b { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-mini-bas span { font-size: 10px; color: var(--text-dim); white-space: nowrap; }
.sf-mini .sf-svg { max-height: 70px; }
.sf-mini .sf-svg-deger { display: none; }

/* Yığılı yatay şerit (ülke × marka) */
.sf-serit-satir { display: grid; grid-template-columns: minmax(70px, 110px) minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 11px; padding: 2px 4px; border-radius: 5px; }
.sf-serit-satir:hover { background: var(--gold-soft); }
.sf-serit { display: flex; height: 10px; border-radius: 4px; overflow: hidden; background: #EFE9DD; gap: 1px; }
[data-theme="dark"] .sf-serit { background: #2A2620; }
.sf-serit i { display: block; height: 100%; }
.sf-serit-deger { font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.sf-lejant-satir { display: flex; gap: 12px; flex-wrap: wrap; font-size: 10.5px; color: var(--text-dim); margin-top: 6px; }
.sf-lejant-satir i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* Mevsimsellik / hareketli ortalama çizgi grafiği */
.sf-cizgi { fill: none; stroke: var(--gold); stroke-width: 2; }
.sf-cizgi-ma { fill: none; stroke: var(--celik); stroke-width: 1.6; stroke-dasharray: 4 3; }
.sf-cizgi-onceki { fill: none; stroke: #C9BFA4; stroke-width: 1.6; }
.sf-nokta { fill: var(--gold); }
.lj-ma { background: var(--celik); } .lj-kum { background: #C9BFA4; }

/* Yıllık çubuklar (Büyüme & Trend) */
.sf-yil-etiket { font-family: var(--font-body); font-size: 9.5px; fill: var(--text-dim); }

@media (max-width: 1400px) { .sf-mini-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1180px) {
    .sf-rp-izgara.k2, .sf-rp-izgara.k3, .sf-rp-izgara.k4, .sf-rp-izgara.k21, .sf-rp-izgara.k12, .sf-rp-izgara.k32 { grid-template-columns: 1fr; }
    .sf-sayaclar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sf-mini-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================
   SIĞDIRMA — RAPOR SAYFALARI TEK EKRAN (kullanıcı 2026-09-07: "CEO aşağı kaydırmak
   istemiyor, tek bakışta görsün; grafik aralarında boşluk çok"). Pano ile aynı ilke:
   gövde kalan yüksekliği doldurur (6 KPI kolonuna hizalı 2 satırlı ızgara), uzun
   listeler KART İÇİNDE kayar, grafikler karta göre ölçeklenir. Dar ekranda (≤1180)
   tek kolona düşer ve sayfa normal kayar.
   ============================================================ */
.sf-rp.sig { height: calc(100dvh - 16px); min-height: 0; gap: 6px; padding-bottom: 0; }
.sf-rp.sig .sf-kpiler { flex: none; gap: 8px; }
.sf-rp.sig .sf-kpi { padding: 7px 10px; grid-template-columns: 32px 1fr; gap: 8px; }
.sf-rp.sig .sf-kpi-yuvar { width: 32px; height: 32px; } .sf-rp.sig .sf-kpi-yuvar svg { width: 15px; height: 15px; }
.sf-rp.sig .sf-kpi-deger { font-size: 19px; } .sf-rp.sig .sf-kpi-ad { font-size: 10.5px; } .sf-rp.sig .sf-kpi-fark { font-size: 10.5px; margin-top: 0; }
.sf-rp.sig .sf-kpi-alt, .sf-rp.sig .sf-kpi-gecen, .sf-rp.sig .sf-kpi-onceki { font-size: 9.5px; }
.sf-rp.sig .fcb { margin-bottom: 0; }
.sf-rp.sig .sf-uyari { font-size: 11px; padding: 8px 10px; }
.sf-rp-govde { flex: 1 1 auto; min-height: 0; display: grid; gap: 6px 8px;
    grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); }
.sf-rp-govde.ust-buyuk { grid-template-rows: minmax(0, 1.2fr) minmax(0, 1fr); }
.sf-rp-govde.alt-buyuk { grid-template-rows: minmax(0, 1fr) minmax(0, 1.25fr); }
.sf-rp-govde.tek { grid-template-rows: minmax(0, 1fr); }
.sf-rp-govde > .sf-panel, .sf-rp-govde .sf-yigin > .sf-panel { min-height: 0; min-width: 0; display: flex; flex-direction: column; overflow: hidden; padding: 6px 9px 7px; border-radius: 10px; }
.sf-rp-govde .sf-panel-baslik { flex: none; margin-bottom: 3px; }
.sf-rp-govde .sf-panel-baslik > span:first-child { font-size: 12px; }
.sf-rp-govde .sf-yigin { display: flex; flex-direction: column; gap: 6px; min-height: 0; min-width: 0; }
.sf-rp-govde .sf-yigin > .sf-panel { flex: 1 1 0; }
/* Yığında 2-3 satırlık küçük panel (altı aylık "Kanal") boyunu içeriğinden alır; kalan yüksekliği
   uzun liste (ürün grupları) kullanır — eşit bölünürse kanal paneli yarı boş kalıyordu. */
.sf-rp-govde .sf-yigin > .sf-panel.sf-kisa { flex: 0 0 auto; }
.sf-rp-govde .sf-kaydir { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; overflow-x: hidden; padding-right: 3px; }
.sf-rp-govde .sf-kaydir .sf-tablo thead th { position: sticky; top: 0; background: var(--erp-surface); z-index: 1; }
.sf-rp-govde .sf-grafik-kap { flex: 1 1 auto; min-height: 0; display: flex; align-items: stretch; justify-content: center;
    overflow: hidden; }   /* grafik kutusundan TAŞIP alttaki şeridin üstüne binmesin — aşağıdaki nota bak */
/* GRAFİK TAŞMA TUZAĞI (tablette görüldü, 2026-09-12: "aylık satınalma grafiği üst üste binmiş"):
   .sfcg'nin taban yüksekliği (--sfcg-min, Satınalma'da H=220) ızgara satırının verdiği kutudan
   BÜYÜK olduğunda grafik .sf-grafik-kap'ın dışına taşıyor ve altındaki tedarik zinciri şeridinin
   ÜSTÜNE biniyordu. Ölçüm (headless Chrome, aynı sayfa): 1194x700 → 139px, 1194x768 → 109px,
   1194x834 → 79px, 1366x768 → 109px taşma; CEO'nun 1512x860'ında bile 24px, 1600x900'de 6px vardı
   (orada gözden kaçacak kadar küçüktü). Safari'de üst araç çubuğu/sekme açılınca viewport KISALDIĞI
   için aynı hata orada da çıkıyor — sorun genişlik değil YÜKSEKLİK. Rapor gövdesinde satır yüksekliği
   kesin olduğu için tabana gerek yok: grafik kutusunu doldurur. Yüksekliğin BELİRSİZ kaldığı iki yerde
   (serbest gövde, ≤1180px tek kolon) taban KORUNUR — yoksa grafik sıfıra çöker (.sf-yigin dersi). */
.sf-rp-govde:not(.serbest) .sf-grafik-kap > .sfcg { min-height: 0; }
.sf-rp-govde .sf-grafik-kap .sf-svg { width: 100%; height: 100%; max-height: none; }
.sf-rp-govde .sf-tablo { font-size: 10.5px; }
.sf-rp-govde .sf-tablo td, .sf-rp-govde .sf-tablo th { padding: 2px 6px 2px 0; }
.sf-rp-govde .sf-tablo th { font-size: 9.5px; padding-bottom: 3px; }
.sf-rp-govde .sf-barlar { gap: 2px; }
.sf-rp-govde .sf-bar { font-size: 10.5px; padding: 0 3px; min-height: 17px; gap: 6px; }
.sf-rp-govde .sf-bar-kanal { height: 8px; }
.sf-rp-govde .sf-bar-yoy { font-size: 9.5px; min-width: 42px; }
.sf-rp-govde .sf-satir { font-size: 10.5px; min-height: 17px; }
.sf-rp-govde .sf-liste-baslik { font-size: 9.5px; }
.sf-rp-govde .sf-rp-not { font-size: 9.5px; margin: 3px 0 0; flex: none; }
.sf-rp-govde .sf-rp-ozet { font-size: 10px; gap: 3px 10px; margin: 2px 0 3px; flex: none; }
.sf-rp-govde .sf-rp-bos { font-size: 11px; padding: 8px 2px; }
.sf-rp-govde .gd-kap { grid-template-columns: 92px 1fr; gap: 8px; } .sf-rp-govde .gd-svg { width: 92px; height: 92px; }
.sf-rp-govde .gd-lj { font-size: 10px; padding: 1px 3px; }
.sf-rp-govde .sf-notlar { font-size: 10.5px; gap: 3px; }
.sf-rp-govde .sf-mini-izgara { flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 6px; }
.sf-rp-govde .sf-mini { min-height: 0; padding: 4px 7px 2px; display: flex; flex-direction: column; }
.sf-rp-govde .sf-mini .sf-grafik-kap { flex: 1 1 auto; min-height: 0; }
.sf-rp-govde .sf-mini .sf-svg { max-height: none; }
.sf-rp-govde .sf-mini .sf-svg-deger { display: none; }
.sf-rp-govde .sf-mini-bas { font-size: 10.5px; }
.sf-rp-govde .sf-serit { height: 8px; }
.sf-rp-govde .sf-ikili { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; flex: 1 1 auto; min-height: 0; }
.sf-rp-govde .sf-ikili > div { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.sf-rp-govde .sf-ikili .sf-alt-baslik { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 2px 0 3px; flex: none; }
.sf-rp-govde .sf-ikili .sf-kaydir { flex: 1 1 auto; }
.sf-rp-govde .sf-harita-kap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; }
.sf-rp-govde .sf-harita-kap .harita-kap { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
.sf-rp-govde .sf-harita-kap .harita { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; }
/* Yönetim Özeti — kompakt sayaç ve sinyal satırları (kullanıcı: kartlar/satırlar arası boşluk çok) */
.sf-rp.sig .sf-sayaclar { flex: none; gap: 8px; }
.sf-rp.sig .sf-sayac { flex-direction: row; align-items: baseline; gap: 10px; padding: 7px 12px; border-top-width: 3px; }
.sf-rp.sig .sf-sayac b { font-size: 20px; } .sf-rp.sig .sf-sayac span { font-size: 10px; }
.sf-rp.sig .sf-sinyaller { gap: 3px; }
/* İki satır: [rozet+alan] [başlık … sayfa →] / [detay · → aksiyon] — tek satırlık, taşarsa … (tam metin fareyle) */
.sf-rp.sig .sf-sinyal { grid-template-columns: 118px minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 10px; padding: 3px 9px; border-left-width: 3px; align-items: center; cursor: pointer; transition: background .15s, border-color .15s; }
.sf-rp.sig .sf-sinyal:hover { background: var(--gold-soft); }
.sf-rp.sig .sf-sinyal-alan { grid-row: 1 / 3; padding-top: 0; font-size: 9px; letter-spacing: .08em; display: flex; align-items: center; gap: 6px; }
.sf-rp.sig .sf-sinyal-alan .sf-rozet { display: inline-block; margin: 0; }
.sf-rp.sig .sf-sinyal-baslik { grid-column: 2; grid-row: 1; font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-rp.sig .sf-sinyal-git { grid-column: 3; grid-row: 1 / 3; justify-self: end; font-size: 10px; color: var(--gold-text); white-space: nowrap; }
.sf-rp.sig .sf-sinyal-detay { grid-column: 2; grid-row: 2; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 8px; min-width: 0; }
.sf-rp.sig .sf-sinyal-detay > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-rp.sig .sf-sinyal-aksiyon { display: inline; color: var(--gold-text); flex: none; max-width: 48%; overflow: hidden; text-overflow: ellipsis; }
/* Kolon / satır yerleşim sınıfları (6 KPI kolonuyla hizalı) */
.g-1 { grid-column: 1; } .g-2 { grid-column: 2; } .g-3 { grid-column: 3; } .g-4 { grid-column: 4; } .g-5 { grid-column: 5; } .g-6 { grid-column: 6; }
.g-1-2 { grid-column: 1 / 3; } .g-1-3 { grid-column: 1 / 4; } .g-1-4 { grid-column: 1 / 5; } .g-1-6 { grid-column: 1 / 7; }
.g-2-3 { grid-column: 2 / 4; } .g-3-4 { grid-column: 3 / 5; } .g-3-6 { grid-column: 3 / 7; } .g-3-5 { grid-column: 3 / 6; }
.g-4-5 { grid-column: 4 / 6; } .g-4-6 { grid-column: 4 / 7; } .g-5-6 { grid-column: 5 / 7; }
.r-1 { grid-row: 1; } .r-2 { grid-row: 2; } .r-1-2 { grid-row: 1 / 3; }
@media (max-width: 1180px) {
    .sf-rp.sig { height: auto; }
    .sf-rp-govde, .sf-rp-govde.ust-buyuk, .sf-rp-govde.alt-buyuk, .sf-rp-govde.tek { grid-template-columns: 1fr; grid-template-rows: none; }
    .sf-rp-govde > * { grid-column: 1 !important; grid-row: auto !important; }
    /* Izgara satırı kalmayınca yığın kendi yüksekliğini içerikten alır: flex-basis 0 + grow 1
       olan panel SIFIRA çöküyordu (altı aylık "Ürün Grupları" 15px kalıp barları kırpıldı). */
    .sf-rp-govde .sf-yigin > .sf-panel { flex: 0 0 auto; }
    .sf-rp-govde .sf-sat-sag > .sf-panel { flex: 0 0 auto; }   /* aynı ders: ızgara satırı yokken çökmesin */
    .sf-rp-govde .sf-kaydir { max-height: 260px; }
    .sf-rp-govde .sf-grafik-kap .sf-svg { height: auto; max-height: 240px; }
    /* Tek kolonda ızgara satırı yok → kutu yüksekliği içerikten gelir; taban geri gelmezse grafik çöker. */
    .sf-rp-govde .sf-grafik-kap { overflow: visible; }
    .sf-rp-govde:not(.serbest) .sf-grafik-kap > .sfcg { min-height: var(--sfcg-min, 120px); }
    .sf-rp-govde .sf-mini-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Ülke & Bölge — mini grafik büyüt düğmesi + ülke popup'ı (kullanıcı 2026-09-07) */
/* Panel başlığındaki büyüteç (CEO 2026-09-16: "tıklayınca açılır sayfa olduğu anlaşılmıyor") */
.sf-buyut-sag { margin-left: auto; order: 9; }
.sf-buyut-kose { position: absolute; top: 6px; right: 6px; z-index: 3; width: 20px; height: 20px; border-radius: 6px;
    opacity: .45; pointer-events: none; }
.ims-mini-tik { position: relative; }
.ims-mini-tik:hover .sf-buyut-kose { opacity: 1; color: var(--gold-text); border-color: var(--gold); }
.sf-buyut-mini { width: 16px; height: 16px; border-radius: 4px; margin-left: 5px; vertical-align: -3px; color: var(--text-dim); border-color: var(--erp-border); }
.sf-buyut-mini:hover { color: var(--gold-text); border-color: var(--gold); }
.sf-mini:hover .sf-buyut-mini { border-color: var(--gold); }
.hp-ulke { width: min(1240px, 94vw); height: min(640px, 88vh); }
.hp-ulke-govde { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.hp-grafik { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 0; }
.hp-grafik .sf-svg { width: 100%; height: auto; max-height: 100%; }
.hp-tablo-kap { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.hp-tablo-kap .sf-tablo thead th { position: sticky; top: 0; background: var(--erp-surface); z-index: 1; }
.hp-tablo-kap .sf-tablo { font-size: 11px; }
.hp-tablo-kap tr.hp-soluk td { opacity: .45; }
.hp-filtre-dugme { cursor: pointer; }
.hp-filtre-dugme:hover { background: var(--gold); color: var(--murekkep); }
.hp-ulke .hp-kpi b { font-size: 16px; }
@media (max-width: 1180px) { .hp-ulke-govde { grid-template-columns: 1fr; } }

/* ============================================================
   CEO TURU (2026-09-09) — sabit kanat, kolon aralıkları, bölge hiyerarşisi, müşteri anahtarı, gelir tablosu ağacı
   ============================================================ */
/* SABİT KANAT: fareyle tablonun üstüne açılan eğik menü kaldırıldı; menü her zaman açık ve sabit, içerik onun
   sağında (kayma yok). Efektler kalır: altın kenar çizgisi nefes alır, ışık boncuğu periyodik akar, logo nabzı. */
:root { --kanat-ray: 228px; --kanat-ust: 228px; }
.kanat, .kanat:hover, .kanat.acik { width: var(--kanat-ust); transition: none; }
.kanat-govde, .kanat:hover .kanat-govde, .kanat.acik .kanat-govde { clip-path: none; background: var(--murekkep); transition: none; }
.kanat-govde::after, .kanat:hover .kanat-govde::after { opacity: 1;
    background: linear-gradient(90deg, transparent 72%, rgba(201,168,76,.05) 88%, rgba(228,200,122,.18) 97%, rgba(255,243,207,.45) 100%); }
.kanat-ic { width: var(--kanat-ust); }
.kanat .ad, .kanat:hover .ad, .kanat.acik .ad { opacity: 1; transform: none; transition: none; }
.kanat-kenar, .kanat:hover .kanat-kenar, .kanat.acik .kanat-kenar { transform: none; opacity: 1; height: 100vh; height: 100dvh; transition: none;
    animation: kilic-nefes 3.2s ease-in-out 1.1s infinite; }
.kanat-isik, .kanat:hover .kanat-isik, .kanat.acik .kanat-isik, .kanat:not(:hover):not(.acik) .kanat-isik { animation: kilic-tur 9s cubic-bezier(.2,.7,.2,1) 1.2s infinite; }
@keyframes kilic-tur { 0% { top: -130px; opacity: 0 } 2% { opacity: 1 } 16% { top: 100%; opacity: 1 } 17% { opacity: 0 } 100% { top: 100%; opacity: 0 } }
.kanat-logo-img, .kanat:hover .kanat-logo-img, .kanat.acik .kanat-logo-img { height: 56px; transition: none; }
.kanat-ipucu { display: none; }
.kanat-menu { margin-top: 10px; }
.kanat-oge { font-size: 12.5px; height: 34px; }
.kanat-ikon { height: 34px; }
.kanat-ad { overflow: hidden; text-overflow: ellipsis; }
.kanat-alt { width: calc(100% - 14px); gap: 10px; }
.kanat-slogan { padding-right: 10px; }
.kanat-slogan span:nth-child(2), .kanat-slogan i { padding-right: 0; }
.kanat-slogan::after { margin: 6px 0 0 0; width: 150px; }
.kanat-kimlik-meta i { max-width: 160px; }
.kanat-cikis { align-self: flex-start; margin-left: 0; }
@media (max-width: 1000px) {
    :root { --kanat-ray: 56px; --kanat-ust: 56px; }
    .kanat .ad, .kanat-selam, .kanat-alt, .kanat-bolum { display: none; }
    .kanat-logo-img, .kanat:hover .kanat-logo-img { height: 22px; }
}
@media (prefers-reduced-motion: reduce) { .kanat-kenar, .kanat-isik { animation: none !important; } }

/* KOLON ARALIKLARI (CEO: "Açık sipariş ile Durum yapışmış", "kolonlar kaymış"): her hücreye iki yandan
   5px, ilk/son hücre kenara yaslı; geniş tablo kart içinde YANA kayar, kesilmez. */
.sf-tablo th, .sf-tablo td, .sf-rp .sf-tablo th, .sf-rp .sf-tablo td { padding-left: 5px; padding-right: 5px; }
.sf-tablo .sag, .sf-rp .sf-tablo td.sag, .sf-rp .sf-tablo th.sag { padding-right: 5px; }
.sf-tablo th:first-child, .sf-tablo td:first-child, .sf-rp .sf-tablo th:first-child, .sf-rp .sf-tablo td:first-child { padding-left: 0; }
.sf-tablo th:last-child, .sf-tablo td:last-child, .sf-rp .sf-tablo th:last-child, .sf-rp .sf-tablo td:last-child { padding-right: 0; }
.sf-kaydir { overflow-x: auto; }
.sf-rp .sf-tablo .sf-urun { max-width: min(220px, 22vw); }
.sf-rp .sf-tablo th { white-space: nowrap; }

/* BÖLGE HİYERARŞİSİ: bölge toplamı vurgulu, ülkeler girintili */
.sf-satir.sf-bolge, tr.sf-bolge td { font-weight: 700; }
.sf-satir.sf-bolge { background: var(--gold-soft); }
tr.sf-bolge td { background: var(--gold-soft); }
.sf-satir.sf-bolge .sf-satir-ad small { font-weight: 500; }
.sf-satir.sf-ulke-alt .sf-satir-ad { padding-left: 14px; }
.sf-satir.sf-ulke-alt .sf-satir-ad::before, tr.sf-ulke-alt td:first-child::before { content: "└ "; color: var(--text-dim); font-size: 9px; }
tr.sf-ulke-alt td:first-child { padding-left: 14px !important; }

/* MİNİ ANAHTAR (Şube | Ana firma · Özet | Tüm hesaplar) — panel başlığının sağında */
.sf-mini-tgl { display: inline-flex; align-items: center; border: 1px solid var(--erp-border); border-radius: 999px; overflow: hidden; margin-left: auto; flex: none; vertical-align: middle; }
.sf-liste-baslik .sf-mini-tgl { margin-left: 8px; }
.sf-mini-tgl button { appearance: none; border: 0; background: transparent; color: var(--text-dim); font: inherit; font-size: 9.5px; font-weight: 600; letter-spacing: .03em; line-height: 1; padding: 3px 8px; cursor: pointer; text-transform: none; }
.sf-mini-tgl button.on { background: var(--gold); color: var(--murekkep); }
.sf-mini-tgl button:hover:not(.on) { color: var(--text-primary); }

/* GELİR TABLOSU AĞACI (CEO hesap planı) */
.sf-gt tr.sv-1 td { font-weight: 600; }
.sf-gt tr.sv-1 td:first-child { padding-left: 0; }
.sf-gt tr.sv-2 td { font-weight: 500; }
.sf-gt tr.sv-2 td:first-child { padding-left: 16px !important; }
.sf-gt tr.sv-3 td { font-size: 10px; color: var(--text-dim); }
.sf-gt tr.sv-3 td:first-child { padding-left: 34px !important; }
.sf-gt tr.sv-3 td.deger { color: var(--text-primary); }
.sf-gt tr.ara td, .sf-gt tr.sonuc td { font-weight: 800; border-top: 1px solid var(--erp-kalin-cizgi); background: var(--gold-soft); }
.sf-gt .gt-ok { display: inline-block; width: 11px; font-style: normal; color: var(--gold-text); transition: transform .15s; margin-right: 1px; }
.sf-gt .gt-ok.acik { transform: rotate(90deg); }
.sf-gt tr.tik { cursor: pointer; }
.sf-gt tr.esl td:first-child { color: var(--gold-text); }
.sf-gt .sf-hesap { margin-left: 6px; }

/* ============================================================
   HİZA TURU (2026-09-09, CEO ekran görüntüleri): satır ızgaralarında SABİT değer kolonları
   ============================================================ */
/* Çubuk satırları: her satır kendi ızgarası → "auto" kolonlar satırdan satıra kayıyordu, 3 kolonlu ızgarada
   yüzde alt satıra düşüyordu. Artık ad | çubuk | değer (sabit) | yüzde (sabit). */
.sf-bar, .sf-barlar-sik .sf-bar, .sf-g-musteri .sf-bar, .sf-rp-govde .sf-bar {
    grid-template-columns: minmax(0, 1fr) minmax(30px, 1.6fr) var(--b-deger, 84px) var(--b-yoy, 52px); gap: 8px; }
.sf-bar-deger { text-align: right; }
.sf-bar-yoy { min-width: 0; text-align: right; }
.sf-p-kategori .sf-bar, .sf-g-musteri .sf-bar { --b-deger: 78px; --b-yoy: 50px; }
/* Liste satırları: ad | değer (sabit) | yoy (sabit); ülke listesi: ad | değer | pay | yoy */
.sf-liste-baslik, .sf-satir { grid-template-columns: minmax(0, 1fr) var(--s-deger, 84px) var(--s-yoy, 52px); }
.sf-liste-ulke, .sf-liste-baslik.sf-liste-ulke { grid-template-columns: minmax(0, 1fr) var(--s-deger, 80px) 92px var(--s-yoy, 52px); }
.sf-satir-deger, .sf-satir-yoy, .sf-satir-pay { text-align: right; }
.sf-satir-yoy { min-width: 0; }
.sf-yasam { --s-yoy: 82px; }          /* "Haziran 2026" tarih etiketi */
/* Ürün kodu her satırda, sabit genişlikte → adlar aynı hizadan başlar */
.sf-kod-on { display: inline-block; min-width: 42px; margin-right: 4px; font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-dim); font-variant-numeric: tabular-nums; }
/* Tablo hücresinde ad + küçük etiket bitişik kalmasın */
.sf-tablo td > .sf-kod, .sf-tablo td > small { margin-left: 5px; }   /* :first-child KULLANILMAZ — önündeki metin düğümü sayılmaz, boşluk kaybolurdu */
/* Öne Çıkan Notlar: parlak, dikkat çeken çerçeve (CEO) */
.sf-panel-notlar { border: 1.5px solid var(--gold) !important; animation: not-parla 3.4s ease-in-out infinite; }
.sf-panel-notlar .sf-panel-baslik > span:first-child { color: var(--gold-text); font-weight: 700; }
@keyframes not-parla { 0%, 100% { box-shadow: 0 0 0 1px rgba(201,168,76,.25), 0 0 14px -6px rgba(201,168,76,.55); } 50% { box-shadow: 0 0 0 2px rgba(228,200,122,.6), 0 0 26px -3px rgba(228,200,122,.95); } }
@media (prefers-reduced-motion: reduce) { .sf-panel-notlar { animation: none; box-shadow: 0 0 0 2px rgba(228,200,122,.5); } }
/* Yığın listeler (Yükselen üstte, Düşen altta) — iki dar kolon yerine tam genişlik, adlar okunur */
.sf-rp-govde .sf-yigin-liste { display: flex; flex-direction: column; gap: 4px; flex: 1 1 auto; min-height: 0; }
.sf-rp-govde .sf-yigin-liste > div { display: flex; flex-direction: column; min-height: 0; flex: 1 1 0; }
.sf-rp-govde .sf-yigin-liste .sf-alt-baslik { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 2px 0 3px; flex: none; }
.sf-rp-govde .sf-yigin-liste .sf-kaydir { flex: 1 1 auto; }
/* Donut lejantı: ad | değer | pay hizalı */
.gd-lj { display: grid !important; grid-template-columns: 9px minmax(0, 1fr) 66px 36px; gap: 6px; align-items: center; text-align: left; width: 100%; }
.gd-lj-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gd-lj-deger, .gd-lj-pay { text-align: right; font-variant-numeric: tabular-nums; }
.gd-lj-pay { color: var(--text-dim); }
/* Tablo panelinin içinde takvim/marka şeridi (ayrı boş panel yerine) */
.sf-rp-govde .sf-serit-takvim { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 14px; font-size: 10.5px; color: var(--text-dim); margin: 3px 0 5px; flex: none; }
.sf-rp-govde .sf-serit-takvim b { color: var(--text-primary); font-variant-numeric: tabular-nums; font-weight: 700; }
.sf-rp-govde .sf-serit-takvim .sf-gecikmis, .sf-rp-govde .sf-serit-takvim .sf-gecikmis b { color: var(--danger-text); }
.sf-rp-govde .sf-serit-takvim > span:first-child { font-weight: 600; }
/* Panel içinde alt bölüm başlığı */
.sf-rp-govde .sf-alt-baslik { font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-dim); margin: 4px 0 3px; flex: none; }
/* Dar ülke listesi (pano, harita yanı): ad kolonu kesilmesin → değer/pay/yoy daha dar, pay çubuğu kısa */
.sf-liste-ulke, .sf-liste-baslik.sf-liste-ulke { grid-template-columns: minmax(0, 1fr) 70px 64px 48px; gap: 5px; }
.sf-liste-ulke .sf-pay-kutu { width: 24px; }
/* Pano müşteri çubukları: ad kolonuna daha çok yer (Kiril ve uzun şube adları) */
.sf-g-musteri .sf-bar { grid-template-columns: minmax(0, 1.7fr) minmax(24px, 1fr) 76px 50px; gap: 6px; }
/* Tek kolonluk dar paneller (g-3 / g-4): donut lejantı altta, çubuk değer kolonları dar */
.sf-rp-govde .g-3 .gd-kap, .sf-rp-govde .g-4 .gd-kap { grid-template-columns: 1fr; gap: 4px; justify-items: stretch; }
.sf-rp-govde .g-3 .gd-svg, .sf-rp-govde .g-4 .gd-svg { width: 96px; height: 96px; justify-self: center; }
.sf-rp-govde .g-3 .sf-bar, .sf-rp-govde .g-4 .sf-bar { --b-deger: 70px; --b-yoy: 46px; gap: 5px; }
.sf-rp-govde .g-3 .sf-satir, .sf-rp-govde .g-3 .sf-liste-baslik, .sf-rp-govde .g-4 .sf-satir, .sf-rp-govde .g-4 .sf-liste-baslik { --s-deger: 72px; --s-yoy: 48px; gap: 5px; }
/* Rapor sayfalarında çubuk satırı: ad kolonu çubuktan daha geniş (adlar okunsun) */
.sf-rp-govde .sf-bar { grid-template-columns: minmax(0, 1.5fr) minmax(24px, 1fr) var(--b-deger, 84px) var(--b-yoy, 52px); }
.sf-rp-govde .g-3 .sf-bar, .sf-rp-govde .g-4 .sf-bar { grid-template-columns: minmax(0, 1.4fr) minmax(20px, 1fr) var(--b-deger, 70px) var(--b-yoy, 46px); }
.sf-g-musteri .sf-bar { grid-template-columns: minmax(0, 1.9fr) minmax(20px, .8fr) 76px 50px; }
/* Yığın listelerde bölümler arasında belirgin ayırıcı (CEO: "arada bir çizgi olmalı") */
.sf-rp-govde .sf-yigin-liste > div + div { border-top: 2px solid var(--erp-border-strong); margin-top: 6px; padding-top: 4px; }
/* Tablo kod hücreleri (fiş no, tarih) tek satır — satır yüksekliği bozulmasın */
.sf-tablo td.sf-kod, .sf-tablo td.sf-gecikmis { white-space: nowrap; }
/* Gelir tablosu sıralanabilir başlıklar */
/* Pano ilk 10 ürün (dar kolon): değer/yoy dar, kod kolonu dar → ürün adına daha çok yer */
.sf-p-urunler .sf-satir, .sf-p-urunler .sf-liste-baslik { --s-deger: 70px; --s-yoy: 46px; gap: 5px; }
.sf-p-urunler .sf-kod-on { min-width: 34px; margin-right: 3px; }
/* Filtre üst satırı (CEO 2026-09-09): TEMİZLE · GÜNCELLE · son veri · tema HER ZAMAN sağ üstte kalır;
   dönem/yıl/ay anahtarları sığmazsa kendi alanında sarar, eylem grubu alt satıra inmez. */
.fcb-ust { flex-wrap: nowrap; align-items: flex-start; }
.fcb-anahtarlar { flex: 1 1 auto; min-width: 0; }
.fcb-sag { flex: none; margin-left: auto; }

/* ============================================================
   SIRALAMA (CEO 2026-09-09): her tablo başlığına tıkla → o kolona göre sırala, tekrar → yön. Tüm sayfalar.
   Sınıflar TabloSira.Sinif'ten: .sf-sira (tıklanabilir) + .artan / .azalan (aktif). Ok işareti ::after ile;
   yalnız aktif başlık ~8px genişler, satır ızgaraları etkilenmez (hiza kuralı). Gelir tablosu da aynı sınıfları kullanır.
   ============================================================ */
.sf-tablo th.sf-sira, .sf-liste-baslik .sf-sira { cursor: pointer; user-select: none; }
.sf-tablo th.sf-sira:hover, .sf-liste-baslik .sf-sira:hover,
.sf-tablo th.sf-sira.artan, .sf-tablo th.sf-sira.azalan, .sf-liste-baslik .sf-sira.artan, .sf-liste-baslik .sf-sira.azalan { color: var(--gold-text); }
.sf-sira.artan::after, .sf-sira.azalan::after { display: inline-block; margin-left: 2px; font-size: 8px; line-height: 1; vertical-align: 1px; }
.sf-sira.artan::after { content: "▲"; }
.sf-sira.azalan::after { content: "▼"; }
.sf-tablo th.sf-sira:not(.artan):not(.azalan):hover::after { content: "⇅"; display: inline-block; margin-left: 2px; font-size: 9px; line-height: 1; opacity: .6; }

/* NOT AKIŞI (CEO 2026-09-09): Öne Çıkan Notlar haber bandı gibi yukarı akar (iki kopya, kesintisiz döngü);
   fare üstündeyken durur; nota tıkla → ilgili sayfa o ülke/marka odaklı açılır (Sinyal → Odakla). */
.sf-not-akis { flex: 1 1 auto; min-height: 0; overflow: hidden; position: relative; }
.sf-not-akis .sf-not-serit { animation: not-akis var(--not-sure, 24s) linear infinite; will-change: transform; }
.sf-not-akis:hover .sf-not-serit, .sf-not-akis:focus-within .sf-not-serit { animation-play-state: paused; }
.sf-not-akis .sf-notlar { padding-bottom: 8px; gap: 5px; }
.sf-not-akis .sf-notlar li { line-height: 1.3; }
@keyframes not-akis { from { transform: translateY(0); } to { transform: translateY(-50%); } }
.sf-notlar li.tik { cursor: pointer; border-radius: 4px; padding-right: 4px; transition: background .12s; }
.sf-notlar li.tik:hover { background: var(--gold-soft); color: var(--gold-text); }
.sf-notlar li .sf-not-git { display: inline; font-size: 9px; color: var(--text-dim); margin-left: 5px; letter-spacing: .02em; white-space: nowrap; }   /* satır sonunda, ayrı satır değil (dar bant) */
.sf-notlar li.tik:hover .sf-not-git { color: var(--gold-text); }
@media (prefers-reduced-motion: reduce) { .sf-not-akis { overflow-y: auto; } .sf-not-akis .sf-not-serit { animation: none; } .sf-not-akis .sf-not-kopya { display: none; } }

/* Açık alım siparişi durumu (CEO kuralı): yolda (OK'siz fiş) · antrepo (fiş "-OK") */
.sf-rozet.antrepo { border-color: var(--celik); color: var(--celik); background: color-mix(in srgb, var(--celik) 10%, transparent); }
.sf-rozet.yolda { border-color: var(--gold); color: var(--gold-text); background: var(--gold-soft); }
.sf-tablo td.sf-antrepo { color: var(--celik); font-weight: 600; white-space: nowrap; }

/* ============================================================
   MOBİL — telefon (≤700px). CEO isteği 2026-09-09: "fi telefon için responsive olmalı".
   İlke: TEK EKRAN kuralı burada GEÇERSİZ (telefonda dikey kaydırma doğaldır), ama YATAY
   kaydırma olmaz — taşan her kap tek kolona iner, geniş tablolar yalnız kendi `.sf-kaydir`
   kabında kayar. (2026-09-29: 44px ikon rayı KALKTI — CEO "neyin ne menüsü olduğunu anlamıyorum";
   yerine üst çubuk + açılır çekmece, dosya sonundaki "TELEFON — MENÜ + OKUNURLUK" bloğu.)
   Masaüstü ölçüleri bu bloktan etkilenmez.
   ============================================================ */
@media (max-width: 700px) {
    :root { --kanat-ray: 44px; --kanat-ust: 44px; }
    .kanat-oge { justify-content: center; padding-left: 0; padding-right: 0; }
    .sf-main { padding: 8px 10px 16px 10px; overflow-x: hidden; }

    /* Tek ekran zorlaması kalkar: içerik boyunca dikey kaydırma */
    .sf-rp.sig, .sf-rp, .sf-govde, .sf-rp-govde { height: auto; min-height: 0; overflow: visible; }
    .sf-main-pano { overflow-y: auto !important; }

    /* Başlık */
    .sf-baslik h1 { font-size: 16px; }
    .sf-alt { font-size: 11px; }
    .sf-baslik-grup { gap: 6px; }

    /* Filtre şeridi: her şey sarar, eylemler kendi satırında ve tam genişlikte */
    .fcb-ust { flex-wrap: wrap; }
    .fcb-anahtarlar { width: 100%; flex-wrap: wrap; }
    .fcb-sag { width: 100%; margin-left: 0; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
    .fcb-yenile-kutu { flex-wrap: wrap; }
    .fcb-boyutlar { flex-wrap: wrap; }
    .fcb-boyutlar select, .fcb-boyutlar .fcb-sec { flex: 1 1 46%; max-width: none; min-width: 0; }
    .fcb-filtre-bandi { flex-wrap: wrap; width: 100%; }
    .fcb-aylar { flex-wrap: wrap; }
    .sf-meta, .sf-meta > * { flex-wrap: wrap; max-width: 100%; }

    /* KPI: iki sütun (üç sütunda rakam okunmuyordu) */
    .sf-kpiler { grid-template-columns: 1fr 1fr !important; gap: 6px; }
    .sf-kpi { min-height: 0; }

    /* Panel ızgaraları → tek kolon; yerleşim sınıfları (g-1-3, r-2, sütunlar) düzleşir */
    .sf-govde, .sf-rp-govde { display: flex !important; flex-direction: column; gap: 8px; }
    .sf-govde > *, .sf-rp-govde > *, .sf-sutun > * { width: 100%; max-width: 100%; flex: 0 0 auto; }
    .sf-sutun { display: flex; flex-direction: column; gap: 8px; width: 100%; }
    .sf-izgara-1, .sf-izgara-2, .sf-izgara-3 { grid-template-columns: 1fr; }
    .sf-mini-izgara { grid-template-columns: 1fr 1fr; }
    .sf-ikili, .sf-yigin-liste { flex-direction: column; }
    .hp-govde, .hp-ulke-govde { grid-template-columns: 1fr; }

    /* Harita: liste altına iner (yan yana 253px'e sıkışıyordu) */
    .sf-panel-harita .sf-harita-satir { grid-template-columns: 1fr; gap: 8px; }
    .sf-harita-kap, .sf-panel-harita .harita { max-height: 46vh; }

    /* Donut: lejant altta */
    .gd-kap { grid-template-columns: 1fr; }
    .gd-svg { width: 108px; height: 108px; margin: 0 auto; }

    /* Panel içi listeler/tablolar: yükseklik serbest, geniş tablo kendi kabında kayar */
    .sf-panel { min-height: 0; }
    .sf-kaydir { max-height: 300px; overflow-x: auto; }
    .sf-rp-govde .sf-kaydir { max-height: 300px; }
    .sf-grafik-kap { min-height: 150px; }
    .sf-not-akis { max-height: 120px; }

    /* Şerit ve çipler taşmasın */
    .sf-serit-takvim, .sf-rp-ozet, .sf-lejant { flex-wrap: wrap; }

    /* Geniş tablo paneli GENİŞLETMESİN: esnek kapların min-width:auto varsayılanı
       tabloyu panele dayatıyordu (Satış & Karlılık ürün marjı tablosu 417px'e taşıyordu).
       Tablo yalnız kendi .sf-kaydir kabında yatay kayar. */
    .sf-panel, .sf-panel > *, .sf-kaydir, .sf-sutun, .sf-govde > *, .sf-rp-govde > * { min-width: 0; }
    .sf-kaydir > .sf-tablo { min-width: max-content; }

    /* Harita ve SVG grafikler kaba sığar (harita-kap overflow:hidden olduğu için
       ölçeklenmeyen SVG kırpılıyordu) */
    .harita, .harita-kap svg, .sf-harita-kap svg, .sf-svg, .sf-grafik-kap svg { width: 100%; max-width: 100%; height: auto; }

    /* Geniş tablo kabı mobilde YATAY KAYAR: masaüstündeki `.sf-rp-govde .sf-kaydir { overflow-x: hidden }`
       daha spesifik olduğu için burada aynı özgüllükle ezilir, yoksa tablo panelin altından kırpılıyordu. */
    .sf-rp-govde .sf-kaydir, .sf-govde .sf-kaydir { overflow-x: auto; }

    /* Panel başlığındaki lejant/özet metni satır kırsın (tek parça 199px'e uzayıp taşıyordu) */
    .sf-panel-baslik { flex-wrap: wrap; row-gap: 2px; }
    .sf-lejant { max-width: 100%; flex-wrap: wrap; white-space: normal; }
    .sf-panel-alt { white-space: normal; }

    /* Çubuk/satır ızgaraları: sabit değer-yüzde kolonları dar ekrana göre küçülür (hiza korunur) */
    .sf-bar, .sf-satir, .sf-liste-baslik { --b-deger: 66px; --b-yoy: 44px; --s-deger: 66px; --s-yoy: 44px; gap: 5px; }
    .sf-liste-ulke, .sf-liste-baslik.sf-liste-ulke { grid-template-columns: minmax(0, 1fr) 62px 52px 44px; }

    /* Yönetim özeti sinyalleri ve sayaçlar */
    .sf-sayaclar { grid-template-columns: 1fr 1fr; }
    .sf-sinyal { grid-template-columns: 1fr; gap: 2px; }

    /* Yönetim sayfaları (Yetkiler / Log) — geniş tablolar kendi kabında kayar */
    .perm-kart, .log-tablo-kap { overflow-x: auto; }
}

/* Çok dar telefon (≤400px): KPI tek sütun, ay düğmeleri daha sıkı */
@media (max-width: 400px) {
    .sf-kpiler { grid-template-columns: 1fr !important; }
    .sf-mini-izgara { grid-template-columns: 1fr; }
    .fcb-aylar button { padding: 3px 4px; font-size: 9.5px; }
    .fcb-boyutlar select, .fcb-boyutlar .fcb-sec { flex: 1 1 100%; }
}

/* ============================================================
   IMS PAZAR SAYFASI (11/11) — Power BI raporunun panel karşılığı.
   Görünüm anahtarı sayfayı dört rapor sayfasına böler; bazı paneller iki
   ızgara satırını birden kaplar (.r-1-2). Pay kartları "Market Share Change"
   sayfasının kart ızgarasıdır; nokta grafiği "Competition by Category".
   ============================================================ */
.sf-rp-govde .r-1-2 { grid-row: 1 / -1; }

/* Pazar payı kartları (kategori × pay + değişim) */
/* Kartlar paneli DOLDURUR: satırlar eşit yükseklikte esner (panel içinde boş alan kalmasın,
   CEO ekranı kuralı); dar panelde kaydırır. */
.ims-kartlar { flex: 1 1 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
    grid-auto-rows: minmax(58px, 1fr); gap: 6px; align-content: stretch; overflow-y: auto; min-height: 0; }
.ims-kart { display: flex; flex-direction: column; justify-content: center; gap: 1px; }
.ims-kart { border: 1px solid var(--erp-border); border-radius: 8px; padding: 5px 9px; background: var(--erp-bg); cursor: pointer; transition: border-color .15s, background .15s; }
.ims-kart:hover { border-color: var(--gold); background: var(--gold-soft); }
.ims-kart.secili { border-color: var(--gold); background: var(--gold-soft); }
.ims-kart.biz { border-color: var(--gold); }
.ims-kart-ad { font-size: 10px; font-weight: 600; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ims-kart-pay { font-size: 19px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.ims-kart-fark { font-size: 10px; font-variant-numeric: tabular-nums; }
.ims-kart-alt { font-size: 9px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Nokta grafiği (kategori içinde ilk oyuncular) */
.ims-nokta-satir { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 8px; align-items: center; padding: 3px 0; }
.ims-nokta-ad { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-dim); }
.ims-nokta-hat { position: relative; height: 16px; }
.ims-nokta-hat::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--erp-border); }
.ims-nokta { position: absolute; top: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--erp-border-strong); }
.ims-nokta.biz { background: var(--gold); box-shadow: 0 0 0 2px var(--gold-soft); z-index: 2; }
.ims-nokta.lider { background: var(--celik); }

/* Çok serili çizgi grafikleri (pazar payı trendi, rakip trendi) */
.ims-cizgi { width: 100%; height: auto; display: block; }
.ims-cizgi .biz { stroke: var(--gold); stroke-width: 2.2; fill: none; }
.ims-cizgi .rakip { stroke: var(--erp-border-strong); stroke-width: 1.3; fill: none; }
.ims-cizgi .vurgu { stroke: var(--celik); stroke-width: 1.8; fill: none; }
.ims-cizgi text { font-size: 9px; fill: var(--text-dim); }
.ims-cizgi text.biz-etiket { fill: var(--gold-text); font-weight: 700; }
.ims-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; flex: 1 1 auto; min-height: 0; }
.ims-mini > div { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--erp-border); border-radius: 8px; padding: 4px 6px; }
.ims-mini-bas { font-size: 10px; font-weight: 600; color: var(--text-dim); display: flex; justify-content: space-between; gap: 6px; }
/* Rakip trend kartı tıklanabilir → büyük pencere (CEO 2026-09-13) */
.ims-mini-tik { cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.ims-mini-tik:hover { border-color: var(--gold); box-shadow: 0 6px 18px -12px rgba(138,106,46,.9); transform: translateY(-1px); }
.ims-mini-tik:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .ims-mini-tik:hover { transform: none; } }
/* Büyük rakip trend penceresi */
.ims-trend-buyut { display: flex; flex-direction: column; gap: 8px; }
.ims-trend-buyut .ims-cizgi-buyuk { width: 100%; height: auto; }
.ims-cizgi-buyuk text { font-size: 11px; }
.ims-cizgi-buyuk .biz-n { fill: var(--cg-bu-1); }
.ims-cizgi-buyuk .vurgu-n { fill: var(--cg-on-1); }
.ims-trend-ozet { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.ims-trend-ozet > div { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px;
    background: rgba(255,255,255,.55); border: 1px solid color-mix(in srgb, var(--gold) 35%, transparent); }
.ims-trend-ozet span { font-size: 9.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--text-dim); }
.ims-trend-ozet b { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ims-trend-ozet i { font-style: normal; font-size: 10px; color: var(--text-dim); }
@media (max-width: 700px) { .ims-trend-ozet { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) { .ims-mini { grid-template-columns: 1fr; } .sf-rp-govde .r-1-2 { grid-row: auto; } }

/* ============================================================================
   ALTI AYLIK SATIŞ (12. sayfa) — yarıyıl çubukları, kendi filtre şeridi ve
   "yeni eczane" işareti. Diğer sayfalarla aynı dil: çubuk renkleri sf-cubuk-*,
   eksen yazıları sf-svg-eksen.
   ============================================================================ */
.sf-eksen-secili { fill: var(--text-primary); font-weight: 600; }
.sf-eksen-kucuk { font-size: 8.5px; }
.sf-mini-secim { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sf-mini-secim select { font-family: var(--font-body); font-size: var(--fs-xs); padding: 3px 6px; border-radius: 6px;
    border: 1px solid var(--erp-border); background: var(--erp-surface); color: var(--text-primary); max-width: 170px; }
.sf-yeni { margin-left: 5px; padding: 0 4px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 600;
    background: var(--success-soft); color: var(--success-text, #1f7a42); }
[data-theme="dark"] .sf-yeni { color: #4ade80; }
/* MÜMESSİL EKİP ETİKETİ + ESKİ KAYIT (2026-09-29). Solgar ürünleri Solgar listesine, NB + OBF Navita listesine yazılır; marka
   Tümü iken ad yanında ekip etiketi (Solgar altın, Navita çelik — panelin "öteki" rengi). Eski kayıt = Masterpiece'te kapatılmamış
   kartlar: satırda kırmızı rozet, seçilince sağdaki panelde ve büyük pencerede durum + yapılacak iş kutusu (dokunmatikte ipucu yok). */
.sf-ekip, .sf-eski { margin-left: 5px; padding: 0 4px; border-radius: 4px; font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
.sf-ekip.slg { background: var(--gold-soft); color: var(--gold-text); }
.sf-ekip.nvt { background: color-mix(in srgb, var(--cg-on-1) 24%, transparent); color: var(--cg-on-kenar); }
[data-theme="dark"] .sf-ekip.nvt { color: var(--cg-on-2); }
.sf-eski { font-weight: 700; background: var(--danger-soft); color: var(--danger-text);
    border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent); }
.sf-tablo tr.sf-satir-eski td.sf-urun { color: var(--text-dim); }
.sf-eski-not { display: flex; flex-direction: column; gap: 3px; margin: 2px 4px 6px; padding: 7px 9px; border-radius: 8px; flex: none;
    border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); background: var(--danger-soft);
    font-size: var(--fs-2xs); line-height: 1.35; color: var(--text-primary); }
.sf-eski-not b { color: var(--danger-text); font-size: var(--fs-xs); }
.sf-eski-not .sf-eski-is { font-weight: 600; color: var(--danger-text); }
.hp-govde .sf-eski-not { margin: 0 0 10px; font-size: var(--fs-xs); }
/* Sağ panelde kutu grafiği yutmasın (1194×834'te grafik 8 px'e inmişti): en çok panelin %36'sı, fazlası kutu içinde kayar
   (iş satırı ikinci sırada olduğu için kaydırmadan görünür). */
.sf-p-ecztrend .sf-eski-not { max-height: 36%; overflow-y: auto; }
/* Telefonda mümessil adı + ekip etiketi + rozet tam görünür; tablo kendi kabında yatay kayar (genel 22vw ad sınırı 86 px veriyordu). */
@media (max-width: 700px) { .sf-rp .sf-tablo.sf-mum-tablo .sf-urun { max-width: none; } }

/* ============================================================================
   YERLEŞİM DÜZELTMELERİ (CEO 2026-09-10): "kategorilerin altındaki boşlukları
   kaldıralım, düzgün çerçeve olsun", "solgar markaları garip duruyor", "sayfa
   filtrelerini sola yasla ve belirgin çerçeveye al".

   1) SERBEST GÖVDE: kısa içerikli panellerde çerçeve boşluğu sarmasın. Normalde
   .sf-rp-govde iki eşit satıra bölünür ve .sf-kaydir kalan yüksekliği kaplar —
   11 satırlık tabloda 364 px, iki satırlık tabloda 509 px beyaz alan kalıyordu.
   Bu modda satırlar içeriğe göre büyür, panel içeriğine yapışır (align-self:start),
   uzun tablo yine kendi içinde kayar (max-height). Tek ekran kuralı bozulmaz:
   sayfa ekrandan KISA olur, kaydırma çıkmaz.
   ============================================================================ */
.sf-rp-govde.serbest { grid-template-rows: auto auto; align-content: start; }
.sf-rp-govde.serbest > .sf-panel { align-self: start; }
.sf-rp-govde.serbest .sf-kaydir { flex: 0 1 auto; max-height: 62vh; }
.sf-rp-govde.serbest .sf-grafik-kap { flex: 0 0 auto; }

/* 2) SAYFA FİLTRE ŞERİDİ: sayfaya özel anahtarlar (görünüm · dönem · kırılım)
   sola yaslı, kendi çerçevesinde — global filtre çubuğundan ayrı okunur. */
/* SAYFA MEŞGUL (CEO 2026-09-13: "filtreler arası geçişte veriler 2-3 saniyede değişiyor, biri
   yüklenmeden başkasına tıklayınca panel çalışmıyormuş gibi oluyor"). Alttaki küçük bekleme rozeti
   gözden kaçıyordu → İÇERİĞİN KENDİSİ işaretlenir: soluklaşır, tıklama geçmez, ortada kum saati.
   Kısa yüklemede göze batmasın diye .35 sn gecikmeyle belirir (animation-delay). */
.sf-rp-govde.sf-mesgul { position: relative; }
.sf-rp-govde.sf-mesgul > * { opacity: .45; filter: saturate(.6); transition: opacity .2s; pointer-events: none; }
.sf-rp-govde.sf-mesgul::after { content: "Veri güncelleniyor…"; position: absolute; inset: 0; z-index: 5;
    display: flex; align-items: center; justify-content: center; pointer-events: none;
    font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--gold-text);
    background: radial-gradient(420px 200px at 50% 50%, color-mix(in srgb, var(--erp-surface) 92%, transparent), transparent 75%);
    opacity: 0; animation: sf-mesgul-gir .25s ease-out .35s forwards; }
@keyframes sf-mesgul-gir { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sf-rp-govde.sf-mesgul::after { animation: none; opacity: 1; } }

/* Sayfa filtre şeridindeki eylem düğmeleri — "sönük kalıyor, nerede olduğu görünmüyor" (CEO 2026-09-13).
   Temizle kırmızı (üstteki TEMİZLE ile aynı dil), kaynağı yenile altın. */
.sf-serit-temizle, .sf-serit-yenile { appearance: none; flex: none; cursor: pointer; font: inherit;
    font-size: 10px; font-weight: 700; letter-spacing: .04em; line-height: 1; padding: 5px 11px;
    border-radius: 999px; transition: background .15s, color .15s, box-shadow .15s, border-color .15s; }
.sf-serit-temizle { color: var(--kirmizi, #B3261E); background: color-mix(in srgb, var(--kirmizi, #B3261E) 10%, transparent);
    border: 1.5px solid color-mix(in srgb, var(--kirmizi, #B3261E) 55%, transparent);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--kirmizi, #B3261E) 45%, transparent); animation: sf-temizle-nabiz 2.4s ease-out infinite; }
.sf-serit-temizle:hover { background: var(--kirmizi, #B3261E); color: #fff; animation: none; }
@keyframes sf-temizle-nabiz { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--kirmizi, #B3261E) 40%, transparent); }
    70% { box-shadow: 0 0 0 6px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
.sf-serit-yenile { color: var(--gold-text); background: var(--gold-soft);
    border: 1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); }
.sf-serit-yenile:hover:not(:disabled) { background: var(--gold); color: var(--murekkep); }
.sf-serit-yenile:disabled { opacity: .6; cursor: default; }
@media (prefers-reduced-motion: reduce) { .sf-serit-temizle { animation: none; } }

/* Eczane arama kutusu + 100'lük sayfalama (CEO 2026-09-13) */
.ecz-ara { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.ecz-ara input { font: inherit; font-size: 10px; width: 118px; padding: 3px 7px; border-radius: 999px;
    border: 1px solid var(--erp-border); background: var(--erp-bg); color: var(--text-primary); }
.ecz-ara input:focus { outline: none; border-color: var(--gold); background: var(--erp-surface); }
.ecz-ara button { appearance: none; border: 1px solid transparent; background: none; cursor: pointer;
    color: var(--text-dim); font-size: 12px; line-height: 1; padding: 2px 5px; border-radius: 999px; }
.ecz-ara button:hover { color: var(--gold-text); border-color: var(--gold); }
.ecz-sayfa { display: inline-flex; align-items: center; gap: 3px; margin-left: auto; flex: none; }
.ecz-sayfa b { font-size: 9.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text-dim); min-width: 28px; text-align: center; }
.ecz-sayfa button { appearance: none; cursor: pointer; font: inherit; font-size: 11px; line-height: 1;
    padding: 2px 7px; border-radius: 999px; border: 1px solid var(--erp-border);
    background: var(--erp-bg); color: var(--text-primary); }
.ecz-sayfa button:hover:not(:disabled) { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-text); }
.ecz-sayfa button:disabled { opacity: .35; cursor: default; }
/* Üç kademeli ürün seçimi AYRI BİR KUTU DEĞİLDİR (CEO 2026-09-14: "filtrelerde farklı farklı kutu
   türleri olmuş, aynı standartta olması gerekir"): kendi `.sf-mini-sec` kuralı 10px ve hap biçimliydi,
   yanındaki marka/depo select'i ise 11px ve 6px köşeliydi. Kural silindi, üçü de `.sf-mini-secim`
   kullanıyor — şeritteki her select tek tip. Yeni seçim eklerken .sf-mini-secim kullan. */

.sf-filtre-serit { justify-content: flex-start; align-items: center; gap: 7px;
    padding: 5px 10px; margin: 0 0 8px; border: 1px solid var(--erp-border);
    border-left: 3px solid var(--gold); border-radius: 8px; background: var(--erp-surface); }
.sf-filtre-serit::before { content: "SAYFA FİLTRESİ"; flex: none; font-size: var(--fs-2xs);
    font-weight: 700; letter-spacing: .06em; color: var(--text-dim); padding-right: 3px; }
[data-theme="dark"] .sf-filtre-serit { background: var(--erp-surface); }
@media (max-width: 700px) {
    .sf-filtre-serit { flex-wrap: wrap; }
    .sf-filtre-serit::before { width: 100%; }
}

/* Altı aylık: kanal yığını (internet segmenti), bölge üst satırı ve "büyüme neye göre" çipi. */
.sf-cubuk-internet { fill: var(--celik, #4a6b8a); fill-opacity: .92; }
[data-theme="dark"] .sf-cubuk-internet { fill: #6b93b8; }
/* Yarıyıl seyri (CEO 2026-09-11): internet altta, segment sınırında ince ayraç, çubuk içi yüzde. */
.sf-cubuk-ayrac { stroke: var(--erp-surface); stroke-width: 1.5; opacity: .85; }
.sf-kilavuz-ince { stroke-dasharray: 3 4; opacity: .5; }
.sf-svg-ic { fill: #fff; font-size: 9.5px; font-weight: 700; font-family: var(--font-body); letter-spacing: .02em; }
.sf-tablo tbody tr.sf-satir-ust td { border-top: 1px solid var(--erp-border); }
.sf-kiyas-not { margin-left: auto; padding: 2px 7px; border-radius: 6px; background: var(--gold-soft);
    color: var(--gold-text); font-size: var(--fs-2xs); font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) { .sf-kiyas-not { margin-left: 0; } }

/* Tablo ikincil metni: MONO DEĞİL (CEO 2026-09-10: "Antalya gibi şehirlerin yazı tipi farklı,
   kötü görünüyor, tek tip daha iyi"). .sf-kod yalnız KOD/numara için kalsın; şehir, grup gibi
   sözcükler gövde yazı tipiyle, bir ton soluk. */
.sf-ikincil { color: var(--text-secondary); font-size: var(--fs-xs); }
.sf-sayi-ikincil { color: var(--text-secondary); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }


/* ============================================================
   KPI SATIRI KART SAYISINA UYAR (CEO 2026-09-11 temizlik turu)
   Kartlar silinince 6 kolonluk ızgarada sağda boş kolon kalıyordu; bu sınıf kalan
   kartları satıra eşit paylaştırır. Dosyanın sonunda: sonraki hiçbir kural ezmesin.
   ============================================================ */
/* Eskiden kalan kartları satıra EŞİT PAYLAŞTIRIYORDU (6 kolonluk ızgarada 4 kart kalınca sağda boşluk
   kalmasın diye). Artık kartlar sabit genişlikte ve sola yanaşık olduğu için gerdirmeye gerek yok. */
.sf-kpiler.sf-kpi-esit { grid-template-columns: repeat(auto-fill, var(--kpi-en, 200px)); grid-auto-flow: row; }
@media (max-width: 1400px) {
    .sf-kpiler.sf-kpi-esit { --kpi-en: 184px; }
}
@media (max-width: 700px) {
    .sf-kpiler.sf-kpi-esit { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 400px) {
    .sf-kpiler.sf-kpi-esit { grid-template-columns: 1fr; }
}


/* SEÇİLİ ÖLÇÜ VURGUSU (kullanıcı 2026-09-11, tüm sayfalara yayıldı 2026-09-12):
   ADET/TUTAR anahtarı değişince kolonlar yerinde kalan tablolarda "hiçbir şey olmadı" sanılıyordu.
   Tabloya .sf-olcu + vurgu-adet / vurgu-tutar, ilgili hücrelere o-adet / o-tutar konur; seçili ölçünün
   kolonu hafif altın zeminle ve başlığında altın çizgiyle öne çıkar. Yalnız adet kolonu olan tabloda
   da işe yarar: adet seçilince o kolon belli olur. */
.sf-olcu.vurgu-adet th.o-adet, .sf-olcu.vurgu-adet td.o-adet,
.sf-olcu.vurgu-tutar th.o-tutar, .sf-olcu.vurgu-tutar td.o-tutar {
    background: color-mix(in srgb, var(--gold) 11%, transparent); font-weight: 700;
}
.sf-olcu.vurgu-adet th.o-adet, .sf-olcu.vurgu-tutar th.o-tutar { box-shadow: inset 0 -2px 0 var(--gold); }
/* Yapışkan başlık kuralı (.sf-kaydir .sf-tablo thead th) opak zemin veriyor ve daha spesifik —
   vurgulu kolonun BAŞLIĞI için aynı derinlikte yazılmalı, yoksa yalnız gövde renklenir. */
.sf-kaydir .sf-tablo.sf-olcu.vurgu-adet thead th.o-adet,
.sf-kaydir .sf-tablo.sf-olcu.vurgu-tutar thead th.o-tutar,
.sf-rp-govde .sf-kaydir .sf-tablo.sf-olcu.vurgu-adet thead th.o-adet,
.sf-rp-govde .sf-kaydir .sf-tablo.sf-olcu.vurgu-tutar thead th.o-tutar {
    background: color-mix(in srgb, var(--gold) 15%, var(--erp-surface));
}
/* Liste (tablo olmayan) satırlarda aynı iş: .sf-liste-baslik + .sf-satir içindeki işaretli hücre */
.sf-olcu.vurgu-adet .o-adet, .sf-olcu.vurgu-tutar .o-tutar { font-weight: 700; }

/* TARİH HÜCRESİ: mono DEĞİL (CEO tipografi kuralı — .sf-kod yalnız kod/sayı içindir), ama
   rakamlar hizalı dursun diye tabular. "Solgar / Air / 01.09.2026" satırları mono'da kötü duruyordu. */
.sf-tarih { font-family: var(--font-body); font-variant-numeric: tabular-nums; color: var(--text-dim); white-space: nowrap; }


/* ============================================================
   PANO ÜST ŞERİDİ (kullanıcı 2026-09-11): üç KPI kartı solda, ÖNE ÇIKAN NOTLAR sağda.
   Notlar gövdeden çıkınca Pazar ve Kategori panelleri o yığında genişler.
   ============================================================ */
.sf-ust-serit { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: 14px; margin-bottom: 12px; align-items: stretch; }
.sf-ust-serit .sf-kpiler.sf-kpi-uc { max-width: none; margin: 0; gap: 12px; }
.sf-ust-serit .sf-ust-notlar { margin: 0; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* Şeridin yüksekliği KARTLARDAN gelir: not akışı height:0 + flex:1 ile kalan boşluğu doldurur,
   kendi doğal yüksekliğiyle satırı büyütmez (kullanıcı 2026-09-11: "kartları öne çıkanlara göre
   büyütmüşsün, tersi olmalı"). */
.sf-ust-serit .sf-ust-notlar .sf-not-akis { flex: 1 1 auto; min-height: 0; height: 0; }
@media (max-width: 1100px) { .sf-ust-serit { grid-template-columns: 1fr; } }


/* IMS kategori kartında BÜYÜTEÇ ve büyük grafik popup'ı (CEO 2026-09-11: karta tıkla → kırılıma in,
   büyütece bas → ilk 10 rakibi büyük gör). */
.ims-kart { position: relative; }
.ims-kart-buyut { position: absolute; top: 5px; right: 5px; appearance: none; cursor: pointer; width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid transparent;
    background: transparent; color: var(--text-dim); opacity: .55; }
.ims-kart:hover .ims-kart-buyut { opacity: 1; border-color: var(--erp-border-strong); background: var(--erp-surface); }
.ims-kart-buyut:hover { color: var(--gold-text); border-color: var(--gold); }
/* Grafik popup'ı içeriği kadar yüksek olsun — sabit 900px'te altı boş kalıyordu. */
.hp:has(.ims-buyut) { height: auto; max-height: 92vh; width: min(1100px, 94vw); }
.hp-govde.ims-buyut { display: flex; flex-direction: column; gap: 8px; padding: 14px 18px 16px; overflow-y: auto; }
.hp-govde.ims-buyut .sf-barlar { gap: 6px; }
.hp-govde.ims-buyut .sf-bar { min-height: 30px; font-size: 13px; }
.hp-govde.ims-buyut .sf-bar-kanal { height: 16px; }
.hp-govde.ims-buyut .sf-bar-deger { font-size: 14px; }


/* ============================================================
   ÇUBUK GRAFİĞİ (CubukGrafik.razor) — HTML/CSS, SVG DEĞİL.
   Kullanıcı 2026-09-11: "grafiğin altında üstünde boşluk kalıyor, daha dolu
   görünsün; iki sarı tonu birbirine benziyor, karşılaştırma sönük kalıyor;
   çubukların etrafında bold çizgi gibi bir şey olsun." Sabit viewBox'lı SVG
   kabından geniş oranlı olunca ortalanıp bant bırakıyordu; çubuklar artık
   yüzdeyle ölçeklenir ve paneli tam doldurur.
   BU YIL = altın (koyu altın kenarlı, ışıklı) · GEÇEN YIL = çelik (ayrı renk
   ailesi, karşılaştırma bir bakışta okunsun). Renkler yalnız burada tanımlıdır.
   ============================================================ */
:root, [data-theme="light"] {
    --cg-bu-1: #C9A84C; --cg-bu-2: #F0DCA0; --cg-bu-3: #A27E2C; --cg-bu-kenar: #6E5320;
    --cg-on-1: #9BA9BB; --cg-on-2: #CBD3DD; --cg-on-kenar: #8494A6;
}
[data-theme="dark"] {
    --cg-bu-1: #D9B95E; --cg-bu-2: #F3E0A8; --cg-bu-3: #9A7A2C; --cg-bu-kenar: #E4C87A;
    --cg-on-1: #55616F; --cg-on-2: #7C8898; --cg-on-kenar: #8E9AA8;
}
/* SOL EKSEN + TABAN ÇİZGİSİ (CEO 2026-09-23, AztekFi sell-in/sell-out düzeni; kullanıcı "sağa" dedi, sonra "sola" diye
   düzeltti): çubuk alanı soldan --sfcg-sol kadar daralır, oraya dikey eksen çizgisi ve kılavuzlarla aynı hizada beş
   sağa yaslı rakam (tavan güzel sayı → düz rakamlar) gelir; en alttaki kılavuz düz TABAN çizgisidir, diğerleri kesikli.
   Mini kutularda eksen kapalı (yer yok). */
.sfcg { position: relative; flex: 1 1 auto; align-self: stretch; display: flex; align-items: stretch;
    width: 100%; height: 100%; min-height: var(--sfcg-min, 120px); min-width: 0;
    --sfcg-eksen: 16px; --sfcg-tepe: 15px; --sfcg-sol: 46px; padding-left: var(--sfcg-sol); }
.sfcg-kilavuz { position: absolute; left: var(--sfcg-sol); right: 0; top: var(--sfcg-tepe); bottom: var(--sfcg-eksen);
    display: flex; flex-direction: column; justify-content: space-between; pointer-events: none; }
.sfcg-kilavuz i { display: block; border-top: 1px dashed color-mix(in srgb, var(--erp-border) 85%, transparent); }
.sfcg-kilavuz i.taban { border-top: 1px solid color-mix(in srgb, var(--text-dim) 70%, transparent); }
.sfcg-eksen-sol { position: absolute; left: 0; width: var(--sfcg-sol); top: var(--sfcg-tepe); bottom: var(--sfcg-eksen);
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; padding-right: 5px;
    border-right: 1px solid color-mix(in srgb, var(--text-dim) 60%, transparent); pointer-events: none; z-index: 1; }
.sfcg-eksen-sol span { display: block; height: 0; line-height: 0; font-size: 8.5px; color: var(--text-dim);
    font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -.01em; }
.sf-mini .sfcg { --sfcg-sol: 0px; }
.sf-mini .sfcg-eksen-sol { display: none; }
/* Köşe notu — yıllık grafikte hangi dönemin toplandığı (CEO 2026-09-13, dokunmatikte ipucu yok) */
.sfcg-not { position: absolute; top: 0; right: 4px; z-index: 3; pointer-events: none; font-size: 9px; letter-spacing: .02em;
    color: var(--text-dim); background: color-mix(in srgb, var(--erp-surface) 88%, transparent); padding: 1px 5px; border-radius: 4px;
    max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* NOT KENDİ BANDINDA (CEO 2026-09-16: "barın üstündeki rakamla mini açıklama üst üste geliyor").
   Not `top: 0`da, çubukların değer yazısı ise en uzun çubuğun tepesinde — ikisi aynı 15px'lik şeritte
   olunca çakışıyordu. `notlu` grafik üst boşluğu not satırı kadar büyütür: not üstte, değer yazıları
   onun altında. Çubuk alanı ve kılavuz çizgileri --sfcg-tepe'yi izlediği için ayrıca hizalama gerekmez. */
.sfcg.notlu { --sfcg-tepe: 29px; }
/* MİNİ kutularda not ÇİZİLMEZ (denetim 2026-09-16): kutu 90 px, --sfcg-tepe 4 px ve değer yazıları
   zaten kapalı; yarı saydam not plakası en uzun çubukların ucunu örtüyor, üstelik aynı cümle 12
   kutuda tekrar ediyordu. Bilgi panel BAŞLIĞINDA bir kez yazar (Ülke & Bölge mini ızgarası). */
.sf-mini .sfcg-not { display: none; }

.sfcg-ay { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
    border-radius: 6px; transition: background .14s; }
.sfcg-ay:hover { background: var(--gold-soft); }
.sfcg-ay.soluk { opacity: .34; }
/* Çubuklar ARALIKSIZ ve GEÇMELİ (kullanıcı 2026-09-12): geçen dönem soluk çelikle BİR TIK ARKADA
   durur, bu dönem altınla önde — karşılaştırma "iki ayrı çubuk" değil, "önde/arkada" okunur. */
.sfcg-alan { flex: 1 1 auto; min-height: 0; padding-top: var(--sfcg-tepe);
    display: flex; align-items: flex-end; justify-content: center; gap: 0; }
.sfcg-cubuk { position: relative; width: 34%; max-width: 36px; min-width: 3px; border-radius: 4px 4px 0 0; }
.sfcg-bu { z-index: 2; }
.sfcg-bu.gecmeli { margin-left: -13%; }
.sfcg-on { z-index: 1; }
.sfcg-bu { background: linear-gradient(180deg, var(--cg-bu-2) 0%, var(--cg-bu-1) 42%, var(--cg-bu-3) 100%);
    border: 1.2px solid var(--cg-bu-kenar); border-bottom: 0;
    box-shadow: 2px 0 6px -1px rgba(30, 27, 22, .28), 0 2px 5px rgba(110, 83, 32, .22), inset 0 1px 0 rgba(255, 255, 255, .5); }
.sfcg-on { background: linear-gradient(180deg, var(--cg-on-2) 0%, var(--cg-on-1) 100%);
    border: 1px solid var(--cg-on-kenar); border-bottom: 0; opacity: .85;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3); }
/* Kısmi dönem (henüz kapanmamış yıl): taralı + kesikli kenar — "tam değil" belli olsun */
.sfcg-cubuk.kismi { background: repeating-linear-gradient(135deg, var(--cg-bu-1) 0 5px, var(--cg-bu-2) 5px 10px);
    border-style: dashed; }
.sfcg-ay:hover .sfcg-bu { filter: brightness(1.05); box-shadow: 0 4px 10px rgba(110, 83, 32, .3), inset 0 1px 0 rgba(255, 255, 255, .6); }
/* DEĞER YAZISI HEP SARI (BU DÖNEM) ÇUBUĞUNUN ÜSTÜNDE (CEO 2026-09-21: "mavi ve sarıda hangisi yüksekse onun sayısı
   yazıyor sanılıyor; yalnız sarıların sayısı yazsın"). 15.09'da yazı, geçen yılın çubuğu daha uzunsa ONUN üstüne
   kaldırılıyordu — o zaman çelik çubuğun rakamı gibi okunuyordu. Artık sarı çubuğa yapışık kalır; çelik çubuğun
   gövdesine denk gelirse okunsun diye yarı saydam zemin + z-index. */
.sfcg-yazi { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; z-index: 3;
    font-size: 9.5px; font-weight: 700; color: var(--text-primary); white-space: nowrap; letter-spacing: -.01em;
    padding: 0 3px; border-radius: 4px; background: color-mix(in srgb, var(--erp-surface) 84%, transparent);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--cg-bu-kenar, #A8873A) 35%, transparent); }
.sfcg-eksen { flex: none; height: var(--sfcg-eksen); line-height: var(--sfcg-eksen); text-align: center;
    font-size: var(--fs-2xs); color: var(--text-dim); overflow: hidden; white-space: nowrap; }
/* Dar panellerde (rapor gövdesi) daha küçük yazı; çok dar seride değer etiketi düşer */
.sf-rp-govde .sfcg-yazi { font-size: 9px; }
.sfcg.sfcg-sik .sfcg-yazi { display: none; }
.sf-mini .sfcg-yazi { display: none; }
/* Küçük çoklu grafikler (ülke kutuları): taban yükseklik küçüktür, panel taşmasın */
.sf-mini .sfcg { min-height: 44px; --sfcg-eksen: 13px; --sfcg-tepe: 4px; }
.sf-mini .sfcg-eksen { font-size: 8px; }


/* ============================================================
   PANO SAĞ ALAN (kullanıcı 2026-09-11): "Kategori Bazında Net Satış" paneli KALDIRILDI —
   aynı rakamları "Ürün Grupları" listesi veriyordu ("ikisi aynı sonucu veriyor"). Boşalan
   alanı ürün paneli yutar: üst satırda Marka + Pazar, altta TAM GENİŞLİKTE ürün/grup listesi
   (10 grup satırı rahat sığsın diye). Yığın (.sf-sutun) yerine doğrudan ızgara.
   ============================================================ */
.sf-g-sag { grid-template-rows: minmax(0, clamp(106px, 26%, 128px)) minmax(0, 1fr); gap: 8px 10px; }
.sf-g-sag > .sf-p-marka   { grid-column: 1; grid-row: 1; }
.sf-g-sag > .sf-p-pazar   { grid-column: 2; grid-row: 1; }
.sf-g-sag > .sf-p-urunler { grid-column: 1 / 3; grid-row: 2; }
/* Panel başlığında birden fazla araç (lejant + aylık/yıllık anahtarı) yan yana */
.sf-panel-araclar { display: inline-flex; align-items: center; gap: 10px; flex: 0 1 auto; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }

/* ÖNE ÇIKAN NOTLAR (kullanıcı 2026-09-11): başlığın altına kartların çerçevesiyle aynı çizgi —
   akan yazı "kesiliyor" gibi değil, panelin altından geçiyor gibi okunsun. Akış fareyle durur;
   dururken TEKERLEKLE de gezilebilir (overflow-y: auto). */
.sf-ust-notlar .sf-panel-baslik { border-bottom: 1px solid var(--erp-border); padding-bottom: 7px; margin-bottom: 7px; }
/* Alt kenarda yumuşak geçiş: yazı "kesilmiş" değil, panelin altından geçiyor gibi okunsun */
.sf-ust-notlar { position: relative; }
.sf-ust-notlar::after { content: ""; position: absolute; left: 1px; right: 1px; bottom: 1px; height: 16px;
    pointer-events: none; border-radius: 0 0 10px 10px;
    background: linear-gradient(to top, var(--erp-surface) 25%, transparent); }
.sf-not-akis { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--erp-border-strong) transparent; }
.sf-not-akis::-webkit-scrollbar { width: 6px; }
.sf-not-akis::-webkit-scrollbar-thumb { background: var(--erp-border-strong); border-radius: 3px; }
.sf-not-akis::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 1180px) {
    /* Tek kolona inen panoda sağ alan da düz akar (bu blok yukarıdaki ızgara kurallarından SONRA olmalı) */
    .sf-g-sag { grid-template-columns: 1fr; grid-template-rows: none; }
    .sf-g-sag > .sf-p-marka, .sf-g-sag > .sf-p-pazar, .sf-g-sag > .sf-p-urunler { grid-column: 1; grid-row: auto; }
}

/* TEDARİK ZİNCİRİ ŞERİDİ (CEO 2026-09-11, D1 — kâğıda çizdiği akış):
   talep fişi → sipariş → yolda → antrepo → depo. Grafiğin altında tek satır. */
.sf-zincir { flex: none; display: flex; align-items: stretch; gap: 4px; margin-top: 8px; padding: 6px 4px 2px;
    border-top: 1px solid var(--erp-border); }
.sf-zincir > span { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 1px;
    padding: 3px 2px; border-radius: 5px; background: var(--gold-soft);
    justify-content: center; }   /* kutu ortada "Açık sipariş" grubu kadar uzayınca rakam dikeyde ORTALI dursun (CEO 2026-09-13) */
.sf-zincir > span.son { background: color-mix(in srgb, var(--zeytin) 14%, transparent); }
.sf-zincir > span b { font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.15; }
.sf-zincir > span small { font-size: 9px; color: var(--text-dim); letter-spacing: .02em; white-space: nowrap; }
.sf-zincir > i { flex: none; align-self: center; font-style: normal; color: var(--text-dim); font-size: 11px; }
/* CEO 2026-09-21: kesikli "açık sipariş = yolda + antrepo" grubu KALKTI ("siparişin kaç olduğunun önemi yok") — dört düz kutu:
   bekleyen sipariş → yolda → antrepo → depo. Eski .sf-zincir-grup / .sf-zincir-ic kuralları silindi. */
.sf-kpi.tik { cursor: pointer; transition: box-shadow .15s; }
.sf-kpi.tik:hover { box-shadow: 0 0 0 1px var(--gold), 0 8px 20px -12px color-mix(in srgb, var(--gold) 80%, transparent); }
.sf-talep-kirilim { flex-wrap: wrap; }

/* YIL PİVOTU (F1 / G1 — Hüseyin Bey'in PowerPoint tabloları). Üç kademe girintili,
   yıl kolonları sağa yatık sabit genişlikte; "En iyi yıl" altın rozet. */
/* KOLON GENİŞLİKLERİ SABİT (CEO 2026-09-12: "detayı açınca tarihler kayıyor"): satır açılıp
   kapandıkça tablo kendini yeniden ölçüyordu ve yıl kolonları yerinden oynuyordu. */
/* SABİT KOLON DÜZENİ (CEO 2026-09-12: "detayı açınca tarihler kayıyor"): satır açılıp kapandıkça
   tablo kendini yeniden ölçüyor, yıl kolonları oynuyordu. table-layout:fixed ile kolonlar satır
   içeriğinden bağımsız; ad kolonları sabit, yıl kolonları kalan alanı EŞİT paylaşır (yıl sayısı
   sayfadan sayfaya değiştiği için oran kendiliğinden uyar). */
.sf-pivot { font-variant-numeric: tabular-nums; table-layout: fixed; width: 100%; }
.sf-pivot th.pv-ad, .sf-pivot td.pv-ad { white-space: nowrap; }

.sf-pivot { font-size: 10px; }
.sf-pivot th { font-size: 9px; }
/* TEK AD KOLONU, SABİT GENİŞLİKTE (CEO 2026-09-14: "alt menüler çok sağa gidiyor, ürün adı sığmamış").
   Eskiden üç ayrı 80px kolon vardı (toplam 240px) ve detay adı üçüncüye düşüp kırpılıyordu. Artık tek
   215px kolon + kademe girintisi: hem daha DAR hem adlar TAM sığıyor — ölçüldü, en uzun etiket
   "Stress Support/Passiflora Complex" (33 karakter) 10px yazıda ~182px, 24px girintiyle 206px.
   Sabit genişlik şart: satır açılıp kapandıkça tablo kendini yeniden ölçerse yıl kolonları oynar
   (CEO 2026-09-12: "detayı açınca tarihler kayıyor"). */
.sf-pivot td.pv-ad, .sf-pivot th.pv-ad { width: 215px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-pivot th.pv-ad small { font-weight: 500; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
.sf-pivot td, .sf-pivot th { padding-right: 3px; }
/* Kademe GİRİNTİSİ — üst kademenin hemen altında, biraz içeride. */
.sf-pivot td.pv-ad.pv-k1 { padding-left: 12px; }
.sf-pivot td.pv-ad.pv-k2 { padding-left: 24px; color: var(--text-dim); }
.sf-pivot .pv-ok { display: inline-block; width: 10px; font-style: normal; color: var(--gold-text); margin-right: 1px; }
.sf-pivot tr.pv-s0 > td { background: var(--gold-soft); font-weight: 700; }
.sf-pivot tr.pv-s1 > td { background: color-mix(in srgb, var(--zeytin) 8%, transparent); font-weight: 600; }
.sf-pivot tr.tik:hover > td { background: color-mix(in srgb, var(--gold) 18%, transparent); }
/* DEĞİŞİM RENGİ — Hüseyin Bey'in tablosundaki kural (CEO 2026-09-12): %20 ve üzeri artış MAVİ,
   düşüş KIRMIZI, arası renksiz. Hücrenin tamamı boyanır (slayttaki gibi), yazı beyaz. */
.sf-pivot td.pv-yuksek { background: var(--celik); color: #fff; font-weight: 700; }
.sf-pivot td.pv-dusus  { background: var(--danger); color: #fff; font-weight: 700; }
/* EN İYİ YIL: her satırda YIL yazar; en iyi yıl içinde bulunduğumuz yılsa ALTIN ROZET
   (CEO 2026-09-14: "Best Year'ları altın çerçeveli, etrafı parlayan ışık efektli ve belirgin"). */
.sf-pivot td.pv-eniyi { color: var(--gold-text); font-weight: 700; background: transparent; }
.sf-pivot .pv-rozet, .sf-dp .pv-rozet { display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 7.5px;
    font-weight: 800; letter-spacing: .02em; white-space: nowrap; color: var(--murekkep);
    background: linear-gradient(180deg, #F3E3AE, var(--gold) 55%, #B08F35);
    border: 1px solid var(--gold-deep);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
                0 0 10px color-mix(in srgb, var(--gold) 70%, transparent),
                inset 0 1px 0 rgba(255,255,255,.55);
    animation: pv-parla 2.6s ease-in-out infinite; }
@keyframes pv-parla {
    0%, 100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 45%, transparent),
                           0 0 8px color-mix(in srgb, var(--gold) 55%, transparent),
                           inset 0 1px 0 rgba(255,255,255,.55); }
    50%      { box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 70%, transparent),
                           0 0 16px color-mix(in srgb, var(--gold) 95%, transparent),
                           inset 0 1px 0 rgba(255,255,255,.7); }
}
@media (prefers-reduced-motion: reduce) { .sf-pivot .pv-rozet, .sf-dp .pv-rozet { animation: none; } }
/* Satır zeminleri hücre rengini ezmesin */
.sf-pivot tr.pv-s0 > td.pv-yuksek, .sf-pivot tr.pv-s1 > td.pv-yuksek { background: var(--celik); }
.sf-pivot tr.pv-s0 > td.pv-dusus, .sf-pivot tr.pv-s1 > td.pv-dusus { background: var(--danger); }
/* KAYDIRMA ÇUBUĞU YILLARI KAPATMASIN (CEO 2026-09-14): macOS'ta kaplayan (overlay) kaydırma çubuğu
   kaydırırken en sağdaki kolonların üstüne biniyordu. scrollbar-gutter ile yer HER ZAMAN ayrılır. */
.sf-kaydir:has(> .sf-pivot) { scrollbar-gutter: stable; padding-right: 10px; }
/* TABAN GENİŞLİK (tablet denetimi 2026-09-16 → 2026-09-30 css'e taşındı): ad 215 px + kolon başına --pv-kol (58 px). Telefonda
   yazı 11,5 px ve iki ondalıklı 9 karakterlik rakam ("3.162,54M") 58 px'e sığmıyordu → telefon bloğunda 72 px. Özgüllük
   `.sf-kaydir > .sf-tablo` telefon kuralını (min-width: max-content) ezmek için. */
.sf-kaydir > .sf-tablo.sf-pivot { min-width: calc(215px + var(--pv-n, 9) * var(--pv-kol, 58px)); }
/* GENEL TOPLAM ALTTA SABİT (kullanıcı 2026-09-30) — ülke tablosuyla aynı: collapse'ta yapışan hücrenin çizgisi yerinde kaldığı için
   tablo `separate`; satır kaydırma çubuğunun payı kadar (12 px) yukarıda, altındaki şerit gölgeyle zemin rengi, sonda boş satır. */
.sf-tablo.sf-pivot { border-collapse: separate; border-spacing: 0; }
.sf-pivot tbody tr.toplam > td { position: sticky; bottom: 12px; z-index: 2; background-color: color-mix(in srgb, var(--gold) 9%, var(--erp-surface));
    box-shadow: 0 12px 0 0 var(--erp-surface); }
.sf-pivot tbody tr.pv-bosluk > td { height: 12px; padding: 0; border: 0; background: transparent; }
/* Genel Toplam yarı kalın + tablette kolon 64 px: iki ondalıklı 10 haneli "11.510,68M" kalın yazıda 58 px'lik kolona sığmayıp yanındaki
   rakama 5 px biniyordu (1194 px; satır artık hep görünür olduğu için ortaya çıktı). Telefon bloğu 72 px'le bunu ezer. */
.sf-pivot tbody tr.toplam > td { font-weight: 600; }
@media (max-width: 1280px) { .sf-pivot { --pv-kol: 64px; } }
/* YIL KOLONLARINA YER (2026-09-30, iki ondalık): Δ % ve "En iyi yıl" da birer yıl kolonu kadar (64,5 px) yer alıyordu; on haneli
   "11.510,68M" Genel Toplam'da 1512×860'ta kolonuna sığmayıp 2 px taşıyor, yanındaki yapışık hücrenin zemini "M"yi örtüyordu. İki kolon
   içerikleri kadar sabit (en geniş yüzde ve "Best Year" rozeti ölçüldü), hücre yan boşluğu 5 → 4 px; boşalan yer yıl kolonlarına geçer.
   Özgüllük: genel `.sf-rp .sf-tablo td` yan boşluk kuralını ezmek için; ad kolonu (kademe girintisi) hariç. */
.sf-rp .sf-tablo.sf-pivot td:not(.pv-ad), .sf-rp .sf-tablo.sf-pivot th:not(.pv-ad) { padding-left: 4px; padding-right: 4px; }
.sf-pivot th.pv-deg { width: var(--pv-deg-en, 56px); }
.sf-pivot th.pv-yil-en { width: var(--pv-eniyi-en, 60px); }

/* ============================================================
   MARKA & ÜRÜN — KATEGORİ AĞACI + KADEMELİ LİSTE (CEO 2026-09-30)
   Kategori Bazında Net Satış: ana grup oklu, altında alt grupları (Competition açık gelir); çubuklar AYNI ölçekte (ana grubun
   en büyüğüne göre) — alt grup çubuğu ana grubunkiyle karşılaştırılabilir. Kademeli liste (En Çok Satanlar): ana grup › alt grup ›
   detay › ürün; kademe girintisi ve üst kademe zemini yıl pivotuyla aynı dil. Ürün adı KESİLMEZ, sarar (tablette ipucu yok).
   ============================================================ */
.sf-kat-agac { gap: 3px; }
.sf-kat-agac .kt-ok, .sf-kt .kt-ok { display: inline-block; width: 11px; font-style: normal; color: var(--gold-text); margin-right: 2px; }
.sf-kat-agac .kat-ana { font-weight: 600; }
.sf-kat-agac .kat-ana.acik { background: color-mix(in srgb, var(--gold) 10%, transparent); }
.sf-kat-agac .kat-alt .sf-bar-ad { padding-left: 15px; color: var(--text-dim); font-weight: 400; }
.sf-kat-agac .kat-alt .sf-bar-kanal i { opacity: .72; }
/* ad TEK SATIR (kullanıcı 2026-09-30: "alta kaymasın") — sığmayan "…", tam adı ipucunda */
.sf-rp .sf-tablo.sf-kt td.kt-ad { white-space: nowrap; max-width: min(300px, 26vw); overflow: hidden; text-overflow: ellipsis; }
/* bütün hücreler tek satır — dar ekranda "Nature's Bounty" (marka) iki satıra bölünüp satırı 18 → 31 px uzatıyordu (1194 px) */
.sf-rp .sf-tablo.sf-kt td { white-space: nowrap; }
@media (max-width: 1280px) { .sf-rp .sf-tablo.sf-kt td.kt-ad { max-width: min(230px, 20vw); } }
.sf-rp .sf-tablo.sf-kt td.kt-ad.kt-k1 { padding-left: 14px; }
.sf-rp .sf-tablo.sf-kt td.kt-ad.kt-k2 { padding-left: 26px; }
.sf-rp .sf-tablo.sf-kt td.kt-ad.kt-k3 { padding-left: 38px; }
.sf-kt .kt-alt { margin-left: 5px; font-size: var(--fs-2xs); font-weight: 500; color: var(--text-dim); white-space: nowrap; }
.sf-kt tr.kt-s0 > td { background: var(--gold-soft); font-weight: 700; }
.sf-kt tr.kt-s1 > td { background: color-mix(in srgb, var(--zeytin) 8%, transparent); font-weight: 600; }
.sf-kt tr.kt-s2 > td { font-weight: 500; }
.sf-kt tr.kt-s3 > td { color: var(--text-dim); }
.sf-kt tr.kt-s3 > td.kt-ad { color: var(--text-primary); }
.sf-kt tbody tr.tik:hover > td { background: color-mix(in srgb, var(--gold) 16%, transparent); }
.sf-kt tr.kt-bilgi > td { color: var(--text-dim); font-style: italic; }
.sf-kt tr.kt-hata > td { color: var(--danger-text); }

/* ============================================================
   DÖNEM PİVOTU — CEO'NUN MATRİSİ (2026-09-30, Components/DonemPivotTablo.razor; Ülke & Bölge "Ülke Tablosu ve Marka
   Karışımı" yıllık görünümü). Önceki yıllar · açık yılın çeyrekleri (açılınca ayları) · açık yıl toplamı; satırlar
   Pazar → Ülke → Marka → Ürün. Başlık 1–3 satırdır → Bölgesel tablosunun dersi: her th'yi YAPIŞTIRMA (genel
   `.sf-rp-govde .sf-kaydir .sf-tablo thead th` sticky kuralı satırları top:0'a bindirir); yapışan THEAD'in kendisidir,
   ad kolonu yatay kaydırmada solda sabit → border-collapse: separate ve zeminler OPAK.
   ============================================================ */
/* sağdaki 8 px: macOS'un kayan (overlay) kaydırma çubuğu son kolonun (yıl toplamı) rakamlarını örtmesin — eski pivotta CEO bildirmişti */
.sf-rp-govde .sf-kaydir.sf-dp-kap { overflow-x: auto; scrollbar-gutter: stable; padding-right: 8px; }
.sf-dp { border-collapse: separate; border-spacing: 0; table-layout: fixed; width: 100%; font-variant-numeric: tabular-nums;
    --dp-ad-en: 185px; --dp-kol-en: 60px; --dp-n: 10;
    --dp-zemin: var(--erp-surface); --dp-cizgi: color-mix(in srgb, var(--gold) 45%, var(--erp-border));
    --dp-s0: color-mix(in srgb, var(--gold) 15%, var(--erp-surface)); --dp-s1: color-mix(in srgb, var(--zeytin) 9%, var(--erp-surface));
    --dp-hover: color-mix(in srgb, var(--gold) 22%, var(--erp-surface)); --dp-genel: color-mix(in srgb, var(--gold) 11%, var(--erp-surface)); }
/* taban genişlik bu özgüllükte: telefon bloğundaki `.sf-kaydir > .sf-tablo { min-width: max-content }` sabit düzenli bu tabloyu
   381 px'e sıkıştırıyordu (başlıklar taştı) */
.sf-kaydir > .sf-tablo.sf-dp { min-width: calc(var(--dp-ad-en) + var(--dp-n) * var(--dp-kol-en) + 4px + var(--dp-d-en) + var(--dp-e-en)); }
.sf-dp { --dp-d-en: 48px; --dp-e-en: 56px; }
.sf-dp col.dp-ad-kol { width: var(--dp-ad-en); }
.sf-dp col.dp-t-kol { width: calc(var(--dp-kol-en) + 4px); }
.sf-dp col.dp-d-kol { width: var(--dp-d-en); }
.sf-dp col.dp-e-kol { width: var(--dp-e-en); }
/* her yerde (panel VE büyük pencere): th yapışmaz, yapışan thead — genel `.sf-kaydir .sf-tablo thead th` kuralını ezer */
.sf-kaydir .sf-tablo.sf-dp thead th { position: static; }
.sf-dp thead { position: sticky; top: 0; z-index: 3; }
.sf-rp .sf-tablo.sf-dp th, .sf-rp .sf-tablo.sf-dp td { padding: 2px 2px; font-size: 10px; white-space: nowrap; line-height: 1.35; }
.sf-rp .sf-tablo.sf-dp thead th.dp-t { white-space: normal; line-height: 1.15; }
.sf-rp .sf-tablo.sf-dp thead th { background: var(--dp-zemin); text-align: right; font-size: 9px; letter-spacing: 0; color: var(--text-dim);
    vertical-align: bottom; font-weight: 700; }
.sf-rp .sf-tablo.sf-dp thead th.dp-yil, .sf-rp .sf-tablo.sf-dp thead th.dp-t { color: var(--text-primary); font-size: 9.5px; }
.sf-rp .sf-tablo.sf-dp thead th.dp-acik-yil { text-align: center; font-family: var(--font-display); font-size: 10.5px; color: var(--text-primary);
    letter-spacing: .08em; border-bottom: 1.5px solid var(--gold); }
.sf-rp .sf-tablo.sf-dp thead th.dp-q { color: var(--text-primary); }
.sf-rp .sf-tablo.sf-dp thead th.dp-q.acik { text-align: center; border-bottom: 1px solid var(--dp-cizgi); }
.sf-rp .sf-tablo.sf-dp thead th.dp-ay.kismi { font-style: italic; }
.sf-dp th.tik { cursor: pointer; user-select: none; }
.sf-dp th.tik:hover { color: var(--gold-text, var(--gold-deep)); text-decoration: underline dotted; text-underline-offset: 2px; }
.sf-rp .sf-tablo.sf-dp th.dp-ad { text-align: left; font-size: 9.5px; color: var(--text-primary); white-space: normal; line-height: 1.2; }
.sf-dp th.dp-ad small { font-weight: 500; color: var(--text-dim); letter-spacing: 0; text-transform: none; }
/* ad kolonu: sabit, yatay kaydırmada solda; uzun ürün adı kısalır (tam adı ipucunda) */
.sf-dp td.dp-ad, .sf-dp th.dp-ad { position: sticky; left: 0; z-index: 1; background: var(--dp-zemin); overflow: hidden; text-overflow: ellipsis;
    box-shadow: 1px 0 0 var(--dp-cizgi), 6px 0 7px -6px rgba(0,0,0,.28); }   /* sola kaydırılan kolon adın ALTINA girer — ayırıcı çizgi + gölge */
.sf-kaydir .sf-tablo.sf-dp thead th.dp-ad { position: sticky; left: 0; z-index: 2; }
.sf-dp td.dp-ad { padding-left: 3px; }
.sf-dp td.dp-ad.dp-k1 { padding-left: 13px; }
.sf-dp td.dp-ad.dp-k2 { padding-left: 23px; }
.sf-dp td.dp-ad.dp-k3 { padding-left: 33px; }
.sf-dp .dp-ok { display: inline-block; width: 11px; font-style: normal; color: var(--gold-text); margin-right: 1px; }
.sf-dp td .bl-ad { font-weight: 700; }
.sf-dp td.dp-ad small { margin-left: 5px; }
/* blok ayırıcıları: açık yıl bloğu ve toplam kolonu ince altın çizgiyle başlar */
.sf-dp .dp-bas, .sf-dp .dp-t { border-left: 1px solid var(--dp-cizgi); }
.sf-dp td.dp-t { font-weight: 700; color: var(--text-primary); }
.sf-dp td.neg { color: var(--danger-text); }
/* kademe zeminleri (opak — yapışık ad kolonunun altından rakam görünmesin) */
/* zeminler background-COLOR ile verilir: seçili kolonun altın katmanı (background-image) satır renginin ÜSTÜNE biner */
.sf-dp tr.dp-s0 > td { background-color: var(--dp-s0); font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--dp-cizgi); }
.sf-dp tr.dp-s1 > td { background-color: var(--dp-s1); font-weight: 600; color: var(--text-primary); }
.sf-dp tr.dp-s2 > td { background-color: var(--dp-zemin); }
.sf-dp tr.dp-s3 > td { background-color: var(--dp-zemin); color: var(--text-dim); font-size: 9.5px; }
.sf-dp tr.dp-s3 > td.dp-t { color: var(--text-primary); }
.sf-dp tr.dp-s3 .sf-kod-on { min-width: 32px; margin-right: 3px; font-size: 8.5px; }
/* ÜRÜN ADI TEK SATIR (kullanıcı 2026-09-30: "bazı şeyler aşağıya kayıyor, eşit hizada değil, alta kaymasın"): bir gün önce ad sarıyordu,
   satır yükseklikleri eşit olmuyordu. Sığmayan ad "…" ile kısalır, tam adı satırın ipucunda; büyük pencerede ad kolonu geniş. */
.sf-dp tr.tik { cursor: pointer; }
.sf-dp tbody tr.tik:hover > td, .sf-dp tbody tr.dp-s3:hover > td { background-color: var(--dp-hover); }
.sf-dp tr.dp-bilgi > td { background-color: var(--dp-zemin); color: var(--text-dim); font-style: italic; font-size: 9.5px; }
.sf-dp tr.dp-hata > td { color: var(--danger-text); }
/* genel toplam: yarı kalın — 10 haneli adet ("14.874.094") kalın yazıda 60 px'lik kolona sığmıyordu (ölçüldü) */
.sf-dp tr.dp-genel > td { background-color: var(--dp-genel); font-weight: 600; color: var(--text-primary); border-top: 1.5px solid var(--gold); }
/* GENEL TOPLAM ALTTA SABİT (CEO 2026-09-30: "genel toplam görünür olsun, sabit olursa iyi olur, diğerleri kaydırılabilsin"). Kaydırma
   sonunda satır doğal yerine oturur, üstündeki satırı örtmez (Bölgesel'deki "yayılan tablo + sabit satır" sorunu burada yok:
   satırlar panele yayılmıyor). Ad hücresi hem solda hem altta yapışık → üstte. */
/* KAYDIRMA ÇUBUĞU GENEL TOPLAM'I KESMESİN (kullanıcı 2026-09-30, ekran görüntüsüyle): macOS'un kayan (overlay) yatay çubuğu kabın
   alt ~11 px'inin ÜSTÜNE çizilir → alt kenara yapışık satırın yarısı örtülüyordu. Satır --dp-alt kadar yukarıda durur; altındaki şerit
   hücrenin gölgesiyle zemin rengine boyanır (altından kayan satır görünmez). Tablo sonundaki aynı yükseklikte boş satır (.dp-bosluk),
   kaydırma sonunda Genel Toplam'ın son veri satırının üstüne binmesini önler. */
.sf-dp { --dp-alt: 12px; }
.sf-dp tbody tr.dp-genel > td { position: sticky; bottom: var(--dp-alt); z-index: 2; box-shadow: 0 var(--dp-alt) 0 0 var(--dp-zemin); }
.sf-dp tbody tr.dp-genel > td.dp-ad { z-index: 4; box-shadow: 0 var(--dp-alt) 0 0 var(--dp-zemin), 1px 0 0 var(--dp-cizgi), 6px 0 7px -6px rgba(0,0,0,.28); }
.sf-dp tbody tr.dp-bosluk > td { height: var(--dp-alt); padding: 0; border: 0; background: transparent; }
.sf-dp tr.dp-s0 > td.neg, .sf-dp tr.dp-s1 > td.neg, .sf-dp tr.dp-genel > td.neg { color: var(--danger-text); }
/* SEÇİLİ YIL / DÖNEM ALTIN ZEMİNDE (kullanıcı 2026-09-30: "filtrede bir yıl ya da dönem seçerse o kısmın arka planı renklensin";
   Eczane tablosundaki seçili yarıyıl kolonuyla aynı dil). Kolon daralmaz, boyanır. `sec` = kolonun tamamı seçimde; `kismen` =
   bir kısmı (ör. yalnız Tem seçiliyken Ç3, ya da dönem seçiliyken tam yıl kolonu) → açık ton, başlıkta kesikli çizgi. */
.sf-dp { --dp-sec: color-mix(in srgb, var(--gold) 20%, transparent); --dp-kismen: color-mix(in srgb, var(--gold) 8%, transparent); }
.sf-dp tbody tr > td.sec { background-image: linear-gradient(var(--dp-sec), var(--dp-sec)); }
.sf-dp tbody tr > td.kismen { background-image: linear-gradient(var(--dp-kismen), var(--dp-kismen)); }
.sf-rp .sf-tablo.sf-dp thead th.sec { background-image: linear-gradient(var(--dp-sec), var(--dp-sec)); color: var(--text-primary); box-shadow: inset 0 -2px 0 var(--gold); }
.sf-rp .sf-tablo.sf-dp thead th.kismen { background-image: linear-gradient(var(--dp-kismen), var(--dp-kismen)); color: var(--text-primary);
    box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--gold) 55%, transparent); }
/* açık yılın üst başlığı altın çizgisini zaten taşıyor; seçiliyse yalnız zemin */
.sf-rp .sf-tablo.sf-dp thead th.dp-acik-yil.sec { box-shadow: none; }
/* Δ % ve EN İYİ YIL (eski F1 tablosunun iki kolonu, kullanıcı 2026-09-30: "best year muhabbeti bozulmamalı") */
.sf-rp .sf-tablo.sf-dp thead th.dp-d, .sf-rp .sf-tablo.sf-dp thead th.dp-e { color: var(--text-primary); white-space: normal; line-height: 1.15; text-align: center; }
.sf-rp .sf-tablo.sf-dp thead th.dp-d small { display: block; font-size: 7.5px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; white-space: nowrap; }
.sf-dp .dp-d { border-left: 1px solid var(--dp-cizgi); }
.sf-dp td.dp-d { font-weight: 700; font-size: 9.5px; }
.sf-dp td.dp-e { text-align: center; color: var(--text-dim); font-size: 9.5px; }
/* DEĞİŞİM RENGİ — Hüseyin Bey'in tablosundaki kural (CEO 2026-09-12): %20 ve üzeri artış MAVİ, düşüş KIRMIZI; hücre boyanır */
.sf-dp tbody tr > td.dp-yuksek { background-color: var(--celik); background-image: none; color: #fff; }
.sf-dp tbody tr > td.dp-dusus { background-color: var(--danger); background-image: none; color: #fff; }
.sf-dp .pv-rozet { padding: 1px 5px; }
/* BÜYÜK PENCERE (sayfadaki büyüteç): tablo pencereyi doldurur, kolonlar geniş, yazı bir punto büyük */
.hp.hp-dp .hp-govde { display: flex; flex-direction: column; gap: 8px; padding: 10px 14px 14px; }
.hp.hp-dp .hp-kapat { margin-left: auto; flex: none; }
.hp.hp-dp .hp-baslik > span:first-child { white-space: normal; }
.hp-dp .sf-kaydir.sf-dp-kap { flex: 1 1 auto; min-height: 0; max-height: none; overflow: auto; padding-right: 8px; scrollbar-gutter: stable; }
.hp-dp .sf-dp { --dp-ad-en: 300px; --dp-kol-en: 68px; --dp-d-en: 58px; --dp-e-en: 66px; }
.sf-rp .hp-dp .sf-tablo.sf-dp td { font-size: 11px; padding-top: 3px; padding-bottom: 3px; }
.sf-rp .hp-dp .sf-tablo.sf-dp thead th { font-size: 10px; } .sf-rp .hp-dp .sf-tablo.sf-dp thead th.dp-acik-yil { font-size: 12px; }
.sf-rp .hp-dp .sf-tablo.sf-dp thead th.dp-yil, .sf-rp .hp-dp .sf-tablo.sf-dp thead th.dp-t, .sf-rp .hp-dp .sf-tablo.sf-dp th.dp-ad { font-size: 10.5px; }
.hp-dp .sf-dp tr.dp-s3 > td, .hp-dp .sf-dp td.dp-d, .hp-dp .sf-dp td.dp-e { font-size: 10.5px; }
.hp-dp .sf-dp .pv-rozet { font-size: 8.5px; }
.hp-dp .dp-not { margin: 0; font-size: var(--fs-2xs); color: var(--text-dim); }
/* Ana firma → şube açılımı (B2): ok işareti ve girintili şube satırı */
.sf-bar .sf-ac { display: inline-block; width: 10px; color: var(--text-dim); font-size: 9px; }
.sf-bar.sf-ulke-alt .sf-bar-ad { padding-left: 12px; color: var(--text-dim); }

/* ============================================================
   VERİ HARİTASI (CEO 2026-09-12): kanat menüsünün altında, sloganın SOLUNDA düğme;
   tıklanınca "hangi rakam nereden geliyor" belgesi tam sayfa açılır.
   Kanat koyu olduğu için düğme rengi SABİT açık tondur (sidebar tuzağı).
   ============================================================ */
/* Düğme "Daha Sağlıklı" satırıyla hizalı (kullanıcı 2026-09-12): slogan bloğunun altında ince
   bir ayraç çizgisi var, bu yüzden tam ortalama düğmeyi bir tık aşağı düşürüyordu → ayracın
   yüksekliği kadar yukarı alınır. */
.kanat-slogan-satir { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.kanat-slogan-satir .kanat-harita { margin-bottom: 9px; }
.kanat-slogan-satir .kanat-slogan { flex: 1 1 auto; min-width: 0; }
.kanat-harita { flex: none; appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 8px; border-radius: 7px; border: 1px solid rgba(228, 200, 122, .38);
    background: rgba(228, 200, 122, .10); color: #E4C87A; font-family: var(--font-body);
    font-size: 10.5px; font-weight: 600; letter-spacing: .01em; line-height: 1.15; text-align: left; }
.kanat-harita:hover { background: rgba(228, 200, 122, .2); border-color: #E4C87A; color: #F3E3B8; }
.kanat-harita .ad { max-width: 62px; }

/* ============================================================
   VERİ HARİTASI BELGESİ — atlas görünümü (CEO 2026-09-12):
   zeminde çok soluk gerçek harita + enlem/boylam ızgarası, çerçevede çift kural ve
   köşe süsleri. METİN SİLİK OLMAZ: gövde yazısı tam kontrastlı (--text-primary),
   içerik katmanı zeminin üstünde yarı opak kâğıt üzerinde durur.
   ============================================================ */
.hp.vh { width: min(1180px, 95vw); height: auto; min-height: min(680px, 82vh); max-height: 92vh; position: relative;
    border: 2px solid var(--gold-deep); box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px var(--gold) inset, 0 0 40px rgba(201,168,76,.25); }
.hp.vh::before { content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 3;
    border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent); border-radius: 9px; }
/* Köşe süsleri — atlas sayfası hissi */
.hp.vh::after { content: ""; position: absolute; inset: 5px; pointer-events: none; z-index: 3; border-radius: 9px;
    background:
      linear-gradient(var(--gold), var(--gold)) left 0 top 0 / 16px 2px no-repeat,
      linear-gradient(var(--gold), var(--gold)) left 0 top 0 / 2px 16px no-repeat,
      linear-gradient(var(--gold), var(--gold)) right 0 top 0 / 16px 2px no-repeat,
      linear-gradient(var(--gold), var(--gold)) right 0 top 0 / 2px 16px no-repeat,
      linear-gradient(var(--gold), var(--gold)) left 0 bottom 0 / 16px 2px no-repeat,
      linear-gradient(var(--gold), var(--gold)) left 0 bottom 0 / 2px 16px no-repeat,
      linear-gradient(var(--gold), var(--gold)) right 0 bottom 0 / 16px 2px no-repeat,
      linear-gradient(var(--gold), var(--gold)) right 0 bottom 0 / 2px 16px no-repeat; }
.vh-zemin { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.vh-kara path { fill: var(--gold-deep); fill-opacity: .13; stroke: var(--gold-deep); stroke-opacity: .26; stroke-width: .7; }
.vh-izgara line { stroke: var(--gold-deep); stroke-opacity: .14; stroke-width: .5; }
[data-theme="dark"] .vh-kara path { fill: var(--gold-light); fill-opacity: .07; stroke-opacity: .14; }
[data-theme="dark"] .vh-izgara line { stroke: var(--gold-light); stroke-opacity: .09; }

.hp.vh .hp-baslik { position: relative; z-index: 2; background: color-mix(in srgb, var(--erp-surface) 88%, transparent);
    backdrop-filter: blur(2px); border-bottom: 1px solid var(--gold); }
.hp-baslik small { font-weight: 500; color: var(--text-dim); font-size: 11px; }
.hp-govde.vh-govde { position: relative; z-index: 2; display: grid; grid-template-columns: 214px minmax(0, 1fr); gap: 0; padding: 0; overflow: hidden; }
.vh-index { display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; overflow-y: auto;
    border-right: 1px solid var(--gold); background: color-mix(in srgb, var(--erp-surface) 76%, transparent); backdrop-filter: blur(1.5px); }
.vh-index button { appearance: none; cursor: pointer; text-align: left; padding: 6px 9px; border-radius: 6px;
    border: 1px solid transparent; background: transparent; color: var(--text-primary);
    font-family: var(--font-body); font-size: 12.5px; font-weight: 600; }
.vh-index button:hover { background: var(--gold-soft); }
.vh-index button.on { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-text); font-weight: 700; }
/* İÇERİK — zeminin üstünde kendi kâğıdında; yazı TAM KONTRAST (silik değil) */
.vh-icerik { padding: 16px 22px 22px; overflow-y: auto; font-size: 13px; line-height: 1.6;
    color: var(--text-primary); background: color-mix(in srgb, var(--erp-surface) 80%, transparent); backdrop-filter: blur(1.5px); }
.vh-icerik h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 4px; color: var(--text-primary); }
.vh-icerik h3 + p, .vh-icerik h3 + table { margin-top: 8px; }
.vh-icerik h4 { font-family: var(--font-display); font-size: 14px; font-weight: 700; margin: 18px 0 6px; color: var(--gold-text);
    border-bottom: 1px solid color-mix(in srgb, var(--gold) 40%, transparent); padding-bottom: 3px; }
.vh-icerik p { margin: 0 0 10px; color: var(--text-primary); }
.vh-icerik ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 8px; }
.vh-icerik li { padding-left: 2px; color: var(--text-primary); }
.vh-icerik b { font-weight: 700; }
.vh-icerik .sf-kod { font-family: var(--font-mono); font-size: 11.5px; color: var(--gold-text);
    background: color-mix(in srgb, var(--gold) 16%, transparent); padding: 1px 5px; border-radius: 3px; white-space: nowrap; }
.vh-tablo { background: transparent; }
.vh-icerik ul + table, .vh-icerik table + ul { margin-top: 10px; }   /* liste ↔ tablo arası (Bölgesel Satış bölümü) */
.vh-tablo td { vertical-align: top; padding: 7px 10px 7px 0; color: var(--text-primary); }
.vh-tablo td:first-child { white-space: nowrap; width: 1%; }
.vh-tablo th { color: var(--gold-text); }
.vh-not { color: var(--text-primary); opacity: .82; font-size: 12px; border-left: 2px solid var(--gold);
    padding-left: 10px; background: color-mix(in srgb, var(--gold) 7%, transparent); padding-top: 4px; padding-bottom: 4px; border-radius: 0 4px 4px 0; }
@media (max-width: 860px) {
    .hp-govde.vh-govde { grid-template-columns: 1fr; }
    .vh-index { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--erp-border); }
}

/* ============================================================
   ÜRÜN GRUBU EŞLEME EKRANI (CEO J3, 2026-09-12). Eşlenmemiş ürünler üstte ve
   kırmızı işaretli; elle eşlenmiş satırlar altın zeminli. DB'ye yazma yok —
   eşleme panelin kendi dosyasında durur, ekranda da böyle yazar.
   ============================================================ */
.ug-page .page-sub { max-width: 720px; }
.ug-ozet { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 10px 0 12px; }
.ug-cip { display: inline-flex; align-items: baseline; gap: 5px; padding: 4px 10px; border-radius: 999px;
    border: 1px solid var(--erp-border-strong); background: var(--erp-surface); font-size: 12px; }
.ug-cip b { font-size: 14px; font-weight: 700; }
.ug-cip.uyari { border-color: var(--danger); color: var(--danger-text); background: color-mix(in srgb, var(--danger) 8%, transparent); }
.ug-not { font-size: 11px; color: var(--text-dim); flex: 1 1 260px; min-width: 0; }
.ug-arac { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 8px; }
.ug-ara { flex: 0 1 320px; padding: 6px 10px; border-radius: 7px; border: 1px solid var(--erp-border-strong);
    background: var(--erp-surface); color: var(--text-primary); font-family: var(--font-body); font-size: 12.5px; }
.ug-ara:focus { outline: none; border-color: var(--gold); }
.ug-onay { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); cursor: pointer; }
.ug-sayi { margin-left: auto; font-size: 11px; color: var(--text-dim); white-space: nowrap; }
.ug-secim { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-dim); }
.ug-secim select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--erp-border-strong);
    background: var(--erp-surface); color: var(--text-primary); font-family: var(--font-body); font-size: 12px; cursor: pointer; }
.ug-secim select:focus { outline: none; border-color: var(--gold); }
.ug-arac-alt { margin-top: -2px; margin-bottom: 10px; }
.ug-arac-alt .ug-not { flex: 1 1 auto; order: -1; }
.ug-yeni { flex: 0 0 200px; }
.ug-ekle { appearance: none; cursor: pointer; padding: 6px 12px; border-radius: 7px; font-size: 12px; font-weight: 600;
    border: 1px solid var(--gold); background: var(--gold-soft); color: var(--gold-text); font-family: var(--font-body); }
.ug-ekle:disabled { opacity: .45; cursor: default; }
.ug-ekle:not(:disabled):hover { background: var(--gold); color: #2B220C; }
.ug-cip-tik { appearance: none; cursor: pointer; font-family: var(--font-body); }
.ug-cip-tik:hover { border-color: var(--gold); }
.ug-cip.secili { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-text); }
.ug-panel { padding: 0; overflow: hidden; }
.ug-kaydir { max-height: calc(100dvh - 300px); overflow-y: auto; }
.ug-tablo { width: 100%; }
.ug-tablo th { position: sticky; top: 0; z-index: 1; background: var(--erp-surface); padding: 8px 8px 7px; }
.ug-tablo td { padding: 4px 8px; }
.ug-tablo tr.ug-eksik > td { background: color-mix(in srgb, var(--danger) 12%, transparent); }
.ug-tablo tr.ug-eksik > td:first-child { box-shadow: inset 3px 0 0 var(--danger); font-weight: 700; }
.ug-tablo tr.ug-elle > td { background: var(--gold-soft); }
/* Grup hücreleri SEÇİM KUTUSU (CEO 2026-09-12: "yazmalı değil seçmeli olsun") */
.ug-giris { width: 100%; min-width: 118px; padding: 3px 6px; border-radius: 5px; font-size: 11.5px;
    border: 1px solid var(--erp-border); background: var(--erp-surface); color: var(--text-primary); font-family: var(--font-body); }
select.ug-giris { cursor: pointer; appearance: auto; }
.ug-giris:focus { outline: none; border-color: var(--gold); }
.ug-giris.elle { border-color: var(--gold); font-weight: 600; }
.ug-rozet { margin-left: 6px; padding: 0 5px; border-radius: 4px; font-size: 9.5px; font-weight: 600;
    border: 1px solid var(--celik); color: var(--celik); white-space: nowrap; }
.ug-geri { appearance: none; cursor: pointer; width: 22px; height: 22px; border-radius: 5px;
    border: 1px solid var(--erp-border-strong); background: var(--erp-surface); color: var(--text-dim); font-size: 12px; }
.ug-geri:hover { border-color: var(--gold); color: var(--gold-text); }

/* Tedarikçi · Marka · Ürün paneli (CEO 2026-09-12: "isimler kesilmiş"): çubuklar yan yana iki dar
   kolonda değil, panelin tam genişliğinde alt alta — tedarikçi adları tam okunur. */
.sf-tedarik-ust { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; }
.sf-tedarik-ust .sf-alt-baslik { font-size: 10px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--text-dim); margin: 2px 0 2px; }
.sf-tedarik-ust .sf-bar-ad { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* SATINALMA SAĞ SÜTUNU (CEO 2026-09-12): "ithalat çerçevesindeki boşluğu al, küçült; Tedarikçi ·
   Marka · Ürün'ü o kısma doğru genişlet ve 10'dan fazla ürün listele."
   İthalat paneli İÇERİĞİ KADAR (flex:none), kalan yüksekliğin tamamı alttaki panele gider. */
.sf-rp-govde .sf-sat-sag { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.sf-rp-govde .sf-sat-sag > .sf-p-ithalat { flex: 0 0 auto; }
.sf-rp-govde .sf-sat-sag > .sf-p-ithalat .sf-kaydir { flex: 0 0 auto; max-height: none; }
.sf-rp-govde .sf-sat-sag > .sf-p-tedarik { flex: 1 1 auto; min-height: 0; }
/* Ülke lejantı tıklanabilir (Marka & Ürün ilk 10 tablosu): ülkeye basınca sayfa o ülkeye filtrelenir */
.sf-lejant-tik button { appearance: none; cursor: pointer; border: 1px solid transparent; background: transparent;
    color: inherit; font: inherit; padding: 1px 5px; border-radius: 5px; display: inline-flex; align-items: center; }
.sf-lejant-tik button:hover { background: var(--gold-soft); border-color: var(--gold); }
.sf-lejant-tik button.secili { background: var(--gold-soft); border-color: var(--gold); color: var(--gold-text); font-weight: 700; }
.sf-serit i.tik { cursor: pointer; }
.sf-serit i.tik:hover { filter: brightness(1.15); box-shadow: inset 0 0 0 1px var(--erp-kalin-cizgi); }

/* ============================================================
   IMS KATEGORİ KARTLARI — ışıklı hover (CEO 2026-09-12: "sönük kalmasın").
   Kart üzerine gelince altın kenar + dışa vuran yumuşak ışık + hafif yükselme;
   seçili kart sürekli ışıklı durur. prefers-reduced-motion'da hareket yok.
   ============================================================ */
.ims-kart { position: relative; overflow: hidden;
    transition: border-color .18s, background .18s, box-shadow .22s, transform .18s; }
.ims-kart::before { content: ""; position: absolute; inset: -40% -10%; pointer-events: none; opacity: 0;
    background: radial-gradient(120px 80px at 50% 0%, color-mix(in srgb, var(--gold) 55%, transparent), transparent 70%);
    transition: opacity .25s; }
.ims-kart:hover { border-color: var(--gold); background: var(--gold-soft); transform: translateY(-2px);
    box-shadow: 0 8px 22px -10px rgba(201, 168, 76, .75), 0 0 0 1px var(--gold) inset; }
.ims-kart:hover::before { opacity: .55; }
.ims-kart.secili { border-color: var(--gold); background: var(--gold-soft);
    box-shadow: 0 0 0 1px var(--gold) inset, 0 6px 18px -10px rgba(201, 168, 76, .8); }
.ims-kart.secili::before { opacity: .4; }
.ims-kart.biz { border-color: var(--gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent) inset; }
.ims-kart .ims-kart-pay, .ims-kart .ims-kart-ad, .ims-kart .ims-kart-fark, .ims-kart .ims-kart-alt { position: relative; }
/* TUZAK: yazıları ::before ışığının üstüne çıkarmak için position:relative verildi; konumlanmış
   öğeler DOM sırasına göre boyandığı için ad satırı, kendisinden ÖNCE gelen büyüteç düğmesini
   örtüyor ve düğme tıklanamaz oluyordu (2026-09-12'de ölçüldü: elementFromPoint düğmenin tam
   merkezinde .ims-kart-ad döndürüyordu). Düğmeye z-index ver. */
.ims-kart-buyut { z-index: 2; }
.ims-kart:hover .ims-kart-pay { color: var(--gold-text); }
@media (prefers-reduced-motion: reduce) { .ims-kart:hover { transform: none; } }

/* ============================================================
   BÜYÜTEÇ POPUP'I — "ALTIN VİTRİN" (CEO seçimi 2026-09-12). Geniş, içerik kadar yüksek.
   ============================================================ */
.hp.vitrin { width: min(1120px, 94vw); height: auto; max-height: 92vh; }
.hp.vitrin .hp-baslik > span:first-child { font-size: 20px; letter-spacing: -.01em; }
.hp.vitrin .sf-bar { min-height: 34px; font-size: 13.5px; border-radius: 8px; padding: 0 10px;
    transition: background .18s, box-shadow .18s, transform .18s; }
.hp.vitrin .sf-bar:hover { transform: translateX(2px); }
.hp.vitrin .sf-bar-kanal { height: 18px; border-radius: 6px; overflow: hidden; }
.hp.vitrin .sf-bar-deger { font-size: 15px; font-weight: 700; }

/* ---- ALTIN VİTRİN (CEO seçimi 2026-09-12): sıcak ışık havuzu, çift altın çerçeve,
       parlayan çubuklar. Denenen "cam" ve "gece sahne" tasarımları kaldırıldı. ---- */
.hp.vitrin { background:
      radial-gradient(900px 380px at 50% -8%, rgba(201,168,76,.30), transparent 62%),
      linear-gradient(180deg, #FFFDF7 0%, #F6EFE0 100%);
    border: 2px solid var(--gold-deep); border-radius: 18px;
    box-shadow: 0 40px 90px rgba(40,30,10,.5), 0 0 60px rgba(201,168,76,.35), 0 0 0 1px var(--gold) inset; }
.hp.vitrin::after { content: ""; position: absolute; inset: 6px; border-radius: 13px; pointer-events: none;
    border: 1px solid color-mix(in srgb, var(--gold) 55%, transparent); }
.hp.vitrin .hp-baslik { border-bottom: 1px solid color-mix(in srgb, var(--gold) 50%, transparent); background: transparent; }
.hp.vitrin .sf-bar { background: rgba(255,255,255,.55); box-shadow: 0 1px 0 rgba(255,255,255,.9) inset; }
.hp.vitrin .sf-bar:hover { background: #fff; box-shadow: 0 6px 18px -10px rgba(138,106,46,.8); }
.hp.vitrin .sf-bar-kanal { background: rgba(138,106,46,.10); }
.hp.vitrin .sf-bar-kanal i { background: linear-gradient(180deg, #F0DCA0, #C9A84C 45%, #A27E2C);
    box-shadow: 0 0 14px rgba(201,168,76,.85), 0 1px 0 rgba(255,255,255,.5) inset; }
.hp.vitrin .sf-bar.secili { background: #fff; box-shadow: 0 0 0 1.5px var(--gold) inset, 0 8px 24px -12px rgba(201,168,76,1); }
.hp.vitrin .sf-bar.secili .sf-bar-kanal i { box-shadow: 0 0 20px rgba(201,168,76,1); }



/* ============================================================================
   ECZANE SATIŞ DATASI — CEO 5. TUR (2026-09-15)
   ============================================================================ */
/* ECZANE TABLOSU: seçili dönem kolonu altın zeminli; seçili satır vurgulu; dönem kolonları dar. */
.sf-ecz-tablo th.on, .sf-ecz-tablo td.on { background: color-mix(in srgb, var(--gold) 14%, transparent); }
.sf-ecz-tablo thead th.on { box-shadow: inset 0 -2px 0 var(--gold); }
.sf-ecz-tablo tbody tr { cursor: pointer; }
.sf-ecz-tablo tbody tr.on td { background: color-mix(in srgb, var(--gold) 22%, transparent); font-weight: 600; }
.sf-ecz-tablo td.sf-sayi-ikincil { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* ECZANE GRAFİĞİ: seçili dönem altın, diğerleri kum; değer çubuğun üstünde. */
.ecz-grafik .ecz-bar { fill: #DEC98A; }
.ecz-grafik .ecz-bar.on { fill: var(--gold); stroke: #A8873A; stroke-width: 1; }
.ecz-grafik .ecz-deger { font-family: var(--font-body); font-size: 11px; font-weight: 700; fill: var(--text-primary); }
.ecz-grafik .ecz-etiket { font-family: var(--font-body); font-size: 10.5px; fill: var(--text-dim); }
.ecz-grafik .ecz-etiket.on { fill: var(--gold-text); font-weight: 700; }
.sf-p-ecztrend .sf-serit-takvim { flex-wrap: wrap; }


/* IMS — SOLGAR vs RAKİP ÇUBUK GRAFİK + RAKİP SEÇİMİ (CEO 2026-09-15) */
.ims-cubuk .ims-bar-biz { fill: var(--gold); }
.ims-cubuk .ims-bar-rakip { fill: var(--celik, #5B7FA6); opacity: .9; }
.ims-rakip-sec { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.ims-rakip-sec select { appearance: none; cursor: pointer; font-family: var(--font-body); font-size: 11px; font-weight: 700;
    color: var(--text-primary); background: var(--erp-surface); border: 1px dashed var(--erp-border-strong); border-radius: 6px;
    padding: 1px 16px 1px 6px; max-width: 150px; text-overflow: ellipsis;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%236B665C'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 5px center; }
.ims-rakip-sec select:hover { border-color: var(--gold); }
.ims-deger-kaydir { overflow-x: auto; margin-top: 8px; }
.ims-deger-tablo { border-collapse: collapse; font-family: var(--font-body); font-size: 10.5px; white-space: nowrap; }
.ims-deger-tablo th, .ims-deger-tablo td { padding: 3px 6px; text-align: right; border-bottom: 1px solid var(--erp-border); font-variant-numeric: tabular-nums; }
.ims-deger-tablo thead th { color: var(--text-dim); font-weight: 600; }
.ims-deger-tablo tbody th { text-align: left; font-weight: 700; }
.ims-deger-tablo tr.biz th { color: var(--gold-text); }
.ims-deger-tablo tr.rakip th { color: var(--celik, #5B7FA6); }


/* ECZANE GRAFİĞİ — GÖZ ALICI (kullanıcı 2026-09-15: "renkler çok aynı, çerçeve göz alıcı değil, sönük;
   efektlerle güzelleştir"). Panel altın ışıklı çerçeve; seçili dönem parlak altın gradyan + hâle, diğer dönemler
   ÇELİK (panel genelindeki "geçen dönem = çelik" diliyle aynı, kum rengi yeterince ayrışmıyordu); çubuklar
   açılışta yükselir; değerler kalın, seçili değer altın. */
.sf-panel.sf-p-ecztrend { border-color: var(--gold); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 9%, var(--erp-surface)) 0%, var(--erp-surface) 55%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--gold) 70%, transparent), inset 0 1px 0 color-mix(in srgb, #fff 60%, transparent); }
.sf-panel.sf-p-ecztrend .sf-panel-baslik > span:first-child { color: var(--gold-text); }
.sf-p-ecztrend .sf-grafik-kap { padding: 6px 4px 0; }
.ecz-grafik { overflow: visible; }
/* SVG grafiklerde sol eksen yazısı ve çizgileri (Eczane yarıyıl grafiği, eczane/mümessil grafiği) */
.sf-svg .sf-eksen-sol { font-family: var(--font-body); font-size: 9px; fill: var(--text-dim); font-variant-numeric: tabular-nums; text-anchor: end; }
.sf-svg .sf-eksen-cizgi { stroke: color-mix(in srgb, var(--text-dim) 60%, transparent); stroke-width: 1; }
.sf-svg .sf-eksen-taban { stroke: color-mix(in srgb, var(--text-dim) 70%, transparent); stroke-width: 1; }
.ecz-grafik .sf-eksen-sol { font-size: 10px; }
.ecz-grafik-kisa .sf-eksen-sol { font-size: 11.5px; }
.ecz-grafik-buyuk .sf-eksen-sol { font-size: 13px; }
.ecz-grafik .sf-kilavuz { stroke: color-mix(in srgb, var(--erp-border) 70%, transparent); stroke-dasharray: 3 4; }
.ecz-grafik .ecz-bar { fill: url(#eczCelik) #6F91B5; stroke: #4E6D8F; stroke-width: 1; rx: 5;
    transform-box: fill-box; transform-origin: bottom center; animation: ecz-yukselen .7s cubic-bezier(.2,.8,.2,1) both; }
.ecz-grafik .ecz-bar.on { fill: url(#eczAltin) #D9B85C; stroke: #A8873A; stroke-width: 1.2;
    filter: drop-shadow(0 6px 10px rgba(201,168,76,.45)) drop-shadow(0 0 2px rgba(255,236,170,.9)); }
.ecz-grafik .ecz-deger { font-size: 11.5px; font-weight: 800; fill: var(--text-primary); letter-spacing: -.01em; }
.ecz-grafik .ecz-bar.on + .ecz-deger { fill: var(--gold-text); font-size: 12.5px; }
.ecz-grafik .ecz-etiket { font-size: 10.5px; font-weight: 600; fill: var(--text-dim); }
.ecz-grafik .ecz-etiket.on { fill: var(--gold-text); font-weight: 800; }
@keyframes ecz-yukselen { from { transform: scaleY(0); opacity: .2; } to { transform: scaleY(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ecz-grafik .ecz-bar { animation: none; } }
[data-theme="dark"] .sf-panel.sf-p-ecztrend { background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 14%, var(--erp-surface)) 0%, var(--erp-surface) 60%); }


/* ============================================================================
   ECZANE + IMS — kullanıcı turu 2026-09-15 (akşam)
   ============================================================================ */
/* GÖRÜNÜM (şeridin içinde, diğer kutulardan BÜYÜK, ışıklı çerçeve; hover'da parlar) */
.sf-gorunum { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; border: 1px solid var(--gold);
    background: color-mix(in srgb, var(--gold) 8%, var(--erp-surface));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 35%, transparent), 0 6px 18px -10px color-mix(in srgb, var(--gold) 80%, transparent);
    transition: box-shadow .2s; }
.sf-gorunum:hover { box-shadow: 0 0 0 1px var(--gold), 0 0 22px -4px color-mix(in srgb, var(--gold) 85%, transparent), 0 8px 22px -10px color-mix(in srgb, var(--gold) 80%, transparent); }
.sf-gorunum button { appearance: none; cursor: pointer; border: 1px solid transparent; border-radius: 7px; background: transparent;
    font-family: var(--font-display); font-size: 12.5px; font-weight: 700; letter-spacing: .02em; color: var(--text-dim);
    padding: 5px 13px; line-height: 1.1; transition: color .15s, background .15s, box-shadow .15s; }
.sf-gorunum button:hover { color: var(--gold-text); background: var(--gold-soft); border-color: color-mix(in srgb, var(--gold) 60%, transparent); }
.sf-gorunum button.on { color: var(--murekkep); background: linear-gradient(180deg, #F0DC98, var(--gold)); border-color: #A8873A;
    box-shadow: 0 0 10px -2px color-mix(in srgb, var(--gold) 90%, transparent), inset 0 1px 0 rgba(255,255,255,.55); }
/* ŞERİTTEKİ KUTULAR EŞİT (kullanıcı: "kutular eşit ve aynı olsun") — anahtar grupları ve select'ler aynı boy/köşe/yazı */
.sf-filtre-serit .sf-mini-tgl { height: 26px; border-radius: 7px; margin-left: 0; border-color: var(--erp-border-strong); }
.sf-filtre-serit .sf-mini-tgl button { height: 24px; font-size: 11px; padding: 0 10px; letter-spacing: 0; }
.sf-filtre-serit .sf-mini-secim select { height: 26px; font-size: 11px; padding: 0 22px 0 8px; border-radius: 7px; border-color: var(--erp-border-strong); }
.sf-filtre-serit .sf-serit-temizle, .sf-filtre-serit .sf-serit-yenile { height: 26px; }
/* ECZANE GRAFİĞİ paneli: içerik dikeyde ortalı, grafik panel genişliğinde; tıklanabilir */
.sf-p-ecztrend .sf-grafik-kap { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 4px 6px; }
.sf-p-ecztrend .sf-grafik-kap > svg { width: 100%; height: auto; max-height: 100%; }
.ecz-grafik-tik { cursor: zoom-in; border-radius: 10px; transition: background .15s; }
.ecz-grafik-tik:hover { background: color-mix(in srgb, var(--gold) 7%, transparent); }
.ecz-buyut { display: flex; flex-direction: column; gap: 12px; }
.ecz-buyut .ecz-grafik-buyuk { width: 100%; height: auto; }
.ecz-grafik-buyuk .ecz-deger { font-size: 14px; } .ecz-grafik-buyuk .ecz-etiket { font-size: 13px; } .ecz-grafik-buyuk .ecz-bar.on + .ecz-deger { font-size: 16px; }
/* IMS: Solgar aylık grafiğinde ALTIN (bu yıl) SOLDA (kullanıcı: "sarı olanlar sağda değil solda olsun") */
.ims-solda .sfcg-bu.gecmeli { order: -1; margin-left: 0; margin-right: -13%; }
/* IMS: ışıklı çerçeveli paneller (Solgar — Aylık Satış · Pazar Payı — Yıllık Seyir) */
.sf-panel.ims-p-isik { border-color: color-mix(in srgb, var(--gold) 70%, var(--erp-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent), 0 12px 30px -18px color-mix(in srgb, var(--gold) 70%, transparent); transition: box-shadow .2s, border-color .2s; }
.sf-panel.ims-p-isik:hover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 26px -6px color-mix(in srgb, var(--gold) 85%, transparent), 0 14px 34px -18px color-mix(in srgb, var(--gold) 80%, transparent); }
/* IMS: Pazar Payı — Yıllık Seyir (yeniden tasarım) */
.ims-pay .biz-alan { fill: url(#payAlan) rgba(217,184,92,.25); }
.ims-pay .biz-hale { stroke: color-mix(in srgb, var(--gold) 55%, transparent); stroke-width: 9; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ims-pay .biz { stroke: #B8912F; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ims-pay .rakip { stroke: #8FA6C0; stroke-width: 1.5; }
.ims-pay .biz-n { fill: #F3DE9A; stroke: #A8873A; stroke-width: 2; }
.ims-pay .biz-deger { font-size: 11.5px; font-weight: 800; fill: var(--gold-text); }
.ims-pay text { font-size: 10.5px; }
/* IMS: rakip popup çubukları — eksen ve dik değerler */
.ims-cizgi .ims-eksen { font-size: 10px; fill: var(--text-dim); }
.ims-cizgi .ims-deger-biz { font-size: 9.5px; font-weight: 700; fill: var(--gold-text); }
.ims-cizgi .ims-deger-rakip { font-size: 9.5px; font-weight: 600; fill: var(--celik, #5B7FA6); }
/* IMS: kategori kartları ışıklı — hover'sız da; kaydırma kutusu gölgeyi kesmesin */
.ims-kartlar { padding: 5px 4px 6px; }
.ims-kart { border-color: color-mix(in srgb, var(--gold) 45%, var(--erp-border)); background: linear-gradient(180deg, color-mix(in srgb, var(--gold) 7%, var(--erp-bg)), var(--erp-bg));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 18%, transparent), 0 6px 14px -10px color-mix(in srgb, var(--gold) 70%, transparent); overflow: visible; }
.ims-kart:hover, .ims-kart.secili { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px -4px color-mix(in srgb, var(--gold) 85%, transparent); }

/* ECZANE SATIŞ DATASI — serbest kipte (Bölge & İl · Ürünler) kaydırma kutusu IZGARAYA göre sınırlı: 62vh bu sayfada
   ızgarayı aşıyordu (şerit + KPI ~440px yer tutar; ölçüldü 2026-09-15: 860px pencerede kutuya 421px kalıyor). */
.ecz-govde.serbest .sf-kaydir { max-height: min(62vh, calc(100vh - 440px)); }

/* MÜMESSİL görünümü (CEO 2026-09-18): şeritteki küçük eylem düğmesi ve "(mümessil yok)" satırı */
.sf-mini-dugme { appearance: none; cursor: pointer; font: inherit; font-size: 10px; font-weight: 600; letter-spacing: .02em; padding: 2px 8px;
    border-radius: 999px; border: 1px solid var(--erp-border-strong); background: transparent; color: var(--text-primary); }
.sf-mini-dugme:hover { border-color: var(--gold); color: var(--gold-text); box-shadow: 0 0 10px -4px var(--gold); }
.sf-ecz-tablo tr.sf-satir-yok td.sf-urun { font-style: italic; }

/* STOK & LOJİSTİK — CEO 2026-09-25 (önizlemede onaylandı):
   • "Açık sipariş" kolonu (merkeze verilmiş, henüz yola çıkmamış) altın zeminli; kırmızı satırda iki ton karışır.
   • Sağ alttaki "Stokta Olmayan ve Kritik Ürünler" panelinde dört DURUM KARTI: karta tıkla → liste o duruma iner. */
.sf-tablo td.sf-acik-sip { background: color-mix(in srgb, var(--gold) 10%, transparent); font-weight: 600; }
.sf-tablo tr:has(.sf-rozet.stok-yok) td.sf-acik-sip { background: color-mix(in srgb, var(--gold) 14%, color-mix(in srgb, var(--danger) 7%, transparent)); }
.sf-tablo tr:has(.sf-rozet.stok-yolda, .sf-rozet.stok-antrepo) td.sf-acik-sip { background: color-mix(in srgb, var(--gold) 12%, color-mix(in srgb, var(--danger) 3.5%, transparent)); }
.sf-kaydir .sf-tablo thead th.sf-acik-sip { box-shadow: inset 0 -2px 0 var(--gold); color: var(--gold-text); }
.sf-acik-sip .sf-sifir { color: var(--text-dim); opacity: .55; font-weight: 400; }
.sf-varis { font-size: 8.5px; color: var(--text-dim); font-weight: 500; }
.sf-varis.gecmis { color: var(--danger-text); font-weight: 700; }
.sf-durum-kartlar { flex: 0 0 auto; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 3px 0 5px; }
.sf-durum-kart { appearance: none; font: inherit; text-align: left; cursor: pointer; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    padding: 5px 8px; border: 1px solid var(--erp-border-strong); border-radius: 8px; background: var(--erp-surface); color: var(--text-primary);
    transition: box-shadow .15s, transform .15s; }
.sf-durum-kart:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--gold), 0 8px 18px -12px color-mix(in srgb, var(--gold) 80%, transparent); }
.sf-durum-kart:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.sf-durum-kart b { font-size: 17px; font-weight: 700; line-height: 1.05; font-variant-numeric: tabular-nums; }
.sf-durum-kart b small { font-size: 9.5px; font-weight: 600; color: var(--text-dim); }
.sf-durum-kart .sf-durum-alt { font-size: 9.5px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sf-durum-kart.stok-yok { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--erp-surface)); }
.sf-durum-kart.stok-gelen { border-color: color-mix(in srgb, var(--danger) 55%, transparent); }
.sf-durum-kart.kritik { border-color: color-mix(in srgb, #2F6FB5 60%, transparent); }
.sf-durum-kart.bos { opacity: .55; }
.sf-durum-kart.secili { box-shadow: 0 0 0 2px var(--gold), 0 8px 20px -10px color-mix(in srgb, var(--gold) 90%, transparent); }
@media (prefers-reduced-motion: reduce) { .sf-durum-kart:hover { transform: none; } }
@media (max-width: 700px) { .sf-durum-kartlar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================
   TABLET / DAR EKRAN ÇAKIŞMA DÜZELTMELERİ (denetim 2026-09-16, 1194×834 — CEO panele tabletten bakıyor).
   1512×860'ta (masaüstü) bu ekranlarda ÇAKIŞMA YOK, bu yüzden kurallar yalnız dar ekranda girer.
   DOSYA SONUNDA durmaları ŞART: hedefledikleri kuralların (.sfcg-yazi, .sf-zincir small) tanımları
   yukarıda ve AYNI özgüllükte — daha önce yazılırsa kaybederler (2026-09-16'da bir kez yaşandı).
   ============================================================ */
/* BÖLGE ↔ ÜRÜN ÇAPRAZLARI (CEO 2026-09-21): Eczaneler görünümünde sağ alt "Bölgelere Göre Satış" (dar sütun → değer/yüzde
   kolonları dar, liste kart içinde kayar), Bölge & İl görünümünde bölge tablosunun altında "En Çok Satan Ürünler". */
.sf-p-bolgebar .sf-bar { --b-deger: 70px; --b-yoy: 46px; }
.sf-p-bolgebar .sf-kaydir { padding-right: 2px; }
.sf-p-bolgeurun .sf-bar { --b-deger: 84px; }
/* Bölge & İl serbest yükseklikte: il tablosu sağ üstte kısa tutulur ki altına ürün paneli sığsın (tek ekran) */
.ecz-govde.serbest .sf-p-iller .sf-kaydir { max-height: min(40vh, calc(100vh - 640px)); }
/* Kısa eczane grafiği (yarım panel): yazılar viewBox biriminde büyük → 1194×834'te ≥ 8 px */
.ecz-grafik-kisa .ecz-deger { font-size: 13px; } .ecz-grafik-kisa .ecz-bar.on + .ecz-deger { font-size: 14px; } .ecz-grafik-kisa .ecz-etiket { font-size: 12px; }

@media (max-width: 1280px) {
    /* (a) Aylık çubukların değer yazısı komşu ayınkine biniyordu (9 haneli adetlerde 4×9 px).
       Panoda kap .sf-govde, rapor sayfalarında .sf-rp-govde → ikisi de yazılır, yoksa biri 9,5 px kalır. */
    /* İKİ ONDALIK (2026-09-30) yazıyı bir karakter uzattı → komşu ayla 3–4 px çakışma (pano, Satış & Karlılık, 1194 px). Ölçüldü:
       8 px korunup harf aralığı −.08em + kapsül yan boşluğu 1 px → çakışma < 1 px (yazı büyüklüğü düşürülmedi). */
    .sfcg-yazi, .sf-rp-govde .sfcg-yazi { font-size: 8px; letter-spacing: -.08em; padding: 0 1px; }
    /* (b) Popup grafiğinde çubuk aralığı ~40 px'e düşüyor: değer yazısı gizlenir, değerler
       popup'ın kendi aylık TABLOSUNDA zaten yazar (bilgi kaybı yok). */
    .hp-govde .sfcg-yazi { display: none; }
    /* (c) Liste başlığındaki anahtar (Ana firma | Şube) hücresinden taşıp sağdaki "Net satış"a biniyordu. */
    .sf-liste-baslik:has(.sf-mini-tgl) { white-space: normal; }
    /* (d) Tedarik zinciri şeridinde uzun etiket ("Bekleyen satın alma siparişi") aradaki okun üstüne taşıyordu. */
    .sf-zincir > span small, .sf-zincir-ic > span small, .sf-zincir-grup > em { white-space: normal; text-align: center; line-height: 1.15; }
    /* (e) İLK ve SON çubuğun değer yazısı ortalıyken grafiğin DIŞINA taşıp KOMŞU PANELİN tablosuna
       biniyordu (IMS Kategoriler, 1194 px). Uçlarda yazı çubuğun kenarına yaslanır → içeride kalır.
       Aynı "uçlarda yasla" kuralı SVG grafiklerde de var (IMS yıl ekseni, Yıllık Seyir etiketleri). */
    .sfcg-ay:first-child .sfcg-yazi { left: 0; transform: none; }
    .sfcg-ay:last-child .sfcg-yazi { left: auto; right: 0; transform: none; }
    /* (f) SERBEST gövdede panel ızgara satırından TAŞIYORDU (IMS Kategoriler · Ürünler, 1194×834).
       `serbest` satırları içeriğe göre büyür ve panel `align-self: start` ile kendi içerik boyunu alır;
       ekran kısaldığında ızgara satırı içerikten küçük hesaplanıyor (panelin `overflow:hidden` +
       `min-height:0` olması otomatik asgari boyu 0 yapar) ve panel ALTTAKİ satırın üstüne biniyordu —
       ölçüldü 2026-09-17: sol panel 271 px, satır 262 px, alt panelin başlığıyla 3 px binme; taramada
       tablo satırları alttaki grafiğin değer yazılarına ve panel başlığına giriyordu (16 kesişim).
       Dar ekranda panel satıra YASLANIR ve uzun liste kendi içinde kayar (masaüstünde serbest davranış
       aynen kalır: 1512×860'ta bu kural girmez, çerçeve boşluğu tartışması değişmez). */
    .sf-rp-govde.serbest > .sf-panel { align-self: stretch; }
    .sf-rp-govde.serbest .sf-kaydir { flex: 1 1 auto; max-height: none; }
    .sf-rp-govde.serbest .sf-grafik-kap { flex: 1 1 auto; }
    /* (g) IMS rakip kartı başlığı: rakip açılırı + firma adı, sağdaki değerin üstüne biniyordu
       (8 kesişim, 1194 px). `.ims-rakip-sec` kutusu `min-width:0` ile daralıyor ama İÇİNDEKİ select
       (max-width 150 px, kendi asgari genişliği en uzun seçenek kadar) daralmadığı için 39 px taşıyordu.
       Select artık gerçekten daralır (min-width 0), firma adı üç noktayla kısalır, DEĞER hiç kırpılmaz;
       `overflow:hidden` daha da dar ekranda (1024 px) emniyet ağıdır. Marka adının tamamı açılır listede
       ve kartın ipucunda durur. */
    .ims-mini-bas > span:last-child { flex: 0 0 auto; white-space: nowrap; }
    .ims-rakip-sec { flex: 0 1 auto; overflow: hidden; }
    .ims-rakip-sec select { min-width: 0; flex: 0 1 auto; max-width: 104px; }
    .ims-rakip-sec small { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* TABLET EKİ (2026-09-21, dosya sonunda kalmalı): Bölge & İl serbest görünümünde il tablosu tablette de kısa kalsın —
   yukarıdaki genel tablet kuralı serbest kaydırma kutularına max-height:none verir, o zaman 81 il sayfayı kaydırır. */
@media (max-width: 1280px) {
    .ecz-govde.serbest .sf-p-iller .sf-kaydir { max-height: calc(100vh - 610px); }
    /* kısa eczane grafiği tablette 0,56 ölçekle çizilir → yazı ≥ 8 px kalsın */
    .ecz-grafik-kisa .ecz-deger { font-size: 14.5px; } .ecz-grafik-kisa .ecz-bar.on + .ecz-deger { font-size: 15.5px; } .ecz-grafik-kisa .ecz-etiket { font-size: 13px; }
    /* STOK & LOJİSTİK (2026-09-25): "Açık sipariş" kolonu ve uzun "OUT OF STOCK" rozeti tablette (1194×834) ürün tablosunu
       108 px, durum listesini 128 px taşırıyordu — Durum kolonu sağda görünmez kalıyordu (ölçüldü: ürün adı 220 px'lik
       tavanda, rozet 99 px). Ad daha erken kısalır (tam adı satırın ipucunda), uzun başlıklar iki satıra iner, rozet
       sıkışır, listedeki varış tarihi yalnız ipucunda kalır. Yoldaki kalemler tablosu da 26 px taşıyordu (Fatura kolonu). */
    .sf-p-stokurun .sf-tablo .sf-urun { max-width: 140px; }
    .sf-bitenler .sf-tablo .sf-urun { max-width: 130px; }
    .sf-p-stokyolda .sf-tablo .sf-urun { max-width: 180px; }
    .sf-p-stokurun .sf-tablo th, .sf-bitenler .sf-tablo th { white-space: normal; }
    .sf-p-stokurun .sf-tablo .sf-rozet, .sf-bitenler .sf-tablo .sf-rozet { padding: 1px 5px; letter-spacing: 0; font-size: 9px; }
    .sf-bitenler .sf-varis { display: none; }
}

/* ============================================================
   KPI KARTLARI HER EKRANDA TEK SATIR + KART İÇİ ÖLÇEK (CEO 2026-09-25, tablet yatay + dikey)
   CEO: "dikey konumda kartların içindeki sayılar kartın dışına çıkıyor" · "stok lojistikteki kartlar iki satır
   haline geliyor" · "5 karttan sonuncusu ikinci satıra geliyor, bütünlük bozuluyor" · "yatayda da ikinci satıra
   kayıyor" · pano yatayda "öne çıkanların çerçevesi kartların üzerine gelmiş, ilk kart sidebarın arkasında".
   Sebep: kart eni SABİTTİ (200 / 184 / 176 px) → sığmayınca satır kırılıyordu; panoda üçlü sabit enle ORTALI
   olduğu için 473 px'lik kolona 552 px'lik satır iki yana taşıyordu (sol kart kanadın altına, sağ kart notların
   üstüne). Ölçüldü (1194×834 · 834×1194 · 1366×768 · 1024×768 · 768×1024): 6 kartlı her sayfa iki satır, 768'de
   altı satır; panoda ve IMS'te değer kartın dışında.
   Kural: kart eni en çok eskisi kadar (--kpi-en), yer yetmezse hepsi EŞİT daralır — tek satır, sola yanaşık
   (masaüstünde görünüm aynen kalır). Kartın içi kendi enine göre ölçeklenir (container query): dar kartta ikon
   küçülür, daha darda gizlenir; değerin yazı boyutu kart eninden ve değerin uzunluğundan hesaplanır, ad ve alt
   satır iki satıra iner. Telefon (≤700px) kendi 2 kolonlu düzeninde kalır.
   ============================================================ */
@media (min-width: 701px) {
    .sf-kpiler, .sf-kpiler.sf-kpi-esit, .sf-kpiler.sf-kpi-uc {
        grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, var(--kpi-en, 200px)); }
}
.sf-kpiler > .sf-kpi { container: kpi / inline-size; }
/* Yazı boyutu = (kartın iç eni − ikon kolonu) ÷ (karakter sayısı × 0,6 em). --kpi-uz değerin karakter sayısıdır
   (KpiKart ve pano kartları basar); ölçüldü: rakam ve ayraçlarla karakter başına 0,48–0,65 em — "11.507.949" 5,77 em,
   "23.419,8 M₺" 6,15 em, IMS "Ağustos 2026" 6,74 em. Tek oran kullanılsaydı ya IMS taşardı ya her sayfada rakamlar
   gereksiz küçülürdü. İkon kolonu rapor sayfalarında 32 + 8 px, panoda 36 + 10 px. Eşikler masaüstünü değiştirmez
   (200 px kartın iç eni rapor sayfasında 178, panoda 174 px). */
/* PANO ÜÇLÜSÜ MASAÜSTÜNDE DE SIĞDIRILIR (2026-09-30, iki ondalık): değer 22 px sabitti; "9.476,34 M₺" (11 karakter) 135 px tutup
   128 px'lik değer kutusundan taşıyor, kart çerçevesine 6 px kalıyordu (1512×860) — yıl sonunda beş haneye çıkınca çerçeveyi aşardı.
   Aşağıdaki dar kart formülünün aynısı, tavan 22 px: kısa değerde boy değişmez. Üç kart da en uzun değerin karakter sayısını taşır
   (GenelBakis `kpiUz`) → üçü aynı boyda kalır. Dar kart kuralları (aşağıda) sonra geldiği için onlar geçerli olur. */
@media (min-width: 701px) {
    .sf-kpiler.sf-kpi-uc > .sf-kpi .sf-kpi-deger { font-size: clamp(12px, calc((100cqi - 46px) / (var(--kpi-uz, 10) * 0.6)), 22px); }
}
@container kpi (max-width: 170px) {
    .sf-kpiler > .sf-kpi .sf-kpi-yuvar { width: 26px; height: 26px; }
    .sf-kpiler > .sf-kpi .sf-kpi-yuvar svg { width: 13px; height: 13px; }
    .sf-kpiler > .sf-kpi .sf-kpi-deger { font-size: clamp(12px, calc((100cqi - 40px) / (var(--kpi-uz, 10) * 0.6)), 19px); }
    .sf-kpiler.sf-kpi-uc > .sf-kpi .sf-kpi-deger { font-size: clamp(12px, calc((100cqi - 46px) / (var(--kpi-uz, 10) * 0.6)), 22px); }
}
/* Pano üçlüsünde ikon daha erken kalkar: manşet rakamı büyük kalsın (dikey tablette 176 px kartta 22 px sığar) */
@container kpi (max-width: 160px) {
    .sf-kpiler.sf-kpi-uc > .sf-kpi .sf-kpi-yuvar { display: none; }
    .sf-kpiler.sf-kpi-uc > .sf-kpi > div { grid-column: 1 / -1; }
    .sf-kpiler.sf-kpi-uc > .sf-kpi .sf-kpi-deger { font-size: clamp(12px, calc(100cqi / (var(--kpi-uz, 10) * 0.6)), 22px); }
}
@container kpi (max-width: 136px) {
    .sf-kpiler > .sf-kpi .sf-kpi-yuvar { display: none; }
    .sf-kpiler > .sf-kpi > div { grid-column: 1 / -1; }
    .sf-kpiler > .sf-kpi .sf-kpi-deger { font-size: clamp(12px, calc(100cqi / (var(--kpi-uz, 10) * 0.6)), 19px); }
    .sf-kpiler.sf-kpi-uc > .sf-kpi .sf-kpi-deger { font-size: clamp(12px, calc(100cqi / (var(--kpi-uz, 10) * 0.6)), 22px); }
    .sf-kpiler > .sf-kpi .sf-kpi-ad, .sf-kpiler > .sf-kpi .sf-kpi-onceki, .sf-kpiler > .sf-kpi .sf-kpi-alt {
        white-space: normal; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
        overflow: hidden; line-height: 1.2; }
}

/* TEK KOLON DÜZENİNDE ÇÖKEN KUTULAR (dikey tablet, 2026-09-25): ızgara satırı kalmayınca yüksekliğini satırdan alan
   kutular SIFIRA iniyordu. Telefon bloğundaki .sf-yigin dersinin aynısı; o düzeltme yalnız ≤700px'teydi, 701–1180
   arası (dikey tablet) açıkta kalmıştı.
   • Marka & Ürün "Yükselen ve Düşen Ürünler": iki yarı flex-basis 0 → başlık görünüyor, liste yok ("kesilmiş gibi").
   • Pano "Öne Çıkan Notlar" (≤1100px'te kartların altına iner): akış height:0 + flex:1 ile KART SATIRININ boyunu
     alıyordu → tek kolonda 0 kaldı, yalnız başlık görünüyordu ("kayan yazıları göremiyorum"). */
@media (max-width: 1180px) {
    .sf-rp-govde .sf-yigin-liste, .sf-rp-govde .sf-yigin-liste > div { flex: 0 0 auto; }
}
@media (max-width: 1100px) {
    .sf-ust-serit .sf-ust-notlar .sf-not-akis { flex: none; height: 132px; }
}

/* ============================================================
   BÖLGESEL SATIŞ (CEO 2026-09-26; yöneticinin "Bölgesel Satış Oranları" Excel'i, Saim Bey'e açılır)
   29 kolonlu yoğun tablo tek ekranda: AY · her ana bölgede PAY + alt bölgeler + TOPLAM + ARTIŞI · SATIŞ TOPLAM ·
   PERSONEL · DEPO DIŞI. İKİ SATIRLI BAŞLIK: genel kural her th'yi top:0'a yapıştırır → iki başlık satırı üst üste
   biner; bu tabloda yapışan THEAD'in kendisidir. İlk kolon (ay) yatay kaydırmada sabit
   → border-collapse: separate (collapse'ta yapışan hücrenin kenarlığı yerinde kalır) ve zeminler OPAK
   (--gold-soft yarı saydam, altından kayan rakam görünürdü).
   ============================================================ */
.sf-rp-govde .sf-p-bolgesel .sf-kaydir { overflow-x: auto; padding-right: 0; }
/* ÇERÇEVE BOŞLUĞU YOK: satırlar panele yayılır (kısa ekranda tablo içerik boyunda kalır ve kart içinde kayar) */
.sf-p-bolgesel .sf-kaydir > .sf-bolge-tablo { height: 100%; }
.sf-bolge-tablo { border-collapse: separate; border-spacing: 0; --bt-zemin: var(--erp-surface);
    --bt-yil: color-mix(in srgb, var(--gold) 14%, var(--erp-surface)); --bt-top: color-mix(in srgb, var(--gold) 5%, var(--erp-surface));
    --bt-hover: color-mix(in srgb, var(--gold) 10%, var(--erp-surface)); --bt-cizgi: color-mix(in srgb, var(--gold) 45%, var(--erp-border)); }
.sf-rp-govde .sf-kaydir .sf-tablo.sf-bolge-tablo thead th { position: static; }
.sf-bolge-tablo thead { position: sticky; top: 0; z-index: 3; }
.sf-rp .sf-tablo.sf-bolge-tablo th, .sf-rp .sf-tablo.sf-bolge-tablo td { padding: 2.5px 2px; font-size: 9.5px; white-space: nowrap; }
.sf-rp .sf-tablo.sf-bolge-tablo td.bt-ay { font-size: 10.5px; }
/* SAYILAR 1 PUNTO BÜYÜK (kullanıcı 2026-09-29: "bölgesel satıştaki sayı puntolarını 1 punto büyütelim"): değer hücreleri 9,5 → 10,5px
   (AY kolonu da aynı boy); satır yüksekliği değişmesin diye dikey boşluk 2,5 → 2px. Şube penceresindeki sayılar da +1px. */
.sf-rp .sf-tablo.sf-bolge-tablo td { font-size: 10.5px; padding-top: 2px; padding-bottom: 2px; }
.hp-bolge .sf-tablo.sf-tablo-sik td { font-size: 11.5px; }
/* başlık kuralları .sf-rp .sf-tablo … zincirinde: genel `.sf-rp-govde .sf-tablo th` (9,5 px) ve yukarıdaki 10 px kuralı daha özgül */
.sf-rp .sf-tablo.sf-bolge-tablo thead th { background: var(--bt-zemin); text-align: center; font-size: 8.5px; letter-spacing: 0; color: var(--text-dim); vertical-align: bottom; }
.sf-rp .sf-tablo.sf-bolge-tablo th.bt-ek { white-space: normal; line-height: 1.15; }
.sf-rp .sf-tablo.sf-bolge-tablo th.bt-grup { font-family: var(--font-display); font-weight: 700; font-size: 10px; color: var(--text-primary); letter-spacing: .08em;
    border-bottom: 1.5px solid var(--gold); padding-bottom: 3px; }
.sf-bolge-tablo th.bt-kod span { display: block; font-weight: 700; font-size: 9px; color: var(--text-primary); }
.sf-bolge-tablo th.bt-kod small { display: block; font-size: 7.5px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
.sf-bolge-tablo th.bt-art span { display: block; } .sf-bolge-tablo th.bt-art small { display: block; font-size: 7.5px; font-weight: 600; color: var(--gold-text); letter-spacing: .04em; }   /* ARTIŞI · YTD */
.sf-bolge-tablo th.tik { cursor: pointer; }
.sf-bolge-tablo th.tik:hover span { color: var(--gold-text, var(--gold-deep)); text-decoration: underline dotted; text-underline-offset: 2px; }
.sf-bolge-tablo th.bt-top, .sf-bolge-tablo th.bt-art, .sf-bolge-tablo th.bt-pay { color: var(--text-primary); font-weight: 700; }
/* grup ayırıcıları: her ana bölge PAY kolonuyla başlar, SATIŞ TOPLAM ve personel/depo dışı ayrı */
.sf-bolge-tablo .bt-pay, .sf-bolge-tablo .bt-grup, .sf-bolge-tablo .bt-genel, .sf-bolge-tablo .bt-ek { border-left: 1px solid var(--bt-cizgi); }
/* ilk kolon (ay) yatay kaydırmada sabit */
.sf-bolge-tablo td.bt-ay { position: sticky; left: 0; z-index: 1; background: var(--bt-zemin); text-align: left; font-weight: 600; color: var(--text-primary); padding-left: 2px; }
.sf-rp-govde .sf-kaydir .sf-tablo.sf-bolge-tablo thead th.bt-ay { position: sticky; left: 0; z-index: 2; text-align: left; font-size: 9.5px; }
.sf-bolge-tablo td.bt-pay { font-size: 9px; color: var(--text-dim); }
.sf-bolge-tablo td.bt-art { font-size: 9px; font-weight: 600; }
.sf-bolge-tablo td.bt-top { background: var(--bt-top); font-weight: 600; color: var(--text-primary); }
.sf-bolge-tablo td.bt-genel { font-weight: 700; background: color-mix(in srgb, var(--gold) 9%, var(--erp-surface)); }
.sf-bolge-tablo td.bt-ek { color: var(--text-dim); }
.sf-bolge-tablo tbody tr:hover td { background: var(--bt-hover); }
/* yıl toplam satırı (görseldeki kalın satır) */
.sf-bolge-tablo tr.bt-yil td { background: var(--bt-yil); font-weight: 700; color: var(--text-primary);
    border-top: 1px solid var(--bt-cizgi); border-bottom: 1px solid var(--bt-cizgi); }
.sf-bolge-tablo tr.bt-yil td.art { color: var(--success-text); } .sf-bolge-tablo tr.bt-yil td.dus { color: var(--danger-text); }
.sf-bolge-tablo tr.bt-kismi td { font-style: italic; }
/* değişim satırı: dönem ↔ karşılaştırma (aynı aylar). ALTTA SABİTLENMEZ: yatay kaydırma çubuğu tabloyu birkaç piksel
   kısaltınca (1194×834) sabit satır son yıl satırının yarısını örtüyordu; aynı değişim kartlarda da yazar. */
.sf-bolge-tablo tr.bt-degisim td { background: var(--bt-zemin); font-weight: 700; border-top: 1.5px solid var(--erp-kalin-cizgi); border-bottom: 0; }
.sf-bolge-tablo tr.bt-degisim td.bt-ay small { display: block; margin-left: 0; font-weight: 500; font-size: 8px; color: var(--text-dim); }
.sf-bolge-tablo tr.bt-degisim td.bt-top { background: var(--bt-top); }
/* şube penceresi: içerik kadar yüksek */
.hp.hp-bolge { width: min(860px, 94vw); height: auto; max-height: 88vh; }
.hp-bolge .hp-kapat { margin-left: auto; flex: none; }
.hp-bolge .hp-baslik > span:first-child { white-space: normal; flex-wrap: wrap; min-width: 0; }
.hp-govde.hp-bolge-govde { display: flex; flex-direction: column; gap: 8px; overflow: hidden; }
.hp-bolge-govde .sf-kaydir { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.hp-bolge-not { font-size: 10.5px; color: var(--text-dim); }
.bt-serit-not { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }   /* marka şeridindeki kısa açıklama */
@media (max-width: 1180px) {
    /* tek kolonda tablo içerik boyunda; yatay kaydırma çubuğu değişim satırının üstüne binmesin */
    .sf-rp-govde .sf-p-bolgesel .sf-kaydir { max-height: none; padding-bottom: 10px; }
}

/* ============================================================
   PANO "ÜRÜN GRUPLARI VE ÜRÜN SATIŞLARI" — ORTADA PAY ÇUBUĞU (kullanıcı 2026-09-27: "şurayı daha kompakt yapalım mı, baya
   boşluk oluşmuş arada" → önizlemede "A" seçildi). Grup adları kısa olduğu için ad ile rakamlar arasında ~350 px boş
   kalıyordu. Satır yapısı aynı; araya listenin en büyüğüne oranlı ince altın çubuk (seçili ölçü) ve Pay kolonu geldi.
   Grup kipinde ad kolonu sabit (kısa adlar), ürün kipinde geniş (uzun ürün adları + kod). Telefonda çubuk gizlenir.
   ============================================================ */
.sf-p-urunler .sf-liste-baslik, .sf-p-urunler .sf-satir {
    grid-template-columns: var(--u-ad, 104px) minmax(0, 1fr) var(--s-deger, 70px) var(--u-pay, 44px) var(--s-yoy, 46px); gap: 10px; }
.sf-p-urunler.urun-kip { --u-ad: minmax(0, 1.6fr); }
.sf-p-urunler .sf-urun-kanal { height: 10px; }
.sf-p-urunler .sf-urun-kanal i { background: linear-gradient(90deg, var(--cg-bu-3), var(--cg-bu-1) 70%, var(--cg-bu-2)); }
.sf-p-urunler .sf-satir-pay { text-align: right; font-variant-numeric: tabular-nums; font-size: 10px; color: var(--text-dim); white-space: nowrap; }
@container (max-width: 440px) {
    .sf-p-urunler .sf-liste-baslik, .sf-p-urunler .sf-satir { gap: 6px; --u-pay: 38px; }
    .sf-p-urunler.grup-kip { --u-ad: 88px; }
}
@media (max-width: 700px) {
    .sf-p-urunler .sf-liste-baslik, .sf-p-urunler .sf-satir { grid-template-columns: minmax(0, 1fr) var(--s-deger, 66px) 38px var(--s-yoy, 44px); gap: 5px; }
    .sf-p-urunler .sf-urun-kanal, .sf-p-urunler .sf-liste-baslik > span:nth-child(2) { display: none; }
}
/* ÜRÜN KİPİNDE TÜM ÜRÜNLER (kullanıcı 2026-09-27: "ilk 10 ürün değil hepsi listelensin, aşağıya kaydırılabilsin"): satırlar
   doğal boyda, liste panelin İÇİNDE kayar; başlık satırı listenin dışında olduğu için sabit kalır. Grup kipi (5 ana grup)
   paneli eskisi gibi eşit satırlarla doldurur. */
.sf-p-urunler.urun-kip .sf-liste { overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--erp-border-strong) transparent; }
.sf-p-urunler.urun-kip .sf-satir { flex: none; height: 21px; min-height: 21px; }
/* Başlık listenin içinde ve yapışkan (kaydırma çubuğu başlığı ve satırları AYNI daraltır → kolonlar hizalı); sağdaki pay,
   Mac'in üstte kayan çubuğu YoY rakamlarını örtmesin diye. */
.sf-p-urunler .sf-liste > .sf-liste-baslik { position: sticky; top: 0; z-index: 1; flex: none; background: var(--erp-surface); }
.sf-p-urunler.urun-kip .sf-liste > .sf-liste-baslik, .sf-p-urunler.urun-kip .sf-satir { padding-right: 9px; }


/* ============================================================================
   TELEFON — MENÜ + OKUNURLUK (CEO 2026-09-29, telefondan: "grafikleri yaklaştırıp büyütemiyorum" · "yandaki menü çizgi
   halinde, neyin ne menüsü olduğunu anlamıyorum — önce açık sonra kapanabilen menü olsun" · "grafikler ve üzerindeki sayılar
   çok küçük, biraz büyütelim" · "listelerin içindeki içerikleri 1 punto büyütelim"). YALNIZ TELEFON (≤700px): masaüstü ve
   tablet değişmez. DOSYA SONUNDA durmak ZORUNDADIR — ezdiği kurallar (≤1280px bloğundaki .sfcg-yazi 8px, tablo/liste boyları,
   ≤1000px ikon rayı) yukarıda ve aynı özgüllükte; önce yazılırsa kaybeder (2026-09-16 tablet dersi).
   ============================================================================ */
.sf-mobil-ust, .kanat-perde, .kanat-kapat { display: none; }
svg.svg-dar { display: none; }
/* Ortak SVG gradyanları (sayfa başında 0×0): görünür olmalı — display:none içindeki gradyanı Chrome boyamıyor */
.sf-svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }
@media (max-width: 700px) {
    /* (1) MENÜ: 44px ikon rayı yerine üst çubuk ("☰ Menü" + sayfa adı) ve soldan açılan çekmece — adlarıyla tam menü.
       Uygulama açılışta menü AÇIK gelir (AppLayout _mobilMenu); sayfaya dokununca / karartılmış alana / ✕'e dokununca kapanır.
       Kanat hem açık hem koyu temada koyudur → metin rengi SABİT açık renk (#f0e6d2), tema değişkeni DEĞİL (CLAUDE.md tuzağı). */
    :root { --kanat-ray: 0px; --kanat-ust: min(82vw, 290px); --mobil-ust: 48px; }
    .sf-mobil-ust { display: flex; position: fixed; inset: 0 0 auto 0; height: var(--mobil-ust); z-index: 58; align-items: center; gap: 12px;
        padding: 0 12px; background: var(--murekkep); border-bottom: 1px solid rgba(201,168,76,.45); box-shadow: 0 2px 10px rgba(0,0,0,.2); }
    .sf-mobil-menu { appearance: none; cursor: pointer; flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px 0 10px;
        border-radius: 9px; border: 1px solid var(--gold); background: rgba(201,168,76,.16); color: #f0e6d2;
        font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .02em; }
    .sf-mobil-sayfa { min-width: 0; color: #f0e6d2; font-family: var(--font-display); font-size: 15px; font-weight: 700;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .sf-main { top: var(--mobil-ust); }
    .kanat { transform: translateX(calc(-100% - 16px)); transition: transform .24s cubic-bezier(.2,.8,.2,1); box-shadow: 6px 0 28px rgba(0,0,0,.35); }
    .sf-shell.menu-acik .kanat { transform: none; }
    .kanat-perde { display: block; position: fixed; inset: 0; z-index: 59; background: rgba(12,10,6,.5); opacity: 0; pointer-events: none; transition: opacity .2s; }
    .sf-shell.menu-acik .kanat-perde { opacity: 1; pointer-events: auto; }
    .sf-shell.menu-acik .sf-main { overflow: hidden; }
    .kanat-ic { overflow-y: auto; overscroll-behavior: contain; }
    .kanat-kapat { display: grid; place-items: center; position: absolute; top: 10px; right: 12px; z-index: 2; width: 36px; height: 36px; border-radius: 50%;
        cursor: pointer; border: 1px solid rgba(228,200,122,.55); background: rgba(228,200,122,.10); color: #f0e6d2; font-size: 16px; line-height: 1; }
    /* Çekmecede adlar görünür (≤1000px ikon rayı kuralı gizliyordu) */
    .kanat .ad { display: revert; }
    .kanat .kanat-bayrak { display: inline-flex; }
    .kanat-selam, .kanat-bolum { display: block; }
    .kanat-alt, .kanat .kanat-slogan, .kanat .kanat-kimlik-meta { display: flex; }
    .kanat .kanat-kimlik-meta, .kanat .kanat-slogan { flex-direction: column; }
    .kanat-menu { overflow: visible; }
    .kanat-oge { justify-content: flex-start; padding: 0 12px 0 0; height: 44px; font-size: 15px; }
    .kanat-ikon { height: 44px; }
    .kanat-logo-img, .kanat:hover .kanat-logo-img, .kanat.acik .kanat-logo-img { height: 46px; }
    .kanat-alt { padding-bottom: 8px; }

    /* (2) YAKINLAŞTIRMA AÇIK (index.html) → iOS, 16px'ten küçük kutuya dokununca sayfayı kendiliğinden büyütür; filtre kutuları
       telefonda 16px (dokunmak da kolaylaşır). Özel pazar açılırı select'lerle aynı görünsün diye birlikte. */
    select, textarea, input:not([type=checkbox]):not([type=radio]), .fcb-sec-dugme { font-size: 16px !important; height: auto !important; min-height: 34px; }

    /* (3) ÇUBUK GRAFİKLERİ: daha yüksek, yazılar büyük. 12 ayın değer yazısı yan yana sığmıyordu (8px'te bile birbirine
       biniyordu) → yazı DİK (aşağıdan yukarı), sarı çubuğun üstünde; üst bant (--sfcg-tepe) bu boya göre açılır. */
    .sf-grafik-kap { min-height: 300px; }
    .sfcg, .sf-rp-govde:not(.serbest) .sf-grafik-kap > .sfcg { min-height: 290px; }
    .sfcg { --sfcg-tepe: 76px; --sfcg-eksen: 20px; --sfcg-sol: 46px; }
    .sfcg.notlu { --sfcg-tepe: 92px; }
    .sfcg-yazi, .sf-rp-govde .sfcg-yazi, .sf-govde .sfcg-yazi { font-size: 11px; letter-spacing: 0; writing-mode: vertical-rl;
        transform: translateX(-50%) rotate(180deg); padding: 4px 1px; margin-bottom: 3px; }
    .sfcg-ay:first-child .sfcg-yazi, .sfcg-ay:last-child .sfcg-yazi { left: 50%; right: auto; transform: translateX(-50%) rotate(180deg); }
    .sfcg-eksen { font-size: 11.5px; }
    .sfcg-eksen-sol span { font-size: 10.5px; }
    .sfcg-not { font-size: 10.5px; }
    /* Mini kutular (Ülke & Bölge ülke kutuları): değer yazısı yok, yalnız ay etiketi büyür */
    .sf-mini .sf-grafik-kap { min-height: 120px; }
    .sf-mini .sfcg, .sf-rp-govde:not(.serbest) .sf-mini .sf-grafik-kap > .sfcg { min-height: 100px; }
    .sf-mini .sfcg { --sfcg-tepe: 4px; --sfcg-eksen: 15px; --sfcg-sol: 0px; }
    .sf-mini .sfcg-eksen { font-size: 10px; }

    /* (4) SVG GRAFİKLERİ: geniş çizim (560–640 birim) 330px'e küçülünce yazılar 6px'e iniyordu → aynı panelde basılan dar
       çizim (340–360 birim, yazılar ~gerçek boyunda) görünür. Büyük pencere tek çizimdir; iki parmakla yakınlaştırılır. */
    svg.svg-genis { display: none; }
    svg.svg-dar { display: block; }
    .ecz-grafik-dar .ecz-deger { font-size: 12px; } .ecz-grafik-dar .ecz-etiket { font-size: 11.5px; } .ecz-grafik-dar .sf-eksen-sol { font-size: 11px; }
    .sf-donem-grafik.svg-dar .sf-svg-deger { font-size: 11px; } .sf-donem-grafik.svg-dar .sf-svg-eksen { font-size: 11px; }
    .sf-donem-grafik.svg-dar .sf-eksen-sol { font-size: 10.5px; } .sf-donem-grafik.svg-dar .sf-eksen-kucuk { font-size: 9.5px; }
    .ims-pay.svg-dar text { font-size: 11px; } .ims-pay.svg-dar .biz-deger { font-size: 12px; }
    /* Donut (pano pazar dağılımı): 108px'te merkez rakamı 8px'e iniyordu */
    .gd-svg, .sf-panel-pazar .gd-svg, .sf-p-pazar .gd-svg { width: 150px; height: 150px; flex: none; }

    /* (5) LİSTE VE TABLO İÇERİKLERİ +1px ("1 punto büyütelim"): her kural kendi özgüllüğüyle, bir büyük değerle */
    .sf-tablo { font-size: 12px; } .sf-rp .sf-tablo { font-size: 12.5px; } .sf-rp-govde .sf-tablo { font-size: 11.5px; } .hp-tablo-kap .sf-tablo { font-size: 12px; }
    .sf-tablo th { font-size: 11px; } .sf-rp-govde .sf-tablo th { font-size: 10.5px; }
    .sf-tablo-sik td, .sf-tablo-sik th { font-size: 11.5px; }
    .sf-ikincil, .sf-sayi-ikincil { font-size: 12px; }
    .sf-kod, .sf-kod-on { font-size: 11px; }
    .sf-bar { font-size: 12px; } .sf-rp-govde .sf-bar { font-size: 11.5px; } .sf-bar-yoy { font-size: 11px; } .sf-rp-govde .sf-bar-yoy { font-size: 10.5px; }
    .sf-bar-ad small { font-size: 11px; }
    .sf-p-kategori .sf-bar, .sf-g-musteri .sf-bar { font-size: 11.5px; } .sf-g-musteri .sf-bar-yoy { font-size: 11px; } .sf-g-musteri .sf-bar-ad small { font-size: 10px; }
    .sf-satir { font-size: 11.5px; } .sf-rp-govde .sf-satir { font-size: 11.5px; } .sf-satir-ad small { font-size: 10px; } .sf-satir-yoy { font-size: 11px; }
    .sf-liste-baslik { font-size: 11px; } .sf-rp-govde .sf-liste-baslik { font-size: 10.5px; }
    .sfmk-yoy { font-size: 11px; } .sfmk-pay { font-size: 10.5px; }
    .sf-p-pazar .gd-lj-ad, .sf-p-pazar .gd-lj-deger { font-size: 11px; } .sf-p-pazar .gd-lj-pay { font-size: 10px; }
    .sf-rp .sf-tablo.sf-bolge-tablo th { font-size: 10.5px; } .sf-rp .sf-tablo.sf-bolge-tablo td, .sf-rp .sf-tablo.sf-bolge-tablo td.bt-ay { font-size: 11.5px; }
    .hp-bolge .sf-tablo.sf-tablo-sik td { font-size: 12.5px; }
    .sf-rp .sf-tablo.sf-bolge-tablo thead th { font-size: 9.5px; } .sf-rp .sf-tablo.sf-bolge-tablo th.bt-grup { font-size: 11px; }
    .sf-bolge-tablo th.bt-kod span { font-size: 10px; } .sf-bolge-tablo th.bt-kod small { font-size: 8.5px; }
    .sf-bolge-tablo th.bt-art small { font-size: 8.5px; }
    .sf-pivot th { font-size: 10px; }
    .sf-rp .sf-tablo.sf-dp th, .sf-rp .sf-tablo.sf-dp td { font-size: 11.5px; } .sf-dp tr.dp-s3 > td, .sf-dp tr.dp-bilgi > td { font-size: 11px; }
    .sf-dp, .hp-dp .sf-dp { --dp-ad-en: 150px; --dp-kol-en: 72px; --dp-d-en: 56px; --dp-e-en: 64px; }
    .sf-pivot { --pv-kol: 72px; }
    .sf-rp .sf-tablo.sf-kt td.kt-ad { max-width: 220px; }
    .sf-rp .hp-dp .sf-tablo.sf-dp td { font-size: 11.5px; } .sf-dp td.dp-d, .sf-dp td.dp-e, .hp-dp .sf-dp td.dp-d, .hp-dp .sf-dp td.dp-e { font-size: 11px; }
    .sf-rp .sf-tablo.sf-dp thead th.dp-yil, .sf-rp .sf-tablo.sf-dp thead th.dp-t, .sf-rp .sf-tablo.sf-dp th.dp-ad { font-size: 10.5px; }
    .sf-rp .sf-tablo.sf-dp thead th { font-size: 10.5px; } .sf-rp .sf-tablo.sf-dp thead th.dp-acik-yil { font-size: 12px; }
    .sf-gt tr.sv-3 td { font-size: 11px; }
    .sf-sinyal-baslik { font-size: 13.5px; } .sf-sinyal-detay, .sf-rp.sig .sf-sinyal-detay, .sf-sinyal-aksiyon { font-size: 12px; } .sf-sinyal-alan { font-size: 11px; }
    .sf-durum-kart .sf-durum-alt { font-size: 10.5px; }
    .sf-yeni, .sf-ekip, .sf-eski { font-size: 11px; }
    .ecz-sayfa b { font-size: 10.5px; }
    /* (6) İKİ ONDALIK (2026-09-30): "6.853,74 M₺" (11 karakter) 11,5 px'te ~69 px — 62/66 px'lik değer kolonlarından 3–7 px taşıyordu
       (pano ülke listesi, Satış & Karlılık ve Marka & Ürün çubukları, Yükselen/Düşen). Kolonlar 70 px; özgül paneller kendi değerlerinde kalır. */
    .sf-bar, .sf-satir, .sf-liste-baslik { --b-deger: 70px; --s-deger: 70px; }
    .sf-liste-ulke, .sf-liste-baslik.sf-liste-ulke { grid-template-columns: minmax(0, 1fr) 70px 54px 44px; }
}

/* PANO ÜLKE LİSTESİ TABLETTE (1181–1280 px, 2026-09-30): harita 1.6fr / liste 1fr bölüşümünde liste 222 px kalıyor, üç sabit kolon
   (70 + 64 + 48 px) ad kolonunu 17 px'e sıkıştırıp ülke adlarını görünmez yapıyordu. Harita biraz daralır, pay çubuğu gizlenir
   (yüzde yazısı kalır), liste satırlara sığmazsa kart içinde kayar (son satır 5 px kesiliyordu). ≤1180 px'te liste haritanın altındadır.
   1366×768 dizüstünde de aynı sorun vardı (ad 61 px, 13 ad kesik, 3 satır görünmüyordu) → kolon kuralı 1400 px'e kadar. */
@media (min-width: 1181px) and (max-width: 1280px) {
    .sf-panel-harita .sf-harita-satir { grid-template-columns: 1.2fr 1fr; }
}
@media (min-width: 1181px) and (max-width: 1400px) {
    .sf-panel-harita .sf-liste-ulke, .sf-panel-harita .sf-liste-baslik.sf-liste-ulke { grid-template-columns: minmax(0, 1fr) 66px 34px 44px; }
    .sf-panel-harita .sf-liste-ulke .sf-pay-kutu { display: none; }
    .sf-panel-harita .sf-liste { overflow-y: auto; scrollbar-width: thin; }
}

/* YÜKSELEN / DÜŞEN BAŞLIĞI SIRALANIR (2026-09-30): eski alt başlık (.sf-alt-baslik) artık satırlarla aynı ızgarada bir liste başlığıdır —
   solda başlık, sağda tıklanır "Net satış" / "YoY" (değer ve yüzde kolonlarının tam üstünde). */
.sf-rp-govde .sf-liste-baslik.sf-hareket-baslik { margin: 4px 0 2px; padding-bottom: 2px; padding-right: 7px; }   /* 4 + listenin kaydırma payı 3 px → kolonlar hizalı */
.sf-liste-baslik.sf-hareket-baslik > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 10px; font-weight: 700;
    letter-spacing: .06em; text-transform: uppercase; }
.sf-liste-baslik.sf-hareket-baslik > span:first-child small { font-size: 8.5px; letter-spacing: .04em; }

/* YÜKSELEN / DÜŞEN PANEL BAŞLIĞI DAR PANELDE (2026-10-02, kullanıcı: "butonlar alt grup yazısından dolayı alta kayıyor"): alt başlık
   kaldırıldı; tablette (1194 px) panel 303 px, başlık (163) + görünüm anahtarı (158) yine sığmıyordu. Anahtarın düğmeleri görünümün
   adını yazdığı için iç en 334 px'ten darsa (başlık + boşluk + anahtar = 331 px) başlık yazısı gizlenir, işaret kalır. Container query:
   ekran değil panelin İÇ eni ölçülür (1366'da 342 px → başlık görünür; 1280'de 313, 1194'te 285 → gizli). */
.sf-p-hareket { container: hareket / inline-size; }
@container hareket (max-width: 334px) { .sf-p-hareket .sf-baslik-yazi { display: none; } }