/* Full-width content with a single bottom navigation and top-right utilities. */
:root{--sidebar-width:0px;--sidebar-offset:0px}
.app-header{position:absolute;inset:0 0 auto;z-index:11;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:28px var(--gutter);background:linear-gradient(#0005,transparent);pointer-events:none}
.app-header>*{pointer-events:auto}
.app-header .brand{display:flex;align-items:center;margin:0;padding:0;font-size:34px;width:auto;height:auto;letter-spacing:-2px}
.app-header .brand:before{content:none}
.app-header .brand-orbit{margin-top:20px}
.header-actions{display:flex;align-items:center;gap:16px;min-width:0}
.header-search{display:grid;place-items:center;flex:0 0 52px;width:52px;height:52px;border-radius:12px;border:1px solid #ffffff1c;background:#25252766;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.header-search svg{width:21px;height:21px}
.header-search[aria-pressed=true]{background:#eeeef1;color:#242426}
.app-header .playlist-selector{display:flex;width:240px;max-width:40vw;min-height:52px;margin:0;padding:8px 12px;gap:12px;border-radius:12px;background:#25252780;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}
.app-header .playlist-selector>span:nth-child(2){display:block;min-width:0;flex:1}
.app-header .playlist-selector>.selector-chevron{display:block}
.app-header .playlist-selector small{font-size:10px;margin:0 0 4px}
.app-header .playlist-selector strong{font-size:13px}
.app-header .playlist-selector-icon{width:28px;height:32px;background:none}
.app-header time{font-size:13px;color:#d3d3d8;font-variant-numeric:tabular-nums;margin-left:8px}
.library-page{margin-left:0;padding-top:152px}
.library-heading>p:last-child{max-width:640px}
.app-dock{left:50%;max-width:calc(100vw - 24px)}
#toast{left:50%}
.live-browser-heading{display:flex;align-items:center;gap:16px;margin-bottom:24px;min-height:52px}
.live-browser-heading p{margin:0 0 6px;color:#8f8f9b;font-size:11px}
.live-browser-heading h2{margin:0;font-size:25px;letter-spacing:-.5px;font-weight:550}
.live-browser-heading>span{margin-left:auto;color:#92929f;font-size:13px}
.live-browser-heading #category-back{margin:0;width:44px;height:44px;border:1px solid #ffffff20;border-radius:12px;background:#ffffff05}
.live-browser-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;overflow:visible}
.category-tile{position:relative;display:flex;align-items:flex-start;flex-direction:column;text-align:left;min-height:184px;padding:24px;border-radius:16px;border:1px solid #ffffff14;background:linear-gradient(145deg,#ffffff09,#ffffff02)}
.category-tile:hover,.channel-tile:hover{background:#ffffff0d}
.category-tile-icon{display:grid;place-items:center;width:40px;height:40px;margin-bottom:24px;color:#c8c8d0}
.category-tile-icon svg{width:30px;height:30px}
.category-tile strong{font-size:18px;font-weight:550;margin-bottom:8px;line-height:1.3}
.category-tile-count{font-size:12px;color:#92929d}
.category-tile>svg{position:absolute;right:24px;bottom:24px;width:16px;height:16px;color:#888892}
.channel-tile{display:flex;align-items:center;gap:16px;text-align:left;min-height:112px;padding:20px;border:1px solid #ffffff12;border-radius:14px;background:#ffffff04}
.channel-tile .channel-monogram{width:48px;height:48px;flex-shrink:0;font-size:15px}
.channel-tile-label{min-width:0;flex:1}
.channel-tile-label strong{display:block;font-size:16px;font-weight:550;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.channel-tile-label small{display:block;font-size:11px;margin-top:8px;color:#93939f}
.channel-tile>svg{width:16px;height:16px;flex-shrink:0;color:#a6a6af}
.channel-tile.selected{border-color:#ffffff30;background:#ffffff0a}
.live-browser-grid>.channel-empty{grid-column:1/-1;padding:40px;border:1px solid #ffffff12;border-radius:16px}
[data-glass=light] .app-header .playlist-selector,[data-glass=light] .header-search{background:#25252745}
[data-glass=solid] .app-header .playlist-selector,[data-glass=solid] .header-search{background:#252527f2}
@media(min-width:1700px){.app-header{padding-top:36px}.app-header .brand{font-size:40px}.app-header .playlist-selector{width:280px;min-height:58px}.app-header .playlist-selector strong{font-size:16px}.app-header .playlist-selector small{font-size:11px}.header-search{width:58px;height:58px;flex-basis:58px}.library-page{padding-top:180px}.live-browser-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}.category-tile{min-height:208px;padding:28px}.category-tile strong{font-size:21px}.category-tile-count{font-size:14px}.channel-tile{min-height:132px}.channel-tile-label strong{font-size:18px}}
@media(max-width:1100px){.live-browser-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.header-actions{gap:12px}.app-header time{display:none}}
@media(max-width:700px){.app-header{padding:20px;gap:16px}.app-header .brand{font-size:28px;flex-shrink:0}.header-actions{gap:8px}.header-search{width:48px;height:48px;flex-basis:48px}.app-header .playlist-selector{width:174px;max-width:46vw;min-height:48px;padding:8px 10px;gap:8px}.app-header .playlist-selector-icon{display:none}.app-header .playlist-selector strong{font-size:12px}.app-header .playlist-selector small{font-size:9px}.app-header .selector-chevron{width:12px;flex-shrink:0}.library-page{padding-top:124px}.live-browser-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.category-tile{padding:18px;min-height:158px}.category-tile-icon{margin-bottom:16px;width:32px;height:32px}.category-tile-icon svg{width:26px;height:26px}.category-tile strong{font-size:15px}.category-tile-count{font-size:11px}.category-tile>svg{right:16px;bottom:18px;width:13px}.live-browser-heading h2{font-size:21px}.channel-tile{padding:14px;min-height:116px;flex-wrap:wrap;gap:12px}.channel-tile .channel-monogram{width:36px;height:36px;font-size:12px}.channel-tile-label{flex-basis:100%;order:2}.channel-tile-label strong{font-size:14px}.channel-tile>svg{margin-left:auto}.app-dock{left:50%}.live-browser-heading>span{font-size:11px}}

/* Keep the brand anchored while the content scrolls underneath. */
.app-header{position:fixed;transition:padding 200ms ease,background-color 200ms ease}
.app-header .brand-logo{transform-origin:left center;transition:transform 200ms ease}
.app-header.is-scrolled{padding-top:16px;padding-bottom:16px}
.app-header.is-scrolled .brand-logo{transform:scale(.62)}
.hero-bottom{justify-content:flex-end;min-height:30px}
.hero-dots{pointer-events:none;align-items:center}
.hero-dots span{display:flex;align-items:center;justify-content:center}
html{scroll-padding-top:116px}
@media(max-width:700px){html{scroll-padding-top:96px}}

/* Glass belongs to the utility capsule; the logo floats directly over the image. */
.app-header{background:none}
.app-header .brand{pointer-events:none;user-select:none}
.header-actions{padding:7px;border:1px solid transparent;border-radius:20px;transform-origin:right top;transition:background-color 180ms ease,border-color 180ms ease,transform 200ms ease}
.app-header.is-scrolled .header-actions,.navigation-active .header-actions{
 background:linear-gradient(145deg,#3b3b3d99,#242426bb);border-color:#ffffff2b;
 backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);
 box-shadow:0 10px 35px #0004,inset 0 1px 0 #ffffff10;
}
.app-header.is-scrolled .header-search,.app-header.is-scrolled .playlist-selector,
.navigation-active .header-search,.navigation-active .playlist-selector{background:#08080d66;border-color:transparent;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.header-actions.is-engaged{transform:scale(1.035)}
.header-actions button:focus-visible{outline:2px solid #fff;outline-offset:2px}
html[data-reduce-motion=true] .header-actions.is-engaged{transform:none}
@media(prefers-reduced-motion:reduce){.header-actions.is-engaged{transform:none}}
@media(max-width:700px){.header-actions{padding:5px;border-radius:16px}.app-header .playlist-selector{max-width:28vw}}
/* Arama ile aktif liste kutusu arası, çerçevenin iç boşluğuna yakın (8px). */
.header-search{margin-right:-8px}
@media(max-width:1100px){.header-search{margin-right:-4px}}
@media(max-width:700px){.header-search{margin-right:0}}
/* Kaydırınca logo, sağdaki çerçeveyle aynı yükseklikte cam bir kutuya girer ve kutuya sığacak kadar küçülür. */
.app-header .brand{box-sizing:border-box;border:1px solid transparent;border-radius:20px;transition:background-color 180ms ease,border-color 180ms ease,padding 200ms ease}
.app-header .brand-logo{transition:width 200ms ease}
.app-header.is-scrolled .brand{height:68px;padding:0 20px;
 background:linear-gradient(145deg,#3b3b3d99,#242426bb);border-color:#ffffff2b;
 backdrop-filter:blur(30px) saturate(140%);-webkit-backdrop-filter:blur(30px) saturate(140%);
 box-shadow:0 10px 35px #0004,inset 0 1px 0 #ffffff10}
.app-header.is-scrolled .brand-logo{transform:none;width:80px}
@media(min-width:1700px){.app-header.is-scrolled .brand{height:74px;padding:0 22px}.app-header.is-scrolled .brand-logo{width:90px}}
@media(max-width:700px){.app-header .brand{border-radius:16px}.app-header.is-scrolled .brand{height:60px;padding:0 14px}.app-header.is-scrolled .brand-logo{width:62px}}