/* ==========================================================================
   HAKKIMIZDA — tasarım ASVARIS sitesine native olarak gömülüdür (#dc-root).
   Bu dosya yalnızca duyarlı davranışı ve site ile çakışmaları giderir;
   renk ve tipografi tasarımın kendi stillerindedir (helmet bloğu).
   Kapsam: #dc-root — site geneline hiçbir kural sızmaz.
   ========================================================================== */

.hakkimizda-dc { display: block; width: 100%; margin: 0; padding: 0; }
#dc-root { display: block; width: 100%; }
#dc-root img { max-width: 100%; }

/* Sabit başlık (76px) ve sekme şeridi altında kalan çapalar (#yaklasim, #biz, #partnerler) */
#dc-root section[id] { scroll-margin-top: 150px; }

/* --------------------------------------------------------------------------
   Sayfanın üstündeki dört sekme (hakkimizda/index.html .hk-sekmeler).
   Sitenin ortak .academy-switcher şeridini kullanır: başlığın altına yapışır,
   tasarım kutusunun dışında durduğu için içeriğin üstüne binmez. Burada yalnızca
   iki satırlı (başlık + alt yazı) görünüm tanımlanır.
   -------------------------------------------------------------------------- */
.hk-sekmeler .wrap { gap: 8px; scrollbar-width: none; }
.hk-sekmeler .wrap::-webkit-scrollbar { display: none; }
.hk-sekmeler a { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 18px; border-radius: 14px; line-height: 1.25; }
.hk-sekmeler a b { font-size: 13.5px; font-weight: 700; color: #1b2340; }
.hk-sekmeler a span { font-size: 11.5px; font-weight: 500; color: #7a8296; }
.hk-sekmeler a.active b { color: #5a3cc4; }
.hk-sekmeler a.active span { color: #6545c8; }

/* --------------------------------------------------- 1100px ve altı ------ */
@media (max-width: 1100px) {
  #dc-root section { padding-left: 28px !important; padding-right: 28px !important; }
  #dc-root .hk-g5 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  #dc-root .hk-chain { grid-template-columns: minmax(0, 1fr) !important; }
  /* Fotoğraflar dar ekranda CTA metnini ezmesin */
  #dc-root .hk-cta-media { height: 280px !important; }
  #dc-root .hk-cta-card { padding: 52px 56px !important; }
}

/* ---------------------------------------------------- 980px ve altı ------ */
@media (max-width: 980px) {
  /* Portreler ve yüzen düğmeler kartın üstüne binmesin; düğmeler DOM'da
     karttan önce geldiği için sırayı flex ile düzeltiyoruz (iletişim ile aynı). */
  #dc-root .hk-cta-wrap { display: flex; flex-direction: column; }
  #dc-root .hk-cta-media { display: none !important; }
  #dc-root .hk-cta-card { order: 1; padding: 44px 34px !important; min-height: 0 !important; }
  #dc-root .hk-cta-pills { order: 2; position: static !important; margin-top: 18px; justify-content: flex-start; }
}

/* ---------------------------------------------------- 900px ve altı ------ */
@media (max-width: 900px) {
  #dc-root .hk-g4,
  #dc-root .hk-g5 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #dc-root .hk-g3,
  #dc-root .hk-side { grid-template-columns: minmax(0, 1fr) !important; }
  #dc-root section { padding-top: 48px !important; padding-bottom: 48px !important; }
}

/* ---------------------------------------------------- 760px ve altı ------ */
@media (max-width: 760px) {
  #dc-root section { padding-left: 16px !important; padding-right: 16px !important; }

  /* Sekmeler dar ekranda yatay kaydırılır; ortalanmış taşma ilk sekmeyi kesmesin */
  .hk-sekmeler .wrap { justify-content: flex-start; }
  .hk-sekmeler a { padding: 7px 14px; }

  #dc-root .hk-g2,
  #dc-root .hk-g3,
  #dc-root .hk-g4,
  #dc-root .hk-g5 { grid-template-columns: minmax(0, 1fr) !important; }
  #dc-root .hk-logos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Kart iç boşlukları dar ekranda küçülür */
  #dc-root div[style*="padding: 60px 72px"] { padding: 30px 22px !important; }
  #dc-root div[style*="padding: 44px 56px"] { padding: 26px 20px !important; }
  #dc-root div[style*="padding: 34px 36px"] { padding: 22px 18px !important; }
  #dc-root div[style*="padding: 28px 30px"] { padding: 20px 18px !important; }
  #dc-root div[style*="padding: 26px 28px"] { padding: 20px 18px !important; }
}

/* ---------------------------------------------------- 560px ve altı ------ */
@media (max-width: 560px) {
  #dc-root h1 { font-size: clamp(27px, 7.6vw, 38px) !important; }
  #dc-root h2 { font-size: clamp(22px, 6.2vw, 34px) !important; }
  #dc-root h3 { font-size: 17px !important; }
  #dc-root a[style*="border-radius: 999px"] { white-space: normal !important; }

  /* Sağ alttaki maskot içeriğin üstüne binmesin */
  #dc-root { padding-bottom: 8px; }
}

/* --------------------------------------------------- hareket tercihi ----- */
@media (prefers-reduced-motion: reduce) {
  #dc-root *,
  #dc-root *::before,
  #dc-root *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}