/* =========================================================
   Zen Garden Cafe & Restaurant — demo
   Tasarım dili: iki katmanlı header, geniş hero, iki kolonlu
   bant, ortalı kart grid, pill butonlar, 20px yuvarlama.
   ========================================================= */

:root{
  --green:#2F4A3A;
  --green-dark:#24382C;
  --cream:#F5EFE4;
  --band:#EBE3D3;
  --ink:#1F2420;
  --amber:#C8842B;
  --amber-dark:#B2721F;
  --amber-light:#E9AE68;
  --line:#D9CFBC;
  --muted:#5B5A52;

  --r:20px;
  --r-sm:12px;
  --r-pill:999px;

  --font-head:"Zilla Slab","Roboto Slab",Georgia,serif;
  --font-body:"Poppins","Segoe UI",system-ui,sans-serif;
  --font-script:"Caveat Brush","Segoe Script",cursive;

  --ease:all .3s ease;
}

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

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

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

img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--font-head);color:var(--green);line-height:1.12;letter-spacing:-.01em;text-wrap:balance}

section[id]{scroll-margin-top:145px}
p{margin:0 0 1rem}
a{color:inherit}

.container{
  width:90%;
  max-width:1320px;
  margin-inline:auto;
}
@media (min-width:1440px){
  .container{width:80%;max-width:1440px}
}

:focus-visible{
  outline:3px solid var(--green);
  outline-offset:3px;
  border-radius:4px;
}
.reserve :focus-visible{outline-color:var(--amber-light)}

.skip-link{
  position:absolute;
  left:1rem;
  top:-100px;
  z-index:200;
  background:var(--ink);
  color:var(--cream);
  padding:.7rem 1.1rem;
  border-radius:var(--r-sm);
  text-decoration:none;
  font-size:.9rem;
  transition:var(--ease);
}
.skip-link:focus{top:1rem}

/* ---------- ortak bileşenler ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.95rem;
  line-height:1.2;
  padding:.95rem 1.7rem;
  border:1px solid transparent;
  border-radius:var(--r-pill);
  text-decoration:none;
  cursor:pointer;
  transition:var(--ease);
  text-align:center;
}
.btn--sm{font-size:.82rem;padding:.7rem 1.35rem}
.btn--block{width:100%}
.btn--dark{background:var(--ink);color:var(--cream)}
.btn--dark:hover{background:#0E120F}
.btn--amber{background:var(--amber);color:var(--ink)}
.btn--amber:hover{background:var(--amber-dark)}
.ico{flex:0 0 auto}

.script-label{
  font-family:var(--font-script);
  font-size:1.5rem;
  line-height:1;
  color:var(--green);
  margin:0 0 .35rem;
  letter-spacing:.01em;
}
.script-label--light{color:var(--amber-light)}

.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--amber);
  display:inline-block;
  flex:0 0 auto;
}

/* ---------- header ---------- */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:var(--cream);
}

.topbar{
  background:var(--band);
  border-bottom:1px solid var(--line);
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.5rem 0;
}
.topbar__note{
  display:flex;
  align-items:center;
  gap:.55rem;
  margin:0;
  font-size:.8rem;
  color:var(--muted);
  letter-spacing:.01em;
}
.topbar__actions{
  display:flex;
  align-items:center;
  gap:1.3rem;
}
.topbar__call{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.84rem;
  font-weight:600;
  color:var(--green);
  text-decoration:none;
  transition:var(--ease);
}
.topbar__call:hover{color:var(--ink)}

.navbar{border-bottom:1px solid var(--line)}
.navbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:.9rem 0;
  gap:1rem;
}

.wordmark{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  flex:0 0 auto;
}
.wordmark__mark{flex:0 0 auto;height:auto}
.wordmark__text{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.45rem;
  line-height:1.02;
  color:var(--green);
  letter-spacing:-.01em;
}
.wordmark__text small{
  display:block;
  font-family:var(--font-body);
  font-weight:600;
  font-size:.53rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.28rem;
}

.nav ul{
  display:flex;
  align-items:center;
  gap:2rem;
  list-style:none;
  margin:0;
  padding:0;
}
.nav a{
  position:relative;
  display:inline-block;
  padding:.3rem 0;
  font-family:var(--font-head);
  font-weight:600;
  font-size:.98rem;
  color:var(--ink);
  text-decoration:none;
  transition:var(--ease);
}
.nav a::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-2px;
  height:2px;
  background:var(--green);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s ease;
}
.nav a:hover{color:var(--green)}
.nav a:hover::after,
.nav a:focus-visible::after{transform:scaleX(1)}

.nav-toggle{
  display:none;
  width:44px;height:44px;
  padding:0;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  transition:var(--ease);
}
.nav-toggle span{
  display:block;
  width:20px;height:2px;
  background:var(--green);
  border-radius:2px;
  transition:var(--ease);
}

/* ---------- hero ---------- */
.hero{
  padding:clamp(2.5rem,5vw,4.5rem) 0 clamp(3rem,6vw,5.5rem);
}
.hero__inner{
  display:grid;
  grid-template-columns:1.02fr .98fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:center;
}
.hero h1{
  font-size:clamp(2.3rem,4.4vw,4rem);
  font-weight:700;
  line-height:1.04;
  margin:.15rem 0 1.15rem;
}
.hero__lead{
  font-weight:300;
  font-size:clamp(1rem,1.15vw,1.1rem);
  color:var(--muted);
  max-width:46ch;
  margin-bottom:1.9rem;
}
.hero__actions{
  display:flex;
  flex-wrap:wrap;
  gap:.8rem;
}
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:.55rem 1.1rem;
  list-style:none;
  margin:1.9rem 0 0;
  padding:0;
  font-size:.82rem;
  color:var(--muted);
}
.hero__meta li{
  display:flex;
  align-items:center;
  gap:.5rem;
}
.hero__meta li::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--amber);
}

.hero__media{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--band);
}
.hero__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero__badge{
  position:absolute;
  left:1rem;
  bottom:1rem;
  margin:0;
  display:flex;
  align-items:baseline;
  gap:.5rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
  padding:.55rem .9rem;
}
.hero__badge strong{
  font-family:var(--font-head);
  font-size:1.15rem;
  line-height:1;
  color:var(--green);
}
.hero__badge span{
  font-size:.72rem;
  color:var(--muted);
}

/* ---------- hakkımızda ---------- */
.about{
  background:var(--band);
  padding:clamp(3rem,6vw,5.5rem) 0;
  border-block:1px solid var(--line);
}
.about__inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4.5rem);
  align-items:start;
}
.about h2{
  font-size:clamp(1.75rem,2.9vw,2.55rem);
}
.about__body p{
  color:var(--muted);
  font-size:1rem;
  max-width:52ch;
}
.about__body p:last-of-type{margin-bottom:1.8rem}

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:.4rem;
  list-style:none;
  margin:0;
  padding:0;
}
.badges li{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  border:1px solid var(--green);
  border-radius:var(--r-pill);
  padding:.3rem .8rem;
  font-size:.74rem;
  color:var(--green);
  background:transparent;
}
.badges li::before{
  content:"";
  width:5px;height:5px;
  border-radius:50%;
  background:var(--green);
}

/* ---------- menü ---------- */
.menu{
  padding:clamp(3.5rem,7vw,6rem) 0 clamp(2.5rem,4vw,3.5rem);
}
.section-head{
  max-width:660px;
  margin:0 auto;
  text-align:center;
}
.section-head h2{
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  margin-bottom:.9rem;
}
.section-head__sub{
  color:var(--muted);
  font-weight:300;
  font-size:.98rem;
}

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(2rem,3.4vw,3.2rem) clamp(1.4rem,2.6vw,2.2rem);
  margin-top:clamp(2.2rem,4vw,3.4rem);
}
.card{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.card__media{
  width:100%;
  aspect-ratio:4/3;
  overflow:hidden;
  border-radius:var(--r);
  background:var(--band);
}
.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .7s ease;
}
.card:hover .card__media img,
.card:focus-within .card__media img{transform:scale(1.1)}

.card h3{
  font-size:1.3rem;
  font-weight:700;
  margin:1.15rem 0 .4rem;
}
.card p{
  font-size:.9rem;
  line-height:1.6;
  color:var(--muted);
  margin:0 0 1.2rem;
  max-width:32ch;
}
.card .btn{margin-top:auto}

.menu__note{
  margin:clamp(2.2rem,4vw,3rem) 0 0;
  text-align:center;
  font-size:.8rem;
  color:var(--muted);
}

/* ---------- galeri ---------- */
.gallery{
  padding:0 0 clamp(3.5rem,6vw,5rem);
}
.gallery__head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  border-top:1px solid var(--line);
  padding-top:1.5rem;
  margin-bottom:1.3rem;
}
.gallery__title{
  font-size:1.15rem;
  font-weight:700;
}
.gallery__sub{
  margin:0;
  font-size:.82rem;
  color:var(--muted);
}
.gallery__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:.9rem;
}
.gallery__grid img{
  width:100%;
  height:100%;
  aspect-ratio:4/3;
  object-fit:cover;
  border-radius:var(--r-sm);
  transition:transform .7s ease;
}
.gallery__grid img:hover{transform:scale(1.03)}

/* ---------- rezervasyon ---------- */
.reserve{
  background:var(--green);
  color:#F1EADD;
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.reserve__inner{
  display:grid;
  grid-template-columns:1fr 1.02fr;
  gap:clamp(2.2rem,5vw,4.5rem);
  align-items:start;
}
.reserve h2{
  color:var(--cream);
  font-size:clamp(1.9rem,3.2vw,2.7rem);
  margin-bottom:1rem;
}
.reserve__lead{
  color:#E4DBCB;
  font-weight:300;
  font-size:.98rem;
  max-width:44ch;
}
.reserve__note{
  color:#C9C2B2;
  font-size:.78rem;
  line-height:1.6;
  border-left:2px solid var(--amber);
  padding-left:.85rem;
  max-width:44ch;
}
.reserve__phone{
  display:flex;
  flex-direction:column;
  gap:.15rem;
  margin:1.8rem 0 0;
}
.reserve__phone span{
  font-size:.7rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#C9C2B2;
}
.reserve__phone a{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.5rem;
  color:var(--cream);
  text-decoration:none;
  transition:var(--ease);
}
.reserve__phone a:hover{color:var(--amber-light)}

.reserve__form{
  background:rgba(245,239,228,.07);
  border:1px solid rgba(245,239,228,.2);
  border-radius:var(--r);
  padding:clamp(1.2rem,2.4vw,2rem);
}
.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1rem;
}
.field--full{grid-column:1 / -1}
.field label{
  display:block;
  font-size:.7rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:600;
  color:#DCD3C2;
  margin-bottom:.35rem;
}
.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--font-body);
  font-size:.92rem;
  color:var(--ink);
  background:var(--cream);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  padding:.7rem .85rem;
  transition:var(--ease);
}
.field textarea{resize:vertical;min-height:74px}
.field input::placeholder,
.field textarea::placeholder{color:#8A877C}
.field input:hover,
.field textarea:hover{border-color:var(--line)}
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(200,132,43,.35);
}
.field__error{
  margin:.35rem 0 0;
  font-size:.76rem;
  color:#FFD3A8;
  font-weight:600;
}
.field--invalid input,
.field--invalid select,
.field--invalid textarea{
  border-color:var(--amber-light);
  box-shadow:0 0 0 2px rgba(233,174,104,.55);
}

.reserve__form .btn{margin-top:1.2rem}
.form__status{
  margin:.8rem 0 0;
  font-size:.82rem;
  color:var(--cream);
  min-height:1.2em;
}
.form__status a{color:var(--amber-light);font-weight:600}

/* ---------- konum ---------- */
.location{
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.location__inner{
  display:grid;
  grid-template-columns:1fr 1.08fr;
  gap:clamp(2rem,4.5vw,4rem);
  align-items:stretch;
}
.location h2{
  font-size:clamp(1.7rem,2.8vw,2.4rem);
  margin-bottom:1.1rem;
}
.location__address{
  font-style:normal;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.75;
  margin-bottom:1rem;
  max-width:34ch;
}
.location__row{
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:.2rem;
}
.location__phone{
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.35rem;
  color:var(--green);
  text-decoration:none;
  transition:var(--ease);
}
.location__phone:hover{color:var(--ink)}
.icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--green);
  transition:var(--ease);
}
.icon-link:hover{background:var(--green);color:var(--cream);border-color:var(--green)}
.location__hours{
  font-size:.85rem;
  color:var(--muted);
  margin:.6rem 0 1.6rem;
}
.location__map{
  position:relative;
  border-radius:var(--r);
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--band);
  min-height:360px;
}
.location__map iframe{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  height:100%;
  min-height:360px;
  border:0;
}

/* ---------- footer ---------- */
.site-footer{
  background:var(--band);
  border-top:1px solid var(--line);
  padding:clamp(2.5rem,4vw,3.5rem) 0 1.6rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.4fr 1fr 1fr;
  gap:clamp(1.8rem,4vw,3.5rem);
}
.wordmark--footer{margin-bottom:1rem}
.footer__brand address{
  font-style:normal;
  font-size:.85rem;
  line-height:1.75;
  color:var(--muted);
}
.footer__nav h3,
.footer__contact h3{
  font-size:1rem;
  font-weight:700;
  margin-bottom:.9rem;
}
.footer__nav ul{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.35rem;
}
.footer__nav a{
  font-size:.88rem;
  color:var(--muted);
  text-decoration:none;
  transition:var(--ease);
}
.footer__nav a:hover{color:var(--green);text-decoration:underline;text-underline-offset:3px}
.footer__contact p{
  font-size:.85rem;
  color:var(--muted);
  margin-bottom:.6rem;
}
.footer__phone{
  display:block;
  font-family:var(--font-head);
  font-weight:700;
  font-size:1.2rem;
  color:var(--green);
  text-decoration:none;
  margin-bottom:1rem;
}
.footer__phone:hover{color:var(--ink)}
.footer__demo{
  margin:clamp(2rem,3.5vw,2.8rem) 0 0;
  padding-top:1.2rem;
  border-top:1px solid var(--line);
  font-size:.74rem;
  color:var(--muted);
}

/* ---------- sabit yan sekme ---------- */
.side-tab{
  position:fixed;
  right:0;
  top:50%;
  transform:translateY(-50%);
  z-index:70;
  writing-mode:vertical-rl;
  background:var(--amber);
  color:var(--ink);
  font-family:var(--font-head);
  font-weight:700;
  font-size:.85rem;
  letter-spacing:.1em;
  text-decoration:none;
  padding:1.15rem .7rem;
  border-radius:14px 0 0 14px;
  transition:var(--ease);
}
.side-tab:hover{background:var(--amber-dark)}

/* =========================================================
   kırılımlar
   ========================================================= */
@media (max-width:1023px){
  .nav{display:none}
  .nav.is-open{
    display:block;
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:var(--cream);
    border-bottom:1px solid var(--line);
  }
  .nav ul{
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.4rem 5% .8rem;
  }
  .nav li{border-bottom:1px solid var(--line)}
  .nav li:last-child{border-bottom:0}
  .nav a{display:block;padding:.95rem 0;font-size:1.05rem}
  .nav a::after{display:none}
  .nav-toggle{display:flex}
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .hero__inner{grid-template-columns:1fr}
  .hero__media{max-width:620px}
  .about__inner{grid-template-columns:1fr;gap:1.4rem}
  .about__body p{max-width:none}
  .reserve__inner{grid-template-columns:1fr}
  .location__inner{grid-template-columns:1fr}
  .location__map{min-height:340px}
  .cards{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr}
}

@media (max-width:767px){
  section[id]{scroll-margin-top:120px}
  .topbar__note{display:none}
  .topbar__inner{padding:.45rem 0;justify-content:flex-end;gap:.6rem}
  .topbar__actions{gap:.8rem}
  .topbar .btn--sm{font-size:.74rem;padding:.55rem 1rem}
  .topbar__call span{display:none}
  .navbar__inner{padding:.75rem 0}
  .wordmark__text{font-size:1.2rem}
  .wordmark__text small{font-size:.46rem;letter-spacing:.18em}
  .wordmark__mark{width:38px;height:38px}

  .hero{padding-top:1.8rem}
  .hero__actions .btn{flex:1 1 100%}

  .gallery__grid{grid-template-columns:repeat(2,1fr)}
  .gallery__head{flex-direction:column;gap:.15rem}

  .footer__grid{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
  .side-tab{display:none}
  .hero__badge{left:.7rem;bottom:.7rem;padding:.45rem .75rem}
}

@media (max-width:479px){
  .cards{grid-template-columns:1fr}
  .card p{max-width:34ch}
  .hero__badge span{font-size:.66rem}
}

/* ---------- hareket azaltma ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .card:hover .card__media img,
  .card:focus-within .card__media img,
  .gallery__grid img:hover{transform:none}
}

/* ---------- eklemeler ---------- */
.about__inner{align-items:center}
.card__note{font-size:.74rem;color:var(--muted);font-style:italic;margin:.1rem 0 .8rem}
.map-fallback{
  position:absolute;inset:0;z-index:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:.6rem;padding:1.5rem;text-align:center;
  background:var(--band);color:var(--green);
}
.map-fallback__title{font-family:var(--font-display,inherit);font-weight:700;font-size:1.15rem;margin:0}
.map-fallback__addr{margin:0;color:var(--ink);font-size:.95rem}
.map-chip{
  position:absolute;z-index:2;right:.7rem;bottom:.7rem;
  background:var(--green);color:var(--cream);
  font-size:.8rem;font-weight:600;padding:.45rem .8rem;border-radius:999px;text-decoration:none;
}
.map-chip:hover{background:var(--ink)}