/* =====================================================================
   Hindiba — Golden-ratio Refinement Layer
   ---------------------------------------------------------------------
   Damai temasinin uzerine binen, temaya SADIK ince ayar katmani.
   - Mevcut --title-size / --gap moduler sistemini bozmaz; uzerine altin
     oran (phi = 1.618) tabanli bosluk + oran token'lari ekler.
   - En SON yuklenir; bu yuzden hedefli override'lar kazanir.
   Bolumler: 1) Token'lar  2) Tipografi ritmi  3) Anasayfa intro gorselleri
   4) Image-split  5) Kartlar (oda/blog/galeri/surdurulebilirlik)
   6) Breadcrumb  7) Bug fix'ler
   ===================================================================== */

/* ---------- 1) GOLDEN-RATIO TOKEN'LARI ---------- */
:root {
   --phi: 1.618;

   /* Altin oran bosluk merdiveni — temanin --gap'inden turetilir.
      phi kuvvetleri: 0.382=1/phi^2, 1=taban, 1.618=phi, 2.618=phi^2, 4.236=phi^3 */
   --space-1: calc(var(--gap) * 0.382);
   --space-2: var(--gap);
   --space-3: calc(var(--gap) * 1.618);
   --space-4: calc(var(--gap) * 2.618);
   --space-5: calc(var(--gap) * 4.236);

   /* Modern kart sistemi (referans: oda karti) */
   --card-radius: 20px;
   --card-radius-sm: 14px;
   --card-bg: #ffffff;
   --card-border: 1px solid rgba(50, 32, 24, 0.06);
   --card-shadow: 0 4px 24px rgba(50, 32, 24, 0.07);
   --card-shadow-hover: 0 18px 44px rgba(50, 32, 24, 0.13);
   --card-ease: cubic-bezier(0.3, 1, 0.3, 1);

   /* Editoryel figurler icin hafif kose yumusatma (tema geneli keskin kalir) */
   --figure-radius: 12px;

   /* Bug fix: blog-card CTA tanimsiz --color-accent'e basvuruyordu -> tema terrakotasi */
   --color-accent: var(--color-primary);

   /* Yesil buton rengi (kullanici talebi): canli destek butonundaki yesil ton.
      butterflygreen token'lari sitede her yerde kullanilir (.btn.secondary,
      .room-booking-submit, iletisim/cerez/whatsapp butonlari) -> hepsi bu yesile doner.
      Diger renkler (terrakota primary, teal secondary) aynen kalir. */
   --color-butterflygreen-900: #657335;
   --color-butterflygreen-700: #829446;
}

/* ---------- 2) TIPOGRAFI RITMI (modern, temaya sadik) ---------- */
/* Baslik: daha sik satir + zarif harf araligi (serif display modernlesir) */
h1, h2, h3, h4, h2.big {
   line-height: 1.14;
   letter-spacing: -0.01em;
}
h1, h2.big {
   letter-spacing: -0.018em;
}

/* Govde metni: daha rahat satir araligi + okunabilir olcu (measure) */
p {
   line-height: 1.62;
}
.styled-content p + p {
   margin-top: 0.9em;
}
/* Ortalanmis basliklarda metin satiri cok uzamasin (altin-okuma olcusu ~34em) */
.row.centered .col-row-text,
.row.centered .styled-content {
   max-width: 34em;
   margin-left: auto;
   margin-right: auto;
}

/* ---------- 3) ANASAYFA INTRO GORSELLERI (ana sorun: cok kucuk + bosluk) ---------- */
/* Figurlere net yukseklik (aspect-ratio) ver — bos figur cokmez, gorsel kirpilir.
   Tum ekranlarda gecerli (gorsel kalite iyilesmesi). */
.section-home-intro .styled-figure {
   aspect-ratio: 4 / 5;
   height: auto;
   border-radius: var(--figure-radius);
   overflow: hidden;
}
.section-home-intro .styled-figure > picture,
.section-home-intro .styled-figure > picture > img,
.section-home-intro .styled-figure > img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}
/* Merkez metin sutunu: altin dikey ritim + ferah olcu */
.section-home-intro .styled-col {
   gap: var(--space-3);
}
.section-home-intro .styled-col .col-row-text {
   max-width: 30em;
}
/* Buyutme + bosluk: SADECE masaustu — temanin tablet/mobil kurallari korunur */
@media screen and (min-width: 1025px) {
   /* Dikey bosluk --section-padding kadardi (devasa) -> phi merdivenine cek */
   .section-home-intro .col-images-left,
   .section-home-intro .col-images-right {
      gap: var(--space-4);
      justify-content: center;
   }
   /* "Ana" figur sutunu doldursun; "aksan" figur 40% -> altin oran 61.8% */
   .section-home-intro .col-images-left .col-row:nth-child(2) figure,
   .section-home-intro .col-images-right .col-row:nth-child(1) figure {
      width: 100%;
   }
   .section-home-intro .col-images-left .col-row:nth-child(1) figure,
   .section-home-intro .col-images-right .col-row:nth-child(2) figure {
      width: 61.8%;
   }
}

/* Intro-after: aralik phi merdivenine */
.section-home-intro-after {
   padding-top: var(--space-3);
   padding-bottom: var(--space-3);
}

/* ---------- 4) IMAGE-SPLIT (Karakazan / Hakkimizda gorselleri) ---------- */
.section-image-split .col-image .styled-figure {
   aspect-ratio: 1 / 1;
   height: auto;
   border-radius: var(--figure-radius);
   overflow: hidden;
}
.section-image-split .col-image .styled-figure > picture,
.section-image-split .col-image .styled-figure > picture > img,
.section-image-split .col-image .styled-figure > img {
   position: absolute;
   inset: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}

/* ---------- 5) KARTLAR — tek modern aile (referans: oda karti) ---------- */
/* Blog & galeri kartlari beyaz zemin + 20px + ortak golge + -6px hover */
.blog-card__link,
.gallery-grid__item {
   background: var(--card-bg);
   border: var(--card-border);
   border-radius: var(--card-radius);
   box-shadow: var(--card-shadow);
   overflow: hidden;
   transition: transform 0.35s var(--card-ease), box-shadow 0.35s var(--card-ease);
}
.blog-card__link:hover,
.gallery-grid__item:hover {
   transform: translateY(-6px);
   box-shadow: var(--card-shadow-hover);
}

/* Blog: gorsel kucuk kaliyordu -> daha bol oran (3/2) + 1200px alti 2 sutun */
.blog-card__media {
   aspect-ratio: 3 / 2;
   background: var(--color-light, #eae5df);
}
.blog-card__img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}
/* 641-1200px: 2 sutun. Temanin <=640px -> 1 sutun kuralini EZME (kaynak sirasi). */
@media screen and (min-width: 641px) and (max-width: 1200px) {
   .blog-card-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

/* Galeri: 4 sutun -> 3 sutun (her foto ~%33 daha genis). Temanin 2/1 merdivenini koru. */
.gallery-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr));
}
.gallery-grid__thumb {
   aspect-ratio: 4 / 3;
   background: var(--color-light, #eae5df);
}
.gallery-grid__thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
}
@media screen and (max-width: 991px) {
   .gallery-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}
@media screen and (max-width: 575px) {
   .gallery-grid {
      grid-template-columns: 1fr;
   }
}

/* Surdurulebilirlik kartlari: gorseli yok -> markali tinted ikon bandi */
.sustainability-report-card__icon {
   width: 72px;
   height: 72px;
   padding: 18px;
   border-radius: var(--card-radius-sm);
   background: rgba(144, 60, 2, 0.08);
   color: var(--color-primary, #903c02);
   transition: background 0.35s var(--card-ease);
}
.sustainability-report-card:hover .sustainability-report-card__icon {
   background: rgba(144, 60, 2, 0.14);
}

/* ---------- 6) BREADCRUMB (interior sayfa basliklari) ---------- */
.breadcrumb {
   margin-bottom: var(--space-2);
}
.row.centered .breadcrumb,
.about-hero-inner .breadcrumb {
   text-align: center;
}
.breadcrumb__list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 0;
}
.row.centered .breadcrumb__list,
.about-hero-inner .breadcrumb__list {
   justify-content: center;
}
.breadcrumb__item {
   display: inline-flex;
   align-items: center;
   text-transform: uppercase;
   letter-spacing: calc(0.65em * 0.12);
   font-size: 0.65em;
   line-height: 1;
   font-weight: 400;
}
.breadcrumb__link {
   color: var(--color-secondary);
   transition: opacity 0.2s ease;
}
.breadcrumb__link:hover {
   opacity: 0.6;
}
.breadcrumb__sep {
   margin: 0 0.6em;
   color: rgba(var(--color-dark-rgb), 0.3);
}
.breadcrumb__current {
   color: rgba(var(--color-dark-rgb), 0.45);
}
[data-theme-section="dark"] .breadcrumb__link {
   color: rgba(var(--color-white-rgb), 0.85);
}
[data-theme-section="dark"] .breadcrumb__sep,
[data-theme-section="dark"] .breadcrumb__current {
   color: rgba(var(--color-white-rgb), 0.6);
}

/* ---------- 8) ANASAYFA ODA SLIDER — ortadaki anlamsiz yuzen karti kaldir ---------- */
/* Kucuk portre kart ortada "anlamsizca" duruyordu. Kaldirildi; slider artik
   temiz full-bleed gorsel + ortalanmis baslik. Yuksekligi de buna gore sadelestir. */
.swiper-slider-group[data-swiper-slider-type="stay"] .row-slider-card {
   display: none !important;
}
.swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text {
   padding: 34vh 0;
}
@media screen and (max-width: 1024px) {
   .swiper-slider-group[data-swiper-slider-type="stay"] .swiper-carousel-text {
      padding: calc(var(--vh, 1vh) * 30) 0;
   }
}

/* ---------- 8b) BASLIK BOSLUKLARI — sik ve akici dikey ritim ---------- */
:root {
   /* Bolum dikey padding'i title-size*1.2 idi (cok ferah) -> daha sik */
   --section-padding: calc(var(--title-size) * 0.92);
}
/* Interior sayfa header'i: nav altindaki devasa ust bosluk + alt bosluk kisilt.
   ONEMLI: anasayfa hero'su (.section-home-header) de .default-header'dir ->
   onu HARIC tut, yoksa full-height hero'nun ic dengesi bozulur. */
.section.default-header:not(.section-home-header) {
   padding-top: calc(var(--nav-bar-height) + (var(--section-padding) * 0.5));
   padding-bottom: calc(var(--section-padding) * 0.5);
}
/* Eyebrow -> baslik -> metin arasi nefes payini sikistir (sadece interior header'larda) */
.default-header:not(.section-home-header) .styled-col,
.about-hero-inner {
   gap: calc(var(--gap) * 0.85);
}

/* ---------- 9) AKIS — kaydirdikca yumusak reveal (scroll-driven CSS) ---------- */
/* GSAP/parallax ile cakismayan icerik bloklarinda; @supports + reduced-motion korumali.
   Destekleyen tarayicida (Chrome) bolumler akarak belirir; desteklemeyende normal gorunur. */
@supports (animation-timeline: view()) {
   @media (prefers-reduced-motion: no-preference) {
      .section-stay-cards .room-card,
      .blog-card,
      .gallery-grid__item,
      .sustainability-report-card,
      .section-image-split .col-content,
      .section-home-intro-after .col,
      .faq-item,
      .contact-info-card,
      .contact-form-card,
      .contact-map {
         animation: hb-flow-in linear both;
         animation-timeline: view();
         animation-range: entry 2% cover 22%;
         will-change: opacity, transform;
      }
   }
}
@keyframes hb-flow-in {
   from { opacity: 0; transform: translateY(34px); }
   to   { opacity: 1; transform: none; }
}

/* ---------- 10) SADE HAMBURGER NAV — Menü sol, logo ORTA, Rezervasyon sag ---------- */
/* Logo tema tarafindan absolute-ortada birakilir. Sol: Menü, sag: Rezervasyon. */
.main-nav-bar .nav-menu-left {
   display: flex;
   align-items: center;
}
.main-nav-bar .nav-menu-trigger {
   display: inline-flex;
   align-items: center;
   gap: 0.7em;
   cursor: pointer;
   user-select: none;
}
.main-nav-bar .nav-menu-trigger .cheeseburger {
   margin-left: 0;
}
.main-nav-bar .nav-menu-label {
   text-transform: uppercase;
   letter-spacing: 0.16em;
   font-size: var(--copy-size-s);
   line-height: 1;
   font-weight: 400;
}
/* Etiket rengi cheeseburger barlariyla ayni mantik (data-theme-nav) */
[data-theme-nav="dark"] .main-nav-bar .nav-menu-label { color: #ffffff; }
[data-theme-nav="light"] .main-nav-bar .nav-menu-label { color: #322018; }
/* Yan panel (hamburger menu) zaten tum sayfalari iceriyor; tema-bagimsiz koyu kalsin */
.side-nav .nav-menu-label { color: #322018; }

@media screen and (max-width: 600px) {
   /* Mobilde "Menü" yazisini gizle, sadece ikon */
   .main-nav-bar .nav-menu-label { display: none; }
}

/* ---------- 11) "DOGADA ARINMA" (2. image-split) — ustteki bolumle dip dibe degil ---------- */
/* Tema ardisik image-split'leri padding-top:0 ile yapistiriyordu -> nefes payi ver. */
.section-image-split + .section-image-split {
   padding-top: var(--section-padding);
}

/* ---------- 7) BUG FIX'LER (audit bulgulari) ---------- */
/* a) .eyebrow.white tanimsizdi -> oda detay galeride koyu/gorunmez metindi */
.eyebrow.white {
   color: rgba(var(--color-white-rgb), 0.85);
}
/* b) data-bg-section="white" arka plan kurali yoktu (gorsel ayrim olusmuyordu) */
[data-bg-section="white"] {
   background-color: var(--color-white);
}
/* c) .container--narrow sabit 780px idi -> em tabanli olcekle uyumlu */
.container--narrow {
   max-width: calc(var(--title-size) * 6.5);
}

/* d) Oda detay kartlari: kose yaricapini site geneliyle (20px) hizala (24px -> 20px) */
.room-fact-card,
.room-content-card,
.room-booking-card,
.room-contact-card,
.room-info-card,
.similar-room-card {
   border-radius: var(--card-radius);
}

/* ---------- 12) ILETISIM SAYFASI — modern, temaya sadik yeniden tasarim ---------- */
/* Eski .contact-* stilleri style.css'te; bu katman (en son) onlari ezer.
   Altin oran 2 sutun: bilgiler (~38.2%) + form (~61.8%); mobilde tek sutun. */
.section-contact-body {
   padding-top: var(--space-2);
   padding-bottom: var(--space-5);
}
.contact-split {
   display: grid;
   grid-template-columns: 0.62fr 1fr;
   gap: var(--space-4);
   align-items: start;
}
@media screen and (max-width: 1024px) {
   .contact-split {
      grid-template-columns: 1fr;
      gap: var(--space-3);
   }
}

/* Kartlar — ortak modern kart ailesi (oda/blog kartlariyla ayni dil) */
.contact-info-card,
.contact-form-card {
   min-width: 0;
   border: var(--card-border);
   border-radius: var(--card-radius);
   box-shadow: var(--card-shadow);
   padding: var(--space-3);
   transition: box-shadow 0.4s var(--card-ease);
}
.contact-info-card { background: var(--card-bg); }
.contact-form-card { background: linear-gradient(180deg, #fbf8f3 0%, #ffffff 100%); }
.contact-info-card:hover,
.contact-form-card:hover { box-shadow: var(--card-shadow-hover); }

.contact-info-card__title,
.contact-form-card__title {
   font-family: 'Kaftan Serif', serif;
   font-size: clamp(1.5rem, 2.4vw, 2rem);
   line-height: 1.2;
   margin: 0 0 var(--space-2);
   color: #322018;
}
.contact-info-card__intro {
   margin: 0 0 var(--space-2);
   color: rgba(50, 32, 24, 0.7);
   line-height: 1.6;
}
.contact-form-card__hint {
   margin: -6px 0 var(--space-2);
   color: rgba(50, 32, 24, 0.66);
   font-size: 0.95rem;
}

/* Bilgi satirlari — ikon cipi + etiket/deger */
.contact-info-list {
   list-style: none;
   margin: 0;
   padding: 0;
}
.contact-info-item {
   display: flex;
   align-items: flex-start;
   gap: var(--space-2);
   margin: 0;
   padding: var(--space-2) 0;
   border-bottom: 1px solid rgba(50, 32, 24, 0.07);
}
.contact-info-item:first-child { padding-top: 0; }
.contact-info-item:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-info-item__icon {
   flex: 0 0 auto;
   width: 46px;
   height: 46px;
   display: grid;
   place-items: center;
   border-radius: var(--card-radius-sm);
   background: rgba(144, 60, 2, 0.08);
   color: var(--color-primary, #903c02);
}
.contact-info-item__icon svg { width: 20px; height: 20px; }
.contact-info-item__icon--mail { background: rgba(10, 99, 101, 0.1); color: var(--color-secondary, #0a6365); }
.contact-info-item__icon--pin { background: rgba(101, 115, 53, 0.12); color: var(--color-butterflygreen-900); }
.contact-info-item__icon--clock { background: rgba(144, 60, 2, 0.08); color: var(--color-primary, #903c02); }
.contact-info-item__body {
   display: flex;
   flex-direction: column;
   gap: 3px;
   min-width: 0;
   padding-top: 2px;
}
.contact-info-item__label {
   display: block;
   font-family: inherit;
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   margin: 0;
   color: rgba(50, 32, 24, 0.55);
}
.contact-info-item__link,
.contact-info-item__text {
   font-size: 1.02rem;
   line-height: 1.5;
   color: #322018;
   word-break: break-word;
}
.contact-info-item__link {
   text-decoration: none;
   transition: color 0.3s ease;
}
.contact-info-item__link:hover { color: var(--color-primary, #903c02); }

/* WhatsApp CTA */
.contact-whatsapp {
   display: inline-flex;
   align-items: center;
   gap: 10px;
   margin-top: var(--space-3);
   padding: 12px 22px;
   border-radius: var(--border-radius, 999px);
   background: var(--color-butterflygreen-900);
   color: #fff;
   font-size: 0.95rem;
   text-decoration: none;
   transition: background 0.3s ease, transform 0.3s ease;
}
.contact-whatsapp svg { width: 20px; height: 20px; }
.contact-whatsapp:hover { background: var(--color-butterflygreen-700); transform: translateY(-2px); }

/* Sosyal medya */
.contact-social {
   margin-top: var(--space-3);
   display: flex;
   flex-direction: column;
   gap: 12px;
}
.contact-social__label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(50, 32, 24, 0.55);
}
.contact-social__links {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}
.contact-social__links a {
   width: 42px;
   height: 42px;
   display: grid;
   place-items: center;
   border-radius: 50%;
   border: var(--card-border);
   color: #322018;
   transition: background 0.3s var(--card-ease), color 0.3s var(--card-ease), border-color 0.3s var(--card-ease), transform 0.3s var(--card-ease);
}
.contact-social__links a:hover {
   background: var(--color-primary, #903c02);
   border-color: var(--color-primary, #903c02);
   color: #fff;
   transform: translateY(-2px);
}
.contact-social__links svg { width: 18px; height: 18px; }

/* Form — rezervasyon formuyla ayni gorsel dil */
.contact-form {
   display: grid;
   gap: var(--space-2);
}
.contact-form__row {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 14px;
}
@media screen and (max-width: 640px) {
   .contact-form__row { grid-template-columns: 1fr; }
}
.contact-field {
   display: flex;
   flex-direction: column;
   min-width: 0;
}
.contact-field > label {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;
   text-transform: uppercase;
   color: rgba(50, 32, 24, 0.55);
   margin-bottom: 8px;
}
.contact-field__input {
   width: 100%;
   min-width: 0;
   min-height: 56px;
   border-radius: 16px;
   border: 1px solid rgba(50, 32, 24, 0.1);
   background: #fff;
   padding: 0 16px;
   color: #322018;
   font-family: inherit;
   font-size: 15px;
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-field__input::placeholder { color: rgba(50, 32, 24, 0.42); }
.contact-field__input:focus {
   outline: 2px solid rgba(10, 99, 101, 0.4);
   outline-offset: 0;
   border-color: rgba(10, 99, 101, 0.4);
}
.contact-field__textarea {
   min-height: 150px;
   padding: 14px 16px;
   line-height: 1.55;
   resize: vertical;
}
.contact-field__input.is-invalid { border-color: #b3401f; }
.contact-field__error {
   margin-top: 6px;
   font-size: 12px;
   color: #b3401f;
}
.contact-form__submit {
   width: 100%;
   min-height: 54px;
   margin-top: 6px;
   align-self: stretch;
   border: 0;
   border-radius: var(--border-radius, 999px);
   cursor: pointer;
   background: var(--color-butterflygreen-900);
   color: #fff;
   font-family: inherit;
   font-size: 15px;
   letter-spacing: 0.02em;
   box-shadow: none;
   transition: background 0.3s ease, transform 0.3s ease;
}
.contact-form__submit:hover {
   background: var(--color-butterflygreen-700);
   transform: translateY(-2px);
}
.contact-form__submit:focus { outline: none; }

/* Flash / dogrulama bildirimleri */
.contact-alert {
   border-radius: var(--card-radius-sm);
   padding: 14px 16px;
   margin-bottom: var(--space-2);
   font-size: 0.95rem;
   line-height: 1.5;
}
.contact-alert--success {
   background: rgba(10, 99, 101, 0.1);
   color: #0a6365;
   border: 1px solid rgba(10, 99, 101, 0.25);
}
.contact-alert--error {
   background: rgba(179, 64, 31, 0.1);
   color: #b3401f;
   border: 1px solid rgba(179, 64, 31, 0.25);
}

/* Harita — cerceveli, oranli (sabit 500px yerine aspect-ratio) */
.contact-map {
   margin-top: var(--space-4);
   border-radius: var(--card-radius);
   overflow: hidden;
   border: var(--card-border);
   box-shadow: var(--card-shadow);
   position: relative;
   aspect-ratio: 21 / 9;
}
.contact-map iframe {
   position: absolute !important;
   inset: 0;
   width: 100% !important;
   height: 100% !important;
   display: block;
   border: 0;
}
@media screen and (max-width: 768px) {
   .contact-map {
      margin-top: var(--space-3);
      aspect-ratio: 4 / 3;
   }
}

/* ---------- 13) EYEBROW -> BASLIK BOSLUGU (kartlar) + ODA DETAY REZERVASYON ---------- */
/* Eyebrow hemen basligin ustundeyse (kart deseni: BILGI/Konaklama Imkanlari,
   ILETISIM/Bize hizli ulasin, Rezervasyon/...) aradaki bosluk sik ve modern olsun.
   Bolum basliklari (.col-row-eyebrow + .col-row-title ayri sarmalayicilarda) etkilenmez. */
.eyebrow + h1,
.eyebrow + h2,
.eyebrow + h3,
.eyebrow + h4,
.eyebrow + h5,
.eyebrow + h6 {
   margin-top: 0.45em;
}

/* Oda detay rezervasyon (sidebar) — cocuk yasi alanlarindaki kayma giderildi.
   :not(display:none) -> yalnizca cocuk seciliyken gorunur (bos kutu olmaz).
   Etiket ustte, secim altta; derli toplu 2 sutunlu izgara. */
.staybee-widget-wrap--sidebar .staybee-children-ages:not([style*="display: none"]):not([style*="display:none"]) {
   display: grid !important;
   grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
   gap: 12px !important;
   padding: 14px !important;
   margin-top: 10px !important;
   background: rgba(50, 32, 24, 0.03) !important;
   border: 1px solid rgba(50, 32, 24, 0.07) !important;
   border-radius: var(--card-radius-sm) !important;
}
.staybee-widget-wrap--sidebar .staybee-children-ages .staybee-form-group-inline {
   display: flex !important;
   flex-direction: column !important;
   align-items: stretch !important;
   gap: 6px !important;
   grid-template-columns: none !important;
   margin: 0 !important;
   min-width: 0 !important;
}
.staybee-widget-wrap--sidebar .staybee-children-ages .staybee-form-group-inline label {
   font-size: 11px !important;
   font-weight: 600 !important;
   letter-spacing: 0.08em !important;
   text-transform: uppercase !important;
   color: rgba(50, 32, 24, 0.55) !important;
   white-space: nowrap !important;
   margin: 0 !important;
}
.staybee-widget-wrap--sidebar .staybee-children-ages .staybee-child-age {
   width: 100% !important;
   min-width: 0 !important;
   min-height: 48px !important;
}
@media screen and (max-width: 380px) {
   .staybee-widget-wrap--sidebar .staybee-children-ages:not([style*="display: none"]):not([style*="display:none"]) {
      grid-template-columns: 1fr !important;
   }
}

/* =====================================================================
   ETKİNLİK TAKVİMİ — aylık takvim grid + gün dialogu (temaya sadık)
   ===================================================================== */
.section-events-calendar {
   padding-top: var(--space-3);
}
.events-calendar {
   max-width: 660px;
   margin: 0 auto;
   background: var(--card-bg);
   border: var(--card-border);
   border-radius: var(--card-radius);
   box-shadow: var(--card-shadow);
   padding: clamp(16px, 2.2vw, 24px);
}

/* Toolbar: ay/yıl + ileri-geri */
.events-calendar__toolbar {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   margin-bottom: var(--space-2);
}
.events-calendar__heading {
   font-family: var(--font-family-title, serif);
   font-size: clamp(1.25rem, 2.4vw, 1.75rem);
   color: #322018;
   letter-spacing: -0.01em;
   text-align: center;
   flex: 1 1 auto;
}
.events-calendar__nav {
   flex: 0 0 auto;
   width: 44px;
   height: 44px;
   border-radius: 50%;
   border: 1px solid rgba(50, 32, 24, 0.12);
   background: #fff;
   color: #322018;
   font-size: 1.5rem;
   line-height: 1;
   cursor: pointer;
   transition: background-color 0.25s var(--card-ease), border-color 0.25s var(--card-ease), transform 0.25s var(--card-ease);
}
.events-calendar__nav:hover {
   background: #f4ece2;
   border-color: rgba(50, 32, 24, 0.22);
   transform: translateY(-1px);
}

/* Haftanın günleri başlığı */
.events-calendar__weekdays {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 6px;
   margin-bottom: 8px;
}
.events-calendar__weekdays span {
   text-align: center;
   font-size: 0.72rem;
   font-weight: 600;
   letter-spacing: 0.08em;
   text-transform: uppercase;
   color: rgba(50, 32, 24, 0.5);
   padding: 6px 0;
}

/* Gün ızgarası */
.events-calendar__grid {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 6px;
}
.events-calendar__cell {
   position: relative;
   aspect-ratio: 1 / 1;
   display: flex;
   align-items: flex-start;
   justify-content: flex-end;
   padding: 8px;
   border-radius: var(--card-radius-sm);
   border: 1px solid rgba(50, 32, 24, 0.06);
   background: #faf7f3;
   font: inherit;
   color: #322018;
   text-align: right;
}
.events-calendar__cell.is-empty {
   background: transparent;
   border-color: transparent;
}
.events-calendar__num {
   font-size: 0.95rem;
   font-variant-numeric: tabular-nums;
   color: rgba(50, 32, 24, 0.78);
}
.events-calendar__cell.is-today {
   border-color: var(--color-secondary, #0a6365);
   box-shadow: inset 0 0 0 1px var(--color-secondary, #0a6365);
}
.events-calendar__cell.is-today .events-calendar__num {
   font-weight: 700;
   color: #322018;
}

/* Etkinlik olan günler — tıklanabilir buton */
.events-calendar__cell.has-events {
   cursor: pointer;
   background: #fff;
   border-color: rgba(144, 60, 2, 0.28);
   transition: transform 0.2s var(--card-ease), box-shadow 0.2s var(--card-ease), border-color 0.2s var(--card-ease);
}
.events-calendar__cell.has-events:hover,
.events-calendar__cell.has-events:focus-visible {
   transform: translateY(-2px);
   border-color: var(--color-primary, #903c02);
   box-shadow: var(--card-shadow-hover);
   outline: none;
}
.events-calendar__dot {
   position: absolute;
   left: 8px;
   top: 10px;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background: var(--color-primary, #903c02);
}
.events-calendar__badge {
   position: absolute;
   left: 8px;
   bottom: 8px;
   min-width: 20px;
   height: 20px;
   padding: 0 6px;
   border-radius: 999px;
   background: var(--color-primary, #903c02);
   color: #fff;
   font-size: 0.7rem;
   font-weight: 600;
   line-height: 20px;
   text-align: center;
}
.events-calendar__hint {
   margin: var(--space-2) 0 0;
   text-align: center;
   font-size: 0.85rem;
   color: rgba(50, 32, 24, 0.55);
}

/* ---------- Gün etkinlik dialogu ---------- */
.events-dialog[hidden] {
   display: none;
}
.events-dialog {
   position: fixed;
   inset: 0;
   z-index: 9999;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
}
.events-dialog__backdrop {
   position: absolute;
   inset: 0;
   background: rgba(28, 18, 12, 0.55);
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
}
.events-dialog__panel {
   position: relative;
   z-index: 1;
   width: min(640px, 100%);
   max-height: 88vh;
   overflow-y: auto;
   background: #fff;
   border-radius: var(--card-radius);
   box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
   padding: clamp(22px, 4vw, 40px);
}
.events-dialog__close {
   position: absolute;
   top: 14px;
   right: 16px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   border: none;
   background: rgba(50, 32, 24, 0.06);
   color: #322018;
   font-size: 1.6rem;
   line-height: 1;
   cursor: pointer;
   transition: background-color 0.2s var(--card-ease);
}
.events-dialog__close:hover {
   background: rgba(50, 32, 24, 0.12);
}
.events-dialog__date {
   margin: 0 0 var(--space-2);
   padding-right: 44px;
   font-size: clamp(1.3rem, 3vw, 1.8rem);
   color: #322018;
}
.events-dialog__list {
   display: flex;
   flex-direction: column;
   gap: var(--space-2);
}
.events-dialog__item {
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding-bottom: var(--space-2);
   border-bottom: 1px solid rgba(50, 32, 24, 0.08);
}
.events-dialog__item:last-child {
   border-bottom: none;
   padding-bottom: 0;
}
.events-dialog__media {
   border-radius: var(--figure-radius);
   overflow: hidden;
   aspect-ratio: 16 / 9;
   background: #f4ece2;
}
.events-dialog__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}
.events-dialog__title {
   margin: 0 0 10px;
   font-size: 1.2rem;
   color: #322018;
}
.events-dialog__meta {
   list-style: none;
   margin: 0 0 12px;
   padding: 0;
   display: flex;
   flex-wrap: wrap;
   gap: 8px 22px;
}
.events-dialog__meta li {
   display: flex;
   flex-direction: column;
   gap: 2px;
   font-size: 0.95rem;
   color: #322018;
}
.events-dialog__meta-label {
   font-size: 0.68rem;
   font-weight: 600;
   letter-spacing: 0.1em;
   text-transform: uppercase;
   color: rgba(50, 32, 24, 0.5);
}
.events-dialog__desc {
   font-size: 0.98rem;
   line-height: 1.62;
   color: rgba(50, 32, 24, 0.82);
   white-space: pre-line;
}

@media screen and (min-width: 560px) {
   .events-dialog__item--has-media {
      flex-direction: row;
   }
}

/* Masaüstü: takvimi kompaktlaştır — hücreler basık olsun ki tüm ay tek ekranda görünsün.
   (Mobil ≤600px bloğu etkilenmez.) */
@media screen and (min-width: 601px) {
   .events-calendar__cell {
      aspect-ratio: 1 / 0.74;
      padding: 6px 8px;
   }
   .events-calendar__num {
      font-size: 0.85rem;
   }
   .events-calendar__heading {
      font-size: clamp(1.1rem, 1.7vw, 1.45rem);
   }
   .events-calendar__nav {
      width: 38px;
      height: 38px;
      font-size: 1.3rem;
   }
   .events-calendar__hint {
      font-size: 0.8rem;
   }
}
@media screen and (max-width: 600px) {
   .events-calendar {
      padding: 14px;
   }
   .events-calendar__grid,
   .events-calendar__weekdays {
      gap: 4px;
   }
   .events-calendar__cell {
      padding: 5px;
      border-radius: 10px;
   }
   .events-calendar__num {
      font-size: 0.8rem;
   }
   .events-calendar__badge {
      min-width: 16px;
      height: 16px;
      line-height: 16px;
      font-size: 0.62rem;
      left: 5px;
      bottom: 5px;
   }
   .events-calendar__dot {
      left: 5px;
      top: 6px;
      width: 6px;
      height: 6px;
   }
}