/* =========================
   FOOTER – FINAL & CLEAN
========================= */

#corp-footer-root {
  background: #1c1f24;
  color: #c9ced6;
  font-size: 14px;
}

/* =========================
   MAIN GRID (SOL + SAG)
========================= */

#corp-footer-root .cf-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 50px 20px;

  display: grid;
  grid-template-columns: 260px 1fr; /* SOL PANEL + SAG ALAN */
  gap: 32px;
  align-items: stretch;            /* yukseklik senkron */
}

/* =========================
   SOL PANEL – TAKIP ET
========================= */

#corp-footer-root .cf-col.cf-follow {
  background: #0f1217;
  padding: 22px;
  border-left: 4px solid #1695d5;

  display: flex;
  flex-direction: column;
  height: 100%;                    /* kritik */
}

/* =========================
   SAG PANEL – KOLONLAR
========================= */

#corp-footer-root .cf-right {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

/* Ortak kolon */
#corp-footer-root .cf-col {
  min-width: 0;
}

/* =========================
   TITLES
========================= */

#corp-footer-root .cf-title {
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 16px;
  letter-spacing: 0.8px;
}

/* =========================
   FOOTER LINKS
========================= */

#corp-footer-root .cf-col > a {
  display: flex;
  align-items: center;
  gap: 8px;

  color: #c9ced6;
  text-decoration: none;
  margin-bottom: 10px;
  font-size: 14px;
}

#corp-footer-root .cf-col > a i {
  font-size: 14px;
  color: #8fa3b8;
  transition: color .2s ease;
}

#corp-footer-root .cf-col > a:hover {
  color: #ffffff;
}

#corp-footer-root .cf-col > a:hover i {
  color: #ffffff;
}

/* =========================
   FOLLOW ICONS
========================= */

#corp-footer-root .cf-icons {
  display: flex;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 16px;
}

#corp-footer-root .cf-icons a {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #20242b;
  border-radius: 8px;

  font-size: 16px;
  color: #9aa1ad;

  transition: background .2s ease,
              color .2s ease,
              transform .2s ease;
}

#corp-footer-root .cf-icons a:hover {
  background: #11417f;
  color: #ffffff;
  transform: translateY(-2px);
}

/* =========================
   TEXT
========================= */

#corp-footer-root p {
  margin: 0;
  line-height: 1.5;
  color: #9aa1ad;
}

/* =========================
   BOTTOM BAR
========================= */

#corp-footer-root .cf-bottom {
  background: #15171b;
  border-top: 1px solid rgba(255,255,255,0.08);
  text-align: center;
  padding: 16px;
  font-size: 13px;
  color: #9aa1ad;
}

/* =========================
   TOP LINE
========================= */

#corp-footer-root{
  position: relative;
  padding-top: 8px;   /* şerit için yer aç */
}

#corp-footer-root::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height:8px;
  background:#596576;
}


/* =========================
   RESPONSIVE
========================= */

/* TABLET */
@media (max-width: 992px) {
  #corp-footer-root .cf-right {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* MOBILE */
@media (max-width: 640px) {
  #corp-footer-root .cf-wrap {
    grid-template-columns: 1fr;
  }

  #corp-footer-root .cf-right {
    grid-template-columns: 1fr;
  }

  #corp-footer-root .cf-col.cf-follow {
    border-left: none;
    border-top: 4px solid #1695d5;
  }
}

/* =========================
   BLOG – FOLLOW ICONS
========================= */

.blog-follow-icons.cf-icons{
  --icon-size: 26px;        /* IKON BOYUTU BURADAN YONETILIR */

  display:flex;
  justify-content:center;
  align-items:center;
  gap:14px;
}

.blog-follow-icons.cf-icons a{
  width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:8px;
  color:#ffffff;

  transition:transform .2s ease;
}

/* Font Awesome ikonlar */
.blog-follow-icons.cf-icons i{
  font-size:var(--icon-size);
  line-height:1;
}

/* SVG ikonlar (X dahil) */
.blog-follow-icons.cf-icons svg{
  width:var(--icon-size);
  height:var(--icon-size);
  display:block;
}

/* Marka renkleri */
.blog-follow-icons a[aria-label="YouTube"]{
  background:#FF0000;
}

.blog-follow-icons a[aria-label="LinkedIn"]{
  background:#0A66C2;
}

.blog-follow-icons a[aria-label="X"]{
  background:#000000;
}

.blog-follow-icons a[aria-label="Instagram"]{
  background:#C13584;
}

.blog-follow-icons.cf-icons a:hover{
  transform:translateY(-2px);
}