/* Phaura AI web — masaüstü kabuğu. Telefonda bu sayfa görünmez (/app'e geçilir).
   Kırılımlar (site/launcher.js ve site/boot.js ile aynı):
     700–1039 px  yalnız sütun; uygulamanın kendi alt menüsü sütunun içinde
     1040–1279    + simgeli sol menü
     1280–1499    + yazılı sol menü
     1500+        + sağ panel                                                                        */
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('/assets/css/fonts/BricolageGrotesque-latin.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Bricolage Grotesque';
    src: url('/assets/css/fonts/BricolageGrotesque-latin-ext.woff2') format('woff2');
    font-weight: 200 800;
    font-display: swap;
    unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Renkler uygulamanın temasından gelir (launcher.js: --app-bg, --fg, --muted, --line) */
:root {
    --app-bg: #0F0F0F;
    --fg: #F2F2F2;
    --muted: #A3A3A3;
    --line: rgba(255, 255, 255, .10);
    --hover: color-mix(in srgb, var(--fg) 7%, transparent);
    --col-w: min(720px, calc(100vw - 32px));
    --rail-w: 0px;
    --side-w: 0px;
    --gap: 0px;
    color-scheme: dark;
}
:root[data-theme="light"] {
    --app-bg: #FCFDFC;
    --fg: #121212;
    --muted: #5C5C5C;
    --line: rgba(0, 0, 0, .10);
    color-scheme: light;
}

html, body { margin: 0; height: 100%; }
html.ph-go body { visibility: hidden; }
body {
    background: var(--app-bg);
    color: var(--fg);
    font-family: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
}

.ph-shell {
    height: 100vh;
    display: grid;
    grid-template-columns: var(--rail-w) var(--col-w) var(--side-w);
    column-gap: var(--gap);
    justify-content: center;
}

/* --- Orta sütun: uygulama --- */
.ph-col {
    grid-column: 2;
    min-width: 0;
    height: 100vh;
    background: var(--app-bg);
    box-shadow: -1px 0 0 var(--line), 1px 0 0 var(--line);
}
.ph-col iframe { display: block; width: 100%; height: 100%; border: 0; }

/* --- Sol menü --- */
.ph-rail {
    grid-column: 1;
    display: none;
    flex-direction: column;
    gap: 4px;
    height: 100vh;
    box-sizing: border-box;
    padding: 20px 0 20px;
    min-width: 0;
}
.ph-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 56px;
    margin: 0 0 14px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--fg);
    font: inherit;
    cursor: pointer;
}
.ph-mark {
    flex: none;
    width: 30px;
    height: 32px;
    background: currentColor;
    -webkit-mask: url('/assets/img/load-icon-white.svg') center / contain no-repeat;
    mask: url('/assets/img/load-icon-white.svg') center / contain no-repeat;
}
.ph-word { font-size: 23px; font-weight: 750; letter-spacing: -.01em; }
.ph-rail-items { display: flex; flex-direction: column; gap: 4px; }
.ph-nav {
    position: relative;
    display: flex;
    align-items: center;
    gap: 16px;
    height: 52px;
    padding: 0 14px;
    border: 0;
    border-radius: 14px;
    background: none;
    color: var(--muted);
    font: inherit;
    font-size: 17px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.ph-nav:hover { background: var(--hover); color: var(--fg); }
.ph-nav:focus-visible, .ph-logo:focus-visible { outline: 2px solid var(--fg); outline-offset: -2px; }
.ph-nav.on { color: var(--fg); font-weight: 750; }
.ph-nav[aria-disabled="true"] { opacity: .4; cursor: default; background: none; color: var(--muted); }
.ph-nav-ic { position: relative; flex: none; display: grid; place-items: center; width: 28px; height: 28px; }
.ph-nav-ic svg { width: 24px; height: 24px; }
.ph-nav-lb { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Sohbet ve bot yokken (giriş ekranı) yalnız logo ve "uygulamayı indir" görünür */
html:not(.ph-nav-on) .ph-rail-items { display: none; }
.ph-badge {
    position: absolute;
    top: -4px;
    right: -9px;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 9px;
    border: 2px solid var(--app-bg);
    background: #ef4444;
    color: #fff;
    font-size: 10.5px;
    font-weight: 800;
    line-height: 1;
    display: none;
    align-items: center;
    justify-content: center;
}
.ph-nav.unread .ph-badge { display: flex; }
.ph-nav.unread .ph-badge:empty { min-width: 10px; width: 10px; height: 10px; padding: 0; top: -1px; right: -3px; }
.ph-av { display: block; width: 30px; height: 30px; padding: 2px; box-sizing: border-box; border-radius: 50%; background: var(--line); }
.ph-av-in { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; overflow: hidden; border: 2px solid var(--app-bg); background: var(--app-bg); }
.ph-av-in img { width: 100%; height: 100%; object-fit: cover; }
.ph-av-in > * { max-width: 100%; max-height: 100%; }
.ph-get { margin-top: auto; }

/* --- Sağ panel --- */
.ph-side {
    grid-column: 3;
    display: none;
    flex-direction: column;
    gap: 16px;
    padding: 24px 0;
    box-sizing: border-box;
    height: 100vh;
    min-width: 0;
}
.ph-card { border-radius: 18px; padding: 22px; box-shadow: inset 0 0 0 1px var(--line); }
.ph-card-ic { display: block; width: 48px; height: 48px; border-radius: 12px; margin-bottom: 16px; }
.ph-card h2 { margin: 0 0 6px; font-size: 22px; font-weight: 750; letter-spacing: -.01em; }
.ph-card-tag { margin: 0 0 12px; font-size: 15px; font-weight: 600; }
.ph-card-note { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.ph-play {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 16px;
    border-radius: 12px;
    background: var(--fg);
    color: var(--app-bg);
    font-size: 14px;
    font-weight: 650;
    text-decoration: none;
    transition: opacity .15s ease;
}
.ph-play:hover { opacity: .88; }
.ph-play:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }
.ph-play svg { width: 17px; height: 17px; flex: none; }
.ph-foot { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 6px; font-size: 13px; color: var(--muted); }
.ph-foot a { color: var(--muted); text-decoration: none; }
.ph-foot a:hover { color: var(--fg); text-decoration: underline; }

.ph-noscript { padding: 48px 24px; text-align: center; font-size: 16px; }

/* --- Kırılımlar --- */
@media (min-width: 1040px) {
    :root { --rail-w: 76px; --gap: 20px; }
    .ph-rail { display: flex; align-items: center; }
    .ph-logo, .ph-nav { width: 56px; padding: 0; justify-content: center; }
    .ph-word, .ph-nav-lb { display: none; }
}
@media (min-width: 1280px) {
    :root { --rail-w: 232px; --gap: 24px; }
    .ph-rail { align-items: stretch; }
    .ph-logo, .ph-nav { width: auto; padding: 0 14px; justify-content: flex-start; }
    .ph-word, .ph-nav-lb { display: inline; }
}
@media (min-width: 1500px) {
    :root { --side-w: 300px; }
    .ph-side { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
    .ph-nav, .ph-play { transition: none; }
}