.shell-nav,
.shell-notifications,
.shell-welcome,
.shell-favorite {
    --shell-canvas: var(--ui-canvas, #f5f0e6);
    --shell-surface: var(--ui-surface, #fffdf8);
    --shell-ink: var(--ui-ink, #0b3440);
    --shell-muted: var(--ui-muted, #52676b);
    --shell-line: var(--ui-line, #d4dcd7);
    --shell-brand: var(--ui-brand, #1f6f5c);
    --shell-on-brand: var(--ui-on-brand, #ffffff);
    --shell-accent: var(--ui-accent, #e07a5f);
}

.dark .shell-nav,
.dark .shell-notifications,
.dark .shell-welcome,
.dark .shell-favorite {
    --shell-canvas: var(--ui-canvas, #0e2027);
    --shell-surface: var(--ui-surface, #16303a);
    --shell-ink: var(--ui-ink, #eef3ef);
    --shell-muted: var(--ui-muted, #b3c4c7);
    --shell-line: var(--ui-line, #35505a);
    --shell-brand: var(--ui-brand, #99d6bc);
    --shell-on-brand: var(--ui-on-brand, #0b3440);
    --shell-accent: var(--ui-accent, #ee9c85);
}

#shell-nav {
    background: var(--shell-canvas) !important;
    color: var(--shell-ink);
    border-color: var(--shell-line) !important;
    box-shadow: 0 2px 0 rgba(11, 52, 64, .03) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

#shell-nav .shell-nav-inner { max-width: 1280px; }
#shell-nav .shell-nav-row { min-height: 68px; height: auto; gap: 12px; flex-wrap: nowrap; padding-block: 8px; }
#shell-nav .shell-nav-main { gap: 24px; flex: 1; }
#shell-nav .shell-nav-actions { gap: 4px; flex-shrink: 0; flex-wrap: nowrap; }
#shell-nav .shell-logo { min-width: 44px; min-height: 44px; flex-shrink: 0; }
#shell-nav .shell-logo span { font-family: var(--ui-display, 'Fraunces', Georgia, serif); font-size: 23px; font-weight: 600; color: var(--shell-ink); letter-spacing: -.04em; }
#shell-nav .shell-logo:hover { background: transparent !important; }

#shell-nav .shell-control,
#shell-nav .shell-account,
#shell-nav .shell-login,
#shell-nav .shell-register,
#shell-nav .nav-links a,
#shell-nav .nav-mobile-panel a,
#shell-nav .shell-dropdown > a,
#shell-nav .shell-dropdown > button {
    min-height: 44px;
    min-width: 44px;
    color: var(--shell-ink) !important;
    border-radius: 10px;
    transition: background-color .18s ease, color .18s ease;
}

#shell-nav .shell-control { width: 44px; padding: 0; align-items: center; justify-content: center; flex-shrink: 0; }
#shell-nav .shell-control:not(.nav-mobile-toggle) { display: inline-flex; }
#shell-nav .shell-control > i { color: var(--shell-muted); }
#shell-nav .shell-account { padding: 6px; }
#shell-nav .shell-account > span:not([style]),
#shell-nav .shell-account > i { color: var(--shell-ink); }
#shell-nav .shell-account > span[style] { background: var(--shell-brand) !important; color: var(--shell-on-brand) !important; box-shadow: none; }
#shell-nav .shell-account img { box-shadow: none; object-fit: cover; }
#shell-nav .nav-links a { display: inline-flex; align-items: center; padding: 10px; font-size: 14px; }
#shell-nav .shell-login,
#shell-nav .shell-register { justify-content: center; padding-inline: 14px; }
#shell-nav .shell-register { background: var(--shell-brand) !important; color: var(--shell-on-brand) !important; box-shadow: none !important; }
#shell-nav .shell-register:hover { background: var(--shell-ink) !important; color: var(--shell-canvas) !important; }
#shell-nav .shell-control:hover,
#shell-nav .shell-account:hover,
#shell-nav .shell-login:hover,
#shell-nav .nav-links a:hover,
#shell-nav .nav-mobile-panel a:hover,
#shell-nav .shell-dropdown > a:hover,
#shell-nav .shell-dropdown > button:hover { background: var(--shell-line) !important; }

#shell-nav .shell-dropdown {
    background: var(--shell-surface) !important;
    border: 1px solid var(--shell-line) !important;
    border-radius: 14px;
    box-shadow: 0 14px 32px rgba(11, 52, 64, .14);
    max-height: calc(var(--app-vh, 100vh) - 88px - var(--inapp-bottom, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
}
#shell-nav .shell-dropdown > button { width: calc(100% - 12px); margin-inline: 6px; background: transparent !important; }
#shell-nav .shell-dropdown > button.font-semibold { background: var(--shell-canvas) !important; color: var(--shell-brand) !important; }
#shell-nav .shell-dropdown i,
#shell-nav .nav-mobile-panel i { color: var(--shell-brand); }
#shell-nav .shell-dropdown > div,
#shell-nav .nav-mobile-panel,
#shell-nav .nav-mobile-panel > div { border-color: var(--shell-line) !important; }
#shell-nav .nav-mobile-panel { background: var(--shell-canvas) !important; max-height: calc(var(--app-vh, 100vh) - 80px - var(--inapp-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }

#shell-nav :focus-visible,
.shell-notifications :focus-visible,
.shell-welcome :focus-visible,
#favModal.shell-favorite :focus-visible {
    outline: 2px solid var(--shell-brand);
    outline-offset: 3px;
}

.shell-notifications.notif-overlay { background: rgba(14, 32, 39, .6); }
.shell-notifications.notif-overlay .notif-sheet { background: var(--shell-surface); border: 1px solid var(--shell-line); box-shadow: 0 24px 64px rgba(14, 32, 39, .24); }
.shell-notifications.notif-overlay .notif-head { background: var(--shell-canvas); border-color: var(--shell-line); padding: 12px 16px; }
.shell-notifications.notif-overlay .notif-title { font-family: var(--ui-display, 'Fraunces', Georgia, serif); font-size: 22px; font-weight: 600; color: var(--shell-ink); }
.shell-notifications.notif-overlay .notif-close { width: 44px; height: 44px; color: var(--shell-muted); }
.shell-notifications.notif-overlay .notif-close:hover,
.shell-notifications.notif-overlay .notif-item:hover,
.shell-notifications.notif-overlay .notif-foot-btn:hover { background: var(--shell-line); }
.shell-notifications.notif-overlay .notif-item-unread { background: var(--shell-canvas); }
.shell-notifications.notif-overlay .notif-item-icon { background: var(--shell-canvas); color: var(--shell-brand); }
.shell-notifications.notif-overlay .notif-item-title { color: var(--shell-ink); }
.shell-notifications.notif-overlay .notif-item-msg,
.shell-notifications.notif-overlay .notif-item-time,
.shell-notifications.notif-overlay .notif-empty,
.shell-notifications.notif-overlay .notif-empty i { color: var(--shell-muted); }
.shell-notifications.notif-overlay .notif-item-time { font-size: 12px; }
.shell-notifications.notif-overlay .notif-item-dot { background: var(--shell-accent); }
.shell-notifications.notif-overlay .notif-foot,
.shell-notifications.notif-overlay .notif-foot-link { border-color: var(--shell-line); }
.shell-notifications.notif-overlay .notif-foot-btn { min-height: 48px; color: var(--shell-brand); padding-inline: 8px; }

.shell-footer.shell-footer {
    background: #0e2027 !important;
    color: #eef3ef !important;
    border-color: #35505a !important;
    margin-top: 64px;
}
.shell-footer .shell-footer-inner { max-width: 1280px; padding-block: 48px 28px; }
.shell-footer .shell-footer-grid { gap: 32px 24px; }
.shell-footer.shell-footer h2 { color: #f5f0e6 !important; font-family: var(--ui-display, 'Fraunces', Georgia, serif); font-size: 20px; font-weight: 500; letter-spacing: -.02em; margin-bottom: 14px; }
.shell-footer.shell-footer ul,
.shell-footer.shell-footer p { color: #b3c4c7 !important; font-size: 14px; line-height: 1.7; }
.shell-footer.shell-footer li { margin-top: 0; }
.shell-footer.shell-footer a { display: inline-flex; align-items: center; min-height: 44px; color: #d5e2df !important; font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; transition: color .18s ease; }
.shell-footer.shell-footer a:hover { color: #99d6bc !important; text-decoration: underline; text-underline-offset: 4px; }
.shell-footer.shell-footer :focus-visible { outline: 2px solid #ee9c85 !important; outline-offset: 4px; box-shadow: none !important; }
.shell-footer .shell-footer-bottom { border-color: #35505a !important; gap: 20px; }
.shell-footer .shell-footer-bottom > div { color: #b3c4c7 !important; flex-wrap: wrap; }
.shell-footer .shell-footer-bottom > div:first-child > span:last-child { color: #f5f0e6 !important; font-family: var(--ui-display, 'Fraunces', Georgia, serif); font-size: 21px; }
.shell-footer .shell-footer-bottom i { color: #99d6bc; }
.shell-footer .shell-footer-mark { background: #e07a5f; box-shadow: none; }
.shell-footer .shell-footer-mark i { color: #0b3440; }

.shell-welcome .fm-bg,
#favModal.shell-favorite .fav-modal-bg { background: rgba(14, 32, 39, .65); backdrop-filter: none; -webkit-backdrop-filter: none; }
.shell-welcome .fm-card,
#favModal.shell-favorite .fav-modal-card { background: var(--shell-surface); border: 1px solid var(--shell-line); box-shadow: 0 24px 64px rgba(14, 32, 39, .28); border-radius: 20px; }
.shell-welcome .fm-title,
#favModal.shell-favorite .fav-modal-title { font-family: var(--ui-display, 'Fraunces', Georgia, serif); font-weight: 500; font-size: 26px; line-height: 1.2; color: var(--shell-ink); }
.shell-welcome .fm-text,
#favModal.shell-favorite .fav-modal-text { color: var(--shell-muted); font-size: 15px; line-height: 1.75; overflow-wrap: anywhere; }
.shell-welcome .fm-body { padding: 28px 24px; }
.shell-welcome .fm-body:first-of-type { padding-top: 64px; }
.shell-welcome .fm-media { background: var(--shell-canvas); }
.shell-welcome .fm-x { width: 44px; height: 44px; color: var(--shell-ink); background: var(--shell-surface); border-color: var(--shell-line); box-shadow: none; }
.shell-welcome .fm-x:hover { background: var(--shell-line); transform: none; }
.shell-welcome .fm-cta,
#favModal.shell-favorite .fav-modal-actions .btn-primary { min-height: 44px; background: var(--shell-brand); color: var(--shell-on-brand); border: 1px solid var(--shell-brand); border-radius: 10px; box-shadow: none; }
.shell-welcome .fm-cta:hover { background: var(--shell-ink); color: var(--shell-canvas); transform: none; box-shadow: none; }
.shell-welcome .fm-dismiss { min-width: 44px; min-height: 44px; color: var(--shell-muted); font-size: 14px; }
.shell-welcome .fm-dismiss:hover { color: var(--shell-ink); text-decoration: underline; text-underline-offset: 4px; }
#favModal.shell-favorite .fav-modal-icon { background: var(--shell-canvas); color: var(--shell-accent); }
#favModal.shell-favorite .fav-modal-actions .btn-outline { min-height: 44px; border-color: var(--shell-line); color: var(--shell-ink); background: var(--shell-surface); box-shadow: none; }

@media (max-width: 1279px) {
    #shell-nav .nav-links { display: none !important; }
    #shell-nav .nav-mobile-toggle { display: inline-flex !important; }
    #shell-nav .nav-mobile-panel:not([style*="display: none"]):not([style*="display:none"]) { display: block !important; }
}

@media (min-width: 1280px) {
    #shell-nav .nav-links { display: flex !important; }
    #shell-nav .nav-mobile-toggle,
    #shell-nav .nav-mobile-panel { display: none !important; }
}

@media (max-width: 639px) {
    #shell-nav .shell-nav-inner { padding-inline: 8px; }
    #shell-nav .shell-nav-row { min-height: 60px; gap: 4px; padding-block: 6px; }
    #shell-nav .shell-nav-main { gap: 0; }
    #shell-nav .shell-nav-actions { gap: 0; }
    #shell-nav .shell-account { width: 44px; padding: 6px; }
    #shell-nav .shell-account > i { display: none; }
    #shell-nav .shell-login,
    #shell-nav .shell-register { font-size: 12px; padding-inline: 8px; }
    #shell-nav .shell-nav-actions > div:not([x-data]) { display: none; }
    #shell-nav .lang-dropdown { right: auto; left: 0; }
    .shell-footer .shell-footer-inner { padding: 36px 20px 24px; }
    .shell-footer .shell-footer-grid { gap: 28px 18px; }
    .shell-footer .shell-footer-bottom { align-items: flex-start; }
    .shell-welcome .fm-card { border-radius: 20px 20px 0 0; }
    .shell-welcome .fm-body { padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
    #shell-nav a,
    #shell-nav button,
    .shell-notifications .notif-item,
    .shell-welcome,
    .shell-welcome .fm-card,
    .shell-welcome .fm-cta,
    .shell-welcome .fm-x { transition: none; }
}

/* ---------- Mobil menu acilinca kayma fix + kaydirilabilirlik ---------- */
html.shell-menu-open,body.shell-menu-open{overflow:hidden !important;touch-action:none}
#shell-nav .nav-mobile-panel{overscroll-behavior:contain;max-height:calc(var(--app-vh,100vh) - 72px);overflow-y:auto}
@supports(height:100dvh){#shell-nav .nav-mobile-panel{max-height:calc(100dvh - 72px)}}