/* ==========================================================================
   Countopus web arayuzu — tek stil dosyasi (T1, gorsel kimlik T5).
   1) Tasarim degiskenleri  2) Temel  3) Yerlesim  4) Bilesenler  5) Ekrana ozel  6) Mobil
   Renk, yazi tipi, kose ve golge yalniz asagidaki degiskenlerden; kenarlik yerine golge.
   Sinif adlari sablonlarla ayni kalir; yeni deger yazarken degisken kullanin.
   ========================================================================== */

/* --- 0) Yazi tipleri (yerel, web/static/fonts; OFL lisansli). Degisken woff2, yalniz kullanilan agirlik araligi:
   Outfit 600-700 (baslik), Plus Jakarta Sans 400-700 (metin). latin + latin-ext (İ, ş, ğ, ₺). Dis istek yok. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/outfit-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;
}
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("fonts/outfit-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;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-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;
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/plus-jakarta-sans-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;
}

/* --- 1) Tasarim degiskenleri ------------------------------------------------ */
:root {
  /* Renk (LibraDesk kimligi, logodan: lacivert metin, mavi vurgu, yesil ikincil). Metin cifti en az 4.5:1, kontrol
     siniri / gosterge en az 3:1 (tests/unit/test_brand_colors.py olcer). Parlak yesil (--secondary) beyaz zeminde 3:1'i
     tutmaz: yalniz lacivert zeminde ve susleme olarak; metin / basari tonu --secondary-ink. */
  --bg: #f1f4fa;
  --surface: #ffffff;
  --ink: #071b3b;
  --muted: #55657e;
  --accent: #0057b8;
  --accent-ink: #00449a;
  --secondary: #10af83;
  --secondary-ink: #087a62;
  --secondary-tint: #e3f6ef;
  --ok: var(--secondary-ink);
  --info: #1e63c4;
  --warn: #8a4b05;
  --danger: #b22e52;
  --accent-tint: #e6f0fb;
  --accent-hover-tint: #d6e6f8;
  --on-accent-muted: #d9e8fa;
  --brand-band: #071b3b;
  --row-hover: #f4f7fc;
  --ok-tint: var(--secondary-tint);
  --info-tint: #e3eefb;
  --warn-tint: #fff3e4;
  --danger-tint: #fde8ee;
  --purple: #6f35b4;
  --purple-tint: #f2e9fa;
  --on-accent: #ffffff;
  /* Form alani siniri: beyaz zeminde en az 3:1 (alan sinirlari gorunur kalsin). */
  --field-border: #7f8ba3;
  --hairline: #e2e8f2;

  /* Tipografi */
  --font-heading: "Outfit", system-ui, sans-serif;
  --font-body: "Plus Jakarta Sans", system-ui, sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;   /* 13px ikincil */
  --text-base: 0.90625rem; /* 14.5px govde */
  --text-lg: 1rem;        /* 16px h2 */
  --text-xl: 1.8125rem;   /* 29px h1 */
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --leading: 1.5;

  /* Bosluk (0,25rem adimli) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --page-pad: 18px;
  --gap: 16px;

  /* Kose, golge, odak */
  --radius-panel: 24px;
  --radius-card: 20px;
  --radius-control: 14px;
  --radius-full: 999px;
  /* Golge kademeleri (kucukten buyuge: control < card-sm < card < panel); vurgu yuzeyleri ayri. */
  --shadow-panel: 0 1px 2px rgba(7, 27, 59, 0.04), 0 12px 24px rgba(7, 27, 59, 0.07);
  --shadow-card: 0 1px 2px rgba(7, 27, 59, 0.04), 0 10px 20px rgba(7, 27, 59, 0.07);
  --shadow-card-sm: 0 1px 2px rgba(7, 27, 59, 0.04), 0 9px 18px rgba(7, 27, 59, 0.06);
  --shadow-control: 0 1px 2px rgba(7, 27, 59, 0.04), 0 8px 16px rgba(7, 27, 59, 0.06);
  --shadow-accent: 0 1px 3px rgba(0, 87, 184, 0.18), 0 12px 24px rgba(0, 87, 184, 0.24);
  --shadow-accent-btn: 0 1px 3px rgba(0, 87, 184, 0.18), 0 10px 20px rgba(0, 87, 184, 0.26);
  --shadow-tab-bar: 0 -1px 2px rgba(7, 27, 59, 0.04), 0 -10px 20px rgba(7, 27, 59, 0.07);
  --lift: translateY(-2px);
  --ease-hover: 150ms ease;
  --focus-ring: 0 0 0 3px rgba(0, 87, 184, 0.35);

  /* Boyut */
  --control-height: 2.625rem;
  --sidebar-width: 236px;
  --content-narrow: 42rem;
  --content-wide: 76rem;

  /* Eski adlar (T1 kurallari; yeni kodda yukaridakileri kullanin) */
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-surface-muted: var(--bg);
  --color-text: var(--ink);
  --color-text-muted: var(--muted);
  --color-primary: var(--accent);
  --color-primary-hover: var(--accent-ink);
  --color-primary-soft: var(--accent-tint);
  --color-danger: var(--danger);
  --color-success: var(--ok);
  --color-warning: var(--warn);
}

/* --- 2) Temel ---------------------------------------------------------------- */
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-family: var(--font-heading); color: var(--ink); }
h1 { margin: 0 0 var(--space-4); font-size: var(--text-xl); font-weight: var(--weight-bold); letter-spacing: -0.6px; line-height: 1.2; }
h2 { margin: var(--space-6) 0 var(--space-3); font-size: var(--text-lg); font-weight: var(--weight-bold); line-height: 1.3; }
a { color: var(--accent); text-underline-offset: 2px; }
a:hover { color: var(--accent-ink); }
input:focus-visible, select:focus-visible, textarea:focus-visible,
button:focus-visible, a:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.meta { color: var(--muted); margin: 0; font-size: var(--text-sm); }
.prewrap { white-space: pre-line; }
strong, b { font-weight: var(--weight-bold); }

/* Ikonlar: <x class="ico i-ad"> — ikon ::before maskesiyle, rengi metinle ayni. */
.ico::before {
  content: "";
  display: inline-block;
  flex: 0 0 auto;
  width: 1.25rem;
  height: 1.25rem;
  background: currentColor;
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
}
.i-truck { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 7h11v9H2z'/%3E%3Cpath d='M13 10h4l3 3v3h-7z'/%3E%3Ccircle cx='6' cy='18' r='1.8'/%3E%3Ccircle cx='16.5' cy='18' r='1.8'/%3E%3C/svg%3E"); }
.i-tool { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 6.5a4 4 0 0 0-5.3 5.3L3 18l3 3 6.2-6.2a4 4 0 0 0 5.3-5.3l-2.6 2.6-2.4-.6-.6-2.4z'/%3E%3C/svg%3E"); }
.i-home { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10.5 12 3l9 7.5V20a1 1 0 0 1-1 1h-5v-6H9v6H4a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.i-users { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.8-3.6 3.4-5.5 6.5-5.5s5.7 1.9 6.5 5.5'/%3E%3Cpath d='M16 4.5a3.5 3.5 0 0 1 0 7'/%3E%3Cpath d='M18 14.8c1.9.6 3 2.4 3.5 5.2'/%3E%3C/svg%3E"); }
.i-box { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 8 12 3 3 8v8l9 5 9-5z'/%3E%3Cpath d='m3 8 9 5 9-5'/%3E%3Cpath d='M12 13v8'/%3E%3C/svg%3E"); }
.i-cart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4h2l2.4 11.2a1 1 0 0 0 1 .8h9.2a1 1 0 0 0 1-.8L20 8H6.2'/%3E%3Ccircle cx='9' cy='20' r='1.3'/%3E%3Ccircle cx='17' cy='20' r='1.3'/%3E%3C/svg%3E"); }
.i-receipt { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2h12v20l-3-2-3 2-3-2-3 2z'/%3E%3Cpath d='M9 7h6M9 11h6M9 15h4'/%3E%3C/svg%3E"); }
.i-factory { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V10l6 4v-4l6 4V5h6v16z'/%3E%3Cpath d='M7 17h2M12 17h2M17 17h1'/%3E%3C/svg%3E"); }
.i-wallet { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 7V5a1 1 0 0 0-1-1H5a2 2 0 0 0 0 4h15a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a2 2 0 0 1-2-2V6'/%3E%3Ccircle cx='16.5' cy='13.5' r='1.3'/%3E%3C/svg%3E"); }
.i-chart { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v16h16'/%3E%3Cpath d='M8 16v-5M12 16V8M16 16v-3'/%3E%3C/svg%3E"); }
.i-up { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E"); }
.i-down { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.i-sliders { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6h10M18 6h2M4 12h4M12 12h8M4 18h12M20 18h0'/%3E%3Ccircle cx='16' cy='6' r='2'/%3E%3Ccircle cx='10' cy='12' r='2'/%3E%3Ccircle cx='18' cy='18' r='2'/%3E%3C/svg%3E"); }
.i-tag { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.6 13.4 13.4 20.6a2 2 0 0 1-2.8 0L3 13V3h10l7.6 7.6a2 2 0 0 1 0 2.8z'/%3E%3Ccircle cx='7.5' cy='7.5' r='1.3'/%3E%3C/svg%3E"); }
.i-clipboard { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3h6v3H9z'/%3E%3Cpath d='M9 4.5H6a1 1 0 0 0-1 1V20a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V5.5a1 1 0 0 0-1-1h-3'/%3E%3Cpath d='m9 13 2 2 4-4'/%3E%3C/svg%3E"); }
.i-shield { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 20 6v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.i-print { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9V3h12v6'/%3E%3Crect x='3' y='9' width='18' height='8' rx='2'/%3E%3Cpath d='M7 14h10v7H7z'/%3E%3C/svg%3E"); }
.i-bell { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9'/%3E%3Cpath d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/%3E%3C/svg%3E"); }
.i-in { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3Cpath d='M5 21h14'/%3E%3C/svg%3E"); }
.i-out { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='m7 14 5-5 5 5'/%3E%3Cpath d='M5 3h14'/%3E%3C/svg%3E"); }
.i-bank { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18L12 4z'/%3E%3Cpath d='M5 10v8M9.5 10v8M14.5 10v8M19 10v8'/%3E%3Cpath d='M3 21h18'/%3E%3C/svg%3E"); }
.i-warehouse { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V9l9-5 9 5v12'/%3E%3Cpath d='M7 21v-8h10v8'/%3E%3Cpath d='M7 17h10'/%3E%3C/svg%3E"); }
.i-transfer { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 8h15l-3-3'/%3E%3Cpath d='M20 16H5l3 3'/%3E%3C/svg%3E"); }
.i-logout { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4h3a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='m10 17-5-5 5-5'/%3E%3Cpath d='M5 12h11'/%3E%3C/svg%3E"); }
.i-search { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.i-plus { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E"); }
.i-grid { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z'/%3E%3C/svg%3E"); }
.i-list { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 6h13M8 12h13M8 18h13M3.5 6h.01M3.5 12h.01M3.5 18h.01'/%3E%3C/svg%3E"); }
.i-idcard { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Ccircle cx='9' cy='11' r='2'/%3E%3Cpath d='M6 16c.5-1.6 1.6-2.4 3-2.4s2.5.8 3 2.4'/%3E%3Cpath d='M15 10h3M15 14h3'/%3E%3C/svg%3E"); }
.i-check { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E"); }

/* --- 3) Yerlesim --------------------------------------------------------------- */
.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -3rem;
  z-index: 20;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font-weight: var(--weight-semibold);
}
.skip-link:focus { top: var(--space-2); color: var(--on-accent); }
main:focus { outline: none; }

/* Marka (LibraDesk): genis ekranda yatay logo, telefonda simge (web/static/brand, scripts/brand/make_brand.py).
   Yatay logodaki "Desk" kucuk yazilir: logo 3.5rem'den kucuk kullanilmaz. */
.brand { display: inline-flex; align-items: center; flex: none; text-decoration: none; border-radius: var(--radius-control); }
.brand-logo { display: block; width: auto; height: 3.5rem; }
.brand-icon { display: none; width: 2.5rem; height: 2.5rem; }
.print-brand { display: none; }

/* Giris animasyonu (yalniz basarili giristen panele gecerken; base.html): simgenin hatti cizilir, mavi-yesil dolgu
   gelir. Sayfa yuklenince betik .is-done ile hemen sondurur; CSS ust siniri 1 sn (0.8 sn'de sonmeye baslar). */
.welcome-splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--surface);
  animation: welcome-out 0.2s ease 0.8s forwards;
}
.welcome-splash.is-done { opacity: 0; visibility: hidden; transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
.welcome-line { stroke: var(--accent); stroke-dasharray: 1; stroke-dashoffset: 1; animation: welcome-draw 0.45s ease-out forwards; }
.welcome-fill { opacity: 0; animation: welcome-fill 0.3s ease 0.3s forwards; }
@keyframes welcome-draw { to { stroke-dashoffset: 0; } }
@keyframes welcome-fill { to { opacity: 1; } }
@keyframes welcome-out { to { opacity: 0; visibility: hidden; } }
@media (prefers-reduced-motion: reduce) {
  .welcome-splash { display: none; }
}

/* Menusuz sayfalar (giris, kayit): ustte yalniz marka */
.site-header {
  display: flex;
  align-items: center;
  padding: var(--page-pad) calc(var(--page-pad) + var(--space-2));
}

/* Menulu sayfalar: solda 236px menu paneli + icerik */
.app {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  gap: var(--page-pad);
  align-items: start;
  min-height: 100vh;
  padding: var(--page-pad);
}
.sidebar {
  position: sticky;
  top: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  height: calc(100vh - 2 * var(--page-pad));
  padding: var(--space-5) var(--space-3);
  overflow-y: auto;
  border-radius: var(--radius-panel);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}
.sidebar .brand { padding: 0 var(--space-2); }
.site-nav { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 auto; }
.site-nav a {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 2.75rem;
  padding: 0 var(--space-4);
  border-radius: var(--radius-control);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.site-nav a::before { color: var(--muted); }
.site-nav a:hover { background: var(--accent-tint); color: var(--accent-ink); }
.site-nav a:hover::before { color: var(--accent-ink); }
.site-nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.site-nav a[aria-current="page"]::before { color: var(--on-accent); }

/* Kullanici kutusu (menu altinda): bas harf + ad + rol + cikis */
.user-box {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-card);
  background: var(--bg);
}
.user-box form { margin: 0 0 0 auto; }
/* I1 dil dugmesi: ustte, markanin yaninda (menulu sayfalar) ya da sag ustte (menusuz sayfalar) */
.sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.lang-switch { margin: 0; }
.site-header .lang-switch { margin-left: auto; }
.lang-button { width: auto; min-width: 2.5rem; padding: 0 var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-bold); letter-spacing: 0.04em; }
.avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
}
.user-meta { display: grid; min-width: 0; line-height: 1.3; }
.user-meta strong, .user-meta span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-meta span { color: var(--muted); font-size: var(--text-sm); }
/* Masaustu kenar cubugu: iki satir — bas harf + ad / rol (kesilmez, gerekirse satir kirar), altta zil + cikis. */
@media (min-width: 961px) {
  .user-box { flex-wrap: wrap; row-gap: var(--space-2); }
  .user-box .user-meta { flex: 1 1 calc(100% - 2.25rem - var(--space-3)); }
  .user-box .user-meta strong, .user-box .user-meta span { white-space: normal; overflow-wrap: anywhere; }
}

.site-main {
  width: 100%;
  max-width: var(--content-narrow);
  margin: 0 auto;
}
.site-main.wide { max-width: var(--content-wide); }
/* Menusuz sayfada icerik ortada, ustten bosluklu */
.site-header + .site-main { margin: var(--space-8) auto; padding: 0 var(--page-pad); }

/* Panel / kart */
.panel, .auth-card {
  background: var(--surface);
  border-radius: var(--radius-panel);
  padding: var(--space-6);
  box-shadow: var(--shadow-panel);
}
.auth-card { padding: 1.75rem; }
.panel + .panel { margin-top: var(--gap); }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.panel-head h1, .panel-head h2 { margin: 0; }
.crumbs { margin: 0 0 var(--space-2); font-size: var(--text-sm); color: var(--muted); }
.stack { display: grid; gap: var(--space-4); }

/* --- 4) Bilesenler -------------------------------------------------------------- */

/* 4.1 Buton */
button, .button, a.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-5);
  border: 0;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--on-accent);
  font: inherit;
  font-weight: var(--weight-semibold);
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-accent-btn);
  transition: background-color var(--ease-hover), box-shadow var(--ease-hover);
}
button:hover, .button:hover, a.button:hover { background: var(--accent-ink); color: var(--on-accent); }
button.secondary, .button.secondary, a.button.secondary {
  background: var(--accent-tint);
  color: var(--accent-ink);
  box-shadow: var(--shadow-control);
}
button.secondary:hover, .button.secondary:hover, a.button.secondary:hover { background: var(--accent-hover-tint); color: var(--accent-ink); }
button.danger, .button.danger { background: var(--danger); box-shadow: 0 8px 20px rgba(178, 46, 82, 0.22); }
button.danger:hover, .button.danger:hover { background: #8f2242; }
button.linkish {
  min-height: auto;
  padding: var(--space-1) var(--space-2);
  background: transparent;
  color: var(--muted);
  font-weight: var(--weight-medium);
  box-shadow: none;
}
button.linkish:hover { background: var(--accent-tint); color: var(--accent-ink); }
.icon-button {
  width: 2.5rem;
  min-height: 2.5rem;
  padding: 0;
  background: transparent;
  color: var(--muted);
  box-shadow: none;
}
.icon-button:hover { background: var(--accent-tint); color: var(--accent-ink); }
button[disabled], .button[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; }

/* 4.2 Form */
label {
  display: grid;
  gap: var(--space-1);
  align-content: start;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}
label .meta { font-weight: normal; }
input, select, textarea {
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: normal;
  box-shadow: var(--shadow-control);
}
textarea { min-height: 5rem; }
/* Uzun secenek metni (orn. EN rol adlari) izgara formu dar ekranda tasirmasin (izgara ogesinin en kucuk genisligi). */
select { min-width: 0; max-width: 100%; }
input:hover, select:hover, textarea:hover { border-color: var(--ink); }
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: var(--focus-ring); outline: none; }
input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input[type="checkbox"], input[type="radio"] { box-shadow: none; min-height: auto; width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }
label.checkbox { display: flex; align-items: center; gap: var(--space-2); font-weight: normal; }
label.checkbox input { flex: none; width: 1.1rem; height: 1.1rem; }
fieldset { border: 0; border-radius: var(--radius-card); background: var(--bg); padding: var(--space-3) var(--space-4); margin: 0; }
legend { padding: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.form-grid { grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); align-items: start; }
.form-grid .full { grid-column: 1 / -1; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.void-form { margin-top: var(--space-6); max-width: 32rem; }
/* IM1 sutun eslestirme: secim kutusu en uzun ornek secenege gore tabloyu tasirmasin */
.import-map { max-width: 48rem; }
.import-map table { table-layout: fixed; }
.import-map thead th:first-child { width: 10rem; }
.import-map td select { width: 100%; }
form.inline { display: inline; margin-left: var(--space-3); }

/* Arama ve tarih suzgeci (liste ustu) */
.search, .list-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--space-2) var(--space-3);
  margin: var(--space-4) 0;
}
.search input[type="search"] { flex: 1 1 14rem; min-width: 0; }
.list-filter label { flex: 0 1 11rem; }

/* 4.3 Tablo (liste disi: ekstre, fatura satirlari, raporlar) */
.table-wrap {
  position: relative; /* icindeki .visually-hidden (absolute) kaydirma kutusundan tasip sayfayi genisletmesin */
  overflow-x: auto;
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--hairline);
}
table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
th, td {
  padding: var(--space-3) var(--space-3);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--hairline);
}
thead th {
  background: var(--bg);
  color: var(--muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}
tbody tr:hover td { background: var(--row-hover); }
tbody tr:last-child td { border-bottom: 0; }
td.code { font-variant-numeric: tabular-nums; white-space: nowrap; }
.num, th.num, td.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.actions { white-space: nowrap; text-align: right; }
td.actions a + a { margin-left: var(--space-3); }
td.actions button.linkish { color: var(--accent); }
tr.inactive td { color: var(--muted); }
tr.opening td { font-style: italic; color: var(--muted); }
tr.negative td { color: var(--danger); }
tfoot td { border-bottom: 0; background: var(--bg); }
tfoot tr.total td { border-top: 2px solid var(--hairline); font-weight: var(--weight-bold); }

/* 4.4 Rozet (durum): renk + metin birlikte (renk tek basina anlam tasimaz) */
.badge {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-2);
  padding: 0.15rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--muted);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  white-space: nowrap;
  vertical-align: middle;
}
td > .badge:first-child { margin-left: 0; }
.badge.status-draft { color: var(--warn); background: var(--warn-tint); }
.badge.status-posted, .badge.result-accept { color: var(--ok); background: var(--ok-tint); }
.badge.status-voided, .badge.quarantine,
.badge.result-reject, .badge.result-quarantine { color: var(--danger); background: var(--danger-tint); }
.badge-danger { background: var(--danger); color: var(--on-accent); }

/* 4.5 Uyari / bildirim */
.notice, .error {
  margin: 0 0 var(--gap);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-control);
  background: var(--info-tint);
  color: var(--ink);
  font-weight: var(--weight-medium);
}
.notice-warning { background: var(--warn-tint); color: var(--warn); }
.notice-danger, .error { background: var(--danger-tint); color: var(--danger); }
.notice-danger a, .error a, .notice-warning a { color: inherit; font-weight: var(--weight-bold); }
.notice-success { background: var(--ok-tint); color: var(--ok); }
/* Satir ici hata metni (kutu degil) */
span.error { display: inline; margin: 0; padding: 0; border-radius: 0; background: none; font-weight: var(--weight-semibold); }

/* 4.6 Ozet kart */
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--gap); }
.summary-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.summary-value { font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.summary-card.is-alert, .stat-card.is-alert { background: var(--danger-tint); box-shadow: none; }
.summary-card.is-alert .meta { color: var(--danger); }
/* Uyari (duzeltilecek kayit; kirmizi degil): "Diger" kaleminde kayit (G4). */
.summary-card.is-warn { background: var(--warn-tint); box-shadow: none; }
.summary-card.is-warn .meta { color: var(--warn); }

/* Tiklanabilir kartlar: hover'da 2px kalkar, golge bir kademe buyur (control > card-sm > card > panel). */
a.summary-card, a.stat-card, a.module-card, a.counter-card {
  transition: transform var(--ease-hover), box-shadow var(--ease-hover), background-color var(--ease-hover);
}
a.summary-card:hover, a.stat-card:hover, a.module-card:hover, a.counter-card:hover { transform: var(--lift); }
a.summary-card:hover, a.stat-card:hover, a.module-card:hover { box-shadow: var(--shadow-panel); }
a.counter-card:hover { box-shadow: var(--shadow-card-sm); }
a.stat-card.is-accent:hover { box-shadow: var(--shadow-accent); }  /* vurgu kartinda ust kademe yok: yalniz kalkar */
.summary-card.is-alert:hover, .summary-card.is-warn:hover { box-shadow: var(--shadow-card-sm); }
@media (prefers-reduced-motion: reduce) {
  /* Hareket yok; yalniz golge degisir. */
  a.summary-card, a.stat-card, a.module-card, a.counter-card { transition: box-shadow var(--ease-hover), background-color var(--ease-hover); }
  a.summary-card:hover, a.stat-card:hover, a.module-card:hover, a.counter-card:hover { transform: none; }
}

/* 4.7 Bos durum, bilgi listeleri, sayfa gezgini */
.empty {
  padding: var(--space-6) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg);
  color: var(--muted);
  text-align: center;
}
.empty p { margin: 0 0 var(--space-3); }
.empty p:last-child { margin-bottom: 0; }
.facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); }
.facts dt { color: var(--muted); }
.facts dd { margin: 0; }
.balance { font-family: var(--font-heading); font-size: 1.25rem; margin: 0 0 var(--space-4); font-variant-numeric: tabular-nums; }
.pager { margin-top: var(--space-4); }
/* Bolum alt menusu: hap sekmeler */
.sub-nav { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-5); font-size: var(--text-sm); }
.sub-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.sub-nav a:hover { background: var(--accent-tint); color: var(--accent-ink); }
.sub-nav a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.report-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-4); }

/* 4.8 Yukleniyor durumu (base.html betigi isaretler) */
form[aria-busy="true"] { cursor: progress; }
button[data-busy="true"] { opacity: 0.75; pointer-events: none; }
button[data-busy="true"]::after {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button[data-busy="true"]::after { animation: none; } }

/* 4.9 Liste satir kartlari (T5c): bas harf kutusu, ad + kod, rozetler, tutar, islemler */
.row-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.row-card {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card-sm);
}
.row-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-control);
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
}
.row-main { display: grid; flex: 1 1 14rem; min-width: 0; gap: 0.1rem; }
.row-title { font-weight: var(--weight-bold); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; }
a.row-title:hover { color: var(--accent-ink); text-decoration: underline; }
.row-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.row-tags:empty { display: none; }
.row-tags .badge { margin-left: 0; }
.row-figure {
  display: grid;
  min-width: 7.5rem;
  text-align: right;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.row-figure .meta { font-weight: normal; }
.row-figure.is-negative { color: var(--danger); }
.row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.row-actions form { margin: 0; }
.row-card.is-inactive { background: var(--bg); box-shadow: none; }
/* S personel odemesi: satir icinde iptal formu (tam genislik alt satir; acilinca karttan tasmaz) */
.row-void { flex: 1 0 100%; }
.row-void > summary { cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--accent-ink); }
.row-void form { margin-top: var(--space-2); max-width: 32rem; }
/* A uyarilar: pano karti satiri */
.row-card.is-alert-row { box-shadow: inset 3px 0 0 var(--danger), var(--shadow-card-sm); }
/* R gelir gider dengesi: fark hucresi tonu */
.delta-ok { color: var(--ok); background: var(--ok-tint); font-weight: 600; }
.delta-warn { color: var(--warn); background: var(--warn-tint); font-weight: 600; }
.delta-danger { color: var(--danger); background: var(--danger-tint); font-weight: 600; }
/* B1 bildirim zili ve listesi */
.notif-bell { position: relative; flex: none; display: inline-flex; align-items: center; justify-content: center; }
.notif-count { position: absolute; top: 0; right: -2px; min-width: 1.1rem; padding: 0 4px; border-radius: 999px; background: var(--danger, #c62828); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1.1rem; text-align: center; }
.notification.is-unread { box-shadow: inset 3px 0 0 var(--accent), var(--shadow-card-sm); }
/* T2 saha makbuzu */
.receipt-lines { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-5); }
.receipt-lines dt { color: var(--muted); }
.receipt-lines dd { margin: 0; overflow-wrap: anywhere; }
/* P3 pano duzeni: kart basina goster / gizle + yukari / asagi */
.layout-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.layout-list .row-card { flex-wrap: nowrap; }
.layout-list .row-card label { display: flex; align-items: center; gap: var(--space-3); flex: 1 1 auto; min-width: 0; margin: 0; font-weight: 600; }
.layout-list .row-card label input { flex: none; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; }
.layout-move { display: flex; gap: var(--space-1); }
.row-card.is-inactive .row-title, .row-card.is-inactive .row-figure { color: var(--muted); }
button.small, .button.small, a.button.small { min-height: 2.25rem; padding: var(--space-1) var(--space-4); font-size: var(--text-sm); }
/* Liste ust sayac kartlari (_counters.html): 4 kucuk kart, liste suzgecinden bagimsiz sayilar */
.counter-grid { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.counter-card {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  column-gap: var(--space-3);
  min-height: 4.25rem;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-card);
  background: var(--bg);
  color: var(--ink);
  text-decoration: none;
}
a.counter-card { background: var(--surface); box-shadow: var(--shadow-control); }
a.counter-card:hover { color: var(--accent-ink); }
.counter-grid .counter-dot { grid-row: span 2; width: 0.375rem; height: 2.25rem; border-radius: var(--radius-full); background: currentColor; }
.counter-value { font-family: var(--font-heading); font-size: 1.35rem; font-weight: var(--weight-bold); line-height: 1.1; font-variant-numeric: tabular-nums; }
.counter-label { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
a.counter-card:hover .counter-label { color: var(--accent-ink); }
@media (max-width: 760px) { .counter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Kisa sayi alani (gun sayisi) ve acilir gecmis */
input.short { width: 6.5rem; }
details.history { margin-top: var(--space-3); }
details.history > summary { cursor: pointer; min-height: 2.75rem; display: flex; align-items: center; font-weight: var(--weight-semibold); color: var(--accent-ink); }
/* Suzgec paneli: arama, tarih suzgeci ve durum sekmeleri; sayfa gezgini haplari */
.search, .list-filter { padding: var(--space-3); border-radius: var(--radius-card); background: var(--bg); }
.status-tabs { margin: var(--space-4) 0 var(--space-2); }
.status-tabs + .list-filter { margin-top: 0; }
.pager a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--accent-tint);
  color: var(--accent-ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.pager a:hover { background: var(--accent-hover-tint); }

/* --- 5) Ekrana ozel ------------------------------------------------------------- */
/* Gosterge paneli (T5b): baslik + yeni belge, 4 ozet kart, uyari kartlari, modul izgarasi, son hareketler */
.dash-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-2) 0 var(--space-5);
}
.dash-head h1 { margin: 0 0 var(--space-1); }
.dash-search { display: flex; flex: 1 1 18rem; max-width: 26rem; gap: var(--space-2); margin-left: auto; }
.dash-search input { flex: 1 1 auto; min-width: 0; }
.dash-search button { width: var(--control-height); padding: 0; }
.dash-edit { width: var(--control-height); padding: 0; }
.search-head { margin: var(--space-6) 0 var(--space-3); }
.dash-section { margin-bottom: var(--gap); }
.menu-button { position: relative; }
.menu-button > summary { list-style: none; }
.menu-button > summary::-webkit-details-marker { display: none; }
.menu-list {
  position: absolute;
  right: 0;
  z-index: 5;
  display: grid;
  min-width: 14rem;
  margin-top: var(--space-2);
  padding: var(--space-2);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(7, 27, 59, 0.16);
}
.menu-list a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  border-radius: var(--radius-control);
  color: var(--ink);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}
.menu-list a:hover { background: var(--accent-tint); color: var(--accent-ink); }
.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.stat-grid + .sub-nav, .stat-grid + .facts { margin-top: var(--space-4); }  /* ozet kartlarin altindaki sekmeler / bilgiler (W-CEK, W-KREDI) */
.stat-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: 7rem;
  padding: var(--space-5);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.stat-card:hover { color: var(--ink); }
.stat-label { color: var(--muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
.stat-card.is-accent { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-accent); }
.stat-card.is-accent .stat-label { color: var(--on-accent-muted); }
.stat-card.is-accent:hover { background: var(--accent-ink); color: var(--on-accent); }
.alert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: var(--gap); }
.module-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.module-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  min-height: 6.5rem;
  padding: var(--space-4);
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  font-weight: var(--weight-bold);
  text-decoration: none;
  box-shadow: var(--shadow-card);
}
.module-card:hover { color: var(--accent-ink); }
.module-icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--radius-control);
}
/* Ton: ikon kutusu zemini + ikon rengi (susleme; anlam etiket metninde) */
.tone-accent { background: var(--accent-tint); color: var(--accent); }
.tone-ok { background: var(--ok-tint); color: var(--ok); }
.tone-info { background: var(--info-tint); color: var(--info); }
.tone-warn { background: var(--warn-tint); color: var(--warn); }
.tone-danger { background: var(--danger-tint); color: var(--danger); }
.tone-purple { background: var(--purple-tint); color: var(--purple); }
.tx-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-1); }
.tx {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-2);
  border-radius: var(--radius-control);
}
.tx:hover { background: var(--bg); }
.tx-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-control);
}
.tx-body { display: grid; flex: 1 1 auto; min-width: 0; }
.tx-title { font-weight: var(--weight-semibold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-amount { flex: 0 0 auto; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.tx-amount.is-in { color: var(--ok); }
.tx-amount.is-out { color: var(--danger); }
.tx.is-void .tx-title, .tx.is-void .tx-amount { color: var(--muted); text-decoration: line-through; }
@media (max-width: 1200px) { .module-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .module-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .alert-grid { grid-template-columns: 1fr; }
}
/* Fatura / uretim satir tablolari */
table.lines input, table.lines select { width: 100%; min-width: 6rem; }
/* Sayi girisleri tutar/miktar sutunlariyla ayni hizada (saga) */
input[inputmode="decimal"] { text-align: right; font-variant-numeric: tabular-nums; }
table.lines td:nth-child(2) select { min-width: 14rem; }
table.lines td:nth-child(3) select { min-width: 8rem; }
table.lines select[name="fleet_asset_id"] { min-width: 11rem; }
table.lines td select[name="expense_category_id"] { min-width: 12rem; }
table.measurements td:nth-child(2) input { max-width: 6rem; }
table.measurements td:nth-child(3) select { min-width: 14rem; }
/* Iki adimli dogrulama (GV2): kurulum anahtari ve yedek kodlar (elle yazilacak: es aralikli, iri) */
.secret-key code, .backup-codes code { font-family: ui-monospace, Consolas, monospace; font-size: var(--text-lg); letter-spacing: 0.06em; overflow-wrap: anywhere; }
.qr-code { margin: var(--space-3) 0; line-height: 0; }
.qr-code svg { border-radius: var(--radius-card); box-shadow: 0 0 0 1px var(--hairline); }  /* sabit boyut (~200 px), telefona sigar */
.backup-codes { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--space-2) var(--space-8); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
@media (max-width: 640px) { .backup-codes { grid-template-columns: 1fr; } }

/* Telefon ogeleri (T5d): alt serit, menu kapat baglantisi, ust bolum bakiyesi — buyuk ekranda gizli */
.tab-bar, .site-nav .sheet-close, .hero-balance { display: none; }

/* --- 6) Mobil ve dokunmatik ----------------------------------------------------- */
/* Dokunmatik isaretci: dokunma hedefleri en az ~44px. */
@media (pointer: coarse) {
  :root { --control-height: 2.75rem; }
  button.linkish, .icon-button { min-height: 2.75rem; min-width: 2.75rem; }
  td.actions a, .crumbs a { display: inline-block; padding: var(--space-2) 0; }
  .sub-nav a { min-height: 2.75rem; }
  button.small, .button.small, a.button.small, .pager a { min-height: 2.75rem; }
}

/* Orta genislik: menu paneli ustte, maddeler tek satirda yatay kayar. */
@media (max-width: 960px) {
  .app { display: block; padding: var(--space-3); }
  .sidebar {
    position: static;
    height: auto;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-4);
    margin-bottom: var(--space-3);
    padding: var(--space-3);
    overflow: visible;
  }
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: var(--space-1);
    scrollbar-width: thin;
  }
  .site-nav a { flex: 0 0 auto; }
  .user-box { margin-left: auto; padding: var(--space-1) var(--space-2); background: transparent; }
}

/* Dar ekran */
@media (max-width: 760px) {
  .panel, .auth-card { padding: var(--space-4); border-radius: var(--radius-card); }
  h1 { font-size: 1.5rem; }
  .form-grid { grid-template-columns: 1fr; }
  .form-actions > * { flex: 1 1 auto; }
  .facts { grid-template-columns: 1fr; gap: 0 var(--space-4); }
  .facts dd { margin-bottom: var(--space-2); }
  table { font-size: var(--text-sm); }
  th, td { padding: var(--space-2); }
  .list-filter label { flex: 1 1 9rem; }
  .user-meta { display: none; }
}

/* Telefon (T5d, <=640px): renkli ve alttan yuvarlak ust bolum, altta sabit 4 maddelik serit,
   tum menu "Menü" ile alt panel olarak acilir (:target, betiksiz). Dokunma hedefleri >= 44px. */
@media (max-width: 640px) {
  .app { padding: 0 0 calc(6.5rem + env(safe-area-inset-bottom)); }
  .sidebar {
    flex-wrap: nowrap;
    margin: 0 0 var(--space-4);
    padding: var(--space-4) var(--page-pad) var(--space-5);
    border-radius: 0 0 28px 28px;
    background: var(--brand-band);
    box-shadow: inset 0 -3px 0 var(--secondary), var(--shadow-panel);
  }
  .sidebar .brand { padding: 0; }
  .sidebar .brand-logo { display: none; }
  .sidebar .brand-icon { display: block; }
  /* Lacivert serit: mavi odak halkasi zeminde 2.5:1 kalir -> beyaz halka (17:1), arama kutusu yesil halka (6.1:1). */
  .sidebar-top :focus-visible, .user-box :focus-visible, .dash-head :focus-visible { outline-color: var(--on-accent); }
  .dash-head .menu-list :focus-visible { outline-color: var(--accent); } /* beyaz acilir menu */
  .dash-head input:focus { box-shadow: 0 0 0 3px var(--secondary); }
  .user-box { padding: 0; }
  .user-box .avatar { background: rgba(255, 255, 255, 0.18); color: var(--on-accent); }
  .user-box .icon-button { color: var(--on-accent); }
  .user-box .icon-button:hover { background: rgba(255, 255, 255, 0.18); color: var(--on-accent); }
  .sidebar-top .lang-button { color: var(--on-accent); }
  .sidebar-top .lang-button:hover { background: rgba(255, 255, 255, 0.18); color: var(--on-accent); }
  .site-main, .site-main.wide { padding: 0 var(--space-3); }
  .site-header + .site-main { padding: 0 var(--space-3); }

  /* Tum menu: gizli; "Menü" (#site-nav) ile alttan acilan panel */
  .site-nav { display: none; }
  .site-nav:target {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 30;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-height: 85vh;
    overflow-y: auto;
    padding: var(--space-4) var(--space-4) calc(var(--space-6) + env(safe-area-inset-bottom));
    border-radius: 28px 28px 0 0;
    background: var(--surface);
    box-shadow: 0 -12px 40px rgba(7, 27, 59, 0.25);
  }
  .site-nav:target .sheet-close {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    margin-bottom: var(--space-2);
    border-radius: var(--radius-control);
    background: var(--bg);
    color: var(--ink);
    font-weight: var(--weight-semibold);
    text-decoration: none;
  }
  .site-nav:target a:not([aria-current])::before { color: var(--muted); }
  .site-nav:focus { outline: none; }
  /* Panel acikken alttaki serit gizlenir: arkada odaklanabilir ikinci bir menu kalmaz. */
  .site-nav:target ~ .tab-bar { display: none; }

  /* Alt serit */
  .tab-bar {
    position: fixed;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(var(--space-3) + env(safe-area-inset-bottom));
    z-index: 20;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-1);
    padding: var(--space-2);
    border-radius: var(--radius-panel);
    background: var(--surface);
    box-shadow: var(--shadow-tab-bar);
  }
  .tab-bar a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 3.5rem;
    border-radius: 18px;
    color: var(--muted);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    text-decoration: none;
  }
  .tab-bar a[aria-current="page"], .tab-bar a.is-current { background: var(--accent); color: var(--on-accent); }

  /* Panel: ust bolum renkli, icinde bakiye (buyuk ekrandaki bakiye karti gizlenir) */
  body:has(.dash-head) .sidebar { margin-bottom: 0; border-radius: 0; box-shadow: none; }
  .dash-head {
    margin: 0 calc(-1 * var(--space-3)) var(--space-4);
    padding: 0 var(--page-pad) var(--space-6);
    border-radius: 0 0 28px 28px;
    background: var(--brand-band);
    color: var(--on-accent);
    box-shadow: inset 0 -3px 0 var(--secondary), var(--shadow-panel);
  }
  .dash-head > div { flex: 1 1 100%; }
  .dash-head h1 { color: var(--on-accent); font-size: 1.5rem; }
  .dash-head .meta { color: var(--on-accent-muted); }
  .hero-balance {
    display: grid;
    gap: 2px;
    margin-top: var(--space-4);
    color: var(--on-accent);
    text-decoration: none;
  }
  .hero-balance span { color: var(--on-accent-muted); font-size: var(--text-sm); font-weight: var(--weight-semibold); }
  .hero-balance strong { font-family: var(--font-heading); font-size: 1.9rem; font-variant-numeric: tabular-nums; }
  .hero-balance:hover { color: var(--on-accent); }
  .dash-search { flex: 1 1 100%; max-width: none; margin-left: 0; }
  .dash-head .menu-button > summary { background: var(--on-accent); color: var(--accent-ink); box-shadow: none; }
  .menu-list { left: 0; right: auto; }
  .stat-card.is-accent { display: none; }
  .stat-grid { grid-template-columns: 1fr; }
  .stat-card { min-height: auto; flex-direction: row; align-items: center; }
  .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Liste kartlari: tutar sola, islemler tam satir */
  .row-figure { text-align: left; min-width: 0; }
  .row-actions { flex: 1 1 100%; }
}

/* Yazdirma (T2 makbuz): yalniz icerik. */
@media print {
  .sidebar, .site-header, .tab-bar, .skip-link, .notice, .no-print { display: none !important; }
  .print-brand { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; color: #000; font-size: 9pt; }
  body, .app, .site-main { background: #fff; margin: 0; padding: 0; }
  .panel { box-shadow: none; border: 1px solid #999; }
}