/* ---------------------------------------------------------------
           Design tokens. Light values live on :root; dark values are
           redefined twice - once for "system" (prefers-color-scheme, only
           when no explicit choice was saved) and once for an explicit
           data-theme="dark" choice, so both paths land on the same colors.
        ----------------------------------------------------------------*/
        :root {
            --bg: #f3f4f7;
            --surface: #ffffff;
            --surface-alt: #f6f7f9;
            --border: #e2e4ea;
            --border-strong: #cdd1db;
            --text: #171923;
            --text-muted: #6b7280;
            --text-faint: #9aa1af;
            --primary: #4f46e5;
            --primary-hover: #4338ca;
            --primary-contrast: #ffffff;
            --primary-soft: #eef0fe;
            --danger: #dc2626;
            --danger-bg: #fef2f2;
            --success: #16a34a;
            --success-bg: #f0fdf4;
            --focus-ring: rgba(79, 70, 229, .35);

            /* Aydinlik temada kenar cubugu gri-beyaz: panele yuklenen firma
               logolari koyu renkli ve koyu zeminde kayboluyordu. Metin
               renkleri de token uzerinden gelir - kuralin icinde sabit #fff
               birakmak temayi tek yerden cevrilemez yapar. */
            --sidebar-bg: #eef0f4;
            --sidebar-bg-elevated: #e2e5ec;
            --sidebar-text: #4a5164;
            --sidebar-text-active: #14161f;
            --sidebar-active-bg: rgba(79, 70, 229, .13);
            --sidebar-accent: #4f46e5;
            --sidebar-border: rgba(23, 25, 35, .10);

            /* Urun gorselleri artik kare kirpilmiyor; kare alana sigdirilip
               kalan serit bu renkle doluyor. Beyaz, koyu temada da beyaz:
               parca fotograflari zaten beyaz fonda cekiliyor, koyu bir serit
               fotografin kendi zeminiyle catisir ve gorsel kirpilmis gibi
               gorunurdu. Tek yerde durmasi, sekiz ayri kutunun birbirinden
               ayri dusmesini engelliyor. */
            --product-plate: #ffffff;

            --radius-sm: 6px;
            --radius-md: 10px;
            --radius-lg: 16px;
            --shadow-sm: 0 1px 2px rgba(16, 24, 40, .06);
            --shadow-md: 0 8px 24px rgba(16, 24, 40, .12);
            --shadow-modal: 0 24px 60px rgba(16, 24, 40, .35);
            --sidebar-width: 264px;
            --sidebar-width-collapsed: 76px;
        }

        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) {
                --bg: #0d0e13;
                --surface: #16171f;
                --surface-alt: #1c1e28;
                --border: #2a2c38;
                --border-strong: #3a3d4d;
                --text: #edeef2;
                --text-muted: #a1a5b3;
                --text-faint: #6d7186;
                --primary: #6366f1;
                --primary-hover: #818cf8;
                --primary-contrast: #ffffff;
                --primary-soft: rgba(99, 102, 241, .16);
                --danger: #f87171;
                --danger-bg: rgba(248, 113, 113, .12);
                --success: #4ade80;
                --success-bg: rgba(74, 222, 128, .12);
                --focus-ring: rgba(129, 140, 248, .4);

                --sidebar-bg: #0a0a10;
                --sidebar-bg-elevated: #111219;
                --sidebar-text: #9aa1b5;
                --sidebar-text-active: #ffffff;
                --sidebar-active-bg: rgba(99, 102, 241, .22);
                --sidebar-accent: #818cf8;
                --sidebar-border: rgba(255, 255, 255, .06);
                --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
                --shadow-modal: 0 24px 60px rgba(0, 0, 0, .6);
            }
        }

        :root[data-theme="dark"] {
            --bg: #0d0e13;
            --surface: #16171f;
            --surface-alt: #1c1e28;
            --border: #2a2c38;
            --border-strong: #3a3d4d;
            --text: #edeef2;
            --text-muted: #a1a5b3;
            --text-faint: #6d7186;
            --primary: #6366f1;
            --primary-hover: #818cf8;
            --primary-contrast: #ffffff;
            --primary-soft: rgba(99, 102, 241, .16);
            --danger: #f87171;
            --danger-bg: rgba(248, 113, 113, .12);
            --success: #4ade80;
            --success-bg: rgba(74, 222, 128, .12);
            --focus-ring: rgba(129, 140, 248, .4);

            --sidebar-bg: #0a0a10;
            --sidebar-bg-elevated: #111219;
            --sidebar-text: #9aa1b5;
            --sidebar-text-active: #ffffff;
            --sidebar-active-bg: rgba(99, 102, 241, .22);
            --sidebar-accent: #818cf8;
            --sidebar-border: rgba(255, 255, 255, .06);
            --shadow-md: 0 8px 24px rgba(0, 0, 0, .5);
            --shadow-modal: 0 24px 60px rgba(0, 0, 0, .6);
        }

        * { box-sizing: border-box; }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            background: var(--bg);
            margin: 0;
            color: var(--text);
            font-size: 14px;
            line-height: 1.5;
            -webkit-font-smoothing: antialiased;
        }

        a { color: var(--primary); }

        .container { max-width: 960px; margin: 0 auto; padding: 24px 16px; }
        .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); }

        /* Auth (login) screens - centered card, own toolbar for theme/locale. */
        /* ---------------------------------------------------------------
           Giris ekrani. Arka plandaki fotografin adresi Blade'den
           --auth-bg olarak geliyor (partials/login-form): dosya adi surum
           damgasi tasimali, CSS icinden damgalanamaz.
        ----------------------------------------------------------------*/
        .auth-shell {
            position: relative;
            min-height: 100vh;
            /* Telefonda adres cubugu 100vh'yi ekrandan tasiriyor; dvh onu
               dogru olcuyor, anlamayan tarayici ustteki satirda kaliyor. */
            min-height: 100dvh;
            display: flex; flex-direction: column; align-items: center; justify-content: center;
            padding: 24px; gap: 16px;
            /* Fotograf inene kadar gorulen renk. Temaya bagli degil: perde
               her iki temada da koyu, altindan acik gri cikmasi yalnizca
               yuklenme aninda goze carpardi. */
            background-color: #14161f;
            background-image: var(--auth-bg, none);
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }
        /* Fotografin uzerine perde. Fotograf degistiginde kartin okunur kalip
           kalmayacagi tesadufe birakilmasin diye: acik bir gokyuzu, beyaz
           kartin kenarini da ustteki dil/tema dugmelerini de yutardi. */
        .auth-shell::before {
            content: ''; position: absolute; inset: 0;
            background: linear-gradient(180deg, rgba(10, 12, 20, .45), rgba(10, 12, 20, .72));
        }
        /* Perde arka planda: icerik onun ustunde kalmali. */
        .auth-shell > * { position: relative; z-index: 1; }
        .auth-toolbar { display: flex; gap: 8px; }
        .auth-card {
            width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border);
            border-radius: var(--radius-lg); padding: 32px;
            /* Duz zemindekinden daha derin bir golge: fotograf uzerinde kart
               yuzmeli, yapistirilmis gibi durmamali. */
            box-shadow: 0 18px 50px rgba(10, 12, 20, .45);
        }
        .auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
        .auth-brand-mark {
            width: 42px; height: 42px; flex-shrink: 0; border-radius: var(--radius-md); background: var(--primary);
            color: var(--primary-contrast); display: flex; align-items: center; justify-content: center;
            font-weight: 700; font-size: 20px;
        }
        .auth-brand-name { font-weight: 700; font-size: 15px; line-height: 1.3; }
        .auth-brand-sub { color: var(--text-muted); font-size: 13px; }
        .auth-submit { width: 100%; justify-content: center; margin-top: 24px; padding: 11px; }
        /* Diger panelin giris baglantisi. Kartin disinda ve perdenin uzerinde:
           rengi temadan degil perdeden alir - perde her iki temada da koyu,
           var(--text-muted) burada okunmazdi. */
        .auth-alt { text-align: center; font-size: 13px; }
        .auth-alt a { color: rgba(255, 255, 255, .78); text-decoration: none; }
        .auth-alt a:hover { color: #fff; text-decoration: underline; }

        /* ---------------------------------------------------------------
           Form controls - one consistent look for every input type,
           including file/image and date, plus the custom select arrow.
        ----------------------------------------------------------------*/
        label { display: block; margin: 14px 0 6px; font-size: 13px; font-weight: 600; color: var(--text-muted); }

        input[type=email], input[type=password], input[type=text], input[type=number],
        input[type=date], input[type=search], textarea, select {
            width: 100%; padding: 10px 12px; font: inherit; color: var(--text);
            background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
            transition: border-color .15s ease, box-shadow .15s ease; appearance: none;
        }
        textarea { resize: vertical; min-height: 84px; }
        input::placeholder, textarea::placeholder { color: var(--text-faint); }

        input[type=email]:focus, input[type=password]:focus, input[type=text]:focus, input[type=number]:focus,
        input[type=date]:focus, input[type=search]:focus, textarea:focus, select:focus {
            outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring);
        }

        input:disabled, select:disabled, textarea:disabled {
            background: var(--surface-alt); color: var(--text-faint); cursor: not-allowed;
        }

        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7280' stroke-width='1.6'%3E%3Cpath d='M5.5 7.5l4.5 4.5 4.5-4.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
            background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
            padding-right: 34px; cursor: pointer;
        }

        input[type=date] { color-scheme: light; position: relative; }
        :root[data-theme="dark"] input[type=date] { color-scheme: dark; }
        @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) input[type=date] { color-scheme: dark; } }
        input[type=date]::-webkit-calendar-picker-indicator { cursor: pointer; border-radius: 4px; padding: 2px; }
        input[type=date]::-webkit-calendar-picker-indicator:hover { background: var(--surface-alt); }

        /* File/image input: hide the native control, style the label as the
           control instead (button + optional dropzone look for images). */
        .file-input { display: none; }
        .file-input-label {
            display: flex; align-items: center; gap: 8px; width: fit-content; cursor: pointer;
            padding: 9px 16px; border: 1px dashed var(--border-strong); border-radius: var(--radius-sm);
            background: var(--surface-alt); color: var(--text-muted); font-size: 13px; font-weight: 600;
            transition: border-color .15s ease, color .15s ease;
        }
        .file-input-label:hover { border-color: var(--primary); color: var(--primary); }
        .file-input-label svg { width: 16px; height: 16px; flex-shrink: 0; }

        /* Dosya suruklenirken: birakmanin bir ise yarayacagini gosteren
           tek geri bildirim bu. Kesikli cerceve zaten "buraya birak"
           diyor, burada yalnizca renklendiriyoruz. */
        .file-input-label[data-drop-zone] { transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
        .file-input-label.is-dropping {
            border-color: var(--primary); color: var(--primary);
            background: var(--primary-soft, rgba(37, 99, 235, .08));
        }

        input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer; }
        .checkbox-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
        .checkbox-row:last-child { border-bottom: none; }
        .checkbox-row label { margin: 0; font-size: 13px; font-weight: 500; color: var(--text); cursor: pointer; flex: 1; }
        .checkbox-row.is-locked { opacity: .6; }
        .checkbox-row .hint { font-size: 11px; color: var(--text-faint); }
        .label-required { color: var(--danger); font-weight: 700; }
        /* Logos keep their own proportions - never cropped or stretched. */
        .logo-preview {
            margin-top: 10px; padding: 10px; min-height: 64px; max-width: 260px;
            border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-alt);
            display: flex; align-items: center; justify-content: center;
        }
        .logo-preview img { max-width: 100%; max-height: 72px; width: auto; height: auto; object-fit: contain; }
        .logo-preview .no-image { color: var(--text-faint); font-size: 11px; }
        .panel-brand-logo { max-width: 100%; max-height: 34px; width: auto; height: auto; object-fit: contain; display: block; }
        /* Yuklenen logolar cogunlukla koyu renkli. Aydinlik temada gri-beyaz
           cubuk bunu zaten cozer; koyu temada logo kaybolmasin diye altina
           acik bir zemin serilir. */
        @media (prefers-color-scheme: dark) {
            :root:not([data-theme="light"]) .panel-brand-logo { background: #fff; padding: 4px 6px; border-radius: var(--radius-sm); }
        }
        :root[data-theme="dark"] .panel-brand-logo { background: #fff; padding: 4px 6px; border-radius: var(--radius-sm); }
        .company-logo-cell { max-height: 28px; max-width: 84px; width: auto; object-fit: contain; }
        .hint { font-size: 12px; color: var(--text-faint); }
        .label-optional { font-weight: 400; color: var(--text-faint); text-transform: none; }

        /* A bare <button> is a form's submit button; the top margin separates
           it from the last field. Anything carrying a btn-* class opts out of
           that below. */
        button, .btn {
            margin-top: 16px; padding: 10px 18px; background: var(--primary); color: var(--primary-contrast);
            border: none; border-radius: var(--radius-sm); cursor: pointer; font: inherit; font-weight: 600;
            transition: background .15s ease, opacity .15s ease; display: inline-flex; align-items: center; gap: 6px;
        }
        button:hover, .btn:hover { background: var(--primary-hover); }

        /* ---------------------------------------------------------------
           The button family, deliberately element-agnostic.

           These classes have to look identical whether they sit on an <a>
           that navigates or a <button> that opens a modal - the two appear
           side by side in every toolbar. Tying the rules to `button` (as they
           once were) gave anchors no styling at all and left buttons carrying
           the submit-button top margin, so a toolbar sat crookedly and the
           workaround was an inline style on each one.
        ----------------------------------------------------------------*/
        .btn-link, .btn-sm, .icon-btn {
            margin: 0; font: inherit; cursor: pointer; text-decoration: none;
            display: inline-flex; align-items: center; justify-content: center;
            border-radius: var(--radius-sm); border: none;
            transition: background .15s ease, color .12s ease, border-color .12s ease;
        }

        .btn-sm {
            padding: 6px 12px; font-size: 12px; font-weight: 600; gap: 6px;
            background: var(--primary); color: var(--primary-contrast);
        }
        .btn-sm:hover { background: var(--primary-hover); color: var(--primary-contrast); }

        .btn-secondary { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border-strong); }
        .btn-secondary:hover { background: var(--border); color: var(--text); }
        .btn-danger { background: var(--danger); color: #fff; }
        .btn-danger:hover { filter: brightness(1.1); background: var(--danger); }

        .field { margin-bottom: 4px; }
        .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
        .field-error { color: var(--danger); font-size: 12px; margin-top: 4px; }

        .iban-input-group { display: flex; }
        .iban-input-group .iban-prefix {
            display: flex; align-items: center; padding: 0 12px; background: var(--surface-alt); border: 1px solid var(--border-strong);
            border-right: none; border-radius: var(--radius-sm) 0 0 var(--radius-sm); font-weight: 700; color: var(--text-muted); font-size: 14px;
        }
        .iban-input-group input { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-family: ui-monospace, monospace; letter-spacing: 1px; }

        .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
        .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; }
        .product-card-image { width: 100%; aspect-ratio: 1 / 1; background: var(--product-plate); display: flex; align-items: center; justify-content: center; overflow: hidden; }
        .product-card-image img { width: 100%; height: 100%; object-fit: contain; }
        .product-card-image .no-image { color: var(--text-faint); font-size: 12px; }
        .product-card-body { padding: 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
        .product-card-title { font-weight: 700; font-size: 14px; }
        .product-card-meta { font-size: 12px; color: var(--text-muted); }
        .product-card-price { font-size: 15px; font-weight: 700; margin-top: 4px; }
        .product-card-price small { font-weight: 500; color: var(--text-muted); font-size: 11px; }
        .product-card-footer { padding: 10px 14px; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
        .image-preview { width: 120px; height: 120px; border-radius: var(--radius-md); background: var(--product-plate); border: 1px solid var(--border); display: flex; align-items: center; justify-content: center; overflow: hidden; margin-top: 10px; }
        .image-preview img { width: 100%; height: 100%; object-fit: contain; }
        .image-preview .no-image { color: var(--text-faint); font-size: 11px; text-align: center; padding: 4px; }
        .scroll-sentinel { height: 1px; }
        .scroll-loading { text-align: center; padding: 16px; color: var(--text-muted); font-size: 13px; }
        .price-calc-row { display: flex; gap: 16px; }
        .price-calc-row > div { flex: 1; }
        .price-incl-display { background: var(--surface-alt); font-weight: 700; }
        .modal-box.modal-box-wide { max-width: 640px; }

        .stat-row { display: flex; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
        .stat { flex: 1; min-width: 140px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 18px; text-align: center; }
        .stat strong { display: block; font-size: 28px; color: var(--text); }
        .text-muted { color: var(--text-muted); }

        .page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }
        .btn-link {
            padding: 10px 18px; gap: 7px; font-size: 13px; font-weight: 600;
            background: var(--primary); color: var(--primary-contrast);
        }
        .btn-link:hover { background: var(--primary-hover); color: var(--primary-contrast); }
        .btn-link svg { width: 16px; height: 16px; flex-shrink: 0; }

        .btn-link-secondary { background: var(--surface-alt); color: var(--text); border: 1px solid var(--border-strong); }
        .btn-link-secondary:hover { background: var(--border); color: var(--text); }

        /* Toolbar variant. The height is deliberate: these sit next to the
           search input and a couple of pixels out reads as a crooked row.
           The border keeps the box the same size as the secondary variant,
           which has a real one. */
        .btn-link-sm { padding: 7px 14px; font-size: 12.5px; border: 1px solid transparent; }
        .btn-link-sm.btn-link-secondary { border-color: var(--border-strong); }

        /* ---------------------------------------------------------------
           Toasts - every "işlem başarılı / hata" notification renders here
           instead of an inline page banner. See showToast() below.
        ----------------------------------------------------------------*/
        .toast-container {
            position: fixed; top: 16px; right: 16px; z-index: 300; display: flex; flex-direction: column;
            gap: 10px; width: min(360px, calc(100vw - 32px)); pointer-events: none;
        }
        .toast {
            display: flex; align-items: flex-start; gap: 10px; background: var(--surface); color: var(--text);
            border: 1px solid var(--border); border-left: 4px solid var(--text-faint); border-radius: var(--radius-md);
            box-shadow: var(--shadow-md); padding: 12px 14px; opacity: 0; transform: translateX(16px);
            transition: opacity .2s ease, transform .2s ease; pointer-events: auto;
        }
        .toast.is-visible { opacity: 1; transform: translateX(0); }
        .toast-success { border-left-color: var(--success); }
        .toast-error { border-left-color: var(--danger); }
        .toast-icon { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; }
        .toast-success .toast-icon { color: var(--success); }
        .toast-error .toast-icon { color: var(--danger); }
        .toast-message { flex: 1; font-size: 13px; line-height: 1.4; }
        .toast-close {
            margin: 0; padding: 0; background: none; border: none; color: var(--text-faint); cursor: pointer;
            font-size: 16px; line-height: 1; flex-shrink: 0;
        }
        .toast-close:hover { color: var(--text); background: none; }
        @media (max-width: 480px) { .toast-container { top: auto; bottom: 16px; right: 16px; left: 16px; width: auto; } }

        table { width: 100%; border-collapse: collapse; }
        th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--border); font-size: 13px; white-space: nowrap; }
        th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; }
        tbody tr:last-child td { border-bottom: none; }
        tbody tr:hover { background: var(--surface-alt); }
        /* Tables keep their own horizontal scroll so a wide table never forces
           the whole page to scroll sideways on a phone. */
        .table-card { padding: 0; overflow: hidden; }
        .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .table-scroll > table { min-width: 560px; }
        .empty-state { color: var(--text-faint); text-align: center; padding: 32px 12px; white-space: normal; }

        /* ---------------------------------------------------------------
           DataTable. All state (sort, search, page) lives in the URL and is
           resolved server-side; the styles below only present what the server
           already decided. On narrow screens each row becomes a card, with
           the column name coming from the cell's data-label attribute.
        ----------------------------------------------------------------*/
        .dt { display: flex; flex-direction: column; gap: 14px; }
        .dt-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
        .dt-toolbar-left, .dt-toolbar-right { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
        .dt-toolbar select { width: auto; min-width: 120px; padding: 8px 30px 8px 10px; font-size: 13px; }

        /* Genis ekran: sarmalayici yokmus gibi davranir, secim kutulari
           araç çubugunun dogrudan ogeleri kalir. Ac/kapa dugmesi gizli. */
        .dt-filters { display: contents; }
        .dt-filter-toggle { display: none; }
        .dt-filter-clear {
            margin: 0; padding: 8px 12px; font-size: 12.5px; background: transparent;
            border: 1px solid var(--border-strong); color: var(--text-muted); border-radius: var(--radius-sm); cursor: pointer;
        }
        .dt-filter-clear:hover { background: var(--surface-alt); color: var(--text); }
        .dt-filter-clear[hidden], .dt-filter-badge[hidden] { display: none; }

        .dt-search { position: relative; display: flex; align-items: center; }
        .dt-search svg { position: absolute; left: 11px; width: 16px; height: 16px; color: var(--text-faint); pointer-events: none; }
        .dt-search input { width: 260px; max-width: 100%; padding-left: 34px; font-size: 13px; }
        .dt-search input::-webkit-search-cancel-button { cursor: pointer; }

        .dt-container { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
        .dt-container[aria-busy="true"] { opacity: .55; transition: opacity .12s ease; }
        .dt-container[aria-busy="true"]::after {
            content: ''; position: absolute; inset: 0; cursor: progress;
        }

        .dt-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .dt-table { width: 100%; border-collapse: collapse; }
        .dt-table th, .dt-table td { padding: 12px 14px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: left; white-space: nowrap; }
        .dt-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; background: var(--surface-alt); }
        .dt-table tbody tr:last-child td { border-bottom: none; }
        .dt-table tbody tr:hover { background: var(--surface-alt); }
        .dt-align-center { text-align: center !important; }
        .dt-align-right { text-align: right !important; }

        .dt-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; }
        .dt-sort:hover { color: var(--text); }
        .dt-sort.is-active { color: var(--primary); }
        .dt-sort-icon { font-size: 11px; opacity: .65; }
        .dt-sort.is-active .dt-sort-icon { opacity: 1; }

        .dt-empty { text-align: center; color: var(--text-faint); padding: 40px 14px; white-space: normal; }

        /* Row selection + the bar that appears once something is ticked. */
        .dt-select-cell { width: 40px; text-align: center !important; }
        .dt-select-cell input { width: auto; margin: 0; cursor: pointer; }
        .dt-bulk {
            display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
            padding: 10px 14px; border: 1px solid var(--primary); border-radius: var(--radius-md);
            background: var(--primary-soft); font-size: 13px;
        }
        .dt-bulk[hidden] { display: none; }
        .dt-bulk-count { color: var(--text-muted); }
        .dt-bulk-count strong { color: var(--primary); font-size: 15px; }
        .dt-bulk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
        .dt-bulk-actions form { margin: 0; }
        @media (max-width: 768px) {
            /* In card mode the checkbox belongs at the top of the card, not
               as a label-less row of its own. */
            .dt-table td.dt-select-cell { justify-content: flex-start; padding-bottom: 0; }
            .dt-table td.dt-select-cell::before { content: none; }
            .dt-bulk-actions { margin-left: 0; width: 100%; }
        }

        .dt-footer { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 12px 14px; border-top: 1px solid var(--border); background: var(--surface-alt); }
        .dt-count { font-size: 12px; color: var(--text-muted); }
        .dt-pagination { display: flex; gap: 4px; flex-wrap: wrap; }
        .dt-page {
            min-width: 32px; height: 32px; padding: 0 8px; display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface);
            color: var(--text); text-decoration: none; font-size: 13px;
        }
        .dt-page:hover { border-color: var(--primary); color: var(--primary); }
        .dt-page.is-current { background: var(--primary); border-color: var(--primary); color: var(--primary-contrast); font-weight: 600; }
        .dt-page.is-disabled { opacity: .4; pointer-events: none; }

        @media (max-width: 768px) {
            .dt-hide-mobile { display: none !important; }
            .dt-search { flex: 1 1 100%; }
            .dt-search input { width: 100%; }
            .dt-toolbar-left, .dt-toolbar-right { width: 100%; }

            /* Filtreler dar ekranda kapali gelir; acildiginda iki sutunlu bir
               izgara olur. Yan yana sarmalanan yarim genislikteki kutular
               yerine her biri tam ve esit genislikte. */
            .dt-filter-toggle {
                display: inline-flex; align-items: center; justify-content: center; gap: 7px;
                flex: 1 1 auto; margin: 0; padding: 8px 12px; font-size: 13px; font-weight: 500;
                background: var(--surface); color: var(--text);
                border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer;
            }
            .dt-filter-toggle svg { width: 16px; height: 16px; }
            .dt-filter-badge {
                min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
                background: var(--primary); color: var(--primary-contrast);
                font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
            }
            .dt.is-filters-open .dt-filter-toggle { background: var(--surface-alt); border-color: var(--primary); color: var(--primary); }

            .dt-filters {
                display: none; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px;
                padding: 10px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
            }
            .dt.is-filters-open .dt-filters { display: grid; }
            .dt-filters select { width: 100%; min-width: 0; }
            .dt-filter-clear { grid-column: 1 / -1; }

            /* Telefon genisliginde iki sutun bile secim kutusunun etiketini
               kirpiyor - tek sutuna dus. */
            @media (max-width: 480px) {
                .dt-filters { grid-template-columns: 1fr; }
            }

            /* Sag taraf: satir sayisi solda dar kalir, dugmeler kalan yeri
               esit paylasir - space-between'in acdigi bosluklar yerine. */
            .dt-toolbar-right { justify-content: flex-start; }
            .dt-toolbar-right > select { flex: 0 0 auto; min-width: 84px; }
            .dt-toolbar-right .btn-link { flex: 1 1 auto; justify-content: center; }

            /* Each row becomes a card: header row hidden, cells stack with
               their column name pulled from data-label. */
            .dt-scroll { overflow-x: visible; }
            .dt-table thead { display: none; }
            .dt-table, .dt-table tbody, .dt-table tr, .dt-table td { display: block; width: 100%; }
            .dt-table tr { border-bottom: 1px solid var(--border); padding: 6px 0; }
            .dt-table tbody tr:last-child { border-bottom: none; }
            .dt-table td {
                display: flex; align-items: center; justify-content: space-between; gap: 12px;
                border-bottom: none; padding: 7px 14px; white-space: normal; text-align: right !important;
            }
            .dt-table td::before {
                content: attr(data-label);
                font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                color: var(--text-muted); text-align: left; flex-shrink: 0;
            }
            .dt-table td:empty { display: none; }
            .dt-footer { justify-content: center; }

            /* The card's first cell is the thumbnail. Left as a label/value
               row it would read "IMAGE  [picture]" and waste a line, so it
               becomes the card's header alongside the product name. */
            .dt-table td[data-label] > .table-thumb,
            .dt-table td[data-label] > .table-thumb--empty { width: 52px; height: 52px; }

            /* Row actions are icons; keep them on one line and pushed to the
               right rather than stretched across the card. */
            .dt-table td .row-actions { justify-content: flex-end; flex-wrap: nowrap; }

            /* A switch reads better next to its label than pinned to the far
               edge of a card. */
            .dt-table td .switch { margin-left: auto; }

            /* Long product names must wrap instead of forcing a scroll. */
            .dt-table .cell-stack { align-items: flex-end; text-align: right; min-width: 0; }
            .dt-table .cell-meta { justify-content: flex-end; }
        }

        /* Between phone and desktop the table still fits, but the least
           important columns are the ones to lose first. */
        @media (max-width: 1100px) and (min-width: 769px) {
            .dt-hide-narrow { display: none !important; }
        }
        .modal-actions { display: flex; gap: 8px; margin-top: 20px; }
        .modal-actions button { margin-top: 0; }
        .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; }
        .inline-logo { height: 20px; max-width: 56px; object-fit: contain; vertical-align: middle; margin-right: 6px; }

        .badge { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
        .badge-active { background: var(--success-bg); color: var(--success); }
        .badge-inactive { background: var(--danger-bg); color: var(--danger); }

        .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
        @media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }
        fieldset { border: 1px solid var(--border); border-radius: var(--radius-md); margin: 16px 0; padding: 16px; }
        legend { padding: 0 6px; font-weight: 700; font-size: 13px; }

        .modal-backdrop {
            display: none; position: fixed; inset: 0; background: rgba(10, 12, 20, .55); backdrop-filter: blur(2px);
            align-items: center; justify-content: center; z-index: 100; padding: 20px;
        }
        .modal-backdrop.is-open { display: flex; }
        .modal-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; width: 100%; max-width: 420px; box-shadow: var(--shadow-modal); max-height: 90vh; overflow-y: auto; }
        .modal-box h2 { margin-top: 0; }
        .row-actions { display: flex; gap: 8px; flex-wrap: wrap; }
        .row-actions form { margin: 0; }

        /* ---------------------------------------------------------------
           Product screens: table cells, form sections and the image gallery.
        ----------------------------------------------------------------*/
        .table-thumb { width: 40px; height: 40px; border-radius: var(--radius-sm); object-fit: contain; background: var(--product-plate); border: 1px solid var(--border); display: block; }
        .table-thumb--empty { border-style: dashed; }

        .cell-stack { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .cell-title { font-weight: 600; color: var(--text); text-decoration: none; }
        .cell-title:hover { text-decoration: underline; }
        .cell-meta { display: flex; gap: 10px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); }

        /* Stock is a link, so a low number is one click from being corrected. */
        .stock-pill { display: inline-block; min-width: 38px; padding: 3px 8px; border-radius: 999px; font-weight: 600; font-size: 12px; text-decoration: none; border: 1px solid transparent; }
        .stock-pill--ok { background: var(--success-bg, rgba(34,197,94,.12)); color: var(--success, #16a34a); }
        .stock-pill--warning { background: var(--warning-bg, rgba(234,179,8,.14)); color: var(--warning, #b45309); }
        .stock-pill--danger { background: var(--danger-bg, rgba(239,68,68,.12)); color: var(--danger, #dc2626); }

        .margin { font-weight: 600; font-size: 12px; }
        .margin--success { color: var(--success, #16a34a); }
        .margin--warning { color: var(--warning, #b45309); }
        .margin--danger { color: var(--danger, #dc2626); }

        .movement { font-weight: 600; }
        .movement--in { color: var(--success, #16a34a); }
        .movement--out { color: var(--danger, #dc2626); }

        .form-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 20px; margin-bottom: 18px; }
        .form-section h3 { margin: 0 0 16px; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
        /* The row already provides its own spacing, so the submit button
           inside must not also carry the base top margin - otherwise it sits
           lower than the cancel link beside it. */
        .form-actions { display: flex; gap: 10px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
        .form-actions > button, .form-actions > .btn, .form-actions > a { margin-top: 0; }
        .field-hint { font-size: 11px; color: var(--text-faint); margin-top: 4px; }

        .checkbox-row { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 8px; }
        .checkbox-inline { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
        .checkbox-inline input { width: auto; margin: 0; }
        .mode-switch { display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px; }

        .notice { border-radius: var(--radius-md); padding: 10px 14px; font-size: 12px; line-height: 1.5; margin-bottom: 14px; }
        .notice--info { background: var(--info-bg, rgba(59,130,246,.10)); color: var(--info, #1d4ed8); border: 1px solid var(--info-border, rgba(59,130,246,.25)); }

        .price-incl-display.is-negative { color: var(--danger, #dc2626); }
        .stock-headline { font-size: 13px; color: var(--text-muted); }
        .page-header-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

        .gallery-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
        .gallery-preview img { width: 64px; height: 64px; object-fit: contain; background: var(--product-plate); border-radius: var(--radius-sm); border: 1px solid var(--border); }

        .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
        .gallery-item { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-alt); }
        .gallery-item.is-primary { border-color: var(--accent, #2563eb); box-shadow: 0 0 0 1px var(--accent, #2563eb); }
        .gallery-item img { width: 100%; aspect-ratio: 1; object-fit: contain; background: var(--product-plate); display: block; }
        .gallery-badge { position: absolute; top: 6px; left: 6px; background: var(--accent, #2563eb); color: #fff; font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
        .gallery-actions { display: flex; gap: 6px; padding: 8px; flex-wrap: wrap; }
        .gallery-actions form { margin: 0; }

        /* Table / card view switch. */
        .view-switch { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
        .view-switch-option { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; color: var(--text-faint); background: var(--surface); text-decoration: none; }
        .view-switch-option svg { width: 16px; height: 16px; }
        .view-switch-option + .view-switch-option { border-left: 1px solid var(--border-strong); }
        .view-switch-option:hover { color: var(--text); background: var(--surface-alt); }
        .view-switch-option.is-active { background: var(--primary); color: var(--primary-contrast); }

        /* Inline price edit. Looks like text until focused, so the row stays
           readable rather than turning into a wall of input boxes. */
        .quick-price { display: inline-flex; align-items: center; gap: 3px; margin: 0; }
        .quick-price input { width: 92px; padding: 4px 6px; font-size: 13px; text-align: right; border-color: transparent; background: transparent; }
        .quick-price input:hover { border-color: var(--border-strong); background: var(--surface); }
        .quick-price input:focus { border-color: var(--primary); background: var(--surface); }
        .quick-price-suffix { color: var(--text-faint); font-size: 12px; }

        /* Card view of the product list. */
        .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 14px; padding: 14px; }
        .product-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
        .product-card.is-inactive { opacity: .6; }
        .product-card-select { position: absolute; top: 8px; left: 8px; z-index: 1; margin: 0; background: var(--surface); border-radius: var(--radius-sm); padding: 3px; }
        .product-card-select input { width: auto; margin: 0; cursor: pointer; }
        .product-card-image { display: block; aspect-ratio: 1; background: var(--product-plate); }
        .product-card-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .product-card-noimage { display: block; width: 100%; height: 100%; }
        .product-card-body { padding: 10px 12px; flex: 1; display: flex; flex-direction: column; gap: 4px; }
        .product-card-name { font-weight: 600; font-size: 13px; color: var(--text); text-decoration: none; line-height: 1.35; }
        .product-card-name:hover { text-decoration: underline; }
        .product-card-price { margin-top: auto; font-weight: 700; font-size: 14px; }
        .product-card-price .hint { font-weight: 400; font-size: 11px; }
        .product-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px; border-top: 1px solid var(--border); background: var(--surface-alt); }
        .product-card-image { position: relative; }
        .product-card-badge { position: absolute; top: 8px; right: 8px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 999px; }

        /* Prices. The struck-through figure is the price before this buyer's
           discount - never the cost price, which no buyer ever sees. */
        .price-stack { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
        .price-main { font-weight: 700; }
        .price-was { text-decoration: line-through; color: var(--text-faint); font-size: 12px; font-weight: 400; }
        .price-badge { background: var(--danger-bg); color: var(--danger); font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; }

        /* Product detail. */
        .product-detail { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 20px; align-items: start; }
        .product-detail-gallery { position: sticky; top: 16px; }
        .product-description { margin-top: 14px; white-space: pre-line; font-size: 13px; color: var(--text-muted); }
        .price-block { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; margin-bottom: 16px; }
        .price-block-main { font-size: 26px; font-weight: 700; line-height: 1.2; }
        .price-block-main .hint { font-size: 12px; font-weight: 400; }
        .price-block-row { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-top: 5px; }
        .add-to-cart { margin-top: 8px; }
        @media (max-width: 900px) {
            .product-detail { grid-template-columns: 1fr; }
            .product-detail-gallery { position: static; }
        }

        /* Image slider. Scroll-snap, so the native swipe and the arrows drive
           the same thing and cannot disagree - and it degrades to a
           horizontally scrollable strip with JavaScript off. */
        .slider { position: relative; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; background: var(--surface-alt); }
        .slider-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
        .slider-track::-webkit-scrollbar { display: none; }
        .slider-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1; }
        .slider-slide img { width: 100%; height: 100%; object-fit: contain; background: var(--product-plate); display: block; }
        .slider-empty { aspect-ratio: 1; border: 1px dashed var(--border-strong); border-radius: var(--radius-md); background: var(--surface-alt); }
        .slider-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 34px; height: 34px; margin: 0; padding: 0;
            display: flex; align-items: center; justify-content: center;
            border: none; border-radius: 50%; cursor: pointer;
            background: rgba(255, 255, 255, .92); color: #111; box-shadow: var(--shadow-sm);
        }
        .slider-arrow:hover { background: #fff; }
        .slider-arrow svg { width: 18px; height: 18px; }
        .slider-arrow--prev { left: 8px; }
        .slider-arrow--next { right: 8px; }
        .slider-thumbs { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; padding-bottom: 2px; }
        .slider-thumb { width: 60px; height: 60px; flex-shrink: 0; margin: 0; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-alt); cursor: pointer; }
        .slider-thumb img { width: 100%; height: 100%; object-fit: contain; background: var(--product-plate); display: block; }
        .slider-thumb.is-active { border-color: var(--primary); }

        /* Cart. */
        .cart-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
        .cart-summary { position: sticky; top: 16px; }
        .cart-lines { display: flex; flex-direction: column; gap: 12px; }
        .cart-line { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 14px; align-items: start; padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
        .cart-line.has-issue { border-color: var(--warning, #b45309); }
        .cart-line-image { display: block; width: 88px; aspect-ratio: 1; border-radius: var(--radius-sm); overflow: hidden; background: var(--product-plate); }
        .cart-line-image img { width: 100%; height: 100%; object-fit: contain; display: block; }
        .cart-line-name { font-weight: 600; }
        .cart-line-controls { display: flex; gap: 8px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
        .cart-qty { display: flex; gap: 6px; align-items: center; margin: 0; }
        .cart-qty input { width: 82px; padding: 6px 8px; font-size: 13px; text-align: center; }
        .cart-line-price { text-align: right; }
        .cart-line-unit { font-size: 12px; color: var(--text-muted); }
        .cart-line-total { font-weight: 700; font-size: 15px; margin-top: 3px; }
        .cart-issue { font-size: 12px; margin-top: 6px; padding: 5px 9px; border-radius: var(--radius-sm); background: var(--danger-bg); color: var(--danger); }
        .cart-issue--price { background: var(--warning-bg, rgba(234, 179, 8, .14)); color: var(--warning, #b45309); }
        @media (max-width: 900px) {
            .cart-layout { grid-template-columns: 1fr; }
            .cart-summary { position: static; }
        }
        @media (max-width: 560px) {
            .cart-line { grid-template-columns: 64px minmax(0, 1fr); }
            .cart-line-image { width: 64px; }
            .cart-line-price { grid-column: 1 / -1; text-align: left; }
        }

        .summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; }
        .summary-row--discount { color: var(--success); }
        .summary-row--total { border-top: 1px solid var(--border); margin-top: 6px; padding-top: 12px; font-size: 16px; }
        .cart-checkout { width: 100%; justify-content: center; margin-top: 14px; }
        .cart-checkout:disabled { opacity: .5; cursor: not-allowed; }
        .notice--warning { background: var(--warning-bg, rgba(234, 179, 8, .14)); color: var(--warning, #b45309); border: 1px solid var(--warning, #b45309); }
        .notice-action { margin-top: 10px; }
        .notice-action button { margin: 0; }

        /* Header cart badge. */
        .cart-badge { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--text-muted); text-decoration: none; }
        .cart-badge:hover { color: var(--text); background: var(--surface-alt); }
        .cart-badge svg { width: 18px; height: 18px; }
        .cart-badge-count { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; }


        /* Tone-based badges. The older badge-active/badge-inactive pair stays
           for the on-sale switch; anything with more than two states uses
           these, so a new status is a new token rather than a new class. */
        .badge--success { background: var(--success-bg); color: var(--success); }
        .badge--danger { background: var(--danger-bg); color: var(--danger); }
        .badge--warning { background: var(--warning-bg, rgba(234, 179, 8, .14)); color: var(--warning, #b45309); }
        .badge--info { background: var(--primary-bg, rgba(59, 130, 246, .12)); color: var(--primary); }
        .badge--muted { background: var(--surface-alt); color: var(--text-muted); }

        /* Order detail. */
        .order-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 18px; align-items: start; }
        .order-side { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 14px; }
        .order-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
        .order-card h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
        .order-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 14px; font-size: 13px; color: var(--text-muted); }
        .order-meta strong { color: var(--text); font-weight: 600; }
        .qty-reduced { color: var(--danger); font-weight: 600; }
        .qty-input { width: 74px; padding: 5px 8px; font-size: 13px; text-align: center; margin: 0; }

        /* Status history. */
        .timeline { list-style: none; margin: 0; padding: 0; }
        .timeline li { position: relative; padding: 0 0 14px 18px; border-left: 2px solid var(--border); }
        .timeline li:last-child { padding-bottom: 0; border-left-color: transparent; }
        .timeline li::before { content: ''; position: absolute; left: -5px; top: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
        .timeline-when { font-size: 11px; color: var(--text-faint); }
        .timeline-note { font-size: 12px; color: var(--text-muted); margin-top: 2px; }

        @media (max-width: 900px) {
            .order-layout { grid-template-columns: 1fr; }
            .order-side { position: static; }
        }


        /* Notification bell. A <details> element, so it opens and closes
           without script and still works if JS fails. */
        .bell { position: relative; }
        .bell > summary { list-style: none; cursor: pointer; }
        .bell > summary::-webkit-details-marker { display: none; }
        .bell-trigger { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: var(--radius-sm); color: var(--text-muted); }
        .bell-trigger:hover { color: var(--text); background: var(--surface-alt); }
        .bell-trigger svg { width: 18px; height: 18px; }
        .bell-count { position: absolute; top: 1px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; display: flex; align-items: center; justify-content: center; background: var(--danger); color: #fff; font-size: 10px; font-weight: 700; border-radius: 999px; }

        .bell-panel { position: absolute; top: calc(100% + 6px); right: 0; width: 320px; max-width: calc(100vw - 24px); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12)); z-index: 60; overflow: hidden; }
        .bell-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
        .bell-head form { margin: 0; }
        .bell-empty { padding: 18px 12px; text-align: center; color: var(--text-muted); font-size: 13px; }
        .bell-list { list-style: none; margin: 0; padding: 0; max-height: 340px; overflow-y: auto; }
        .bell-list--page { max-height: none; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
        .bell-item { border-bottom: 1px solid var(--border); }
        .bell-item:last-child { border-bottom: none; }
        .bell-item form { margin: 0; }
        .bell-item-button { display: flex; gap: 9px; width: 100%; margin: 0; padding: 10px 12px; background: none; border: none; text-align: left; cursor: pointer; color: inherit; font: inherit; }
        .bell-item-button:hover { background: var(--surface-alt); }
        .bell-item.is-unread .bell-item-button { background: var(--primary-bg, rgba(59, 130, 246, .07)); }
        .bell-dot { flex-shrink: 0; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--text-faint); }
        .bell-dot--success { background: var(--success); }
        .bell-dot--warning { background: var(--warning, #b45309); }
        .bell-dot--danger { background: var(--danger); }
        .bell-dot--info { background: var(--primary); }
        .bell-item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
        .bell-item-text strong { font-size: 13px; font-weight: 600; }
        .bell-item-body { font-size: 12px; color: var(--text-muted); }
        .bell-item-when { font-size: 11px; color: var(--text-faint); }
        .bell-all { display: block; padding: 9px 12px; text-align: center; font-size: 12px; font-weight: 600; border-top: 1px solid var(--border); text-decoration: none; color: var(--primary); }
        .bell-all:hover { background: var(--surface-alt); }


        /* Wallet strip above the deposit list - the one number a buyer opens
           this screen for. */
        .wallet-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
        .wallet-amount { display: block; font-size: 22px; font-weight: 700; line-height: 1.2; }

        /* Receipt preview. Height rather than aspect-ratio: a receipt may be a
           tall PDF page or a wide phone photo, and a fixed ratio crops one of
           them badly. */
        .receipt-frame { display: block; width: 100%; height: 620px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-alt); }
        .receipt-image { display: block; max-width: 100%; max-height: 620px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
        @media (max-width: 900px) {
            .receipt-frame { height: 420px; }
        }



        /* Plain tables outside the DataTable component - order lines, the
           wallet statement, open debts, the IBAN list. They were never styled
           at all, so on a phone they simply overflowed sideways. Sharing the
           DataTable's rules rather than copying them means the two cannot
           drift apart. */
        .data-table { width: 100%; border-collapse: collapse; }
        .data-table th, .data-table td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13px; text-align: left; }
        .data-table th { color: var(--text-muted); font-weight: 600; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; background: var(--surface-alt); white-space: nowrap; }
        .data-table tbody tr:last-child td { border-bottom: none; }
        .data-table tbody tr:hover { background: var(--surface-alt); }
        .data-table .text-right, .data-table th.text-right { text-align: right; }
        .data-table .text-center, .data-table th.text-center { text-align: center; }

        /* Any wide block scrolls inside its own box rather than pushing the
           page sideways. */
        .table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

        /* Account position cards - the figures a page like this exists for. */
        .account-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
        .account-card { padding: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); }
        .account-figure { display: block; margin-top: 4px; font-size: 21px; font-weight: 700; line-height: 1.2; }
        .account-figure.is-debt { color: var(--danger); }

        /* Statement columns: in and out read at a glance without the eye
           having to check which column a number sits in. */
        .statement-in { color: var(--success); font-weight: 600; }
        .statement-out { color: var(--danger); font-weight: 600; }


        @media (max-width: 768px) {
            /* Same card treatment as the DataTable: the header row disappears
               and every cell carries its own label, so a five-column table
               becomes a readable stack instead of a sideways scroll. */
            .table-scroll { overflow-x: visible; }
            .data-table thead { display: none; }
            .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
            .data-table tr {
                border: 1px solid var(--border); border-radius: var(--radius-sm);
                margin-bottom: 10px; padding: 4px 0; background: var(--surface);
            }
            .data-table tbody tr:last-child { margin-bottom: 0; }
            .data-table tbody tr:hover { background: var(--surface); }
            .data-table td {
                display: flex; align-items: center; justify-content: space-between; gap: 12px;
                border-bottom: none; padding: 7px 12px; white-space: normal;
                text-align: right !important; font-size: 13px;
            }
            .data-table td::before {
                content: attr(data-label);
                font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
                color: var(--text-muted); text-align: left; flex-shrink: 0;
            }
            /* A cell with no data-label (or empty) would render as a stray
               blank row inside the card. */
            .data-table td:not([data-label]) { justify-content: flex-end; }
            .data-table td:empty { display: none; }
            .data-table td .row-actions { justify-content: flex-end; flex-wrap: nowrap; }
        }

        @media (max-width: 768px) {
            /* iOS Safari zooms the page when a focused field is under 16px,
               and the user has to pinch back out every time. On a system used
               mostly from phones that is a constant tax. */
            input[type="text"], input[type="email"], input[type="password"],
            input[type="number"], input[type="search"], input[type="date"],
            input[type="tel"], input[type="url"], select, textarea {
                font-size: 16px;
            }

            /* Comfortable touch targets. 34px icon buttons are fine for a
               mouse and fiddly for a thumb. */
            .icon-btn, .btn-sm, .btn-link-sm, .bell-trigger, .cart-badge {
                min-height: 40px; min-width: 40px;
            }
            .row-actions { gap: 8px; }

            /* Forms and grids stack rather than squeezing two columns into
               320px. */
            .form-grid, .detail-grid { grid-template-columns: 1fr !important; }
            .account-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
            .account-figure { font-size: 18px; }

            /* Page padding is generous on a desktop and wasteful on a phone. */
            .panel-content { padding: 14px 12px; }
            .form-section { padding: 14px 12px; }

            /* Long unbroken strings - IBANs, SKUs, order numbers - must wrap
               instead of widening the page. */
            .mono { word-break: break-all; }
        }

        @media (max-width: 480px) {
            /* Buttons go full width at the narrow end: a half-width button
               beside empty space is harder to hit for no benefit. */
            .form-actions { display: flex; flex-direction: column; gap: 8px; }
            .form-actions button, .form-actions .btn-link { width: 100%; justify-content: center; }
            .page-header { flex-wrap: wrap; gap: 8px; }
            .order-meta { gap: 6px 12px; font-size: 12px; }
            .wallet-strip { flex-direction: column; align-items: stretch; gap: 10px; }
            .wallet-strip .btn-link { justify-content: center; }
        }


        /* ---------------------------------------------------------------
           Charts. Server-rendered SVG and plain HTML - no chart library, no
           build step. They draw before any JavaScript runs, take their colours
           from the theme tokens so light/dark just works, and survive being
           printed.
        ----------------------------------------------------------------*/
        .chart-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 16px; }
        .chart-card h3 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
        .chart-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-bottom: 18px; }

        /* Horizontal bars: label / track / value on one row. */
        .chart-bars { display: flex; flex-direction: column; gap: 9px; }
        .chart-bar-row { display: grid; grid-template-columns: minmax(0, 8rem) 1fr auto; gap: 10px; align-items: center; }
        .chart-bar-label { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chart-bar-track { height: 18px; background: var(--surface-alt); border-radius: var(--radius-sm); overflow: hidden; }
        .chart-bar-fill { height: 100%; background: var(--primary); border-radius: var(--radius-sm); }
        .chart-bar-value { font-size: 12px; font-weight: 600; white-space: nowrap; }

        /* Line chart. */
        .chart-line-wrap { width: 100%; }
        .chart-line { width: 100%; height: 240px; overflow: visible; }
        .chart-grid { stroke: var(--border); stroke-width: 1; }
        .chart-line-path { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
        .chart-line-path--primary { stroke: var(--primary); }
        .chart-line-path--success { stroke: var(--success); }
        .chart-area { stroke: none; opacity: .10; }
        .chart-area--primary { fill: var(--primary); }
        .chart-area--success { fill: var(--success); }
        .chart-dot { stroke: var(--surface); stroke-width: 1.5; }
        .chart-dot--primary { fill: var(--primary); }
        .chart-dot--success { fill: var(--success); }
        .chart-axis { fill: var(--text-faint); font-size: 20px; }

        /* Donut: one circle per slice, drawn with stroke-dasharray. */
        .chart-donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
        .chart-donut { width: 160px; height: 160px; flex-shrink: 0; }
        .chart-donut-track { fill: none; stroke: var(--surface-alt); stroke-width: 18; }
        .chart-donut-arc { fill: none; stroke-width: 18; }
        .chart-donut-arc--success { stroke: var(--success); }
        .chart-donut-arc--warning { stroke: var(--warning, #b45309); }
        .chart-donut-arc--danger { stroke: var(--danger); }
        .chart-donut-arc--info { stroke: var(--primary); }
        .chart-donut-arc--muted { stroke: var(--border-strong); }
        .chart-donut-centre { fill: var(--text); font-size: 26px; font-weight: 700; }
        .chart-donut-caption { fill: var(--text-faint); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }

        .chart-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 12px; color: var(--text-muted); }
        .chart-legend--stacked { flex-direction: column; gap: 7px; margin-top: 0; min-width: 0; }
        .chart-legend-item { display: inline-flex; align-items: center; gap: 7px; }
        .chart-legend-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .chart-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
        .chart-legend-dot--primary { background: var(--primary); }
        .chart-legend-dot--success { background: var(--success); }
        .chart-legend-dot--warning { background: var(--warning, #b45309); }
        .chart-legend-dot--danger { background: var(--danger); }
        .chart-legend-dot--info { background: var(--primary); }
        .chart-legend-dot--muted { background: var(--border-strong); }

        /* ---------------------------------------------------------------
           Report screens: the KPI strip, attention boxes and the date picker.
        ----------------------------------------------------------------*/
        .kpi-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 16px; }
        .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; }
        .kpi-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
        .kpi-value { display: block; margin-top: 5px; font-size: 22px; font-weight: 700; line-height: 1.15; }
        .kpi-change { display: inline-flex; align-items: center; gap: 3px; margin-top: 4px; font-size: 12px; font-weight: 600; }
        .kpi-change--up { color: var(--success); }
        .kpi-change--down { color: var(--danger); }
        .kpi-change--flat { color: var(--text-faint); font-weight: 400; }
        .kpi a { text-decoration: none; color: inherit; }

        /* Attention boxes are links: a count nobody can click is a dead end. */
        .attention-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin-bottom: 18px; }
        .attention {
            display: flex; align-items: center; gap: 11px; padding: 12px 14px; text-decoration: none;
            background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--border-strong);
            border-radius: var(--radius-md); color: inherit;
        }
        .attention:hover { background: var(--surface-alt); }
        .attention--danger { border-left-color: var(--danger); }
        .attention--warning { border-left-color: var(--warning, #b45309); }
        .attention--info { border-left-color: var(--primary); }
        .attention-figure { font-size: 19px; font-weight: 700; line-height: 1.1; }
        .attention--danger .attention-figure { color: var(--danger); }
        .attention--warning .attention-figure { color: var(--warning, #b45309); }
        .attention-text { font-size: 12px; color: var(--text-muted); min-width: 0; }

        /* Date range picker, shared by every report. */
        .range-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
        .range-presets { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
        .range-preset { padding: 7px 12px; font-size: 12.5px; text-decoration: none; color: var(--text-muted); background: var(--surface); white-space: nowrap; }
        .range-preset + .range-preset { border-left: 1px solid var(--border-strong); }
        .range-preset:hover { background: var(--surface-alt); color: var(--text); }
        .range-preset.is-active { background: var(--primary); color: var(--primary-contrast); font-weight: 600; }
        .range-custom { display: flex; align-items: center; gap: 6px; margin: 0; flex-wrap: wrap; }
        .range-custom input[type=date] { width: auto; padding: 6px 9px; font-size: 12.5px; }
        .range-custom button { margin: 0; padding: 7px 13px; font-size: 12.5px; }
        .range-label { font-size: 12px; color: var(--text-faint); margin-left: auto; }

        .report-total-row { font-weight: 700; background: var(--surface-alt); }
        .report-total-row td { border-top: 2px solid var(--border-strong); }

        @media (max-width: 768px) {
            .chart-line { height: 200px; }
            .chart-axis { font-size: 24px; }
            .chart-bar-row { grid-template-columns: minmax(0, 6rem) 1fr auto; gap: 8px; }
            .chart-bar-value { font-size: 11px; }
            .kpi-value { font-size: 19px; }
            .chart-donut-wrap { justify-content: center; }
            .chart-legend--stacked { width: 100%; }

            /* The picker is the first thing a thumb reaches for on a report. */
            .range-bar { gap: 10px; }
            .range-presets { width: 100%; }
            .range-preset { flex: 1; text-align: center; padding: 10px 6px; }
            .range-custom { width: 100%; }
            .range-custom input[type=date] { flex: 1; min-width: 0; }
            .range-label { margin-left: 0; width: 100%; }

            /* A totals row is a card like any other, but it must not look like
               just another record. */
            .data-table tr.report-total-row { border-color: var(--border-strong); border-width: 2px; background: var(--surface-alt); }
        }

        .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

        /* ---------------------------------------------------------------
           Icon buttons. Row actions repeat on every line, so words there cost
           a column of width for no extra meaning. The label still exists for
           screen readers and as a tooltip.
        ----------------------------------------------------------------*/
        .icon-btn {
            width: 32px; height: 32px; padding: 0; margin: 0; flex-shrink: 0;
            display: inline-flex; align-items: center; justify-content: center;
            border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
            background: var(--surface); color: var(--text-muted); cursor: pointer;
            text-decoration: none; transition: color .12s ease, border-color .12s ease, background .12s ease;
        }
        .icon-btn svg { width: 16px; height: 16px; }
        .icon-btn:hover { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); }
        .icon-btn--danger:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }
        .icon-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

        /* ---------------------------------------------------------------
           Switch. Replaces the old "badge saying Active" plus "button saying
           Deactivate" pair - one control that both shows the state and
           changes it. Submits its form on change; the checkbox stays the real
           control so keyboard and screen readers work unchanged.
        ----------------------------------------------------------------*/
        .switch { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; margin: 0; }
        .switch input { position: absolute; opacity: 0; width: 0; height: 0; }
        .switch-track {
            position: relative; width: 38px; height: 21px; flex-shrink: 0;
            background: var(--border-strong); border-radius: 999px; transition: background .16s ease;
        }
        .switch-track::after {
            content: ''; position: absolute; top: 3px; left: 3px; width: 15px; height: 15px;
            background: #fff; border-radius: 50%; transition: transform .16s ease;
            box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        }
        .switch input:checked + .switch-track { background: var(--success); }
        .switch input:checked + .switch-track::after { transform: translateX(17px); }
        .switch input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--focus-ring); }
        .switch input:disabled + .switch-track { opacity: .5; cursor: not-allowed; }
        .switch-label { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
        .switch-form { margin: 0; display: inline-block; }
        .detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; font-size: 13px; }
        .detail-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); margin-bottom: 2px; }
        .term-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
        .term-row:last-of-type { border-bottom: none; }
        .term-row.is-locked { opacity: .75; }

        /* ---------------------------------------------------------------
           Bulk upload screen: the validation report is the point of it, so
           a failed row has to be obvious and say which cell is wrong.
        ----------------------------------------------------------------*/
        .disclosure { margin-top: 16px; border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden; }
        .disclosure > summary { padding: 11px 14px; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-muted); background: var(--surface-alt); list-style: none; }
        .disclosure > summary::-webkit-details-marker { display: none; }
        .disclosure > summary::before { content: "+"; display: inline-block; width: 14px; font-weight: 700; }
        .disclosure[open] > summary::before { content: "-"; }
        .disclosure > summary:hover { color: var(--text); }
        .disclosure > *:not(summary) { padding: 4px 14px 14px; }

        .catalogue-ref { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; font-size: 13px; }
        .catalogue-ref h4 { margin: 12px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
        .catalogue-ref p { margin: 0 0 6px; }
        @media (max-width: 700px) { .catalogue-ref { grid-template-columns: 1fr; } }

        .import-summary { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
        .import-stat { flex: 1; min-width: 130px; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--surface-alt); }
        .import-stat--ok { border-color: var(--success); }
        .import-stat--bad { border-color: var(--danger); }
        .import-stat-value { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; }
        .import-stat--ok .import-stat-value { color: var(--success); }
        .import-stat--bad .import-stat-value { color: var(--danger); }
        .import-stat-label { font-size: 12px; color: var(--text-muted); }

        .import-report { margin-top: 18px; max-height: 480px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); }
        .import-report tr.is-invalid { background: var(--danger-bg); }
        .import-report td { vertical-align: top; white-space: normal; }
        .cell-errors { margin: 0; padding-left: 16px; font-size: 12px; color: var(--danger); }
        .cell-errors-col { font-weight: 600; }
        .cell-errors-col::after { content: ": "; }

        .notice--success { background: var(--success-bg); color: var(--success); border: 1px solid var(--success); }
        .notice--danger { background: var(--danger-bg); color: var(--danger); border: 1px solid var(--danger); }
        .usage-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
        .usage-card { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px; background: var(--surface-alt); }
        .usage-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-faint); }
        .usage-value { font-size: 22px; font-weight: 700; margin-top: 4px; }
        .usage-limit { font-size: 13px; font-weight: 400; color: var(--text-faint); }
        .usage-bar { height: 5px; border-radius: 999px; background: var(--border); margin-top: 8px; overflow: hidden; }
        .usage-bar span { display: block; height: 100%; background: var(--primary); }


        /* ---------------------------------------------------------------
           Panel shell: responsive sidebar (collapsible on desktop, an
           off-canvas drawer on mobile) + header + content + footer.
        ----------------------------------------------------------------*/
        .panel { display: flex; min-height: 100vh; }
        .panel-sidebar {
            width: var(--sidebar-width); flex-shrink: 0; background: var(--sidebar-bg); color: var(--sidebar-text);
            display: flex; flex-direction: column; padding: 16px 0; transition: width .18s ease, transform .2s ease;
            position: sticky; top: 0; height: 100vh; overflow-y: auto; z-index: 40;
            /* Aydinlik temada zemin ile icerik arka plani birbirine cok yakin;
               kenarlik olmadan cubugun nerede bittigi okunmuyor. */
            border-right: 1px solid var(--sidebar-border);
        }
        .panel.is-collapsed .panel-sidebar { width: var(--sidebar-width-collapsed); }
        .panel-brand { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 16px 16px; margin-bottom: 8px; border-bottom: 1px solid var(--sidebar-border); }
        .panel-brand-text { font-weight: 700; font-size: 15px; color: var(--sidebar-text-active); white-space: nowrap; overflow: hidden; }
        .panel-brand-text small { display: block; font-weight: 400; opacity: .6; font-size: 11px; margin-top: 2px; }
        .panel.is-collapsed .panel-brand-text { display: none; }
        .sidebar-toggle {
            margin: 0; padding: 6px; background: transparent; border: 1px solid var(--sidebar-border); color: var(--sidebar-text);
            border-radius: var(--radius-sm); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        }
        .sidebar-toggle:hover { background: var(--sidebar-bg-elevated); color: var(--sidebar-text-active); }
        .sidebar-toggle svg { width: 16px; height: 16px; }

        .panel-nav { display: flex; flex-direction: column; padding: 8px; gap: 2px; }
        .panel-nav a {
            display: flex; align-items: center; gap: 10px; color: var(--sidebar-text); text-decoration: none;
            padding: 9px 12px; font-size: 13px; font-weight: 500; border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden;
        }
        .panel-nav a:hover { background: var(--sidebar-bg-elevated); color: var(--sidebar-text-active); }
        .panel-nav a.active { background: var(--sidebar-active-bg); color: var(--sidebar-accent); font-weight: 600; }
        .panel-nav-group-toggle {
            display: flex; align-items: center; justify-content: space-between; width: 100%;
            background: none; border: none; color: var(--sidebar-text);
            padding: 9px 12px; font-size: 13px; font-weight: 500; font-family: inherit; margin: 0; cursor: pointer; text-align: left;
            border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden;
        }
        .panel-nav-group-toggle:hover { background: var(--sidebar-bg-elevated); color: var(--sidebar-text-active); }
        .panel-nav-group.has-active > .panel-nav-group-toggle { color: var(--sidebar-text-active); font-weight: 600; }
        .panel-nav-group-toggle .chevron { transition: transform .15s ease; font-size: 12px; flex-shrink: 0; }
        .panel-nav-group.is-open > .panel-nav-group-toggle .chevron { transform: rotate(90deg); }
        .panel-nav-group-items { display: none; flex-direction: column; padding-left: 8px; margin-top: 2px; gap: 2px; }
        .panel-nav-group.is-open > .panel-nav-group-items { display: flex; }
        .panel-nav-group-items a { padding-left: 30px; font-size: 12.5px; }
        .panel.is-collapsed .panel-nav-group-items,
        .panel.is-collapsed .panel-nav-group-toggle span:not(.chevron),
        .panel.is-collapsed .panel-nav a span.nav-label { display: none; }

        .panel-body { flex: 1; display: flex; flex-direction: column; min-width: 0; }
        .panel-header {
            display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 24px;
            background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 20;
        }
        .panel-header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
        .panel-header h1 { font-size: 17px; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mobile-menu-toggle {
            display: none; margin: 0; padding: 8px; background: var(--surface-alt); border: 1px solid var(--border-strong);
            color: var(--text); border-radius: var(--radius-sm); cursor: pointer; align-items: center; justify-content: center;
        }
        .mobile-menu-toggle svg { width: 18px; height: 18px; }
        .panel-header-user { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-muted); flex-shrink: 0; }
        .panel-header-user form { margin: 0; }
        .panel-header-user button { margin: 0; padding: 7px 14px; font-size: 13px; }
        .panel-header-user .user-name { display: none; }
        @media (min-width: 480px) { .panel-header-user .user-name { display: inline; } }

        .theme-switcher { display: flex; align-items: center; gap: 2px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
        .theme-switcher button {
            margin: 0; padding: 6px 8px; background: transparent; color: var(--text-muted); border-radius: 5px;
            display: flex; align-items: center; justify-content: center;
        }
        .theme-switcher button svg { width: 15px; height: 15px; }
        .theme-switcher button:hover { background: var(--surface); color: var(--text); }
        .theme-switcher button.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

        .locale-switcher { display: flex; align-items: center; gap: 2px; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 2px; }
        .locale-switcher a {
            padding: 5px 9px; border-radius: 5px; font-size: 11px; font-weight: 700; letter-spacing: .03em;
            color: var(--text-muted); text-decoration: none; line-height: 1.4;
        }
        .locale-switcher a:hover { background: var(--surface); color: var(--text); }
        .locale-switcher a.active { background: var(--surface); color: var(--primary); box-shadow: var(--shadow-sm); }

        .panel-content { flex: 1; padding: 24px; width: 100%; max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
        .panel-footer { padding: 14px 24px; font-size: 12px; color: var(--text-faint); text-align: center; border-top: 1px solid var(--border); }

        .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(10, 12, 20, .55); z-index: 39; }

        @media (max-width: 900px) {
            .panel-sidebar {
                position: fixed; top: 0; left: 0; height: 100vh; width: var(--sidebar-width);
                transform: translateX(-100%); box-shadow: var(--shadow-modal);
            }
            .panel.is-mobile-open .panel-sidebar { transform: translateX(0); }
            .panel.is-mobile-open .sidebar-backdrop { display: block; }
            .panel.is-collapsed .panel-sidebar { width: var(--sidebar-width); }
            .panel.is-collapsed .panel-brand-text,
            .panel.is-collapsed .panel-nav-group-toggle span:not(.chevron),
            .panel.is-collapsed .panel-nav a span.nav-label { display: initial; }
            .panel.is-collapsed .panel-nav-group.is-open .panel-nav-group-items { display: flex; }
            .sidebar-toggle { display: none; }
            .mobile-menu-toggle { display: flex; }
            .panel-content { padding: 16px; }
            .panel-header { padding: 12px 16px; }
        }
    
        /* --- denetim izi -------------------------------------------------
           Eski deger ustu cizili degil soluk: ustu cizili metin "silindi"
           demektir, oysa burada anlatilan "onceki halde buydu". */
        .audit-change { display: inline-flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
        .audit-old { color: var(--text-muted); }
        .audit-arrow { color: var(--text-muted); font-size: .9em; }
        .audit-new { font-weight: 600; }
        .audit-event { font-family: var(--font-mono, ui-monospace, monospace); font-size: .85em; color: var(--text-muted); }

        /* Telefonda ok isareti satiri tasirir; alt alta okunur. */
        @media (max-width: 640px) {
            .audit-change { flex-direction: column; align-items: flex-start; gap: .15rem; }
            .audit-arrow { transform: rotate(90deg); }
        }
    
        /* --- bildirim tercihleri ---------------------------------------- */
        .pref-list { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
        .pref-row {
            display: grid; grid-template-columns: 1fr auto; gap: .75rem 1.5rem; align-items: center;
            padding: 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
        }
        .pref-info strong { display: block; margin-bottom: .15rem; }
        .pref-channels { display: flex; gap: 1.25rem; }
        .pref-channel { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
        /* 40px dokunma hedefi: telefonda onay kutusunun kendisi cok kucuk. */
        .pref-channel input[type="checkbox"] { width: 20px; height: 20px; }
        .pref-channel.is-locked { cursor: default; opacity: .65; }
        .pref-note { grid-column: 1 / -1; }

        /* Telefonda iki sutun sigmaz; kanallar bilginin altina gecer. */
        @media (max-width: 640px) {
            .pref-row { grid-template-columns: 1fr; }
            .pref-channels { gap: 1.5rem; }
            .pref-channel { min-height: 40px; }
        }
    
        /* Sifre gibi kisa formlar tam genislikte esnemez; okunur kalir. */
        .form-narrow { max-width: 26rem; }
    
        /* --- basvuru detayi ------------------------------------------------ */
        .detail-list { display: grid; grid-template-columns: minmax(9rem, auto) 1fr; gap: .5rem 1rem; margin: 0 0 1rem; }
        .detail-list dt { color: var(--text-faint); font-size: 12px; }
        .detail-list dd { margin: 0; }
        /* Ziyaretcinin yazdigi metin: satir sonlari korunur ama HTML calismaz. */
        .preserve-lines { white-space: pre-wrap; word-break: break-word; }

        @media (max-width: 640px) {
            .detail-list { grid-template-columns: 1fr; gap: .1rem; }
            .detail-list dd { margin-bottom: .6rem; }
        }
    
        /* --- bayi kullanicisi sifre sifirlama ---------------------------- */
        .user-reset { display: grid; grid-template-columns: 1fr auto; gap: 1rem 1.5rem; align-items: start;
                      padding: 1rem 0; border-bottom: 1px solid var(--border); }
        .user-reset:last-child { border-bottom: 0; }
        .user-reset__who .badge { margin-top: .35rem; display: inline-block; }
        .user-reset__form { display: flex; gap: .75rem; align-items: flex-end; flex-wrap: wrap; }
        .user-reset__form .field { margin-bottom: 0; }
        .user-reset__form input { min-width: 11rem; }

        @media (max-width: 720px) {
            .user-reset { grid-template-columns: 1fr; }
            .user-reset__form { width: 100%; }
            .user-reset__form .field { flex: 1 1 100%; }
            .user-reset__form input { width: 100%; min-width: 0; }
        }

/* ---------------------------------------------------------------------
   Tick-list picker - brands, models, model years, product types.

   A <select multiple> was the obvious choice and the wrong one: it hides
   how many things are ticked, needs ctrl-click to add a second, and on a
   phone it opens a control most people cannot work out. Checkboxes say
   what is chosen without being asked.

   The list scrolls rather than growing: twenty model years should not push
   the price fields off the screen.
   --------------------------------------------------------------------- */
.picker { border: 1px solid var(--line); border-radius: var(--radius-sm, 8px); background: var(--surface); }

.picker__bar { display: flex; align-items: center; gap: .6rem; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
.picker__bar:has(.picker__search[hidden]):has(.picker__clear[hidden]):not(:has(.picker__count:not(:empty))) { display: none; }
.picker__search { flex: 1; min-width: 0; font-size: .9rem; padding: .35rem .5rem; }
.picker__count { font-size: .82rem; color: var(--ink-soft); white-space: nowrap; }
.picker__clear { background: none; border: 0; padding: .2rem .4rem; font-size: .82rem; color: var(--err); cursor: pointer; }
.picker__clear:hover { text-decoration: underline; }

.picker__options { max-height: 15rem; overflow-y: auto; padding: .35rem; display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .1rem; }
.picker__option { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border-radius: 6px; cursor: pointer; font-size: .92rem; }
.picker__option:hover { background: var(--surface-alt, rgba(0,0,0,.04)); }
.picker__option input { width: 16px; height: 16px; flex: none; margin: 0; }
.picker__option span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.picker__empty { grid-column: 1 / -1; margin: 0; padding: .8rem .5rem; font-size: .88rem; color: var(--ink-soft); }

.field--error .picker { border-color: var(--err); }

@media (max-width: 640px) {
    .picker__options { grid-template-columns: 1fr 1fr; max-height: 12rem; }
}

/* =====================================================================
   LAYOUT: full-width main body, and a catalogue that fits beside the menu

   Appended rather than edited in place: the rules above are load-bearing for
   twenty screens, and overriding a handful of them at the end is far easier
   to read - and to undo - than rewriting them where they sit.
   ===================================================================== */

/* ---- 1. The main body fills the window --------------------------------
   .panel-content was capped at 1200px and centred, which on a wide monitor
   left the catalogue and every table squeezed into the middle with empty
   gutters either side. A parts list is a screen you want to be wide. */
.panel-content {
    max-width: none;
    margin: 0;
    padding: 24px 28px;
}

/* Full width is right for lists and wrong for forms. A three-column form
   grid on a 2560px monitor becomes six columns of stretched inputs with the
   label a hand-span from its field; nobody reads that more comfortably for
   being given the room. So the page fills the window and the *forms inside
   it* keep a measure. Tables, cards and the catalogue are unaffected. */
.form-section,
.panel-content > .prose {
    max-width: 78rem;
}


/* Roomier hit targets once it is a sheet rather than a rail - a checkbox
   sized for a mouse is a poor target for a thumb. */
/* Tablette dar kenar bosluklari. Yukaridaki kosulsuz kural, dosyanin
   basindaki 900px padding kuralindan sonra geldigi icin onu eziyordu -
   burada geri veriliyor. */
@media (max-width: 900px) {
    .panel-content { padding: 16px; }
}

@media (max-width: 640px) {
    .panel-content { padding: 14px 12px; }
}


/* ---- 4. Wider grid, same cards ---------------------------------------
   With the cap gone the grid can use the room. auto-fill was already there;
   the minimum is raised a little so a very wide screen shows fuller cards
   instead of a dozen thin ones. */
@media (min-width: 1600px) {
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
}

/* Marka alani artik bir <a>: katalogun filtresiz haline goturur.
   Baglanti gorunumunu almasin - alt cizgi ve mavi renk buraya ait degil. */
a.panel-brand-text { display: block; text-decoration: none; color: var(--sidebar-text-active); }
a.panel-brand-text:hover { opacity: .85; }
a.panel-brand-text:focus-visible { outline: 2px solid var(--sidebar-accent); outline-offset: 2px; border-radius: 4px; }

/* ---------------------------------------------------------------------
   Bayi basligindaki kucuk kutular: borc, gecikmis borc, geri sayim.

   Baslikta duruyorlar ve baslik zaten dar; bu yuzden etiketler kucuk ve
   ustte, sayilar altta. Dar ekranda once etiketler degil, en az degerli
   olan (toplam borc) gizleniyor - gecikmis tutar ve sayac kaliyor.
   --------------------------------------------------------------------- */
.buyer-stats { display: flex; align-items: stretch; gap: 8px; margin-left: auto; margin-right: 12px; }

.buyer-stat {
    display: flex; flex-direction: column; justify-content: center;
    min-width: 96px; padding: 5px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
    background: var(--surface-alt, rgba(0,0,0,.02));
    line-height: 1.25;
}
.buyer-stat__label { font-size: 10px; letter-spacing: .02em; color: var(--text-muted); white-space: nowrap; }
.buyer-stat__value { font-size: 13px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Gecikmis borc sifirdan buyukse: bir bayinin gormesi gereken tek fark bu. */
.buyer-stat--alert { border-color: #f3c6c4; background: var(--err-soft, #fdf2f2); }
.buyer-stat--alert .buyer-stat__value { color: #8f1a1a; }

.buyer-stat--clock .buyer-stat__value { font-variant-numeric: tabular-nums; }
.buyer-stat--clock.is-urgent { border-color: #f2d9b8; background: var(--warn-soft, #fdf6ec); }
.buyer-stat--clock.is-urgent .buyer-stat__value { color: #7d420a; }
.buyer-stat--clock.is-closed { opacity: .65; }

@media (max-width: 1100px) {
    /* Toplam borc once gider: gecikmis tutar ve kalan sure daha aciktir. */
    .buyer-stat:first-child { display: none; }
}
@media (max-width: 720px) {
    .buyer-stats { gap: 6px; margin-right: 8px; }
    .buyer-stat { min-width: 0; padding: 4px 8px; }
    .buyer-stat__label { font-size: 9px; }
    .buyer-stat__value { font-size: 12px; }
}
@media (max-width: 520px) {
    /* Telefonda baslikta yalnizca sayac kaliyor - borc rakami Hesabim
       ekraninda zaten var, sayacin ise baska yeri yok. */
    .buyer-stat:not(.buyer-stat--clock) { display: none; }
}

/* =====================================================================
   Bayi katalogu: filtreler araç çubuğunda

   Eskiden solda bir raydi ve butun gruplar ayni anda acikti. Musteri hem
   aramanin yanina tasinmasini hem de bir marka secilince digerlerinin
   kapanmasini istedi; acilir menu ikisini birden veriyor - menu zaten
   varsayilan olarak kapali.
   ===================================================================== */

.catalogue { display: block; }

.cat-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* Yalnizca dar ekranda: acilan panelin dibindeki "sonuclari goster". */
.cat-filters__foot { display: none; }

.cat-filters__clear {
    background: none; border: 0; padding: 4px 6px;
    font-size: 12px; color: var(--err, #b91c1c); cursor: pointer; white-space: nowrap;
}
.cat-filters__clear:hover { text-decoration: underline; }

/* ---- bir acilir menu ---- */
.cat-drop { position: relative; }

.cat-drop__btn {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 7px 10px; margin: 0;
    border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
    background: var(--surface); color: var(--text); font-size: 13px;
    cursor: pointer; white-space: nowrap;
}
.cat-drop__btn:hover { border-color: var(--text-faint); }
.cat-drop__btn svg { width: 14px; height: 14px; opacity: .55; transition: transform .15s; }
.cat-drop.is-open .cat-drop__btn svg { transform: rotate(180deg); }

/* Secim yapilmis bir menu, yapilmamis olandan bir bakista ayrilmali. */
.cat-drop__btn.is-on { border-color: var(--accent, #2563eb); color: var(--accent, #2563eb); background: var(--accent-soft, #eff6ff); }
.cat-drop__count {
    min-width: 17px; padding: 0 4px; font-size: 11px; line-height: 17px;
    text-align: center; border-radius: 999px;
    background: var(--accent, #2563eb); color: #fff;
}

.cat-drop__menu {
    position: absolute; top: calc(100% + 5px); left: 0; z-index: 40;
    min-width: 230px; max-width: 320px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md, 8px); box-shadow: var(--shadow-md, 0 8px 24px rgba(0,0,0,.12));
    padding: 6px;
}
.cat-drop__menu--wide { min-width: 260px; }

.cat-drop__search {
    width: 100%; margin-bottom: 4px; padding: 6px 8px; font-size: 13px;
    border: 1px solid var(--border); border-radius: 6px;
}
.cat-drop__list { max-height: 260px; overflow-y: auto; }
.cat-drop__empty, .cat-drop__hint { margin: 6px; font-size: 12px; color: var(--text-muted); }

.cat-opt { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.cat-opt:hover { background: var(--surface-alt, rgba(0,0,0,.04)); }
.cat-opt input { width: 15px; height: 15px; flex: none; margin: 0; }
.cat-opt__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-opt__count { font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
/* Arkasinda urun kalmadi: listeden cikar.

   Isaretli bir secenek hicbir zaman bu sinifi almaz (bkz. catalogue.js), yani
   kendi sectigi bir seyi kaldiramaz hale gelen kimse olmuyor. Kurumsal
   sitedeki genel katalog da ayni davraniyor - orada sunucu sifir sayili
   secenegi hic gondermiyor. */
.cat-opt.is-empty { display: none; }

/* Butun secenekleri gizlenmis bir menunun dugmesi de anlamsiz. */
.cat-drop.is-empty { display: none; }

.cat-price { display: flex; align-items: center; gap: 6px; padding: 4px 8px; }
.cat-price input { width: 100%; min-width: 0; padding: 6px 8px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; }
.cat-price__dash { color: var(--text-muted); }

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

/* ---- dar ekran: tek dugme, altinda acilan akordiyon ----

   Onceki hali sayfayi kaplayan tam ekran bir katmandi. Filtre secerken
   sonuclar goruntuden tamamen cikiyordu - oysa secimin ne yaptigini gormek
   isteniyor. Simdi panel dugmenin altinda, sayfa akisinin icinde aciliyor ve
   icerik asagi kayiyor; gruplar orada da acilir menu olarak kaliyor, hepsi
   birden acilirsa alti liste ust uste yiginiyordu. */
/* Genis ekranda sarmalayici yokmus gibi davranir: `.cat-filters` yine araç
   çubuğunun dogrudan ogesi, dugme ise gizli. */
.cat-filterbar { display: contents; }
.cat-sheet-btn { display: none; }

@media (max-width: 900px) {
    .cat-filterbar { display: block; width: 100%; }

    .cat-sheet-btn {
        display: flex; align-items: center; gap: 8px; width: 100%;
        margin: 0; padding: 10px 14px;
        border: 1px solid var(--border); border-radius: var(--radius-md, 8px);
        background: var(--surface); color: var(--text); font-size: 14px; cursor: pointer;
    }
    .cat-sheet-btn__icon { width: 18px; height: 18px; flex: none; }
    .cat-sheet-btn__chev { width: 16px; height: 16px; flex: none; margin-left: auto; opacity: .55; transition: transform .15s; }
    .catalogue.is-sheet-open .cat-sheet-btn__chev { transform: rotate(180deg); }
    .cat-sheet-btn__count { min-width: 19px; padding: 0 5px; font-size: 11px; line-height: 19px; text-align: center; border-radius: 999px; background: var(--accent, #2563eb); color: #fff; }

    /* Panel acikken dugme onun basligi gibi okunsun: alt kose yuvarlagi
       kalkar, iki parca tek kutu olur. */
    .catalogue.is-sheet-open .cat-sheet-btn {
        border-bottom-left-radius: 0; border-bottom-right-radius: 0;
        border-color: var(--border-strong); background: var(--surface-alt);
    }

    .cat-filters {
        display: none; width: 100%;
        flex-direction: column; align-items: stretch; gap: 0;
        background: var(--surface);
        border: 1px solid var(--border-strong); border-top: 0;
        border-radius: 0 0 var(--radius-md, 8px) var(--radius-md, 8px);
        overflow: hidden;
    }
    .catalogue.is-sheet-open .cat-filters { display: flex; }

    /* Gruplar alt alta, her biri kendi satiri; ok sagda. */
    .cat-drop { border-top: 1px solid var(--border); }
    .cat-drop:first-child { border-top: 0; }
    .cat-drop__btn {
        width: 100%; justify-content: flex-start; border: 0; border-radius: 0;
        padding: 13px 14px; font-size: 14px; font-weight: 600; background: none;
    }
    .cat-drop__btn svg { display: block; margin-left: auto; }
    .cat-drop__btn.is-on { background: none; }

    .cat-drop__menu {
        position: static; min-width: 0; max-width: none;
        border: 0; border-radius: 0; box-shadow: none; padding: 0 6px 8px;
        background: var(--surface-alt);
    }
    /* Uzun bir marka listesi paneli sayfa boyu uzatmasin - kendi icinde
       kaydirilir, sonuclar ekranda kalir. */
    .cat-drop__list { max-height: 45vh; }
    .cat-opt { padding: 10px 8px; font-size: 15px; }
    .cat-opt input { width: 18px; height: 18px; }

    .cat-filters__clear { align-self: flex-start; margin: 8px 14px; font-size: 14px; }

    .cat-filters__foot {
        display: block; padding: 10px 14px;
        border-top: 1px solid var(--border); background: var(--surface);
    }
    .cat-filters__foot .btn { width: 100%; }
}