/* ===========================================================
   Selfiys — Kurumsal özelleştirmeler (godocs-bulma üstüne)
   Marka rengi: #1c64f2 (kurumsal mavi)
   =========================================================== */
:root{
  --brand:#1c64f2;
  --brand-dark:#1a4fc4;
  --brand-light:#4f83f4;
  --navy:#0b1b3a;
  --ink:#1f2a44;
  --muted:#5b6b86;
  --soft:#f4f7fe;
  --line:#e6ebf5;
}

/* --- Wordmark logo --- */
.brand-wordmark{ display:flex; flex-direction:column; line-height:1; text-decoration:none; }
.brand-mark{ font-weight:800; font-size:1.55rem; letter-spacing:-.5px; color:var(--navy); }
.brand-accent{ color:var(--brand); }
.brand-sub{ font-size:.62rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-top:2px; }
.navbar-item.brand-wordmark:hover{ background:transparent; }

/* --- Navbar --- */
.navigation{ box-shadow:0 2px 18px rgba(11,27,58,.06); }
.navbar-item{ font-weight:600; color:var(--ink); }
.navbar-item.is-active{ color:var(--brand); }

/* --- Hero --- */
.hero-corp{
  background:linear-gradient(135deg,#0b1b3a 0%,#14367d 55%,#1c64f2 120%);
  color:#fff; position:relative; overflow:hidden;
}
.hero-corp::after{
  content:""; position:absolute; right:-120px; top:-120px; width:520px; height:520px;
  background:radial-gradient(circle, rgba(79,131,244,.35) 0%, transparent 70%);
}
.hero-corp h1{ color:#fff; font-size:2.9rem; line-height:1.15; font-weight:800; }
.hero-corp p.lead{ color:#c7d6f5; font-size:1.18rem; }
.hero-badge{
  display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22); color:#dbe6ff; padding:7px 16px; border-radius:40px;
  font-size:.85rem; font-weight:600; margin-bottom:1.4rem;
}
.hero-badge .dot{ width:8px; height:8px; border-radius:50%; background:#37d67a; box-shadow:0 0 0 4px rgba(55,214,122,.25); }
/* Koyu zeminlerde kullanılan butonlar (hero, page-hero, cta-strip) */
.btn-white{ background:#fff; color:var(--brand); border-color:#fff; }
.btn-white:hover{ background:#eef3ff; color:var(--brand-dark); border-color:#eef3ff; }
.btn-ghost{ background:transparent; color:#fff; border:1px solid rgba(255,255,255,.45); }
.btn-ghost:hover{ background:rgba(255,255,255,.12); color:#fff; border-color:#fff; }

/* Hero istatistik kartı */
.hero-panel{ background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14); border-radius:16px; padding:26px; backdrop-filter:blur(4px); }
.stat-row{ display:flex; justify-content:space-between; gap:14px; }
.stat b{ display:block; font-size:1.9rem; font-weight:800; color:#fff; }
.stat span{ font-size:.8rem; color:#b9caf0; }

/* --- Genel bölüm başlığı --- */
.eyebrow{ color:var(--brand); font-weight:700; letter-spacing:1.5px; text-transform:uppercase; font-size:.78rem; }
.section-soft{ background:var(--soft); }

/* --- Kartlar --- */
.card-icon-box{
  width:56px; height:56px; border-radius:14px; display:inline-flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#e8f0ff,#d5e3ff); color:var(--brand); font-size:1.5rem; margin-bottom:1rem;
}
.feature-card{ height:100%; border:1px solid var(--line); border-radius:16px; padding:28px; background:#fff; transition:.2s; }
.feature-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(28,100,242,.12); border-color:#cfe0ff; }
.feature-card h3{ font-size:1.15rem; font-weight:700; color:var(--navy); margin-bottom:.5rem; }
.feature-card p{ color:var(--muted); font-size:.95rem; margin:0; }

/* --- Adım / süreç --- */
.step-num{ width:40px; height:40px; border-radius:50%; background:var(--brand); color:#fff; font-weight:700;
  display:inline-flex; align-items:center; justify-content:center; margin-bottom:.8rem; }

/* --- Logo şeridi / güven --- */
.trust-bar{ border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-item{ color:var(--muted); font-weight:600; font-size:.95rem; }
.trust-item i{ color:var(--brand); margin-right:6px; }

/* --- Paket kartları --- */
.price-card{ border:1px solid var(--line); border-radius:18px; padding:32px 28px; background:#fff; height:100%; position:relative; transition:.2s; }
.price-card:hover{ box-shadow:0 16px 44px rgba(11,27,58,.10); }
.price-card.is-featured{ border:2px solid var(--brand); box-shadow:0 20px 50px rgba(28,100,242,.16); }
.price-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--brand); color:#fff;
  font-size:.72rem; font-weight:700; padding:5px 14px; border-radius:30px; letter-spacing:.5px; }
.price-name{ font-weight:700; font-size:1.25rem; color:var(--navy); }
.price-amount{ font-size:2.1rem; font-weight:800; color:var(--navy); margin:.4rem 0; }
.price-amount small{ font-size:.85rem; font-weight:600; color:var(--muted); }
.price-list{ list-style:none; margin:1.2rem 0 1.6rem; padding:0; }
.price-list li{ padding:7px 0; color:var(--ink); font-size:.93rem; border-bottom:1px dashed var(--line); }
.price-list li i{ color:#37b24d; margin-right:8px; }
.price-list li.off{ color:#a0aabe; }
.price-list li.off i{ color:#cfd6e4; }

/* --- API dokümantasyon --- */
.api-layout{ display:grid; grid-template-columns:230px 1fr; gap:40px; }
@media(max-width:860px){ .api-layout{ grid-template-columns:1fr; } }
.api-nav{ position:sticky; top:90px; align-self:start; }
.api-nav a{ display:block; padding:8px 12px; border-radius:8px; color:var(--muted); font-weight:600; font-size:.92rem; }
.api-nav a:hover{ background:var(--soft); color:var(--brand); }
.endpoint{ border:1px solid var(--line); border-radius:14px; overflow:hidden; margin-bottom:1.6rem; }
.endpoint-head{ display:flex; align-items:center; gap:12px; padding:14px 18px; background:var(--soft); border-bottom:1px solid var(--line); }
.method{ font-weight:700; font-size:.75rem; padding:4px 10px; border-radius:6px; color:#fff; letter-spacing:.5px; }
.method.get{ background:#2f9e44; } .method.post{ background:#1c64f2; } .method.put{ background:#f08c00; } .method.delete{ background:#e03131; }
.endpoint-path{ font-family:'SFMono-Regular',Consolas,monospace; font-weight:600; color:var(--navy); }
.endpoint-body{ padding:18px; }
pre.code-block{ background:#0b1b3a; color:#e6ecff; padding:18px 20px; border-radius:10px; overflow:auto; font-size:.85rem; line-height:1.55; }
pre.code-block .k{ color:#7db3ff; } pre.code-block .s{ color:#8ce99a; }
.badge-soft{ display:inline-block; background:#e8f0ff; color:var(--brand); font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; }

/* --- Blog --- */
.post-card{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; height:100%; transition:.2s; }
.post-card:hover{ transform:translateY(-4px); box-shadow:0 14px 40px rgba(11,27,58,.10); }
.post-card .post-cat{ color:var(--brand); font-weight:700; font-size:.75rem; text-transform:uppercase; letter-spacing:1px; }
.post-card h3{ font-size:1.12rem; font-weight:700; color:var(--navy); line-height:1.35; margin:.5rem 0; }
.post-card .post-body{ padding:24px; }
.post-meta{ color:var(--muted); font-size:.82rem; }
.post-thumb{ height:74px; background:linear-gradient(135deg,#14367d,#1c64f2); display:flex; align-items:center; justify-content:center; }
.post-thumb i{ color:rgba(255,255,255,.85); font-size:1.6rem; }
.article-body{ font-size:1.05rem; color:#2b3654; line-height:1.8; }
.article-body h2{ font-size:1.5rem; color:var(--navy); margin:2rem 0 .8rem; }
.article-body h3{ font-size:1.2rem; color:var(--navy); margin:1.5rem 0 .6rem; }
.article-body ul{ margin:1rem 0 1rem 1.2rem; list-style:disc; }
.article-body li{ margin:.4rem 0; }
.article-body p{ margin-bottom:1.1rem; }

/* --- İletişim --- */
.contact-info-card{ background:var(--navy); color:#dfe7f7; border-radius:18px; padding:36px; height:100%; }
.contact-info-card h3{ color:#fff; }
.contact-info-card .ci{ display:flex; gap:14px; margin-bottom:1.5rem; }
.contact-info-card .ci i{ font-size:1.3rem; color:var(--brand-light); }
.contact-info-card .ci div{ color:#dfe7f7; }               /* değer metni — açık gri */
.contact-info-card strong{ color:#fff; font-weight:700; }  /* Adres/Telefon başlıkları — beyaz, okunur */
.contact-info-card a{ color:#bcd0f7; }
.contact-info-card a:hover{ color:#fff; }

/* Koyu zeminli tüm bileşenlerde <strong> okunur kalsın (Bulma varsayılanını ez) */
.hero-corp strong, .page-hero strong, .cta-strip strong, footer strong{ color:inherit; }
.form-box{ border:1px solid var(--line); border-radius:18px; padding:34px; background:#fff; }
.notice{ padding:14px 18px; border-radius:10px; margin-bottom:1.2rem; font-weight:600; }
.notice.ok{ background:#e6f7ec; color:#237a3f; border:1px solid #bfe6cd; }
.notice.err{ background:#fdeaea; color:#b42222; border:1px solid #f3c6c6; }

/* --- Footer --- */
footer{ background:var(--navy); color:#aebbd6; margin-top:0; }
footer .footer-top{ border-bottom:1px solid rgba(255,255,255,.08); }
footer .brand-mark{ color:#fff; }
footer .footer-about{ color:#9fb0d0; font-size:.92rem; }
footer .footer-title{ color:#fff; font-weight:700; font-size:1rem; margin-bottom:1rem; }
footer .footer-links, footer .footer-contact{ list-style:none; padding:0; margin:0; }
footer .footer-links li{ margin:.5rem 0; }
footer .footer-links a{ color:#9fb0d0; }
footer .footer-links a:hover, footer .footer-contact a:hover{ color:#fff; }
footer .footer-contact li{ display:flex; gap:10px; margin:.7rem 0; color:#9fb0d0; align-items:flex-start; }
footer .footer-contact i{ color:var(--brand-light); margin-top:3px; }
footer .social-icons a{ display:inline-flex; width:38px; height:38px; border-radius:9px; background:rgba(255,255,255,.08);
  align-items:center; justify-content:center; color:#fff; }
footer .social-icons a:hover{ background:var(--brand); }
footer .footer-bottom{ color:#7d8cad; }
footer .footer-bottom a{ color:#aebbd6; }

/* --- WhatsApp logosu (inline SVG) --- */
.wa-ico{ width:1.15em; height:1.15em; fill:currentColor; vertical-align:-.18em; }
.contact-info-card .ci .wa-ico.ci-ico{ width:1.3rem; height:1.3rem; color:var(--brand-light); flex:0 0 auto; }
.btn .wa-ico{ vertical-align:-.15em; }

/* --- WhatsApp float --- */
.wa-float{ position:fixed; right:22px; bottom:22px; width:56px; height:56px; border-radius:50%; background:#25d366;
  color:#fff; display:flex; align-items:center; justify-content:center; z-index:60;
  box-shadow:0 8px 24px rgba(37,211,102,.4); }
.wa-float .wa-ico{ width:30px; height:30px; }
.wa-float:hover{ color:#fff; transform:scale(1.06); }

/* --- CTA şeridi --- */
.cta-strip{ background:linear-gradient(135deg,#14367d,#1c64f2); border-radius:20px; padding:48px; color:#fff; }
.cta-strip h2{ color:#fff; }
.cta-strip p{ color:#eaf0fc; }   /* tema p{color:#333} kuralını ez — mavi zeminde okunur */
.cta-strip a:not(.btn){ color:#fff; text-decoration:underline; }

/* --- Sayfa başlığı (iç sayfalar) --- */
.page-hero{ background:var(--navy); color:#fff; padding:64px 0 60px; }
.page-hero h1{ color:#fff; font-size:2.3rem; font-weight:800; }
.page-hero .breadcrumb-mini{ color:#9fb0d0; font-size:.9rem; }
.page-hero .breadcrumb-mini a{ color:var(--brand-light); }

/* --- SSS (FAQ) --- */
.faq-item{ border:1px solid var(--line); border-radius:12px; background:#fff; margin-bottom:12px; overflow:hidden; }
.faq-item summary{ cursor:pointer; list-style:none; padding:18px 22px; font-weight:700; color:var(--navy);
  font-size:1.02rem; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{ content:"\002B"; color:var(--brand); font-size:1.4rem; font-weight:700; line-height:1; flex:0 0 auto; }
.faq-item[open] summary::after{ content:"\2212"; }
.faq-item[open] summary{ border-bottom:1px solid var(--line); }
.faq-answer{ padding:16px 22px; color:var(--muted); font-size:.97rem; line-height:1.7; }

/* --- Kayıt / giriş çağrısı --- */
.hero-buttons .btn{ white-space:nowrap; }
.hero-trial-note{ color:#b9caf0; font-size:.92rem; font-weight:500; }
.hero-trial-note i{ color:#37d67a; }
.nav-cta-group{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; }

@media(max-width:768px){
  .hero-corp h1{ font-size:2.1rem; }
  .api-nav{ position:static; }
  .nav-cta-group{ width:100%; }
  .nav-cta-group .btn{ margin-left:0 !important; flex:1 1 auto; text-align:center; }
}