/* ============ AsoTools — Balanced Midnight Theme (v4) ============ */
:root{
  --bg:#101523; --bg-soft:#181e32; --card:#1c2338;
  --text:#ecf0f7; --muted:#b5bfd6; --line:rgba(255,255,255,.10);
  --brand:#6ed3ff; --brand-2:#8b6cff; --accent:#22d3ee;
  --radius:16px; --shadow:0 8px 28px rgba(0,0,0,.35);
  --shadow-hover:0 12px 32px rgba(0,0,0,.45);
}

*{box-sizing:border-box}
html,body{
  margin:0; padding:0;
  background:
    radial-gradient(900px 500px at 10% -10%, rgba(139,108,255,.18), transparent 60%),
    radial-gradient(900px 500px at 90% 10%, rgba(110,230,255,.16), transparent 55%),
    var(--bg);
  color:var(--text);
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

/* Layout helpers */
.container{max-width:1200px; margin:0 auto; padding:0 20px}
.section{padding:56px 0}
.muted{color:var(--muted)}
.icon{width:22px; height:22px}

/* Header */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(24,30,50,.8);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 0}
.brand{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.2px}
.logo{
  width:36px; height:36px; border-radius:10px;
  background:conic-gradient(from 210deg, var(--brand), var(--brand-2));
  display:grid; place-items:center;
  box-shadow:0 4px 16px rgba(110,230,255,.35);
}
.navlinks{display:flex; gap:18px; align-items:center}
.navlinks a{opacity:.92; padding:6px 8px; border-radius:10px; transition:opacity .15s, background .15s}
.navlinks a:hover{opacity:1; background:rgba(139,108,255,.12)}

/* Buttons */
.btn{
  padding:10px 16px; border-radius:12px; border:none; cursor:pointer;
  background:linear-gradient(92deg, var(--brand), var(--brand-2));
  color:#071022; font-weight:700;
  box-shadow:0 6px 18px rgba(110,231,255,.25);
  transition: transform .18s ease, box-shadow .18s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:0 8px 20px rgba(110,231,255,.35)}
.btn.secondary{
  background:transparent; color:var(--text);
  border:1px solid var(--line); box-shadow:none;
}

/* Google button tweak */
.google-btn{
  display:flex; align-items:center; gap:8px;
}

/* Hero */
.hero{padding:84px 0 48px}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:36px; align-items:center}
.title{font-size:44px; line-height:1.1; font-weight:800; margin:0 0 14px; color:#fff}
.subtitle{font-size:18px; color:var(--muted); max-width:640px}
.cta{display:flex; gap:12px; margin-top:22px; flex-wrap:wrap}

/* Preview (hero image container) */
.preview{
  border-radius:18px; background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line); padding:18px; box-shadow:var(--shadow)
}
.preview-inner{
  aspect-ratio:16/10; border-radius:12px; border:1px dashed var(--line);
  display:grid; place-items:center; background:linear-gradient(180deg, #10192f, #0f172a);
}
.preview-copy{text-align:center; padding:18px}
.preview-title{font-weight:800; font-size:20px; margin:0 0 6px}

/* Stat card */
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line); border-radius:var(--radius);
  padding:16px; box-shadow:var(--shadow); margin-top:16px;
}
.stat{display:flex; align-items:center; gap:10px; font-weight:600}
.stat small{color:var(--muted); font-weight:500}

/* Sections / cards */
.section-head{display:flex; align-items:end; justify-content:space-between; gap:16px; flex-wrap:wrap}
.grid{display:grid; gap:16px}
.grid.cols-3{grid-template-columns:repeat(3, 1fr)}
.grid.cols-4{grid-template-columns:repeat(4, 1fr)}

.card{
  border-radius:var(--radius); padding:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border:1px solid var(--line); box-shadow:var(--shadow);
  display:flex; flex-direction:column; gap:10px;
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-hover)}
.card h3{margin:0 0 6px; font-size:18px; color:#fff}

.chip{
  display:inline-flex; align-items:center; gap:8px;
  padding:6px 10px; border-radius:999px;
  background:rgba(110,231,255,.12); border:1px solid rgba(110,231,255,.35);
  font-weight:600
}

/* Pricing */
.pricing{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.price-card{padding:22px}
.price{font-size:36px; font-weight:800}
.per{font-size:16px; opacity:.85; margin-left:4px}
.li-relaxed{line-height:1.9}
.price-card.highlighted{border-color:rgba(139,92,246,.45)}

/* Footer */
.footer{border-top:1px solid var(--line); padding:28px 0; margin-top:24px; background:rgba(20,25,40,.8)}
.footer-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap}
.footer-links{display:flex; gap:14px; align-items:center}

/* Responsive */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr}
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}
  .pricing{grid-template-columns:1fr}
}
@media (max-width:640px){
  .grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .title{font-size:34px}
}
/* --- TYPO & GLOBAL --- */
html, body {
  line-height: 1.55;              /* daha ferah satır aralığı */
}

/* Başlık taşma/yanlış kırılma engeli + daha duyarlı boyut */
.title{
  font-size: clamp(28px, 5vw, 46px);
  line-height: 1.15;
  word-break: normal;
  overflow-wrap: anywhere;
  hyphens: auto;
  margin-bottom: 12px;
}

/* Alt başlık genişliği ve boşluk */
.subtitle{
  max-width: 60ch;
  margin-top: 6px;
}

/* --- HERO LAYOUT --- */
.hero{ padding: 88px 0 56px; }

/* Kolonları rahatlat: solda sabit-min genişlik, sağda esnek */
.hero-grid{
  align-items: start;                          /* üst hizalama */
  gap: 40px;                                   /* sütun arası nefes */
  grid-template-columns: minmax(320px, 560px) 1fr;
}

/* CTA & alt istatistik kartı aralıkları */
.cta{ margin-top: 18px; gap: 12px; }
.hero-card{ margin-top: 16px; }

/* Preview kutusu daha kompakt; taşma yok */
.preview{
  padding: 16px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.35);
}
.preview-inner{
  aspect-ratio: 16/10;
  width: 100%;
  border-radius: 12px;
}

/* Küçük ekranlar: bloklan, üst üste gelmesin */
@media (max-width: 980px){
  .hero-grid{ grid-template-columns: 1fr; gap: 24px; }
  .preview{ order: 2; }
}
@media (max-width: 640px){
  .title{ font-size: clamp(24px, 7vw, 34px); }
}

/* Brand text style */
.brand-text {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.brand-text .aso {
  color: #e4e8f0; /* açık gri-beyaz */
}

.brand-text .tools {
  background: linear-gradient(90deg, #5cf0d6 0%, #7de4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}