/* index.css — SADECE ana sayfa (app.css çakışmasın diye her şey index- prefix) */

/* app.css header/footer'ını ana sayfada gizle */
body.home-index .site-header,
body.home-index .site-footer{ display:none !important; }

:root{
  --i-bg0:#06070a;
  --i-bg1:#0b0f12;
  --i-card:rgba(14,19,23,.78);
  --i-stroke:rgba(255,255,255,.10);
  --i-ink:#eaf2ee;
  --i-muted:rgba(234,242,238,.72);
  --i-shadow: 0 34px 90px rgba(0,0,0,.70);
  --i-radius: 28px;

  /* ✅ LOGO AYARI (sadece burayı değiştirmen yeter) */
  --logo-scale: 1.60;          /* desktop */
  --logo-scale-mobile: 1.40;   /* telefon */
}

/* app.css body resetini override et */
body.home-index{
  margin:0 !important;
  min-height:100vh;
  color: var(--i-ink) !important;
  background:
    radial-gradient(1200px 600px at 35% 25%, rgba(39,169,87,.22), transparent 55%),
    radial-gradient(1000px 520px at 70% 65%, rgba(255,184,0,.10), transparent 58%),
    linear-gradient(180deg, var(--i-bg0), var(--i-bg1)) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji" !important;
  overflow-x:hidden;
}

.index-page{ min-height:100vh; }

.index-hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:
    max(36px, env(safe-area-inset-top))
    max(16px, env(safe-area-inset-right))
    max(36px, env(safe-area-inset-bottom))
    max(16px, env(safe-area-inset-left));
  overflow:hidden;
}

.index-bg{
  position:absolute; inset:-2px;
  background:
    radial-gradient(900px 420px at 50% 20%, rgba(27,255,132,.14), transparent 60%),
    radial-gradient(650px 360px at 48% 38%, rgba(255,214,102,.12), transparent 62%),
    radial-gradient(700px 500px at 80% 70%, rgba(130,170,255,.10), transparent 60%);
  pointer-events:none;
}

.index-hero::before{
  content:"";
  position:fixed; inset:0;
  background:
    radial-gradient(1200px 700px at 50% 20%, rgba(40,255,160,.10), transparent 60%),
    radial-gradient(900px 600px at 50% 65%, rgba(255,200,70,.08), transparent 62%),
    radial-gradient(1200px 900px at 50% 50%, transparent 35%, rgba(0,0,0,.55) 78%, rgba(0,0,0,.85) 100%);
  pointer-events:none;
  z-index:-2;
}

.index-hero::after{
  content:"";
  position:fixed; inset:0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.10;
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index:-1;
}

.index-wrap{
  width:min(980px, 100%);
  margin:0 auto;
}

.index-card{
  position:relative;
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--i-stroke);
  border-radius: var(--i-radius);
  box-shadow: var(--i-shadow);
  backdrop-filter: blur(12px);
  padding: clamp(22px, 3.2vw, 44px);
}

.index-card::before{
  content:"";
  position:absolute; inset:-2px;
  border-radius: calc(var(--i-radius) + 2px);
  background: radial-gradient(700px 220px at 50% 0%, rgba(48,255,150,.22), transparent 60%);
  filter: blur(18px);
  opacity:.75;
  z-index:-1;
}

/* ✅ LOGO: width sabit kalsın, scale ile büyüt */
.index-logo{
  display:flex;
  justify-content:center;
  margin-bottom: 18px;
}

.index-logo-img{
  width: 360px;                 /* layout genişliği (değişmesin) */
  max-width: 92%;
  height:auto;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.65));
  transform: scale(var(--logo-scale));
  transform-origin: center;
}

/* Başlık */
.index-title{
  margin: 8px 0 22px;
  text-align:center;
  font-weight: 900;
  letter-spacing: .2px;
  font-size: clamp(20px, 2.6vw, 40px);
}

/* Kartlar */
.index-actions{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items:stretch;
}

.index-btn{
  display:flex;
  align-items:center;
  gap: 14px;
  padding: 16px 16px;
  border-radius: 16px;
  color: var(--i-ink);
  text-decoration:none;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 34px rgba(0,0,0,.45);
  transform: translateY(0);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease;
  min-height: 82px;
}

.index-btn:hover{
  transform: translateY(-2px);
  border-color: rgba(255,255,255,.18);
  filter: brightness(1.03);
}

.index-btn:active{ transform: translateY(0); }

.index-ico{
  width: 46px; height: 46px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.20);
  font-size: 20px;
  flex: 0 0 auto;
}

.index-txt{ display:flex; flex-direction:column; line-height:1.1; min-width:0; }
.index-big{ font-weight: 900; font-size: 18px; }
.index-small{
  margin-top: 6px;
  color: var(--i-muted);
  font-size: 12.5px;
  line-height:1.25;
}

/* Renkler */
.index-btn-ukd{
  background: linear-gradient(180deg, rgba(64,220,110,.32), rgba(16,72,40,.34));
}
.index-btn-elo{
  background: linear-gradient(180deg, rgba(255,205,64,.30), rgba(96,72,0,.32));
}
.index-btn-cr{
  background: linear-gradient(180deg, rgba(255,110,110,.26), rgba(78,20,20,.32));
}

.index-footer{
  margin-top: 18px;
  text-align:center;
  color: rgba(234,242,238,.42);
  font-weight: 650;
  letter-spacing: .35px;
  font-size: 14px;
  opacity: .85;
}

/* TABLET: 2 kolon */
@media (max-width: 900px){
  .index-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* PHONE: alt alta + logo mobile scale */
@media (max-width: 560px){
  .index-card{ border-radius: 22px; }
  .index-actions{ grid-template-columns: 1fr; gap: 12px; }
  .index-btn{ padding: 14px 14px; border-radius: 16px; }
  .index-ico{ width: 44px; height: 44px; }
  .index-big{ font-size: 17px; }
  .index-small{ font-size: 12px; }

  .index-logo-img{
    width: 320px; /* layout */
    transform: scale(var(--logo-scale-mobile));
  }
}

.index-footer .download-banner {
  display: none;
}

.index-footer .site-text {
  display: inline;
}

@media (min-width: 992px) {
  .index-footer .download-banner {
    display: block;
    margin: 16px auto 0;
    max-width: 470px;
    width: 100%;
    height: auto;
  }

  .index-footer .site-text {
    display: none;
  }
}