/* ═══════════════════════════════════════════════
   Nuces Coffee & Nuts — vitrin sitesi
   Tasarım tokenları: README (hifi — birebir)
   ═══════════════════════════════════════════════ */

:root {
  --bg-dark: #14100D;
  --bg-darker: #100C09;
  --bg-panel: #1B1511;
  --bg-card: #1D1712;
  --text: #EDE3D3;
  --muted: #A89880;
  --accent: #C9A472;
  --ease-giris: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-perde: cubic-bezier(0.76, 0, 0.24, 1);
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; background: var(--bg-dark); }

body {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  color: var(--text);
  min-height: 100vh;
  overflow-x: hidden;
}

::selection { background: var(--accent); color: #14100D; }
body::-webkit-scrollbar { width: 10px; }
body::-webkit-scrollbar-track { background: #14100D; }
body::-webkit-scrollbar-thumb { background: #3A2E24; border-radius: 5px; }

a { color: inherit; }

@keyframes letterIn {
  from { opacity: 0; transform: translateY(70px) rotate(3deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: none; }
}
@keyframes steamRise {
  0%   { transform: translateY(50px) scaleX(1); opacity: 0; }
  30%  { opacity: 0.65; }
  100% { transform: translateY(-280px) scaleX(1.7); opacity: 0; }
}
@keyframes marqueeMove {
  to { transform: translateX(-50%); }
}
@keyframes scrollCue {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ── Sayfa geçiş perdesi ── */
.perde { position: fixed; inset: 0; z-index: 120; pointer-events: none; visibility: hidden; }
.perde.kapali, .perde.kapanir { visibility: visible; }
.perde-katman { position: absolute; inset: -1% 0; transform: translateY(102%); }
.perde-altin { background: var(--accent); }
.perde-koyu { background: #0F0B08; display: flex; align-items: center; justify-content: center; }
.perde-n {
  font-family: 'Cormorant Garamond', serif;
  font-size: 84px; font-weight: 500; line-height: 1;
  color: var(--accent);
}
.perde.kapali .perde-katman { transform: translateY(0); }
.perde.acil .perde-katman { transform: translateY(-102%); }
.perde.kapanir .perde-katman,
.perde.acil .perde-katman { transition: transform 0.62s var(--ease-perde); }
.perde.kapanir .perde-koyu,
.perde.acil .perde-koyu { transition-delay: 0.09s; }

/* ── Film greni ── */
.gren {
  position: fixed; inset: 0; z-index: 110; pointer-events: none;
  opacity: 0.05; mix-blend-mode: overlay;
  background-image: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22140%22 height=%22140%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.85%22 numOctaves=%222%22/%3E%3C/filter%3E%3Crect width=%22140%22 height=%22140%22 filter=%22url(%23n)%22/%3E%3C/svg%3E');
}

/* ── Navigasyon ── */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 5vw;
  border-bottom: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease, padding 0.4s ease;
}
.nav.scrolled {
  background: rgba(16, 12, 9, 0.88);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(201, 164, 114, 0.15);
  padding-top: 16px; padding-bottom: 16px;
}
.nav-logo { display: flex; align-items: baseline; gap: 14px; text-decoration: none; }
.nav-logo-ad {
  font-family: 'Cormorant Garamond', serif;
  font-size: 28px; font-weight: 600; letter-spacing: 0.06em; color: var(--text);
}
.nav-logo-cizgi { width: 1px; height: 16px; background: var(--accent); align-self: center; }
.nav-logo-alt { font-size: 10px; letter-spacing: 0.34em; color: var(--accent); text-transform: uppercase; }
.nav-linkler { display: flex; align-items: center; gap: 38px; }
.nav-link {
  padding: 4px 0;
  font-size: 12px; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease;
}
.nav-link:hover { color: var(--text); }
.nav-link.aktif { color: var(--accent); border-bottom-color: var(--accent); }

/* ── Sayfa gövdesi ── */
.sayfa { animation: fadeUp 0.9s var(--ease-giris) both; }

.eyebrow {
  font-size: 12px; letter-spacing: 0.45em; text-transform: uppercase;
  color: var(--accent);
}

/* ── Hero (ana sayfa) ── */
.hero {
  position: relative; height: 100vh; min-height: 640px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-gorsel { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-karartma {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(16,12,9,0.5) 0%, rgba(16,12,9,0.62) 55%, rgba(20,16,13,0.96) 100%);
}
.hero-karartma-ek { position: absolute; inset: 0; pointer-events: none; background: rgba(16, 12, 9, 0.25); }
.hero-buhar { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.hero-buhar span { position: absolute; }
.buhar-1 {
  left: 30%; bottom: 18%; width: 90px; height: 220px;
  background: radial-gradient(ellipse at center, rgba(237,227,211,0.16), transparent 70%);
  filter: blur(16px); animation: steamRise 9s ease-in-out infinite;
}
.buhar-2 {
  left: 48%; bottom: 14%; width: 120px; height: 260px;
  background: radial-gradient(ellipse at center, rgba(237,227,211,0.13), transparent 70%);
  filter: blur(20px); animation: steamRise 11s ease-in-out 2.5s infinite;
}
.buhar-3 {
  left: 64%; bottom: 20%; width: 80px; height: 200px;
  background: radial-gradient(ellipse at center, rgba(237,227,211,0.15), transparent 70%);
  filter: blur(14px); animation: steamRise 8s ease-in-out 5s infinite;
}
.hero-icerik { position: relative; text-align: center; padding: 0 24px; }
.hero-eyebrow {
  font-size: 12px; letter-spacing: 0.5em; text-transform: uppercase; color: var(--accent);
  animation: fadeUp 1s var(--ease-giris) 0.1s both;
}
.hero-baslik {
  margin: 8px 0 0;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: clamp(96px, 19vw, 270px);
  line-height: 0.95; letter-spacing: 0.03em; color: var(--text);
}
.hero-baslik span { display: inline-block; animation: letterIn 1.1s var(--ease-giris) both; }
.hero-slogan {
  margin-top: 18px;
  font-family: 'Cormorant Garamond', serif; font-style: italic;
  font-size: clamp(20px, 2.4vw, 30px); color: rgba(237, 227, 211, 0.85);
  animation: fadeUp 1s var(--ease-giris) 0.85s both;
}
.hero-kesfet {
  position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: fadeUp 1s ease 1.4s both;
}
.hero-kesfet-yazi { font-size: 10px; letter-spacing: 0.4em; text-transform: uppercase; color: rgba(237, 227, 211, 0.6); }
.hero-kesfet-cizgi { width: 1px; height: 56px; background: var(--accent); animation: scrollCue 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite; }

/* ── Kayan şerit ── */
.serit {
  background: var(--accent); color: #14100D;
  overflow: hidden; padding: 16px 0;
  transform: rotate(-1.2deg) scale(1.04); transform-origin: center;
}
.serit-ic { display: flex; width: max-content; animation: marqueeMove 32s linear infinite; }
.serit-ic span {
  white-space: nowrap; padding-right: 2em;
  font-size: 15px; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
}

/* ── İmza lezzetler ── */
.vitrin { padding: 130px 5vw 110px; max-width: 1440px; margin: 0 auto; }
.vitrin-ust {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 64px;
}
.vitrin-ust .eyebrow { margin-bottom: 14px; }
.vitrin-baslik {
  margin: 0; font-family: 'Cormorant Garamond', serif;
  font-weight: 500; font-size: clamp(42px, 5vw, 68px); line-height: 1.05;
}
.btn-cerceve {
  display: inline-block; background: none;
  border: 1px solid rgba(201, 164, 114, 0.45); color: var(--accent);
  font-family: 'Jost', sans-serif; font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase;
  padding: 16px 30px; cursor: pointer; text-decoration: none;
  transition: all 0.35s ease;
}
.btn-cerceve:hover { background: var(--accent); color: #14100D; border-color: var(--accent); }
.vitrin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 28px; }
.vitrin-kart {
  position: relative; display: block; text-decoration: none;
  background: var(--bg-card); border: 1px solid rgba(201, 164, 114, 0.14);
  overflow: hidden; cursor: pointer;
  transition: transform 0.5s var(--ease-giris), border-color 0.4s ease, box-shadow 0.5s ease;
}
.vitrin-kart:hover {
  transform: translateY(-10px);
  border-color: rgba(201, 164, 114, 0.55);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.6);
}
.vitrin-kart-gorsel { position: relative; overflow: hidden; }
.vitrin-kart-gorsel img { width: 100%; height: 320px; object-fit: cover; display: block; }
.vitrin-kart-icerik { padding: 30px 28px 34px; }
.vitrin-kart-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vitrin-kart-ad { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 30px; color: var(--text); }
.vitrin-kart-no { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 20px; color: var(--accent); }
.vitrin-kart-aciklama { margin: 12px 0 0; font-size: 15px; line-height: 1.7; color: var(--muted); }
.vitrin-kart-cizgi {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.5s var(--ease-giris);
}
.vitrin-kart:hover .vitrin-kart-cizgi { transform: scaleX(1); }

/* ── Hikâye teaser ── */
.hikaye {
  background: var(--bg-panel);
  border-top: 1px solid rgba(201, 164, 114, 0.12);
  border-bottom: 1px solid rgba(201, 164, 114, 0.12);
  padding: 130px 5vw;
}
.hikaye-ic { max-width: 940px; margin: 0 auto; text-align: center; }
.hikaye-ic .eyebrow { margin-bottom: 26px; }
.hikaye-alinti {
  font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 400;
  font-size: clamp(34px, 4.6vw, 60px); line-height: 1.25; color: var(--text);
}
.hikaye-metin { max-width: 560px; margin: 30px auto 0; font-size: 16px; line-height: 1.8; color: var(--muted); }
.hikaye-link {
  display: inline-block; margin-top: 38px;
  font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--accent); text-decoration: none;
  padding: 8px 2px; border-bottom: 1px solid var(--accent);
  transition: opacity 0.3s ease;
}
.hikaye-link:hover { opacity: 0.65; }

/* ── Menü CTA ── */
.menu-cta { padding: 40px 0 0; }
.menu-cta a {
  display: block; width: 100%; text-align: center; text-decoration: none;
  border-top: 1px solid rgba(201, 164, 114, 0.25);
  border-bottom: 1px solid rgba(201, 164, 114, 0.25);
  padding: 54px 5vw;
  font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(44px, 7vw, 100px); letter-spacing: 0.04em; color: var(--text);
  transition: all 0.5s var(--ease-giris);
}
.menu-cta a:hover { background: var(--accent); color: #14100D; }

/* ── İç sayfa başlığı ── */
.sayfa-baslik-blok { padding: 190px 5vw 80px; max-width: 1280px; margin: 0 auto; }
.sayfa-baslik-blok .eyebrow { margin-bottom: 16px; animation: fadeUp 0.9s ease 0.15s both; }
.sayfa-baslik {
  margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(56px, 9vw, 120px); line-height: 1;
  animation: fadeUp 0.9s ease 0.25s both;
}
.sayfa-baslik.buyuk { font-size: clamp(64px, 10vw, 140px); }
.sayfa-giris {
  margin: 26px 0 0; max-width: 480px;
  font-size: 16px; line-height: 1.8; color: var(--muted);
  animation: fadeUp 0.9s ease 0.4s both;
}

/* ── Menü sayfası ── */
.menu-banner { padding: 30px 5vw 40px; max-width: 1280px; margin: 0 auto; }
.menu-banner img { width: 100%; height: 300px; object-fit: cover; display: block; }
.menu-bolum { padding: 50px 5vw; max-width: 1280px; margin: 0 auto; }
.menu-bolum.ilk { padding-top: 60px; }
.menu-bolum.son { padding-bottom: 130px; }
.menu-bolum-baslik { display: flex; align-items: baseline; gap: 24px; margin-bottom: 46px; }
.menu-bolum-no { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 22px; color: var(--accent); }
.menu-bolum-ad { margin: 0; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(36px, 4.4vw, 56px); }
.menu-bolum-cizgi { flex: 1; height: 1px; background: rgba(201, 164, 114, 0.2); align-self: center; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr)); gap: 10px 64px; }
.menu-satir {
  display: flex; align-items: baseline; gap: 16px;
  padding: 18px 10px;
  border-bottom: 1px solid rgba(201, 164, 114, 0.12);
  transition: transform 0.35s var(--ease-giris), background 0.35s ease;
}
.menu-satir:hover { transform: translateX(8px); background: rgba(201, 164, 114, 0.05); }
.menu-satir-bilgi { min-width: 0; }
.menu-satir-ad { font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 25px; color: var(--text); }
.menu-satir-aciklama { margin-top: 4px; font-size: 13.5px; color: var(--muted); letter-spacing: 0.02em; }
.menu-satir-nokta { flex: 1; border-bottom: 1px dotted rgba(201, 164, 114, 0.35); transform: translateY(-6px); }
.menu-satir-fiyat { font-family: 'Cormorant Garamond', serif; font-size: 22px; color: var(--accent); white-space: nowrap; }

/* ── Hakkımızda ── */
.split {
  padding: 20px 5vw 90px; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
  gap: 70px; align-items: center;
}
.split.alt { padding: 110px 5vw 130px; }
.split img { width: 100%; height: 520px; object-fit: cover; display: block; }
.split-baslik {
  margin: 0 0 26px; font-family: 'Cormorant Garamond', serif; font-weight: 500;
  font-size: clamp(32px, 3.6vw, 46px); line-height: 1.2;
}
.split-metin { margin: 0 0 20px; font-size: 16px; line-height: 1.9; color: var(--muted); }
.split-metin.son { margin-bottom: 0; }
.split-metin.butonlu { margin-bottom: 34px; }
.degerler {
  background: var(--bg-panel);
  border-top: 1px solid rgba(201, 164, 114, 0.12);
  border-bottom: 1px solid rgba(201, 164, 114, 0.12);
  padding: 110px 5vw;
}
.degerler-ic {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 60px;
}
.deger-no { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size: 24px; color: var(--accent); margin-bottom: 18px; }
.deger-baslik { margin: 0 0 14px; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 32px; }
.deger-metin { margin: 0; font-size: 15px; line-height: 1.8; color: var(--muted); }

/* ── İletişim ── */
.iletisim-grid {
  padding: 20px 5vw 90px; max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 70px;
}
.iletisim-bilgiler { display: flex; flex-direction: column; gap: 42px; }
.bilgi-etiket { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; }
.bilgi-deger { font-family: 'Cormorant Garamond', serif; font-size: 26px; line-height: 1.4; }
.bilgi-saat {
  display: flex; justify-content: space-between; gap: 20px; max-width: 340px;
  padding: 10px 0; border-bottom: 1px solid rgba(201, 164, 114, 0.15);
  font-size: 15px; color: var(--muted);
}
.bilgi-saat b { color: var(--text); font-weight: 300; }
.form-kart { background: var(--bg-card); border: 1px solid rgba(201, 164, 114, 0.14); padding: 44px 40px; }
.form-baslik { margin: 0 0 8px; font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 34px; }
.form-not { margin: 0 0 30px; font-size: 14px; color: var(--muted); }
.form-alanlar { display: flex; flex-direction: column; gap: 22px; }
.form-alanlar label {
  display: flex; flex-direction: column; gap: 8px;
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent);
}
.form-alanlar input, .form-alanlar textarea {
  background: none; border: none;
  border-bottom: 1px solid rgba(201, 164, 114, 0.3);
  padding: 10px 2px;
  font-family: 'Jost', sans-serif; font-size: 16px; color: var(--text);
  outline: none; letter-spacing: normal; text-transform: none;
  border-radius: 0;
}
.form-alanlar input:focus, .form-alanlar textarea:focus { border-bottom-color: var(--accent); }
.form-alanlar input::placeholder, .form-alanlar textarea::placeholder { color: rgba(168, 152, 128, 0.6); }
.form-alanlar textarea { resize: vertical; }
.btn-gonder {
  margin-top: 8px;
  background: var(--accent); border: 1px solid var(--accent); color: #14100D;
  font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500;
  letter-spacing: 0.3em; text-transform: uppercase;
  padding: 18px 30px; cursor: pointer;
  transition: all 0.35s ease;
}
.btn-gonder:hover { background: none; color: var(--accent); }
.form-mesaj { margin: 18px 0 0; font-size: 14px; line-height: 1.6; }
.form-mesaj.basari { color: var(--accent); }
.form-mesaj.hata { color: #C96A5C; }
.gizli-alan { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }
.harita { padding: 0 5vw 130px; max-width: 1280px; margin: 0 auto; }
.harita iframe {
  width: 100%; height: 380px; display: block; border: 0;
  filter: grayscale(1) contrast(0.92) brightness(0.9);
}

/* ── Footer ── */
.footer { border-top: 1px solid rgba(201, 164, 114, 0.15); padding: 80px 5vw 40px; background: var(--bg-darker); }
.footer-ic {
  max-width: 1280px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 50px; align-items: start;
}
.footer-logo { display: flex; align-items: baseline; gap: 12px; }
.footer-logo-ad { font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 600; letter-spacing: 0.06em; }
.footer-logo-alt { font-size: 10px; letter-spacing: 0.34em; color: var(--accent); text-transform: uppercase; }
.footer-slogan { margin: 16px 0 0; font-size: 14px; line-height: 1.8; color: var(--muted); max-width: 280px; }
.footer-etiket { font-size: 11px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--accent); margin-bottom: 18px; }
.footer-liste { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; font-size: 14px; color: var(--muted); }
.footer-link { font-size: 14px; color: var(--muted); text-decoration: none; transition: color 0.3s ease; }
.footer-link:hover { color: var(--text); }
.footer-alt {
  max-width: 1280px; margin: 60px auto 0; padding-top: 24px;
  border-top: 1px solid rgba(201, 164, 114, 0.1);
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-size: 12px; letter-spacing: 0.1em; color: #6B5E4D;
}
.footer-yildiz { font-family: 'Cormorant Garamond', serif; font-style: italic; color: var(--accent); }

/* ── Duyarlılık ── */
@media (max-width: 640px) {
  .nav { padding: 18px 5vw; }
  .nav-linkler { gap: 16px; }
  .nav-link { font-size: 10px; letter-spacing: 0.16em; }
  .nav-logo-alt, .nav-logo-cizgi { display: none; }
  .form-kart { padding: 34px 24px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}