/* ==================== REKLAM PAGE LAYOUT  ==================== */

/* This is the main flex container for the whole page section */
.Related-Left {
  display: flex;
  justify-content: space-between; /* Creates space between the columns */
  gap: 20px;                     /* The gap between main content and sidebar */
  
  /* Centering the layout on the page */
  max-width: 1200px;
  margin: 20px auto;
  padding: 0 15px;
}

/* This is the main content column on the left */
.Related-Left-ad {
  flex: 1;      /* This tells it to grow and take up the available space */
  min-width: 0; /* A flexbox trick to prevent content from overflowing */
}

/* This is the sidebar column on the right */
.Related-side {
  width: 300px;     /* Give the sidebar a fixed width */
  flex-shrink: 0;   /* Prevent the sidebar from being squished */
}

/* ==================== CONTENT INSIDE 'Related-Left-ad' ==================== */

.Related-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 20px;
}

.Related-header-kıbrıslı-logo {
  padding-top: 2rem;
  width: 80%;
}

.Related-header-info {
  text-align: center;
  line-height: 1.7;
  color: #333;
}

.Related-header-info p {
  margin-bottom: 15px;
}

.Related-header-info-more h2 {
  margin-top: 20px;
  font-size: 1.5rem;
}

/* Container for the ad example images */
.ana-sayfa-Related {
  width: 100%;
  margin-bottom: 15px;
}

.ana-sayfa-Related img {
  width: 100%;
  display: block; /* Removes any extra space below the image */
}


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

/* On tablets and smaller screens, stack the layout vertically */
@media (max-width: 992px) {
  .Related-Left {
    flex-direction: column; /* Stack main content and sidebar */
  }

  .Related-side {
    width: 100%; /* Make sidebar full width */
    margin-top: 30px;
  }
}