/* ═══════════════════════════════════════════════════════════════════════
   CAFABLUE TEMASI — StayFit (tonatheme/2020/stayfitn) uyarlaması
   Tam tema: kendi header/footer/anasayfa şablonları (themes/cafablue/) +
   bu stylesheet. Tesisler/tesis-detay temel sayfalarına applyLayout bu
   dosyayı enjekte eder; oradaki görünüm de buradaki override'larla döner.
   Bölüm markup'ları: PageOnlineIndex render*Blue metodları (sf-* sınıfları).
   ═══════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/* ── Değişken seti (tesis8 / tesis-detay dahil tüm sayfalar) ─────────── */
html[data-theme="cafablue"], .sf-body{
  --bg:#f4f6fa; --card:#ffffff; --text:#0e1726; --text-secondary:#43506b;
  --muted:#5e6b87; --brand:#1155ff; --brand-dark:#0a3ecc;
  --accent:#0fd0ff; --accent-light:#e3f8ff; --success:#12b76a;
  --line:#dfe4ee; --radius:6px; --radius-lg:10px;
  --shadow:0 14px 34px rgba(9,30,66,.12);
  --shadow-soft:0 6px 18px rgba(9,30,66,.08);
  --shadow-hover:0 20px 44px rgba(9,30,66,.18);
  --sf-dark:#0b1c39; --sf-dark2:#10264d;
}

html[data-theme="cafablue"] body, .sf-body{
  font-family:'Roboto','Segoe UI',Arial,sans-serif;
  background:var(--bg);
  margin:0;
}
html[data-theme="cafablue"] h1, html[data-theme="cafablue"] h2, html[data-theme="cafablue"] h3,
.sf-body h1, .sf-body h2, .sf-body h3, .sf-body h4,
html[data-theme="cafablue"] .filter-title, html[data-theme="cafablue"] .info-title,
html[data-theme="cafablue"] .m-title{
  font-family:'Oswald','Roboto',sans-serif;
  text-transform:uppercase;
  letter-spacing:.03em;
}

.sf-container{ max-width:1240px; margin:0 auto; padding:0 20px; }
.sf-main{ min-height:40vh; }

/* ── Üst iletişim şeridi ─────────────────────────────────────────────── */
.sf-topbar{
  background:#061024; color:#9db1d6; font-size:12px; font-weight:600;
}
.sf-topbar .sf-container{
  display:flex; justify-content:space-between; align-items:center; height:36px;
}
.sf-topbar-left span{ margin-right:18px; }
.sf-topbar-right a{ color:#9db1d6; text-decoration:none; margin-left:12px; }
.sf-topbar-right a:hover{ color:var(--accent); }

/* ── Header (base .nav sınıfları koyulaştırılır) ─────────────────────── */
html[data-theme="cafablue"] header#header, .sf-body header#header{
  background:var(--sf-dark) !important;
  border-bottom:3px solid var(--brand);
  box-shadow:0 6px 18px rgba(4,14,32,.35);
  position:sticky; top:0; z-index:50;
}
html[data-theme="cafablue"] .nav, .sf-body .nav{ background:transparent !important; box-shadow:none !important; }
html[data-theme="cafablue"] .menu a, .sf-body .menu a{
  color:#eaf0fb !important; text-transform:uppercase; font-size:13px;
  letter-spacing:.05em; font-weight:600; font-family:'Oswald','Roboto',sans-serif;
}
html[data-theme="cafablue"] .menu a:hover, html[data-theme="cafablue"] .menu a.active,
.sf-body .menu a:hover, .sf-body .menu a.active{ color:var(--accent) !important; }
html[data-theme="cafablue"] .hamburger span, .sf-body .hamburger span{ background:#eaf0fb; }
html[data-theme="cafablue"] .actions .btn, .sf-body .actions .btn{
  background:var(--brand); color:#fff; border:none;
}

/* ── Butonlar ────────────────────────────────────────────────────────── */
.sf-btn{
  display:inline-block; background:var(--brand); color:#fff; text-decoration:none;
  padding:13px 34px; border-radius:3px; font-family:'Oswald','Roboto',sans-serif;
  font-weight:600; font-size:14px; text-transform:uppercase; letter-spacing:.08em;
  transition:all .2s ease; border:2px solid var(--brand); cursor:pointer;
}
.sf-btn:hover{ background:var(--brand-dark); border-color:var(--brand-dark); transform:translateY(-2px); box-shadow:0 10px 24px rgba(17,85,255,.35); }
.sf-btn.ghost{ background:transparent; color:var(--brand); }
.sf-btn.ghost:hover{ background:var(--brand); color:#fff; }
html[data-theme="cafablue"] .btn, html[data-theme="cafablue"] .cap-btn,
html[data-theme="cafablue"] .btn-filter, html[data-theme="cafablue"] .btn-reset{
  border-radius:3px !important; text-transform:uppercase; letter-spacing:.06em;
  font-family:'Oswald','Roboto',sans-serif; font-weight:600;
}

/* ── Bölüm başlığı kalıbı ────────────────────────────────────────────── */
.sf-sec-head{ text-align:center; max-width:720px; margin:0 auto 46px; }
.sf-sec-head .sf-pre{
  display:inline-block; color:var(--brand); font-family:'Oswald',sans-serif;
  font-weight:600; font-size:14px; letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:10px;
}
.sf-sec-head h2{
  margin:0 0 14px; font-size:38px; color:var(--text); position:relative; padding-bottom:18px;
}
.sf-sec-head h2::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:60px; height:4px; background:var(--brand);
}
.sf-sec-head p{ margin:0; color:var(--text-secondary); font-size:16px; line-height:1.7; }
.sf-sec-head.light h2, .sf-sec-head.light p{ color:#fff; }
.sf-sec-head.light p{ opacity:.85; }

/* ── HERO SLIDER — animasyonlu metin katmanı ─────────────────────────── */
.sf-slider{ position:relative; width:100%; overflow:hidden; background:var(--sf-dark); }
.sf-slide{
  display:none; position:absolute; inset:0;
  background-size:cover; background-position:center;
  animation:sfZoom 9s ease-out forwards;
}
.sf-slide.on{ display:block; }
.sf-slide.grad{
  background-image:linear-gradient(120deg,#061024 0%,#0b1c39 45%,#123a8f 100%);
  animation:none;
}
.sf-slide-veil{
  position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(4,12,28,.78) 0%, rgba(4,12,28,.45) 55%, rgba(4,12,28,.25) 100%);
}
.sf-slide-inner{
  position:relative; z-index:2; height:100%;
  max-width:1240px; margin:0 auto; padding:0 24px;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  text-align:center;
}
.sf-slide-inner.cap-left{ align-items:flex-start; text-align:left; }
.sf-slide-inner.cap-right{ align-items:flex-end; text-align:right; }
.sf-cap-title{
  margin:0 0 18px; color:#fff; font-size:60px; line-height:1.05; font-weight:700;
  text-shadow:0 4px 24px rgba(0,0,0,.5); max-width:840px;
  opacity:0; animation:sfUp .8s .15s cubic-bezier(.22,.9,.35,1) forwards;
}
.sf-cap-text{
  margin:0 0 26px; color:#dbe6f8; font-size:19px; line-height:1.6; max-width:640px;
  opacity:0; animation:sfUp .8s .45s cubic-bezier(.22,.9,.35,1) forwards;
}
.sf-cap-btn{ opacity:0; animation:sfUp .8s .75s cubic-bezier(.22,.9,.35,1) forwards; }
@keyframes sfUp{ from{ opacity:0; transform:translateY(42px); } to{ opacity:1; transform:translateY(0); } }
@keyframes sfZoom{ from{ background-size:100% auto; transform:scale(1); } to{ transform:scale(1.07); } }
.sf-dots{ position:absolute; z-index:3; bottom:22px; left:0; right:0; text-align:center; }
.sf-dots span{
  display:inline-block; width:26px; height:4px; margin:0 4px; cursor:pointer;
  background:rgba(255,255,255,.35); transition:background .2s;
}
.sf-dots span.on{ background:var(--accent); }
.sf-arrow{
  position:absolute; z-index:3; top:50%; transform:translateY(-50%);
  width:46px; height:46px; border:none; cursor:pointer; font-size:18px;
  background:rgba(255,255,255,.12); color:#fff; transition:background .2s;
}
.sf-arrow:hover{ background:var(--brand); }
.sf-arrow.prev{ left:16px; }
.sf-arrow.next{ right:16px; }

/* ── SERVICES — tesisler servis kartı olarak ─────────────────────────── */
.sf-services{ padding:90px 0; }
.sf-cards{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:28px;
}
.sf-card{
  background:var(--card); box-shadow:var(--shadow-soft); border-radius:var(--radius);
  overflow:hidden; transition:all .25s ease; border-bottom:3px solid transparent;
}
.sf-card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-hover); border-bottom-color:var(--brand); }
.sf-card-img{
  display:block; position:relative; height:210px;
  background:linear-gradient(120deg,#0b1c39,#123a8f); background-size:cover; background-position:center;
}
.sf-card-plus{
  position:absolute; right:14px; bottom:-18px; width:40px; height:40px;
  background:var(--brand); color:#fff; font-size:22px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border-radius:3px;
  box-shadow:0 8px 18px rgba(17,85,255,.4);
}
.sf-card-body{ padding:26px 22px 22px; }
.sf-card-body h3{ margin:0 0 10px; font-size:20px; }
.sf-card-body h3 a{ color:var(--text); text-decoration:none; }
.sf-card-body h3 a:hover{ color:var(--brand); }
.sf-card-body p{
  margin:0 0 14px; color:var(--text-secondary); font-size:14px; line-height:1.65;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.sf-link{
  color:var(--brand); text-decoration:none; font-weight:700; font-size:13px;
  text-transform:uppercase; letter-spacing:.06em;
}
.sf-link:hover{ color:var(--brand-dark); }
.sf-more{ text-align:center; margin-top:44px; }

/* ── AVAILABILITY — özellik blokları (koyu zemin) ────────────────────── */
.sf-avail{
  padding:90px 0;
  background:linear-gradient(120deg,#061024 0%,#0b1c39 60%,#10264d 100%);
}
.sf-avail-grid{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:26px;
}
.sf-avail-item{
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09);
  padding:32px 24px; text-align:center; border-radius:var(--radius);
  transition:all .25s ease;
}
.sf-avail-item:hover{
  background:rgba(17,85,255,.16); border-color:var(--brand); transform:translateY(-5px);
}
.sf-avail-ico{ font-size:38px; margin-bottom:14px; }
.sf-avail-item h4{ margin:0 0 10px; color:#fff; font-size:17px; letter-spacing:.05em; }
.sf-avail-item p{ margin:0; color:#b9c7e2; font-size:14px; line-height:1.65; }

/* ── HABER ŞERİDİ — sol eğik panel + kayan eğik görseller (StayFit) ──── */
.sf-news{
  display:flex; height:480px; overflow:hidden;
  background:linear-gradient(120deg,#061024,#0b1c39);
}
.sf-news-left{
  position:relative; z-index:2; width:40%; min-width:340px;
  background:linear-gradient(135deg,#1cb5e8,#0fd0ff);
  clip-path:polygon(0 0, 100% 0, 78% 100%, 0 100%);
  display:flex; align-items:center;
}
.sf-news-left-inner{
  width:82%; padding:40px 8% 40px 12%; color:#fff; text-align:center;
}
.sf-news-title{
  font-family:'Oswald',sans-serif; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; font-size:14px; margin-bottom:20px; opacity:.95;
}
.sf-news-track{ position:relative; min-height:150px; }
.sf-news-item{ display:none; animation:sfFade .8s ease forwards; }
.sf-news-item.on{ display:block; }
.sf-news-item p{
  margin:0 0 18px; font-size:19px; line-height:1.7; color:#fff; font-weight:500;
}
.sf-news-author{ color:rgba(255,255,255,.75); font-size:13px; font-weight:600; letter-spacing:.04em; }
@keyframes sfFade{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }

.sf-news-right{
  flex:1; position:relative; overflow:hidden;
  margin-left:-6%; /* sol panelin eğik kesiğinin altına girer */
}
.sf-news-strip{
  display:flex; height:100%; width:max-content;
  animation:sfMarquee 30s linear infinite;
}
.sf-news-img{
  height:100%; width:360px; flex-shrink:0;
  transform:skewX(-12deg); overflow:hidden;
  margin-right:14px; border-left:3px solid rgba(255,255,255,.06);
}
.sf-news-img-in{
  height:100%; width:130%; margin-left:-15%;
  transform:skewX(12deg); background-size:cover; background-position:center;
}
@keyframes sfMarquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.sf-news:hover .sf-news-strip{ animation-play-state:paused; }

@media (max-width:860px){
  .sf-news{ flex-direction:column; height:auto; }
  .sf-news-left{ width:100%; min-width:0; clip-path:polygon(0 0,100% 0,100% 86%,0 100%); }
  .sf-news-left-inner{ width:100%; padding:36px 24px 48px; }
  .sf-news-right{ margin-left:0; height:240px; }
}

/* ── CMS ortak bölümleri cafablue kabuğunda ──────────────────────────── */
.sf-body section#birimler, .sf-body section#harita{ padding:70px 0; }

/* Eski tema rozeti (pill + nokta) cafablue'da gösterilmez — sf-pre kullanılır */
html[data-theme="cafablue"] .center-title .pill,
html[data-theme="cafablue"] .hero .pill{ display:none !important; }

/* Tam genişlik desteği — bu kurallar cafalight kabuğunda gömülüydü,
   cafablue kabuğu için burada tanımlanır */
html[data-theme="cafablue"] .container-full{
  max-width:100% !important; width:100%;
  padding-left:0 !important; padding-right:0 !important;
}
html[data-theme="cafablue"] .container-full #cafaFacilityMap,
html[data-theme="cafablue"] .container-full .cms-banner,
html[data-theme="cafablue"] .container-full .cms-banner .slide img,
html[data-theme="cafablue"] .container-full .slide-cap{ border-radius:0 !important; }
html[data-theme="cafablue"] .container-full #cafaFacilityMap{ border-left:none; border-right:none; }

/* Duyurular — cafablue kabuğunda temel stiller (cafalight kabuğundan bağımsız) */
html[data-theme="cafablue"] .cms-announcements .ann-list{ display:grid; gap:14px; margin-top:24px; }
html[data-theme="cafablue"] .cms-announcements .ann-item{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:18px 22px; display:flex; gap:18px; align-items:flex-start;
  box-shadow:var(--shadow-soft);
}
html[data-theme="cafablue"] .cms-announcements .ann-item h3{ margin:0 0 6px; font-size:16px; }
html[data-theme="cafablue"] .cms-announcements .ann-item p{ margin:0; font-size:14px; opacity:.8; }
.sf-body .center-title h2{ font-size:34px; }
html[data-theme="cafablue"] .center-title h2{ position:relative; padding-bottom:16px; }
html[data-theme="cafablue"] .center-title h2::after{
  content:''; position:absolute; left:50%; bottom:0; transform:translateX(-50%);
  width:56px; height:4px; background:var(--brand);
}
html[data-theme="cafablue"] .pill{ border-radius:3px; text-transform:uppercase; letter-spacing:.08em; }
html[data-theme="cafablue"] .cms-announcements .ann-item{ border-radius:var(--radius); }
html[data-theme="cafablue"] .cms-announcements .ann-date{
  background:var(--brand); color:#fff; border-radius:3px; font-family:'Oswald',sans-serif;
}
html[data-theme="cafablue"] .cms-banner,
html[data-theme="cafablue"] .cms-banner .slide img,
html[data-theme="cafablue"] .slide-cap{ border-radius:var(--radius) !important; }
html[data-theme="cafablue"] .unit-pill{
  border-radius:3px !important; text-transform:uppercase; letter-spacing:.05em;
  font-family:'Oswald','Roboto',sans-serif; font-weight:600; border-color:#c9d4e8;
}
html[data-theme="cafablue"] .unit-pill:hover{
  background:var(--brand); color:#fff !important; border-color:var(--brand);
}
html[data-theme="cafablue"] #cafaFacilityMap{ border-radius:var(--radius) !important; }

/* ── Footer ──────────────────────────────────────────────────────────── */
html[data-theme="cafablue"] footer#iletisim, .sf-body footer#iletisim{
  background:var(--sf-dark) !important; color:#c6d2e8;
  border-top:3px solid var(--brand);
}
html[data-theme="cafablue"] footer#iletisim a, .sf-body footer#iletisim a{ color:#c6d2e8; }
html[data-theme="cafablue"] footer#iletisim a:hover, .sf-body footer#iletisim a:hover{ color:var(--accent); }
html[data-theme="cafablue"] footer#iletisim h4, .sf-body footer#iletisim h4{
  color:#fff; text-transform:uppercase; font-family:'Oswald',sans-serif; letter-spacing:.08em;
  position:relative; padding-bottom:10px;
}
html[data-theme="cafablue"] footer#iletisim h4::after, .sf-body footer#iletisim h4::after{
  content:''; position:absolute; left:0; bottom:0; width:34px; height:3px; background:var(--brand);
}
html[data-theme="cafablue"] footer#iletisim .chip, .sf-body footer#iletisim .chip{
  background:rgba(255,255,255,.08); border-radius:3px;
}
html[data-theme="cafablue"] .footer-bottom, .sf-body .footer-bottom{
  border-top:1px solid rgba(255,255,255,.1); background:#061024;
}

/* ── Tesisler sayfası (tesis8) ───────────────────────────────────────── */
html[data-theme="cafablue"] .filter-card{ border-radius:var(--radius); border-top:3px solid var(--brand); }
html[data-theme="cafablue"] .badges .badge, html[data-theme="cafablue"] .chips .chip{ border-radius:3px; }
html[data-theme="cafablue"] .input, html[data-theme="cafablue"] .select{ border-radius:3px; }

/* ── Tesis detay (tesis-detay32) ─────────────────────────────────────── */
html[data-theme="cafablue"] .mode-card, html[data-theme="cafablue"] .service,
html[data-theme="cafablue"] .reservation-item{ border-radius:var(--radius); }
html[data-theme="cafablue"] .service[aria-pressed="true"]{
  border-color:var(--brand);
  background:linear-gradient(135deg, rgba(17,85,255,.10), rgba(15,208,255,.06));
}
html[data-theme="cafablue"] .service .check{
  border-radius:3px; text-transform:uppercase; letter-spacing:.05em;
}
html[data-theme="cafablue"] .sidebar-info .info-icon{ background:var(--brand); color:#fff; border-radius:3px; }

/* ── Mobil ───────────────────────────────────────────────────────────── */
@media (max-width:860px){
  .sf-cap-title{ font-size:38px; }
  .sf-cap-text{ font-size:16px; }
  .sf-sec-head h2{ font-size:28px; }
  .sf-topbar .sf-container{ font-size:11px; }
  .sf-arrow{ display:none; }
}
@media (max-width:520px){
  .sf-cap-title{ font-size:28px; }
  .sf-slider{ min-height:380px; }
  .sf-tweet p{ font-size:17px; }
}