/* ═══════════════════════════════════════════════════════════════
   Story / Craft Section (Zanaat & Hikaye)
   Marka Kimliği: Sevim Ayakkabı (Deri Şıklığı)
   ═══════════════════════════════════════════════════════════════ */

.cc_kwrhtW2rBB_image_with_text .story-section {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px 16px; /* Mobilde dar padding */
  background-color: transparent; 
  gap: 24px; 
}

@media (min-width: 768px) {
  .cc_kwrhtW2rBB_image_with_text .story-section {
    flex-direction: row;
    align-items: center;
    padding: 60px 48px; /* Masaüstünde devasa boşluk (120px) yarıya indi */
    gap: 8%;
  }
  
  .cc_kwrhtW2rBB_image_with_text .story-section--right .story-image-area {
    order: 2;
  }
  .cc_kwrhtW2rBB_image_with_text .story-section--right .story-text-area {
    order: 1;
  }
}

.cc_kwrhtW2rBB_image_with_text .story-image-area {
  flex: 1;
  width: 100%;
  position: relative;
}

.cc_kwrhtW2rBB_image_with_text .story-image-wrapper { max-width: 500px; margin: 0 auto;
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 2; /* Mobilde geniş (landscape) format, çok yer kaplamasın */
  max-height: 280px; /* Uzun görseller için limit */
  overflow: hidden;
  background-color: var(--color-surface-alt, #F2EDE8);
}

@media (min-width: 768px) {
  .cc_kwrhtW2rBB_image_with_text .story-image-wrapper { max-width: 500px; margin: 0 auto;
    aspect-ratio: 4 / 5; /* Masaüstünde asil dikey portre formu */
    max-height: none;
  }
}

.cc_kwrhtW2rBB_image_with_text .story-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s ease;
}

.cc_kwrhtW2rBB_image_with_text .story-image-wrapper:hover .story-image {
  transform: scale(1.03);
}

.cc_kwrhtW2rBB_image_with_text .story-text-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.cc_kwrhtW2rBB_image_with_text .story-text-content {
  max-width: 500px; /* Metin çok yayılmasın, okunaklı kalsın */
}

.cc_kwrhtW2rBB_image_with_text .story-title {
  font-family: var(--font-body, 'cc_kwrhtW2rBB_DM Sans', "DM Sans Fallback", "DM Sans Fallback Android", sans-serif);
  font-size: clamp(22px, 4vw, 42px); /* Mobilde küçüldü */
  font-weight: 400;
  line-height: 1.25;
  
  margin: 0 0 16px 0; /* Mobilde boşluk daraltıldı */
  letter-spacing: 0.1em;
  /* text-transform: uppercase; removed */
}

@media (min-width: 768px) {
  .cc_kwrhtW2rBB_image_with_text .story-title {
    margin: 0 0 64px 0; /* Masaüstünde o bol nefes alan lüks boşluk */
  }
}

.cc_kwrhtW2rBB_image_with_text .story-desc {
  font-family: var(--font-body, 'cc_kwrhtW2rBB_DM Sans', "DM Sans Fallback", "DM Sans Fallback Android", sans-serif);
  font-size: 13px; /* Mobilde küçük, temiz */
  font-weight: 300; /* Daha hafif bir gövde metni */
  line-height: 1.6;
  color: var(--color-text-secondary, #4A4641); /* Biraz daha tok ama yumuÅŸak gri */
  margin: 0 0 24px 0; /* Boşluk azaldı */
}

@media (min-width: 768px) {
  .cc_kwrhtW2rBB_image_with_text .story-desc {
    font-size: 15px; 
    line-height: 1.8;
    margin: 0 0 40px 0;
  }
}

/* İnce, sade bir bağlantı */
.cc_kwrhtW2rBB_image_with_text .story-link { display: inline-block; padding: 12px 24px; background-color: #1A1815; color: #FAF8F5; border-radius: 4px; /* text-transform: uppercase; removed */ letter-spacing: 0.1em;
  font-family: var(--font-body, 'cc_kwrhtW2rBB_DM Sans', "DM Sans Fallback", "DM Sans Fallback Android", sans-serif);
  font-size: 12px;
  font-weight: 400;
  
  text-decoration: none;
  /* text-transform: uppercase; removed */
  letter-spacing: 0.08em;
  
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease;
}

@media (min-width: 768px) {
  .cc_kwrhtW2rBB_image_with_text .story-link { display: inline-block; padding: 12px 24px; background-color: #1A1815; color: #FAF8F5; border-radius: 4px; /* text-transform: uppercase; removed */ letter-spacing: 0.1em;
    font-size: 13px;
    padding-bottom: 6px;
  }
}

.cc_kwrhtW2rBB_image_with_text .story-link:hover {
  color: #1A1815; background-color: #FAF8F5; border: 1px solid #1A1815;
  border-bottom: 1px solid #6B2E2E;
}