:root {
  --kok: #14100D;
  --is: #221913;
  --kor: #D7231C;
  --alev: #F58A1F;
  --kagit: #F4EDE1;
  --kul: #8E837A;
  --kaydirak-hiz: 45s;
}

html { scroll-behavior: smooth; }
body { padding-bottom: env(safe-area-inset-bottom); }

@media (max-width: 767px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}

::selection { background: var(--kor); color: #fff; }

:focus-visible {
  outline: 3px solid var(--alev);
  outline-offset: 3px;
  border-radius: 2px;
}

.atlama-linki {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--alev);
  color: #14100D;
  padding: .6rem 1rem;
  font-weight: 600;
}
.atlama-linki:focus { left: 1rem; top: 1rem; }

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(20, 16, 13, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(244, 237, 225, .08);
}

.ust-link {
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--kagit);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color .15s ease, border-color .15s ease;
}
.ust-link:hover { color: var(--alev); }
.ust-link--aktif { border-color: var(--kor); color: #fff; }

/* ---------- Tipografi ---------- */
.baslik-dev {
  font-family: Anton, Impact, sans-serif;
  line-height: .92;
  letter-spacing: .01em;
  text-transform: none;
}

.bolum-basligi {
  font-family: Anton, Impact, sans-serif;
  font-size: clamp(1.9rem, 5vw, 3rem);
  line-height: 1;
  color: #fff;
}

.bolum-ozet {
  max-width: 62ch;
  color: var(--kul);
  line-height: 1.7;
}

/* ---------- Fiyat etiketi (camdaki elyazısı fiyat kâğıtları) ---------- */
.fiyat-etiketi {
  display: inline-block;
  background: #fffdf7;
  color: #14100D;
  font-family: Caveat, cursive;
  font-weight: 700;
  line-height: 1;
  padding: .35rem .8rem .5rem;
  transform: rotate(-2.2deg);
  box-shadow: 0 6px 14px rgba(0, 0, 0, .35);
  border-radius: 2px;
}
.fiyat-etiketi--buyuk { font-size: 2.6rem; padding: .5rem 1.1rem .7rem; }
.fiyat-etiketi--orta  { font-size: 1.9rem; }
.fiyat-etiketi--kucuk { font-size: 1.45rem; transform: rotate(-1.5deg); }

/* ---------- Hero kaydırıcı ---------- */
.vitrin { position: relative; overflow: hidden; }

.vitrin__slayt {
  display: none;
  position: relative;
}
.vitrin__slayt.aktif { display: block; }

.vitrin__gorsel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}

.vitrin__perde {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 15% 90%, rgba(215, 35, 28, .45), transparent 60%),
    linear-gradient(90deg, rgba(20, 16, 13, .96) 8%, rgba(20, 16, 13, .55) 60%, rgba(20, 16, 13, .8));
}

.vitrin__nokta {
  width: 34px;
  height: 4px;
  background: rgba(244, 237, 225, .25);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease;
}
.vitrin__nokta[aria-current="true"] { background: var(--kor); }

/* ---------- Menü kaydırağı (sürekli akan şerit) ---------- */
.kaydirak { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }

.kaydirak__ray {
  display: flex;
  gap: 1.25rem;
  width: max-content;
  animation: kay var(--kaydirak-hiz) linear infinite;
}
.kaydirak:hover .kaydirak__ray,
.kaydirak:focus-within .kaydirak__ray { animation-play-state: paused; }

@keyframes kay {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.kaydirak__kart { width: 320px; flex: 0 0 auto; }

@media (max-width: 767px) {
  .kaydirak__kart { width: 74vw; max-width: 300px; }
  .kaydirak { -webkit-mask-image: none; mask-image: none; }
}

@media (prefers-reduced-motion: reduce) {
  .kaydirak__ray { animation: none; }
  .kaydirak { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  html { scroll-behavior: auto; }
}

/* ---------- Kartlar ---------- */
.urun-kart {
  display: block;
  background: var(--is);
  border: 1px solid rgba(244, 237, 225, .08);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease;
}
.urun-kart:hover { border-color: var(--kor); }
.urun-kart__gorsel { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }

.liste-satir {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1rem;
  background: var(--is);
  border: 1px solid rgba(244, 237, 225, .08);
  transition: border-color .18s ease;
}
.liste-satir:hover { border-color: var(--kor); }
.liste-satir__thumb {
  width: 96px;
  height: 96px;
  flex: 0 0 auto;
  object-fit: cover;
  background: #100c09;
}
@media (min-width: 768px) {
  .liste-satir__thumb { width: 128px; height: 128px; }
}

/* ---------- Butonlar ---------- */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  font-weight: 700;
  font-size: .95rem;
  padding: .85rem 1.4rem;
  border-radius: 2px;
  transition: transform .12s ease, background .18s ease, color .18s ease;
}
.dugme:active { transform: translateY(1px); }
.dugme--kor { background: var(--kor); color: #fff; }
.dugme--kor:hover { background: #b81c16; }
.dugme--wa { background: #1FA855; color: #fff; }
.dugme--wa:hover { background: #178443; }
.dugme--cizgi { border: 1.5px solid rgba(244, 237, 225, .35); color: var(--kagit); }
.dugme--cizgi:hover { border-color: var(--alev); color: var(--alev); }
.dugme svg { width: 20px; height: 20px; }

/* ---------- Footer ---------- */
.footer-baslik {
  font-family: Anton, Impact, sans-serif;
  font-size: 1.05rem;
  color: #fff;
  letter-spacing: .02em;
}
.alt-link { color: var(--kul); transition: color .15s ease; }
.alt-link:hover { color: var(--alev); }

/* ---------- Mobil alt bar ---------- */
.mobil-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #100c09;
  border-top: 1px solid rgba(244, 237, 225, .12);
  padding-bottom: env(safe-area-inset-bottom);
}
.mobil-bar__buton {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: .65rem .25rem;
  font-size: .68rem;
  font-weight: 600;
  color: var(--kagit);
  text-align: center;
  line-height: 1.1;
}
.mobil-bar__buton svg { width: 22px; height: 22px; }
.mobil-bar__buton--wa { color: #35D07F; }
.mobil-bar__buton--tel { color: var(--alev); }
.mobil-bar__buton + .mobil-bar__buton { border-left: 1px solid rgba(244, 237, 225, .1); }

/* ---------- Yazı içeriği ---------- */
.yazi-icerik { color: #ded5c8; line-height: 1.85; font-size: 1.02rem; }
.yazi-icerik p { margin-bottom: 1.2rem; max-width: 72ch; }
.yazi-icerik h2 {
  font-family: Anton, Impact, sans-serif;
  color: #fff;
  font-size: 1.55rem;
  margin: 2.2rem 0 .9rem;
}
.yazi-icerik ul { margin: 0 0 1.4rem 1.1rem; list-style: disc; }
.yazi-icerik li { margin-bottom: .5rem; max-width: 72ch; }
.yazi-icerik a { color: var(--alev); text-decoration: underline; }

/* ---------- Şerit ---------- */
.serit {
  background: var(--kor);
  color: #fff;
  font-weight: 600;
  font-size: .82rem;
  letter-spacing: .03em;
}