/* ═══════════════════════════════════════════════════════════
   SULTAN GRILL HOUSE · HAREKET KATMANI
   hareket.js ile çift. Burada hiçbir şey önceden gizlenmez,
   gizleme kararını betik çalışma anında verir. Yalnız transform
   ve opacity animasyonlanır.

   Motifler: Met Museum 2019.173 çintemani çinisi (CC0) ve kamu malı
   altıgen İznik çinisi taramasından izlendi, tek renge indirildi.
   Künye assets/img/motif/KAYNAK.md
   ═══════════════════════════════════════════════════════════ */

/* ── 0 · LENIS ───────────────────────────────────────────── */

html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}


/* ── 1 · MOTİF ───────────────────────────────────────────── */

.motif{
  display:inline-block;flex:0 0 auto;
  background:currentColor;
  -webkit-mask:var(--motif) center/contain no-repeat;
  mask:var(--motif) center/contain no-repeat;
}
.motif-benek{--motif:url("../img/motif/benek.svg");width:30px;height:27px;color:var(--altin);opacity:1}
.motif-cintemani{--motif:url("../img/motif/cintemani.svg");width:60px;height:56px}

/* Bölüm başlığı: çizgi · motif · etiket · başlık · çizgi */
.bolum-basligi-ic{display:flex;align-items:center;gap:clamp(1rem,3vw,2.2rem);flex:0 0 auto;max-width:100%}
.bolum-basligi.koyu .motif-benek{color:var(--altin)}
@media (max-width:640px){
  .bolum-basligi-ic{flex-wrap:wrap;gap:.6rem 1rem}
  .motif-benek{width:24px;height:22px}
}

/* Kahraman kamasındaki desen ve tipografik hero zemini. Tek renk maske,
   renk ve saydamlık sultan.css'ten geliyor. */
.hero-tam .hero-kama-desen,
.hero .cini{
  background:currentColor;
  -webkit-mask:url("../img/motif/desen.svg") 0 0/220px repeat;
  mask:url("../img/motif/desen.svg") 0 0/220px repeat;
}

/* Alt bilgi: sütunların üstünde altın çintemani */
#footer::before{
  content:"";display:block;width:84px;height:74px;margin:0 auto clamp(2rem,4vw,3rem);
  background:var(--altin);opacity:1;
  -webkit-mask:url("../img/motif/cintemani.svg") center/contain no-repeat;
  mask:url("../img/motif/cintemani.svg") center/contain no-repeat;
}


/* ── 2 · BAŞLIK SATIRLARI ────────────────────────────────── */

/* SplitText satır maskesi. Gölge ve harf kuyrukları kırpılmasın diye
   satırlara alt nefes. Demo14: çok satırlı başlıkta orta satır şampanya. */
.satir{padding-bottom:.06em;margin-bottom:-.06em}
.satir.vurgu{color:var(--altin)}


/* ── 3 · SOFRA SAHNESİ ───────────────────────────────────── */

/* Ustanın elinden. İmza tabaklar çini madalyonlarda.
   15 Eylül 2026'da yeniden yazıldı. Önceki hâlinde altı tabak sahneye dağılmış
   ve hepsi kendi ekseninde dönüyordu. Şimdi düzenlenmiş bir kompozisyon var,
   dönen tek şey tabağın arkasındaki çini ve o da yalnız imleç üstüne gelince. */

.sofra-sahne{
  position:relative;isolation:isolate;
  margin-inline:calc(50% - 50vw);
  padding-block:clamp(4rem,10vw,7rem);
  background:var(--kagit-2);
  overflow:clip;
}
/* Zeminde çok soluk bir çini dokusu. Beyazdan ayrılsın, ama okumayı bozmasın. */
.sofra-zemin{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--altin);opacity:.032;
  -webkit-mask:url("../img/motif/desen.svg") repeat 0 0/340px;
  mask:url("../img/motif/desen.svg") repeat 0 0/340px;
}
/* width:100% yok. Tema .wrap için content-box bırakıyor, yüzde genişlik yan
   dolgunun üstüne binip kutuyu 40 piksel taşırıyordu ve sağdaki sütun ekranın
   dışında kalıyordu. Blok öğe zaten kalan genişliği dolduruyor. */
.sofra-ic{position:relative;z-index:1;box-sizing:border-box}
.sofra-ic > .bolum-basligi{margin:0;justify-content:center}
.sofra-ic .cizgi{display:none}
.sofra-ic .bolum-basligi-ic{flex-direction:column;gap:.5rem;text-align:center}
.sofra-ic .bolum-basligi .etiket{margin-bottom:0}
.sofra-ic .bolum-basligi h2{font-size:clamp(2.4rem,1rem + 4.2vw,4.6rem)}
.sofra-ic > p{max-width:var(--olcu);margin-inline:auto;text-align:center}

/* Dizi. Telefonda iki, tablette üç, masaüstünde dört sütun. */
.madalyon-dizi{
  list-style:none;padding:0;
  margin:clamp(2.5rem,6vw,4rem) auto 0;
  display:grid;
  gap:clamp(2.2rem,5vw,3.4rem) clamp(1rem,2.5vw,2.2rem);
  grid-template-columns:repeat(2,1fr);
}
@media (min-width:620px){.madalyon-dizi{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1000px){.madalyon-dizi{grid-template-columns:repeat(4,1fr)}}

/* Madalyon. Üstte daire, altında yazı. Üç katman aynı ızgara gözünde üst üste. */
.madalyon{
  --dia:clamp(112px,25vw,150px);
  position:relative;display:grid;justify-items:center;
  grid-template-rows:auto auto;
  min-width:0;
}
.madalyon.buyuk{--dia:clamp(134px,29vw,196px)}

/* İki sütunda da boyut sıraya değil yere bağlı. Veriden gelen sıra telefonda
   üçüncü satırı iki orta madalyonla bırakıyordu. 4n+1 ve 4n iki sütunlu bir
   ızgarada çapraz düşüyor, her satırda bir büyük bir orta. Üç sütunlu tablette
   böyle bir kural yok, oradaki veri sırası zaten sütunla örtüşüyor, ölçüldü. */
@media (max-width:619px){
  .madalyon-dizi > .madalyon:nth-child(4n+1),
  .madalyon-dizi > .madalyon:nth-child(4n){--dia:clamp(134px,29vw,196px)}
  .madalyon-dizi > .madalyon:nth-child(4n+2),
  .madalyon-dizi > .madalyon:nth-child(4n+3){--dia:clamp(112px,25vw,150px)}
}

/* Kaydırmalı ritim. Çift sıradaki madalyon aşağıda duruyor, dizi ızgara değil
   kurulmuş bir sofra gibi okunuyor. */
@media (min-width:620px){
  .madalyon:nth-child(2n){margin-top:clamp(1.2rem,3.5vw,3rem)}
}
@media (min-width:1000px){
  .madalyon:nth-child(2n){margin-top:0}
  .madalyon:nth-child(4n+2),
  .madalyon:nth-child(4n+3){margin-top:clamp(1.4rem,3.5vw,3.2rem)}

  /* Dört sütunda boyut da kaydırma gibi sütuna bağlı. Veriye bağlıyken ilk
     sıra büyük-orta-orta-büyük, ikinci sıra orta-orta-büyük-orta çıkıyordu.
     İki etki üst üste binince ikinci sırada yazılar kırk sekiz piksel
     kayıyor ve dizilim rastgele okunuyordu. Dıştaki ikisi büyük ve yukarıda,
     ortadaki ikisi orta ve aşağıda, her sırada aynı kemer. Dar ekranlarda
     boyut yine veriden geliyor, orada dört sütun yok. */
  .madalyon-dizi > .madalyon:nth-child(4n+1),
  .madalyon-dizi > .madalyon:nth-child(4n){--dia:clamp(134px,29vw,196px)}
  .madalyon-dizi > .madalyon:nth-child(4n+2),
  .madalyon-dizi > .madalyon:nth-child(4n+3){--dia:clamp(112px,25vw,150px)}
}

.madalyon-cini,
.madalyon-halka,
.madalyon-foto{grid-area:1/1;align-self:center;justify-self:center}

/* Arkadaki çini. Motif her tabakta farklı, kısa kod --cini ile veriyor. */
.madalyon-cini{
  width:var(--dia);height:var(--dia);border-radius:50%;
  background:var(--altin);opacity:.2;
  -webkit-mask:var(--cini) no-repeat center/60%;
  mask:var(--cini) no-repeat center/60%;
}
.madalyon-halka{
  width:var(--dia);height:var(--dia);border-radius:50%;
  border:1px solid color-mix(in srgb,var(--altin) 50%,transparent);
}
.madalyon-foto{
  position:relative;z-index:1;
  width:calc(var(--dia) * .88);height:calc(var(--dia) * .88);
  object-fit:contain;display:block;
  filter:drop-shadow(0 12px 20px rgba(39,47,60,.18));
}

/* Yazı sütunun tamamını kaplasın. justify-items:center ile içeriğe göre
   ölçülüyordu ve dar sütunda satır kenardan taşıyordu. */
.madalyon-yazi{
  grid-area:2/1;justify-self:stretch;width:100%;min-width:0;
  display:block;text-align:center;margin-top:clamp(.9rem,2vw,1.3rem);
}
.madalyon-ad{
  display:block;font-family:var(--display);font-weight:400;
  font-size:clamp(1rem,.72rem + .6vw,1.28rem);line-height:1.2;color:var(--metin);
  letter-spacing:.01em;text-wrap:balance;
  max-width:100%;overflow-wrap:break-word;hyphens:manual;
}
.madalyon-not{
  display:block;margin:.4rem auto 0;max-width:min(23ch,100%);
  font-size:.82rem;line-height:1.5;color:var(--metin-3);
  overflow-wrap:break-word;text-wrap:pretty;
}
.madalyon-fiyat{
  display:block;margin-top:.55rem;
  font-family:var(--govde);font-size:.8rem;font-weight:600;letter-spacing:.09em;
  color:var(--kehribar-metin);font-variant-numeric:tabular-nums;
}
.sofra-eylem{margin-top:clamp(2.5rem,6vw,4rem);justify-content:center;display:flex}

/* Hareket yalnız imleç üstüne gelince. Kendiliğinden süren hiçbir şey yok,
   o yüzden duraklatma düğmesi de kalmadı. */
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .madalyon-cini,.madalyon-halka,.madalyon-foto{
    transition:rotate .9s var(--e-out),scale .6s var(--e-out),
               translate .6s var(--e-out),opacity .5s var(--e-out),border-color .5s var(--e-out);
  }
  .madalyon:hover .madalyon-cini{rotate:20deg;opacity:.32}
  .madalyon:hover .madalyon-halka{border-color:var(--altin)}
  .madalyon:hover .madalyon-foto{translate:0 -7px;scale:1.05}
}


/* ── 4 · MENÜ SÜZGEÇ, ÖNİZLEME, PANEL ────────────────────── */

/* Süzgeç üst barın altına yapışıyor. Menü telefonda otuz ekran,
   masaüstünde on yedi ekran, süzgeç sayfanın başında duruyordu ve bir kez
   kaydırılınca bir daha görünmüyordu, ölçüldü. Yüz otuz altı kalemin
   ortasındaki ziyaretçi bölüm değiştirmek için en yukarı dönmek zorundaydı.

   Kural bilerek burada, sultan.css'te değil. Yükleme sırası style, reset,
   wordpress, animation, screen, style, sultan, hareket, grid. hareket.css
   sultan.css'ten sonra geliyor ve aynı ağırlıktaki `.menu-suzgec` kuralı
   oradakini eziyordu, şerit telefonda sarıp 455 piksele çıkıyor ve yapışık
   hâlde ekranın yarısını örtüyordu.

   On bir düğme hiçbir ekranda tek satıra sığmıyor, 1440'ta bile düğmeler
   1413 piksel istiyor, sütun 1042. Masaüstünde iki satıra sarıyor.
   Telefonda sarmak şeridi 455 piksele çıkarıyor ve yapışık hâlde ekranın
   yarısını örtüyordu, orada yatay kaydırma var, sıra korunuyor. */
/* Betik kapalıyken şerit hiç basılmıyor. On bir düğme tıklanabilir görünüyor
   ama hiçbiri iş yapmıyordu, aria-pressed bile kımıldamıyordu. Vejetaryen
   ziyaretçi düğmeye basıp sitenin bozuk olduğunu düşünüyordu, oysa aradığı
   bilgi zaten listede duruyor. İkinci denetim, 16 Eylül 2026. */
.menu-suzgec{display:none}

html.js .menu-suzgec{
  display:flex;flex-wrap:wrap;gap:1.2rem 2rem;
  margin:0 0 2.5rem;padding:.7rem 0 1.2rem;border-bottom:1px solid var(--cizgi);
  position:sticky;
  top:var(--ust-bar-inik);
  z-index:40;
  background:var(--kagit);
  /* Altındaki içerik şeridin altından geçerken kenar belli olsun. */
  box-shadow:0 10px 18px -16px rgba(23,19,15,.45);
}
html.js .menu-suzgec .suzgec{flex:0 0 auto}

@media (max-width:1023px){
  /* Tek satır, yatay kaydırma. Zemin ekranın tamamını kaplıyor, yoksa
     kalemler yan boşluklardan şeridin hizasında görünüyor. */
  /* html.js öneki burada da şart. Üstteki kural aynı öneki taşıyor ve daha
     ağır, medya sorgusu ağırlığı değiştirmiyor, önek olmadan flex-wrap:wrap
     burayı eziyordu. */
  html.js .menu-suzgec{
    flex-wrap:nowrap;
    margin-inline:calc(50% - 50vw);
    padding-inline:calc(50vw - 50%);
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    /* Kaydırma tutturması denendi ve kaldırıldı. `scroll-snap-align:start`
       ilk düğmeyi kabın başına yapıştırıyor, sol dolgu kaydırma alanının
       parçası olduğu için şerit 50 piksel kaymış açılıyor ve HEPSİ yarım
       görünüyordu, ölçüldü. On bir düğmelik bir şeritte tutturmanın
       kazandırdığı bir şey yok. */
  }
  html.js .menu-suzgec::-webkit-scrollbar{display:none}
}
/* Demo14 düğme kalıbı: dolgu yok, altta çizgi, Cormorant. 44 px dokunma hedefi. */
/* Süzgeç bir denetim, gösteri fontu değil gövde fontu kullanıyor. */
.suzgec{
  appearance:none;-webkit-appearance:none;
  background:transparent;border:0;border-bottom:1px solid transparent;border-radius:0;
  padding:.6rem 0;min-height:44px;
  font-family:var(--govde);font-size:.82rem;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;line-height:1.2;
  color:var(--metin-3);cursor:pointer;
  transition:color .3s var(--e-out),border-color .3s var(--e-out);
}
.suzgec:hover{color:var(--murekkep)}
.suzgec.etkin{color:var(--murekkep);border-bottom-color:var(--altin)}
.menu-izgara{position:relative}
/* Süzgeç tek gruba indiğinde düzen değişmiyor, yalnız tek grup kalıyor.
   Önceden 640 piksele daralıp sayfanın ortasında ince bir şerit oluyordu. */
.menu-izgara.tek{grid-template-columns:minmax(0,1fr)}
/* `.kalem` display:grid taşıyor ve bu tarayıcının `[hidden]{display:none}`
   kuralını eziyor. Vejetaryen süzgecinde gizli işaretlenen 93 kalemin 21'i
   ekranda kalıyordu, yani vejetaryen bir ziyaretçi süzgeci açtıktan sonra
   listede yirmi bir etli tabak görmeye devam ediyordu. Aynı tuzağa
   rezervasyon sihirbazında da düşülmüştü, orada .rez-kok [hidden] kuralı
   var. 16 Eylül 2026 denetimi. */
.menu-bolum[hidden],
.menu-grup[hidden],
.menu-kategori[hidden],
.kalem[hidden]{display:none}
.kalem{position:relative}
.kalem.dokun{cursor:pointer}
/* Şevron mantıksal kenara oturuyor, Arapça sayfada sola geçiyor ve
   yönünü de değiştiriyor. `right:0` fiziksel, RTL'de sağda kalıp yanlış
   tarafa bakıyordu. */
.kalem.dokun::after{
  content:"";position:absolute;inset-inline-end:0;top:1rem;width:7px;height:7px;
  border:solid var(--metin-3);border-width:0 1.5px 1.5px 0;transform:rotate(-45deg);opacity:.6;
}
[dir="rtl"] .kalem.dokun::after{transform:rotate(135deg)}
.kalem.dokun .fiyat{padding-inline-end:1.1rem}
.kalem.dokun:focus-visible{outline:2px solid var(--kehribar-metin);outline-offset:2px;border-radius:2px}

/* İmleç yanındaki önizleme. Gölge görselin içine pişirilmiş, filtre yok. */
.menu-onizleme{
  position:fixed;left:0;top:0;z-index:60;
  width:clamp(150px,15vw,230px);
  pointer-events:none;opacity:0;
}
.menu-onizleme img{display:block;width:100%;height:auto}

/* Dokunmatik ayrıntı paneli */
.menu-panel{position:fixed;inset:0;z-index:90}
.menu-panel[hidden]{display:none}
.menu-panel-perde{position:absolute;inset:0;background:rgba(23,19,15,.55)}
.menu-panel-kutu{
  position:absolute;left:0;right:0;bottom:0;
  background:var(--kagit);color:var(--metin);
  border-radius:0;
  padding:1.5rem 1.4rem calc(1.8rem + env(safe-area-inset-bottom));
  max-height:86vh;overflow:auto;
  box-shadow:0 -12px 40px rgba(23,19,15,.28);
}
.menu-panel-kutu:focus{outline:none}
.menu-panel-kapat{
  position:absolute;right:.9rem;top:.9rem;width:44px;height:44px;padding:0;
  border:1px solid var(--cizgi);border-radius:0;background:#fff;cursor:pointer;
}
.menu-panel-kapat::before,.menu-panel-kapat::after{
  content:"";position:absolute;left:50%;top:50%;width:16px;height:1.5px;
  background:var(--metin);transform:translate(-50%,-50%) rotate(45deg);
}
.menu-panel-kapat::after{transform:translate(-50%,-50%) rotate(-45deg)}
.menu-panel-gorsel{width:min(58vw,260px);margin:0 auto .8rem}
.menu-panel-gorsel.bos{display:none}
.menu-panel-gorsel img{display:block;width:100%;height:auto}
.menu-panel h3{font-family:var(--display);font-weight:400;font-size:1.6rem;letter-spacing:-.01em;margin:0 0 .4rem;padding-right:3rem}
.menu-panel-not{color:var(--metin-3);margin:0 0 .7rem;font-size:.95rem;line-height:1.5}
.menu-panel-fiyat{margin:0;font-size:1.1rem}


/* ── 5 · REZERVASYON DÜĞME DURUMLARI ─────────────────────── */

/* Canlı bölge hep DOM'da ve görünür kalır, display:none'dan çıkan bölgeyi ekran okuyucu duyurmuyor. */
.rez-durum{margin:.9rem 0 0;font-size:.88rem;color:var(--kehribar-metin);min-height:1.4em}
.rez-durum:empty{margin:0;min-height:0}
.button{display:inline-block}
.button.yukleniyor{pointer-events:none;opacity:.8}
.button.yukleniyor::after{
  content:"";display:inline-block;width:.85em;height:.85em;margin-left:.6em;vertical-align:-.15em;
  border:2px solid currentColor;border-right-color:transparent;border-radius:50%;
  animation:sultan-donme .8s linear infinite;
}
.button.gonderildi::after{
  content:"";display:inline-block;width:.4em;height:.75em;margin-inline-start:.6em;vertical-align:-.05em;
  border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);
}
@keyframes sultan-donme{to{transform:rotate(360deg)}}
.alan.hata input{border-color:var(--kehribar)}
@media (prefers-reduced-motion:reduce){.button.yukleniyor::after{animation:none;border-right-color:currentColor;opacity:.5}}


/* ── 6 · FOTOĞRAF BANDI PARALAKSI ────────────────────────── */

.bant.fotolu{overflow:hidden;background-image:none}
.bant-foto{
  position:absolute;inset:-14% 0;z-index:-2;
  background-image:var(--gorsel-l,none);
  background-size:cover;background-position:center;
}
/* Yarıçapı sultan.css bölüm 25 veriyor (kemer), burada ezilmiyor. */
.ikili-foto,.alinti-foto{overflow:hidden}


/* ── 7 · OCAK SAHNESİ ────────────────────────────────────── */

/* Dış sarmalayıcı tam genişliği verir, iç bölüm sabitlenir. Negatif
   kenar boşluklu bir öğe sabitlenince pin-spacer ölçüyü şaşırıyor. */
.ocak-dis{margin-inline:calc(50% - 50vw);margin-block:clamp(2rem,5vw,4rem)}
.koyu-bolum.ocak-sahne{margin:0;overflow:hidden}
.koyu-bolum.fotolu{background-image:none}
.ocak-foto{
  position:absolute;inset:-6% 0;z-index:-3;
  background-image:var(--gorsel-l,none);
  background-size:cover;background-position:center;
}
.ocak-sahne .koyu-perde{z-index:-2}
.koyu-bolum.korlu::after{display:none}
.ocak-kor{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(85% 62% at 50% 108%, color-mix(in srgb,var(--kehribar) 62%,transparent) 0%, transparent 68%),
    radial-gradient(52% 40% at 50% 104%, color-mix(in srgb,var(--altin) 45%,transparent) 0%, transparent 70%);
}
.ocak-dalga{display:none}
.ocak-kivilcim{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.ocak-kivilcim i{
  position:absolute;left:var(--x,50%);bottom:-2%;
  width:var(--b,4px);height:var(--b,4px);border-radius:50%;
  background:var(--altin);opacity:0;
  box-shadow:0 0 6px 1px color-mix(in srgb,var(--kehribar) 70%,transparent);
}
/* Kağıt katmanı yalnız betik sahneyi kurunca var. Gündüz çini deseni,
   koyu metin. Kaydırdıkça yanıp mürekkebe döner. */
/* display:none idi. Betik sahneyi kurunca flex'e dönüyordu ve tarayıcı bunu
   ekranın tamamı kadar bir yerleşim kayması sayıyordu, tek başına 1,000 CLS.
   Görünürlük ve opaklık kayma üretmiyor. */
.ocak-kagit{
  display:flex;align-items:center;
  visibility:hidden;opacity:0;
  position:absolute;inset:0;z-index:2;
  background:var(--kagit);color:var(--metin);
  padding-block:inherit;
}
.ocak-sahne.ocak-canli .ocak-kagit{visibility:visible;opacity:1}
.ocak-kagit .wrap{width:100%}
/* Sabitlenen sahne masaüstünde tam ekran, içerik ortada. İki kopya aynı hizada. */
/* Yükseklik baştan ayrılıyor. `.ocak-canli` sınıfı geldikten SONRA verilen
   min-height bölümü büyütüyor ve altındaki her şeyi aşağı itiyordu, kıvılcım
   katmanı da onunla kayıyordu, 0,996 CLS. Betik çalışmasa da bölüm aynı
   yükseklikte duruyor ve içerik ortada kalıyor. */
@media (min-width:1024px){
  .ocak-sahne{min-height:100svh;box-sizing:border-box;display:flex;align-items:center}
  .ocak-sahne .ocak-ic{width:100%}
}
/* Desen kalktı, Mücahit gereksiz buldu. Yerine gece gündüz sahnesi
   (bölüm 14) geldi. */
.ocak-kagit .wrap{position:relative}
.ocak-kagit .bolum-basligi.koyu h2{color:#000}
.ocak-kagit .bolum-basligi.koyu .etiket{color:var(--kehribar-metin)}
.ocak-kagit .bolum-basligi.koyu .cizgi{background:var(--altin)}
.ocak-kagit .bolum-basligi.koyu .motif-benek{color:var(--altin)}
.ocak-kagit p{color:var(--metin-2)}


/* ── 8 · DUYARLI ZEMİN, YENİ KATMANLAR ───────────────────── */

@media (max-width:1200px){.bant-foto,.ocak-foto{background-image:var(--gorsel-m,var(--gorsel-l))}}
@media (max-width:900px){.bant-foto,.ocak-foto{background-image:var(--gorsel-k,var(--gorsel-m,var(--gorsel-l)))}}
@media (max-width:560px){.bant-foto,.ocak-foto{background-image:var(--gorsel-xk,var(--gorsel-k,var(--gorsel-m,var(--gorsel-l))))}}
@media (max-width:560px) and (min-resolution:2dppx){.bant-foto,.ocak-foto{background-image:var(--gorsel-k,var(--gorsel-m,var(--gorsel-l)))}}
@media (min-width:561px) and (max-width:900px) and (min-resolution:2dppx){.bant-foto,.ocak-foto{background-image:var(--gorsel-m,var(--gorsel-l))}}


/* Demo14 paletinde motif hep şampanya altını. */
.hero .cini{color:var(--altin)}
.motif-cintemani{color:var(--altin)}


/* ── 9 · SAYFA GEÇİŞİ ────────────────────────────────────── */

/* Aynı doküman içinde yol değişimi. Belge arası geçişe güvenilmiyor,
   hareket.js içeriği kendisi getirip değiştiriyor ve View Transitions
   varsa onunla, yoksa GSAP ile canlandırıyor. Üst bar kendi katmanında
   sabit kalır, sayfanın kilit görseli eski kutudan yeni kutuya taşınır. */
@view-transition{navigation:none}
.header_style_wrapper{view-transition-name:ust-bar}
[data-flip-id="sahne-gorsel"]{view-transition-name:sahne-gorsel}
body:not(.sultan-hero):not(.sultan-foto-basligi) #page_caption{view-transition-name:sahne-gorsel}
::view-transition-old(root){animation:.3s cubic-bezier(.65,0,.35,1) both vt-cikis}
::view-transition-new(root){animation:.5s cubic-bezier(.16,1,.3,1) both vt-giris}
::view-transition-group(sahne-gorsel){animation-duration:.62s;animation-timing-function:cubic-bezier(.65,0,.35,1)}
::view-transition-old(sahne-gorsel),::view-transition-new(sahne-gorsel){height:100%;object-fit:cover;animation-duration:.45s}
::view-transition-group(ust-bar){animation:none}
@keyframes vt-cikis{to{opacity:0;transform:translateY(-14px)}}
@keyframes vt-giris{from{opacity:0;transform:translateY(18px)}}
html.gecis-suruyor::after{
  content:"";position:fixed;left:0;top:0;z-index:9999;height:2px;width:100%;
  background:var(--altin);transform-origin:left;transform:scaleX(0);
  animation:gecis-cubuk 1.4s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes gecis-cubuk{to{transform:scaleX(.88)}}


/* ── 10 · AZALTILMIŞ HAREKET ─────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  html.gecis-suruyor::after{animation:none;transform:scaleX(1)}
  .baharat{display:none}
  .ocak-kagit{display:none !important}
  .menu-onizleme{display:none}
}


/* ── 11 · YAZMA EFEKTİ ───────────────────────────────────── */

/* Metin kaydırıldıkça harf harf yazılıyor. Kural şu, metin HTML'de tam
   duruyor, betik yalnız harflerin görünürlüğünü açıyor. Ekran okuyucu,
   arama motoru ve betiksiz tarayıcı tam metni görür. Betik yüklenmezse
   ya da azaltılmış hareket açıksa hiçbir şey gizlenmez. */

.yaziliyor{position:relative}
.yaziliyor .harf{opacity:0}
.yaziliyor.bitti .harf{opacity:1}

/* İmleç. Yazma sürerken son harfin ardında, bitince kalkıyor.

   İmleç satıra genişlik ekliyordu. Son satırı neredeyse dolu olan bir
   başlıkta bu son kelimeyi alt satıra atıyor, başlık bir satır uzuyor ve
   altındaki her şey kayıyordu. Ölçüldü, yeni rehber sayfasında telefonda
   CLS 0,076. Yatay ilerleme sıfırlandı, sol kenar boşluğu kadar negatif
   sağ kenar boşluğu veriliyor, imleç görünüyor ama satır kırılmasına
   karışmıyor. */
.yazi-imleci{
  display:inline-block;width:.06em;min-width:1px;height:1em;
  vertical-align:-.12em;
  margin-left:.06em;margin-right:calc(-.06em - 1px);
  background:currentColor;opacity:.75;
  animation:sultan-imlec .9s steps(1,end) infinite;
}
@keyframes sultan-imlec{0%,50%{opacity:.75}50.01%,100%{opacity:0}}

@media (prefers-reduced-motion:reduce){
  .yaziliyor .harf{opacity:1 !important}
  .yazi-imleci{display:none}
}


/* ── 12 · KEMERLİ FOTOĞRAFIN SÜZÜLMESİ ───────────────────── */

/* Kemerin içindeki fotoğraf kutusundan büyük duruyor, kaydırmada
   kutunun içinde kayıyor. Kutu sabit, yalnız fotoğraf hareket ediyor,
   yerleşim hiç tetiklenmiyor. */
.suzulen{overflow:hidden}
.suzulen > img{
  display:block;width:100%;height:auto;
  transform:scale(1.1);transform-origin:center;
}
@media (prefers-reduced-motion:reduce){
  .suzulen > img{transform:none}
}


/* ── 13 · YAZMA EFEKTİNİN SATIR SONU ─────────────────────── */

/* Harfe bölünen metinde kelime sarmalayıcısı satır sonunu tutuyor.
   Sarmalayıcı olmadan tarayıcı her harften sonra satır kesebiliyor. */
/* display DEĞİŞTİRİLMİYOR. inline-block satır kırılmasını ve kelime arasını
   değiştiriyor, metin bölününce sayfa zıplıyordu. Kelime sarmalayıcısı
   nowrap ile kelimeyi bütün tutuyor, bu yerleşimi hiç etkilemiyor. */
.yaziliyor .kelime{white-space:nowrap}

/* Menü grup başlıkları da büyük harf, demo14 ölçeği. */
.menu-grup .grup-basligi h2{text-transform:uppercase;letter-spacing:.02em}


/* ── 14 · GECE GÜNDÜZ SAHNESİ ────────────────────────────── */

/* Ocak bölümündeki desenlerin yerine geçti. Kaydırdıkça güneş kavis
   çizip batıyor, ay doğuyor, yıldızlar çıkıyor, saat dokuzdan ikiye
   gidiyor. Bütün hareket hareket.js bölüm 1'deki sabit çizelgede,
   burada yalnız duruş var. Betiksiz ve azaltılmış harekette sahne
   son hâliyle, gece olarak durur. */

/* Gök kağıt katmanının da üstünde. Gündüz sahnesinde güneşin kağıdın
   arkasında kalmaması için. İçerik ikisinin de üstünde. */
.ocak-gok{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.ocak-sahne .ocak-ic{position:relative;z-index:4}
.ocak-saat{z-index:5}

/* Kavisin merkezi bölümün alt ortası. Güneş ve ay bu noktanın üstünde
   yarım daire çiziyor, yani gerçekten doğup batıyorlar. */
.gok-gunes,.gok-ay{
  --gok-cap:clamp(52px,6vw,92px);
  position:absolute;left:50%;top:84%;
  width:var(--gok-cap);height:var(--gok-cap);border-radius:50%;
  margin:calc(var(--gok-cap) / -2) 0 0 calc(var(--gok-cap) / -2);
  /* will-change burada kalıcı duruyordu ve hareket.js'in wc() disiplinini
     eziyordu. Betik güneşle ayı onToggle içinde açıp kapatıyor, sahne
     ekranda değilken katman belleği tutulmuyor. */
}
.gok-gunes{
  background:radial-gradient(circle at 42% 38%, #FFF3D6 0%, #F6D98A 46%, #E7B85A 72%, rgba(231,184,90,0) 73%);
  box-shadow:0 0 60px 18px rgba(246,217,138,.42),0 0 140px 50px rgba(231,184,90,.22);
}
.gok-ay{
  background:radial-gradient(circle at 38% 34%, #FBF7EC 0%, #E6E2D6 55%, #CFCBBE 74%, rgba(207,203,190,0) 75%);
  box-shadow:0 0 44px 12px rgba(251,247,236,.3),0 0 110px 40px rgba(188,175,135,.16);
  opacity:0;
}

.gok-yildizlar{position:absolute;inset:0;opacity:0}
.gok-yildizlar i{
  position:absolute;left:var(--x);top:var(--y);
  width:var(--b);height:var(--b);border-radius:50%;
  background:#FBF7EC;opacity:var(--g);
  box-shadow:0 0 6px 1px rgba(251,247,236,.5);
}

/* Saat. Sahnenin köşesinde, kaydırmayla dokuzdan ikiye gidiyor. */
.ocak-saat{
  position:absolute;z-index:3;margin:0;
  right:clamp(1.25rem,5vw,4rem);top:clamp(5.5rem,11vw,8rem);
  font-family:var(--govde);font-variant-numeric:tabular-nums;
  font-size:.82rem;letter-spacing:.24em;font-weight:500;
  color:var(--altin);opacity:0;
}
.ocak-saat{opacity:0}
.ocak-sahne:not(.ocak-canli) .ocak-saat{opacity:.85}
.ocak-saat::before{
  content:"";display:inline-block;width:26px;height:1px;
  background:currentColor;vertical-align:.3em;margin-right:.7rem;opacity:.6;
}
@media (max-width:760px){
  .ocak-saat{right:auto;left:clamp(1.25rem,5vw,4rem);top:auto;bottom:clamp(1.25rem,4vw,2rem)}
  .gok-gunes,.gok-ay{--gok-cap:clamp(40px,10vw,64px)}
}

@media (prefers-reduced-motion:reduce){
  .gok-gunes{opacity:0}
  .gok-ay,.gok-yildizlar{opacity:1}
  .ocak-saat{opacity:.85}
}