Add a More slot to the mobile bar and tighten its margins

Duyurular and Kaydedilenler had nowhere to go on a phone: the bar holds
five slots and they were only reachable from the footer. The fifth slot
is a sheet now, holding those two plus Hakkında, Hesabım and Ara.

İletişim stays in the bar. Reaching us should not cost an extra tap when
registration is open to everyone; Hakkında can wait behind one.

It is a <details>, so the menu opens without waiting for a script. The
script only closes it on an outside click or Escape, because a sheet you
can only dismiss by finding the button you just pressed is worse than no
sheet.

Margins: content sat 28px from the edge while the header sat at 10px,
because the frame I added last round never got the mobile rule and its
width beat the one page-shell had. Both now match at 10px under 520 and
14px above it — on a 375px phone the old pair of 28px margins was a
seventh of the screen.

Three things the tests caught:

flex-basis: 0 adds padding on top of the basis, so the padded anchors
came out 12px wider than the unpadded <details>. The horizontal padding
is gone from all five slots; the content was centred anyway.

"Daha fazla" wrapped to two lines and pushed the bar off screen at
375px. The label is "Diğer"; the accessible name keeps the longer form.

The gzip CSS budget went over by 32 bytes, which turned out to be worth
listening to: the sheet's link styles were a copy of the rail's. They
share the class now, and that alone came in under the ceiling — so the
budget did not move. The HTML budgets did, by the sheet's measured 2631
bytes, added to the pre-existing ceilings rather than to numbers I made
up on the first attempt.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: sametbasbug

scripts/orbit-browser-tests.mjs

@@ -434,7 +434,11 @@ if (errors.length === 0) {
           return { x: box.x, y: box.y, width: box.width, height: box.height, right: box.right, bottom: box.bottom };
         };
         const navigation = document.querySelector('.primary-nav');
-        const navLinks = [...navigation.querySelectorAll('a')];
+        /* Çubuğun kendi yuvaları: doğrudan bağlantılar ve "Daha fazla"
+           kabı. `querySelectorAll('a')` açılan sayfanın içindekileri de
+           topluyordu ve onlar bir ızgarada, üst üste duruyor — geometri
+           kontrolleri bunu çakışma sanıyordu. */
+        const navLinks = [...navigation.querySelectorAll(':scope > a, :scope > .nav-more')];
         const feedPosts = [...document.querySelectorAll('[data-feed-post]')];
         const featuredPosts = feedPosts.filter((post) => post.dataset.featured === 'true');
         return {
@@ -526,11 +530,16 @@ if (errors.length === 0) {
         /* Beş oldu: İletişim menüye eklendi. Sayının kendisi bir kural değil,
            bir kelepçe — altındaki geometri kontrolleri (eşit flex, çakışma
            yok, kırpılma yok) beşin 360 piksele sığıp sığmadığını söylüyor. */
-        check(layout.navLinks.length === 5, `${label}: mobil navigasyonda beş temel öğe yok.`);
+        check(layout.navLinks.length === 5, `${label}: mobil navigasyonda beş yuva yok.`);
         const mobileNavText = (await page.locator('.primary-nav').textContent()) || '';
         check(!mobileNavText.includes('Projeler'), `${label}: mobil navigasyonda kaldırılan Projeler bağlantısı kaldı.`);
         check(mobileNavText.includes('Konular'), `${label}: mobil navigasyonda Konular bağlantısı yok.`);
-        check(mobileNavText.includes('Hakkında'), `${label}: mobil navigasyonda Hakkında bağlantısı yok.`);
+        /* Hakkında artık "Daha fazla"nın içinde; çubuğun beşinci yuvası ona
+           gitti. Metin kontrolü hâlâ geçerli çünkü açılan sayfa da
+           `.primary-nav` içinde duruyor — yani bağlantı kaybolmadı, bir
+           dokunuş arkasına geçti. */
+        check(mobileNavText.includes('Hakkında'), `${label}: Hakkında bağlantısı mobilde hiçbir yerde yok.`);
+        check(mobileNavText.includes('Diğer'), `${label}: mobil çubukta "Diğer" yuvası yok.`);
         check(!mobileNavText.includes('Katıl'), `${label}: mobil navigasyonda kaldırılan Katıl bağlantısı kaldı.`);
         check(!mobileNavText.includes('Yanıtlar'), `${label}: mobil navigasyonda kaldırılan Yanıtlar bağlantısı kaldı.`);
         check(layout.navLinks.every((link) => link.flex.startsWith('1 1 0') && link.minWidth === '0px'), `${label}: mobil navigasyon öğeleri eşit flex tabanında değil.`);

scripts/orbit-site-tests.mjs

@@ -705,15 +705,25 @@ check(searchScript.includes('/v1/search?'), 'Arama sayfası cursor tabanlı publ
 check(searchHtml.includes('data-search-more'), 'Arama sayfası sonraki cursor sayfasını açan kontrolü taşımıyor.');
 check(!searchScript.includes('/search-index.json'), 'Arama sayfası statik indeksle sınırlı kalıyor.');
 check(!savedHtml.includes('data-saved-card='), 'Kaydedilenler bütün kayıt kartlarını yeniden HTML içine gömüyor.');
-/* Bütçe kalıcı sol rayın maliyeti kadar yükseldi: ray her sayfaya 3219 byte
- * ekliyor (ölçüldü, tahmin değil). Bütçenin koruduğu şey bu değil — üstteki
- * iddialar kayıt metinlerinin ve kart gövdelerinin HTML'e gömülmesini
- * engelliyor. Ray sınırlı ve sabit bir kabuk maliyeti; içerik değil.
+/* Bütçe iki kabuk parçasının ölçülmüş maliyeti kadar yükseldi: kalıcı sol
+ * ray 3219 byte, mobil çubuktaki "Diğer" menüsü 2631 byte. İkisi de sabit
+ * ve sınırlı; sayfa sayısıyla değil, menü maddesi sayısıyla büyüyorlar.
  *
- * Tavanlar eski değerlerin 3219 üstünde: raysız gövde hâlâ 21_000 ve
- * 19_000'in altında kalmalı. */
-check(searchHtml.length < 27_219, `Arama HTML bütçesi aşıldı: ${searchHtml.length} byte.`);
-check(savedHtml.length < 25_219, `Kaydedilenler HTML bütçesi aşıldı: ${savedHtml.length} byte.`);
+ * Bütçenin koruduğu şey bu değil — üstteki iddialar kayıt metinlerinin ve
+ * kart gövdelerinin HTML'e gömülmesini engelliyor, ve asıl tehlike o.
+ * Tavanlar bu turdan ÖNCEKİ değerlerin üstüne kabuk maliyeti eklenerek
+ * kuruldu — yani sayfanın kendi gövdesine tanınan pay değişmedi. Bugünkü
+ * gövdeler 21_376 ve 20_608; eski tavanlar 24_000 ve 22_000 idi, o pay
+ * olduğu gibi duruyor. */
+const SHELL_BUDGET = 3219 + 2631;
+check(
+  searchHtml.length < 24_000 + SHELL_BUDGET,
+  `Arama HTML bütçesi aşıldı: ${searchHtml.length} byte.`,
+);
+check(
+  savedHtml.length < 22_000 + SHELL_BUDGET,
+  `Kaydedilenler HTML bütçesi aşıldı: ${savedHtml.length} byte.`,
+);
 
 for (const htmlFile of htmlFiles) {
   const html = fs.readFileSync(htmlFile, 'utf8');

src/components/Header.astro

@@ -1,7 +1,7 @@
 ---
 import Icon from './Icon.astro';
 import ThemeToggle from './ThemeToggle.astro';
-import { MOBILE_NAVIGATION, isActive, normalizePath } from '../shared/navigation';
+import { MOBILE_MORE_NAVIGATION, MOBILE_NAVIGATION, isActive, normalizePath } from '../shared/navigation';
 
 type Props = { currentPath: string };
 const { currentPath } = Astro.props;
@@ -15,6 +15,8 @@ const normalizedPath = normalizePath(currentPath);
    isteyen insan sayısı artacak — şikâyet, itiraz, kaldırma talebi — ve
    ulaşamayan insan, ulaşmaktan vazgeçen insandır. */
 const links = MOBILE_NAVIGATION;
+const moreLinks = MOBILE_MORE_NAVIGATION;
+const moreActive = moreLinks.some((link) => isActive(link, currentPath));
 const searchQuery = Astro.url.searchParams.get('q') ?? '';
 ---
 
@@ -41,6 +43,35 @@ const searchQuery = Astro.url.searchParams.get('q') ?? '';
           <span class="nav-label">{link.label}</span>
         </a>
       ))}
+      {/*
+        Çubuğa sığmayanlar. `<details>` bilerek: sayfa JS'siz açıldığında da
+        çalışıyor, yani menü bir script'in inmesini beklemiyor.
+
+        Açık olduğu sayfada `aria-current` özetin üzerinde: içindeki bir
+        maddedeyken çubukta hiçbir şeyin işaretli olmaması, kişiye nerede
+        olduğunu söylemeyen bir menü demekti.
+      */}
+      <details class="nav-more">
+        {/*
+          Etiket kısa: "Daha fazla" 375px'lik bir telefonda yuvaya sığmayıp
+          iki satıra taşıyor ve çubuğun dışına çıkıyordu. Erişilebilir ad
+          uzun hâlini koruyor.
+        */}
+        <summary aria-label="Diğer sayfalar" aria-current={moreActive ? 'page' : undefined}>
+          <Icon name="chevron" size={18} />
+          <span class="nav-label">Diğer</span>
+        </summary>
+        {/* Bağlantı stilleri rayınkiyle aynı sınıftan geliyor: iki menü,
+            tek görünüm kaynağı. */}
+        <div class="nav-more-sheet app-rail-nav">
+          {moreLinks.map((link) => (
+            <a href={link.href} aria-current={isActive(link, currentPath) ? 'page' : undefined}>
+              <Icon name={link.icon} size={18} />
+              <span>{link.label}</span>
+            </a>
+          ))}
+        </div>
+      </details>
     </nav>
 
     <form class="header-search-form" action="/search" method="get" role="search">
@@ -97,3 +128,21 @@ const searchQuery = Astro.url.searchParams.get('q') ?? '';
     text-transform: none;
   }
 </style>
+
+<script>
+  /* `<details>` dışarı tıklanınca kendiliğinden kapanmıyor. Menü açık kalıp
+     sayfanın üstünde durursa, kişi onu kapatmak için tam da az önce bastığı
+     düğmeyi bulmak zorunda kalıyor. Escape de kapatıyor. */
+  const sheet = document.querySelector('.nav-more');
+  if (sheet instanceof HTMLDetailsElement) {
+    document.addEventListener('click', (event) => {
+      if (sheet.open && !sheet.contains(event.target as Node)) sheet.open = false;
+    });
+    document.addEventListener('keydown', (event) => {
+      if (event.key === 'Escape' && sheet.open) {
+        sheet.open = false;
+        sheet.querySelector('summary')?.focus();
+      }
+    });
+  }
+</script>

src/shared/navigation.ts

@@ -24,17 +24,22 @@ export interface NavigationLink {
 /**
  * Ana hedefler. Sıra hem rayda hem mobil çubukta bu.
  *
- * `primary: true` olanlar mobil alt çubuğa da giriyor. Çubukta beş yuva var
- * ve altıncısı sığmıyor — bu yüzden mobilde daha az madde görünüyor, hangi
- * maddelerin düşeceği tesadüfe değil bu bayrağa bağlı.
+ * `primary: true` olanlar mobil alt çubuğa doğrudan giriyor; kalanlar
+ * çubuğun beşinci yuvasındaki "Daha fazla" sayfasında. Çubukta beş yuva var
+ * ve altıncısı sığmıyor, yani bu bir yer sorunu — hangi maddelerin düşeceği
+ * tesadüfe değil bu bayrağa bağlı.
+ *
+ * İletişim çubukta kalıyor. Kayıt herkese açıkken bize ulaşmak isteyen
+ * insan sayısı artıyor ve ulaşamayan insan, ulaşmaktan vazgeçen insandır;
+ * bir dokunuş arkasına koymak o yolu uzatır. Hakkında ise bekleyebilir.
  */
 export const NAVIGATION: readonly (NavigationLink & { readonly primary: boolean })[] = [
   { href: '/', label: 'Akış', icon: 'home', owns: ['/posts', '/page', '/feed'], primary: true },
   { href: '/topics', label: 'Konular', icon: 'spark', primary: true },
   { href: '/agents', label: 'Ajanlar', icon: 'agents', primary: true },
   { href: '/duyurular', label: 'Duyurular', icon: 'alert', primary: false },
   { href: '/saved', label: 'Kaydedilenler', icon: 'bookmark', primary: false },
-  { href: '/about', label: 'Hakkında', icon: 'info', owns: ['/about'], primary: true },
+  { href: '/about', label: 'Hakkında', icon: 'info', owns: ['/about'], primary: false },
   { href: '/iletisim', label: 'İletişim', icon: 'mail', primary: true },
 ];
 
@@ -49,6 +54,17 @@ export const ACCOUNT_NAVIGATION: readonly NavigationLink[] = [
 
 export const MOBILE_NAVIGATION = NAVIGATION.filter((link) => link.primary);
 
+/**
+ * Çubuğa sığmayanlar. Kaybolmuyorlar, bir dokunuş arkasına geçiyorlar —
+ * masaüstünde hepsi rayda duruyor ve mobilde yalnız footer'da kalsalardı
+ * kimse bulamazdı.
+ */
+export const MOBILE_MORE_NAVIGATION: readonly NavigationLink[] = [
+  ...NAVIGATION.filter((link) => !link.primary),
+  ...ACCOUNT_NAVIGATION,
+  { href: '/search', label: 'Ara', icon: 'search' },
+];
+
 /** Sondaki eğik çizgi taşındığı için yol önce normalleştiriliyor. */
 export function normalizePath(path: string): string {
   return path === '/' ? '/' : path.replace(/\/$/u, '');

src/styles/responsive.css

@@ -84,6 +84,18 @@
   .app-rail {
     display: none;
   }
+
+  /* Kenar boşluğu masaüstündeki 28px'ten iniyor. Dar ekranda o kadar
+     boşluk okunacak satırdan çalıyor: 375px'lik bir telefonda iki yandan
+     56px, ekranın yedide biri.
+
+     Çerçeveye yazılıyor çünkü kenar boşluğunu artık o taşıyor; içerideki
+     `.page-shell` çerçevenin genişliğini alıyor ve kendi kuralı burada
+     hükümsüz kalıyordu — bu yüzden içerik bir dönem header'dan 18px daha
+     içeride duruyordu. */
+  .app-frame {
+    width: min(1460px, calc(100% - 28px));
+  }
 }
 
 @media (max-width: 780px) {
@@ -198,16 +210,86 @@
     border-left: 0;
   }
 
-  .primary-nav a {
+  /* Yatay dolgu bilerek yok.
+   *
+   * `flex-basis: 0` dolguyu tabanın ÜSTÜNE ekliyor: dolgulu bir öğe,
+   * dolgusuz kardeşinden tam dolgusu kadar geniş çıkıyor. Beş yuvanın
+   * eşit bölünmesi gerekiyor ve "Daha fazla" kabı bir `<details>`, yani
+   * dolgusu summary'de. İçerik zaten ortalanıyor; yatay dolgunun tek
+   * yaptığı şey eşitliği bozmaktı. */
+  .primary-nav > a,
+  .nav-more > summary {
     flex: 1 1 0;
     min-width: 0;
     height: 3.25rem;
     flex-direction: column;
     gap: var(--space-1);
-    padding: var(--space-2) var(--space-3);
+    padding: var(--space-2) 0;
+  }
+
+  /* "Daha fazla". Çubuktaki öteki maddelerle aynı ölçüde duruyor ki beşi
+     eşit bölünsün; açılan sayfa çubuğun ÜSTÜNDE beliriyor, altında değil —
+     altta zaten cihazın kendi çubuğu var. */
+  .nav-more {
+    flex: 1 1 0;
+    min-width: 0;
+    position: relative;
+  }
+
+  .nav-more > summary {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.9rem;
+    color: var(--muted);
+    list-style: none;
+    cursor: pointer;
+  }
+
+  .nav-more > summary::-webkit-details-marker {
+    display: none;
+  }
+
+  /* Chevron sağa bakıyor (`M9 5l7 7-7 7`). Kapalıyken yukarı çevriliyor:
+     sayfa yukarı açılıyor. Açıkken aşağı, yani "kapat". 180 derece
+     döndürmek onu sola bakan bir oka çeviriyordu ve o ne açmayı ne
+     kapatmayı anlatıyor. */
+  .nav-more > summary > .icon {
+    transform: rotate(-90deg);
+    transition: transform 160ms ease;
+  }
+
+  .nav-more[open] > summary > .icon {
+    transform: rotate(90deg);
+  }
+
+  .nav-more > summary[aria-current="page"],
+  .nav-more[open] > summary {
+    color: var(--ink);
+    background: var(--surface-soft);
+  }
+
+  .nav-more-sheet {
+    display: grid;
+    gap: var(--space-1);
+    position: absolute;
+    right: 0;
+    bottom: calc(100% + 0.6rem);
+    min-width: 13rem;
+    padding: var(--space-3);
+    border: 1px solid rgba(211, 217, 229, 0.9);
+    border-radius: 1.1rem;
+    background: rgba(255, 255, 255, 0.97);
+    box-shadow: 0 18px 40px rgba(31, 40, 72, 0.24);
+    backdrop-filter: blur(18px);
+  }
+
+  html[data-theme="dark"] .nav-more-sheet {
+    border-color: var(--line);
+    background: rgba(17, 23, 36, 0.97);
   }
 
-  .primary-nav a::after,
+  .primary-nav > a::after,
   .header-actions .equinox-link span:not(.equinox-link-dot) {
     display: none;
   }
@@ -247,12 +329,20 @@
     min-height: calc(100svh + 4rem);
   }
 
-  .primary-nav a > .nav-label {
+  /* Etiketler tek satır: taşan bir etiket çubuğu yükseltip cihazın kendi
+     alt çubuğunun altına itiyordu. */
+  .primary-nav .nav-label {
+    white-space: nowrap;
+  }
+
+  .primary-nav a > .nav-label,
+  .nav-more > summary > .nav-label {
     width: auto;
     font-size: var(--text-3xs);
   }
 
-  .primary-nav a > .icon {
+  .primary-nav a > .icon,
+  .nav-more > summary > .icon {
     width: 1.15rem;
     height: 1.15rem;
   }
@@ -346,7 +436,8 @@
 
 @media (max-width: 520px) {
   .header-inner,
-  .page-shell {
+  .page-shell,
+  .app-frame {
     width: min(100% - 20px, 1460px);
   }