/* =========================================================
   Atlas Erkek Yurdu – CSS DOSYASI
   ========================================================= */

/* 0) TOKENS & RESET */
:root{
  --text:#0f172a; --muted:#475569;
  --bg-dark:#0b1220; --panel-dark:#111827;
  --border:#e2e8f0; --shadow:rgba(0,0,0,.12);
  --brand:#2563eb; --brand-900:#1e40af;
  --violet:#7c3aed; --rose:#f43f5e; --green:#16a34a;
  --chip-ring:rgba(59,130,246,.25);
  --radius:16px;
}
*{ box-sizing:border-box }
html,body{ height:100%; scroll-behavior:smooth; -webkit-text-size-adjust:100% }
a{ text-decoration:none } a:hover{ text-decoration:underline }

/* iOS çentik güvenli alanı */
#siteHeader{ padding-top:max(env(safe-area-inset-top),0px) }

/* =========================================================
   1) SABİT HEADER — Overlay (şeffaf) / Solid (bordo)
   --------------------------------------------------------- */

#siteHeader{
  position:fixed; top:0; left:0; right:0; z-index:9999;
  background:transparent; color:#fff;
  backdrop-filter:none; -webkit-backdrop-filter:none;
  transition: background-color .2s ease, box-shadow .2s ease, border-color .2s ease;
}

/* Tepede: tamamen şeffaf */
#siteHeader.header-overlay{
  background: transparent !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}

/* Scroll sonrası: bordo */
#siteHeader.header-solid{
  background:#7b1e26 !important;
  border-bottom:1px solid rgba(255,255,255,.15);
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}

/* Linkler */
#siteHeader .nav-link{
  color:#fff; display:inline-block; padding:.5rem .9rem;
  border-radius:.5rem; font-weight:600; transition:.2s;
}
#siteHeader .nav-link:hover{ background:rgba(255,255,255,.10) }
#siteHeader .nav-link.active,
#siteHeader .nav-link[aria-current="page"]{ background:#570202; color:#fff !important }

/* Sabit header boşluğu */
#headerSpacer{ min-height:56px }
@media (min-width:768px){ #headerSpacer{ min-height:68px } }

/* Mobil & tablet: logo ortada, hamburger sağda */
@media (max-width:1023.98px){
  #siteHeader > div:first-child{
    position:relative; display:flex; align-items:center; justify-content:center;
  }
  #siteHeader a[aria-label="Ana sayfa"]{ margin:0 auto } /* logo */
  #siteHeader #navToggle{ position:absolute; right:16px; top:50%; transform:translateY(-50%) }
}

/* Global blur kapalı (tasarım tercihi) */
[class*="backdrop-blur"], *{
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}
section.bg-transparent.relative{ isolation:isolate }

/* =========================================================
   2) HERO – mobil/tablet ortalama
   --------------------------------------------------------- */
#topWrap{ position:relative; overflow-x:hidden }
#topWrap .hero-grid{ position:relative; z-index:1 }

@media (max-width:767.98px){
  #topWrap .hero-grid{
    display:grid; grid-template-columns:minmax(0,1fr);
    gap:16px; padding:56px 16px 20px; justify-items:center;
  }
  #topWrap .hero-grid > .bg-white\/20,
  #topWrap .hero-grid > .hero-gallery{
    width:100%; max-width:680px; margin-inline:auto; border-radius:16px; box-sizing:border-box;
  }
  #topWrap .hero-grid > .bg-white\/20{ text-align:center }
  #topWrap .hero-grid > .bg-white\/20 .flex{ justify-content:center }
  #heroGallery{ width:100%; max-width:680px; margin:0 auto }
}

@media (min-width:768px) and (max-width:1023.98px){
  #topWrap .hero-grid{
    display:grid; grid-template-columns:1.05fr .95fr !important;
    gap:20px !important; align-items:center; justify-items:center; padding:72px 20px 28px;
  }
  #topWrap .hero-grid > .bg-white\/20,
  #topWrap .hero-grid > .hero-gallery{
    min-width:0; width:100%; max-width:720px; margin-inline:auto; box-sizing:border-box;
  }
  #heroGallery{ width:100%; max-width:720px; margin:0 auto }
}

/* Swiper */
#heroGallery{
  position:relative; width:100%; aspect-ratio:4/3;
  height:clamp(200px,38vw,360px) !important; border-radius:12px; overflow:hidden;
}
#heroGallery .swiper-wrapper{ height:100% !important }
#heroGallery .swiper-slide{ height:100% !important }
#heroGallery .swiper-slide img{
  width:100% !important; height:100% !important; display:block; object-fit:cover !important;
}
@media (min-width:640px){ #heroGallery{ height:clamp(240px,32vw,420px) !important } }
@media (min-width:768px){ #heroGallery{ height:clamp(260px,28vw,460px) !important } }
#heroGallery .swiper-button-prev,
#heroGallery .swiper-button-next{
  width:38px; height:38px; border-radius:999px; background:rgba(255,255,255,.8);
  border:1px solid rgba(0,0,0,.08); z-index:5; top:auto; bottom:10px;
}
#heroGallery .swiper-button-prev{ left:10px } 
#heroGallery .swiper-button-next{ right:10px }
#heroGallery .swiper-button-prev:after,
#heroGallery .swiper-button-next:after{ font-size:14px; color:#1f2937 }
#heroGallery .swiper-pagination{ z-index:5; position:absolute; bottom:10px !important }
#heroGallery .swiper-pagination-bullet{ background:rgba(255,255,255,.9) }
@media (max-width:360px){ #heroGallery{ height:200px !important } }

/* =========================================================
   3) ODALAR – kart özetleri
   --------------------------------------------------------- */
.odaurora{ position:absolute; inset:-20% -10% auto -10%; height:40vh;
  background:
    radial-gradient(60% 80% at 20% 40%, rgba(59,130,246,.35), transparent 60%),
    radial-gradient(50% 70% at 80% 20%, rgba(236,72,153,.28), transparent 60%),
    radial-gradient(60% 60% at 50% 80%, rgba(34,197,94,.22), transparent 55%);
  filter:blur(32px); opacity:.8;
}
@media (max-width:767.98px){ .odaurora{ display:none } }

.chip{
  --ring:var(--chip-ring);
  padding:.5rem .9rem; border-radius:999px; border:1px solid var(--chip-ring);
  background:rgba(255,255,255,.7); font-weight:600; font-size:.9rem; color:var(--text); transition:.2s
}
.chip:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.08) }
.chip:focus-visible{ outline:2px solid var(--ring) }
.chip-active{ background:linear-gradient(180deg,#fff,rgba(255,255,255,.6)); border-color:rgba(59,130,246,.5) }

.odacard{
  position:relative; border-radius:18px; cursor:pointer;
  background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.76));
  border:1px solid var(--chip-ring); box-shadow:0 6px 16px rgba(59,130,246,.22);
  transition:transform .2s ease, box-shadow .2s ease;
}
.odacard:focus-visible{ outline:3px solid rgba(59,130,246,.35) }
@media(hover:hover) and (pointer:fine){ .odacard:hover{ transform:translateY(-2px); box-shadow:0 18px 45px rgba(0,0,0,.18) } }
.odacard-body{ position:relative; z-index:1; padding:18px }

.odacard-media{
  position:relative; border-radius:14px; overflow:hidden; height:180px; border:1px solid rgba(255,255,255,.5)
}
.odacard-media img{ width:100%; height:100%; object-fit:cover; display:block }
@media(min-width:640px){ .odacard-media{ height:200px } }
@media(min-width:1024px){ .odacard-media{ height:220px } }

.odatag{
  padding:.25rem .6rem; border-radius:999px; background:rgba(59,130,246,.12); color:#1e3a8a;
  border:1px solid var(--chip-ring); font-size:.75rem; font-weight:700
}

.btn-solid{
  display:inline-flex; align-items:center; gap:.5rem; padding:.6rem 1rem;
  border-radius:12px; background:var(--brand); color:#fff; font-weight:600;
  box-shadow:0 4px 12px rgba(37,99,235,.25);
  transition:transform .15s ease, box-shadow .15s ease, background .2s ease
}
.btn-solid:hover{ background:var(--brand-900); transform:translateY(-1px) }
.btn-ghost{ padding:.6rem .9rem; border-radius:12px; background:rgba(255,255,255,.7); border:1px solid rgba(0,0,0,.06); font-weight:700; color:var(--text) }

@media (max-width:767.98px){ .odacard{ transform:none !important } .odacard:hover{ transform:none !important } }
:where(.odacard) .btn-solid,:where(.odacard) .btn-ghost{ float:none !important; display:inline-flex; margin-top:8px }
.odacard .btn-row{ display:flex; gap:10px; align-items:center; justify-content:flex-start }
@media (max-width:480px){
  .odacard .btn-row{ flex-direction:column; align-items:stretch }
  .odacard .btn-row .btn-solid,.odacard .btn-row .btn-ghost{ width:100%; justify-content:center }
}
@media (max-width:639.98px){
  .odacard-body{ padding-bottom:14px }
  .odacard .odatag{ margin-top:6px }
  .odacard .features, .odacard ul{ margin:8px 0 0 }
}
@supports (-webkit-line-clamp:2){
  .odacard h3, .amen-title, #hero h1, .hero-title{
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word;
  }
}

.hero-title{
  display:block !important;
  overflow:visible !important;
  text-overflow:clip !important;
  white-space:normal !important;
  -webkit-line-clamp:unset !important;
  line-clamp:unset !important;
  -webkit-box-orient:unset !important;
}

/* =========================================================
   4) İMKANLAR
   --------------------------------------------------------- */
#imkanlar{ position:relative; isolation:isolate }
#imkanlar .imk-kicker{
  display:inline-block; padding:.28rem .6rem; border-radius:999px;
  font:700 .78rem/1.1 ui-sans-serif,system-ui,Segoe UI,Roboto,Helvetica,Arial;
  background:#eef2ff; color:#3730a3; border:1px solid #c7d2fe; letter-spacing:.02em;
}
#imkanlar .imk-title{
  font-weight:800; color:var(--text); margin-top:.55rem;
  font-size:clamp(1.5rem,.9rem + 1.6vw,1.875rem); line-height:1.12;
}
#imkanlar .imk-underline{
  width:88px; height:4px; border-radius:999px; margin:.6rem 0;
  background:linear-gradient(90deg,var(--brand),var(--violet),var(--rose)); opacity:.9;
}
#imkanlar .imk-lead{ color:var(--muted); max-width:60ch }

.amen-chip{
  padding:.55rem .9rem; border-radius:999px; font-weight:600;
  background:#fff; color:var(--text); border:1px solid rgba(15,23,42,.1);
  transition:.18s
}
.amen-chip:hover{ transform:translateY(-1px); box-shadow:0 8px 16px rgba(0,0,0,.06) }
.amen-chip--active{
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.85));
  border-color:#93c5fd; color:#1e3a8a; box-shadow:0 0 0 4px rgba(96,165,250,.15)
}

#imkanlar .amen-card, .amen-card{
  position:relative; display:flex; gap:14px; padding:16px; border-radius:18px;
  border:2px solid transparent;
  background:
    linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.86)) padding-box,
    linear-gradient(135deg, rgba(37,99,235,.25), rgba(124,58,237,.18), rgba(244,63,94,.12)) border-box;
  box-shadow:0 8px 22px rgba(15,23,42,.06); transition:transform .2s ease, box-shadow .2s ease;
}
@media(hover:hover) and (pointer:fine){
  #imkanlar .amen-card:hover, .amen-card:hover{ transform:translateY(-2px); box-shadow:0 14px 34px rgba(15,23,42,.12) }
}
.amen-icon{
  flex:0 0 44px; height:44px; border-radius:12px; display:grid; place-items:center;
  font-size:22px; background:#eff6ff; border:1px solid #dbeafe; color:#1e40af; box-shadow:0 6px 16px rgba(37,99,235,.08)
}
.amen-title{ font-weight:700; color:var(--text) }
.amen-desc{ color:var(--muted); margin-top:4px; font-size:.95rem; line-height:1.45 }
@media (max-width:639.98px){
  .amen-card{ padding:14px; border-radius:16px }
  .amen-icon{ flex-basis:40px; height:40px; font-size:20px }
  #imkanlar .imk-lead{ font-size:.95rem }
}

/* =========================================================
   5) LOKASYON (kartlar)
   --------------------------------------------------------- */
#lokasyon{ position:relative; isolation:isolate }
.lok-chip{
  padding:.55rem .9rem; border-radius:999px; font-weight:600; background:#fff;
  color:#0f172a; border:1px solid rgba(15,23,42,.12); transition:.2s
}
.lok-chip:hover{ transform:translateY(-1px); box-shadow:0 6px 12px rgba(0,0,0,.05) }
.lok-chip--active{ background:#2563eb; color:#fff; border-color:#2563eb }

.loc-card{
  position:relative; padding:16px; border-radius:16px; background:#fff;
  border:1px solid var(--border); box-shadow:0 4px 10px rgba(0,0,0,.05);
  display:flex; gap:12px; align-items:flex-start; overflow:hidden; transition:.25s
}
.loc-card:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.12) }

/* =========================================================
   6) GALERİ – Masonry
   --------------------------------------------------------- */
.gal-masonry{ column-gap:16px }
@media (min-width:640px){ .gal-masonry{ column-count:2 } }
@media (min-width:1024px){ .gal-masonry{ column-count:3 } }

/* =========================================================
   7) KONUM & İLETİŞİM BLOĞU (merkezlenmiş + fallback'li)
   ========================================================= */
.section--contact { padding:64px 0; }
.section--contact .section-head { text-align:center; margin-bottom:24px; }
.section--contact .section-head h2 {
  font-size:clamp(1.6rem, 1.2rem + 1.2vw, 2rem);
  margin:0 0 6px; font-weight:800;
}
.section--contact .section-head .muted { color:var(--muted, #9db2ce); margin:0; }

/* KONTEYNER ve GRID'i sayfa ortasına al */
.section--contact .container{
  max-width:1200px;
  margin-inline:auto;
  padding-inline:16px;
}
.section--contact .contact-grid{
  max-width:1100px;           /* grid bloğu da ortaya */
  margin-inline:auto;
  display:grid;
  grid-template-columns:1.2fr 1fr;  /* harita : kart oranı */
  gap:24px;
  align-items:stretch;
}
@media (max-width:992px){
  .section--contact .contact-grid{
    grid-template-columns:1fr;
    gap:16px;
    max-width:720px;
  }
}

/* Harita */
.contact-map{ display:flex; flex-direction:column; height:100%; min-height:380px; }
.contact-map iframe{
  flex:1 1 auto; width:100%; height:100%;
  display:block; border:0; border-radius:16px;
  background:var(--bg-dark, #0b1220);
}

/* Sağdaki kart */
.contact-card{
  display:flex; flex-direction:column; height:100%; min-height:380px;
  background:var(--panel-dark, #0b1220);
  border:1px solid #1f2937; border-radius:16px; padding:20px; color:#fff;
}
.contact-title{ font-size:1.25rem; font-weight:800; text-align:center; margin:0 0 8px; }
.contact-list{ list-style:none; margin:12px 0 0; padding:0; display:grid; gap:12px; }

.contact-item{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  border:1px solid #1f2937; border-radius:14px; padding:12px 14px; background:#0d1527;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; color:#fff;
}
.contact-item:hover{
  transform:translateY(-1px); box-shadow:0 6px 22px rgba(0,0,0,.2);
  border-color:rgba(59,130,246,.45);
}
.contact-item .icon{
  width:40px; height:40px; min-width:40px; display:grid; place-items:center;
  border-radius:12px; background:rgba(59,130,246,.18);
}
.contact-item .text .label{ display:block; font-weight:700; color:#fff; }
.contact-item .text .value{ display:block; color:#e5e7eb; }
.contact-note{ margin-top:16px; font-size:.925rem; color:var(--muted,#9db2ce); }

@media (max-width:639.98px){
  .contact-card{ padding:16px; border-radius:14px; min-height:320px; }
  .contact-item{ padding:10px 12px; border-radius:12px; }
  .contact-item .icon{ width:36px; height:36px; min-width:36px; border-radius:10px; }
}


/* =========================================================
   8) BASİT FOOTER
   --------------------------------------------------------- */
.site-footer-simple{
  background:#7b1e26; color:#f3f4f6; text-align:center;
  padding:20px 0; overflow:hidden;
}

/* Ortalama ve dikey düzen */
.site-footer-simple .f-inner{
  margin:0 auto;                     /* container’ı ortala */
  padding:0 16px;
  display:flex;
  flex-direction:column;             /* logo üstte, yazı altta */
  align-items:center;                /* yatayda ortala */
  justify-content:center;            /* dikeyde ortala */
  gap:8px;
}

.site-footer-simple .f-logo img{
  max-height:64px; width:auto; display:block;
  margin:0 auto 4px; object-fit:contain;
}

.site-footer-simple .f-copy{
  margin:0; font-size:.95rem; color:#e5e7eb; line-height:1.4;
}


/* =========================================================
   9) FULLSHEET NAV (mobil)
   --------------------------------------------------------- */
.mnav-dim{
  position:fixed; inset:0; background:rgba(2,6,23,.45);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  z-index:80
}
.mnav{
  position:fixed; inset:auto 0 0 0; height:88vh; background:#fff; color:var(--text);
  border-top-left-radius:20px; border-top-right-radius:20px; box-shadow:0 -20px 60px rgba(0,0,0,.25);
  z-index:90; display:grid; grid-template-rows:auto 1fr auto; transform:translateY(100%);
  transition:transform .28s ease
}
.mnav.show{ transform:translateY(0) }
@media (min-width:768px){ .mnav, .mnav-dim{ display:none !important } }
@media (max-width:767.98px){
  .mnav{ height:min(88vh, calc(100svh - 12px)) }
  .mnav-body{ -webkit-overflow-scrolling:touch }
}

/* =========================================================
   10) ANİMASYON
   --------------------------------------------------------- */
@keyframes sheenMoveLite{
  0%{transform:translateX(-120%) rotate(8deg);opacity:0}
  20%{opacity:.4}
  100%{transform:translateX(120%) rotate(8deg);opacity:0}
}

/* =========================================================
   11) RESPONSIVE & HOVER KORUMALARI
   --------------------------------------------------------- */
@media (max-width:639.98px){ #siteHeader .nav-link{ padding:.55rem .8rem; border-radius:10px } }
@media (max-width:639.98px){ .odacard-body{ padding:14px } .odacard-media{ height:170px } }
@media (min-width:640px) and (max-width:767.98px){ .odacard-media{ height:190px } }
@media (min-width:768px) and (max-width:1023.98px){ .odacard-media{ height:210px } }
@media (max-width:767.98px){ .chip{ font-size:.85rem; padding:.45rem .8rem } }

@media (max-width:639.98px){
  #imkanlar .imk-title, #lokasyon .lok-title{ font-size:1.35rem }
  .amen-card{ padding:14px; border-radius:14px }
  .amen-icon{ flex-basis:38px; height:38px; font-size:19px; border-radius:10px }
  .amen-desc{ font-size:.925rem }
}
@media (min-width:640px) and (max-width:767.98px){ #imkanlar .imk-title, #lokasyon .lok-title{ font-size:1.45rem } }
@media (min-width:768px) and (max-width:1023.98px){ #imkanlar .imk-title, #lokasyon .lok-title{ font-size:1.6rem } }

@media (max-width:360px){ body{ font-size:15px } }
@media (min-width:361px) and (max-width:639.98px){ body{ font-size:16px } }
@media (min-width:640px) and (max-width:767.98px){ body{ font-size:16.5px } }

@media (hover:none){
  .odacard:hover, .amen-card:hover, .gal-item:hover{ transform:none !important; box-shadow:none !important }
  .gal-overlay{ opacity:.08 }
}

/* Konum & İletişim: kesin merkezleme */
#konum-iletisim > .container{
  max-width: 1200px;
  margin: 0 auto !important;
  padding: 0 16px;
}

#konum-iletisim .contact-grid{
  width: 100%;
  max-width: 1100px;
  margin: 0 auto !important;
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  gap: 24px;
  align-items: stretch;
}

/* Boy ve responsive */
#konum-iletisim .contact-map{ min-height: 380px; }
#konum-iletisim .contact-card{ min-height: 380px; }
#konum-iletisim .contact-map iframe,
#konum-iletisim .contact-card{ border-radius: 16px; }

@media (max-width: 992px){
  #konum-iletisim .contact-grid{
    grid-template-columns: 1fr;
    max-width: 720px;
    gap: 16px;
  }
}

/* ================== ATLAS NOVA MODAL v2 — FINAL ================== */

/* Kilitliyken kayma yok */
body.modal-open{ overflow:hidden; touch-action:none }

/* Dialog katmanı */
#odaModal.odamodal{
  border:0; padding:0; background:transparent; z-index:1000;
  width:min(1060px,96vw);
}
#odaModal.odamodal::backdrop{
  background:rgba(2,6,23,.62);
  backdrop-filter:saturate(1.1) blur(6px);
}

/* Kart: neon cam + gradient kenar */
.odamodal-card{
  position:relative; overflow:hidden; border-radius:22px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.92),rgba(255,255,255,.88)) padding-box,
    radial-gradient(1200px 700px at 0% -10%, rgba(37,99,235,.20), transparent 40%),
    radial-gradient(1200px 700px at 110% 120%, rgba(127,29,29,.18), transparent 40%) border-box;
  border:1.5px solid rgba(15,23,42,.10);
  box-shadow:0 30px 80px rgba(2,6,23,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  display:grid; grid-template-columns:48% 52%;
  transform:translateY(8px) scale(.985); opacity:0;
  transition:transform .38s cubic-bezier(.2,.8,.16,1), opacity .38s ease;
}
.odamodal[open] .odamodal-card{ transform:none; opacity:1 }

/* Mobil: alt sheet */
@media (max-width:1023.98px){
  #odaModal.odamodal{ width:100vw !important; height:100svh; margin:0 !important }
  .odamodal-card{
    width:100vw !important; height:var(--sheet-h,88svh); /* kompakt varsayılan */
    border-radius:22px 22px 0 0;
    grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr);
    position:fixed; left:0; right:0; bottom:0; margin:0;
    box-shadow:0 -8px 40px rgba(2,6,23,.45);
  }
}

/* ------------------ HERO ------------------ */
.oda-hero{
  position:relative; background:#0b1220; overflow:hidden; aspect-ratio:16/11;
}
@media (min-width:1024px){ .oda-hero{ aspect-ratio:auto } }

#odaHero{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  filter:saturate(1.06) contrast(1.04) brightness(.98);
  transform:scale(1.02);
  transition:transform .6s ease, filter .6s ease;
}
@media (hover:hover) and (pointer:fine){
  .odamodal-card:hover #odaHero{ transform:scale(1.06) }
}

/* Kavisli alt maske + aurora parıltı */
.oda-hero::before{
  content:""; position:absolute; inset:auto auto -1px -1px; right:-1px; height:48%;
  background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.35) 100%);
  -webkit-mask: radial-gradient(120% 90% at 50% -10%, #000 60%, transparent 61%);
          mask: radial-gradient(120% 90% at 50% -10%, #000 60%, transparent 61%);
}
.oda-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.75;
  background:radial-gradient(420px 260px at var(--mx,60%) var(--my,55%), rgba(255,255,255,.22), transparent 55%);
  mix-blend-mode:screen;
}

/* Chip */
#odaChip.oda-chip{
  position:absolute; left:12px; top:12px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  padding:.45rem .7rem; border-radius:999px; font-weight:800; font-size:.8rem;
  color:#0f172a; background:#fff; border:1px solid rgba(15,23,42,.12);
  box-shadow:0 12px 28px rgba(0,0,0,.18);
}

/* ------------------ BODY ------------------ */
.odamodal-body{
  position:relative; background:transparent; color:#0f172a;
  padding:26px 22px 100px;
}
@media (min-width:1024px){ .odamodal-body{ padding:28px 26px 110px } }

/* Sheet handle (mobil) */
@media (max-width:1023.98px){
  .odamodal-body::before{
    content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%);
    width:48px; height:5px; border-radius:999px; background:rgba(2,6,23,.18);
  }
}

/* Başlık */
#odaModalTitle{ margin:4px 0 6px; font-weight:900; letter-spacing:-.2px;
  font-size:clamp(1.05rem, 1rem + 1vw, 1.6rem) }

/* Özet metin */
#odaLead{ margin-top:8px; color:#334155; line-height:1.6; font-size:.98rem }

/* Özellik listesi */
#odaBullets{ list-style:none; margin:16px 0 0; padding:0; display:grid; gap:10px }
#odaBullets li{
  display:grid; grid-template-columns:28px 1fr; align-items:center;
  padding:.6rem .75rem; border-radius:12px;
  background:linear-gradient(180deg,#f8fafc,#f3f6fa);
  border:1px solid #e5e9f2; box-shadow:0 1px 0 rgba(2,6,23,.03); font-size:.96rem;
}
#odaBullets li .ico{
  display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px;
  background:#eff6ff; border:1px solid #bfdbfe; color:#1e40af; font-weight:800; line-height:1;
}
@media (min-width:1024px){ #odaBullets{ grid-template-columns:1fr 1fr } }

/* CTA dock */
.oda-cta{
  position:sticky; bottom:0; left:0; right:0; margin-top:18px;
  display:flex; justify-content:flex-end; gap:10px; padding-top:12px;
}

/* Mobil sabit alt dock + ortalı */
@media (max-width:1023.98px){
  .oda-cta{
    position:fixed !important; left:0; right:0; bottom:0; z-index:2;
    justify-content:center !important;
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 28%);
    border-top:1px solid rgba(15,23,42,.08);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0));
    transform:translateZ(0);
  }
  .odamodal-body{
    overflow:auto;
    /* CTA & boşluk düşülmüş maksimum alan (JS --cta-h set edecek) */
    max-height:calc(var(--sheet-h,88svh) - var(--hero-h,36svh) - var(--cta-h,60px) - 16px) !important;
    padding-bottom:calc(16px + env(safe-area-inset-bottom,0)) !important;
  }
  .oda-hero{ height:var(--hero-h, clamp(210px,38svh,280px)); aspect-ratio:auto }
}

/* Birincil / ikincil butonlar */
.btn-solid{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.9rem 1.05rem; border-radius:14px; font-weight:800;
  background:#7f1d1d; color:#fff; border:1px solid rgba(255,255,255,.25);
  box-shadow:0 10px 24px rgba(127,29,29,.35);
  transition:transform .15s, box-shadow .2s, background .2s;
}
.btn-solid:hover{ transform:translateY(-1px); box-shadow:0 14px 32px rgba(127,29,29,.45); background:#6b1313 }
.btn-solid:active{ transform:none }
.btn-ghost{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:.9rem 1.05rem; border-radius:14px; font-weight:800;
  background:transparent; color:#0f172a; border:1.5px solid rgba(15,23,42,.16);
  transition:transform .15s, border-color .2s, background .2s;
}
.btn-ghost:hover{ transform:translateY(-1px); border-color:#0f172a0f; background:#f6f8fb }
@media (max-width:1023.98px){ .oda-cta .btn-solid{ min-width:min(76%,380px) } }

/* Close */
.odamodal-close{
  position:absolute; right:12px; top:12px; z-index:3;
  width:40px; height:40px; border-radius:999px;
  background:rgba(255,255,255,.95); color:#0f172a;
  border:1px solid rgba(15,23,42,.12);
  display:grid; place-items:center; box-shadow:0 12px 28px rgba(0,0,0,.18);
  transition:transform .15s ease, box-shadow .2s ease;
}
.odamodal-close:hover{ transform:translateY(-1px); box-shadow:0 16px 34px rgba(0,0,0,.22) }

/* İnce scrollbar yalnız body’de */
.odamodal-body::-webkit-scrollbar{ width:10px }
.odamodal-body::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:10px; border:2px solid #e2e8f0 }
.odamodal-body{ scrollbar-color:#cbd5e1 #e2e8f0; scrollbar-width:thin }

/* Hareket azalt */
@media (prefers-reduced-motion:reduce){
  .odamodal-card,#odaHero{ transition:none !important }
}

/* ===== Auto-Compact durumunda boş alanı tamamen kaldır ===== */
@media (max-width:1023.98px){
  .odamodal-card.is-compact{
    --sheet-h:auto !important; height:auto !important;
  }
  .odamodal-card.is-compact .odamodal-body{
    max-height:none !important; overflow:visible !important;
  }
}

/* === ODA MODAL: Mobilde ortalı görünüm ile sheet modunu ayır === */
@media (max-width:1023.98px){
  /* SHEET sadece centered DEĞİLKEN aktif olsun */
  #odaModal:not(.centered) .odamodal-card{
    width:100vw !important; height:var(--sheet-h,88svh);
    border-radius:22px 22px 0 0;
    grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr);
    position:fixed; left:0; right:0; bottom:0; margin:0;
    box-shadow:0 -8px 40px rgba(2,6,23,.45);
  }
  #odaModal:not(.centered) .oda-cta{
    position:fixed !important; left:0; right:0; bottom:0; z-index:2;
    justify-content:center !important;
    background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.96) 28%);
    border-top:1px solid rgba(15,23,42,.08);
    padding:10px 16px calc(10px + env(safe-area-inset-bottom,0));
    transform:translateZ(0);
  }

  /* ORTALI MOD */
  #odaModal.centered{
    display:grid; place-items:center; padding:12px;
  }
  #odaModal.centered .odamodal-card{
    position:relative !important; inset:auto !important;
    width:min(720px,96vw) !important; height:auto !important;
    margin:0 auto !important; border-radius:22px !important;
    box-shadow:0 30px 80px rgba(2,6,23,.45), inset 0 0 0 1px rgba(255,255,255,.35);
  }
  #odaModal.centered .oda-hero{ height:auto; aspect-ratio:16/11; }
  #odaModal.centered .odamodal-body{
    max-height:min(66vh, calc(100svh - 260px)) !important; /* içeriğe scroll */
    overflow:auto !important; padding-bottom:16px !important;
  }
  #odaModal.centered .odamodal-body::before{ display:none } /* sheet tutacağı gizle */
  #odaModal.centered .oda-cta{
    position:static !important; background:transparent !important;
    border:0 !important; padding:12px 0 0 !important; justify-content:flex-end !important;
  }
}

/* ORTALI MOD – son cilâ */
@media (max-width:1023.98px){
  #odaModal.centered{
    display:grid; place-items:center;
    padding: max(12px, 2vh);                 /* kenarlardan nefes */
  }
  #odaModal.centered .odamodal-card{
    width:min(720px, 96vw) !important;
    max-height:min(92svh, 680px);            /* kart toplam yüksekliği */
    height:auto !important;
    overflow:hidden;                          /* taşma yok */
    border-radius:22px;
  }
  #odaModal.centered .oda-hero{
    height:auto; aspect-ratio:16/11;         /* üst görsel oranı */
  }
  #odaModal.centered .odamodal-body{
    max-height:calc(100% - 260px);           /* yalnız içerik kayar */
    overflow:auto; padding-bottom:16px;
  }
  #odaModal.centered .odamodal-body::before{ display:none } /* sheet tutacağı gizle */
  #odaModal.centered .oda-cta{
    position:static !important; background:transparent !important;
    border:0 !important; padding:12px 0 0 !important; justify-content:flex-end !important;
  }
}
/* === Tek ekranda – kaydırmasız (centered) === */
@media (max-width:1023.98px){
  #odaModal.centered{
    display:grid; place-items:center;
    padding: max(10px, 2vh) 10px max(10px, env(safe-area-inset-bottom,0));
  }
  #odaModal.centered .odamodal-card{
    width:min(720px,96vw) !important;
    height:auto !important;
    max-height:92svh;             /* kart ekranı aşmaz */
    overflow:hidden;               /* iç kaydırma yok */
    border-radius:22px;
  }

  /* Üst görsel oranı küçülterek yer kazan */
  #odaModal.centered .oda-hero{
    height:clamp(160px, 34svh, 240px);  /* ~1/3 ekran */
    aspect-ratio:auto;
  }

  /* Gövde: kaydırma yok, daha sıkı boşluklar */
  #odaModal.centered .odamodal-body{
    max-height:none !important;
    overflow:visible !important;
    padding:18px 18px 12px;
  }

  /* CTA sabit değil; kart içinde */
  #odaModal.centered .oda-cta{
    position:static !important;
    background:transparent !important;
    border:0 !important;
    padding-top:10px !important;
    justify-content:center !important;
  }

  /* Listeleri kompaktlaştır (2 sütun + küçük ped) */
  #odaModal.centered #odaBullets{
    grid-template-columns:1fr 1fr; gap:8px;
  }
  #odaModal.centered #odaBullets li{
    padding:.48rem .56rem; font-size:.92rem;
  }
}

/* Daha kısa ekranlar için biraz daha sıkılaştır */
@media (max-width:1023.98px) and (max-height:680px){
  #odaModal.centered .oda-hero{ height:clamp(140px, 30svh, 200px) }
  #odaModal.centered #odaModalTitle{ font-size:1.05rem }
  #odaModal.centered #odaLead{ font-size:.92rem }
  #odaModal.centered #odaBullets li{ font-size:.88rem; padding:.42rem .52rem }
}
@media (max-width:1023.98px) and (max-height:600px){
  #odaModal.centered .oda-hero{ height:28svh }
}

/* Yatay taşmayı öldür */
#odaModal { box-sizing: border-box; max-width: 100svw; width: auto; margin: 0; }

/* Centered mod: içerideki kart, pad düşülerek hesaplansın */
@media (max-width:1023.98px){
  #odaModal.centered{
    display:grid; place-items:center;
    padding: max(10px, 2vh) 10px max(10px, env(safe-area-inset-bottom,0));
    overflow: hidden;                 /* dialog'un kendisi taşmasın */
  }
  #odaModal.centered .odamodal-card{
    width: min(720px, calc(100svw - 20px)) !important; /* 10px + 10px padding */
    max-width: 100%; 
  }
}

/* iOS safari’de stabil: */
@supports (-webkit-touch-callout: none){
  #odaModal { max-width: 100vw; }
  #odaModal.centered .odamodal-card{ width: min(720px, calc(100vw - 20px)) !important; }
}

/* ===== MODAL: Masaüstünde tam merkez ===== */
@media (min-width:1024px){
  #odaModal.odamodal{
    position: fixed;          /* showModal hizasını biz yöneteceğiz */
    inset: auto;              /* UA default'u temizle */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;                /* herhangi bir top/margin'i sıfırla */
    padding: 0;
  }
}

/* ===== CTA: Her boyutta ortala (buton ve yazı zaten center) ===== */
.oda-cta{
  position: sticky;
  bottom: 0;
  display: flex;
  justify-content: center;    /* sağa yaslama kapandı → ortada */
  gap: 10px;
  padding-top: 12px;
}