/* ==========================================================================
   CSKEDPEDIA — optivera.css
   Yalnızca /optivera.html sayfasına ait stiller.
   Ortak parçalar base.css içinde. Sayfa aydınlık; OPTISMART renkleriyle
   (kobalt + turkuaz) kısa bir tanıtım. Ortak parçalar için cskedpedia.css
   ile aynı desen izlenir ama ayrı dosya olarak tutulur — çatı sayfasının
   stiline sıkı sıkıya bağlanmasın.
   ========================================================================== */

:root{
  --bg:            #FFFFFF;
  --bg-grad:       radial-gradient(120% 70% at 50% -12%, #EEF2FC 0%, #FFFFFF 55%);
  --panel:         #F6F7FB;
  --panel-solid:   #F1F3FA;
  --ink:           #0C1730;
  --ink-2:         #56637E;
  --ink-3:         #8894AB;
  --line:          #E4E7F2;
  --line-soft:     #EEF0F8;
  --vurgu:         #002695;   /* OPTISMART kobalt */
  --vurgu-dim:     rgba(0,38,149,.08);
  --os-turkuaz:    #009EA3;   /* OPTISMART ikincil vurgu */
}

.ov{ max-width: 560px; margin: 0 auto; padding: 0 22px calc(64px + var(--safe-b)) }

.ov-geri{
  display: inline-block; margin-top: calc(22px + var(--safe-t));
  font-family: var(--font-marka); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; color: var(--ink-3);
}
.ov-geri:hover{ color: var(--vurgu) }

/* --- üst --- */
.ov-giris{ padding: 26px 0 0; text-align: center }
.ov-etiket{
  font-family: var(--font-marka); font-size: 10.5px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--os-turkuaz); font-weight: 700; margin: 0;
}
.ov-giris h1{
  font-family: var(--font-marka); font-weight: 600;
  font-size: clamp(34px, 9vw, 48px); line-height: 1.05;
  margin: 14px 0 0; letter-spacing: -.01em; color: var(--vurgu);
}
.ov-slogan{
  font-size: 12.5px; color: var(--ink-3); margin: 12px 0 0; font-weight: 600;
  letter-spacing: .01em;
}
.ov-ozet{
  font-size: 14.5px; line-height: 1.72; color: var(--ink-2);
  margin: 18px auto 0; max-width: 46ch; text-wrap: balance;
}
.ov-rozet{
  display: inline-block; margin-top: 18px;
  font-family: var(--font-marka); font-size: 9.5px; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 700; padding: 5px 11px; border-radius: 6px;
  background: var(--panel-solid); color: var(--ink-3); border: 1px solid var(--line);
}

.ov-ayrac{ height: 1px; background: var(--line); margin: 44px 0 }

/* --- bölüm başlığı --- */
.ov-bolum-baslik{
  font-family: var(--font-marka); font-size: 10.5px; letter-spacing: .22em;
  text-transform: uppercase; color: var(--vurgu); font-weight: 700; margin: 0 0 8px;
}
.ov-bolum-ozet{ font-size: 13.5px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.7 }

/* --- adımlar (nasıl çalışacak) --- */
.ov-adimlar{ display: flex; flex-direction: column; gap: 14px }
.ov-adim{
  display: flex; gap: 14px; align-items: flex-start;
  padding: 16px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line);
}
.ov-no{
  flex: 0 0 26px; width: 26px; height: 26px; border-radius: 8px;
  background: var(--vurgu); color: #FFFFFF; display: grid; place-items: center;
  font-family: var(--font-marka); font-size: 12px; font-weight: 700;
}
.ov-adim b{ display: block; font-size: 14px; font-weight: 700; color: var(--ink) }
.ov-adim p{ margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2) }

/* --- ilkeler grid --- */
.ov-ilkeler{ display: grid; gap: 10px }
@media (min-width: 480px){ .ov-ilkeler{ grid-template-columns: repeat(2, 1fr) } }
.ov-ilke-k{
  padding: 16px; border-radius: 14px; background: var(--panel-solid); border: 1px solid var(--line);
}
.ov-ilke-k b{
  font-family: var(--font-marka); font-size: 12.5px; font-weight: 700;
  letter-spacing: .01em; display: block; color: var(--os-turkuaz);
}
.ov-ilke-k p{ margin: 7px 0 0; font-size: 12px; line-height: 1.6; color: var(--ink-2) }

/* --- ilke alıntısı (uygulama ilkesi) --- */
.ov-not{
  margin-top: 8px; padding: 26px 22px; border-radius: 18px; text-align: center;
  background: var(--vurgu); color: #E7EDFB;
}
.ov-not p{
  margin: 0; font-family: var(--font-baslik); font-style: italic;
  font-size: 18px; line-height: 1.5; text-wrap: balance;
}
.ov-not small{
  display: block; margin-top: 14px; font-family: var(--font-marka);
  font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: #AEBCEB;
}

/* --- alt --- */
.ov-alt{
  margin-top: 46px; padding-top: 26px; border-top: 1px solid var(--line);
  text-align: center; font-size: 12px; color: var(--ink-3); line-height: 1.8;
}
.ov-imza-satiri{
  font-family: var(--font-marka); font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--vurgu); margin: 0 0 10px;
}
.ov-by{ font-family: var(--font-marka); font-weight: 400; font-size: 11px; color: var(--ink-3) }
.ov-by .marka{ font-size: 12px }
.ov-alt a{ text-decoration: underline }