/* === PATCH: Multi-item carousel styles === */
.rb-carousel{position:relative; overflow:hidden; --vis:1}
.rb-carousel .rb-track{display:flex; align-items:stretch; will-change:transform; transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.rb-carousel .slide{
  position:relative; flex:0 0 auto; width:calc(100%/var(--vis));
  padding:0 10px; box-sizing:border-box; cursor:pointer;
}
.rb-carousel .slide img,.rb-carousel .slide video{
  width:100%; height:100%; object-fit:cover; display:block; border-radius:16px;
  box-shadow:0 20px 50px var(--shadow);
}
/* spacing fix for sections */
.section .rb-carousel{height:420px}
.section .rb-carousel .slide img,.section .rb-carousel .slide video{height:100%}
.hero .rb-carousel{height:100%} .hero .rb-carousel .slide{padding:0}
.hero .rb-carousel .slide img{border-radius:0; box-shadow:none}
.rb-header .brand{
  display:flex; align-items:center; gap:.5rem;
  text-decoration:none; color:inherit; font-weight:700;
}
.rb-header .brand img{
  display:block;
  height:84px;
  max-height:84px;
  width:auto;
  object-fit:contain;
  margin-top: 30px;
}
@media (max-width: 768px){
  .rb-header .brand img{ height:36px; max-height:36px; }
}

/* ===== Global pattern background (repeating SVG) ===== */
:root{
  --page-bg: #F6EFE4;
  --pattern-color: rgba(0,0,0,.10);
  --pattern-size: 300px auto;
  --pattern-url: url('../img/bg-pattern.svg');
}
html{ background: var(--page-bg); }
body{ background: none; position: relative; }
body::before{
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: var(--pattern-color);
  -webkit-mask-image: var(--pattern-url);
  -webkit-mask-repeat: repeat;
  -webkit-mask-size: var(--pattern-size);
          mask-image: var(--pattern-url);
          mask-repeat: repeat;
          mask-size: var(--pattern-size);
}
header, main, footer, .section { position: relative; z-index: 1; }

/* Section-level pattern overlay (if needed) */
:root{
  --pattern-size: 320px auto;
  --pattern-opacity: .12;
}
.section, .contact, .about {
  position: relative; background: var(--page-bg); overflow: hidden;
}
.section::before, .contact::before, .about::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image: var(--pattern-url);
  background-repeat: repeat;
  background-size: var(--pattern-size);
  opacity: var(--pattern-opacity);
}
.section > *, .contact > *, .about > * { position: relative; z-index: 1; }

/* Hero pattern above background, below content */
.hero{ background: transparent !important; position: relative; overflow: hidden; }
.hero::before{ display:none; }
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index: 2;
  background-image: url('../img/bg-pattern.svg');
  background-repeat: repeat;
  background-size: var(--pattern-size, 320px auto);
  opacity: var(--pattern-opacity, .10);
}
@supports ((mask-image: url('x')) or (-webkit-mask-image: url('x'))){
  .hero::after{
    background-image: none; opacity: 1;
    background: var(--pattern-color, rgba(255,255,255,.10));
    -webkit-mask-image: url('../img/bg-pattern.svg');
    -webkit-mask-repeat: repeat;
    -webkit-mask-size: var(--pattern-size, 320px auto);
            mask-image: url('../img/bg-pattern.svg');
            mask-repeat: repeat;
            mask-size: var(--pattern-size, 320px auto);
  }
}

/* Optional hover glow */
.hero .hero-video::before{
  content:""; position:absolute; inset:0; background: radial-gradient(transparent, rgba(0,0,0,.2));
  opacity: 0; transition: opacity .2s ease; z-index: 2; pointer-events:none;
}
.hero .hero-video:hover::before{ opacity: 1; }

/* ===== HERO video mask (responsive/mobile-ready) ===== */
.hero-video-mask{
  position: relative;
  margin-top: var(--header-h,72px);
  min-height: clamp(460px, 62vw, 780px);
  overflow: hidden;
}
.hero-video-wrap{ position: relative; width:100%; height:100%; }

.hero-video-mask .hero-video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
  z-index: 1;
}

/* Mask layer */
.mask-layer{
  position: absolute; inset: 0;
  z-index: 4;
  display: grid; place-items: center;
  pointer-events: none;
  transition: transform 1.1s cubic-bezier(.2,.8,.2,1);
  will-change: transform;
}
.mask-layer svg{ position: absolute; inset:0; width: 100%; height: 100%; display:block; }
.mask-layer .mask-fill{ fill: var(--page-bg, #F6EFE4); }

.hero-video-mask.revealed .mask-layer,
.hero-video-mask:hover .mask-layer{ transform: translateX(-105%); }

/* Ensure hero content sits above the hero pattern layer */
.hero::after{ z-index: 2; }
.hero .hero-overlay{ position: relative; z-index: 5; }

/* Unmute tip */
.unmute-tip{
  pointer-events: auto;
  position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%);
  z-index: 6;
  background: rgba(0,0,0,.55);
  color:#fff; font-weight:600;
  /*padding:10px 14px; border-radius:999px; border:1px solid rgba(255,255,255,.25);*/
  backdrop-filter: blur(2px);
  font-size: 14px; letter-spacing:.2px;
  opacity: 0.5;
}
.unmute-tip.is-hidden{ display:none; }

/* 100svh destekleyen tarayıcılarda gerçek yükseklik */
@supports (height: 100svh){
  .hero-video-mask,
  .hero-video-mask .hero-video-wrap{
    height: calc(100svh - var(--header-h,72px));
  }
}
/* Fallback: JS ile set edilen --vh */
.hero-video-mask,
.hero-video-mask .hero-video-wrap{
  height: calc((var(--vh, 1vh) * 100) - var(--header-h,72px));
  min-height: 520px;
}
@media (max-width: 768px){
  .hero-video-mask,
  .hero-video-mask .hero-video-wrap{ min-height: 440px; }
  .hero-video-mask.revealed .mask-layer,
  .hero-video-mask:hover .mask-layer{ transform: translateX(-100%); }
  .mask-layer svg text{ font-size: clamp(56px, 18vw, 160px); letter-spacing: 1.5px; }
  .unmute-tip{ padding:12px 16px; font-size:15px; bottom:14px; }
}
/* === HERO video/mask katmanları === */
.hero-video-mask{ position: relative; }

/* Video katmanı */
.hero-video-mask .hero-video-wrap{
  position: relative;
  z-index: 10;     /* video */
}

/* "Sesi Aç / Sesi Kapat" butonu — videonun üstünde, maskenin altında */
.hero-video-mask #heroUnmute{
  position: sticky;
  right: 20px;
  bottom: 20px;
  z-index: 20;     /* video(10)'nun üstünde, mask(30)'un altında */
  pointer-events: auto;
}

/* Maske katmanı en üstte kalsın (gerekirse tıklamayı engellemesin) */
.hero-video-mask .mask-layer{
  position: absolute;
  inset: 0;
  z-index: 30;     /* en üst: butonun da üstünde */
  pointer-events: none; /* tıklamalar alttaki butona geçsin istiyorsanız kalsın,
                           maskenin butonu kapatmasını (görsel olarak) istiyor ama
                           tıklanabilir olmasını istemiyorsanız 'auto' yapabilirsiniz. */
}
/* ==== Footer sosyal ikonlar (64x64, yan yana, marka renkleri) ==== */
.contact .social-links{ margin-top:14px; }
.contact .social-links ul{
  display:flex; gap:12px; padding:0; margin:0; list-style:none; align-items:center; flex-wrap:wrap;
}
.contact .social-links li{ margin:0; list-style:none; }

/* Ortak ölçüler */
.contact .social-links a.brand{
  width:64px; height:64px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:16px;           /* kare istiyorsan 12px veya 0 yap */
  color:#fff;                   /* SVG fill= currentColor -> beyaz */
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.contact .social-links a.brand:hover{
  transform: translateY(-2px);
  box-shadow:0 10px 22px rgba(0,0,0,.18);
  filter: saturate(1.1);
}
.contact .social-links a.brand svg{ width:32px; height:32px; display:block; }

/* Instagram resmi degrade (resmi palet) */
.contact .social-links a.brand.ig{
  background:
    radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}

/* Facebook mavi */
.contact .social-links a.brand.fb{
  background:#1877F2;
}
/* Footer sosyal ikonlar: ortaya hizala */
.contact .social-links{
  display: flex;
  justify-content: center;   /* tüm blok ortada */
}

.contact .social-links ul{
  justify-content: center;   /* ikonları satırda ortala */
}
/* ——— Karusel okları ——— */
.rb-carousel{ position: relative; }
.rb-carousel .rb-nav{
  position:absolute; top:50%; transform: translateY(-50%);
  width:42px; height:42px; border-radius:999px; border:0;
  background:rgba(17,17,17,.92); color:#fff; display:grid; place-items:center;
  cursor:pointer; z-index:5; box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.rb-carousel .rb-nav.prev{ left:-14px; }
.rb-carousel .rb-nav.next{ right:-14px; }
.rb-carousel .rb-nav:focus{ outline:2px solid rgba(255,255,255,.4); outline-offset:2px; }

@media (max-width: 900px){
  .rb-carousel .rb-nav.prev{ left:6px; }
  .rb-carousel .rb-nav.next{ right:6px; }
}

/* Oklar kesilmesin */
.rb-carousel, .rb-carousel .rb-track, .rb-carousel .rb-item, .rb-carousel .slide{
  overflow: visible !important;
}

/* ——— Lightbox ——— */
.rb-lightbox{
  position:fixed; inset:0; background:rgba(0,0,0,.86);
  display:none; align-items:center; justify-content:center;
  z-index:10000;
}
.rb-lightbox[aria-hidden="false"]{ display:flex; }
.rb-lb-stage{ max-width:min(92vw,1400px); max-height:86vh; display:grid; place-items:center; }
.rb-lb-stage img, .rb-lb-stage video{
  max-width:100%; max-height:86vh; object-fit:contain; border-radius:8px; background:#000;
}
.rb-lb-close, .rb-lb-prev, .rb-lb-next{
  position:absolute; width:46px; height:46px; border-radius:999px;
  background:rgba(0,0,0,.58); color:#fff; border:1px solid rgba(255,255,255,.28);
  display:grid; place-items:center; cursor:pointer;
}
.rb-lb-close{ top:18px; right:18px; font-size:22px; }
.rb-lb-prev{ left:16px; top:50%; transform:translateY(-50%); font-size:28px; }
.rb-lb-next{ right:16px; top:50%; transform:translateY(-50%); font-size:28px; }
.rb-lb-cap{
  position:absolute; bottom:16px; left:50%; transform:translateX(-50%);
  color:#fff; opacity:.92; font-size:14px; text-align:center; padding:6px 10px;
}
body.modal-open{ overflow:hidden; }
/* style.patch.css */
#rbModal, #rbModalBg { display:none !important; }
/* RB Lightbox temel */
.rb-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  overflow: visible; /* Okların kesilmesini engelle */
}
.rb-lightbox.is-open { display: flex; }

.rb-lightbox__stage {
  max-width: min(92vw, 1200px);
  max-height: 92vh;
  display: grid;
  place-items: center;
}

.rb-lightbox__img,
.rb-lightbox__video {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 12px;
  background: #111;
  box-shadow: 0 18px 50px rgba(0,0,0,.5);
}

/* NAV okları — fixed, kenardan içeri al */
.rb-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(0,0,0,.65);
  color: #fff;
  border: 1px solid rgba(255,255,255,.15);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 100000;
  backdrop-filter: blur(2px);
}
.rb-lightbox__nav:hover { background: rgba(0,0,0,.8); }
.rb-lightbox__nav.prev { left: 20px; }
.rb-lightbox__nav.next { right: 20px; }

.rb-lightbox__close {
  position: fixed;
  top: 20px;
  right: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: rgba(0,0,0,.75);
  color:#fff; display:grid; place-items:center;
  cursor: pointer; z-index: 100000;
  border: 1px solid rgba(255,255,255,.18);
}
/* Centering fix: prevent 100vw scrollbar drift */
html, body { overflow-x: hidden; }

/* Eğer hero/section tarafında 100vw varsa, 100% yap */
.hero,
.hero .rb-carousel,
.hero .rb-carousel .rb-track,
.hero .rb-carousel .slide {
  width: 100% !important;
}

/* 100vw ile flex-basis verilmişse onu da düzelt */
.hero .rb-carousel .slide {
  flex: 0 0 100% !important;
}
.wa-image-cta{
  display:inline-block;
  margin-top:12px;
  border-radius:14px;
  overflow:hidden;
  text-decoration:none;
  line-height:0;
  max-width:360px;   /* buton gibi */
  width:100%;
}
.about-cta .wa-image-cta{
  margin-left:0;     /* sola kalsın */
  /* ortalı istersen: margin-left:auto; margin-right:auto; */
}
.wa-image-cta img{
  display:block;
  width:100%;
  height:auto;
}
.wa-image-cta:hover{
  transform:translateY(-1px);
  transition:transform .15s ease;
}