/* ===========================================================================
   MineAPI tanıtım sayfası — yalnızca NET-YENİ stiller.
   Sayfa, sitenin ana tasarım dili css/mcc.css üzerine kurulur (Kameleon); burada
   sadece mcc.css'te bulunmayan parçalar tanımlanır: dil anahtarı, "yakında" noktası,
   kod/JSON örnek kartı ve bekleme listesi formunun iki-kolon düzeni.
   Değişkenler (--blue, --glass, --muted ...) mcc.css :root'undan miras alınır.
   =========================================================================== */

/* Çapa (anchor) hedefleri sticky header altında kalmasın diye kaydırma payı.
   NOT: Eskiden burada `html { overflow-x: clip }` vardı; teoride sticky'yi kırmaması gerekse de
   Chrome'da pratikte `.header`'ın `position: sticky`'sini KIRDI (menü aşağı inince yukarı
   yapışmıyordu). Kaldırıldı — yatay taşmayı zaten `body { overflow-x: hidden }` (mcc.css) önlüyor;
   kod bloğu da kendi içinde `.code { overflow-x: auto }` + `.code-card { overflow: hidden }` ile
   sınırlı. `scroll-behavior: smooth` zaten mcc.css'in html kuralında var. */
#inside, #waitlist { scroll-margin-top: 84px; }

/* Hero CTA: iki buton dar ekranda düzgün alt satıra sarsın (mcc.css'teki .hero .cta yalnız
   ana sayfaya özel; bu sayfa .page-head içinde olduğu için kuralı burada tanımlıyoruz). */
.api-head .cta { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- Hero üst satırı: breadcrumb solda, dil anahtarı sağda ---- */
.api-head-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 30px; }
.api-head-top .crumb { margin-bottom: 0; }
.lang-switch {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; padding: 6px 13px; border-radius: 100px;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1px;
  color: var(--blue-br); background: var(--glass); border: 1px solid var(--glass-bd);
  backdrop-filter: blur(8px); transition: border-color .2s, color .2s, background .2s;
}
.lang-switch:hover { border-color: var(--blue); color: #fff; }

/* ---- "Çok Yakında" eyebrow'undaki nabız gibi yanıp sönen nokta ---- */
.soon-dot { display: inline-block; width: 7px; height: 7px; margin: 0 2px; border-radius: 50%; background: var(--blue-br); box-shadow: 0 0 0 0 rgba(124,184,234,.7); animation: soonpulse 2.4s ease-out infinite; vertical-align: middle; }
@keyframes soonpulse {
  0%   { box-shadow: 0 0 0 0 rgba(124,184,234,.55); }
  70%  { box-shadow: 0 0 0 7px rgba(124,184,234,0); }
  100% { box-shadow: 0 0 0 0 rgba(124,184,234,0); }
}

/* ---- "İçeride neler var" kart ızgarasında kart metni dengesi ---- */
.api-cards .card { cursor: default; }
.api-cards .card p { min-height: 66px; }

/* ---- Örnek istek/yanıt: kod kartı ---- */
.code-card { max-width: 760px; margin: 34px auto 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--glass-bd); background: #14171d; box-shadow: 0 24px 60px -34px rgba(0,0,0,.8); }
.code-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--bd); }
.code-dot { width: 11px; height: 11px; border-radius: 50%; background: #3a414d; }
.code-dot:nth-child(1) { background: #e06c5a; }
.code-dot:nth-child(2) { background: #e0b35a; }
.code-dot:nth-child(3) { background: #5aa46e; }
.code-tag { margin-left: auto; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--dim); padding: 3px 10px; border: 1px solid var(--bd); border-radius: 100px; }
.code { margin: 0; padding: 22px 22px 24px; overflow-x: auto; font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.7; color: #c4ccd6; white-space: pre; tab-size: 2; }
.code .c-req { color: var(--blue-br); font-weight: 600; }
.code .c-key { color: #7cb8ea; }
.code .c-str { color: #8fd19e; }
.code .c-num { color: #e0b35a; }

/* ---- Bekleme listesi formu ---- */
.wl-sub { margin-left: auto; margin-right: auto; }
.wl-panel { margin-top: 12px; }
.wl-form .wl-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.wl-form .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }
.captcha-note { margin-top: 14px; text-align: center; color: var(--dim); font-size: 12.5px; }
@media (max-width: 560px) { .wl-form .wl-row { grid-template-columns: 1fr; } }

/* "Start building with MineAPI" bölümüne ana sayfadaki "Let's connect" gibi halka efekti.
   has-ring + .card-ring--bg canvas + cardring.js zaten eklendi; .card-ring/.has-ring stilleri mcc.css'te.
   Halka, başlığın (.cta-inner) üstüne doğru kavislendiği için bölüme geniş üst boşluk gerek
   (ana sayfadaki .contact-cta'nın büyük üst dolgusunun karşılığı). */
#waitlist.has-ring { padding-top: clamp(200px, 24vw, 400px); }

/* ---- Fiyatlandirma kartlari ----
   Kullanici istegi (Lemon Squeezy incelemesi): planlar/fiyatlar site uzerinde HALKA ACIK olsun.
   Tasarim mcc.css'in cam (glass) kart dilini birebir izler; sadece fiyat tipografisi + one cikan
   plan halkasi + ozellik listesi net-yeni. Renk/degiskenler mcc.css :root'undan miras (mavi tema). */
.plans { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: stretch; margin-top: 8px; }
.plan { position: relative; display: flex; flex-direction: column; padding: 30px 26px; border-radius: var(--r); background: var(--glass); border: 1px solid var(--glass-bd); backdrop-filter: blur(14px); }
/* one cikan (Pro) plan: mavi halka + hafif parlaklik */
.plan.featured { border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue), 0 26px 60px -34px rgba(91,159,212,.6); }
.plan-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #10202c; background: var(--blue); padding: 5px 14px; border-radius: 100px; }
.plan-name { font-size: 16px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--blue-br); }
.plan-price { display: flex; align-items: baseline; gap: 5px; margin-top: 12px; }
.plan-price .amt { font-size: 40px; font-weight: 700; letter-spacing: -1px; line-height: 1; color: var(--text); }
.plan-price .per { font-size: 14px; font-weight: 600; color: var(--dim); }
.plan-tag { color: var(--muted); font-size: 14px; margin-top: 8px; }
.plan-feats { list-style: none; margin: 22px 0 26px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.plan-feats li { display: flex; gap: 10px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.plan-feats .ck { color: var(--blue-br); font-weight: 700; flex-shrink: 0; }
.plan .btn { width: 100%; justify-content: center; margin-top: auto; }
.price-note { text-align: center; color: var(--muted); font-size: 13.5px; max-width: 640px; margin: 28px auto 0; }
#pricing { scroll-margin-top: 84px; }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; } }