/* ============================================================
   OTOPARK OTOMASYON — site katmani
   ------------------------------------------------------------
   AIOR tasarim sisteminin (assets/aior-theme/css/aior-theme.css)
   USTUNE biner. Renk, tipografi, golge ve yaricap TOKENLARI
   oradan gelir; burada yalnizca bu sitenin bilesenleri tanimlanir
   (kahraman slaytı, ozellik izgarasi, adimlar, blog kartlari,
   giris karti, yazi tipografisi).

   KURAL: token EZILMEZ. Bir renk gerekiyorsa var(--...) kullan;
   sabit hex yazma — aksi halde gece/gunduz temasindan biri kirilir.
   ============================================================ */

/* ==========================================================
   1. SAYFA ISKELETI
   ========================================================== */

body {
  background: var(--bg-sunken);
  color: var(--fg);
}

.oto-main {
  display: block;
  min-height: 50vh;
}

/* Bolum ritmi: her blok ayni dikey nefesi alir. */
.oto-section {
  padding-block: clamp(48px, 6vw, 88px);
}
.oto-section--tight { padding-block: clamp(32px, 4vw, 56px); }
.oto-section--alt { background: var(--bg); border-block: 1px solid var(--line); }

.oto-section-head {
  display: flex;
  flex-direction: column;
  /* align-items OLMADAN flex sutunu cocuklari GERER: .aior-eyebrow rozeti
     inline-block olmasina ragmen 68ch boyunca uzayip serit gibi goruntuyordu. */
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
  max-width: 68ch;
}
.oto-section-head--center {
  margin-inline: auto;
  text-align: center;
  align-items: center;
}

/* ==========================================================
   2. KAHRAMAN SLAYTI (hero slider)
   ----------------------------------------------------------
   Slaytlar UST USTE durur; gorunur olan .is-on tasir. Yukseklik
   en uzun slayta gore sabitlenir ki gecis sirasinda sayfa
   ziplamasin (CLS).
   ========================================================== */

.oto-hero {
  position: relative;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.oto-hero::before {
  /* Aksan isigi — tek renk, dusuk yogunluk. */
  content: "";
  position: absolute;
  inset: -40% 55% auto -10%;
  height: 120%;
  background: radial-gradient(closest-side, var(--accent-tint), transparent 70%);
  pointer-events: none;
}

.oto-slides {
  position: relative;
  display: grid;
}
.oto-slide {
  grid-area: 1 / 1;
  display: grid;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
  padding-block: clamp(40px, 6vw, 80px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.oto-slide.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity .5s ease, transform .5s ease, visibility 0s;
}
@media (min-width: 900px) {
  .oto-slide { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}

.oto-slide-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.oto-slide-title {
  font-size: clamp(30px, 4.4vw, 50px);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.oto-slide-title em {
  font-style: normal;
  color: var(--accent);
}
.oto-slide-lede {
  font-size: var(--fs-lg);
  line-height: 1.65;
  color: var(--fg-muted);
  margin: 0;
  max-width: 52ch;
}
.oto-slide-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

/* Slayt gorseli — kamera cercevesi gibi. */
.oto-shot {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--bg-soft);
  box-shadow: var(--sh-lg);
  /* 4/3 sutunu gereginden uzun yapip metnin altinda bosluk biraktiriyordu. */
  aspect-ratio: 16 / 10;
}
.oto-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.oto-shot-bar {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  font-size: var(--fs-sm);
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .72), transparent);
}
.oto-plate {
  font-weight: 700;
  letter-spacing: .08em;
  background: #fff;
  color: #0a0e1a;
  border-radius: var(--r-sm);
  padding: 3px 10px;
  font-variant-numeric: tabular-nums;
}
.oto-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
}
.oto-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .7);
  animation: oto-pulse 2s infinite;
}
@keyframes oto-pulse {
  70% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* Slayt kontrolleri */
.oto-slider-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 28px;
}
.oto-dot {
  width: 32px;
  height: 4px;
  border: 0;
  padding: 0;
  border-radius: var(--r-pill);
  background: var(--line-strong);
  cursor: pointer;
  transition: background .25s ease, width .25s ease;
}
.oto-dot[aria-selected="true"] {
  background: var(--accent);
  width: 52px;
}
.oto-dot:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ==========================================================
   3. GUVEN SERIDI (rakamlar)
   ========================================================== */

.oto-stats {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 900px) { .oto-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.oto-stat {
  background: var(--bg);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.oto-stat strong {
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.oto-stat span {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
}

/* ==========================================================
   4. OZELLIK KARTLARI
   ========================================================== */

.oto-feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px;
  height: 100%;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.oto-feature:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.oto-feature-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--accent-tint);
  color: var(--accent);
  flex: none;
}
.oto-feature h3 {
  font-size: var(--fs-lg);
  font-weight: 700;
  margin: 0;
}
.oto-feature p {
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.65;
}

/* ==========================================================
   5. ADIMLAR — bir gecis nasil isler
   ========================================================== */

.oto-steps {
  display: grid;
  gap: 20px;
  counter-reset: oto-step;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 640px)  { .oto-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .oto-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.oto-step {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 24px 22px;
}
.oto-step::before {
  counter-increment: oto-step;
  content: counter(oto-step, decimal-leading-zero);
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--accent);
  margin-bottom: 10px;
  font-variant-numeric: tabular-nums;
}
.oto-step h3 {
  font-size: var(--fs-lg);
  margin: 0 0 6px;
}
.oto-step p {
  margin: 0;
  color: var(--fg-muted);
  line-height: 1.65;
}

/* ==========================================================
   6. IKILI BLOK (metin + gorsel)
   ========================================================== */

.oto-split {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}
@media (min-width: 900px) { .oto-split { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.oto-split img {
  width: 100%;
  border-radius: var(--r-2xl);
  border: 1px solid var(--line);
  display: block;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}
.oto-split-copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.oto-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.oto-checks li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--fg-soft);
  line-height: 1.6;
}
.oto-checks svg { flex: none; color: var(--accent); margin-top: 3px; }

/* ==========================================================
   7. BLOG KARTLARI
   ========================================================== */

.oto-posts { display: grid; gap: 20px; }
@media (min-width: 640px)  { .oto-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .oto-posts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.oto-post {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.oto-post:hover {
  border-color: var(--line-strong);
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
}
.oto-post img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid var(--line);
}
.oto-post-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.oto-post-cat {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.oto-post-title { font-size: var(--fs-md); font-weight: 700; line-height: 1.45; margin: 0; }

/* ==========================================================
   8. CAGRI SERIDI
   ========================================================== */

.oto-cta {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: center;
  text-align: center;
  box-shadow: var(--sh-sm);
}
.oto-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ==========================================================
   9. GIRIS KARTI — kendi basina duran sayfa, kenar cubugu YOK
   ========================================================== */

.oto-auth {
  min-height: 68vh;
  display: grid;
  place-items: center;
  padding-block: clamp(32px, 6vw, 72px);
}
.oto-auth-card {
  width: 100%;
  max-width: 27rem;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(24px, 4vw, 36px);
  box-shadow: var(--sh-lg);
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.oto-auth-head { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.oto-auth-head h1 { font-size: var(--fs-2xl); margin: 0; }
.oto-auth-note {
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  text-align: center;
  margin: 0;
}

/* ==========================================================
   10. FORMLAR
   ========================================================== */

/* Form KART UZERINDE durur.
   Temanin kendi kurali: "input one tone brighter than card" — yani alanin
   gorunur olmasi, ustunde durdugu YUZEYE baglidir. Iletisim formu dogrudan
   sayfaya konuldugunda alan dolgusu (--bg-sunken) sayfa zeminiyle BIREBIR
   ayni cikiyordu; olculdu (08.09.2026): acik temada da koyu temada da
   rgb esitligi, yani alanlar yalnizca 1px kenarliktan seciliyordu. */
.oto-card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  padding: clamp(20px, 3vw, 32px);
  box-shadow: var(--sh-sm);
}

.oto-form { display: flex; flex-direction: column; gap: 14px; }
.oto-field { display: flex; flex-direction: column; gap: 6px; }
.oto-field > span { font-size: var(--fs-sm); font-weight: 700; color: var(--fg-soft); }

/* !important ZORUNLU, kapris degil: temanin 17. bolumu (XenForo platform
   ezmeleri) `textarea { background: var(--bg) !important }` diye KAPSAMSIZ bir
   eleman secicisi tasiyor ve bu sayfaya da sizyor. Onemli olmayan hicbir kural
   onu yenemez. Sonucu olculdu: textarea acik temada BEYAZ, koyu temada sayfa
   tonu oluyor, yanindaki input'lar ise baska bir ton — ayni formda iki farkli
   yuzey. Asagidaki iki blok input ve textarea'yi TEK yuzeyde birlestirir. */
.oto-form input,
.oto-form textarea {
  width: 100%;
  font: inherit;
  color: var(--fg) !important;
  background: var(--bg-sunken) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-md) !important;
  padding: 11px 13px;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
/* Koyu temada --bg-sunken SAYFA zeminidir; kart uzerinde bir ton PARLAK olan
   --bg-soft kullanilir (temanin "one tone brighter" kuralinin koyu karsiligi). */
:root[data-theme="dark"] .oto-form input,
:root[data-theme="dark"] .oto-form textarea {
  background: var(--bg-soft) !important;
}
.oto-form textarea { resize: vertical; min-height: 8rem; }
.oto-form input::placeholder,
.oto-form textarea::placeholder { color: var(--fg-faint); }
.oto-form input:hover,
.oto-form textarea:hover { border-color: var(--line-strong) !important; }
.oto-form input:focus,
.oto-form textarea:focus,
.oto-form input:focus-visible,
.oto-form textarea:focus-visible {
  outline: none;
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-ring) !important;
}
.oto-flash {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  line-height: 1.55;
  border: 1px solid var(--line);
  background: var(--bg-soft);
}
.oto-flash--ok { border-color: var(--success-solid); color: var(--success-solid); }
.oto-flash--err { border-color: var(--danger-solid); color: var(--danger-solid); }

.oto-contact { display: grid; gap: clamp(24px, 4vw, 40px); align-items: start; }
@media (min-width: 900px) { .oto-contact { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); } }
.oto-contact-aside { display: flex; flex-direction: column; gap: 18px; }
.oto-contact-aside img { width: 100%; border-radius: var(--r-xl); border: 1px solid var(--line); display: block; }
.oto-info {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 18px 20px;
}
.oto-info h2 { font-size: var(--fs-md); margin: 0 0 6px; }
.oto-info p { margin: 0; color: var(--fg-muted); line-height: 1.65; }
.oto-info a { color: var(--accent); }

/* ==========================================================
   11. YAZI TIPOGRAFISI (blog + hukuk sayfalari)
   ========================================================== */

.oto-prose { max-width: 72ch; margin-inline: auto; }
.oto-prose h1 {
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 0 0 16px;
  text-wrap: balance;
}
.oto-prose h2 { font-size: var(--fs-xl); margin: 32px 0 10px; }
.oto-prose h3 { font-size: var(--fs-lg); margin: 24px 0 8px; }
.oto-prose p,
.oto-prose li { color: var(--fg-soft); line-height: 1.75; }
.oto-prose p { margin: 0 0 14px; }
.oto-prose ul,
.oto-prose ol { margin: 0 0 16px; padding-left: 1.25rem; display: grid; gap: 6px; }
.oto-prose a { color: var(--accent); }
.oto-prose img,
.oto-prose .oto-prose-hero {
  width: 100%;
  border-radius: var(--r-xl);
  border: 1px solid var(--line);
  margin: 8px 0 24px;
  display: block;
}
.oto-prose table { width: 100%; border-collapse: collapse; margin: 0 0 18px; }
.oto-prose th,
.oto-prose td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; }

.oto-backlink { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); text-decoration: none; font-weight: 700; }
.oto-backlink:hover { text-decoration: underline; }

/* ==========================================================
   12. UST BAR EKLERI — dil rozeti, panel dugmesi
   ========================================================== */

.oto-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 700;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
}
.oto-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.oto-brand img { display: block; height: 30px; width: auto; }

/* Ust bar — Panele giris: en sag, AIOR mavi buton (utility yuksekligine sigar). */
.topbar-utility a.oto-panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 26px;
  padding: 0 0.7rem;
  margin-left: 2px;
  border-radius: 0.4rem;
  background: var(--accent-solid);
  color: var(--on-solid) !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 140ms ease;
}
.topbar-utility a.oto-panel-cta:hover {
  background: var(--accent-solid-hover);
  color: var(--on-solid) !important;
}

/* Mobil menu — tema .topbar-main icinde konumlandirir. */
.oto-mobile-menu { display: grid; gap: 2px; padding: 8px 0 14px; }
.oto-mobile-menu a {
  padding: 10px 10px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--fg);
  font-weight: 600;
}
.oto-mobile-menu a:hover { background: var(--bg-tinted); }
.oto-mobile-menu a[aria-current="page"] { color: var(--accent); background: var(--accent-tint); }

/* ==========================================================
   13. CEREZ SERIDI
   ========================================================== */

/* Dar ekranda serit FAB'larin ustunde durur: 'Tamam' dugmesi WhatsApp
   dugmesinin ALTINDA kaliyor ve tiklanamiyordu. */
.oto-cookie {
  position: fixed;
  inset: auto 16px calc(16px + 68px) 16px;
  z-index: 60;
  margin-inline: auto;
  max-width: 46rem;
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xl);
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
@media (min-width: 640px) { .oto-cookie { inset: auto 16px 16px 16px; } }
/* [hidden] SINIFIN ALTINDA KALIR: .oto-cookie'ye display:flex verdigimiz an
   tarayicinin [hidden]{display:none} kurali ezilir ve 'Tamam' seridi
   kapatmaz. Ayni tuzak mobil menude de yasandi. */
.oto-cookie[hidden] { display: none !important; }
.oto-cookie p { margin: 0; flex: 1 1 18rem; font-size: var(--fs-sm); color: var(--fg-muted); line-height: 1.55; }
.oto-cookie a { color: var(--accent); }

/* ==========================================================
   14. HAREKET AZALTMA
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
  .oto-slide,
  .oto-feature,
  .oto-post,
  .oto-dot { transition: none; }
  .oto-live i { animation: none; }
}

/* ==========================================================
   15. FORM KORUMASI (lib/FormGuard.php cikti siniflari)
   ----------------------------------------------------------
   FormGuard panelle ORTAK ve guvenlik kritik; sinif adlarini
   degistirmemek icin bicimlendirme buraya yazildi. `.flash-err`
   dugumunu reCAPTCHA betigi CALISMA ANINDA uretir.
   ========================================================== */

.form-guard-math {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--fg-soft);
  display: block;
}
.form-guard-math strong { color: var(--accent); font-variant-numeric: tabular-nums; }
.oto-form .form-guard-math + input { margin-top: -6px; }
.rc-note {
  margin: -4px 0 0;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
}
.oto-form .flash-err {
  margin: 0;
  padding: 11px 14px;
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  border: 1px solid var(--danger-solid);
  color: var(--danger-solid);
  background: var(--bg-soft);
}
/* Bal kupu: gorunmez kalmali ama ekran okuyucudan da gizlenmeli. */
.aior-honeypot { position: absolute !important; left: -9999px !important; }