/* ==========================================================================
   kdijital - base theme
   Company colors: navy blue (dominant) + orange (accent).
   ========================================================================== */

:root {
  /* Navy blue - dominant brand color */
  --navy-900: #081733;
  --navy-800: #0d2650;
  --navy-700: #123163;
  --navy-600: #1a4287;
  --navy: var(--navy-800);

  /* Orange - brand accent */
  --orange-600: #d95a06;
  --orange-500: #f97316;
  --orange-100: #ffedd5;

  /* Neutrals */
  --page-bg: #f4f5f7; /* light gray that reads as white but rests the eyes */
  --surface: #ffffff;
  --surface-alt: #eef1f5;
  --border: #e2e6ec;
  --text: #1e2836;
  --text-muted: #64748b;

  /* Layout metrics */
  --navbar-height: 64px;
  --sidebar-width: 250px;
  --radius: 8px;
  --radius-sm: 6px;
  --shadow-sm: 0 1px 2px rgba(8, 23, 51, 0.06);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text);
  background: var(--page-bg);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--navy-600);
}

/* --------------------------------------------------------------------------
   Navbar
   A 3-column grid keeps the centered logo perfectly centered no matter how
   wide the left/right button groups grow.
   -------------------------------------------------------------------------- */

.navbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--navbar-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding: 0 1.25rem;
  /* The same navy as the sidebar, so the two read as one slab; the accent below
     is what draws the boundary. */
  background: var(--navy-900);
  color: #fff;
  /* A hairline closing the bar where there is no sidebar to meet. */
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

/* One L, drawn by two edges: the sidebar runs its accent down the side the
   content touches, and the bar carries the same accent along its foot from the
   point where the two cross to the right edge. */
.has-sidebar .navbar::after {
  content: "";
  position: absolute;
  left: var(--sidebar-width);
  right: 0;
  bottom: 0;
  height: 3px;
  background: var(--orange-500);
}

.navbar__left {
  display: flex;
  align-items: center;
  justify-self: start;
  min-width: 0;
}

.navbar__right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.5rem;
  justify-self: end;
  min-width: 0;
}

.navbar__logo {
  display: flex;
  align-items: center;
  justify-self: center;
}

.navbar__logo img {
  display: block;
  height: 40px;
  width: auto;
}

.nav-button {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 0.9rem;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  white-space: nowrap;
  color: #e7edf8;
  text-decoration: none;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.nav-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.nav-button--primary {
  background: var(--orange-500);
  color: #fff;
}

.nav-button--primary:hover {
  background: var(--orange-600);
  border-color: transparent;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Sidebar + content
   -------------------------------------------------------------------------- */

.layout {
  flex: 1 1 auto;
  display: flex;
  align-items: stretch;
  min-height: 0;
}

/* A navy panel in the same tone as the header - the two are one frame - snapped
   to the left edge and as tall as the window, with the accent running down the
   edge the content touches. */
.sidebar {
  flex: 0 0 var(--sidebar-width);
  width: var(--sidebar-width);
  position: sticky;
  top: var(--navbar-height);
  align-self: flex-start;
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
  margin: 0;
  padding: 1.25rem 0.9rem;
  background: var(--navy-900);
  color: #e7edf8;
  border-radius: 0;
  border-right: 3px solid var(--orange-500);
}

.content {
  flex: 1 1 auto;
  min-width: 0;
  padding: 2rem 1.75rem;
  background: var(--page-bg);
}

/* On a narrow screen the sidebar lies above the content, so the accent moves to
   its foot and the bar's accent spans the width instead of starting mid-air. */
@media (max-width: 760px) {
  .layout {
    flex-direction: column;
  }

  .sidebar {
    position: static;
    width: 100%;
    flex: 1 1 auto;
    height: auto;
    border-right: none;
    border-bottom: 3px solid var(--orange-500);
  }

  .has-sidebar .navbar::after {
    left: 0;
  }
}

/* --------------------------------------------------------------------------
   Content building blocks
   -------------------------------------------------------------------------- */

.hero h1 {
  margin: 0 0 0.5rem;
  font-size: 2rem;
  color: var(--navy-700);
}

.hint {
  color: var(--text-muted);
}

.hint a {
  color: var(--orange-600);
  font-weight: 600;
}

.messages {
  list-style: none;
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.25rem;
  padding: 0;
}

.message {
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  border-left: 4px solid var(--navy-600);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.message.success {
  border-left-color: #16a34a;
}

.message.warning {
  border-left-color: var(--orange-500);
}

.message.error {
  border-left-color: #dc2626;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  padding: 1rem 1.5rem;
  background: var(--surface);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 0.85rem;
}

.site-footer p {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .navbar {
    gap: 0.5rem;
    padding: 0 0.75rem;
  }

  .navbar__logo img {
    height: 30px;
  }

  .nav-button {
    height: 34px;
    padding: 0 0.55rem;
    font-size: 0.8rem;
  }

  .navbar__right {
    gap: 0.25rem;
  }

  /* Stack the sidebar above the content on small screens. */
  .layout {
    flex-direction: column;
  }

  .sidebar {
    flex: none;
    /* The card fills the stacked column, so the side margins replace the one
       that held it off the left edge. Its height follows the content now that
       the content sits below it rather than beside it. */
    width: auto;
    min-height: 0;
    margin: 1rem 1rem 0;
    /* The frame follows the layout once the columns stack. */
    border-right: none;
    border-bottom: 3px solid var(--orange-500);
  }

  .sidebar__nav {
    position: static;
  }

  .content {
    padding: 1.25rem 1rem;
  }
}

/* --------------------------------------------------------------------------
   Navbar authentication
   -------------------------------------------------------------------------- */

.navbar__logout {
  display: inline-flex;
  margin: 0;
}

/* <button> inherits no font/colour, so line it up with the anchor buttons. */
.navbar__logout .nav-button {
  font-family: inherit;
  cursor: pointer;
}

/* --------------------------------------------------------------------------
   Sidebar navigation
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Avatars
   A round, navy disc with the initial, used wherever a picture may be missing.
   -------------------------------------------------------------------------- */

.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--navy-700);
  color: #fff;
  font-weight: 700;
  overflow: hidden;
}

.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.avatar--sm {
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
}

.avatar--lg {
  width: 96px;
  height: 96px;
  font-size: 2rem;
  border: 3px solid var(--orange-500);
}

/* --------------------------------------------------------------------------
   Sidebar identity
   The usergroup, its picture, the user and their Görevi, above the product
   list and closed by an accent rule in the same orange as the item rules.
   -------------------------------------------------------------------------- */

.sidebar__identity {
  display: grid;
  justify-items: center;
  gap: 0.4rem;
  text-align: center;
}

.sidebar__group {
  margin: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(231, 237, 248, 0.72);
}

.sidebar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 3px solid var(--orange-500);
  background: var(--navy-700);
  color: #e7edf8;
  font-size: 1.6rem;
  font-weight: 700;
  overflow: hidden;
}

.sidebar__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sidebar__user {
  margin: 0;
  font-weight: 700;
  color: #fff;
  word-break: break-word;
}

.sidebar__title {
  margin: 0;
  font-size: 0.8rem;
  color: rgba(231, 237, 248, 0.72);
}

/* The manager's way into a usergroup page: a pill per usergroup, carrying its
   name rather than a generic label. */
.sidebar__manage {
  margin-top: 0.3rem;
  padding: 0.3rem 0.75rem;
  border: 1px solid rgba(249, 115, 22, 0.55);
  border-radius: 999px;
  color: #ffd9b8;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar__manage:hover {
  background: rgba(249, 115, 22, 0.16);
  color: #fff;
}

/* The usergroup whose page is open keeps a filled pill. */
.sidebar__manage--active {
  background: rgba(249, 115, 22, 0.16);
  border-color: var(--orange-500);
  color: #fff;
}

.sidebar__rule {
  height: 2px;
  margin: 1rem 0.4rem;
  border: 0;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.45);
}

/* --------------------------------------------------------------------------
   A usergroup's own page
   Its identity, a summary of what it is, and the options its manager holds.
   -------------------------------------------------------------------------- */

.usergroup-head {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}

.usergroup-head .page-title,
.usergroup-head .page-lead {
  margin: 0;
}

.summary {
  display: grid;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.summary__row {
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.75rem;
}

.summary__row dt {
  margin: 0;
  font-weight: 600;
  color: var(--text-muted);
}

.summary__row dd {
  margin: 0;
}

.card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1rem;
}

.data-table {
  width: 100%;
  border-collapse: collapse;
}

.data-table th,
.data-table td {
  padding: 0.5rem 0.6rem;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.data-table th {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.data-table tr:last-child td {
  border-bottom: 0;
}

/* Sticks under the navbar, clearing the panel's top margin and padding. */
.sidebar__nav {
  position: sticky;
  top: calc(var(--navbar-height) + 2.5rem);
  display: grid;
  gap: 0.2rem;
}

.sidebar__heading {
  margin: 0 0 0.75rem;
  padding: 0 0.4rem 0.6rem;
  /* The brand accent anchors the section title above the item rules. */
  border-bottom: 2px solid var(--orange-500);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  /* --text-muted is tuned for light surfaces and vanishes on navy. */
  color: rgba(231, 237, 248, 0.72);
}

.sidebar__link {
  position: relative;
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: var(--radius-sm);
  color: #e7edf8;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

/* The orange marker is a pseudo-element so it never shifts the text. */
.sidebar__link::before {
  content: "";
  position: absolute;
  top: 0.35rem;
  bottom: 0.35rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: transparent;
  transition: background 0.15s ease;
}

/* Same hover language as the navbar buttons: a wash of white on navy. */
.sidebar__link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar__link:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

.sidebar__link--active {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.sidebar__link--active::before {
  background: var(--orange-500);
}

/* The rule under every item - faint orange at rest, full strength on hover and
   for the product being viewed. A pseudo-element keeps it out of the layout, so
   items never shift as the rule strengthens. The resting alpha is higher than it
   would be on a light surface, because navy swallows a thin line. */
.sidebar__link::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  bottom: 0;
  left: 0.75rem;
  height: 2px;
  border-radius: 999px;
  background: rgba(249, 115, 22, 0.45);
  transition: background 0.15s ease;
}

.sidebar__link:hover::after {
  background: var(--orange-500);
}

.sidebar__link--active::after {
  background: var(--orange-600);
}

/* A product's modules hang under its own link, so the panel is a tree:
   products, then what the account may open inside them. The rail repeats the
   seam colour, which is what makes the items read as belonging to the product
   above them rather than as products of their own. */
.sidebar__submenu {
  display: grid;
  gap: 0.1rem;
  margin: 0.15rem 0 0.4rem;
  padding-left: 0.75rem;
  border-left: 2px solid rgba(255, 255, 255, 0.16);
}

.sidebar__sublink {
  position: relative;
  display: block;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
  /* A step quieter than the product link it hangs under. */
  color: rgba(231, 237, 248, 0.82);
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}

.sidebar__sublink:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar__sublink:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* The module being viewed marks itself with the accent bar alone: it keeps the
   product's language without carrying its weight. */
.sidebar__sublink--active {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar__sublink--active::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0;
  width: 3px;
  border-radius: 999px;
  background: var(--orange-500);
}

/* --------------------------------------------------------------------------
   Sidebar branches
   The tree folds without a script: a branch is a ``<details>``, so the state
   the server renders is the state the browser paints on its first frame. The
   product's own link stays in the row - the name still opens the product - and
   the caret at the end of the row is the fold control. A submenu such as
   *Girişler* has no page, so its row is a label rather than a link.
   -------------------------------------------------------------------------- */

.sidebar__head {
  display: flex;
  align-items: center;
  /* The caret replaces the marker a ``summary`` draws by itself. */
  list-style: none;
  cursor: pointer;
}

.sidebar__head::-webkit-details-marker {
  display: none;
}

.sidebar__head:focus-visible {
  outline: 2px solid var(--orange-500);
  outline-offset: 2px;
}

/* The product row borrows its look from the leaf links: the link inside it
   carries the wash, the marker and the underline, and takes the whole row bar
   the caret. */
.sidebar__head > .sidebar__link {
  flex: 1 1 auto;
  min-width: 0;
}

/* A submenu row has no link to carry that look, so the row itself does. */
.sidebar__head--group {
  padding: 0.35rem 0.5rem;
  border-radius: var(--radius-sm);
  transition: background 0.15s ease;
}

.sidebar__head--group:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* A submenu is a container, not a page: it reads as a section label above the
   modules it carries. */
.sidebar__label {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(231, 237, 248, 0.72);
}

.sidebar__head--group:hover .sidebar__label {
  color: #fff;
}

/* The fold control: a corner turned into a chevron, so it needs no icon file.
   Its padding is what makes it a target in its own right, next to the link. */
.sidebar__caret {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.5rem;
  color: rgba(231, 237, 248, 0.6);
  transition: color 0.15s ease;
}

.sidebar__caret::before {
  content: "";
  width: 0.36rem;
  height: 0.36rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  /* Points right while the branch is folded, down once it is open. */
  transform: rotate(-45deg);
}

.sidebar__branch[open] > .sidebar__head > .sidebar__caret::before {
  transform: rotate(45deg);
}

.sidebar__head:hover .sidebar__caret {
  color: #fff;
}

/* A submenu's own list sits one level deeper, with a fainter rail than the
   one the product opens. */
.sidebar__submenu .sidebar__submenu {
  margin: 0.1rem 0 0.2rem;
  border-left-color: rgba(255, 255, 255, 0.1);
}

/* When an account has no usergroup for a product, the tree says so instead of
   offering links that could not open. */
.sidebar__hint {
  margin: 0.2rem 0;
  padding: 0.35rem 0.6rem;
  font-size: 0.78rem;
  color: rgba(231, 237, 248, 0.6);
}

/* --------------------------------------------------------------------------
   Sign-in form
   -------------------------------------------------------------------------- */

.login-card {
  max-width: 360px;
}

.login-card h1 {
  margin: 0 0 1rem;
  font-size: 1.5rem;
  color: var(--navy-700);
}

.field {
  display: grid;
  gap: 0.35rem;
  margin-bottom: 1rem;
}

.field label {
  font-size: 0.875rem;
  font-weight: 600;
}

input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="search"],
input[type="number"],
select,
textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="date"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--navy-600);
  box-shadow: 0 0 0 3px rgba(26, 66, 135, 0.12);
}

textarea {
  min-height: 4rem;
  resize: vertical;
}

input[type="file"] {
  width: 100%;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 1.1rem;
  border: none;
  border-radius: var(--radius);
  background: var(--orange-500);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.button-primary:hover {
  background: var(--orange-600);
}

/* --------------------------------------------------------------------------
   Content pages (Ürünlerimiz, Yardım)
   -------------------------------------------------------------------------- */

/* The head of a page: one band, with the brand accent down its left edge, so
   every page opens the same way. */
.page-header {
  margin: 0 0 1.5rem;
  padding: 1.1rem 1.35rem 1.15rem 1.4rem;
  border: 1px solid var(--border);
  border-left: 4px solid var(--orange-500);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.eyebrow {
  display: inline-block;
  margin: 0 0 0.5rem;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: var(--orange-100);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--orange-600);
}

.page-title {
  margin: 0 0 0.35rem;
  font-size: 1.6rem;
  letter-spacing: -0.01em;
  color: var(--navy-800);
}

.page-lead {
  margin: 0;
  max-width: 72ch;
  font-size: 0.9rem;
  color: var(--text-muted);
}

/* A heading for a section of a page, under the page header. */
.section-title {
  margin: 1.5rem 0 0.75rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-700);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.card {
  display: block;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange-500);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(8, 23, 51, 0.1);
}

.card__title {
  margin: 0 0 0.2rem;
  font-size: 1.05rem;
  color: var(--navy-800);
}

.card__meta {
  margin: 0 0 0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.card__cta {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--orange-600);
}

.prose {
  max-width: 62ch;
}

.prose h2 {
  margin: 1.75rem 0 0.4rem;
  font-size: 1.05rem;
  color: var(--navy-700);
}

.prose h2:first-child {
  margin-top: 0;
}

.prose p {
  margin: 0 0 0.5rem;
}

/* --------------------------------------------------------------------------
   Secondary and danger buttons
   -------------------------------------------------------------------------- */

.button-secondary,
.button-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 36px;
  padding: 0 0.9rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--navy-700);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.button-secondary:hover {
  background: var(--surface-alt);
  border-color: var(--navy-600);
}

.button-danger {
  border-color: #f0c4c4;
  color: #b91c1c;
}

.button-danger:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.field__error {
  margin: 0;
  font-size: 0.8rem;
  color: #b91c1c;
}

/* --------------------------------------------------------------------------
   Personel kartı (Lojistik ve Teknik İşler > Personel)
   -------------------------------------------------------------------------- */

/* The toolbar over the list: search on the left, the way in on the right. */
.arac-cubugu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.arama {
  display: flex;
  flex: 1 1 320px;
  gap: 0.5rem;
}

.arama input[type="search"] {
  max-width: 32rem;
}

/* Tables: the list and the documents on a card. */
.tablo {
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  border-collapse: collapse;
}

.tablo th {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface-alt);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: left;
  color: var(--text-muted);
}

.tablo td {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.tablo tbody tr:last-child td {
  border-bottom: none;
}

.tablo tbody tr:hover {
  background: var(--surface-alt);
}

.tablo--compact th,
.tablo--compact td {
  padding: 0.5rem 0.7rem;
  font-size: 0.9rem;
}

.tablo__ad {
  font-weight: 600;
  color: var(--navy-800);
  text-decoration: none;
}

.tablo__ad:hover {
  text-decoration: underline;
}

.tablo__alt {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.tablo__sag {
  text-align: right;
}

/* Status chips: which documents are in order, at a glance. */
.cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin: 0;
}

.cip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-alt);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-muted);
  white-space: nowrap;
}

.cip--tamam {
  border-color: #bbf7d0;
  background: #f0fdf4;
  color: #15803d;
}

.cip--uyari {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

.cip--genis {
  font-weight: 500;
  color: var(--text);
}

/* The card, read-only. */
.kart {
  display: grid;
  gap: 1.25rem;
}

.kart__baslik {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: center;
  padding: 1.5rem;
  border: 1px solid var(--border);
  border-top: 3px solid var(--orange-500);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.kart__kim {
  flex: 1 1 18rem;
}

.kart__kim .page-title {
  margin-bottom: 0.25rem;
}

.kart__eylem {
  display: flex;
  gap: 0.5rem;
  margin-left: auto;
}

.kart__izgara {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: 1.25rem;
}

.kart__dip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* The photo: encrypted in the row, streamed by the view that guards it. */
.foto {
  display: grid;
  place-items: center;
  width: 7rem;
  height: 9rem;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-alt);
}

.foto--buyuk {
  width: 8.5rem;
  height: 11rem;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.foto__bos {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--navy-600);
}

.foto__bos--yazi {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* A section of a card or of the form. */
.bolum {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.bolum--genis {
  grid-column: 1 / -1;
}

.bolum__baslik {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: baseline;
  justify-content: space-between;
}

.bolum__baslik .section-title {
  margin-top: 0;
}

.bolum__alanlar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: 1rem;
  /* Fields keep their own height: a tall one next to a short one must not
     stretch it. */
  align-items: start;
}

/* The "doğrulandı" line: above the inputs, with a rule under it. */
.bolum__onaylar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  align-items: center;
  padding-bottom: 0.7rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.bolum__onaylar .field {
  margin-bottom: 0;
}

.sorgula {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--orange-600);
  text-decoration: none;
}

.sorgula:hover {
  text-decoration: underline;
}

/* Fields: the shared bits every card form needs. */
.zorunlu {
  color: var(--orange-600);
  font-weight: 700;
}

.field__yardim {
  margin: 0;
  font-size: 0.78rem;
  color: var(--text-muted);
}

.field--hata input,
.field--hata select,
.field--hata textarea {
  border-color: #dc2626;
}

.field--onay .onay {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  font-size: 0.875rem;
  font-weight: 600;
}

.onay input {
  width: auto;
}

/* A checkbox list (ehliyet sınıfları, SRC) as a grid of tickable lines. */
.secmeli {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 0.25rem 1rem;
}

.secmeli label {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  font-size: 0.85rem;
  font-weight: 500;
}

.secmeli input {
  width: auto;
}

.ipucu {
  margin: 0.6rem 0 0;
  padding: 0.5rem 0.7rem;
  border-left: 3px solid var(--navy-600);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: var(--surface-alt);
  font-size: 0.78rem;
  color: var(--text-muted);
}

/* The same note, sitting inside a row of ticks rather than under a field. */
.ipucu--satir {
  margin: 0;
  padding: 0.1rem 0.6rem;
  border-left-width: 2px;
  background: transparent;
  border-radius: 0;
}

.form-hatalari {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem 0.75rem 2rem;
  border: 1px solid #fecaca;
  border-radius: var(--radius);
  background: #fef2f2;
  color: #b91c1c;
}

/* Read-only data on the card. */
.veri {
  display: grid;
  gap: 0.75rem;
  margin: 0;
}

.veri div {
  display: grid;
  gap: 0.15rem;
}

.veri dt {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.veri dd {
  margin: 0;
  font-size: 0.95rem;
  color: var(--navy-800);
}

.veri__ek {
  font-size: 0.78rem;
  color: var(--text-muted);
}

.metin {
  margin: 0;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-alt);
  font: inherit;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
}

/* The card's form: photo on the left, sections on the right, actions below. */
.kart-form {
  display: grid;
  gap: 1.25rem;
}

.kart-form__govde {
  display: grid;
  grid-template-columns: 15rem minmax(0, 1fr);
  gap: 1.25rem;
  align-items: start;
}

.kart-form__yan {
  position: sticky;
  top: calc(var(--navbar-height) + 1rem);
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.kart-form__ana {
  display: grid;
  gap: 1.25rem;
}

.kart-form__eylem {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 -2px 12px rgba(8, 23, 51, 0.06);
}

@media (max-width: 900px) {
  .kart-form__govde {
    grid-template-columns: minmax(0, 1fr);
  }

  .kart-form__yan {
    position: static;
  }
}

/* Printing a card leaves out the chrome and the buttons. */
@media print {
  .navbar,
  .sidebar,
  .messages,
  .kart__eylem,
  .kart-form__eylem {
    display: none !important;
  }

  .layout {
    display: block;
  }

  .kart__baslik,
  .bolum {
    box-shadow: none;
    break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   Mail
   -------------------------------------------------------------------------- */

.mail {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.mail__folders {
  position: sticky;
  top: calc(var(--navbar-height) + 2rem);
  display: grid;
  gap: 0.15rem;
}

.mail__compose {
  margin-bottom: 0.75rem;
}

.mail__folder {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--radius-sm);
  color: var(--navy-700);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}

.mail__folder:hover {
  background: var(--surface-alt);
}

.mail__folder--active {
  background: var(--surface-alt);
  box-shadow: inset 3px 0 0 var(--orange-500);
}

.mail__count {
  min-width: 1.4rem;
  padding: 0 0.35rem;
  border-radius: 999px;
  background: var(--navy-700);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  text-align: center;
}

.mail__main {
  min-width: 0;
}

.mail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1rem;
}

.mail__search {
  display: flex;
  gap: 0.4rem;
}

.mail__search input {
  height: 36px;
  padding: 0 0.6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.875rem;
}

.mail__toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.9rem;
}

.mail__inline {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
}

.mail__table {
  width: 100%;
  border-collapse: collapse;
}

.mail__row {
  border-bottom: 1px solid var(--border);
}

.mail__row:hover {
  background: var(--surface-alt);
}

.mail__row--unread .mail__subject {
  font-weight: 700;
}

.mail__row td {
  padding: 0.65rem 0.5rem;
  vertical-align: top;
}

.mail__cell-check,
.mail__cell-star {
  width: 1.75rem;
}

.mail__cell-date {
  width: 6.5rem;
  text-align: right;
  white-space: nowrap;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.mail__star {
  border: 0;
  background: none;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  color: #cbd5e1;
}

.mail__star--on {
  color: var(--orange-500);
}

.mail__subject {
  color: var(--navy-700);
  font-weight: 600;
  text-decoration: none;
}

.mail__subject:hover {
  color: var(--orange-600);
}

.mail__meta {
  margin: 0.1rem 0 0;
  font-size: 0.8rem;
  color: var(--text-muted);
}

.mail__from {
  font-weight: 600;
}

.mail__tag {
  margin-left: 0.4rem;
  padding: 0 0.35rem;
  border-radius: 4px;
  background: var(--orange-100);
  color: var(--orange-600);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
}

.mail__snippet {
  margin: 0.15rem 0 0;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.mail__empty {
  padding: 2rem;
  text-align: center;
  color: var(--text-muted);
}

.mail__pagination {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
}

.mail__message {
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}

.mail__meta-grid {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: 0.25rem 0.75rem;
  margin: 0 0 1rem;
  font-size: 0.875rem;
}

.mail__meta-grid dt {
  color: var(--text-muted);
  font-weight: 600;
}

.mail__meta-grid dd {
  margin: 0;
}

.mail__body {
  margin: 0;
  padding: 0;
  font: inherit;
  white-space: pre-wrap;
  word-break: break-word;
}

.mail__section-title {
  margin: 1.25rem 0 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
}

.mail__attachments ul {
  margin: 0;
  padding-left: 1.1rem;
}

@media (max-width: 900px) {
  .mail {
    grid-template-columns: 1fr;
  }

  .mail__folders {
    position: static;
  }
}