/* ==========================================================================
   BEF Acco — Temel katman
   Yazı tipi, sıfırlama, tipografi ve yardımcı sınıflar.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Yazı tipi — yerel olarak sunulur, dış kaynağa bağımlılık yoktur.
   Değişken font: 400–700 arası tüm ağırlıklar tek dosyada.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Türkçe ş, ğ, İ karakterleri bu alt kümede */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0,
                 U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Sıfırlama
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  tab-size: 4;
}

body {
  min-height: 100vh;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-normal);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv02" 1, "cv03" 1, "cv04" 1;
}

img,
svg,
video,
canvas {
  display: block;
  max-width: 100%;
  height: auto;
}

/* İkonlar (app/Support/icons.php → icon()).
 *
 * Yukarıdaki `display: block` medya için doğru ve esnek kutu içinde de
 * doğru (esnek öğeler zaten bloklaşır). Ama ikonların bir kısmı düz METİN
 * akışında duruyor — "✓ bugünün kuru" gibi. Orada blok kutu satırı kırıyor.
 * Görünümlerde 63 ikon esnek olmayan bir kapta ve bunların 22'sinde soruna
 * elle `style="display:flex"` yaması yazılmıştı; yani sorun biliniyordu ama
 * her seferinde tek tek çözülüyordu.
 *
 * `inline-block` esnek kutu içinde `block`a dönüşür, yani orada hiçbir şey
 * değişmez; metin akışında ise `vertical-align: middle` ikonu satırın
 * ortasına oturtur.
 *
 * `flex-shrink: 0`: dar bir satırda ikon ezilmesin — daha önce bazı
 * bileşenlerde tek tek yazılıyordu. */
.icon {
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: none;
  cursor: pointer;
}

a {
  color: var(--text-link);
  text-decoration: none;
  transition: var(--transition-colors);
}

a:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* İkon + metin, tek satır.
 *
 * `.icon`in `vertical-align: middle`i ikonu metnin X-HEIGHT merkezine
 * oturtur; gözün metin merkezi saydığı yer ise CAP-HEIGHT merkezi. Fark
 * ~0.09em ve ikon net çizgili olduğu için görülüyor: ikon bir tık aşağıda
 * duruyor.
 *
 * Esnek kutuda bu sorun yok — `align-items: center` kutuları satır kutusuna
 * göre ortalıyor ve bu proje için (Inter, `--leading-normal`) satır kutusu
 * merkezi ile cap merkezi neredeyse çakışıyor. Bileşenlerin hepsi zaten
 * esnek; eksik olan, tek seferlik "ikon + kısa metin" satırlarının adıydı.
 *
 * `vertical-align` esnek öğelerde yok sayıldığı için ikisi çakışmıyor. */
.icon-text {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

/* Metin sarabiliyorsa ikon ilk satıra oturmalı, blok ortasına değil.
 *
 * Bir piksellik pay yetmiyordu: ilk satırın kutusu 1em × 1.55 kadar yüksek,
 * ikon ise 13-16px. Aradaki fark 3-4 piksel ve ikon o kadar YUKARIDA
 * duruyordu — bir kere göze çarpınca her yerde görülüyor.
 *
 * Sihirli piksel yerine ikonun KUTUSU ilk satır kadar yükseltiliyor. SVG'nin
 * varsayılan `preserveAspectRatio` davranışı (xMidYMid meet) çizimi o kutunun
 * ortasına yerleştiriyor ve `width` sabit kaldığı için ikon BÜYÜMÜYOR.
 * Yazı boyutundan bağımsız çalışır: 11px etikette de 16px başlıkta da. */
.icon-text--wrap {
  align-items: flex-start;
}

.icon-text--wrap > .icon {
  height: calc(1em * var(--leading-normal));
}

/* Satır olarak kullanılan bağlantı — metin değil, KUTU.
 *
 * Bir avatarı, adı ve alt satırı kapsayan bağlantının üstüne gelince bütün
 * satırın altı çiziliyordu. Bileşenler bunu kendi kuralında iptal ediyor
 * (`.btn`, `.dropdown__item`, `.tab`, `.nav-item`) ama tek seferlik
 * kompozisyonlar için bir adı yoktu: dört yerde `style="color:inherit"`
 * yazılmış, rengin yarısı yamanmış, altı çizgi unutulmuştu. */
.link-block,
.link-block:hover {
  color: inherit;
  text-decoration: none;
}

/* Tıklanabilir olduğu ÜSTÜNE GELİNCE de belli olmalı.
 *
 * Kart içi liste satırları bağlantı olduğu hâlde hiçbir geri bildirim
 * vermiyordu: imleç değişiyor, ama satır ölü duruyordu. Tablo satırlarında
 * bu vurgu vardı (`.table tbody tr:hover`), listelerde yoktu — aynı iş, iki
 * farklı yapı, tek tarafta geri bildirim.
 *
 * Yatay negatif pay, vurgunun kart yastığına doğru taşmasını sağlıyor;
 * metin yerinde kalıyor, şerit satırın tamamını kapsıyor. Dikeyde negatif
 * pay YOK: satırlar arası boşluk `gap` ile kuruluyor ve negatif dikey pay
 * onu yutardı. */
.link-block {
  margin-inline: calc(var(--space-2) * -1);
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  transition: background-color var(--duration-fast) var(--ease);
}

.link-block:hover {
  background: var(--bg-hover);
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
}

hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: var(--space-6) 0;
}

/* Odak: fare ile tıklamada değil, klavye ile gezinmede görünür */
:focus {
  outline: none;
}

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

/* Seçim rengi */
::selection {
  background: var(--gray-950);
  color: var(--gray-0);
}

/* İnce kaydırma çubuğu */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--gray-300) transparent;
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--gray-300);
  border: 3px solid transparent;
  border-radius: var(--radius-full);
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--gray-400);
  border: 3px solid transparent;
  background-clip: content-box;
}

/* --------------------------------------------------------------------------
   Tipografi
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: -0.011em;
  color: var(--text);
}

h1 { font-size: var(--text-xl);  letter-spacing: -0.018em; }
h2 { font-size: var(--text-lg);  letter-spacing: -0.014em; }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

p {
  line-height: var(--leading-normal);
}

small {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

code,
kbd,
pre {
  font-family: var(--font-mono);
  font-size: 0.9em;
}

code {
  padding: 0.1em 0.35em;
  background: var(--bg-sunken);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-xs);
}

kbd {
  display: inline-block;
  min-width: 20px;
  padding: 2px 6px;
  font-size: var(--text-2xs);
  font-weight: var(--weight-medium);
  text-align: center;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-bottom-width: 2px;
  border-radius: var(--radius-xs);
}

/* --------------------------------------------------------------------------
   Yardımcı sınıflar — sık tekrarlanan, tek amaçlı kurallar
   -------------------------------------------------------------------------- */

/* Görsel olarak gizli ama ekran okuyucuya açık */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* İçeriğe atla bağlantısı */
.skip-link {
  position: absolute;
  top: -100px;
  left: var(--space-4);
  z-index: var(--z-tooltip);
  padding: var(--space-2) var(--space-4);
  color: var(--accent-fg);
  background: var(--accent);
  border-radius: var(--radius-sm);
  transition: top var(--duration) var(--ease-out);
}

.skip-link:focus {
  top: var(--space-4);
}

/* Metin */
.text-secondary { color: var(--text-secondary); }
.text-muted     { color: var(--text-muted); }
.text-subtle    { color: var(--text-subtle); }
.text-success   { color: var(--success); }
.text-warning   { color: var(--warning); }
.text-danger    { color: var(--danger); }
.text-income    { color: var(--income); }
.text-expense   { color: var(--expense); }

.text-2xs  { font-size: var(--text-2xs); }
.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }

.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

.uppercase { text-transform: uppercase; letter-spacing: 0.04em; }
.tabular   { font-variant-numeric: tabular-nums lining-nums; }
.mono      { font-family: var(--font-mono); }

.text-right  { text-align: right; }
.text-center { text-align: center; }

/* Uzun metni tek satırda kes */
.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* Belirli satır sayısında kes */
.clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Yerleşim */
.flex        { display: flex; }
.inline-flex { display: inline-flex; }
.grid        { display: grid; }
.hidden      { display: none !important; }

/* hidden özniteliği, display:grid/flex gibi kurallarca ezilmemeli */
[hidden] { display: none !important; }

.items-center   { align-items: center; }
.items-start    { align-items: flex-start; }
.items-baseline { align-items: baseline; }
.justify-between { justify-content: space-between; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.flex-col   { flex-direction: column; }
.flex-wrap  { flex-wrap: wrap; }
.flex-1     { flex: 1 1 0%; }
.shrink-0   { flex-shrink: 0; }

.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }

.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-8 { margin-top: var(--space-8); }
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }
.mb-8 { margin-bottom: var(--space-8); }
.ml-2 { margin-left: var(--space-2); }

.w-full { width: 100%; }

/* Yazdırma: gezinme öğeleri çıktıya girmez */
@media print {
  /* Sayfanın ÜSTÜNDE duran her katman arayüzdür, içerik değil — kâğıda
     girmemeli. Bir kez oldu: ortak mutabakatı yazdırılırken açık duran
     "…" menüsü çıktının ortasına basıldı.
     Liste keyfi değil: z-index tokenlarıyla bir katmana yerleşen bütün
     bileşenler burada; markup_test.php ikisini karşılaştırıyor. */
  .sidebar,
  .topbar,
  .no-print,
  .btn,
  .skip-link,
  .dropdown__menu,
  .combo-pop,
  .modal-backdrop,
  .toast-region,
  .tooltip-bubble,
  .palette {
    display: none !important;
  }

  /* CSS ipucu balonu sözde öğe; yukarıdaki listeye giremiyor. */
  .tooltip::after,
  .tooltip::before {
    content: none !important;
  }

  body {
    background: #fff;
  }

  .card {
    border: 1px solid #ddd;
    box-shadow: none;
    break-inside: avoid;
  }
}