/* =========================================
   ROOT / BASE / CONTAINER — main.css (CLEAN)
   Only global: root/base/btn/container/header/footer
========================================= */

:root{
  --wrap: 1200px;
  --pad: 24px;

  --text: #111;
  --bg: #fff;

  --grad-d: #6a3df0;
  --grad-e: #2b7bff;
  
   /* Otelion Purple Gradient (mor ağırlıklı) */
  --ot-grad-a: #6A3DF0;  /* ana mor */
  --ot-grad-b: #C23CFF;  /* mor-pembe */
  --ot-grad-c: #3A2BFF;  /* derin mor (opsiyonel) */
}

*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  width:100%;
}

/* ✅ ÖNEMLİ: height:100% KULLANMIYORUZ (double scrollbar fix) */
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, "Noto Sans", "Helvetica Neue", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;

  min-height: 100vh;
  display: flex;
  flex-direction: column;

  overflow-x: hidden; /* yatay taşmayı kesin kapat */
}

img, svg, video{ max-width:100%; height:auto; }
a{ color: inherit; }

.container{
  width: min(var(--wrap), 100%);
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* =========================================
   STICKY FOOTER (footer altta kalsın)
========================================= */
main{ flex: 1 0 auto; }
header, footer{ flex: 0 0 auto; }

/* =========================================
   SCROLL LOCK (MENÜ AÇIKKEN TEK SCROLL)
   JS: html/body'ye .ot-drawer-open ekliyor
========================================= */
html.ot-drawer-open{
  overflow: hidden !important;
}

/* Body sabitle: açılınca arkayı kaydırmaz + scrollbar üretmez */
html.ot-drawer-open body{
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden !important;
}

/* ekstra güvenlik: yanlış width hesaplarından taşma olursa */
html{ overflow-y: hidden; }


/* =========================================
   STICKY FOOTER (footer altta kalsın)
========================================= */
main{ flex: 1 0 auto; }
header, footer{ flex: 0 0 auto; }

/* =========================================
   SCROLL LOCK (MENÜ AÇIKKEN TEK SCROLL)
   JS html'e .ot-noScroll ekliyor. :contentReference[oaicite:4]{index=4}
========================================= */
html.ot-noScroll{
  overflow: hidden !important;
  height: 100% !important;
}

/* En kritik parça: body’yi sabitle => scrollbar gider */
html.ot-noScroll body{
  position: fixed;
  inset: 0;
  width: 100%;
  overflow: hidden !important;
}

/* =========================================================
   GLOBAL FIXES (double scrollbar + overflow-x)
========================================================= */
*,
*::before,
*::after{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
  width:100%;
  overflow-x:hidden; /* sağa taşmayı kökten kes */
}

html, body{ height:100%; }

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* template’lerde main kullanıyorsun, footer’ı aşağı iter */
main{ flex:1 0 auto; }
header, footer{ flex:0 0 auto; }

/* =========================================================
   HEADER (Global)
========================================================= */
.ot-header{
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.ot-header.is-sticky{
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
}

.ot-header__bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  min-height:74px;
}

.ot-logo img{ max-height:44px; width:auto; display:block; }
.ot-logo__text{ font-weight:800; letter-spacing:.3px; }

.ot-header__center{
  display:flex;
  align-items:center;
  gap:18px;
  flex:1;
  justify-content:center;
}

.ot-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  border-radius:12px;
  text-decoration:none;
  font-weight:700;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
}

.ot-btn--elektra{
  background: linear-gradient(135deg,#3B0764 0%,#6D28D9 55%,#A21CAF 100%) !important;
  color:#fff;
  border:0;
}
.ot-btn--sm{ padding:9px 12px; border-radius:12px; }
.ot-btn--sm{ padding:9px 12px; border-radius:12px; }

.ot-menu{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
  margin:0;
  padding:0;
}

.ot-menu a{
  text-decoration:none;
  font-weight:700;
  color:#111;
  padding:10px 10px;
  border-radius:10px;
}
.ot-menu a:hover{ background: rgba(0,0,0,.05); }

.ot-headerIcons{
  display:flex;
  align-items:center;
  gap:10px;
}

.ot-iconLink{
  width:40px;
  height:40px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:12px;
  border:1px solid rgba(0,0,0,.08);
  text-decoration:none;
  color:#111;
  background:#fff;
}

.ot-only-mobile{ display:none; }
.ot-only-desktop{ display:flex; }

/* =========================================================
   MOBILE BURGER (anchor) — stable tap
========================================================= */
.ot-burger{
  width:46px;
  height:46px;
  border-radius:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  display:inline-flex;
  align-items:center;
  justify-content:center;

  text-decoration:none;
  cursor:pointer;
  user-select:none;
  touch-action:manipulation;
  -webkit-tap-highlight-color: transparent;

  position:relative;
  z-index:1101; /* header üstünde kalsın */
}

.ot-burger__bars{
  width:20px;
  height:14px;
  position:relative;
  display:block;
}

.ot-burger__bars::before,
.ot-burger__bars::after{
  content:"";
  position:absolute;
  left:0; right:0;
  height:2px;
  background:#111;
  border-radius:2px;
}
.ot-burger__bars::before{ top:3px; }
.ot-burger__bars::after{ bottom:3px; }

/* =========================================================
   DRAWER (CSS-only via :target) — fixes “menu behind page”
========================================================= */
.ot-drawer{
  position:fixed;
  inset:0;
  z-index:1200;      /* ✅ her şeyin üstünde */
  display:none;      /* kapalıyken DOM görünmez = ekstra scrollbar yok */
}

.ot-drawer:target{ display:block; }

.ot-drawer__overlay{
  position:absolute;
  inset:0;
  background:rgba(2, 6, 23, .55);
}

/* panel */
.ot-drawer__panel{
  position:absolute;
  top:0; right:0;
  width:min(360px, 92vw);
  height:100%;
  background:#fff;   /* ✅ beyaz arka plan */
  border-left:1px solid rgba(0,0,0,.10);
  box-shadow: 0 14px 40px rgba(2, 6, 23, .18);

  transform: translateX(100%);
  transition: transform .22s ease;

  display:flex;
  flex-direction:column;
}

.ot-drawer:target .ot-drawer__panel{
  transform: translateX(0);
}

/* head */
.ot-drawer__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(0,0,0,.08);
}

.ot-drawer__title{ font-weight:800; }

/* nav scroll only inside panel */
.ot-drawer__nav{
  padding:10px 10px 0;
  overflow:auto;
  -webkit-overflow-scrolling: touch;
}

.ot-drawer__list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.ot-drawer__list a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  color:#111;
  background: rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.06);
}
.ot-drawer__list a:hover{
  background: rgba(0,0,0,.07);
}

/* CTA */
.ot-drawer__cta{
  margin-top:auto;
  padding:14px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ot-wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:800;
  color:#fff;
  background:#25D366;
  border:0;
}
.ot-wa:hover{ filter: brightness(.95); }

.ot-mobileSocial{
  display:flex;
  align-items:center;
  gap:10px;
}

/* =========================================================
   Scroll lock (JS hash ile class ekler)
========================================================= */
html.ot-drawer-open,
body.ot-drawer-open{
  overflow:hidden !important;
}

/* =========================================================
   Responsive
========================================================= */
@media (max-width: 980px){
  .ot-nav--desktop,
  .ot-headerIcons{ display:none; }

  .ot-only-desktop{ display:none; }
  .ot-only-mobile{ display:flex; }

  .ot-header__center{ justify-content:flex-start; }
  .ot-header__bar{ gap:10px; }

  .ot-mobileRow{
    display:flex;
    align-items:center;
    gap:10px;
  }
}


.ot-mobileMenu__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom: 10px;
}
.ot-mobileMenu__title{ font-weight:800; }

.ot-mobileMenu__close{
  width:42px; height:42px;
  border-radius: 12px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}

.ot-mmenu{
  list-style:none;
  margin: 10px 0 0;
  padding: 0;
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.ot-mmenu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 12px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight:800;
  color:#111;
  background: rgba(0,0,0,.04);
}
.ot-mmenu a:hover{ background: rgba(0,0,0,.07); }

.ot-mobileMenu__cta{
  margin-top: 14px;
  padding-top: 14px;
  border-top:1px solid rgba(0,0,0,.08);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ot-wa{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding: 11px 12px;
  border-radius: 12px;
  text-decoration:none;
  font-weight:800;
  color:#fff;
  background:#25D366;
  border:0;
}
.ot-wa:hover{ filter: brightness(.95); }

.ot-mobileSocial{
  display:flex;
  align-items:center;
  gap:10px;
}

/* Responsive */
@media (max-width: 980px){
  .ot-nav--desktop,
  .ot-headerIcons{ display:none; }

  .ot-only-desktop{ display:none; }
  .ot-only-mobile{ display:flex; }

  .ot-header__center{ justify-content:flex-start; }
  .ot-header__bar{ gap:10px; }

  .ot-mobileRow{
    display:flex;
    align-items:center;
    gap:10px;
  }
}

@media (max-width: 560px){
  .ot-mobileMenu__inner{ width: 100vw; }
}

/* =========================================
   FOOTER (Global) — Antrasit Gradient
========================================= */
.ot-footer{
  background: linear-gradient(180deg, #0b0f14 0%, #111821 55%, #0a0d12 100%);
  color:#fff;
}

.ot-footer__inner{
  display:grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap:24px;
  padding: 44px 0;
}

.ot-footer__brand{ font-size: 18px; letter-spacing:.4px; }
.ot-footer__desc{ opacity:.9; margin:10px 0 0; max-width: 420px; }

.ot-footer__address{
  margin:12px 0 0;
  opacity:.85;
  line-height:1.55;
  max-width: 460px;
}

.ot-footer__title{ display:block; margin-bottom: 12px; font-weight:800; }

.ot-footerMenu{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:10px;
}
.ot-footerMenu a{
  color:#fff; text-decoration:none; opacity:.88;
}
.ot-footerMenu a:hover{ opacity:1; text-decoration:none; }

.ot-footerLink{
  display:flex; align-items:center; gap:10px;
  color:#fff; text-decoration:none; opacity:.88;
  margin: 8px 0;
}
.ot-footerLink:hover{ opacity:1; text-decoration:none; }

.ot-footer__bottom{
  border-top: 1px solid rgba(255,255,255,.10);
}

.ot-footer__bottomInner{
  padding: 14px 0 22px;
  display:flex;
  justify-content:flex-end; /* ✅ sağa dayalı */
}

.ot-footer__copy{
  opacity:.88;
  text-align:right;
}

.ot-footer__pd{
  color:#fff;
  text-decoration:none;
  font-weight:800;
  margin-left:6px;
}
.ot-footer__pd:hover{
  text-decoration:underline;
  opacity:1;
}

/* =========================
   Page Hero (Global)
========================= */
.ot-pageHero{
  position: relative;
  min-height: 320px;
  padding: 86px 0 64px;
  overflow: hidden;
  color: #fff;
}
@media (max-width: 768px){
  .ot-pageHero{ padding: 72px 0 52px; min-height: 300px; }
}

.ot-pageHero__bg{
  position:absolute; inset:0;
  background-image: var(--ot-hero-bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.03);
}
.ot-pageHero__overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(1200px 500px at 30% 20%, rgba(180,120,255,.35), rgba(0,0,0,0) 60%),
    linear-gradient(180deg, rgba(8,10,18,.35), rgba(8,10,18,.72));
  backdrop-filter: saturate(1.1);
}

.ot-pageHero__in{
  position: relative;
  z-index: 2;
  max-width: 980px;
}

.ot-pageHero__bc{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  font-size: 12px;
  opacity: .92;
  margin-bottom: 10px;
}
.ot-pageHero__bc a{
  color: rgba(220,235,255,.95);
  text-decoration: none;
}
.ot-pageHero__bc a:hover{ text-decoration: underline; }
.ot-pageHero__bc i{
  font-size: 10px;
  opacity: .85;
}

.ot-pageHero__title{
  margin:0 0 10px;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.ot-pageHero__desc{
  margin:0 0 18px;
  max-width: 68ch;
  color: rgba(230,240,255,.92);
  font-size: 15px;
  line-height: 1.7;
}

.ot-pageHero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 6px;
}

/* CTA buttons */
.ot-pageHero__cta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin-top: 10px;
}

.ot-pageHero__btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.22);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
  will-change: transform;
}

.ot-pageHero__btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  filter: saturate(1.06) brightness(1.03);
}

/* 1) Mavi buton */
.ot-pageHero__btn--blue{
  border-color: rgba(43,123,255,.55);
  background: linear-gradient(90deg, #1576e2, #5a03ef);
  color: #fff !important;
}

/* 2) Mor buton */
.ot-pageHero__btn--purple{
  border-color: rgba(162,28,175,.55);
  background: linear-gradient(90deg, rgba(109,40,217,.95), rgba(236,72,153,.90));
  color: #fff !important;
}



@media (max-width: 980px){
  .ot-footer__inner{ grid-template-columns: 1fr; }
  .ot-footer__bottomInner{ justify-content:center; }
  .ot-footer__copy{ text-align:center; }
}