:root{
  --bg:#0f172a; --surface:#111827; --card:#0b1220; --muted:#9ca3af; --text:#e5e7eb;
  --brand:#22c55e; --brand-2:#14b8a6; --accent:#a78bfa; --danger:#ef4444;
  --shadow:0 10px 30px rgba(0,0,0,.25); --radius:16px; --container:1150px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:var(--text);
  background:linear-gradient(180deg,#0a1020,#0a1020 60%,#0c1326); line-height:1.6;}
img{max-width:100%;display:block;border-radius:12px}
a{color:var(--brand);text-decoration:none} a:hover{text-decoration:underline}
.container{max-width:var(--container);padding:0 20px;margin:0 auto}
.flex{display:flex;gap:16px}.center{align-items:center}.between{justify-content:space-between}
.grid2{display:grid;grid-template-columns:1.2fr 1fr;gap:28px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}

.topbar{position:sticky;top:0;z-index:50;background:rgba(10,16,32,.7);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.logo{height:36px;width:36px}
.nav .menu{display:flex;gap:18px;list-style:none;margin:0;padding:14px 0}
.nav .menu a{padding:8px 10px;border-radius:10px}
.nav .menu a:hover{background:rgba(255,255,255,.06);text-decoration:none}
.menu-toggle{display:none;background:none;border:1px solid rgba(255,255,255,.15);color:var(--text);padding:8px 10px;border-radius:10px}

.hero{padding:64px 0 32px;background:radial-gradient(1000px 600px at 15% -10%,rgba(167,139,250,.25),transparent)}
.hero h1{font-size:40px;line-height:1.2;margin:0 0 10px}
.hero .accent{color:var(--accent)}
.hero p{color:#d1d5db;max-width:56ch}
.cta-row{display:flex;gap:12px;margin:16px 0 8px}
.btn{display:inline-block;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.12);font-weight:600}
.btn-primary{background:linear-gradient(90deg,var(--brand),var(--brand-2));color:#07111e;border-color:transparent}
.btn-ghost{background:rgba(255,255,255,.06)} .btn-outline{background:transparent;border:1px solid rgba(255,255,255,.25)}
.trust-bullets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0;margin:10px 0 0;list-style:none;color:#cbd5e1}

.section{padding:64px 0} .section.alt{background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.section h2{font-size:28px;margin:0 0 8px} .section-lead{color:var(--muted);margin:0 0 22px}
.card{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:16px;box-shadow:var(--shadow)}
.card h3{margin:10px 0 6px}
.ticks{margin:10px 0 0;padding-left:18px} .ticks li{margin:4px 0}

.plan-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 18px}
.plan-actions{display:flex;gap:10px;flex-wrap:wrap}
.input{background:#0b1220;border:1px solid rgba(255,255,255,.12);color:var(--text);border-radius:12px;padding:10px 12px}

.footer{border-top:1px solid rgba(255,255,255,.08);padding:18px 0;background:rgba(0,0,0,.2)}
.footnav a{margin:0 8px;color:#cbd5e1}
.to-top{position:fixed;bottom:20px;right:20px;border:none;border-radius:999px;width:44px;height:44px;background:rgba(255,255,255,.12);color:var(--text);box-shadow:var(--shadow);display:none}
.to-top.show{display:block}

.hero-media{text-align:center;position:relative}
.hero-graphic-wrap{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:560px;margin-inline:auto;padding:14px;
  background:radial-gradient(700px 360px at 50% 30%,rgba(167,139,250,.18),transparent),linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.hero-graphic{width:100%;height:auto;object-fit:contain;object-position:center;border-radius:inherit;filter:brightness(1.03);animation:float 4s ease-in-out infinite}
.hero-badge{position:absolute;right:12px;bottom:12px;opacity:.95;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.hero-sub{margin:8px auto 0;color:#cbd5e1;max-width:52ch;font-size:.98rem;line-height:1.65}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.price{font-size:22px;font-weight:800;margin:8px 0 12px}
.badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:999px;padding:6px 10px;font-weight:600}

.micro{color:#94a3b8;font-size:12px}
.contact-list{list-style:none;padding:0;margin:0} .contact-list li{margin:8px 0}

/* Tablo */
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.03)}
.table{width:100%;border-collapse:separate;border-spacing:0}
.table th,.table td{padding:12px 14px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;white-space:nowrap}
.table thead th{position:sticky;top:0;background:rgba(10,16,32,.7);backdrop-filter:blur(8px)}
.table tr:last-child td{border-bottom:none}

/* Responsive */
@media (max-width:1024px){
  .grid2{grid-template-columns:1fr}
  .cards{grid-template-columns:1fr 1fr}
  .hero-copy{order:1} .hero-media{order:2}
}
@media (max-width:720px){
  .cards{grid-template-columns:1fr}
  .nav .menu{display:none;flex-direction:column;background:#0b1220;position:absolute;right:20px;top:56px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px}
  .menu-toggle{display:inline-block;margin-left:8px} .nav .menu.show{display:flex}
}
/* ==== Modern Form Card ==== */
.form-card{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  padding: 22px;
  box-shadow: 0 20px 40px rgba(0,0,0,.25);
  backdrop-filter: blur(8px) saturate(120%);
}
.form-head h2{margin:0 0 4px}
.form-head .micro{color:#a3b1c6}

.input-group{
  position:relative;
  margin:14px 0;
}
.input-group input,
.input-group select,
.input-group textarea{
  width:100%;
  background:#0b1220;
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  border-radius:12px;
  padding:14px 14px 14px 44px;
  outline:none;
  transition:border .2s, box-shadow .2s, background .2s;
}
.input-group textarea{ padding-left:44px; resize:vertical; min-height:110px }
.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(34,197,94,.15);
  background:#0c1424;
}
.input-group label{
  position:absolute; left:44px; top:50%;
  transform: translateY(-50%);
  color:#a6b0bf; pointer-events:none;
  transition: all .15s ease;
  background:transparent; padding:0 4px;
}
.input-group input::placeholder{opacity:0}
.input-group input:placeholder-shown + label,
.input-group textarea:placeholder-shown + label{ opacity:.9 }
.input-group input:not(:placeholder-shown) + label,
.input-group input:focus + label,
.input-group textarea:not(:placeholder-shown) + label,
.input-group textarea:focus + label{
  top:-8px; font-size:12px; color:#8ab4ff;
  background: #0b1220; border-radius:6px;
}

.ig-icon{
  position:absolute; left:12px; top:50%; transform:translateY(-50%);
  width:22px; height:22px; display:grid; place-items:center;
  color:#9fb3c8; opacity:.9;
}
.ig-icon svg{ width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8 }

.error{ display:block; min-height:18px; font-size:12px; color:var(--danger); margin:6px 0 0 4px }

.form-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:8px }
.btn-lg{ padding:14px 18px; border-radius:14px; font-weight:700 }
.btn-wa{
  background:rgba(37,211,102,.1);
  border:1px solid rgba(37,211,102,.25);
  color:#9ff3b8; display:inline-flex; align-items:center; gap:8px;
}
.btn-wa:hover{ background:rgba(37,211,102,.18) }
.btn-wa svg{ width:20px; height:20px; fill:currentColor }

.contact-card{
  background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  padding:22px;
}
.contact-list.modern{ list-style:none; padding:0; margin:10px 0 0 }
.contact-list.modern li{ display:flex; align-items:center; gap:10px; margin:10px 0 }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:999px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
}
.tip{ margin-top:6px }

/* Hover/focus güzelleştirme */
.input-group:hover input,
.input-group:hover select,
.input-group:hover textarea{
  border-color: rgba(255,255,255,.18);
}

/* Mobil düzen */
@media (max-width: 1024px){
  .form-card, .contact-card{ margin-bottom:14px }
}
/* Select'e ok ve yükseklik düzeltmesi */
.input-group select{
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  background:#0b1220 url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="%23a6b0bf"><path d="M7 10l5 5 5-5"/></svg>') no-repeat right 12px center / 16px;
  line-height:1.4; min-height:48px;
  padding-right:40px; /* ok için boşluk */
}

/* Label'in select için yükselme kuralları */
.input-group.has-value label,
.input-group select:focus + label{
  top:-8px; font-size:12px; color:#8ab4ff;
  background:#0b1220; border-radius:6px; padding:0 4px;
}

/* İlk açılışta (placeholder seçiliyken) label ortada kalsın */
.input-group:not(.has-value) label{ top:50%; transform:translateY(-50%); }
/* Sosyal linkler */
.socials{list-style:none; padding:0; margin:10px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px}
.socials li a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
  color:var(--text); font-weight:600;
}
.socials li a:hover{background:rgba(255,255,255,.08); text-decoration:none}
.socials svg{width:20px; height:20px; fill:none; stroke:var(--brand); stroke-width:1.6}
.socials a[aria-label="Instagram"] svg{stroke:var(--accent)}
@media (max-width:720px){ .socials{grid-template-columns:1fr} }

/* Yorumlar (varsa mevcudu tamamlar) */
.review blockquote{margin:0 0 8px; color:#e5e7eb}
.review .stars{color:#fbbf24; letter-spacing:2px}
/* Referans kart gridi */
#referanslar .reviews{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}

/* Kart kutusu + hafif hareket */
#referanslar .review{
  position:relative;
  background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px 16px 16px;
  box-shadow: var(--shadow);
  overflow:hidden;

  /* giriş animasyonu için başlangıç */
  opacity:0;
  transform: translateY(14px) scale(.98);
  transition:
    transform .28s ease,
    opacity .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

/* Hover’da çok hafif kaldır + vurgu */
#referanslar .review:hover{
  transform: translateY(-6px) scale(1);
  box-shadow: 0 14px 36px rgba(0,0,0,.35);
  border-color: rgba(167,139,250,.25);
}

/* Üstte ince vurgu şeridi (tema renkleriyle) */
#referanslar .review::before{
  content:"";
  position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--brand), var(--accent));
  opacity:.35;
}

/* İç tipografi */
#referanslar .review blockquote{ margin:0 0 10px; color:#e5e7eb }
#referanslar .review figcaption{ color:var(--muted) }
#referanslar .review .stars{ color:#fbbf24; letter-spacing:2px }

/* Gözükünce aktif hâli */
#referanslar .review.in-view{
  opacity:1;
  transform: translateY(0) scale(1);
}

/* Responsive */
@media (max-width:1024px){ #referanslar .reviews{ grid-template-columns:repeat(2,minmax(0,1fr)) } }
@media (max-width:720px){  #referanslar .reviews{ grid-template-columns:1fr } }

/* Hareket hassas kullanıcılar için animasyon kapatma */
@media (prefers-reduced-motion: reduce){
  #referanslar .review,
  #referanslar .review:hover{
    transition:none; transform:none;
  }
}
/* Kart içi OS seçim alanı */
.os-wrap{margin-top:10px;display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.os-wrap label{font-size:.95rem;color:#cbd5e1}
.os-select{
  appearance:auto;
  display:block;
  background:#0b1220;
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:10px;
  padding:10px 12px;
  min-width:240px;
  outline:none
}
.os-select:focus{border-color:var(--brand)}

/* Form input-group: select için floating label düzeltmesi */
.input-group{position:relative;margin:12px 0}
.input-group select,
.input-group input,
.input-group textarea{
  width:100%;
  background:#0b1220;
  color:var(--text);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  padding:14px 12px 12px 42px; /* ikon için boşluk */
}
.input-group label{
  position:absolute;left:42px;top:10px;
  font-size:.95rem;color:#94a3b8;pointer-events:none;
  transition:all .18s ease;
  background:transparent;
}
/* Odak/Değer varsa label küçülüp yukarı çıksın */
.input-group:has(select:focus) label,
.input-group:has(select:not([value=""]):not(:placeholder-shown)) label,
.input-group.has-value label,
.input-group input:focus + label,
.input-group input:not(:placeholder-shown) + label,
.input-group textarea:focus + label,
.input-group textarea:not(:placeholder-shown) + label{
  top:-8px; left:38px; font-size:.78rem; color:var(--brand);
  background:linear-gradient(180deg,#0a1020,#0a1020);
  padding:0 6px; border-radius:6px;
}

/* input-group içindeki ikon */
.ig-icon{
  position:absolute;left:12px;top:12px;width:20px;height:20px;display:grid;place-items:center;opacity:.9
}
.ig-icon svg{width:18px;height:18px;stroke:#a7f3d0;fill:none;stroke-width:1.6}

/* Sosyal linkler */
.socials{list-style:none;padding:0;margin:6px 0;display:grid;gap:10px}
.socials li a{
  display:flex;gap:10px;align-items:center;
  padding:10px 12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
  border-radius:12px;text-decoration:none;color:var(--text)
}
.socials li a:hover{background:rgba(255,255,255,.06)}
.socials svg{width:18px;height:18px;stroke:#a7f3d0;fill:none;stroke-width:1.6}

/* Referans kutuları: modern kart + yumuşak animasyon */
.reviews{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.review{
  position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;padding:16px;
  transform:translateY(6px) scale(.99);
  opacity:.0;
  transition:transform .35s ease, opacity .35s ease, box-shadow .35s ease, border-color .35s ease;
  box-shadow: var(--shadow);
}
.review.in-view{transform:none;opacity:1}
.review:hover{
  transform:translateY(-2px) scale(1);
  border-color:rgba(34,197,94,.25);
  box-shadow:0 10px 30px rgba(20,184,166,.15);
}
.review blockquote{margin:0 0 8px;color:#e5e7eb}
.review .stars{color:#fbbf24;letter-spacing:2px}
@media (max-width:1024px){ .reviews{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:720px){ .reviews{grid-template-columns:1fr} }