/* ============================================================================
   bolumler.css — Dilara Onganer Beauty & Hair
   Üç yeniden tasarlanan bölüm: HERO (before/after vitrini, erik zemin),
   ORTA (#iletişim kapanışı, krem, 4 özellik kartı), FOOTER (erik, dalgalı geçiş).
   renk.css + stil.css + yenileme.css'ten SONRA yüklenir; onları ezmez, tamamlar.
   Palet renk.css'ten; --kobalt-ac erik zemin, --kok krem, --altin pembe vurgu.
   Line-art dekorlar mask ile renklendirilir; el yazıları renkli <img>.
   ============================================================================ */

/* Global ikon boyutu — inline SVG'ler metin puntosuyla ölçeklenir. */
.ik{ width:1em; height:1em; flex:0 0 auto; display:inline-block; vertical-align:middle; }


/* ============================================================================
   HERO — .b1-hero  (before/after vitrini, koyu erik zemin)
   ============================================================================ */
.b1-hero{
  position:relative;
  overflow:hidden;
  background:var(--kobalt-ac);
  color:#fff;
  padding:clamp(48px, 7vw, 96px) 0;
}

/* Sol kenar line-art — mask tekniği, çok düşük opak beyaz. */
.b1-dekor{
  position:absolute;
  left:0; top:0; bottom:0;
  width:clamp(120px, 18vw, 260px);
  pointer-events:none;
  color:rgba(255,255,255,.10);
  background:currentColor;
  -webkit-mask:url(gorseller/y-dekor-hero-sol.png) no-repeat left center / contain;
          mask:url(gorseller/y-dekor-hero-sol.png) no-repeat left center / contain;
}

.b1-ic{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, .9fr) minmax(0, 1.2fr);
  gap:clamp(28px, 5vw, 72px);
  align-items:center;
}

.b1-metin{ min-width:0; }

/* Küçük açık-harf marka işareti. */
.b1-wordmark{
  margin:0;
  font-family:var(--govde);
  font-weight:700;
  font-size:.9rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:#fff;
}
.b1-wordmark-alt{
  margin:.35em 0 0;
  font-family:var(--govde);
  font-size:.72rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* Kısa yatay vurgu çizgisi. */
.b1-cizgi{
  width:58px;
  height:2px;
  margin:clamp(18px, 2.6vw, 26px) 0 clamp(20px, 3vw, 30px);
  background:var(--altin-ac);
  border-radius:2px;
}

.b1-baslik{
  margin:0;
  font-family:var(--vitrin);
  font-weight:600;
  font-size:clamp(2.6rem, 6vw, 4.6rem);
  line-height:1.02;
  letter-spacing:.005em;
  color:#fff;
}

.b1-alt{
  margin:clamp(16px, 2.4vw, 24px) 0 0;
  max-width:34ch;
  color:rgba(255,255,255,.82);
  font-size:clamp(1.02rem, 1.5vw, 1.18rem);
  line-height:1.55;
}

/* Pembe dolu hap CTA — ok ikonlu. */
.b1-cta{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin-top:clamp(24px, 3.4vw, 36px);
  min-height:52px;
  padding:14px 28px;
  border:0;
  border-radius:999px;
  background:var(--altin);
  color:#fff;
  font-family:var(--govde);
  font-weight:700;
  font-size:1.02rem;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.b1-cta .ik{ width:1.35em; height:1.35em; }
.b1-cta:hover{ background:var(--gul); }
.b1-cta:focus-visible{ outline:3px solid var(--altin-ac); outline-offset:3px; }

/* Küçük açık-harf mikro etiket (ok + metin). */
.b1-mikro{
  display:flex;
  align-items:center;
  gap:.6em;
  margin:clamp(22px, 3vw, 34px) 0 0;
  font-family:var(--govde);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
.b1-mikro .ik{ width:1.2em; height:1.2em; transform:scaleX(-1); }

/* Before/after kart sarmalayıcı — içinde #once-sonra / .once-sonra-listesi. */
.b1-kart{
  position:relative;
  min-width:0;
  justify-self:stretch;
}
.b1-kart .once-sonra-listesi{
  display:block;
  width:100%;
  gap:0;
}
.b1-kart .once-sonra-kart{ margin:0; }
.b1-kart .once-sonra-yuzey{
  border:0;
  border-radius:16px;
  box-shadow:0 26px 60px rgba(14,8,11,.34);
}
.b1-kart .once-sonra-gorsel{ object-position:center 46%; }
/* Etiketler makette alt köşelerde koyu hap. */
.b1-kart .once-sonra-etiket{
  top:auto;
  bottom:16px;
  border:0;
  background:rgba(26,16,20,.72);
  color:#fff;
  font-weight:700;
}
.b1-kart .once-sonra-ayirici{
  width:2px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(26,16,20,.2);
}
.b1-kart .once-sonra-kulp{
  width:46px; height:46px;
  border:0;
  background:#fff;
  color:var(--kobalt-ac);
  box-shadow:0 6px 16px rgba(14,8,11,.28);
}
.b1-kart .once-sonra-aciklama{
  margin-top:14px;
  color:rgba(255,255,255,.72);
  font-size:.82rem;
}

/* ============================================================================
   EL YAZISI — ARTIK GÖRSEL DEĞİL, CANLI METİN (12 Eylül 2026)
   Üç PNG (y-el-*.png) ölçüldü ve teknik olarak bozuk çıktı: piksellerinin
   yalnız %0-1'i opak, %66-77'si yarı saydam bir maske. Footerdakinin mürekkebi
   %7 opaklıktaydı — bu yüzden hem soluk görünüyor hem de etrafında açık bir
   dikdörtgen hâlesi bırakıyordu. Üstelik 157-238px genişliğinde üretilip
   150-340 CSS px'e basılıyorlardı, yani 3x ekranda 2.1-2.9 kat büyütme.
   Metne çevrildi: her puntoda keskin, rengi paletten geliyor, 112 KB görsel
   silindi. Yazı tipi Parisienne — latin-ext altkümesi ğ/ş/ı/ü/ö/ç taşıyor,
   index.html'deki TEK <link> içinde isteniyor.
   GERİ ALINACAKSA: PNG'ler yeniden üretilmeden geri konmasın.
   ============================================================================ */
.elyazi{
  margin:0;
  font-family:'Parisienne', 'Segoe Script', cursive;
  font-weight:400;
  line-height:1.3;
  letter-spacing:.012em;
  pointer-events:none;
  -webkit-font-smoothing:antialiased;
}

/* Sağ üstteki el yazısı — koyu erik zemin, bu yüzden açık mürekkep. */
.b1-elyazi{
  position:absolute;
  top:clamp(28px, 6vw, 78px);
  right:clamp(10px, 2vw, 34px);
  z-index:1;
  max-width:clamp(150px, 16vw, 230px);
  text-align:center;
  font-size:clamp(1.6rem, 2.3vw, 2.4rem);
  color:rgba(255,255,255,.92);
  transform:rotate(-5deg);
}


/* ============================================================================
   ORTA — .b2  (#iletişim kapanışı, krem zemin, 4 özellik kartı)
   ============================================================================ */
.b2{
  position:relative;
  overflow:hidden;
  background:var(--kok);
  color:var(--tebesir);
  padding:clamp(48px, 7vw, 92px) 0 0;
}

/* Solda ve sağda soluk line-art dekor. */
.b2-dekor-sol,
.b2-dekor-sag{
  position:absolute;
  top:0; bottom:0;
  width:clamp(90px, 14vw, 220px);
  pointer-events:none;
  color:rgba(142,66,105,.09);
  background:currentColor;
}
.b2-dekor-sol{
  left:0;
  -webkit-mask:url(gorseller/y-dekor-yaprak.png) no-repeat left top / contain;
          mask:url(gorseller/y-dekor-yaprak.png) no-repeat left top / contain;
}
.b2-dekor-sag{
  right:0;
  width:clamp(140px, 22vw, 320px);
  -webkit-mask:url(gorseller/y-dekor-tuy.png) no-repeat right center / contain;
          mask:url(gorseller/y-dekor-tuy.png) no-repeat right center / contain;
}

.b2-ust{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .85fr);
  gap:clamp(28px, 5vw, 64px);
  align-items:center;
  padding-bottom:clamp(40px, 5vw, 64px);
}

.b2-metin{ min-width:0; }

/* Altın küçük büyük-harf eyebrow. */
.b2-kas{
  margin:0;
  font-family:var(--govde);
  font-weight:700;
  font-size:.8rem;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--altin);
}
.b2-cizgi{
  width:54px;
  height:2px;
  margin:14px 0 clamp(18px, 2.4vw, 26px);
  background:var(--altin);
  border-radius:2px;
}
.b2-baslik{
  margin:0;
  font-family:var(--vitrin);
  font-weight:600;
  font-size:clamp(2.1rem, 4.6vw, 3.5rem);
  line-height:1.05;
  color:var(--tebesir);
}
.b2-isim{
  margin:clamp(18px, 2.4vw, 26px) 0 6px;
  font-family:var(--govde);
  font-weight:600;
  font-size:1.06rem;
  color:var(--tebesir);
}
.b2-adres{
  margin:0;
  color:var(--sis);
  font-size:.98rem;
  line-height:1.55;
}

/* Eylem düğmeleri — sarabilir. */
.b2-dugmeler{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top:clamp(22px, 3vw, 32px);
}
.b2-dugme{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  min-height:48px;
  padding:12px 22px;
  border:1px solid var(--cizgi-ac);
  border-radius:999px;
  background:transparent;
  color:var(--tebesir);
  font-family:var(--govde);
  font-weight:600;
  font-size:.98rem;
  text-decoration:none;
  cursor:pointer;
  transition:border-color .18s ease, background-color .18s ease, color .18s ease;
}
.b2-dugme .ik{ width:1.2em; height:1.2em; color:var(--altin); }
.b2-dugme:hover{ border-color:var(--altin); color:var(--altin); }
.b2-dugme:focus-visible{ outline:3px solid var(--altin-ac); outline-offset:3px; }
/* Erik dolu birincil düğme. */
.b2-dolu{
  border-color:var(--kobalt-ac);
  background:var(--kobalt-ac);
  color:#fff;
}
.b2-dolu .ik{ color:#fff; }
.b2-dolu:hover{
  border-color:var(--kapanis-zemin);
  background:var(--kapanis-zemin);
  color:#fff;
}

/* Sağdaki el yazısı — krem zemin, pembe mürekkep. */
.b2-elyazi{
  justify-self:end;
  max-width:clamp(240px, 30vw, 380px);
  font-size:clamp(1.9rem, 3vw, 2.9rem);
  color:var(--gul);
  transform:rotate(-3deg);
}

/* Dört özellik ızgarası — ince dikey ayraçlarla. */
.b2-ozellikler{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  border-top:1px solid var(--cizgi);
  padding:clamp(36px, 5vw, 56px) 0 clamp(44px, 6vw, 68px);
}
.b2-oz{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:0 clamp(14px, 2vw, 26px);
}
.b2-oz + .b2-oz{ border-left:1px solid var(--cizgi); }
.b2-oz-ikon{
  display:grid;
  place-items:center;
  width:72px; height:72px;
  margin-bottom:18px;
  border-radius:50%;
  background:var(--cizgi);
  color:var(--gul);
}
.b2-oz-ikon .ik{ width:30px; height:30px; }
.b2-oz h3{
  margin:0 0 6px;
  font-family:var(--vitrin);
  font-weight:600;
  font-size:clamp(1.12rem, 1.7vw, 1.4rem);
  line-height:1.15;
  color:var(--tebesir);
}
.b2-oz p{
  margin:0;
  color:var(--sis);
  font-size:.9rem;
  line-height:1.5;
}


/* ============================================================================
   FOOTER — .dip.b3  (koyu erik, üstte dalgalı geçiş)
   ============================================================================ */
.dip.b3{
  position:relative;
  overflow:hidden;
  background:var(--kobalt-ac);
  color:#fff;
  padding-top:clamp(72px, 9vw, 116px);
}
.dip.b3 p{ margin:0; }

/* Kremden eriğe dalgalı üst geçiş — inline SVG data-URI. */
.b3-dalga{
  position:absolute;
  top:0; left:0;
  width:100%;
  height:clamp(38px, 5vw, 56px);
  pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 56' preserveAspectRatio='none'%3E%3Cpath fill='%23FAF6F5' d='M0,0 H1440 V30 C1200,54 1080,10 840,26 C660,38 540,52 360,34 C240,22 120,10 0,30 Z'/%3E%3C/svg%3E") no-repeat top center / 100% 100%;
}

/* Sağda yüz line-art — mask, düşük opak beyaz. */
.b3-dekor{
  position:absolute;
  top:0; right:0; bottom:0;
  width:clamp(150px, 24vw, 340px);
  pointer-events:none;
  color:rgba(255,255,255,.13);
  background:currentColor;
  -webkit-mask:url(gorseller/y-dekor-yuz.png) no-repeat right center / contain;
          mask:url(gorseller/y-dekor-yuz.png) no-repeat right center / contain;
}

.b3-ic{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.5fr 1fr 1.2fr 1.3fr;
  gap:clamp(28px, 4vw, 56px);
  align-items:start;
  padding-bottom:clamp(34px, 4.5vw, 52px);
}

/* Marka sütunu. */
.b3-marka{ min-width:0; }
.dip.b3 .marka-ad{
  margin:0;
  font-family:var(--vitrin);
  font-weight:600;
  font-size:clamp(1.5rem, 2.6vw, 2rem);
  line-height:1.05;
  letter-spacing:.1em;
  color:#fff;
}
.b3-marka-alt{
  margin:8px 0 0;
  font-family:var(--govde);
  font-size:.74rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}
/* Footerdaki el yazısı — koyu erik zemin, açık mürekkep. */
.b3-elyazi{
  display:block;
  max-width:clamp(190px, 20vw, 250px);
  margin:clamp(14px, 2vw, 20px) 0;
  font-size:clamp(1.55rem, 2vw, 1.95rem);
  color:rgba(255,255,255,.9);
}

/* Daire çerçeveli sosyal ikon linkleri. */
.b3-sosyal{
  display:flex;
  gap:12px;
}
.dip.b3 .b3-sosyal a{
  display:grid;
  place-items:center;
  width:44px; height:44px;
  min-height:44px;
  padding:0;
  border:1px solid rgba(255,255,255,.4);
  border-radius:50%;
  color:#fff;
  transition:background-color .18s ease, color .18s ease, border-color .18s ease;
}
.b3-sosyal .ik{ width:20px; height:20px; }
.dip.b3 .b3-sosyal a:hover{
  background:#fff;
  border-color:#fff;
  color:var(--kobalt-ac);
}

/* Bağlantı sütunları. */
.b3-sutun{ min-width:0; }
.b3-baslik{
  margin:0 0 clamp(14px, 1.8vw, 20px);
  font-family:var(--vitrin);
  font-weight:600;
  font-size:clamp(1.12rem, 1.8vw, 1.35rem);
  color:#fff;
}
.b3-liste{
  margin:0;
  padding:0;
  list-style:none;
}
.b3-liste li{ margin:0 0 4px; }
.dip.b3 .b3-liste a{
  display:inline-flex;
  align-items:center;
  gap:.7em;
  min-height:44px;
  padding-block:4px;
  color:rgba(255,255,255,.88);
  font-size:.95rem;
  text-decoration:none;
  transition:color .18s ease;
}
.dip.b3 .b3-liste a:hover{ color:var(--altin-ac); }
.dip.b3 a:focus-visible{ outline:2px solid var(--altin-ac); outline-offset:3px; }

/* İletişim satırları — ikon + metin hizalı. */
.b3-iletisim li{ margin-bottom:8px; }
.dip.b3 .b3-iletisim a,
.b3-iletisim .b3-saat{
  display:inline-flex;
  align-items:flex-start;
  gap:.7em;
  min-height:44px;
  color:rgba(255,255,255,.88);
  font-size:.95rem;
  line-height:1.5;
  text-decoration:none;
}
.b3-iletisim .ik{
  width:20px; height:20px;
  margin-top:2px;
  color:rgba(255,255,255,.85);
}
.b3-saat{ color:rgba(255,255,255,.88); }

/* Takip sütunu — üç kare foto + açıklama + CTA. */
.b3-takip{ min-width:0; }
.b3-thumblar{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:8px;
  margin-bottom:14px;
}
.b3-thumb{
  display:block;
  width:100%;
  /* height:auto ŞART. <img> üzerindeki height="360" özniteliği sunum ipucu
     olarak height:360px veriyor; bu kural height yazmazsa onu ezmiyor ve
     height auto olmadığı için aspect-ratio SESSİZCE devre dışı kalıyor —
     kareler 108x360'a geriliyordu (12 Eyl 2026'da ölçüldü). */
  height:auto;
  aspect-ratio:1 / 1;
  object-fit:cover;
  border-radius:10px;
}
.b3-takip-not{
  margin:0 0 16px;
  color:rgba(255,255,255,.78);
  font-size:.9rem;
  line-height:1.55;
}
.dip.b3 .b3-takip-cta{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  min-height:48px;
  padding:12px 24px;
  border:0;
  border-radius:999px;
  background:var(--cizgi);
  color:var(--kobalt-ac);
  font-family:var(--govde);
  font-weight:700;
  font-size:.95rem;
  text-decoration:none;
  transition:background-color .18s ease, color .18s ease;
}
.b3-takip-cta .ik{ width:1.25em; height:1.25em; }
.dip.b3 .b3-takip-cta:hover{
  background:#fff;
  color:var(--kobalt-ac);
}

/* Telif — üstte ince çizgi, iki yana yaslı, küçük. */
.b3-telif{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:12px 20px;
  margin-top:clamp(20px, 3vw, 32px);
  padding-top:clamp(18px, 2.4vw, 26px);
  border-top:1px solid rgba(255,255,255,.16);
}
.b3-telif p{
  color:rgba(255,255,255,.72);
  font-size:.8rem;
}
.dip.b3 .b3-telif a{
  display:inline;
  min-height:0;
  color:rgba(255,255,255,.72);
  font-size:.8rem;
  text-decoration:none;
  transition:color .18s ease;
}
.dip.b3 .b3-telif a:hover{ color:var(--altin-ac); }
.b3-telif nav{ display:inline-flex; gap:6px 18px; flex-wrap:wrap; }


/* ============================================================================
   RESPONSIVE — ≤900px daralır, ≤560px tek sütun dikey
   ============================================================================ */
@media (max-width:900px){
  /* HERO tek sütun; el yazısı gizlenir. */
  .b1-ic{ grid-template-columns:1fr; gap:clamp(28px, 6vw, 44px); }
  .b1-elyazi{ display:none; }
  .b1-kart{ order:2; }

  /* ORTA tek sütun; el yazısı sola hizalı, ızgara 2 sütun. */
  .b2-ust{ grid-template-columns:1fr; }
  .b2-elyazi{ justify-self:start; }
  .b2-ozellikler{ grid-template-columns:repeat(2, 1fr); gap:clamp(28px, 5vw, 40px) 0; }
  /* Dikey ayraçları 2'li ızgaraya göre yeniden kur. */
  .b2-oz + .b2-oz{ border-left:0; }
  .b2-oz:nth-child(2n){ border-left:1px solid var(--cizgi); }
  .b2-oz:nth-child(n+3){ padding-top:clamp(28px, 4vw, 38px); }

  /* FOOTER 2 sütun. */
  .b3-ic{ grid-template-columns:1fr 1fr; gap:clamp(28px, 5vw, 44px); }
}

@media (max-width:560px){
  /* TELEFONDA TEK SÜTUNA DÜŞÜRÜLMÜYOR (12 Eyl 2026). Dört özellik alt alta
     dizilince bölüm ~4 ekran boyu uzuyor ve sayfa dengesiz görünüyordu.
     ≤900px bloğundaki 2'li ızgara ve oradaki dikey ayraç kuralları
     (.b2-oz:nth-child(2n) ve :nth-child(n+3)) telefonda da geçerli kalsın
     diye burada BİLEREK hiçbir .b2-* kuralı yok. Ayraçları geri açacaksan
     ikisini birden ≤900px bloğunda değiştir. */

  /* Footer da 2 sütun kalıyor; yalnız marka ve takip sütunu tam genişlik.
     Böylece iki bağlantı sütunu (Sayfalar / İletişim) yan yana ve simetrik. */
  .b3-marka{ grid-column:1 / -1; }
  .b3-takip{ grid-column:1 / -1; }
  /* Tam genişlikte üç kare fotoğraf dev görünmesin. */
  .b3-thumblar{ max-width:340px; }
  .b3-telif{ flex-direction:column; align-items:flex-start; }
}


/* ============================================================================
   Hareket azaltma — geçişleri kapat
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  .b1-cta,
  .b2-dugme,
  .dip.b3 .b3-sosyal a,
  .dip.b3 .b3-liste a,
  .dip.b3 .b3-takip-cta,
  .dip.b3 .b3-telif a{
    transition:none;
  }
}

/* Kayıt honeypotu: görsel alanın ve klavye sırasının dışında. */
.kayit-website{ position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.kayit-bilgi a{ display:inline-flex; align-items:center; min-height:44px; }