/* reset */
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }

/* sayfa arka planı */
.screen{
  min-height: 100vh;
  padding: 28px 16px;
  display: grid;
  place-items: center;
  background: #f3efe9;  /* krem */
}

/* ortalanmış kart */
.card{
  width: min(430px, 100%);
  background: rgba(255,255,255,0.78);
  border-radius: 26px;
  padding: 26px 18px 18px;
  box-shadow: 0 12px 30px rgba(0,0,0,0.12);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden; /* taşmayı bitirir */
}

/* logo + başlık */
.brand{ text-align: center; }
.logo{
  display: block;
  max-width: 190px;
  width: 60%;
  margin: 6px auto 18px;
  height: auto;
}
.tagline{
  margin: 0;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 1px;
}
.divider{
  width: 72%;
  height: 2px;
  background: rgba(0,0,0,0.18);
  margin: 14px auto 22px;
}

/* butonlar */
.menu-buttons{
  display: grid;
  gap: 14px;
  padding: 6px 0 18px;
}
.btn{
  display: block;
  text-decoration: none;
  text-align: center;
  color: #fff;
  background: rgba(150, 55, 55, 0.70);
  padding: 16px 14px;
  border-radius: 10px;
  font-size: 22px;
  letter-spacing: 1px;
}
.btn:active{ transform: scale(0.99); }

/* alt ikonlar */
.footer{
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.icon-btn{
  text-decoration: none;
  font-size: 26px;
  padding: 12px 16px;
}

.brand img {
  width: 200px;        /* burayı büyüt/küçült */
  max-width: 70%;      /* mobil taşmayı engeller */
  height: auto;
  display: block;
  margin: 0 auto 12px; /* ortalar */
}

.logo{
  width: 220px !important;   /* büyütmek için: 240 / 260 yapabilirsin */
  max-width: 80% !important; /* mobilde taşmayı engeller */
  height: auto !important;
  display: block !important;
  margin: 0 auto 14px !important; /* ortala */
}