/* =========================================================================
   Kyklos Dome — tek dosya stil sayfası
   Bölümler: 1 Değişkenler · 2 Sıfırlama · 3 Tipografi · 4 Düzen · 5 Bileşenler
             6 Başlık/Altbilgi · 7 Sayfa blokları · 8 Duyarlı (responsive)
   ========================================================================= */

/* ---------- 1. Değişkenler ---------- */

:root {
  --bg:          #0e0e0e;
  --surface:     #131313;
  --surface-2:   #181818;
  --line:        #262626;
  --line-soft:   #1e1e1e;

  --text:        #9a9a9a;
  --text-dim:    #7a7a7a;
  --heading:     #ffffff;

  --amber:       #ffb700;
  --amber-dark:  #e0a000;
  --lime:        #bdd92c;

  --wrap:        1140px;
  --header-h:    76px;
  --gap:         clamp(1rem, 2.4vw, 1.75rem);
  --section-y:   clamp(3.5rem, 8vw, 7rem);
  --radius:      18px;
  --radius-sm:   12px;
  --radius-pill: 999px;

  --font-head:   "Arima", Georgia, serif;
  --font-body:   "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease:        cubic-bezier(.22, .61, .36, 1);
  --shadow:      0 18px 40px rgba(0, 0, 0, .45);
}

/* ---------- 2. Sıfırlama ---------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 1rem; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; border-radius: 4px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--amber); color: #111; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* ---------- 3. Tipografi ---------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .6rem;
  font-family: var(--font-head);
  font-weight: 600;
  line-height: 1.22;
  color: var(--heading);
  letter-spacing: -.01em;
}

.hero-title   { font-size: clamp(2.2rem, 5.6vw, 4rem); margin-bottom: 1rem; }
.page-title   { font-size: clamp(2rem, 4.6vw, 3.25rem); }
/* CTA ve altbilgi basliklari her sayfada tekrarlandigi icin h2 olmaktan
   cikarildi. Bu siniflar artik <p> uzerinde de kullanilabildiginden
   baslik tipografisi dogrudan burada tanimli. */
.section-title{
  font-size: clamp(1.7rem, 3.2vw, 2.75rem);
  font-family: var(--font-head); font-weight: 600; line-height: 1.22;
  color: var(--heading); letter-spacing: -.01em; margin: 0 0 .6rem;
}
.sub-title    { font-size: clamp(1.25rem, 2vw, 1.6rem); margin-top: 2rem; }

.kicker {
  margin: 0 0 .5rem;
  font-family: var(--font-head);
  font-size: .8125rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--amber);
}

.lead { font-size: 1.0625rem; color: var(--text); max-width: 62ch; }

/* ---------- 4. Düzen ---------- */

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
.section + .section { padding-top: 0; }
main > .section:first-child { padding-top: clamp(2.5rem, 5vw, 4rem); }

.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--gap);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.section-head.is-center {
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  text-align: center;
}
.section-head.is-center .section-head-side { max-width: 68ch; }
.section-head-side { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }
.section-head.is-center .section-head-side { align-items: center; }
.section-head-side .lead { margin: 0; }

/* ---------- 5. Bileşenler ---------- */

/* Butonlar */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .85rem 1.6rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-head);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .2s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--amber); color: #111; }
.btn-primary:hover { background: var(--lime); }
.btn-ghost { border-color: var(--line); color: var(--heading); }
.btn-ghost:hover { border-color: var(--amber); color: var(--amber); }
.btn-sm { padding: .6rem 1.15rem; font-size: .875rem; }
.btn-block { display: flex; width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--amber);
  font-family: var(--font-head); font-size: .9375rem; font-weight: 600;
}
.link-arrow::after { content: "→"; transition: transform .25s var(--ease); }
.link-arrow:hover::after { transform: translateX(4px); }

/* Listeler */
.check-list { display: grid; gap: .65rem; }
.check-list li { position: relative; padding-left: 1.75rem; }
.check-list li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--lime); box-shadow: 0 0 0 4px rgba(189, 217, 44, .14);
}
.check-list-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); column-gap: var(--gap); }

.pill-list { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.5rem; }
.pill-list li,
.amenity-chips li {
  padding: .45rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: .875rem;
  color: var(--heading);
}
.amenity-chips { display: flex; flex-wrap: wrap; gap: .5rem; }

/* Kartlar — ortak */
.card,
.dome-card, .exp-card, .post-card, .price-card, .team-card,
.why-card, .value-card, .support-card, .stat, .step, .review-card, .booking-box {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}

/* SSS akordeonu */
.faq { display: grid; gap: .75rem; }
.faq-item {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.1rem 1.35rem;
  cursor: pointer;
  font-family: var(--font-head); font-weight: 600; color: var(--heading);
  list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-sign { position: relative; flex: 0 0 18px; height: 18px; }
.faq-sign::before, .faq-sign::after {
  content: ""; position: absolute; inset: 50% 0 auto 0;
  height: 2px; background: var(--amber); border-radius: 2px;
  transition: transform .25s var(--ease);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0); }
.faq-answer { padding: 0 1.35rem 1.2rem; }
.faq-answer p { margin: 0; }
.faq-layout { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }

/* Uyarı kutuları */
.alert { padding: 1.25rem 1.5rem; border-radius: var(--radius-sm); margin-bottom: 1.25rem; }
.alert-ok { background: rgba(189, 217, 44, .1); border: 1px solid rgba(189, 217, 44, .35); }
.alert-ok h2 { font-size: 1.35rem; }
.alert-ok a { color: var(--lime); }
.alert-error { background: rgba(255, 90, 90, .1); border: 1px solid rgba(255, 90, 90, .35); color: #ffb3b3; }

/* ---------- 6. Başlık / Altbilgi ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(14, 14, 14, .72);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
.header-inner { display: flex; align-items: center; gap: var(--gap); min-height: var(--header-h); }
.logo { flex: 0 0 auto; }


/* Logo tek parça vektör; parıltı animasyonu SVG dosyasının içinde. */
.logo-mark { width: auto; height: 48px; display: block; }
.site-footer .logo-mark { height: 54px; margin-bottom: 1rem; }
@media (max-width: 600px) { .logo-mark { height: 40px; } }

.nav { margin-left: auto; }
.nav-list { display: flex; align-items: center; gap: .35rem; }
.nav-item { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .55rem .85rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-head); font-size: .9375rem; font-weight: 500;
  color: var(--heading);
  transition: color .2s var(--ease), background-color .2s var(--ease);
}
.nav-link:hover, .nav-link.is-active { color: var(--amber); }
.caret { transition: transform .2s var(--ease); }
.has-sub:hover .caret, .has-sub:focus-within .caret { transform: rotate(180deg); }

.sub-list {
  position: absolute; top: calc(100% + .5rem); left: 0; z-index: 10;
  min-width: 230px; padding: .5rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-sub:hover .sub-list, .has-sub:focus-within .sub-list { opacity: 1; visibility: visible; transform: none; }
.sub-list a { display: block; padding: .55rem .8rem; border-radius: 8px; font-size: .9375rem; }
.sub-list a:hover { background: var(--bg); color: var(--amber); }

.nav-foot { display: none; }
.header-actions { display: flex; align-items: center; gap: .75rem; }

.burger { display: none; flex-direction: column; gap: 5px; padding: .5rem; }
.burger span { display: block; width: 24px; height: 2px; background: var(--heading); border-radius: 2px; transition: transform .25s var(--ease), opacity .2s var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.site-footer {
  margin-top: var(--section-y);
  padding-top: clamp(3rem, 6vw, 4.5rem);
  background: var(--surface);
  border-top: 1px solid var(--line-soft);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
}

.footer-tagline { font-family: var(--font-head); color: var(--heading); font-size: 1.0625rem; margin-bottom: .5rem; }
.footer-about { font-size: .9375rem; }
.footer-title {
  font-size: 1.0625rem; letter-spacing: .04em; margin: 0 0 1rem;
  font-family: var(--font-head); font-weight: 600; line-height: 1.22;
  color: var(--heading);
}
.footer-col ul { display: grid; gap: .55rem; font-size: .9375rem; }
.footer-col a:hover { color: var(--amber); }

.social { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.25rem; }
.social a {
  display: inline-block; padding: .4rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  font-size: .8125rem;
}
.social a:hover { border-color: var(--amber); color: var(--amber); }

.contact-list { display: grid; gap: 1rem; font-size: .9375rem; }
.contact-list li { display: flex; gap: .75rem; }
.contact-list img { width: 24px; height: 24px; flex: 0 0 24px; object-fit: contain; }
.contact-list span { display: grid; gap: .1rem; }
.contact-list strong { color: var(--heading); font-weight: 500; }
.contact-list a:hover { color: var(--amber); }

.footer-bottom {
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line-soft);
  font-size: .875rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom a:hover { color: var(--amber); }

/* Sabit hızlı iletişim menüsü (sağ alt) */
.quick { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 95; display: grid; justify-items: end; gap: .6rem; }

/* Etiket butonun üstünde: altta ekran kenarına sıkışırdı. */
.quick-trigger { display: flex; flex-direction: column; align-items: center; gap: .45rem; }

.quick-toggle {
  position: relative;
  display: grid; place-items: center;
  width: 58px; height: 58px;
  background: #1ebea5; color: #fff;
  border-radius: 50%;
  box-shadow: 0 10px 26px rgba(30, 190, 165, .38);
  transition: transform .25s var(--ease), background-color .25s var(--ease);
  /* Yavaş nefes alma ritmi — ateş böceği gibi, dikkat çeker ama rahatsız etmez */
  animation: quick-breathe 3.4s ease-in-out infinite;
}
.quick-toggle:hover { transform: scale(1.07); animation-play-state: paused; }
.quick-toggle > svg { position: relative; z-index: 1; }

@keyframes quick-breathe {
  0%, 100% { box-shadow: 0 10px 26px rgba(30, 190, 165, .38); }
  50%      { box-shadow: 0 10px 34px rgba(30, 190, 165, .62); }
}

/* Dışa doğru açılan iki halka — gecikmeli, kesintisiz bir dalga */
.quick-ring {
  position: absolute; inset: 0;
  border: 2px solid #1ebea5;
  border-radius: 50%;
  animation: quick-ripple 3s cubic-bezier(.2, .6, .3, 1) infinite;
}
.quick-ring-2 { animation-delay: 1.5s; }

@keyframes quick-ripple {
  0%        { transform: scale(1);   opacity: .65; }
  70%, 100% { transform: scale(1.85); opacity: 0; }
}

@keyframes quick-blink {
  0%, 100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(74, 222, 128, .7); }
  50%      { opacity: .55; box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}

/* "Çevrimiçi" etiketi — menü açıkken yerini listeye bırakır */
.quick-status {
  display: flex; align-items: center; gap: .4rem;
  padding: .35rem .7rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow);
  font-size: .75rem; color: var(--heading);
  white-space: nowrap;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
}
.quick-status-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #4ade80;
  animation: quick-blink 2s ease-in-out infinite;
}
.quick:has(.quick-toggle[aria-expanded="true"]) .quick-status { display: none; }

@media (prefers-reduced-motion: reduce) {
  .quick-toggle, .quick-status-dot { animation: none; }
  .quick-ring { display: none; }
}
.quick-toggle .quick-close { display: none; }
.quick-toggle[aria-expanded="true"] { background: var(--surface-2); box-shadow: 0 10px 26px rgba(0, 0, 0, .5); }
.quick-toggle[aria-expanded="true"] .quick-open { display: none; }
.quick-toggle[aria-expanded="true"] .quick-close { display: block; }

.quick-list { display: grid; justify-items: end; gap: .5rem; }
.quick-list[hidden] { display: none; }

.quick-item { display: flex; align-items: center; gap: .6rem; }

/* Açılışta alttan üste sıralı beliriş; --i her satıra PHP tarafından verilir */
.quick-list li { animation: quick-in .28s var(--ease) both; animation-delay: calc(var(--i, 1) * 35ms); }
@keyframes quick-in { from { opacity: 0; transform: translateY(10px) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .quick-list li { animation: none; } }

.quick-label {
  display: grid;
  padding: .45rem .8rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  white-space: nowrap;
  text-align: right;
}
.quick-label strong { color: var(--heading); font-family: var(--font-head); font-size: .875rem; font-weight: 600; line-height: 1.3; }
.quick-label small { font-size: .75rem; color: var(--text-dim); }

.quick-icon {
  display: grid; place-items: center; flex: 0 0 46px;
  width: 46px; height: 46px;
  background: var(--bg, #1ebea5);
  color: #fff;
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .4);
  transition: transform .2s var(--ease);
}
.quick-icon img { width: 24px; height: 24px; object-fit: contain; }
.quick-item:hover .quick-icon { transform: scale(1.1); }
.quick-item:hover .quick-label { border-color: var(--amber); }

@media (max-width: 600px) {
  .quick { right: .9rem; bottom: .9rem; }
  .quick-label { padding: .4rem .7rem; }
  .quick-label small { display: none; }
}

/* ---------- 7. Sayfa blokları ---------- */

/* Kahraman alan */
.hero { position: relative; padding-block: clamp(3rem, 8vw, 6rem) clamp(2rem, 5vw, 3.5rem); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
  content: ""; position: absolute; inset: 0;
  /* Gece fotografi zaten koyu; onceki ortu (.88/.52/.96) gorseli tamamen
     yutuyordu. Metin kontrasti korunacak kadar koyu, fotograf secilecek
     kadar acik bir denge. */
  background: linear-gradient(180deg, rgba(14, 14, 14, .62) 0%, rgba(14, 14, 14, .30) 32%, rgba(14, 14, 14, .82) 100%);
}
.hero-inner { position: relative; display: grid; gap: clamp(2rem, 5vw, 3.5rem); }
.hero-intro { max-width: 46rem; }
.hero-text { font-size: 1.0625rem; max-width: 46ch; margin: 0; color: #cfcfcf; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* Kahraman alan: video kartı + sosyal kanıt paneli */
.hero-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: var(--gap); align-items: stretch; }

.hero-video {
  position: relative; display: block; padding: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: var(--radius); overflow: hidden;
  text-align: left;
}
.hero-video img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; transition: transform .5s var(--ease); }
.hero-video::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 14, 14, .1) 40%, rgba(14, 14, 14, .8) 100%);
}
.hero-video:hover img { transform: scale(1.04); }
.play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 1;
  display: grid; place-items: center;
  width: 74px; height: 74px; padding-left: 4px;
  background: var(--amber); color: #111;
  border-radius: 50%;
  transition: transform .3s var(--ease), background-color .3s var(--ease);
}
.play::before {
  content: ""; position: absolute; inset: -10px;
  border: 1px solid rgba(255, 183, 0, .45); border-radius: 50%;
}
.hero-video:hover .play { transform: translate(-50%, -50%) scale(1.08); background: var(--lime); }
.hero-video-label {
  position: absolute; left: 1.25rem; bottom: 1.15rem; z-index: 1;
  font-family: var(--font-head); font-size: .9375rem; color: #fff;
}

.hero-aside { display: grid; gap: var(--gap); align-content: space-between; }
.hero-proof, .hero-cta {
  padding: 1.5rem;
  background: rgba(19, 19, 19, .72);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--radius);
}
.hero-proof { display: flex; align-items: flex-start; gap: 1rem; }
.avatars { display: flex; flex: 0 0 auto; }
.avatars li:not(:first-child) { margin-left: -14px; }
.avatars img {
  width: 46px; height: 46px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--surface);
}
.hero-proof .stars { margin-bottom: .35rem; align-items: center; }
.hero-proof .stars span { margin-left: .3rem; font-family: var(--font-body); font-size: .8125rem; color: var(--text); }
.proof-value { margin: 0; font-family: var(--font-head); font-size: 1.5rem; line-height: 1.2; color: var(--heading); }
.proof-value span { color: var(--amber); }
.proof-text { margin: .25rem 0 0; font-size: .8125rem; }

.hero-cta .hero-actions { margin-bottom: 1rem; }
.hero-note { margin: 0; font-size: .875rem; }
/* Hero bilgi seridi: ziyaretcinin ilk ekranda sordugu sorulara cevap veren
   somut veriler. Her biri ilgili sayfaya ic link tasiyor. */
.hero-facts {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .5rem;
  width: min(100% - 2.5rem, var(--wrap));
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
}
.hero-facts a {
  display: block; height: 100%;
  padding: .7rem .95rem;
  border: 1px solid rgba(255, 255, 255, .16);
  border-left: 2px solid var(--lime);
  border-radius: var(--radius-sm);
  background: rgba(14, 14, 14, .42);
  backdrop-filter: blur(2px);
  text-decoration: none;
  transition: border-color .25s var(--ease), background .25s var(--ease), transform .25s var(--ease);
}
.hero-facts strong {
  display: block;
  font-family: var(--font-head); font-size: .9375rem; font-weight: 600;
  color: #fff; line-height: 1.25;
}
.hero-facts span {
  display: block; margin-top: .1rem;
  font-size: .8125rem; color: var(--lime); line-height: 1.3;
}
.hero-facts a:hover,
.hero-facts a:focus-visible {
  border-color: rgba(189, 217, 44, .55);
  background: rgba(14, 14, 14, .62);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .hero-facts a { transition: none; }
  .hero-facts a:hover, .hero-facts a:focus-visible { transform: none; }
}

/* Video ışık kutusu */
.lightbox {
  width: min(92vw, 26.25rem); max-width: none; max-height: 92dvh;
  padding: 0; border: 0; background: transparent; overflow: visible;
}
.lightbox::backdrop { background: rgba(8, 8, 8, .88); backdrop-filter: blur(6px); }
/* Tanıtım videosu dikey (9:16) — oran baştan sabitlenerek açılışta zıplama önlenir. */
.lightbox-video { width: 100%; aspect-ratio: 9 / 16; max-height: 86dvh; border-radius: var(--radius); background: #000; }
.lightbox-close {
  position: absolute; top: -14px; right: -14px; z-index: 1;
  display: grid; place-items: center;
  width: 40px; height: 40px;
  background: var(--amber); color: #111;
  border-radius: 50%; font-size: 1.5rem; line-height: 1;
}
.lightbox-close:hover { background: var(--lime); }

/* İç sayfa başlığı */
.page-hero {
  padding-block: clamp(2.75rem, 6vw, 4.5rem);
  background: linear-gradient(180deg, var(--surface-2), var(--bg));
  border-bottom: 1px solid var(--line-soft);
}
.crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .75rem; font-size: .875rem; }
.crumbs a:hover { color: var(--amber); }
.crumbs .current { color: var(--text-dim); }

/* Neden biz */
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }
.why-card, .value-card, .support-card { padding: 1.75rem 1.5rem; }
.why-card img, .value-card img, .support-card img { width: 48px; height: 48px; object-fit: contain; margin-bottom: 1rem; }
.why-card h3, .value-card h3, .support-card h3 { font-size: 1.15rem; }
.why-card p, .value-card p, .support-card p { margin: 0; font-size: .9375rem; }

/* Hakkımızda blokları */
.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.about-media { position: relative; border-radius: var(--radius); overflow: hidden; }
.about-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.about-badge {
  /* Sag ust kose: gorselin sol alt kosesinde kahve servisi duruyor, rozet
     oraya konunca konuyu kapatiyordu. Ust bolge (agaclar/gokyuzu) bos. */
  position: absolute; right: 1.25rem; top: 1.25rem;
  display: grid; gap: .1rem; padding: .9rem 1.2rem;
  background: var(--amber); color: #111; border-radius: var(--radius-sm);
}
.about-badge strong { font-family: var(--font-head); font-size: 1.75rem; line-height: 1; }
.about-badge span { font-size: .8125rem; }

/* Zaman çizelgesi */
.timeline { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.timeline-item { position: relative; padding: 1.75rem 1.5rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.timeline-year { font-family: var(--font-head); font-size: 1.75rem; color: var(--amber); margin-bottom: .35rem; }
.timeline-item h3 { font-size: 1.1rem; }
.timeline-item p:last-child { margin: 0; font-size: .9375rem; }

/* Değerler */
.value-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--gap); }

/* Dome kartları */
.dome-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.dome-card { display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.dome-card:hover { border-color: var(--line); transform: translateY(-4px); }
.dome-media { position: relative; display: block; }
.dome-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.rating {
  position: absolute; top: .9rem; left: .9rem;
  padding: .3rem .75rem;
  background: rgba(14, 14, 14, .78); backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  font-size: .8125rem; color: var(--amber);
}
.dome-body { display: flex; flex-direction: column; flex: 1; padding: 1.5rem; }
.dome-name { font-size: 1.35rem; }
.dome-name a:hover { color: var(--amber); }
.dome-text { font-size: .9375rem; }
.dome-meta { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; font-size: .8125rem; }
.dome-meta li { padding: .3rem .75rem; border: 1px solid var(--line); border-radius: var(--radius-pill); }
.dome-foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; padding-top: 1.1rem; border-top: 1px solid var(--line-soft); }
.dome-price { margin: 0; font-size: .875rem; }
.dome-price span { font-family: var(--font-head); font-size: 1.25rem; color: var(--heading); }

/* Deneyim kartları */
.exp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--gap); }
.exp-card { display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.exp-card:hover { border-color: var(--line); transform: translateY(-4px); }
.exp-media { position: relative; display: block; }
.exp-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
/* İkonlar açık bej çizgilerden oluşuyor; amber zeminde kayboluyorlardı.
   Koyu zemin + amber halka hem kontrastı hem marka rengini koruyor. */
.exp-icon {
  position: absolute; right: 1rem; bottom: -24px;
  width: 48px !important; height: 48px !important; aspect-ratio: auto !important;
  padding: 9px; object-fit: contain !important;
  background: var(--bg);
  border: 2px solid var(--amber);
  border-radius: 50%;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .5);
}
.exp-body { flex: 1; padding: 1.5rem; }
.exp-body h3, .exp-title { font-size: 1.3rem; }
.exp-body h3 a:hover, .exp-title a:hover { color: var(--amber); }
.exp-body p { font-size: .9375rem; }

/* Fiyat kartları */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(275px, 1fr)); gap: var(--gap); align-items: start; }
.price-card { position: relative; padding: 2rem 1.75rem; }
.price-card.is-featured { border-color: var(--amber); background: var(--surface-2); }
.price-flag {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  padding: .3rem 1rem;
  background: var(--amber); color: #111;
  border-radius: var(--radius-pill);
  font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.price-tagline { color: var(--heading); font-size: .9375rem; }
.price-amount { display: flex; align-items: baseline; gap: .4rem; margin: 1rem 0 1.5rem; }
.price-amount strong { font-family: var(--font-head); font-size: clamp(2rem, 3.5vw, 2.6rem); color: var(--heading); font-weight: 600; }
.price-amount span { font-size: .9375rem; }
.price-card .check-list { margin-bottom: 1.75rem; font-size: .9375rem; }
.price-card .btn { width: 100%; }
.price-note { margin-top: clamp(2rem, 5vw, 3.5rem); padding: 2rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.price-note .sub-title { margin-top: 0; }

/* İstatistikler */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--gap); }
.stat { padding: 1.75rem 1.5rem; }
.stat-value { font-family: var(--font-head); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; color: var(--amber); margin-bottom: .5rem; }
.stat-label { font-size: 1.0625rem; }
.stat-text { margin: 0; font-size: .875rem; }

/* Yorumlar */
.review-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }
.review-card { display: flex; flex-direction: column; margin: 0; padding: 1.75rem 1.5rem; }
.stars { display: flex; gap: .2rem; color: var(--amber); margin-bottom: 1rem; }
.review-card blockquote { margin: 0 0 1.5rem; flex: 1; }
.review-card blockquote p { margin: 0; color: var(--heading); font-family: var(--font-head); font-size: 1.0625rem; line-height: 1.55; }
.review-card figcaption { display: flex; align-items: center; gap: .75rem; padding-top: 1.25rem; border-top: 1px solid var(--line-soft); }
.avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: 0 0 46px; }
.review-card figcaption span { display: grid; }
.review-card figcaption strong { color: var(--heading); font-weight: 500; }
.review-card figcaption small { font-size: .8125rem; color: var(--text-dim); }

/* Blog kartları */
/* auto-fill: tek yazı olduğunda kart tüm satırı kaplayıp devleşmesin */
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--gap); }
.post-card { display: flex; flex-direction: column; overflow: hidden; transition: border-color .25s var(--ease), transform .25s var(--ease); }
.post-card:hover { border-color: var(--line); transform: translateY(-4px); }
.post-media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.post-body { flex: 1; padding: 1.5rem; }
.post-body h3, .post-title { font-size: 1.25rem; }
.post-body h3 a:hover, .post-title a:hover { color: var(--amber); }
.post-body p { font-size: .9375rem; }

/* Ekip */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: var(--gap); }
.team-card { overflow: hidden; }
.team-media { position: relative; }
/* Ekip fotograflari portre; 4:3 yatay kutuda yuzun ust ve alti kesiliyordu. */
.team-media img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; }
.team-handle {
  position: absolute; left: 1rem; bottom: 1rem;
  padding: .3rem .8rem;
  background: rgba(14, 14, 14, .78); backdrop-filter: blur(6px);
  border-radius: var(--radius-pill); font-size: .8125rem; color: var(--lime);
}
.team-body { padding: 1.5rem; }
.team-body h3 { font-size: 1.25rem; }
.team-body p { margin: 0; font-size: .9375rem; }

/* Adımlar */
/* Rezervasyon adimlari: yan yana degil, sirali dikey akis */
.step-list { display: grid; gap: .75rem; margin: 0 0 2rem; counter-reset: adim; }
.step-list .step {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.25rem;
  align-items: start; padding: 1.35rem 1.5rem;
}
.step-list .step-no {
  display: grid; place-items: center;
  width: 2.25rem; height: 2.25rem; margin: 0;
  border: 1px solid var(--line); border-radius: 50%;
  font-family: var(--font-head); font-size: 1.0625rem; color: var(--lime);
}
.step-list .step h3 { font-size: 1.0625rem; margin-bottom: .35rem; }
.step-list .step p { margin: 0; }

.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--gap); counter-reset: step; }
.step { padding: 1.75rem 1.5rem; }
.step-no { font-family: var(--font-head); font-size: 2.25rem; line-height: 1; color: var(--lime); margin-bottom: .5rem; }
.step h3 { font-size: 1.15rem; }
.step p:last-child { margin: 0; font-size: .9375rem; }

/* Destek */
.support-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--gap); }

/* Donanım bloğu */
.amenity-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.amenity-media { border-radius: var(--radius); overflow: hidden; }
.amenity-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Detay sayfaları */
.detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.detail-main > p { max-width: 70ch; }
.detail-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .75rem; margin: 2rem 0; }
.detail-gallery figure { margin: 0; border-radius: var(--radius-sm); overflow: hidden; }
/* Galeri 3:4 dikey kurgulanmisti; sitedeki gorsellerin cogu artik 4:3 yatay
   ve dikey kutuda yanlardan %44 kirpiliyorlardi. */
.detail-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.detail-side { position: sticky; top: calc(var(--header-h) + 20px); }
.booking-box { padding: 1.75rem 1.5rem; }
.booking-box .price-amount { margin-top: .25rem; }
.booking-box .btn { margin-bottom: .6rem; }
/* Deneyim kutusundaki ikon: kutunun görsel çapası olduğu için büyük ve
   ortalanmış. Yalnızca deneyim detay sayfalarında kullanılıyor. */
.box-icon {
  display: block;
  width: 150px; height: 150px;
  margin: 0 auto 1.25rem;
  object-fit: contain;
}
@media (max-width: 600px) {
  .box-icon { width: 120px; height: 120px; }
}
.spec-list { display: grid; gap: .6rem; margin: 0 0 1.5rem; padding: 1.25rem 0 0; border-top: 1px solid var(--line-soft); }
.spec-list > div { display: flex; justify-content: space-between; gap: 1rem; font-size: .9375rem; }
.spec-list dt { color: var(--text-dim); }
.spec-list dd { margin: 0; color: var(--heading); }
.booking-note { margin: .75rem 0 0; font-size: .8125rem; color: var(--text-dim); }
.booking-note-lg { font-size: .9375rem; color: var(--text); margin-bottom: 1.25rem; }

.side-list { display: grid; gap: .75rem; margin-bottom: 1.25rem; }
.side-list a { display: flex; align-items: center; gap: .75rem; }
.side-list img { width: 64px; height: 52px; flex: 0 0 64px; border-radius: 8px; object-fit: cover; }
.side-list span { display: grid; }
.side-list strong { color: var(--heading); font-weight: 500; font-size: .9375rem; }
.side-list small { font-size: .8125rem; color: var(--amber); }
.side-list a:hover strong { color: var(--amber); }

/* Blog yazısı */
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.article-body { max-width: 72ch; }
.article-cover, .article-figure { margin: 0 0 2rem; border-radius: var(--radius); overflow: hidden; }
/* Kapak sabit oranda: liste ve hero duzeninde tutarli durmasi gerekiyor. */
.article-cover img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Govde gorseli DOGAL oraninda: 16/9 kutuda 4:3 gorseller ust-alttan %25
   kirpiliyordu. Genislik/yukseklik nitelikleri basildigi icin CLS olusmuyor. */
/* width:auto denendi, dikey gorseli kucultuyordu ama gorsel yuklenene kadar
   kutu 0x0 kaliyor ve sayfa zipliyordu (CLS). width:100% + height:auto ile
   tarayici width/height niteliklerinden orani hesaplayip yeri onceden ayiriyor. */
.article-figure img { width: 100%; height: auto; }
.article-figure { margin-block: 2rem; }
.article-body h2 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); margin-top: 2.25rem; }
.article-body h3 { font-size: 1.25rem; margin-top: 1.75rem; }
.article-body .check-list { margin-bottom: 1.5rem; }
.article-cta { margin-top: 2.5rem; padding: 1.75rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.article-cta h2 { margin-top: 0; font-size: 1.35rem; }
.article-cta a:not(.btn) { color: var(--amber); }
.article-side { position: sticky; top: calc(var(--header-h) + 20px); }

/* Galeri */
.gallery { columns: 3; column-gap: .85rem; }
.gallery-item { margin: 0 0 .85rem; break-inside: avoid; border-radius: var(--radius-sm); overflow: hidden; }
.gallery-item img { width: 100%; transition: transform .4s var(--ease); }
.gallery-item:hover img { transform: scale(1.04); }

/* İletişim */
.contact-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.75rem, 4vw, 3.5rem); align-items: start; }
.contact-cards { display: grid; gap: 1rem; margin: 2rem 0; }
.contact-cards li { display: flex; gap: 1rem; padding: 1.35rem; background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.contact-cards img { width: 32px; height: 32px; flex: 0 0 32px; object-fit: contain; }
.contact-cards h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.contact-cards p { margin: .25rem 0 0; font-size: .875rem; }
.contact-value { display: block; color: var(--amber); font-family: var(--font-head); font-size: 1.05rem; }

.contact-form-wrap { padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); }
.contact-form { display: grid; gap: 1rem; margin-top: 1.5rem; }
.field { display: grid; gap: .4rem; }
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.field label { font-size: .875rem; color: var(--heading); }
.field label span { color: var(--amber); }
.field input, .field textarea {
  padding: .8rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--heading);
  transition: border-color .2s var(--ease);
}
.field input:focus, .field textarea:focus { border-color: var(--amber); outline: none; }
.field textarea { resize: vertical; min-height: 140px; }
.err { color: #ff9a9a; font-size: .8125rem; }
.hp { position: absolute; left: -9999px; }

/* Harekete geçirici bant */
.cta-band { text-align: center; }
.cta-inner { max-width: 46rem; margin-inline: auto; padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.5rem, 4vw, 3rem); background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius); }
.cta-inner .lead { margin-inline: auto; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin-top: 1.5rem; }
.contact-info .cta-actions, .section-404 .cta-actions { justify-content: flex-start; }

/* 404 */
.section-404 { text-align: center; padding-block: clamp(4rem, 12vw, 8rem); }
.section-404 .lead { margin-inline: auto; }
.section-404 .cta-actions { justify-content: center; }

/* ---------- 8. Duyarlı ---------- */

@media (max-width: 1024px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .detail-layout, .article-layout { grid-template-columns: minmax(0, 1fr); }
  .detail-side, .article-side { position: static; }
  .gallery { columns: 2; }
}

@media (max-width: 860px) {
  .header-cta { display: none; }
  .burger { display: flex; }
  /* Menü mobilde akıştan çıkıyor; hamburger'i sağa iten margin buraya taşınıyor */
  .header-actions { margin-left: auto; }

  /* Menü, üst bara göre konumlanır: yükseklik değişse de boşluk oluşmaz. */
  /*
   * DIKKAT: .site-header uzerindeki backdrop-filter yeni bir containing
   * block olusturuyor; o durumda position:fixed viewport a degil header a
   * baglaniyor ve bottom:0 ise yaramiyor. Menu tam ekran kapladigi icin
   * mobilde bulaniklastirmaya gerek yok, kaldiriliyor.
   */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--bg); }

  /*
   * Mobil menu: fixed + top/bottom ile viewport a sabitleniyor.
   * Onceki absolute + 100dvh kurgusunda iOS Safari nin arac cubugu
   * hesaba katilmiyor, panelin alti ekranin disinda kaliyordu.
   */
  .nav {
    position: fixed; top: var(--header-h); left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column;
    padding: 1rem 1.25rem calc(1.5rem + env(safe-area-inset-bottom, 0px));
    background: var(--bg);
    border-top: 1px solid var(--line-soft);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-12px);
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  /* Rezervasyon en onemli eylem: 39 satirlik menunun dibinde degil basinda */
  .nav-foot { order: -1; margin-top: 0; margin-bottom: 1.25rem; }
  .nav-list { order: 1; }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; }
  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-item { border-bottom: 1px solid var(--line-soft); }
  .nav-link { justify-content: space-between; padding: .95rem .25rem; font-size: 1.0625rem; border-radius: 0; }
  .sub-list {
    position: static; opacity: 1; transform: none;
    /* visibility kalitsal: menu kapaliyken .nav ile birlikte gizlensin.
       "visible" yazilirsa ebeveynin hidden i ezilir ve gorunmez linkler
       sayfa icerigini kapatip tiklamalari calar. */
    visibility: inherit;
    min-width: 0; padding: 0 0 .75rem .75rem;
    background: none; border: 0; box-shadow: none;
  }
  .nav-foot { display: grid; gap: .75rem; justify-items: stretch; margin-top: 1.5rem; }
  .nav-phone { text-align: center; font-family: var(--font-head); color: var(--amber); }

  .section-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .about-grid, .amenity-layout, .contact-layout, .faq-layout { grid-template-columns: minmax(0, 1fr); }
  .hero-panel { grid-template-columns: minmax(0, 1fr); }
  .hero-video img { min-height: 220px; aspect-ratio: 16 / 10; }
}

@media (max-width: 600px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .gallery { columns: 1; }
  .detail-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-card { padding: 1.75rem 1.35rem; }
  .btn { padding: .8rem 1.35rem; }
  .hero-actions .btn, .cta-actions .btn { flex: 1 1 auto; }
  .hero-proof { flex-direction: column; gap: .85rem; }
  .play { width: 60px; height: 60px; }
}


/* ---------- 9. İçerik blokları (landing / blog) ---------- */

.article-body-wide { max-width: 74ch; }

/* Tablolar: dar ekranda kendi içinde yatay kayar, sayfa kaymaz */
.table-wrap { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); }
.data-table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 480px; }
.data-table caption { padding: .9rem 1rem; text-align: left; color: var(--text-dim); font-size: .8125rem; border-bottom: 1px solid var(--line-soft); }
.data-table th, .data-table td { padding: .8rem 1rem; text-align: left; border-bottom: 1px solid var(--line-soft); }
.data-table thead th { background: var(--surface-2); color: var(--heading); font-family: var(--font-head); font-weight: 600; font-size: .875rem; white-space: nowrap; }
.data-table tbody th { color: var(--heading); font-weight: 500; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: rgba(255, 255, 255, .02); }

/* Numaralı liste */
.num-list { display: grid; gap: .65rem; counter-reset: nl; }
.num-list li { position: relative; padding-left: 2.25rem; counter-increment: nl; }
.num-list li::before {
  content: counter(nl);
  position: absolute; left: 0; top: .1em;
  display: grid; place-items: center;
  width: 24px; height: 24px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: 50%;
  font-family: var(--font-head); font-size: .75rem; color: var(--amber);
}

/* Bilgi kutusu */
.note-box {
  margin: 1.75rem 0; padding: 1.35rem 1.5rem;
  background: var(--surface); border-left: 3px solid var(--amber); border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.note-box h3 { font-size: 1.05rem; margin-bottom: .35rem; }
.note-box p { margin: 0; font-size: .9375rem; }

/* Metin içi harekete geçirici */
.inline-cta {
  margin: 2rem 0; padding: 1.5rem;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.inline-cta p { color: var(--heading); font-family: var(--font-head); font-size: 1.05rem; }
.inline-cta .cta-actions { justify-content: flex-start; margin-top: 1rem; }

/* Yan sütun bağlantıları */
.side-links { display: grid; gap: .5rem; margin-bottom: 1.25rem; font-size: .9375rem; }
.side-links a { display: block; padding: .5rem .75rem; background: var(--bg); border-radius: 8px; }
.side-links a:hover { color: var(--amber); }

.article-figure figcaption { margin-top: .6rem; font-size: .8125rem; color: var(--text-dim); }

.article-body strong { color: var(--heading); font-weight: 600; }
.article-body h2 { scroll-margin-top: calc(var(--header-h) + 16px); }

/* Ana sayfa arama odaklı içerik bölümü */
.seo-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.seo-main { max-width: 74ch; }
.seo-main > p { margin-bottom: 1.15rem; }
.seo-main strong { color: var(--heading); font-weight: 600; }
.seo-side { position: sticky; top: calc(var(--header-h) + 20px); }
.seo-side .booking-box { padding: 1.5rem; }
.seo-side .table-wrap { margin: 1rem 0; }
.seo-side .data-table { min-width: 0; font-size: .875rem; }
.seo-side .data-table th, .seo-side .data-table td { padding: .55rem .6rem; }
.hero-slogan {
  font-family: var(--font-head); font-size: clamp(1.05rem, 2vw, 1.35rem);
  color: var(--amber); margin-bottom: .85rem;
}
@media (max-width: 1024px) {
  .seo-layout { grid-template-columns: minmax(0, 1fr); }
  .seo-side { position: static; }
}

.blog-intro { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); }

/* Liste ve tablo sonrası nefes payı — metin bloğa yapışmasın */
.article-body .check-list,
.article-body .num-list,
.seo-main .check-list { margin-bottom: 1.5rem; }
.article-body .num-list + p,
.article-body .check-list + p { margin-top: 0; }

strong, b { font-weight: 600; }

/* Duyarlı görsellerde <picture> yalnızca kaynak seçimi için var; kutu
   oluşturmasın ki mevcut ".kart img" seçicileri aynen çalışsın. */
picture { display: contents; }

/* Dome/deneyim detay sayfasinda anlatimin basindaki tam genislik gorsel */
.detail-cover { margin: 1.5rem 0 2rem; border-radius: var(--radius); overflow: hidden; }
.detail-cover img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }

/* =========================================================================
   Rezervasyon
   ========================================================================= */

.rez-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.rez-main > h2 { margin-top: 2.5rem; }
.rez-main > h2:first-child { margin-top: 0; }
.rez-side { display: grid; gap: var(--gap); position: sticky; top: calc(var(--header-h) + 1rem); }

/* Hesap çubuğu */
.rez-hesap {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1rem 1.35rem; margin-bottom: var(--gap);
  background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.rez-hesap .kicker { margin: 0; }
.rez-eposta { margin: 0; color: var(--heading); font-family: var(--font-head); font-size: 1.0625rem; }
.rez-rozet {
  display: inline-block; margin-left: .4rem; padding: .15rem .6rem;
  background: var(--lime); color: #111; border-radius: var(--radius-pill);
  font-size: .75rem; font-family: var(--font-body); letter-spacing: .04em;
}
.rez-hesap-eylem { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Formlar */
.rez-form { display: grid; gap: 1rem; margin: 1rem 0 0; }
.rez-form .alan { display: grid; gap: .4rem; }
.rez-form label { font-size: .875rem; color: var(--text); }
.istege-bagli { color: var(--text-dim); }
.rez-form input, .rez-form select, .rez-form textarea {
  width: 100%; padding: .8rem 1rem;
  background: var(--bg); color: var(--heading);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 1rem;
}
.rez-form input:focus-visible, .rez-form select:focus-visible, .rez-form textarea:focus-visible {
  border-color: var(--amber); outline: none;
}
.rez-form textarea { resize: vertical; min-height: 5rem; }
.alan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; }
.alan.has-hata input, .alan.has-hata select { border-color: #c0563c; }
.alan-hata { margin: -.35rem 0 0; font-size: .8125rem; color: #e0795c; }

/* Bot tuzağı: gözden ve ekran okuyucudan gizli */
.tuzak { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.rez-giris { padding: 1.75rem 1.5rem; }
.rez-giris .section-title { margin-bottom: .5rem; }

/* Ünite listesi */
.rez-unite-list { display: grid; gap: .6rem; margin: 0 0 1rem; }
.rez-unite {
  display: grid; grid-template-columns: 3.25rem minmax(0, 1fr) auto; gap: .8rem; align-items: center;
  padding: .6rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.rez-unite-gorsel img { width: 3.25rem; height: 3.25rem; border-radius: var(--radius-sm); object-fit: cover; }
.rez-unite-bilgi { display: grid; gap: .1rem; min-width: 0; }
.rez-unite-bilgi strong { color: var(--heading); font-family: var(--font-head); font-size: .9375rem; }
.rez-unite-bilgi small { color: var(--text-dim); font-size: .8125rem; }
.rez-durum { font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.rez-unite.is-musait { border-color: rgba(189, 217, 44, .35); }
.rez-unite.is-musait .rez-durum { color: var(--lime); }
.rez-unite.is-dolu { opacity: .55; }
.rez-unite.is-dolu .rez-durum { color: var(--text-dim); }

/* Takvim */
.rez-takvim { background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1rem; }
.rez-takvim-ust { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.rez-takvim-baslik { margin: 0; font-family: var(--font-head); font-size: 1.125rem; color: var(--heading); }
.rez-ok {
  display: grid; place-items: center; width: 2.25rem; height: 2.25rem;
  border: 1px solid var(--line); border-radius: 50%; color: var(--heading);
}
.rez-ok:hover { border-color: var(--amber); color: var(--amber); }
.rez-takvim-gunler { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .3rem; }
.rez-gun-adi { text-align: center; font-size: .75rem; color: var(--text-dim); padding-bottom: .3rem; }
.rez-gun {
  aspect-ratio: 1; display: grid; place-items: center;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: .875rem; font-family: var(--font-body);
}
.rez-gun.is-bos { border: 0; }
.rez-gun.is-musait { background: rgba(189, 217, 44, .1); border-color: rgba(189, 217, 44, .3); color: var(--heading); cursor: pointer; }
.rez-gun.is-musait:hover { background: rgba(189, 217, 44, .22); }
.rez-gun.is-musait.is-secili { background: var(--amber); color: #111; border-color: var(--amber); font-weight: 600; }
.rez-gun.is-musait.is-aralik { background: rgba(255, 183, 0, .18); border-color: rgba(255, 183, 0, .35); }
.rez-gun.is-dolu { background: var(--surface-2); color: var(--text-dim); text-decoration: line-through; cursor: not-allowed; }
.rez-gun.is-gecmis { color: #4a4a4a; cursor: not-allowed; }
.rez-lejant { display: flex; flex-wrap: wrap; gap: 1rem; margin: 1rem 0 0; font-size: .8125rem; color: var(--text-dim); }
.rez-lejant li { display: flex; align-items: center; gap: .4rem; }
.rez-lejant .nokta { width: .7rem; height: .7rem; border-radius: 3px; }
.rez-lejant .nokta.is-musait { background: rgba(189, 217, 44, .5); }
.rez-lejant .nokta.is-dolu { background: var(--surface-2); border: 1px solid var(--line); }
.rez-lejant .nokta.is-gecmis { background: #333; }

/* Kayıt listesi */
.rez-tablo code { font-size: .8125rem; color: var(--amber); }
.rez-etiket { display: inline-block; padding: .25rem .7rem; border-radius: var(--radius-pill); font-size: .8125rem; white-space: nowrap; }
.rez-etiket.is-bekliyor { background: rgba(255, 183, 0, .15); color: var(--amber); }
.rez-etiket.is-onayli { background: rgba(189, 217, 44, .15); color: var(--lime); }
.rez-etiket.is-iptal { background: rgba(192, 86, 60, .15); color: #e0795c; }
.rez-islem form { display: flex; gap: .4rem; flex-wrap: wrap; }
.rez-not-satir td { background: var(--surface-2); color: var(--text-dim); }

/* Yönetim özeti */
.rez-ozet { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .75rem; margin-bottom: var(--gap); }
.rez-ozet-kart {
  padding: 1.1rem 1.25rem; background: var(--surface);
  border: 1px solid var(--line-soft); border-radius: var(--radius); display: grid; gap: .2rem;
}
.rez-ozet-kart strong { font-family: var(--font-head); font-size: 1.75rem; color: var(--heading); line-height: 1; }
.rez-ozet-kart span { font-size: .8125rem; color: var(--text-dim); }
.rez-ozet-kart.is-aktif { border-color: var(--amber); }

/* Onay penceresi */
.rez-onay {
  width: min(92vw, 30rem); max-width: none; padding: 0;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.rez-onay::backdrop { background: rgba(8, 8, 8, .82); backdrop-filter: blur(5px); }
.rez-onay-ic { padding: 2rem 1.75rem 1.75rem; }
.rez-onay-ikon {
  display: grid; place-items: center; width: 3rem; height: 3rem; margin-bottom: 1rem;
  background: rgba(189, 217, 44, .15); color: var(--lime);
  border-radius: 50%; font-size: 1.5rem;
}
.rez-onay .spec-list { margin-bottom: 1rem; }
.rez-onay-metin { color: var(--text); }
.rez-onay-vurgu {
  padding: 1rem 1.15rem; margin: 1rem 0 1.25rem;
  background: rgba(255, 183, 0, .08); border-left: 2px solid var(--amber);
  border-radius: var(--radius-sm); font-size: .9375rem;
}
.rez-onay-vurgu p { margin: 0; }
.rez-onay .btn { margin-bottom: .5rem; }

.alert-warn { background: rgba(192, 86, 60, .1); border: 1px solid rgba(192, 86, 60, .35); }

@media (max-width: 900px) {
  .rez-layout { grid-template-columns: minmax(0, 1fr); }
  .rez-side { position: static; }
}

.rez-adim {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem; margin-right: .6rem;
  background: var(--amber); color: #111;
  border-radius: 50%; font-size: 1rem; vertical-align: middle;
}

/* Canli ozet: secilen gece ve kisi sayisi */
.rez-ozet-canli {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem;
  padding: .85rem 1.15rem; margin: 0 0 1rem;
  background: rgba(189, 217, 44, .08); border: 1px solid rgba(189, 217, 44, .25);
  border-radius: var(--radius-sm); color: var(--heading); font-size: .9375rem;
}
.rez-ozet-canli.is-uyari { background: rgba(192, 86, 60, .1); border-color: rgba(192, 86, 60, .4); }
.rez-ozet-uyari { color: #e0795c; font-size: .875rem; }
.rez-kapasite-not { font-size: .9375rem; color: var(--text); margin-bottom: 1rem; }

/* --- Takvim: daha kompakt --------------------------------------------- */

.rez-takvim { max-width: 26rem; padding: 1rem; }
.rez-takvim-ust { margin-bottom: .75rem; }
.rez-takvim-baslik { font-size: 1rem; }
.rez-ok { width: 1.9rem; height: 1.9rem; font-size: .875rem; }
.rez-takvim-gunler { gap: .2rem; }
.rez-gun-adi { font-size: .6875rem; padding-bottom: .2rem; }
.rez-gun { font-size: .8125rem; border-radius: 8px; }

/* Hafta sonu: ayrı renk, hem başlıkta hem günlerde */
.rez-gun-adi.is-haftasonu { color: var(--amber); }
.rez-gun.is-musait.is-haftasonu {
  background: rgba(255, 183, 0, .12);
  border-color: rgba(255, 183, 0, .35);
  color: #ffd166;
}
.rez-gun.is-musait.is-haftasonu:hover { background: rgba(255, 183, 0, .24); }
/* Seçim rengi hafta sonunda da aynı kalsın ki seçili gün belirsizleşmesin */
.rez-gun.is-musait.is-haftasonu.is-secili { background: var(--amber); color: #111; border-color: var(--amber); }
.rez-gun.is-musait.is-haftasonu.is-aralik { background: rgba(255, 183, 0, .2); }

.rez-lejant .nokta.is-haftasonu { background: rgba(255, 183, 0, .5); }

/* Seçilen aralığın özeti, takvimin hemen altında */
.rez-secim-ozeti {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  max-width: 26rem; margin: -.25rem 0 1.25rem;
  padding: .7rem 1rem;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); font-size: .875rem; color: var(--text);
}
.rez-secim-ozeti strong { color: var(--heading); }
.rez-secim-ozeti.is-bos { color: var(--text-dim); }

/* --- Konaklama seçim kartları ----------------------------------------- */

.rez-secim { display: grid; gap: .6rem; margin: 0 0 1.5rem; }

.rez-secim-kart {
  position: relative;
  display: grid; grid-template-columns: 4.5rem minmax(0, 1fr) auto;
  gap: 1rem; align-items: center;
  padding: .75rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius); transition: border-color .2s var(--ease), background .2s var(--ease);
}
.rez-secim-kart:hover { border-color: var(--line); }

/* Radyo düğmesi görsel olarak gizli ama klavyeyle erişilebilir */
.rez-secim-kart input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
}
.rez-secim-kart:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 3px; }
.rez-secim-kart:has(input:checked) { border-color: var(--amber); background: rgba(255, 183, 0, .06); }

.rez-secim-gorsel img { width: 4.5rem; height: 4.5rem; border-radius: var(--radius-sm); object-fit: cover; }
.rez-secim-bilgi { display: grid; gap: .15rem; min-width: 0; }
.rez-secim-bilgi strong { color: var(--heading); font-family: var(--font-head); font-size: 1.0625rem; }
.rez-secim-bilgi small { color: var(--text-dim); font-size: .8125rem; }
.rez-secim-durum {
  justify-self: start; margin-top: .15rem; padding: .15rem .6rem;
  border-radius: var(--radius-pill); font-size: .75rem;
  background: rgba(189, 217, 44, .15); color: var(--lime);
}

.rez-secim-tik {
  display: grid; place-items: center;
  width: 1.75rem; height: 1.75rem;
  border: 1px solid var(--line); border-radius: 50%;
  color: transparent; font-size: .875rem;
}
.rez-secim-kart:has(input:checked) .rez-secim-tik {
  background: var(--amber); border-color: var(--amber); color: #111;
}

/* Dolu ünite: görünür ama seçilemez */
.rez-secim-kart.is-dolu { opacity: .5; cursor: not-allowed; }
.rez-secim-kart.is-dolu .rez-secim-durum { background: var(--surface-2); color: var(--text-dim); }
.rez-secim-kart.is-dolu .rez-secim-tik { border-style: dashed; }

@media (max-width: 480px) {
  .rez-secim-kart { grid-template-columns: 3.5rem minmax(0, 1fr) auto; gap: .75rem; }
  .rez-secim-gorsel img { width: 3.5rem; height: 3.5rem; }
}

.rez-kucuk-not { font-size: .875rem; color: var(--text-dim); }

.rez-giris-ipucu {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .9rem; align-items: center;
  margin: 0 0 1.75rem; padding: .9rem 1.1rem;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.rez-giris-ipucu svg { color: var(--amber); }
.rez-giris-ipucu p { margin: 0; font-size: .875rem; color: var(--text-dim); }
.rez-giris-ipucu strong { display: block; color: var(--heading); font-size: .9375rem; }
.rez-giris-ipucu .btn { flex: none; }

@media (max-width: 560px) {
  .rez-giris-ipucu { grid-template-columns: auto minmax(0, 1fr); }
  .rez-giris-ipucu .btn { grid-column: 1 / -1; justify-self: start; }
}

/* --- Başlıktaki hesap kısayolu ------------------------------------------ */

.hesap-link {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .85rem .45rem .7rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  color: var(--text); font-size: .8125rem; line-height: 1;
  white-space: nowrap;
  transition: border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease);
}
.hesap-link:hover,
.hesap-link:focus-visible { border-color: var(--amber); color: var(--heading); }
.hesap-link svg { flex: none; }

/* Giriş yapılmışsa rozet belirginleşiyor */
.hesap-link.is-girisli {
  border-color: rgba(189, 217, 44, .45);
  color: var(--lime);
  background: rgba(189, 217, 44, .08);
}
.hesap-link.is-girisli:hover { border-color: var(--lime); }

/* Dar ekranda yalnızca ikon kalıyor; hamburger menüyle yan yana sığsın */
@media (max-width: 980px) {
  .hesap-metin { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
  .hesap-link { padding: .45rem; border-radius: 50%; }
}

/* --- Misafirin kendi kayıtları ------------------------------------------ */

.rez-kayitlarim {
  margin: 0 0 1.5rem; padding: 1.25rem;
  background: var(--surface-2);
  border: 1px solid rgba(189, 217, 44, .25);
  border-radius: var(--radius);
}
.rez-kayitlarim h2 { margin: 0 0 1rem; font-size: 1.375rem; }
.rez-kayitlarim .table-wrap { margin: 0 }
.rez-kayitlarim .rez-kucuk-not { margin: 1rem 0 0 }

/* Geçmiş kayıtlar: JavaScript'siz açılır bölüm */
.rez-gecmis {
  margin: 0 0 2rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface);
}
.rez-gecmis > summary {
  display: flex; align-items: center; gap: .6rem;
  padding: .9rem 1.1rem; cursor: pointer;
  font-family: var(--font-head); font-size: 1rem; color: var(--heading);
  list-style: none;
}
.rez-gecmis > summary::-webkit-details-marker { display: none }
.rez-gecmis > summary::before {
  content: ""; flex: none;
  width: .5rem; height: .5rem;
  border-right: 2px solid var(--amber); border-bottom: 2px solid var(--amber);
  transform: rotate(-45deg); transform-origin: center;
  transition: transform .2s var(--ease);
}
.rez-gecmis[open] > summary::before { transform: rotate(45deg) }
.rez-gecmis > summary:hover { color: var(--amber) }
.rez-gecmis > summary:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px }

.rez-gecmis-sayi {
  margin-left: auto; padding: .1rem .55rem;
  border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-dim);
  font-family: var(--font-body); font-size: .75rem;
}

.rez-gecmis .table-wrap { margin: 0; padding: 0 1.1rem 1.1rem }

/* Geçmiş kayıtlar soluk: dikkat mevcut rezervasyonda kalsın */
.rez-gecmis .rez-tablo { opacity: .75 }

@media (max-width: 560px) {
  .rez-kayitlarim { padding: 1rem }
  .rez-gecmis .table-wrap { padding: 0 .75rem .75rem }
}

/* --- Yönetim: takvimi elle kapatma -------------------------------------- */

.rez-engel-bolum { margin: 2.5rem 0 2rem }
.rez-engel-bolum h2 { margin-bottom: .5rem }

.rez-engel-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 1rem; align-items: end;
  margin: 0 0 1.5rem; padding: 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.rez-engel-form .alan { margin: 0 }
.rez-engel-form .btn { height: 2.85rem }

.alan-istege-bagli { color: var(--text-dim); font-weight: 400 }
.rez-bos { color: var(--text-dim) }

@media (max-width: 560px) {
  .rez-engel-form { grid-template-columns: minmax(0, 1fr); padding: 1rem }
}

/* Devir günü: sabah çıkış, öğleden sonra yeni giriş — yarısı dolu */
/* Ust yarisi dolu (11:00 e kadar), alt yarisi musait — ayni gun giris acik */
.rez-gun.is-devir {
  background: linear-gradient(160deg,
      var(--surface-2) 0 46%,
      rgba(220, 80, 60, .5) 46% 54%,
      rgba(189, 217, 44, .18) 54% 100%);
  border-color: rgba(189, 217, 44, .3);
}
.rez-gun.is-devir:hover {
  background: linear-gradient(160deg,
      var(--surface-2) 0 46%,
      rgba(220, 80, 60, .5) 46% 54%,
      rgba(189, 217, 44, .3) 54% 100%);
}
.rez-gun.is-devir.is-haftasonu {
  background: linear-gradient(160deg,
      var(--surface-2) 0 46%,
      rgba(220, 80, 60, .5) 46% 54%,
      rgba(255, 183, 0, .2) 54% 100%);
  border-color: rgba(255, 183, 0, .35);
}
.rez-gun.is-devir.is-secili,
.rez-gun.is-devir.is-aralik { background-image: none }

.rez-lejant .nokta.is-devir {
  background: linear-gradient(160deg, var(--surface-2) 0 44%, rgba(220, 80, 60, .6) 44% 56%, rgba(189, 217, 44, .45) 56% 100%);
}

.rez-takvim-not {
  max-width: 26rem; margin: .35rem 0 1.25rem;
  font-size: .8125rem; color: var(--text-dim);
}

/* --- Yönetim panosu ------------------------------------------------------ */

.yon-pano { margin: 2rem 0 2.5rem }
.yon-pano > h2 { margin-bottom: 1.25rem }

.yon-pano-izgara {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 1.5rem; align-items: start;
}

/* Takvim ------------------------------------------------------------------ */

.yon-takvim {
  padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.yon-takvim-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: 1rem;
}
.yon-takvim-baslik {
  margin: 0; font-family: var(--font-head); font-size: 1.0625rem; color: var(--heading);
}

.yon-takvim-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .25rem;
}
.yon-gun-adi {
  padding-bottom: .35rem; text-align: center;
  font-size: .6875rem; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-dim);
}
.yon-gun-adi.is-haftasonu { color: var(--amber) }

.yon-gun {
  display: flex; flex-direction: column; gap: .1rem;
  min-height: 3.1rem; padding: .3rem .35rem;
  border: 1px solid var(--line-soft); border-radius: 6px;
  background: var(--surface-2);
  font-size: .75rem; overflow: hidden;
}
.yon-gun.is-bos-hucre { background: none; border: none; min-height: 0 }

.yon-gun-no { font-weight: 500; color: var(--text-dim); line-height: 1.2 }
.yon-gun-ad {
  font-size: .6875rem; line-height: 1.25; color: var(--heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Durum renkleri */
.yon-gun.is-onayli {
  background: rgba(189, 217, 44, .16); border-color: rgba(189, 217, 44, .4);
}
.yon-gun.is-onayli .yon-gun-no { color: var(--lime) }

.yon-gun.is-bekliyor {
  background: rgba(255, 183, 0, .14); border-color: rgba(255, 183, 0, .4);
}
.yon-gun.is-bekliyor .yon-gun-no { color: var(--amber) }

.yon-gun.is-engel {
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .05) 0 5px, transparent 5px 10px);
  border-color: var(--line);
}
.yon-gun.is-engel .yon-gun-ad { color: var(--text-dim) }

/* Çıkış günü: köşede işaret, altındaki durum rengini gizlemez */
.yon-gun.is-devir {
  background-image: linear-gradient(225deg,
    rgba(220, 80, 60, .45) 0 .55rem, transparent .55rem);
  background-repeat: no-repeat;
}

.yon-gun.is-bugun { outline: 2px solid var(--amber); outline-offset: -2px }
.yon-gun.is-gecmis { opacity: .45 }
.yon-gun.is-haftasonu .yon-gun-no { font-weight: 600 }

.yon-lejant {
  display: flex; flex-wrap: wrap; gap: .35rem 1rem;
  margin: 1rem 0 0; padding: 0; list-style: none;
  font-size: .75rem; color: var(--text-dim);
}
.yon-lejant li { display: flex; align-items: center; gap: .4rem }
.yon-lejant .kutu {
  width: .8rem; height: .8rem; border-radius: 3px;
  border: 1px solid var(--line-soft); background: var(--surface-2);
}
.yon-lejant .kutu.is-onayli   { background: rgba(189, 217, 44, .45) }
.yon-lejant .kutu.is-bekliyor { background: rgba(255, 183, 0, .45) }
.yon-lejant .kutu.is-engel    {
  background: repeating-linear-gradient(135deg,
    rgba(255, 255, 255, .28) 0 3px, transparent 3px 6px);
}
.yon-lejant .kutu.is-devir {
  background: linear-gradient(225deg, rgba(220, 80, 60, .6) 0 .4rem, var(--surface-2) .4rem);
}

/* Rapor ------------------------------------------------------------------- */

.yon-rapor { display: grid; gap: 1rem }

.yon-oran {
  padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.yon-oran-cubuk {
  height: .6rem; border-radius: var(--radius-pill);
  background: var(--surface-2); overflow: hidden;
}
.yon-oran-cubuk span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--lime), var(--amber));
  border-radius: var(--radius-pill);
}
.yon-oran-deger {
  margin: .75rem 0 .2rem; font-family: var(--font-head);
  font-size: 1.5rem; color: var(--heading);
}
.yon-oran-deger strong { color: var(--lime); font-weight: inherit }
.yon-oran-alt { margin: 0; font-size: .8125rem; color: var(--text-dim) }

.yon-metrik {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0; margin: 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden;
}
.yon-metrik > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: .5rem; padding: .6rem .85rem;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
}
.yon-metrik > div:nth-child(odd) { border-right: 1px solid var(--line-soft) }
.yon-metrik > div:nth-last-child(-n+2) { border-bottom: none }
.yon-metrik dt { font-size: .75rem; color: var(--text-dim) }
.yon-metrik dd {
  margin: 0; font-family: var(--font-head); font-size: 1.0625rem; color: var(--heading);
}

.yon-yeni-talep {
  margin: 0; padding: .8rem 1rem;
  background: var(--surface-2); border-radius: var(--radius);
  font-size: .875rem; color: var(--text-dim);
}
.yon-yeni-talep strong { color: var(--heading) }
.yon-yeni-talep small { display: block; margin-top: .15rem; font-size: .75rem }

/* Yaklaşan hareketler ----------------------------------------------------- */

.yon-hareket {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1.5rem; margin-top: 1.5rem; padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.yon-hareket .kicker { margin-bottom: .6rem }

.yon-hareket-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: .5rem }
.yon-hareket-liste li {
  display: grid; gap: .1rem;
  padding: .55rem .75rem;
  background: var(--surface-2); border-radius: var(--radius-sm);
  font-size: .875rem;
}
.yon-hareket-liste strong { color: var(--amber); font-weight: 500 }
.yon-hareket-liste small { color: var(--text-dim); font-size: .75rem }

@media (max-width: 900px) {
  .yon-pano-izgara { grid-template-columns: minmax(0, 1fr)}
}
@media (max-width: 480px) {
  .yon-takvim { padding: .85rem }
  .yon-gun { min-height: 2.5rem; padding: .25rem }
  .yon-gun-ad { display: none }
  .yon-metrik { grid-template-columns: minmax(0, 1fr)}
  .yon-metrik > div:nth-child(odd) { border-right: none }
  .yon-metrik > div:nth-last-child(2) { border-bottom: 1px solid var(--line-soft) }
}

.rez-cakisma {
  display: block; margin-top: .3rem;
  font-size: .6875rem; color: #ff8a70;
}

/* --- Yönetim takvimi: giriş / çıkış satırları ---------------------------- */

.yon-gun { min-height: 4.2rem; gap: .12rem; position: relative }

.yon-cikis,
.yon-giris {
  display: flex; align-items: center; gap: .15rem;
  padding: .1rem .25rem; border-radius: 3px;
  font-size: .625rem; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.yon-ok { flex: none; font-size: .7rem; line-height: 1 }

/* Çıkış: sabah 11'de boşalıyor */
.yon-cikis { background: rgba(220, 80, 60, .28); color: #ffc4b8 }
/* Giriş: 14:00'ten sonra */
.yon-giris { background: rgba(189, 217, 44, .28); color: #e4f09a }

/*
 * Çıkış olan gün yatay ikiye bölünüyor: üst yarı biten konaklama,
 * alt yarı o gecenin durumu. Tek renk göstermek "gün boş" algısı yaratıyordu.
 */
.yon-gun.is-cikisli {
  background: linear-gradient(180deg,
    rgba(220, 80, 60, .16) 0 42%,
    var(--line-soft) 42% 44%,
    transparent 44% 100%);
}
.yon-gun.is-cikisli.is-bos {
  background: linear-gradient(180deg,
    rgba(220, 80, 60, .16) 0 42%,
    var(--line-soft) 42% 44%,
    var(--surface-2) 44% 100%);
}
.yon-gun.is-cikisli.is-onayli {
  background: linear-gradient(180deg,
    rgba(220, 80, 60, .16) 0 42%,
    var(--line-soft) 42% 44%,
    rgba(189, 217, 44, .16) 44% 100%);
}
.yon-gun.is-cikisli.is-bekliyor {
  background: linear-gradient(180deg,
    rgba(220, 80, 60, .16) 0 42%,
    var(--line-soft) 42% 44%,
    rgba(255, 183, 0, .14) 44% 100%);
}

/* Devir günü: aynı gün hem çıkış hem giriş — dar temizlik penceresi */
.yon-gun.is-devir {
  background-image: none;
  border-color: rgba(255, 138, 112, .65);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 112, .35);
}

.yon-temizlik-rozet {
  margin-top: auto; padding: .05rem .3rem;
  border-radius: 3px; align-self: flex-start;
  background: rgba(255, 138, 112, .22); color: #ff8a70;
  font-size: .625rem; letter-spacing: .03em; text-transform: uppercase;
}

.yon-lejant .kutu.is-devir {
  background: none;
  border-color: rgba(255, 138, 112, .65);
  box-shadow: inset 0 0 0 1px rgba(255, 138, 112, .35);
}
.yon-lejant .kutu.is-cikis { background: rgba(220, 80, 60, .45) }
.yon-lejant .kutu.is-giris { background: rgba(189, 217, 44, .45) }

/* --- Temizlik takibi ----------------------------------------------------- */

.yon-temizlik-uyari {
  display: flex; gap: .9rem; align-items: flex-start;
  margin: 0 0 1.5rem; padding: 1rem 1.15rem;
  background: rgba(255, 138, 112, .1);
  border: 1px solid rgba(255, 138, 112, .45);
  border-radius: var(--radius);
}
.yon-temizlik-uyari svg { flex: none; color: #ff8a70; margin-top: .1rem }
.yon-temizlik-uyari p { margin: 0; font-size: .875rem }
.yon-temizlik-uyari strong { display: block; color: #ff8a70; font-size: .9375rem }
.yon-temizlik-uyari ul { margin: .5rem 0 0; padding-left: 1.1rem; font-size: .8125rem }
.yon-temizlik-uyari li { margin-bottom: .2rem }

.yon-temizlik-liste .is-acil td,
.yon-temizlik-liste .is-acil th { background: rgba(255, 138, 112, .08) }

.yon-rozet-acil {
  padding: .1rem .5rem; border-radius: var(--radius-pill);
  background: rgba(255, 138, 112, .2); color: #ff8a70; font-size: .6875rem;
}
.yon-rozet-normal {
  padding: .1rem .5rem; border-radius: var(--radius-pill);
  background: var(--surface-2); color: var(--text-dim); font-size: .6875rem;
}

@media (max-width: 480px) {
  .yon-gun { min-height: 3.4rem }
  .yon-cikis, .yon-giris { font-size: 0; padding: .12rem }
  .yon-cikis .yon-ok, .yon-giris .yon-ok { font-size: .6rem }
}

/* --- Takvim: iki ay yan yana --------------------------------------------- */

.rez-takvim { max-width: 46rem }
.rez-takvim-aylar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem;
}
.rez-ay-adi {
  margin: 0 0 .5rem; text-align: center;
  font-family: var(--font-head); font-size: .9375rem; color: var(--heading);
}
.rez-secim-ozeti,
.rez-takvim-not { max-width: 46rem }

@media (max-width: 640px) {
  .rez-takvim { max-width: 26rem }
  .rez-takvim-aylar { grid-template-columns: minmax(0, 1fr); gap: 1.25rem }
}

/* --- Yönetim takvimi: iki ay + tıklanabilir günler ----------------------- */

.yon-takvim-aylar {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem;
}
.yon-ay-adi {
  margin: 0 0 .5rem; text-align: center;
  font-family: var(--font-head); font-size: .9375rem; color: var(--heading);
}

/* Gün artık buton: seçilebilir olanlar imleç değiştiriyor */
button.yon-gun {
  text-align: left; font: inherit; color: inherit;
  appearance: none; cursor: default;
}
.yon-gun.is-secilebilir { cursor: pointer }
.yon-gun.is-secilebilir:hover { border-color: var(--amber) }
.yon-gun.is-secilebilir:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px }
.yon-gun[disabled] { cursor: not-allowed }

.yon-gun.is-secili {
  border-color: var(--amber); background: rgba(255, 183, 0, .25);
}
.yon-gun.is-aralikta { background: rgba(255, 183, 0, .12); border-color: rgba(255, 183, 0, .35) }

/* Kapatma paneli ---------------------------------------------------------- */

.yon-kapatma {
  margin-top: 1rem; padding: 1.15rem;
  background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.yon-kapatma.is-kapali .yon-kapatma-form { display: none }

.yon-kapatma-ust { margin-bottom: .9rem }
.yon-kapatma-ust .kicker { margin-bottom: .35rem }
.yon-kapatma-ipucu { margin: 0; font-size: .875rem; color: var(--text-dim) }
.yon-kapatma-ipucu strong { color: var(--heading) }

.yon-kapatma-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem; align-items: end;
}
.yon-kapatma-form .alan { margin: 0 }
.yon-kapatma-form .alan-genis { grid-column: 1 / -1 }

.yon-kapatma-eylem {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem;
}

.alan-zorunlu {
  padding: .05rem .4rem; border-radius: var(--radius-pill);
  background: rgba(255, 138, 112, .18); color: #ff8a70;
  font-size: .6875rem; font-weight: 400;
}
.alan-not { display: block; margin-top: .3rem; font-size: .75rem; color: var(--text-dim) }

@media (max-width: 760px) {
  .yon-takvim-aylar { grid-template-columns: minmax(0, 1fr)}
  .yon-kapatma-form { grid-template-columns: minmax(0, 1fr)}
}

/* Onay kutulu alan (ek yatak vb.) */
.alan-onay {
  display: flex; gap: .65rem; align-items: flex-start;
  margin: 0 0 1.25rem; padding: .75rem .9rem;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); cursor: pointer; font-size: .875rem;
}
.alan-onay input { margin-top: .15rem; accent-color: var(--amber) }
.alan-onay small { display: block; margin-top: .15rem; font-size: .75rem; color: var(--text-dim) }
.alan-onay:hover { border-color: var(--line) }

/* --- Konaklama yönetimi -------------------------------------------------- */

/* Yönetim bölümleri arasında geçiş — sayfanın en üstünde */
/* stylelint-disable-next-line */
.yon-sekme {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin: 0 0 1.5rem; padding: .6rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-pill);
}
.yon-eylem { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 1.5rem }

@media (max-width: 560px) {
  .yon-sekme { border-radius: var(--radius); }
  .yon-sekme .btn { flex: 1 1 auto; justify-content: center; text-align: center }
}

.yon-kart {
  margin: 0 0 1.5rem; padding: 1.5rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius);
}
.yon-kart > h2 { margin: 0 0 1rem; font-size: 1.375rem }
.yon-kart-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin-bottom: .5rem;
}
.yon-kart-ust h2 { margin: 0 }
.yon-sayi { font-size: .8125rem; color: var(--text-dim) }

/* Ünite listesi ----------------------------------------------------------- */

.yon-unite-liste { display: grid; gap: .75rem }

.yon-unite {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr) auto auto;
  gap: 1rem; align-items: center;
  padding: .85rem; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.yon-unite-gorsel img {
  width: 7.5rem; height: 5.6rem; object-fit: cover;
  border-radius: var(--radius-sm);
}
.yon-gorsel-yok {
  display: grid; place-items: center;
  width: 7.5rem; height: 5.6rem;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  font-size: .6875rem; color: var(--text-dim);
}
.yon-unite-bilgi { display: grid; gap: .15rem; min-width: 0 }
.yon-unite-bilgi strong { color: var(--heading); font-family: var(--font-head); font-size: 1.0625rem }
.yon-unite-bilgi small { font-size: .75rem; color: var(--text-dim) }
.yon-unite-eylem { display: flex; flex-wrap: wrap; gap: .4rem }
.yon-unite-eylem form { margin: 0 }

/* Formlar ----------------------------------------------------------------- */

.yon-form {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem;
}
.yon-form .alan { margin: 0 }
.yon-form .alan-genis { grid-column: 1 / -1 }
.yon-form-eylem { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .6rem }

.yon-kapasite {
  padding: 1rem; margin: 0;
  border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.yon-kapasite legend {
  padding: 0 .5rem; font-family: var(--font-head);
  font-size: .9375rem; color: var(--heading);
}
.yon-kapasite-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .9rem; margin-bottom: .9rem;
}
.yon-kapasite-grid .alan { margin: 0 }

.yon-tip-form { margin-top: 1.5rem }

/* Görsel yönetimi --------------------------------------------------------- */

.yon-gorsel-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: 1rem; margin: 0 0 1.5rem;
}
.yon-gorsel {
  margin: 0; padding: .6rem;
  background: var(--surface-2); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
}
.yon-gorsel.is-ana { border-color: rgba(189, 217, 44, .45) }
.yon-gorsel img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm);
}
.yon-gorsel figcaption {
  display: grid; gap: .2rem; margin: .5rem 0;
  font-size: .6875rem; color: var(--text-dim); word-break: break-all;
}
.yon-rozet-ana {
  justify-self: start; padding: .05rem .45rem;
  border-radius: var(--radius-pill);
  background: rgba(189, 217, 44, .18); color: var(--lime); font-size: .625rem;
}
.yon-gorsel-eylem { display: flex; flex-wrap: wrap; gap: .35rem }
.yon-gorsel-eylem form { margin: 0 }

.yon-yukleme {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem; align-items: end;
  padding: 1.15rem; background: var(--surface-2);
  border: 1px solid var(--line-soft); border-radius: var(--radius);
}
.yon-yukleme .alan { margin: 0 }
.yon-yukleme .alan-onay,
.yon-yukleme > .btn { grid-column: 1 / -1; justify-self: start }
.yon-yukleme input[type="file"] {
  width: 100%; padding: .55rem; font-size: .8125rem;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); color: var(--text);
}

@media (max-width: 760px) {
  .yon-form,
  .yon-yukleme { grid-template-columns: minmax(0, 1fr)}
  .yon-kapasite-grid { grid-template-columns: minmax(0, 1fr)}
  .yon-unite { grid-template-columns: 5rem minmax(0, 1fr) }
  .yon-unite-gorsel img,
  .yon-gorsel-yok { width: 5rem; height: 3.75rem }
  .yon-unite-durum,
  .yon-unite-eylem { grid-column: 1 / -1 }
}

/* ---------------------------------------------------------------------------
   Form alanları — ortak
   Alan stilleri eskiden yalnızca .rez-form altındaydı; yönetim ekranlarındaki
   formlar (.yon-form, .yon-yukleme, .yon-kapatma-form) stilsiz kalıyordu.
   Kurallar artık .alan sarmalayıcısına bağlı, hangi form olursa olsun geçerli.
   --------------------------------------------------------------------------- */

.alan { display: grid; gap: .4rem }

.alan > label {
  font-size: .875rem; color: var(--text);
}

.alan input[type="text"],
.alan input[type="email"],
.alan input[type="tel"],
.alan input[type="url"],
.alan input[type="number"],
.alan input[type="date"],
.alan input[type="search"],
.alan input[type="password"],
.alan select,
.alan textarea {
  width: 100%; padding: .7rem .9rem;
  background: var(--bg); color: var(--heading);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: .9375rem;
  transition: border-color .2s var(--ease);
}

.alan input:focus-visible,
.alan select:focus-visible,
.alan textarea:focus-visible {
  border-color: var(--amber); outline: none;
}

.alan textarea { resize: vertical; min-height: 4.5rem; line-height: 1.55 }

/* Tarayıcının takvim/adım okları koyu zeminde görünmüyordu */
.alan input[type="date"]::-webkit-calendar-picker-indicator,
.alan input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(1) opacity(.6); cursor: pointer;
}
.alan input[type="date"]:hover::-webkit-calendar-picker-indicator { filter: invert(1) opacity(1) }

/* Dosya seçici: tarayıcı varsayılanı temayla uyuşmuyor */
.alan input[type="file"] {
  width: 100%; padding: .6rem;
  background: var(--bg); color: var(--text);
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  font-size: .875rem; cursor: pointer;
}
.alan input[type="file"]:hover { border-color: var(--amber) }
.alan input[type="file"]::file-selector-button {
  margin-right: .75rem; padding: .4rem .8rem;
  background: var(--surface-2); color: var(--heading);
  border: 1px solid var(--line-soft); border-radius: var(--radius-pill);
  font: inherit; font-size: .8125rem; cursor: pointer;
}
.alan input[type="file"]::file-selector-button:hover { border-color: var(--amber) }

/* Alan altı yardım metni ve etiket ekleri */
.alan-not {
  font-size: .75rem; color: var(--text-dim); line-height: 1.5;
}
.alan-not code,
.alan > label code {
  padding: .05rem .3rem; border-radius: 3px;
  background: var(--surface-2); font-size: .9em;
}

/* Gruplanmış alanlar */
fieldset { min-width: 0; border: none; padding: 0; margin: 0 }
fieldset legend { padding: 0 }

.yon-adres { color: var(--text-dim); font-size: .6875rem; word-break: break-all }

/* İki aylık yönetim takviminde her ayın kendi sütunu */
.yon-takvim-ay { min-width: 0 }

.yon-temizlik-bolum { margin: 2.5rem 0 2rem }
.yon-temizlik-bolum h2 { margin-bottom: .5rem }

/* --- Fiyat yönetimi ------------------------------------------------------ */

.fiyat-izgara {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: 1.5rem; align-items: start;
}
.fiyat-sag { position: sticky; top: calc(var(--header-h) + 20px) }

.yon-sekme-ayrac {
  flex: 1 1 1rem; min-width: 0;
}

/* Hafta sonu günü seçimi */
.fiyat-gun-secim {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .35rem;
}
.fiyat-gun {
  display: grid; place-items: center;
  padding: .5rem .25rem; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  font-size: .75rem; color: var(--text-dim);
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.fiyat-gun input { position: absolute; opacity: 0; width: 1px; height: 1px }
.fiyat-gun:hover { border-color: var(--line) }
.fiyat-gun:has(input:checked) {
  background: rgba(255, 183, 0, .14); border-color: rgba(255, 183, 0, .5);
  color: var(--amber); font-weight: 600;
}
.fiyat-gun:has(input:focus-visible) { outline: 2px solid var(--amber); outline-offset: 2px }

/* Tarife tablosu */
.fiyat-tablo td { font-variant-numeric: tabular-nums }
.is-gecmis-satir { opacity: .5 }

/* Fiyat takvimi */
.fiyat-takvim-secim { margin-bottom: 1rem }
.fiyat-takvim-secim .alan { margin: 0 }

.fiyat-takvim-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .75rem;
}

.fiyat-takvim-grid {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: .2rem; margin-bottom: 1.25rem;
}
.fiyat-gun-hucre {
  display: grid; gap: .05rem; place-items: center;
  min-height: 2.9rem; padding: .25rem .1rem;
  border: 1px solid var(--line-soft); border-radius: 5px;
  background: var(--surface-2);
  line-height: 1.15;
}
.fiyat-gun-hucre.is-bos { background: none; border: none; min-height: 0 }
.fiyat-gun-hucre b { font-size: .75rem; font-weight: 500; color: var(--text-dim) }
.fiyat-gun-hucre small { font-size: .625rem; color: var(--heading); font-variant-numeric: tabular-nums }

/* Fiyatın hangi kuraldan geldiği */
.fiyat-gun-hucre.is-haftasonu b { color: var(--amber) }
.fiyat-gun-hucre.is-unite {
  background: rgba(189, 217, 44, .12); border-color: rgba(189, 217, 44, .3);
}
.fiyat-gun-hucre.is-donem {
  background: rgba(255, 138, 112, .14); border-color: rgba(255, 138, 112, .45);
}
.fiyat-gun-hucre.is-donem small { color: #ff8a70; font-weight: 600 }

.yon-lejant .kutu.is-varsayilan { background: var(--surface-2) }
.yon-lejant .kutu.is-unite      { background: rgba(189, 217, 44, .35) }
.yon-lejant .kutu.is-donem      { background: rgba(255, 138, 112, .45) }

@media (max-width: 980px) {
  .fiyat-izgara { grid-template-columns: minmax(0, 1fr) }
  .fiyat-sag { position: static }
}
@media (max-width: 480px) {
  .fiyat-gun { font-size: .6875rem; padding: .45rem .1rem }
  .fiyat-gun-hucre { min-height: 2.5rem }
}

/* --- Rezervasyon tutarı --------------------------------------------------- */

.rez-tutar {
  margin: 0 0 1.25rem; padding: 1.15rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid rgba(189, 217, 44, .3); border-radius: var(--radius);
}
.rez-tutar.is-bos { border-color: var(--line-soft) }
.rez-tutar-bos { margin: 0; font-size: .875rem; color: var(--text-dim) }

.rez-tutar-satirlar { display: grid; gap: .35rem; margin-bottom: .75rem }
.rez-tutar-satir {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; font-size: .875rem; color: var(--text-dim);
}
.rez-tutar-satir b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums }

.rez-tutar-toplam {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; margin: 0; padding-top: .75rem;
  border-top: 1px solid var(--line-soft);
  font-size: .9375rem; color: var(--text);
}
.rez-tutar-toplam strong {
  font-family: var(--font-head); font-size: 1.5rem; color: var(--lime);
  font-variant-numeric: tabular-nums;
}

.rez-tutar-not { margin: .75rem 0 0; font-size: .75rem; color: var(--text-dim); line-height: 1.5 }

.rez-tutar-hucre { font-variant-numeric: tabular-nums; white-space: nowrap }
.rez-onay-tutar dd { color: var(--lime); font-weight: 600 }

/* --- Gömülü harita ------------------------------------------------------- */

.harita {
  margin: 1.25rem 0 2rem;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow: hidden; background: var(--surface-2);
}
.harita iframe {
  display: block; width: 100%; aspect-ratio: 16 / 10; border: 0;
}
.harita figcaption {
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: space-between; gap: .5rem 1rem;
  padding: .8rem 1rem; font-size: .875rem; color: var(--text-dim);
}
.harita figcaption strong { color: var(--heading); font-weight: 500 }
.harita figcaption a { color: var(--amber) }

@media (max-width: 560px) {
  .harita iframe { aspect-ratio: 4 / 3 }
}

/* ---------------------------------------------------------------------------
   Otomatik rezervasyon anahtarı (yönetim) ve kapalı akış (ziyaretçi)
   --------------------------------------------------------------------------- */

.yon-oto {
  display: flex; flex-wrap: wrap; gap: 1rem 1.5rem;
  align-items: center; justify-content: space-between;
  margin-bottom: 1.25rem; padding: 1rem 1.25rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--lime);
  border-radius: var(--radius-sm);
}
.yon-oto.is-kapali { border-left-color: var(--amber); }

.yon-oto-baslik {
  display: flex; align-items: center; gap: .6rem;
  margin: 0 0 .2rem; font-family: var(--font-head); font-size: 1.0625rem;
}
.yon-oto-rozet {
  padding: .15rem .55rem; border-radius: 999px;
  font-family: var(--font-body); font-size: .75rem; font-weight: 600;
  letter-spacing: .02em; text-transform: uppercase;
  background: rgba(189, 217, 44, .16); color: var(--lime);
}
.yon-oto.is-kapali .yon-oto-rozet { background: rgba(255, 183, 0, .16); color: var(--amber); }

.yon-oto-alt { margin: 0; max-width: 60ch; font-size: .9375rem; color: var(--muted); }
.yon-oto-form { margin: 0; }

.rez-kapali-uyari {
  margin-bottom: 1.5rem; padding: 1.1rem 1.25rem;
  background: rgba(255, 183, 0, .08);
  border: 1px solid rgba(255, 183, 0, .28);
  border-radius: var(--radius-sm);
}
.rez-kapali-uyari p { margin: 0 0 .5rem; }
.rez-kapali-uyari p:last-child { margin-bottom: 0; }
.rez-kapali-iletisim { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem !important; }

.rez-ara { margin-top: .6rem; }

@media (max-width: 560px) {
  .yon-oto { flex-direction: column; align-items: stretch; }
  .yon-oto-form .btn { width: 100%; }
}

/* Yönetici parola girişi — müşteriyi meşgul etmesin diye katlanmış durur */
.rez-yonetici {
  margin-top: 1.75rem; padding-top: 1.25rem;
  border-top: 1px solid var(--line-soft);
}
.rez-yonetici > summary {
  cursor: pointer; font-size: .9375rem; color: var(--muted);
  list-style: none;
}
.rez-yonetici > summary::-webkit-details-marker { display: none; }
.rez-yonetici > summary::before { content: "▸ "; }
.rez-yonetici[open] > summary::before { content: "▾ "; }
.rez-yonetici > summary:hover { color: var(--amber); }
.rez-yonetici .rez-form { margin-top: 1rem; }