/* =====================================================================
   HEDEF TAKİP · TABLO DÜZENİ  ·  16.09.2026
   ---------------------------------------------------------------------
   Kullanıcının Excel şablonu: iki tablo — "Hedef Takip" (Genel Toplam ·
   LFL · Yeni) ve "Mağazalar" (Online + mağazalar). Kolonlar:
   Anlık satış · Gün sonu tahmin · Hedef | Aylık satış · Ay sonu tahmin · Hedef.
   Her hücrede rakamın ALTINDA geçen yıla göre büyüme (hedef kolonunda HGO).

   RENKLER PBI (Ürün ekranı `.uk*`) İLE BİREBİR — kullanıcı: *"tablo
   görünürlüğü renkleri birebir PBI gibi olsun, açılan satırların
   görünümü anlamında."*
     · başlık satırı lacivert bant (`--ukLacivert`)
     · AÇILAN satır dolu bant `#2f4a78` + beyaz yazı
     · açılan satırın altındaki ayrıntı mavi zebra (`#c2d5ee` ↔ `#e7effa`)
     · kalan satırlar düz beyaz
     · değişim rozeti PBI'ın dolu renk skalası (kırmızı → sarı → yeşil),
       üstünde koyu kalın rakam
   Stiller ayrı dosyada: `marka.css` başka oturumdaydı; bu satırın
   `index.html`deki linki silinince modül tamamen geri alınır.          */
.htEkran{
  --htLac:#16294d; --htBasYazi:#ffffff; --htOdak:#2f4a78;
  --htZebA:#c2d5ee; --htZebB:#e7effa; --htZemin:#ffffff; --htHover:#f2f5fa;
  --htCizgi:#e6e9ee; --htAyrac:#c3cbd8; --htYazi:#16294d; --htSilik:#5a626d;
  --htOdakArti:#9ff0c2; --htOdakEksi:#ffbdb7; --htOdakSilik:#c9d5ea;
  --htArti:#0c7f41; --htEksi:#a23b36; --htUyari:#a26205;
}
:root[data-theme="dark"] .htEkran{
  --htLac:#22304a; --htBasYazi:#eef3fa; --htOdak:#3a5a91;
  --htZebA:#2b3b58; --htZebB:#1e293c; --htZemin:#151e2c; --htHover:#1b2534;
  --htCizgi:#2b374a; --htAyrac:#3f4d61; --htYazi:#eef3fa; --htSilik:#a3b0c2;
  --htOdakSilik:#c9d5ea; --htArti:#4ec27f; --htEksi:#ef8b83; --htUyari:#e3a64a;
}

.htUst{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 12px}
.htOlcu{display:inline-flex;border:1px solid var(--htAyrac);border-radius:8px;overflow:hidden}
.htOlcu button{border:0;background:var(--htZemin);color:var(--htYazi);padding:6px 14px;
  font-size:13px;font-weight:600;cursor:pointer}
.htOlcu button.on{background:var(--htLac);color:var(--htBasYazi)}
/* Excel çıktısı düğmesi (01.10.2026) — ölçü seçicinin sağında */
.htExcel{margin-left:auto;border:1px solid var(--htAyrac);background:var(--htZemin);color:var(--htYazi);
  border-radius:8px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer}
.htExcel:hover{background:var(--htHover)}
.htExcel:disabled{opacity:.6;cursor:default}

.htKap{overflow-x:auto;margin-bottom:16px;border:1px solid var(--htCizgi);border-radius:10px;
  background:var(--htZemin);-webkit-overflow-scrolling:touch}
/* ⚠️ `.htKap .htTablo` — app.css'teki `.card table` kuralı tek sınıfı ezer. */
.htKap .htTablo{width:100%;border-collapse:collapse;table-layout:fixed;min-width:860px}
.htTablo col.htAdK{width:230px}
/* Kapanmış ay: 3 kolon, dar tablo (geniş boşluk kalmasın). */
.htKap .htTablo.htKapali{min-width:480px}
.htTablo th{background:var(--htLac);color:var(--htBasYazi);font-size:12px;font-weight:650;
  text-align:right;padding:9px 12px;white-space:nowrap;text-transform:none;letter-spacing:0;
  border-bottom:0}
.htTablo th.htAd{text-align:left;font-size:13px;font-weight:700}
.htTablo th.htSir{cursor:pointer;user-select:none}
.htTablo th .htOk{font-size:10px;opacity:.8}
.htTablo th.htAyBas,.htTablo td.htAyBas{border-left:2px solid var(--htAyrac)}
.htTablo th.htAyBas{border-left-color:rgba(255,255,255,.28)}

.htTablo td{padding:7px 12px;border-top:1px solid var(--htCizgi);vertical-align:middle;
  background:var(--htZemin);color:var(--htYazi)}
/* ⛔ "..." ile KESME YOK (kullanıcı 17.09.2026: "görmek istemiyorum asla").
   Kolon geniş; sığmazsa ad alt satıra iner. */
.htTablo td.htAd{font-size:13.5px;font-weight:600;white-space:normal;overflow-wrap:anywhere}
.htTablo td.htSay{text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.htSay b{display:block;font-size:13.5px;font-weight:500;line-height:1.25}
/* KALINLIK YALNIZ GENEL TOPLAM'DA (kullanıcı 16.09.2026: "hepsini kalın
   yapmaya gerek var mı, yok gibi"). Öteki satırların rakamı normal. */
.htSat[data-id="g:genel"] .htSay b{font-weight:650}
.htSay .htAlt{display:block;margin-top:3px;font-size:11px;font-weight:600;line-height:1.2}
/* Değişim: ZEMİN YOK, rakam renkli (Canlı Satış `.ctD` ile aynı tonlar). */
.htEkran{--htDArt:#0c7f41;--htDAzl:#b3261e;--htDSif:#b9791c}
:root[data-theme="dark"] .htEkran{--htDArt:#4ec27f;--htDAzl:#ef8b83;--htDSif:#e3b04b}
.htD.art{color:var(--htDArt)} .htD.azl{color:var(--htDAzl)} .htD.sif{color:var(--htDSif)}
.htSat.acik .htD.art{color:#79d3a1} .htSat.acik .htD.azl{color:#f2a9a4} .htSat.acik .htD.sif{color:#f5d77a}
.htHgo{color:var(--htSilik)}
.htHgo.iyi{color:var(--htArti)} .htHgo.orta{color:var(--htUyari)} .htHgo.kotu{color:var(--htEksi)}
.htBos{color:var(--htSilik);font-weight:500}

/* İlk kolon sabit — yatay kayınca satırın ne olduğu kaybolmasın. */
.htTablo td.htAd,.htTablo th.htAd{position:sticky;left:0;z-index:1}
.htSat{cursor:pointer}
.htSat:hover td{background:var(--htHover)}
.htOkA{display:inline-block;width:14px;color:var(--htSilik);transition:transform .15s}
.htSat.acik .htOkA{transform:rotate(90deg)}

/* AÇILAN SATIR = BAŞLIK BANDI (PBI `ukOdak`) */
.htSat.acik td{background:var(--htOdak);color:#fff;border-top-color:var(--htOdak)}
.htSat.acik td b,.htSat.acik td.htAd{color:#fff}
/* ⛔ `.htEt` (mağaza adının yanındaki LFL/DİĞER etiketi) 23.09.2026'da
   kaldırıldı — kullanıcı: *"bunları kaldıralım."* */
.htSat.acik:hover td{background:var(--htOdak)}
.htSat.acik .htOkA,.htSat.acik .htBos{color:var(--htOdakSilik)}
.htSat.acik td.htAyBas{border-left-color:rgba(255,255,255,.28)}
.htSat.acik .htHgo.iyi{color:var(--htOdakArti)} .htSat.acik .htHgo.kotu{color:var(--htOdakEksi)}
.htSat.acik .htHgo.orta{color:#ffe08a}

/* ÜST TABLO SATIRLARI (17.09.2026 · kullanıcı: "Genel toplam koyu lacivert
   olsun, onun haricini beyaz yapabiliriz, Mağazalar Toplamı sadece biraz açık").
     GENEL TOPLAM      koyu lacivert (başlık bandının tonu), beyaz yazı
     MAĞAZALAR TOPLAM  çok açık mavi zemin, lacivert kalın yazı
     LFL / DİĞER       beyaz, girintili
     ONLINE            beyaz, kalın
   Açılınca da kendi rengini korur (odak bandına dönmez). */
.htSat.htGenel td,.htSat.htGenel:hover td{background:var(--htLac);border-top-color:var(--htLac);color:#fff}
.htSat.htGenel td b{color:#fff;font-weight:650}
.htSat.htGenel td.htAyBas{border-left-color:rgba(255,255,255,.35)}
.htSat.htGenel .htOkA,.htSat.htGenel .htBos{color:#c9d5ea}
.htSat.htGenel .htD.art,.htSat.htGenel .htHgo.iyi{color:#9ff0c2}
.htSat.htGenel .htD.azl,.htSat.htGenel .htHgo.kotu{color:#ffc4bd}
.htSat.htGenel .htD.sif,.htSat.htGenel .htHgo.orta{color:#ffe08a}
.htEkran{--htMagZ:#e6eef9;--htMagZH:#dbe6f6}
:root[data-theme="dark"] .htEkran{--htMagZ:#223350;--htMagZH:#2a3d5e}
.htSat.htOrta[data-id="g:magaza"] td{background:var(--htMagZ)}
.htSat.htOrta[data-id="g:magaza"]:hover td{background:var(--htMagZH)}
.htSat.htGenel td.htAd,.htSat.htOrta td.htAd,.htSat.htGrup td.htAd{font-weight:700;letter-spacing:.02em}
.htSat.htOrta .htSay b{font-weight:600}
.htSat.htGrup td.htAd{padding-left:30px}
/* Beyaz satırlarda açılınca odak bandı değil hafif ton (grup satırı başlık değil). */
.htSat.htOrta.acik td,.htSat.htGrup.acik td{background:var(--htZemin);color:var(--htYazi);border-top-color:var(--htCizgi)}
.htSat.htOrta[data-id="g:magaza"].acik td{background:var(--htMagZ)}
.htSat.htOrta.acik td b,.htSat.htGrup.acik td b,.htSat.htOrta.acik td.htAd,.htSat.htGrup.acik td.htAd{color:var(--htYazi)}
.htSat.htOrta.acik .htOkA,.htSat.htGrup.acik .htOkA,.htSat.htOrta.acik .htBos,.htSat.htGrup.acik .htBos{color:var(--htSilik)}
.htSat.htOrta.acik td.htAyBas,.htSat.htGrup.acik td.htAyBas{border-left-color:var(--htAyrac)}
.htSat.htOrta.acik .htD.art,.htSat.htGrup.acik .htD.art{color:var(--htDArt)}
.htSat.htOrta.acik .htD.azl,.htSat.htGrup.acik .htD.azl{color:var(--htDAzl)}
.htSat.htOrta.acik .htD.sif,.htSat.htGrup.acik .htD.sif{color:var(--htDSif)}
.htSat.htOrta.acik .htHgo.iyi,.htSat.htGrup.acik .htHgo.iyi{color:var(--htArti)}
.htSat.htOrta.acik .htHgo.kotu,.htSat.htGrup.acik .htHgo.kotu{color:var(--htEksi)}
.htSat.htOrta.acik .htHgo.orta,.htSat.htGrup.acik .htHgo.orta{color:var(--htUyari)}
.htSat.htGenel.acik td{background:var(--htLac)}
/* ONLINE ile mağaza toplamları arasındaki AYIRICI (kullanıcı 18.09.2026:
   "biraz daha boşluk bırak, hata gibi görünüyor"). 10px beyaz şerit tablo
   içinde bir çizim hatası gibi duruyordu → daha yüksek + ekran zemini tonu,
   altındaki ONLINE satırı kalın ayraç çizgisiyle başlar. */
.htBosluk td{height:18px;padding:0;border:0;background:var(--htHover)}
.htSat[data-id="g:online"] td{border-top:2px solid var(--htAyrac)}

/* AYRINTI = İNCE ŞERİT (kullanıcı: "ince bir bar hâlinde sığar").
   Tek satır, kalemler yan yana: etiket · değer · değişim. */
.htDet td{padding:0;border-top:0;background:var(--htZebA)}
.htDetIc{display:flex;flex-wrap:wrap;align-items:center;gap:2px 22px;padding:5px 14px 5px 36px}
.htDetIc>div{display:flex;align-items:baseline;gap:6px;white-space:nowrap;min-width:0}
.htDetIc span{font-size:11px;font-weight:600;color:var(--htSilik)}
.htDetIc b{font-size:12.5px;font-weight:650;color:var(--htYazi);font-variant-numeric:tabular-nums}
.htDetIc .htAlt{display:inline;margin:0;font-size:11.5px}
.htDetIc b:empty{display:none}

.htMagUst{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.htMagUst select{padding:7px;max-width:220px}

/* PC'de rakamlar bir tık büyük (kullanıcı: "pc için büyütebiliriz, çok değil"). */
@media (min-width:1100px){
  .htSay b{font-size:15px}
  .htTablo td.htAd{font-size:14.5px}
  .htSay .htAlt{font-size:12px}
}
@media (max-width:560px){
  .htTablo td,.htTablo th{padding:6px 8px}
  .htTablo col.htAdK{width:140px}
  .htSay b,.htTablo td.htAd{font-size:12.5px}
}