/* ==========================================================================
   Hülya Tütün Beauty — özel katman
   Bu dosya en son yüklenir; buradaki kurallar diğerlerini ezer.
   ========================================================================== */

/* --------------------------------------------------------------- LOGO --- */
/* Serif ad + altında harf aralıklı BEAUTY.
   Ölçüler rem cinsinden — sitenin akışkan ölçeğiyle birlikte büyür/küçülür. */
.brand-logo{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  gap:.3rem;
  line-height:1;
  white-space:nowrap;
  color:#333;
  transition:color 1s cubic-bezier(.18,.71,.11,1);
}
.brand-logo__name{
  font-family:"Editorial New",serif;
  font-style:normal;
  font-weight:400;
  font-size:1.9rem;
  letter-spacing:.005em;
  text-transform:none;
}
.brand-logo__sub{
  font-family:"PP Mori",sans-serif;
  font-style:normal;
  font-weight:400;
  font-size:.56rem;
  letter-spacing:.46em;
  text-transform:uppercase;
  opacity:.7;
  padding-left:.12em;
}
@media (max-width:767.98px){
  .brand-logo{gap:.25rem}
  .brand-logo__name{font-size:1.55rem}
  .brand-logo__sub{font-size:.52rem;letter-spacing:.4em}
}

/* header genişliği: metin logonun kırpılmaması için */
.navbar-logo[data-v-f756b3ad],
#header .navbar-logo[data-v-f756b3ad]{width:auto;text-decoration:none}

/* hero üzerindeyken beyaz, aşağı kayınca koyu */
#header.is--white .brand-logo{color:#fff}
#header .navbar.active .brand-logo,
#header:not(.is--white) .brand-logo{color:#333}

.brand-logo--footer{color:#2f2f2f}
.brand-logo--dark{color:#333}

/* ---------------------------------------------------------- PRELOADER --- */
/* .logo'nun overflow:hidden'ı dikey maskeleme için gerekli; ama genişliği
   eski SVG ölçüsünde kalınca yazının kenarları kırpılıyordu.              */
.preloader .logo{width:auto;max-width:none}
.preloader .logo__left,
.preloader .logo__right{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 auto;
}
.preloader .logo__left{padding-right:.2em}
.preloader .logo__right{padding-left:.2em}
/* Logoyla aynı dil: Editorial New, düz, büyük harf değil */
.preloader-logo{
  font-family:"Editorial New",serif;
  font-style:normal;
  font-size:5rem;
  font-weight:400;
  line-height:1;
  letter-spacing:.005em;
  text-transform:none;
  color:#fff;
}
@media (max-width:767px){
  .preloader-logo{font-size:3.4rem}
}

/* --------------------------------------- BAŞLIK MASKESİ (data-split) --- */
/* Şablonun `.masking-text` kutuları İngilizce metne göre ölçülmüş
   (`height:.9em` vb., bölüm bölüm ID'li kurallarla). Türkçe alt uzantıları
   (ğ ç ş y j) ve Editorial New'in uzun çıkıntıları bu kutulara sığmıyordu.
   Çözüm CSS'te değil js/app.js içinde: maske yalnızca satırlar yukarı
   kayarken gerekli, animasyon bitince revealLines() overflow'u kaldırıyor. */

/* Maske kalkınca çıkıntılar görünür oldu; İngilizce metinde descender
   olmadığı için dar bırakılmış satır kutuları artık yetmiyordu.
   "güzellik"teki ğ kuyruğu alttaki satıra giriyordu — aralığı açıyoruz. */
#intro .intro__title .masking-text{height:1.15em}
#journal .journal__title .masking-text{height:1.12em}
#journal .journal__title .masking-text:first-child{height:1.78em}
#blog .blog__intro-title .masking-text:first-child{height:1.62em;line-height:1.45em}
#ethos .ethos__title-2 .masking-text{height:1.06em}
#ethos .ethos__title .masking-text{height:.92em}

/* ------------------------------------------- YATAY KAYDIRMA DÜZELTME --- */
/* blog.html: başlığın yanındaki dekoratif ok SVG'si (right:-22rem, 90rem)
   sağdan taşıp sayfayı yatay kaydırıyordu. Bölümü kırpıyoruz.           */
#blog[data-v-9ff11d95]{overflow-x:clip}

/* hakkimizda.html: intro başlıkları 25vw + white-space:nowrap. "Merhaba,"
   gibi uzun Türkçe kelimeler mobilde ekrandan taşıyordu.                */
@media (max-width:767.98px){
  #philosophy .philosophy__intro h1[data-v-8cc131a5]{font-size:17vw}
}

/* ------------------------------------------------ "İLK RANDEVU" BLOĞU -- */
/* Açıklama fotoğrafın üstünde #737373 ile soluk kalıyordu */
#quiz .offer__text .description[data-v-7cc9f5eb],
#quiz .offer__text .description{
  color:#2f2f2f;
  font-size:1.05rem;
  line-height:1.4;
  max-width:22rem;
  margin-top:1.8rem;
}
/* Metinler fotoğrafın koyu bölgesine denk geliyordu. Panelin tamamına
   yayılan, kenarı görünmeyen bir açık geçiş uyguluyoruz — kutu zemin
   yerine bu, ışığı değişen görsellerde tek temiz çözüm.                 */
#quiz .half__grid-img[data-v-7cc9f5eb]:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(158deg,
              rgba(255,255,255,.95) 0%,
              rgba(255,255,255,.88) 14%,
              rgba(255,255,255,.55) 30%,
              rgba(255,255,255,.18) 44%,
              rgba(255,255,255,0) 58%);
}
#quiz .offer__text[data-v-7cc9f5eb]{z-index:4}
#quiz .offer__cta[data-v-7cc9f5eb]{z-index:4}

/* CTA etiketi de fotoğraf üzerinde soluk kalıyordu */
#quiz .offer__cta .offer__more p[data-v-7cc9f5eb]{
  color:#2f2f2f;
  font-size:.85rem;
  letter-spacing:.04em;
  text-shadow:0 0 12px rgba(255,255,255,.9);
}

/* ------------------------------------------------------ ETHOS BÖLÜMÜ --- */
/* "ETHOS" etiketi CSS content'inden geliyordu, İngilizce kalmıştı */
#ethos .ethos__title[data-v-6661e109]:before,
#ethos .ethos__title:before{
  content:"YAKLAŞIMIMIZ";
  padding:.6rem 2.4rem .4rem;
  letter-spacing:.08em;
  white-space:nowrap;
}

/* İki display başlık Türkçe metinle üst üste biniyordu:
   satır yüksekliğini sabitleyip aralarına net bir boşluk bırakıyoruz. */
#ethos .ethos__title[data-v-6661e109],
#ethos .ethos__title-2[data-v-6661e109]{
  line-height:.86;
}
/* Kutu kapsayıcı genişliğindeydi; translate ile birlikte sayfayı yatay
   kaydırıyordu. İçeriği kadar genişletip öyle kaydırıyoruz.              */
#ethos .ethos__title-2[data-v-6661e109]{
  width:-moz-fit-content;
  width:fit-content;
  margin-top:1vw;
  margin-left:auto;
  margin-right:auto;
  transform:translate(18%);
}
/* dekoratif görsel yazının üstünü kapatıyordu: sola/aşağı alıp arkaya attık */
#ethos .ethos__text[data-v-6661e109]{position:relative;z-index:2}
#ethos .ethos__image[data-v-6661e109]{left:4%;top:54%;width:20rem;z-index:1}

@media (max-width:767.98px){
  /* mobilde 17vw'de serif çıkıntıları alt satıra giriyordu */
  #ethos .ethos__title-2[data-v-6661e109]{
    line-height:1.28;
    font-size:15vw;
    transform:none;
    margin-top:0;
  }
}

/* ------------------------------------------------- INSTAGRAM REEL ------- */
#reel{padding:6rem 0}
#reel .reel__frame{
  position:relative;
  width:100%;
  max-width:26rem;
  aspect-ratio:9/16;
  margin:0 auto;
  border-radius:14px;
  overflow:hidden;
  background:#e8e2dd;
}
#reel .reel__video{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
}
#reel .reel__title{
  font-size:4.5rem;
  font-weight:400;
  line-height:1;
  text-transform:none;
  margin-bottom:2rem;
}
#reel .reel__text p{max-width:30rem;margin-bottom:3rem}
/* .icon-global width:100% + max-width:20rem ile çalışıyor; daraltmak
   içindeki daireyle metni çakıştırıyor — varsayılanı bozmuyoruz. */

/* ses aç/kapat */
#reel .reel__sound{
  position:absolute;
  right:1.2rem;bottom:1.2rem;
  width:3.4rem;height:3.4rem;
  display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;
  background:#fffffff2;color:#3b3b3b;
  cursor:pointer;padding:0;
  transition:transform .4s cubic-bezier(.18,.71,.11,1),background .4s;
}
#reel .reel__sound:hover{transform:scale(1.08)}
#reel .reel__sound svg{width:1.5rem;height:1.5rem;display:block}
#reel .reel__sound .reel__sound-on{display:none}
#reel .reel__sound[aria-pressed="true"] .reel__sound-on{display:block}
#reel .reel__sound[aria-pressed="true"] .reel__sound-off{display:none}

@media (max-width:767.98px){
  #reel{padding:4rem 0}
  #reel .reel__frame{max-width:22rem}
  #reel .reel__title{font-size:3.4rem}
  #reel .reel__text{text-align:center}
  #reel .reel__text p{margin-left:auto;margin-right:auto}
  #reel .reel__cta{margin:0 auto}
}

/* ------------------------------------------------- HEADER CTA İKONLARI --- */
/* .navbar-cta hapı yalnızca hero üzerindeyken (#header.is--white) beyaz,
   diğer tüm durumlarda koyu. İkon rengi buna göre ters çevriliyor.      */
.navbar-cta .icon-wa path,
.navbar-cta .icon-phone path{fill:#fff!important;stroke:none!important}
#header.is--white .navbar-cta .icon-wa path,
#header.is--white .navbar-cta .icon-phone path{fill:#333!important;stroke:none!important}
.navbar-cta a{display:flex;align-items:center;justify-content:center}

/* ----------------------------------------------------- HİZMET DETAYI ---- */
/* "Randevu Al" butonu artık bir <a>; buton gibi hizalansın */
#p-detail #AddToCart[data-v-aa957220]{
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-decoration:none;
}
#p-detail #AddToCart .addtocart__text{text-decoration:underline}
#p-detail #AddToCart .btn__icon-arrow{background:#fff}
#p-detail #AddToCart .btn__icon-arrow path{stroke:#3b3b3b}

#p-detail .p-detail__detail-price{font-size:1rem;opacity:.75}

/* şablon ürün şişesi için "contain" ayarlıydı; fotoğraflarda kadraj dolsun */
/* product-detail.css'teki object-fit:contain!important kuralıyla aynı
   özgüllükte; custom.css sonra yüklendiği için bu kazanır. */
#p-detail .p-detail__img .media-img[data-v-aa957220] img,
#p-detail .p-detail__img .media-img img[data-v-aa957220]{
  width:100%;height:100%;
  object-fit:cover!important;
  border-radius:14px;
}
#p-detail .p-detail__recommend-item-img img{
  margin-top:0!important;
  object-fit:cover!important;
}

/* yuvarlak ikonlar */
#p-detail .p-detail__pros .list-icon-icon{
  background:#fff;border-radius:100%;
  width:4.4rem;height:4.4rem;
  margin:0 auto .8rem;
}
#p-detail .p-detail__pros .list-icon-icon svg{width:2rem;height:2rem}
#p-detail .p-detail__pros .list-icon-text{text-align:center}

#p-slider .p-slider__content-icon .list-icon-icon svg{width:1.8rem;height:1.8rem}
#p-notoxic .icon-round svg{width:1.4rem;height:1.4rem}

/* uygulama adımları listesi: sabit yükseklik yerine akışkan */
#p-slider .ingredients__slider[data-v-db84ca02]{height:auto;overflow:visible}

/* ------------------------------------------------------------ RANDEVU --- */
.randevu-info{
  margin-top:3rem;
  text-align:left;
  width:100%;
  max-width:34rem;
  margin-left:auto;
  margin-right:auto;
}
.randevu-info p{margin-bottom:1.6rem;line-height:1.5}
.randevu-info strong{
  display:inline-block;
  margin-bottom:.35rem;
  font-weight:600;
  text-transform:uppercase;
  font-size:.8rem;
  letter-spacing:.06em;
  color:#3b3b3b;
}
#account .account__form .btn{text-decoration:none}

/* ------------------------------------------------- ÜRÜN KATALOĞU -------- */
/* Ürün kartlarının ikinci (hover) görseli yok — şablonun hover'da ilk
   görseli gizleyen kuralını burada iptal ediyoruz.                       */
.product__card.urun__card:hover .product__card-img[data-v-1614f35c],
.product__card.urun__card:hover .product__card-img{opacity:1}

/* Ürün fotoğrafları beyaz zeminli; multiply ile kart rengine karışsın */
.urun__card .urun__card-img img{
  mix-blend-mode:multiply;
  object-fit:contain!important;
}
/* transform yeni bir stacking context açıp mix-blend-mode'u izole ediyordu */
.urun__card .urun__card-img[data-v-1614f35c],
.urun__card .urun__card-img{
  transform:none;
  height:22rem;
  margin:1rem auto;
  z-index:auto;
}
@media (max-width:767.98px){
  .urun__card .urun__card-img[data-v-1614f35c],
  .urun__card .urun__card-img{height:20rem}
}
.urun__card:hover .product__card-title{text-decoration:underline}
.urun__card-desc{
  margin-top:.6rem;
  font-size:.8rem;
  line-height:1.35;
  opacity:.65;
}
.urun__note{margin-top:6rem}
.urun__note p{font-size:.9rem;line-height:1.5}

/* --------------------------------------------------------------- MİSC --- */
/* Kart alt bilgisi: şablonda başlık solda / fiyat sağda tek satırdı.
   Türkçe hizmet adları uzun olduğu için alt alta diziyoruz.          */
.product__card-foot[data-v-1614f35c],
.product__card .product__card-foot{
  flex-direction:column;
  align-items:flex-start;
  gap:.4rem;
}
.product__card-foot .product__card-title[data-v-1614f35c],
.product__card-foot .product__card-title{max-width:100%}
.product-price{
  text-transform:uppercase;
  letter-spacing:.04em;
  opacity:.6;
  font-size:.8rem;
  text-align:left;
}


/* ============================================================
   SEO — SAYFA BAŞINA TEK H1
   Fazla H1'ler <div>'e indirildi (başlık sırası bozulmasın diye
   <h2>'ye değil). Aşağıdaki kurallar görünümü birebir korur.
   ============================================================ */

/* hizmetler.html + urunler.html — "Tüm" / "Kullandığımız" */
#collection .collection__title1[data-v-18940a34]{
  font-family:PP Mori,sans-serif;font-size:6.5rem;font-weight:600;
  letter-spacing:0;line-height:1.1;margin:0;padding:0;text-transform:uppercase;
}
@media (max-width:767.98px){
  #collection .collection__title1[data-v-18940a34]{font-size:12vw}
}

/* hizmetler.html + urunler.html — masaüstü serif kopya
   (font/boyut zaten .collection__title2 ve .font-serif'ten geliyor) */
#collection div.collection__title2[data-v-18940a34]{margin:0;padding:0}

/* hakkimizda.html — "Merhaba, ben" */
#philosophy .philosophy__intro .philosophy__title1[data-v-8cc131a5]{
  font-family:PP Mori,sans-serif;font-size:10.3rem;font-weight:600;letter-spacing:0;
  line-height:1.1;margin:0;padding:0;position:relative;text-transform:none;
  top:-1rem;white-space:nowrap;z-index:2;
}
@media (max-width:767.98px){
  #philosophy .philosophy__intro .philosophy__title1[data-v-8cc131a5]{font-size:17vw}
}

/* randevu.html — görünür "Randevu Al" başlığı h2 -> h1 oldu */
#account .account__form h1{font-size:4rem;line-height:1;margin-bottom:1rem}
@media (max-width:767.98px){
  #account .account__form h1{font-size:3.8095238095rem}
}


/* ============================================================
   404 SAYFASI
   ============================================================ */
#hata404{padding:14rem 0 10rem}
#hata404 .subtitle{color:#8c8c8c;font-size:.72rem;letter-spacing:.42em;margin-bottom:2.2rem}
#hata404 h1{font-size:5.6rem;line-height:1.08;margin-bottom:2rem;text-transform:none}
#hata404 .error-page__desc{color:#4a4a4a;font-size:1.05rem;line-height:1.6;
  margin:0 auto 3rem;max-width:34rem}
#hata404 .error-page__links{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}
#hata404 .error-page__links .btn{align-items:center;display:flex;justify-content:center}
#hata404 .error-page__nap{color:#8c8c8c;font-size:.85rem;line-height:1.7;margin-top:3.5rem}
#hata404 .error-page__nap a{border-bottom:1px solid currentColor;color:inherit}
@media (max-width:767.98px){
  #hata404{padding:11rem 0 7rem}
  #hata404 h1{font-size:12vw}
  #hata404 .error-page__links{flex-direction:column}
}


/* ============================================================
   YEREL SEO — adres ve konum blokları
   ============================================================ */
.footer__adres,.randevu-adres{font-style:normal}
.randevu-adres{display:block}
.randevu-harita{border-bottom:1px solid currentColor;display:inline-block;
  margin-top:.7rem;opacity:.85}
.randevu-harita:hover{opacity:1}


/* ============================================================
   RANDEVU SAYFASI — içerik 100vh'yi aşabilsin
   (adres, çalışma saatleri ve hizmet bölgeleri eklendi)
   ============================================================ */
#account{height:auto;min-height:100vh}
#account .account__img{align-self:flex-start;height:100vh;position:sticky;top:0}
/* "Çalışmalarımıza göz atmak ister misiniz?" bloğu mutlak konumluydu ve
   uzun içerikte metnin üstüne biniyordu — akışa alındı. */
#account .account__form-register{bottom:auto;margin-top:2.5rem;position:static}
@media (max-width:767.98px){
  #account{height:auto;min-height:calc(var(--vhmobilebar, 1vh)*100)}
  #account .account__form{padding-bottom:4rem}
}


/* ============================================================
   FOOTER — e-posta bültenі yerine Google harita
   Ölçüler .footer__email kurallarıyla birebir aynı tutuldu.
   ============================================================ */
#footer .footer__map-wrapper{margin-top:-30%}
#footer .footer__map{
  align-items:center;background:#232323;color:#fff;display:flex;
  flex-direction:column;justify-content:center;
  padding:6rem 4rem 4rem;text-align:center;width:100%;
}
#footer .footer__map-title{font-size:4.5rem;line-height:.85;margin-bottom:2rem}
#footer .footer__map-frame{
  aspect-ratio:4/3;background:#2c2c2c;border-radius:10px;
  margin:3rem 0 2rem;overflow:hidden;width:100%;
}
#footer .footer__map-frame iframe{
  border:0;display:block;height:100%;width:100%;
  filter:grayscale(1) contrast(.9) brightness(.95);
  transition:filter .6s cubic-bezier(.18,.71,.11,1);
}
#footer .footer__map-frame:hover iframe{filter:none}
#footer .footer__map-link{text-decoration:underline}
@media (max-width:767.98px){
  #footer .footer__map-wrapper{margin-bottom:4rem}
  #footer .footer__map{padding:3rem 1.5rem 2.5rem}
  #footer .footer__map-title{font-size:2.5rem;margin-bottom:1rem}
  #footer .footer__map-frame{aspect-ratio:1/1;margin:2rem 0 1.5rem}
}

/* randevu.html gömülü harita */
.randevu-harita-frame{
  aspect-ratio:16/10;background:#eee;border-radius:10px;
  margin-top:1.2rem;overflow:hidden;width:100%;
}
.randevu-harita-frame iframe{border:0;display:block;height:100%;width:100%}

/* ============================================================
   SABİT WHATSAPP BUTONU (sağ alt)
   z-index 997: header (999) ve scrollbar (9998) altında kalır.
   ============================================================ */
.wa-float{
  align-items:center;background:#25d366;border-radius:2.2rem;bottom:2rem;
  box-shadow:0 .5rem 1.8rem rgba(0,0,0,.24);color:#fff;display:flex;
  height:4.4rem;justify-content:center;min-width:4.4rem;padding:0 1.25rem;
  position:fixed;right:2rem;text-decoration:none;z-index:997;
  transition:transform .45s cubic-bezier(.18,.71,.11,1),
             box-shadow .45s cubic-bezier(.18,.71,.11,1),background .45s;
}
.wa-float:hover,.wa-float:focus-visible{
  background:#1fba59;box-shadow:0 .7rem 2.2rem rgba(0,0,0,.3);transform:translateY(-3px);
}
.wa-float__icon{flex:0 0 auto;position:relative;z-index:2}
.wa-float__label{
  font-size:.85rem;letter-spacing:.02em;margin-left:0;max-width:0;opacity:0;
  overflow:hidden;position:relative;white-space:nowrap;z-index:2;
  transition:max-width .5s cubic-bezier(.18,.71,.11,1),
             margin-left .5s cubic-bezier(.18,.71,.11,1),opacity .35s;
}
.wa-float:hover .wa-float__label,.wa-float:focus-visible .wa-float__label{
  margin-left:.6rem;max-width:14rem;opacity:1;
}
.wa-float__pulse{
  animation:wa-pulse 2.6s cubic-bezier(.4,0,.6,1) infinite;
  background:#25d366;border-radius:inherit;inset:0;position:absolute;z-index:0;
}
@keyframes wa-pulse{
  0%{opacity:.5;transform:scale(1)}
  70%{opacity:0;transform:scale(1.45)}
  100%{opacity:0;transform:scale(1.45)}
}
@media (max-width:767.98px){
  .wa-float{bottom:1.2rem;height:4rem;min-width:4rem;padding:0 1rem;right:1.2rem}
  .wa-float__label{display:none}
}
@media (prefers-reduced-motion:reduce){
  .wa-float,.wa-float__pulse{animation:none;transition:none}
}


/* ============================================================
   DÜZELTMELER
   ============================================================ */

/* randevu.html — düğmeler eşit genişlikte ve ortalı, animasyonsuz
   (magnet sınıfı işaretlemeden de kaldırıldı) */
#account .account__form .btn{
  margin-left:auto;margin-right:auto;
  max-width:100%;
  padding-left:1.5rem;padding-right:1.5rem;
  width:26rem;
}

/* 404 düğmeleri de aynı şekilde animasyonsuz */
#hata404 .error-page__links .btn{transform:none!important}

/* footer haritasındaki "Yol tarifi al" koyu zeminde beyaz olmalı */
#footer .footer__map .footer__map-link,
#footer .footer__map .footer__map-link:hover{color:#fff}
#footer .footer__map .footer__map-link:after,
#footer .footer__map .footer__map-link:before{background:#fff}


/* randevu.html — .text-gray (#d8d8d8) koyu zemin için tasarlanmış;
   beyaz zeminde okunmuyordu. Koyu tona çekildi. */
#account .text-gray,
#account .account__form-desc,
#account .account__form-register p{color:#2f2f2f}
#account .account__form-register a{color:#2f2f2f}

/* sabit WhatsApp butonu footer'daki "Bilgilendirme / İletişim"
   bağlantılarının üstüne biniyordu */
@media (min-width:768px){
  #footer .footer__copyright-links{padding-right:4.5rem}
}
@media (max-width:767.98px){
  #footer .footer__copyright{padding-bottom:3.5rem}
}

.randevu-harita-frame{margin-bottom:1.6rem}