@charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  font-family: "Times New Roman", Times, serif;
  font-size: 100%;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  color: #000;
  background-color: #fff;
}

body {
  font-family: inherit;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Times New Roman", Times, serif;
  font-weight: 600;
  line-height: 1.3;
}

a,
button,
input,
textarea {
  font-family: inherit;
}

/* =============================
   Font Awesome optimization fix
   ============================= */
/* CDN’den gelen Font Awesome 6.5.0 fontları için font-display: swap eklendi */
@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
  font-family: "Font Awesome 6 Brands";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/webfonts/fa-brands-400.woff2") format("woff2");
}
@keyframes rotate-forward {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes rotate-backward {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(-360deg);
  }
}
@media (max-width: 480px) {
  html {
    scroll-padding-top: 40px !important; /* header yüksekliği kadar */
  }
}
@media (max-width: 768px) {
  html {
    scroll-padding-top: 60px !important; /* header yüksekliği kadar */
  }
}

header {
  background-color: #002b45;
  color: #ffffff;
  height: 120px;
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: -1px 5px 9px 1px rgba(37, 125, 186, 0.75);
}
header .container {
  max-width: 1600px;
  padding: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
header .logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  height: 100%;
  margin-right: 1rem;
  margin-left: 1rem;
  transition: all 0.3s ease;
}
header .logo img {
  display: block;
  height: 120px;
  width: auto;
  object-fit: cover;
  align-items: stretch;
}
@media (min-width: 1025px) {
  header .logo img:hover {
    animation: rotate-forward 1s ease-in-out forwards;
  }
  header .logo img:not(:hover) {
    animation: rotate-backward 2s ease-in-out forwards;
  }
}
header .menu-toggle {
  display: none !important;
  font-size: 2rem;
  background: none;
  border: none;
  color: #ffffff;
  cursor: pointer;
}
header .nav-wrapper {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 1;
  padding-right: 10rem;
}
@media (max-width: 768px) {
  header .nav-wrapper {
    position: absolute;
    top: 70px;
    left: 0;
    background-color: #002b45;
    display: none;
    z-index: 999;
    border-radius: 0 0 10px 10px;
    width: 100%;
    max-height: calc(100vh - 70px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  header .nav-wrapper.open {
    display: block;
  }
  header .nav-wrapper nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
  }
  header .nav-wrapper nav .main-menu {
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding: 0.3rem 12px;
    margin: 0;
    gap: 0.35rem !important;
    align-items: flex-start;
  }
  header .nav-wrapper nav .main-menu li {
    width: 100%;
    margin: 0;
  }
  header .nav-wrapper nav .main-menu > li + li {
    margin-top: 0;
  }
  header .nav-wrapper nav .main-menu li a {
    display: block;
    color: #ffffff;
    font-size: 1.05rem !important; /* global 1.3rem !important’ı ezer */
    line-height: 1.2;
    padding: 0.22rem 0 !important;
  }
  header .nav-wrapper nav .main-menu li a:hover {
    color: #d0a249;
  }
  header .nav-wrapper nav .main-menu li a.active {
    border-bottom: none;
  }
  header .nav-wrapper nav .main-menu .dropdown {
    display: none;
    position: static;
    padding: 0.15rem 0.6rem 0.25rem 0.9rem; /* iç boşluk küçült */
    background-color: transparent;
    margin-top: 0.1rem;
    border-radius: 6px;
    box-shadow: none;
    max-height: none;
    overflow-y: auto;
    overflow: visible; /* scroll sadece nav-wrapper’da */
  }
  header .nav-wrapper nav .has-dropdown.open .dropdown {
    display: block;
  }
  header .nav-wrapper nav .main-menu .dropdown li a {
    font-size: 0.95rem !important; /* global fontu yine ezer */
    line-height: 1.2;
    padding: 0.2rem 0;
    min-height: 30px;
    letter-spacing: 0.2px;
  }
  header .nav-wrapper nav .main-menu .dropdown li {
    margin: 0;
  }
  header .nav-wrapper nav .main-menu .dropdown li + li {
    margin-top: 0.12rem;
  }
}
header nav {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
header .main-menu {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 0;
  letter-spacing: 1.5px;
}
header .main-menu li {
  position: relative;
}
header .main-menu a {
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
  font-size: 1.3rem !important;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
}
header .main-menu a .dropdown-icon {
  color: #d0a249;
  font-size: 0.9rem;
  margin-left: 0.2rem;
  transition: transform 0.3s ease, color 0.3s ease;
  pointer-events: none;
}
header .main-menu a.active {
  color: #d0a249 !important;
  border-bottom: 2px solid #d0a249;
}
header .main-menu a .dropdown a.active {
  color: #d0a249; /* sarı */
  text-decoration: underline;
  text-underline-offset: 4px;
}
header .main-menu a .dropdown-icon-right {
  margin-right: 15px;
  pointer-events: none;
  font-size: 0.85rem;
  margin-right: 0.35rem;
}
@media (min-width: 1025px) {
  header .main-menu a:hover {
    color: #d0a249;
    transform: translateY(-2px);
  }
  header .main-menu a:hover .dropdown-icon {
    transform: rotate(180deg);
  }
  header .main-menu a:hover .dropdown-icon-right {
    color: #d0a249;
    transform: rotate(270deg) !important;
  }
  header .main-menu .has-dropdown:hover .dropdown {
    display: block;
  }
}
header .dropdown {
  display: none;
  position: absolute;
  top: 100%;
  left: -10px;
  background-color: #002b45;
  padding: 0.5rem 1rem;
  min-width: 200px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 999;
  list-style: none;
  padding-top: 30px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}
header .dropdown li a {
  color: #ffffff;
  padding: 0.5rem 0;
}
header .dropdown li a:hover {
  color: #d0a249;
}
header .language-switch {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  gap: 0.7rem !important;
  line-height: 1;
}
header .language-switch .lang-option {
  font-size: 1.8rem;
  opacity: 0.6;
  text-decoration: none;
  transition: all 0.3s ease;
}
header .language-switch .lang-option.active {
  opacity: 1;
  transform: scale(1.2);
  border-bottom: 2px solid #d0a249;
}
header .language-switch .lang-option:hover {
  opacity: 1;
  color: #d0a249;
}
@media (max-width: 768px) {
  header {
    height: 70px;
  }
  header .container {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    height: 70px;
  }
  header .menu-toggle {
    display: block !important;
    grid-column: 1;
    justify-self: start;
    margin-left: 15px;
    transition: all 0.3s ease;
  }
  header .menu-toggle i:hover {
    color: #0077b6;
    transform: scale(1.1);
  }
  header .logo {
    grid-column: 2;
    justify-self: center;
  }
  header .logo img {
    height: 60px;
  }
  header .language-switch {
    grid-column: 3;
    justify-self: end;
  }
}
@media (max-width: 1024px) {
  header .main-menu {
    gap: 1.2rem !important;
  }
  header .main-menu li a {
    font-size: 1.2rem !important;
  }
}
header .close-menu {
  display: none;
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #ffffff;
  cursor: pointer;
  transition: all 0.3s ease;
}
header .close-menu:hover {
  color: #d0a249;
}
@media (max-width: 768px) {
  header .close-menu {
    display: block;
  }
}

/* ==== Sticky/fixed header ve offset ==== */
:root {
  --header-h: 90px;
} /* ilk yükte kaba tahmin; JS gerçek yüksekliği ölçecek */
header {
  position: fixed; /* sticky yerine fixed: her zaman takip etsin */
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

/* İçerik header’ın altında başlasın */
body {
  padding-top: var(--header-h);
}

/* Anchor hedeflerinde header kadar boşluk bırak */
section,
[id] {
  scroll-margin-top: var(--header-h);
}

/* ========== ≤480px (mobile-small) — ekstra sıkı ========== */
@media (max-width: 480px) {
  .main-menu {
    gap: 0.22rem;
    letter-spacing: 0.5px;
  }
  .main-menu > li > a {
    font-size: 0.95rem !important;
    padding: 0.18rem 0 !important;
    min-height: 36px !important;
  }
  .main-menu .dropdown {
    padding: 0.12rem 0.5rem 0.2rem 0.8rem;
  }
  .main-menu .dropdown li a {
    font-size: 0.9rem !important;
    padding: 0.18rem 0;
    min-height: 28px;
  }
  .main-menu a .dropdown-icon,
  .main-menu a .dropdown-icon-right {
    font-size: 0.82rem;
  }
  .language-switch {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0 !important;
  }
  .language-switch .lang-option {
    font-size: 1.3rem !important;
  }
}
footer {
  box-shadow: 0px -8px 14px 1px rgba(11, 79, 143, 0.75);
  background-color: #174f6c;
  color: white;
  padding: 2rem 1rem 1rem;
  font-size: 1.2rem;
}
footer a:not(.comms-button) {
  color: #bcc4c8;
  text-decoration: none;
  transition: all 0.3s ease;
}
footer a:not(.comms-button):hover {
  color: #d0a249;
  transform: scale(1.1) translateY(-5px);
  border-radius: 100%;
}
footer a:not(.comms-button):hover .down-icon {
  color: #d0a249;
}
footer .footer-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 1.5rem;
}
footer .footer-top .footer-section-title {
  font-size: 1rem;
  color: #d0a249;
  margin-bottom: 1rem;
  letter-spacing: 1px;
}
footer .footer-top .social-icons {
  display: flex;
  gap: 1rem;
}
footer .footer-top .social-icons i {
  color: #d0a249;
  font-size: 1.4rem;
  border-radius: 100%;
  background-color: #0077b6;
  padding: 0.6rem;
  transition: all 0.3s ease-in;
}
footer .footer-top .social-icons i:hover {
  box-shadow: 0px 1px 14px 14px rgba(133, 128, 34, 0.75);
  background-color: #002b45;
  color: #ffffff;
  transform: translateY(-5px);
}
footer .footer-middle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  max-width: 1300px;
  margin: 0 auto 1rem;
  padding-left: 5rem;
  text-align: left;
  letter-spacing: 0.5px;
  white-space: nowrap;
}
footer .footer-middle .link-column,
footer .footer-middle .footer-legal {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
footer .footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.8rem;
}
footer .footer-bottom .footer-logo {
  width: 100px;
  height: auto;
  border: 2px solid;
  border-radius: 100%;
  padding: 5px;
}
footer .footer-bottom .footer-logo:hover {
  box-shadow: 0px 1px 14px 14px rgba(133, 128, 34, 0.75);
  border-radius: 100%;
}
footer .footer-bottom .footer-contact {
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
footer .footer-bottom .footer-contact .comms-button {
  /* Anchor KENDİSİ boyanmasın */
  background: transparent;
  padding: 0;
  border-radius: 0;
}
footer .footer-bottom .footer-contact .comms-button i {
  font-size: 1.4rem;
  border-radius: 100% !important;
  background-color: #0077b6;
  padding: 0.6rem;
  color: #d0a249;
  transition: all 0.3s ease-in;
}
footer .footer-bottom .footer-contact .comms-button i:hover {
  box-shadow: 0px 1px 14px 14px rgba(133, 128, 34, 0.75);
  background-color: #002b45;
  color: #ffffff;
  transform: translateY(-5px);
}
footer .footer-bottom .footer-contact .comms-button .whatsapp {
  color: #25d366;
  font-weight: 800;
  font-size: 1.6rem !important;
}
footer .footer-bottom .footer-contact a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
}
footer .footer-bottom .footer-contact p {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  line-height: 1.4;
}
footer .footer-bottom span {
  font-size: 1rem;
  margin-bottom: 0.2rem;
  color: #d0a249;
}
footer .footer-bottom hr {
  width: 100%;
  border: none;
  border-top: 1px solid #ccc;
}
footer .footer-bottom .footer-copyright {
  font-size: 0.9rem;
  color: #ccc;
  letter-spacing: 2px;
}

@media (max-width: 1024px) {
  footer {
    font-size: 1rem;
  }
  footer .footer-middle {
    grid-template-columns: repeat(2, 1fr);
    justify-items: start;
    margin-left: 8rem;
    gap: 2rem;
  }
  footer .footer-middle .link-column,
  footer .footer-middle .footer-legal {
    align-items: flex-start;
  }
}
@media (max-width: 880px) {
  footer .footer-middle {
    margin-left: 6rem;
  }
}
@media (max-width: 600px) {
  footer {
    font-size: 0.9rem;
  }
  footer .footer-middle {
    grid-template-columns: 1fr;
    justify-items: start;
    text-align: left;
    padding: 0 auto;
    margin-left: 3rem;
    gap: 20px;
  }
  footer .footer-middle .link-column,
  footer .footer-middle .footer-legal {
    align-items: flex-start;
  }
}
#scrollTopBtn {
  position: fixed;
  bottom: 50px;
  right: 30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(12, 5, 5, 0.08);
  border: 2px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color, #0af);
  font-size: 30px;
  cursor: pointer;
  transition: background 0.3s ease, transform 0.2s ease;
  z-index: 999;
}
#scrollTopBtn:hover {
  background: var(--accent-color, #0af);
  color: #fff;
  transform: translateY(-2px);
  transform: rotate(180deg);
}

/* === FOOTER — comms-button tam reset + sadece ikona efekt === */
footer .footer-bottom .footer-contact .comms-button,
footer .footer-bottom .footer-contact .comms-button:hover,
footer .footer-bottom .footer-contact .comms-button:focus,
footer .footer-bottom .footer-contact .comms-button:active {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
  -webkit-tap-highlight-color: transparent; /* iOS dokunma vurgusunu kapat */
  display: inline-flex; /* kutu olmasın, sadece ikonu sarsın */
  padding: 0 !important;
  border-radius: 0 !important;
}

/* <a> içinde <span> varsa onu da temizle */
footer .footer-bottom .footer-contact .comms-button > span {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* Efekt sadece ikonun üzerinde kalsın */
footer .footer-bottom .footer-contact .comms-button i {
  display: inline-flex;
  width: 48px !important; /* sabit ve tam yuvarlak bir alan */
  height: 48px !important;
  align-items: center;
  justify-content: center;
  border-radius: 100%;
  background-color: #0077b6;
  color: #d0a249;
  padding: 0; /* artık padding yerine sabit w/h kullanıyoruz */
  transition: all 0.25s ease;
  box-shadow: none;
}

footer .footer-bottom .footer-contact .comms-button i:hover {
  box-shadow: 0px 1px 14px 14px rgba(133, 128, 34, 0.75); /* senin sarı halo */
  background-color: #002b45;
  color: #ffffff;
  transform: translateY(-5px);
}

/* WhatsApp ikonu özel rengi */
footer .footer-bottom .footer-contact .comms-button i.whatsapp {
  color: #25d366;
  font-weight: 800;
  font-size: 1.6rem; /* istersen büyüt */
}

/* Bu satır ikona metin stillerinin bulaşmasını engeller */
footer .footer-bottom .footer-contact a:not(.comms-button) {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: bold;
  font-size: 1rem;
}

footer .footer-bottom .footer-contact .comms-button {
  /* sadece ikon linkleri: metin link düzeni uygulanmasın */
  gap: 0;
  font-weight: normal;
  font-size: inherit;
}

/* ===== Friends Marin — Spin+Pulse Logo Loader ===== */
#fm-loader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: #0a4460; /* mavi arka plan (istersen değiştir) */
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

/* Logo */
#fm-loader img {
  width: clamp(110px, 10vw, 160px);
  height: auto;
  /* aynı anda hem dönsün hem nabız gibi büyüyüp küçülsün */
  animation: rotate 1200ms linear infinite;
  will-change: transform;
  filter: drop-shadow(0 0 14px rgba(0, 0, 0, 0.25));
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Loader kapanış (JS .is-hidden ekleyince) */
#fm-loader.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Erişilebilirlik: hareket kısıtlıysa animasyonları kapat */
@media (prefers-reduced-motion: reduce) {
  #fm-loader img {
    animation: none;
  }
}
/* =========================
   ABOUT (sadece bu sayfa)
   ========================= */
:root {
  --about-card-border: rgba(255, 255, 255, 0.1);
  --about-card-bg: #fff;
}

/* Bölüm konteynerleri */
.about-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.6rem;
  scroll-margin-top: 40px;
}

/* =========================
   ÜST BAŞLIKLAR (BİZ KİMİZ?)
   ========================= */
.about-section.about-who .about-overheads {
  text-align: center;
  margin-top: 2.8rem;
  margin-bottom: 1.8rem;
}

.about-section.about-who .about-overheads .overline {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.6px;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem);
  margin-top: 2rem;
}

.about-section.about-who .about-overheads .main-title {
  text-transform: uppercase;
  font-weight: 700;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  opacity: 0.6;
  margin-top: 0.6rem;
}

/* =========================
   KİMİZ BLOKLARI
   ========================= */
.about-section.about-who .about-block {
  background: var(--about-card-bg);
  border: 1px solid var(--about-card-border);
  border-radius: 16px;
  box-shadow: 12px -5px 28px 18px rgba(0, 119, 182, 0.39);
  padding: 3.4rem;
  margin: 3.4rem 0;
  display: grid;
  grid-template-areas: "title" "img" "text";
  grid-template-columns: 1fr;
  gap: 1rem;
}

.about-section.about-who .about-block .block-title {
  grid-area: title;
  margin: 0 0 0.3rem 0;
  font-weight: 700;
  font-size: clamp(1.1rem, 1rem + 0.5vw, 1.25rem);
  text-align: left;
}

.about-section.about-who .about-block .about-img {
  grid-area: img;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.5rem 0;
}

.about-section.about-who .about-block .about-img img {
  width: auto;
  max-width: 100%;
  max-height: clamp(180px, 22vw, 280px);
  object-fit: scale-down;
  object-position: center;
  display: block;
}

.about-section.about-who .about-block .about-img video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px !important; /* img--rounded’dan miras alınsın */
}

/* 1 ve 3. blok foto radius */
.about-section.about-who .about-block:nth-of-type(1) .about-img img,
.about-section.about-who .about-block:nth-of-type(3) .about-img img {
  border-radius: 14px;
}

.about-section.about-who .about-block .about-text {
  grid-area: text;
}

/* === ABOUT sayfası tipografi ayarı === */
.about-section.about-who .about-block .about-text p {
  margin: 0;
  font-size: 20px; /* Büyük ekran */
  line-height: 1.65;
  text-align: justify;
  text-indent: 2rem;
}

/* Orta ekran (tablet vb.) */
@media (max-width: 1024px) {
  .about-section.about-who .about-block .about-text p {
    font-size: 18px;
    line-height: 1.6;
  }
}
/* Küçük ekran (mobil) */
@media (max-width: 767px) {
  .about-section.about-who .about-block .about-text p {
    font-size: 15px;
    line-height: 1.55;
  }
}
/* =========================
   Misyon & Vizyon
   ========================= */
.mv-grid {
  display: grid;
  gap: clamp(12px, 2vw, 24px);
  max-width: var(--mv-max);
  margin-inline: auto;
  align-items: start;
}

/* === MV: boxed varyantı (tek kapsayıcı kart + mavi shadow) === */
.mv-grid.-boxed {
  position: relative;
  /* kapsayıcı iç boşluk */
  padding: clamp(56px, 8vw, 84px) clamp(22px, 3.2vw, 42px) clamp(32px, 5vw, 56px);
}

.mv-grid.-boxed::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--mv-border-radius);
  background: #fff;
  border-width: var(--mv-border-w);
  border-style: solid;
  border-color: rgba(12, 102, 194, 0.18);
  box-shadow: -1px 5px 9px 1px rgba(37, 125, 186, 0.75);
  z-index: 0;
}

.mv-grid.-boxed > * {
  position: relative;
  z-index: 1;
}

.about-section.mv .about-overheads .overline {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.6px;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem);
  text-align: center;
  margin-bottom: 2rem;
}

/* Logo rozet etkisi */
.mv-grid.-boxed .mv-logo {
  display: flex;
  justify-content: center;
  margin-top: calc(-1 * clamp(40px, 6vw, 66px));
  margin-bottom: clamp(10px, 1.6vw, 18px);
}

.mv-grid.-boxed .mv-logo img {
  border-radius: 999px;
  background: #fff;
  border: 6px solid #fff;
  box-shadow: 0 12px 28px rgba(12, 102, 194, 0.16);
}

/* Metin: iki yana yaslı + bir tık ferah */
.mv-grid.-boxed .mv-card p {
  margin: 0;
  text-align: justify;
  text-justify: inter-word;
  line-height: 1.7;
}

.mv-grid.-boxed .mv-card p + p {
  margin-top: 0.65em;
}

/* küçük ekranda üst iç boşluğu biraz düşür (isteğe bağlı) */
@media (max-width: 899px) {
  .mv-grid.-boxed {
    padding-top: clamp(48px, 10vw, 72px);
  }
}
.mv-logo {
  display: flex;
  justify-content: center;
}

.mv-logo img {
  width: clamp(150px, 16vw, 200px);
  height: auto;
  border-radius: 999px;
  box-shadow: -1px 5px 9px 1px rgba(37, 125, 186, 0.75);
}

/* kart görünümü */
.mv-card {
  background: #fff;
  border-radius: 12px;
  padding: clamp(14px, 2vw, 18px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* MV kart başlığı ve paragraf için fluid font-size */
.mv-card h3 {
  margin: 0 0 8px;
  text-align: center;
  color: #0077b6;
  /* min: 22px  →  max: 40px  (320px–≥1440px arası akıcı büyür) */
  font-size: clamp(1.375rem, 1rem + 1.2vw, 2.5rem);
  line-height: 1.2; /* başlıklar için rahat okuma */
}

.mv-card p {
  /* min: 16px  →  max: 20px */
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  line-height: 1.7;
  text-indent: 1rem;
}

/* ≥900px’te: logo üst sırada ortada; alt sırada misyon solda, vizyon sağda */
@media (min-width: 900px) {
  .mv-grid {
    grid-template-columns: 1fr 1fr; /* iki geniş kolon */
    grid-template-rows: auto auto;
    column-gap: clamp(16px, 2.2vw, 28px); /* kartlar biraz yaklaşsın */
    row-gap: clamp(12px, 1.6vw, 22px);
  }
  .mv-logo {
    grid-column: 1/-1;
    grid-row: 1;
  } /* logo iki sütunu kapsar */
  .mv-card.-mission {
    grid-column: 1;
    grid-row: 2;
  }
  .mv-card.-vision {
    grid-column: 2;
    grid-row: 2;
  }
}
/* 1) MV kapsayıcı: border kalınlığı ayarı (kolay ayarlanır) */
.mv-grid.-boxed::before {
  --mv-border-w: 2px; /* 1px’ten 2px’e – istersen 2.5px yap */
  border-width: var(--mv-border-w);
  border-color: rgba(12, 102, 194, 0.18); /* hafifçe belirginleştirdik */
  border-radius: 24px; /* köşeyi azıcık büyüttük */
}

/* 3) Global container: küçük ekranda kenar boşluklarını koru */
.container {
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

/* =========================
   EKİBİMİZ (grid + kart)
   ========================= */
.about-section.about-team .about-overheads {
  text-align: center;
  margin: 2.2rem 0 1.2rem;
}

.about-section.about-team .about-overheads .overline {
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.6px;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem);
}

.about-team .team-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(240px, 1fr));
  gap: 1.2rem;
}

/* Kart */
.team-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
  border: 1px solid rgba(0, 70, 160, 0.12);
  border-radius: 18px;
  padding: 1.1rem 1rem 1.2rem;
  box-shadow: 0 10px 24px rgba(0, 88, 200, 0.18), 0 2px 8px rgba(0, 88, 200, 0.1);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  color: inherit;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 34px rgba(0, 88, 200, 0.26), 0 4px 12px rgba(0, 88, 200, 0.14);
}

/* LinkedIn rozeti – SOL ÜST, yuvarlak */
.team-card .linkedin {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f2ff;
  border: 2px solid rgba(0, 70, 160, 0.25);
  box-shadow: 0 0 0 0 rgba(10, 102, 194, 0);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.team-card .linkedin i {
  font-size: 20px;
  color: #0a66c2;
  line-height: 1;
}

.team-card:hover .linkedin {
  background: #dff0ff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: -1px 1px 21px 4px rgba(10, 102, 194, 0.45);
}

.team-card .linkedin:hover {
  background: #0b65c2;
  transform: translateY(-2px) scale(1.04);
  box-shadow: -1px 1px 21px 4px rgba(10, 102, 194, 0.45);
}

.team-card .linkedin:hover i {
  color: #fff;
}

.team-card .linkedin:active {
  transform: scale(0.98);
}

/* Foto */
.team-card .photo-wrap {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid rgba(0, 70, 160, 0.15);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.7);
  margin-top: 0.3rem;
}

.team-card .photo-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.team-card:hover .photo-wrap img {
  transform: scale(1.05);
}

/* İsim bandı */
.team-card .name {
  margin: 0.85rem 0 0.55rem;
  font-weight: 700;
  text-align: center;
  padding: 0.5rem 0.75rem;
  border-radius: 12px;
  background: rgba(0, 120, 255, 0.08);
  border: 1px solid rgba(0, 70, 160, 0.12);
}

/* Roller – mavi kalın nokta */
.team-card .roles {
  width: 100%;
  margin: 0;
  padding: 0.7rem 0.9rem;
  list-style: none;
  background: rgba(20, 140, 255, 0.06);
  border: 1px solid rgba(0, 70, 160, 0.1);
  border-radius: 12px;
}

.team-card .roles li {
  position: relative;
  margin: 0.26rem 0;
  line-height: 1.5;
  font-size: 0.98rem;
  padding-left: 1.1rem;
}

.team-card .roles li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.75em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a66c2;
  transform: translateY(-50%);
}

/* LinkedIn yoksa kart pasif */
.team-card[aria-disabled=true] {
  cursor: default;
  pointer-events: none;
  opacity: 0.85;
}

/* Responsive kırılımlar */
@media (max-width: 1024px) {
  .about-team .team-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
  }
}
@media (max-width: 768px) {
  .about-team .team-grid {
    grid-template-columns: repeat(2, minmax(220px, 1fr));
  }
}
@media (max-width: 480px) {
  .about-team .team-grid {
    grid-template-columns: 1fr;
  }
  .team-card .photo-wrap {
    width: 140px;
    height: 140px;
  }
}
/* =========================
   KURUCULAR (büyük kartlar)
   ========================= */
.founders-list {
  max-width: 1100px;
  margin: 0 auto 2.2rem;
  display: grid;
  gap: clamp(12px, 2vw, 18px);
}

.founder-card {
  display: flex;
  gap: clamp(14px, 2.2vw, 22px);
  align-items: stretch;
  padding: clamp(14px, 2.2vw, 18px);
  background: linear-gradient(180deg, #f7fbff 0%, #eef6ff 100%);
  border: 1px solid rgba(0, 70, 160, 0.12);
  border-radius: 18px;
  box-shadow: 0 12px 26px rgba(0, 88, 200, 0.14);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.founder-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 38px rgba(0, 88, 200, 0.22);
}

.founder-card .fd-photo {
  flex: 0 0 clamp(220px, 28vw, 320px);
  border-radius: 14px;
  overflow: hidden;
  background: #eef6ff;
  display: grid;
  place-items: center;
}

.founder-card .fd-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.founder-card .fd-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.founder-card .fd-head {
  position: relative; /* yeni */
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 6px 10px;
  margin-bottom: 8px;
  padding-right: 56px; /* yeni: ikon alanı (≈ 42px + boşluk) */
}

.fd-name {
  margin: 0;
  font-weight: 800;
  line-height: 1.2;
  font-size: clamp(1.1rem, 0.9rem + 1.1vw, 1.6rem);
  color: #0a2840;
}

.fd-title {
  grid-column: 1/2;
  margin: 2px 0 0;
  font-weight: 600;
  opacity: 0.8;
}

.fd-linkedin {
  position: absolute; /* yeni: başlığın sağ üstüne sabitle */
  top: 0.25rem; /* istersen 0 ~ 0.5rem arasında oynat */
  right: 0.25rem;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #e8f2ff;
  border: 2px solid rgba(0, 70, 160, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
  z-index: 1; /* metnin üstünde kalsın */
}

.fd-linkedin i {
  font-size: 20px;
  color: #0a66c2;
}

.founder-card:hover .fd-linkedin {
  background: #dff0ff;
  transform: translateY(-2px) scale(1.04);
  box-shadow: -1px 1px 21px 4px rgba(10, 102, 194, 0.45);
}

.fd-bio {
  margin-top: 6px;
  line-height: 1.65;
  text-align: justify;
}

.fd-bio p {
  margin: 0 0 0.75em;
}

/* Kısaltma (mobil/orta ekran) */
.fd-bio.-clamp {
  --lines: 10;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines);
  line-clamp: var(--lines);
  overflow: hidden;
}

/* Açılmış kart */
.founder-card.is-expanded .fd-bio {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}

/* Toggle butonu */
.fd-toggle {
  margin-top: 8px;
  align-self: start;
  font-size: 0.95rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  color: #0a66c2;
  cursor: pointer;
  padding: 6px 0;
}

.fd-toggle:hover {
  text-decoration: underline;
}

/* Büyük ekran: her zaman açık, buton gizli */
@media (min-width: 1024px) {
  .fd-bio.-clamp {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: unset;
    overflow: visible;
  }
  .fd-toggle {
    display: none;
  }
}
/* ✅ Mobil/dar ekran: kart dikey + avatar + ortalanmış metin */
@media (max-width: 768px) {
  .founder-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .founder-card .fd-photo {
    width: 200px;
    height: 200px;
    flex: 0 0 auto;
    margin: 6px auto 10px;
    border-radius: 50%;
    overflow: hidden;
    background: #eef6ff;
    border: 3px solid rgba(0, 70, 160, 0.15);
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.9);
    max-height: 52vh;
  }
  .founder-card .fd-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .founder-card .fd-head {
    grid-template-columns: 1fr;
    justify-items: center;
    padding-right: 0; /* desktop’taki sağ boşluğu kaldır */
    margin-top: 1.2rem;
  }
  .fd-name,
  .fd-title {
    text-align: center;
    justify-self: center;
  }
  .fd-linkedin {
    position: static; /* akışa dönsün */
    margin-top: 0.4rem; /* isim/unvanın altına küçük boşluk */
  }
  /* Başlık ve unvan tam ortalansın */
  .founder-card .fd-head {
    grid-template-columns: 1fr;
    width: 100%;
    margin-top: 1.2rem;
    text-align: center;
    justify-items: center;
    position: relative;
  }
  .fd-name,
  .fd-title {
    text-align: center;
    justify-self: center;
  }
}
/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .founder-card,
  .fd-linkedin {
    transition: none !important;
  }
}
/* Desktop: Kurucu fotoğraflarını biraz "zoom-out" yap */
@media (min-width: 769px) {
  .founder-card .fd-photo {
    padding: 8px; /* biraz nefes alanı, isteğe bağlı */
  }
  .founder-card .fd-photo img {
    object-fit: cover; /* düzen bozulmasın */
    transform: scale(0.92); /* .96 (az), .90 (daha çok) ile oynayabilirsin */
    transform-origin: center;
  }
}
/* Tablet (769–1023px): kurucu foto dairesel avatar + hafif halo */
@media (min-width: 769px) and (max-width: 1023px) {
  .founder-card {
    align-items: center;
    gap: clamp(14px, 1.6vw, 18px);
  }
  .founder-card .fd-photo {
    /* dikdörtgen baz stili override et */
    flex: 0 0 240px; /* 220–260px arası oynatabilirsin */
    width: 240px;
    aspect-ratio: 1/1;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    padding: 8px;
    /* hafif mavi fon/halo */
    background: radial-gradient(120% 120% at 50% 40%, rgba(12, 102, 194, 0.1) 0%, rgba(12, 102, 194, 0.06) 50%, rgba(12, 102, 194, 0) 70%);
    border: 3px solid rgba(0, 70, 160, 0.15);
    box-shadow: 0 10px 26px rgba(0, 88, 200, 0.14), inset 0 0 0 2px rgba(255, 255, 255, 0.9);
  }
  .founder-card .fd-photo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    transform: scale(0.94); /* zoom-out; 0.90–0.96 arası deneyebilirsin */
    transform-origin: center;
  }
}
/* === Founders: Desktop'ta dairesel avatar + belirgin fon === */
@media (min-width: 1024px) {
  .founder-card {
    align-items: center; /* foto + metin hizası */
    gap: clamp(16px, 1.6vw, 20px); /* biraz daha sıkı */
  }
  .founder-card .fd-photo {
    /* büyük ekran için sabit, dairesel avatar */
    flex: 0 0 280px; /* 260–300 arası oynatabilirsin */
    width: 280px;
    aspect-ratio: 1/1;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
    /* arka plan panel/halo – senin silik fonu belirginleştirir */
    background: radial-gradient(120% 120% at 50% 40%, rgba(12, 102, 194, 0.1) 0%, rgba(12, 102, 194, 0.06) 50%, rgba(12, 102, 194, 0) 70%);
    border: 3px solid rgba(0, 70, 160, 0.15);
    box-shadow: 0 10px 26px rgba(0, 88, 200, 0.14), inset 0 0 0 2px rgba(255, 255, 255, 0.9); /* iç beyaz halka */
    padding: 10px; /* avatar etrafında nefes */
  }
  /* isteğe bağlı: halo’yu biraz daha belirginleştir */
  .founder-card .fd-photo::before {
    content: "";
    position: absolute;
    inset: -10px; /* hafif taşan halo */
    border-radius: inherit;
    background: radial-gradient(120% 120% at 50% 40%, rgba(12, 102, 194, 0.12) 0%, rgba(12, 102, 194, 0.07) 55%, rgba(12, 102, 194, 0) 75%);
    z-index: 0;
    pointer-events: none;
  }
  .founder-card .fd-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover; /* daire içinde taşmadan doldur */
    transform: none; /* önceki scale ayarı varsa sıfırla */
  }
}
/* =========================
   SOSYAL SORUMLULUK
   ========================= */
.about-section {
  margin-bottom: 2rem;
}

.csr-section .about-overheads {
  text-align: center;
  margin: 2.2rem 0 1.2rem;
}

.csr-section .about-overheads .overline {
  /* Diğer başlıklarla aynı punto */
  text-transform: uppercase;
  font-weight: 800;
  letter-spacing: 1.6px;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.6rem);
}

.csr-block {
  /* Biz Kimiz bloklarıyla aynı “kart” hissi */
  background: var(--about-card-bg, #fff);
  border: 1px solid var(--about-card-border, rgba(255, 255, 255, 0.1));
  border-radius: 16px;
  box-shadow: 12px -5px 28px 18px rgba(0, 119, 182, 0.18);
  padding: 2rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr; /* mobil/ küçük ekran: üst üste */
  gap: 1.2rem;
}

.csr-img {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* görsel radius */
  border-radius: 14px;
  background: #eef6ff; /* Boş alan varsa beyaz yerine mavi tonlu */
  padding: 0.5rem; /* İmaj etrafında nefes alanı */
}

.csr-img img {
  width: 100%;
  height: auto;
  max-height: clamp(220px, 32vw, 420px);
  object-fit: cover; /* logomsu/grafik görselde ideal */
  display: block;
  border-radius: 14px; /* img’e de uygula */
}

.csr-text {
  display: block;
}

.csr-list {
  margin: 0;
  padding: 0 0.25rem;
  list-style: none;
}

.csr-list li {
  position: relative;
  margin: 0.6rem 0;
  line-height: 1.75;
  text-align: justify; /* iki yana yasla */
  padding-left: 1.2rem; /* nokta için iç boşluk */
}

.csr-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.95em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #0a66c2; /* ekibimizdeki “mavi nokta” ile tutarlı */
  transform: translateY(-50%);
}

/* Büyük ekran: görsel + metin yan yana */
@media (min-width: 992px) {
  .csr-block {
    grid-template-columns: 1fr 1.3fr; /* görsel | metin */
    align-items: center;
    padding: 2.4rem;
    gap: 1.6rem;
  }
  .csr-img {
    /* görsel kartın içinde biraz nefes */
    padding: 0.25rem 0.4rem;
  }
}
/* === CSR görsel düzeltme (oran koru, taşmayı engelle) === */
.csr-img {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.5rem; /* kutu içinde nefes */
  background: #eef6ff;
  border-radius: 14px;
  overflow: hidden; /* taşmaları gizle */
}

/* Oranı her zaman koru, ortala, kutuya sığdır */
.csr-img img {
  display: block;
  width: auto; /* genişliği sabitleme */
  height: auto; /* oran korunsun */
  max-width: 100%; /* kutudan taşma yok */
  max-height: clamp(280px, 36vw, 520px); /* büyük ekranda da kontrollü */
  object-fit: contain; /* kırpma yok, sığdır */
  border-radius: 12px;
}

/* Büyük ekranda yan yana düzen sabit kalsın ama görsel çok büyümesin */
@media (min-width: 992px) {
  .csr-block {
    grid-template-columns: 1fr 1.3fr;
    align-items: center;
  }
}
/* Küçük ekranda görsel yüksekliğini biraz düşür */
@media (max-width: 767px) {
  .csr-img img {
    max-height: clamp(220px, 45vw, 360px);
  }
}
/* === ABOUT: görsel/video responsive === */
/* eski foto ölçüsüne yakın; istersen 520/600 yap */
.about-block .about-img {
  /* figure genişliği: ortalanmış ve üst sınırı var */
  max-width: clamp(320px, 60vw, 560px);
  margin: 0 auto 1rem;
}

.about-block .about-img img,
.about-block .about-img video {
  display: block;
  width: 100%;
  height: auto; /* oranı koru */
  border-radius: inherit; /* img--rounded ile aynı köşe */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08); /* fotodaki gibi hafif gölge */
}

/* (opsiyonel) metadata gelmeden yükseklik yer tutucu olsun diye oran sabitle */
.about-block .about-img .about-video {
  aspect-ratio: 4/3; /* videon 4:3 ise; 16/9 ise 16 / 9 yap */
  background: #000; /* poster yokken siyah fon */
}

/* Küçük ekranlarda biraz daha geniş kullan */
@media (max-width: 768px) {
  .about-block .about-img {
    max-width: min(92vw, 560px);
  }
}
@media (max-width: 480px) {
  .about-block .about-img {
    max-width: min(94vw, 560px);
  }
}
/* Mobilde video yerine sadece görseli göster / desktop'ta tam tersi  */
/* Varsayılan: desktop/tablet — sadece video gözüksün */
.about-section.about-who .about-block .about-img .about-media--mobile {
  display: none;
}

.about-section.about-who .about-block .about-img .about-media--desktop {
  display: block;
}

/* Mobil: sadece görsel, video yok */
@media (max-width: 767px) {
  .about-section.about-who .about-block .about-img .about-media--mobile {
    display: block;
  }
  .about-section.about-who .about-block .about-img .about-media--desktop {
    display: none;
  }
}
/* === Policy Pages Common Typography === */
.policy-container {
  /* boyut + yerleşim */
  max-width: min(1000px, 100% - 2rem);
  margin: clamp(16px, 3vw, 32px) auto;
  padding: clamp(16px, 2.5vw, 36px);
  background: #fff;
  border: 1px solid rgba(12, 102, 194, 0.06);
  border-radius: 20px;
  box-shadow: -1px 5px 9px 1px rgba(37, 125, 186, 0.75);
}

.policy-container h1 {
  margin: 0 0 0.5rem 0;
  text-align: center;
  font-size: 36px;
  line-height: 1.2;
}

/* Tarih - her zaman sağda */
.policy-container .policy-updated,
.policy-container .terms-updated,
.policy-container .cookies-updated,
.policy-container .privacy-updated {
  display: block;
  text-align: right !important; /* sağa zorla */
  opacity: 0.7;
  margin-top: 1rem; /* üst boşluk */
  margin-bottom: 2rem; /* alt boşluk */
  font-size: 0.95em;
}

.policy-container p,
.policy-container li {
  font-size: 20px;
  line-height: 1.65;
  margin-bottom: 0.9rem;
  text-align: justify;
}

.policy-container ul,
.policy-container ol {
  margin: 0.6rem 0 1rem 1.2rem;
  padding: 0;
}

.policy-container h2 {
  margin-top: 1.4rem;
  margin-bottom: 0.6rem;
  font-size: 26px;
  line-height: 1.3;
  font-weight: 700;
}

.policy-container a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Orta ekran */
@media (max-width: 1024px) {
  .policy-container p,
  .policy-container li {
    font-size: 18px;
    line-height: 1.6;
  }
  .policy-container h1 {
    font-size: 32px;
  }
  .policy-container h2 {
    font-size: 24px;
  }
}
/* Küçük ekran */
@media (max-width: 767px) {
  .policy-container p,
  .policy-container li {
    font-size: 15px;
    line-height: 1.55;
  }
  .policy-container h1 {
    font-size: 28px;
  }
  .policy-container h2 {
    font-size: 22px;
  }
}
/* =========================
   CONTACT PAGE — UPDATED ICON & FONT SIZES
   ========================= */
:root {
  --about-card-border: rgba(255, 255, 255, 0.1);
  --about-card-bg: #fff;
}

.contact-page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem 1.2rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  grid-template-areas: "info" "form" "map";
}

@media (min-width: 768px) {
  .contact-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas: "info form" "map map";
    align-items: stretch;
  }
}
.contact-card {
  background: var(--about-card-bg);
  border: 1px solid var(--about-card-border);
  border-radius: 16px;
  box-shadow: 12px -5px 28px 18px rgba(0, 119, 182, 0.39);
  padding: 1.4rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.contact-info {
  grid-area: info;
}

.contact-form-wrap {
  grid-area: form;
}

.contact-map {
  grid-area: map;
}

.contact-card h2 {
  font-weight: 700;
  margin: 0 0 0.6rem 0;
  font-size: clamp(1.25rem, 1.2rem + 0.5vw, 1.6rem);
  line-height: 1.25;
}

/* İLETİŞİM BİLGİLERİ */
.contact-lines {
  display: grid;
  gap: 0.8rem;
  font-style: normal;
  padding-left: 0.4rem;
  flex: 1 1 auto;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem); /* Yazılar kademeli küçülür */
}

.contact-line {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: 0.6rem;
  align-items: center;
  line-height: 1.35;
  gap: 1rem; /* ikon ile yazı arasını açar */
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}

.contact-line.location {
  column-gap: 0.8rem;
}

.contact-line i {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px; /* İkon boyutu */
  color: #0a66c2;
}

.contact-lines a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* HIZLI İLETİŞİM KISAYOLLARI */
.quick-actions {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.8rem;
}

.comms-button {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #0c66c2;
  border: 1px solid rgba(0, 0, 0, 0.12);
  box-shadow: 0 4px 12px rgba(0, 88, 200, 0.18);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  text-decoration: none;
  outline: none;
}

.comms-button i {
  font-size: 1rem;
  line-height: 1;
  color: #d1a249;
}

.comms-button:hover {
  transform: translateY(-2px);
  background: #0c66c2;
  box-shadow: 0 0 8px 3px rgba(255, 215, 0, 0.6);
}

/* FORM */
.contact-form {
  display: grid;
  gap: 0.6rem;
  flex: 1 1 auto;
}

.form-row {
  display: grid;
  gap: 0.25rem;
}

.contact-form label {
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 10px;
  padding: 0.6rem 0.75rem;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
  outline: none;
  background: #fff;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: #0a66c2;
  box-shadow: 0 0 0 2px rgba(10, 102, 194, 0.12);
}

.btn-primary {
  align-self: start;
  display: inline-block;
  padding: 0.75rem 1.1rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #0a66c2;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  transition: filter 0.15s ease;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
}

.btn-primary:hover {
  filter: brightness(1.05);
}

/* HARİTA */
.map-aspect {
  aspect-ratio: 4/3;
  background: #eef6ff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  overflow: hidden;
}

@media (max-width: 480px) {
  .map-aspect {
    aspect-ratio: 3/2;
  }
}
.contact-map iframe {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
}

/* ===== Services (List & Detail) — Friends Marin ===== */
/* =============================
   LISTE / KATEGORI: .svc-page
   - Kartlar: otomatik 1→2→3 sütun
   ============================= */
.svc-page {
  margin: 1rem 0;
  /* sayfa başı */
  /* ✅ Kart grid: kart sayısına göre kolon sayısı */
  /* Kart */
  /* Görsel alanı – 16:9 */
  /* Metinler */
}
.svc-page .page-head {
  margin: clamp(8px, 1.4vw, 16px) 0 clamp(14px, 1.8vw, 22px);
}
.svc-page .page-head h1 {
  margin: 0;
  line-height: 1.15;
  font-size: clamp(24px, 3vw, 34px);
}
.svc-page .page-head .lead {
  margin-top: 0.4rem;
  opacity: 0.9;
  font-size: clamp(16px, 2vw, 18px);
}
.svc-page .svc-grid {
  display: grid;
  gap: clamp(14px, 2vw, 24px);
  margin: clamp(12px, 1.4vw, 20px) 0 clamp(18px, 2vw, 26px);
  grid-template-columns: repeat(auto-fit, minmax(clamp(260px, 90vw, 400px), 1fr));
  align-items: stretch;
}
.svc-page .svc-card {
  height: 100%;
}
.svc-page .svc-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: -1px 5px 9px 1px rgba(37, 125, 186, 0.75);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.svc-page .svc-link img {
  transition: all 0.5s ease;
  opacity: 85%;
}
.svc-page .svc-link img:hover {
  transform: scale(1.1);
  opacity: 100%;
}
.svc-page .svc-link:hover {
  transform: translateY(-13px);
  box-shadow: 1px 2px 32px -9px rgba(208, 162, 73, 0.7);
}
.svc-page .svc-media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #eef6ff;
}
.svc-page .svc-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
.svc-page .svc-body {
  padding: 14px 16px 18px;
}
.svc-page .svc-title {
  margin: 0 0 6px;
  font-size: clamp(18px, 2vw, 20px);
  line-height: 1.25;
}
.svc-page .svc-excerpt {
  margin: 0 0 10px;
  font-size: clamp(17px, 1.8vw, 18px);
  color: #1c2430;
  opacity: 0.9;
}
.svc-page .svc-cta {
  display: inline-block;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: var(--accent, #d4a300);
}
@media (max-width: 640px) {
  .svc-page .svc-body {
    padding: 12px 12px 14px;
  }
  .svc-page .svc-page {
    margin: 16px !important; /* 3rem yerine küçük ve simetrik */
  }
  .svc-page .svc-page .svc-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* =============================
   DETAY: .svc-detail
   ============================= */
.svc-detail {
  padding-block: clamp(16px, 2.2vw, 28px) clamp(40px, 4vw, 60px);
  /* mavi gölgeli policy paneli: merkeze al, eni sınırla */
  /* breadcrumb */
  /* title + lead */
  /* hero – kapsayıcı içinde, taşmadan */
  /* içerik grid: ana + aside (istenirse) */
  /* ana metin */
  /* aside */
  /* Butonlar (ortak) */
  /* Tablet ve altı: aside alta insin */
}
.svc-detail .policy-container {
  max-width: 1000px;
  margin-inline: auto;
  padding: clamp(28px, 4vw, 56px) clamp(36px, 6vw, 80px);
}
.svc-detail .svc-breadcrumb {
  font-size: clamp(13px, 1.1vw, 20px);
  color: #6b7b8b;
  margin-bottom: clamp(8px, 1vw, 12px);
  margin-left: 3rem;
}
.svc-detail .svc-breadcrumb a {
  color: inherit;
  text-decoration: none;
}
.svc-detail .svc-breadcrumb a:hover {
  color: #d0a249;
  text-decoration: underline;
}
.svc-detail .svc-breadcrumb span {
  margin: 0 0.35rem;
  opacity: 0.6;
}
.svc-detail .svc-head {
  margin-bottom: clamp(12px, 1.6vw, 18px);
}
.svc-detail .svc-head h1 {
  margin: 0 0 clamp(6px, 1vw, 10px);
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1.2;
}
.svc-detail .svc-head .lead {
  margin: 0;
  font-size: clamp(16px, 1.2vw, 20px);
  opacity: 0.95;
  text-indent: 2rem;
}
.svc-detail .svc-hero {
  /* kartlarla aynı hissiyat: 4:3 kutu */
  aspect-ratio: 4/3;
  width: 60%;
  margin: clamp(12px, 2vw, 24px) auto; /* ortala */
  border-radius: 14px;
  overflow: hidden;
  background: #0a2840; /* ✨ bant rengi */
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.svc-detail .svc-hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover; /* kart ile birebir aynı davranış */
  object-position: center; /* gerekiyorsa ↓ fotoya özel oynatabilirsin */
  /* örn: object-position: 50% 38%; */
}
.svc-detail .svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(260px, 28vw, 360px);
  gap: clamp(18px, 2vw, 28px);
  align-items: start;
}
.svc-detail .svc-main {
  /* tikli liste */
  /* tireli liste */
  /* buton satırı */
}
.svc-detail .svc-main h2 {
  font-size: clamp(18px, 2vw, 22px);
  margin: clamp(14px, 1.6vw, 20px) 0 clamp(8px, 0.9vw, 12px);
}
.svc-detail .svc-main .check {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(12px, 1.4vw, 16px);
}
.svc-detail .svc-main .check li {
  position: relative;
  padding-left: 1.3rem;
  margin: 0.35rem 0;
}
.svc-detail .svc-main .check li::before {
  content: "✔";
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0.6;
  font-size: 0.95em;
}
.svc-detail .svc-main .dash {
  list-style: none;
  padding: 0;
}
.svc-detail .svc-main .dash li {
  margin: 0.35rem 0;
}
.svc-detail .svc-main .dash li::before {
  content: "— ";
  opacity: 0.55;
}
.svc-detail .svc-main .cta-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: clamp(10px, 1.2vw, 14px);
  align-items: center;
}
.svc-detail .svc-aside {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: grid;
  gap: clamp(12px, 1.6vw, 18px);
}
.svc-detail .svc-aside .box {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: clamp(14px, 1.6vw, 18px);
}
.svc-detail .svc-aside .box h3 {
  margin: 0 0 0.5rem;
  font-size: clamp(16px, 1.8vw, 18px);
}
.svc-detail .svc-aside .box .mini {
  margin-top: 0.75rem;
  font-size: 0.95rem;
  color: #475e75;
  line-height: 1.5;
}
.svc-detail .svc-aside .box .dot {
  list-style: disc;
  padding-left: 1.1rem;
  margin: 0.25rem 0 0;
}
.svc-detail .btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 1.1rem; /* aynı yükseklik */
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, filter 0.2s ease, background-color 0.25s ease, color 0.25s ease;
}
.svc-detail .btn:active {
  transform: translateY(1px);
}
.svc-detail .btn-primary {
  background: #d0a249;
  color: #0d2740;
}
.svc-detail .btn-primary:hover {
  filter: brightness(0.96);
  background-color: #0077b6;
  color: #fff;
}
.svc-detail .btn-soft {
  background: #0077b6;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
  /* WhatsApp yeşili */
}
.svc-detail .btn-soft:hover {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
@media (max-width: 1024px) {
  .svc-detail .svc-grid {
    grid-template-columns: 1fr;
  }
  .svc-detail .svc-aside {
    position: static;
  }
  .svc-detail .policy-container {
    margin-left: 15px;
    margin-right: 15px;
  }
}
@media (max-width: 430px) {
  .svc-detail .cta-row {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: clamp(10px, 1.2vw, 14px);
    align-items: center;
    justify-content: center;
  }
}

/* === Tek kart varsa: çok büyümesin, ortaya hizalansın === */
.svc-page .svc-grid > .svc-card:only-child {
  max-width: clamp(320px, 60vw, 760px);
  justify-self: center; /* grid içinde ortaya getir */
}

/* Liste 2+ kartta da aşırı yayılmasın : */
.svc-page .svc-grid {
  max-width: 1500px; /* büyük ekranlarda satırı sınırlayıp ortalar */
  margin-inline: auto;
}

/* Dikey/karesel görselleri kırpmadan sığdırmak için */
.svc-media.-contain img,
.svc-hero.-contain img {
  object-fit: contain;
  background: #eef6ff; /* bant rengi */
}

:root {
  --container-max: 1200px; /* site genel genişlik */
  --container-gutter: clamp(14px, 5vw, 28px);
  --mv-max: 1200px; /* Misyon/Vizyon kapsayıcı genişlik */
  --mv-border-w: 1px; /* M/V dış çerçeve kalınlığı */
  --mv-border-radius: 22px; /* M/V köşe yarıçapı */
}

/* === HOME: Slider (full-bleed) === */
/* sabit header'ın altından başlat */
header {
  margin-bottom: 0 !important;
}

#page > :first-child {
  margin-top: 0 !important;
} /* ilk section güvence */
/* Reusable: Bölüm kapsayıcısı (M/V ile aynı görünüm) */
.section--boxed {
  position: relative;
  padding: clamp(24px, 3.5vw, 36px) clamp(16px, 3vw, 28px);
  border-radius: 24px; /* köşeler */
}

.section--boxed::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #fff;
  border: 2px solid rgba(12, 102, 194, 0.18); /* mavi, hafif belirgin */
  border-radius: inherit;
  box-shadow: -1px 5px 9px 1px rgba(37, 125, 186, 0.75); /* sende tanımlı */
  z-index: 0;
}

.section--boxed > * {
  position: relative;
  z-index: 1;
}

/* Ana sayfa için geniş konfig */
.home-wide {
  --container-max: 1280px; /* 1200 -> 1280: Hizmetler dâhil genel genişlik */
  --mv-max: 1280px; /* M/V kapsayıcı 1280 olsun, metin doğal olarak 2 satıra iner */
  --mv-border-w: 2px; /* çerçeve bir tık kalın */
  --mv-border-radius: 24px; /* köşe biraz daha yuvarlak (isteğe bağlı) */
}

.home-hero {
  margin-top: -0.5px;
  position: relative;
  width: 100%; /* viewport genişliğini doldur */
  aspect-ratio: 16/9;
  min-height: clamp(420px, 72svh, 800px);
  /* ⬇️ kritik: header’dan arta kalan ekran kadar üst sınır */
  max-height: calc(100svh - var(--header-h));
  overflow: hidden;
  background: #0a2840;
  /* full-bleed olduğu için köşe ve gölgeyi kapatmak daha temiz durur */
  border-radius: 0;
  box-shadow: none;
}

.home-hero .slides {
  position: relative;
  width: 100%;
  height: 100%;
}

.home-hero .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.home-hero .slide.is-active {
  opacity: 1;
}

.home-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 35%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* oklar ve noktalar */
.slider-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.9);
  color: #0a2840;
  font-size: 20px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.16);
}

.slider-arrow.-prev {
  left: 10px;
}

.slider-arrow.-next {
  right: 10px;
}

.slider-arrow:hover {
  filter: brightness(0.96);
}

.slider-dots {
  position: absolute;
  left: 0;
  right: 0;
  display: flex;
  gap: 8px;
  justify-content: center;
  z-index: 2;
  bottom: clamp(8px, 2vh, 16px);
}

.slider-dots .dot {
  width: 30px;
  height: 10px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.55);
}

.slider-dots .dot.is-active {
  background: #ffd24a;
}

/* minik taşmaları tamamen kesmek için (gerekirse) */
html {
  overflow-x: clip;
}

/* === Slider: Ken Burns (opsiyonel) === */
.home-hero .slide img {
  will-change: transform;
}

/* img’ye eklenecek sınıflar */
.kb-zoom-in {
  animation: kb-in var(--kb-dur, 7000ms) ease-out both;
}

.kb-zoom-out {
  animation: kb-out var(--kb-dur, 7000ms) ease-out both;
}

/* LCP sırasında ilk slaytta animasyonu kapat */
#home-hero.slider .slide:first-child .js-hero-img {
  animation: none !important;
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
}

/* hafif pan/zoom – göz yormayan değerler */
@keyframes kb-in {
  from {
    transform: scale(1.08) translate(var(--kb-x, 0%), var(--kb-y, 0%));
  }
  to {
    transform: scale(1) translate(0, 0);
  }
}
@keyframes kb-out {
  from {
    transform: scale(1) translate(0, 0);
  }
  to {
    transform: scale(1.08) translate(var(--kb-x, 0%), var(--kb-y, 0%));
  }
}
/* Hareketi sevmeyenler için kapat */
@media (prefers-reduced-motion: reduce) {
  .kb-zoom-in,
  .kb-zoom-out {
    animation: none !important;
  }
}
/* Küçük ekranda biraz daha kompakt istersen */
@media (max-width: 480px) {
  .home-hero {
    min-height: clamp(360px, 65svh, 780px);
  }
}
/* === HOME: Hero overlay (başlık + butonlar) === */
.home-hero::after {
  z-index: 1;
} /* alttaki gradient geride kalsın */
.home-hero .slide figcaption.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(16px, 4vw, 40px);
  z-index: 2; /* overlay gradient'in üstünde */
  pointer-events: none; /* sadece buton/bağlantılar tıklanır */
}

.hero-overlay > div {
  max-width: min(1100px, 92%);
  pointer-events: auto; /* içerik tıklanabilir */
}

.hero-overlay.-center {
  justify-content: center;
  text-align: center;
}

.hero-overlay.-left {
  justify-content: flex-start;
  text-align: left;
}

.hero-overlay.-right {
  justify-content: flex-end;
  text-align: right;
}

.hero-overlay > div h1 {
  margin: 0 0 0.4em;
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.hero-overlay h2 {
  margin: 0 0 0.4em;
  font-size: clamp(22px, 2.6vw, 42px);
  line-height: 1.15;
  color: #fff;
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}

.hero-overlay p {
  margin: 0 0 0.9em;
  font-size: clamp(15px, 1.3vw, 20px);
  color: #fff;
  opacity: 0.95;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

.hero-overlay .cta-row {
  display: flex;
  gap: clamp(8px, 1vw, 12px);
  flex-wrap: wrap;
}

.hero-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.hero-btn:hover {
  transform: translateY(-1px);
  filter: brightness(0.96);
}

.hero-btn.-primary {
  background: #d0a249;
  color: #0d2740;
}

.hero-btn.-soft {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #fff;
}

.hero-btn.-secondary {
  background: #0077b6; /* senin mavi */
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

/* --- HERO buttons: smaller + fluid --- */
.hero-btn {
  font-size: clamp(0.82rem, 0.72rem + 0.35vw, 0.98rem);
  padding: clamp(0.44rem, 0.34rem + 0.55vw, 0.78rem) clamp(0.72rem, 0.52rem + 1vw, 1.2rem);
  min-height: clamp(34px, 2.6vw, 44px);
  box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16); /* biraz daha hafif */
}

.hero-overlay .cta-row {
  gap: clamp(4px, 0.7vw, 10px);
  flex-wrap: nowrap;
}

@media (max-width: 700px) {
  .hero-overlay .cta-row {
    flex-wrap: wrap;
  }
  .hero-overlay > div {
    margin-bottom: 0.8rem;
  }
}
@media (max-width: 520px) {
  .hero-overlay .cta-row {
    width: 100%;
  }
  .hero-btn {
    flex: 1 1 100%;
    text-align: center;
  }
}
/* ok ve noktalar overlay’in üstünde kalsın (küçük z-index dokunuşu) */
.slider-arrow,
.slider-dots {
  z-index: 4;
}

@media (max-width: 640px) {
  .hero-overlay {
    align-items: flex-end;
  }
  .hero-overlay .cta-row {
    width: 100%;
  }
  .hero-btn {
    flex: 1 1 auto;
    text-align: center;
  }
}
/* FIGCAPTION görünürlüğü ↑ */
.hero-overlay > div {
  background: rgba(93, 94, 96, 0.45); /* koyu cam panel */
  backdrop-filter: blur(1px) saturate(115%); /* cam efekti */
  -webkit-backdrop-filter: blur(4px) saturate(115%);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: clamp(14px, 2.2vw, 22px) clamp(16px, 2.6vw, 28px);
  max-width: min(680px, 92vw);
}

.hero-overlay h2,
.hero-overlay p {
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* İstersen daha koyu varyant */
.hero-overlay.-strong > div {
  background: rgba(10, 25, 45, 0.62);
}

/* Arka görseli nazikçe karart */
.home-hero .slide.-dim img {
  filter: brightness(0.82) contrast(1.05) saturate(1.06);
}

/* Sağda duran panel: kutu sağda, içerik soldan hizalı */
.home-hero .slide figcaption.hero-overlay.-right > div {
  text-align: left !important;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.home-hero .slide figcaption.hero-overlay.-right .cta-row {
  justify-content: flex-start;
}

/* === iOS Safari için tam ekran hero fix'i === */
#home-hero.slider {
  position: relative;
  margin: 0;
  padding: 0; /* varsa extra boşlukları kaldır */
  overflow: hidden;
  /* fallback -> svh -> dvh sırasıyla */
  height: calc(100vh - var(--header-h));
  height: calc(100svh - var(--header-h));
}

@supports (height: 100dvh) {
  #home-hero.slider {
    height: calc(100dvh - var(--header-h));
  }
}
/* Slayt kapsayıcı ve her slayt da aynı yüksekliği alsın */
#home-hero.slider .slides,
#home-hero.slider .slide {
  height: 100%;
  position: relative;
  overflow: hidden;
}

/* Görsel tam doldursun */
#home-hero.slider .slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* taşanı kırp */
  object-position: center; /* ortala */
}

/* Mobilde ekstra emniyet: */
@media (max-width: 768px) {
  #home-hero.slider,
  #home-hero.slider .slides,
  #home-hero.slider .slide {
    height: calc(100svh - var(--header-h));
  }
}
/* Her ihtimale karşı: hero’ya yanlışlıkla aspect-ratio verilmişse iptal et */
#home-hero.slider {
  aspect-ratio: auto;
}

/* === HERO SLIDER GÖRÜNÜRLÜK YAMASI (iOS güvenli) === */
#home-hero.slider {
  position: relative;
  overflow: hidden;
}

#home-hero.slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0; /* tüm slaytlar gizli */
  transition: opacity 0.6s ease;
}

#home-hero.slider .slide.is-active {
  opacity: 1;
} /* aktif slide görünür */
/* Görüntü 4/3 ya da 16/9 fark etmeden tam alanı kaplasın */
#home-hero.slider .slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1 !important; /* önceki 'img {opacity:0}' kurallarını ez */
}

/* ===== HERO – KANONİK BLOK ===== */
#home-hero.slider {
  position: relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  height: calc(100vh - var(--header-h, 80px));
  height: calc(100svh - var(--header-h, 80px));
}

@supports (height: 100dvh) {
  #home-hero.slider {
    height: calc(100dvh - var(--header-h, 80px));
  }
}
@media (max-width: 768px) and (orientation: portrait) {
  #home-hero.slider {
    height: clamp(420px, 68svh, 760px);
  }
}
@media (max-width: 900px) and (orientation: landscape) {
  #home-hero.slider {
    height: clamp(260px, 88svw, 420px);
  }
}
#home-hero.slider .slides,
#home-hero.slider .slide {
  height: 100%;
  position: relative;
  overflow: hidden;
}

#home-hero.slider .slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
}

#home-hero.slider .slide.is-active {
  opacity: 1;
}

#home-hero.slider .slide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  transform: translateZ(0);
}

/* === HOME: Slogan marquee === */
.slogan-marquee {
  overflow: hidden;
  margin: 18px 0 26px;
  background: #0077b6;
  padding: 10px 14px;
  color: #fff;
}

.slogan-marquee .marquee-track {
  display: flex;
  align-items: center;
  gap: var(--marquee-gap, clamp(40px, 5vw, 120px));
  white-space: nowrap;
  will-change: transform;
}

/* Tek tekrarın iç düzeni (logo + cümle) – JS ekleyecek */
.slogan-marquee .marquee-chunk {
  display: inline-flex;
  align-items: center;
  gap: 18px;
}

.slogan-marquee .marquee-logo {
  height: 28px;
  width: auto;
}

.slogan-marquee .marquee-text {
  font-weight: 600;
  opacity: 0.95;
  letter-spacing: 2px;
  word-spacing: 1rem;
  font-size: 1.5rem;
}

/* Akış */
.slogan-marquee .marquee-track.is-animating-single {
  animation: fm-marquee-single var(--marquee-duration, 12s) linear infinite;
}

/* -50% değil, JS’in ölçtüğü kadar kaydır */
@keyframes fm-marquee-single {
  from {
    transform: translateX(var(--marquee-start, 100%));
  }
  to {
    transform: translateX(calc(-1 * var(--marquee-shift, 100%)));
  }
}
/* === HOME: Referanslar === */
.refs.section--boxed {
  /* köşelerde taşan görselleri kes */
  overflow: hidden;
}

.refs {
  margin: 20px 0 36px;
}

.refs h2 {
  text-align: center;
}

.refs-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 4vw, 56px);
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  align-items: center;
  justify-items: center;
  /* içerik gerektiğinde daralabilsin (overflow’u önler) */
}
.refs-grid > li {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.refs-grid img {
  width: auto;
  height: auto;
  display: block;
  object-fit: contain;
  /* hücre genişliğini asla aşma */
  max-width: 100%;
  /* yükseklik üst sınırı: ekrana göre akışkan */
  max-height: clamp(42px, 4.2vw, 72px);
  filter: grayscale(0.2);
  transition: transform 0.15s ease, filter 0.15s ease;
}

.refs-grid a:hover img {
  transform: translateY(-2px);
  filter: grayscale(0);
}

/* === HOME: Hizmet Kategorilerimiz === */
.svc-cats {
  margin: 24px 0 34px;
  --svc-max: 1680px; /* bölüm genişliği */
  --svc-card-min: 320px; /* kartın minimum eni: 260 → 320 */
  --svc-gap: clamp(10px, 3vw, 15px); /* kartlar arası boşluk biraz artsın */
}

/* Hizmet Kategorilerimiz + Referanslarımız başlıkları (fluid) */
.svc-cats h2,
.refs h2 {
  /* min 24px → max 38px (320px–≥1440px arası akışkan) */
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.375rem);
  line-height: 1.25;
  text-align: center;
  margin: 0 0 clamp(10px, 1.4vw, 14px);
  border-bottom: 2px solid #0077b6;
  color: #0077b6;
}

.svc-cats h2 {
  margin-bottom: clamp(18px, 3vw, 28px);
}

.svc-cat-grid {
  display: grid;
  margin-inline: auto;
  max-width: var(--svc-max);
  gap: var(--svc-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--svc-card-min), 1fr));
}

/* Güvence: grid çocukları daralabilsin (taşma önler) */
.svc-cat-grid > * {
  min-width: 0;
}

/* kart */
.svc-cat-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  box-shadow: -1px 5px 9px 1px rgba(37, 125, 186, 0.75); /* sende tanımlı */
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.svc-cat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.14);
}

/* görsel alanı */
.svc-cat-card .media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #eef6ff;
  margin: 0;
}

.svc-cat-card .media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform 0.5s ease;
}

.svc-cat-card:hover .media img {
  transform: scale(1.05);
}

/* Portre/kare görsellerde kırpmadan sığdır (Services ile aynı kural) */
.svc-cat-card .media.svc-media.-contain img {
  object-fit: contain;
  background: #eef6ff;
}

/* metin */
.svc-cat-card h3 {
  margin: 10px 14px 4px;
}

.svc-cat-card .cta {
  margin: 0 14px 14px;
  font-weight: 600;
  color: var(--accent, #d4a300);
}

/* hareketi tercih etmeyenlere saygı */
@media (prefers-reduced-motion: reduce) {
  .svc-cat-card,
  .svc-cat-card .media img {
    transition: none !important;
  }
}
/* === Svc Cats: net kırılımlar === */
/* Küçük: 1 sütun */
.svc-cat-grid {
  grid-template-columns: 1fr;
}

/* Orta: 2 sütun (720–1101px) */
@media (min-width: 720px) and (max-width: 1101.98px) {
  .svc-cat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Büyük: 4 sütun (>=1102px) — min kart enini düşür ve 4’lü sabitle */
@media (min-width: 1102px) {
  .svc-cats {
    --svc-card-min: 260px; /* 320 → 260 */
    --svc-gap: 20px;
  }
  .svc-cat-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
/* === Newsletter Modal (minimal) === */
#nl-modal[hidden] {
  display: none !important;
}

#nl-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
}

#nl-modal .nl-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.46);
  backdrop-filter: blur(2px);
}

#nl-modal .nl-dialog {
  position: relative;
  width: min(92vw, 520px);
  background: #fff;
  border-radius: 16px;
  padding: 18px 18px 16px;
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.22);
  animation: nl-pop 0.18s ease-out;
  z-index: 1;
}

@keyframes nl-pop {
  from {
    transform: scale(0.98);
    opacity: 0.6;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}
#nl-modal h3 {
  margin: 0 0 0.35rem;
  font-size: clamp(18px, 2.3vw, 22px);
  color: #0a66c2;
}

#nl-modal .nl-lead {
  margin: 0 0 0.9rem;
  opacity: 0.9;
}

#nl-modal .nl-field {
  display: block;
  margin: 0.6rem 0 0.4rem;
}

#nl-modal .nl-field span {
  display: block;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

#nl-modal .nl-field input[type=email] {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #cdd7e1;
  padding: 0 12px;
  outline: none;
}

#nl-modal .nl-field input[type=email]:focus {
  border-color: #0a66c2;
  box-shadow: 0 0 0 3px rgba(10, 102, 194, 0.15);
}

#nl-modal .nl-consent {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.95rem;
  margin: 0.4rem 0 0.9rem;
}

#nl-modal .nl-consent input {
  margin-top: 0.2rem;
}

#nl-modal .nl-submit {
  background: #ffd24a;
  color: #0d2740;
  border: 0;
  padding: 0.8rem 1rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}

#nl-modal .nl-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

#nl-modal .nl-close {
  position: absolute;
  right: 10px;
  top: 10px;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: #eef3f8;
  cursor: pointer;
  font-size: 20px;
  line-height: 1;
}

#nl-modal .nl-nope {
  margin-top: 0.6rem;
  background: transparent;
  border: 0;
  color: #6a7b8c;
  cursor: pointer;
  text-decoration: underline;
}

#nl-modal .nl-ok {
  margin: 0.6rem 0 0;
  padding: 0.7rem 0.9rem;
  background: #e9f8ef;
  color: #1e7e34;
  border-radius: 10px;
}

/* küçük ekran ayarı */
@media (max-width: 480px) {
  #nl-modal .nl-dialog {
    padding: 16px 14px 14px;
  }
}
/* ===== 404 Sayfası — FriendsMarin sade versiyon ===== */
.page-404 {
  background-color: var(--marine-dark, #0b1e2d);
  min-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 4rem 1rem;
}
.page-404 h1 {
  font-size: clamp(60px, 10vw, 120px);
  color: var(--accent, #ffd166);
  margin-bottom: 0.5rem;
  line-height: 1;
}
.page-404 p {
  font-size: 1.25rem;
  color: #fff;
  margin-bottom: 1.5rem;
}
.page-404 .btn {
  display: inline-block;
  background: var(--accent, #ffd166);
  color: #0b1e2d;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.page-404 .btn:hover {
  opacity: 0.85;
}

/* ============================================
   FRIENDS MARIN — COOKIE BANNER
   ============================================ */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 2px solid rgba(0, 0, 0, 0.1);
  padding: 1.5rem;
  z-index: 9999;
  box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.08);
  display: none; /* JS açana kadar gizli */
}
@media (min-width: 768px) {
  .cookie-banner {
    left: 50%;
    transform: translateX(-50%);
    bottom: 2rem;
    width: 480px;
    border-radius: 14px;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.18);
    border: 1px solid rgba(0, 0, 0, 0.12);
  }
}

.cookie-banner__content {
  text-align: left;
}
@media (min-width: 768px) {
  .cookie-banner__content {
    padding: 0.25rem 0.5rem;
  }
}

.cookie-banner__title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: #00264d; /* Friends Marin koyu lacivert */
}

.cookie-banner__text {
  font-size: 0.95rem;
  color: #333;
  margin-bottom: 1rem;
  line-height: 1.45;
}

.cookie-banner__actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.8rem;
}

.cookie-banner__btn {
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-size: 0.9rem;
  cursor: pointer;
  border: none;
  transition: 0.2s ease-in-out;
  font-weight: 600;
}

.cookie-banner__btn--primary {
  background: #004d99; /* Friends Marin lacivert */
  color: #fff;
}
.cookie-banner__btn--primary:hover {
  background: #003d7a;
}

.cookie-banner__btn--secondary {
  background: #e6e6e6;
  color: #111;
}
.cookie-banner__btn--secondary:hover {
  background: #d9d9d9;
}

.cookie-banner__link {
  display: inline-block;
  font-size: 0.85rem;
  color: #004d99;
  text-decoration: underline;
}
.cookie-banner__link:hover {
  color: #003d7a;
}

/* ====================== MOBİLDE SADECE GEREKSİZ HOVER EFEKTLERİNİ TAMAMEN DEVRE DIŞI BIRAK ====================== */
@media (max-width: 768px) {
  /* Hero img'ye direkt animasyonu kapat */
  .js-hero-img,
  .home-hero img,
  [class*=kb-] {
    animation: none !important;
    transform: none !important;
    will-change: auto !important;
  }
  /* Hero slider’da Ken Burns zoom’u mobilde kapat → en büyük LCP kazancı */
  .kb-zoom-in,
  .kb-zoom-out {
    animation: none !important;
    transform: none !important;
  }
  /* 1. Header logo dümen hover’da dönmesin */
  header .logo img {
    animation: none !important;
  }
  /* 2. Header menü linkleri zıplamasın */
  header .main-menu a {
    transform: none !important;
    transition: none !important;
  }
  /* 3. HİZMET KARTLARI – çok önemli kısım */
  .svc-card,
  .svc-link,
  .svc-cat-card {
    transition: none !important; /* tüm geçişler kapansın */
  }
  .svc-card:hover,
  .svc-link:hover,
  .svc-cat-card:hover {
    transform: none !important; /* yükselme olmasın */
    box-shadow: none !important; /* hover’da büyüyen gölgeyi kapat */
  }
  /* Fotoğrafların büyümesi devam ediyorsa bunu da ekle */
  .svc-card .media img,
  .svc-cat-card .media img {
    transition: none !important;
    transform: none !important;
  }
  /* 4. Ekibimiz kartları */
  .team-card,
  .team-card:hover,
  .team-card .photo-wrap img {
    transition: none !important;
    transform: none !important;
  }
  /* 5. Kurucular kartları */
  .founder-card,
  .founder-card:hover {
    transition: none !important;
    transform: none !important;
  }
  /* 6. Footer linkleri ve ikonları */
  footer a,
  footer .comms-button i,
  footer .social-icons i {
    transition: none !important;
    transform: none !important;
  }
  /* 7. Referans logoları */
  .refs-grid a:hover img {
    transform: none !important;
    transition: none !important;
  }
  /* 8. Hızlı iletişim ikonları */
  .comms-button {
    transition: none !important;
    transform: none !important;
  }
}
/* Erişilebilirlik – dokunmuyoruz */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
/* Sayfa içi anchor scroll’larında header kadar boşluk bırak */
html {
  scroll-behavior: smooth; /* zaten kullanıyoruz ama dursun */
  scroll-padding-top: 96px; /* header yüksekliği kadar */
}

/* Hakkımızda içindeki hedefler */
#kimiz,
#ekip,
#filo,
#sosyal {
  scroll-margin-top: 50px; /* emniyet için hedefte de offset */
}