/* Hortma: "Hortma'da Bir Gün". Sayfa sabahtan geceye gökyüzü gibi akar. */
:root {
  --gold: #D4AA6E;
  --gold-deep: #7A5A2C;
  --night: #0C1B2E;
  --deep: #081422;
  --sea: #0E5A66;
  --sky: #DCE8EA;
  --peach: #EDB48F;
  --coral: #B4553A;
  --macrame: #F1E3C8;
  --serif: 'Cormorant', 'Times New Roman', serif;
  --sans: 'Albert Sans', system-ui, sans-serif;
  --ease: cubic-bezier(.22, .9, .24, 1);
  --ease-soft: cubic-bezier(.32, .72, 0, 1);
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --sec: clamp(5rem, 11vw, 10.5rem);
  --key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='24'%3E%3Cpath d='M0 22H40M32 22V3H9V16H23V9H15' fill='none' stroke='%23D4AA6E' stroke-width='1.6'/%3E%3C/svg%3E");
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 6rem; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--night); color: var(--macrame);
  font: 400 1.0625rem/1.65 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
em { font-style: italic; font-weight: 400; }
svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid var(--focus, var(--gold)); outline-offset: 3px; border-radius: 4px; }
.skip { position: fixed; top: -4rem; left: 1rem; z-index: 40; padding: .7rem 1.2rem; background: var(--gold); color: var(--night); border-radius: 99px; }
.skip:focus { top: 1rem; }
.wrap { width: 100%; max-width: 1560px; margin-inline: auto; padding-inline: var(--pad); }

/* Tema: her bölüm günün bir saati */
.t-sky   { --ink: #10283C; --muted: #3C5563; --accent: #6F4F22; --line: rgba(16,40,60,.2); --focus: #10283C; background: var(--sky); color: var(--ink); }
.t-sea   { --ink: #F5EEDD; --muted: #CFE3E0; --accent: #EBCB95; --line: rgba(245,238,221,.25); background: var(--sea); color: var(--ink); }
.t-peach { --ink: #2B1612; --muted: #54302A; --accent: #7F2F19; --line: rgba(43,22,18,.24); --focus: #2B1612; background: var(--peach); color: var(--ink); }
.t-night { --ink: #F1E3C8; --muted: #B9BFC2; --accent: var(--gold); --line: rgba(212,170,110,.28); background: var(--night); color: var(--ink); }
.t-deep  { --ink: #F1E3C8; --muted: #AEB6BA; --accent: var(--gold); --line: rgba(212,170,110,.26); background: var(--deep); color: var(--ink); }

.blend { height: clamp(130px, 22vw, 300px); }
.b-dawn  { background: linear-gradient(#0C1B2E, #33546a 38%, #93b4bf 72%, var(--sky)); }
.b-sea   { background: linear-gradient(var(--sky), #7fb5b8 55%, var(--sea)); }
.b-peach { background: linear-gradient(var(--sea), #7a9a90 42%, #d6b08f 76%, var(--peach)); }
.b-night { background: linear-gradient(var(--peach), var(--coral) 30%, #57304a 62%, var(--night)); }

/* Tipografi */
.h-xxl, .h-xl, .h-lg, .night-title, .hero-title { font-family: var(--serif); font-weight: 500; letter-spacing: -.022em; line-height: .96; text-wrap: balance; }
.h-xxl { font-size: clamp(3.3rem, 9.4vw, 9.5rem); line-height: .92; }
.h-xl  { font-size: clamp(2.9rem, 6.1vw, 6.2rem); }
.h-lg  { font-size: clamp(2.3rem, 4.2vw, 4.3rem); }
em { color: var(--accent); }
.eyebrow { display: inline-flex; align-items: center; gap: .7rem; font-size: .78rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-bottom: 1.5rem; }
.sun { width: .65rem; height: .65rem; border-radius: 50%; background: currentColor; }
.lead { font-size: clamp(1.08rem, 1.35vw, 1.28rem); line-height: 1.6; color: var(--muted); max-width: 34rem; font-weight: 400; }
.lead + .lead { margin-top: 1rem; }

/* Düğmeler */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 1rem;
  min-height: 3.5rem; padding: .4rem .45rem .4rem 1.6rem; border-radius: 99px; overflow: hidden; isolation: isolate;
  font: 500 1rem/1.2 var(--sans); text-decoration: none; border: 0; cursor: pointer;
  transition: transform .5s var(--ease-soft), color .45s var(--ease-soft);
}
.btn::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transform: translateY(101%); transition: transform .6s var(--ease-soft); }
.btn:hover::before { transform: translateY(0); }
.btn:active { transform: scale(.98); }
.btn-ic { flex: none; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 50%; transition: transform .55s var(--ease-soft); font-weight: 400; }
.btn:hover .btn-ic { transform: translate(2px, -2px) scale(1.06); }
.btn-gold { background: var(--gold); color: var(--night); }
.btn-gold::before { background: var(--macrame); }
.btn-gold .btn-ic { background: var(--night); color: var(--gold); }
.btn-ink { background: var(--ink); color: var(--sky); }
.t-peach .btn-ink { color: var(--peach); }
.btn-ink::before { background: var(--accent); }
.btn-ink .btn-ic { background: rgba(255,255,255,.14); }
.btn-line { box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.btn-line::before { background: var(--gold); }
.btn-line:hover { color: var(--night); }
.btn-line .btn-ic { background: rgba(212,170,110,.16); color: var(--gold); }
.btn-line:hover .btn-ic { color: var(--night); }
.btn-full { width: 100%; }

/* Üst menü: yüzen ada */
.nav { position: fixed; z-index: 30; inset: 1rem 0 auto; display: flex; justify-content: center; padding-inline: 1rem; pointer-events: none; }
.nav-pill {
  pointer-events: auto; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.2rem);
  padding: .55rem .6rem .55rem .6rem; border-radius: 99px; color: var(--macrame);
  background: rgba(12,27,46,.0); box-shadow: inset 0 0 0 1px rgba(241,227,200,.0);
  transition: background .6s var(--ease-soft), box-shadow .6s var(--ease-soft), padding .6s var(--ease-soft), transform .6s var(--ease-soft);
}
.nav.scrolled .nav-pill { background: rgba(12,27,46,.82); box-shadow: inset 0 0 0 1px rgba(212,170,110,.28), 0 18px 50px -20px rgba(8,20,34,.55); padding-block: .3rem; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.brand { display: flex; align-items: center; gap: .7rem; text-decoration: none; }
.medal { display: block; flex: none; width: 3.3rem; height: 3.3rem; border-radius: 50%; background: var(--night); overflow: hidden; isolation: isolate; transition: transform .6s var(--ease-soft); }
.medal img { width: 100%; height: 100%; filter: invert(1) hue-rotate(180deg) brightness(1.25); mix-blend-mode: screen; }
.nav.scrolled .medal { transform: scale(.88); }
.brand-name { font: 500 1.5rem/1 var(--serif); letter-spacing: .14em; text-transform: uppercase; }
.nav-links { display: flex; gap: clamp(.9rem, 1.9vw, 1.8rem); }
.nav-links a { position: relative; padding: .5rem 0; font-size: .95rem; text-decoration: none; }
.nav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: .25rem; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: right; transition: transform .5s var(--ease-soft); }
.nav-links a:hover::after, .nav-links a:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.nav-cta { padding: .75rem 1.35rem; border-radius: 99px; background: var(--gold); color: var(--night); font-size: .95rem; font-weight: 500; text-decoration: none; transition: background .45s var(--ease-soft), transform .45s var(--ease-soft); }
.nav-cta:hover { background: var(--macrame); }
.nav-cta:active { transform: scale(.97); }
.burger { display: none; position: relative; width: 3rem; height: 3rem; border: 0; border-radius: 50%; background: rgba(241,227,200,.12); cursor: pointer; }
.burger span { position: absolute; left: .85rem; right: .85rem; top: 50%; height: 1.5px; background: var(--macrame); transition: transform .55s var(--ease-soft); }
.burger span:first-child { transform: translateY(-4px); }
.burger span:last-child { transform: translateY(4px); }
.burger[aria-expanded=true] span:first-child { transform: rotate(45deg); }
.burger[aria-expanded=true] span:last-child { transform: rotate(-45deg); }

.menu {
  position: fixed; z-index: 25; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 2.5rem;
  padding: 6rem var(--pad) 2rem; background: var(--deep); color: var(--macrame);
  opacity: 0; transition: opacity .45s var(--ease-soft);
}
.menu[hidden] { display: none; }
.menu.open { opacity: 1; }
.menu nav { display: grid; gap: .3rem; }
.menu nav a { display: block; overflow: hidden; font: 500 clamp(3rem, 15vw, 5rem)/1.1 var(--serif); text-decoration: none; }
.menu nav a i { display: block; font-style: normal; transform: translateY(105%); transition: transform .8s var(--ease); }
.menu.open nav a i { transform: none; }
.menu.open nav a:nth-child(2) i { transition-delay: .05s; }
.menu.open nav a:nth-child(3) i { transition-delay: .1s; }
.menu.open nav a:nth-child(4) i { transition-delay: .15s; }
.menu.open nav a:nth-child(5) i { transition-delay: .2s; }
.menu-foot { display: flex; flex-wrap: wrap; gap: .5rem 1.6rem; color: var(--gold); }
.menu-foot a { padding: .4rem 0; }

/* Gün göstergesi */
.rail { position: fixed; z-index: 15; right: 1.5rem; top: 50%; transform: translateY(-50%); display: none; gap: 1rem; padding: 1rem .9rem; border-radius: 99px; background: rgba(12,27,46,.72); color: rgba(241,227,200,.65); opacity: 0; transition: opacity .6s var(--ease-soft); font-size: .72rem; letter-spacing: .08em; }
.rail.show { opacity: 1; }
.rail li { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; transition: color .5s var(--ease-soft); }
.rail li::after { content: ''; width: .45rem; height: .45rem; border-radius: 50%; background: currentColor; transition: transform .5s var(--ease-soft); }
.rail li.on { color: var(--gold); }
.rail li.on::after { transform: scale(1.7); }
@media (min-width: 1500px) { .rail { display: grid; } }

/* Hero */
.hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; overflow: clip; background: var(--night); }
.hero-media { position: absolute; inset: 0; animation: heroIn 1.8s var(--ease) both; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }
.hero::after { content: ''; position: absolute; inset: 0; background:
  linear-gradient(rgba(8,20,34,.62), rgba(8,20,34,0) 22%),
  linear-gradient(0deg, rgba(8,20,34,.96) 4%, rgba(8,20,34,.72) 36%, rgba(8,20,34,.3) 58%, rgba(8,20,34,0) 74%); pointer-events: none; }
.hero-body { position: relative; z-index: 1; width: 100%; max-width: 1560px; margin-inline: auto; padding: 7rem var(--pad) clamp(1.75rem, 3.5vw, 3rem); }
.hero-eyebrow { font-size: .8rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: #F4DFB8; margin-bottom: 1rem; animation: fadeUp 1s .2s var(--ease) both; }
.hero-title { font-size: clamp(3.75rem, 11.2vw, 11.5rem); line-height: .9; color: #FBF4E4; text-shadow: 0 2px 34px rgba(8,20,34,.5); }
.hero-eyebrow { text-shadow: 0 1px 14px rgba(8,20,34,.75); }
.hero-title em { color: var(--gold); }
.line { display: block; overflow: hidden; padding: .06em .08em .24em 0; margin-bottom: -.24em; }
.line > span { display: block; animation: rise 1.25s var(--ease) both; animation-delay: .25s; }
.line + .line > span { animation-delay: .4s; }
.hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.5rem 3rem; margin-top: clamp(1.25rem, 2.5vw, 2rem); animation: fadeUp 1.1s .7s var(--ease) both; }
.hero-lead { max-width: 33rem; font-size: clamp(1.05rem, 1.3vw, 1.22rem); line-height: 1.55; color: #EFE6D2; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; }
.link-rate { display: inline-flex; align-items: center; gap: .65rem; min-height: 3rem; color: #EFE6D2; text-decoration: none; font-size: .92rem; }
.link-rate strong { font: 500 2rem/1 var(--serif); color: var(--gold); }
.link-rate span { text-decoration: underline; text-decoration-color: rgba(212,170,110,.5); text-underline-offset: 4px; }
@keyframes rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes heroIn { from { transform: scale(1.09); opacity: .4; } to { transform: none; opacity: 1; } }

/* Meander ve kayan yazı */
.key { height: 24px; background: var(--key) repeat-x center; opacity: .75; }
.ticker { background: var(--night); padding-block: .9rem 0; overflow: hidden; }
.ticker-track { display: flex; width: max-content; padding-block: clamp(.8rem, 1.6vw, 1.4rem); animation: slide 42s linear infinite; }
.ticker-track > div { display: flex; align-items: center; }
.ticker-track span { font: italic 400 clamp(1.8rem, 3.6vw, 3.4rem)/1.1 var(--serif); color: var(--macrame); white-space: nowrap; }
.ticker-track i { width: .5rem; height: .5rem; margin-inline: clamp(1.4rem, 3vw, 3rem); border-radius: 50%; background: var(--gold); }
.ticker .key:last-child { transform: scaleY(-1); }
@keyframes slide { to { transform: translateX(-50%); } }

/* Hikâye */
.story { padding-block: clamp(2rem, 5vw, 5rem) var(--sec); }
.story-grid { display: grid; grid-template-columns: 5fr 7fr; align-items: center; gap: clamp(2.5rem, 7vw, 8rem); }
.seal { position: relative; width: min(100%, 520px); aspect-ratio: 1; justify-self: center; mix-blend-mode: multiply; }
.seal img { width: 100%; height: 100%; will-change: transform; }
.story-text h2 + .lead { margin-top: 1.75rem; }

/* Sabah */
.morning { padding-bottom: var(--sec); }
.morning-grid { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: clamp(1rem, 2vw, 2rem); align-items: start; }
.morning-copy { grid-column: 1 / 6; grid-row: 1; padding-top: clamp(1rem, 6vw, 6rem); }
.morning-copy .lead { margin: 1.75rem 0 2.25rem; }
.m-main { grid-column: 7 / 13; grid-row: 1 / 3; aspect-ratio: 4 / 5; overflow: hidden; }
.arch { border-radius: 50vw 50vw 0 0 / 30vw 30vw 0 0; }
.m-main img { width: 100%; height: 118%; object-fit: cover; object-position: 50% 60%; }
.m-side { grid-column: 2 / 5; grid-row: 2; margin-top: 3rem; }
.m-small { grid-column: 5 / 7; grid-row: 2; align-self: end; margin-left: -1rem; position: relative; z-index: 1; margin-bottom: 3rem; }
.m-side img, .m-small img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 1.2rem; box-shadow: 0 30px 60px -30px rgba(16,40,60,.5); }
figcaption { margin-top: .7rem; font-size: .9rem; line-height: 1.35; color: var(--muted); }

/* Sahil: yatay gezinti */
.beach { overflow: hidden; }
.beach-pin { display: flex; align-items: center; min-height: 100vh; min-height: 100dvh; padding-block: 6rem 3rem; }
.beach-track { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 3.25rem); width: max-content; padding-inline: var(--pad); will-change: transform; }
.b-intro { width: min(82vw, 36rem); flex: none; }
.b-intro .lead { margin-top: 1.5rem; }
.b-hint { display: flex; align-items: center; gap: .55rem; margin-top: 1.75rem; font-size: .92rem; color: var(--accent); }
.b-hint svg { transform: rotate(45deg); }
.b-card { flex: none; }
.b-card img { width: 100%; object-fit: cover; border-radius: 1.2rem; box-shadow: 0 34px 70px -36px rgba(3,30,36,.8); }
.b-tall { width: clamp(16rem, 28vw, 27rem); }
.b-tall img { aspect-ratio: 4 / 5; height: min(62vh, 34rem); width: auto; max-width: 100%; }
.b-low { width: clamp(14rem, 21vw, 20rem); margin-top: 8vh; }
.b-low img { aspect-ratio: 3 / 4; }
.b-square { width: clamp(17rem, 31vw, 30rem); margin-top: -7vh; }
.b-square img { aspect-ratio: 1; }
.b-up { margin-top: -5vh; }
.b-end { flex: none; width: min(82vw, 30rem); display: grid; gap: 1.75rem; justify-items: start; padding-right: 2rem; }

/* Sofra */
.table { padding-bottom: var(--sec); }
.table-head { margin-bottom: clamp(2.5rem, 6vw, 5.5rem); }
.table-grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(2rem, 6vw, 7rem); align-items: start; }
.dish-stage { position: sticky; top: 6.5rem; aspect-ratio: 4 / 5; max-height: calc(100vh - 8.5rem); width: 100%; overflow: hidden; border-radius: 50vw 50vw 1.2rem 1.2rem / 22vw 22vw 1.2rem 1.2rem; background: #cf8f6b; }
.dish-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.05); transition: opacity .8s var(--ease-soft), transform 1.3s var(--ease); }
.dish-stage img.on { opacity: 1; transform: none; }
.dishes li { border-top: 1px solid var(--line); }
.dishes li:last-child { border-top: 1px solid var(--line); }
.dish { width: 100%; display: grid; grid-template-columns: 1fr; gap: .3rem; padding: clamp(1.05rem, 1.9vw, 1.7rem) 0; background: none; border: 0; color: inherit; text-align: left; cursor: pointer; font: inherit; transition: padding .55s var(--ease-soft); }
.dish img { display: none; }
.d-name { font: 500 clamp(2rem, 3.6vw, 3.7rem)/1.02 var(--serif); letter-spacing: -.018em; transition: color .4s var(--ease-soft); }
.d-desc { color: var(--muted); max-width: 32rem; }
.dish:hover, .dish.on { padding-left: 1.1rem; }
.dish.on .d-name { font-style: italic; color: var(--accent); }
.dish-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.8rem; }

.sunset-band { display: grid; grid-template-columns: 6fr 3fr 3fr; gap: clamp(1rem, 2.4vw, 2.5rem); margin-top: var(--sec); align-items: end; }
.s-big { overflow: hidden; aspect-ratio: 5 / 6; border-radius: 1.2rem; }
.s-big img { width: 100%; height: 118%; object-fit: cover; }
.s-quote { display: grid; gap: 2rem; align-self: stretch; align-content: space-between; }
.s-boat { overflow: hidden; aspect-ratio: 3 / 4; }
.s-boat img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 80%; }
.s-tall { overflow: hidden; aspect-ratio: 9 / 16; border-radius: 1.2rem; margin-bottom: 4rem; }
.s-tall img { width: 100%; height: 100%; object-fit: cover; }

/* Gece */
.night { padding-bottom: var(--sec); }
.night-title { font-size: clamp(3.75rem, 12vw, 12.5rem); line-height: .88; color: #FBF4E4; }
.night-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(1rem, 2vw, 2rem); margin-top: clamp(2.5rem, 5vw, 5rem); align-items: start; }
.n-front { grid-column: 1 / 6; overflow: hidden; aspect-ratio: 4 / 5; border-radius: 1.2rem; box-shadow: 0 50px 110px -50px rgba(212,170,110,.55); }
.n-front img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
.n-copy { grid-column: 6 / 10; padding: clamp(0rem, 3vw, 3rem) clamp(.5rem, 2vw, 2rem); display: grid; gap: 2.25rem; }
.rating { display: flex; align-items: center; gap: 1.25rem; text-decoration: none; padding-block: 1.25rem; border-block: 1px solid var(--line); transition: padding .5s var(--ease-soft); }
.rating:hover { padding-left: .6rem; }
.rating strong { font: 500 clamp(4.2rem, 6.5vw, 6.5rem)/.9 var(--serif); color: var(--gold); }
.rating span { font-size: .98rem; line-height: 1.35; color: var(--muted); }
.seasons { font: 400 clamp(1.7rem, 2.5vw, 2.5rem)/1.1 var(--serif); }
.n-bar { grid-column: 10 / 13; overflow: hidden; aspect-ratio: 3 / 5; border-radius: 1.2rem; margin-top: clamp(0rem, 8vw, 8rem); transform: rotate(1.5deg); }
.n-bar img { width: 100%; height: 100%; object-fit: cover; }

/* İletişim */
.contact { padding-top: 0; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(3rem, 7vw, 8rem); padding-block: var(--sec); }
.contact-list { display: grid; margin-block: 2.25rem; }
.contact-list li { display: flex; gap: 1rem; padding-block: 1rem; border-top: 1px solid var(--line); }
.contact-list li:last-child { border-bottom: 1px solid var(--line); }
.contact-list svg { flex: none; margin-top: .25rem; width: 1.4rem; height: 1.4rem; color: var(--gold); }
.contact-list span { display: block; font-size: .85rem; color: var(--muted); }
.contact-list a { display: inline-block; font: 500 clamp(1.45rem, 2vw, 1.85rem)/1.2 var(--serif); text-decoration: none; background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0 1px no-repeat; transition: background-size .55s var(--ease-soft); }
.contact-list a:hover { background-size: 100% 1px; }
.contact-side { display: grid; gap: clamp(1.5rem, 3vw, 3rem); align-content: start; }
.bezel { padding: .45rem; border-radius: 2rem; background: rgba(212,170,110,.08); box-shadow: inset 0 0 0 1px rgba(212,170,110,.24); }
.res { padding: clamp(1.4rem, 3vw, 2.6rem); border-radius: 1.6rem; background: var(--night); box-shadow: inset 0 1px 0 rgba(241,227,200,.1); }
.res h3 { font: 500 clamp(1.9rem, 2.8vw, 2.7rem)/1.05 var(--serif); letter-spacing: -.015em; }
.res-sub { margin: .6rem 0 1.6rem; color: var(--muted); }
.f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; }
.f { display: grid; gap: .35rem; min-width: 0; }
.f-wide { grid-column: 1 / -1; }
.f span { font-size: .85rem; color: var(--muted); }
.f input, .f select { width: 100%; min-width: 0; min-height: 3.2rem; padding: .6rem .95rem; font: 400 1rem var(--sans); color: var(--macrame); background: rgba(241,227,200,.06); border: 1px solid rgba(241,227,200,.2); border-radius: .85rem; color-scheme: dark; appearance: none; -webkit-appearance: none; transition: border-color .4s var(--ease-soft), background .4s var(--ease-soft); }
.f select { background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%, var(--gold) 56%, transparent 56%), linear-gradient(-45deg, transparent 50%, var(--gold) 50%, var(--gold) 56%, transparent 56%); background-size: 7px 7px; background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%; background-repeat: no-repeat; }
.f select option { background: var(--night); }
.f input:focus, .f select:focus { border-color: var(--gold); outline: 0; box-shadow: 0 0 0 3px rgba(212,170,110,.25); }
.c-sign { overflow: hidden; aspect-ratio: 16 / 11; border-radius: 1.2rem; }
.c-sign img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 58%; }

.foot { display: grid; justify-items: center; gap: 1rem; padding-block: 3rem 2.5rem; text-align: center; }
.medal-lg { width: 7rem; height: 7rem; }
.foot-name { font: 500 clamp(1.5rem, 2.4vw, 2.1rem)/1.1 var(--serif); }
.foot-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .2rem 1.5rem; }
.foot-links a { padding: .5rem .2rem; color: var(--gold); }
.foot-note { font-size: .82rem; color: var(--muted); }

.dock { display: none; }

/* Görünme hareketleri: yalnızca JS çalışıyorsa gizlenir */
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal].in { opacity: 1; transform: none; }
.js .seal[data-reveal] { transform: scale(.94); }
.js .seal[data-reveal].in { transform: none; }
.js [data-clip] { clip-path: inset(14% 0 0 0 round 1.2rem); opacity: 0; transition: clip-path 1.3s var(--ease), opacity .7s var(--ease); }
.js [data-clip].in { clip-path: inset(-12% -12% -16% -12% round 1.2rem); opacity: 1; }
.js .n-bar[data-clip].in { clip-path: none; }

@media (hover: hover) {
  .b-card img, .m-side img, .m-small img { transition: transform 1s var(--ease); }
  .b-card:hover img, .m-side:hover img, .m-small:hover img { transform: scale(1.025); }
}

/* Tablet ve mobil */
@media (max-width: 1080px) {
  .nav-links, .nav-cta { display: none; }
  .burger { display: block; }
  .nav-pill { width: 100%; justify-content: space-between; }
  .nav.scrolled .nav-pill { background: rgba(12,27,46,.88); }
  .story-grid { grid-template-columns: 1fr; }
  .seal { width: min(68vw, 400px); }
  .morning-copy { grid-column: 1 / -1; padding-top: 0; margin-bottom: 2.5rem; }
  .m-main { grid-column: 1 / -1; grid-row: auto; }
  .m-side { grid-column: 1 / 8; grid-row: auto; margin-top: 1.5rem; }
  .m-small { grid-column: 8 / 13; grid-row: auto; margin-left: 0; margin-bottom: 0; align-self: end; }
  .arch { border-radius: 50vw 50vw 0 0 / 40vw 40vw 0 0; }

  .beach-pin { display: block; min-height: 0; padding-block: 0 4rem; }
  .beach-track { width: auto; display: grid; grid-auto-flow: column; grid-auto-columns: max-content; gap: .9rem; overflow-x: auto; scroll-snap-type: x proximity; padding-block: 0 1rem; scrollbar-width: none; align-items: start; scroll-padding-left: var(--pad); }
  .beach-track::-webkit-scrollbar { display: none; }
  .b-intro { grid-row: 1; grid-column: 1 / span 7; position: sticky; left: 0; width: calc(100vw - 2 * var(--pad)); margin-bottom: 2rem; }
  .b-card, .b-end { grid-row: 2; }
  .b-card { scroll-snap-align: start; margin-top: 0; width: min(72vw, 22rem); }
  .b-card img, .b-tall img, .b-low img, .b-square img { width: 100%; height: auto; aspect-ratio: 4 / 5; }
  .b-end { width: min(78vw, 24rem); align-self: center; padding-right: var(--pad); }

  .table-grid { grid-template-columns: 1fr; }
  .dish-stage { display: none; }
  .dish { grid-template-columns: 5.5rem 1fr; column-gap: 1rem; align-items: center; cursor: default; }
  .dish img { display: block; grid-row: 1 / 3; width: 5.5rem; height: 5.5rem; object-fit: cover; border-radius: .9rem; }
  .d-name { font-size: clamp(1.8rem, 6vw, 2.5rem); }
  .d-desc { font-size: .98rem; line-height: 1.45; }
  .dish:hover, .dish.on { padding-left: 0; }
  .dish.on .d-name { font-style: normal; color: inherit; }
  .sunset-band { grid-template-columns: 1fr 1fr; }
  .s-big { grid-column: 1 / -1; aspect-ratio: 1; }
  .s-tall { margin-bottom: 0; aspect-ratio: 3 / 4; align-self: stretch; height: 100%; }

  .n-front { grid-column: 1 / -1; }
  .n-copy { grid-column: 1 / -1; padding-inline: 0; order: 3; }
  .n-bar { display: none; }
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  body { font-size: 1.03rem; padding-bottom: 4.6rem; }
  .medal { width: 2.9rem; height: 2.9rem; }
  .brand-name { font-size: 1.3rem; }
  .hero-media img { object-position: 50% 45%; }
  .hero::after { background: linear-gradient(rgba(8,20,34,.55), rgba(8,20,34,0) 18%), linear-gradient(0deg, rgba(8,20,34,.96) 8%, rgba(8,20,34,.76) 42%, rgba(8,20,34,.28) 62%, rgba(8,20,34,0) 74%); }
  .hero-body { padding-bottom: 5.6rem; }
  .hero-eyebrow { letter-spacing: .18em; }
  .hero-lead { font-size: 1rem; }
  .hero-title { font-size: clamp(3.4rem, 15.5vw, 5.5rem); }
  .hero-foot { gap: 1rem; }
  .hero-actions { width: 100%; }
  .hero-actions .btn { width: 100%; }
  .btn { padding-left: 1.3rem; }
  .sunset-band .h-lg { grid-column: 1 / -1; }
  .s-quote { display: contents; }
  .s-quote .h-lg { grid-row: 1; }
  .s-big { grid-row: 2; }
  .f-row { gap: .8rem; }
  .dish-note .btn { width: 100%; }
  .dock { position: fixed; z-index: 20; inset: auto 0 0; display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: .25rem; padding: .4rem .5rem calc(.4rem + env(safe-area-inset-bottom)); background: rgba(8,20,34,.94); box-shadow: 0 -1px 0 rgba(212,170,110,.3); }
  .dock a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 3.3rem; gap: .1rem; font-size: .78rem; font-weight: 500; color: var(--macrame); text-decoration: none; border-radius: .9rem; }
  .dock svg { width: 1.3rem; height: 1.3rem; }
  .dock-main { background: var(--gold); color: var(--night) !important; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal], .js [data-clip] { opacity: 1; transform: none; clip-path: none; }
  .ticker-track { flex-wrap: wrap; width: 100%; justify-content: center; }
  .ticker-track > div:last-child { display: none; }
}