/* ==========================================================================
   CC+ Bilişim — stil dosyası
   --------------------------------------------------------------------------
   1.  Değişkenler
   2.  Sıfırlama ve taban
   3.  Yerleşim (wrap, section, grid)
   4.  Tipografi
   5.  Bileşenler (buton, etiket, chip, liste, form)
   6.  Üst bar ve navigasyon
   7.  Bölümler (hero, tile, hizmet, süreç, SSS)
   8.  Alt bölge (CTA + footer)
   9.  Yasal sayfa düzeni
   10. Yardımcılar, hareket, yazdırma
   ========================================================================== */

/* 1. Değişkenler ---------------------------------------------------------- */

:root {
  --paper:        #FBFAF8;
  --paper-2:      #F3F0EA;
  --ink:          #14171A;
  --ink-2:        #383F45;
  --muted:        #5F666C;
  --line:         #E3DFD7;
  --line-2:       #CFC9BD;

  --brand:        #0E4F47;
  --brand-600:    #12665C;
  --brand-700:    #0B3D37;
  --brand-900:    #072B27;
  --brand-tint:   #E4EDEA;
  --accent:       #C4622D;
  --accent-tint:  #FBEDE3;

  /* Hizmet renkleri — her hizmetin kendi tonu var */
  --c1:   #2563EB;  --c1-tint: #E9F0FE;   /* web ve yazılım   */
  --c2:   #7C3AED;  --c2-tint: #F1EAFE;   /* mobil            */
  --c3:   #C2670A;  --c3-tint: #FDF1DD;   /* e-ticaret        */
  --c4:   #0E7490;  --c4-tint: #E2F4F9;   /* bulut ve sunucu  */
  --c5:   #BE123C;  --c5-tint: #FDE7EB;   /* siber güvenlik   */
  --c6:   #047857;  --c6-tint: #E2F5EE;   /* teknik destek    */

  --sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap:      1200px;
  --gutter:    clamp(20px, 5vw, 48px);
  --sec-pad:   clamp(56px, 8vw, 104px);
  --radius:    4px;
  --header-h:  70px;

  --fs-display: clamp(2.35rem, 1.5rem + 3.4vw, 3.95rem);
  --fs-h1:      clamp(2rem, 1.45rem + 2.4vw, 3.25rem);
  --fs-h2:      clamp(1.55rem, 1.28rem + 1.25vw, 2.3rem);
  --fs-h3:      clamp(1.15rem, 1.08rem + 0.3vw, 1.35rem);
  --fs-lead:    clamp(1.06rem, 1rem + 0.42vw, 1.28rem);
  --fs-body:    1.0625rem;
  --fs-sm:      0.9375rem;
  --fs-label:   0.6875rem;

  /* Yumuşak bant rengi ve dalga şekilleri */
  --band: rgba(14, 79, 71, .05);
  --wave-up:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 52C200 16 430 8 700 28C970 48 1200 76 1440 46L1440 80L0 80Z' fill='%230E4F47' fill-opacity='.05'/%3E%3C/svg%3E");
  --wave-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 28C200 64 430 72 700 52C970 32 1200 4 1440 34L1440 0L0 0Z' fill='%230E4F47' fill-opacity='.05'/%3E%3C/svg%3E");
  --wave-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0 58C220 18 450 6 720 30C990 54 1220 84 1440 48L1440 90L0 90Z' fill='%230B3D37'/%3E%3C/svg%3E");
}

/* 2. Sıfırlama ve taban --------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;
  scroll-behavior: smooth;
  /* Dokunmatikte tarayıcının mavi vurgu kutusu yerine markanın kendi tonu */
  -webkit-tap-highlight-color: rgba(14, 79, 71, .12);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  position: relative;
  font-family: var(--sans);
  font-size: var(--fs-body);
  line-height: 1.65;
  /* Uzun Türkçe kelimeler ve e-posta adresleri dar ekranda taşmasın */
  overflow-wrap: break-word;
  font-feature-settings: "kern" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body[data-nav="open"] { overflow: hidden; }

/* Tüm sayfaya yayılan yumuşak renk yıkaması.
   Ekrana sabitlendiği için bölümler arasında sert renk geçişi oluşmaz. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(48% 40% at 84% 4%,  rgba(8, 145, 178, .15) 0%, transparent 62%),
    radial-gradient(42% 36% at 4% 22%,  rgba(14, 79, 71, .11)  0%, transparent 62%),
    radial-gradient(46% 38% at 98% 58%, rgba(196, 98, 45, .11) 0%, transparent 62%),
    radial-gradient(40% 34% at 0% 84%,  rgba(124, 58, 237, .08) 0%, transparent 62%),
    radial-gradient(52% 40% at 62% 100%, rgba(8, 145, 178, .09) 0%, transparent 62%);
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

img, svg { max-width: 100%; display: block; }

ul, ol { margin: 0; padding: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0;
}

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--brand); color: var(--paper); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: #fff;
  padding: 12px 18px;
  font-size: var(--fs-sm);
}
.skip:focus { left: 12px; top: 12px; }

/* 3. Yerleşim ------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-pad); }
.section--tight { padding-block: clamp(40px, 5vw, 64px); }

/* Bölümler arası sert çizgi yok; ayrımı boşluk ve dalgalar sağlıyor. */
.section--line { border-top: 0; }

/* Yumuşak renk bandı — üstü ve altı dalgalı biter */
.section--sand {
  position: relative;
  background: var(--band);
}
.section--sand::before,
.section--sand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Dalga yüksekliği komşu bölümün en küçük iç boşluğundan (40px) daima
     kısadır; böylece hiçbir ekran genişliğinde içerikle çakışmaz. */
  height: clamp(30px, 3.6vw, 52px);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.section--sand::before { bottom: 100%; background-image: var(--wave-up); }
.section--sand::after  { top: 100%;    background-image: var(--wave-down); }

/* Bandın hemen ardından koyu alan geliyorsa alt dalgayı koyu alan çizer */
main > .section--sand:last-child::after { content: none; }

/* Koyu alanın dalgası için sayfanın son bölümüne ek alt boşluk */
main > :last-child { padding-bottom: clamp(100px, 11vw, 176px); }

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: clamp(16px, 3vw, 56px);
  align-items: end;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.sec-head__title { max-width: 30ch; }
.sec-head--flush { margin-bottom: 0; align-items: center; }
.sec-head__note {
  color: var(--muted);
  font-size: var(--fs-sm);
  max-width: 52ch;
  justify-self: end;
}
@media (max-width: 820px) {
  .sec-head { grid-template-columns: 1fr; align-items: start; }
  .sec-head__note { justify-self: start; }
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(28px, 5vw, 72px);
}
@media (max-width: 880px) { .split { grid-template-columns: 1fr; } }

/* İnce çizgi ızgara: gap 1px + zemin rengi = tam 1 piksel ayraç */
.tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tiles--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tile {
  background: var(--paper);
  padding: clamp(22px, 2.6vw, 34px);
}
@media (max-width: 940px) {
  .tiles, .tiles--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .tiles, .tiles--4 { grid-template-columns: 1fr; }
}

/* 4. Tipografi ------------------------------------------------------------ */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand);
  margin: 0 0 20px;
}
.eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--line-2);
}
.eyebrow--plain::before { display: none; }
.eyebrow--light { color: rgba(255, 255, 255, 0.62); }
.eyebrow--light::before { background: rgba(255, 255, 255, 0.28); }

.display { font-size: var(--fs-display); letter-spacing: -0.032em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); letter-spacing: -0.012em; }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.58;
  color: var(--ink-2);
  max-width: 60ch;
}

.prose { max-width: 68ch; color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }

.muted { color: var(--muted); }
.small { font-size: var(--fs-sm); }
.mono { font-family: var(--mono); }

.num {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--line-2);
}

/* 5. Bileşenler ----------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--fs-sm);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.btn svg { flex: none; transition: transform .2s ease; }
.btn:hover svg { transform: translateX(3px); }

.btn--primary { background: var(--brand); border-color: var(--brand); }
.btn--primary:hover { background: var(--brand-700); border-color: var(--brand-700); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }

.btn--light { background: var(--paper); border-color: var(--paper); color: var(--brand-900); }
.btn--light:hover { background: #fff; border-color: #fff; }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--outline-light:hover { border-color: rgba(255,255,255,.85); }

.btn--sm { padding: 9px 16px; font-size: 0.875rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 32px;
}

.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 1px;
  transition: border-color .18s ease;
}
.arrow-link:hover { border-bottom-color: currentColor; }
.arrow-link svg { transition: transform .2s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  list-style: none;
}
.chip {
  font-family: var(--mono);
  font-size: 0.75rem;
  line-height: 1;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  color: var(--muted);
  background: var(--paper);
  white-space: nowrap;
}

.check-list {
  list-style: none;
  display: grid;
  gap: 11px;
}
.check-list li {
  position: relative;
  padding-left: 24px;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.36em;
  width: 6px;
  height: 11px;
  border-right: 1.6px solid var(--brand);
  border-bottom: 1.6px solid var(--brand);
  transform: rotate(42deg);
}
.check-list--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
@media (max-width: 700px) { .check-list--2 { grid-template-columns: 1fr; } }

.stat__value {
  margin: 0;
  font-size: clamp(2rem, 1.5rem + 1.7vw, 2.85rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--brand);
}
.stat__label {
  margin: 14px 0 0;
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* Form */

.form { display: grid; gap: 18px; }
.field { display: grid; gap: 7px; }
.field label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.field .req { color: var(--accent); }

.field input,
.field select,
.field textarea {
  width: 100%;
  font: inherit;
  font-size: var(--fs-sm);
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 12px 14px;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.field textarea { min-height: 150px; resize: vertical; }
/* Yerleşik ok gizlenince alan düz bir metin kutusuna benziyordu;
   kendi okumuzu çiziyoruz ki açılır liste olduğu anlaşılsın. */
.field select {
  appearance: none;
  cursor: pointer;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M3.5 5.5L7 9l3.5-3.5' stroke='%235F666C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 620px) { .field-row { grid-template-columns: 1fr; } }

.consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--muted);
  line-height: 1.5;
}
.consent input { width: 16px; height: 16px; margin-top: 3px; flex: none; accent-color: var(--brand); }
.consent a { color: var(--brand); }

.form-note {
  font-size: 0.875rem;
  color: var(--muted);
  border-left: 2px solid var(--line-2);
  padding-left: 14px;
}
.form-status {
  font-size: var(--fs-sm);
  padding: 12px 14px;
  border: 1px solid var(--brand);
  background: var(--brand-tint);
  color: var(--brand-700);
  border-radius: var(--radius);
}
.form-status[hidden] { display: none; }

/* 6. Üst bar -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251, 250, 248, 0.9);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 1.0625rem;
  flex: none;
}
.brand__mark { width: 30px; height: 30px; border-radius: 7px; }
.brand__plus { color: var(--accent); }
.brand__sub { color: var(--muted); font-weight: 400; }

.nav { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.nav a {
  position: relative;
  text-decoration: none;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  padding-block: 6px;
  transition: color .16s ease;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 100%;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.nav a:hover { color: var(--ink); }
.nav a:hover::after { transform: scaleX(1); }
.nav a[aria-current="page"] { color: var(--brand); font-weight: 500; }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

/* Menü içindeki eylem butonu yalnızca mobilde görünür */
.nav .btn { display: none; }

.site-header__actions { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  width: 42px;
  height: 38px;
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  position: relative;
  transition: background .16s ease;
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 17px;
  height: 1.5px;
  background: var(--ink);
  transition: transform .2s ease;
}
.nav-toggle span::before { top: -5.5px; }
.nav-toggle span::after  { top: 5.5px; }
body[data-nav="open"] .nav-toggle span { background: transparent; }
body[data-nav="open"] .nav-toggle span::before { transform: translateY(5.5px) rotate(45deg); }
body[data-nav="open"] .nav-toggle span::after  { transform: translateY(-5.5px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: inline-flex; }
  .site-header__actions .btn { display: none; }
  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 28px;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  body[data-nav="open"] .nav { opacity: 1; visibility: visible; transform: none; }
  .nav a {
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    font-size: 1.05rem;
  }
  .nav a::after { display: none; }
  .nav .btn {
    display: inline-flex;
    justify-content: center;
    margin-top: 24px;
    padding: 14px 22px;
    font-size: var(--fs-sm);
    color: var(--paper);
    border: 1px solid var(--brand);
  }
}

/* 7. Bölümler ------------------------------------------------------------- */

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(44px, 6vw, 84px) clamp(48px, 6.5vw, 88px);
  background:
    radial-gradient(120% 90% at 88% 8%, rgba(8, 145, 178, .16) 0%, transparent 58%),
    radial-gradient(90% 80% at 4% 92%, rgba(196, 98, 45, .13) 0%, transparent 55%),
    linear-gradient(172deg, rgba(233, 242, 239, .95) 0%, rgba(251, 250, 248, .5) 55%, rgba(251, 250, 248, 0) 100%);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(90deg, rgba(14, 79, 71, .07) 0 1px, transparent 1px 100%);
  background-size: calc(100% / 6) 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 96%);
}
.hero > .wrap { position: relative; }

.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; } }

.hero__title { max-width: 15ch; }
.hero__lead { margin-top: 24px; }
.hero__art { width: 100%; height: auto; }
@media (max-width: 940px) { .hero__art { max-width: 520px; margin-inline: auto; } }

/* Hero altındaki güven şeridi */
.hero__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: clamp(36px, 4vw, 56px);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.hero__fact {
  background: rgba(255, 255, 255, .84);
  padding: 18px 20px;
  display: flex;
  gap: 14px;
  align-items: center;
}
.hero__fact dt {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__fact dd { margin: 4px 0 0; font-weight: 600; font-size: 1.02rem; letter-spacing: -.015em; }
@media (max-width: 860px) { .hero__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .hero__facts { grid-template-columns: 1fr; } }

/* Renkli ikon kutusu */
.ibox {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: var(--brand-tint);
  color: var(--brand);
}
.ibox svg { width: 21px; height: 21px; }
.ibox--1 { background: var(--c1-tint); color: var(--c1); }
.ibox--2 { background: var(--c2-tint); color: var(--c2); }
.ibox--3 { background: var(--c3-tint); color: var(--c3); }
.ibox--4 { background: var(--c4-tint); color: var(--c4); }
.ibox--5 { background: var(--c5-tint); color: var(--c5); }
.ibox--6 { background: var(--c6-tint); color: var(--c6); }
.ibox--lg { width: 54px; height: 54px; border-radius: 14px; }
.ibox--lg svg { width: 26px; height: 26px; }

/* Teknoloji şeridi */
.tech {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  list-style: none;
  margin-top: 26px;
}
.tech li {
  font-family: var(--mono);
  font-size: .8125rem;
  line-height: 1;
  padding: 10px 14px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink-2);
  box-shadow: 0 1px 2px rgba(20, 23, 26, .04);
}
.tech li b { font-weight: 500; }
.tech li:nth-child(6n+1) { color: var(--c1); border-color: color-mix(in srgb, var(--c1) 26%, var(--line)); background: color-mix(in srgb, var(--c1-tint) 55%, #fff); }
.tech li:nth-child(6n+2) { color: var(--c2); border-color: color-mix(in srgb, var(--c2) 26%, var(--line)); background: color-mix(in srgb, var(--c2-tint) 55%, #fff); }
.tech li:nth-child(6n+3) { color: var(--c3); border-color: color-mix(in srgb, var(--c3) 26%, var(--line)); background: color-mix(in srgb, var(--c3-tint) 55%, #fff); }
.tech li:nth-child(6n+4) { color: var(--c4); border-color: color-mix(in srgb, var(--c4) 26%, var(--line)); background: color-mix(in srgb, var(--c4-tint) 55%, #fff); }
.tech li:nth-child(6n+5) { color: var(--c5); border-color: color-mix(in srgb, var(--c5) 26%, var(--line)); background: color-mix(in srgb, var(--c5-tint) 55%, #fff); }
.tech li:nth-child(6n+6) { color: var(--c6); border-color: color-mix(in srgb, var(--c6) 26%, var(--line)); background: color-mix(in srgb, var(--c6-tint) 55%, #fff); }

/* Görselli hizmet kartları */
.cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 26px);
}
@media (max-width: 940px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .cards { grid-template-columns: 1fr; } }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover {
  transform: translateY(-4px);
  border-color: var(--c, var(--brand));
  box-shadow: 0 14px 30px -14px rgba(20, 23, 26, .28);
}
.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ct, var(--brand-tint));
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__badge {
  position: absolute;
  left: 16px;
  top: 16px;
  font-family: var(--mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .1em;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: var(--c, var(--brand));
  box-shadow: 0 1px 3px rgba(20, 23, 26, .12);
}
.card__badge--static {
  position: static;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 16px;
  background: var(--ct, var(--brand-tint));
  box-shadow: none;
}
.card__body { padding: clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; flex: 1; }
.card__title { margin-bottom: 10px; }
.card__title a { text-decoration: none; }
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card__text { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 18px; }
.card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c, var(--brand));
}
.card__more svg { transition: transform .2s ease; }
.card:hover .card__more svg { transform: translateX(4px); }

.c1 { --c: var(--c1); --ct: var(--c1-tint); }
.c2 { --c: var(--c2); --ct: var(--c2-tint); }
.c3 { --c: var(--c3); --ct: var(--c3-tint); }
.c4 { --c: var(--c4); --ct: var(--c4-tint); }
.c5 { --c: var(--c5); --ct: var(--c5-tint); }
.c6 { --c: var(--c6); --ct: var(--c6-tint); }

/* Renkli özellik kartları */
.features {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
@media (max-width: 720px) { .features { grid-template-columns: 1fr; } }
.feature {
  display: flex;
  gap: 16px;
  padding: clamp(20px, 2vw, 26px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.feature h3 { font-size: 1.05rem; margin-bottom: 7px; }
.feature p { font-size: var(--fs-sm); color: var(--muted); }

/* Numaralı süreç adımları */
.steps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(18px, 2vw, 28px);
  counter-reset: step;
}
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(20px, 2vw, 28px);
}
.step__dot {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: .875rem;
  font-weight: 500;
  color: #fff;
  background: linear-gradient(140deg, var(--brand-600), var(--brand-700));
  margin-bottom: 18px;
}
.step:nth-child(2) .step__dot { background: linear-gradient(140deg, #2E7BF0, var(--c1)); }
.step:nth-child(3) .step__dot { background: linear-gradient(140deg, #E08A22, var(--c3)); }
.step:nth-child(4) .step__dot { background: linear-gradient(140deg, #0FA0BE, var(--c4)); }
.step__title { margin-bottom: 10px; }
.step__text { font-size: var(--fs-sm); color: var(--muted); }

/* Renkli rakam bandı */
.statband {
  background: linear-gradient(135deg, var(--brand-700) 0%, var(--brand) 52%, #14695E 100%);
  color: #fff;
  border-radius: 18px;
  padding: clamp(28px, 4vw, 48px) clamp(20px, 3vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(20px, 3vw, 36px);
  position: relative;
  overflow: hidden;
}
.statband::after {
  content: "";
  position: absolute;
  right: -60px;
  top: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
}
.statband > div { position: relative; }
.statband .stat__value { color: #fff; }
.statband .stat__label { color: rgba(255, 255, 255, .72); }
@media (max-width: 860px) { .statband { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .statband { grid-template-columns: 1fr; } }

/* Sayfa başlığı (iç sayfalar) */
.page-head {
  padding-block: clamp(44px, 6vw, 80px) clamp(40px, 5vw, 64px);
  background:
    radial-gradient(120% 150% at 92% 0%, rgba(8, 145, 178, .13) 0%, transparent 58%),
    linear-gradient(180deg, rgba(232, 241, 238, .85) 0%, rgba(251, 250, 248, 0) 100%);
}
.page-head__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 64px);
  align-items: end;
}
@media (max-width: 880px) { .page-head__inner { grid-template-columns: 1fr; align-items: start; } }

.crumbs {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 18px;
}
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--brand); }
.crumbs span { margin-inline: 8px; color: var(--line-2); }

/* Kısa hizmet kartları (ana sayfa) */
.tiles--sand .tile { background: var(--paper-2); }
.tiles--sand .tile:hover { background: var(--paper-2); }

.tile__num { display: block; margin-bottom: 18px; }
.tile__title { margin-bottom: 10px; }
.tile__title a { text-decoration: none; }
.tile__text { font-size: var(--fs-sm); color: var(--muted); margin-bottom: 16px; }
.tile--link { position: relative; transition: background .18s ease; }
.tile--link:hover { background: #fff; }
.tile--link:hover .tile__num { color: var(--accent); }
.tile--link a::after { content: ""; position: absolute; inset: 0; }

/* Hizmet detay listesi */
.service {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: clamp(20px, 4vw, 64px);
  padding-block: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.service:first-of-type { border-top: 0; }
.service__aside { position: sticky; top: calc(var(--header-h) + 32px); align-self: start; }
.service__num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--c, var(--brand));
  background: var(--ct, var(--brand-tint));
  padding: 6px 11px;
  border-radius: 999px;
  margin-bottom: 16px;
}
.service__art {
  width: 100%;
  height: auto;
  margin-top: 22px;
  border-radius: 14px;
  border: 1px solid var(--line);
}
@media (max-width: 880px) { .service__art { margin-top: 18px; } }
.service__block-title::after {
  content: "";
  display: block;
  width: 34px;
  height: 2px;
  background: var(--c, var(--brand));
  margin-top: 8px;
  margin-bottom: -10px;
}
.service .check-list li::before { border-color: var(--c, var(--brand)); }
.service .chip { border-color: color-mix(in srgb, var(--c, var(--brand)) 22%, var(--line)); }
.service .mini-facts dd { color: var(--c, var(--brand)); }
.service__title { max-width: 14ch; }
.service__block { margin-top: 30px; }
.service__block-title {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}
.mini-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 44px;
  margin: 30px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.mini-facts > div { display: flex; align-items: baseline; gap: 10px; }
.mini-facts dt {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.mini-facts dd { margin: 0; font-size: var(--fs-sm); font-weight: 500; }

@media (max-width: 880px) {
  .service { grid-template-columns: 1fr; }
  .service__aside { position: static; }
  .service__title { max-width: none; }
}

/* Sayfa içi bağlantı şeridi */
.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding-block: 20px;
  border-bottom: 1px solid var(--line);
}
.jump a {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 7px 11px;
  transition: color .16s ease, border-color .16s ease;
}
.jump a:hover { color: var(--brand); border-color: var(--brand); }
.jump li:nth-child(1) a { color: var(--c1); border-color: color-mix(in srgb, var(--c1) 25%, var(--line)); background: color-mix(in srgb, var(--c1-tint) 45%, #fff); }
.jump li:nth-child(2) a { color: var(--c2); border-color: color-mix(in srgb, var(--c2) 25%, var(--line)); background: color-mix(in srgb, var(--c2-tint) 45%, #fff); }
.jump li:nth-child(3) a { color: var(--c3); border-color: color-mix(in srgb, var(--c3) 25%, var(--line)); background: color-mix(in srgb, var(--c3-tint) 45%, #fff); }
.jump li:nth-child(4) a { color: var(--c4); border-color: color-mix(in srgb, var(--c4) 25%, var(--line)); background: color-mix(in srgb, var(--c4-tint) 45%, #fff); }
.jump li:nth-child(5) a { color: var(--c5); border-color: color-mix(in srgb, var(--c5) 25%, var(--line)); background: color-mix(in srgb, var(--c5-tint) 45%, #fff); }
.jump li:nth-child(6) a { color: var(--c6); border-color: color-mix(in srgb, var(--c6) 25%, var(--line)); background: color-mix(in srgb, var(--c6-tint) 45%, #fff); }
.jump a:hover { filter: brightness(.94); }

/* İletişim bilgisi kartları */
.contact-list { list-style: none; display: grid; gap: 12px; }
.contact-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}
.contact-list__label {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}
.contact-list__val { font-size: var(--fs-sm); line-height: 1.5; }
.contact-list__val a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.contact-list__val a:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* Hakkımızda görseli */
.about-art { width: 100%; height: auto; }

/* Süreç */
.step__num {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.step__title { margin: 14px 0 10px; }
.step__text { font-size: var(--fs-sm); color: var(--muted); }

/* SSS */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  font-weight: 500;
  font-size: 1.0625rem;
  letter-spacing: -0.012em;
  transition: color .16s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--brand); }
.faq summary::after {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border-right: 1.5px solid var(--line-2);
  border-bottom: 1.5px solid var(--line-2);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.faq details[open] summary { color: var(--brand); }
.faq__body {
  padding: 0 0 24px;
  max-width: 72ch;
  color: var(--ink-2);
  font-size: var(--fs-sm);
}

/* Bilgi satırı (iletişim) */
.info-list { list-style: none; display: grid; }
.info-list li {
  display: grid;
  grid-template-columns: 128px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.info-list li:first-child { border-top: 1px solid var(--line); }
.info-list dt, .info-list .key {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}
.info-list a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line-2); }
.info-list a:hover { color: var(--brand); border-bottom-color: var(--brand); }
@media (max-width: 520px) {
  .info-list li { grid-template-columns: 1fr; gap: 4px; }
}

/* 8. Alt bölge ------------------------------------------------------------ */

.dark-zone {
  position: relative;
  background: var(--brand-700);
  color: rgba(255, 255, 255, 0.78);
}
/* Koyu alan sayfaya dalga çizerek giriyor */
.dark-zone::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: clamp(34px, 4.2vw, 64px);
  background-image: var(--wave-dark);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}
.dark-zone h2, .dark-zone h3, .dark-zone strong { color: #fff; }

.cta {
  padding-block: clamp(52px, 7vw, 92px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.cta__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
}
.cta__title { max-width: 18ch; }
.cta__text { margin-top: 18px; max-width: 46ch; font-size: var(--fs-sm); }
.cta__actions { display: flex; flex-wrap: wrap; gap: 12px; justify-self: end; }
@media (max-width: 880px) {
  .cta__inner { grid-template-columns: 1fr; }
  .cta__actions { justify-self: start; }
}

.footer { padding-block: clamp(48px, 6vw, 72px) 0; }
.footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px);
}
@media (max-width: 900px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .footer__grid { grid-template-columns: 1fr; } }

.footer .brand { color: #fff; }
.footer .brand__sub { color: rgba(255,255,255,.55); }
.footer__about { margin-top: 20px; font-size: var(--fs-sm); max-width: 38ch; }

.footer__title {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 18px;
}
.footer__list { list-style: none; display: grid; gap: 11px; }
.footer__list a {
  font-size: var(--fs-sm);
  text-decoration: none;
  color: rgba(255, 255, 255, 0.78);
  transition: color .16s ease;
}
.footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.footer__bottom {
  margin-top: clamp(40px, 5vw, 64px);
  padding-block: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.55);
}
.footer__bottom a { color: inherit; text-decoration: none; }
.footer__bottom a:hover { color: #fff; }

/* 9. Yasal sayfa düzeni --------------------------------------------------- */

.legal {
  display: grid;
  grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  padding-block: var(--sec-pad);
}
/* minmax(0, …) şart: düz "1fr" yazılırsa ızgara hücresi en dar içeriğinden
   (buradaki geniş tablolar) küçülemez ve tüm sayfa yana kayardı. */
@media (max-width: 900px) { .legal { grid-template-columns: minmax(0, 1fr); } }
.legal__toc, .legal__body { min-width: 0; }

.legal__toc {
  position: sticky;
  top: calc(var(--header-h) + 32px);
  border-top: 1px solid var(--line);
  padding-top: 18px;
}
@media (max-width: 900px) { .legal__toc { position: static; } }
.legal__toc-title {
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}
.legal__toc ol { list-style: none; counter-reset: toc; display: grid; gap: 9px; }
.legal__toc li { counter-increment: toc; }
.legal__toc a {
  display: flex;
  gap: 10px;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
  line-height: 1.4;
}
.legal__toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.6875rem;
  color: var(--line-2);
  padding-top: 2px;
}
.legal__toc a:hover { color: var(--brand); }

.legal__body { max-width: 74ch; }
.legal__body h2 {
  font-size: 1.3rem;
  margin: 44px 0 14px;
  scroll-margin-top: calc(var(--header-h) + 24px);
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body h3 { font-size: 1.05rem; margin: 26px 0 10px; }
.legal__body p, .legal__body li { color: var(--ink-2); font-size: var(--fs-sm); }
.legal__body ul, .legal__body ol { margin: 0 0 1.1em; padding-left: 20px; display: grid; gap: 8px; }
.legal__body ul { list-style: disc; }
.legal__body ol { list-style: decimal; }
.legal__body a { color: var(--brand); }
.legal__body table {
  width: 100%;
  border-collapse: collapse;
  margin: 8px 0 22px;
  font-size: 0.875rem;
}
.legal__body th, .legal__body td {
  border: 1px solid var(--line);
  padding: 10px 12px;
  text-align: left;
  vertical-align: top;
  color: var(--ink-2);
}
.legal__body th { background: var(--paper-2); font-weight: 600; color: var(--ink); }
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.callout {
  border: 1px solid var(--line);
  border-left: 2px solid var(--brand);
  background: var(--paper-2);
  padding: 18px 20px;
  font-size: var(--fs-sm);
  color: var(--ink-2);
  margin: 0 0 28px;
}

.legal-index { list-style: none; display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.legal-index li { background: var(--paper); }
.legal-index a {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 24px;
  align-items: center;
  gap: 16px;
  padding: 24px clamp(20px, 2.5vw, 30px);
  text-decoration: none;
  transition: background .16s ease;
}
.legal-index a:hover { background: #fff; }
.legal-index a:hover .arrow { transform: translateX(3px); }
.legal-index .arrow { color: var(--brand); transition: transform .2s ease; }
.legal-index .h3 { display: block; }
.legal-index__text { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: 5px; }
@media (max-width: 560px) {
  .legal-index a { grid-template-columns: 32px minmax(0, 1fr); }
  .legal-index .arrow { display: none; }
}

/* 10. Yardımcılar --------------------------------------------------------- */

:target { scroll-margin-top: calc(var(--header-h) + 24px); }

.center { text-align: center; }
.measure { max-width: 24ch; }
.mt-0 { margin-top: 0; }
.mt-s { margin-top: 16px; }
.mt-m { margin-top: 28px; }
.mt-l { margin-top: 44px; }
.stack > * + * { margin-top: 18px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Sayfa geçişleri --------------------------------------------------------
   Sayfa açılırken içerik yumuşakça belirir, başka bir sayfaya geçerken
   solarak çıkar. Yalnızca opaklık kullanılır; transform kullanılsaydı
   mobil menünün position:fixed yerleşimi bozulurdu. */
@keyframes sayfaGir  { from { opacity: 0 } to { opacity: 1 } }
@keyframes sayfaCik  { from { opacity: 1 } to { opacity: 0 } }
@keyframes icerikGir { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }

.js body { animation: sayfaGir .34s ease both; }
.js main,
.js .dark-zone { animation: icerikGir .58s cubic-bezier(.22, .61, .36, 1) both; }
.js .dark-zone { animation-delay: .06s; }

.js.is-leaving body { animation: sayfaCik .22s ease forwards; }

/* Güvenlik ağı: giriş animasyonu bittikten sonra (ya da herhangi bir
   sebeple hiç çalışmazsa) içerik kesin olarak görünür kalır. */
.js.anim-bitti main,
.js.anim-bitti .dark-zone { animation: none; opacity: 1; transform: none; }

/* Görünüme girince yumuşak beliriş.
   Gizleme yalnızca .js sınıfı varken uygulanır; böylece JavaScript
   kapalıysa veya yüklenemezse içerik yine de görünür kalır. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .55s cubic-bezier(.22,.61,.36,1), transform .55s cubic-bezier(.22,.61,.36,1);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay: 0ms !important;
    transition-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js main, .js .dark-zone { transform: none; }
}

/* 11. Dokunmatik cihazlar -------------------------------------------------
   Telefon ve tablette "fareyle üzerine gelme" diye bir şey yok. Tarayıcı
   dokunuşu hover sayıyor ve efekt parmak çekildikten sonra ekranda takılı
   kalıyor. Yer değiştiren ve gölgelenen efektleri kapatıp yerlerine dokunma
   anında görünüp kaybolan kısa bir geri bildirim koyuyoruz. */

@media (hover: none) {
  .card:hover {
    transform: none;
    box-shadow: none;
    border-color: var(--line);
  }
  .card:hover .card__more svg,
  .btn:hover svg,
  .arrow-link:hover svg,
  .legal-index a:hover .arrow { transform: none; }

  .tile--link:hover { background: var(--paper); }
  .tile--link:hover .tile__num { color: var(--line-2); }
  .legal-index a:hover { background: var(--paper); }
  .jump a:hover { filter: none; }

  /* Dokunma anında geri bildirim */
  .btn:active { transform: scale(.985); }
  .card:active { border-color: var(--c, var(--brand)); }
  .tile--link:active { background: #fff; }
  .legal-index a:active { background: #fff; }
  .faq summary:active { color: var(--brand); }
}

/* 12. Küçük ekranlar ------------------------------------------------------
   Buradaki kurallar yalnızca dar ekranlarda çalışır; masaüstü görünümü
   olduğu gibi kalır. */

/* Çentikli telefonlarda (iPhone X ve sonrası) yatay tutulduğunda içerik
   çentiğin ya da yuvarlatılmış köşenin altında kalmasın. */
@supports (padding: max(0px)) {
  .wrap {
    padding-left: max(var(--gutter), env(safe-area-inset-left));
    padding-right: max(var(--gutter), env(safe-area-inset-right));
  }
}

/* Menü açıkken arkayı karartan örtü. Öğeyi main.js oluşturuyor; üst bar
   z-index 100'de olduğu için örtü onun bir altında, içeriğin üstünde kalır. */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(20, 23, 26, .42);
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s ease, visibility .2s;
  -webkit-tap-highlight-color: transparent;
}
body[data-nav="open"] .nav-backdrop { opacity: 1; visibility: visible; }
@media (min-width: 901px) { .nav-backdrop { display: none; } }

@media (max-width: 900px) {
  :root {
    /* Üst bar inceliyor, içeriğe daha çok yer kalıyor */
    --header-h: 62px;
    /* 11px'lik etiketler telefonda okunmuyordu */
    --fs-label: 0.75rem;
  }

  /* Menü açıkken sayfa arkada kaymasın. iOS Safari'de body'ye overflow:hidden
     vermek yetmiyor; sayfayı olduğu yerde sabitlemek gerekiyor. Kaydırma
     konumunu main.js saklayıp menü kapanınca geri veriyor. */
  body[data-nav="open"] {
    position: fixed;
    left: 0;
    right: 0;
    width: 100%;
  }

  /* Apple'ın önerdiği en küçük dokunma alanı 44×44 */
  .nav-toggle { width: 44px; height: 44px; }

  @supports (padding: max(0px)) {
    .nav {
      padding-left: max(var(--gutter), env(safe-area-inset-left));
      padding-right: max(var(--gutter), env(safe-area-inset-right));
      padding-bottom: max(28px, env(safe-area-inset-bottom));
    }
  }

  /* iOS Safari, yazı tipi 16px'ten küçük bir alana odaklanınca sayfayı
     kendiliğinden yakınlaştırıyor ve düzen bozuluyor. 16px bunu engelliyor. */
  .field input,
  .field select,
  .field textarea { font-size: 16px; padding-block: 13px; }

  .consent { gap: 12px; font-size: var(--fs-sm); }
  .consent input { width: 22px; height: 22px; margin-top: 1px; }

  /* Bağlantılar parmakla rahat seçilebilsin diye en az 44px yüksekliğe çıkar */
  .footer__list { gap: 0; }
  .footer__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
  .legal__toc ol { gap: 0; }
  .legal__toc a {
    align-items: center;
    min-height: 44px;
    border-bottom: 1px solid var(--line);
  }
  .legal__toc li:last-child a { border-bottom: 0; }
  .crumbs a { display: inline-block; padding-block: 8px; }
  .jump a { padding: 12px 14px; }
  .arrow-link { padding-block: 9px; }
  .contact-list__val a,
  .info-list a { display: inline-block; padding-block: 5px; }
  .brand { min-height: 44px; }
  .footer__bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
  .faq summary { padding: 20px 0; gap: 16px; }

  .card__badge { font-size: 0.75rem; }
  .hero__fact { padding: 16px 18px; }
}

@media (max-width: 640px) {
  /* Yasal metinlerdeki tablolar telefonda ya sıkışıyor ya da yana kayıyordu.
     Dar ekranda her satırı kendi kartına açıyoruz.
       .table-stack — üç/dört sütunlu tablolar: her hücre ayrı satır olur,
                      sütun başlığı td'deki data-label'dan gelir.
       .table-pairs — iki sütunlu etiket/değer tabloları: ilk hücre başlık
                      satırı, ikincisi altındaki açıklama olur. */
  .table-stack,
  .table-pairs { overflow-x: visible; }

  .table-stack table, .table-stack tbody, .table-stack tr, .table-stack td,
  .table-pairs table, .table-pairs tbody, .table-pairs tr, .table-pairs th, .table-pairs td {
    display: block;
    width: 100%;
  }
  .table-stack thead,
  .table-pairs thead { display: none; }
  .table-stack table,
  .table-pairs table {
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 22px;
  }
  .table-stack tr,
  .table-pairs tr {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--paper);
    margin-bottom: 10px;
  }
  .table-stack tr:last-child,
  .table-pairs tr:last-child { margin-bottom: 0; }

  .table-stack td {
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 11px 15px;
  }
  .table-stack tr td:last-child { border-bottom: 0; }
  .table-stack td::before {
    content: attr(data-label);
    display: block;
    font-family: var(--mono);
    font-size: var(--fs-label);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
  }

  .table-pairs tr { padding: 13px 15px; }
  .table-pairs th,
  .table-pairs td { border: 0; padding: 0; text-align: left; }
  .table-pairs tr > *:first-child {
    background: transparent;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 3px;
  }
}

@media (max-width: 480px) {
  /* Tek sütuna düşen düğmeler yarım kalmış görünmesin, tam genişlik alsın */
  .btn-row { gap: 10px; }
  .btn-row .btn,
  .cta__actions .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Yazdırma */
@media print {
  .site-header, .dark-zone, .jump, .btn-row, .legal__toc { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .legal { grid-template-columns: 1fr; padding-block: 0; }
  a { text-decoration: underline; }
}