@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   ECHO AJANS — DİJİTAL KARTVİZİT (/turgut, /bengihan …)

   Kendi başına duran sayfa: style.css'e bağlı değil, sitenin hiçbir
   kuralına dokunmaz. Bütün sınıflar kv- ile başlar.

   RENK — yalnızca beyaz + siyah + Echo mavisi.
   #364e9d birebir sitenin rengi: style.css > --blue ve açık zemin
   logosundaki halkalar (kaynak/marka/logo-mark-dark.svg). Ara tonlar
   yeni renk değil; aynı mavinin şeffaflığı ve koyulaştırılmışı.

   HİYERARŞİ — tek dolu düğme var (WhatsApp). Diğer her şey kutusuz ya
   da tek bir sade kart; gri kutu ve çizgi sayısı bilerek az.

   Telefonda her şey tek ekranda (390×664 Safari çubukları açıkken
   dahil); ölçüler ekran yüksekliğine (dvh) bağlı. 900px üstünde ortada
   iki sütunlu bir panele açılır.
   ══════════════════════════════════════════════════════════════════ */

.kv{
  --mavi:#364e9d;
  --mavi-koyu:color-mix(in srgb,#364e9d 84%,#000);
  --mavi-zemin:rgba(54,78,157,.06);
  --mavi-cizgi:rgba(54,78,157,.3);
  --dis:#eceef2;        /* masaüstünde panelin çevresi */
  --zemin:#fbfbfc;
  --kart:#fff;
  --metin:#111;
  --ikincil:#55585f;    /* beyazda 7:1 */
  --soluk:#6b6e76;      /* beyazda 5.2:1 */
  --cizgi:#ebecef;
  --yan:max(22px,env(safe-area-inset-left),env(safe-area-inset-right));
  --e:cubic-bezier(.22,1,.36,1);
}
.kv,.kv *,.kv *::before,.kv *::after{box-sizing:border-box;margin:0;padding:0}
.kv{
  min-height:100dvh;background:var(--zemin);color:var(--metin);
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;font-size:16px;line-height:1.5;
  -webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;
  overflow-x:clip;position:relative;
}
.kv a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.kv ul{list-style:none}
.kv img,.kv svg{display:block;max-width:100%}
.kv :focus-visible{outline:2px solid var(--mavi);outline-offset:3px;border-radius:10px}
.kv ::selection{background:var(--mavi);color:#fff}
.kv-gizli{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ── Echo halka dili — arka planda, çok hafif ──
   .kv önekli: genel ".kv svg{max-width:100%}" kuralı halkaları kırpmasın */
.kv .kv-halkalar{
  position:absolute;z-index:0;pointer-events:none;
  top:-70px;right:-300px;width:640px;max-width:none;
  fill:none;stroke:var(--mavi);stroke-width:1.2;
}
.kv-halkalar circle:nth-child(1){opacity:.07}
.kv-halkalar circle:nth-child(2){opacity:.047}
.kv-halkalar circle:nth-child(3){opacity:.028}
.kv-halkalar circle:nth-child(4){opacity:.014}

.kv-sayfa{
  position:relative;overflow:hidden;overflow:clip;   /* halkalar yatay kaydırma açmasın */
  max-width:calc(1100px + 2 * var(--yan));margin:0 auto;
  padding:0 var(--yan) env(safe-area-inset-bottom);
}
.kv-ust,.kv-ana,.kv-alt{position:relative;z-index:1}

/* ══ ÜST — logo ══ */
.kv-ust{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(env(safe-area-inset-top) + 18px) 0 6px;
}
.kv-logo{display:flex;align-items:center;gap:10px}
.kv .kv-logo__isaret{width:44px;height:auto;max-width:none;fill:none;stroke:var(--mavi);overflow:visible}
.kv-logo__isaret circle{stroke-width:11}
.kv-logo__isaret circle:nth-child(2){opacity:.6;stroke-width:9}
.kv-logo__isaret circle:nth-child(3){opacity:.35;stroke-width:7}
.kv-logo__isaret circle:nth-child(4){opacity:.18;stroke-width:5}
.kv-logo__yazi{display:grid;line-height:1.1}
.kv-logo__yazi b{font-size:16px;font-weight:700;letter-spacing:.2em}
.kv-logo__yazi small{
  margin-top:3px;font-family:'IBM Plex Mono',ui-monospace,Menlo,monospace;
  font-size:7px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--soluk);
}
.kv-ust__etiket{display:flex;align-items:center;gap:10px;font-size:12px;font-weight:500;color:var(--soluk)}
.kv-ust__etiket i{width:18px;height:1.5px;background:var(--mavi)}

/* ══ PROFİL ══ */
.kv-ana{padding-top:28px}
.kv-profil>*{animation:kv-gir .55s var(--e) both}
.kv-profil>:nth-child(2){animation-delay:.05s}
.kv-profil>:nth-child(3){animation-delay:.1s}
.kv-profil>:nth-child(4){animation-delay:.15s}
@keyframes kv-gir{from{opacity:0;transform:translateY(6px)}}

.kv-kim{display:flex;align-items:center;gap:16px}
.kv-gorsel{flex:0 0 auto;width:51px;height:51px}
.kv-gorsel>img,.kv-monogram{width:100%;height:100%;border-radius:15px}
.kv-gorsel>img{object-fit:cover}
.kv-monogram{
  display:grid;place-items:center;background:var(--mavi);color:#fff;
  font-size:18px;font-weight:600;letter-spacing:-.01em;
}
.kv-ad{font-size:clamp(23px,6.6vw,27px);font-weight:700;line-height:1.15;letter-spacing:-.03em}
.kv-unvan{margin-top:2px;font-size:15px;font-weight:500}
.kv-firma{margin-top:3px;font-size:14px;color:var(--ikincil)}
.kv-slogan{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ikincil);max-width:30ch}

/* ── Ana CTA — tek dolu düğme ── */
.kv .kv-cta{
  margin-top:24px;height:56px;border-radius:16px;
  display:flex;align-items:center;justify-content:center;gap:10px;
  background:var(--mavi);color:#fff;font-size:16px;font-weight:600;
  box-shadow:0 6px 18px -8px rgba(54,78,157,.55);
  transition:background-color .25s,transform .15s,box-shadow .25s;
}
.kv-cta svg{width:21px;height:21px}
.kv .kv-cta:hover{background:var(--mavi-koyu);box-shadow:0 8px 22px -8px rgba(54,78,157,.6)}
.kv .kv-cta:active{transform:scale(.985)}

/* ── İkincil — sakin, kutusuz: ikon üstte, yazı altta ── */
.kv-aks{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin-top:8px}
.kv-aks a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:64px;border-radius:14px;font-size:13px;font-weight:500;color:var(--ikincil);
  transition:background-color .2s,color .2s;
}
.kv-aks a+a{position:relative}
.kv-aks a+a::before{content:'';position:absolute;left:0;top:30%;bottom:30%;width:1px;background:var(--cizgi)}
.kv-aks svg{width:21px;height:21px;color:var(--mavi)}
.kv-aks a:hover{background:var(--mavi-zemin);color:var(--mavi)}

/* ══ İLETİŞİM — tek sade kart, ok yok, satır çizgisi yok ══ */
.kv-yan{display:grid;gap:14px;margin-top:22px;animation:kv-gir .55s var(--e) .2s both}
.kv-bilgi{background:var(--kart);border:1px solid var(--cizgi);border-radius:20px;padding:8px}
.kv-bilgi a{
  display:flex;align-items:center;gap:14px;
  min-height:44px;padding:8px 12px;border-radius:12px;
  font-size:14.5px;line-height:1.35;overflow-wrap:anywhere;
  transition:background-color .2s,color .2s;
}
.kv-bilgi svg{flex:0 0 auto;width:19px;height:19px;color:var(--mavi)}
.kv-bilgi a:hover{background:var(--mavi-zemin);color:var(--mavi)}

/* ── Sosyal — yalnızca ikon + yazı ── */
.kv-sosyal{display:flex;justify-content:center;gap:28px}
.kv-sosyal a{
  display:inline-flex;align-items:center;gap:7px;min-height:40px;
  font-size:14px;font-weight:500;color:#2e3036;transition:color .2s;
}
.kv-sosyal a>svg:first-child{width:18px;height:18px;color:var(--mavi)}
.kv-sosyal__ok{width:13px;height:13px;color:#a8abb2;transition:color .2s,transform .2s}
.kv-sosyal a:hover{color:var(--mavi)}
.kv-sosyal a:hover .kv-sosyal__ok{color:var(--mavi);transform:translate(1px,-1px)}

/* ── Paylaş — QR solda, yazı sağda ── */
.kv-paylas{
  display:flex;align-items:center;gap:16px;padding:10px 16px 10px 10px;
  border-radius:20px;background:var(--mavi-zemin);
  transition:background-color .25s;
}
.kv-paylas:hover{background:rgba(54,78,157,.1)}
.kv-qr{
  flex:0 0 auto;display:block;width:64px;padding:3px;border-radius:12px;background:#fff;
  box-shadow:0 0 0 1px rgba(54,78,157,.1);
}
.kv-qr__svg{width:100%;height:auto;border-radius:6px}
.kv-paylas__metin{display:grid;gap:1px;min-width:0}
.kv-paylas__metin strong{font-size:15px;font-weight:600}
.kv-paylas__metin span{font-size:12.5px;color:var(--soluk);overflow-wrap:anywhere}

/* ══ ALT BİLGİ — tek satır, nefesli ══ */
.kv-alt{
  padding:24px 0 calc(22px + env(safe-area-inset-bottom));
  text-align:center;font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--soluk);
}

/* ══ TELEFON — tek ekran ══
   Ölçüler ekran yüksekliğine bağlı: Safari çubukları açıkken (~660px)
   sıkışır, uzun ekranda nefes alır. */
@media (max-width:899px){
  .kv-sayfa{min-height:100dvh;display:flex;flex-direction:column}
  .kv-ust{padding-top:calc(env(safe-area-inset-top) + clamp(12px,2dvh,20px))}
  .kv-ana{display:flex;flex-direction:column;padding-top:clamp(18px,3.4dvh,34px)}
  .kv-slogan{margin-top:clamp(8px,1.6dvh,14px)}
  .kv .kv-cta{margin-top:clamp(16px,2.8dvh,26px);height:clamp(50px,6.6dvh,58px)}
  .kv-aks a{min-height:clamp(56px,7.6dvh,68px)}
  .kv-yan{margin-top:clamp(12px,2.4dvh,24px);gap:clamp(8px,1.6dvh,14px)}
  .kv-bilgi a{min-height:clamp(38px,5.2dvh,46px)}
  .kv-sosyal a{min-height:clamp(34px,4.6dvh,40px)}
  /* footer QR'ın hemen altında; kalan boşluk sayfanın sonunda kalır */
  .kv-alt{padding:clamp(14px,2.4dvh,22px) 0 calc(clamp(12px,2dvh,22px) + env(safe-area-inset-bottom))}
}
/* Kısa ekran (Safari çubukları açık, ~660px): slogan çıkar, satırlar sıkılaşır —
   temel iletişim yine kaydırmadan görünür. */
@media (max-width:899px) and (max-height:760px){
  .kv-slogan{display:none}
  .kv-ana{padding-top:clamp(12px,2.4dvh,24px)}
  .kv-aks a{min-height:54px;gap:4px}
  .kv-bilgi{padding:5px}
  .kv-bilgi a{min-height:36px;padding:6px 12px}
  .kv-alt{padding-top:10px}
}

/* ══ GENİŞ EKRAN — ortada panel, solda profil, sağda iletişim ══ */
@media (min-width:900px){
  .kv{background:var(--dis);padding:clamp(24px,5vh,56px) 24px}
  .kv .kv-halkalar{top:-160px;right:-300px;width:1000px}
  .kv-sayfa{
    background:var(--zemin);border:1px solid var(--cizgi);border-radius:28px;overflow:hidden;
    padding:0 clamp(40px,4.5vw,64px);box-shadow:0 1px 2px rgba(17,17,17,.03);
  }

  .kv-ust{padding:40px 0 0}
  .kv .kv-logo__isaret{width:58px}
  .kv-logo{gap:14px}
  .kv-logo__yazi b{font-size:20px}
  .kv-logo__yazi small{font-size:9px;margin-top:4px}
  .kv-ust__etiket{font-size:14px;gap:14px}
  .kv-ust__etiket i{width:32px}

  .kv-ana{
    display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(48px,6vw,88px);align-items:center;padding:56px 0 8px;
  }
  .kv-kim{gap:20px}
  .kv-gorsel{width:61px;height:61px}
  .kv-gorsel>img,.kv-monogram{border-radius:18px}
  .kv-monogram{font-size:21px}
  .kv-ad{font-size:clamp(36px,3.6vw,44px)}
  .kv-firma{font-size:16px;margin-top:4px}
  .kv-slogan{margin-top:20px;font-size:18px}
  .kv .kv-cta{margin-top:32px;height:60px;font-size:17px;max-width:420px}
  .kv-aks{max-width:420px;margin-top:10px}
  .kv-aks a{font-size:14px}

  .kv-yan{margin-top:0;gap:18px}
  .kv-bilgi{padding:12px}
  .kv-bilgi a{min-height:56px;padding:10px 16px;font-size:16px;gap:16px}
  .kv-bilgi svg{width:21px;height:21px}
  .kv-sosyal{justify-content:flex-start;padding-left:16px}
  .kv-paylas{padding:14px 22px 14px 14px;gap:20px}
  .kv-qr{width:96px}
  .kv-paylas__metin strong{font-size:16.5px}
  .kv-paylas__metin span{font-size:14px}
  .kv-alt{padding:28px 0 30px;font-size:13px}
}

@media (prefers-reduced-motion:reduce){
  .kv-profil>*,.kv-yan{animation:none}
  .kv *{transition-duration:.01s!important}
}