/*
 * Meryem Yerli — ön yüz tabanı (kütüphanesiz).
 * Bootstrap 5.3 + main.css'teki eski normalize / Bootstrap grid / modal kopyalarının yerine sitenin kendi
 * kodu: sıfırlama, flexbox ızgara (bileşen sütunları), düğme, sayfalama, mobil menü. Bootstrap sınıf adı
 * kullanılmaz (yalnız genel .container / .row). Değerler eski birleşik görünümün ölçülmüş
 * karşılığıdır (1440 ve 390 genişlikte piksel ve hesaplanmış stil kıyası); "sadeleştirirken" değiştirilirse
 * görünüm kayar. Kurallar: project-docs/onyuz-kutuphanesiz.md
 */

/* ---------- 1. Sıfırlama ---------- */

*,
::before,
::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root {
    scroll-behavior: smooth;
  }
}

html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  margin: 1rem 0;
  color: inherit;
  border: 0;
  border-top: 1px solid;
  opacity: 0.25;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: inherit;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

h2 {
  font-size: calc(1.325rem + 0.9vw);
}

h3 {
  font-size: calc(1.3rem + 0.6vw);
}

h4 {
  font-size: calc(1.275rem + 0.3vw);
}

h5 {
  font-size: 1.25rem;
}

h6 {
  font-size: 1rem;
}

@media (min-width: 1200px) {
  h2 {
    font-size: 2rem;
  }
  h3 {
    font-size: 1.75rem;
  }
  h4 {
    font-size: 1.5rem;
  }
}

p {
  margin-top: 0;
  margin-bottom: 1rem;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline dotted;
  cursor: help;
  text-decoration-skip-ink: none;
}

address {
  margin-bottom: 1rem;
  font-style: normal;
  line-height: inherit;
}

ol,
ul {
  padding-left: 2rem;
}

dl,
ol,
ul {
  margin-top: 0;
  margin-bottom: 1rem;
}

ol ol,
ol ul,
ul ol,
ul ul {
  margin-bottom: 0;
}

dt {
  font-weight: 700;
}

dd {
  margin-bottom: 0.5rem;
  margin-left: 0;
}

blockquote {
  margin: 0 0 1rem;
}

b,
strong {
  font-weight: bolder;
}

dfn {
  font-style: italic;
}

small {
  font-size: 80%;
}

mark {
  padding: 0.1875em;
  color: #000;
  background-color: #ff0;
}

sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

a {
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
  color: inherit;
  text-decoration: none;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

pre {
  display: block;
  margin-top: 0;
  margin-bottom: 1rem;
  overflow: auto;
}

pre code {
  font-size: inherit;
  color: inherit;
  word-break: normal;
}

code {
  color: #d63384;
  word-wrap: break-word;
}

a > code {
  color: inherit;
}

kbd {
  padding: 0.1875rem 0.375rem;
  color: #fff;
  background-color: #212529;
  border-radius: 0.25rem;
}

kbd kbd {
  padding: 0;
}

figure {
  margin: 1em 40px;
}

audio,
video {
  display: inline-block;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

img,
svg {
  vertical-align: middle;
}

img {
  border-style: none;
}

svg:not(:root) {
  overflow: hidden;
}

table {
  caption-side: bottom;
  border-collapse: collapse;
}

caption {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  color: rgba(33, 37, 41, 0.75);
  text-align: left;
}

th {
  text-align: inherit;
  text-align: -webkit-match-parent;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: inherit;
  border-style: solid;
  border-width: 0;
}

label {
  display: inline-block;
}

button {
  border-radius: 0;
}

button:focus:not(:focus-visible) {
  outline: 0;
}

button,
input,
optgroup,
select,
textarea {
  margin: 0;
  font-family: sans-serif;
  font-size: 100%;
  line-height: 1.15;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

[role="button"] {
  cursor: pointer;
}

select {
  word-wrap: normal;
}

select:disabled {
  opacity: 1;
}

[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
  display: none !important;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button:not(:disabled),
[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled) {
  cursor: pointer;
}

::-moz-focus-inner {
  padding: 0;
  border-style: none;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

textarea {
  overflow: auto;
  resize: vertical;
}

fieldset {
  min-width: 0;
  padding: 0.35em 0.75em 0.625em;
  margin: 0;
  border: 0;
}

legend {
  float: left;
  display: table;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-bottom: 0.5rem;
  font-size: calc(1.275rem + 0.3vw);
  line-height: inherit;
  color: inherit;
  white-space: normal;
}

@media (min-width: 1200px) {
  legend {
    font-size: 1.5rem;
  }
}

legend + * {
  clear: left;
}

progress {
  display: inline-block;
  vertical-align: baseline;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-year-field {
  padding: 0;
}

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

::-webkit-search-decoration,
::-webkit-search-cancel-button {
  -webkit-appearance: none;
}

::-webkit-color-swatch-wrapper {
  padding: 0;
}

::-webkit-file-upload-button {
  font: inherit;
  -webkit-appearance: button;
}

::file-selector-button {
  font: inherit;
  -webkit-appearance: button;
}

output {
  display: inline-block;
}

iframe {
  border: 0;
}

details,
menu {
  display: block;
}

summary {
  display: list-item;
  cursor: pointer;
}

canvas {
  display: inline-block;
}

template {
  display: none;
}

[hidden] {
  display: none !important;
}

/* ---------- 2. Izgara (flexbox): .container > .row > bileşen sütunu ----------
   Kenar boşluğu container'da 24px, sütunda 12px (eski birleşik görünüm). Sütun genişliği bileşenin
   kendi sınıfıyla verilir (Bootstrap sütun adı kullanılmaz); verilmeyen sütun tam genişliktir. */

.container {
  width: 100%;
  padding-right: 1.5rem;
  padding-left: 1.5rem;
  margin-right: auto;
  margin-left: auto;
}

@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

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

.row {
  display: flex;
  flex-wrap: wrap;
  margin-top: 0;
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.row > * {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 100%;
  max-width: 100%;
  padding-right: 0.75rem;
  padding-left: 0.75rem;
  margin-top: 0;
}

/* Sayaçlar telefonda ikişer */
.counter-col {
  width: 50%;
}

/* ≥768: tablet */
@media (min-width: 768px) {
  .blog-col,
  .why-col,
  .gallery-col,
  .video-col,
  .family-field-half,
  .test-field-half {
    width: 50%;
  }

  .counter-col,
  .service-col,
  .listing-col {
    width: 33.33333333%;
  }

  .recommend-col {
    width: 25%;
  }

  /* Aile bilgi formu: ortada, 10/12 */
  .family-form-col {
    width: 83.33333333%;
    margin-left: 8.33333333%;
  }
}

/* ≥992: masaüstü */
@media (min-width: 992px) {
  .nav-logo-col,
  .counter-col {
    width: 16.66666667%;
  }

  .nav-menu-col {
    width: 83.33333333%;
  }

  .about-media-col,
  .about-text-col,
  .faq-media-col,
  .faq-list-col,
  .home-form-text-col,
  .home-form-box-col,
  .form-col-half,
  .contact-col,
  .team-col,
  .testimonial-col,
  .blog-col {
    width: 50%;
  }

  .why-col,
  .video-col,
  .detail-aside {
    width: 33.33333333%;
  }

  .gallery-col,
  .page-sidebar {
    width: 25%;
  }

  .page-main.has-sidebar {
    width: 75%;
  }

  .detail-main {
    width: 66.66666667%;
  }

  .detail-wide,
  .cta-text-col {
    width: 58.33333333%;
  }

  .detail-narrow,
  .cta-action-col {
    width: 41.66666667%;
  }

  /* Bölüm başlığı ve dar içerik: ortada, 8/12 */
  .section-head,
  .content-narrow {
    width: 66.66666667%;
    margin-left: 16.66666667%;
  }
}

/* İletişim sayfasında açıklama ile bilgiler arası */
.contact-intro {
  margin-bottom: 3rem !important;
}


/* ---------- 3. Düğme ---------- */
/* Renksiz .button'da üstüne gelince / basılıyken renk ve zemin devralınır (eski davranış); tema renklerini
   .btn-style vb. main.css verir. */

.button {
  display: inline-block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: center;
  text-decoration: none;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.375rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.button:hover {
  color: inherit;
  background-color: transparent;
  border-color: transparent;
}

.button:focus-visible {
  color: inherit;
  background-color: transparent;
  border-color: transparent;
  outline: 0;
}

.button.active,
.button.is-open,
.button:first-child:active,
.button:not(:first-child):active {
  color: inherit;
  background-color: transparent;
  border-color: currentcolor;
}

.button.is-disabled,
.button:disabled,
fieldset:disabled .button {
  color: inherit;
  pointer-events: none;
  background-color: transparent;
  border-color: currentcolor;
  opacity: 0.65;
}

.menu-close {
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: 0.25em;
  color: #000;
  background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center / 1em auto no-repeat;
  border: 0;
  border-radius: 0.375rem;
  opacity: 0.5;
}

.menu-close:hover {
  color: #000;
  text-decoration: none;
  opacity: 0.75;
}

.menu-close:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
  opacity: 1;
}

.menu-close:disabled,
.menu-close.is-disabled {
  pointer-events: none;
  user-select: none;
  opacity: 0.25;
}

/* ---------- 4. Sayfa başlığı bandı (.breadcrumb) ve sayfalama — adlar çekirdek şablonundan ---------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 1rem;
  list-style: none;
}

.pagination {
  display: flex;
  justify-content: center !important;
  padding-left: 0;
  list-style: none;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  color: #0d6efd;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-link:hover {
  z-index: 2;
  color: #0a58ca;
  background-color: #f8f9fa;
  border-color: #dee2e6;
}

.page-link:focus {
  z-index: 3;
  color: #0a58ca;
  background-color: #e9ecef;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.active > .page-link,
.page-link.active {
  z-index: 3;
  color: #fff;
  background-color: #0d6efd;
  border-color: #0d6efd;
}

.page-item.disabled > .page-link {
  color: rgba(33, 37, 41, 0.75);
  pointer-events: none;
  background-color: #e9ecef;
  border-color: #dee2e6;
}

.page-item:not(:first-child) .page-link {
  margin-left: -1px;
}

.page-item:first-child .page-link {
  border-top-left-radius: 0.375rem;
  border-bottom-left-radius: 0.375rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.375rem;
  border-bottom-right-radius: 0.375rem;
}

/* ---------- 5. Geçiş ve mobil menü ----------
   main.js menüyü şu sınıf akışıyla açar: body.mobile-menu-open, .mobile-menu.is-open,
   .mobile-menu-backdrop.has-fade.is-open. main.css'teki soldan kayan menü (.from-left) bu sınıflara bağlıdır. */

.has-fade {
  transition: opacity 0.15s linear;
}

.has-fade:not(.is-open) {
  opacity: 0;
}

.mobile-menu-open {
  overflow: hidden;
}

.mobile-menu-open .mobile-menu {
  overflow-x: hidden;
  overflow-y: auto;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1050;
  display: none;
  width: 100%;
  height: 100%;
  overflow: hidden;
  outline: 0;
}

/* Tam ekran sınıfı .mobile-menu-dialog'dan ÖNCE durur: eski görünümde .mobile-menu-dialog'un kenar boşluğu
   ve en büyük genişliği bunu eziyordu (menü genişliğini main.css verir). */
.mobile-menu-full {
  width: 100vw;
  max-width: none;
  height: 100%;
  margin: 0;
}

.mobile-menu-dialog {
  position: relative;
  width: auto;
  margin: 0.5rem;
  pointer-events: none;
}

.mobile-menu.has-fade .mobile-menu-dialog {
  transition: transform 0.3s ease-out;
  transform: translate(0, -50px);
}

.mobile-menu.is-open .mobile-menu-dialog {
  transform: none;
}

.mobile-menu-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  pointer-events: auto;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid rgba(0, 0, 0, 0.2);
  border-radius: 0.3rem;
  outline: 0;
}

.mobile-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1040;
  width: 100vw;
  height: 100vh;
  background-color: #000;
}

.mobile-menu-backdrop.has-fade {
  opacity: 0;
}

.mobile-menu-backdrop.is-open {
  opacity: 0.5;
}

.mobile-menu-header {
  display: flex;
  flex-shrink: 0;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem;
  border-bottom: 1px solid #dee2e6;
  border-top-left-radius: 0.3rem;
  border-top-right-radius: 0.3rem;
}

.mobile-menu-title {
  margin-bottom: 0;
  line-height: 1.5;
}

.mobile-menu-body {
  position: relative;
  flex: 1 1 auto;
  padding: 1rem;
}

.mobile-menu-footer {
  display: flex;
  flex-shrink: 0;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  padding: 1rem;
  border-top: 1px solid #dee2e6;
  border-bottom-right-radius: 0.3rem;
  border-bottom-left-radius: 0.3rem;
}

.mobile-menu-footer > * {
  margin: 0.25rem;
}

@media (min-width: 576px) {
  .mobile-menu-dialog {
    max-width: 500px;
    margin: 1.75rem auto;
  }
}

.mobile-menu-full .mobile-menu-content {
  height: 100%;
  border: 0;
  border-radius: 0;
}

.mobile-menu-full .mobile-menu-header,
.mobile-menu-full .mobile-menu-footer {
  border-radius: 0;
}

.mobile-menu-full .mobile-menu-body {
  overflow-y: auto;
}

@media (prefers-reduced-motion: reduce) {
  .has-fade,
  .button,
  .page-link,
  .mobile-menu.has-fade .mobile-menu-dialog {
    transition: none;
  }
}

/* ---------- 6. İkonlar: Font Awesome Free 7.2.0 alt kümesi ----------
   Yalnız sitede kullanılan glifler (lokal woff2: ../fonts/fa/, lisans aynı klasörde: ikonlar CC BY 4.0,
   yazı tipi SIL OFL 1.1, kod MIT). Kurallar resmi all.min.css 7.2.0'dan birebir alındı; yeni ikon için
   project-docs/onyuz-kutuphanesiz.md → "Yeni ikon". Tema CSS'indeki sözde öğeler de bu fontu kullanır
   (font-family "Font Awesome 7 Free", font-weight 900): \f00c \f144 \f002 \f054 \f105. */

:root {
  --fa-family-brands: "Font Awesome 7 Brands";
  --fa-font-brands: normal 400 1em/1 var(--fa-family-brands);
  --fa-family-classic: "Font Awesome 7 Free";
  --fa-font-solid: normal 900 1em/1 var(--fa-family-classic);
  --fa-style-family-classic: var(--fa-family-classic);
}

@font-face {
  font-family: "Font Awesome 7 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(../fonts/fa/fa-brands-400.woff2);
}

@font-face {
  font-family: "Font Awesome 7 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(../fonts/fa/fa-solid-900.woff2);
}

.fa, .fa-brands, .fa-classic, .fa-regular, .fa-solid, .fab, .far, .fas {
  --_fa-family: var(--fa-family, var(--fa-style-family, "Font Awesome 7 Free"));
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: var(--fa-display, inline-block);
  font-family: var(--_fa-family);
  font-feature-settings: normal;
  font-style: normal;
  font-synthesis: none;
  font-variant: normal;
  font-weight: var(--fa-style, 900);
  line-height: 1;
  text-align: center;
  text-rendering: auto;
  width: var(--fa-width, 1.25em);
}

:is(.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .fa-classic, .fa)::before {
  content: var(--fa) / "";
}

@supports not (content: "" / "") {
  :is(.fas, .far, .fab, .fa-solid, .fa-regular, .fa-brands, .fa-classic, .fa)::before {
    content: var(--fa);
  }
}

.fa-brands, .fa-classic.fa-brands, .fab {
  --fa-family: var(--fa-family-brands);
  --fa-style: 400;
}

.fas {
  --fa-style: 900;
}

.fa-classic, .fas {
  --fa-family: var(--fa-family-classic);
}

.fa-solid {
  --fa-style: 900;
}

.fa-times { --fa: "\f00d"; }
.fa-home { --fa: "\f015"; }
.fa-chevron-left { --fa: "\f053"; }
.fa-chevron-right { --fa: "\f054"; }
.fa-arrow-left { --fa: "\f060"; }
.fa-arrow-right { --fa: "\f061"; }
.fa-comments { --fa: "\f086"; }
.fa-bars { --fa: "\f0c9"; }
.fa-envelope { --fa: "\f0e0"; }
.fa-angle-down { --fa: "\f107"; }
.fa-long-arrow-right { --fa: "\f178"; }
.fa-arrow-alt-circle-down { --fa: "\f358"; }
.fa-map-marker-alt { --fa: "\f3c5"; }
.fa-mobile-alt { --fa: "\f3cd"; }
.fa-phone-alt { --fa: "\f879"; }
.fa-twitter { --fa: "\f099"; }
.fa-linkedin-in { --fa: "\f0e1"; }
.fa-youtube { --fa: "\f167"; }
.fa-instagram { --fa: "\f16d"; }
.fa-whatsapp { --fa: "\f232"; }
.fa-odnoklassniki { --fa: "\f263"; }
.fa-audible { --fa: "\f373"; }
.fa-facebook-f { --fa: "\f39e"; }