/* Software product page (Tessera) — shares .bp/.bpl/.crumb from blog.css and .page-hero/.sec-head from site.css. */
.page-software main > section { padding-top: 0; padding-bottom: 0; }
.sw-eyebrow { margin: 0; font-family: "IBM Plex Mono", monospace; font-size: 13px; letter-spacing: .12em; color: var(--blue); text-transform: uppercase; }
.sw-eyebrow--orange { color: #FF8A57; }

.sw-hero { display: flex; gap: 56px; align-items: center; padding: 64px var(--pad) 72px !important; }
.sw-hero__text { position: relative; flex: 1 1 0; display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.sw-hero h1 { margin: 0; font-family: Archivo, sans-serif; font-weight: 800; font-size: 54px; line-height: 1.04; letter-spacing: -.015em; color: #fff; }
.sw-hero__intro { margin: 0; max-width: 620px; font-size: 18px; line-height: 1.6; color: #C3CCE2; }
.sw-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-badges span { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .06em; color: #C3CCE2; border: 1px solid #2A3D75; border-radius: 3px; padding: 6px 10px; }
.sw-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.sw-hero__fig { position: relative; width: 420px; flex-shrink: 0; }
.sw-btn { display: inline-block; padding: 15px 22px; border-radius: 4px; background: var(--blue); color: #fff !important; font-weight: 600; font-size: 15px; }
.sw-btn:hover { background: #fff; color: var(--navy) !important; }
.sw-btn--ghost { background: transparent; border: 1px solid #3A4B7A; }
.sw-btn--ghost:hover { background: #fff; }
button.sw-btn--send, button.sw-btn--send:hover { border: 0; font-family: "IBM Plex Sans", sans-serif; letter-spacing: 0; cursor: pointer; align-self: flex-start; }
button.sw-btn--send:hover { background: var(--navy); color: #fff !important; }

.sw-why { padding: 80px var(--pad) 88px !important; }
.sw-pains { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.sw-pain { display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid #D5DCEA; border-radius: 6px; padding: 20px; }
.sw-pain__n { font-family: "IBM Plex Mono", monospace; font-size: 12px; color: var(--orange); }
.sw-pain b { font-size: 17px; color: var(--navy); }
.sw-pain span:last-child { font-size: 14.5px; line-height: 1.55; color: #4A5570; }

.sw-how { padding: 80px var(--pad) 0 !important; }
.sw-principles { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.sw-principles li { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.sw-principles__n { font-family: "IBM Plex Mono", monospace; font-size: 14px; font-weight: 600; color: var(--blue); }
.sw-principles li > div { display: flex; flex-direction: column; gap: 8px; }
.sw-principles b { font-family: Archivo, sans-serif; font-weight: 700; font-size: 20px; color: var(--navy); }
.sw-principles span { font-size: 15.5px; line-height: 1.6; color: #4A5570; max-width: 74ch; }
.sw-principles em { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 12.5px; color: var(--navy); background: var(--paper-alt); border-radius: 3px; padding: 6px 10px; align-self: flex-start; }

.sw-edge { margin-top: 90px; padding: 80px var(--pad) 88px !important; color: #fff; }
.sw-edge__head { display: flex; flex-direction: column; gap: 12px; max-width: 760px; margin-bottom: 30px; }
.sw-edge h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; color: #fff; }
.sw-edge__note { margin: 0; font-size: 15px; line-height: 1.6; color: #A9B4CF; }
.sw-edges { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sw-edge__card { display: flex; flex-direction: column; gap: 10px; padding: 24px; border: 1px solid #2A3D75; border-radius: 6px; background: rgba(255,255,255,.03); }
.sw-edge__card b { font-family: Archivo, sans-serif; font-weight: 700; font-size: 20px; color: #fff; }
.sw-edge__card > span { font-size: 14.5px; line-height: 1.6; color: #C3CCE2; }
.sw-edge__cmp { margin: 6px 0 0; display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 6px 12px; font-size: 13px; }
.sw-edge__cmp dt { font-family: "IBM Plex Mono", monospace; font-size: 10.5px; letter-spacing: .08em; color: #7C89AD; padding-top: 2px; }
.sw-edge__cmp dd { margin: 0; color: #A9B4CF; }
.sw-edge__cmp dt.is-ours { color: #FF8A57; }
.sw-edge__cmp dd.is-ours { color: #fff; font-weight: 500; }

.sw-team { padding: 88px var(--pad) 0 !important; }
.sw-team__text { display: flex; flex-direction: column; gap: 16px; max-width: 820px; }
.sw-team h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 36px; line-height: 1.12; color: var(--navy); }
.sw-team p { margin: 0; font-size: 17px; line-height: 1.65; color: #4A5570; }
.sw-team__link { font-weight: 600; color: var(--blue); align-self: flex-start; }

.sw-tools-strip { margin-top: 90px; padding: 64px var(--pad) 70px !important; }
.sw-tools-strip__head { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin-bottom: 22px; }
.sw-tools-strip h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 30px; color: var(--navy); }
.sw-tools-strip p { margin: 0; font-size: 15.5px; line-height: 1.6; color: #4A5570; }
.sw-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.sw-chip { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; background: #fff; border: 1px solid var(--line-strong); border-radius: 4px; font-size: 14px; color: var(--navy); }
.sw-chip i { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 11px; color: #6A7490; }
.sw-chip:hover { border-color: var(--navy); color: var(--navy); }
.sw-chip--all { border-style: dashed; color: var(--blue); }

.sw-modules { padding: 88px var(--pad) 0 !important; }
.sw-legend { display: flex; flex-wrap: wrap; gap: 10px 16px; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: #4A5570; }
.sw-legend span { display: flex; align-items: center; gap: 6px; }
.sw-st { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.st-running { background: #2E7D45; } .st-build { background: var(--blue); } .st-planned { background: #A9B2C1; }
.sw-mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); gap: 14px; }
.sw-mod { display: flex; flex-direction: column; gap: 8px; border: 1px solid var(--line); border-radius: 6px; padding: 18px 20px; }
.sw-mod--running { border-color: #BFE3CB; background: #F6FBF7; }
.sw-mod--build { border-color: #C9D6FF; background: #F7F9FF; }
.sw-mod__tag { display: flex; align-items: center; gap: 7px; font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #6A7490; }
.sw-mod b { font-size: 17px; color: var(--navy); }
.sw-mod__w { font-size: 14px; line-height: 1.55; color: #4A5570; }
.sw-mod__note { font-family: "IBM Plex Mono", monospace; font-size: 11.5px; color: var(--blue); }

.sw-road { margin-top: 90px; padding: 80px var(--pad) 88px !important; }
.sw-stages { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; position: relative; }
.sw-stages::before { content: ""; position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: var(--line-strong); }
.sw-stage { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 52px; }
.sw-stage__k { position: absolute; top: 0; left: 0; font-family: "IBM Plex Mono", monospace; font-size: 11.5px; letter-spacing: .08em; color: #6A7490; }
.sw-stage__dot { position: absolute; top: 28px; left: 0; width: 13px; height: 13px; border-radius: 50%; background: #fff; border: 2px solid var(--line-strong); }
.sw-stage--running .sw-stage__dot { background: #2E7D45; border-color: #2E7D45; }
.sw-stage--build .sw-stage__dot { background: var(--blue); border-color: var(--blue); }
.sw-stage b { font-family: Archivo, sans-serif; font-weight: 700; font-size: 18px; color: var(--navy); }
.sw-stage > span:not(.sw-stage__k):not(.sw-stage__dot) { font-size: 14px; line-height: 1.55; color: #4A5570; }
.sw-stage__c { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: #fff; border: 1px solid var(--line); border-radius: 4px; font-size: 13px !important; }
.sw-stage__c i { font-style: normal; font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: .1em; color: var(--orange); }

.sw-signup { display: flex; gap: 56px; align-items: flex-start; padding: 90px var(--pad) 100px !important; scroll-margin-top: 20px; }
.sw-signup__text { flex: 1 1 0; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sw-signup h2 { margin: 0; font-family: Archivo, sans-serif; font-weight: 700; font-size: 40px; line-height: 1.1; color: var(--navy); }
.sw-signup p { margin: 0; font-size: 16.5px; line-height: 1.6; color: #4A5570; max-width: 60ch; }
.sw-promises { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sw-promises li { display: grid; grid-template-columns: 24px 1fr; font-size: 14.5px; color: #4A5570; }
.sw-promises li::before { content: "✓"; color: #2E7D45; font-weight: 700; }
.sw-form { width: 460px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; background: #fff; border: 1px solid var(--navy); border-radius: 6px; padding: 26px; }
.sw-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sw-f { display: flex; flex-direction: column; gap: 6px; margin: 0; font-size: 13px; font-weight: 600; color: var(--navy); }
.sw-f span { font-weight: 400; color: #6A7490; }
.sw-signup input[type=text], .sw-signup input[type=email], .sw-signup textarea { width: 100%; max-width: none; height: 44px; padding: 0 12px; border: 1px solid #C9D1E3; border-radius: 4px; font-size: 14px; font-family: "IBM Plex Sans", sans-serif; }
.sw-signup textarea { height: auto; padding: 10px 12px; resize: vertical; }
.sw-interest { margin: 0; padding: 0; border: 0; }
.sw-interest legend { padding: 0 0 8px; font-size: 13px; font-weight: 600; color: var(--navy); }
.sw-interest > div { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-interest label { display: flex; align-items: center; gap: 7px; margin: 0; padding: 8px 12px; border: 1px solid #C9D1E3; border-radius: 3px; font-size: 13.5px; color: var(--navy); cursor: pointer; }
.sw-interest label:has(input:checked) { border-color: var(--blue); background: #EEF2FF; }
.sw-check { display: grid; grid-template-columns: 22px 1fr; align-items: start; gap: 8px; margin: 0; font-size: 13.5px; line-height: 1.5; color: #4A5570; cursor: pointer; }
.sw-signup input[type=checkbox] { width: 16px; height: 16px; margin: 2px 0 0; }
.sw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sw-flash { margin: 0; padding: 11px 13px; border-radius: 4px; font-size: 14px; }
.sw-flash--success { background: #EEF8F1; color: #14532D; } .sw-flash--error { background: #FDEEEE; color: var(--orange); }
.sw-legal { font-size: 12px; line-height: 1.5; color: #6A7490; }
.sw-legal p { margin: 0; font-size: 12px; }

@media (max-width: 1000px) {
  .sw-hero, .sw-signup { flex-direction: column; }
  .sw-hero__fig, .sw-form { width: 100%; }
  .sw-hero h1 { font-size: 40px; }
  .sw-stages::before { display: none; }
}
@media (max-width: 860px) {
  .sw-modules .sec-head, .sw-why .sec-head, .sw-road .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 720px) {
  .sw-hero h1 { font-size: 32px; }
  .sw-edge h2, .sw-signup h2 { font-size: 28px; }
  .sw-team h2 { font-size: 26px; }
  .sw-why, .sw-edge, .sw-road, .sw-signup, .sw-tools-strip { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sw-how, .sw-modules, .sw-team { padding-top: 56px !important; }
  .sw-pair { grid-template-columns: 1fr; }
  .sw-principles li { grid-template-columns: 40px minmax(0, 1fr); gap: 12px; }
}

/* ---------------------------------------------------------- the program
   Tessera'nın kendi görüntülerini gösteren bölüm. Açık gri ızgaralı bir
   bandın (bpl) üstünde duruyorlar, o yüzden her görüntü beyaz bir yaprağın
   üstünde: şeffaf arka planla alınmış bir render de, tema arka planıyla
   alınmış bir pencere de aynı çerçevede düzgün oturuyor.

   Bu blok dosyanın sonunda; kendi mobil kuralları daha da sonda olmalı,
   yoksa yukarıdaki @media bloğu eşit özgüllükte olduğu için kazanır. */
.sw-screens { padding: 88px var(--pad) 96px !important; }

.sw-shot { margin: 0; }
.sw-shot__img {
  display: block;
  width: 100%;
  height: auto;
  background: #fff;
  border: 1px solid #D5DCEA;
  border-radius: 8px;
  box-shadow: 0 18px 44px rgba(10, 22, 51, .10);
}
/* Uzun açıklama için: etiket kendi satırında, metin okunabilir bir ölçüde.
   Tek satırda yan yana dursalardı üç cümlelik bir açıklama etiketi ekranın
   soluna iter ve satır uzunluğu okunmayacak kadar açılırdı. */
.sw-shot figcaption {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  font-size: 15px;
  line-height: 1.6;
  color: #4A5570;
}
.sw-shot figcaption span { max-width: 78ch; }
.sw-shot figcaption b {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--blue);
}

/* Geniş görüntü ızgaranın içinde kalır, sadece bütün sütunları kaplar —
   böylece listedeki sırası neyse orada durur. */
.sw-shot--wide { grid-column: 1 / -1; }
.sw-shots {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(440px, 100%), 1fr));
  gap: 34px 28px;
}

@media (max-width: 900px) {
  .sw-screens { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sw-screens .sec-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .sw-shots { grid-template-columns: 1fr; gap: 28px; }
  .sw-shot__img { box-shadow: 0 10px 24px rgba(10, 22, 51, .08); }
}

/* ------------------------------------------- yol haritası ve "neden" ızgaraları
   İki hata düzeltiliyor.

   1) Zaman çizgisi konteynerin en üstüne TEK parça çiziliyordu
      (.sw-stages::before, top: 34px). Izgara ikinci satıra sardığı anda o
      satırdaki noktalar çizgisiz kalıyor ve bölüm bozuk görünüyor. Çizgi
      artık her kartın kendi üstünde: kaç satır olursa olsun her satırda var.

   2) auto-fit ile altı öğe geniş ekranda 4+2 sarıyordu. Üç sütunla sınırlayınca
      3+3 oluyor; dört öğede ise :has() ile 2+2'ye düşüyor, çünkü 3+1 tek başına
      kalan bir kart demek.

   Bu blok dosyanın en sonunda: yukarıdaki @media blokları eşit özgüllükte,
   sonra gelen kazanır. */

.sw-pains,
.sw-stages { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sw-pains:has(> :nth-child(4):last-child),
.sw-stages:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.sw-stages { overflow: hidden; }          /* satır sonundaki çizgi payını kırpar */
.sw-stages::before { display: none; }     /* tek parça çizgi — yerini alttaki aldı */
.sw-stage::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 0;
  right: -18px;                           /* ızgara boşluğu kadar: kartlar arası kopmasın */
  height: 1px;
  background: var(--line-strong);
}
/* Serbest bırakma koşulu kutuları kartın altına yaslansın; metin uzunluğu
   farklı olduğu için aksi hâlde her biri başka yükseklikte duruyor. */
.sw-stage__c { margin-top: auto; }

@media (max-width: 1000px) {
  .sw-pains,
  .sw-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .sw-pains,
  .sw-stages { grid-template-columns: minmax(0, 1fr); }
  .sw-stage::before { display: none; }    /* tek sütunda çizginin anlamı yok */
  .sw-stage__c { margin-top: 0; }
}