:root{
  --section-y: 110px;
  --section-y-m: 80px;

  --panel-pad: 28px;
  --panel-pad-m: 18px;

  --panel-gap: 28px;
  --panel-gap-m: 18px;

  --h2-size: 34px;
  --h2-size-m: 28px;

  --p-lh: 1.7;
}

/* Typography */
p{ line-height: var(--p-lh); text-rendering: optimizeLegibility; }
h2{ font-size: var(--h2-size); line-height: 1.3; margin-bottom: 18px; letter-spacing: -0.01em; }
@media (max-width:768px){
  h2{ font-size: var(--h2-size-m); }
}

/* Global section rhythm (safe default) */
section{ padding-top: var(--section-y); padding-bottom: var(--section-y); }
@media (max-width:768px){
  section{ padding-top: var(--section-y-m); padding-bottom: var(--section-y-m); }
}

/* Cards (light premium) */
.card{
  border: 1px solid rgba(15,23,42,0.10);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 24px rgba(11,18,32,0.05);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.card:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 32px rgba(11,18,32,0.06);
}
@media (max-width:768px){
  .card:hover{ transform:none; box-shadow: 0 10px 24px rgba(11,18,32,0.05); }
}

/* Buttons: calm */
.btn{
  border-radius: 14px;
  padding: 12px 18px;
  font-weight: 600;
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}
.btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0,0,0,0.10); }
@media (max-width:768px){
  .btn:hover{ transform:none; box-shadow:none; }
}

/* Index: calm surface separation */
body[data-page="index"] #yaklasimimiz > .container,
body[data-page="index"] #kimlerle-calisiyoruz > .container,
body[data-page="index"] #operasyon-nasil-kurulur > .container{
  border-radius: 22px;
  padding: 32px;
}

body[data-page="index"] #kimlerle-calisiyoruz > .container{
  border: 1px solid var(--surface-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.72) 0%, rgba(255,255,255,0.92) 100%);
  box-shadow: 0 10px 28px rgba(15,23,42,0.04);
}

body[data-page="index"] #yaklasimimiz > .container,
body[data-page="index"] #operasyon-nasil-kurulur > .container{
  background: transparent;
  border: none;
  box-shadow: none;
}

body[data-page="index"] #yaklasimimiz,
body[data-page="index"] #kimlerle-calisiyoruz,
body[data-page="index"] #operasyon-nasil-kurulur{
  padding-top: 36px;
  padding-bottom: 36px;
}

@media (max-width:768px){
  body[data-page="index"] #yaklasimimiz > .container,
  body[data-page="index"] #kimlerle-calisiyoruz > .container,
  body[data-page="index"] #operasyon-nasil-kurulur > .container{
    padding: 20px;
    border-radius: 16px;
  }

  body[data-page="index"] #yaklasimimiz,
  body[data-page="index"] #kimlerle-calisiyoruz,
  body[data-page="index"] #operasyon-nasil-kurulur{
    padding-top: 20px;
    padding-bottom: 20px;
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .card, .btn{ transition:none !important; }
  .card:hover, .btn:hover{ transform:none !important; box-shadow:none !important; }
}