/* ==========================================================================
   ÇİÇEK IZGARA — Tasarım Sistemi
   Renkler logodan (cicek izgara logo.pdf) ve mekân fotoğraflarından türetildi.
   ========================================================================== */

:root {
  /* --- Marka renkleri (logodan birebir) --- */
  --yesil:        #419745;   /* amblem yeşili */
  --yesil-koyu:   #1D5228;   /* metin ve koyu zeminler */
  --yesil-derin:  #12331A;   /* footer */
  --yesil-sis:    #E8F0E4;   /* açık zemin */
  --kirmizi:      #ED1C24;   /* logotype kırmızısı */
  --kirmizi-koyu: #B4141B;
  --gri:          #58595B;   /* "BURSA ÇARŞI 1963" grisi */
  --murekkep:     #231F20;   /* logo siyahı */

  /* --- Mekândan türetilen destek renkleri --- */
  --safran:       #C9971A;   /* çarşıdaki sarı cephe */
  --safran-acik:  #F0DFA8;
  --tugla:        #A02E32;   /* teras tentesi */

  /* --- Kağıt --- */
  --kagit:        #F7F3E7;
  --kagit-koyu:   #EFE8D6;
  --kagit-cizgi:  #DCD3BC;
  --gece:         #0B1D11;   /* sahne ve derin bölümler */

  /* --- Tipografi --- */
  --f-baslik: "Fraunces", "Georgia", serif;
  --f-govde:  "Figtree", "Segoe UI", system-ui, sans-serif;

  --t-dev:  clamp(2.75rem, 7.5vw, 6rem);
  --t-xl:   clamp(2rem, 4.5vw, 3.5rem);
  --t-l:    clamp(1.5rem, 2.6vw, 2.125rem);
  --t-m:    clamp(1.125rem, 1.6vw, 1.375rem);
  --t-s:    0.9375rem;
  --t-xs:   0.8125rem;

  /* --- Ölçü --- */
  --en:     1240px;
  --en-dar: 760px;
  --bosluk: clamp(3.5rem, 8vw, 7rem);
  --radius: 3px;
}

/* ---------- Temel ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--kagit);
  color: var(--murekkep);
  font-family: var(--f-govde);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

h1, h2, h3 {
  font-family: var(--f-baslik);
  font-weight: 600;
  font-variation-settings: "SOFT" 30, "WONK" 1;
  line-height: 1.08;
  letter-spacing: -0.015em;
  margin: 0;
  text-wrap: balance;
}

:focus-visible {
  outline: 3px solid var(--kirmizi);
  outline-offset: 3px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.kap { width: min(100% - 2.5rem, var(--en)); margin-inline: auto; }
.kap--dar { width: min(100% - 2.5rem, var(--en-dar)); margin-inline: auto; }

/* ---------- Etiket / eyebrow ---------- */
.etiket {
  font-family: var(--f-govde);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gri);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.25rem;
}
.etiket::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--kagit-cizgi);
}
.etiket--orta { justify-content: center; }
.etiket--orta::after { display: none; }

/* ---------- Butonlar ---------- */
.dugme {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .95rem 1.6rem;
  font-family: var(--f-govde);
  font-size: var(--t-s);
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.dugme--dolu { background: var(--yesil-koyu); color: var(--kagit); }
.dugme--dolu:hover { background: var(--murekkep); }
.dugme--cizgi { border-color: currentColor; color: var(--murekkep); }
.dugme--cizgi:hover { background: var(--murekkep); color: var(--kagit); border-color: var(--murekkep); }
.dugme--kirmizi { background: var(--kirmizi); color: #fff; }
.dugme--kirmizi:hover { background: var(--kirmizi-koyu); }

/* ==========================================================================
   ÜST ŞERİT + BAŞLIK
   ========================================================================== */
.serit {
  background: var(--yesil-derin);
  color: #D9E4D4;
  font-size: var(--t-xs);
  letter-spacing: .04em;
}
.serit__ic {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: .55rem 0;
  flex-wrap: wrap;
}
.serit a { color: #fff; text-decoration: none; font-weight: 600; }
.serit a:hover { text-decoration: underline; }

.ust {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--kagit);
  background: color-mix(in srgb, var(--kagit) 92%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--kagit-cizgi);
}
.ust__ic {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: .85rem 0;
}
.marka { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.marka img { height: 46px; width: auto; }
.marka__ad {
  font-family: var(--f-baslik);
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--kirmizi);
  line-height: 1;
  letter-spacing: -0.01em;
}
.marka__alt {
  display: block;
  font-family: var(--f-govde);
  font-size: .625rem;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--gri);
  margin-top: .28rem;
}

.gezinti { display: flex; align-items: center; gap: 1.9rem; }
.gezinti a {
  font-size: var(--t-s);
  font-weight: 600;
  text-decoration: none;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  transition: border-color .18s ease, color .18s ease;
}
.gezinti a:hover { border-bottom-color: var(--kirmizi); }

.menu-dugmesi {
  display: none;
  background: none;
  border: 1.5px solid var(--kagit-cizgi);
  border-radius: var(--radius);
  padding: .5rem .8rem;
  font: inherit;
  font-size: var(--t-s);
  font-weight: 700;
  cursor: pointer;
  color: inherit;
}

/* ==========================================================================
   HERO — tez cümlesi
   ========================================================================== */
.hero { padding: clamp(3rem, 7vw, 6rem) 0 clamp(3rem, 6vw, 5rem); }
.hero__ic {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.hero__yazi { position: relative; }

.hero h1 {
  font-size: var(--t-dev);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  margin: 0 0 1.5rem;
  letter-spacing: -0.03em;
}
.hero h1 em {
  font-style: normal;
  color: var(--kirmizi);
}
.hero__giris {
  font-size: var(--t-m);
  max-width: 46ch;
  color: #3A3634;
  margin: 0 0 2.25rem;
}
.hero__aksiyon { display: flex; flex-wrap: wrap; gap: .85rem; }

.hero__gorsel { position: relative; }
.hero__cerceve {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 5 / 7;
  background: var(--kagit-koyu);
}
.hero__cerceve img { width: 100%; height: 100%; object-fit: cover; }
.hero__muhur {
  position: absolute;
  left: -2.2rem;
  bottom: 2rem;
  width: clamp(76px, 9vw, 116px);
  padding: 1rem .7rem;
  background: var(--kagit);
  border-radius: var(--radius);
  box-shadow: 0 12px 34px rgba(35,31,32,.16);
}
.hero__muhur img { width: 100%; }

.hero__kunye {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--kagit-cizgi);
  flex-wrap: wrap;
}
.kunye__oge strong {
  display: block;
  font-family: var(--f-baslik);
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--yesil-koyu);
  line-height: 1;
}
.kunye__oge span {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gri);
  font-weight: 600;
}

/* ==========================================================================
   BÖLÜMLER
   ========================================================================== */
.bolum { padding: var(--bosluk) 0; }
.bolum--yesil { background: var(--yesil-derin); color: var(--kagit); }
.bolum--yesil .etiket { color: #9BB89A; }
.bolum--yesil .etiket::after { background: rgba(255,255,255,.2); }
.bolum--kagit-koyu { background: var(--kagit-koyu); }

.bolum__baslik { font-size: var(--t-xl); margin: 0 0 1rem; }
.bolum__giris { font-size: var(--t-m); max-width: 58ch; color: #3A3634; margin: 0; }
.bolum--yesil .bolum__giris { color: #CBD9C7; }

/* --- İlke kartları --- */
.ilkeler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(1.5rem, 3vw, 2.75rem);
  margin-top: 3rem;
}
.ilke { padding-top: 1.5rem; border-top: 2px solid var(--yesil); }
.bolum--yesil .ilke { border-top-color: var(--safran); }
.ilke h3 { font-size: var(--t-l); margin: 0 0 .6rem; }
.ilke p { margin: 0; font-size: var(--t-s); color: #3A3634; }
.bolum--yesil .ilke p { color: #C4D2C0; }

/* --- Menü --- */
.kategoriler {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: 2.5rem 0 2.75rem;
}
.kategori {
  padding: .5rem 1rem;
  border: 1.5px solid var(--kagit-cizgi);
  border-radius: 100px;
  background: transparent;
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  cursor: pointer;
  color: var(--gri);
  transition: all .18s ease;
}
.kategori:hover { border-color: var(--yesil); color: var(--yesil-koyu); }
.kategori[aria-pressed="true"] {
  background: var(--yesil-koyu);
  border-color: var(--yesil-koyu);
  color: var(--kagit);
}

.urunler {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 1.75rem 1.25rem;
}
.urun { display: flex; flex-direction: column; gap: .75rem; }
.urun[hidden] { display: none; }
.urun__cerceve {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--yesil-sis);
}
.urun__cerceve::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../assets/amblem.svg") center / auto 42% no-repeat;
  opacity: .22;
}
.urun__cerceve img {
  position: relative;
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.urun:hover .urun__cerceve img { transform: scale(1.045); }
.urun h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; }
.urun span {
  font-size: var(--t-xs);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gri);
  font-weight: 600;
}

/* --- Mekân galerisi --- */
.mekan {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  grid-template-rows: auto auto;
  gap: 1.25rem;
  margin-top: 3rem;
}
.mekan figure { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; }
.mekan figure:first-child { grid-row: span 2; }
.mekan img { width: 100%; height: 100%; object-fit: cover; }
.mekan figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.5rem 1.25rem .95rem;
  background: linear-gradient(to top, rgba(18,51,26,.88), transparent);
  color: #fff;
  font-size: var(--t-s);
  font-weight: 600;
}

/* --- Toptan satış bandı --- */
.toptan {
  background: var(--safran);
  color: var(--murekkep);
  padding: var(--bosluk) 0;
}
.toptan__ic {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
.toptan h2 { font-size: var(--t-xl); margin: 0 0 1rem; }
.toptan p { max-width: 46ch; margin: 0 0 1.75rem; }
.toptan__liste {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .55rem 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
  font-weight: 600;
  font-size: var(--t-s);
}
.toptan__liste li {
  padding-block: .5rem;
  border-bottom: 1px solid rgba(35,31,32,.18);
}

/* --- Şubeler --- */
.sehirler {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 2rem;
  margin-top: 2.75rem;
}
.sehir h3 {
  font-size: var(--t-m);
  margin: 0 0 .9rem;
  padding-bottom: .55rem;
  border-bottom: 1px solid rgba(255,255,255,.18);
}
.sehir ul { list-style: none; padding: 0; margin: 0; }
.sehir li { padding: .32rem 0; font-size: var(--t-s); color: #C4D2C0; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.alt {
  background: var(--murekkep);
  color: #A9A5A0;
  padding: clamp(3rem, 6vw, 4.5rem) 0 2rem;
  font-size: var(--t-s);
}
.alt__ic {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.2fr;
  gap: 2.5rem;
}
.alt h3 {
  font-family: var(--f-govde);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--kagit);
  margin: 0 0 1rem;
}
.alt ul { list-style: none; padding: 0; margin: 0; }
.alt li { padding: .28rem 0; }
.alt a { text-decoration: none; }
.alt a:hover { color: var(--kagit); text-decoration: underline; }
.alt__amblem { width: 58px; margin-bottom: 1.1rem; }
.alt__telif {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  font-size: var(--t-xs);
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.ac { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
.ac.gorunur { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .ac { opacity: 1; transform: none; } }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 960px) {
  .hero__ic { grid-template-columns: 1fr; }
  .hero__cerceve { aspect-ratio: 4 / 3; }
  .hero__gorsel { order: -1; }
  .hero__muhur { left: auto; right: 1.25rem; bottom: 1.25rem; }
  .toptan__ic { grid-template-columns: 1fr; }
  .alt__ic { grid-template-columns: 1fr 1fr; }
  .mekan { grid-template-columns: 1fr; }
  .mekan figure:first-child { grid-row: auto; aspect-ratio: 16/10; }
}

@media (max-width: 720px) {
  .gezinti { display: none; }
  .menu-dugmesi { display: block; }
  .gezinti.acik {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 1rem 1.25rem 1.5rem;
    background: var(--kagit);
    border-bottom: 1px solid var(--kagit-cizgi);
  }
  .gezinti.acik a { width: 100%; padding: .7rem 0; border-bottom: 1px solid var(--kagit-cizgi); }
  .ust__ic { position: relative; }
  .serit__ic { justify-content: center; text-align: center; }
  .toptan__liste { grid-template-columns: 1fr; }
  .alt__ic { grid-template-columns: 1fr; }
  .hero__kunye { gap: 1.5rem 2rem; }
}

/* ==========================================================================
   İÇ SAYFALAR
   ========================================================================== */

/* Klavye kullanıcıları için içeriğe atlama */
.atla {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .75rem 1.25rem;
  background: var(--murekkep);
  color: var(--kagit);
  font-weight: 700;
  font-size: var(--t-s);
  text-decoration: none;
  border-radius: var(--radius);
  transition: top .18s ease;
}
.atla:focus { top: 1rem; }

.gezinti a[aria-current="page"] { border-bottom-color: var(--kirmizi); }

/* --- Sayfa başlığı --- */
.sayfa-basi {
  padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--kagit-cizgi);
}
.sayfa-basi--safran {
  background: var(--safran);
  border-bottom: none;
}
.sayfa-basi__baslik {
  font-family: var(--f-baslik);
  font-size: var(--t-xl);
  font-weight: 600;
  font-variation-settings: "SOFT" 40, "WONK" 1;
  letter-spacing: -0.025em;
  margin: 0 0 1.25rem;
}
.sayfa-basi__giris {
  font-size: var(--t-m);
  max-width: 56ch;
  color: #3A3634;
  margin: 0;
}

.bolum--ustsuz { padding-top: clamp(2rem, 4vw, 3rem); }
.bolum--ince   { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.bolum__baslik--acik { color: var(--kagit); }
.etiket--koyu { color: #6B5209; }
.etiket--koyu::after { background: rgba(35,31,32,.22); }

.dugme--acik { background: var(--kagit); color: var(--yesil-derin); }
.dugme--acik:hover { background: #fff; }
.dugme-grubu { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

/* --- Uzun metin --- */
.yazi { max-width: 68ch; }
.yazi h2 {
  font-size: var(--t-l);
  margin: 2.75rem 0 .9rem;
}
.yazi h2:first-child { margin-top: 0; }
.yazi p { margin: 0 0 1.15rem; color: #3A3634; }
.yazi strong { color: var(--murekkep); }

.alinti {
  margin: 2.5rem 0;
  padding: 1.5rem 0 1.5rem 1.75rem;
  border-left: 3px solid var(--yesil);
  font-family: var(--f-baslik);
  font-size: var(--t-l);
  font-variation-settings: "SOFT" 40, "WONK" 1;
  line-height: 1.3;
  color: var(--yesil-koyu);
}

.genis-gorsel { margin: 0; }
.genis-gorsel img { width: 100%; border-radius: var(--radius); }
.genis-gorsel figcaption {
  margin-top: .85rem;
  font-size: var(--t-xs);
  letter-spacing: .04em;
  color: var(--gri);
}

/* --- Menü sayfası ek --- */
.urun-sayaci {
  margin: 0 0 min(1.75rem, 3vh);
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gri);
}
.urun__ad { font-size: 1.0625rem; font-weight: 600; letter-spacing: 0; margin: 0; }
.urun__aciklama { margin: .35rem 0 0; font-size: var(--t-xs); color: var(--gri); line-height: 1.5; }

/* --- Şubeler --- */
.sehir__adet {
  font-family: var(--f-govde);
  font-size: .75rem;
  font-weight: 700;
  color: var(--safran);
  vertical-align: super;
}
.sehir__adet--koyu { color: var(--yesil); }

.sehir-basligi {
  font-size: var(--t-l);
  margin: 0 0 min(1.75rem, 3vh);
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--yesil);
}

.sube-listesi {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
  gap: 1.5rem;
}
.sube {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--kagit-cizgi);
  border-radius: var(--radius);
}
.sube--uretim { background: var(--yesil-sis); border-color: var(--yesil); }
.sube h3 { font-size: var(--t-m); margin: 0; }
.sube address { font-style: normal; font-size: var(--t-s); color: #3A3634; margin: 0; }
.sube__rozet {
  align-self: flex-start;
  margin: 0;
  padding: .18rem .6rem;
  background: var(--yesil-koyu);
  color: var(--kagit);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-radius: 100px;
}
.sube__rozet--alt { background: var(--tugla); }
.sube__iletisim { list-style: none; padding: 0; margin: 0; font-size: var(--t-s); }
.sube__iletisim li { padding: .12rem 0; }
.sube__iletisim a { font-weight: 700; text-decoration: none; }
.sube__iletisim a:hover { text-decoration: underline; }
.sube__yol {
  margin-top: auto;
  padding-top: .75rem;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--yesil-koyu);
  text-decoration: none;
  border-top: 1px solid var(--kagit-cizgi);
}
.sube__yol:hover { color: var(--kirmizi); }
.sube__yol::after { content: " \2192"; }

/* --- Toptan ürün grupları --- */
.urun-gruplari {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}
.urun-grubu h3 {
  font-size: var(--t-m);
  margin: 0 0 .85rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--safran);
}
.urun-grubu ul { list-style: none; padding: 0; margin: 0; }
.urun-grubu li { padding: .4rem 0; font-size: var(--t-s); border-bottom: 1px solid var(--kagit-cizgi); }

/* --- Franchise adımları --- */
.adimlar {
  list-style: none;
  counter-reset: none;
  padding: 0;
  margin: 3rem 0 0;
  display: grid;
  gap: 1.25rem;
}
.adim {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1.25rem;
  align-items: baseline;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.adim:last-child { border-bottom: none; }
.adim__no {
  font-family: var(--f-baslik);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--safran);
  line-height: 1;
}
.adim h3 { font-size: var(--t-m); margin: 0 0 .25rem; color: var(--kagit); }
.adim p { margin: 0; font-size: var(--t-s); color: #C4D2C0; }

/* ==========================================================================
   FORMLAR
   ========================================================================== */
.form-izgara {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem 1.5rem;
}
.alan { display: flex; flex-direction: column; gap: .45rem; }
.alan--genis { grid-column: 1 / -1; }

.alan label {
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gri);
}
.alan__istege-bagli {
  font-weight: 500;
  letter-spacing: .02em;
  text-transform: none;
  opacity: .75;
}

.alan input,
.alan select,
.alan textarea {
  width: 100%;
  padding: .8rem .95rem;
  font: inherit;
  font-size: 1rem;
  color: var(--murekkep);
  background: #fff;
  border: 1.5px solid var(--kagit-cizgi);
  border-radius: var(--radius);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.alan textarea { resize: vertical; min-height: 7rem; line-height: 1.55; }
.alan select { appearance: none; background-image: none; cursor: pointer; }

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  outline: none;
  border-color: var(--yesil);
  box-shadow: 0 0 0 3px rgba(65,151,69,.18);
}

.alan--hatali input,
.alan--hatali select,
.alan--hatali textarea { border-color: var(--kirmizi); }
.alan--hatali input:focus,
.alan--hatali select:focus,
.alan--hatali textarea:focus { box-shadow: 0 0 0 3px rgba(237,28,36,.16); }

.alan__hata { margin: 0; font-size: var(--t-xs); font-weight: 600; color: var(--kirmizi-koyu); }
.alan__ipucu { margin: 0; font-size: var(--t-xs); color: var(--gri); }

.bildirim {
  padding: 1.5rem 1.75rem;
  border-radius: var(--radius);
  margin-bottom: 2rem;
}
.bildirim h2 { font-size: var(--t-l); margin: 0 0 .5rem; }
.bildirim p { margin: 0; }
.bildirim--basarili { background: var(--yesil-sis); border-left: 4px solid var(--yesil); }
.bildirim--hata     { background: #FCE9EA; border-left: 4px solid var(--kirmizi); }

/* --- İletişim sayfası düzeni --- */
.iletisim__ic {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.iletisim__form form { display: flex; flex-direction: column; gap: 1.25rem; }
.iletisim__yan { display: grid; gap: 1.25rem; }

.kart {
  display: flex;
  flex-direction: column;
  gap: .6rem;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid var(--kagit-cizgi);
  border-radius: var(--radius);
}
.kart--sade { background: var(--kagit-koyu); }
.kart h2 { font-size: var(--t-m); margin: 0; }
.kart address { font-style: normal; font-size: var(--t-s); color: #3A3634; margin: 0; }
.kart p { margin: 0; font-size: var(--t-s); }
.kart__liste { list-style: none; padding: 0; margin: 0; font-size: var(--t-s); }
.kart__liste li { padding: .12rem 0; }
.kart__liste a { font-weight: 700; }

.harita {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--kagit-cizgi);
  line-height: 0;
}

@media (max-width: 860px) {
  .iletisim__ic { grid-template-columns: 1fr; }
  .form-izgara  { grid-template-columns: 1fr; }
  .adim { grid-template-columns: 2.5rem 1fr; gap: 1rem; }
}

/* ==========================================================================
   SAHNE — kaydırdıkça dükkâna doğru yaklaşan afiş
   Bulanıklık yok. Tek katman; sadece transform (compositor üzerinde çalışır),
   böylece her karede layout/paint tetiklenmez.
   ========================================================================== */
.sahne {
  --p: 0;
  --yakin: 1.34;       /* bitiş ölçeği — dükkâna doğru yaklaşma */
  --odak: 88%;         /* yakınlaşmanın merkezi: kadrajın alt tarafı */
  --pan-bas: 0%;       /* afişin en tepesi — logo kırpılmasın */
  --pan-son: 90%;      /* afişin altı: dükkân */
  background: var(--gece);
}

/* Yazı ve yazı perdesi p 0.45 → 0.72 arasında çekilir.
   Sonunda kadrajda dükkândan başka bir şey kalmaz. */
.sahne { --yazi-gorunur: clamp(0, calc((0.72 - var(--p)) * 3.7), 1); }

.sahne__yol { height: 275vh; }

.sahne__pencere {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 30rem;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
}

/* Katman tam olarak sahne boyutunda. Ölçek her zaman >= 1 olduğu için
   büyüme sonucu kenarda boşluk açılması geometrik olarak imkânsız.
   Dikey gezinme object-position ile yapılır; o da tanımı gereği
   kırpma sınırları içinde kalır. İki mekanizma da taşamaz. */
.sahne__kat {
  position: absolute;
  inset: 0;
  transform: scale(calc(1 + (var(--yakin) - 1) * var(--p)));
  transform-origin: 50% var(--odak);
  will-change: transform;
}
.sahne__kat img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% calc(var(--pan-bas) + (var(--pan-son) - var(--pan-bas)) * var(--p));
}

/* Atmosfer perdesi — sonda neredeyse tamamen kalkar */
.sahne__perde {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(6,18,10,.80) 0%, rgba(6,18,10,.42) 32%, rgba(6,18,10,.08) 60%, rgba(6,18,10,.20) 100%);
  opacity: calc(1 - var(--p) * 0.72);
}

/* Yazı perdesi — metnin arkasına oturan elips. Sağ taraf açık kalır,
   illüstrasyon nefes alır. Yazıyla birlikte gelir, yazıyla birlikte gider. */
.sahne__perde--yazi {
  opacity: var(--yazi-gorunur);
  background:
    radial-gradient(ellipse 54% 44% at 50% 56%,
      rgba(6,18,10,.88) 0%,
      rgba(6,18,10,.72) 34%,
      rgba(6,18,10,.34) 62%,
      rgba(6,18,10,0)   82%),
    linear-gradient(to top, rgba(6,18,10,.30) 0%, rgba(6,18,10,0) 55%);
}

/* En alttaki ince karartma — kaldırım şeridi, alt yazıyı taşır */
.sahne__etek {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 26%;
  background: linear-gradient(to top, rgba(6,18,10,.72), rgba(6,18,10,0));
  opacity: calc(var(--p) * var(--p));
}

.sahne__yazi {
  position: relative;
  z-index: 2;
  /* Afişteki logo bloğu görselin üst %16.7'sini kaplar. "cover" ile
     ölçeklendiğinde ekrandaki karşılığı max(19.6vw, 16.7svh) olur.
     Yazıyı tam onun altındaki gökyüzü boşluğuna oturtuyoruz. */
  margin-top: calc(max(19.6vw, 16.7svh) + clamp(.75rem, 3.4vh, 3rem));
  padding-block: 0;
  color: #fff;
  text-align: center;
  opacity: var(--yazi-gorunur);
  transform: translateY(calc((1 - var(--yazi-gorunur)) * -2.5rem));
  pointer-events: auto;
}
.sahne__yazi[data-gizli="1"] { pointer-events: none; }

/* Başlıkla paragrafı ayıran süs — amblemdeki düğüm motifinin sadeleşmiş hâli.
   "BURSA ÇARŞI 1963" etiketi kaldırıldı: afişin kendi logotype'ı zaten
   birkaç yüz piksel yukarıda aynı şeyi yazıyor. */
.sahne__sus {
  display: block;
  width: clamp(6rem, 14vw, 11rem);
  height: 9px;
  margin: min(1.5rem, 2.6svh) auto;
  background:
    linear-gradient(to right, transparent, rgba(201,151,26,.85) 18%, rgba(201,151,26,.85) 42%, transparent 44%),
    linear-gradient(to left,  transparent, rgba(201,151,26,.85) 18%, rgba(201,151,26,.85) 42%, transparent 44%);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 4px, 0 4px;
  position: relative;
}
.sahne__sus::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1.5px solid var(--safran);
}

.sahne h1 {
  font-size: clamp(1.85rem, min(5.4vw, 7.6svh), 4.75rem);
  font-weight: 600;
  font-variation-settings: "SOFT" 50, "WONK" 1;
  letter-spacing: -0.032em;
  line-height: 1.0;
  margin: 0 auto;
  max-width: 17ch;
  text-shadow: 0 2px 40px rgba(6,18,10,.5);
}

.sahne__giris {
  font-size: clamp(.9375rem, min(1.25vw, 2.05svh), 1.1875rem);
  line-height: 1.55;
  max-width: 46ch;
  margin: 0 auto min(1.9rem, 3.4vh);
  color: #EDEAE0;
  text-shadow: 0 1px 24px rgba(6,18,10,.6);
}

.sahne__aksiyon { display: flex; flex-wrap: wrap; gap: .8rem; justify-content: center; }

.dugme--cam {
  background: rgba(255,255,255,.1);
  color: #fff;
  border-color: rgba(255,255,255,.45);
  backdrop-filter: blur(6px);
}
.dugme--cam:hover { background: #fff; color: var(--gece); border-color: #fff; }

/* Sondaki tek satır — binanın altındaki kaldırım şeridinde durur, cepheyi kapatmaz */
.sahne__adres {
  position: absolute;
  left: 50%;
  bottom: clamp(1.1rem, 3vh, 2rem);
  z-index: 2;
  transform: translateX(-50%);
  margin: 0;
  white-space: nowrap;
  font-size: var(--t-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 18px rgba(6,18,10,.9);
  opacity: clamp(0, calc((var(--p) - 0.74) * 4.2), 1);
}
.sahne__adres b { color: var(--safran); font-weight: 700; }

/* Kaydırma ipucu */
.sahne__ipucu {
  position: absolute;
  left: 50%;
  bottom: 1.5rem;
  z-index: 2;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  opacity: clamp(0, calc(1 - var(--p) * 8), 1);
}
.sahne__ipucu span { display: block; width: 1px; height: 2.25rem; background: linear-gradient(to bottom, rgba(255,255,255,.7), transparent); }

@media (max-aspect-ratio: 3/4) {
  /* Dar ekranda afişin tamamı dikeyde sığar; dikey pan etkisiz kalır.
     Bu yüzden yaklaşmayı artırıp odağı dükkâna indiriyoruz. */
  .sahne { --yakin: 1.95; --odak: 91%; }
  .sahne__yol { height: 235vh; }
  .sahne__perde--yazi {
    background:
      radial-gradient(ellipse 110% 44% at 50% 44%,
        rgba(6,18,10,.92) 0%, rgba(6,18,10,.80) 42%, rgba(6,18,10,.36) 72%, rgba(6,18,10,0) 92%);
  }
  .sahne__adres { font-size: .625rem; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .sahne { --p: 0; }
  .sahne__yol { height: auto; }
  .sahne__pencere { position: relative; height: 88svh; }
  .sahne__ipucu, .sahne__etek { display: none; }
}

/* ==========================================================================
   MENÜ RAYI — yatay kaydırmalı kategori şeridi
   ========================================================================== */
.ray {
  display: flex;
  gap: .6rem;
  overflow-x: auto;
  padding: .25rem .25rem 1.25rem;
  margin: 2.5rem -.25rem 0;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: var(--kagit-cizgi) transparent;
}
.ray::-webkit-scrollbar { height: 4px; }
.ray::-webkit-scrollbar-thumb { background: var(--kagit-cizgi); border-radius: 4px; }

.ray__oge {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  padding: .7rem 1.15rem;
  border: 1.5px solid var(--kagit-cizgi);
  border-radius: 100px;
  text-decoration: none;
  font-size: var(--t-s);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: border-color .18s ease, background-color .18s ease, color .18s ease;
}
.ray__oge:hover { border-color: var(--yesil); background: var(--yesil-sis); }
.ray__oge b { font-family: var(--f-baslik); font-size: .8125rem; color: var(--gri); font-weight: 600; }

/* ==========================================================================
   BÜYÜK İFADE BLOĞU
   ========================================================================== */
.ifade {
  font-family: var(--f-baslik);
  font-size: clamp(1.85rem, 4.4vw, 3.75rem);
  font-weight: 600;
  font-variation-settings: "SOFT" 45, "WONK" 1;
  line-height: 1.08;
  letter-spacing: -0.028em;
  max-width: 20ch;
  margin: 0 0 min(1.75rem, 3vh);
}
.ifade em { font-style: normal; color: var(--safran); }