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

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

/* Küçük yazı (örnek: alt başlık, küçük h1'ler) */
.font-size-05 {
  font-size: clamp(0.5rem, 1.5vw, 0.9rem);
}

/* Orta yazı (örnek: mobilde küçük, desktopta normal h1 boyutu) */
.font-size-075 {
  font-size: clamp(0.75rem, 2vw, 1.25rem);
}

/* Normalden biraz küçük başlık veya vurgulu metin */
.font-size-09 {
  font-size: clamp(0.9rem, 2.3vw, 1.5rem);
}

/* Daha büyük özel başlıklar için */
.font-size-12 {
  font-size: clamp(1rem, 3vw, 2rem);
}

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

.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;
}

.flex-direction-desktop-row-mobile-column {
  display: flex;
  flex-direction: row;
  @media (max-width: 768px) {
    flex-direction: column;
  }
}

.gap-05 {
  gap: 0.5rem;
}

.gap-1 {
  gap: 1rem;
}

.gap-2 {
  gap: 2rem;
}

.gap-4 {
  gap: 4rem;
}

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

.padding-vertical-0 {
  padding-top: 0;
  padding-bottom: 0;
}

.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;
}

/* ------------------------------------------------------------------------ */
/* Flexbox 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  */
@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  */
@media (min-width: 576px) {
  .flex-113 {
    --columns: 1;
  }
}

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

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

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

/* HERO SECTION */

#hero {
  background-image: url(../img/arkaplan-hero.webp);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  width: 100%;
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--padding, 0 1rem);
  gap: var(--gap, 0);
  font-size: var(--font-size, 0.9rem);
}

@media (min-width: 425px) {
  #hero {
    --padding: 0 10vw;
    --gap: 0.5rem;
    --font-size: 1rem;
  }
}

@media (min-width: 500px) {
  #hero {
    --padding: 0 15vw;
    --gap: 0.5rem;
    --font-size: 1rem;
  }
}

@media (min-width: 560px) {
  #hero {
    --padding: 0 20vw;
    --gap: 0.5rem;
    --font-size: 1rem;
  }
}

@media (min-width: 650px) {
  #hero {
    --padding: 0 22vw;
    --gap: 0.5rem;
    --font-size: 1rem;
  }
}

@media (min-width: 720px) {
  #hero {
    --padding: 0 24vw;
    --gap: 0.5rem;
    --font-size: 1rem;
  }
}

@media (min-width: 960px) {
  #hero {
    --padding: 0 27vw;
    --gap: 0.5rem;
    --font-size: 1rem;
  }
}

@media (min-width: 1000px) {
  #hero {
    --padding: 0 30vw;
    --gap: 1rem;
    --font-size: 1.2rem;
  }
}

/* ------------------------------------------------------------------------ */
/* PROMO TICKER -------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

.promo-ticker {
  position: relative;
  margin-top: 1.5rem;
  width: 100%;
  max-width: 480px;
  height: 42px;
  border-radius: 2rem;
  overflow: hidden;
  align-self: center;
  background: linear-gradient(to right, #d10000, #ff2020);
  border-radius: 9999px;
  background: linear-gradient(145deg, #e00000, #a80000);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, 0.25),
    0 3px 10px rgba(0, 0, 0, 0.4);
}

.promo-ticker__track {
  display: flex;
  gap: 2rem;
  white-space: nowrap;
}

.promo-ticker__track span {
  white-space: nowrap;
  color: #fff;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 42px;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2),
    0 0 12px rgba(255, 255, 255, 0.15), 0 0 16px rgba(255, 0, 0, 0.15);
}

/* ------------------------------------------------------------------------ */
/* SLIDER -------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

.glide {
  width: 100%;
  max-width: 100vw;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.glide__slides {
  gap: 0;
}

.glide__slide {
  text-align: center;
  border-radius: 8px;
  overflow: hidden;
}

.glide__slide img {
  width: 100%;
  display: block;
  border-bottom: 2px solid #eee;
}

.glide__slide h3 {
  margin: 10px 0 20px;
}

/* ------------------------------------------------------------------------ */
/* CHAT BUBBLES -------------------------------------------------------------- */
/* ------------------------------------------------------------------------ */

.chat-bubbles {
  position: fixed;
  right: 1rem;
  bottom: 4rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  z-index: 9999;
}
.chat-bubbles a {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: white; */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.chat-bubbles a:hover {
  transform: scale(1.1);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.chat-bubbles svg {
  width: 4rem;
  height: 4rem;
}
/*
.whatsapp svg path { fill: #25D366; }
.phone svg path { fill: #007AFF; }
*/