/* ═══════════════════════════════════════════════════════════
   SULTAN GRILL HOUSE
   Grand Restaurant üzerine kimlik katmanı.

   Tipografi  ZT Neue Ralewe (display) · Blumir (gövde)
   Konsept    Ocak — sayfa gündüz çiniden gece kora iner
   Kural      Altın yalnız koyu zeminde. Açık zeminde kobalt konuşur.
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · FONTLAR ─────────────────────────────────────────── */

/* 14 Eylül 2026, Mücahit'in gönderdiği aile. Sugar Magic gösteri (didone),
   GC Fentura gövde (geometrik grotesk), Handful of Sunshine el yazısı vurgu.
   Üçü de kendi sunucumuzdan, Latin + Türkçe alt kümesi, toplam 103 KB.

   Sugar Magic ve Sunshine fontlarında ş Ş ğ Ğ İ harfleri YOKTU. Fontun kendi
   sedilla, breve ve nokta aksanlarından üretildi, konum fontun kendi Ccedilla
   ve Odieresis glifinden ölçüldü. Ayrıntı assets/fonts/KAYNAK.md.
   GC Fentura'da ₺ yok, tarayıcı o glifi yedekten alır, kutu çıkmaz. */
@font-face{font-family:"Sugar Magic";src:url("../fonts/sugar-magic.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fentura";src:url("../fonts/fentura-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:"Fentura";src:url("../fonts/fentura-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Fentura";src:url("../fonts/fentura-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Fentura";src:url("../fonts/fentura-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Sunshine";src:url("../fonts/sunshine.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* metrik uyumlu yedekler — swap anında satır kaymasın */
/* Yedek font ölçüleri tahmin değil, ölçüm. Genişlik oranı tarayıcıda aynı
   cümle iki fontla dizilip karşılaştırıldı, dikey değerler fontun kendi hhea
   tablosundan alındı. Doğru ölçü olmadan font gelince satır kayıyor ve sayfa
   zıplıyordu (rehber sayfasında CLS 0,17 ölçüldü). */
@font-face{font-family:"Sugar Fallback";src:local("Georgia"),local("Times New Roman");size-adjust:92%;ascent-override:85.1%;descent-override:25.5%;line-gap-override:0%}
@font-face{font-family:"Fentura Fallback";src:local("Helvetica Neue"),local("Arial");size-adjust:101.2%;ascent-override:85%;descent-override:25%;line-gap-override:0%}


/* ── 2 · DEĞİŞKENLER ─────────────────────────────────────── */

:root{
  --kagit:#FFFFFF;          /* demo14: saf beyaz */
  --kagit-2:#F5F4F1;
  --murekkep:#272F3C;       /* demo14 lacivert mürekkep */
  --murekkep-2:#1C2230;

  /* ── KURUMSAL PALET, 17 Eylül 2026'da Mücahit'ten geldi.
     Altısı da burada duruyor ama hepsi kullanılmıyor, kullanılan dördü
     yemeğin rengiyle kavga etmeyen sıcak taraf.

       Kobalt   #1E5091   KULLANILMIYOR. Mavi iştahı kesen tek renk,
                          yemek fotoğrafının yanında soğuk duruyor.
       Çini     #0E6E69   helal rozeti. Beyazda 6,08.
       Adaçayı  #6E7A34   vejetaryen işareti. Beyaz yazıyla 4,67.
       Patlıcan #6E3B5C   YEDEKTE. Bugün bir yeri yok, uydurma bir yere
                          konmadı.
       Kehribar #C46A2B   kor ışığı ve odak halkası. Yazı taşımıyor.
       Altın    #C29A3B   dekor ve koyu zeminde metin. Mürekkepte 5,12.

     Kehribar'ın kendisi yazı taşıyamıyor, beyazla 3,86 mürekkeple 3,49
     veriyor, ikisi de eşiğin altında. Dolgulu düğme için koyultulmuş
     tonu kullanılıyor, aşağıda --kor.

     Altın beyaz zeminde metin OLARAK KULLANILMAZ, 2,63 veriyor. Eski
     şampanya 2,18 veriyordu, kural aynı kaldı, yalnız rakam düzeldi. */
  --kobalt:#272F3C;         /* yapı rengi mürekkep, kurumsal Kobalt DEĞİL */
  --cini:#0E6E69;           /* çini teal, helal rozeti, beyazda 6,08 */
  --cini-koyu:#0B5854;
  --adacayi:#6E7A34;        /* vejetaryen, beyaz yazıyla 4,67 */
  --patlican:#6E3B5C;
  --kehribar:#C46A2B;        /* kor ışığı, kurumsal Kehribar */
  --kehribar-dolgu:#272F3C;  /* dolgulu düğme kalmadı, form gönder için mürekkep */
  --kehribar-metin:#6F6238;  /* etiketler, beyazda 5,6 */
  --altin:#C29A3B;          /* kurumsal altın, yalnız dekor ve koyu zemin */
  /* Kor. Kurumsal Kehribar'ın koyultulmuş tonu. Kehribar'ın kendisi
     beyaz yazıyla 3,86 veriyor, eşik 4,50. Bu ton 5,18 veriyor ve aynı
     turuncu ailede kalıyor. Yalnız dolgulu rezervasyon düğmesinde ve
     kardeşlerinde. 17 Eylül 2026. */
  --kor:#A85721;
  --kor-koyu:#8F4A1B;

  --tirnak:clamp(60px,15vw,76px);  /* mobil menüde kalem fotoğrafı */
  --zemin:var(--kagit);
  --metin:var(--murekkep);
  --metin-2:#3F4756;
  --metin-3:#5E6672;        /* beyazda 5,2 */
  --cizgi:rgba(39,47,60,.18);
  --cizgi-ince:rgba(39,47,60,.08);
  --vurgu:var(--kobalt);

  --display:"Sugar Magic","Sugar Fallback",Georgia,serif;
  --govde:"Fentura","Fentura Fallback","Helvetica Neue",Arial,sans-serif;
  --elyazisi:"Sunshine","Segoe Script","Bradley Hand",cursive;

  --t-hero:clamp(2.125rem,1.1rem + 3.7vw,4.7rem);   /* demo14: 75 px, mobil 34 */
  --t-baslik:clamp(1.875rem,1rem + 3.5vw,4.7rem);
  --t-h3:1.5rem;
  --t-govde:clamp(1rem,.95rem + .3vw,1.125rem);   /* demo14: 18 px, satır 1,8 */
  --t-etiket:.72rem;

  --pad:clamp(1.25rem,5vw,4rem);
  --olcu:64ch;
  --kapsayici:1170px;         /* demo14 kapsayıcı */

  --e-out:cubic-bezier(.16,1,.3,1);
  --e-inout:cubic-bezier(.65,0,.35,1);
}


/* ── 3 · GÖVDE ───────────────────────────────────────────── */

body,
body.custom-background,
#wrapper,
#page_content_wrapper{
  background-color:var(--kagit);
  color:var(--metin);
}

body,
input,
textarea,
select,
button,
.post_content,
#page_content_wrapper,
.sidebar_widget{
  font-family:var(--govde);
  font-size:var(--t-govde);
  line-height:1.8;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5,h6,
.page_title,
.post_header h2,
.post_header h5,
.sidebar_widget li h2.widgettitle,
.widgettitle{
  font-family:var(--display);
  font-weight:300;
  color:var(--metin);
  letter-spacing:-.02em;
  text-wrap:balance;
}

h1,.page_title{font-size:var(--t-baslik);line-height:1.02;letter-spacing:-.025em}
h2{font-size:clamp(1.8rem,1rem + 2.6vw,2.9rem);line-height:1.08;letter-spacing:-.02em}
h3{font-size:var(--t-h3);font-weight:400;line-height:1.2;letter-spacing:-.01em}
h4{font-size:1.32rem;font-weight:400;letter-spacing:-.005em}
h5,h6{font-family:var(--govde);font-weight:600;letter-spacing:.02em}

/* gövde metni asla daraltılmaz */
p,li,dd,td,.post_content p{letter-spacing:normal}


/* ── 4 · TÜRKÇE TİPOGRAFİ ────────────────────────────────── */

/* fi ve f_f_i ligatürleri i'nin noktasını yiyor. fındık, fırın, tarifi. */
:lang(tr),:lang(az){font-variant-ligatures:no-common-ligatures}

/* Büyük harf dönüşümü Türkçeyi bozuyor. Etiketler CMS'te zaten istenen
   büyüklükte yazılır, tarayıcıya çevirtmiyoruz. */
.page_title,
.post_header h2,
.post_header h5,
#menu_wrapper .nav ul li a,
#menu_wrapper div .nav li a,
.sidebar_widget li h2.widgettitle,
.widgettitle,
.post_info,
.button,
.small_button,
input[type=submit],
.tg_food_menu_title,
.gallery_content h3,
h1,h2,h3,h4,h5,h6{
  text-transform:none;
}

/* Arapça — harf aralığı bitişik yazıyı bozar, asla verilmez */
:lang(ar){
  letter-spacing:normal !important;
  text-transform:none !important;
  line-height:1.85;
  font-size:1.12em;
}
:lang(ar) h1,:lang(ar) h2,:lang(ar) h3,:lang(ar) h4{letter-spacing:normal !important}


/* ── 5 · FİYAT ───────────────────────────────────────────── */

/* ZT Neue Ralewe'de ₺ işareti yok. Fiyat her zaman gövde fontuyla dizilir. */
.fiyat,
.tg_food_menu_price,
.price,
.amount,
.woocommerce-Price-amount{
  font-family:var(--govde) !important;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--kobalt);
  white-space:nowrap;
  letter-spacing:normal;
}


/* ── 6 · TEMANIN ALTIN RENGİNİ EZ ────────────────────────── */

/* #cfa670 açık zeminde 2,6 kontrast veriyor, metin olamaz.
   Açık zeminde kobalt ve kehribar metni, koyu zeminde altın. */

a{color:var(--kobalt)}
a:hover,a:active{color:var(--kehribar-metin)}

.post_info a,
.post_info a:hover,
.sidebar_widget a:hover,
#page_content_wrapper a:hover{color:var(--kehribar-metin)}

/* temanın doğrudan yazdığı altın geçişleri */
.tg_food_menu_highlight,
.page_tagline,
.post_header h5 a,
.tp_recent_tweets .twitter_time,
.testimonial_client_info,
blockquote:before{color:var(--kehribar-metin) !important}

.button,
.small_button,
input[type=submit],
button[type=submit],
.woocommerce a.button,
.woocommerce button.button{
  background:var(--kehribar-dolgu) !important;
  border-color:var(--kehribar-dolgu) !important;
  color:var(--kagit) !important;
  font-family:var(--govde);
  font-weight:600;
  font-size:.8rem;
  letter-spacing:.11em;
  border-radius:2px;
  text-transform:none;
  transition:background .3s var(--e-out),border-color .3s var(--e-out);
}
.button:hover,
.small_button:hover,
input[type=submit]:hover,
button[type=submit]:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover{
  background:#7F4317 !important;
  border-color:#7F4317 !important;
  color:var(--kagit) !important;
}

/* koyu zeminler — burada altın konuşur */
#footer,
#footer_wrapper,
.dark_section,
.ocak,
.gece{
  background:var(--murekkep);
  color:#B2A894;
}
#footer a:hover,
#footer_wrapper a:hover,
.dark_section a,
.ocak .etiket,
.gece .etiket{color:var(--altin)}

#footer h2,#footer h3,#footer h4,
#footer .widgettitle{color:var(--altin);font-family:var(--govde);font-size:.72rem;letter-spacing:.2em;font-weight:600}


/* ── 7 · MENÜ ÇUBUĞU ─────────────────────────────────────── */

#menu_wrapper .nav ul li a,
#menu_wrapper div .nav li a{
  font-family:var(--govde);
  font-size:.82rem;
  font-weight:500;
  letter-spacing:.11em;
  color:var(--metin);
}
#menu_wrapper .nav ul li a:hover,
#menu_wrapper div .nav li a:hover,
#menu_wrapper .nav li.current-menu-item > a,
#menu_wrapper div .nav li.current-menu-item > a{color:var(--kehribar-metin)}

#logo_wrapper .logo_text,
#logo h1 a{font-family:var(--display);font-weight:400;letter-spacing:.01em}

#top_bar{background:var(--murekkep);color:var(--kagit)}
#top_bar a{color:var(--kagit)}
#top_bar a:hover{color:var(--altin)}


/* ── 8 · ETİKET VE AYRAÇ ─────────────────────────────────── */

.etiket{
  font-family:var(--govde);
  font-size:var(--t-etiket);
  letter-spacing:.24em;
  
  font-weight:600;
  color:var(--kehribar-metin);
  margin:0 0 1.1rem;
}

.helal{
  display:inline-block;vertical-align:2px;margin-left:.45rem;
  font-family:var(--govde);
  font-size:.6rem;letter-spacing:.14em;font-weight:700;
  color:var(--cini-koyu);border:1px solid currentColor;border-radius:2px;
  padding:.1em .35em;
}

hr,.hr_line,.divider{border-color:var(--cizgi);background:var(--cizgi)}


/* ── 9 · FORM ────────────────────────────────────────────── */

input[type=text],input[type=email],input[type=tel],input[type=date],
input[type=number],select,textarea{
  background:var(--kagit-2);
  border:1px solid var(--cizgi);
  border-radius:2px;
  color:var(--metin);
  font-family:var(--govde);
}
input:focus,select:focus,textarea:focus{
  border-color:var(--kobalt);
  outline:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--kobalt) 14%,transparent);
}

::selection{background:var(--altin);color:var(--murekkep)}
:focus-visible{outline:2px solid var(--kehribar);outline-offset:3px;border-radius:2px}


/* ── 10 · ERİŞİLEBİLİRLİK ────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
  /* paralaks ve sabitleme tamamen kalkar */
  .parallax,.hw-parallax,[data-parallax]{
    background-attachment:scroll !important;
    transform:none !important;
  }
}

/* fotoğraf üzerine krem metin gelirse perde şart */
.foto-uzeri{position:relative;isolation:isolate}
.foto-uzeri::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,19,15,.15) 0%,rgba(23,19,15,.68) 100%);
}

.atlama-baglantisi{
  position:fixed;left:.75rem;top:.75rem;z-index:9999;
  background:var(--murekkep);color:var(--kagit);
  padding:.8rem 1.2rem;text-decoration:none;border-radius:2px;
  font-weight:600;font-size:.85rem;
  transform:translateY(-150%);
  transition:transform .15s var(--e-out);
}
.atlama-baglantisi:focus{transform:translateY(0)}

/* Odak göstergesi her zaman görünür. Tema bazı yerlerde outline:none veriyor.

   İKİNCİ DENETİM, 16 Eylül 2026. Kural yalnız :focus-visible ile yazılıydı.
   Safari 15.0-15.3, Chrome ve Android WebView 85 altı, Samsung Internet 13
   altı onu tanımıyor, seçici geçersiz sayılıyor ve temanın outline:none'ı
   ayakta kalıyordu. Klavyeyle gezen ziyaretçi kahraman alandaki "Masa ayırt"
   düğmesinde hiçbir halka görmüyordu.

   Üç kural birlikte çalışıyor. Düz :focus her tarayıcıda halkayı basıyor.
   Ardından gelen :focus:not(:focus-visible) yalnız modern tarayıcıda geçerli
   ve fare tıklamasındaki halkayı kaldırıyor, eski tarayıcı o seçiciyi
   tanımadığı için kuralın tamamını atlıyor ve halka orada kalıyor. */
a:focus,button:focus,input:focus,
select:focus,textarea:focus,[tabindex]:focus{
  outline:2px solid var(--kehribar-metin) !important;
  outline-offset:3px !important;
  border-radius:2px;
}
a:focus:not(:focus-visible),button:focus:not(:focus-visible),
input:focus:not(:focus-visible),select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),[tabindex]:focus:not(:focus-visible){
  outline:none !important;
}
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--kehribar-metin) !important;
  outline-offset:3px !important;
  border-radius:2px;
}
.ocak a:focus,.gece a:focus,#footer a:focus,
.mobile_menu_wrapper a:focus,.mobile_menu_wrapper button:focus,
.ocak a:focus-visible,.gece a:focus-visible,#footer a:focus-visible,
.mobile_menu_wrapper a:focus-visible,.mobile_menu_wrapper button:focus-visible{
  outline-color:var(--altin) !important;
}
#icerik{scroll-margin-top:6rem}


/* ── 11 · FOTOĞRAF YUVALARI ──────────────────────────────── */

/* Çekim yapılmadı. Yuvalar doğru oranda duruyor, üstünde hangi karenin
   geleceği yazıyor. Yapay zekâ görseli konmayacak. */
.yuva{
  position:relative;border:1px solid var(--cizgi);border-radius:2px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--kobalt) 9%,var(--kagit-2)),var(--kagit-2));
  display:grid;place-items:center;overflow:hidden;color:var(--kobalt);
}
.yuva span{
  position:relative;font-size:.7rem;letter-spacing:.2em;
  font-weight:600;opacity:.65;text-align:center;padding:1rem;
}
.yuva.dikey{aspect-ratio:4/5}
.yuva.yatay{aspect-ratio:3/2}
.yuva.kare{aspect-ratio:1}


/* ── 12 · BÖLÜMLER ───────────────────────────────────────── */

/* box-sizing 16 Eylül 2026 denetiminde eklendi. content-box'ta dolgu
   max-width'in DIŞINA ekleniyor, tam genişlik bölümlerin içindeki `.wrap`
   normal bölümlerden 64 piksel dışarı taşıyordu. 1440'ta ölçüldü, koyu
   bölümdeki ızgara 135-1305, hemen altındaki bölüm 199-1241, iki komşu
   bölümün kenarı kaymış duruyordu. */
.wrap{box-sizing:border-box;max-width:var(--kapsayici);margin-inline:auto;padding-inline:var(--pad)}
.dar{max-width:var(--olcu)}

/* gerçekler şeridi */
.gercekler{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  border-top:1px solid var(--cizgi);margin:clamp(3rem,7vw,5rem) 0 0;
}
.gercekler > div{padding:1.5rem 1.5rem 1.5rem 0;border-right:1px solid var(--cizgi-ince)}
.gercekler > div:last-child{border-right:0}
.gercekler dt{font-size:.7rem;letter-spacing:.2em;color:var(--metin-3);font-weight:600;margin-bottom:.45rem}
.gercekler dd{margin:0;font-family:var(--display);font-size:1.5rem;font-weight:400;line-height:1.15;letter-spacing:-.01em;color:var(--metin)}

@media (max-width:900px){
  .gercekler > div{border-right:0;border-bottom:1px solid var(--cizgi-ince);padding:1.15rem 0}
  .gercekler > div:last-child{border-bottom:0}
}

/* ocak — koyu zemin, alttan kor */
.ocak{
  position:relative;isolation:isolate;color:var(--kagit);
  background:var(--murekkep);
  padding-block:clamp(5.5rem,13vw,10rem);
  overflow:hidden;margin-block:clamp(3rem,8vw,6rem);
}
.ocak::before{
  content:"";position:absolute;inset:0;z-index:-1;
  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) 42%,transparent) 0%, transparent 70%);
  opacity:.9;
}
.ocak .etiket{color:var(--altin)}
.ocak .baslik,.ocak h2{color:var(--kagit);font-family:var(--display);font-weight:300;font-size:var(--t-baslik);line-height:1.02;letter-spacing:-.025em;margin:0 0 1.5rem}
.ocak p{color:#C9BFAC;max-width:var(--olcu)}

.kor{display:grid;gap:1px;background:rgba(251,243,226,.18);border:1px solid rgba(251,243,226,.18);margin-top:clamp(2.5rem,6vw,4rem);grid-template-columns:1fr}
@media (min-width:760px){.kor{grid-template-columns:repeat(3,1fr)}}
.kor article{background:var(--murekkep);padding:1.7rem 1.5rem}
.kor h3{font-family:var(--display);font-weight:400;font-size:1.55rem;letter-spacing:-.01em;margin:0 0 .55rem;color:var(--kagit)}
.kor p{margin:0;font-size:.95rem;color:#B2A894}
.kor .no{font-family:var(--govde);font-size:.7rem;letter-spacing:.2em;color:var(--altin);font-weight:600;display:block;margin-bottom:.9rem}

/* menü */
/* Gruplar alt alta, her biri tam genişlikte. Önceden iki sütunlu bir ızgaraydı
   ve gruplar çok farklı boylarda olduğu için (Salatalar 6 kalem, Ocak başı 33)
   satırın kısa yanında koca beyaz boşluklar kalıyordu. Sayfa bütün görünmüyordu.
   Şimdi sütunlaşma grubun içinde, kategoriler arasında oluyor, boşluk kalmıyor. */
.menu-izgara{display:grid;gap:clamp(2rem,5vw,3.5rem);grid-template-columns:minmax(0,1fr)}
.menu-bolum h3{
  font-family:var(--display);font-weight:400;font-size:var(--t-h3);letter-spacing:-.01em;
  margin:0 0 1.2rem;padding-bottom:.7rem;border-bottom:1px solid var(--cizgi);color:var(--metin);
}
/* Kalem düzeni. Varsayılan tırnaklı, çünkü imleç önizlemesi her yerde yok.
   Masaüstü ve fare varsa aşağıdaki medya sorgusu tırnağı kaldırıp eski iki
   sütunlu düzene döndürüyor. */
.kalem{
  display:grid;grid-template-columns:var(--tirnak) 1fr auto;
  gap:.28rem .85rem;align-items:start;
  padding:.8rem 0;border-bottom:1px solid var(--cizgi-ince);
}
.kalem:last-child{border-bottom:0}
/* Satır ve sütun açıkça veriliyor. Ad rozetlerle birlikte sarınca fiyat
   ikinci satıra düşüyordu, şimdi ikisi de birinci satırda kalıyor. */
.kalem .ad{grid-column:2;grid-row:1;font-weight:600;font-size:1.02rem;color:var(--metin)}
.kalem .fiyat{grid-column:3;grid-row:1;white-space:nowrap}
.kalem .not{grid-column:2/-1;grid-row:2;font-size:.88rem;color:var(--metin-3);line-height:1.45}

/* Tırnak. Kesim fotoğrafı alfa kanallı, zemine oturmuyor, tabak havada duruyor.
   contain kullanılıyor, uzun tabak kırpılmasın. */
.kalem-tirnak{
  /* span 2 şart. 1/-1 açık satır tanımı olmadığı için tek satıra çözülüyor,
     tırnak yalnız birinci satıra oturup onu 60 piksele şişiriyor ve adla
     açıklama arasında boşluk bırakıyordu. */
  grid-column:1;grid-row:1/span 2;
  width:var(--tirnak);height:var(--tirnak);
  object-fit:contain;object-position:center;
  display:block;align-self:center;
}
/* Fotoğrafı olmayan kalem. Boş bırakılınca satır ritmi bozuluyordu,
   yerine soluk bir çini beneği kondu. */
.kalem-tirnak.yok{
  border-radius:2px;
  background:color-mix(in srgb,var(--altin) 12%,transparent);
  -webkit-mask:url("../img/motif/benek.svg") no-repeat center/46%;
  mask:url("../img/motif/benek.svg") no-repeat center/46%;
}

@media (min-width:1024px) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  /* İmleç önizlemesi burada çalışıyor, tırnağa gerek yok. */
  .kalem{grid-template-columns:1fr auto;align-items:baseline;gap:.2rem .9rem;padding:.72rem 0}
  .kalem-tirnak{display:none}
  .kalem .ad{grid-column:1;grid-row:1}
  .kalem .fiyat{grid-column:2;grid-row:1}
  .kalem .not{grid-column:1/-1;grid-row:2}
}
.menu-dipnot{font-size:.85rem;color:var(--metin-3);margin-top:2rem;border-top:1px solid var(--cizgi-ince);padding-top:1rem}

/* gece */
.saat-listesi{list-style:none;padding:0;margin:2rem 0 0;border-top:1px solid var(--cizgi)}
.saat-listesi li{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--cizgi-ince);font-size:.95rem}
.saat-listesi b{font-weight:500;color:var(--metin-2)}
.saat-listesi span{font-variant-numeric:tabular-nums;color:var(--kobalt);font-weight:600}
.gece .saat-listesi,.ocak .saat-listesi{border-top-color:rgba(251,243,226,.16)}
.gece .saat-listesi li,.ocak .saat-listesi li{border-bottom-color:rgba(251,243,226,.09)}
.gece .saat-listesi b{color:#C9BFAC}
.gece .saat-listesi span{color:var(--altin)}

/* rezervasyon */
.rez-form{max-width:44rem}
.form-satir{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-bottom:1rem}
.alan{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1rem}
.alan label{font-size:.7rem;letter-spacing:.16em;font-weight:600;color:var(--metin-3)}
.alan input,.alan select,.alan textarea{padding:.72rem .85rem;width:100%;font-size:.98rem}
.alan textarea{resize:vertical;min-height:88px}
.rez-eylem{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.2rem}
.button-bos{background:transparent !important;color:var(--metin) !important;border:1px solid var(--cizgi) !important}
.button-bos:hover{background:var(--kagit-2) !important;color:var(--metin) !important;border-color:var(--kobalt) !important}
.yardim{font-size:.85rem;color:var(--metin-3);margin-top:1rem;max-width:52ch}

/* konum */
.konum-izgara{display:grid;gap:1px;background:var(--cizgi);border:1px solid var(--cizgi);grid-template-columns:1fr;margin:0}
@media (min-width:700px){.konum-izgara{grid-template-columns:repeat(3,1fr)}}
.konum-izgara > div{background:var(--zemin);padding:1.6rem 1.5rem}
.konum-izgara dt{font-size:.7rem;letter-spacing:.2em;color:var(--metin-3);font-weight:600;margin-bottom:.6rem}
.konum-izgara dd{margin:0;font-size:1rem;line-height:1.6}

/* harita — tıklayana kadar Google'a istek gitmez */
.harita-kutu{margin-top:1.5rem;border:1px solid var(--cizgi);background:var(--kagit-2);padding:1.5rem;display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.harita-kutu iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.harita-not{font-size:.82rem;color:var(--metin-3)}

/* açılış — görünür halden başlar, betik yüklenmese de içerik durur */
.ac{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){
  /* Yalnız kayma, opaklık yok. Opaklık ara karelerde metin rengini zeminle
     karıştırıyor, kontrast denetimi o anı yakalıyordu. Kayma hiçbir anda
     metni okunmaz hale getirmiyor. */
  html.js .ac{transform:translateY(16px);transition:transform .8s var(--e-out)}
  html.js .ac.gorundu{transform:none}
  html.js .ac.g1{transition-delay:.06s}html.js .ac.g2{transition-delay:.12s}html.js .ac.g3{transition-delay:.18s}
}


/* ── 13 · HERO ───────────────────────────────────────────── */

/* Ön sayfada temanın başlık bandı yerine kendi hero'muz var.
   İç sayfalarda tema başlığı kalsın, orada işini görüyor. */
body.home #page_caption{display:none}
body.home #page_content_wrapper{padding-top:0}

.hero{
  position:relative;isolation:isolate;
  padding-block:clamp(7rem,15vh,11rem) clamp(4rem,9vw,7rem);
  margin-inline:calc(50% - 50vw);
  background:radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--kobalt) 13%,var(--kagit)) 0%, var(--kagit) 62%);
  overflow:hidden;
}
.hero .cini{position:absolute;inset:0;z-index:-1;opacity:.13;color:var(--kobalt)}
.hero .cini svg{width:100%;height:100%;display:block}
.hero .ustbilgi{
  font-size:.75rem;letter-spacing:.26em;
  color:var(--kobalt);font-weight:600;margin:0 0 1.6rem;
}
.hero h1{
  font-family:var(--display);font-weight:300;
  font-size:var(--t-hero);
  line-height:.9;letter-spacing:-.03em;
  margin:0 0 1.8rem;text-wrap:balance;color:var(--metin);
}
.hero .hero-alt{
  font-size:clamp(1.05rem,1rem + .5vw,1.3rem);line-height:1.5;
  color:var(--metin-2);max-width:46ch;margin:0 0 2.4rem;
}
.hero .eylem{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}
.hero .gercekler{margin-top:clamp(3rem,7vw,5rem)}

/* başlıklar ve giriş paragrafı */
.giris{font-size:clamp(1.05rem,1rem + .4vw,1.22rem);color:var(--metin);line-height:1.55}

/* ── 14 · LOGO ───────────────────────────────────────────── */

/* Logo dikey bir kilit (taç ve çatal bıçak üstte, altında iki satır yazı),
   en boy oranı 0,93. Yatay bir wordmark gibi 52 pikselle basılırsa
   "GRILL HOUSE" satırı okunmuyor. Yükseklikten kuruyoruz, genişlik
   kendiliğinden geliyor. Temanın img üstündeki width/height nitelikleri
   eziliyor, aksi hâlde 154x59 kutusuna sıkışıp bozuluyor. */
/* Logo ölçüsü tek yerde, bölüm 26'daki --logo-boy bloğunda. Burada duran
   eski blok onun tarafından eziliyordu ve hiç uygulanmıyordu. `.fixed`
   kuralları da ölüydü, temanın kaydırma sınıfı `.top_bar.scroll`. */
#logo_wrapper,#logo_normal,.logo_container,.logo_align{height:auto}

/* Alt bilgideki kopya. Tema bunu #footer'ın dışında, .footer_before_widget
   içinde basıyor ve intrinsic boyutun yarısına indiriyor. */
.footer_bar .footer_before_widget{
  background:var(--murekkep);
  padding-block:clamp(2.5rem,6vw,4rem) 0;
  text-align:center;
}
.footer_bar .logo_wrapper.footer_logo{display:inline-block}
.footer_bar .logo_wrapper.footer_logo img{
  height:92px !important;
  width:auto !important;
  max-width:none;
  margin:0 auto;
  transform:none !important;
}


/* ── 15 · SAYFA RİTMİ ────────────────────────────────────── */

/* Bölümler arası nefes. Etiket yeni bir bölüm başlatıyor, üstünde
   boşluk olmalı, sayfanın ilk etiketi hariç. */
.wrap > p.etiket,.etiket{margin-top:clamp(4rem,10vw,7.5rem)}
.hero .ustbilgi,.ocak .etiket,.wrap > .etiket:first-child,.wrap > *:first-child.etiket{margin-top:0}

.wrap > h2{margin-top:0;margin-bottom:1.4rem}
.wrap > p{margin:0 0 1.1rem;color:var(--metin-2)}
.wrap > p.giris{color:var(--metin)}

/* fotoğraf yuvası tam genişlikte devasa duruyor, editoryal ölçüye çek */
.yuva{max-width:32rem;margin-block:clamp(2rem,5vw,3.5rem)}
.yuva.yatay{max-width:46rem}

/* menü ve saat listesi kendi bölümünün altında nefes alsın */
.menu-izgara,.saat-listesi,.konum-izgara{margin-top:2rem}
/* Anasayfadan rezervasyon formu kalkınca "Bütün rehberler" bağlantısı ile
   620 piksellik tam genişlikte fotoğraf arasında 17,6 piksel kalıyordu.
   Bölüm başlığının 64 piksellik nefesi ile formun 32 piksellik üst payı
   birlikte gitmişti. */
.wrap > p.eylem:last-child{margin-bottom:clamp(3rem,7vw,5rem)}
.saat-listesi{max-width:34rem}

/* İç sayfalarda tema başlık bandı. Tema yatay dolgu vermiyor, başlık
   ekranın soluna yapışıyordu. Sayfanın geri kalanıyla aynı ritim. */
#page_caption{
  background:var(--kagit-2);
  border-bottom:1px solid var(--cizgi);
  padding-block:clamp(2.5rem,6vw,4.5rem) clamp(2rem,5vw,3.5rem) !important;
}
#page_caption .page_title_wrapper,
#page_caption .page_title_inner{
  max-width:1280px;
  margin-inline:auto;
  padding-inline:var(--pad);
}
#page_caption .page_title_wrapper h1,
#page_caption h1{
  color:var(--metin);
  font-family:var(--display);
  font-weight:300;
  line-height:1.02;
  letter-spacing:-.025em;
  margin:0;
}
#page_caption .page_tagline{
  max-width:var(--olcu);
  color:var(--metin-2);
  margin-top:.9rem;
}

/* ── 16 · ALT BİLGİ ──────────────────────────────────────── */

/* Alt bilgi beyaz zeminde. Demo14 böyle, koyu alt bilgi denemesi dosyanın
   bu bölümünde duruyordu ama aşağıdaki demo14 turu onu eziyordu, yani hiç
   uygulanmıyordu. Çelişkili kural bırakmamak için kaldırıldı. */

#footer{padding-block:clamp(3rem,7vw,4.5rem) clamp(2rem,5vw,3rem)}
#footer > ul.sidebar_widget,
#footer > ul.sidebar_widget.four{
  list-style:none;max-width:1280px;margin-inline:auto;padding-inline:var(--pad);
  display:grid;gap:clamp(2rem,4vw,3rem);grid-template-columns:1fr;
}
@media (min-width:620px){
  #footer > ul.sidebar_widget,
  #footer > ul.sidebar_widget.four{grid-template-columns:1fr 1fr}
}
/* Dört sütun. Marka sütunu iki cümle taşıdığı için biraz geniş. */
@media (min-width:1000px){
  #footer > ul.sidebar_widget,
  #footer > ul.sidebar_widget.four{grid-template-columns:1.5fr 1.1fr 1fr 1.1fr}
}
#footer ul.sidebar_widget.four > li,
#footer ul.sidebar_widget.three > li,
#footer ul.sidebar_widget.two > li,
#footer ul.sidebar_widget > li{
  width:auto;max-width:none;float:none;margin:0;padding:0;list-style:none;
}
#footer a{word-break:normal;overflow-wrap:anywhere}
#footer p{margin:0 0 .6rem;line-height:1.65}
#footer h4,#footer .widgettitle{color:var(--altin);font-family:var(--govde);font-size:.72rem;letter-spacing:.2em;font-weight:600;margin:0 0 1rem}
#footer_before_widget_text:empty{display:none}


/* ── 17 · MOBİL MENÜ ─────────────────────────────────────── */

.mobile_menu_wrapper{background:var(--murekkep) !important}
.mobile_menu_wrapper .mobile_menu_content,
.mobile_menu_wrapper #mobile_menu{padding-inline:1.5rem}
.mobile_menu_wrapper ul li a{
  font-family:var(--display) !important;
  font-weight:300;font-size:1.9rem;letter-spacing:-.02em;
  color:var(--kagit) !important;line-height:1.35;
}
.mobile_menu_wrapper ul li a:hover,
.mobile_menu_wrapper ul li.current-menu-item > a{color:var(--altin) !important}
.mobile_menu_wrapper #searchform input,
.mobile_menu_wrapper .searchform input{
  background:rgba(251,243,226,.08);border:1px solid rgba(251,243,226,.18);
  color:var(--kagit);border-radius:2px;
}
.mobile_menu_wrapper #searchform input::placeholder{color:rgba(251,243,226,.5)}
#close_mobile_menu{color:var(--kagit)}

/* açık menüde arkadaki sayfa okunmasın */
.mobile_menu_overlay{background:rgba(23,19,15,.6)}


/* ── 18 · ARAPÇA VE RTL ──────────────────────────────────── */

/* Harf aralığı bitişik yazıyı bozar. Hiçbir yerde verilmez. */
:lang(ar),
.sultan-rtl,
.sultan-rtl *{
  letter-spacing:normal !important;
  text-transform:none !important;
}
:lang(ar){line-height:1.85;font-size:1.12em}

[dir="rtl"] .kalem{grid-template-columns:auto 1fr;direction:rtl}
[dir="rtl"] .kalem .fiyat{justify-self:start}
[dir="rtl"] .gercekler > div{padding:1.5rem 0 1.5rem 1.5rem;border-right:0;border-left:1px solid var(--cizgi-ince)}
[dir="rtl"] .gercekler > div:last-child{border-left:0}
[dir="rtl"] .helal{margin-left:0;margin-right:.45rem}
[dir="rtl"] .hero .hero-alt,
[dir="rtl"] .dar,
[dir="rtl"] .blm p{margin-inline:0 auto}
[dir="rtl"] .saat-listesi li{flex-direction:row-reverse}

/* Sayılar ve fiyatlar Arapça sayfada da Latin rakamla ve soldan sağa. */
[dir="rtl"] .fiyat,
[dir="rtl"] .saat-listesi span,
[dir="rtl"] time{direction:ltr;unicode-bidi:isolate;font-feature-settings:"lnum" 1}

/* Telefon, e-posta ve adres bağlantıları soldan sağa kalmalı. Arapça
   sayfada "+90 545 594 26 61" ölçüldü, "61 26 594 545 90+" olarak
   okunuyordu. Artı işareti ve sayı öbekleri paragraf yönüne göre
   yerleşiyor, yalıtım şart. */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] a[href*="wa.me"],
[dir="rtl"] .ltr-yalit{direction:ltr;unicode-bidi:isolate;display:inline-block}

/* Takvim okları. Şerit kendiliğinden aynalanıyor, önceki ay sağa geçiyor,
   ama tırnak işaretinin yönü sabit kalıyor ve sağdaki düğme sola bakıyordu.
   Yalnız transform, ölçüldü, yeniden boyama üretmiyor. */
[dir="rtl"] .rez-ok span{display:inline-block;transform:scaleX(-1)}

/* Sağdaki hamburger ve arama düğmesi de aynı hizaya gelsin. */
.menu_buttons_container{height:auto}
.menu_buttons_content{display:flex;align-items:center;gap:1rem;height:100%}

/* Üst bar tek satır. Tema float + display:table ile kuruyor, dikey
   hizalama logo ile menü arasında 25 piksel kayıyordu. Flex'e çevirince
   üçü de aynı eksene oturuyor. Float'lar flex içinde etkisiz kalıyor. */
#menu_wrapper{
  display:flex;
  align-items:center;
  gap:1.5rem;
}
#menu_wrapper > #logo_normal,
#menu_wrapper > #logo_transparent{flex:0 0 auto}
#menu_wrapper > #nav_wrapper{flex:1 1 auto;display:flex;justify-content:flex-end}
#menu_wrapper > .menu_buttons_container{flex:0 0 auto;order:3}
#nav_wrapper .nav_wrapper_inner{display:flex;align-items:center}
#menu_wrapper .nav{display:flex;align-items:center;margin:0}

/* Telif satırı. Tema menüyü sağa yaslıyor, metinle çakışıyordu. */
#copyright,.copyright_wrapper{
  background:var(--murekkep-2);
  padding-block:1.25rem;
}
#copyright .page_content_wrapper,
.copyright_wrapper .page_content_wrapper{
  max-width:1280px;margin-inline:auto;padding-inline:var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.6rem 1.5rem;
}
#copyright ul,.copyright_wrapper ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:1.25rem;float:none;
}
#copyright li,.copyright_wrapper li{margin:0;float:none}
#copyright a,.copyright_wrapper a{font-size:.8rem;color:#8A8171}
#copyright a:hover,.copyright_wrapper a:hover{color:var(--altin)}
#copyright p,.copyright_wrapper p{margin:0;font-size:.8rem;color:#8A8171}

/* Mobil çekmeceye markayı koy. Tema oraya logo basmıyor, arama kutusuyla
   başlıyordu. Arkaplan görseli, işaretlemeye dokunmadan. */
/* Kapat düğmesi mutlak konumlu, akışta yer tutmuyor. Logoyu çekmecenin
   ilk kutusu olarak basabiliyoruz. */
.mobile_menu_wrapper::before{
  content:"";
  display:block;
  height:84px;
  margin:0 0 1.8rem;
  background:url("../img/logo-acik.svg") left center / contain no-repeat;
}

/* Arama kutusu temanın #333 grisinde geliyordu, markaya çekiyoruz. */
.mobile_menu_wrapper #searchform{
  background:rgba(251,243,226,.07) !important;
  border:1px solid rgba(251,243,226,.16);
  border-radius:2px;
}

/* Dil seçimi ana menüyle aynı ağırlıkta durmasın. */
.mobile_menu_wrapper li.lang-item a{
  font-family:var(--govde) !important;
  font-size:.82rem !important;
  font-weight:500;
  letter-spacing:.12em;
  opacity:.72;
}
.mobile_menu_wrapper li.lang-item a:hover,
.mobile_menu_wrapper li.lang-item.current-lang a{opacity:1;color:var(--altin) !important}
.mobile_menu_wrapper li.lang-item.lang-item-first{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(251,243,226,.16)}


/* ═══════════════════════════════════════════════════════════
   19 · FOTOĞRAF ÖNCELİKLİ YERLEŞİM
   Demo14 "Elegant Restaurant" düzeni. Oradan alınan şey ritim
   ve ton, fotoğraflar değil.
   ═══════════════════════════════════════════════════════════ */

/* ── Kahraman alan ───────────────────────────────────────── */

.hero-tam{
  position:relative;isolation:isolate;
  min-height:100svh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding-block:clamp(7rem,16vh,11rem) clamp(3.5rem,8vw,6rem);
  margin-inline:calc(50% - 50vw);
  overflow:hidden;
  background:var(--murekkep);
  color:var(--kagit);
}

/* ── PERDE. Ana sayfada kahraman fotoğraf yerinde kalıyor, altındaki kâğıt
   onun üstüne doğru kayıyor. Fırça kenarı hero'dan alınıp perdenin tepesine
   taşındı, kâğıt fotoğrafın üstüne sürülüyormuş gibi çıkıyor.
   17 Eylül 2026, Mücahit'in isteği.

   Kurallar dosyada BİLEREK burada duruyor. Aşağıdaki bölüm kuralları
   (.bant 1077, .koyu-bolum 1112, .menu-karti, .rez-karti-bolum,
   .galeri-serit-bolum) kendi zeminlerini sonra yazdığı için kâğıt zemin
   onları ezmiyor, yalnız zemini olmayan .wrap kutuları alıyor.

   Sticky'yi kesecek bir ata yok, ölçüldü: sidebar_content, inner_wrapper,
   inner, page_content_wrapper ve wrapper hepsi overflow:visible, body ise
   yalnız yatayda clip. */
body.home .hero-tam{position:sticky;top:0;z-index:0}
/* Fırça artık hero'nun altında değil, perdenin tepesinde. */
body.home .hero-tam::after{display:none}
body.home .hero-tam ~ *{position:relative;z-index:1}
/* Kâğıt zemin. `.wrap` kutuları ortada ve 1170 piksel, zemini onlara
   vermek yetmiyordu, iki yandan fotoğraf görünüyor ve sayfa çizgili
   çıkıyordu. Zemin tam en bir sözde öğeye taşındı, kendi içeriğinin
   arkasında ama hero'nun önünde duruyor. Kendi zemini olan bölümler
   (.ocak-dis, .bant, .menu-karti, .rez-karti-bolum, .galeri-serit-bolum)
   zaten tam en, onlara dokunulmuyor. */
/* Zemin YALNIZ aşağı taşıyor. Bölümler arası boşluk 64 ile 96 piksel
   arasında, ölçüldü, her kutunun zemini kendinden sonraki boşluğu
   kapatıyor. Yukarı taşırmak denendi ve geri alındı: kardeşler aynı
   yığın düzeyinde, sonra gelen kutunun zemini bir öncekinin son iki
   satırını örtüyordu. */
body.home .hero-tam ~ *::after{
  content:"";position:absolute;z-index:-1;
  top:0;bottom:-120px;left:50%;width:100vw;transform:translateX(-50%);
  background:var(--kagit);
  pointer-events:none;
}
/* Kendi zemini olan bölümlerde kâğıt YALNIZ alttaki boşluğu dolduruyor.
   Negatif yığın düzeyindeki sözde öğe, ögenin kendi zemininin ÜSTÜNE
   boyanıyor (altına değil), bu yüzden koyu menü paneli beyaza dönüyor ve
   krem yazı okunmaz oluyordu. Ölçüldü, iki dilde de. 17 Eylül 2026. */
body.home .hero-tam ~ .menu-karti::after,
body.home .hero-tam ~ .bant::after,
body.home .hero-tam ~ .rez-karti-bolum::after,
body.home .hero-tam ~ .galeri-serit-bolum::after,
body.home .hero-tam ~ .koyu-bolum::after{top:100%;bottom:-120px}
body.home .hero-tam + *::before{
  content:"";
  position:absolute;
  left:50%;width:100vw;transform:translateX(-50%);
  top:calc(1px - clamp(72px,10vw,150px));
  height:clamp(72px,10vw,150px);
  background:var(--kagit);
  -webkit-mask:url("../img/firca/firca-ust.svg") bottom/100% 100% no-repeat;
  mask:url("../img/firca/firca-ust.svg") bottom/100% 100% no-repeat;
  pointer-events:none;
}
/* Hareketi azalt. Perde kaydırmaya bağlı bir konum oyunu, kapatılınca
   sayfa sıradan biçimde akıyor ve fırça eski yerine dönüyor. */
@media (prefers-reduced-motion:reduce){
  body.home .hero-tam{position:relative}
  body.home .hero-tam::after{display:block}
  body.home .hero-tam + *::before{display:none}
}

.hero-kareler{position:absolute;inset:0;z-index:-2}
.hero-kare{
  position:absolute;inset:0;
  background-image:var(--gorsel-l);
  background-size:cover;background-position:center;
  opacity:0;
  transition:opacity 1.4s var(--e-out);
}
.hero-kare.etkin{opacity:1}

/* Ken Burns. Yalnız transform ve opacity animasyonlanır, yerleşim tetiklenmez. */
@media (prefers-reduced-motion:no-preference){
  .hero-kare.etkin{animation:sultan-kenburns 18s var(--e-inout) forwards}
}
@keyframes sultan-kenburns{
  from{transform:scale(1.04)}
  to{transform:scale(1.11)}
}

/* Fotoğraf yokken çini deseni devreye girer, sayfa boş kalmaz. */
.hero-desen{
  opacity:1;
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb,var(--kobalt) 40%,var(--murekkep)) 0%, var(--murekkep) 65%);
}

/* Perde. Fotoğraf üzerine krem metin geliyor, gradyan olmadan kontrast tutmaz. */
.hero-perde{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,
      rgba(23,19,15,.62) 0%,
      rgba(23,19,15,.28) 32%,
      rgba(23,19,15,.55) 68%,
      rgba(23,19,15,.88) 100%);
}

.hero-ic{position:relative;max-width:1280px}
.hero-tam .hero-ustbilgi{
  font-family:var(--govde);
  font-size:.75rem;letter-spacing:.26em;font-weight:600;
  color:var(--altin);margin:0 0 1.4rem;
}
.hero-tam h1{
  font-family:var(--display);font-weight:300;
  font-size:var(--t-hero);line-height:.92;letter-spacing:-.03em;
  color:var(--kagit);margin:0 0 1.6rem;max-width:16ch;
  text-shadow:0 2px 28px rgba(23,19,15,.45);
}
.hero-tam .hero-alt{
  font-size:clamp(1.05rem,1rem + .5vw,1.28rem);line-height:1.55;
  color:#E8DFCD;max-width:46ch;margin:0 0 2.2rem;
  text-shadow:0 1px 18px rgba(23,19,15,.55);
}
.hero-tam .eylem{display:flex;flex-wrap:wrap;gap:.8rem;margin:0}

/* Koyu zeminde ikinci düğme. Kağıt rengi çizgi, dolgu yok. */
.button-acik{
  background:transparent !important;
  color:var(--kagit) !important;
  border:1px solid rgba(251,243,226,.55) !important;
}
.button-acik:hover{
  background:rgba(251,243,226,.12) !important;
  border-color:var(--kagit) !important;
  color:var(--kagit) !important;
}

/* Rozet. Demo14'te Michelin duruyor, bizde konum bilgisi. */
.hero-rozet{
  position:absolute;z-index:2;
  right:clamp(1.25rem,5vw,4rem);
  bottom:clamp(3.5rem,9vw,6.5rem);
  width:clamp(92px,11vw,124px);aspect-ratio:1;
  border-radius:50%;
  display:grid;place-content:center;text-align:center;
  background:color-mix(in srgb,var(--kehribar-dolgu) 92%,transparent);
  color:var(--kagit);
  box-shadow:0 8px 30px rgba(23,19,15,.4);
}
/* Opaklık kalktı. Şampanya zeminde yüzde doksan mürekkep yetiyordu,
   kurumsal altın daha koyu olduğu için aynı opaklık 4,50 eşiğinin altına
   düştü. Tam opaklıkta 5,12. 17 Eylül 2026. */
.hero-rozet .rozet-ust{
  display:block;font-family:var(--govde);font-weight:600;
  font-size:.56rem;letter-spacing:.2em;
}
.hero-rozet .rozet-alt{
  display:block;font-family:var(--display);font-weight:400;
  font-size:1.05rem;line-height:1.15;margin-top:.25rem;
}

/* Slayt denetimi. WCAG 2.2.2, otomatik ilerleyen içeriğin durdurulabilmesi şart. */
.hero-kontrol{
  position:absolute;z-index:2;
  left:clamp(1.25rem,5vw,4rem);bottom:clamp(1.5rem,4vw,2.5rem);
  display:flex;align-items:center;gap:.6rem;
}
/* Görünen çizgi 34x3 kalıyor, dokunma hedefi büyüyor. WCAG 2.5.8 tabanı
   24x24, ölçüldü, merkezden sekiz piksel yukarı yapılan dokunuş düğmeye
   hiç ulaşmıyordu. Sözde öge yerleşimi değiştirmiyor. */
.hero-nokta{
  position:relative;
  width:34px;height:3px;padding:0;border:0;border-radius:2px;cursor:pointer;
  background:rgba(251,243,226,.35);transition:background .3s var(--e-out);
}
.hero-nokta::after{content:"";position:absolute;inset:-11px 0}
.hero-nokta.etkin{background:var(--altin)}
.hero-nokta:hover{background:rgba(251,243,226,.7)}
.hero-durdur{
  width:26px;height:26px;padding:0;cursor:pointer;margin-right:.4rem;
  border:1px solid rgba(251,243,226,.45);border-radius:50%;
  background:transparent;position:relative;
}
.hero-durdur::before{
  content:"";position:absolute;inset:0;margin:auto;
  width:8px;height:9px;
  border-left:2.5px solid var(--kagit);border-right:2.5px solid var(--kagit);
}
.hero-durdur[aria-pressed="true"]::before{
  width:0;height:0;border:0;
  border-left:8px solid var(--kagit);
  border-top:5px solid transparent;border-bottom:5px solid transparent;
  transform:translateX(1px);
}

@media (max-width:760px){
  .hero-tam{min-height:88svh}
  .hero-rozet{width:78px;bottom:auto;top:clamp(5.5rem,18vw,7rem)}
  .hero-rozet .rozet-alt{font-size:.9rem}
  /* Üst etiket 81 piksel, daire 78. Yazı iki yandan taşıp kesiliyordu,
     ölçüldü. Harf aralığı ve punto bir kademe iniyor, daire içinde
     kalıyor. 16 Eylül 2026 denetimi. */
  .hero-rozet .rozet-ust{font-size:.48rem;letter-spacing:.1em}
  /* İngilizce karşılık "SOPHIA 2 min" tek satırda tam dairenin eni kadar
     yer kaplıyor ve yazı merkezin altında olduğu için kenarlardan
     kesiliyordu. İç dolgu metni daire içinde sarmaya zorluyor. */
  .hero-rozet{box-sizing:border-box;padding-inline:.5rem}
}


/* ── Bölüm başlığı ───────────────────────────────────────── */

.bolum-basligi{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2.2rem);
  margin:clamp(4rem,10vw,7rem) 0 clamp(2rem,5vw,3rem);
  text-align:center;
}
.bolum-basligi .cizgi{
  flex:1 1 auto;height:1px;background:var(--cizgi);
}
.bolum-basligi .etiket,
.bolum-basligi h2{margin:0}
.bolum-basligi .etiket{margin-bottom:.5rem}
.bolum-basligi h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,1rem + 3vw,3.4rem);
  line-height:1.05;letter-spacing:-.02em;white-space:nowrap;
}
.bolum-basligi.koyu .cizgi{background:rgba(251,243,226,.22)}
.bolum-basligi.koyu h2{color:var(--kagit)}
.bolum-basligi.koyu .etiket{color:var(--altin)}
@media (max-width:640px){
  .bolum-basligi h2{white-space:normal;font-size:1.8rem}
  .bolum-basligi .cizgi{display:none}
  .bolum-basligi{text-align:left;display:block}
}


/* ── İkili blok ──────────────────────────────────────────── */

.ikili{
  display:grid;gap:clamp(2rem,5vw,4.5rem);
  grid-template-columns:1fr;align-items:center;
  margin-block:clamp(3rem,8vw,6rem);
}
@media (min-width:900px){
  .ikili{grid-template-columns:1fr 1fr}
  .ikili.foto-sol .ikili-foto{order:-1}
  .ikili:not(.foto-sol) .ikili-foto{order:2}
}
.ikili-foto{margin:0}
.ikili-foto img,.ikili-foto .yuva{
  width:100%;height:auto;object-fit:cover;display:block;border-radius:2px;
}
.ikili-metin > :first-child{margin-top:0}
.ikili-metin h2{
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.9rem,1rem + 2.8vw,3.2rem);
  line-height:1.06;letter-spacing:-.022em;margin:0 0 1.2rem;
}
.ikili-metin p{color:var(--metin-2);margin:0 0 1rem}
.ikili-metin .eylem{margin-top:1.6rem}


/* ── Fotoğraf bandı ──────────────────────────────────────── */

.bant{
  position:relative;isolation:isolate;
  margin-inline:calc(50% - 50vw);
  min-height:var(--bant-yukseklik,620px);
  background-image:var(--gorsel-l,none);
  background-size:cover;background-position:center;
  background-color:var(--kagit-2);
  display:flex;align-items:center;
}
.bant-yuva{
  margin:auto;font-size:.72rem;letter-spacing:.2em;
  color:var(--metin-3);font-weight:600;
}
.bant-perde{
  position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(23,19,15,.22) 0%,rgba(23,19,15,.66) 100%);
}
.bant.yazili{color:var(--kagit)}
.bant-ic{position:relative;width:100%}
.bant-ic h2,.bant-ic h1{
  font-family:var(--display);font-weight:300;
  font-size:clamp(2rem,1rem + 3.4vw,3.8rem);
  line-height:1.04;letter-spacing:-.025em;margin:0;color:var(--kagit);
  text-shadow:0 2px 24px rgba(23,19,15,.5);
}
.bant-ic .etiket{color:var(--altin)}
@media (max-width:760px){
  .bant{min-height:min(var(--bant-yukseklik,620px),62vh)}
}


/* ── Alıntı ──────────────────────────────────────────────── */

.alinti-blok{
  display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;
  align-items:center;margin-block:clamp(3rem,8vw,6rem);
}
@media (min-width:900px){.alinti-blok{grid-template-columns:1.1fr .9fr}}
.alinti-blok blockquote{
  margin:0;padding:0;border:0;
  font-family:var(--display);font-weight:300;
  font-size:clamp(1.4rem,1rem + 1.5vw,2.1rem);
  line-height:1.32;letter-spacing:-.015em;color:var(--metin);
}
.alinti-blok blockquote p{margin:0 0 1.2rem;color:inherit}
.alinti-blok cite{
  display:block;font-family:var(--govde);font-style:normal;
  font-size:.72rem;letter-spacing:.22em;font-weight:600;color:var(--kehribar-metin);
}
.alinti-foto{margin:0}
.alinti-foto img,.alinti-foto .yuva{width:100%;height:auto;display:block;object-fit:cover}


/* ── Koyu bölüm ──────────────────────────────────────────── */

.koyu-bolum{
  position:relative;isolation:isolate;
  margin-inline:calc(50% - 50vw);
  padding-block:clamp(4.5rem,11vw,8rem);
  background:var(--murekkep);color:#C9BFAC;
  background-image:var(--gorsel-l,none);
  background-size:cover;background-position:center;
}
.koyu-perde{
  position:absolute;inset:0;z-index:-1;
  background:rgba(23,19,15,.76);
}
.koyu-bolum h2,.koyu-bolum h3{color:var(--kagit)}
.koyu-bolum .etiket{color:var(--altin)}
.koyu-bolum p{color:#C9BFAC}
.koyu-bolum a{color:var(--altin)}

/* Kor ışığı. Ocak bölümündeki alttan gelen ateş. */
.koyu-bolum.korlu::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(85% 62% at 50% 108%, color-mix(in srgb,var(--kehribar) 55%,transparent) 0%, transparent 68%),
    radial-gradient(52% 40% at 50% 104%, color-mix(in srgb,var(--altin) 38%,transparent) 0%, transparent 70%);
}


/* ── 20 · SAYDAM ÜST BAR ─────────────────────────────────── */

/* Kahraman fotoğrafın üstündeyken bar saydam, yazı krem.
   Aşağı inilince kağıt zemine oturur. Geçişi renk üzerinden yapıyoruz,
   yerleşimi tetikleyen bir şey animasyonlanmıyor. */
.header_style_wrapper{
  transition:background-color .4s var(--e-out),border-color .4s var(--e-out);
}
.header_style_wrapper.sultan-saydam,
.header_style_wrapper.sultan-saydam .top_bar,
.header_style_wrapper.sultan-saydam #menu_wrapper{
  background:transparent !important;
  border-bottom-color:transparent !important;
}
/* Perde. Slayt açık bir kareye döndüğünde krem menü solmasın diye
   üstte belirgin, aşağı doğru eriyor. Düşük kontrast web'in en sık
   düşen maddesi, fotoğraf üzerine krem metin perdesiz konmaz. */
.header_style_wrapper.sultan-saydam::before{
  content:"";position:absolute;inset:0 0 -40px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(23,19,15,.78) 0%,
    rgba(23,19,15,.52) 55%,
    transparent 100%);
}
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li > a,
.header_style_wrapper.sultan-saydam #menu_wrapper div .nav > li > a,
.header_style_wrapper.sultan-saydam .top_contact_info,
.header_style_wrapper.sultan-saydam .top_contact_info a{
  text-shadow:0 1px 10px rgba(23,19,15,.85);
}
.header_style_wrapper.sultan-saydam .above_top_bar{
  background:rgba(23,19,15,.45) !important;
  backdrop-filter:blur(6px);
}
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li > a,
.header_style_wrapper.sultan-saydam #menu_wrapper div .nav > li > a,
.header_style_wrapper.sultan-saydam .top_contact_info,
.header_style_wrapper.sultan-saydam .top_contact_info a{
  color:var(--kagit) !important;
}
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li > a:hover,
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.current-menu-item > a{
  color:var(--altin) !important;
}
.header_style_wrapper.sultan-saydam .nav > li.lang-item.lang-item-first{
  border-left-color:rgba(251,243,226,.3);
}
.header_style_wrapper.sultan-saydam #mobile_nav_icon{color:var(--kagit)}

/* Saydamken koyu logo görünmez, açık sürüme geçiyoruz. */
.header_style_wrapper.sultan-saydam #custom_logo img{
  filter:brightness(0) invert(1) sepia(.18) saturate(1.5) hue-rotate(2deg);
}

/* Ön sayfada kahraman alan barın ARKASINA girer. Tema sabit bar için
   #wrapper'a 156 piksel, .inner_wrapper'a 80 piksel üst dolgu veriyor,
   ikisi de kalkmalı yoksa fotoğrafın üstünde krem bir bant kalıyor. */
body.home #wrapper,
body.sultan-hero #wrapper{padding-top:0 !important}

/* Fotoğraf bandıyla açılan sayfada temanın başlık bandı gizlenir,
   yoksa aynı başlık iki kez yazılıyor. */
body.sultan-foto-basligi #page_caption{display:none}
body.sultan-foto-basligi #wrapper{padding-top:0 !important}
body.sultan-foto-basligi #page_content_wrapper .inner_wrapper{padding-top:0}
body.sultan-foto-basligi .header_style_wrapper{position:fixed;width:100%}
body.sultan-foto-basligi .bant:first-of-type{padding-top:clamp(5rem,11vw,8rem)}
body.home #page_content_wrapper .inner_wrapper,
body.sultan-hero #page_content_wrapper .inner_wrapper{padding-top:0}
body.home #page_content_wrapper,
body.home .page_content_wrapper{padding-top:0}
body.home .header_style_wrapper{position:fixed;width:100%}

/* Kahraman alanın altındaki bölüm bara girmesin, oradan itibaren normal akış. */
body.home .hero-tam + *{position:relative;z-index:1}

/* Koyu bölümde metin ölçüsü. Tam genişlikte satır okunmaz. */
.koyu-bolum .wrap > p,
.koyu-bolum .wrap > .giris{max-width:var(--olcu);margin-inline:auto;text-align:center}
.koyu-bolum .bolum-basligi{margin-top:0}


/* ── 21 · DUYARLI ZEMİN GÖRSELLERİ ───────────────────────── */

/* Telefona 2400 piksellik dosya göndermenin anlamı yok, ekranı 390 piksel.
   PHP her zemin için dört basamak özelliği basıyor, hangisinin çekileceğine
   burada karar veriliyor. Bulunmayan basamak bir üstüne düşer. */
@media (max-width:1200px){
  .hero-kare,.bant,.koyu-bolum{background-image:var(--gorsel-m,var(--gorsel-l))}
}
@media (max-width:900px){
  .hero-kare,.bant,.koyu-bolum{background-image:var(--gorsel-k,var(--gorsel-m,var(--gorsel-l)))}
}
@media (max-width:560px){
  .hero-kare,.bant,.koyu-bolum{background-image:var(--gorsel-xk,var(--gorsel-k,var(--gorsel-m,var(--gorsel-l))))}
}

/* Retina ekranda bir basamak yukarı çık, yoksa yumuşak görünüyor. */
@media (max-width:560px) and (min-resolution:2dppx){
  .hero-kare,.bant,.koyu-bolum{background-image:var(--gorsel-k,var(--gorsel-m,var(--gorsel-l)))}
}
@media (min-width:561px) and (max-width:900px) and (min-resolution:2dppx){
  .hero-kare,.bant,.koyu-bolum{background-image:var(--gorsel-m,var(--gorsel-l))}
}


/* ── 22 · EĞİK KAMA ──────────────────────────────────────── */

/* Demo14'ün en tanınır öğesi. Kahraman fotoğrafın altına kağıt renginde
   eğik bir kama giriyor ve fotoğrafı kesiyor. Demoda düz beyaz dolgu,
   bizde içine çini deseni giriyor. Deseni koyacak başka yer kalmamıştı,
   fotoğraf öncelikli düzen onun tek durağını kapatıyordu. */
/* 14 Eylül 2026: düz eğik kama kalktı, yerine fırça geçişi geldi.
   Kağıt rengi, fotoğrafın üstüne boyanmış gibi duruyor. Kenar
   _araclar/firca-uret.py ile üretiliyor, elle çizim değil. */
.hero-tam::after{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;z-index:1;
  height:clamp(72px,10vw,150px);
  background:var(--kagit);
  -webkit-mask:url("../img/firca/firca-ust.svg") bottom/100% 100% no-repeat;
  mask:url("../img/firca/firca-ust.svg") bottom/100% 100% no-repeat;
  pointer-events:none;
}

/* Kamanın içindeki desen. Yüzde 7 saydamlıkta, gürültü değil doku. */
/* Kamanın içindeki desen kalktı. */
.hero-tam .hero-kama-desen{display:none}
.hero-tam .hero-kama-desen svg{width:100%;height:100%;display:block}

/* Kamanın üstünde duran içerik kamayla çakışmasın. */
.hero-tam .hero-ic{padding-bottom:clamp(2rem,5vw,4rem)}
.hero-kontrol{bottom:clamp(4.5rem,10vw,9rem)}

/* Kahramandan sonraki ilk bölüm kamanın altına girsin, boşluk oluşmasın. */
.hero-tam + .wrap > .bolum-basligi:first-child,
.hero-tam + .wrap > *:first-child{margin-top:clamp(1.5rem,4vw,3rem)}


/* ── 23 · SAYFA RİTMİ SIKIŞTIRMASI ───────────────────────── */

/* Demo14 bölümleri birbirine bindiriyor, sayfa bu yüzden bizimkinden
   1500 piksel kısa. Aynı hareketi koyu bölüm ve bantlarda yapıyoruz. */
.koyu-bolum{margin-block:clamp(2rem,5vw,4rem)}
.bant + .wrap > .bolum-basligi:first-child{margin-top:clamp(2.5rem,6vw,4.5rem)}
.wrap > .bolum-basligi + .menu-izgara,
.wrap > .bolum-basligi + .ikili{margin-top:clamp(1.5rem,4vw,2.5rem)}
.alinti-blok{margin-block:clamp(2.5rem,6vw,4.5rem)}


/* ═══════════════════════════════════════════════════════════
   24 · ŞABLON GİYDİRMESİ
   14 Eylül 2026. Mücahit'in kararı, site demo14 "Elegant Restaurant"
   şablonuyla aynı dili konuşacak. Ölçüler _analiz/demo14-tasarim-dili.md
   dosyasından. Beyaz zemin, lacivert mürekkep, tek vurgu şampanya altını,
   büyük harfli Cormorant başlıklar, dolgusuz çizgili düğmeler, bindirmeler.
   Önceki bölümlerin üstüne yazar, eski kararlar git geçmişinde.
   ═══════════════════════════════════════════════════════════ */

html,body{overflow-x:clip}   /* tam genişlik bölümler klasik kaydırma çubuğunda 8 px taşırıyordu */
body{color:var(--metin)}

/* Başlıklar. Gösteri tipografisi büyük harf, eylem tipografisi normal yazım.
   text-transform yalnız lang niteliği olan belgede güvenli, html lang=tr basılı
   ve tarayıcı İ/ı dönüşümünü dile göre yapıyor. PHP ve JS dönüşümü hâlâ yasak. */
h1,h2,.page_title,
.hero-tam h1,.bolum-basligi h2,.ikili-metin h2,.bant-ic h2,.bant-ic h1,.koyu-bolum h2,
#page_caption .page_title_wrapper h1,#page_caption h1{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em;line-height:1.02;
  color:#000;
}
.bolum-basligi h2,.ikili-metin h2{font-size:var(--t-baslik)}
.hero-tam h1,.bant-ic h2,.bant-ic h1,.koyu-bolum h2,.bolum-basligi.koyu h2{color:#fff;text-shadow:none}
h3,.menu-bolum h3,.kor h3{font-family:var(--display);font-weight:600;text-transform:uppercase;letter-spacing:.08em;font-size:var(--t-h3);color:var(--murekkep)}
h4{font-family:var(--govde);font-weight:500}
@media (max-width:640px){
  h1,h2,.hero-tam h1,.bolum-basligi h2,.ikili-metin h2,.bant-ic h2,.bant-ic h1{font-weight:500;letter-spacing:.06em;line-height:1.15}
  .bolum-basligi h2{font-size:1.875rem}
}

/* Etiketler ve küçük başlıklar. Vurgu rengi küçük metinde olmaz, koyu şampanya konuşur. */
.etiket,.gercekler dt,.konum-izgara dt,.alan label,.kor .no,.hero-tam .hero-ustbilgi,.alinti-blok cite{
  font-family:var(--govde);font-weight:500;color:var(--kehribar-metin);
}
.hero-tam .hero-ustbilgi,.bant-ic .etiket,.koyu-bolum .etiket,.ocak .etiket,.bolum-basligi.koyu .etiket{color:var(--altin)}

/* Gövde. Demo14 satır yüksekliği 1,8, ferah. */
p,li,dd,.wrap > p,.ikili-metin p,.koyu-bolum p,.kalem .not{line-height:1.8}
.wrap > p{color:var(--metin-2)}
.giris{font-size:clamp(1.1rem,1rem + .6vw,1.5rem);line-height:1.7;color:var(--metin)}

/* Bağlantı ve fiyat. Demo14'te mavi yok. */
a{color:var(--murekkep)}
a:hover,a:active,.post_info a:hover,#page_content_wrapper a:hover{color:var(--kehribar-metin)}
.fiyat,.tg_food_menu_price,.saat-listesi span{color:var(--murekkep);font-weight:500}
/* Helal rozeti kurumsal çini teale geçti. Altın çerçeve dekor dilinin
   parçası, rozet ise bir olgu bildiriyor, ayrı dursun. Beyazda 6,08. */
.helal{color:var(--cini);border-color:var(--cini);font-weight:500}

/* Düğmeler. Dolgu yok, köşe yok, yatay dolgu yok, altta 1 px çizgi.
   Cormorant 600, 30 piksele kadar. Koyu zeminde beyaz metin, beyaz çizgi. */
.button,.small_button,input[type=submit],button[type=submit],.button-bos,.button-acik,
.woocommerce a.button,.woocommerce button.button{
  background:transparent !important;
  border:0 !important;border-bottom:1px solid var(--altin) !important;border-radius:0 !important;
  color:var(--murekkep) !important;
  font-family:var(--display) !important;font-weight:600 !important;
  font-size:clamp(1.35rem,1.1rem + .85vw,1.875rem) !important;letter-spacing:0 !important;line-height:1.2;
  padding:.35rem 0 !important;text-transform:none !important;
  transition:color .3s var(--e-out),border-color .3s var(--e-out);
}
.button:hover,.small_button:hover,input[type=submit]:hover,button[type=submit]:hover,.button-bos:hover,.button-acik:hover{
  background:transparent !important;color:var(--kehribar-metin) !important;border-bottom-color:var(--murekkep) !important;
}
.hero-tam .button,.koyu-bolum .button,.bant .button{color:#fff !important;border-bottom-color:rgba(255,255,255,.7) !important}
.hero-tam .button:hover,.koyu-bolum .button:hover{color:var(--altin) !important;border-bottom-color:var(--altin) !important}
.eylem{gap:2.4rem}
.button.yukleniyor::after,.button.gonderildi::after{border-color:currentColor;border-right-color:transparent}
.button.gonderildi::after{border-color:currentColor;border-width:0 2px 2px 0}

/* Kahraman. Demo14 gibi ortalı, büyük harf, beyaz. */
.hero-tam{justify-content:center;align-items:center;text-align:center}
/* Kutu modeli her genişlikte border-box. Önce yalnız 761 ve üstüne
   veriliyordu, gerekçesi "eylem düğmeleri katlanma çizgisinin altına
   iniyordu" ve o gerekçe telefonda daha da geçerliydi. content-box'ta
   min-height dolguya EKLENİYOR, ölçüldü: 390 pikselde min-height 742,72
   ama kutu 934 çıkıyordu ve kahraman alan görünüm alanını 90 piksel
   aşıyordu. Otomatik ilerleyen slayt için WCAG 2.2.2 gereği konan
   durdurma düğmesi ile slayt noktaları ilk görünümde ekranın altında
   kalıyordu. 16 Eylül 2026 denetimi. */
.hero-tam{box-sizing:border-box}
.hero-tam .hero-ic{display:flex;flex-direction:column;align-items:center;padding-bottom:clamp(3rem,7vw,5rem)}
.hero-tam h1{font-size:var(--t-hero);max-width:20ch;margin:0 0 1.6rem}
.hero-tam .hero-alt{max-width:54ch;font-size:clamp(1rem,.95rem + .3vw,1.125rem);color:#fff;text-shadow:none;margin-bottom:2rem}
.hero-tam .eylem{justify-content:center}
.hero-rozet{background:var(--altin);color:var(--murekkep);box-shadow:0 8px 30px rgba(39,47,60,.35)}
.hero-rozet .rozet-alt{font-weight:600}
.hero-nokta{background:rgba(255,255,255,.4)}
.hero-nokta.etkin{background:var(--altin)}
.hero-perde{background:linear-gradient(180deg,rgba(39,47,60,.5) 0%,rgba(39,47,60,.25) 40%,rgba(39,47,60,.45) 100%)}
.hero-tam :focus-visible,.koyu-bolum :focus-visible,.bant :focus-visible{outline-color:#fff !important}

/* Bölüm başlığı. Ortada sütun, yanlarda 140 piksellik şampanya çizgiler. */
.bolum-basligi{justify-content:center;gap:clamp(1rem,3vw,2.2rem);margin:clamp(4rem,9vw,6.25rem) 0 clamp(2rem,5vw,3rem)}
.bolum-basligi .cizgi{flex:0 1 140px;background:var(--altin)}
.bolum-basligi.koyu .cizgi{background:var(--altin)}
.bolum-basligi-ic{flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.bolum-basligi .etiket{margin:0}
.bolum-basligi h2{white-space:normal;max-width:16ch}
@media (max-width:640px){
  .bolum-basligi{display:flex;flex-direction:column;text-align:center}
  .bolum-basligi .cizgi{display:block;width:60px;flex:0 0 auto;height:1px}
}

/* İkili blok. Büyük başlık, sol dışa taşan çizgi, fotoğraf kahramanın içine biner. */
.ikili{align-items:start;gap:clamp(2rem,6vw,5.5rem)}
/* Türkçe kelimeler uzun, 75 piksel bu sütuna sığmıyor ve tema kelimeyi ortadan
   bölüyor. Bu blokta başlık 54 piksele kadar, kelime bölme kapalı. */
.ikili-metin h2{position:relative;margin:0 0 1.6rem;max-width:none;font-size:clamp(1.75rem,1rem + 2.7vw,3.4rem);overflow-wrap:normal;word-break:normal;hyphens:manual}
@media (min-width:1280px){
  .ikili-metin h2::before{content:"";position:absolute;left:-170px;top:.5em;width:140px;height:1px;background:var(--altin)}
}
@media (min-width:900px){
  .hero-tam + .wrap .ikili{margin-top:clamp(1rem,3vw,2.5rem)}
  .hero-tam + .wrap .ikili-foto{position:relative;z-index:3;margin-top:calc(-1 * clamp(80px,12vw,180px))}
  .hero-tam + .wrap .ikili-metin{padding-top:clamp(1rem,4vw,3.5rem)}
}
.ikili-foto img,.alinti-foto img,.yuva,.harita-kutu,.menu-panel-kutu{border-radius:0}

/* Alıntı. Cormorant italik, fotoğraf üstteki bandın içine biner. */
.alinti-blok blockquote{font-style:italic;font-weight:500;font-size:clamp(1.5rem,1rem + 1.6vw,2.25rem);line-height:1.35;letter-spacing:0}
@media (min-width:900px){
  .bant + .wrap .alinti-blok{margin-top:0}
  .bant + .wrap .alinti-foto{position:relative;z-index:2;margin-top:-160px}
}

/* Fotoğraf bandı ve koyu bölüm. */
.bant-perde{background:linear-gradient(180deg,rgba(39,47,60,.25) 0%,rgba(39,47,60,.6) 100%)}
.bant-ic{text-align:center}
.bant-ic h2,.bant-ic h1{margin-inline:auto}
.koyu-bolum{background:var(--murekkep);color:#C9CDD5}
.koyu-bolum p{color:#C9CDD5}
.koyu-perde{background:rgba(39,47,60,.72)}

/* Menü. */
.menu-bolum h3{border-bottom:1px solid var(--altin);padding-bottom:.8rem}
.kalem .ad{font-weight:500;font-size:1.05rem}
.kalem .not{font-size:.92rem}
.menu-dipnot{border-top-color:var(--cizgi)}

/* Form. Beyaz kutu, ince çizgi, köşe yok, 16 piksel (iOS odakta yakınlaştırmasın). */
input[type=text],input[type=email],input[type=tel],input[type=date],input[type=number],select,textarea{
  background:#fff;border:1px solid var(--cizgi);border-radius:0;font-size:1rem;
}
.alan input,.alan select,.alan textarea{font-size:1rem}
input:focus,select:focus,textarea:focus{border-color:var(--murekkep);box-shadow:none}
.alan.hata input{border-color:#A3352E}
.alan label{font-size:.72rem;letter-spacing:.2em}

/* Saat ve konum ızgaraları. */
.saat-listesi{border-top-color:var(--altin)}
.konum-izgara{background:var(--cizgi);border-color:var(--cizgi)}
.harita-kutu{background:var(--kagit-2)}

/* Üst bar. Tepede saydam, kaydırınca yüzde 72 lacivert ve bulanık zemin, beyaz yazı.
   Temanın kaydırma durumu .top_bar.scroll sınıfında (.fixed hiç gelmiyor).
   Demo14 barının ölçüsü bu, logo ve gezinme düzeni bizim. */
.above_top_bar,#top_bar{display:none !important}
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll,
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll #menu_wrapper{
  background:rgba(39,47,60,.72) !important;border-bottom-color:transparent !important;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll #menu_wrapper .nav > li > a,
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll #menu_wrapper div .nav > li > a,
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll #mobile_nav_icon,
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll .mobile_nav_icon{color:#fff !important}
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll #menu_wrapper .nav > li > a:hover,
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll #menu_wrapper .nav > li.current-menu-item > a{color:var(--altin) !important}
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll #custom_logo img{filter:brightness(0) invert(1)}
.header_style_wrapper:not(.sultan-saydam) .top_bar.scroll .nav > li.lang-item.lang-item-first{border-left-color:rgba(255,255,255,.3)}
.top_bar{transition:background-color .4s var(--e-out)}
#menu_wrapper .nav ul li a,#menu_wrapper div .nav li a{font-family:var(--govde) !important;font-weight:400 !important;font-size:.9rem !important;letter-spacing:.04em !important}
.header_style_wrapper.sultan-saydam #custom_logo img{filter:brightness(0) invert(1)}
.header_style_wrapper.sultan-saydam::before{background:linear-gradient(180deg,rgba(39,47,60,.55) 0%,rgba(39,47,60,.3) 55%,transparent 100%)}

/* Mobil çekmece. Demo14 tam ekran menüsü düz şampanya zemin, beyaz bağlantılar. */
.mobile_menu_wrapper{background:var(--altin) !important}
/* Beyaz bağlantılar şampanya zeminin üstünde 2,18 veriyordu. 28 piksel
   500 kalınlık büyük metin sayılıyor, eşik 3,00, yine de altında kalıyordu.
   Telefonda gezinmenin tamamı okunmuyordu. Mürekkep 6,17 veriyor. */
.mobile_menu_wrapper ul li a{color:var(--murekkep) !important;font-weight:500;font-size:1.75rem;text-transform:uppercase;letter-spacing:.06em}
.mobile_menu_wrapper ul li a:hover{color:var(--murekkep) !important;opacity:.7}
.mobile_menu_wrapper ul li.current-menu-item > a{
  color:var(--murekkep) !important;font-weight:700;
  text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px;
}
/* Dil bağlantıları şampanya zeminin üstünde. Beyaz ve yüzde 85 opaklık
   1,97 kontrast veriyordu, İngilizce okuyan ziyaretçi siteyi kendi diline
   çeviren bağlantıyı göremiyordu. İkisi de mürekkep, ayrımı renk değil
   kalınlık ve alt çizgi yapıyor. Mürekkep şampanyanın üstünde 6,17. */
.mobile_menu_wrapper li.lang-item a{color:var(--murekkep) !important;opacity:1;font-weight:500}
.mobile_menu_wrapper li.lang-item.current-lang a{
  color:var(--murekkep) !important;font-weight:700;
  text-decoration:underline;text-underline-offset:.25em;text-decoration-thickness:2px;
}
.mobile_menu_wrapper li.lang-item.lang-item-first{border-top-color:rgba(39,47,60,.28)}
.mobile_menu_wrapper #searchform,.mobile_menu_wrapper .searchform{display:none}
#close_mobile_menu{color:var(--murekkep)}
.mobile_menu_overlay{background:rgba(39,47,60,.5)}

/* Alt bilgi. Demo14 gibi beyaz, ortalı logo, ince çizgiler. */
#footer,#footer_wrapper,.footer_bar .footer_before_widget,#copyright,.copyright_wrapper{background:#fff;color:var(--metin-2)}
/* Tema alt bilgi metnini kendi ayarından boyuyor, beyaz zeminde açık renk
   1,59 kontrast veriyordu. Ayar da düzeltildi, bu ikinci kapı. */
#footer,#footer p,#footer a,#footer li,#footer .textwidget,
#footer .textwidget a{color:var(--metin-2)}
.footer_bar .footer_before_widget{border-top:1px solid var(--cizgi)}
/* Logo şeridi beyazken açık logo siyaha çevriliyordu. Şerit tekrar mürekkep
   olduğu için süzgeç kalktı, logo kendi kâğıt rengiyle duruyor. */
.footer_bar .footer_before_widget img{filter:none}
#footer a,#footer p{color:var(--metin-2)}
#footer a:hover{color:var(--kehribar-metin)}
#footer h4,#footer .widgettitle,#footer h2,#footer h3{color:var(--kehribar-metin);font-family:var(--govde);font-weight:500;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;margin:0 0 1rem}
#copyright,.copyright_wrapper{background:#fff;border-top:1px solid var(--cizgi)}
#copyright a,#copyright p,.copyright_wrapper a,.copyright_wrapper p{color:var(--metin-3)}
#copyright a:hover,.copyright_wrapper a:hover{color:var(--kehribar-metin)}
#footer a:focus-visible{outline-color:var(--murekkep) !important}

/* İç sayfa başlık bandı. */
#page_caption{background:#fff;border-bottom:1px solid var(--cizgi)}
#page_caption .page_tagline{color:var(--metin-2)}

/* Seçim ve odak. */
::selection{background:var(--altin);color:#fff}
:focus-visible,a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline-color:var(--murekkep) !important}


/* ═══════════════════════════════════════════════════════════
   25 · MÜCAHİT'İN REVİZYONU
   14 Eylül 2026. Beş karar.
   1 Sugar Magic + GC Fentura + Handful of Sunshine
   2 Başlık üstündeki etiket şeritleri kalktı
   3 Fotoğraflar üstten kemerli, kaydırmada süzülüyor
   4 Anasayfada menü yok, restoranın kendisi anlatılıyor
   5 Metinler kaydırıldıkça yazılıyor (hareket.css bölüm 11)
   ═══════════════════════════════════════════════════════════ */

/* ── Tipografi. Sugar Magic zaten yüksek kontrastlı bir didone,
   büyük harf ve pozitif aralık onu daha da sertleştiriyor. Aralık
   sıfıra iniyor, ağırlık tek. ─────────────────────────────── */

h1,h2,.page_title,
.hero-tam h1,.bolum-basligi h2,.ikili-metin h2,.bant-ic h2,.bant-ic h1,.koyu-bolum h2,
#page_caption .page_title_wrapper h1,#page_caption h1{
  font-family:var(--display);font-weight:400;
  letter-spacing:.005em;line-height:1.04;
}
h3,.menu-bolum h3,.kor h3{font-family:var(--display);font-weight:400;letter-spacing:.02em}
@media (max-width:640px){
  h1,h2,.hero-tam h1,.bolum-basligi h2,.ikili-metin h2,.bant-ic h2,.bant-ic h1{font-weight:400;letter-spacing:.01em;line-height:1.12}
}

/* Düğmeler gövde fontuna döndü. Didone 30 pikselde düğme olarak okunmuyor,
   demo14'ün düğmesi de gösteri fontu değil. */
.button,.small_button,input[type=submit],button[type=submit],.button-bos,.button-acik,
.woocommerce a.button,.woocommerce button.button{
  font-family:var(--govde) !important;font-weight:500 !important;
  font-size:.92rem !important;letter-spacing:.14em !important;text-transform:uppercase !important;
  padding:.5rem 0 !important;
}
.suzgec{font-family:var(--govde);font-size:.8rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase}

/* El yazısı yalnız alıntıda. Demo14'te de sefin sözü el yazısı. */
.alinti-blok blockquote{
  font-family:var(--elyazisi);font-style:normal;font-weight:400;
  font-size:clamp(1.6rem,1rem + 2vw,2.6rem);line-height:1.45;letter-spacing:0;
}
.alinti-blok cite{font-family:var(--govde);letter-spacing:.2em;font-size:.72rem}


/* ── Etiket şeritleri kalktı ──────────────────────────────── */

/* PHP artık basmıyor. Eski içerikte kalan varsa görünmesin diye
   ikinci kapı, bölüm başlığı ve kahraman üstündeki şeritler. */
.hero-tam .hero-ustbilgi,
.bolum-basligi .etiket,
.bant-ic .etiket,
.ikili-metin .etiket,
.koyu-bolum .etiket,
.wrap > p.etiket{display:none}

/* Etiket gidince başlık kendi boşluğunu alsın. */
.bolum-basligi-ic{gap:0}
.ikili-metin > h2:first-child{margin-top:0}


/* ── Kemerli fotoğraf ─────────────────────────────────────── */

/* Üstü kemer, altı düz. Sultanahmet'in mihrap ve pencere kemeri.
   Oran ile veriliyor, kare olmayan kutuda da kemer kemer kalıyor. */
.kemer,
.ikili-foto,
.alinti-foto,
.sultan-kemer{
  border-radius:50% 50% 0 0 / 30% 30% 0 0;
  overflow:hidden;
  isolation:isolate;
}
.ikili-foto img,.alinti-foto img,.kemer img,.sultan-kemer img{
  border-radius:inherit;display:block;width:100%;height:auto;
}
/* Kemerin kendi ince çizgisi, demo14'ün 1 piksel şampanya detayı. */
.ikili-foto::after,.alinti-foto::after,.kemer::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  border:1px solid color-mix(in srgb,var(--altin) 55%,transparent);
  border-radius:inherit;border-bottom:0;
}
.ikili-foto,.alinti-foto,.kemer{position:relative}
@media (max-width:640px){
  .kemer,.ikili-foto,.alinti-foto,.sultan-kemer{border-radius:50% 50% 0 0 / 18% 18% 0 0}
}


/* ── Restoran bölümü, anasayfada menünün yerine ───────────── */

.restoran{margin-block:clamp(3rem,8vw,6rem)}
.restoran-izgara{
  display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:start;
}
@media (min-width:900px){.restoran-izgara{grid-template-columns:1fr 1fr}}
.restoran-metin > :first-child{margin-top:0}
.restoran-metin h2{margin:0 0 1.4rem;font-size:clamp(1.9rem,1rem + 2.8vw,3.4rem)}
.restoran-metin p{color:var(--metin-2);margin:0 0 1.1rem}

/* Günün akışı. Saat, olay. Uydurma sayı yok, hepsi doğrulanmış. */
.gun-akisi{list-style:none;margin:2.2rem 0 0;padding:0;border-top:1px solid var(--cizgi)}
.gun-akisi li{
  display:grid;grid-template-columns:5.5rem 1fr;gap:1.2rem;align-items:baseline;
  padding:1rem 0;border-bottom:1px solid var(--cizgi-ince);
}
.gun-akisi time{
  font-family:var(--govde);font-variant-numeric:tabular-nums;font-weight:500;
  font-size:.86rem;letter-spacing:.1em;color:var(--kehribar-metin);
}
.gun-akisi b{font-weight:500;font-size:1.02rem;color:var(--metin);display:block}
.gun-akisi span{display:block;font-size:.92rem;color:var(--metin-3);line-height:1.6;margin-top:.2rem}
@media (max-width:520px){
  .gun-akisi li{grid-template-columns:1fr;gap:.2rem}
}

/* figure'ın tarayıcı öntanımlı `margin: 1em 40px` değeri sıfırlanmamıştı.
   Kemer kareleri telefonda 290 piksellik sütunda 210 piksel kalıyor,
   masaüstünde 530 yerine 450 çıkıyordu. Yalnız burada oluyor, sitedeki
   diğer figure'lara sınıf üzerinden zaten kenar boşluğu veriliyor,
   sekiz sayfa tarandı. */
.restoran-foto .kemer{margin:0}
.restoran-foto{display:grid;gap:1rem;grid-template-columns:1fr 1fr;align-items:end}
.restoran-foto .kemer:first-child{grid-column:1/-1}
@media (max-width:640px){.restoran-foto{grid-template-columns:1fr}.restoran-foto .kemer:nth-child(3){display:none}}


/* ── Menü sayfası, gerçek veri ────────────────────────────── */

/* Dokuz grup, yirmi beş bölüm, 136 kalem. Kaynak dijital menünün
   veritabanı, inc/menu-verisi.php üretilmiş dosya. */
.menu-grup{margin-block:clamp(3rem,7vw,5rem)}
.menu-grup > .grup-basligi{
  display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);
  margin:0 0 clamp(1.5rem,4vw,2.5rem);
}
.menu-grup .grup-basligi::before,
.menu-grup .grup-basligi::after{content:"";flex:1 1 auto;height:1px;background:var(--altin)}
.menu-grup .grup-basligi h2{
  margin:0;white-space:nowrap;font-size:clamp(1.6rem,1rem + 2.2vw,2.8rem);
}
.menu-bolum-ad{
  font-family:var(--govde);font-weight:500;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--kehribar-metin);
  margin:2.2rem 0 1rem;padding-bottom:.7rem;border-bottom:1px solid var(--cizgi);
}
.menu-bolum:first-child .menu-bolum-ad{margin-top:0}
.kalem .imza{
  display:inline-block;vertical-align:2px;margin-left:.45rem;
  font-family:var(--govde);font-size:.58rem;letter-spacing:.14em;font-weight:500;
  color:var(--kehribar-metin);border:1px solid var(--altin);border-radius:2px;padding:.1em .35em;
}
.kalem .porsiyon{font-family:var(--govde);font-size:.72rem;letter-spacing:.1em;color:var(--metin-3);margin-left:.4rem}

/* Gövde metni içindeki bağlantı yalnız renkle ayrılmıyor, altı çiziliyor.
   WCAG 1.4.1, renk tek ayırt edici olamaz. */
.yardim a,.wrap > p a,.ikili-metin p a,.konum-izgara dd a,.restoran-metin p a,
.soru p a,.soru li a,.rehber-adres a,.rehber-kart-alt p a{
  text-decoration:underline;text-underline-offset:.22em;text-decoration-thickness:1px;
  text-decoration-color:color-mix(in srgb,currentColor 45%,transparent);
}
.yardim a:hover,.wrap > p a:hover,.konum-izgara dd a:hover{text-decoration-color:currentColor}


/* ═══════════════════════════════════════════════════════════
   26 · ÜST BAR
   Tek davranış, bütün sayfalarda aynı. Üç durum var ve
   aralarındaki geçiş animasyonlu.

   üstte      sayfanın tepesinde, koyu medyanın üstünde saydam
   inmiş      kaydırılmış, mürekkep zemin ve bulanıklık
   medyasız   sayfa medyayla açılmıyor, bar kendi zeminiyle gelir

   Sınıfları hareket.js yönetiyor. Betik yoksa bar kağıt zeminle
   durur ve okunur kalır, hiçbir sayfa barsız açılmaz.
   ═══════════════════════════════════════════════════════════ */

:root{--ust-bar:96px;--ust-bar-inik:72px}
@media (max-width:900px){:root{--ust-bar:74px;--ust-bar-inik:62px}}

/* Bar her sayfada sabit ve aynı yükseklikte. Temanın kendi
   yükseklik ve dolgu hesabı ezildi, sayfadan sayfaya kayıyordu. */
.header_style_wrapper{
  position:fixed !important;top:0;left:0;right:0;width:100%;z-index:60;
  background:transparent;
  transition:background-color .45s var(--e-out),box-shadow .45s var(--e-out);
}
.header_style_wrapper .top_bar{
  background:transparent !important;height:auto !important;border:0 !important;
  transition:background-color .45s var(--e-out),backdrop-filter .45s var(--e-out);
}
#menu_wrapper{
  /* Tema content-box ve sabit 960 piksel bırakıyor (screen.css 679), yan dolgu
     üstüne binince kutu 1060 piksele çıkıyor ve 961 ile 1066 arasında bar
     ekranı taşırıp sağdaki hamburgeri kırpıyordu. Ölçüldü. */
  box-sizing:border-box;width:100%;
  max-width:var(--kapsayici);margin-inline:auto;padding-inline:var(--pad);
  min-height:var(--ust-bar);padding-block:0 !important;
  transition:min-height .45s var(--e-out);
}
.header_style_wrapper.sultan-inmis #menu_wrapper{min-height:var(--ust-bar-inik)}

/* Zemin. Saydamken fotoğrafın üstünde perde, inince mürekkep. */
.header_style_wrapper::before{
  content:"";position:absolute;inset:0 0 -28px 0;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(39,47,60,.62) 0%,rgba(39,47,60,.3) 58%,transparent 100%);
  opacity:0;transition:opacity .45s var(--e-out);
}
.header_style_wrapper.sultan-saydam::before{opacity:1}
.header_style_wrapper.sultan-inmis{
  background:rgba(39,47,60,.86);
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 1px 0 rgba(188,175,135,.28);
}
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis){
  background:#fff;box-shadow:0 1px 0 var(--cizgi);
}

/* Hamburger dokunma hedefi. Kutu 25x15 pikseldi, dolgusu yoktu ve gizli
   menünün tek kapısı o. Masaüstünde Rehber, İletişim ve SSS yalnız o
   çekmeceden açılıyor. WCAG 2.5.8 tabanı 24x24. İkon çizgileri aynı kalıyor,
   yalnız etrafındaki alan büyüyor. 16 Eylül 2026 denetimi. */
#mobile_nav_icon,.mobile_nav_icon{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;
}

/* Yazı rengi. Koyu zeminde krem, kağıt zeminde mürekkep. */
#menu_wrapper .nav > li > a,
#menu_wrapper div .nav > li > a,
#mobile_nav_icon,.mobile_nav_icon{
  color:var(--murekkep) !important;
  transition:color .45s var(--e-out),opacity .3s var(--e-out);
}
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li > a,
.header_style_wrapper.sultan-saydam #menu_wrapper div .nav > li > a,
.header_style_wrapper.sultan-saydam #mobile_nav_icon,
.header_style_wrapper.sultan-saydam .mobile_nav_icon,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li > a,
.header_style_wrapper.sultan-inmis #menu_wrapper div .nav > li > a,
.header_style_wrapper.sultan-inmis #mobile_nav_icon,
.header_style_wrapper.sultan-inmis .mobile_nav_icon{color:#fff !important}

/* Logo. Koyu zeminde beyaza döner, inince küçülür. */
#custom_logo img,#custom_logo_transparent img,.logo_wrapper img{
  height:var(--logo-boy,62px) !important;width:auto !important;
  max-width:none;display:block;
  /* Tema retina logoyu scale(0.5) ile küçültüyor, @2x raster bekliyor.
     Logomuz SVG, çözünürlükten bağımsız, o küçültmeye gerek yok. */
  transform:none !important;
  transition:height .45s var(--e-out),filter .45s var(--e-out);
}
.header_style_wrapper.sultan-inmis{--logo-boy:46px}
.header_style_wrapper.sultan-saydam #custom_logo img,
.header_style_wrapper.sultan-saydam #custom_logo_transparent img,
.header_style_wrapper.sultan-inmis #custom_logo img,
.header_style_wrapper.sultan-inmis #custom_logo_transparent img{filter:brightness(0) invert(1)}
@media (max-width:900px){
  #custom_logo img,#custom_logo_transparent img,.logo_wrapper img{--logo-boy:50px}
  .header_style_wrapper.sultan-inmis #custom_logo img,
  .header_style_wrapper.sultan-inmis #custom_logo_transparent img,
  .header_style_wrapper.sultan-inmis .logo_wrapper img{--logo-boy:40px}
}

/* Gezinme. Bağlantının altında şampanya çizgi, açılırken soldan büyüyor. */
#menu_wrapper .nav > li{position:relative}
#menu_wrapper .nav > li > a{
  position:relative;padding-block:.5rem !important;
  font-family:var(--govde) !important;font-weight:400 !important;
  font-size:.92rem !important;letter-spacing:.03em !important;
}
#menu_wrapper .nav > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:-.25rem;height:1px;
  background:var(--altin);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--e-out);
}
#menu_wrapper .nav > li > a:hover::after,
#menu_wrapper .nav > li.current-menu-item > a::after,
#menu_wrapper .nav > li.current-menu-ancestor > a::after,
#menu_wrapper .nav > li.current-page-ancestor > a::after,
#menu_wrapper .nav > li.current_page_ancestor > a::after,
#menu_wrapper .nav > li.current_page_parent > a::after,
#menu_wrapper .nav > li > a[aria-current="page"]::after{transform:scaleX(1)}
/* Beyaz barda altın çizgi 2,18 veriyordu. Bulunulan sayfayı gösteren tek
   işaret o olduğu için mürekkebe çevrildi ve 2 piksele çıktı, 12,6 veriyor. */
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current-menu-item > a::after,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current-menu-ancestor > a::after,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current-page-ancestor > a::after,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current_page_ancestor > a::after,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current_page_parent > a::after{
  background:var(--murekkep);height:2px;
}
/* Bulunulan sayfa yalnız koyu barda altın. Beyaz barda (rehber dizini ve
   altı rehber yazısı, gövde sınıfı sultan-medyasiz) altın 2,18 kontrast
   veriyordu ve ziyaretçi nerede olduğunu gösteren tek işareti okuyamıyordu.
   Açık zeminde ayrımı alttaki şampanya çizgi yapıyor, kural 1766. satırda. */
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.current-menu-item > a,
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.current-menu-ancestor > a,
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.current-page-ancestor > a,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.current-menu-item > a,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.current-menu-ancestor > a,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.current-page-ancestor > a{color:var(--altin) !important}
/* Kalınlık `font-weight:400 !important` ile eziliyordu, işaret sessizce
   kayboluyordu. Aynı ağırlıkla yazıldı. */
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current-menu-item > a,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current-menu-ancestor > a,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current-page-ancestor > a,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current_page_ancestor > a,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.current_page_parent > a{
  color:var(--murekkep) !important;font-weight:600 !important;
}

/* Dil seçimi ana gezinmeden ayrı dursun. */
#menu_wrapper .nav > li.lang-item.lang-item-first{margin-left:1.25rem;padding-left:1.75rem;border-left:1px solid var(--cizgi)}
.header_style_wrapper.sultan-saydam .nav > li.lang-item.lang-item-first,
.header_style_wrapper.sultan-inmis .nav > li.lang-item.lang-item-first{border-left-color:rgba(255,255,255,.28)}
/* Opaklık 0,62 iken 12,8 piksellik yazı beyaz barda 4,08 kontrasta
   düşüyordu, eşik 4,50. Opaklık kalktı, seçili olmayan dil doğrudan
   metin-3 rengiyle boyanıyor, beyazda 5,80. */
#menu_wrapper .nav > li.lang-item > a{font-size:.8rem !important;opacity:1;color:var(--metin-3) !important}
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.lang-item > a,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.lang-item > a{color:rgba(251,243,226,.72) !important}
#menu_wrapper .nav > li.lang-item > a:hover{color:var(--murekkep) !important}
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.lang-item > a:hover,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.lang-item > a:hover{color:#fff !important}
/* Seçili dil. Ayrımı renk değil kalınlık ve alt çizgi yapıyor, koyu ve
   açık barda aynı biçimde okunuyor. */
#menu_wrapper .nav > li.lang-item.current-lang > a{
  color:var(--murekkep) !important;font-weight:700 !important;
  text-decoration:underline;text-underline-offset:.3em;text-decoration-thickness:1.5px;
}
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.lang-item.current-lang > a,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.lang-item.current-lang > a{color:#fff !important}
#menu_wrapper .nav > li.lang-item > a::after{display:none}

/* Medyasız sayfada içerik barın altından başlar. */
body.sultan-medyasiz #wrapper{padding-top:var(--ust-bar) !important}
body.sultan-medya #wrapper{padding-top:0 !important}
body.sultan-medyasiz #page_caption{padding-top:clamp(3rem,7vw,5rem) !important}

/* ═══════════════════════════════════════════════════════════
   26B · ÜST BAR DÜZENİ
   17 Eylül 2026. Referans düzen şu: en solda daire içinde hamburger,
   ortada logo, logonun iki yanında ikişer bağlantı, en sağda dolu hap
   düğme.

   Ortalama nasıl tutuyor. Logo akıştan çıkarılıp sayfanın tam ortasına
   çakıldı. Bağlantılar üç ayrı listeye dağıtıldı (inc/ust-bar.php), sol
   yarı ile sağ yarı `flex:1 1 0` ile BİREBİR EŞİT genişlik alıyor. İki eşit
   kutunun sınırı her genişlikte barın tam ortasına düşüyor, logo da orada.
   İki yarı logoya doğru yaslanıyor, aralarındaki açıklık --logo-yuva.

   Önce tek liste vardı ve grup bir bütün olarak ortalanıyordu. Logo grubun
   ortasına değil sayfanın ortasına çakılı olduğu için, sol ikili ile sağ
   ikilinin genişliği eşit olmadıkça logo boşluğu kayıyordu. Ölçüldü,
   İngilizce sürümde sol ikili 157 sağ ikili 200 piksel, logonun solunda
   67,5 sağında 25,9 piksel boşluk kalıyordu, 1024 pikselde sağ boşluk
   eksiye düşüp logo "Menu" bağlantısına değiyordu.

   Sıralama CSS ile değil kaynakta yapıldı. `order` görsel sırayı sekme
   sırasından ayırıyor, WCAG 1.3.2 ve 2.4.3. Liste sınırı da öğelerin
   ARASINA giriyor, öğelerin kendi sırasını bozmuyor. Rezervasyon öğesi
   yapi.json içinde de sona alındı.
   ═══════════════════════════════════════════════════════════ */

:root{
  --uc-yuva:clamp(142px,13vw,182px);    /* solda hamburger, sağda düğme yuvası */
  --ham-cap:52px;                       /* hamburger dairesinin çapı */
  --logo-yuva:clamp(112px,10.5vw,160px);/* logonun oturduğu boş yuva, iki yarı arası */
}

/* Hamburger. Tema onu kenarlıklarla çiziyor (screen.css 778), dokunma
   hedefini büyütmek için konan min-width ve min-height o kenarlıkları
   kırk dört piksele esnetmişti, ekranda iki uzun çizgi kalıyordu, ölçüldü.
   Artık kutu dairenin kendisi, çizgiler sözde öğelerden geliyor. */
#mobile_nav_icon,.mobile_nav_icon{
  box-sizing:border-box;
  width:var(--ham-cap) !important;height:var(--ham-cap) !important;
  min-width:var(--ham-cap);min-height:var(--ham-cap);
  border:1px solid rgba(255,255,255,.34) !important;
  border-radius:50%;
  background:rgba(255,255,255,.12);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;top:0 !important;margin-left:0 !important;
  transition:background-color .3s var(--e-out),border-color .3s var(--e-out);
}
#mobile_nav_icon::before,#mobile_nav_icon::after,
.mobile_nav_icon::before,.mobile_nav_icon::after{
  content:"";position:absolute;left:50%;
  height:2px;border-radius:2px;background:currentColor;
}
/* Üstteki çizgi ve gölgesiyle ortadaki. Adım altı piksel. */
#mobile_nav_icon::before,.mobile_nav_icon::before{
  width:20px;top:calc(50% - 7px);transform:translateX(-50%);
  box-shadow:0 6px 0 currentColor;
}
/* Alttaki kısa. Referanstaki ikonun imzası bu. */
#mobile_nav_icon::after,.mobile_nav_icon::after{
  width:20px;top:calc(50% + 5px);
  transform:translateX(-50%) scaleX(.6);transform-origin:left center;
  transition:transform .3s var(--e-out);
}
#mobile_nav_icon:hover::after,.mobile_nav_icon:hover::after{transform:translateX(-50%) scaleX(1)}
#mobile_nav_icon:hover,.mobile_nav_icon:hover{background:rgba(255,255,255,.2)}
@media (prefers-reduced-motion:reduce){
  #mobile_nav_icon::after,.mobile_nav_icon::after{transition:none}
}
/* Açık zeminde daire mürekkep tonunda. */
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #mobile_nav_icon,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) .mobile_nav_icon{
  border-color:var(--cizgi) !important;background:rgba(39,47,60,.05);
}
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #mobile_nav_icon:hover{
  background:rgba(39,47,60,.09);
}

/* Logo her genişlikte tam ortada. */
#menu_wrapper{position:relative}
#menu_wrapper > #logo_normal,
#menu_wrapper > #logo_transparent{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  margin:0;z-index:2;
}
#menu_wrapper > .menu_buttons_container{order:1;flex:0 0 auto}

/* Gezinme kutusu her genişlikte hamburgerden sonra geliyor. Sıra yalnız
   masaüstü bloğunda verilseydi telefonda kutu önde kalıyor, `flex:1` ile
   bütün boşluğu yiyor ve hamburgeri sağa itiyordu, ölçüldü. */
#menu_wrapper > #nav_wrapper{order:2}

/* Telefon ve tablet. Gezinme listesi temada gizli, barda hamburger ile
   logo kalıyor. Hamburger sola alındı, logo ortada. */
@media (max-width:1023px){
  #menu_wrapper > #nav_wrapper{flex:0 0 auto}
  #menu_wrapper > .menu_buttons_container{margin-right:auto}
}

/* Masaüstü. Dört bağlantı logonun iki yanına, düğme en sağa. */
@media (min-width:1024px){
  /* Bar içerik kapsayıcısından geniş. Referansta hamburger ve düğme ekranın
     iki ucunda duruyor, 1170 piksellik gövde kapsayıcısı barı ortada bir
     adaya sıkıştırıyordu. */
  /* `!important` şart. grid.css en son yükleniyor (sıra: style, reset,
     wordpress, animation, screen, style, sultan, hareket, grid) ve orada
     1100 pikselden geniş ekranda `#menu_wrapper{max-width:1170px}` var.
     Aynı ağırlıkta ve sonra geldiği için bizimkini eziyordu, ölçüldü. */
  /* Aradaki boşluk sıfır. Yukarıdaki taban kural `gap:1.5rem` veriyor ve
     logo akıştan çıktığı için o boşluk YALNIZ hamburger yuvası ile gezinme
     kutusunun arasına giriyordu. Sağ uçta karşılığı olmayınca iki yarının
     sınırı barın ortasından on iki piksel sağa kayıyordu, ölçüldü. İki uç
     yuvası zaten hamburgerden çok geniş, boşluğa gerek yok. */
  #menu_wrapper{display:flex;align-items:center;gap:0;max-width:min(1440px,100%) !important}
  #menu_wrapper > .menu_buttons_container{
    flex:0 0 var(--uc-yuva);display:flex;justify-content:flex-start;
  }
  /* Tema bu kutuyu sağa yaslıyor ve dolgu veriyor, hamburger yuvanın
     ortasında kalıyordu. Kutu sıfırlanıyor. */
  #menu_wrapper .menu_buttons_content{
    display:flex;align-items:center;justify-content:flex-start;
    float:none;margin:0;padding:0;width:100%;
  }
  /* Temanın kendi sol boşluğu grubu sağa kaydırıyordu, sıfırlandı. */
  #menu_wrapper > #nav_wrapper{
    order:2;flex:1 1 auto;display:flex;align-items:center;
    margin:0 !important;padding:0;min-width:0;
  }
  #nav_wrapper .nav_wrapper_inner{flex:1 1 auto;display:flex;align-items:center;min-width:0}
  /* Aradaki iki sarmalayıcı yalnız kutu, anlamı yok, akıştan çıkıyorlar
     ki üç liste doğrudan esnek kutunun çocuğu olsun. Listelere
     display:contents VERİLMİYOR, o liste anlamını düşürüyor. */
  #menu_wrapper #menu_border_wrapper,
  #menu_wrapper #menu_border_wrapper > div{display:contents}
  /* Seçici `#menu_wrapper div .nav` olmak zorunda. Tema screen.css 1067'de
     aynı seçiciyle `display:block` veriyor ve bizim `#menu_wrapper .nav`
     kuralımız bir sınıf eksik kaldığı için kaybediyordu, liste hiç esnek
     kutuya dönmüyordu. Ölçüldü. */
  #menu_wrapper div .nav{
    display:flex;align-items:center;flex-wrap:nowrap;
    gap:clamp(.7rem,1.5vw,1.5rem);margin:0;padding:0;min-width:0;
  }
  #menu_wrapper div .nav > li{white-space:nowrap;float:none;display:block}

  /* ÜÇ BÖLGE. Ortalamanın tamamı bu dört kuralda.

     Sol ve sağ yarı `flex:1 1 0`. Esnek taban sıfır ve büyüme katsayıları
     eşit olunca ikisi artan alanı ortadan bölüyor ve BİREBİR aynı genişliği
     alıyor, içindeki etiket ne kadar uzun olursa olsun. Aralarındaki sınır
     böylece [hamburger yuvası, uç yuvası] aralığının tam ortasına, iki uç
     yuvası da eşit olduğu için barın tam ortasına düşüyor. Logo oraya
     çakılı. Bu yüzden ölçüm dilden ve genişlikten bağımsız tutuyor.

     Yarılar logoya doğru yaslanıyor, dışa doğru boşluk bırakıyorlar.
     Referans düzen böyle, hamburger ile ilk bağlantı arasında geniş bir
     açıklık var.
     Dolgu MANTIKSAL. Fiziksel `padding-right` yazılmıştı, Arapça sürümde
     satır yönü dönünce iki yarı yer değiştiriyor ama dolgu yerinde kalıyor,
     logo bir yandaki bağlantının üstüne biniyordu, ekran görüntüsüyle
     görüldü. `padding-inline-end` iki yönde de logoya bakan kenara düşüyor.
     `flex-end` ile `flex-start` esnek kutuda zaten yönü izliyor. */
  #menu_wrapper div .ust-sol-liste{
    flex:1 1 0;justify-content:flex-end;padding-inline-end:calc(var(--logo-yuva) / 2);
  }
  #menu_wrapper div .ust-sag-liste{
    flex:1 1 0;justify-content:flex-start;padding-inline-start:calc(var(--logo-yuva) / 2);
  }
  /* Uç yuvası soldaki hamburger yuvasıyla aynı genişlikte. Eşitlik
     bozulursa iki yarının sınırı da barın ortasından kayıyor. */
  #menu_wrapper div .ust-uc-liste{flex:0 0 var(--uc-yuva);justify-content:flex-end}
  /* Çekmece maddeleri ve dil seçenekleri barda basılmıyor, kendi
     listelerinde duruyorlar ve hiç yer kaplamıyorlar. */
  #menu_wrapper div .ust-gizli-liste{display:none}

  #menu_wrapper div .ust-uc-liste > li.rez-cta{flex:1 1 auto;min-width:0}
  /* Kutu modeli. Tema content-box bırakıyor, dolgu genişliğin dışına
     ekleniyor ve düğme yuvasını kırk beş piksel taşırıyordu, ölçüldü. */
  #menu_wrapper div .nav > li.rez-cta > a{
    box-sizing:border-box;width:100%;min-width:0;
  }

  /* Yazı. Referanstaki gibi büyük harf ve geniş harf aralığı. Seçici
     `#menu_wrapper div .nav li a` ile aynı ağırlıkta, dosyada sonra
     geldiği için kazanıyor. */
  #menu_wrapper div .nav > li > a{
    text-transform:uppercase !important;
    font-size:.76rem !important;
    letter-spacing:.155em !important;
    font-weight:500 !important;
  }
  #menu_wrapper div .nav > li.rez-cta > a{letter-spacing:.13em !important}
}

/* Dar masaüstü. "Sizden gelenler" ve "Hakkımızda" uzun, 1024 ile 1199
   arasında yazı bir tık küçülüyor, yoksa dört bağlantı ile iki uç yuvası
   içerik kutusunu on dokuz piksel taşırıyordu, ölçüldü. */
@media (min-width:1024px) and (max-width:1199px){
  #menu_wrapper div .nav > li > a{
    font-size:.7rem !important;letter-spacing:.11em !important;
  }
}

/* Kaydırma ilerlemesi. Barın altında ince şampanya şerit. */
.ust-ilerleme{
  position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--altin);transform:scaleX(0);transform-origin:left;
  opacity:0;transition:opacity .4s var(--e-out);pointer-events:none;
}
.header_style_wrapper.sultan-inmis .ust-ilerleme{opacity:.85}


/* ═══════════════════════════════════════════════════════════
   27 · REHBER
   Sultanahmet'e gelen ziyaretçi için yazılar. Hem arama
   motoru hem yapay zekâ asistanı için giriş kapısı.
   ═══════════════════════════════════════════════════════════ */

.rehber-izgara{
  display:grid;gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:1fr;margin:clamp(2rem,5vw,3rem) 0 0;
}
/* Ana sayfadaki rehber şeridi telefonda üç tam kart, 1418 piksel, bir
   buçuk ekran. Sayfanın tamamı zaten on beş ekran. Burada kart yatıyor,
   fotoğraf solda kare, yazı sağda. Üçü de görünür kalıyor, kaydırmalı
   şeride koyup gizlemedik, arama motoru ve ekran okuyucu ikisini aynı
   görmüyor. Rehber sayfasının kendi listesi tam kart olarak duruyor. */
@media (max-width:699px){
  body.home .rehber-izgara{gap:1.5rem}
  /* Dört çocuk iki sütuna kendiliğinden dizilince özet fotoğrafın altına
     düşüyor. Yerler açıkça veriliyor. */
  body.home .rehber-kart a{
    display:grid;
    grid-template-columns:96px minmax(0,1fr);
    column-gap:1rem;row-gap:.4rem;
    align-items:start;
  }
  body.home .rehber-kart figure{grid-area:1 / 1 / span 3 / 2;margin:0;aspect-ratio:1}
  body.home .rehber-kart h2{grid-area:1 / 2;font-size:1rem;line-height:1.22;margin:0}
  /* -webkit-line-clamp denendi, çalışmadı. Izgara öğesinin display
     değeri bloklaşıyor, -webkit-box flow-root'a dönüyor ve kırpma
     düşüyor, ölçüldü. Yüksekliği satır sınırına kilitliyoruz, yarım
     satır görünmüyor. Üç nokta düşüyor ama altında OKU duruyor. */
  /* Kimlik seçici tema tarafında, `#page_content_wrapper p` her paragrafa
     yarım em dolgu veriyor ve sınıf seçicisi onu geçemiyor. Dolgu sayılınca
     üç satırlık kilit dördüncü satırın yarısını gösteriyordu. */
  body.home #page_content_wrapper .rehber-kart p,
  body.home .page_content_wrapper .rehber-kart p{
    grid-area:2 / 2;margin:0;padding:0;font-size:.84rem;line-height:1.5;
    max-height:4.5em;overflow:hidden;
  }
  body.home .rehber-oku{grid-area:3 / 2;justify-self:start;font-size:.66rem;letter-spacing:.16em}
  /* Görselsiz rehber olursa sol sütun boş kalmasın. */
  body.home .rehber-kart a:not(:has(figure)){grid-template-columns:minmax(0,1fr)}
  body.home .rehber-kart a:not(:has(figure)) > *{grid-column:1}
}

@media (min-width:700px){.rehber-izgara{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){.rehber-izgara{grid-template-columns:repeat(3,1fr)}}

.rehber-kart a{display:block;color:inherit;text-decoration:none}
.rehber-kart figure{margin:0 0 1.2rem;aspect-ratio:4/3}
.rehber-kart figure img{width:100%;height:100%;object-fit:cover;display:block}
.rehber-kart h2{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.25rem,1rem + .7vw,1.65rem);line-height:1.18;
  letter-spacing:.01em;margin:0 0 .7rem;color:var(--metin);
  text-transform:none;
  transition:color .3s var(--e-out);
}
.rehber-kart a:hover h2{color:var(--kehribar-metin)}
.rehber-kart p{margin:0 0 .9rem;font-size:.95rem;color:var(--metin-3);line-height:1.7}
.rehber-oku{
  font-family:var(--govde);font-size:.74rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--kehribar-metin);
  border-bottom:1px solid var(--altin);padding-bottom:.25rem;
}

/* Rehber yazısının kendisi. Tek sütun, okunaklı ölçü. */
.soru{margin:clamp(2.5rem,6vw,4rem) 0 0;max-width:var(--olcu)}
.soru:first-of-type{margin-top:clamp(1.5rem,4vw,2.5rem)}
.soru h2{
  font-size:clamp(1.4rem,1rem + 1.4vw,2.1rem);line-height:1.2;
  margin:0 0 1rem;text-transform:none;letter-spacing:.01em;
}
.soru p{margin:0 0 1rem;color:var(--metin-2)}
.soru ul,.soru ol{margin:0 0 1.2rem;padding-left:1.2rem;color:var(--metin-2)}
.soru li{margin-bottom:.45rem;line-height:1.7}
.soru strong{font-weight:500;color:var(--metin)}

/* Yazının altındaki dönüş kartı. */
.rehber-kart-alt{
  max-width:var(--olcu);margin:clamp(3rem,7vw,5rem) 0 0;
  padding:clamp(1.5rem,4vw,2.5rem);border:1px solid var(--cizgi);
}
.rehber-alt-baslik{
  font-family:var(--display);font-size:1.5rem;margin:0 0 .7rem;
  text-transform:uppercase;letter-spacing:.02em;
}
.rehber-kart-alt p{margin:0 0 .9rem;color:var(--metin-2)}
.rehber-kart-alt .eylem{display:flex;flex-wrap:wrap;gap:1.6rem;margin:1.4rem 0 1.2rem}
.rehber-adres{font-size:.85rem;color:var(--metin-3)}

/* Rehber sayfalarında gövde tek sütun. */
body.sultan-rehber #page_content_wrapper .wrap{max-width:min(var(--kapsayici),78ch)}

/* Tema sayfa başlığının ilk kelimesini ayrı basıp kendi altın rengiyle
   (#cfa670) boyuyor. Beyaz üstünde 2,24 kontrast veriyor, büyük metin için
   bile yetmiyor. Vurgu fikri kalsın diye koyu şampanyaya çekiliyor, 6,03. */
#page_caption h1 .ppb_title_first,
.page_title .ppb_title_first,
h1 .ppb_title_first{color:var(--kehribar-metin) !important}


/* ── 27 · GÜNÜN AKIŞI VE YÜRÜME MESAFELERİ ───────────────── */

/* Ocak bölümünün üç adımlı ızgarası dört adıma da uyar. İkiye kırıp
   sonra dörde açıyoruz, üç sütunda dördüncü kart tek başına kalıyordu. */
.kor.dort{grid-template-columns:1fr}
@media (min-width:640px){.kor.dort{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.kor.dort{grid-template-columns:repeat(4,1fr)}}

/* Koyu bölümün içindeki kartlar fotoğrafı tamamen kapatmasın, altındaki
   kare belli belirsiz görünsün. Mürekkebin kendisi zaten koyu, okuma
   kontrastı düşmüyor. */
.koyu-bolum .kor article{background:color-mix(in srgb,var(--murekkep) 88%,transparent)}

/* Demo14 tipografi turu h3 rengini mürekkebe çekiyor (1290. satır) ve
   .koyu-bolum kuralından sonra geldiği için koyu zeminde başlık kayboluyordu.
   Ocak bölümünün üç adımlı ızgarası hiçbir sayfada kullanılmadığı için
   bugüne kadar görünmedi. */
.koyu-bolum .kor h3,
.ocak .kor h3{color:var(--kagit)}

/* Aynı tur .kor .no etiketini koyu şampanyaya çekiyor (1298. satır). O renk
   beyaz zemin için seçilmişti, mürekkep üstünde 1,6 kontrast veriyor.
   Koyu zeminde altın konuşur, kural bu. */
.koyu-bolum .kor .no,
.ocak .kor .no{color:var(--altin)}

/* Yürüme mesafeleri saat listesiyle aynı biçimde. Sağdaki süre sayı değil
   kelime de olabiliyor, tabular-nums onu bozmuyor. */
.yuruyus{max-width:34rem}
.yuruyus span{white-space:nowrap}


/* ── 28 · KIRINTI YOLU ───────────────────────────────────── */

/* Rehber yazısının başındaki yol. Ayraç içerik değil, CSS ile basılıyor,
   ekran okuyucu üç kere "büyüktür" demesin. */
.kirinti{margin:0 0 clamp(1.6rem,4vw,2.4rem)}
.kirinti ol{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:0;padding:0}
.kirinti li{display:flex;align-items:center;gap:.5rem;font-size:.78rem;letter-spacing:.09em;color:var(--metin-3)}
.kirinti li + li::before{content:"";width:12px;height:1px;background:var(--cizgi);flex:none}
.kirinti a{color:var(--metin-3);text-decoration:none;border-bottom:1px solid transparent}
.kirinti a:hover,.kirinti a:focus,.kirinti a:focus-visible{color:var(--metin);border-bottom-color:var(--cizgi)}
.kirinti [aria-current]{color:var(--metin-2)}

/* Son basamak yazının kendi başlığı, uzun. Dar ekranda tek satıra sıkışıp
   taşmasın diye kırpılıyor. */
@media (max-width:640px){
  .kirinti [aria-current]{
    max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  }
}


/* ── 29 · BULUNAMAYAN SAYFA ──────────────────────────────── */

/* Dört kapı yan yana. Genel .eylem kuralı iki düğme için yazılmış, dördü
   art arda gelince aralarındaki boşluk kelime arası kadar kalıyor ve tek
   bir cümle gibi okunuyordu. */
.nf-kapilar{display:flex;flex-wrap:wrap;gap:1.3rem 2.4rem;margin-top:clamp(2rem,5vw,3rem)}

/* Yol gösteren sayfa, gövdesi dar dursun. */
body.error404 .wrap > .giris{max-width:var(--olcu)}


/* ── 30 · ERTELENEN ZEMİNLER ─────────────────────────────── */

/* Ekranın altındaki bant ve koyu bölüm zeminleri yaklaşınca yükleniyor
   (sultan.js, zeminler). Ziyaretçi sayfanın dibine bir anda atlarsa o kare
   yarım saniye kadar gelmemiş olabiliyor. O aralıkta beyaz değil mürekkep
   görünsün, bant zaten koyu bir panel. Ölçüldü, 6 Mbps'de pencere 400 ms. */
.bant-foto[data-zemin],
.ocak-foto[data-zemin]{background-color:var(--murekkep)}


/* ── 31 · MENÜ GRUBU İÇİNDE SÜTUNLAR ─────────────────────── */

/* Gruplar tam genişlikte, kategoriler grubun içinde sütunlaşıyor. Sütun
   sayısı kategori sayısına değil genişliğe bağlı, bir kategori bölünmüyor. */
/* `1fr` aslında `minmax(auto,1fr)`, sütun içeriğin en dar hâlinin altına
   inemiyor. Kalem satırındaki tırnak, ad ve fiyat üçlüsü 334 piksellik bir
   taban üretiyordu ve 290 piksellik kutuda sütun taşıyordu, ölçüldü. Menü
   sağda ekran kenarına beş piksel kalıyor, solda elli kalıyordu. 360'ta
   kırpılıyordu. minmax(0,1fr) tabanı kaldırıyor. Aynı tuzak takvimde de
   yaşandı, BASLA'da yazılı. */
.menu-bolumler{
  display:grid;gap:0 clamp(2rem,5vw,4rem);
  grid-template-columns:minmax(0,1fr);
  align-items:start;
}
@media (min-width:900px){
  .menu-bolumler{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* İlk kategorinin üst boşluğu yalnız ilk sütunda sıfırlanmamalı,
     her sütunun ilk kategorisi tepeden başlıyor. */
  .menu-bolum:nth-child(2) .menu-bolum-ad{margin-top:0}
}
@media (min-width:1400px){
  .menu-bolumler{grid-template-columns:repeat(3,minmax(0,1fr))}
  .menu-bolum:nth-child(3) .menu-bolum-ad{margin-top:0}
}



/* ── 32 · ALT BİLGİ · LEVHA ──────────────────────────────── */

/* Gymkhana düzeni. Tam genişlikte tek renk bir levha, ortada arma, iki yanda
   katlanır sütunlar. Temanın kendi alt bilgi parçalarının hepsi gizleniyor,
   yerlerini bu tek blok alıyor. */
body.sultan-altbilgi2 .footer_bar .footer_before_widget,
body.sultan-altbilgi2 #footer,
body.sultan-altbilgi2 .footer_bar_wrapper{display:none !important}
body.sultan-altbilgi2 .footer_bar{background:var(--murekkep);padding:0}
body.sultan-altbilgi2 #footer_before_widget_text{
  width:100%;max-width:none;margin:0;padding:0;box-sizing:border-box;text-align:left;
}

.af{
  position:relative;isolation:isolate;
  background:var(--murekkep);color:#C9BFAC;
  padding-block:clamp(3.5rem,8vw,6rem) clamp(2.5rem,6vw,4rem);
  overflow:clip;
}
/* Levhanın üstünde çok soluk çini dokusu. */
/* Levha düz mürekkep. Çini dokusu denendi ve kaldırıldı, en soluk ayarında
   bile tekrar eden bir nokta ızgarası olarak okunuyor ve levhanın sakinliğini
   bozuyordu. Öğe duruyor, ileride doku istenirse yeri hazır. */
.af-desen{display:none}

.af-ic{
  max-width:1360px;margin-inline:auto;padding-inline:var(--pad);
  display:grid;gap:clamp(2.5rem,6vw,4rem) clamp(1.5rem,4vw,3.5rem);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:980px){
  .af-ic{grid-template-columns:1fr minmax(320px,1.15fr) 1fr}
}

/* ── yan sütunlar ── */
.af-sutun-baslik{
  font-family:var(--govde);font-weight:500;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;
  color:var(--altin);margin:0 0 1.4rem;
}
.af-liste{list-style:none;margin:0;padding:0}
.af-satir{border-bottom:1px solid rgba(251,243,226,.13)}
.af-satir:first-child{border-top:1px solid rgba(251,243,226,.13)}

.af-dugme{
  appearance:none;-webkit-appearance:none;background:transparent;border:0;border-radius:0;
  width:100%;min-height:52px;padding:.9rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  font-family:var(--govde);font-weight:500;
  font-size:.82rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--kagit);cursor:pointer;text-align:left;
  transition:color .3s var(--e-out);
}
.af-dugme:hover{color:var(--altin)}
.af-dugme:focus-visible{outline:2px solid var(--altin);outline-offset:3px}

/* Şevron. İçerik değil, CSS ile çiziliyor. */
.af-ok{
  flex:none;width:9px;height:9px;
  border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .35s var(--e-out);
}
.af-satir.acik .af-ok{transform:rotate(-135deg) translate(-2px,-2px)}

/* Katlanma. 0fr ile 1fr arası geçiş, yükseklik ölçmeye gerek yok. */
.af-govde{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--e-out)}
.af-satir.acik .af-govde{grid-template-rows:1fr}
.af-govde-ic{
  overflow:hidden;min-height:0;
  visibility:hidden;transition:visibility 0s linear .42s;
  padding:0 0 1.3rem;font-size:.92rem;line-height:1.7;
}
.af-satir.acik .af-govde-ic{visibility:visible;transition-delay:0s}
/* Betik yoksa hepsi açık. */
html:not(.js) .af-govde{grid-template-rows:1fr}
html:not(.js) .af-govde-ic{visibility:visible}
@media (prefers-reduced-motion:reduce){
  .af-govde,.af-govde-ic{transition:none}
}
.af-govde p{margin:0 0 .45rem}
.af-govde p:last-child{margin-bottom:0}
.af-govde a{color:var(--kagit);border-bottom:1px solid rgba(251,243,226,.3)}
.af-govde a:hover{color:var(--altin);border-bottom-color:var(--altin)}
.af-govde b{color:var(--kagit);font-weight:500}
.af-saat{font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--kagit)}

.af-mesafe{list-style:none;margin:0;padding:0}
.af-mesafe li{display:flex;justify-content:space-between;gap:1rem;padding:.26rem 0}
.af-mesafe li span:last-child{color:var(--altin);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ── orta sütun ── */
.af-orta{display:flex;flex-direction:column;align-items:center;text-align:center}
.af-arma{display:block;line-height:0}
.af-arma img{
  width:clamp(130px,17vw,196px);height:auto;display:block;
  transition:opacity .4s var(--e-out);
}
.af-arma:hover img{opacity:.82}

.af-motif{
  display:block;width:clamp(46px,5vw,64px);height:clamp(26px,3vw,34px);
  margin:clamp(1.4rem,3vw,2rem) 0 clamp(1.6rem,3.5vw,2.4rem);
  background:var(--altin);opacity:.85;
  -webkit-mask:url("../img/motif/benek.svg") no-repeat center/contain;
  mask:url("../img/motif/benek.svg") no-repeat center/contain;
}

.af-baglar{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem clamp(.9rem,2.5vw,2.2rem)}
.af-baglar a{
  font-family:var(--govde);font-weight:500;
  font-size:clamp(.68rem,.6rem + .2vw,.78rem);letter-spacing:.16em;text-transform:uppercase;
  color:var(--kagit);
  transition:color .3s var(--e-out);
}
.af-baglar a:hover{color:var(--altin)}

.af-sosyal{display:flex;gap:1.3rem;margin:clamp(1.6rem,3.5vw,2.4rem) 0 0}
.af-sosyal a{
  display:grid;place-items:center;width:44px;height:44px;
  color:var(--kagit);transition:color .3s var(--e-out),transform .3s var(--e-out);
}
.af-sosyal a:hover{color:var(--altin);transform:translateY(-2px)}

/* İkonlar CSS maskesi. Tema alt bilgi metnini wp_kses_post ile süzüyor ve
   satır içi svg siliniyor, o yüzden çizim burada duruyor. */
.af-ikon{
  display:block;width:22px;height:22px;
  background:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.af-ikon-instagram{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.43.43.7.83.91 1.4.17.42.37 1.06.42 2.24.06 1.28.07 1.66.07 4.88s-.01 3.6-.07 4.88c-.05 1.18-.25 1.82-.42 2.24-.22.57-.48.97-.9 1.4-.43.42-.83.68-1.4.9-.42.17-1.06.37-2.24.42-1.28.06-1.66.07-4.88.07s-3.6-.01-4.88-.07c-1.18-.05-1.82-.25-2.24-.42-.57-.22-.97-.48-1.4-.9-.42-.43-.68-.83-.9-1.4-.17-.42-.37-1.06-.42-2.24C2.21 15.6 2.2 15.22 2.2 12s.01-3.6.07-4.88c.05-1.18.25-1.82.42-2.24.22-.57.48-.97.9-1.4.43-.42.83-.68 1.4-.9.42-.17 1.06-.37 2.24-.42C8.4 2.21 8.78 2.2 12 2.2Zm0 1.8c-3.17 0-3.5.01-4.74.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71C3.42 8.9 3.4 9.23 3.4 12s.02 3.1.08 4.15c.4.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.57.07 4.74.07s3.5-.01 4.74-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.57.07-4.74s-.01-3.5-.07-4.74c-.04-.9-.19-1.39-.32-1.71a2.86 2.86 0 0 0-.69-1.06 2.86 2.86 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32C15.5 4.01 15.17 4 12 4Zm0 3.06A4.94 4.94 0 1 1 12 16.94 4.94 4.94 0 0 1 12 7.06Zm0 1.8a3.14 3.14 0 1 0 0 6.28 3.14 3.14 0 0 0 0-6.28Zm5.14-3.2a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.05 1.8.25 2.2.42.6.22 1 .48 1.4.9.43.43.7.83.91 1.4.17.42.37 1.06.42 2.24.06 1.28.07 1.66.07 4.88s-.01 3.6-.07 4.88c-.05 1.18-.25 1.82-.42 2.24-.22.57-.48.97-.9 1.4-.43.42-.83.68-1.4.9-.42.17-1.06.37-2.24.42-1.28.06-1.66.07-4.88.07s-3.6-.01-4.88-.07c-1.18-.05-1.82-.25-2.24-.42-.57-.22-.97-.48-1.4-.9-.42-.43-.68-.83-.9-1.4-.17-.42-.37-1.06-.42-2.24C2.21 15.6 2.2 15.22 2.2 12s.01-3.6.07-4.88c.05-1.18.25-1.82.42-2.24.22-.57.48-.97.9-1.4.43-.42.83-.68 1.4-.9.42-.17 1.06-.37 2.24-.42C8.4 2.21 8.78 2.2 12 2.2Zm0 1.8c-3.17 0-3.5.01-4.74.07-.9.04-1.39.19-1.71.32-.43.17-.74.37-1.06.69-.32.32-.52.63-.69 1.06-.13.32-.28.81-.32 1.71C3.42 8.9 3.4 9.23 3.4 12s.02 3.1.08 4.15c.4.9.19 1.39.32 1.71.17.43.37.74.69 1.06.32.32.63.52 1.06.69.32.13.81.28 1.71.32 1.24.06 1.57.07 4.74.07s3.5-.01 4.74-.07c.9-.04 1.39-.19 1.71-.32.43-.17.74-.37 1.06-.69.32-.32.52-.63.69-1.06.13-.32.28-.81.32-1.71.06-1.24.07-1.57.07-4.74s-.01-3.5-.07-4.74c-.04-.9-.19-1.39-.32-1.71a2.86 2.86 0 0 0-.69-1.06 2.86 2.86 0 0 0-1.06-.69c-.32-.13-.81-.28-1.71-.32C15.5 4.01 15.17 4 12 4Zm0 3.06A4.94 4.94 0 1 1 12 16.94 4.94 4.94 0 0 1 12 7.06Zm0 1.8a3.14 3.14 0 1 0 0 6.28 3.14 3.14 0 0 0 0-6.28Zm5.14-3.2a1.15 1.15 0 1 1 0 2.3 1.15 1.15 0 0 1 0-2.3Z'/%3E%3C/svg%3E");
}
.af-ikon-whatsapp{
  -webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2.4c-5.3 0-9.6 4.3-9.6 9.6 0 1.7.45 3.35 1.3 4.8L2.4 21.6l4.95-1.3a9.56 9.56 0 0 0 4.69 1.2h.01c5.29 0 9.6-4.3 9.6-9.6 0-2.57-1-4.98-2.82-6.79a9.53 9.53 0 0 0-6.79-2.81Zm0 17.58h-.01a7.98 7.98 0 0 1-4.06-1.11l-.29-.17-3.02.79.8-2.94-.19-.3a7.95 7.95 0 0 1-1.22-4.25c0-4.4 3.58-7.98 7.99-7.98 2.13 0 4.14.83 5.65 2.34a7.94 7.94 0 0 1 2.34 5.65c0 4.4-3.58 7.97-7.99 7.97Zm4.38-5.97c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.93-1.19-.71-.64-1.19-1.42-1.33-1.66-.14-.24-.02-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.39 1.37.5.58.18 1.1.16 1.51.1.46-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
  mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12.04 2.4c-5.3 0-9.6 4.3-9.6 9.6 0 1.7.45 3.35 1.3 4.8L2.4 21.6l4.95-1.3a9.56 9.56 0 0 0 4.69 1.2h.01c5.29 0 9.6-4.3 9.6-9.6 0-2.57-1-4.98-2.82-6.79a9.53 9.53 0 0 0-6.79-2.81Zm0 17.58h-.01a7.98 7.98 0 0 1-4.06-1.11l-.29-.17-3.02.79.8-2.94-.19-.3a7.95 7.95 0 0 1-1.22-4.25c0-4.4 3.58-7.98 7.99-7.98 2.13 0 4.14.83 5.65 2.34a7.94 7.94 0 0 1 2.34 5.65c0 4.4-3.58 7.97-7.99 7.97Zm4.38-5.97c-.24-.12-1.42-.7-1.64-.78-.22-.08-.38-.12-.54.12-.16.24-.62.78-.76.94-.14.16-.28.18-.52.06-.24-.12-1.01-.37-1.93-1.19-.71-.64-1.19-1.42-1.33-1.66-.14-.24-.02-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.19-.47-.39-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.39 1.37.5.58.18 1.1.16 1.51.1.46-.07 1.42-.58 1.62-1.14.2-.56.2-1.04.14-1.14-.06-.1-.22-.16-.46-.28Z'/%3E%3C/svg%3E");
}

.af-dil{
  list-style:none;display:flex;gap:.6rem 1.4rem;margin:clamp(1.4rem,3vw,2rem) 0 0;padding:0;
}
.af-dil a{
  font-family:var(--govde);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:#A7ADB8;transition:color .3s var(--e-out);
}
.af-dil a:hover{color:var(--kagit)}
.af-dil .current-lang a{color:var(--altin)}

.af-telif{
  margin:clamp(1.6rem,3.5vw,2.4rem) 0 0;
  font-family:var(--display);font-size:1.02rem;color:var(--kagit);letter-spacing:.01em;
}
.af-imza{margin:.5rem 0 0;font-size:.78rem;letter-spacing:.06em;color:#8E95A1}

/* ── kapanış şeridi ──
   Çerez, telif ve imza artık orta sütunun içinde değil, ızgaranın son
   satırında. Masaüstünde bütün sütunları geçiyor ve ortalanıyor, satır
   aralığının tamamı fazla geldiği için bir miktar yukarı çekiliyor.
   Telefonda kendiliğinden en sona düşüyor, düzeltmeye gerek kalmıyor. */
.af-dip{text-align:center}
@media (min-width:980px){
  .af-dip{
    grid-column:1 / -1;
    margin-top:calc(clamp(1.6rem,3.5vw,2.4rem) - clamp(2.5rem,6vw,4rem));
  }
}
.af-dip .af-telif{margin-top:clamp(1.2rem,2.5vw,1.6rem)}
/* Telif satırı tek satır ve dar telefonda kenarlara dayanıyor, 390'da
   350 pikselin tamamını dolduruyor. Bir kademe küçülüyor. */
@media (max-width:430px){ .af-dip .af-telif{font-size:.94rem} }

/* Telefonda sıra değişiyor. Önce arma ve bağlantılar, sonra sütunlar. */
@media (max-width:979px){
  .af-orta{order:-1;padding-bottom:clamp(1rem,4vw,2rem)}
  .af-sag{border-top:1px solid rgba(251,243,226,.13);padding-top:clamp(1.5rem,5vw,2.5rem)}
  .af-satir:first-child{border-top:0}
  .af-sol .af-satir:first-child{border-top:1px solid rgba(251,243,226,.13)}
}

/* ── aşağı inerken beliren efekt ── */
/* Blok ilk karede biraz aşağıda ve soluk duruyor, levha görüntüye girince
   parçalar sırayla yerine oturuyor. Yalnız transform ve opacity. */
@media (prefers-reduced-motion:no-preference){
  html.js .af-inis{opacity:0;transform:translateY(26px)}
  html.js .af.af-indi .af-inis{
    opacity:1;transform:none;
    transition:opacity .7s var(--e-out),transform .7s var(--e-out);
  }
  html.js .af.af-indi .af-inis:nth-child(2){transition-delay:.08s}
  html.js .af.af-indi .af-inis:nth-child(3){transition-delay:.16s}
}


/* ── 33 · ÇEREZ ŞERİDİ ───────────────────────────────────── */

/* Sayfanın altına oturan tam genişlikte şerit. Solda açıklama, sağda üç
   düğme. Mürekkep zemin, şampanya vurgu, sitenin kendi dili. */
.cerez{
  position:fixed;left:0;right:0;bottom:0;z-index:9000;
  background:var(--murekkep);color:#C9BFAC;
  border-top:1px solid rgba(251,243,226,.16);
  box-shadow:0 -18px 44px rgba(23,19,15,.22);
}
.cerez[hidden]{display:none}
.cerez-ic{
  max-width:1360px;margin-inline:auto;padding:clamp(1rem,2.5vw,1.5rem) var(--pad);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:1rem clamp(1.5rem,4vw,3rem);
}
.cerez-yazi{
  margin:0;flex:1 1 32ch;min-width:0;
  font-size:.88rem;line-height:1.6;
}
.cerez-eylem{display:flex;flex-wrap:wrap;gap:.7rem}

.cerez-dugme{
  appearance:none;-webkit-appearance:none;
  min-height:44px;padding:.7rem 1.3rem;
  font-family:var(--govde);font-weight:500;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  border-radius:2px;cursor:pointer;white-space:nowrap;
  transition:background-color .3s var(--e-out),color .3s var(--e-out),border-color .3s var(--e-out);
}
.cerez-bos{background:transparent;border:1px solid rgba(251,243,226,.4);color:var(--kagit)}
.cerez-bos:hover{border-color:var(--altin);color:var(--altin)}
.cerez-dolu{background:var(--altin);border:1px solid var(--altin);color:var(--murekkep)}
.cerez-dolu:hover{background:var(--kagit);border-color:var(--kagit)}
.cerez-dugme:focus-visible{outline:2px solid var(--kagit);outline-offset:2px}

/* ── ayar paneli ── */
.cerez-panel{position:fixed;inset:0;z-index:9001;display:grid;place-items:center;padding:var(--pad)}
.cerez-panel[hidden]{display:none}
.cerez-perde{position:absolute;inset:0;background:rgba(23,19,15,.6);border:0}
.cerez-kutu{
  position:relative;width:min(34rem,100%);max-height:88vh;overflow-y:auto;
  background:var(--kagit);color:var(--metin);
  padding:clamp(1.6rem,4vw,2.4rem);border-radius:3px;
  box-shadow:0 30px 70px rgba(23,19,15,.35);
}
.cerez-kutu:focus-visible{outline:2px solid var(--kehribar-metin);outline-offset:3px}
.cerez-kutu h2{
  font-family:var(--display);font-weight:400;font-size:1.6rem;margin:0 0 .8rem;color:var(--metin);
}
.cerez-panel-giris{font-size:.9rem;line-height:1.65;color:var(--metin-2);margin:0 0 1.5rem}

.cerez-kume{list-style:none;margin:0 0 1.6rem;padding:0;border-top:1px solid var(--cizgi)}
.cerez-kume li{border-bottom:1px solid var(--cizgi)}
.cerez-satir{
  display:flex;align-items:flex-start;gap:.9rem;
  padding:1rem 0;cursor:pointer;min-height:44px;
}
.cerez-satir input{position:absolute;opacity:0;width:1px;height:1px}
.cerez-kutucuk{
  flex:none;width:22px;height:22px;margin-top:.15rem;
  border:1px solid var(--cizgi);border-radius:2px;background:#fff;
  display:grid;place-items:center;
  transition:background-color .25s var(--e-out),border-color .25s var(--e-out);
}
.cerez-kutucuk::after{
  content:"";width:6px;height:11px;margin-top:-2px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);
  transition:transform .25s var(--e-out);
}
.cerez-satir input:checked + .cerez-kutucuk{background:var(--kehribar-metin);border-color:var(--kehribar-metin)}
.cerez-satir input:checked + .cerez-kutucuk::after{transform:rotate(45deg) scale(1)}
.cerez-satir input:disabled + .cerez-kutucuk{opacity:.55;cursor:default}
.cerez-satir input:focus-visible + .cerez-kutucuk{outline:2px solid var(--kehribar-metin);outline-offset:2px}
.cerez-satir b{display:block;font-weight:600;font-size:.95rem;color:var(--metin)}
.cerez-satir small{display:block;margin-top:.25rem;font-size:.82rem;line-height:1.55;color:var(--metin-3)}

.cerez-panel .cerez-eylem{justify-content:flex-end}
.cerez-panel .cerez-bos{border-color:var(--cizgi);color:var(--metin-2)}
.cerez-panel .cerez-bos:hover{border-color:var(--kobalt);color:var(--metin)}
.cerez-panel .cerez-dolu{background:var(--murekkep);border-color:var(--murekkep);color:var(--kagit)}
.cerez-panel .cerez-dolu:hover{background:var(--kehribar-metin);border-color:var(--kehribar-metin)}

/* Alt bilgideki yeniden açma bağlantısı. */
.af-cerez{
  appearance:none;background:transparent;border:0;padding:0;cursor:pointer;
  font-family:var(--govde);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;
  color:#A7ADB8;transition:color .3s var(--e-out);
}
.af-cerez:hover{color:var(--kagit)}

@media (max-width:719px){
  .cerez-ic{flex-direction:column;align-items:stretch}
  .cerez-eylem{flex-direction:column}
  .cerez-dugme{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .cerez-dugme,.cerez-kutucuk,.cerez-kutucuk::after,.af-cerez{transition:none}
}
.af-cerez-satir{margin:clamp(.9rem,2vw,1.2rem) 0 0}

/* Alt bilgi bağlantılarının rengi. Tema satır içi CSS'inde
   `#footer_before_widget_text a{color:#3F4756}` kuralı var, kimlik taşıdığı
   için sınıf seçicilerimizi eziyor ve bağlantılar mürekkebin üstünde mürekkep
   kalıyordu, ölçülen kontrast 1,44. Kurallar aynı kimliğin altına alınıyor,
   özgüllük (1,1,1) olup (1,0,1) kuralını geçiyor. */
#footer_before_widget_text .af-baglar a{color:var(--kagit)}
#footer_before_widget_text .af-baglar a:hover{color:var(--altin)}
#footer_before_widget_text .af-govde a{color:var(--kagit)}
#footer_before_widget_text .af-govde a:hover{color:var(--altin)}
#footer_before_widget_text .af-sosyal a{color:var(--kagit)}
#footer_before_widget_text .af-sosyal a:hover{color:var(--altin)}
#footer_before_widget_text .af-arma{color:var(--kagit)}
/* Kapanış şeridindeki iki yasal bağlantı listede yoktu, 16 Eylül 2026
   denetiminde çıktı. "Kişisel verileriniz" ve "Erişilebilirlik" mürekkebin
   üstünde mürekkep kalıyordu, ölçülen kontrast 1,44. KVKK aydınlatma
   bağlantısı bu, görünmek zorunda. */
#footer_before_widget_text .af-cerez-satir a{color:#A7ADB8}  /* mürekkepte 5,98 */
#footer_before_widget_text .af-cerez-satir a:hover,
#footer_before_widget_text .af-cerez-satir a:focus,
#footer_before_widget_text .af-cerez-satir a:focus-visible{color:var(--kagit)}
#footer_before_widget_text .af-dil a{color:#A7ADB8}          /* mürekkepte 5,98 */
#footer_before_widget_text .af-dil a:hover{color:var(--kagit)}
#footer_before_widget_text .af-dil .current-lang a{color:var(--altin)}
#footer_before_widget_text .af-imza{color:#A7ADB8}           /* 4,47 idi, 5,98 oldu */

/* Novoura imzası. İşaret ve yazı yan yana, ortalanmış, bağlantı dışarı
   açılıyor. Aynı imza İpekoğlu Sigorta sayfasında da duruyor. */
.af-imza a{
  display:inline-flex;align-items:center;gap:.6rem;
  color:inherit;
  transition:color .3s var(--e-out);
}
#footer_before_widget_text .af-imza a{color:#A7ADB8}
#footer_before_widget_text .af-imza a:hover,
#footer_before_widget_text .af-imza a:focus,
#footer_before_widget_text .af-imza a:focus-visible{color:var(--kagit)}
.af-imza-isaret{
  /* 22 piksel. 19'da N çizgisi inceliyor ve işaret leke gibi okunuyordu.
     Köşe yuvarlaması SVG'nin kendi rx değerinde, burada tekrarlanmıyor. */
  width:22px;height:22px;display:block;flex:none;
  transition:transform .35s var(--e-out);
}
.af-imza a:hover .af-imza-isaret{transform:rotate(-8deg) scale(1.06)}
.af-imza a:focus-visible{outline:2px solid var(--altin);outline-offset:4px;border-radius:4px}
@media (prefers-reduced-motion:reduce){
  .af-imza a,.af-imza-isaret{transition:none}
  .af-imza a:hover .af-imza-isaret{transform:none}
}


/* ═══════════════════════════════════════════════════════════
   26b · REZERVASYON DÜĞMESİ
   Mücahit'in isteği, 15 Eylül 2026. "Menülerde rezervasyon için ayrı belirgin
   bir alan aç." Gezinmedeki mevcut Rezervasyon ögesi dolgulu düğmeye
   çevriliyor, yeni öge eklenmiyor. 961 pikselde barda 128 piksel boş alan var,
   yeni öge onu tüketirdi.

   Sınıf menü ögesinin `_menu_item_classes` alanından geliyor. Temanın kendi
   yürüyücüsü (lib/menu.lib.php 38-52) `nav_menu_css_class` süzgecini hiç
   çağırmıyor, iki yürüyücüye birden ulaşan tek yol bu. Ölçüldü.

   Kurallar `!important` taşımak zorunda. Kirki satır içi stili başlıkta 18086.
   baytta, sultan.css 14437'de, yani Kirki sonra geliyor ve eşitlikte kazanıyor.

   Kontrast. Şampanya dolgu üstünde mürekkep 6,17. Dolgunun fotoğraf zeminine
   karşı sınırı dokuz karenin sekizinde üçü geçiyor, yalnız menu-hero 2,75 ile
   kalıyor. O yüzden koyu barda beyaz halka var, orada en kötü durum 6,01.
   ═══════════════════════════════════════════════════════════ */

/* 17 Eylül 2026. Şampanya dolgu ve iki piksellik köşe yerine kor rengi
   tam hap. Yazı beyaz, kontrast 6,45. Halka kalktı, dolu renk zaten
   fotoğraf zemininden ayrılıyor. Ok işareti düğmenin içinde. */
#menu_wrapper .nav > li.rez-cta > a{
  display:inline-flex !important;align-items:center;justify-content:center;
  gap:.55rem;min-width:var(--uc-yuva);
  background:var(--kor) !important;
  color:#fff !important;
  padding:.85rem 1.4rem !important;
  border-radius:999px;
  font-weight:600 !important;
  box-shadow:none;
  transition:background-color .3s var(--e-out);
}
/* Alttaki şampanya çizgi dolgulu düğmede yersiz. Sözde öğe oka dönüyor. */
#menu_wrapper .nav > li.rez-cta > a::after{
  content:"\2192" !important;
  display:inline-block !important;
  position:static !important;
  width:auto !important;height:auto !important;
  background:none !important;
  transform:none !important;
  font-size:1.1em;line-height:1;
  transition:transform .3s var(--e-out);
}
#menu_wrapper .nav > li.rez-cta > a:hover{background:var(--kor-koyu) !important}
#menu_wrapper .nav > li.rez-cta > a:hover::after{transform:translateX(3px) !important}
@media (prefers-reduced-motion:reduce){
  #menu_wrapper .nav > li.rez-cta > a::after{transition:none}
}

/* Koyu barda da açık barda da aynı düğme. Kor rengi ikisinden de ayrılıyor. */
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.rez-cta > a,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.rez-cta > a{
  color:#fff !important;
  box-shadow:none;
}
/* Ziyaretçi rezervasyon sayfasındayken de düğme düğme kalıyor. Bulunulan
   sayfa kuralları yazıyı altın ya da mürekkep yapmaya çalışıyor, ikisi de
   kor dolgunun üstünde yanlış. */
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.rez-cta.current-menu-item > a,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.rez-cta.current-menu-item > a,
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.rez-cta.current-menu-item > a{
  color:#fff !important;
}
/* Bulunulan sayfada ok kalıyor, yalnız çizgi kuralı devre dışı. */
body.sultan-medyasiz .header_style_wrapper:not(.sultan-inmis) #menu_wrapper .nav > li.rez-cta.current-menu-item > a::after,
#menu_wrapper .nav > li.rez-cta.current-menu-item > a::after{
  display:inline-block !important;background:none !important;transform:none !important;
}

/* Mobil çekmece. Zemin zaten şampanya, düğme ters renkte. */
.mobile_menu_wrapper li.rez-cta{margin-top:1.4rem}
.mobile_menu_wrapper li.rez-cta > a{
  display:inline-flex;align-items:center;gap:.55rem;
  background:var(--kor) !important;
  color:#fff !important;
  padding:.7rem 1.5rem !important;
  border-radius:999px;
  text-decoration:none !important;
  font-size:1.3rem !important;
  font-weight:600 !important;
}
.mobile_menu_wrapper li.rez-cta.current-menu-item > a{
  text-decoration:none !important;color:#fff !important;
}

/* ═══════════════════════════════════════════════════════════
   34 · TELEFONDA SABİT REZERVASYON DÜĞMESİ
   Masaüstü gezinmesi yalnız 961 pikselden geniş ekranda var, altında tek
   yüzey hamburger. Telefonda rezervasyona giden görünür bir yol kalmıyordu.

   z-index 50. Ölçülen düzen, çerez şeridi 9000, çekmece ve perdesi 9,
   başa dön oku 9, üst bar 60. Şerit düğmenin üstünde kalıyor, doğrusu bu.
   ═══════════════════════════════════════════════════════════ */

.alt-cta{display:none}

@media (max-width:960px){
  .alt-cta{
    display:block;position:fixed;left:0;right:0;bottom:0;z-index:50;
    background:var(--murekkep);
    padding:.8rem var(--pad) calc(.8rem + env(safe-area-inset-bottom));
    box-shadow:0 -14px 34px rgba(23,19,15,.26);
  }
  .alt-cta a{
    display:block;text-align:center;min-height:44px;line-height:44px;
    background:var(--altin);color:var(--murekkep);text-decoration:none;
    border-radius:2px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;font-size:.84rem;font-family:var(--govde);
  }
  /* Başa dön oku düğmenin üstüne çıkıyor, altında kalmıyor. */
  #toTop{bottom:88px !important}
  /* Sayfanın sonu düğmenin altında kalmasın. */
  #footer_wrapper{padding-bottom:84px}
}

/* Çekmece açıkken düğme çekmeceyi eziyor, z-index 50 ile 9 arasında. */
body.js_nav .alt-cta{display:none}
/* Rezervasyon sayfasının kendisinde gereksiz. */
body.sultan-rez-sayfasi .alt-cta{display:none}
@media (max-width:960px){
  body.sultan-rez-sayfasi #toTop{bottom:7px !important}
  body.sultan-rez-sayfasi #footer_wrapper{padding-bottom:0}
}


/* ═══════════════════════════════════════════════════════════
   35 · ÇEKMECEYE İNEN ÖĞELER
   Mücahit beş başlık istedi, ölçüm beş öğe artı dil seçicinin bara
   sığmadığını gösterdi. 961 pikselde liste iki satıra kırılıyordu.

   Rehber ve İletişim menüden çıkarılmadı, yalnız masaüstü barda gizlendi.
   Çekmecede ve alt bilgide duruyorlar. Rehber sitenin arama kapısı, on iki
   yazı site haritasının yarısı, menüden tamamen çıkarmak iç bağlantıyı da
   koparırdı.

   Dil seçici de aynı sebeple çekmecede. Arapça ve Rusça gelince dört dilin
   barı ikinci kez kırmasını da bu önlüyor.
   ═══════════════════════════════════════════════════════════ */

#menu_wrapper .nav > li.cekmece-oge,
#menu_wrapper .nav > li.lang-item{display:none !important}

/* Çekmecede ikisi de görünüyor, ince çizgiyle ayrılıyorlar. */
.mobile_menu_wrapper li.cekmece-oge:first-of-type{
  margin-top:1.3rem;padding-top:1.2rem;
  border-top:1px solid rgba(39,47,60,.28);
}
.mobile_menu_wrapper li.cekmece-oge > a{font-size:1.35rem !important}


/* ═══════════════════════════════════════════════════════════
   36 · ÇEREZ ŞERİDİ TELEFONDA
   390x844 ekranda şerit 495 piksel ölçüldü, ekranın yüzde elli dokuzu.
   Masa ayırt düğmesi ve sabit çubuk şeridin altında kalıyordu, ziyaretçi ilk
   ekranda rezervasyon yolunu hiç görmüyordu.

   Onaylı metin KISALTILMADI. Yalnız iki cümlesi şeritten ayar paneline
   taşındı, şeritte kalan cümle de onaylı metnin ilk cümlesi.
   ═══════════════════════════════════════════════════════════ */

/* Kısa satır yalnız telefonda, uzun metin yalnız geniş ekranda. İkisi de
   DOM'da duruyor, ekran okuyucu her koşulda tam metne ulaşıyor çünkü
   uzun metin Ayarlar panelinde de var. */
.cerez-yazi-kisa{display:none}

@media (max-width:719px){
  .cerez-ic{padding-block:.95rem;gap:.75rem}
  .cerez-yazi{display:none}
  .cerez-yazi-kisa{
    display:block;margin:0;flex:1 1 100%;
    font-size:.86rem;line-height:1.45;
  }
  .cerez-eylem{flex-direction:row;flex-wrap:wrap;gap:.45rem;align-items:center}
  .cerez-dugme{width:auto;flex:1 1 auto;padding:.6rem .8rem;font-size:.75rem;min-height:44px}
  /* Ayarlar bağlantı gibi durup satırı şişirmesin. */
  .cerez-dugme[data-cerez="ayarlar"]{
    background:none !important;border:0 !important;
    text-decoration:underline;text-underline-offset:.25em;
    padding-inline:.3rem;flex:0 0 auto;
  }
}


/* ═══════════════════════════════════════════════════════════
   37 · MENÜDE BESLENME BAYRAKLARI
   Veride kırk üç vejetaryen ve üç acılı kalem hazır duruyordu, ekranda hiç
   kullanılmıyordu. Dishoom ve Nicole ayrı vejetaryen menü sunuyor, Etxebarri
   olmadığını açıkça yazıyor, burada veri varken susmak anlamsızdı.

   İkon CSS maskesi. Satır içi svg bu temada wp_kses_post tarafından sessizce
   siliniyor, BASLA 7. bölümde tuzak olarak yazılı.

   Renk tek başına anlam taşımıyor, her bayrak ekran okuyucuya adını söylüyor.
   ═══════════════════════════════════════════════════════════ */

.bayrak{
  display:inline-block;vertical-align:1px;margin-left:.4rem;
  width:.82em;height:.82em;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
.bayrak.vejetaryen{
  color:var(--adacayi);   /* kurumsal adaçayı, beyazda 4,67, işaret eşiği 3 */
  -webkit-mask-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M21%203c0%208.5-4.5%2014-11%2014-1.6%200-3-.3-4.2-.9C4.4%2019.3%204%2021%204%2021H2s.4-3.6%202.6-6.5C3.6%2013%203%2011.1%203%209c0-5%204-6%208-6%202.5%200%204%201%2010%200Z%22%2F%3E%3C%2Fsvg%3E');
  mask-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M21%203c0%208.5-4.5%2014-11%2014-1.6%200-3-.3-4.2-.9C4.4%2019.3%204%2021%204%2021H2s.4-3.6%202.6-6.5C3.6%2013%203%2011.1%203%209c0-5%204-6%208-6%202.5%200%204%201%2010%200Z%22%2F%3E%3C%2Fsvg%3E');
}
.bayrak.acili{
  color:#A8432A;   /* beyazda 6,03 */
  -webkit-mask-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M13%203c0%201%20.6%202%202%202h1c2.2%200%204%201.8%204%204%200%206-5%2012-11%2012-4%200-7-2-7-5%200-1%201-2%202-2%204%200%206-3%206-7%200-2%201-4%203-4Z%22%2F%3E%3C%2Fsvg%3E');
  mask-image:url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22black%22%3E%3Cpath%20d%3D%22M13%203c0%201%20.6%202%202%202h1c2.2%200%204%201.8%204%204%200%206-5%2012-11%2012-4%200-7-2-7-5%200-1%201-2%202-2%204%200%206-3%206-7%200-2%201-4%203-4Z%22%2F%3E%3C%2Fsvg%3E');
}
[dir="rtl"] .bayrak{margin-left:0;margin-right:.4rem}

/* Görsel gizleme yardımcısı. Child temada yoktu, rezervasyon.css içinde
   yalnız sihirbaz kapsamında tanımlıydı, menüde de gerekiyor. */
.gorsel-gizli{
  position:absolute !important;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  overflow:hidden;white-space:nowrap;
}

/* Süzgeçte vejetaryen düğmesi. Mevcut .menu-suzgec düzenini paylaşıyor. */
/* Vejetaryen düğmesi kurumsal adaçayına geçti, beyaz yazıyla 4,67. */
.menu-suzgec .suz-vej[aria-pressed="true"]{background:var(--adacayi);color:#fff;border-color:var(--adacayi)}


/* ── Çekmece eki. Zemin şampanya, metin mürekkep, 6,17 kontrast. */
.cekmece-ek{
  margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid rgba(39,47,60,.28);
  font-family:var(--govde);
}
.cekmece-satir{
  display:flex;flex-direction:column;gap:.1rem;
  margin:0 0 .9rem;color:var(--murekkep);font-size:.95rem;line-height:1.4;
}
/* opacity:.72 denendi ve kaldırıldı. Mürekkep şampanya zeminde 6,17
   kontrast veriyor ama yüzde yetmiş ikiye düşünce efektif renk #515351
   oluyor ve oran 3,55'e iniyor, axe bunu ciddi ihlal olarak veriyordu.
   Sıradüzeni opaklıkla değil daha açık bir mürekkep tonuyla kuruyoruz,
   #31394A zeminde 5,30. */
.cekmece-etiket{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:600;color:#31394A;
}

/* Çekmecedeki dil bağlantıları. Bağlantı kutusu 220x18 pikseldi, WCAG 2.2
   en az 24 istiyor, ölçüldü. Liste öğesi zaten 41 piksel, bağlantı onu
   doldurmuyordu. */
.mobile_main_nav .lang-item > a{
  display:flex;align-items:center;
  min-height:44px;
}
.cekmece-eylem{display:flex;flex-wrap:wrap;gap:1.2rem;margin:1.1rem 0 0}
.cekmece-eylem a{
  color:var(--murekkep) !important;font-weight:600;font-size:.95rem;
  text-decoration:underline;text-underline-offset:.3em;
  min-height:44px;display:inline-flex;align-items:center;
}


/* ── Alerjen satırı. Kalemin en altında, küçük ve sessiz. Fiyatın ve
   açıklamanın önüne geçmiyor ama arayan buluyor. */
.kalem .alerjen{
  grid-column:1 / -1;
  margin-top:.25rem;
  font-size:.72rem;letter-spacing:.04em;
  color:var(--metin-3);
}


/* ── Güven şeridi. Kutu değil liste, her satır bir olgu. Kalem sayısı
   Hakkı Bey'in cevaplarıyla artacağı için ızgara kendini sayıya uyduruyor. */
.guven{
  list-style:none;margin:2.2rem 0;padding:0;
  display:grid;gap:1rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,19rem),1fr));
}
.guven li{
  position:relative;padding-left:1.7rem;
  font-size:.95rem;line-height:1.5;color:var(--metin-2);
}
.guven-ikon{
  position:absolute;left:0;top:.42em;
  width:.72rem;height:.72rem;
  border:1px solid var(--altin);border-radius:50%;
}
.guven-ikon::after{
  content:"";position:absolute;left:50%;top:50%;
  width:.28rem;height:.28rem;margin:-.14rem 0 0 -.14rem;
  border-radius:50%;background:var(--altin);
}
.koyu-bolum .guven li{color:rgba(251,243,226,.86)}


/* ── Yaklaşık döviz karşılığı. TL ana fiyat, bu küçük ve ikincil. */
.fiyat-doviz{
  display:block;margin-top:.1rem;
  font-size:.68rem;font-weight:400;letter-spacing:.02em;
  color:var(--metin-3);
  font-variant-numeric:tabular-nums;
}





/* Temanın grid.css dosyası telefonda html, body ve #wrapper öğelerine
   `overflow-x: hidden` veriyor (satır 506-508). CSS kurallarına göre bir eksen
   hidden olunca öteki eksen görünür kalamıyor ve `overflow-y` kendiliğinden
   `auto` oluyor. Bu da her birini kaydırma kutusuna çeviriyor ve içerideki
   `position: sticky` ekrana değil o kutuya göre çalışıyor, yani hiç yapışmıyor.

   `clip` aynı işi yapıyor, yatay taşmayı kesiyor, ama dikeyi `visible`
   bırakıyor. Menü süzgeci telefonda ancak böyle yapışıyor.

   grid.css sultan.css'ten SONRA yükleniyor (ölçüldü, yükleme sırası
   style, reset, wordpress, animation, screen, style, sultan, hareket, grid),
   o yüzden aynı ağırlıkta yazmak yetmiyor.

   Sınır 900 idi, 960 oldu. grid.css hidden'ı 960 piksele kadar yazıyor ve
   901 ile 960 arasında ilaç bitiyor, kural kalıyordu. 930 pikselde ölçüldü,
   süzgeç yapışmıyor ve içerikle birlikte akıp gidiyordu. 912 piksellik
   Surface Pro da bu aralıkta. */
@media (max-width:960px){
  html,body,#wrapper,#wrapper.hasbg{
    overflow-x:clip !important;
    overflow-y:visible !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   40 · MENÜ KARTI
   Ana sayfadaki menü kesiti. Koyu panel, altın hap kategori etiketi,
   tabak adı ile fiyat arasında noktalı çizgi, altında tek satır açıklama,
   yanında büyük yuvarlatılmış fotoğraf. Bloklar sırayla yer değiştiriyor.
   17 Eylül 2026.
   ═══════════════════════════════════════════════════════════ */

/* Panel ekranın iki ucuna kadar. Koyu bölümle aynı teknik. Olmadan panel
   içerik kutusu kadar kalıyor, telefonda 390 piksellik ekranda 330 piksele
   iniyor ve fiyatlar panelin dışına, beyaz zemine taşıyordu. Şampanya
   beyazda 2,18 kontrast veriyor, ölçüldü. */
.menu-karti{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  background:var(--murekkep);
  color:var(--kagit);
  padding-block:clamp(3.5rem,8vw,6.5rem);
}
/* Renkler `!important` taşımak zorunda. Tema `#page_content_wrapper p`
   ile bütün paragrafları metin-2 rengine boyuyor, sınıf seçicisi kimlik
   seçicisini geçemiyor. Ölçüldü: üst yazı koyu panelde 1,44 kontrastla
   çıkıyordu, neredeyse görünmezdi. */
.menu-karti-ust{
  font-family:var(--elyazisi);
  font-size:clamp(1.35rem,3vw,1.9rem);
  color:var(--altin) !important;
  text-align:center;margin:0 0 .35rem;
}
.menu-karti-baslik{
  font-family:var(--display);
  font-size:var(--t-baslik);
  line-height:1.05;text-wrap:balance;
  text-align:center;margin:0 0 clamp(2.2rem,5vw,3.6rem);
  color:var(--kagit);
}
.menu-karti-blok{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.6rem,4vw,3.4rem);
  align-items:center;
  margin-bottom:clamp(2.4rem,5vw,4rem);
}
/* Ters blokta yalnız sıra değil sütun genişlikleri de dönüyor. Yoksa
   fotoğraf dar sütunda kalıp bir blokta küçük bir blokta büyük çıkıyordu. */
.menu-karti-blok.ters{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.menu-karti-blok.ters .menu-karti-foto{order:2}
.menu-karti-foto{margin:0}
/* Kırpma yok. `aspect-ratio` ve `object-fit:cover` kaldırıldı, kare kendi
   oranıyla duruyor. Yüksekliği içerik belirliyor, iki sütun `align-items:
   center` ile ortalanıyor. */
.menu-karti-foto img{
  display:block;width:100%;height:auto;
  border-radius:clamp(14px,2vw,24px);
}
.menu-karti-etiket{
  display:inline-block;
  background:var(--altin);color:var(--murekkep);
  font-size:.72rem;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;
  padding:.42rem 1.1rem;border-radius:999px;
  margin:0 0 1.4rem;
}
/* Tema `#page_content_wrapper ul` ile listeye kırk piksel sol dolgu
   veriyor, sınıf seçicisi kimlik seçicisini geçemiyor. Telefonda kalemler
   sağa kayıyor ve sol boşluk yetmiş, sağ boşluk elli piksel oluyordu. */
.menu-karti-liste ul{list-style:none !important;margin:0 !important;padding:0 !important}
.menu-karti-liste ul > li{margin:0 !important;padding-inline:0 !important;background:none !important}
.menu-karti-liste ul > li::before,.menu-karti-liste ul > li::marker{content:none !important;display:none !important}
.menu-karti-kalem{
  padding-block:.85rem;
  border-bottom:1px solid rgba(251,243,226,.16);
}
.menu-karti-kalem:last-child{border-bottom:0}
/* Ad ile fiyat arasındaki nokta dizisi. Gerçek menü kartının imzası.
   Kenarlık tekrar eden bir zeminle çiziliyor, ölçüye göre uzuyor. */
.menu-karti-satir{
  display:flex;align-items:baseline;gap:.6rem;
  margin:0 0 .25rem !important;padding:0 !important;
}
.menu-karti-ad{
  font-family:var(--display);
  font-size:clamp(1.05rem,1.8vw,1.3rem);
  line-height:1.2;color:var(--kagit);
}
.menu-karti-nokta{
  flex:1 1 auto;min-width:1.5rem;
  border-bottom:1px dotted rgba(251,243,226,.4);
  transform:translateY(-.22em);
}
.menu-karti-fiyat{
  flex:0 0 auto;
  font-size:.95rem;font-weight:600;
  color:var(--altin);
  font-variant-numeric:tabular-nums;
}
.menu-karti-not{
  margin:0 !important;padding:0 !important;
  font-size:.86rem;line-height:1.55;
  color:rgba(251,243,226,.76) !important;
}
.menu-karti .eylem{text-align:center;margin:clamp(1.4rem,3vw,2.2rem) 0 0}
/* Koyu zeminde düğme. Taban kural (1339) düğmeyi mürekkep renkli bir
   metin bağına indiriyor ve `!important` taşıyor, koyu panelde yazı
   görünmez oluyor, ekranda yalnız altın çizgi kalıyordu. Ölçüldü. */
.menu-karti .eylem .button{
  display:inline-block;
  background:transparent !important;
  color:var(--kagit) !important;
  border:1px solid rgba(251,243,226,.45) !important;
  border-radius:999px !important;
  padding:.8rem 1.9rem !important;
  text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;
  transition:background-color .3s var(--e-out),border-color .3s var(--e-out),color .3s var(--e-out);
}
.menu-karti .eylem .button:hover{
  background:var(--altin) !important;
  border-color:var(--altin) !important;
  color:var(--murekkep) !important;
}

@media (max-width:899px){
  /* Ters blok da tek sütuna iniyor. Sınıf iki seçici taşıdığı için daha
     ağır, sade `.menu-karti-blok` kuralı onu geçemiyordu ve telefonda o
     blok iki sütun kalıyor, fiyatlar ekranın dışına taşıyordu. Ölçüldü. */
  .menu-karti-blok,
  .menu-karti-blok.ters{grid-template-columns:minmax(0,1fr)}
  /* Telefonda fotoğraf her blokta üstte. `order` yalnız görsel sırayı
     değiştiriyor, kaynakta da fotoğraf zaten önce geliyor. */
  .menu-karti-blok.ters .menu-karti-foto{order:0}
}

/* ═══════════════════════════════════════════════════════════
   41 · GALERİ ŞERİDİ VE REZERVASYON KARTI
   17 Eylül 2026.
   ═══════════════════════════════════════════════════════════ */

.galeri-serit-bolum{
  margin-inline:calc(50% - 50vw);
  background:var(--kagit);
  padding-block:clamp(2.6rem,6vw,4.4rem);
  overflow:hidden;
}
.galeri-serit-ust{
  text-align:center;margin:0 0 1.4rem;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--metin-3);
}
.galeri-serit-kutu{
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.galeri-serit-kutu::-webkit-scrollbar{display:none}
.galeri-serit{
  list-style:none;margin:0;padding:0 var(--pad);
  display:flex;gap:clamp(.6rem,1.4vw,1rem);
  width:max-content;
}
.galeri-serit > li{flex:0 0 auto}
.galeri-serit img{
  display:block;
  width:clamp(140px,18vw,240px);height:auto;
  aspect-ratio:1;object-fit:cover;
  border-radius:clamp(10px,1.4vw,16px);
}
/* Kaydırılabilir kutu klavyeyle odaklanıyor, halkası görünsün. */
.galeri-serit-kutu:focus-visible{outline:2px solid var(--kehribar-metin);outline-offset:4px}
.galeri-serit-bolum .eylem{text-align:center;margin:1.6rem 0 0}

/* ── Rezervasyon kartı */
.rez-karti-bolum{
  margin-inline:calc(50% - 50vw);
  padding-inline:calc(50vw - 50%);
  background:var(--kagit-2);
  padding-block:clamp(3rem,7vw,5.5rem);
}
.rez-karti{
  position:relative;
  background:var(--kagit);
  border-radius:clamp(16px,2.4vw,28px);
  padding:clamp(1.8rem,4vw,3.4rem);
  box-shadow:0 24px 60px -40px rgba(39,47,60,.45);
}
/* Köşedeki yuvarlak damga. Referansın imzası bu. Dar ekranda kartın
   üstüne binmesin diye gizleniyor. */
.rez-karti-damga{
  position:absolute;top:calc(-1 * clamp(24px,3vw,38px));right:clamp(1.4rem,4vw,3rem);
  width:clamp(76px,9vw,104px);aspect-ratio:1;border-radius:50%;
  background:var(--altin);color:var(--murekkep);
  display:flex;align-items:center;justify-content:center;
  text-align:center;
  font-family:var(--elyazisi);
  font-size:clamp(1rem,1.7vw,1.35rem);line-height:1.1;
  box-shadow:0 10px 24px -16px rgba(39,47,60,.6);
}
.rez-karti-damga span{display:block;max-width:80%}
.rez-karti-ust{
  font-family:var(--elyazisi);
  font-size:clamp(1.3rem,2.8vw,1.8rem);
  color:var(--kehribar-metin);
  text-align:center;margin:0 0 .2rem;
}
.rez-karti-baslik{
  font-family:var(--display);
  font-size:clamp(1.7rem,4vw,2.8rem);
  line-height:1.08;text-wrap:balance;
  text-align:center;margin:0 0 clamp(1.4rem,3vw,2.2rem);
}
@media (max-width:599px){
  .rez-karti-damga{display:none}
}

/* ═══════════════════════════════════════════════════════════
   42 · DÜĞME VE ÜZERİNE GELME DAVRANIŞI
   17 Eylül 2026, Mücahit'in isteği. Sitedeki bütün düğme aileleri tek bir
   dile bağlandı. Üç kural var.

   1. Üzerine gelince renk TERSİNE döner, soluklaşmaz. Dolu düğme boşalır,
      boş düğme dolar.
   2. Metin düğmesinin altındaki çizgi soldan sağa süpürülerek çizilir.
   3. Hareket yalnız `transform` ve `opacity` ile, iki piksellik kalkma.
      Yükseklik, genişlik, dolgu hiçbir yerde animasyonlanmıyor, yeniden
      yerleşim üretmesin diye.

   Renk seçimi ölçüldü. Açık zeminde vurgu kor (#A85721), beyazda 5,18 ve
   krem üstünde 4,90 veriyor. Koyu zeminde vurgu altın, mürekkepte 5,12.
   Şampanya açık zeminde metin olarak KULLANILMIYOR, 2,63 veriyor.

   Kurallar dosyanın sonunda, çünkü taban kurallar `!important` taşıyor ve
   eşit ağırlıkta sonra gelen kazanıyor.
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · Metin düğmeleri. Alt çizgi süpürülerek geliyor. */
.button,.small_button,input[type=submit],button[type=submit],.button-bos,.button-acik,
.woocommerce a.button,.woocommerce button.button{
  position:relative;
  display:inline-block;
  transition:color .3s var(--e-out),border-color .3s var(--e-out),transform .3s var(--e-out) !important;
}
/* Süpürülen çizgi. Taban çizgi border-bottom'da duruyor, bu onun üstüne
   biniyor ve iki piksel kalınlığında. `::after` boşta değil, yükleniyor
   ve gönderildi durumları onu kullanıyor. */
.button::before,.button-bos::before,.button-acik::before,
input[type=submit]::before,button[type=submit]::before{
  content:"";
  position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--kor);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .38s var(--e-out);
  pointer-events:none;
}
.button:hover::before,.button:focus-visible::before,
.button-bos:hover::before,.button-acik:hover::before,
input[type=submit]:hover::before,button[type=submit]:hover::before{transform:scaleX(1)}

.button:hover,.small_button:hover,input[type=submit]:hover,button[type=submit]:hover,
.button-bos:hover,.button-acik:hover{
  color:var(--kor) !important;
  border-bottom-color:transparent !important;
  /* Temanın bağlantı kuralı üzerine gelince altı çiziyor. Süpürülen çubukla
     birlikte iki çizgi oluyordu, ölçüldü. */
  text-decoration:none !important;
  /* `!important` gerekti. Temanın kendi geçiş tanımı `transition-property`
     değerini color, background, opacity ile sınırlıyor ve kalkma hiç
     uygulanmıyordu, ölçüldü. */
  transform:translateY(-2px) !important;
}

/* Koyu zeminde vurgu altın. Kor koyu mürekkebin üstünde 3,49 veriyor,
   eşiğin altında. */
.hero-tam .button::before,.koyu-bolum .button::before,.bant .button::before,
.menu-karti .button::before{background:var(--altin)}
.hero-tam .button:hover,.koyu-bolum .button:hover,.bant .button:hover{
  color:var(--altin) !important;border-bottom-color:transparent !important;
}

/* ── 2 · Dolu hap. Üzerine gelince tersine dönüyor. */
#menu_wrapper .nav > li.rez-cta > a{
  transition:background-color .3s var(--e-out),color .3s var(--e-out),
             box-shadow .3s var(--e-out),transform .3s var(--e-out);
}
#menu_wrapper .nav > li.rez-cta > a:hover,
.header_style_wrapper.sultan-saydam #menu_wrapper .nav > li.rez-cta > a:hover,
.header_style_wrapper.sultan-inmis #menu_wrapper .nav > li.rez-cta > a:hover{
  background:var(--kagit) !important;
  color:var(--kor) !important;
  box-shadow:inset 0 0 0 1px var(--kor);
  transform:translateY(-2px);
}
/* Çekmecedeki kardeşi de aynı davranıyor. */
.mobile_menu_wrapper li.rez-cta > a{
  transition:background-color .3s var(--e-out),color .3s var(--e-out),transform .3s var(--e-out);
}
.mobile_menu_wrapper li.rez-cta > a:hover{
  background:var(--kagit) !important;color:var(--kor) !important;
  box-shadow:inset 0 0 0 1px var(--kor);
  transform:translateY(-2px);
}

/* ── 3 · Çerçeveli hap. Üzerine gelince doluyor. */
.menu-karti .eylem .button{transition:background-color .3s var(--e-out),border-color .3s var(--e-out),color .3s var(--e-out),transform .3s var(--e-out)}
.menu-karti .eylem .button:hover{transform:translateY(-2px)}
/* Bu hap kendi rengini dolduruyor, süpürülen çizgiye ihtiyacı yok. */
.menu-karti .eylem .button::before{display:none}

/* ── 4 · Menü süzgeci. Çizgi süpürülerek geliyor, seçili olanda duruyor. */
.suzgec{position:relative}
.suzgec::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--kor);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s var(--e-out);
  pointer-events:none;
}
.suzgec:hover::after,.suzgec:focus-visible::after{transform:scaleX(1)}
/* hareket.css sultan.css'ten sonra yükleniyor ve orada `.suzgec:hover`
   mürekkep veriyor, ağırlık eşit olduğu için o kazanıyordu. */
.suzgec:hover{color:var(--kor) !important}
/* Seçili süzgecin kendi altın çizgisi var, ikinci çizgi üstüne binmesin. */
.suzgec.etkin::after{display:none}
/* Vejetaryen düğmesi doluyken tersine dönüyor. */
.menu-suzgec .suz-vej[aria-pressed="true"]{transition:background-color .3s var(--e-out),color .3s var(--e-out),transform .3s var(--e-out)}
.menu-suzgec .suz-vej[aria-pressed="true"]:hover{
  background:transparent;color:var(--adacayi);
  box-shadow:inset 0 0 0 1px var(--adacayi);
  transform:translateY(-2px);
}

/* ── 5 · Sihirbazın ızgara düğmeleri. Yoğun bir ızgara, kalkma yok,
   kenarlık ve zemin konuşuyor. */
.rez-gun,.rez-yuva,.rez-kisiler button{
  transition:background-color .25s var(--e-out),border-color .25s var(--e-out),color .25s var(--e-out);
}
.rez-gun:hover:not([aria-disabled]),
.rez-yuva:hover:not([disabled]),
.rez-kisiler button:hover:not([aria-pressed="true"]){
  background:var(--kagit) !important;
  border-color:var(--kor) !important;
  color:var(--kor) !important;
}
.rez-gun:hover:not([aria-disabled]) .rez-yuva-saat,
.rez-yuva:hover:not([disabled]) .rez-yuva-saat{color:var(--kor)}

/* ── 6 · Çekmece bağlantıları. Büyük başlıklar, altlarında ince çizgi
   soldan geliyor. */
.mobile_menu_wrapper ul li:not(.rez-cta) > a{
  position:relative;display:inline-block;
  transition:transform .3s var(--e-out);
}
.mobile_menu_wrapper ul li:not(.rez-cta) > a::after{
  content:"";position:absolute;left:0;right:0;bottom:.06em;height:2px;
  background:var(--murekkep);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s var(--e-out);
}
.mobile_menu_wrapper ul li:not(.rez-cta) > a:hover::after,
.mobile_menu_wrapper ul li:not(.rez-cta) > a:focus-visible::after{transform:scaleX(1)}
.mobile_menu_wrapper ul li:not(.rez-cta) > a:hover{transform:translateX(4px)}

/* ── 7 · Rehber kartındaki oku bağlantısı. */
.rehber-oku{position:relative;display:inline-block;transition:transform .3s var(--e-out)}
.rehber-oku::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;
  background:var(--kor);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .35s var(--e-out);
}
.rehber-kart a:hover .rehber-oku::after,.rehber-oku:hover::after{transform:scaleX(1)}
.rehber-kart a:hover .rehber-oku{color:var(--kor)}

/* ── 8 · Hareketi azalt. Kalkma ve kayma kapanıyor, çizgi anında beliriyor. */
@media (prefers-reduced-motion:reduce){
  .button,.button-bos,.button-acik,input[type=submit],button[type=submit],
  #menu_wrapper .nav > li.rez-cta > a,.mobile_menu_wrapper li.rez-cta > a,
  .menu-karti .eylem .button,.menu-suzgec .suz-vej[aria-pressed="true"],
  .mobile_menu_wrapper ul li > a,.rehber-oku{transition-duration:.01ms !important}
  .button:hover,.button-bos:hover,.button-acik:hover,
  input[type=submit]:hover,button[type=submit]:hover,
  #menu_wrapper .nav > li.rez-cta > a:hover,.mobile_menu_wrapper li.rez-cta > a:hover,
  .menu-karti .eylem .button:hover,.menu-suzgec .suz-vej[aria-pressed="true"]:hover,
  .mobile_menu_wrapper ul li:not(.rez-cta) > a:hover{transform:none}
  .button::before,.suzgec::after,.rehber-oku::after,
  .mobile_menu_wrapper ul li:not(.rez-cta) > a::after{transition:none}
}


/* ═══════════════════════════════════════════════════════════
   43 · ÇEKMECE YENİDEN KURGUSU
   18 Eylül 2026. Mücahit iki şey söyledi. Çekmece hamburgerin ters
   tarafından açılıyor ve geri çıkmak için düğme yok. İkisi de doğruydu,
   ölçüldü.

   Bulunan dört kusur.

   1. Hamburger barın SOLUNDA, çekmece ana temadan SAĞDAN geliyordu
      (screen.css 832, `right:0` ve `translate(400px,0)`).
   2. Kapatma düğmesi ekranda sıfıra sıfır pikseldi. Tema onu `ti-close`
      simge yazı tipiyle çiziyor, o yazı tipi bu kurulumda yüklenmiyor,
      `content` değeri `none` dönüyordu. Boş `span` kutuyu çökertiyordu.
      Etiketi vardı, gövdesi yoktu.
   3. Perde vardı ama görünmüyordu. `#overlay_background` `#wrapper`
      içinde ve `#wrapper` açıkken `translate(-400px,0)` alıyor. Dönüşüm
      alan ata, içindeki `position:fixed` öğenin çıpası oluyor, perde
      ekranı değil sarmalayıcıyı kaplıyordu.
   4. Çekmece `z-index:9` taşıyor, üst bar 60. Sol taraftan açılınca bar
      çekmecenin üstüne biniyordu.

   Kurgu şimdi şöyle. Çekmece hamburgerin durduğu yandan geliyor, sayfa
   yerinden oynamıyor, arkası kararıyor, tepesinde gerçek bir kapatma
   düğmesi var. Yığın düzeni perde 70, çekmece 80, yani üst barın (60) ve
   sabit rezervasyon düğmesinin (50) üstünde, çerez şeridinin (9000)
   altında.

   Yön MANTIKSAL yazıldı. Arapça sürümde hamburger sağa geçiyor, çekmece
   de sağdan gelmeli.
   ═══════════════════════════════════════════════════════════ */

:root{
  --cekmece-en:min(88vw,400px);      /* telefonda tam kaplamıyor, arkası görünsün */
  --cekmece-pad:clamp(26px,4.4vw,56px);
  --kapat-cap:52px;                  /* hamburger dairesiyle aynı çap */
  --kapat-ust:clamp(16px,2.2vw,26px);
}

/* ── Çekmece kutusu. Hamburgerin durduğu yandan geliyor. */
.mobile_menu_wrapper{
  inset-inline-start:0 !important;
  inset-inline-end:auto !important;
  width:var(--cekmece-en) !important;
  max-width:none !important;
  transform:translateX(-100%) !important;
  z-index:80 !important;
  /* Üstte kapatma düğmesine yer açılıyor, düğme akışta değil. */
  padding:calc(var(--kapat-ust) + var(--kapat-cap) + clamp(18px,2.4vw,30px))
          var(--cekmece-pad)
          calc(2.5rem + env(safe-area-inset-bottom)) !important;
  /* Tema `scroll` veriyor, içerik kısayken de boş çubuk duruyordu. */
  overflow-y:auto;
  /* Çekmecenin sonuna gelince kaydırma arkadaki sayfaya atlamasın. */
  overscroll-behavior:contain;
}
/* Arapçada satır yönü dönüyor, çekmece de karşı yandan gelmeli. */
[dir="rtl"] .mobile_menu_wrapper{transform:translateX(100%) !important}
/* Açık hal iki yönde de sıfır. Seçici `body.js_nav .mobile_menu_wrapper`
   (0,2,1), yukarıdaki RTL kuralı (0,2,0), ikisi de !important, bu yüzden
   açık hal her iki yönde de kazanıyor. */
body.js_nav .mobile_menu_wrapper{transform:translateX(0) !important}

/* ── Sayfa itilmiyor. Tema `#wrapper` ve perdeyi 400 piksel kaydırıyordu.
   Sola açılan çekmecede bu sayfayı sağa iter, kahraman fotoğraf ekrandan
   taşar ve yatay kaydırma açılır. Ayrıca dönüşüm perdenin çıpasını
   bozuyordu, 3. kusur. Çekmece artık sayfanın üstüne biniyor. */
body.js_nav #wrapper,
body.js_nav #overlay_background{transform:none !important}

/* ── Perde. Arkadaki sayfa kararıyor ve okunmuyor, dışarı dokununca
   kapanıyor. Tıklama zaten bağlıydı, görünen bir yüzeyi yoktu. */
#overlay_background{
  z-index:70 !important;
  background-color:rgba(23,19,15,.62) !important;
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}

/* ── Kapatma düğmesi. Gövdesi simge yazı tipinden değil sözde öğelerden
   geliyor, hamburgerde de aynı yol tutuldu. Çap, kenarlık ve davranış
   hamburgerle aynı, ziyaretçi aynı düğmenin X'e döndüğünü görüyor.
   Elli iki piksel, WCAG 2.2 dokunma hedefi en az yirmi dört istiyor. */
#close_mobile_menu{
  position:absolute;
  inset-inline-start:var(--cekmece-pad) !important;
  inset-inline-end:auto !important;
  top:var(--kapat-ust) !important;
  width:var(--kapat-cap);height:var(--kapat-cap);
  box-sizing:border-box;
  border:1px solid rgba(39,47,60,.34);
  border-radius:50%;
  background:rgba(39,47,60,.07);
  display:inline-flex;align-items:center;justify-content:center;
  opacity:1 !important;
  color:var(--murekkep);
  font-size:0;                       /* boş span satır yüksekliği açmasın */
  z-index:2;
  transition:background-color .3s var(--e-out),border-color .3s var(--e-out),color .3s var(--e-out);
}
/* Simge yazı tipi gelmiyor, boş kutu duruyor. */
#close_mobile_menu > span,#close_mobile_menu > i{display:none}
#close_mobile_menu::before,#close_mobile_menu::after{
  content:"";position:absolute;left:50%;top:50%;
  width:20px;height:2px;border-radius:2px;background:currentColor;
}
#close_mobile_menu::before{transform:translate(-50%,-50%) rotate(45deg)}
#close_mobile_menu::after{transform:translate(-50%,-50%) rotate(-45deg)}
/* Üzerine gelince renk tersine dönüyor, soluklaşmıyor. 42. bölümdeki
   kural bu. Mürekkep şampanyanın üstünde 6,17. */
#close_mobile_menu:hover,#close_mobile_menu:focus-visible{
  background:var(--murekkep);border-color:var(--murekkep);color:var(--altin);
  opacity:1 !important;
}

/* ── Çekmecedeki logo. Zemin şampanyaya döndüğünde logo açık sürümde
   kalmıştı, beyaz üstüne şampanya 1,73 veriyor, marka okunmuyordu.
   Koyu sürüm 6,17. Ayrıca kapatma düğmesinin altına indi, çakışmıyor. */
.mobile_menu_wrapper::before{
  height:64px;
  margin:0 0 1.6rem;
  background-image:url("../img/logo.svg");
  background-position:left center;
}
[dir="rtl"] .mobile_menu_wrapper::before{background-position:right center}

/* ── Hareketi azalt. Kayma anında oluyor, perde yine de yumuşak açılıyor
   ki ekran birden kararmasın. */
@media (prefers-reduced-motion:reduce){
  .mobile_menu_wrapper{transition:none !important}
  #close_mobile_menu{transition-duration:.01ms !important}
}