/* Siteye ozel kucuk duzeltmeler. Tema dosyalarina dokunmadan buraya yaz. */
.form-note { margin-top: 14px; padding: 12px 16px; border-radius: 8px; font-size: 15px; }
.form-note.success { background: rgba(40,167,69,.12); color: #2f9e44; }
.form-note.error   { background: rgba(220,53,69,.12); color: #d64545; }
.pagination-area { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.pagination-area a { padding: 10px 18px; border: 1px solid rgba(255,255,255,.15); border-radius: 8px; }
.pagination-area a.on { background: var(--tj-color-theme-primary, #12A594); color: #fff; }

/* ============ Ic sayfa ust menusu ============
   Anasayfada menu hero'nun uzerinde seffaf durur. Ic sayfalarda
   zemin acik oldugu icin menu koyu bir seride oturur. */
.header-inner-dark {
  background-color: var(--tj-color-theme-dark);
  position: relative;
  z-index: 99;
}
.header-inner-dark .mainmenu > ul > li > a,
.header-inner-dark .header-right-item a,
.header-inner-dark .header-right-item span {
  color: var(--tj-color-common-white);
}
.header-inner-dark .mainmenu > ul > li > a:hover,
.header-inner-dark .mainmenu > ul > li:hover > a,
.header-inner-dark .header-right-item a:hover {
  color: var(--tj-color-theme-primary);
}
/* hamburger cizgileri */
.header-inner-dark .menu_bar span,
.header-inner-dark .menu_bar i,
.header-inner-dark .menu_bar::before,
.header-inner-dark .menu_bar::after {
  background-color: var(--tj-color-common-white);
  color: var(--tj-color-common-white);
}
/* acilir alt menu koyu zeminde okunur kalsin */
.header-inner-dark .mainmenu .sub-menu {
  background-color: var(--tj-color-theme-dark-2);
  border: 1px solid var(--tj-color-border-3);
}
.header-inner-dark .mainmenu .sub-menu li a { color: var(--tj-color-text-body-5); }
.header-inner-dark .mainmenu .sub-menu li a:hover { color: var(--tj-color-theme-primary); }

/* Ic sayfada menu normal akista, ust bosluga gerek yok */
.space-for-header { height: 0; }

/* Sayfa basligi seridi menuyle kesintisiz koyu gorunsun */
.tj-page-header { background-color: var(--tj-color-theme-dark); }

/* ============ Preloader: turuncu ziplayan top ============
   Tema varsayilani nane yesiliydi (#00ffc2 / #20e7b7).
   Marka turuncusuna (#F97316) cevriliyor. */
.tj-preloader .tj-preloader-ball-inner {
  background-color: #F97316;
  box-shadow: 0 0 12px 0 rgba(249, 115, 22, .65);
}
.tj-preloader .tj-preloader-ball {
  background-color: rgba(249, 115, 22, .12);
  box-shadow: 0 0 20px 0 #F97316;
}
.tj-preloader .tj-preloader-ball-shadow {
  background-color: #F97316;
  box-shadow: 0 4px 20px 0 #F97316;
}

/* ============ Anasayfa banner: sagdaki turuncu daireyi kaldir ============
   Banner'da iki bulanik turuncu daire var: ::before (sag ust) ve ::after (sol alt).
   Soldaki (::after) kalsin, sagdaki (::before) kaldirildi. */
.h5-banner-section::before { display: none !important; }

/* ============================================================
   IC SAYFA SIKLASTIRMA  (anasayfa haric)
   Hedef: CMS sayfalari (hakkimizda, gizlilik, kvkk) ve
   haber / hizmet / proje DETAY sayfalarindaki metin bloklari.
   Amac: rahat okunan tipografi, turuncu vurgular, sik gorseller.
   Tema dosyalarina dokunulmaz; hepsi burada.
   ============================================================ */

/* ---- Ortak metin govdesi ---- */
.page-content,
.blog-details-content,
.service-details-content,
.project-details-content {
  color: var(--tj-color-text-body);
  font-size: 17px;
  line-height: 1.85;
}
.page-content p,
.blog-details-content p,
.service-details-content p,
.project-details-content p { margin-bottom: 20px; }

/* ---- Basliklar ---- */
.page-content h2, .page-content h3, .page-content h4,
.blog-details-content h2, .blog-details-content h3, .blog-details-content h4,
.service-details-content h2, .service-details-content h3, .service-details-content h4,
.project-details-content h2, .project-details-content h3, .project-details-content h4 {
  color: var(--tj-color-heading-primary);
  font-weight: 700;
  line-height: 1.3;
  margin: 40px 0 16px;
}
.page-content h2, .blog-details-content h2, .service-details-content h2, .project-details-content h2 {
  font-size: 30px;
  padding-inline-start: 16px;
  border-inline-start: 4px solid var(--tj-color-theme-primary);
}
.page-content h3, .blog-details-content h3, .service-details-content h3, .project-details-content h3 { font-size: 24px; }
.page-content h4, .blog-details-content h4, .service-details-content h4, .project-details-content h4 { font-size: 20px; }

/* ---- Baglantilar ---- */
.page-content a, .blog-details-content a, .service-details-content a, .project-details-content a {
  color: var(--tj-color-theme-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}
.page-content a:hover, .blog-details-content a:hover, .service-details-content a:hover, .project-details-content a:hover { opacity: .75; }

/* ---- Listeler: turuncu isaretli ---- */
.page-content ul, .blog-details-content ul, .service-details-content ul, .project-details-content ul {
  list-style: none; padding: 0; margin: 0 0 22px;
}
.page-content ul li, .blog-details-content ul li, .service-details-content ul li, .project-details-content ul li {
  position: relative; padding-inline-start: 28px; margin-bottom: 12px;
}
.page-content ul li::before, .blog-details-content ul li::before,
.service-details-content ul li::before, .project-details-content ul li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 11px;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--tj-color-theme-primary);
}
.page-content ol, .blog-details-content ol, .service-details-content ol, .project-details-content ol {
  padding-inline-start: 20px; margin: 0 0 22px;
}
.page-content ol li, .blog-details-content ol li, .service-details-content ol li, .project-details-content ol li { margin-bottom: 12px; }

/* ---- Alinti ---- */
.page-content blockquote, .blog-details-content blockquote,
.service-details-content blockquote, .project-details-content blockquote {
  margin: 28px 0; padding: 22px 26px;
  background: rgba(var(--tj-rgb-primary), .06);
  border-inline-start: 4px solid var(--tj-color-theme-primary);
  border-radius: 10px; font-size: 18px; font-style: italic;
  color: var(--tj-color-heading-primary);
}

/* ---- Icerik gorselleri ---- */
.page-content img, .blog-details-content img, .service-details-content img, .project-details-content img {
  border-radius: 12px; margin: 12px 0;
}

/* ---- Tablolar ---- */
.page-content table, .blog-details-content table, .service-details-content table, .project-details-content table {
  width: 100%; border-collapse: collapse; margin: 26px 0; font-size: 15.5px;
  border-radius: 10px; overflow: hidden;
}
.page-content th, .page-content td, .blog-details-content th, .blog-details-content td,
.service-details-content th, .service-details-content td, .project-details-content th, .project-details-content td {
  border: 1px solid var(--tj-color-border-1); padding: 12px 14px; text-align: start; vertical-align: top;
}
.page-content thead th, .blog-details-content thead th, .service-details-content thead th, .project-details-content thead th {
  background: rgba(var(--tj-rgb-primary), .08); color: var(--tj-color-heading-primary); font-weight: 700;
}

/* ---- Buyuk gorseller (kapak) yuvarlak + golge ---- */
.page-thumb, .blog-details-thumb, .service-details-thumb, .project-details-thumb { margin-bottom: 34px; }
.page-thumb img, .blog-details-thumb img, .service-details-thumb img, .project-details-thumb img {
  border-radius: 18px; box-shadow: 0 20px 45px rgba(12, 30, 33, .13); width: 100%; height: auto;
}

/* ---- Giris (lead) paragrafi: yalniz CMS/detay sayfalarinda ---- */
.col-lg-9:has(> .page-content) > .desc,
.service-details-content > .desc:first-child,
.project-details-content > .desc:first-child {
  font-size: 20px; line-height: 1.7; color: var(--tj-color-theme-dark-3);
  margin-bottom: 26px; font-weight: 500;
}

/* ---- Kenar cubugu widget'ini kartlastir (hizmet/proje/iletisim) ---- */
.site-main .sidebar-widget {
  background: var(--tj-color-common-white);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 16px; padding: 28px 26px;
  box-shadow: 0 12px 30px rgba(12, 30, 33, .06);
}
.site-main .sidebar-widget .title { margin-bottom: 18px; }

/* ---- Kart listelerinde nazik hover yukselmesi ---- */
.site-main .blog-item, .site-main .service-item, .site-main .project-item {
  transition: transform .35s ease, box-shadow .35s ease;
}
.site-main .blog-item:hover, .site-main .service-item:hover, .site-main .project-item:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 45px rgba(12, 30, 33, .12);
}

/* ---- Ic sayfalarda bolum bosluklarini biraz nefeslendir ---- */
.site-main .section-gap { padding-top: 90px; padding-bottom: 90px; }

/* ============ Referanslarimiz ayri sayfa: logo izgarasi ============ */
.ref-grid { row-gap: 24px; }
.ref-logo-box {
  height: 130px;
  display: flex; align-items: center; justify-content: center;
  padding: 22px;
  background: var(--tj-color-common-white);
  border: 1px solid var(--tj-color-border-1);
  border-radius: 16px;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.ref-logo-box:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 38px rgba(12, 30, 33, .12);
  border-color: rgba(var(--tj-rgb-primary), .35);
}
.ref-logo-box img {
  max-height: 100%; max-width: 100%; width: auto; object-fit: contain;
  filter: grayscale(100%); opacity: .75; transition: filter .3s ease, opacity .3s ease;
}
.ref-logo-box:hover img { filter: grayscale(0); opacity: 1; }

/* ============================================================
   ILETISIM SAYFASI — modern form + iletisim karti
   ============================================================ */
/* Form kutusu */
.contact-form {
  padding: 44px 40px;
  border: 1px solid var(--tj-color-border-1);
  box-shadow: 0 20px 50px rgba(12, 30, 33, .06);
}
.contact-form .form-input { margin-bottom: 20px; }
.contact-form .form-input label {
  display: block; font-size: 14px; font-weight: 600;
  color: var(--tj-color-heading-primary); margin-bottom: 8px;
}
/* Kesikli alt-cizgi yerine dolgulu, yuvarlak kutu inputlar */
.contact-form .form-input input[type=text],
.contact-form .form-input input[type=email],
.contact-form .form-input input[type=tel],
.contact-form .form-input input,
.contact-form .form-input textarea {
  width: 100% !important;
  background-color: var(--tj-color-grey-1) !important;
  color: var(--tj-color-heading-primary) !important;
  border: 1px solid var(--tj-color-border-1) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  transition: border-color .25s, box-shadow .25s, background-color .25s;
}
.contact-form .form-input textarea { min-height: 150px; resize: vertical; }
.contact-form .form-input input:focus,
.contact-form .form-input textarea:focus {
  outline: none;
  background-color: var(--tj-color-common-white) !important;
  border-color: var(--tj-color-theme-primary) !important;
  box-shadow: 0 0 0 3px rgba(var(--tj-rgb-primary), .15) !important;
}
.contact-form .form-input input::placeholder,
.contact-form .form-input textarea::placeholder { color: var(--tj-color-text-body-3); }

/* Iletisim bilgi karti */
.contact-info-card {
  background: var(--tj-color-theme-dark);
  color: var(--tj-color-common-white);
  border-radius: 18px;
  padding: 40px 36px;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.contact-info-card .ci-title { color: #fff; font-size: 22px; margin: 0 0 8px; }
.contact-info-card .ci-lead { color: rgba(255,255,255,.7); font-size: 15px; margin: 0 0 28px; line-height: 1.6; }
.contact-info-card .ci-list { list-style: none; margin: 0 0 26px; padding: 0; }
.contact-info-card .ci-list li { display: flex; gap: 16px; align-items: flex-start; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.contact-info-card .ci-list li:first-child { padding-top: 0; }
.contact-info-card .ci-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.contact-info-card .ci-ico {
  flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--tj-color-theme-primary); color: #fff;
}
.contact-info-card .ci-ico svg { width: 20px; height: 20px; }
.contact-info-card .ci-body { display: flex; flex-direction: column; gap: 3px; }
.contact-info-card .ci-label { font-size: 12.5px; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.55); }
.contact-info-card .ci-val { color: #fff; font-size: 16px; font-weight: 500; line-height: 1.5; text-decoration: none; }
.contact-info-card a.ci-val:hover { color: var(--tj-color-theme-primary); }
.contact-info-card .ci-socials .ci-label { display: block; margin-bottom: 12px; }
.contact-info-card .ci-soc-links { display: flex; gap: 10px; }
.contact-info-card .ci-soc-links a {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08); color: #fff; transition: background .25s, color .25s;
}
.contact-info-card .ci-soc-links a:hover { background: var(--tj-color-theme-primary); color: #fff; }
.contact-info-card .ci-wa {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 24px;
  background: #25D366; color: #fff; font-weight: 600;
  padding: 13px 22px; border-radius: 12px; transition: opacity .25s;
}
.contact-info-card .ci-wa:hover { opacity: .9; color: #fff; }
@media (max-width: 991px) { .contact-info-card { margin-top: 30px; } }


/* BG-REPEAT-FIX-V1 */
/* 'Fikirden Global Pazarlara' sureç kartlarinda arka plan
   gorseli icin background-repeat hic belirtilmemisti, bu da
   tarayici varsayilani olan 'repeat' e dusup gorsel/metin
   katmaninin hayalet gibi ikinci kez cizilmesine (ghosting)
   yol aciyordu. no-repeat ile duzeltiliyor. */
.h5-working-process-item {
  background-repeat: no-repeat;
}