: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 */
.om-hero-banner-box {
  background-color: #fff;
  border: 1px solid var(--om-border);
  border-radius: 24px;
  padding: 2.5rem;
}

/* İ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;
}

/* 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;
  }
}