:root {
  --om-primary: #5b4fe8;
  --om-primary-dark: #4338ca;
  --om-navy: #171b34;
  --om-text: #333a54;
  --om-muted: #6b7280;
  --om-bg-soft: #f5f4ff;
  --om-border: #e7e5fa;
}

/* Inter — Google Fonts'tan Google'ın kendi sunucusuna istek atmak yerine kendi sunucumuzda
   barındırılıyor (ziyaretçi IP'sinin rızasız Google'a gitmesi ayrı bir GDPR riski, bkz. Çerez
   Politikası sayfası). Değişken (variable) font olduğu için tek dosya 100-900 arası tüm
   ağırlıkları kapsıyor, latin + latin-ext (Türkçe karakterler: ı/İ, ğ/Ğ, ş/Ş dahil) yeterli. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
  color: var(--om-text);
  background-color: #fff;
}

/* Bootstrap'ın varsayılan .container genişlikleri (1140/1320px) geniş ekranlarda
   çok fazla sağ/sol boşluk bırakıyordu — içerik alanı sitede geneli genişletildi. */
@media (min-width: 1200px) {
  .container {
    max-width: 1200px;
  }
}

@media (min-width: 1400px) {
  .container {
    max-width: 1500px;
  }
}

h1, h2, h3, h4, .om-heading {
  color: var(--om-navy);
  font-weight: 700;
}

a {
  color: var(--om-primary);
  text-decoration: none;
}

a:hover {
  color: var(--om-primary-dark);
}

.text-muted-om {
  color: var(--om-muted) !important;
}

/* Buttons */
.btn-om-primary {
  background-color: var(--om-primary);
  border-color: var(--om-primary);
  color: #fff;
  font-weight: 600;
}

.btn-om-primary:hover {
  background-color: var(--om-primary-dark);
  border-color: var(--om-primary-dark);
  color: #fff;
}

.btn-om-outline {
  background-color: #fff;
  border: 1px solid var(--om-border);
  color: var(--om-navy);
  font-weight: 600;
}

.btn-om-outline:hover {
  background-color: var(--om-bg-soft);
  color: var(--om-navy);
}

/* Navbar */
.om-navbar {
  background-color: #fff;
  border-bottom: 1px solid var(--om-border);
  padding-top: .85rem;
  padding-bottom: .85rem;
}



.om-logo-img {
  height: 60px;
  width: auto;
}

.om-brand {
  font-weight: 700;
  color: var(--om-navy);
  font-size: 1.15rem;
}

.om-navbar .nav-link {
  color: var(--om-text);
  font-weight: 500;
  padding-left: .9rem;
  padding-right: .9rem;
}

.om-navbar .nav-link.active,
.om-navbar .nav-link:hover {
  color: var(--om-primary);
}

/* Hero */
.om-hero {
  background: linear-gradient(180deg, var(--om-bg-soft) 0%, #fff 100%);
  padding: 2rem 0 3rem;
}

.om-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--om-primary);
  background-color: #ece9ff;
  padding: .35rem .8rem;
  border-radius: 999px;
  margin-bottom: 1rem;
}

.om-hero h1 {
  font-size: 2.6rem;
  line-height: 1.15;
}

.om-hero-lead {
  color: var(--om-muted);
  font-size: 1.05rem;
}

.om-feature-strip {
  border-top: 1px solid var(--om-border);
  margin-top: 1.25rem;
  padding-top: 1rem;
}

.om-feature-strip .om-feature-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 600;
  color: var(--om-navy);
  font-size: .92rem;
}

.om-feature-strip i {
  color: var(--om-primary);
  font-size: 1.15rem;
}

/* Hero side card */
.om-hero-card {
  background-color: var(--om-bg-soft);
  border-radius: 18px;
  padding: 1.75rem;
  border: 1px solid var(--om-border);
}

.om-hero-card .om-hero-card-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: .9rem 0;
}

.om-hero-card .om-hero-card-item + .om-hero-card-item {
  border-top: 1px solid var(--om-border);
}

.om-hero-card .om-icon-box {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--om-primary);
  font-size: 1.2rem;
  box-shadow: 0 1px 2px rgba(23, 27, 52, .08);
}

/* Metin + görselin birlikte tek bir "banner" olarak göründüğü kutu — site arka planındaki
   .om-hero geçişiyle aynı yönde (yukarı çok hafif açık, aşağı çok hafif koyu) ince bir gradyan;
   düz #fff'ten biraz derinlik katıyor ama fark edilir bir renk sıçraması yaratmıyor. */
.om-hero-banner-box {
  background: linear-gradient(180deg, #ffffff 0%, var(--om-bg-soft) 100%);
  border: 1px solid var(--om-border);
  border-radius: 24px;
  padding: 2.5rem;
  /* Slaytlar arası içerik uzunluğu farklı olduğundan taşan/büyütülmüş görsel (bkz.
     .om-showcase-img-lg) kartın yuvarlak köşelerinden dışarı taşmasın diye kırpılıyor. */
  overflow: hidden;
}

/* Kayan (carousel) hero banner — birden fazla .om-hero-banner-box slayt olarak geçiyor */
.om-hero-carousel {
  position: relative;
}

.om-hero-carousel .carousel-item {
  transition: transform .6s ease-in-out;
}

/* Slaytlar arasında metin uzunluğu ve görsel en-boy oranı farklı olduğundan kart yüksekliği
   slayt değişince zıplıyordu (bkz. kullanıcı raporu, 2026-09-29) — genişlik aralığı başına en
   uzun slaytın gerçekte ihtiyaç duyduğu yükseklik sabitleniyor (tek/geniş bir değer yerine,
   aksi halde çoğu genişlikte kart gereğinden çok daha yüksek/boş kalıyordu, bkz. 2. rapor).
   İçerik .align-items-center ile zaten dikeyde ortalanıyor. */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .om-hero-banner-box {
    min-height: 598px;
  }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
  .om-hero-banner-box {
    min-height: 526px;
  }
}

@media (min-width: 1400px) and (max-width: 1499.98px) {
  .om-hero-banner-box {
    min-height: 521px;
  }
}

@media (min-width: 1500px) {
  .om-hero-banner-box {
    min-height: 542px;
  }
}

/* Metin sütunu her zaman görselin üstünde kalsın — .om-showcase-img-lg (bkz. aşağı) kasıtlı
   olarak sütun genişliğinden taşacak şekilde büyütülüyor, metinle çakışırsa metin görünür kalmalı. */
.om-hero-banner-box > .row > .col-lg-6:first-child {
  position: relative;
  z-index: 2;
}

.om-hero-banner-box > .row > .col-lg-6:last-child {
  position: relative;
  z-index: 1;
}

/* Oklar kartın iç dolgu (padding) alanında durur, metin/görsel içeriğine hiç girmez */
.om-hero-carousel-btn {
  width: 2.5rem;
  height: 2.5rem;
  top: 50%;
  bottom: auto;
  left: -1.25rem;
  right: auto;
  transform: translateY(-50%);
  background-color: #fff;
  border: 1px solid var(--om-border);
  border-radius: 50%;
  opacity: 1;
  box-shadow: 0 6px 16px rgba(23, 27, 52, .12);
  color: var(--om-primary);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .15s ease;
  z-index: 2;
}

.om-hero-carousel-btn.carousel-control-next {
  left: auto;
  right: -1.25rem;
}

.om-hero-carousel-btn:hover,
.om-hero-carousel-btn:focus {
  background-color: var(--om-bg-soft);
  color: var(--om-primary-dark);
}

/* Metin ve görsel sütunları lg altında alt alta yığıldığından, oklar dikeyde
   içeriğin üstüne biner — o genişliklerde okları gizleyip yalnızca noktalar
   ve dokunarak kaydırma ile gezinilir. */
@media (max-width: 991.98px) {
  .om-hero-carousel-btn {
    display: none;
  }
}

.om-hero-carousel-indicators {
  position: static;
  margin: 1.25rem 0 0;
}

.om-hero-carousel-indicators [data-bs-target] {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--om-border);
  opacity: 1;
  border: none;
  text-indent: 0;
}

.om-hero-carousel-indicators .active {
  background-color: var(--om-primary);
}

/* İnce yatay özellik barı (hero banner altında) */
.om-hero-bar {
  background-color: var(--om-bg-soft);
  border: 1px solid var(--om-border);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}

.om-hero-bar-item {
  flex: 1 1 0;
  min-width: 220px;
  display: flex;
  align-items: center;
  gap: .85rem;
}

.om-hero-bar-item + .om-hero-bar-item {
  border-left: 1px solid var(--om-border);
  padding-left: 1.25rem;
}

.om-hero-bar .om-icon-box {
  flex: none;
  margin-bottom: 0;
  background-color: #fff;
}

@media (max-width: 767.98px) {
  .om-hero-bar-item + .om-hero-bar-item {
    border-left: none;
    border-top: 1px solid var(--om-border);
    padding-left: 0;
    padding-top: 1rem;
  }
}

/* Sections */
.om-section {
  padding: 3.5rem 0;
}

.om-section-soft {
  background-color: var(--om-bg-soft);
}

.om-section-label {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--om-primary);
}

/* Cards — height:100% BİLEREK yok: .om-card, grid'de yan yana kartlarda EŞİT
   YÜKSEKLİK istendiğinde .h-100 ile birlikte kullanılmalı (bkz. Home/Index,
   Home/Urunler, Home/Hakkimizda). Tek sütun akışta (Destek tablosu, SSS
   accordion kartları, Duyurular timeline kartları) .h-100 EKLENMEMELİ —
   Bootstrap .row flex olduğu için height:100% orada kartı sütunun tüm
   yüksekliğine (sonraki kardeşlerin alanına) taşırıp içeriği alttaki
   bölüme/footer'a kaydırıyordu. */
.om-card {
  background-color: #fff;
  border: 1px solid var(--om-border);
  border-radius: 16px;
  padding: 1.75rem;
  transition: box-shadow .15s ease, transform .15s ease;
}

.om-card:hover {
  box-shadow: 0 10px 24px rgba(23, 27, 52, .08);
  transform: translateY(-2px);
}

/* Accordion (SSS) kartlarında hover-lift kapalı: Bootstrap'ın collapse
   height animasyonuyla aynı anda tetiklenince tarayıcıda geçici çizim
   sıçramasına yol açabiliyor. */
.accordion-item.om-card {
  transition: none;
}

.accordion-item.om-card:hover {
  box-shadow: none;
  transform: none;
}

.om-card .om-icon-box {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: var(--om-bg-soft);
  color: var(--om-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1rem;
}

.om-card h3, .om-card h5 {
  font-size: 1.08rem;
}

.om-badge-pill {
  display: inline-block;
  font-size: .74rem;
  font-weight: 600;
  color: var(--om-primary-dark);
  background-color: var(--om-bg-soft);
  border: 1px solid var(--om-border);
  border-radius: 999px;
  padding: .18rem .65rem;
  margin: .15rem .25rem .15rem 0;
}

.om-badge-yakinda {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: #92400e;
  background-color: #fef3c7;
  border: 1px solid #fde68a;
  border-radius: 999px;
  padding: .18rem .6rem;
  vertical-align: middle;
}

/* Mini summary cards (Hakkımızda / Duyurular / Destek strip) */
.om-mini-card {
  background-color: #fff;
  border: 1px solid var(--om-border);
  border-radius: 16px;
  padding: 1.5rem;
  height: 100%;
}

.om-mini-card .om-mini-title {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  color: var(--om-navy);
  margin-bottom: 1rem;
}

.om-mini-card .om-mini-title i {
  color: var(--om-primary);
  font-size: 1.2rem;
}

.om-duyuru-item {
  display: flex;
  gap: .85rem;
  padding: .6rem 0;
}

.om-duyuru-item + .om-duyuru-item {
  border-top: 1px dashed var(--om-border);
}

.om-duyuru-date {
  flex: none;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background-color: var(--om-bg-soft);
  color: var(--om-primary-dark);
  font-weight: 700;
  font-size: .78rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.1;
}

/* Footer */
.om-footer {
  background-color: #22243b;
  color: #c8cae0;
  padding: 2.25rem 0 1.25rem;
}

.om-footer-logo {
  display: inline-block;
  background-color: #fff;
  border-radius: 10px;
  padding: .5rem .9rem;
}

.om-footer-logo img {
  height: 40px;
  display: block;
}

.om-footer a {
  color: #c8cae0;
}

.om-footer a:hover {
  color: #7367f0;
}

.om-footer h6 {
  color: #fff;
  font-weight: 700;
  margin-bottom: .85rem;
}

.om-footer .om-footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .12);
  margin-top: 1.5rem;
  padding-top: 1rem;
  font-size: .85rem;
  color: rgba(200, 202, 224, .75);
}

.om-footer .om-footer-bottom a {
  color: rgba(200, 202, 224, .75);
}

.om-footer .om-footer-bottom a:hover {
  color: #7367f0;
}

/* Page header (inner pages) */
.om-page-header {
  background: linear-gradient(180deg, var(--om-bg-soft) 0%, #fff 100%);
  padding: 3rem 0 2.5rem;
}

.om-page-header h1 {
  font-size: 2.1rem;
}

/* Duyurular — zaman tüneli (om-duyuru WP eklentisindeki timeline yapısından esinlenildi) */
.om-filter-chip {
  display: inline-block;
  font-size: .85rem;
  font-weight: 600;
  color: var(--om-text);
  background-color: #fff;
  border: 1px solid var(--om-border);
  border-radius: 999px;
  padding: .4rem 1rem;
  margin: 0 .4rem .5rem 0;
}

.om-filter-chip:hover {
  color: var(--om-primary);
  border-color: var(--om-primary);
}

.om-filter-chip.active {
  background-color: var(--om-primary);
  border-color: var(--om-primary);
  color: #fff;
}

.om-timeline {
  isolation: isolate;
}

.om-timeline-group {
  display: grid;
  grid-template-columns: 140px 32px 1fr;
  column-gap: 0;
}

.om-timeline-side {
  position: sticky;
  top: 90px;
  align-self: start;
  padding-top: 20px;
  background-color: #fff;
  z-index: 1;
}

.om-timeline-side .om-timeline-year {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--om-navy);
  line-height: 1;
}

.om-timeline-side .om-timeline-month {
  display: block;
  color: var(--om-primary);
  font-weight: 600;
  margin-top: .15rem;
}

.om-timeline-spine {
  position: relative;
  align-self: stretch;
}

.om-timeline-spine::before {
  content: "";
  position: absolute;
  left: 15px;
  top: .6rem;
  bottom: .6rem;
  width: 2px;
  background-color: var(--om-border);
}

.om-timeline-items {
  display: grid;
  gap: 1.25rem;
  padding-bottom: 2.25rem;
  padding-left: 1.5rem;
}

.om-timeline-group:last-child .om-timeline-items {
  padding-bottom: 0;
}

.om-timeline-item img {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 1rem;
}

.om-timeline-meta {
  color: var(--om-muted);
  font-size: .85rem;
}

.om-badge-onem-onemli {
  color: #92400e;
  background-color: #fef3c7;
  border-color: #fde68a;
}

.om-badge-onem-zorunlu {
  color: #991b1b;
  background-color: #fee2e2;
  border-color: #fecaca;
}

@media (max-width: 767.98px) {
  .om-timeline-group {
    grid-template-columns: 1fr;
  }

  .om-timeline-side {
    position: static;
    display: flex;
    align-items: baseline;
    gap: .5rem;
    margin-bottom: .75rem;
    padding-top: 0;
  }

  .om-timeline-side .om-timeline-year,
  .om-timeline-side .om-timeline-month {
    display: inline;
  }

  .om-timeline-side .om-timeline-year {
    font-size: 1.3rem;
  }

  .om-timeline-spine {
    display: none;
  }

  .om-timeline-items {
    padding-left: 0;
  }
}

/* Showcase (dashboard önizleme) görseli — Ana Sayfa hero'sunda kullanılıyor */
.om-showcase-img {
  width: 100%;
  height: auto;
  border-radius: 16px;
}

/* OCR banner görseli (geniş/kısa en-boy oranı) aynı sütun genişliğinde diğer slaytlara göre
   belirgin küçük duruyordu (bkz. kullanıcı raporu, 2026-09-29) — metin sütununun ölçüsü
   değişmeden, sadece görsel ölçekleniyor; taşan kısım .om-hero-banner-box'ın overflow:hidden'ı
   ile kırpılıyor, metnin üstüne binmesin diye de sütun z-index'leri var (yukarıda). */
.om-showcase-img-lg {
  transform: scale(1.22);
}

/* Hakkımızda fotoğrafları (mini kart + tam sayfa banner) */
.om-about-photo-img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
}

.om-about-banner-img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 16px;
}

/* Destek — Program İndirmeleri (DB'den, ana program başlığı + altında sürüm satırları) */
.om-download-group {
  padding: 1.1rem 1.5rem;
}

.om-download-group + .om-download-group {
  border-top: 1px solid var(--om-border);
}

.om-download-group-title {
  font-weight: 700;
  color: var(--om-navy);
  margin-bottom: .5rem;
}

.om-download-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .5rem 0;
}

.om-download-row + .om-download-row {
  border-top: 1px dashed var(--om-border);
}

/* Çerez onay bandı */
.om-cerez-bandi {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1030;
  background-color: var(--om-navy);
  color: #dcdfef;
  padding: .9rem 0;
  box-shadow: 0 -4px 16px rgba(23, 27, 52, .18);
  transform: translateY(100%);
  transition: transform .25s ease;
}

.om-cerez-bandi a {
  color: #fff;
  text-decoration: underline;
}

.om-cerez-bandi.om-cerez-bandi-goster {
  transform: translateY(0);
}

@media (max-width: 575.98px) {
  .om-cerez-bandi p {
    font-size: .8rem;
  }
}

/* Duyuru/Güncelleme İçerik ve Özet alanları düz metin (textarea) — kullanıcı satır
   sonu/madde işareti girse bile normal HTML akışında hepsi tek boşluğa indirgenip
   düzleşiyordu (2026-09-24, kullanıcı raporu: madde işaretli/paragraflı metin management'ta
   düzgün girilmiş ama sitede tek bloğa yapışık çıkıyordu). pre-line: yeni satırları korur,
   ardışık boşlukları yine de tek boşluğa indirger (fazladan satır sonu istifini önler). */
.om-icerik {
  white-space: pre-line;
}

/* GİB/dijital.gib.gov.tr'den çekilen dış duyuru HTML içeriği (Word'den yapıştırılmış stiller,
   geniş tablolar dahil) — sayfa düzenini bozmasın diye kapsayıcıya sığdırılıyor. */
.gib-duyuru-icerik {
  max-width: 100%;
  overflow-wrap: break-word;
}

.gib-duyuru-icerik img {
  max-width: 100%;
  height: auto;
}

.gib-duyuru-icerik table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}