/* htc_platform — sade, kendi kendine yeten arayüz (CDN YOK)
 *
 * 🔴 **DIŞ KAYNAK YOK, OLMAYACAK.** Panel internetsiz de düzgün açılmalı
 * (çevrimdışı exe'nin varlık sebeplerinden biri) ve tek bir CDN kesintisi
 * bütün ekranları stilsiz bırakmamalı. Yazı tipi de sistemden gelir.
 *
 * 🔴 **SINIF ADLARI SÖZLEŞMEDİR.** 68 şablon bu adları kullanıyor; görünüm
 * burada değişir, şablonlar hiç ellenmez. Yeni bir görünüm gerekiyorsa önce
 * buraya bir belirteç/sınıf eklenir — şablona gömülü `<style>` YAZILMAZ
 * (1 Eyl 2026'da 59 kopya kural tam bu yüzden birikmişti).
 */
:root {
  /* Marka — lacivert + turuncu korunuyor, tonları belirteçleşti */
  --lacivert: #1f3a5f;
  --lacivert-koyu: #16293f;
  --lacivert-acik: #2c5286;
  --turuncu: #e8762d;
  --turuncu-koyu: #cf6420;

  /* Yüzeyler: "zemin" sayfa, "yuzey" kart/kutu, "yuzey-2" ikincil dolgu */
  --zemin: #f5f7fa;
  --yuzey: #ffffff;
  --yuzey-2: #f8fafc;
  --cizgi: #e3e8ef;
  --cizgi-koyu: #cbd5e1;

  --metin: #1e293b;
  --soluk: #64748b;

  /* Anlamsal renkler (rozet/mesaj/tutar) — tek yerde */
  --yesil: #15803d;  --yesil-zemin: #f0fdf4;  --yesil-cizgi: #bbf7d0;
  --kirmizi: #b91c1c; --kirmizi-zemin: #fef2f2; --kirmizi-cizgi: #fecaca;
  --sari: #a16207;   --sari-zemin: #fefce8;   --sari-cizgi: #fde68a;

  /* Yükseklik: sert çerçeve yerine yumuşak gölge (modern derinlik) */
  --golge-1: 0 1px 2px rgba(15, 23, 42, .04), 0 1px 3px rgba(15, 23, 42, .06);
  --golge-2: 0 2px 4px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .08);
  --golge-3: 0 8px 24px rgba(15, 23, 42, .12);

  /* Yuvarlaklık ölçeği */
  --r-1: 6px; --r-2: 10px; --r-3: 14px;

  /* Odak halkası — erişilebilirlik (klavyeyle gezen kullanıcı nerede olduğunu
     görmeli); tarayıcının varsayılan konturu markayla uyumsuzdu. */
  --odak: 0 0 0 3px rgba(44, 82, 134, .28);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--zemin); color: var(--metin);
  /* ⚠ Sistem yazı tipi yığını: dış font YÜKLENMEZ (CDN yok kuralı) ama her
     işletim sisteminde o sistemin en okunaklı arayüz fontu kullanılır. */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, sans-serif;
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
a { color: var(--lacivert-acik); text-decoration: none; }
a:hover { color: var(--lacivert); text-decoration: underline; }

/* 🔴 RAKAMLAR TABLO RAKAMI (tabular-nums). Ön muhasebe ekranlarında tutarlar
   alt alta okunuyor; orantılı rakamlarda basamaklar kaymış görünüyor ve
   "10.000" ile "19.999" farklı genişlikte çiziliyordu. */
table, .ozet-kart .deger, .tutar, td, th { font-variant-numeric: tabular-nums; }

/* Klavye odağı — fare tıklamasında görünmez, Tab'la gezerken belirgin */
:focus-visible { outline: none; box-shadow: var(--odak); border-radius: var(--r-1); }

/* ⚠ Hareket azaltma tercihi olan kullanıcıda geçişler kapanır (erişilebilirlik
   ayarı; baş dönmesi/odak kaybı yaşayanlar için). */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* Yerleşim: sol menü + içerik (gövde dikey flex → çerçeve footer'ı en alta oturur) */
body { min-height: 100vh; display: flex; flex-direction: column; }
.yerlesim { display: flex; flex: 1; }
.yan-menu {
  width: 256px; background: var(--lacivert-koyu); color: #cdd7e4;
  display: flex; flex-direction: column; flex-shrink: 0;
  transition: margin-left .22s ease;
}
.yerlesim.menu-kapali .yan-menu { margin-left: -256px; }
.yan-menu .logo { padding: 18px 16px; background: #fff; text-align: center; }
.yan-menu .logo img { max-width: 100%; height: auto; }
.yan-menu nav { padding: 12px 0; flex: 1; }
.yan-menu nav a {
  display: block; padding: 12px 20px; font-size: 16px; color: #cdd7e4;
  border-left: 3px solid transparent;
}
.yan-menu nav a:hover { background: var(--lacivert); color: #fff; }
.yan-menu nav a.secili { background: var(--lacivert); color: #fff; border-left-color: var(--turuncu); }
.yan-menu .baslik {
  padding: 16px 20px 5px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .08em; color: var(--soluk);
}
.yan-menu .alt { padding: 14px 20px; font-size: 12px; color: var(--soluk); border-top: 1px solid #24384f; }

.icerik { flex: 1; padding: 24px 30px; min-width: 0; }
.ust-cubuk { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.ust-cubuk h1 { margin: 0; font-size: 21px; color: var(--lacivert); }
.ust-sol { display: flex; align-items: center; gap: 10px; min-width: 0; }
#menu-dugme {
  display: inline-flex; align-items: center; background: none; border: 0; cursor: pointer;
  padding: 6px; border-radius: 8px; color: var(--lacivert);
}
#menu-dugme:hover { background: #e6ebf2; }
.kullanici-kutu { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--soluk); }
.kullanici-kutu .kullanici-ad { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.ust-buton {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px;
  border: 1px solid var(--cizgi); border-radius: 999px; background: #fff;
  color: var(--lacivert); font-size: 13px; transition: .15s;
}
.ust-buton:hover { border-color: var(--lacivert); box-shadow: 0 2px 6px rgba(31,58,95,.14); }
.ust-buton.cikis { color: #c94f3d; }
.ust-buton.cikis:hover { border-color: #c94f3d; }
/* Menü açıkken arkayı karartan perde (yalnız çekmece kipinde görünür).
   Sebep: çekmece içeriğin ÜSTÜNDE duruyor ve hamburger düğmesi onun ALTINDA kalıyor
   → menüyü kapatmanın hiçbir yolu yoktu. Perdeye dokunmak kapatır. */
.menu-perde { display: none; }
tr.tikla-satir { cursor: pointer; }

/* Kartlar / kutular — sert çerçeve yerine yumuşak yükseklik */
.kutu {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-2); padding: 20px; margin-bottom: 18px;
  box-shadow: var(--golge-1);
}
.ozet-kartlar { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.ozet-kart {
  background: #fff; border: 1px solid var(--cizgi); border-radius: 8px;
  padding: 16px 20px; min-width: 170px; flex: 1;
}
.ozet-kart .deger { font-size: 28px; font-weight: 600; color: var(--lacivert); }
.ozet-kart .etiket { font-size: 13px; color: var(--soluk); }

.modul-kartlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.modul-kart {
  background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; padding: 18px;
  display: block; transition: box-shadow .15s;
}
.modul-kart:hover { box-shadow: 0 3px 10px rgba(31,58,95,.15); }
/* İkon ve modül adı ORTALI (kuzen kararı, 28 Tem 2026); açıklama metni sola
   dayalı kalıyor — uzun cümleyi ortalamak okumayı zorlaştırıyor. */
.modul-kart .ikon { font-size: 26px; text-align: center; }
.modul-kart h3 {
  margin: 8px 0 6px; font-size: 16px; color: var(--lacivert); text-align: center;
  /* Yeni adlar uzun ("E-Ticaret Sitesi – Pazaryeri Entegrasyon Sistemi") ve
     240px'lik kartta iki-üç satıra iniyor; kısa adlarla aynı hizada dursunlar
     diye asgari yükseklik veriliyor, yoksa kart içerikleri kayıyor. */
  min-height: 2.6em; display: flex; align-items: center; justify-content: center;
}
/* `overflow-wrap` ŞART: kart metinlerinde kırılamayan uzun diziler geçebiliyor
   (ör. sağlayıcı adlarının eğik çizgiyle sıralandığı bir liste). Böyle bir kelime
   245px'lik kolona sığmayınca kutunun DIŞINA taşıyor, metin kırpılıyor ve sayfa
   yatay kayıyordu (28 Tem 2026'da rapor panelinde ölçüldü: 18px taşma). */
.modul-kart p { margin: 0; font-size: 13px; color: var(--soluk); overflow-wrap: anywhere; }
.modul-kart .sure { margin-top: 10px; font-size: 12px; color: var(--turuncu); }
/* Kart bir <a> OLABİLİR ya da içinde <a> BULUNDURABİLİR: demo'da kartın altına
   açılır anlatım (<details>) biniyor ve <details> bir <a> içine konamaz, o yüzden
   o kartlar sarıcı div + iç <a> düzeninde. Görünüm iki düzende de aynı kalsın
   diye iç bağlantı blok yapılır. */
.modul-kart > a { display: block; }
/* Aynı kartta iki paragraf olabiliyor (rapor kartında soru + açıklama);
   `p { margin: 0 }` ikisini birbirine yapıştırıyordu. */
.modul-kart p + p { margin-top: 6px; }

/* İşletmeye özel rapor teklifi (31 Tem 2026) — rapor kartlarıyla AYNI ızgarada
   ama kesik çerçeveyle ayrışır: tıklanacak bir rapor değil, bir hizmet.
   Tıklanabilir görünmemesi için `cursor` değişmiyor ve hover gölgesi yok. */
/* Demoda "yakında" kartı: tıklanamaz, soluk. `.kart-ic` <a>'nın yerine geçer —
   blok davranışı korunsun diye aynı display kuralını alır (bkz. panel.html). */
.modul-kart > .kart-ic { display: block; }
.modul-kart.yakinda { background: #fbfbfc; border-style: dashed; cursor: default; }
.modul-kart.yakinda:hover { box-shadow: none; }
.modul-kart.yakinda h3, .modul-kart.yakinda .ikon { opacity: .72; }
.modul-kart .yakinda-rozet {
  display: inline-block; margin: 0 auto 6px; padding: 2px 10px; border-radius: 999px;
  background: #fff6e9; border: 1px solid #f0c98a; color: #a35b00; font-size: 12px;
}
.modul-kart .yakinda-not { margin-top: 8px; font-size: 12px; color: var(--soluk); font-style: italic; }

.modul-kart.teklif { border-style: dashed; background: #fcfdff; }
.modul-kart.teklif:hover { box-shadow: none; }
.modul-kart.teklif summary {
  cursor: pointer; font-size: 13px; font-weight: 500;
  color: var(--lacivert); margin-top: 10px;
}
.modul-kart.teklif ul { margin: 8px 0 0; padding-left: 18px; }
.modul-kart.teklif li { font-size: 13px; color: var(--soluk); margin-bottom: 5px; }
.modul-kart.teklif li b { color: var(--lacivert); font-weight: 500; }
.modul-kart.teklif .teklif-ornek {
  margin-top: 8px; font-size: 12px; color: var(--soluk); font-style: italic;
}
.modul-kart.teklif .teklif-iletisim {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--cizgi);
  font-size: 13px; color: var(--lacivert);
}

/* ── Demo: "Bu ne işe yarar?" açılır anlatımı ──────────────────────────────
   Ziyaretçi satıcı olmadan anlamalı (kuzen kararı, 28 Tem 2026). Kapalı
   dururken kartın boyunu değiştirmez; ilgilenen tıklar. */
.kart-anlatim { margin-top: 12px; border-top: 1px solid var(--cizgi); padding-top: 10px; }
.kart-anlatim > summary {
  cursor: pointer; font-size: 13px; font-weight: 500; color: var(--turuncu);
  list-style: none;
}
.kart-anlatim > summary::-webkit-details-marker { display: none; }
.kart-anlatim > summary::before { content: '▸ '; }
.kart-anlatim[open] > summary::before { content: '▾ '; }
.kart-anlatim .birim {
  margin: 8px 0 2px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--soluk);
}
.kart-anlatim ul { margin: 6px 0 0; padding-left: 18px; }
.kart-anlatim li { font-size: 13px; color: var(--soluk); line-height: 1.5; margin-bottom: 6px; }
/* Raporun cevapladığı soru — açıklamadan ÖNCE ve ondan ayırt edilebilir dursun. */
.modul-kart p.rapor-soru { color: var(--lacivert); font-weight: 500; font-style: italic; }

/* Tablolar — uzun listeler için okunaklılık */
table { width: 100%; border-collapse: collapse; background: var(--yuzey); }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--cizgi); text-align: left; }
th {
  background: var(--lacivert); color: #fff; font-weight: 600; font-size: 12px;
  letter-spacing: .3px; text-transform: uppercase; white-space: nowrap;
  /* 🔴 Başlık YAPIŞKAN: ERP listelerinde yüzlerce satır var, aşağı inince
     hangi kolona baktığın kayboluyordu. */
  position: sticky; top: 0; z-index: 2;
}
tbody tr:nth-child(even) td { background: var(--yuzey-2); }
tbody tr:hover td { background: #eef4fb; }
tbody tr:last-child td { border-bottom: 0; }
.tablo-kutu {
  background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-2); overflow: auto; box-shadow: var(--golge-1);
}

/* Formlar */
/* Seçici bilerek `form.dikey` DEĞİL: sınıf form yerine bir sarıcı div'e verildiğinde
   (rapor ayarları sayfası — iki sütunlu yerleşim) kural eşleşmiyordu, etiketler
   `inline` kalıp kutuların YANINA akıyor ve sayfa iç içe geçmiş görünüyordu. */
.dikey label { display: block; margin: 12px 0 4px; font-size: 13px; color: var(--soluk); }
input[type=text], input[type=password], input[type=email], input[type=date],
input[type=number], select, textarea {
  width: 100%; max-width: 480px; padding: 9px 12px;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-1);
  font: inherit; background: var(--yuzey); color: var(--metin);
  transition: border-color .15s, box-shadow .15s;
}
input:hover:not(:disabled), select:hover:not(:disabled),
textarea:hover:not(:disabled) { border-color: var(--soluk); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--lacivert-acik); box-shadow: var(--odak);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--yuzey-2); color: var(--soluk); cursor: not-allowed;
}
::placeholder { color: #94a3b8; }
textarea { min-height: 70px; }
/* Şifre alanı: göster/gizle butonlu sarıcı */
.sifre-kutu { position: relative; max-width: 480px; }
.sifre-kutu input { max-width: none; padding-right: 40px; }
.sifre-goster {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; cursor: pointer; font-size: 15px; padding: 2px;
  line-height: 1; opacity: .65;
}
.sifre-goster:hover { opacity: 1; }
.buton {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--lacivert); color: #fff; border: 0;
  padding: 9px 18px; border-radius: var(--r-1); font: inherit; font-weight: 500;
  cursor: pointer; margin-top: 14px; box-shadow: var(--golge-1);
  transition: background .15s, box-shadow .15s, transform .05s;
}
.buton:hover { background: var(--lacivert-koyu); box-shadow: var(--golge-2);
  text-decoration: none; color: #fff; }
/* ⚠ Basılma geri bildirimi: dokunmatik ekranda "bastım mı" belirsizdi. */
.buton:active { transform: translateY(1px); box-shadow: var(--golge-1); }
.buton:disabled, .buton[disabled] {
  background: var(--cizgi-koyu); color: #fff; cursor: not-allowed;
  box-shadow: none; transform: none;
}
.buton.turuncu { background: var(--turuncu); }
.buton.turuncu:hover { background: var(--turuncu-koyu); }
.buton.kucuk { padding: 5px 11px; font-size: 12.5px; margin: 0; }
.buton.gri { background: var(--soluk); }
.buton.gri:hover { background: #4d5b6b; }
/* Excel indirme butonu (12 Ağu 2026, kuzen isteği): dosyanın ne olduğu renginden
   anlaşılsın — panelin lacivert butonları arasında kayboluyordu. Excel'in kendi
   yeşili (#217346). */
.buton.excel { background: #217346; }
.buton.excel:hover { background: #1a5c37; }

/* Durum rozetleri + mesajlar */
/* Rozetler — dolu renk yerine yumuşak zemin + koyu yazı (modern, daha okunaklı
   ve uzun listelerde göz yormuyor). */
.rozet {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.5;
  border: 1px solid transparent;
}
.rozet.yesil { background: var(--yesil-zemin); color: var(--yesil);
  border-color: var(--yesil-cizgi); }
.rozet.gri { background: var(--yuzey-2); color: var(--soluk);
  border-color: var(--cizgi-koyu); }
.rozet.kirmizi { background: var(--kirmizi-zemin); color: var(--kirmizi);
  border-color: var(--kirmizi-cizgi); }
.rozet.sari { background: var(--sari-zemin); color: var(--sari);
  border-color: var(--sari-cizgi); }
/* ⚠ Sol şeritli mesaj: göz önce renge takılıyor, metni okumadan türü anlıyor. */
.mesaj {
  padding: 12px 16px; border-radius: var(--r-1); margin-bottom: 14px;
  font-size: 14px; border: 1px solid transparent; border-left-width: 4px;
}
.mesaj.bilgi, .mesaj.basari {
  background: var(--yesil-zemin); color: var(--yesil);
  border-color: var(--yesil-cizgi); border-left-color: var(--yesil);
}
.mesaj.hata {
  background: var(--kirmizi-zemin); color: var(--kirmizi);
  border-color: var(--kirmizi-cizgi); border-left-color: var(--kirmizi);
}
.mesaj.uyari {
  background: var(--sari-zemin); color: var(--sari);
  border-color: var(--sari-cizgi); border-left-color: var(--sari);
}

/* Giriş sayfası */
.giris-sayfa {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--lacivert-koyu), var(--lacivert));
  padding: 20px 16px;
}
/* Sabit 360px değil: 360'tan dar telefonlarda (iPhone SE 320px) kutu ekrandan taşıyordu. */
.giris-kutu { background: #fff; border-radius: 10px; padding: 34px 38px; width: 100%; max-width: 360px; }
.giris-kutu img { display: block; max-width: 220px; margin: 0 auto 20px; }
.giris-kutu h2 { margin: 0 0 16px; font-size: 17px; color: var(--lacivert); text-align: center; }
.arac-cubugu { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.arac-cubugu form { display: flex; gap: 8px; }
.arac-cubugu input[type=text] { width: 240px; }

/* ══ Duyarlı yerleşim — tablet ve telefon ═══════════════════════════════════
   Kırılma 900px: iPad dikey (768–834px) de çekmece kipine girsin. 900'ün üstünde
   yan menü akışta durur. temel.html'deki JS aynı eşiği kullanır — biri değişirse
   diğeri de değişmeli (menü "açık" hatırlanırken telefonda içeriği örtmesin). */
@media (max-width: 1180px) {
  .icerik { padding: 20px 22px; }
}
@media (max-width: 900px) {
  .yan-menu {
    position: fixed; left: 0; top: 0; bottom: 0; z-index: 1200; margin-left: 0 !important;
    width: min(280px, 82vw); transform: translateX(0); transition: transform .22s ease;
    box-shadow: 4px 0 18px rgba(0,0,0,.25); overflow-y: auto;
  }
  .yerlesim.menu-kapali .yan-menu { transform: translateX(-100%); box-shadow: none; }
  .menu-perde {
    display: block; position: fixed; inset: 0; z-index: 1100;
    background: rgba(12,22,36,.5);
  }
  .yerlesim.menu-kapali .menu-perde { display: none; }
  .yan-menu nav a { padding: 14px 20px; }   /* dokunma hedefi ~48px */

  .icerik { padding: 14px 14px 22px; }
  .ust-cubuk { margin-bottom: 14px; gap: 8px; }
  .ust-cubuk h1 { font-size: 18px; }
  .kullanici-kutu .kullanici-ad { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ust-buton span { display: none; }        /* dar ekranda yalnız simge */
  .ust-buton { padding: 9px 11px; }
  #menu-dugme { padding: 9px; }

  /* Tablolar: 6-7 kolonu 390px'e SIKIŞTIRMAK yerine yatay kaydır. `width:100%`
     tek başına kaydırma üretmez — tablo kabına küçülür, sütunlar okunmaz olur. */
  .tablo-kutu { -webkit-overflow-scrolling: touch; }
  .tablo-kutu table { min-width: 640px; }
  th, td { padding: 10px; }

  .kutu { padding: 14px; }
  .ozet-kart { padding: 14px 16px; min-width: 130px; }
  .ozet-kart .deger { font-size: 24px; }
  .buton.kucuk { padding: 8px 12px; font-size: 13px; }

  /* iOS Safari 16px'ten küçük yazılı bir alana odaklanınca sayfayı otomatik
     yakınlaştırır ve geri çıkmaz — form alanları bu yüzden 16px. */
  input[type=text], input[type=password], input[type=email], input[type=date],
  input[type=number], select, textarea { font-size: 16px; }
}
@media (max-width: 560px) {
  .modul-kartlar { grid-template-columns: 1fr; }
  .ozet-kartlar { gap: 10px; }
  .ozet-kart { flex: 1 1 calc(50% - 5px); }
  .arac-cubugu { gap: 8px; }
  .arac-cubugu form { flex: 1 1 100%; }
  .arac-cubugu input[type=text] { width: auto; flex: 1; min-width: 0; }
  .giris-kutu { padding: 26px 20px; }
}

/* ── Modül ekranları — ORTAK MAKYAJ (1 Eyl 2026) ─────────────────────────
   🔴 Bu kurallar 18 ayrı şablonda TEKRAR TANIMLIYDI (`.buton.ikincil` tek
   başına 18 kez). Aynı sınıfın kopyaları zamanla ayrışıyor ve ekranlar
   birbirine benzemez oluyordu — kuzenin "admin panel ile uyumlu olsun"
   isteğinin altındaki asıl sebep buydu. Tek kaynak burasıdır.
   ⚠ Çakışan varyantlar ölçülüp teke indirildi: `.he-arac` margin 14px
   (9 şablon 14, 1 şablon 18 kullanıyordu), `.he-suzgec` sarmalı olan
   (mobilde taşmasın), `.he-baslik-satiri > div` min-width 180px.
   ⚠ Kendi başına açılan sayfalar (`yerel_kurulum`, `reklam_ajansi_onay`,
   `kontrol_listesi_dosya`) BİLEREK dışarıda: internetsiz açılmaları gerekiyor,
   dış dosya çekemezler. */
.buton.ikincil { background: #fff; color: var(--lacivert);
  border: 1px solid var(--cizgi); }
.buton.ikincil:hover { background: var(--zemin); }

/* Araç çubuğu: sayfa üstündeki eylem düğmeleri */
.he-arac { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 14px; }

/* Giriş + yanında düğme (stok kartı "Kod üret", 2 Eki 2026). min-width:0 dar ekranda taşmayı önler */
.he-satir-giris { display: flex; gap: 8px; align-items: center; }
.he-satir-giris input { flex: 1; min-width: 0; }

/* Süzgeç satırı */
.he-suzgec { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.he-suzgec input[type=text] { flex: 1; max-width: 320px; padding: 7px 10px;
  border: 1px solid var(--cizgi); border-radius: 6px; }
.he-suzgec select { padding: 7px 10px; border: 1px solid var(--cizgi);
  border-radius: 6px; }

/* Sayfalama */
.he-sayfalama { display: flex; align-items: center; gap: 12px; margin-top: 14px;
  font-size: 13px; color: var(--soluk); }

/* Form başlık satırı (yan yana alanlar) */
.he-baslik-satiri { display: flex; gap: 16px; flex-wrap: wrap;
  margin-bottom: 10px; }
.he-baslik-satiri > div { flex: 1; min-width: 180px; }

/* Kalem tablosu (fatura / EDM aktarım) */
#kalem-tablosu select, #kalem-tablosu input { width: 100%; padding: 6px 8px;
  border: 1px solid var(--cizgi); border-radius: 6px; }

/* Ön Muhasebe ana menüsü — iş akışına göre gruplu (26 Eyl 2026, kuzen: "menü
   karmaşasını düzenleyelim"). 18 eş ağırlıklı düğme yerine beş grup kartı;
   her bağlantının altında ne işe yaradığı. Dar ekranda tek sütun. */
.he-menu { display: grid; gap: 12px; margin: 0 0 18px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.he-menu-grup { background: var(--yuzey); border: 1px solid var(--cizgi);
  border-radius: var(--r-2); padding: 12px 10px 8px; box-shadow: var(--golge-1); }
.he-menu-grup h3 { margin: 0 0 4px; padding: 0 8px; font-size: 13px; font-weight: 700;
  color: var(--lacivert); }
.he-menu-grup a { display: block; padding: 7px 8px; border-radius: var(--r-1);
  color: var(--metin); text-decoration: none; font-size: 14px; font-weight: 600;
  line-height: 1.3; }
.he-menu-grup a small { display: block; font-size: 12px; font-weight: 400;
  color: var(--soluk); }
.he-menu-grup a:hover { background: var(--zemin); color: var(--lacivert-acik); }
.he-menu-grup a:focus-visible { outline: none; box-shadow: var(--odak); }

/* Uyarı vurguları */
.he-uyari-kart { border-color: #c94f3d; }
.he-uyari-kart .deger { color: #c94f3d; }
.he-uyari-kutu { border-color: #c94f3d; background: #fdf3f1; }

/* Kural formu (EDM eşleme kuralları) */
.he-kural-formu { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--cizgi); }
.he-kural-formu input, .he-kural-formu select { padding: 7px 10px;
  border: 1px solid var(--cizgi); border-radius: 6px; }
.he-kural-formu input[type=text] { min-width: 160px; }
.he-kural-formu select { min-width: 220px; flex: 1; }
.he-oneri { font-size: 11px; color: var(--soluk); margin-top: 4px; }

/* ── Aktif kiracı şeridi (yalnız admin) ───────────────────────────────────
   🔴 Boş liste ile "veri silinmiş" ayırt edilemiyordu: admin düz oturumda
   kiracı 0'dır (HTC'nin kendi defteri) ve müşteri kayıtları görünmez.
   ⚠ Uyarı DEĞİL bilgi: şerit soluk, dikkat çalmıyor — her sayfada duracak.
   ⚠ Kendi defterindeyken sarı: "burada boşluk normaldir" demenin en kısa
   yolu; müşteri defterindeyken nötr mavi. */
.kiraci-serit {
  margin: 0 0 14px; padding: 7px 12px; border-radius: var(--r-1);
  background: #eef4fb; border-left: 3px solid var(--lacivert-acik);
  font-size: 13px; color: var(--metin); line-height: 1.5;
}
.kiraci-serit.kendi { background: #fff6e9; border-left-color: #e0a040; }
.kiraci-serit a { color: var(--lacivert); }

/* ═══════════════════════════════════════════════════════════════════════
   MODÜL BİLEŞENLERİ — mevzuat (`.mv-*`) ve reklam ajansı (`.ra-*`)
   ═══════════════════════════════════════════════════════════════════════
   2 Eyl 2026 — modern arayüz 3. adımın `stil.css` tarafı. Bu sınıflar
   modüllerin KENDİ şablonlarında tekrar tekrar yazılıydı (79 kural, 61
   seçici). Hepsi zaten tema belirteçlerini (`--lacivert`, `--cizgi`,
   `--soluk`) kullanıyordu, yani tema uyumluydular — sorun kopyalanmış
   olmalarıydı: aynı kuralın iki şablondaki sürümü `line-height`te bile
   ayrışmaya başlamıştı.

   🔴 DEĞERLER ELLE YAZILMADI, şablonlardaki ölçülen ÇOĞUNLUK değerinden
   ÜRETİLDİ. Aynı gün Bootstrap tarafında elle yazmayı denedim ve kısaltılmış
   ölçüm çıktısından tahmin yürütünce `.toggle-switch`in çerçevesi sessizce
   kayboldu; geometriyi kopyalamak değil ÜRETMEK doğrusu.

   ⛔ `.ra-arac` ve `.ra-ikili` buraya ALINMADI: ızgara kolonları ve boşluk
   değerleri ekrandan ekrana gerçekten değişiyor (`1fr 1fr` / `5fr 7fr`),
   ortaklaştırmak o yerleşimleri bozardı. Onlar şablonda kalır.
   ⚠ `@media` içindeki override'lar (`.ra-donen{animation:none}` hareket
   azaltmada, `.mv-sayac{white-space:normal}` dar ekranda) da şablonda kalır —
   buradaki taban kuralın ÜSTÜNE yazıyorlar. */
.mv-ust { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; justify-content: space-between; margin-bottom: 14px; }
.mv-tanit { margin: 0; font-size: 13px; color: var(--soluk); max-width: 640px; line-height: 1.6; }
.mv-sayac { font-size: 13px; color: var(--soluk); white-space: nowrap; }
.mv-sekme { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.mv-sekme a { padding: 6px 14px; border: 1px solid var(--cizgi); border-radius: 999px; background: #fff; font-size: 13px; }
.mv-sekme a.secili { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.mv-rozet { font-size: 12px; color: #a35b00; background: #fff6e9; border: 1px solid #f0c98a; border-radius: 999px; padding: 3px 10px; }
.mv-uyari.sari { background: #fff6e9; border-left-color: #e0a040; }
.mv-uyari.kirmizi { background: #fdf3f1; border-left-color: #c94f3d; }
.mv-form { background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; padding: 14px; margin-bottom: 18px; }
.mv-form textarea { width: 100%; max-width: none; font-size: 15px; line-height: 1.5; min-height: 74px; resize: vertical; }
.mv-form .buton { margin-top: 10px; }
.mv-cevap { background: #fff; border: 1px solid var(--cizgi); border-left: 4px solid #2e9e5b; border-radius: 8px; padding: 16px 18px; margin-bottom: 18px; }
.mv-metin { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; font-size: 15px; }
.mv-kunye { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--cizgi); font-size: 12px; color: var(--soluk); line-height: 1.5; }
.mv-atif { display: inline-block; min-width: 20px; text-align: center; background: var(--lacivert); color: #fff; border-radius: 4px; padding: 0 5px; font-size: 12px; text-decoration: none; }
.mv-kaynak-baslik { font-size: 15px; color: var(--lacivert); margin: 0 0 10px; }
.mv-kaynaklar { display: flex; flex-direction: column; gap: 8px; }
.mv-kaynak { background: #fff; border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 13px; }
.mv-kaynak summary { cursor: pointer; display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; font-size: 13.5px; }
.mv-kaynak[open] { border-color: var(--lacivert); }
.mv-no { background: var(--lacivert); color: #fff; border-radius: 4px; padding: 1px 7px; font-size: 12px; flex: none; }
.mv-ad { font-weight: 600; color: var(--lacivert); }
.mv-alt { color: var(--metin); }
.mv-tarih { color: var(--soluk); font-size: 12px; }
.mv-govde { white-space: pre-wrap; overflow-wrap: anywhere; font-family: inherit; font-size: 13.5px; line-height: 1.65; margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--cizgi); }
.mv-baglanti { margin: 8px 0 0; font-size: 12px; }
.mv-bos { color: var(--soluk); font-size: 13px; }
.mv-izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 16px; }
.ra-uyari.sari { background: #fff6e9; border-left-color: #e0a040; }
.ra-not { font-size: 12px; color: var(--soluk); margin: -2px 0 14px; line-height: 1.55; }
.ra-konu { font-size: 13px; color: var(--soluk); }
.ra-gorsel { display: block; width: 100%; max-width: 420px; border-radius: 8px; border: 1px solid var(--cizgi); margin-bottom: 10px; }
.ra-bos { border: 1px dashed var(--cizgi); border-radius: 8px; padding: 40px 12px; text-align: center; color: var(--soluk); font-size: 13px; margin-bottom: 12px; }
.ra-yanit { border-radius: 8px; padding: 10px 13px; margin-bottom: 12px; font-size: 13px; line-height: 1.55; }
.ra-yanit.olumlu { background: #e2f2e8; border: 1px solid #b8dfc7; color: #1e6b40; }
.ra-yanit.duzeltme { background: #fff6e9; border: 1px solid #f0c98a; color: #7a4a10; }
.ra-yukle-kutu { border: 1px solid var(--cizgi); border-radius: 8px; padding: 10px 13px; margin-bottom: 14px; font-size: 13px; }
.ra-yukle-kutu summary { cursor: pointer; }
.ra-yukle-kutu form { margin-top: 10px; }
.ra-akis { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ra-ok { color: var(--soluk); }
.ra-donen { width: 15px; height: 15px; flex-shrink: 0; border-radius: 50%; border: 2px solid #e0b070; border-top-color: transparent; animation: ra-don .8s linear infinite; }
.ra-olcum { border-collapse: collapse; margin-top: 8px; font-size: 14px; }
.ra-olcum th, .ra-olcum td { padding: 5px 14px 5px 0; text-align: left; }
.ra-olcum th:not(:first-child), .ra-olcum td:not(:first-child) { text-align: right; font-variant-numeric: tabular-nums; }
.ra-olcum th { font-size: 12px; opacity: .7; font-weight: 600; }
.ra-suzgec { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }

/* ⚠ İki modülün "uyarı şeridi" AYNI bileşen, iki ayrı adla yazılmıştı ve
   `line-height` değerleri ayrışmıştı (1.55 / 1.6 / hiç). Tek kuralda
   birleşti — sınıf ADLARI korunuyor, şablonlara dokunulmadı. */
.mv-uyari, .ra-uyari { background: #f2f7fd; border-left: 3px solid var(--lacivert); border-radius: 6px; padding: 10px 13px; margin-bottom: 14px; font-size: 13px; line-height: 1.55; }

/* ── Hızlı Satış (htc-erp tezgâh ekranı) ─────────────────────────────────
   ⚠ 8 Eyl 2026'da bu kurallar ŞABLONA gömülmüştü ve `modul_tema_testi`in
   cırcır ölçütünü kırdı (1.763 > 1.760). Kural bu dosyanın başlığında
   yazılı: görünüm burada değişir, şablona `<style>` yazılmaz. Taşındı. */
.hs-duzen { display: grid; grid-template-columns: 1fr 320px; gap: 1rem; align-items: start; }
@media (max-width: 900px) { .hs-duzen { grid-template-columns: 1fr; } }
/* 🔴 Izgara öğesi içeriğinin en küçük genişliğinin altına İNMEZ (`min-width: auto`):
   geniş satır tablosu telefonda sütunu 544px'e itiyordu (375px ekranda ölçüldü).
   Tablo kendi kabında (`table-responsive`) kayar. */
.hs-duzen > * { min-width: 0; }
/* ⚠ `table-responsive` Bootstrap sınıfı ve platformda KARŞILIĞI YOKTU → satır tablosu
   kaymıyor, sayfayı taşırıyordu. Kapsam yalnız bu ekran: genel kural başka ekranlarda
   tablo içi açılır menüleri kırpabilirdi. */
.hs-kok .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#hsBarkod { font-size: 1.35rem; padding: .6rem .8rem; width: 100%; }
.hs-toplam { font-size: 2rem; font-weight: 700; }
.hs-tablo td, .hs-tablo th { vertical-align: middle; }
.hs-tablo input { width: 100%; }
.hs-uyari { color: #9C0006; font-weight: 600; }
/* Sebep cümlesi uyarının ALTINDA ve daha sakin: uyarı "ne oldu", ipucu
   "ne yapmalı" der; ikisi aynı ağırlıkta olsa hangisinin eylem olduğu
   tezgâhta okunmazdı. */
.hs-ipucu { color: var(--soluk); font-weight: 400; font-size: 12px; display: inline-block; margin-top: 2px; }
/* ── Hızlı Satış: dokunmatik kip (28 Eyl 2026) ────────────────────────────
   Kip `.hs-dokunmatik` sınıfıyla açılır (JS: `any-pointer: coarse` ya da elle).
   🔴 Ekran GENİŞLİĞİNE bağlanmadı: 15-22" dokunmatik kasa monitörü masaüstü
   genişliğinde, genişlik sorgusu onu hiç büyütmüyordu. Hedef boyu ≥ 48px. */
.hs-ust { display: flex; justify-content: space-between; align-items: center;
  gap: .5rem; flex-wrap: wrap; margin-bottom: .6rem; }
.hs-ust .buton { margin-top: 0; }
.hs-tablo .hs-s-miktar { width: 9.5rem; }
.hs-tablo .hs-s-fiyat { width: 9rem; }
.hs-tablo .hs-s-tutar { width: 8rem; }
.hs-tablo .hs-s-sil { width: 3rem; }
/* Barkod ve arama kutusu TAM GENİŞLİK: genel `input` kuralının en fazla
   genişliği onları etiketin yanına sıkıştırıyordu (ekranda ölçüldü). */
#hsBarkod, .hs-ara input { display: block; max-width: none; }
.hs-ara { margin-top: .6rem; }
.hs-ara input { width: 100%; }
.hs-bolum-baslik { margin-top: .75rem; }
.hs-urunler { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  gap: .45rem; margin-top: .45rem; }
.hs-urun-dugme {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; background: var(--yuzey); color: var(--metin);
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-1);
  padding: .45rem .6rem; min-height: 52px; font: inherit; cursor: pointer;
}
.hs-urun-dugme:hover { border-color: var(--lacivert); }
.hs-urun-dugme:active { transform: translateY(1px); background: var(--yuzey-2); }
.hs-urun-dugme .ad { font-weight: 600; line-height: 1.25; }
.hs-urun-dugme .fiyat { font-size: 12px; color: var(--soluk); }
.hs-miktar { display: flex; align-items: center; gap: 4px; }
.hs-miktar input { min-width: 3.2rem; text-align: center; }
.hs-adim {
  flex: 0 0 auto; width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--cizgi-koyu); border-radius: var(--r-1);
  background: var(--yuzey); color: var(--lacivert); font-size: 18px; line-height: 1;
  cursor: pointer;
}
.hs-adim:active { transform: translateY(1px); background: var(--yuzey-2); }
.hs-odeme { display: grid; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-bottom: .6rem; }
.hs-odeme button {
  padding: .55rem .3rem; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-1);
  background: var(--yuzey); color: var(--metin); font: inherit; font-weight: 600;
  cursor: pointer; line-height: 1.2;
}
.hs-odeme button.secili { background: var(--lacivert); color: #fff; border-color: var(--lacivert); }
.hs-tus { display: none; grid-template-columns: repeat(3, 1fr); gap: .4rem; margin-top: 1rem; }
.hs-tus button {
  min-height: 56px; border: 1px solid var(--cizgi-koyu); border-radius: var(--r-1);
  background: var(--yuzey); color: var(--metin); font: inherit; font-size: 1.4rem;
  font-weight: 600; cursor: pointer;
}
.hs-tus button:active { transform: translateY(1px); background: var(--yuzey-2); }
.hs-tus .temizle { color: var(--kirmizi); font-size: 1rem; }
.hs-tus .tamam { grid-column: span 2; background: var(--lacivert); color: #fff;
  border-color: var(--lacivert); font-size: 1.1rem; }
.hs-tus-hedef { grid-column: 1 / -1; }
.hs-dokunmatik .hs-tus { display: grid; }
.hs-dokunmatik #hsBarkod, .hs-dokunmatik .hs-ara input { min-height: 56px; }
.hs-dokunmatik .hs-tablo td { padding-top: 10px; padding-bottom: 10px; }
.hs-dokunmatik .hs-tablo .hs-s-miktar { width: 12rem; }
.hs-dokunmatik .hs-tablo input { min-height: 48px; font-size: 1.15rem; }
.hs-dokunmatik .hs-adim { width: 48px; height: 48px; font-size: 24px; }
.hs-dokunmatik .hs-tablo .buton.kucuk { min-width: 48px; min-height: 48px; font-size: 18px;
  justify-content: center; }
.hs-dokunmatik .hs-urunler { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; }
.hs-dokunmatik .hs-urun-dugme { min-height: 76px; font-size: 1.05rem; padding: .6rem .75rem; }
.hs-dokunmatik .hs-odeme button { min-height: 64px; font-size: 1.1rem; }
.hs-dokunmatik #hsSat { width: 100%; min-height: 64px; font-size: 1.25rem; justify-content: center; }
.hs-dokunmatik #hsCari, .hs-dokunmatik #hsHesap { min-height: 48px; }