/* ============================================================================
   Çekirdekler sayfası.

   Sayfa artık sitenin kendi header/footer'ını ve .section-head düzenini
   kullanıyor; bu dosya yalnızca içeriğe ait düzenlemeleri taşıyor.

   Okuma ölçüsü 68 karakter: bundan uzun satır gözü yorar. Fotoğraflar sitenin
   kendi görselleri — içecek fotoğrafları, çekirdek ve botanik dallar.
   ========================================================================= */

.ck-sayfa{background:var(--paper);color:var(--ink)}

.ck-icerik{max-width:1000px;margin:0 auto;
  padding:0 clamp(16px,4vw,28px) clamp(40px,7vw,80px)}

/* Başlık: sitenin .section-head düzeni. Üst boşluğa DOKUNULMUYOR.
   Ilk surumde padding-top kisaltilmisti (52px) ve sayfa basligi sabit
   header'in altina giriyordu. Sitenin kendi kurali 120px birakiyor; o
   korunuyor, yalnizca alt bosluk biraz artiyor. */
.ck-icerik .section-head{padding-bottom:clamp(10px,1.6vw,18px)}
.ck-giris{max-width:68ch;margin:0 auto clamp(30px,4.6vw,48px);
  font-size:clamp(.95rem,2.2vw,1.06rem);line-height:1.7;color:#4c4841}

/* ------------------------------------------------------------- bölümler -- */
.ck-bolum{max-width:68ch;margin:0 auto clamp(30px,4.6vw,50px);
  border-top:1px solid rgba(19,19,17,.18);padding-top:clamp(20px,3vw,30px)}
.ck-bolum h2{font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.25rem,3.6vw,1.8rem);letter-spacing:-.01em;
  margin:0 0 14px;line-height:1.1}
.ck-bolum p,.ck-metin p{font-size:clamp(.92rem,2.1vw,1rem);line-height:1.75;
  color:#3f3b34;margin:0 0 14px}
.ck-bolum p:last-child,.ck-metin p:last-child{margin-bottom:0}

/* metin + fotoğraf yan yana */
.ck-ikili{display:grid;grid-template-columns:1fr;gap:clamp(16px,3vw,28px);
  align-items:center;margin-top:14px}
.ck-ikili .ck-figur{margin:0}
@media (min-width:760px){
  .ck-ikili{grid-template-columns:1.35fr .85fr}
  .ck-ikili--ters{grid-template-columns:.85fr 1.35fr}
  .ck-ikili--ters .ck-metin{order:2}
  .ck-ikili--ters .ck-figur{order:1}
}

/* ------------------------------------------------------------ fotoğraf -- */
.ck-figur{margin:0 0 clamp(24px,4vw,38px)}
.ck-figur img{display:block;width:100%;height:auto;border:2px solid var(--ink);
  border-radius:18px;background:#FBF8F1;
  box-shadow:8px 8px 0 rgba(19,19,17,.9);object-fit:cover}
.ck-figur figcaption{margin-top:12px;font-size:.78rem;line-height:1.5;
  color:#6a655c;text-align:center}
.ck-figur--kucuk img{border-radius:16px;box-shadow:6px 6px 0 rgba(19,19,17,.9)}

/* üçlü içecek şeridi */
.ck-serit{display:grid;gap:clamp(12px,2.4vw,20px);margin-top:clamp(20px,3vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.ck-serit figure{margin:0}
.ck-serit img{display:block;width:100%;height:auto;aspect-ratio:1/1;
  object-fit:cover;border:2px solid var(--ink);border-radius:16px;
  background:#FBF8F1}
.ck-serit figcaption{margin-top:10px;font-size:.78rem;line-height:1.5;color:#4c4841}
.ck-serit figcaption b{display:block;font-weight:800;font-size:.82rem;
  margin-bottom:2px;color:var(--ink)}
.ck-serit figcaption span{color:#6a655c}

/* demleme listesi */
.ck-liste{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ck-liste li{border:2px solid var(--ink);border-radius:14px;padding:13px 15px;
  background:#FBF8F1}
.ck-liste b{display:block;font-family:var(--font-body);font-weight:800;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:5px}
.ck-liste span{font-size:.83rem;line-height:1.55;color:#4c4841}

/* botanik bant */
.ck-bant{display:flex;justify-content:center;align-items:center;
  gap:clamp(10px,3vw,34px);flex-wrap:wrap;
  margin:clamp(20px,4vw,40px) auto 0;max-width:760px;opacity:.9}
.ck-bant img{width:clamp(70px,11vw,130px);height:auto}

/* kapanış */
.ck-kapanis{max-width:68ch;background:#FBF8F1;border:2px solid var(--ink);
  border-radius:20px;padding:clamp(22px,3.6vw,34px);
  box-shadow:8px 8px 0 rgba(19,19,17,.9);border-top:2px solid var(--ink)}
.ck-dugme{display:inline-block;margin-top:8px;border:2px solid var(--ink);
  border-radius:999px;background:var(--ink);color:var(--paper);
  text-decoration:none;font-weight:800;font-size:.86rem;padding:12px 26px;
  transition:opacity .2s}
.ck-dugme:hover{opacity:.85}

@media (max-width:560px){
  .ck-bolum p,.ck-metin p{line-height:1.68}
  .ck-figur img{box-shadow:5px 5px 0 rgba(19,19,17,.9)}
}
@media (prefers-reduced-motion:reduce){ .ck-dugme{transition:none} }

/* ---------------------------------------------------------- açılış -- */
.ck-acilis{display:grid;grid-template-columns:1fr;gap:clamp(20px,3.6vw,40px);
  align-items:center;max-width:68ch;margin:0 auto clamp(30px,4.6vw,50px)}
@media (min-width:820px){.ck-acilis{grid-template-columns:1.1fr .9fr}}
.ck-buyuk{font-family:var(--font-display);font-size:clamp(1.2rem,3.4vw,1.65rem);
  line-height:1.25;letter-spacing:-.01em;margin:0 0 16px;color:var(--ink)}
.ck-acilis-metin p:last-child{font-size:clamp(.92rem,2.1vw,1rem);line-height:1.75;
  color:#3f3b34;margin:0}
.ck-figur--acilis img{border-radius:20px}

/* bölüm numarası */
.ck-bolum{position:relative}
.ck-numara{display:inline-block;font-family:var(--font-body);font-weight:800;
  font-size:.72rem;letter-spacing:.14em;color:#a8a29a;margin-bottom:6px}

/* alıntı */
.ck-alinti{max-width:62ch;margin:clamp(10px,2vw,20px) auto clamp(30px,4.6vw,50px);
  padding:clamp(22px,3.4vw,32px) clamp(20px,3vw,30px);
  border-left:4px solid var(--ink);background:#FBF8F1;
  font-family:var(--font-display);font-size:clamp(1.05rem,2.8vw,1.35rem);
  line-height:1.3;letter-spacing:-.01em}
.ck-alinti cite{display:block;margin-top:10px;font-family:var(--font-body);
  font-style:normal;font-size:.74rem;letter-spacing:.1em;
  text-transform:uppercase;color:#6a655c}

/* çekirdek şeridi */
.ck-cekirdek-serit{display:flex;justify-content:center;align-items:center;
  gap:clamp(10px,2.4vw,24px);flex-wrap:wrap;margin-top:22px}
.ck-cekirdek-serit img{width:clamp(46px,7vw,78px);height:auto;
  filter:drop-shadow(0 3px 4px rgba(19,19,17,.22))}

/* geniş fotoğraf */
.ck-figur--serit img{max-height:520px;object-fit:cover;padding:0}

/* ------------------------------------------------------------ tablolar -- */
.ck-tablo-sar{overflow-x:auto;margin:18px 0 20px;-webkit-overflow-scrolling:touch}
.ck-tablo{width:100%;border-collapse:collapse;font-size:clamp(.78rem,1.9vw,.88rem);
  min-width:420px}
.ck-tablo th,.ck-tablo td{text-align:left;padding:10px 12px;
  border-bottom:1px solid rgba(19,19,17,.16);vertical-align:top;line-height:1.5}
.ck-tablo thead th{font-family:var(--font-body);font-weight:800;font-size:.7rem;
  letter-spacing:.09em;text-transform:uppercase;border-bottom:2px solid var(--ink);
  white-space:nowrap}
.ck-tablo tbody tr:first-child td{padding-top:12px}
.ck-tablo td:first-child{font-weight:700;color:var(--ink);white-space:nowrap}
.ck-tablo tbody tr:hover{background:rgba(19,19,17,.03)}

/* ------------------------------------------------------------- kartlar -- */
.ck-kartlar{display:grid;gap:12px;margin-top:18px;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.ck-kart{border:2px solid var(--ink);border-radius:16px;padding:15px 16px;
  background:#FBF8F1}
.ck-kart b{display:block;font-family:var(--font-display);font-size:.98rem;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.ck-kart span{font-size:.83rem;line-height:1.6;color:#4c4841}

@media (max-width:560px){
  .ck-tablo{min-width:0;font-size:.76rem}
  .ck-tablo th,.ck-tablo td{padding:8px 9px}
}

/* ============================================================================
   Fotoğraf ölçüsü — düzeltme.
   Önceki hâlde dikey fotoğraflar 587x763 px'e çıkıyor, iki fotoğraf bir
   ekranı kaplıyordu. Artık:
     - kutu en fazla 680 px geniş, ortalanmış
     - yükseklik 360 px ile sınırlı, object-fit:cover ile kırpılıyor
   Böylece hangi oranda gelirse gelsin kutu aynı kalıyor, sayfa ritmi bozulmuyor.
   ========================================================================= */

.ck-bolum > .ck-figur,
.ck-bolum > .ck-figur--serit {
  max-width: 680px;
  margin-left: auto;
  margin-right: auto;
}

.ck-figur img,
.ck-figur--serit img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 18px;
  padding: 0;
  max-height: none;
}

/* açılış görseli iki sütunun parçası: daha küçük */
.ck-acilis .ck-figur img {
  height: 340px;
  max-width: 100%;
}

/* üçlü şerit */
.ck-serit img {
  height: 200px;
  object-fit: cover;
}

@media (max-width: 760px) {
  .ck-figur img,
  .ck-figur--serit img { height: 230px; border-radius: 14px; }
  .ck-acilis .ck-figur img { height: 240px; }
  .ck-serit img { height: 160px; }
}

@media (max-width: 420px) {
  .ck-figur img,
  .ck-figur--serit img { height: 190px; }
  .ck-acilis .ck-figur img { height: 200px; }
  .ck-serit img { height: 140px; }
  .ck-figur figcaption { font-size: .74rem; }
}

/* ============================================================================
   Yatay taşma — kesin çözüm.
   Marquee şeridi 3362 px; kırpma yalnızca body'de olduğu için html hâlâ
   kaydırılabiliyordu ve mobilde sağda boş alan kalıyordu.
   overflow-x:clip kaydırma kabı oluşturmadan kapatır.
   ========================================================================= */

html, body {
  overflow-x: clip !important;
  max-width: 100%;
}

.marquee {
  overflow: hidden !important;
  max-width: 100vw;
}
.marquee-track { max-width: none; }

header, .orderbar, .mobile-nav {
  max-width: 100vw;
  box-sizing: border-box;
}

@supports not (overflow-x: clip) {
  html, body { overflow-x: hidden !important; }
}

/* ============================================================================
   İki düzeltme.
   1) Bölümlere sonradan eklenen fotoğraflar üstteki öğeye yapışıyordu
      (kartlar, tablolar). Fotoğraflara üst boşluk veriliyor.
   2) Üçlü şerit (kavrulmuş / yeşil / latte) auto-fit ile sarıyordu ve
      üçüncüsü alta düşüyordu. Artık sabit üç sütun: hep yan yana.
   ========================================================================= */

.ck-bolum > .ck-figur,
.ck-bolum > .ck-figur--serit,
.ck-bolum > .ck-serit {
  margin-top: clamp(22px, 3.4vw, 34px);
}

.ck-serit {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start;
}

.ck-serit figure { min-width: 0; }

.ck-serit figcaption b { font-size: .8rem; }
.ck-serit figcaption span { font-size: .74rem; }

@media (max-width: 560px) {
  .ck-serit { gap: 8px; }
  .ck-serit img { height: 110px; border-radius: 10px; }
  .ck-serit figcaption { margin-top: 6px; }
  .ck-serit figcaption b { font-size: .68rem; }
  .ck-serit figcaption span { font-size: .64rem; line-height: 1.4; }
}

@media (max-width: 380px) {
  .ck-serit img { height: 92px; }
  .ck-serit figcaption span { display: none; }
}

/* ============================================================================
   Üç düzeltme.
   ========================================================================= */

/* 1) Hero içecek noktaları gizli; içecekler kendi kendine dönüyor */
.scene-dots { display: none !important; }

/* 2) Fotoğraf: kırpma yok.
   Önce height sabit + object-fit:cover idi; portre kareler ortadan
   kesiliyordu. Artık width:auto + max-height: oran korunur, tamamı görünür. */
.ck-figur img,
.ck-figur--serit img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  border-radius: 18px;
}

.ck-acilis .ck-figur img { max-height: 420px; }

@media (max-width: 760px) {
  .ck-figur img,
  .ck-figur--serit img { max-height: 320px; border-radius: 14px; }
  .ck-acilis .ck-figur img { max-height: 300px; }
}

@media (max-width: 420px) {
  .ck-figur img,
  .ck-figur--serit img { max-height: 260px; }
  .ck-acilis .ck-figur img { max-height: 240px; }
}

/* ============================================================================
   Çekirdekler sayfası: çekirdek katmanının konumu.
   Görsel, renk ve animasyon kuralları style.css içinde (.du-bean) — burada
   TEKRAR TANIMLANMIYOR, yoksa Adres sayfasındaki görünüm bozuluyor.
   ========================================================================= */

.ck-sayfa .du-bean-alan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}


/* ============================================================================
   Çekirdek katmanı: tam sayfa.
   Katman <main> içine konmuştu; <main> 1000 px'lik içerik sütunu olduğu için
   çekirdekler yazıların üstüne düşüyordu. Katman body'ye taşınıyor ve
   tam sayfa genişliğinde konumlanıyor; deco-place.js boş alanları bu geniş
   alanda arıyor.
   ========================================================================= */

body.ck-sayfa { position: relative; }

body.ck-sayfa > .du-bean-alan {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* içerik katmanın üstünde kalsın */
body.ck-sayfa > main,
body.ck-sayfa > header,
body.ck-sayfa > footer { position: relative; z-index: 1; }

/* ============================================================================
   Çekirdek katmanı yüksekliği — asıl hata.
   Karşılaştırma: Adres sayfasında katman 987 px (tek bölüm), Çekirdekler'de
   7893 px (tüm sayfa). Yüzdeli konumlar (top:20%) tüm sayfaya yayıldığı için
   çekirdekler 7 sayfalık alana dağılıyor, ekranda tek tük görünüyordu.
   Katman artık sayfanın üst kısmıyla sınırlı: Adres sayfasındaki gibi
   çekirdekler bir arada duruyor.
   ========================================================================= */

body.ck-sayfa > .du-bean-alan {
  height: 820px !important;
  min-height: 0 !important;
  z-index: 1 !important;
}

@media (max-width: 760px) {
  body.ck-sayfa > .du-bean-alan { height: 640px !important; }
}

@media (max-width: 420px) {
  body.ck-sayfa > .du-bean-alan { height: 560px !important; }
}

/* ============================================================================
   DÜZELTME: katman yüksekliği.
   Bir önceki adımda katmanı 820 px'e sınırladım; bu yanlıştı — aşağı
   kaydırınca çekirdekler bittiği için tamamen kayboluyorlardı. Katman yine
   tüm sayfa boyunda; çekirdeklerin yazıların üstüne binmemesi
   bean-yerlestir.js'in işi (merkezi içerik sütununda olanı kenara taşıyor).
   ========================================================================= */

body.ck-sayfa > .du-bean-alan {
  height: auto !important;
  min-height: 100% !important;
  bottom: 0;
}

/* ============================================================================
   Çekirdekler — sabit katman.
   Ölçüm: çekirdekler sayfanın %12, %20, %26, %62, %66, %86, %88, %92
   noktalarına yerleşmiş; ilk çekirdek 919 px'te, yani en üstte hiç yok ve
   aralarda 3000 px'lik boşluklar var. Kaydırınca "kayboluyor" görünmesinin
   sebebi buydu.
   Katman artık viewport'a sabit: sekiz çekirdek de ekranın kenarlarında duruyor
   ve hangi noktada olursan ol görünüyorlar. İçerik ortada olduğu için
   yazıların üstüne binmiyorlar.
   ========================================================================= */

body.ck-sayfa > .du-bean-alan {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw !important;
  height: 100vh !important;
  min-height: 0 !important;
  bottom: auto !important;
  z-index: 1 !important;
  pointer-events: none;
  overflow: hidden;
}

/* içerik çekirdeklerin üstünde kalsın */
body.ck-sayfa > main,
body.ck-sayfa > header,
body.ck-sayfa > footer {
  position: relative;
  z-index: 2;
}

/* ============================================================================
   Katman sayfayla kayar (fixed değil) — çekirdekler kaydırınca yer değiştirir.
   28 çekirdek eşit aralıkla dağıtıldığı için her noktada birkaç tanesi
   görünür durumda. Önceki sürüm position:fixed idi ve ekrana çivilenmişti.
   ========================================================================= */

body.ck-sayfa > .du-bean-alan {
  position: absolute !important;
  top: 0;
  left: 0;
  width: 100% !important;
  height: auto !important;
  min-height: 100% !important;
  bottom: 0 !important;
  z-index: 1 !important;
  pointer-events: none;
  overflow: hidden;
}

/* Adres kartındaki şehir etiketi ortalı */
.arr { display: block; text-align: center; }

/* Adres kartındaki şehir etiketi ortalı */
.arr { display: block; text-align: center; }