/* styles.css */

/* Sayfa tamamında pastel gradient arka plan */
body, html {
  height: 100%;
  margin: 0;
}
.page-wrapper {
  min-height: 100%;
  background: linear-gradient(135deg, #e2d0be 0%, #e1eaf3 100%);
  /* padding: 2rem 0; */
}

/* Ekran genişliği 600px ve altındaki cihazlar için */
@media (max-width: 600px) {
  .profile-card {
    max-width: 100%; /* Mobil cihazlarda kısıtlamayı kaldırır */
    width: 100%;     /* Mobil cihazlarda tam genişlikte olmasını sağlar */
    margin: 0;       /* Ortalamayı kaldırır, kenarlara sıfırlar */
    border-radius: 0; /* İsteğe bağlı: Mobil cihazlarda kart köşelerini keskinleştirir */
  }
}

/* Kart genel görünümü büyük cihazlar için */
.profile-card {
  max-width: 400px;
  margin: 0 auto;
  border: none;
  border-radius: 1rem;
  overflow: hidden;
}
.profile-card .card-img-top {
  height: 300px;
  object-fit: cover;
}
.profile-card .card-body {
  background-color: rgba(255,255,255,0.9);
  padding: 2rem 1.5rem;
}

/* Aksiyon butonları */
.action-buttons .action-btn {
  width: 60px;
  height: 60px;
  background-color: #fff;
  border-radius: .75rem;
  box-shadow: 0 3px 8px rgba(0,0,0,0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform .2s;
}
.action-buttons .action-btn:hover {
  transform: translateY(-5px);
}

.action-btn {
  color:dimgray;
}

/* Kopyalama listesi */
.copy-list .list-group-item {
  background-color: #ffffff;
  border: none;
  border-radius: .5rem;
  margin-bottom: .5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
}
.copy-icon {
  cursor: pointer;
}

/* Düzenle butonu */
.btn-primary {
  --bs-btn-bg: #e2d0be !important;
  --bs-btn-border-color: #e2d0be !important;
  --bs-btn-hover-bg: #d4b49b !important;
  --bs-btn-hover-border-color: #d4b49b !important;
   font-weight: bold !important;
  color: #000 !important;
}


/* Modelden resim gelmediyse */
.header-image {
opacity: 0.7;
position: relative;
z-index: 1;
object-fit: cover;
object-position: bottom;
}

/* Modelden resim geldiyse */
.header-image2 {
opacity: 0.7;
position: relative;
z-index: 1;
object-fit: cover;
object-position: top;
}

/* Modelden resim gelmediyse */
.initial-circle {
position: absolute;
top: 60px; /* resmin yüksekliğine göre ayarlanabilir */
left: 50%;
transform: translate(-50%, -50%);
width: 90px;
height: 90px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
font-size: 40px;
font-weight: bold;
color: #333;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
box-shadow: 0 10px 10px rgba(0,0,0,0.15);
}

 /* Modelden resim geldiyse */
.initial-circle2 {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background-color: rgba(255,255,255,0.95);

  /* köşeleri hafif yuvarla */
  border-radius: 10px !important; 
  border-style: groove;
  border-color: #d4b49b;
  border-width: 7px;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: bold;
  color: #333;
  z-index: 2;

  /* yumuşak gölge */
  box-shadow: 0 50px 12px rgba(0,0,0,0.25);
}

.card-body{
  /* background: linear-gradient(to top, #ff7e5f, #feb47b); */
  /* background: linear-gradient(90deg, #a7a7a7, #dcdcdc, #8f8f8f); */
  background: linear-gradient(135deg, #d7d7d7, #f2f2f2, #c0c0c0);
}