/* İnce bilgi çubuğu: saat, hava, kur, tema */
.utility-bar{height:34px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--surface) 70%,var(--bg));font-size:12px;color:var(--muted)}
.utility-inner{height:100%;display:flex;align-items:center;gap:22px}
.u-item{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;min-height:20px}
.u-item svg{width:14px;height:14px;color:var(--accent);opacity:.9;flex-shrink:0}
.u-item b{font-weight:600;color:var(--text);font-variant-numeric:tabular-nums}
.u-item .u-sep{width:1px;height:12px;background:var(--line);margin:0 2px}
.u-item[hidden]{display:none}
.u-rates{display:inline-flex;gap:14px}
.u-rates .u-trend{font-size:10px}
.u-rates .up{color:#34d399}.u-rates .down{color:#f06a5b}
.u-spacer{flex:1}
.u-theme{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 8px;border:1px solid var(--line);border-radius:999px;background:none;color:var(--muted);font-size:11.5px;cursor:pointer}
.u-theme:hover{color:var(--text);border-color:var(--accent)}
.u-theme svg{width:13px;height:13px}
.u-theme .when-light,.u-theme .when-dark{display:none}
html[data-theme=light] .u-theme .when-light{display:inline}
html:not([data-theme=light]) .u-theme .when-dark{display:inline}
.u-skeleton{display:inline-block;width:64px;height:10px;border-radius:5px;background:var(--line);animation:uPulse 1.2s infinite}
@keyframes uPulse{50%{opacity:.4}}
@media(max-width:850px){.utility-inner{gap:14px;font-size:11px}.u-weather .u-city{display:none}.u-rates{gap:10px}.u-date{display:none}}
@media(max-width:520px){.u-rates .u-eur{display:none}.u-theme span{display:none}.u-theme{padding:0 6px}}