/* =========================================================
   Konu Kafe — menü teması
   Tasarım konukafe.blogspot.com menüsünden alındı.
   Zemin beyaz, tüm yazılar #171717, font Newsreader.
   ========================================================= */
.km {
  --km-zemin: #ffffff;
  --km-murekkep: #171717;
  --km-yazi: 'Newsreader', serif;
  --km-kenar: 20px;

  background: var(--km-zemin);
  color: var(--km-murekkep);
  font-family: var(--km-yazi);
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  line-height: 1.6;
}
.km *, .km *::before, .km *::after { box-sizing: border-box; }

/* "Menü" başlığı */
/* Sağ üstteki iki nokta: açılış ekranındaki logoyla aynı yer (üstten 12, sağdan 10 px) */
.km { position: relative; }
.km .km-logo {
  position: absolute; z-index: 6;
  top: calc(12px + env(safe-area-inset-top, 0px)); right: 10px;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.km-logo:focus-visible { outline: 2px solid var(--km-murekkep); outline-offset: -4px; }

.km-title {
  margin: 0; padding: calc(28px + env(safe-area-inset-top, 0px)) var(--km-kenar) 20px; font-size: 40px; font-weight: 700; line-height: 1.1; letter-spacing: -.015em;
}
.km-note { margin: 0 var(--km-kenar) 16px; font-size: 15px; }
.km-empty { margin: 0; padding: 56px var(--km-kenar); text-align: center; font-size: 19px; font-style: italic; }

/* Kategori şeridi */
.km-nav {
  position: sticky; top: 0; z-index: 5;
  background: var(--km-zemin); border-bottom: 1px solid var(--km-murekkep);
}
.km-nav-list {
  position: relative;
  display: flex; gap: 6px; padding: 10px var(--km-kenar); overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.km-nav-list::-webkit-scrollbar { display: none; }
.km-chip {
  flex-shrink: 0; display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px;
  border: 1px solid var(--km-murekkep); border-radius: 0; background: var(--km-zemin);
  color: var(--km-murekkep); font-size: 15px; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.km-chip[aria-current="true"] { background: var(--km-murekkep); color: var(--km-zemin); }
.km-chip:focus-visible, .km a:focus-visible { outline: 2px solid var(--km-murekkep); outline-offset: 3px; }

/* Bölümler */
.km-body { padding: 8px var(--km-kenar) 32px; }
.km-section { padding: 24px 0 11px; scroll-margin-top: 64px; }
.km-h {
  margin: 0; font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.015em;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.km-tag {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; line-height: 1;
  padding: 4px 8px; border: 1px solid var(--km-murekkep); border-radius: 20px;
}

/* Ürün satırı: ad solda, fiyat sağda, altında ince çizgi */
.km-list { list-style: none; margin: 0; padding: 0; }
.km-item { padding: 20px 0 5px; border-bottom: 1px solid var(--km-murekkep); }
.km-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.km-name { font-size: 16px; font-weight: 500; line-height: 1.35; }
.km-price { font-size: 16px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.km-desc { margin: 3px 0 0; max-width: 34em; font-size: 15px; line-height: 1.35; white-space: pre-line; }

/* Matcha ve Hojicha bölümleri kendi renklerinde (zemin kenardan kenara, yumuşak degrade) */
.km {
  --km-matcha: #c5d494;
  --km-matcha-degrade:
    radial-gradient(120% 70% at 85% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(165deg, #dbe6b4 0%, #c5d494 45%, #a9bd72 100%);
  --km-hojicha: #d9b48f;
  --km-hojicha-degrade:
    radial-gradient(120% 70% at 15% 0%, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(195deg, #ecd3b6 0%, #d9b48f 45%, #bf936a 100%);
}
#km-matcha, #km-hojicha {
  margin: 0 calc(-1 * var(--km-kenar));
  padding-left: var(--km-kenar); padding-right: var(--km-kenar);
}
#km-matcha  { background: var(--km-matcha-degrade); }
#km-hojicha { background: var(--km-hojicha-degrade); }
/* Kategori şeridinde: seçiliyken / üzerine gelince siyah yerine kendi rengi */
.km-chip[href="#km-matcha"][aria-current="true"],
.km-chip[href="#km-matcha"]:hover  { background: linear-gradient(135deg, #dbe6b4, #b4c67f); color: var(--km-murekkep); }
.km-chip[href="#km-hojicha"][aria-current="true"],
.km-chip[href="#km-hojicha"]:hover { background: linear-gradient(135deg, #ecd3b6, #c9a07a); color: var(--km-murekkep); }