/* 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;
}

/* Kimyahane'ye özel: menünün altındaki "Bizi takip et" (ana sayfadakiyle aynı düğmeler, takip.js) */
.sayfa-menu .takip {
  display: grid;
  gap: 0.75rem;
  max-width: 26rem;
  margin: 2rem auto 0;
}

.sayfa-menu .takip-baslik {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin: 0;
  color: var(--renk-metin-soluk);
  font-size: 0.72rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.sayfa-menu .takip-baslik::before,
.sayfa-menu .takip-baslik::after {
  content: "";
  width: 1.5rem;
  height: 1px;
  background: var(--renk-cizgi);
}

.sayfa-menu .takip-liste {
  display: flex;
  gap: 0.5rem;
}

.sayfa-menu .takip-dugme {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3rem;
  padding: 0 0.75rem;
  border: 1px solid var(--renk-cizgi);
  border-radius: var(--kose);
  background: rgb(15 16 15 / 0.7);
  color: var(--renk-metin);
  font-size: 0.8rem;
  font-stretch: 85%;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.sayfa-menu .takip-dugme:hover,
.sayfa-menu .takip-dugme:focus-visible {
  border-color: var(--renk-vurgu);
  color: #ffffff;
}

.sayfa-menu .takip-dugme:focus-visible {
  outline: 2px solid var(--renk-vurgu);
  outline-offset: 3px;
}

.sayfa-menu .takip-simge {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  color: var(--renk-vurgu);
}