@charset "UTF-8";
/* ==========================================================================
   Ankalife — Instagram bio sayfası (/{dil}/bio/)
   style.css'in ARDINDAN yüklenir: renk tokenları, yazı tipleri ve reset
   oradan gelir; burada yalnız bu sayfanın düzeni var.

   Ölçü: tek sütun, 520px kap — sayfa neredeyse tamamen telefonda açılıyor.
   Üst blok (dil + logo + randevu + hızlı iletişim) kendi yeşil kartında
   durur; böylece metin uzunluğu dile göre değişince zemin sınırı kaymaz.
   ========================================================================== */

body.bio-page{background:var(--paper);}
.bio-shell{max-width:520px;margin:0 auto;padding:16px 16px 44px;}

/* ---------- Yeşil üst kart ---------- */
.bio-hero{
  background:radial-gradient(120% 130% at 50% 0%, #2F5A3B 0%, var(--green-d) 58%, var(--green-dd) 100%);
  border-radius:26px;padding:14px 18px 22px;color:#fff;
  box-shadow:0 18px 44px rgba(22,49,29,.26);
}

.bio-langs{display:flex;justify-content:center;gap:6px;margin-bottom:16px;}
.bio-lang{
  font-size:12px;font-weight:700;letter-spacing:.08em;padding:6px 13px;border-radius:999px;
  color:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.24);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}
.bio-lang.is-on{background:var(--gold);border-color:var(--gold);color:var(--green-dd);}
.bio-lang:focus-visible{outline-color:#fff;}

.bio-head{text-align:center;}
.bio-avatar{
  display:block;width:132px;height:132px;margin:0 auto 14px;border-radius:50%;overflow:hidden;
  background:#fff;border:3px solid rgba(255,255,255,.92);box-shadow:0 14px 30px rgba(0,0,0,.3);
}
/* Logo dosyası yuvarlak köşeli kare ve kenarlarında krem boşluk var; daire
   maskesinde mühür küçük kalıyordu. Hafif yakınlaştırma o boşluğu kırpar. */
.bio-avatar img{width:100%;height:100%;object-fit:cover;transform:scale(1.16);}
.bio-name{font-family:var(--serif);font-size:30px;font-weight:600;letter-spacing:-.01em;line-height:1.1;}
.bio-name sup{font-size:.4em;top:-.9em;}
.bio-tagline{margin-top:8px;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.84);}
.bio-branch{
  display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;
  font-size:13px;line-height:1.45;color:rgba(255,255,255,.9);text-align:center;
}
.bio-branch svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;color:var(--gold-l);}
.bio-branch strong{font-weight:700;}
.bio-handle{
  display:inline-block;margin-top:12px;font-size:13px;font-weight:600;color:var(--gold-l);
  border-bottom:1px solid rgba(237,224,160,.42);padding-bottom:1px;
}

/* ---------- Ana çağrı: randevu ---------- */
.bio-cta{
  display:flex;align-items:center;gap:14px;margin-top:22px;padding:15px 18px;border-radius:18px;
  background:linear-gradient(135deg,#F2E4A6 0%,var(--gold) 100%);color:var(--green-dd);
  box-shadow:0 12px 26px rgba(0,0,0,.2);transition:transform .2s ease,box-shadow .2s ease;
}
.bio-cta .bio-ic{width:26px;height:26px;flex:0 0 26px;stroke-width:1.6;}
.bio-cta-txt strong{display:block;font-size:17px;font-weight:700;line-height:1.25;}
.bio-cta-txt span{display:block;font-size:12.8px;opacity:.72;margin-top:2px;}

/* ---------- Hızlı iletişim üçlüsü ---------- */
.bio-quick{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px;}
.bio-q{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  padding:14px 6px;border-radius:16px;color:#fff;font-size:12.5px;font-weight:600;text-align:center;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);
  transition:background .2s ease,transform .2s ease;
}
.bio-q svg{width:22px;height:22px;}
.bio-q--tel svg{fill:none;stroke:currentColor;stroke-width:1.7;}
.bio-q:focus-visible{outline-color:#fff;}

/* ---------- Bağlantı listesi ---------- */
.bio-list{display:grid;gap:10px;margin-top:20px;}
.bio-item{
  display:flex;align-items:center;gap:14px;padding:13px 15px;border-radius:16px;
  background:#fff;border:1px solid var(--line);
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.bio-item-ic{
  width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:13px;
  background:var(--green-tint);color:var(--green);
}
.bio-ic{width:21px;height:21px;}
.bio-item-txt{flex:1 1 auto;min-width:0;}
.bio-item-txt strong{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.3;}
.bio-item-txt span{display:block;margin-top:2px;font-size:12.8px;line-height:1.45;color:var(--mute);}
.bio-chev{width:18px;height:18px;flex:0 0 18px;color:var(--mute);}

/* ---------- Alt blok ---------- */
.bio-foot{text-align:center;margin-top:28px;}
.bio-foot-title{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);}
.bio-social{display:flex;justify-content:center;gap:10px;margin-top:12px;}
.bio-social-btn{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:var(--green);box-shadow:0 6px 16px rgba(22,49,29,.18);
  transition:background .2s ease,transform .2s ease;
}
.bio-social-btn svg{width:20px;height:20px;}
.bio-note{margin:20px auto 0;max-width:44ch;font-size:12px;line-height:1.6;color:var(--mute);}
.bio-copy{margin-top:10px;font-size:11.5px;color:var(--mute);}

/* ---------- Yalnız işaretçili cihazlarda hover ---------- */
@media (hover:hover){
  .bio-lang:hover{background:rgba(255,255,255,.16);color:#fff;}
  .bio-lang.is-on:hover{background:var(--gold-l);color:var(--green-dd);}
  .bio-cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(0,0,0,.26);}
  .bio-q:hover{background:rgba(255,255,255,.2);transform:translateY(-2px);}
  .bio-item:hover{border-color:var(--green);transform:translateY(-2px);box-shadow:0 10px 24px rgba(22,49,29,.1);}
  .bio-social-btn:hover{background:var(--green-d);transform:translateY(-2px);}
}

/* Geniş ekran: sayfa yine tek sütun kalır (bio sayfası), yalnız biraz nefes alır. */
@media (min-width:600px){
  .bio-shell{padding-top:34px;padding-bottom:56px;}
  .bio-hero{padding:18px 24px 26px;}
  .bio-name{font-size:33px;}
}