﻿/* ===========================
   Landing Tiles (Login/Signup)
   Scope: only under .giris-yap
   No :root vars
   =========================== */

/* Base reset (scoped) */
.giris-yap, .giris-yap * , .giris-yap *::before, .giris-yap *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;

}

/* Page background & center */
.giris-yap {
  position: relative;
  min-height: calc(100vh - 0px);
  display: grid;
  place-items: center;
  padding: 24px;
              min-height: 80vh;
      background: url(../img/background-one.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  color: #e6e9ef;
  overflow: hidden;
}

/* Decorative background */
.giris-yap .fx-bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.giris-yap .fx-grid{
  position:absolute;inset:0;opacity:.18;
  background-image:
    linear-gradient(transparent 23px, rgba(120,130,255,.06) 24px),
    linear-gradient(90deg, transparent 23px, rgba(120,130,255,.06) 24px);
  background-size:24px 24px,24px 24px;
  mask-image:radial-gradient(ellipse 60% 40% at 50% 30%, rgba(0,0,0,.9), transparent 70%);
}
.giris-yap .fx-glow{position:absolute;width:60vmax;height:60vmax;filter:blur(64px);opacity:.18}
.giris-yap .fx-glow-1{top:-20%;left:-20%;background:radial-gradient(circle at 35% 35%, #4cc9f0, transparent 60%)}
.giris-yap .fx-glow-2{right:-25%;bottom:-25%;background:radial-gradient(circle at 65% 65%, #7b5cff, transparent 60%)}

/* Card wrapper */
.giris-yap .ornek{
  position:relative;z-index:1;
  width:100%;max-width:760px;
  padding:28px 22px 22px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(16,20,36,.65), rgba(10,12,24,.85));
  border:1px solid rgba(185,198,255,.22);
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.03);
  backdrop-filter:blur(10px);
}

/* Header */
.giris-yap .head{text-align:center;margin-bottom:14px}
.giris-yap .title{margin:0;font-size:28px;font-weight:800;letter-spacing:.3px;color:#f2f5ff}
.giris-yap .subtitle{margin:6px 0 0;color:#aeb6cc;font-size:14px}

/* Cards layout */
.giris-yap .cards{
  display:grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap:16px;
  margin-top:8px;
}

/* Shared tile styles */
.giris-yap .overlap,
.giris-yap .overlap-group{
  position:relative;
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap:12px;
  padding:18px 16px;
  border-radius:16px;
  border:1px solid rgba(185,198,255,.28);
  background:linear-gradient(180deg, rgba(26,30,48,.78), rgba(16,20,36,.78));
  box-shadow:0 10px 26px rgba(40,60,130,.25), inset 0 0 0 1px rgba(255,255,255,.03);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  outline:none;
}

.giris-yap .overlap:hover,
.giris-yap .overlap-group:hover{
  transform:translateY(-2px);
  border-color:rgba(220,230,255,.6);
  background:linear-gradient(180deg, rgba(34,38,64,.86), rgba(18,22,42,.86));
  box-shadow:0 16px 32px rgba(70,90,180,.32), inset 0 0 0 1px rgba(255,255,255,.05);
}

/* Focus sichtbar (keyboard) */
.giris-yap .overlap:focus-visible,
.giris-yap .overlap-group:focus-visible{
  outline:2px solid rgba(140,160,255,.75);
  outline-offset:2px;
}

/* Texts */
.giris-yap .text-wrapper,
.giris-yap .div{
  font-size:16px;
  font-weight:700;
  letter-spacing:.35px;
  color:#e9ecff;
}

/* Icons */
.giris-yap .user,
.giris-yap .user-plus{
  width:28px;height:28px;opacity:.95;
  filter: drop-shadow(0 0 8px rgba(120,130,255,.35));
}

/* Small shimmer line on hover */
.giris-yap .overlap::after,
.giris-yap .overlap-group::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(120deg, rgba(255,255,255,.07), rgba(255,255,255,0) 30%, rgba(255,255,255,.09) 70%, rgba(255,255,255,0));
  opacity:.0;transition:opacity .2s ease;
}
.giris-yap .overlap:hover::after,
.giris-yap .overlap-group:hover::after{opacity:1}

/* Responsive */
@media (max-width:640px){
  .giris-yap .cards{grid-template-columns:1fr}
  .giris-yap .title{font-size:24px}
}

/* Prefer reduced motion */
@media (prefers-reduced-motion:reduce){
  .giris-yap *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}
