/* ============================================================ Design System — Utilities (UIkit-inspired, density-aware) Spacing utilities read --nv-space-* (density-aware), so margins, paddings and gaps rescale with . Naming: nv- prefix. Numeric spacing scale 0..8 maps to the density-aware unit. Fractional widths like UIkit (nv-w-1-2). Bağımlılık: tokens/base.css ============================================================ */ /* ── Display ────────────────────────────────────────────────── */ .nv-block{display:block} .nv-inline-block{display:inline-block} .nv-inline{display:inline} .nv-hidden{display:none} .nv-flex{display:flex} .nv-inline-flex{display:inline-flex} .nv-grid{display:grid} /* ── Flex ───────────────────────────────────────────────────── */ .nv-flex-row{flex-direction:row} .nv-flex-col{flex-direction:column} .nv-flex-wrap{flex-wrap:wrap} .nv-flex-nowrap{flex-wrap:nowrap} .nv-flex-1{flex:1 1 0%} .nv-flex-auto{flex:1 1 auto} .nv-flex-none{flex:none} .nv-shrink-0{flex-shrink:0} .nv-grow{flex-grow:1} /* ── Align / Justify ────────────────────────────────────────── */ .nv-items-start{align-items:flex-start} .nv-items-center{align-items:center} .nv-items-end{align-items:flex-end} .nv-items-stretch{align-items:stretch} .nv-items-baseline{align-items:baseline} .nv-justify-start{justify-content:flex-start} .nv-justify-center{justify-content:center} .nv-justify-end{justify-content:flex-end} .nv-justify-between{justify-content:space-between} .nv-justify-around{justify-content:space-around} .nv-self-start{align-self:flex-start} .nv-self-center{align-self:center} .nv-self-end{align-self:flex-end} /* ── Gap (density-aware) ────────────────────────────────────── */ .nv-gap-0{gap:0} .nv-gap-1{gap:var(--nv-space-1)} .nv-gap-2{gap:var(--nv-space-2)} .nv-gap-3{gap:var(--nv-space-3)} .nv-gap-4{gap:var(--nv-space-4)} .nv-gap-6{gap:var(--nv-space-6)} .nv-gap-8{gap:var(--nv-space-8)} /* legacy aliases */ .nv-gap-sm{gap:var(--nv-space-2)} .nv-gap-md{gap:var(--nv-space-4)} .nv-gap-lg{gap:var(--nv-space-6)} /* ── Margin (density-aware) ─────────────────────────────────── */ .nv-m-0{margin:0} .nv-m-1{margin:var(--nv-space-1)}.nv-m-2{margin:var(--nv-space-2)}.nv-m-3{margin:var(--nv-space-3)}.nv-m-4{margin:var(--nv-space-4)}.nv-m-6{margin:var(--nv-space-6)}.nv-m-8{margin:var(--nv-space-8)} .nv-mx-auto{margin-left:auto;margin-right:auto} .nv-mt-0{margin-top:0}.nv-mt-1{margin-top:var(--nv-space-1)}.nv-mt-2{margin-top:var(--nv-space-2)}.nv-mt-3{margin-top:var(--nv-space-3)}.nv-mt-4{margin-top:var(--nv-space-4)}.nv-mt-6{margin-top:var(--nv-space-6)}.nv-mt-8{margin-top:var(--nv-space-8)} .nv-mb-0{margin-bottom:0}.nv-mb-1{margin-bottom:var(--nv-space-1)}.nv-mb-2{margin-bottom:var(--nv-space-2)}.nv-mb-3{margin-bottom:var(--nv-space-3)}.nv-mb-4{margin-bottom:var(--nv-space-4)}.nv-mb-6{margin-bottom:var(--nv-space-6)}.nv-mb-8{margin-bottom:var(--nv-space-8)} .nv-ml-1{margin-left:var(--nv-space-1)}.nv-ml-2{margin-left:var(--nv-space-2)}.nv-ml-3{margin-left:var(--nv-space-3)}.nv-ml-4{margin-left:var(--nv-space-4)} .nv-mr-1{margin-right:var(--nv-space-1)}.nv-mr-2{margin-right:var(--nv-space-2)}.nv-mr-3{margin-right:var(--nv-space-3)}.nv-mr-4{margin-right:var(--nv-space-4)} .nv-my-0{margin-top:0;margin-bottom:0} .nv-mx-0{margin-left:0;margin-right:0} /* ── Padding (density-aware) ────────────────────────────────── */ .nv-p-0{padding:0} .nv-p-1{padding:var(--nv-space-1)}.nv-p-2{padding:var(--nv-space-2)}.nv-p-3{padding:var(--nv-space-3)}.nv-p-4{padding:var(--nv-space-4)}.nv-p-6{padding:var(--nv-space-6)}.nv-p-8{padding:var(--nv-space-8)} .nv-px-2{padding-left:var(--nv-space-2);padding-right:var(--nv-space-2)}.nv-px-3{padding-left:var(--nv-space-3);padding-right:var(--nv-space-3)}.nv-px-4{padding-left:var(--nv-space-4);padding-right:var(--nv-space-4)} .nv-py-1{padding-top:var(--nv-space-1);padding-bottom:var(--nv-space-1)}.nv-py-2{padding-top:var(--nv-space-2);padding-bottom:var(--nv-space-2)}.nv-py-3{padding-top:var(--nv-space-3);padding-bottom:var(--nv-space-3)}.nv-py-4{padding-top:var(--nv-space-4);padding-bottom:var(--nv-space-4)} /* ── Grid ─────────────────────────────────────────────────────── İki mod: 1) Fixed columns — .nv-grid + .nv-cols-N (CSS grid, sabit kolon) 2) Child-width — .nv-grid + çocuklara .nv-child-1-N (UIkit-style, flex wrap, gap-aware). Container bir child-width çocuğu görünce :has() ile otomatik flex'e geçer. Gap density-aware (--nv-grid-gap → --nv-space-*). Collapse = gap:0. ────────────────────────────────────────────────────────────── */ .nv-grid{display:grid;gap:var(--nv-space-4);--nv-grid-gap:var(--nv-space-4)} .nv-cols-1{grid-template-columns:repeat(1,1fr)} .nv-cols-2{grid-template-columns:repeat(2,1fr)} .nv-cols-3{grid-template-columns:repeat(3,1fr)} .nv-cols-4{grid-template-columns:repeat(4,1fr)} .nv-cols-5{grid-template-columns:repeat(5,1fr)} .nv-cols-6{grid-template-columns:repeat(6,1fr)} .nv-cols-12{grid-template-columns:repeat(12,1fr)} .nv-grid-auto{grid-template-columns:repeat(auto-fill,minmax(var(--nv-col-min,220px),1fr))} /* Gap sizes (her iki mod) */ .nv-grid-sm{gap:var(--nv-space-2);--nv-grid-gap:var(--nv-space-2)} .nv-grid-lg{gap:var(--nv-space-6);--nv-grid-gap:var(--nv-space-6)} .nv-grid-collapse{gap:0;--nv-grid-gap:0px} /* Child-width mode — container flex'e geçer, gap-aware genişlik */ .nv-grid:has(> [class*="nv-child-"]){display:flex;flex-wrap:wrap;gap:var(--nv-grid-gap)} .nv-child-1-1{width:100%} .nv-child-1-2{width:calc((100% - 1 * var(--nv-grid-gap)) / 2)} .nv-child-1-3{width:calc((100% - 2 * var(--nv-grid-gap)) / 3)} .nv-child-1-4{width:calc((100% - 3 * var(--nv-grid-gap)) / 4)} .nv-child-1-5{width:calc((100% - 4 * var(--nv-grid-gap)) / 5)} .nv-child-1-6{width:calc((100% - 5 * var(--nv-grid-gap)) / 6)} .nv-child-auto{width:auto;flex:0 0 auto} .nv-child-expand{flex:1 1 0;min-width:0} /* Responsive child-width: mobilde full-width, >=769px'te kesir */ .nv-child-md-1-1,.nv-child-md-1-2,.nv-child-md-1-3,.nv-child-md-1-4,.nv-child-md-1-5,.nv-child-md-1-6{width:100%} @media(min-width:769px){ .nv-child-md-1-2{width:calc((100% - 1 * var(--nv-grid-gap)) / 2)} .nv-child-md-1-3{width:calc((100% - 2 * var(--nv-grid-gap)) / 3)} .nv-child-md-1-4{width:calc((100% - 3 * var(--nv-grid-gap)) / 4)} .nv-child-md-1-5{width:calc((100% - 4 * var(--nv-grid-gap)) / 5)} .nv-child-md-1-6{width:calc((100% - 5 * var(--nv-grid-gap)) / 6)} } @media(max-width:768px){ .nv-cols-2,.nv-cols-3,.nv-cols-4,.nv-cols-5,.nv-cols-6{grid-template-columns:1fr} .nv-cols-md-2{grid-template-columns:repeat(2,1fr)} } /* ── Width ──────────────────────────────────────────────────── */ .nv-w-auto{width:auto} .nv-w-full{width:100%} .nv-w-1-2{width:50%} .nv-w-1-3{width:33.333%} .nv-w-2-3{width:66.667%} .nv-w-1-4{width:25%} .nv-w-3-4{width:75%} .nv-max-w-sm{max-width:24rem} .nv-max-w-md{max-width:36rem} .nv-max-w-lg{max-width:48rem} .nv-min-w-0{min-width:0} /* ── Position ───────────────────────────────────────────────── */ .nv-relative{position:relative} .nv-absolute{position:absolute} .nv-fixed{position:fixed} .nv-sticky{position:sticky} .nv-inset-0{top:0;right:0;bottom:0;left:0} .nv-top-0{top:0}.nv-right-0{right:0}.nv-bottom-0{bottom:0}.nv-left-0{left:0} .nv-z-dropdown{z-index:300} .nv-z-modal{z-index:400} .nv-z-toast{z-index:500} /* ── Text color / typography ────────────────────────────────── */ .nv-text-fg{color:var(--foreground)} .nv-text-muted{color:var(--muted-foreground)} .nv-text-primary{color:var(--primary)} .nv-text-success{color:var(--success)} .nv-text-warning{color:color-mix(in oklch,var(--warning) 70%,var(--foreground))} .nv-text-danger{color:var(--danger)} .nv-text-info{color:var(--info)} .nv-text-accent{color:var(--accent)} .nv-text-left{text-align:left}.nv-text-center{text-align:center}.nv-text-right{text-align:right} .nv-text-xs{font-size:calc(0.6875rem * var(--font-scale))} .nv-text-sm{font-size:calc(0.8125rem * var(--font-scale))} .nv-text-base{font-size:calc(0.875rem * var(--font-scale))} .nv-text-lg{font-size:calc(1rem * var(--font-scale))} .nv-font-mono{font-family:var(--font-mono)} .nv-font-medium{font-weight:500}.nv-font-semibold{font-weight:600}.nv-font-bold{font-weight:700} .nv-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nv-nowrap{white-space:nowrap} .nv-leading-relaxed{line-height:1.6} /* ── Surface tint / opacity ─────────────────────────────────── */ .nv-tint-primary{background:color-mix(in oklch,var(--primary) 8%,transparent)} .nv-tint-success{background:color-mix(in oklch,var(--success) 8%,transparent)} .nv-tint-warning{background:color-mix(in oklch,var(--warning) 8%,transparent)} .nv-tint-danger{background:color-mix(in oklch,var(--danger) 8%,transparent)} .nv-tint-info{background:color-mix(in oklch,var(--info) 8%,transparent)} .nv-tint-muted{background:var(--muted)} .nv-op-60{opacity:.6}.nv-op-80{opacity:.8} /* ── Border / radius helpers ────────────────────────────────── */ .nv-border{border:1px solid var(--border)} .nv-border-t{border-top:1px solid var(--border)} .nv-border-b{border-bottom:1px solid var(--border)} .nv-rounded{border-radius:var(--radius)} .nv-rounded-sm{border-radius:var(--radius-sm)} .nv-rounded-lg{border-radius:var(--radius-lg)} .nv-rounded-full{border-radius:var(--radius-full)} /* ── Visibility (responsive) ────────────────────────────────── */ .nv-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:768px){.nv-hidden-md-down{display:none}} @media(min-width:769px){.nv-visible-md-up{display:none}}