:root{
  --bg:#f4f4f4;
  --card:#ffffff;
  --text:#1d1f23;
  --muted:#7a7f87;
  --ring:rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background: var(--bg);
  overflow-x:hidden;
}

/* BACKGROUND IMAGE AREA */
.bg-wrap{
  position:fixed; inset:0; overflow:hidden; pointer-events:none;
}
.bg-img{
  position:absolute; inset:-10%;
  background:
    url("background.webp") center/cover no-repeat; /* <- ARKA PLAN GÖRSELİ */
  filter: saturate(95%) contrast(102%) brightness(102%);
  opacity:1;
  transform: scale(1.05);
}

/* LAYOUT */
.page{
  position:relative;
  min-height:100vh;
  display:grid;
  grid-template-rows:1fr auto;
}
.center{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(32px, 6vh, 56px) 16px;
}
.stack{
  display:flex;
  flex-direction:column;
  gap:clamp(18px, 4vh, 28px);
}

/* CARD */
.card{
  width:clamp(300px, 54vw, 460px);
  min-height:clamp(340px, 60vh, 520px);
  background:var(--card);
  border-radius:12px;
  box-shadow:
    0 24px 52px rgba(15,23,42,.18),
    0 1px 0 var(--ring);
  padding:clamp(24px, 4vh, 40px) clamp(20px, 5vw, 36px) clamp(24px, 4vh, 40px);
  display:flex;
  flex-direction:column;
}
.avatar{
  width:clamp(120px, 22vw, 210px);
  height:clamp(120px, 22vw, 210px);
  border-radius:999px; margin:0 auto clamp(16px, 4vh, 32px);
  background: #e9eef3 center/cover no-repeat;
  background-image:url("christina.webp"); /* <- KİŞİ GÖRSELİ */
  box-shadow: 0 6px 20px rgba(0,0,0,.12) inset;
}
h1{
  font-size:clamp(26px, 4vw, 30px); line-height:1.2; margin:8px 0 0; text-align:center; font-weight:300;
}
.title{
  font-size:clamp(16px, 2.6vw, 18px); color:var(--muted); text-align:center; margin-bottom:clamp(18px, 4vh, 26px); font-weight:200;
}

/* BUTTONS */
.btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(8px, 2vw, 14px);
  padding:clamp(18px, 3vh, 28px) clamp(14px, 4vw, 20px);
  border-radius:12px;
  background:#f7f7f8;
  color:inherit;
  text-decoration:none;
  font-weight:300;
  font-size:clamp(16px, 2.4vw, 19.5px);
  border:1px solid #eceef0;
  box-shadow:0 18px 36px rgba(17,24,39,.18);
  transition:transform .08s ease, background .2s ease, border-color .2s ease;
}
.btn + .btn{ margin-top:10px }
.btn:hover{ background:#ffffff; border-color:#e3e6ea; transform:translateY(-1px) }
.row{
  display:grid;
  grid-template-columns:1fr clamp(72px, 12vw, 92px);
  gap:10px;
  margin-top:10px;
}
.icon{
  width:clamp(16px, 2.8vw, 22px); height:clamp(16px, 2.8vw, 22px); display:block; flex:0 0 auto;
}
.icon-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #eceef0;
  background:#f7f7f8;
  border-radius:12px;
  width:clamp(72px, 12vw, 92px);
  box-shadow:0 18px 36px rgba(17,24,39,.18);
  transition:.15s ease;
  cursor:pointer;
}
.icon-btn .icon{
  width:clamp(28px, 4.5vw, 40px);
  height:clamp(28px, 4.5vw, 40px);
}
.icon-btn:hover{ transform:translateY(-1px) }

/* QR BLOCK */
.qr-wrap{
  margin:0 auto 0;
  width:clamp(300px, 54vw, 460px);
  background:#ffffff;
  border:1px solid #eceef0;
  border-radius:12px;
  padding:10px;
  box-shadow:
    0 22px 48px rgba(15,23,42,.18),
    0 1px 0 rgba(255,255,255,.9);
}
.qr{
  width:clamp(68px, 12vw, 96px);
  height:clamp(68px, 12vw, 96px);
  margin:0 auto; background:#f0f2f5 center/contain no-repeat;
  background-image:url("qr-logo.png"); /* <- QR GÖRSELİ */
  border-radius:10px;
}

/* FOOTER */
.footer{
  text-align:center; color:#9aa0a6; font-size:clamp(12px, 2.2vw, 14px); padding:clamp(18px, 4vh, 28px) 12px clamp(22px, 5vh, 32px);
  background:#f6f6f6;
}
.footer img{
  height:clamp(20px, 3vw, 26px); vertical-align:middle; margin-left:6px;
  content-visibility:auto;
}

/* RESPONSIVE TWEAKS */
@media (max-width:680px){
  .card{
    width:86vw;
    min-height:auto;
    padding:clamp(22px, 6vw, 34px) clamp(18px, 6vw, 30px) clamp(16px, 4vw, 24px);
  }
  .qr-wrap{
    width:86vw;
    padding:clamp(16px, 5vw, 22px);
  }
}

@media (max-width:480px){
  .center{
    padding:24px 14px 20px;
  }
  .stack{
    gap:18px;
  }
  .card{
    width:100%;
    min-height:auto;
    padding:0;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .avatar{
    margin-bottom:16px;
  }
  h1{
    font-size:clamp(24px, 8vw, 28px);
  }
  .title{
    font-size:clamp(16px, 4.5vw, 18px);
    margin-bottom:20px;
  }
  .btn{
    padding:16px 16px;
    font-size:16px;
  }
  .qr-wrap{
    width:100%;
    margin:0;
    padding:12px 0 0;
    background:transparent;
    border:none;
    box-shadow:none;
  }
  .qr{
    width:clamp(86px, 38vw, 130px);
    height:clamp(86px, 38vw, 130px);
  }
}