/* ==========================================================================
   /urunler/rota-optimizasyonu/ + /en/products/route-optimization/

   Built 2026-08-25 from the owner's deck. The page leans on the shared
   primitives — .ng-section, .ng-card, .ng-grid, .ng-facts, .ng-note, .ng-cta —
   so what is here is only the four shapes the deck needs that the system does
   not already have: a numbered rail, a two-column use-case split, a ruled pull
   line, and the three deployment models.

   NOTHING HERE STYLES A FIGURE. The deck's own rule is that its screen values
   are illustrative and that no saving is claimed, so the page carries no
   sample-output plate and no performance number to lay out.
   ========================================================================== */

/* --- 1. Rhythm ------------------------------------------------------------ */
.ng-v2 .ng-ro-facts{ margin-top:40px; }
.ng-v2 .ng-ro-cards{ margin-top:36px; }
.ng-v2 .ng-ro-note{ margin-top:28px; max-width:82ch; }

@media (max-width:767px){
  .ng-v2 .ng-ro-facts{ margin-top:30px; }
  .ng-v2 .ng-ro-cards{ margin-top:26px; }
  .ng-v2 .ng-ro-note{ max-width:none; }
}

/* --- 2. .ng-ro-pull — the hinge line -------------------------------------
   Ruled, not boxed. Each of these sits at the end of a run of cards and is the
   deck's own conclusion about them; a fifth card would read as a fifth item in
   the list rather than as the sentence that closes it. Same move as
   /urunler/sahanin-gucu/ §20. */
.ng-v2 .ng-ro-pull{
  margin:40px 0 0;
  padding-top:26px;
  border-top:2px solid var(--ng-ink);
  max-width:76ch;
  font-size:clamp(1.125rem, 1.9vw, 1.375rem);
  line-height:1.42;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
@media (max-width:767px){
  .ng-v2 .ng-ro-pull{ margin-top:30px; padding-top:20px; font-size:17px; max-width:none; }
}

/* --- 3. .ng-ro-rail — a numbered rail ------------------------------------
   Rails, not cards, wherever the items are STEPS OF ONE THING rather than
   separate items you weigh. The four field capabilities and the four depot
   questions each describe one continuous piece of work, so they get rules
   between them and a shared left gutter for the ordinal.

   grid rather than flex: the number column has to hold its width when one
   entry's title wraps to two lines and the next one's does not, and a flex
   basis on the number would let the two rows disagree. */
.ng-v2 .ng-ro-rail{
  margin:36px 0 0;
  padding:0;
  list-style:none;
}
.ng-v2 .ng-ro-rail__item{
  display:grid;
  grid-template-columns:64px minmax(0,1fr);
  gap:20px;
  padding:22px 0;
  border-bottom:1px solid var(--ng-hairline);
}
.ng-v2 .ng-ro-rail > .ng-ro-rail__item:first-child{ border-top:1px solid var(--ng-hairline); }
@media (max-width:640px){
  .ng-v2 .ng-ro-rail__item{ grid-template-columns:minmax(0,1fr); gap:6px; padding:18px 0; }
}
.ng-v2 .ng-ro-rail__n{
  font-family:var(--ng-font-label);
  font-weight:700; font-size:14px; line-height:1.6;
  letter-spacing:.08em;
  color:var(--ng-accent);
}
.ng-v2 .ng-ro-rail__main{ min-width:0; }
/* Doubled class: .ng-v2 .ng-ro-rail__name is (0,2,0) and the theme's own
   heading reset for h3 inside a section reaches (0,2,1). Measured, not
   assumed — the same trap ng-shared.css §17b documents. */
.ng-v2 .ng-ro-rail__name.ng-ro-rail__name{
  margin:0;
  font-size:clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height:1.3;
  letter-spacing:-0.01em;
  color:var(--ng-ink);
}
.ng-v2 .ng-ro-rail__body{
  margin:8px 0 0;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);
  max-width:74ch;
}

/* --- 4. .ng-ro-cols — FMCG beside logistics ------------------------------
   The two use cases are the same engine doing two jobs, so they are set side
   by side rather than stacked: a reader in one industry should be able to see
   that the other column exists without scrolling past their own. */
.ng-v2 .ng-ro-cols{
  margin-top:36px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:44px;
}
@media (min-width:900px){
  .ng-v2 .ng-ro-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:56px; }
}
.ng-v2 .ng-ro-col__tag{ margin:0; }
.ng-v2 .ng-ro-col__head.ng-ro-col__head{
  margin:10px 0 0;
  font-size:clamp(1.25rem, 2.1vw, 1.5rem);
  line-height:1.24;
  letter-spacing:-0.02em;
  color:var(--ng-ink);
  text-wrap:balance;
}
.ng-v2 .ng-ro-col .ng-ro-rail{ margin-top:22px; }

/* --- 5. .ng-ro-sub — the second question inside section 50 --------------- */
.ng-v2 .ng-ro-sub{ margin-top:52px; }
.ng-v2 .ng-ro-sub__head.ng-ro-sub__head{
  margin:0;
  font-size:clamp(1.25rem, 2.1vw, 1.5rem);
  line-height:1.24;
  letter-spacing:-0.02em;
  color:var(--ng-ink);
}
.ng-v2 .ng-ro-sub__lede{ margin-top:10px; }

/* --- 6. .ng-ro-models — cloud / on-premise / API ------------------------- */
.ng-v2 .ng-ro-models{
  margin-top:40px;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:1px;
  background:var(--ng-hairline);
  border:1px solid var(--ng-hairline);
  border-radius:var(--ng-radius);
  overflow:hidden;
}
@media (min-width:768px){
  .ng-v2 .ng-ro-models{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
.ng-v2 .ng-ro-model{ background:var(--ng-surface); padding:24px; }
.ng-v2 .ng-ro-model__name.ng-ro-model__name{
  margin:0;
  font-family:var(--ng-font-label);
  font-weight:700; font-size:13px; line-height:1.5;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--ng-accent);
}
.ng-v2 .ng-ro-model__body{
  margin:10px 0 0;
  font-size:16px; line-height:1.6;
  color:var(--ng-muted);
}

/* --- 7. The closing band -------------------------------------------------- */
.ng-v2 .ng-ro-cta{ margin-top:0; }