/* =========================================================
   LOOK UP CAFE — style.css
   Tema: Charcoal + Amber · Mobil öncelikli
   ========================================================= */

:root {
  /* Renkler */
  --zemin:          #1c1917;
  --zemin-2:        #292524;
  --yuzey:          #302b28;
  --cizgi:          #44403c;
  --metin:          #e7e5e4;
  --metin-soluk:    #a8a29e;
  --amber:          #f59e0b;
  --amber-acik:     #fbbf24;
  --amber-koyu:     #b45309;

  /* Tipografi */
  --font-baslik: "Playfair Display", Georgia, "Times New Roman", serif;
  --font-metin:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;

  /* Ölçüler */
  --genislik: 1120px;
  --yumusak:  14px;
  --gecis:    .25s ease;
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--font-metin);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

img, iframe, svg { display: block; max-width: 100%; }

h1, h2, h3 {
  font-family: var(--font-baslik);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 .6rem;
  letter-spacing: -.01em;
}

p { margin: 0 0 1rem; }

a { color: var(--amber-acik); text-decoration: none; transition: color var(--gecis); }
a:hover { color: var(--amber); }

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

/* ---------- Üst bar ---------- */

.ust-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  padding: .7rem 1rem .6rem;
  background: rgba(28, 25, 23, .88);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--cizgi);
}

.marka {
  font-family: var(--font-baslik);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--metin);
  text-transform: uppercase;
}

.marka span {
  color: var(--amber);
  margin-left: .4em;
}

.menu-baglantilari {
  display: flex;
  gap: 1.1rem;
}

.menu-baglantilari a {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--metin-soluk);
}

.menu-baglantilari a:hover { color: var(--amber); }

/* ---------- Butonlar ---------- */

.buton {
  display: inline-block;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-align: center;
  transition: background var(--gecis), color var(--gecis),
              border-color var(--gecis), transform var(--gecis);
}

.buton-dolu {
  background: var(--amber);
  color: #1c1917;
  border: 1px solid var(--amber);
}

.buton-dolu:hover {
  background: var(--amber-acik);
  border-color: var(--amber-acik);
  color: #1c1917;
  transform: translateY(-1px);
}

.buton-cizgi {
  background: transparent;
  color: var(--amber-acik);
  border: 1px solid var(--amber-koyu);
}

.buton-cizgi:hover {
  background: rgba(245, 158, 11, .12);
  border-color: var(--amber);
  color: var(--amber-acik);
  transform: translateY(-1px);
}

.buton.devre-disi {
  color: var(--metin-soluk);
  border-style: dashed;
  border-color: var(--cizgi);
  background: transparent;
  cursor: default;
  transform: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 88svh;
  min-height: 88vh;
  padding: 5rem 1.25rem 3.5rem;
  overflow: hidden;
}

/* Foto gelene kadar gradient placeholder görünür; assets/hero.jpg
   eklendiğinde otomatik olarak devreye girer. */
.hero-gorsel {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(180deg, rgba(28, 25, 23, .35) 0%, rgba(28, 25, 23, .75) 55%, var(--zemin) 100%),
    url("assets/hero.jpg"),
    linear-gradient(145deg, #57534e 0%, #3f3a36 45%, #292524 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-icerik {
  position: relative;
  width: 100%;
  max-width: var(--genislik);
  margin: 0 auto;
}

.ust-etiket {
  margin-bottom: .8rem;
  color: var(--amber);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.hero h1 {
  margin: 0 0 .5rem;
  font-size: clamp(2.6rem, 12vw, 5.5rem);
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  text-shadow: 0 2px 24px rgba(0, 0, 0, .45);
}

.slogan {
  margin-bottom: .4rem;
  font-family: var(--font-baslik);
  font-size: clamp(1.15rem, 4.5vw, 1.6rem);
  font-style: italic;
  color: var(--amber-acik);
}

.alt-metin {
  max-width: 34ch;
  color: var(--metin-soluk);
  font-size: 1rem;
}

.buton-grubu {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.6rem 0 1.2rem;
}

.hero-saat {
  margin: 0;
  color: var(--metin-soluk);
  font-size: .85rem;
  letter-spacing: .04em;
}

/* ---------- Ortak bölüm ---------- */

.bolum {
  max-width: var(--genislik);
  margin: 0 auto;
  padding: 3.5rem 1.25rem;
}

.bolum-etiket {
  margin-bottom: .5rem;
  color: var(--amber);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.bolum h2 {
  font-size: clamp(1.6rem, 6vw, 2.3rem);
  margin-bottom: 1rem;
}

/* ---------- Hakkımızda ---------- */

.hakkimizda { border-bottom: 1px solid var(--cizgi); }

.hakkimizda p {
  max-width: 60ch;
  color: var(--metin-soluk);
  font-size: 1.05rem;
  margin-bottom: 0;
}

/* ---------- Galeri ---------- */

.galeri-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}

.galeri-kart {
  margin: 0;
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  background: var(--zemin-2);
  overflow: hidden;
  transition: border-color var(--gecis), transform var(--gecis);
}

.galeri-kart:hover {
  border-color: var(--amber-koyu);
  transform: translateY(-3px);
}

/* Kart görselleri de foto gelene kadar gradient placeholder gösterir. */
.kart-gorsel {
  aspect-ratio: 4 / 3;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.kart-1 .kart-gorsel {
  background-image: url("assets/galeri-1.jpg"),
                    linear-gradient(150deg, #78716c 0%, #44403c 60%, #292524 100%);
}

.kart-2 .kart-gorsel {
  background-image: url("assets/galeri-2.jpg"),
                    linear-gradient(150deg, #b45309 0%, #57534e 55%, #292524 100%);
}

.kart-3 .kart-gorsel {
  background-image: url("assets/galeri-3.jpg"),
                    linear-gradient(150deg, #57534e 0%, #3f3a36 50%, #1c1917 100%);
}

.galeri-kart figcaption {
  padding: .85rem 1.1rem;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--metin-soluk);
}

/* ---------- Menü ---------- */

.menu-kart {
  margin-top: 1.5rem;
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--cizgi);
  border-radius: var(--yumusak);
  background: linear-gradient(180deg, var(--zemin-2), var(--zemin));
}

.menu-kart h2 { margin-bottom: .5rem; }

.menu-kart p {
  max-width: 46ch;
  margin: 0 auto 1.5rem;
  color: var(--metin-soluk);
}

/* ---------- İletişim ---------- */

.iletisim { border-top: 1px solid var(--cizgi); }

.iletisim-izgara {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-top: 1.5rem;
}

.bilgi-satiri { margin-bottom: 1.3rem; }

.bilgi-baslik {
  display: block;
  margin-bottom: .15rem;
  color: var(--amber);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.bilgi-satiri p {
  margin: 0;
  color: var(--metin);
}

.harita-cerceve {
  border: 1px solid var(--cizgi);
  border-radius: var(--yumusak);
  overflow: hidden;
  background: var(--zemin-2);
}

.harita-cerceve iframe {
  width: 100%;
  height: 320px;
  border: 0;
  filter: grayscale(.25) contrast(1.05);
}

/* ---------- Footer ---------- */

.alt-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 2rem 1.25rem 2.5rem;
  border-top: 1px solid var(--cizgi);
  background: var(--zemin-2);
  text-align: center;
}

.alt-bar p {
  margin: 0;
  color: var(--metin-soluk);
  font-size: .85rem;
}

.marka-alt {
  color: var(--metin);
  font-family: var(--font-baslik);
  letter-spacing: .08em;
}

.instagram-link {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .85rem;
  font-weight: 500;
}

/* ---------- Sabit üst bar için çapa boşluğu ---------- */

#hakkimizda, #galeri, #menu, #iletisim { scroll-margin-top: 88px; }

/* =========================================================
   Geniş ekranlar
   ========================================================= */

@media (min-width: 640px) {
  .ust-bar {
    flex-direction: row;
    justify-content: space-between;
    padding: .9rem 2rem;
  }

  .menu-baglantilari { gap: 1.6rem; }
  .menu-baglantilari a { font-size: .88rem; }

  .hero { padding: 6rem 2rem 4.5rem; }
  .bolum { padding: 5rem 2rem; }
  .menu-kart { padding: 3.5rem 2rem; }

  .galeri-izgara {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
  }

  .alt-bar { flex-direction: row; justify-content: space-between; }

  #hakkimizda, #galeri, #menu, #iletisim { scroll-margin-top: 72px; }
}

@media (min-width: 900px) {
  .iletisim-izgara {
    grid-template-columns: 1fr 1.15fr;
    gap: 2.5rem;
    align-items: start;
  }

  .harita-cerceve iframe { height: 420px; }
  .alt-metin { font-size: 1.05rem; }
}

/* =========================================================
   Erişilebilirlik
   ========================================================= */

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