/* ============================================================
   Multistok.ai — Ortak bileşen stilleri (master layout)
   Kaynak: eski index.html içi paylaşılan <style> blokları
   Sayfaya özel stiller ilgili view'da @push('styles') ile gelir
   ============================================================ */

/* ── Temel / Layout / Bileşenler ── */
    /* ── Reset & Base ── */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html {
      scroll-behavior: smooth;
    }

    body {
      font-family: 'Inter', sans-serif;
      background: #f9f9f9;
      color: #1e2124;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    h1,
    h2,
    h3,
    h4 {
      font-family: 'Plus Jakarta Sans', sans-serif;
    }

    a {
      text-decoration: none;
    }

    /* ── Layout ── */
    /* Standart container: header/footer ve genel sayfalar bunu kullanir */
    .container {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 32px;
    }

    /* İçerik container'i: blog + iletişim içerik alanlari icin (header/footer'dan bagimsiz) */
    .container-content {
      max-width: 1160px;
      margin: 0 auto;
      padding: 0 32px;
    }

    .section {
      padding: 80px 0;
    }

    .section-sm {
      padding: 64px 0;
    }

    /* ── Nav ── */
    .nav-wrap {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 100;
      background: rgba(249, 249, 249, .85);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(0, 0, 0, .07);
    }

    .nav-inner {
      height: 62px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .nav-logo {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      font-size: 18px;
      color: #1e2124;
      letter-spacing: -.025em;
    }

    .nav-logo span {
      color: #BA0013;
    }

    .nav-links {
      display: flex;
      align-items: center;
      gap: 28px;
    }

    .nav-a {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #555;
      transition: color .15s;
      letter-spacing: -.01em;
    }

    .nav-a:hover {
      color: #1e2124;
    }

    /* ── Tag ── */
    .tag {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      background: #ebebeb;
      border-radius: 999px;
      padding: 5px 13px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      color: #444;
    }

    .tag .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #BA0013;
      flex-shrink: 0;
    }

    /* ── Buttons ── */
    .btn-dark {
      display: inline-block;
      background: #252a2e;
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 700;
      font-size: 13px;
      border-radius: 999px;
      padding: 11px 24px;
      transition: background .18s, transform .15s;
      letter-spacing: -.01em;
    }

    .btn-dark:hover {
      background: #363c42;
      transform: scale(.97);
    }

    .btn-red {
      display: inline-block;
      background: #BA0013;
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 700;
      font-size: 13px;
      border-radius: 999px;
      padding: 11px 24px;
      transition: background .18s, transform .15s;
      letter-spacing: -.01em;
    }

    .btn-red:hover {
      background: #D4001A;
      transform: scale(.97);
    }

    .btn-ghost {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: transparent;
      color: #1e2124;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 700;
      font-size: 13px;
      border-radius: 999px;
      padding: 10px 22px;
      border: 1.5px solid #ccc;
      transition: border-color .18s, color .18s;
      letter-spacing: -.01em;
    }

    .btn-ghost:hover {
      border-color: #1e2124;
    }

    .btn-ghost-white {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: rgba(255, 255, 255, .12);
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 700;
      font-size: 13px;
      border-radius: 999px;
      padding: 10px 22px;
      border: 1.5px solid rgba(255, 255, 255, .25);
      transition: background .18s;
    }

    .btn-ghost-white:hover {
      background: rgba(255, 255, 255, .2);
    }

    /* ── Cards ── */
    .card {
      background: #fff;
      border-radius: 16px;
      border: 1px solid #e8e8e8;
    }

    /* İki istatistik kutusunu eşit yükseklikte tutar:
       hücreler dikey ortalanır ve ikisi de aynı min-height alır. */
    .stats-grid>div {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 156px;
    }

    .card-dark {
      background: #252a2e;
      border-radius: 16px;
      color: #fff;
    }

    .card-red {
      background: #BA0013;
      border-radius: 16px;
      color: #fff;
    }

    .card-muted {
      background: #f0efef;
      border-radius: 16px;
    }

    .card-shadow {
      box-shadow: 0 2px 16px rgba(0, 0, 0, .06);
    }

    .card-hover {
      transition: transform .22s, box-shadow .22s;
    }

    .card-hover:hover {
      transform: translateY(-3px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
    }

    /* ── Material Symbols ── */
    .material-symbols-outlined {
      font-family: 'Material Symbols Outlined';
      font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
      vertical-align: middle;
      line-height: 1;
    }

    .ms-f {
      font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    }

    /* ── Reveal ── */
    .reveal {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s ease, transform .6s ease;
    }

    .reveal.in {
      opacity: 1;
      transform: none;
    }

    /* ── Marquee ── */
    @keyframes mqLeft {
      to {
        transform: translateX(-50%);
      }
    }

    .mq-inner {
      display: flex;
      gap: 48px;
      animation: mqLeft 28s linear infinite;
      width: max-content;
    }

    .mq-wrap {
      overflow: hidden;
      mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
    }

    /* ── Integration pill ── */
    .int-pill {
      background: #fff;
      border: 1px solid #e8e8e8;
      border-radius: 12px;
      padding: 14px 18px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      text-align: center;
      transition: border-color .18s, box-shadow .18s;
    }

    .int-pill:hover {
      border-color: #ccc;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .07);
    }

    .int-icon {
      width: 42px;
      height: 42px;
      border-radius: 9px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* ── Comparison table ── */
    .cmp th {
      padding: 18px 22px;
      text-align: left;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: #888;
      background: #f6f5f5;
      border-bottom: 2px solid #efefef;
    }

    .cmp th.hl {
      color: #BA0013;
    }

    .cmp td {
      padding: 16px 22px;
      font-size: 13px;
      border-top: 1px solid #f0f0f0;
      vertical-align: middle;
    }

    .cmp td.fn {
      font-weight: 500;
      color: #1e2124;
    }

    .cmp td.hl {
      background: rgba(186, 0, 19, .03);
    }

    .cmp tr:hover td {
      background: #fafafa;
    }

    .cmp tr:hover td.hl {
      background: rgba(186, 0, 19, .05);
    }

    .chk {
      color: #BA0013;
      font-size: 17px;
    }

    .dash {
      color: #d0d0d0;
      font-size: 17px;
    }

    .cmp-cat td {
      padding: 12px 22px 6px;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .12em;
      text-transform: uppercase;
      color: #BA0013;
      background: #fafafa;
      border-top: 2px solid #efefef !important;
    }

    /* ── Pricing ── */
    .price-badge {
      position: absolute;
      top: -12px;
      left: 50%;
      transform: translateX(-50%);
      background: #BA0013;
      color: #fff;
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: .1em;
      text-transform: uppercase;
      padding: 4px 14px;
      border-radius: 999px;
      white-space: nowrap;
    }

    /* ── FAQ ── */
    details summary {
      cursor: pointer;
      list-style: none;
    }

    details summary::-webkit-details-marker {
      display: none;
    }

    .faq-icon {
      transition: transform .2s;
    }

    details[open] .faq-icon {
      transform: rotate(45deg);
    }

    /* ── Code ── */
    .code-block {
      background: #2a2f34;
      border-radius: 12px;
      padding: 22px 24px;
      font-family: 'SF Mono', 'Fira Code', monospace;
      font-size: 12px;
      line-height: 2;
      overflow-x: auto;
    }

    .ck {
      color: #a8d5a2;
    }

    .cv {
      color: #f8f8f2;
    }

    .cs {
      color: #ff7b7b;
    }

    .cn {
      color: #bd93f9;
    }

    /* ── ROI calc ── */
    .roi-slider {
      -webkit-appearance: none;
      appearance: none;
      width: 100%;
      height: 4px;
      background: #e0e0e0;
      border-radius: 4px;
      outline: none;
    }

    .roi-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #BA0013;
      cursor: pointer;
      box-shadow: 0 2px 8px rgba(186, 0, 19, .3);
    }

    .roi-slider::-moz-range-thumb {
      width: 20px;
      height: 20px;
      border-radius: 50%;
      background: #BA0013;
      cursor: pointer;
      border: none;
    }

    /* ── Section header ── */
    .sh {
      font-family: 'Plus Jakarta Sans', sans-serif;
      font-weight: 800;
      letter-spacing: -.03em;
      line-height: 1.05;
      color: #1e2124;
    }

    #moduller {
      scroll-margin-top: 60px;
    }

/* ── Ortak Navigasyon (birleşik) ── */
  /* ── Unified navigation (overrides) ── */
  .nav-wrap{position:fixed;top:0;left:0;width:100%;z-index:300;background:rgba(249,249,249,.82);
    backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
    border-bottom:1px solid rgba(0,0,0,.06);}
  .nav-inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:24px;}
  .nav-logo{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:19px;color:#1e2124;
    letter-spacing:-.025em;flex-shrink:0;}
  .nav-logo span{color:#BA0013;}
  .nav-links{display:flex;align-items:center;gap:30px;}
  .nav-a{font-family:'Plus Jakarta Sans',sans-serif;font-size:13.5px;font-weight:600;color:#5a5f63;
    transition:color .15s;letter-spacing:-.01em;white-space:nowrap;}
  .nav-a:hover{color:#1e2124;}
  .nav-a.active{color:#BA0013;}
  .nav-cta{display:inline-block;background:#BA0013 !important;color:#fff !important;font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:700;font-size:13px;border-radius:999px;padding:11px 22px;transition:background .18s,transform .15s;
    letter-spacing:-.01em;flex-shrink:0;white-space:nowrap;}
  .nav-cta:hover{background:#D4001A !important;transform:translateY(-1px);}
  .nav-cta-mobile{display:none;}
  .nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;
    border:none;background:transparent;cursor:pointer;padding:9px;border-radius:10px;margin-left:auto;}
  .nav-toggle span{display:block;height:2px;width:22px;background:#1e2124;border-radius:2px;
    transition:transform .25s ease,opacity .2s ease;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  @media (max-width:940px){
    .nav-links{position:fixed;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
      background:rgba(249,249,249,.985);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
      border-bottom:1px solid rgba(0,0,0,.08);padding:6px 0 14px;max-height:0;overflow:hidden;
      transition:max-height .32s ease;box-shadow:0 18px 40px rgba(0,0,0,.06);}
    .nav-links.open{max-height:520px;}
    .nav-a{padding:14px 32px;font-size:15px;border-bottom:1px solid rgba(0,0,0,.04);}
    .nav-cta{display:none;}
    .nav-cta-mobile{display:block;margin:14px 32px 0;text-align:center;}
    .nav-toggle{display:flex;}
  }

/* ── Responsive yardımcılar ── */
  /* ── Responsive layout (mobile) ── */
  @media (max-width:880px){
    .hero-grid{grid-template-columns:1fr!important;gap:40px!important;}
    .hero-mock{max-width:480px;margin:0 auto;}
    .hero-float-l{left:-6px!important;}
    .hero-float-r{right:-4px!important;}
    .stats-grid{grid-template-columns:repeat(2,1fr)!important;}
    .stats-grid>div{border-right:none!important;border-bottom:1px solid #f0f0f0;}
  }
  @media (max-width:760px){
    .container{padding:0 22px!important;}
    .container-content{padding:0 22px!important;}
    [style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr!important;}
    [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr!important;}
    [style*="grid-template-columns:repeat(3,1fr)"]{grid-template-columns:1fr!important;}
    [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}
    [style*="grid-template-columns:repeat(5,1fr)"]{grid-template-columns:repeat(2,1fr)!important;}
    [style*="grid-template-columns:repeat(6,1fr)"]{grid-template-columns:repeat(3,1fr)!important;}
    [style*="2.5fr 1fr 1fr 1fr 1fr"]{grid-template-columns:1fr 1fr!important;gap:28px!important;}
  }
  @media (max-width:520px){
    .hero-float{display:none!important;}
    .stats-grid{grid-template-columns:1fr!important;}
    [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr!important;}
    [style*="2.5fr 1fr 1fr 1fr 1fr"]{grid-template-columns:1fr!important;}
  }