:root {
  --paper: #f4ede1;
  --ink: #2c211b;
  --muted: #77685b;
  --wine: #742721;
  --serif: "Cormorant Garamond", Georgia, serif;
  --display: "Italiana", "Times New Roman", serif;
  --sans: "Inter", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; }
body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(circle at top left, rgba(169,137,97,.08), transparent 36%),
    radial-gradient(circle at bottom right, rgba(116,39,33,.06), transparent 30%),
    var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  overflow: hidden;
}
body.modal-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
main { height: 100%; }

.grain {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  opacity: .12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
}

.topbar {
  position: absolute;
  inset: 0 0 auto;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 24px clamp(24px, 4vw, 70px);
}
.brand-mini {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 22px;
  max-width: 650px;
  padding: 8px 14px 8px 0;
}
.brand-logo {
  width: 185px;
  height: 185px;
  object-fit: cover;
  filter: sepia(.08) contrast(1.02);
  flex: 0 0 auto;
  position: relative;
  z-index: 1;
}
.brand-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  z-index: 1;
}
.brand-stack strong {
  font-family: var(--serif);
  font-size: 1.32rem;
  letter-spacing: .2em;
  line-height: 1.05;
}
.brand-sub {
  font-size: .88rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--muted);
}
.header-nav {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 16px;
}
.nav-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 138px;
  height: 46px;
  padding: 0 20px;
  border: 1px solid rgba(44, 33, 27, .18);
  background: rgba(255,255,255,.32);
  backdrop-filter: blur(4px);
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .16em;
  transition: .22s ease;
  cursor: pointer;
}
.nav-button:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.lang-switch {
  min-width: 96px;
  gap: 10px;
  letter-spacing: .12em;
}
.lang-switch::before {
  content: "";
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  opacity: .55;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}
.lang-switch.lang-en::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='8' fill='%23cfcfcf'/%3E%3Cpath fill='%23f2f2f2' d='M0 0h64v64H0z'/%3E%3Cpath fill='%23bcbcbc' d='M0 0 64 64M64 0 0 64' stroke='%23bcbcbc' stroke-width='10'/%3E%3Cpath fill='none' stroke='%239e9e9e' stroke-width='6' d='M0 0 64 64M64 0 0 64'/%3E%3Cpath fill='none' stroke='%23f2f2f2' stroke-width='14' d='M32 0v64M0 32h64'/%3E%3Cpath fill='none' stroke='%23959595' stroke-width='8' d='M32 0v64M0 32h64'/%3E%3C/svg%3E");
}
.lang-switch.lang-tr::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Crect width='64' height='64' rx='8' fill='%23d0d0d0'/%3E%3Ccircle cx='30' cy='32' r='14' fill='%23f2f2f2'/%3E%3Ccircle cx='34' cy='32' r='11' fill='%23c7c7c7'/%3E%3Cpath fill='%23f2f2f2' d='m45.5 32-5.3 1.7 3.3 4.4-5.2-2 0.1 5.6-3-4.7-3 4.7 0.1-5.6-5.2 2 3.3-4.4-5.3-1.7 5.3-1.7-3.3-4.4 5.2 2-0.1-5.6 3 4.7 3-4.7-0.1 5.6 5.2-2-3.3 4.4z' transform='translate(4 0) scale(.32)'/%3E%3C/svg%3E");
}

.hero {
  position: relative;
  height: 100svh;
  min-height: 760px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 128px clamp(24px, 5vw, 72px) 34px;
  isolation: isolate;
}
.hero::before,
.hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -2;
}
.hero::before {
  inset: 18px;
  border: 1px solid rgba(95, 72, 53, .32);
}
.hero::after {
  inset: 28px;
  border: 1px solid rgba(95, 72, 53, .18);
  border-radius: 26px 0 26px 0;
}
.hero-inner {
  width: min(1340px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
}
.hero-copy {
  max-width: 880px;
  text-align: center;
}
.eyebrow {
  font-size: .69rem;
  font-weight: 600;
  letter-spacing: .42em;
  color: var(--muted);
  margin: 0 0 18px;
}
.hero h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3rem, 5.6vw, 5.2rem);
  line-height: .98;
  letter-spacing: -.03em;
  margin: 0;
}
.hero h1 em {
  font-family: var(--serif);
  font-weight: 600;
  color: var(--wine);
}
.hero-text {
  max-width: 650px;
  margin: 18px auto 0;
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.26rem);
  line-height: 1.55;
  color: #54483e;
}

.corner-pattern {
  position: absolute;
  width: 240px;
  height: 240px;
  opacity: .15;
  pointer-events: none;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='240' height='240' viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23634a39' stroke-width='2'%3E%3Cpath d='M16 114c44 0 78-34 78-78M114 16c0 44-34 78-78 78'/%3E%3Cpath d='M18 182c52 0 94-42 94-94'/%3E%3Cpath d='M44 204c42-5 73-36 78-78'/%3E%3Ccircle cx='76' cy='76' r='8'/%3E%3Ccircle cx='114' cy='36' r='5'/%3E%3Ccircle cx='36' cy='114' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
.pattern-left { left: 22px; top: 138px; }
.tile-pattern {
  position: absolute;
  width: 160px;
  height: 160px;
  opacity: .11;
  z-index: -1;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23634a39' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 146c20-54 62-91 118-108'/%3E%3Cpath d='M34 160c10-34 33-61 65-81'/%3E%3Cpath d='M20 142c14 9 27 15 41 18'/%3E%3Cpath d='M72 40c21-13 44-22 68-27'/%3E%3Ccircle cx='64' cy='86' r='10'/%3E%3Ccircle cx='96' cy='108' r='7'/%3E%3Ccircle cx='118' cy='76' r='12'/%3E%3Ccircle cx='136' cy='114' r='8'/%3E%3Ccircle cx='84' cy='132' r='5'/%3E%3C/g%3E%3C/svg%3E");
}
.tile-b { left: 120px; bottom: 88px; }
.windmill-icon {
  position: absolute;
  right: 105px;
  top: 108px;
  width: 140px;
  height: 190px;
  opacity: .11;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg width='140' height='190' viewBox='0 0 140 190' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%235e4636' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M69 73v19'/%3E%3Cpath d='M69 93 49 173h40L69 93Z'/%3E%3Ccircle cx='69' cy='70' r='7'/%3E%3Cpath d='M69 70 34 38l27-5 8 37Z'/%3E%3Cpath d='M69 70 101 35l5 27-37 8Z'/%3E%3Cpath d='M69 70 103 102l-27 5-7-37Z'/%3E%3Cpath d='M69 70 36 103l-5-27 38-6Z'/%3E%3C/g%3E%3C/svg%3E");
}
.windmill-mark {
  position: absolute;
  right: 28px;
  bottom: 28px;
  width: 480px;
  height: 690px;
  opacity: .15;
  z-index: -1;
  pointer-events: none;
  background: url('assets/windmill-silhouette.png') right bottom / contain no-repeat;
  filter: grayscale(1) saturate(0) brightness(.92) contrast(.92);
}

.action-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 0;
}
.action-card {
  position: relative;
  width: min(31vw, 350px);
  aspect-ratio: 1 / 1;
  border: 0;
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  background: none;
  color: var(--paper);
  text-align: left;
  isolation: isolate;
  box-shadow: 0 22px 56px rgba(43,33,27,.16);
}
.action-card + .action-card { border-left: 1px solid rgba(244,237,225,.38); }
.action-card::after {
  content: "";
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(244,237,225,.36);
  z-index: 2;
  transition: inset .3s ease, border-color .3s ease;
  pointer-events: none;
}
.action-card:hover::after {
  inset: 10px;
  border-color: rgba(244,237,225,.75);
}
.map-card iframe {
  position: absolute;
  inset: -20%;
  width: 140%;
  height: 140%;
  border: 0;
  filter: grayscale(1) sepia(.28) contrast(1.05);

}
.card-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(24,18,14,.14), rgba(24,18,14,.8));
  z-index: 1;

}
.menu-card { background: #9b7e5b; }
.reserve-card { background: var(--wine); }
.menu-pattern, .vine-pattern {
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .3;
  transition: transform .55s ease;
}
.action-card:hover .menu-pattern,
.action-card:hover .vine-pattern { transform: scale(1.05); }
.menu-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='420' height='420' viewBox='0 0 420 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23f4ede1' stroke-opacity='.34' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='122' y='80' width='176' height='250' rx='18'/%3E%3Cpath d='M150 126h120M150 158h96M150 190h108M150 222h84M150 254h110' stroke-width='6'/%3E%3Cpath d='M180 80c0-12 9-22 22-22h16c13 0 22 10 22 22' stroke-width='5'/%3E%3Cpath d='M110 120h24M110 160h24M110 200h24M110 240h24' stroke-width='4' stroke-dasharray='2 10'/%3E%3Cpath d='M308 120h24M308 160h24M308 200h24M308 240h24' stroke-width='4' stroke-dasharray='2 10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
}
.vine-pattern {
  background-image: url("data:image/svg+xml,%3Csvg width='420' height='420' viewBox='0 0 420 420' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%23f4ede1' stroke-opacity='.5' stroke-width='2'%3E%3Cpath d='M84 430c15-96 63-154 139-197 59-34 97-84 113-155'/%3E%3Cpath d='M181 260c-53-5-88-31-104-79 50-8 90 11 116 56M251 207c43 7 80-5 111-38-39-21-80-17-117 12M302 149c-28-24-39-55-33-93 40 12 62 38 66 77'/%3E%3Ccircle cx='75' cy='181' r='12'/%3E%3Ccircle cx='103' cy='176' r='12'/%3E%3Ccircle cx='89' cy='202' r='12'/%3E%3Ccircle cx='118' cy='205' r='12'/%3E%3Ccircle cx='101' cy='228' r='12'/%3E%3C/g%3E%3C/svg%3E");
  background-size: cover;
}
.action-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(26px, 2.8vw, 36px);
}
.action-icon {
  width: clamp(50px, 4.4vw, 60px);
  height: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  margin-bottom: auto;
}
.action-card h3 {
  font-family: var(--display);
  font-size: clamp(2.1rem, 2.7vw, 2.7rem);
  font-weight: 400;
  line-height: .95;
  margin: 0 0 8px;
  letter-spacing: -.03em;
}
.action-card p {
  margin: 0;
  font-size: .74rem;
  text-transform: uppercase;
  letter-spacing: .18em;
  opacity: .82;
}

.menu-modal {
  width: min(940px, calc(100vw - 28px));
  height: min(92vh, 1040px);
  padding: 0;
  border: 1px solid #75624f;
  background: #171210;
  color: var(--paper);
  box-shadow: 0 30px 100px rgba(0,0,0,.45);
}
.menu-modal::backdrop { background: rgba(20,15,12,.82); backdrop-filter: blur(7px); }
.modal-toolbar {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 20px;
  background: rgba(23,18,16,.94);
  border-bottom: 1px solid rgba(244,237,225,.17);
}
.modal-eyebrow { font-size: .58rem; letter-spacing: .28em; color: #c6aa86; }
.modal-toolbar h2 { margin: 2px 0 0; font-family: var(--display); font-weight: 400; }
.modal-close {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(244,237,225,.4);
  background: transparent;
  color: inherit;
  font-size: 1.9rem;
  line-height: 1;
  cursor: pointer;
}
.menu-canvas {
  height: calc(100% - 79px);
  overflow: auto;
  padding: clamp(12px, 3vw, 30px);
  text-align: center;
}
.menu-canvas img { width: min(100%, 760px); height: auto; box-shadow: 0 16px 50px rgba(0,0,0,.35); }

.reveal { opacity: 0; transform: translateY(22px); animation: reveal .9s .1s ease forwards; }
.action-section.reveal { animation-delay: .22s; }
@keyframes reveal { to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .hero { min-height: 720px; }
  .action-card { width: min(32vw, 320px); }
}

@media (max-width: 900px) {
  body { overflow: auto; }
  .topbar {
    position: relative;
    padding-bottom: 8px;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .header-nav { align-self: flex-end; margin-top: 4px; }
  .hero {
    height: auto;
    min-height: calc(100svh - 10px);
    padding-top: 18px;
    padding-bottom: 28px;
  }
  .hero-inner { gap: 26px; }
  .action-section {
    flex-wrap: nowrap;
    width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
    padding-bottom: 4px;
    scrollbar-width: thin;
  }
  .action-card {
    width: min(68vw, 300px);
    flex: 0 0 auto;
  }
  .windmill-icon { right: 36px; top: 138px; width: 108px; height: 148px; }
  .windmill-mark { right: 20px; bottom: 20px; width: 308px; height: 443px; }
}

@media (max-width: 640px) {
  .topbar { padding: 16px 18px 8px; }
  .brand-mini { gap: 14px; max-width: 100%; }
  .brand-logo { width: 135px; height: 135px; }
  .brand-stack strong { font-size: 1.08rem; letter-spacing: .16em; }
  .brand-sub { font-size: .72rem; }
  .header-nav { width: 100%; justify-content: flex-end; gap: 10px; margin-top: 2px; }
  .nav-button { min-width: 0; padding: 0 14px; height: 40px; font-size: .64rem; }
  .lang-switch { min-width: 78px; gap: 8px; }
  .lang-switch::before { width: 14px; height: 14px; flex-basis: 14px; }
  .hero { padding: 12px 16px 18px; }
  .hero::before { inset: 8px; }
  .hero::after { inset: 14px; }
  .hero h1 { font-size: clamp(2.45rem, 10.8vw, 3.8rem); }
  .hero-text { font-size: .98rem; max-width: 460px; }
  .corner-pattern { width: 132px; height: 132px; opacity: .12; }
  .pattern-left { top: 98px; left: 2px; }
  .tile-pattern { width: 92px; height: 92px; }
  .tile-b { left: 26px; bottom: 88px; }
  .windmill-icon { right: 10px; top: 126px; width: 82px; height: 118px; opacity: .09; }
  .windmill-mark { right: 14px; bottom: 14px; width: 218px; height: 315px; opacity: .12; }
  .action-card { width: min(80vw, 285px); }
  .action-content { padding: 20px; }
  .action-card h3 { font-size: 1.82rem; }
}

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