@charset "UTF-8";
/* =====================================================================
   FİPOS — Arayüz  ·  sürüm 3
   fipos.fidata.tr

   ---------------------------------------------------------------------
   TASARIM KARARI

   Bu bir veri uygulaması. Kullanıcısı günde sekiz saat burada ve işi
   sayı okumak. "Premium" bu bağlamda daha büyük kart, daha çok gölge,
   daha fazla boşluk DEĞİL — ekrana daha çok doğru bilgi sığdırmak ve
   okunurluğu bozmamak demek. Tüketici uygulamalarının 16px gövdesi
   yerine 13.5px, satır yüksekliği sıkı, rakamlar tabular.

   Üç şey hiyerarşiyi taşıyor:
     1. ÇİZGİ KALINLIĞI — defterin kendi dili. Gölge değil, cetvel.
     2. ZEMİN TONU       — çukur (tablo başlığı) / düz (yaprak) / yüksek (menü)
     3. RAKAM HİZASI     — basamaklar alt alta gelmezse göz yanlış okur.

   Renk süs değil bilgi: alacak yeşili, borç kırmızısı muhasebenin
   kendi kodudur. Marka mavisi yalnızca eylem ve seçili durum içindir;
   dekorasyon olarak hiçbir yerde kullanılmaz.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Belirteçler
   ------------------------------------------------------------------ */
:root {
  /* Yüzeyler — kâğıt serisi. Soğuk nötr: uzun okumada parlamıyor. */
  --zemin:      #f5f6f9;
  --yuzey:      #ffffff;
  --yuzey-2:    #fafbfc;
  --yuzey-3:    #f0f2f6;   /* çukur: tablo başlığı, dip çubuk */

  /* Mürekkep — dört kademe. Üçten az olursa hiyerarşi kalınlıkla
     kurulmak zorunda kalıyor ve ekran kalabalıklaşıyor. */
  --murekkep:   #0f1524;
  --murekkep-2: #414a61;
  --murekkep-3: #6b7490;
  --murekkep-4: #99a1b6;

  /* Cetvel */
  --cizgi:      #e7eaf0;
  --cizgi-2:    #d6dbe5;
  --cizgi-3:    #bcc3d1;

  /* Marka — koyu, kendine güvenen mavi. Parlak mavi "tüketici"
     okunuyor; ticari yazılımda ciddiyet gerekiyor. */
  --marka:      #2d4ed8;
  --marka-koyu: #2440b8;
  --marka-sis:  #eef2ff;
  --marka-kenar:#c7d2fe;

  /* Muhasebe renkleri */
  --alacak:     #0e7a52;
  --alacak-sis: #e8f6f0;
  --borc:       #b42318;
  --borc-sis:   #fdeceb;
  --uyari:      #b54708;
  --uyari-sis:  #fff6ed;

  /* Yükseklik — üç kademe. Her şeye aynı gölgeyi vermek
     (yaygın şablon hatası) derinliği anlamsızlaştırıyor. */
  --y1: 0 1px 2px rgba(15, 21, 36, .05);
  --y2: 0 1px 3px rgba(15, 21, 36, .07), 0 1px 2px rgba(15, 21, 36, .04);
  --y3: 0 16px 40px -12px rgba(15, 21, 36, .22), 0 2px 8px rgba(15, 21, 36, .07);

  /* Yarıçap */
  --r1: 6px;    /* düğme, girdi */
  --r2: 10px;   /* yaprak */
  --r3: 14px;   /* pencere */

  /* Aralık — 4px tabanlı */
  --a1: 4px;  --a2: 8px;  --a3: 12px; --a4: 16px;
  --a5: 20px; --a6: 24px; --a7: 32px; --a8: 44px;

  --govde: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text",
           "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;

  --kenar-en: 232px;
  --serit-y:  52px;
}

/* Koyu tema */
:root[data-tema="koyu"] {
  --zemin:      #0a0d16;
  --yuzey:      #11151f;
  --yuzey-2:    #151a26;
  --yuzey-3:    #1b2131;
  --murekkep:   #e9ecf4;
  --murekkep-2: #b3bbcd;
  --murekkep-3: #858ea6;
  --murekkep-4: #606a82;
  --cizgi:      #222838;
  --cizgi-2:    #2e3648;
  --cizgi-3:    #3d4659;
  --marka:      #6a8bff;
  --marka-koyu: #87a2ff;
  --marka-sis:  #161f38;
  --marka-kenar:#2b3a63;
  --alacak:     #43c98d;
  --alacak-sis: #0e2a1f;
  --borc:       #ff8a7d;
  --borc-sis:   #2c1614;
  --uyari:      #e0a04a;
  --uyari-sis:  #2a2010;
  --y1: 0 1px 2px rgba(0, 0, 0, .4);
  --y2: 0 1px 3px rgba(0, 0, 0, .5), 0 1px 2px rgba(0, 0, 0, .3);
  --y3: 0 16px 40px -12px rgba(0, 0, 0, .7), 0 2px 8px rgba(0, 0, 0, .4);
}

/* ---------------------------------------------------------------------
   2. Temel
   ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--zemin);
  color: var(--murekkep);
  font: 400 13.5px/1.5 var(--govde);
  font-feature-settings: "kern" 1, "liga" 1, "cv05" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; font-weight: 620; line-height: 1.22; letter-spacing: -.016em; }
h1 { font-size: 20px; letter-spacing: -.021em; }
h2 { font-size: 15px; }
h3 { font-size: 14px; }
p  { margin: 0 0 .85em; }

a { color: var(--marka); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
img, svg { max-width: 100%; vertical-align: middle; }
hr { border: 0; border-top: 1px solid var(--cizgi); margin: var(--a5) 0; }

/* Rakamlar her yerde hizalı ve biraz sıkı — sütunlar düzgün otursun. */
.sayi, td.sayi, th.sayi, .tutar, .rakam, input[inputmode="decimal"], input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "zero" 1;
  letter-spacing: -.004em;
}

:focus-visible {
  outline: 2px solid var(--marka);
  outline-offset: 1px;
  border-radius: 3px;
}

::selection { background: var(--marka-sis); color: var(--murekkep); }

/* İnce kaydırma çubuğu — kalın çubuk dar sütunları yiyor. */
* { scrollbar-width: thin; scrollbar-color: var(--cizgi-3) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb {
  background: var(--cizgi-2); border-radius: 6px;
  border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--cizgi-3); background-clip: padding-box; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------------------------------------------------------------------
   3. İskelet
   ------------------------------------------------------------------ */
.kabuk { display: grid; grid-template-columns: var(--kenar-en) 1fr; min-height: 100vh; }

.kenar {
  background: #0c111c;
  color: #dfe4ef;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
  overflow: hidden auto;
  border-right: 1px solid rgba(255, 255, 255, .06);
}
:root[data-tema="koyu"] .kenar { background: #080b13; }

.kenar__marka {
  display: flex; align-items: center; gap: var(--a3);
  padding: 0 var(--a4);
  height: var(--serit-y);
  flex: 0 0 auto;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
}
.kenar__marka a { color: #fff; display: flex; align-items: center; gap: 10px; min-width: 0; }
.kenar__marka a:hover { text-decoration: none; }
.kenar__logo {
  width: 26px; height: 26px; border-radius: 7px;
  background: var(--marka); flex: 0 0 auto;
  display: grid; place-items: center;
  font: 750 12px/1 var(--govde); color: #fff;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .22) inset;
}
.kenar__ad { font-weight: 620; font-size: 14px; letter-spacing: -.012em; display: block; }
.kenar__firma {
  font-size: 11px; color: rgba(223, 228, 239, .5);
  margin-top: 1px; max-width: 152px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.kenar__menu { padding: var(--a3) 10px var(--a7); flex: 1 1 auto; }

/* Grup başlığı: büyük harf + geniş harf aralığı yerine ince çizgi.
   Tracked-out caps her şablonda var; sessiz ayraç daha az gürültülü. */
.kenar__grup {
  font-size: 10.5px; color: rgba(223, 228, 239, .34);
  padding: var(--a5) 10px var(--a2);
  display: flex; align-items: center; gap: var(--a2);
  letter-spacing: .01em;
}
.kenar__grup::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .07);
}

.kenar__oge {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  margin: 1px 0;
  border-radius: var(--r1);
  color: rgba(223, 228, 239, .74);
  font-size: 13px;
  transition: background .1s, color .1s;
}
.kenar__oge:hover { background: rgba(255, 255, 255, .055); color: #fff; text-decoration: none; }

/* Seçili durum: dolu mavi blok yerine ince sol çubuk + hafif dolgu.
   Blok, menüde tek başına çok yüksek sesle duruyor ve göz hep oraya
   kaçıyor; asıl içerik sağda. */
.kenar__oge--aktif {
  background: rgba(255, 255, 255, .085);
  color: #fff; font-weight: 560;
}
.kenar__oge--aktif::before {
  content: ""; position: absolute; left: -10px; top: 50%;
  width: 3px; height: 17px; margin-top: -8.5px;
  background: var(--marka); border-radius: 0 3px 3px 0;
}
.kenar__oge svg { width: 16px; height: 16px; flex: 0 0 auto; opacity: .78; }
.kenar__oge--aktif svg { opacity: 1; }
.kenar__rozet {
  margin-left: auto; min-width: 18px; text-align: center;
  background: rgba(255, 255, 255, .13); border-radius: 20px; padding: 1px 6px;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
}

.kenar__dip {
  padding: var(--a3) 10px var(--a4);
  border-top: 1px solid rgba(255, 255, 255, .06);
  flex: 0 0 auto;
}

.ana { display: flex; flex-direction: column; min-width: 0; }

/* ---------------------------------------------------------------------
   4. Üst şerit — arama burada
   ------------------------------------------------------------------ */
.serit {
  height: var(--serit-y);
  background: var(--yuzey);
  border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: var(--a3);
  padding: 0 var(--a5);
  position: sticky; top: 0; z-index: 40;
}
.serit__baslik { font-weight: 600; font-size: 14px; white-space: nowrap; }
.serit__sag { margin-left: auto; display: flex; align-items: center; gap: var(--a1); }

/* Arama tetiği — gerçek bir girdi değil, komut paletini açan düğme.
   Girdi gibi görünmesi kasıtlı: kullanıcı tıklamadan önce ne olduğunu
   biliyor, tıklayınca çok daha fazlasını buluyor. */
.ara-tetik {
  display: flex; align-items: center; gap: var(--a2);
  height: 32px; padding: 0 10px;
  min-width: 260px; max-width: 380px; flex: 0 1 340px;
  background: var(--yuzey-3);
  border: 1px solid transparent;
  border-radius: var(--r1);
  color: var(--murekkep-3);
  font: 400 13px/1 var(--govde);
  cursor: text; text-align: left;
  transition: background .12s, border-color .12s;
}
.ara-tetik:hover { background: var(--yuzey-2); border-color: var(--cizgi-2); }
.ara-tetik svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .7; }
.ara-tetik span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tus {
  font: 500 10.5px/1 var(--govde);
  padding: 3px 5px; border-radius: 4px;
  background: var(--yuzey); border: 1px solid var(--cizgi-2);
  color: var(--murekkep-3); white-space: nowrap;
  box-shadow: 0 1px 0 var(--cizgi-2);
}

.icerik {
  padding: var(--a5) var(--a6) var(--a8);
  flex: 1; width: 100%; max-width: 1560px;
}

/* Sayfa başlığı */
.baslik-satiri {
  display: flex; align-items: flex-end; gap: var(--a4); flex-wrap: wrap;
  padding-bottom: var(--a3);
  border-bottom: 1px solid var(--cizgi);
  margin-bottom: var(--a5);
}
.baslik-satiri__alt { color: var(--murekkep-3); font-size: 12.5px; margin-top: 2px; }
.baslik-satiri__eylem {
  margin-left: auto; display: flex; gap: var(--a2); flex-wrap: wrap; align-items: center;
}
.baslik-satiri__eylem input,
.baslik-satiri__eylem select { width: auto; min-width: 132px; }
/* Tarih alanı "auto" genişlikte tarayıcıya göre 300 piksele kadar
   şişiyor ve başlık satırını alt alta kırıyor. Takvim simgesiyle
   birlikte rahat sığan sabit bir genişlik veriyoruz. */
.baslik-satiri__eylem input[type="date"],
.suzgec input[type="date"] { width: 150px; min-width: 0; flex: 0 0 auto; }

/* ---------------------------------------------------------------------
   5. Yaprak — içerik yüzeyi
   ------------------------------------------------------------------ */
.yaprak {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  box-shadow: var(--y1);
  overflow: hidden;
}
.yaprak + .yaprak { margin-top: var(--a4); }

.yaprak__bas {
  padding: 11px var(--a4);
  border-bottom: 1px solid var(--cizgi);
  display: flex; align-items: center; gap: var(--a3);
  min-height: 46px;
}
.yaprak__bas h2, .yaprak__bas h3 { font-size: 13.5px; font-weight: 620; }
.yaprak__bas .sag { margin-left: auto; display: flex; gap: var(--a2); align-items: center; }
.yaprak__govde { padding: var(--a4); }
.yaprak__dip {
  padding: 10px var(--a4); border-top: 1px solid var(--cizgi);
  background: var(--yuzey-3);
  display: flex; align-items: center; gap: var(--a2);
}

/* ---------------------------------------------------------------------
   6. Ölçüm şeridi
   ------------------------------------------------------------------ */
.olcum {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  box-shadow: var(--y1);
  overflow: hidden;
}
.olcum__oge { padding: var(--a3) var(--a4) 14px; border-left: 1px solid var(--cizgi); min-width: 0; }
.olcum__oge:first-child { border-left: 0; }
.olcum__ad {
  font-size: 11.5px; color: var(--murekkep-3);
  margin-bottom: 5px; display: flex; align-items: center; gap: 5px;
}
.olcum__deger {
  font-size: 21px; font-weight: 620; letter-spacing: -.024em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.18;
}
.olcum__not { font-size: 11.5px; color: var(--murekkep-3); margin-top: 3px; }
.olcum__oge--artis  .olcum__deger { color: var(--alacak); }
.olcum__oge--azalis .olcum__deger { color: var(--borc); }

/* Küçük değişim rozeti */
.degisim {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 11px; font-weight: 580; font-variant-numeric: tabular-nums;
  padding: 1px 5px; border-radius: 4px;
}
.degisim--artis  { color: var(--alacak); background: var(--alacak-sis); }
.degisim--azalis { color: var(--borc);   background: var(--borc-sis); }

/* Sparkline — ölçümün altında minik eğri */
.kivilcim { display: block; width: 100%; height: 26px; margin-top: 8px; }

/* ---------------------------------------------------------------------
   7. Tablo — bu programın asıl ekranı
   ------------------------------------------------------------------ */
.tablo-sarmal { overflow-x: auto; }

table.tablo { width: 100%; border-collapse: collapse; font-size: 13px; }

.tablo th {
  text-align: left; font-weight: 560; font-size: 11.5px;
  color: var(--murekkep-3);
  padding: 8px var(--a3);
  background: var(--yuzey-3);
  border-bottom: 1px solid var(--cizgi-2);
  white-space: nowrap;
  position: sticky; top: 0; z-index: 2;
}
.tablo th:first-child { padding-left: var(--a4); }
.tablo th:last-child  { padding-right: var(--a4); }

.tablo td {
  padding: 9px var(--a3);
  border-bottom: 1px solid var(--cizgi);
  vertical-align: middle;
}
.tablo td:first-child { padding-left: var(--a4); }
.tablo td:last-child  { padding-right: var(--a4); }
.tablo tbody tr:last-child td { border-bottom: 0; }

.tablo tbody tr { transition: background .08s; }
.tablo tbody tr:hover td { background: var(--yuzey-2); }
.tablo tbody tr[data-adres] { cursor: pointer; }
.tablo tbody tr[data-adres]:hover td { background: var(--marka-sis); }

.tablo .sayi, .tablo th.sayi { text-align: right; }
.tablo td.daralt { width: 1%; white-space: nowrap; }
.tablo__alt td {
  background: var(--yuzey-3); font-weight: 620;
  border-top: 1.5px solid var(--cizgi-2);
}
.tablo--sik td { padding: 6px var(--a3); }
.tablo--sik th { padding: 6px var(--a3); }

.hucre-ad  { font-weight: 540; }
.hucre-alt { font-size: 11.5px; color: var(--murekkep-3); margin-top: 1px; }

/* Satır eylemleri yalnızca üzerine gelince — her satırda duran ⋯
   düğmesi sütunu gürültüye boğuyor. Klavyeyle gezenler için
   odaklanınca da görünür. */
.satir-eylem { opacity: 0; transition: opacity .1s; }
tr:hover .satir-eylem,
tr:focus-within .satir-eylem,
.satir-eylem:focus-within { opacity: 1; }
@media (hover: none) { .satir-eylem { opacity: 1; } }

/* ---------------------------------------------------------------------
   8. Düğmeler
   ------------------------------------------------------------------ */
.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--cizgi-2);
  border-radius: var(--r1);
  background: var(--yuzey);
  color: var(--murekkep);
  font: 540 13px/1 var(--govde);
  cursor: pointer; white-space: nowrap;
  box-shadow: var(--y1);
  transition: background .1s, border-color .1s, box-shadow .1s;
}
.dugme:hover { background: var(--yuzey-2); border-color: var(--cizgi-3); text-decoration: none; }
.dugme:active { box-shadow: none; transform: translateY(.5px); }
.dugme svg { width: 14px; height: 14px; }
.dugme[disabled] { opacity: .5; cursor: not-allowed; box-shadow: none; }

.dugme--ana {
  background: var(--marka); border-color: var(--marka); color: #fff;
  box-shadow: var(--y1), 0 1px 0 rgba(255, 255, 255, .18) inset;
}
.dugme--ana:hover { background: var(--marka-koyu); border-color: var(--marka-koyu); }

.dugme--tehlike { color: var(--borc); border-color: #eec3bf; }
.dugme--tehlike:hover { background: var(--borc-sis); border-color: #e0a9a3; }

.dugme--sade { border-color: transparent; background: transparent; box-shadow: none; }
.dugme--sade:hover { background: var(--yuzey-3); border-color: transparent; }

.dugme--kucuk { height: 26px; padding: 0 9px; font-size: 12px; }
.dugme--genis { width: 100%; }
.dugme--ikon  { width: 32px; padding: 0; }

.dugme-grup { display: inline-flex; }
.dugme-grup .dugme { border-radius: 0; margin-left: -1px; box-shadow: none; }
.dugme-grup .dugme:first-child { border-radius: var(--r1) 0 0 var(--r1); margin-left: 0; }
.dugme-grup .dugme:last-child  { border-radius: 0 var(--r1) var(--r1) 0; }

/* Sekme şeridi */
.sekme { display: flex; gap: 2px; border-bottom: 1px solid var(--cizgi); margin-bottom: var(--a5); }
.sekme a {
  padding: 9px 12px; font-size: 13px; font-weight: 520;
  color: var(--murekkep-3); border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.sekme a:hover { color: var(--murekkep); text-decoration: none; }
.sekme a.aktif { color: var(--marka); border-bottom-color: var(--marka); font-weight: 580; }

/* ---------------------------------------------------------------------
   9. Form
   ------------------------------------------------------------------ */
.alan { margin-bottom: var(--a3); }
.alan > label, .etiket {
  display: block; font-size: 12px; font-weight: 530;
  color: var(--murekkep-2); margin-bottom: 4px;
}
.alan__ipucu { font-size: 11.5px; color: var(--murekkep-3); margin-top: 3px; line-height: 1.45; }
.alan__hata  { font-size: 11.5px; color: var(--borc); margin-top: 3px; }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="tel"], input[type="search"], input[type="url"],
select, textarea {
  width: 100%;
  height: 32px; padding: 0 10px;
  border: 1px solid var(--cizgi-2);
  border-radius: var(--r1);
  background: var(--yuzey);
  color: var(--murekkep);
  font: 400 13.5px/1 var(--govde);
  transition: border-color .1s, box-shadow .1s;
}
textarea { height: auto; min-height: 76px; padding: 8px 10px; line-height: 1.5; resize: vertical; }

input:hover, select:hover, textarea:hover { border-color: var(--cizgi-3); }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marka);
  box-shadow: 0 0 0 3px var(--marka-sis);
}
input[aria-invalid="true"], .girdi--hatali {
  border-color: var(--borc); background: var(--borc-sis);
}
input[readonly], input[disabled], select[disabled] {
  background: var(--yuzey-3); color: var(--murekkep-3); cursor: not-allowed;
}
input::placeholder, textarea::placeholder { color: var(--murekkep-4); }

select {
  appearance: none; padding-right: 28px; cursor: pointer;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'%3E%3Cpath fill='none' stroke='%236b7490' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.3 5.5 5.7 10 1.3'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

.izgara { display: grid; gap: 0 var(--a3); grid-template-columns: repeat(12, 1fr); }
.s1{grid-column:span 1}.s2{grid-column:span 2}.s3{grid-column:span 3}
.s4{grid-column:span 4}.s5{grid-column:span 5}.s6{grid-column:span 6}
.s7{grid-column:span 7}.s8{grid-column:span 8}.s9{grid-column:span 9}
.s10{grid-column:span 10}.s11{grid-column:span 11}.s12{grid-column:span 12}

.onay { display: flex; align-items: flex-start; gap: 7px; font-size: 13px; line-height: 1.45; }
.onay input { width: auto; height: auto; margin-top: 2px; accent-color: var(--marka); }

/* ---------------------------------------------------------------------
   10. Rozet
   ------------------------------------------------------------------ */
.rozet {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 7px; border-radius: 5px;
  font-size: 11.5px; font-weight: 550;
  background: var(--yuzey-3); color: var(--murekkep-2);
  white-space: nowrap; line-height: 1.4;
}
.rozet--olumlu   { background: var(--alacak-sis); color: var(--alacak); }
.rozet--olumsuz  { background: var(--borc-sis);   color: var(--borc); }
.rozet--bekleyen { background: var(--uyari-sis);  color: var(--uyari); }
.rozet--bilgi    { background: var(--marka-sis);  color: var(--marka); }
.rozet::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.rozet--nokta-yok::before { display: none; }

.alacak-renk, .artı { color: var(--alacak); }
.borc-renk,   .eksi { color: var(--borc); }

/* ---------------------------------------------------------------------
   11. Bildirim ve yığın uyarı
   ------------------------------------------------------------------ */
.bildirim {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px var(--a3);
  border: 1px solid var(--cizgi-2);
  border-left-width: 3px;
  border-radius: var(--r1);
  background: var(--yuzey);
  margin-bottom: var(--a3);
  font-size: 13px; line-height: 1.5;
  box-shadow: var(--y1);
}
.bildirim--basari { border-left-color: var(--alacak); background: var(--alacak-sis); border-color: #cde9dd; }
.bildirim--hata   { border-left-color: var(--borc);   background: var(--borc-sis);   border-color: #f3cfcb; }
.bildirim--uyari  { border-left-color: var(--uyari);  background: var(--uyari-sis);  border-color: #f5dcc2; }
.bildirim--bilgi  { border-left-color: var(--marka);  background: var(--marka-sis);  border-color: var(--marka-kenar); }
.bildirim__kapat {
  margin-left: auto; background: none; border: 0; cursor: pointer; color: inherit;
  opacity: .5; font-size: 16px; line-height: 1; padding: 0 2px;
}
.bildirim__kapat:hover { opacity: 1; }

/* Yığın bildirim (JS) */
.yigin {
  position: fixed; right: var(--a5); bottom: var(--a5); z-index: 200;
  display: flex; flex-direction: column; gap: var(--a2); max-width: 360px;
}
.yigin .bildirim { box-shadow: var(--y3); margin: 0; animation: yigin-gir .18s ease-out; }
@keyframes yigin-gir { from { opacity: 0; transform: translateY(8px); } }

/* ---------------------------------------------------------------------
   12. Boş durum
   ------------------------------------------------------------------ */
.bos { text-align: center; padding: var(--a8) var(--a6); color: var(--murekkep-3); }
.bos__ikon {
  width: 42px; height: 42px; margin: 0 auto var(--a3);
  border-radius: var(--r2); background: var(--yuzey-3);
  display: grid; place-items: center; color: var(--murekkep-4);
}
.bos__ikon svg { width: 20px; height: 20px; }
.bos h3 { color: var(--murekkep); margin-bottom: 5px; font-size: 14.5px; }
.bos p { max-width: 44ch; margin: 0 auto var(--a4); font-size: 13px; line-height: 1.55; }

/* ---------------------------------------------------------------------
   13. Sayfalama ve süzgeç
   ------------------------------------------------------------------ */
.sayfalama { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.sayfalama__bilgi { color: var(--murekkep-3); font-size: 12.5px; margin-right: auto; }
.sayfalama a, .sayfalama span {
  min-width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center; padding: 0 8px;
  border: 1px solid var(--cizgi-2); border-radius: var(--r1);
  font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--murekkep-2);
  background: var(--yuzey);
}
.sayfalama a:hover { background: var(--yuzey-2); text-decoration: none; border-color: var(--cizgi-3); }
.sayfalama .aktif { background: var(--marka); border-color: var(--marka); color: #fff; }
.sayfalama .pasif { opacity: .38; pointer-events: none; }

.suzgec {
  display: flex; gap: var(--a2); flex-wrap: wrap; align-items: flex-end;
  padding: var(--a3) var(--a4);
  border-bottom: 1px solid var(--cizgi);
  background: var(--yuzey-2);
}
.suzgec .alan { margin: 0; }
.suzgec input, .suzgec select { min-width: 142px; }
.suzgec__ara { flex: 1 1 240px; }
.suzgec__ara input { min-width: 0; width: 100%; }

/* ---------------------------------------------------------------------
   14. Açılır menü
   ------------------------------------------------------------------ */
.acilir { position: relative; }
.acilir__panel {
  position: absolute; right: 0; top: calc(100% + 5px);
  min-width: 206px;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-2);
  border-radius: var(--r2);
  box-shadow: var(--y3);
  padding: 4px;
  z-index: 60;
  display: none;
  animation: acilir-gir .11s ease-out;
}
@keyframes acilir-gir { from { opacity: 0; transform: translateY(-3px); } }
.acilir--acik .acilir__panel { display: block; }
.acilir__oge {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 9px; border-radius: 5px;
  color: var(--murekkep); font-size: 13px;
  width: 100%; border: 0; background: none; cursor: pointer; text-align: left;
  font-family: var(--govde);
}
.acilir__oge:hover { background: var(--yuzey-3); text-decoration: none; }
.acilir__ayrac { height: 1px; background: var(--cizgi); margin: 4px 0; }
.acilir__oge--tehlike { color: var(--borc); }
.acilir__oge--tehlike:hover { background: var(--borc-sis); }

/* ---------------------------------------------------------------------
   15. Komut paleti
   ------------------------------------------------------------------ */
.palet-perde {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15, 21, 36, .42);
  backdrop-filter: blur(2px);
  display: none;
  padding: 10vh var(--a4) var(--a4);
}
.palet-perde--acik { display: block; }

.palet {
  width: min(620px, 100%); margin: 0 auto;
  background: var(--yuzey);
  border: 1px solid var(--cizgi-2);
  border-radius: var(--r3);
  box-shadow: var(--y3);
  overflow: hidden;
  animation: palet-gir .13s ease-out;
}
@keyframes palet-gir { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

.palet__ust { display: flex; align-items: center; gap: 10px; padding: 0 var(--a4);
              border-bottom: 1px solid var(--cizgi); }
.palet__ust svg { width: 17px; height: 17px; color: var(--murekkep-3); flex: 0 0 auto; }
.palet__girdi {
  flex: 1; height: 50px; border: 0; background: none; padding: 0;
  font: 400 15.5px/1 var(--govde); color: var(--murekkep);
}
.palet__girdi:focus { outline: none; box-shadow: none; }

.palet__liste { max-height: min(420px, 52vh); overflow-y: auto; padding: 6px; }
.palet__grup {
  font-size: 10.5px; color: var(--murekkep-4);
  padding: 9px 10px 4px; letter-spacing: .02em;
}
.palet__oge {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r1);
  color: var(--murekkep); font-size: 13.5px; cursor: pointer;
  border: 0; background: none; width: 100%; text-align: left;
  font-family: var(--govde);
}
.palet__oge:hover, .palet__oge--secili { background: var(--marka-sis); text-decoration: none; }
.palet__oge--secili { box-shadow: inset 0 0 0 1px var(--marka-kenar); }
.palet__ikon {
  width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto;
  background: var(--yuzey-3); display: grid; place-items: center; color: var(--murekkep-3);
}
.palet__ikon svg { width: 14px; height: 14px; }
.palet__metin { flex: 1; min-width: 0; }
.palet__ad { font-weight: 520; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palet__alt { font-size: 11.5px; color: var(--murekkep-3); margin-top: 1px;
              overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palet__sag { font-size: 11.5px; color: var(--murekkep-3); font-variant-numeric: tabular-nums;
              flex: 0 0 auto; }
.palet__dip {
  display: flex; align-items: center; gap: var(--a4);
  padding: 8px var(--a4); border-top: 1px solid var(--cizgi);
  background: var(--yuzey-3); font-size: 11.5px; color: var(--murekkep-3);
}
.palet__dip b { font-weight: 400; display: inline-flex; align-items: center; gap: 4px; }
.palet__bos { padding: var(--a7) var(--a4); text-align: center; color: var(--murekkep-3); font-size: 13px; }

/* ---------------------------------------------------------------------
   16. Kimlik ekranları
   ------------------------------------------------------------------ */
.kimlik { min-height: 100vh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--zemin); }
.kimlik__yan {
  background: #0c111c; color: #fff; padding: var(--a8) var(--a7);
  display: flex; flex-direction: column; justify-content: space-between;
  position: relative; overflow: hidden;
}
.kimlik__yan::after {
  content: ""; position: absolute; inset: auto -20% -30% -20%; height: 60%;
  background: radial-gradient(ellipse at 50% 100%, rgba(45, 78, 216, .3), transparent 70%);
  pointer-events: none;
}
.kimlik__yan > * { position: relative; z-index: 1; }
.kimlik__orta { display: grid; place-items: center; padding: var(--a7) var(--a5); }
.kimlik__kutu { width: 100%; max-width: 356px; }
.kimlik__baslik { font-size: 23px; margin-bottom: 5px; letter-spacing: -.024em; }
.kimlik__alt { color: var(--murekkep-3); margin-bottom: var(--a6); font-size: 13.5px; }

/* ---------------------------------------------------------------------
   17. Belge (fatura çıktısı)
   ------------------------------------------------------------------ */
.belge {
  background: #fff; color: #0f1524;
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  box-shadow: var(--y1);
  padding: var(--a7) var(--a7) var(--a6);
  max-width: 860px;
}
.belge__bas { display: flex; gap: var(--a6); align-items: flex-start;
              padding-bottom: var(--a4); border-bottom: 2px solid #0f1524; }
.belge__unvan { font-size: 17px; font-weight: 680; letter-spacing: -.016em; }
.belge__kimlik { margin-left: auto; text-align: right; }
.belge__tur { font-size: 10.5px; color: #6b7490; letter-spacing: .04em; }
.belge__no { font-size: 15px; font-weight: 660; font-variant-numeric: tabular-nums;
             letter-spacing: -.01em; }
.belge table { width: 100%; border-collapse: collapse; margin: var(--a5) 0 var(--a3); font-size: 12.5px; }
.belge th { text-align: left; padding: 6px 8px; border-bottom: 1.5px solid #0f1524;
            font-size: 10.5px; color: #414a61; font-weight: 600; letter-spacing: .02em; }
.belge td { padding: 7px 8px; border-bottom: 1px solid #e7eaf0; }
.belge .sayi { text-align: right; font-variant-numeric: tabular-nums; }
.belge__toplam { margin-left: auto; width: min(312px, 100%); }
.belge__toplam div { display: flex; justify-content: space-between; padding: 4px 0;
                     font-variant-numeric: tabular-nums; font-size: 12.5px; }
.belge__toplam .genel {
  border-top: 2px solid #0f1524; margin-top: 4px; padding-top: 8px;
  font-size: 16px; font-weight: 680; letter-spacing: -.016em;
}

/* ---------------------------------------------------------------------
   18. Yardımcı sınıflar
   ------------------------------------------------------------------ */
.sag { text-align: right; } .orta { text-align: center; }
.sessiz { color: var(--murekkep-3); }
.kucuk { font-size: 12px; }
.kalin { font-weight: 600; }
.gizli { display: none !important; }
.sira { display: flex; align-items: center; gap: var(--a2); }
.sira--bosluk { justify-content: space-between; }
.yigin-dikey { display: flex; flex-direction: column; gap: var(--a4); }
.tam { width: 100%; }
.ust-bosluk { margin-top: var(--a4); }
.sarmala { white-space: normal; }
.tek-satir { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ikili    { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a4); align-items: start; }
.ucte-bir { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
            gap: var(--a4); align-items: start; }

/* ---------------------------------------------------------------------
   19. Duyarlılık
   ------------------------------------------------------------------ */
.kenar-ac { display: none; }

@media (max-width: 1180px) { .ucte-bir, .ikili { grid-template-columns: minmax(0, 1fr); } }

@media (max-width: 900px) {
  .kabuk { grid-template-columns: 1fr; }
  .kenar {
    position: fixed; inset: 0 auto 0 0; width: 264px; z-index: 100;
    transform: translateX(-100%); transition: transform .18s ease;
  }
  .kenar--acik { transform: none; box-shadow: var(--y3); }
  .kenar-ac { display: inline-flex; }
  .perde { position: fixed; inset: 0; background: rgba(15,21,36,.45); z-index: 99; display: none; }
  .perde--acik { display: block; }
  .icerik { padding: var(--a4) var(--a4) var(--a8); }
  .kimlik { grid-template-columns: 1fr; }
  .kimlik__yan { display: none; }
  .ara-tetik { min-width: 0; flex: 1; }
  .ara-tetik span, .ara-tetik .tus { display: none; }
  .izgara > [class^="s"] { grid-column: span 12; }
  .s6, .s4, .s3 { grid-column: span 6; }
}

@media (max-width: 540px) {
  .izgara > [class^="s"] { grid-column: span 12; }
  .olcum { grid-template-columns: 1fr 1fr; }
  .olcum__oge:nth-child(odd) { border-left: 0; }
  .olcum__oge:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
  .baslik-satiri__eylem { width: 100%; margin-left: 0; }
  .palet-perde { padding: 4vh var(--a3) var(--a3); }
}

/* ---------------------------------------------------------------------
   20. Yazdırma
   ------------------------------------------------------------------ */
@media print {
  .kenar, .serit, .baslik-satiri__eylem, .suzgec, .sayfalama, .dugme,
  .bildirim, .yigin, .palet-perde, .yazdirma-gizle { display: none !important; }
  .kabuk { display: block; }
  .icerik { padding: 0; max-width: none; }
  body { background: #fff; font-size: 10.5pt; color: #000; }
  .yaprak, .belge, .olcum { border: 0; box-shadow: none; padding: 0; }
  .tablo th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  a { color: #000; text-decoration: none; }
  @page { margin: 14mm; }
}

/* =====================================================================
   21. LAUNCHPAD KUTUCUKLARI
   =====================================================================
   SAP Fiori'nin ana ekran fikri: her kutucuk tek bir soruyu canlı
   sayıyla cevaplar ve tıklanınca o konunun detayına götürür. Statik
   bir "rakam ızgarası" değil — her kutucuk bir giriş kapısı.

   Renk burada bilerek cesur: kutucuğun üst şeridi konunun anlamsal
   rengini taşıyor (alacak yeşil, borç kırmızı, nötr mavi). Göz, sayıyı
   okumadan önce durumu anlıyor.
   ------------------------------------------------------------------ */
.pano {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(216px, 1fr));
  gap: var(--a3);
}
.pano--genis { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.kutucuk {
  position: relative;
  display: flex; flex-direction: column;
  min-height: 132px; padding: 13px var(--a4) var(--a3);
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  box-shadow: var(--y1);
  color: inherit;
  overflow: hidden;
  transition: box-shadow .13s, border-color .13s, transform .13s;
}
a.kutucuk:hover {
  text-decoration: none;
  box-shadow: var(--y2);
  border-color: var(--cizgi-2);
  transform: translateY(-1px);
}
a.kutucuk:active { transform: none; }

/* Üst şerit — anlamsal durum */
.kutucuk::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--kutucuk-renk, var(--marka));
}
.kutucuk--artis   { --kutucuk-renk: var(--alacak); }
.kutucuk--azalis  { --kutucuk-renk: var(--borc); }
.kutucuk--uyari   { --kutucuk-renk: var(--uyari); }
.kutucuk--notr    { --kutucuk-renk: var(--cizgi-3); }

.kutucuk__ust { display: flex; align-items: flex-start; gap: var(--a2); margin-bottom: auto; }
.kutucuk__ad {
  font-size: 12px; font-weight: 540; color: var(--murekkep-2);
  line-height: 1.35; flex: 1; min-width: 0;
}
.kutucuk__ikon {
  width: 24px; height: 24px; border-radius: 6px; flex: 0 0 auto;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--kutucuk-renk, var(--marka)) 12%, transparent);
  color: var(--kutucuk-renk, var(--marka));
}
.kutucuk__ikon svg { width: 13px; height: 13px; }

.kutucuk__deger {
  font-size: 25px; font-weight: 650; letter-spacing: -.028em;
  font-variant-numeric: tabular-nums; line-height: 1.1;
  margin: var(--a3) 0 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kutucuk__deger small { font-size: 14px; font-weight: 500; color: var(--murekkep-3); }
.kutucuk__alt {
  font-size: 11.5px; color: var(--murekkep-3);
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
}
.kutucuk__gorsel { margin: var(--a2) calc(var(--a4) * -1) calc(var(--a3) * -1); }
.kutucuk__gorsel .kivilcim { height: 38px; margin: 0; }

/* Geniş kutucuk — içine grafik alan */
.kutucuk--grafik { min-height: 232px; }
.kutucuk--grafik .kutucuk__deger { margin-bottom: var(--a2); }

/* =====================================================================
   22. GRAFİK BİLEŞENLERİ
   ------------------------------------------------------------------ */
.grafik { width: 100%; color: var(--murekkep); }
.grafik svg { width: 100%; height: 100%; display: block; }
.grafik--bos {
  display: grid; place-items: center;
  color: var(--murekkep-4); font-size: 12.5px;
  background: repeating-linear-gradient(135deg,
    var(--yuzey-2) 0 9px, var(--yuzey-3) 9px 18px);
  border-radius: var(--r1);
}
.halka { display: block; margin: 0 auto; color: var(--murekkep); }

.grafik-eksen {
  display: flex; justify-content: space-between;
  font-size: 11px; color: var(--murekkep-3);
  margin-top: 6px; font-variant-numeric: tabular-nums;
}

/* Sütun grafiği ekseni: her etiket kendi sütununun hizasında durmalı,
   bu yüzden eşit paylı kutular. Boş kutular (seyreltilen etiketler)
   yer tutuyor; olmasalar kalan etiketler sütunlardan kayardı. */
.grafik-eksen--sutun { justify-content: stretch; gap: 0; }
.grafik-eksen--sutun span {
  flex: 1 1 0; min-width: 0; text-align: center;
  white-space: nowrap; overflow: hidden;
}

/* Gösterge (legend) */
.gosterge { display: flex; flex-wrap: wrap; gap: var(--a2) var(--a4); margin-top: var(--a3); }
.gosterge__oge { display: flex; align-items: center; gap: 6px; font-size: 12px; }
.gosterge__nokta { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.gosterge__deger { color: var(--murekkep-3); font-variant-numeric: tabular-nums; }

/* Oran çubuğu — tablo satırı içinde */
.oran-cubuk {
  height: 4px; background: var(--yuzey-3); border-radius: 3px;
  overflow: hidden; margin-top: 5px; min-width: 60px;
}
.oran-cubuk__dolu { height: 100%; border-radius: 3px; transition: width .3s; }

/* Yığılmış şerit */
.serit-grafik {
  display: flex; height: 10px; border-radius: 5px; overflow: hidden;
  background: var(--yuzey-3); gap: 1px;
}
.serit-grafik span { display: block; min-width: 2px; }
.serit-grafik__bos { flex: 1; background: var(--yuzey-3); }

/* =====================================================================
   23. NESNE SAYFASI BAŞLIĞI
   =====================================================================
   Fiori'nin "object page" kalıbı: bir kaydı açtığınızda önce kimliği
   ve kilit rakamları görürsünüz, detay altta sekmelerde. Cari kartını
   açan kişi ilk saniyede "bu müşteri bana ne kadar borçlu" sorusunun
   cevabını görmeli; onu bir tablo içinde aratmamalı.
   ------------------------------------------------------------------ */
.nesne {
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: var(--r2);
  box-shadow: var(--y1);
  margin-bottom: var(--a4);
  overflow: hidden;
}
.nesne__ust {
  display: flex; align-items: flex-start; gap: var(--a4);
  padding: var(--a4) var(--a5) var(--a3);
  flex-wrap: wrap;
}
.nesne__simge {
  width: 46px; height: 46px; border-radius: var(--r2); flex: 0 0 auto;
  display: grid; place-items: center;
  background: var(--marka-sis); color: var(--marka);
  font: 650 16px/1 var(--govde); letter-spacing: -.02em;
}
.nesne__kimlik { flex: 1 1 260px; min-width: 0; }
.nesne__ad { font-size: 19px; font-weight: 640; letter-spacing: -.021em; line-height: 1.25; }
.nesne__alt {
  font-size: 12.5px; color: var(--murekkep-3); margin-top: 3px;
  display: flex; align-items: center; gap: var(--a2); flex-wrap: wrap;
}
.nesne__eylem { margin-left: auto; display: flex; gap: var(--a2); flex-wrap: wrap; }

.nesne__olcum {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  border-top: 1px solid var(--cizgi);
  background: var(--yuzey-2);
}
.nesne__olcum > div { padding: 11px var(--a5) 13px; border-left: 1px solid var(--cizgi); }
.nesne__olcum > div:first-child { border-left: 0; }
.nesne__olcum dt { font-size: 11.5px; color: var(--murekkep-3); margin-bottom: 3px; }
.nesne__olcum dd {
  margin: 0; font-size: 17px; font-weight: 620; letter-spacing: -.018em;
  font-variant-numeric: tabular-nums;
}
.nesne__olcum dd small { font-size: 12px; font-weight: 450; color: var(--murekkep-3); }

/* =====================================================================
   24. BÖLÜM BAŞLIĞI — yaprak grupları arasında
   ------------------------------------------------------------------ */
.bolum-bas {
  display: flex; align-items: baseline; gap: var(--a3);
  margin: var(--a6) 0 var(--a3);
}
.bolum-bas h2 { font-size: 14px; font-weight: 620; }
.bolum-bas__not { font-size: 12px; color: var(--murekkep-3); }
.bolum-bas__sag { margin-left: auto; display: flex; gap: var(--a2); align-items: center; }
.bolum-bas:first-child { margin-top: 0; }

/* =====================================================================
   25. DURUM ŞERİDİ — nesne sayfasında ilerleme
   ------------------------------------------------------------------ */
.akis { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.akis__adim {
  display: flex; align-items: center; gap: 7px;
  padding: 5px 12px 5px 10px; font-size: 12px; color: var(--murekkep-3);
  background: var(--yuzey-3); position: relative;
}
.akis__adim:first-child { border-radius: var(--r1) 0 0 var(--r1); }
.akis__adim:last-child  { border-radius: 0 var(--r1) var(--r1) 0; }
.akis__adim + .akis__adim { margin-left: 3px; }
.akis__adim--bitti { background: var(--alacak-sis); color: var(--alacak); font-weight: 540; }
.akis__adim--aktif { background: var(--marka); color: #fff; font-weight: 560; }
.akis__adim--iptal { background: var(--borc-sis); color: var(--borc); font-weight: 540; }
.akis__nokta { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .55; }
.akis__adim--aktif .akis__nokta, .akis__adim--bitti .akis__nokta { opacity: 1; }

@media (max-width: 540px) {
  .pano { grid-template-columns: 1fr 1fr; }
  .pano--genis { grid-template-columns: 1fr; }
  .kutucuk { min-height: 116px; }
  .kutucuk__deger { font-size: 21px; }
  .nesne__olcum { grid-template-columns: 1fr 1fr; }
  .nesne__olcum > div:nth-child(odd) { border-left: 0; }
  .nesne__olcum > div:nth-child(n+3) { border-top: 1px solid var(--cizgi); }
}
}

/* 2.2 — dar ekran taşma düzeltmeleri: ızgara hücreleri içeriğe göre genişlemez, belge ve filtreler sığar */
.kabuk > *, .ucte-bir > *, .ikili > *, .izgara > * { min-width: 0; }
.sira { flex-wrap: wrap; }
@media (max-width: 720px) {
  .kabuk { grid-template-columns: minmax(0, 1fr); }
  .belge { padding: var(--a5) var(--a4); overflow-x: auto; }
  .belge__bas { flex-wrap: wrap; gap: var(--a3); }
  .belge__kimlik { margin-left: 0; text-align: left; }
  .belge table { min-width: 520px; }
}