/*
  NPortal tasarım sistemi — Nazali Müşteri Portalı (K23, K24).
  Ölçüler ve renkler PDKS `frontend/src/app/globals.css` kaynaklıdır; koyu tema K106 ile doğrudan eşlenir. Bileşenler `np-`
  önekiyle burada tanımlanır. Renk yalnız token'dan gelir; görünüm ve sayfa dosyalarında sabit renk yazılmaz.
  Kullanım kuralları ve bileşen sözleşmeleri: docs/DESIGN.md. Canlı galeri: /_tasarim (yalnız geliştirme).
*/

/* ==========================================================================
   1. Yazı tipi — genel arayüz Poppins, menü ve dizinler değişken Manrope (PDKS, K102).
   ========================================================================== */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-Regular.woff") format("woff"),
    url("../fonts/poppins/Poppins-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-Medium.woff") format("woff"),
    url("../fonts/poppins/Poppins-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-SemiBold.woff") format("woff"),
    url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-Bold.woff") format("woff"),
    url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
}

/* K111: PDKS giriş başlıklarının kullandığı gerçek Poppins 800, aynı Next/font dosyaları. */
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-ExtraBold-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Poppins";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("../fonts/poppins/Poppins-ExtraBold-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;
}

/* PDKS next/font çıktısındaki aynı Latin ve Latin Extended alt kümeleri; Türkçe karakterler dahildir. */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/Manrope-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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/manrope/Manrope-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: "Manrope Fallback";
  src: local("Arial");
  ascent-override: 103.31%;
  descent-override: 29.07%;
  line-gap-override: 0%;
  size-adjust: 103.19%;
}

/* ==========================================================================
   2. Token'lar
   ========================================================================== */
:root {
  --font-sans: "Poppins", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-directory-ui: "Manrope", "Manrope Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, monospace;

  /* PDKS Page / DirectoryTable: 24 px H1, 16 px panel, 12,8 px tablo, 14,4 px gövde. */
  --fs-eyebrow: 0.66rem;
  --fs-2xs: 0.7rem;
  --fs-xs: 0.75rem;
  --fs-sm: 0.8rem;
  --fs-base: 0.9rem;
  --fs-md: 1rem;
  --fs-card-title: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: 1.375rem;
  --fs-h1: 1.5rem;
  --fs-stat: 1.5rem;
  --fs-subtitle: 0.86rem;
  --fs-table-heading: 0.68rem;
  --fs-table-title: 0.82rem;
  --fs-table-detail: 0.75rem;
  --lh-tight: 1.25;
  --lh-base: 1.55;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;

  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-control: 10px;
  --radius-menu: 12px;
  --radius-card: 14px;
  --radius-modal: 18px;
  --radius-pill: 999px;

  /* Düğme ve giriş yükseklikleri: 32 / 36 / 40 / 44 px. */
  --control-xs: 2rem;
  --control-sm: 2.25rem;
  --control-md: 2.5rem;
  --control-lg: 2.75rem;
  --field-height: var(--control-sm);
  --filter-height: 38px;

  /* Bileşen ölçüleri: globals.css, shell/page.tsx ve data/directory-table.module.css. */
  --panel-padding: 20px;
  --page-header-gap: 24px;
  --table-cell-padding: 10px 13px;
  --table-row-height: 66px;
  --table-edge-padding: 18px;
  --directory-weight-heading: 720;
  --directory-weight-label: 520;

  /* Odak halkası (DESIGN.md §9): her etkileşimli öğede 2 px, 2 px aralıklı; renk temadan (açıkta 5,1:1, koyuda 7,4:1). */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  /* Dokunmatik ekranda en küçük dokunma hedefi (WCAG 2.5.5 düzeyi; DESIGN.md §9). */
  --touch-target: 44px;

  /* Kabuk geometrisi (EKRANLAR.md §1). */
  --sidebar-width: 272px;
  --topbar-height: 72px;
  --page-gutter: 16px;
  --content-max: 1580px;
  --drawer-width: 460px;

  /* Hareket: tek eğri, yaylanma yok; hareket azaltma tercihinde kapanır. */
  --motion-ease: cubic-bezier(0.2, 0.65, 0.25, 1);
  --motion-fast: 160ms;
  --motion-enter: 240ms;
  --motion-exit: 140ms;
  --motion-rows: 280ms;
  --motion-section: 340ms;

  --z-sticky: 20;
  --z-topbar: 30;
  --z-drawer: 40;
  --z-menu: 50;
  --z-nav: 60;
  --z-toast: 80;
}

/* Açık tema (varsayılan). İç içe `[data-theme]` kapsamları da desteklenir (galeri). */
:root,
[data-theme="light"] {
  color-scheme: light;
  --bg: #f3f6f9;
  --surface: #ffffff;
  --surface-2: #f8fbfd;
  --surface-3: #eef5fa;
  --line: #e5ebf1;
  --line-strong: #d8e0e8;
  --text: #172536;
  /* AA metin varyantı: bütün açık yüzeylerde ≥ 4,6:1 (PDKS #667587 zeminde 4,3:1 kalıyordu; o değer --neutral'dır). */
  --text-muted: #5e6d7f;

  --brand: #005198;
  --brand-soft: #e9f3fb;
  --brand-strong: #003d73;
  --brand-bright: #0870c5;
  --brand-fg: #ffffff;
  --on-solid: #ffffff;
  --focus-ring: var(--brand-bright);

  /* K106: PDKS bileşen renkleri; normal ve hover aynı tema kaynağından gelir. */
  --button-primary-hover: var(--brand-strong);
  --button-secondary-hover: color-mix(in srgb, var(--brand-soft) 88%, var(--brand));
  --button-secondary-expanded: var(--button-secondary-hover);
  --button-outline-bg: var(--surface);
  --button-outline-border: var(--line-strong);
  --button-outline-hover: var(--surface-2);
  --button-outline-expanded: var(--button-outline-hover);
  --button-outline-hover-border: color-mix(in srgb, var(--brand-bright) 45%, var(--line-strong));
  --button-outline-hover-text: var(--brand-strong);
  --button-brand-border: color-mix(in srgb, var(--brand-bright) 55%, var(--line-strong));
  --button-brand-text: var(--brand);
  --button-brand-hover: var(--brand-soft);
  --button-brand-expanded: var(--button-brand-hover);
  --button-brand-hover-border: var(--brand-bright);
  --button-ghost-text: var(--text-muted);
  --button-ghost-hover: var(--surface-3);
  --button-ghost-expanded: var(--surface-3);
  --button-danger-bg: var(--danger-soft);
  --button-danger-text: var(--danger-ink);
  --button-danger-hover: color-mix(in srgb, var(--danger-soft) 80%, var(--danger));
  --button-link-hover: var(--brand-strong);
  --button-hover-transform: translateY(-1px);
  --button-active-transform: translateY(1px) scale(0.98);
  --field-bg: var(--surface);
  --field-border: var(--line-strong);
  --field-hover-border: color-mix(in srgb, var(--brand-bright) 30%, var(--line-strong));
  --field-disabled-bg: var(--surface-2);
  --field-disabled-text: var(--text-muted);
  --field-disabled-opacity: 0.7;
  --choice-bg: var(--surface);
  --choice-border: var(--line-strong);
  --select-hover-border: color-mix(in srgb, var(--brand-bright) 30%, var(--line-strong));
  --switch-bg: var(--line-strong);
  --switch-thumb: var(--surface);

  --success: #168552;
  --success-soft: #e8f6ee;
  --success-ink: #0f6b41;
  --danger: #c23f38;
  --danger-soft: #fdecea;
  --danger-ink: #a5302a;
  --warning: #b96b00;
  --warning-soft: #fff3e0;
  --warning-ink: #8f5300;
  --info: #1f6bb0;
  --info-soft: #e9f3fb;
  --info-ink: #1a5c98;
  --critical: #6b21a8;
  --critical-soft: #e2c6f4;
  --critical-ink: #5b1890;
  --neutral: #667587;
  --neutral-soft: #eef2f6;
  --neutral-ink: #4a5a6b;

  --ink: #172536;
  --ink-fg: #ffffff;

  --nav-text: #31485b;
  --nav-muted: #667587;
  --nav-brand: #005198;
  --nav-brand-soft: #e9f3fb;
  --nav-brand-strong: #003d73;
  --nav-brand-bright: #0870c5;
  --nav-surface: #ffffff;
  --nav-active: linear-gradient(90deg, var(--nav-brand-soft), color-mix(in srgb, var(--nav-brand-soft) 48%, var(--nav-surface)));
  --nav-active-text: var(--nav-brand);
  --sidebar-subtitle: #526779;
  --nav-scroll-up: linear-gradient(to bottom, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, transparent), transparent);
  --nav-scroll-down: linear-gradient(to top, var(--surface-2), color-mix(in srgb, var(--surface-2) 80%, transparent), transparent);
  --shadow-nav-scroll: 0 9px 20px -12px rgba(14, 55, 88, 0.75);
  --nav-icon: #52697a;
  --logo-tile: #e9f3fb;
  --overlay: rgba(16, 30, 45, 0.42);
  --thead-bg: color-mix(in srgb, var(--surface-2) 76%, var(--surface));
  --table-soft: #f8fafc;
  --table-cell: #40566b;
  --table-heading: #60758a;
  --filter-meta: #63788b;
  --search-icon: #657b90;
  --search-placeholder: #74879a;
  --search-focus-shadow: 0 0 0 3px rgba(0, 81, 152, 0.09);
  --table-identity: #1f384e;
  --table-hover: #f7fbff;
  --sidebar-bg: radial-gradient(420px 260px at 12% -8%, color-mix(in srgb, var(--brand-bright) 10%, transparent), transparent 62%), var(--surface-2);
  --page-glow: none;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667587' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --shadow-card: none;
  --shadow-panel: none;
  --shadow-float: 0 24px 64px -28px rgba(12, 34, 54, 0.5);
  --shadow-menu: 0 12px 32px -8px rgba(12, 34, 54, 0.18), 0 3px 8px -3px rgba(12, 34, 54, 0.1);
  --shadow-sidebar: 12px 0 34px -30px rgba(19, 57, 87, 0.35);
  --shadow-toast: 0 4px 12px rgb(0 0 0 / 10%);
  --shadow-avatar: none;
  --shadow-primary: none;
  --shadow-role-pill: none;

  --toast-success-bg: hsl(143 85% 96%);
  --toast-success-border: hsl(145 92% 87%);
  --toast-success-text: hsl(140 100% 27%);
  --toast-info-bg: hsl(208 100% 97%);
  --toast-info-border: hsl(221 91% 93%);
  --toast-info-text: hsl(210 92% 45%);
  --toast-warning-bg: hsl(49 100% 97%);
  --toast-warning-border: hsl(49 91% 84%);
  --toast-warning-text: hsl(31 92% 45%);
  --toast-error-bg: hsl(359 100% 97%);
  --toast-error-border: hsl(359 100% 94%);
  --toast-error-text: hsl(360 100% 45%);

  /* Yazdırma temadan bağımsız beyaz zemindir. */
  --print-bg: #fff;
}

/* Koyu tema: PDKS portalının koyu yüzeyleri ve mavi vurguları (K106). `system` bloğuyla birebir aynı tutulur. */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: #171717;
  --surface: #212121;
  --surface-2: #292929;
  --surface-3: #303030;
  --line: #363636;
  --line-strong: #464646;
  --text: #ececec;
  --text-muted: #a6a6a6;

  --brand: #5ba9df;
  --brand-soft: #292f33;
  --brand-strong: #82c1ea;
  --brand-bright: #70b8e7;
  --brand-fg: #111111;
  --on-solid: #111111;
  --focus-ring: var(--brand-bright);

  /* K106: PDKS bileşen renkleri; normal ve hover aynı tema kaynağından gelir. */
  --button-primary-hover: color-mix(in oklab, var(--brand) 80%, transparent);
  --button-secondary-hover: color-mix(in oklch, var(--brand-soft), var(--text) 5%);
  --button-secondary-expanded: var(--brand-soft);
  --button-outline-bg: color-mix(in oklab, var(--line) 30%, transparent);
  --button-outline-border: var(--line);
  --button-outline-hover: color-mix(in oklab, var(--line) 50%, transparent);
  --button-outline-expanded: var(--button-outline-bg);
  --button-outline-hover-border: var(--line);
  --button-outline-hover-text: var(--text);
  --button-brand-border: color-mix(in oklab, var(--brand-bright) 45%, transparent);
  --button-brand-text: var(--text);
  --button-brand-hover: color-mix(in oklab, var(--line) 50%, transparent);
  --button-brand-expanded: var(--button-outline-bg);
  --button-brand-hover-border: color-mix(in oklab, var(--brand-bright) 70%, transparent);
  --button-ghost-text: var(--text);
  --button-ghost-hover: color-mix(in oklab, var(--surface-2) 50%, transparent);
  --button-ghost-expanded: var(--surface-2);
  --button-danger-bg: color-mix(in oklab, var(--danger) 20%, transparent);
  --button-danger-text: var(--danger);
  --button-danger-hover: color-mix(in oklab, var(--danger) 30%, transparent);
  --button-link-hover: var(--brand);
  --button-hover-transform: translateY(-1px);
  --button-active-transform: translateY(1px) scale(0.98);
  --field-bg: var(--surface);
  --field-border: var(--line-strong);
  --field-hover-border: var(--line-strong);
  --field-disabled-bg: var(--surface);
  --field-disabled-text: var(--text);
  --field-disabled-opacity: 0.5;
  --choice-bg: color-mix(in oklab, var(--line) 30%, transparent);
  --choice-border: var(--line);
  --select-hover-border: var(--line-strong);
  --switch-bg: color-mix(in oklab, var(--line) 80%, transparent);
  --switch-thumb: var(--text);

  --success: #61bd8a;
  --success-soft: #213129;
  --success-ink: var(--success);
  --danger: #ef8580;
  --danger-soft: #382524;
  --danger-ink: var(--danger);
  --warning: #e9b665;
  --warning-soft: #352d21;
  --warning-ink: var(--warning);
  --info: #76b7e2;
  --info-soft: #292f33;
  --info-ink: var(--info);
  --critical: #d8b4fe;
  --critical-soft: #452259;
  --critical-ink: var(--critical);
  --neutral: #a6a6a6;
  --neutral-soft: #303030;
  --neutral-ink: var(--text-muted);

  --ink: #ececec;
  --ink-fg: #171717;

  --nav-text: var(--text-muted);
  --nav-muted: #a6a6a6;
  --nav-brand: #5ba9df;
  --nav-brand-soft: #292f33;
  --nav-brand-strong: #82c1ea;
  --nav-brand-bright: #70b8e7;
  --nav-surface: #212121;
  --nav-active: linear-gradient(90deg, var(--nav-brand-soft), color-mix(in srgb, var(--nav-brand-soft) 48%, var(--nav-surface)));
  --nav-active-text: var(--nav-brand);
  --sidebar-subtitle: var(--nav-muted);
  --nav-scroll-up: none;
  --nav-scroll-down: none;
  --shadow-nav-scroll: none;
  --nav-icon: #a6a6a6;
  --logo-tile: #e9f3fb;
  --overlay: rgba(0, 0, 0, 0.62);
  --thead-bg: color-mix(in srgb, var(--surface-2) 76%, var(--surface));
  --table-soft: var(--surface-2);
  --table-cell: var(--text);
  --table-heading: var(--text-muted);
  --filter-meta: var(--text-muted);
  --search-icon: #657b90;
  --search-placeholder: #74879a;
  --search-focus-shadow: 0 0 0 3px rgba(0, 81, 152, 0.09);
  --table-identity: var(--text);
  --table-hover: var(--surface-3);
  --sidebar-bg: #171717;
  --page-glow: none;
  --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6a6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

  --shadow-card: 0 10px 32px -24px rgba(0, 0, 0, 0.78);
  --shadow-panel: 0 12px 36px -24px rgba(0, 0, 0, 0.82);
  --shadow-float: 0 28px 72px -26px rgba(0, 0, 0, 0.9);
  --shadow-menu: 0 14px 36px -8px rgba(0, 0, 0, 0.48), 0 3px 10px -3px rgba(0, 0, 0, 0.3);
  --shadow-sidebar: 12px 0 34px -30px rgba(0, 0, 0, 0.82);
  --shadow-toast: 0 4px 12px rgb(0 0 0 / 10%);
  --shadow-avatar: none;
  --shadow-primary: none;
  --shadow-role-pill: none;

  --toast-success-bg: hsl(150 100% 6%);
  --toast-success-border: hsl(147 100% 12%);
  --toast-success-text: hsl(150 86% 65%);
  --toast-info-bg: hsl(215 100% 6%);
  --toast-info-border: hsl(223 43% 17%);
  --toast-info-text: hsl(216 87% 65%);
  --toast-warning-bg: hsl(64 100% 6%);
  --toast-warning-border: hsl(60 100% 9%);
  --toast-warning-text: hsl(46 87% 65%);
  --toast-error-bg: hsl(358 76% 10%);
  --toast-error-border: hsl(357 89% 16%);
  --toast-error-text: hsl(358 100% 81%);

  --print-bg: #fff;
}

/* "Sistem" tercihi betiksiz çözülür: işletim sistemi koyuysa koyu token'lar uygulanır. */
@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    color-scheme: dark;
    --bg: #171717;
    --surface: #212121;
    --surface-2: #292929;
    --surface-3: #303030;
    --line: #363636;
    --line-strong: #464646;
    --text: #ececec;
    --text-muted: #a6a6a6;

    --brand: #5ba9df;
    --brand-soft: #292f33;
    --brand-strong: #82c1ea;
    --brand-bright: #70b8e7;
    --brand-fg: #111111;
    --on-solid: #111111;
    --focus-ring: var(--brand-bright);

    /* K106: PDKS bileşen renkleri; normal ve hover aynı tema kaynağından gelir. */
    --button-primary-hover: color-mix(in oklab, var(--brand) 80%, transparent);
    --button-secondary-hover: color-mix(in oklch, var(--brand-soft), var(--text) 5%);
    --button-secondary-expanded: var(--brand-soft);
    --button-outline-bg: color-mix(in oklab, var(--line) 30%, transparent);
    --button-outline-border: var(--line);
    --button-outline-hover: color-mix(in oklab, var(--line) 50%, transparent);
    --button-outline-expanded: var(--button-outline-bg);
    --button-outline-hover-border: var(--line);
    --button-outline-hover-text: var(--text);
    --button-brand-border: color-mix(in oklab, var(--brand-bright) 45%, transparent);
    --button-brand-text: var(--text);
    --button-brand-hover: color-mix(in oklab, var(--line) 50%, transparent);
    --button-brand-expanded: var(--button-outline-bg);
    --button-brand-hover-border: color-mix(in oklab, var(--brand-bright) 70%, transparent);
    --button-ghost-text: var(--text);
    --button-ghost-hover: color-mix(in oklab, var(--surface-2) 50%, transparent);
    --button-ghost-expanded: var(--surface-2);
    --button-danger-bg: color-mix(in oklab, var(--danger) 20%, transparent);
    --button-danger-text: var(--danger);
    --button-danger-hover: color-mix(in oklab, var(--danger) 30%, transparent);
    --button-link-hover: var(--brand);
    --button-hover-transform: translateY(-1px);
    --button-active-transform: translateY(1px) scale(0.98);
    --field-bg: var(--surface);
    --field-border: var(--line-strong);
    --field-hover-border: var(--line-strong);
    --field-disabled-bg: var(--surface);
    --field-disabled-text: var(--text);
    --field-disabled-opacity: 0.5;
    --choice-bg: color-mix(in oklab, var(--line) 30%, transparent);
    --choice-border: var(--line);
    --select-hover-border: var(--line-strong);
    --switch-bg: color-mix(in oklab, var(--line) 80%, transparent);
    --switch-thumb: var(--text);

    --success: #61bd8a;
    --success-soft: #213129;
    --success-ink: var(--success);
    --danger: #ef8580;
    --danger-soft: #382524;
    --danger-ink: var(--danger);
    --warning: #e9b665;
    --warning-soft: #352d21;
    --warning-ink: var(--warning);
    --info: #76b7e2;
    --info-soft: #292f33;
    --info-ink: var(--info);
    --critical: #d8b4fe;
    --critical-soft: #452259;
    --critical-ink: var(--critical);
    --neutral: #a6a6a6;
    --neutral-soft: #303030;
    --neutral-ink: var(--text-muted);

    --ink: #ececec;
    --ink-fg: #171717;

    --nav-text: var(--text-muted);
    --nav-muted: #a6a6a6;
    --nav-brand: #5ba9df;
    --nav-brand-soft: #292f33;
    --nav-brand-strong: #82c1ea;
    --nav-brand-bright: #70b8e7;
    --nav-surface: #212121;
    --nav-active: linear-gradient(90deg, var(--nav-brand-soft), color-mix(in srgb, var(--nav-brand-soft) 48%, var(--nav-surface)));
    --nav-active-text: var(--nav-brand);
    --sidebar-subtitle: var(--nav-muted);
    --nav-scroll-up: none;
    --nav-scroll-down: none;
    --shadow-nav-scroll: none;
    --nav-icon: #a6a6a6;
    --logo-tile: #e9f3fb;
    --overlay: rgba(0, 0, 0, 0.62);
    --thead-bg: color-mix(in srgb, var(--surface-2) 76%, var(--surface));
    --table-soft: var(--surface-2);
    --table-cell: var(--text);
    --table-heading: var(--text-muted);
    --filter-meta: var(--text-muted);
    --search-icon: #657b90;
    --search-placeholder: #74879a;
    --search-focus-shadow: 0 0 0 3px rgba(0, 81, 152, 0.09);
    --table-identity: var(--text);
    --table-hover: var(--surface-3);
    --sidebar-bg: #171717;
    --page-glow: none;
    --select-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a6a6a6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");

    --shadow-card: 0 10px 32px -24px rgba(0, 0, 0, 0.78);
    --shadow-panel: 0 12px 36px -24px rgba(0, 0, 0, 0.82);
    --shadow-float: 0 28px 72px -26px rgba(0, 0, 0, 0.9);
    --shadow-menu: 0 14px 36px -8px rgba(0, 0, 0, 0.48), 0 3px 10px -3px rgba(0, 0, 0, 0.3);
    --shadow-sidebar: 12px 0 34px -30px rgba(0, 0, 0, 0.82);
    --shadow-toast: 0 4px 12px rgb(0 0 0 / 10%);
    --shadow-avatar: none;
    --shadow-primary: none;
    --shadow-role-pill: none;

    --toast-success-bg: hsl(150 100% 6%);
    --toast-success-border: hsl(147 100% 12%);
    --toast-success-text: hsl(150 86% 65%);
    --toast-info-bg: hsl(215 100% 6%);
    --toast-info-border: hsl(223 43% 17%);
    --toast-info-text: hsl(216 87% 65%);
    --toast-warning-bg: hsl(64 100% 6%);
    --toast-warning-border: hsl(60 100% 9%);
    --toast-warning-text: hsl(46 87% 65%);
    --toast-error-bg: hsl(358 76% 10%);
    --toast-error-border: hsl(357 89% 16%);
    --toast-error-text: hsl(358 100% 81%);

    --print-bg: #fff;
  }
}

@media (min-width: 640px) {
  :root {
    --page-gutter: 24px;
  }
}

/* Laptoplarda menü açık kalır; içerik gereksiz dış boşluklardan alan kazanır. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  :root {
    --sidebar-width: 248px;
    --topbar-height: 64px;
    --drawer-width: 420px;
  }
}

@media (min-width: 1440px) {
  :root {
    --page-gutter: clamp(22px, 3vw, 46px);
  }
}

/* ==========================================================================
   3. Temel
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* PDKS kökü ekran yüksekliğinde kalır; uzun içerik belge üzerinde kayar. */
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--bg);
}

body {
  display: flex;
  flex-direction: column;
  margin: 0;
  min-width: 0;
  min-height: 100%;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 400;
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--text);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  text-wrap: balance;
}

p,
figure,
blockquote {
  margin: 0;
}

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: var(--brand);
  text-decoration: none;
}

a:hover {
  color: var(--brand-strong);
}

img,
video {
  max-width: 100%;
  height: auto;
}

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

button {
  cursor: pointer;
}

button:disabled {
  cursor: not-allowed;
}

table {
  border-collapse: collapse;
}

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

hr {
  height: 0;
  margin: var(--space-5) 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* Odak halkası her etkileşimli öğede görünür (EKRANLAR.md §6). Bileşenler halkayı kapatmaz; yalnız konumunu (iç kenar) değiştirebilir. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* Betikle odaklanan etkileşimsiz başlık ve kapsayıcılar (app.js data-np-focus-target ile işaretler; pencere, yan panel) halka
   çizmez. Klavyeyle gezilen öğeler (tabindex="-1" taşıyan ağaç satırı, menü öğesi) halkayı korur. */
[data-np-focus-target]:focus,
.np-drawer:focus,
.np-modal:focus {
  outline: none;
}

::selection {
  background: color-mix(in srgb, var(--brand) 22%, transparent);
}

[hidden] {
  display: none !important;
}

/* Alpine başlamadan önce gizli kalması gereken öğeler. */
[x-cloak] {
  display: none !important;
}

/* İnce, kurumsal kaydırma dili: tablo, pencere, liste ve metin alanlarında ortak. */
:where(*) {
  scrollbar-color: color-mix(in srgb, var(--brand) 42%, var(--line-strong)) transparent;
  scrollbar-width: thin;
}

:where(*)::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}

:where(*)::-webkit-scrollbar-track {
  background: transparent;
}

:where(*)::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 38%, var(--line-strong));
  background-clip: padding-box;
}

.np-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.np-skip {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: calc(var(--z-toast) + 1);
  padding: 10px 16px;
  border-radius: var(--radius-control);
  background: var(--brand);
  color: var(--brand-fg);
  font-weight: 600;
  transform: translateY(-160%);
}

.np-skip:focus {
  transform: none;
  color: var(--brand-fg);
}

.np-icon {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

.np-tabular {
  font-variant-numeric: tabular-nums;
}

.np-theme-scope {
  background: var(--bg);
  color: var(--text);
}

/* Dönen gösterge: düğme yükleme durumu ve otomatik kayıt. */
.np-spinner {
  display: inline-block;
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: np-spin 0.7s linear infinite;
}

@keyframes np-spin {
  to {
    transform: rotate(360deg);
  }
}

/* htmx göstergeleri: htmx'in satır içi stilleri kapalıdır (app.js), kurallar buradadır. */
.htmx-indicator {
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
}

/* Değiştirilen içerik kısa belirme geçişi alır; `np-swap` hedef kapsayıcıya verilir. */
.np-swap > * {
  transition: opacity var(--motion-enter) var(--motion-ease), transform var(--motion-enter) var(--motion-ease);
}

.np-swap > .htmx-added {
  opacity: 0;
  transform: translateY(4px);
}

/* ==========================================================================
   4. Yerleşim yardımcıları (az ve anlamlı; sayfa özel yerleşimi bileşenle kurulur)
   ========================================================================== */
.np-stack {
  display: flex;
  flex-direction: column;
  gap: var(--np-gap, var(--space-4));
  min-width: 0;
}

.np-stack--xs {
  --np-gap: var(--space-1);
}

.np-stack--sm {
  --np-gap: var(--space-2);
}

.np-stack--md {
  --np-gap: var(--space-3);
}

.np-stack--lg {
  --np-gap: var(--space-6);
}

.np-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--np-gap, var(--space-2));
  min-width: 0;
}

.np-cluster--end {
  justify-content: flex-end;
}

/* Seçenek dizisi (radyo, onay kutusu): seçim düğmesi bir önceki seçeneğin yazısına yapışık durmaz (K101, UX-17). */
.np-cluster--wide {
  --np-gap: var(--space-2) var(--space-6);
}

.np-between {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-width: 0;
}

.np-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.np-grid {
  display: grid;
  gap: var(--np-gap, var(--space-4));
  grid-template-columns: repeat(auto-fill, minmax(min(100%, var(--np-min, 240px)), 1fr));
}

.np-grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

/* Ana sütun + yan sütun (konsept 01 ve 03): dar alanda alt alta. */
.np-split {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

@container np-page (min-width: 68rem) {
  .np-split {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  }
}

/* Müşteri genel bakışı (konsept 01): 1280 px ve üzerinde bilgi başlıkları + sağ sütun (Sıradaki işlemler, Son değişiklik,
   Nazali ekibine danışın); daha dar ekranda alt alta. */
.np-overview {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.np-overview__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-width: 0;
}

@media (min-width: 1280px) {
  .np-overview {
    grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  }
}

/* K101 (UX-10): tek sütunda müşterinin yapacağı iş bölüm kartlarından önce gelir: "Sıradaki işlemler" en üstte, öteki yan kartlar
   bölümlerden sonra (telefonda on bölüm kartının altına düşüyordu). */
@media (max-width: 1279.98px) {
  .np-overview__aside {
    display: contents;
  }

  .np-overview__next {
    order: -1;
  }
}

.np-section-heading {
  margin-bottom: var(--space-3);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

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

.np-text-sm {
  font-size: var(--fs-sm);
}

.np-text-xs {
  font-size: var(--fs-xs);
}

/* Satır içi ikon/nokta + metin; kırılmaz (tablo hücresi, meta). */
.np-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

/* K101: dar tabloda metin ikonun yanında kırılır (Takip "Görev türü" 1280 genişlikte tabloyu taşırıyordu). */
.np-inline--wrap {
  white-space: normal;
}

.np-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-eyebrow {
  color: var(--text-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

.np-eyebrow--brand {
  color: var(--brand);
}

.np-divider {
  height: 1px;
  margin: var(--space-4) 0;
  border: 0;
  background: var(--line);
}

.np-link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.np-link:hover {
  color: var(--brand-strong);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.np-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.np-meta > * {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.np-meta .np-icon {
  width: 15px;
  height: 15px;
}

.np-prose {
  max-width: 78ch;
  line-height: 1.7;
}

.np-prose > * + * {
  margin-top: 0.85em;
}

.np-prose h2,
.np-prose h3 {
  margin-top: 1.4em;
}

.np-prose ul,
.np-prose ol {
  padding-left: 1.3em;
}

.np-prose a {
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 639.98px) {
  .np-hide-sm {
    display: none !important;
  }
}

@media (min-width: 640px) {
  .np-show-sm {
    display: none !important;
  }
}

/* ==========================================================================
   5. Kabuk: kenar çubuğu (272/248 px; 1024 px altında çekmece), üst çubuk (72/64 px), içerik (en çok 1580 px)
   ========================================================================== */
.np-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: 100dvh;
}

.np-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 100dvh;
}

.np-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  padding: 22px 16px 18px;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background: var(--sidebar-bg);
  box-shadow: var(--shadow-sidebar);
  font-family: var(--font-directory-ui);
  font-weight: 400;
}

.np-sidebar__brand {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 52px;
  padding: 0 6px 18px;
  border-bottom: 1px solid var(--line);
}

/* .np-icon-btn'in display'ini ezmek için ebeveynle birlikte seçilir. */
.np-sidebar__brand > .np-sidebar__close {
  display: none;
}

.np-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: var(--text);
  text-decoration: none;
}

.np-brand:hover {
  color: var(--text);
}

.np-brand__logo,
.np-auth__logo {
  display: block;
  flex: none;
  max-width: 100%;
  height: auto;
}

.np-auth__logo {
  width: clamp(144px, 15vw, 172px);
}

.np-sidebar__navigation {
  position: relative;
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
}

.np-nav {
  flex: 1 1 auto;
  min-height: 0;
  margin-right: -16px;
  padding: 10px 16px 16px 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: none;
}

.np-nav::-webkit-scrollbar {
  display: none;
}

.np-nav__section {
  margin-bottom: 14px;
}

.np-nav__label {
  padding: 18px 12px 7px;
  color: var(--nav-muted);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.np-nav__list {
  display: grid;
  gap: 2px;
}

.np-nav__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 45px;
  padding: 10px 12px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--nav-text);
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.55;
  text-align: left;
  text-decoration: none;
  transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), color 200ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 200ms cubic-bezier(0.4, 0, 0.2, 1), transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.np-nav__icon {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--nav-icon);
  transition: transform 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

.np-nav__text {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  line-height: 1.375;
}

.np-nav__item:hover {
  border-color: color-mix(in srgb, var(--nav-brand) 10%, transparent);
  background: color-mix(in srgb, var(--nav-brand-soft) 65%, transparent);
  color: var(--text);
  transform: translateX(3px);
}

.np-nav__item:hover .np-nav__icon {
  transform: translateX(2px);
}

.np-nav__item[aria-current="page"] {
  font-weight: 650;
  border-color: color-mix(in srgb, var(--nav-brand) 15%, transparent);
  background: var(--nav-active);
  color: var(--nav-active-text);
  transform: none;
}

.np-nav__item[aria-current="page"] .np-nav__icon {
  color: var(--nav-active-text);
  stroke-width: 2.1;
}

/* PDKS: etkin bağlantının sağ kenarında 3 px vurgu ve hafif ışık. */
.np-nav__item[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 10px;
  right: -16px;
  width: 3px;
  height: 24px;
  border-radius: 3px 0 0 3px;
  background: var(--nav-brand-bright);
  box-shadow: 0 0 12px color-mix(in srgb, var(--nav-brand) 24%, transparent);
  pointer-events: none;
}

.np-sidebar__scroll {
  position: absolute;
  inset-inline: 0;
  z-index: 1;
  display: flex;
  justify-content: flex-end;
  height: 48px;
  padding-right: 4px;
  pointer-events: none;
}
.np-sidebar__scroll--up { top: 0; align-items: flex-start; padding-top: 6px; background: var(--nav-scroll-up); }
.np-sidebar__scroll--down { bottom: 0; align-items: flex-end; padding-bottom: 6px; background: var(--nav-scroll-down); }
.np-sidebar__scroll-button {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--nav-brand) 25%, transparent);
  border-radius: 50%;
  background: color-mix(in srgb, var(--nav-surface) 95%, transparent);
  color: var(--nav-brand);
  box-shadow: var(--shadow-nav-scroll);
  pointer-events: auto;
  transition: transform 150ms cubic-bezier(0.4, 0, 0.2, 1), border-color 150ms ease, color 150ms ease;
}
.np-sidebar__scroll-button:hover {
  border-color: color-mix(in srgb, var(--nav-brand) 45%, transparent);
  color: var(--nav-brand-strong);
  transform: translateY(-1px);
}


.np-nav__badge {
  display: inline-grid;
  flex: none;
  place-items: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--nav-brand-soft);
  color: var(--nav-brand-strong);
  font-size: 0.66rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.np-nav__item[aria-current="page"] .np-nav__badge {
  background: var(--nav-brand);
  color: var(--brand-fg);
}

.np-nav form {
  margin: 0;
}

.np-shell__backdrop {
  display: none;
}

/* 1024 px altında kenar çubuğu hamburgerle açılan çekmecedir. */
@media (max-width: 1023.98px) {
  .np-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .np-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    z-index: var(--z-nav);
    width: min(294px, calc(100vw - 48px));
    background: var(--sidebar-bg);
    box-shadow: var(--shadow-float);
    visibility: hidden;
    transform: translateX(-100%);
    transition: transform var(--motion-enter) var(--motion-ease), visibility 0s linear var(--motion-enter);
  }

  .np-shell.is-nav-open .np-sidebar {
    visibility: visible;
    transform: none;
    transition: transform var(--motion-enter) var(--motion-ease), visibility 0s;
  }

  .np-sidebar__brand > .np-sidebar__close {
    display: inline-grid;
  }

  .np-shell__backdrop {
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-nav) - 1);
    display: block;
    background: var(--overlay);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--motion-enter) var(--motion-ease), visibility 0s linear var(--motion-enter);
  }

  .np-shell.is-nav-open .np-shell__backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--motion-enter) var(--motion-ease), visibility 0s;
  }
}

.np-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: var(--topbar-height);
  padding-inline: var(--page-gutter);
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 90%, transparent);
  backdrop-filter: blur(14px);
}

.np-topbar__lead {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.np-topbar__lead > .np-topbar__menu {
  display: none;
}

@media (max-width: 1023.98px) {
  .np-topbar__lead > .np-topbar__menu {
    display: inline-grid;
  }
}

.np-topbar__organization {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
  line-height: 1.3;
}

.np-topbar__organization > .np-icon {
  flex: none;
  color: var(--text-muted);
}

.np-topbar__organization > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-topbar__tools {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 6px;
  border-radius: 15px;
  background: color-mix(in srgb, var(--surface-2) 80%, transparent);
}

.np-topbar__preferences {
  display: flex;
  align-items: center;
}

@media (max-width: 639.98px) {
  .np-topbar {
    gap: 8px;
  }
}

/* Üst çubuk araç düğmesi (dil, tema, zil). */
.np-tool-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.np-tool-btn .np-icon {
  width: 22px;
  height: 22px;
}

.np-tool-btn:hover,
.np-tool-btn[aria-expanded="true"] {
  background: var(--surface-3);
  color: var(--brand-strong);
}

.np-tool-btn .np-chevron {
  width: 14px;
  height: 14px;
}

/* Tema düğmesi: açık temada ay, koyu temada güneş (sunucu `data-theme` yazar, betik gerekmez). */
.np-theme-icon--dark {
  display: none !important;
}

[data-theme="dark"] .np-theme-icon--light {
  display: none !important;
}

[data-theme="dark"] .np-theme-icon--dark {
  display: inline-block !important;
}

@media (prefers-color-scheme: dark) {
  [data-theme="system"] .np-theme-icon--light {
    display: none !important;
  }

  [data-theme="system"] .np-theme-icon--dark {
    display: inline-block !important;
  }
}

.np-theme-form {
  display: contents;
}

/* Zil: okunmamış varsa düğme açık mavi zemin ve sayaç alır. Zemin sayaçtan okunur (görünür #np-bell-count): okunmamış sayısını değiştiren
   yanıtlar düğmenin içeriğini yazar (_ZilGuncelle), düğme ve kapsayıcısı yerinde kalır; son bildirim okununca zemin de kalkar. */
.np-bell > .np-tool-btn:has(.np-count:not([hidden])) {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 7px;
  background: var(--brand);
  color: var(--brand-fg);
  font-size: 0.64rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.np-bell .np-count {
  padding-block-start: 2px;
}

.np-count--soft {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-user__btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 4px 10px 4px 4px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  transition: background-color var(--motion-fast) ease;
}

.np-user__btn:hover,
.np-user__btn[aria-expanded="true"] {
  background: var(--surface-3);
}

.np-user__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-width: min(20rem, 30vw);
}

.np-user__name {
  overflow: hidden;
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.25;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-user__sub {
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.7rem;
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-user__btn .np-chevron {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

/* Telefonda kullanıcı menüsü simgeye iner, araç düğmeleri daralır. */
@media (max-width: 639.98px) {
  .np-user__text,
  .np-user__btn .np-chevron,
  .np-tool-btn .np-chevron {
    display: none;
  }

  .np-user__btn {
    padding: 4px;
  }

  .np-topbar__tools {
    gap: 0;
  }

  .np-tool-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 6px;
  }
}

.np-content {
  container: np-page / inline-size;
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  max-width: var(--content-max);
  margin-inline: auto;
  padding: 30px var(--page-gutter) 52px;
}

.np-content:focus {
  outline: none;
}

@media (min-width: 1024px) and (max-width: 1439.98px) {
  .np-content {
    padding-block: 24px 40px;
  }
}

/* 1440 px ve üzerinde yan panel açıkken içerik daralır, panel tabloyu örtmez; üst çubuk tam genişlikte kalır (konsept 04). */
@media (min-width: 1440px) {
  .np-content {
    transition: margin-right var(--motion-enter) var(--motion-ease), width var(--motion-enter) var(--motion-ease);
  }

  /* İçerik panelin soluna yaslanır (sol kenar boşluğu auto); sayfa boşluğu panelle arasında aralık bırakır. */
  .np-shell.has-drawer .np-content {
    width: calc(100% - var(--drawer-width) - 12px);
    margin-right: calc(var(--drawer-width) + 12px);
  }
}

/* ==========================================================================
   6. Sayfa başlığı ve içerik yolu
   ========================================================================== */
.np-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: var(--page-header-gap);
}

.np-page-header__main {
  position: relative;
  min-width: 0;
}


.np-page-title {
  font-size: var(--fs-h1);
  font-weight: 600;
  line-height: 2rem;
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}

.np-page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.np-page-subtitle {
  max-width: 48rem;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-subtitle);
  line-height: 1.625;
}

.np-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  max-width: 100%;
}

@keyframes np-accent-in {
  from {
    opacity: 0;
    transform: scaleX(0);
  }

  to {
    opacity: 1;
    transform: scaleX(1);
  }
}

.np-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  margin-top: 8px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.np-breadcrumb a {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.np-breadcrumb a:hover {
  color: var(--brand);
}

.np-breadcrumb .np-icon {
  width: 16px;
  height: 16px;
}

.np-breadcrumb__sep {
  width: 14px;
  height: 14px;
  color: var(--line-strong);
}

.np-breadcrumb [aria-current="page"] {
  color: var(--text);
  font-weight: 500;
}

.np-file-header {
  align-items: center;
  gap: var(--space-4);
}

.np-file-header > .np-breadcrumb {
  flex-basis: 100%;
  margin: 0;
}

.np-file-header .np-breadcrumb a {
  gap: var(--space-2);
}

.np-file-header__identity {
  display: flex;
  flex: 1 1 24rem;
  align-items: center;
  gap: var(--space-4);
}

.np-file-header__text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.np-file-header .np-page-title-row {
  gap: var(--space-1) var(--space-3);
}

@container np-page (max-width: 40rem) {
  .np-file-header__identity { gap: var(--space-3); }
  .np-file-header__identity > .np-avatar--tile { width: 48px; height: 48px; }
}

/* ==========================================================================
   7. Kart ve yüzeyler
   ========================================================================== */
.np-card {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-enter) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease);
}

.np-card--pad {
  padding: var(--panel-padding);
}

/* K101 (UX-09): profil sorusu hafif bir kutudur: gölgesiz, dar iç boşluk; adım kartının içinde ikinci bir kart katmanı gibi durmaz.
   Boş rozet satırı çizilmez. Dar sayfada adım kartının gövdesi de daralır. */
.np-question {
  position: relative;
  min-width: 0;
  padding: 20px 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

@container np-page (max-width: 40rem) {
  .np-card,
  .np-table-card {
    --panel-padding: 16px;
  }

  .np-question {
    padding: 16px 0;
  }

  .np-card__body.np-step-body {
    padding: 12px;
  }
}

.np-card--soft {
  border-color: color-mix(in srgb, var(--brand) 12%, var(--line));
  background: color-mix(in srgb, var(--brand-soft) 72%, var(--surface));
  box-shadow: none;
}

.np-card--flat {
  box-shadow: none;
}

a.np-card,
button.np-card {
  display: block;
  color: inherit;
  text-align: inherit;
  text-decoration: none;
}

.np-card--interactive {
  cursor: pointer;
}

@media (hover: hover) {
  .np-card--interactive:hover,
  a.np-card:hover {
    border-color: var(--brand-bright);
    box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
    color: inherit;
  }
}

.np-card--interactive:focus-visible,
a.np-card:focus-visible {
  border-color: var(--brand);
}

/* Başlık ve eylemler (durum rozeti, "Düzenle") geniş alanda yan yana; dar alanda eylemler başlığın altına iner, başlık ve açıklama bütün
   genişliği kullanır (375 px'te başlık rozetin yanında sözcük sözcük kırılmaz). Başlık en az 20 rem ister (np-step-head ile aynı eşik). */
.np-card__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: var(--panel-padding) var(--panel-padding) 0;
}

.np-card__header > .np-card__heading {
  flex: 1 1 20rem;
}

.np-card__header--divided {
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

.np-card__heading {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.np-card__title {
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
}

.np-card__subtitle {
  margin-top: 3px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.np-card__actions {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
}

.np-card__body {
  padding: 16px var(--panel-padding) var(--panel-padding);
}

.np-card__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px var(--panel-padding);
  border-top: 1px solid var(--line);
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}

/* PDKS pdks-icon-box: bölüm ve kart başlıklarında 36 px karo. */
.np-icon-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--brand-soft);
  color: var(--brand);
}

.np-icon-tile .np-icon {
  width: 18px;
  height: 18px;
}

.np-icon-tile--sm {
  width: 32px;
  height: 32px;
  border-radius: 9px;
}

.np-icon-tile--sm .np-icon {
  width: 17px;
  height: 17px;
}

.np-icon-tile--lg {
  width: 48px;
  height: 48px;
  border-radius: 13px;
}

.np-icon-tile--lg .np-icon {
  width: 24px;
  height: 24px;
}

.np-icon-tile--neutral {
  background: var(--surface-3);
  color: var(--text-muted);
}

.np-icon-tile--info {
  background: var(--info-soft);
  color: var(--info);
}

.np-icon-tile--success {
  background: var(--success-soft);
  color: var(--success);
}

.np-icon-tile--warning {
  background: var(--warning-soft);
  color: var(--warning);
}

.np-icon-tile--danger {
  background: var(--danger-soft);
  color: var(--danger);
}

.np-icon-tile--critical {
  background: var(--critical-soft);
  color: var(--critical);
}

.np-icon-tile--solid {
  background: var(--brand);
  color: var(--brand-fg);
}

/* ==========================================================================
   8. Düğmeler — birincil / ikincil / çerçeveli / hayalet / tehlike / bağlantı; 32/36/40/44 px
   ========================================================================== */
.np-btn {
  --btn-h: var(--control-md);
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: var(--btn-h);
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease, border-color var(--motion-fast) ease,
    box-shadow var(--motion-enter) var(--motion-ease), transform var(--motion-enter) var(--motion-ease);
}

.np-btn .np-icon {
  width: 16px;
  height: 16px;
}

.np-btn:hover {
  text-decoration: none;
}

.np-btn:not(:disabled, [aria-disabled="true"], .np-btn--link):hover {
  transform: var(--button-hover-transform);
}

.np-btn:not(:disabled, [aria-disabled="true"], .np-btn--link):active {
  transform: var(--button-active-transform);
}

.np-btn:disabled,
.np-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.np-btn--primary {
  background: var(--brand);
  color: var(--brand-fg);
}

.np-btn--primary:hover {
  background: var(--button-primary-hover);
  color: var(--brand-fg);
}

.np-btn--secondary {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-btn--secondary:hover {
  background: var(--button-secondary-hover);
  color: var(--brand-strong);
}

.np-btn--secondary[aria-expanded="true"] {
  background: var(--button-secondary-expanded);
}

.np-btn--outline {
  border-color: var(--button-outline-border);
  background: var(--button-outline-bg);
  color: var(--text);
}

.np-btn--outline[aria-expanded="true"] {
  border-color: var(--button-outline-hover-border);
  background: var(--button-outline-expanded);
  color: var(--button-outline-hover-text);
}

.np-btn--outline:hover {
  border-color: var(--button-outline-hover-border);
  background: var(--button-outline-hover);
  color: var(--button-outline-hover-text);
}

.np-btn--outline-brand {
  border-color: var(--button-brand-border);
  background: var(--button-outline-bg);
  color: var(--button-brand-text);
}

.np-btn--outline-brand[aria-expanded="true"] {
  border-color: var(--button-brand-hover-border);
  background: var(--button-brand-expanded);
  color: var(--button-outline-hover-text);
}

.np-btn--outline-brand:hover {
  border-color: var(--button-brand-hover-border);
  background: var(--button-brand-hover);
  color: var(--button-outline-hover-text);
}

.np-btn--ghost {
  color: var(--button-ghost-text);
}

.np-btn--ghost[aria-expanded="true"] {
  background: var(--button-ghost-expanded);
  color: var(--text);
}

.np-btn--ghost:hover {
  background: var(--button-ghost-hover);
  color: var(--text);
}

.np-btn--danger {
  background: var(--button-danger-bg);
  color: var(--button-danger-text);
}

.np-btn--danger:hover {
  background: var(--button-danger-hover);
  color: var(--button-danger-text);
}

.np-btn--danger-solid {
  background: var(--danger);
  color: var(--on-solid);
}

.np-btn--danger-solid:hover {
  background: color-mix(in srgb, var(--danger) 86%, var(--text));
  color: var(--on-solid);
}

.np-btn--link {
  height: auto;
  padding: 0;
  border: 0 solid transparent;
  background: none;
  color: var(--brand);
}

.np-btn--link:hover {
  color: var(--button-link-hover);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.np-btn--xs {
  --btn-h: var(--control-xs);
  gap: 6px;
  padding: 0 10px;
  border-radius: var(--radius-control);
  font-size: 0.7rem;
}

.np-btn--xs .np-icon {
  width: 12px;
  height: 12px;
}

.np-btn--sm {
  --btn-h: var(--control-sm);
  gap: 6px;
  padding: 0 12px;
  font-size: 0.75rem;
}

.np-btn--sm .np-icon {
  width: 14px;
  height: 14px;
}

.np-btn--lg {
  --btn-h: var(--control-lg);
  padding: 0 20px;
  font-size: 0.84rem;
}

.np-btn--icon {
  width: var(--btn-h);
  padding: 0;
}

.np-btn--block {
  width: 100%;
}

/* Yükleme durumu: htmx isteği, `aria-busy` ya da `is-loading`; baştaki ikonun yerini dönen gösterge alır. */
.np-btn.is-loading,
.np-btn[aria-busy="true"],
.np-btn.htmx-request,
form.htmx-request .np-btn[type="submit"] {
  pointer-events: none;
}

.np-btn.is-loading::before,
.np-btn[aria-busy="true"]::before,
.np-btn.htmx-request::before,
form.htmx-request .np-btn[type="submit"]::before {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: np-spin 0.7s linear infinite;
}

.np-btn.is-loading > .np-icon:first-child,
.np-btn[aria-busy="true"] > .np-icon:first-child,
.np-btn.htmx-request > .np-icon:first-child,
form.htmx-request .np-btn[type="submit"] > .np-icon:first-child {
  display: none;
}

/* Kare ikon düğmesi (kapat, satır işlemleri). */
.np-icon-btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.np-icon-btn .np-icon {
  width: 18px;
  height: 18px;
}

.np-icon-btn:hover,
.np-icon-btn[aria-expanded="true"] {
  background: var(--surface-3);
  color: var(--brand-strong);
}

.np-icon-btn:disabled {
  opacity: 0.45;
  pointer-events: none;
}

.np-icon-btn--sm {
  width: 30px;
  height: 30px;
  border-radius: 8px;
}

.np-icon-btn--sm .np-icon {
  width: 16px;
  height: 16px;
}

.np-icon-btn--danger:hover {
  background: var(--danger-soft);
  color: var(--danger);
}

.np-icon-btn--bordered {
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

/* ==========================================================================
   9. Durum: rozet (pill), ikonlu durum metni, nokta, ilerleme çubuğu
   Durum renkleri marka mavisinin yerine geçmez; yalnız verinin anlamını taşır.
   ========================================================================== */
.np-pill {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 24px;
  max-width: 100%;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  background: var(--neutral-soft);
  color: var(--neutral-ink);
  font-size: var(--fs-2xs);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.np-pill .np-icon {
  width: 13px;
  height: 13px;
}

.np-pill--sm {
  height: 20px;
  padding: 0 8px;
  font-size: 0.66rem;
}

.np-pill--brand {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-pill--info {
  background: var(--info-soft);
  color: var(--info-ink);
}

.np-pill--success {
  background: var(--success-soft);
  color: var(--success-ink);
}

.np-pill--warning {
  background: var(--warning-soft);
  color: var(--warning-ink);
}

.np-pill--danger {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.np-pill--critical {
  background: var(--critical-soft);
  color: var(--critical-ink);
}

.np-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* İkon + renkli metin (konsept 01 bölüm durumları). */
.np-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.3;
}

.np-status .np-icon {
  width: 17px;
  height: 17px;
}

/* Metin AA varyantıyla (-ink), ikon temel tonla (≥ 3:1) çizilir. */
.np-status--brand,
.np-status--info {
  color: var(--info-ink);
}

.np-status--brand .np-icon,
.np-status--info .np-icon {
  color: var(--brand-bright);
}

.np-status--success {
  color: var(--success-ink);
}

.np-status--success .np-icon {
  color: var(--success);
}

.np-status--warning {
  color: var(--warning-ink);
}

.np-status--warning .np-icon {
  color: var(--warning);
}

.np-status--danger {
  color: var(--danger-ink);
}

.np-status--danger .np-icon {
  color: var(--danger);
}

.np-status--critical {
  color: var(--critical-ink);
}

.np-status--critical .np-icon {
  color: var(--critical);
}

.np-dot {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neutral);
}

.np-dot--brand,
.np-dot--blue,
.np-dot--info {
  background: var(--brand-bright);
}

.np-dot--success,
.np-dot--green {
  background: var(--success);
}

.np-dot--warning,
.np-dot--amber {
  background: var(--warning);
}

.np-dot--danger,
.np-dot--red {
  background: var(--danger);
}

.np-dot--critical,
.np-dot--violet {
  background: var(--critical);
}

.np-dot--neutral,
.np-dot--slate {
  background: var(--neutral);
}

.np-progress {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-pill);
  background: var(--line);
}

.np-progress__bar {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width 600ms var(--motion-ease);
}

.np-progress--sm {
  height: 6px;
}

.np-progress--lg {
  height: 10px;
}

.np-progress--info .np-progress__bar {
  background: var(--brand-bright);
}

.np-progress--success .np-progress__bar {
  background: var(--success);
}

.np-progress--warning .np-progress__bar {
  background: var(--warning);
}

.np-progress--danger .np-progress__bar {
  background: var(--danger);
}

.np-progress--critical .np-progress__bar {
  background: var(--critical);
}

.np-progress--neutral .np-progress__bar {
  background: var(--line-strong);
}

/* Tabloda yüzde + çubuk (konsept 04 "Profil" sütunu). */
.np-progress-cell {
  display: grid;
  gap: 6px;
  min-width: 110px;
  max-width: 160px;
}

.np-progress-cell__value {
  font-size: var(--fs-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   10. Sayaçlar: bölmeli şerit (konsept 04) ve pano kartları
   ========================================================================== */
.np-statstrip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.np-statstrip__item {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 6px 22px;
  color: var(--text-muted);
  font-size: var(--fs-base);
  text-decoration: none;
}

.np-statstrip__item + .np-statstrip__item {
  border-left: 1px solid var(--line-strong);
}

.np-statstrip__value {
  color: var(--text);
  font-size: var(--fs-xl);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

button.np-statstrip__item {
  border-top: 0;
  border-right: 0;
  border-bottom: 0;
  background: none;
  cursor: pointer;
}

button.np-statstrip__item:first-child {
  border-left: 0;
}

a.np-statstrip__item:hover,
button.np-statstrip__item:hover,
.np-statstrip__item[aria-current="true"],
.np-statstrip__item[aria-pressed="true"] {
  color: var(--brand);
}

.np-statstrip__item[aria-pressed="true"] .np-statstrip__value {
  color: var(--brand);
}

/* K101 (UX-20): kırmızı yalnız gerçek durumda (pano: geciken görev sıfırdan büyükken). */
.np-statstrip__item.is-danger .np-statstrip__value {
  color: var(--danger);
}

/* Yan panel yanda açıkken (≥ 1440 px) ya da dar laptopta özet çubuğu tek satırda kalır. */
@container np-page (max-width: 56rem) {
  .np-statstrip__item {
    padding-inline: 14px;
  }

  .np-statstrip__value {
    font-size: var(--fs-lg);
  }
}

/* K101 (UX-11): telefonda şerit sekme çubuğu gibi tek satırda yana kayar (iki sütunlu ızgara 170–190 px tutup ilk satırı ilk ekranın
   dışına itiyordu); seçili sayaç app.js ile görünür alana kaydırılır. */
@container np-page (max-width: 40rem) {
  .np-statstrip {
    flex-wrap: nowrap;
    padding-block: 8px;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .np-statstrip::-webkit-scrollbar {
    display: none;
  }

  .np-statstrip__item {
    flex: none;
    padding: 6px 14px;
    white-space: nowrap;
  }
}

.np-stat-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr));
}

.np-stat-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
}

a.np-stat-card:hover {
  border-color: var(--brand-bright);
  color: inherit;
}

.np-stat-card__label {
  padding-right: 40px;
  color: var(--text-muted);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.np-stat-card__value {
  color: var(--text);
  font-size: var(--fs-stat);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.np-stat-card__hint {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.np-stat-card__icon {
  position: absolute;
  top: 14px;
  right: 14px;
}

/* ==========================================================================
   11. Tablo, sıralanabilir başlık, sayfalama
   ========================================================================== */
/* PDKS DirectoryTable / SettingsTypography: dizin, süzgeç ve ayar formları aynı değişken font ailesini kullanır. */
.np-table-card,
.np-table,
.np-pager,
.np-filter-toolbar,
.np-settings-form {
  font-family: var(--font-directory-ui);
  font-weight: 400;
}

.np-table-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.np-table-card__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  padding: 18px var(--panel-padding);
}

.np-table-card__title {
  margin-top: 0;
  font-size: var(--fs-card-title);
  font-weight: var(--directory-weight-heading);
  letter-spacing: -0.015em;
}

.np-table-card__meta {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: var(--directory-weight-label);
  line-height: 1.5;
}

/* K101 (UX-02): liste kartı sayfa başlığını yinelemez. Sayfalanan listede kartın görünür başlığı yoktur (başlık ekran okuyucu içindir,
   sayı sayfalayıcının özetindedir); sayfasız listede kayıt sayısı ve kartın eylemi kısa bir satırdadır. */
.np-table-card--bare .np-table th {
  border-top: 0;
}

.np-table-card__head--compact {
  align-items: center;
  padding-block: 10px;
}

.np-table-card__head--compact .np-table-card__meta {
  margin-top: 0;
}

.np-table-scroll {
  /* K110: PDKS DirectoryTable sınırı; değişken yükseklikte ilk 10 satır table-scroll.js ile ölçülür. */
  max-height: min(64vh, 720px, var(--table-viewport-max, calc(10 * var(--table-row-height) + 40px)));
  overflow: auto;
  scrollbar-gutter: stable;
  /* Dikey sınırda sayfa kaymaya devam eder; yatay hareket tablo içinde kalır. */
  overscroll-behavior: contain auto;
}

.np-table-scroll:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}

.np-table-scroll > table > thead > tr > th {
  position: sticky;
  top: 0;
  z-index: 4;
}

/* Kaydırılan kapsayıcı mutlak konumlu alt öğelerini (np-sr-only, ipucu) kendi içinde tutar; yoksa bu öğeler kaydırmayla kırpılmaz
   ve telefonda sayfayı yatay kaydırır (tablo başlığındaki görünmez "İşlemler" etiketi gibi). */
.np-table-scroll,
.np-tabbar,
.np-stepper__track,
.np-drawer__body,
.np-modal__body,
.np-bell__body {
  position: relative;
}

/* K101 (UX-11): dar sayfada liste satırları karttır (belge listesinin düzeni): ilk hücreler alt alta, işlem hücresi sağ üstte;
   np-stack-hide taşıyan ikincil hücreler gizlenir, ayrıntısı satırın panelindedir. */
@container np-page (max-width: 40rem) {
  .np-table--stack thead {
    display: none;
  }

  .np-table--stack,
  .np-table--stack tbody {
    display: block;
  }

  .np-table--stack tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
  }

  .np-table.np-table--stack td {
    display: block;
    grid-column: 1;
    padding: 0;
    height: auto;
    border-bottom: 0;
  }

  .np-table--stack td.np-actions-cell {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .np-table--stack .np-stack-hide {
    display: none;
  }

  .np-table.np-table--stack .np-col-main {
    min-width: 0;
  }
}

/* K101 (UX-01): süzgeç kartının ikincil alanları "Diğer süzgeçler" altındadır; seçili ikincil süzgeç varken açık gelir ve özet satırı
   seçili olanların sayısını gösterir. */
.np-filter-more > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  color: var(--brand);
  font-size: var(--fs-sm);
  font-weight: 600;
  list-style: none;
  cursor: pointer;
}

.np-filter-more > summary::-webkit-details-marker {
  display: none;
}

.np-filter-more > summary .np-icon {
  transition: transform var(--motion-fast) ease;
}

.np-filter-more[open] > summary .np-icon {
  transform: rotate(180deg);
}

.np-filter-more__body {
  margin-top: var(--space-3);
}

.np-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--fs-sm);
}

.np-table th {
  padding: 11px 13px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--table-soft);
  color: var(--table-heading);
  font-size: var(--fs-table-heading);
  font-weight: 780;
  letter-spacing: 0.055em;
  line-height: 1.25;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.np-table td {
  height: var(--table-row-height);
  padding: var(--table-cell-padding);
  border-bottom: 1px solid var(--line);
  color: var(--table-cell);
  line-height: 1.42;
  vertical-align: middle;
}

.np-table th:where(:first-child),
.np-table td:where(:first-child) {
  padding-left: var(--table-edge-padding);
}

.np-table th:where(:last-child),
.np-table td:where(:last-child) {
  padding-right: var(--table-edge-padding);
}

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

.np-table tbody tr {
  transition: background-color var(--motion-fast) ease;
}

.np-table tbody tr > :first-child {
  transition: box-shadow var(--motion-enter) var(--motion-ease);
}

/* Satır üzerine gelince açık mavi zemin + sol 3 px marka çubuğu (ilk hücrede; tr gölgesi her tarayıcıda çizilmez). */
.np-table tbody tr:hover {
  background: var(--table-hover);
}

.np-table tbody tr:hover > :first-child,
.np-table tbody tr.is-selected > :first-child,
.np-table tbody tr[aria-selected="true"] > :first-child {
  box-shadow: inset 3px 0 0 var(--brand);
}

.np-table tbody tr.is-selected,
.np-table tbody tr[aria-selected="true"] {
  background: color-mix(in srgb, var(--brand-soft) 72%, var(--surface));
}

.np-table tbody tr.np-row-link {
  cursor: pointer;
}

.np-table .np-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.np-table .np-nowrap {
  white-space: nowrap;
}

/* Ana sütun (unvan, başlık): dar alanda harf harf kırılmaz, tablo kendi içinde yatay kayar. */
.np-table .np-col-main {
  min-width: 13rem;
}

.np-table .np-actions-cell {
  width: 1%;
  text-align: right;
  white-space: nowrap;
}

.np-cell-title {
  color: var(--table-identity);
  font-size: var(--fs-table-title);
  font-weight: var(--directory-weight-heading);
}

a.np-cell-title:hover {
  color: var(--brand);
}

.np-cell-sub {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-table-detail);
  line-height: 1.4;
}

.np-table .np-pill {
  min-height: 24px;
  padding: 4px 10px;
  font-size: 0.72rem;
  font-weight: 720;
  line-height: 1.42;
  letter-spacing: 0.01em;
}

.np-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-decoration: none;
  text-transform: inherit;
  cursor: pointer;
}

.np-sort .np-icon {
  width: 13px;
  height: 13px;
  opacity: 0.7;
}

.np-sort:hover,
th[aria-sort="ascending"] .np-sort,
th[aria-sort="descending"] .np-sort {
  color: var(--brand);
}

th[aria-sort="ascending"] .np-sort .np-icon,
th[aria-sort="descending"] .np-sort .np-icon {
  opacity: 1;
}

.np-table__empty td {
  padding: 0;
}

.np-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 16px;
  border-top: 1px solid var(--line);
}

.np-pager__info {
  color: var(--text-muted);
  font-size: 0.82rem;
}

.np-pager__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.np-pager__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.76rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.np-pager__page .np-icon {
  width: 15px;
  height: 15px;
}

.np-pager__page:hover {
  border-color: color-mix(in srgb, var(--brand-bright) 40%, var(--line));
  color: var(--brand-strong);
}

.np-pager__page[aria-current="page"] {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-fg);
}

.np-pager__page[aria-disabled="true"] {
  color: var(--text-muted);
  opacity: 0.55;
  pointer-events: none;
}

.np-pager__gap {
  padding: 0 2px;
  color: var(--text-muted);
}

/* ==========================================================================
   12. Form denetimleri
   ========================================================================== */
.np-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.np-form-grid {
  display: grid;
  gap: 16px 20px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

/* PDKS settings-typography/settings-form: ayar kartlarında başlık ve açıklama alt alta. */
.np-settings-form .np-card__heading {
  display: block;
}

.np-settings-form .np-card__title {
  font-weight: var(--directory-weight-heading);
}

.np-settings-form :is(.np-label, .np-legend) {
  font-weight: var(--directory-weight-label);
}

.np-span-full {
  grid-column: 1 / -1;
}

.np-field {
  display: grid;
  gap: 6px;
  min-width: 0;
  align-content: start;
}

/* Etiket solda, denetim sağda (konsept 06 davet penceresi). */
.np-field--inline {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 560px) {
  .np-field--inline {
    grid-template-columns: 150px minmax(0, 1fr);
    align-items: center;
    column-gap: 16px;
  }

  .np-field--inline > :not(.np-label) {
    grid-column: 2;
  }
}

.np-label {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
}

.np-required {
  color: var(--danger);
  font-weight: 700;
}

.np-optional {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.np-help {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.np-error,
.field-validation-error {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--danger-ink);
  font-size: var(--fs-xs);
  font-weight: 500;
  line-height: 1.45;
}

.np-error .np-icon {
  width: 14px;
  height: 14px;
  margin-top: 1px;
}

.field-validation-valid,
.validation-summary-valid {
  display: none;
}

.validation-summary-errors {
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line));
  border-radius: var(--radius-control);
  background: var(--danger-soft);
  color: var(--danger-ink);
  font-size: var(--fs-sm);
}

.validation-summary-errors ul {
  margin: 0;
  padding-left: 1.2em;
}

.np-input,
.np-select,
.np-textarea {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--field-height);
  padding: 0 10px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  background: var(--field-bg);
  color: var(--text);
  font-size: 0.875rem;
  line-height: 1.4;
  transition: border-color var(--motion-fast) ease, box-shadow var(--motion-enter) var(--motion-ease),
    background-color var(--motion-fast) ease;
}

/* Dizin araç çubuğu: DirectoryTable search/filter 38 px, 8 px köşe; form ve pencere alanları bu kuralı almaz. */
.np-filter-toolbar .np-label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--directory-weight-label);
}

.np-filter-toolbar :is(.np-input, .np-select) {
  height: var(--filter-height);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
}

.np-filter-toolbar .np-input[type="search"] {
  background-color: var(--surface-2);
}

.np-input::placeholder,
.np-textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.np-input:hover,
.np-select:hover,
.np-textarea:hover {
  border-color: var(--field-hover-border);
}

.np-select:hover { border-color: var(--select-hover-border); }

.np-input:focus-visible,
.np-select:focus-visible,
.np-textarea:focus-visible {
  border-color: var(--brand);
  outline-offset: 1px;
}

.np-input[aria-invalid="true"],
.np-select[aria-invalid="true"],
.np-textarea[aria-invalid="true"],
.np-input.input-validation-error,
.np-select.input-validation-error,
.np-textarea.input-validation-error {
  border-color: var(--danger);
}

.np-input[aria-invalid="true"]:focus-visible,
.np-select[aria-invalid="true"]:focus-visible,
.np-textarea[aria-invalid="true"]:focus-visible,
.np-input.input-validation-error:focus-visible {
  outline-color: var(--danger);
}

.np-input:disabled,
.np-select:disabled,
.np-textarea:disabled {
  background: var(--field-disabled-bg);
  color: var(--field-disabled-text);
  cursor: not-allowed;
  opacity: var(--field-disabled-opacity);
}

.np-select { background-color: var(--surface); }
.np-select:disabled { background-color: var(--surface-2); }

.np-input[readonly],
.np-textarea[readonly] {
  background: var(--surface-2);
  color: var(--text-muted);
}

.np-input--sm,
.np-select--sm {
  height: var(--control-sm);
  font-size: var(--fs-sm);
}

.np-input--lg {
  height: var(--control-lg);
}

.np-input--num {
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.np-textarea {
  height: auto;
  min-height: 88px;
  padding: 10px 12px;
  line-height: 1.55;
  resize: vertical;
  field-sizing: content;
}

/* Yerel seçim: varsayılan tarayıcı listesi korunur; özelleştirilebilir seçimi destekleyen tarayıcıda ortak yüzey. */
.np-select:not([multiple], [size]) {
  padding-right: 38px;
  background-image: var(--select-chevron);
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 16px;
  appearance: none;
  cursor: pointer;
}

.np-select[multiple] {
  height: auto;
  padding: 6px;
}

.np-select option {
  background: var(--surface);
  color: var(--text);
}

@supports (appearance: base-select) {
  .np-select:not([multiple], [size]),
  .np-select:not([multiple], [size])::picker(select) {
    appearance: base-select;
  }

  .np-select:not([multiple], [size]) {
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .np-select:not([multiple], [size])::picker-icon {
    display: none;
  }

  .np-select:not([multiple], [size])::picker(select) {
    min-width: min(max(12rem, anchor-size(width)), calc(100vw - 16px));
    max-width: calc(100vw - 16px);
    max-height: min(320px, 60dvh);
    margin-block: 6px;
    padding: 6px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--line);
    border-radius: var(--radius-menu);
    background: var(--surface);
    color: var(--text);
    box-shadow: var(--shadow-menu);
    font: inherit;
  }

  .np-select:not([multiple], [size]) option {
    min-height: 36px;
    gap: 12px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: var(--text);
    font-size: 13px;
    line-height: 20px;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
  }

  .np-select:not([multiple], [size]) option:is(:checked, :hover, :focus) {
    background: var(--brand-soft);
    color: var(--brand-strong);
  }

  .np-select:not([multiple], [size]) option:checked {
    font-weight: 600;
  }

  .np-select:not([multiple], [size]) option::checkmark {
    order: 1;
    margin-inline-start: auto;
    color: var(--brand);
  }

  .np-select:not([multiple], [size]) option:disabled {
    background: transparent;
    color: var(--text-muted);
    opacity: 0.5;
    cursor: not-allowed;
  }

  .np-select:not([multiple], [size]) optgroup {
    padding-block: 4px;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
  }

  @media (pointer: coarse) {
    .np-select:not([multiple], [size]) option {
      min-height: 44px;
    }
  }
}

/* İkonlu giriş (arama, tarih) ve sağda düğmeli giriş (şifre göster/gizle). */
.np-input-group {
  position: relative;
  display: block;
  min-width: 0;
}

.np-input-group__icon {
  position: absolute;
  top: 50%;
  left: 12px;
  width: 17px;
  height: 17px;
  color: var(--text-muted);
  pointer-events: none;
  transform: translateY(-50%);
}

.np-input-group__icon ~ .np-input {
  padding-left: 38px;
}

.np-input-group__action {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
}

.np-input-group:has(.np-input-group__action) .np-input {
  padding-right: 44px;
}

.np-input-group__suffix {
  position: absolute;
  top: 50%;
  right: 12px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  pointer-events: none;
  transform: translateY(-50%);
}

.np-input-group:has(.np-input-group__suffix) .np-input {
  padding-right: 52px;
}

/* Tarih aralığı: başlangıç ve bitiş yan yana. */
.np-range {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  align-items: center;
}

.np-input[type="date"],
.np-input[type="month"],
.np-input[type="datetime-local"] {
  font-variant-numeric: tabular-nums;
}

.np-input::-webkit-calendar-picker-indicator {
  opacity: 0.65;
  cursor: pointer;
}

.np-input::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

/* Onay kutusu, radyo ve anahtar: tema token'larıyla çizilir. */
.np-check {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--text);
  font-size: var(--fs-base);
  line-height: 1.45;
  cursor: pointer;
}

.np-check:has(:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.np-checkbox,
.np-radio {
  position: relative;
  display: inline-grid;
  flex: none;
  place-content: center;
  width: 18px;
  height: 18px;
  margin: 1px 0 0;
  border: 1.5px solid var(--choice-border);
  background: var(--choice-bg);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.np-checkbox {
  border-radius: 5px;
}

.np-radio {
  border-radius: 50%;
}

.np-checkbox:hover,
.np-radio:hover {
  border-color: var(--brand-bright);
}

.np-checkbox:checked,
.np-checkbox:indeterminate {
  border-color: var(--brand);
  background: var(--brand);
}

.np-checkbox::before {
  content: "";
  width: 12px;
  height: 12px;
  background: var(--brand-fg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: scale(0);
  transition: transform var(--motion-fast) var(--motion-ease);
}

.np-checkbox:checked::before {
  transform: scale(1);
}

.np-checkbox:indeterminate::before {
  height: 2px;
  border-radius: 2px;
  -webkit-mask: none;
  mask: none;
  transform: scale(0.8);
}

.np-radio:checked {
  border-color: var(--brand);
  background: var(--brand);
  box-shadow: inset 0 0 0 3px var(--surface);
}

.np-checkbox[aria-invalid="true"],
.np-radio[aria-invalid="true"] {
  border-color: var(--danger);
}

.np-switch {
  position: relative;
  flex: none;
  width: 42px;
  height: 24px;
  margin: 0;
  border-radius: var(--radius-pill);
  background: var(--switch-bg);
  appearance: none;
  cursor: pointer;
  transition: background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.np-switch::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--switch-thumb);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 30%, transparent);
  transition: transform var(--motion-fast) var(--motion-ease), background-color var(--motion-fast) ease;
}

.np-switch:checked {
  background: var(--brand);
}

.np-switch:checked::before {
  background: var(--brand-fg);
  transform: translateX(18px);
}

.np-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.np-switch-row {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
}

/* Profil seçenekleri satıra sığdıkça yan yana dizilir. */
.np-choice-list {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-1) var(--space-5);
}

.np-choice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-2);
  min-width: 0;
  min-height: var(--control-md);
  max-width: 100%;
  padding-block: var(--space-2);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.45;
  cursor: pointer;
}

.np-choice:hover,
.np-choice:has(input:checked) {
  color: var(--brand-strong);
}

.np-choice:has(input:disabled) {
  cursor: not-allowed;
  opacity: 0.55;
}

.np-choice__text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}

.np-choice__hint {
  max-width: 28ch;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
}

/* Dosya bırakma alanı (konsept 02): görünmez dosya girişi alanı kaplar, sürükle-bırak yerel çalışır. */
.np-dropzone {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 16px 18px;
  border: 1.5px dashed color-mix(in srgb, var(--brand-bright) 35%, var(--line-strong));
  border-radius: var(--radius-menu);
  background: color-mix(in srgb, var(--surface-2) 60%, var(--surface));
  transition: border-color var(--motion-fast) ease, background-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.np-dropzone input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.np-dropzone:hover,
.np-dropzone.is-dragover {
  border-color: var(--brand-bright);
  background: color-mix(in srgb, var(--brand-soft) 65%, var(--surface));
}

/* Görünmez dosya girişi alanı kaplar: halka bırakma alanının çevresindedir. */
.np-dropzone:has(input:focus-visible) {
  border-color: var(--brand);
  outline: var(--focus-ring-width) solid var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

.np-dropzone input:focus-visible {
  outline: none;
}

.np-dropzone:has(input:disabled) {
  opacity: 0.55;
}

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

.np-dropzone__title {
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 600;
}

.np-dropzone__hint {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.np-file-list {
  display: grid;
  gap: 8px;
}

.np-file-list__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 10px 8px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  font-size: var(--fs-sm);
}

.np-file-list__item > .np-icon {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

.np-file-list__name {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-file-list__meta {
  flex: none;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.np-fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.np-legend {
  margin-bottom: 8px;
  padding: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  line-height: 1.4;
}

.np-form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.np-form-actions--between {
  justify-content: space-between;
}

/* K101 (UX-13): uzun sayfa formunda kaydetme alanı ekranın altında sabittir (Ayarlar, müşteri bilgileri); profil formunun eylem
   çubuğuyla aynı görünüm. Pencere formları bu değiştiriciyi kullanmaz. */
.np-form-actions--sticky {
  position: sticky;
  bottom: var(--space-3);
  z-index: var(--z-sticky);
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-panel);
}

/* ==========================================================================
   13. Sekmeler: bölmeli (PDKS), ayrık hap (konsept 04 yan panel), ikonlu sekme çubuğu (konsept 03)
   Görsel dilde alt çizgili sekme yoktur.
   ========================================================================== */
.np-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  min-height: 40px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-3) 82%, var(--surface));
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--text) 6%, transparent);
}

.np-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 32px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.79rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--motion-fast) ease, border-color var(--motion-fast) ease, background-color var(--motion-fast) ease,
    box-shadow 180ms ease;
}

.np-tab .np-icon {
  width: 16px;
  height: 16px;
}

.np-tab:hover {
  background: color-mix(in srgb, var(--brand-soft) 58%, transparent);
  color: var(--brand-strong);
}

.np-tab[aria-selected="true"],
.np-tab[aria-current="page"],
.np-tab.is-active {
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line-strong));
  background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
  color: var(--brand);
  box-shadow: 0 4px 12px -7px color-mix(in srgb, var(--brand-strong) 48%, transparent),
    0 1px 2px color-mix(in srgb, var(--text) 8%, transparent);
}

.np-tab .np-count {
  min-width: 18px;
  height: 18px;
  font-size: 0.62rem;
}

/* K109: nazaliPdks ui/tabs.tsx WorkspaceTabs + globals.css tabs overrides.
   Kaynaktaki son kaskad: liste 3px/10px, tetikleyici 13px/7px; yüksekliği iki satırlı etiket ve 36px ikon belirler. */
.np-workspace-tabs {
  width: 100%;
  height: auto;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  border-radius: 10px;
  font-family: var(--font-directory-ui);
  color: var(--text-muted);
}

.np-workspace-tab {
  position: relative;
  flex: 1;
  min-width: 0;
  height: auto;
  justify-content: flex-start;
  gap: 6px;
  padding-block: 10px;
  white-space: normal;
  line-height: calc(20 / 14);
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease, box-shadow 180ms ease;
}

.np-workspace-tab:focus-visible {
  outline: 1px solid var(--brand);
}
.np-workspace-tab:focus-visible:not([aria-selected="true"]) {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 50%, transparent);
}

.np-workspace-tab__icon {
  display: flex;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-workspace-tab__text { min-width: 0; text-align: left; }
.np-workspace-tab__label {
  display: block;
  color: var(--text);
  font-size: 0.875rem;
  font-weight: 620;
  line-height: calc(20 / 14);
}
.np-workspace-tab__hint {
  display: block;
  overflow: hidden;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.68rem;
  font-weight: 520;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-workspace-tab__error { flex-shrink: 0; margin-left: auto; color: var(--danger); }

@media (min-width: 640px) {
  .np-workspace-tabs { width: fit-content; flex-direction: row; flex-wrap: wrap; }
  .np-workspace-tab { min-width: 245px; flex: auto; }
}

.np-tabs--pills {
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}

.np-tabs--pills .np-tab {
  min-height: 38px;
  padding: 0 16px;
  border-color: var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
}

.np-tabs--pills .np-tab[aria-selected="true"],
.np-tabs--pills .np-tab[aria-current="page"],
.np-tabs--pills .np-tab.is-active {
  border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
  background: var(--brand-soft);
  color: var(--brand-strong);
  box-shadow: none;
}

.np-tabbar {
  display: flex;
  gap: 3px;
  padding: 3px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: color-mix(in srgb, var(--surface-3) 82%, var(--surface));
  scrollbar-width: none;
}

.np-tabbar::-webkit-scrollbar {
  display: none;
}

.np-tabbar__item {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  min-height: 36px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  color: var(--text-muted);
  font-size: 0.79rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.np-tabbar__item .np-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.np-tabbar__item:hover {
  background: var(--surface-3);
  color: var(--brand-strong);
}

.np-tabbar__item[aria-current="page"],
.np-tabbar__item[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--brand) 18%, var(--line-strong));
  background: color-mix(in srgb, var(--brand-soft) 42%, var(--surface));
  color: var(--brand);
  font-weight: 600;
}

.np-tabbar__item[aria-current="page"] .np-icon,
.np-tabbar__item[aria-selected="true"] .np-icon {
  color: var(--brand);
}

.np-tabbar__item:focus-visible {
  outline-offset: -2px;
}

.np-file-tabs {
  flex-wrap: wrap;
  gap: 0 var(--space-2);
  padding: 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
}

.np-file-tabs .np-tabbar__item {
  min-height: 42px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  padding-inline: var(--space-3);
}

.np-file-tabs .np-tabbar__item:hover,
.np-file-tabs .np-tabbar__item[aria-current="page"] {
  background: transparent;
}

.np-file-tabs .np-tabbar__item[aria-current="page"] {
  border-bottom-color: var(--brand);
}

/* ==========================================================================
   14. Adımlayıcı (konsept 02): yatay kaydırılabilir; tamamlanan yeşil onay, etkin mavi numara
   ========================================================================== */
.np-stepper {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
}

.np-stepper__track {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  align-items: center;
  gap: 10px;
  padding: 4px 2px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}

.np-stepper__arrow {
  border-radius: 50%;
}

.np-stepper__arrow--left {
  margin-right: var(--space-2);
}

.np-stepper__arrow--right {
  margin-left: var(--space-2);
}

.np-stepper__arrow[hidden] {
  display: none;
}

.np-stepper__track::-webkit-scrollbar {
  display: none;
}

/* Taşma varsa kenarlarda solma ipucu (app.js `has-start` / `has-end` yazar). */
.np-stepper.has-start .np-stepper__track {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px);
  mask-image: linear-gradient(90deg, transparent, #000 32px);
}

.np-stepper.has-end .np-stepper__track {
  -webkit-mask-image: linear-gradient(270deg, transparent, #000 32px);
  mask-image: linear-gradient(270deg, transparent, #000 32px);
}

.np-stepper.has-start.has-end .np-stepper__track {
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 32px, #000 calc(100% - 32px), transparent);
}

.np-step {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 6px 16px 6px 8px;
  border-radius: var(--radius-menu);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  scroll-snap-align: center;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

a.np-step:hover {
  background: var(--surface-3);
  color: var(--text);
}

.np-step__marker {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.np-step__marker .np-icon {
  width: 17px;
  height: 17px;
}

.np-step--done .np-step__marker {
  border-color: var(--success);
  background: var(--success);
  color: var(--on-solid);
}

.np-step--active,
a.np-step--active:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 600;
}

.np-step--active .np-step__marker {
  border-color: var(--brand);
  background: var(--brand);
  color: var(--brand-fg);
}

.np-step--todo {
  color: var(--text-muted);
}

.np-step__line {
  flex: 1 0 40px;
  min-width: 40px;
  height: 1.5px;
  border-radius: 1px;
  background: var(--line-strong);
}

.np-step__line.is-done {
  background: var(--brand);
}

/* Mobilde adımlar açılır seçimdir (EKRANLAR.md §3.2); .np-select'in display'i korunur. */
@media (min-width: 640px) {
  .np-stepper > .np-stepper__select {
    display: none;
  }
}

@media (max-width: 639.98px) {
  .np-stepper__arrow,
  .np-stepper__track {
    display: none;
  }
}

/* ==========================================================================
   15. Sağ yan panel (konsept 04): geniş ekranda içeriğin yanında, dar ekranda arka katmanlı
   ========================================================================== */
/* Varsayılan (1024–1439 px): içeriğin üzerinde, arka katmanlı ve odak tuzaklı örtü. */
.np-drawer {
  position: fixed;
  top: 12px;
  right: 12px;
  bottom: 12px;
  z-index: calc(var(--z-nav) + 1);
  display: flex;
  flex-direction: column;
  width: min(var(--drawer-width), calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-modal);
  background: var(--surface);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateX(16px);
  transition: opacity var(--motion-exit) var(--motion-ease), transform var(--motion-exit) var(--motion-ease),
    visibility 0s linear var(--motion-exit);
}

.np-drawer.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--motion-enter) var(--motion-ease), transform var(--motion-enter) var(--motion-ease), visibility 0s;
}

.np-drawer__content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

.np-drawer__header {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 14px;
}

.np-drawer__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.np-drawer__title {
  min-width: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  line-height: 1.5;
}

.np-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 4px 22px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.np-drawer__section {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.np-drawer__section:first-child {
  border-top: 0;
  padding-top: 8px;
}

.np-drawer__section-title {
  margin-bottom: 10px;
  font-size: 0.875rem;
  font-weight: 600;
}

.np-drawer__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}

.np-drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-nav);
  background: var(--overlay);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--motion-enter) var(--motion-ease), visibility 0s linear var(--motion-enter);
}

.np-drawer-host.is-open .np-drawer-backdrop {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--motion-enter) var(--motion-ease), visibility 0s;
}

/* 1440 px ve üzeri: üst çubuğun altında, içerik alanının sağında; arka katman yok, sayfa kullanılabilir kalır. */
@media (min-width: 1440px) {
  .np-drawer {
    top: calc(var(--topbar-height) + 12px);
    z-index: var(--z-drawer);
  }

  .np-drawer-backdrop {
    display: none;
  }
}

/* 1024 px altında tam ekran. */
@media (max-width: 1023.98px) {
  .np-drawer {
    inset: 0;
    width: 100%;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
}

/* ==========================================================================
   16. Pencere (<dialog>): 18 px panel, sabit başlık/altlık, 3 px bulanık arka katman
   ========================================================================== */
.np-modal {
  width: min(560px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 32px);
  padding: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--line) 82%, transparent);
  border-radius: var(--radius-modal);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-float);
}

.np-modal[open] {
  display: flex;
  flex-direction: column;
  animation: np-dialog-in var(--motion-enter) var(--motion-ease);
}

.np-modal::backdrop {
  background: var(--overlay);
  backdrop-filter: blur(3px);
  animation: np-fade-in var(--motion-enter) var(--motion-ease);
}

.np-modal--sm {
  width: min(440px, calc(100vw - 32px));
}

.np-modal--lg {
  width: min(760px, calc(100vw - 32px));
}

.np-modal--xl {
  width: min(980px, calc(100vw - 32px));
}

.np-modal__content,
.np-modal__form {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  margin: 0;
}

.np-modal__header {
  display: flex;
  flex: none;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 62%, var(--surface));
}

.np-modal__title {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.np-task-detail .np-modal__title {
  overflow-wrap: anywhere;
}

.np-modal__desc {
  margin-top: 4px;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.np-modal__body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 20px 22px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.np-modal__footer {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--surface));
}

.np-modal__footer > [data-np-modal-close]:first-child:not(:only-child),
.np-modal__footer > [data-np-confirm-cancel] {
  margin-inline-end: auto;
}

.np-modal__close {
  margin: -6px -8px 0 0;
}

@keyframes np-dialog-in {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.985);
  }
}

@keyframes np-fade-in {
  from {
    opacity: 0;
  }
}

/* Onay penceresi (np-confirm). İleti kullanıcı verisi taşıyabilir (K89: 250 karakterlik boşluksuz unvanlar): satır kırılır, sığmazsa gövde kayar, düğmeler görünür kalır. */
.np-confirm__body {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  gap: 14px;
  min-height: 0;
  padding: 22px 22px 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.np-confirm__text {
  flex: 1 1 auto;
  min-width: 0;
}

.np-confirm__message {
  margin-top: 6px;
  color: var(--text-muted);
  font-size: var(--fs-base);
  white-space: pre-line;
  overflow-wrap: anywhere;
}

.np-confirm[data-tone="danger"] .np-confirm__icon {
  background: var(--danger-soft);
  color: var(--danger);
}

/* ==========================================================================
   17. Açılır menü ve seçim listesi (PDKS Dropdown-Tasarimi.md): 192 px taban, 12 px köşe, 6 px iç boşluk,
   36 px satır (dokunmatikte 44 px), 13 px metin, 16 px ikon, 10 px ikon/metin aralığı
   ========================================================================== */
.np-dropdown {
  position: relative;
  display: inline-flex;
}

.np-menu,
.np-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--z-menu);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px) scale(0.98);
  transform-origin: top left;
  transition: opacity 100ms var(--motion-ease), transform 100ms var(--motion-ease), visibility 0s linear 100ms;
}

.np-menu {
  width: max-content;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 1rem));
  max-height: min(70dvh, 480px);
  margin: 0;
  padding: 6px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--line);
  border-radius: var(--radius-menu);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-menu);
}

.np-menu.is-open,
.np-popover.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity var(--motion-fast) var(--motion-ease), transform var(--motion-fast) var(--motion-ease), visibility 0s;
}

.np-menu--end,
.np-popover--end {
  right: 0;
  left: auto;
  transform-origin: top right;
}

.np-menu.is-up,
.np-popover.is-up {
  top: auto;
  bottom: calc(100% + 6px);
  transform-origin: bottom left;
}

/* Kırpan kapsayıcıdaki menü ("Yanıtınıza göre açılan bilgiler" paneli, overflow: hidden) görünüm alanına sabitlenir (npDropdown.pin):
   top, left ve sığmazsa max-height betikten gelir, yer tetikleyicinin dikdörtgeninden hesaplanır; menü DOM'da tetikleyicinin yanında kalır. */
.np-menu.is-fixed,
.np-popover.is-fixed {
  position: fixed;
  right: auto;
  bottom: auto;
}

/* Sabit menünün kapsayıcı bloğunu ölçen görünmez işaret (app.js fixedOrigin): eklenir, ölçülür ve hemen kaldırılır. */
.np-fixed-probe {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  visibility: hidden;
  pointer-events: none;
}

.np-menu--wide {
  width: min(310px, calc(100vw - 24px));
  padding: 0;
}

.np-menu--wide > .np-menu__group {
  padding: 6px;
}

.np-menu__item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 8px 10px;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color 150ms ease, color 150ms ease;
}

.np-menu__item > .np-icon {
  width: 16px;
  height: 16px;
  color: var(--text-muted);
}

.np-menu__item:hover,
.np-menu__item:focus-visible {
  outline-offset: -2px;
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-menu__item:hover > .np-icon,
.np-menu__item:focus-visible > .np-icon {
  color: var(--brand);
}

.np-menu__item:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--brand) 35%, transparent);
  outline-offset: -2px;
}

.np-menu__item:disabled,
.np-menu__item[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: 0.4;
  pointer-events: none;
}

.np-menu__item--danger,
.np-menu__item--danger > .np-icon {
  color: var(--danger);
}

.np-menu__item--danger:hover,
.np-menu__item--danger:focus-visible {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.np-menu__item--danger:hover > .np-icon,
.np-menu__item--danger:focus-visible > .np-icon {
  color: var(--danger);
}

.np-menu__check {
  margin-left: auto;
  color: var(--brand);
  visibility: hidden;
}

.np-menu__item[aria-checked="true"] {
  font-weight: 600;
}

.np-menu__item[aria-checked="true"] .np-menu__check {
  visibility: visible;
}

.np-menu__label {
  padding: 8px 10px 6px;
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

.np-menu__sep {
  height: 1px;
  margin: 6px 8px;
  border: 0;
  background: var(--line);
}

.np-menu form {
  margin: 0;
}

/* Kullanıcı menüsünün kimlik başlığı. */
.np-menu__identity {
  display: grid;
  gap: 12px;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-2);
}

.np-menu__identity-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.np-menu__identity-name {
  display: block;
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.np-menu__identity-mail {
  display: block;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-menu__identity-role {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  max-width: 100%;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 0.72rem;
  font-weight: 600;
  box-shadow: var(--shadow-role-pill);
}

.np-menu__identity-role .np-icon {
  width: 14px;
  height: 14px;
  color: var(--brand);
}

.np-menu__item--rich {
  align-items: center;
  min-height: 56px;
  padding: 10px;
}

.np-menu__item-tile {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  background: var(--brand-soft);
  color: var(--brand);
}

.np-menu__item-tile .np-icon {
  width: 18px;
  height: 18px;
}

.np-menu__item--danger .np-menu__item-tile {
  background: var(--danger-soft);
  color: var(--danger);
}

.np-menu__item-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}

.np-menu__item-hint {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-weight: 400;
  line-height: 1.45;
}

@media (pointer: coarse) {
  .np-menu__item {
    min-height: 44px;
  }
}

.np-chevron {
  transition: rotate var(--motion-fast) var(--motion-ease);
}

[aria-expanded="true"] > .np-chevron {
  rotate: 180deg;
}

/* Zil paneli ve bildirim satırları (/bildirimler/zil parçası bu sınıfları kullanır). */
.np-popover {
  width: min(420px, calc(100vw - 24px));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-float);
}

.np-bell__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
}

.np-bell__title {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.np-bell__hint {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.7rem;
}

.np-bell__body {
  max-height: min(430px, 60dvh);
  padding: 10px;
  overflow-y: auto;
  overscroll-behavior: contain;
  border-block: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 70%, var(--surface));
}

.np-bell__foot {
  display: flex;
  justify-content: center;
  padding: 10px 16px;
  font-size: var(--fs-sm);
}

.np-notice-list {
  display: grid;
  gap: 8px;
}

.np-notice {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 13px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
}

a.np-notice:hover {
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 20%, transparent);
}

.np-notice.is-unread {
  background: color-mix(in srgb, var(--brand-soft) 70%, var(--surface));
}

.np-notice__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control);
  background: var(--surface-3);
  color: var(--text-muted);
}

.np-notice.is-unread .np-notice__icon {
  background: var(--brand);
  color: var(--brand-fg);
}

.np-notice__icon .np-icon {
  width: 17px;
  height: 17px;
}

.np-notice__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.np-notice__title {
  display: -webkit-box;
  overflow: hidden;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.np-notice__body {
  display: -webkit-box;
  overflow: hidden;
  color: var(--text-muted);
  font-size: 0.73rem;
  line-height: 1.55;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.np-notice__time {
  color: var(--text-muted);
  font-size: 0.66rem;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   18. Bildirim iletileri (toast)
   ========================================================================== */
.np-toasts {
  position: fixed;
  top: 88px;
  right: 24px;
  z-index: var(--z-toast);
  width: 356px;
  pointer-events: none;
}

.np-toasts__stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.np-toasts__stack:not(:empty) + .np-toasts__stack:not(:empty) {
  margin-top: 14px;
}

.np-toast {
  --toast-bg: var(--surface);
  --toast-border: var(--line);
  --toast-text: var(--text);

  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px;
  border: 1px solid var(--toast-border);
  border-radius: 0.625rem;
  background: var(--toast-bg);
  color: var(--toast-text);
  box-shadow: var(--shadow-toast);
  font-family: ui-sans-serif, system-ui, sans-serif;
  font-size: 13px;
  overflow-wrap: anywhere;
  pointer-events: auto;
  animation: np-toast-in var(--motion-enter) var(--motion-ease);
}

.np-toast[data-type="success"] {
  --toast-bg: var(--toast-success-bg);
  --toast-border: var(--toast-success-border);
  --toast-text: var(--toast-success-text);
}

.np-toast[data-type="info"] {
  --toast-bg: var(--toast-info-bg);
  --toast-border: var(--toast-info-border);
  --toast-text: var(--toast-info-text);
}

.np-toast[data-type="warning"] {
  --toast-bg: var(--toast-warning-bg);
  --toast-border: var(--toast-warning-border);
  --toast-text: var(--toast-warning-text);
}

.np-toast[data-type="error"] {
  --toast-bg: var(--toast-error-bg);
  --toast-border: var(--toast-error-border);
  --toast-text: var(--toast-error-text);
}

.np-toast.is-leaving {
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--motion-exit) var(--motion-ease), transform var(--motion-exit) var(--motion-ease);
}

.np-toast__icon {
  display: none;
  flex: none;
  margin-inline-end: 1px;
}

.np-toast__icon .np-icon {
  width: 16px;
  height: 16px;
}

.np-toast[data-type="success"] .np-toast__icon[data-for="success"],
.np-toast[data-type="error"] .np-toast__icon[data-for="error"],
.np-toast[data-type="warning"] .np-toast__icon[data-for="warning"],
.np-toast[data-type="info"] .np-toast__icon[data-for="info"] {
  display: flex;
}

.np-toast__body {
  min-width: 0;
}

.np-toast__title,
.np-toast__message:first-child {
  font-weight: 500;
  line-height: 1.5;
}

.np-toast__message {
  line-height: 1.4;
}

.np-toast__close {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  border: 1px solid var(--toast-border);
  border-radius: 50%;
  background: var(--toast-bg);
  color: inherit;
  transform: translate(-35%, -35%);
}

.np-toast__close:hover {
  border-color: currentColor;
  background: var(--toast-bg);
  color: inherit;
}

.np-toast__close .np-icon {
  width: 12px;
  height: 12px;
}

@keyframes np-toast-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@media (max-width: 600px) {
  .np-toasts {
    right: 16px;
    left: 16px;
    width: auto;
  }
}

/* ==========================================================================
   19. Boş durum ve iskelet (yükleme sırasında "Yükleniyor…" yazılmaz)
   ========================================================================== */
.np-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 44px 20px;
  text-align: center;
}

.np-empty--compact {
  padding: 24px 16px;
}

.np-empty__icon {
  margin-bottom: 4px;
}

.np-empty__title {
  font-size: var(--fs-md);
  font-weight: 600;
}

.np-empty__text {
  max-width: 46ch;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.np-empty__action {
  margin-top: 6px;
}

.np-skel {
  display: block;
  border-radius: var(--radius-xs);
  background: var(--line-strong);
  animation: np-pulse 1.6s ease-in-out infinite;
}

.np-skel--text {
  width: 100%;
  height: 0.8em;
}

.np-skel--title {
  width: 40%;
  height: 1.1em;
}

.np-skel--circle {
  border-radius: 50%;
}

.np-skel--pill {
  width: 72px;
  height: 22px;
  border-radius: var(--radius-pill);
}

.np-skel--block {
  width: 100%;
  height: 120px;
  border-radius: var(--radius-card);
}

.np-skel-group {
  display: grid;
  gap: 10px;
}

.np-skel-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

@keyframes np-pulse {
  50% {
    opacity: 0.45;
  }
}

/* ==========================================================================
   20. Zaman çizelgesi (konsept 03 değişiklik geçmişi)
   ========================================================================== */
.np-timeline {
  position: relative;
  display: grid;
  gap: 0;
}

.np-timeline__item {
  position: relative;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 14px;
  padding-bottom: 18px;
}

.np-timeline__item:last-child {
  padding-bottom: 0;
}

.np-timeline__item::before {
  content: "";
  position: absolute;
  top: 16px;
  bottom: -2px;
  left: 8px;
  width: 1.5px;
  background: var(--line-strong);
}

.np-timeline__item:last-child::before {
  display: none;
}

.np-timeline__dot {
  position: relative;
  z-index: 1;
  width: 12px;
  height: 12px;
  margin: 4px 0 0 3px;
  border: 1.5px solid var(--text-muted);
  border-radius: 50%;
  background: var(--surface);
}

.np-timeline__item--brand .np-timeline__dot {
  border-color: var(--brand);
  background: var(--brand-soft);
}

.np-timeline__item--success .np-timeline__dot {
  border-color: var(--success);
  background: var(--success-soft);
}

.np-timeline__text {
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.np-timeline__date {
  font-weight: 600;
}

.np-timeline__meta {
  margin-top: 2px;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

/* ==========================================================================
   21. Ağaç (konsept 05 soru yapısı) ve sürükle-bırak (SortableJS sınıfları)
   ========================================================================== */
.np-tree {
  display: grid;
  gap: 2px;
}

.np-tree__item {
  position: relative;
}

.np-tree__row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 6px 10px 6px 6px;
  border-radius: var(--radius-control);
  color: var(--text);
  font-size: 0.85rem;
  text-decoration: none;
  transition: background-color var(--motion-fast) ease;
}

.np-tree__row:hover {
  background: var(--surface-3);
  color: var(--text);
}

.np-tree__row[aria-current="true"],
.np-tree__row.is-selected {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-tree__row:focus-visible {
  outline-offset: -2px;
}

.np-tree__toggle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: var(--text-muted);
}

.np-tree__toggle:hover {
  background: color-mix(in srgb, var(--brand-soft) 70%, transparent);
  color: var(--brand);
}

.np-tree__toggle .np-icon {
  width: 16px;
  height: 16px;
  transition: rotate var(--motion-fast) var(--motion-ease);
}

.np-tree__toggle[aria-expanded="true"] .np-icon {
  rotate: 90deg;
}

.np-tree__spacer {
  flex: none;
  width: 24px;
}

.np-tree__icon {
  width: 17px;
  height: 17px;
  color: var(--text-muted);
}

.np-tree__row.is-selected .np-tree__icon,
.np-tree__row[aria-current="true"] .np-tree__icon {
  color: var(--brand);
}

.np-tree__label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.np-tree__code {
  font-weight: 600;
}

.np-tree__handle {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--text-muted);
  cursor: grab;
  opacity: 0;
  transition: opacity var(--motion-fast) ease;
}

.np-tree__handle .np-icon {
  width: 15px;
  height: 15px;
}

.np-tree__row:hover .np-tree__handle,
.np-tree__row:focus-within .np-tree__handle {
  opacity: 1;
}

@media (pointer: coarse) {
  .np-tree__handle {
    opacity: 1;
  }
}

.np-tree__children {
  position: relative;
  display: grid;
  gap: 2px;
  margin-left: 18px;
  padding-left: 14px;
}

.np-tree__children::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 14px;
  left: 0;
  width: 1px;
  background: var(--line-strong);
}

.np-tree__children > .np-tree__item > .np-tree__row::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -14px;
  width: 12px;
  height: 1px;
  background: var(--line-strong);
}

.np-sortable-ghost {
  border-radius: var(--radius-control);
  background: var(--brand-soft) !important;
  outline: 1.5px dashed var(--brand);
  outline-offset: -1.5px;
  opacity: 0.6;
}

.np-sortable-chosen {
  background: var(--surface-3);
}

.np-sortable-drag {
  box-shadow: var(--shadow-menu);
  opacity: 0.95;
}

/* ==========================================================================
   22. Çipler, etiketler, avatar, ipucu
   ========================================================================== */
.np-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.np-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: 100%;
  min-height: var(--control-md);
  padding: 8px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}

.np-chip:hover {
  border-color: color-mix(in srgb, var(--brand-bright) 40%, var(--line-strong));
  color: var(--brand-strong);
}

.np-chip[aria-pressed="true"],
.np-chip[aria-current="true"],
.np-chip[aria-current="page"],
.np-chip.is-active {
  border-color: color-mix(in srgb, var(--brand) 20%, var(--line));
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-weight: 600;
}

.np-chip__count {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

.np-chip--sm {
  min-height: var(--control-xs);
  padding: 6px 10px;
  font-size: var(--fs-xs);
}

.np-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 0 4px 0 10px;
  border-radius: var(--radius-sm);
  background: var(--surface-3);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  font-weight: 500;
}

.np-tag:not(:has(.np-tag__remove)) {
  padding-right: 10px;
}

.np-tag__remove {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-xs);
  background: transparent;
  color: inherit;
}

.np-tag__remove:hover {
  background: color-mix(in srgb, var(--danger-soft) 80%, transparent);
  color: var(--danger);
}

.np-tag__remove .np-icon {
  width: 14px;
  height: 14px;
}

.np-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  box-shadow: var(--shadow-avatar);
  user-select: none;
}

.np-avatar--sm {
  width: 28px;
  height: 28px;
  font-size: 0.64rem;
}

.np-avatar--lg {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  font-size: 0.875rem;
}

/* Baş harf karosu (konsept 03 "ÖS"). */
.np-avatar--tile {
  width: 60px;
  height: 60px;
  border-radius: var(--radius-card);
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 1.25rem;
  box-shadow: none;
}

[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  z-index: var(--z-menu);
  width: max-content;
  max-width: 260px;
  padding: 6px 9px;
  border-radius: var(--radius-xs);
  background: var(--ink);
  color: var(--ink-fg);
  font-size: var(--fs-2xs);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: center;
  text-transform: none;
  white-space: normal;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 2px);
  transition: opacity var(--motion-fast) ease, transform var(--motion-fast) ease;
  transition-delay: 0s;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: 300ms;
}

[data-tooltip-side="bottom"]::after {
  top: calc(100% + 8px);
  bottom: auto;
}

/* ==========================================================================
   23. Bilgi kutuları: "Yanıtınıza göre açılan bilgiler", uyarı şeridi, bilgi notu
   ========================================================================== */
.np-reveal {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
  border-radius: var(--radius-menu);
  background: color-mix(in srgb, var(--brand-soft) 35%, var(--surface));
  animation: np-reveal-in var(--motion-section) var(--motion-ease);
}

.np-reveal__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.np-reveal__head .np-icon {
  width: 17px;
  height: 17px;
  color: var(--brand);
}

.np-reveal__body {
  display: grid;
  gap: 16px;
  padding: 16px;
}

@keyframes np-reveal-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
}

.np-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius-control);
  background: var(--brand-soft);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}

.np-callout > .np-icon {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--brand);
}

.np-callout__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  overflow-wrap: anywhere;
}

.np-callout__title {
  color: var(--text);
  font-weight: 600;
}

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

.np-callout--success {
  background: var(--success-soft);
}

.np-callout--success > .np-icon {
  color: var(--success);
}

.np-callout--warning {
  background: var(--warning-soft);
}

.np-callout--warning > .np-icon {
  color: var(--warning);
}

.np-callout--danger {
  background: var(--danger-soft);
}

.np-callout--danger > .np-icon {
  color: var(--danger);
}

.np-callout--neutral {
  background: var(--surface-3);
}

.np-callout--neutral > .np-icon {
  color: var(--text-muted);
}

/* "Yeni belge bekleniyor" şeridi (konsept 03). */
.np-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 14px;
}

.np-strip__text {
  display: flex;
  flex: 1 1 220px;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: var(--radius-control);
  background: var(--warning-soft);
  color: var(--warning-ink);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.np-strip__text .np-icon {
  width: 18px;
  height: 18px;
  color: var(--warning);
}

.np-strip--info .np-strip__text {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-strip--info .np-strip__text .np-icon {
  color: var(--brand);
}

.np-strip--danger .np-strip__text {
  background: var(--danger-soft);
  color: var(--danger-ink);
}

.np-strip--danger .np-strip__text .np-icon {
  color: var(--danger);
}

/* ==========================================================================
   24. Otomatik kayıt göstergesi ("✓ Değişiklikler kaydedildi")
   ========================================================================== */
.np-autosave {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.np-autosave__status,
.np-autosave__alert {
  display: contents;
}

.np-autosave__saving,
.np-autosave__saved,
.np-autosave__invalid,
.np-autosave__error {
  display: none;
  align-items: center;
  gap: 8px;
}

.np-autosave[data-state="saving"] .np-autosave__saving,
.np-autosave[data-state="saved"] .np-autosave__saved,
.np-autosave[data-state="invalid"] .np-autosave__invalid,
.np-autosave[data-state="error"] .np-autosave__error {
  display: inline-flex;
}

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

.np-autosave__saved {
  color: var(--success-ink);
}

.np-autosave__saved .np-icon {
  width: 20px;
  height: 20px;
  color: var(--success);
}

.np-autosave__invalid {
  color: var(--warning-ink);
}

.np-autosave__invalid .np-icon {
  color: var(--warning);
}

.np-autosave__invalid .np-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.np-autosave__error {
  flex-wrap: wrap;
  color: var(--danger-ink);
}

.np-autosave__invalid .np-icon,
.np-autosave__error .np-icon {
  width: 18px;
  height: 18px;
}

/* Yapışkan eylem çubuğu (EKRANLAR.md 3.2): gösterge ve Geri / "Devam et →" içerik sütununun altında görünür kalır. */
.np-actionbar {
  position: sticky;
  bottom: var(--space-3);
  z-index: var(--z-sticky);
  flex-wrap: wrap;
  gap: var(--space-3);
  box-shadow: var(--shadow-panel);
}

/* ==========================================================================
   25. İçerik desenleri: bölüm kartı (konsept 01), satır listesi, etiket–değer (konsept 03)
   ========================================================================== */
.np-section-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
  color: inherit;
  text-decoration: none;
  transition: border-color var(--motion-fast) var(--motion-ease), box-shadow var(--motion-enter) var(--motion-ease);
}

a.np-section-card:hover {
  border-color: var(--brand-bright);
  box-shadow: var(--shadow-card), 0 0 0 1px color-mix(in srgb, var(--brand) 12%, transparent);
  color: inherit;
}

a.np-section-card:focus-visible {
  border-color: var(--brand);
}

.np-section-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
}

.np-section-card__text {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.np-section-card__title {
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 600;
  line-height: 1.35;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* K101 (UX-07): dar kartta simge, aralık ve başlık bir kademe küçülür; başlık sözcüğün ortasından bölünmez ("Yapılandırmala / r"
   1366 px'te 210 px'lik kartta oluyordu). Sığmayan uzun sözcük tirelenir. */
.np-section-card {
  container: np-section-card / inline-size;
}

@container np-section-card (max-width: 15rem) {
  .np-section-card__head {
    gap: 10px;
  }

  .np-section-card__head .np-icon-tile {
    width: 32px;
    height: 32px;
    border-radius: 9px;
  }

  .np-section-card__title {
    font-size: var(--fs-base);
  }
}

.np-section-card .np-progress {
  margin-top: auto;
}

.np-list {
  display: grid;
}

.np-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.np-list__item:first-child {
  border-top: 0;
}

a.np-list__item:hover {
  color: var(--brand-strong);
}

a.np-list__item:hover .np-list__chevron {
  color: var(--brand);
}

a.np-list__item:focus-visible {
  border-radius: var(--radius-sm);
  outline-offset: 0;
}

.np-list__icon {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.np-list__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.4;
}

.np-list__meta {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 400;
}

.np-list__chevron {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
  transition: transform var(--motion-fast) var(--motion-ease), color var(--motion-fast) ease;
}

/* Gecikmiş son tarih: renk + "Gecikti" metni (durum yalnız renkle verilmez). */
.np-list__meta.is-overdue {
  color: var(--danger-ink);
  font-weight: 600;
}

/* Kart altındaki "Tümünü gör (n)" bağlantısı. */
.np-list__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: var(--fs-sm);
  font-weight: 600;
}

.np-kv {
  display: grid;
  margin: 0;
}

.np-kv__row {
  display: grid;
  grid-template-columns: minmax(110px, 34%) minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 38px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}

.np-kv__row:last-child {
  border-bottom: 0;
}

.np-kv dt {
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

.np-kv dd {
  margin: 0;
  min-width: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

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

@media (max-width: 479.98px) {
  .np-kv__row {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
}

/* ==========================================================================
   26. PDKS AuthFrame / login.module.css (K111): kaynak değerleri ve kırılımları
   ========================================================================== */
.np-auth {
  position: relative;
  min-height: 100svh;
  padding: clamp(18px, 4vw, 42px);
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 12%, color-mix(in srgb, var(--brand) 9%, transparent), transparent 28rem),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--brand-bright) 7%, transparent), transparent 30rem),
    var(--bg);
}

.np-auth::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: 0.42;
  background-image:
    linear-gradient(color-mix(in srgb, var(--line-strong) 50%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--line-strong) 50%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(circle at center, #000 0, transparent 75%);
  mask-image: radial-gradient(circle at center, #000 0, transparent 75%);
}

.np-auth__card {
  position: relative;
  z-index: 1;
  width: min(100%, 1000px);
  min-height: min(660px, calc(100svh - 56px));
  display: grid;
  grid-template-columns: minmax(340px, 0.9fr) minmax(430px, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  animation: npAuthFrameIn var(--motion-enter) var(--motion-ease) backwards;
}

.np-auth__brand {
  position: relative;
  min-width: 0;
  padding: clamp(30px, 4vw, 46px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--line);
  background:
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--brand-bright) 11%, transparent), transparent 20rem),
    linear-gradient(155deg, var(--surface-2), color-mix(in srgb, var(--surface-3) 72%, var(--surface)));
}

.np-auth__brand::after {
  position: absolute;
  right: -74px;
  bottom: -86px;
  width: 250px;
  height: 250px;
  border: 42px solid color-mix(in srgb, var(--brand) 5%, transparent);
  border-radius: 50%;
  content: "";
  pointer-events: none;
}

.np-auth__brand-header,
.np-auth__brand-body {
  position: relative;
  z-index: 1;
}

.np-auth__brand-body {
  margin: auto 0;
  padding: 42px 0;
}

.np-auth__eyebrow,
.np-auth__header > p {
  margin: 0;
  color: var(--brand);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.np-auth__brand-body h2 {
  max-width: 11ch;
  margin: 15px 0 0;
  color: var(--text);
  font-size: clamp(2.35rem, 4vw, 3.45rem);
  font-weight: 750;
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.np-auth__lead {
  max-width: 39ch;
  margin: 20px 0 0;
  color: var(--text-muted);
  font-size: 0.86rem;
  line-height: 1.7;
}

.np-auth__steps {
  position: relative;
  margin: 34px 0 0;
  padding: 6px 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.np-auth__steps::before {
  position: absolute;
  top: 26px;
  bottom: 26px;
  left: 19px;
  width: 1px;
  content: "";
  background: linear-gradient(var(--brand), color-mix(in srgb, var(--brand) 15%, var(--line)));
  transform-origin: top;
  animation: npAuthFlowLineIn 340ms var(--motion-ease) 60ms backwards;
}

.np-auth__steps li {
  position: relative;
  min-height: 48px;
  padding: 5px 8px 5px 0;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.np-auth__step-icon {
  z-index: 1;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--brand) 16%, var(--line));
  border-radius: 10px;
  color: var(--brand);
  background: var(--surface);
  box-shadow: 0 8px 20px -17px color-mix(in srgb, var(--brand) 75%, transparent);
}

.np-auth__step-icon svg {
  width: 17px;
  height: 17px;
}

.np-auth__step-copy {
  min-width: 0;
  display: grid;
  gap: 2px;
}

.np-auth__step-copy strong {
  color: var(--text);
  font-size: 0.79rem;
  font-weight: 700;
}

.np-auth__step-copy small {
  color: var(--text-muted);
  font-size: 0.69rem;
}

.np-auth__step-number {
  color: color-mix(in srgb, var(--text-muted) 58%, transparent);
  font-family: var(--font-sans);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.np-auth__form {
  position: relative;
  min-width: 0;
  padding: clamp(36px, 6vw, 68px);
  display: flex;
  align-items: center;
  background: var(--surface);
}

.np-auth__content {
  width: min(100%, 410px);
  margin: 0 auto;
}

.np-auth__header {
  margin-bottom: 28px;
}

.np-auth__header h1 {
  margin: 10px 0 0;
  color: var(--text);
  font-size: clamp(2rem, 3.6vw, 2.55rem);
  font-weight: 750;
  letter-spacing: -0.045em;
  line-height: 1.08;
}

.np-auth__header > span {
  margin-top: 9px;
  display: block;
  color: var(--text-muted);
  font-size: 0.87rem;
}

.np-auth__login-form {
  display: grid;
  gap: 18px;
}

.np-auth__login-form .np-field {
  display: grid;
  gap: 8px;
}

.np-field__label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.np-auth__form .np-label {
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 700;
}

.np-auth__form .np-input {
  height: 44px;
  padding-inline: 14px;
  border-color: var(--line-strong);
  border-radius: 10px;
  color: var(--text);
  background: var(--surface-2);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface) 72%, transparent);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 180ms ease;
}

.np-auth__form .np-input:hover {
  border-color: color-mix(in srgb, var(--brand) 24%, var(--line-strong));
}

.np-auth__form .np-input:focus-visible {
  border-color: var(--brand);
  background: var(--surface);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 12%, transparent);
}

.np-auth__form .np-input:-webkit-autofill,
.np-auth__form .np-input:-webkit-autofill:hover,
.np-auth__form .np-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text);
  animation: npAuthAutofillDetected 1ms;
  box-shadow: 0 0 0 1000px var(--surface-2) inset;
  transition: background-color 9999s ease-out 0s;
}

.np-auth__forgot {
  color: var(--brand-strong);
  font-size: 0.75rem;
  font-weight: 650;
  text-decoration: none;
  text-underline-offset: 4px;
}

.np-auth__forgot:hover {
  text-decoration: underline;
}

.np-auth__submit {
  position: relative;
  width: 100%;
  height: 46px;
  margin-top: 2px;
  padding-inline: 17px;
  justify-content: center;
  border-radius: 10px;
  background: var(--brand);
  color: var(--brand-fg);
  font-size: 0.88rem;
  font-weight: 750;
  box-shadow: 0 14px 25px -18px color-mix(in srgb, var(--brand) 88%, transparent);
}

.np-auth__submit-arrow {
  position: absolute;
  right: 17px;
}

.np-auth__submit:hover {
  background: var(--brand-strong);
}

.np-auth__submit svg {
  width: 17px;
  height: 17px;
  transition: transform 180ms ease;
}

.np-auth__submit:not(:disabled):hover .np-auth__submit-arrow {
  transform: translateX(3px);
}

@keyframes npAuthAutofillDetected {
  from {
    opacity: 0.999;
  }
  to {
    opacity: 1;
  }
}

.np-auth__status .np-callout {
  padding: 10px 12px;
  border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent);
  border-radius: 10px;
  color: var(--danger);
  background: var(--danger-soft);
  font-size: 0.78rem;
  line-height: 1.5;
}

.np-auth__notice {
  margin-top: 28px;
  padding-top: 20px;
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 10px;
  border-top: 1px solid var(--line);
  color: var(--text-muted);
}

.np-auth__notice svg {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  color: var(--brand);
}

.np-auth__notice p {
  margin: 0;
  font-size: 0.67rem;
  line-height: 1.65;
}

@keyframes npAuthFrameIn {
  from {
    opacity: 0;
    transform: translateY(6px) scale(0.992);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes npAuthFlowLineIn {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@media (max-width: 800px) {
  .np-auth {
      padding: 16px;
      place-items: start center;
      overflow: auto;
    }

  .np-auth__card {
      width: min(100%, 560px);
      min-height: 0;
      grid-template-columns: 1fr;
      border-radius: 18px;
    }

  .np-auth__brand {
      padding: 22px 24px 20px;
      gap: 18px;
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }

  .np-auth__brand::after {
      right: -94px;
      bottom: -126px;
    }

  .np-auth__brand-body {
      margin: 0;
      padding: 0;
    }

  .np-auth__brand-body h2 {
      max-width: none;
      margin-top: 8px;
      font-size: clamp(1.4rem, 6vw, 1.75rem);
      letter-spacing: -0.035em;
    }

  .np-auth__lead,
  .np-auth__steps {
      display: none;
    }

  .np-auth__form {
      padding: 30px 24px 24px;
    }

  .np-auth__content {
      width: 100%;
    }

  .np-auth__header {
      margin-bottom: 24px;
    }

  .np-auth__header h1 {
      font-size: 1.85rem;
    }

  .np-auth__notice {
      margin-top: 24px;
      padding-top: 17px;
    }
}

@media (max-width: 420px) {
  .np-auth {
      padding: 10px;
    }

  .np-auth__brand,
  .np-auth__form {
      padding-inline: 20px;
    }

  .np-field__label-row {
      align-items: flex-start;
    }
}

@media (max-width: 620px) {
  .np-auth__brand {
      padding-block: 19px;
    }

  .np-auth__brand-body {
      display: none;
    }
}

@media (min-width: 801px) and (max-height: 720px) {
  .np-auth {
      place-items: start center;
      overflow: auto;
    }

  .np-auth__card {
      min-height: 640px;
    }
}

@media (prefers-reduced-motion: reduce) {
  .np-auth__card,
  .np-auth__steps::before {
      animation: none;
    }

  .np-auth__submit svg {
      transition: none;
    }
}

/* Müşteri portalının marka işareti ve mevcut hesap işlevleri. PDKS Logo: 42/32 px, 12 px ara. */
.np-auth { line-height: 1.55; }
/* Genel ol[class] sıfırlamasından daha belirgin: PDKS akışının 34/6 px boşluğu korunur. */
.np-auth__brand-body > .np-auth__steps { margin: 34px 0 0; padding: 6px 0; }
.np-auth__content:not(.np-auth__content--login) { display: grid; gap: 24px; }
.np-auth__title { color: var(--text); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 750; letter-spacing: -0.045em; line-height: 1.08; }
.np-auth__subtitle { margin-top: 9px; color: var(--text-muted); font-size: 0.87rem; }
.np-auth__form .np-input { padding-block: 4px; font-size: 0.875rem; font-weight: 400; line-height: 20px; outline: none; }
.np-auth__login-form .np-label { align-items: center; gap: 8px; line-height: 1; }
.np-auth__form .np-input-group .np-input { padding-right: 44px; }
.np-auth__form .np-input[aria-invalid="true"] { border-color: var(--danger); }
.np-auth__login-form .np-required { display: none; }
.np-auth__status { display: grid; align-content: start; gap: 8px; min-height: 44px; }
.np-auth__remember { font-size: 0.75rem; font-weight: 400; }
.np-turnstile { min-height: 65px; }
.np-auth__alt { padding-top: 20px; border-top: 1px solid var(--line); color: var(--text-muted); font-size: 0.75rem; text-align: center; }
@media (max-width: 767.98px) { .np-auth__form .np-input { font-size: 1rem; line-height: 24px; } }

/* ==========================================================================
   27. Hata sayfası (404, 403, 500 + izleme kimliği)
   ========================================================================== */
.np-error-page {
  display: grid;
  place-items: center;
  min-height: 100dvh;
  padding: 32px 16px;
  background: var(--page-glow), var(--bg);
}

.np-error-card {
  display: grid;
  justify-items: center;
  gap: 14px;
  width: min(560px, 100%);
  padding: 36px 32px 32px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--surface);
  box-shadow: var(--shadow-float);
  text-align: center;
}

.np-error-code {
  color: var(--brand);
  font-size: 3.4rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.04em;
  line-height: 1;
}

.np-error-title {
  font-size: var(--fs-xl);
  letter-spacing: -0.02em;
}

.np-error-text {
  max-width: 46ch;
  color: var(--text-muted);
}

.np-error-trace {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.np-error-trace code {
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  background: var(--surface-3);
  color: var(--text);
  user-select: all;
}

/* ==========================================================================
   28. Özet ve yönlendirme kartları, satır içi hata, iskelet ölçüleri
   ========================================================================== */

/* Tamamlanma kartı (konsept 01): başlık + çubuk, büyük yüzde, son kayıt, birincil eylem. */
.np-completion {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 14px 24px;
  padding: 20px 22px;
}

@container np-page (min-width: 52rem) {
  .np-completion {
    grid-template-columns: minmax(0, 1fr) auto auto auto;
  }

  .np-completion__meta {
    padding-left: 24px;
    border-left: 1px solid var(--line-strong);
  }
}

.np-completion__main {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.np-completion__title {
  font-size: var(--fs-md);
  font-weight: 600;
}

.np-completion__value {
  color: var(--text);
  font-size: var(--fs-stat);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1;
}

.np-completion__meta {
  color: var(--text-muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

/* Yüzdeye girmeyen ayrıntı (K34): "İsteğe bağlı sorular: 12/40". */
.np-completion__detail {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* Sunucunun htmx hata parçası (HxExceptionFilter): kısa ileti + alan hataları. */
.np-inline-error {
  display: grid;
  gap: 6px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--danger) 25%, var(--line));
  border-radius: var(--radius-control);
  background: var(--danger-soft);
  color: var(--danger-ink);
  font-size: var(--fs-sm);
}

.np-inline-error__message {
  font-weight: 600;
}

.np-inline-error__fields {
  margin: 0;
  padding-left: 1.2em;
}

/* Görev satırı (yan panel "Yapılacaklar"): ikon karosu, başlık + sorumlu, durum rozeti, ok. */
.np-task-list {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-menu);
  background: var(--surface);
}

.np-task {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 12px 14px;
  border-top: 1px solid var(--line);
  color: var(--text);
  text-decoration: none;
}

.np-task:first-child {
  border-top: 0;
}

a.np-task:hover {
  background: color-mix(in srgb, var(--brand-soft) 40%, var(--surface));
  color: var(--text);
}

.np-task__text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.np-task__title {
  font-size: var(--fs-base);
  font-weight: 600;
}

.np-task__meta {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.np-task > .np-icon:last-child {
  width: 18px;
  height: 18px;
  color: var(--text-muted);
}

/* Not kutusu (ekip notu). */
.np-note {
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface-2);
  color: var(--text);
  font-size: var(--fs-sm);
  line-height: 1.6;
  white-space: pre-line;
}

.np-skel--w25 {
  width: 25%;
}

.np-skel--w40 {
  width: 40%;
}

.np-skel--w60 {
  width: 60%;
}

.np-skel--w80 {
  width: 80%;
}

.np-skel--field {
  width: 100%;
  height: var(--field-height);
  border-radius: var(--radius-control);
}

.np-skel--tile {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 9px;
}

.np-skel--bar {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
}

/* ==========================================================================
   28b. Dokunma hedefi: dokunmatik ekranda etkileşimli öğeler en az 44 × 44 px (DESIGN.md §9)
   ========================================================================== */
@media (pointer: coarse) {
  .np-btn,
  .np-tool-btn,
  .np-icon-btn,
  .np-user__btn,
  .np-nav__item,
  .np-menu__item,
  .np-chip,
  .np-tab,
  .np-tabbar__item,
  .np-pager__page,
  .np-statstrip__item,
  .np-tree__toggle {
    min-height: var(--touch-target);
  }

  .np-tool-btn,
  .np-icon-btn,
  .np-tree__toggle,
  .np-pager__page {
    min-width: var(--touch-target);
  }

  .np-check,
  .np-switch-row {
    min-height: var(--touch-target);
    align-items: center;
  }
}

/* ==========================================================================
   29. Hareket azaltma ve yazdırma
   ========================================================================== */
@media (prefers-reduced-motion: reduce), print {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .np-skel {
    animation: none !important;
  }

  /* Kenardan açılan panel, pencere ve iletiler kaymadan yerinde belirir. */
  .np-drawer,
  .np-modal,
  .np-toast,
  .np-swap > * {
    transform: none !important;
  }
}

@media print {
  .np-sidebar,
  .np-topbar,
  .np-drawer,
  .np-drawer-backdrop,
  .np-toasts,
  .np-skip,
  .np-page-header__actions,
  .np-actionbar {
    display: none !important;
  }

  .np-shell {
    display: block;
  }

  .np-main {
    padding: 0 !important;
  }

  .np-content {
    max-width: none;
    padding: 0;
  }

  .np-card,
  .np-table-card,
  .np-section-card {
    box-shadow: none;
    break-inside: avoid;
  }

  /* Yazdırma temadan bağımsız beyaz zemindir. */
  body {
    background: var(--print-bg);
  }
}

/* ==========================================================================
   panolar: genel bakışlar, "Profilimi tamamladım", denetim günlüğü (EKRANLAR.md 3.1, 3.2, 4.1, 4.6)
   ========================================================================== */

/* Bilgi başlıkları (konsept 01, EKRANLAR.md 3.1): en çok üç sütun; kart en az 210 px (1440 px'te sağ sütunun yanında üç sütun), dar
   alanda iki ve tek sütun. */
.np-section-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, max(210px, calc((100% - 2 * var(--space-4)) / 3))), 1fr));
}

/* Ekip genel bakışının altı sayacı (DESIGN.md §1: özet sayılar mümkün olduğunda tek şeritte): geniş kapsayıcıda tek satır, daralınca
   3 + 3, telefonda 2 + 2 + 2, en dar ekranda alt alta. Eşikler kart etiketinin ("GÜNCELLEME GEREKLİ") sözcük bölmeden sığdığı genişliktir. */
.np-stat-grid--6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

@container np-page (max-width: 64rem) {
  .np-stat-grid--6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@container np-page (max-width: 40rem) {
  .np-stat-grid--6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container np-page (max-width: 22rem) {
  .np-stat-grid--6 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* "Profilimi tamamladım": tamamlanma kartının altında tam genişlik satır (ileti + düğmeler). */
.np-profile-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 16px;
  grid-column: 1 / -1;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.np-profile-submit__text {
  display: flex;
  flex: 1 1 18rem;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.np-profile-submit__text .np-icon {
  flex: none;
  width: 18px;
  height: 18px;
}

.np-profile-submit__text--done {
  color: var(--success-ink);
  font-weight: 600;
}

.np-profile-submit__text--ask {
  color: var(--warning-ink);
  font-weight: 600;
}

.np-profile-submit__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Kurulum kartı (ekip genel bakışı, Yönetici): adım satırları; tamamlanan adım onay ikonlu ve soluk. */
.np-setup-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-setup-steps__item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  font-size: var(--fs-base);
}

.np-setup-steps__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--neutral);
}

.np-setup-steps__item.is-done .np-setup-steps__icon {
  color: var(--success);
}

.np-setup-steps__item.is-done .np-link {
  color: var(--text-muted);
  font-weight: 500;
}

/* K101 (UX-03): pano kurulumu tek satırlık çubuktur; adımlar yan yana sarılır, bekleyen işleri aşağı itmez. */
.np-setup-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.np-setup-bar__title {
  font-size: var(--fs-base);
  font-weight: 700;
}

.np-setup-bar__count {
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.np-setup-steps--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.np-setup-steps--inline .np-setup-steps__item {
  gap: 6px;
  font-size: var(--fs-sm);
}

.np-setup-steps--inline .np-setup-steps__icon {
  width: 16px;
  height: 16px;
}

/* Denetim günlüğü: zaman ve eylem kırılmaz; ayrıntıda alan / önce / sonra tablosu kendi genişliğinde kırılır (yatay kaydırma yok). */
.np-audit-time {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.np-audit-action {
  display: block;
  min-width: 9rem;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
}

/* K101 (UX-06): uzun eylem, kimlik ve özet tabloyu genişletmez; kayıt kimliği kısaltılır, özet iki satırla sınırlıdır, tamamı
   ayrıntı panelindedir. */
.np-audit-entity {
  max-width: 10rem;
}

.np-audit-summary {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.np-audit-changes {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  table-layout: fixed;
}

.np-audit-changes th,
.np-audit-changes td {
  padding: 8px 6px;
  border-bottom: 1px solid var(--line);
  overflow-wrap: anywhere;
  text-align: left;
  vertical-align: top;
}

.np-audit-changes thead th {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.np-audit-changes tbody th {
  font-weight: 600;
}

.np-audit-changes__old {
  color: var(--text-muted);
}

/* ==========================================================================
   duzeltme: kriter oluşturucu yerleşimi (EKRANLAR.md 4.5), profil adım başlığı, kayıt sekmeleri ve takvim düğmesi (3.2),
   kullanıcı süzgeç satırı ve tablosu (4.6)
   ========================================================================== */

/* Soru kütüphanesi ve kriter düzenleyici. Dar ekranda düzenleyici salt okunur (K103). */
.np-builder,
.np-builder__work {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.np-builder__tree,
.np-builder__side,
.np-criteria-editor-modal .np-builder__editor {
  border: 0;
  box-shadow: none;
}

.np-criteria-editor-modal .np-builder__editor > .np-card__body {
  padding: 0;
}

.np-builder__editor {
  min-width: 0;
}

/* Kapalı menü yer kaplamaz: görünmez şablon ve taşıma menüleri dar ekranda sayfayı yatay kaydırıyordu. */
.np-builder .np-menu:not(.is-open) {
  display: none;
}

.np-builder__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.25rem, 36%);
  gap: var(--space-2);
}

.np-builder #kriter-agac-liste {
  max-height: clamp(12rem, 100dvh - 28rem, 38rem);
  overflow: auto;
  scrollbar-gutter: stable;
  padding: 2px var(--space-1) 2px 2px;
}

.np-builder__result-count { padding: 0 var(--space-2); }

.np-builder__library-actions {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.np-criteria-tabs { flex-wrap: wrap; }
.np-criteria-table .np-tree__handle { opacity: 1; }
.np-criteria-order {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
}
.np-criteria-order .np-input { width: 7rem; }

.np-builder__tree .np-tree,
.np-builder__tree .np-tree__children {
  grid-template-columns: minmax(0, 1fr);
}

.np-builder__tree .np-tree__children {
  margin-left: var(--space-3);
  padding-left: var(--space-2);
}

.np-builder__tree .np-tree__row {
  gap: var(--space-1);
  border: 1px solid transparent;
}

.np-builder__tree .np-tree__row.is-selected {
  border-color: color-mix(in srgb, var(--brand) 32%, var(--line));
}

.np-builder__tree .np-tree__spacer { display: none; }

.np-builder__tree .np-tree__label {
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  line-height: 1.4;
  text-align: start;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.np-builder__tree .np-builder__question-link {
  display: grid;
  gap: 2px;
  padding-block: var(--space-1);
  color: inherit;
  text-decoration: none;
}

.np-builder__question-link .np-tree__code {
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.is-selected .np-builder__question-link .np-tree__code { color: inherit; }

.np-builder__question-text {
  display: -webkit-box;
  overflow: hidden;
  overflow-wrap: anywhere;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.np-builder__edit-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
}

.np-builder__edit-head > :first-child {
  flex: 1 1 22rem;
  min-width: 0;
}

.np-builder__question-title {
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: 600;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

/* Sekmelerin alanları aynı otomatik kayıt formunda gönderilir. */
.np-builder__form {
  display: grid;
  min-width: 0;
  gap: var(--space-4);
}

.np-builder__palette,
.np-builder__narrow { display: none; }

@media (min-width: 1024px) {
  .np-builder { grid-template-columns: clamp(19rem, 34%, 27rem) minmax(0, 1fr); }
}

@media (min-width: 1280px) and (min-height: 720px) {
  .np-builder__tree {
    position: sticky;
    top: calc(var(--topbar-height) + var(--space-4));
  }
}

@media (max-width: 400px) {
  .np-builder__filters { grid-template-columns: minmax(0, 1fr); }
}

/* 1024 px altında oluşturucu salt okunurdur: not görünür, yazma düğmeleri ve sürükleme tutamakları gizlenir (alanları kriter.js kapatır). */
@media (max-width: 1023.98px) {
  .np-builder__narrow {
    display: flex;
  }

  .np-builder__write,
  .np-builder .np-tree__handle {
    display: none !important;
  }
}

/* Seçenek satırı (orta sütun dardır): metin ve satır düğmeleri tek satırda; Kod, anlam ve anahtarlar alt satırda yan yana. */
.np-builder__row-main {
  flex-wrap: nowrap;
}

.np-builder__row-main > .np-input {
  flex: 1 1 auto;
  width: auto;
}

.np-builder__row-main > .np-icon-btn {
  flex: none;
}

.np-builder__row-meta > .np-input,
.np-builder__row-meta > .np-select {
  flex: 1 1 8rem;
  width: auto;
}

.np-builder__types {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 8.5rem), 1fr));
}

.np-builder__types > .np-btn {
  justify-content: flex-start;
}

#k-ayar-sunum,
.np-builder__settings > :is(section, fieldset) ~ .np-builder__panel {
  padding-top: var(--space-4);
  border-top: 1px solid var(--line);
}

.np-builder__panel-title {
  margin: 0;
  font-size: var(--fs-base);
  font-weight: 600;
}

/* Profil adım başlığı (EKRANLAR.md 3.2): dar alanda başlık ve "Bu adımda {n} soru · {m} eksik" alt alta. */
.np-step-head {
  flex-wrap: wrap;
}

.np-step-head > .np-card__heading {
  flex: 1 1 20rem;
}

.np-step-head__summary {
  flex: 0 1 auto;
  max-width: 100%;
}

/* Tekrarlı grubun kayıt sekmeleri: tek satır; sığmayanlar "Diğer ▾" menüsünde (profil.js). 640 px altında sekmeler yerine
   "Belge 1 / 3" seçici ve ‹ › (konsept 03). Kurallar profil.js grubu hazırlayınca (data-np-items-ready) geçerlidir; betik yoksa sekmeler
   eskisi gibi alt satıra kayar. */
.np-items-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.np-items-bar {
  display: flex;
  flex: 1 1 18rem;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Sekmelerin toplam genişliği atalara yansımaz: "Yanıtınıza göre açılan bilgiler" ızgarası (np-reveal__body) içerikle genişleyip
   ölçülen yeri büyütüyor, sığmayan sekme menüye geçmeden kırpılıyordu. */
[data-np-items-ready] .np-items-bar {
  contain: inline-size;
}

/* Sığmayan sekme menüye geçer; iç boşluk odak halkasının kırpılmasını önler. */
[data-np-items-ready] .np-items-bar > [role="tablist"] {
  flex-wrap: nowrap;
  min-width: 0;
  margin: -4px;
  padding: 4px;
  overflow: hidden;
}

/* Sekme daralmaz (eksik noktası alt satıra düşmez); sığmayan sekme küçülmek yerine menüye geçer. */
[data-np-items-ready] .np-items-bar > [role="tablist"] > .np-tab {
  flex-shrink: 0;
}

.np-items-bar .np-tab.is-overflow {
  display: none;
}

.np-item-picker {
  display: none;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* Seçici tek satırdır: uzun kayıt başlığı kutudan taşmaz, ok simgesinden önce (içerik kutusunda) kırpılır; tamamı açılan listededir. */
.np-item-picker__select {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: clip;
  overflow-clip-margin: content-box;
}

/* Uçtaki ok odakta kalır (disabled odağı düşürürdü); kapalı olduğu soluk çizilir. */
.np-item-picker [aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

@media (max-width: 639.98px) {
  [data-np-items-ready] .np-items-bar {
    display: none;
  }

  [data-np-items-ready] .np-item-picker {
    display: flex;
    flex: 1 1 100%;
  }
}

/* Tarih alanının takvim düğmesi ve ay görünümü (EKRANLAR.md 3.2; Alpine bileşeni profilTakvim). */
.np-date {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.np-date > .np-input {
  flex: 1 1 auto;
}

.np-date__toggle {
  flex: none;
}

/* Görünüm alanına göre konumlanır (profilTakvim.place): "Yanıtınıza göre açılan bilgiler" paneli taşanı kırpar (overflow: hidden). */
.np-date__panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-menu);
  width: 19rem;
  max-width: calc(100vw - 16px);
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-menu);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-menu);
}

.np-date__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: 6px;
}

.np-date__month {
  font-size: var(--fs-sm);
  font-weight: 600;
}

.np-date__grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.np-date__grid th {
  padding: 4px 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
  text-align: center;
}

/* Gün hücresi (APG tarih seçici: hücre odak alır, seçili gün aria-selected, bugün aria-current="date"). */
.np-date__day {
  height: 36px;
  padding: 0;
  border-radius: var(--radius-xs);
  color: var(--text);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  text-align: center;
  cursor: pointer;
}

.np-date__day:hover {
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-date__day:focus-visible {
  outline-offset: -2px;
}

.np-date__day.is-outside {
  color: var(--text-muted);
}

.np-date__day[aria-current="date"] {
  box-shadow: inset 0 0 0 1px var(--brand);
  font-weight: 700;
}

.np-date__day[aria-selected="true"] {
  background: var(--brand);
  color: var(--brand-fg);
}

@media (pointer: coarse) {
  .np-date__day {
    height: var(--touch-target);
  }
}

/* Kullanıcı tablosu: e-posta ve uzun başlık gerektiğinde kırılır (tablo geniş ekranda kendi alanında kaymaz); kapalı satır menüsü
   kaydırma alanını büyütmez (gizli menü yer kaplayınca tabloya gereksiz kaydırma çubuğu çıkıyordu). */
.np-user-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.np-user-cell .np-cell-sub {
  overflow-wrap: anywhere;
}

.np-users-table th.np-th-wrap {
  min-width: 7.5rem;
  white-space: normal;
}

.np-criteria-table .np-table-scroll .np-menu:not(.is-open),
.np-users-table .np-table-scroll .np-menu:not(.is-open),
.np-doc-types-table .np-table-scroll .np-menu:not(.is-open),
.np-customers-table .np-table-scroll .np-menu:not(.is-open) {
  display: none;
}

/* K110: geniş ekranda da dikey sınır geçerlidir; satır menüleri app.js ile görünüm alanına sabitlenir. */

/* ==========================================================================
   Belgeler (belge): dosya alanının yükleme ilerlemesi ve satır işlemleri, belge listesi (640 px altında kart), önceki sürümler,
   belge türünün ilgili soruları
   ========================================================================== */
.np-upload {
  display: none;
  align-items: center;
  gap: 10px;
}

/* htmx isteğin süresince göstergeye htmx-request yazar (hx-indicator); yüzdeyi belge-dosya.js doldurur, betik yoksa çubuk belirsizdir. */
.np-upload.htmx-request {
  display: flex;
}

.np-upload__bar {
  flex: 1 1 auto;
  min-width: 0;
  height: 8px;
  accent-color: var(--brand);
}

.np-upload__text {
  flex: none;
  min-width: 3.5em;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  text-align: end;
}

.np-file-list__actions {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 10px;
}

.np-doc-table__main > .np-cell-sub > .np-icon {
  margin-inline-end: var(--space-2);
}

.np-doc-versions summary {
  width: fit-content;
  color: var(--brand);
  font-size: var(--fs-xs);
  font-weight: 600;
  cursor: pointer;
}

.np-doc-versions ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

/* Belge tablosu: kapalı satır menüsü kaydırma alanını büyütmez (gizli menü yer kaplayınca tek satırlı tabloda bile dikey kaydırma
   çubuğu çıkıyordu). Tablo geniş ekranda da kayabildiği için alan kırpmaya açık kalır; açık menü için alan uzar (npDropdown). */
.np-doc-list .np-table-scroll .np-menu:not(.is-open) {
  display: none;
}

/* K101 (UX-16): hiç belge yokken süzgeç gizlidir; ilk belge yüklenip liste bölgesi yenilenince görünür. */
.np-doc-root:has(> .np-doc-list[data-np-empty="true"]) > .np-doc-filter {
  display: none;
}

.np-customer-preview__section {
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.np-customer-preview__section:first-child {
  padding-top: 0;
  border-top: 0;
}

.np-customer-preview__section:last-child { padding-bottom: 0; }

.np-customer-preview__section > .np-tabs { align-self: flex-start; }

.np-doc-type-form .np-divider {
  flex: none;
  margin: 0;
}

.np-doc-type-questions {
  position: relative;
  max-height: 28rem;
  overflow-y: auto;
  padding-right: 6px;
}

@container np-page (max-width: 40rem) {
  .np-files .np-file-list__item {
    flex-wrap: wrap;
  }

  .np-files .np-file-list__actions {
    margin-left: auto;
  }

  .np-doc-table thead {
    display: none;
  }

  .np-doc-table,
  .np-doc-table tbody {
    display: block;
  }

  .np-doc-table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line);
  }

  .np-doc-table td {
    display: block;
    padding: 0;
    border-bottom: 0;
  }

  .np-doc-table .np-doc-table__type {
    grid-column: 1;
    grid-row: 1;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .np-doc-table .np-doc-table__main {
    grid-column: 1;
    grid-row: 2;
  }

  .np-doc-table .np-actions-cell {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
  }

  .np-doc-table .np-doc-table__validity,
  .np-doc-table .np-doc-table__visibility {
    grid-column: 1 / -1;
  }

  .np-doc-table .np-doc-table__secondary {
    display: none;
  }
}

/* ==========================================================================
   belge-ai: NazaliAI öneri ekranı, belge analiz durumu (OTOMASYON-VE-AI.md §5.5–5.6; EKRANLAR.md 4.3)
   ========================================================================== */

/* Öneriler sekmesinin araç satırı: başlık solda, toplu kabul sağda; dar ekranda alt alta. */
.np-suggestions__toolbar {
  flex-wrap: wrap;
  gap: var(--space-3);
}

.np-suggestion-doc__warnings {
  margin: 0;
  padding: 0;
  list-style: none;
}

.np-suggestion-segment__title {
  margin: 0;
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
}

.np-suggestion-section__title {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

/* Tekrarlı grubun kaydı ("Sanayi sicil belgeleri · yeni kayıt: 12345"). */
.np-suggestion-instance {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* Öneri satırı: seçim · soru, mevcut → önerilen, kanıt · eylemler. 900 px altında eylemler alt satıra iner. */
.np-suggestion {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) auto;
  gap: var(--space-2) var(--space-3);
  align-items: start;
  padding: var(--space-3);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
}

.np-suggestion__select {
  padding-top: 2px;
}

.np-suggestion__main {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
}

.np-suggestion__question {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.np-suggestion__values {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
  margin: 0;
}

.np-suggestion__value {
  min-width: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}

.np-suggestion__value--new {
  background: var(--success-soft);
}

.np-suggestion__value dt {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.np-suggestion__value dd {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-sm);
  overflow-wrap: anywhere;
}

.np-suggestion__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.np-suggestion__evidence {
  font-style: italic;
  overflow-wrap: anywhere;
}

.np-suggestion__actions {
  align-self: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

@media (max-width: 899px) {
  .np-suggestion {
    grid-template-columns: 24px minmax(0, 1fr);
  }

  .np-suggestion__actions {
    grid-column: 2;
    justify-content: flex-start;
  }
}

@media (max-width: 479px) {
  .np-suggestion__values {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Belge satırının analiz durumu: rozet, kısa not ve "Yeniden analiz et" alt alta. */
.np-analysis {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
  max-width: 260px;
}

/* Müşteriler (musteri): değişiklik geçmişi süzgecinin dört alanı geniş ekranda tek satırda (Güncellemeler, müşteri dosyası › Geçmiş). */
.np-history-filter {
  --np-min: 180px;
}

/* K103 — iş odaklı çalışma alanları. Renkler yalnız yukarıdaki tema token'larından gelir. */
.np-home-layout {
  --np-home-padding: var(--panel-padding);
}

.np-home-summary.np-completion {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--np-home-padding);
}

.np-home-summary .np-card__heading { align-items: center; }
.np-home-summary .np-avatar { flex: none; }
.np-home-summary__identity { min-width: 0; overflow-wrap: anywhere; }
.np-home-summary__progress { display: grid; gap: var(--space-2); min-width: 0; }
.np-home-summary__progress .np-between { align-items: baseline; flex-wrap: nowrap; }
.np-home-summary .np-completion__title { font-size: var(--fs-sm); }
.np-home-summary .np-completion__value { font-size: var(--fs-xl); }
.np-home-summary > .np-btn { justify-self: start; }

.np-home-summary__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-4);
  color: var(--text-muted);
  font-size: var(--fs-xs);
}

.np-home-summary__meta:empty { display: none; }

.np-home-activity { display: grid; }
.np-home-activity > section { min-width: 0; padding: var(--np-home-padding); }
.np-home-change { border-block-start: 1px solid var(--line); }
.np-home-activity .np-list { margin-top: var(--space-2); }

.np-home-tasks .np-list__item {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr) auto 16px;
  gap: var(--space-1) var(--space-3);
  min-height: var(--touch-target);
  padding-block: var(--space-3);
}

.np-home-tasks .np-list__icon { width: 18px; height: 18px; }
.np-home-tasks .np-list__text { overflow-wrap: anywhere; }
.np-home-task__due { grid-column: 3; text-align: end; }
.np-home-tasks .np-list__chevron { grid-column: 4; width: 16px; }
.np-home-change .np-list__text { overflow-wrap: anywhere; }

.np-home-activity .np-empty,
.np-home-sections .np-empty {
  flex-direction: row;
  gap: var(--space-3);
  padding: var(--space-4) 0 0;
  text-align: start;
}

.np-home-sections .np-empty { padding: var(--np-home-padding); }
.np-home-layout .np-empty__icon { margin: 0; }
.np-home-layout .np-empty__title { color: var(--text-muted); font-size: var(--fs-sm); font-weight: 500; }

.np-home-section-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-6);
  padding: 0 var(--np-home-padding) var(--space-2);
}

.np-home-sections .np-section-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 16px;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border: 0;
  border-block-end: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.np-home-sections .np-section-card:hover {
  background: var(--surface-2);
  border-color: var(--line);
  box-shadow: none;
}

.np-home-sections .np-section-card__head { align-items: center; gap: var(--space-3); }
.np-home-sections .np-section-card__text { gap: 2px; }
.np-home-sections .np-section-card__title { font-size: var(--fs-base); }
.np-home-section__percent { color: var(--text-muted); font-size: var(--fs-xs); text-align: end; }
.np-home-sections .np-section-card .np-status { font-size: var(--fs-xs); }
.np-home-sections .np-section-card .np-list__chevron { width: 16px; }

@container np-page (min-width: 44rem) {
  .np-home-section-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container np-page (min-width: 56rem) {
  .np-home-summary.np-completion { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto; gap: var(--space-6); }
  .np-home-summary > .np-btn { justify-self: end; }
  .np-home-activity { grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr); }
  .np-home-change { border-block-start: 0; border-inline-start: 1px solid var(--line); }
}

@container np-page (max-width: 38rem) {
  .np-home-tasks .np-list__item { grid-template-columns: 18px minmax(0, 1fr) 16px; }
  .np-home-tasks .np-list__chevron { grid-column: 3; grid-row: 1; }
  .np-home-task__due { grid-column: 2; grid-row: 2; text-align: start; }
}

.np-disclosure { min-width: 0; }
.np-disclosure__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--panel-padding);
  min-height: var(--touch-target);
  color: var(--text);
  font-size: var(--fs-base);
  font-weight: 500;
  list-style: none;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.np-disclosure__head::-webkit-details-marker { display: none; }
.np-disclosure__head > .np-icon { flex: none; width: 18px; }
.np-disclosure[open] > .np-disclosure__head > .np-icon:last-child { rotate: 180deg; }
.np-disclosure__head:hover { color: var(--brand-strong); }
.np-disclosure__body { padding: 0 var(--panel-padding) var(--panel-padding); }
.np-disclosure--inline { border-block: 1px solid var(--line); }
.np-disclosure--inline > .np-disclosure__head { padding-inline: 0; color: var(--text-muted); }
.np-disclosure--inline > .np-disclosure__body { padding-inline: 0; }

.np-list-workspace {
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  background: var(--surface);
  min-width: 0;
}
.np-list-workspace > .np-filter-toolbar,
.np-list-workspace > .np-table-card,
.np-list-workspace > .np-stack > .np-table-card,
.np-list-workspace > .np-statstrip,
.np-list-workspace > .np-stack > .np-statstrip {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}
.np-list-workspace > .np-stack { gap: 0; }
.np-list-workspace > .np-filter-toolbar { border-bottom: 1px solid var(--line); }
.np-list-workspace .np-statstrip { padding: 8px; gap: 4px; border-bottom: 1px solid var(--line); }
.np-list-workspace .np-statstrip__item {
  min-height: var(--control-md);
  padding: 8px 12px;
  border: 0;
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.np-list-workspace .np-statstrip__value { font-size: var(--fs-sm); font-weight: 600; }
.np-list-workspace .np-statstrip__item[aria-pressed="true"],
.np-list-workspace .np-statstrip__item[aria-current="true"] { background: var(--brand-soft); color: var(--brand-strong); }
.np-list-workspace .np-statstrip__item:hover { background: var(--surface-2); }
.np-filter-more__body + .np-between { margin-top: var(--space-4); }
.np-history-workspace > .np-filter-toolbar { padding-bottom: var(--space-4); border-bottom: 1px solid var(--line); }

.np-profile-flow { max-width: 1100px; }
.np-profile-editor__tabs {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  container: np-page / inline-size;
}

.np-profile-editor__tabs > .np-tabs {
  flex: none;
  margin: var(--space-3) var(--space-5) 0;
}

.np-profile-editor .np-modal__body {
  scrollbar-gutter: stable;
}

.np-profile-editor .np-modal__body[hidden] {
  display: none;
}

.np-profile-editor .np-actionbar {
  bottom: 0;
}

#musteri-duzenleme-bilgileri > .np-callout {
  margin-bottom: var(--space-3);
}

.np-profile-step-progress {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-1) var(--space-3);
  margin-bottom: var(--space-2);
}

.np-profile-step-progress > .np-progress {
  grid-column: 1 / -1;
}

@container np-page (max-width: 40rem) {
  .np-profile-editor .np-modal__body { padding: var(--space-3); }
}
/* Devam et ve bölüm içi bağlantılar sabit üst çubuğun altında okunabilir bir boşluğa iner. */
[id^="q-u-"],
[id^="g-"],
.np-profile-flow .np-question > .np-label,
.np-profile-flow .np-question .np-legend { max-width: 80ch; font-weight: 500; }
.np-profile-flow .np-question .np-help { max-width: 80ch; }
.np-profile-flow .np-question > .np-between { gap: var(--space-2); }
.np-profile-flow .np-reveal { box-shadow: none; }

.np-builder__views {
  display: none;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--line);
}
.np-builder__form.is-view-ready .np-builder__views { display: flex; }
.np-builder__views .np-tabs { margin: 0; }
.np-builder__form [data-kriter-view][hidden],
[data-kriter-tab-scope] > [data-kriter-view][hidden] { display: none; }
.np-builder__form [data-kriter-secenek] { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding-inline: 0; }
.np-builder__rule {
  display: grid;
  gap: var(--space-3);
  background: var(--surface-2);
}

.np-builder__rule-step + .np-builder__rule-step {
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}

.np-builder__rule-number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-inline-end: var(--space-2);
  border-radius: 50%;
  background: var(--brand-soft);
  color: var(--brand-strong);
  font-size: var(--fs-xs);
}

.np-builder__rule > :last-child { justify-self: end; }
.np-builder__status { padding-block: var(--space-3); }
.np-preview-return { margin-bottom: var(--space-5); }
.np-card__heading--stack { display: grid; gap: var(--space-1); }
.np-settings-form { max-width: 1050px; gap: 20px; }
.np-settings-tabs:not([data-tabs-ready]) > .np-workspace-tabs { display: none; }
.np-settings-tabs > [role="tabpanel"][hidden] { display: none; }
.np-settings-form #ayarlar-yanit-suresi { padding-right: 64px; }
.np-settings-form:lang(en) #ayarlar-yanit-suresi { padding-right: 112px; }

/* K114/K126: ortak hatırlatma seçicisi; panel modal ve kaydırılan içerikte de görünüm alanına yerleşir. */
.np-reminder-picker,
.np-reminder-enhanced { min-width: 0; }
.np-reminder-enhanced { position: relative; }
.np-reminder-control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--control-md);
  padding: 5px 7px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
}
.np-reminder-control:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.np-reminder-control:has([aria-invalid="true"]) { border-color: var(--danger); }
.np-reminder-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.np-reminder-chips:empty { display: none; }
.np-reminder-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--line));
  border-radius: var(--radius-xs);
  background: var(--brand-soft);
  color: var(--brand-strong);
  font: inherit;
  font-size: var(--fs-xs);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
button.np-reminder-chip:hover { border-color: var(--brand); }
.np-reminder-chip svg { flex: none; }
.np-reminder-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.np-reminder-summary .np-reminder-chip { cursor: default; }
.np-reminder-empty { padding-left: 5px; color: var(--text-muted); font-size: var(--fs-sm); }
.np-reminder-toggle { flex: none; width: 30px; height: 30px; margin-left: auto; color: var(--brand-strong); }
.np-reminder-panel {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-menu);
  width: min(380px, calc(100vw - 32px));
  max-height: min(70dvh, 530px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-menu);
  background: var(--surface);
  color: var(--text);
  box-shadow: var(--shadow-menu);
}
.np-reminder-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.np-reminder-heading h3 { margin: 0; font-size: var(--fs-sm); font-weight: 600; line-height: 1.5; }
.np-reminder-heading .np-help { margin-top: 3px; }
.np-reminder-heading > button { flex: none; }
.np-reminder-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.np-reminder-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: var(--fs-sm);
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
}
.np-reminder-option svg { flex: none; visibility: hidden; }
.np-reminder-option:hover { border-color: var(--brand); }
.np-reminder-option[aria-pressed="true"] { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 45%, var(--line)); color: var(--brand-strong); }
.np-reminder-option[aria-pressed="true"] svg { visibility: visible; }
.np-reminder-custom { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.np-reminder-add { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-block: 6px; }
.np-reminder-add > .np-btn { padding-inline: 12px; }
.np-reminder-footer { display: flex; justify-content: flex-end; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.np-reminder-panel > .np-error { margin-top: 10px; }
@media (pointer: coarse) {
  .np-reminder-chip { min-height: 36px; }
  .np-reminder-option,
  .np-reminder-toggle { min-height: 44px; }
}

.np-select { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
/* K112: ekip panosu; iş gündemi ve müşteri hareketleri, içerik kadar yer kaplayan inceleme alanları. */
.np-staff-overview { display: grid; gap: var(--space-5); min-width: 0; }
.np-overview-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); align-items: start; gap: var(--space-5); }
.np-overview-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.np-overview-panel,
.np-overview-review { min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.np-overview-panel__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-6); border-bottom: 1px solid var(--line); }
.np-overview-panel__header h2,
.np-overview-review__header h2 { margin: 0; font-size: var(--fs-md); font-weight: 600; letter-spacing: -0.025em; line-height: 1.4; }
.np-overview-panel__header p,
.np-overview-review__header p { margin: var(--space-1) 0 0; color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.6; }
.np-overview-panel__icon { flex: none; color: var(--text-muted); }
.np-overview-link,
.np-overview-more { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 32px; color: var(--brand-strong); font-size: var(--fs-xs); font-weight: 600; text-decoration: none; border-radius: var(--radius-xs); }
.np-overview-link { flex: none; }
.np-overview-link:hover,
.np-overview-more:hover { color: var(--brand); text-decoration: underline; text-underline-offset: 4px; }
.np-overview-section { min-width: 0; padding: var(--space-5) var(--space-6); }
.np-overview-section + .np-overview-section { border-top: 1px solid var(--line); }
.np-overview-section__heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-3); margin-bottom: var(--space-3); }
.np-overview-section__heading h3 { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.np-overview-section__hint { color: var(--text-muted); font-size: var(--fs-2xs); }
.np-overview-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--brand); }
.np-overview-dot--danger { background: var(--danger); }
.np-staff-overview .np-overview-rows,
.np-staff-overview .np-overview-activity__list { margin: 0; padding: 0; list-style: none; }
.np-overview-rows > li + li { border-top: 1px solid var(--line); }
.np-overview-task,
.np-overview-deadline { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 16px; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-2); color: var(--text); text-decoration: none; border-radius: var(--radius-sm); transition: background var(--motion-fast) var(--motion-ease); }
.np-overview-task:hover,
.np-overview-deadline:hover,
.np-overview-customer:hover,
.np-overview-review__row:hover { background: var(--surface-2); }
.np-overview-task__icon { display: grid; place-items: center; width: 38px; height: 38px; color: var(--text-muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); }
.np-overview-task__icon .np-icon { width: 18px; height: 18px; }
.np-overview-task__content,
.np-overview-deadline__content { min-width: 0; display: grid; gap: 6px; }
.np-overview-task__content > strong,
.np-overview-deadline__content > strong,
.np-overview-customer__heading > strong,
.np-overview-review__row strong { color: var(--text); font-size: var(--fs-base); font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.np-overview-meta { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.5; }
.np-overview-meta > span + span { color: var(--text-muted); }
.np-overview-task__due { display: grid; justify-items: end; gap: 6px; padding-left: var(--space-2); }
.np-overview-task__due time { color: var(--text-muted); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; white-space: nowrap; }
.np-overview-chevron { flex: none; color: var(--text-muted); }
.np-overview-date { display: grid; place-items: center; align-content: center; min-height: 52px; padding: 5px 4px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-control); }
.np-overview-date strong { font-size: 1.125rem; font-weight: 600; line-height: 1.2; font-variant-numeric: tabular-nums; }
.np-overview-date span { color: var(--text-muted); font-size: 0.65rem; line-height: 1.5; }
.np-overview-deadline__remaining { color: var(--text-muted); font-size: var(--fs-2xs); white-space: nowrap; }
.np-overview-deadline__remaining.is-soon { color: var(--warning-ink); }
.np-overview-empty { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-2); margin: 0; color: var(--text-muted); font-size: var(--fs-sm); line-height: 1.6; }
.np-overview-empty > .np-icon { color: var(--text-muted); flex: none; }
.np-overview-section > .np-overview-more { margin-top: var(--space-2); }
.np-overview-activity__list > li { padding: 0 var(--space-4); }
.np-overview-activity__list > li + li { border-top: 1px solid var(--line); }
.np-overview-customer { display: grid; grid-template-columns: 34px minmax(0, 1fr) 16px; align-items: start; gap: var(--space-3); padding: 14px var(--space-2); color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
.np-overview-customer__avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--radius-control); color: var(--brand); background: var(--brand-soft); font-size: var(--fs-2xs); font-weight: 500; }
.np-overview-customer__content { display: grid; min-width: 0; gap: 3px; }
.np-overview-customer__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 3px var(--space-2); }
.np-overview-customer__heading > time { flex: none; color: var(--text-muted); font-size: var(--fs-2xs); }
.np-overview-customer > .np-overview-chevron { margin-top: var(--space-1); }
.np-overview-customer__state { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.np-overview-customer__state .np-pill { padding: 2px 6px; font-size: 0.65rem; font-weight: 500; white-space: normal; }
.np-overview-customer__state .np-pill > .np-icon { display: none; }
.np-overview-customer__percent { flex: none; color: var(--text-muted); font-size: var(--fs-2xs); font-variant-numeric: tabular-nums; }
.np-overview-progress { display: block; width: 100%; height: 3px; margin-top: 5px; border: 0; border-radius: var(--radius-pill); appearance: none; overflow: hidden; color: var(--brand); background: var(--surface-3); }
.np-overview-progress::-webkit-progress-bar { background: var(--surface-3); border-radius: var(--radius-pill); }
.np-overview-progress::-webkit-progress-value { background: var(--brand); border-radius: var(--radius-pill); }
.np-overview-progress::-moz-progress-bar { background: var(--brand); border-radius: var(--radius-pill); }
.np-overview-activity > .np-overview-more { display: flex; width: fit-content; margin: var(--space-2) var(--space-6) var(--space-4); }
.np-overview-activity > .np-overview-empty { padding: var(--space-6); }
.np-overview-review { padding: var(--space-5) var(--space-6); }
.np-overview-review__header { display: flex; align-items: center; gap: var(--space-3); }
.np-overview-review__header > div { min-width: 0; flex: 1; }
.np-overview-review__header h2 { font-size: var(--fs-base); }
.np-overview-review__header p { font-size: var(--fs-2xs); }
.np-overview-review__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-control); }
.np-overview-review__icon > .np-icon { width: 18px; height: 18px; }
.np-overview-review__empty { display: flex; align-items: center; gap: var(--space-2); margin: var(--space-4) 0 0 48px; color: var(--text-muted); font-size: var(--fs-xs); }
.np-overview-review__empty > .np-icon { flex: none; color: var(--success); }
.np-overview-review > .np-overview-rows { margin-top: var(--space-3); }
.np-overview-review__row { display: grid; grid-template-columns: minmax(0, 1fr) auto 16px; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2); color: var(--text); text-decoration: none; border-radius: var(--radius-sm); }
.np-overview-review__row > span:first-child { display: grid; min-width: 0; gap: 5px; }
.np-overview-review__row strong { font-size: var(--fs-sm); }
.np-overview-review__row small { color: var(--text-muted); font-size: var(--fs-2xs); overflow-wrap: anywhere; }
.np-overview-review > .np-overview-more { margin-top: var(--space-2); }
.np-overview-setup { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); }
.np-overview-setup > summary { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-3) var(--space-5); cursor: pointer; list-style: none; border-radius: inherit; }
.np-overview-setup > summary::-webkit-details-marker { display: none; }
.np-overview-setup > summary > .np-icon { color: var(--text-muted); width: 18px; height: 18px; flex: none; }
.np-overview-setup > summary h2 { margin: 0; font-size: var(--fs-sm); font-weight: 500; }
.np-overview-setup > summary > span { margin-left: auto; color: var(--text-muted); font-size: var(--fs-xs); }
.np-overview-setup[open] .np-overview-setup__chevron { transform: rotate(180deg); }
.np-overview-setup__body { padding: 0 var(--space-5) var(--space-5); }
.np-overview-setup__body > p { margin: 0 0 var(--space-4); color: var(--text-muted); font-size: var(--fs-xs); }

@media (max-width: 1199px) {
  .np-overview-layout { grid-template-columns: minmax(0, 1fr); }
  .np-overview-panel__header,
  .np-overview-section { padding: var(--space-5); }
}
@media (max-width: 639px) {
  .np-overview-panel__header { align-items: start; padding: var(--space-4); }
  .np-overview-panel__header p { max-width: 26ch; }
  .np-overview-section,
  .np-overview-review { padding: var(--space-4); }
  .np-overview-section__heading { align-items: start; }
  .np-overview-task { grid-template-columns: 32px minmax(0, 1fr) 16px; gap: var(--space-2); padding-inline: 0; }
  .np-overview-task__icon { width: 30px; height: 32px; }
  .np-overview-task__due { grid-column: 2; grid-row: 2; display: flex; align-items: center; flex-wrap: wrap; justify-items: start; gap: var(--space-2); padding: 0; }
  .np-overview-task > .np-overview-chevron { grid-column: 3; grid-row: 1; }
  .np-overview-deadline { grid-template-columns: 40px minmax(0, 1fr) 16px; gap: var(--space-2); padding-inline: 0; }
  .np-overview-deadline__remaining { grid-column: 2; grid-row: 2; }
  .np-overview-deadline > .np-overview-chevron { grid-column: 3; grid-row: 1; }
  .np-overview-date { grid-row: 1 / 3; align-self: start; }
  .np-overview-activity__list > li { padding-inline: var(--space-2); }
  .np-overview-customer { gap: var(--space-2); }
  .np-overview-activity > .np-overview-more { margin-inline: var(--space-4); }
  .np-overview-review__header { flex-wrap: wrap; }
  .np-overview-review__header > .np-overview-link { margin-left: 48px; }
  .np-overview-review__row { grid-template-columns: minmax(0, 1fr) 16px; padding-inline: 0; }
  .np-overview-review__row > .np-pill { grid-column: 1; grid-row: 2; justify-self: start; }
  .np-overview-review__row > .np-overview-chevron { grid-column: 2; grid-row: 1; }
  .np-overview-setup > summary { flex-wrap: wrap; gap: var(--space-2); padding-inline: var(--space-4); }
  .np-overview-setup > summary > span { order: 1; flex-basis: 100%; margin-left: 26px; }
  .np-overview-setup__chevron { margin-left: auto; }
}
.np-settings-form > .np-form-actions { margin: 0; padding: var(--space-4) var(--panel-padding); }

.np-tabbar--sections { background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; gap: var(--space-2); }
.np-tabbar--sections .np-tabbar__item { border: 0; border-bottom: 2px solid transparent; border-radius: 0; font-weight: 500; }
.np-tabbar--sections .np-tabbar__item[aria-current="page"] { border-bottom-color: var(--brand); background: transparent; box-shadow: none; }

.np-file-section-trigger {
  border-color: var(--button-brand-border);
  background: var(--brand-soft);
  color: var(--brand-strong);
}

.np-file-section-trigger:is(:hover, [aria-expanded="true"]) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
}

.np-file-section-menu { min-width: 15rem; }
.np-file-section-menu .np-menu__item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); }
.np-file-section-menu .np-menu__item[aria-current="page"] > .np-icon { color: var(--brand); }
.np-file-section-menu__check { margin-inline-start: auto; }

.np-profile-read {
  container: np-profile-read / inline-size;
}

.np-profile-read > .np-profile-read__units {
  counter-reset: profile-question;
}

.np-profile-read__units {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: var(--space-6);
  align-items: start;
}

.np-profile-read__units > :not(.np-kv) {
  grid-column: 1 / -1;
  margin-block-start: var(--space-4);
}

.np-profile-read__units > .np-kv {
  align-self: stretch;
  align-content: start;
  border-bottom: 1px solid var(--line);
}

.np-profile-read__units > .np-kv > .np-kv__row {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-1);
  align-items: start;
  padding-block: var(--space-3);
  padding-inline-start: var(--space-8);
  overflow-wrap: anywhere;
  counter-increment: profile-question;
}

.np-profile-read__units > .np-kv > .np-kv__row > dt::before {
  content: counter(profile-question) ".";
  position: absolute;
  inset-block-start: var(--space-3);
  inset-inline-start: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@container np-profile-read (min-width: 48rem) {
  .np-profile-read__units {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@container np-page (max-width: 40rem) {
  .np-file-section-menu:not(.is-fixed) { left: 0; right: auto; }
}


/* K107: PDKS filter-toolbar.module.css + DirectoryTable başlık/arama ölçüleri. */
.np-filter-toolbar { padding: 18px 20px; min-width: 0; margin: 0; }
.np-filters {
  width: 100%;
  min-width: 0;
  font-family: var(--font-directory-ui);
  container: filter-toolbar / inline-size;
}
.np-filters__row,
.np-filters__primary,
.np-filters__actions,
.np-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px;
  min-width: 0;
}
.np-filters__heading {
  margin-right: auto;
  max-width: 100%;
}
.np-filters__primary {
  flex: 1 1 auto;
}
.np-filters__heading + .np-filters__primary {
  flex: 0 1 auto;
}
.np-filters__primary > * {
  max-width: 100%;
  min-width: 0;
}
.np-filter-trigger,
.np-filter-chip,
.np-filter-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.np-filter-trigger {
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  color: var(--text);
  background: var(--surface);
  font-weight: 600;
}
.np-filter-trigger:hover,
.np-filter-trigger[aria-expanded="true"] {
  background: var(--brand-soft);
  border-color: var(--brand);
  color: var(--brand-strong);
}
.np-filter-count {
  display: grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  border-radius: 5px;
  background: var(--brand);
  color: var(--brand-fg);
  font-size: 0.7rem;
}
.np-filter-chevron {
  transition: transform 160ms ease;
}
.np-filter-trigger[aria-expanded="true"] .np-filter-chevron {
  transform: rotate(180deg);
}
.np-filter-summary {
  margin-top: 10px;
  align-items: center;
  gap: 6px;
}
.np-filter-chip {
  max-width: 100%;
  min-height: 30px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--text-muted);
  text-align: left;
}
.np-filter-chip > span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.np-filter-chip svg {
  flex-shrink: 0;
}
.np-filter-chip strong {
  color: var(--text);
  font-weight: 600;
}
.np-filter-chip:hover {
  border-color: var(--brand);
  color: var(--brand-strong);
}
.np-filter-clear {
  min-height: 30px;
  padding: 4px 7px;
  color: var(--brand-strong);
  background: transparent;
  border: 0;
}
.np-filter-clear:hover {
  text-decoration: underline;
}
.np-filter-trigger:focus-visible,
.np-filter-chip:focus-visible,
.np-filter-clear:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}
.np-filter-panel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.np-filter-panel[hidden] {
  display: none;
}
.np-filter-fields {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  align-items: end;
}
.np-filter-fields > * {
  min-width: 0;
  max-width: 100%;
}
.np-filter-fields > .np-field,
.np-filters .np-filter-fields > label {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.np-filter-fields .np-label {
  line-height: 1.4;
}
.np-filter-fields > .np-field > :not(.np-label),
.np-filter-fields > label > :is(select, input:not([type="checkbox"]), button:not([role="checkbox"]):not([role="switch"])),
.np-filter-fields > :is(select, input, button) {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}
.np-filters .np-filter-fields > label:has([role="checkbox"], [role="switch"], input[type="checkbox"]) {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  min-height: 38px;
  height: auto;
  color: var(--text);
}
.np-filter-group {
  grid-column: 1 / -1;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}
.np-filter-group + .np-filter-group {
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.np-filter-group > legend {
  margin-bottom: 10px;
  color: var(--text);
  font-size: 0.78rem;
  font-weight: 600;
}
@container filter-toolbar (max-width: 600px) {
  .np-filters__heading {
    flex-basis: 100%;
  }
  .np-filters__heading + .np-filters__primary,
  .np-filters__primary {
    flex: 1 1 100%;
  }
  .np-filter-panel {
    padding: 12px;
  }
}
@container filter-toolbar (max-width: 980px) {
  .np-filter-fields {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@container filter-toolbar (max-width: 720px) {
  .np-filter-fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@container filter-toolbar (max-width: 440px) {
  .np-filter-fields {
    grid-template-columns: minmax(0, 1fr);
  }
}
@media (prefers-reduced-motion: reduce) {
  .np-filter-chevron {
    transition: none;
  }
}
@media print {
  .np-filters__primary,
  .np-filters__actions,
  .np-filter-summary,
  .np-filter-panel {
    display: none;
  }
}

.np-filter-chips { display: contents; }
.np-history-workspace { gap: 0; }
.np-history-results { padding: 18px 20px; }
.np-filters__heading { overflow-wrap: anywhere; }
.np-filters__eyebrow { margin: 0 0 6px; color: var(--brand); font-size: 0.67rem; font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.np-filters__heading h2 { margin: 0; color: var(--text); font-size: 1rem; font-weight: 720; letter-spacing: -0.015em; }
.np-filters__meta { margin: 5px 0 0; color: var(--filter-meta); font-size: 0.76rem; font-weight: 520; line-height: 1.5; }
.np-filter-fields .np-label { color: var(--text-muted); font-size: 0.75rem; font-weight: 400; line-height: 1.4; }
.np-filter-fields :is(.np-input, .np-select) { height: 38px; border-radius: 8px; font-size: 0.78rem; }
.np-filter-fields .np-select { padding: 7px 28px 7px 11px; }
.np-filter-fields .np-date > .np-input { padding-right: 36px; }
.np-filter-fields .np-date__toggle { position: absolute; right: 3px; width: 30px; height: 30px; }
.np-filter-fields .np-date__toggle .np-icon { width: 14px; height: 14px; }
.np-filter-search {
  width: 260px;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: min(260px, 100%);
  min-height: 38px;
  padding: 7px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--table-soft);
  color: var(--search-icon);
}
.np-filter-search:focus-within { border-color: var(--brand); background: var(--surface); box-shadow: var(--search-focus-shadow); }
.np-filter-search > span { font-size: 1.05rem; line-height: 1; }
.np-filter-search input {
  width: 100%; min-width: 0; padding: 0; border: 0; outline: 0;
  background: transparent; color: var(--text); font: inherit; font-size: 0.8rem;
}
.np-filter-search input:focus-visible { outline: 0; }
.np-filter-search input::placeholder { color: var(--search-placeholder); }
@container filter-toolbar (max-width: 600px) {
  .np-filter-search { flex: 1 1 180px; width: auto; min-width: 0; }
}
@container filter-toolbar (max-width: 460px) {
  .np-doc-filter .np-filters__primary:has(.np-filters__actions) .np-filter-search { flex-basis: 100%; }
}

/* K110: yazdırırken kaydırılan bütün kayıtlar görünür. */
@media print {
  .np-table-scroll { max-height: none; overflow: visible; scrollbar-gutter: auto; }
  .np-table-scroll > table > thead > tr > th { position: static; }
}

.np-portal-assigned-task { scroll-margin-top: calc(var(--topbar-height) + var(--space-4)); }
.np-portal-assigned-task:target { border-color: var(--brand); }