/* ------------------------------------------------------------------------ */
/* Boilerplate CSS -------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

:root {
  --font-family-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol";
}

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

* {
  border: none;
}

body {
  font-family: var(--font-family-base);
}

img {
  display: block;
  max-width: 100%;
}

menu:not(article menu),
ol:not(article ol),
ul:not(article ul) {
  list-style: none;
}

menu,
ol,
ul {
  padding-left: 0;
}

article ol,
article ul {
  list-style-position: inside;
}

a {
  /* Places underlines below the descenders */
  text-underline-position: under;
  /* Sets the thickness as a percentage of the font size */
  text-decoration-thickness: 8;
}

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

:focus:not(:focus-visible) {
  outline: none;
}

::selection {
  color: white;
  background: black;
}

label,
button,
select,
summary,
[type="radio"],
[type="submit"],
[type="checkbox"] {
  cursor: pointer;
}

/* ------------------------------------------------------------------------ */
/* UTILITY CLASSES -------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

.text-align-center {
  text-align: center;
}

.text-align-right {
  text-align: right;
}

.nowrap {
  white-space: nowrap;
}

/* ------------------------------------------------------------------------ */

.flex-align-center {
  display: flex;
  align-items: center;
}

.flex-justify-center {
  display: flex;
  justify-content: center;
}

.flex-direction-column {
  display: flex;
  flex-direction: column;
}

.flex-direction-row {
  display: flex;
  flex-direction: row;
}

.gap-05 {
  gap: 0.5rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-4 {
  gap: 4rem;
}

/* ------------------------------------------------------------------------ */

.padding-vertical-1 {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.padding-vertical-2 {
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.padding-vertical-4 {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

.padding-horizontal-0 {
  padding-left: 0;
  padding-right: 0;
}

.padding-horizontal-1 {
  padding-left: 1rem;
  padding-right: 1rem;
}

.padding-top-1 {
  padding-top: 1rem;
}

.padding-top-2 {
  padding-top: 2rem;
}

.padding-top-4 {
  padding-top: 4rem;
}

.padding-bottom-1 {
  padding-bottom: 1rem;
}

.padding-bottom-2 {
  padding-bottom: 2rem;
}

.padding-bottom-4 {
  padding-bottom: 4rem;
}

.padding-left-1 {
  padding-left: 1rem;
}

.padding-left-2 {
  padding-left: 2rem;
}

.padding-left-4 {
  padding-left: 4rem;
}

/* ------------------------------------------------------------------------ */

.multi-columns-vertical-list {
  columns: 1; /* Mobil: tek sütun */
  column-gap: 2rem;
}
.multi-columns-vertical-list li {
  break-inside: avoid;
  margin: 0 0 1rem 0;
}
@media (min-width: 768px) {
  .multi-columns-vertical-list {
    columns: 2; /* Tablet ≥768 px → 2 sütun */
  }
}
@media (min-width: 1024px) {
  .multi-columns-vertical-list {
    columns: 3; /* Masaüstü ≥1024 px → 3 sütun */
  }
}

/* ------------------------------------------------------------------------ */

.list-style-type-square li {
  list-style: square inside; /* Pico set outside version by default */
}

.list-style-type-circle li {
  list-style: circle inside;
}

.list-style-type-disc li {
  list-style: disc inside;
}

.list-style-type-decimal li {
  list-style: decimal inside;
}

.list-style-type-lower-latin li {
  list-style: lower-latin inside;
}

.list-style-type-upper-latin li {
  list-style: upper-latin inside;
}

.list-style-type-lower-roman li {
  list-style: lower-roman inside;
}

.list-style-type-upper-roman li {
  list-style: upper-roman inside;
}

.list-style-position-outside li {
  list-style-position: outside;
}

.list-style-type-none li {
  list-style-type: none; /* Removes default list style */
}

.list-itemsgap-05 li {
  padding-bottom: 0.5rem;
}

.list-itemsgap-1 li {
  padding-bottom: 1rem;
}

.list-itemsgap-2 li {
  padding-bottom: 2rem;
}

/* ------------------------------------------------------------------------ */

/* ------------------------------------------------------------------------ */
/* HOME HERO -------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

/* Multi Columns List */

/* ------------------------------------------------------------------------ */
/* Service Cards ---------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

.card-article-flex {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.img-aspect43-cover-full {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* ===== FLEX-123 CUSTOM UTILITY CLAS - MOBILE:1 / TABLET:2 / DESKTOP:3 ================ */
.flex-123 {
  --gap: 2rem;
  --columns: 1; /* Defult: 1 column (Mobile) */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center; /* Center children horizontally */
  /*align-items: stretch;  Stretch children to the same height */
}

/* Flex children */
.flex-123 > * {
  box-sizing: border-box;
  flex: 0 1 calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
  max-width: 100%;
}

/* ≥576 px → 2 columns (tablet and up) */
@media (min-width: 576px) {
  .flex-123 {
    --columns: 2;
  }
}

/* ≥1024 px → 3 columns (desktop and up) */
@media (min-width: 1024px) {
  .flex-123 {
    --columns: 3;
  }
}

/* ===== FLEX-113 CUSTOM UTILITY CLAS - MOBILE:1 / TABLET:1 / DESKTOP:3 ================ */
.flex-113 {
  --gap: 2rem;
  --columns: 1; /* Defult: 1 column (Mobile) */
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  justify-content: center; /* Center children horizontally */
  /*align-items: stretch;  Stretch children to the same height */
}

/* Flex children */
.flex-113 > * {
  box-sizing: border-box;
  flex: 0 1 calc((100% - (var(--gap) * (var(--columns) - 1))) / var(--columns));
  max-width: 100%;
}

/* ≥576 px → 2 columns (tablet and up) */
@media (min-width: 576px) {
  .flex-113 {
    --columns: 1;
  }
}

/* ≥1024 px → 3 columns (desktop and up) */
@media (min-width: 1024px) {
  .flex-113 {
    --columns: 3;
  }
}

/* ----------------------------------------------------------
   Lazy-loaded Google Map  —  Pico CSS breakpoint’lerine göre
   ---------------------------------------------------------- */

/* 1) XS  <576 px  .......................................... */
.lazy-map {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16; /* telefon – dikey */
  overflow: hidden;
  background: #eee;
  margin: 0; /* figure varsayılan marjini sıfırla */
}

/* 2) SM  ≥576 px  .......................................... */
@media (min-width: 576px) {
  .lazy-map {
    aspect-ratio: 4 / 3;
  } /* büyük telefon / küçük tablet */
}

/* 3) MD  ≥768 px  .......................................... */
@media (min-width: 768px) {
  .lazy-map {
    aspect-ratio: 4 / 3;
  } /* klasik tablet */
}

/* 4) LG  ≥1024 px  ......................................... */
@media (min-width: 1024px) {
  .lazy-map {
    aspect-ratio: 3 / 1;
  } /* dizüstü – 1080p */
}

/* 5) XL  ≥1280 px  ......................................... */
@media (min-width: 1280px) {
  .lazy-map {
    aspect-ratio: 3 / 1;
  } /* geniş dizüstü / 1440p */
}

/* 6) XXL ≥1536 px  ......................................... */
@media (min-width: 1536px) {
  .lazy-map {
    aspect-ratio: 4 / 1;
  } /* büyük monitörler */
}

/* (İsteğe bağlı) Ultra-geniş ekran—Pico dışında ek limit */
@media (min-width: 2000px) {
  .lazy-map {
    aspect-ratio: 5 / 1;
  } /* 21:9 monitörler vs. */
}

/* Ortak alt eleman ayarları – değişmiyor */
.lazy-map > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

/* Aktivasyon düğmesi (placeholder görseli sarıyor) */
.map-activate {
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
}
.map-activate::after {
  content: "Haritayı görüntülemek için tıklayın";
  position: absolute;
  inset: auto 0 1rem 0;
  color: #fff;
  font-size: 0.875rem;
  text-align: center;
  text-shadow: 0 0 4px #000;
}

/* ----------------------------------------------------------
   Image Full Width & Aspect Ratio 16:9
   ---------------------------------------------------------- */

.image-full-16-9 {
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
}

/* ------------------------------------------------------------------------ */
/* NAVBAR MOBILE NOWRAP --------------------------------------------------- */
/* ------------------------------------------------------------------------ */

.navbar-inline {
  display: flex; /* aynı satır */
  flex-direction: row;
  align-items: center; /* dikey hizalama */
  justify-content: space-between; /* logo solda, menü sağda */
  flex-wrap: nowrap; /* asla satır kırma */
  gap: 0.5rem; /* logo ↔ menü arası boşluk */
}

.navbar-inline ul {
  margin: 0; /* Pico varsayımı */
  display: flex; /* <li>-leri yatay hizala */
}

.navbar-inline img.logo {
  height: clamp(75px, 10vw, 90px); /* mobilde makul yükseklik  */
  width: auto;
}

/* ------------------------------------------------------------------------ */
/* BREADCRUMB FLOAT LEFT --------------------------------------------------- */
/* ------------------------------------------------------------------------ */

nav[aria-label="breadcrumb"] {
  align-items: start;
  justify-content: start;
}

/* ------------------------------------------------------------------------ */
/* ABOUT PAGE LIST LEFT PADDING ------------------------------------------- */
/* ------------------------------------------------------------------------ */

#hizmet-yaklasimi,
#istanbul-projeleri-1,
#istanbul-projeleri-2,
#istanbul-projeleri-3 {
  padding-left: 2rem;
}

/* ------------------------------------------------------------------------ */
/* FOOTER MIDDLE COLUMN LEFT PADDING -------------------------------------- */
/* ------------------------------------------------------------------------ */

@media (min-width: 1024px) {
  #footer-services {
    padding-left: 4rem;
  }
}