/* Verterra · v10 · ÜST ÇUBUK — Arakot Render Lab'in kapsülü (render-lab-v20/topbar.css ölçüleri)
   Gerçek logo eskisi gibi sol üstte, aynı boyda (kullanıcı, 25 Eki: kapsüldeki "Verterra Villas" yazısı kalktı).
   Ortada yüzen beyaz kapsül: 20 px yukarıda, 52 px boy, köşe 16, iç pay 10; başta simge karesi, ortada bölümler,
   sağda sakin dil düğmesi ve siyah "Bilgi al & randevu". Bulunduğumuz bölüm: arkasından kayan siyah hap, beyaz yazı
   (Render Lab'de yalnız yazı koyulaşıyordu; burada daha net olsun istendi). Villadayken ‹ A1 › grubu bölümlerin önüne açılır.
   Canlı backdrop-filter yok (oynayan videonun üstünde takılma yapıyordu): beyaz %90.
   Telefonda: kenardan kenara kapsül, simge + ad, siyah "Randevu" ve menü kapısı; bölümler mevcut menü sayfasında. */

.ust{--k-ust:20px;--k-boy:52px;--k-pay:10px;--k-r:16px;--k-murekkep:#0b0b0c;--k-gri:#4f4f52;--k-kil:rgba(11,11,12,.065);--k-kil-ust:rgba(11,11,12,.11);height:72px}
.kapsul{position:absolute;left:50%;top:var(--k-ust);height:var(--k-boy);display:flex;align-items:center;gap:0;padding:0 var(--k-pay);
  border-radius:var(--k-r);transform:translateX(-50%);pointer-events:auto;color:var(--k-murekkep);
  transition:opacity .55s var(--yumusak),transform .7s var(--yay)}
.kapsul-cam{position:absolute;inset:0;z-index:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 0 0 1px rgba(11,11,12,.04),0 1px 2px rgba(11,11,12,.05),0 12px 34px -12px rgba(11,11,12,.22)}
.kapsul > :not(.kapsul-cam){position:relative;z-index:1}

/* giriş sürerken kapsül gizli; logo sol üstteki yerine uçup oturunca belirir (logonun kendisi eskisi gibi) */
html.giris-ust .kapsul{opacity:.001;transform:translate(-50%,-10px);pointer-events:none}
html.giris-ust .kapsul :is(.hap,.ust-sag){opacity:1;transform:none}
.kapsul :is(.hap,.ust-sag){position:relative;left:auto;right:auto;top:auto;transform:none;will-change:auto}

/* ── başta simge karesi (Render Lab'deki gibi; ad yazısı yok) ── */
.marka-kare{display:grid;place-items:center;width:52px;height:32px;border-radius:9px;flex:0 0 auto;
  background:linear-gradient(180deg,#f4f4f4,#dedede);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 0 0 1px rgba(11,11,12,.07),0 1px 2px rgba(11,11,12,.14),0 2px 6px -2px rgba(11,11,12,.12)}
.marka-kare img{display:block;width:42px;height:auto}

/* ── ortada bölümler ── */
.kapsul .hap{display:flex;align-items:center;height:34px;margin:0 22px 0 18px;padding:0;border-radius:0;background:none;box-shadow:none;overflow:visible}
.kapsul .hap::before,.kapsul .hap::after{display:none}
.kapsul .hap button{height:32px;padding:0 11px;border-radius:8px;font:450 14px/1 var(--f-govde);letter-spacing:-.003em;text-transform:none;color:var(--k-gri);
  transition:color .25s var(--yumusak),background-color .25s var(--yumusak)}
.kapsul .hap .menu{gap:2px}
@media (hover:hover){ .kapsul .hap .menu button:not([aria-current=true]):hover{background:var(--k-kil);color:var(--k-murekkep)} }
.kapsul .hap .menu button[aria-current=true]{color:#fff;font-weight:550}
.kapsul .hap .isik{height:32px;top:0;border-radius:8px;background:var(--k-murekkep);
  box-shadow:0 1px 1.5px rgba(0,0,0,.22),0 8px 20px -8px rgba(0,0,0,.35)}
.kapsul .hap button:focus-visible{outline:2px solid var(--k-murekkep);outline-offset:-2px;box-shadow:none}
.kapsul .hap .menu button[aria-current=true]:focus-visible{outline-color:#fff}
/* villadayken ‹ A1 › */
.kapsul .hap .villa-grup.acik{margin-right:10px;padding-right:10px;box-shadow:inset -1px 0 0 rgba(11,11,12,.1)}
.kapsul .hap .villa-grup button{width:32px;padding:0;justify-content:center;font-size:18px;color:var(--k-murekkep)}
@media (hover:hover){ .kapsul .hap .villa-grup button:hover{background:var(--k-kil)} }
.kapsul .hap .vg-ad{font-size:24px;min-width:36px;color:var(--k-murekkep)}

/* ── sağ: dil (sakin) + siyah randevu ── */
.kapsul .ust-sag{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.kapsul .dil-dugme{height:32px;padding:0 10px 0 12px;border-radius:8px;background:var(--k-kil);color:var(--k-murekkep);
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.04);font:600 13px/1 var(--f-govde);letter-spacing:.02em;transition:background-color .2s var(--yumusak)}
@media (hover:hover){ .kapsul .dil-dugme:hover{background:var(--k-kil-ust)} }
.kapsul .dil-dugme:focus-visible{outline:2px solid var(--k-murekkep);outline-offset:2px;box-shadow:none}
.kapsul .cta{height:32px;padding:0 15px 0 13px;gap:7px;border-radius:8px;background:#000;color:#fff;
  font:600 13px/1 var(--f-govde);letter-spacing:-.004em;text-transform:none;
  box-shadow:0 1px 1.5px rgba(0,0,0,.22),0 10px 30px -6px rgba(0,0,0,.3);
  transition:background-color .2s var(--yumusak),translate .22s var(--yumusak),scale .18s var(--yumusak),box-shadow .24s var(--yumusak)}
.cta-ikon{width:14px;height:14px;flex:0 0 auto;margin-top:-1px}
@media (hover:hover){ .kapsul .cta:hover{background:#212121;translate:0 -1px;box-shadow:0 2px 3px rgba(0,0,0,.2),0 16px 34px -8px rgba(0,0,0,.36)} }
.kapsul .cta:active{translate:none;scale:.97}
.kapsul .cta:focus-visible{outline:2px solid var(--k-murekkep);outline-offset:3px;box-shadow:none}

/* ── açılır paneller: aynı beyaz cam, kapsülün altında (animasyonla gelir/gider: eski geçişler aynen) ── */
.dil-menu.cam,.villa-menu.cam,.tel-menu.cam{background-image:none!important;background-color:rgba(255,255,255,.96)!important;border-color:rgba(11,11,12,.06);color:var(--k-murekkep,#0b0b0c);
  box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(11,11,12,.05),0 18px 44px -14px rgba(11,11,12,.32)}
.dil-menu.cam::before,.villa-menu.cam::before,.tel-menu.cam::before{display:none}
.dil-menu{top:calc(100% + 18px);border-radius:14px}
.dil-menu button{height:40px;border-radius:9px;color:#0b0b0c}
.dil-menu button:hover{background:rgba(11,11,12,.05)}
.dil-menu button[aria-checked=true]{background:#0b0b0c;color:#fff}
.villa-menu{top:84px;border-radius:18px}
.vm-kart:hover,.vm-kart:focus-visible,.vm-3b:hover,.vm-3b:focus-visible{background:rgba(11,11,12,.045)}
.vm-kart,.vm-3b{color:#0b0b0c}

/* masaüstünde telefon öğeleri yok */
.kapsul .tel-menu-dugme,.kapsul .tel-villalar{display:none}

/* orta genişlik: kapsül sağa yaslanır (soldaki logoya binmesin), hava ve yan paylar daralır */
@media (min-width:601px) and (max-width:1180px){
  .kapsul{left:auto;right:16px;transform:none}
  html.giris-ust .kapsul{transform:translateY(-10px)}
  .kapsul .hap{margin:0 12px 0 12px}
  .kapsul .hap button{padding:0 8px;font-size:13.5px}
  .kapsul .cta .uzun{display:none}
  .kapsul .cta .kisa{display:inline}
}
@media (min-width:601px) and (max-width:900px){
  .marka-kare{display:none}
  .kapsul .hap{margin-left:0}
  .logo{height:58px}
}

/* ── telefon: logo solda (eskisi gibi), sağda kapsül: siyah "Randevu" + menü kapısı ── */
@media (max-width:600px){
  .ust{--k-ust:10px;--k-boy:48px;--k-pay:6px;--k-r:14px;height:64px}
  .kapsul{left:auto;right:10px;transform:none}
  html.giris-ust .kapsul{transform:translateY(-10px)}
  .marka-kare,.kapsul .hap{display:none}
  .kapsul .ust-sag{gap:6px}
  .kapsul .cta{display:inline-flex!important;height:36px;padding:0 13px 0 11px}
  .kapsul .cta .uzun{display:none}
  .kapsul .cta .kisa{display:inline}
  .kapsul .tel-menu-dugme{display:grid!important;place-items:center;width:36px;height:36px;padding:0;border-radius:9px;background:rgba(11,11,12,.055);color:#0b0b0c;
    box-shadow:none;letter-spacing:0}
  .kapsul .tel-menu-dugme .tmd-ikon{width:14px;height:8px}
  .kapsul .tel-menu-dugme .tmd-ikon i{height:1.6px}
  .kapsul .tel-menu-dugme .tmd-ikon i:nth-child(1){top:0}
  .kapsul .tel-menu-dugme .tmd-ikon i:nth-child(2){top:6.4px}
  .kapsul .tel-menu-dugme[aria-expanded=true] .tmd-ikon i:nth-child(1){top:3.2px}
  .kapsul .tel-menu-dugme[aria-expanded=true] .tmd-ikon i:nth-child(2){top:3.2px}
  /* menü sayfası kapsülün altından açılır */
  .tel-menu{top:64px;left:10px;right:10px;padding-top:6px;border-radius:18px;max-height:calc(100svh - 74px);transform-origin:100% 0}
  .tm-bolumler button{color:#0b0b0c}
  .tm-bolumler button[aria-current=true]{background:#0b0b0c;color:#fff;box-shadow:none}
  .villa-menu{top:66px}
}
@media (max-width:359px){
  .kapsul .cta{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){
  .kapsul,.kapsul .hap button,.kapsul .cta,.kapsul .dil-dugme{transition:none}
}

/* ── AÇILIŞ METNİ (kullanıcı, 25 Eki: "sayfayı bir okusun insanlar"): büyük slogan, onun altında eski slogan, bilgi satırı,
   başlangıç fiyatı. Sol alt köşedeki koyulaşma metinle birlikte büyür (başlığın arkasındaki gök kararmaz). ── */
.giris-karartma{background:radial-gradient(ellipse 60% 62% at 0% 100%,rgba(4,13,20,.84),rgba(4,13,20,.62) 46%,rgba(4,13,20,0) 100%)}
.gy-slogan{margin:0;max-width:13em;font:600 clamp(34px,3.3vw,58px)/1.02 var(--f-govde);letter-spacing:-.028em;color:#fff;
  text-shadow:0 2px 24px rgba(0,0,0,.4)}
.giris-yazi .gy-alt{margin-top:16px;font-size:clamp(18px,1.35vw,22px);line-height:1.35;font-weight:500;color:rgba(255,255,255,.94)}
.gy-kunye{margin:12px 0 0;font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.82);text-shadow:0 1px 8px rgba(0,0,0,.45)}
.giris-yazi .gy-fiyat{margin-top:22px}
@media (max-width:600px){
  .gy-slogan{font-size:clamp(30px,8.6vw,38px)}
  .giris-yazi .gy-alt{margin-top:10px;font-size:17px}
  .gy-kunye{margin-top:8px;font-size:11.5px;letter-spacing:.08em}
  .giris-yazi .gy-fiyat{margin-top:14px}
  .giris-karartma{background:linear-gradient(0deg,rgba(4,13,20,.86) 0,rgba(4,13,20,.66) 30%,rgba(4,13,20,0) 58%)}
}