/* tema.css — Kimyahane Coffee House, taslak B "Sifon".
   Karanlık laboratuvar: kömür zemin, metalik çelik grisi tek vurgu, Big Shoulders Display
   büyük harfli başlıklar, Archivo gövde. Fiyatlar adın altında, porsiyonlar
   yan yana. Kategori numaraları cihaz etiketi gibi (CSS sayacı).
   Kurallar ve sınıf listesi: TEMA.md. */

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/big-shoulders-display-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Big Shoulders Display";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/big-shoulders-display-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-ext-standard-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  src: url("fonts/archivo-latin-standard-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  color-scheme: dark;
  --logo-zemin: koyu;
  --renk-zemin: #0f100f;
  --renk-yuzey: #191b19;
  --renk-metin: #ede8de;
  --renk-metin-soluk: #a59f93;
  --renk-vurgu: #b6bbc0;
  --renk-vurgu-metin: #121416;
  --renk-cizgi: #2c2f2c;
  --renk-hata: #ff8f84;
  --renk-basari: #8fd19e;
  --yazi-govde: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yazi-baslik: "Big Shoulders Display", "Archivo", system-ui, sans-serif;
  --yazi-boyut: 16px;
  --satir-yuksekligi: 1.45;
  --kose: 3px;
  --icerik-genislik: 38rem;
  --foto-boyut: 5rem;
  --serit-yukseklik: 3.25rem;
}

/* ---------------------------------------------------------------- Başlık */

.sayfa-menu .menu-ust {
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 2.5rem;
  padding-bottom: 1.5rem;
  text-align: center;
}

.sayfa-menu .isletme-adi {
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 0.95;
  text-transform: uppercase;
}

/* ------------------------------------------------------- Kategori şeridi */

.sayfa-menu .kategori-serit {
  gap: 0.35rem;
  border-bottom-color: var(--renk-cizgi);
}

.sayfa-menu .kategori-baglanti {
  padding: 0 0.8rem;
  border: 1px solid transparent;
  border-radius: var(--kose);
  color: var(--renk-metin-soluk);
  font-size: 0.8rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sayfa-menu .kategori-baglanti[aria-current="true"] {
  border-color: var(--renk-vurgu);
  background: transparent;
  color: var(--renk-vurgu);
}

/* ---------------------------------------- Kategori: cihaz etiketi gibi numara */
/* Numara fırçalanmış çelik gibi: açıktan koyuya hafif metal geçişi */

.sayfa-menu .menu-icerik {
  counter-reset: kategori;
}

.sayfa-menu .kategori {
  counter-increment: kategori;
  padding-top: 2.75rem;
}

.sayfa-menu .kategori-baslik {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  margin-bottom: 0.25rem;
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1;
  text-transform: uppercase;
}

.sayfa-menu .kategori-baslik::before {
  content: counter(kategori, decimal-leading-zero);
  flex: none;
  background: linear-gradient(180deg, #e4e7ea 0%, var(--renk-vurgu) 48%, #868b90 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: var(--yazi-govde);
  font-size: 0.8rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.sayfa-menu .kategori-baslik::after {
  content: "";
  flex: 1;
  align-self: center;
  height: 1px;
  background: var(--renk-cizgi);
}

/* Yerleşim: fiyatlar adın altında, porsiyonlar yan yana "·" ile. */
.sayfa-menu .urun {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "metin"
    "fiyat";
  row-gap: 0.25rem;
  padding: 0.85rem 0;
}

.sayfa-menu .urun--fotolu {
  grid-template-columns: var(--foto-boyut) minmax(0, 1fr);
  grid-template-areas:
    "foto metin"
    "foto fiyat";
}

.sayfa-menu .urun-ad {
  font-size: 1.06em;
  font-weight: 600;
}

.sayfa-menu .urun-fiyatlar {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.15rem 0.6rem;
  text-align: left;
}

.sayfa-menu .porsiyon + .porsiyon::before {
  content: "·";
  margin-right: 0.6rem;
  color: var(--renk-metin-soluk);
}

.sayfa-menu .porsiyon-etiket {
  font-size: 0.8em;
  font-stretch: 85%;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.sayfa-menu .fiyat,
.sayfa-menu .urun-tukendi {
  color: var(--renk-vurgu);
}

.sayfa-menu .fiyat {
  font-weight: 600;
}

.sayfa-menu .urun-foto {
  background: var(--renk-yuzey);
}

/* -------------------------------------------------------------------- Alt */

.sayfa-menu .bilgi-ad {
  color: var(--renk-vurgu);
  font-stretch: 85%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}