/* Karadeniz Balık Pişirme Evi · Sürüm 1 "ATEŞ"
   Kömür zemin, kor turuncusu, kırık beyaz. Fraunces italik + Inter.
   İmza: sticky "nasıl çalışıyor" sahnesi ve yatay "balıktan sofraya" rayı. */
:root {
  --komur: #0E0F11;
  --duman: #17191D;
  --is: #22252B;
  --kul: #8C919A;
  --kirik: #F1ECE3;
  --kor: #E4572E;
  --bakir: #C8843A;
  --rule: rgba(241,236,227,.14);
  --display: "Fraunces", "Georgia", serif;
  --govde: "Inter", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --kenar: clamp(1.1rem, 4.5vw, 5rem);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: auto; }
body { margin: 0; background: var(--komur); color: var(--kirik); font-family: var(--govde); font-size: 1.0625rem; line-height: 1.55; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
figure { margin: 0; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 300; letter-spacing: -.025em; line-height: .96; font-variation-settings: "opsz" 144; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--kor); font-weight: 400; }
p { margin: 0; }
.mono { font-family: var(--mono); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kul); }
:focus-visible { outline: 2px solid var(--kor); outline-offset: 3px; }

.satir { display: block; overflow: hidden; padding-bottom: .06em; }
.satir-ic { display: block; }
.js .satir-ic { transform: translateY(110%); }
.js [data-reveal] { opacity: 0; }
.js [data-reveal-cocuk] { opacity: 1; }
.js [data-reveal-cocuk] > * { opacity: 0; }

/* NAV */
.nav { position: fixed; inset-inline: 0; top: 0; z-index: 40; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem var(--kenar); transition: background .5s, padding .5s; }
.nav.dolu { background: rgba(14,15,17,.86); backdrop-filter: blur(10px); padding-block: .75rem; border-bottom: 1px solid var(--rule); }
.nav-marka { font-family: var(--display); font-size: 1.05rem; letter-spacing: -.01em; }
.nav-marka span { font-style: italic; color: var(--kor); }
.nav-ic { display: flex; gap: 1.6rem; font-size: .86rem; font-weight: 500; color: rgba(241,236,227,.8); }
.nav-ic a { border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.nav-ic a:hover { color: var(--kirik); border-color: var(--kor); }
.nav-cta { font-family: var(--mono); font-size: .8rem; letter-spacing: .06em; border: 1px solid var(--rule); padding: .5rem .95rem; border-radius: 999px; transition: background .3s, border-color .3s; }
.nav-cta:hover { background: var(--kor); border-color: var(--kor); color: var(--komur); }
@media (max-width: 860px) { .nav-ic, .nav-cta { display: none; } }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: .8rem 1.6rem; background: var(--kor); color: var(--komur); font-weight: 600; font-size: .95rem; border-radius: 999px; transition: transform .5s cubic-bezier(.19,1,.22,1), background .3s; }
.btn:hover { transform: translateY(-2px); background: #F2683F; }
.btn-cizgi { background: transparent; color: var(--kirik); border: 1px solid rgba(241,236,227,.35); }
.btn-cizgi:hover { background: rgba(241,236,227,.08); border-color: var(--kirik); }

/* HERO */
.hero { position: relative; min-height: 100svh; display: grid; grid-template-rows: 1fr auto; padding: 7rem var(--kenar) 2rem; isolation: isolate; }
.hero-zemin { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-zemin img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; transform: scale(1.06); }
.hero-zemin::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,15,17,.55) 0%, rgba(14,15,17,.25) 40%, rgba(14,15,17,.85) 100%), linear-gradient(90deg, rgba(14,15,17,.6) 0%, rgba(14,15,17,0) 60%); }
.hero-ic { align-self: end; display: flex; flex-direction: column; gap: 1.5rem; max-width: 60rem; padding-bottom: 2.5rem; }
.hero h1 { font-size: clamp(3.4rem, 9.5vw, 10rem); }
.hero-alt { max-width: 44ch; font-size: 1.08rem; color: rgba(241,236,227,.85); }
.hero-eylem { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: .4rem; }
.hero-serit { list-style: none; margin: 0; padding: 1.4rem 0 0; display: flex; gap: 3rem; border-top: 1px solid var(--rule); flex-wrap: wrap; }
.hero-serit li { display: flex; flex-direction: column; gap: .15rem; }
.hero-serit strong { font-family: var(--display); font-weight: 400; font-size: 1.6rem; line-height: 1; }
.hero-serit span { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kul); }
@media (max-width: 860px) {
  .hero { padding-top: 5.5rem; }
  .hero-zemin img { object-position: 50% 40%; }
  .hero-serit { gap: 1.2rem 2rem; }
  .hero-serit strong { font-size: 1.25rem; }
}

/* MANİFESTO */
.manifesto { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 7rem); align-items: center; padding: clamp(5rem, 12vw, 11rem) var(--kenar); }
.manifesto-metin { display: flex; flex-direction: column; gap: 1.6rem; }
.manifesto h2 { font-size: clamp(2.2rem, 5vw, 4.6rem); }
.manifesto-alt { max-width: 46ch; color: rgba(241,236,227,.75); font-size: 1.05rem; }
.manifesto-fotolar { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 2.7vw; }
.mf { overflow: hidden; position: relative; }
.mf img { width: 100%; height: 100%; object-fit: cover; }
.mf figcaption { position: absolute; left: .8rem; bottom: .7rem; font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kirik); background: rgba(14,15,17,.6); padding: .25rem .5rem; }
.mf-a { grid-column: 1 / 8; grid-row: 1 / 12; }
.mf-b { grid-column: 6 / 13; grid-row: 5 / 17; border: 6px solid var(--komur); }
.mf-c { grid-column: 2 / 7; grid-row: 13 / 21; }
@media (max-width: 860px) {
  .manifesto { grid-template-columns: 1fr; padding-block: 5rem 3rem; }
  .manifesto-fotolar { grid-auto-rows: 7.5vw; }
}

/* NASIL ÇALIŞIYOR: sticky sahne */
.nasil { padding: clamp(3rem, 8vw, 6rem) 0 0; }
.nasil-bas { padding: 0 var(--kenar) 3rem; display: flex; flex-direction: column; gap: .8rem; }
.nasil-bas h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); }
.nasil-sahne { position: relative; }
.adimlar { list-style: none; margin: 0; padding: 0; }
.adim { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 4rem); align-items: center; padding: 0 var(--kenar); }
.adim-metin { display: flex; flex-direction: column; gap: 1.2rem; max-width: 30rem; }
.adim-no { font-family: var(--display); font-style: italic; font-size: clamp(3rem, 6vw, 5.5rem); color: var(--kor); line-height: 1; }
.adim h3 { font-size: clamp(2rem, 4vw, 3.6rem); }
.adim p { color: rgba(241,236,227,.75); }
.adim-foto { height: 70svh; overflow: hidden; }
.adim-foto img { width: 100%; height: 100%; object-fit: cover; }
.nasil-ilerleme { display: none; }
@media (min-width: 861px) {
  .js .nasil-sahne { height: 400svh; }
  .js .adimlar { position: sticky; top: 0; height: 100svh; }
  .js .adim { position: absolute; inset: 0; height: 100svh; opacity: 0; visibility: hidden; transition: opacity .7s, visibility .7s; }
  .js .adim.aktif { opacity: 1; visibility: visible; }
  .js .adim .adim-metin > * { transform: translateY(24px); opacity: 0; transition: transform .9s cubic-bezier(.19,1,.22,1), opacity .9s; }
  .js .adim.aktif .adim-metin > * { transform: none; opacity: 1; }
  .js .adim.aktif .adim-metin > :nth-child(2) { transition-delay: .08s; }
  .js .adim.aktif .adim-metin > :nth-child(3) { transition-delay: .16s; }
  .js .adim-foto img { transform: scale(1.08); transition: transform 1.6s cubic-bezier(.19,1,.22,1); }
  .js .adim.aktif .adim-foto img { transform: scale(1); }
  .js .nasil-ilerleme { display: block; position: sticky; bottom: 0; height: 2px; background: var(--rule); margin-top: -2px; }
  .js .nasil-ilerleme i { display: block; height: 100%; width: 0; background: var(--kor); }
}
@media (max-width: 860px) {
  .adim { grid-template-columns: 1fr; gap: 1.2rem; padding-block: 2rem; border-top: 1px solid var(--rule); }
  .adim-foto { height: 62vw; order: -1; }
  .adim-no { font-size: 2.6rem; }
  .adim h3 { font-size: 2rem; }
}

/* ATEŞ */
.ates { position: relative; min-height: 90svh; display: grid; place-items: center; padding: 6rem var(--kenar); isolation: isolate; overflow: hidden; }
.ates-zemin { position: absolute; inset: -12% 0; z-index: -1; }
.ates-zemin img { width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.ates::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(60% 60% at 50% 50%, rgba(14,15,17,.2), rgba(14,15,17,.9)); }
.ates-ic { text-align: center; display: flex; flex-direction: column; gap: 1.8rem; align-items: center; }
.ates h2 { font-size: clamp(3rem, 9vw, 9.5rem); }
.ates p { max-width: 42ch; color: rgba(241,236,227,.8); font-size: 1.08rem; }

/* PİŞİRME */
.pisirme { padding: clamp(4rem, 10vw, 9rem) var(--kenar); display: flex; flex-direction: column; gap: clamp(3rem, 7vw, 6rem); }
.pisirme-bas { display: flex; flex-direction: column; gap: .8rem; }
.pisirme-bas h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); }
.yontem { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 5vw, 6rem); align-items: end; }
.yontem.ters .yontem-foto { order: 2; }
.yontem-foto { height: clamp(22rem, 70vh, 44rem); overflow: hidden; }
.yontem-foto img { width: 100%; height: 100%; object-fit: cover; }
.yontem-metin { display: flex; flex-direction: column; gap: 1rem; padding-bottom: 1rem; }
.yontem h3 { font-size: clamp(3rem, 8vw, 8rem); }
.yontem p { max-width: 36ch; color: rgba(241,236,227,.75); }
.pisirme-not { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; color: var(--kul); border-top: 1px solid var(--rule); padding-top: 1.4rem; max-width: 60ch; }
@media (max-width: 860px) {
  .yontem, .yontem.ters { grid-template-columns: 1fr; }
  .yontem.ters .yontem-foto { order: 0; }
  .yontem-foto { height: 68vw; }
}

/* TEZGÂH */
.tezgah { position: relative; padding: clamp(4rem, 10vw, 9rem) var(--kenar); border-top: 1px solid var(--rule); }
.tezgah-bas { display: flex; flex-direction: column; gap: .8rem; max-width: 52rem; margin-bottom: 3rem; }
.tezgah-bas h2 { font-size: clamp(2.4rem, 6vw, 5.6rem); }
.tezgah-bas p { color: rgba(241,236,227,.7); max-width: 50ch; }
.balik-liste { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.balik-liste li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-bottom: 1px solid var(--rule); transition: padding-left .5s cubic-bezier(.19,1,.22,1), color .3s; }
.balik-liste li span { font-family: var(--display); font-size: clamp(2rem, 5vw, 4.4rem); line-height: 1; letter-spacing: -.02em; }
.balik-liste li small { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--kul); white-space: nowrap; }
@media (hover: hover) and (min-width: 861px) {
  .balik-liste li:hover { padding-left: 1.4rem; color: var(--kor); }
}
.tezgah-takip { position: fixed; top: 0; left: 0; width: 16rem; height: 20rem; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .4s; z-index: 30; border: 6px solid var(--komur); display: none; }
.tezgah-takip img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: hover) and (min-width: 861px) { .tezgah-takip { display: block; } }
.tezgah-serit { display: none; }
@media (max-width: 860px) {
  .tezgah-serit { display: flex; gap: .6rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 1.8rem calc(-1 * var(--kenar)) 0; padding: 0 var(--kenar); scrollbar-width: none; }
  .tezgah-serit::-webkit-scrollbar { display: none; }
  .tezgah-serit figure { flex: 0 0 68vw; height: 80vw; scroll-snap-align: start; overflow: hidden; }
  .tezgah-serit img { width: 100%; height: 100%; object-fit: cover; }
}

/* YORUMLAR */
.yorumlar { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(2rem, 6vw, 7rem); padding: clamp(4rem, 10vw, 9rem) var(--kenar); background: var(--duman); }
.yorum-puan { position: sticky; top: 6rem; align-self: start; display: flex; flex-direction: column; gap: .4rem; }
.yorum-puan strong { font-family: var(--display); font-weight: 300; font-size: clamp(6rem, 14vw, 13rem); line-height: .9; letter-spacing: -.04em; }
.yildiz { color: var(--bakir); letter-spacing: .1em; font-size: 1.1rem; }
.yorum-akis { display: flex; flex-direction: column; gap: 0; }
.yorum-akis blockquote { margin: 0; padding: 2rem 0; border-top: 1px solid var(--rule); }
.yorum-akis p { font-family: var(--display); font-size: clamp(1.35rem, 2.4vw, 2rem); line-height: 1.25; letter-spacing: -.01em; font-variation-settings: "opsz" 40; }
.yorum-akis footer { margin-top: 1rem; font-size: .9rem; font-weight: 500; }
.yorum-akis footer span { color: var(--kul); font-weight: 400; }
.yorum-akis blockquote:nth-child(odd) { padding-left: 8%; }
@media (max-width: 860px) {
  .yorumlar { grid-template-columns: 1fr; }
  .yorum-puan { position: static; flex-direction: row; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
  .yorum-akis blockquote:nth-child(odd) { padding-left: 0; }
}

/* HİKÂYE: yatay ray */
.hikaye { padding-top: clamp(3rem, 8vw, 6rem); }
.hikaye-sahne { overflow: hidden; }
.hikaye-ray { display: flex; }
.bolum { flex: 0 0 100%; width: 100%; height: 100svh; padding: 5rem var(--kenar) 3rem; display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: 1fr auto; gap: 1rem; }
.bolum header { grid-column: 1 / 6; grid-row: 1; align-self: start; display: flex; flex-direction: column; gap: .6rem; }
.bolum h2 { font-size: clamp(3.4rem, 9vw, 9rem); }
.bolum p { max-width: 30ch; color: rgba(241,236,227,.7); }
.b-foto { overflow: hidden; }
.b-foto img { width: 100%; height: 100%; object-fit: cover; }
.b-dik { grid-column: 7 / 12; grid-row: 1 / 3; }
.b-kucuk { grid-column: 2 / 6; grid-row: 2; height: 30svh; }
.b-genis { grid-column: 4 / 13; grid-row: 1 / 3; }
@media (min-width: 861px) {
  .js .hikaye { height: 500svh; }
  .js .hikaye-sahne { position: sticky; top: 0; height: 100svh; }
  /* JS yok / az hareket: ray dikey akar, hiçbir bölüm ekran dışında kalmaz */
  html:not(.js) .hikaye-ray { flex-direction: column; }
  html:not(.js) .bolum { width: auto; height: auto; min-height: 80svh; }
}
@media (max-width: 860px) {
  .hikaye-ray { flex-direction: column; }
  .bolum { width: auto; height: auto; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; padding: 2.5rem var(--kenar) 1rem; gap: .8rem; }
  .bolum header { grid-column: 1 / 3; }
  .bolum h2 { font-size: 3rem; }
  .b-dik { grid-column: 1 / 3; grid-row: auto; height: 100vw; }
  .b-kucuk { grid-column: 2 / 3; grid-row: auto; height: 48vw; }
  .b-genis { grid-column: 1 / 3; grid-row: auto; height: 62vw; }
}

/* ZİYARET */
.ziyaret { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 6rem); align-items: center; padding: clamp(4rem, 10vw, 9rem) var(--kenar); border-top: 1px solid var(--rule); }
.ziyaret-foto { height: clamp(20rem, 60vh, 36rem); overflow: hidden; }
.ziyaret-foto img { width: 100%; height: 100%; object-fit: cover; }
.ziyaret-metin { display: flex; flex-direction: column; gap: 1.6rem; }
.ziyaret h2 { font-size: clamp(2.2rem, 4.5vw, 4.2rem); }
.ziyaret dl { margin: 0; display: grid; gap: .9rem; }
.ziyaret dl div { display: grid; grid-template-columns: 6rem 1fr; gap: 1rem; border-top: 1px solid var(--rule); padding-top: .8rem; }
.ziyaret dt { font-family: var(--mono); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: var(--kul); padding-top: .25rem; }
.ziyaret dd { margin: 0; }
.ziyaret dd a { border-bottom: 1px solid var(--rule); }
.ziyaret-eylem { display: flex; gap: .8rem; flex-wrap: wrap; }
@media (max-width: 860px) {
  .ziyaret { grid-template-columns: 1fr; }
  .ziyaret-foto { height: 62vw; }
}

.alt { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 2rem var(--kenar) 6rem; border-top: 1px solid var(--rule); font-size: .9rem; color: var(--kul); }
.alt strong { color: var(--kirik); font-weight: 500; }

/* MOBİL ALT ÇUBUK */
.mobil-cubuk { display: none; }
@media (max-width: 860px) {
  .mobil-cubuk { display: grid; grid-template-columns: 1fr 1fr 1fr; position: fixed; inset-inline: 0; bottom: 0; z-index: 45; background: rgba(14,15,17,.92); backdrop-filter: blur(10px); border-top: 1px solid var(--rule); padding-bottom: env(safe-area-inset-bottom); }
  .mobil-cubuk a { text-align: center; padding: .95rem .5rem; font-size: .85rem; font-weight: 600; border-right: 1px solid var(--rule); }
  .mobil-cubuk a:nth-child(2) { color: var(--kor); }
  .mobil-cubuk a:last-child { border-right: 0; }
  .alt { padding-bottom: 6.5rem; }
}