.wrap { max-width: 1120px; margin: 0 auto; padding-inline: var(--gutter); padding-block: 0 2rem; }
.small { font-size: var(--s-sm); }

.site-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 1.25rem; flex-wrap: wrap; }
.head-nav { display: flex; gap: 0.5rem; }

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}
.hero-copy { display: grid; gap: 1.25rem; }
.hero h1 { font-size: var(--s-3xl); font-weight: 800; letter-spacing: -0.035em; max-width: 13ch; }
.lede { font-size: var(--s-lg); color: var(--muted); max-width: 52ch; line-height: 1.55; }
.hero-cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* Fiş görünümlü örnek: kesik kenarlı kâğıt */
.receipt {
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r) var(--r) 0 0;
  padding: 1.25rem 1.25rem 1rem;
  display: grid;
  gap: 1rem;
  position: relative;
  box-shadow: 0 1px 0 var(--line), 0 18px 40px -24px rgb(16 40 32 / 0.35);
  -webkit-mask: radial-gradient(circle 6px at 50% 100%, transparent 5.5px, #000 6px) 0 100% / 16px 12px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - 11px) no-repeat;
  mask: radial-gradient(circle 6px at 50% 100%, transparent 5.5px, #000 6px) 0 100% / 16px 12px repeat-x,
    linear-gradient(#000, #000) 0 0 / 100% calc(100% - 11px) no-repeat;
  padding-bottom: 1.75rem;
}
.receipt-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 1px dashed var(--line-strong); padding-bottom: 0.75rem; font-size: var(--s-sm); }
.receipt-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; font-size: var(--s-sm); }
.receipt-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 0.6rem; align-items: center; }
.receipt-rows li > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.receipt-rows li > .num:last-child { text-align: right; min-width: 7.5ch; }
.receipt-total { margin: 0; display: grid; gap: 0.35rem; border-top: 1px dashed var(--line-strong); padding-top: 0.75rem; }
.receipt-total div { display: flex; justify-content: space-between; font-size: var(--s-sm); }
.receipt-total dt { color: var(--muted); }
.receipt-total dd { margin: 0; }
.receipt-total .net { font-size: var(--s-lg); font-weight: 700; padding-top: 0.35rem; }
.receipt-total .net dt { color: var(--ink); }
.receipt figcaption { font-size: var(--s-xs); }

.features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.features article { padding: 1.75rem 1.5rem 2rem 0; display: grid; gap: 0.6rem; align-content: start; }
.features article + article { padding-left: 1.5rem; border-left: 1px solid var(--line); }
.features h2 { font-size: var(--s-lg); font-weight: 700; letter-spacing: -0.01em; }
.features p { color: var(--muted); font-size: var(--s-sm); line-height: 1.6; }

.integration {
  display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 2rem; align-items: center;
  padding-block: clamp(2.5rem, 6vw, 4rem);
}
.integration > div { display: grid; gap: 0.75rem; }
.integration h2 { font-size: var(--s-xl); font-weight: 800; letter-spacing: -0.02em; }
code { font-family: var(--f-num); font-size: 0.9em; }
.code {
  margin: 0; overflow-x: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: 1.1rem 1.25rem; font-size: var(--s-sm); line-height: 1.6;
}

.site-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding-top: 1.5rem; border-top: 1px solid var(--line); }

@media (max-width: 860px) {
  .hero, .integration { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
  .features article, .features article + article { padding: 1.5rem 0; border-left: 0; }
  .features article + article { border-top: 1px solid var(--line); }
}
@media (max-width: 420px) {
  .receipt-rows li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .receipt-rows li .chip { display: none; }
}
.foot-links { display: flex; gap: 1rem; }