audio {
  border: none;
  background-color: transparent;
  box-shadow: none;
  outline: none;
}



.tts-section {
  background: linear-gradient(135deg, #f8f9fa, #e9ecef);
  border-radius: 2rem;
  padding: 3rem 0;
  box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.1);
}

.tts-card {
  border: 1px solid #e0e0e0;
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 0.5rem 1.25rem rgba(0,0,0,0.05);
  transition: transform 0.2s ease;
}

.tts-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0.75rem 1.5rem rgba(0,0,0,0.1);
}


/* buttons start */


.sesmate-btn {
  background-color: transparent;
  color: #a020f0;
  border: 2px solid #a020f0;
  border-radius: 50px;
  padding: 0.4rem 1.1rem;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: all 0.3s ease;
  text-decoration: none;
  box-shadow: none;
}

.sesmate-btn i {
  font-size: 1.1rem;
  opacity: 0.75;
}

.sesmate-btn:hover {
  background-color: #a020f0;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(160, 32, 240, 0.2);
}

.sesmate-btn:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(160, 32, 240, 0.25);
}

form .form-control {
  font-size: 1rem;
  padding: 0.75rem 1rem;
  border-radius: 12px;
}

.download-cta-btn {
  background-color: #a020f0;
  color: #fff;
  padding: 0.85rem 2.2rem;
  font-weight: 600;
  font-size: 1.15rem;
  border: none;
  border-radius: 50px;
  box-shadow: 0 6px 16px rgba(160, 32, 240, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-block;
  text-decoration: none;
}

.download-cta-btn:hover {
  background-color: #8c1dc5;
  transform: translateY(-2px);
}


.primary-btn {
  background-color: #a020f0;
  color: #fff;
  font-weight: 600;
  font-size: 1.05rem;
  border: none;
  border-radius: 50px;
  box-shadow: 0 4px 12px rgba(160, 32, 240, 0.3);
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-top: 1rem;
  height: 2.5rem;
  text-decoration: none;
}

.primary-btn:hover {
  background-color: #8c1dc5;
  transform: translateY(-1px);
}

.btn-outline-dark {
  border-radius: 50px;
  padding: 0.5rem 1.5rem;
  font-weight: 500;
  font-size: 0.95rem;
}


.secondary-btn {
  background-color: #a020f0;
  color: #fff;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  font-size: 0.95rem;
  border: none;
  border-radius: 6px;
  transition: background-color 0.2s ease;
  text-decoration: none;
}

.secondary-btn:hover {
  background-color: #8c1dc5;
}

.secondary-reverse-btn {
  background-color: #fff;
  color: #a020f0;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  font-size: 0.95rem;
  border: 1px solid #a020f0;
  border-radius: 6px;
  transition: all 0.2s ease;
  text-decoration: none;
}

.secondary-reverse-btn:hover {
  background-color: #f3e8fb;
  color: #8c1dc5;
  border-color: #8c1dc5;
}

/* toolbar buttons – reusable across apps */
.toolbar-btn {
  background-color: #fff;
  color: #6b7280;             /* gray-500 */
  border: 1px solid #e5e7eb;  /* gray-200 */
  border-radius: 50px;
  padding: 0.45rem 1.1rem;
  font-weight: 500;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.toolbar-btn:hover {
  background-color: #f9fafb;  /* gray-50 */
  color: #374151;             /* gray-700 */
  border-color: #d1d5db;      /* gray-300 */
}

/* accent toolbar button (primary tint, lighter than .primary-btn) */
.toolbar-accent-btn {
  background-color: #f3e8fb;  /* light purple tint */
  color: #7c3aed;             /* purple-600 */
  border: 1px solid #e9d5ff;  /* purple-200 */
  border-radius: 50px;
  padding: 0.45rem 1.1rem;
  font-weight: 600;
  font-size: 0.95rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.toolbar-accent-btn:hover {
  background-color: #e9d5ff;  /* purple-200 */
  color: #6d28d9;             /* purple-700 */
  border-color: #c4b5fd;      /* purple-300 */
}

/* buttons end */


/* Coming soon section */
section.bg-light.text-center h2 {
  font-weight: 700;
}

.cta-section {
  background: linear-gradient(135deg, #a020f0, #8432c8);
  border-radius: 40px;
  overflow: hidden;
  margin: 40px auto;
}

.cta-box {
  max-width: 700px;
}

.img-index {
  border-radius: 20px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
}

.img-index:hover {
  transform: scale(1.05);
}

.coming-soon-box {
  max-width: 800px;
  border: 1px solid #e0dff0;
  background-color: #ffffff;
  transition: all 0.3s ease;
}

.coming-soon-box:hover {
  box-shadow: 0 10px 30px rgba(160, 32, 240, 0.15);
  transform: translateY(-5px);
}

.cta-btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  font-size: 1.25rem;
  font-weight: 600;
  border-radius: 2rem;
  color: #fff;
  background: linear-gradient(135deg, #ff6b6b, #f06595);
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.25);
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

.cta-btn:hover {
  background: linear-gradient(135deg, #f06595, #ff6b6b);
  box-shadow: 0 0.75rem 1.25rem rgba(0,0,0,0.35);
  transform: translateY(-2px);
}


.google-login-btn {
  background-color: #fff;
  color: #3c4043;
  padding: 0.75rem 2rem;
  font-weight: 500;
  font-size: 1.1rem;
  border: 1px solid #dadce0;
  border-radius: 50px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.google-login-btn:hover {
  background-color: #f7f8f8;
  transform: translateY(-2px);
  color: #202124;
}

.google-login-btn i {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}


/* SesMate Tooltip */
.sesmate-tip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.sesmate-tip .tip-dot {
  width: 18px;
  height: 18px;
  line-height: 18px;
  display: inline-block;
  text-align: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  background: #a020f0;
  color: #fff;
  cursor: help;
}

.sesmate-tip .tip-bubble {
  position: absolute;
  z-index: 9999;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  min-width: 220px;
  max-width: 360px;
  padding: .6rem .75rem;
  background: #fff;
  color: #301047;
  border: 1px solid #e9d5ff;
  border-radius: 10px;
  box-shadow: 0 8px 26px rgba(160,32,240,.15);
  font-size: .9rem;
  line-height: 1.35;
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  white-space: normal;
}

.sesmate-tip:hover .tip-bubble,
.sesmate-tip:focus-within .tip-bubble {
  opacity: 1;
  transform: translateX(-50%) translateY(4px);
}



/* Footer */
.sesmate-footer { background: #fff; color: #343a40; border-top: 1px solid #eceff3; }
.sesmate-footer .footer-topbar { background: #0f172a; }           /* brand dark */
.sesmate-footer .footer-title { font-weight: 700; font-size: .95rem; margin-bottom: .5rem; }
.sesmate-footer .footer-list { list-style: none; padding: 0; margin: 0; }
.sesmate-footer .footer-list li { margin: .4rem 0; }
.sesmate-footer .footer-list a { text-decoration: none; color: #6c757d; }
.sesmate-footer .footer-list a:hover { color: #0ea5e9; }           /* brand accent */
.sesmate-footer .social-link { display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:999px; background:#f3f5f7; text-decoration:none; }
.sesmate-footer .social-link:hover { background:#e6edf5; }
.opacity-90 { opacity:.9; }



/* INDEX */

/* === Elite SaaS — Light Design Tokens === */
:root{
  /* Palette (light) */
  --bg:#ffffff;
  --surface:#f8f9fc;           /* açık yüzey */
  --card:#ffffff;
  --text:#0c1020;
  --muted:#647089;
  --line: rgba(18,22,32,.08);  /* kenar çizgileri */

  /* Brand */
  --accent:#7c3aed;            /* mor (marka) */
  --accent-2:#5b21b6;          /* mor koyu */
  --ring: 0 0 0 .22rem rgba(124,58,237,.25);

  /* Type scale */
  --h1: clamp(36px, 5.8vw, 64px);
  --h2: clamp(18px, 2.4vw, 24px);
  --lead: clamp(16px, 2.1vw, 20px);

  /* Radii & shadow */
  --r-lg: 18px;
  --r-xl: 24px;
  --shadow-1: 0 6px 18px rgba(12,16,32,.06);
  --shadow-2: 0 16px 48px rgba(12,16,32,.08);
}

/* Global */
body{ background:var(--bg); color:var(--text); }

/* ---------- Navbar (glass-light) ---------- */
.nav-elite{
  background: rgba(255,255,255,.75) !important;
  backdrop-filter: saturate(120%) blur(14px);
  border-bottom: 1px solid var(--line);
  box-shadow: none !important;
}
.nav-elite .navbar-brand img{ filter:none; opacity:.95; }
.nav-elite .navbar-nav .nav-link{ color:var(--text); font-weight:600; }
.nav-elite .dropdown-menu{
  border:1px solid var(--line); border-radius:12px; box-shadow: var(--shadow-1);
}

/* Navbar action pills (mevcut .sesmate-btn’ı “elit”e çeviriyoruz) */
.sesmate-btn{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem 1rem;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff; color:var(--text); text-decoration:none;
  font-weight:700;
  transition:.2s ease;
}
.sesmate-btn:hover{ background:#f3f4f8; }
.sesmate-btn.primary{
  border-color:transparent;
  background: linear-gradient(180deg,var(--accent),var(--accent-2));
  color:#fff;
  box-shadow: var(--shadow-2);
}
.sesmate-btn.primary:hover{ filter:brightness(1.02); transform: translateY(-1px); }
.sesmate-btn:focus-visible{ outline:none; box-shadow: var(--ring); }



/* ---------- Footer (clean-light) ---------- */
.footer-elite{
  background: var(--surface);
  border-top:1px solid var(--line);
}
.footer-elite .footer-title{
  font-weight:800; font-size: .95rem; text-transform:uppercase; letter-spacing:.4px; color:#30374b; margin-bottom:.5rem;
}
.footer-elite .footer-list{ list-style:none; padding:0; margin:0; }
.footer-elite .footer-list li a{
  display:inline-block; padding:.25rem 0; color:#404a62; text-decoration:none; font-weight:600;
}
.footer-elite .footer-list li a:hover{ color:var(--accent-2); }
.footer-elite .social-link{
  width:34px; height:34px; display:inline-grid; place-items:center;
  border-radius:999px; background:#fff; border:1px solid var(--line); color:#222;
}
.footer-elite .social-link:hover{ background:#f3f4f8; }

/* Utilities */
.container-narrow{ max-width:1180px; margin:0 auto; padding:0 24px; }
.small-muted{ color:var(--muted) !important; }

/* === Sections: spacing & headings === */
.section{ padding: clamp(44px, 7vw, 88px) 0; }
.section-head{ margin-bottom: clamp(20px, 3.2vw, 36px); }
.section-eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.34rem .7rem; border-radius:999px;
  background:#fff; border:1px solid var(--line);
  color:#2a3350; font-weight:800; font-size:.78rem; letter-spacing:.3px;
}
.section-title{ font-size: clamp(26px, 4vw, 40px); line-height:1.1; font-weight:900; letter-spacing:-.25px; }
.section-lead{ color:var(--muted); max-width: 72ch; }

/* === How it works === */
.hiw-grid{ display:grid; gap:16px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.hiw-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px; box-shadow: var(--shadow-1); height:100%;
}
.hiw-card .step{ width:36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background: linear-gradient(180deg, var(--accent), var(--accent-2)); color:#fff; font-weight:800;
}
.hiw-card h4{ font-weight:800; margin:12px 0 6px; font-size:1.05rem; }
.hiw-card p{ color:var(--muted); margin:0; }

/* === Multispeaker === */
.ms-wrap{ display:grid; gap:24px; grid-template-columns: 1.1fr .9fr; align-items:center; }
.ms-badge{ background:rgba(124,58,237,.12); color:#3b2a77; border:1px solid rgba(124,58,237,.32);
  padding:.34rem .6rem; border-radius:999px; font-weight:800; font-size:.78rem; letter-spacing:.3px; }
.ms-list{ list-style:none; padding:0; margin:14px 0 0; }
.ms-list li{ display:flex; gap:.6rem; align-items:flex-start; margin-bottom:8px; color:#2a3350; }
.ms-frame{ background:#fff; border:1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-2); overflow:hidden; }
.ms-frame video, .ms-frame img{ width:100%; height:100%; object-fit: cover; }

/* === Video proof === */
.proof-grid{ display:grid; gap:18px; grid-template-columns: 1.2fr .8fr; }
.proof-side{ display:grid; gap:18px; }
.proof-card{
  background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow-1);
  overflow:hidden;
}
.proof-card header{ padding:12px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; gap:.6rem; }
.proof-card header .dot{ width:8px; height:8px; border-radius:999px; background:var(--accent); }
.proof-card video, .proof-card img{ width:100%; display:block; }

/* === Pricing === */
.pricing-grid{ display:grid; gap:20px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.price-card{
  background:#fff; border:1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-2); overflow:hidden;
  display:flex; flex-direction:column;
}
.price-head{ padding:20px 22px; border-bottom:1px solid var(--line); }
.price-name{ font-weight:900; font-size:1.1rem; }
.price-badge{ margin-left:8px; background:#f2e9ff; color:#5b21b6; border:1px solid #eadbff; font-weight:800; padding:.2rem .5rem; border-radius:999px; font-size:.72rem; }
.price-value{ font-size:2rem; font-weight:900; letter-spacing:-.3px; }
.price-body{ padding:18px 22px; flex:1; }
.price-body ul{ list-style:none; padding:0; margin:0; }
.price-body li{ display:flex; gap:.6rem; align-items:flex-start; padding:.35rem 0; color:#2c3550; }
.price-foot{ padding:18px 22px; border-top:1px solid var(--line); }

/* === Testimonials === */
.testi-grid{ display:grid; gap:16px; grid-template-columns: repeat(3,minmax(0,1fr)); }
.testi{ background:#fff; border:1px solid var(--line); border-radius:16px; box-shadow: var(--shadow-1); padding:18px; }
.testi p{ margin:0 0 10px; color:#2c3550; }
.testi small{ color:var(--muted); font-weight:700; }

/* === FAQ === */
.faq-acc{ display:grid; gap:10px; }
.faq-item{ background:#fff; border:1px solid var(--line); border-radius:14px; box-shadow: var(--shadow-1); overflow:hidden; }
.faq-q{ width:100%; text-align:left; background:#fff; color:#1e2438; padding:14px 16px; border:0; font-weight:800; }
.faq-a{ padding:0 16px 16px; color:#55607a; display:none; }
.faq-item[open] .faq-a{ display:block; }

/* === Bottom CTA === */
.bottom-cta{
  background: radial-gradient(900px 420px at 15% -20%, rgba(124,58,237,.12), transparent 60%),
              radial-gradient(800px 420px at 95% 0%, rgba(124,58,237,.1), transparent 60%),
              var(--surface);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.bottom-cta .cta-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow: var(--shadow-2);
  padding: clamp(20px, 3vw, 28px);
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.bottom-cta h3{ font-size: clamp(22px, 3.4vw, 30px); margin:0; }
.bottom-cta p{ margin:0; color:var(--muted); }

/* === Responsive === */
@media (max-width: 1199.98px){
  .hiw-grid{ grid-template-columns: repeat(2,minmax(0,1fr)); }
  .proof-grid{ grid-template-columns: 1fr; }
  .pricing-grid{ grid-template-columns: 1fr; }
  .testi-grid{ grid-template-columns: 1fr 1fr; }
  .ms-wrap{ grid-template-columns: 1fr; }
}
@media (max-width: 575.98px){
  .hiw-grid{ grid-template-columns: 1fr; }
  .testi-grid{ grid-template-columns: 1fr; }
}
/* NAV: daha belirgin arka plan + alt çizgi + yumuşak gölge */
.nav-elite{
  background: rgba(255,255,255,.92) !important;   /* biraz daha opak */
  backdrop-filter: saturate(120%) blur(14px);
  border-bottom: 1px solid rgba(12,16,32,.10);    /* belirgin ayırıcı çizgi */
  box-shadow: 0 10px 30px rgba(12,16,32,.06);     /* çok hafif gölge */
}

/* İsteğe bağlı: alt kenarda ince gradient hat (daha premium görünüm) */
.nav-elite::after{
  content:"";
  position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(124,58,237,.25), transparent);
  pointer-events:none;
}

/* Menü linkleri: hover/active okunaklı olsun */
.nav-elite .navbar-nav .nav-link{
  color: var(--text);
  font-weight: 600;
}
.nav-elite .navbar-nav .nav-link:hover,
.nav-elite .navbar-nav .nav-link:focus{
  color: var(--accent-2);                      /* mor koyu metin */
  background: rgba(124,58,237,.08);            /* açık mor arka plan */
  border-radius: 8px;                           /* küçük chip hissi */
}

/* Outline/pill butonlar: hover'da metin beyaza düşmesin */
.sesmate-btn{
  color: var(--text);
  background:#fff;
  border:1px solid var(--line);
}
.sesmate-btn:hover,
.sesmate-btn:focus{
  background:#f5f3ff;                          /* çok açık mor */
  color: var(--text);                           /* koyu metin KALIR */
  border-color: rgba(124,58,237,.30);
}

/* Primary buton (mor dolu) aynı kalsın, sadece küçük iyileştirme */
.sesmate-btn.primary:hover{ 
  filter: brightness(1.03);
  transform: translateY(-1px);
}
.sesmate-btn:focus-visible{ outline: none; box-shadow: var(--ring); }


/* =========================================
   OVERRIDES — safe layer (do NOT remove above)
   Bu katman sadece görsel tutarlılık ve navbar/hover iyileştirmeleri için.
   ========================================= */
   @layer overrides {
    /* Navbar ayrışma (cam + alt çizgi + yumuşak gölge) */
    .nav-elite{
      background: rgba(255,255,255,.92) !important;
      backdrop-filter: saturate(120%) blur(14px);
      border-bottom: 1px solid rgba(12,16,32,.10);
      box-shadow: 0 10px 30px rgba(12,16,32,.06);
      position: relative;
    }
    .nav-elite::after{
      content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
      background: linear-gradient(90deg, transparent, rgba(124,58,237,.25), transparent);
      pointer-events:none;
    }
  
    /* Menü linkleri: hover/active okunaklı kalsın */
    .nav-elite .navbar-nav .nav-link{
      color: var(--text, #0c1020);
      font-weight: 600;
      transition: color .2s ease, background-color .2s ease;
      border-radius: 8px;
    }
    .nav-elite .navbar-nav .nav-link:hover,
    .nav-elite .navbar-nav .nav-link:focus{
      color: var(--accent-2, #5b21b6);
      background: rgba(124,58,237,.08);
    }
  
    /* Outline/pill butonlar: hover’da metin kararmasın */
    .sesmate-btn{
      color: var(--text, #0c1020);
      background:#fff; border:1px solid var(--line, rgba(18,22,32,.08));
      text-decoration: none;
    }
    .sesmate-btn:hover,
    .sesmate-btn:focus{
      background:#f5f3ff; color: var(--text, #0c1020);
      border-color: rgba(124,58,237,.30);
    }
  
    /* Primary CTA küçük iyileştirme (görünüm korunur) */
    .sesmate-btn.primary{
      background: linear-gradient(180deg, var(--accent, #7c3aed), var(--accent-2, #5b21b6));
      color:#fff; border-color: transparent; box-shadow: 0 16px 48px rgba(12,16,32,.08);
    }
    .sesmate-btn.primary:hover{ filter:brightness(1.03); transform: translateY(-1px); }
    .sesmate-btn:focus-visible{ outline:none; box-shadow: 0 0 0 .22rem rgba(124,58,237,.25); }
  }

  /* Project grid: image-based icons should never exceed the icon size */
.project-item img.project-icon {
  width: 48px;         /* ikon yüksekliğiyle aynı olacak şekilde ayarlayın */
  height: 48px;        /* gerekiyorsa 40/44/48 olarak değiştirin */
  object-fit: cover;   /* taşmadan kırp */
  border-radius: 8px;  /* mevcut stilinize göre */
  display: inline-block;
  vertical-align: middle;
}