/* ══════════════════════════════════════════════════════════════════════════
   Daire 17 Bloom — İçerik sayfaları tasarım katmanı
   ─────────────────────────────────────────────────────────────────────────
   SORUN:
   .sub-card sınıfının masaüstünde HİÇ stili yoktu. Tek kural
   @media(max-width:720px) içindeki "padding:30px" idi. Bu yüzden içerik
   sayfalarındaki bütün metin, arka plandaki dükkân fotoğrafının üzerine
   doğrudan biniyordu: hem düz yazı gibi görünüyor hem de fotoğrafın açık
   bölgelerinde okunmuyordu. Mobilde durum daha kötüydü.

   ÇÖZÜM:
   Sitenin başka yerlerinde zaten kullanılan kart dili (.service-3d-card)
   burada da uygulanıyor: altın saç teli çerçeve, koyu yarı saydam panel,
   arka plan bulanıklığı ve içeride ikinci bir ince çerçeve. Yeni bir görsel
   dil icat edilmiyor — mevcut olan içerik sayfalarına taşınıyor.

   Bu dosya style-bloom.css'ten SONRA yükleniyor, onun üzerine yazar.
   ══════════════════════════════════════════════════════════════════════════ */

.subpage{
  /* Üstteki sabit başlığın altında kalmasın; mobilde daha derli toplu */
  padding-top:clamp(120px,14vw,178px);
  padding-bottom:clamp(56px,8vw,90px);
}

/* ── Ana panel ──────────────────────────────────────────────────────────── */
.subpage .sub-card{
  position:relative;
  border:1px solid rgba(201,169,110,.30);
  background:linear-gradient(180deg, rgba(15,26,20,.90), rgba(8,15,11,.86));
  box-shadow:0 18px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  padding:clamp(22px,3.2vw,40px);
  margin-bottom:clamp(16px,2.4vw,26px);
  overflow:hidden;
}
.subpage .sub-card:last-of-type{margin-bottom:0}

/* Üst köşeden gelen hafif ışık — kartlara hacim verir */
.subpage .sub-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg, rgba(255,255,255,.07), transparent 30%, transparent 74%, rgba(201,169,110,.05));
  pointer-events:none;
}
.subpage .sub-card > *{position:relative;z-index:1}

/* İlk kart (sayfa girişi) biraz daha belirgin */
.subpage .sub-card:first-of-type{
  border-color:rgba(201,169,110,.42);
  box-shadow:0 24px 56px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.07);
}

/* ── Yol izi ────────────────────────────────────────────────────────────── */
.subpage .breadcrumb{
  font-size:.78rem;
  letter-spacing:.03em;
  color:rgba(247,244,239,.55);
  margin-bottom:14px;
  display:flex;flex-wrap:wrap;gap:6px;align-items:center;
}
.subpage .breadcrumb a{color:rgba(247,244,239,.72);text-decoration:none;border-bottom:1px solid transparent;transition:.2s}
.subpage .breadcrumb a:hover{color:var(--goldLight,#f2dc93);border-bottom-color:currentColor}
.subpage .breadcrumb span[aria-hidden]{color:rgba(201,169,110,.5)}

/* ── Başlıklar ──────────────────────────────────────────────────────────── */
.subpage .sub-card h1{margin-bottom:18px;text-wrap:balance}

.subpage .sub-card h2{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-size:clamp(1.55rem,3.1vw,2.25rem);
  font-weight:500;
  line-height:1.18;
  letter-spacing:-.012em;
  color:var(--cream,#f7f4ef);
  margin:0 0 16px;
  padding-top:14px;
  text-wrap:balance;
  position:relative;
}
/* Başlığın üstünde kısa altın çizgi — bölüm başlangıcını işaretler */
.subpage .sub-card h2::before{
  content:"";
  position:absolute;
  top:0;left:0;
  width:44px;height:2px;
  background:linear-gradient(90deg,var(--gold,#c9a96e),transparent);
}
.subpage .sub-card:first-of-type h2{padding-top:0}
.subpage .sub-card:first-of-type h2::before{display:none}

.subpage .sub-card h3{
  font-family:var(--sans,'Jost',sans-serif);
  font-size:1.02rem;font-weight:600;letter-spacing:.01em;
  color:var(--cream,#f7f4ef);margin:0 0 6px;
}

/* ── Metin ──────────────────────────────────────────────────────────────── */
.subpage .sub-card p{
  color:rgba(247,244,239,.80);
  font-size:1.02rem;
  line-height:1.86;
  max-width:68ch;
  margin:0 0 15px;
}
.subpage .sub-card p:last-child{margin-bottom:0}
.subpage .sub-card strong{color:var(--cream,#f7f4ef);font-weight:600}

/* Giriş paragrafı — sayfanın en değerli bölümü, biraz öne çıkar */
.subpage .sub-card .lede{
  font-size:clamp(1.04rem,1.5vw,1.14rem);
  line-height:1.82;
  color:rgba(247,244,239,.88);
  padding-left:18px;
  border-left:2px solid rgba(201,169,110,.45);
}

.subpage .sub-card a:not(.btn){
  color:var(--goldLight,#f2dc93);
  text-decoration:none;
  border-bottom:1px solid rgba(242,220,147,.35);
  transition:.2s ease;
}
.subpage .sub-card a:not(.btn):hover{border-bottom-color:currentColor}
.subpage .sub-card a:focus-visible{outline:2px solid var(--goldLight,#f2dc93);outline-offset:3px}

/* ── Listeler ───────────────────────────────────────────────────────────── */
.subpage .sub-card ul,
.subpage .sub-card ol{
  color:rgba(247,244,239,.80);
  font-size:1rem;
  line-height:1.82;
  max-width:68ch;
  margin:0 0 15px;
  padding-left:0;
  list-style:none;
  counter-reset:bloomli;
}
.subpage .sub-card ul li,
.subpage .sub-card ol li{
  position:relative;
  padding-left:30px;
  margin-bottom:12px;
}
.subpage .sub-card ul li::before{
  content:"";
  position:absolute;left:6px;top:.72em;
  width:6px;height:6px;
  border:1px solid var(--gold,#c9a96e);
  transform:rotate(45deg);
}
.subpage .sub-card ol li{counter-increment:bloomli}
.subpage .sub-card ol li::before{
  content:counter(bloomli);
  position:absolute;left:0;top:.06em;
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-size:1.05rem;
  color:var(--gold,#c9a96e);
  font-variant-numeric:tabular-nums;
}

/* ── Tablo ──────────────────────────────────────────────────────────────── */
.subpage .bloom-tablo{
  overflow-x:auto;
  margin:4px 0 6px;
  -webkit-overflow-scrolling:touch;
}
.subpage .bloom-tablo table{
  width:100%;
  border-collapse:collapse;
  font-size:.95rem;
  min-width:460px;
}
.subpage .bloom-tablo th{
  text-align:left;
  font-family:var(--sans,'Jost',sans-serif);
  font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
  color:var(--gold,#c9a96e);
  padding:12px 14px;
  border-bottom:1px solid rgba(201,169,110,.35);
  white-space:nowrap;
}
.subpage .bloom-tablo td{
  padding:14px;
  border-bottom:1px solid rgba(255,255,255,.07);
  color:rgba(247,244,239,.80);
  line-height:1.6;
  vertical-align:top;
}
.subpage .bloom-tablo tr:last-child td{border-bottom:none}
.subpage .bloom-tablo td strong{color:var(--cream,#f7f4ef)}

/* ── Sık sorulan sorular ────────────────────────────────────────────────── */
.subpage .bloom-sss{border-top:1px solid rgba(255,255,255,.08)}
.subpage .bloom-sss details{
  border-bottom:1px solid rgba(255,255,255,.08);
}
.subpage .bloom-sss summary{
  cursor:pointer;
  list-style:none;
  padding:16px 40px 16px 0;
  position:relative;
  font-size:1rem;
  font-weight:500;
  color:var(--cream,#f7f4ef);
  line-height:1.5;
  transition:color .2s ease;
}
.subpage .bloom-sss summary::-webkit-details-marker{display:none}
.subpage .bloom-sss summary:hover{color:var(--goldLight,#f2dc93)}
.subpage .bloom-sss summary::after{
  content:"";
  position:absolute;right:8px;top:50%;
  width:11px;height:11px;
  border-right:1.5px solid var(--gold,#c9a96e);
  border-bottom:1.5px solid var(--gold,#c9a96e);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .25s ease;
}
.subpage .bloom-sss details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.subpage .bloom-sss details[open] summary{color:var(--goldLight,#f2dc93)}
.subpage .bloom-sss details p{
  padding:0 0 18px;
  margin:0;
  font-size:.97rem;
  color:rgba(247,244,239,.74);
}

/* ── Buton grubu ────────────────────────────────────────────────────────── */
.subpage .bloom-eylem{
  display:flex;flex-wrap:wrap;gap:12px;
  margin-top:26px;
}

/* ── Etiket bulutu (kategoriler / diğer hizmetler) ──────────────────────── */
.subpage .bloom-etiketler{display:flex;flex-wrap:wrap;gap:9px;margin-top:16px}
.subpage .bloom-etiketler a{
  padding:9px 17px;
  border:1px solid rgba(201,169,110,.32);
  border-radius:999px;
  font-size:.88rem;
  color:rgba(247,244,239,.82);
  text-decoration:none;
  transition:.22s ease;
  background:rgba(201,169,110,.04);
}
.subpage .bloom-etiketler a:hover{
  border-color:rgba(201,169,110,.7);
  color:var(--goldLight,#f2dc93);
  background:rgba(201,169,110,.10);
}

/* ── Görsel şeridi ──────────────────────────────────────────────────────── */
.subpage .bloom-gorseller{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:14px;
  margin-top:20px;
}
.subpage .bloom-gorseller figure{margin:0;position:relative}
.subpage .bloom-gorseller img{
  width:100%;
  /* height:auto ŞART. Görsellerde width="400" height="400" öznitelikleri var
     (tarayıcı yer ayırıp sayfa zıplamasın diye). Bu öznitelikler yükseklik
     belirlediği için aspect-ratio devre dışı kalıyor ve görseller 400px
     yüksekliğinde dikdörtgen çıkıyordu. height:auto ile aspect-ratio yeniden
     devreye giriyor, kareler kare oluyor. */
  height:auto;
  aspect-ratio:1;
  object-fit:cover;
  display:block;
  border:1px solid rgba(201,169,110,.22);
  transition:transform .4s ease, border-color .3s ease;
}
.subpage .bloom-gorseller a:hover img,
.subpage .bloom-gorseller figure:hover img{
  transform:scale(1.03);
  border-color:rgba(201,169,110,.55);
}
.subpage .bloom-gorseller figcaption{
  font-size:.86rem;
  color:rgba(247,244,239,.72);
  padding:9px 2px 0;
  line-height:1.45;
}
.subpage .bloom-gorseller figcaption strong{
  display:block;
  color:var(--cream,#f7f4ef);
  font-weight:600;
  margin-bottom:2px;
}

/* ── Adres bloğu ────────────────────────────────────────────────────────── */
.subpage .bloom-adres{
  font-style:normal;
  color:rgba(247,244,239,.74);
  line-height:1.8;
  font-size:.95rem;
  margin-top:6px;
}
.subpage .bloom-adres strong{color:var(--cream,#f7f4ef)}

/* ══════════════════════════════════════════════════════════════════════════
   MOBİL
   ══════════════════════════════════════════════════════════════════════════ */
@media(max-width:760px){
  .subpage .sub-card{
    padding:22px 20px;
    margin-bottom:14px;
    /* Mobilde bulanıklık bazı telefonlarda kaydırmayı yavaşlatıyor */
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
  }
  /* Dev H1 mobilde ekranı tamamen dolduruyordu */
  .subpage .sub-card h1{
    font-size:clamp(2.1rem,9vw,3rem)!important;
    line-height:1.06;
    letter-spacing:-.03em;
    margin-bottom:14px;
  }
  .subpage .sub-card h2{font-size:clamp(1.32rem,5.6vw,1.7rem)}
  .subpage .sub-card p,
  .subpage .sub-card ul,
  .subpage .sub-card ol{font-size:.98rem;line-height:1.78}
  .subpage .sub-card .lede{padding-left:14px;font-size:1rem}
  .subpage .bloom-eylem{gap:10px;margin-top:20px}
  /* Butonlar mobilde tam genişlik — parmakla basması kolay olsun */
  .subpage .bloom-eylem .btn{width:100%;justify-content:center;text-align:center}
  .subpage .bloom-gorseller{grid-template-columns:1fr 1fr;gap:10px}
  .subpage .bloom-tablo table{min-width:420px;font-size:.9rem}
  .subpage .bloom-tablo th,
  .subpage .bloom-tablo td{padding:11px 12px}
  /* Kaydırılabilir tablonun kaydırılabildiği belli olsun */
  .subpage .bloom-tablo{
    background:linear-gradient(90deg,transparent 88%,rgba(201,169,110,.10));
    border-right:1px solid rgba(201,169,110,.14);
  }
  .subpage .bloom-sss summary{font-size:.97rem;padding:14px 34px 14px 0}
  .subpage .bloom-etiketler a{font-size:.84rem;padding:8px 14px}
  .subpage .breadcrumb{font-size:.74rem}
}

@media(max-width:420px){
  .subpage .sub-card{padding:20px 16px}
  .subpage .bloom-gorseller{grid-template-columns:1fr 1fr;gap:8px}
  .subpage .sub-card h1{font-size:clamp(1.85rem,8.6vw,2.4rem)!important}
}

/* Hareket azaltma tercihi olan kullanıcılar için */
@media(prefers-reduced-motion:reduce){
  .subpage .bloom-gorseller img,
  .subpage .bloom-etiketler a,
  .subpage .bloom-sss summary::after{transition:none}
  .subpage .bloom-gorseller a:hover img{transform:none}
}

/* ══════════════════════════════════════════════════════════════════════════
   Organizasyon türleri ızgarası (/hizmetler)
   ══════════════════════════════════════════════════════════════════════════ */
.bloom-hizmet-izgara{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(196px,1fr));
  gap:14px;
  margin-top:18px;
}
.bloom-hizmet-kutu{
  display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:26px 18px;
  background:linear-gradient(180deg,rgba(0,96,57,.10),rgba(0,96,57,.03));
  border:1px solid rgba(201,169,110,.20);
  text-decoration:none!important;
  border-bottom:1px solid rgba(201,169,110,.20)!important;
  transition:.26s ease;
}
.bloom-hizmet-kutu:hover{
  border-color:rgba(201,169,110,.55)!important;
  background:linear-gradient(180deg,rgba(0,96,57,.18),rgba(0,96,57,.06));
  transform:translateY(-3px);
}
.bloom-hizmet-kutu .ico{font-size:2.1rem;margin-bottom:12px;line-height:1}
.bloom-hizmet-kutu .ico img{
  width:56px;height:56px;object-fit:cover;border-radius:50%;
  border:1px solid rgba(201,169,110,.3);display:block;
}
.bloom-hizmet-kutu strong{
  font-family:var(--serif,'Cormorant Garamond',serif);
  font-size:1.18rem;font-weight:500;line-height:1.25;
  color:var(--cream,#f7f4ef);margin-bottom:7px;
}
.bloom-hizmet-kutu p{
  font-size:.85rem;line-height:1.55;
  color:rgba(247,244,239,.65);margin:0!important;max-width:none!important;
}
.bloom-hizmet-kutu .fiyat{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  margin-top:12px;color:var(--gold,#c9a96e);
}

/* Hizmet detay sayfasına eklenen alt içerik bloğu */
.bloom-ek-icerik{padding-bottom:2.5rem}
.bloom-ek-icerik .sub-card{
  position:relative;
  border:1px solid rgba(201,169,110,.30);
  background:linear-gradient(180deg, rgba(15,26,20,.90), rgba(8,15,11,.86));
  box-shadow:0 18px 42px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.05);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:clamp(22px,3.2vw,40px);
  margin-bottom:clamp(16px,2.4vw,26px);
  overflow:hidden;
}

@media(max-width:760px){
  .bloom-hizmet-izgara{grid-template-columns:1fr 1fr;gap:10px}
  .bloom-hizmet-kutu{padding:20px 12px}
  .bloom-hizmet-kutu strong{font-size:1.02rem}
  .bloom-hizmet-kutu p{font-size:.78rem}
  .bloom-hizmet-kutu .ico{font-size:1.7rem}
  .bloom-hizmet-kutu .ico img{width:44px;height:44px}
  .bloom-ek-icerik .sub-card{padding:22px 20px;margin-bottom:14px}
}
@media(max-width:400px){
  .bloom-hizmet-izgara{grid-template-columns:1fr}
}

/* ══════════════════════════════════════════════════════════════════════════
   Çiçeklerimiz vitrini — panelden eklenen kayıtlar
   ══════════════════════════════════════════════════════════════════════════ */
.subpage .bloom-vitrin{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.subpage .bloom-vitrin figcaption{font-size:.86rem;line-height:1.55;opacity:.8}
.subpage .bloom-vitrin figcaption strong{margin-bottom:3px}
@media(max-width:760px){
  .subpage .bloom-vitrin{grid-template-columns:1fr 1fr}
  .subpage .bloom-vitrin figcaption{font-size:.8rem}
}

/* ─────────────────────────────────────────────────────────────
   Yüzen sosyal butonlar (Instagram / WhatsApp)
   Sorun: butonlar masaüstünde sol alt köşede duruyor ve 192 piksel
   genişliğinde. Ekran 1700 pikselden darsa sayfa kenarında o kadar boşluk
   olmadığı için butonlar yazının ÜZERİNE biniyordu — "Tüm çiçeklerimizi
   görüntüle" bağlantısı butonun altında kaldığı için tıklanamıyordu.
   Çözüm: 1700 pikselin altında butonlar yalnızca simge olarak gösterilir,
   yazıyı kapatmaz. Geniş ekranlarda etiketli hâli aynen korunur.
   ───────────────────────────────────────────────────────────── */
@media (min-width:721px) and (max-width:1699px){
  .floating-socials .float-btn{
    min-width:0;
    width:54px;
    height:54px;
    padding:0;
    gap:0;
    justify-content:center;
    border-radius:50%;
  }
  .floating-socials .float-btn > span{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .floating-socials{gap:12px;left:12px}
}