/* ============================================
   Cadde Kafe - basit landing sayfasi
   Renk paleti:
     --cream:  #fff8ee   (beyaz-krem arka plan)
     --sun:    #f5c451   (sicak sari - vurgu)
     --amber:  #f28f3b   (acik turuncu - buton, cizgiler)
     --ink:    #2b1d0e   (kahverengiye caian koyu siyah - metin)
     --ink-2:  #4a3520   (biraz daha yumusak metin)
   Arka plan gorseli sonra eklenecek. Simdilik krem duz bir arka plan var.
   ============================================ */

:root {
  --cream: #fff8ee;
  --sun:   #f5c451;
  --amber: #f28f3b;
  --ink:   #2b1d0e;
  --ink-2: #4a3520;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  /* Nunito: yumusak, yuvarlak, sicak - govde metni icin */
  font-family: "Nunito", "Segoe UI", Arial, sans-serif;
  color: var(--ink);
  background: var(--cream);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
}

/* ---- Arka plan katmanlari ----
   .background: sonradan buraya bir gorsel ekleyecegiz. Ornek:
     background: url('assets/bg.jpg') center/cover no-repeat;
   .overlay: gorseli hafiften karartip metnin okunur kalmasini saglar.
   Simdilik gorsel yok, sicak bir sari-krem degradesi kullaniyoruz. */
.background {
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 20% 20%, rgba(245, 196, 81, 0.35), transparent 55%),
    radial-gradient(circle at 80% 80%, rgba(242, 143, 59, 0.28), transparent 55%),
    var(--cream);
}
.overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: transparent;
  pointer-events: none;
}

/* ---- Ust bant / marka ---- */
.site-header {
  padding: 26px 32px;
  display: flex;
  justify-content: center;
}
.brand {
  /* Pacifico: sicak, elle yazilmis his - marka adi icin */
  font-family: "Pacifico", "Segoe UI", cursive;
  font-size: 34px;
  font-weight: 400;
  letter-spacing: 1px;
  color: var(--ink);
  position: relative;
  padding-bottom: 10px;
}
.brand::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 44px;
  height: 3px;
  background: var(--amber);
  border-radius: 999px;
  transform: translateX(-50%);
}

/* ---- Ana alan (hero) ---- */
.hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 40px 24px;
}

.welcome {
  /* Playfair Display: sicak, klasik serif - basligimiza yakisir */
  font-family: "Playfair Display", "Georgia", serif;
  font-size: clamp(48px, 9vw, 96px);
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink);
  line-height: 1.05;
  margin-bottom: 18px;
}

.tagline {
  font-size: clamp(16px, 2.3vw, 20px);
  color: var(--ink-2);
  margin-bottom: 42px;
  font-weight: 400;
  font-style: italic;
}

.cta {
  display: inline-block;
  padding: 16px 44px;
  border-radius: 999px;
  background: var(--amber);
  color: var(--ink);
  font-family: "Nunito", sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  box-shadow: 0 8px 22px rgba(242, 143, 59, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.cta:hover {
  transform: translateY(-2px);
  background: var(--sun);
  box-shadow: 0 12px 28px rgba(245, 196, 81, 0.45);
}
.cta:active { transform: translateY(0); }

/* ---- Alt bant ---- */
.site-footer {
  text-align: center;
  padding: 18px;
  font-size: 12px;
  color: var(--ink-2);
  opacity: 0.75;
}