/* =========================
   Elif & Emirhan - style.css (CUSTOM OVERRIDES)
   Bu dosya sadece sizin özel eklemelerinizdir.
   Theme CSS zaten yüklü (styled4d0.css vs).
   ========================= */

/* -----------------------------------------
   0) Genel küçük iyileştirmeler
------------------------------------------ */
html, body{
  overflow-x: hidden;
}

/* -----------------------------------------
   1) HEADER: Sağ üst Galeri butonu (mobilde de aynı)
------------------------------------------ */

/* Header üstte ve görünür */
header.mainHeader{
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 99999 !important;
}

/* Mobil hamburgerları kapat (yan menü olmasın) */
header.mainHeader .btVerticalMenuTrigger,
header.mainHeader .btHorizontalMenuTrigger{
  display: none !important;
}

/* Menü alanını sabit sağ üste koy */
header.mainHeader .menuPort{
  position: fixed !important;
  top: 18px !important;
  right: 22px !important;
  width: auto !important;
  z-index: 99999 !important;
}

/* Liste tek satır */
header.mainHeader ul#menu-primary-menu.menuRightOnly{
  display: flex !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
header.mainHeader ul#menu-primary-menu.menuRightOnly li{
  margin: 0 !important;
  padding: 0 !important;
}

/* Buton görünümü */
header.mainHeader ul#menu-primary-menu.menuRightOnly a{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  white-space: nowrap !important;
  padding: 10px 16px !important;
  border-radius: 999px !important;

  border: 1px solid rgba(255,255,255,.75) !important;
  background: rgba(0,0,0,.22) !important;
  backdrop-filter: blur(6px) !important;

  color: #fff !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;

  box-shadow: 0 10px 24px rgba(0,0,0,.22) !important;
  text-shadow: 0 2px 12px rgba(0,0,0,.45) !important;
}
header.mainHeader ul#menu-primary-menu.menuRightOnly a:hover{
  background: rgba(0,0,0,.32) !important;
  border-color: rgba(255,255,255,.95) !important;
}

/* Mobilde buton biraz küçük */
@media (max-width: 767px){
  header.mainHeader .menuPort{
    top: 12px !important;
    right: 12px !important;
  }
  header.mainHeader ul#menu-primary-menu.menuRightOnly a{
    padding: 9px 14px !important;
    font-size: 12px !important;
  }
}

/* -----------------------------------------
   2) HERO: Picture background + Grid layout (bozulma fix)
------------------------------------------ */

/* Kolay ayar (sadece bu 4 satırla oynayabilirsin) */
:root{
  --heroPadTop: clamp(22px, 4svh, 60px);
  --heroPadBottom: clamp(22px, 4svh, 70px);
  --heroGap: clamp(10px, 2svh, 26px);
  --heroImgY: 32%; /* yüz yukarı gelsin: 25% | aşağı insin: 40% */
}

/* HERO container gerçek ekran yüksekliği (bar sorunlarını azaltır) */
#wedding_1{
  min-height: 100svh;
  min-height: 100dvh;
  position: relative;
  overflow: hidden;
}

/* Arkaplan picture */
#wedding_1 .heroBg{
  position: absolute;
  inset: 0;
  z-index: 0;
}
#wedding_1 .heroBg img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--heroImgY);
  display: block;
}

/* Yazılar üstte */
#wedding_1 .port{
  position: relative;
  z-index: 1;
}

/* Grid düzen: üst / orta / alt */
#wedding_1 .heroTitle{
  width: 100%;
  min-height: 100svh;
  min-height: 100dvh;

  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  row-gap: var(--heroGap);
  box-sizing: border-box;
}

/* Üst: Hikayemiz Başlıyor (curvy) */
#wedding_1 .heroKicker{
  margin: 0;
  padding-top: clamp(100px, 2.6svh, 200px);
  font-family: "Josefin Sans", sans-serif !important;
  font-weight: 200 !important;
  font-size: clamp(20px, 5vw, 60px);
  line-height: 1.2;
  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Orta: 06/06/26 (NET) */
#wedding_1 .heroDate{
  display: grid;
  place-items: center;
  gap: clamp(8px, 2svh, 16px);
  align-self: center;

  font-family: "Josefin Sans", sans-serif !important;
  font-weight: 300 !important;
  letter-spacing: .14em !important;
  text-transform: uppercase;

  color: rgba(255,255,255,.95);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}
#wedding_1 .heroDateLine{
  font-family: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  font-size: clamp(28px, 5.2vh, 56px);
  line-height: 1;
}

/* Alt: Elif & Emirhan (curvy, ama kesilmesin diye max düşürüldü) */
#wedding_1 .heroNames{
  margin: 0 !important;
  padding-bottom: clamp(100px, 2.6svh, 200px);
}
#wedding_1 .heroNames .headline{
  font-family: "Great Vibes", cursive !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;

  font-size: clamp(44px, 7vw, 120px);
  line-height: 1;

  color: rgba(190,165,90,.95);
  text-shadow: 0 2px 12px rgba(0,0,0,.35);
}

/* Mobil: kadraj + boşluklar biraz daha kompakt */
@media (max-width: 767px){
  :root{
    --heroPadTop: clamp(18px, 4svh, 44px);
    --heroPadBottom: clamp(22px, 5svh, 54px);
    --heroGap: clamp(10px, 2svh, 18px);
    --heroImgY: 24%;
  }

  #wedding_1 .heroDate{
    letter-spacing: .10em !important;
  }

  #wedding_1 .heroNames .headline{
    font-size: clamp(40px, 10vw, 92px);
  }
}

/* -----------------------------------------
   3) Tarih bölümündeki sayaçlar (4 pill grid)
------------------------------------------ */

/* Eski demo sayaçları/theme counter varsa kapat */
.btCounterHolder{ display: none !important; }

/* Wrapper */
.eventCounterWrap{
  display: block !important;
  margin: 14px auto 10px !important;
}

/* Grid */
.eventCounterGrid{
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  max-width: 360px !important;
  margin: 0 auto !important;
}

/* Pill kutusu */
.eventCounterGrid .box{
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  align-items: center !important;
  justify-items: center !important;

  padding: 14px 10px !important;
  min-height: 86px !important;

  border-radius: 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

/* Sayı */
.eventCounterGrid .num{
  width: 100% !important;
  text-align: center !important;
  line-height: 1 !important;
  margin: 0 !important;

  font-family: "Josefin Sans", sans-serif !important;
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums;

  font-size: 30px;
  padding-top: 2px; /* optik merkez */
}

/* Etiket */
.eventCounterGrid .lbl{
  width: 100% !important;
  text-align: center !important;
  margin-top: 8px !important;

  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .75;
}

/* Mobilde biraz küçült */
@media (max-width: 480px){
  .eventCounterGrid{
    gap: 10px !important;
    max-width: 320px !important;
  }
  .eventCounterGrid .box{ min-height: 80px !important; }
  .eventCounterGrid .num{ font-size: 26px !important; }
  .eventCounterGrid .lbl{ font-size: 10px !important; }
}

/* Kına / Düğün arasına dik çizgi (counter-kina üstünde) */
#counter-kina{
  position: relative;
  padding-right: 28px;
  margin-right: 28px;
}
#counter-kina::after{
  content: "";
  position: absolute;
  right: 0;
  top: -90px;
  bottom: -120px;
  width: 1px;
  background: rgba(0,0,0,.10);
}

/* Mobilde çizgi yok (alt alta akınca gereksiz) */
@media (max-width: 767px){
  #counter-kina{
    padding-right: 0;
    margin-right: 0;
  }
  #counter-kina::after{
    display: none;
  }
}

/* -----------------------------------------
   4) Tarih ve Lokasyon başlık fontları (net)
------------------------------------------ */

/* Tarih başlığı */
#wedding_2 .header.huge .headline{
  font-family: "Josefin Sans", sans-serif !important;
  font-size: clamp(52px, 7vw, 120px) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* Lokasyon başlığı */
#wedding_5 .header.huge .headline{
  font-family: "Josefin Sans", sans-serif !important;
  font-size: clamp(52px, 7vw, 120px) !important;
  letter-spacing: 0 !important;
  line-height: 1 !important;
}

/* Lokasyon alt başlık (Kına ve Düğün için) */
#wedding_5 .locationSubTitle{
  margin-top: 18px;
  text-align: center;

  font-family: "Great Vibes", cursive;
  font-size: clamp(34px, 4vw, 64px);
  line-height: 1.05;

  color: rgba(60, 70, 80, .92);
}

/* -----------------------------------------
   5) Tarih -> Lokasyon arasında yatay ayırıcı çizgi
------------------------------------------ */
#wedding_2{
  position: relative;
}
#wedding_2::after{
  content: "";
  display: block;
  width: min(1100px, 88%);
  height: 1px;
  margin: 70px auto 0;
  background: rgba(190,165,90,.35);
}
@media (max-width: 767px){
  #wedding_2::after{
    width: 92%;
    margin-top: 50px;
  }
}

/* -----------------------------------------
   6) Sağ alt “Bir sonraki bölüm” butonu
------------------------------------------ */
.nextSectionBtn{
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 2147483647;

  width: 52px;
  height: 52px;
  border-radius: 999px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.75);
  background: rgba(0,0,0,.22);
  backdrop-filter: blur(6px);

  color: #fff;
  box-shadow: 0 10px 24px rgba(0,0,0,.22);
  cursor: pointer;
}
.nextSectionBtn:hover{
  background: rgba(0,0,0,.32);
  border-color: rgba(255,255,255,.95);
}
.nextSectionBtnIcon .btIcoHolder{
  font-size: 22px !important;
  line-height: 1 !important;
  transform: translateY(1px);
  display: inline-block;
}
@media (max-width: 767px){
  .nextSectionBtn{
    width: 46px;
    height: 46px;
    right: 12px;
    bottom: 12px;
  }
  .nextSectionBtnIcon .btIcoHolder{
    font-size: 20px !important;
  }
}

/* === FIX: HERO section padding/height çakışmasını temizle === */
#wedding_1{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
}

/* Tema "topExtraSpaced/bottomSpaced" boşluklarını sadece HERO’da sıfırla */
#wedding_1.topExtraSpaced,
#wedding_1.bottomSpaced{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* HERO içteki title artık section kadar uzasın (100vh değil) */
#wedding_1 .heroTitle{
  height: 100% !important;
  min-height: 100svh !important;
  min-height: 100dvh !important;
}

/* =========================================================
   HERO FIX (Ekrana tam sığsın, yüksek kalmasın)
   ========================================================= */

/* HERO section: gerçek tam ekran + padding temizliği */
#wedding_1{
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;

  margin-top: 0 !important;
  margin-bottom: 0 !important;

  position: relative !important;
  overflow: hidden !important;
}

/* Tema spacing class'ları HERO'da boşluk bırakmasın */
#wedding_1.topExtraSpaced,
#wedding_1.bottomSpaced,
#wedding_1.fullScreenHeight{
  height: 100dvh !important;
  min-height: 100dvh !important;
  max-height: 100dvh !important;

  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* HERO background picture tam kaplasın */
#wedding_1 .heroBg{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
}

#wedding_1 .heroBg img{
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;      /* ekrana tam sığar, taşmaz */
  object-position: center 30% !important; /* yüz için 20-40 arası oynat */
  display: block !important;
}

/* HERO yazı katmanı üstte kalsın */
#wedding_1 .port{
  position: relative !important;
  z-index: 1 !important;
  height: 100% !important;
}

/* Yazı container'ı da section kadar uzasın */
#wedding_1 .boldCell,
#wedding_1 .boldCellInner,
#wedding_1 .boldRow,
#wedding_1 .boldRowInner,
#wedding_1 .rowItem,
#wedding_1 .rowItemContent{
  height: 100% !important;
}

/* heroTitle: kesinlikle 100vh verme, section yüksekliğini alsın */
#wedding_1 .heroTitle{
  height: 100% !important;
  min-height: 100% !important;
}

/* =========================================================
   HERO karartma (overlay)
   ========================================================= */

/* =========================================================
   HERO karartma (overlay) - FIX
   Overlay'i heroBg üzerine koy
   ========================================================= */

/* heroBg zaten absolute. Buraya overlay ekliyoruz */
#wedding_1 .heroBg::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35); /* koyuluk seviyesi */
  z-index: 1;
  pointer-events: none;
}

/* Yazılar overlay'in üstünde kalsın */
#wedding_1 .port{
  position: relative !important;
  z-index: 2 !important;
}

/* =========================================================
   ✅ MOBİL SABİT BUTON (tema menüsünden bağımsız)
   1024px ve altında sağ üstte "Paylaşımlar / Galeri" butonu
   ========================================================= */
.tt-gallery-btn{
  position: fixed;
  top: calc(18px + env(safe-area-inset-top));
  right: calc(22px + env(safe-area-inset-right));
  z-index: 999999;
  display: none; /* desktop'ta kapalı */
  align-items: center;
  justify-content: center;

  padding: 10px 18px;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 999px;

  background: rgba(0,0,0,0.15);
  backdrop-filter: blur(3px);

  font-family: "Josefin Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #757575;
  text-decoration: none;
}

 @media (max-width: 1024px){
  .tt-gallery-btn{ display: inline-flex !important; }
}

/* (İsteğe bağlı) Tema menüsü görünse bile mobilde çakışmasın diye kapat */
@media (max-width: 1024px){
  header.mainHeader .menuPort{ display:none !important; }
}


/* Mobilde fotoğraf kırpma yönü: damat sola / gelin sağa */
@media (max-width: 1024px){

  /* DAMAT (sol taraf kalsın, sağdan kırılsın) */
  #wedding_4{
    background-position: left center !important;
    background-size: cover !important;
  }

  /* GELİN (sağ taraf kalsın, soldan kırılsın) */
  #wedding_3{
    background-position: right center !important;
    background-size: cover !important;
  }

}

/* 575px altı: slim görselleri kullan + ortadan sabitle (left/right iptal) */
@media (max-width: 575px){

  /* wedding_4: emir_slim.jpg + center */
  #wedding_4{
    background-image: url('pictures/emir_slim.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
  }

  /* wedding_3: elif_slim.jpg + center */
  #wedding_3{
    background-image: url('pictures/elif_slim.jpg') !important;
    background-position: center center !important;
    background-size: cover !important;
  }

}

/* Davetiye'ye dön butonu (Hero sağ üst) */
#bt_section697abb9d43c8b { 
  position: relative; 
}

.back-invite{
  position: absolute;
  top: 18px;
  right: 18px;
  z-index: 50;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 10px 14px;
  border-radius: 999px;

  background: rgba(0,0,0,0.35);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .2px;
  text-decoration: none;

  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);

  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 10px 22px rgba(0,0,0,0.18);

  transition: transform .12s ease, background .12s ease, opacity .12s ease;
}

.back-invite:hover{
  background: rgba(0,0,0,0.45);
  transform: translateY(-1px);
}

.back-invite:active{
  transform: translateY(0);
}

/* Mobilde biraz küçült */
@media (max-width: 520px){
  .back-invite{
    top: 12px;
    right: 12px;
    padding: 9px 12px;
    font-size: 12px;
  }
}

.tt-gallery-btn{ font-size: 13px !important; padding: 10px 14px !important; }

/* Webde (>=576px) sağ üst butonun yüksekliğini küçült 
@media (min-width: 576px){
  .tt-gallery-btn{
    padding: 8px 14px !important;   
    line-height: 1 !important;     
    height: auto !important;
    min-height: 0 !important;
  }
}*/

/* Paylaşımlar / Galeri butonu: her zaman sağ üstte sabit kalsın */
.tt-gallery-btn{
  position: fixed !important;
  top: calc(18px + env(safe-area-inset-top)) !important;
  right: calc(18px + env(safe-area-inset-right)) !important;
  z-index: 999999 !important;
}

/* Galeri butonu: default beyaz, açık section’da koyu yazı */
.tt-gallery-btn{
  color: #fff !important;
}

/* Açık zeminlerde (JS class basacak) */
.tt-gallery-btn.is-darktext{
  color: rgba(15,15,15,.92) !important;
  border-color: rgba(0,0,0,.18) !important;
  background: rgba(255,255,255,.42) !important;
  text-shadow: none !important;
}

/* iOS Safari fix: parallax background bug -> wedding_3 / wedding_4 parallax kapat */
@supports (-webkit-touch-callout: none) {

  #wedding_3,
  #wedding_4{
    background-attachment: scroll !important;  /* iOS'ta fixed/parallax sorun çıkarır */
    background-size: cover !important;
    background-repeat: no-repeat !important;
    transform: none !important;
    will-change: auto !important;
  }

  /* Theme bazen background'ı pseudo elemente basıyor, onu da garantiye al */
  #wedding_3 .wBackground,
  #wedding_4 .wBackground{
    transform: none !important;
  }

  /* İstersen iOS'ta parallax class etkisini komple kır */
  #wedding_3.btParallax,
  #wedding_4.btParallax{
    background-position: center center !important; /* burada istersen left/right da verebiliriz */
  }
}

/* iOS harita seçici baloncuk */
.tt-map-sheet{
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: none;
}

.tt-map-sheet.is-open{ display:block; }

.tt-map-sheet__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.tt-map-sheet__panel{
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: min(520px, calc(100% - 24px));
  border-radius: 18px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 18px 50px rgba(0,0,0,.25);
  border: 1px solid rgba(0,0,0,.08);
  overflow: hidden;
  font-family: "Josefin Sans", sans-serif;
}

.tt-map-sheet__title{
  padding: 14px 16px 10px;
  font-size: 14px;
  letter-spacing: .04em;
  opacity: .9;
}

.tt-map-sheet__actions{
  display: grid;
  gap: 10px;
  padding: 0 16px 16px;
}

.tt-map-sheet__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(255,255,255,.9);
  color: rgba(15,15,15,.92);
  text-decoration: none;
  font-weight: 700;
}

.tt-map-sheet__btn.primary{
  background: rgba(190,165,90,.18);
  border-color: rgba(190,165,90,.35);
}

.tt-map-sheet__btn.cancel{
  background: rgba(0,0,0,.06);
}


/* ==============================
   iOS Safari: wedding_3 / wedding_4 parallax FIX
   Background yerine layer kullanacağız
   ============================== */
@supports (-webkit-touch-callout: none) {

  #wedding_3, #wedding_4{
    position: relative !important;
    overflow: hidden !important;
  }

  /* içerik üstte kalsın */
  #wedding_3 .port, #wedding_4 .port{
    position: relative !important;
    z-index: 2 !important;
  }

  /* Parallax layer */
.tt-parallax-layer{
  position: absolute;
  inset: -35% 0;              /* daha büyük pay */
  z-index: 1;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  will-change: transform;
  transform: translate3d(0,0,0);
}


  /* Senin kırpma kurallarını layer’a uygula */
  @media (max-width: 1024px){
    #wedding_4 .tt-parallax-layer{ background-position: left center !important; }
    #wedding_3 .tt-parallax-layer{ background-position: right center !important; }
  }

  @media (max-width: 575px){
    #wedding_4 .tt-parallax-layer{ background-position: center center !important; }
    #wedding_3 .tt-parallax-layer{ background-position: center center !important; }
  }
}

/* Mobilde (xs) tema ikonlarını gizleme -> göster */
@media (max-width: 767px){
  .btIconImageRow.hidden-xs{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}

/* Mobil: boşluk tam 19.00-23.00 altı / elmas ikonunun üstü */
@media (max-width: 767px){

  /* Kına bloğunun yazı kısmının altına boşluk ver */
  #wedding_2 .rowInnerItem:first-of-type .btText{
    margin-bottom: 60px !important; /* test için abartılı */
  }

  /* Mobilde dikey çizgiyi zaten istemiyoruz */
  #counter-kina::after{
    display: none !important;
  }
}

/* Mobilde wedding_3 (Elif) sıralamasını wedding_4 gibi yap:
   önce "Gelin Hanım / Elif", sonra metin bloğu */
@media (max-width: 767px){

  /* rowItem’ları alt alta diz (tema zaten çoğu zaman böyle ama garanti) */
  #wedding_3 .boldRowInner{
    display: flex !important;
    flex-direction: column !important;
  }

  /* 1. rowItem (metin bloğu) aşağı insin */
  #wedding_3 .boldRowInner > .rowItem:nth-child(1){
    order: 2 !important;
  }

  /* 2. rowItem (başlık: Gelin Hanım / Elif) yukarı gelsin */
  #wedding_3 .boldRowInner > .rowItem:nth-child(2){
    order: 1 !important;
  }

  /* Mobilde border/çizgi kötü duruyorsa kapatalım (isteğe bağlı ama genelde iyi olur) */
  #wedding_3 .btRightBorder{
    border-right: 0 !important;
  }
}