/* =========================================================
   Bilgim — Light Corporate Landing
   Sakarya IT · Tedarik · Siber Güvenlik
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@500;600;700;800&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* ----- Backgrounds ----- */
  --bg:           #FAFAF7;   /* warm off-white */
  --bg-2:         #F2F3F5;   /* slightly cooler */
  --surface:      #FFFFFF;   /* card */
  --surface-2:    #F6F7FA;   /* alt card */

  /* ----- Text ----- */
  --ink:          #131A2C;
  --ink-2:        #364056;
  --muted:        #5E6A82;
  --muted-2:      #8B95AB;
  --faint:        #B6BCCC;

  /* ----- Lines ----- */
  --line:         #E5E7EE;
  --line-strong:  #D4D8E2;

  /* ----- Primary (Bilgim navy from logo) ----- */
  --navy:         #1A2747;
  --navy-deep:    #0F1830;
  --navy-soft:    #E8EBF3;

  /* ----- Brand accents ----- */
  --c-bilgim:        #1A2747;     /* steel-navy */
  --c-bilgim-soft:   #E8EBF3;
  --c-adaplanet:     #B8862E;     /* warm bronze, not loud gold */
  --c-adaplanet-soft:#F6EFE0;
  --c-datakor:       #1E6FE0;     /* electric blue */
  --c-datakor-soft:  #E4EEFC;

  /* ----- Semantic ----- */
  --success:      #1A7F4F;
  --success-soft: #E2F2EA;
  --warning:      #C46A2C;
  --danger:       #B83A30;

  /* ----- Type ----- */
  --display: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sans:    'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:    ui-monospace, 'SF Mono', Menlo, monospace;

  /* ----- Radii ----- */
  --r-xs:  8px;
  --r-sm:  12px;
  --r-md:  16px;
  --r-lg:  24px;
  --r-pill: 999px;

  /* ----- Shadow ----- */
  --shadow-1: 0 1px 2px rgba(20,30,60,0.06);
  --shadow-2: 0 8px 24px rgba(20,30,60,0.08);
  --shadow-3: 0 24px 56px rgba(20,30,60,0.14);
  --ring:     0 0 0 4px var(--navy-soft);

  /* ----- Motion ----- */
  --ease:     cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; }
button { font-family: inherit; }

/* ----- Layout ----- */
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}
.section {
  padding: 100px 0;
}

/* ----- Typography utilities ----- */
.eyebrow {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-adaplanet);
}
.h-display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(40px, 5.5vw, 72px);
  line-height: 1.02;
  letter-spacing: -0.025em;
  color: var(--ink);
  text-wrap: balance;
  margin: 0;
}
.h-section {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
  text-wrap: balance;
}
.h-card {
  font-family: var(--display);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.body-lg {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(17px, 1.2vw, 19px);
  line-height: 1.65;
  color: var(--ink-2);
}
.body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-2);
}

/* ----- Buttons ----- */
.btn {
  font-family: var(--sans); font-weight: 700; font-size: 15px;
  padding: 14px 22px; border-radius: var(--r-pill);
  cursor: pointer; border: 1.5px solid transparent;
  display: inline-flex; align-items: center; gap: 10px;
  transition: all 200ms var(--ease); text-decoration: none;
}
.btn-primary {
  background: var(--navy); color: #fff;
  box-shadow: var(--shadow-2);
}
.btn-primary:hover {
  background: var(--navy-deep);
  transform: translateY(-1px);
  box-shadow: 0 12px 32px rgba(20,30,60,0.18);
}
.btn-secondary {
  background: var(--surface); color: var(--ink);
  border-color: var(--line-strong);
}
.btn-secondary:hover {
  border-color: var(--ink); background: var(--surface);
}
.btn-phone {
  background: var(--c-adaplanet-soft);
  color: var(--c-adaplanet);
  border-color: rgba(184,134,46,0.3);
}
.btn-phone:hover {
  background: var(--c-adaplanet); color: #fff;
}

/* ----- Cards ----- */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: all 240ms var(--ease);
}
.card:hover {
  box-shadow: var(--shadow-2);
}

/* ----- Reveal-on-scroll ----- */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 700ms var(--ease), transform 700ms var(--ease);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ----- Modal ----- */
@keyframes m-overlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes m-panel {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(15, 24, 48, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: m-overlay 220ms var(--ease);
}
.modal-panel {
  animation: m-panel 280ms var(--ease);
}

/* ----- Hairline ----- */
.hr {
  height: 1px;
  background: var(--line);
  border: 0;
}

/* ----- Mobile responsive ----- */
@media (max-width: 900px) {
  body { font-size: 17px; }
  .section { padding: 64px 0; }
  .wrap { padding: 0 20px; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .section { padding: 56px 0; }
  .wrap { padding: 0 16px; }
  .btn { padding: 13px 20px; font-size: 14.5px; }
}