/* ───────────────────────────────────────────────────────────
   oigoworks · Çözüm sayfaları (otel yazılımı, transfer, QR sipariş,
   rezervasyon, kurumsal web). oigo-product.css'in üzerine yüklenir.
   Sayfa body'de --accent, --accent-tx, --accent-soft, --accent-line tanımlar.
─────────────────────────────────────────────────────────── */

:root{ --c-web: #e8473a; --c-web-tx: #fff; --c-qr: #0f9d76; --c-qr-tx: #fff; --c-res: #1f7ed1; --c-res-tx: #fff; }

/* in-page anchors land below the sticky nav */
main [id]{ scroll-margin-top: 76px; }

/* breadcrumb */
.lp-crumbs{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); padding-top: 22px; }
.lp-crumbs ol{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap: 6px; }
.lp-crumbs li+li::before{ content:"/"; margin-right: 6px; color: var(--ink-3); }
.lp-crumbs a{ color: var(--ink-2); } .lp-crumbs a:hover{ color: var(--accent); }

/* HERO */
.lp-hero{ padding: 56px 0 48px; }
.lp-hero .top{ text-align:center; }
.lp-hero .badge{ display:inline-flex; align-items:center; gap: 8px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); background: var(--accent-soft); border:1px solid var(--accent-line); padding: 6px 13px; border-radius: 999px; }
.lp-hero h1{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.035em; font-size: 68px; line-height: 1.02; margin: 22px auto 0; max-width: 940px; padding-bottom: 0.06em; }
.lp-hero h1 em{ font-style:normal; color: var(--accent); }
.lp-hero .lead{ margin: 24px auto 0; max-width: 640px; }
.lp-hero .row{ display:flex; gap: 12px; justify-content:center; flex-wrap:wrap; margin-top: 30px; }
.lp-hero .micro{ margin-top: 16px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); }

/* panel mock */
.pm{ max-width: 1000px; margin: 52px auto 0; background: var(--paper); border:1px solid var(--line); border-radius: 18px; overflow:hidden; box-shadow: 0 40px 80px -38px rgba(0,0,0,0.3); text-align:left; }
.pm .fh{ display:flex; align-items:center; gap: 10px; padding: 13px 16px; border-bottom:1px solid var(--line); background: var(--paper-2); }
.pm .fh .dots{ display:flex; gap:6px; } .pm .fh .dots i{ width:11px;height:11px;border-radius:999px;display:block; }
.pm .fh .path{ font-family: var(--f-mono); font-size: 12px; color: var(--ink-3); margin-left: 6px; }
.pm .fh .pill{ margin-left:auto; font-family: var(--f-mono); font-size: 11px; color: var(--accent); background: var(--accent-soft); border:1px solid var(--accent-line); border-radius: 999px; padding: 3px 10px; }
.pm .body{ display:grid; grid-template-columns: 190px 1fr; min-height: 320px; }
.pm .side{ border-right:1px solid var(--line); background: var(--paper-2); padding: 14px 10px; display:flex; flex-direction:column; gap: 3px; }
.pm .side span{ font-size: 13px; color: var(--ink-2); padding: 7px 10px; border-radius: 8px; }
.pm .side span.on{ background: var(--accent); color: var(--accent-tx); font-weight: 500; }
.pm .main{ padding: 16px; display:flex; flex-direction:column; gap: 14px; }
.pm .kpis{ display:grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.pm .kpi{ border:1px solid var(--line); border-radius: 12px; padding: 12px; }
.pm .kpi small{ display:block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.pm .kpi b{ display:block; font-family: var(--f-display); font-size: 22px; font-weight: 600; margin-top: 4px; }
.pm .kpi b em{ font-style:normal; color: var(--accent); font-size: 13px; margin-left: 4px; }
.pm .rows{ border:1px solid var(--line); border-radius: 12px; overflow:hidden; }
.pm .rw{ display:grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 10px; align-items:center; padding: 10px 14px; font-size: 13px; border-top:1px solid var(--line); }
.pm .rw:first-child{ border-top:0; background: var(--paper-2); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pm .rw b{ font-weight: 600; } .pm .rw span{ color: var(--ink-2); }
.pm .tag{ font-family: var(--f-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 3px 9px; background: var(--accent-soft); color: var(--accent); border:1px solid var(--accent-line); white-space:nowrap; }
.pm .tag.mut{ background: var(--paper-2); color: var(--ink-3); border-color: var(--line); }

/* PROOF strip */
.lp-proof{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); background: var(--paper-2); }
.lp-proof .wrap{ display:flex; justify-content:space-between; gap: 24px; flex-wrap:wrap; padding-top: 24px; padding-bottom: 24px; font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.lp-proof b{ font-family: var(--f-display); color: var(--ink); }

/* section heads */
.shead h2{ font-family: var(--f-display); font-weight: 600; letter-spacing: -0.025em; font-size: 46px; line-height: 1.04; margin: 10px 0 0; }
.shead.center{ text-align:center; } .shead.center p{ margin-left:auto; margin-right:auto; }
.shead p{ max-width: 600px; margin: 14px 0 0; color: var(--ink-3); font-size: 17px; }

/* intro prose (keyword-rich explanatory text) */
.lp-prose{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; }
.lp-prose .txt p{ margin: 0 0 16px; color: var(--ink-2); font-size: 17px; line-height: 1.7; }
.lp-prose .txt p:last-child{ margin-bottom: 0; }
.lp-prose .txt strong{ color: var(--ink); font-weight: 600; }

/* FEATURES */
.lp-feats{ display:grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 48px; }
.lp-feats.two{ grid-template-columns: 1fr 1fr; }
.fcard{ border:1px solid var(--line); border-radius: 18px; padding: 28px; background: var(--paper); }
.fcard .ic{ width: 44px; height: 44px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); display:flex; align-items:center; justify-content:center; font-size: 20px; font-family: var(--f-display); font-weight: 700; }
.fcard h3{ font-family: var(--f-display); font-weight: 600; font-size: 22px; letter-spacing: -0.02em; margin: 18px 0 8px; }
.fcard p{ margin: 0; color: var(--ink-2); line-height: 1.6; font-size: 15px; }
.fcard .pts{ list-style:none; padding:0; margin: 16px 0 0; display:flex; flex-direction:column; gap: 8px; }
.fcard .pts li{ font-size: 14px; color: var(--ink-2); padding-left: 20px; position:relative; line-height: 1.45; }
.fcard .pts li::before{ content:"→"; position:absolute; left:0; color: var(--accent); }

/* dark band */
.lp-band{ background: var(--ink); color: var(--paper); }
.lp-band .grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items:center; }
.lp-band h2{ font-family: var(--f-display); font-weight: 600; font-size: 42px; letter-spacing: -0.025em; line-height: 1.06; margin: 10px 0 0; }
.lp-band p{ color: rgba(255,255,255,0.65); font-size: 17px; line-height: 1.6; margin: 16px 0 0; }
.lp-band .badges{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.lp-band .sb{ border:1px solid rgba(255,255,255,0.14); border-radius: 13px; padding: 18px 20px; }
.lp-band .sb b{ font-family: var(--f-display); font-weight: 600; font-size: 17px; display:flex; align-items:center; gap: 8px; }
.lp-band .sb b .k{ color: var(--accent); }
.lp-band .sb span{ color: rgba(255,255,255,0.6); font-size: 13px; display:block; margin-top: 6px; line-height: 1.5; }

/* who it is for */
.lp-who{ display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 40px; }
.lp-who.three{ grid-template-columns: repeat(3,1fr); }
.lp-who div{ border:1px solid var(--line); border-radius: 14px; padding: 20px; background: var(--paper-2); }
.lp-who b{ font-family: var(--f-display); font-weight: 600; font-size: 17px; display:block; }
.lp-who span{ font-size: 13.5px; color: var(--ink-3); display:block; margin-top: 6px; line-height: 1.5; }

/* STEPS */
.lp-steps .grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 16px; margin-top: 44px; }
.lp-steps.three .grid{ grid-template-columns: repeat(3,1fr); }
.stp{ border:1px solid var(--line); border-radius: 16px; padding: 26px; }
.stp .sn{ font-family: var(--f-display); font-weight: 600; font-size: 30px; color: var(--accent); }
.stp h3{ font-family: var(--f-display); font-weight: 600; font-size: 19px; margin: 10px 0 8px; }
.stp p{ margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55; }

/* FAQ */
.lp-faq .grid{ display:grid; grid-template-columns: 0.8fr 1.2fr; gap: 48px; margin-top: 36px; }
.faqlist details{ border-bottom:1px solid var(--line); padding: 18px 0; }
.faqlist details[open] summary{ color: var(--accent); }
.faqlist summary{ font-family: var(--f-display); font-weight:600; font-size: 19px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faqlist summary::-webkit-details-marker{ display:none; }
.faqlist summary::after{ content:"+"; color: var(--accent); flex-shrink:0; } .faqlist details[open] summary::after{ content:"–"; }
.faqlist p{ margin: 12px 0 0; color: var(--ink-2); line-height: 1.65; }

/* related solutions */
.lp-related{ border-top:1px solid var(--line); }
.lp-related .grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 28px; }
.lp-related a{ border:1px solid var(--line); border-radius: 14px; padding: 18px 20px; display:block; transition: border-color .15s, transform .12s; }
.lp-related a:hover{ border-color: var(--accent-line); transform: translateY(-2px); }
.lp-related a b{ font-family: var(--f-display); font-weight: 600; font-size: 17px; display:block; }
.lp-related a span{ font-size: 13px; color: var(--ink-3); display:block; margin-top: 6px; line-height: 1.45; }
.lp-related a i{ font-style:normal; color: var(--accent); font-family: var(--f-mono); font-size: 12px; display:block; margin-top: 10px; }

/* CTA */
.lp-cta{ text-align:center; padding: 104px 0; }
.lp-cta h2{ font-family: var(--f-display); font-weight:600; font-size: 58px; letter-spacing: -0.03em; line-height: 1.0; margin: 0 0 16px; }
.lp-cta h2 em{ font-style:normal; color: var(--accent); }
.lp-cta p{ color: var(--ink-3); font-size: 18px; max-width: 520px; margin: 0 auto 28px; }
.lp-cta .row{ display:flex; gap: 12px; justify-content:center; flex-wrap:wrap; }

@media (max-width: 960px){
  .lp-hero h1{ font-size: 48px; } .shead h2, .lp-band h2{ font-size: 34px; }
  .pm .body{ grid-template-columns: 1fr; } .pm .side{ flex-direction:row; flex-wrap:wrap; border-right:0; border-bottom:1px solid var(--line); }
  .pm .kpis{ grid-template-columns: 1fr 1fr; }
  .lp-feats, .lp-feats.two, .lp-band .grid, .lp-faq .grid, .lp-prose{ grid-template-columns: 1fr; gap: 24px; }
  .lp-who, .lp-who.three, .lp-related .grid, .lp-steps .grid, .lp-steps.three .grid{ grid-template-columns: 1fr 1fr; }
  .lp-cta h2{ font-size: 40px; }
}
@media (max-width: 560px){
  .wrap{ padding: 0 16px; }
  .lp-hero h1{ font-size: 36px; }
  .pm .fh .path{ display:none; } .pm .side{ display:none; }
  .pm .rw{ grid-template-columns: 1.4fr auto; } .pm .rw > :nth-child(2), .pm .rw > :nth-child(3){ display:none; }
  .lp-who, .lp-who.three, .lp-related .grid, .lp-steps .grid, .lp-steps.three .grid, .lp-band .badges{ grid-template-columns: 1fr; }
}