/* Sektör ve özellik sayfaları (scripts/build-pages.py): site.css'in üstüne; tanıtım sayfasıyla aynı renk ve yazı dili. */
.crumbs { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center }
.crumbs a { text-decoration: none }
.crumbs a:hover { color: var(--ink); text-decoration: underline }
.crumbs span[aria-hidden] { opacity: .5 }

.c-hero { padding: 40px 0 56px; background: radial-gradient(1200px 500px at 85% -10%, #dbeafe 0%, rgba(219,234,254,0) 60%), linear-gradient(180deg, #eaf3ff 0%, var(--bg) 100%) }
.c-hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 48px; align-items: center }
.c-hero h1 { font-size: clamp(34px, 4.8vw, 58px); line-height: 1.04; margin: 16px 0 16px }
.c-hero h1 em { font-style: normal; background: linear-gradient(90deg, #2563eb, #0ea5e9); -webkit-background-clip: text; background-clip: text; color: transparent }
.c-hero .lead { font-size: 18.5px; max-width: 600px; color: var(--body) }
.c-hero .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow) }
.btn.ghost:hover { transform: translateY(-2px) }
.c-hero .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; padding: 0; list-style: none }
.c-hero .chips li { font: 600 12.5px Inter, sans-serif; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--line); color: var(--ink) }
.media { position: relative; border-radius: 26px; overflow: hidden; background: #0b1b3a; box-shadow: 0 30px 60px -30px rgba(11,27,58,.45), 0 0 0 1px rgba(11,27,58,.06) }
.media img, .media video { width: 100%; height: auto; display: block; aspect-ratio: 16 / 10; object-fit: cover }
.media.shot { background: #fff; padding: 10px }
.media.shot img { border-radius: 18px; object-fit: cover; object-position: top left }
.media figcaption { position: absolute; left: 14px; bottom: 14px; font: 600 12px Inter, sans-serif; color: #fff; background: rgba(11,27,58,.65); padding: 6px 10px; border-radius: 999px; backdrop-filter: blur(6px) }
.media.shot figcaption { color: var(--ink); background: rgba(255,255,255,.9); border: 1px solid var(--line) }

.c-sec { padding: 72px 0 }
.c-sec.alt { background: #fff; border-block: 1px solid var(--line) }
.c-sec h2 { font-size: clamp(28px, 3.4vw, 42px); line-height: 1.1; margin: 12px 0 14px; max-width: 820px }
.c-sec .intro { font-size: 17px; max-width: 720px }

.pains { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 32px }
.pain { padding: 24px; border-radius: 20px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow) }
.c-sec.alt .pain { background: var(--bg) }
.pain b { display: block; font: 800 13px/1 var(--display); color: #e11d48; letter-spacing: .06em; margin-bottom: 12px }
.pain h3 { font-size: 19px; margin-bottom: 8px }
.pain p { font-size: 15px }

.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 34px }
.block { position: relative; padding: 26px 26px 24px 26px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); overflow: hidden }
.block::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #3b82f6, #0ea5e9) }
.block h3 { font-size: 20px; margin-bottom: 8px }
.block p { font-size: 15.5px }
.block ul { margin: 10px 0 0; padding-left: 0; list-style: none; display: grid; gap: 6px }
.block li { position: relative; padding-left: 24px; font-size: 15px }
.block li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 50% 50%, #10b981 0 40%, #d1fae5 42%) }

.steps { counter-reset: s; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 32px; padding: 0; list-style: none }
.steps li { counter-increment: s; position: relative; padding: 58px 22px 22px; border-radius: 20px; background: linear-gradient(180deg, #fff, #f8fbff); border: 1px solid var(--line) }
.steps li::before { content: counter(s, decimal-leading-zero); position: absolute; top: 18px; left: 22px; font: 800 26px/1 var(--display); color: var(--blue); letter-spacing: -.03em }
.steps h3 { font-size: 17px; margin-bottom: 6px }
.steps p { font-size: 14.5px }

.note { margin-top: 26px; padding: 16px 18px; border-radius: 16px; background: var(--sky2); border: 1px solid var(--sky); font-size: 15px; color: var(--ink); max-width: 860px }

.faq { max-width: 860px; margin-top: 30px; display: grid; gap: 10px }
.faq details { border-radius: 16px; background: #fff; border: 1px solid var(--line); padding: 0 22px; box-shadow: var(--shadow) }
.faq summary { cursor: pointer; list-style: none; padding: 19px 0; color: var(--ink); font-weight: 600; display: flex; justify-content: space-between; gap: 16px }
.faq summary::-webkit-details-marker { display: none }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--blue); transition: transform .3s }
.faq details[open] summary::after { transform: rotate(45deg) }
.faq details p { padding: 0 0 19px }

.related { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 26px }
.related a { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 16px; background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); font-weight: 600; transition: transform .2s, box-shadow .2s }
.related a:hover { transform: translateY(-2px); box-shadow: var(--shadow) }
.related a::after { content: "→"; color: var(--blue) }
.related small { display: block; font-weight: 500; color: var(--muted); font-size: 13px; margin-top: 2px }

.hub { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; margin-top: 34px }
.hub a { display: grid; gap: 8px; padding: 24px; border-radius: 22px; background: #fff; border: 1px solid var(--line); box-shadow: var(--shadow); text-decoration: none; transition: transform .2s }
.hub a:hover { transform: translateY(-3px) }
.hub h2 { font-size: 21px; margin: 0 }
.hub p { font-size: 15px }
.hub span { color: var(--blue); font-weight: 600; font-size: 14.5px }

.cta { margin: 0 0 72px; padding: 0 }
.cta .box { display: grid; grid-template-columns: minmax(0, 1.4fr) auto; gap: 24px; align-items: center; padding: 40px; border-radius: 28px; background: radial-gradient(800px 300px at 90% 0%, rgba(59,130,246,.45), rgba(59,130,246,0) 70%), #0b1b3a; color: #cbd5e1 }
.cta h2 { color: #fff; font-size: clamp(26px, 3vw, 36px); line-height: 1.12; margin-bottom: 8px }
.cta p { font-size: 16px; max-width: 620px }
.cta .actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end }
.cta .btn.ghost { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.2); box-shadow: none }

@media (max-width: 960px) {
  .c-hero .wrap { grid-template-columns: 1fr; gap: 30px }
  .pains { grid-template-columns: 1fr }
  .blocks { grid-template-columns: 1fr }
  .cta .box { grid-template-columns: 1fr; padding: 28px }
  .cta .actions { justify-content: flex-start }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px }
  .c-sec { padding: 52px 0 }
  .c-hero { padding: 28px 0 40px }
  .c-hero .lead { font-size: 17px }
}

/* Dikey tanıtım videosu (1080x1920): telefon oranında çerçeve, "Sesli izle" */
.media.vertical { justify-self: center; width: min(100%, 340px); aspect-ratio: 9 / 16; border-radius: 34px; border: 8px solid #0b1b3a; background: #0b1b3a }
.media.vertical video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; border-radius: 26px }
.media.vertical figcaption { left: 50%; transform: translateX(-50%); bottom: 14px; white-space: nowrap }
.media .play { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 999px; border: 0; background: rgba(255,255,255,.94); color: var(--ink); font: 700 13px Inter, sans-serif; cursor: pointer; box-shadow: 0 6px 18px -6px rgba(11,27,58,.45) }
.media .play::before { content: ""; width: 0; height: 0; border-left: 9px solid var(--blue); border-top: 6px solid transparent; border-bottom: 6px solid transparent }
.media.shot.wide { margin-top: 26px; max-width: 980px }
@media (max-width: 960px) { .media.vertical { width: min(100%, 300px) } }