/* =========================================================================
   OnlyTwitter — dark redesign overlay for PerfectPanel (theme_21)
   v1.0  ·  onlytwitter.com
   -------------------------------------------------------------------------
   Bu dosya panelin kendi CSS'ini SİLMEZ, üstüne yazar.
   Panelin tüm renk sistemi :root üzerindeki --color-id-* değişkenlerinden
   geliyor; aşağıda önce onları yeniden tanımlıyoruz (tek hamlede global
   re-skin), sonra bileşenleri tek tek elden geçiriyoruz.

   KAPSAM: .body-public  (giriş yapılmamış sayfalar)
   Panel içini (sipariş ekranı) da koyu yapmak istersen:
   ".body-public" yazan yeri "body" ile değiştir.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,300..900&family=Manrope:wght@300..700&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* -------------------------------------------------------------------------
   1) RENK SİSTEMİ — panelin kendi değişkenlerini yeniden tanımla
   ---------------------------------------------------------------------- */
body.body-public{
  --color-id-20: #07080A;              /* sayfa zemini            */
  --color-id-21: #0E1116;              /* kart / beyaz yüzeyler   */
  --color-id-26: #F2F4F7;              /* koyu metin -> açık      */
  --color-id-32: #FFFFFF;              /* buton üstü metin        */
  --color-id-29: #2E7CFF;              /* birincil (link/vurgu)   */
  --color-id-25: #2E7CFF;
  --color-id-14: #2E7CFF;
  --color-id-31: #2A6FE8;              /* hover                   */
  --color-id-33: #1F5FD6;              /* koyu birincil           */
  --color-id-30: #68A7FF;
  --color-id-27: linear-gradient(180deg,#3B87FF 0%,#2E7CFF 100%);
  --color-id-22: rgba(255,255,255,.06);/* ince çizgi/gölge        */
  --color-id-19: rgba(255,255,255,.10);
  --color-id-13: rgba(46,124,255,.14);
  --color-id-16: rgba(46,124,255,.28);
  --color-id-23: rgba(255,255,255,.10);

  /* kendi tasarım token'larımız */
  --ot-ink:#07080A;
  --ot-ink2:#0B0D12;
  --ot-panel:rgba(255,255,255,.035);
  --ot-panel2:rgba(255,255,255,.055);
  --ot-line:rgba(255,255,255,.10);
  --ot-line-soft:rgba(255,255,255,.06);
  --ot-fg:#F4F6F8;
  --ot-fg2:#A8AFBA;
  --ot-fg3:#6E7783;
  --ot-accent:#2E7CFF;
  --ot-accent2:#68A7FF;
  --ot-glow:rgba(46,124,255,.28);
  --ot-r:18px;
  --ot-ease:cubic-bezier(.22,.9,.28,1);
}

/* -------------------------------------------------------------------------
   1b) TÜRETİLMİŞ DEĞİŞKENLER — ÖNEMLİ
   Panel :root üzerinde --color-id-* değerlerinden TÜRETEN 137 değişken daha
   tanımlıyor (--navbar_public_items_text_color: var(--color-id-26) gibi).
   Bunlar :root'ta çözümlendiği için yukarıdaki body seviyesindeki remap
   onlara ULAŞMAZ — o yüzden public sayfayla ilgili olanları burada
   yeniden tanımlıyoruz. Bu blok olmazsa navbar linkleri, form inputları ve
   footer eski lacivert renkte kalır.
   ---------------------------------------------------------------------- */
body.body-public{
  --text-dark:var(--ot-fg);
  --link:var(--ot-accent2);

  --navbar_public_items_text_color:var(--ot-fg2);
  --navbar_public_items_hover_text_color:var(--ot-fg);
  --navbar_public_items_active_text_color:var(--ot-fg);
  --navbar_public_background_color:transparent;
  --navbar_public_box_shadow:none;

  --footer_public_text_color:var(--ot-fg3);
  --footer_public_background_color:var(--ot-ink2);

  --card_background_color:transparent;

  --form_group_input_background_color:rgba(7,8,10,.55);
  --form_group_input_text_color:var(--ot-fg);
  --form_group_input_border_color:var(--ot-line);
  --form_group_input_focus_background_color:rgba(7,8,10,.75);
  --form_group_input_focus_text_color:var(--ot-fg);
  --form_group_input_focus_border_color:var(--ot-accent);
  --form_group_input_label_text_color:var(--ot-fg3);
  --form_group_input_small_text_color:var(--ot-fg3);
  --form_group_icon_color:var(--ot-fg3);

  --button_primary_text_color:#fff;
  --button_primary_background_color:var(--ot-accent);
  --button_primary_border_color:transparent;
  --button_primary_hover_text_color:#fff;
  --button_primary_hover_background_color:#2A6FE8;
  --button_primary_hover_border_color:transparent;
  --button_action_text_color:#fff;
  --button_action_background_color:var(--ot-accent);
  --button_action_border_color:transparent;
  --button_secondary_text_color:var(--ot-fg);
  --button_secondary_background_color:transparent;
  --button_secondary_border_color:var(--ot-line);
  --button_secondary_hover_text_color:var(--ot-fg);
  --button_secondary_hover_background_color:var(--ot-panel2);
  --button_secondary_hover_border_color:var(--ot-line);

  --table_thead_text_color:var(--ot-fg3);
  --table_thead_background_color:var(--ot-panel2);
  --table_tbody_text_color:var(--ot-fg2);
  --table_tbody_background_color:transparent;
  --table_tbody_border_color:var(--ot-line-soft);

  --code_background_color:var(--ot-ink2);
  --code_text_color:var(--ot-fg2);
  --modal_background_color:var(--ot-ink2);
  --modal_close_color:var(--ot-fg2);
  --platforms_text_color:var(--ot-fg2);
  --platforms_background_color:var(--ot-panel);
  --platforms_border_color:var(--ot-line);
  --platforms_icon_color:var(--ot-accent2);
}

/* -------------------------------------------------------------------------
   2) TEMEL — zemin, tipografi, grain
   ---------------------------------------------------------------------- */
body.body-public{
  background:var(--ot-ink) !important;
  color:var(--ot-fg) !important;
  font-family:"Manrope",-apple-system,BlinkMacSystemFont,sans-serif !important;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.body-public::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9990;
  opacity:.38;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

.body-public h1,.body-public h2,.body-public h3,.body-public h4,
.body-public h5,.body-public h6,
.body-public .totals-card__count-value{
  font-family:"Archivo",sans-serif !important;
  font-variation-settings:"wdth" 90,"wght" 700;
  letter-spacing:-.032em !important;
  line-height:1.04 !important;
  color:var(--ot-fg) !important;
}
.body-public p,.body-public li,.body-public label{color:var(--ot-fg2)}
.body-public a{color:var(--ot-accent2)}
.body-public a:hover{color:#fff}

/* blokların kendi zemin/dalga süslemelerini sustur */
.body-public .block-bg{background:transparent !important;opacity:1 !important}
.body-public .block-divider-bottom{display:none !important}
.body-public [id^="block_"]{background:transparent !important}

/* bloklara nefes payı */
.body-public .wrapper-content__body > [id^="block_"]{padding-block:clamp(48px,7vw,96px)}
.body-public #block_51,.body-public #block_50,.body-public #block_52,
.body-public #block_54{padding-bottom:0}
.body-public #block_55,.body-public #block_53,.body-public #block_57,
.body-public #block_58{padding-top:34px}

/* -------------------------------------------------------------------------
   3) NAVBAR — cam efektli, yapışkan
   ---------------------------------------------------------------------- */
.body-public #block_46{
  position:sticky;top:0;z-index:900;padding-block:0 !important;
  transition:background .4s var(--ot-ease),border-color .4s;
  border-bottom:1px solid transparent;
}
.body-public #block_46.ot-stuck{
  background:rgba(7,8,10,.72) !important;
  backdrop-filter:saturate(180%) blur(22px);
  -webkit-backdrop-filter:saturate(180%) blur(22px);
  border-bottom-color:var(--ot-line-soft);
}
.body-public .component-navbar__wrapper,
.body-public .component-navbar{background:transparent !important;box-shadow:none !important;border:0 !important}
.body-public #block_46 .navbar{padding:12px 0 !important;min-height:66px}

.body-public .component-navbar-public-brand p,
.body-public .component-navbar-public-brand strong,
.body-public .component-navbar-public-brand span{
  font-family:"Archivo",sans-serif !important;
  font-variation-settings:"wdth" 78,"wght" 800;
  font-size:17px !important;letter-spacing:.02em !important;
  color:var(--ot-fg) !important;margin:0 !important;
}
.body-public .component-navbar-public-brand{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none !important;
}
.body-public .component-navbar-public-brand::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ot-accent);
  box-shadow:0 0 0 4px rgba(46,124,255,.18);flex:none;
}

/* Menü düzeni: solda linkler, sağda Sign in / Sign up butonları (demo düzeni).
   Panel sırası: Sign in, Services, API, Sign up, Blog — flex order ile diziyoruz. */
.body-public .component-navbar-collapse{flex:1;justify-content:flex-end}
.body-public .navbar-nav{
  display:flex;align-items:center;gap:4px;width:100%;justify-content:flex-end;
}
.body-public .navbar-nav .nav-item{order:2}
.body-public .navbar-nav .nav-item:has(a[href="/services"]){order:1;margin-left:20px}
.body-public .navbar-nav .nav-item:has(a[href="/api"]){order:2}
.body-public .navbar-nav .nav-item:has(a[href="/blog"]){order:3}
.body-public .navbar-nav .nav-item:has(a[href="/"]){order:4;margin-left:auto}
.body-public .navbar-nav .nav-item:has(a[href="/signup"]){order:5}

.body-public .component-navbar-nav-link{
  font-size:13.5px !important;position:relative;
  padding:6px 0 !important;margin-inline:14px;
  transition:color .25s var(--ot-ease);
}
.body-public .component-navbar-nav-link::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;
  background:var(--ot-fg);transition:width .3s var(--ot-ease);
}
.body-public .component-navbar-nav-link:hover::after{width:100%}

/* Sign in -> hayalet pill, Sign up -> dolu pill */
.body-public .navbar .navbar-nav .nav-item a[href="/"],
.body-public .navbar .navbar-nav .nav-item a[href="/signup"]{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  height:40px !important;padding:0 20px !important;margin-inline:5px !important;
  border-radius:100px !important;line-height:1 !important;
  font-weight:600 !important;font-size:14px !important;text-decoration:none !important;
  transition:transform .35s var(--ot-ease),background .3s,box-shadow .35s !important;
}
.body-public .navbar .navbar-nav .nav-item a[href="/"]::after,
.body-public .navbar .navbar-nav .nav-item a[href="/signup"]::after{display:none !important}

/* Renkleri panelin kendi değişkenleri üzerinden eziyoruz — panel bu linklerde
   `color: var(...) !important` kullandığı için doğrudan `color` ezmesi tutmuyor. */
.body-public .navbar-nav .nav-item a[href="/"]{
  --navbar_public_items_text_color:var(--ot-fg);
  --navbar_public_items_hover_text_color:var(--ot-fg);
  --navbar_public_items_active_text_color:var(--ot-fg);
  border:1px solid var(--ot-line) !important;background:transparent !important;
}
.body-public .navbar-nav .nav-item a[href="/"]:hover{
  background:var(--ot-panel2) !important;transform:translateY(-2px);
}
.body-public .navbar-nav .nav-item a[href="/signup"]{
  --navbar_public_items_text_color:#fff;
  --navbar_public_items_hover_text_color:#fff;
  --navbar_public_items_active_text_color:#fff;
  background:var(--ot-accent) !important;border:1px solid transparent !important;
  box-shadow:0 10px 30px -10px var(--ot-glow) !important;
}
.body-public .navbar-nav .nav-item a[href="/signup"]:hover{
  transform:translateY(-2px);box-shadow:0 18px 40px -12px var(--ot-glow) !important;
}

/* ---- MOBİL MENÜ ----
   Panel mobilde navbar'a yatay boşluk vermiyor: hamburger ve pill butonlar
   ekranın kenarına yapışıyordu. Sıralama da DOM sırasına düşüyordu
   (Sign in / Services / API / Sign up / Blog). İkisini de düzeltiyoruz. */
@media (max-width:991px){
  .body-public #block_46 .navbar{padding-inline:20px !important}
  .body-public #block_46 .navbar-collapse{padding-inline:0}

  .body-public .navbar-nav{flex-direction:column;align-items:stretch;gap:0}
  /* masaüstündeki sıra korunur: linkler üstte, butonlar altta */
  .body-public .navbar-nav .nav-item{margin-left:0 !important}
  .body-public .navbar-nav .nav-item:has(a[href="/"]){margin-top:16px}

  .body-public .component-navbar-nav-link{
    margin-inline:0 !important;padding:11px 0 !important;font-size:15px !important;
  }
  .body-public .component-navbar-nav-link::after{display:none}

  .body-public .navbar .navbar-nav .nav-item a[href="/"],
  .body-public .navbar .navbar-nav .nav-item a[href="/signup"]{
    width:100%;height:48px !important;margin:0 0 8px !important;
  }

  /* hamburger: 42px dairenin içinde 16px çizgiler */
  .body-public .navbar-toggler{padding:0 !important;flex:none}
  .body-public .navbar-burger{display:flex !important;align-items:center;justify-content:center}
  .body-public .navbar-burger-line,
  .body-public .navbar-burger-line::before,
  .body-public .navbar-burger-line::after{
    width:16px !important;height:1.6px !important;border-radius:2px;
  }
}
.body-public .navbar-burger-line,
.body-public .navbar-burger-line::before,
.body-public .navbar-burger-line::after{background:var(--ot-fg) !important}
.body-public .navbar-toggler{border:1px solid var(--ot-line) !important;border-radius:50% !important;width:42px;height:42px}

/* mobil açılır menü */
.body-public #block_46 .navbar-collapse.show,
.body-public #block_46 .navbar-collapse.collapsing{
  background:rgba(7,8,10,.98);
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  border-top:1px solid var(--ot-line-soft);
  margin-top:12px;padding:8px 0 18px;border-radius:0 0 16px 16px;
}

/* -------------------------------------------------------------------------
   4) HERO (#block_56)
   ---------------------------------------------------------------------- */
/* Hero, navbar'ın ALTINA kadar uzanır: demo'da menü hero'nun üstünde yüzüyor,
   panelde ise ayrı bir blok olduğu için üstte ışıksız düz bir bant kalıyordu.
   Negatif margin ile yukarı çekip aynı miktarda üst dolgu veriyoruz. */
.body-public{--ot-nav-h:67px}
.body-public #block_56{
  position:relative;overflow:hidden;
  margin-top:calc(var(--ot-nav-h) * -1);
  padding-top:calc(var(--ot-nav-h) + clamp(56px,7vw,96px)) !important;
  padding-bottom:clamp(64px,8vw,110px) !important;
}
/* atmosfer: ışık huzmeleri + ince grid */
.body-public #block_56::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(680px 520px at 8% -10%,var(--ot-glow),transparent 68%),
    radial-gradient(620px 620px at 96% -18%,rgba(46,124,255,.16),transparent 68%);
  filter:blur(10px);
}
.body-public #block_56::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:100% 96px,96px 100%;
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 20%,transparent 78%);
}
.body-public #block_56 > .container{position:relative;z-index:1}

.body-public .block-signin-text__block-text-title h1{
  font-size:clamp(38px,5.4vw,72px) !important;
  font-variation-settings:"wdth" 88,"wght" 760;
  margin:0 0 22px !important;max-width:16ch;
}
/* Panel editörü metinlere inline font-size basıyor (örn. <span style="font-size:37px">).
   Bu, yukarıdaki clamp'i eziyordu — başlıklarda inline boyutu etkisizleştiriyoruz. */
.body-public .block-signin-text__block-text-title h1 span,
.body-public .block-signin-text__block-text-title h1 strong,
.body-public .block-signin-text__block-text-description p span,
.body-public .features-block__header-title span,
.body-public .features-block__header-title strong,
.body-public .how-it-works-title span,
.body-public .how-it-works-title strong,
.body-public .faq-block__header-title span{
  font-size:inherit !important;line-height:inherit !important;
}
.body-public .block-signin-text__block-text-description p{
  font-size:16.5px;line-height:1.66;font-weight:350;color:var(--ot-fg2) !important;
  max-width:54ch;margin-bottom:14px;
}
.body-public .block-signin-text__block-text-description strong{color:var(--ot-fg)}
.body-public .block-signin-text .row{align-items:center}

/* İki tonlu başlık — H1 içinde şu şekilde kullan (panel editöründen yazılabilir):
   Followers, likes and views — <span class="ot-outline">delivered instantly.</span> */
.body-public .ot-outline{
  color:transparent;
  -webkit-text-stroke:1px var(--ot-fg3);
  font-variation-settings:"wdth" 88,"wght" 400;
}

/* -------------------------------------------------------------------------
   5) KARTLAR + FORM (giriş kartı dahil)
   NOT: form yapısına, name/action değerlerine DOKUNULMUYOR — sadece görünüm.
   ---------------------------------------------------------------------- */
/* DİKKAT: Panel, grid sütunlarına da `card` sınıfı veriyor
   (`.col-ed.md:col-ed-span-6.card`). Bu yüzden `.card` kuralından sütunları
   ayıklıyoruz — yoksa özellik/istatistik kartları iç içe iki kutu olarak çıkar. */
.body-public .card:not(.col-ed):not(.how-it-works-card),
.body-public .component_card .card{
  background:linear-gradient(160deg,var(--ot-panel2),var(--ot-panel)) !important;
  border:1px solid var(--ot-line) !important;
  border-radius:26px !important;
  backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.85) !important;
  padding:32px !important;
}
.body-public #block_56 .component_card .card{position:relative}
.body-public #block_56 .component_card .card::before{
  content:"";position:absolute;inset:0;border-radius:26px;padding:1px;pointer-events:none;
  background:linear-gradient(150deg,rgba(46,124,255,.45),transparent 40%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* giriş kartı başlığı + güvenlik satırı (JS ekler) */
.ot-login-head h3{
  font-family:"Archivo",sans-serif !important;
  font-variation-settings:"wdth" 88,"wght" 700;
  letter-spacing:-.02em !important;font-size:22px !important;
  margin:0 0 4px !important;color:var(--ot-fg) !important;
}
.ot-login-head p{margin:0 0 24px !important;font-size:13.5px;color:var(--ot-fg3) !important}
.ot-login-secure{
  margin-top:22px;padding-top:18px;border-top:1px solid var(--ot-line-soft);
  display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ot-fg3);
}
.ot-login-secure svg{width:14px;height:14px;flex:none}

.body-public .form-group label{
  font-family:"IBM Plex Mono",monospace !important;
  font-size:10.5px !important;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ot-fg3) !important;margin-bottom:8px;
}
.body-public .form-control,
.body-public input[type=text],
.body-public input[type=password],
.body-public input[type=email],
.body-public select,
.body-public textarea{
  background:rgba(7,8,10,.55) !important;
  border:1px solid var(--ot-line) !important;
  border-radius:12px !important;
  color:var(--ot-fg) !important;
  height:48px;padding:0 15px;font-size:15px;
  box-shadow:none !important;
  transition:border-color .25s,box-shadow .25s;
}
.body-public textarea{height:auto;padding:14px 15px}
.body-public .form-control::placeholder{color:var(--ot-fg3) !important}
.body-public .form-control:focus{
  border-color:rgba(46,124,255,.7) !important;
  box-shadow:0 0 0 4px rgba(46,124,255,.14) !important;
}
.body-public .sign-in__forgot a{font-size:12px;color:var(--ot-fg3) !important}
.body-public .sign-in__forgot a:hover{color:var(--ot-accent2) !important}

/* butonlar */
.body-public .btn{
  border-radius:100px !important;
  font-weight:600 !important;letter-spacing:-.01em;
  border:1px solid transparent !important;
  transition:transform .35s var(--ot-ease),box-shadow .35s,background .3s !important;
}
.body-public .btn:hover{transform:translateY(-2px)}
.body-public .btn-big-primary,
.body-public .btn-primary{
  background:var(--ot-accent) !important;color:#fff !important;
  box-shadow:0 10px 30px -10px var(--ot-glow) !important;
  height:50px;
}
.body-public .btn-big-primary:hover,
.body-public .btn-primary:hover{box-shadow:0 18px 40px -12px var(--ot-glow) !important}
.body-public .btn-outline-primary,
.body-public .btn-secondary{
  background:transparent !important;color:var(--ot-fg) !important;
  border-color:var(--ot-line) !important;
}
.body-public .btn-outline-primary:hover,
.body-public .btn-secondary:hover{background:var(--ot-panel2) !important}
.body-public .block-signin-text__sign-up-link{
  color:var(--ot-fg) !important;border-bottom:1px solid var(--ot-line);margin-left:6px;
}
/* "Do not have an account?" satırı — panelde rengi sabit lacivert kodlanmış */
.body-public .component_card .card{color:var(--ot-fg2) !important}
.body-public .card .text-center.d-flex{gap:6px;margin-top:18px;font-size:13px}
.body-public .card .text-center.d-flex > div{color:var(--ot-fg3) !important}

/* -------------------------------------------------------------------------
   5b) BÖLÜM BAŞLIKLARI (.header-with-text — #block_51/50/52/54)
   Panel bunları küçük ve ortalanmış basıyor; demo'daki iri başlık düzenine
   çeviriyoruz. Üstteki mono etiketi (ör. "WHY OUR PANEL") ot-theme.js ekler.
   ---------------------------------------------------------------------- */
.body-public .header-with-text{max-width:720px}
.body-public .text-block__title h2{
  font-size:clamp(32px,4.2vw,54px) !important;
  font-variation-settings:"wdth" 88,"wght" 720;
  letter-spacing:-.032em !important;line-height:1.02 !important;
  margin:14px 0 0 !important;
}
.body-public .text-block__description p{
  margin:18px 0 0 !important;color:var(--ot-fg2) !important;
  font-size:16.5px;font-weight:350;line-height:1.6;max-width:56ch;
}
/* JS'in bastığı mono etiket */
.ot-kicker{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ot-fg3);display:block;
}
/* demo düzeni: bazıları sola, bazıları ortaya */
.body-public #block_51 .header-with-text,
.body-public #block_52 .header-with-text{margin-right:auto}
.body-public #block_51 h2,.body-public #block_51 p,.body-public #block_51 .ot-kicker,
.body-public #block_52 h2,.body-public #block_52 p,.body-public #block_52 .ot-kicker{
  text-align:left !important;
}
.body-public #block_50 .header-with-text,
.body-public #block_54 .header-with-text{margin-inline:auto}
.body-public #block_50 .text-block__description p,
.body-public #block_54 .text-block__description p{margin-inline:auto !important}
/* kicker de ortalansın — yoksa başlık ortada, etiket solda kalıyor */
.body-public #block_50 .ot-kicker,
.body-public #block_54 .ot-kicker{text-align:center}
.body-public #block_50 h2,.body-public #block_50 p,
.body-public #block_54 h2,.body-public #block_54 p{text-align:center !important}

/* -------------------------------------------------------------------------
   5c) KAYIT SAYFASI (#block_62)
   ---------------------------------------------------------------------- */
.body-public #block_62{
  position:relative;overflow:hidden;
  margin-top:calc(var(--ot-nav-h) * -1);
  padding-top:calc(var(--ot-nav-h) + clamp(48px,6vw,80px)) !important;
  padding-bottom:clamp(56px,7vw,96px) !important;
}
/* ana sayfadaki atmosferin aynısı */
.body-public #block_62::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(680px 520px at 8% -10%,var(--ot-glow),transparent 68%),
    radial-gradient(620px 620px at 96% -18%,rgba(46,124,255,.16),transparent 68%);
  filter:blur(10px);
}
.body-public #block_62::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:100% 96px,96px 100%;
  -webkit-mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 20%,transparent 78%);
  mask-image:radial-gradient(ellipse 90% 65% at 50% 0%,#000 20%,transparent 78%);
}
.body-public #block_62 > .container{position:relative;z-index:1}

.ot-signup{
  display:grid;grid-template-columns:.85fr 1.15fr;gap:52px;align-items:center;
}
.ot-signup__aside .ot-h2{max-width:14ch}
.ot-signup__aside .ot-hero-facts{gap:10px 22px}
.body-public .ot-signup .component_card{max-width:none}

/* 10 alan tek sütunda çok uzuyordu -> iki sütun */
.body-public #block_62 form > div:first-child{
  display:grid;grid-template-columns:1fr 1fr;gap:0 18px;
}
/* onay kutusu ve varsa tek kalan alan tüm satırı kaplasın */
.body-public #block_62 form > div:first-child > *:last-child{grid-column:1 / -1}
.body-public #block_62 form .form-group{margin-bottom:14px}
.body-public #block_62 .component_button_submit{margin-top:6px}
.body-public #block_62 .text-center{margin-top:18px;font-size:13px;color:var(--ot-fg3)}

@media (max-width:991px){
  .ot-signup{grid-template-columns:1fr;gap:36px;align-items:start}
  .ot-signup__aside .ot-h2{max-width:none}
}
@media (max-width:575px){
  .body-public #block_62 form > div:first-child{grid-template-columns:1fr}
}

/* -------------------------------------------------------------------------
   5d) METİN SAYFALARI (Terms vb. — .text-block-with-card)
   Uzun metin için okunaklı satır genişliği ve nefes payı.
   ---------------------------------------------------------------------- */
.body-public .text-block-with-card{
  max-width:820px;margin-inline:auto;padding-block:clamp(32px,5vw,64px);
}
/* :not() zincirli genel kart kuralından daha özgül olmak zorunda */
.body-public .text-block-with-card .card:not(.col-ed):not(.how-it-works-card){
  background:transparent !important;border:0 !important;
  box-shadow:none !important;padding:0 !important;backdrop-filter:none !important;
}
.body-public .text-block-with-card h2{
  font-size:clamp(32px,4.2vw,48px) !important;
  font-variation-settings:"wdth" 88,"wght" 720;
  margin:0 0 8px !important;
}
.body-public .text-block-with-card h3,
.body-public .text-block-with-card h4{
  font-variation-settings:"wdth" 90,"wght" 660;
  font-size:19px !important;margin:38px 0 12px !important;
}
.body-public .text-block-with-card p,
.body-public .text-block-with-card li{
  font-size:15.5px;line-height:1.75;font-weight:350;color:var(--ot-fg2) !important;
}
/* madde listesi (panel <ol> basıyor): numara yerine ince ayraçlı bloklar */
.body-public .text-block-with-card ul,
.body-public .text-block-with-card ol{
  list-style:none !important;margin:26px 0 0 !important;padding:0 !important;
  counter-reset:ot-item;
}
.body-public .text-block-with-card ul > li,
.body-public .text-block-with-card ol > li{
  position:relative;padding:18px 0 18px 42px;
  border-top:1px solid var(--ot-line-soft);
}
.body-public .text-block-with-card ol > li::before{
  counter-increment:ot-item;content:counter(ot-item,decimal-leading-zero);
  position:absolute;left:0;top:19px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ot-fg3);
}
.body-public .text-block-with-card ul > li{padding-left:0}
.body-public .text-block-with-card ul > li:last-child,
.body-public .text-block-with-card ol > li:last-child{
  border-bottom:1px solid var(--ot-line-soft);
}
.body-public .text-block-with-card a{color:var(--ot-accent2)}

/* -------------------------------------------------------------------------
   6) ÖZELLİK KARTLARI (#block_55)
   ---------------------------------------------------------------------- */
.body-public .features-block__card{
  position:relative;overflow:hidden;
  background:var(--ot-panel) !important;
  border:1px solid var(--ot-line-soft) !important;
  border-radius:var(--ot-r) !important;
  padding:30px 26px 34px !important;
  transition:transform .5s var(--ot-ease),border-color .4s var(--ot-ease);
}
.body-public .features-block__card:hover{
  transform:translateY(-5px);
  border-color:rgba(46,124,255,.35) !important;
}
.body-public .features-block__card::before{
  content:"";position:absolute;inset:-1px;border-radius:var(--ot-r);opacity:0;
  background:radial-gradient(420px circle at 50% 0%,rgba(46,124,255,.16),transparent 60%);
  transition:opacity .45s var(--ot-ease);pointer-events:none;
}
.body-public .features-block__card:hover::before{opacity:1}

/* dev ikon kutusunu küçült, hizala */
.body-public .features-block__header-preview{
  width:44px !important;height:44px !important;
  font-size:20px !important;
  border-radius:13px !important;
  background:var(--ot-panel2) !important;
  border:1px solid var(--ot-line);
  display:flex !important;align-items:center;justify-content:center;
  margin-bottom:22px !important;
}
.body-public .feature-block__icon{
  font-size:20px !important;color:var(--ot-accent2) !important;padding:0 !important;
}
.body-public .features-block__header-title,
.body-public .features-block__header-title *{
  font-family:"Archivo",sans-serif !important;
  font-variation-settings:"wdth" 90,"wght" 640;
  font-size:18px !important;letter-spacing:-.02em !important;
  color:var(--ot-fg) !important;
}
.body-public .features-block__card p{font-size:14.5px;line-height:1.6;font-weight:350}
/* demo'daki 01–04 sıra rozetleri */
.body-public #block_55 .col-ed .features-block__card::after{
  position:absolute;top:22px;right:24px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ot-fg3);
}
.body-public #block_55 .col-ed:nth-child(1) .features-block__card::after{content:"01"}
.body-public #block_55 .col-ed:nth-child(2) .features-block__card::after{content:"02"}
.body-public #block_55 .col-ed:nth-child(3) .features-block__card::after{content:"03"}
.body-public #block_55 .col-ed:nth-child(4) .features-block__card::after{content:"04"}
/* Kartlar eşit yükseklikte olsun.
   DİKKAT: burada `height:100%` KULLANILMAZ — satır sarıldığında (mobil)
   yüzde, tüm satır yığınının yüksekliğine göre hesaplanıp kartları
   1000px+ şişiriyor. Flex zinciri her iki durumda da doğru çalışır. */
.body-public #block_55 .col-ed{display:flex}
.body-public #block_55 .col-ed-elements{display:flex;flex:1;min-width:0}
.body-public #block_55 .col-ed-elements--element{display:flex;flex:1;min-width:0}
.body-public #block_55 .features-block__card{flex:1}

/* -------------------------------------------------------------------------
   7) İSTATİSTİKLER (#block_98)
   ---------------------------------------------------------------------- */
.body-public #block_98 .totals{
  border:1px solid var(--ot-line);border-radius:var(--ot-r);overflow:hidden;
  background:linear-gradient(180deg,var(--ot-panel),transparent);
}
.body-public #block_98{margin-top:90px !important;margin-bottom:50px !important}
.body-public #block_98 .grid-ed{--gapSizeX:0px !important;--gapSizeY:0px !important}
.body-public #block_98 .row-ed{margin:0 !important}
.body-public #block_98 .col-ed{padding:0 !important}
.body-public .totals-card{
  padding:38px 30px !important;background:transparent !important;
  border:0 !important;border-right:1px solid var(--ot-line-soft) !important;
  border-radius:0 !important;box-shadow:none !important;text-align:left;
}
.body-public .totals-card__count-value{
  font-variation-settings:"wdth" 80,"wght" 700;
  font-size:clamp(28px,3.4vw,44px) !important;
  letter-spacing:-.04em !important;margin:0 !important;
  font-variant-numeric:tabular-nums;color:var(--ot-fg) !important;
}
.body-public .totals-card__name p{
  font-family:"IBM Plex Mono",monospace !important;
  font-size:11px !important;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ot-fg3) !important;margin:12px 0 0 !important;
}

/* -------------------------------------------------------------------------
   8) ADIMLAR (#block_53)
   ---------------------------------------------------------------------- */
.body-public .how-it-works-card{
  background:none !important;border:0 !important;box-shadow:none !important;
  text-align:center;padding:0 18px !important;
  margin-top:0 !important;   /* panelin zig-zag hizasını düzleştir */
}
/* panelin kıvrık mavi okları yerine tek ince çizgi */
.body-public .how-it-works-arrow-top,
.body-public .how-it-works-arrow-bottom{display:none !important}
.body-public .how-it-works-row{position:relative}
.body-public .how-it-works-row::before{
  content:"";position:absolute;top:27px;left:12%;right:12%;height:1px;z-index:0;
  background:linear-gradient(90deg,transparent,var(--ot-line),var(--ot-line),transparent);
}
.body-public .how-it-works-preview{position:relative;z-index:1}
.body-public .how-it-works-number{
  width:54px !important;height:54px !important;
  border-radius:50% !important;margin-bottom:22px;
  background:var(--ot-ink) !important;
  border:1px solid var(--ot-line) !important;
  box-shadow:none !important;
  display:flex !important;align-items:center;justify-content:center;
  font-family:"IBM Plex Mono",monospace !important;
  font-size:14px !important;color:var(--ot-fg2) !important;
  transition:border-color .45s var(--ot-ease),box-shadow .45s var(--ot-ease);
}
.body-public .how-it-works-col:hover .how-it-works-number{
  border-color:var(--ot-accent) !important;
  box-shadow:0 0 0 6px rgba(46,124,255,.10) !important;
}
.body-public .how-it-works-title,
.body-public .how-it-works-title *{
  font-family:"Archivo",sans-serif !important;
  font-variation-settings:"wdth" 90,"wght" 640;
  font-size:17px !important;letter-spacing:-.02em !important;
  color:var(--ot-fg) !important;
}
.body-public .how-it-works-description p{font-size:14px;line-height:1.6;font-weight:350}

/* -------------------------------------------------------------------------
   9) YORUMLAR (#block_57)
   ---------------------------------------------------------------------- */
/* slick söküldükten sonra demo'daki 3'lü eşit yükseklikli grid */
.body-public .ot-review-grid{
  display:grid !important;grid-template-columns:repeat(3,1fr);gap:18px;width:100%;
}
.body-public .ot-review-grid .reviews-slider__slide{
  width:auto !important;display:block !important;float:none !important;
  min-width:0;height:auto !important;
}
@media (max-width:991px){
  .body-public .ot-review-grid{grid-template-columns:1fr}
}

.body-public .reviews-slider__slide .card{
  background:var(--ot-panel) !important;
  border:1px solid var(--ot-line-soft) !important;
  border-radius:var(--ot-r) !important;
  padding:32px 28px !important;box-shadow:none !important;
  backdrop-filter:none;transition:transform .5s var(--ot-ease),border-color .4s;
  height:100%;
  /* tırnak · metin · (avatar + isim) — demo düzeni */
  display:grid !important;
  grid-template-columns:auto 1fr;
  /* orta satır esner -> isim/avatar satırı her kartta dibe yaslanır,
     böylece kartlar arasında aynı hizada durur */
  grid-template-rows:auto 1fr auto;
  grid-template-areas:"quote quote" "desc desc" "photo name";
}
.body-public .reviews-slider__slide .card:hover{
  transform:translateY(-5px);border-color:var(--ot-line) !important;
}
/* tırnak işareti rozeti */
.body-public .reviews-slider__slide .card::before{
  content:"\201C";display:block;
  font-family:"Archivo",sans-serif;font-variation-settings:"wght" 800;
  font-size:44px;line-height:.6;color:var(--ot-accent);opacity:.5;margin-bottom:18px;
}
/* Avatar: panel /img/no_image.png basıyor. Gerçek fotoğraf yoksa
   demo'daki gibi baş harflere çeviriyoruz (harfleri ot-theme.js yazar). */
.body-public .reviews-slider__slide-avatar{
  width:38px !important;height:38px !important;border-radius:50% !important;
  border:1px solid var(--ot-line);background-color:var(--ot-panel2) !important;
  background-size:cover;flex:none;
}
.body-public .reviews-slider__slide-avatar[data-ot-initials]{
  background-image:none !important;border-color:transparent;
  background:linear-gradient(140deg,color-mix(in srgb,var(--ot-accent) 85%,#fff),var(--ot-accent)) !important;
  display:flex;align-items:center;justify-content:center;
}
.body-public .reviews-slider__slide-avatar[data-ot-initials]::before{
  content:attr(data-ot-initials);
  font-family:"Archivo",sans-serif;font-variation-settings:"wght" 700;
  font-size:14px;color:#fff;letter-spacing:.01em;
}
/* grid alanları */
.body-public .reviews-slider__slide .card::before{grid-area:quote}
/* Ayırıcı çizgi TEK parça olmalı: iki ayrı hücreye border verilince
   çizgi ikiye bölünüp kayıyordu. Çizgiyi metnin altına koyuyoruz. */
.body-public .reviews-slider__slide-description{
  grid-area:desc;
  border-bottom:1px solid var(--ot-line-soft);
  padding-bottom:20px;margin-bottom:20px;
}
.body-public .reviews-slider__slide-photo{
  grid-area:photo;margin:0 !important;padding:0 !important;border:0 !important;
  align-items:center;align-self:center;
}
/* panel bu elemana inline `padding-left:0` basıyor -> !important şart */
.body-public .reviews-slider__slide-name{
  grid-area:name;margin:0 !important;align-self:center;
  padding:0 0 0 14px !important;border:0 !important;text-align:left !important;
}
.body-public .reviews-slider__slide-name p{text-align:left !important}
.body-public .reviews-slider__slide-name p,
.body-public .reviews-slider__slide-name strong{
  font-size:14.5px !important;font-weight:600 !important;
  letter-spacing:-.01em;color:var(--ot-fg) !important;margin:0 !important;
}
.body-public .reviews-slider__slide-description p{
  font-size:15px;line-height:1.7;font-weight:350;color:var(--ot-fg2) !important;
}
/* demo'da statik 3'lü grid var — oklar ve noktalar gizleniyor */
.body-public .reviews-slider .slick-arrow,
.body-public .reviews-slider .slick-dots{display:none !important}
.body-public .reviews-slider .slick-track{display:flex !important;align-items:stretch}
.body-public .reviews-slider .slick-slide{height:auto !important}
.body-public .reviews-slider .slick-slide > div{height:100%}

/* -------------------------------------------------------------------------
   10) SSS (#block_58)
   ---------------------------------------------------------------------- */
.body-public #block_58 .card{
  background:transparent !important;border:0 !important;
  border-bottom:1px solid var(--ot-line-soft) !important;
  border-radius:0 !important;box-shadow:none !important;
  padding:0 !important;backdrop-filter:none;
}
.body-public .faq-block__header{
  padding:26px 4px !important;cursor:pointer;
  display:flex;align-items:center;gap:20px;
}
.body-public .faq-block__header-title h4{
  font-family:"Archivo",sans-serif !important;
  font-variation-settings:"wdth" 92,"wght" 600;
  font-size:clamp(16px,1.7vw,20px) !important;letter-spacing:-.02em !important;
  color:var(--ot-fg) !important;margin:0 !important;transition:color .3s;
}
.body-public .faq-block__header:hover .faq-block__header-title h4{color:var(--ot-accent2) !important}
/* + / x ikonu */
.body-public .faq-block__header-icon{margin-left:auto}
.body-public .faq-block__icon{
  width:30px !important;height:30px !important;flex:none;
  border-radius:50%;position:relative;display:block;
  border:1px solid var(--ot-line);color:var(--ot-fg) !important;
  font-size:0 !important;   /* panelin Font Awesome glyph'ini sustur */
  transition:transform .45s var(--ot-ease),background .3s,border-color .3s;
}
.body-public .faq-block__icon::before,
.body-public .faq-block__icon::after{
  content:"" !important;position:absolute;top:50%;left:50%;
  background:currentColor;font-family:inherit !important;font-size:0 !important;
  transform:translate(-50%,-50%);
}
.body-public .faq-block__icon::before{width:11px;height:1.5px}
.body-public .faq-block__icon::after{width:1.5px;height:11px}
.body-public .faq-block__header:not(.collapsed) .faq-block__icon{
  transform:rotate(135deg);background:var(--ot-accent);border-color:transparent;color:#fff !important;
}
.body-public .faq-block__body-description{
  padding:0 60px 28px 4px !important;
}
.body-public .faq-block__body-description p{
  color:var(--ot-fg2) !important;font-size:15.5px;line-height:1.75;font-weight:350;margin:0;
}

/* -------------------------------------------------------------------------
   10b) API SAYFASI (#block_api) + tablolar
   Bootstrap tabloları kendi beyaz zeminini dayatıyor, onu eziyoruz.
   ---------------------------------------------------------------------- */
.body-public .table{
  --bs-table-bg:transparent;
  --bs-table-color:var(--ot-fg2);
  --bs-table-striped-bg:rgba(255,255,255,.02);
  --bs-table-striped-color:var(--ot-fg2);
  --bs-table-border-color:var(--ot-line-soft);
  background:transparent !important;
  color:var(--ot-fg2) !important;
  border-collapse:separate;border-spacing:0;
  border:1px solid var(--ot-line) !important;
  border-radius:var(--ot-r);overflow:hidden;margin-bottom:26px;
}
.body-public .table thead th{
  background:var(--ot-panel2) !important;
  color:var(--ot-fg3) !important;
  font-family:"IBM Plex Mono",monospace !important;
  font-size:10.5px !important;letter-spacing:.14em;text-transform:uppercase;
  font-weight:500 !important;
  border:0 !important;border-bottom:1px solid var(--ot-line) !important;
  padding:14px 20px !important;
}
.body-public .table tbody td,
.body-public .table tbody th{
  background:transparent !important;
  color:var(--ot-fg2) !important;
  border:0 !important;border-bottom:1px solid var(--ot-line-soft) !important;
  padding:14px 20px !important;font-size:14.5px;
}
.body-public .table tbody tr:last-child td{border-bottom:0 !important}
.body-public .table tbody tr:hover td{background:var(--ot-panel) !important}
/* ilk kolon = parametre adı -> mono ve vurgulu */
.body-public #block_api .table tbody td:first-child{
  font-family:"IBM Plex Mono",monospace !important;
  font-size:12.5px !important;color:var(--ot-accent2) !important;
}

.body-public #block_api{padding-block:clamp(48px,7vw,96px) !important}
.body-public .block-api .bg,
.body-public .block-api .divider-top,
.body-public .block-api .divider-bottom{display:none !important}

/* Panel API sayfasını .col-lg-6 içine sıkıştırıyor (sayfanın yarısı).
   Diğer sayfalarla aynı genişliğe açıyoruz. */
.body-public #block_api .container-fluid{
  max-width:var(--maxw,1240px) !important;margin-inline:auto !important;
  padding-inline:28px !important;
}
.body-public #block_api .col-lg-6{
  flex:0 0 100% !important;max-width:100% !important;width:100% !important;
}
/* Tek dev kart yerine: üstte hero, altta her endpoint kendi kartında */
.body-public #block_api .card{
  background:transparent !important;border:0 !important;border-radius:0 !important;
  padding:0 !important;box-shadow:none !important;backdrop-filter:none !important;
}
.ot-apihero{
  position:relative;padding:8px 0 56px;margin-bottom:8px;
  border-bottom:1px solid var(--ot-line-soft);
}
.ot-apihero .ot-h2{max-width:16ch}
.ot-apihero .ot-lead{margin-bottom:34px}
/* genel bakış tablosu -> etiket/değer satırları */
.body-public .ot-apihero .table-responsive{max-width:640px}
.body-public .ot-apihero .table{border-radius:var(--ot-r)}

/* endpoint kartı */
.ot-endpoint{
  border:1px solid var(--ot-line-soft);border-radius:var(--ot-r);
  background:var(--ot-panel);padding:28px;margin-top:18px;
  transition:border-color .4s var(--ot-ease);
}
.ot-endpoint:hover{border-color:var(--ot-line)}
.ot-endpoint__head{display:flex;align-items:center;gap:12px;margin-bottom:22px}
/* DİKKAT: yukarıdaki `#block_api h4{margin:36px...}` kuralı ID taşıdığı için
   daha özgül. Aynı ID'yi burada da kullanmazsak başlık 36px aşağı kayıyor ve
   dikey ortalanan POST rozeti başlığın üstünde kalıyor. */
.body-public #block_api .ot-endpoint__head h4{
  margin:0 !important;font-size:19px !important;
  font-variation-settings:"wdth" 90,"wght" 660;
  line-height:1.2 !important;
}
/* Aynı sebeple: "Example response" etiketinin 26px üst boşluğu sağ sütunu
   sol sütundaki tablodan aşağı kaydırıyordu. */
.body-public #block_api .ot-endpoint__body h5,
.body-public #block_api .ot-endpoint__body h6{
  margin-top:0 !important;margin-bottom:10px !important;
}
.ot-endpoint__head::before{
  content:"POST";flex:none;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.12em;
  color:var(--ot-accent2);border:1px solid color-mix(in srgb,var(--ot-accent) 40%,transparent);
  background:color-mix(in srgb,var(--ot-accent) 12%,transparent);
  padding:4px 9px;border-radius:6px;
}
/* solda parametreler, sağda örnek yanıt
   grid-template-rows ŞART: sol sütun iki satırı birden kapladığı için
   tarayıcı fazla yüksekliği iki satıra eşit paylaştırıyor ve "Example
   response" etiketi ile kod bloğu arasında kocaman boşluk kalıyor.
   auto/1fr diyerek fazlalığın tamamını alt satıra veriyoruz. */
.ot-endpoint__body{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto 1fr;
  gap:0 22px;align-items:stretch;   /* iki sütun aynı yerde bitsin */
}
/* Çerçeveyi tablodan sarmalayıcıya alıyoruz: sarmalayıcı esneyip kod
   bloğuyla aynı boyda biterken satırlar üstte doğal yükseklikte kalır.
   (Tabloyu esnetseydik satır araları açılıp çirkin dururdu.) */
.body-public #block_api .ot-endpoint__body > *:nth-child(1){
  height:100%;
  border:1px solid var(--ot-line);border-radius:var(--ot-r);overflow:hidden;
}
.body-public #block_api .ot-endpoint__body > *:nth-child(1) .table{
  border:0 !important;border-radius:0 !important;margin:0 !important;
  height:auto;
}
/* kod bloğu da satırın tamamını kaplasın */
.body-public #block_api .ot-endpoint__body pre{height:100%}
/* Sağ sütundaki "Example response" etiketini kod penceresinin başlık şeridi
   yapıyoruz: soldaki tablonun thead'iyle birebir aynı kutu (14/20 dolgu),
   böylece iki sütunun başlıkları aynı çizgide başlıyor. */
.body-public #block_api .ot-endpoint__body > *:nth-child(2){
  display:flex;align-items:center;
  background:var(--ot-panel2);
  border:1px solid var(--ot-line);border-bottom:0;
  border-radius:var(--ot-r) var(--ot-r) 0 0;
  padding:14px 20px !important;margin:0 !important;
}
.body-public #block_api .ot-endpoint__body > *:nth-child(2) h5,
.body-public #block_api .ot-endpoint__body > *:nth-child(2) h6{
  margin:0 !important;
}
/* kod bloğu artık etiketin devamı — üst köşeler düz, kendi başlık çubuğu yok */
.body-public #block_api .ot-endpoint__body pre{
  border-radius:0 0 var(--ot-r) var(--ot-r) !important;
  border-top:0 !important;padding-top:20px !important;
}
.body-public #block_api .ot-endpoint__body pre[data-ot-label]::before,
.body-public #block_api .ot-endpoint__body pre[data-ot-label]::after{
  display:none !important;
}
.ot-endpoint__body > *:nth-child(1){grid-column:1;grid-row:1 / span 2}
.ot-endpoint__body > *:nth-child(2){grid-column:2;grid-row:1}
.ot-endpoint__body > *:nth-child(3){grid-column:2;grid-row:2}
.body-public .ot-endpoint__body .table{margin-bottom:0}
.body-public .ot-endpoint__body pre{margin-bottom:0}
/* "Example of PHP code" butonu: panelin .btn kuralı kenarlığı şeffaf yapıyor
   (!important taşıyor), o yüzden burada geri veriyoruz. */
.ot-apitail{margin-top:34px}
.body-public .ot-apitail .btn{
  border:1px solid var(--ot-line) !important;
  background:transparent !important;color:var(--ot-fg) !important;
}
.body-public .ot-apitail .btn:hover{background:var(--ot-panel2) !important}

@media (max-width:900px){
  .ot-endpoint__body{grid-template-columns:1fr}
  .ot-endpoint__body > *:nth-child(1),
  .ot-endpoint__body > *:nth-child(2),
  .ot-endpoint__body > *:nth-child(3){grid-column:1;grid-row:auto}
  .ot-endpoint{padding:22px 18px}
}
@media (max-width:575px){
  .body-public #block_api .container-fluid{padding-inline:16px !important}
  .body-public #block_api .card{padding:24px 20px !important}
}
.body-public #block_api h1,
.body-public #block_api h2{
  font-variation-settings:"wdth" 88,"wght" 740;
  font-size:clamp(30px,4vw,46px) !important;margin:0 0 28px !important;
}
.body-public #block_api h3,
.body-public #block_api h4{
  font-variation-settings:"wdth" 90,"wght" 660;
  font-size:20px !important;margin:36px 0 14px !important;
}
/* "Example response" gibi küçük etiketler — mono, sessiz */
.body-public #block_api h5,
.body-public #block_api h6{
  font-family:"IBM Plex Mono",monospace !important;
  font-size:10.5px !important;letter-spacing:.14em !important;
  text-transform:uppercase;font-weight:500 !important;
  color:var(--ot-fg3) !important;margin:26px 0 10px !important;
}
/* kod blokları — demo'daki kod penceresi görünümü
   (üstte üç nokta + endpoint çubuğu; etiketi ot-theme.js yazıyor) */
.body-public #block_api pre,
.body-public pre{
  position:relative;
  background:var(--ot-ink) !important;
  color:var(--ot-fg2) !important;
  border:1px solid var(--ot-line) !important;
  border-radius:var(--ot-r) !important;
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  font-size:12.5px !important;line-height:1.85 !important;
  padding:22px !important;overflow-x:auto;margin:0 0 26px;
}
/* başlık çubuğu — yalnızca JS etiket bastıysa */
.body-public pre[data-ot-label]{padding-top:66px !important}
.body-public pre[data-ot-label]::before{
  content:attr(data-ot-label);
  position:absolute;inset:0 0 auto 0;height:44px;
  display:flex;align-items:center;padding-left:82px;
  background:var(--ot-ink2);border-bottom:1px solid var(--ot-line-soft);
  border-radius:var(--ot-r) var(--ot-r) 0 0;
  font-size:11px;letter-spacing:.02em;color:var(--ot-fg3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:18px;
}
.body-public pre[data-ot-label]::after{
  content:"";position:absolute;top:17px;left:22px;
  width:10px;height:10px;border-radius:50%;background:var(--ot-line);
  box-shadow:18px 0 0 var(--ot-line),36px 0 0 var(--ot-line);
}
/* sözdizimi renkleri — token'ları ot-theme.js sarıyor */
.body-public .ot-k{color:var(--ot-accent2)}          /* anahtarlar */
.body-public .ot-s{color:#4ADE80}                    /* metinler   */
.body-public .ot-n,.body-public .ot-b{color:#F0B429} /* sayı/bool  */
.body-public .ot-c{color:var(--ot-fg3);font-style:normal} /* yorum  */
.body-public code{
  font-family:"IBM Plex Mono",ui-monospace,monospace !important;
  color:var(--ot-accent2) !important;background:transparent !important;
}

/* -------------------------------------------------------------------------
   11) FOOTER (#block_152)
   ---------------------------------------------------------------------- */
.body-public .wrapper-content__footer{
  background:var(--ot-ink2) !important;
  border-top:1px solid var(--ot-line-soft);
  padding:64px 0 40px;           /* demo ile aynı nefes payı */
}
.body-public #block_152{padding-block:0 !important}
.body-public .footer p,.body-public .footer a{font-size:14px;color:var(--ot-fg3) !important}
.body-public .footer a:hover{color:var(--ot-fg) !important}

/* -------------------------------------------------------------------------
   12) JS ile eklenen parçalar (ot-theme.js)
   ---------------------------------------------------------------------- */
/* rozet şeridi */
.ot-eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  padding:7px 14px 7px 9px;border-radius:100px;margin-bottom:22px;
  border:1px solid var(--ot-line);background:var(--ot-panel);
  backdrop-filter:blur(10px);
}
.ot-eyebrow i{
  width:6px;height:6px;border-radius:50%;background:#22C55E;display:block;
  box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:ot-pulse 2.4s infinite;
}
@keyframes ot-pulse{
  0%{box-shadow:0 0 0 0 rgba(34,197,94,.5)}
  70%{box-shadow:0 0 0 9px rgba(34,197,94,0)}
  100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}
}
.ot-eyebrow span{
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ot-fg2);
}

/* hero: CTA butonları + güven satırı (JS ekler) */
.ot-hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.ot-hero-facts{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin:34px 0 0;padding:26px 0 0;
  border-top:1px solid var(--ot-line-soft);list-style:none;
}
.ot-hero-facts li{
  display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ot-fg2);
}
.ot-hero-facts svg{width:14px;height:14px;color:var(--ot-accent2);flex:none}

/* platform şeridi */
.ot-strip{
  border-block:1px solid var(--ot-line-soft);
  background:var(--ot-ink2);padding:26px 0;overflow:hidden;
}
.ot-strip__label{
  text-align:center;margin-bottom:20px;
  font-family:"IBM Plex Mono",monospace;font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ot-fg3);
}
.ot-marquee{display:flex;width:max-content;animation:ot-slide 34s linear infinite}
.ot-marquee:hover{animation-play-state:paused}
@keyframes ot-slide{to{transform:translateX(-50%)}}
.ot-mq{
  display:flex;align-items:center;gap:12px;padding:0 44px;
  color:var(--ot-fg3);transition:color .3s var(--ot-ease);
}
.ot-mq:hover{color:var(--ot-fg)}
.ot-mq svg{width:22px;height:22px;fill:currentColor}
.ot-mq b{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 84,"wght" 600;
  font-size:16px;letter-spacing:-.01em;
}

/* ---- JS'in eklediği bölümler: ortak kabuk ---- */
.ot-sec{padding:clamp(56px,7vw,96px) 0}
.ot-wrap{width:100%;max-width:1240px;margin-inline:auto;padding-inline:28px}
.ot-kicker+.ot-h2,.ot-h2{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 88,"wght" 720;
  font-size:clamp(32px,4.2vw,50px);letter-spacing:-.032em;line-height:1.03;
  margin:14px 0 0;color:var(--ot-fg);
}
.ot-lead{margin:18px 0 0;color:var(--ot-fg2);font-size:16.5px;font-weight:350;max-width:52ch}
/* NOT: `.body-public a{color:...}` kuralı `.ot-btn`den daha özgül olduğu için
   buton metinleri mavi kalıyordu (dolu butonda mavi-üstü-mavi = görünmez).
   Bu yüzden buton renkleri .body-public ile birlikte yazılıyor. */
.body-public .ot-btn,
.body-public a.ot-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 28px;border-radius:100px;
  font-size:15px;font-weight:600;letter-spacing:-.01em;
  border:1px solid var(--ot-line);color:var(--ot-fg) !important;text-decoration:none;
  transition:transform .35s var(--ot-ease),background .3s,box-shadow .35s;
}
.body-public .ot-btn:hover{transform:translateY(-2px);background:var(--ot-panel2)}
.body-public .ot-btn--solid,
.body-public a.ot-btn--solid{
  background:var(--ot-accent);color:#fff !important;border-color:transparent;
  box-shadow:0 10px 30px -10px var(--ot-glow);
}
.body-public .ot-btn--solid:hover{background:var(--ot-accent);box-shadow:0 18px 40px -12px var(--ot-glow)}

/* ---- API tanıtımı ---- */
.ot-api{display:grid;grid-template-columns:.9fr 1.1fr;gap:52px;align-items:center}
.ot-api__list{list-style:none;margin:30px 0 0;padding:0}
.ot-api__list li{
  display:flex;gap:14px;align-items:baseline;padding:14px 0;
  border-top:1px solid var(--ot-line-soft);
  font-size:14.5px;color:var(--ot-fg2);font-weight:350;
}
.ot-api__list b{
  font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ot-accent2);
  min-width:96px;font-weight:500;
}
.ot-code{
  border-radius:var(--ot-r);border:1px solid var(--ot-line);overflow:hidden;
  background:var(--ot-ink2);box-shadow:var(--shadow);
}
.ot-code__bar{display:flex;align-items:center;gap:8px;padding:13px 16px;border-bottom:1px solid var(--ot-line-soft)}
.ot-code__bar i{width:10px;height:10px;border-radius:50%;background:var(--ot-line);display:block}
.ot-code__bar span{margin-left:8px;font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ot-fg3)}
.ot-code pre{
  margin:0 !important;padding:22px !important;overflow-x:auto;border:0 !important;
  border-radius:0 !important;background:transparent !important;
  font-family:"IBM Plex Mono",monospace !important;font-size:12.5px !important;
  line-height:1.85 !important;color:var(--ot-fg2) !important;
}
.ot-code pre::before,.ot-code pre::after{display:none !important}

/* ---- CTA bandı ---- */
.ot-cta{
  position:relative;border-radius:32px;overflow:hidden;padding:88px 40px;text-align:center;
  border:1px solid var(--ot-line);background:var(--ot-ink2);
}
.ot-cta__glow{
  position:absolute;width:900px;height:520px;left:50%;top:-60%;transform:translateX(-50%);
  background:radial-gradient(circle,var(--ot-glow),transparent 65%);filter:blur(60px);
}
.ot-cta h2{
  position:relative;font-family:"Archivo",sans-serif;
  font-variation-settings:"wdth" 86,"wght" 740;
  font-size:clamp(34px,5.4vw,66px);letter-spacing:-.035em;line-height:1;margin:0;color:var(--ot-fg);
}
.ot-cta p{position:relative;margin:22px auto 0;max-width:48ch;color:var(--ot-fg2);font-size:16.5px;font-weight:350}
.ot-cta__row{position:relative;display:flex;gap:12px;justify-content:center;margin-top:38px;flex-wrap:wrap}

/* ---- footer sütunları ---- */
.ot-fgrid{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:40px}
/* NOT: `.body-public h4{...!important}` genel başlık kuralı buraya da vuruyordu
   (Archivo + beyaz). O yüzden mono/gri değerleri !important ile geri alıyoruz. */
.body-public .ot-fgrid h4{
  font-family:"IBM Plex Mono",monospace !important;
  font-size:10.5px !important;letter-spacing:.16em !important;
  text-transform:uppercase;color:var(--ot-fg3) !important;
  margin:0 0 18px !important;font-weight:500 !important;
  line-height:1.4 !important;
}
.body-public .ot-fgrid a{
  display:block;font-size:14px;color:var(--ot-fg2) !important;padding:6px 0;
  text-decoration:none;transition:color .25s,transform .25s var(--ot-ease);
}
.body-public .ot-fgrid a:hover{color:var(--ot-fg) !important;transform:translateX(3px)}
.ot-fgrid p{margin:16px 0 0;color:var(--ot-fg3);font-size:14px;max-width:36ch;font-weight:350;line-height:1.65}
.body-public a.ot-fbrand{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 78,"wght" 800;
  font-size:17px;letter-spacing:.02em;text-transform:uppercase;
  color:var(--ot-fg) !important;display:inline-flex;align-items:center;gap:9px;padding:0;
}
.body-public a.ot-fbrand:hover{transform:none}
.body-public a.ot-fbrand::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--ot-accent);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ot-accent) 18%,transparent);flex:none;
}
/* alt bar */
.ot-fbot{
  margin-top:56px;padding-top:26px;border-top:1px solid var(--ot-line-soft);
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--ot-fg3);
}
.body-public .ot-fbot a{color:var(--ot-fg3) !important;text-decoration:none}
.body-public .ot-fbot a:hover{color:var(--ot-fg) !important}
/* sosyal ikonlar (yalnızca CONFIG.social doluysa) */
.ot-fsocial{display:flex;gap:10px}
.body-public .ot-fsocial a{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--ot-line-soft);
  display:grid;place-items:center;transition:all .3s var(--ot-ease);
}
.body-public .ot-fsocial a:hover{
  background:var(--ot-fg);color:var(--ot-ink) !important;
  border-color:transparent;transform:translateY(-3px);
}
.ot-fsocial svg{width:14px;height:14px;fill:currentColor}

/* ---- servis tablosu (yalnızca CONFIG.services doldurulursa) ---- */
.ot-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:26px 0}
.ot-tab{
  height:38px;padding:0 16px;border-radius:100px;border:1px solid var(--ot-line-soft);
  font-size:13.5px;color:var(--ot-fg2);background:none;cursor:pointer;
  display:inline-flex;align-items:center;transition:all .3s var(--ot-ease);
}
.ot-tab:hover{color:var(--ot-fg);border-color:var(--ot-line)}
.ot-tab.on{background:var(--ot-fg);color:var(--ot-ink);border-color:transparent}
.ot-table{border:1px solid var(--ot-line);border-radius:var(--ot-r);overflow:hidden;background:var(--ot-panel)}
.ot-thead,.ot-trow{
  display:grid;grid-template-columns:64px 1fr 130px 150px 120px;
  align-items:center;gap:16px;padding:16px 24px;
}
.ot-thead{
  border-bottom:1px solid var(--ot-line);
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ot-fg3);
}
.ot-trow{border-bottom:1px solid var(--ot-line-soft);transition:background .3s}
.ot-trow:last-child{border-bottom:0}
.ot-trow:hover{background:var(--ot-panel2)}
.ot-trow .id{font-family:"IBM Plex Mono",monospace;font-size:12.5px;color:var(--ot-fg3)}
.ot-trow .nm{font-size:15px;letter-spacing:-.01em;color:var(--ot-fg)}
.ot-trow .nm small{display:block;color:var(--ot-fg3);font-size:12.5px;margin-top:3px}
.ot-trow .rt{
  font-family:"Archivo",sans-serif;font-variation-settings:"wdth" 84,"wght" 640;
  font-size:17px;letter-spacing:-.02em;color:var(--ot-fg);
}
.ot-trow .rt span{font-size:11px;color:var(--ot-fg3);font-variation-settings:"wght" 400;margin-left:3px}
.ot-trow .mm{font-family:"IBM Plex Mono",monospace;font-size:12px;color:var(--ot-fg2)}
.ot-badge{
  display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:100px;
  font-size:11.5px;font-weight:600;border:1px solid var(--ot-line-soft);color:var(--ot-fg2);
}
.ot-badge.ok{color:#4ADE80;border-color:rgba(74,222,128,.25);background:rgba(74,222,128,.08)}

@media (max-width:1080px){
  .ot-api{grid-template-columns:1fr;gap:36px}
  .ot-fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:820px){
  .ot-thead{display:none}
  .ot-trow{grid-template-columns:1fr auto;gap:6px 14px;padding:18px}
  .ot-trow .id{display:none}
  .ot-trow .mm{grid-column:1;font-size:11.5px}
  .ot-trow .rt{grid-row:1;grid-column:2;text-align:right}
  .ot-trow .ref{grid-row:2;grid-column:2;justify-self:end}
}
@media (max-width:560px){
  .ot-wrap{padding-inline:20px}
  .ot-cta{padding:60px 22px;border-radius:24px}
  .ot-fgrid{grid-template-columns:1fr}
}

/* scroll reveal */
.ot-js .ot-rv{opacity:0;transform:translateY(26px);
  transition:opacity .9s var(--ot-ease),transform .9s var(--ot-ease)}
.ot-js .ot-rv.ot-in{opacity:1;transform:none}

/* -------------------------------------------------------------------------
   13) RESPONSIVE
   ---------------------------------------------------------------------- */
@media (max-width:991px){
  .body-public .totals-card{border-right:0 !important;border-bottom:1px solid var(--ot-line-soft) !important}
  .body-public .block-signin-text__block-text-title h1{max-width:none}
}
@media (max-width:575px){
  .body-public .card,.body-public .component_card .card{padding:24px 20px !important;border-radius:22px !important}
  .body-public .totals-card{padding:28px 22px !important}
  .body-public .features-block__card{padding:26px 22px 30px !important}
}
@media (prefers-reduced-motion:reduce){
  .body-public *{animation-duration:.001ms !important;transition-duration:.001ms !important}
  .ot-js .ot-rv{opacity:1;transform:none}
}