/* =========================================================
   Panel tasarım sistemi  ·  v3
   Tipografi : Inter (gövde/tablo)  +  Plus Jakarta Sans (başlık/menü/buton)
   Marka      : rgba(3, 11, 254, 1) ≈ HSL 238.1 99.2% 50.4%

   İlkeler
   - Sakin, nötr zemin; renk yalnızca anlam taşıdığı yerde.
   - Tek boşluk/yarıçap/gölge ölçeği; bileşenler aynı ritmi paylaşır.
   - Gamma hareketi yerine ölçülü mikro etkileşim (hover, focus, geçiş).
   ========================================================= */

/* ---------------------------------------------------------
   1. Tokenlar
   --------------------------------------------------------- */
:root {
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-head: 'Plus Jakarta Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    --brand: 238.1 99.2% 50.4%;
    --brand-2: 250 84% 58%;
    --brand-ink: 238 60% 30%;
    --brand-text: var(--brand);
    --success: 158 64% 36%;
    --warning: 32 92% 44%;
    --danger: 0 68% 52%;
    --info: 210 88% 46%;

    --sp-1: .25rem;
    --sp-2: .5rem;
    --sp-3: .75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-7: 2rem;

    --radius-xs: 6px;
    --radius-sm: 10px;
    --radius: 14px;
    --radius-lg: 20px;
    --sidebar-w: 262px;
    --topbar-h: 60px;

    /* Yüzeyler (light) */
    --app-bg: 240 20% 98.4%;
    --app-surface: 0 0% 100%;
    --app-surface-2: 240 24% 99.2%;
    --app-surface-3: 240 22% 97%;
    --app-border: 240 13% 91%;
    --app-border-strong: 240 11% 86%;
    --app-shadow: 240 40% 22%;
    --glow: .05;

    /* Gölge katmanları — kart yüzeyi için tek, yüzen katmanlar için ikili */
    --sh-xs: 0 1px 2px hsl(var(--app-shadow) / .05);
    --sh-sm: 0 1px 2px hsl(var(--app-shadow) / .05), 0 2px 6px -2px hsl(var(--app-shadow) / .08);
    --sh-md: 0 1px 2px hsl(var(--app-shadow) / .04), 0 10px 24px -18px hsl(var(--app-shadow) / .3);
    --sh-lg: 0 2px 4px hsl(var(--app-shadow) / .05), 0 24px 48px -26px hsl(var(--app-shadow) / .4);

    /* Not: `--ring` Franken UI'da renk üçlüsü olarak kullanılıyor, çakışmasın diye ayrı isim. */
    --focus-ring: 0 0 0 3px hsl(var(--brand) / .18);
}

html.dark {
    --brand-text: 238 100% 80%;
    --brand-ink: 238 100% 86%;
    --app-bg: 240 10% 6%;
    --app-surface: 240 9% 8.4%;
    --app-surface-2: 240 9% 7.4%;
    --app-surface-3: 240 9% 11%;
    --app-border: 240 8% 17%;
    --app-border-strong: 240 8% 26%;
    --app-shadow: 0 0% 0%;
    --glow: .12;
    --sh-md: 0 1px 2px hsl(0 0% 0% / .4), 0 12px 26px -18px hsl(0 0% 0% / .8);
    --sh-lg: 0 2px 6px hsl(0 0% 0% / .5), 0 26px 52px -30px hsl(0 0% 0% / .9);
}

/* Franken UI / UIkit token köprüsü */
:root,
.uk-theme-zinc,
.dark.uk-theme-zinc {
    --primary: 238.1 99.2% 50.4% !important;
    --primary-foreground: 0 0% 100% !important;
    --ring: 238.1 99.2% 50.4% !important;
    --uk-global-font-family-sans: var(--font-body) !important;
    --uk-global-radius: var(--radius-sm) !important;
}

.uk-theme-zinc {
    --card: var(--app-surface);
    --muted: 240 20% 96.5%;
    --accent: 240 22% 96%;
    --border: var(--app-border);
    --input: var(--app-border);
}

.dark.uk-theme-zinc {
    --card: var(--app-surface);
    --muted: 240 8% 15%;
    --accent: 240 8% 14%;
    --border: var(--app-border);
    --input: var(--app-border);
}

/* ---------------------------------------------------------
   2. Temel
   --------------------------------------------------------- */
html,
body {
    height: 100%;
}

html {
    background: hsl(var(--app-bg));
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 14.5px;
    line-height: 1.55;
    background-color: hsl(var(--app-bg));
    background-image: radial-gradient(1100px 520px at 50% -18%, hsl(var(--brand) / var(--glow)), transparent 72%);
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: hsl(var(--foreground));
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.app-brand,
.app-page-title,
.uk-btn,
.uk-tab > * > a {
    font-family: var(--font-head);
}

h1, h2, h3, h4, h5, h6 {
    color: hsl(var(--foreground));
    letter-spacing: -.018em;
}

::selection {
    background: hsl(var(--brand) / .2);
}

:focus-visible {
    outline: 2px solid hsl(var(--brand) / .55);
    outline-offset: 2px;
}

/* İnce, yuvarlak scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: hsl(var(--app-border-strong)) transparent;
}

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

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

*::-webkit-scrollbar-thumb {
    background: hsl(var(--app-border-strong));
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: 20px;
}

*::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / .5);
    background-clip: content-box;
}

/* ---------------------------------------------------------
   3. İskelet
   --------------------------------------------------------- */
.app-shell {
    display: flex;
    min-height: 100vh;
}

.app-sidebar {
    width: var(--sidebar-w);
    flex: 0 0 var(--sidebar-w);
    display: flex;
    flex-direction: column;
    padding: 14px 12px 12px;
    border-right: 1px solid hsl(var(--app-border));
    background: hsl(var(--app-surface));
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    z-index: 40;
}

html.dark .app-sidebar {
    background: hsl(var(--app-surface-2));
}

/* Kabuk kromu (kenar çubuğu, üst çubuk, hızlı işlem çekmecesi) metin seçimine
   kapalı: menüye/butona tıklarken yazı seçilmesin. İçerik alanını etkilemez. */
.app-sidebar,
.app-topbar,
.quick-drawer {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* Bu bölgelerde form alanı olursa seçim yine çalışsın. */
.app-sidebar input,
.app-sidebar textarea,
.app-topbar input,
.app-topbar textarea,
.quick-drawer input,
.quick-drawer textarea {
    -webkit-user-select: text;
    -moz-user-select: text;
    user-select: text;
}

.app-brand {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 4px 6px 14px;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.02em;
    text-decoration: none;
    color: hsl(var(--foreground));
}

.app-brand span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    margin-left: .7rem;
    padding-left: .7rem;
    border-left: 1px solid hsl(var(--app-border));
    color:rgba(5, 13, 255, 1);
}

/* Logo geniş bir wordmark (500x250) → kare değil, okunur yükseklikte rozet. */
.app-logo {
    height: 42px;
    width: auto;
    max-width: 96px;
    object-fit: contain;
    padding: 2px;
    border-radius: var(--radius-xs);
    flex: 0 0 auto;
    background: hsl(var(--app-surface));
    box-shadow: inset 0 0 0 1px hsl(var(--app-border));
}

/* Logo şeffaf PNG (mavi yazı). Koyu temada okunabilmesi için rozet beyaz kalır. */
html.dark .app-logo,
html.dark .auth-mark {
    background-color: hsl(0 0% 100%);
    padding: 5px;
}

.app-main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: var(--topbar-h);
    padding: .55rem 1.4rem;
    border-bottom: 1px solid hsl(var(--app-border));
    position: sticky;
    top: 0;
    z-index: 30;
    backdrop-filter: blur(14px) saturate(150%);
    background: hsl(var(--app-surface) / .82);
}

.app-content {
    padding: 1.5rem 1.4rem 3.5rem;
    width: 100%;
    animation: appFade .3s cubic-bezier(.22, .61, .36, 1) backwards;
}

/* ---- Sayfa geçişleri (native cross-document View Transitions) ----
   Sidebar + üst çubuk sabit kalır, yalnızca içerik yumuşakça değişir.
   Desteklemeyen tarayıcıda yukarıdaki appFade devreye girer. */
@view-transition { navigation: auto; }

@supports (view-transition-name: none) {

    .app-content { animation: none; }
    .app-sidebar { view-transition-name: app-sidebar; }
    .app-topbar  { view-transition-name: app-topbar; }
    .app-content { view-transition-name: app-content; }
    .auth-wrap   { view-transition-name: auth-wrap; }

    ::view-transition-group(app-sidebar),
    ::view-transition-group(app-topbar) { animation-duration: 0s; }

    ::view-transition-old(app-content) {
        animation: vtOut .12s ease both;
    }
    ::view-transition-new(app-content) {
        animation: vtIn .22s cubic-bezier(.22, .61, .36, 1) both;
    }
    /* Aynı bölüm içinde gezinti (ör. Ayarlar sekmeleri, app.js 'pagereveal' ile işaretlenir): sayfa değişmiş gibi değil, sekme
       değişmiş gibi hissedilsin diye kayma/solma yok; eski içerik yerinde kalır, yenisi üstüne hızlıca belirir. */
    html:active-view-transition-type(same-section)::view-transition-old(app-content) { animation: none; }
    html:active-view-transition-type(same-section)::view-transition-new(app-content) { animation: vtFade .14s ease both; }

    ::view-transition-old(auth-wrap) { animation: vtOut .18s ease both; }
    ::view-transition-new(auth-wrap) { animation: vtIn .3s cubic-bezier(.22, .61, .36, 1) both; }
}

@keyframes vtOut { to { opacity: 0; transform: translateY(-4px); } }
@keyframes vtIn  { from { opacity: 0; transform: translateY(6px); } }
@keyframes vtFade { from { opacity: 0; } }

/* Gezinme sırasında üstte ince ilerleme çubuğu (app.js ekler). */
.nav-progress {
    position: fixed;
    inset: 0 0 auto 0;
    height: 2px;
    z-index: 9999;
    background: hsl(var(--brand));
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0;
    pointer-events: none;
}
.nav-progress.on {
    opacity: 1;
    transform: scaleX(.85);
    transition: transform 8s cubic-bezier(.1, .6, .2, 1);
}

@media (prefers-reduced-motion: reduce) {
    @view-transition { navigation: none; }
    .app-content { animation: none; }
    .nav-progress.on { transition: none; }
}

@keyframes appFade {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

.app-topbar .uk-btn {
    flex: 0 0 auto;
}

/* Hızlı işlemler düğmesi: hafif marka tonu + yavaş nabız atan ikon. */
.quick-toggle {
    background-color: hsl(var(--brand) / .08);
    border-color: hsl(var(--brand) / .22);
    color: hsl(var(--brand-text));
}

.quick-toggle:hover {
    background-color: hsl(var(--brand) / .14);
    border-color: hsl(var(--brand) / .38);
    color: hsl(var(--brand-text));
}

.quick-toggle > svg,
.quick-toggle > [data-lucide] {
    animation: quickPulse 2.6s ease-in-out infinite;
    transform-origin: center;
}

@keyframes quickPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.16); opacity: .7; }
}

@media (prefers-reduced-motion: reduce) {
    .quick-toggle > svg,
    .quick-toggle > [data-lucide] {
        animation: none;
    }
}

/* ---------------------------------------------------------
   Hızlı işlem çekmecesi (sağdan kayar)
   --------------------------------------------------------- */
.quick-backdrop {
    position: fixed;
    inset: 0;
    z-index: 65;
    background: rgba(8, 10, 30, .45);
    backdrop-filter: blur(3px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility 0s linear .22s;
}

.app-shell.quick-open .quick-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .22s ease, visibility 0s;
}

/* Kırpıcı kapsayıcı: tam viewport, taşmayı gizler. Kapalıyken tıklamayı
   geçirir (pointer-events:none), böylece arkadaki backdrop tıklanabilir kalır. */
.quick-drawer-wrap {
    position: fixed;
    inset: 0;
    z-index: 70;
    overflow: hidden;
    pointer-events: none;
    visibility: hidden;
    transition: visibility 0s linear .26s;
}

.app-shell.quick-open .quick-drawer-wrap {
    visibility: visible;
    transition: visibility 0s;
}

.quick-drawer {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(350px, 90vw);
    display: flex;
    flex-direction: column;
    background: hsl(var(--app-surface));
    border-left: 1px solid hsl(var(--app-border));
    box-shadow: var(--sh-lg);
    pointer-events: auto;
    transform: translateX(102%);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
}

.app-shell.quick-open .quick-drawer {
    transform: translateX(0);
}

.quick-drawer-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .7rem .8rem .7rem 1rem;
    border-bottom: 1px solid hsl(var(--app-border));
    font-family: var(--font-head);
    font-size: .9rem;
    font-weight: 700;
    letter-spacing: -.012em;
}

.quick-drawer-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: .85rem;
    /* Kartlar zeminden ayrışsın diye gövde sayfa zemininde. */
    background: hsl(var(--app-bg));
    overflow-y: auto;
}

/* ---------------------------------------------------------
   Hızlı İşlemler > Hızlı Borç / Alacak (assets/js/quick-tx.js)
   --------------------------------------------------------- */
.quick-tx {
    flex: 0 0 auto;   /* boşluk .quick-drawer-body gap'inden gelir (kartlarla aynı .7rem) */
    padding: .85rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface));
    box-shadow: var(--sh-xs);
}

.quick-tx-title {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .7rem;
    font-family: var(--font-head);
    font-size: .875rem;
    font-weight: 700;
    letter-spacing: -.012em;
}

.quick-tx-title svg { color: hsl(var(--brand)); }
.quick-tx [hidden] { display: none !important; }

.qtx-label {
    display: block;
    margin-bottom: .25rem;
    font-size: .72rem;
    font-weight: 600;
    color: hsl(var(--muted-foreground));
}

.qtx-label .muted { font-weight: 400; }
.qtx-field { margin-top: .55rem; }
.qtx-row { display: flex; gap: .5rem; }
.qtx-row .qtx-field { margin-top: .55rem; }
.qtx-grow { flex: 1 1 auto; min-width: 0; }

.qtx-picked {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .35rem .5rem .65rem;
    border: 1px solid hsl(var(--brand) / .3);
    border-radius: var(--radius-sm);
    background: hsl(var(--brand) / .05);
}

.qtx-who { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.3; }
.qtx-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.qtx-who small { font-size: .72rem; color: hsl(var(--muted-foreground)); }   /* bakiye metni kesilmesin, sarılsın */

.qtx-clear {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
}

.qtx-clear:hover { background: hsl(var(--muted)); color: hsl(var(--foreground)); }

.qtx-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; margin-top: .7rem; }

.qtx-t {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    height: 2.15rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface));
    color: hsl(var(--foreground));
    font-size: .82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.qtx-t:hover { border-color: hsl(var(--app-border-strong)); }
.qtx-debit.is-on { background: hsl(var(--danger)); border-color: hsl(var(--danger)); color: #fff; }
.qtx-credit.is-on { background: hsl(var(--success)); border-color: hsl(var(--success)); color: #fff; }

.qtx-hint { margin-top: .4rem; font-size: .72rem; line-height: 1.35; color: hsl(var(--muted-foreground)); }

.qtx-save { width: 100%; margin-top: .8rem; justify-content: center; }

.qtx-open {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    margin-top: .55rem;
    font-size: .74rem;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
}

.qtx-open:hover { color: hsl(var(--brand-text)); text-decoration: underline; }

/* Kaydetmeden önceki SweetAlert onayında özet kutusu */
.qtx-sum {
    display: flex;
    flex-direction: column;
    gap: .45rem;
    margin-top: .5rem;
    padding: .75rem .9rem;
    text-align: left;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface-2));
}

.qtx-sum > div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.qtx-sum span { color: hsl(var(--muted-foreground)); }
.qtx-sum b { text-align: right; word-break: break-word; }

/* Seçici listesindeki bakiye */
.ac-bal { font-weight: 600; }
.ac-bal.is-debt { color: hsl(var(--danger)); }
.ac-bal.is-credit { color: hsl(var(--success)); }

/* Dar ekranda yazı küçülür ama gizlenmez. */
@media (max-width: 767px) {
    .quick-toggle {
        padding-left: .6rem;
        padding-right: .6rem;
        gap: .4rem;
    }

    .quick-toggle-txt {
        font-size: .72rem;
    }

    /* "Hızlı İşlemler" -> "İşlem": mobilde yer kazanmak için fazlalık gizlenir. */
    .qt-full {
        display: none;
    }

    /* POS yazısı mobilde daha ince */
    .pos-launch-txt {
        font-weight: 400;
        letter-spacing: .02em;
    }
}

/* ---------------------------------------------------------
   4. Breadcrumb & sayfa başlığı
   --------------------------------------------------------- */
.crumbs {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-size: .88rem;
    color: hsl(var(--muted-foreground));
}

.crumbs a {
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    padding: .2rem .45rem;
    border-radius: 8px;
    transition: background .15s ease, color .15s ease;
}

.crumbs a:hover {
    color: hsl(var(--brand-text));
    background: hsl(var(--brand) / .09);
}

.crumbs > span:last-child {
    color: hsl(var(--foreground));
    font-weight: 600;
    font-family: var(--font-head);
}

.app-page-title {
    margin: 0;
    font-size: 1.38rem;
    font-weight: 700;
    letter-spacing: -.022em;
    line-height: 1.25;
}

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.3rem;
    flex-wrap: wrap;
}

.page-head .page-sub {
    font-size: .87rem;
    color: hsl(var(--muted-foreground));
    margin-top: 3px;
}

.page-actions {
    display: flex;
    align-items: center;
    gap: .5rem;
}

/* Bölüm başlığı (kart dışı gruplama) */
.section-head {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 1.8rem 0 .85rem;
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

.section-head::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: hsl(var(--app-border));
}

/* ---------------------------------------------------------
   5. Sidebar menü
   --------------------------------------------------------- */
.app-nav {
    list-style: none;
    margin: 0 -4px;
    padding: 0 4px 4px;
    font-size: .895rem;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.app-nav .nav-section {
    font-family: var(--font-head);
    font-size: .655rem;
    text-transform: uppercase;
    letter-spacing: .11em;
    color: hsl(var(--muted-foreground) / .85);
    padding: 16px 10px 6px;
    font-weight: 700;
}

.app-nav a.nav-link,
.app-nav details > summary {
    position: relative;
    display: flex;
    align-items: center;
    gap: .68rem;
    padding: .5rem .65rem;
    margin: 1px 0;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-decoration: none;
    color: hsl(var(--foreground) / .8);
    transition: background .15s ease, color .15s ease;
    cursor: pointer;
}

.app-nav a.nav-link svg,
.app-nav details > summary svg {
    opacity: .7;
    transition: opacity .15s ease;
}

.app-nav details > summary {
    list-style: none;
}

.app-nav details > summary::-webkit-details-marker {
    display: none;
}

.app-nav a.nav-link:hover,
.app-nav details > summary:hover {
    background: hsl(var(--muted) / .8);
    color: hsl(var(--foreground));
}

.app-nav a.nav-link:hover svg,
.app-nav details > summary:hover svg {
    opacity: 1;
}

/* Aktif öğe: dolgun blok yerine yumuşak zemin + sol vurgu çizgisi */
.app-nav a.nav-link.active {
    background: hsl(var(--brand) / .1);
    color: hsl(var(--brand-text));
    font-weight: 600;
}

.app-nav a.nav-link.active::before {
    content: "";
    position: absolute;
    left: -4px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    border-radius: 999px;
    background: hsl(var(--brand));
}

.app-nav a.nav-link.active svg {
    opacity: 1;
}

.app-nav details[open] > summary {
    color: hsl(var(--foreground));
    font-weight: 600;
}

.app-nav details[open] > summary svg {
    opacity: 1;
}

.app-nav details > summary .chev {
    margin-left: auto;
    transition: transform .2s cubic-bezier(.22, .61, .36, 1);
    opacity: .45;
}

.app-nav details[open] > summary .chev {
    transform: rotate(90deg);
}

.app-nav .subnav {
    list-style: none;
    margin: 2px 0 8px 15px;
    padding: 2px 0 2px 10px;
    border-left: 1px solid hsl(var(--app-border));
}

.app-nav .subnav a {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .6rem;
    border-radius: var(--radius-xs);
    font-size: .84rem;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.app-nav .subnav a:hover {
    background: hsl(var(--muted) / .8);
    color: hsl(var(--foreground));
}

.app-nav .subnav a.active {
    color: hsl(var(--brand-text));
    font-weight: 600;
    background: hsl(var(--brand) / .08);
}

.app-nav .subnav a.active::before {
    content: "";
    position: absolute;
    left: -11px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 14px;
    border-radius: 999px;
    background: hsl(var(--brand));
}

/* Sidebar alt bilgi kutusu */
.app-sidebar-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-top: 8px;
    padding: .55rem .6rem;
    border-radius: var(--radius);
    border: 1px solid hsl(var(--app-border));
    background: hsl(var(--app-surface-3));
    text-decoration: none;
    color: hsl(var(--foreground));
    transition: background .15s ease, border-color .15s ease;
}

.app-sidebar-foot:hover {
    border-color: hsl(var(--app-border-strong));
    background: hsl(var(--muted) / .8);
}

.app-sidebar-foot .who {
    min-width: 0;
    line-height: 1.25;
}

.app-sidebar-foot .who b {
    display: block;
    font-size: .84rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-sidebar-foot .who small {
    display: block;
    font-size: .72rem;
    color: hsl(var(--muted-foreground));
    text-transform: capitalize;
}

/* Çıkış: kullanıcı kartının sağ ucunda ikon + altında küçük etiket.
   Zemin her zaman soluk kırmızı, hover'da bir tık koyulaşır. */
.app-logout {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .12rem;
    margin-left: auto;
    padding: .3rem .42rem .28rem;
    border-radius: var(--radius-xs);
    background: hsl(0 84% 60% / .08);
    color: hsl(0 62% 48%);
    line-height: 1;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}

.app-logout span {
    font-size: .6rem;
    font-weight: 500;
    letter-spacing: .01em;
}

.app-logout:hover,
.app-logout:focus-visible {
    background: hsl(0 84% 60% / .14);
    color: hsl(0 66% 42%);
}

html.dark .app-logout {
    background: hsl(0 84% 60% / .11);
    color: hsl(0 78% 74%);
}

html.dark .app-logout:hover,
html.dark .app-logout:focus-visible {
    background: hsl(0 84% 60% / .18);
    color: hsl(0 82% 80%);
}

/* ---------------------------------------------------------
   6. Avatar
   --------------------------------------------------------- */
.app-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    color: #fff;
    font-family: var(--font-head);
    font-size: .73rem;
    font-weight: 700;
    letter-spacing: 0;
    box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .18);
}

/* ---------------------------------------------------------
   7. Butonlar
   --------------------------------------------------------- */
/* İmleç: tıklanabilir her öğe el işareti gösterir. Tarayıcı <button>
   için varsayılan olarak ok imleci kullanır, bu yüzden açıkça veriyoruz.
   Pasif öğeler not-allowed ile ayrışır. */
button,
[type="button"],
[type="submit"],
[type="reset"],
[role="button"],
summary,
.uk-btn,
.btn-add-row {
    cursor: pointer;
}

button:disabled,
button[aria-disabled="true"],
[type="button"]:disabled,
[type="submit"]:disabled,
[type="reset"]:disabled,
.uk-btn:disabled,
.uk-btn[disabled],
.uk-btn[aria-disabled="true"],
.btn-add-row:disabled {
    cursor: not-allowed;
}

/* Tüm butonlar aynı "hafif 3D" dilini paylaşır: üst yarıda ışık, alt kenarda
   gölge, üst kenarda 1px parlama çizgisi. Varyantlar yalnızca --btn-*
   değişkenlerini ve zemin rengini ayarlar; gerisi buradan gelir. */
.uk-btn {
    --btn-top: hsl(0 0% 100% / .16);
    --btn-bot: hsl(0 0% 0% / .09);
    --btn-ring: hsl(0 0% 100% / .28);

    position: relative;
    border-radius: var(--radius-sm);
    font-weight: 600;
    letter-spacing: -.005em;
    background-image: linear-gradient(180deg,
        var(--btn-top) 0%,
        hsl(0 0% 100% / 0) 48%,
        var(--btn-bot) 100%);
    box-shadow: var(--sh-xs), inset 0 1px 0 var(--btn-ring);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

.uk-btn svg {
    flex: 0 0 auto;
}

/* Kaldırma + taban gölgesi tüm varyantlarda ortak. */
.uk-btn:hover {
    transform: translateY(-1px);
    box-shadow: var(--sh-sm), inset 0 1px 0 var(--btn-ring);
}

.uk-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), inset 0 1px 0 var(--btn-ring);
}

/* Basılı: yüzey içeri gömer, gölge kısalır. */
.uk-btn:active {
    transform: translateY(0) scale(.985);
    box-shadow: var(--sh-xs), inset 0 2px 4px hsl(0 0% 0% / .18);
}

.uk-btn:disabled,
.uk-btn[disabled] {
    opacity: .5;
    transform: none;
    filter: none;
    box-shadow: none;
}

/* Segmentli buton grupları (Müşteri/Tedarikçi, satış-alış tipi):
   yalnızca dış köşeler yuvarlak, iç köşeler düz.
   custom.css katmansız (@layer dışı) olduğu için Franken'ın
   `.uk-btn-group .uk-btn{border-radius:0}` kuralını burada ezmek gerekir. */
.uk-btn-group {
    width: fit-content;
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.uk-btn-group .uk-btn {
    border-radius: 0;
}

.uk-btn-group > .uk-btn:first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.uk-btn-group > .uk-btn:last-child,
.uk-btn-group > .uk-inline:last-child > .uk-btn {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

/* Segment içinde kaldırma yok: grup taşma kırpması kenarı keser. */
.uk-btn-group .uk-btn:hover {
    transform: none;
    box-shadow: inset 0 1px 0 var(--btn-ring);
}

/* Birincil — marka zemini + 3D katmanı */
.uk-btn-primary {
    --btn-top: hsl(0 0% 100% / .18);
    --btn-bot: hsl(0 0% 0% / .1);
    --btn-ring: hsl(0 0% 100% / .26);
    background-color: hsl(var(--brand));
    border-color: hsl(var(--brand) / .9);
    color: hsl(var(--primary-foreground));
}

.uk-btn-primary:hover {
    --btn-top: hsl(0 0% 100% / .24);
    --btn-ring: hsl(0 0% 100% / .34);
    background-color: hsl(var(--brand));
    filter: brightness(1.06) saturate(1.05);
    box-shadow: var(--sh-md), inset 0 1px 0 var(--btn-ring);
}

/* `.uk-btn:active` kuralını geçersiz kılmak için özgüllük artırıldı. */
.uk-btn.uk-btn-primary:active {
    filter: brightness(.95);
    box-shadow: var(--sh-xs), inset 0 2px 4px hsl(0 0% 0% / .24);
}

/* Başarı — yeşil (ör. Alacaklandır). Primary ile aynı derinlik dili. */
.uk-btn-success {
    --btn-top: hsl(0 0% 100% / .18);
    --btn-bot: hsl(0 0% 0% / .1);
    --btn-ring: hsl(0 0% 100% / .26);
    background-color: hsl(var(--success));
    border-color: hsl(var(--success) / .9);
    color: #fff;
}

.uk-btn-success:hover {
    --btn-top: hsl(0 0% 100% / .24);
    --btn-ring: hsl(0 0% 100% / .34);
    background-color: hsl(var(--success));
    color: #fff;
    filter: brightness(1.06) saturate(1.05);
    box-shadow: var(--sh-md), inset 0 1px 0 var(--btn-ring);
}

.uk-btn.uk-btn-success:active {
    filter: brightness(.95);
    box-shadow: var(--sh-xs), inset 0 2px 4px hsl(0 0% 0% / .24);
}

/* İkincil — beyaz yüzey; üstte beyaz, altta çok hafif gri geçiş. */
.uk-btn-default {
    --btn-top: hsl(0 0% 100% / .92);
    --btn-bot: hsl(240 30% 40% / .07);
    --btn-ring: hsl(0 0% 100% / .85);
    background-color: hsl(var(--app-surface));
    border-color: hsl(var(--app-border-strong));
    box-shadow: var(--sh-xs), inset 0 1px 0 var(--btn-ring), inset 0 -1px 0 hsl(var(--app-shadow) / .05);
}

.uk-btn-default:hover {
    --btn-bot: hsl(240 30% 40% / .04);
    background-color: hsl(var(--app-surface));
    border-color: hsl(var(--brand) / .42);
    color: hsl(var(--brand-text));
    box-shadow: var(--sh-sm), inset 0 1px 0 var(--btn-ring), inset 0 -1px 0 hsl(var(--app-shadow) / .04);
}

.uk-btn-destructive {
    --btn-ring: hsl(0 0% 100% / .22);
}

html.dark .uk-btn-default {
    --btn-top: hsl(0 0% 100% / .08);
    --btn-bot: hsl(0 0% 0% / .28);
    --btn-ring: hsl(0 0% 100% / .1);
    background-color: hsl(0 0% 100% / .05);
    border-color: hsl(0 0% 100% / .14);
}

/* Kare ikon buton (silme vb.) */
.uk-btn.btn-sq {
    width: 2.05rem;
    height: 2.05rem;
    min-width: 2.05rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: var(--radius-sm);
}

.uk-btn.btn-sq svg {
    display: block;
}

/* --- "Satır Ekle" hap butonu ---
   Satış / alış / varyant tablolarında yeni satır ekleme eylemi. */
.btn-add-row {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-height: var(--field-h, 2.7rem);
    padding: .25rem .9rem .25rem .3rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: 999px;
    background-color: hsl(var(--app-surface));
    /* Diğer butonlarla aynı 3D katmanı */
    background-image: linear-gradient(180deg,
        hsl(0 0% 100% / .92) 0%,
        hsl(0 0% 100% / 0) 48%,
        hsl(240 30% 40% / .06) 100%);
    box-shadow: var(--sh-xs), inset 0 1px 0 hsl(0 0% 100% / .85);
    color: hsl(var(--foreground));
    font-family: var(--font-head);
    font-size: .82rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .12s ease;
}

.btn-add-row .ic {
    display: grid;
    place-items: center;
    flex: none;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 999px;
    background: hsl(var(--brand) / .1);
    color: hsl(var(--brand-text));
    transition: background .15s ease, color .15s ease;
}

.btn-add-row .ic svg {
    display: block;
    width: 16px;
    height: 16px;
}

.btn-add-row:hover {
    border-color: hsl(var(--brand) / .4);
    background-color: hsl(var(--brand) / .05);
    color: hsl(var(--brand-text));
    transform: translateY(-1px);
    box-shadow: var(--sh-sm), inset 0 1px 0 hsl(0 0% 100% / .85);
}

.btn-add-row:hover .ic {
    background: hsl(var(--brand));
    color: hsl(var(--primary-foreground));
    box-shadow: var(--sh-xs), inset 0 1px 0 hsl(0 0% 100% / .3);
}

.btn-add-row:active {
    transform: translateY(0) scale(.985);
    box-shadow: var(--sh-xs), inset 0 2px 4px hsl(0 0% 0% / .18);
}

.btn-add-row:focus-visible {
    outline: none;
    border-color: hsl(var(--brand));
    box-shadow: var(--focus-ring);
}

html.dark .btn-add-row {
    background-color: hsl(0 0% 100% / .04);
    background-image: linear-gradient(180deg,
        hsl(0 0% 100% / .07) 0%,
        hsl(0 0% 100% / 0) 48%,
        hsl(0 0% 0% / .25) 100%);
    border-color: hsl(0 0% 100% / .14);
    box-shadow: var(--sh-xs), inset 0 1px 0 hsl(0 0% 100% / .09);
}

html.dark .btn-add-row:hover {
    background-color: hsl(var(--brand) / .14);
    border-color: hsl(var(--brand) / .45);
    box-shadow: var(--sh-sm), inset 0 1px 0 hsl(0 0% 100% / .09);
}

html.dark .btn-add-row .ic {
    background: hsl(var(--brand) / .2);
}

/* Yumuşak marka butonu: ikincil ama vurgulu (Yeni Ürün / Yeni Müşteri) */
.uk-btn.btn-soft {
    --btn-top: hsl(0 0% 100% / .6);
    --btn-bot: hsl(var(--brand) / .07);
    --btn-ring: hsl(0 0% 100% / .55);
    border-radius: 999px;
    background-color: hsl(var(--brand) / .08);
    border-color: hsl(var(--brand) / .2);
    color: hsl(var(--brand-text));
}

.uk-btn.btn-soft:hover {
    --btn-top: hsl(0 0% 100% / .7);
    background-color: hsl(var(--brand) / .14);
    border-color: hsl(var(--brand) / .32);
    color: hsl(var(--brand-text));
    box-shadow: var(--sh-sm), inset 0 1px 0 var(--btn-ring);
}

html.dark .uk-btn.btn-soft {
    --btn-top: hsl(0 0% 100% / .1);
    --btn-bot: hsl(0 0% 0% / .18);
    --btn-ring: hsl(0 0% 100% / .12);
    background-color: hsl(var(--brand) / .16);
    border-color: hsl(var(--brand) / .3);
}

html.dark .uk-btn.btn-soft:hover {
    --btn-top: hsl(0 0% 100% / .16);
    background-color: hsl(var(--brand) / .24);
}

/* Satır içi "Görüntüle" butonu: sessiz, ikonlu, küçük metinli (liste sayfaları) */
.uk-btn.btn-view {
    display: inline-flex;
    align-items: center;
    gap: .32rem;
    /* Franken UI .uk-btn yüksekliği (2.5rem) sabit veriyor → onu ezmek için height şart */
    height: 1.85rem;
    min-height: 1.85rem;
    padding: .2rem .6rem .2rem .5rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: 999px;
    background-color: transparent;
    background-image: none;
    color: hsl(var(--muted-foreground));
    font-family: var(--font-head);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1;
    box-shadow: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                box-shadow .15s ease, transform .12s ease;
}

.uk-btn.btn-view svg {
    display: block;
    flex: none;
    width: 14px;
    height: 14px;
}

/* Hayalet buton düz durur, hover'da hafif 3D yüzeye döner. */
.uk-btn.btn-view:hover {
    --btn-top: hsl(0 0% 100% / .75);
    --btn-ring: hsl(0 0% 100% / .6);
    background-color: hsl(var(--brand) / .07);
    background-image: linear-gradient(180deg,
        var(--btn-top) 0%,
        hsl(0 0% 100% / 0) 48%,
        hsl(var(--brand) / .06) 100%);
    border-color: hsl(var(--brand) / .3);
    color: hsl(var(--brand-text));
    box-shadow: var(--sh-xs), inset 0 1px 0 var(--btn-ring);
}

.uk-btn.btn-view:active {
    transform: translateY(0) scale(.97);
    box-shadow: var(--sh-xs), inset 0 2px 3px hsl(0 0% 0% / .14);
}

html.dark .uk-btn.btn-view {
    border-color: hsl(0 0% 100% / .14);
}

html.dark .uk-btn.btn-view:hover {
    --btn-top: hsl(0 0% 100% / .1);
    --btn-ring: hsl(0 0% 100% / .1);
    background-color: hsl(var(--brand) / .16);
    border-color: hsl(var(--brand) / .36);
}

/* ---------------------------------------------------------
   7b. Tanım listeleri (KDV / ambalaj türleri) + popup
   --------------------------------------------------------- */
.def-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}

.def-table thead th {
    padding: .68rem .9rem;
    background: hsl(var(--muted) / .5);
    border-bottom: 1px solid hsl(var(--app-border));
    color: hsl(var(--muted-foreground));
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .055em;
    text-transform: uppercase;
    white-space: nowrap;
    text-align: left;
}

.def-table thead th:first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.def-table thead th:last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.def-table tbody td {
    padding: .72rem .9rem;
    border-bottom: 1px solid hsl(var(--app-border) / .7);
    vertical-align: middle;
}

.def-table tbody tr {
    transition: background .13s ease;
}

.def-table tbody tr:hover {
    background: hsl(var(--muted) / .45);
}

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

.def-table .def-name {
    font-weight: 600;
}

.def-table .def-rate {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

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

/* Sayısal sütun (Oran) sağa yaslanır — klasik veri tablosu hizası */
.def-table thead th:nth-child(2),
.def-table tbody td:nth-child(2):not(.col-actions) {
    text-align: right;
}

.def-actions {
    display: inline-flex;
    gap: .3rem;
}

/* Liste satırındaki eylem grubu: "Görüntüle" ile silme butonu birbirine
   yapışmasın diye daha geniş boşluk ve dikey hizalama. */
.row-actions {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
}

/* Satır içi silme butonları tabloda fazla bağırmasın (yumuşak kırmızı) */
.def-actions .uk-btn-destructive,
table.uk-table .uk-btn-destructive.btn-sq {
    --btn-top: hsl(0 0% 100% / .55);
    --btn-bot: hsl(0 84% 60% / .1);
    --btn-ring: hsl(0 0% 100% / .5);
    background-color: hsl(0 84% 60% / .09);
    border: 1px solid hsl(0 84% 60% / .2);
    color: hsl(0 68% 46%);
}

.def-actions .uk-btn-destructive:hover,
table.uk-table .uk-btn-destructive.btn-sq:hover {
    background-color: hsl(0 84% 60% / .16);
    border-color: hsl(0 84% 60% / .3);
    color: hsl(0 68% 42%);
    box-shadow: var(--sh-sm), inset 0 1px 0 var(--btn-ring);
}

html.dark .def-actions .uk-btn-destructive,
html.dark table.uk-table .uk-btn-destructive.btn-sq {
    --btn-top: hsl(0 0% 100% / .09);
    --btn-bot: hsl(0 0% 0% / .2);
    --btn-ring: hsl(0 0% 100% / .1);
    background-color: hsl(0 84% 60% / .13);
    border-color: hsl(0 84% 60% / .28);
    color: hsl(0 90% 76%);
}

html.dark .def-actions .uk-btn-destructive:hover,
html.dark table.uk-table .uk-btn-destructive.btn-sq:hover {
    background-color: hsl(0 84% 60% / .22);
    color: hsl(0 90% 82%);
}

.def-empty {
    padding: 2.2rem 1rem;
    text-align: center;
    color: hsl(var(--muted-foreground));
}

/* Kart içindeki sade UIkit tabloları da aynı görünüme kavuşur
   (satış/alış satırları, kullanıcılar, varyantlar). DataTables hariç. */
.app-card table.uk-table:not(.dataTable) {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .9rem;
}

.app-card table.uk-table:not(.dataTable) thead th {
    padding: .64rem .8rem;
    background: hsl(var(--muted) / .5);
    border-top: 0;
    border-bottom: 1px solid hsl(var(--app-border));
    color: hsl(var(--muted-foreground));
    font-family: var(--font-head);
    font-size: .715rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    white-space: nowrap;
    vertical-align: middle;
}

.app-card table.uk-table:not(.dataTable) thead th:first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.app-card table.uk-table:not(.dataTable) thead th:last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.app-card table.uk-table:not(.dataTable) tbody td {
    padding: .55rem .5rem;
    border-top: 0;
    border-bottom: 1px solid hsl(var(--app-border) / .7);
    vertical-align: middle;
}

.app-card table.uk-table:not(.dataTable) tbody tr {
    transition: background .13s ease;
}

/* Zebra: DataTable olmayan tablolarda da çift satırlar hafif tonlu */
.app-card table.uk-table:not(.dataTable) tbody tr:nth-child(even) {
    background: hsl(var(--muted) / .6);
}

.app-card table.uk-table:not(.dataTable) tbody tr:hover {
    background: hsl(var(--brand) / .06);
}

.app-card table.uk-table:not(.dataTable) tbody tr:last-child td {
    border-bottom: 0;
}

/* Tablo içindeki alanlar otomatik olarak kompakt olur */
.uk-table .uk-input,
.uk-table .uk-select,
.uk-table .uk-textarea {
    min-height: 2.15rem;
    padding: .36rem .5rem;
    font-size: .85rem;
    border-radius: var(--radius-xs);
}

/* Sayı / seçim alanları sıkışmasın */
.uk-table input[type="number"].uk-input {
    min-width: 3.4rem;
}

.uk-table .uk-select {
    min-width: 6.7rem;
    padding-right: 1.6rem;
    background-position: right .4rem center;
}

/* Popup (düzenleme) kutuları */
.uk-modal-dialog {
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
}

.uk-modal-header {
    padding-bottom: .9rem;
    border-bottom: 1px solid hsl(var(--app-border));
    font-family: var(--font-head);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* Başlığı doğrudan gövdeye yazan popup'lar (ürün/hızlı kayıt) için */
.uk-modal-body > h4:first-child,
.uk-modal-body > h3:first-child {
    margin: 0 0 .9rem;
    padding-bottom: .8rem;
    border-bottom: 1px solid hsl(var(--app-border));
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.25;
}

.uk-modal-footer {
    padding-top: .9rem;
    border-top: 1px solid hsl(var(--app-border));
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
}

/* Gövdeye gömülü footer (ürün/hızlı kayıt popup'ları) */
.uk-modal-body > .uk-modal-footer:last-child {
    margin-top: 1.15rem;
}

/* ---------------------------------------------------------
   8. Kartlar
   --------------------------------------------------------- */
.app-card {
    position: relative;
    background: hsl(var(--app-surface));
    color: hsl(var(--card-foreground));
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius);
    padding: 1.25rem;
    box-shadow: var(--sh-md);
}

html.dark .app-card {
    box-shadow: none;
}

.app-card-head {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -.018em;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: .5rem;
}

.app-card-head::before {
    content: "";
    width: 3px;
    height: 15px;
    border-radius: 999px;
    background: hsl(var(--brand));
    flex: 0 0 3px;
}

/* ---------------------------------------------------------
   8b. Panel göstergeleri (KPI)
   --------------------------------------------------------- */
.stat-label {
    font-size: .78rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    letter-spacing: .005em;
    margin-bottom: .1rem;
}

.stat-value {
    font-family: var(--font-head);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.028em;
    font-variant-numeric: tabular-nums;
}

.stat-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    flex: 0 0 40px;
    /* Renk views tarafından `--ico` (HSL üçlüsü) ile verilir. */
    background: hsl(var(--ico, var(--brand)) / .11);
    color: hsl(var(--ico, var(--brand)));
}

html.dark .stat-ico {
    background: hsl(var(--ico, var(--brand)) / .18);
    color: color-mix(in srgb, hsl(var(--ico, var(--brand))) 72%, #fff);
}

/* KPI kartı: ikon + değer/etiket. Genel durum satırında yalnızca
   bağlantılı kartlar tıklanabilir (`.is-link`). */
.kpi {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem .7rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface));
    text-decoration: none;
    color: hsl(var(--foreground));
    min-width: 0;
    transition: border-color .16s ease, background-color .16s ease;
}

.kpi.is-link:hover {
    border-color: hsl(var(--brand) / .35);
    background: hsl(var(--brand) / .04);
}

.kpi .stat-ico {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 9px;
}

.kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.kpi-label {
    font-size: .74rem;
    font-weight: 500;
    color: hsl(var(--muted-foreground));
    letter-spacing: .005em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kpi-value {
    font-family: var(--font-head);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.028em;
    font-variant-numeric: tabular-nums;
}

/* Onaylanmış satış toplamı: sade beyaz zemin, gölge yok —
   altındaki ölçü kartlarıyla aynı görsel dil. */
.stat-total {
    padding: .9rem 1.1rem;
    border-radius: var(--radius-sm);
    box-shadow: none;
}

/* ---------------------------------------------------------
   8c. Hızlı işlem kutucukları
   --------------------------------------------------------- */
.quick-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
    gap: .5rem;
}

.quick-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .55rem .7rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface));
    text-decoration: none;
    color: hsl(var(--foreground));
    font-family: var(--font-head);
    font-size: .85rem;
    font-weight: 600;
    letter-spacing: -.012em;
    white-space: nowrap;
    transition: border-color .16s ease, background-color .16s ease;
}

.quick-item:hover {
    border-color: hsl(var(--brand) / .35);
    background: hsl(var(--brand) / .04);
}

.quick-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    border-radius: 8px;
    background: hsl(var(--brand) / .1);
    color: hsl(var(--brand-text));
    transition: background-color .16s ease, color .16s ease;
}

.quick-item:hover .quick-ico {
    background: hsl(var(--brand));
    color: #fff;
}

.quick-txt {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Panel karşılama bloğu */
.welcome {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.welcome .hello {
    font-size: .82rem;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
}

/* ---------------------------------------------------------
   9. Formlar
   --------------------------------------------------------- */
/* Tüm girdiler aynı yükseklik / yarıçap / kenarlık ritmini paylaşır. */
.uk-form,
.uk-form-stacked {
    --field-h: 2.65rem;
    --field-radius: var(--radius-sm);
    --field-border: hsl(var(--app-border-strong) / .9);
}

.uk-form-label {
    display: block;
    margin-bottom: .4rem;
    font-family: var(--font-head);
    font-size: .805rem;
    font-weight: 600;
    line-height: 1.3;
    color: hsl(var(--foreground) / .88);
}

.uk-form-label .req {
    margin-left: .1rem;
    color: hsl(var(--danger));
    font-weight: 700;
}

/* Bir alana bağlı etiketler tıklanabilir olduğunu göstersin.
   (for'suz etiketler: buton grubu / salt-okunur gösterim başlıkları.) */
.uk-form-label[for] {
    cursor: pointer;
}

/* ---------------------------------------------------------
   Alış / Satış özet kartı
   --------------------------------------------------------- */

/* Toplamlar ile notu ayıran ince çizgi (marka ayracından dar). */
.summary-divider {
    height: 1px;
    margin: .9rem 0;
    border: 0;
    background: hsl(var(--app-border));
}

/* Not alanı: uk-textarea'nın 6.5rem'lik min yüksekliği burada fazla.
   Özet kartında 2 satırlık, derli toplu bir alan yeterli. */
.uk-textarea.note-area {
    min-height: 3.25rem;
    padding: .5rem .7rem;
    font-size: .875rem;
    resize: vertical;
}

/* ---------------------------------------------------------
   Etiket girişi (App.tagField) ve varyant listesi
   --------------------------------------------------------- */
.tag-field {
    /* Site alanlarıyla aynı yüzey: gömülü gölge + üstten gradyan */
    --field-shade: hsl(var(--app-shadow) / .065);
    --field-edge: hsl(0 0% 100% / .85);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    min-height: var(--field-h, 2.65rem);
    padding: .4rem .55rem;
    color: hsl(var(--foreground));
    background-color: var(--field-bg, hsl(var(--app-surface)));
    background-image: linear-gradient(180deg, var(--field-shade) 0%, hsl(0 0% 100% / 0) 26%);
    border: 1px solid var(--field-border, hsl(var(--app-border-strong)));
    border-radius: var(--field-radius, var(--radius-sm));
    box-shadow: inset 0 1px 3px var(--field-shade), 0 1px 0 var(--field-edge);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.tag-field:hover {
    border-color: hsl(var(--brand) / .32);
}

/* Odakta gömülü gölge kalkar, alan yüzeye çıkar (uk-input ile aynı). */
.tag-field:focus-within {
    border-color: hsl(var(--brand));
    box-shadow: var(--focus-ring), 0 1px 0 var(--field-edge);
}

html.dark .tag-field {
    --field-shade: hsl(0 0% 0% / .35);
    --field-edge: hsl(0 0% 100% / .05);
    background-color: hsl(0 0% 100% / .035);
    border-color: hsl(0 0% 100% / .13);
}

html.dark .tag-field:focus-within {
    border-color: hsl(var(--brand));
}

.tag-field .tag-field-input {
    flex: 1 1 140px;
    min-width: 120px;
    min-height: 0;
    height: 26px;
    padding: 0 .25rem;
    border: 0;
    background: transparent;
    background-image: none;
    box-shadow: none;
    font-size: .85rem;
}

/* Yüksek varyant: çok sayıda etiket girilirken (ör. varyant değerleri)
   alan normalin iki katı yükseklikte olur, etiketler üstten dizilir.
   İçerik arttıkça alan kendiliğinden uzar. */
.tag-field-lg {
    align-content: flex-start;
    min-height: calc(var(--field-h, 2.65rem) * 2);
    padding: .55rem;
}

.tag-field-lg .tag-field-input {
    flex: 1 1 100%;
}

.tag-field .tag-field-input:hover {
    border: 0;
    box-shadow: none;
}

.tag-field .tag-field-input:focus {
    outline: none;
    border: 0;
    box-shadow: none;
}

/* Etiket: nötr ve hafif. Uzun listelerde (59 renk gibi) tam doygun marka
   rengi göz yoruyordu; okunabilirlik için nötr yüzey + yumuşak metin. */
.tag {
    display: inline-flex;
    align-items: center;
    gap: .05rem;
    padding: .05rem .28rem .05rem .5rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: 999px;
    background: hsl(var(--app-surface-3));
    color: hsl(var(--foreground) / .74);
    font-size: .77rem;
    font-weight: 500;
    line-height: 1.55;
    white-space: nowrap;
    transition: border-color .12s ease, color .12s ease;
}

.tag:hover {
    border-color: hsl(var(--app-border-strong));
    color: hsl(var(--foreground) / .92);
}

html.dark .tag {
    background: hsl(0 0% 100% / .05);
    border-color: hsl(0 0% 100% / .1);
    color: hsl(var(--foreground) / .78);
}

html.dark .tag:hover {
    background: hsl(0 0% 100% / .08);
    border-color: hsl(0 0% 100% / .16);
}

/* Etiketin ×'i: minimal kapatma — kenarlık yok, tam daire, silik.
   Kırmızı kimlik yalnızca üzerine gelince ortaya çıkar. */
.tag button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: hsl(var(--foreground) / .4);
    font-size: .8rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.tag button:hover,
.tag button:focus-visible {
    background: hsl(0 84% 60% / .13);
    color: hsl(0 68% 46%);
    outline: none;
}

html.dark .tag button {
    color: hsl(var(--foreground) / .45);
}

html.dark .tag button:hover,
html.dark .tag button:focus-visible {
    background: hsl(0 84% 60% / .2);
    color: hsl(0 90% 76%);
}

/* Varyant listesi */
.variant-types {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.variant-type {
    padding: .7rem .85rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface-2));
}

.variant-type-head {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .55rem;
}

.variant-type-head .vt-name {
    max-width: 240px;
    font-family: var(--font-head);
    font-weight: 700;
}

.variant-type-actions {
    display: inline-flex;
    gap: .2rem;
    margin-left: auto;
}

/* Değer sayısı: Kaydet'in sağında, silik. Silme butonu sağa yaslanır. */
.variant-type-head .vt-count {
    font-size: .78rem;
    color: hsl(var(--foreground) / .42);
    white-space: nowrap;
}

.variant-type-head .vt-del {
    margin-left: auto;
}

/* Her varyanta satır içi "yeni değer ekle" alanı */
.variant-type-add {
    display: flex;
    gap: .35rem;
    margin-top: .65rem;
    max-width: 420px;
}

.variant-type-add .vt-new-value {
    flex: 1;
}

.variant-type-values {
    display: flex;
    flex-wrap: wrap;
    /* Satır aralığı biraz daha açık: uzun listelerde satırlar ayırt edilebilsin */
    gap: .4rem .3rem;
}

.variant-type-values:empty {
    display: none;
}

/* Varyant satırındaki "yeni değer ekle" butonu ve hizası.
   Satırdaki alanlar uk-form-sm (2.15rem); buton da tam o ölçüde ve
   yanındaki select'lerle aynı yüzeyde olmalı. */
#variants-table .vt-add-value {
    flex: 0 0 auto;
    width: 2.15rem;
    min-width: 2.15rem;
    height: 2.15rem;
    min-height: 2.15rem;
    padding: 0;
    border-radius: var(--radius-xs);
    border: 1px solid var(--field-border, hsl(var(--app-border-strong)));
    background-color: var(--field-bg, hsl(var(--app-surface)));
    background-image: linear-gradient(180deg,
        var(--field-shade, hsl(var(--app-shadow) / .065)) 0%,
        hsl(0 0% 100% / 0) 26%);
    box-shadow: inset 0 1px 3px var(--field-shade, hsl(var(--app-shadow) / .065)),
                0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
    color: hsl(var(--brand-text));
}

#variants-table .vt-add-value:hover {
    border-color: hsl(var(--brand) / .45);
    background-color: hsl(var(--brand) / .07);
}

#variants-table .vt-add-value > svg {
    display: block;
    width: 15px;
    height: 15px;
}

/* Satırdaki tüm alanlar aynı yükseklikte olsun */
#variants-table .uk-select.uk-form-sm,
#variants-table .select2-container--default .select2-selection--single {
    height: 2.15rem;
    min-height: 2.15rem;
}

/* select2, gizli <select>'in yerine kendi kabını koyar; flex öğesi o kaptır.
   Bu yüzden genişliği burada esnetiyoruz (flex-1 gizli elemanda kalır). */
#variants-table .select2-container {
    flex: 1 1 auto;
    width: auto !important;
    min-width: 0;
}

/* ---------------------------------------------------------
   Hesap makinesi (assets/js/calculator.js)
   Yüzen panel: sabit boyut, sürüklenebilir, her açılışta ortada.
   --------------------------------------------------------- */
.calc-panel {
    position: fixed;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: 320px;
    height: 452px;
    overflow: hidden;
    /* Yedek: mask-composite desteklenmezse düz mavi kenarlık kalır. */
    border: 2px solid hsl(var(--brand));
    border-radius: var(--radius);
    background: hsl(var(--app-surface));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    touch-action: none;
    box-shadow: var(--sh-lg), 0 20px 44px -26px hsl(var(--brand) / .55);
}

/* Kenarlık: avatar ve "=" tuşundaki marka gradyanının halka hâli.
   Maskeyle içi boşaltılır, böylece border-radius korunur. */
@supports ((mask-composite: exclude) or (-webkit-mask-composite: xor)) {
    .calc-panel {
        border-color: transparent;
    }

    .calc-panel::before {
        content: "";
        position: absolute;
        inset: 0;
        padding: 2px;
        border-radius: inherit;
        background: linear-gradient(140deg, hsl(var(--brand)) 0%, hsl(var(--brand-2)) 55%, hsl(var(--brand)) 100%);
        -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        -webkit-mask-composite: xor;
        mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
        mask-composite: exclude;
        pointer-events: none;
    }
}

.calc-panel[hidden] {
    display: none;
}

/* Panel açılınca klavye için odaklanır; etrafında halka çıkmasın. */
.calc-panel:focus {
    outline: none;
}

.calc-panel.is-open {
    animation: calc-in .16s ease-out;
}

@keyframes calc-in {
    from { opacity: 0; transform: translateY(6px) scale(.98); }
    to   { opacity: 1; transform: none; }
}

.calc-panel.is-dragging {
    user-select: none;
    box-shadow: 0 4px 8px hsl(var(--app-shadow) / .06), 0 32px 60px -30px hsl(var(--app-shadow) / .5);
}

/* --- Başlık (sürükleme tutamağı) --- */
.calc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .35rem .4rem .35rem .75rem;
    border-bottom: 1px solid hsl(var(--app-border));
    background: hsl(var(--app-surface-3));
    cursor: grab;
}

.calc-panel.is-dragging .calc-head {
    cursor: grabbing;
}

.calc-title {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: hsl(var(--foreground) / .8);
    white-space: nowrap;
}

.calc-head-actions {
    display: inline-flex;
    align-items: center;
    gap: .15rem;
}

/* Kapat butonu: tablodaki silme butonlarıyla aynı yumuşak kırmızı dil. */
.calc-panel #calc-close {
    --btn-top: hsl(0 0% 100% / .55);
    --btn-bot: hsl(0 84% 60% / .1);
    --btn-ring: hsl(0 0% 100% / .5);
    background-color: hsl(0 84% 60% / .09);
    border: 1px solid hsl(0 84% 60% / .2);
    color: hsl(0 68% 46%);
}

.calc-panel #calc-close:hover {
    background-color: hsl(0 84% 60% / .16);
    border-color: hsl(0 84% 60% / .3);
    color: hsl(0 68% 42%);
}

html.dark .calc-panel #calc-close {
    --btn-top: hsl(0 0% 100% / .09);
    --btn-bot: hsl(0 0% 0% / .2);
    --btn-ring: hsl(0 0% 100% / .1);
    background-color: hsl(0 84% 60% / .13);
    border-color: hsl(0 84% 60% / .28);
    color: hsl(0 90% 76%);
}

html.dark .calc-panel #calc-close:hover {
    background-color: hsl(0 84% 60% / .22);
    color: hsl(0 90% 82%);
}

/* --- Ekran --- */
.calc-display {
    padding: .7rem .85rem;
    text-align: right;
    background: hsl(var(--app-surface-2));
    border-bottom: 1px solid hsl(var(--app-border));
}

.calc-expr {
    min-height: 1.1em;
    font-size: .72rem;
    color: hsl(var(--foreground) / .45);
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    white-space: nowrap;
}

.calc-value {
    display: block;
    font-family: var(--font-head);
    font-size: 1.7rem;
    font-weight: 700;
    letter-spacing: -.03em;
    line-height: 1.2;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calc-value.is-error {
    color: hsl(var(--danger));
    font-size: 1.2rem;
}

/* --- Tuşlar --- */
.calc-keys {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .4rem;
    padding: .65rem;
}

.calc-key {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    padding: 0;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface));
    color: hsl(var(--foreground));
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s ease, border-color .12s ease, transform .06s ease;
}

.calc-key:hover {
    background: hsl(var(--app-surface-3));
    border-color: hsl(var(--app-border-strong));
}

.calc-key:active {
    transform: scale(.97);
}

.calc-key:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* Fonksiyon tuşları (C, sil, %) */
.calc-key-fn {
    background: hsl(var(--app-surface-3));
    color: hsl(var(--foreground) / .8);
    font-size: .85rem;
}

/* Operatörler */
.calc-key-op {
    background: hsl(var(--brand) / .08);
    border-color: hsl(var(--brand) / .25);
    color: hsl(var(--brand-text));
    font-size: 1.1rem;
}

.calc-key-op:hover {
    background: hsl(var(--brand) / .14);
    border-color: hsl(var(--brand) / .4);
}

/* Eşittir */
.calc-key-eq {
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    border-color: transparent;
    color: #fff;
}

.calc-key-eq:hover {
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    filter: brightness(1.07);
}

/* --- KDV hesaplama paneli (assets/js/vat-calc.js): calc-panel iskeletini kullanır --- */
.vat-panel {
    width: 340px;
    height: auto;
}

.vat-panel #vat-close {
    --btn-top: hsl(0 0% 100% / .55);
    --btn-bot: hsl(0 84% 60% / .1);
    --btn-ring: hsl(0 0% 100% / .5);
    background-color: hsl(0 84% 60% / .09);
    border: 1px solid hsl(0 84% 60% / .2);
    color: hsl(0 68% 46%);
}

.vat-panel #vat-close:hover {
    background-color: hsl(0 84% 60% / .16);
    border-color: hsl(0 84% 60% / .3);
}

html.dark .vat-panel #vat-close {
    background-color: hsl(0 84% 60% / .13);
    border-color: hsl(0 84% 60% / .28);
    color: hsl(0 90% 76%);
}

.vat-body {
    display: flex;
    flex-direction: column;
    gap: .85rem;
    padding: .85rem;
    touch-action: auto;
}

.vat-group {
    display: flex;
    flex-direction: column;
    gap: .45rem;
}

/* Radyo seçenekleri: yerel radyo yerine marka renginde seçilebilir kartlar / çipler.
   Input görsel olarak gizlenir ama klavye ve ekran okuyucu için yerinde kalır. */
.vat-opt,
.vat-rate {
    position: relative;
    display: block;
    cursor: pointer;
}

.vat-opt input,
.vat-rate input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.vat-opt span,
.vat-rate span {
    display: flex;
    align-items: center;
    border: 1px solid hsl(var(--app-border));
    background: hsl(var(--app-surface));
    color: hsl(var(--foreground) / .8);
    font-weight: 500;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.vat-opt span {
    gap: .55rem;
    padding: .5rem .7rem;
    border-radius: var(--radius-sm);
    font-size: .8rem;
}

/* Soldaki küçük gösterge: seçilince marka rengiyle dolar */
.vat-opt span::before {
    content: "";
    flex: 0 0 .9rem;
    width: .9rem;
    height: .9rem;
    border-radius: 50%;
    border: 2px solid hsl(var(--app-border-strong));
    background: transparent;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.vat-rate span {
    justify-content: center;
    min-width: 2.9rem;
    padding: .38rem .6rem;
    border-radius: 999px;
    font-size: .78rem;
}

.vat-opt:hover span,
.vat-rate:hover span {
    background: hsl(var(--app-surface-3));
    border-color: hsl(var(--app-border-strong));
}

.vat-opt input:checked + span,
.vat-rate input:checked + span {
    background: hsl(var(--brand) / .09);
    border-color: hsl(var(--brand) / .55);
    color: hsl(var(--brand-text));
    font-weight: 600;
}

.vat-opt input:checked + span::before {
    border-color: hsl(var(--brand));
    background: hsl(var(--brand));
    box-shadow: inset 0 0 0 2px hsl(var(--app-surface));
}

.vat-opt input:focus-visible + span,
.vat-rate input:focus-visible + span {
    box-shadow: var(--focus-ring);
}

.vat-field {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.vat-label {
    font-size: .76rem;
    font-weight: 600;
    color: hsl(var(--foreground) / .7);
}

.vat-rates {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
}

.vat-other {
    width: 4.5rem;
    height: 2rem;
}

.vat-result {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .6rem .75rem;
    border: 1px solid hsl(var(--brand) / .25);
    border-radius: var(--radius-sm);
    background: hsl(var(--brand) / .06);
}

.vat-result[hidden] {
    display: none;
}

.vat-row {
    display: flex;
    justify-content: space-between;
    gap: .75rem;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

.vat-row-total {
    padding-top: .3rem;
    border-top: 1px dashed hsl(var(--brand) / .3);
    font-size: .9rem;
}

.vat-actions {
    display: flex;
    gap: .6rem;
}

.vat-actions .uk-btn {
    flex: 1;
}

/* --- Kurlar paneli (assets/js/rates.js): calc-panel iskeletini kullanır --- */
.rates-panel {
    width: 320px;
    height: auto;
}

.rates-panel #rates-close {
    --btn-top: hsl(0 0% 100% / .55);
    --btn-bot: hsl(0 84% 60% / .1);
    --btn-ring: hsl(0 0% 100% / .5);
    background-color: hsl(0 84% 60% / .09);
    border: 1px solid hsl(0 84% 60% / .2);
    color: hsl(0 68% 46%);
}

.rates-panel #rates-close:hover {
    background-color: hsl(0 84% 60% / .16);
    border-color: hsl(0 84% 60% / .3);
}

html.dark .rates-panel #rates-close {
    background-color: hsl(0 84% 60% / .13);
    border-color: hsl(0 84% 60% / .28);
    color: hsl(0 90% 76%);
}

.rates-panel #rates-refresh.is-loading svg {
    animation: dt-spin .7s linear infinite;
}

.rates-body {
    display: flex;
    flex-direction: column;
    gap: .9rem;
    padding: .85rem;
}

.rates-sec {
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.rates-sec-title {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: hsl(var(--foreground) / .55);
}

.rates-sec-title small {
    font-size: .7rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
}

.rates-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .55rem .75rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface-2));
}

/* Satır başı ikon: sitenin mavi marka zemini, beyaz ikon */
.rates-ico {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: var(--radius-sm);
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    color: #fff;
}

.rates-row .rates-name {
    flex: 1 1 auto;
}

.rates-name {
    display: flex;
    flex-direction: column;
    font-size: .82rem;
    font-weight: 600;
    line-height: 1.25;
}

.rates-name small {
    font-size: .68rem;
    font-weight: 400;
    color: hsl(var(--foreground) / .5);
}

.rates-val {
    color: hsl(var(--brand-text));
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rates-meta,
.rates-note {
    font-size: .68rem;
    color: hsl(var(--foreground) / .5);
}

.rates-note {
    margin: 0;
    padding: .45rem .6rem;
    border-radius: var(--radius-sm);
    background: hsl(var(--warning, 38 92% 50%) / .12);
    color: hsl(var(--foreground) / .75);
}

.rates-note[hidden] {
    display: none;
}

/* --- Hava durumu kartı (kenar çubuğu; assets/js/weather.js) ---
   Arka plan hava durumuna ve gündüz/geceye göre değişir. */
.wx-card {
    --wx-a: #2f7de8;
    --wx-b: #62b4ff;
    --wx-glow: 255 214 102;
    position: relative;
    flex: 0 0 auto;
    overflow: hidden;
    isolation: isolate;
    margin-top: 8px;
    padding: .55rem 1rem .5rem;
    border-radius: var(--radius);
    /* Zemin yarı şeffaf: yalnızca arka plan, yazı ve ikonlar tam opak kalır. */
    background: linear-gradient(155deg, var(--wx-a), var(--wx-b));
    background: linear-gradient(155deg,
        color-mix(in srgb, var(--wx-a) 68%, transparent),
        color-mix(in srgb, var(--wx-b) 68%, transparent));
    color: #fff;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), 0 6px 16px -10px var(--wx-a);
    transition: background .4s ease;
}

/* Güneş / ay parıltısı */
.wx-card::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -30px;
    right: -22px;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    background: radial-gradient(circle, rgb(var(--wx-glow) / .55) 0%, rgb(var(--wx-glow) / 0) 68%);
}

.wx-card[data-theme="clear"]  { --wx-a: #2f7de8; --wx-b: #62b4ff; }
.wx-card[data-theme="cloudy"] { --wx-a: #5b7893; --wx-b: #92aac2; --wx-glow: 255 255 255; }
.wx-card[data-theme="rain"]   { --wx-a: #35506c; --wx-b: #5f82a3; --wx-glow: 160 200 255; }
.wx-card[data-theme="snow"]   { --wx-a: #7592b2; --wx-b: #bcd0e4; --wx-glow: 255 255 255; }
.wx-card[data-theme="storm"]  { --wx-a: #2b2d4a; --wx-b: #55527d; --wx-glow: 190 170 255; }
.wx-card[data-theme="fog"]    { --wx-a: #7d8b97; --wx-b: #b5c0c9; --wx-glow: 255 255 255; }

.wx-card[data-night="1"][data-theme="clear"]  { --wx-a: #0f1b3d; --wx-b: #2d3f82; --wx-glow: 210 225 255; }
.wx-card[data-night="1"][data-theme="cloudy"] { --wx-a: #262f3f; --wx-b: #46536a; --wx-glow: 190 205 230; }
.wx-card[data-night="1"][data-theme="rain"]   { --wx-a: #1c2a3b; --wx-b: #38506a; --wx-glow: 140 180 235; }
.wx-card[data-night="1"][data-theme="snow"]   { --wx-a: #3a4a60; --wx-b: #6d84a1; }
.wx-card[data-night="1"][data-theme="fog"]    { --wx-a: #4a5560; --wx-b: #727e89; }

.wx-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .45rem;
}

.wx-temp {
    display: flex;
    align-items: flex-start;
    font-family: var(--font-head);
    font-size: 1.55rem;
    font-weight: 500;
    letter-spacing: -.04em;
    line-height: 1;
}

/* °C: rakamın üstünden aşağı alındı, soluk ve ince */
.wx-temp sup {
    margin-top: .5rem;
    margin-left: .1rem;
    font-size: .66rem;
    font-weight: 400;
    letter-spacing: 0;
    opacity: .6;
}

.wx-ico {
    display: inline-flex;
    color: #fff;
    filter: drop-shadow(0 2px 5px rgb(0 0 0 / .22));
}

.wx-text {
    flex: 1 1 auto;
    min-width: 0;
    align-self: center;
    margin-top: .25rem;
    font-size: .7rem;
    font-weight: 500;
    line-height: 1.2;
    opacity: .9;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-city {
    display: flex;
    align-items: center;
    gap: .2rem;
    margin-top: .05rem;
    font-size: .62rem;
    font-weight: 400;
    opacity: .8;
}

.wx-city span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wx-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .4rem;
    margin-top: .4rem;
    padding-top: .35rem;
    border-top: 1px solid rgb(255 255 255 / .22);
    font-size: .6rem;
    font-weight: 400;
    white-space: nowrap;
}

.wx-meta[hidden] {
    display: none;
}

.wx-meta span {
    display: inline-flex;
    align-items: center;
    gap: .2rem;
}

.wx-meta b {
    font-weight: 500;
}

/* Genel Ayarlar > hava durumu konum arama listesi */
.wx-pick {
    position: relative;
}

.wx-results {
    position: absolute;
    z-index: 30;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    margin: 0;
    padding: .25rem;
    list-style: none;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface));
    box-shadow: var(--sh-lg);
}

.wx-results[hidden] {
    display: none;
}

.wx-results button {
    display: block;
    width: 100%;
    padding: .45rem .6rem;
    border: 0;
    border-radius: calc(var(--radius-sm) - 2px);
    background: none;
    color: hsl(var(--foreground));
    font-size: .84rem;
    text-align: left;
    cursor: pointer;
}

.wx-results button:hover,
.wx-results button:focus-visible {
    outline: none;
    background: hsl(var(--brand) / .1);
    color: hsl(var(--brand-text));
}

.wx-empty {
    padding: .45rem .6rem;
    font-size: .82rem;
    color: hsl(var(--muted-foreground));
}

/* --- Ürün görsel galerisi (assets/js/product-images.js) --- */
.pg {
    position: relative;
    border-radius: var(--radius-sm);
    transition: background-color .15s ease, outline-color .15s ease;
    outline: 2px dashed transparent;
    outline-offset: 4px;
}

/* Bilgisayardan dosya sürüklenirken */
.pg.is-drop {
    outline-color: hsl(var(--brand) / .6);
    background: hsl(var(--brand) / .05);
}

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

.pg-item {
    position: relative;
    aspect-ratio: 2 / 3;
    overflow: hidden;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface-3));
    cursor: grab;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
}

.pg-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

.pg-item.is-main {
    border-color: hsl(var(--brand));
    box-shadow: 0 0 0 1px hsl(var(--brand)), 0 6px 16px -10px hsl(var(--brand));
}

.pg-item.is-dragging {
    opacity: .45;
    transform: scale(.97);
}

.pg-item.is-over {
    border-color: hsl(var(--brand));
    box-shadow: 0 0 0 3px hsl(var(--brand) / .25);
}

.pg-badge,
.pg-new {
    position: absolute;
    top: .35rem;
    left: .35rem;
    padding: .12rem .45rem;
    border-radius: 999px;
    font-size: .64rem;
    font-weight: 600;
    line-height: 1.3;
    color: #fff;
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    box-shadow: 0 2px 6px rgb(0 0 0 / .25);
}

/* "Yeni" etiketi: henüz yüklenmemiş görsel */
.pg-new {
    top: auto;
    bottom: .35rem;
    background: rgb(0 0 0 / .55);
    background-image: none;
    font-weight: 500;
}

.pg-acts {
    position: absolute;
    top: .3rem;
    right: .3rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.pg-item:hover .pg-acts,
.pg-item:focus-within .pg-acts {
    opacity: 1;
}

/* Dokunmatik ekranda hover yok: eylemler hep görünür */
@media (hover: none) {
    .pg-acts {
        opacity: 1;
    }
}

.pg-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.65rem;
    height: 1.65rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .92);
    color: hsl(var(--foreground));
    box-shadow: 0 2px 6px rgb(0 0 0 / .25);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, transform .1s ease;
}

.pg-act:hover {
    background: hsl(var(--brand));
    color: #fff;
}

.pg-act-del:hover {
    background: hsl(0 72% 50%);
}

.pg-act:active {
    transform: scale(.92);
}

.pg-add {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    aspect-ratio: 2 / 3;
    border: 1.5px dashed hsl(var(--brand) / .45);
    border-radius: var(--radius-sm);
    background: linear-gradient(160deg, hsl(var(--brand) / .07), hsl(var(--brand) / .02));
    color: hsl(var(--brand-text));
    font-size: .76rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease, box-shadow .15s ease;
}

.pg-add-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    color: #fff;
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    box-shadow: 0 6px 14px -6px hsl(var(--brand));
    transition: transform .15s ease;
}

.pg-add:hover,
.pg-add:focus-visible {
    outline: none;
    border-color: hsl(var(--brand));
    background: linear-gradient(160deg, hsl(var(--brand) / .13), hsl(var(--brand) / .04));
    box-shadow: 0 8px 20px -14px hsl(var(--brand));
}

.pg-add:hover .pg-add-ico {
    transform: scale(1.1) rotate(90deg);
}

/* Boş durum: büyük, göze çarpan bırakma alanı */
.pg-grid.is-empty {
    display: block;
}

.pg-drop {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    width: 100%;
    padding: .95rem 1rem;
    border: 2px dashed hsl(var(--brand) / .4);
    border-radius: var(--radius);
    background:
        radial-gradient(120% 140% at 50% 0%, hsl(var(--brand) / .12), transparent 60%),
        hsl(var(--app-surface-2));
    cursor: pointer;
    text-align: center;
    transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease;
}

.pg-drop:hover,
.pg-drop:focus-visible {
    outline: none;
    border-color: hsl(var(--brand));
    box-shadow: 0 10px 30px -18px hsl(var(--brand));
}

.pg.is-drop .pg-drop {
    border-color: hsl(var(--brand));
    background:
        radial-gradient(120% 140% at 50% 0%, hsl(var(--brand) / .22), transparent 60%),
        hsl(var(--brand) / .06);
}

.pg-drop-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: .15rem;
    border-radius: 50%;
    color: #fff;
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    box-shadow: 0 10px 22px -10px hsl(var(--brand)), inset 0 1px 0 rgb(255 255 255 / .3);
    animation: pgFloat 3.2s ease-in-out infinite;
}

@keyframes pgFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
    .pg-drop-ico {
        animation: none;
    }
}

.pg-drop-title {
    font-family: var(--font-head);
    font-size: .98rem;
    font-weight: 700;
    letter-spacing: -.01em;
    color: hsl(var(--foreground));
}

.pg-drop-sub {
    font-size: .8rem;
    color: hsl(var(--muted-foreground));
}

.pg-drop-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: .3rem;
    padding: .4rem .95rem;
    border-radius: var(--radius-sm);
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    box-shadow: 0 6px 14px -8px hsl(var(--brand)), inset 0 1px 0 rgb(255 255 255 / .25);
}

.pg-drop-fmt {
    margin-top: .35rem;
    font-size: .68rem;
    color: hsl(var(--muted-foreground));
}


.pg-note {
    margin: 0;
    font-size: .8rem;
    line-height: 1.55;
    color: hsl(var(--foreground) / .8);
}

.pg-note-sub {
    margin-top: .35rem;
    font-size: .74rem;
    color: hsl(var(--muted-foreground));
}

.pg-note-inline {
    font-size: .72rem;
    color: hsl(var(--muted-foreground));
}

.pg-hint-ico {
    display: inline-flex;
    vertical-align: -2px;
    color: hsl(var(--brand-text));
}

/* Varyant satırı: görsel butonu + geniş galeri penceresi */
.vt-images {
    white-space: nowrap;
}

.vt-img-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .25rem .6rem .25rem .3rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface));
    color: hsl(var(--muted-foreground));
    font-size: .78rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}

.vt-img-btn:hover,
.vt-img-btn:focus-visible {
    outline: none;
    border-color: hsl(var(--brand) / .5);
    background: hsl(var(--brand) / .06);
    color: hsl(var(--brand-text));
}

.vt-img-btn.has-images {
    color: hsl(var(--foreground));
}

.vt-img-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    overflow: hidden;
    border-radius: 6px;
    background: hsl(var(--app-surface-3));
    color: hsl(var(--muted-foreground));
}

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

.vg-dialog {
    width: min(920px, 94vw);
}

/* Başlık ile açıklama arasında boşluk */
.vg-dialog .uk-modal-title {
    margin-bottom: .6rem;
}

.vg-dialog .uk-modal-body {
    max-height: 68vh;
    overflow-y: auto;
    /* Üstte boşluk olmadan bırakma alanının kenarlığı/gölgesi başlığa yapışıyordu. */
    padding: 1.25rem 1.5rem;
}

.pg-holder[hidden] {
    display: none;
}

/* Görseller (%70) ve videolar (%30) masaüstünde yan yana; dar ekranda alt alta */
.media-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.25rem;
    align-items: start;
    margin-top: 1.25rem;
}

@media (min-width: 900px) {
    .media-row {
        grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    }
}

/* --- Ürün videoları (assets/js/product-videos.js) --- */
.pv-add {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: stretch;
}

.pv-input {
    flex: 1 1 160px;
    min-width: 0;
}

.pv-btn {
    flex: 0 0 auto;
}

.pv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: .75rem;
    margin-top: .9rem;
}

.pv-grid.is-empty {
    display: block;
}

.pv-card {
    position: relative;
    overflow: hidden;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-sm);
    background: hsl(var(--app-surface));
    cursor: grab;
    transition: border-color .15s ease, box-shadow .15s ease, opacity .15s ease, transform .15s ease;
}

.pv-card:hover {
    border-color: hsl(var(--brand) / .5);
    box-shadow: 0 8px 22px -16px hsl(var(--brand));
}

.pv-card.is-dragging {
    opacity: .45;
    transform: scale(.97);
}

.pv-card.is-over {
    border-color: hsl(var(--brand));
    box-shadow: 0 0 0 3px hsl(var(--brand) / .25);
}

.pv-media {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    padding: 0;
    border: 0;
    background: linear-gradient(160deg, hsl(var(--app-surface-3)), hsl(var(--app-surface-2)));
    cursor: pointer;
}

.pv-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* Küçük resim yoksa belirgin kalsın diye marka tonu */
.pv-media.no-thumb {
    background: linear-gradient(150deg, hsl(var(--brand) / .18), hsl(var(--brand-2) / .1));
}

.pv-play {
    position: absolute;
    inset: 0;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    color: #fff;
    background-image: linear-gradient(140deg, hsl(var(--brand)), hsl(var(--brand-2)));
    box-shadow: 0 8px 20px -8px rgb(0 0 0 / .55), inset 0 1px 0 rgb(255 255 255 / .3);
    transition: transform .15s ease;
}

.pv-play svg {
    margin-left: 2px;
    fill: currentColor;
}

.pv-media:hover .pv-play {
    transform: scale(1.1);
}

.pv-foot {
    display: flex;
    align-items: center;
    padding: .5rem .7rem;
}

.pv-name {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .8rem;
    font-weight: 600;
}

.pv-name svg {
    color: hsl(var(--brand-text));
}

.pv-del {
    position: absolute;
    top: .4rem;
    right: .4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: rgb(255 255 255 / .92);
    color: hsl(var(--foreground));
    box-shadow: 0 2px 6px rgb(0 0 0 / .3);
    cursor: pointer;
    opacity: 0;
    transition: opacity .15s ease, background-color .12s ease, color .12s ease;
}

.pv-card:hover .pv-del,
.pv-del:focus-visible {
    opacity: 1;
}

.pv-del:hover {
    background: hsl(0 72% 50%);
    color: #fff;
}

@media (hover: none) {
    .pv-del {
        opacity: 1;
    }
}

/* Boş durum */
.pv-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .25rem;
    padding: .95rem 1rem;
    border: 2px dashed hsl(var(--brand) / .4);
    border-radius: var(--radius);
    background:
        radial-gradient(120% 140% at 50% 0%, hsl(var(--brand) / .12), transparent 60%),
        hsl(var(--app-surface-2));
    text-align: center;
}

/* Önizleme penceresi */
.vid-dialog {
    width: min(960px, 94vw);
}

.vid-dialog .uk-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.vid-dialog .uk-modal-title {
    margin: 0;
}

.vid-dialog .uk-modal-body {
    padding: 1rem 1.25rem 1.25rem;
}

.vid-frame-wrap {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-sm);
    background: #000;
}

.vid-frame-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Ayarlar > KDV: varsayılan KDV alanlarını "KDV Türleri" bölümünden ayıran çizgi.
   Renkler sitenin marka gradyanıyla aynı (avatar vb. ile aynı dil). */
.brand-divider {
    height: 2px;
    margin: 1.75rem 0;
    border: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        hsl(var(--brand) / .55) 12%,
        hsl(var(--brand-2)) 50%,
        hsl(var(--brand) / .55) 88%,
        transparent 100%);
}

/* --- Alan sarmalayıcı + yardım metni --- */
.form-field {
    display: flex;
    flex-direction: column;
    /* grid hücresinde daralabilsin (uzun içerik taşırıp hizayı bozmasın) */
    min-width: 0;
}

.form-hint {
    margin-top: .35rem;
    font-size: .77rem;
    line-height: 1.35;
    color: hsl(var(--muted-foreground));
}

/* --- Girdiler --- */
/* Girdiler: butonlardaki hafif 3D'nin tersi — yüzeye hafifçe gömülü.
   Üstte çok düşük yoğunlukta iç gölge, alt kenarda 1px ışık çizgisi.
   NOT: `background` shorthand'ı background-image'i sıfırlar; select okunu
   bozmamak için yalnızca background-color kullanılır. */
.uk-input,
.uk-select,
.uk-textarea {
    width: 100%;
    min-height: var(--field-h, 2.65rem);
    height: auto;
    padding: .55rem .8rem;
    font-family: var(--font-body);
    font-size: .9rem;
    line-height: 1.45;
    color: hsl(var(--foreground));
    background-color: var(--field-bg, hsl(var(--app-surface)));
    border: 1px solid var(--field-border, hsl(var(--app-border-strong)));
    border-radius: var(--field-radius, var(--radius-sm));
    box-shadow: inset 0 1px 3px var(--field-shade, hsl(var(--app-shadow) / .065)),
                0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.uk-input,
.uk-textarea {
    background-image: linear-gradient(180deg,
        var(--field-shade, hsl(var(--app-shadow) / .065)) 0%,
        hsl(0 0% 100% / 0) 26%);
}

.uk-textarea {
    min-height: 6.5rem;
    padding: .65rem .8rem;
    resize: vertical;
}

/* Küçük varyant: tablo içi / satır içi alanlar */
.uk-input.uk-form-sm,
.uk-select.uk-form-sm,
.uk-textarea.uk-form-sm,
.uk-input.uk-form-xs,
.uk-select.uk-form-xs {
    min-height: 2.15rem;
    padding: .36rem .55rem;
    font-size: .85rem;
    border-radius: var(--radius-xs);
}

.uk-input::placeholder,
.uk-textarea::placeholder {
    color: hsl(var(--muted-foreground) / .7);
}

.uk-input:hover,
.uk-select:hover,
.uk-textarea:hover {
    border-color: hsl(var(--brand) / .32);
    box-shadow: inset 0 1px 3px var(--field-shade, hsl(var(--app-shadow) / .075)),
                0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
}

/* Odakta gömülü gölge kalkar, alan yüzeye çıkar. */
.uk-input:focus,
.uk-select:focus,
.uk-textarea:focus {
    outline: none;
    border-color: hsl(var(--brand));
    background-color: var(--field-bg, hsl(var(--app-surface)));
    box-shadow: var(--focus-ring), 0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
}

.uk-input[readonly] {
    background-color: hsl(var(--muted) / .4);
    background-image: none;
    color: hsl(var(--muted-foreground));
}

/* Koyu temada alanlar karttan hafifçe ayrışsın.
   NOT: "background" shorthand'ı background-image/repeat/position/size'ı sıfırlar
   ve select okunu bozar → yalnızca background-color kullan. */
html.dark .uk-input,
html.dark .uk-select,
html.dark .uk-textarea {
    --field-shade: hsl(0 0% 0% / .35);
    --field-edge: hsl(0 0% 100% / .05);
    background-color: hsl(0 0% 100% / .035);
    border-color: hsl(0 0% 100% / .13);
}

/* Koyu temada `.dark` sınıfı özgüllüğü artırdığı için odak kenarlığı
   ayrıca yazılmalı; yoksa `border-color` ezilir. */
html.dark .uk-input:focus,
html.dark .uk-select:focus,
html.dark .uk-textarea:focus {
    border-color: hsl(var(--brand));
}

html.dark .uk-input[readonly],
html.dark .uk-input:disabled,
html.dark .uk-select:disabled,
html.dark .uk-textarea:disabled {
    background-color: hsl(0 0% 100% / .07);
}

.uk-input:disabled,
.uk-textarea:disabled {
    background-color: hsl(var(--muted) / .5);
    background-image: none;
    color: hsl(var(--muted-foreground));
    box-shadow: none;
    cursor: not-allowed;
}

/* Select'te ok ikonu korunur, yalnızca gradyan ve gölge kapanır. */
.uk-select:disabled {
    background-color: hsl(var(--muted) / .5);
    color: hsl(var(--muted-foreground));
    box-shadow: none;
    cursor: not-allowed;
}

/* Özel açılır ok (tarayıcı oku yerine) + gömülü gradyan.
   İki katman: [0] ok ikonu  [1] üstten hafif iç gölge. */
.uk-select {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 2.4rem;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--field-shade, hsl(var(--app-shadow) / .065)) 0%, hsl(0 0% 100% / 0) 26%);
    background-repeat: no-repeat, no-repeat;
    background-position: right .8rem center, 0 0;
    background-size: 1rem, 100% 100%;
}

html.dark .uk-select {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--field-shade) 0%, hsl(0 0% 100% / 0) 26%);
}

/* Küçük select'te ok payı daha az (metin kesilmesin).
   Ana `.uk-select` kuralından SONRA gelir ki background-* ezilmesin. */
.uk-select.uk-form-sm,
.uk-select.uk-form-xs,
.uk-table .uk-select {
    padding-right: 1.7rem;
    background-position: right .45rem center, 0 0;
    background-size: .95rem, 100% 100%;
}

/* Alan ızgaraları — form içinde kart olsun olmasın aynı boşluk ritmi.
   (Ürün ekle sayfasındaki iki sütunun yapışmasını önleyen kural.) */
.form-grid,
.uk-form > .grid,
.uk-form > .grid.grid-cols-1,
form > .grid {
    column-gap: 1.15rem;
    row-gap: 1.25rem;
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
}

/* Girdinin yanındaki ikon buton (÷ "+" ekle) alanla aynı yükseklikte olsun */
.uk-form .flex > .uk-btn.uk-btn-icon {
    height: var(--field-h, 2.65rem);
    min-height: var(--field-h, 2.65rem);
    width: var(--field-h, 2.65rem);
    min-width: var(--field-h, 2.65rem);
    border-radius: var(--field-radius, var(--radius-sm));
}

/* Alanın yanındaki normal buton da alan yüksekliğinde dursun */
.uk-form .flex > .uk-btn {
    min-height: var(--field-h, 2.65rem);
}

/* ---- Yuvarlak "+" ekle butonu -------------------------------------------
   Form satırındaki hızlı kayıt tetikleyicileri (yeni KDV, ambalaj, cari,
   tedarikçi...). .btn-add-row .ic ile aynı marka çipi dilini konuşur ama
   tek başına durduğu için dolgu + hover'da tam marka rengine döner.
   Sınıf her yerde yeniden kullanılabilir: class="uk-btn uk-btn-icon btn-plus" */
.uk-btn.btn-plus {
    --btn-ring: hsl(0 0% 100% / .5);

    border-radius: 999px;
    border: 1px solid hsl(var(--brand) / .34);
    background-color: hsl(var(--brand) / .09);
    background-image: linear-gradient(180deg,
        hsl(0 0% 100% / .55) 0%,
        hsl(0 0% 100% / 0) 52%,
        hsl(var(--brand) / .14) 100%);
    color: hsl(var(--brand-text));
    box-shadow: var(--sh-xs), inset 0 1px 0 var(--btn-ring);
    transition: background-color .16s ease, border-color .16s ease, color .16s ease,
                box-shadow .16s ease, transform .12s ease;
}

.uk-btn.btn-plus > svg {
    display: block;
    width: 17px;
    height: 17px;
}

.uk-btn.btn-plus:hover {
    border-color: hsl(var(--brand));
    background-color: hsl(var(--brand));
    background-image: linear-gradient(180deg,
        hsl(0 0% 100% / .24) 0%,
        hsl(0 0% 100% / 0) 52%,
        hsl(0 0% 0% / .12) 100%);
    color: hsl(var(--primary-foreground));
    transform: translateY(-1px);
    box-shadow: var(--sh-sm), inset 0 1px 0 hsl(0 0% 100% / .35);
}

.uk-btn.btn-plus:active {
    transform: translateY(0) scale(.94);
    box-shadow: var(--sh-xs), inset 0 2px 5px hsl(0 0% 0% / .22);
}

.uk-btn.btn-plus:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), inset 0 1px 0 var(--btn-ring);
}

html.dark .uk-btn.btn-plus {
    border-color: hsl(var(--brand) / .6);
    background-color: hsl(var(--brand) / .24);
    background-image: linear-gradient(180deg,
        hsl(0 0% 100% / .14) 0%,
        hsl(0 0% 100% / 0) 52%,
        hsl(0 0% 0% / .2) 100%);
    color: hsl(var(--brand-text));
    box-shadow: var(--sh-xs), inset 0 1px 0 hsl(0 0% 100% / .16);
}

html.dark .uk-btn.btn-plus:hover {
    border-color: hsl(var(--brand));
    background-color: hsl(var(--brand));
    background-image: linear-gradient(180deg,
        hsl(0 0% 100% / .18) 0%,
        hsl(0 0% 100% / 0) 52%,
        hsl(0 0% 0% / .18) 100%);
    color: hsl(var(--primary-foreground));
}

html.dark .uk-btn.btn-plus:active {
    background-image: linear-gradient(180deg,
        hsl(0 0% 0% / .18) 0%,
        hsl(0 0% 100% / 0) 48%,
        hsl(0 0% 100% / .14) 100%);
}

/* Zengin metin düzenleyici alanlarla aynı dili konuşsun */
.tox-tinymce {
    margin-top: .1rem;
    border: 1px solid var(--field-border, hsl(var(--app-border-strong) / .9)) !important;
    border-radius: var(--field-radius, var(--radius-sm)) !important;
    background: hsl(var(--app-surface));
    transition: border-color .15s ease, box-shadow .15s ease;
}

.tox-tinymce--focused {
    border-color: hsl(var(--brand)) !important;
    box-shadow: var(--focus-ring);
}

.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar__primary {
    background: hsl(var(--muted) / .45) !important;
    border-bottom: 1px solid hsl(var(--app-border)) !important;
}

.tox .tox-statusbar {
    background: hsl(var(--app-surface)) !important;
    border-top: 1px solid hsl(var(--app-border)) !important;
    color: hsl(var(--muted-foreground)) !important;
}

/* Kart içindeki alan ızgaraları tek ritimde hizalanır:
   görünümlerdeki gap-3 / mt-2 gibi karışık aralıkları ezer. */
.app-card > .grid,
.app-card .grid {
    column-gap: 1.15rem;
    row-gap: 1.25rem;
}

.app-card .grid + .grid {
    margin-top: 1.25rem;
}

/* Ürün ekle: iki sütun ve altındaki kartlar arasında nefes payı */
.form-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    align-items: start;
}

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

/* Form sütunu içinde alt alta duran kartlar */
.form-column {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    min-width: 0;
}

/* İki sütunlu form düzeninden sonra gelen kartlar aynı boşluğu korusun */
.form-columns ~ .app-card {
    margin-top: 1.25rem;
}

/* Form alt eylemleri: sağa yaslı, zeminsiz düz satır.
   (Eskiden yapışkan + yarı saydam bir çubuktu; form içeriği kayarken
   butonların arkasında ayrı bir zemin gibi görünüyordu.) */
.form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.5rem;
}

/* Devreye giren eylemler biraz daha büyük ve belirgin. */
.form-actions .uk-btn {
    padding: .65rem 1.35rem;
    font-size: .92rem;
}

.form-actions .uk-btn-primary {
    box-shadow: 0 8px 18px -10px hsl(var(--brand) / .6);
}

/* ---------------------------------------------------------
   10. Toast bildirimleri
   --------------------------------------------------------- */
.toast-stack {
    position: fixed;
    /* Üst çubuk içeriği kapanmasın diye aşağıdan başlar. */
    top: calc(var(--topbar-h) + .55rem);
    right: 1rem;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    width: min(370px, calc(100vw - 2rem));
    pointer-events: none;
}

.toast {
    --toast-accent: var(--brand);
    position: relative;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .78rem .8rem .82rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius);
    background: hsl(var(--app-surface) / .94);
    backdrop-filter: blur(14px) saturate(150%);
    box-shadow: var(--sh-lg);
    overflow: hidden;
    animation: toastIn .3s cubic-bezier(.22, .61, .36, 1) backwards;
}

.toast.is-out {
    animation: toastOut .2s ease forwards;
}

@keyframes toastIn {
    from {
        opacity: 0;
        transform: translateX(14px) scale(.98);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes toastOut {
    to {
        opacity: 0;
        transform: translateX(14px) scale(.98);
    }
}

.toast-ic {
    display: grid;
    place-items: center;
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: hsl(var(--toast-accent) / .13);
    color: hsl(var(--toast-accent));
}

.toast-body {
    flex: 1 1 auto;
    min-width: 0;
}

.toast-title {
    font-family: var(--font-head);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: -.01em;
    line-height: 1.3;
}

.toast-msg {
    margin-top: 1px;
    font-size: .8rem;
    line-height: 1.4;
    color: hsl(var(--muted-foreground));
    word-break: break-word;
}

.toast-x {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    margin: -2px -2px 0 0;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.toast-x:hover {
    background: hsl(var(--muted) / .8);
    color: hsl(var(--foreground));
}

.toast-bar {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 3px;
    width: 100%;
    transform-origin: left center;
    background: hsl(var(--toast-accent) / .75);
    animation: toastBar linear forwards;
}

@keyframes toastBar {
    from {
        transform: scaleX(1);
    }
    to {
        transform: scaleX(0);
    }
}

.toast-success {
    --toast-accent: var(--success);
}

.toast-error {
    --toast-accent: var(--danger);
}

.toast-warning {
    --toast-accent: var(--warning);
}

.toast-info {
    --toast-accent: var(--info);
}

@media (max-width: 640px) {
    .toast-stack {
        top: calc(var(--topbar-h) + .35rem);
        right: .7rem;
        left: .7rem;
        width: auto;
    }
}

/* SweetAlert2 onay kutuları tasarıma bağlanır (toast olmayan kullanım) */
.swal2-popup {
    border-radius: var(--radius-lg) !important;
    font-family: var(--font-body) !important;
    background: hsl(var(--app-surface)) !important;
    color: hsl(var(--foreground)) !important;
    border: 1px solid hsl(var(--app-border));
    box-shadow: var(--sh-lg) !important;
}

.swal2-title {
    font-family: var(--font-head) !important;
    font-size: 1.15rem !important;
    font-weight: 700 !important;
}

.swal2-html-container {
    font-size: .9rem !important;
    color: hsl(var(--muted-foreground)) !important;
}

.swal2-actions {
    gap: .5rem;
}

.swal2-confirm,
.swal2-cancel {
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-head) !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.swal2-confirm {
    background: hsl(var(--danger)) !important;
}

/* Olumlu onay (ör. bilgi fişi onayı): yeşil */
.swal2-confirm.swal-ok {
    background: hsl(var(--success)) !important;
}

/* Düzenleme sorusu (satıra çift tıklama): varsayılan mavi UI butonu */
/* .uk-btn-primary ile aynı 3D dil; .swal2-confirm kuralları !important olduğu için burada da !important. */
.swal2-confirm.swal-brand {
    --btn-top: hsl(0 0% 100% / .18);
    --btn-bot: hsl(0 0% 0% / .1);
    --btn-ring: hsl(0 0% 100% / .26);
    position: relative;
    background-color: hsl(var(--brand)) !important;
    background-image: linear-gradient(180deg, var(--btn-top) 0%, hsl(0 0% 100% / 0) 48%, var(--btn-bot) 100%) !important;
    border: 1px solid hsl(var(--brand) / .9) !important;
    color: hsl(var(--primary-foreground)) !important;
    letter-spacing: -.005em;
    box-shadow: var(--sh-xs), inset 0 1px 0 var(--btn-ring) !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease,
                transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

.swal2-confirm.swal-brand:hover {
    --btn-top: hsl(0 0% 100% / .24);
    --btn-ring: hsl(0 0% 100% / .34);
    transform: translateY(-1px);
    filter: brightness(1.06) saturate(1.05);
    box-shadow: var(--sh-md), inset 0 1px 0 var(--btn-ring) !important;
}

.swal2-confirm.swal-brand:active {
    transform: translateY(0) scale(.985);
    filter: brightness(.95);
    box-shadow: var(--sh-xs), inset 0 2px 4px hsl(0 0% 0% / .24) !important;
}

.swal2-confirm.swal-brand:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), inset 0 1px 0 var(--btn-ring) !important;
}

.swal2-cancel {
    background: hsl(var(--muted)) !important;
    color: hsl(var(--foreground)) !important;
}

/* ---------------------------------------------------------
   11. Alert (satır içi kullanım)
   --------------------------------------------------------- */
.uk-alert {
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.uk-alert-primary {
    background: hsl(var(--success) / .1);
    color: hsl(var(--success));
    border-color: hsl(var(--success) / .28);
}

html.dark .uk-alert-primary {
    color: hsl(152 62% 68%);
}

/* ---------------------------------------------------------
   12. Rozetler
   --------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .18rem .55rem;
    font-family: var(--font-head);
    font-size: .735rem;
    font-weight: 700;
    letter-spacing: -.005em;
    border-radius: 999px;
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
    white-space: nowrap;
}

.badge-primary {
    background: hsl(var(--brand) / .11);
    color: hsl(var(--brand-text));
}

.badge-success {
    background: hsl(var(--success) / .13);
    color: hsl(var(--success));
}

.badge-warning {
    background: hsl(var(--warning) / .15);
    color: hsl(var(--warning));
}

.badge-danger {
    background: hsl(var(--danger) / .13);
    color: hsl(var(--danger));
}

html.dark .badge-success {
    color: hsl(152 62% 66%);
}

html.dark .badge-warning {
    color: hsl(38 96% 64%);
}

html.dark .badge-danger {
    color: hsl(0 84% 70%);
}

/* ---------------------------------------------------------
   13. Tablolar / DataTables
   --------------------------------------------------------- */
table.dataTable {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .89rem;
}

.dt-container .dt-layout-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    margin: 0 0 1rem;
}

.dt-container .dt-layout-row:last-child {
    margin: 1rem 0 0;
}

.dt-container .dt-layout-cell {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.dt-container .dt-layout-cell.dt-layout-start {
    justify-content: flex-start;
    margin-right: auto;
}

.dt-container .dt-layout-cell.dt-layout-end {
    justify-content: flex-end;
    margin-left: auto;
}

.dt-container {
    --dt-h: 2.55rem;
    --dt-border: hsl(var(--app-border-strong) / .85);
}

.dt-container .dt-length,
.dt-container .dt-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: .55rem;
    color: hsl(var(--muted-foreground));
    font-size: .82rem;
    font-weight: 500;
}

/* "Ara:" etiketi görsel olarak gizlenir (yer tutucu + ikon yeterli),
   ekran okuyucular için DOM'da kalır. */
.dt-container .dt-search label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.dt-container .dt-length select {
    /* `appearance: none` ile Chrome, genişliği seçili seçeneğe göre hesaplar;
       bu yüzden "1,000" / "2,000" gibi uzun seçenekler kutuyu taşırıyordu.
       Sabit bir taban genişlik + küçülmeme kuralı bunu bitirir. */
    flex: none;
    width: max-content;
    min-width: 6.9rem;
    height: var(--dt-h);
    min-height: var(--dt-h);
    padding: 0 2.35rem 0 .9rem;
    font-variant-numeric: tabular-nums;
    border: 1px solid var(--dt-border);
    border-radius: var(--radius-sm);
    background-color: hsl(var(--app-surface));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    -webkit-appearance: none;
    appearance: none;
    /* [0] ok ikonu  [1] üstten hafif iç gölge */
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--field-shade, hsl(var(--app-shadow) / .065)) 0%, hsl(0 0% 100% / 0) 26%);
    background-repeat: no-repeat, no-repeat;
    background-position: right .7rem center, 0 0;
    background-size: .95rem, 100% 100%;
    box-shadow: inset 0 1px 3px var(--field-shade, hsl(var(--app-shadow) / .065)),
                0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

html.dark .dt-container .dt-length select {
    --field-shade: hsl(0 0% 0% / .35);
    --field-edge: hsl(0 0% 100% / .05);
    background-color: hsl(0 0% 100% / .035);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"),
        linear-gradient(180deg, var(--field-shade) 0%, hsl(0 0% 100% / 0) 26%);
}

html.dark .dt-container .dt-length select:focus {
    border-color: hsl(var(--brand) / .75);
}

.dt-container .dt-length select:hover {
    border-color: hsl(var(--app-border-strong));
}

.dt-container .dt-length select:focus {
    outline: none;
    border-color: hsl(var(--brand) / .75);
    box-shadow: var(--focus-ring), 0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
}

.dt-container table.dataTable thead th {
    background: hsl(var(--muted) / .5);
    color: hsl(var(--muted-foreground));
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .055em;
    padding: .78rem .85rem;
    border-bottom: 1px solid hsl(var(--app-border));
    white-space: nowrap;
}

.dt-container table.dataTable thead th:first-child {
    border-top-left-radius: var(--radius-sm);
    border-bottom-left-radius: var(--radius-sm);
}

.dt-container table.dataTable thead th:last-child {
    border-top-right-radius: var(--radius-sm);
    border-bottom-right-radius: var(--radius-sm);
}

.dt-container table.dataTable tbody td {
    padding: .7rem .85rem;
    border-bottom: 1px solid hsl(var(--app-border) / .7);
    vertical-align: middle;
}

.dt-container table.dataTable tbody tr:last-child td {
    border-bottom: 0;
}

.dt-container table.dataTable tbody tr {
    transition: background .13s ease;
}

/* Boş liste durumu. Not: DataTables zaten td.dt-empty üretir — ek sarmalayıcı
   koymayın, yoksa mesaj iki kez çizilir. */
.dt-container table.dataTable tbody td.dt-empty {
    position: relative;
    padding: 3rem 1rem 2.4rem;
    text-align: center;
    color: hsl(var(--muted-foreground));
    font-weight: 500;
    font-size: .89rem;
}

/* Simge zemini (dolgulu kutu) */
.dt-container table.dataTable tbody td.dt-empty::before {
    content: "";
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 auto .75rem;
    border-radius: var(--radius-sm);
    background: hsl(var(--muted) / .7);
    box-shadow: inset 0 0 0 1px hsl(var(--app-border));
}

/* Simgenin kendisi: dolgunun üstüne maskeyle çizilir.
   top değeri padding-top (3rem) ile aynı kalmalı. */
.dt-container table.dataTable tbody td.dt-empty::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 3rem;
    width: 40px;
    height: 40px;
    transform: translateX(-50%);
    pointer-events: none;
    background-color: hsl(var(--muted-foreground) / .8);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11Z'/%3E%3C/svg%3E") center / 20px 20px no-repeat;
}

/* Sıralama okları: DataTables'ın metin üçgenleri (▲▼) yerine ince chevron */
table.dataTable thead > tr > th span.dt-column-order::before,
table.dataTable thead > tr > th span.dt-column-order::after {
    content: "" !important;
    left: 1px !important;
    width: 8px !important;
    height: 5px !important;
    font-size: 0 !important;
    line-height: 0 !important;
    background-color: currentColor !important;
    background-image: none !important;
    opacity: .3 !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    transition: opacity .15s ease;
}

table.dataTable thead > tr > th span.dt-column-order::before {
    bottom: calc(50% + 2px) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 5l4-4 4 4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

table.dataTable thead > tr > th span.dt-column-order::after {
    top: calc(50% + 2px) !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

table.dataTable thead > tr > th:hover span.dt-column-order::before,
table.dataTable thead > tr > th:hover span.dt-column-order::after {
    opacity: .55 !important;
}

/* Aktif sıralama yönü vurgulanır */
table.dataTable thead > tr > th.dt-ordering-asc span.dt-column-order::before,
table.dataTable thead > tr > th.dt-ordering-desc span.dt-column-order::after {
    opacity: 1 !important;
    background-color: hsl(var(--brand)) !important;
}

/* Zebra: çift satırlar hafif tonlu (gözü rahatlatır). Hover bunun üstüne biner. */
.dt-container table.dataTable tbody tr:nth-child(even) > * {
    background: hsl(var(--muted) / .6);
}

.dt-container table.dataTable tbody tr:hover > * {
    background: hsl(var(--brand) / .045);
}

.dt-container .dt-info {
    color: hsl(var(--muted-foreground));
    font-size: .81rem;
}

.dt-container .dt-paging .dt-paging-button {
    border: 1px solid hsl(var(--app-border));
    background: hsl(var(--app-surface));
    color: hsl(var(--foreground));
    border-radius: var(--radius-sm);
    min-width: 2.15rem;
    height: 2.15rem;
    line-height: 1;
    padding: 0 .5rem;
    margin: 0 2px;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .83rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.dt-container .dt-paging .dt-paging-button:hover:not(.disabled):not(.current) {
    border-color: hsl(var(--brand) / .4);
    color: hsl(var(--brand-text));
    background: hsl(var(--brand) / .06);
}

/* Vendor kuralı daha yüksek özgüllükte; aynı seviyeye çıkıp !important ile bağlanır */
div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background-color: hsl(var(--brand)) !important;
    background-image: none !important;
    color: hsl(var(--primary-foreground)) !important;
    border-color: transparent !important;
    box-shadow: var(--sh-xs) !important;
}

.dt-container .dt-paging .dt-paging-button.disabled,
.dt-container .dt-paging .dt-paging-button:disabled {
    opacity: .4;
    cursor: default;
}

/* Yükleniyor: yazısız, ortada dairesel marka renkli döner halka. */
.dt-container div.dt-processing {
    width: 52px;
    height: 52px;
    margin: -26px 0 0 -26px;
    padding: 0;
    border-radius: 50%;
    background: hsl(var(--app-surface));
    box-shadow: var(--sh-md);
    font-size: 0;
    color: transparent;
}

.dt-container div.dt-processing > div:not(:last-child) {
    display: none;
}

.dt-container div.dt-processing > div:last-child {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
}

.dt-container div.dt-processing > div:last-child > div {
    display: none;
}

.dt-container div.dt-processing > div:last-child::after {
    content: "";
    position: absolute;
    inset: 12px;
    border-radius: 50%;
    border: 3px solid hsl(var(--brand) / .18);
    border-top-color: hsl(var(--brand));
    animation: dt-spin .7s linear infinite;
}

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

/* Yenilenirken tablo içeriği hafif soluk kalır. */
.dt-container:has(div.dt-processing[style*="block"]) table.dataTable tbody {
    opacity: .45;
    transition: opacity .15s ease;
}

/* DataTables arama alanı — ikonlu, hap biçimli */
.dt-container .dt-search input[type="search"] {
    height: var(--dt-h);
    min-width: 268px;
    padding: 0 2.5rem 0 2.4rem;
    border: 1px solid var(--dt-border);
    border-radius: 999px;
    background-color: hsl(var(--app-surface-2));
    color: hsl(var(--foreground));
    font-family: var(--font-body);
    font-size: .85rem;
    /* [0] büyüteç ikonu  [1] üstten hafif iç gölge */
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='8'/><path d='m21 21-4.34-4.34'/></svg>"),
        linear-gradient(180deg, var(--field-shade, hsl(var(--app-shadow) / .065)) 0%, hsl(0 0% 100% / 0) 30%);
    background-repeat: no-repeat, no-repeat;
    background-position: .85rem center, 0 0;
    background-size: 16px 16px, 100% 100%;
    box-shadow: inset 0 1px 3px var(--field-shade, hsl(var(--app-shadow) / .065)),
                0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

html.dark .dt-container .dt-search input[type="search"] {
    --field-shade: hsl(0 0% 0% / .32);
    --field-edge: hsl(0 0% 100% / .05);
    background-color: hsl(0 0% 100% / .04);
    border-color: hsl(0 0% 100% / .13);
}

html.dark .dt-container .dt-search input[type="search"]:focus {
    background-color: hsl(0 0% 100% / .07);
    border-color: hsl(var(--brand) / .75);
}

.dt-container .dt-search input[type="search"]::placeholder {
    color: hsl(var(--muted-foreground));
    opacity: .85;
}

.dt-container .dt-search input[type="search"]:hover {
    border-color: hsl(var(--app-border-strong));
    box-shadow: inset 0 1px 3px var(--field-shade, hsl(var(--app-shadow) / .075)),
                0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
}

.dt-container .dt-search input[type="search"]:focus {
    outline: none;
    background-color: hsl(var(--app-surface));
    border-color: hsl(var(--brand) / .75);
    box-shadow: var(--focus-ring), 0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
}

.dt-container .dt-search input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round'><path d='M18 6 6 18M6 6l12 12'/></svg>") center/14px no-repeat;
    cursor: pointer;
}

/* Responsive: child-row eklentisi kapalı; mobilde kart görünümü (bölüm 20). */

/* ---------------------------------------------------------
   14. Sekmeler
   --------------------------------------------------------- */
.uk-tab {
    --uk-tab-active-border-color: hsl(var(--brand));
    --uk-tab-active-color: hsl(var(--brand-text));
    --uk-tab-item-color: hsl(var(--muted-foreground));
}

.uk-tab > * > a {
    font-weight: 600;
    font-size: .9rem;
    transition: color .15s ease;
}

.uk-tab > .uk-active > a {
    font-weight: 700;
}

/* ---------------------------------------------------------
   15. Boş durum & yardımcılar
   --------------------------------------------------------- */
.empty-state {
    text-align: center;
    padding: 2.6rem 1rem;
    color: hsl(var(--muted-foreground));
}

.empty-state .uk-icon {
    opacity: .5;
}

.muted {
    color: hsl(var(--muted-foreground));
}

.text-danger {
    color: hsl(var(--danger));
}

.money {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pos-rel {
    position: relative;
}

.sticky-summary {
    position: sticky;
    top: calc(var(--topbar-h) + 20px);
}

#menu-toggle {
    display: none;
}

/* ---------------------------------------------------------
   16. Autocomplete
   --------------------------------------------------------- */
.autocomplete-list {
    position: fixed;
    z-index: 2000;
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius);
    box-shadow: var(--sh-lg);
    max-height: 280px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin: 0;
    padding: 5px;
}

.autocomplete-list .item {
    padding: .52rem .65rem;
    cursor: pointer;
    font-size: .87rem;
    border-radius: var(--radius-xs);
}

.autocomplete-list .item.is-empty {
    cursor: default;
    color: hsl(var(--muted-foreground));
}

.autocomplete-list .item.is-empty:hover {
    background: none;
    color: hsl(var(--muted-foreground));
}

/* Cari seçici satırı: ad + alt bilgi solda, tür etiketi sağda */
.ac-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.ac-main {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.ac-main b {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ac-main small {
    color: hsl(var(--muted-foreground));
    font-size: .74rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qc-type {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .5rem;
    margin-bottom: .9rem;
}

/* Fiş / belge numarası düğmesi (satış no, alış no): göz ikonlu, marka renginde; tıklayınca fişi açar */
.doc-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28rem .65rem;
    border: 1px solid hsl(var(--brand) / .3);
    border-radius: var(--radius-sm);
    background: hsl(var(--brand) / .09);
    color: hsl(var(--brand-text));
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: -.005em;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.doc-btn:hover,
.doc-btn:focus-visible {
    background: hsl(var(--brand));
    border-color: hsl(var(--brand));
    color: #fff;
    outline: none;
}

.doc-btn.is-off {
    cursor: default;
    border-color: hsl(var(--app-border));
    background: hsl(var(--muted));
    color: hsl(var(--muted-foreground));
}

/* Üretim/Sipariş: tahmini bitiş, kalan/geciken gün, durum seçimi, menüde öne çıkan bağlantı */
.po-finish { display: inline-flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.po-chip { align-self: flex-start; padding: .08rem .5rem; border-radius: 999px; background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.po-chip.is-soon { background: hsl(var(--warning) / .15); color: hsl(var(--warning)); }
.po-chip.is-late { background: hsl(var(--danger) / .13); color: hsl(var(--danger)); }
/* Üretim/Sipariş durum düğmesi + açılır menü (ikonlu) */
.po-badge { gap: .35rem; }

.po-dd { display: inline-flex; --po-c: var(--muted-foreground); }
.po-dd.is-pending { --po-c: var(--warning); }
.po-dd.is-in_progress { --po-c: var(--brand-text); }
.po-dd.is-done { --po-c: var(--success); }
.po-dd.is-cancelled { --po-c: var(--danger); }
.po-dd.is-busy { opacity: .55; pointer-events: none; }

.po-dd-btn {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .34rem .55rem .34rem .6rem;
    border: 1px solid hsl(var(--po-c) / .3);
    border-radius: var(--radius-sm);
    background: hsl(var(--po-c) / .1);
    color: hsl(var(--po-c));
    font-family: var(--font-head);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: -.005em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.po-dd-btn:hover { background: hsl(var(--po-c) / .17); border-color: hsl(var(--po-c) / .5); }
.po-dd-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.po-dd-btn[aria-expanded="true"] { border-color: hsl(var(--po-c) / .6); box-shadow: 0 0 0 3px hsl(var(--po-c) / .14); }
.po-dd-btn > i:last-child { opacity: .7; transition: transform .15s ease; }
.po-dd-btn[aria-expanded="true"] > i:last-child { transform: rotate(180deg); }

.po-menu {
    position: fixed;
    z-index: 10050;
    min-width: 196px;
    padding: 5px;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius);
    background: hsl(var(--popover));
    color: hsl(var(--popover-foreground));
    box-shadow: var(--sh-lg);
    animation: poMenuIn .12s ease-out both;
}

@keyframes poMenuIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }

.po-opt {
    display: flex;
    align-items: center;
    gap: .6rem;
    width: 100%;
    padding: .5rem .65rem;
    border: 0;
    border-radius: var(--radius-xs);
    background: transparent;
    color: inherit;
    font-family: var(--font-head);
    font-size: .86rem;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease;
}

.po-opt + .po-opt { margin-top: 2px; }
.po-opt:hover, .po-opt:focus-visible { background: hsl(var(--muted)); outline: none; }
.po-opt.is-current { background: hsl(var(--muted) / .6); }
.po-opt-ic { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-xs); }
.po-opt.is-pending .po-opt-ic { background: hsl(var(--warning) / .15); color: hsl(var(--warning)); }
.po-opt.is-in_progress .po-opt-ic { background: hsl(var(--brand) / .12); color: hsl(var(--brand-text)); }
.po-opt.is-done .po-opt-ic { background: hsl(var(--success) / .14); color: hsl(var(--success)); }
.po-opt.is-cancelled .po-opt-ic { background: hsl(var(--danger) / .13); color: hsl(var(--danger)); }
.po-opt-tx { flex: 1; }
.po-opt-ck { display: inline-flex; color: hsl(var(--brand-text)); }

.po-status.is-pending { color: hsl(var(--warning)); font-weight: 600; }
.po-status.is-in_progress { color: hsl(var(--brand-text)); font-weight: 600; }
.po-status.is-done { color: hsl(var(--success)); font-weight: 600; }
.po-status.is-cancelled { color: hsl(var(--danger)); font-weight: 600; }


.ac-tag {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: .68rem;
    font-weight: 700;
    padding: .1rem .5rem;
    border-radius: 999px;
}

.ac-tag.customer { background: hsl(var(--brand) / .11); color: hsl(var(--brand-text)); }
.ac-tag.supplier { background: hsl(var(--warning) / .15); color: hsl(var(--warning)); }

/* Arama sürerken girişin sağında küçük dönen gösterge */
.pos-rel.is-searching::after {
    content: "";
    position: absolute;
    right: .8rem;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid hsl(var(--brand) / .25);
    border-top-color: hsl(var(--brand));
    border-radius: 50%;
    animation: acSpin .6s linear infinite;
    pointer-events: none;
}

@keyframes acSpin { to { transform: rotate(360deg); } }

.autocomplete-list .item:hover,
.autocomplete-list .item.active {
    background: hsl(var(--brand) / .09);
    color: hsl(var(--brand-text));
}

/* ---------------------------------------------------------
   17. Switch
   --------------------------------------------------------- */
input.switch {
    -webkit-appearance: none;
    appearance: none;
    width: 42px;
    height: 24px;
    border-radius: 999px;
    background: hsl(var(--input) / .9);
    border: 1px solid hsl(var(--app-border));
    position: relative;
    cursor: pointer;
    flex: 0 0 42px;
    margin: 0;
    transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
    margin-top: 4px;
}

input.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}

input.switch:checked {
    background: hsl(var(--brand));
    border-color: hsl(var(--brand));
}

input.switch:checked::after {
    transform: translateX(18px);
}

input.switch:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

/* ---------------------------------------------------------
   18. Tema ikonu
   --------------------------------------------------------- */
#theme-toggle .i-sun {
    display: none;
}

.dark #theme-toggle .i-moon {
    display: none;
}

.dark #theme-toggle .i-sun {
    display: inline;
}

/* ---------------------------------------------------------
   19. Giriş sayfası
   --------------------------------------------------------- */
.auth-wrap {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    min-height: 100vh;
    /* Sağ panel sağdan kayarken yatay kaydırma çubuğu oluşmasın;
       `clip` kaydırma kabı yaratmaz, dikey ekseni etkilemez. */
    overflow-x: clip;
}

.auth-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3.25rem 3.25rem 3.25rem 3.5rem;
    color: #fff;
    background-color: hsl(238 60% 20%);
}

.auth-hero-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(150deg, hsl(238 76% 26%) 0%, hsl(var(--brand)) 58%, hsl(var(--brand-2)) 100%);
    z-index: -1;
    will-change: transform, opacity;
    animation: authOverlayIn .92s cubic-bezier(.16, .84, .28, 1) backwards;
}

/* Arka plan videosu: marka gradyanının ÜZERİNE biner, böylece hem hareket
   gelir hem marka rengi korunur (gradyan katmanı değişmedi).

   Koyulaştırma şart: parlak bir video %60 opaklıkta beyaz metnin arkasına
   gelince kontrast ~1.6:1'e düşüyor ve yazı okunmuyor. brightness(.55) bunu
   ~4.5:1'in üzerine çıkarır. */
.auth-hero-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .6;
    filter: brightness(.55) contrast(1.05);
    pointer-events: none;
    user-select: none;
}

.auth-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: radial-gradient(760px 520px at 78% 12%, hsl(0 0% 100% / .16), transparent 68%);
    pointer-events: none;
}

.auth-hero-inner {
    position: relative;
    /* Arka plan videosu üzerinde kalsın (katman sırası garantisi). */
    z-index: 1;
    max-width: 460px;
}

/* Video üzerindeki yazılar: hafif gölge, parlak karelerde de okunsun. */
.auth-hero h1,
.auth-hero p,
.auth-hero .auth-features li {
    text-shadow: 0 1px 3px hsl(238 60% 6% / .5);
}

.auth-hero h1 {
    font-family: var(--font-head);
    font-size: 2.15rem;
    margin: 0 0 .8rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.16;
    color: #fff;
}

.auth-hero p {
    max-width: 440px;
    margin: 0;
    opacity: .92;
    line-height: 1.7;
    font-size: .98rem;
}

/* Marka rozeti: logo mavi yazılı şeffaf PNG olduğu için beyaz zemin gerekir. */
.auth-hero-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 68px;
    padding: 7px 11px;
    border-radius: var(--radius);
    margin-bottom: 1.7rem;
    background: #fff;
    box-shadow: 0 12px 28px 18px rgba(255, 255, 255, 0.2);
}

.auth-hero-logo .auth-logo {
    height: 100%;
    width: auto;
    padding: 0;
    border-radius: 0;
    background: transparent;
}

.auth-features {
    list-style: none;
    margin: 1.9rem 0 0;
    padding: 0;
    display: grid;
    gap: .55rem;
    max-width: 440px;
}

.auth-features li {
    position: relative;
    padding: .8rem .95rem .8rem 2.5rem;
    font-size: .9rem;
    font-weight: 500;
    color: #fff;
    border-radius: var(--radius);
    /* Koyu cam: parlak ve desenli video üzerinde beyaz metin net okunsun.
       blur arkadaki deseni yumuşatır — okunabilirliği bozan asıl şey oydu. */
    background: hsl(238deg 8.37% 27.61% / 10%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border: 1px solid hsl(0 0% 100% / .1);
    transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.auth-features li:hover {
    background: hsl(238 52% 14% / .66);
    border-color: hsl(0 0% 100% / .26);
    transform: translateX(3px);
}

.auth-features li::before {
    content: "";
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    width: 1.3rem;
    height: 1.3rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px hsl(0 0% 100% / .2);
    background: hsl(0 0% 100% / .16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>") center/12px no-repeat;
}

.auth-form-side {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    background: hsl(var(--app-bg));
    position: relative;
    overflow: hidden;
    will-change: transform, opacity;
    animation: authFromRight .92s cubic-bezier(.16, .84, .28, 1) backwards;
}

.auth-theme {
    position: absolute;
    top: 1.35rem;
    right: 1.35rem;
    z-index: 3;
}

.auth-card {
    position: relative;
    z-index: 2;
    width: min(408px, 100%);
    padding: 1.9rem 1.8rem 2rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: var(--radius-lg);
    background: hsl(var(--app-surface));
    box-shadow: var(--sh-lg);
    animation: authCardIn .90s cubic-bezier(.16, .84, .28, 1) backwards;
    animation-delay: .10s;
}

/* --- Giriş sayfası animasyonları ---------------------------------------
   Yalnızca .auth-* bileşenlerinde; hepsi transform/opacity olduğu için
   compositor'da çalışır, layout/paint tetiklemez (takılma yapmaz).
   Overlay soldan, form paneli sağdan "perde" gibi açılır; içerik
   öğeleri bu perdelerin ardından sırayla yerine oturur. */
@keyframes authOverlayIn {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes authFromLeft {
    from { opacity: 0; transform: translate3d(-190px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes authFromRight {
    from { opacity: 0; transform: translate3d(190px, 0, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes authCardIn {
    from { opacity: 0; transform: translate3d(120px, 0, 0) scale(.96); }
    to   { opacity: 1; transform: none; }
}

@keyframes authRise {
    from { opacity: 0; transform: translate3d(0, 44px, 0); }
    to   { opacity: 1; transform: none; }
}

@keyframes authFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Hero ışığı nefes alır: yalnızca transform + opacity. */
@keyframes authGlow {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); opacity: .8; }
    50%      { transform: translate3d(0, -22px, 0) scale(1.08); opacity: 1; }
}

.auth-hero::after {
    will-change: transform, opacity;
    animation: authGlow 13s ease-in-out infinite;
}

/* Sol panel: başlık, metin ve madde listesi soldan sırayla açılır. */
.auth-hero-inner > * {
    animation: authFromLeft .80s cubic-bezier(.16, .84, .28, 1) backwards;
}

.auth-hero-inner > :nth-child(1) { animation-delay: .08s; }
.auth-hero-inner > :nth-child(2) { animation-delay: .20s; }
.auth-hero-inner > :nth-child(3) { animation-delay: .32s; }

.auth-features li {
    animation: authRise .62s cubic-bezier(.16, .84, .28, 1) backwards;
}

.auth-features li:nth-child(1) { animation-delay: .48s; }
.auth-features li:nth-child(2) { animation-delay: .58s; }
.auth-features li:nth-child(3) { animation-delay: .68s; }
.auth-features li:nth-child(4) { animation-delay: .78s; }
.auth-features li:nth-child(5) { animation-delay: .88s; }
.auth-features li:nth-child(6) { animation-delay: .98s; }

/* Kart içeriği, kart sağdan geldikten sonra alttan sırayla yükselir. */
.auth-card > * {
    animation: authRise .62s cubic-bezier(.16, .84, .28, 1) backwards;
}

.auth-card > :nth-child(1) { animation-delay: .42s; }
.auth-card > :nth-child(2) { animation-delay: .52s; }
.auth-card > :nth-child(3) { animation-delay: .62s; }
.auth-card > :nth-child(4) { animation-delay: .72s; }

.auth-card .form-field {
    animation: authRise .60s cubic-bezier(.16, .84, .28, 1) backwards;
}

.auth-card .form-field:nth-of-type(1) { animation-delay: .84s; }
.auth-card .form-field:nth-of-type(2) { animation-delay: .96s; }

.auth-card form > .uk-btn {
    animation: authRise .60s cubic-bezier(.16, .84, .28, 1) backwards;
    animation-delay: 1.10s;
}

.auth-theme {
    animation: authFadeIn .6s ease both;
    animation-delay: .34s;
}

/* Kart içi marka rozeti yalnızca dar ekranda gerekir; geniş ekranda logo soldaki panelde. */
.auth-mark {
    display: none;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 12px;
    border-radius: var(--radius-sm);
    background: hsl(var(--brand) / .08);
    box-shadow: inset 0 0 0 1px hsl(var(--brand) / .16);
    margin-bottom: 1.1rem;
}

.auth-mark img {
    height: 24px;
    width: auto;
    object-fit: contain;
}

.auth-card h2 {
    font-family: var(--font-head);
    font-size: 1.45rem;
    font-weight: 700;
    letter-spacing: -.025em;
    margin: 0;
}

/* Alan içi sol ikon. Login sayfasından gelir; artık tüm form alanlarında
   kullanılıyor — etiketli inputu <div class="input-ico"> içine almak yeterli. */
.input-ico {
    position: relative;
}

.input-ico > svg,
.input-ico > [data-lucide] {
    position: absolute;
    left: .72rem;
    top: 50%;
    transform: translateY(-50%);
    color: hsl(var(--muted-foreground));
    pointer-events: none;
    transition: color .15s ease;
}

.input-ico .uk-input {
    padding-left: 2.4rem;
}

.input-ico:focus-within > svg,
.input-ico:focus-within > [data-lucide] {
    color: hsl(var(--brand-text));
}

/* ---------------------------------------------------------
   Hesaplanan desi (ölçü kutularının 4. hücresi)
   Input değil, salt-okunur değer: çerçeve/zemin yok, ölçü
   kutularıyla aynı hizada durur. Form'a gönderilmez.
   --------------------------------------------------------- */
.desi-inline {
    display: flex;
    align-items: center;
    gap: .5rem;
    min-height: var(--field-h, 2.65rem);
}

.desi-inline > svg,
.desi-inline > [data-lucide] {
    flex: 0 0 auto;
    color: hsl(var(--muted-foreground));
}

.desi-inline-value {
    font-family: var(--font-head);
    font-size: 1.05rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.02em;
    line-height: 1;
    color: hsl(var(--foreground));
}

/* Ölçüler henüz girilmediyse soluk görünür. */
.desi-cell.is-empty .desi-inline > svg,
.desi-cell.is-empty .desi-inline > [data-lucide] {
    opacity: .5;
}

.desi-cell.is-empty .desi-inline-value {
    font-weight: 500;
    color: hsl(var(--muted-foreground));
}

/* ---------------------------------------------------------
   20. Responsive
   --------------------------------------------------------- */
@media (max-width: 959px) {
    /* Mobil menü tetikleyicisi: dokunma hedefi en az 44px olsun */
    #menu-toggle {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        min-width: 44px;
        height: 44px;
        min-height: 44px;
        padding: 0;
        border-radius: var(--radius-sm, 8px);
    }

    .app-sidebar {
        position: fixed;
        z-index: 60;
        left: 0;
        top: 0;
        width: min(300px, 84vw);
        flex-basis: min(300px, 84vw);
        background: hsl(var(--app-surface));
        box-shadow: var(--sh-lg);
        transform: translateX(-102%);
        transition: transform .26s cubic-bezier(.22, .61, .36, 1);
    }

    .app-shell.sidebar-open .app-sidebar {
        transform: translateX(0);
    }

    .app-shell.sidebar-open::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 55;
        background: rgba(8, 10, 30, .45);
        backdrop-filter: blur(3px);
        animation: appFade .2s ease both;
    }

    .app-content {
        padding: 1.1rem .9rem 3.5rem;
    }

    .app-topbar {
        padding: .5rem 1rem;
    }
}

@media (max-width: 900px) {
    .auth-hero {
        display: none;
    }

    /* Hero gizliyken video boşuna inmesin. */
    .auth-hero-video {
        display: none;
    }

    .auth-wrap {
        grid-template-columns: 1fr;
    }

    .auth-theme {
        top: 1rem;
        right: 1rem;
    }

    /* Marka paneli gizlenince logo kartın içine gelir. */
    .auth-mark {
        display: inline-flex;
    }
}

@media (max-width: 767px) {
    .app-topbar {
        padding: .5rem .85rem;
        gap: .5rem;
    }

    /* Mobilde "Panel / Sayfa" yolu gereksiz: yer kaplar. */
    .crumbs {
        display: none;
    }

    /* Üst çubuk sağ grup: ana menü düğmesi hariç hepsi küçük ve sıkı (taşma olmasın). */
    .app-topbar > div:last-child {
        gap: .3rem;
    }

    .app-topbar > div:last-child .uk-btn {
        height: 2rem;
        min-height: 2rem;
        font-size: .72rem;
    }

    .app-topbar > div:last-child .uk-btn-icon {
        width: 2rem;
        min-width: 2rem;
        padding: 0;
    }

    .app-topbar > div:last-child .uk-btn svg {
        width: 15px !important;
        height: 15px !important;
    }

    .app-topbar > div:last-child .pos-launch,
    .app-topbar > div:last-child .quick-toggle {
        padding-left: .5rem;
        padding-right: .5rem;
        gap: .3rem;
    }


    .app-content {
        padding: .9rem .8rem 3.5rem;
    }

    .page-head {
        flex-direction: column;
        align-items: stretch;
        gap: .7rem;
    }

    .page-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .page-actions .uk-btn {
        flex: 1 1 auto;
    }

    .app-page-title {
        font-size: 1.22rem;
    }

    .dt-container .dt-layout-row {
        flex-direction: column;
        align-items: stretch;
        gap: .55rem;
    }

    .dt-container .dt-length,
    .dt-container .dt-search {
        width: 100%;
        justify-content: space-between;
    }

    .dt-container .dt-search input[type="search"] {
        flex: 1;
        min-width: 0;
        width: 100%;
    }

    .dt-container .dt-info,
    .dt-container .dt-paging {
        justify-content: center;
        text-align: center;
    }

    .dt-container .dt-paging {
        flex-wrap: wrap;
    }

    .stat-value {
        font-size: 1.55rem;
    }

    .auth-form-side {
        padding: 4.5rem 1.1rem 2rem;
    }
}

/* ---------------------------------------------------------
   21. Erişilebilirlik & çıktı
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        transition-delay: 0s !important;
    }

    /* Giriş sayfası: hareket kısıtlıysa kaydırma iptal, sadece yumuşak solma kalır.
       Böylece sayfa yine "canlı" açılır ama konum değiştirmez. */
    .auth-hero-overlay,
    .auth-form-side,
    .auth-card,
    .auth-hero-inner > *,
    .auth-features li,
    .auth-card > *,
    .auth-card .form-field,
    .auth-card form > .uk-btn,
    .auth-theme {
        animation-name: authFadeIn !important;
        animation-duration: .42s !important;
        animation-timing-function: ease-out !important;
        animation-delay: 0s !important;
        animation-fill-mode: backwards !important;
        animation-iteration-count: 1 !important;
    }

    /* Nabız atan ışık tamamen durur. */
    .auth-hero::after {
        animation: none !important;
        opacity: .85;
    }

    /* Hareket kısıtlıysa video oynamaz ama GÖRÜNÜR kalır: duraklatılıp ilk
       kare sabit tutulur (sayfa içindeki script yapar). Gizlemek yanlıştı —
       kullanıcı "video bozuk" sanıyordu. */
}

@media print {
    .no-print {
        display: none !important;
    }

    body {
        background: #fff;
    }

    .app-sidebar,
    .app-topbar,
    .quick-drawer-wrap,
    .quick-backdrop,
    .toast-stack {
        display: none !important;
    }

    .app-content {
        padding: 0;
        animation: none;
    }

    .app-card {
        box-shadow: none;
        border-color: #ddd;
    }
}

/* ---------------------------------------------------------
   22. Lucide ikonları
   Kaynak: assets/vendor/lucide/lucide.min.js (yerel, CDN yok).
   PHP'deki icon() ikon Helpers/lucide_icons.php'deyse doğrudan <svg>,
   değilse <i data-lucide="..."> yer tutucusu üretir; sayfa sonunda
   App.icons() -> lucide.createIcons() yer tutucuyu <svg> ile değiştirir.
   Boyut --lu değişkeniyle verilir, böylece JS çalışmadan önce de
   ikon/yer tutucu doğru kutuyu kaplar (kayma/flaş olmaz).
   --------------------------------------------------------- */
[data-lucide],
svg.lucide {
    width: var(--lu, 1em);
    height: var(--lu, 1em);
}

[data-lucide] {
    display: inline-block;
    vertical-align: -.125em;
}

svg.lucide {
    flex: 0 0 auto;
}

/* Tema düğmesi: sınıflar <i>'den <svg>'ye taşınır, kural ikisini de kapsar. */
#theme-toggle .i-moon,
#theme-toggle .i-sun {
    vertical-align: -.125em;
}

/* ---------------------------------------------------------
   22. Mobil tablo / kart görünümü
   --------------------------------------------------------- */
.dt-container .dt-layout-table,
.dt-container .dt-layout-cell:has(> table) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 767px) {
    .app-card {
        padding: .85rem .75rem;
        max-width: 100%;
    }

    /* Tablo olmayan, genişleyebilen tablolar yatay kayar. */
    .app-card table:not(.dataTable),
    .def-table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .overflow-auto table:not(.dataTable) {
        display: table;
    }
}

/* Tablet dikey (768-900 px): 8-11 sütunlu masaüstü tablo yatay kaydığı için liste tabloları da kart görünümüne geçer.
   (Yukarıdaki genel tablo kuralları 767 px'te kalır; yalnızca DataTables kartları 900 px'e kadar uzatıldı.) */
@media (max-width: 900px) {
    .dt-container .dt-layout-table,
    .dt-container .dt-layout-cell:has(> table) {
        overflow-x: visible;
    }

    /* DataTables: satır = kart, hücre = "Başlık: değer" */
    table.dataTable,
    table.dataTable > tbody,
    table.dataTable > tbody > tr,
    table.dataTable > tbody > tr > td {
        display: block;
        width: 100% !important;
        box-sizing: border-box;
    }

    table.dataTable > thead,
    table.dataTable > tfoot {
        display: none;
    }

    table.dataTable > tbody > tr {
        margin-bottom: .7rem;
        padding: .3rem .85rem;
        border: 1px solid hsl(var(--app-border));
        border-radius: var(--radius-md, 12px);
        background: hsl(var(--app-surface));
        box-shadow: var(--sh-sm, 0 1px 2px hsl(var(--app-shadow) / .06));
    }

    .dt-container table.dataTable tbody td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .9rem;
        min-height: 2.4rem;
        padding: .5rem 0;
        text-align: right;
        border-bottom: 1px dashed hsl(var(--app-border) / .8);
        overflow-wrap: anywhere;
    }

    .dt-container table.dataTable tbody td:last-child {
        border-bottom: 0;
    }

    .dt-container table.dataTable tbody td[data-label]::before {
        content: attr(data-label);
        flex: 0 0 auto;
        max-width: 42%;
        text-align: left;
        font-family: var(--font-head);
        font-size: .68rem;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: hsl(var(--muted-foreground));
    }

    /* Eylem butonları: grup çerçevesi kalkar; her eylem etiketli, eşit genişlikte, ≥52px yüksekliğinde dokunma karosu olur
       (3'lü satırlar; fazlası alt satıra). İkon üstte, etiket (aria-label) altta. */
    .dt-container table.dataTable tbody td.dt-actions-cell {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
        gap: .5rem;
        padding-top: .75rem;
        text-align: center;
    }

    .dt-container table.dataTable tbody td.dt-actions-cell > .uk-btn {
        justify-content: center;
    }

    .dt-container table.dataTable tbody td.dt-actions-cell .act-group {
        display: contents;
    }

    .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act,
    .dt-container table.dataTable tbody td.dt-actions-cell .act-wa {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .28rem;
        box-sizing: border-box;
        width: auto;
        height: auto;
        min-width: 0;
        min-height: 52px;
        margin: 0;
        padding: .4rem .3rem;
        border: 1px solid hsl(var(--app-border-strong));
        border-radius: 11px;
        background: hsl(var(--app-surface));
        box-shadow: var(--sh-xs);
        color: hsl(var(--foreground));
        font-family: inherit;
        font-size: .7rem;
        font-weight: 600;
        line-height: 1.1;
        text-align: center;
        overflow: hidden;
        -webkit-tap-highlight-color: transparent;
    }

    .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act::after {
        content: attr(aria-label);
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Uzun erişilebilirlik etiketleri karoda kısa yazılır */
    .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act.act-copy::after { content: "Kopyala"; }
    .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act.act-wa-chat::after { content: "WhatsApp"; }
    .dt-container table.dataTable tbody td.dt-actions-cell .act-wa::after { content: "WhatsApp"; }
    .dt-container table.dataTable tbody td.dt-actions-cell .act-wa[data-kind="cari"]::after { content: "Cariye WA"; }
    .dt-container table.dataTable tbody td.dt-actions-cell .act-wa[data-kind="driver"]::after { content: "Şoföre WA"; }

    .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act:active,
    .dt-container table.dataTable tbody td.dt-actions-cell .act-wa:active {
        transform: scale(.97);
        background: hsl(var(--brand) / .09);
    }

    .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act.act-call { color: hsl(var(--brand-text)); }

    .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act.act-del {
        border-color: hsl(0 84% 60% / .4);
        background: hsl(0 84% 60% / .07);
        color: hsl(0 68% 46%);
    }

    html.dark .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act.act-del {
        color: hsl(0 90% 76%);
    }

    .dt-container table.dataTable tbody td.dt-actions-cell .act-wa {
        border-color: hsl(var(--success) / .4);
        background: hsl(var(--success) / .1);
        color: hsl(var(--success));
    }

    .dt-container table.dataTable tbody td.dt-actions-cell .act-group .act.is-disabled {
        opacity: .4;
    }

    /* Durum menüsü düğmesi (po-dd) kart içinde parmakla kolay basılır */
    .dt-container table.dataTable tbody td .po-dd-btn {
        min-height: 40px;
        padding-left: .8rem;
        padding-right: .75rem;
    }

    /* Hücre içi girdi (medya adı vb.) kalan alanı doldursun */
    .dt-container table.dataTable tbody td .uk-input {
        min-width: 0;
        width: 100%;
        text-align: left;
    }

    /* Boş / yükleniyor satırı */
    .dt-container table.dataTable tbody td.dt-empty {
        display: block;
        text-align: center;
        padding: 2rem 1rem;
    }

    .dt-container table.dataTable tbody td.dt-empty::before {
        content: none;
    }
}

/* ---------------------------------------------------------
   Tablo satır eylemleri: bölmeli ikon grubu (görüntüle / düzenle / pdf)
   --------------------------------------------------------- */
.act-group {
    display: inline-flex;
    align-items: stretch;
    box-sizing: border-box;
    height: 34px;
    vertical-align: middle;
    border: 1px solid hsl(var(--app-border-strong));
    border-radius: 9px;
    background: hsl(var(--app-surface));
    overflow: hidden;
    box-shadow: var(--sh-xs);
}

.act-group .act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    color: hsl(var(--muted-foreground));
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

.act-group .act + .act {
    border-left: 1px solid hsl(var(--app-border));
}

.act-group .act:hover,
.act-group .act:focus-visible {
    background: hsl(var(--brand) / .09);
    color: hsl(var(--brand-text));
    outline: none;
}

html.dark .act-group .act:hover {
    background: hsl(var(--brand) / .2);
}

/* Tablo eylem sütunu: en sağa yaslı, içeriği kadar dar */
table.uk-table td.dt-actions {
    text-align: right;
    white-space: nowrap;
    width: 1%;
}

/* Telefon yokken telefon butonları soluk ve tıklanamaz */
.act-group .act.is-disabled {
    opacity: .35;
    pointer-events: none;
}

/* Silme: grubun son hücresi; nötr durur, hover'da yumuşak kırmızıya döner */
.act-group button.act {
    border: 0;
    border-left: 1px solid hsl(var(--app-border));
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.act-group .act.act-del:hover,
.act-group .act.act-del:focus-visible {
    background: hsl(0 84% 60% / .12);
    color: hsl(0 68% 46%);
}

html.dark .act-group .act.act-del:hover {
    color: hsl(0 90% 76%);
}

/* Liste üstü tarih filtresi */
.tx-filter {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: .9rem;
}

.tx-filter .form-field {
    margin: 0;
}

/* Tabloda saat: tarihe göre ikincil */
.dt-time {
    font-size: .76em;
    color: hsl(var(--muted-foreground));
    opacity: .85;
    white-space: nowrap;
}

/* Sayısal sütun DataTables'ta otomatik sağa yaslanır; .col-left ile sola alınır. */
.dt-container table.dataTable th.col-left,
.dt-container table.dataTable td.col-left {
    text-align: left;
}

.dt-container table.dataTable th.col-left .dt-column-header {
    flex-direction: row;
    justify-content: flex-start;
}

/* Fiş / belge no: küçük, kenarlıklı, minimal etiket */
.doc-no {
    display: inline-block;
    padding: .04rem .35rem;
    border: 1px solid hsl(var(--app-border));
    border-radius: 5px;
    background: transparent;
    color: hsl(var(--muted-foreground));
    font-size: .64rem;
    font-weight: 400;
    letter-spacing: .01em;
    line-height: 1.5;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* Fiş no sütunu içeriği kadar dar: kalan genişlik diğer sütunlara */
table.dataTable td:has(> .doc-no) {
    width: 1%;
    white-space: nowrap;
}

/* Listelerde öne çıkan tutar: marka mavisi */
.amount-brand {
    color: hsl(var(--brand-text));
    font-variant-numeric: tabular-nums;
}

/* Satır içi WhatsApp: grubun dışında, en sağda tek başına yeşil kare buton */
.act-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    cursor: pointer;
    width: 34px;
    height: 34px;
    margin-left: .5rem;
    vertical-align: middle;
    border: 1px solid hsl(var(--success) / .35);
    border-radius: 9px;
    background: hsl(var(--success) / .1);
    color: hsl(var(--success));
    text-decoration: none;
    transition: background-color .14s ease, color .14s ease;
}

.act-wa:hover,
.act-wa:focus-visible {
    background: hsl(var(--success));
    color: #fff;
    outline: none;
}

/* Dokunmatik ekranlar (telefon/tablet): eylem butonları, durum menüsü ve sayfalama parmakla rahat basılır (≥ 40px).
   Dar ekranda (kart görünümü) eylemler ayrıca etiketli karolara dönüşür (bkz. "Mobil tablo / kart görünümü"). */
@media (pointer: coarse) {
    .act-group { height: 40px; }
    .act-group .act { width: 40px; height: 38px; }
    .act-wa { width: 40px; height: 40px; }
    .po-dd-btn { min-height: 38px; }
    .po-opt { min-height: 44px; }
    .dt-container .dt-paging .dt-paging-button { min-width: 2.6rem; height: 2.6rem; }
}

/* ---------------------------------------------------------
   WhatsApp mesaj önizlemesi (SweetAlert içinde)
   --------------------------------------------------------- */
.wa-popup .swal2-title { font-size: 1.05rem !important; padding-top: 1.1rem !important; }
.wa-popup .swal2-html-container { margin: .5rem 1.2rem .2rem !important; padding: 0 !important; }

.wa-prev {
    border: 1px solid #d9e2dc;
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    background: #fff;
}

.wa-head {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: .65rem .85rem;
    background: #075e54;
    color: #fff;
}

.wa-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-weight: 700;
}

.wa-who { min-width: 0; flex: 1 1 auto; }
.wa-name { font-weight: 600; font-size: .9rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wa-phone { font-size: .74rem; opacity: .8; }
.wa-badge { font-size: .66rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .5rem; border-radius: 999px; background: rgba(255, 255, 255, .16); }

.wa-chat {
    padding: 1rem .85rem 1.1rem;
    background-color: #efeae2;
    background-image: radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px);
    background-size: 14px 14px;
}

.wa-bubble {
    position: relative;
    margin-left: auto;
    max-width: 92%;
    padding: .55rem .7rem .3rem;
    border-radius: 10px 0 10px 10px;
    background: #d9fdd3;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .12);
    font-size: .86rem;
    line-height: 1.45;
    color: #111b21;
    white-space: pre-wrap;
    word-break: break-word;
}

.wa-bubble::after {
    content: '';
    position: absolute;
    top: 0;
    right: -7px;
    border-top: 8px solid #d9fdd3;
    border-right: 8px solid transparent;
    border-left: 0 solid transparent;
}

.wa-link { color: #027eb5; text-decoration: underline; word-break: break-all; }

.wa-time {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .25rem;
    margin-top: .1rem;
    font-size: .68rem;
    color: #667781;
}

.wa-note {
    padding: .6rem .85rem;
    font-size: .76rem;
    color: #6b6b80;
    background: #f7f8f7;
    border-top: 1px solid #e6ebe8;
}

/* Liste notu: küçük, sönük, tek satır (uzunsa üç nokta; tamamı title'da) */
/* Not hücresi: özet + altında "Notu göster" */
.note-cell {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .12rem;
}

.note-more {
    padding: 0;
    border: 0;
    background: none;
    color: hsl(var(--brand-text) / .63);
    font-size: .68rem;
    font-weight: 600;
    cursor: pointer;
}

.note-more:hover,
.note-more:focus-visible {
    text-decoration: underline;
    outline: none;
}

.note-pop {
    text-align: left;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    max-height: 50vh;
    overflow: auto;
    font-size: .9rem;
    line-height: 1.5;
    color: hsl(var(--foreground));
}

.dt-note {
    display: inline-block;
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: .76rem;
    color: hsl(var(--muted-foreground));
}

/* Bilgi fişi durum seçimi: seçili olan kendi rengine boyanır (turuncu / kırmızı) */
.uk-btn.st-btn.is-on {
    color: #fff;
    border-color: transparent;
    background-image: linear-gradient(180deg, hsl(0 0% 100% / .18), hsl(0 0% 0% / .08));
    box-shadow: var(--sh-xs), inset 0 1px 0 hsl(0 0% 100% / .26);
}

.uk-btn.st-btn.st-wait.is-on {
    background-color: hsl(var(--warning));
}

.uk-btn.st-btn.st-cancel.is-on {
    background-color: hsl(var(--danger));
}

/* Satış/alış formu üst satırı: cari, tarih/saat ve belge tipi sıkı, aynı hizada; açıklama alt satırda */
.doc-head-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem 2.25rem;
}

.doc-head-row > .doc-col-main {
    flex: 0 1 340px;
    min-width: 260px;
}

.doc-head-row > .doc-col-date {
    flex: 0 0 188px;
}

.doc-head-row > .doc-hint {
    flex: 1 0 100%;
    margin: -.1rem 0 0;
}

/* Cari arama kutusu sütunu tamamen doldursun; yoksa sağında boşluk kalıp aralık eşitsiz görünür */
.doc-head-row .doc-col-main .input-ico {
    flex: 1 1 auto;
    min-width: 0;
}

.doc-head-row .doc-col-main .input-ico > .uk-input {
    width: 100%;
}

/* Medya galerisi tablo hücreleri: küçük resim / uzantı rozeti, dosya adı, önizleme */
.m-thumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid hsl(var(--app-border));
    border-radius: 10px;
    background: hsl(var(--app-surface-2));
    transition: border-color .14s ease, transform .14s ease;
}

.m-thumb:hover,
.m-thumb:focus-visible {
    border-color: hsl(var(--brand));
    transform: translateY(-1px);
    outline: none;
}

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

.m-ext {
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: hsl(var(--muted-foreground));
}

.m-ext-pdf { background: hsl(0 84% 60% / .1); color: hsl(0 68% 46%); border-color: hsl(0 84% 60% / .25); }
.m-ext-doc, .m-ext-docx { background: hsl(215 90% 55% / .1); color: hsl(215 80% 42%); border-color: hsl(215 90% 55% / .25); }
.m-ext-xls, .m-ext-xlsx, .m-ext-csv { background: hsl(var(--success) / .1); color: hsl(var(--success)); border-color: hsl(var(--success) / .25); }

.m-name {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    font-size: .84rem;
}

.m-preview-img {
    max-width: 88vw !important;
    max-height: 72vh !important;
    object-fit: contain;
    border-radius: 8px;
}

/* Dosya görüntüleyici (medya popup) */
.mv-popup .swal2-title { font-size: 1rem; }
.mv-body { max-height: 66vh; overflow: auto; text-align: left; }
.mv-frame { display: block; width: 100%; height: 66vh; border: 0; border-radius: 8px; background: #fff; }
.mv-note { padding: .6rem .2rem; font-size: .8rem; color: hsl(var(--muted-foreground)); }
.mv-text { margin: 0; padding: .9rem 1rem; max-height: 66vh; overflow: auto; text-align: left; white-space: pre-wrap; overflow-wrap: anywhere;
    font: 13px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: hsl(var(--app-surface-2)); border-radius: 8px; }
.mv-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.mv-table th, .mv-table td { padding: .4rem .6rem; border: 1px solid hsl(var(--app-border)); text-align: left; white-space: nowrap; }
.mv-table th { position: sticky; top: 0; background: hsl(var(--app-surface-3)); font-weight: 700; }
.mv-tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .5rem; }
.mv-tabs button { padding: .25rem .7rem; border: 1px solid hsl(var(--app-border)); border-radius: 999px; background: transparent; font-size: .75rem; cursor: pointer; color: hsl(var(--muted-foreground)); }
.mv-tabs button.is-on { background: hsl(var(--brand) / .1); border-color: hsl(var(--brand) / .35); color: hsl(var(--brand-text)); font-weight: 600; }

/* SweetAlert 3D butonlar: .uk-btn-primary ile aynı derinlik dili, renk --c ile (.c-danger / .c-success) */
.swal2-actions button.swal-3d {
    --btn-top: hsl(0 0% 100% / .18);
    --btn-bot: hsl(0 0% 0% / .1);
    --btn-ring: hsl(0 0% 100% / .26);
    background-color: hsl(var(--c)) !important;
    background-image: linear-gradient(180deg, var(--btn-top) 0%, hsl(0 0% 100% / 0) 48%, var(--btn-bot) 100%) !important;
    border: 1px solid hsl(var(--c) / .9) !important;
    color: #fff !important;
    border-radius: var(--radius-sm) !important;
    font-family: var(--font-head) !important;
    font-weight: 600 !important;
    box-shadow: var(--sh-xs), inset 0 1px 0 var(--btn-ring) !important;
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}

.swal2-actions button.swal-3d.c-danger { --c: var(--danger); }
.swal2-actions button.swal-3d.c-success { --c: var(--success); }

.swal2-actions button.swal-3d:hover {
    --btn-top: hsl(0 0% 100% / .24);
    transform: translateY(-1px);
    filter: brightness(1.06) saturate(1.05);
    box-shadow: var(--sh-md), inset 0 1px 0 var(--btn-ring) !important;
}

.swal2-actions button.swal-3d:active {
    transform: translateY(0) scale(.985);
    filter: brightness(.95);
    box-shadow: var(--sh-xs), inset 0 2px 4px hsl(0 0% 0% / .24) !important;
}

.swal2-actions button.swal-3d:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring), inset 0 1px 0 var(--btn-ring) !important;
}

/* Görüntüleyici tam ekran: pencere tüm görünümü kaplar */
/* Yüzen paneller (hesap makinesi, KDV, kurlar: z-index 1200) üstünde de görünsün. */
.swal2-container { z-index: 2000 !important; }
.swal2-container:has(.mv-popup.mv-full) { padding: 0 !important; }

.swal2-popup.mv-popup.mv-full {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh;
    border-radius: 0;
}

.mv-popup.mv-full .mv-frame { height: calc(100vh - 150px); }
.mv-popup.mv-full .mv-body,
.mv-popup.mv-full .mv-text { max-height: calc(100vh - 150px); }
.mv-popup.mv-full .m-preview-img { max-width: 96vw !important; max-height: calc(100vh - 150px) !important; }

/* Görüntüleyici düğmelerinde ikon + yazı yan yana */
.mv-popup .swal2-actions button {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

/* Medya tablosu ad hücresi: ad ve altında sönük orijinal dosya adı (iki satır) */
.m-namecell {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.m-orig {
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .68rem;
    color: hsl(var(--muted-foreground));
}


/* ---------------------------------------------------------
   POS başlatma düğmesi (üst çubuk): koyu dolgu + giriş kartındaki gibi dönen
   gradyan çerçeve + sonsuz ışık süpürmesi.
   --------------------------------------------------------- */
@property --pos-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }

.pos-launch {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff !important;
    font-weight: 700;
    letter-spacing: .04em;
    border: 0;
    background-color: hsl(240 8% 14%);
    background-image: linear-gradient(135deg, hsl(240 4% 30%) 0%, hsl(240 6% 15%) 52%, hsl(240 10% 7%) 100%);
    box-shadow: inset 0 1px 0 hsl(0 0% 100% / .14), inset 0 0 0 1px hsl(0 0% 100% / .08);
}

.pos-launch:hover {
    background-image: linear-gradient(135deg, hsl(240 4% 38%) 0%, hsl(240 6% 19%) 52%, hsl(240 10% 9%) 100%);
}

/* Dönen gradyan çerçeve (login kartıyla aynı conic-gradient + maske tekniği) */
.pos-launch::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 2px;
    background: conic-gradient(from var(--pos-a), transparent 0 30%, hsl(238 100% 66%) 52%, hsl(280 90% 68%) 70%, hsl(330 90% 68%) 86%, hsl(0 0% 100% / .9) 95%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    animation: posLaunchSpin 3s linear infinite;
    pointer-events: none;
    z-index: 1;
}

/* Sonsuz ışık süpürmesi */
.pos-launch::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -60%;
    width: 38%;
    background: linear-gradient(100deg, transparent, hsl(0 0% 100% / .32), transparent);
    transform: skewX(-20deg);
    animation: posLaunchShine 2.6s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

.pos-launch > * {
    position: relative;
    z-index: 2;
}

@keyframes posLaunchSpin {
    to { --pos-a: 360deg; }
}

@keyframes posLaunchShine {
    0%, 45% { left: -60%; }
    100%    { left: 130%; }
}

/* Genel "hareketi azalt" kuralı (yukarıda) tüm animasyonları 1 kez/.001ms'e indiriyor;
   bu düğme bilerek süslü bir giriş noktası olduğu için o kuraldan muaf tutulur. */
@media (prefers-reduced-motion: reduce) {
    .pos-launch::before {
        animation-duration: 3s !important;
        animation-iteration-count: infinite !important;
    }

    .pos-launch::after {
        animation-duration: 2.6s !important;
        animation-iteration-count: infinite !important;
    }
}

/* İskonto alanı: giriş kutusunun solunda ₺ / % işareti */
.disc-unit {
    position: absolute;
    left: .75rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: .85rem;
    color: hsl(var(--muted-foreground));
    pointer-events: none;
}

/* ---------------------------------------------------------
   Ürün formu: pazaryeri kareleri
   --------------------------------------------------------- */
.mp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
}

.mp-tools {
    display: flex;
    align-items: center;
    gap: .9rem;
}

.mp-count {
    font-size: .76rem;
    font-weight: 600;
    padding: .18rem .6rem;
    border-radius: 999px;
    color: hsl(var(--muted-foreground));
    background: hsl(var(--app-surface-3));
}

.mp-count.has {
    color: hsl(var(--brand-text));
    background: hsl(var(--brand) / .1);
}

.mp-all {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    font-size: .8rem;
    line-height: 1;
    color: hsl(var(--muted-foreground));
    cursor: pointer;
}

/* Genel .switch'in margin-top: 4px'i anahtarı rozetten aşağı itiyordu. */
.mp-all input.switch {
    margin: 0;
}

.mp-all:hover {
    color: hsl(var(--brand-text));
}

.mp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(144px, 1fr));
    gap: .75rem;
    margin-top: 1rem;
}

.mp-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 1rem .5rem .85rem;
    border: 1px solid #e3e6ee;
    border-radius: var(--radius);
    background: #fff; /* logolar koyu mürekkepli: koyu temada da açık zemin */
    color: #1f2937;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background-color .15s ease, transform .12s ease;
}

.mp-tile:hover {
    border-color: #c6ccd9;
}

.mp-tile:active {
    transform: scale(.985);
}

/* Açık: pazaryeri renginde kenarlık + hafif renkli zemin + köşede onay işareti */
.mp-tile.is-on {
    border-color: var(--mp-to);
    background: color-mix(in srgb, var(--mp-to) 6%, #fff);
    box-shadow: 0 0 0 1px var(--mp-to);
}

.mp-tile.is-on::after {
    content: "";
    position: absolute;
    top: 8px;
    left: 8px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--mp-to) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 11px no-repeat;
}

.mp-badge {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-family: var(--font-head);
    font-weight: 800;
    letter-spacing: .01em;
    color: var(--mp-fg, #fff);
    background: linear-gradient(135deg, var(--mp-from), var(--mp-to));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35);
    filter: saturate(.45);
    opacity: .72;
    transition: filter .18s ease, opacity .18s ease;
}

.mp-tile:hover .mp-badge {
    filter: saturate(.8);
    opacity: .9;
}

.mp-tile.is-on .mp-badge,
.mp-badge-sm {
    filter: none;
    opacity: 1;
}

/* Kare içindeki yazı uzunluğuna göre punto (PAZARAMA gibi uzun adlar sığsın) */
.mp-l2 { font-size: 1.35rem; }
.mp-l3 { font-size: 1.1rem; }
.mp-l4 { font-size: .9rem; }
.mp-l6 { font-size: .68rem; }
.mp-l8 { font-size: .56rem; }

.mp-name {
    font-size: .8rem;
    font-weight: 600;
    color: #6b7280;
    text-align: center;
    line-height: 1.2;
}

.mp-tile.is-on .mp-name {
    color: #1f2937;
}

.mp-foot {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

/* Genel .switch'in `flex: 0 0 42px`'i dikey flex'te yüksekliği 42 px yapıyordu: açıkça sabitlenir. */
.mp-tile input.switch {
    flex: none;
    width: 42px;
    height: 24px;
    margin: 0;
}

.mp-state {
    min-width: 2.6rem;
    font-size: .72rem;
    font-weight: 600;
    color: #6b7280;
}

.mp-tile.is-on .mp-state {
    color: hsl(var(--success));
}

/* "Linkleri düzenle" düğmesi: yalnızca açık karede; rengi pazaryerinin rozetiyle aynı gradyan */
.mp-edit {
    display: none;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    width: 100%;
    margin-top: .1rem;
    padding: .4rem .35rem;
    border: 0;
    border-radius: var(--radius-xs);
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    color: var(--mp-fg, #fff);
    background: linear-gradient(135deg, var(--mp-from), var(--mp-to));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    cursor: pointer;
    transition: filter .15s ease, transform .12s ease;
}

.mp-tile.is-on .mp-edit {
    display: inline-flex;
}

.mp-edit:hover {
    filter: brightness(1.07) saturate(1.05);
}

.mp-edit:active {
    transform: scale(.97);
}

/* Link sayısı: logonun sağ üstünde kırmızı bildirim rozeti, hafif nabız */
.mp-badge-wrap {
    position: relative;
    display: inline-block;
    line-height: 0;
}

.mp-logo {
    display: grid;
    place-items: center;
    width: 116px;
    height: 60px;
    padding: 0 4px;
    filter: grayscale(1);
    opacity: .5;
    transition: filter .18s ease, opacity .18s ease;
}

.mp-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.mp-tile:hover .mp-logo {
    filter: grayscale(.4);
    opacity: .85;
}

.mp-tile.is-on .mp-logo {
    filter: none;
    opacity: 1;
}

.mp-m-logo {
    max-width: 120px;
    max-height: 38px;
    width: auto;
    height: auto;
    object-fit: contain;
    padding: .25rem .55rem;
    border-radius: 8px;
    background: #fff;
    border: 1px solid #e3e6ee;
}

.mp-m-logo[hidden] {
    display: none;
}

.mp-n {
    position: absolute;
    top: -7px;
    right: -9px;
    min-width: 21px;
    height: 21px;
    padding: 0 .35rem;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 2px solid #fff;
    font-family: var(--font-body);
    font-size: .68rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    background: hsl(var(--danger));
    animation: mpPulse 2.2s ease-out infinite;
}

.mp-n[hidden],
.mp-tile:not(.is-on) .mp-n {
    display: none; /* pazaryeri kapalıysa rozet de görünmez (linkler bellekte kalır) */
}

.mp-n.pop {
    animation: mpPop .35s cubic-bezier(.2, 1.4, .3, 1), mpPulse 2.2s ease-out .35s infinite;
}

@keyframes mpPulse {
    0%   { box-shadow: 0 0 0 0 hsl(var(--danger) / .5); }
    70%  { box-shadow: 0 0 0 7px hsl(var(--danger) / 0); }
    100% { box-shadow: 0 0 0 0 hsl(var(--danger) / 0); }
}

@keyframes mpPop {
    0%   { transform: scale(.4); }
    100% { transform: scale(1); }
}

/* Genel "hareketi azalt" kuralı tüm animasyonları durduruyor; bu küçük bildirim nabzı bilerek muaf. */
@media (prefers-reduced-motion: reduce) {
    .mp-n {
        animation: mpPulse 2.2s ease-out infinite !important;
    }
}

.mp-hidden {
    display: none;
}

/* Link düzenleme penceresi */
.mp-dialog {
    border-top: 4px solid var(--mp-to, hsl(var(--brand)));
}

.mp-modal-head {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.mp-modal-head .uk-modal-title {
    margin: 0;
    font-size: 1.05rem;
}

.mp-badge-sm {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    filter: none;
    opacity: 1;
}

.mp-badge-sm.mp-l2 { font-size: .9rem; }
.mp-badge-sm.mp-l3 { font-size: .74rem; }
.mp-badge-sm.mp-l4 { font-size: .6rem; }
.mp-badge-sm.mp-l6 { font-size: .46rem; }
.mp-badge-sm.mp-l8 { font-size: .38rem; }

.mp-rows {
    display: grid;
    gap: .85rem;
}

.mp-row {
    display: flex;
    align-items: stretch; /* silme düğmesi giriş kutusuyla aynı yükseklikte */
    gap: .6rem;
}

.mp-row .btn-sq {
    flex: 0 0 auto;
    width: 46px;
    height: auto;
    min-height: 0;
    padding: 0;
    align-self: stretch;
}

.mp-dialog .uk-modal-header {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid hsl(var(--app-border));
}

.mp-dialog .uk-modal-body {
    padding: 1.4rem 1.5rem;
}

.mp-dialog .uk-modal-footer {
    padding: 1rem 1.5rem;
    margin-top: 0;
}

.mp-dialog #mp-m-add {
    margin-top: 1.1rem;
}

/* Karede, switch ile "Linkleri düzenle" butonu arasındaki ayırıcı çizgi */
.mp-sep {
    display: none;
    width: 100%;
    margin: .2rem 0 .1rem;
    border: 0;
    border-top: 1px dashed #d5d9e4;
}

.mp-tile.is-on .mp-sep {
    display: block;
}

.mp-row .mp-input {
    flex: 1;
    min-width: 0;
}

/* Segmentli grup içindeki kare (ikonlu) butonlar: iç köşeler düz, yalnızca dış köşeler yuvarlak.
   `.uk-btn.btn-sq` kendi yarıçapını verdiği için grup kuralını ezer; burada geri alınır. */
.uk-btn-group > .uk-btn.btn-sq { border-radius: 0; }
.uk-btn-group > .uk-btn.btn-sq:first-child { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.uk-btn-group > .uk-btn.btn-sq:last-child { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }


/* ---------------------------------------------------------
   Özel tooltip (assets/js/app.js): yerel title balonunun yerine
   --------------------------------------------------------- */
.ui-tip {
    position: fixed;
    z-index: 100000;
    max-width: min(280px, calc(100vw - 16px));
    padding: .38rem .6rem;
    border-radius: 8px;
    background: hsl(240 10% 11%);
    color: hsl(0 0% 98%);
    font-size: .78rem;
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: .005em;
    box-shadow: 0 6px 18px hsl(240 20% 5% / .28), 0 0 0 1px hsl(0 0% 100% / .06) inset;
    pointer-events: none;
    opacity: 0;
    transform: translateY(3px) scale(.97);
    transition: opacity .12s ease, transform .12s ease;
    overflow-wrap: anywhere;
    white-space: pre-line; /* title içindeki satır sonları korunur */
}

.ui-tip.below { transform: translateY(-3px) scale(.97); }

.ui-tip.on { opacity: 1; transform: none; }

.ui-tip::after {
    content: "";
    position: absolute;
    left: var(--arrow-x, 50%);
    bottom: -4px;
    width: 8px;
    height: 8px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
    border-radius: 0 0 2px 0;
}

.ui-tip.below::after {
    bottom: auto;
    top: -4px;
    border-radius: 2px 0 0 0;
}

html.dark .ui-tip {
    background: hsl(240 6% 93%);
    color: hsl(240 10% 10%);
    box-shadow: 0 6px 18px hsl(0 0% 0% / .5);
}

/* Ürün görselleri / videoları yan yana: iki kart eşit yükseklikte, boş bırakma alanları kalan boşluğu doldurur */
@media (min-width: 900px) {
    .media-row { align-items: stretch; }
    .media-row > .app-card { display: flex; flex-direction: column; margin-bottom: 0; }
    .media-row > .app-card > .pg,
    .media-row > .app-card > .pv { flex: 1 1 auto; display: flex; flex-direction: column; }
    .media-row .pg-grid.is-empty,
    .media-row .pv-grid.is-empty { flex: 1 1 auto; display: flex; flex-direction: column; }
    .media-row .pg-grid.is-empty > .pg-drop,
    .media-row .pv-grid.is-empty > .pv-empty { flex: 1 1 auto; }
}

/* Ürün formu: iki sütun eşit yükseklikte; sağ sütunun son kartı (Ölçüler) kalan boşluğu doldurur */
@media (min-width: 900px) {
    .form-columns { align-items: stretch; }
    .form-columns > .app-card { margin-bottom: 0; }
    .form-column > #measure-card { flex: 1 1 auto; display: flex; flex-direction: column; }
    .form-column > #measure-card .m-grid { margin-bottom: 1.1rem; }
    .form-column > #measure-card .m-divider { margin: auto 0; }
    .form-column > #measure-card .m-divider + .m-sub { margin-top: 1.1rem; }
}

/* Form içi anahtar satırı: giriş alanlarıyla aynı yüzey (sol ikon + metin, sağda anahtar) */
.field-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: calc(var(--field-h, 2.65rem) + .35rem);
    padding: .4rem .8rem .4rem .72rem;
    cursor: pointer;
    background-color: var(--field-bg, hsl(var(--app-surface)));
    background-image: linear-gradient(180deg, var(--field-shade, hsl(var(--app-shadow) / .065)) 0%, hsl(0 0% 100% / 0) 26%);
    border: 1px solid var(--field-border, hsl(var(--app-border-strong)));
    border-radius: var(--field-radius, var(--radius-sm));
    box-shadow: inset 0 1px 3px var(--field-shade, hsl(var(--app-shadow) / .065)), 0 1px 0 var(--field-edge, hsl(0 0% 100% / .85));
    transition: border-color .15s ease, box-shadow .15s ease;
}

.field-switch:hover { border-color: hsl(var(--brand) / .45); }
.field-switch:focus-within { border-color: hsl(var(--brand)); box-shadow: var(--focus-ring, 0 0 0 3px hsl(var(--brand) / .18)); }

.field-switch > svg { flex: 0 0 auto; color: hsl(var(--brand-text)); transition: color .15s ease; }
.field-switch.is-off > svg { color: hsl(var(--muted-foreground)); }

.field-switch .fs-text { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
.field-switch .fs-text b { font-size: .9rem; font-weight: 600; color: hsl(var(--foreground)); }
.field-switch .fs-text small { font-size: .74rem; color: hsl(var(--muted-foreground)); }
.field-switch input.switch { flex: 0 0 auto; margin: 0; }

/* ---------------------------------------------------------
   Tüm pencereler (uk-modal) dikey olarak ortada açılır.
   - Gösterilirken ve kapanırken (inline display:block) esnek kutu olur; kapanış animasyonunda zıplama olmaz.
   - Diyalogta auto kenar boşluğu: içerik ekrandan uzunsa üstten başlar ve pencere kayar (üst kısım kesilmez).
   --------------------------------------------------------- */
.uk-modal.uk-open,
.uk-modal[style*="display: block"] {
    display: flex !important;
    flex-direction: column;
}

.uk-modal.uk-open > .uk-modal-dialog,
.uk-modal[style*="display: block"] > .uk-modal-dialog {
    margin: auto !important;
    flex: 0 0 auto;
}

/* Hava durumu kartı: göz önünde olmasın. Soluk ve daha az doygun durur, üzerine gelince canlanır. */
.wx-card {
    opacity: .55;
    filter: saturate(.55);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14);
    transition: opacity .25s ease, filter .25s ease, background .4s ease;
}

.wx-card:hover,
.wx-card:focus-within {
    opacity: 1;
    filter: none;
}

@media (hover: none) {
    .wx-card { opacity: .75; }
}

/* Hava durumu kartı: biraz daha görünür + hover'da yumuşak canlanma (kalkma, parlama, büyüme) */
.wx-card {
    opacity: .72;
    filter: saturate(.7);
    transform: translateY(0) scale(1);
    transition: opacity .35s ease, filter .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1),
                box-shadow .35s ease, background .4s ease;
}

.wx-card::before {
    transition: transform .6s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}

.wx-card:hover,
.wx-card:focus-within {
    opacity: 1;
    filter: none;
    transform: translateY(-2px) scale(1.015);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), 0 12px 24px -12px var(--wx-a);
}

/* Güneş / ay parıltısı hover'da büyür */
.wx-card:hover::before { transform: scale(1.35) translate(-6px, 4px); }

.wx-card .wx-ico { transition: transform .45s cubic-bezier(.34, 1.56, .64, 1); }
.wx-card:hover .wx-ico { transform: scale(1.12) rotate(-4deg); }

@media (hover: none) {
    .wx-card { opacity: .85; }
}

@media (prefers-reduced-motion: reduce) {
    .wx-card, .wx-card::before, .wx-card .wx-ico { transition: opacity .2s ease, filter .2s ease; }
    .wx-card:hover, .wx-card:hover::before, .wx-card:hover .wx-ico { transform: none; }
}

/* Hava durumu kartı: daha zengin hover — ışık süpürmesi, kayan degrade, yaylanarak kalkma, süzülen ikon */
.wx-card {
    background-size: 170% 170%;
    background-position: 0% 50%;
    transition: opacity .45s ease, filter .45s ease, transform .5s cubic-bezier(.22, 1.2, .36, 1),
                box-shadow .45s ease, background-position .9s cubic-bezier(.22, 1, .36, 1), background-color .4s ease;
}

/* Işık süpürmesi: kartın arkasında (yazının altında) çapraz bir parlama */
.wx-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(112deg, transparent 32%, rgb(255 255 255 / .34) 50%, transparent 68%);
    transform: translateX(-130%);
    transition: transform 1s cubic-bezier(.22, 1, .36, 1);
    pointer-events: none;
}

.wx-card:hover,
.wx-card:focus-within {
    background-position: 100% 50%;
    transform: translateY(-3px) scale(1.02);
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .32), inset 0 0 0 1px rgb(255 255 255 / .12), 0 16px 28px -14px var(--wx-a);
}

.wx-card:hover::after,
.wx-card:focus-within::after { transform: translateX(130%); }

/* İkon önce yaylanarak büyür, sonra yavaşça süzülür */
.wx-card:hover .wx-ico { animation: wxPop .55s cubic-bezier(.34, 1.56, .64, 1) both, wxFloat 2.8s .55s ease-in-out infinite; transform: none; }

@keyframes wxPop { from { transform: scale(1) rotate(0); } to { transform: scale(1.14) rotate(-5deg); } }
@keyframes wxFloat {
    0%, 100% { transform: scale(1.14) rotate(-5deg) translateY(0); }
    50% { transform: scale(1.14) rotate(-5deg) translateY(-2px); }
}

@media (prefers-reduced-motion: reduce) {
    .wx-card::after { display: none; }
    .wx-card:hover .wx-ico { animation: none; }
    .wx-card:hover { transform: none; }
}

/* Hava durumu kartı: işletim sistemi "animasyonları azalt" açıksa genel kural (yukarıda) TÜM geçişleri anında yapar.
   Kart yalnızca yumuşak renk/opaklık geçişleri kullandığından (kayma ve büyüme zaten kapalı) bu kartta geçişlere izin verilir. */
@media (prefers-reduced-motion: reduce) {
    .wx-card,
    .wx-card::before,
    .wx-card::after,
    .wx-card .wx-ico {
        transition-duration: .45s !important;
        transition-delay: 0s !important;
    }
}

/* İş Yönetimi menü rozeti: bugün/geçmiş tarihli açık iş sayısı */
.nav-badge { margin-left: auto; margin-right: .35rem; min-width: 20px; padding: 0 .4rem; border-radius: 999px; background: hsl(var(--danger)); color: #fff; font-size: .68rem; font-weight: 700; line-height: 18px; text-align: center; }
.nav-badge[hidden] { display: none; }
.nav-badge + .chev { margin-left: 0; }

/* Çok dar telefonlarda (≤430px) üst çubuk ikonları biraz daha sıkı: yatay kaydırma çıkmasın. */
@media (max-width: 430px) {
    .app-topbar > div:last-child {
        gap: .2rem;
    }

    .app-topbar > div:last-child .uk-btn-icon {
        width: 1.8rem;
        min-width: 1.8rem;
    }
}

/* =========================================================
   Mobil düzeltmeler (mobil-hata.md). Yalnızca dar / dokunmatik ekranı etkiler.
   ========================================================= */

/* A1/E4: iOS, 16 px altındaki alana odaklanınca sayfayı yakınlaştırır; dokunmatikte tüm metin alanları 16 px. */
@media (pointer: coarse) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="hidden"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* A2/A3: yan menü adres çubuğuyla birlikte küçülen yüksekliğe uysun (Çıkış görünür kalsın), satırlar 44 px,
   menü açıkken arka sayfa kaymasın. */
@media (max-width: 959px) {
    .app-sidebar {
        height: 100vh;
        height: 100dvh;
    }

    .app-nav a.nav-link,
    .app-nav details > summary,
    .app-nav .subnav a {
        min-height: 44px;
    }

    html:has(.app-shell.sidebar-open) {
        overflow: hidden;
    }
}

/* A4/A5: dar telefonda üst çubuk ikonları 44 px; sığmayanlar yatay kayar (sayfa yanlara taşmaz).
   row-reverse + order: görsel sıra aynı kalır, kaydırma sağdan (Hızlı İşlem / POS görünür) başlar. */
@media (max-width: 430px) {
    .app-topbar > div:last-child {
        flex: 1 1 auto;
        min-width: 0;
        flex-direction: row-reverse;
        justify-content: flex-start;
        gap: .2rem;
        padding: 2px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .app-topbar > div:last-child::-webkit-scrollbar {
        display: none;
    }

    .app-topbar > div:last-child > :nth-last-child(1) { order: 1; }
    .app-topbar > div:last-child > :nth-last-child(2) { order: 2; }
    .app-topbar > div:last-child > :nth-last-child(3) { order: 3; }
    .app-topbar > div:last-child > :nth-last-child(4) { order: 4; }
    .app-topbar > div:last-child > :nth-last-child(5) { order: 5; }
    .app-topbar > div:last-child > :nth-last-child(6) { order: 6; }
    .app-topbar > div:last-child > :nth-last-child(7) { order: 7; }
    .app-topbar > div:last-child > :nth-last-child(8) { order: 8; }

    .app-topbar > div:last-child .uk-btn {
        height: 44px;
        min-height: 44px;
    }

    .app-topbar > div:last-child .uk-btn-icon {
        width: 44px;
        min-width: 44px;
    }
}

/* B3: durum menüsü düğmesi dokunmatikte ≥ 44 px (liste kartında ve detayda) */
@media (pointer: coarse) {
    .po-dd-btn { min-height: 44px; }
}

@media (max-width: 767px) and (pointer: coarse) {
    .dt-container table.dataTable tbody td .po-dd-btn { min-height: 44px; }
}

/* A21: klavye kısayolu ipucu ("Esc ile kapat") dokunmatikte anlamsız */
@media (pointer: coarse) {
    .quick-drawer-foot {
        display: none;
    }

    /* G10: iş akışı süzgeç düğmeleri ≥ 44 px (görünümdeki satır içi stilden güçlü seçici) */
    .wk-flts .wk-flt {
        height: 44px;
    }
}

/* F13: giriş animasyonları telefonda art arda beklemesin (düğme ~1,7 sn sonra çıkıyordu) */
@media (max-width: 900px) {
    .auth-card > *,
    .auth-card .form-field,
    .auth-card form > .uk-btn {
        animation-delay: 0s !important;
    }
}

/* G12: tam ekran medya önizleme adres çubuğu değişince taşmasın (dvh destekleyen tarayıcıda) */
@supports (height: 100dvh) {
    .swal2-popup.mv-popup.mv-full {
        height: 100dvh;
    }

    .mv-popup.mv-full .mv-frame {
        height: calc(100dvh - 150px);
    }

    .mv-popup.mv-full .mv-body,
    .mv-popup.mv-full .mv-text {
        max-height: calc(100dvh - 150px);
    }

    .mv-popup.mv-full .m-preview-img {
        max-height: calc(100dvh - 150px) !important;
    }
}