/* AIAsist V3 — Light / Enterprise Koyu temanın tersine çevrilmesi değil, ayrı bir görsel dil: inci beyazı zemin, ince çerçeveli yarı saydam yüzeyler, katmanlı ama sakin derinlik, doygun ve kontrollü vurgu renkleri. Yerleşim (grid, kırılım noktaları, mobil düzen) styles.css ile ortaktır; bu dosya yalnızca renk, yüzey, gölge ve tipografiyi değiştirir. Boyut/aralık ayarları yalnızca masaüstü medya sorgularının içindedir; mobil kuralları ezmez. */ :root[data-theme="light"] { --bg-0: #f5f6fa; --ink: #0d1530; --ink-2: #3a4566; --ink-3: #6a7493; --blue: #2f6bff; --cyan: #0ea5e9; --violet: #7c5cff; --magenta: #c026d3; --mint: #10b981; --focus: #2f6bff; --stroke: rgba(16, 28, 72, .08); --stroke-2: rgba(16, 28, 72, .15); --surface: rgba(255, 255, 255, .72); --surface-2: rgba(246, 248, 253, .9); --well: rgba(16, 28, 72, .035); --well-2: rgba(16, 28, 72, .06); --brand-grad: linear-gradient(135deg, #0ea5e9, #2f6bff 50%, #7c5cff); --shadow: 0 1px 2px rgba(16, 24, 64, .04), 0 10px 30px -14px rgba(16, 24, 64, .16); --shadow-lg: 0 2px 6px rgba(16, 24, 64, .05), 0 30px 80px -28px rgba(16, 24, 64, .32); --radius: 20px; --display: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color-scheme: light; } :root[data-theme="light"] body { background: var(--bg-0); color: var(--ink); } :root[data-theme="light"] :focus-visible { outline-color: var(--focus); } :root[data-theme="light"] .skip-link { background: #fff; color: var(--ink); box-shadow: var(--shadow); } :root[data-theme="light"] .noscript { background: var(--bg-0); } /* ---------------- arka plan ---------------- */ :root[data-theme="light"] .vignette { background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(214, 220, 236, .5) 100%), linear-gradient(180deg, rgba(255, 255, 255, .5), transparent 22%); } /* ---------------- yüzeyler ---------------- */ :root[data-theme="light"] .glass { background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .64)); border: 1px solid rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(var(--blur)) saturate(180%); backdrop-filter: blur(var(--blur)) saturate(180%); box-shadow: 0 0 0 1px var(--stroke), var(--shadow); } :root[data-theme="light"] [data-glare]::before { background: radial-gradient(360px circle at var(--mx, 50%) var(--my, -30%), rgba(47, 107, 255, .07), transparent 50%); } /* ---------------- sol panel ---------------- */ :root[data-theme="light"] .brand-mark { filter: drop-shadow(0 4px 10px rgba(47, 107, 255, .3)); } :root[data-theme="light"] .brand-name { font-weight: 700; letter-spacing: -.03em; } :root[data-theme="light"] .nav-indicator { background: #fff; border: 1px solid var(--stroke); box-shadow: 0 1px 2px rgba(16, 24, 64, .05), 0 8px 20px -10px rgba(47, 107, 255, .35); } :root[data-theme="light"] .nav-indicator::before { background: var(--brand-grad); box-shadow: none; left: 6px; top: 14px; bottom: 14px; } :root[data-theme="light"] .nav-item { color: var(--ink-2); } :root[data-theme="light"] .nav-item:hover { color: var(--ink); background: rgba(16, 28, 72, .035); } :root[data-theme="light"] .nav-item.is-active { color: var(--ink); font-weight: 600; } :root[data-theme="light"] .nav-item.is-active svg.ic { color: var(--blue); filter: none; } :root[data-theme="light"] .nav-subitem:hover { color: var(--ink); background: rgba(16, 28, 72, .04); } :root[data-theme="light"] .avatar-sm { color: #fff; background: var(--brand-grad); border-color: rgba(255, 255, 255, .8); box-shadow: 0 4px 12px -4px rgba(47, 107, 255, .5); } :root[data-theme="light"] .theme-switch { background: var(--well); border-color: transparent; } :root[data-theme="light"] .theme-thumb { background: #fff; border-color: var(--stroke); box-shadow: 0 1px 2px rgba(16, 24, 64, .08), 0 4px 10px -4px rgba(16, 24, 64, .18); } :root[data-theme="light"] .theme-switch button[aria-checked="true"] svg.ic { color: #f59e0b; } /* ---------------- merkez ---------------- */ :root[data-theme="light"] .greeting-eyebrow { color: var(--ink-3); letter-spacing: .14em; font-weight: 500; } :root[data-theme="light"] .live-dot { box-shadow: 0 0 0 3px rgba(16, 185, 129, .16); } :root[data-theme="light"] .greeting-title { font-weight: 600; letter-spacing: -.04em; color: var(--ink); } :root[data-theme="light"] .grad { background: linear-gradient(90deg, #0ea5e9, #2f6bff 45%, #7c5cff); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="light"] .greeting-sub { color: var(--ink-3); } :root[data-theme="light"] .pulse-tag { color: rgba(40, 56, 110, .42); } :root[data-theme="light"].no-canvas .pulse-fallback { background: radial-gradient(circle at 35% 30%, #fff, #bfe6ff 25%, #6aa0ff 58%, #7c5cff 92%); box-shadow: 0 30px 80px -20px rgba(47, 107, 255, .55), 0 0 0 30px rgba(47, 107, 255, .05); } :root[data-theme="light"] .chip { color: var(--ink-2); background: rgba(255, 255, 255, .78); border: 1px solid var(--stroke); box-shadow: 0 1px 2px rgba(16, 24, 64, .04), 0 8px 22px -12px rgba(16, 24, 64, .2); } :root[data-theme="light"] .chip svg.ic { color: var(--blue); } :root[data-theme="light"] .chip:hover, :root[data-theme="light"] .chip.is-hint { color: var(--ink); border-color: rgba(47, 107, 255, .3); box-shadow: 0 0 0 4px rgba(47, 107, 255, .07), 0 12px 26px -12px rgba(47, 107, 255, .45); } /* ---------------- modül kartları ---------------- */ :root[data-theme="light"] .mod-card, :root[data-theme="light"] .holo-panel { --accent-ink: color-mix(in oklab, var(--accent) 58%, #0c1a52); } :root[data-theme="light"] .mod-inner { background: radial-gradient(120% 100% at 0% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 55%), linear-gradient(180deg, rgba(255, 255, 255, .95), rgba(255, 255, 255, .8)); border: 1px solid rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px var(--stroke), 0 1px 2px rgba(16, 24, 64, .04), 0 18px 34px -22px rgba(16, 24, 64, .35); } :root[data-theme="light"] .mod-inner::after { opacity: .35; } :root[data-theme="light"] .mod-icon { color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 13%, white); border-color: color-mix(in oklab, var(--accent) 28%, transparent); } :root[data-theme="light"] .mod-title { font-weight: 600; letter-spacing: -.01em; color: var(--ink); } :root[data-theme="light"] .mod-metric b { font-weight: 650; letter-spacing: -.03em; color: var(--ink); } :root[data-theme="light"] .mod-card:hover .mod-arrow svg.ic { color: var(--accent-ink); } :root[data-theme="light"] .mod-bar { background: var(--well-2); } :root[data-theme="light"] .mod-bar i { box-shadow: none; } :root[data-theme="light"] .mod-card:hover .mod-inner, :root[data-theme="light"] .mod-card:focus-visible .mod-inner { border-color: #fff; box-shadow: 0 0 0 1px color-mix(in oklab, var(--accent) 40%, transparent), 0 24px 40px -22px color-mix(in oklab, var(--accent-ink) 55%, transparent); } :root[data-theme="light"] .mod-card:focus-visible .mod-inner { box-shadow: 0 0 0 2px var(--focus), 0 18px 34px -22px rgba(16, 24, 64, .35); } :root[data-theme="light"] .mod-card.is-target .mod-inner { border-color: #fff; box-shadow: 0 0 0 1.5px color-mix(in oklab, var(--accent) 60%, transparent), 0 0 0 6px color-mix(in oklab, var(--accent) 14%, transparent), 0 28px 50px -24px color-mix(in oklab, var(--accent-ink) 70%, transparent); } /* ---------------- yanıt ve komut ---------------- */ :root[data-theme="light"] .reply { color: var(--ink-2); } :root[data-theme="light"] .reply .who { color: var(--blue); } :root[data-theme="light"] .reply .caret { background: var(--blue); box-shadow: none; } :root[data-theme="light"] .command:focus-within, :root[data-theme="light"] .command.is-active { border-color: #fff; box-shadow: 0 0 0 1px rgba(47, 107, 255, .32), 0 0 0 5px rgba(47, 107, 255, calc(.06 + var(--lvl, 0) * .1)), 0 18px 40px -18px rgba(47, 107, 255, calc(.3 + var(--lvl, 0) * .4)); } :root[data-theme="light"] .status-pill { color: var(--ink-2); background: var(--well); border-color: transparent; } :root[data-theme="light"] .status-dot { box-shadow: 0 0 0 3px color-mix(in oklab, var(--sc, var(--mint)) 18%, transparent); } :root[data-theme="light"] .mic-btn { color: var(--blue); border-color: rgba(47, 107, 255, .18); background: linear-gradient(180deg, #fff, #eef3ff); } :root[data-theme="light"] .mic-btn::after { border-color: rgba(47, 107, 255, .4); } :root[data-theme="light"] body[data-state="LISTENING"] .mic-btn { color: #fff; background: var(--brand-grad); border-color: transparent; box-shadow: 0 8px calc(14px + var(--lvl, 0) * 30px) -6px rgba(47, 107, 255, .7); } :root[data-theme="light"] .icon-btn { background: var(--well); color: var(--ink-2); } :root[data-theme="light"] .icon-btn:hover { background: var(--well-2); color: var(--ink); border-color: transparent; } :root[data-theme="light"] .send-btn { color: #fff; background: var(--brand-grad); box-shadow: 0 10px 22px -10px rgba(47, 107, 255, .8); } :root[data-theme="light"] .send-btn:hover { box-shadow: 0 14px 28px -10px rgba(47, 107, 255, .9); } :root[data-theme="light"] .quick-menu button:hover, :root[data-theme="light"] .quick-menu button:focus-visible { background: rgba(47, 107, 255, .07); color: var(--ink); } :root[data-theme="light"] .quick-menu svg.ic { color: var(--blue); } /* ---------------- sağ panel ---------------- */ :root[data-theme="light"] .widget-title { font-size: 13.5px; letter-spacing: -.005em; text-transform: none; color: var(--ink); font-weight: 600; } :root[data-theme="light"] .badge { color: #fff; background: var(--brand-grad); } :root[data-theme="light"] .widget.is-related { border-color: #fff; box-shadow: 0 0 0 1.5px rgba(47, 107, 255, .35), 0 0 0 6px rgba(47, 107, 255, .07), var(--shadow); } :root[data-theme="light"] .summary-list button:hover { background: var(--well); } :root[data-theme="light"] .summary-list .s-ic { background: rgba(47, 107, 255, .08); color: var(--blue); } :root[data-theme="light"] .summary-list .is-related { background: rgba(47, 107, 255, .06); box-shadow: inset 0 0 0 1px rgba(47, 107, 255, .25); } :root[data-theme="light"] .wx-icon svg { filter: drop-shadow(0 6px 10px rgba(245, 158, 11, .25)); } :root[data-theme="light"] .wx-icon path { fill: rgba(255, 255, 255, .9); stroke: rgba(80, 110, 190, .35); } :root[data-theme="light"] .wx-temp { font-weight: 600; letter-spacing: -.04em; } :root[data-theme="light"] .notif { background: rgba(255, 255, 255, .6); border-color: var(--stroke); } :root[data-theme="light"] .notif.is-click:hover { background: #fff; box-shadow: 0 8px 20px -14px rgba(16, 24, 64, .35); } :root[data-theme="light"] .notif .n-dot { box-shadow: 0 0 0 3px color-mix(in oklab, var(--tone) 18%, transparent); } :root[data-theme="light"] .cal-grid { transform: rotateX(6deg); background: var(--well); box-shadow: inset 0 0 0 1px var(--stroke); } :root[data-theme="light"] .cal-day.today { color: #fff; background: var(--brand-grad); box-shadow: 0 6px 14px -6px rgba(47, 107, 255, .7); } :root[data-theme="light"] .cal-day.leave { color: #5b3fd6; background: rgba(124, 92, 255, .13); box-shadow: inset 0 0 0 1px rgba(124, 92, 255, .35); } :root[data-theme="light"] .cal-scan { background: linear-gradient(180deg, transparent, rgba(47, 107, 255, .1), transparent); } :root[data-theme="light"] .lg-today { background: var(--blue); } :root[data-theme="light"] .lg-leave { background: rgba(124, 92, 255, .55); } /* ---------------- işlem paneli ---------------- */ :root[data-theme="light"] .holo-panel { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(250, 251, 255, .86)); border: 1px solid #fff; -webkit-backdrop-filter: blur(28px) saturate(180%); backdrop-filter: blur(28px) saturate(180%); box-shadow: 0 0 0 1px var(--stroke), var(--shadow-lg), 0 30px 90px -40px color-mix(in oklab, var(--accent) 70%, transparent); } /* Bilimkurgu tarama çizgileri ve köşe işaretleri yerine üstte ince bir vurgu çizgisi */ :root[data-theme="light"] .holo-panel::after { background: none; mix-blend-mode: normal; } :root[data-theme="light"] .holo-panel::before { content: ""; position: absolute; left: 22px; right: 22px; top: 0; height: 2px; z-index: 4; border-radius: 0 0 2px 2px; pointer-events: none; background: linear-gradient(90deg, transparent, var(--accent-ink), transparent); opacity: .55; } :root[data-theme="light"] .corner { display: none; } :root[data-theme="light"] .holo-icon { color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 12%, white); border-color: color-mix(in oklab, var(--accent) 28%, transparent); box-shadow: 0 8px 18px -10px var(--accent-ink); } :root[data-theme="light"] .holo-head h2 { font-weight: 650; letter-spacing: -.03em; } :root[data-theme="light"] .holo-body { scrollbar-color: rgba(16, 28, 72, .18) transparent; } :root[data-theme="light"] .sheet-handle span { background: rgba(16, 28, 72, .18); } :root[data-theme="light"] .btn-primary { color: #fff; background: var(--brand-grad); box-shadow: 0 10px 24px -12px rgba(47, 107, 255, .8); } :root[data-theme="light"] .btn-primary:hover { box-shadow: 0 14px 30px -12px rgba(47, 107, 255, .9); } :root[data-theme="light"] .btn-ghost { background: #fff; border-color: var(--stroke-2); color: var(--ink); } :root[data-theme="light"] .btn-ghost:hover { background: #f7f9ff; border-color: rgba(47, 107, 255, .3); } :root[data-theme="light"] .btn-spinner { border-color: rgba(255, 255, 255, .4); border-top-color: #fff; } :root[data-theme="light"] .panel-note { color: var(--ink-2); background: var(--well); border-color: transparent; } :root[data-theme="light"] .panel-note svg.ic { color: var(--accent-ink); } :root[data-theme="light"] .demo-flag svg.ic { color: var(--violet); } :root[data-theme="light"] .pill { color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 12%, white); border-color: color-mix(in oklab, var(--accent) 30%, transparent); } :root[data-theme="light"] .bar { background: var(--well-2); } :root[data-theme="light"] .bar i { background: linear-gradient(90deg, #0ea5e9, #2f6bff); box-shadow: none; } :root[data-theme="light"] .bar.violet i { background: linear-gradient(90deg, #7c5cff, #c026d3); box-shadow: none; } :root[data-theme="light"] .bar.dim i { background: linear-gradient(90deg, rgba(100, 116, 160, .5), rgba(100, 116, 160, .3)); } :root[data-theme="light"] .kv > div, :root[data-theme="light"] .lr-summary div, :root[data-theme="light"] .meal-stats div { background: var(--well); border-color: transparent; } /* izin bakiyesi */ :root[data-theme="light"] .gauge-track { stroke: var(--well-2); } :root[data-theme="light"] .gauge-fill { filter: drop-shadow(0 4px 8px rgba(47, 107, 255, .35)); } :root[data-theme="light"] .gauge-ticks { stroke: rgba(16, 28, 72, .14); } :root[data-theme="light"] #gauge-grad stop:nth-child(1) { stop-color: #0ea5e9; } :root[data-theme="light"] #gauge-grad stop:nth-child(2) { stop-color: #2f6bff; } :root[data-theme="light"] #gauge-grad stop:nth-child(3) { stop-color: #7c5cff; } :root[data-theme="light"] .gauge-num { background: linear-gradient(180deg, #0d1530, #2f6bff); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 650; } /* izin talebi */ :root[data-theme="light"] .field input { background: #fff; border-color: var(--stroke-2); color-scheme: light; box-shadow: 0 1px 2px rgba(16, 24, 64, .04); } :root[data-theme="light"] .field input:focus { border-color: rgba(47, 107, 255, .6); box-shadow: 0 0 0 4px rgba(47, 107, 255, .12); } :root[data-theme="light"] .seg span { background: #fff; border-color: var(--stroke-2); } :root[data-theme="light"] .seg input:checked + span { color: var(--accent-ink); background: color-mix(in oklab, var(--accent) 12%, white); border-color: color-mix(in oklab, var(--accent) 55%, transparent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 12%, transparent); } :root[data-theme="light"] .form-error { color: #9f1239; background: #fff1f2; border-color: #fecdd3; } :root[data-theme="light"] .success-mark { background: radial-gradient(circle, rgba(47, 107, 255, .14), transparent 70%); } :root[data-theme="light"] .success-mark svg { filter: drop-shadow(0 6px 12px rgba(47, 107, 255, .35)); } :root[data-theme="light"] .success-mark circle { stroke: rgba(47, 107, 255, .3); } :root[data-theme="light"] .success-mark path { stroke: var(--blue); } /* yemek kartı */ :root[data-theme="light"] .mc-card { background: radial-gradient(120% 120% at 100% 0%, rgba(255, 255, 255, .32), transparent 50%), radial-gradient(120% 120% at 0% 100%, rgba(14, 165, 233, .55), transparent 55%), linear-gradient(135deg, #2f6bff, #5b5cff 55%, #8b5cf6); color: #fff; border-color: rgba(255, 255, 255, .5); box-shadow: 0 30px 50px -26px rgba(47, 80, 200, .7), inset 0 1px 0 rgba(255, 255, 255, .45); } :root[data-theme="light"] .mc-bal small, :root[data-theme="light"] .mc-bottom { color: rgba(255, 255, 255, .82); } :root[data-theme="light"] .tx-list li { background: var(--well); } :root[data-theme="light"] .tx-icon { background: #fff; color: var(--ink-2); box-shadow: 0 0 0 1px var(--stroke); } :root[data-theme="light"] .tx-icon.in, :root[data-theme="light"] .tx-amt.in { color: #059669; } /* belgeler */ :root[data-theme="light"] .doc-card { background: linear-gradient(110deg, hsla(var(--hue), 90%, 60%, .1), rgba(255, 255, 255, .92) 55%); border-color: rgba(255, 255, 255, .95); box-shadow: 0 0 0 1px var(--stroke), 0 14px 26px -20px rgba(16, 24, 64, .4); } :root[data-theme="light"] .doc-card:hover, :root[data-theme="light"] .doc-card:focus-visible { border-color: #fff; box-shadow: 0 0 0 1px hsla(var(--hue), 80%, 55%, .45), 0 20px 34px -20px hsla(var(--hue), 80%, 40%, .55); } :root[data-theme="light"] .doc-ic { color: hsl(var(--hue), 70%, 42%); background: hsla(var(--hue), 90%, 60%, .12); } :root[data-theme="light"] .doc-status { color: var(--ink-2); background: var(--well); border-color: transparent; } :root[data-theme="light"] .doc-preview { background: linear-gradient(160deg, hsla(var(--hue), 90%, 65%, .14), #fff); border-color: hsla(var(--hue), 70%, 55%, .25); box-shadow: 0 18px 30px -20px hsla(var(--hue), 80%, 40%, .6); } :root[data-theme="light"] .doc-preview i { background: rgba(16, 28, 72, .12); } /* vize */ :root[data-theme="light"] .flag-de { box-shadow: 0 0 0 1px rgba(16, 28, 72, .1), 0 6px 14px -8px rgba(16, 24, 64, .5); } :root[data-theme="light"] .visa-progress .bar i { background: linear-gradient(90deg, #10b981, #2f6bff); } :root[data-theme="light"] .check { background: var(--well); border-color: transparent; } :root[data-theme="light"] .check:hover { background: var(--well-2); } :root[data-theme="light"] .check .box { border-color: rgba(16, 28, 72, .22); background: #fff; } :root[data-theme="light"] .check input:checked + .box { color: #fff; background: linear-gradient(135deg, #10b981, #2f6bff); box-shadow: 0 4px 10px -4px rgba(16, 185, 129, .7); } :root[data-theme="light"] .tag { color: #047857; background: rgba(16, 185, 129, .1); border-color: rgba(16, 185, 129, .3); } /* profil */ :root[data-theme="light"] .avatar-holo { color: #fff; background: radial-gradient(circle at 35% 30%, #c4b5fd, #7c5cff 55%, #4f46e5); box-shadow: 0 18px 36px -14px rgba(124, 92, 255, .7); } :root[data-theme="light"] .avatar-holo svg { stroke: rgba(124, 92, 255, .5); } /* ---------------- açılış ve demo ---------------- */ :root[data-theme="light"] .intro-skip { color: var(--ink-2); background: rgba(255, 255, 255, .8); box-shadow: var(--shadow); } :root[data-theme="light"] .intro-skip:hover { color: var(--ink); } :root[data-theme="light"] .demo-toggle { color: var(--ink-2); background: rgba(255, 255, 255, .85); box-shadow: var(--shadow); } :root[data-theme="light"] .demo-toggle:hover, :root[data-theme="light"] .demo-toggle[aria-expanded="true"] { color: var(--ink); } :root[data-theme="light"] .demo-panel { background: rgba(255, 255, 255, .9); } :root[data-theme="light"] .fps { color: #059669; } :root[data-theme="light"] .demo-grid button, :root[data-theme="light"] .demo-row button { background: #fff; border-color: var(--stroke-2); } :root[data-theme="light"] .demo-grid button:hover, :root[data-theme="light"] .demo-row button:hover { background: #f5f8ff; color: var(--ink); } :root[data-theme="light"] .demo-grid button[aria-pressed="true"] { color: var(--blue); border-color: rgba(47, 107, 255, .5); background: rgba(47, 107, 255, .07); } :root[data-theme="light"] .demo-range input, :root[data-theme="light"] .demo-check input { accent-color: var(--blue); } :root[data-theme="light"] kbd { background: #fff; } /* ---------------- mobil ---------------- */ :root[data-theme="light"] .mt-weather, :root[data-theme="light"] .mt-bell, :root[data-theme="light"] .mt-theme { background: rgba(255, 255, 255, .8); border-color: var(--stroke); box-shadow: 0 1px 2px rgba(16, 24, 64, .05); } :root[data-theme="light"] .mt-theme { color: var(--ink-2); } :root[data-theme="light"] .bottom-nav button.is-active { color: var(--ink); } :root[data-theme="light"] .bottom-nav button.is-active svg.ic { color: var(--blue); filter: none; } :root[data-theme="light"] .bottom-nav button:active { background: var(--well); } /* ---------------- masaüstü ritmi: daha geniş nefes, daha sakin perspektif ---------------- */ @media (min-width: 821px) { :root[data-theme="light"] .dock-track { transform: rotateX(5deg); gap: 14px; } :root[data-theme="light"] .side { gap: 16px; } :root[data-theme="light"] .widget { padding: 18px; } :root[data-theme="light"] .greeting-title { font-size: clamp(30px, 3.3vw, 48px); } :root[data-theme="light"] .greeting-sub { margin-top: 10px; } } @media (min-width: 1281px) { :root[data-theme="light"] .app { gap: 24px; padding: 24px; } :root[data-theme="light"] .mod-inner { padding: 16px 16px 14px; } } /* ---------------- mobil yeniden yerleşim ---------------- Masaüstünde sağda duran özet, hava durumu, bildirimler ve takvim mobilde kaybolmaz: kartların altında "Bugün" bölümü olarak akar (768 px'te iki, 375 px'te tek sütun). */ @media (max-width: 820px) { :root[data-theme="light"] .side { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); align-items: start; gap: 12px; overflow: visible; min-height: auto; padding: 6px 0 0; } :root[data-theme="light"] .side::before { content: "Bugün"; grid-column: 1 / -1; padding: 4px 2px 0; font: 600 18px/1.2 var(--display); letter-spacing: -.02em; color: var(--ink); } :root[data-theme="light"] .widget { padding: 16px; } }