/* Main menu on the study pages (28. tur, user-approved: “Bugün · Konular · Denemeler · İlerlemem · Şehir”). The same five
   places in the same order as the city dock, fixed at the bottom so every page reaches the others in one tap. Colours
   come from palette.css (through transparent-ui.css). The markup is static in each page; no counts on the buttons. */
.app-nav{position:fixed;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:40;display:flex;gap:3px;width:min(560px,calc(100% - 24px));padding:5px;border:1px solid var(--ui-line,#3a4b5c);border-radius:14px;background:var(--ui-reading,#15202b);box-shadow:var(--ui-shadow,0 10px 30px #0006)}
.app-nav a{position:relative;flex:1;min-width:0;min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;border-radius:10px;color:var(--ui-text,#f4f1ea);font:600 11.5px/1.2 system-ui,-apple-system,sans-serif;text-decoration:none;text-align:center}
.app-nav a span{font-size:18px;line-height:1;color:var(--ui-accent,#ecc27f)}
.app-nav a:hover{background:var(--ui-hover,#2a3b4c)}
.app-nav a[aria-current=page]{background:#ecc27f26;color:var(--ui-accent,#ecc27f)}
.app-nav a:focus-visible{outline:3px solid #f2cd92;outline-offset:1px}
/* The page keeps its last lines clear of the menu. */
body:has(.app-nav){padding-bottom:calc(84px + env(safe-area-inset-bottom))}
@media print{.app-nav{display:none}}
/* 43. tur (user: “evet onu da düzelt”): below 375px “Denemeler” and “İlerlemem” ran into each other in equal fifths;
   there each button takes the room its word needs and the rest is shared equally. */
@media(max-width:374px){.app-nav{gap:2px;padding:4px}.app-nav a{flex:1 1 auto;padding:4px 2px}}

/* Rehberim (29. tur): the traveller's guide at the top right of the study pages (app-guide.js). */
.guide-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:4px 13px 4px 5px;border-radius:999px;border:1px solid var(--ui-line,#3a4b5c);background:var(--ui-raised,#1f2d3b);color:var(--ui-text,#f4f1ea);font:650 13px/1 system-ui,sans-serif;cursor:pointer}
.guide-chip:hover{border-color:var(--ui-accent,#ecc27f)}
.guide-chip img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 18%;background:#0004}
.guide-chip img:not([src]){visibility:hidden}
.guide-chip span{font:inherit;letter-spacing:0}
.guide-chip .sync-mark{font-size:12px;color:var(--ui-muted,#c6ced6)}.guide-chip .sync-mark:empty{display:none}
/* Phones: the header stays one line (back link, name, Rehberim). */
@media(max-width:480px){.guide-chip{gap:6px;padding:3px 10px 3px 4px;font-size:12px}.guide-chip img{width:28px;height:28px}.rota-header>a,.library-header>a{white-space:nowrap}.rota-header>span,.library-header>span{font-size:12px;letter-spacing:.04em;white-space:nowrap}}
@media(max-width:350px){.rota-header>span,.library-header>span{display:none}}
/* 42. tur devamı (user: “bu tanıtımı bir kere görüyorum bir daha göremiyorum … istesem de bulamıyorum”): the header's
   MKS DÜNYASI leads to the landing (/tanitim/), as a site's name does; it reads as the name, not as a link button. */
.rota-header span>a.brand-link,.library-header span>a.brand-link{display:inline;min-height:0;padding:0;font:inherit;letter-spacing:inherit;color:inherit;text-decoration:none}
.rota-header span>a.brand-link:hover,.library-header span>a.brand-link:hover{text-decoration:underline;text-underline-offset:3px}