/* ==========================================================================
   Kebapci Baki — modern tema katmani (2026-09-09)

   Yaklasim: mevcut Bootstrap 3.3.5 + "Pearl Restaurant" temasi YERINDE kalir;
   bu dosya onun uzerine biner ve yalnizca gorunumu tazeleyen kurallari ezer.
   Boylece herhangi bir sayfa bozulursa tek dosya devre disi birakilarak
   eski gorunume donulebilir.

   Palet kaynagi: sektor-tasarim veri cekirdegi (Restaurant/Food Service —
   "warm orange/red/brown + appetizing imagery"). Markanin mevcut altin rengi
   (#E9B947) kimlik oldugu icin korundu; yanina odun atesi/kor tonlari eklendi.
   ========================================================================== */

:root {
  /* --- Marka --- */
  --kb-altin:       #e9b947;
  --kb-altin-koyu:  #c99a2e;
  --kb-altin-acik:  #f5d68a;

  /* --- Odun atesi / kor (sektor paletinden) --- */
  --kb-kor:         #b8402a;   /* aksiyon vurgusu */
  --kb-kor-koyu:    #8f2f1e;
  --kb-kiremit:     #d4674a;

  /* --- Notrler: sicak tarafa tonlanmis (soguk gri degil) --- */
  --kb-is:          #1c1a17;   /* ana metin */
  --kb-is-yumusak:  #3a352e;
  --kb-gri:         #6b6560;
  --kb-cizgi:       #e4ded4;
  --kb-krem:        #fffdf9;   /* sayfa zemini */
  --kb-krem-koyu:   #f7f1e6;   /* bolum zemini */

  /* --- Durum --- */
  --kb-ok:          #2e7d5b;
  --kb-hata:        #b3261e;
  /* 2026-09-10: marka yesili #25d366 beyaz metinle 1.98:1 kontrast veriyordu
     (WCAG asgari 4.5:1). Ayni ailede koyu ton: 5.41:1 — AA. */
  --kb-wa:          #0f7a41;

  /* --- Olcek --- */
  --kb-yuvarlak:    10px;
  --kb-yuvarlak-bs: 16px;
  --kb-golge:       0 1px 2px rgba(28,26,23,.06), 0 8px 24px rgba(28,26,23,.08);
  --kb-golge-bs:    0 4px 12px rgba(28,26,23,.10), 0 20px 48px rgba(28,26,23,.12);

  /* --- Akiskan tipografi: 360px-1440px arasi kendiliginden olceklenir --- */
  --kb-h1: clamp(1.9rem, 1.25rem + 2.6vw, 3.4rem);
  --kb-h2: clamp(1.55rem, 1.1rem + 1.8vw, 2.5rem);
  --kb-h3: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  --kb-govde: clamp(.95rem, .9rem + .2vw, 1.05rem);
}

/* --------------------------------------------------------------- Tipografi
   Mevcut tema Raleway + Source Sans Pro kullaniyor; ikisi de Turkce
   karakterleri (ı İ ş ğ ü ö ç) tam destekliyor, bu yuzden font ailesi
   degistirilmedi — yalnizca olcek, satir araligi ve ritim duzeltildi.       */

body {
  font-size: var(--kb-govde);
  line-height: 1.65;
  color: var(--kb-is-yumusak);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, .h1 { font-size: var(--kb-h1); }
h2, .h2 { font-size: var(--kb-h2); }
h3, .h3 { font-size: var(--kb-h3); }

h1, h2, h3, h4, .main-title h1, .main-title h2 {
  line-height: 1.18;
  letter-spacing: -.01em;
  color: var(--kb-is);
  text-wrap: balance;          /* baslik satirlarini dengeler */
}

p { max-width: 68ch; }         /* uzun satir okumayi zorlastirir */
.text-center p, .main-title p { margin-left: auto; margin-right: auto; }

/* ------------------------------------------------------------------ Baglar */
a { transition: color .15s ease; }
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kb-altin);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Klavye kullanicisi icin "icerige atla" baglantisi */
.kb-atla {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10001;
  padding: 12px 18px;
  background: var(--kb-is);
  color: #fff;
  border-radius: 0 0 var(--kb-yuvarlak) 0;
}
.kb-atla:focus { left: 0; color: #fff; }

/* ----------------------------------------------------------------- Butonlar
   Eski tema butonlari keskin kosheli ve dusuk kontrastliydi.               */
.btn, .button, input[type="submit"], button.submit {
  border-radius: var(--kb-yuvarlak);
  font-weight: 700;
  letter-spacing: .01em;
  transition: background-color .15s ease, color .15s ease,
              transform .08s ease, box-shadow .15s ease;
}
.btn:active, .button:active, input[type="submit"]:active { transform: translateY(1px); }

.btn-primary, .button-primary {
  background: var(--kb-kor);
  border-color: var(--kb-kor);
  color: #fff;
}
.btn-primary:hover, .button-primary:hover,
.btn-primary:focus, .button-primary:focus {
  background: var(--kb-kor-koyu);
  border-color: var(--kb-kor-koyu);
  color: #fff;
}

/* ------------------------------------------------------------------ Basliklar */
.main-title span {
  color: var(--kb-kor);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12.5px;
}
.main-title h1, .main-title h2 { margin-top: 6px; }

/* -------------------------------------------------------------- Bolum ritmi
   Eski temada bolumler cok sikisikti; nefes payi acildi.                    */
.content > div,
.content > section { padding-top: 56px; padding-bottom: 56px; }
@media (max-width: 767px) {
  .content > div,
  .content > section { padding-top: 40px; padding-bottom: 40px; }
}

/* --------------------------------------------------------------- Gorseller */
img { max-width: 100%; height: auto; }

/* --------------------------------------------------------- Rezervasyon alani */
.booking-form {
  background: var(--kb-krem);
  padding: 26px 22px 30px;
  border: 1px solid var(--kb-cizgi);
  border-radius: var(--kb-yuvarlak-bs);
  box-shadow: var(--kb-golge);
}
@media (max-width: 767px) { .booking-form { padding: 20px 16px 24px; } }

/* ------------------------------------------------------------------- Footer */
.footer, footer { background: var(--kb-is); }
.footer a, footer a { color: #d9d2c6; }
.footer a:hover, footer a:hover { color: var(--kb-altin); }

/* --------------------------------------------------------- Dokunma hedefleri
   WCAG 2.2: etkilesimli ogeler en az 24x24 CSS pikseli olmali.              */
@media (pointer: coarse) {
  .footer a, footer a, .nav a, .navbar a {
    display: inline-block;
    min-height: 24px;
    padding-top: 4px;
    padding-bottom: 4px;
  }
}

/* ------------------------------------------------------------ Yazdirma */
@media print {
  .kb-wa-fab, .preloader, .sticky-header, video { display: none !important; }
  body { color: #000; background: #fff; }
}

/* ------------------------------------------ Hareket azaltma tercihine saygi */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Denetim düzeltmeleri — 2026-09-10
   ========================================================================== */

/* --- Sayfa başlığı bandı mobilde taşıyordu ------------------------------
   .sub-banner .detail "position:absolute; width:100%" idi. Üst öğenin 15px
   yan boşluğu varken width:100% vermek, bloğu sağdan tam 15px taşırıyordu
   (ölçüm: sol 15px, sağ 405px, viewport 390px). left/right ile sabitlendi. */
.sub-banner .detail {
  left: 15px;
  right: 15px;
  width: auto;
}

/* Başlık bandı: mobilde okunaklı ölçek ve hizalama */
@media (max-width: 767px) {
  /* 2026-09-10 düzeltme: "top:34%" yüksekliği 1px olan Bootstrap sütununa göre
     hesaplanıyordu (0.33px) — başlık 80px'lik sabit header'ın altında kalıyordu.
     505px'lik bantta header'ın altındaki alana ortalanır. */
  .sub-banner .detail { top: 230px; }
  .sub-banner .detail h1,
  .sub-banner .detail h2 { font-size: clamp(1.4rem, 7vw, 2rem); line-height: 1.2; }
  .sub-banner .detail span { font-size: 15px; }
  /* Breadcrumb sağa yaslıydı ve 110px üst boşlukla taşıyordu */
  .sub-banner .detail ul { float: none; margin: 14px 0 0; display: flex;
                           flex-wrap: wrap; justify-content: center; gap: 2px; }
  .sub-banner .detail ul li { float: none; }
}

/* --- Dokunma hedefleri (WCAG 2.2 — en az 24×24px) ----------------------
   Breadcrumb, footer ve galeri bağlantıları 19px yüksekliğindeydi. */
.sub-banner .detail ul li a,
.footer a, footer a,
.example-image-link,
.post .detail a {
  display: inline-block;
  min-height: 24px;
  line-height: 1.6;
  padding-block: 2px;
}

/* Breadcrumb'ın aktif öğesi bağlantı değil — imleç de öyle davranmalı */
.sub-banner .detail ul li a.select { cursor: default; }

/* --- Galeri bağlantıları: görselin tamamı tıklanabilir ---------------- */
.example-image-link { display: block; }
.example-image-link img { display: block; width: 100%; height: auto; }

/* --- "Kebapçı Baki kimdir?" bloğu mobilde -------------------------------
   El yazısı (Tangerine) başlık mobilde iki satıra bölünüp okunmaz hale
   geliyordu; metin kutusu da gereğinden dardı. */
@media (max-width: 767px) {
  .our-story .detail,
  .our-story .story-detail { padding: 22px 18px !important; }
  .our-story h1, .our-story h2, .our-story h3 {
    font-size: clamp(1.6rem, 8vw, 2.2rem) !important;
    line-height: 1.15 !important;
    margin-bottom: 14px;
  }
  .our-story p { font-size: 15px; line-height: 1.65; text-align: left; }
}

/* Kurumsal sayfası özet paragrafı */
.kb-ozet {
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--kb-is-yumusak, #3a352e);
}

/* ==========================================================================
   Sektörel tipografi — 2026-09-10
   Kaynak: sektor-tasarim / typography.csv → "Restaurant Menu" çifti.
   Başlık: Playfair Display (serif) — 1950'den gelen bir işletmenin
   köklülüğünü taşır. Gövde: Karla (sans) — ekranda yüksek okunabilirlik.
   Not: veri "Playfair Display SC" öneriyor; small-caps sürüm Türkçe'de
   i → İ dönüşümünü bozduğu için normal sürüm kullanıldı.
   ========================================================================== */

:root {
  --kb-font-baslik: 'Playfair Display', 'Times New Roman', Georgia, serif;
  --kb-font-govde:  'Karla', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body,
p, li, td, th, label, input, select, textarea, button {
  font-family: var(--kb-font-govde);
}

h1, h2, h3, h4, h5,
.main-title h1, .main-title h2, .main-title h3,
.kb-video-baslik, .kb-galeri h2 {
  font-family: var(--kb-font-baslik);
  font-weight: 600;
  letter-spacing: -.005em;
}

/* Üst menü ve butonlar gövde fontuyla — serif menü okunurluğu düşürüyor */
.navbar a, .nav a, .menu a, .kb-btn, .btn, .button,
.kb-label, .kb-form-not, .kb-cubuk-og {
  font-family: var(--kb-font-govde);
}

/* Bölüm üstü küçük etiket ("SOFRAMIZDAN" vb.) */
.main-title span {
  font-family: var(--kb-font-govde);
  font-weight: 600;
}

/* Playfair'in rakamları başlıkta daha dengeli dursun */
h1, h2, h3 { font-variant-numeric: lining-nums proportional-nums; }

/* ==========================================================================
   Sticky nav CTA — 2026-09-10
   Kaynak: sektor-tasarim / landing.csv → "Hero-Centric Design":
   "Primary CTA Placement: Hero dominant + Sticky nav CTA", tek birincil CTA.
   Menüdeki REZERVASYON bağlantısı düz metindi; butona dönüştürüldü.
   ========================================================================== */

nav li a[href*="#reservation"],
.navbar li a[href*="#reservation"],
.nav li a[href*="#reservation"],
header li a[href*="#reservation"] {
  background: var(--kb-kor);
  color: #fff !important;
  border-radius: 999px;
  padding: 9px 20px !important;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .15s ease, transform .08s ease;
}
nav li a[href*="#reservation"]:hover,
nav li a[href*="#reservation"]:focus-visible,
.navbar li a[href*="#reservation"]:hover,
.nav li a[href*="#reservation"]:hover {
  background: var(--kb-kor-koyu);
  color: #fff !important;
}
nav li a[href*="#reservation"]:active { transform: translateY(1px); }

/* Dar ekranda açılır menüde buton tam genişlik olmasın */
@media (max-width: 991px) {
  nav li a[href*="#reservation"],
  .navbar li a[href*="#reservation"] {
    display: inline-block;
    margin: 6px 0;
  }
}

/* ==========================================================================
   Bölüm bütünlüğü ve ritim — 2026-09-10
   Amaç: anasayfa bölümleri birbirinden kopuk görünmesin; zemin ritmi ve
   sektörel (iştah açıcı) görsel desteğiyle akış kurulsun.
   ========================================================================== */

/* --- Sticky header form alanlarını ve bağlantı hedeflerini örtüyordu ----- */
:target,
input, select, textarea,
.kb-alan, .booking-form, section[id], div[id] {
  scroll-margin-top: 96px;
}

/* --- Zemin ritmi: bölümler dönüşümlü krem / beyaz ---------------------- */
.today-special { background: var(--kb-krem, #fffdf9); }
.our-story     { background: #fff; }
.kb-galeri     { background: var(--kb-krem, #fffdf9); }
.news          { background: #fff; }

/* --- Rezervasyon bölümü: iştah açıcı arka plan ------------------------- */
.parallax.parallax-book-table {
  position: relative;
  background: url("../images/denizli-kebabi/odun-atesinde-pisen-denizli-kebabi.jpg") center/cover no-repeat;
  height: auto;
  padding: 66px 0;
}
/* Fotoğrafın üstünde form okunabilir kalsın */
.parallax.parallax-book-table::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20,18,15,.72) 0%, rgba(20,18,15,.82) 100%);
}
.parallax.parallax-book-table > * { position: relative; z-index: 1; }
.parallax.parallax-book-table .main-title h1,
.parallax.parallax-book-table .main-title h2 { color: #fff; }
.parallax.parallax-book-table .main-title span { color: var(--kb-altin, #e9b947); }

/* Müşteri sözleri bölümü de aynı dili konuşsun */
.parallax.parallax-customer-words {
  background-attachment: scroll;
  background-size: cover;
  background-position: center;
}

/* iOS'ta background-attachment:fixed titriyor ve performansı düşürüyor */
@media (max-width: 991px) {
  .parallax, .parallax-book-table, .parallax-customer-words {
    background-attachment: scroll !important;
  }
}

/* --- Bölüm başlıkları arasında tutarlı nefes payı ---------------------- */
.today-special, .our-story, .kb-galeri, .news, .customer-words {
  padding-top: clamp(48px, 5vw, 76px);
  padding-bottom: clamp(48px, 5vw, 76px);
}

/* Bölüm ayırıcı: ince altın çizgi — marka dilini tekrarlar */
.kb-galeri + .book-table,
.our-story + .kb-galeri { border-top: 1px solid var(--kb-cizgi, #e4ded4); }

/* ==========================================================================
   2026-09-10 — kullanıcı geri bildirimi üzerine düzeltmeler
   ========================================================================== */

/* --- 1. Sticky header'da logo kayboluyordu ----------------------------
   Sayfa kaydırılınca header beyaza dönüyor, ama gösterilen "logo-dark.png"
   adına rağmen açık tonlu bir logo: beyaz zeminde okunmuyordu.
   Çözüm: sticky header sayfa üstündeki hâliyle aynı koyu zemini korur;
   böylece logo ve menü kontrastı her durumda yerinde olur. */
.header-two.sticky,
.header.sticky {
  background: rgba(20, 18, 15, .95) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 18px rgba(0, 0, 0, .22);
}
.header-two.sticky .logo-dark { display: none !important; }
.header-two.sticky .logo2     { display: inline-block !important; }
.header-two.sticky .nav ul li a,
.header.sticky .nav ul li a,
.header-two.sticky .nav ul li.select-item a {
  color: #fff !important;
  border-bottom-color: transparent !important;
}
.header-two.sticky .nav ul li a:hover { color: var(--kb-altin, #e9b947) !important; }
/* Telefon ve sosyal ikonlar da okunur kalsın */
.header-two.sticky .top-bar a,
.header-two.sticky .contact-no a,
.header-two.sticky li.phone a { color: #fff !important; }
/* Rezervasyon CTA butonu koyu zeminde de belirgin */
.header-two.sticky nav li a[href*="#reservation"] { color: #fff !important; }

/* --- 2. Yukarı kaydırma butonu mobil çubukla çakışıyordu -------------- */
.cd-top { z-index: 9997 !important; }
@media (max-width: 767px) {
  .cd-top {
    bottom: 76px !important;      /* 59px çubuk + nefes payı */
    right: 14px !important;
    width: 44px !important;
    height: 44px !important;
  }
}

/* --- 3. Form açılır kutularında yazı küçüktü -------------------------- */
.kb-form select,
.kb-form option,
.booking-form select,
.booking-form option,
.get-touch-form select {
  font-size: 16px !important;     /* 16px altı iOS'ta otomatik yakınlaştırma yapar */
  line-height: 1.45;
}
.kb-form select { min-height: 50px; padding-block: 12px; }
.kb-form option { padding: 8px 10px; }

/* --- 4. Tanıtım videosu: kapak ile oynatıcı aynı orana oturur ---------
   Kapak görseli dikeydi (3:4), video ise 16:9 — ilk açılışta oynatıcının
   üstünde ve altında boşluk kalıyordu. Kapak 16:9 olarak yeniden üretildi
   ve oran CSS'te sabitlendi. */
.kb-tanitim-video video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  height: auto;
}

/* --- 5. İçerik görselleri aşırı uzuyordu ------------------------------
   Bazı içerik kayıtlarına dikey (3:4) fotoğraf bağlıydı; 770px genişlikte
   1027px yüksekliğe uzayıp sayfa akışını bozuyordu. Makul bir çerçeveye
   oturtuldu — görselin odak noktası korunur. */
.news-detail > img,
.news-detail .detail > img,
.blog-detail img,
.post .image img {
  width: 100%;
  max-height: 460px;
  object-fit: cover;
  object-position: center;
  border-radius: var(--kb-yuvarlak, 10px);
}
@media (max-width: 767px) {
  .news-detail > img,
  .news-detail .detail > img,
  .blog-detail img { max-height: 300px; }
}

/* ==========================================================================
   Performans — CLS düzeltmesi (2026-09-10)
   Mobil menü eklentisi (mmenu) başlatılana kadar #menu listesi sayfa akışında
   281px yer kaplıyordu; JS çalışınca menü ekran dışına taşınıyor ve tüm sayfa
   281px yukarı zıplıyordu (Lighthouse mobil CLS 0.342 — neredeyse tamamı bu).
   mmenu başlattığında öğeye .mm-menu sınıfını ekler; o ana kadar gizli tutulur.
   ========================================================================== */
#menu:not(.mm-menu) { display: none !important; }


/* ==========================================================================
   Performans — font birlestirme (2026-09-10)
   Tema bu seçicilere Raleway veriyordu; Raleway'in @import'u (render-blocking
   zincir) kaldırıldı. Aynı seçiciler burada Karla/Playfair'e bağlanır.
   ========================================================================== */
.header .nav ul li a,
.header .get-touch li.book-table a,
.header-two .nav ul li a,
.header-two .get-touch li.book-table a,
.services-two .serv-main-sec .service-sec .detail a,
.white-btn,
.our-story .story-detail a.full-story,
.upcoming-event .event-detail .event-text a.view-event,
.team-members .chef-sec .detail ul li a,
.our-menu .food-sec .detail span.food-time,
.blog .blog-post .post-text a.read-more,
.news-posts .news-sec .detail a.read-more,
.news-posts .recent-posts .post-sec a.title,
.news-posts .share-post h6,
.news-posts .comment-box .detail span.name,
.contact-page .get-in-touch .get-touch-form input[type=submit],
.get-directions input[type="text"],
.cash-payment .cash-delivery .cash-delivery-detail .checkout span,
.cash-payment .cash-delivery .cash-delivery-detail .already-account span,
.cash-payment .shipping-address .shipping-detail span,
.cash-delivery-detail .delivered-detail .delivered-sec span.title,
.booking-form .success,
.newsletter .success_msg,
.get-touch-form .success_msg {
  font-family: var(--kb-font-govde);
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--kb-font-baslik);
}


/* ==========================================================================
   Performans + erişilebilirlik — adım 3 (2026-09-10)
   ========================================================================== */

/* Altın metinler beyaz zeminde ~1.9:1 kontrast veriyordu (WCAG asgari 4.5:1).
   Aynı renk ailesinde koyu ton: #8f6813 (5.05:1). */
.today-special-detail .main-sec .detail span.title,
.our-story .story-detail a.full-story { color: #8f6813 !important; }
.our-story .story-detail a.full-story { border-bottom-color: #8f6813 !important; }

/* Müşteri sözleri arka planı: 1920px/411 KB JPEG -> 1600px WebP 35 KB */
.customer-words {
  background-image: url("../images/testimonials-bg-1600.jpg");
  background-image: image-set(url("../images/testimonials-bg-1600.webp") type("image/webp"),
                              url("../images/testimonials-bg-1600.jpg") type("image/jpeg"));
}
/* Rezervasyon arka planı: 337 KB JPEG -> 155 KB WebP */
.parallax.parallax-book-table {
  background-image: image-set(url("../images/denizli-kebabi/odun-atesinde-pisen-denizli-kebabi.webp") type("image/webp"),
                              url("../images/denizli-kebabi/odun-atesinde-pisen-denizli-kebabi.jpg") type("image/jpeg"));
}
/* <picture> satır içi öğedir; görsel altında taban çizgisi boşluğu bırakmasın */
.today-special-detail .image picture { display: block; }


/* SEO/erişilebilirlik — 2026-09-10: footer başlıkları h1/h4 -> h2/h3 yapıldı.
   Ayrıca genel .main-title kuralları koyu footer'da metni görünmez yapıyordu
   (kontrast 1.09:1 ve 2.88:1) — footer için açık renkler. */
.footer-dark .main-title h2 { color: #fff !important; background: url("../images/heading-light.png") no-repeat center 80px; letter-spacing: 4px; padding: 0 0 70px; }
.footer-dark .main-title span { color: var(--kb-altin, #e9b947) !important; }
.footer-dark .get-touch h3 { font-size: 18px; line-height: 1.3; color: #fff; margin: 0 0 18px; }


/* ==========================================================================
   Başlık hiyerarşisi — 2026-09-10
   Sayfalarda başlık sırası h1→h3, h3→h6 gibi seviye atlıyordu (Lighthouse
   "heading-order"; ekran okuyucuda başlıkla gezinme). Etiketler anlamsal
   seviyeye çekildi; görünüm aşağıdaki sınıflarla eski etiketinkiyle aynı
   tutuldu (öncesi/sonrası computed-style karşılaştırmasıyla doğrulandı).
   ========================================================================== */
.kb-h3 { font-size: var(--kb-h3); }
/* h5/h6 rengi ve satır aralığını üst öğeden alıyordu; h2/h3 ise kendi değerini koyar */
.kb-h5, .kb-h6 { color: inherit; line-height: inherit; text-wrap: wrap; font-variant-numeric: normal; }
.kb-h5 { font-size: 28px; }
.kb-h6 { font-size: 24px; letter-spacing: normal; }

/* pearl-restaurant.css'teki h3 kurallarının h2 karşılıkları */
.news-posts .news-detail .detail h2.kb-h3 { color: #222; font-weight: 600; text-transform: none; margin: 12px 0 0; }
.blog .blog-post .post-text h2.kb-h3 { font-weight: 700; color: #333; margin: 10px 0 0; display: block; }
.contact-page .get-in-touch .get-touch-detail h2.kb-h3 { font-weight: 700; }

/* Kenar çubuğu bant başlıkları h6 → h2. Beyaz yazı #E9B947 üzerinde 1.9:1
   kontrast veriyordu (WCAG büyük metin asgarisi 3:1) → koyu altın #8f6813 (5.05:1). */
.news-posts h2.bar-title { font-size: 24px; font-weight: 500; line-height: 1.65; letter-spacing: normal; color: #fff; padding: 14px 24px; display: block; background: #8f6813; text-wrap: wrap; font-variant-numeric: normal; }

/* Footer "Bizi Takip Edin" h5 → h3: yanındaki footer sütun başlıklarıyla aynı ölçü */
.footer-dark .get-touch .follow-us h3 { margin-bottom: 0; }

/* Mobil footer: harita sütunundaki .open-hours float:left olduğu için sütunun
   yüksekliği sıfıra iniyor, "Bizi Takip Edin" başlığı haritanın etrafına
   sarılıp ikiye bölünüyordu ("Bizi" sağ üstte, "Takip Edin" haritanın altında).
   Her sütun kendi float'ını içine alsın. */
@media (max-width: 991px) {
  .footer-dark .get-touch .row > [class*="col-"] { display: flow-root; }
}
/* Footer marka satırı h5 → h3: rengi pearl'deki ".footer-dark .about-pearl h5{color:#fff}" kuralından geliyordu */
.footer-dark .about-pearl h3.kb-h5 { color: #fff; }
/* 404 sayfası (main.php — dosyası olmayan modül) */
.kb-404 { padding: 56px 15px 80px; text-align: center; }
.kb-404 p { margin: 0 0 20px; }
.kb-404 .kb-btn { margin: 6px; }
/* Masaüstü footer: "Bizi Takip Edin" sütunu genel .follow-us{margin-top:75px}
   yüzünden diğer iki sütun başlığından 75px aşağıda başlıyordu. */
@media (min-width: 992px) {
  .footer-dark .get-touch .follow-us { margin-top: 0; }
}

/* ==========================================================================
   İç sayfalar — 2026-09-10 (Lighthouse iç sayfa denetimi)
   ========================================================================== */
/* Etiketler artık bağlantı değil (bkz. module/blogdetay.php) — eski kutu görünümü */
.news-posts .tags .all-tags .kb-etiket { color: #555; border: 1px solid #c8c8c8; display: inline-block; padding: 10px 23px; margin: 0 0 6px 0; }
@media (max-width: 1199px) { .news-posts .tags .all-tags .kb-etiket { padding: 10px 10px; } }
@media (max-width: 992px)  { .news-posts .tags .all-tags .kb-etiket { padding: 10px 22px; } }

/* Sayfa başlığı bandı: 546 KB JPEG → WebP (masaüstü 112 KB, mobilde ortadan kırpılmış 62 KB).
   background-size:cover olduğu için kırpılmış mobil görsel aynı görünümü verir. main.php'de preload var. */
.sub-banner .banner-img {
  background-image: url("../images/sub-banner.jpg");
  background-image: image-set(url("../images/sub-banner.webp") type("image/webp"), url("../images/sub-banner.jpg") type("image/jpeg"));
}
@media (max-width: 767px) {
  .sub-banner .banner-img {
    background-image: url("../images/sub-banner-mobil.jpg");
    background-image: image-set(url("../images/sub-banner-mobil.webp") type("image/webp"), url("../images/sub-banner-mobil.jpg") type("image/jpeg"));
  }
}

/* "İçeriğe atla" hedefi artık <main>; odaklanınca bütün içeriğin çevresine çerçeve çizilmesin */
#kb-icerik:focus, #kb-icerik:focus-visible { outline: none; }

/* Galeri altyazıları: #E9B947 beyaz zeminde 1.9:1 → koyu altın (5.05:1) */
.our-menu .food-sec .detail span.food-time { color: #8f6813; border-bottom-color: #8f6813; }

/* İletişim ve konuk defteri: tema üstte 120px daha boşluk bırakıyordu; diğer iç
   sayfalardaki gibi başlık bandının hemen altında başlasın (40/56px) */
.contact-page .get-in-touch { padding-top: 0; }

/* YouTube önizlemesi (inc/html-filtre.php 5b, js/kb-perf.js) */
.kb-yt { position: relative; display: block; width: 100%; background: #000; overflow: hidden; border-radius: 4px; margin: 16px 0; }
.kb-yt img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: .88; transition: opacity .2s; }
.kb-yt:hover img, .kb-yt:focus-visible img { opacity: 1; }
.kb-yt-dugme { position: absolute; left: 50%; top: 50%; width: 68px; height: 48px; margin: -24px 0 0 -34px; border-radius: 12px; background: rgba(0,0,0,.72); transition: background .2s; }
.kb-yt:hover .kb-yt-dugme, .kb-yt:focus-visible .kb-yt-dugme { background: #c4302b; }
.kb-yt-dugme::before { content: ""; position: absolute; left: 27px; top: 14px; border-style: solid; border-width: 10px 0 10px 17px; border-color: transparent transparent transparent #fff; }
.kb-yt-iframe { display: block; width: 100%; height: auto; border: 0; margin: 16px 0; }

/* Karuselde yatay sürükleme JS'e, dikey kaydırma tarayıcıya (bkz. js/kb-perf.js) */
.owl-carousel .owl-wrapper-outer { touch-action: pan-y; }

/* Masaüstü/tablet: WhatsApp düğmesi (56 px, sağ-alt, z-index 9999) "yukarı çık"ı
   tamamen örtüyor ve tıklamayı o yakalıyordu. Yukarı çık, WhatsApp'ın 12 px üstünde
   ve aynı dikey eksende. Mobilde WhatsApp alt çubukta olduğu için kural yalnız ≥768 px. */
@media (min-width: 768px) {
  .cd-top { right: 24px !important; bottom: 86px !important; }
}

/* reCAPTCHA artık forma dokununca yükleniyor — kutunun yeri önceden ayrılsın (kayma olmasın) */
.g-recaptcha { min-height: 78px; }

/* "Yukarı çık" artık <button> (önceki <a href="our-story.html#0"> 404'e gidiyordu) */
button.cd-top { border: 0; padding: 0; cursor: pointer; font: inherit; }
button.cd-top:focus-visible { outline: 3px solid #fff; outline-offset: 2px; box-shadow: 0 0 0 5px #8f6813; }

/* reCAPTCHA yüklenene kadar ayrılan 78 px boş kalıyor ve açıklamasız bir boşluk gibi
   görünüyordu. Kutuyla aynı ölçüde (304×78) bir yer tutucu; reCAPTCHA içine iframe
   koyunca :empty eşleşmez ve yer tutucu kendiliğinden kalkar (yükseklik aynı, kayma yok). */
.g-recaptcha:empty {
  display: flex;
  align-items: center;
  max-width: 304px;
  padding: 0 14px;
  border: 1px dashed #d8cfc2;
  border-radius: 4px;
  background: #fbf9f6;
}
.g-recaptcha:empty::before {
  content: "Güvenlik doğrulaması, forma yazmaya başlayınca burada görünecek.";
  font-size: 13px;
  line-height: 1.4;
  color: #6b645a;
}

/* SSS: henüz soru yokken sol sütunda boş-durum bloğu (module/sss.php) */
.kb-sss-bos { padding: 28px; border: 1px solid #ece4d8; border-radius: 8px; background: #fbf9f6; }
.kb-sss-bos h2 { margin: 0 0 10px; }
.kb-sss-bos p { margin: 0 0 16px; }
.kb-sss-eylem { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
@media (max-width: 767px) { .kb-sss-bos { margin-bottom: 28px; } }

/* Harita yüklenene kadar boş beyaz kutu yerine sakin bir zemin (js/kb-perf.js) */
iframe[data-kb-src] { background: #efe9df; }

/* ==========================================================================
   Blog — 2026-09-10 (module/blog.php, module/blogdetay.php)
   ========================================================================== */
.kb-blog { padding: 40px 0 64px; }
.kb-blog-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.kb-blog-kart { display: flex; flex-direction: column; background: #fff; border: 1px solid #ece4d8; border-radius: 10px; overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.kb-blog-kart:hover { box-shadow: 0 10px 26px rgba(28, 26, 23, .10); transform: translateY(-2px); }
.kb-blog-gorsel { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #efe9df; }
.kb-blog-gorsel img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.kb-blog-kart:hover .kb-blog-gorsel img { transform: scale(1.03); }
.kb-blog-govde { display: flex; flex: 1; flex-direction: column; gap: 10px; padding: 20px 22px 22px; }
.kb-blog-meta { margin: 0; font-size: 13px; color: #6b645a; }
.kb-blog-baslik { margin: 0; font-size: 1.25rem; line-height: 1.3; }
.kb-blog-baslik a { color: var(--kb-is, #1c1a17); }
.kb-blog-baslik a:hover, .kb-blog-baslik a:focus-visible { color: #8f6813; }
.kb-blog-ozet { margin: 0; font-size: 15px; line-height: 1.6; color: #3a352e; }
.kb-blog-devam { margin-top: auto; font-weight: 600; color: #8f6813; }
.kb-blog-kart--one { grid-column: 1 / -1; flex-direction: row; }
.kb-blog-kart--one .kb-blog-gorsel { flex: 0 0 55%; aspect-ratio: auto; min-height: 320px; }
.kb-blog-kart--one .kb-blog-govde { justify-content: center; padding: 32px 36px; }
.kb-blog-kart--one .kb-blog-baslik { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.kb-blog-bos { text-align: center; color: #6b645a; }
@media (max-width: 991px) { .kb-blog-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kb-blog-izgara { grid-template-columns: 1fr; gap: 20px; }
  .kb-blog-kart--one { flex-direction: column; }
  .kb-blog-kart--one .kb-blog-gorsel { flex: none; aspect-ratio: 3 / 2; min-height: 0; }
  .kb-blog-kart--one .kb-blog-govde { padding: 20px 22px 22px; }
}
@media (prefers-reduced-motion: reduce) { .kb-blog-kart, .kb-blog-gorsel img { transition: none; } .kb-blog-kart:hover { transform: none; } }

/* Sayfalama (inc/sayfalama.php) — ikon fontuna bağlı değil, dokunma hedefi 44 px */
.kb-sayfalama { margin-top: 40px; text-align: center; }
.kb-sayfalama .pagination { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 0; }
.kb-sayfalama .pagination > li > a,
.kb-sayfalama .pagination > li > span { float: none; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; margin: 0; padding: 0 14px; border: 1px solid #e4dccf; border-radius: 8px !important; background: #fff; color: #3a352e; font-weight: 600; line-height: 1; }
.kb-sayfalama .pagination > li > a:hover,
.kb-sayfalama .pagination > li > a:focus-visible { background: #fbf6ec; border-color: #8f6813; color: #8f6813; }
.kb-sayfalama .pagination > li > span[aria-current] { background: #8f6813; border-color: #8f6813; color: #fff; }

/* Yazı sayfası */
.kb-yazi-sayfa { padding-bottom: 48px; }
.kb-yazi-meta { margin: 0 0 18px; font-size: 14px; color: #6b645a; }
.kb-yazi-kapak { margin: 0 0 24px; border-radius: 10px; overflow: hidden; }
.kb-yazi-kapak img { display: block; width: 100%; height: auto; }
.kb-yazi-giris { margin: 0 0 20px; font-size: 1.15rem; line-height: 1.6; color: #1c1a17; }
.kb-yazi-icerik { font-size: 17px; line-height: 1.75; color: #2b2723; overflow-wrap: anywhere; }
.kb-yazi-icerik h2 { margin: 36px 0 12px; font-size: clamp(1.35rem, 2vw, 1.7rem); }
.kb-yazi-icerik h3 { margin: 26px 0 10px; font-size: 1.2rem; }
.kb-yazi-icerik p { margin: 0 0 16px; font-size: inherit; line-height: inherit; }
.kb-yazi-icerik ul, .kb-yazi-icerik ol { margin: 0 0 18px 1.2em; padding: 0; }
.kb-yazi-icerik li { margin: 0 0 8px; }
.kb-yazi-icerik img { max-width: 100%; height: auto; border-radius: 8px; }
.kb-yazi-icerik table { width: 100%; margin: 0 0 20px; border-collapse: collapse; font-size: 15px; }
.kb-yazi-icerik th, .kb-yazi-icerik td { padding: 10px 12px; border: 1px solid #e4dccf; text-align: left; vertical-align: top; }
.kb-yazi-icerik th { background: #fbf6ec; }
.kb-yazi-icerik blockquote { margin: 0 0 20px; padding: 14px 18px; border-left: 4px solid #8f6813; background: #fbf9f6; }
.kb-yazi-icerik a { color: #8f6813; text-decoration: underline; text-underline-offset: 2px; }
.kb-yazi-cta { margin: 36px 0 0; padding: 24px 26px; border-radius: 10px; background: #1c1a17; color: #f5efe6; }
.kb-yazi-cta p { margin: 0 0 14px; }
.kb-yazi-cta-baslik { margin: 0 0 6px !important; font-family: var(--kb-font-baslik); font-size: 1.35rem; color: #fff; }
.kb-yazi-cta-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 !important; }
.kb-ilgili { margin-top: 48px; }
.kb-ilgili > h2 { margin: 0 0 18px; }
.kb-ilgili .kb-blog-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.kb-ilgili .kb-blog-baslik { font-size: 1.05rem; }
.kb-ilgili .kb-blog-govde { padding: 14px 16px 16px; }
@media (max-width: 767px) { .kb-ilgili .kb-blog-izgara { grid-template-columns: 1fr; } }

/* Blog yazı bileşenleri — 2026-09-10 (_yedek-bilgi/blog-icerik/yazilar.py) */
.kb-yazi-icerik .kb-kisaca { margin: 0 0 22px; padding: 16px 18px; border-left: 4px solid #8f6813; border-radius: 6px; background: #fbf6ec; }
.kb-yazi-icerik table caption { caption-side: top; padding: 0 0 8px; text-align: left; font-weight: 600; color: #3a352e; }
.kb-yazi-icerik .kb-sozluk { margin: 0 0 22px; }
.kb-yazi-icerik .kb-sozluk dt { margin-top: 14px; font-weight: 700; color: #1c1a17; }
.kb-yazi-icerik .kb-sozluk dd { margin: 2px 0 0; }
.kb-yazi-icerik .kb-zaman { list-style: none; margin: 0 0 20px; padding-left: 18px; border-left: 2px solid #e4dccf; }
.kb-yazi-icerik .kb-zaman li { margin-bottom: 10px; }
.kb-yazi-icerik .kb-sss-bolum { margin-top: 40px; padding: 22px 26px 8px; border: 1px solid #ece4d8; border-radius: 10px; background: #fbf9f6; }
.kb-yazi-icerik .kb-sss-bolum h2 { margin-top: 0; }
.kb-yazi-icerik .kb-sss-bolum h3 { margin: 18px 0 6px; font-size: 1.08rem; }

/* Öne çıkan kart: görsel kutuyu tamamen kaplasın (height:100% esnek satırda çözülmüyordu, üst/altta boşluk kalıyordu) */
.kb-blog-kart--one .kb-blog-gorsel { position: relative; }
.kb-blog-kart--one .kb-blog-gorsel img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@media (max-width: 640px) { .kb-blog-kart--one .kb-blog-gorsel img { position: static; } }

/* ==========================================================================
   Alt sayfalar — 2026-09-11 (denetim: scratchpad/denetim-ust ölçümleri)
   ========================================================================== */

/* 1) Sayfa başlığı bandı: içerik artık akışta; bant uzun başlığa göre uzar.
      .detail "position:absolute; top:220px" idi — iki satırlık başlıklarda
      breadcrumb 505px'lik bandın altına, beyaz zemine taşıyordu (ölçüm: 524–555px). */
.sub-banner {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: auto;
  min-height: 505px;
  padding: 112px 0 64px;
  overflow: hidden;
}
.sub-banner .banner-img { position: absolute; inset: 0; width: auto; height: auto; z-index: 0; }
.sub-banner::before { z-index: 1; }
.sub-banner > .container { position: relative; z-index: 2; width: 100%; }
.sub-banner .detail { position: static; top: auto; left: auto; right: auto; width: auto; }
.sub-banner .detail ul {
  float: none;
  margin: 18px 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2px;
}
.sub-banner .detail ul li { float: none; }
@media (max-width: 767px) {
  .sub-banner { min-height: 380px; padding: 100px 0 56px; }
  .sub-banner .detail { top: auto; }
}

/* 2) İletişim / konuk defteri formu: metin kutuları 23px'e çöküyordu.
      Eski temanın input[type=text] kuralı dikey dolguyu sıfırlıyor, önceki
      düzeltme de height:auto veriyordu; e-posta/telefon alanları 47px kalıyordu. */
.contact-page .get-in-touch .get-touch-form .kb-form input[type="text"],
.contact-page .get-in-touch .get-touch-form .kb-form input[type="email"],
.contact-page .get-in-touch .get-touch-form .kb-form input[type="tel"],
.contact-page .get-in-touch .get-touch-form .kb-form textarea {
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid var(--kb-cizgi, #e4ded4);
  border-radius: var(--kb-yuvarlak, 10px);
  background: #fff;
  color: var(--kb-koyu, #1c1a17);
  font-size: 15px;
  line-height: 1.4;
}
.contact-page .get-in-touch .get-touch-form .kb-form textarea { min-height: 140px; }
@media (max-width: 767px) {
  .contact-page .get-in-touch .get-touch-form .kb-form input,
  .contact-page .get-in-touch .get-touch-form .kb-form textarea { font-size: 16px; }  /* iOS yakınlaştırmasın */
}
.contact-page .get-in-touch { padding: clamp(44px, 6vw, 88px) 0; }

/* İkincil (açık) buton */
.kb-btn-acik { background: #fff; color: #1c1a17; border: 1px solid #d9cfbf; box-shadow: none; }
.kb-btn-acik:hover, .kb-btn-acik:focus-visible { background: #f7f1e6; color: #1c1a17; }

/* 3) İletişim bilgileri kartı (iletisim.php, defteryaz.php) */
.kb-iletisim-bilgi h2 { margin: 0 0 10px; }
.kb-iletisim-ozet { margin: 0 0 16px; font-size: 16px; line-height: 1.65; color: #3a352e; }
.kb-iletisim-liste { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.kb-iletisim-liste li {
  padding: 14px 16px;
  border: 1px solid #ece4d8;
  border-radius: 10px;
  background: #fbf9f6;
  font-size: 16px;
  line-height: 1.55;
  color: #2b2723;
}
.kb-il-etiket {
  display: block;
  margin-bottom: 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b645a;
}
.kb-iletisim-liste a, .kb-defter-ek a { color: #8f6813; font-weight: 600; text-underline-offset: 2px; }
.kb-iletisim-liste a:hover, .kb-defter-ek a:hover { text-decoration: underline; }
.kb-iletisim-dugmeler { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; }
.kb-defter-ek { margin: 18px 0 0; font-size: 15px; line-height: 1.6; color: #3a352e; }
.get-in-touch .col-md-6 > h2.kb-h3 { margin: 0 0 6px; }
@media (max-width: 991px) { .get-in-touch .col-md-6 + .col-md-6 { margin-top: 36px; } }

/* 4) İçerik sayfaları (menu, menuicerik) blog yazısı düzeninde */
.kb-yazi-sayfa { padding-top: clamp(40px, 5vw, 72px); }
.kb-yazi-kapak img { aspect-ratio: 3 / 2; object-fit: cover; height: auto; }
.kb-yazi-icerik > div:not([class]) { margin: 0 0 14px; }
.kb-yazi-icerik > :first-child { margin-top: 0; }
.kb-yazi-icerik h1 { margin: 36px 0 12px; font-size: clamp(1.35rem, 2vw, 1.7rem); }

/* 5) Kenar çubuğu: görsel solda, başlık kendi sütununda (float yüzünden başlığın
      ikinci satırı görselin altına kayıyordu) */
.news-posts h2.bar-title {
  margin: 0 0 4px;
  padding: 0 0 10px;
  background: none;
  color: #1c1a17;
  font-size: 1.35rem;
  line-height: 1.3;
  border-bottom: 2px solid #e9b947;
}
.news-posts .recent-posts .post-sec {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin: 16px 0 0;
}
.news-posts .recent-posts .post-sec img {
  float: none;
  display: block;
  width: 84px;
  height: 63px;
  margin: 0;
  object-fit: cover;
  border-radius: 8px;
}
.news-posts .recent-posts .post-sec a.title {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15.5px;
  line-height: 1.4;
  font-weight: 600;
  color: #221e19;
}
.news-posts .recent-posts .post-sec a.title:hover { color: #8f6813; }
.kb-kenar-tumu { margin: 16px 0 0; }
.kb-kenar-tumu a { font-weight: 600; color: #8f6813; }
.kb-kenar-kart {
  margin-top: 36px;
  padding: 22px 22px 20px;
  border: 1px solid #ece4d8;
  border-radius: 12px;
  background: #fbf9f6;
}
.news-posts .kb-kenar-kart h2.bar-title { padding: 0; margin: 0 0 6px; border-bottom: 0; }
.kb-kenar-kart p { margin: 0 0 12px; font-size: 15px; line-height: 1.6; color: #3a352e; }
.kb-kenar-bilgi { list-style: none; margin: 0 0 16px; padding: 0; font-size: 15px; line-height: 1.55; }
.kb-kenar-bilgi li { margin: 0 0 10px; }
.kb-kenar-bilgi span {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6b645a;
}
.kb-kenar-bilgi a { color: #8f6813; font-weight: 600; }
.kb-kenar-kart .kb-kenar-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
@media (max-width: 991px) { .kb-kenar { margin-top: 44px; } }

/* 6) Galeri ızgarası */
.our-menu.kb-galeri-sayfa { padding: clamp(40px, 5vw, 72px) 0; }
.kb-galeri-giris { max-width: 720px; margin: 0 auto 28px; text-align: center; font-size: 16px; line-height: 1.65; color: #3a352e; }
.kb-galeri-izgara {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.kb-galeri-izgara li { margin: 0; }
.kb-galeri-izgara .example-image-link {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 12px;
  background: #efe9df;
}
.kb-galeri-izgara .example-image-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}
.kb-galeri-izgara .example-image-link:hover img,
.kb-galeri-izgara .example-image-link:focus-visible img { transform: scale(1.04); }
.kb-galeri-izgara .example-image-link:focus-visible { outline: 3px solid #e9b947; outline-offset: 2px; }
@media (max-width: 991px) { .kb-galeri-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
@media (max-width: 479px) { .kb-galeri-izgara { gap: 8px; } .kb-galeri-izgara .example-image-link { border-radius: 8px; } }
@media (prefers-reduced-motion: reduce) { .kb-galeri-izgara .example-image-link img { transition: none; } }

/* Yazı içi video (yazı 27'deki sahibin YouTube videosu, 2026-09-11 geri eklendi).
   .kb-video anasayfa tanıtım videosunun sınıfı — çakışmasın diye ayrı ad. */
.kb-yazi-icerik .kb-yazi-video { margin: 0 0 24px; }
.kb-yazi-icerik .kb-yazi-video .kb-yt,
.kb-yazi-icerik .kb-yazi-video .kb-yt-iframe { margin: 0; border-radius: 10px; }
.kb-yazi-icerik .kb-yazi-video figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; color: #6b645a; }

/* ==========================================================================
   Anasayfa sosyal kanıt — 2026-09-11
   Ünlü misafirler şeridi + Google puan rozeti + Google yorumları bölümü.
   ========================================================================== */

/* Yıldız göstergesi: --dolu = puan / 5 (ör. 4,6 → %92). Beş yıldızın dolu kısmı altın. */
.kb-yildiz {
  display: inline-block;
  font-style: normal;
  line-height: 1;
  letter-spacing: 2px;
  background: linear-gradient(90deg, #e9b947 var(--dolu, 100%), #d9d2c5 var(--dolu, 100%));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kb-yildiz::before { content: "\2605\2605\2605\2605\2605"; }

/* --- Tanıtım şeridindeki Google rozeti ------------------------------- */
.kb-serit-puan {
  display: flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 6px 12px;
  border: 1px solid #e6d7b4;
  border-radius: 999px;
  background: #fff;
  color: #1c1a17;
  font-size: 14px;
  line-height: 1.3;
  text-decoration: none;
}
.kb-serit-puan:hover, .kb-serit-puan:focus-visible { border-color: #c99a2e; color: #1c1a17; text-decoration: none; }
.kb-serit-puan .kb-yildiz { font-size: 15px; }
.kb-serit-puan b { font-weight: 800; }
.kb-serit-puan em { font-style: normal; color: #4a443c; }
@media (max-width: 767px) { .kb-serit-puan { margin: 10px auto 0; } }

/* --- Ünlü misafirler şeridi ------------------------------------------ */
.kb-unlu {
  --kb-unlu-kenar: 15px;
  position: relative;
  padding: clamp(48px, 6vw, 84px) 0 clamp(36px, 5vw, 60px);
  background: #17140f;
  color: #efe8dc;
  overflow: hidden;
}
.kb-unlu::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(233, 185, 71, .20), transparent 55%),
    radial-gradient(ellipse at 92% 100%, rgba(143, 104, 19, .24), transparent 50%);
  pointer-events: none;
}
.kb-unlu > * { position: relative; }
/* Şerit, başlıkla aynı hizadan başlasın: temanın container genişlikleri 750 / 970 / 1200 px.
   100% (100vw değil): kaydırma alanının genişliği — Windows kaydırma çubuğu hizayı kaydırmaz. */
@media (min-width: 768px)  { .kb-unlu { --kb-unlu-kenar: calc((100% - 750px) / 2 + 15px); } }
@media (min-width: 992px)  { .kb-unlu { --kb-unlu-kenar: calc((100% - 970px) / 2 + 15px); } }
@media (min-width: 1200px) { .kb-unlu { --kb-unlu-kenar: calc((100% - 1200px) / 2 + 15px); } }
.kb-unlu-bas { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: 26px; }
.kb-unlu-ust { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #e9b947; }
.kb-unlu h2 { margin: 0; color: #fff; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1.1; }
.kb-unlu-aciklama { margin: 12px 0 0; max-width: 560px; font-size: 16px; line-height: 1.6; color: #d9d0c1; }
.kb-unlu-oklar { display: flex; gap: 10px; }
.kb-unlu-ok {
  width: 48px;
  height: 48px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s, color .2s, border-color .2s;
}
.kb-unlu-ok:hover:not([disabled]), .kb-unlu-ok:focus-visible { background: #e9b947; border-color: #e9b947; color: #17140f; }
.kb-unlu-ok:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.kb-unlu-ok[disabled] { opacity: .35; cursor: default; }
.kb-unlu-serit {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--kb-unlu-kenar);
  scrollbar-width: thin;
  scrollbar-color: rgba(233, 185, 71, .55) transparent;
  padding: 6px 0 18px;
}
.kb-unlu-liste { display: flex; gap: 14px; width: max-content; margin: 0; padding: 0 var(--kb-unlu-kenar); list-style: none; }
.kb-unlu-liste li { flex: 0 0 auto; margin: 0; scroll-snap-align: start; }
.kb-unlu-liste a {
  position: relative;
  display: block;
  width: calc(var(--w, 270) * 1px);
  height: 360px;
  overflow: hidden;
  border-radius: 14px;
  background: #2a251e;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .38);
}
.kb-unlu-liste picture { display: block; height: 100%; }
.kb-unlu-liste img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .45s ease; }
.kb-unlu-liste a:hover img, .kb-unlu-liste a:focus-visible img { transform: scale(1.04); }
.kb-unlu-liste a:focus-visible { outline: 3px solid #e9b947; outline-offset: 3px; }
.kb-unlu-ad {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 30px 14px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .78), rgba(0, 0, 0, 0));
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
}
/* Telefonda kart ekranın %78'ini geçmez: sağda bir sonraki fotoğraf hep görünür (kaydırma ipucu).
   Geniş fotoğraf kenarlarından kırpılır (object-fit: cover). */
@media (max-width: 767px) {
  .kb-unlu-liste { gap: 10px; }
  .kb-unlu-liste a { width: min(calc(var(--w, 270) * 280px / 360), 78vw); height: 280px; border-radius: 12px; }
}

/* Açık ipucu etiketi */
.kb-unlu-ipucu {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 7px 14px 7px 10px;
  border-radius: 999px;
  background: rgba(233, 185, 71, .14);
  color: #f3e2b6;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.kb-unlu-ipucu svg { flex: 0 0 auto; width: 20px; height: 20px; color: #e9b947; animation: kb-ipucu 1.6s ease-in-out infinite; }
@keyframes kb-ipucu { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(5px); } }

/* Şeridin altındaki denetim satırı: konum çubuğu + sayaç + oklar */
.kb-unlu-kontrol { display: flex; align-items: center; gap: 16px; margin-top: 16px; }
.kb-unlu-ilerleme { position: relative; flex: 1 1 auto; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.kb-unlu-ilerleme span { position: absolute; top: 0; left: 0; width: 25%; height: 100%; border-radius: inherit; background: #e9b947; }
.kb-unlu-sayac { min-width: 54px; font-size: 14px; font-weight: 600; color: #d9d0c1; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 767px) { .kb-unlu-ok { width: 44px; height: 44px; font-size: 24px; } .kb-unlu-kontrol { gap: 12px; } }
/* Sağ alttaki sabit düğmeler ("yukarı çık", masaüstünde WhatsApp) okları örtmesin: satırın
   sağında düğmeler kadar yer bırakılır. Telefon: düğme right 14 + 44 px; >=768: right 24 + 44 px
   (+ pay). Container kenarı ekran kenarından yeterince uzaksa pay 0'a iner. */
.kb-unlu-kontrol { padding-right: 50px; }
@media (min-width: 768px)  { .kb-unlu-kontrol { padding-right: max(0px, calc(80px - (100vw - 750px) / 2 - 15px)); } }
@media (min-width: 992px)  { .kb-unlu-kontrol { padding-right: max(0px, calc(80px - (100vw - 970px) / 2 - 15px)); } }
@media (min-width: 1200px) { .kb-unlu-kontrol { padding-right: max(0px, calc(80px - (100vw - 1200px) / 2 - 15px)); } }

/* İlk görünüşte bir kez hafifçe kıpırdar (yalnız dokunmatik / dar ekran; JS ekler) */
@keyframes kb-durt { 0%, 100% { transform: translateX(0); } 35%, 60% { transform: translateX(-64px); } }
.kb-unlu-liste.kb-durt { animation: kb-durt 1.3s ease-in-out 1; }

@media (prefers-reduced-motion: reduce) {
  .kb-unlu-liste img, .kb-unlu-ok { transition: none; }
  .kb-unlu-ipucu svg, .kb-unlu-liste.kb-durt { animation: none; }
}

/* --- Google yorumları bölümü ----------------------------------------- */
.kb-yorum { padding: clamp(48px, 6vw, 84px) 0; background: var(--kb-krem-koyu, #f7f1e6); }
.kb-yorum-ozet {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
  gap: 24px 44px;
  align-items: center;
  max-width: 880px;
  margin: 28px auto 0;
  padding: 28px clamp(20px, 4vw, 40px);
  border: 1px solid #ece4d8;
  border-radius: 16px;
  background: #fff;
  box-shadow: var(--kb-golge, 0 8px 24px rgba(28, 26, 23, .08));
}
.kb-yorum-ozet--tek { grid-template-columns: 1fr; text-align: center; }
.kb-yorum-puan { text-align: center; }
.kb-yorum-puan b { display: block; font-family: var(--kb-font-baslik, Georgia, serif); font-size: 4.2rem; font-weight: 700; line-height: 1; color: #1c1a17; }
.kb-yorum-puan .kb-yildiz { margin-top: 8px; font-size: 26px; letter-spacing: 3px; }
.kb-yorum-sayi { display: block; margin-top: 8px; font-size: 15px; font-weight: 600; color: #3a352e; }
.kb-yorum-dagilim { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.kb-yorum-dagilim li { display: grid; grid-template-columns: 62px minmax(0, 1fr) 40px; gap: 12px; align-items: center; font-size: 14px; color: #3a352e; }
.kb-yorum-dagilim li > span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.kb-cubuk { display: block; height: 10px; overflow: hidden; border-radius: 99px; background: #efe9df; }
.kb-cubuk i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e9b947, #c99a2e); }
.kb-yorum-eylem { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 4px 0 0; }
.kb-yorum-kartlar { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 1100px; margin: 26px auto 0; }
.kb-yorum-kart { margin: 0; padding: 20px 22px; border: 1px solid #ece4d8; border-radius: 14px; background: #fff; }
.kb-yorum-kart .kb-yildiz { font-size: 17px; }
.kb-yorum-kart blockquote { margin: 10px 0 12px; padding: 0; border: 0; font-size: 15.5px; line-height: 1.6; color: #2b2723; }
.kb-yorum-kart figcaption { font-size: 14px; font-weight: 600; color: #4a443c; }
.kb-yorum-kart figcaption a { color: #8f6813; }
.kb-yorum .kb-yorum-kaynak { margin: 16px 0 0; text-align: center; font-size: 13px; color: #5f584e; }
@media (max-width: 640px) {
  .kb-yorum-ozet { grid-template-columns: 1fr; }
  .kb-yorum-puan b { font-size: 3.4rem; }
}

/* ==========================================================================
   Formlar: görünür yer tutucular + tek ölçüde alanlar — 2026-09-11
   Eski temanın dropmenu.css'i tüm sayfada yer tutucuları BEYAZ yapıyordu
   (::-webkit-input-placeholder { color:#fff }): beyaz kutularda "Adınız Soyadınız",
   "05XX…" gibi yazılar görünmüyor, kutular boş duruyordu. Rezervasyon formundaki
   alanlar da eski tema kurallarıyla 15/16/17 px yazı, 47/50/58 px yükseklikteydi.
   Yer tutucu rengi yalnız sitenin kendi formlarında (.kb-form) değişir.
   ========================================================================== */
.kb-form input::-webkit-input-placeholder, .kb-form textarea::-webkit-input-placeholder { color: #756c62; opacity: 1; }
.kb-form input::-moz-placeholder, .kb-form textarea::-moz-placeholder { color: #756c62; opacity: 1; }
.kb-form input::placeholder, .kb-form textarea::placeholder { color: #756c62; opacity: 1; }

/* Rezervasyon formu: bütün alanlar aynı yükseklik, yazı ve çerçeve */
.book-table .booking-form .kb-form input[type="text"],
.book-table .booking-form .kb-form input[type="tel"],
.book-table .booking-form .kb-form input[type="email"],
.book-table .booking-form .kb-form select,
.book-table .booking-form .kb-form textarea {
  width: 100%;
  min-height: 52px;
  height: auto;
  padding: 13px 16px;
  border: 1px solid #d9d0c3;
  border-radius: var(--kb-yuvarlak, 10px);
  background-color: #fff;
  color: #1c1a17;
  font-size: 16px !important;
  line-height: 1.4;
}
.book-table .booking-form .kb-form textarea { min-height: 96px; }
/* Açılır kutu: seçilen değer kalın; "Saat seçiniz" gibi boş seçenek (required + boş değer = :invalid) soluk */
.book-table .booking-form .kb-form select { padding-right: 46px; background-position: right 14px center; background-size: 20px; font-weight: 700; }
.book-table .booking-form .kb-form select:invalid { color: #5f574e; font-weight: 500; }
.book-table .booking-form .kb-form select option { color: #1c1a17; font-weight: 500; }
@media (max-width: 767px) {
  .book-table .booking-form .kb-form input[type="text"],
  .book-table .booking-form .kb-form input[type="tel"],
  .book-table .booking-form .kb-form input[type="email"],
  .book-table .booking-form .kb-form select,
  .book-table .booking-form .kb-form textarea { min-height: 56px; font-size: 18px !important; }
  .book-table .booking-form .kb-form textarea { min-height: 104px; }
  .book-table .booking-form .kb-label { font-size: 15px; }
}

/* Rezervasyon bölümünün üstündeki boş ara öğeler (#book-table çapası + .height35) ".content > div"
   bölüm dolgusunu alıp 160 px boş şerit oluşturuyordu. Çapa kalır (üst menüdeki gizli
   "Rezervasyon Yap" bağlantısının hedefi) ama yer kaplamaz. — 2026-09-11 */
.content > #book-table { height: 0; margin: 0; padding: 0 !important; }
.content > #book-table + .height35 { display: none; }
/* Rezervasyon sarmalayıcısı da ".content > div" dolgusunu alıp üstte/altta beyaz şerit bırakıyordu
   (telefonda 40, masaüstünde 56 px); koyu arka planlı bölümün kendi 66 px iç boşluğu yeterli. */
.content > .book-table { padding-top: 0; padding-bottom: 0; }

/* ==========================================================================
   Saat / kişi seçici (js/kb-secici.js) — 2026-09-11
   Tarayıcının açılır listesi yerine sayfanın içinde açılan büyük düğmeli panel.
   Kullanıcı geri bildirimi: telefonda açılan listedeki yazılar çok küçüktü.
   ========================================================================== */
.kb-secici-dugme {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 52px;
  padding: 13px 46px 13px 16px;
  border: 1px solid #d9d0c3;
  border-radius: var(--kb-yuvarlak, 10px);
  background: #fff url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b6560' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 20px;
  color: #5f574e;
  font: inherit;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.kb-secici-dugme.kb-secili { color: #1c1a17; font-weight: 700; }
.kb-secici-dugme[aria-expanded="true"] { border-color: #e9b947; box-shadow: 0 0 0 3px rgba(233, 185, 71, .25); }
.kb-secici-dugme:focus-visible { outline: none; border-color: #c99a2e; box-shadow: 0 0 0 3px rgba(233, 185, 71, .4); }
.kb-secici-panel {
  margin-top: 8px;
  padding: 12px;
  border: 1px solid #e6dccd;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(28, 26, 23, .14);
  scroll-margin-top: 96px;
  scroll-margin-bottom: 84px;   /* telefondaki alt çubuğun arkasında kalmasın */
}
.kb-secici-grup { margin: 2px 2px 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6b645a; text-align: left; }
.kb-secici-izgara + .kb-secici-grup { margin-top: 14px; }
.kb-secici-izgara { display: grid; grid-template-columns: repeat(var(--sutun, 4), minmax(0, 1fr)); gap: 8px; }
.kb-secenek {
  width: 100%;          /* ızgarada <button> kendiliğinden genişlemiyordu: düğmeler dar ve düzensizdi */
  min-height: 46px;
  padding: 8px 4px;
  border: 1px solid #ddd3c4;
  border-radius: 10px;
  background: #fbf9f6;
  color: #1c1a17;
  font: inherit;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.kb-secenek:hover { border-color: #c99a2e; background: #fff7e6; }
.kb-secenek:focus-visible { outline: 3px solid #e9b947; outline-offset: 1px; }
.kb-secenek[aria-pressed="true"] { border-color: #1c1a17; background: #1c1a17; color: #fff; }
/* Masaüstünde form iki sütun: dar sütunda saat düğmeleri sığsın */
@media (min-width: 768px) { .kb-secenek { font-size: 15px; } .kb-secici-panel { padding: 10px; } .kb-secici-izgara { gap: 6px; } }
@media (max-width: 767px) {
  .kb-secici-dugme { min-height: 56px; font-size: 18px; }
  .kb-secenek { min-height: 50px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .kb-secici-dugme { transition: none; } }