html.is-native-app {
    --native-safe-top: env(safe-area-inset-top, 0px);
    --native-safe-right: env(safe-area-inset-right, 0px);
    --native-safe-bottom: env(safe-area-inset-bottom, 0px);
    --native-safe-left: env(safe-area-inset-left, 0px);
}

.is-native-app body,
body.is-native-app {
    overscroll-behavior-y: none;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    padding-left: var(--native-safe-left);
    padding-right: var(--native-safe-right);
}

/* Android WebView receives touchmove events but does not start native page
   scrolling when the root scroller uses overscroll-behavior-y: none. */
.is-native-android body,
body.is-native-android {
    overscroll-behavior-y: auto;
}

.is-native-app .topbar { display: none; }

.is-native-app .site-header {
    /* Capacitor's remote WKWebView can report env(safe-area-inset-top) as 0.
       Keep controls below Dynamic Island while allowing the header texture
       itself to paint behind the status bar. */
    padding-top: max(var(--native-safe-top), 59px);
}

.is-native-app .mobile-bottom-nav {
    padding-bottom: var(--native-safe-bottom);
    height: calc(64px + var(--native-safe-bottom));
}

/* Fixed children of a closed details element otherwise widen iOS WebKit. */
.is-native-app .mobile-more-menu:not([open]) > div {
    display: none !important;
}

.is-native-app,
.is-native-app body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

.is-native-app body { padding-bottom: calc(76px + var(--native-safe-bottom)); }

/* Keep auth forms inside the visual viewport when iOS opens its keyboard. */
.is-native-app .auth-shell,
.is-native-app .login-panel,
.is-native-app .login-box,
.is-native-app .login-box form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.is-native-app .auth-shell {
    padding-left: 15px;
    padding-right: 15px;
    overflow-x: hidden;
}

.is-native-app .login-panel {
    padding-left: 18px;
    padding-right: 18px;
}

.is-native-app .login-box input,
.is-native-app .login-box button {
    box-sizing: border-box;
    max-width: 100%;
}

body.auth-login-page .account .mobile-login-link,
.is-native-app.auth-login-page .account .mobile-login-link {
    display: none !important;
}

body.auth-login-page .account .join,
.is-native-app.auth-login-page .account .join {
    display: inline-flex !important;
}

@media (max-width: 420px) {
    .is-native-app .site-header .header-main { width: 100%; max-width: 100%; padding-left: 14px; padding-right: 14px; gap: 8px; }
    .is-native-app .site-header .site-brand { flex: 0 1 112px; min-width: 0; overflow: hidden; }
    .is-native-app .site-header .site-brand-logo { width: 112px; height: auto; max-width: 112px; max-height: 38px; }
    .is-native-app .site-header .account { min-width: 0; gap: 6px; }
    .is-native-app .login-panel { padding: 28px 14px; }
}

.native-share-button {
    position: fixed;
    z-index: 1200;
    right: calc(14px + var(--native-safe-right));
    bottom: calc(78px + var(--native-safe-bottom));
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 42px;
    padding: 0 15px;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 999px;
    color: #fff;
    background: #282319;
    box-shadow: 0 8px 26px rgba(23,21,16,.25);
    font: 700 13px/1 Inter, sans-serif;
}

#native-network-banner {
    position: fixed;
    z-index: 2000;
    top: var(--native-safe-top);
    left: 0;
    right: 0;
    padding: 9px 16px;
    color: #fff;
    background: #8a3b2f;
    text-align: center;
    font: 700 12px/1.2 Inter, sans-serif;
}

@media (min-width: 901px) {
    .native-share-button { bottom: 22px; }
}
/* TR / EN language switcher */
.language-switcher{display:inline-flex!important;align-items:center;gap:6px;margin-left:8px;padding-left:12px;border-left:1px solid rgba(255,176,0,.2)}
.language-switcher a{padding:3px 5px!important;color:#88847c!important;font-size:11px!important;font-weight:900!important;letter-spacing:.08em}
.language-switcher a.active{color:#ffb000!important}
.language-switcher i{color:#4d493f;font-style:normal}
@media(max-width:760px){.topbar>div>nav>a{display:none}.topbar .language-switcher{display:inline-flex!important;margin-left:0;border-left:0}}