/*
 * Geliştirici: Enes - www.ixirpos.com.tr
 * ixirdepo tanıtım — responsive tipografi ve düzen
 */
:root {
  /* Velzon / webdepo login — auth-bg-cover renkleri */
  --auth-primary: #405189;
  --auth-success: #0ab39c;
  --bg-1: #07101f;
  --bg-2: #0d1933;
  --panel: rgba(255,255,255,0.07);
  --line: rgba(255,255,255,0.12);
  --text: #f4f7fb;
  --muted: #c6d1df;
  --accent: #67d6ff;
  --accent-2: #8e7dff;
  --shadow: 0 18px 48px rgba(0,0,0,0.28);
  --page-pad: clamp(1rem, 4vw, 2.25rem);
  --card-radius: clamp(10px, 2vw, 18px);
  --gap-sm: clamp(0.5rem, 2vw, 0.85rem);
  --gap-md: clamp(0.75rem, 2.5vw, 1.25rem);
}

*{box-sizing:border-box}
html{
  font-size:100%;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
  overflow-x:clip;
  /* Taşan / 100vh farkı kısımlarda beyaz şerit kalmasın */
  min-height:100%;
  min-height:100dvh;
  background:linear-gradient(45deg, var(--auth-primary) 50%, var(--auth-success) 50%);
}
html,body{margin:0;padding:0}
body{
  font-family: Arial, Helvetica, sans-serif;
  color:var(--text);
  font-size: clamp(1.0625rem, 2.2vw, 1.1875rem);
  line-height:1.55;
  background:linear-gradient(45deg, var(--auth-primary) 50%, var(--auth-success) 50%);
  min-height:100%;
  min-height:100vh;
  min-height:100dvh;
  min-height:-webkit-fill-available;
  display:flex;
  flex-direction:column;
  overflow-x:hidden;
  overflow-x:clip;
}

/* webdepo login.php — .auth-page-wrapper.auth-bg-cover + > .bg-overlay */
.auth-bg-shell{
  position:relative;
  flex:1 0 auto;
  display:flex;
  flex-direction:column;
  width:100%;
  min-height:100%;
  min-height:100vh;
  min-height:100dvh;
  min-height:-webkit-fill-available;
  background:linear-gradient(45deg, var(--auth-primary) 50%, var(--auth-success) 50%);
}
.auth-bg-shell__overlay{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  min-height:100%;
  z-index:0;
  pointer-events:none;
  opacity:1;
  background-color:transparent;
  background-image:
    radial-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
    linear-gradient(135deg, rgba(0,0,0,.12) 0%, transparent 42%, rgba(0,0,0,.08) 100%);
  background-size:24px 24px, 100% 100%;
  background-position:0 0, center;
  background-repeat:repeat, no-repeat;
}

.page{
  flex:1 0 auto;
  width:100%;
  max-width:1200px;
  box-sizing:border-box;
  min-height:0;
  margin:0 auto;
  padding:var(--page-pad);
  padding-bottom:clamp(1.5rem, 5vw, 2.5rem);
  position:relative;
  z-index:1;
  overflow-x:hidden;
  overflow-x:clip;
  isolation:isolate;
}
.page::before,
.page::after{
  content:"";
  position:absolute;
  border-radius:50%;
  filter:blur(20px);
  opacity:.5;
  pointer-events:none;
}
.page::before{
  width:min(380px, 55%);
  height:min(180px, 32vmin);
  left:-6%;
  bottom:-4%;
  max-width:100%;
  background:radial-gradient(circle, rgba(103,214,255,.12), transparent 60%);
}
.page::after{
  width:min(340px, 50%);
  height:min(200px, 34vmin);
  right:-5%;
  top:-4%;
  max-width:100%;
  background:radial-gradient(circle, rgba(142,125,255,.16), transparent 60%);
}
.content{
  position:relative;
  z-index:1;
  width:100%;
  min-width:0;
}
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  border:1px solid var(--line);
  border-radius:var(--card-radius);
  box-shadow:var(--shadow);
}

.header{
  display:grid;
  grid-template-columns:1.45fr .75fr;
  gap:var(--gap-md);
  align-items:stretch;
  min-width:0;
}
.hero{
  padding:clamp(1rem, 3vw, 1.75rem) clamp(1rem, 3.5vw, 2rem);
  min-width:0;
}
.logo{
  width:100%;
  max-width:clamp(180px, 42vw, 280px);
  height:auto;
  display:block;
  margin-bottom:var(--gap-md);
}
.kicker{
  color:var(--accent);
  font-size: clamp(0.8125rem, 1.8vw, 1rem);
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:var(--gap-sm);
}
h1{
  margin:0 0 var(--gap-sm);
  font-size: clamp(1.75rem, 4.5vw + 0.5rem, 2.875rem);
  line-height:1.12;
  letter-spacing:-.03em;
}
.hero p{
  margin:0;
  color:var(--muted);
  font-size: clamp(1.0625rem, 2.1vw, 1.25rem);
  line-height:1.6;
}
.quick-points{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--gap-sm);
  margin-top:var(--gap-md);
}
.quick-points div{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
  border-radius:clamp(8px, 1.5vw, 14px);
  padding:clamp(0.65rem, 2vw, 1rem);
  font-size: clamp(0.9375rem, 1.8vw, 1.0625rem);
  color:#f6f8fc;
  min-height:3.25rem;
  display:flex;
  align-items:center;
}
.side{display:grid;grid-template-rows:auto auto;gap:var(--gap-md);min-width:0}
.mini{padding:clamp(1rem, 2.5vw, 1.35rem)}
.mini h3{
  margin:0 0 var(--gap-sm);
  font-size: clamp(1.125rem, 2.4vw, 1.5rem);
}
.mini p{
  margin:0;
  color:var(--muted);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height:1.6;
}
.metrics{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--gap-sm);
  margin-top:var(--gap-md);
}
.metric{
  text-align:center;
  padding:clamp(0.65rem, 2vw, 1rem) clamp(0.5rem, 1.5vw, 0.85rem);
  border-radius:clamp(8px, 1.5vw, 14px);
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.08);
}
.metric strong{
  display:block;
  font-size: clamp(1.35rem, 3.5vw, 1.85rem);
  line-height:1;
  margin-bottom:0.35rem;
}
.metric span{
  display:block;
  color:var(--muted);
  font-size: clamp(0.875rem, 1.7vw, 1rem);
  line-height:1.35;
}

.section-head{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  align-items:flex-end;
  gap:var(--gap-md);
  margin:clamp(1rem, 3vw, 1.5rem) 0 var(--gap-sm);
}
.section-head h2{
  margin:0;
  font-size: clamp(1.25rem, 2.8vw, 1.75rem);
  line-height:1.2;
}
.section-head p{
  margin:0;
  color:var(--muted);
  font-size: clamp(1rem, 2vw, 1.125rem);
}

.features{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:var(--gap-sm);
  min-width:0;
}
.feature{
  padding:clamp(0.85rem, 2.2vw, 1.15rem);
  min-height:0;
}
.badge{
  width:clamp(2rem, 5vw, 2.5rem);
  height:clamp(2rem, 5vw, 2.5rem);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  background:linear-gradient(135deg, rgba(103,214,255,.22), rgba(142,125,255,.26));
  border:1px solid rgba(255,255,255,.12);
  font-size: clamp(0.75rem, 1.5vw, 0.875rem);
  font-weight:700;
  margin-bottom:var(--gap-sm);
}
.feature h3{
  margin:0 0 var(--gap-sm);
  font-size: clamp(1rem, 2vw, 1.2rem);
  line-height:1.3;
}
.feature p{
  margin:0;
  color:var(--muted);
  font-size: clamp(0.9375rem, 1.85vw, 1.0625rem);
  line-height:1.55;
}

.bottom{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:var(--gap-sm);
  margin-top:var(--gap-md);
}
.benefits{padding:clamp(1rem, 2.5vw, 1.35rem)}
.cta{padding:clamp(1rem, 2.8vw, 1.5rem);display:flex;flex-direction:column;justify-content:center}
.benefits h3,.cta h3{
  margin:0 0 var(--gap-sm);
  font-size: clamp(1.125rem, 2.5vw, 1.45rem);
}
.benefits ul{margin:0;padding-left:1.35rem}
.benefits li{
  color:var(--muted);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height:1.6;
  margin:0.4rem 0;
}
.cta p{
  margin:0 0 var(--gap-md);
  color:var(--muted);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height:1.6;
}
.pill{
  display:inline-block;
  width:fit-content;
  max-width:100%;
  padding:clamp(0.5rem, 1.8vw, 0.75rem) clamp(0.85rem, 2.5vw, 1.15rem);
  border-radius:999px;
  background:linear-gradient(135deg, rgba(103,214,255,.18), rgba(142,125,255,.22));
  border:1px solid rgba(255,255,255,.12);
  font-size: clamp(0.9375rem, 1.9vw, 1.0625rem);
  font-weight:700;
  line-height:1.35;
  color:var(--text);
  text-decoration:none;
  text-align:center;
  cursor:pointer;
  transition:filter .2s ease, transform .15s ease;
}
.pill:hover{
  filter:brightness(1.08);
}
.pill:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

.footer{
  position:absolute;
  left:0;
  right:0;
  bottom:1.8mm;
  text-align:center;
  color:rgba(255,255,255,.64);
  font-size: clamp(0.6875rem, 1.4vw, 0.8125rem);
  letter-spacing:.14em;
  text-transform:uppercase;
}

/* Tablet */
@media (max-width: 992px){
  .header{
    grid-template-columns:1fr;
  }
  .features{
    grid-template-columns:repeat(2,1fr);
  }
  .quick-points{
    grid-template-columns:repeat(2,1fr);
  }
}

/* Mobil */
@media (max-width: 600px){
  .features{
    grid-template-columns:1fr;
  }
  .quick-points{
    grid-template-columns:1fr;
  }
  .bottom{
    grid-template-columns:1fr;
  }
  .section-head{
    flex-direction:column;
    align-items:flex-start;
  }
  .metrics{
    grid-template-columns:1fr;
  }
}

/* Çok dar ekran */
@media (max-width: 380px){
  html{font-size:93.75%;}
}

@page{size:A4 landscape;margin:0}
@media print{
  body{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
    display:block;
    min-height:0;
  }
  html{min-height:0}
  .auth-bg-shell{
    display:block;
    flex:none;
    min-height:auto;
    -webkit-print-color-adjust:exact;
    print-color-adjust:exact;
  }
  .page{
    flex:none;
    max-width:297mm;
    min-height:210mm;
    padding:9mm 10mm 7mm;
  }
  .header{grid-template-columns:1.45fr .75fr}
  .features{grid-template-columns:repeat(5,1fr)}
  .quick-points{grid-template-columns:repeat(4,1fr)}
  .bottom{grid-template-columns:1.15fr .85fr}
  .metrics{grid-template-columns:repeat(3,1fr)}
}