captions
already render as headings (see §2) → left as-is.
(b) In-content FILTER bars (.nav-tabs WITHOUT .panel-heading — Gün/Hafta/Ay,
"En İyi 10/30/50", price ranges) → the switch look: an inset well whose
active option pops out as a raised surface badge (ds .ds-tabs--switch).
========================================================================== */
/* ---- (a) caption badge: single-tab title pill + domed icon disc ---- */
.ds-skin ul.nav-tabs.panel-heading:has(> li:only-child) {
position: relative; /* anchor the brand glyph (::after) over the disc */
align-items: center;
gap: 0;
padding: var(--ds-space-1-5) var(--ds-space-5) var(--ds-space-1-5) var(--ds-space-2);
}
/* domed surface disc — relief only; the glyph is the tinted ::after layer below */
.ds-skin ul.nav-tabs.panel-heading:has(> li:only-child)::before {
content: "";
flex-shrink: 0;
width: 34px;
height: 34px;
margin-right: var(--ds-space-2-5);
border-radius: var(--ds-radius-full);
background: var(--ds-surface);
box-shadow: var(--ds-shadow-neu-circle);
}
/* report glyph → brand hue (contrast-clamped --theme-color-ink so a pale tenant
colour stays legible). A mask lets CSS tint the SVG shape; centred over the
disc from its geometry: padding-left (space-2) + half the §17 32px disc. */
.ds-skin ul.nav-tabs.panel-heading:has(> li:only-child)::after {
content: "";
position: absolute;
left: calc(var(--ds-space-2) + 16px);
top: 50%;
transform: translate(-50%, -50%);
width: 17px;
height: 17px;
background-color: var(--theme-color-ink, var(--theme-color));
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='13' width='4' height='8' rx='1'/%3E%3Crect x='10' y='8' width='4' height='13' rx='1'/%3E%3Crect x='17' y='4' width='4' height='17' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23000'%3E%3Crect x='3' y='13' width='4' height='8' rx='1'/%3E%3Crect x='10' y='8' width='4' height='13' rx='1'/%3E%3Crect x='17' y='4' width='4' height='17' rx='1'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
}
.ds-skin ul.nav-tabs.panel-heading:has(> li:only-child) > li > a {
padding: var(--ds-space-1) var(--ds-space-1) var(--ds-space-1) 0;
font-family: var(--ds-font-caption); /* caption knob (default Inter); heading face (Satoshi) read too heavy/tight here */
font-size: var(--ds-text-h6);
font-weight: var(--ds-fw-semibold);
letter-spacing: var(--ds-ls-h5);
color: var(--ds-text-1);
}
/* it's a title, not a tab — drop the §3 underline marker */
.ds-skin ul.nav-tabs.panel-heading:has(> li:only-child) > li.active > a::after { display: none; }
/* ---- (b) → switch (inset well, active = raised surface badge): in-content FILTER
bars (.nav-tabs WITHOUT .panel-heading) AND multi-tab CAPTIONS (panel-heading
with 2+ tabs = a real view toggle, e.g. Ciro/Tahsilat, Satışlar/Siparişler).
Single-tab captions (the badge above) and the group-range branch picker
(a
, flattened by §14) are excluded. The multi-tab caption selectors
carry `.line-slide-tab` so the active rule out-ranks §3's
`.line-slide-tab .nav-tabs > li.active > a` (else the active tab would stay
transparent instead of popping out as a badge). ---- */
.ds-skin .nav-tabs:not(.panel-heading),
.ds-skin .line-slide-tab ul.nav-tabs.panel-heading:has(> li + li) {
gap: var(--ds-space-1);
padding: var(--ds-space-1); /* inner frame so the active badge floats in the well */
background: var(--ds-surface-sunken);
box-shadow: var(--ds-shadow-neu-inset);
}
.ds-skin .nav-tabs:not(.panel-heading) > li > a,
.ds-skin .line-slide-tab ul.nav-tabs.panel-heading:has(> li + li) > li > a {
border-radius: var(--ds-radius-pill);
padding: var(--ds-space-2) var(--ds-space-4);
}
.ds-skin .nav-tabs:not(.panel-heading) > li.active > a,
.ds-skin .nav-tabs:not(.panel-heading) > li.active > a:hover,
.ds-skin .nav-tabs:not(.panel-heading) > li.active > a:focus,
.ds-skin .line-slide-tab ul.nav-tabs.panel-heading:has(> li + li) > li.active > a,
.ds-skin .line-slide-tab ul.nav-tabs.panel-heading:has(> li + li) > li.active > a:hover,
.ds-skin .line-slide-tab ul.nav-tabs.panel-heading:has(> li + li) > li.active > a:focus {
background: var(--ds-surface);
color: var(--ds-text-1);
box-shadow: var(--ds-shadow-neu-sm);
}
/* the raised badge replaces the underline marker */
.ds-skin .nav-tabs:not(.panel-heading) > li.active > a::after,
.ds-skin .line-slide-tab ul.nav-tabs.panel-heading:has(> li + li) > li.active > a::after { display: none; }
/* ==========================================================================
17. UNIFIED CONTROL HEIGHT
--------------------------------------------------------------------------
One shared height for every interactive control so the report header reads
as a single tidy row (the branch dropdown previously sat ~5px taller than
the tabs next to it, which read as "fat"). Target = the caption badge height
minus 2px. Re-tune the whole set by editing --orbit-control-h alone.
Covered: caption badge (§16a) · pill tabs (§3) · switch tabs (§16b) ·
dropdown trigger (.ds-select-menu, via orbit-select.js) · native branch
select fallback (§14) · form inputs (§5) · search field (§11).
Box-sizing is border-box (Bootstrap), so `height` already includes padding.
========================================================================== */
.ds-skin { --orbit-control-h: 46px; } /* shared control height (was 52px) — one knob lifts every control below */
/* all tab bars are .nav-tabs → one rule lifts the short ones (pill, switch) */
.ds-skin .nav-tabs { min-height: var(--orbit-control-h); }
/* caption badge: pin to the shared height + shrink the disc 34→32 so the badge
lands 2px thinner than before (was ~46px) instead of staying the tallest */
.ds-skin ul.nav-tabs.panel-heading:has(> li:only-child) {
min-height: var(--orbit-control-h);
height: var(--orbit-control-h);
}
.ds-skin ul.nav-tabs.panel-heading:has(> li:only-child)::before {
width: 32px; height: 32px;
}
/* dropdown — the DS custom listbox trigger (orbit-select.js) */
.ds-skin .ds-select-menu__trigger {
height: var(--orbit-control-h);
padding-top: 0; padding-bottom: 0;
}
/* native branch select (no-JS fallback / before enhancement) */
.ds-skin select.egk-single-input {
height: var(--orbit-control-h) !important;
padding-top: 0 !important; padding-bottom: 0 !important;
}
/* form inputs / selects (not textareas — they grow vertically) */
.ds-skin input.form-control,
.ds-skin select.form-control,
.ds-skin .input-sm {
height: var(--orbit-control-h) !important;
}
/* search field (.cari-ara) — was 48px */
.ds-skin .cari-ara .txt-aranacak-ifade { height: var(--orbit-control-h); }
/* ==========================================================================
18. ACCENT POLICY — "brand-led" (user choice 2026-06-23)
--------------------------------------------------------------------------
In the monochrome neumorphic system the single colour knob is --ds-accent
(ink/black by default). "Brand-led" re-points it at the per-tenant
--theme-color so the hue marks every primary/active moment — and ALSO flips
the one state marker that ds.css carries with --ds-ink (the active tab
underline). Everything else (depth, structure, body text) stays ink.
▶ GLOBAL (rollout step 2): the accent tokens are defined on :root, NOT on a
wrapper. This is the ONE consolidated definition — it replaces the former
per-scope copies (orbit-skin §18 on .ds-skin AND orbit-navbar §0 on
.orbit-nav), which were identical. orbit-skin.css now loads app-wide, so
every Orbit scope (.ds / .ds-skin / .orbit-nav) plus any ds.css component
inherits these from :root. It stays INERT on legacy pages: nothing there
reads --ds-accent, so re-pointing it on :root has no visual effect until an
Orbit wrapper is present. Being UNLAYERED, this :root block out-ranks the
layered ds.css :root / [data-theme="dark"] token defaults regardless of order.
Re-pointing the accent tokens here cascades automatically into the rules that
already read them:
· primary CTA fill ........ §6 .egk-btn-primary / .btn-primary
· active page ............. §13 .paginate-button.current
· row hover / selection ... §4 table:hover / tr.selected (--ds-accent-subtle)
· dropdown hover, focus rings, search focus ... §7 / §5 / §11
· navbar CTA / open / glass-adjacent states ... orbit-navbar.css
--theme-color-fg / --theme-color-ink are the contrast-safe siblings derived
per-tenant by orbit-accent.js (text-on-fill, and a visible thin-mark hue).
Fallbacks keep it sane if that script is absent. KPI up/down deltas stay
SEMANTIC green/red (set in the partials) — never the brand hue.
Switch-style active tabs (§16b) keep their raised-surface DEPTH marker (a
strong active cue already); only the underline-style tabs take the hue.
--orbit-accent-soft vs --ds-accent-subtle — kept as TWO distinct roles (not
merged, by design):
· --ds-accent-subtle = translucent hover/selection WASH (mixes with
transparent so the surface/zebra underneath shows through).
· --orbit-accent-soft = OPAQUE gentle brand FILL for a selected/active
block (tuned to the DS alert backgrounds, ~8% hue over the surface;
16% in dark). Used by the navbar open state and, since the brand-wash
pass (live-tuned 2026-08-05), by the carved wells: Tier-2 caption chips
(§22), the stock-row qty inset and the no-image tile (§20). Reusable
app-wide.
========================================================================== */
:root {
--ds-accent: var(--theme-color);
--ds-accent-fg: var(--theme-color-fg, #ffffff);
--ds-accent-subtle: color-mix(in srgb, var(--theme-color) 12%, transparent);
/* focus ring — kept separate from --ds-accent-subtle (the wash) so it can be
harder/more visible than hover/selection without strengthening those */
--orbit-ring: color-mix(in srgb, var(--theme-color) 16%, transparent);
/* THE reusable opaque "subtle theme colour" fill (see header note) */
--orbit-accent-soft: color-mix(in srgb, var(--theme-color) 8%, var(--ds-surface));
}
[data-theme="dark"] {
--ds-accent-subtle: color-mix(in srgb, var(--theme-color) 22%, transparent);
--orbit-ring: color-mix(in srgb, var(--theme-color) 26%, transparent);
/* dark alert bg ≈ hue @ 16% over the canvas */
--orbit-accent-soft: color-mix(in srgb, var(--theme-color) 16%, var(--ds-surface));
}
/* active tab underline (§3 marker) → the brand hue, contrast-clamped so a pale
tenant colour stays visible as a 2px mark on the canvas */
.ds-skin .nav-tabs > li.active > a::after {
background: var(--theme-color-ink, var(--theme-color));
}
/* (polish 1) the DS select dropdown trigger hard-codes a GRAY focus/open ring
(rgba(0,0,0,.14)) in ds.css — re-route it through the accent so it reads brand,
matching the search/form fields (§11/§5). Covers focus AND the open state. */
.ds-skin .ds-select-menu__trigger:focus-visible,
.ds-skin .ds-select-menu.is-open .ds-select-menu__trigger {
box-shadow: var(--ds-shadow-neu), 0 0 0 3px var(--orbit-ring);
}
/* (polish 2) kill the black UA focus outline that flashed on the just-clicked
active switch/pill tab. Pointer selection (:focus, not :focus-visible) shows
nothing; keyboard navigation keeps a branded, visible ring. Order matters —
:focus-visible must follow :focus to win when both match. */
.ds-skin .nav-tabs > li > a:focus { outline: none; }
.ds-skin .nav-tabs > li > a:focus-visible {
outline: 2px solid var(--ds-accent);
outline-offset: 2px;
}
/* ==========================================================================
19. jQuery UI DATEPICKER → DS calendar look (.orbit-datepicker marker)
--------------------------------------------------------------------------
The Başlangıç/Bitiş Tarihi fields use jQuery UI's datepicker, whose popup
(#ui-datepicker-div) is appended to — OUTSIDE the .ds-skin scope (the
same escape noted for the autocomplete in §11). So instead of scoping under
.ds-skin, these rules gate on a MARKER class added to the widget in
OrderApprovePartial's init (beforeShow → inst.dpDiv.addClass('orbit-datepicker')).
Any datepicker WITHOUT the marker (other app pages) is untouched. Tokens live
on :root, so var(--ds-*) resolve fine on the body-appended popup, and dark mode
+ the brand accent apply for free. Mirrors the ds.css calendar (.ds-cal): raised
popover surface, domed circle nav, ghost→ink day discs, today-dot.
IMPORTANT — customize.css already FULLY skins this datepicker for a DARK panel
(the "Datepicker" block: bg #2B323B, white text, gray chevrons) with several
`!important`s. We are RE-skinning it LIGHT, so every override below must both
out-specify customize (the `.orbit-datepicker` prefix adds a class) AND carry
`!important` exactly where customize does — the day text colour
(.ui-state-default{color:#fff!important}), the yellow today highlight, and the
brand "selected" fill. Keep the nav buttons' inherited `position:relative` (from
customize) so the absolute chevron ::after centres in the circle. Modern-Chrome
only (matches the skin).
========================================================================== */
/* popover surface — mirrors .ds-datepicker__panel / .ds-cal--inline */
.orbit-datepicker.ui-datepicker {
width: auto;
padding: var(--ds-space-4);
margin-top: var(--ds-space-1);
background: var(--ds-surface-raised);
border: none;
border-radius: var(--ds-radius-card);
box-shadow: var(--ds-shadow-e4);
font-family: var(--ds-font-body);
font-size: var(--ds-text-body-sm);
}
/* header → flex row [prev] [title] [next] (DOM order is prev, next, title; flex
ignores customize's floats and `order` rearranges to nav | title | nav) */
.orbit-datepicker .ui-datepicker-header {
display: flex;
align-items: center;
gap: var(--ds-space-2);
height: auto;
margin: 0 0 var(--ds-space-3);
padding: 0;
background: transparent;
border: none;
}
.orbit-datepicker .ui-datepicker-title {
order: 1;
flex: 1;
margin: 0;
line-height: 1.2;
text-align: center;
}
/* title text spans (customize paints these white) */
.orbit-datepicker .ui-datepicker-month,
.orbit-datepicker .ui-datepicker-year {
color: var(--ds-text-1);
font-family: var(--ds-font-heading);
font-size: var(--ds-text-h6);
font-weight: var(--ds-fw-medium);
letter-spacing: var(--ds-ls-h5);
}
/* prev / next → domed circle buttons (mirror .ds-cal__nav). Keep customize's
position:relative + cursor; restyle the circle, kill the sprite glyph, and
redraw a centred CSS chevron (customize's was gray on the dark panel). */
.orbit-datepicker .ui-datepicker-prev,
.orbit-datepicker .ui-datepicker-next {
flex-shrink: 0;
width: 32px; height: 32px;
border-radius: var(--ds-radius-full);
background: var(--ds-surface);
box-shadow: var(--ds-shadow-neu-circle);
text-indent: 0;
overflow: visible;
transition: var(--ds-transition-base);
}
.orbit-datepicker .ui-datepicker-prev { order: 0; }
.orbit-datepicker .ui-datepicker-next { order: 2; }
.orbit-datepicker .ui-datepicker-prev:hover,
.orbit-datepicker .ui-datepicker-next:hover {
background: var(--ds-surface);
box-shadow: var(--ds-shadow-neu-hover);
transform: var(--ds-lift-hover);
}
.orbit-datepicker .ui-datepicker-prev:active,
.orbit-datepicker .ui-datepicker-next:active {
box-shadow: var(--ds-shadow-neu-pressed);
transform: none;
}
.orbit-datepicker .ui-datepicker-prev .ui-icon,
.orbit-datepicker .ui-datepicker-next .ui-icon { display: none; } /* hide the sprite + hidden text */
/* CSS chevron, centred in the circle (fully overrides customize's :after) */
.orbit-datepicker .ui-datepicker-prev::after,
.orbit-datepicker .ui-datepicker-next::after {
content: "";
position: absolute;
top: 50%; left: 50%;
width: 7px; height: 7px;
margin: 0;
border: solid var(--ds-text-1);
pointer-events: none;
}
.orbit-datepicker .ui-datepicker-prev::after { border-width: 0 0 2px 2px; transform: translate(-40%, -50%) rotate(45deg); } /* "<" */
.orbit-datepicker .ui-datepicker-next::after { border-width: 2px 2px 0 0; transform: translate(-60%, -50%) rotate(45deg); } /* ">" */
/* weekday header row (customize colours the inner , so override the span) */
.orbit-datepicker table.ui-datepicker-calendar {
width: 100%;
margin: 0;
border-collapse: collapse;
}
.orbit-datepicker .ui-datepicker-calendar thead th { border: none; }
.orbit-datepicker .ui-datepicker-calendar thead th span {
color: var(--ds-text-3);
font-size: 11px;
font-weight: var(--ds-fw-medium);
text-transform: uppercase;
letter-spacing: var(--ds-ls-eyebrow);
}
/* day cells — each day == a ghost button with a hover/selected disc (.ds-cal__day) */
.orbit-datepicker .ui-datepicker-calendar td {
padding: 1px;
border: none;
text-align: center;
background: transparent;
}
.orbit-datepicker .ui-datepicker-calendar td a,
.orbit-datepicker .ui-datepicker-calendar td span {
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px; height: 38px;
margin: 0 auto;
padding: 0;
border: none;
border-radius: var(--ds-radius-full);
background: transparent;
color: var(--ds-text-1) !important; /* beat customize .ui-state-default { color:#fff !important } */
font-size: var(--ds-text-body-sm);
font-variant-numeric: tabular-nums;
line-height: 1;
text-decoration: none;
}
.orbit-datepicker .ui-datepicker-calendar td a {
cursor: pointer;
transition: color var(--ds-duration-fast) var(--ds-ease-out);
}
.orbit-datepicker .ui-datepicker-calendar td a::before {
content: "";
position: absolute; inset: 0; margin: auto;
width: 34px; height: 34px; z-index: -1;
border-radius: var(--ds-radius-full);
background: transparent;
transition: background var(--ds-duration-fast) var(--ds-ease-out),
box-shadow var(--ds-duration-base) var(--ds-ease-spring);
}
.orbit-datepicker .ui-datepicker-calendar td a:hover::before { background: var(--ds-accent-subtle); }
/* other-month / disabled days → muted (jQuery UI renders these as ) */
.orbit-datepicker .ui-datepicker-other-month span,
.orbit-datepicker .ui-datepicker-unselectable span { color: var(--ds-ink-disabled) !important; }
/* today — the underline-DOT motif (matches .ds-cal__day--today; ink, not the
customize yellow highlight) */
.orbit-datepicker .ui-datepicker-calendar td a.ui-state-highlight {
background: transparent !important; /* beat customize #fffa90 !important */
color: var(--ds-text-1) !important; /* beat customize #777620 !important */
}
.orbit-datepicker .ui-datepicker-today a::after {
content: "";
position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%);
width: 4px; height: 4px; border-radius: var(--ds-radius-full);
background: var(--ds-ink);
}
/* selected (.ui-state-active) — the established active fill: ink disc + dark shadow */
.orbit-datepicker .ui-datepicker-calendar td a.ui-state-active {
background: transparent !important; /* beat customize background: var(--theme-color) !important */
color: var(--ds-on-ink) !important;
}
.orbit-datepicker .ui-datepicker-calendar td a.ui-state-active::before {
background: var(--ds-ink);
box-shadow: var(--ds-shadow-dark-button);
}
.orbit-datepicker .ui-datepicker-today a.ui-state-active::after { background: var(--ds-on-ink); }
/* ==========================================================================
20. STOCK LIST (/stok-listesi-tum/stok-listesi — AppUser/Cari StockList)
--------------------------------------------------------------------------
The catalog page: a two-column .row (filter sidebar + product grid). Product
cards (.urun-row) come from ERP/ListePaged.cshtml via AJAX (styled by
urun-listesi.css); the toolbar, noUiSlider price slider, custom pagination
and filter checkboxes are page-specific widgets NOT covered by §0-19. All
rules are SCOPED to the stock-list custom classes, so they can't reach any
other .ds-skin page. Some legacy rules use IDs (e.g. `.stok-listesi-filters
#ddlSort` = 1,1,0), so these add `.ds-skin` to out-rank them (1,2,0).
========================================================================== */
/* ---- product card → raised neumorphic surface (was white #fff + flat shadow,
urun-listesi.css §.urun-row). Wins via the extra .ds-skin class. ---- */
.ds-skin .urun-row {
background: var(--ds-surface) !important;
border: none !important;
border-radius: var(--ds-radius-lg) !important;
box-shadow: var(--ds-shadow-neu-sm) !important;
transition: box-shadow var(--ds-duration-base) var(--ds-ease-spring),
transform var(--ds-duration-moderate) var(--ds-ease-spring);
}
.ds-skin .urun-row:hover { box-shadow: var(--ds-shadow-neu-hover) !important; }
/* soften the hard #f0f0f0 column dividers (list view) to the DS hairline */
.ds-skin .urun-row > .stok-adet,
.ds-skin .urun-row > .urun-fiyat,
.ds-skin .urun-row > .sepete-ekle { border-left-color: var(--ds-border-hairline) !important; }
.ds-skin .urun-row .stok-kodu { color: var(--ds-text-3); }
/* ---- PRODUCT CARD POLISH — the metadata tags, the stock-quantity figure and the
package-ratio chip now use the real DS BADGE component directly in the markup
(ERP/ListePaged.cshtml): ds-badge--surface --sm for the code tags + ratio
chip, ds-badge--success / --error / --warning for the stock state. No skin
override is needed for those — the component carries the look. We only widen
the tag row's gap (the legacy .egk-label sat at a 2px gap). ---- */
.ds-skin .ozellik-tablosu-tip2 { gap: var(--ds-space-1-5); margin-top: var(--ds-space-1); }
/* ---- STOCK BADGES (.stock-amount = on-hand qty · .paket-icerik = pack ratio):
a leading FA glyph, centered icon+figure, and vertical breathing. The badges
are real ds-badge (inline-flex + gap + align-items:center) and stretch to the
column width, so the ::before glyph drops in as a centered leading icon and
justify-content:center pulls the icon+figure to the middle (they read left-
aligned today). The glyph is CONSTANT per badge type → presentational, so it
lives in CSS, not the 13 stock-level Razor branches in ListePaged.cshtml. ---- */
.ds-skin .urun-row > .stok-adet { min-width: 140px; } /* widen so figure+icon stay on one line (was 110px) */
.ds-skin .stok-adet { gap: var(--ds-space-2); } /* breathe between the two stacked badges */
.ds-skin .stok-adet .stock-amount,
.ds-skin .stok-adet .paket-icerik {
justify-content: center; /* centre icon + figure as a group */
white-space: nowrap; /* the leading icon must not push the figure onto a 2nd line */
font-variant-numeric: tabular-nums;
}
.ds-skin .stok-adet .stock-amount { padding: var(--ds-space-2) var(--ds-space-3); } /* taller than the default badge */
.ds-skin .stok-adet .paket-icerik { padding: var(--ds-space-1-5) var(--ds-space-2-5); } /* taller than --sm */
/* leading glyphs — FA6 Pro Light via ::before (it's a flex item, so the badge's gap
+ align-items:center place and centre it for free). dolly = on-hand stock; open
box = package content. Skip the blocked-stock state (a status, not a quantity). */
.ds-skin .stok-adet .stock-amount:not(.stokta-var-yok)::before,
.ds-skin .stok-adet .paket-icerik::before {
font-family: "Font Awesome 6 Pro";
font-weight: 300;
font-style: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
opacity: .85;
}
.ds-skin .stok-adet .stock-amount:not(.stokta-var-yok)::before { content: "\f472"; } /* fa-dolly */
.ds-skin .stok-adet .paket-icerik::before { content: "\f49e"; font-size: .95em; } /* fa-box-open */
/* price block (table.fiyat-tablosu = label | value | unit) → 3 tidy columns:
muted labels, tabular figures, the buyer's "Size Özel Fiyat" emphasised. */
.ds-skin .urun-fiyat .fiyat-tablosu td { padding: 1px 6px !important; vertical-align: baseline; font-variant-numeric: tabular-nums; }
.ds-skin .urun-fiyat .fiyat-tablosu td:first-child { color: var(--ds-text-3); }
.ds-skin .urun-fiyat .size-ozel-fiyat { color: var(--ds-text-1); font-weight: var(--ds-fw-semibold); }
.ds-skin .urun-fiyat .kdv { color: var(--ds-text-3); }
/* the add-to-cart is the single brand action → full radius (was .rounded-bottom,
top corners square — read as a clipped strip). */
.ds-skin .sepete-ekle .egk-btn-primary.rounded-bottom { border-radius: var(--ds-radius-btn) !important; }
/* collapse the announcement carousel (.Duyuru1) when it has NO slides — it
otherwise renders as a ~300px white void above the list. Reappears
automatically when a tenant actually has banner images. */
.ds-skin .Duyuru1:not(:has(img)) { display: none !important; }
/* ---- toolbar (.stok-listesi-filters): search field + sort select. The legacy
rules carry IDs, so we add .ds-skin to win (1,2,0 > 1,1,0). ---- */
.ds-skin .stok-listesi-filters #searchInput {
background: var(--ds-surface) !important;
border: none !important;
border-radius: var(--ds-radius-md) !important;
box-shadow: var(--ds-shadow-neu-sm) !important;
height: var(--orbit-control-h) !important;
padding: 0 44px 0 48px !important; /* clear the leading disc (L) + the × (R) — matches .cari-ara §11 */
color: var(--ds-text-1) !important;
}
.ds-skin .stok-listesi-filters #searchInput:focus {
box-shadow: var(--ds-shadow-neu-sm), 0 0 0 3px var(--orbit-ring) !important;
outline: none;
}
/* magnifier → raised domed disc on the LEFT (mirrors .cari-ara .btn-ikon §11), so
the stok search reads identically to the cari search box. Stays clickable — the
cari disc is decorative (pointer-events:none); this one may trigger search — so
no pointer-events reset. */
.ds-skin .stok-listesi-filters #input-groups-btn {
position: absolute;
left: var(--ds-space-2);
right: auto !important;
top: 50% !important;
transform: translateY(-50%);
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px !important;
padding: 0 !important;
border: none !important;
border-radius: var(--ds-radius-full) !important;
background: var(--ds-surface) !important;
box-shadow: var(--ds-shadow-neu-circle) !important;
color: var(--theme-color-ink, var(--theme-color)) !important; /* brand glyph on the disc */
}
.ds-skin .stok-listesi-filters #input-groups-btn i { color: inherit !important; }
/* clear (×) → right-edge quiet ghost (was production red at right:54px, tucked left
of the old right-side magnifier). Mirrors .cari-ara .btn-temizle §11. */
.ds-skin .stok-listesi-filters .clear-search {
right: var(--ds-space-2) !important;
left: auto;
top: 50% !important;
transform: translateY(-50%);
}
.ds-skin .stok-listesi-filters .clear-search i { color: var(--ds-text-3) !important; }
.ds-skin .stok-listesi-filters #ddlSort {
background-color: var(--ds-surface) !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right var(--ds-space-4) center !important;
border: none !important;
border-radius: var(--ds-radius-md) !important;
box-shadow: var(--ds-shadow-neu-sm) !important;
height: var(--orbit-control-h) !important;
padding: 0 calc(var(--ds-space-4) + 22px) 0 var(--ds-space-4) !important;
color: var(--ds-text-1) !important;
-webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important;
}
[data-theme="dark"] .ds-skin .stok-listesi-filters #ddlSort {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-opacity='.6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}
/* the three icon actions (barcode / hide-price / grid-view) now use the real DS
component: